likec4 1.7.4 → 1.8.0

package/dist/__app__/src/main.js

@@ -2,17 +2,19 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { createContext as createContext$1, useLayoutEffect as useLayoutEffect$1, useEffect as useEffect$1, useContext as useContext$1, useRef as useRef$1, useInsertionEffect, useCallback as useCallback$1, useMemo as useMemo$1, forwardRef as forwardRef$1, Fragment as Fragment$1, createElement as createElement$1, useId as useId$1, Children, isValidElement, useState as useState$1, memo as memo$1, Component, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { L as Link, c as createRootRouteWithContext, S as ScrollRestoration, O as Outlet, a as createFileRoute, u as useRouter, b as useParams, d as useRouterState, i as isNotFound, n as notFound, R as RouterProvider, e as createRouter$1, f as createHashHistory, g as createBrowserHistory } from "./chunks/tanstack-router-C3bHLsEH.js";
-import { C as Container, T as Title, a as Text$1, G as Group, B as Button, c as createTheme, M as MantineProvider, b as MantineContext, u as useHotkeys, d as clsx, e as Box, A as ActionIcon$2, H as HoverCard, f as HoverCardTarget, U as UnstyledButton, g as HoverCardDropdown, S as Stack, h as Anchor, i as CopyButton$1, j as useLocalStorage, k as Card, l as CardSection, m as Spoiler, n as ButtonGroup, r as rem, D as Divider, o as Space, p as TooltipGroup, F as Flex, q as Tooltip$2, s as ColorSwatch, t as CheckIcon, v as Select, w as Slider, x as SegmentedControl, P as Popover, y as PopoverTarget, z as PopoverDropdown, E as FloatingIndicator, N as Notification, I as Code, J as SimpleGrid, K as useMantineColorScheme, L as useTree, O as useComputedColorScheme, Q as Tree, R as ThemeIcon, V as Drawer, W as ScrollArea, X as Alert, Y as ModalRoot, Z as ModalOverlay, _ as ModalContent, $ as ModalBody, a0 as Tabs, a1 as TabsList, a2 as TabsTab, a3 as TabsPanel, a4 as useMantineTheme, a5 as useMediaQuery, a6 as useDisclosure, a7 as Paper, a8 as Menu, a9 as MenuTarget, aa as MenuDropdown, ab as MenuLabel, ac as MenuItem, ad as LoadingOverlay, ae as useCallbackRef, af as Burger, ag as Loader } from "./chunks/mantine-CIkjlE3R.js";
-import { ComponentName, basepath, useHashHistory } from "./const.js";
-import { u as useReactFlow, a as useStoreApi, b as useNodesData, c as useStore, d as createWithEqualityFn, e as applyNodeChanges, f as applyEdgeChanges, g as getViewportForBounds, h as getNodeDimensions, i as getBoundsOfRects, s as shallow$1, j as boxToRect, k as useStoreWithEqualityFn, E as EdgeLabelRenderer, H as Handle, P as Position, l as useOnViewportChange, m as index, n as useOnSelectionChange, B as Background, o as BackgroundVariant, C as Controls, R as ReactFlowProvider } from "./chunks/likec4-DA506XqP.js";
+import { L as Link, c as createRootRouteWithContext, S as ScrollRestoration, O as Outlet, u as useRouter, a as createFileRoute, b as useParams, d as useRouterState, i as isNotFound, n as notFound, R as RouterProvider, e as createRouter$1, f as createHashHistory, g as createBrowserHistory } from "./chunks/tanstack-router-ma6rQsdz.js";
+import { C as Container, T as Title, a as Text$1, G as Group, B as Button, c as createTheme, M as MantineProvider, b as MantineContext, u as useHotkeys, d as clsx, e as Box, A as ActionIcon$2, H as HoverCard, f as HoverCardTarget, U as UnstyledButton, g as HoverCardDropdown, S as Stack, h as Anchor, i as CopyButton$1, j as useLocalStorage, k as Card, l as CardSection, m as Spoiler, n as ButtonGroup, o as Tooltip$2, p as ThemeIcon, P as Paper, q as Tabs, r as TabsList, s as TabsTab, t as TabsPanel, v as ScrollAreaAutosize, w as Badge, x as rem, D as Divider, y as Space, z as TooltipGroup, F as Flex, E as ColorSwatch, I as CheckIcon, J as Select, K as Slider, L as SegmentedControl, N as Popover, O as PopoverTarget, Q as PopoverDropdown, R as FloatingIndicator, V as Notification, W as Code, X as Center, Y as Image, Z as useMantineColorScheme, _ as SimpleGrid, $ as useTree, a0 as useComputedColorScheme, a1 as Tree, a2 as Drawer, a3 as ScrollArea, a4 as Alert, a5 as ModalRoot, a6 as ModalOverlay, a7 as ModalContent, a8 as ModalBody, a9 as useMantineTheme, aa as useMediaQuery, ab as useDisclosure, ac as Menu, ad as MenuTarget, ae as MenuDropdown, af as MenuLabel, ag as MenuItem, ah as LoadingOverlay, ai as useCallbackRef, aj as Burger, ak as Loader } from "./chunks/mantine-BYr8JSNL.js";
+import { withOverviewGraph, ComponentName, basepath, useHashHistory } from "./const.js";
+import { useOverviewGraph } from "virtual:likec4/overview-graph";
+import { u as useReactFlow, a as useStoreApi, b as useNodesData, c as useStore, d as createWithEqualityFn, e as applyNodeChanges, f as applyEdgeChanges, g as getViewportForBounds, h as getNodeDimensions, i as getBoundsOfRects, s as shallow$1, j as boxToRect, k as useStoreWithEqualityFn, E as EdgeLabelRenderer, H as Handle, P as Position, l as useOnViewportChange, m as index, n as useOnSelectionChange, B as Background, o as BackgroundVariant, C as Controls, R as ReactFlowProvider, p as BaseEdge, q as useNodesState, r as useEdgesState } from "./chunks/likec4-Blyd4UZO.js";
+import { usePreviewUrl } from "virtual:likec4/previews";
 import { useLikeC4Views, useLikeC4View } from "virtual:likec4/store";
 import { RenderIcon } from "./icons.js";
 import { useStore as useStore$1 } from "@nanostores/react";
 import { atom, onMount } from "nanostores";
-var content = "_1u4wf800", image = "_1u4wf801", inner = "_1u4wf802", root = "_1u4wf803", description$2 = "_1u4wf804", title$3 = "_1u4wf805";
+var content = "_1u4wf800", image = "_1u4wf801", inner = "_1u4wf802", root$1 = "_1u4wf803", description$2 = "_1u4wf804", title$3 = "_1u4wf805";
 function NotFound() {
-  return /* @__PURE__ */ jsx(Container, { className: root, children: /* @__PURE__ */ jsxs("div", { className: inner, children: [
+  return /* @__PURE__ */ jsx(Container, { className: root$1, children: /* @__PURE__ */ jsxs("div", { className: inner, children: [
     /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 362 145", className: image, children: /* @__PURE__ */ jsx(
       "path",
       {
@@ -78,83 +80,473 @@ function RootComponent() {
     )
   ] });
 }
-var getOwnPropertyNames = Object.getOwnPropertyNames, getOwnPropertySymbols = Object.getOwnPropertySymbols, hasOwnProperty = Object.prototype.hasOwnProperty;
-function combineComparators(comparatorA, comparatorB) {
-  return function(a2, b2, state) {
-    return comparatorA(a2, b2, state) && comparatorB(a2, b2, state);
-  };
+const blue$1 = {
+  fill: "#3b82f6",
+  stroke: "#2563eb",
+  hiContrast: "#eff6ff",
+  loContrast: "#bfdbfe"
+}, sky$1 = {
+  fill: "#0284c7",
+  stroke: "#0369a1",
+  hiContrast: "#f0f9ff",
+  loContrast: "#B6ECF7"
+}, slate$1 = {
+  fill: "#64748b",
+  stroke: "#475569",
+  hiContrast: "#f8fafc",
+  loContrast: "#cbd5e1"
+}, ElementColors = {
+  primary: blue$1,
+  blue: blue$1,
+  secondary: sky$1,
+  sky: sky$1,
+  muted: slate$1,
+  slate: slate$1,
+  gray: {
+    // fill: colors.neutral[500],
+    // stroke: colors.neutral[600],
+    // hiContrast: colors.neutral[50],
+    // loContrast: colors.neutral[200],
+    fill: "#737373",
+    stroke: "#525252",
+    hiContrast: "#fafafa",
+    loContrast: "#d4d4d4"
+  },
+  red: {
+    // fill: colors.red[500],
+    // stroke: colors.red[600],
+    // hiContrast: colors.red[50],
+    // loContrast: colors.red[200],
+    fill: "#AC4D39",
+    // fill: '#b54548',
+    stroke: "#853A2D",
+    // hiContrast: '#fef2f2',
+    // loContrast: '#fecaca',
+    // hiContrast: '#191111', // colors.gray[900],
+    // loContrast: '#3b1219' // colors.gray[800],
+    hiContrast: "#FBD3CB",
+    // hiContrast: '#f8fafc',
+    // loContrast: '#fdd8d8' // radix black red 12
+    loContrast: "#f5b2a3"
+  },
+  green: {
+    fill: "#428a4f",
+    stroke: "#2d5d39",
+    hiContrast: "#f8fafc",
+    loContrast: "#c2f0c2"
+  },
+  amber: {
+    fill: "#A35829",
+    stroke: "#7E451D",
+    hiContrast: "#FFE0C2",
+    loContrast: "#f9b27c"
+  },
+  indigo: {
+    // fill: colors.indigo[500],
+    // stroke: colors.indigo[600],
+    // hiContrast: colors.indigo[50],
+    // loContrast: colors.indigo[200],
+    fill: "#6366f1",
+    stroke: "#4f46e5",
+    hiContrast: "#eef2ff",
+    loContrast: "#c7d2fe"
+  }
+}, gray = {
+  lineColor: "#6E6E6E",
+  labelBgColor: "#18191b",
+  labelColor: "#C6C6C6"
+}, slate = {
+  lineColor: "#64748b",
+  // 500
+  labelBgColor: "#0f172a",
+  // 900
+  labelColor: "#cbd5e1"
+  // 300
+}, blue = {
+  lineColor: "#3b82f6",
+  // 500
+  labelBgColor: "#172554",
+  // 950
+  labelColor: "#60a5fa"
+  // 400
+}, sky = {
+  lineColor: "#0ea5e9",
+  // 500
+  labelBgColor: "#082f49",
+  // 950
+  labelColor: "#38bdf8"
+  // 400
+}, RelationshipColors = {
+  amber: {
+    lineColor: "#b45309",
+    labelBgColor: "#78350f",
+    labelColor: "#FFE0C2"
+  },
+  blue,
+  gray,
+  green: {
+    lineColor: "#15803d",
+    // 700
+    labelBgColor: "#052e16",
+    // 950
+    labelColor: "#22c55e"
+    // 500
+  },
+  indigo: {
+    lineColor: "#6366f1",
+    // 500
+    labelBgColor: "#1e1b4b",
+    // 950
+    labelColor: "#818cf8"
+    // 400
+  },
+  muted: slate,
+  primary: blue,
+  red: {
+    lineColor: "#AC4D39",
+    labelBgColor: "#b91c1c",
+    labelColor: "#f5b2a3"
+  },
+  secondary: sky,
+  sky,
+  slate
+}, defaultTheme = {
+  elements: ElementColors,
+  relationships: RelationshipColors,
+  font: "Arial",
+  shadow: "#0a0a0a"
+};
+function fixProto(target, prototype) {
+  var setPrototypeOf = Object.setPrototypeOf;
+  setPrototypeOf ? setPrototypeOf(target, prototype) : target.__proto__ = prototype;
 }
-function createIsCircular(areItemsEqual) {
-  return function(a2, b2, state) {
-    if (!a2 || !b2 || typeof a2 != "object" || typeof b2 != "object")
-      return areItemsEqual(a2, b2, state);
-    var cache = state.cache, cachedA = cache.get(a2), cachedB = cache.get(b2);
-    if (cachedA && cachedB)
-      return cachedA === b2 && cachedB === a2;
-    cache.set(a2, b2), cache.set(b2, a2);
-    var result = areItemsEqual(a2, b2, state);
-    return cache.delete(a2), cache.delete(b2), result;
+function fixStack(target, fn) {
+  fn === void 0 && (fn = target.constructor);
+  var captureStackTrace = Error.captureStackTrace;
+  captureStackTrace && captureStackTrace(target, fn);
+}
+var __extends = /* @__PURE__ */ function() {
+  var _extendStatics = function(d2, b2) {
+    return _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function(d3, b3) {
+      d3.__proto__ = b3;
+    } || function(d3, b3) {
+      for (var p2 in b3)
+        Object.prototype.hasOwnProperty.call(b3, p2) && (d3[p2] = b3[p2]);
+    }, _extendStatics(d2, b2);
+  };
+  return function(d2, b2) {
+    if (typeof b2 != "function" && b2 !== null) throw new TypeError("Class extends value " + String(b2) + " is not a constructor or null");
+    _extendStatics(d2, b2);
+    function __() {
+      this.constructor = d2;
+    }
+    d2.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
   };
+}(), CustomError = function(_super) {
+  __extends(CustomError2, _super);
+  function CustomError2(message, options) {
+    var _newTarget = this.constructor, _this = _super.call(this, message, options) || this;
+    return Object.defineProperty(_this, "name", {
+      value: _newTarget.name,
+      enumerable: !1,
+      configurable: !0
+    }), fixProto(_this, _newTarget.prototype), fixStack(_this), _this;
+  }
+  return CustomError2;
+}(Error), s = { done: !1, hasNext: !1 };
+function u$6(t2, n2, a2) {
+  let o2 = (r2) => t2(r2, ...n2);
+  return a2 === void 0 ? o2 : Object.assign(o2, { lazy: a2, lazyArgs: n2 });
 }
-function getStrictProperties(object) {
-  return getOwnPropertyNames(object).concat(getOwnPropertySymbols(object));
+function u$5(r2, n2, a2) {
+  let o2 = r2.length - n2.length;
+  if (o2 === 0) return r2(...n2);
+  if (o2 === 1) return u$6(r2, n2, a2);
+  throw new Error("Wrong number of arguments");
 }
-var hasOwn = Object.hasOwn || function(object, property) {
-  return hasOwnProperty.call(object, property);
-};
-function sameValueZeroEqual(a2, b2) {
-  return a2 || b2 ? a2 === b2 : a2 === b2 || a2 !== a2 && b2 !== b2;
+function r$3(...t2) {
+  return u$5(Object.values, t2);
 }
-var OWNER = "_owner", getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor, keys = Object.keys;
-function areArraysEqual(a2, b2, state) {
-  var index2 = a2.length;
-  if (b2.length !== index2)
-    return !1;
-  for (; index2-- > 0; )
-    if (!state.equals(a2[index2], b2[index2], index2, index2, a2, b2, state))
-      return !1;
-  return !0;
+function i$3(...e2) {
+  return u$5(r$2, e2);
 }
-function areDatesEqual(a2, b2) {
-  return sameValueZeroEqual(a2.getTime(), b2.getTime());
+var r$2 = (e2, t2) => e2.length >= t2;
+function u$4(...e2) {
+  return u$5(i$2, e2);
 }
-function areMapsEqual(a2, b2, state) {
-  if (a2.size !== b2.size)
-    return !1;
-  for (var matchedIndices = {}, aIterable = a2.entries(), index2 = 0, aResult, bResult; (aResult = aIterable.next()) && !aResult.done; ) {
-    for (var bIterable = b2.entries(), hasMatch = !1, matchIndex = 0; (bResult = bIterable.next()) && !bResult.done; ) {
-      var _a = aResult.value, aKey = _a[0], aValue = _a[1], _b = bResult.value, bKey = _b[0], bValue = _b[1];
-      !hasMatch && !matchedIndices[matchIndex] && (hasMatch = state.equals(aKey, bKey, index2, matchIndex, a2, b2, state) && state.equals(aValue, bValue, aKey, bKey, a2, b2, state)) && (matchedIndices[matchIndex] = !0), matchIndex++;
-    }
-    if (!hasMatch)
-      return !1;
-    index2++;
+function i$2(e2, a2) {
+  let n2 = [];
+  for (let [o2, r2] of e2.entries()) {
+    if (!a2(r2, o2, e2)) break;
+    n2.push(r2);
   }
-  return !0;
+  return n2;
 }
-function areObjectsEqual(a2, b2, state) {
-  var properties = keys(a2), index2 = properties.length;
-  if (keys(b2).length !== index2)
-    return !1;
-  for (var property; index2-- > 0; )
-    if (property = properties[index2], property === OWNER && (a2.$$typeof || b2.$$typeof) && a2.$$typeof !== b2.$$typeof || !hasOwn(b2, property) || !state.equals(a2[property], b2[property], property, property, a2, b2, state))
-      return !1;
-  return !0;
+function l$1(...e2) {
+  return u$5(u$3, e2);
 }
-function areObjectsEqualStrict(a2, b2, state) {
-  var properties = getStrictProperties(a2), index2 = properties.length;
-  if (getStrictProperties(b2).length !== index2)
-    return !1;
-  for (var property, descriptorA, descriptorB; index2-- > 0; )
-    if (property = properties[index2], property === OWNER && (a2.$$typeof || b2.$$typeof) && a2.$$typeof !== b2.$$typeof || !hasOwn(b2, property) || !state.equals(a2[property], b2[property], property, property, a2, b2, state) || (descriptorA = getOwnPropertyDescriptor(a2, property), descriptorB = getOwnPropertyDescriptor(b2, property), (descriptorA || descriptorB) && (!descriptorA || !descriptorB || descriptorA.configurable !== descriptorB.configurable || descriptorA.enumerable !== descriptorB.enumerable || descriptorA.writable !== descriptorB.writable)))
-      return !1;
-  return !0;
+var u$3 = (e2, a2, n2) => e2.reduce(a2, n2);
+function b(t2) {
+  return (e2, r2) => {
+    if (r2 === 0) return t2(e2);
+    if (!Number.isInteger(r2)) throw new TypeError(`precision must be an integer: ${r2}`);
+    if (r2 > 15 || r2 < -15) throw new RangeError("precision must be between -15 and 15");
+    if (Number.isNaN(e2) || !Number.isFinite(e2)) return t2(e2);
+    let n2 = 10 ** r2;
+    return t2(e2 * n2) / n2;
+  };
 }
-function arePrimitiveWrappersEqual(a2, b2) {
-  return sameValueZeroEqual(a2.valueOf(), b2.valueOf());
+function p$1(...o2) {
+  return u$5(t$4, o2);
 }
-function areRegExpsEqual(a2, b2) {
-  return a2.source === b2.source && a2.flags === b2.flags;
+var t$4 = (o2, e2) => o2[e2];
+function a$2(...n2) {
+  return u$5(c, n2);
+}
+function c(n2, r2) {
+  let o2 = {};
+  for (let e2 of r2) e2 in n2 && (o2[e2] = n2[e2]);
+  return o2;
+}
+function t$3(...n2) {
+  return u$5(Object.keys, n2);
+}
+function a$1(...e2) {
+  return u$5(n$2, e2);
+}
+var n$2 = (e2) => e2.at(-1);
+function m$1(...a2) {
+  return u$5(o$2, a2, p);
+}
+var o$2 = (a2, e2) => a2.map(e2), p = (a2) => (e2, r2, t2) => ({ done: !1, hasNext: !0, next: a2(e2, r2, t2) });
+function n$1(e2) {
+  return !!e2;
+}
+function l(n2) {
+  return n2 != null;
+}
+function o$1(a2) {
+  return (t2) => !a2(t2);
+}
+function e$3(n2) {
+  return n2 == null;
+}
+function e$2(r2) {
+  return typeof r2 == "number" && !Number.isNaN(r2);
+}
+function n(r2) {
+  return Array.isArray(r2);
+}
+var e$1 = (n2) => Object.assign(n2, { single: !0 });
+function f(...e2) {
+  return u$5(i$1, e2, e$1(u$2));
+}
+var i$1 = (e2, n2) => e2.find(n2), u$2 = (e2) => (n2, t2, o2) => e2(n2, t2, o2) ? { done: !0, hasNext: !0, next: n2 } : s;
+function d(...e2) {
+  return u$5(r$1, e2, e$1(o));
+}
+var r$1 = ([e2]) => e2, o = () => a, a = (e2) => ({ hasNext: !0, next: e2, done: !0 });
+function t$2(...r2) {
+  return u$5(Object.entries, r2);
+}
+function t$1(...a2) {
+  return u$5(e, a2);
+}
+var e = (a2, o2) => o2.every((l2) => l2(a2));
+function y$1(...a2) {
+  return u$5(r, a2);
+}
+var r = (a2, o2) => o2.some((e2) => e2(a2));
+function u$1(...e2) {
+  return u$5(b(Math.ceil), e2);
+}
+function u(...n2) {
+  return u$5(i, n2);
+}
+var i = (n2, { min: e2, max: r2 }) => e2 !== void 0 && n2 < e2 ? e2 : r2 !== void 0 && n2 > r2 ? r2 : n2;
+function isString$1(value) {
+  return value != null && typeof value == "string";
+}
+class BaseError extends CustomError {
+  constructor(message, options) {
+    super(message, options), Object.defineProperty(this, "name", { value: "BaseError" });
+  }
+}
+class NullableError extends BaseError {
+  constructor(message, options) {
+    super(message, options), Object.defineProperty(this, "name", { value: "NullableError" });
+  }
+}
+class InvariantError extends BaseError {
+  constructor(message, options) {
+    super(message, options), Object.defineProperty(this, "name", { value: "InvariantError" });
+  }
+}
+function nonNullable(value, message) {
+  if (typeof value > "u" || value == null)
+    throw new NullableError(message ?? `Expected defined value, but received ${value}`);
+  return value;
+}
+function invariant$1(condition, message) {
+  if (!condition)
+    throw new InvariantError(message ?? "Invariant failed");
+}
+class NonExhaustiveError extends BaseError {
+  constructor(message, options) {
+    super(message, options), Object.defineProperty(this, "name", { value: "NonExhaustiveError" });
+  }
+}
+function nonexhaustive(value) {
+  throw new NonExhaustiveError(`NonExhaustive value: ${value}`);
+}
+const ElementShapes = [
+  "rectangle",
+  "person",
+  "browser",
+  "mobile",
+  "cylinder",
+  "storage",
+  "queue"
+], isTagEqual = (operator) => "tag" in operator, isKindEqual = (operator) => "kind" in operator, isNotOperator = (operator) => "not" in operator, isAndOperator = (operator) => "and" in operator, isOrOperator = (operator) => "or" in operator;
+function whereOperatorAsPredicate(operator) {
+  switch (!0) {
+    case isTagEqual(operator): {
+      if ("eq" in operator.tag) {
+        const tag2 = operator.tag.eq;
+        return (value) => Array.isArray(value.tags) && value.tags.includes(tag2);
+      }
+      const tag = operator.tag.neq;
+      return (value) => !Array.isArray(value.tags) || !value.tags.includes(tag);
+    }
+    case isKindEqual(operator): {
+      if ("eq" in operator.kind) {
+        const kind2 = operator.kind.eq;
+        return (value) => value.kind === kind2;
+      }
+      const kind = operator.kind.neq;
+      return (value) => e$3(value.kind) || value.kind !== kind;
+    }
+    case isNotOperator(operator): {
+      const predicate = whereOperatorAsPredicate(operator.not);
+      return o$1(predicate);
+    }
+    case isAndOperator(operator): {
+      const predicates = operator.and.map(whereOperatorAsPredicate);
+      return t$1(predicates);
+    }
+    case isOrOperator(operator): {
+      const predicates = operator.or.map(whereOperatorAsPredicate);
+      return y$1(predicates);
+    }
+    default:
+      nonexhaustive(operator);
+  }
+}
+function StepEdgeId(step) {
+  return `step-${String(step).padStart(3, "0")}`;
+}
+function isStepEdgeId(id2) {
+  return id2.startsWith("step-");
+}
+function extractStep(id2) {
+  if (!isStepEdgeId(id2))
+    throw new Error(`Invalid step edge id: ${id2}`);
+  return Number(id2.slice(5));
+}
+function getBBoxCenter({
+  x: x2,
+  y: y2,
+  width,
+  height
+}) {
+  return {
+    x: x2 + width / 2,
+    y: y2 + height / 2
+  };
+}
+function isAncestor(...args) {
+  const ancestor = isString$1(args[0]) ? args[0] : args[0].id;
+  return (isString$1(args[1]) ? args[1] : args[1].id).startsWith(ancestor + ".");
+}
+var getOwnPropertyNames = Object.getOwnPropertyNames, getOwnPropertySymbols = Object.getOwnPropertySymbols, hasOwnProperty = Object.prototype.hasOwnProperty;
+function combineComparators(comparatorA, comparatorB) {
+  return function(a2, b2, state) {
+    return comparatorA(a2, b2, state) && comparatorB(a2, b2, state);
+  };
+}
+function createIsCircular(areItemsEqual) {
+  return function(a2, b2, state) {
+    if (!a2 || !b2 || typeof a2 != "object" || typeof b2 != "object")
+      return areItemsEqual(a2, b2, state);
+    var cache = state.cache, cachedA = cache.get(a2), cachedB = cache.get(b2);
+    if (cachedA && cachedB)
+      return cachedA === b2 && cachedB === a2;
+    cache.set(a2, b2), cache.set(b2, a2);
+    var result = areItemsEqual(a2, b2, state);
+    return cache.delete(a2), cache.delete(b2), result;
+  };
+}
+function getStrictProperties(object) {
+  return getOwnPropertyNames(object).concat(getOwnPropertySymbols(object));
+}
+var hasOwn = Object.hasOwn || function(object, property) {
+  return hasOwnProperty.call(object, property);
+};
+function sameValueZeroEqual(a2, b2) {
+  return a2 || b2 ? a2 === b2 : a2 === b2 || a2 !== a2 && b2 !== b2;
+}
+var OWNER = "_owner", getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor, keys = Object.keys;
+function areArraysEqual(a2, b2, state) {
+  var index2 = a2.length;
+  if (b2.length !== index2)
+    return !1;
+  for (; index2-- > 0; )
+    if (!state.equals(a2[index2], b2[index2], index2, index2, a2, b2, state))
+      return !1;
+  return !0;
+}
+function areDatesEqual(a2, b2) {
+  return sameValueZeroEqual(a2.getTime(), b2.getTime());
+}
+function areMapsEqual(a2, b2, state) {
+  if (a2.size !== b2.size)
+    return !1;
+  for (var matchedIndices = {}, aIterable = a2.entries(), index2 = 0, aResult, bResult; (aResult = aIterable.next()) && !aResult.done; ) {
+    for (var bIterable = b2.entries(), hasMatch = !1, matchIndex = 0; (bResult = bIterable.next()) && !bResult.done; ) {
+      var _a = aResult.value, aKey = _a[0], aValue = _a[1], _b = bResult.value, bKey = _b[0], bValue = _b[1];
+      !hasMatch && !matchedIndices[matchIndex] && (hasMatch = state.equals(aKey, bKey, index2, matchIndex, a2, b2, state) && state.equals(aValue, bValue, aKey, bKey, a2, b2, state)) && (matchedIndices[matchIndex] = !0), matchIndex++;
+    }
+    if (!hasMatch)
+      return !1;
+    index2++;
+  }
+  return !0;
+}
+function areObjectsEqual(a2, b2, state) {
+  var properties = keys(a2), index2 = properties.length;
+  if (keys(b2).length !== index2)
+    return !1;
+  for (var property; index2-- > 0; )
+    if (property = properties[index2], property === OWNER && (a2.$$typeof || b2.$$typeof) && a2.$$typeof !== b2.$$typeof || !hasOwn(b2, property) || !state.equals(a2[property], b2[property], property, property, a2, b2, state))
+      return !1;
+  return !0;
+}
+function areObjectsEqualStrict(a2, b2, state) {
+  var properties = getStrictProperties(a2), index2 = properties.length;
+  if (getStrictProperties(b2).length !== index2)
+    return !1;
+  for (var property, descriptorA, descriptorB; index2-- > 0; )
+    if (property = properties[index2], property === OWNER && (a2.$$typeof || b2.$$typeof) && a2.$$typeof !== b2.$$typeof || !hasOwn(b2, property) || !state.equals(a2[property], b2[property], property, property, a2, b2, state) || (descriptorA = getOwnPropertyDescriptor(a2, property), descriptorB = getOwnPropertyDescriptor(b2, property), (descriptorA || descriptorB) && (!descriptorA || !descriptorB || descriptorA.configurable !== descriptorB.configurable || descriptorA.enumerable !== descriptorB.enumerable || descriptorA.writable !== descriptorB.writable)))
+      return !1;
+  return !0;
+}
+function arePrimitiveWrappersEqual(a2, b2) {
+  return sameValueZeroEqual(a2.valueOf(), b2.valueOf());
+}
+function areRegExpsEqual(a2, b2) {
+  return a2.source === b2.source && a2.flags === b2.flags;
 }
 function areSetsEqual(a2, b2, state) {
   if (a2.size !== b2.size)
@@ -300,7 +692,7 @@ function createCustomEqual(options) {
   return createIsEqual({ circular, comparator, createState: createState2, equals, strict });
 }
 const MotionConfigContext = createContext$1({
-  transformPagePoint: (p) => p,
+  transformPagePoint: (p2) => p2,
   isStatic: !1,
   reducedMotion: "never"
 }), MotionContext = createContext$1({}), PresenceContext = createContext$1(null), isBrowser$1 = typeof window < "u", useIsomorphicLayoutEffect$2 = isBrowser$1 ? useLayoutEffect$1 : useEffect$1, LazyContext = createContext$1({ strict: !1 }), camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase(), optimizedAppearDataId = "framerAppearId", optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId), MotionGlobalConfig = {
@@ -517,7 +909,7 @@ function loadFeatures(features) {
     };
 }
 const LayoutGroupContext = createContext$1({}), motionComponentSymbol = Symbol.for("motionComponentSymbol"), noop$1 = (any) => any;
-let invariant$1 = noop$1;
+let invariant = noop$1;
 function createMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component: Component2 }) {
   preloadedFeatures && loadFeatures(preloadedFeatures);
   function MotionComponent(props2, externalRef) {
@@ -650,14 +1042,14 @@ const isMotionValue = (value) => !!(value && value.getVelocity), getValueAsType
   ...number,
   default: 1
 }, sanitize = (v) => Math.round(v * 1e5) / 1e5, floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu, colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu, singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu;
-function isString$1(v) {
+function isString(v) {
   return typeof v == "string";
 }
 function isNullish(v) {
   return v == null;
 }
 const createUnitType = (unit) => ({
-  test: (v) => isString$1(v) && v.endsWith(unit) && v.split(" ").length === 1,
+  test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1,
   parse: parseFloat,
   transform: (v) => `${v}${unit}`
 }), degrees = createUnitType("deg"), percent = createUnitType("%"), px = createUnitType("px"), vh = createUnitType("vh"), vw = createUnitType("vw"), progressPercentage = {
@@ -761,7 +1153,7 @@ function buildTransform(latestValues, transform, transformTemplate) {
 }
 const checkStringStartsWith = (token) => (key) => typeof key == "string" && key.startsWith(token), isCSSVariableName = checkStringStartsWith("--"), startsAsVariableToken = checkStringStartsWith("var(--"), isCSSVariableToken = (value) => startsAsVariableToken(value) ? singleCssVariableRegex.test(value.split("/*")[0].trim()) : !1, singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
 function buildHTMLStyles(state, latestValues, transformTemplate) {
-  const { style, vars, transformOrigin } = state;
+  const { style, vars: vars2, transformOrigin } = state;
   let hasTransform = !1, hasTransformOrigin = !1;
   for (const key in latestValues) {
     const value = latestValues[key];
@@ -769,7 +1161,7 @@ function buildHTMLStyles(state, latestValues, transformTemplate) {
       hasTransform = !0;
       continue;
     } else if (isCSSVariableName(key)) {
-      vars[key] = value;
+      vars2[key] = value;
       continue;
     } else {
       const valueAsType = getValueAsType(value, numberValueTypes[key]);
@@ -920,10 +1312,10 @@ function createUseRender(forwardMotionProps = !1) {
     });
   };
 }
-function renderHTML(element, { style, vars }, styleProp, projection) {
+function renderHTML(element, { style, vars: vars2 }, styleProp, projection) {
   Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
-  for (const key in vars)
-    element.style.setProperty(key, vars[key]);
+  for (const key in vars2)
+    element.style.setProperty(key, vars2[key]);
 }
 const camelCaseAttributes = /* @__PURE__ */ new Set([
   "baseFrequency",
@@ -1380,16 +1772,7 @@ function getFinalKeyframe(keyframes2, { repeat, repeatType = "loop" }, finalKeyf
   const resolvedKeyframes = keyframes2.filter(isNotNull), index2 = repeat && repeatType !== "loop" && repeat % 2 === 1 ? 0 : resolvedKeyframes.length - 1;
   return !index2 || finalKeyframe === void 0 ? resolvedKeyframes[index2] : finalKeyframe;
 }
-let now;
-function clearTime() {
-  now = void 0;
-}
-const time = {
-  now: () => (now === void 0 && time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming ? frameData.timestamp : performance.now()), now),
-  set: (newTime) => {
-    now = newTime, queueMicrotask(clearTime);
-  }
-}, isZeroValueString = (v) => /^0[^.\s]+$/u.test(v);
+const isZeroValueString = (v) => /^0[^.\s]+$/u.test(v);
 function isNone(value) {
   return typeof value == "number" ? value === 0 : value !== null ? value === "none" || value === "0" || isZeroValueString(value) : !0;
 }
@@ -1531,14 +1914,14 @@ class KeyframeResolver {
     this.isComplete || this.scheduleResolve();
   }
 }
-const isColorString = (type, testProp) => (v) => !!(isString$1(v) && singleColorRegex.test(v) && v.startsWith(type) || testProp && !isNullish(v) && Object.prototype.hasOwnProperty.call(v, testProp)), splitColor = (aName, bName, cName) => (v) => {
-  if (!isString$1(v))
+const isColorString = (type, testProp) => (v) => !!(isString(v) && singleColorRegex.test(v) && v.startsWith(type) || testProp && !isNullish(v) && Object.prototype.hasOwnProperty.call(v, testProp)), splitColor = (aName, bName, cName) => (v) => {
+  if (!isString(v))
     return v;
-  const [a2, b2, c, alpha2] = v.match(floatRegex);
+  const [a2, b2, c2, alpha2] = v.match(floatRegex);
   return {
     [aName]: parseFloat(a2),
     [bName]: parseFloat(b2),
-    [cName]: parseFloat(c),
+    [cName]: parseFloat(c2),
     alpha: alpha2 !== void 0 ? parseFloat(alpha2) : 1
   };
 }, clampRgbUnit = (v) => clamp(0, 255, v), rgbUnit = {
@@ -1569,11 +1952,11 @@ const hex = {
 }, color = {
   test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
   parse: (v) => rgba.test(v) ? rgba.parse(v) : hsla.test(v) ? hsla.parse(v) : hex.parse(v),
-  transform: (v) => isString$1(v) ? v : v.hasOwnProperty("red") ? rgba.transform(v) : hsla.transform(v)
+  transform: (v) => isString(v) ? v : v.hasOwnProperty("red") ? rgba.transform(v) : hsla.transform(v)
 };
 function test(v) {
   var _a, _b;
-  return isNaN(v) && isString$1(v) && (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) + (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0;
+  return isNaN(v) && isString(v) && (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) + (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0;
 }
 const NUMBER_TOKEN = "number", COLOR_TOKEN = "color", VAR_TOKEN = "var", VAR_FUNCTION_TOKEN = "var(", SPLIT_TOKEN = "${}", complexRegex = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;
 function analyseComplexValue(value) {
@@ -1662,12 +2045,12 @@ function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, n
       unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate);
 }
 class DOMKeyframesResolver extends KeyframeResolver {
-  constructor(unresolvedKeyframes, onComplete, name, motionValue2) {
-    super(unresolvedKeyframes, onComplete, name, motionValue2, motionValue2?.owner, !0);
+  constructor(unresolvedKeyframes, onComplete, name, motionValue2, element) {
+    super(unresolvedKeyframes, onComplete, name, motionValue2, element, !0);
   }
   readKeyframes() {
     const { unresolvedKeyframes, element, name } = this;
-    if (!element.current)
+    if (!element || !element.current)
       return;
     super.readKeyframes();
     for (let i2 = 0; i2 < unresolvedKeyframes.length; i2++) {
@@ -1697,7 +2080,7 @@ class DOMKeyframesResolver extends KeyframeResolver {
   }
   measureInitialState() {
     const { element, unresolvedKeyframes, name } = this;
-    if (!element.current)
+    if (!element || !element.current)
       return;
     name === "height" && (this.suspendedScrollY = window.pageYOffset), this.measuredOrigin = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current)), unresolvedKeyframes[0] = this.measuredOrigin;
     const measureKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
@@ -1706,7 +2089,7 @@ class DOMKeyframesResolver extends KeyframeResolver {
   measureEndState() {
     var _a;
     const { element, name, unresolvedKeyframes } = this;
-    if (!element.current)
+    if (!element || !element.current)
       return;
     const value = element.getValue(name);
     value && value.jump(this.measuredOrigin, !1);
@@ -1720,7 +2103,16 @@ function memo(callback) {
   let result;
   return () => (result === void 0 && (result = callback()), result);
 }
-const isAnimatable = (value, name) => name === "zIndex" ? !1 : !!(typeof value == "number" || Array.isArray(value) || typeof value == "string" && // It's animatable if we have a string
+let now;
+function clearTime() {
+  now = void 0;
+}
+const time = {
+  now: () => (now === void 0 && time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming ? frameData.timestamp : performance.now()), now),
+  set: (newTime) => {
+    now = newTime, queueMicrotask(clearTime);
+  }
+}, isAnimatable = (value, name) => name === "zIndex" ? !1 : !!(typeof value == "number" || Array.isArray(value) || typeof value == "string" && // It's animatable if we have a string
 (complex.test(value) || value === "0") && // And it contains numbers and/or colors
 !value.startsWith("url("));
 function hasKeyframesChanged(keyframes2) {
@@ -1740,9 +2132,10 @@ function canAnimate(keyframes2, name, type, velocity) {
   const targetKeyframe = keyframes2[keyframes2.length - 1], isOriginAnimatable = isAnimatable(originKeyframe, name), isTargetAnimatable = isAnimatable(targetKeyframe, name);
   return !isOriginAnimatable || !isTargetAnimatable ? !1 : hasKeyframesChanged(keyframes2) || type === "spring" && velocity;
 }
+const MAX_RESOLVE_DELAY = 40;
 class BaseAnimation {
   constructor({ autoplay = !0, delay = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", ...options }) {
-    this.isStopped = !1, this.hasAttemptedResolve = !1, this.options = {
+    this.isStopped = !1, this.hasAttemptedResolve = !1, this.createdAt = time.now(), this.options = {
       autoplay,
       delay,
       type,
@@ -1752,6 +2145,19 @@ class BaseAnimation {
       ...options
     }, this.updateFinishedPromise();
   }
+  /**
+   * This method uses the createdAt and resolvedAt to calculate the
+   * animation startTime. *Ideally*, we would use the createdAt time as t=0
+   * as the following frame would then be the first frame of the animation in
+   * progress, which would feel snappier.
+   *
+   * However, if there's a delay (main thread work) between the creation of
+   * the animation and the first commited frame, we prefer to use resolvedAt
+   * to avoid a sudden jump into the animation.
+   */
+  calcStartTime() {
+    return this.resolvedAt ? this.resolvedAt - this.createdAt > MAX_RESOLVE_DELAY ? this.resolvedAt : this.createdAt : this.createdAt;
+  }
   /**
    * A getter for resolved data. If keyframes are not yet resolved, accessing
    * this.resolved will synchronously flush all pending keyframe resolvers.
@@ -1766,7 +2172,7 @@ class BaseAnimation {
    * Otherwise, it will call initPlayback on the implementing class.
    */
   onKeyframesResolved(keyframes2, finalKeyframe) {
-    this.hasAttemptedResolve = !0;
+    this.resolvedAt = time.now(), this.hasAttemptedResolve = !0;
     const { name, type, velocity, delay, onComplete, onUpdate, isGenerator } = this.options;
     if (!isGenerator && !canAnimate(keyframes2, name, type, velocity))
       if (delay)
@@ -1810,8 +2216,8 @@ const safeMin = 1e-3, minDuration = 0.01, maxDuration$1 = 10, minDamping = 0.05,
 function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1 }) {
   let envelope, derivative, dampingRatio = 1 - bounce;
   dampingRatio = clamp(minDamping, maxDamping, dampingRatio), duration = clamp(minDuration, maxDuration$1, millisecondsToSeconds(duration)), dampingRatio < 1 ? (envelope = (undampedFreq2) => {
-    const exponentialDecay = undampedFreq2 * dampingRatio, delta = exponentialDecay * duration, a2 = exponentialDecay - velocity, b2 = calcAngularFreq(undampedFreq2, dampingRatio), c = Math.exp(-delta);
-    return safeMin - a2 / b2 * c;
+    const exponentialDecay = undampedFreq2 * dampingRatio, delta = exponentialDecay * duration, a2 = exponentialDecay - velocity, b2 = calcAngularFreq(undampedFreq2, dampingRatio), c2 = Math.exp(-delta);
+    return safeMin - a2 / b2 * c2;
   }, derivative = (undampedFreq2) => {
     const delta = undampedFreq2 * dampingRatio * duration, d2 = delta * velocity + velocity, e2 = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq2, 2) * duration, f2 = Math.exp(-delta), g = calcAngularFreq(Math.pow(undampedFreq2, 2), dampingRatio);
     return (-envelope(undampedFreq2) + safeMin > 0 ? -1 : 1) * ((d2 - e2) * f2) / g;
@@ -1955,7 +2361,7 @@ function cubicBezier(mX1, mY1, mX2, mY2) {
   const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
   return (t2) => t2 === 0 || t2 === 1 ? t2 : calcBezier(getTForX(t2), mY1, mY2);
 }
-const easeIn = cubicBezier(0.42, 0, 1, 1), easeOut = cubicBezier(0, 0, 0.58, 1), easeInOut = cubicBezier(0.42, 0, 0.58, 1), isEasingArray = (ease2) => Array.isArray(ease2) && typeof ease2[0] != "number", mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2, reverseEasing = (easing) => (p) => 1 - easing(1 - p), circIn = (p) => 1 - Math.sin(Math.acos(p)), circOut = reverseEasing(circIn), circInOut = mirrorEasing(circIn), backOut = cubicBezier(0.33, 1.53, 0.69, 0.99), backIn = reverseEasing(backOut), backInOut = mirrorEasing(backIn), anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1))), easingLookup = {
+const easeIn = cubicBezier(0.42, 0, 1, 1), easeOut = cubicBezier(0, 0, 0.58, 1), easeInOut = cubicBezier(0.42, 0, 0.58, 1), isEasingArray = (ease2) => Array.isArray(ease2) && typeof ease2[0] != "number", mirrorEasing = (easing) => (p2) => p2 <= 0.5 ? easing(2 * p2) / 2 : (2 - easing(2 * (1 - p2))) / 2, reverseEasing = (easing) => (p2) => 1 - easing(1 - p2), circIn = (p2) => 1 - Math.sin(Math.acos(p2)), circOut = reverseEasing(circIn), circInOut = mirrorEasing(circIn), backOut = cubicBezier(0.33, 1.53, 0.69, 0.99), backIn = reverseEasing(backOut), backInOut = mirrorEasing(backIn), anticipate = (p2) => (p2 *= 2) < 1 ? 0.5 * backIn(p2) : 0.5 * (2 - Math.pow(2, -10 * (p2 - 1))), easingLookup = {
   linear: noop$1,
   easeIn,
   easeInOut,
@@ -1969,18 +2375,18 @@ const easeIn = cubicBezier(0.42, 0, 1, 1), easeOut = cubicBezier(0, 0, 0.58, 1),
   anticipate
 }, easingDefinitionToFunction = (definition) => {
   if (Array.isArray(definition)) {
-    invariant$1(definition.length === 4);
+    invariant(definition.length === 4);
     const [x1, y1, x2, y2] = definition;
     return cubicBezier(x1, y1, x2, y2);
   } else if (typeof definition == "string")
-    return invariant$1(easingLookup[definition] !== void 0), easingLookup[definition];
+    return invariant(easingLookup[definition] !== void 0), easingLookup[definition];
   return definition;
 }, progress = (from, to, value) => {
   const toFromDifference = to - from;
   return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
 }, mixNumber$1 = (from, to, progress2) => from + (to - from) * progress2;
-function hueToRgb(p, q, t2) {
-  return t2 < 0 && (t2 += 1), t2 > 1 && (t2 -= 1), t2 < 1 / 6 ? p + (q - p) * 6 * t2 : t2 < 1 / 2 ? q : t2 < 2 / 3 ? p + (q - p) * (2 / 3 - t2) * 6 : p;
+function hueToRgb(p2, q, t2) {
+  return t2 < 0 && (t2 += 1), t2 > 1 && (t2 -= 1), t2 < 1 / 6 ? p2 + (q - p2) * 6 * t2 : t2 < 1 / 2 ? q : t2 < 2 / 3 ? p2 + (q - p2) * (2 / 3 - t2) * 6 : p2;
 }
 function hslaToRgba({ hue, saturation, lightness, alpha: alpha2 }) {
   hue /= 360, saturation /= 100, lightness /= 100;
@@ -1988,8 +2394,8 @@ function hslaToRgba({ hue, saturation, lightness, alpha: alpha2 }) {
   if (!saturation)
     red = green = blue2 = lightness;
   else {
-    const q = lightness < 0.5 ? lightness * (1 + saturation) : lightness + saturation - lightness * saturation, p = 2 * lightness - q;
-    red = hueToRgb(p, q, hue + 1 / 3), green = hueToRgb(p, q, hue), blue2 = hueToRgb(p, q, hue - 1 / 3);
+    const q = lightness < 0.5 ? lightness * (1 + saturation) : lightness + saturation - lightness * saturation, p2 = 2 * lightness - q;
+    red = hueToRgb(p2, q, hue + 1 / 3), green = hueToRgb(p2, q, hue), blue2 = hueToRgb(p2, q, hue - 1 / 3);
   }
   return {
     red: Math.round(red * 255),
@@ -1999,7 +2405,7 @@ function hslaToRgba({ hue, saturation, lightness, alpha: alpha2 }) {
   };
 }
 function mixImmediate(a2, b2) {
-  return (p) => p > 0 ? b2 : a2;
+  return (p2) => p2 > 0 ? b2 : a2;
 }
 const mixLinearColor = (from, to, v) => {
   const fromExpo = from * from, expo = v * (to * to - fromExpo) + fromExpo;
@@ -2020,19 +2426,19 @@ const mixColor = (from, to) => {
   return (v) => (blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v), blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v), blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v), blended.alpha = mixNumber$1(fromRGBA.alpha, toRGBA.alpha, v), rgba.transform(blended));
 }, invisibleValues = /* @__PURE__ */ new Set(["none", "hidden"]);
 function mixVisibility(origin, target) {
-  return invisibleValues.has(origin) ? (p) => p <= 0 ? origin : target : (p) => p >= 1 ? target : origin;
+  return invisibleValues.has(origin) ? (p2) => p2 <= 0 ? origin : target : (p2) => p2 >= 1 ? target : origin;
 }
 function mixNumber(a2, b2) {
-  return (p) => mixNumber$1(a2, b2, p);
+  return (p2) => mixNumber$1(a2, b2, p2);
 }
 function getMixer(a2) {
   return typeof a2 == "number" ? mixNumber : typeof a2 == "string" ? isCSSVariableToken(a2) ? mixImmediate : color.test(a2) ? mixColor : mixComplex : Array.isArray(a2) ? mixArray : typeof a2 == "object" ? color.test(a2) ? mixColor : mixObject : mixImmediate;
 }
 function mixArray(a2, b2) {
   const output = [...a2], numValues = output.length, blendValue = a2.map((v, i2) => getMixer(v)(v, b2[i2]));
-  return (p) => {
+  return (p2) => {
     for (let i2 = 0; i2 < numValues; i2++)
-      output[i2] = blendValue[i2](p);
+      output[i2] = blendValue[i2](p2);
     return output;
   };
 }
@@ -2059,8 +2465,8 @@ const mixComplex = (origin, target) => {
   const template = complex.createTransformer(target), originStats = analyseComplexValue(origin), targetStats = analyseComplexValue(target);
   return originStats.indexes.var.length === targetStats.indexes.var.length && originStats.indexes.color.length === targetStats.indexes.color.length && originStats.indexes.number.length >= targetStats.indexes.number.length ? invisibleValues.has(origin) && !targetStats.values.length || invisibleValues.has(target) && !originStats.values.length ? mixVisibility(origin, target) : pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template) : mixImmediate(origin, target);
 };
-function mix(from, to, p) {
-  return typeof from == "number" && typeof to == "number" && typeof p == "number" ? mixNumber$1(from, to, p) : getMixer(from)(from, to);
+function mix(from, to, p2) {
+  return typeof from == "number" && typeof to == "number" && typeof p2 == "number" ? mixNumber$1(from, to, p2) : getMixer(from)(from, to);
 }
 function createMixers(output, ease2, customMixer) {
   const mixers = [], mixerFactory = customMixer || mix, numMixers = output.length - 1;
@@ -2076,7 +2482,7 @@ function createMixers(output, ease2, customMixer) {
 }
 function interpolate(input, output, { clamp: isClamp = !0, ease: ease2, mixer } = {}) {
   const inputLength = input.length;
-  if (invariant$1(inputLength === output.length), inputLength === 1)
+  if (invariant(inputLength === output.length), inputLength === 1)
     return () => output[0];
   if (inputLength === 2 && input[0] === input[1])
     return () => output[1];
@@ -2153,16 +2559,16 @@ const frameloopDriver = (update) => {
   spring
 }, percentToProgress = (percent2) => percent2 / 100;
 class MainThreadAnimation extends BaseAnimation {
-  constructor({ KeyframeResolver: KeyframeResolver$1 = KeyframeResolver, ...options }) {
-    super(options), this.holdTime = null, this.startTime = null, this.cancelTime = null, this.currentTime = 0, this.playbackSpeed = 1, this.pendingPlayState = "running", this.state = "idle", this.stop = () => {
+  constructor(options) {
+    super(options), this.holdTime = null, this.cancelTime = null, this.currentTime = 0, this.playbackSpeed = 1, this.pendingPlayState = "running", this.startTime = null, this.state = "idle", this.stop = () => {
       if (this.resolver.cancel(), this.isStopped = !0, this.state === "idle")
         return;
       this.teardown();
       const { onStop } = this.options;
       onStop && onStop();
     };
-    const { name, motionValue: motionValue2, keyframes: keyframes2 } = this.options, onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe);
-    name && motionValue2 && motionValue2.owner ? this.resolver = motionValue2.owner.resolveKeyframes(keyframes2, onResolved, name, motionValue2) : this.resolver = new KeyframeResolver$1(keyframes2, onResolved, name, motionValue2), this.resolver.scheduleResolve();
+    const { name, motionValue: motionValue2, element, keyframes: keyframes2 } = this.options, KeyframeResolver$1 = element?.KeyframeResolver || KeyframeResolver, onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe);
+    this.resolver = new KeyframeResolver$1(keyframes2, onResolved, name, motionValue2, element), this.resolver.scheduleResolve();
   }
   initPlayback(keyframes$1) {
     const { type = "keyframes", repeat = 0, repeatDelay = 0, repeatType, velocity = 0 } = this.options, generatorFactory = generators[type] || keyframes;
@@ -2238,10 +2644,10 @@ class MainThreadAnimation extends BaseAnimation {
     }
     if (this.isStopped)
       return;
-    const { driver = frameloopDriver, onPlay } = this.options;
+    const { driver = frameloopDriver, onPlay, startTime } = this.options;
     this.driver || (this.driver = driver((timestamp) => this.tick(timestamp))), onPlay && onPlay();
     const now2 = this.driver.now();
-    this.holdTime !== null ? this.startTime = now2 - this.holdTime : (!this.startTime || this.state === "finished") && (this.startTime = now2), this.state === "finished" && this.updateFinishedPromise(), this.cancelTime = this.startTime, this.holdTime = null, this.state = "running", this.driver.start();
+    this.holdTime !== null ? this.startTime = now2 - this.holdTime : this.startTime ? this.state === "finished" && (this.startTime = now2) : this.startTime = startTime ?? this.calcStartTime(), this.state === "finished" && this.updateFinishedPromise(), this.cancelTime = this.startTime, this.holdTime = null, this.state = "running", this.driver.start();
   }
   pause() {
     var _a;
@@ -2276,7 +2682,7 @@ const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0]
 function isWaapiSupportedEasing(easing) {
   return !!(!easing || typeof easing == "string" && easing in supportedWaapiEasing || isBezierDefinition(easing) || Array.isArray(easing) && easing.every(isWaapiSupportedEasing));
 }
-const cubicBezierAsString = ([a2, b2, c, d2]) => `cubic-bezier(${a2}, ${b2}, ${c}, ${d2})`, supportedWaapiEasing = {
+const cubicBezierAsString = ([a2, b2, c2, d2]) => `cubic-bezier(${a2}, ${b2}, ${c2}, ${d2})`, supportedWaapiEasing = {
   linear: "linear",
   ease: "ease",
   easeIn: "ease-in",
@@ -2334,20 +2740,20 @@ function pregenerateKeyframes(keyframes2, options) {
 class AcceleratedAnimation extends BaseAnimation {
   constructor(options) {
     super(options);
-    const { name, motionValue: motionValue2, keyframes: keyframes2 } = this.options;
-    this.resolver = new DOMKeyframesResolver(keyframes2, (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe), name, motionValue2), this.resolver.scheduleResolve();
+    const { name, motionValue: motionValue2, element, keyframes: keyframes2 } = this.options;
+    this.resolver = new DOMKeyframesResolver(keyframes2, (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe), name, motionValue2, element), this.resolver.scheduleResolve();
   }
   initPlayback(keyframes2, finalKeyframe) {
     var _a;
-    let { duration = 300, times, ease: ease2, type, motionValue: motionValue2, name } = this.options;
+    let { duration = 300, times, ease: ease2, type, motionValue: motionValue2, name, startTime } = this.options;
     if (!(!((_a = motionValue2.owner) === null || _a === void 0) && _a.current))
       return !1;
     if (requiresPregeneratedKeyframes(this.options)) {
-      const { onComplete, onUpdate, motionValue: motionValue3, ...options } = this.options, pregeneratedAnimation = pregenerateKeyframes(keyframes2, options);
+      const { onComplete, onUpdate, motionValue: motionValue3, element, ...options } = this.options, pregeneratedAnimation = pregenerateKeyframes(keyframes2, options);
       keyframes2 = pregeneratedAnimation.keyframes, keyframes2.length === 1 && (keyframes2[1] = keyframes2[0]), duration = pregeneratedAnimation.duration, times = pregeneratedAnimation.times, ease2 = pregeneratedAnimation.ease, type = "keyframes";
     }
     const animation = animateStyle(motionValue2.owner.current, name, keyframes2, { ...this.options, duration, times, ease: ease2 });
-    return animation.startTime = time.now(), this.pendingTimeline ? (animation.timeline = this.pendingTimeline, this.pendingTimeline = void 0) : animation.onfinish = () => {
+    return animation.startTime = startTime ?? this.calcStartTime(), this.pendingTimeline ? (animation.timeline = this.pendingTimeline, this.pendingTimeline = void 0) : animation.onfinish = () => {
       const { onComplete } = this.options;
       motionValue2.set(getFinalKeyframe(keyframes2, this.options, finalKeyframe)), onComplete && onComplete(), this.cancel(), this.resolveFinishedPromise();
     }, {
@@ -2401,6 +2807,13 @@ class AcceleratedAnimation extends BaseAnimation {
     const { animation } = resolved;
     return animation.playState;
   }
+  get startTime() {
+    const { resolved } = this;
+    if (!resolved)
+      return null;
+    const { animation } = resolved;
+    return animation.startTime;
+  }
   /**
    * Replace the default DocumentTimeline with another AnimationTimeline.
    * Currently used for scroll animations.
@@ -2444,7 +2857,7 @@ class AcceleratedAnimation extends BaseAnimation {
     if (animation.playState === "idle" || animation.playState === "finished")
       return;
     if (this.time) {
-      const { motionValue: motionValue2, onUpdate, onComplete, ...options } = this.options, sampleAnimation = new MainThreadAnimation({
+      const { motionValue: motionValue2, onUpdate, onComplete, element, ...options } = this.options, sampleAnimation = new MainThreadAnimation({
         ...options,
         keyframes: keyframes2,
         duration,
@@ -2528,6 +2941,9 @@ class GroupPlaybackControls {
   set speed(speed) {
     this.setAll("speed", speed);
   }
+  get startTime() {
+    return this.getAll("startTime");
+  }
   get duration() {
     let max2 = 0;
     for (let i2 = 0; i2 < this.animations.length; i2++)
@@ -2592,15 +3008,15 @@ class SubscriptionManager {
   add(handler) {
     return addUniqueItem(this.subscriptions, handler), () => removeItem(this.subscriptions, handler);
   }
-  notify(a2, b2, c) {
+  notify(a2, b2, c2) {
     const numSubscriptions = this.subscriptions.length;
     if (numSubscriptions)
       if (numSubscriptions === 1)
-        this.subscriptions[0](a2, b2, c);
+        this.subscriptions[0](a2, b2, c2);
       else
         for (let i2 = 0; i2 < numSubscriptions; i2++) {
           const handler = this.subscriptions[i2];
-          handler && handler(a2, b2, c);
+          handler && handler(a2, b2, c2);
         }
   }
   getSize() {
@@ -2621,7 +3037,7 @@ class MotionValue {
    * @internal
    */
   constructor(init, options = {}) {
-    this.version = "11.3.24", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v, render = !0) => {
+    this.version = "11.3.29", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v, render = !0) => {
       const currentTime = time.now();
       this.updatedAt !== currentTime && this.setPrevFrameValue(), this.prev = this.current, this.setCurrent(v), this.current !== this.prev && this.events.change && this.events.change.notify(this.current), render && this.events.renderRequest && this.events.renderRequest.notify(this.current);
     }, this.hasAnimated = !1, this.setCurrent(init), this.owner = options.owner;
@@ -2872,15 +3288,14 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
       continue;
     const valueTransition = {
       delay,
-      elapsed: 0,
       ...getValueTransition(transition || {}, key)
     };
     let isHandoff = !1;
     if (window.MotionHandoffAnimation) {
       const appearId = getOptimisedAppearId(visualElement);
       if (appearId) {
-        const elapsed = window.MotionHandoffAnimation(appearId, key, frame);
-        elapsed !== null && (valueTransition.elapsed = elapsed, isHandoff = !0);
+        const startTime = window.MotionHandoffAnimation(appearId, key, frame);
+        startTime !== null && (valueTransition.startTime = startTime, isHandoff = !0);
       }
     }
     value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key) ? { type: !1 } : valueTransition, visualElement, isHandoff, addValueToWillChange(visualElement, key)));
@@ -3177,7 +3592,7 @@ class VisualElement {
     return {};
   }
   constructor({ parent, props: props2, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState }, options = {}) {
-    this.applyWillChange = !1, this.resolveKeyframes = (keyframes2, onComplete, name, value) => new this.KeyframeResolver(keyframes2, onComplete, name, value, this), this.current = null, this.children = /* @__PURE__ */ new Set(), this.isVariantNode = !1, this.isControllingVariants = !1, this.shouldReduceMotion = null, this.values = /* @__PURE__ */ new Map(), this.KeyframeResolver = KeyframeResolver, this.features = {}, this.valueSubscriptions = /* @__PURE__ */ new Map(), this.prevMotionValues = {}, this.events = {}, this.propEventSubscriptions = {}, this.notifyUpdate = () => this.notify("Update", this.latestValues), this.render = () => {
+    this.applyWillChange = !1, this.current = null, this.children = /* @__PURE__ */ new Set(), this.isVariantNode = !1, this.isControllingVariants = !1, this.shouldReduceMotion = null, this.values = /* @__PURE__ */ new Map(), this.KeyframeResolver = KeyframeResolver, this.features = {}, this.valueSubscriptions = /* @__PURE__ */ new Map(), this.prevMotionValues = {}, this.events = {}, this.propEventSubscriptions = {}, this.notifyUpdate = () => this.notify("Update", this.latestValues), this.render = () => {
       this.isRenderScheduled = !1, this.current && (this.triggerBuild(), this.renderInstance(this.current, this.renderState, this.props.style, this.projection));
     }, this.isRenderScheduled = !1, this.scheduleRender = () => {
       this.isRenderScheduled || (this.isRenderScheduled = !0, frame.render(this.render, !1, !0));
@@ -3369,595 +3784,221 @@ class VisualElement {
     this.events[eventName] && this.events[eventName].notify(...args);
   }
 }
-class DOMVisualElement extends VisualElement {
-  constructor() {
-    super(...arguments), this.KeyframeResolver = DOMKeyframesResolver;
-  }
-  sortInstanceNodePosition(a2, b2) {
-    return a2.compareDocumentPosition(b2) & 2 ? 1 : -1;
-  }
-  getBaseTargetFromProps(props2, key) {
-    return props2.style ? props2.style[key] : void 0;
-  }
-  removeValueFromRenderState(key, { vars, style }) {
-    delete vars[key], delete style[key];
-  }
-}
-function getComputedStyle$1(element) {
-  return window.getComputedStyle(element);
-}
-class HTMLVisualElement extends DOMVisualElement {
-  constructor() {
-    super(...arguments), this.type = "html", this.applyWillChange = !0, this.renderInstance = renderHTML;
-  }
-  readValueFromInstance(instance, key) {
-    if (transformProps.has(key)) {
-      const defaultType = getDefaultValueType(key);
-      return defaultType && defaultType.default || 0;
-    } else {
-      const computedStyle = getComputedStyle$1(instance), value = (isCSSVariableName(key) ? computedStyle.getPropertyValue(key) : computedStyle[key]) || 0;
-      return typeof value == "string" ? value.trim() : value;
-    }
-  }
-  measureInstanceViewportBox(instance, { transformPagePoint }) {
-    return measureViewportBox(instance, transformPagePoint);
-  }
-  build(renderState, latestValues, props2) {
-    buildHTMLStyles(renderState, latestValues, props2.transformTemplate);
-  }
-  scrapeMotionValuesFromProps(props2, prevProps, visualElement) {
-    return scrapeMotionValuesFromProps$1(props2, prevProps, visualElement);
-  }
-  handleChildMotionValue() {
-    this.childSubscription && (this.childSubscription(), delete this.childSubscription);
-    const { children } = this.props;
-    isMotionValue(children) && (this.childSubscription = children.on("change", (latest) => {
-      this.current && (this.current.textContent = `${latest}`);
-    }));
-  }
-}
-class SVGVisualElement extends DOMVisualElement {
-  constructor() {
-    super(...arguments), this.type = "svg", this.isSVGTag = !1, this.measureInstanceViewportBox = createBox;
-  }
-  getBaseTargetFromProps(props2, key) {
-    return props2[key];
-  }
-  readValueFromInstance(instance, key) {
-    if (transformProps.has(key)) {
-      const defaultType = getDefaultValueType(key);
-      return defaultType && defaultType.default || 0;
-    }
-    return key = camelCaseAttributes.has(key) ? key : camelToDash(key), instance.getAttribute(key);
-  }
-  scrapeMotionValuesFromProps(props2, prevProps, visualElement) {
-    return scrapeMotionValuesFromProps(props2, prevProps, visualElement);
-  }
-  build(renderState, latestValues, props2) {
-    buildSVGAttrs(renderState, latestValues, this.isSVGTag, props2.transformTemplate);
-  }
-  renderInstance(instance, renderState, styleProp, projection) {
-    renderSVG(instance, renderState, styleProp, projection);
-  }
-  mount(instance) {
-    this.isSVGTag = isSVGTag(instance.tagName), super.mount(instance);
-  }
-}
-const createDomVisualElement = (Component2, options) => isSVGComponent(Component2) ? new SVGVisualElement(options) : new HTMLVisualElement(options, {
-  allowProjection: Component2 !== Fragment$1
-}), m = createMotionProxy(createDomMotionConfig);
-class PopChildMeasure extends React.Component {
-  getSnapshotBeforeUpdate(prevProps) {
-    const element = this.props.childRef.current;
-    if (element && prevProps.isPresent && !this.props.isPresent) {
-      const size = this.props.sizeRef.current;
-      size.height = element.offsetHeight || 0, size.width = element.offsetWidth || 0, size.top = element.offsetTop, size.left = element.offsetLeft;
-    }
-    return null;
-  }
-  /**
-   * Required with getSnapshotBeforeUpdate to stop React complaining.
-   */
-  componentDidUpdate() {
-  }
-  render() {
-    return this.props.children;
-  }
-}
-function PopChild({ children, isPresent }) {
-  const id2 = useId$1(), ref = useRef$1(null), size = useRef$1({
-    width: 0,
-    height: 0,
-    top: 0,
-    left: 0
-  }), { nonce } = useContext$1(MotionConfigContext);
-  return useInsertionEffect(() => {
-    const { width, height, top, left } = size.current;
-    if (isPresent || !ref.current || !width || !height)
-      return;
-    ref.current.dataset.motionPopId = id2;
-    const style = document.createElement("style");
-    return nonce && (style.nonce = nonce), document.head.appendChild(style), style.sheet && style.sheet.insertRule(`
-          [data-motion-pop-id="${id2}"] {
-            position: absolute !important;
-            width: ${width}px !important;
-            height: ${height}px !important;
-            top: ${top}px !important;
-            left: ${left}px !important;
-          }
-        `), () => {
-      document.head.removeChild(style);
-    };
-  }, [isPresent]), jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref }) });
-}
-const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom: custom5, presenceAffectsLayout, mode }) => {
-  const presenceChildren = useConstant(newChildrenMap), id2 = useId$1(), context = useMemo$1(
-    () => ({
-      id: id2,
-      initial,
-      isPresent,
-      custom: custom5,
-      onExitComplete: (childId) => {
-        presenceChildren.set(childId, !0);
-        for (const isComplete of presenceChildren.values())
-          if (!isComplete)
-            return;
-        onExitComplete && onExitComplete();
-      },
-      register: (childId) => (presenceChildren.set(childId, !1), () => presenceChildren.delete(childId))
-    }),
-    /**
-     * If the presence of a child affects the layout of the components around it,
-     * we want to make a new context value to ensure they get re-rendered
-     * so they can detect that layout change.
-     */
-    presenceAffectsLayout ? [Math.random()] : [isPresent]
-  );
-  return useMemo$1(() => {
-    presenceChildren.forEach((_, key) => presenceChildren.set(key, !1));
-  }, [isPresent]), React.useEffect(() => {
-    !isPresent && !presenceChildren.size && onExitComplete && onExitComplete();
-  }, [isPresent]), mode === "popLayout" && (children = jsx(PopChild, { isPresent, children })), jsx(PresenceContext.Provider, { value: context, children });
-};
-function newChildrenMap() {
-  return /* @__PURE__ */ new Map();
-}
-const getChildKey = (child) => child.key || "";
-function onlyElements(children) {
-  const filtered = [];
-  return Children.forEach(children, (child) => {
-    isValidElement(child) && filtered.push(child);
-  }), filtered;
-}
-const AnimatePresence = ({ children, exitBeforeEnter, custom: custom5, initial = !0, onExitComplete, presenceAffectsLayout = !0, mode = "sync" }) => {
-  const presentChildren = useMemo$1(() => onlyElements(children), [children]), presentKeys = presentChildren.map(getChildKey), isInitialRender = useRef$1(!0), pendingPresentChildren = useRef$1(presentChildren), exitComplete = useConstant(() => /* @__PURE__ */ new Map()), [diffedChildren, setDiffedChildren] = useState$1(presentChildren), [renderedChildren, setRenderedChildren] = useState$1(presentChildren);
-  useIsomorphicLayoutEffect$2(() => {
-    isInitialRender.current = !1, pendingPresentChildren.current = presentChildren;
-    for (let i2 = 0; i2 < renderedChildren.length; i2++) {
-      const key = getChildKey(renderedChildren[i2]);
-      presentKeys.includes(key) ? exitComplete.delete(key) : exitComplete.get(key) !== !0 && exitComplete.set(key, !1);
-    }
-  }, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
-  const exitingChildren = [];
-  if (presentChildren !== diffedChildren) {
-    let nextChildren = [...presentChildren];
-    for (let i2 = 0; i2 < renderedChildren.length; i2++) {
-      const child = renderedChildren[i2], key = getChildKey(child);
-      presentKeys.includes(key) || (nextChildren.splice(i2, 0, child), exitingChildren.push(child));
-    }
-    mode === "wait" && exitingChildren.length && (nextChildren = exitingChildren), setRenderedChildren(onlyElements(nextChildren)), setDiffedChildren(presentChildren);
-    return;
-  }
-  const { forceRender } = useContext$1(LayoutGroupContext);
-  return jsx(Fragment, { children: renderedChildren.map((child) => {
-    const key = getChildKey(child), isPresent = presentChildren === renderedChildren || presentKeys.includes(key), onExit = () => {
-      if (exitComplete.has(key))
-        exitComplete.set(key, !0);
-      else
-        return;
-      let isEveryExitComplete = !0;
-      exitComplete.forEach((isExitComplete) => {
-        isExitComplete || (isEveryExitComplete = !1);
-      }), isEveryExitComplete && (forceRender?.(), setRenderedChildren(pendingPresentChildren.current), onExitComplete && onExitComplete());
-    };
-    return jsx(PresenceChild, { isPresent, initial: !isInitialRender.current || initial ? void 0 : !1, custom: isPresent ? void 0 : custom5, presenceAffectsLayout, mode, onExitComplete: isPresent ? void 0 : onExit, children: child }, key);
-  }) });
-};
-function LazyMotion({ children, features, strict = !1 }) {
-  const [, setIsLoaded] = useState$1(!isLazyBundle(features)), loadedRenderer = useRef$1(void 0);
-  if (!isLazyBundle(features)) {
-    const { renderer, ...loadedFeatures } = features;
-    loadedRenderer.current = renderer, loadFeatures(loadedFeatures);
-  }
-  return useEffect$1(() => {
-    isLazyBundle(features) && features().then(({ renderer, ...loadedFeatures }) => {
-      loadFeatures(loadedFeatures), loadedRenderer.current = renderer, setIsLoaded(!0);
-    });
-  }, []), jsx(LazyContext.Provider, { value: { renderer: loadedRenderer.current, strict }, children });
-}
-function isLazyBundle(features) {
-  return typeof features == "function";
-}
-const domAnimation = {
-  renderer: createDomVisualElement,
-  ...animations,
-  ...gestureAnimations
-};
-var rootClassName = "likec4-diagram-root";
-const blue$1 = {
-  fill: "#3b82f6",
-  stroke: "#2563eb",
-  hiContrast: "#eff6ff",
-  loContrast: "#bfdbfe"
-}, sky$1 = {
-  fill: "#0284c7",
-  stroke: "#0369a1",
-  hiContrast: "#f0f9ff",
-  loContrast: "#B6ECF7"
-}, slate$1 = {
-  fill: "#64748b",
-  stroke: "#475569",
-  hiContrast: "#f8fafc",
-  loContrast: "#cbd5e1"
-}, ElementColors = {
-  primary: blue$1,
-  blue: blue$1,
-  secondary: sky$1,
-  sky: sky$1,
-  muted: slate$1,
-  slate: slate$1,
-  gray: {
-    // fill: colors.neutral[500],
-    // stroke: colors.neutral[600],
-    // hiContrast: colors.neutral[50],
-    // loContrast: colors.neutral[200],
-    fill: "#737373",
-    stroke: "#525252",
-    hiContrast: "#fafafa",
-    loContrast: "#d4d4d4"
-  },
-  red: {
-    // fill: colors.red[500],
-    // stroke: colors.red[600],
-    // hiContrast: colors.red[50],
-    // loContrast: colors.red[200],
-    fill: "#AC4D39",
-    // fill: '#b54548',
-    stroke: "#853A2D",
-    // hiContrast: '#fef2f2',
-    // loContrast: '#fecaca',
-    // hiContrast: '#191111', // colors.gray[900],
-    // loContrast: '#3b1219' // colors.gray[800],
-    hiContrast: "#FBD3CB",
-    // hiContrast: '#f8fafc',
-    // loContrast: '#fdd8d8' // radix black red 12
-    loContrast: "#f5b2a3"
-  },
-  green: {
-    fill: "#428a4f",
-    stroke: "#2d5d39",
-    hiContrast: "#f8fafc",
-    loContrast: "#c2f0c2"
-  },
-  amber: {
-    fill: "#A35829",
-    stroke: "#7E451D",
-    hiContrast: "#FFE0C2",
-    loContrast: "#f9b27c"
-  },
-  indigo: {
-    // fill: colors.indigo[500],
-    // stroke: colors.indigo[600],
-    // hiContrast: colors.indigo[50],
-    // loContrast: colors.indigo[200],
-    fill: "#6366f1",
-    stroke: "#4f46e5",
-    hiContrast: "#eef2ff",
-    loContrast: "#c7d2fe"
-  }
-}, gray = {
-  lineColor: "#6E6E6E",
-  labelBgColor: "#18191b",
-  labelColor: "#C6C6C6"
-}, slate = {
-  lineColor: "#64748b",
-  // 500
-  labelBgColor: "#0f172a",
-  // 900
-  labelColor: "#cbd5e1"
-  // 300
-}, blue = {
-  lineColor: "#3b82f6",
-  // 500
-  labelBgColor: "#172554",
-  // 950
-  labelColor: "#60a5fa"
-  // 400
-}, sky = {
-  lineColor: "#0ea5e9",
-  // 500
-  labelBgColor: "#082f49",
-  // 950
-  labelColor: "#38bdf8"
-  // 400
-}, RelationshipColors = {
-  amber: {
-    lineColor: "#b45309",
-    labelBgColor: "#78350f",
-    labelColor: "#FFE0C2"
-  },
-  blue,
-  gray,
-  green: {
-    lineColor: "#15803d",
-    // 700
-    labelBgColor: "#052e16",
-    // 950
-    labelColor: "#22c55e"
-    // 500
-  },
-  indigo: {
-    lineColor: "#6366f1",
-    // 500
-    labelBgColor: "#1e1b4b",
-    // 950
-    labelColor: "#818cf8"
-    // 400
-  },
-  muted: slate,
-  primary: blue,
-  red: {
-    lineColor: "#AC4D39",
-    labelBgColor: "#b91c1c",
-    labelColor: "#f5b2a3"
-  },
-  secondary: sky,
-  sky,
-  slate
-}, defaultTheme = {
-  elements: ElementColors,
-  relationships: RelationshipColors,
-  font: "Arial",
-  shadow: "#0a0a0a"
-};
-function fixProto(target, prototype) {
-  var setPrototypeOf = Object.setPrototypeOf;
-  setPrototypeOf ? setPrototypeOf(target, prototype) : target.__proto__ = prototype;
-}
-function fixStack(target, fn) {
-  fn === void 0 && (fn = target.constructor);
-  var captureStackTrace = Error.captureStackTrace;
-  captureStackTrace && captureStackTrace(target, fn);
-}
-var __extends = /* @__PURE__ */ function() {
-  var _extendStatics = function(d2, b2) {
-    return _extendStatics = Object.setPrototypeOf || {
-      __proto__: []
-    } instanceof Array && function(d3, b3) {
-      d3.__proto__ = b3;
-    } || function(d3, b3) {
-      for (var p in b3)
-        Object.prototype.hasOwnProperty.call(b3, p) && (d3[p] = b3[p]);
-    }, _extendStatics(d2, b2);
-  };
-  return function(d2, b2) {
-    if (typeof b2 != "function" && b2 !== null) throw new TypeError("Class extends value " + String(b2) + " is not a constructor or null");
-    _extendStatics(d2, b2);
-    function __() {
-      this.constructor = d2;
-    }
-    d2.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
-  };
-}(), CustomError = function(_super) {
-  __extends(CustomError2, _super);
-  function CustomError2(message, options) {
-    var _newTarget = this.constructor, _this = _super.call(this, message, options) || this;
-    return Object.defineProperty(_this, "name", {
-      value: _newTarget.name,
-      enumerable: !1,
-      configurable: !0
-    }), fixProto(_this, _newTarget.prototype), fixStack(_this), _this;
-  }
-  return CustomError2;
-}(Error), s = { done: !1, hasNext: !1 };
-function u$5(t2, n2, a2) {
-  let o2 = (r2) => t2(r2, ...n2);
-  return a2 === void 0 ? o2 : Object.assign(o2, { lazy: a2, lazyArgs: n2 });
-}
-function u$4(r2, n2, a2) {
-  let o2 = r2.length - n2.length;
-  if (o2 === 0) return r2(...n2);
-  if (o2 === 1) return u$5(r2, n2, a2);
-  throw new Error("Wrong number of arguments");
-}
-function r$3(...t2) {
-  return u$4(Object.values, t2);
-}
-function i$3(...e2) {
-  return u$4(r$2, e2);
-}
-var r$2 = (e2, t2) => e2.length >= t2;
-function d$1(...e2) {
-  return u$4(i$2, e2);
-}
-function i$2(e2, o2) {
-  let r2 = [];
-  for (let [t2, n2] of e2.entries()) {
-    if (!o2(n2, t2, e2)) break;
-    r2.push(n2);
-  }
-  return r2;
-}
-function b(t2) {
-  return (e2, r2) => {
-    if (r2 === 0) return t2(e2);
-    if (!Number.isInteger(r2)) throw new TypeError(`precision must be an integer: ${r2}`);
-    if (r2 > 15 || r2 < -15) throw new RangeError("precision must be between -15 and 15");
-    if (Number.isNaN(e2) || !Number.isFinite(e2)) return t2(e2);
-    let n2 = 10 ** r2;
-    return t2(e2 * n2) / n2;
-  };
-}
-function l$1(...e2) {
-  return u$4(u$3, e2);
-}
-var u$3 = (e2, a2, n2) => e2.reduce(a2, n2);
-function n$2(e2) {
-  return !!e2;
-}
-function t$3(...n2) {
-  return u$4(Object.keys, n2);
-}
-function a$1(...e2) {
-  return u$4(n$1, e2);
-}
-var n$1 = (e2) => e2.at(-1);
-function l(n2) {
-  return n2 != null;
-}
-function o$1(a2) {
-  return (t2) => !a2(t2);
-}
-function e$3(n2) {
-  return n2 == null;
-}
-function e$2(r2) {
-  return typeof r2 == "number" && !Number.isNaN(r2);
-}
-function n(r2) {
-  return Array.isArray(r2);
-}
-var e$1 = (n2) => Object.assign(n2, { single: !0 });
-function f(...e2) {
-  return u$4(i$1, e2, e$1(u$2));
-}
-var i$1 = (e2, n2) => e2.find(n2), u$2 = (e2) => (n2, t2, o2) => e2(n2, t2, o2) ? { done: !0, hasNext: !0, next: n2 } : s;
-function d(...e2) {
-  return u$4(r$1, e2, e$1(o));
-}
-var r$1 = ([e2]) => e2, o = () => a, a = (e2) => ({ hasNext: !0, next: e2, done: !0 });
-function t$2(...r2) {
-  return u$4(Object.entries, r2);
-}
-function t$1(...a2) {
-  return u$4(e, a2);
-}
-var e = (a2, o2) => o2.every((l2) => l2(a2));
-function y$1(...a2) {
-  return u$4(r, a2);
-}
-var r = (a2, o2) => o2.some((e2) => e2(a2));
-function u$1(...e2) {
-  return u$4(b(Math.ceil), e2);
-}
-function u(...n2) {
-  return u$4(i, n2);
-}
-var i = (n2, { min: e2, max: r2 }) => e2 !== void 0 && n2 < e2 ? e2 : r2 !== void 0 && n2 > r2 ? r2 : n2;
-function isString(value) {
-  return value != null && typeof value == "string";
-}
-class BaseError extends CustomError {
-  constructor(message, options) {
-    super(message, options), Object.defineProperty(this, "name", { value: "BaseError" });
-  }
-}
-class NullableError extends BaseError {
-  constructor(message, options) {
-    super(message, options), Object.defineProperty(this, "name", { value: "NullableError" });
-  }
-}
-class InvariantError extends BaseError {
-  constructor(message, options) {
-    super(message, options), Object.defineProperty(this, "name", { value: "InvariantError" });
+class DOMVisualElement extends VisualElement {
+  constructor() {
+    super(...arguments), this.KeyframeResolver = DOMKeyframesResolver;
   }
-}
-function nonNullable(value, message) {
-  if (typeof value > "u" || value == null)
-    throw new NullableError(message ?? `Expected defined value, but received ${value}`);
-  return value;
-}
-function invariant(condition, message) {
-  if (!condition)
-    throw new InvariantError(message ?? "Invariant failed");
-}
-class NonExhaustiveError extends BaseError {
-  constructor(message, options) {
-    super(message, options), Object.defineProperty(this, "name", { value: "NonExhaustiveError" });
+  sortInstanceNodePosition(a2, b2) {
+    return a2.compareDocumentPosition(b2) & 2 ? 1 : -1;
+  }
+  getBaseTargetFromProps(props2, key) {
+    return props2.style ? props2.style[key] : void 0;
+  }
+  removeValueFromRenderState(key, { vars: vars2, style }) {
+    delete vars2[key], delete style[key];
   }
 }
-function nonexhaustive(value) {
-  throw new NonExhaustiveError(`NonExhaustive value: ${value}`);
+function getComputedStyle$1(element) {
+  return window.getComputedStyle(element);
 }
-const ElementShapes = [
-  "rectangle",
-  "person",
-  "browser",
-  "mobile",
-  "cylinder",
-  "storage",
-  "queue"
-], isTagEqual = (operator) => "tag" in operator, isKindEqual = (operator) => "kind" in operator, isNotOperator = (operator) => "not" in operator, isAndOperator = (operator) => "and" in operator, isOrOperator = (operator) => "or" in operator;
-function whereOperatorAsPredicate(operator) {
-  switch (!0) {
-    case isTagEqual(operator): {
-      if ("eq" in operator.tag) {
-        const tag2 = operator.tag.eq;
-        return (value) => Array.isArray(value.tags) && value.tags.includes(tag2);
-      }
-      const tag = operator.tag.neq;
-      return (value) => !Array.isArray(value.tags) || !value.tags.includes(tag);
-    }
-    case isKindEqual(operator): {
-      if ("eq" in operator.kind) {
-        const kind2 = operator.kind.eq;
-        return (value) => value.kind === kind2;
-      }
-      const kind = operator.kind.neq;
-      return (value) => e$3(value.kind) || value.kind !== kind;
-    }
-    case isNotOperator(operator): {
-      const predicate = whereOperatorAsPredicate(operator.not);
-      return o$1(predicate);
+class HTMLVisualElement extends DOMVisualElement {
+  constructor() {
+    super(...arguments), this.type = "html", this.applyWillChange = !0, this.renderInstance = renderHTML;
+  }
+  readValueFromInstance(instance, key) {
+    if (transformProps.has(key)) {
+      const defaultType = getDefaultValueType(key);
+      return defaultType && defaultType.default || 0;
+    } else {
+      const computedStyle = getComputedStyle$1(instance), value = (isCSSVariableName(key) ? computedStyle.getPropertyValue(key) : computedStyle[key]) || 0;
+      return typeof value == "string" ? value.trim() : value;
     }
-    case isAndOperator(operator): {
-      const predicates = operator.and.map(whereOperatorAsPredicate);
-      return t$1(predicates);
+  }
+  measureInstanceViewportBox(instance, { transformPagePoint }) {
+    return measureViewportBox(instance, transformPagePoint);
+  }
+  build(renderState, latestValues, props2) {
+    buildHTMLStyles(renderState, latestValues, props2.transformTemplate);
+  }
+  scrapeMotionValuesFromProps(props2, prevProps, visualElement) {
+    return scrapeMotionValuesFromProps$1(props2, prevProps, visualElement);
+  }
+  handleChildMotionValue() {
+    this.childSubscription && (this.childSubscription(), delete this.childSubscription);
+    const { children } = this.props;
+    isMotionValue(children) && (this.childSubscription = children.on("change", (latest) => {
+      this.current && (this.current.textContent = `${latest}`);
+    }));
+  }
+}
+class SVGVisualElement extends DOMVisualElement {
+  constructor() {
+    super(...arguments), this.type = "svg", this.isSVGTag = !1, this.measureInstanceViewportBox = createBox;
+  }
+  getBaseTargetFromProps(props2, key) {
+    return props2[key];
+  }
+  readValueFromInstance(instance, key) {
+    if (transformProps.has(key)) {
+      const defaultType = getDefaultValueType(key);
+      return defaultType && defaultType.default || 0;
     }
-    case isOrOperator(operator): {
-      const predicates = operator.or.map(whereOperatorAsPredicate);
-      return y$1(predicates);
+    return key = camelCaseAttributes.has(key) ? key : camelToDash(key), instance.getAttribute(key);
+  }
+  scrapeMotionValuesFromProps(props2, prevProps, visualElement) {
+    return scrapeMotionValuesFromProps(props2, prevProps, visualElement);
+  }
+  build(renderState, latestValues, props2) {
+    buildSVGAttrs(renderState, latestValues, this.isSVGTag, props2.transformTemplate);
+  }
+  renderInstance(instance, renderState, styleProp, projection) {
+    renderSVG(instance, renderState, styleProp, projection);
+  }
+  mount(instance) {
+    this.isSVGTag = isSVGTag(instance.tagName), super.mount(instance);
+  }
+}
+const createDomVisualElement = (Component2, options) => isSVGComponent(Component2) ? new SVGVisualElement(options) : new HTMLVisualElement(options, {
+  allowProjection: Component2 !== Fragment$1
+}), m = createMotionProxy(createDomMotionConfig);
+class PopChildMeasure extends React.Component {
+  getSnapshotBeforeUpdate(prevProps) {
+    const element = this.props.childRef.current;
+    if (element && prevProps.isPresent && !this.props.isPresent) {
+      const size = this.props.sizeRef.current;
+      size.height = element.offsetHeight || 0, size.width = element.offsetWidth || 0, size.top = element.offsetTop, size.left = element.offsetLeft;
     }
-    default:
-      nonexhaustive(operator);
+    return null;
+  }
+  /**
+   * Required with getSnapshotBeforeUpdate to stop React complaining.
+   */
+  componentDidUpdate() {
+  }
+  render() {
+    return this.props.children;
   }
 }
-function StepEdgeId(step) {
-  return `step-${String(step).padStart(3, "0")}`;
+function PopChild({ children, isPresent }) {
+  const id2 = useId$1(), ref = useRef$1(null), size = useRef$1({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0
+  }), { nonce } = useContext$1(MotionConfigContext);
+  return useInsertionEffect(() => {
+    const { width, height, top, left } = size.current;
+    if (isPresent || !ref.current || !width || !height)
+      return;
+    ref.current.dataset.motionPopId = id2;
+    const style = document.createElement("style");
+    return nonce && (style.nonce = nonce), document.head.appendChild(style), style.sheet && style.sheet.insertRule(`
+          [data-motion-pop-id="${id2}"] {
+            position: absolute !important;
+            width: ${width}px !important;
+            height: ${height}px !important;
+            top: ${top}px !important;
+            left: ${left}px !important;
+          }
+        `), () => {
+      document.head.removeChild(style);
+    };
+  }, [isPresent]), jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref }) });
 }
-function isStepEdgeId(id2) {
-  return id2.startsWith("step-");
+const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom: custom5, presenceAffectsLayout, mode }) => {
+  const presenceChildren = useConstant(newChildrenMap), id2 = useId$1(), context = useMemo$1(
+    () => ({
+      id: id2,
+      initial,
+      isPresent,
+      custom: custom5,
+      onExitComplete: (childId) => {
+        presenceChildren.set(childId, !0);
+        for (const isComplete of presenceChildren.values())
+          if (!isComplete)
+            return;
+        onExitComplete && onExitComplete();
+      },
+      register: (childId) => (presenceChildren.set(childId, !1), () => presenceChildren.delete(childId))
+    }),
+    /**
+     * If the presence of a child affects the layout of the components around it,
+     * we want to make a new context value to ensure they get re-rendered
+     * so they can detect that layout change.
+     */
+    presenceAffectsLayout ? [Math.random()] : [isPresent]
+  );
+  return useMemo$1(() => {
+    presenceChildren.forEach((_, key) => presenceChildren.set(key, !1));
+  }, [isPresent]), React.useEffect(() => {
+    !isPresent && !presenceChildren.size && onExitComplete && onExitComplete();
+  }, [isPresent]), mode === "popLayout" && (children = jsx(PopChild, { isPresent, children })), jsx(PresenceContext.Provider, { value: context, children });
+};
+function newChildrenMap() {
+  return /* @__PURE__ */ new Map();
 }
-function extractStep(id2) {
-  if (!isStepEdgeId(id2))
-    throw new Error(`Invalid step edge id: ${id2}`);
-  return Number(id2.slice(5));
+const getChildKey = (child) => child.key || "";
+function onlyElements(children) {
+  const filtered = [];
+  return Children.forEach(children, (child) => {
+    isValidElement(child) && filtered.push(child);
+  }), filtered;
 }
-function getBBoxCenter({
-  x: x2,
-  y: y2,
-  width,
-  height
-}) {
-  return {
-    x: x2 + width / 2,
-    y: y2 + height / 2
-  };
+const AnimatePresence = ({ children, exitBeforeEnter, custom: custom5, initial = !0, onExitComplete, presenceAffectsLayout = !0, mode = "sync" }) => {
+  const presentChildren = useMemo$1(() => onlyElements(children), [children]), presentKeys = presentChildren.map(getChildKey), isInitialRender = useRef$1(!0), pendingPresentChildren = useRef$1(presentChildren), exitComplete = useConstant(() => /* @__PURE__ */ new Map()), [diffedChildren, setDiffedChildren] = useState$1(presentChildren), [renderedChildren, setRenderedChildren] = useState$1(presentChildren);
+  useIsomorphicLayoutEffect$2(() => {
+    isInitialRender.current = !1, pendingPresentChildren.current = presentChildren;
+    for (let i2 = 0; i2 < renderedChildren.length; i2++) {
+      const key = getChildKey(renderedChildren[i2]);
+      presentKeys.includes(key) ? exitComplete.delete(key) : exitComplete.get(key) !== !0 && exitComplete.set(key, !1);
+    }
+  }, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
+  const exitingChildren = [];
+  if (presentChildren !== diffedChildren) {
+    let nextChildren = [...presentChildren];
+    for (let i2 = 0; i2 < renderedChildren.length; i2++) {
+      const child = renderedChildren[i2], key = getChildKey(child);
+      presentKeys.includes(key) || (nextChildren.splice(i2, 0, child), exitingChildren.push(child));
+    }
+    mode === "wait" && exitingChildren.length && (nextChildren = exitingChildren), setRenderedChildren(onlyElements(nextChildren)), setDiffedChildren(presentChildren);
+    return;
+  }
+  const { forceRender } = useContext$1(LayoutGroupContext);
+  return jsx(Fragment, { children: renderedChildren.map((child) => {
+    const key = getChildKey(child), isPresent = presentChildren === renderedChildren || presentKeys.includes(key), onExit = () => {
+      if (exitComplete.has(key))
+        exitComplete.set(key, !0);
+      else
+        return;
+      let isEveryExitComplete = !0;
+      exitComplete.forEach((isExitComplete) => {
+        isExitComplete || (isEveryExitComplete = !1);
+      }), isEveryExitComplete && (forceRender?.(), setRenderedChildren(pendingPresentChildren.current), onExitComplete && onExitComplete());
+    };
+    return jsx(PresenceChild, { isPresent, initial: !isInitialRender.current || initial ? void 0 : !1, custom: isPresent ? void 0 : custom5, presenceAffectsLayout, mode, onExitComplete: isPresent ? void 0 : onExit, children: child }, key);
+  }) });
+};
+function LazyMotion({ children, features, strict = !1 }) {
+  const [, setIsLoaded] = useState$1(!isLazyBundle(features)), loadedRenderer = useRef$1(void 0);
+  if (!isLazyBundle(features)) {
+    const { renderer, ...loadedFeatures } = features;
+    loadedRenderer.current = renderer, loadFeatures(loadedFeatures);
+  }
+  return useEffect$1(() => {
+    isLazyBundle(features) && features().then(({ renderer, ...loadedFeatures }) => {
+      loadFeatures(loadedFeatures), loadedRenderer.current = renderer, setIsLoaded(!0);
+    });
+  }, []), jsx(LazyContext.Provider, { value: { renderer: loadedRenderer.current, strict }, children });
 }
-function isAncestor(...args) {
-  const ancestor = isString(args[0]) ? args[0] : args[0].id;
-  return (isString(args[1]) ? args[1] : args[1].id).startsWith(ancestor + ".");
+function isLazyBundle(features) {
+  return typeof features == "function";
 }
+const domAnimation = {
+  renderer: createDomVisualElement,
+  ...animations,
+  ...gestureAnimations
+};
+var rootClassName = "likec4-diagram-root";
 function useSyncedRef(value) {
   const ref = useRef$1(value);
   return ref.current = value, useMemo$1(() => Object.freeze({
@@ -4328,26 +4369,26 @@ const pi$2 = Math.PI, tau$1 = 2 * pi$2, quart = pi$2 / 2, epsilon$2 = 1e-6, nMax
     if (t2 === 1)
       return points[order].t = 1, points[order];
     const mt = 1 - t2;
-    let p = points;
+    let p2 = points;
     if (order === 0)
       return points[0].t = t2, points[0];
     if (order === 1) {
       const ret = {
-        x: mt * p[0].x + t2 * p[1].x,
-        y: mt * p[0].y + t2 * p[1].y,
+        x: mt * p2[0].x + t2 * p2[1].x,
+        y: mt * p2[0].y + t2 * p2[1].y,
         t: t2
       };
-      return _3d && (ret.z = mt * p[0].z + t2 * p[1].z), ret;
+      return _3d && (ret.z = mt * p2[0].z + t2 * p2[1].z), ret;
     }
     if (order < 4) {
-      let mt2 = mt * mt, t22 = t2 * t2, a2, b2, c, d2 = 0;
-      order === 2 ? (p = [p[0], p[1], p[2], ZERO], a2 = mt2, b2 = mt * t2 * 2, c = t22) : order === 3 && (a2 = mt2 * mt, b2 = mt2 * t2 * 3, c = mt * t22 * 3, d2 = t2 * t22);
+      let mt2 = mt * mt, t22 = t2 * t2, a2, b2, c2, d2 = 0;
+      order === 2 ? (p2 = [p2[0], p2[1], p2[2], ZERO], a2 = mt2, b2 = mt * t2 * 2, c2 = t22) : order === 3 && (a2 = mt2 * mt, b2 = mt2 * t2 * 3, c2 = mt * t22 * 3, d2 = t2 * t22);
       const ret = {
-        x: a2 * p[0].x + b2 * p[1].x + c * p[2].x + d2 * p[3].x,
-        y: a2 * p[0].y + b2 * p[1].y + c * p[2].y + d2 * p[3].y,
+        x: a2 * p2[0].x + b2 * p2[1].x + c2 * p2[2].x + d2 * p2[3].x,
+        y: a2 * p2[0].y + b2 * p2[1].y + c2 * p2[2].y + d2 * p2[3].y,
         t: t2
       };
-      return _3d && (ret.z = a2 * p[0].z + b2 * p[1].z + c * p[2].z + d2 * p[3].z), ret;
+      return _3d && (ret.z = a2 * p2[0].z + b2 * p2[1].z + c2 * p2[2].z + d2 * p2[3].z), ret;
     }
     const dCpts = JSON.parse(JSON.stringify(points));
     for (; dCpts.length > 1; ) {
@@ -4361,40 +4402,40 @@ const pi$2 = Math.PI, tau$1 = 2 * pi$2, quart = pi$2 / 2, epsilon$2 = 1e-6, nMax
     return dCpts[0].t = t2, dCpts[0];
   },
   computeWithRatios: function(t2, points, ratios, _3d) {
-    const mt = 1 - t2, r2 = ratios, p = points;
+    const mt = 1 - t2, r2 = ratios, p2 = points;
     let f1 = r2[0], f2 = r2[1], f3 = r2[2], f4 = r2[3], d2;
-    if (f1 *= mt, f2 *= t2, p.length === 2)
+    if (f1 *= mt, f2 *= t2, p2.length === 2)
       return d2 = f1 + f2, {
-        x: (f1 * p[0].x + f2 * p[1].x) / d2,
-        y: (f1 * p[0].y + f2 * p[1].y) / d2,
-        z: _3d ? (f1 * p[0].z + f2 * p[1].z) / d2 : !1,
+        x: (f1 * p2[0].x + f2 * p2[1].x) / d2,
+        y: (f1 * p2[0].y + f2 * p2[1].y) / d2,
+        z: _3d ? (f1 * p2[0].z + f2 * p2[1].z) / d2 : !1,
         t: t2
       };
-    if (f1 *= mt, f2 *= 2 * mt, f3 *= t2 * t2, p.length === 3)
+    if (f1 *= mt, f2 *= 2 * mt, f3 *= t2 * t2, p2.length === 3)
       return d2 = f1 + f2 + f3, {
-        x: (f1 * p[0].x + f2 * p[1].x + f3 * p[2].x) / d2,
-        y: (f1 * p[0].y + f2 * p[1].y + f3 * p[2].y) / d2,
-        z: _3d ? (f1 * p[0].z + f2 * p[1].z + f3 * p[2].z) / d2 : !1,
+        x: (f1 * p2[0].x + f2 * p2[1].x + f3 * p2[2].x) / d2,
+        y: (f1 * p2[0].y + f2 * p2[1].y + f3 * p2[2].y) / d2,
+        z: _3d ? (f1 * p2[0].z + f2 * p2[1].z + f3 * p2[2].z) / d2 : !1,
         t: t2
       };
-    if (f1 *= mt, f2 *= 1.5 * mt, f3 *= 3 * mt, f4 *= t2 * t2 * t2, p.length === 4)
+    if (f1 *= mt, f2 *= 1.5 * mt, f3 *= 3 * mt, f4 *= t2 * t2 * t2, p2.length === 4)
       return d2 = f1 + f2 + f3 + f4, {
-        x: (f1 * p[0].x + f2 * p[1].x + f3 * p[2].x + f4 * p[3].x) / d2,
-        y: (f1 * p[0].y + f2 * p[1].y + f3 * p[2].y + f4 * p[3].y) / d2,
-        z: _3d ? (f1 * p[0].z + f2 * p[1].z + f3 * p[2].z + f4 * p[3].z) / d2 : !1,
+        x: (f1 * p2[0].x + f2 * p2[1].x + f3 * p2[2].x + f4 * p2[3].x) / d2,
+        y: (f1 * p2[0].y + f2 * p2[1].y + f3 * p2[2].y + f4 * p2[3].y) / d2,
+        z: _3d ? (f1 * p2[0].z + f2 * p2[1].z + f3 * p2[2].z + f4 * p2[3].z) / d2 : !1,
         t: t2
       };
   },
   derive: function(points, _3d) {
     const dpoints = [];
-    for (let p = points, d2 = p.length, c = d2 - 1; d2 > 1; d2--, c--) {
+    for (let p2 = points, d2 = p2.length, c2 = d2 - 1; d2 > 1; d2--, c2--) {
       const list = [];
-      for (let j = 0, dpt; j < c; j++)
+      for (let j = 0, dpt; j < c2; j++)
         dpt = {
-          x: c * (p[j + 1].x - p[j].x),
-          y: c * (p[j + 1].y - p[j].y)
-        }, _3d && (dpt.z = c * (p[j + 1].z - p[j].z)), list.push(dpt);
-      dpoints.push(list), p = list;
+          x: c2 * (p2[j + 1].x - p2[j].x),
+          y: c2 * (p2[j + 1].y - p2[j].y)
+        }, _3d && (dpt.z = c2 * (p2[j + 1].z - p2[j].z)), list.push(dpt);
+      dpoints.push(list), p2 = list;
     }
     return dpoints;
   },
@@ -4422,9 +4463,9 @@ const pi$2 = Math.PI, tau$1 = 2 * pi$2, quart = pi$2 / 2, epsilon$2 = 1e-6, nMax
     };
     return v1.z !== void 0 && v2.z !== void 0 && (ret.z = v1.z + r2 * (v2.z - v1.z)), ret;
   },
-  pointToString: function(p) {
-    let s2 = p.x + "/" + p.y;
-    return typeof p.z < "u" && (s2 += "/" + p.z), s2;
+  pointToString: function(p2) {
+    let s2 = p2.x + "/" + p2.y;
+    return typeof p2.z < "u" && (s2 += "/" + p2.z), s2;
   },
   pointsToString: function(points) {
     return "[" + points.map(utils.pointToString).join(", ") + "]";
@@ -4447,8 +4488,8 @@ const pi$2 = Math.PI, tau$1 = 2 * pi$2, quart = pi$2 / 2, epsilon$2 = 1e-6, nMax
   },
   closest: function(LUT, point2) {
     let mdist = pow(2, 63), mpos, d2;
-    return LUT.forEach(function(p, idx) {
-      d2 = utils.dist(point2, p), d2 < mdist && (mdist = d2, mpos = idx);
+    return LUT.forEach(function(p2, idx) {
+      d2 = utils.dist(point2, p2), d2 < mdist && (mdist = d2, mpos = idx);
     }), { mdist, mpos };
   },
   abcratio: function(t2, n2) {
@@ -4533,10 +4574,10 @@ const pi$2 = Math.PI, tau$1 = 2 * pi$2, quart = pi$2 / 2, epsilon$2 = 1e-6, nMax
   },
   getminmax: function(curve2, d2, list) {
     if (!list) return { min: 0, max: 0 };
-    let min2 = nMax, max2 = nMin, t2, c;
+    let min2 = nMax, max2 = nMin, t2, c2;
     list.indexOf(0) === -1 && (list = [0].concat(list)), list.indexOf(1) === -1 && list.push(1);
     for (let i2 = 0, len = list.length; i2 < len; i2++)
-      t2 = list[i2], c = curve2.get(t2), c[d2] < min2 && (min2 = c[d2]), c[d2] > max2 && (max2 = c[d2]);
+      t2 = list[i2], c2 = curve2.get(t2), c2[d2] < min2 && (min2 = c2[d2]), c2[d2] > max2 && (max2 = c2[d2]);
     return { min: min2, mid: (min2 + max2) / 2, max: max2, size: max2 - min2 };
   },
   align: function(points, line) {
@@ -4554,27 +4595,27 @@ const pi$2 = Math.PI, tau$1 = 2 * pi$2, quart = pi$2 / 2, epsilon$2 = 1e-6, nMax
       return 0 <= t2 && t2 <= 1;
     };
     if (order === 2) {
-      const a3 = aligned[0].y, b3 = aligned[1].y, c2 = aligned[2].y, d3 = a3 - 2 * b3 + c2;
+      const a3 = aligned[0].y, b3 = aligned[1].y, c3 = aligned[2].y, d3 = a3 - 2 * b3 + c3;
       if (d3 !== 0) {
-        const m1 = -sqrt$1(b3 * b3 - a3 * c2), m2 = -a3 + b3, v12 = -(m1 + m2) / d3, v2 = -(-m1 + m2) / d3;
+        const m1 = -sqrt$1(b3 * b3 - a3 * c3), m2 = -a3 + b3, v12 = -(m1 + m2) / d3, v2 = -(-m1 + m2) / d3;
         return [v12, v2].filter(reduce);
-      } else if (b3 !== c2 && d3 === 0)
-        return [(2 * b3 - c2) / (2 * b3 - 2 * c2)].filter(reduce);
+      } else if (b3 !== c3 && d3 === 0)
+        return [(2 * b3 - c3) / (2 * b3 - 2 * c3)].filter(reduce);
       return [];
     }
     const pa = aligned[0].y, pb = aligned[1].y, pc = aligned[2].y, pd = aligned[3].y;
-    let d2 = -pa + 3 * pb - 3 * pc + pd, a2 = 3 * pa - 6 * pb + 3 * pc, b2 = -3 * pa + 3 * pb, c = pa;
+    let d2 = -pa + 3 * pb - 3 * pc + pd, a2 = 3 * pa - 6 * pb + 3 * pc, b2 = -3 * pa + 3 * pb, c2 = pa;
     if (utils.approximately(d2, 0)) {
       if (utils.approximately(a2, 0))
-        return utils.approximately(b2, 0) ? [] : [-c / b2].filter(reduce);
-      const q3 = sqrt$1(b2 * b2 - 4 * a2 * c), a22 = 2 * a2;
+        return utils.approximately(b2, 0) ? [] : [-c2 / b2].filter(reduce);
+      const q3 = sqrt$1(b2 * b2 - 4 * a2 * c2), a22 = 2 * a2;
       return [(q3 - b2) / a22, (-b2 - q3) / a22].filter(reduce);
     }
-    a2 /= d2, b2 /= d2, c /= d2;
-    const p = (3 * b2 - a2 * a2) / 3, p3 = p / 3, q = (2 * a2 * a2 * a2 - 9 * a2 * b2 + 27 * c) / 27, q2 = q / 2, discriminant = q2 * q2 + p3 * p3 * p3;
+    a2 /= d2, b2 /= d2, c2 /= d2;
+    const p2 = (3 * b2 - a2 * a2) / 3, p3 = p2 / 3, q = (2 * a2 * a2 * a2 - 9 * a2 * b2 + 27 * c2) / 27, q2 = q / 2, discriminant = q2 * q2 + p3 * p3 * p3;
     let u1, v1, x1, x2, x3;
     if (discriminant < 0) {
-      const mp3 = -p / 3, mp33 = mp3 * mp3 * mp3, r2 = sqrt$1(mp33), t2 = -q / (2 * r2), cosphi = t2 < -1 ? -1 : t2 > 1 ? 1 : t2, phi = acos$1(cosphi), crtr = crt(r2), t1 = 2 * crtr;
+      const mp3 = -p2 / 3, mp33 = mp3 * mp3 * mp3, r2 = sqrt$1(mp33), t2 = -q / (2 * r2), cosphi = t2 < -1 ? -1 : t2 > 1 ? 1 : t2, phi = acos$1(cosphi), crtr = crt(r2), t1 = 2 * crtr;
       return x1 = t1 * cos$1(phi / 3) - a2 / 3, x2 = t1 * cos$1((phi + tau$1) / 3) - a2 / 3, x3 = t1 * cos$1((phi + 2 * tau$1) / 3) - a2 / 3, [x1, x2, x3].filter(reduce);
     } else {
       if (discriminant === 0)
@@ -4585,18 +4626,18 @@ const pi$2 = Math.PI, tau$1 = 2 * pi$2, quart = pi$2 / 2, epsilon$2 = 1e-6, nMax
       }
     }
   },
-  droots: function(p) {
-    if (p.length === 3) {
-      const a2 = p[0], b2 = p[1], c = p[2], d2 = a2 - 2 * b2 + c;
+  droots: function(p2) {
+    if (p2.length === 3) {
+      const a2 = p2[0], b2 = p2[1], c2 = p2[2], d2 = a2 - 2 * b2 + c2;
       if (d2 !== 0) {
-        const m1 = -sqrt$1(b2 * b2 - a2 * c), m2 = -a2 + b2, v1 = -(m1 + m2) / d2, v2 = -(-m1 + m2) / d2;
+        const m1 = -sqrt$1(b2 * b2 - a2 * c2), m2 = -a2 + b2, v1 = -(m1 + m2) / d2, v2 = -(-m1 + m2) / d2;
         return [v1, v2];
-      } else if (b2 !== c && d2 === 0)
-        return [(2 * b2 - c) / (2 * (b2 - c))];
+      } else if (b2 !== c2 && d2 === 0)
+        return [(2 * b2 - c2) / (2 * (b2 - c2))];
       return [];
     }
-    if (p.length === 2) {
-      const a2 = p[0], b2 = p[1];
+    if (p2.length === 2) {
+      const a2 = p2[0], b2 = p2[1];
       return a2 !== b2 ? [a2 / (a2 - b2)] : [];
     }
     return [];
@@ -4616,7 +4657,7 @@ const pi$2 = Math.PI, tau$1 = 2 * pi$2, quart = pi$2 / 2, epsilon$2 = 1e-6, nMax
   },
   inflections: function(points) {
     if (points.length < 4) return [];
-    const p = utils.align(points, { p1: points[0], p2: points.slice(-1)[0] }), a2 = p[2].x * p[1].y, b2 = p[3].x * p[1].y, c = p[1].x * p[2].y, d2 = p[3].x * p[2].y, v1 = 18 * (-3 * a2 + 2 * b2 + 3 * c - d2), v2 = 18 * (3 * a2 - b2 - 3 * c), v3 = 18 * (c - a2);
+    const p2 = utils.align(points, { p1: points[0], p2: points.slice(-1)[0] }), a2 = p2[2].x * p2[1].y, b2 = p2[3].x * p2[1].y, c2 = p2[1].x * p2[2].y, d2 = p2[3].x * p2[2].y, v1 = 18 * (-3 * a2 + 2 * b2 + 3 * c2 - d2), v2 = 18 * (3 * a2 - b2 - 3 * c2), v3 = 18 * (c2 - a2);
     if (utils.approximately(v1, 0)) {
       if (!utils.approximately(v2, 0)) {
         let t2 = -v3 / v2;
@@ -4701,9 +4742,9 @@ class PolyBezier {
     return this.curves[idx];
   }
   bbox() {
-    const c = this.curves;
-    for (var bbox = c[0].bbox(), i2 = 1; i2 < c.length; i2++)
-      utils.expandbox(bbox, c[i2].bbox());
+    const c2 = this.curves;
+    for (var bbox = c2[0].bbox(), i2 = 1; i2 < c2.length; i2++)
+      utils.expandbox(bbox, c2[i2].bbox());
     return bbox;
   }
   offset(d2) {
@@ -4751,7 +4792,7 @@ class Bezier {
     const order = this.order = points.length - 1, dims = this.dims = ["x", "y"];
     _3d && dims.push("z"), this.dimlen = dims.length;
     const aligned = utils.align(points, { p1: points[0], p2: points[order] }), baselength = utils.dist(points[0], points[order]);
-    this._linear = aligned.reduce((t2, p) => t2 + abs(p.y), 0) < baselength / 50, this._lut = [], this._t1 = 0, this._t2 = 1, this.update();
+    this._linear = aligned.reduce((t2, p2) => t2 + abs(p2.y), 0) < baselength / 50, this._lut = [], this._t1 = 0, this._t2 = 1, this.update();
   }
   static quadraticFromPoints(p1, p2, p3, t2) {
     if (typeof t2 > "u" && (t2 = 0.5), t2 === 0)
@@ -4788,9 +4829,9 @@ class Bezier {
   }
   toSVG() {
     if (this._3d) return !1;
-    const p = this.points, x2 = p[0].x, y2 = p[0].y, s2 = ["M", x2, y2, this.order === 2 ? "Q" : "C"];
-    for (let i2 = 1, last = p.length; i2 < last; i2++)
-      s2.push(p[i2].x), s2.push(p[i2].y);
+    const p2 = this.points, x2 = p2[0].x, y2 = p2[0].y, s2 = ["M", x2, y2, this.order === 2 ? "Q" : "C"];
+    for (let i2 = 1, last = p2.length; i2 < last; i2++)
+      s2.push(p2[i2].x), s2.push(p2[i2].y);
     return s2.join(" ");
   }
   setRatios(ratios) {
@@ -4803,8 +4844,8 @@ class Bezier {
     print !== this._print && (this._print = print, this.update());
   }
   coordDigest() {
-    return this.points.map(function(c, pos) {
-      return "" + pos + c.x + c.y + (c.z ? c.z : 0);
+    return this.points.map(function(c2, pos) {
+      return "" + pos + c2.x + c2.y + (c2.z ? c2.z : 0);
     }).join("");
   }
   update() {
@@ -4836,24 +4877,24 @@ class Bezier {
     if (this.verify(), steps2 = steps2 || 100, this._lut.length === steps2 + 1)
       return this._lut;
     this._lut = [], steps2++, this._lut = [];
-    for (let i2 = 0, p, t2; i2 < steps2; i2++)
-      t2 = i2 / (steps2 - 1), p = this.compute(t2), p.t = t2, this._lut.push(p);
+    for (let i2 = 0, p2, t2; i2 < steps2; i2++)
+      t2 = i2 / (steps2 - 1), p2 = this.compute(t2), p2.t = t2, this._lut.push(p2);
     return this._lut;
   }
   on(point2, error) {
     error = error || 5;
     const lut = this.getLUT(), hits = [];
-    for (let i2 = 0, c, t2 = 0; i2 < lut.length; i2++)
-      c = lut[i2], utils.dist(c, point2) < error && (hits.push(c), t2 += i2 / lut.length);
+    for (let i2 = 0, c2, t2 = 0; i2 < lut.length; i2++)
+      c2 = lut[i2], utils.dist(c2, point2) < error && (hits.push(c2), t2 += i2 / lut.length);
     return hits.length ? t /= hits.length : !1;
   }
   project(point2) {
     const LUT = this.getLUT(), l2 = LUT.length - 1, closest = utils.closest(LUT, point2), mpos = closest.mpos, t1 = (mpos - 1) / l2, t2 = (mpos + 1) / l2, step = 0.1 / l2;
-    let mdist = closest.mdist, t3 = t1, ft = t3, p;
+    let mdist = closest.mdist, t3 = t1, ft = t3, p2;
     mdist += 1;
     for (let d2; t3 < t2 + step; t3 += step)
-      p = this.compute(t3), d2 = utils.dist(point2, p), d2 < mdist && (mdist = d2, ft = t3);
-    return ft = ft < 0 ? 0 : ft > 1 ? 1 : ft, p = this.compute(ft), p.t = ft, p.d = mdist, p;
+      p2 = this.compute(t3), d2 = utils.dist(point2, p2), d2 < mdist && (mdist = d2, ft = t3);
+    return ft = ft < 0 ? 0 : ft > 1 ? 1 : ft, p2 = this.compute(ft), p2.t = ft, p2.d = mdist, p2;
   }
   get(t2) {
     return this.compute(t2);
@@ -4865,13 +4906,13 @@ class Bezier {
     return this.ratios ? utils.computeWithRatios(t2, this.points, this.ratios, this._3d) : utils.compute(t2, this.points, this._3d, this.ratios);
   }
   raise() {
-    const p = this.points, np = [p[0]], k = p.length;
+    const p2 = this.points, np = [p2[0]], k = p2.length;
     for (let i2 = 1, pi2, pim; i2 < k; i2++)
-      pi2 = p[i2], pim = p[i2 - 1], np[i2] = {
+      pi2 = p2[i2], pim = p2[i2 - 1], np[i2] = {
         x: (k - i2) / k * pi2.x + i2 / k * pim.x,
         y: (k - i2) / k * pi2.y + i2 / k * pim.y
       };
-    return np[k] = p[k - 1], new Bezier(np);
+    return np[k] = p2[k - 1], new Bezier(np);
   }
   derivative(t2) {
     return utils.compute(t2, this.dpoints[0], this._3d);
@@ -4880,8 +4921,8 @@ class Bezier {
     return utils.compute(t2, this.dpoints[1], this._3d);
   }
   align() {
-    let p = this.points;
-    return new Bezier(utils.align(p, { p1: p[0], p2: p[p.length - 1] }));
+    let p2 = this.points;
+    return new Bezier(utils.align(p2, { p1: p2[0], p2: p2[p2.length - 1] }));
   }
   curvature(t2) {
     return utils.curvature(t2, this.dpoints[0], this.dpoints[1], this._3d);
@@ -4899,22 +4940,22 @@ class Bezier {
   __normal3(t2) {
     const r1 = this.derivative(t2), r2 = this.derivative(t2 + 0.01), q1 = sqrt(r1.x * r1.x + r1.y * r1.y + r1.z * r1.z), q2 = sqrt(r2.x * r2.x + r2.y * r2.y + r2.z * r2.z);
     r1.x /= q1, r1.y /= q1, r1.z /= q1, r2.x /= q2, r2.y /= q2, r2.z /= q2;
-    const c = {
+    const c2 = {
       x: r2.y * r1.z - r2.z * r1.y,
       y: r2.z * r1.x - r2.x * r1.z,
       z: r2.x * r1.y - r2.y * r1.x
-    }, m2 = sqrt(c.x * c.x + c.y * c.y + c.z * c.z);
-    c.x /= m2, c.y /= m2, c.z /= m2;
+    }, m2 = sqrt(c2.x * c2.x + c2.y * c2.y + c2.z * c2.z);
+    c2.x /= m2, c2.y /= m2, c2.z /= m2;
     const R = [
-      c.x * c.x,
-      c.x * c.y - c.z,
-      c.x * c.z + c.y,
-      c.x * c.y + c.z,
-      c.y * c.y,
-      c.y * c.z - c.x,
-      c.x * c.z - c.y,
-      c.y * c.z + c.x,
-      c.z * c.z
+      c2.x * c2.x,
+      c2.x * c2.y - c2.z,
+      c2.x * c2.z + c2.y,
+      c2.x * c2.y + c2.z,
+      c2.y * c2.y,
+      c2.y * c2.z - c2.x,
+      c2.x * c2.z - c2.y,
+      c2.y * c2.z + c2.x,
+      c2.z * c2.z
     ];
     return {
       t: t2,
@@ -4924,12 +4965,12 @@ class Bezier {
     };
   }
   hull(t2) {
-    let p = this.points, _p = [], q = [], idx = 0;
-    for (q[idx++] = p[0], q[idx++] = p[1], q[idx++] = p[2], this.order === 3 && (q[idx++] = p[3]); p.length > 1; ) {
+    let p2 = this.points, _p = [], q = [], idx = 0;
+    for (q[idx++] = p2[0], q[idx++] = p2[1], q[idx++] = p2[2], this.order === 3 && (q[idx++] = p2[3]); p2.length > 1; ) {
       _p = [];
-      for (let i2 = 0, pt, l2 = p.length - 1; i2 < l2; i2++)
-        pt = utils.lerp(t2, p[i2], p[i2 + 1]), q[idx++] = pt, _p.push(pt);
-      p = _p;
+      for (let i2 = 0, pt, l2 = p2.length - 1; i2 < l2; i2++)
+        pt = utils.lerp(t2, p2[i2], p2[i2 + 1]), q[idx++] = pt, _p.push(pt);
+      p2 = _p;
     }
     return q;
   }
@@ -4952,8 +4993,8 @@ class Bezier {
       function(dim) {
         let mfn = function(v) {
           return v[dim];
-        }, p = this.dpoints[0].map(mfn);
-        result[dim] = utils.droots(p), this.order === 3 && (p = this.dpoints[1].map(mfn), result[dim] = result[dim].concat(utils.droots(p))), result[dim] = result[dim].filter(function(t2) {
+        }, p2 = this.dpoints[0].map(mfn);
+        result[dim] = utils.droots(p2), this.order === 3 && (p2 = this.dpoints[1].map(mfn), result[dim] = result[dim].concat(utils.droots(p2))), result[dim] = result[dim].filter(function(t2) {
           return t2 >= 0 && t2 <= 1;
         }), roots = roots.concat(result[dim].sort(utils.numberSort));
       }.bind(this)
@@ -4975,21 +5016,21 @@ class Bezier {
   }
   offset(t2, d2) {
     if (typeof d2 < "u") {
-      const c = this.get(t2), n2 = this.normal(t2), ret = {
-        c,
+      const c2 = this.get(t2), n2 = this.normal(t2), ret = {
+        c: c2,
         n: n2,
-        x: c.x + n2.x * d2,
-        y: c.y + n2.y * d2
+        x: c2.x + n2.x * d2,
+        y: c2.y + n2.y * d2
       };
-      return this._3d && (ret.z = c.z + n2.z * d2), ret;
+      return this._3d && (ret.z = c2.z + n2.z * d2), ret;
     }
     if (this._linear) {
-      const nv = this.normal(0), coords = this.points.map(function(p) {
+      const nv = this.normal(0), coords = this.points.map(function(p2) {
         const ret = {
-          x: p.x + t2 * nv.x,
-          y: p.y + t2 * nv.y
+          x: p2.x + t2 * nv.x,
+          y: p2.y + t2 * nv.y
         };
-        return p.z && nv.z && (ret.z = p.z + t2 * nv.z), ret;
+        return p2.z && nv.z && (ret.z = p2.z + t2 * nv.z), ret;
       });
       return [new Bezier(coords)];
     }
@@ -5027,9 +5068,9 @@ class Bezier {
     const o2 = this.order;
     let d3 = this.points.map((_, i2) => (1 - i2 / o2) * d1 + i2 / o2 * d2);
     return new Bezier(
-      this.points.map((p, i2) => ({
-        x: p.x + v.x * d3[i2],
-        y: p.y + v.y * d3[i2]
+      this.points.map((p2, i2) => ({
+        x: p2.x + v.x * d3[i2],
+        y: p2.y + v.y * d3[i2]
       }))
     );
   }
@@ -5049,25 +5090,25 @@ class Bezier {
     if (!o2)
       throw new Error("cannot scale this curve. Try reducing it first.");
     return [0, 1].forEach(function(t2) {
-      const p = np[t2 * order] = utils.copy(points[t2 * order]);
-      p.x += (t2 ? r2 : r1) * v[t2].n.x, p.y += (t2 ? r2 : r1) * v[t2].n.y;
+      const p2 = np[t2 * order] = utils.copy(points[t2 * order]);
+      p2.x += (t2 ? r2 : r1) * v[t2].n.x, p2.y += (t2 ? r2 : r1) * v[t2].n.y;
     }), distanceFn ? ([0, 1].forEach(function(t2) {
       if (!(order === 2 && t2)) {
-        var p = points[t2 + 1], ov = {
-          x: p.x - o2.x,
-          y: p.y - o2.y
+        var p2 = points[t2 + 1], ov = {
+          x: p2.x - o2.x,
+          y: p2.y - o2.y
         }, rc = distanceFn ? distanceFn((t2 + 1) / order) : d2;
         distanceFn && !clockwise && (rc = -rc);
         var m2 = sqrt(ov.x * ov.x + ov.y * ov.y);
         ov.x /= m2, ov.y /= m2, np[t2 + 1] = {
-          x: p.x + rc * ov.x,
-          y: p.y + rc * ov.y
+          x: p2.x + rc * ov.x,
+          y: p2.y + rc * ov.y
         };
       }
     }), new Bezier(np)) : ([0, 1].forEach((t2) => {
       if (order === 2 && t2) return;
-      const p = np[t2 * order], d3 = this.derivative(t2), p2 = { x: p.x + d3.x, y: p.y + d3.y };
-      np[t2 + 1] = utils.lli4(p, p2, o2, points[t2 + 1]);
+      const p2 = np[t2 * order], d3 = this.derivative(t2), p22 = { x: p2.x + d3.x, y: p2.y + d3.y };
+      np[t2 + 1] = utils.lli4(p2, p22, o2, points[t2 + 1]);
     }), new Bezier(np));
   }
   outline(d1, d2, d3, d4) {
@@ -5081,7 +5122,7 @@ class Bezier {
       return new PolyBezier(segments2);
     }
     const reduced = this.reduce(), len = reduced.length, fcurves = [];
-    let bcurves = [], p, alen = 0, tlen = this.length();
+    let bcurves = [], p2, alen = 0, tlen = this.length();
     const graduated = typeof d3 < "u" && typeof d4 < "u";
     function linearDistanceFunction(s2, e2, tlen2, alen2, slen) {
       return function(v) {
@@ -5097,7 +5138,7 @@ class Bezier {
         segment.scale(linearDistanceFunction(-d2, -d4, tlen, alen, slen))
       )) : (fcurves.push(segment.scale(d1)), bcurves.push(segment.scale(-d2))), alen += slen;
     }), bcurves = bcurves.map(function(s2) {
-      return p = s2.points, p[3] ? s2.points = [p[3], p[2], p[1], p[0]] : s2.points = [p[2], p[1], p[0]], s2;
+      return p2 = s2.points, p2[3] ? s2.points = [p2[3], p2[2], p2[1], p2[0]] : s2.points = [p2[2], p2[1], p2[0]], s2;
     }).reverse();
     const fs = fcurves[0].points[0], fe = fcurves[len - 1].points[fcurves[len - 1].points.length - 1], bs = bcurves[len - 1].points[bcurves[len - 1].points.length - 1], be = bcurves[0].points[0], ls = utils.makeline(bs, fs), le = utils.makeline(fe, be), segments = [ls].concat(fcurves).concat([le]).concat(bcurves);
     return new PolyBezier(segments);
@@ -5125,8 +5166,8 @@ class Bezier {
   lineIntersects(line) {
     const mx = min(line.p1.x, line.p2.x), my = min(line.p1.y, line.p2.y), MX = max(line.p1.x, line.p2.x), MY = max(line.p1.y, line.p2.y);
     return utils.roots(this.points, line).filter((t2) => {
-      var p = this.get(t2);
-      return utils.between(p.x, mx, MX) && utils.between(p.y, my, MY);
+      var p2 = this.get(t2);
+      return utils.between(p2.x, mx, MX) && utils.between(p2.y, my, MY);
     });
   }
   selfintersects(curveIntersectionThreshold) {
@@ -5201,7 +5242,7 @@ const nodeToRect = (nd) => ({
 }), isInside = (test2, target) => test2.x >= target.x && test2.y >= target.y && test2.x + test2.width <= target.x + target.width && test2.y + test2.height <= target.y + target.height;
 function bezierControlPoints(diagramEdge) {
   let [start, ...bezierPoints] = diagramEdge.points;
-  invariant(start, "start should be defined");
+  invariant$1(start, "start should be defined");
   const handles = [
     // start
   ];
@@ -5215,7 +5256,7 @@ function bezierControlPoints(diagramEdge) {
       });
     }), bezierPoints = rest, start = end;
   }
-  return invariant(bezierPoints.length === 0, "all points should be consumed"), handles;
+  return invariant$1(bezierPoints.length === 0, "all points should be consumed"), handles;
 }
 const isClose = (a2, b2) => Math.abs(a2 - b2) < 3.1;
 function isSamePoint$1(a2, b2) {
@@ -5237,9 +5278,9 @@ function diagramViewToXYFlowData(view, opts) {
   const ns = "", nodeById = (id2) => nonNullable(nodeLookup.get(id2), `Node not found: ${id2}`);
   let next;
   for (; next = traverse.shift(); ) {
-    const { node, parent } = next;
-    node.children.length > 0 && traverse.push(...node.children.map((child) => ({ node: nodeById(child), parent: node })));
-    const isCompound = i$3(node.children, 1), position = {
+    const { node, parent } = next, isCompound = i$3(node.children, 1);
+    isCompound && traverse.push(...node.children.map((child) => ({ node: nodeById(child), parent: node })));
+    const position = {
       x: node.position[0],
       y: node.position[1]
     };
@@ -5254,6 +5295,7 @@ function diagramViewToXYFlowData(view, opts) {
       },
       draggable,
       selectable: opts.selectable,
+      focusable: opts.selectable && !isCompound,
       deletable: !1,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
@@ -5271,7 +5313,11 @@ function diagramViewToXYFlowData(view, opts) {
   }
   for (const edge of view.edges) {
     const source = edge.source, target = edge.target, id2 = ns + edge.id;
-    invariant(i$3(edge.points, 2), "edge should have at least 2 points"), xyedges.push({
+    if (!i$3(edge.points, 2)) {
+      console.error("edge should have at least 2 points", edge);
+      continue;
+    }
+    xyedges.push({
       id: id2,
       type: "relationship",
       source: ns + source,
@@ -5462,7 +5508,7 @@ function createDiagramStore(props2) {
           },
           focusOnNode: (nodeId) => {
             const { focusedNodeId, view, enableFocusMode } = get();
-            if (invariant(enableFocusMode, "focus mode is not enabled"), nodeId !== focusedNodeId) {
+            if (invariant$1(enableFocusMode, "focus mode is not enabled"), nodeId !== focusedNodeId) {
               const notDimmed = new StringSet([nodeId]), dimmed2 = new StringSet();
               for (const edge of view.edges)
                 edge.source === nodeId || edge.target === nodeId ? (notDimmed.add(edge.source), notDimmed.add(edge.target)) : dimmed2.add(edge.id);
@@ -5598,12 +5644,12 @@ function createDiagramStore(props2) {
               };
               data.label?.bbox && (_updated.labelBBox = data.label?.bbox), data.edge.labelBBox && (_updated.labelBBox ??= data.edge.labelBBox), controlPoints && i$3(controlPoints, 1) && (_updated.controlPoints = controlPoints), !sourceOrTargetMoved && data.edge.dotpos && (_updated.dotpos = data.edge.dotpos);
               const allX = [
-                ...data.edge.points.map((p) => p[0]),
-                ...(controlPoints ?? []).map((p) => p.x),
+                ...data.edge.points.map((p2) => p2[0]),
+                ...(controlPoints ?? []).map((p2) => p2.x),
                 ..._updated.labelBBox ? [_updated.labelBBox.x, _updated.labelBBox.x + _updated.labelBBox.width] : []
               ], allY = [
-                ...data.edge.points.map((p) => p[1]),
-                ...(controlPoints ?? []).map((p) => p.y),
+                ...data.edge.points.map((p2) => p2[1]),
+                ...(controlPoints ?? []).map((p2) => p2.y),
                 ..._updated.labelBBox ? [_updated.labelBBox.y, _updated.labelBBox.y + _updated.labelBBox.height] : []
               ], rect = boxToRect({
                 x: Math.floor(Math.min(...allX)),
@@ -5651,9 +5697,9 @@ function createDiagramStore(props2) {
             if (!onNavigateTo)
               return;
             const xynode = xynodes2.find(({ id: id2 }) => id2 === xynodeId);
-            invariant(xynode, `xynode not found: ${xynodeId}`);
+            invariant$1(xynode, `xynode not found: ${xynodeId}`);
             const element = view.nodes.find(({ id: id2 }) => id2 === xynodeId);
-            invariant(element?.navigateTo, `node is not navigable: ${xynodeId}`), cancelSaveManualLayout(), set(
+            invariant$1(element?.navigateTo, `node is not navigable: ${xynodeId}`), cancelSaveManualLayout(), set(
               {
                 lastClickedNodeId: xynodeId,
                 lastOnNavigate: {
@@ -5723,7 +5769,7 @@ function createDiagramStore(props2) {
           },
           activateDynamicStep: (nextStep) => {
             const { isDynamicView, xyflow, xystore, fitViewPadding } = get();
-            invariant(isDynamicView, "view is not dynamic");
+            invariant$1(isDynamicView, "view is not dynamic");
             const edgeId = StepEdgeId(nextStep), dimmed2 = new StringSet();
             let edge = null;
             for (const e2 of xyflow.getEdges()) {
@@ -5733,7 +5779,7 @@ function createDiagramStore(props2) {
               }
               dimmed2.add(e2.id);
             }
-            invariant(!!edge, `edge not found: ${edgeId}`);
+            invariant$1(!!edge, `edge not found: ${edgeId}`);
             const selected = [];
             for (const n2 of xyflow.getNodes()) {
               if (n2.id === edge.source || n2.id === edge.target) {
@@ -5781,6 +5827,13 @@ function createDiagramStore(props2) {
               noReplace,
               "onInit"
             );
+          },
+          highlightByElementNotation: (notation, onlyOfKind) => {
+            const { xynodes: xynodes2, xyedges: xyedges2 } = get(), dimmed2 = new StringSet(m$1(xyedges2, p$1("id")));
+            xynodes2.forEach(({ id: id2, data }) => {
+              const node = data.element;
+              (node.shape !== notation.shape || node.color !== notation.color || !notation.kinds.includes(node.kind) || onlyOfKind && node.kind !== onlyOfKind) && dimmed2.add(id2);
+            }), set({ dimmed: dimmed2 }, noReplace, "highlightByElementNotation");
           }
         }),
         {
@@ -5818,7 +5871,7 @@ function DiagramContextProvider({
   ), useUpdateEffect(
     () => {
       const current = store.current;
-      invariant(current, "DiagramContext.store.current is not defined"), deepEqual(whereFilter, current.getState().whereFilter) || current.setState({ whereFilter: structuredClone(whereFilter) }, !1, "update where filter"), current.getState().updateView(view);
+      invariant$1(current, "DiagramContext.store.current is not defined"), deepEqual(whereFilter, current.getState().whereFilter) || current.setState({ whereFilter: structuredClone(whereFilter) }, !1, "update where filter"), current.getState().updateView(view);
     },
     [view, whereFilter],
     (a2, b2) => shallowEqual(a2[0], b2[0]) && deepEqual(a2[1], b2[1])
@@ -5879,7 +5932,7 @@ function FitViewOnViewportResize({ diagramApi }) {
     1e3
   ), null;
 }
-function selector$3({ view, viewportChanged, fitViewPadding }) {
+function selector$4({ view, viewportChanged, fitViewPadding }) {
   return {
     layoutId: view.id + "_" + view.autoLayout + "_" + fitViewPadding,
     viewportNotMoved: !viewportChanged
@@ -5889,7 +5942,7 @@ function FitViewOnDiagramChange() {
   const {
     layoutId,
     viewportNotMoved
-  } = useDiagramState(selector$3, shallowEqual), diagramApi = useDiagramStoreApi(), [currentLayoutId, setCurrent] = useState$1(layoutId), requiresFit = layoutId !== currentLayoutId;
+  } = useDiagramState(selector$4, shallowEqual), diagramApi = useDiagramStoreApi(), [currentLayoutId, setCurrent] = useState$1(layoutId), requiresFit = layoutId !== currentLayoutId;
   return useDebouncedEffect(
     () => {
       layoutId !== currentLayoutId && (setCurrent(layoutId), diagramApi.getState().fitDiagram(450));
@@ -6100,11 +6153,11 @@ Linear.prototype = {
 function curveLinear(context) {
   return new Linear(context);
 }
-function x(p) {
-  return p[0];
+function x(p2) {
+  return p2[0];
 }
-function y(p) {
-  return p[1];
+function y(p2) {
+  return p2[1];
 }
 function d3line(x$1, y$12) {
   var defined = constant(!0), context = null, curve2 = curveLinear, output = null, path = withPath(line);
@@ -6501,7 +6554,7 @@ const curveCatmullRomOpen = function custom4(alpha2) {
   Dot,
   ODot
 };
-var container$4 = "yi2p6v1", dimmed$2 = "yi2p6v2", edgePathBg = "yi2p6v3", markerContext = "yi2p6v4", controlPoint = "yi2p6v5", controlDragging = "yi2p6v6", cssEdgePath = "yi2p6v8", stepEdgeNumber = "yi2p6v9", varLabelX = "var(--yi2p6va)", varLabelY = "var(--yi2p6vb)", edgeLabel = "yi2p6vd", edgeLabelText = "yi2p6ve";
+var container$5 = "yi2p6v1", dimmed$3 = "yi2p6v2", edgePathBg = "yi2p6v3", markerContext = "yi2p6v4", controlPoint = "yi2p6v5", controlDragging = "yi2p6v6", cssEdgePath = "yi2p6v8", stepEdgeNumber = "yi2p6v9", varLabelX = "var(--yi2p6va)", varLabelY = "var(--yi2p6vb)", edgeLabel = "yi2p6vd", edgeLabelText = "yi2p6ve";
 function getNodeIntersectionFromCenterToPoint(intersectionNode, { x: x1, y: y1 }) {
   const {
     width: intersectionNodeWidth,
@@ -6534,13 +6587,13 @@ const toMarker = (arrowType) => {
 };
 function bezierPath(bezierSpline) {
   let [start, ...points] = bezierSpline;
-  invariant(start, "start should be defined");
+  invariant$1(start, "start should be defined");
   let path = `M ${start[0]},${start[1]}`;
   for (; i$3(points, 3); ) {
     const [cp1, cp2, end, ...rest] = points;
     path = path + ` C ${cp1[0]},${cp1[1]} ${cp2[0]},${cp2[1]} ${end[0]},${end[1]}`, points = rest;
   }
-  return invariant(points.length === 0, "all points should be consumed"), path;
+  return invariant$1(points.length === 0, "all points should be consumed"), path;
 }
 const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => {
   const [ax, ay] = n(a2) ? a2 : [a2.x, a2.y], [bx, by] = n(b2) ? b2 : [b2.x, b2.y];
@@ -6564,7 +6617,7 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => {
     isHovered: s2.hoveredEdgeId === id2,
     isDimmed: s2.dimmed.has(id2),
     hasOpenSourceRelation: !!s2.onOpenSourceRelation
-  })), { nodeLookup, edgeLookup } = xyflowStore.getState(), sourceNode = nonNullable(nodeLookup.get(source), `source node ${source} not found`), targetNode = nonNullable(nodeLookup.get(target), `target node ${target} not found`), isModified = n$2(data.controlPoints) || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.element.position) || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.element.position), {
+  })), { nodeLookup, edgeLookup } = xyflowStore.getState(), sourceNode = nonNullable(nodeLookup.get(source), `source node ${source} not found`), targetNode = nonNullable(nodeLookup.get(target), `target node ${target} not found`), isModified = n$1(data.controlPoints) || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.element.position) || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.element.position), {
     label,
     edge: {
       points: diagramEdgePoints,
@@ -6583,7 +6636,7 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => {
     x: label?.bbox.x ?? labelX,
     y: label?.bbox.y ?? labelY
   });
-  let edgePath;
+  let edgePath2;
   if (isModified) {
     const sourceCenterPos = { x: sourceX, y: sourceY }, targetCenterPos = { x: targetX, y: targetY }, points = diagramEdge.dir === "back" ? [
       targetCenterPos,
@@ -6598,9 +6651,9 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => {
       getNodeIntersectionFromCenterToPoint(targetNode, a$1(controlPoints) ?? sourceCenterPos),
       targetCenterPos
     ];
-    edgePath = nonNullable(curve(points));
+    edgePath2 = nonNullable(curve(points));
   } else
-    edgePath = bezierPath(diagramEdgePoints);
+    edgePath2 = bezierPath(diagramEdgePoints);
   const svgPathRef = useRef$1(null);
   useEffect$1(() => {
     const path = svgPathRef.current;
@@ -6610,7 +6663,7 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => {
       y: Math.round(dompoint.y)
     };
     setLabelPosition((current) => isSamePoint(current, point2) ? current : point2);
-  }, [edgePath]), useDebouncedEffect(
+  }, [edgePath2]), useDebouncedEffect(
     () => {
       !label || label.bbox.x === labelPos.x && label.bbox.y === labelPos.y || diagramStore.getState().xyflow.updateEdgeData(id2, {
         label: {
@@ -6677,8 +6730,8 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => {
     "g",
     {
       className: clsx(
-        container$4,
-        isDimmed && dimmed$2,
+        container$5,
+        isDimmed && dimmed$3,
         isControlPointDragging && controlDragging
       ),
       "data-likec4-color": color2,
@@ -6690,7 +6743,7 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => {
           "path",
           {
             className: clsx("react-flow__edge-interaction"),
-            d: edgePath,
+            d: edgePath2,
             fill: "none",
             stroke: "transparent",
             strokeWidth: interactionWidth ?? 10
@@ -6705,7 +6758,7 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => {
             "path",
             {
               className: clsx("react-flow__edge-path", edgePathBg),
-              d: edgePath,
+              d: edgePath2,
               style,
               strokeLinecap: "round"
             }
@@ -6715,7 +6768,7 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => {
             {
               ref: svgPathRef,
               className: clsx("react-flow__edge-path", cssEdgePath),
-              d: edgePath,
+              d: edgePath2,
               style,
               strokeLinecap: "round",
               strokeDasharray,
@@ -6730,13 +6783,13 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => {
             onContextMenu: (e2) => {
               e2.preventDefault(), e2.stopPropagation();
             },
-            children: controlPoints.map((p, i2) => /* @__PURE__ */ jsx(
+            children: controlPoints.map((p2, i2) => /* @__PURE__ */ jsx(
               "circle",
               {
                 onPointerDown: (e2) => onControlPointerDown(i2, e2),
                 className: controlPoint,
-                cx: p.x,
-                cy: p.y,
+                cx: p2.x,
+                cy: p2.y,
                 r: 3
               },
               i2
@@ -6786,9 +6839,9 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => {
   {
     className: clsx([
       "nodrag nopan",
-      container$4,
+      container$5,
       edgeLabel,
-      isDimmed && dimmed$2
+      isDimmed && dimmed$3
     ]),
     style: {
       ...assignInlineVars({
@@ -6811,12 +6864,12 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => {
     onClick: onClick || void 0,
     children: [
       stepNum !== null && /* @__PURE__ */ jsx(Box, { className: stepEdgeNumber, children: stepNum }),
-      n$2(label?.text) && /* @__PURE__ */ jsx(Box, { className: edgeLabelText, children: label.text })
+      n$1(label?.text) && /* @__PURE__ */ jsx(Box, { className: edgeLabelText, children: label.text })
     ]
   }
 ) });
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
@@ -6843,7 +6896,7 @@ var defaultAttributes = {
   }
 };
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
@@ -6876,182 +6929,210 @@ const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
   return Component2.displayName = `${iconNamePascal}`, Component2;
 };
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconAlertTriangle = createReactComponent("outline", "alert-triangle", "IconAlertTriangle", [["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" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconArrowBigDownLines = createReactComponent("outline", "arrow-big-down-lines", "IconArrowBigDownLines", [["path", { d: "M15 12h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-3h6v3z", key: "svg-0" }], ["path", { d: "M15 3h-6", key: "svg-1" }], ["path", { d: "M15 6h-6", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconArrowDownRight = createReactComponent("outline", "arrow-down-right", "IconArrowDownRight", [["path", { d: "M7 7l10 10", key: "svg-0" }], ["path", { d: "M17 8l0 9l-9 0", key: "svg-1" }]]);
+/**
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconArrowLeft = createReactComponent("outline", "arrow-left", "IconArrowLeft", [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M5 12l6 6", key: "svg-1" }], ["path", { d: "M5 12l6 -6", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconCheck = createReactComponent("outline", "check", "IconCheck", [["path", { d: "M5 12l5 5l10 -10", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconChevronDown = createReactComponent("outline", "chevron-down", "IconChevronDown", [["path", { d: "M6 9l6 6l6 -6", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconChevronLeft = createReactComponent("outline", "chevron-left", "IconChevronLeft", [["path", { d: "M15 6l-6 6l6 6", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconChevronRight = createReactComponent("outline", "chevron-right", "IconChevronRight", [["path", { d: "M9 6l6 6l-6 6", key: "svg-0" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconCopy = createReactComponent("outline", "copy", "IconCopy", [["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" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconExternalLink = createReactComponent("outline", "external-link", "IconExternalLink", [["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" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconFileCode = createReactComponent("outline", "file-code", "IconFileCode", [["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" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconFileSymlink = createReactComponent("outline", "file-symlink", "IconFileSymlink", [["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" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconFocusCentered = createReactComponent("outline", "focus-centered", "IconFocusCentered", [["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" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconFolderOpen = createReactComponent("outline", "folder-open", "IconFolderOpen", [["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" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconHelpCircle = createReactComponent("outline", "help-circle", "IconHelpCircle", [["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" }]]);
+/**
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconLayoutDashboard = createReactComponent("outline", "layout-dashboard", "IconLayoutDashboard", [["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" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconLink = createReactComponent("outline", "link", "IconLink", [["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" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconLoader = createReactComponent("outline", "loader", "IconLoader", [["path", { d: "M12 6l0 -3", key: "svg-0" }], ["path", { d: "M16.25 7.75l2.15 -2.15", key: "svg-1" }], ["path", { d: "M18 12l3 0", key: "svg-2" }], ["path", { d: "M16.25 16.25l2.15 2.15", key: "svg-3" }], ["path", { d: "M12 18l0 3", key: "svg-4" }], ["path", { d: "M7.75 16.25l-2.15 2.15", key: "svg-5" }], ["path", { d: "M6 12l-3 0", key: "svg-6" }], ["path", { d: "M7.75 7.75l-2.15 -2.15", key: "svg-7" }]]);
+/**
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconMenu2 = createReactComponent("outline", "menu-2", "IconMenu2", [["path", { d: "M4 6l16 0", key: "svg-0" }], ["path", { d: "M4 12l16 0", key: "svg-1" }], ["path", { d: "M4 18l16 0", key: "svg-2" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconMenu = createReactComponent("outline", "menu", "IconMenu", [["path", { d: "M4 8l16 0", key: "svg-0" }], ["path", { d: "M4 16l16 0", key: "svg-1" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconMoonStars = createReactComponent("outline", "moon-stars", "IconMoonStars", [["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" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconShare = createReactComponent("outline", "share", "IconShare", [["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" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconSun = createReactComponent("outline", "sun", "IconSun", [["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" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconZoomScan = createReactComponent("outline", "zoom-scan", "IconZoomScan", [["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" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconFileFilled = createReactComponent("filled", "file-filled", "IconFileFilled", [["path", { d: "M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z", key: "svg-0" }], ["path", { d: "M19 7h-4l-.001 -4.001z", key: "svg-1" }]]);
+/**
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconFolderFilled = createReactComponent("filled", "folder-filled", "IconFolderFilled", [["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" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconPlayerPlayFilled = createReactComponent("filled", "player-play-filled", "IconPlayerPlayFilled", [["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" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconPlayerSkipBackFilled = createReactComponent("filled", "player-skip-back-filled", "IconPlayerSkipBackFilled", [["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" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconPlayerSkipForwardFilled = createReactComponent("filled", "player-skip-forward-filled", "IconPlayerSkipForwardFilled", [["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" }]]);
 /**
- * @license @tabler/icons-react v3.11.0 - MIT
+ * @license @tabler/icons-react v3.12.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
@@ -7068,6 +7149,7 @@ function NavigateToBtn({ xynodeId, className }) {
       onClick: (event) => {
         event.stopPropagation(), diagramApi.getState().triggerOnNavigateTo(xynodeId, event);
       },
+      role: "button",
       onDoubleClick: (event) => event.stopPropagation(),
       children: /* @__PURE__ */ jsx(
         IconZoomScan,
@@ -7081,7 +7163,7 @@ function NavigateToBtn({ xynodeId, className }) {
     }
   );
 }
-var container$3 = "c3cfh00", nodeHandlerInCenter = "c3cfh01", dimmed$1 = "c3cfh02", varOpacity = "var(--c3cfh03)", varBorderTransparency = "var(--c3cfh04)", compoundBody = "c3cfh05", transparent = "c3cfh07", title$2 = "c3cfh08", titleWithNavigation = "c3cfh09", indicator$1 = "c3cfh0d", navigateBtn = "c3cfh0f";
+var container$4 = "c3cfh00", nodeHandlerInCenter = "c3cfh01", dimmed$2 = "c3cfh02", varOpacity = "var(--c3cfh03)", varBorderTransparency = "var(--c3cfh04)", compoundBody = "c3cfh05", transparent = "c3cfh07", title$2 = "c3cfh08", titleWithNavigation = "c3cfh09", indicator$1 = "c3cfh0d", navigateBtn = "c3cfh0f";
 const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.data.element, next.data.element), CompoundNodeMemo = /* @__PURE__ */ memo$1(function({
   id: id2,
   data: {
@@ -7112,10 +7194,10 @@ const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.dat
       Box,
       {
         className: clsx(
-          container$3,
+          container$4,
           "likec4-compound-node",
           opacity < 1 && "likec4-compound-transparent",
-          isDimmed && dimmed$1
+          isDimmed && dimmed$2
         ),
         mod: {
           "compound-depth": depth,
@@ -7176,16 +7258,16 @@ const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.dat
     )
   ] });
 }, isEqualProps$1);
-var container$2 = "_14ylloj1", handleCenter = "_14ylloj2", containerAnimated = "_14ylloj3", dimmed = "_14ylloj4", indicator = "_14ylloj7", fillElementFill = "_14ylloj8", fillMixStroke = "_14ylloja", hasIcon = "_14yllojb", title$1 = "_14ylloje", description$1 = "_14yllojf", technology = "_14yllojg", elementDataContainer = "_14yllojh", elementTextData = "_14ylloji", elementIcon = "_14yllojj", cssShapeSvg = "_14yllojm", cssNavigateBtn = "_14yllojn", elementLink = "_1s87wm0", trigger = "_1s87wm1";
-const selector$2 = (s2) => {
+var container$3 = "_14ylloj1", handleCenter$1 = "_14ylloj2", containerAnimated = "_14ylloj3", dimmed$1 = "_14ylloj4", indicator = "_14ylloj7", fillElementFill = "_14ylloj8", fillMixStroke = "_14ylloja", hasIcon = "_14yllojb", title$1 = "_14ylloje", description$1 = "_14yllojf", technology = "_14yllojg", elementDataContainer = "_14yllojh", elementTextData = "_14ylloji", elementIcon = "_14yllojj", cssShapeSvg = "_14yllojm", cssNavigateBtn = "_14yllojn", elementLink = "_1s87wm0", trigger = "_1s87wm1";
+const selector$3 = (s2) => {
   const target = s2.getContainer();
   return target ? { target } : null;
 };
 function ElementLink({
   element
 }) {
-  invariant(element.links, "ElementLink: links are required");
-  const id2 = useId$1(), portalProps = useDiagramState(selector$2);
+  invariant$1(element.links, "ElementLink: links are required");
+  const id2 = useId$1(), portalProps = useDiagramState(selector$3);
   return /* @__PURE__ */ jsx("div", { className: elementLink, "data-likec4-linkid": id2, children: /* @__PURE__ */ jsxs(
     HoverCard,
     {
@@ -7225,8 +7307,8 @@ function ElementLink({
             onClick: (e2) => e2.stopPropagation(),
             p: "xs",
             children: /* @__PURE__ */ jsx(Stack, { gap: "xs", children: element.links.map((link) => /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", gap: "sm", children: [
-              /* @__PURE__ */ jsx(Box, { flex: "1", style: { overflow: "clip", maxWidth: u(element.width, { min: 200, max: 400 }) }, children: /* @__PURE__ */ jsx(Anchor, { href: link, target: "_blank", fz: "13", truncate: "end", children: link }) }),
-              /* @__PURE__ */ jsx(CopyButton$1, { value: link, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Box, { flex: "1", style: { overflow: "clip", maxWidth: u(element.width, { min: 200, max: 400 }) }, children: /* @__PURE__ */ jsx(Anchor, { href: link.url, target: "_blank", fz: "13", truncate: "end", children: link.title || link.url }) }),
+              /* @__PURE__ */ jsx(CopyButton$1, { value: link.url, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
                 Button,
                 {
                   size: "compact-xs",
@@ -7237,7 +7319,7 @@ function ElementLink({
                   children: copied ? "copied" : "copy"
                 }
               ) })
-            ] }, link)) })
+            ] }, link.url)) })
           }
         )
       ]
@@ -7480,7 +7562,7 @@ const Text = Text$1.withProps({
       {
         type: "target",
         position: Position.Top,
-        className: handleCenter
+        className: handleCenter$1
       }
     ),
     /* @__PURE__ */ jsxs(
@@ -7488,8 +7570,8 @@ const Text = Text$1.withProps({
       {
         id: id2,
         className: clsx([
-          container$2,
-          isDimmed && dimmed,
+          container$3,
+          isDimmed && dimmed$1,
           animate !== "idle" && containerAnimated,
           "likec4-element-node"
         ]),
@@ -7537,7 +7619,7 @@ const Text = Text$1.withProps({
             {
               className: clsx(
                 elementDataContainer,
-                n$2(elementIcon2) && hasIcon,
+                n$1(elementIcon2) && hasIcon,
                 "likec4-element"
               ),
               children: [
@@ -7578,7 +7660,7 @@ const Text = Text$1.withProps({
       {
         type: "source",
         position: Position.Top,
-        className: handleCenter
+        className: handleCenter$1
       }
     )
   ] });
@@ -7951,9 +8033,9 @@ class Strength {
    * @param [w] weight
    * @return strength
    */
-  static create(a2, b2, c, w = 1) {
+  static create(a2, b2, c2, w = 1) {
     let result = 0;
-    return result += Math.max(0, Math.min(1e3, a2 * w)) * 1e6, result += Math.max(0, Math.min(1e3, b2 * w)) * 1e3, result += Math.max(0, Math.min(1e3, c * w)), result;
+    return result += Math.max(0, Math.min(1e3, a2 * w)) * 1e6, result += Math.max(0, Math.min(1e3, b2 * w)) * 1e3, result += Math.max(0, Math.min(1e3, c2 * w)), result;
   }
   /**
    * The 'required' symbolic strength.
@@ -8175,9 +8257,9 @@ class Solver {
    * Update the values of the variables.
    */
   updateVariables() {
-    let vars = this._varMap, rows = this._rowMap;
-    for (let i2 = 0, n2 = vars.size(); i2 < n2; ++i2) {
-      let pair = vars.itemAt(i2), rowPair = rows.find(pair.second);
+    let vars2 = this._varMap, rows = this._rowMap;
+    for (let i2 = 0, n2 = vars2.size(); i2 < n2; ++i2) {
+      let pair = vars2.itemAt(i2), rowPair = rows.find(pair.second);
       rowPair !== void 0 ? pair.first.setValue(rowPair.second.constant()) : pair.first.setValue(0);
     }
   }
@@ -8388,9 +8470,9 @@ class Solver {
   _getDualEnteringSymbol(row) {
     let ratio = Number.MAX_VALUE, entering = INVALID_SYMBOL, cells = row.cells();
     for (let i2 = 0, n2 = cells.size(); i2 < n2; ++i2) {
-      let pair = cells.itemAt(i2), symbol = pair.first, c = pair.second;
-      if (c > 0 && symbol.type() !== SymbolType.Dummy) {
-        let r2 = this._objective.coefficientFor(symbol) / c;
+      let pair = cells.itemAt(i2), symbol = pair.first, c2 = pair.second;
+      if (c2 > 0 && symbol.type() !== SymbolType.Dummy) {
+        let r2 = this._objective.coefficientFor(symbol) / c2;
         r2 < ratio && (ratio = r2, entering = symbol);
       }
     }
@@ -8444,17 +8526,17 @@ class Solver {
   _getMarkerLeavingSymbol(marker) {
     let dmax = Number.MAX_VALUE, r1 = dmax, r2 = dmax, invalid = INVALID_SYMBOL, first = invalid, second = invalid, third = invalid, rows = this._rowMap;
     for (let i2 = 0, n2 = rows.size(); i2 < n2; ++i2) {
-      let pair = rows.itemAt(i2), row = pair.second, c = row.coefficientFor(marker);
-      if (c === 0)
+      let pair = rows.itemAt(i2), row = pair.second, c2 = row.coefficientFor(marker);
+      if (c2 === 0)
         continue;
       let symbol = pair.first;
       if (symbol.type() === SymbolType.External)
         third = symbol;
-      else if (c < 0) {
-        let r3 = -row.constant() / c;
+      else if (c2 < 0) {
+        let r3 = -row.constant() / c2;
         r3 < r1 && (r1 = r3, first = symbol);
       } else {
-        let r3 = row.constant() / c;
+        let r3 = row.constant() / c2;
         r3 < r2 && (r2 = r3, second = symbol);
       }
     }
@@ -8839,7 +8921,7 @@ function useLayoutConstraints() {
       cancelSaveManualLayout(), solverRef.current = createLayoutConstraints(xystore, xynode.id);
     },
     onNodeDrag: (_event, xynode) => {
-      invariant(solverRef.current, "solverRef.current should be defined"), solverRef.current?.onNodeDrag(xynode);
+      invariant$1(solverRef.current, "solverRef.current should be defined"), solverRef.current?.onNodeDrag(xynode);
     },
     onNodeDragStop: (_event, _xynode) => {
       diagramApi.getState().scheduleSaveManualLayout(), solverRef.current = void 0;
@@ -8961,7 +9043,7 @@ function useXYFlowEvents() {
           setLastClickedEdge
         } = diagramApi.getState();
         lastClickedEdgeId !== xyedge.id && setLastClickedEdge(xyedge.id);
-        const isNotAFirstClick = lastClickedEdgeId === xyedge.id, isEdgeOfFocusedNode = n$2(focusedNodeId) && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target);
+        const isNotAFirstClick = lastClickedEdgeId === xyedge.id, isEdgeOfFocusedNode = n$1(focusedNodeId) && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target);
         if (isDynamicView && enableDynamicViewWalkthrough && (isEdgeOfFocusedNode || isNotAFirstClick || l(activeDynamicViewStep))) {
           const nextStep = extractStep(xyedge.data.edge.id);
           if (activeDynamicViewStep !== nextStep) {
@@ -9020,12 +9102,12 @@ function useXYFlowEvents() {
     };
   }, [diagramApi]);
 }
-const nodeTypes = {
+const nodeTypes$1 = {
   element: ElementNodeMemo,
   compound: CompoundNodeMemo
-}, edgeTypes = {
+}, edgeTypes$1 = {
   relationship: RelationshipEdge
-}, selector$1 = (s2) => ({
+}, selector$2 = (s2) => ({
   nodes: s2.xynodes,
   edges: s2.xyedges,
   onInit: s2.onInit,
@@ -9073,7 +9155,7 @@ function XYFlow({
     hasOnEdgeContextMenu,
     translateX,
     translateY
-  } = useDiagramState(selector$1, shallowEqual), [zoomOnDoubleClick, setZoomOnDoubleClick] = useState$1(zoomable), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents();
+  } = useDiagramState(selector$2, shallowEqual), [zoomOnDoubleClick, setZoomOnDoubleClick] = useState$1(zoomable), layoutConstraints = useLayoutConstraints(), handlers = useXYFlowEvents();
   return useOnViewportChange({
     onEnd: ({ x: x2, y: y2, zoom }) => {
       const roundedX = Math.round(x2), roundedY = Math.round(y2);
@@ -9087,8 +9169,8 @@ function XYFlow({
       ...colorMode && { colorMode },
       nodes,
       edges,
-      nodeTypes,
-      edgeTypes,
+      nodeTypes: nodeTypes$1,
+      edgeTypes: edgeTypes$1,
       zoomOnPinch: zoomable,
       zoomOnScroll: !pannable && zoomable,
       ...!zoomable && {
@@ -9159,15 +9241,15 @@ function XYFlow({
     }
   );
 }
-var container$1 = "_19ci0hj0", card = "_19ci0hj1", title = "_19ci0hj2", description = "_19ci0hj3";
-const selector = (s2) => ({
+var container$2 = "_19ci0hj0", card$1 = "_19ci0hj1", title = "_19ci0hj2", description = "_19ci0hj3";
+const selector$1 = (s2) => ({
   id: s2.view.id,
   title: s2.view.title ?? "untitled",
   description: s2.view.description,
   links: s2.view.links
 });
 function DiagramTitlePanel() {
-  const { id: id2, title: title$12, description: description$12, links } = useDiagramState(selector), [isCollapsed, setCollapsed] = useLocalStorage({
+  const { id: id2, title: title$12, description: description$12, links } = useDiagramState(selector$1), [isCollapsed, setCollapsed] = useLocalStorage({
     key: "diagram-title-panel-collapsed",
     defaultValue: !1
   }), toggle = () => setCollapsed((v) => !v);
@@ -9180,7 +9262,7 @@ function DiagramTitlePanel() {
         opacity: 0.05,
         scale: 0.6
       },
-      className: clsx("react-flow__panel", container$1),
+      className: clsx("react-flow__panel", container$2),
       style: {
         transformOrigin: "left center"
       },
@@ -9188,8 +9270,8 @@ function DiagramTitlePanel() {
         Card,
         {
           radius: "sm",
-          className: card,
-          withBorder: !0,
+          className: card$1,
+          withBorder: !isCollapsed,
           p: isCollapsed ? "sm" : "md",
           onDoubleClick: (e2) => e2.stopPropagation(),
           children: [
@@ -9198,17 +9280,18 @@ function DiagramTitlePanel() {
               {
                 fullWidth: !0,
                 justify: "stretch",
-                size: "sm",
-                py: 2,
+                size: "md",
                 radius: "0",
                 variant: "subtle",
-                color: "dark",
+                color: "gray",
                 onClick: toggle,
-                children: /* @__PURE__ */ jsx(Text$1, { inline: !0, fw: 500, fz: "xs", c: "gray", children: title$12 })
+                fw: 500,
+                fz: "sm",
+                children: title$12
               }
             ) }),
             !isCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(CardSection, { mb: "sm", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(CardSection, { mb: "xs", children: /* @__PURE__ */ jsx(
                 Button,
                 {
                   fullWidth: !0,
@@ -9295,16 +9378,16 @@ function DiagramTitlePanel() {
                     /* @__PURE__ */ jsx(Box, { flex: "1", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(
                       Anchor,
                       {
-                        href: link,
+                        href: link.url,
                         target: "_blank",
                         fz: "xs",
                         truncate: "end",
                         display: "inline-block",
                         w: "100%",
-                        children: link
+                        children: link.title || link.url
                       }
                     ) }),
-                    /* @__PURE__ */ jsx(CopyButton$1, { value: link, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx(CopyButton$1, { value: link.url, children: ({ copied, copy }) => /* @__PURE__ */ jsx(
                       Button,
                       {
                         size: "compact-xs",
@@ -9315,7 +9398,7 @@ function DiagramTitlePanel() {
                         children: copied ? "copied" : "copy"
                       }
                     ) })
-                  ] }, link))
+                  ] }, link.url))
                 }
               )
             ] })
@@ -9326,7 +9409,7 @@ function DiagramTitlePanel() {
     id2
   ) });
 }
-var container = "h3ljtj0", buttons = "h3ljtj1", btn = "h3ljtj3";
+var container$1 = "h3ljtj0", buttons = "h3ljtj1", btn = "h3ljtj3";
 function DynamicViewWalkthrough() {
   const isMobile = useXYStore((s2) => s2.width <= 750), {
     nextDynamicStep,
@@ -9361,7 +9444,7 @@ function DynamicViewWalkthrough() {
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      className: clsx("react-flow__panel", container),
+      className: clsx("react-flow__panel", container$1),
       onClick: (e2) => e2.stopPropagation(),
       onDoubleClick: (e2) => e2.stopPropagation(),
       children: [
@@ -9415,6 +9498,227 @@ function DynamicViewWalkthrough() {
     }
   );
 }
+var vars = { safariAnimationHook: "var(--likec4-safari-animation-hook)", default: { font: "var(--likec4-default-font-family)" }, likec4: { font: "var(--likec4-font-family)", background: { color: "var(--likec4-background-color)", pattern: { color: "var(--likec4-background-pattern-color)" } } }, compound: { font: "var(--likec4-compound-font-family)", titleColor: "var(--likec4-compound-title-color)" }, element: { font: "var(--likec4-element-font-family)", fill: "var(--likec4-element-fill)", stroke: "var(--likec4-element-stroke)", hiContrast: "var(--likec4-element-hiContrast)", loContrast: "var(--likec4-element-loContrast)" }, relation: { lineColor: "var(--likec4-relation-lineColor)", labelColor: "var(--likec4-relation-labelColor)", labelBgColor: "var(--likec4-relation-labelBg)" }, optionsPanel: { top: "var(--likec4-options-panel-top)", right: "var(--likec4-options-panel-right)" }, navigationPanel: { top: "var(--likec4-navigation-panel-top)", left: "var(--likec4-navigation-panel-left)" } }, container = "eaj0yq0", card = "eaj0yq1", tabPanel = "eaj0yq2", elementNotation = "eaj0yq3", shapeSvg = "eaj0yq4", shapeBadge = "eaj0yq5";
+const ElementNotation = ({ value }) => {
+  const {
+    title: title2,
+    color: color2 = "primary",
+    shape = "rectangle"
+  } = value, [onlyKind, setOnlyKind] = useState$1(null), diagramStore = useDiagramStoreApi(), w = 300, h = 200;
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      shadow: "none",
+      px: "xs",
+      py: "sm",
+      className: elementNotation,
+      mod: {
+        "data-likec4-color": color2
+      },
+      onMouseEnter: () => {
+        setOnlyKind(null), diagramStore.getState().highlightByElementNotation(value);
+      },
+      onMouseLeave: () => {
+        setOnlyKind(null), diagramStore.setState({ dimmed: /* @__PURE__ */ new Set() });
+      },
+      children: /* @__PURE__ */ jsxs(
+        Group,
+        {
+          gap: "sm",
+          align: "stretch",
+          wrap: "nowrap",
+          children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                flex: "0 0 70px",
+                style: {
+                  width: 70,
+                  height: u$1(70 * (h / w), 0)
+                },
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: clsx(
+                      shapeSvg
+                    ),
+                    viewBox: `0 0 ${w} ${h}`,
+                    children: /* @__PURE__ */ jsx(
+                      ElementShapeSvg,
+                      {
+                        shape,
+                        w,
+                        h
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(Stack, { gap: 4, flex: 1, children: [
+              /* @__PURE__ */ jsx(Group, { gap: 4, flex: "0 0 auto", children: value.kinds.map((kind) => /* @__PURE__ */ jsx(
+                Badge,
+                {
+                  className: shapeBadge,
+                  onMouseEnter: () => {
+                    setOnlyKind(kind), diagramStore.getState().highlightByElementNotation(value, kind);
+                  },
+                  onMouseLeave: () => {
+                    setOnlyKind(null), diagramStore.getState().highlightByElementNotation(value);
+                  },
+                  opacity: l(onlyKind) && onlyKind !== kind ? 0.25 : 1,
+                  color: l(onlyKind) && onlyKind !== kind ? "gray" : vars.element.fill,
+                  children: kind
+                },
+                kind
+              )) }),
+              /* @__PURE__ */ jsx(
+                Text$1,
+                {
+                  component: "div",
+                  fz: "sm",
+                  fw: 500,
+                  lh: "1.25",
+                  style: {
+                    textWrap: "pretty"
+                  },
+                  children: title2
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}, selector = (s2) => ({
+  id: s2.view.id,
+  notations: s2.view.notation?.elements ?? [],
+  height: s2.xystore.getState().height,
+  isVisible: e$3(s2.focusedNodeId ?? s2.activeDynamicViewStep),
+  target: s2.getContainer()
+});
+function NotationPanel() {
+  const {
+    id: id2,
+    notations,
+    isVisible,
+    height,
+    target
+  } = useDiagramState(selector), [isCollapsed, setCollapsed] = useLocalStorage({
+    key: "notation-panel-collapsed",
+    defaultValue: !0
+  }), hasNotations = notations.length > 0, portalProps = target ? { portalProps: { target } } : { withinPortal: !1 };
+  return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+    !hasNotations && /* @__PURE__ */ jsx(
+      m.div,
+      {
+        initial: { opacity: 0.75, translateX: "50%" },
+        animate: { opacity: 1, translateX: 0 },
+        exit: {
+          translateX: "100%",
+          opacity: 0.6
+        },
+        className: clsx("react-flow__panel", container),
+        children: /* @__PURE__ */ jsx(Tooltip$2, { label: "Diagram has no notations", color: "orange", ...portalProps, children: /* @__PURE__ */ jsx(
+          ThemeIcon,
+          {
+            size: "xl",
+            variant: "light",
+            color: "orange",
+            radius: "md",
+            children: /* @__PURE__ */ jsx(IconAlertTriangle, {})
+          }
+        ) })
+      },
+      "empty"
+    ),
+    hasNotations && isVisible && isCollapsed && /* @__PURE__ */ jsx(
+      m.div,
+      {
+        initial: { opacity: 0.75, translateX: "50%" },
+        animate: { opacity: 1, translateX: 0 },
+        exit: {
+          translateX: "100%",
+          opacity: 0.6
+        },
+        className: clsx("react-flow__panel", container),
+        children: /* @__PURE__ */ jsx(Tooltip$2, { label: "Show notation", color: "dark", fz: "xs", ...portalProps, children: /* @__PURE__ */ jsx(
+          ActionIcon$2,
+          {
+            size: "xl",
+            variant: "light",
+            color: "gray",
+            radius: "md",
+            onClick: () => setCollapsed(!1),
+            children: /* @__PURE__ */ jsx(IconHelpCircle, { stroke: 1.5 })
+          }
+        ) })
+      },
+      "collapsed"
+    ),
+    hasNotations && isVisible && !isCollapsed && /* @__PURE__ */ jsx(
+      m.div,
+      {
+        initial: {
+          opacity: 0.75,
+          // translateX: '50%',
+          scale: 0.2
+        },
+        animate: { opacity: 1, scale: 1 },
+        exit: {
+          opacity: 0,
+          scale: 0.25
+        },
+        className: clsx("react-flow__panel", container),
+        style: {
+          transformOrigin: "bottom right"
+        },
+        children: /* @__PURE__ */ jsx(
+          Paper,
+          {
+            radius: "sm",
+            withBorder: !0,
+            shadow: "lg",
+            className: card,
+            children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "first", radius: "xs", children: [
+              /* @__PURE__ */ jsxs(TabsList, { children: [
+                /* @__PURE__ */ jsx(
+                  ActionIcon$2,
+                  {
+                    size: "md",
+                    variant: "subtle",
+                    color: "gray",
+                    ml: 2,
+                    style: {
+                      alignSelf: "center"
+                    },
+                    onClick: () => setCollapsed(!0),
+                    children: /* @__PURE__ */ jsx(IconArrowDownRight, { stroke: 2 })
+                  }
+                ),
+                /* @__PURE__ */ jsx(TabsTab, { value: "first", fz: "xs", children: "Elements" }),
+                /* @__PURE__ */ jsx(TabsTab, { value: "second", fz: "xs", disabled: !0, children: "Relationships" })
+              ] }),
+              /* @__PURE__ */ jsx(TabsPanel, { value: "first", className: tabPanel, hidden: isCollapsed, children: /* @__PURE__ */ jsx(
+                ScrollAreaAutosize,
+                {
+                  viewportProps: {
+                    style: {
+                      maxHeight: height > 50 ? `min(40vh, ${height - 20}px)` : "40vh"
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx(Stack, { gap: 0, children: notations.map((n2, i2) => /* @__PURE__ */ jsx(ElementNotation, { value: n2 }, i2)) })
+                }
+              ) })
+            ] })
+          }
+        )
+      },
+      id2
+    )
+  ] });
+}
 const {
   primary,
   secondary,
@@ -9435,7 +9739,7 @@ const {
     throw new Error("NodeOptions: nodes and props.nodes should have the same length");
   const showShapeOption = nodes.some((node) => node.type === "element"), [firstNode, ...rest] = nodes, showGoToSource = rest.length === 0 && diagramApi.getState().onOpenSourceElement, showOpacityOption = firstNode.type === "compound" && (rest.length === 0 || rest.every((node) => node.type === "compound")), triggerChange = (style) => {
     const targets = nodes.map((node) => node.data.element.id);
-    invariant(i$3(targets, 1), "At least one target is required"), diagramApi.getState().triggerChangeElementStyle({
+    invariant$1(i$3(targets, 1), "At least one target is required"), diagramApi.getState().triggerChangeElementStyle({
       op: "change-element-style",
       style,
       targets
@@ -9521,7 +9825,7 @@ function Colors({
   onColorChange
 }) {
   let selectedColor = firstNode.data.element.color;
-  d$1(nodes, (node) => node.data.element.color !== selectedColor ? (selectedColor = null, !1) : !0);
+  u$4(nodes, (node) => node.data.element.color !== selectedColor ? (selectedColor = null, !1) : !0);
   const changeColor = (color2) => () => {
     selectedColor !== color2 && onColorChange(color2);
   };
@@ -9577,7 +9881,7 @@ function ShapeOption({
   onShapeChange
 }) {
   let selectedShape = firstNode.data.element.shape;
-  return d$1(nodes, (node) => node.data.element.shape !== selectedShape ? (selectedShape = null, !1) : !0), /* @__PURE__ */ jsxs("div", { children: [
+  return u$4(nodes, (node) => node.data.element.shape !== selectedShape ? (selectedShape = null, !1) : !0), /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(Divider, { label: "shape", labelPosition: "left" }),
     /* @__PURE__ */ jsx(
       Select,
@@ -9942,19 +10246,19 @@ const ActionIcon = ActionIcon$2.withProps({
     showFitDiagram,
     showLayoutDriftWarning,
     showChangeAutoLayout,
-    portalProps: _portalProps,
+    target,
     showGoToSource
   } = useDiagramState((s2) => {
-    const isNotActive = s2.activeDynamicViewStep === null && s2.focusedNodeId === null, target = s2.getContainer();
+    const isNotActive = s2.activeDynamicViewStep === null && s2.focusedNodeId === null;
     return {
       showNavigationButtons: !!s2.onBurgerMenuClick || s2.showNavigationButtons && !!s2.onNavigateTo,
       showFitDiagram: s2.fitViewEnabled && s2.zoomable && s2.viewportChanged,
       showLayoutDriftWarning: s2.readonly !== !0 && s2.view.hasLayoutDrift === !0 && isNotActive,
       showChangeAutoLayout: s2.readonly !== !0 && !!s2.onChange && isNotActive,
       showGoToSource: !!s2.onOpenSourceView,
-      portalProps: target ? { target } : void 0
+      target: s2.getContainer()
     };
-  }), portalProps = _portalProps ? { portalProps: _portalProps } : void 0;
+  }), portalProps = target ? { portalProps: { target } } : void 0;
   return /* @__PURE__ */ jsxs(
     Stack,
     {
@@ -10034,7 +10338,7 @@ function literalToEnum(value) {
 }
 function XYFlowBackground({ background }) {
   if (typeof background == "string")
-    return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(background) });
+    return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(background), size: 2, gap: 20 });
   const { variant, ...rest } = background;
   return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(variant), ...rest });
 }
@@ -10045,11 +10349,13 @@ const XYFlowInner = memo$1(function({
   showDiagramTitle
 }) {
   const {
+    showNotations,
     isDynamicView,
     isDynamicViewActive,
     readonly,
     enableDynamicViewWalkthrough
   } = useDiagramState((s2) => ({
+    showNotations: s2.showNotations,
     isDynamicView: s2.isDynamicView,
     readonly: s2.readonly,
     enableDynamicViewWalkthrough: s2.enableDynamicViewWalkthrough,
@@ -10062,6 +10368,7 @@ const XYFlowInner = memo$1(function({
     readonly !== !0 && /* @__PURE__ */ jsx(OptionsPanel, {}),
     showDiagramTitle === !0 && !isDynamicViewActive && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
     isDynamicView && enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}),
+    showNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
     children
   ] });
 }, shallowEqual);
@@ -10080,6 +10387,7 @@ function LikeC4Diagram({
   controls = !1,
   showElementLinks = !0,
   showDiagramTitle = !0,
+  showNotations = !0,
   enableDynamicViewWalkthrough = !1,
   enableFocusMode = !1,
   initialWidth,
@@ -10127,6 +10435,7 @@ function LikeC4Diagram({
           fitViewPadding,
           showElementLinks,
           showNavigationButtons,
+          showNotations,
           nodesDraggable,
           nodesSelectable,
           experimentalEdgeEditing,
@@ -10224,6 +10533,7 @@ function StaticLikeC4Diagram({
       background,
       showElementLinks: !0,
       showDiagramTitle: !1,
+      showNotations: !1,
       enableDynamicViewWalkthrough: !1,
       enableFocusMode: !1,
       nodesSelectable: !1,
@@ -10232,10 +10542,292 @@ function StaticLikeC4Diagram({
     }
   );
 }
-var previewBg = "_15b5f732";
-const Route$9 = createFileRoute("/")({
-  component: IndexPage
+var root = "mxt2a80";
+function edgePath(points) {
+  return points.reduce((acc, [x2, y2], i2) => acc + `${i2 === 0 ? "M" : " L"} ${x2},${y2}`, "");
+}
+function LinkEdge({
+  id: id2,
+  data,
+  ...props2
+}) {
+  if (!data)
+    return null;
+  const path = edgePath(data.points);
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      id: id2,
+      path,
+      ...props2
+    }
+  );
+}
+var handleCenter = "_1n8mzjc0", toplevelNode = "_1n8mzjc1", nestedNode = "_1n8mzjc2", dimmed = "_1n8mzjc3", folderNode = "_1n8mzjc4", fileNode = "_1n8mzjc5", viewNode = "_1n8mzjc6", viewNodeImageSection = "_1n8mzjc7", viewTitle = "_1n8mzjc8";
+const FolderNode = /* @__PURE__ */ memo$1(function({
+  data,
+  parentId,
+  id: id2
+}) {
+  const isTopLevel = e$3(parentId);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, className: handleCenter }),
+    /* @__PURE__ */ jsx(
+      Paper,
+      {
+        p: "sm",
+        pt: "xs",
+        radius: "md",
+        withBorder: !0,
+        shadow: isTopLevel ? "lg" : "xs",
+        className: clsx(
+          folderNode,
+          isTopLevel ? toplevelNode : nestedNode,
+          data.dimmed && dimmed
+        ),
+        children: /* @__PURE__ */ jsxs(Group, { gap: 8, children: [
+          /* @__PURE__ */ jsx(ThemeIcon, { size: 24, variant: "transparent", color: "dark.4", children: /* @__PURE__ */ jsx(IconFolderFilled, { size: "100%" }) }),
+          /* @__PURE__ */ jsx(Text$1, { size: "lg", fw: 500, children: data.label })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, className: handleCenter })
+  ] });
+}), FileNode = /* @__PURE__ */ memo$1(function({
+  data,
+  parentId,
+  id: id2
+}) {
+  const isTopLevel = e$3(parentId);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, className: handleCenter }),
+    /* @__PURE__ */ jsx(
+      Paper,
+      {
+        p: "sm",
+        pt: "xs",
+        radius: "md",
+        withBorder: !0,
+        shadow: isTopLevel ? "lg" : "xs",
+        className: clsx(
+          fileNode,
+          isTopLevel ? toplevelNode : nestedNode,
+          data.dimmed && dimmed
+        ),
+        children: /* @__PURE__ */ jsxs(Group, { gap: 8, children: [
+          /* @__PURE__ */ jsx(ThemeIcon, { size: 24, variant: "transparent", color: "dark.3", children: /* @__PURE__ */ jsx(IconFileFilled, { size: "100%" }) }),
+          /* @__PURE__ */ jsx(Text$1, { size: "lg", fw: 500, children: data.label })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, className: handleCenter })
+  ] });
+}), ViewNode = /* @__PURE__ */ memo$1(function({
+  data,
+  height = 320
+}) {
+  const imageUrl = usePreviewUrl(data.viewId);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, className: handleCenter }),
+    /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: clsx(
+          viewNode,
+          data.dimmed && dimmed
+        ),
+        withBorder: !0,
+        shadow: "xs",
+        padding: 0,
+        children: [
+          /* @__PURE__ */ jsx(CardSection, { className: viewNodeImageSection, children: imageUrl ? /* @__PURE__ */ jsx(
+            Image,
+            {
+              src: imageUrl,
+              fit: "contain",
+              h: height - 60
+            }
+          ) : /* @__PURE__ */ jsx(Center, { h: height - 60, children: /* @__PURE__ */ jsxs(Group, { children: [
+            /* @__PURE__ */ jsx(ThemeIcon, { size: 60, variant: "transparent", color: "dark", children: /* @__PURE__ */ jsx(IconLoader, { stroke: 1.5, size: "100%" }) }),
+            /* @__PURE__ */ jsx(Text$1, { size: "xl", fw: 500, c: "dimmed", children: "Preview not available" })
+          ] }) }) }),
+          /* @__PURE__ */ jsx(Box, { className: viewTitle, h: 60, p: "sm", pl: "md", children: /* @__PURE__ */ jsx(Text$1, { component: "div", size: "lg", fw: 500, children: data.label }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, className: handleCenter })
+  ] });
+}), nodeTypes = {
+  folder: FolderNode,
+  file: FileNode,
+  view: ViewNode
+}, edgeTypes = {
+  link: LinkEdge
+}, overviewGraphToXYFlowData = (graph) => ({
+  nodes: graph.nodes.map(({ id: id2, parentId, position, width, height, ...node }) => {
+    const parent = parentId ? graph.nodes.find((n2) => n2.id === parentId) : null, rect = {
+      ...position,
+      width,
+      height
+    };
+    parent && (position = {
+      x: position.x - parent.position.x,
+      y: position.y - parent.position.y
+    });
+    const xyparent = parent ? { parentId: parent.id } : {};
+    switch (node.type) {
+      case "file":
+      case "folder":
+        return {
+          id: id2,
+          type: node.type,
+          data: {
+            dimmed: !1,
+            label: node.label,
+            path: node.path,
+            rect
+          },
+          deletable: !1,
+          position,
+          width,
+          height,
+          zIndex: 1,
+          ...xyparent
+        };
+      case "view":
+        return {
+          id: id2,
+          type: "view",
+          data: {
+            dimmed: !1,
+            label: node.label,
+            viewId: node.viewId,
+            rect
+          },
+          selectable: !1,
+          deletable: !1,
+          position,
+          width,
+          height,
+          zIndex: 3,
+          ...xyparent
+        };
+      default:
+        nonexhaustive(node);
+    }
+  }),
+  edges: graph.edges.map((edge) => ({
+    id: edge.id,
+    source: edge.source,
+    target: edge.target,
+    type: "link",
+    zIndex: 2,
+    hidden: !0,
+    data: {
+      points: edge.points
+    }
+  }))
 });
+function OverviewDiagrams({
+  graph,
+  fitViewPadding = 0.1,
+  zoomable = !0,
+  pannable = !0
+}) {
+  const router = useRouter(), xyflowRef = useRef$1(), { colorScheme } = useMantineColorScheme(), xyflowdata = useMemo$1(() => overviewGraphToXYFlowData(graph), [graph]), [nodes, setNodes, onNodesChange] = useNodesState(xyflowdata.nodes), [edges, setEdges, onEdgeChanges] = useEdgesState(xyflowdata.edges);
+  useUpdateEffect(() => {
+    setNodes(
+      (nodes2) => xyflowdata.nodes.map((n2) => {
+        const current = nodes2.find((node) => node.id === n2.id);
+        return current ? { ...a$2(current, ["selected", "hidden"]), ...n2 } : n2;
+      })
+    ), setEdges(xyflowdata.edges);
+  }, [xyflowdata.nodes, xyflowdata.edges]);
+  const focusedNode = nodes.find((node) => node.selected);
+  return useUpdateEffect(() => {
+    const xyflow = xyflowRef.current;
+    xyflow && (focusedNode ? xyflow.fitView({
+      maxZoom: 1,
+      padding: fitViewPadding,
+      nodes: [focusedNode],
+      duration: 450
+    }) : xyflow.fitView({
+      maxZoom: 1,
+      padding: fitViewPadding,
+      duration: 800
+    }));
+  }, [focusedNode?.id ?? null]), /* @__PURE__ */ jsx(
+    index,
+    {
+      colorMode: colorScheme === "auto" ? "system" : colorScheme,
+      className: root,
+      nodeTypes,
+      edgeTypes,
+      nodes,
+      onNodesChange,
+      edges,
+      onEdgesChange: onEdgeChanges,
+      fitView: !0,
+      fitViewOptions: useMemo$1(() => ({
+        minZoom: 0.05,
+        maxZoom: 1,
+        padding: fitViewPadding,
+        includeHiddenNodes: !0
+      }), [fitViewPadding]),
+      nodesDraggable: !1,
+      nodesConnectable: !1,
+      nodesFocusable: !0,
+      edgesReconnectable: !1,
+      edgesFocusable: !1,
+      multiSelectionKeyCode: null,
+      zoomOnPinch: zoomable,
+      zoomOnScroll: !pannable && zoomable,
+      zoomOnDoubleClick: !1,
+      ...!zoomable && {
+        zoomActivationKeyCode: null
+      },
+      maxZoom: zoomable ? 2 : 1,
+      minZoom: zoomable ? 0.01 : 1,
+      preventScrolling: zoomable || pannable,
+      noDragClassName: "nodrag",
+      noPanClassName: "nopan",
+      panOnScroll: pannable,
+      panOnDrag: pannable,
+      ...!pannable && {
+        selectionKeyCode: null
+      },
+      onInit: (instance) => xyflowRef.current = instance,
+      onNodeClick: (event, node) => {
+        if (node.type === "view") {
+          event.stopPropagation(), setNodes((nodes2) => nodes2.map(({ data, ...n2 }) => ({ ...n2, data: { ...data, dimmed: n2.id !== node.id } }))), xyflowRef.current?.fitView({
+            maxZoom: 10,
+            padding: 0,
+            nodes: [node],
+            duration: 1200
+          }), setTimeout(() => {
+            xyflowRef.current?.updateNodeData(node.id, { dimmed: !0 });
+          }, 400), setTimeout(() => {
+            router.navigate({
+              to: "/view/$viewId/",
+              params: {
+                viewId: node.data.viewId
+              },
+              search: !0
+            });
+          }, 800);
+          return;
+        }
+        node.selected && (event.stopPropagation(), setNodes((nodes2) => nodes2.map((n2) => n2.id === node.id ? { ...n2, selected: !1 } : n2)));
+      },
+      children: /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, size: 4, gap: 50 })
+    }
+  );
+}
+function OverviewPage() {
+  const graph = useOverviewGraph();
+  return /* @__PURE__ */ jsx(Box, { pos: "fixed", inset: 0, children: /* @__PURE__ */ jsx(OverviewDiagrams, { graph }) });
+}
+var previewBg = "_15b5f732";
 function IndexPage() {
   const views = t$3(useLikeC4Views());
   return /* @__PURE__ */ jsx(
@@ -10249,7 +10841,7 @@ function IndexPage() {
     }
   );
 }
-const ViewCard = memo$1(({ viewId }) => {
+function ViewCard({ viewId }) {
   const diagram = useLikeC4View(viewId);
   if (!diagram)
     return null;
@@ -10272,7 +10864,7 @@ const ViewCard = memo$1(({ viewId }) => {
       ]
     }
   );
-}, (prev, next) => prev.viewId === next.viewId);
+}
 function DiagramPreview(props2) {
   const [diagram, setDiagram] = useState$1(null);
   return useDebouncedEffect(
@@ -10295,6 +10887,9 @@ function DiagramPreview(props2) {
     }
   ) });
 }
+const Route$9 = createFileRoute("/")({
+  component: withOverviewGraph ? OverviewPage : IndexPage
+});
 var svgContainer = "_1dn84dq1", cssViewOutlet = "_1dn84dq3", cssExportView = "_1dn84dq4", cssWebcomponentView = "_1dn84dq5", cssWebcomponentIframeContainer = "_1dn84dq6";
 const Route$8 = createFileRoute("/webcomponent/$")({
   component: WebcomponentPage
@@ -10461,7 +11056,7 @@ function buildDiagramTreeData(views) {
       label: view.title ?? view.id,
       type: "diagram",
       children: []
-    }), parent !== root2 && (parent.children.sort(compareTreeNodes), n$2(view.relativePath) && parent.type !== "file" && (parent.type = "file"));
+    }), parent !== root2 && (parent.children.sort(compareTreeNodes), n$1(view.relativePath) && parent.type !== "file" && (parent.type = "file"));
   }
   return root2.children.sort(compareTreeNodes);
 }
@@ -10473,7 +11068,7 @@ const isFile = (node) => isTreeNodeData(node) && node.type === "file", FolderIco
   const data = useDiagramsTreeData(), { viewId } = useParams({
     from: "/view/$viewId"
   }), diagram = useLikeC4View(viewId), initialExpandedState = {};
-  if (diagram && n$2(diagram.relativePath)) {
+  if (diagram && n$1(diagram.relativePath)) {
     const segments = diagram.relativePath.split("/");
     let path = "@fs";
     for (const segment of segments)
@@ -10755,7 +11350,7 @@ function Header({ diagram }) {
       right: "0.5rem",
       p: 4,
       radius: "sm",
-      shadow: "xl",
+      shadow: "lg",
       children: [
         /* @__PURE__ */ jsxs(Group, { gap: isTablet ? 6 : 4, wrap: "nowrap", children: [
           isReactDiagramRoute ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -10772,7 +11367,7 @@ function Header({ diagram }) {
               children: "Back to diagram"
             }
           ),
-          /* @__PURE__ */ jsx(Divider, { orientation: "vertical", mr: isTablet ? 4 : "xs" }),
+          /* @__PURE__ */ jsx(Divider, { orientation: "vertical", visibleFrom: "md" }),
           /* @__PURE__ */ jsx(ColorSchemeToggle, {}),
           /* @__PURE__ */ jsx(Space, {})
         ] }),
@@ -10791,7 +11386,7 @@ function Header({ diagram }) {
 function ExportButton() {
   const params = useParams({
     from: "/view/$viewId"
-  });
+  }), previewUrl = usePreviewUrl(params.viewId);
   return /* @__PURE__ */ jsxs(Menu, { shadow: "md", width: 200, trigger: "click-hover", openDelay: 200, children: [
     /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
       Button,
@@ -10807,7 +11402,16 @@ function ExportButton() {
     ) }),
     /* @__PURE__ */ jsxs(MenuDropdown, { children: [
       /* @__PURE__ */ jsx(MenuLabel, { children: "Current view" }),
-      /* @__PURE__ */ jsx(
+      previewUrl ? /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          component: "a",
+          href: previewUrl,
+          download: `${params.viewId}.png`,
+          target: "_blank",
+          children: "Export as .png"
+        }
+      ) : /* @__PURE__ */ jsx(
         MenuItem,
         {
           component: Link,
@@ -10866,10 +11470,10 @@ function Fallback({ error, resetErrorBoundary }) {
   ] }) });
 }
 function ViewLayout() {
-  return useDisclosure(!1), /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Box, { className: cssViewOutlet, children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback, children: /* @__PURE__ */ jsx(Outlet, {}) }) }),
     /* @__PURE__ */ jsx(ViewHeader, {}),
-    /* @__PURE__ */ jsx(SidebarDrawer, {})
+    !withOverviewGraph && /* @__PURE__ */ jsx(SidebarDrawer, {})
   ] });
 }
 function ViewHeader() {
@@ -10974,6 +11578,7 @@ function ExportPage() {
             enableDynamicViewWalkthrough: !1,
             showElementLinks: !1,
             showDiagramTitle: !1,
+            showNotations: !1,
             nodesSelectable: !1,
             nodesDraggable: !1,
             enableFocusMode: !1,
@@ -11023,6 +11628,7 @@ function EmbedPage() {
           enableDynamicViewWalkthrough: !1,
           showElementLinks: !1,
           showDiagramTitle: !1,
+          showNotations: !1,
           nodesSelectable: !1,
           nodesDraggable: !1,
           enableFocusMode: !1,
@@ -11066,7 +11672,12 @@ function ViewReact() {
       nodesSelectable: !1,
       renderIcon: RenderIcon,
       onNavigateTo,
-      onBurgerMenuClick: SidebarDrawerOps.open
+      onBurgerMenuClick: withOverviewGraph ? () => {
+        router.navigate({
+          to: "/",
+          search: !0
+        });
+      } : SidebarDrawerOps.open
     }
   );
 }
@@ -11366,7 +11977,7 @@ function handlePointerMove(event) {
     x: x2,
     y: y2
   } = getResizeEventCoordinates(event);
-  if (event.buttons === 0 && (isPointerDown = !1, updateResizeHandlerStates("up", event)), !isPointerDown) {
+  if (isPointerDown && event.buttons === 0 && (isPointerDown = !1, updateResizeHandlerStates("up", event)), !isPointerDown) {
     const {
       target
     } = event;
@@ -12253,7 +12864,7 @@ function PanelGroupWithForwardedRef({
       prevLayout,
       trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
     }), layoutChanged = !compareLayouts(prevLayout, nextLayout);
-    (isPointerEvent(event) || isMouseEvent(event)) && prevDeltaRef.current != delta && (prevDeltaRef.current = delta, layoutChanged ? reportConstraintsViolation(dragHandleId, 0) : isHorizontal ? reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_HORIZONTAL_MIN : EXCEEDED_HORIZONTAL_MAX) : reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_VERTICAL_MIN : EXCEEDED_VERTICAL_MAX)), layoutChanged && (setLayout(nextLayout), eagerValuesRef.current.layout = nextLayout, onLayout2 && onLayout2(nextLayout), callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current));
+    (isPointerEvent(event) || isMouseEvent(event)) && prevDeltaRef.current != delta && (prevDeltaRef.current = delta, !layoutChanged && delta !== 0 ? isHorizontal ? reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_HORIZONTAL_MIN : EXCEEDED_HORIZONTAL_MAX) : reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_VERTICAL_MIN : EXCEEDED_VERTICAL_MAX) : reportConstraintsViolation(dragHandleId, 0)), layoutChanged && (setLayout(nextLayout), eagerValuesRef.current.layout = nextLayout, onLayout2 && onLayout2(nextLayout), callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current));
   }, []), resizePanel2 = useCallback((panelData, unsafePanelSize) => {
     const {
       onLayout: onLayout2
@@ -12624,9 +13235,7 @@ function ViewEditor() {
       search: !0
     });
   });
-  if (useCallbackRef((event) => {
-    console.log("onChange", event);
-  }), !view)
+  if (!view)
     throw notFound();
   return /* @__PURE__ */ jsx(
     LikeC4Diagram,
@@ -12645,7 +13254,12 @@ function ViewEditor() {
       enableFocusMode: !1,
       onNavigateTo,
       renderIcon: RenderIcon,
-      onBurgerMenuClick: SidebarDrawerOps.open
+      onBurgerMenuClick: withOverviewGraph ? () => {
+        router.navigate({
+          to: "/",
+          search: !0
+        });
+      } : SidebarDrawerOps.open
     }
   );
 }