@leavepulse/ui 0.29.0 → 0.29.2

package/dist/assets/LpTable-ChxURw0m.css

@@ -0,0 +1,45 @@
+
+/*
+ * 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[data-v-359c1c0d],
+.lp-row-leave-active[data-v-359c1c0d] {
+  transition:
+    opacity var(--duration-fast) var(--ease-emphasized),
+    transform var(--duration-fast) var(--ease-emphasized);
+}
+.lp-row-move[data-v-359c1c0d] {
+  transition: transform var(--duration-medium) var(--ease-emphasized);
+}
+.lp-row-enter-from[data-v-359c1c0d],
+.lp-row-leave-to[data-v-359c1c0d] {
+  opacity: 0;
+  transform: translateX(-0.5rem);
+}
+
+/*
+ * The leaving row stays in the flow. Taking it out with `position: absolute` is
+ * the usual trick for a list, but a `<tr>` positioned that way loses the table's
+ * column grid and collapses to its content width — the row visibly breaks apart
+ * on its way out. The rows below close the gap through `lp-row-move` instead,
+ * which is a moment slower and stays a table the whole time.
+ */
+
+/* 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[data-v-359c1c0d],
+  .lp-row-leave-active[data-v-359c1c0d],
+  .lp-row-move[data-v-359c1c0d] {
+    transition: none;
+}
+}

package/dist/chunks/{LpInfraNode-qIL3l7IO.js → LpInfraNode-Ds_8SZgN.js}

@@ -26,6 +26,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    function fill(tpl, vars) {
+      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"
+    }));
     const DEFAULT_ROLES = {
       compute: { color: "var(--color-node-compute)", icon: "▣" },
       host: { color: "var(--color-node-compute)", icon: "▣" },
@@ -50,11 +60,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["w-[168px] overflow-hidden rounded-card border bg-surface-raised shadow-panel transition-[border-color,box-shadow]", __props.selected ? "border-[var(--accent)]" : "border-[var(--accent-line)]"]),
+        class: normalizeClass(["w-[168px] overflow-hidden rounded-card border bg-surface-raised shadow-panel transition-[border-color,box-shadow]", [
+          __props.selected ? "border-[var(--accent)]" : __props.data.online === false ? "border-dashed border-danger/50" : "border-[var(--accent-line)]"
+        ]]),
         style: normalizeStyle({
           "--accent": accent.value,
           "--accent-line": accentLine.value,
-          opacity: __props.data.dimmed ? 0.3 : __props.data.online === false ? 0.5 : 1,
+          opacity: __props.data.dimmed ? 0.3 : __props.data.online === false ? 0.75 : 1,
           ...__props.selected ? { boxShadow: "0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-panel)" } : {}
         })
       }, [
@@ -68,7 +80,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           position: unref(Position).Right,
           class: "!size-2 !border-2 !border-[var(--accent)] !bg-surface"
         }, null, 8, ["position"]),
-        _cache[3] || (_cache[3] = createElementVNode("div", { class: "h-[3px] bg-[var(--accent)]" }, null, -1)),
+        createElementVNode("div", {
+          class: normalizeClass(["h-[3px]", __props.data.online === false ? "bg-danger/50" : "bg-[var(--accent)]"])
+        }, null, 2),
         createElementVNode("div", _hoisted_1, [
           createElementVNode("div", _hoisted_2, [
             createElementVNode("span", _hoisted_3, toDisplayString(icon.value), 1),
@@ -79,14 +93,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, null, 2)) : createCommentVNode("", true)
           ]),
           createElementVNode("div", _hoisted_5, [
-            createElementVNode("span", _hoisted_6, toDisplayString(__props.data.role), 1),
+            createElementVNode("span", _hoisted_6, toDisplayString(__props.data.roleLabel ?? __props.data.role), 1),
             __props.data.overlay ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(__props.data.overlay), 1)) : createCommentVNode("", true)
           ]),
           __props.data.firewallCount || __props.data.serviceCount !== void 0 || __props.data.staleFor ? (openBlock(), createElementBlock("div", _hoisted_8, [
             __props.data.firewallCount ? (openBlock(), createElementBlock("span", {
               key: 0,
               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: `${__props.data.firewallCount} firewall rule(s)`
+              title: fill(text.value.firewallRules, { n: __props.data.firewallCount })
             }, [
               _cache[0] || (_cache[0] = createElementVNode("span", null, "⛨", -1)),
               createTextVNode(toDisplayString(__props.data.firewallCount), 1)
@@ -94,7 +108,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             __props.data.serviceCount !== void 0 ? (openBlock(), createElementBlock("span", {
               key: 1,
               class: normalizeClass(["inline-flex items-center gap-1 rounded-pill bg-surface-soft px-1.5 py-0.5 text-[9px] font-medium text-muted", __props.data.staleFor ? "line-through decoration-danger/70" : ""]),
-              title: __props.data.staleFor ? `${__props.data.serviceCount} service(s) as of ${__props.data.staleFor} ago — not current` : `${__props.data.serviceCount} service(s)`
+              title: __props.data.staleFor ? fill(text.value.servicesStale, { n: __props.data.serviceCount, age: __props.data.staleFor }) : fill(text.value.services, { n: __props.data.serviceCount })
             }, [
               _cache[1] || (_cache[1] = createElementVNode("span", null, "◇", -1)),
               createTextVNode(toDisplayString(__props.data.serviceCount), 1)
@@ -102,10 +116,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             __props.data.staleFor ? (openBlock(), createElementBlock("span", {
               key: 2,
               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 ${__props.data.staleFor} — everything shown here is that old`
+              title: fill(text.value.noContact, { age: __props.data.staleFor })
             }, [
               _cache[2] || (_cache[2] = createElementVNode("span", null, "⚠", -1)),
-              createTextVNode(toDisplayString(__props.data.staleFor) + " old ", 1)
+              createTextVNode(toDisplayString(__props.data.staleFor) + " " + toDisplayString(text.value.old), 1)
             ], 8, _hoisted_11)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
         ])

package/dist/chunks/{LpThemeSwitcher-7mAK6bI7.js → LpThemeSwitcher-Dj4VcTu7.js}

@@ -1,4 +1,4 @@
-import { computed, readonly, shallowRef, defineComponent, onMounted, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, createElementBlock, normalizeStyle, createVNode, toDisplayString, createCommentVNode } from "vue";
+import { computed, readonly, shallowRef, defineComponent, onMounted, ref, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, createElementBlock, normalizeStyle, createVNode, toDisplayString, createCommentVNode } from "vue";
 import { prefersReducedMotion, easingToken } from "../composables/easing.js";
 import { _ as _sfc_main$1 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
@@ -592,8 +592,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onSelect: () => applyTheme2(t)
       }))
     );
+    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.`
     );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$1, { items: menu.value }, {
@@ -629,7 +636,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 size: ICON_SIZE[__props.size]
               }, null, 8, ["name", "size"])
             ], 2)),
-            wantsLabel.value ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(activeName.value), 1)) : createCommentVNode("", true)
+            wantsLabel.value ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(labelName.value), 1)) : createCommentVNode("", true)
           ], 10, _hoisted_1)
         ]),
         _: 1

package/dist/chunks/{LpTopologyCanvas-ebP67CLx.js → LpTopologyCanvas-Cm1L39uL.js}

@@ -1,9 +1,9 @@
-import { defineComponent, markRaw, computed, watch, openBlock, createBlock, unref, withCtx, createVNode, createCommentVNode, normalizeClass, createElementVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, markRaw, computed, watch, openBlock, createBlock, unref, withCtx, createVNode, createCommentVNode, normalizeClass, createElementVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, renderSlot } from "vue";
 import { Background } from "@vue-flow/background";
 import { Controls } from "@vue-flow/controls";
 import { MarkerType, useVueFlow, VueFlow, SelectionMode, Panel } from "@vue-flow/core";
 import { MiniMap } from "@vue-flow/minimap";
-import { _ as _sfc_main$3 } from "./LpInfraNode-qIL3l7IO.js";
+import { _ as _sfc_main$3 } from "./LpInfraNode-Ds_8SZgN.js";
 import { _ as _sfc_main$1 } from "./LpLaneNode-HtnQf2FF.js";
 import { _ as _sfc_main$2 } from "./LpServiceNode-D8uJ8sGk.js";
 import { _ as _sfc_main$4 } from "./LpWaypointEdge-D8yHlQiw.js";
@@ -245,13 +245,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ])),
                     createTextVNode(" " + toDisplayString(l.label), 1)
                   ]);
-                }), 128))
+                }), 128)),
+                renderSlot(_ctx.$slots, "legend-extra")
               ])
             ]),
-            _: 1
+            _: 3
           }, 8, ["position", "class"])) : createCommentVNode("", true)
         ]),
-        _: 1
+        _: 3
       }, 8, ["nodes", "edges", "nodes-connectable", "selection-on-drag", "pan-on-drag", "selection-key-code", "selection-mode"]);
     };
   }

package/dist/components/LpInfraNode.vue.d.ts

@@ -1,6 +1,12 @@
 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;
@@ -18,6 +24,30 @@ 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;
 }
 type __VLS_Props = {
     data: InfraNodeData;

package/dist/components/LpInfraNode.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpInfraNode-qIL3l7IO.js";
+import { _ as _sfc_main } from "../chunks/LpInfraNode-Ds_8SZgN.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTable.vue.js

@@ -1,4 +1,280 @@
-import { _ as _sfc_main } from "../chunks/LpTable-DTj52qlg.js";
+import { defineComponent, ref, computed, watch, onBeforeUnmount, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, createElementBlock, createVNode, createCommentVNode, Fragment, renderList, normalizeStyle, createTextVNode, toDisplayString, TransitionGroup, unref, mergeProps, withModifiers, renderSlot } from "vue";
+import { _ as _sfc_main$2 } from "../chunks/LpCheckbox-BO0zuuPh.js";
+import { _ as _sfc_main$4 } from "../chunks/LpContextMenu-D0mzXqA7.js";
+import { _ as _sfc_main$3 } from "../chunks/LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$1 } from "../chunks/LpScrollArea-D8xyKXcF.js";
+import { useRovingFocus } from "../composables/useRovingFocus.js";
+import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
+import '../assets/LpTable-ChxURw0m.css';const _hoisted_1 = { class: "w-full border-collapse text-sm" };
+const _hoisted_2 = { class: "border-b border-line bg-surface-soft" };
+const _hoisted_3 = {
+  key: 0,
+  class: "w-px px-4 py-3"
+};
+const _hoisted_4 = ["aria-sort"];
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = { key: "lp-table-empty" };
+const _hoisted_7 = ["colspan"];
+const _hoisted_8 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpTable",
+  props: {
+    columns: {},
+    rows: {},
+    rowKey: {},
+    emptyLabel: { default: "Nothing here yet" },
+    emptyIcon: { default: "lucide:inbox" },
+    selectable: { type: Boolean, default: false },
+    selected: { default: () => [] },
+    sort: { default: null },
+    stickyHeader: { type: Boolean },
+    rowMenu: {}
+  },
+  emits: ["update:selected", "update:sort", "rowClick"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    function keyFor(row, index) {
+      if (typeof props.rowKey === "function") return props.rowKey(row);
+      if (props.rowKey) return row[props.rowKey];
+      return index;
+    }
+    function alignClass(align) {
+      if (align === "right") return "text-right";
+      if (align === "center") return "text-center";
+      return "text-left";
+    }
+    function menuFor(row) {
+      return props.rowMenu?.(row) ?? [];
+    }
+    const ownSort = ref(null);
+    const activeSort = computed(() => props.sort ?? ownSort.value);
+    const displayRows = computed(() => {
+      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;
+      const factor = s.dir === "asc" ? 1 : -1;
+      return [...props.rows].sort((a, b) => compare(a[s.key], b[s.key]) * factor);
+    });
+    function compare(a, b) {
+      if (a == null && b == null) return 0;
+      if (a == null) return -1;
+      if (b == null) return 1;
+      if (typeof a === "number" && typeof b === "number") return a - b;
+      return String(a).localeCompare(String(b), void 0, { numeric: true });
+    }
+    function toggleSort(col) {
+      if (!col.sortable) return;
+      const s = activeSort.value;
+      let next;
+      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;
+      ownSort.value = next;
+      emit("update:sort", next);
+    }
+    function sortIcon(col) {
+      const s = activeSort.value;
+      if (s?.key !== col.key) return "lucide:chevrons-up-down";
+      return s.dir === "asc" ? "lucide:arrow-up" : "lucide:arrow-down";
+    }
+    const selectedSet = computed(() => new Set(props.selected));
+    const allKeys = computed(() => props.rows.map((r, i) => keyFor(r, i)));
+    const allChecked = computed(
+      () => allKeys.value.length > 0 && allKeys.value.every((k) => selectedSet.value.has(k))
+    );
+    const someChecked = computed(
+      () => !allChecked.value && allKeys.value.some((k) => selectedSet.value.has(k))
+    );
+    function toggleAll(checked) {
+      emit("update:selected", checked ? [...allKeys.value] : []);
+    }
+    function toggleRow(key, checked) {
+      const next = new Set(selectedSet.value);
+      if (checked) next.add(key);
+      else next.delete(key);
+      emit("update:selected", [...next]);
+    }
+    const colSpan = computed(() => props.columns.length + (props.selectable ? 1 : 0));
+    const rovingItems = computed(
+      () => displayRows.value.map((row, index) => ({
+        id: String(keyFor(row, index)),
+        label: String(row[props.columns[0]?.key ?? ""] ?? "")
+      }))
+    );
+    const rowByKey = computed(() => {
+      const map = /* @__PURE__ */ new Map();
+      displayRows.value.forEach((row, index) => map.set(String(keyFor(row, index)), row));
+      return map;
+    });
+    const roving = useRovingFocus(rovingItems, {
+      onActivate: (id) => {
+        const row = rowByKey.value.get(id);
+        if (!row) return;
+        emit("rowClick", row);
+      }
+    });
+    function onRowKeydown(event) {
+      if (event.key === " " && props.selectable && roving.activeId.value) {
+        event.preventDefault();
+        const key = roving.activeId.value;
+        const row = rowByKey.value.get(key);
+        if (row) {
+          const rowKey = keyFor(row, displayRows.value.indexOf(row));
+          toggleRow(rowKey, !selectedSet.value.has(rowKey));
+        }
+        return;
+      }
+      roving.onKeydown(event);
+    }
+    const headEl = ref(null);
+    const headHeight = ref(0);
+    let ro;
+    watch(
+      [headEl, () => props.stickyHeader],
+      ([el, sticky]) => {
+        ro?.disconnect();
+        if (!el || !sticky || typeof ResizeObserver === "undefined") {
+          headHeight.value = 0;
+          return;
+        }
+        ro = new ResizeObserver(() => {
+          headHeight.value = el.offsetHeight;
+        });
+        ro.observe(el);
+        headHeight.value = el.offsetHeight;
+      },
+      { immediate: true, flush: "post" }
+    );
+    onBeforeUnmount(() => ro?.disconnect());
+    const barInsetTop = computed(
+      () => props.stickyHeader && headHeight.value ? `${headHeight.value}px` : void 0
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        fade: false,
+        class: "rounded-card border border-line",
+        "bar-inset-top": barInsetTop.value
+      }, {
+        default: withCtx(() => [
+          createElementVNode("table", _hoisted_1, [
+            createElementVNode("thead", {
+              ref_key: "headEl",
+              ref: headEl,
+              class: normalizeClass(__props.stickyHeader ? "sticky top-0 z-10" : "")
+            }, [
+              createElementVNode("tr", _hoisted_2, [
+                __props.selectable ? (openBlock(), createElementBlock("th", _hoisted_3, [
+                  createVNode(_sfc_main$2, {
+                    "model-value": allChecked.value,
+                    indeterminate: someChecked.value,
+                    "onUpdate:modelValue": toggleAll
+                  }, null, 8, ["model-value", "indeterminate"])
+                ])) : createCommentVNode("", true),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (col) => {
+                  return openBlock(), createElementBlock("th", {
+                    key: col.key,
+                    style: normalizeStyle(col.width ? { width: col.width } : void 0),
+                    class: normalizeClass(["px-4 py-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted", alignClass(col.align)]),
+                    "aria-sort": activeSort.value?.key === col.key ? activeSort.value.dir === "asc" ? "ascending" : "descending" : void 0
+                  }, [
+                    col.sortable ? (openBlock(), createElementBlock("button", {
+                      key: 0,
+                      type: "button",
+                      class: normalizeClass(["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", [
+                        col.align === "right" ? "flex-row-reverse" : "",
+                        activeSort.value?.key === col.key ? "text-ink" : ""
+                      ]]),
+                      onClick: ($event) => toggleSort(col)
+                    }, [
+                      createTextVNode(toDisplayString(col.label) + " ", 1),
+                      createVNode(_sfc_main$3, {
+                        name: sortIcon(col),
+                        size: 13,
+                        class: normalizeClass([
+                          "shrink-0 transition-[transform,opacity] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)]",
+                          activeSort.value?.key === col.key ? "opacity-100" : "opacity-40 group-hover/sort:opacity-70"
+                        ])
+                      }, null, 8, ["name", "class"])
+                    ], 10, _hoisted_5)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                      createTextVNode(toDisplayString(col.label), 1)
+                    ], 64))
+                  ], 14, _hoisted_4);
+                }), 128))
+              ])
+            ], 2),
+            createVNode(TransitionGroup, {
+              tag: "tbody",
+              name: "lp-row",
+              ref: (el) => unref(roving).setContainer(el?.$el ?? null)
+            }, {
+              default: withCtx(() => [
+                displayRows.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_6, [
+                  createElementVNode("td", {
+                    colspan: colSpan.value,
+                    class: "px-4 py-10 text-center text-muted"
+                  }, [
+                    createVNode(_sfc_main$3, {
+                      name: __props.emptyIcon,
+                      size: 22,
+                      class: "mx-auto mb-2 opacity-60"
+                    }, null, 8, ["name"]),
+                    createElementVNode("div", null, toDisplayString(__props.emptyLabel), 1)
+                  ], 8, _hoisted_7)
+                ])) : createCommentVNode("", true),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, index) => {
+                  return openBlock(), createBlock(_sfc_main$4, {
+                    key: keyFor(row, index),
+                    items: menuFor(row)
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("tr", mergeProps({
+                        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", selectedSet.value.has(keyFor(row, index)) ? "bg-brand-soft/40" : ""]
+                      }, { ref_for: true }, unref(roving).itemProps(String(keyFor(row, index))), {
+                        onClick: ($event) => emit("rowClick", row),
+                        onKeydown: onRowKeydown
+                      }), [
+                        __props.selectable ? (openBlock(), createElementBlock("td", {
+                          key: 0,
+                          class: "w-px px-4 py-3",
+                          onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                          }, ["stop"]))
+                        }, [
+                          createVNode(_sfc_main$2, {
+                            "model-value": selectedSet.value.has(keyFor(row, index)),
+                            "onUpdate:modelValue": (v) => toggleRow(keyFor(row, index), v)
+                          }, null, 8, ["model-value", "onUpdate:modelValue"])
+                        ])) : createCommentVNode("", true),
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (col) => {
+                          return openBlock(), createElementBlock("td", {
+                            key: col.key,
+                            class: normalizeClass(["px-4 py-3 text-ink", alignClass(col.align)])
+                          }, [
+                            renderSlot(_ctx.$slots, `cell-${col.key}`, {
+                              row,
+                              value: row[col.key]
+                            }, () => [
+                              createTextVNode(toDisplayString(row[col.key]), 1)
+                            ], true)
+                          ], 2);
+                        }), 128))
+                      ], 16, _hoisted_8)
+                    ]),
+                    _: 2
+                  }, 1032, ["items"]);
+                }), 128))
+              ]),
+              _: 3
+            }, 512)
+          ])
+        ]),
+        _: 3
+      }, 8, ["bar-inset-top"]);
+    };
+  }
+});
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-359c1c0d"]]);
 export {
-  _sfc_main as default
+  LpTable as default
 };

