likec4 1.39.3 → 1.39.5

package/__app__/src/likec4.js

@@ -1,13 +1,11 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key2] = value;
 var __publicField = (obj, key2, value) => __defNormalProp(obj, typeof key2 != "symbol" ? key2 + "" : key2, value);
-import { useContext, createContext, useMemo, useState, useEffect, forwardRef, createElement, useRef, createRef, Fragment as Fragment$1, useCallback, memo as memo$1, useLayoutEffect, useDeferredValue } from "react";
+import { forwardRef, createElement, useContext, createContext, useMemo, useState, useEffect, useRef, createRef, Fragment as Fragment$1, useCallback, memo as memo$1, useLayoutEffect, useDeferredValue } from "react";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { L as LazyMotion, d as domMax, M as MotionConfig, u as useSyncedRef, t, l, s as shallowEqual, a as atom, b as deepEqual, c as useDeepCompareMemo, C, r, e as u, f as t$1, g as useFirstMountState, h as useCustomCompareEffect, i as useStoreApi, j as useStore, k as useReactFlow, m as useInternalNode, n as u$1, o as i, B as Bezier, p as o, q as getNodeDimensions, v as Background$1, w as BackgroundVariant, x as j, y as index, z as xstateReact_cjsExports, A as MotionDiv, D as m, E as n, F as EdgeLabelRenderer, G as e, H as MotionButton, N as NodeToolbar, P as Position, I as n$1, J as Handle, K as d3line, O as curveCatmullRomOpen, Q as d, R as a, S as useDebouncedEffect, T as t$2, U as useUpdateEffect$1, V as xstate_cjsExports, W as useDebouncedCallback, X as AnimatePresence, Y as isMacOs, Z as MotionSpan, _ as m$1, $ as useReducedMotionConfig, a0 as useTimeoutEffect, a1 as ReactRemoveScroll, a2 as n$2, a3 as LayoutGroup, a4 as ErrorBoundary$1, a5 as getBezierPath, a6 as i$1, a7 as i$2, a8 as p, a9 as m$2, aa as a$1, ab as m$3, ac as f, ad as t$3, ae as i$3, af as dagre, ag as l$1, ah as r$1, ai as a$2, aj as ReactFlowProvider, ak as Panel, al as d$1, am as useDragControls, an as useMotionValue, ao as n$3, ap as animate, aq as l$2, ar as autoUpdate, as as computePosition, at as offset$1, au as autoPlacement, av as size, aw as hide, ax as u$2, ay as useCustomCompareMemo, az as toRgba, aA as a$3, aB as mix, aC as toHex, aD as scale, aE as i$4, aF as n$4, aG as y, aH as applyEdgeChanges, aI as applyNodeChanges, aJ as getViewportForBounds, aK as t$4, aL as t$5, aM as D, aN as d$2, aO as e$1, aP as getBoundsOfRects, aQ as boxToRect, aR as nodeToRect } from "./vendors.js";
-import { u as useMantineStyleNonce, M as MantineContext, a as MantineProvider, c as createSafeContext, b as createOptionalContext, d as useCallbackRef, e as useDebouncedValue, A as ActionIcon$1, T as Text, f as useId, g as useHover, h as useDebouncedState, i as Tooltip$7, P as Popover, j as PopoverTarget, B as Button, C as ColorSwatch, k as PopoverDropdown, S as Space, D as Divider$1, l as Stack, m as TooltipGroup, F as Flex, n as CheckIcon, r as rem, o as Slider, p as Paper, q as Box$1, G as Group, s as SegmentedControl, t as Menu, v as MenuTarget, w as MenuDropdown, x as MenuItem, y as ThemeIcon, z as Breadcrumbs, E as FloatingIndicator, U as UnstyledButton, H as useUncontrolled, I as clampUseMovePosition, J as useMove, K as useMergedRef, L as HoverCard, N as HoverCardTarget, O as HoverCardDropdown, Q as Notification, R as Code, V as Badge, W as CopyButton, X as Portal, Y as NavLink, Z as useThrottledCallback, _ as createScopedKeydownHandler, $ as ScrollAreaAutosize, a0 as Input, a1 as Highlight, a2 as useFocusTrap, a3 as useTree, a4 as Alert, a5 as Tree, a6 as useStateHistory, a7 as Anchor, a8 as Pill, a9 as useViewportSize, aa as useSessionStorage, ab as Card, ac as CloseButton, ad as ActionIconGroup, ae as Tabs, af as TabsList, ag as TabsTab, ah as TabsPanel, ai as ScrollArea, aj as VisuallyHidden, ak as useWindowEvent, al as FocusTrap, am as Title, an as useFocusWithin, ao as useCombobox, ap as ComboboxOption, aq as Combobox, ar as ComboboxTarget, as as ComboboxDropdown, at as ComboboxOptions, au as ComboboxEmpty, av as useHotkeys, aw as Grid, ax as GridCol, ay as useLocalStorage, az as CardSection, aA as Spoiler, aB as ButtonGroup, aC as useTimeout, aD as useDebouncedCallback$1, aE as getHotkeyHandler } from "./mantine.js";
+import { u as useMantineStyleNonce, L as LazyMotion, d as domMax, M as MotionConfig, a as useSyncedRef, e, t, s as shallowEqual, b as MantineContext, c as MantineProvider, f as atom, g as createSafeContext, h as deepEqual, i as useDeepCompareMemo, j as t$1, k as t$2, l as t$3, m as t$4, n as createOptionalContext, o as useId$1, p as useFirstMountState, q as useCustomCompareEffect, r as useStoreApi, v as useStore, w as useCallbackRef, x as useReactFlow, y as useInternalNode, z as t$5, A as t$6, B as Bezier, C as e$1, D as getNodeDimensions, E as Background$1, F as BackgroundVariant, G as n, H as index, I as xstateReact_cjsExports, J as useDebouncedValue, K as MotionDiv, N as ActionIcon$1, O as m, T as Text, P as e$2, Q as EdgeLabelRenderer, R as e$3, S as MotionButton, U as useHover, V as useDebouncedState, W as NodeToolbar, X as Position, Y as e$4, Z as Handle, _ as d3line, $ as curveCatmullRomOpen, a0 as n$1, a1 as t$7, a2 as useDebouncedEffect, a3 as Tooltip$7, a4 as t$8, a5 as Popover, a6 as PopoverTarget, a7 as Button, a8 as ColorSwatch, a9 as PopoverDropdown, aa as Space, ab as Divider$1, ac as Stack, ad as TooltipGroup, ae as Flex, af as CheckIcon, ag as rem, ah as useUpdateEffect$1, ai as Slider, aj as Paper, ak as Box$1, al as Group, am as SegmentedControl, an as Menu, ao as MenuTarget, ap as MenuDropdown, aq as MenuItem, ar as xstate_cjsExports, as as ThemeIcon, at as Breadcrumbs, au as FloatingIndicator, av as UnstyledButton, aw as useDebouncedCallback, ax as useUncontrolled, ay as clampUseMovePosition, az as useMove, aA as useMergedRef, aB as HoverCard, aC as HoverCardTarget, aD as HoverCardDropdown, aE as Notification, aF as Code, aG as AnimatePresence, aH as isMacOs, aI as Badge, aJ as CopyButton, aK as MotionSpan, aL as Portal, aM as NavLink, aN as useFocusTrap, aO as useReducedMotionConfig, aP as useTimeoutEffect, aQ as ReactRemoveScroll, aR as useThrottledCallback, aS as createScopedKeydownHandler, aT as ScrollAreaAutosize, aU as Input, aV as t$9, aW as Highlight, aX as e$5, aY as LayoutGroup, aZ as ErrorBoundary$1, a_ as useTree, a$ as Alert, b0 as Tree, b1 as getBezierPath, b2 as t$a, b3 as t$b, b4 as e$6, b5 as t$c, b6 as t$d, b7 as n$2, b8 as r, b9 as t$e, ba as n$3, bb as dagre, bc as t$f, bd as t$g, be as t$h, bf as ReactFlowProvider, bg as useStateHistory, bh as Panel, bi as Anchor, bj as Pill, bk as useViewportSize, bl as useSessionStorage, bm as t$i, bn as useDragControls, bo as useMotionValue, bp as Card, bq as CloseButton, br as ActionIconGroup, bs as Tabs, bt as TabsList, bu as TabsTab, bv as TabsPanel, bw as ScrollArea, bx as e$7, by as animate, bz as e$8, bA as VisuallyHidden, bB as useWindowEvent, bC as FocusTrap, bD as Title, bE as useFocusWithin, bF as useCombobox, bG as ComboboxOption, bH as Combobox, bI as ComboboxTarget, bJ as ComboboxDropdown, bK as ComboboxOptions, bL as ComboboxEmpty, bM as useHotkeys, bN as Grid, bO as GridCol, bP as autoUpdate, bQ as computePosition, bR as offset$1, bS as autoPlacement, bT as size, bU as hide, bV as useLocalStorage, bW as CardSection, bX as Spoiler, bY as n$4, bZ as ButtonGroup, b_ as useTimeout, b$ as useDebouncedCallback$1, c0 as useCustomCompareMemo, c1 as toRgba, c2 as t$j, c3 as mix, c4 as toHex, c5 as scale, c6 as t$k, c7 as e$9, c8 as n$5, c9 as applyEdgeChanges, ca as applyNodeChanges, cb as getViewportForBounds, cc as e$a, cd as t$l, ce as getHotkeyHandler, cf as n$6, cg as t$m, ch as e$b, ci as getBoundsOfRects, cj as boxToRect, ck as nodeToRect } from "./vendors.js";
 import { isTagColorSpecified, nonexhaustive, invariant as invariant$1, isStepEdgeId, extractStep, nonNullable, defaultTheme, ElementShapes, RichText, ancestorsFqn, nameFromFqn, isAncestor as isAncestor$1, ThemeColors, Queue, whereOperatorAsPredicate, GroupElementKind, BBox, getParallelStepsPrefix } from "@likec4/core";
 import { invariant, toArray, ifirst, ifilter, compareNaturalHierarchically, nonexhaustive as nonexhaustive$1, compareNatural, ifind, nonNullable as nonNullable$1, DefaultMap, isAncestor, sortParentsFirst, nameFromFqn as nameFromFqn$1, delay } from "@likec4/core/utils";
-import { I as IconCylinder, a as IconRectangularPrism, b as IconReorder, c as IconUser, d as IconDeviceMobile, e as IconBrowser, f as IconZoomScan, g as IconId, h as IconTransform, i as IconFileSymlink, j as IconSelector, k as IconCheck, l as IconChevronRight, m as IconFocusCentered, n as IconLayoutDashboard, o as IconAlertTriangle, p as IconLayoutCollage, q as IconLayoutBoardSplit, r as IconLayoutAlignLeft, s as IconLayoutAlignCenter, t as IconLayoutAlignRight, u as IconLayoutAlignTop, v as IconLayoutAlignMiddle, w as IconLayoutAlignBottom, x as IconRouteOff, y as IconMenu2, z as IconArrowLeft, A as IconArrowRight, B as IconSearch, C as IconLock, D as IconLockOpen2, E as IconCopy, F as IconLink, G as IconPlayerStopFilled, H as IconPlayerSkipBackFilled, J as IconPlayerSkipForwardFilled, K as IconPlayerPlayFilled, L as IconChevronDown, M as IconStack2, N as IconStarFilled, O as IconFolderFilled, P as IconX, Q as IconInfoCircle, R as IconTarget, S as IconChevronLeft, T as IconExternalLink, U as IconMenu, V as IconHelpCircle, W as IconArrowDownRight } from "./icons.js";
 import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize, RichText as RichText$1 } from "@likec4/core/types";
 import { computeRelationshipsView, treeFromElements } from "@likec4/core/compute-view/relationships";
 import { normalizeViewPath, VIEW_FOLDERS_SEPARATOR, modelConnection } from "@likec4/core/model";
