@leavepulse/ui 0.77.3 → 0.78.0

package/dist/chunks/LpTopologyCanvas-B1gIbS0n.js

@@ -1,298 +0,0 @@
-import { defineComponent, h, markRaw, computed, watch, ref, openBlock, createBlock, unref, withCtx, createVNode, createCommentVNode, normalizeClass, createElementVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, renderSlot } from "vue";
-import { Background } from "@vue-flow/background";
-import { Controls } from "@vue-flow/controls";
-import { MarkerType, useVueFlow, VueFlow, SelectionMode, Panel } from "@vue-flow/core";
-import { MiniMap } from "@vue-flow/minimap";
-import { _ as _sfc_main$3 } from "./LpInfraNode-46XOCkfq.js";
-import { _ as _sfc_main$1 } from "./LpLaneNode-HtnQf2FF.js";
-import { _ as _sfc_main$2 } from "./LpServiceNode-D8uJ8sGk.js";
-import { _ as _sfc_main$4 } from "./LpWaypointEdge-D8yHlQiw.js";
-const _hoisted_1 = {
-  width: "22",
-  height: "6",
-  class: "shrink-0",
-  "aria-hidden": "true"
-};
-const _hoisted_2 = ["stroke", "stroke-width", "stroke-dasharray"];
-const MINIMAP_HEIGHT = 165;
-const FRAME = 24;
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "LpTopologyCanvas",
-  props: {
-    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 }
-  },
-  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;
-    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 laneNodes = computed(
-      () => props.lanes.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(
-      () => props.nodes.map((n) => {
-        const type = n.type ?? "infra";
-        const node = {
-          id: n.id,
-          type,
-          position: n.position,
-          data: n.data,
-          zIndex: 1,
-          ...n.parent ? { parentNode: n.parent } : {}
-        };
-        if (type === "group") {
-          node.style = {
-            width: `${n.width ?? 260}px`,
-            height: `${n.height ?? 160}px`,
-            background: "color-mix(in srgb, var(--color-surface-soft) 60%, transparent)",
-            border: "1px solid var(--color-line)",
-            borderRadius: "var(--radius-card)",
-            opacity: 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(
-      () => props.edges.map((e) => {
-        const obs = e.observed ?? "applied";
-        const cat = edgeCategory(e);
-        const color = edgeColor(cat, obs);
-        return {
-          id: e.id,
-          source: e.source,
-          target: e.target,
-          type: props.edgeType ?? "default",
-          data: { waypoints: e.waypoints },
-          animated: obs !== "applied" && !e.dimmed,
-          label: e.kind,
-          labelBgStyle: { fill: "var(--color-surface)" },
-          labelStyle: { fill: "var(--color-muted-strong)", fontSize: "10px" },
-          style: {
-            stroke: color,
-            strokeWidth: cat === "structural" ? 1.5 : 2,
-            strokeDasharray: edgeDash(cat, obs),
-            strokeLinecap: "round",
-            opacity: e.dimmed ? 0.12 : 1
-          },
-          markerEnd: { type: MarkerType.ArrowClosed, color }
-        };
-      })
-    );
-    const {
-      onNodeClick,
-      onNodeDoubleClick,
-      onNodeContextMenu,
-      onEdgeContextMenu,
-      onPaneClick,
-      onConnect,
-      onNodeDragStop,
-      onMoveEnd,
-      getSelectedNodes,
-      fitView,
-      setViewport,
-      onNodesInitialized
-    } = 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 } })
-    );
-    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(() => emit("pane-click"));
-    onConnect((conn) => emit("connect", conn));
-    const legendBox = ref(null);
-    function framePadding() {
-      const wide = typeof window === "undefined" || window.matchMedia("(min-width: 640px)").matches;
-      const legendHeight = wide && props.legend ? (legendBox.value?.offsetHeight ?? 0) + 15 : 0;
-      const legendTop = props.legendPosition.startsWith("top");
-      const bottom = Math.max(legendTop ? 0 : legendHeight, wide && props.minimap ? 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 });
-    }
-    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 });
-    }
-    __expose({ fitView: fitFramed, setViewport: applyViewport });
-    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,
-        "default-viewport": { zoom: 0.9 },
-        "min-zoom": 0.3,
-        "max-zoom": 2,
-        class: "lp-topology"
-      }, {
-        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-sm:!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": { padding: framePadding() }
-          }, null, 8, ["fit-view-params"])) : createCommentVNode("", true),
-          __props.legend ? (openBlock(), createBlock(unref(Panel), {
-            key: 2,
-            position: __props.legendPosition,
-            class: normalizeClass([legendOffset.value, "max-sm: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_1, [
-                      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_2)
-                    ])),
-                    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 _
-};