@leavepulse/ui 0.22.2 → 0.22.3

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

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

package/dist/index.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-DCQINTZE.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.3",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

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 },
     }