Add underline, arrow, and subtitle href structure

src/lib/holocene/icon/paths.ts

@@ -1,3 +1,4 @@
+import action from './svg/action.svelte';
 import activity from './svg/activity.svelte';
 import addSquare from './svg/add-square.svelte';
 import add from './svg/add.svelte';
@@ -66,6 +67,7 @@ import github from './svg/github.svelte';
 import graph from './svg/graph.svelte';
 import happyLappy from './svg/happy-lappy.svelte';
 import heartbeat from './svg/heartbeat.svelte';
+import house from './svg/house.svelte';
 import hyphen from './svg/hyphen.svelte';
 import identities from './svg/identities.svelte';
 import importIcon from './svg/import.svelte';
@@ -108,6 +110,7 @@ import server from './svg/server.svelte';
 import settings from './svg/settings.svelte';
 import shield from './svg/shield.svelte';
 import signal from './svg/signal.svelte';
+import slashForward from './svg/slash-forward.svelte';
 import sliders from './svg/sliders.svelte';
 import spinner from './svg/spinner.svelte';
 import starEmpty from './svg/star-empty.svelte';
@@ -138,10 +141,12 @@ import userGroup from './svg/user-group.svelte';
 import verticalEllipsis from './svg/vertical-ellipsis.svelte';
 import warning from './svg/warning.svelte';
 import workflow from './svg/workflow.svelte';
