@likec4/diagram 1.8.1 → 1.12.0

package/dist/index.mjs

@@ -1,3651 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { useReactFlow, useStoreApi, useNodesData, useStore, applyNodeChanges, applyEdgeChanges, getViewportForBounds, EdgeLabelRenderer, Handle, Position, useOnViewportChange, ReactFlow, useOnSelectionChange, Background, BackgroundVariant, Controls, ReactFlowProvider } from "@xyflow/react";
-import clsx from "clsx";
-import { shallowEqual, deepEqual } from "fast-equals";
-import { m, AnimatePresence, LazyMotion, domAnimation } from "framer-motion";
-import { createContext, useRef, useCallback, useContext, useState, memo, useEffect, useId, useMemo } from "react";
-import { createWithEqualityFn, useStoreWithEqualityFn } from "zustand/traditional";
-import { invariant, hasAtLeast, whereOperatorAsPredicate, extractStep, nonNullable, StepEdgeId, getBBoxCenter, nonexhaustive, isAncestor, defaultTheme, ElementShapes } from "@likec4/core";
-import { useFirstMountState, useCustomCompareEffect, useDebouncedEffect } from "@react-hookz/web";
-import { getNodeDimensions, getBoundsOfRects, boxToRect, getViewportForBounds as getViewportForBounds$1 } from "@xyflow/system";
-import { DEV } from "esm-env";
-import { isArray, hasAtLeast as hasAtLeast$1, isNullish, entries, reduce, map, prop, isTruthy, first, last, clamp, isNumber, isNonNullish, ceil, keys, takeWhile } from "remeda";
-import { subscribeWithSelector, devtools } from "zustand/middleware";
-import { shallow } from "zustand/shallow";
-import { Bezier } from "bezier-js";
-import { MantineContext, Box, ActionIcon as ActionIcon$2, Text as Text$1, HoverCard, HoverCardTarget, UnstyledButton, HoverCardDropdown, Stack, Group, Anchor, CopyButton, Button, Card, CardSection, Spoiler, ButtonGroup, Tooltip as Tooltip$2, ThemeIcon, Paper, Tabs, TabsList, TabsTab, TabsPanel, ScrollAreaAutosize, Badge, rem, Divider, Space, TooltipGroup, Flex, ColorSwatch, CheckIcon, Select, Slider, SegmentedControl, Popover, PopoverTarget, PopoverDropdown, FloatingIndicator, Notification, Code } from "@mantine/core";
-import { useHotkeys, useLocalStorage } from "@mantine/hooks";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { line, curveCatmullRomOpen } from "d3-shape";
-import { Solver, Operator, Expression, Strength, Variable } from "@lume/kiwi";
-import { IconZoomScan, IconLink, IconMenu, IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled, IconAlertTriangle, IconHelpCircle, IconArrowDownRight, IconFileSymlink, IconLayoutDashboard, IconArrowBigDownLines, IconFocusCentered, IconMenu2, IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
-var rootClassName = "likec4-diagram-root";
-const noop = () => {
-}, depsShallowEqual = (d1, d2) => {
-  if (d1 === d2)
-    return !0;
-  if (d1.length !== d2.length)
-    return !1;
-  for (const [i, element] of d1.entries())
-    if (!shallowEqual(element, d2[i]))
-      return !1;
-  return !0;
-};
-function useUpdateEffect(callback, deps, equalityFn, effectHook) {
-  const isFirstMount = useFirstMountState();
-  useCustomCompareEffect(
-    isFirstMount ? noop : callback,
-    deps,
-    equalityFn ?? depsShallowEqual,
-    effectHook
-  );
-}
-const useXYFlow = useReactFlow, useXYNodesData = useNodesData;
-function useXYStore(selector2, equalityFn) {
-  return useStore(
-    // @ts-expect-error - types are not correct
-    selector2,
-    shallowEqual
-  );
-}
-const useXYStoreApi = useStoreApi, ZIndexes = {
-  Compound: 2,
-  Edge: 4,
-  Element: 6
-}, MinZoom = 0.1, MaxZoom = 2;
-function toDomPrecision(v) {
-  return v === null ? 0.01 : Math.round(v * 100) / 100;
-}
-const nodeToRect = (nd) => ({
-  x: nd.internals.positionAbsolute.x,
-  y: nd.internals.positionAbsolute.y,
-  width: nd.width ?? nd.data.element.width,
-  height: nd.height ?? nd.data.element.height
-}), isInside = (test, target) => test.x >= target.x && test.y >= target.y && test.x + test.width <= target.x + target.width && test.y + test.height <= target.y + target.height;
-function bezierControlPoints(diagramEdge) {
-  let [start, ...bezierPoints] = diagramEdge.points;
-  invariant(start, "start should be defined");
-  const handles = [
-    // start
-  ];
-  for (; hasAtLeast(bezierPoints, 3); ) {
-    const [cp1, cp2, end, ...rest] = bezierPoints, bezier = new Bezier(start[0], start[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1]), inflections = bezier.inflections();
-    inflections.length === 0 && inflections.push(0.5), inflections.forEach((t) => {
-      const { x, y } = bezier.get(t);
-      handles.push({
-        x: Math.round(x),
-        y: Math.round(y)
-      });
-    }), bezierPoints = rest, start = end;
-  }
-  return invariant(bezierPoints.length === 0, "all points should be consumed"), handles;
-}
-const isClose = (a, b) => Math.abs(a - b) < 3.1;
-function isSamePoint$1(a, b) {
-  const [ax, ay] = isArray(a) ? a : [a.x, a.y], [bx, by] = isArray(b) ? b : [b.x, b.y];
-  return isClose(ax, bx) && isClose(ay, by);
-}
-function diagramViewToXYFlowData(view, opts) {
-  const isDynamicView = view.__ === "dynamic", xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map(), traverse = view.nodes.reduce(
-    (acc, node) => (nodeLookup.set(node.id, node), node.parent || acc.push({ node, parent: null }), acc),
-    new Array()
-  );
-  let visiblePredicate = (_nodeOrEdge) => !0;
-  if (opts.where)
-    try {
-      visiblePredicate = whereOperatorAsPredicate(opts.where);
-    } catch (e) {
-      console.error("Error in where filter:", e);
-    }
-  const ns = "", nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
-  let next;
-  for (; next = traverse.shift(); ) {
-    const { node, parent } = next, isCompound = hasAtLeast$1(node.children, 1);
-    isCompound && traverse.push(...node.children.map((child) => ({ node: nodeById(child), parent: node })));
-    const position = {
-      x: node.position[0],
-      y: node.position[1]
-    };
-    parent && (position.x -= parent.position[0], position.y -= parent.position[1]);
-    const id = ns + node.id, draggable = opts.draggable && (!parent || parent.children.length > 1);
-    xynodes.push({
-      id,
-      type: isCompound ? "compound" : "element",
-      data: {
-        fqn: node.id,
-        element: node
-      },
-      draggable,
-      selectable: opts.selectable,
-      focusable: opts.selectable && !isCompound,
-      deletable: !1,
-      position,
-      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
-      width: node.width,
-      height: node.height,
-      hidden: !visiblePredicate(node),
-      // parentId: parent ? ns + parent.id : null,
-      ...parent && {
-        parentId: ns + parent.id
-      },
-      ...isCompound && {
-        dragHandle: ".likec4-compound-title"
-      }
-    });
-  }
-  for (const edge of view.edges) {
-    const source = edge.source, target = edge.target, id = ns + edge.id;
-    if (!hasAtLeast$1(edge.points, 2)) {
-      console.error("edge should have at least 2 points", edge);
-      continue;
-    }
-    xyedges.push({
-      id,
-      type: "relationship",
-      source: ns + source,
-      target: ns + target,
-      zIndex: ZIndexes.Edge,
-      selectable: opts.selectable,
-      hidden: !visiblePredicate(edge),
-      deletable: !1,
-      data: {
-        edge,
-        controlPoints: edge.controlPoints || null,
-        stepNum: isDynamicView ? extractStep(edge.id) : null,
-        label: edge.labelBBox ? {
-          bbox: edge.labelBBox,
-          text: edge.label ?? ""
-        } : null
-      },
-      interactionWidth: 20
-    });
-  }
-  return {
-    xynodes,
-    xyedges
-  };
-}
-const StringSet = Set, DEFAULT_PROPS = {
-  xyedges: [],
-  xynodes: [],
-  isDynamicView: !1,
-  viewSyncDebounceTimeout: null,
-  initialized: !1,
-  navigationHistoryIndex: 0,
-  viewportChanged: !1,
-  activeDynamicViewStep: null,
-  focusedNodeId: null,
-  hoveredNodeId: null,
-  hoveredEdgeId: null,
-  lastClickedNodeId: null,
-  lastClickedEdgeId: null,
-  dimmed: new StringSet(),
-  lastOnNavigate: null
-}, noReplace = !1;
-let StoreDevId = 1;
-const EmptyStringSet = new StringSet();
-function createDiagramStore(props) {
-  const storeDevId = "DiagramStore" + String(StoreDevId++).padStart(2, "0"), {
-    xynodes,
-    xyedges
-  } = diagramViewToXYFlowData(props.view, {
-    where: props.whereFilter,
-    draggable: props.nodesDraggable,
-    selectable: props.nodesSelectable
-  });
-  return createWithEqualityFn(
-    subscribeWithSelector(
-      devtools(
-        (set, get) => ({
-          ...DEFAULT_PROPS,
-          ...props,
-          storeDevId,
-          isDynamicView: props.view.__ === "dynamic",
-          xynodes,
-          xyedges,
-          navigationHistory: [{
-            viewId: props.view.id,
-            nodeId: null
-          }],
-          navigationHistoryIndex: 0,
-          onNodesChange: (changes) => {
-            set({
-              xynodes: applyNodeChanges(changes, get().xynodes)
-            });
-          },
-          onEdgesChange: (changes) => {
-            set({
-              xyedges: applyEdgeChanges(changes, get().xyedges)
-            });
-          },
-          updateView: (nextView) => {
-            let {
-              viewSyncDebounceTimeout,
-              xyflow,
-              xystore,
-              dimmed: dimmed2,
-              whereFilter,
-              view: current,
-              lastOnNavigate,
-              navigationHistory,
-              navigationHistoryIndex,
-              focusedNodeId,
-              lastClickedNodeId,
-              lastClickedEdgeId,
-              activeDynamicViewStep,
-              nodesDraggable,
-              nodesSelectable,
-              hoveredEdgeId,
-              hoveredNodeId,
-              xyedges: xyedges2,
-              xynodes: xynodes2
-            } = get();
-            viewSyncDebounceTimeout !== null && (clearTimeout(viewSyncDebounceTimeout), viewSyncDebounceTimeout = null);
-            const isSameView = current.id === nextView.id;
-            if (isSameView) {
-              const nodeIds = new StringSet(nextView.nodes.map((n) => n.id)), edgeIds = new StringSet(nextView.edges.map((e) => e.id));
-              if (lastClickedNodeId && !nodeIds.has(lastClickedNodeId) && (lastClickedNodeId = null), hoveredNodeId && !nodeIds.has(hoveredNodeId) && (hoveredNodeId = null), focusedNodeId && !nodeIds.has(focusedNodeId) && (focusedNodeId = null), lastClickedEdgeId && !edgeIds.has(lastClickedEdgeId) && (lastClickedEdgeId = null), hoveredEdgeId && !edgeIds.has(hoveredEdgeId) && (hoveredEdgeId = null), activeDynamicViewStep && !edgeIds.has(StepEdgeId(activeDynamicViewStep)) && (activeDynamicViewStep = null), dimmed2.size > 0) {
-                let nextDimmed = new StringSet([...dimmed2].filter((id) => nodeIds.has(id) || edgeIds.has(id)));
-                nextDimmed.size !== dimmed2.size && (dimmed2 = nextDimmed);
-              }
-            } else {
-              const stepCurrent = nonNullable(navigationHistory[navigationHistoryIndex]);
-              stepCurrent.viewId !== nextView.id ? (navigationHistory = [
-                ...navigationHistory.slice(0, navigationHistoryIndex + 1),
-                {
-                  viewId: nextView.id,
-                  nodeId: (lastOnNavigate == null ? void 0 : lastOnNavigate.fromNode) || null
-                }
-              ], navigationHistoryIndex = navigationHistory.length - 1) : stepCurrent.nodeId && (lastOnNavigate ?? (lastOnNavigate = {
-                fromView: current.id,
-                toView: nextView.id,
-                fromNode: stepCurrent.nodeId
-              })), lastOnNavigate && lastOnNavigate.toView !== nextView.id && (lastOnNavigate = null);
-              const elTo = lastOnNavigate && nextView.nodes.find((n) => n.id === (lastOnNavigate == null ? void 0 : lastOnNavigate.fromNode)), xynodeFrom = elTo && xyflow.getInternalNode(elTo.id);
-              if (!lastOnNavigate || isNullish(elTo) || isNullish(xynodeFrom)) {
-                const zoom = xyflow.getZoom(), { x, y } = getBBoxCenter(nextView.bounds);
-                xyflow.setCenter(x, y, { zoom }), lastOnNavigate = null;
-              }
-              if (lastOnNavigate && elTo && xynodeFrom) {
-                const fromPos = xyflow.flowToScreenPosition({
-                  x: xynodeFrom.internals.positionAbsolute.x,
-                  // + dimensions.width / 2,
-                  y: xynodeFrom.internals.positionAbsolute.y
-                  // + dimensions.height / 2
-                }), toPos = xyflow.flowToScreenPosition({
-                  x: elTo.position[0],
-                  // + elFrom.width / 2,
-                  y: elTo.position[1]
-                  // + elFrom.height / 2
-                }), diff = {
-                  x: toDomPrecision(fromPos.x - toPos.x),
-                  y: toDomPrecision(fromPos.y - toPos.y)
-                };
-                xystore.getState().panBy(diff), lastOnNavigate = null;
-              }
-              lastClickedEdgeId = null, lastClickedNodeId = null, hoveredEdgeId = null, hoveredNodeId = null, focusedNodeId = null, activeDynamicViewStep = null, dimmed2 = EmptyStringSet;
-            }
-            const update = diagramViewToXYFlowData(nextView, {
-              where: whereFilter,
-              draggable: nodesDraggable,
-              selectable: nodesSelectable
-            });
-            update.xynodes = update.xynodes.map((update2) => {
-              const existing = xynodes2.find((n) => n.id === update2.id);
-              return existing && existing.type === update2.type && deepEqual(existing.parentId ?? null, update2.parentId ?? null) ? existing.hidden === update2.hidden && existing.width === update2.width && existing.height === update2.height && deepEqual(existing.position, update2.position) && deepEqual(existing.data.element, update2.data.element) ? existing : {
-                ...existing,
-                ...update2
-              } : update2;
-            }), isSameView && !nextView.hasLayoutDrift && (update.xyedges = update.xyedges.map((update2) => {
-              const existing = xyedges2.find((n) => n.id === update2.id);
-              return existing ? existing.hidden === update2.hidden && deepEqual(existing.data.label, update2.data.label) && deepEqual(existing.data.controlPoints, update2.data.controlPoints) && deepEqual(existing.data.edge, update2.data.edge) ? existing : {
-                ...existing,
-                ...update2,
-                data: {
-                  ...existing.data,
-                  ...update2.data
-                }
-              } : update2;
-            })), set(
-              {
-                isDynamicView: nextView.__ === "dynamic",
-                viewSyncDebounceTimeout,
-                view: nextView,
-                activeDynamicViewStep,
-                lastOnNavigate,
-                lastClickedNodeId,
-                lastClickedEdgeId,
-                focusedNodeId,
-                hoveredEdgeId,
-                hoveredNodeId,
-                navigationHistory,
-                navigationHistoryIndex,
-                dimmed: dimmed2,
-                xynodes: !isSameView || !shallowEqual(update.xynodes, xynodes2) ? update.xynodes : xynodes2,
-                xyedges: !isSameView || !shallowEqual(update.xyedges, xyedges2) ? update.xyedges : xyedges2
-              },
-              noReplace,
-              isSameView ? "update-view [same]" : "update-view [another]"
-            );
-          },
-          focusOnNode: (nodeId) => {
-            const { focusedNodeId, view, enableFocusMode } = get();
-            if (invariant(enableFocusMode, "focus mode is not enabled"), nodeId !== focusedNodeId) {
-              const notDimmed = new StringSet([nodeId]), dimmed2 = new StringSet();
-              for (const edge of view.edges)
-                edge.source === nodeId || edge.target === nodeId ? (notDimmed.add(edge.source), notDimmed.add(edge.target)) : dimmed2.add(edge.id);
-              for (const node of view.nodes)
-                notDimmed.has(node.id) || dimmed2.add(node.id);
-              set(
-                {
-                  activeDynamicViewStep: null,
-                  focusedNodeId: nodeId,
-                  dimmed: dimmed2
-                },
-                noReplace,
-                `focus on node: ${nodeId}`
-              );
-            }
-          },
-          setHoveredNode: (nodeId) => {
-            nodeId !== get().hoveredNodeId && set({ hoveredNodeId: nodeId });
-          },
-          setHoveredEdge: (edgeId) => {
-            edgeId !== get().hoveredEdgeId && set({ hoveredEdgeId: edgeId });
-          },
-          setLastClickedNode: (nodeId) => {
-            nodeId !== get().lastClickedNodeId && set({ lastClickedNodeId: nodeId });
-          },
-          setLastClickedEdge: (edgeId) => {
-            edgeId !== get().lastClickedEdgeId && set({ lastClickedEdgeId: edgeId });
-          },
-          resetLastClicked: () => {
-            let {
-              activeDynamicViewStep,
-              focusedNodeId,
-              lastClickedNodeId,
-              lastClickedEdgeId
-            } = get();
-            (activeDynamicViewStep || focusedNodeId || lastClickedNodeId || lastClickedEdgeId) && set(
-              {
-                activeDynamicViewStep: null,
-                focusedNodeId: null,
-                lastClickedNodeId: null,
-                lastClickedEdgeId: null,
-                dimmed: EmptyStringSet
-              },
-              noReplace,
-              "resetLastClicked"
-            );
-          },
-          getElement: (fqn) => {
-            const { view } = get();
-            return view.nodes.find(({ id }) => id === fqn) ?? null;
-          },
-          triggerChangeElementStyle: (change) => {
-            DEV && console.debug("triggerChangeElementStyle", change);
-            const { view, updateView, onChange } = get();
-            let hasChanges = !1;
-            const nodes = view.nodes.map((origin) => {
-              var _a, _b;
-              if (!change.targets.includes(origin.id))
-                return origin;
-              let element = origin;
-              for (const [key, value] of entries(change.style))
-                switch (key) {
-                  case "shape":
-                    value !== element.shape && (element = {
-                      ...element,
-                      shape: value
-                    });
-                    break;
-                  case "color":
-                    value !== element.color && (element = {
-                      ...element,
-                      color: value
-                    });
-                    break;
-                  case "opacity":
-                    value !== ((_a = element.style) == null ? void 0 : _a.opacity) && (element = {
-                      ...element,
-                      style: {
-                        ...element.style,
-                        opacity: value
-                      }
-                    });
-                    break;
-                  case "border":
-                    value !== ((_b = element.style) == null ? void 0 : _b.border) && (element = {
-                      ...element,
-                      style: {
-                        ...element.style,
-                        border: value
-                      }
-                    });
-                    break;
-                  default:
-                    nonexhaustive(key);
-                }
-              return element !== origin ? (hasChanges = !0, element) : origin;
-            });
-            hasChanges && updateView({
-              ...view,
-              nodes
-            }), onChange == null || onChange({ change });
-          },
-          cancelSaveManualLayout: () => {
-            let { viewSyncDebounceTimeout } = get();
-            return viewSyncDebounceTimeout !== null ? (clearTimeout(viewSyncDebounceTimeout), set({ viewSyncDebounceTimeout: null }), !0) : !1;
-          },
-          triggerSaveManualLayout: () => {
-            const { xyflow, view, onChange, xystore, viewSyncDebounceTimeout } = get();
-            viewSyncDebounceTimeout !== null && (clearTimeout(viewSyncDebounceTimeout), set({ viewSyncDebounceTimeout: null }));
-            const { nodeLookup } = xystore.getState(), movedNodes = new StringSet();
-            let bounds = {
-              x: 0,
-              y: 0,
-              width: 1,
-              height: 1
-            };
-            const nodes = reduce([...nodeLookup.values()], (acc, node) => {
-              const dimensions = getNodeDimensions(node);
-              isSamePoint$1(node.internals.positionAbsolute, node.data.element.position) || movedNodes.add(node.id);
-              const rect = acc[node.data.fqn] = {
-                isCompound: node.data.element.children.length > 0,
-                x: Math.floor(node.internals.positionAbsolute.x),
-                y: Math.floor(node.internals.positionAbsolute.y),
-                width: Math.ceil(dimensions.width),
-                height: Math.ceil(dimensions.height)
-              };
-              return bounds = getBoundsOfRects(bounds, rect), acc;
-            }, {}), edges = reduce(xyflow.getEdges(), (acc, { source, target, data }) => {
-              var _a, _b;
-              let controlPoints = data.controlPoints;
-              const sourceOrTargetMoved = movedNodes.has(source) || movedNodes.has(target);
-              if ((!controlPoints || controlPoints.length === 0) && sourceOrTargetMoved && (controlPoints = bezierControlPoints(data.edge)), data.edge.points.length === 0 && (!controlPoints || controlPoints.length === 0))
-                return acc;
-              const _updated = acc[data.edge.id] = {
-                points: data.edge.points
-              };
-              (_a = data.label) != null && _a.bbox && (_updated.labelBBox = (_b = data.label) == null ? void 0 : _b.bbox), data.edge.labelBBox && (_updated.labelBBox ?? (_updated.labelBBox = data.edge.labelBBox)), controlPoints && hasAtLeast$1(controlPoints, 1) && (_updated.controlPoints = controlPoints), !sourceOrTargetMoved && data.edge.dotpos && (_updated.dotpos = data.edge.dotpos);
-              const allX = [
-                ...data.edge.points.map((p) => p[0]),
-                ...(controlPoints ?? []).map((p) => p.x),
-                ..._updated.labelBBox ? [_updated.labelBBox.x, _updated.labelBBox.x + _updated.labelBBox.width] : []
-              ], allY = [
-                ...data.edge.points.map((p) => p[1]),
-                ...(controlPoints ?? []).map((p) => p.y),
-                ..._updated.labelBBox ? [_updated.labelBBox.y, _updated.labelBBox.y + _updated.labelBBox.height] : []
-              ], rect = boxToRect({
-                x: Math.floor(Math.min(...allX)),
-                y: Math.floor(Math.min(...allY)),
-                x2: Math.ceil(Math.max(...allX)),
-                y2: Math.ceil(Math.max(...allY))
-              });
-              return bounds = getBoundsOfRects(bounds, rect), acc;
-            }, {}), change = {
-              op: "save-manual-layout",
-              layout: {
-                hash: view.hash,
-                autoLayout: view.autoLayout,
-                nodes,
-                edges,
-                ...bounds
-              }
-            };
-            DEV && console.debug("triggerSaveManualLayout", change), isInside(bounds, view.bounds) || set(
-              {
-                view: {
-                  ...view,
-                  bounds
-                }
-              },
-              noReplace,
-              "update view bounds"
-            ), onChange == null || onChange({ change });
-          },
-          scheduleSaveManualLayout: () => {
-            let { viewSyncDebounceTimeout } = get();
-            viewSyncDebounceTimeout && clearTimeout(viewSyncDebounceTimeout), set(
-              {
-                viewSyncDebounceTimeout: setTimeout(() => {
-                  get().triggerSaveManualLayout();
-                }, 1e3)
-                // explicit typecast to number to suppress TS error in astro build
-              },
-              noReplace,
-              "debounce sync state"
-            );
-          },
-          triggerOnNavigateTo: (xynodeId, event) => {
-            const { view, xynodes: xynodes2, onNavigateTo, cancelSaveManualLayout } = get();
-            if (!onNavigateTo)
-              return;
-            const xynode = xynodes2.find(({ id }) => id === xynodeId);
-            invariant(xynode, `xynode not found: ${xynodeId}`);
-            const element = view.nodes.find(({ id }) => id === xynodeId);
-            invariant(element == null ? void 0 : element.navigateTo, `node is not navigable: ${xynodeId}`), cancelSaveManualLayout(), set(
-              {
-                lastClickedNodeId: xynodeId,
-                lastOnNavigate: {
-                  fromView: view.id,
-                  toView: element.navigateTo,
-                  fromNode: element.id
-                }
-              },
-              noReplace,
-              "triggerOnNavigateTo"
-            ), onNavigateTo(
-              element.navigateTo,
-              event,
-              element,
-              xynode
-            );
-          },
-          goBack: () => {
-            const { navigationHistory, navigationHistoryIndex, onNavigateTo } = get(), { viewId, nodeId } = nonNullable(navigationHistory[navigationHistoryIndex]), stepBack = navigationHistoryIndex > 0 && navigationHistory[navigationHistoryIndex - 1] || null;
-            stepBack && onNavigateTo && (set(
-              {
-                lastClickedEdgeId: null,
-                lastClickedNodeId: null,
-                navigationHistoryIndex: navigationHistoryIndex - 1,
-                lastOnNavigate: nodeId ? {
-                  fromView: viewId,
-                  toView: stepBack.viewId,
-                  fromNode: nodeId
-                } : null
-              },
-              noReplace,
-              "goBack"
-            ), onNavigateTo(stepBack.viewId));
-          },
-          goForward: () => {
-            const { navigationHistory, navigationHistoryIndex, onNavigateTo } = get(), { viewId } = nonNullable(navigationHistory[navigationHistoryIndex]), stepForward = navigationHistoryIndex < navigationHistory.length - 1 ? navigationHistory[navigationHistoryIndex + 1] : null;
-            stepForward && onNavigateTo && (set(
-              {
-                lastClickedEdgeId: null,
-                lastClickedNodeId: null,
-                navigationHistoryIndex: navigationHistoryIndex + 1,
-                lastOnNavigate: stepForward.nodeId ? {
-                  fromView: viewId,
-                  toView: stepForward.viewId,
-                  fromNode: stepForward.nodeId
-                } : null
-              },
-              noReplace,
-              "goForward"
-            ), onNavigateTo(stepForward.viewId));
-          },
-          fitDiagram: (duration = 500) => {
-            const { fitViewPadding, view, focusedNodeId, activeDynamicViewStep, xystore } = get(), { width, height, panZoom, transform } = xystore.getState(), bounds = view.bounds, maxZoom = Math.max(1, transform[2]), viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, fitViewPadding);
-            panZoom == null || panZoom.setViewport(viewport, { duration }), (focusedNodeId ?? activeDynamicViewStep) !== null && set(
-              {
-                activeDynamicViewStep: null,
-                focusedNodeId: null,
-                dimmed: EmptyStringSet
-              },
-              noReplace,
-              "unfocus"
-            );
-          },
-          nextDynamicStep: (increment = 1) => {
-            const { activeDynamicViewStep, activateDynamicStep } = get(), nextStep = (activeDynamicViewStep ?? 0) + increment;
-            nextStep <= 0 || nextStep !== activeDynamicViewStep && activateDynamicStep(nextStep);
-          },
-          activateDynamicStep: (nextStep) => {
-            const { isDynamicView, xyflow, xystore, fitViewPadding } = get();
-            invariant(isDynamicView, "view is not dynamic");
-            const edgeId = StepEdgeId(nextStep), dimmed2 = new StringSet();
-            let edge = null;
-            for (const e of xyflow.getEdges()) {
-              if (e.id === edgeId) {
-                edge = e;
-                continue;
-              }
-              dimmed2.add(e.id);
-            }
-            invariant(!!edge, `edge not found: ${edgeId}`);
-            const selected = [];
-            for (const n of xyflow.getNodes()) {
-              if (n.id === edge.source || n.id === edge.target) {
-                selected.push(n);
-                continue;
-              }
-              dimmed2.add(n.id);
-            }
-            const { fitView, transform } = xystore.getState();
-            fitView({
-              duration: 400,
-              includeHiddenNodes: !0,
-              maxZoom: Math.max(1, transform[2]),
-              minZoom: MinZoom,
-              padding: Math.max(fitViewPadding, 0.2),
-              nodes: selected
-            }), set(
-              {
-                focusedNodeId: null,
-                activeDynamicViewStep: nextStep,
-                dimmed: dimmed2
-              },
-              noReplace,
-              "activateDynamicStep"
-            );
-          },
-          stopDynamicView: () => {
-            get().activeDynamicViewStep !== null && (set(
-              {
-                activeDynamicViewStep: null,
-                focusedNodeId: null,
-                dimmed: EmptyStringSet
-              },
-              noReplace,
-              "stopDynamicView"
-            ), get().fitDiagram());
-          },
-          onInit: (instance) => {
-            const { xyflow, initialized } = get();
-            (!initialized || xyflow !== instance) && set(
-              {
-                xyflow: instance,
-                initialized: !0
-              },
-              noReplace,
-              "onInit"
-            );
-          },
-          highlightByElementNotation: (notation, onlyOfKind) => {
-            const { xynodes: xynodes2, xyedges: xyedges2 } = get(), dimmed2 = new StringSet(map(xyedges2, prop("id")));
-            xynodes2.forEach(({ id, data }) => {
-              const node = data.element;
-              (node.shape !== notation.shape || node.color !== notation.color || !notation.kinds.includes(node.kind) || onlyOfKind && node.kind !== onlyOfKind) && dimmed2.add(id);
-            }), set({ dimmed: dimmed2 }, noReplace, "highlightByElementNotation");
-          }
-        }),
-        {
-          name: `${storeDevId} - ${props.view.id}`,
-          enabled: DEV
-        }
-      )
-    ),
-    shallow
-  );
-}
-const DiagramContext = createContext(null);
-function DiagramContextProvider({
-  children,
-  view,
-  className,
-  keepAspectRatio,
-  whereFilter,
-  ...props
-}) {
-  const containerRef = useRef(null), xystore = useXYStoreApi(), xyflow = useXYFlow(), store = useRef(), getContainer = useCallback(() => containerRef.current, [containerRef]);
-  return store.current || (store.current = createDiagramStore({
-    xystore,
-    xyflow,
-    view,
-    getContainer,
-    whereFilter: structuredClone(whereFilter),
-    ...props
-  })), useUpdateEffect(
-    () => {
-      var _a;
-      return (_a = store.current) == null ? void 0 : _a.setState({ xyflow, xystore, getContainer }, !1, "update xyflow and xystore");
-    },
-    [xyflow, xystore, getContainer]
-  ), useUpdateEffect(
-    () => {
-      var _a;
-      return (_a = store.current) == null ? void 0 : _a.setState(props, !1, "update incoming props");
-    },
-    [props]
-  ), useUpdateEffect(
-    () => {
-      const current = store.current;
-      invariant(current, "DiagramContext.store.current is not defined"), deepEqual(whereFilter, current.getState().whereFilter) || current.setState({ whereFilter: structuredClone(whereFilter) }, !1, "update where filter"), current.getState().updateView(view);
-    },
-    [view, whereFilter],
-    (a, b) => shallowEqual(a[0], b[0]) && deepEqual(a[1], b[1])
-  ), /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: containerRef,
-      className,
-      ...keepAspectRatio && {
-        style: {
-          aspectRatio: `${Math.ceil(view.bounds.width)}/${Math.ceil(view.bounds.height)}`,
-          maxHeight: Math.ceil(view.bounds.height)
-        }
-      },
-      children: /* @__PURE__ */ jsx(DiagramContext.Provider, { value: store.current, children })
-    }
-  );
-}
-function useDiagramState(selector2, equalityFn) {
-  const store = useContext(DiagramContext);
-  if (store === null)
-    throw new Error("useDiagramStore could be used only inside DiagramContext");
-  return useStoreWithEqualityFn(store, selector2, equalityFn ?? shallowEqual);
-}
-function useDiagramStoreApi() {
-  const store = useContext(DiagramContext);
-  if (store === null)
-    throw new Error("useDiagramStoreApi could be used only inside DiagramContext");
-  return store;
-}
-var cssReactFlow = "_2h8g8h0", cssDisablePan = "_2h8g8h1", cssTransparentBg = "_2h8g8h2", cssNoControls = "_2h8g8h3";
-function EnsureMantine({ children }) {
-  if (!useContext(MantineContext))
-    throw new Error("LikeC4Diagram must be a child of MantineProvider");
-  return /* @__PURE__ */ jsx(Fragment, { children });
-}
-function selectXYFlowSize(state) {
-  return `${Math.round(state.width)}:${Math.round(state.height)}`;
-}
-function selectDiagramsize({ view, fitViewPadding }) {
-  return [
-    view.bounds.x,
-    view.bounds.y,
-    view.bounds.width,
-    view.bounds.height,
-    fitViewPadding
-  ].map(Math.round).join(":");
-}
-function FitViewOnViewportResize({ diagramApi }) {
-  const xyflowsize = useXYStore(selectXYFlowSize), viewsize = useDiagramState(selectDiagramsize), dimensions = xyflowsize + viewsize, prevDimensionsRef = useRef(dimensions);
-  return useDebouncedEffect(
-    () => {
-      const { focusedNodeId, fitDiagram } = diagramApi.getState();
-      focusedNodeId || prevDimensionsRef.current === dimensions || (prevDimensionsRef.current = dimensions, fitDiagram(250));
-    },
-    [dimensions, diagramApi],
-    250,
-    1e3
-  ), null;
-}
-function selector$4({ view, viewportChanged, fitViewPadding }) {
-  return {
-    layoutId: view.id + "_" + view.autoLayout + "_" + fitViewPadding,
-    viewportNotMoved: !viewportChanged
-  };
-}
-function FitViewOnDiagramChange() {
-  const {
-    layoutId,
-    viewportNotMoved
-  } = useDiagramState(selector$4, shallowEqual), diagramApi = useDiagramStoreApi(), [currentLayoutId, setCurrent] = useState(layoutId), requiresFit = layoutId !== currentLayoutId;
-  return useDebouncedEffect(
-    () => {
-      layoutId !== currentLayoutId && (setCurrent(layoutId), diagramApi.getState().fitDiagram(450));
-    },
-    [requiresFit, diagramApi],
-    50
-  ), viewportNotMoved && !requiresFit ? /* @__PURE__ */ jsx(FitViewOnViewportResize, { diagramApi }) : null;
-}
-function useSetState(initialState) {
-  const [state, _setState] = useState(initialState), setState = useCallback(
-    (statePartial) => _setState((current) => {
-      const next = {
-        ...current,
-        ...typeof statePartial == "function" ? statePartial(current) : statePartial
-      };
-      return shallowEqual(current, next) ? current : next;
-    }),
-    []
-  );
-  return [state, setState];
-}
-function SelectEdgesOnNodeFocus() {
-  const diagramStore = useDiagramStoreApi(), focusedNodeId = useDiagramState((s) => s.focusedNodeId);
-  return useUpdateEffect(() => {
-    if (!focusedNodeId) {
-      diagramStore.getState().xystore.getState().resetSelectedElements();
-      return;
-    }
-    const container2 = diagramStore.getState().getContainer();
-    if (!container2)
-      return;
-    const { width, height } = container2.getBoundingClientRect(), edgeChanges = [], nodeChanges = [], {
-      edgeLookup,
-      nodeLookup,
-      panZoom,
-      transform,
-      triggerNodeChanges,
-      triggerEdgeChanges
-    } = diagramStore.getState().xystore.getState();
-    let focusBounds = nodeToRect(nonNullable(nodeLookup.get(focusedNodeId)));
-    for (const [, edge] of edgeLookup) {
-      if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
-        const anotherNodeId = edge.source === focusedNodeId ? edge.target : edge.source, nd = nonNullable(nodeLookup.get(anotherNodeId));
-        focusBounds = getBoundsOfRects(focusBounds, nodeToRect(nd));
-      }
-      edge.selected && edgeChanges.push({
-        id: edge.id,
-        type: "select",
-        selected: !1
-      });
-    }
-    for (const [, node] of nodeLookup)
-      node.selected && node.id !== focusedNodeId && nodeChanges.push({
-        id: node.id,
-        type: "select",
-        selected: !1
-      });
-    nodeChanges.push({
-      id: focusedNodeId,
-      type: "select",
-      selected: !0
-    }), edgeChanges.length > 0 && triggerEdgeChanges(edgeChanges), triggerNodeChanges(nodeChanges);
-    const maxZoom = Math.max(1, transform[2]), viewport = getViewportForBounds$1(
-      {
-        x: focusBounds.x - 16,
-        y: focusBounds.y - 16,
-        width: focusBounds.width + 32,
-        height: focusBounds.height + 32
-      },
-      width,
-      height,
-      0.1,
-      maxZoom,
-      0
-    );
-    panZoom == null || panZoom.setViewport(viewport, {
-      duration: 350
-    });
-  }, [focusedNodeId]), useHotkeys(
-    focusedNodeId !== null ? [
-      ["Escape", (e) => {
-        e.stopImmediatePropagation();
-        const { xystore, fitDiagram } = diagramStore.getState();
-        fitDiagram(), xystore.getState().resetSelectedElements();
-      }, { preventDefault: !0 }]
-    ] : []
-  ), null;
-}
-const Open = (props) => /* @__PURE__ */ jsx(
-  "marker",
-  {
-    viewBox: "-4 -4 14 16",
-    refX: 5,
-    refY: 4,
-    markerWidth: "7",
-    markerHeight: "8",
-    preserveAspectRatio: "xMaxYMid meet",
-    orient: "auto-start-reverse",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M0,0 L7,4 L0,8 L4,4 Z",
-        stroke: "context-stroke",
-        fill: "context-stroke",
-        strokeDasharray: 0,
-        strokeWidth: 1,
-        strokeLinecap: "round"
-      }
-    )
-  }
-), Arrow = (props) => /* @__PURE__ */ jsx(
-  "marker",
-  {
-    viewBox: "-1 -1 12 10",
-    refX: 4,
-    refY: 3,
-    markerWidth: "8",
-    markerHeight: "6",
-    preserveAspectRatio: "xMaxYMid meet",
-    orient: "auto-start-reverse",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
-        fill: "context-stroke",
-        strokeWidth: 0
-      }
-    )
-  }
-), OArrow = (props) => /* @__PURE__ */ jsx(
-  "marker",
-  {
-    viewBox: "-1 -1 12 10",
-    refX: 4,
-    refY: 3,
-    markerWidth: "8",
-    markerHeight: "6",
-    preserveAspectRatio: "xMaxYMid meet",
-    orient: "auto-start-reverse",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
-        stroke: "context-stroke",
-        fill: "var(--likec4-background-color)",
-        strokeWidth: 1.25,
-        strokeLinejoin: "miter",
-        strokeLinecap: "square"
-      }
-    )
-  }
-), Diamond = (props) => /* @__PURE__ */ jsx(
-  "marker",
-  {
-    viewBox: "-4 -4 16 14",
-    refX: 5,
-    refY: 4,
-    markerWidth: "10",
-    markerHeight: "8",
-    preserveAspectRatio: "xMaxYMid meet",
-    orient: "auto-start-reverse",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M5,0 L10,4 L5,8 L0,4 Z",
-        fill: "context-stroke",
-        strokeWidth: 0,
-        strokeLinecap: "round"
-      }
-    )
-  }
-), ODiamond = (props) => /* @__PURE__ */ jsx(
-  "marker",
-  {
-    viewBox: "-4 -4 16 14",
-    refX: 6,
-    refY: 4,
-    markerWidth: "10",
-    markerHeight: "8",
-    preserveAspectRatio: "xMaxYMid meet",
-    orient: "auto-start-reverse",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M5,0 L10,4 L5,8 L0,4 Z",
-        stroke: "context-stroke",
-        fill: "var(--likec4-background-color)",
-        strokeWidth: 1.25,
-        strokeLinecap: "round"
-      }
-    )
-  }
-), Dot = (props) => /* @__PURE__ */ jsx(
-  "marker",
-  {
-    viewBox: "0 0 10 10",
-    refX: 4,
-    refY: 4,
-    markerWidth: "6",
-    markerHeight: "6",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "circle",
-      {
-        strokeWidth: 0,
-        fill: "context-stroke",
-        cx: 4,
-        cy: 4,
-        r: 3
-      }
-    )
-  }
-), ODot = (props) => /* @__PURE__ */ jsx(
-  "marker",
-  {
-    viewBox: "0 0 10 10",
-    refX: 4,
-    refY: 4,
-    markerWidth: "6",
-    markerHeight: "6",
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "circle",
-      {
-        strokeWidth: 1.25,
-        stroke: "context-stroke",
-        fill: "var(--likec4-background-color)",
-        cx: 4,
-        cy: 4,
-        r: 3
-      }
-    )
-  }
-), EdgeMarkers = {
-  Arrow,
-  OArrow,
-  Open,
-  Diamond,
-  ODiamond,
-  Dot,
-  ODot
-};
-var container$5 = "bexn7q1", dimmed$2 = "bexn7q2", edgePathBg = "bexn7q3", markerContext = "bexn7q4", controlPoint = "bexn7q5", controlDragging = "bexn7q6", cssEdgePath = "bexn7q8", stepEdgeNumber = "bexn7q9", varLabelX = "var(--bexn7qa)", varLabelY = "var(--bexn7qb)", edgeLabel = "bexn7qd", edgeLabelText = "bexn7qe";
-function getNodeIntersectionFromCenterToPoint(intersectionNode, { x: x1, y: y1 }) {
-  const {
-    width: intersectionNodeWidth,
-    height: intersectionNodeHeight
-  } = getNodeDimensions(intersectionNode), intersectionNodePosition = intersectionNode.internals.positionAbsolute, w = intersectionNodeWidth / 2, h = intersectionNodeHeight / 2, x2 = intersectionNodePosition.x + w, y2 = intersectionNodePosition.y + h, xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h), yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h), a = 1 / (Math.abs(xx1) + Math.abs(yy1)), xx3 = a * xx1, yy3 = a * yy1, x = w * (xx3 + yy3) + x2, y = h * (-xx3 + yy3) + y2;
-  return { x, y };
-}
-const toMarker = (arrowType) => {
-  if (!(!arrowType || arrowType === "none"))
-    switch (arrowType) {
-      case "normal":
-      case "crow":
-        return "Arrow";
-      case "onormal":
-        return "OArrow";
-      case "diamond":
-        return "Diamond";
-      case "odiamond":
-        return "ODiamond";
-      case "open":
-      case "vee":
-        return "Open";
-      case "dot":
-        return "Dot";
-      case "odot":
-        return "ODot";
-      default:
-        nonexhaustive(arrowType);
-    }
-};
-function bezierPath(bezierSpline) {
-  let [start, ...points] = bezierSpline;
-  invariant(start, "start should be defined");
-  let path = `M ${start[0]},${start[1]}`;
-  for (; hasAtLeast$1(points, 3); ) {
-    const [cp1, cp2, end, ...rest] = points;
-    path = path + ` C ${cp1[0]},${cp1[1]} ${cp2[0]},${cp2[1]} ${end[0]},${end[1]}`, points = rest;
-  }
-  return invariant(points.length === 0, "all points should be consumed"), path;
-}
-const isSame = (a, b) => Math.abs(a - b) < 2.5, isSamePoint = (a, b) => {
-  const [ax, ay] = isArray(a) ? a : [a.x, a.y], [bx, by] = isArray(b) ? b : [b.x, b.y];
-  return isSame(ax, bx) && isSame(ay, by);
-}, sameControlPoints = (a, b) => a === b ? !0 : !a || !b || a.length !== b.length ? !1 : a.every((ap, i) => isSamePoint(ap, b[i])), isEqualProps$2 = (prev, next) => prev.id === next.id && deepEqual(prev.source, next.source) && deepEqual(prev.target, next.target) && deepEqual(prev.selected ?? !1, next.selected ?? !1) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data.stepNum, next.data.stepNum) && deepEqual(prev.data.label, next.data.label) && sameControlPoints(prev.data.controlPoints, next.data.controlPoints) && deepEqual(prev.data.edge, next.data.edge), curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y), RelationshipEdge = /* @__PURE__ */ memo(function({
-  id,
-  data,
-  selected,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  style,
-  source,
-  target,
-  interactionWidth
-}) {
-  const [isControlPointDragging, setIsControlPointDragging] = useState(!1), diagramStore = useDiagramStoreApi(), xyflowStore = useXYStoreApi(), { isActive, isEdgePathEditable, isHovered, isDimmed, hasOpenSourceRelation } = useDiagramState((s) => ({
-    isEdgePathEditable: s.readonly !== !0 && s.experimentalEdgeEditing === !0 && s.focusedNodeId === null && s.activeDynamicViewStep === null,
-    isActive: s.focusedNodeId === source || s.focusedNodeId === target || s.activeDynamicViewStep !== null && s.activeDynamicViewStep === data.stepNum,
-    isHovered: s.hoveredEdgeId === id,
-    isDimmed: s.dimmed.has(id),
-    hasOpenSourceRelation: !!s.onOpenSourceRelation
-  })), { nodeLookup, edgeLookup } = xyflowStore.getState(), sourceNode = nonNullable(nodeLookup.get(source), `source node ${source} not found`), targetNode = nonNullable(nodeLookup.get(target), `target node ${target} not found`), isModified = isTruthy(data.controlPoints) || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.element.position) || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.element.position), {
-    label,
-    edge: {
-      points: diagramEdgePoints,
-      line: line2 = "dashed",
-      color = "gray",
-      labelBBox,
-      ...diagramEdge
-    }
-  } = data;
-  let controlPoints = data.controlPoints ?? bezierControlPoints(data.edge);
-  const isStepEdge = data.stepNum !== null, isDotted = line2 === "dotted", isDashed = isDotted || line2 === "dashed";
-  let strokeDasharray;
-  isDotted ? strokeDasharray = "1,8" : isDashed && (strokeDasharray = "8,10");
-  let labelX = (labelBBox == null ? void 0 : labelBBox.x) ?? 0, labelY = (labelBBox == null ? void 0 : labelBBox.y) ?? 0;
-  const [labelPos, setLabelPosition] = useState({
-    x: (label == null ? void 0 : label.bbox.x) ?? labelX,
-    y: (label == null ? void 0 : label.bbox.y) ?? labelY
-  });
-  let edgePath;
-  if (isModified) {
-    const sourceCenterPos = { x: sourceX, y: sourceY }, targetCenterPos = { x: targetX, y: targetY }, points = diagramEdge.dir === "back" ? [
-      targetCenterPos,
-      getNodeIntersectionFromCenterToPoint(targetNode, first(controlPoints) ?? sourceCenterPos),
-      ...controlPoints,
-      getNodeIntersectionFromCenterToPoint(sourceNode, last(controlPoints) ?? targetCenterPos),
-      sourceCenterPos
-    ] : [
-      sourceCenterPos,
-      getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints) ?? targetCenterPos),
-      ...controlPoints,
-      getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints) ?? sourceCenterPos),
-      targetCenterPos
-    ];
-    edgePath = nonNullable(curve(points));
-  } else
-    edgePath = bezierPath(diagramEdgePoints);
-  const svgPathRef = useRef(null);
-  useEffect(() => {
-    const path = svgPathRef.current;
-    if (!path) return;
-    const dompoint = path.getPointAtLength(path.getTotalLength() * 0.5), point = {
-      x: Math.round(dompoint.x),
-      y: Math.round(dompoint.y)
-    };
-    setLabelPosition((current) => isSamePoint(current, point) ? current : point);
-  }, [edgePath]), useDebouncedEffect(
-    () => {
-      !label || label.bbox.x === labelPos.x && label.bbox.y === labelPos.y || diagramStore.getState().xyflow.updateEdgeData(id, {
-        label: {
-          ...label,
-          bbox: {
-            ...label.bbox,
-            ...labelPos
-          }
-        }
-      });
-    },
-    [labelPos],
-    50,
-    300
-  ), (isModified || isControlPointDragging) && (labelX = labelPos.x, labelY = labelPos.y);
-  const onControlPointerDown = (index, e) => {
-    const { domNode } = xyflowStore.getState();
-    if (!domNode || e.pointerType !== "mouse")
-      return;
-    const { xyflow } = diagramStore.getState();
-    if (e.button === 2 && controlPoints.length > 1) {
-      const newControlPoints = controlPoints.slice();
-      newControlPoints.splice(index, 1), e.stopPropagation(), setTimeout(() => {
-        xyflow.updateEdgeData(id, { controlPoints: newControlPoints });
-      }, 10);
-      return;
-    }
-    if (e.button !== 0)
-      return;
-    const wasCanceled = diagramStore.getState().cancelSaveManualLayout();
-    e.stopPropagation();
-    let hasMoved = !1, pointer = { x: e.clientX, y: e.clientY };
-    const onPointerMove = (e2) => {
-      if (hasMoved || !isSamePoint(pointer, [e2.clientX, e2.clientY])) {
-        setIsControlPointDragging(!0), hasMoved = !0, pointer = { x: e2.clientX, y: e2.clientY };
-        const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: !1 });
-        xyflow.updateEdgeData(id, (xyedge) => {
-          const cp = (xyedge.data.controlPoints ?? controlPoints).slice();
-          return cp[index] = {
-            x: Math.round(x),
-            y: Math.round(y)
-          }, {
-            controlPoints: cp
-          };
-        });
-      }
-      e2.stopPropagation();
-    }, onPointerUp = (e2) => {
-      domNode.removeEventListener("pointermove", onPointerMove, {
-        capture: !0
-      }), hasMoved && e2.stopPropagation(), (hasMoved || wasCanceled) && diagramStore.getState().scheduleSaveManualLayout(), setIsControlPointDragging(!1);
-    };
-    domNode.addEventListener("pointermove", onPointerMove, {
-      capture: !0
-    }), domNode.addEventListener("pointerup", onPointerUp, {
-      once: !0,
-      capture: !0
-    });
-  };
-  let markerStartName = toMarker(diagramEdge.tail), markerEndName = toMarker(diagramEdge.head ?? "normal");
-  diagramEdge.dir === "back" && ([markerStartName, markerEndName] = [markerEndName, markerStartName]);
-  const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null, MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null, labelZIndex = 1 + (isHovered ? ZIndexes.Element : edgeLookup.get(id).zIndex ?? ZIndexes.Edge), relationId = first(data.edge.relations), showOpenSourceRelation = hasOpenSourceRelation && relationId !== void 0;
-  return /* @__PURE__ */ jsxs(
-    "g",
-    {
-      className: clsx(
-        container$5,
-        isDimmed && dimmed$2,
-        isControlPointDragging && controlDragging
-      ),
-      "data-likec4-color": color,
-      "data-edge-dir": diagramEdge.dir,
-      "data-edge-active": isActive,
-      "data-edge-hovered": isHovered,
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            className: clsx("react-flow__edge-interaction"),
-            d: edgePath,
-            fill: "none",
-            stroke: "transparent",
-            strokeWidth: interactionWidth ?? 10
-          }
-        ),
-        /* @__PURE__ */ jsxs("g", { className: markerContext, children: [
-          /* @__PURE__ */ jsxs("defs", { children: [
-            MarkerStart && /* @__PURE__ */ jsx(MarkerStart, { id: "start" + id }),
-            MarkerEnd && /* @__PURE__ */ jsx(MarkerEnd, { id: "end" + id })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              className: clsx("react-flow__edge-path", edgePathBg),
-              d: edgePath,
-              style,
-              strokeLinecap: "round"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              ref: svgPathRef,
-              className: clsx("react-flow__edge-path", cssEdgePath),
-              d: edgePath,
-              style,
-              strokeLinecap: "round",
-              strokeDasharray,
-              markerStart: MarkerStart ? `url(#start${id})` : void 0,
-              markerEnd: MarkerEnd ? `url(#end${id})` : void 0
-            }
-          )
-        ] }),
-        isEdgePathEditable && /* @__PURE__ */ jsx(
-          "g",
-          {
-            onContextMenu: (e) => {
-              e.preventDefault(), e.stopPropagation();
-            },
-            children: controlPoints.map((p, i) => /* @__PURE__ */ jsx(
-              "circle",
-              {
-                onPointerDown: (e) => onControlPointerDown(i, e),
-                className: controlPoint,
-                cx: p.x,
-                cy: p.y,
-                r: 3
-              },
-              i
-            ))
-          }
-        ),
-        (data.label || isStepEdge) && /* @__PURE__ */ jsx(
-          EdgeLabel,
-          {
-            isDimmed,
-            color,
-            isModified,
-            labelX,
-            labelY,
-            isEdgePathEditable,
-            selected: selected ?? !1,
-            stepNum: data.stepNum,
-            label: data.label,
-            zIndex: labelZIndex,
-            isHovered,
-            isActive,
-            isStepEdge,
-            onClick: showOpenSourceRelation && ((e) => {
-              var _a, _b;
-              e.stopPropagation(), (_b = (_a = diagramStore.getState()).onOpenSourceRelation) == null || _b.call(_a, relationId);
-            })
-          }
-        )
-      ]
-    }
-  );
-}, isEqualProps$2), EdgeLabel = ({
-  isDimmed,
-  color,
-  isModified,
-  labelX,
-  labelY,
-  isEdgePathEditable,
-  selected,
-  label,
-  stepNum,
-  isHovered,
-  isActive,
-  zIndex,
-  onClick
-}) => /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs(
-  Box,
-  {
-    className: clsx([
-      "nodrag nopan",
-      container$5,
-      edgeLabel,
-      isDimmed && dimmed$2
-    ]),
-    style: {
-      ...assignInlineVars({
-        [varLabelX]: isModified ? `calc(${labelX}px - 10%)` : `${labelX}px`,
-        [varLabelY]: isModified ? `${labelY - 5}px` : `${labelY}px`
-      }),
-      ...isEdgePathEditable && selected && {
-        pointerEvents: "none"
-      },
-      ...label && {
-        maxWidth: label.bbox.width + 18
-      },
-      zIndex
-    },
-    mod: {
-      "data-likec4-color": color,
-      "data-edge-hovered": isHovered,
-      "data-edge-active": isActive
-    },
-    onClick: onClick || void 0,
-    children: [
-      stepNum !== null && /* @__PURE__ */ jsx(Box, { className: stepEdgeNumber, children: stepNum }),
-      isTruthy(label == null ? void 0 : label.text) && /* @__PURE__ */ jsx(Box, { className: edgeLabelText, children: label.text })
-    ]
-  }
-) });
-function NavigateToBtn({ xynodeId, className }) {
-  const diagramApi = useDiagramStoreApi();
-  return /* @__PURE__ */ jsx(
-    ActionIcon$2,
-    {
-      className: clsx("nodrag nopan", className),
-      radius: "md",
-      onPointerDownCapture: (e) => e.stopPropagation(),
-      onClick: (event) => {
-        event.stopPropagation(), diagramApi.getState().triggerOnNavigateTo(xynodeId, event);
-      },
-      role: "button",
-      onDoubleClick: (event) => event.stopPropagation(),
-      children: /* @__PURE__ */ jsx(
-        IconZoomScan,
-        {
-          style: {
-            width: "75%",
-            height: "75%"
-          }
-        }
-      )
-    }
-  );
-}
-var container$4 = "lbtzdo0", nodeHandlerInCenter = "lbtzdo1", dimmed$1 = "lbtzdo2", varOpacity = "var(--lbtzdo3)", varBorderTransparency = "var(--lbtzdo4)", compoundBody = "lbtzdo5", transparent = "lbtzdo7", title$2 = "lbtzdo8", titleWithNavigation = "lbtzdo9", indicator$1 = "lbtzdod", navigateBtn = "lbtzdof";
-const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.data.element, next.data.element), CompoundNodeMemo = /* @__PURE__ */ memo(function({
-  id,
-  data: {
-    element
-  }
-}) {
-  const { color, style, depth = 1, ...compound } = element, opacity = clamp((style.opacity ?? 100) / 100, {
-    min: 0,
-    max: 1
-  }), borderTransparency = clamp(50 - opacity * 50, {
-    min: 0,
-    max: 50
-  }), { isHovered, isDimmed, hasOnNavigateTo } = useDiagramState((s) => ({
-    isHovered: s.hoveredNodeId === id,
-    isDimmed: s.dimmed.has(id),
-    hasOnNavigateTo: !!s.onNavigateTo
-  })), isnavigable = !!compound.navigateTo && hasOnNavigateTo;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Handle,
-      {
-        type: "target",
-        position: Position.Top,
-        className: nodeHandlerInCenter
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      Box,
-      {
-        className: clsx(
-          container$4,
-          "likec4-compound-node",
-          opacity < 1 && "likec4-compound-transparent",
-          isDimmed && dimmed$1
-        ),
-        mod: {
-          "compound-depth": depth,
-          "likec4-color": color,
-          hovered: isHovered
-        },
-        children: [
-          /* @__PURE__ */ jsx("svg", { className: indicator$1, children: /* @__PURE__ */ jsx(
-            "rect",
-            {
-              x: 0,
-              y: 0,
-              width: "100%",
-              height: "100%",
-              rx: 6
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: clsx(
-                compoundBody,
-                opacity < 1 && transparent,
-                "likec4-compound"
-              ),
-              style: opacity < 1 ? {
-                ...assignInlineVars({
-                  [varBorderTransparency]: `${borderTransparency}%`,
-                  [varOpacity]: opacity.toFixed(2)
-                }),
-                borderStyle: style.border ?? "dashed"
-              } : void 0,
-              children: /* @__PURE__ */ jsx(
-                Text$1,
-                {
-                  component: "div",
-                  className: clsx(
-                    title$2,
-                    isnavigable && titleWithNavigation,
-                    "likec4-compound-title"
-                  ),
-                  children: compound.title
-                }
-              )
-            }
-          ),
-          isnavigable && /* @__PURE__ */ jsx(NavigateToBtn, { xynodeId: id, className: navigateBtn })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Handle,
-      {
-        type: "source",
-        position: Position.Top,
-        className: nodeHandlerInCenter
-      }
-    )
-  ] });
-}, isEqualProps$1);
-var container$3 = "_1b6tkn1", handleCenter = "_1b6tkn2", containerAnimated = "_1b6tkn3", dimmed = "_1b6tkn4", indicator = "_1b6tkn7", fillElementFill = "_1b6tkn8", fillMixStroke = "_1b6tkna", hasIcon = "_1b6tknb", title$1 = "_1b6tkne", description$1 = "_1b6tknf", technology = "_1b6tkng", elementDataContainer = "_1b6tknh", elementTextData = "_1b6tkni", elementIcon = "_1b6tknj", cssShapeSvg = "_1b6tknm", cssNavigateBtn = "_1b6tknn", elementLink = "_4ysv0o0", trigger = "_4ysv0o1";
-const selector$3 = (s) => {
-  const target = s.getContainer();
-  return target ? { target } : null;
-};
-function ElementLink({
-  element
-}) {
-  invariant(element.links, "ElementLink: links are required");
-  const id = useId(), portalProps = useDiagramState(selector$3);
-  return /* @__PURE__ */ jsx("div", { className: elementLink, "data-likec4-linkid": id, children: /* @__PURE__ */ jsxs(
-    HoverCard,
-    {
-      position: "bottom-start",
-      shadow: "lg",
-      radius: "sm",
-      classNames: {
-        dropdown: clsx("nodrag", "nopan")
-      },
-      transitionProps: {
-        transition: "pop"
-      },
-      ...portalProps ? { portalProps } : { withinPortal: !1 },
-      floatingStrategy: "fixed",
-      openDelay: 350,
-      closeDelay: 800,
-      offset: {
-        mainAxis: 5,
-        crossAxis: -10
-      },
-      children: [
-        /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsxs(
-          UnstyledButton,
-          {
-            className: clsx("nodrag nopan", trigger),
-            autoFocus: !1,
-            children: [
-              /* @__PURE__ */ jsx(IconLink, { size: 12 }),
-              /* @__PURE__ */ jsx("span", { children: "links" })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          HoverCardDropdown,
-          {
-            onPointerDownCapture: (e) => e.stopPropagation(),
-            onClick: (e) => e.stopPropagation(),
-            p: "xs",
-            children: /* @__PURE__ */ jsx(Stack, { gap: "xs", children: element.links.map((link) => /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", gap: "sm", children: [
-              /* @__PURE__ */ jsx(Box, { flex: "1", style: { overflow: "clip", maxWidth: clamp(element.width, { min: 200, max: 400 }) }, children: /* @__PURE__ */ jsx(Anchor, { href: link.url, target: "_blank", fz: "13", truncate: "end", children: link.title || link.url }) }),
-              /* @__PURE__ */ jsx(CopyButton, { value: link.url, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
-                Button,
-                {
-                  size: "compact-xs",
-                  fz: "10",
-                  variant: "light",
-                  onClick: copy,
-                  color: copied ? "teal" : "gray",
-                  children: copied ? "copied" : "copy"
-                }
-              ) })
-            ] }, link.url)) })
-          }
-        )
-      ]
-    }
-  ) });
-}
-function cylinderSVGPath(diameter, height, tilt = 0.065) {
-  const radius = Math.round(diameter / 2), rx = radius, ry = toDomPrecision(tilt * radius), tiltAdjustedHeight = height - 2 * ry;
-  return {
-    path: `  M ${diameter},${ry}
-        a ${rx},${ry} 0,0,0 ${-diameter} 0
-        l 0,${tiltAdjustedHeight}
-        a ${rx},${ry} 0,0,0 ${diameter} 0
-        l 0,${-tiltAdjustedHeight}
-        z
-        `.replace(/\s+/g, " ").trim(),
-    ry,
-    rx
-  };
-}
-function queueSVGPath(width, height, tilt = 0.185) {
-  const diameter = height, ry = Math.round(diameter / 2), rx = toDomPrecision(diameter / 2 * tilt), tiltAdjustedWidth = width - 2 * rx;
-  return {
-    path: `
-    M ${rx},0
-    a ${rx},${ry} 0,0,0 0 ${diameter}
-    l ${tiltAdjustedWidth},0
-    a ${rx},${ry} 0,0,0 0 ${-diameter}
-    z`.replace(/\s+/g, " ").trim(),
-    ry,
-    rx
-  };
-}
-const PersonIcon = {
-  width: 115,
-  height: 120,
-  path: "M57.9197 0C10.9124 0 33.5766 54.75 33.5766 54.75C38.6131 62.25 45.3285 60.75 45.3285 66C45.3285 70.5 39.4526 72 33.5766 72.75C24.3431 72.75 15.9489 71.25 7.55474 84.75C2.51825 93 0 120 0 120H115C115 120 112.482 93 108.285 84.75C99.8905 70.5 91.4963 72.75 82.2628 72C76.3869 71.25 70.5109 69.75 70.5109 65.25C70.5109 60.75 77.2263 62.25 82.2628 54C82.2628 54.75 104.927 0 57.9197 0V0Z"
-};
-function ElementShapeSvg({ shape, w, h }) {
-  switch (shape) {
-    case "mobile":
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: w,
-            height: h,
-            rx: 6,
-            className: fillMixStroke,
-            strokeWidth: 0
-          }
-        ),
-        /* @__PURE__ */ jsxs("g", { className: fillElementFill, strokeWidth: 0, children: [
-          /* @__PURE__ */ jsx("circle", { cx: 17, cy: h / 2, r: 12 }),
-          /* @__PURE__ */ jsx("rect", { x: 33, y: 12, width: w - 44, height: h - 24, rx: 5 })
-        ] })
-      ] });
-    case "browser":
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: w,
-            height: h,
-            rx: 6,
-            className: fillMixStroke,
-            strokeWidth: 0
-          }
-        ),
-        /* @__PURE__ */ jsxs("g", { className: fillElementFill, strokeWidth: 0, children: [
-          /* @__PURE__ */ jsx("circle", { cx: 16, cy: 17, r: 7 }),
-          /* @__PURE__ */ jsx("circle", { cx: 36, cy: 17, r: 7 }),
-          /* @__PURE__ */ jsx("circle", { cx: 56, cy: 17, r: 7 }),
-          /* @__PURE__ */ jsx("rect", { x: 70, y: 8, width: w - 80, height: 17, rx: 4 }),
-          /* @__PURE__ */ jsx("rect", { x: 10, y: 32, width: w - 20, height: h - 42, rx: 4 })
-        ] })
-      ] });
-    case "person":
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            width: w,
-            height: h,
-            rx: 6,
-            strokeWidth: 0
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "svg",
-          {
-            x: w - PersonIcon.width - 6,
-            y: h - PersonIcon.height,
-            width: PersonIcon.width,
-            height: PersonIcon.height,
-            viewBox: `0 0 ${PersonIcon.width} ${PersonIcon.height}`,
-            className: fillMixStroke,
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                strokeWidth: 0,
-                d: PersonIcon.path
-              }
-            )
-          }
-        )
-      ] });
-    case "queue": {
-      const { path, rx, ry } = queueSVGPath(w, h);
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
-        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry: ry - 0.75, rx, className: fillMixStroke, strokeWidth: 2 })
-      ] });
-    }
-    case "storage":
-    case "cylinder": {
-      const { path, rx, ry } = cylinderSVGPath(w, h);
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
-        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry, rx: rx - 0.75, className: fillMixStroke, strokeWidth: 2 })
-      ] });
-    }
-    case "rectangle":
-      return /* @__PURE__ */ jsx(
-        "rect",
-        {
-          width: w,
-          height: h,
-          rx: 6,
-          strokeWidth: 0
-        }
-      );
-    default:
-      return nonexhaustive(shape);
-  }
-}
-function SelectedIndicator({ shape, w, h }) {
-  switch (shape) {
-    case "queue":
-      return /* @__PURE__ */ jsx("path", { d: queueSVGPath(w, h).path });
-    case "storage":
-    case "cylinder":
-      return /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w, h).path });
-    default:
-      return /* @__PURE__ */ jsx(
-        "rect",
-        {
-          x: -1,
-          y: -1,
-          width: w + 2,
-          height: h + 2,
-          rx: 6
-        }
-      );
-  }
-}
-const Text = Text$1.withProps({
-  component: "div"
-}), selectedScale = 1.015, variants = {
-  idle: (_, { scale }) => ({
-    scale: 1,
-    transition: {
-      delay: isNumber(scale) && scale > selectedScale ? 0.09 : 0
-    }
-  }),
-  selected: (_, { scale }) => ({
-    scale: selectedScale,
-    transition: {
-      delay: isNumber(scale) && scale > selectedScale ? 0.09 : 0
-    }
-  }),
-  // dimmed: {
-  //   filter: 'brightness(0.5)',
-  //   transition: {
-  //     duration: 0.8,
-  //     ease: 'easeInOut',
-  //   }
-  // },
-  // dragging: {
-  //   scale: selectedScale
-  // },
-  // hovered: {
-  //   scale: 1.08
-  // },
-  // hover: (_, {scale}) => isNumber(scale) && scale < 1.02 ? ({
-  //   scale: 1.08,
-  // }) : ({
-  //   scale: 1.08,
-  //   transition: {
-  //     delay: 1
-  //   }
-  // }),
-  hovered: {
-    scale: 1.06
-  },
-  tap: {
-    scale: 0.975
-  }
-  // tap: {
-  //   scale: 0.9
-  // }
-}, isEqualProps = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? !1, next.selected ?? !1) && deepEqual(prev.dragging ?? !1, next.dragging ?? !1) && deepEqual(prev.width ?? 0, next.width ?? 0) && deepEqual(prev.height ?? 0, next.height ?? 0) && deepEqual(prev.data.element, next.data.element), ElementNodeMemo = memo(function({
-  id,
-  data: {
-    element
-  },
-  dragging,
-  // draggable = false,
-  selected = !1,
-  width,
-  height
-}) {
-  const store = useDiagramStoreApi(), { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive, hasGoToSource } = useDiagramState((s) => ({
-    isHovered: s.hoveredNodeId === id,
-    isDimmed: s.dimmed.has(id),
-    isInteractive: s.nodesDraggable || s.nodesSelectable || !!s.onNavigateTo,
-    isHovercards: s.showElementLinks,
-    hasOnNavigateTo: !!s.onNavigateTo,
-    hasGoToSource: !!s.onOpenSourceElement
-  })), isNavigable = hasOnNavigateTo && !!element.navigateTo, w = toDomPrecision(width ?? element.width), h = toDomPrecision(height ?? element.height);
-  let animate = "idle";
-  switch (!0) {
-    case (dragging && selected):
-      animate = "selected";
-      break;
-    case dragging:
-      animate = "idle";
-      break;
-    case (isInteractive && isHovered):
-      animate = "hovered";
-      break;
-    case selected:
-      animate = "selected";
-      break;
-  }
-  const elementIcon2 = ElementIcon({ node: element, store });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Handle,
-      {
-        type: "target",
-        position: Position.Top,
-        className: handleCenter
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      m.div,
-      {
-        id,
-        className: clsx([
-          container$3,
-          isDimmed && dimmed,
-          animate !== "idle" && containerAnimated,
-          "likec4-element-node"
-        ]),
-        "data-hovered": !dragging && isHovered,
-        "data-likec4-color": element.color,
-        "data-likec4-shape": element.shape,
-        variants,
-        initial: !1,
-        animate,
-        ...isInteractive && {
-          whileTap: dragging ? animate : "tap"
-        },
-        children: [
-          /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              className: clsx(
-                cssShapeSvg
-              ),
-              viewBox: `0 0 ${w} ${h}`,
-              width: w,
-              height: h,
-              children: [
-                /* @__PURE__ */ jsx("g", { className: indicator, children: /* @__PURE__ */ jsx(
-                  SelectedIndicator,
-                  {
-                    shape: element.shape,
-                    w,
-                    h
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(
-                  ElementShapeSvg,
-                  {
-                    shape: element.shape,
-                    w,
-                    h
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: clsx(
-                elementDataContainer,
-                isTruthy(elementIcon2) && hasIcon,
-                "likec4-element"
-              ),
-              children: [
-                elementIcon2,
-                /* @__PURE__ */ jsxs("div", { className: clsx(elementTextData, "likec4-element-main-props"), children: [
-                  /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      className: clsx(title$1, "likec4-element-title"),
-                      children: element.title
-                    }
-                  ),
-                  element.technology && /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      className: clsx(technology, "likec4-element-technology"),
-                      children: element.technology
-                    }
-                  ),
-                  element.description && /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      className: clsx(description$1, "likec4-element-description"),
-                      children: element.description
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          isHovercards && element.links && /* @__PURE__ */ jsx(ElementLink, { element }),
-          isNavigable && /* @__PURE__ */ jsx(NavigateToBtn, { xynodeId: id, className: cssNavigateBtn })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Handle,
-      {
-        type: "source",
-        position: Position.Top,
-        className: handleCenter
-      }
-    )
-  ] });
-}, isEqualProps), ElementIcon = ({ node, store }) => {
-  if (!node.icon)
-    return null;
-  if (node.icon.startsWith("http://") || node.icon.startsWith("https://"))
-    return /* @__PURE__ */ jsx("div", { className: clsx(elementIcon, "likec4-element-icon"), children: /* @__PURE__ */ jsx("img", { src: node.icon, alt: node.title }) });
-  const RenderIcon = store.getState().renderIcon, icon = RenderIcon ? /* @__PURE__ */ jsx(RenderIcon, { node }) : null;
-  return icon ? /* @__PURE__ */ jsx("div", { className: clsx(elementIcon, "likec4-element-icon"), children: icon }) : null;
-};
-class Rect {
-  constructor() {
-    __publicField(this, "id");
-    __publicField(this, "minX", new Variable());
-    __publicField(this, "minY", new Variable());
-    __publicField(this, "maxX", new Variable());
-    __publicField(this, "maxY", new Variable());
-  }
-  get x() {
-    return this.minX;
-  }
-  get y() {
-    return this.minY;
-  }
-  get positionAbsolute() {
-    return {
-      x: this.x.value(),
-      y: this.y.value()
-    };
-  }
-  get dimensions() {
-    return {
-      width: this.maxX.value() - this.minX.value(),
-      height: this.maxY.value() - this.minY.value()
-    };
-  }
-  // Position relative to parent
-  get position() {
-    const positionAbsolute = this.positionAbsolute;
-    if (!this.parent)
-      return positionAbsolute;
-    const parentPosition = this.parent.positionAbsolute;
-    return {
-      x: positionAbsolute.x - parentPosition.x,
-      y: positionAbsolute.y - parentPosition.y
-    };
-  }
-}
-class Compound extends Rect {
-  constructor(solver, xynode, parent = null) {
-    super();
-    __publicField(this, "children", []);
-    this.solver = solver, this.parent = parent, this.id = xynode.id, solver.createConstraint(this.maxX, Operator.Ge, this.minX), solver.createConstraint(this.maxY, Operator.Ge, this.minY), parent && parent.addChild(this);
-  }
-  addChild(rect) {
-    this.children.push(rect);
-    const leftPadding = new Expression(
-      rect.minX,
-      [-1, this.minX]
-    ), { weak } = Strength;
-    this.solver.createConstraint(leftPadding, Operator.Ge, 40), this.solver.createConstraint(leftPadding, Operator.Eq, 41, weak);
-    const topPadding = new Expression(
-      rect.minY,
-      [-1, this.minY]
-    );
-    this.solver.createConstraint(topPadding, Operator.Ge, 54), this.solver.createConstraint(topPadding, Operator.Eq, 55, weak);
-    const rightPadding = new Expression(
-      this.maxX,
-      [-1, rect.maxX]
-    );
-    this.solver.createConstraint(rightPadding, Operator.Ge, 40), this.solver.createConstraint(rightPadding, Operator.Eq, 41, weak);
-    const bottomPadding = new Expression(
-      this.maxY,
-      [-1, rect.maxY]
-    );
-    this.solver.createConstraint(bottomPadding, Operator.Ge, 40), this.solver.createConstraint(bottomPadding, Operator.Eq, 41, weak);
-  }
-}
-class Leaf extends Rect {
-  constructor(solver, xynode, parent = null, isEditing = !1) {
-    super(), this.parent = parent, this.isEditing = isEditing, this.id = xynode.id;
-    const x = Math.ceil(xynode.internals.positionAbsolute.x), y = Math.ceil(xynode.internals.positionAbsolute.y), { width, height } = getNodeDimensions(xynode);
-    if (this.maxX = new Expression(this.minX, Math.ceil(width)), this.maxY = new Expression(this.minY, Math.ceil(height)), isEditing) {
-      const superStrong = Strength.create(100, 0, 0);
-      solver.addEditVariable(this.minX, superStrong), solver.addEditVariable(this.minY, superStrong), solver.suggestValue(this.minX, x), solver.suggestValue(this.minY, y);
-    } else {
-      const halfMedium = Strength.create(0, 1, 0, 0.5);
-      solver.createConstraint(this.minX, Operator.Eq, x, halfMedium), solver.createConstraint(this.minY, Operator.Eq, y, halfMedium);
-    }
-    parent && parent.addChild(this);
-  }
-}
-function createLayoutConstraints(xyflowApi, draggingNodeId) {
-  var _a;
-  const { parentLookup, nodeLookup } = xyflowApi.getState(), solver = new Solver(), rects = /* @__PURE__ */ new Map(), traverse = new Array();
-  for (const [, xynode] of nodeLookup)
-    isNullish(xynode.parentId) && traverse.push({
-      xynode,
-      parent: null
-    });
-  for (; traverse.length > 0; ) {
-    const { xynode, parent } = traverse.shift(), isDragging = xynode.dragging === !0 || xynode.id === draggingNodeId, shouldTraverse = !isDragging && xynode.type === "compound" && isAncestor(xynode.id, draggingNodeId), rect = shouldTraverse ? new Compound(solver, xynode, parent) : new Leaf(solver, xynode, parent, isDragging);
-    rects.set(xynode.id, rect), shouldTraverse && ((_a = parentLookup.get(xynode.id)) == null || _a.forEach((child) => {
-      traverse.push({
-        xynode: child,
-        parent: rect
-      });
-    }));
-  }
-  solver.updateVariables(), solver.maxIterations = 1e3;
-  const rectsToUpdate = [...rects.values()].filter((r) => r.id !== draggingNodeId);
-  function updateXYFlowNodes() {
-    solver.updateVariables(), xyflowApi.getState().triggerNodeChanges(
-      rectsToUpdate.reduce((acc, r) => (acc.push({
-        id: r.id,
-        type: "position",
-        dragging: !1,
-        position: r.position,
-        positionAbsolute: r.positionAbsolute
-      }), r instanceof Compound && acc.push({
-        id: r.id,
-        type: "dimensions",
-        setAttributes: !0,
-        dimensions: r.dimensions
-      }), acc), [])
-    );
-  }
-  let animationFrameId = null;
-  function onNodeDrag(xynode) {
-    rectsToUpdate.length !== 0 && (animationFrameId ?? (animationFrameId = requestAnimationFrame(() => {
-      animationFrameId = null;
-      const pos = nodeLookup.get(xynode.id).internals.positionAbsolute, rect = nonNullable(rects.get(xynode.id));
-      solver.suggestValue(rect.minX, Math.ceil(pos.x)), solver.suggestValue(rect.minY, Math.ceil(pos.y)), updateXYFlowNodes();
-    })));
-  }
-  return {
-    onNodeDrag,
-    updateXYFlowNodes
-  };
-}
-function useLayoutConstraints() {
-  const diagramApi = useDiagramStoreApi(), solverRef = useRef();
-  return useMemo(() => ({
-    onNodeDragStart: (_event, xynode) => {
-      const { cancelSaveManualLayout, xystore } = diagramApi.getState();
-      cancelSaveManualLayout(), solverRef.current = createLayoutConstraints(xystore, xynode.id);
-    },
-    onNodeDrag: (_event, xynode) => {
-      var _a;
-      invariant(solverRef.current, "solverRef.current should be defined"), (_a = solverRef.current) == null || _a.onNodeDrag(xynode);
-    },
-    onNodeDragStop: (_event, _xynode) => {
-      diagramApi.getState().scheduleSaveManualLayout(), solverRef.current = void 0;
-    }
-  }), [diagramApi]);
-}
-function useXYFlowEvents() {
-  const diagramApi = useDiagramStoreApi(), lastClickTimestamp = useRef(), dblclickTimeout = useRef(), hoveredNodeFromOnEdgeEnterRef = useRef("");
-  return useMemo(() => {
-    const dbclickLock = () => dblclickTimeout.current !== void 0 ? !0 : (dblclickTimeout.current = window.setTimeout(() => {
-      dblclickTimeout.current = void 0;
-    }, 250), !1), lastClickWasRecent = (ms = 1500) => lastClickTimestamp.current && Date.now() - lastClickTimestamp.current < ms;
-    return {
-      onDoubleClick: (event) => {
-        const {
-          onCanvasDblClick,
-          zoomable,
-          xystore,
-          viewportChanged,
-          fitDiagram,
-          resetLastClicked
-        } = diagramApi.getState();
-        resetLastClicked(), xystore.getState().resetSelectedElements(), onCanvasDblClick || event.stopPropagation(), zoomable && viewportChanged && fitDiagram(), onCanvasDblClick == null || onCanvasDblClick(event);
-      },
-      onPaneClick: (event) => {
-        if (dbclickLock())
-          return;
-        const {
-          focusedNodeId,
-          activeDynamicViewStep,
-          fitDiagram,
-          onCanvasClick,
-          xystore,
-          resetLastClicked
-        } = diagramApi.getState();
-        (focusedNodeId ?? activeDynamicViewStep) !== null && (fitDiagram(), onCanvasClick || event.stopPropagation()), resetLastClicked(), xystore.getState().resetSelectedElements(), onCanvasClick == null || onCanvasClick(event);
-      },
-      onNodeContextMenu: (event, xynode) => {
-        var _a, _b;
-        diagramApi.getState().setLastClickedNode(xynode.id), (_b = (_a = diagramApi.getState()).onNodeContextMenu) == null || _b.call(_a, {
-          element: xynode.data.element,
-          xynode,
-          event
-        });
-      },
-      onPaneContextMenu: (event) => {
-        var _a, _b;
-        diagramApi.getState().resetLastClicked(), (_b = (_a = diagramApi.getState()).onCanvasContextMenu) == null || _b.call(_a, event);
-      },
-      onEdgeContextMenu: (event, xyedge) => {
-        var _a, _b;
-        diagramApi.getState().setLastClickedEdge(xyedge.id), (_b = (_a = diagramApi.getState()).onEdgeContextMenu) == null || _b.call(_a, {
-          edge: xyedge.data.edge,
-          xyedge,
-          event
-        });
-      },
-      onNodeClick: (event, xynode) => {
-        const {
-          focusedNodeId,
-          fitDiagram,
-          focusOnNode,
-          onNodeClick,
-          xystore,
-          enableFocusMode,
-          lastClickedNodeId,
-          nodesSelectable,
-          setLastClickedNode,
-          onOpenSourceElement
-        } = diagramApi.getState();
-        setLastClickedNode(xynode.id);
-        const shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id, clickedRecently = lastClickedNodeId === xynode.id && lastClickWasRecent();
-        if (clickedRecently && onOpenSourceElement && onOpenSourceElement(xynode.data.element.id), enableFocusMode || nodesSelectable) {
-          let stopPropagation = !0;
-          switch (!0) {
-            case (enableFocusMode && !focusedNodeId && clickedRecently):
-            case (enableFocusMode && shallChangeFocus): {
-              focusOnNode(xynode.id);
-              break;
-            }
-            case (enableFocusMode && focusedNodeId === xynode.id && clickedRecently): {
-              fitDiagram();
-              break;
-            }
-            case nodesSelectable: {
-              xystore.getState().addSelectedNodes([xynode.id]);
-              break;
-            }
-            default:
-              stopPropagation = !1;
-          }
-          !onNodeClick && stopPropagation && event.stopPropagation();
-        }
-        lastClickTimestamp.current = Date.now(), onNodeClick == null || onNodeClick({
-          element: xynode.data.element,
-          xynode,
-          event
-        });
-      },
-      onNodeDoubleClick: (event, xynode) => {
-        const {
-          focusedNodeId,
-          enableFocusMode,
-          fitDiagram,
-          focusOnNode,
-          setLastClickedNode
-        } = diagramApi.getState();
-        setLastClickedNode(xynode.id), lastClickTimestamp.current = Date.now(), (isNonNullish(focusedNodeId) || enableFocusMode) && (focusedNodeId === xynode.id ? fitDiagram() : focusOnNode(xynode.id), event.stopPropagation());
-      },
-      onEdgeClick: (event, xyedge) => {
-        const {
-          lastClickedEdgeId,
-          isDynamicView,
-          enableDynamicViewWalkthrough,
-          activateDynamicStep,
-          activeDynamicViewStep,
-          focusedNodeId,
-          xystore,
-          nodesSelectable,
-          focusOnNode,
-          onEdgeClick,
-          setLastClickedEdge
-        } = diagramApi.getState();
-        lastClickedEdgeId !== xyedge.id && setLastClickedEdge(xyedge.id);
-        const isNotAFirstClick = lastClickedEdgeId === xyedge.id, isEdgeOfFocusedNode = isTruthy(focusedNodeId) && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target);
-        if (isDynamicView && enableDynamicViewWalkthrough && (isEdgeOfFocusedNode || isNotAFirstClick || isNonNullish(activeDynamicViewStep))) {
-          const nextStep = extractStep(xyedge.data.edge.id);
-          if (activeDynamicViewStep !== nextStep) {
-            activateDynamicStep(nextStep), event.stopPropagation();
-            return;
-          }
-        }
-        isEdgeOfFocusedNode ? (focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source), onEdgeClick || event.stopPropagation()) : nodesSelectable && (xystore.getState().addSelectedEdges([xyedge.id]), onEdgeClick || event.stopPropagation()), onEdgeClick == null || onEdgeClick({
-          edge: xyedge.data.edge,
-          xyedge,
-          event
-        });
-      },
-      onEdgeDoubleClick: (event, xyedge) => {
-        diagramApi.getState().setLastClickedEdge(xyedge.id);
-        const {
-          enableFocusMode,
-          isDynamicView,
-          enableDynamicViewWalkthrough,
-          focusOnNode,
-          activateDynamicStep,
-          activeDynamicViewStep
-        } = diagramApi.getState();
-        if (isDynamicView && enableDynamicViewWalkthrough) {
-          const nextStep = extractStep(xyedge.data.edge.id);
-          activeDynamicViewStep !== nextStep && (activateDynamicStep(extractStep(xyedge.data.edge.id)), event.stopPropagation());
-          return;
-        }
-        if (enableFocusMode) {
-          focusOnNode(xyedge.source), event.stopPropagation();
-          return;
-        }
-      },
-      onMoveEnd: (event, _viewport) => {
-        const viewportChanged = !!event;
-        viewportChanged !== diagramApi.getState().viewportChanged && diagramApi.setState({ viewportChanged }, !1, `viewport-changed: ${viewportChanged}`);
-      },
-      onNodeMouseEnter: (_event, xynode) => {
-        hoveredNodeFromOnEdgeEnterRef.current = "", diagramApi.getState().setHoveredNode(xynode.id);
-      },
-      onNodeMouseLeave: (_event, xynode) => {
-        const { hoveredNodeId, setHoveredNode } = diagramApi.getState();
-        hoveredNodeId === xynode.id && setHoveredNode(null);
-      },
-      onEdgeMouseEnter: (_event, { id, source, target }) => {
-        const { hoveredNodeId, focusedNodeId, setHoveredEdge, setHoveredNode } = diagramApi.getState();
-        if (setHoveredEdge(id), (focusedNodeId === source || focusedNodeId === target) && focusedNodeId !== hoveredNodeId) {
-          const next = hoveredNodeFromOnEdgeEnterRef.current = source === focusedNodeId ? target : source;
-          setHoveredNode(next);
-        }
-      },
-      onEdgeMouseLeave: (_event, xyedge) => {
-        const { hoveredEdgeId, setHoveredEdge, hoveredNodeId, setHoveredNode } = diagramApi.getState();
-        hoveredEdgeId === xyedge.id && setHoveredEdge(null), hoveredNodeId === hoveredNodeFromOnEdgeEnterRef.current && setHoveredNode(null), hoveredNodeFromOnEdgeEnterRef.current = "";
-      }
-    };
-  }, [diagramApi]);
-}
-const nodeTypes = {
-  element: ElementNodeMemo,
-  compound: CompoundNodeMemo
-}, edgeTypes = {
-  relationship: RelationshipEdge
-}, selector$2 = (s) => ({
-  nodes: s.xynodes,
-  edges: s.xyedges,
-  onInit: s.onInit,
-  onNodesChange: s.onNodesChange,
-  onEdgesChange: s.onEdgesChange,
-  nodesSelectable: s.nodesSelectable || s.focusedNodeId !== null,
-  nodesDraggable: s.nodesDraggable,
-  fitView: s.fitViewEnabled,
-  fitViewPadding: s.fitViewPadding,
-  hasOnNavigateTo: !!s.onNavigateTo,
-  hasOnNodeClick: !!s.onNodeClick,
-  hasOnNodeContextMenu: !!s.onNodeContextMenu,
-  hasOnCanvasContextMenu: !!s.onCanvasContextMenu,
-  hasOnEdgeContextMenu: !!s.onEdgeContextMenu,
-  hasOnEdgeClick: !!s.onEdgeClick,
-  zoomable: s.zoomable,
-  pannable: s.pannable,
-  // If fitView is not enabled
-  // And diagram starts with a negative x or y - we need to translate viewprot
-  translateX: s.fitViewEnabled ? 0 : -Math.min(s.view.bounds.x, 0),
-  translateY: s.fitViewEnabled ? 0 : -Math.min(s.view.bounds.y, 0)
-});
-function XYFlow({
-  colorMode = "system",
-  className,
-  children,
-  style
-}) {
-  const xyflowApi = useXYStoreApi(), {
-    nodes,
-    edges,
-    onInit,
-    onNodesChange,
-    onEdgesChange,
-    nodesSelectable,
-    nodesDraggable,
-    fitView,
-    fitViewPadding,
-    pannable,
-    zoomable,
-    hasOnNodeClick,
-    hasOnNavigateTo,
-    hasOnNodeContextMenu,
-    hasOnCanvasContextMenu,
-    hasOnEdgeContextMenu,
-    translateX,
-    translateY
-  } = useDiagramState(selector$2, shallowEqual), [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(zoomable), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents();
-  return useOnViewportChange({
-    onEnd: ({ x, y, zoom }) => {
-      const roundedX = Math.round(x), roundedY = Math.round(y);
-      (x !== roundedX || y !== roundedY) && xyflowApi.setState({ transform: [roundedX, roundedY, zoom] }), setZoomOnDoubleClick(zoomable && zoom < 1.1);
-    }
-  }), /* @__PURE__ */ jsx(
-    ReactFlow,
-    {
-      className,
-      style,
-      ...colorMode && { colorMode },
-      nodes,
-      edges,
-      nodeTypes,
-      edgeTypes,
-      zoomOnPinch: zoomable,
-      zoomOnScroll: !pannable && zoomable,
-      ...!zoomable && {
-        zoomActivationKeyCode: null
-      },
-      maxZoom: zoomable ? MaxZoom : 1,
-      minZoom: zoomable ? MinZoom : 1,
-      fitView,
-      fitViewOptions: useMemo(() => ({
-        minZoom: MinZoom,
-        maxZoom: 1,
-        padding: fitViewPadding,
-        includeHiddenNodes: !0
-      }), [fitViewPadding]),
-      ...!fitView && {
-        viewport: {
-          x: translateX,
-          y: translateY,
-          zoom: 1
-        }
-      },
-      preventScrolling: zoomable || pannable,
-      defaultMarkerColor: "var(--xy-edge-stroke)",
-      noDragClassName: "nodrag",
-      noPanClassName: "nopan",
-      panOnScroll: pannable,
-      panOnDrag: pannable,
-      ...!pannable && {
-        selectionKeyCode: null
-      },
-      elementsSelectable: nodesSelectable,
-      nodesFocusable: nodesDraggable || nodesSelectable || hasOnNodeClick || hasOnNavigateTo,
-      edgesFocusable: !1,
-      nodesDraggable,
-      ...nodesDraggable && {
-        onNodeDragStart: layoutConstraints.onNodeDragStart,
-        onNodeDrag: layoutConstraints.onNodeDrag,
-        onNodeDragStop: layoutConstraints.onNodeDragStop
-      },
-      nodeDragThreshold: 3,
-      zoomOnDoubleClick,
-      elevateNodesOnSelect: !1,
-      selectNodesOnDrag: !1,
-      onNodesChange,
-      onEdgesChange,
-      onDoubleClick: handlers.onDoubleClick,
-      onPaneClick: handlers.onPaneClick,
-      onMoveEnd: handlers.onMoveEnd,
-      onNodeMouseEnter: handlers.onNodeMouseEnter,
-      onNodeMouseLeave: handlers.onNodeMouseLeave,
-      onEdgeMouseEnter: handlers.onEdgeMouseEnter,
-      onEdgeMouseLeave: handlers.onEdgeMouseLeave,
-      onNodeClick: handlers.onNodeClick,
-      onNodeDoubleClick: handlers.onNodeDoubleClick,
-      onEdgeClick: handlers.onEdgeClick,
-      onEdgeDoubleClick: handlers.onEdgeDoubleClick,
-      onInit,
-      ...hasOnNodeContextMenu && {
-        onNodeContextMenu: handlers.onNodeContextMenu
-      },
-      ...hasOnEdgeContextMenu && {
-        onEdgeContextMenu: handlers.onEdgeContextMenu
-      },
-      ...hasOnCanvasContextMenu && {
-        onPaneContextMenu: handlers.onPaneContextMenu
-      },
-      children
-    }
-  );
-}
-var container$2 = "hbkbtj0", card$1 = "hbkbtj1", title = "hbkbtj2", description = "hbkbtj3";
-const selector$1 = (s) => ({
-  id: s.view.id,
-  title: s.view.title ?? "untitled",
-  description: s.view.description,
-  links: s.view.links
-});
-function DiagramTitlePanel() {
-  const { id, title: title$12, description: description$12, links } = useDiagramState(selector$1), [isCollapsed, setCollapsed] = useLocalStorage({
-    key: "diagram-title-panel-collapsed",
-    defaultValue: !1
-  }), toggle = () => setCollapsed((v) => !v);
-  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
-    m.div,
-    {
-      initial: { opacity: 0.05, scale: 0.7 },
-      animate: { opacity: 1, scale: 1 },
-      exit: {
-        opacity: 0.05,
-        scale: 0.6
-      },
-      className: clsx("react-flow__panel", container$2),
-      style: {
-        transformOrigin: "left center"
-      },
-      children: /* @__PURE__ */ jsxs(
-        Card,
-        {
-          radius: "sm",
-          className: card$1,
-          withBorder: !isCollapsed,
-          p: isCollapsed ? "sm" : "md",
-          onDoubleClick: (e) => e.stopPropagation(),
-          children: [
-            isCollapsed && /* @__PURE__ */ jsx(CardSection, { children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                fullWidth: !0,
-                justify: "stretch",
-                size: "md",
-                radius: "0",
-                variant: "subtle",
-                color: "gray",
-                onClick: toggle,
-                fw: 500,
-                fz: "sm",
-                children: title$12
-              }
-            ) }),
-            !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(CardSection, { mb: "xs", children: /* @__PURE__ */ jsx(
-                Button,
-                {
-                  fullWidth: !0,
-                  size: "xs",
-                  h: "sm",
-                  py: 2,
-                  radius: "0",
-                  variant: "subtle",
-                  color: "gray",
-                  onClick: toggle,
-                  children: /* @__PURE__ */ jsx(IconMenu, { size: 11, opacity: 0.7 })
-                }
-              ) }),
-              /* @__PURE__ */ jsxs(Group, { justify: "stretch", wrap: "nowrap", mb: "sm", children: [
-                /* @__PURE__ */ jsx(
-                  Text$1,
-                  {
-                    component: "div",
-                    flex: "1",
-                    size: "md",
-                    fw: 500,
-                    lh: 1.1,
-                    className: title,
-                    children: title$12
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  Text$1,
-                  {
-                    hidden: isCollapsed,
-                    component: "div",
-                    flex: "0 0 auto",
-                    inline: !0,
-                    size: "xs",
-                    fz: 9,
-                    fw: 500,
-                    c: "dimmed",
-                    style: {
-                      userSelect: "all"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxs("span", { style: { userSelect: "none" }, children: [
-                        "id:",
-                        " "
-                      ] }),
-                      id
-                    ]
-                  }
-                )
-              ] }),
-              description$12 && /* @__PURE__ */ jsx(
-                Spoiler,
-                {
-                  maxHeight: 42,
-                  showLabel: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "light", fz: "10", size: "compact-xs", children: "show more" }),
-                  hideLabel: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "light", fz: "10", size: "compact-xs", children: "hide" }),
-                  children: /* @__PURE__ */ jsx(
-                    Text$1,
-                    {
-                      component: "div",
-                      size: "sm",
-                      className: description,
-                      children: description$12 || "no description"
-                    }
-                  )
-                }
-              ),
-              !description$12 && /* @__PURE__ */ jsx(
-                Text$1,
-                {
-                  component: "div",
-                  size: "xs",
-                  c: "dimmed",
-                  children: "no description"
-                }
-              ),
-              links && /* @__PURE__ */ jsx(
-                Stack,
-                {
-                  gap: 3,
-                  justify: "stretch",
-                  align: "stretch",
-                  children: links.map((link) => /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", align: "center", gap: "sm", children: [
-                    /* @__PURE__ */ jsx(Box, { flex: "1", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(
-                      Anchor,
-                      {
-                        href: link.url,
-                        target: "_blank",
-                        fz: "xs",
-                        truncate: "end",
-                        display: "inline-block",
-                        w: "100%",
-                        children: link.title || link.url
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx(CopyButton, { value: link.url, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        size: "compact-xs",
-                        fz: "10",
-                        variant: "light",
-                        onClick: copy,
-                        color: copied ? "teal" : "gray",
-                        children: copied ? "copied" : "copy"
-                      }
-                    ) })
-                  ] }, link.url))
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    },
-    id
-  ) });
-}
-var container$1 = "_2jkb2y0", buttons = "_2jkb2y1", btn = "_2jkb2y3";
-function DynamicViewWalkthrough() {
-  const isMobile = useXYStore((s) => s.width <= 750), {
-    nextDynamicStep,
-    stopDynamicView,
-    activeDynamicViewStep,
-    hasNextSteps
-  } = useDiagramState((s) => ({
-    nextDynamicStep: s.nextDynamicStep,
-    stopDynamicView: s.stopDynamicView,
-    activeDynamicViewStep: s.activeDynamicViewStep,
-    hasNextSteps: (s.activeDynamicViewStep ?? 1) < s.view.edges.length
-  })), isActive = isNumber(activeDynamicViewStep);
-  useHotkeys(
-    isActive ? [
-      ["ArrowLeft", () => nextDynamicStep(-1)],
-      ["ArrowRight", () => nextDynamicStep()],
-      ["Escape", (e) => {
-        e.stopImmediatePropagation(), stopDynamicView();
-      }, { preventDefault: !0 }]
-    ] : [
-      ["ArrowLeft", () => nextDynamicStep()],
-      ["ArrowRight", () => nextDynamicStep()]
-    ]
-  );
-  const buttonProps = {
-    className: btn,
-    size: isMobile ? "compact-md" : "lg",
-    radius: isMobile ? "lg" : "xl"
-  }, nextStep = (increment = 1) => (e) => {
-    e.stopPropagation(), nextDynamicStep(increment);
-  };
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      className: clsx("react-flow__panel", container$1),
-      onClick: (e) => e.stopPropagation(),
-      onDoubleClick: (e) => e.stopPropagation(),
-      children: [
-        isNullish(activeDynamicViewStep) && /* @__PURE__ */ jsx(
-          Button,
-          {
-            ...buttonProps,
-            className: clsx(buttons, btn),
-            rightSection: /* @__PURE__ */ jsx(IconPlayerPlayFilled, {}),
-            onClick: nextStep(),
-            px: "xl",
-            children: "Start"
-          }
-        ),
-        isNumber(activeDynamicViewStep) && /* @__PURE__ */ jsxs(ButtonGroup, { className: buttons, children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              ...buttonProps,
-              pl: "lg",
-              disabled: activeDynamicViewStep === 1,
-              onClick: nextStep(-1),
-              children: /* @__PURE__ */ jsx(IconPlayerSkipBackFilled, {})
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            Button,
-            {
-              ...buttonProps,
-              px: hasNextSteps ? "md" : "xl",
-              onClick: (e) => {
-                e.stopPropagation(), stopDynamicView();
-              },
-              children: [
-                hasNextSteps && /* @__PURE__ */ jsx(IconPlayerStopFilled, {}),
-                !hasNextSteps && "End"
-              ]
-            }
-          ),
-          hasNextSteps && /* @__PURE__ */ jsx(
-            Button,
-            {
-              ...buttonProps,
-              pr: "lg",
-              onClick: nextStep(),
-              children: /* @__PURE__ */ jsx(IconPlayerSkipForwardFilled, {})
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-var vars = { safariAnimationHook: "var(--likec4-safari-animation-hook)", default: { font: "var(--likec4-default-font-family)" }, likec4: { font: "var(--likec4-font-family)", background: { color: "var(--likec4-background-color)", pattern: { color: "var(--likec4-background-pattern-color)" } } }, compound: { font: "var(--likec4-compound-font-family)", titleColor: "var(--likec4-compound-title-color)" }, element: { font: "var(--likec4-element-font-family)", fill: "var(--likec4-element-fill)", stroke: "var(--likec4-element-stroke)", hiContrast: "var(--likec4-element-hiContrast)", loContrast: "var(--likec4-element-loContrast)" }, relation: { lineColor: "var(--likec4-relation-lineColor)", labelColor: "var(--likec4-relation-labelColor)", labelBgColor: "var(--likec4-relation-labelBg)" }, optionsPanel: { top: "var(--likec4-options-panel-top)", right: "var(--likec4-options-panel-right)" }, navigationPanel: { top: "var(--likec4-navigation-panel-top)", left: "var(--likec4-navigation-panel-left)" } }, container = "_1ncdyfa0", card = "_1ncdyfa1", tabPanel = "_1ncdyfa2", elementNotation = "_1ncdyfa3", shapeSvg = "_1ncdyfa4", shapeBadge = "_1ncdyfa5";
-const ElementNotation = ({ value }) => {
-  const {
-    title: title2,
-    color = "primary",
-    shape = "rectangle"
-  } = value, [onlyKind, setOnlyKind] = useState(null), diagramStore = useDiagramStoreApi(), w = 300, h = 200;
-  return /* @__PURE__ */ jsx(
-    Card,
-    {
-      shadow: "none",
-      px: "xs",
-      py: "sm",
-      className: elementNotation,
-      mod: {
-        "data-likec4-color": color
-      },
-      onMouseEnter: () => {
-        setOnlyKind(null), diagramStore.getState().highlightByElementNotation(value);
-      },
-      onMouseLeave: () => {
-        setOnlyKind(null), diagramStore.setState({ dimmed: /* @__PURE__ */ new Set() });
-      },
-      children: /* @__PURE__ */ jsxs(
-        Group,
-        {
-          gap: "sm",
-          align: "stretch",
-          wrap: "nowrap",
-          children: [
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                flex: "0 0 70px",
-                style: {
-                  width: 70,
-                  height: ceil(70 * (h / w), 0)
-                },
-                children: /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    className: clsx(
-                      shapeSvg
-                    ),
-                    viewBox: `0 0 ${w} ${h}`,
-                    children: /* @__PURE__ */ jsx(
-                      ElementShapeSvg,
-                      {
-                        shape,
-                        w,
-                        h
-                      }
-                    )
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxs(Stack, { gap: 4, flex: 1, children: [
-              /* @__PURE__ */ jsx(Group, { gap: 4, flex: "0 0 auto", children: value.kinds.map((kind) => /* @__PURE__ */ jsx(
-                Badge,
-                {
-                  className: shapeBadge,
-                  onMouseEnter: () => {
-                    setOnlyKind(kind), diagramStore.getState().highlightByElementNotation(value, kind);
-                  },
-                  onMouseLeave: () => {
-                    setOnlyKind(null), diagramStore.getState().highlightByElementNotation(value);
-                  },
-                  opacity: isNonNullish(onlyKind) && onlyKind !== kind ? 0.25 : 1,
-                  color: isNonNullish(onlyKind) && onlyKind !== kind ? "gray" : vars.element.fill,
-                  children: kind
-                },
-                kind
-              )) }),
-              /* @__PURE__ */ jsx(
-                Text$1,
-                {
-                  component: "div",
-                  fz: "sm",
-                  fw: 500,
-                  lh: "1.25",
-                  style: {
-                    textWrap: "pretty"
-                  },
-                  children: title2
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    }
-  );
-}, selector = (s) => {
-  var _a;
-  return {
-    id: s.view.id,
-    notations: ((_a = s.view.notation) == null ? void 0 : _a.elements) ?? [],
-    height: s.xystore.getState().height,
-    isVisible: isNullish(s.focusedNodeId ?? s.activeDynamicViewStep),
-    target: s.getContainer()
-  };
-};
-function NotationPanel() {
-  const {
-    id,
-    notations,
-    isVisible,
-    height,
-    target
-  } = useDiagramState(selector), [isCollapsed, setCollapsed] = useLocalStorage({
-    key: "notation-panel-collapsed",
-    defaultValue: !0
-  }), hasNotations = notations.length > 0, portalProps = target ? { portalProps: { target } } : { withinPortal: !1 };
-  return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-    !hasNotations && /* @__PURE__ */ jsx(
-      m.div,
-      {
-        initial: { opacity: 0.75, translateX: "50%" },
-        animate: { opacity: 1, translateX: 0 },
-        exit: {
-          translateX: "100%",
-          opacity: 0.6
-        },
-        className: clsx("react-flow__panel", container),
-        children: /* @__PURE__ */ jsx(Tooltip$2, { label: "Diagram has no notations", color: "orange", ...portalProps, children: /* @__PURE__ */ jsx(
-          ThemeIcon,
-          {
-            size: "xl",
-            variant: "light",
-            color: "orange",
-            radius: "md",
-            children: /* @__PURE__ */ jsx(IconAlertTriangle, {})
-          }
-        ) })
-      },
-      "empty"
-    ),
-    hasNotations && isVisible && isCollapsed && /* @__PURE__ */ jsx(
-      m.div,
-      {
-        initial: { opacity: 0.75, translateX: "50%" },
-        animate: { opacity: 1, translateX: 0 },
-        exit: {
-          translateX: "100%",
-          opacity: 0.6
-        },
-        className: clsx("react-flow__panel", container),
-        children: /* @__PURE__ */ jsx(Tooltip$2, { label: "Show notation", color: "dark", fz: "xs", ...portalProps, children: /* @__PURE__ */ jsx(
-          ActionIcon$2,
-          {
-            size: "xl",
-            variant: "light",
-            color: "gray",
-            radius: "md",
-            onClick: () => setCollapsed(!1),
-            children: /* @__PURE__ */ jsx(IconHelpCircle, { stroke: 1.5 })
-          }
-        ) })
-      },
-      "collapsed"
-    ),
-    hasNotations && isVisible && !isCollapsed && /* @__PURE__ */ jsx(
-      m.div,
-      {
-        initial: {
-          opacity: 0.75,
-          // translateX: '50%',
-          scale: 0.2
-        },
-        animate: { opacity: 1, scale: 1 },
-        exit: {
-          opacity: 0,
-          scale: 0.25
-        },
-        className: clsx("react-flow__panel", container),
-        style: {
-          transformOrigin: "bottom right"
-        },
-        children: /* @__PURE__ */ jsx(
-          Paper,
-          {
-            radius: "sm",
-            withBorder: !0,
-            shadow: "lg",
-            className: card,
-            children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "first", radius: "xs", children: [
-              /* @__PURE__ */ jsxs(TabsList, { children: [
-                /* @__PURE__ */ jsx(
-                  ActionIcon$2,
-                  {
-                    size: "md",
-                    variant: "subtle",
-                    color: "gray",
-                    ml: 2,
-                    style: {
-                      alignSelf: "center"
-                    },
-                    onClick: () => setCollapsed(!0),
-                    children: /* @__PURE__ */ jsx(IconArrowDownRight, { stroke: 2 })
-                  }
-                ),
-                /* @__PURE__ */ jsx(TabsTab, { value: "first", fz: "xs", children: "Elements" }),
-                /* @__PURE__ */ jsx(TabsTab, { value: "second", fz: "xs", disabled: !0, children: "Relationships" })
-              ] }),
-              /* @__PURE__ */ jsx(TabsPanel, { value: "first", className: tabPanel, hidden: isCollapsed, children: /* @__PURE__ */ jsx(
-                ScrollAreaAutosize,
-                {
-                  viewportProps: {
-                    style: {
-                      maxHeight: height > 50 ? `min(40vh, ${height - 20}px)` : "40vh"
-                    }
-                  },
-                  children: /* @__PURE__ */ jsx(Stack, { gap: 0, children: notations.map((n, i) => /* @__PURE__ */ jsx(ElementNotation, { value: n }, i)) })
-                }
-              ) })
-            ] })
-          }
-        )
-      },
-      id
-    )
-  ] });
-}
-const {
-  primary,
-  secondary,
-  muted,
-  ...otherColors
-} = defaultTheme.elements, themedColors = [
-  { key: "primary", value: primary.fill },
-  { key: "secondary", value: secondary.fill },
-  { key: "muted", value: muted.fill }
-], colors = keys(otherColors).map((key) => ({
-  key,
-  value: defaultTheme.elements[key].fill
-})), NodeOptions = memo(({ selectedNodeIds }) => {
-  const diagramApi = useDiagramStoreApi(), nodes = useXYNodesData(selectedNodeIds);
-  if (!hasAtLeast$1(nodes, 1))
-    return null;
-  if (nodes.length !== selectedNodeIds.length)
-    throw new Error("NodeOptions: nodes and props.nodes should have the same length");
-  const showShapeOption = nodes.some((node) => node.type === "element"), [firstNode, ...rest] = nodes, showGoToSource = rest.length === 0 && diagramApi.getState().onOpenSourceElement, showOpacityOption = firstNode.type === "compound" && (rest.length === 0 || rest.every((node) => node.type === "compound")), triggerChange = (style) => {
-    const targets = nodes.map((node) => node.data.element.id);
-    invariant(hasAtLeast$1(targets, 1), "At least one target is required"), diagramApi.getState().triggerChangeElementStyle({
-      op: "change-element-style",
-      style,
-      targets
-    });
-  };
-  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
-    /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", align: "flex-start", children: [
-      /* @__PURE__ */ jsxs(Box, { flex: 1, children: [
-        /* @__PURE__ */ jsxs(Text$1, { fz: rem(9), fw: "500", c: "dimmed", children: [
-          "ELEMENT",
-          rest.length > 0 ? "S" : ""
-        ] }),
-        /* @__PURE__ */ jsx(Text$1, { size: "xs", c: rest.length > 0 ? "dimmed" : "", truncate: !0, children: rest.length === 0 ? firstNode.data.element.title : "[ multiple ]" })
-      ] }),
-      showGoToSource && /* @__PURE__ */ jsx(Box, { flex: 0, children: /* @__PURE__ */ jsx(
-        ActionIcon$2,
-        {
-          size: "sm",
-          variant: "light",
-          color: "gray",
-          onClick: (e) => {
-            var _a, _b;
-            e.stopPropagation(), (_b = (_a = diagramApi.getState()).onOpenSourceElement) == null || _b.call(_a, firstNode.data.element.id);
-          },
-          children: /* @__PURE__ */ jsx(
-            IconFileSymlink,
-            {
-              stroke: 1.2,
-              style: {
-                width: "70%",
-                height: "70%"
-              }
-            }
-          )
-        }
-      ) })
-    ] }),
-    showShapeOption && /* @__PURE__ */ jsx(
-      ShapeOption,
-      {
-        nodes,
-        onShapeChange: (shape) => {
-          triggerChange({ shape });
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Colors,
-      {
-        nodes,
-        onColorChange: (color) => {
-          triggerChange({ color });
-        }
-      }
-    ),
-    showOpacityOption && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(Divider, { label: "opacity and border", labelPosition: "left" }),
-      /* @__PURE__ */ jsx(Space, { h: "xs" }),
-      /* @__PURE__ */ jsx(
-        OpacityOption,
-        {
-          node: firstNode,
-          onOpacityChange: (opacity) => {
-            triggerChange({ opacity });
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(Space, { h: "sm" }),
-      /* @__PURE__ */ jsx(
-        BorderStyleOption,
-        {
-          node: firstNode,
-          onChange: (border) => {
-            triggerChange({ border });
-          }
-        }
-      )
-    ] }, firstNode.id),
-    /* @__PURE__ */ jsx(NavigateToOption, { nodes })
-  ] });
-}, (prevProps, nextProps) => shallowEqual(prevProps.selectedNodeIds, nextProps.selectedNodeIds));
-function Colors({
-  nodes: [firstNode, ...nodes],
-  onColorChange
-}) {
-  let selectedColor = firstNode.data.element.color;
-  takeWhile(nodes, (node) => node.data.element.color !== selectedColor ? (selectedColor = null, !1) : !0);
-  const changeColor = (color) => () => {
-    selectedColor !== color && onColorChange(color);
-  };
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 400, closeDelay: 300, children: [
-    /* @__PURE__ */ jsx(Divider, { label: "color", labelPosition: "left" }),
-    /* @__PURE__ */ jsx(Flex, { mt: "xs", maw: 150, gap: "xs", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: themedColors.map(({ key, value }) => /* @__PURE__ */ jsx(
-      Tooltip$2,
-      {
-        label: key,
-        fz: "xs",
-        color: "dark",
-        offset: 2,
-        transitionProps: { duration: 140, transition: "slide-up" },
-        children: /* @__PURE__ */ jsx(
-          ColorSwatch,
-          {
-            color: value,
-            size: 20,
-            withShadow: !0,
-            onClick: changeColor(key),
-            style: { color: "#fff", cursor: "pointer" },
-            children: selectedColor === key && /* @__PURE__ */ jsx(CheckIcon, { style: { width: rem(12), height: rem(12) } })
-          }
-        )
-      },
-      key
-    )) }),
-    /* @__PURE__ */ jsx(Flex, { mt: "sm", maw: 150, gap: "xs", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: colors.map(({ key, value }) => /* @__PURE__ */ jsx(
-      Tooltip$2,
-      {
-        label: key,
-        fz: "xs",
-        color: "dark",
-        offset: 2,
-        transitionProps: { duration: 140, transition: "slide-up" },
-        children: /* @__PURE__ */ jsx(
-          ColorSwatch,
-          {
-            color: value,
-            size: 20,
-            onClick: changeColor(key),
-            style: { color: "#fff", cursor: "pointer" },
-            children: selectedColor === key && /* @__PURE__ */ jsx(CheckIcon, { style: { width: rem(12), height: rem(12) } })
-          }
-        )
-      },
-      key
-    )) })
-  ] }) });
-}
-function ShapeOption({
-  nodes: [firstNode, ...nodes],
-  onShapeChange
-}) {
-  let selectedShape = firstNode.data.element.shape;
-  return takeWhile(nodes, (node) => node.data.element.shape !== selectedShape ? (selectedShape = null, !1) : !0), /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Divider, { label: "shape", labelPosition: "left" }),
-    /* @__PURE__ */ jsx(
-      Select,
-      {
-        mt: "xs",
-        size: "xs",
-        variant: "filled",
-        value: selectedShape,
-        placeholder: "[ multiple ]",
-        data: ElementShapes,
-        allowDeselect: !1,
-        checkIconPosition: "right",
-        onChange: (value) => {
-          !value || value === selectedShape || onShapeChange(value);
-        }
-      }
-    )
-  ] });
-}
-function NavigateToOption({
-  nodes: [node, ...nodes]
-}) {
-  const isMultiple = nodes.length >= 1;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Divider, { label: "navigate to", labelPosition: "left" }),
-    isMultiple && /* @__PURE__ */ jsx(Text$1, { size: "xs", c: "dimmed", children: "[ multiple ]" }),
-    !isMultiple && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Space, { h: "xs" }),
-      /* @__PURE__ */ jsx(
-        Select,
-        {
-          size: "xs",
-          variant: "filled",
-          value: node.data.element.navigateTo ?? null,
-          placeholder: "select",
-          data: node.data.element.navigateTo ? [{ value: node.data.element.navigateTo, label: node.data.element.navigateTo }] : [],
-          allowDeselect: !0,
-          checkIconPosition: "right"
-        }
-      )
-    ] })
-  ] });
-}
-function OpacityOption({
-  node,
-  onOpacityChange
-}) {
-  let selectedOpacity = node.data.element.style.opacity ?? 100;
-  const [value, setValue] = useState(selectedOpacity);
-  return useUpdateEffect(() => {
-    setValue(selectedOpacity);
-  }, [selectedOpacity]), /* @__PURE__ */ jsx(
-    Slider,
-    {
-      size: "sm",
-      color: "dark",
-      value,
-      onChange: setValue,
-      onChangeEnd: onOpacityChange
-    }
-  );
-}
-function BorderStyleOption({
-  node,
-  onChange
-}) {
-  let selecteBorderStyle = node.data.element.style.border ?? "dashed";
-  const [value, setValue] = useState(selecteBorderStyle);
-  return useUpdateEffect(() => {
-    setValue(selecteBorderStyle);
-  }, [selecteBorderStyle]), /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-    SegmentedControl,
-    {
-      size: "xs",
-      fullWidth: !0,
-      withItemsBorders: !1,
-      value,
-      onChange: (v) => {
-        setValue(v), onChange(v);
-      },
-      data: [
-        { label: "Solid", value: "solid" },
-        { label: "Dashed", value: "dashed" },
-        { label: "Dotted", value: "dotted" },
-        { label: "None", value: "none" }
-      ]
-    }
-  ) });
-}
-var panel$1 = "_1lmzt1h0";
-function OptionsPanel() {
-  const { isFocused, viewId } = useDiagramState((s) => ({
-    viewId: s.view.id,
-    isFocused: s.focusedNodeId !== null || s.activeDynamicViewStep !== null
-  })), [selected, setSelected] = useState({
-    nodes: [],
-    edges: []
-  });
-  useOnSelectionChange({
-    onChange: ({ nodes: nodes2, edges }) => {
-      const newSelected = {
-        nodes: nodes2.map((n) => n.id).sort(),
-        edges: edges.map((e) => e.id).sort()
-      };
-      deepEqual(selected, newSelected) || setSelected(newSelected);
-    }
-  });
-  const { nodes } = selected, hasAnySelection = !isFocused && nodes.length > 0;
-  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: hasAnySelection && /* @__PURE__ */ jsx(
-    m.div,
-    {
-      initial: { opacity: 0, scale: 0.85 },
-      animate: { opacity: 1, scale: 1 },
-      exit: {
-        opacity: 0,
-        scale: 0.85
-      },
-      transition: { duration: 0.14 },
-      className: clsx("react-flow__panel", panel$1),
-      style: {
-        transformOrigin: "center right",
-        maxWidth: "320px"
-      },
-      children: /* @__PURE__ */ jsx(Card, { shadow: "md", children: nodes.length > 0 && /* @__PURE__ */ jsx(NodeOptions, { selectedNodeIds: nodes }) })
-    },
-    viewId
-  ) });
-}
-const Tooltip$1 = Tooltip$2.withProps({
-  color: "gray",
-  fz: "xs",
-  position: "right",
-  openDelay: 400,
-  closeDelay: 100,
-  label: "",
-  children: null,
-  offset: 8,
-  transitionProps: { transition: "fade-right", duration: 200 }
-}), ActionIcon$1 = ActionIcon$2.withProps({
-  className: "action-icon",
-  variant: "light",
-  color: "gray"
-});
-var panel = "_1snasyb0", autolayoutIcon = "_1snasyb1", autolayoutIndicator = "_1snasyb2";
-const ActionIcon = ActionIcon$2.withProps({
-  size: "md",
-  variant: "subtle",
-  color: "gray"
-}), Tooltip = Tooltip$2.withProps({
-  color: "gray",
-  fz: "xs",
-  position: "right",
-  openDelay: 300,
-  label: "",
-  children: null,
-  offset: 5,
-  transitionProps: { transition: "fade", duration: 200 }
-}), ChangeAutoLayoutButton = (props) => {
-  const store = useDiagramStoreApi(), [rootRef, setRootRef] = useState(null), [controlsRefs, setControlsRefs] = useState({}), autoLayout = useDiagramState((s) => s.view.autoLayout), setControlRef = (name) => (node) => {
-    controlsRefs[name] = node, setControlsRefs(controlsRefs);
-  }, setAutoLayout = (layout) => (event) => {
-    var _a, _b;
-    event.stopPropagation(), (_b = (_a = store.getState()).onChange) == null || _b.call(_a, {
-      change: {
-        op: "change-autolayout",
-        layout
-      }
-    });
-  };
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      position: "right-start",
-      clickOutsideEvents: [
-        "pointerdown"
-      ],
-      radius: "xs",
-      shadow: "lg",
-      offset: {
-        mainAxis: 10
-      },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(
-          ActionIcon$2,
-          {
-            className: "action-icon",
-            variant: "light",
-            color: "gray",
-            children: /* @__PURE__ */ jsx(IconLayoutDashboard, { stroke: 1.3 })
-          }
-        ) }),
-        /* @__PURE__ */ jsx(PopoverDropdown, { className: "likec4-top-left-panel", p: 8, pt: 4, children: /* @__PURE__ */ jsxs(Box, { pos: "relative", ref: setRootRef, children: [
-          /* @__PURE__ */ jsx(
-            FloatingIndicator,
-            {
-              target: controlsRefs[autoLayout],
-              parent: rootRef,
-              className: autolayoutIndicator
-            }
-          ),
-          /* @__PURE__ */ jsx(Box, { mb: 10, children: /* @__PURE__ */ jsx(Text$1, { inline: !0, fz: "xs", c: "dimmed", fw: 500, children: "Auto layout:" }) }),
-          /* @__PURE__ */ jsx(TooltipGroup, { openDelay: 100, children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: 1, children: [
-            /* @__PURE__ */ jsx(Tooltip, { label: "Top to Bottom", children: /* @__PURE__ */ jsx(
-              ActionIcon,
-              {
-                className: autolayoutIcon,
-                ref: setControlRef("TB"),
-                onClick: setAutoLayout("TB"),
-                children: /* @__PURE__ */ jsx(IconArrowBigDownLines, { stroke: 1.3 })
-              }
-            ) }),
-            /* @__PURE__ */ jsxs(Group, { gap: 30, children: [
-              /* @__PURE__ */ jsx(Tooltip, { label: "Left to Right", children: /* @__PURE__ */ jsx(
-                ActionIcon,
-                {
-                  className: autolayoutIcon,
-                  ref: setControlRef("LR"),
-                  onClick: setAutoLayout("LR"),
-                  children: /* @__PURE__ */ jsx(IconArrowBigDownLines, { stroke: 1.3, style: { rotate: "270deg" } })
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Tooltip, { label: "Right to Left", children: /* @__PURE__ */ jsx(
-                ActionIcon,
-                {
-                  className: autolayoutIcon,
-                  ref: setControlRef("RL"),
-                  onClick: setAutoLayout("RL"),
-                  children: /* @__PURE__ */ jsx(IconArrowBigDownLines, { stroke: 1.3, style: { rotate: "90deg" } })
-                }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsx(Tooltip, { label: "Bottom to Top", children: /* @__PURE__ */ jsx(
-              ActionIcon,
-              {
-                className: autolayoutIcon,
-                ref: setControlRef("BT"),
-                onClick: setAutoLayout("BT"),
-                children: /* @__PURE__ */ jsx(IconArrowBigDownLines, { stroke: 1.3, style: { rotate: "180deg" } })
-              }
-            ) })
-          ] }) })
-        ] }) })
-      ]
-    }
-  );
-}, historySelector = (s) => ({
-  showBurgerMenu: !!s.onBurgerMenuClick,
-  hasStepBack: s.navigationHistoryIndex > 0,
-  hasStepForward: s.navigationHistoryIndex < s.navigationHistory.length - 1
-}), BackwardForwardButtons = () => {
-  const store = useDiagramStoreApi(), {
-    showBurgerMenu,
-    hasStepBack,
-    hasStepForward
-  } = useDiagramState(historySelector);
-  return /* @__PURE__ */ jsxs(
-    Group,
-    {
-      className: "likec4-navigation-panel",
-      gap: "xs",
-      children: [
-        showBurgerMenu && /* @__PURE__ */ jsx(
-          ActionIcon$1,
-          {
-            onClick: (e) => {
-              var _a, _b;
-              e.stopPropagation(), (_b = (_a = store.getState()).onBurgerMenuClick) == null || _b.call(_a);
-            },
-            children: /* @__PURE__ */ jsx(IconMenu2, {})
-          }
-        ),
-        /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-          hasStepBack && /* @__PURE__ */ jsx(
-            m.div,
-            {
-              layout: !0,
-              initial: { opacity: 0.05, transform: "translateX(-10px)" },
-              animate: { opacity: 1, transform: "translateX(0)" },
-              exit: {
-                opacity: 0.05,
-                transform: "translateX(-10px)"
-              },
-              children: /* @__PURE__ */ jsx(
-                ActionIcon$1,
-                {
-                  onClick: (e) => {
-                    e.stopPropagation(), store.getState().goBack();
-                  },
-                  children: /* @__PURE__ */ jsx(IconChevronLeft, {})
-                }
-              )
-            },
-            "back"
-          ),
-          hasStepForward && /* @__PURE__ */ jsx(
-            m.div,
-            {
-              layout: !0,
-              initial: { opacity: 0.05, transform: "translateX(10px)" },
-              animate: { opacity: 1, transform: "translateX(0)" },
-              exit: {
-                opacity: 0,
-                transform: "translateX(10px)"
-              },
-              children: /* @__PURE__ */ jsx(
-                ActionIcon$1,
-                {
-                  onClick: (e) => {
-                    e.stopPropagation(), store.getState().goForward();
-                  },
-                  children: /* @__PURE__ */ jsx(IconChevronRight, {})
-                }
-              )
-            },
-            "forward"
-          )
-        ] })
-      ]
-    }
-  );
-}, LayoutDriftNotification = (props) => /* @__PURE__ */ jsxs(
-  HoverCard,
-  {
-    position: "right-start",
-    openDelay: 200,
-    closeDelay: 100,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsx(
-        ActionIcon$1,
-        {
-          className: "action-icon",
-          variant: "light",
-          color: "orange",
-          children: /* @__PURE__ */ jsx(IconAlertTriangle, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsx(HoverCardDropdown, { p: "0", children: /* @__PURE__ */ jsxs(
-        Notification,
-        {
-          color: "orange",
-          withBorder: !1,
-          withCloseButton: !1,
-          title: "Manual layout issues",
-          children: [
-            /* @__PURE__ */ jsxs(Text$1, { mt: 2, size: "sm", lh: "xs", children: [
-              "View contains new elements or their sizes have changed,",
-              /* @__PURE__ */ jsx("br", {}),
-              "last manual layout can not be applied."
-            ] }),
-            /* @__PURE__ */ jsxs(Text$1, { mt: "xs", size: "sm", lh: "xs", children: [
-              "Update view predicates or remove ",
-              /* @__PURE__ */ jsx(Code, { children: "@likec4-generated" })
-            ] })
-          ]
-        }
-      ) })
-    ]
-  }
-), TopLeftPanel = () => {
-  const store = useDiagramStoreApi(), {
-    showNavigationButtons,
-    showFitDiagram,
-    showLayoutDriftWarning,
-    showChangeAutoLayout,
-    target,
-    showGoToSource
-  } = useDiagramState((s) => {
-    const isNotActive = s.activeDynamicViewStep === null && s.focusedNodeId === null;
-    return {
-      showNavigationButtons: !!s.onBurgerMenuClick || s.showNavigationButtons && !!s.onNavigateTo,
-      showFitDiagram: s.fitViewEnabled && s.zoomable && s.viewportChanged,
-      showLayoutDriftWarning: s.readonly !== !0 && s.view.hasLayoutDrift === !0 && isNotActive,
-      showChangeAutoLayout: s.readonly !== !0 && !!s.onChange && isNotActive,
-      showGoToSource: !!s.onOpenSourceView,
-      target: s.getContainer()
-    };
-  }), portalProps = target ? { portalProps: { target } } : void 0;
-  return /* @__PURE__ */ jsxs(
-    Stack,
-    {
-      className: clsx(
-        "react-flow__panel",
-        panel,
-        "likec4-top-left-panel"
-      ),
-      onClick: (e) => e.stopPropagation(),
-      gap: "xs",
-      children: [
-        showNavigationButtons && /* @__PURE__ */ jsx(BackwardForwardButtons, {}),
-        showGoToSource && /* @__PURE__ */ jsx(Tooltip$1, { label: "Go to source", ...portalProps, children: /* @__PURE__ */ jsx(
-          ActionIcon$1,
-          {
-            className: "action-icon",
-            onClick: (e) => {
-              var _a, _b;
-              e.stopPropagation(), (_b = (_a = store.getState()).onOpenSourceView) == null || _b.call(_a);
-            },
-            children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
-          }
-        ) }),
-        showChangeAutoLayout && /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),
-        /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-          showLayoutDriftWarning && /* @__PURE__ */ jsx(
-            m.div,
-            {
-              initial: { opacity: 0.05, transform: "translateX(-40%)" },
-              animate: { opacity: 1, transform: "translateX(0)" },
-              exit: {
-                opacity: 0,
-                transform: "translateX(-40%)"
-              },
-              children: /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps })
-            },
-            "layout"
-          ),
-          showFitDiagram && /* @__PURE__ */ jsx(
-            m.div,
-            {
-              initial: { opacity: 0.05, transform: "translateX(-20%)" },
-              animate: { opacity: 1, transform: "translateX(0)" },
-              exit: {
-                opacity: 0,
-                transform: "translateX(-30%)"
-              },
-              children: /* @__PURE__ */ jsx(Tooltip$1, { label: "Center diagram", ...portalProps, children: /* @__PURE__ */ jsx(
-                ActionIcon$1,
-                {
-                  className: "action-icon",
-                  onClick: (e) => {
-                    e.stopPropagation(), store.getState().fitDiagram();
-                  },
-                  children: /* @__PURE__ */ jsx(IconFocusCentered, {})
-                }
-              ) })
-            },
-            "fit-view"
-          )
-        ] })
-      ]
-    }
-  );
-};
-TopLeftPanel.displayName = "TopLeftPanel";
-function literalToEnum(value) {
-  switch (value) {
-    case "dots":
-      return BackgroundVariant.Dots;
-    case "lines":
-      return BackgroundVariant.Lines;
-    case "cross":
-      return BackgroundVariant.Cross;
-    default:
-      nonexhaustive(value);
-  }
-}
-function XYFlowBackground({ background }) {
-  if (typeof background == "string")
-    return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(background), size: 2, gap: 20 });
-  const { variant, ...rest } = background;
-  return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(variant), ...rest });
-}
-const XYFlowInner = memo(function({
-  children,
-  background,
-  controls,
-  showDiagramTitle
-}) {
-  const {
-    showNotations,
-    isDynamicView,
-    isDynamicViewActive,
-    readonly,
-    enableDynamicViewWalkthrough
-  } = useDiagramState((s) => ({
-    showNotations: s.showNotations,
-    isDynamicView: s.isDynamicView,
-    readonly: s.readonly,
-    enableDynamicViewWalkthrough: s.enableDynamicViewWalkthrough,
-    isDynamicViewActive: isNonNullish(s.activeDynamicViewStep)
-  }));
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    background !== "transparent" && background !== "solid" && /* @__PURE__ */ jsx(XYFlowBackground, { background }),
-    controls && /* @__PURE__ */ jsx(Controls, { position: "bottom-right" }),
-    /* @__PURE__ */ jsx(TopLeftPanel, {}),
-    readonly !== !0 && /* @__PURE__ */ jsx(OptionsPanel, {}),
-    showDiagramTitle === !0 && !isDynamicViewActive && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
-    isDynamicView && enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}),
-    showNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
-    children
-  ] });
-}, shallowEqual);
-XYFlowInner.displayName = "XYFlowInner";
-function LikeC4Diagram({
-  view,
-  className,
-  fitView = !0,
-  fitViewPadding = 0,
-  readonly = !0,
-  pannable = !0,
-  zoomable = !0,
-  nodesSelectable = !readonly,
-  nodesDraggable = !readonly,
-  background = "dots",
-  controls = !1,
-  showElementLinks = !0,
-  showDiagramTitle = !0,
-  showNotations = !0,
-  enableDynamicViewWalkthrough = !1,
-  enableFocusMode = !1,
-  initialWidth,
-  initialHeight,
-  keepAspectRatio = !1,
-  experimentalEdgeEditing = !1,
-  onCanvasClick,
-  onCanvasContextMenu,
-  onCanvasDblClick,
-  onEdgeClick,
-  onChange,
-  onEdgeContextMenu,
-  onNavigateTo,
-  onNodeClick,
-  onNodeContextMenu,
-  onOpenSourceElement,
-  onOpenSourceView,
-  onOpenSourceRelation,
-  onBurgerMenuClick,
-  renderIcon,
-  where,
-  showNavigationButtons = !!onNavigateTo
-}) {
-  const initialRef = useRef({
-    defaultNodes: [],
-    defaultEdges: [],
-    initialWidth: initialWidth ?? view.bounds.width,
-    initialHeight: initialHeight ?? view.bounds.height
-  });
-  return readonly !== !0 && where && console.warn("where filter is only supported in readonly mode"), /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, strict: !0, children: /* @__PURE__ */ jsx(
-    ReactFlowProvider,
-    {
-      fitView,
-      ...initialRef.current,
-      children: /* @__PURE__ */ jsx(
-        DiagramContextProvider,
-        {
-          view,
-          keepAspectRatio,
-          className: clsx(rootClassName, className),
-          readonly,
-          pannable,
-          zoomable,
-          fitViewEnabled: fitView,
-          fitViewPadding,
-          showElementLinks,
-          showNavigationButtons,
-          showNotations,
-          nodesDraggable,
-          nodesSelectable,
-          experimentalEdgeEditing,
-          enableDynamicViewWalkthrough,
-          enableFocusMode,
-          whereFilter: where ?? null,
-          renderIcon: renderIcon ?? null,
-          onCanvasClick: onCanvasClick ?? null,
-          onCanvasContextMenu: onCanvasContextMenu ?? null,
-          onEdgeClick: onEdgeClick ?? null,
-          onEdgeContextMenu: onEdgeContextMenu ?? null,
-          onNodeClick: onNodeClick ?? null,
-          onNodeContextMenu: onNodeContextMenu ?? null,
-          onChange: onChange ?? null,
-          onNavigateTo: onNavigateTo ?? null,
-          onCanvasDblClick: onCanvasDblClick ?? null,
-          onOpenSourceView: onOpenSourceView ?? null,
-          onOpenSourceElement: onOpenSourceElement ?? null,
-          onOpenSourceRelation: onOpenSourceRelation ?? null,
-          onBurgerMenuClick: onBurgerMenuClick ?? null,
-          children: /* @__PURE__ */ jsx(
-            LikeC4DiagramInnerMemo,
-            {
-              controls,
-              background,
-              showDiagramTitle
-            }
-          )
-        }
-      )
-    }
-  ) }) });
-}
-const LikeC4DiagramInnerMemo = memo(function({
-  background,
-  controls,
-  showDiagramTitle
-}) {
-  const {
-    isInitialized,
-    pannable,
-    fitView,
-    enableFocusMode
-  } = useDiagramState((s) => ({
-    isInitialized: s.initialized,
-    zoomable: s.zoomable,
-    pannable: s.pannable,
-    fitView: s.fitViewEnabled,
-    enableFocusMode: s.enableFocusMode
-  }));
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      XYFlow,
-      {
-        className: clsx(
-          "likec4-diagram",
-          cssReactFlow,
-          controls === !1 && cssNoControls,
-          pannable !== !0 && cssDisablePan,
-          background === "transparent" && cssTransparentBg
-        ),
-        children: /* @__PURE__ */ jsx(
-          XYFlowInner,
-          {
-            showDiagramTitle,
-            background,
-            controls
-          }
-        )
-      }
-    ),
-    isInitialized && /* @__PURE__ */ jsxs(Fragment, { children: [
-      fitView && /* @__PURE__ */ jsx(FitViewOnDiagramChange, {}),
-      enableFocusMode && /* @__PURE__ */ jsx(SelectEdgesOnNodeFocus, {})
-    ] })
-  ] });
-}, shallowEqual);
-function StaticLikeC4Diagram({
-  view,
-  fitView = !0,
-  fitViewPadding = 0,
-  background = "transparent",
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx(
-    LikeC4Diagram,
-    {
-      view,
-      readonly: !0,
-      fitView,
-      fitViewPadding,
-      pannable: !1,
-      zoomable: !1,
-      controls: !1,
-      background,
-      showElementLinks: !0,
-      showDiagramTitle: !1,
-      showNotations: !1,
-      enableDynamicViewWalkthrough: !1,
-      enableFocusMode: !1,
-      nodesSelectable: !1,
-      nodesDraggable: !1,
-      ...rest
-    }
-  );
-}
-export {
-  LikeC4Diagram,
-  StaticLikeC4Diagram,
-  useSetState,
-  useUpdateEffect
-};