@leavepulse/ui 0.22.7 → 0.22.8

package/dist/chunks/{LpTopologyCanvas-DNmL56pJ.js → LpTopologyCanvas-B4tPWXFW.js}

@@ -23,6 +23,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     selectable: { type: Boolean, default: false },
     legend: { type: Boolean, default: true },
     legendPosition: { default: "bottom-left" },
+    legendLabels: {},
     lanes: { default: () => [] },
     minimap: { type: Boolean, default: true },
     controls: { type: Boolean, default: true }
@@ -158,12 +159,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (props.legendPosition === "bottom-right") return "!bottom-40";
       return "";
     });
-    const legendItems = [
-      { label: "Network", color: CATEGORY_COLOR.network, width: 2, dash: "0" },
-      { label: "Depends-on", color: CATEGORY_COLOR.structural, width: 1.5, dash: "1 5" },
-      { label: "Pending", color: "var(--color-brand)", width: 2, dash: "6 5" },
-      { label: "Drift", color: "var(--color-danger)", width: 2, dash: "6 5" }
-    ];
+    const legendItems = computed(() => [
+      { label: props.legendLabels?.network ?? "Network", color: CATEGORY_COLOR.network, width: 2, dash: "0" },
+      {
+        label: props.legendLabels?.structural ?? "Depends-on",
+        color: CATEGORY_COLOR.structural,
+        width: 1.5,
+        dash: "1 5"
+      },
+      { label: props.legendLabels?.pending ?? "Pending", color: "var(--color-brand)", width: 2, dash: "6 5" },
+      { label: props.legendLabels?.drift ?? "Drift", color: "var(--color-danger)", width: 2, dash: "6 5" }
+    ]);
     onEdgeContextMenu(({ edge, event }) => {
       const e = event;
       e.preventDefault?.();
@@ -213,8 +219,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, {
             default: withCtx(() => [
               createElementVNode("div", _hoisted_1, [
-                (openBlock(), createElementBlock(Fragment, null, renderList(legendItems, (l) => {
-                  return createElementVNode("div", {
+                (openBlock(true), createElementBlock(Fragment, null, renderList(legendItems.value, (l) => {
+                  return openBlock(), createElementBlock("div", {
                     key: l.label,
                     class: "flex items-center gap-2 text-muted"
                   }, [
@@ -232,7 +238,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ])),
                     createTextVNode(" " + toDisplayString(l.label), 1)
                   ]);
-                }), 64))
+                }), 128))
               ])
             ]),
             _: 1

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

@@ -90,6 +90,8 @@ type __VLS_Props = {
      * minimap owns the bottom-right.
      */
     legendPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    /** Rename legend rows to match what this graph's edges actually mean. */
+    legendLabels?: Partial<Record<"network" | "structural" | "pending" | "drift", string>>;
     /**
      * Background swimlanes drawn beneath the nodes (one per project / overlay).
      * Non-interactive; pan/zoom with the graph. Empty = no lanes.

package/dist/components/LpTopologyCanvas.vue.js

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

package/src/components/LpTopologyCanvas.vue

@@ -125,6 +125,10 @@ const props = withDefaults(
      * minimap owns the bottom-right.
      */
     legendPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+    /** Rename legend rows to match what this graph's edges actually mean. */
+    legendLabels?: Partial<
+      Record<"network" | "structural" | "pending" | "drift", string>
+    >
     /**
      * Background swimlanes drawn beneath the nodes (one per project / overlay).
      * Non-interactive; pan/zoom with the graph. Empty = no lanes.
@@ -327,12 +331,20 @@ const legendOffset = computed(() => {
 })
 
 // Legend rows mirror the edge encoding exactly (same colours/dashes).
-const legendItems = [
-  { label: "Network", color: CATEGORY_COLOR.network, width: 2, dash: "0" },
-  { label: "Depends-on", color: CATEGORY_COLOR.structural, width: 1.5, dash: "1 5" },
-  { label: "Pending", color: "var(--color-brand)", width: 2, dash: "6 5" },
-  { label: "Drift", color: "var(--color-danger)", width: 2, dash: "6 5" },
-] as const
+// What each encoding MEANS depends on what the host is drawing: the same solid
+// line is a transport on a machine graph and a call on a service graph, so
+// "Network" would be wrong half the time. `legendLabels` renames any row.
+const legendItems = computed(() => [
+  { label: props.legendLabels?.network ?? "Network", color: CATEGORY_COLOR.network, width: 2, dash: "0" },
+  {
+    label: props.legendLabels?.structural ?? "Depends-on",
+    color: CATEGORY_COLOR.structural,
+    width: 1.5,
+    dash: "1 5",
+  },
+  { label: props.legendLabels?.pending ?? "Pending", color: "var(--color-brand)", width: 2, dash: "6 5" },
+  { label: props.legendLabels?.drift ?? "Drift", color: "var(--color-danger)", width: 2, dash: "6 5" },
+])
 
 onEdgeContextMenu(({ edge, event }) => {
   // Right-click an edge → host renders edge actions (change transport, remove…).