package/dist/components/LpThemeSwitcher.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-7mAK6bI7.js";
+import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-Dj4VcTu7.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTopologyCanvas.vue.d.ts

@@ -121,7 +121,11 @@ type __VLS_Props = {
     controls?: boolean;
 };
 declare function applyViewport(v: CanvasViewport): Promise<void>;
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
+declare var __VLS_29: {};
+type __VLS_Slots = {} & {
+    'legend-extra'?: (props: typeof __VLS_29) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     fitView: import('@vue-flow/core').FitView;
     setViewport: typeof applyViewport;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
@@ -191,5 +195,11 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
     lanes: TopologyLane[];
     minimap: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/LpTopologyCanvas.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTopologyCanvas-ebP67CLx.js";
+import { _ as _sfc_main } from "../chunks/LpTopologyCanvas-Cm1L39uL.js";
 export {
   _sfc_main as default
 };

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";
@@ -186,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.29.0",
+  "version": "0.29.2",
   "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,56 @@ 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);
+}
+
+/*
+ * The leaving row stays in the flow. Taking it out with `position: absolute` is
+ * the usual trick for a list, but a `<tr>` positioned that way loses the table's
+ * column grid and collapses to its content width — the row visibly breaks apart
+ * on its way out. The rows below close the gap through `lp-row-move` instead,
+ * which is a moment slower and stays a table the whole time.
+ */
+
+/* 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;
+  }
+}
+</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>

package/dist/chunks/LpTable-DTj52qlg.js

@@ -1,266 +0,0 @@
-import { defineComponent, computed, ref, watch, onBeforeUnmount, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, createElementBlock, createVNode, createCommentVNode, Fragment, renderList, normalizeStyle, createTextVNode, toDisplayString, unref, mergeProps, withModifiers, renderSlot } from "vue";
-import { _ as _sfc_main$2 } from "./LpCheckbox-BO0zuuPh.js";
-import { _ as _sfc_main$4 } from "./LpContextMenu-D0mzXqA7.js";
-import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpScrollArea-D8xyKXcF.js";
-import { useRovingFocus } from "../composables/useRovingFocus.js";
-const _hoisted_1 = { class: "w-full border-collapse text-sm" };
-const _hoisted_2 = { class: "border-b border-line bg-surface-soft" };
-const _hoisted_3 = {
-  key: 0,
-  class: "w-px px-4 py-3"
-};
-const _hoisted_4 = ["aria-sort"];
-const _hoisted_5 = ["onClick"];
-const _hoisted_6 = { key: 0 };
-const _hoisted_7 = ["colspan"];
-const _hoisted_8 = ["onClick"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "LpTable",
-  props: {
-    columns: {},
-    rows: {},
-    rowKey: {},
-    emptyLabel: { default: "Nothing here yet" },
-    emptyIcon: { default: "lucide:inbox" },
-    selectable: { type: Boolean, default: false },
-    selected: { default: () => [] },
-    sort: { default: null },
-    stickyHeader: { type: Boolean },
-    rowMenu: {}
-  },
-  emits: ["update:selected", "update:sort", "rowClick"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    function keyFor(row, index) {
-      if (typeof props.rowKey === "function") return props.rowKey(row);
-      if (props.rowKey) return row[props.rowKey];
-      return index;
-    }
-    function alignClass(align) {
-      if (align === "right") return "text-right";
-      if (align === "center") return "text-center";
-      return "text-left";
-    }
-    function menuFor(row) {
-      return props.rowMenu?.(row) ?? [];
-    }
-    const displayRows = computed(() => {
-      const s = props.sort;
-      if (!s) return props.rows;
-      const col = props.columns.find((c) => c.key === s.key);
-      if (!col?.sortable) return props.rows;
-      const factor = s.dir === "asc" ? 1 : -1;
-      return [...props.rows].sort((a, b) => compare(a[s.key], b[s.key]) * factor);
-    });
-    function compare(a, b) {
-      if (a == null && b == null) return 0;
-      if (a == null) return -1;
-      if (b == null) return 1;
-      if (typeof a === "number" && typeof b === "number") return a - b;
-      return String(a).localeCompare(String(b), void 0, { numeric: true });
-    }
-    function toggleSort(col) {
-      if (!col.sortable) return;
-      const s = props.sort;
-      let next;
-      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;
-      emit("update:sort", next);
-    }
-    function sortIcon(col) {
-      if (props.sort?.key !== col.key) return "lucide:chevrons-up-down";
-      return props.sort.dir === "asc" ? "lucide:arrow-up" : "lucide:arrow-down";
-    }
-    const selectedSet = computed(() => new Set(props.selected));
-    const allKeys = computed(() => props.rows.map((r, i) => keyFor(r, i)));
-    const allChecked = computed(
-      () => allKeys.value.length > 0 && allKeys.value.every((k) => selectedSet.value.has(k))
-    );
-    const someChecked = computed(
-      () => !allChecked.value && allKeys.value.some((k) => selectedSet.value.has(k))
-    );
-    function toggleAll(checked) {
-      emit("update:selected", checked ? [...allKeys.value] : []);
-    }
-    function toggleRow(key, checked) {
-      const next = new Set(selectedSet.value);
-      if (checked) next.add(key);
-      else next.delete(key);
-      emit("update:selected", [...next]);
-    }
-    const colSpan = computed(() => props.columns.length + (props.selectable ? 1 : 0));
-    const rovingItems = computed(
-      () => displayRows.value.map((row, index) => ({
-        id: String(keyFor(row, index)),
-        label: String(row[props.columns[0]?.key ?? ""] ?? "")
-      }))
-    );
-    const rowByKey = computed(() => {
-      const map = /* @__PURE__ */ new Map();
-      displayRows.value.forEach((row, index) => map.set(String(keyFor(row, index)), row));
-      return map;
-    });
-    const roving = useRovingFocus(rovingItems, {
-      onActivate: (id) => {
-        const row = rowByKey.value.get(id);
-        if (!row) return;
-        emit("rowClick", row);
-      }
-    });
-    function onRowKeydown(event) {
-      if (event.key === " " && props.selectable && roving.activeId.value) {
-        event.preventDefault();
-        const key = roving.activeId.value;
-        const row = rowByKey.value.get(key);
-        if (row) {
-          const rowKey = keyFor(row, displayRows.value.indexOf(row));
-          toggleRow(rowKey, !selectedSet.value.has(rowKey));
-        }
-        return;
-      }
-      roving.onKeydown(event);
-    }
-    const headEl = ref(null);
-    const headHeight = ref(0);
-    let ro;
-    watch(
-      [headEl, () => props.stickyHeader],
-      ([el, sticky]) => {
-        ro?.disconnect();
-        if (!el || !sticky || typeof ResizeObserver === "undefined") {
-          headHeight.value = 0;
-          return;
-        }
-        ro = new ResizeObserver(() => {
-          headHeight.value = el.offsetHeight;
-        });
-        ro.observe(el);
-        headHeight.value = el.offsetHeight;
-      },
-      { immediate: true, flush: "post" }
-    );
-    onBeforeUnmount(() => ro?.disconnect());
-    const barInsetTop = computed(
-      () => props.stickyHeader && headHeight.value ? `${headHeight.value}px` : void 0
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1, {
-        fade: false,
-        class: "rounded-card border border-line",
-        "bar-inset-top": barInsetTop.value
-      }, {
-        default: withCtx(() => [
-          createElementVNode("table", _hoisted_1, [
-            createElementVNode("thead", {
-              ref_key: "headEl",
-              ref: headEl,
-              class: normalizeClass(__props.stickyHeader ? "sticky top-0 z-10" : "")
-            }, [
-              createElementVNode("tr", _hoisted_2, [
-                __props.selectable ? (openBlock(), createElementBlock("th", _hoisted_3, [
-                  createVNode(_sfc_main$2, {
-                    "model-value": allChecked.value,
-                    indeterminate: someChecked.value,
-                    "onUpdate:modelValue": toggleAll
-                  }, null, 8, ["model-value", "indeterminate"])
-                ])) : createCommentVNode("", true),
-                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (col) => {
-                  return openBlock(), createElementBlock("th", {
-                    key: col.key,
-                    style: normalizeStyle(col.width ? { width: col.width } : void 0),
-                    class: normalizeClass(["px-4 py-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted", alignClass(col.align)]),
-                    "aria-sort": __props.sort?.key === col.key ? __props.sort.dir === "asc" ? "ascending" : "descending" : void 0
-                  }, [
-                    col.sortable ? (openBlock(), createElementBlock("button", {
-                      key: 0,
-                      type: "button",
-                      class: normalizeClass(["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", [
-                        col.align === "right" ? "flex-row-reverse" : "",
-                        __props.sort?.key === col.key ? "text-ink" : ""
-                      ]]),
-                      onClick: ($event) => toggleSort(col)
-                    }, [
-                      createTextVNode(toDisplayString(col.label) + " ", 1),
-                      createVNode(_sfc_main$3, {
-                        name: sortIcon(col),
-                        size: 13,
-                        class: normalizeClass(["shrink-0 transition-[transform,opacity] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)]", __props.sort?.key === col.key ? "opacity-100" : "opacity-40 group-hover/sort:opacity-70"])
-                      }, null, 8, ["name", "class"])
-                    ], 10, _hoisted_5)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                      createTextVNode(toDisplayString(col.label), 1)
-                    ], 64))
-                  ], 14, _hoisted_4);
-                }), 128))
-              ])
-            ], 2),
-            createElementVNode("tbody", {
-              ref: (el) => unref(roving).setContainer(el)
-            }, [
-              displayRows.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_6, [
-                createElementVNode("td", {
-                  colspan: colSpan.value,
-                  class: "px-4 py-10 text-center text-muted"
-                }, [
-                  createVNode(_sfc_main$3, {
-                    name: __props.emptyIcon,
-                    size: 22,
-                    class: "mx-auto mb-2 opacity-60"
-                  }, null, 8, ["name"]),
-                  createElementVNode("div", null, toDisplayString(__props.emptyLabel), 1)
-                ], 8, _hoisted_7)
-              ])) : createCommentVNode("", true),
-              (openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, index) => {
-                return openBlock(), createBlock(_sfc_main$4, {
-                  key: keyFor(row, index),
-                  items: menuFor(row)
-                }, {
-                  default: withCtx(() => [
-                    createElementVNode("tr", mergeProps({
-                      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", selectedSet.value.has(keyFor(row, index)) ? "bg-brand-soft/40" : ""]
-                    }, { ref_for: true }, unref(roving).itemProps(String(keyFor(row, index))), {
-                      onClick: ($event) => emit("rowClick", row),
-                      onKeydown: onRowKeydown
-                    }), [
-                      __props.selectable ? (openBlock(), createElementBlock("td", {
-                        key: 0,
-                        class: "w-px px-4 py-3",
-                        onClick: _cache[0] || (_cache[0] = withModifiers(() => {
-                        }, ["stop"]))
-                      }, [
-                        createVNode(_sfc_main$2, {
-                          "model-value": selectedSet.value.has(keyFor(row, index)),
-                          "onUpdate:modelValue": (v) => toggleRow(keyFor(row, index), v)
-                        }, null, 8, ["model-value", "onUpdate:modelValue"])
-                      ])) : createCommentVNode("", true),
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (col) => {
-                        return openBlock(), createElementBlock("td", {
-                          key: col.key,
-                          class: normalizeClass(["px-4 py-3 text-ink", alignClass(col.align)])
-                        }, [
-                          renderSlot(_ctx.$slots, `cell-${col.key}`, {
-                            row,
-                            value: row[col.key]
-                          }, () => [
-                            createTextVNode(toDisplayString(row[col.key]), 1)
-                          ])
-                        ], 2);
-                      }), 128))
-                    ], 16, _hoisted_8)
-                  ]),
-                  _: 2
-                }, 1032, ["items"]);
-              }), 128))
-            ], 512)
-          ])
-        ]),
-        _: 3
-      }, 8, ["bar-inset-top"]);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};