@leavepulse/ui 0.22.3 → 0.22.5

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

@@ -16,33 +16,44 @@ const _hoisted_8 = {
 };
 const _hoisted_9 = ["title"];
 const _hoisted_10 = ["title"];
+const _hoisted_11 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpInfraNode",
   props: {
     data: {},
-    selected: { type: Boolean }
+    selected: { type: Boolean },
+    roles: {}
   },
   setup(__props) {
     const props = __props;
-    const roleVar = {
-      hypervisor: "var(--color-accent)",
-      game: "var(--color-action)",
-      router: "var(--color-muted-strong)",
-      edge: "var(--color-brand)"
+    const DEFAULT_ROLES = {
+      compute: { color: "var(--color-node-compute)", icon: "▣" },
+      host: { color: "var(--color-node-compute)", icon: "▣" },
+      worker: { color: "var(--color-node-compute)", icon: "◱" },
+      hypervisor: { color: "var(--color-node-compute)", icon: "▦" },
+      game: { color: "var(--color-node-compute)", icon: "◈" },
+      storage: { color: "var(--color-node-transit)", icon: "▤" },
+      database: { color: "var(--color-node-transit)", icon: "▤" },
+      router: { color: "var(--color-node-transit)", icon: "⇄" },
+      proxy: { color: "var(--color-node-transit)", icon: "⇅" },
+      edge: { color: "var(--color-node-edge)", icon: "☁" },
+      public: { color: "var(--color-node-edge)", icon: "◉" }
     };
-    const accent = computed(() => roleVar[props.data.role] ?? "var(--color-line-strong)");
-    const roleIcon = {
-      hypervisor: "▣",
-      game: "◈",
-      router: "⇄",
-      edge: "☁"
-    };
-    const icon = computed(() => roleIcon[props.data.role] ?? "●");
+    const UNKNOWN_ROLE = { color: "var(--color-node-unknown)", icon: "●" };
+    const role = computed(
+      () => ({ ...DEFAULT_ROLES, ...props.roles ?? {} })[props.data.role] ?? UNKNOWN_ROLE
+    );
+    const accent = computed(() => role.value.color);
+    const icon = computed(() => role.value.icon);
+    const accentLine = computed(
+      () => `color-mix(in srgb, ${accent.value} 35%, var(--color-line))`
+    );
     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-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)]" : "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,
           ...__props.selected ? { boxShadow: "0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-panel)" } : {}
         })
@@ -57,7 +68,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           position: unref(Position).Right,
           class: "!size-2 !border-2 !border-[var(--accent)] !bg-surface"
         }, null, 8, ["position"]),
