@leavepulse/ui 0.22.2 → 0.22.4

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

@@ -16,6 +16,7 @@ const _hoisted_8 = {
 };
 const _hoisted_9 = ["title"];
 const _hoisted_10 = ["title"];
+const _hoisted_11 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpInfraNode",
   props: {
@@ -57,7 +58,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 +72,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 +83,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-CQt-G9KL.js → LpTopologyCanvas-74i_pq4e.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-C_4cyGl9.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" };
@@ -103,7 +103,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           source: e.source,
           target: e.target,
           type: "default",
-          animated: obs !== "applied",
+          animated: obs !== "applied" && !e.dimmed,
           label: e.kind,
           labelBgStyle: { fill: "var(--color-surface)" },
           labelStyle: { fill: "var(--color-muted-strong)", fontSize: "10px" },
@@ -111,7 +111,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             stroke: color,
             strokeWidth: cat === "structural" ? 1.5 : 2,
             strokeDasharray: edgeDash(cat, obs),
-            strokeLinecap: "round"
+            strokeLinecap: "round",
+            opacity: e.dimmed ? 0.12 : 1
           },
           markerEnd: { type: MarkerType.ArrowClosed, color }
         };

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

@@ -9,6 +9,13 @@ 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;
 }

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-C_4cyGl9.js";
 export {
   _sfc_main as default
 };

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

@@ -40,6 +40,12 @@ export interface TopologyEdge {
     /** Semantic class driving colour + dash. Inferred from `kind` if omitted. */
     category?: EdgeCategory;
     observed?: EdgeObserved;
+    /**
+     * Push the edge into the background, matching the node data's `dimmed`. A
+     * focus highlight has to fade the edges too — dimming only the nodes leaves
+     * every unrelated line at full strength.
+     */
+    dimmed?: boolean;
 }
 /**
  * A background swimlane: a sized zone (one per project / overlay network) drawn

package/dist/components/LpTopologyCanvas.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTopologyCanvas-CQt-G9KL.js";
+import { _ as _sfc_main } from "../chunks/LpTopologyCanvas-74i_pq4e.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-C_4cyGl9.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-CQt-G9KL.js";
+import { _ as _60 } from "./chunks/LpTopologyCanvas-74i_pq4e.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.2",
+  "version": "0.22.4",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpInfraNode.vue

@@ -22,6 +22,13 @@ 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
 }
@@ -85,7 +92,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 +105,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/components/LpTopologyCanvas.vue

@@ -71,6 +71,12 @@ export interface TopologyEdge {
   /** Semantic class driving colour + dash. Inferred from `kind` if omitted. */
   category?: EdgeCategory
   observed?: EdgeObserved
+  /**
+   * Push the edge into the background, matching the node data's `dimmed`. A
+   * focus highlight has to fade the edges too — dimming only the nodes leaves
+   * every unrelated line at full strength.
+   */
+  dimmed?: boolean
 }
 
 /**
@@ -248,7 +254,7 @@ const flowEdges = computed(() =>
       source: e.source,
       target: e.target,
       type: "default",
-      animated: obs !== "applied",
+      animated: obs !== "applied" && !e.dimmed,
       label: e.kind,
       labelBgStyle: { fill: "var(--color-surface)" },
       labelStyle: { fill: "var(--color-muted-strong)", fontSize: "10px" },
@@ -257,6 +263,7 @@ const flowEdges = computed(() =>
         strokeWidth: cat === "structural" ? 1.5 : 2,
         strokeDasharray: edgeDash(cat, obs),
         strokeLinecap: "round" as const,
+        opacity: e.dimmed ? 0.12 : 1,
       },
       markerEnd: { type: MarkerType.ArrowClosed, color },
     }