@leavepulse/ui 0.22.7 → 0.22.9

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

@@ -23,11 +23,12 @@ 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 }
   },
-  emits: ["connect", "node-select", "node-contextmenu", "edge-contextmenu", "pane-click", "selection-change", "update:nodes", "node-drag-stop", "viewport-change"],
+  emits: ["connect", "node-select", "node-activate", "node-contextmenu", "edge-contextmenu", "pane-click", "selection-change", "update:nodes", "node-drag-stop", "viewport-change"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -122,6 +123,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const {
       onNodeClick,
+      onNodeDoubleClick,
       onNodeContextMenu,
       onEdgeContextMenu,
       onPaneClick,
@@ -133,6 +135,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       setViewport
     } = useVueFlow();
     onNodeClick(({ node }) => emit("node-select", node.id));
+    onNodeDoubleClick(({ node }) => emit("node-activate", node.id));
     onNodeDragStop(
       ({ node }) => emit("node-drag-stop", { id: node.id, position: { ...node.position } })
     );
@@ -158,12 +161,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 +221,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 +240,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.
@@ -110,6 +112,7 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     connect: (value: Connection) => any;
     "node-select": (id: string) => any;
+    "node-activate": (id: string) => any;
     "node-contextmenu": (value: {
         id: string;
         x: number;
@@ -138,6 +141,7 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onConnect?: ((value: Connection) => any) | undefined;
     "onNode-select"?: ((id: string) => any) | undefined;
+    "onNode-activate"?: ((id: string) => any) | undefined;
     "onNode-contextmenu"?: ((value: {
         id: string;
         x: number;

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-DCgm_d5G.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-DCgm_d5G.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.9",
   "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.
@@ -152,6 +156,8 @@ const props = withDefaults(
 const emit = defineEmits<{
   (e: "connect", value: Connection): void
   (e: "node-select", id: string): void
+  /** Double-click — the host's "open this" gesture, distinct from selecting. */
+  (e: "node-activate", id: string): void
   (e: "node-contextmenu", value: { id: string; x: number; y: number }): void
   (e: "edge-contextmenu", value: { id: string; x: number; y: number }): void
   (e: "pane-click"): void
@@ -281,6 +287,7 @@ const flowEdges = computed(() =>
 
 const {
   onNodeClick,
+  onNodeDoubleClick,
   onNodeContextMenu,
   onEdgeContextMenu,
   onPaneClick,
@@ -292,6 +299,9 @@ const {
   setViewport,
 } = useVueFlow()
 onNodeClick(({ node }) => emit("node-select", node.id))
+// A node usually has two levels of interest — pick it out, or open it — and a
+// single click cannot carry both. Hosts that only need one can ignore this.
+onNodeDoubleClick(({ node }) => emit("node-activate", node.id))
 // Drag settled → surface the node's final position so the host can persist it.
 onNodeDragStop(({ node }) =>
   emit("node-drag-stop", { id: node.id, position: { ...node.position } }),
@@ -327,12 +337,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…).