-        _cache[2] || (_cache[2] = createElementVNode("div", { class: "h-[3px] bg-[var(--accent)]" }, null, -1)),
+        _cache[3] || (_cache[3] = createElementVNode("div", { class: "h-[3px] bg-[var(--accent)]" }, null, -1)),
         createElementVNode("div", _hoisted_1, [
           createElementVNode("div", _hoisted_2, [
             createElementVNode("span", _hoisted_3, toDisplayString(icon.value), 1),
@@ -71,7 +82,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode("span", _hoisted_6, toDisplayString(__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 ? (openBlock(), createElementBlock("div", _hoisted_8, [
+          __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",
@@ -82,12 +93,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ], 8, _hoisted_9)) : createCommentVNode("", true),
             __props.data.serviceCount !== void 0 ? (openBlock(), createElementBlock("span", {
               key: 1,
-              class: "inline-flex items-center gap-1 rounded-pill bg-surface-soft px-1.5 py-0.5 text-[9px] font-medium text-muted",
-              title: `${__props.data.serviceCount} service(s)`
+              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)`
             }, [
               _cache[1] || (_cache[1] = createElementVNode("span", null, "◇", -1)),
               createTextVNode(toDisplayString(__props.data.serviceCount), 1)
-            ], 8, _hoisted_10)) : createCommentVNode("", true)
+            ], 10, _hoisted_10)) : createCommentVNode("", true),
+            __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`
+            }, [
+              _cache[2] || (_cache[2] = createElementVNode("span", null, "⚠", -1)),
+              createTextVNode(toDisplayString(__props.data.staleFor) + " old ", 1)
+            ], 8, _hoisted_11)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
         ])
       ], 6);

package/dist/chunks/{LpTopologyCanvas-DCQINTZE.js → LpTopologyCanvas-BsJWyacK.js}

@@ -3,7 +3,7 @@ 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-C_PHcthC.js";
+import { _ as _sfc_main$3 } from "./LpInfraNode-qIL3l7IO.js";
 import { _ as _sfc_main$1 } from "./LpLaneNode-HtnQf2FF.js";
 import { _ as _sfc_main$2 } from "./LpServiceNode-Dc-Ut5RS.js";
 const _hoisted_1 = { class: "flex flex-col gap-1.5 rounded-card border border-line bg-surface-overlay/90 px-3 py-2 text-[11px] backdrop-blur" };

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

@@ -9,13 +9,27 @@ export interface InfraNodeData {
     firewallCount?: number;
     /** Service count on this host (badge when defined — services toggle on). */
     serviceCount?: number;
+    /**
+     * How old this node's readings are, human-readable ("28d"). An unreachable
+     * machine keeps serving its last snapshot, which reads as current unless the
+     * card says otherwise — so when set, the counts below are struck through and
+     * the age is shown in their place.
+     */
+    staleFor?: string;
     /** Fade the node back (search miss / not part of the focused node's graph). */
     dimmed?: boolean;
 }
 type __VLS_Props = {
     data: InfraNodeData;
     selected?: boolean;
+    /** Extra/overriding role styles, merged over the defaults below. */
+    roles?: Record<string, InfraRoleStyle>;
 };
+export interface InfraRoleStyle {
+    /** CSS colour — normally a var() reference, e.g. var(--color-node-edge). */
+    color: string;
+    icon: string;
+}
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/LpInfraNode.vue.js

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

package/dist/components/LpTopologyCanvas.vue.js

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

package/dist/index.js

@@ -26,7 +26,7 @@ import { _ as _23 } from "./chunks/LpFileTree-DWx77B1F.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _24 } from "./chunks/LpFormField-Bn-ZwC6z.js";
 import { _ as _25 } from "./chunks/LpIcon-CCnX5_2j.js";
-import { _ as _26 } from "./chunks/LpInfraNode-C_PHcthC.js";
+import { _ as _26 } from "./chunks/LpInfraNode-qIL3l7IO.js";
 import { _ as _27 } from "./chunks/LpInput-BauZRyzm.js";
 import { _ as _28 } from "./chunks/LpLightbox-Ci35Y_xP.js";
 import { fileNameOf } from "./components/lightbox.js";
@@ -64,7 +64,7 @@ import { D, _ as _56, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v }
 import { _ as _57 } from "./chunks/LpTilt-DuyKbpkA.js";
 import { _ as _58 } from "./chunks/LpToaster-gDB1EaU3.js";
 import { _ as _59 } from "./chunks/LpTooltip-D1hbjQWG.js";
-import { _ as _60 } from "./chunks/LpTopologyCanvas-DCQINTZE.js";
+import { _ as _60 } from "./chunks/LpTopologyCanvas-BsJWyacK.js";
 import { _ as _61 } from "./chunks/LpUptimeBar-CB366k0O.js";
 import { deserializeLayout, serializeLayout } from "./layout/tree.js";
 import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, setActiveTab } from "./layout/tree.js";

package/package.json

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

package/src/components/LpInfraNode.vue

@@ -22,34 +22,70 @@ export interface InfraNodeData {
   firewallCount?: number
   /** Service count on this host (badge when defined — services toggle on). */
   serviceCount?: number
+  /**
+   * How old this node's readings are, human-readable ("28d"). An unreachable
+   * machine keeps serving its last snapshot, which reads as current unless the
+   * card says otherwise — so when set, the counts below are struck through and
+   * the age is shown in their place.
+   */
+  staleFor?: string
   /** Fade the node back (search miss / not part of the focused node's graph). */
   dimmed?: boolean
 }
 
-const props = defineProps<{ data: InfraNodeData; selected?: boolean }>()
+const props = defineProps<{
+  data: InfraNodeData
+  selected?: boolean
+  /** Extra/overriding role styles, merged over the defaults below. */
+  roles?: Record<string, InfraRoleStyle>
+}>()
 
-const roleVar: Record<string, string> = {
-  hypervisor: "var(--color-accent)",
-  game: "var(--color-action)",
-  router: "var(--color-muted-strong)",
-  edge: "var(--color-brand)",
+/*
+ * Role → look. Colours are token references, never literals, so a theme (or a
+ * consumer) restyles the graph without forking this component; the glyph keeps
+ * the encoding readable without colour. `roles` overrides or extends the table
+ * for a fleet whose vocabulary differs — anything unmapped stays neutral rather
+ * than silently borrowing another role's meaning.
+ */
+export interface InfraRoleStyle {
+  /** CSS colour — normally a var() reference, e.g. var(--color-node-edge). */
+  color: string
+  icon: string
 }
-const accent = computed(() => roleVar[props.data.role] ?? "var(--color-line-strong)")
-const roleIcon: Record<string, string> = {
-  hypervisor: "▣",
-  game: "◈",
-  router: "⇄",
-  edge: "☁",
+const DEFAULT_ROLES: Record<string, InfraRoleStyle> = {
+  compute: { color: "var(--color-node-compute)", icon: "▣" },
+  host: { color: "var(--color-node-compute)", icon: "▣" },
+  worker: { color: "var(--color-node-compute)", icon: "◱" },
+  hypervisor: { color: "var(--color-node-compute)", icon: "▦" },
+  game: { color: "var(--color-node-compute)", icon: "◈" },
+  storage: { color: "var(--color-node-transit)", icon: "▤" },
+  database: { color: "var(--color-node-transit)", icon: "▤" },
+  router: { color: "var(--color-node-transit)", icon: "⇄" },
+  proxy: { color: "var(--color-node-transit)", icon: "⇅" },
+  edge: { color: "var(--color-node-edge)", icon: "☁" },
+  public: { color: "var(--color-node-edge)", icon: "◉" },
 }
-const icon = computed(() => roleIcon[props.data.role] ?? "●")
+const UNKNOWN_ROLE: InfraRoleStyle = { color: "var(--color-node-unknown)", icon: "●" }
+
+const role = computed<InfraRoleStyle>(
+  () => ({ ...DEFAULT_ROLES, ...(props.roles ?? {}) })[props.data.role] ?? UNKNOWN_ROLE,
+)
+const accent = computed(() => role.value.color)
+const icon = computed(() => role.value.icon)
+// A tinted edge rather than a grey one: with only the top stripe carrying the
+// role, a canvas of cards read as one undifferentiated grid.
+const accentLine = computed(
+  () => `color-mix(in srgb, ${accent.value} 35%, var(--color-line))`,
+)
 </script>
 
 <template>
   <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-line'"
+    :class="selected ? 'border-[var(--accent)]' : 'border-[var(--accent-line)]'"
     :style="{
       '--accent': accent,
+      '--accent-line': accentLine,
       opacity: data.dimmed ? 0.3 : data.online === false ? 0.5 : 1,
       ...(selected
         ? { boxShadow: '0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-panel)' }
@@ -85,7 +121,7 @@ const icon = computed(() => roleIcon[props.data.role] ?? "●")
         <span v-if="data.overlay" class="font-mono text-[10px] text-muted">{{ data.overlay }}</span>
       </div>
       <div
-        v-if="data.firewallCount || data.serviceCount !== undefined"
+        v-if="data.firewallCount || data.serviceCount !== undefined || data.staleFor"
         class="mt-1.5 flex items-center gap-1.5"
       >
         <span
@@ -98,10 +134,22 @@ const icon = computed(() => roleIcon[props.data.role] ?? "●")
         <span
           v-if="data.serviceCount !== undefined"
           class="inline-flex items-center gap-1 rounded-pill bg-surface-soft px-1.5 py-0.5 text-[9px] font-medium text-muted"
-          :title="`${data.serviceCount} service(s)`"
+          :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)`
+          "
         >
           <span>◇</span>{{ data.serviceCount }}
         </span>
+        <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`"
+        >
+          <span>⚠</span>{{ data.staleFor }} old
+        </span>
       </div>
     </div>
   </div>

package/src/components/LpModal.vue

@@ -72,12 +72,8 @@ const widthClass = computed(() => {
 // inset horizontally; top only when there's no header, bottom only when there's
 // no footer (header/footer own those edges).
 const slots = useSlots()
-/*
- * The body clips its overflow, and a focus ring is drawn OUTSIDE the control it
- * belongs to — so a field sitting flush against the top of the body had its
- * ring sliced off. Under a header the gap is only the ring's width plus a
- * hair; without one the existing pt-5 already clears it.
- */
+// The body clips overflow and focus rings are drawn outside their control, so a
+// field flush against the top edge lost its ring; pt-1 clears the ring's width.
 const bodyPad = computed(() =>
   [
     "px-5",

package/src/tokens/tokens.css

@@ -46,6 +46,17 @@
   --color-line-strong: rgba(255, 255, 255, 0.18);
   --color-ring: rgba(0, 188, 255, 0.45);
 
+  /* ── color: infra roles ──────────────────────────
+     What a machine on a topology DOES, in three families: it runs work, it
+     carries traffic, or it is the way in from outside. Derived from the palette
+     above so a theme gets them for free, and named so a consumer whose fleet
+     doesn't split this way can repoint them without forking the component.
+     Anything unmapped falls back to --color-node-unknown. */
+  --color-node-compute: var(--color-action);
+  --color-node-transit: var(--color-accent);
+  --color-node-edge: var(--color-brand);
+  --color-node-unknown: var(--color-line-strong);
+
   /* ── shape ───────────────────────────────────── */
   --radius-control: 8px;
   --radius-card: 14px;