@leavepulse/ui 0.22.6 → 0.22.8

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

@@ -1,4 +1,4 @@
-import { defineComponent, markRaw, computed, watch, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { defineComponent, markRaw, computed, watch, openBlock, createBlock, unref, withCtx, createVNode, createCommentVNode, normalizeClass, createElementVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString } from "vue";
 import { Background } from "@vue-flow/background";
 import { Controls } from "@vue-flow/controls";
 import { MarkerType, useVueFlow, VueFlow, SelectionMode, Panel } from "@vue-flow/core";
@@ -23,7 +23,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     selectable: { type: Boolean, default: false },
     legend: { type: Boolean, default: true },
     legendPosition: { default: "bottom-left" },
-    lanes: { default: () => [] }
+    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"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -156,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?.();
@@ -196,22 +204,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             size: 1.4,
             "pattern-color": "var(--color-line-strong)"
           }),
-          createVNode(unref(MiniMap), {
+          __props.minimap ? (openBlock(), createBlock(unref(MiniMap), {
+            key: 0,
             pannable: "",
             zoomable: "",
             "node-color": "var(--color-surface-soft)",
             "mask-color": "rgba(0,0,0,0.55)"
-          }),
-          createVNode(unref(Controls)),
+          })) : createCommentVNode("", true),
+          __props.controls ? (openBlock(), createBlock(unref(Controls), { key: 1 })) : createCommentVNode("", true),
           __props.legend ? (openBlock(), createBlock(unref(Panel), {
-            key: 0,
+            key: 2,
             position: __props.legendPosition,
             class: normalizeClass(legendOffset.value)
           }, {
             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"
                   }, [
@@ -229,7 +238,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ])),
                     createTextVNode(" " + toDisplayString(l.label), 1)
                   ]);
-                }), 64))
+                }), 128))
               ])
             ]),
             _: 1

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

@@ -90,11 +90,20 @@ 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.
      */
     lanes?: TopologyLane[];
+    /**
+     * Minimap and zoom controls. On by default — a full-page map needs both —
+     * but a graph embedded at a few hundred pixels has nothing to navigate, and
+     * the overlays then cover a real share of the picture.
+     */
+    minimap?: boolean;
+    controls?: boolean;
 };
 declare function applyViewport(v: CanvasViewport): Promise<void>;
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
@@ -158,10 +167,12 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
     }) => any) | undefined;
 }>, {
     legend: boolean;
+    controls: boolean;
     connectable: boolean;
     selectable: boolean;
     legendPosition: "top-left" | "top-right" | "bottom-left" | "bottom-right";
     lanes: TopologyLane[];
+    minimap: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/LpTopologyCanvas.vue.js

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

package/src/components/LpTopologyCanvas.vue

@@ -125,11 +125,22 @@ 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.
      */
     lanes?: TopologyLane[]
+    /**
+     * Minimap and zoom controls. On by default — a full-page map needs both —
+     * but a graph embedded at a few hundred pixels has nothing to navigate, and
+     * the overlays then cover a real share of the picture.
+     */
+    minimap?: boolean
+    controls?: boolean
   }>(),
   {
     connectable: false,
@@ -137,6 +148,8 @@ const props = withDefaults(
     legend: true,
     legendPosition: "bottom-left",
     lanes: () => [],
+    minimap: true,
+    controls: true,
   },
 )
 
@@ -318,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…).
@@ -361,8 +382,14 @@ defineExpose({ fitView, setViewport: applyViewport })
     class="lp-topology"
   >
     <Background :gap="22" :size="1.4" pattern-color="var(--color-line-strong)" />
-    <MiniMap pannable zoomable node-color="var(--color-surface-soft)" mask-color="rgba(0,0,0,0.55)" />
-    <Controls />
+    <MiniMap
+      v-if="minimap"
+      pannable
+      zoomable
+      node-color="var(--color-surface-soft)"
+      mask-color="rgba(0,0,0,0.55)"
+    />
+    <Controls v-if="controls" />
 
     <!-- Edge-type legend: makes the colour/dash encoding self-explanatory. -->
     <Panel v-if="legend" :position="legendPosition" :class="legendOffset">