@@ -31,8 +29,8 @@ function toName(code) {
   return toChar(x % 52) + name;
 }
 function toPhash(h, x) {
-  let i2 = x.length;
-  for (; i2; ) h = h * 33 ^ x.charCodeAt(--i2);
+  let i = x.length;
+  for (; i; ) h = h * 33 ^ x.charCodeAt(--i);
   return h;
 }
 function toHash(value) {
@@ -179,8 +177,8 @@ var wordRegex = /([A-Z])/g, msRegex = /^ms-/, hypenateProperty = memo((property)
 function splitProps(props, ...keys) {
   const descriptors = Object.getOwnPropertyDescriptors(props), dKeys = Object.keys(descriptors), split = (k) => {
     const clone = {};
-    for (let i2 = 0; i2 < k.length; i2++) {
-      const key2 = k[i2];
+    for (let i = 0; i < k.length; i++) {
+      const key2 = k[i];
       descriptors[key2] && (Object.defineProperty(clone, key2, descriptors[key2]), delete descriptors[key2]);
     }
     return clone;
@@ -207,8 +205,8 @@ function finalizeConditions(paths) {
   return paths.map((path) => conditions.has(path) ? path.replace(underscoreRegex, "") : conditionsSelectorRegex.test(path) ? `[${withoutSpace(path.trim())}]` : path);
 }
 function sortConditions(paths) {
-  return paths.sort((a2, b) => {
-    const aa = isCondition(a2), bb = isCondition(b);
+  return paths.sort((a, b) => {
+    const aa = isCondition(a), bb = isCondition(b);
     return aa && !bb ? 1 : !aa && bb ? -1 : 0;
   });
 }
@@ -238,9 +236,9 @@ const resolveShorthand = (prop) => shorthands.get(prop) || prop, context = {
 css.raw = (...styles) => mergeCss(...styles);
 const { mergeCss } = createMergeCss(context);
 function cx() {
-  let str = "", i2 = 0, arg;
-  for (; i2 < arguments.length; )
-    (arg = arguments[i2++]) && typeof arg == "string" && (str && (str += " "), str += arg);
+  let str = "", i = 0, arg;
+  for (; i < arguments.length; )
+    (arg = arguments[i++]) && typeof arg == "string" && (str && (str += " "), str += arg);
   return str;
 }
 const defaults = (conf) => ({
@@ -336,7 +334,445 @@ const FramerMotionConfig = ({
   var _a;
   const nonce = (_a = useMantineStyleNonce()) == null ? void 0 : _a();
   return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: !0, children: /* @__PURE__ */ jsx(MotionConfig, { reducedMotion, ...nonce && { nonce }, children }) });
-}, IconRendererContext = createContext(null);
+};
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var defaultAttributes = {
+  outline: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  },
+  filled: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    stroke: "none"
+  }
+};
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
+  const Component = forwardRef(
+    ({ color = "currentColor", size: size2 = 24, stroke = 2, title: title2, className, children, ...rest }, ref) => createElement(
+      "svg",
+      {
+        ref,
+        ...defaultAttributes[type],
+        width: size2,
+        height: size2,
+        className: ["tabler-icon", `tabler-icon-${iconName}`, className].join(" "),
+        ...type === "filled" ? {
+          fill: color
+        } : {
+          strokeWidth: stroke,
+          stroke: color
+        },
+        ...rest
+      },
+      [
+        title2 && createElement("title", { key: "svg-title" }, title2),
+        ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    )
+  );
+  return Component.displayName = `${iconNamePascal}`, Component;
+};
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$R = [["path", { d: "M12 9v4", key: "svg-0" }], ["path", { d: "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z", key: "svg-1" }], ["path", { d: "M12 16h.01", key: "svg-2" }]], IconAlertTriangle = createReactComponent("outline", "alert-triangle", "AlertTriangle", __iconNode$R);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$Q = [["path", { d: "M7 7l10 10", key: "svg-0" }], ["path", { d: "M17 8l0 9l-9 0", key: "svg-1" }]], IconArrowDownRight = createReactComponent("outline", "arrow-down-right", "ArrowDownRight", __iconNode$Q);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$P = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M5 12l6 6", key: "svg-1" }], ["path", { d: "M5 12l6 -6", key: "svg-2" }]], IconArrowLeft = createReactComponent("outline", "arrow-left", "ArrowLeft", __iconNode$P);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$O = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M13 18l6 -6", key: "svg-1" }], ["path", { d: "M13 6l6 6", key: "svg-2" }]], IconArrowRight = createReactComponent("outline", "arrow-right", "ArrowRight", __iconNode$O);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$N = [["path", { d: "M4 8h16", key: "svg-0" }], ["path", { d: "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", key: "svg-1" }], ["path", { d: "M8 4v4", key: "svg-2" }]], IconBrowser = createReactComponent("outline", "browser", "Browser", __iconNode$N);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$M = [["path", { d: "M5 12l5 5l10 -10", key: "svg-0" }]], IconCheck = createReactComponent("outline", "check", "Check", __iconNode$M);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$L = [["path", { d: "M6 9l6 6l6 -6", key: "svg-0" }]], IconChevronDown = createReactComponent("outline", "chevron-down", "ChevronDown", __iconNode$L);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$K = [["path", { d: "M15 6l-6 6l6 6", key: "svg-0" }]], IconChevronLeft = createReactComponent("outline", "chevron-left", "ChevronLeft", __iconNode$K);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$J = [["path", { d: "M9 6l6 6l-6 6", key: "svg-0" }]], IconChevronRight = createReactComponent("outline", "chevron-right", "ChevronRight", __iconNode$J);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$I = [["path", { d: "M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z", key: "svg-0" }], ["path", { d: "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", key: "svg-1" }]], IconCopy = createReactComponent("outline", "copy", "Copy", __iconNode$I);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$H = [["path", { d: "M12 6m-7 0a7 3 0 1 0 14 0a7 3 0 1 0 -14 0", key: "svg-0" }], ["path", { d: "M5 6v12c0 1.657 3.134 3 7 3s7 -1.343 7 -3v-12", key: "svg-1" }]], IconCylinder = createReactComponent("outline", "cylinder", "Cylinder", __iconNode$H);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$G = [["path", { d: "M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z", key: "svg-0" }], ["path", { d: "M11 4h2", key: "svg-1" }], ["path", { d: "M12 17v.01", key: "svg-2" }]], IconDeviceMobile = createReactComponent("outline", "device-mobile", "DeviceMobile", __iconNode$G);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$F = [["path", { d: "M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6", key: "svg-0" }], ["path", { d: "M11 13l9 -9", key: "svg-1" }], ["path", { d: "M15 4h5v5", key: "svg-2" }]], IconExternalLink = createReactComponent("outline", "external-link", "ExternalLink", __iconNode$F);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$E = [["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-0" }], ["path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z", key: "svg-1" }], ["path", { d: "M10 13l-1 2l1 2", key: "svg-2" }], ["path", { d: "M14 13l1 2l-1 2", key: "svg-3" }]], IconFileCode = createReactComponent("outline", "file-code", "FileCode", __iconNode$E);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$D = [["path", { d: "M4 21v-4a3 3 0 0 1 3 -3h5", key: "svg-0" }], ["path", { d: "M9 17l3 -3l-3 -3", key: "svg-1" }], ["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-2" }], ["path", { d: "M5 11v-6a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-9.5", key: "svg-3" }]], IconFileSymlink = createReactComponent("outline", "file-symlink", "FileSymlink", __iconNode$D);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$C = [["path", { d: "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", key: "svg-0" }], ["path", { d: "M4 8v-2a2 2 0 0 1 2 -2h2", key: "svg-1" }], ["path", { d: "M4 16v2a2 2 0 0 0 2 2h2", key: "svg-2" }], ["path", { d: "M16 4h2a2 2 0 0 1 2 2v2", key: "svg-3" }], ["path", { d: "M16 20h2a2 2 0 0 0 2 -2v-2", key: "svg-4" }]], IconFocusCentered = createReactComponent("outline", "focus-centered", "FocusCentered", __iconNode$C);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$B = [["path", { d: "M5 19l2.757 -7.351a1 1 0 0 1 .936 -.649h12.307a1 1 0 0 1 .986 1.164l-.996 5.211a2 2 0 0 1 -1.964 1.625h-14.026a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2", key: "svg-0" }]], IconFolderOpen = createReactComponent("outline", "folder-open", "FolderOpen", __iconNode$B);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$A = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 16v.01", key: "svg-1" }], ["path", { d: "M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483", key: "svg-2" }]], IconHelpCircle = createReactComponent("outline", "help-circle", "HelpCircle", __iconNode$A);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$z = [["path", { d: "M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z", key: "svg-0" }], ["path", { d: "M9 10m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", key: "svg-1" }], ["path", { d: "M15 8l2 0", key: "svg-2" }], ["path", { d: "M15 12l2 0", key: "svg-3" }], ["path", { d: "M7 16l10 0", key: "svg-4" }]], IconId = createReactComponent("outline", "id", "Id", __iconNode$z);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$y = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 9h.01", key: "svg-1" }], ["path", { d: "M11 12h1v4h1", key: "svg-2" }]], IconInfoCircle = createReactComponent("outline", "info-circle", "InfoCircle", __iconNode$y);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$x = [["path", { d: "M4 20l16 0", key: "svg-0" }], ["path", { d: "M9 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z", key: "svg-1" }]], IconLayoutAlignBottom = createReactComponent("outline", "layout-align-bottom", "LayoutAlignBottom", __iconNode$x);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$w = [["path", { d: "M12 4l0 5", key: "svg-0" }], ["path", { d: "M12 15l0 5", key: "svg-1" }], ["path", { d: "M6 9m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z", key: "svg-2" }]], IconLayoutAlignCenter = createReactComponent("outline", "layout-align-center", "LayoutAlignCenter", __iconNode$w);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$v = [["path", { d: "M4 4l0 16", key: "svg-0" }], ["path", { d: "M8 9m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z", key: "svg-1" }]], IconLayoutAlignLeft = createReactComponent("outline", "layout-align-left", "LayoutAlignLeft", __iconNode$v);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$u = [["path", { d: "M4 12l5 0", key: "svg-0" }], ["path", { d: "M15 12l5 0", key: "svg-1" }], ["path", { d: "M9 6m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z", key: "svg-2" }]], IconLayoutAlignMiddle = createReactComponent("outline", "layout-align-middle", "LayoutAlignMiddle", __iconNode$u);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$t = [["path", { d: "M20 4l0 16", key: "svg-0" }], ["path", { d: "M4 9m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z", key: "svg-1" }]], IconLayoutAlignRight = createReactComponent("outline", "layout-align-right", "LayoutAlignRight", __iconNode$t);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$s = [["path", { d: "M4 4l16 0", key: "svg-0" }], ["path", { d: "M9 8m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z", key: "svg-1" }]], IconLayoutAlignTop = createReactComponent("outline", "layout-align-top", "LayoutAlignTop", __iconNode$s);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$r = [["path", { d: "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", key: "svg-0" }], ["path", { d: "M4 12h8", key: "svg-1" }], ["path", { d: "M12 15h8", key: "svg-2" }], ["path", { d: "M12 9h8", key: "svg-3" }], ["path", { d: "M12 4v16", key: "svg-4" }]], IconLayoutBoardSplit = createReactComponent("outline", "layout-board-split", "LayoutBoardSplit", __iconNode$r);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$q = [["path", { d: "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", key: "svg-0" }], ["path", { d: "M10 4l4 16", key: "svg-1" }], ["path", { d: "M12 12l-8 2", key: "svg-2" }]], IconLayoutCollage = createReactComponent("outline", "layout-collage", "LayoutCollage", __iconNode$q);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$p = [["path", { d: "M5 4h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1", key: "svg-0" }], ["path", { d: "M5 16h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1", key: "svg-1" }], ["path", { d: "M15 12h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1", key: "svg-2" }], ["path", { d: "M15 4h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1", key: "svg-3" }]], IconLayoutDashboard = createReactComponent("outline", "layout-dashboard", "LayoutDashboard", __iconNode$p);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$o = [["path", { d: "M9 15l6 -6", key: "svg-0" }], ["path", { d: "M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464", key: "svg-1" }], ["path", { d: "M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463", key: "svg-2" }]], IconLink = createReactComponent("outline", "link", "Link", __iconNode$o);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$n = [["path", { d: "M3 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z", key: "svg-0" }], ["path", { d: "M9 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0", key: "svg-1" }], ["path", { d: "M13 11v-4a4 4 0 1 1 8 0v4", key: "svg-2" }]], IconLockOpen2 = createReactComponent("outline", "lock-open-2", "LockOpen2", __iconNode$n);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$m = [["path", { d: "M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z", key: "svg-0" }], ["path", { d: "M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0", key: "svg-1" }], ["path", { d: "M8 11v-4a4 4 0 1 1 8 0v4", key: "svg-2" }]], IconLock = createReactComponent("outline", "lock", "Lock", __iconNode$m);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$l = [["path", { d: "M4 6l16 0", key: "svg-0" }], ["path", { d: "M4 12l16 0", key: "svg-1" }], ["path", { d: "M4 18l16 0", key: "svg-2" }]], IconMenu2 = createReactComponent("outline", "menu-2", "Menu2", __iconNode$l);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$k = [["path", { d: "M4 8l16 0", key: "svg-0" }], ["path", { d: "M4 16l16 0", key: "svg-1" }]], IconMenu = createReactComponent("outline", "menu", "Menu", __iconNode$k);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$j = [["path", { d: "M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z", key: "svg-0" }], ["path", { d: "M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2", key: "svg-1" }], ["path", { d: "M19 11h2m-1 -1v2", key: "svg-2" }]], IconMoonStars = createReactComponent("outline", "moon-stars", "MoonStars", __iconNode$j);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$i = [["path", { d: "M21 14.008v-5.018a1.98 1.98 0 0 0 -1 -1.717l-4 -2.008a2.016 2.016 0 0 0 -2 0l-10 5.008c-.619 .355 -1 1.01 -1 1.718v5.018c0 .709 .381 1.363 1 1.717l4 2.008a2.016 2.016 0 0 0 2 0l10 -5.008c.619 -.355 1 -1.01 1 -1.718z", key: "svg-0" }], ["path", { d: "M9 21v-7.5", key: "svg-1" }], ["path", { d: "M9 13.5l11.5 -5.5", key: "svg-2" }], ["path", { d: "M3.5 11l5.5 2.5", key: "svg-3" }]], IconRectangularPrism = createReactComponent("outline", "rectangular-prism", "RectangularPrism", __iconNode$i);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$h = [["path", { d: "M3 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", key: "svg-0" }], ["path", { d: "M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", key: "svg-1" }], ["path", { d: "M17 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", key: "svg-2" }], ["path", { d: "M5 11v-3a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v3", key: "svg-3" }], ["path", { d: "M16.5 8.5l2.5 2.5l2.5 -2.5", key: "svg-4" }]], IconReorder = createReactComponent("outline", "reorder", "Reorder", __iconNode$h);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$g = [["path", { d: "M6 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", key: "svg-0" }], ["path", { d: "M18 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", key: "svg-1" }], ["path", { d: "M12 19h4.5c.71 0 1.372 -.212 1.924 -.576m1.545 -2.459a3.5 3.5 0 0 0 -3.469 -3.965h-.499m-4 0h-3.501a3.5 3.5 0 0 1 -2.477 -5.972m2.477 -1.028h3.5", key: "svg-2" }], ["path", { d: "M3 3l18 18", key: "svg-3" }]], IconRouteOff = createReactComponent("outline", "route-off", "RouteOff", __iconNode$g);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$f = [["path", { d: "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0", key: "svg-0" }], ["path", { d: "M21 21l-6 -6", key: "svg-1" }]], IconSearch = createReactComponent("outline", "search", "Search", __iconNode$f);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$e = [["path", { d: "M8 9l4 -4l4 4", key: "svg-0" }], ["path", { d: "M16 15l-4 4l-4 -4", key: "svg-1" }]], IconSelector = createReactComponent("outline", "selector", "Selector", __iconNode$e);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$d = [["path", { d: "M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-0" }], ["path", { d: "M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-1" }], ["path", { d: "M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-2" }], ["path", { d: "M8.7 10.7l6.6 -3.4", key: "svg-3" }], ["path", { d: "M8.7 13.3l6.6 3.4", key: "svg-4" }]], IconShare = createReactComponent("outline", "share", "Share", __iconNode$d);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$c = [["path", { d: "M12 4l-8 4l8 4l8 -4l-8 -4", key: "svg-0" }], ["path", { d: "M4 12l8 4l8 -4", key: "svg-1" }], ["path", { d: "M4 16l8 4l8 -4", key: "svg-2" }]], IconStack2 = createReactComponent("outline", "stack-2", "Stack2", __iconNode$c);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$b = [["path", { d: "M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", key: "svg-0" }], ["path", { d: "M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7", key: "svg-1" }]], IconSun = createReactComponent("outline", "sun", "Sun", __iconNode$b);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$a = [["path", { d: "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", key: "svg-0" }], ["path", { d: "M12 12m-5 0a5 5 0 1 0 10 0a5 5 0 1 0 -10 0", key: "svg-1" }], ["path", { d: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", key: "svg-2" }]], IconTarget = createReactComponent("outline", "target", "Target", __iconNode$a);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$9 = [["path", { d: "M3 6a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-0" }], ["path", { d: "M21 11v-3a2 2 0 0 0 -2 -2h-6l3 3m0 -6l-3 3", key: "svg-1" }], ["path", { d: "M3 13v3a2 2 0 0 0 2 2h6l-3 -3m0 6l3 -3", key: "svg-2" }], ["path", { d: "M15 18a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-3" }]], IconTransform = createReactComponent("outline", "transform", "Transform", __iconNode$9);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$8 = [["path", { d: "M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0", key: "svg-0" }], ["path", { d: "M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2", key: "svg-1" }]], IconUser = createReactComponent("outline", "user", "User", __iconNode$8);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$7 = [["path", { d: "M18 6l-12 12", key: "svg-0" }], ["path", { d: "M6 6l12 12", key: "svg-1" }]], IconX = createReactComponent("outline", "x", "X", __iconNode$7);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$6 = [["path", { d: "M4 8v-2a2 2 0 0 1 2 -2h2", key: "svg-0" }], ["path", { d: "M4 16v2a2 2 0 0 0 2 2h2", key: "svg-1" }], ["path", { d: "M16 4h2a2 2 0 0 1 2 2v2", key: "svg-2" }], ["path", { d: "M16 20h2a2 2 0 0 0 2 -2v-2", key: "svg-3" }], ["path", { d: "M8 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-4" }], ["path", { d: "M16 16l-2.5 -2.5", key: "svg-5" }]], IconZoomScan = createReactComponent("outline", "zoom-scan", "ZoomScan", __iconNode$6);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$5 = [["path", { d: "M9 3a1 1 0 0 1 .608 .206l.1 .087l2.706 2.707h6.586a3 3 0 0 1 2.995 2.824l.005 .176v8a3 3 0 0 1 -2.824 2.995l-.176 .005h-14a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-11a3 3 0 0 1 2.824 -2.995l.176 -.005h4z", key: "svg-0" }]], IconFolderFilled = createReactComponent("filled", "folder-filled", "FolderFilled", __iconNode$5);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$4 = [["path", { d: "M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z", key: "svg-0" }]], IconPlayerPlayFilled = createReactComponent("filled", "player-play-filled", "PlayerPlayFilled", __iconNode$4);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$3 = [["path", { d: "M19.496 4.136l-12 7a1 1 0 0 0 0 1.728l12 7a1 1 0 0 0 1.504 -.864v-14a1 1 0 0 0 -1.504 -.864z", key: "svg-0" }], ["path", { d: "M4 4a1 1 0 0 1 .993 .883l.007 .117v14a1 1 0 0 1 -1.993 .117l-.007 -.117v-14a1 1 0 0 1 1 -1z", key: "svg-1" }]], IconPlayerSkipBackFilled = createReactComponent("filled", "player-skip-back-filled", "PlayerSkipBackFilled", __iconNode$3);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$2 = [["path", { d: "M3 5v14a1 1 0 0 0 1.504 .864l12 -7a1 1 0 0 0 0 -1.728l-12 -7a1 1 0 0 0 -1.504 .864z", key: "svg-0" }], ["path", { d: "M20 4a1 1 0 0 1 .993 .883l.007 .117v14a1 1 0 0 1 -1.993 .117l-.007 -.117v-14a1 1 0 0 1 1 -1z", key: "svg-1" }]], IconPlayerSkipForwardFilled = createReactComponent("filled", "player-skip-forward-filled", "PlayerSkipForwardFilled", __iconNode$2);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$1 = [["path", { d: "M17 4h-10a3 3 0 0 0 -3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3 -3v-10a3 3 0 0 0 -3 -3z", key: "svg-0" }]], IconPlayerStopFilled = createReactComponent("filled", "player-stop-filled", "PlayerStopFilled", __iconNode$1);
+/**
+ * @license @tabler/icons-react v3.34.1 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode = [["path", { d: "M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z", key: "svg-0" }]], IconStarFilled = createReactComponent("filled", "star-filled", "StarFilled", __iconNode), IconRendererContext = createContext(null);
 function IconRendererProvider({
   value,
   children
@@ -404,7 +840,7 @@ const HandlerNames = [
   "onChange",
   "onCanvasDblClick"
 ], DiagramEventHandlersReactContext = createContext({
-  ...l(HandlerNames, (name) => [name, null]),
+  ...t(HandlerNames, (name) => [name, null]),
   handlersRef: {
     current: {}
   }
@@ -413,8 +849,8 @@ function DiagramEventHandlers({
   handlers,
   children
 }) {
-  const handlersRef = useSyncedRef(handlers), deps = HandlerNames.map((name) => t(handlers[name])), value = useMemo(() => ({
-    ...l(HandlerNames, (name) => handlersRef.current[name] ? [name, (...args) => {
+  const handlersRef = useSyncedRef(handlers), deps = HandlerNames.map((name) => e(handlers[name])), value = useMemo(() => ({
+    ...t(HandlerNames, (name) => handlersRef.current[name] ? [name, (...args) => {
       var _a, _b;
       return (_b = (_a = handlersRef.current)[name]) == null ? void 0 : _b.call(_a, ...args);
     }] : [name, null]),
@@ -445,7 +881,7 @@ const FeatureNames = [
    */
   "Vscode",
   "ElementTags"
-], AllDisabled = l(
+], AllDisabled = t(
   FeatureNames,
   (name) => [`enable${name}`, !1]
 ), DiagramFeaturesContext = createContext(AllDisabled), validate = (features) => {
@@ -706,14 +1142,14 @@ const TagStylesContext = createContext({}), radixColors = [
 function TagStylesProvider({ children, rootSelector }) {
   const tags = useLikeC4Specification().tags, { specs, stylesheet } = useDeepCompareMemo(() => tags ? {
     specs: tags,
-    stylesheet: C(
-      t$1(tags),
-      u(([tag, spec]) => [
+    stylesheet: t$1(
+      t$4(tags),
+      t$3(([tag, spec]) => [
         `:is(${rootSelector} [data-likec4-tag="${tag}"]) {`,
         generateColorVars(spec),
         "}"
       ]),
-      r(`
+      t$2(`
 `)
     )
   } : { specs: {}, stylesheet: "" }, [tags, rootSelector]);
@@ -762,14 +1198,18 @@ function useRootContainer() {
 const [
   ControlsCustomLayoutProvider,
   useControlsCustomLayout
-] = createOptionalContext(null), noop = () => {
+] = createOptionalContext(null);
+function useId() {
+  return useId$1().replace("mantine-", "likec4-");
+}
+const noop = () => {
 }, depsShallowEqual = (d1, d2) => {
   if (d1 === d2)
     return !0;
   if (d1.length !== d2.length)
     return !1;
-  for (const [i2, element] of d1.entries())
-    if (element !== d2[i2] && !shallowEqual(element, d2[i2]))
+  for (const [i, element] of d1.entries())
+    if (element !== d2[i] && !shallowEqual(element, d2[i]))
       return !1;
   return !0;
 };
@@ -799,7 +1239,7 @@ function useIsZoomTooSmall() {
 }
 function getDevicePixelRatio() {
   const dpr = typeof window < "u" && typeof window.devicePixelRatio == "number" ? window.devicePixelRatio : 1;
-  return u$1(Math.floor(dpr), {
+  return t$5(Math.floor(dpr), {
     min: 1,
     max: 4
   });
@@ -814,21 +1254,21 @@ function bezierControlPoints(diagramEdge) {
   const handles = [
     // start
   ];
-  for (; i(bezierPoints, 3); ) {
+  for (; t$6(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((t2) => {
-      const { x, y: y2 } = bezier.get(t2);
+      const { x, y } = bezier.get(t2);
       handles.push({
         x: Math.round(x),
-        y: Math.round(y2)
+        y: Math.round(y)
       });
     }), bezierPoints = rest, start = end;
   }
   return invariant(bezierPoints.length === 0, "all points should be consumed"), handles;
 }
-const isClose = (a2, b) => Math.abs(a2 - b) < 3.1;
-function isSamePoint(a2, b) {
-  const [ax, ay] = o(a2) ? a2 : [a2.x, a2.y], [bx, by] = o(b) ? b : [b.x, b.y];
+const isClose = (a, b) => Math.abs(a - b) < 3.1;
+function isSamePoint(a, b) {
+  const [ax, ay] = e$1(a) ? a : [a.x, a.y], [bx, by] = e$1(b) ? b : [b.x, b.y];
   return isClose(ax, bx) && isClose(ay, by);
 }
 function stopPropagation(e2) {
@@ -845,7 +1285,7 @@ function bezierPath(bezierSpline) {
   let [start, ...points] = bezierSpline;
   invariant(start, "start should be defined");
   let path = `M ${start[0]},${start[1]}`;
-  for (; i(points, 3); ) {
+  for (; t$6(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;
   }
@@ -898,7 +1338,7 @@ var Base;
   }
   Base2.setHovered = setHovered;
   function _setData(value, state) {
-    return j(value.data, state) ? value : {
+    return n(value.data, state) ? value : {
       ...value,
       data: {
         ...value.data,
@@ -986,9 +1426,9 @@ const BaseXYFlow = ({
       selectNodesOnDrag: !1,
       onNodesChange,
       onEdgesChange,
-      onMoveEnd: useCallbackRef((event, { x, y: y2, zoom }) => {
-        const roundedX = roundDpr(x), roundedY = roundDpr(y2);
-        (x !== roundedX || y2 !== roundedY) && xystore.setState({ transform: [roundedX, roundedY, zoom] }), onMoveEnd == null || onMoveEnd(event, { x: roundedX, y: roundedY, zoom });
+      onMoveEnd: useCallbackRef((event, { x, y, zoom }) => {
+        const roundedX = roundDpr(x), roundedY = roundDpr(y);
+        (x !== roundedX || y !== roundedY) && xystore.setState({ transform: [roundedX, roundedY, zoom] }), onMoveEnd == null || onMoveEnd(event, { x: roundedX, y: roundedY, zoom });
       }),
       onNodeMouseEnter: useCallbackRef((_event, node2) => {
         if (onNodeMouseEnter) {
@@ -1728,18 +2168,18 @@ function CompoundNodeContainer({
   style: style2,
   ...rest
 }) {
-  let opacity = u$1(data.style.opacity ?? 100, {
+  let opacity = t$5(data.style.opacity ?? 100, {
     min: 0,
     max: 100
   });
-  const isTransparent = opacity < 99, MIN_OPACITY = 65, borderOpacity = MIN_OPACITY + u$1((100 - MIN_OPACITY) * (opacity / 100), {
+  const isTransparent = opacity < 99, MIN_OPACITY = 65, borderOpacity = MIN_OPACITY + t$5((100 - MIN_OPACITY) * (opacity / 100), {
     min: 0,
     max: 100 - MIN_OPACITY
   }), compoundClass = compoundNode({
     isTransparent,
     inverseColor: opacity < 60,
     borderStyle: data.style.border ?? (isTransparent ? "dashed" : "none")
-  }), depth = u$1(data.depth ?? 1, {
+  }), depth = t$5(data.depth ?? 1, {
     min: 1,
     max: 5
   });
@@ -1782,7 +2222,7 @@ function CompoundTitle({ id, data }) {
     /* @__PURE__ */ jsx(Text, { component: "h3", className: "likec4-compound-title", truncate: "end", children: data.title })
   ] });
 }
-const isSame = (a2, b) => Math.abs(a2 - b) < 2.5, edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? !1, next.selected ?? !1) && deepEqual(prev.animated ?? !1, next.animated ?? !1) && deepEqual(prev.source, next.source) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.target, next.target) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.targetPosition, next.targetPosition) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data, next.data);
+const isSame = (a, b) => Math.abs(a - b) < 2.5, edgePropsEqual = (prev, next) => prev.id === next.id && deepEqual(prev.selected ?? !1, next.selected ?? !1) && deepEqual(prev.animated ?? !1, next.animated ?? !1) && deepEqual(prev.source, next.source) && deepEqual(prev.sourceHandleId ?? null, next.sourceHandleId ?? null) && deepEqual(prev.sourcePosition, next.sourcePosition) && deepEqual(prev.target, next.target) && deepEqual(prev.targetHandleId ?? null, next.targetHandleId ?? null) && deepEqual(prev.targetPosition, next.targetPosition) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data, next.data);
 function customEdge(Edge) {
   return memo$1(Edge, edgePropsEqual);
 }
@@ -1941,7 +2381,7 @@ const EdgeLabel = forwardRef(({
       children: [
         stepNum !== null && /* @__PURE__ */ jsx(Box, { className: classes2.stepNumber, children: stepNum }),
         /* @__PURE__ */ jsxs(Box, { className: classes2.labelContents, children: [
-          n(label2) && /* @__PURE__ */ jsx(
+          e$2(label2) && /* @__PURE__ */ jsx(
             Box,
             {
               className: cx(
@@ -1953,7 +2393,7 @@ const EdgeLabel = forwardRef(({
               children: label2
             }
           ),
-          n(technology) && /* @__PURE__ */ jsx(Box, { className: classes2.labelTechnology, children: "[ " + technology + " ]" }),
+          e$2(technology) && /* @__PURE__ */ jsx(Box, { className: classes2.labelTechnology, children: "[ " + technology + " ]" }),
           children
         ] })
       ]
@@ -1963,7 +2403,7 @@ const EdgeLabel = forwardRef(({
 EdgeLabel.displayName = "EdgeLabel";
 const toCssVarValue = (value) => {
   if (value !== void 0)
-    return e(value) ? `${Math.round(value)}px` : value;
+    return e$3(value) ? `${Math.round(value)}px` : value;
 };
 function EdgeLabelContainer({
   edgeProps: {
@@ -1992,12 +2432,6 @@ function EdgeLabelContainer({
     "div",
     {
       className: cx(
-        css({
-          display: {
-            _reduceGraphicsOnPan: "none",
-            _smallZoom: "none"
-          }
-        }),
         "nodrag nopan",
         "likec4-edge-label-container",
         className
@@ -2324,7 +2758,7 @@ function ElementActionButtons({
   },
   buttons: buttons2
 }) {
-  const id = useId(), zoomTooSmall = useIsZoomTooSmall();
+  const id = useId$1(), zoomTooSmall = useIsZoomTooSmall();
   return !buttons2.length || zoomTooSmall ? null : /* @__PURE__ */ jsx(Box, { className: container$4, children: /* @__PURE__ */ jsx(
     MotionDiv,
     {
@@ -2391,7 +2825,7 @@ function ElementDetailsButton({
   icon: icon2,
   onClick
 }) {
-  const id = useId();
+  const id = useId$1();
   return /* @__PURE__ */ jsx(Box, { className: cx(container$3, "details-button"), children: /* @__PURE__ */ jsx(
     ActionIcon$1,
     {
@@ -2544,29 +2978,29 @@ const ElementNodeContainer = forwardRef(({
 });
 ElementNodeContainer.displayName = "ElementNodeContainer";
 class VectorImpl {
-  constructor(x, y2) {
-    this.x = x, this.y = y2;
+  constructor(x, y) {
+    this.x = x, this.y = y;
   }
   static create(position) {
     return new VectorImpl(position.x, position.y);
   }
-  static add(a2, b) {
-    return { x: a2.x + b.x, y: a2.y + b.y };
+  static add(a, b) {
+    return { x: a.x + b.x, y: a.y + b.y };
   }
-  static sub(a2, b) {
-    return { x: a2.x - b.x, y: a2.y - b.y };
+  static sub(a, b) {
+    return { x: a.x - b.x, y: a.y - b.y };
   }
-  static mul(a2, b) {
-    return { x: a2.x * b, y: a2.y * b };
+  static mul(a, b) {
+    return { x: a.x * b, y: a.y * b };
   }
-  static dot(a2, b) {
-    return a2.x * b.x + a2.y * b.y;
+  static dot(a, b) {
+    return a.x * b.x + a.y * b.y;
   }
-  static cross(a2, b) {
-    return new VectorImpl(a2.y * b.x - a2.x * b.y, a2.x * b.y - a2.y * b.x);
+  static cross(a, b) {
+    return new VectorImpl(a.y * b.x - a.x * b.y, a.x * b.y - a.y * b.x);
   }
-  static setLength(a2, length) {
-    return vector(a2).setLength(length);
+  static setLength(a, length) {
+    return vector(a).setLength(length);
   }
   add(b) {
     return new VectorImpl(this.x + b.x, this.y + b.y);
@@ -2966,9 +3400,9 @@ function ElementTitle({ id, data, iconSize: iconSize2 }) {
     },
     className: elementNodeIcon()
   }), classes2 = elementNodeData({
-    hasIcon: n(elementIcon2),
+    hasIcon: e$2(elementIcon2),
     hasDescription: !!((_a = data.description) != null && _a.nonEmpty),
-    hasTechnology: !n$1(data.technology ?? "")
+    hasTechnology: !e$4(data.technology ?? "")
   }), size2 = nodeSizes(data.style).size, isSmOrXs = size2 === "sm" || size2 === "xs";
   return /* @__PURE__ */ jsxs(
     Box,
@@ -2977,7 +3411,7 @@ function ElementTitle({ id, data, iconSize: iconSize2 }) {
         classes2.root,
         "likec4-element"
       ),
-      style: e(iconSize2) ? {
+      style: e$3(iconSize2) ? {
         // @ts-ignore
         "--likec4-icon-size": `${iconSize2}px`
       } : void 0,
@@ -3062,17 +3496,17 @@ const style = {
   }
 });
 function getNodeCenter(node2) {
-  const { width, height } = getNodeDimensions(node2), { x, y: y2 } = node2.internals.positionAbsolute;
+  const { width, height } = getNodeDimensions(node2), { x, y } = node2.internals.positionAbsolute;
   return {
     x: x + width / 2,
-    y: y2 + height / 2
+    y: y + height / 2
   };
 }
 function getNodeIntersectionFromCenterToPoint(intersectionNode, target, nodeMargin = 0) {
   const nodeCenter = getNodeCenter(intersectionNode), { width, height } = getNodeDimensions(intersectionNode), v = new VectorImpl(target.x, target.y).sub(nodeCenter), xScale = (nodeMargin + (width || 0) / 2) / v.x, yScale = (nodeMargin + (height || 0) / 2) / v.y, scale2 = Math.min(Math.abs(xScale), Math.abs(yScale));
   return vector(v).mul(scale2).add(nodeCenter);
 }
-const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y), RelationshipEdge$2 = customEdge((props) => {
+const curve = d3line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y), RelationshipEdge$2 = customEdge((props) => {
   const [isControlPointDragging, setIsControlPointDragging] = useState(!1), xyflowStore = useXYStoreApi(), xyflow2 = useXYFlow(), diagram = useDiagram(), {
     enableNavigateTo,
     enableEdgeEditing
@@ -3096,20 +3530,20 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
       ...data
     },
     style: style2 = {}
-  } = props, navigateTo = enableNavigateTo ? data.navigateTo : void 0, sourceNode = nonNullable(useXYInternalNode(source), `source node ${source} not found`), targetNode = nonNullable(useXYInternalNode(target), `target node ${target} not found`), isModified = n(data.controlPoints) || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.position) || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.position);
+  } = props, navigateTo = enableNavigateTo ? data.navigateTo : void 0, sourceNode = nonNullable(useXYInternalNode(source), `source node ${source} not found`), targetNode = nonNullable(useXYInternalNode(target), `target node ${target} not found`), isModified = e$2(data.controlPoints) || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.position) || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.position);
   let controlPoints = data.controlPoints ?? bezierControlPoints(props.data), edgePath;
   if (isModified) {
     const sourceCenterPos = { x: sourceX, y: sourceY }, targetCenterPos = { x: targetX, y: targetY }, nodeMargin = 6, points2 = data.dir === "back" ? [
       targetCenterPos,
-      getNodeIntersectionFromCenterToPoint(targetNode, d(controlPoints) ?? sourceCenterPos, nodeMargin),
+      getNodeIntersectionFromCenterToPoint(targetNode, n$1(controlPoints) ?? sourceCenterPos, nodeMargin),
       ...controlPoints,
-      getNodeIntersectionFromCenterToPoint(sourceNode, a(controlPoints) ?? targetCenterPos, nodeMargin),
+      getNodeIntersectionFromCenterToPoint(sourceNode, t$7(controlPoints) ?? targetCenterPos, nodeMargin),
       sourceCenterPos
     ] : [
       sourceCenterPos,
-      getNodeIntersectionFromCenterToPoint(sourceNode, d(controlPoints) ?? targetCenterPos, nodeMargin),
+      getNodeIntersectionFromCenterToPoint(sourceNode, n$1(controlPoints) ?? targetCenterPos, nodeMargin),
       ...controlPoints,
-      getNodeIntersectionFromCenterToPoint(targetNode, a(controlPoints) ?? sourceCenterPos, nodeMargin),
+      getNodeIntersectionFromCenterToPoint(targetNode, t$7(controlPoints) ?? sourceCenterPos, nodeMargin),
       targetCenterPos
     ];
     edgePath = nonNullable(curve(points2));
@@ -3154,10 +3588,10 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
       };
       if (!isSamePoint(pointer, clientPoint)) {
         setIsControlPointDragging(!0), hasMoved || (diagram.send({ type: "xyflow.edgeEditingStarted", edge: props.data }), hasMoved = !0), pointer = clientPoint;
-        const { x, y: y2 } = xyflow2.screenToFlowPosition(pointer, { snapToGrid: !1 }), cp = controlPoints.slice();
+        const { x, y } = xyflow2.screenToFlowPosition(pointer, { snapToGrid: !1 }), cp = controlPoints.slice();
         cp[index2] = {
           x: roundDpr(x),
-          y: roundDpr(y2)
+          y: roundDpr(y)
         }, diagram.updateEdgeData(id, {
           controlPoints: cp
         });
@@ -3215,11 +3649,11 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
     let pointer = { x: e2.clientX, y: e2.clientY };
     const newPoint = vector(xyflow2.screenToFlowPosition(pointer, { snapToGrid: !1 }));
     let insertionIndex = 0, minDistance = 1 / 0;
-    for (let i2 = 0; i2 < points2.length - 1; i2++) {
-      const a2 = points2[i2], b = points2[i2 + 1], fromCurrentToNext = b.sub(a2), fromCurrentToNew = newPoint.sub(a2), fromNextToNew = newPoint.sub(b);
+    for (let i = 0; i < points2.length - 1; i++) {
+      const a = points2[i], b = points2[i + 1], fromCurrentToNext = b.sub(a), fromCurrentToNew = newPoint.sub(a), fromNextToNew = newPoint.sub(b);
       if (fromCurrentToNext.dot(fromCurrentToNew) * fromCurrentToNext.dot(fromNextToNew) < 0) {
         const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew).abs() / fromCurrentToNext.abs());
-        distanceToEdge < minDistance && (minDistance = distanceToEdge, insertionIndex = i2);
+        distanceToEdge < minDistance && (minDistance = distanceToEdge, insertionIndex = i);
       }
     }
     const newControlPoints = controlPoints.slice() || [];
@@ -3276,16 +3710,16 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
             onContextMenu: (e2) => {
               e2.preventDefault(), e2.stopPropagation();
             },
-            children: controlPoints.map((p2, i2) => /* @__PURE__ */ jsx(
+            children: controlPoints.map((p, i) => /* @__PURE__ */ jsx(
               "circle",
               {
-                onPointerDown: (e2) => onControlPointerDown(i2, e2),
+                onPointerDown: (e2) => onControlPointerDown(i, e2),
                 className: cx("nodrag nopan", controlPoint),
-                cx: Math.round(p2.x),
-                cy: Math.round(p2.y),
+                cx: Math.round(p.x),
+                cy: Math.round(p.y),
                 r: 3
               },
-              "controlPoints" + edgeId + "#" + i2
+              "controlPoints" + edgeId + "#" + i
             ))
           }
         )
@@ -3324,7 +3758,7 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
       }
     }), buttons22;
   }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props.id]);
-  return extraButtons && i(extraButtons, 1) && (buttons2 = [...buttons2, ...extraButtons]), /* @__PURE__ */ jsx(ElementActionButtons, { ...props, buttons: buttons2 });
+  return extraButtons && t$6(extraButtons, 1) && (buttons2 = [...buttons2, ...extraButtons]), /* @__PURE__ */ jsx(ElementActionButtons, { ...props, buttons: buttons2 });
 }, DeploymentElementActions = ({
   extraButtons,
   ...props
@@ -3346,7 +3780,7 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
       }
     }), buttons22;
   }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props.id]);
-  return extraButtons && i(extraButtons, 1) && (buttons2 = [...buttons2, ...extraButtons]), /* @__PURE__ */ jsx(ElementActionButtons, { ...props, buttons: buttons2 });
+  return extraButtons && t$6(extraButtons, 1) && (buttons2 = [...buttons2, ...extraButtons]), /* @__PURE__ */ jsx(ElementActionButtons, { ...props, buttons: buttons2 });
 }, {
   primary,
   secondary,
@@ -3356,7 +3790,7 @@ const curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y
   { key: "primary", value: primary.fill },
   { key: "secondary", value: secondary.fill },
   { key: "muted", value: muted.fill }
-], colors = t$2(otherColors).map((key2) => ({
+], colors = t$8(otherColors).map((key2) => ({
   key: key2,
   value: defaultTheme.elements[key2].fill
 })), Tooltip$6 = Tooltip$7.withProps({
@@ -4034,8 +4468,8 @@ const _actorLogic$1 = xstate_cjsExports.setup({
   },
   guards: {
     "was opened on hover": ({ context: context2 }) => context2.activatedBy === "hover",
-    "has search query": ({ context: context2 }) => !n$1(context2.searchQuery),
-    "search query is empty": ({ context: context2 }) => n$1(context2.searchQuery)
+    "has search query": ({ context: context2 }) => !e$4(context2.searchQuery),
+    "search query is empty": ({ context: context2 }) => e$4(context2.searchQuery)
   }
 }).createMachine({
   id: "breadcrumbs",
@@ -4425,8 +4859,8 @@ const autolayoutButton$1 = css({
 }, _ref) => {
   isVertical || ([nodeSep, rankSep] = [rankSep, nodeSep]);
   const propagateChange = useDebouncedCallback(
-    ({ x, y: y2 }) => {
-      isVertical || ([x, y2] = [y2, x]), onChange(Math.round(x * MAX_SPACING$1), Math.round(y2 * MAX_SPACING$1));
+    ({ x, y }) => {
+      isVertical || ([x, y] = [y, x]), onChange(Math.round(x * MAX_SPACING$1), Math.round(y * MAX_SPACING$1));
     },
     [onChange, isVertical],
     250,
@@ -5121,7 +5555,7 @@ const selector$7 = (state) => ({
           /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xl", children: title2 }),
           /* @__PURE__ */ jsxs(HStack, { alignItems: "flex-start", mt: "1", children: [
             /* @__PURE__ */ jsx(ViewBadge, { label: "id", value: id }),
-            /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: tags.map((tag, i2) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: tags.map((tag, i) => /* @__PURE__ */ jsx(
               ElementTag,
               {
                 tag,
@@ -5136,7 +5570,7 @@ const selector$7 = (state) => ({
         ] }),
         links.length > 0 && /* @__PURE__ */ jsxs("section", { className: hstack({ alignItems: "baseline" }), children: [
           /* @__PURE__ */ jsx(SectionHeader$1, { children: "Links" }),
-          /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: links.map((link, i2) => /* @__PURE__ */ jsx(Link, { value: link }, `${i2}-${link.url}`)) })
+          /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, `${i}-${link.url}`)) })
         ] }),
         description2.isEmpty && /* @__PURE__ */ jsx(Text, { component: "div", fw: 500, size: "xs", c: "dimmed", my: "md", style: { userSelect: "none" }, children: "No description" }),
         description2.nonEmpty && /* @__PURE__ */ jsxs("section", { children: [
@@ -5289,7 +5723,7 @@ const selector$7 = (state) => ({
       return e2.id === ((_a2 = s.activeWalkthrough) == null ? void 0 : _a2.stepId);
     });
     return {
-      isParallel: n((_a = s.activeWalkthrough) == null ? void 0 : _a.parallelPrefix),
+      isParallel: e$2((_a = s.activeWalkthrough) == null ? void 0 : _a.parallelPrefix),
       hasNext: currentStepIndex < s.xyedges.length - 1,
       hasPrevious: currentStepIndex > 0,
       currentStep: currentStepIndex + 1,
@@ -5383,7 +5817,7 @@ const selector$7 = (state) => ({
     folders,
     viewTitle,
     isDynamicView
-  } = xstateReact_cjsExports.useSelector(actor.actorRef, selectBreadcrumbs, deepEqual), folderBreadcrumbs = folders.flatMap(({ folderPath, title: title2 }, i2) => [
+  } = xstateReact_cjsExports.useSelector(actor.actorRef, selectBreadcrumbs, deepEqual), folderBreadcrumbs = folders.flatMap(({ folderPath, title: title2 }, i) => [
     /* @__PURE__ */ jsx(
       UnstyledButton,
       {
@@ -5410,7 +5844,7 @@ const selector$7 = (state) => ({
       },
       folderPath
     ),
-    /* @__PURE__ */ jsx(BreadcrumbsSeparator, {}, `separator-${i2}`)
+    /* @__PURE__ */ jsx(BreadcrumbsSeparator, {}, `separator-${i}`)
   ]), viewBreadcrumb = /* @__PURE__ */ jsx(
     UnstyledButton,
     {
@@ -5496,6 +5930,232 @@ const selector$7 = (state) => ({
   }
 ));
 NavigationLink.displayName = "NavigationLink";
+const backdropBlur$1 = "--_blur", backdropOpacity$1 = "--_opacity", level = "--_level", offset = "--_offset", inset = "--_inset", borderRadius = "--_border-radius", dialog$2 = css.raw({
+  boxSizing: "border-box",
+  margin: "0",
+  position: "fixed",
+  width: "100vw",
+  height: "100vh",
+  maxWidth: "100vw",
+  maxHeight: "100vh",
+  background: "mantine.colors.defaultBorder/50",
+  shadow: "xl",
+  border: "transparent",
+  outline: "none",
+  borderRadius: `var(${borderRadius})`,
+  [backdropBlur$1]: "0px",
+  [level]: "0",
+  [offset]: "0px",
+  [inset]: "calc((1 + var(--_level) * 0.75) * var(--_offset))",
+  [backdropOpacity$1]: "0%",
+  [borderRadius]: "0px",
+  _backdrop: {
+    cursor: "zoom-out"
+  },
+  inset: "0",
+  padding: "0"
+}), body$1 = css.raw({
+  position: "relative",
+  containerName: "likec4-dialog",
+  containerType: "size",
+  border: "0 solid transparent",
+  overflow: "hidden",
+  width: "100%",
+  height: "100%",
+  background: "mantine.colors.body"
+}), overlay = sva({
+  slots: ["dialog", "body"],
+  base: {
+    dialog: dialog$2,
+    body: body$1
+  },
+  variants: {
+    fullscreen: {
+      false: {
+        dialog: {
+          sm: {
+            inset: "[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]",
+            width: "calc(100vw - 2 * var(--_inset))",
+            height: "calc(100vh - var(--_offset) - var(--_inset))",
+            [borderRadius]: "6px",
+            padding: "1.5",
+            // 6px
+            [offset]: "1rem"
+          },
+          md: {
+            [offset]: "1rem"
+          },
+          lg: {
+            [offset]: "2rem"
+          },
+          xl: {
+            [offset]: "4rem"
+          }
+        },
+        body: {
+          sm: {
+            borderRadius: `calc(var(${borderRadius}) - 2px)`
+          }
+        }
+      },
+      true: {
+        dialog: {
+          inset: "0",
+          padding: "0"
+        }
+      }
+    },
+    // transparent: {
+    //   false: {
+    //   },
+    //   true: {
+    //     dialog: {
+    //       background: 'transparent',
+    //     },
+    //   },
+    // },
+    withBackdrop: {
+      false: {
+        dialog: {
+          _backdrop: {
+            display: "none"
+          }
+        }
+      },
+      true: {
+        dialog: {
+          _backdrop: {
+            backdropFilter: `blur(var(${backdropBlur$1}))`,
+            backgroundColor: {
+              _dark: `[rgb(34 34 34 / var(${backdropOpacity$1}))]`,
+              _light: `[rgb(15 15 15/ var(${backdropOpacity$1}))]`
+            }
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    fullscreen: !1,
+    withBackdrop: !0
+  }
+}), Overlay = forwardRef(({
+  onClose,
+  className,
+  classes: classes2,
+  overlayLevel = 0,
+  children,
+  fullscreen = !1,
+  withBackdrop = !0,
+  backdrop,
+  openDelay = 130,
+  ...rest
+}, ref) => {
+  const [opened, setOpened] = useState(openDelay === 0), focusTrapRef = useFocusTrap(opened), dialogRef = useRef(null), isClosingRef = useRef(!1), motionNotReduced = useReducedMotionConfig() !== !0, onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const close = useDebouncedCallback(
+    () => {
+      isClosingRef.current || (isClosingRef.current = !0, onCloseRef.current());
+    },
+    [],
+    50
+  );
+  useLayoutEffect(() => {
+    var _a, _b;
+    (_a = dialogRef.current) != null && _a.open || (_b = dialogRef.current) == null || _b.showModal();
+  }, []), useTimeoutEffect(() => {
+    setOpened(!0);
+  }, openDelay > 0 ? openDelay : void 0);
+  const styles = overlay({
+    fullscreen,
+    withBackdrop
+  });
+  let targetBackdropOpacity = overlayLevel > 0 ? "50%" : "60%";
+  return (backdrop == null ? void 0 : backdrop.opacity) !== void 0 && (targetBackdropOpacity = `${backdrop.opacity * 100}%`), /* @__PURE__ */ jsx(
+    m.dialog,
+    {
+      ref: useMergedRef(
+        dialogRef,
+        focusTrapRef,
+        ref
+      ),
+      className: cx(
+        classes2 == null ? void 0 : classes2.dialog,
+        className,
+        styles.dialog,
+        fullscreen && ReactRemoveScroll.classNames.fullWidth
+      ),
+      layout: !0,
+      style: {
+        // @ts-ignore
+        [level]: overlayLevel
+      },
+      ...motionNotReduced ? {
+        initial: {
+          [backdropBlur$1]: "0px",
+          [backdropOpacity$1]: "0%",
+          scale: 0.95,
+          originY: 0,
+          translateY: -20,
+          opacity: 0
+        },
+        animate: {
+          [backdropBlur$1]: overlayLevel > 0 ? "4px" : "8px",
+          [backdropOpacity$1]: targetBackdropOpacity,
+          scale: 1,
+          opacity: 1,
+          translateY: 0,
+          transition: {
+            delay: 0.075
+          }
+        },
+        exit: {
+          opacity: 0,
+          scale: 0.98,
+          translateY: -20,
+          transition: {
+            duration: 0.1
+          },
+          [backdropBlur$1]: "0px",
+          [backdropOpacity$1]: "0%"
+        }
+      } : {
+        initial: {
+          [backdropBlur$1]: "8px",
+          [backdropOpacity$1]: targetBackdropOpacity
+        }
+      },
+      onClick: (e2) => {
+        var _a, _b, _c;
+        if (e2.stopPropagation(), ((_b = (_a = e2.target) == null ? void 0 : _a.nodeName) == null ? void 0 : _b.toUpperCase()) === "DIALOG") {
+          (_c = dialogRef.current) == null || _c.close();
+          return;
+        }
+      },
+      onCancel: (e2) => {
+        e2.preventDefault(), e2.stopPropagation(), close();
+      },
+      onDoubleClick: stopPropagation,
+      onPointerDown: stopPropagation,
+      onClose: (e2) => {
+        e2.stopPropagation(), close();
+      },
+      ...rest,
+      children: /* @__PURE__ */ jsx(ReactRemoveScroll, { forwardProps: !0, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx(
+            classes2 == null ? void 0 : classes2.body,
+            styles.body,
+            "overlay-body"
+          ),
+          children: opened && /* @__PURE__ */ jsx(Fragment, { children })
+        }
+      ) })
+    }
+  );
+});
+Overlay.displayName = "Overlay";
 const LikeC4ProjectsContext = createContext(null), emptyProjects = [];
 function useLikeC4Projects() {
   const ctx = useContext(LikeC4ProjectsContext);
@@ -5585,7 +6245,13 @@ const scopedKeydownHandler = createScopedKeydownHandler({
   orientation: "vertical"
 });
 function NavigationPanelDropdown() {
-  const actor = useNavigationActor(), searchQuery = xstateReact_cjsExports.useSelector(actor.actorRef, (s) => s.context.searchQuery), setSearchQuery = useThrottledCallback((value) => {
+  const actor = useNavigationActor(), searchQuery = xstateReact_cjsExports.useSelector(actor.actorRef, (s) => s.context.searchQuery);
+  useOnDiagramEvent("paneClick", () => {
+    actor.closeDropdown();
+  }), useOnDiagramEvent("nodeClick", () => {
+    actor.closeDropdown();
+  });
+  const setSearchQuery = useThrottledCallback((value) => {
     actor.send({ type: "searchQuery.change", value });
   }, 250), hasSearchQuery = searchQuery.trim().length >= 2;
   return /* @__PURE__ */ jsxs(
@@ -5636,7 +6302,7 @@ function NavigationPanelDropdown() {
 }
 const compare = compareNaturalHierarchically(VIEW_FOLDERS_SEPARATOR);
 function SearchResults({ searchQuery }) {
-  const likec4model = useLikeC4Model(), actor = useNavigationActor(), isSearchByPath = searchQuery.includes(VIEW_FOLDERS_SEPARATOR), found = C(
+  const likec4model = useLikeC4Model(), actor = useNavigationActor(), isSearchByPath = searchQuery.includes(VIEW_FOLDERS_SEPARATOR), found = t$1(
     likec4model.views(),
     ifilter((v) => {
       var _a;
@@ -5644,7 +6310,7 @@ function SearchResults({ searchQuery }) {
     }),
     ifirst(20),
     toArray(),
-    m$1((a2, b) => compare(a2.folder.path, b.folder.path))
+    t$9((a, b) => compare(a.folder.path, b.folder.path))
   );
   if (found.length === 0) return /* @__PURE__ */ jsx("div", { children: "no results" });
   const highlight = isSearchByPath ? searchQuery.split(VIEW_FOLDERS_SEPARATOR) : searchQuery;
@@ -5759,7 +6425,7 @@ function FoundedView({ view, highlight, ...props }) {
         breadcrumbTitle({ dimmed: !0, truncate: !0 })
       ),
       maw: 170,
-      highlight: o(highlight) ? highlight : [],
+      highlight: e$1(highlight) ? highlight : [],
       children: b.title
     },
     b.path
@@ -5855,8 +6521,8 @@ const selectColumns = (context2) => {
 };
 function FolderColumns() {
   const columns = useNavigationActorContext(selectColumns, deepEqual);
-  return /* @__PURE__ */ jsx(HStack, { gap: "xs", alignItems: "stretch", children: columns.flatMap((column, i2) => [
-    i2 > 0 && /* @__PURE__ */ jsx(Divider$1, { orientation: "vertical" }, "divider" + i2),
+  return /* @__PURE__ */ jsx(HStack, { gap: "xs", alignItems: "stretch", children: columns.flatMap((column, i) => [
+    i > 0 && /* @__PURE__ */ jsx(Divider$1, { orientation: "vertical" }, "divider" + i),
     /* @__PURE__ */ jsx(FolderColumn, { data: column }, column.folderPath)
   ]) });
 }
@@ -5864,13 +6530,13 @@ function FolderColumn({ data }) {
   const actor = useNavigationActorRef(), onItemClicked = (item) => (e2) => {
     e2.stopPropagation(), item.type === "folder" ? actor.send({ type: "select.folder", folderPath: item.folderPath }) : actor.send({ type: "select.view", viewId: item.viewId });
   };
-  return /* @__PURE__ */ jsx(Box, { mb: "1", children: /* @__PURE__ */ jsx(ColumnScrollArea, { children: /* @__PURE__ */ jsx(VStack, { gap: "[1px]", children: data.items.map((item, i2) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { mb: "1", children: /* @__PURE__ */ jsx(ColumnScrollArea, { children: /* @__PURE__ */ jsx(VStack, { gap: "[1px]", children: data.items.map((item, i) => /* @__PURE__ */ jsx(
     FolderColumnItem,
     {
       columnItem: item,
       onClick: onItemClicked(item)
     },
-    `${data.folderPath}/${item.type}/${i2}`
+    `${data.folderPath}/${item.type}/${i}`
   )) }) }) });
 }
 function FolderColumnItem({ columnItem, ...props }) {
@@ -5956,7 +6622,7 @@ function SearchInput({ onKeyDown, ...props }) {
       leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 14 }),
       rightSectionPointerEvents: "all",
       rightSectionWidth: "min-content",
-      rightSection: !props.value || n$1(props.value) ? null : /* @__PURE__ */ jsx(
+      rightSection: !props.value || e$4(props.value) ? null : /* @__PURE__ */ jsx(
         Button,
         {
           variant: "subtle",
@@ -5972,232 +6638,6 @@ function SearchInput({ onKeyDown, ...props }) {
     }
   );
 }
-const backdropBlur$1 = "--_blur", backdropOpacity$1 = "--_opacity", level = "--_level", offset = "--_offset", inset = "--_inset", borderRadius = "--_border-radius", dialog$2 = css.raw({
-  boxSizing: "border-box",
-  margin: "0",
-  position: "fixed",
-  width: "100vw",
-  height: "100vh",
-  maxWidth: "100vw",
-  maxHeight: "100vh",
-  background: "mantine.colors.defaultBorder/50",
-  shadow: "xl",
-  border: "transparent",
-  outline: "none",
-  borderRadius: `var(${borderRadius})`,
-  [backdropBlur$1]: "0px",
-  [level]: "0",
-  [offset]: "0px",
-  [inset]: "calc((1 + var(--_level) * 0.75) * var(--_offset))",
-  [backdropOpacity$1]: "0%",
-  [borderRadius]: "0px",
-  _backdrop: {
-    cursor: "zoom-out"
-  },
-  inset: "0",
-  padding: "0"
-}), body$1 = css.raw({
-  position: "relative",
-  containerName: "likec4-dialog",
-  containerType: "size",
-  border: "0 solid transparent",
-  overflow: "hidden",
-  width: "100%",
-  height: "100%",
-  background: "mantine.colors.body"
-}), overlay = sva({
-  slots: ["dialog", "body"],
-  base: {
-    dialog: dialog$2,
-    body: body$1
-  },
-  variants: {
-    fullscreen: {
-      false: {
-        dialog: {
-          sm: {
-            inset: "[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]",
-            width: "calc(100vw - 2 * var(--_inset))",
-            height: "calc(100vh - var(--_offset) - var(--_inset))",
-            [borderRadius]: "6px",
-            padding: "1.5",
-            // 6px
-            [offset]: "1rem"
-          },
-          md: {
-            [offset]: "1rem"
-          },
-          lg: {
-            [offset]: "2rem"
-          },
-          xl: {
-            [offset]: "4rem"
-          }
-        },
-        body: {
-          sm: {
-            borderRadius: `calc(var(${borderRadius}) - 2px)`
-          }
-        }
-      },
-      true: {
-        dialog: {
-          inset: "0",
-          padding: "0"
-        }
-      }
-    },
-    // transparent: {
-    //   false: {
-    //   },
-    //   true: {
-    //     dialog: {
-    //       background: 'transparent',
-    //     },
-    //   },
-    // },
-    withBackdrop: {
-      false: {
-        dialog: {
-          _backdrop: {
-            display: "none"
-          }
-        }
-      },
-      true: {
-        dialog: {
-          _backdrop: {
-            backdropFilter: `blur(var(${backdropBlur$1}))`,
-            backgroundColor: {
-              _dark: `[rgb(34 34 34 / var(${backdropOpacity$1}))]`,
-              _light: `[rgb(15 15 15/ var(${backdropOpacity$1}))]`
-            }
-          }
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    fullscreen: !1,
-    withBackdrop: !0
-  }
-}), Overlay = forwardRef(({
-  onClose,
-  className,
-  classes: classes2,
-  overlayLevel = 0,
-  children,
-  fullscreen = !1,
-  withBackdrop = !0,
-  backdrop,
-  openDelay = 130,
-  ...rest
-}, ref) => {
-  const [opened, setOpened] = useState(openDelay === 0), focusTrapRef = useFocusTrap(opened), dialogRef = useRef(null), isClosingRef = useRef(!1), motionNotReduced = useReducedMotionConfig() !== !0, onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-  const close = useDebouncedCallback(
-    () => {
-      isClosingRef.current || (isClosingRef.current = !0, onCloseRef.current());
-    },
-    [],
-    50
-  );
-  useLayoutEffect(() => {
-    var _a, _b;
-    (_a = dialogRef.current) != null && _a.open || (_b = dialogRef.current) == null || _b.showModal();
-  }, []), useTimeoutEffect(() => {
-    setOpened(!0);
-  }, openDelay > 0 ? openDelay : void 0);
-  const styles = overlay({
-    fullscreen,
-    withBackdrop
-  });
-  let targetBackdropOpacity = overlayLevel > 0 ? "50%" : "60%";
-  return (backdrop == null ? void 0 : backdrop.opacity) !== void 0 && (targetBackdropOpacity = `${backdrop.opacity * 100}%`), /* @__PURE__ */ jsx(
-    m.dialog,
-    {
-      ref: useMergedRef(
-        dialogRef,
-        focusTrapRef,
-        ref
-      ),
-      className: cx(
-        classes2 == null ? void 0 : classes2.dialog,
-        className,
-        styles.dialog,
-        fullscreen && ReactRemoveScroll.classNames.fullWidth
-      ),
-      layout: !0,
-      style: {
-        // @ts-ignore
-        [level]: overlayLevel
-      },
-      ...motionNotReduced ? {
-        initial: {
-          [backdropBlur$1]: "0px",
-          [backdropOpacity$1]: "0%",
-          scale: 0.95,
-          originY: 0,
-          translateY: -20,
-          opacity: 0
-        },
-        animate: {
-          [backdropBlur$1]: overlayLevel > 0 ? "4px" : "8px",
-          [backdropOpacity$1]: targetBackdropOpacity,
-          scale: 1,
-          opacity: 1,
-          translateY: 0,
-          transition: {
-            delay: 0.075
-          }
-        },
-        exit: {
-          opacity: 0,
-          scale: 0.98,
-          translateY: -20,
-          transition: {
-            duration: 0.1
-          },
-          [backdropBlur$1]: "0px",
-          [backdropOpacity$1]: "0%"
-        }
-      } : {
-        initial: {
-          [backdropBlur$1]: "8px",
-          [backdropOpacity$1]: targetBackdropOpacity
-        }
-      },
-      onClick: (e2) => {
-        var _a, _b, _c;
-        if (e2.stopPropagation(), ((_b = (_a = e2.target) == null ? void 0 : _a.nodeName) == null ? void 0 : _b.toUpperCase()) === "DIALOG") {
-          (_c = dialogRef.current) == null || _c.close();
-          return;
-        }
-      },
-      onCancel: (e2) => {
-        e2.preventDefault(), e2.stopPropagation(), close();
-      },
-      onDoubleClick: stopPropagation,
-      onPointerDown: stopPropagation,
-      onClose: (e2) => {
-        e2.stopPropagation(), close();
-      },
-      ...rest,
-      children: /* @__PURE__ */ jsx(ReactRemoveScroll, { forwardProps: !0, children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cx(
-            classes2 == null ? void 0 : classes2.body,
-            styles.body,
-            "overlay-body"
-          ),
-          children: opened && /* @__PURE__ */ jsx(Fragment, { children })
-        }
-      ) })
-    }
-  );
-});
-Overlay.displayName = "Overlay";
 const SectionHeader = styled("div", {
   base: {
     fontSize: "xs",
@@ -6209,13 +6649,13 @@ const SectionHeader = styled("div", {
 });
 function selectWalkthroughNotes(s) {
   var _a, _b, _c;
-  const isActive = n$2(s.activeWalkthrough), activeStepIndex = isActive ? s.xyedges.findIndex((e2) => {
+  const isActive = e$5(s.activeWalkthrough), activeStepIndex = isActive ? s.xyedges.findIndex((e2) => {
     var _a2;
     return e2.id === ((_a2 = s.activeWalkthrough) == null ? void 0 : _a2.stepId);
   }) : -1;
   return {
     isActive,
-    isParallel: isActive && n((_a = s.activeWalkthrough) == null ? void 0 : _a.parallelPrefix),
+    isParallel: isActive && e$2((_a = s.activeWalkthrough) == null ? void 0 : _a.parallelPrefix),
     hasNext: isActive && activeStepIndex < s.xyedges.length - 1,
     hasPrevious: isActive && activeStepIndex > 0,
     notes: isActive ? ((_c = (_b = s.xyedges[activeStepIndex]) == null ? void 0 : _b.data) == null ? void 0 : _c.notes) ?? RichText.EMPTY : null
@@ -6325,9 +6765,8 @@ const NavigationPanelImpl = ({ actor }) => {
     Popover,
     {
       offset: {
-        mainAxis: 2
+        mainAxis: 4
       },
-      middlewares: { flip: !1 },
       opened,
       position: "bottom-start",
       trapFocus: !0,
@@ -6336,7 +6775,7 @@ const NavigationPanelImpl = ({ actor }) => {
       onDismiss: () => actor.send({ type: "dropdown.dismiss" }),
       children: [
         /* @__PURE__ */ jsx(NavigationPanelPopoverTarget, { actor }),
-        /* @__PURE__ */ jsx(NavigationPanelDropdown, {})
+        opened && /* @__PURE__ */ jsx(NavigationPanelDropdown, {})
       ]
     }
   );
@@ -6401,7 +6840,7 @@ const useElementDetailsActorRef = () => {
   if (ctx === null)
     throw new Error("ElementDetailsActorRef is not provided");
   return ctx;
-}, sortByLabel = (a2, b) => compareNatural(a2.label, b.label);
+}, sortByLabel = (a, b) => compareNatural(a.label, b.label);
 function buildNode(element) {
   return {
     label: element.title,
@@ -7035,7 +7474,7 @@ const ElementDetailsButtonWithHandler$1 = (props) => {
     /* @__PURE__ */ jsx(CompoundPorts$1, { ...props })
   ] }, props.id);
 }, EmptyNode = (props) => /* @__PURE__ */ jsx(EmptyNode$1, { ...props }), ElementPorts$1 = ({ data: { ports, height: h } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  ports.in.map((id, i2) => /* @__PURE__ */ jsx(
+  ports.in.map((id, i) => /* @__PURE__ */ jsx(
     Handle,
     {
       id,
@@ -7043,12 +7482,12 @@ const ElementDetailsButtonWithHandler$1 = (props) => {
       position: Position.Left,
       style: {
         visibility: "hidden",
-        top: `${15 + (i2 + 1) * ((h - 30) / (ports.in.length + 1))}px`
+        top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
       }
     },
     id
   )),
-  ports.out.map((id, i2) => /* @__PURE__ */ jsx(
+  ports.out.map((id, i) => /* @__PURE__ */ jsx(
     Handle,
     {
       id,
@@ -7056,13 +7495,13 @@ const ElementDetailsButtonWithHandler$1 = (props) => {
       position: Position.Right,
       style: {
         visibility: "hidden",
-        top: `${15 + (i2 + 1) * ((h - 30) / (ports.out.length + 1))}px`
+        top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
       }
     },
     id
   ))
 ] }), CompoundPorts$1 = ({ data }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  data.ports.in.map((id, i2) => /* @__PURE__ */ jsx(
+  data.ports.in.map((id, i) => /* @__PURE__ */ jsx(
     Handle,
     {
       id,
@@ -7070,12 +7509,12 @@ const ElementDetailsButtonWithHandler$1 = (props) => {
       position: Position.Left,
       style: {
         visibility: "hidden",
-        top: `${20 * (i2 + 1)}px`
+        top: `${20 * (i + 1)}px`
       }
     },
     id
   )),
-  data.ports.out.map((id, i2) => /* @__PURE__ */ jsx(
+  data.ports.out.map((id, i) => /* @__PURE__ */ jsx(
     Handle,
     {
       id,
@@ -7083,7 +7522,7 @@ const ElementDetailsButtonWithHandler$1 = (props) => {
       position: Position.Right,
       style: {
         visibility: "hidden",
-        top: `${20 * (i2 + 1)}px`
+        top: `${20 * (i + 1)}px`
       }
     },
     id
@@ -7168,11 +7607,11 @@ function applyDagreLayout$1(g) {
   return dagre.layout(g, {
     // disableOptimalOrderHeuristic: true,
   }), (nodeId) => {
-    const node2 = g.node(nodeId), { x, y: y2, width, height } = node2;
+    const node2 = g.node(nodeId), { x, y, width, height } = node2;
     return {
       position: {
         x: x - Math.round(width / 2),
-        y: y2 - Math.round(height / 2)
+        y: y - Math.round(height / 2)
       },
       width,
       height
@@ -7186,11 +7625,11 @@ var LayoutRelationshipsViewResult;
 function layoutRelationshipsView(data, scope) {
   var _a, _b;
   const g = createGraph$1(), incomers = createNodes$1("incomers", data.incomers, g), subjects = createNodes$1("subjects", data.subjects, g), outgoers = createNodes$1("outgoers", data.outgoers, g), edges = [];
-  C(
-    a$1(
-      C(
+  t$1(
+    t$d(
+      t$1(
         toArray(data.incoming),
-        m$2((r2) => ({
+        t$c((r2) => ({
           id: r2.source.id,
           sourceFqn: r2.source.id,
           targetFqn: r2.target.id,
@@ -7199,9 +7638,9 @@ function layoutRelationshipsView(data, scope) {
           relation: r2
         }))
       ),
-      C(
+      t$1(
         toArray(data.outgoing),
-        m$2((r2) => ({
+        t$c((r2) => ({
           id: r2.target.id,
           sourceFqn: r2.source.id,
           targetFqn: r2.target.id,
@@ -7211,13 +7650,13 @@ function layoutRelationshipsView(data, scope) {
         }))
       )
     ),
-    m$2((r2) => ({
+    t$c((r2) => ({
       ...r2,
       expr: `${r2.source.id}->${r2.target.id}`
     })),
     // Group if same source and target
-    i$2(p("expr")),
-    i$1((grouped) => {
+    t$b(e$6("expr")),
+    t$a((grouped) => {
       const source = grouped[0].source, target = grouped[0].target, name = grouped[0].expr;
       g.node(source.id).outPorts.push(target.id), g.node(target.id).inPorts.push(source.id), g.setEdge(source.portId, target.portId, {
         ...Sizes$1.edgeLabel
@@ -7229,7 +7668,7 @@ function layoutRelationshipsView(data, scope) {
         sourceHandle: source.id + "_out" + (g.node(source.id).outPorts.length - 1),
         target: target.id,
         targetHandle: target.id + "_in" + (g.node(target.id).inPorts.length - 1),
-        relations: m$2(grouped, p("relation"))
+        relations: t$c(grouped, e$6("relation"))
       });
     })
   );
@@ -7290,21 +7729,21 @@ function layoutRelationshipsView(data, scope) {
         ...Sizes$1.edgeLabel,
         width: edgeCount > 25 ? 800 : 400
       });
-  const dagreBounds = applyDagreLayout$1(g), _calculatedNodeBounds = C(
+  const dagreBounds = applyDagreLayout$1(g), _calculatedNodeBounds = t$1(
     nodeIds,
     // Compound nodes have different portId
-    m$3((n2) => n2.id === n2.portId),
-    l((n2) => [n2.id, dagreBounds(n2.id)])
+    n$2((n2) => n2.id === n2.portId),
+    t((n2) => [n2.id, dagreBounds(n2.id)])
   );
   function nodeBounds(nodeId) {
-    return _calculatedNodeBounds[nodeId] ?? (_calculatedNodeBounds[nodeId] = C(
+    return _calculatedNodeBounds[nodeId] ?? (_calculatedNodeBounds[nodeId] = t$1(
       g.children(nodeId) ?? [],
-      m$3((id) => !id.endsWith(PortSuffix$1)),
-      m$2((id) => nodeBounds(id)),
-      r$1((bounds) => {
+      n$2((id) => !id.endsWith(PortSuffix$1)),
+      t$c((id) => nodeBounds(id)),
+      t$g((bounds) => {
         invariant(bounds.length > 0, `Node ${nodeId} has no nested nodes`);
       }),
-      l$1((acc, bounds) => ({
+      t$f((acc, bounds) => ({
         minY: Math.min(acc.minY, bounds.position.y),
         maxY: Math.max(acc.maxY, bounds.position.y + bounds.height)
       }), { minY: 1 / 0, maxY: -1 / 0 }),
@@ -7332,14 +7771,14 @@ function layoutRelationshipsView(data, scope) {
     const children = g.children(nodeId) ?? [];
     return children.length === 0 ? 0 : 1 + Math.max(...children.map(nodeDepth));
   }
-  const sortedPorts = (nodeId, type, ports) => C(
+  const sortedPorts = (nodeId, type, ports) => t$1(
     ports,
-    m$2((port, index2) => ({
+    t$c((port, index2) => ({
       port: nodeId + "_" + type + index2,
       topY: nodeBounds(port).position.y
     })),
-    a$2(p("topY")),
-    m$2(p("port"))
+    t$h(e$6("topY")),
+    t$c(e$6("port"))
   );
   let minX = 0, minY = 0;
   const [subject] = [...subjects.root];
@@ -7394,7 +7833,7 @@ function layoutRelationshipsView(data, scope) {
     }
     const parentId = g.parent(id), children = (g.children(id) ?? []).filter((c) => !c.endsWith(PortSuffix$1));
     minX = Math.min(minX, position.x), minY = Math.min(minY, position.y);
-    const navigateTo = scope ? ((_a2 = ifind(element.scopedViews(), (v) => v.id !== scope.id)) == null ? void 0 : _a2.id) ?? null : null, inheritFromNode = scope == null ? void 0 : scope.findNodeWithElement(element.id), scopedAncestor = scope && !inheritFromNode ? (_b2 = ifind(element.ancestors(), (a2) => !!scope.findNodeWithElement(a2.id))) == null ? void 0 : _b2.id : null, inheritFromNodeOrAncestor = inheritFromNode ?? (scopedAncestor && (scope == null ? void 0 : scope.findNodeWithElement(scopedAncestor)));
+    const navigateTo = scope ? ((_a2 = ifind(element.scopedViews(), (v) => v.id !== scope.id)) == null ? void 0 : _a2.id) ?? null : null, inheritFromNode = scope == null ? void 0 : scope.findNodeWithElement(element.id), scopedAncestor = scope && !inheritFromNode ? (_b2 = ifind(element.ancestors(), (a) => !!scope.findNodeWithElement(a.id))) == null ? void 0 : _b2.id : null, inheritFromNodeOrAncestor = inheritFromNode ?? (scopedAncestor && (scope == null ? void 0 : scope.findNodeWithElement(scopedAncestor)));
     return {
       id,
       parent: parentId ?? null,
@@ -7457,7 +7896,7 @@ function layoutRelationshipsView(data, scope) {
         relations,
         sourceHandle,
         targetHandle
-      } = nonNullable$1(f(edges, (e22) => e22.name === ename)), onlyRelation = t$3(relations), label2 = (onlyRelation == null ? void 0 : onlyRelation.title) ?? "untitled", isMultiple = relations.length > 1, navigateTo = t$3(i$3(relations.flatMap((r2) => {
+      } = nonNullable$1(r(edges, (e22) => e22.name === ename)), onlyRelation = t$e(relations), label2 = (onlyRelation == null ? void 0 : onlyRelation.title) ?? "untitled", isMultiple = relations.length > 1, navigateTo = t$e(n$3(relations.flatMap((r2) => {
         var _a2;
         return (_a2 = r2.navigateTo) != null && _a2.id ? r2.navigateTo.id : [];
       })));
@@ -7472,7 +7911,7 @@ function layoutRelationshipsView(data, scope) {
         label: isMultiple ? `${relations.length} relationships` : label2,
         ...navigateTo && { navigateTo },
         existsInCurrentView: !scope || relations.every((r2) => scope.includesRelation(r2.id)),
-        points: edge.points.map((p2) => [p2.x, p2.y]),
+        points: edge.points.map((p) => [p.x, p.y]),
         line: (onlyRelation == null ? void 0 : onlyRelation.$relationship.line) ?? "dashed",
         relations: relations.map((r2) => r2.id),
         parent: null
@@ -7721,7 +8160,7 @@ const selector$5 = (state) => ({
   isActive: state.hasTag("active"),
   nodes: state.context.xynodes,
   edges: state.context.xyedges
-}), selectorEq = (a2, b) => a2.isActive === b.isActive && shallowEqual(a2.nodes, b.nodes) && shallowEqual(a2.edges, b.edges), RelationshipsBrowserXYFlow = memo$1(() => {
+}), selectorEq = (a, b) => a.isActive === b.isActive && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges), RelationshipsBrowserXYFlow = memo$1(() => {
   const browser = useRelationshipsBrowser(), {
     isActive,
     nodes,
@@ -7989,7 +8428,7 @@ function TabPanelRelationships({
   node: node2,
   element
 }) {
-  const overlaysActor = useOverlaysActorRef(), delailsActor = useElementDetailsActorRef(), relationshipsBrowserActor = xstateReact_cjsExports.useSelector(delailsActor, (s) => s.children[`${delailsActor.id}-relationships`]), [scope, setScope] = useState("view"), incoming = [...element.incoming()].map((r2) => r2.id), outgoing = [...element.outgoing()].map((r2) => r2.id), incomingInView = node2 ? i$3([...node2.incoming()].flatMap((e2) => e2.$edge.relations)) : [], outgoingInView = node2 ? i$3([...node2.outgoing()].flatMap((e2) => e2.$edge.relations)) : [], notIncludedRelations = [
+  const overlaysActor = useOverlaysActorRef(), delailsActor = useElementDetailsActorRef(), relationshipsBrowserActor = xstateReact_cjsExports.useSelector(delailsActor, (s) => s.children[`${delailsActor.id}-relationships`]), [scope, setScope] = useState("view"), incoming = [...element.incoming()].map((r2) => r2.id), outgoing = [...element.outgoing()].map((r2) => r2.id), incomingInView = node2 ? n$3([...node2.incoming()].flatMap((e2) => e2.$edge.relations)) : [], outgoingInView = node2 ? n$3([...node2.outgoing()].flatMap((e2) => e2.$edge.relations)) : [], notIncludedRelations = [
     ...incoming,
     ...outgoing
   ].filter((r2) => !incomingInView.includes(r2) && !outgoingInView.includes(r2)).length;
@@ -8235,33 +8674,33 @@ function ElementDetailsCard({
   const [opened, setOpened] = useState(!1), windowSize = useViewportSize(), windowWidth = windowSize.width || window.innerWidth || 1200, windowHeight = windowSize.height || window.innerHeight || 800, [activeTab, setActiveTab] = useSessionStorage({
     key: "likec4:element-details:active-tab",
     defaultValue: "Properties"
-  }), diagram = useDiagram(), viewModel = useLikeC4Model().view(viewId), nodeModel = fromNode ? viewModel.findNode(fromNode) : viewModel.findNodeWithElement(fqn2), elementModel = viewModel.$model.element(fqn2), [viewsOf, otherViews] = C(
+  }), diagram = useDiagram(), viewModel = useLikeC4Model().view(viewId), nodeModel = fromNode ? viewModel.findNode(fromNode) : viewModel.findNodeWithElement(fqn2), elementModel = viewModel.$model.element(fqn2), [viewsOf, otherViews] = t$1(
     [...elementModel.views()],
-    m$2((v) => v.$view),
-    d$1((v) => v._type === "element" && v.viewOf === fqn2)
+    t$c((v) => v.$view),
+    t$i((v) => v._type === "element" && v.viewOf === fqn2)
   );
   let defaultView = ((_a = nodeModel == null ? void 0 : nodeModel.navigateTo) == null ? void 0 : _a.$view) ?? ((_b = elementModel.defaultView) == null ? void 0 : _b.$view) ?? null;
   (defaultView == null ? void 0 : defaultView.id) === viewId && (defaultView = null);
-  const defaultLink = t$3(elementModel.links), controls = useDragControls(), isCompound = (((_c = nodeModel == null ? void 0 : nodeModel.$node.children) == null ? void 0 : _c.length) ?? 0) > 0, _width = Math.min(700, windowWidth - MIN_PADDING * 2), _height = Math.min(650, windowHeight - MIN_PADDING * 2), fromPositon = rectFromNode ? {
+  const defaultLink = t$e(elementModel.links), controls = useDragControls(), isCompound = (((_c = nodeModel == null ? void 0 : nodeModel.$node.children) == null ? void 0 : _c.length) ?? 0) > 0, _width = Math.min(700, windowWidth - MIN_PADDING * 2), _height = Math.min(650, windowHeight - MIN_PADDING * 2), fromPositon = rectFromNode ? {
     x: rectFromNode.x + (isCompound ? rectFromNode.width - _width / 2 : rectFromNode.width / 2),
     y: rectFromNode.y + (isCompound ? 0 : rectFromNode.height / 2)
   } : {
     x: windowWidth / 2,
     y: windowHeight / 2
   }, fromScale = rectFromNode ? Math.min(rectFromNode.width / _width, rectFromNode.height / _height, 0.9) : 1, left = Math.round(
-    u$1(fromPositon.x - _width / 2, {
+    t$5(fromPositon.x - _width / 2, {
       min: MIN_PADDING,
       max: windowWidth - _width - MIN_PADDING
     })
   ), top = Math.round(
-    u$1(fromPositon.y - (isCompound ? 0 : 60), {
+    t$5(fromPositon.y - (isCompound ? 0 : 60), {
       min: MIN_PADDING,
       max: windowHeight - _height - MIN_PADDING
     })
-  ), originX = u$1((fromPositon.x - left) / _width, {
+  ), originX = t$5((fromPositon.x - left) / _width, {
     min: 0.1,
     max: 0.9
-  }), originY = u$1((fromPositon.y - top) / _height, {
+  }), originY = t$5((fromPositon.y - top) / _height, {
     min: 0.1,
     max: 0.9
   }), width = useMotionValue(_width), height = useMotionValue(_height);
@@ -8502,7 +8941,7 @@ function ElementDetailsCard({
                     elementModel.technology && /* @__PURE__ */ jsx(ElementProperty, { title: "technology", children: elementModel.technology }),
                     elementModel.links.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
                       /* @__PURE__ */ jsx(PropertyLabel, { children: "links" }),
-                      /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: elementModel.links.map((link, i2) => /* @__PURE__ */ jsx(Link, { value: link }, i2)) })
+                      /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: elementModel.links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, i)) })
                     ] }),
                     elementModel.$element.metadata && /* @__PURE__ */ jsx(ElementMetata, { value: elementModel.$element.metadata })
                   ] }) }) }),
@@ -8588,7 +9027,7 @@ function ElementProperty({
       Text,
       {
         component: "div",
-        ...n$3(children) && { c: "dimmed" },
+        ...e$7(children) && { c: "dimmed" },
         fz: "md",
         style: {
           whiteSpace: "preserve-breaks",
@@ -8619,7 +9058,7 @@ function ElementMetata({
           justifyItems: "stretch",
           paddingRight: "xxs"
         }),
-        children: t$1(metadata).map(([key2, value]) => /* @__PURE__ */ jsxs(
+        children: t$4(metadata).map(([key2, value]) => /* @__PURE__ */ jsxs(
           "div",
           {
             className: cx(
@@ -8729,7 +9168,7 @@ function computeEdgeDetailsViewData(edges, view) {
   };
   for (const edgeId of edges) {
     const edge = view.findEdge(edgeId), _relationships = edge ? [...edge.relationships("model")] : [];
-    if (!edge || !i(_relationships, 1) || !edge.source.hasElement() || !edge.target.hasElement())
+    if (!edge || !t$6(_relationships, 1) || !edge.source.hasElement() || !edge.target.hasElement())
       continue;
     const source = edge.source.element, target = edge.target.element;
     addExplicit(source, "source"), addExplicit(target, "target");
@@ -8887,7 +9326,7 @@ const RelationshipEdge = customEdge((props) => {
   /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
   /* @__PURE__ */ jsx(CompoundPorts, { ...props })
 ] })), ElementPorts = ({ data: { ports, height: h } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  ports.in.map((id, i2) => /* @__PURE__ */ jsx(
+  ports.in.map((id, i) => /* @__PURE__ */ jsx(
     Handle,
     {
       id,
@@ -8895,12 +9334,12 @@ const RelationshipEdge = customEdge((props) => {
       position: Position.Left,
       style: {
         visibility: "hidden",
-        top: `${15 + (i2 + 1) * ((h - 30) / (ports.in.length + 1))}px`
+        top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
       }
     },
     id
   )),
-  ports.out.map((id, i2) => /* @__PURE__ */ jsx(
+  ports.out.map((id, i) => /* @__PURE__ */ jsx(
     Handle,
     {
       id,
@@ -8908,13 +9347,13 @@ const RelationshipEdge = customEdge((props) => {
       position: Position.Right,
       style: {
         visibility: "hidden",
-        top: `${15 + (i2 + 1) * ((h - 30) / (ports.out.length + 1))}px`
+        top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
       }
     },
     id
   ))
 ] }), CompoundPorts = ({ data }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  data.ports.in.map((id, i2) => /* @__PURE__ */ jsx(
+  data.ports.in.map((id, i) => /* @__PURE__ */ jsx(
     Handle,
     {
       id,
@@ -8922,12 +9361,12 @@ const RelationshipEdge = customEdge((props) => {
       position: Position.Left,
       style: {
         visibility: "hidden",
-        top: `${20 * (i2 + 1)}px`
+        top: `${20 * (i + 1)}px`
       }
     },
     id
   )),
-  data.ports.out.map((id, i2) => /* @__PURE__ */ jsx(
+  data.ports.out.map((id, i) => /* @__PURE__ */ jsx(
     Handle,
     {
       id,
@@ -8935,7 +9374,7 @@ const RelationshipEdge = customEdge((props) => {
       position: Position.Right,
       style: {
         visibility: "hidden",
-        top: `${20 * (i2 + 1)}px`
+        top: `${20 * (i + 1)}px`
       }
     },
     id
@@ -9047,11 +9486,11 @@ function applyDagreLayout(g) {
   return dagre.layout(g, {
     // disableOptimalOrderHeuristic: true,
   }), (nodeId) => {
-    const node2 = g.node(nodeId), { x, y: y2, width, height } = node2;
+    const node2 = g.node(nodeId), { x, y, width, height } = node2;
     return {
       position: {
         x: x - Math.round(width / 2),
-        y: y2 - Math.round(height / 2)
+        y: y - Math.round(height / 2)
       },
       width,
       height
@@ -9090,21 +9529,21 @@ function layoutRelationshipDetails(data, scope) {
         ...Sizes.edgeLabel,
         width: edgeCount > 10 ? 800 : 400
       });
-  const dagreBounds = applyDagreLayout(g), _calculatedNodeBounds = C(
+  const dagreBounds = applyDagreLayout(g), _calculatedNodeBounds = t$1(
     nodeIds,
     // Compound nodes have different portId
-    m$3((n2) => n2.id === n2.portId),
-    l((n2) => [n2.id, dagreBounds(n2.id)])
+    n$2((n2) => n2.id === n2.portId),
+    t((n2) => [n2.id, dagreBounds(n2.id)])
   );
   function nodeBounds(nodeId) {
-    return _calculatedNodeBounds[nodeId] ?? (_calculatedNodeBounds[nodeId] = C(
+    return _calculatedNodeBounds[nodeId] ?? (_calculatedNodeBounds[nodeId] = t$1(
       g.children(nodeId) ?? [],
-      m$3((id) => !id.endsWith(PortSuffix)),
-      m$2((id) => nodeBounds(id)),
-      r$1((bounds) => {
+      n$2((id) => !id.endsWith(PortSuffix)),
+      t$c((id) => nodeBounds(id)),
+      t$g((bounds) => {
         invariant(bounds.length > 0, `Node ${nodeId} has no nested nodes`);
       }),
-      l$1((acc, bounds) => ({
+      t$f((acc, bounds) => ({
         minY: Math.min(acc.minY, bounds.position.y),
         maxY: Math.max(acc.maxY, bounds.position.y + bounds.height)
       }), { minY: 1 / 0, maxY: -1 / 0 }),
@@ -9132,14 +9571,14 @@ function layoutRelationshipDetails(data, scope) {
     const children = g.children(nodeId) ?? [];
     return children.length === 0 ? 0 : 1 + Math.max(...children.map(nodeDepth));
   }
-  const sortedPorts = (nodeId, type, ports) => C(
+  const sortedPorts = (nodeId, type, ports) => t$1(
     ports,
-    m$2((port, index2) => ({
+    t$c((port, index2) => ({
       port: nodeId + "_" + type + index2,
       topY: nodeBounds(port).position.y
     })),
-    a$2(p("topY")),
-    m$2(p("port"))
+    t$h(e$6("topY")),
+    t$c(e$6("port"))
   );
   let minX = 0, minY = 0;
   const nodes = nodeIds.map(({ id }) => {
@@ -9148,7 +9587,7 @@ function layoutRelationshipDetails(data, scope) {
     let { position, width, height } = nodeBounds(id);
     const parentId = g.parent(id), children = (g.children(id) ?? []).filter((c) => !c.endsWith(PortSuffix));
     minX = Math.min(minX, position.x), minY = Math.min(minY, position.y);
-    const navigateTo = scope ? ((_a2 = ifind(element.scopedViews(), (v) => v.id !== scope.id)) == null ? void 0 : _a2.id) ?? null : null, inheritFromNode = scope == null ? void 0 : scope.findNodeWithElement(element.id), scopedAncestor = scope && !inheritFromNode ? (_b2 = ifind(element.ancestors(), (a2) => !!scope.findNodeWithElement(a2.id))) == null ? void 0 : _b2.id : null, inheritFromNodeOrAncestor = inheritFromNode ?? (scopedAncestor && (scope == null ? void 0 : scope.findNodeWithElement(scopedAncestor)));
+    const navigateTo = scope ? ((_a2 = ifind(element.scopedViews(), (v) => v.id !== scope.id)) == null ? void 0 : _a2.id) ?? null : null, inheritFromNode = scope == null ? void 0 : scope.findNodeWithElement(element.id), scopedAncestor = scope && !inheritFromNode ? (_b2 = ifind(element.ancestors(), (a) => !!scope.findNodeWithElement(a.id))) == null ? void 0 : _b2.id : null, inheritFromNodeOrAncestor = inheritFromNode ?? (scopedAncestor && (scope == null ? void 0 : scope.findNodeWithElement(scopedAncestor)));
     return {
       id,
       parent: parentId ?? null,
@@ -9201,7 +9640,7 @@ function layoutRelationshipDetails(data, scope) {
       const edge = g.edge(e2), ename = e2.name;
       if (!ename)
         return acc;
-      const { name, source, target, relationship, sourceHandle, targetHandle } = f(edges, (e22) => e22.name === ename), label2 = relationship.title ?? "untitled", navigateTo = ((_a2 = relationship.navigateTo) == null ? void 0 : _a2.id) ?? null, description2 = relationship.description ?? null, technology = relationship.technology ?? null;
+      const { name, source, target, relationship, sourceHandle, targetHandle } = r(edges, (e22) => e22.name === ename), label2 = relationship.title ?? "untitled", navigateTo = ((_a2 = relationship.navigateTo) == null ? void 0 : _a2.id) ?? null, description2 = relationship.description ?? null, technology = relationship.technology ?? null;
       return acc.push({
         id: name,
         source,
@@ -9213,7 +9652,7 @@ function layoutRelationshipDetails(data, scope) {
         ...navigateTo && { navigateTo },
         ...description2 && { description: description2 },
         ...technology && { technology },
-        points: edge.points.map((p2) => [p2.x, p2.y]),
+        points: edge.points.map((p) => [p.x, p.y]),
         line: relationship.line,
         relationId: relationship.id,
         parent: null
@@ -9419,7 +9858,7 @@ const selectSubject = (state) => ({
 }), SyncRelationshipDetailsXYFlow = memo$1(() => {
   const actor = useRelationshipDetailsActor(), subject = xstateReact_cjsExports.useSelector(actor, selectSubject, deepEqual), likec4model = useLikeC4Model(), view = likec4model.findView(subject.viewId) ?? null, data = useMemo(() => {
     let data2;
-    if ("edgeId" in subject && n(subject.edgeId)) {
+    if ("edgeId" in subject && e$2(subject.edgeId)) {
       invariant$1(view, `view ${subject.viewId} not found`);
       const edge = nonNullable(view.findEdge(subject.edgeId), `edge ${subject.edgeId} not found in ${subject.viewId}`);
       data2 = computeEdgeDetailsViewData([edge.id], view);
@@ -9521,10 +9960,10 @@ const selectSubject = (state) => ({
   if (!view || !view.isDiagram())
     return null;
   const edges = [...view.edges()];
-  let edge = "edgeId" in subject && n(subject.edgeId) ? edges.find((e2) => e2.id === subject.edgeId) : f(edges, (e2) => {
+  let edge = "edgeId" in subject && e$2(subject.edgeId) ? edges.find((e2) => e2.id === subject.edgeId) : r(edges, (e2) => {
     var _a, _b;
     return ((_a = e2.source.element) == null ? void 0 : _a.id) === subject.source && ((_b = e2.target.element) == null ? void 0 : _b.id) === subject.target;
-  }) || f(edges, (e2) => {
+  }) || r(edges, (e2) => {
     var _a, _b, _c, _d;
     return (((_a = e2.source.element) == null ? void 0 : _a.id) === subject.source || isAncestor$1(((_b = e2.source.element) == null ? void 0 : _b.id) ?? "__", subject.source ?? "__")) && (((_c = e2.target.element) == null ? void 0 : _c.id) === subject.target || isAncestor$1(((_d = e2.target.element) == null ? void 0 : _d.id) ?? "__", subject.target ?? "__"));
   });
@@ -9608,7 +10047,7 @@ const selectSubject = (state) => ({
     default:
       nonexhaustive(overlay2);
   }
-}).filter(l$2), compareSelectOverlays = (a2, b) => a2.length === b.length && a2.every((overlay2, i2) => overlay2.actorRef === b[i2].actorRef);
+}).filter(e$8), compareSelectOverlays = (a, b) => a.length === b.length && a.every((overlay2, i) => overlay2.actorRef === b[i].actorRef);
 function Overlays({ overlaysActorRef }) {
   const xyflowDomNode = useXYStore((s) => s.domNode), xyflowRendererDom = useMemo(() => (xyflowDomNode == null ? void 0 : xyflowDomNode.querySelector(".react-flow__renderer")) ?? null, [
     xyflowDomNode
@@ -9902,7 +10341,7 @@ function moveFocusToSearchInput(from) {
     return;
   }
   const root2 = from.getRootNode();
-  if (!t(root2.querySelector)) {
+  if (!e(root2.querySelector)) {
     console.error("moveFocusToSearchInput: root.querySelector is not a function");
     return;
   }
@@ -9918,7 +10357,7 @@ function focusToFirstFoundElement(from) {
     return;
   }
   const root2 = from.getRootNode();
-  if (!t(root2.querySelector)) {
+  if (!e(root2.querySelector)) {
     console.error("focusToFirstFoundElement: root.querySelector is not a function");
     return;
   }
@@ -9929,7 +10368,7 @@ function queryAllFocusable(from, where, selector3 = `.${focusable}`) {
   if (!from)
     return console.error("queryAllFocusable: from is null or undefined"), [];
   const root2 = from.getRootNode();
-  return t(root2.querySelectorAll) ? [...root2.querySelectorAll(`[data-likec4-search-${where}] ${selector3}`)] : (console.error("queryAllFocusable: root.querySelectorAll is not a function"), []);
+  return e(root2.querySelectorAll) ? [...root2.querySelectorAll(`[data-likec4-search-${where}] ${selector3}`)] : (console.error("queryAllFocusable: root.querySelectorAll is not a function"), []);
 }
 const _viewBtn = "likec4-view-btn", viewButton = cx(
   css({
@@ -9968,8 +10407,8 @@ const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, child
       onKeyDown: (e2) => {
         if (e2.key === "ArrowLeft" || e2.key === "ArrowRight") {
           const maxY = e2.target.getBoundingClientRect().y, elementButtons = queryAllFocusable(ref.current, "elements", ".likec4-element-button");
-          let elementButton = elementButtons.length > 1 ? elementButtons.find((el, i2, all) => centerY(el) > maxY || i2 === all.length - 1) : null;
-          elementButton ?? (elementButton = d(elementButtons)), elementButton && (e2.stopPropagation(), elementButton.focus());
+          let elementButton = elementButtons.length > 1 ? elementButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1) : null;
+          elementButton ?? (elementButton = n$1(elementButtons)), elementButton && (e2.stopPropagation(), elementButton.focus());
           return;
         }
       },
@@ -9985,12 +10424,12 @@ const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, child
             }
           }
         ) }),
-        views.map((view, i2) => /* @__PURE__ */ jsx(MotionDiv, { layoutId: `@view${view.id}`, children: /* @__PURE__ */ jsx(
+        views.map((view, i) => /* @__PURE__ */ jsx(MotionDiv, { layoutId: `@view${view.id}`, children: /* @__PURE__ */ jsx(
           ViewButton,
           {
             view,
             search,
-            tabIndex: i2 === 0 ? 0 : -1
+            tabIndex: i === 0 ? 0 : -1
           }
         ) }, view.id))
       ]
@@ -10049,11 +10488,11 @@ const btn$1 = buttonsva(), ElementsColumn = memo$1(() => {
   const model = useLikeC4Model(), search = useNormalizedSearch(), data = useMemo(() => {
     const searchTerms = search.split(".");
     let elements;
-    n$1(searchTerms) || searchTerms[0] === "kind:" ? elements = model.elements() : elements = ifilter(model.elements(), (element) => search.startsWith("kind:") ? element.kind.toLocaleLowerCase().startsWith(search.slice(5)) : search.startsWith("#") ? element.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1))) : (element.title + " " + element.id + " " + (element.description ?? "")).toLocaleLowerCase().includes(search));
-    const byid = {}, { all, roots } = C(
+    e$4(searchTerms) || searchTerms[0] === "kind:" ? elements = model.elements() : elements = ifilter(model.elements(), (element) => search.startsWith("kind:") ? element.kind.toLocaleLowerCase().startsWith(search.slice(5)) : search.startsWith("#") ? element.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1))) : (element.title + " " + element.id + " " + (element.description ?? "")).toLocaleLowerCase().includes(search));
+    const byid = {}, { all, roots } = t$1(
       [...elements],
       sortParentsFirst,
-      l$1((acc, element) => {
+      t$f((acc, element) => {
         const treeItem = {
           label: element.title,
           value: element.id,
@@ -10106,8 +10545,8 @@ function ElementsTree({
         if (node2.children.length > 0 && tree.expandedState[id] === !1)
           return;
         const maxY = (e2.target.querySelector(".mantine-Tree-label") ?? target).getBoundingClientRect().y, viewButtons = queryAllFocusable(target, "views");
-        let view = viewButtons.length > 1 ? viewButtons.find((el, i2, all2) => centerY(el) > maxY || i2 === all2.length - 1) : null;
-        view ?? (view = d(viewButtons)), view && (stopAndPrevent(e2), view.focus());
+        let view = viewButtons.length > 1 ? viewButtons.find((el, i, all2) => centerY(el) > maxY || i === all2.length - 1) : null;
+        view ?? (view = n$1(viewButtons)), view && (stopAndPrevent(e2), view.focus());
         return;
       }
       if (e2.key === " " || e2.key === "Enter") {
@@ -10217,7 +10656,7 @@ function useHandleElementSelection() {
     const views = [...element.views()];
     if (views.length === 0)
       return;
-    const singleView = t$3(views);
+    const singleView = t$e(views);
     if (singleView) {
       searchActorRef.send({ type: "close" }), singleView.id !== diagram.currentView.id && setTimeout(() => {
         diagram.navigateTo(singleView.id);
@@ -10353,14 +10792,14 @@ function PickView({ elementFqn }) {
           /* @__PURE__ */ jsxs(ScrollAreaAutosize, { mah: "calc(100vh - 110px)", type: "never", children: [
             scoped.length > 0 && /* @__PURE__ */ jsxs(Stack, { gap: "sm", px: "sm", className: pickviewGroup, children: [
               /* @__PURE__ */ jsx(Title, { order: 6, c: "dimmed", children: "scoped views of the element" }),
-              scoped.map((view, i2) => /* @__PURE__ */ jsx(
+              scoped.map((view, i) => /* @__PURE__ */ jsx(
                 ViewButton,
                 {
                   view,
                   search: "",
                   loop: !0,
                   mod: {
-                    autofocus: i2 === 0
+                    autofocus: i === 0
                   }
                 },
                 view.id
@@ -10368,14 +10807,14 @@ function PickView({ elementFqn }) {
             ] }),
             others.length > 0 && /* @__PURE__ */ jsxs(Stack, { gap: "sm", px: "sm", className: pickviewGroup, children: [
               /* @__PURE__ */ jsx(Title, { order: 6, c: "dimmed", children: "views including this element" }),
-              others.map((view, i2) => /* @__PURE__ */ jsx(
+              others.map((view, i) => /* @__PURE__ */ jsx(
                 ViewButton,
                 {
                   view,
                   search: "",
                   loop: !0,
                   mod: {
-                    autofocus: i2 === 0 && scoped.length === 0
+                    autofocus: i === 0 && scoped.length === 0
                   }
                 },
                 view.id
@@ -10529,7 +10968,7 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$1(() => {
     case search.startsWith("kind:"):
     case startingWithKind(search): {
       const term = search.length > 5 ? search.slice(5).toLocaleLowerCase() : "";
-      let alloptions = t$2(likec4model.specification.elements);
+      let alloptions = t$8(likec4model.specification.elements);
       term && (alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term))), alloptions.length === 0 ? (isExactMatch = !1, options = [
         /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No kinds found" }, "empty-kinds")
       ]) : (isExactMatch = alloptions.some((kind) => kind.toLocaleLowerCase() === term), options = alloptions.map((kind) => /* @__PURE__ */ jsxs(ComboboxOption, { value: `kind:${kind}`, children: [
@@ -10711,7 +11150,7 @@ const scrollArea = css({
 }), SearchOverlay = ({ searchActorRef }) => {
   const ref = useRef(null), pickViewFor = usePickViewFor();
   return useTimeoutEffect(() => {
-    n(searchActorRef.getSnapshot().context.openedWithSearch) && focusToFirstFoundElement(ref.current);
+    e$2(searchActorRef.getSnapshot().context.openedWithSearch) && focusToFirstFoundElement(ref.current);
   }, 150), /* @__PURE__ */ jsxs(Box, { ref, display: "contents", children: [
     /* @__PURE__ */ jsx(
       Group,
@@ -10952,7 +11391,7 @@ function selectDiagramContext(c) {
 }
 const RelationshipPopover = memo$1(() => {
   const actorRef = xstateReact_cjsExports.useActorRef(RelationshipPopoverActorLogic), diagram = useDiagram(), { viewId, selected } = useDiagramContext(selectDiagramContext), openedEdgeId = xstateReact_cjsExports.useSelector(actorRef, (s) => s.hasTag("opened") ? s.context.edgeId : null);
-  useOnDiagramEvent("viewChange", () => {
+  useOnDiagramEvent("navigateTo", () => {
     actorRef.send({ type: "close" });
   }), useOnDiagramEvent("edgeMouseEnter", ({ edge }) => {
     actorRef.send({ type: "xyedge.mouseEnter", edgeId: edge.data.id });
@@ -11038,8 +11477,8 @@ const RelationshipPopover = memo$1(() => {
             padding: POPOVER_PADDING,
             apply({ availableHeight, availableWidth, elements }) {
               wasCanceled || Object.assign(elements.floating.style, {
-                maxWidth: `${u$1(roundDpr(availableWidth), { min: 200, max: 400 })}px`,
-                maxHeight: `${u$1(roundDpr(availableHeight), { min: 0, max: 500 })}px`
+                maxWidth: `${t$5(roundDpr(availableWidth), { min: 200, max: 400 })}px`,
+                maxHeight: `${t$5(roundDpr(availableHeight), { min: 0, max: 500 })}px`
               });
             }
           }),
@@ -11047,9 +11486,9 @@ const RelationshipPopover = memo$1(() => {
             padding: POPOVER_PADDING * 2
           })
         ]
-      }).then(({ x, y: y2, middlewareData }) => {
+      }).then(({ x, y, middlewareData }) => {
         var _a;
-        wasCanceled || (popper.style.transform = `translate(${roundDpr(x)}px, ${roundDpr(y2)}px)`, popper.style.visibility = (_a = middlewareData.hide) != null && _a.referenceHidden ? "hidden" : "visible");
+        wasCanceled || (popper.style.transform = `translate(${roundDpr(x)}px, ${roundDpr(y)}px)`, popper.style.visibility = (_a = middlewareData.hide) != null && _a.referenceHidden ? "hidden" : "visible");
       });
     }, {
       ancestorResize: !1,
@@ -11059,9 +11498,9 @@ const RelationshipPopover = memo$1(() => {
       wasCanceled = !0, cleanup();
     };
   }, [referenceEl]);
-  const likec4model = useLikeC4Model(), diagram = useDiagram(), [direct, nested] = C(
+  const likec4model = useLikeC4Model(), diagram = useDiagram(), [direct, nested] = t$1(
     diagramEdge.relations,
-    m$2((id) => {
+    t$c((id) => {
       try {
         return likec4model.relationship(id);
       } catch (e2) {
@@ -11071,8 +11510,8 @@ const RelationshipPopover = memo$1(() => {
         ), null;
       }
     }),
-    m$3(n),
-    d$1((r2) => r2.source.id === sourceNode.id && r2.target.id === targetNode.id)
+    n$2(e$2),
+    t$i((r2) => r2.source.id === sourceNode.id && r2.target.id === targetNode.id)
   );
   if (direct.length === 0 && nested.length === 0)
     return console.error("No relationships found  diagram edge", {
@@ -11547,8 +11986,8 @@ const autolayoutButton = css({
 }, _ref) => {
   isVertical || ([nodeSep, rankSep] = [rankSep, nodeSep]);
   const propagateChange = useDebouncedCallback(
-    ({ x, y: y2 }) => {
-      isVertical || ([x, y2] = [y2, x]), onChange(Math.round(x * MAX_SPACING), Math.round(y2 * MAX_SPACING));
+    ({ x, y }) => {
+      isVertical || ([x, y] = [y, x]), onChange(Math.round(x * MAX_SPACING), Math.round(y * MAX_SPACING));
     },
     [onChange, isVertical],
     250,
@@ -12219,7 +12658,7 @@ const shapeBadge = css({
                 style: {
                   position: "relative",
                   width: 70,
-                  height: u$2(70 * (h / w), 0)
+                  height: n$4(70 * (h / w), 0)
                 },
                 children: /* @__PURE__ */ jsx(
                   ElementShape,
@@ -12246,7 +12685,7 @@ const shapeBadge = css({
                   onMouseLeave: () => {
                     setOnlyKind(null), diagram.highlightNotation(value);
                   },
-                  opacity: l$2(onlyKind) && onlyKind !== kind ? 0.25 : 1,
+                  opacity: e$8(onlyKind) && onlyKind !== kind ? 0.25 : 1,
                   children: kind
                 },
                 kind
@@ -12386,7 +12825,7 @@ const shapeBadge = css({
                       maxHeight: `min(40vh, ${Math.max(height - 60, 50)}px)`
                     }
                   },
-                  children: /* @__PURE__ */ jsx(Stack, { gap: 0, children: notations.map((n2, i2) => /* @__PURE__ */ jsx(ElementNotation, { value: n2 }, i2)) })
+                  children: /* @__PURE__ */ jsx(Stack, { gap: 0, children: notations.map((n2, i) => /* @__PURE__ */ jsx(ElementNotation, { value: n2 }, i)) })
                 }
               ) })
             ] })
@@ -12464,8 +12903,8 @@ function DynamicViewWalkthrough() {
   } = useDiagramContext((s) => {
     var _a;
     return {
-      isActive: n$2(s.activeWalkthrough),
-      isParallel: n((_a = s.activeWalkthrough) == null ? void 0 : _a.parallelPrefix),
+      isActive: e$5(s.activeWalkthrough),
+      isParallel: e$2((_a = s.activeWalkthrough) == null ? void 0 : _a.parallelPrefix),
       hasNext: s.xyedges.findIndex((e2) => {
         var _a2;
         return e2.id === ((_a2 = s.activeWalkthrough) == null ? void 0 : _a2.stepId);
@@ -12612,8 +13051,8 @@ class Rect {
     };
   }
   set positionAbsolute(pos) {
-    const x = Math.round(pos.x), y2 = Math.round(pos.y);
-    this.maxX += x - this.minX, this.maxY += y2 - this.minY, this.minX = x, this.minY = y2;
+    const x = Math.round(pos.x), y = Math.round(pos.y);
+    this.maxX += x - this.minX, this.maxY += y - this.minY, this.minX = x, this.minY = y;
   }
   get dimensions() {
     return {
@@ -12733,11 +13172,11 @@ function useLayoutConstraints() {
     return {
       onNodeDragStart: (_event, xynode) => {
         wasPending = diagram.cancelSaveManualLayout();
-        const { nodeLookup } = xystore.getState(), draggingNodes = C(
+        const { nodeLookup } = xystore.getState(), draggingNodes = t$1(
           Array.from(nodeLookup.values()),
-          m$3((n2) => n2.draggable !== !1 && (n2.dragging === !0 || n2.id === xynode.id || n2.selected === !0))
+          n$2((n2) => n2.draggable !== !1 && (n2.dragging === !0 || n2.id === xynode.id || n2.selected === !0))
         );
-        i(draggingNodes, 1) && (solverRef.current = createLayoutConstraints(xystore, m$2(draggingNodes, (x) => x.id))), initial.x = _event.clientX, initial.y = _event.clientY, moved = !1;
+        t$6(draggingNodes, 1) && (solverRef.current = createLayoutConstraints(xystore, t$c(draggingNodes, (x) => x.id))), initial.x = _event.clientX, initial.y = _event.clientY, moved = !1;
       },
       onNodeDrag: (_event) => {
         var _a;
@@ -12765,7 +13204,7 @@ const selectXYProps = (ctx) => ({
       zoom: 1
     }
   }
-}), equalsXYProps = (a2, b) => a2.initialized === b.initialized && a2.pannable === b.pannable && a2.zoomable === b.zoomable && a2.enableFitView === b.enableFitView && a2.enableReadOnly === b.enableReadOnly && shallowEqual(a2.fitViewPadding, b.fitViewPadding) && shallowEqual(a2.nodes, b.nodes) && shallowEqual(a2.edges, b.edges) && shallowEqual(a2.viewport ?? null, b.viewport ?? null);
+}), equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.fitViewPadding, b.fitViewPadding) && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport ?? null, b.viewport ?? null);
 function LikeC4DiagramXYFlow({
   background = "dots",
   nodesDraggable = !1,
@@ -12791,12 +13230,12 @@ function LikeC4DiagramXYFlow({
     onCanvasDblClick
   } = useDiagramEventHandlers(), notReadOnly = !enableReadOnly, isReducedGraphics = useIsReducedGraphics(), layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
     $isPanning.set(!0);
-  }, isReducedGraphics ? 120 : 200), notPanning = useDebouncedCallback$1(() => {
+  }, isReducedGraphics ? 120 : 400), notPanning = useDebouncedCallback$1(() => {
     isPanning.clear(), $isPanning.get() && $isPanning.set(!1);
   }, isReducedGraphics ? 350 : 200), onMove = useCallbackRef((event) => {
     event && ($isPanning.get() || isPanning.start(), notPanning());
   }), onMoveEnd = useCallbackRef((event, viewport) => {
-    event && !isReducedGraphics && notPanning.flush(), diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
+    isPanning.clear(), diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
   }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });
   }), nodeTypes2 = useCustomCompareMemo(
@@ -12891,7 +13330,7 @@ function LikeC4DiagramXYFlow({
     /* @__PURE__ */ jsx(DiagramUI, {}, "DiagramUI")
   ] });
 }
-const globalsCss = ".likec4-shadow-root dialog{color:var(--mantine-color-text)}.likec4-root{overflow:hidden;position:relative;padding:0;margin:0;width:100%;height:100%;border:0px solid transparent;container-name:likec4-root;container-type:size}.likec4-root .react-flow:is(.not-initialized){opacity:0}.likec4-root .react-flow{contain:paint;--xy-background-color: var(--colors-likec4-background);--xy-background-pattern-color: var(--colors-likec4-background-pattern, var(--colors-likec4-background))}.likec4-root .react-flow:is(.bg-transparent){background:transparent!important;--xy-background-color: transparent !important}.likec4-root .react-flow .react-flow__pane{-webkit-user-select:none;user-select:none;--webkit-user-select: none}.likec4-static-view .react-flow .react-flow__attribution{display:none}:where(.likec4-root .mantine-ActionIcon-icon) .tabler-icon{width:75%;height:75%}.likec4-root .likec4-edge-label-container{top:0;left:0;position:absolute;width:auto;height:auto}.likec4-root :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed]){opacity:.25}.likec4-root .likec4-edge-label-container:is([data-likec4-dimmed]){opacity:.25}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed]){filter:grayscale(85%)}.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed]){filter:grayscale(85%)}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}.likec4-root .react-flow :where(.react-flow__nodes,.react-flow__edges,.react-flow__edgelabel-renderer){display:contents}.likec4-root .react-flow__node.draggable:has(.likec4-compound-node){cursor:default}[data-mantine-color-scheme=dark] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>:where(svg,.likec4-edge-label-container){mix-blend-mode:plus-lighter}[data-mantine-color-scheme=light] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>:where(svg,.likec4-edge-label-container){mix-blend-mode:screen}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-stroke-width: 3;--xy-edge-stroke: var(--likec4-palette-relation-stroke);--xy-edge-stroke-selected: var(--likec4-palette-relation-stroke-selected);--xy-edge-label-color: var(--likec4-palette-relation-label);--xy-edge-label-background-color: var(--likec4-palette-relation-label-bg)}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container):is([data-likec4-hovered=true],[data-edge-active=true]){--xy-edge-stroke-width: 4;--xy-edge-stroke: var(--likec4-palette-relation-stroke-selected)}[data-mantine-color-scheme=dark] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 50%, transparent)}[data-mantine-color-scheme=light] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-color: color-mix(in srgb, var(--likec4-palette-relation-label), rgba(255 255 255 / .85) 40%);--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 60%, transparent)}", scheme = (scheme2) => `[data-mantine-color-scheme="${scheme2}"]`, whenDark = scheme("dark"), whenLight = scheme("light"), MAX_DEPTH = 5, generateCompoundColors = (rootSelector, name, colors2, depth) => {
+const scheme = (scheme2) => `[data-mantine-color-scheme="${scheme2}"]`, whenDark = scheme("dark"), whenLight = scheme("light"), MAX_DEPTH = 5, generateCompoundColors = (rootSelector, name, colors2, depth) => {
   const compoundDarkColor = (color) => toHex(
     scale(color, {
       l: -22 - 5 * depth,
@@ -12935,28 +13374,28 @@ ${whenDark} ${selector3} {
 }
 
   `.trim(),
-    ...a$3(1, MAX_DEPTH + 1).map((depth) => generateCompoundColors(rootSelector, name, colors2, depth))
+    ...t$j(1, MAX_DEPTH + 1).map((depth) => generateCompoundColors(rootSelector, name, colors2, depth))
   ].join(`
 `);
 }
 function generateCustomColorStyles(customColors, rootSelector) {
-  return C(
-    t$1(customColors),
-    m$2(([name, color]) => toStyle(rootSelector, name, color)),
-    r(`
+  return t$1(
+    t$4(customColors),
+    t$c(([name, color]) => toStyle(rootSelector, name, color)),
+    t$2(`
 `)
   );
 }
 function generateBuiltInColorStyles(rootSelector) {
-  return C(
+  return t$1(
     ThemeColors,
-    m$2(
+    t$c(
       (color) => toStyle(rootSelector, color, {
         elements: defaultTheme.elements[color],
         relationships: defaultTheme.relationships[color]
       })
     ),
-    r(`
+    t$2(`
 `)
   );
 }
@@ -12974,15 +13413,6 @@ function LikeC4Styles({ id }) {
   );
 }
 const MemoizedStyles = memo$1(({ id, nonce, customColorsStyles, builtInColors }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx(
-    "style",
-    {
-      type: "text/css",
-      "data-likec4-global": id,
-      dangerouslySetInnerHTML: { __html: globalsCss.replaceAll(".likec4-root", `#${id}.likec4-root`) },
-      nonce
-    }
-  ),
   /* @__PURE__ */ jsx(
     "style",
     {
@@ -13017,10 +13447,10 @@ function viewToNodesEdge$1(opts) {
   if (opts.where)
     try {
       const filterablePredicate = whereOperatorAsPredicate(opts.where);
-      visiblePredicate = (i2) => filterablePredicate({
-        ...i$4(i2, ["tags", "kind"]),
-        ..."source" in i2 ? { source: nodeById(i2.source) } : i2,
-        ..."target" in i2 ? { target: nodeById(i2.target) } : i2
+      visiblePredicate = (i) => filterablePredicate({
+        ...t$k(i, ["tags", "kind"]),
+        ..."source" in i ? { source: nodeById(i.source) } : i,
+        ..."target" in i ? { target: nodeById(i.target) } : i
       });
     } catch (e2) {
       console.error("Error in where filter:", e2);
@@ -13028,7 +13458,7 @@ function viewToNodesEdge$1(opts) {
   const ns = "", nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
   let next;
   for (; next = queue.dequeue(); ) {
-    const { node: node2, parent } = next, isCompound = i(node2.children, 1) || node2.kind == GroupElementKind;
+    const { node: node2, parent } = next, isCompound = t$6(node2.children, 1) || node2.kind == GroupElementKind;
     if (isCompound)
       for (const child of node2.children)
         queue.enqueue({ node: nodeById(child), parent: node2 });
@@ -13161,7 +13591,7 @@ function viewToNodesEdge$1(opts) {
   }
   for (const edge of view.edges) {
     const source = edge.source, target = edge.target, id = ns + edge.id;
-    if (!i(edge.points, 2)) {
+    if (!t$6(edge.points, 2)) {
       console.error("edge should have at least 2 points", edge);
       continue;
     }
@@ -13198,26 +13628,26 @@ function viewToNodesEdge$1(opts) {
     xyedges
   };
 }
-const viewToNodesEdgeEqual = (a2, b) => a2.view.id === b.view.id && a2.view._type === b.view._type && a2.nodesSelectable === b.nodesSelectable && shallowEqual(a2.view.nodes, b.view.nodes) && shallowEqual(a2.view.edges, b.view.edges) && deepEqual(a2.where, b.where);
+const viewToNodesEdgeEqual = (a, b) => a.view.id === b.view.id && a.view._type === b.view._type && a.nodesSelectable === b.nodesSelectable && shallowEqual(a.view.nodes, b.view.nodes) && shallowEqual(a.view.edges, b.view.edges) && deepEqual(a.where, b.where);
 function useViewToNodesEdges(params) {
   return useCustomCompareMemo(
     () => viewToNodesEdge$1(params),
     [params],
-    ([a2], [b]) => !!a2 && !!b && viewToNodesEdgeEqual(a2, b)
+    ([a], [b]) => !!a && !!b && viewToNodesEdgeEqual(a, b)
   );
 }
 function _update$1(current, update) {
   return update.map((next) => {
     const existing = current.find((n2) => n2.id === next.id);
     return existing && deepEqual(existing.type, next.type) ? deepEqual(existing.hidden ?? !1, next.hidden ?? !1) && deepEqual(existing.source, next.source) && deepEqual(existing.sourceHandle ?? null, next.sourceHandle ?? null) && deepEqual(existing.target, next.target) && deepEqual(existing.targetHandle ?? null, next.targetHandle ?? null) && deepEqual(existing.zIndex ?? 0, next.zIndex ?? 0) && deepEqual(existing.data, next.data) ? existing : {
-      ...y(existing, ["hidden", "zIndex"]),
+      ...n$5(existing, ["hidden", "zIndex"]),
       ...next,
       data: next.data
     } : next;
   });
 }
 function updateEdges(current, update) {
-  return n$4(update) ? _update$1(current, update) : (update = current, (current2) => _update$1(current2, update));
+  return e$9(update) ? _update$1(current, update) : (update = current, (current2) => _update$1(current2, update));
 }
 function _update(current, updated) {
   return updated.map((update) => {
@@ -13225,7 +13655,7 @@ function _update(current, updated) {
     if (existing && deepEqual(existing.type, update.type)) {
       const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
       return deepEqual(existingWidth, update.initialWidth) && deepEqual(existingHeight, update.initialHeight) && deepEqual(existing.parentId ?? null, update.parentId ?? null) && deepEqual(existing.hidden ?? !1, update.hidden ?? !1) && deepEqual(existing.zIndex ?? 0, update.zIndex ?? 0) && deepEqual(existing.position, update.position) && deepEqual(existing.data, update.data) ? existing : {
-        ...y(existing, ["measured", "parentId", "hidden", "zIndex"]),
+        ...n$5(existing, ["measured", "parentId", "hidden", "zIndex"]),
         ...update,
         // Force dimensions from update
         width: update.initialWidth,
@@ -13237,7 +13667,7 @@ function _update(current, updated) {
   });
 }
 function updateNodes(current, update) {
-  return n$4(update) ? _update(current, update) : (update = current, (current2) => _update(current2, update));
+  return e$9(update) ? _update(current, update) : (update = current, (current2) => _update(current2, update));
 }
 const ViewPadding = {
   top: "40px",
@@ -13252,7 +13682,7 @@ function viewToNodesEdge(view) {
   )), ns = "", nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
   let next;
   for (; next = queue.dequeue(); ) {
-    const { node: node2, parent } = next, isCompound = i(node2.children, 1) || node2.kind == GroupElementKind;
+    const { node: node2, parent } = next, isCompound = t$6(node2.children, 1) || node2.kind == GroupElementKind;
     if (isCompound)
       for (const child of node2.children)
         queue.enqueue({ node: nodeById(child), parent: node2 });
@@ -13341,11 +13771,11 @@ function viewToNodesEdge(view) {
   }
   for (const edge of view.edges) {
     const source = edge.source, target = edge.target, id = ns + edge.id;
-    if (!i(edge.points, 2)) {
+    if (!t$6(edge.points, 2)) {
       console.error("edge should have at least 2 points", edge);
       continue;
     }
-    if (!i(edge.relations, 1)) {
+    if (!t$6(edge.relations, 1)) {
       console.error("edge should have at least 1 relation", edge);
       continue;
     }
@@ -13378,7 +13808,7 @@ function viewToNodesEdge(view) {
   };
 }
 const findRootSubject = (nodes) => nodes.find(
-  (n2) => n2.data.column === "subjects" && n$3(n2.parentId)
+  (n2) => n2.data.column === "subjects" && e$7(n2.parentId)
 ), layouter = xstate_cjsExports.fromPromise(async ({ input: input2, self, signal }) => {
   const {
     subjectId,
@@ -13426,7 +13856,7 @@ const findRootSubject = (nodes) => nodes.find(
         dimmed: n2.data.column === "subjects" ? "immediate" : !0
       }
     } : {
-      ...y(n2, ["parentId"]),
+      ...n$5(n2, ["parentId"]),
       position: {
         x: currentSubjectCenter.x - n2.initialWidth / 2,
         y: currentSubjectCenter.y - n2.initialHeight / 2
@@ -13614,7 +14044,7 @@ const findRootSubject = (nodes) => nodes.find(
         fitDiagram: {
           actions: {
             type: "xyflow:fitDiagram",
-            params: p("event")
+            params: e$6("event")
           }
         },
         "xyflow.resized": {
@@ -13697,8 +14127,8 @@ const findRootSubject = (nodes) => nodes.find(
                   xyedges: event.output.xyedges,
                   navigateFromNode: null
                 }), enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 50 });
-                for (let i2 = 0; i2 < 6; i2++)
-                  enqueue.raise({ type: "xyflow.updateNodeInternals" }, { delay: 100 + i2 * 100 });
+                for (let i = 0; i < 6; i++)
+                  enqueue.raise({ type: "xyflow.updateNodeInternals" }, { delay: 100 + i * 100 });
               })
             }
           },
@@ -13801,7 +14231,7 @@ function layoutResultToXYFlow(layout) {
   )), ns = "", nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
   let next;
   for (; next = queue.dequeue(); ) {
-    const { node: node2, parent } = next, isCompound = i(node2.children, 1);
+    const { node: node2, parent } = next, isCompound = t$6(node2.children, 1);
     if (isCompound)
       for (const child of node2.children)
         queue.enqueue({ node: nodeById(child), parent: node2 });
@@ -13915,7 +14345,7 @@ function layoutResultToXYFlow(layout) {
   };
 }
 function inputToSubject(input2) {
-  return "edgeId" in input2 ? (invariant$1(t$4(input2.edgeId), "edgeId is required"), {
+  return "edgeId" in input2 ? (invariant$1(e$a(input2.edgeId), "edgeId is required"), {
     edgeId: input2.edgeId
   }) : {
     source: input2.source,
@@ -14136,7 +14566,7 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
     fitDiagram: {
       actions: {
         type: "xyflow:fitDiagram",
-        params: p("event")
+        params: e$6("event")
       }
     },
     "xyflow.resized": {
@@ -14178,25 +14608,25 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
       var _a;
       if (context2.overlays.length === 0)
         return;
-      const lastOverlay = (_a = a(context2.overlays)) == null ? void 0 : _a.id;
+      const lastOverlay = (_a = t$7(context2.overlays)) == null ? void 0 : _a.id;
       lastOverlay && (enqueue.sendTo(lastOverlay, { type: "close" }), enqueue.stopChild(lastOverlay), enqueue.assign({
-        overlays: context2.overlays.filter((o2) => o2.id !== lastOverlay)
+        overlays: context2.overlays.filter((o) => o.id !== lastOverlay)
       }));
     }),
     closeSpecificOverlay: xstate_cjsExports.enqueueActions(({ context: context2, enqueue }, params) => {
       var _a;
-      const toClose = (_a = context2.overlays.find((o2) => o2.id === params.actorId)) == null ? void 0 : _a.id;
+      const toClose = (_a = context2.overlays.find((o) => o.id === params.actorId)) == null ? void 0 : _a.id;
       toClose && (enqueue.sendTo(toClose, { type: "close" }), enqueue.stopChild(toClose), enqueue.assign({
-        overlays: context2.overlays.filter((o2) => o2.id !== toClose)
+        overlays: context2.overlays.filter((o) => o.id !== toClose)
       }));
     }),
     closeAllOverlays: xstate_cjsExports.enqueueActions(({ context: context2, enqueue }) => {
-      for (const { id } of t$5(context2.overlays))
+      for (const { id } of t$l(context2.overlays))
         enqueue.sendTo(id, { type: "close" }), enqueue.stopChild(id);
       enqueue.assign({ overlays: [] });
     }),
     openElementDetails: xstate_cjsExports.enqueueActions(({ context: context2, enqueue, event }) => {
-      if (xstate_cjsExports.assertEvent(event, "open.elementDetails"), context2.overlays.some((o2) => o2.type === "elementDetails" && o2.subject === event.subject))
+      if (xstate_cjsExports.assertEvent(event, "open.elementDetails"), context2.overlays.some((o) => o.type === "elementDetails" && o.subject === event.subject))
         return;
       const id = `elementDetails-${context2.seq}`;
       enqueue.spawnChild("elementDetails", {
@@ -14216,7 +14646,7 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
     }),
     openRelationshipDetails: xstate_cjsExports.enqueueActions(({ context: context2, enqueue, event }) => {
       xstate_cjsExports.assertEvent(event, "open.relationshipDetails");
-      const currentOverlay = a(context2.overlays);
+      const currentOverlay = t$7(context2.overlays);
       if ((currentOverlay == null ? void 0 : currentOverlay.type) === "relationshipDetails") {
         enqueue.sendTo(currentOverlay.id, {
           ...event,
@@ -14241,7 +14671,7 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
     }),
     openRelationshipsBrowser: xstate_cjsExports.enqueueActions(({ context: context2, enqueue, event }) => {
       xstate_cjsExports.assertEvent(event, "open.relationshipsBrowser");
-      const currentOverlay = a(context2.overlays);
+      const currentOverlay = t$7(context2.overlays);
       if ((currentOverlay == null ? void 0 : currentOverlay.type) === "relationshipsBrowser") {
         enqueue.sendTo(currentOverlay.id, {
           type: "navigate.to",
@@ -14273,13 +14703,13 @@ const relationshipDetailsLogic = xstate_cjsExports.setup({
   },
   guards: {
     "has overlays?": ({ context: context2 }) => context2.overlays.length > 0,
-    "close specific overlay?": ({ context: context2, event }) => (xstate_cjsExports.assertEvent(event, "close"), t$4(event.actorId) && context2.overlays.some((o2) => o2.id === event.actorId)),
+    "close specific overlay?": ({ context: context2, event }) => (xstate_cjsExports.assertEvent(event, "close"), e$a(event.actorId) && context2.overlays.some((o) => o.id === event.actorId)),
     "last: is relationshipDetails?": ({ context: context2 }) => {
-      const lastOverlay = a(context2.overlays);
+      const lastOverlay = t$7(context2.overlays);
       return (lastOverlay == null ? void 0 : lastOverlay.type) === "relationshipDetails";
     },
     "last: is relationshipsBrowser?": ({ context: context2 }) => {
-      const lastOverlay = a(context2.overlays);
+      const lastOverlay = t$7(context2.overlays);
       return (lastOverlay == null ? void 0 : lastOverlay.type) === "relationshipsBrowser";
     }
   }
@@ -14471,19 +14901,19 @@ class GridAligner extends Aligner {
     return ((_a = this.layout) == null ? void 0 : _a.get(node2.id)) ?? {};
   }
   computeLayout(nodes) {
-    const sortedNodeRects = C(
+    const sortedNodeRects = t$1(
       nodes,
-      a$2((r2) => r2[this.primaryAxisCoord])
+      t$h((r2) => r2[this.primaryAxisCoord])
     ), layoutRect = this.getLayoutRect(sortedNodeRects), layers = this.getLayers(sortedNodeRects);
     this.layout = this.buildLayout(layers, layoutRect, sortedNodeRects);
   }
   getLayoutRect(nodeRects) {
-    const x = Math.min(...nodeRects.map((n2) => n2.x)), y2 = Math.min(...nodeRects.map((n2) => n2.y)), right = Math.max(...nodeRects.map((n2) => n2.x + n2.width)), bottom = Math.max(...nodeRects.map((n2) => n2.y + n2.height));
+    const x = Math.min(...nodeRects.map((n2) => n2.x)), y = Math.min(...nodeRects.map((n2) => n2.y)), right = Math.max(...nodeRects.map((n2) => n2.x + n2.width)), bottom = Math.max(...nodeRects.map((n2) => n2.y + n2.height));
     return {
       x,
-      y: y2,
+      y,
       width: right - x,
-      height: bottom - y2
+      height: bottom - y
     };
   }
   getLayers(sortedNodeRects) {
@@ -14504,14 +14934,14 @@ class GridAligner extends Aligner {
         }, layers.push(layer), layerEnd = node2[this.primaryAxisCoord] + node2[this.primaryAxisDimension];
         continue;
       }
-    return layers.forEach((l2) => l2.nodes.sort((a2, b) => a2[this.secondaryAxisCoord] - b[this.secondaryAxisCoord])), layers;
+    return layers.forEach((l) => l.nodes.sort((a, b) => a[this.secondaryAxisCoord] - b[this.secondaryAxisCoord])), layers;
   }
   buildLayout(layers, layoutRect, nodeRects) {
-    const nodeMap = new Map(nodeRects.map((n2) => [n2.id, n2])), layout = [], occupiedSpace = layers.reduce((a2, b) => a2 + b.primaryAxisSize, 0), rowMargin = layers.length > 1 ? (layoutRect[this.primaryAxisDimension] - occupiedSpace) / (layers.length - 1) : 0, baseLayerIndex = layers.reduce(
-      (widestLayerIndex, layer, i2) => layers[widestLayerIndex].occupiedSpace < layer.occupiedSpace ? i2 : widestLayerIndex,
+    const nodeMap = new Map(nodeRects.map((n2) => [n2.id, n2])), layout = [], occupiedSpace = layers.reduce((a, b) => a + b.primaryAxisSize, 0), rowMargin = layers.length > 1 ? (layoutRect[this.primaryAxisDimension] - occupiedSpace) / (layers.length - 1) : 0, baseLayerIndex = layers.reduce(
+      (widestLayerIndex, layer, i) => layers[widestLayerIndex].occupiedSpace < layer.occupiedSpace ? i : widestLayerIndex,
       0
     ), baseLayer = layers[baseLayerIndex], baseLayerPosition = layers.slice(0, baseLayerIndex).reduce(
-      (a2, layer) => a2 + layer.primaryAxisSize + rowMargin,
+      (a, layer) => a + layer.primaryAxisSize + rowMargin,
       layoutRect[this.primaryAxisCoord]
     ), baseLayerLayout = this.buildLayerLayout(
       baseLayer,
@@ -14522,13 +14952,13 @@ class GridAligner extends Aligner {
     );
     baseLayer.layout = baseLayerLayout, layout.push(...baseLayerLayout.nodePositions);
     let placeNextLayerAt = baseLayerPosition + baseLayer.primaryAxisSize + rowMargin, refLayer = baseLayer;
-    for (let i2 = baseLayerIndex + 1; i2 < layers.length; i2++) {
-      const layer = layers[i2];
+    for (let i = baseLayerIndex + 1; i < layers.length; i++) {
+      const layer = layers[i];
       layer.layout = this.buildLayerLayout(layer, layoutRect, placeNextLayerAt, nodeMap, refLayer), layout.push(...layer.layout.nodePositions), refLayer = layer.layout.refLayer ?? layer, placeNextLayerAt += layer.primaryAxisSize + rowMargin;
     }
     placeNextLayerAt = baseLayerPosition, refLayer = baseLayer;
-    for (let i2 = baseLayerIndex - 1; i2 >= 0; i2--) {
-      const layer = layers[i2];
+    for (let i = baseLayerIndex - 1; i >= 0; i--) {
+      const layer = layers[i];
       placeNextLayerAt -= layer.primaryAxisSize + rowMargin, layer.layout = this.buildLayerLayout(layer, layoutRect, placeNextLayerAt, nodeMap, refLayer), layout.push(...layer.layout.nodePositions), refLayer = layer.layout.refLayer ?? layer;
     }
     return new Map(layout);
@@ -14576,7 +15006,7 @@ class GridAligner extends Aligner {
     const margin = (layoutRect[this.secondaryAxisDimension] - layer.occupiedSpace) / (layer.nodes.length + 1);
     let placeNextNodeAt = layoutRect[this.secondaryAxisCoord] + margin;
     const result = /* @__PURE__ */ new Map();
-    for (let node2 of a$2(layer.nodes, (n2) => n2[this.secondaryAxisCoord]))
+    for (let node2 of t$h(layer.nodes, (n2) => n2[this.secondaryAxisCoord]))
       result.set(node2.id, {
         [this.secondaryAxisCoord]: placeNextNodeAt,
         [this.primaryAxisCoord]: placeNextLayerAt
@@ -14586,10 +15016,10 @@ class GridAligner extends Aligner {
   placeInGaps(layer, placeNextLayerAt, refLayer) {
     const result = /* @__PURE__ */ new Map(), nodes = layer.nodes, placementOptions = this.getGapsPositions(refLayer);
     let optionIndex = 0;
-    for (let i2 = 0, node2 = nodes[i2]; i2 < nodes.length; i2++, node2 = nodes[i2]) {
+    for (let i = 0, node2 = nodes[i]; i < nodes.length; i++, node2 = nodes[i]) {
       const nodeCenter = node2[this.secondaryAxisCoord] + node2[this.secondaryAxisDimension] / 2;
       let bestOffset = 1 / 0;
-      for (; optionIndex - i2 <= placementOptions.length - nodes.length; ) {
+      for (; optionIndex - i <= placementOptions.length - nodes.length; ) {
         const offset2 = placementOptions[optionIndex] - nodeCenter;
         if (Math.abs(offset2) < Math.abs(bestOffset))
           bestOffset = offset2, optionIndex++;
@@ -14606,10 +15036,10 @@ class GridAligner extends Aligner {
   placeInCells(layer, placeNextLayerAt, refLayer) {
     const result = /* @__PURE__ */ new Map(), nodes = layer.nodes, placementOptions = this.getNodePositions(refLayer);
     let optionIndex = 0;
-    for (let i2 = 0, node2 = nodes[i2]; i2 < nodes.length; i2++, node2 = nodes[i2]) {
+    for (let i = 0, node2 = nodes[i]; i < nodes.length; i++, node2 = nodes[i]) {
       const nodeCenter = node2[this.secondaryAxisCoord] + node2[this.secondaryAxisDimension] / 2;
       let bestOffset = 1 / 0;
-      for (; optionIndex - i2 <= placementOptions.length - nodes.length; ) {
+      for (; optionIndex - i <= placementOptions.length - nodes.length; ) {
         const offset2 = placementOptions[optionIndex] - nodeCenter;
         if (Math.abs(offset2) < Math.abs(bestOffset))
           bestOffset = offset2, optionIndex++;
@@ -14625,16 +15055,16 @@ class GridAligner extends Aligner {
   }
   scoreLayout(layout, originalRects) {
     return [
-      C(
+      t$1(
         Array.from(layout.nodePositions),
-        m$2(([id, position]) => {
+        t$c(([id, position]) => {
           const originalRect = originalRects.get(id);
-          return invariant$1(originalRect, `Could not find original rect for node ${id}`), [i$4(originalRect, ["x", "y"]), position];
+          return invariant$1(originalRect, `Could not find original rect for node ${id}`), [t$k(originalRect, ["x", "y"]), position];
         }),
-        m$2(
+        t$c(
           ([original, suggested]) => Math.abs(original[this.secondaryAxisCoord] - suggested[this.secondaryAxisCoord])
         ),
-        l$1((a2, b) => a2 + b, 0)
+        t$f((a, b) => a + b, 0)
       ),
       layout
     ];
@@ -14642,8 +15072,8 @@ class GridAligner extends Aligner {
   getGapsPositions(layer) {
     const result = [], { layout, nodes } = layer;
     invariant$1(layout, "Layout of the layer must be computed before calling getGapsPositions");
-    for (let i2 = 1; i2 < nodes.length; i2++) {
-      const previousNode = nodes[i2 - 1], currentNode = nodes[i2], previousNodePosition = layout.nodePositions.get(previousNode.id), currentNodePosition = layout.nodePositions.get(currentNode.id);
+    for (let i = 1; i < nodes.length; i++) {
+      const previousNode = nodes[i - 1], currentNode = nodes[i], previousNodePosition = layout.nodePositions.get(previousNode.id), currentNodePosition = layout.nodePositions.get(currentNode.id);
       result.push(
         (currentNodePosition[this.secondaryAxisCoord] + previousNodePosition[this.secondaryAxisCoord] + previousNode[this.secondaryAxisDimension]) / 2
       );
@@ -14653,8 +15083,8 @@ class GridAligner extends Aligner {
   getNodePositions(layer) {
     const result = [], { layout, nodes } = layer;
     invariant$1(layout, "Layout of the layer must be computed before calling getGapsPositions");
-    for (let i2 = 0; i2 < nodes.length; i2++) {
-      const node2 = nodes[i2], nodePosition = layout.nodePositions.get(node2.id);
+    for (let i = 0; i < nodes.length; i++) {
+      const node2 = nodes[i], nodePosition = layout.nodePositions.get(node2.id);
       result.push(
         nodePosition[this.secondaryAxisCoord] + node2[this.secondaryAxisDimension] / 2
       );
@@ -14746,7 +15176,7 @@ function mergeXYNodesEdges({ context: context2, event }) {
     if (existing) {
       const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
       return deepEqual(existing.type, update.type) && deepEqual(existingWidth, update.initialWidth) && deepEqual(existingHeight, update.initialHeight) && deepEqual(existing.hidden ?? !1, update.hidden ?? !1) && deepEqual(existing.position, update.position) && deepEqual(existing.data, update.data) && deepEqual(existing.parentId ?? null, update.parentId ?? null) ? existing : {
-        ...y(existing, ["measured", "parentId"]),
+        ...n$5(existing, ["measured", "parentId"]),
         ...update,
         // Force dimensions from update
         width: update.initialWidth,
@@ -14927,7 +15357,7 @@ function updateNodeData({ context: context2, event }) {
   return xstate_cjsExports.assertEvent(event, "update.nodeData"), { xynodes: context2.xynodes.map((node2) => {
     if (node2.id !== event.nodeId)
       return node2;
-    const data = D(node2.data, event.data);
+    const data = n$6(node2.data, event.data);
     return deepEqual(data, node2.data) ? node2 : {
       ...node2,
       data
@@ -14938,7 +15368,7 @@ function updateEdgeData({ context: context2, event }) {
   return xstate_cjsExports.assertEvent(event, "update.edgeData"), { xyedges: context2.xyedges.map((edge) => {
     if (edge.id !== event.edgeId)
       return edge;
-    const data = D(edge.data, event.data);
+    const data = n$6(edge.data, event.data);
     return deepEqual(data, edge.data) ? edge : {
       ...edge,
       data
@@ -14980,7 +15410,7 @@ function resetEdgeControlPoints({ context: context2 }) {
     return vector(v).mul(scale2).add(nodeCenter);
   }
   return {
-    xyedges: context2.xyedges.map((edge) => !edge.data.controlPoints || n$1(edge.data.controlPoints) ? edge : {
+    xyedges: context2.xyedges.map((edge) => !edge.data.controlPoints || e$4(edge.data.controlPoints) ? edge : {
       ...edge,
       data: {
         ...edge.data,
@@ -15037,7 +15467,7 @@ const hotkeyActorLogic = xstate_cjsExports.fromCallback(({ sendBack }) => {
     }
   },
   write(toggledFeatures) {
-    return sessionStorage.setItem(key, JSON.stringify(d$2(toggledFeatures, e$1))), toggledFeatures;
+    return sessionStorage.setItem(key, JSON.stringify(t$m(toggledFeatures, e$b))), toggledFeatures;
   }
 }, _syncManualLayoutActorLogic = xstate_cjsExports.setup({
   types: {
@@ -15129,7 +15559,7 @@ const hotkeyActorLogic = xstate_cjsExports.fromCallback(({ sendBack }) => {
 function createViewChange(parentContext) {
   const { view, xystore, xyflow: xyflow2 } = parentContext, { nodeLookup } = xystore.getState(), movedNodes = /* @__PURE__ */ new Set();
   let bounds;
-  const nodes = l$1([...nodeLookup.values()], (acc, node2) => {
+  const nodes = t$f([...nodeLookup.values()], (acc, node2) => {
     const dimensions = getNodeDimensions(node2);
     (!isSamePoint(node2.internals.positionAbsolute, node2.data.position) || node2.initialWidth !== dimensions.width || node2.initialHeight !== dimensions.height) && movedNodes.add(node2.id);
     const rect = acc[node2.id] = {
@@ -15140,7 +15570,7 @@ function createViewChange(parentContext) {
       height: Math.ceil(dimensions.height)
     };
     return bounds = bounds ? getBoundsOfRects(bounds, rect) : rect, acc;
-  }, {}), edges = l$1((xyflow2 == null ? void 0 : xyflow2.getEdges()) ?? [], (acc, { source, target, data }) => {
+  }, {}), edges = t$f((xyflow2 == null ? void 0 : xyflow2.getEdges()) ?? [], (acc, { source, target, data }) => {
     let controlPoints = data.controlPoints ?? [];
     const sourceOrTargetMoved = movedNodes.has(source) || movedNodes.has(target);
     if (controlPoints.length === 0 && sourceOrTargetMoved && (controlPoints = bezierControlPoints(data)), data.points.length === 0 && controlPoints.length === 0)
@@ -15151,14 +15581,14 @@ function createViewChange(parentContext) {
     data.labelXY && data.labelBBox && (_updated.labelBBox = {
       ...data.labelBBox,
       ...data.labelXY
-    }), data.labelBBox && (_updated.labelBBox ?? (_updated.labelBBox = data.labelBBox)), i(controlPoints, 1) && (_updated.controlPoints = controlPoints);
+    }), data.labelBBox && (_updated.labelBBox ?? (_updated.labelBBox = data.labelBBox)), t$6(controlPoints, 1) && (_updated.controlPoints = controlPoints);
     const allX = [
-      ...data.points.map((p2) => p2[0]),
-      ...controlPoints.map((p2) => p2.x),
+      ...data.points.map((p) => p[0]),
+      ...controlPoints.map((p) => p.x),
       ..._updated.labelBBox ? [_updated.labelBBox.x, _updated.labelBBox.x + _updated.labelBBox.width] : []
     ], allY = [
-      ...data.points.map((p2) => p2[1]),
-      ...controlPoints.map((p2) => p2.y),
+      ...data.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)),
@@ -15223,10 +15653,6 @@ const _diagramMachine = xstate_cjsExports.setup({
       type: "navigateTo",
       viewId: nonNullable(context2.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
     })),
-    "trigger:OnChange": xstate_cjsExports.emit((_, _params) => ({
-      type: "viewChange",
-      change: _params.change
-    })),
     "trigger:OpenSource": xstate_cjsExports.emit((_, _params) => ({
       type: "openSource",
       params: _params
@@ -15234,6 +15660,9 @@ const _diagramMachine = xstate_cjsExports.setup({
     "assign lastClickedNode": xstate_cjsExports.assign(({ context: context2, event }) => (xstate_cjsExports.assertEvent(event, "xyflow.nodeClick"), {
       lastClickedNode: lastClickedNode({ context: context2, event })
     })),
+    "reset lastClickedNode": xstate_cjsExports.assign(() => ({
+      lastClickedNode: null
+    })),
     "open source of focused or last clicked node": xstate_cjsExports.enqueueActions(({ context: context2, enqueue }) => {
       var _a;
       const nodeId = context2.focusedNode ?? ((_a = context2.lastClickedNode) == null ? void 0 : _a.id);
@@ -15267,10 +15696,10 @@ const _diagramMachine = xstate_cjsExports.setup({
       viewport.x = Math.round(viewport.x), viewport.y = Math.round(viewport.y), panZoom == null || panZoom.setViewport(viewport, duration > 0 ? { duration } : void 0);
     },
     "xyflow:setViewportCenter": ({ context: context2 }, params) => {
-      const { x, y: y2 } = params;
+      const { x, y } = params;
       invariant$1(context2.xyflow, "xyflow is not initialized");
       const zoom = context2.xyflow.getZoom();
-      context2.xyflow.setCenter(Math.round(x), Math.round(y2), { zoom });
+      context2.xyflow.setCenter(Math.round(x), Math.round(y), { zoom });
     },
     "xyflow:setViewport": ({ context: context2 }, params) => {
       var _a;
@@ -15296,7 +15725,7 @@ const _diagramMachine = xstate_cjsExports.setup({
     },
     "layout.align": ({ context: context2 }, params) => {
       const { mode } = params, xystore = nonNullable(context2.xystore, "xystore is not initialized"), { nodeLookup, parentLookup } = xystore.getState(), nodesToAlign = [...new Set(nodeLookup.values().filter((n2) => n2.selected).map((n2) => n2.id)).difference(new Set(parentLookup.keys()))];
-      if (!i(nodesToAlign, 2)) {
+      if (!t$6(nodesToAlign, 2)) {
         console.warn("At least 2 nodes must be selected to align");
         return;
       }
@@ -15438,6 +15867,19 @@ const _diagramMachine = xstate_cjsExports.setup({
     "emit: edgeEditingStarted": xstate_cjsExports.emit(({ context: context2, event }) => (xstate_cjsExports.assertEvent(event, "xyflow.edgeEditingStarted"), {
       type: "edgeEditingStarted",
       edge: nonNullable(context2.xyedges.find((x) => x.id === event.edge.id), `Edge ${event.edge.id} not found`)
+    })),
+    "emit: paneClick": xstate_cjsExports.emit(() => ({
+      type: "paneClick"
+    })),
+    "emit: nodeClick": xstate_cjsExports.emit(({ context: context2, event }) => (xstate_cjsExports.assertEvent(event, "xyflow.nodeClick"), {
+      type: "nodeClick",
+      node: nonNullable(findDiagramNode(context2, event.node.id), `Node ${event.node.id} not found in diagram`),
+      xynode: event.node
+    })),
+    "emit: edgeClick": xstate_cjsExports.emit(({ context: context2, event }) => (xstate_cjsExports.assertEvent(event, "xyflow.edgeClick"), {
+      type: "edgeClick",
+      edge: nonNullable(findDiagramEdge(context2, event.edge.id), `Edge ${event.edge.id} not found in diagram`),
+      xyedge: event.edge
     }))
   }
 }).createMachine({
@@ -15615,7 +16057,7 @@ const _diagramMachine = xstate_cjsExports.setup({
         "open.source": {
           actions: {
             type: "trigger:OpenSource",
-            params: p("event")
+            params: e$6("event")
           }
         },
         "walkthrough.start": {
@@ -15633,13 +16075,13 @@ const _diagramMachine = xstate_cjsExports.setup({
         "xyflow.nodeMouseEnter": {
           actions: {
             type: "onNodeMouseEnter",
-            params: p("event")
+            params: e$6("event")
           }
         },
         "xyflow.nodeMouseLeave": {
           actions: {
             type: "onNodeMouseLeave",
-            params: p("event")
+            params: e$6("event")
           }
         },
         "xyflow.edgeMouseEnter": {
@@ -15651,7 +16093,7 @@ const _diagramMachine = xstate_cjsExports.setup({
         "notations.highlight": {
           actions: {
             type: "notations.highlight",
-            params: p("event")
+            params: e$6("event")
           }
         },
         "notations.unhighlight": {
@@ -15703,27 +16145,29 @@ const _diagramMachine = xstate_cjsExports.setup({
                   xstate_cjsExports.assign({
                     lastClickedNode,
                     focusedNode: ({ event }) => event.node.id
-                  })
+                  }),
+                  "emit: nodeClick"
                 ],
                 target: "focused"
               },
               {
                 actions: [
                   "assign lastClickedNode",
-                  "open source of focused or last clicked node"
+                  "open source of focused or last clicked node",
+                  "emit: nodeClick"
                 ]
               }
             ],
             "xyflow.paneClick": {
               actions: [
-                xstate_cjsExports.assign({
-                  lastClickedNode: null
-                })
+                "reset lastClickedNode",
+                "emit: paneClick"
               ]
             },
             "xyflow.paneDblClick": {
               actions: [
-                { type: "xyflow:fitDiagram" },
+                "reset lastClickedNode",
+                "xyflow:fitDiagram",
                 { type: "trigger:OpenSource", params: ({ context: context2 }) => ({ view: context2.view.id }) }
               ]
             },
@@ -15739,10 +16183,13 @@ const _diagramMachine = xstate_cjsExports.setup({
                 "is dynamic view",
                 "click: selected edge"
               ]),
-              actions: xstate_cjsExports.raise(({ event }) => ({
-                type: "walkthrough.start",
-                stepId: event.edge.id
-              }))
+              actions: [
+                xstate_cjsExports.raise(({ event }) => ({
+                  type: "walkthrough.start",
+                  stepId: event.edge.id
+                })),
+                "emit: edgeClick"
+              ]
             }
           }
         },
@@ -15766,6 +16213,7 @@ const _diagramMachine = xstate_cjsExports.setup({
             "xyflow.nodeClick": [
               {
                 guard: "click: focused node",
+                actions: "emit: nodeClick",
                 target: "#idle"
               },
               {
@@ -15776,7 +16224,8 @@ const _diagramMachine = xstate_cjsExports.setup({
                   xstate_cjsExports.raise(({ event }) => ({
                     type: "focus.node",
                     nodeId: event.node.id
-                  }))
+                  })),
+                  "emit: nodeClick"
                 ]
               }
             ],
@@ -15794,9 +16243,10 @@ const _diagramMachine = xstate_cjsExports.setup({
               target: "idle"
             },
             "xyflow.paneClick": {
-              actions: xstate_cjsExports.assign({
-                lastClickedNode: null
-              }),
+              actions: [
+                "reset lastClickedNode",
+                "emit: paneClick"
+              ],
               target: "idle"
             },
             "notations.unhighlight": {
@@ -15814,7 +16264,7 @@ const _diagramMachine = xstate_cjsExports.setup({
               viewportBeforeFocus: ({ context: context2 }) => context2.viewport,
               activeWalkthrough: ({ context: context2, event }) => {
                 xstate_cjsExports.assertEvent(event, "walkthrough.start");
-                const stepId = event.stepId ?? d(context2.xyedges).id;
+                const stepId = event.stepId ?? n$1(context2.xyedges).id;
                 return {
                   stepId,
                   parallelPrefix: getParallelStepsPrefix(stepId)
@@ -15838,7 +16288,7 @@ const _diagramMachine = xstate_cjsExports.setup({
             "walkthrough.step": {
               actions: [
                 xstate_cjsExports.assign(({ context: context2, event }) => {
-                  const { stepId } = context2.activeWalkthrough, stepIndex = context2.xyedges.findIndex((e2) => e2.id === stepId), nextStepIndex = u$1(event.direction === "next" ? stepIndex + 1 : stepIndex - 1, {
+                  const { stepId } = context2.activeWalkthrough, stepIndex = context2.xyedges.findIndex((e2) => e2.id === stepId), nextStepIndex = t$5(event.direction === "next" ? stepIndex + 1 : stepIndex - 1, {
                     min: 0,
                     max: context2.xyedges.length - 1
                   });
@@ -15870,6 +16320,7 @@ const _diagramMachine = xstate_cjsExports.setup({
                 }),
                 "update active walkthrough",
                 "xyflow:fitFocusedBounds",
+                "emit: edgeClick",
                 "emit: walkthroughStep"
               ]
             },
@@ -15937,6 +16388,15 @@ const _diagramMachine = xstate_cjsExports.setup({
     }
   },
   on: {
+    "xyflow.paneClick": {
+      actions: "emit: paneClick"
+    },
+    "xyflow.nodeClick": {
+      actions: "emit: nodeClick"
+    },
+    "xyflow.edgeClick": {
+      actions: "emit: edgeClick"
+    },
     "xyflow.applyNodeChanges": {
       actions: xstate_cjsExports.assign({
         xynodes: ({ context: context2, event }) => applyNodeChanges(event.changes, context2.xynodes)
@@ -15960,7 +16420,7 @@ const _diagramMachine = xstate_cjsExports.setup({
       guard: "enabled: FitView",
       actions: {
         type: "xyflow:fitDiagram",
-        params: p("event")
+        params: e$6("event")
       }
     },
     "update.nodeData": {
@@ -16079,9 +16539,7 @@ function DiagramActorProvider({
         nodesSelectable
       }
     }
-  );
-  useActorEventHandlers(actorRef);
-  const features = useEnabledFeatures();
+  ), features = useEnabledFeatures();
   useCustomCompareEffect(
     () => {
       actorRef.send({ type: "update.features", features });
@@ -16104,26 +16562,21 @@ function DiagramActorProvider({
     actorRef.send({ type: "update.view", view, xyedges, xynodes });
   }, [view, xyedges, xynodes]);
   const toggledFeatures = xstateReact_cjsExports.useSelector(actorRef, selectToggledFeatures, shallowEqual);
-  return /* @__PURE__ */ jsx(DiagramActorContextProvider, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { viewId: view.id, children }) }) }) });
+  return /* @__PURE__ */ jsxs(DiagramActorContextProvider, { value: actorRef, children: [
+    /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { children }) }) }),
+    /* @__PURE__ */ jsx(DiagramActorEventListener, { actorRef })
+  ] });
 }
-function CurrentViewModelProvider({
-  children,
-  viewId
-}) {
-  const viewmodel = useLikeC4Model().findView(viewId);
+function CurrentViewModelProvider({ children }) {
+  const viewId = useCurrentViewId(), viewmodel = useLikeC4Model().findView(viewId);
   return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children });
 }
-function useActorEventHandlers(actorRef) {
+function DiagramActorEventListener({ actorRef }) {
   const {
-    onChange,
     onNavigateTo,
     onOpenSource
   } = useDiagramEventHandlers();
-  useEffect(() => {
-    if (!onChange) return;
-    const subscription = actorRef.on("viewChange", ({ change }) => onChange({ change }));
-    return () => subscription.unsubscribe();
-  }, [actorRef, onChange]), useEffect(() => {
+  return useOnDiagramEvent("openSource", ({ params }) => onOpenSource == null ? void 0 : onOpenSource(params)), useEffect(() => {
     if (!onNavigateTo) return;
     let frame;
     const subscription = actorRef.on("navigateTo", ({ viewId }) => {
@@ -16134,11 +16587,7 @@ function useActorEventHandlers(actorRef) {
     return () => {
       cancelAnimationFrame(frame), subscription.unsubscribe();
     };
-  }, [actorRef, onNavigateTo]), useEffect(() => {
-    if (!onOpenSource) return;
-    const subscription = actorRef.on("openSource", ({ params }) => onOpenSource(params));
-    return () => subscription.unsubscribe();
-  }, [actorRef, onOpenSource]);
+  }, [actorRef, onNavigateTo]), null;
 }
 function LikeC4Diagram({
   onCanvasClick,
@@ -16185,7 +16634,7 @@ function LikeC4Diagram({
   children
 }) {
   var _a, _b;
-  const id = useId().replace("mantine-", "likec4-"), initialRef = useRef(null);
+  const id = useId(), initialRef = useRef(null);
   initialRef.current == null && (initialRef.current = {
     defaultEdges: [],
     defaultNodes: [],
@@ -16337,6 +16786,21 @@ export {
   useLikeC4Model as b,
   css as c,
   useUpdateEffect as d,
-  LikeC4Diagram as e,
+  IconStarFilled as e,
+  IconStack2 as f,
+  IconLayoutDashboard as g,
+  IconFileCode as h,
+  IconFolderOpen as i,
+  IconFolderFilled as j,
+  IconArrowLeft as k,
+  IconMoonStars as l,
+  IconSun as m,
+  IconChevronDown as n,
+  IconAlertTriangle as o,
+  IconCheck as p,
+  IconCopy as q,
+  IconExternalLink as r,
+  IconShare as s,
+  LikeC4Diagram as t,
   useLikeC4Projects as u
 };