@leavepulse/ui 0.77.3 → 0.78.1

package/dist/chunks/LpTopologyCanvas-jqz1KCq2.js

@@ -0,0 +1,678 @@
+import { defineComponent, useModel, h, markRaw, computed, shallowRef, watch, ref, openBlock, createBlock, unref, withCtx, createVNode, createCommentVNode, withKeys, withModifiers, createElementBlock, toDisplayString, createElementVNode, Fragment, renderList, createTextVNode, normalizeClass, renderSlot, mergeModels, nextTick } from "vue";
+import { Background } from "@vue-flow/background";
+import { Controls } from "@vue-flow/controls";
+import { useVueFlow, MarkerType, VueFlow, SelectionMode, Panel } from "@vue-flow/core";
+import { MiniMap } from "@vue-flow/minimap";
+import { prefersReducedMotion } from "../composables/easing.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useResizeObserver } from "../composables/useResizeObserver.js";
+import { nodeWindow, isHTMLElement } from "../composables/realm.js";
+import { backgroundOf, resolveCssColor, svgToPng } from "../components/exportData.js";
+import { _ as _sfc_main$6 } from "./LpButton-DSHioIfD.js";
+import { _ as _sfc_main$7 } from "./LpIcon-C6JpQ5td.js";
+import { _ as _sfc_main$3 } from "./LpInfraNode-Bb5nbuFY.js";
+import { _ as _sfc_main$5 } from "./LpInput-D0O6dpuA.js";
+import { _ as _sfc_main$1 } from "./LpLaneNode-Bqcdm8Rf.js";
+import { _ as _sfc_main$2 } from "./LpServiceNode-Cln2ntdw.js";
+import { _ as _sfc_main$8 } from "./LpSlider-A4ixovgS.js";
+import { _ as _sfc_main$4 } from "./LpWaypointEdge-D8yHlQiw.js";
+import { diffTopology, detailAtZoom, collapseChildren, clusterGraph, findNodes, findPath, neighborhood, groupBoxes, nodeName, frameSize, edgeLabelText, nearestInDirection, absolutePositions, layeredLayout, topologyToSvg } from "../components/topologyGraph.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "mt-1 text-xs text-muted",
+  role: "status"
+};
+const _hoisted_2 = {
+  width: "22",
+  height: "6",
+  class: "shrink-0",
+  "aria-hidden": "true"
+};
+const _hoisted_3 = ["stroke", "stroke-width", "stroke-dasharray"];
+const GROUP_WIDTH = 260;
+const GROUP_HEIGHT = 160;
+const PATH_EXTRA_WIDTH = 1.5;
+const REMOVED_DASH = "3 5";
+const MINIMAP_HEIGHT = 165;
+const FRAME = 24;
+const FOCUS_MAX_ZOOM = 1.2;
+const FOCUS_DURATION_MS = 300;
+const LANE_BAND_GAP = 104;
+const OFFSCREEN = "position:absolute;left:-99999px;top:0;visibility:hidden";
+const EXPORT_NODE_WIDTH = 220;
+const EXPORT_NODE_HEIGHT = 96;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpTopologyCanvas",
+  props: /* @__PURE__ */ mergeModels({
+    nodes: {},
+    edges: {},
+    connectable: { type: Boolean, default: false },
+    selectable: { type: Boolean, default: false },
+    legend: { type: Boolean, default: true },
+    legendPosition: { default: "bottom-left" },
+    edgeType: {},
+    legendLabels: {},
+    lanes: { default: () => [] },
+    minimap: { type: Boolean, default: true },
+    controls: { type: Boolean, default: true },
+    edgeFilter: { type: Function, default: void 0 },
+    highlightNeighbors: { type: Boolean },
+    path: { default: void 0 },
+    directedPath: { type: Boolean },
+    groupBy: { type: [String, Function], default: void 0 },
+    search: { type: Boolean },
+    keyboardNav: { type: Boolean },
+    selectionActions: { default: void 0 },
+    compareTo: { default: void 0 },
+    timeline: { default: void 0 },
+    fitOnResize: { default: "never" },
+    dataRevision: { default: void 0 },
+    autoSizeGroups: { type: Boolean },
+    detail: { default: "full" },
+    labels: { default: void 0 }
+  }, {
+    "timelineIndex": { default: void 0 },
+    "timelineIndexModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["connect", "node-select", "node-activate", "node-contextmenu", "edge-contextmenu", "pane-click", "selection-change", "update:nodes", "node-drag-stop", "path-change", "selection-action", "viewport-change"], ["update:timelineIndex"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const TOPOLOGY_LABELS = {
+      search: "Find a node",
+      searchResults: "{n} found",
+      selected: "{n} selected",
+      timeline: "Version"
+    };
+    const props = __props;
+    const text = useLabels("topology", TOPOLOGY_LABELS, () => props.labels);
+    const timelineIndex = useModel(__props, "timelineIndex");
+    const emit = __emit;
+    const GroupNode = defineComponent({
+      props: { label: { type: [String, Object], default: void 0 } },
+      setup: (props2) => () => typeof props2.label === "string" ? h("div", { class: "px-3 pt-2 text-xs font-medium text-muted" }, props2.label) : null
+    });
+    const nodeTypes = {
+      group: markRaw(GroupNode),
+      infra: markRaw(_sfc_main$3),
+      service: markRaw(_sfc_main$2),
+      lane: markRaw(_sfc_main$1)
+    };
+    const edgeTypes = { waypoints: markRaw(_sfc_main$4) };
+    const {
+      onNodeClick,
+      onNodeDoubleClick,
+      onNodeContextMenu,
+      onEdgeContextMenu,
+      onPaneClick,
+      onConnect,
+      onNodeDragStop,
+      onMoveEnd,
+      getSelectedNodes,
+      fitView,
+      setViewport,
+      onNodesInitialized,
+      vueFlowRef,
+      viewport,
+      findNode,
+      getNodes,
+      addSelectedNodes,
+      removeSelectedNodes
+    } = useVueFlow();
+    const versionIndex = computed(() => {
+      const last = (props.timeline?.length ?? 0) - 1;
+      return Math.max(0, Math.min(timelineIndex.value ?? last, last));
+    });
+    const current = computed(
+      () => props.timeline?.[versionIndex.value] ?? { nodes: props.nodes, edges: props.edges }
+    );
+    const baseline = computed(() => props.timeline ? props.timeline[versionIndex.value - 1] : props.compareTo);
+    const diff = computed(() => baseline.value ? diffTopology(baseline.value, current.value) : null);
+    const moved = shallowRef(/* @__PURE__ */ new Map());
+    watch(() => current.value.nodes, () => moved.value = /* @__PURE__ */ new Map());
+    const placed = computed(
+      () => moved.value.size ? current.value.nodes.map((n) => moved.value.has(n.id) ? { ...n, position: moved.value.get(n.id) } : n) : current.value.nodes
+    );
+    function groupOf(node) {
+      const by = props.groupBy;
+      if (typeof by === "function") return by(node);
+      if (!by) return void 0;
+      const value = node.meta?.[by] ?? node.data[by];
+      return typeof value === "string" && value ? value : void 0;
+    }
+    const versioned = computed(() => {
+      const edges = props.edgeFilter ? current.value.edges.filter(props.edgeFilter) : current.value.edges;
+      const was = baseline.value;
+      if (!diff.value || !was) return { nodes: placed.value, edges };
+      const goneNodes = new Set(diff.value.removedNodes);
+      const goneEdges = new Set(diff.value.removedEdges);
+      return {
+        nodes: [...placed.value, ...was.nodes.filter((n) => goneNodes.has(n.id))],
+        edges: [...edges, ...was.edges.filter((e) => goneEdges.has(e.id) && (props.edgeFilter?.(e) ?? true))]
+      };
+    });
+    const detailLevel = computed(() => {
+      if (props.detail === "auto") return detailAtZoom(viewport.value.zoom, !!props.groupBy);
+      return props.detail === "overview" && !props.groupBy ? "simple" : props.detail;
+    });
+    function foldedEdges(merged, all) {
+      const byId = new Map(all.map((e) => [e.id, e]));
+      return merged.map((m) => {
+        const first = byId.get(m.members[0]);
+        const kind = m.members.length > 1 ? `${first.kind ?? ""} ×${m.members.length}`.trim() : first.kind;
+        return { ...first, id: m.id, source: m.source, target: m.target, kind, waypoints: void 0 };
+      });
+    }
+    const shown = computed(() => {
+      const { nodes, edges } = versioned.value;
+      if (detailLevel.value === "full") return { nodes, edges };
+      if (detailLevel.value === "simple") {
+        const folded = collapseChildren(nodes, edges);
+        return { nodes: folded.nodes, edges: foldedEdges(folded.edges, edges) };
+      }
+      const graph = clusterGraph(nodes, edges, groupOf);
+      const clusters = graph.clusters.map((c) => ({
+        id: c.id,
+        position: c.position,
+        data: { name: `${c.key} (${c.members.length})`, role: "cluster" }
+      }));
+      return { nodes: [...graph.nodes, ...clusters], edges: foldedEdges(graph.edges, edges) };
+    });
+    const query = ref("");
+    const matches = computed(() => findNodes(shown.value.nodes, query.value));
+    const focused = ref(null);
+    const pathFound = computed(() => {
+      if (!props.path) return null;
+      return findPath(shown.value.edges, props.path[0], props.path[1], { directed: props.directedPath });
+    });
+    watch(() => JSON.stringify(pathFound.value), () => emit("path-change", pathFound.value), { immediate: !!props.path });
+    const emphasis = computed(() => {
+      const picked = pathFound.value ?? (matches.value.length ? { nodes: matches.value.map((n) => n.id), edges: [] } : null) ?? (props.highlightNeighbors && focused.value ? neighborhood(shown.value.edges, focused.value) : null);
+      if (!picked) return null;
+      const lit = new Set(picked.nodes);
+      for (const n of shown.value.nodes) if (n.parent && lit.has(n.id)) lit.add(n.parent);
+      return { nodes: lit, edges: new Set(picked.edges), path: !!pathFound.value };
+    });
+    function diffState(id, added, changed, removed) {
+      if (added?.includes(id)) return "added";
+      if (removed?.includes(id)) return "removed";
+      return changed?.includes(id) ? "changed" : null;
+    }
+    const DIFF_COLOR = {
+      added: "var(--color-action)",
+      changed: "var(--color-accent)",
+      removed: "var(--color-danger)"
+    };
+    function sized(node) {
+      const measured = findNode(node.id)?.dimensions;
+      return { ...node, width: node.width ?? (measured?.width || void 0), height: node.height ?? (measured?.height || void 0) };
+    }
+    const allLanes = computed(() => {
+      if (!props.groupBy || detailLevel.value === "overview") return props.lanes;
+      const groups = groupBoxes(shown.value.nodes.map(sized), (n) => groupOf(n));
+      return [...props.lanes, ...groups.map(({ key, box }) => ({ id: `group-${key}`, label: key, ...box }))];
+    });
+    const laneNodes = computed(
+      () => allLanes.value.map(
+        (l) => ({
+          id: `lane-${l.id}`,
+          type: "lane",
+          position: { x: l.x, y: l.y },
+          data: { label: l.label, accent: l.accent, width: l.width, height: l.height },
+          selectable: false,
+          draggable: false,
+          connectable: false,
+          focusable: false,
+          zIndex: 0
+        })
+      )
+    );
+    const graphNodes = computed(
+      () => shown.value.nodes.map((n) => {
+        const type = n.type ?? "infra";
+        const faded = !!emphasis.value && !emphasis.value.nodes.has(n.id);
+        const state = diffState(n.id, diff.value?.addedNodes, diff.value?.changedNodes, diff.value?.removedNodes);
+        const node = {
+          id: n.id,
+          type,
+          position: n.position,
+          data: faded ? { ...n.data, dimmed: true } : n.data,
+          zIndex: 1,
+          ariaLabel: props.keyboardNav ? nodeName(n) : void 0,
+          ...n.parent ? { parentNode: n.parent } : {},
+          ...n.parent && props.autoSizeGroups ? { expandParent: true } : {}
+        };
+        if (state) {
+          node.style = { outline: `2px solid ${DIFF_COLOR[state]}`, outlineOffset: "2px", borderRadius: "var(--radius-card)" };
+        }
+        if (type === "group") {
+          const given = { width: n.width ?? GROUP_WIDTH, height: n.height ?? GROUP_HEIGHT };
+          const frame = props.autoSizeGroups ? frameSize(shown.value.nodes.filter((child) => child.parent === n.id).map(sized), { minWidth: given.width, minHeight: given.height }) : given;
+          node.style = {
+            ...node.style,
+            width: `${frame.width}px`,
+            height: `${frame.height}px`,
+            background: "color-mix(in srgb, var(--color-surface-soft) 60%, transparent)",
+            border: "1px solid var(--color-line)",
+            borderRadius: "var(--radius-card)",
+            opacity: faded || n.data.dimmed ? "0.35" : "1",
+            transition: "opacity var(--duration-fast)"
+          };
+          node.label = n.label ?? n.data.name;
+        }
+        return node;
+      })
+    );
+    const flowNodes = computed(() => [
+      ...laneNodes.value,
+      ...graphNodes.value
+    ]);
+    function edgeCategory(e) {
+      return e.category ?? (e.kind === "depends_on" ? "structural" : "network");
+    }
+    const CATEGORY_COLOR = {
+      network: "var(--color-brand)",
+      structural: "var(--color-accent)"
+    };
+    function edgeColor(cat, o) {
+      return o === "drift" ? "var(--color-danger)" : CATEGORY_COLOR[cat];
+    }
+    function edgeDash(cat, o) {
+      if (o !== "applied") return "6 5";
+      return cat === "structural" ? "1 6" : "0";
+    }
+    const flowEdges = computed(
+      () => shown.value.edges.map((e) => {
+        const obs = e.observed ?? "applied";
+        const cat = edgeCategory(e);
+        const state = diffState(e.id, diff.value?.addedEdges, diff.value?.changedEdges, diff.value?.removedEdges);
+        const color = state ? DIFF_COLOR[state] : edgeColor(cat, obs);
+        const lit = emphasis.value?.edges.has(e.id) ?? false;
+        const faded = e.dimmed || !!emphasis.value && !lit;
+        return {
+          id: e.id,
+          source: e.source,
+          target: e.target,
+          type: props.edgeType ?? "default",
+          data: { waypoints: e.waypoints },
+          animated: obs !== "applied" && !faded,
+          label: edgeLabelText(e),
+          labelBgStyle: { fill: "var(--color-surface)" },
+          labelStyle: { fill: "var(--color-muted-strong)", fontSize: "10px" },
+          style: {
+            stroke: color,
+            strokeWidth: (cat === "structural" ? 1.5 : 2) + (lit && emphasis.value?.path ? PATH_EXTRA_WIDTH : 0),
+            strokeDasharray: state === "removed" ? REMOVED_DASH : edgeDash(cat, obs),
+            strokeLinecap: "round",
+            opacity: faded ? 0.12 : 1
+          },
+          markerEnd: { type: MarkerType.ArrowClosed, color }
+        };
+      })
+    );
+    onNodeClick(({ node }) => {
+      focused.value = node.id;
+      emit("node-select", node.id);
+    });
+    onNodeDoubleClick(({ node }) => emit("node-activate", node.id));
+    onNodeDragStop(({ node, nodes }) => {
+      const next = new Map(moved.value);
+      for (const dragged of nodes.length ? nodes : [node]) next.set(dragged.id, { ...dragged.position });
+      moved.value = next;
+      emit("node-drag-stop", { id: node.id, position: { ...node.position } });
+    });
+    onMoveEnd(({ flowTransform }) => {
+      if (flowTransform)
+        emit("viewport-change", {
+          zoom: flowTransform.zoom,
+          x: flowTransform.x,
+          y: flowTransform.y
+        });
+    });
+    watch(
+      () => getSelectedNodes.value.map((n) => n.id),
+      (ids) => emit("selection-change", ids)
+    );
+    onNodeContextMenu(({ node, event }) => {
+      const e = event;
+      e.preventDefault?.();
+      emit("node-contextmenu", { id: node.id, x: e.clientX, y: e.clientY });
+    });
+    const legendOffset = computed(() => {
+      if (props.legendPosition === "bottom-left") return "!left-12";
+      if (props.legendPosition === "bottom-right") return "!bottom-40";
+      return "";
+    });
+    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?.();
+      emit("edge-contextmenu", { id: edge.id, x: e.clientX, y: e.clientY });
+    });
+    onPaneClick(() => {
+      focused.value = null;
+      emit("pane-click");
+    });
+    onConnect((conn) => emit("connect", conn));
+    const legendBox = ref(null);
+    function framePadding() {
+      const legendShown = legendBox.value?.offsetHeight ?? 0;
+      const legendHeight = legendShown ? legendShown + 15 : 0;
+      const minimap = vueFlowRef.value?.querySelector(".vue-flow__minimap");
+      const legendTop = props.legendPosition.startsWith("top");
+      const bottom = Math.max(legendTop ? 0 : legendHeight, minimap?.offsetHeight ? MINIMAP_HEIGHT : 0);
+      return {
+        top: `${FRAME + (legendTop ? legendHeight : 0)}px`,
+        bottom: `${FRAME + bottom}px`,
+        left: `${FRAME}px`,
+        right: `${FRAME}px`
+      };
+    }
+    function fitFramed(params = {}) {
+      return fitView({ padding: framePadding(), ...params });
+    }
+    const controlsFit = {
+      get padding() {
+        return framePadding();
+      }
+    };
+    let fitted = false;
+    onNodesInitialized(() => {
+      if (fitted) return;
+      fitted = true;
+      void fitFramed();
+    });
+    async function applyViewport(v) {
+      await setViewport({ x: v.x, y: v.y, zoom: v.zoom });
+    }
+    function refit() {
+      void nextTick(() => {
+        const root = vueFlowRef.value;
+        if (root) nodeWindow(root).requestAnimationFrame(() => void fitFramed());
+      });
+    }
+    watch(() => props.dataRevision, () => {
+      fitted = false;
+      refit();
+    });
+    let resizeFrame = 0;
+    useResizeObserver(vueFlowRef, (_, el) => {
+      if (props.fitOnResize !== "always" || !fitted || resizeFrame) return;
+      resizeFrame = nodeWindow(el).requestAnimationFrame(() => {
+        resizeFrame = 0;
+        void fitFramed();
+      });
+    });
+    function nodeElement(id) {
+      const root = vueFlowRef.value;
+      if (!root) return null;
+      return root.querySelector(`.vue-flow__node[data-id="${nodeWindow(root).CSS.escape(id)}"]`);
+    }
+    async function focusNode(id, options = {}) {
+      if (!findNode(id)) return false;
+      focused.value = id;
+      emit("node-select", id);
+      await fitView({
+        nodes: [id],
+        maxZoom: FOCUS_MAX_ZOOM,
+        padding: framePadding(),
+        duration: prefersReducedMotion() ? 0 : FOCUS_DURATION_MS
+      });
+      if (!options.keepFocus) nodeElement(id)?.focus();
+      return true;
+    }
+    let matchCursor = 0;
+    watch(query, () => matchCursor = 0);
+    function nextMatch() {
+      const hits = matches.value;
+      if (!hits.length) return;
+      void focusNode(hits[matchCursor++ % hits.length].id, { keepFocus: true });
+    }
+    const selectedIds = computed(() => getSelectedNodes.value.map((n) => n.id));
+    const ARROWS = {
+      ArrowUp: "up",
+      ArrowDown: "down",
+      ArrowLeft: "left",
+      ArrowRight: "right"
+    };
+    function onKeydown(event) {
+      if (!props.keyboardNav || !isHTMLElement(event.target)) return;
+      const id = event.target.closest(".vue-flow__node")?.getAttribute("data-id");
+      if (!id) return;
+      const direction = ARROWS[event.key];
+      if (direction) {
+        const next = nearestInDirection(absolutePositions(shown.value.nodes), id, direction);
+        if (next) void focusNode(next);
+      } else if (event.key === "Enter") emit("node-activate", id);
+      else if (event.key === " ") {
+        focused.value = id;
+        emit("node-select", id);
+      } else return;
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    function autoLayout(options = {}) {
+      const positions = layeredLayout(placed.value.map(sized), current.value.edges, {
+        groupGap: LANE_BAND_GAP,
+        ...options,
+        groupOf: props.groupBy ? (n) => groupOf(n) : void 0
+      });
+      moved.value = new Map([...moved.value, ...positions]);
+      emit("update:nodes", current.value.nodes.map((n) => {
+        const position = positions.get(n.id);
+        return position ? { ...n, position } : n;
+      }));
+      refit();
+    }
+    function exportSvg() {
+      const root = vueFlowRef.value;
+      if (!root) return null;
+      const places = absolutePositions(shown.value.nodes);
+      const color = (token) => resolveCssColor(`var(${token})`, root);
+      return topologyToSvg(
+        shown.value.nodes.map((n) => {
+          const size = sized(n);
+          return {
+            ...places.get(n.id),
+            id: n.id,
+            label: nodeName(n),
+            frame: n.type === "group",
+            width: size.width ?? EXPORT_NODE_WIDTH,
+            height: size.height ?? EXPORT_NODE_HEIGHT
+          };
+        }),
+        shown.value.edges.map((e) => {
+          const obs = e.observed ?? "applied";
+          const cat = edgeCategory(e);
+          return { ...e, label: edgeLabelText(e), dash: edgeDash(cat, obs), color: resolveCssColor(edgeColor(cat, obs), root) };
+        }),
+        {
+          background: backgroundOf(root) ?? color("--color-surface"),
+          surface: color("--color-surface-raised"),
+          line: color("--color-line-strong"),
+          text: color("--color-ink"),
+          edge: color("--color-brand")
+        }
+      );
+    }
+    async function exportPng() {
+      const svg = exportSvg();
+      const root = vueFlowRef.value;
+      if (!svg || !root) return null;
+      const parsed = new (nodeWindow(root)).DOMParser().parseFromString(svg, "image/svg+xml");
+      const drawing = root.ownerDocument.importNode(parsed.documentElement, true);
+      drawing.style.cssText = OFFSCREEN;
+      root.append(drawing);
+      try {
+        return await svgToPng(drawing);
+      } finally {
+        drawing.remove();
+      }
+    }
+    function selectNodes(ids) {
+      removeSelectedNodes(getSelectedNodes.value);
+      addSelectedNodes(getNodes.value.filter((n) => ids.includes(n.id)));
+    }
+    __expose({
+      fitView: fitFramed,
+      setViewport: applyViewport,
+      focusNode,
+      searchNodes: (query2) => findNodes(shown.value.nodes, query2).map((n) => n.id),
+      autoLayout,
+      exportSvg,
+      exportPng,
+      selectNodes
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(VueFlow), {
+        nodes: flowNodes.value,
+        edges: flowEdges.value,
+        "node-types": nodeTypes,
+        "edge-types": edgeTypes,
+        "nodes-connectable": __props.connectable,
+        "selection-on-drag": __props.selectable,
+        "pan-on-drag": __props.selectable ? [1, 2] : true,
+        "selection-key-code": __props.selectable ? true : null,
+        "multi-selection-key-code": "Shift",
+        "selection-mode": unref(SelectionMode).Partial,
+        onKeydownCapture: onKeydown,
+        "default-viewport": { zoom: 0.9 },
+        "min-zoom": 0.3,
+        "max-zoom": 2,
+        class: "lp-topology @container"
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(Background), {
+            gap: 22,
+            size: 1.4,
+            "pattern-color": "var(--color-line-strong)"
+          }),
+          __props.minimap ? (openBlock(), createBlock(unref(MiniMap), {
+            key: 0,
+            class: "@max-[40rem]:!hidden",
+            pannable: "",
+            zoomable: "",
+            "node-color": "var(--color-surface-soft)",
+            "mask-color": "rgba(0,0,0,0.55)"
+          })) : createCommentVNode("", true),
+          __props.controls ? (openBlock(), createBlock(unref(Controls), {
+            key: 1,
+            "fit-view-params": controlsFit
+          })) : createCommentVNode("", true),
+          __props.search ? (openBlock(), createBlock(unref(Panel), {
+            key: 2,
+            position: "top-left",
+            class: "nodrag nopan w-56"
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$5, {
+                modelValue: query.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
+                type: "search",
+                "aria-label": unref(text).search,
+                placeholder: unref(text).search,
+                onKeydown: withKeys(withModifiers(nextMatch, ["prevent"]), ["enter"])
+              }, null, 8, ["modelValue", "aria-label", "placeholder", "onKeydown"]),
+              query.value.trim() ? (openBlock(), createElementBlock("p", _hoisted_1, toDisplayString(unref(text).searchResults.replace("{n}", String(matches.value.length))), 1)) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          __props.selectionActions?.length && selectedIds.value.length > 1 ? (openBlock(), createBlock(unref(Panel), {
+            key: 3,
+            position: "top-right",
+            class: "nodrag nopan flex items-center gap-2 rounded-card border border-line bg-surface-overlay/90 px-3 py-2 text-xs text-muted backdrop-blur"
+          }, {
+            default: withCtx(() => [
+              createElementVNode("span", null, toDisplayString(unref(text).selected.replace("{n}", String(selectedIds.value.length))), 1),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.selectionActions, (action) => {
+                return openBlock(), createBlock(_sfc_main$6, {
+                  key: action.id,
+                  size: "sm",
+                  variant: "outline",
+                  onClick: ($event) => emit("selection-action", { action: action.id, ids: selectedIds.value })
+                }, {
+                  default: withCtx(() => [
+                    action.icon ? (openBlock(), createBlock(_sfc_main$7, {
+                      key: 0,
+                      name: action.icon,
+                      size: 14
+                    }, null, 8, ["name"])) : createCommentVNode("", true),
+                    createTextVNode(" " + toDisplayString(action.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"]);
+              }), 128))
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          (__props.timeline?.length ?? 0) > 1 ? (openBlock(), createBlock(unref(Panel), {
+            key: 4,
+            position: "bottom-center",
+            class: "nodrag nopan flex w-72 max-w-[60%] flex-col gap-1 rounded-card border border-line bg-surface-overlay/90 px-3 py-2 text-xs text-muted backdrop-blur"
+          }, {
+            default: withCtx(() => [
+              createElementVNode("span", null, toDisplayString(__props.timeline?.[versionIndex.value]?.label ?? `${unref(text).timeline} ${versionIndex.value + 1}`), 1),
+              createVNode(_sfc_main$8, {
+                "model-value": versionIndex.value,
+                min: 0,
+                max: (__props.timeline?.length ?? 1) - 1,
+                step: 1,
+                "aria-label": unref(text).timeline,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => timelineIndex.value = $event)
+              }, null, 8, ["model-value", "max", "aria-label"])
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          __props.legend ? (openBlock(), createBlock(unref(Panel), {
+            key: 5,
+            position: __props.legendPosition,
+            class: normalizeClass([legendOffset.value, "@max-[40rem]:hidden"])
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", {
+                ref_key: "legendBox",
+                ref: legendBox,
+                class: "flex flex-col gap-1.5 rounded-card border border-line bg-surface-overlay/90 px-3 py-2 text-[11px] backdrop-blur"
+              }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(legendItems.value, (l) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: l.label,
+                    class: "flex items-center gap-2 text-muted"
+                  }, [
+                    (openBlock(), createElementBlock("svg", _hoisted_2, [
+                      createElementVNode("line", {
+                        x1: "0",
+                        y1: "3",
+                        x2: "22",
+                        y2: "3",
+                        stroke: l.color,
+                        "stroke-width": l.width,
+                        "stroke-dasharray": l.dash,
+                        "stroke-linecap": "round"
+                      }, null, 8, _hoisted_3)
+                    ])),
+                    createTextVNode(" " + toDisplayString(l.label), 1)
+                  ]);
+                }), 128)),
+                renderSlot(_ctx.$slots, "legend-extra")
+              ], 512)
+            ]),
+            _: 3
+          }, 8, ["position", "class"])) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["nodes", "edges", "nodes-connectable", "selection-on-drag", "pan-on-drag", "selection-key-code", "selection-mode"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};