@leavepulse/ui 0.28.5 → 0.29.1

package/dist/composables/useFormDraft.js

@@ -0,0 +1,124 @@
+import { ref, watch, toValue, onScopeDispose } from "vue";
+const ENVELOPE_VERSION = 1;
+function storage() {
+  try {
+    if (typeof window === "undefined") return null;
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+const WEEK_MS = 7 * 24 * 60 * 60 * 1e3;
+function useFormDraft(options) {
+  const hasDraft = ref(false);
+  const savedAt = ref(null);
+  const maxAge = options.maxAgeMs ?? WEEK_MS;
+  function currentKey() {
+    return String(toValue(options.key) || "").trim();
+  }
+  function read() {
+    const store = storage();
+    const key = currentKey();
+    if (!store || !key) return null;
+    let raw = null;
+    try {
+      raw = store.getItem(key);
+    } catch {
+      return null;
+    }
+    if (!raw) return null;
+    try {
+      const parsed = JSON.parse(raw);
+      if (!parsed || parsed.version !== ENVELOPE_VERSION) {
+        discard();
+        return null;
+      }
+      if (maxAge > 0) {
+        const age = Date.now() - Date.parse(parsed.savedAt);
+        if (age > maxAge) {
+          discard();
+          return null;
+        }
+      }
+      return parsed.value;
+    } catch {
+      discard();
+      return null;
+    }
+  }
+  function write(value) {
+    const store = storage();
+    const key = currentKey();
+    if (!store || !key) return;
+    const stamp = (/* @__PURE__ */ new Date()).toISOString();
+    try {
+      store.setItem(
+        key,
+        JSON.stringify({
+          version: ENVELOPE_VERSION,
+          savedAt: stamp,
+          value
+        })
+      );
+    } catch {
+      return;
+    }
+    hasDraft.value = true;
+    savedAt.value = stamp;
+  }
+  function discard() {
+    const store = storage();
+    const key = currentKey();
+    hasDraft.value = false;
+    savedAt.value = null;
+    if (!store || !key) return;
+    try {
+      store.removeItem(key);
+    } catch {
+    }
+  }
+  function save() {
+    write(toValue(options.value));
+  }
+  watch(
+    () => currentKey(),
+    () => {
+      hasDraft.value = false;
+      savedAt.value = null;
+      const store = storage();
+      const key = currentKey();
+      if (!store || !key) return;
+      let raw = null;
+      try {
+        raw = store.getItem(key);
+      } catch {
+        return;
+      }
+      if (!raw) return;
+      try {
+        const parsed = JSON.parse(raw);
+        if (parsed?.version !== ENVELOPE_VERSION) return;
+        hasDraft.value = true;
+        savedAt.value = parsed.savedAt;
+      } catch {
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => [toValue(options.value), toValue(options.dirty), toValue(options.disabled)],
+    ([value, dirty, disabled]) => {
+      if (disabled) return;
+      if (options.dirty !== void 0 && !dirty) return;
+      write(value);
+    },
+    { deep: true }
+  );
+  onScopeDispose(() => {
+    hasDraft.value = false;
+  });
+  return { hasDraft, savedAt, read, discard, save };
+}
+export {
+  useFormDraft
+};

package/dist/index.d.ts

@@ -133,6 +133,8 @@ export { useReveal } from './composables/useReveal';
 export type { UseReveal, UseRevealOptions } from './composables/useReveal';
 export { useRovingFocus } from './composables/useRovingFocus';
 export type { RovingItem, UseRovingFocusOptions } from './composables/useRovingFocus';
+export { useFormDraft } from './composables/useFormDraft';
+export type { UseFormDraft, UseFormDraftOptions } from './composables/useFormDraft';
 export { useSettled } from './composables/useSettled';
 export type { UseSettledOptions } from './composables/useSettled';
 export { useShift } from './composables/useShift';

package/dist/index.js

@@ -30,7 +30,7 @@ import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, format
 import { _ as _25 } from "./chunks/LpFormField-fV_2ZdCk.js";
 import { _ as _26 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { default as default4 } from "./components/LpImageEditor.vue.js";
-import { _ as _27 } from "./chunks/LpInfraNode-qIL3l7IO.js";
+import { _ as _27 } from "./chunks/LpInfraNode-Ds_8SZgN.js";
 import { _ as _28 } from "./chunks/LpInput-CYcTL9gj.js";
 import { _ as _29 } from "./chunks/LpLightbox-Ci35Y_xP.js";
 import { fileNameOf } from "./components/lightbox.js";
@@ -65,17 +65,17 @@ import { _ as _55 } from "./chunks/LpSparkline-C6xQ2dwv.js";
 import { _ as _56 } from "./chunks/LpStat-CDanpzU0.js";
 import { _ as _57 } from "./chunks/LpStepper-Wtl-6nUh.js";
 import { _ as _58 } from "./chunks/LpSwitch-v6fnccSM.js";
-import { _ as _59 } from "./chunks/LpTable-DTj52qlg.js";
-import { _ as _60 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
-import { _ as _61 } from "./chunks/LpTabs-Cefe_lys.js";
-import { _ as _62 } from "./chunks/LpTextarea-BMIOfw5l.js";
-import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-7mAK6bI7.js";
-import { D, _ as _63, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-7mAK6bI7.js";
-import { _ as _64 } from "./chunks/LpTilt-DuyKbpkA.js";
-import { _ as _65 } from "./chunks/LpToaster-gDB1EaU3.js";
-import { _ as _66 } from "./chunks/LpTooltip-hCLPAqMG.js";
-import { _ as _67 } from "./chunks/LpTopologyCanvas-ebP67CLx.js";
-import { _ as _68 } from "./chunks/LpUptimeBar-DcQ8HikG.js";
+import { default as default6 } from "./components/LpTable.vue.js";
+import { _ as _59 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
+import { _ as _60 } from "./chunks/LpTabs-Cefe_lys.js";
+import { _ as _61 } from "./chunks/LpTextarea-BMIOfw5l.js";
+import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-Dj4VcTu7.js";
+import { D, _ as _62, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-Dj4VcTu7.js";
+import { _ as _63 } from "./chunks/LpTilt-DuyKbpkA.js";
+import { _ as _64 } from "./chunks/LpToaster-gDB1EaU3.js";
+import { _ as _65 } from "./chunks/LpTooltip-hCLPAqMG.js";
+import { _ as _66 } from "./chunks/LpTopologyCanvas-Cm1L39uL.js";
+import { _ as _67 } from "./chunks/LpUptimeBar-DcQ8HikG.js";
 import { deserializeLayout, serializeLayout } from "./layout/tree.js";
 import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
@@ -85,6 +85,7 @@ import { useInputFilter } from "./composables/useInputFilter.js";
 import { easeOut, easeTravel, easingToken, prefersReducedMotion } from "./composables/easing.js";
 import { useReveal } from "./composables/useReveal.js";
 import { useRovingFocus } from "./composables/useRovingFocus.js";
+import { useFormDraft } from "./composables/useFormDraft.js";
 import { useSettled } from "./composables/useSettled.js";
 import { useShift } from "./composables/useShift.js";
 import { useTilt } from "./composables/useTilt.js";
@@ -185,16 +186,16 @@ export {
   _56 as LpStat,
   _57 as LpStepper,
   _58 as LpSwitch,
-  _59 as LpTable,
-  _60 as LpTableOfContents,
-  _61 as LpTabs,
-  _62 as LpTextarea,
-  _63 as LpThemeSwitcher,
-  _64 as LpTilt,
-  _65 as LpToaster,
-  _66 as LpTooltip,
-  _67 as LpTopologyCanvas,
-  _68 as LpUptimeBar,
+  default6 as LpTable,
+  _59 as LpTableOfContents,
+  _60 as LpTabs,
+  _61 as LpTextarea,
+  _62 as LpThemeSwitcher,
+  _63 as LpTilt,
+  _64 as LpToaster,
+  _65 as LpTooltip,
+  _66 as LpTopologyCanvas,
+  _67 as LpUptimeBar,
   N as NO_BACKDROP_ATTR,
   OSM_TILES,
   T as THEME_COOKIE,
@@ -265,6 +266,7 @@ export {
   m as themeToCssVars,
   tileUrl,
   unproject,
+  useFormDraft,
   useHotkeys,
   useInputFilter,
   useLayout,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.28.5",
+  "version": "0.29.1",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpInfraNode.vue

@@ -13,7 +13,13 @@ import { computed } from "vue"
 
 export interface InfraNodeData {
   name: string
+  /** Role key: selects the colour/glyph, and shown as-is unless `roleLabel`. */
   role: string
+  /**
+   * What to print for the role. The key itself ("host", "proxy") is an API
+   * value, not a word for an operator to read in their own language.
+   */
+  roleLabel?: string
   overlay?: string
   online?: boolean
   kind?: string
@@ -31,6 +37,31 @@ export interface InfraNodeData {
   staleFor?: string
   /** Fade the node back (search miss / not part of the focused node's graph). */
   dimmed?: boolean
+  /**
+   * Wording for this node's badges. Carried in `data` because that is what
+   * LpTopologyCanvas forwards to the node renderer; a component prop would
+   * never reach it.
+   */
+  labels?: InfraNodeLabels
+}
+
+/**
+ * Wording for the badges, so the node speaks the app's language.
+ *
+ * The kit ships English defaults; a localised app passes its own. `{n}` is the
+ * count, `{age}` the value of `staleFor`.
+ */
+export interface InfraNodeLabels {
+  /** Tooltip on the firewall badge. Default: "{n} firewall rule(s)". */
+  firewallRules?: string
+  /** Tooltip on the service badge. Default: "{n} service(s)". */
+  services?: string
+  /** Tooltip on the service badge when readings are stale. */
+  servicesStale?: string
+  /** Tooltip on the staleness badge. */
+  noContact?: string
+  /** Suffix after the age, e.g. "old" in "4m old". */
+  old?: string
 }
 
 const props = defineProps<{
@@ -40,6 +71,21 @@ const props = defineProps<{
   roles?: Record<string, InfraRoleStyle>
 }>()
 
+/** Fill `{n}` / `{age}` in a label template. */
+function fill(tpl: string, vars: Record<string, string | number>): string {
+  return tpl.replace(/\{(\w+)\}/g, (_, k) => String(vars[k] ?? ""))
+}
+
+const text = computed(() => ({
+  firewallRules: props.data.labels?.firewallRules ?? "{n} firewall rule(s)",
+  services: props.data.labels?.services ?? "{n} service(s)",
+  servicesStale:
+    props.data.labels?.servicesStale ?? "{n} service(s) as of {age} ago - not current",
+  noContact:
+    props.data.labels?.noContact ?? "No contact for {age} - everything shown here is that old",
+  old: props.data.labels?.old ?? "old",
+}))
+
 /*
  * Role → look. Colours are token references, never literals, so a theme (or a
  * consumer) restyles the graph without forking this component; the glyph keeps
@@ -80,13 +126,28 @@ const accentLine = computed(
 </script>
 
 <template>
+  <!--
+    An offline host is drawn offline, not merely faded.
+
+    Opacity alone was the only signal the frame carried, and at 0.5 on a dark
+    canvas it is nearly invisible: a machine that had not reported for minutes
+    sat in a role-coloured frame that read as healthy, contradicted only by a
+    7px dot. Offline now takes the frame and the role bar as well, so the three
+    signals on a node agree instead of arguing.
+  -->
   <div
     class="w-[168px] overflow-hidden rounded-card border bg-surface-raised shadow-panel transition-[border-color,box-shadow]"
-    :class="selected ? 'border-[var(--accent)]' : 'border-[var(--accent-line)]'"
+    :class="[
+      selected
+        ? 'border-[var(--accent)]'
+        : data.online === false
+          ? 'border-dashed border-danger/50'
+          : 'border-[var(--accent-line)]',
+    ]"
     :style="{
       '--accent': accent,
       '--accent-line': accentLine,
-      opacity: data.dimmed ? 0.3 : data.online === false ? 0.5 : 1,
+      opacity: data.dimmed ? 0.3 : data.online === false ? 0.75 : 1,
       ...(selected
         ? { boxShadow: '0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-panel)' }
         : {}),
@@ -103,7 +164,12 @@ const accentLine = computed(
       class="!size-2 !border-2 !border-[var(--accent)] !bg-surface"
     />
 
-    <div class="h-[3px] bg-[var(--accent)]" />
+    <!-- The role bar reads as "this node is alive and is a proxy"; on an
+         offline host it must not keep asserting the first half. -->
+    <div
+      class="h-[3px]"
+      :class="data.online === false ? 'bg-danger/50' : 'bg-[var(--accent)]'"
+    />
     <div class="px-[11px] pb-2.5 pt-[9px]">
       <div class="flex items-center gap-[7px]">
         <span class="text-[13px] text-[var(--accent)]">{{ icon }}</span>
@@ -116,7 +182,7 @@ const accentLine = computed(
       </div>
       <div class="mt-1.5 flex items-center justify-between">
         <span class="text-[10px] font-semibold uppercase tracking-wide text-[var(--accent)]">
-          {{ data.role }}
+          {{ data.roleLabel ?? data.role }}
         </span>
         <span v-if="data.overlay" class="font-mono text-[10px] text-muted">{{ data.overlay }}</span>
       </div>
@@ -127,7 +193,7 @@ const accentLine = computed(
         <span
           v-if="data.firewallCount"
           class="inline-flex items-center gap-1 rounded-pill bg-danger-soft px-1.5 py-0.5 text-[9px] font-medium text-danger"
-          :title="`${data.firewallCount} firewall rule(s)`"
+          :title="fill(text.firewallRules, { n: data.firewallCount! })"
         >
           <span>⛨</span>{{ data.firewallCount }}
         </span>
@@ -137,8 +203,8 @@ const accentLine = computed(
           :class="data.staleFor ? 'line-through decoration-danger/70' : ''"
           :title="
             data.staleFor
-              ? `${data.serviceCount} service(s) as of ${data.staleFor} ago — not current`
-              : `${data.serviceCount} service(s)`
+              ? fill(text.servicesStale, { n: data.serviceCount!, age: data.staleFor })
+              : fill(text.services, { n: data.serviceCount! })
           "
         >
           <span>◇</span>{{ data.serviceCount }}
@@ -146,9 +212,9 @@ const accentLine = computed(
         <span
           v-if="data.staleFor"
           class="inline-flex items-center gap-1 rounded-pill bg-danger-soft px-1.5 py-0.5 text-[9px] font-medium text-danger"
-          :title="`No contact for ${data.staleFor} — everything shown here is that old`"
+          :title="fill(text.noContact, { age: data.staleFor })"
         >
-          <span>⚠</span>{{ data.staleFor }} old
+          <span>⚠</span>{{ data.staleFor }} {{ text.old }}
         </span>
       </div>
     </div>

package/src/components/LpTable.vue

@@ -77,10 +77,18 @@ function menuFor(row: T): ContextMenuItemDef[] {
 }
 
 // ── sorting ──────────────────────────────────────────────────
-// Client-side sort is applied only when the parent doesn't drive `sort` via
-// v-model (server-side). We compare by raw cell value with a stable-ish coerce.
+//
+// The parent may drive `sort` through v-model, which is how a server-side sort
+// is expressed. When it does not, the table keeps the state itself and sorts
+// its own rows — otherwise `sortable` rendered a header that could be clicked,
+// emitted an event nobody was listening for, and left the rows exactly as they
+// were: a control that answers a click by doing nothing.
+const ownSort = ref<SortState | null>(null)
+const activeSort = computed(() => props.sort ?? ownSort.value)
+
+// We compare by raw cell value with a stable-ish coerce.
 const displayRows = computed<T[]>(() => {
-  const s = props.sort
+  const s = activeSort.value
   if (!s) return props.rows
   const col = props.columns.find((c) => c.key === s.key)
   if (!col?.sortable) return props.rows
@@ -98,18 +106,22 @@ function compare(a: unknown, b: unknown): number {
 
 function toggleSort(col: TableColumn<T>) {
   if (!col.sortable) return
-  const s = props.sort
+  const s = activeSort.value
   // Cycle: none → asc → desc → none, scoped to the clicked column.
   let next: SortState | null
   if (!s || s.key !== col.key) next = { key: col.key, dir: "asc" }
   else if (s.dir === "asc") next = { key: col.key, dir: "desc" }
   else next = null
+  // Kept locally as well as emitted: a parent that binds v-model overwrites
+  // this on the way back, and one that does not still gets a table that sorts.
+  ownSort.value = next
   emit("update:sort", next)
 }
 
 function sortIcon(col: TableColumn<T>): string {
-  if (props.sort?.key !== col.key) return "lucide:chevrons-up-down"
-  return props.sort.dir === "asc" ? "lucide:arrow-up" : "lucide:arrow-down"
+  const s = activeSort.value
+  if (s?.key !== col.key) return "lucide:chevrons-up-down"
+  return s.dir === "asc" ? "lucide:arrow-up" : "lucide:arrow-down"
 }
 
 // ── selection ────────────────────────────────────────────────
@@ -237,7 +249,11 @@ const barInsetTop = computed(() =>
             class="px-4 py-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted"
             :class="alignClass(col.align)"
             :aria-sort="
-              sort?.key === col.key ? (sort.dir === 'asc' ? 'ascending' : 'descending') : undefined
+              activeSort?.key === col.key
+                ? activeSort.dir === 'asc'
+                  ? 'ascending'
+                  : 'descending'
+                : undefined
             "
           >
             <button
@@ -246,7 +262,7 @@ const barInsetTop = computed(() =>
               class="group/sort -mx-1 inline-flex items-center gap-1 rounded px-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
               :class="[
                 col.align === 'right' ? 'flex-row-reverse' : '',
-                sort?.key === col.key ? 'text-ink' : '',
+                activeSort?.key === col.key ? 'text-ink' : '',
               ]"
               @click="toggleSort(col)"
             >
@@ -255,7 +271,11 @@ const barInsetTop = computed(() =>
                 :name="sortIcon(col)"
                 :size="13"
                 class="shrink-0 transition-[transform,opacity] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)]"
-                :class="sort?.key === col.key ? 'opacity-100' : 'opacity-40 group-hover/sort:opacity-70'"
+                :class="
+                  activeSort?.key === col.key
+                    ? 'opacity-100'
+                    : 'opacity-40 group-hover/sort:opacity-70'
+                "
               />
             </button>
             <template v-else>{{ col.label }}</template>
@@ -266,8 +286,17 @@ const barInsetTop = computed(() =>
            steer, and a stray key from a control inside a cell must not move the
            cursor. The container is bound only so the composable can find rows
            to focus. -->
-      <tbody :ref="(el) => roving.setContainer(el as HTMLElement | null)">
-        <tr v-if="displayRows.length === 0">
+      <!-- Rows fade and settle rather than snapping in and out. Filtering a
+           list is a change the eye has to follow: rows vanishing between two
+           frames read as the table being redrawn, and the one that stayed is
+           impossible to keep track of. `move` is what carries the survivors to
+           their new position instead of teleporting them. -->
+      <TransitionGroup
+        tag="tbody"
+        name="lp-row"
+        :ref="(el: unknown) => roving.setContainer((el as { $el?: HTMLElement })?.$el ?? null)"
+      >
+        <tr v-if="displayRows.length === 0" key="lp-table-empty">
           <td :colspan="colSpan" class="px-4 py-10 text-center text-muted">
             <LpIcon :name="emptyIcon" :size="22" class="mx-auto mb-2 opacity-60" />
             <div>{{ emptyLabel }}</div>
@@ -282,8 +311,12 @@ const barInsetTop = computed(() =>
           :key="keyFor(row, index)"
           :items="menuFor(row)"
         >
+          <!-- `group` so a cell's own content can answer the row's hover: a
+               link inside a row wants its underline to sweep in when the row
+               lights up, not when the pointer crosses the text exactly. The
+               class paints nothing by itself. -->
           <tr
-            class="border-b border-line/60 outline-none transition-colors last:border-0 hover:bg-surface-soft/60 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring data-[active]:bg-surface-soft/40"
+            class="group border-b border-line/60 outline-none transition-colors last:border-0 hover:bg-surface-soft/60 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring data-[active]:bg-surface-soft/40"
             :class="selectedSet.has(keyFor(row, index)) ? 'bg-brand-soft/40' : ''"
             v-bind="roving.itemProps(String(keyFor(row, index)))"
             @click="emit('rowClick', row)"
@@ -307,7 +340,57 @@ const barInsetTop = computed(() =>
             </td>
           </tr>
         </LpContextMenu>
-      </tbody>
+      </TransitionGroup>
     </table>
   </LpScrollArea>
 </template>
+
+<style scoped>
+/*
+ * Rows arriving, leaving and moving as the filter changes.
+ *
+ * A row cannot be translated on its Y axis without the table reflowing around
+ * it, so the entrance is opacity plus a small horizontal offset — enough to
+ * read as movement, not enough to fight the column grid. `--ease-emphasized`
+ * because this is interface responding to a click, not data being drawn.
+ *
+ * The leaving row is taken out of the flow, or the rows below it wait for the
+ * fade before closing the gap and the whole list lurches at the end instead of
+ * gliding.
+ */
+.lp-row-enter-active,
+.lp-row-leave-active {
+  transition:
+    opacity var(--duration-fast) var(--ease-emphasized),
+    transform var(--duration-fast) var(--ease-emphasized);
+}
+
+.lp-row-move {
+  transition: transform var(--duration-medium) var(--ease-emphasized);
+}
+
+.lp-row-enter-from,
+.lp-row-leave-to {
+  opacity: 0;
+  transform: translateX(-0.5rem);
+}
+
+.lp-row-leave-active {
+  position: absolute;
+  width: 100%;
+}
+
+/* A filter that redraws the list is information, not decoration: with motion
+   turned down the rows change without animating rather than not changing. */
+@media (prefers-reduced-motion: reduce) {
+  .lp-row-enter-active,
+  .lp-row-leave-active,
+  .lp-row-move {
+    transition: none;
+  }
+
+  .lp-row-leave-active {
+    position: static;
+  }
+}
+</style>

package/src/components/LpThemeSwitcher.vue

@@ -11,7 +11,7 @@
  * and the choice survives a reload (anti-flash bootstrap). The component never
  * fetches; it just drives the theme engine.
  */
-import { computed, onMounted } from "vue"
+import { computed, onMounted, ref } from "vue"
 import { presets } from "../theme/presets"
 import type { TokenSet } from "../theme/tokens"
 import { useTheme } from "../theme/useTheme"
@@ -153,8 +153,30 @@ const menu = computed<ContextMenuItemDef[]>(() =>
   })),
 )
 
+/*
+ * The theme the SERVER rendered is not necessarily the one the client restores:
+ * SSR paints from the `lp-theme` cookie (or the default), while on the client
+ * `bootstrapTheme()` deliberately wins from localStorage, which holds the full
+ * token set including custom themes the server cannot name. The colours cope —
+ * they are CSS variables, reapplied on boot — but a label that spells the theme
+ * OUT is text, and Vue compares text: every SSR consumer logged a hydration
+ * mismatch on this attribute alone.
+ *
+ * So the label says what the server said until the component is mounted, then
+ * names the theme actually in effect. Nobody reads a tooltip in the frame
+ * before hydration, and the a11y name settles on the truth.
+ */
+const hydrated = ref(false)
+onMounted(() => {
+  hydrated.value = true
+})
+
+const labelName = computed(() =>
+  hydrated.value ? activeName.value : (list.value[0]?.name ?? ""),
+)
+
 const triggerLabel = computed(
-  () => props["aria-label"] ?? `Theme: ${activeName.value}. Click to switch, right-click to choose.`,
+  () => props["aria-label"] ?? `Theme: ${labelName.value}. Click to switch, right-click to choose.`,
 )
 </script>
 
@@ -195,7 +217,7 @@ const triggerLabel = computed(
         />
       </span>
 
-      <span v-if="wantsLabel" class="text-sm font-medium">{{ activeName }}</span>
+      <span v-if="wantsLabel" class="text-sm font-medium">{{ labelName }}</span>
     </button>
   </LpContextMenu>
 </template>

package/src/components/LpTopologyCanvas.vue

@@ -439,6 +439,10 @@ defineExpose({ fitView, setViewport: applyViewport })
           </svg>
           {{ l.label }}
         </div>
+        <!-- Edges are only half of what a graph encodes; a node also carries
+             state (offline, stale readings) that the legend cannot know the
+             meaning of. The host explains its own node encoding here. -->
+        <slot name="legend-extra" />
       </div>
     </Panel>
   </VueFlow>