+import workflows from './svg/workflows.svelte';
 import xmarkFilled from './svg/xmark-filled.svelte';
 import xmarkSquare from './svg/xmark-square.svelte';
 
 export const icons = {
+  action,
   activity,
   'add-square': addSquare,
   add,
@@ -210,6 +215,7 @@ export const icons = {
   graph,
   'happy-lappy': happyLappy,
   heartbeat,
+  house,
   hyphen,
   identities,
   inactive,
@@ -252,6 +258,7 @@ export const icons = {
   settings,
   shield,
   signal,
+  'slash-forward': slashForward,
   sliders,
   spinner,
   'star-empty': starEmpty,
@@ -283,6 +290,7 @@ export const icons = {
   warning,
   'system-window': systemWindow,
   workflow,
+  workflows,
   'xmark-filled': xmarkFilled,
   'xmark-square': xmarkSquare,
 } as const;

src/lib/holocene/icon/svg/action.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+  let props = $props();
+</script>
+
+<Svg {...props}>
+  <path
+    d="m 12,0 c 6.32265,0 11.49885,4.890495 11.9619,11.09475 H 24 v 2.25 H 23.9238 C
+23.2554,19.3392 18.17295,24 12,24 5.82711,24 0.744525,19.3392 0.07617,13.34475 H
+0 v -2.25 H 0.038085 C 0.501195,4.890495 5.677365,0 12,0 Z M 9.3282,8.286615 C
+9.19305,7.98075 8.75544,7.9908 8.63526,8.30274 L 7.34619,11.6601 C
+6.956715,12.6747 5.982285,13.34475 4.895505,13.34475 H 2.34522 C 3.0003,18.09315
+7.071495,21.75 12,21.75 c 4.92855,0 8.9997,-3.65685 9.65475,-8.40525 h -2.001 c
+-0.1491,0 -0.28455,0.08895 -0.34425,0.2256 l -1.4106,3.24015 c -0.9135,2.09715
+-3.88635,2.10345 -4.809,0.01035 z M 12,2.25 c -5.07939,0 -9.25062,3.88458
+-9.70752,8.84475 h 2.603025 c 0.155025,0 0.2943,-0.0957 0.3501,-0.2403 L
+6.534675,7.497075 C 7.3743,5.309415 10.4424,5.234295 11.3877,7.378425 l
+3.7602,8.534175 c 0.13185,0.2991 0.55665,0.2982 0.687,-0.0015 l 1.4121,-3.24015
+c 0.4173,-0.95715 1.3626,-1.5762 2.40675,-1.5762 h 2.0538 C 21.25065,6.13458
+17.07945,2.25 12,2.25 Z"
+    fill="currentcolor"
+  />
+</Svg>

src/lib/holocene/icon/svg/house.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+  let props = $props();
+</script>
+
+<Svg {...props}>
+  <path
+    d="M 12.66315,2.041935 11.9979,1.5 11.3325,2.041935 0,11.23845 1.335,12.741
+2.382405,11.88705 V 21.51465 22.5 h 1.03023 17.170515 1.0302 v -0.98535 -9.6276
+L 22.665,12.741 24,11.23845 12.6675,2.041935 Z M 4.44285,20.5293 V 10.2162 L
+11.9979,4.08651 19.5528,10.2162 V 20.5293 H 16.1187 V 13.632 12.64665 H 15.0885
+8.90718 7.87695 v 0.98535 6.8973 z m 5.4945,0 v -5.91195 h 4.12095 v 5.91195 z"
+    fill="currentcolor"
+  />
+</Svg>

src/lib/holocene/icon/svg/overview.svelte

@@ -5,7 +5,7 @@
 
 <Svg {...props}>
   <path
-    d="M 3.5452871,2.6119654 V 11.155731 H 8.1760879 V 2.6119654 Z M 1.2298799,0.04882678 H 3.5452871 8.1760879 10.491482 V 2.6119654 11.155731 13.71887 H 8.1760879 3.5452871 1.2298799 V 11.155731 2.6119654 Z M 15.894031,12.86449 v 8.54375 h 4.630841 v -8.54375 z m -2.31534,-2.563139 h 2.31534 4.630841 2.31542 v 2.563139 8.54375 2.563154 h -2.31542 -4.630841 -2.31534 V 21.40824 12.86449 Z M 8.1760879,17.990753 H 3.5452871 V 21.40824 H 8.1760879 Z M 3.5452871,15.427599 h 4.6308008 2.3153941 v 2.563154 3.417487 2.563154 H 8.1760879 3.5452871 1.2298799 V 21.40824 17.990753 15.427599 Z M 15.894031,2.6119654 v 3.4175034 h 4.630841 V 2.6119654 Z m -2.31534,-2.56313862 h 2.31534 4.630841 2.31542 V 2.6119654 6.0294688 8.5926075 h -2.31542 -4.630841 -2.31534 V 6.0294688 2.6119654 Z"
+    d="M 2.25,3.75 V 7.5 h 19.5 V 3.75 Z m 19.5,16.5 V 9.75 h -4.5 v 10.5 z m -6.75,0 V 9.75 H 2.25 v 10.5 z M 21.75,1.5 H 24 v 2.25 16.5 2.25 H 21.75 2.25 0 V 20.25 3.75 1.5 h 2.25 z"
     fill="currentcolor"
   />
 </Svg>

src/lib/holocene/icon/svg/slash-forward.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+  let props = $props();
+</script>
+
+<Svg {...props}>
+  <path d="M 18.75,0 H 16.3674 L 5.25,24 h 2.382615 z" fill="currentColor" />
+</Svg>

src/lib/holocene/icon/svg/support.svelte

@@ -5,7 +5,7 @@
 
 <Svg {...props}>
   <path
-    d="M18.0516 19.6453C16.3922 20.9625 14.2875 21.75 12 21.75C9.7125 21.75 7.60781 20.9625 5.94844 19.6453L9.71719 15.8766C10.3875 16.2703 11.1703 16.5 12.0047 16.5C12.8391 16.5 13.6219 16.275 14.2922 15.8766L18.0609 19.6453H18.0516ZM21.2438 19.6547C22.9641 17.5734 24 14.9109 24 12C24 9.08906 22.9641 6.42656 21.2438 4.34531L21.7969 3.79688L22.5938 3L21 1.41094L20.2031 2.20312L19.6547 2.75625C17.5734 1.03594 14.9109 0 12 0C9.08906 0 6.42656 1.03594 4.34531 2.75625L3.79688 2.20312L3 1.40625L1.41094 3L2.20312 3.79688L2.75625 4.34531C1.03594 6.42656 0 9.08906 0 12C0 14.9109 1.03594 17.5734 2.75625 19.6547L2.20312 20.2031L1.40625 21L3 22.5891L3.79688 21.7922L4.35 21.2391C6.42656 22.9641 9.08906 24 12 24C14.9109 24 17.5734 22.9641 19.6547 21.2438L20.2031 21.7969L21 22.5938L22.5891 21L21.7922 20.2031L21.2391 19.65L21.2438 19.6547ZM19.6453 18.0563L15.8766 14.2875C16.2703 13.6172 16.5 12.8344 16.5 12C16.5 11.1656 16.275 10.3828 15.8766 9.7125L19.6453 5.94375C20.9625 7.60781 21.75 9.7125 21.75 12C21.75 14.2875 20.9625 16.3922 19.6453 18.0516V18.0563ZM18.0516 4.35469L14.2828 8.12344C13.6125 7.72969 12.8297 7.5 11.9953 7.5C11.1609 7.5 10.3781 7.725 9.70781 8.12344L5.94844 4.35469C7.60781 3.0375 9.7125 2.25 12 2.25C14.2875 2.25 16.3922 3.0375 18.0516 4.35469ZM8.12344 14.2875L4.35469 18.0516C3.0375 16.3922 2.25 14.2875 2.25 12C2.25 9.7125 3.0375 7.60781 4.35469 5.94844L8.12344 9.71719C7.72969 10.3875 7.5 11.1703 7.5 12.0047C7.5 12.8391 7.725 13.6219 8.12344 14.2922V14.2875ZM9.75 12C9.75 11.4033 9.98705 10.831 10.409 10.409C10.831 9.98705 11.4033 9.75 12 9.75C12.5967 9.75 13.169 9.98705 13.591 10.409C14.0129 10.831 14.25 11.4033 14.25 12C14.25 12.5967 14.0129 13.169 13.591 13.591C13.169 14.0129 12.5967 14.25 12 14.25C11.4033 14.25 10.831 14.0129 10.409 13.591C9.98705 13.169 9.75 12.5967 9.75 12Z"
+    d="m 11.999312,0 c 2.93008,1.1350852e-4 5.614557,1.0502234 7.698432,2.7947642 L 21.665272,0.82858382 23.169969,2.333352 21.202441,4.2995182 C 22.947918,6.3833076 23.999858,9.0686213 24,11.999312 c -1.42e-4,2.930365 -1.052508,5.614557 -2.797559,7.698432 l 1.967528,1.967528 -1.504697,1.504697 -1.967528,-1.967528 C 17.613869,22.947492 14.929677,23.999858 11.999312,24 9.0690044,23.999858 6.3845705,22.947492 4.3009087,21.202441 L 2.3347425,23.169969 0.82858382,21.665272 2.7947642,19.697744 C 1.0502234,17.613869 1.1350852e-4,14.929392 0,11.999312 9.9319954e-5,9.0689334 1.0498544,6.3832083 2.7947642,4.2995182 L 0.82858382,2.333352 2.333352,0.82858382 4.2995182,2.7947642 C 6.3832083,1.0498544 9.0689334,9.9319954e-5 11.999312,0 Z M 5.8139773,19.689372 c 1.692568,1.363379 3.8429444,2.182202 6.1853347,2.182343 2.34239,-1.41e-4 4.492526,-0.818964 6.185363,-2.182343 l -2.708881,-2.70888 c -0.985395,0.689138 -2.183053,1.095924 -3.476482,1.096066 -1.29343,-1.42e-4 -2.4912283,-0.406928 -3.4764822,-1.096066 z M 16.980492,8.5214534 c 0.689564,0.9853533 1.095924,2.1841456 1.096066,3.4778586 -1.42e-4,1.293429 -0.406928,2.491087 -1.096066,3.476482 l 2.70888,2.708881 c 1.363379,-1.692837 2.182202,-3.842973 2.182343,-6.185363 C 21.871574,9.6566379 21.053177,7.5052826 19.689372,5.812601 Z M 4.3078327,5.812601 c -1.3631805,1.6925823 -2.1794628,3.8443207 -2.1795479,6.186711 1.135e-4,2.342107 0.8167363,4.492667 2.1795479,6.185363 l 2.710243,-2.708881 C 6.3291925,14.490399 5.9235272,13.2926 5.9234421,11.999312 5.9235272,10.705882 6.3277169,9.5066649 7.0166852,8.5214534 Z m 7.6914793,2.2391258 c -2.1800731,2.27e-4 -3.9473582,1.7675121 -3.9475852,3.9475852 2.128e-4,2.180073 1.7675121,3.948678 3.9475852,3.948961 2.180073,-1.42e-4 3.948819,-1.768888 3.948961,-3.948961 C 15.94799,9.8192389 14.179385,8.0519396 11.999312,8.0517268 Z m 0,-5.923442 C 9.6569217,2.1283699 7.5051833,2.9446522 5.812601,4.3078327 l 2.7102288,2.7088525 c 0.985112,-0.688571 2.1834782,-1.093158 3.4764822,-1.0932431 1.29272,8.51e-5 2.489952,0.405041 3.475063,1.0932431 l 2.7103,-2.7088525 C 16.491979,2.9450211 14.341419,2.1283983 11.999312,2.1282848 Z"
     fill="currentcolor"
   />
 </Svg>

src/lib/holocene/icon/svg/usage.svelte

@@ -5,7 +5,7 @@
 
 <Svg {...props}>
   <path
-    d="M12 2.25C14.5859 2.25 17.0658 3.27723 18.8943 5.10571C20.7228 6.93419 21.75 9.41414 21.75 12C21.75 14.5859 20.7228 17.0658 18.8943 18.8943C17.0658 20.7228 14.5859 21.75 12 21.75C9.41414 21.75 6.93419 20.7228 5.10571 18.8943C3.27723 17.0658 2.25 14.5859 2.25 12C2.25 9.41414 3.27723 6.93419 5.10571 5.10571C6.93419 3.27723 9.41414 2.25 12 2.25ZM12 24C15.1826 24 18.2348 22.7357 20.4853 20.4853C22.7357 18.2348 24 15.1826 24 12C24 8.8174 22.7357 5.76516 20.4853 3.51472C18.2348 1.26428 15.1826 0 12 0C8.8174 0 5.76516 1.26428 3.51472 3.51472C1.26428 5.76516 0 8.8174 0 12C0 15.1826 1.26428 18.2348 3.51472 20.4853C5.76516 22.7357 8.8174 24 12 24ZM13.5 5.25C13.5 4.85218 13.342 4.47064 13.0607 4.18934C12.7794 3.90804 12.3978 3.75 12 3.75C11.6022 3.75 11.2206 3.90804 10.9393 4.18934C10.658 4.47064 10.5 4.85218 10.5 5.25C10.5 5.64782 10.658 6.02936 10.9393 6.31066C11.2206 6.59196 11.6022 6.75 12 6.75C12.3978 6.75 12.7794 6.59196 13.0607 6.31066C13.342 6.02936 13.5 5.64782 13.5 5.25ZM12 19.125C13.4484 19.125 14.625 17.9484 14.625 16.5C14.625 15.8438 14.3859 15.2437 13.9828 14.7844L17.1562 7.57969L17.6109 6.54844L15.5531 5.64375L15.0984 6.675L11.925 13.875C10.5094 13.9125 9.375 15.075 9.375 16.5C9.375 17.9484 10.5516 19.125 12 19.125ZM9 7.5C9 7.10218 8.84196 6.72064 8.56066 6.43934C8.27936 6.15804 7.89782 6 7.5 6C7.10218 6 6.72064 6.15804 6.43934 6.43934C6.15804 6.72064 6 7.10218 6 7.5C6 7.89782 6.15804 8.27936 6.43934 8.56066C6.72064 8.84196 7.10218 9 7.5 9C7.89782 9 8.27936 8.84196 8.56066 8.56066C8.84196 8.27936 9 7.89782 9 7.5ZM5.25 13.5C5.64782 13.5 6.02936 13.342 6.31066 13.0607C6.59196 12.7794 6.75 12.3978 6.75 12C6.75 11.6022 6.59196 11.2206 6.31066 10.9393C6.02936 10.658 5.64782 10.5 5.25 10.5C4.85218 10.5 4.47064 10.658 4.18934 10.9393C3.90804 11.2206 3.75 11.6022 3.75 12C3.75 12.3978 3.90804 12.7794 4.18934 13.0607C4.47064 13.342 4.85218 13.5 5.25 13.5ZM20.25 12C20.25 11.6022 20.092 11.2206 19.8107 10.9393C19.5294 10.658 19.1478 10.5 18.75 10.5C18.3522 10.5 17.9706 10.658 17.6893 10.9393C17.408 11.2206 17.25 11.6022 17.25 12C17.25 12.3978 17.408 12.7794 17.6893 13.0607C17.9706 13.342 18.3522 13.5 18.75 13.5C19.1478 13.5 19.5294 13.342 19.8107 13.0607C20.092 12.7794 20.25 12.3978 20.25 12Z"
+    d="M 23.9985,23.993424 H 0.00146991 L 0,21.743565 H 23.997 Z M 6.8081645,2.1187767 C 7.328407,-0.71283628 11.389838,-0.70356686 11.896656,2.130491 l 2.696682,15.095806 c 0.0219,0.122993 0.06855,0.176989 0.105443,0.206537 0.0474,0.0375 0.122693,0.06765 0.215387,0.0702 0.09254,0.0024 0.170389,-0.02355 0.219586,-0.0585 0.0384,-0.02745 0.0888,-0.07875 0.117293,-0.199188 l 1.457309,-6.191613 C 16.983739,9.8865062 18.025423,9.0603579 19.224898,9.0602079 H 24 v 2.2498591 h -4.775102 c -0.15554,1.5e-4 -0.290531,0.108144 -0.326679,0.259334 L 17.44076,17.759364 C 16.79745,20.492793 12.872195,20.386 12.378576,17.621673 L 9.6820449,2.5259713 C 9.6590963,2.3982093 9.6098994,2.3445576 9.5736016,2.3165244 9.5259046,2.2797467 9.4480595,2.2495986 9.3525155,2.2491336 c -0.095844,-2.25e-4 -0.1745891,0.030838 -0.2227361,0.067391 -0.036298,0.027913 -0.086245,0.08065 -0.1097931,0.207992 L 7.7983426,9.1905497 C 7.5731467,10.418223 6.5020336,11.309767 5.2540666,11.310067 H 0.00146991 V 9.0602079 H 5.2540666 c 0.1619749,-3e-4 0.3017962,-0.1159578 0.3310293,-0.2753378 z"
     fill="currentcolor"
   />
 </Svg>

src/lib/holocene/icon/svg/workflows.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+  let props = $props();
+</script>
+
+<Svg {...props}>
+  <path
+    d="M 7.8124945,24 H 0 V 16.187491 H 7.8124945 Z M 20.093818,16.187491 c
+2.157091,0 3.906037,1.749091 3.906182,3.906327 C 24,22.251055 22.251055,24
+20.093818,24 c -2.157382,0 -3.906327,-1.748945 -3.906327,-3.906182
+1.45e-4,-2.157236 1.748945,-3.906327 3.906327,-3.906327 z M 2.1818182,21.818182
+H 5.6306764 V 18.369309 H 2.1818182 Z M 20.093818,18.369309 c -0.952291,0
+-1.724363,0.772218 -1.724509,1.724509 0,0.952146 0.772073,1.724364
+1.724509,1.724364 0.952146,0 1.724364,-0.772218 1.724364,-1.724364
+-1.46e-4,-0.952291 -0.772218,-1.724509 -1.724364,-1.724509 z m
+-5.184727,2.815418 H 9.0909091 V 19.002909 H 14.909091 Z M 4.9971636,14.909091 H
+2.8153455 V 9.0909091 H 4.9971636 Z M 3.9062545,0 c 2.1572655,4.3636364e-5
+3.90624,1.7489745 3.90624,3.9062545 -4.36e-5,2.1572364 -1.7490036,3.9061964
+-3.90624,3.90624 C 1.7489745,7.8124945 4.3636364e-5,6.06352 0,3.9062545
+0,1.7489455 1.7489455,0 3.9062545,0 Z M 24,7.8124945 H 16.187491 V 0 H 24 Z M
+3.9062545,2.1818182 c -0.9523345,0 -1.7244363,0.7721018 -1.7244363,1.7244363
+4.36e-5,0.9522764 0.7721309,1.7244219 1.7244363,1.7244219 0.9522473,-4.37e-5
+1.7243782,-0.7721746 1.7244219,-1.7244219 0,-0.9523054 -0.7721455,-1.7243927
+-1.7244219,-1.7244363 z M 18.369309,5.6306764 h 3.448873 V 2.1818182 H 18.369309
+Z M 14.909091,4.9971636 H 9.0909091 V 2.8153455 h 5.8181819 z"
+    fill="currentColor"
+  />
+</Svg>

src/lib/holocene/navigation/cloud-nav-bar.svelte

@@ -12,39 +12,63 @@
     version: string;
     navOpen: boolean;
     subtitle?: string;
+    subtitleHref?: string;
     children?: Snippet;
     bottom?: Snippet;
     ontoggle: () => void;
   }
 
-  let { version, navOpen, subtitle, children, bottom, ontoggle }: Props =
-    $props();
+  let {
+    version,
+    navOpen,
+    subtitle,
+    subtitleHref,
+    children,
+    bottom,
+    ontoggle,
+  }: Props = $props();
 </script>
 
 <div
   class="flex items-center justify-between pb-4 group-data-[nav=closed]:flex-col group-data-[nav=closed]:gap-2"
 >
-  <a
-    href={resolve('', {})}
-    class="text-inherit flex items-center gap-2 no-underline"
-  >
-    <Logo
-      height={24}
-      width={24}
-      class={merge('m-1', subtitle !== 'Cloud' && 'hidden')}
-    />
+  <div class="flex flex-row items-center justify-start">
+    <a href={resolve('', {})} class="text-inherit flex items-center">
+      <Logo
+        height={24}
+        width={24}
+        class={merge('m-1', subtitle !== 'Cloud' && 'hidden')}
+      />
+    </a>
     {#if subtitle}
-      <h2
-        class={merge(
-          'font-secondary mb-0 hidden whitespace-nowrap font-medium text-white group-data-[nav=open]:block',
-          subtitle === 'Cloud' ? 'text-2xl' : 'text-base',
-          subtitle !== 'Cloud' && 'px-2',
-        )}
-      >
-        {subtitle}
-      </h2>
+      {#if subtitleHref}
+        <a href={subtitleHref} class="contents">
+          <Icon
+            label="Project Namespaces"
+            name="arrow-left"
+            class="m-1 group-data-[nav=closed]:hidden"
+          />
+          <h2
+            class={merge(
+              'mb-0 hidden whitespace-nowrap px-1 pr-2 font-sans font-medium not-italic text-white underline group-data-[nav=open]:block',
+              subtitle === 'Cloud' ? 'text-2xl' : 'text-xs underline-offset-2',
+            )}
+          >
+            {subtitle}
+          </h2>
+        </a>
+      {:else}
+        <h2
+          class={merge(
+            'mb-0 hidden whitespace-nowrap font-sans font-medium not-italic text-white group-data-[nav=open]:block',
+            subtitle === 'Cloud' ? 'text-2xl' : 'text-xs',
+          )}
+        >
+          {subtitle}
+        </h2>
+      {/if}
     {/if}
-  </a>
+  </div>
   <button
     title={navOpen ? 'Collapse Navigation' : 'Expand Navigation'}
     class="mx-[8px] justify-self-end transition-[opacity,transform] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-success"

src/lib/holocene/navigation/navigation-button.svelte

@@ -26,7 +26,7 @@
   data-track-intent="action"
   data-track-text={label}
   class={merge(
-    'relative mb-1 flex items-center whitespace-nowrap p-1 pl-2 text-sm hover:bg-black hover:bg-opacity-25 group-[.surface-black]:hover:bg-white group-[.surface-black]:hover:bg-opacity-25',
+    'relative mb-1 flex items-center whitespace-nowrap pl-1 text-sm hover:bg-black hover:bg-opacity-25 group-[.surface-black]:hover:bg-white group-[.surface-black]:hover:bg-opacity-25',
     disabled && 'pointer-events-none cursor-not-allowed opacity-50',
     className,
   )}

src/lib/holocene/navigation/navigation-container.svelte

@@ -11,16 +11,18 @@
   import CloudNavBar from './cloud-nav-bar.svelte';
   import OSSNavBar from './oss-nav-bar.svelte';
 
-  interface Props extends HTMLAttributes<HTMLDivElement> {
+  interface Props extends HTMLAttributes<HTMLElement> {
     isCloud?: boolean;
     subtitle?: string;
+    subtitleHref?: string;
     children?: Snippet;
     bottom?: Snippet;
   }
 
   let {
     isCloud = false,
     subtitle,
+    subtitleHref,
     children,
     bottom,
     ...restProps
@@ -48,6 +50,7 @@
       {version}
       navOpen={$navOpen}
       {subtitle}
+      {subtitleHref}
       {children}
       {bottom}
       ontoggle={toggle}
@@ -57,6 +60,7 @@
       {version}
       navOpen={$navOpen}
       {subtitle}
+      {subtitleHref}
       {children}
       {bottom}
       ontoggle={toggle}

src/lib/holocene/navigation/navigation-item.svelte

@@ -14,7 +14,8 @@
   export let external = false;
   export let animate = false;
   export let disabled = false;
-  export let isActive: (path: string) => boolean | undefined = undefined;
+  export let isActive: ((path: string) => boolean | undefined) | undefined =
+    undefined;
 
   $: rel = external ? 'noopener noreferrer' : '';
   $: target = external ? '_blank' : '';
@@ -38,7 +39,7 @@
     data-track-intent="navigate"
     data-track-text={label}
     class={merge(
-      'mb-1 flex items-center whitespace-nowrap px-2 py-1 text-sm ',
+      'mb-1 flex items-center whitespace-nowrap p-1 text-sm ',
       'hover:bg-black hover:bg-opacity-25 group-[.surface-black]:hover:bg-white group-[.surface-black]:hover:bg-opacity-25',
       active &&
         'bg-black bg-opacity-25 group-[.surface-black]:bg-white group-[.surface-black]:bg-opacity-25',

src/lib/holocene/navigation/oss-nav-bar.svelte

@@ -11,25 +11,42 @@
     version: string;
     navOpen: boolean;
     subtitle?: string;
+    subtitleHref?: string;
     children?: Snippet;
     bottom?: Snippet;
     ontoggle: () => void;
   }
 
-  let { version, navOpen, subtitle, children, bottom, ontoggle }: Props =
-    $props();
+  let {
+    version,
+    navOpen,
+    subtitle,
+    subtitleHref,
+    children,
+    bottom,
+    ontoggle,
+  }: Props = $props();
 </script>
 
 <div
   class="flex items-center justify-between pb-4 group-data-[nav=closed]:flex-col group-data-[nav=closed]:gap-2"
 >
-  <a href={resolve('', {})} class="flex w-fit items-center gap-1 text-nowrap">
-    <Logo height={24} width={24} class="m-1" />
-
-    <p class="text-base font-medium group-data-[nav=closed]:hidden">
-      {subtitle || 'Web UI'}
-    </p>
-  </a>
+  <div class="flex w-fit items-center gap-1 text-nowrap">
+    <a href={resolve('', {})} class="flex items-center">
+      <Logo height={24} width={24} class="m-1" />
+    </a>
+    {#if subtitleHref}
+      <a href={subtitleHref} class="text-inherit no-underline">
+        <p class="text-base font-medium group-data-[nav=closed]:hidden">
+          {subtitle || 'Web UI'}
+        </p>
+      </a>
+    {:else}
+      <p class="text-base font-medium group-data-[nav=closed]:hidden">
+        {subtitle || 'Web UI'}
+      </p>
+    {/if}
+  </div>
   <button
     title={navOpen ? 'Collapse Navigation' : 'Expand Navigation'}
     class="mx-2 flex items-center justify-center opacity-0 transition-[opacity,transform] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70 group-hover:opacity-100 group-focus:opacity-100 group-data-[nav=open]:rotate-180 group-data-[nav=closed]:p-2"