@leavepulse/ui 0.28.5 → 0.29.1

package/dist/assets/LpTable-DMOyAUOh.css

@@ -0,0 +1,44 @@
+
+/*
+ * 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-7884aed8],
+.lp-row-leave-active[data-v-7884aed8] {
+  transition:
+    opacity var(--duration-fast) var(--ease-emphasized),
+    transform var(--duration-fast) var(--ease-emphasized);
+}
+.lp-row-move[data-v-7884aed8] {
+  transition: transform var(--duration-medium) var(--ease-emphasized);
+}
+.lp-row-enter-from[data-v-7884aed8],
+.lp-row-leave-to[data-v-7884aed8] {
+  opacity: 0;
+  transform: translateX(-0.5rem);
+}
+.lp-row-leave-active[data-v-7884aed8] {
+  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[data-v-7884aed8],
+  .lp-row-leave-active[data-v-7884aed8],
+  .lp-row-move[data-v-7884aed8] {
+    transition: none;
+}
+.lp-row-leave-active[data-v-7884aed8] {
+    position: static;
+}
+}

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-DMOyAUOh.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-7884aed8"]]);
 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/composables/useFormDraft.d.ts

@@ -0,0 +1,67 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+export interface UseFormDraftOptions<T> {
+    /**
+     * Where this draft lives. Include whatever identifies the subject — a draft
+     * for device A must not surface while editing device B.
+     */
+    key: MaybeRefOrGetter<string>;
+    /** The form's current value. Watched deeply; every change rewrites the draft. */
+    value: MaybeRefOrGetter<T>;
+    /**
+     * Whether there is anything worth keeping. Return false while the form still
+     * matches what was loaded, so an untouched form leaves nothing behind and no
+     * later visit is offered its own starting state back as a "draft".
+     */
+    dirty?: MaybeRefOrGetter<boolean>;
+    /**
+     * How long a draft stays offerable, in milliseconds. Older ones are dropped
+     * on read: a fortnight-old draft of a record that has been edited twice since
+     * is not a rescue, it is a way to overwrite current facts with stale ones.
+     * Defaults to a week. `0` keeps them indefinitely.
+     */
+    maxAgeMs?: number;
+    /** Skip the write without tearing the composable out of the component. */
+    disabled?: MaybeRefOrGetter<boolean>;
+}
+export interface UseFormDraft<T> {
+    /** A draft was found for this key, and has not been restored or discarded. */
+    hasDraft: Ref<boolean>;
+    /** When that draft was written, ISO-8601, or `null` when there is none. */
+    savedAt: Ref<string | null>;
+    /**
+     * The stored value, or `null`. Reading does not apply it — the caller decides
+     * what to do with each field, because only it knows the form's shape.
+     */
+    read: () => T | null;
+    /** Forget the draft. Call after applying it, and after a successful save. */
+    discard: () => void;
+    /** Write now, ignoring `dirty`. For "save and come back to this later". */
+    save: () => void;
+}
+/**
+ * Keeps an unsaved form in browser storage, so losing the page does not lose
+ * what was typed into it.
+ *
+ * ```ts
+ * const draft = useFormDraft({
+ *   key: () => `lp.draft.device-power:${deviceId.value}`,
+ *   value: () => interfaces.value,
+ *   dirty: () => hasUnsavedChanges.value,
+ * })
+ * ```
+ * ```vue
+ * <LpAlert v-if="draft.hasDraft.value" variant="info">
+ *   {{ t("draft.found", { when: draft.savedAt.value }) }}
+ *   <LpButton @click="applyDraft">Restore</LpButton>
+ *   <LpButton variant="ghost" @click="draft.discard()">Discard</LpButton>
+ * </LpAlert>
+ * ```
+ *
+ * `hasDraft` answers for the key as it is now, so a form that switches subject
+ * re-reads rather than carrying the previous subject's answer.
+ *
+ * Call `discard()` once the record is saved. A draft that outlives the save it
+ * describes is offered back on the next visit as though it were newer than the
+ * record, which is how a form helpfully undoes somebody's work.
+ */
+export declare function useFormDraft<T>(options: UseFormDraftOptions<T>): UseFormDraft<T>;