likec4 1.9.0 → 1.10.0

package/dist/__app__/src/chunks/{main-BZtdykGF.js → main-KEhBGhZ8.js}

@@ -3,7 +3,7 @@ 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, Suspense, lazy, 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 "./tanstack-router-Bc_WYOzY.js";
-import { e as Container, f as Title, a as Text$1, G as Group, g as Button, h as createTheme, M as MantineProvider, i as MantineContext, j as useHotkeys, c as clsx, B as Box, A as ActionIcon$2, H as HoverCard, k as HoverCardTarget, U as UnstyledButton, l as HoverCardDropdown, S as Stack, m as Anchor, n as CopyButton$1, o as useLocalStorage, C as Card, b as CardSection, p as Spoiler, q as ButtonGroup, r as Tooltip$2, T as ThemeIcon, P as Paper, s as Tabs, t as TabsList, v as TabsTab, w as TabsPanel, x as ScrollAreaAutosize, y as Badge, z as rem, D as Divider, E as Space, F as TooltipGroup, J as Flex, K as ColorSwatch, L as CheckIcon, N as Select, O as Slider, Q as SegmentedControl, R as Popover, V as PopoverTarget, W as PopoverDropdown, X as FloatingIndicator, Y as Notification, Z as Code, _ as SimpleGrid, u as useMantineColorScheme, $ 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 "./mantine-Bhi3pgTf.js";
+import { e as Container, f as Title, a as Text$1, G as Group, g as Button, h as createTheme, M as MantineProvider, i as MantineContext, j as useHotkeys, c as clsx, B as Box, k as Popover, l as PopoverTarget, m as PopoverDropdown, S as Stack, n as ScrollAreaAutosize, o as CloseButton, A as ActionIcon$2, H as HoverCard, p as HoverCardTarget, U as UnstyledButton, q as HoverCardDropdown, r as Anchor, s as CopyButton$1, t as useLocalStorage, C as Card, b as CardSection, v as Spoiler, w as Badge, x as ButtonGroup, y as Tooltip$2, T as ThemeIcon, P as Paper, z as Tabs, D as TabsList, E as TabsTab, F as TabsPanel, J as rem, K as Divider, L as Space, N as TooltipGroup, O as Flex, Q as ColorSwatch, R as CheckIcon, V as Select, W as Slider, X as SegmentedControl, Y as FloatingIndicator, Z as Notification, _ as Code, $ as SimpleGrid, u as useMantineColorScheme, a0 as useTree, a1 as useComputedColorScheme, a2 as Tree, a3 as Drawer, a4 as ScrollArea, a5 as Alert, a6 as ModalRoot, a7 as ModalOverlay, a8 as ModalContent, a9 as ModalBody, aa as useMantineTheme, ab as useMediaQuery, ac as useDisclosure, ad as Menu, ae as MenuTarget, af as MenuDropdown, ag as MenuLabel, ah as MenuItem, ai as LoadingOverlay, aj as useCallbackRef, ak as Burger, al as Loader } from "./mantine-BnwtT_Nz.js";
 import { withOverviewGraph, ComponentName, isDevelopment, basepath, useHashHistory } from "../const.js";
 import { d as useReactFlow, e as useStoreApi, f as useNodesData, g as useStore, h as createWithEqualityFn, j as applyNodeChanges, k as applyEdgeChanges, l as getViewportForBounds, m as getNodeDimensions, n as getBoundsOfRects, s as shallow$1, o as boxToRect, p as useStoreWithEqualityFn, E as EdgeLabelRenderer, H as Handle, P as Position, q as useOnViewportChange, i as index, r as useOnSelectionChange, b as Background, c as BackgroundVariant, C as Controls, R as ReactFlowProvider } from "./likec4-BqIZe8Y0.js";
 import { useLikeC4Views, useLikeC4View } from "virtual:likec4/store";
@@ -29,6 +29,7 @@ function NotFound() {
   ] }) });
 }
 const theme = createTheme({
+  autoContrast: !0,
   primaryColor: "indigo",
   cursorType: "pointer",
   fontFamily: "var(--likec4-app-font)",
@@ -3809,16 +3810,19 @@ function t$3(...n2) {
   return u$5(Object.keys, n2);
 }
 function a$1(...e2) {
-  return u$5(n$2, e2);
+  return u$5(n$3, e2);
 }
-var n$2 = (e2) => e2.at(-1);
+var n$3 = (e2) => e2.at(-1);
 function m(...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) {
+function n$2(e2) {
   return !!e2;
 }
+function n$1(l2) {
+  return l2 !== null;
+}
 function l(n2) {
   return n2 != null;
 }
@@ -3912,16 +3916,16 @@ function whereOperatorAsPredicate(operator) {
       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));
+  return parseFloat(id2.slice(5));
+}
+function getParallelStepsPrefix(id2) {
+  return isStepEdgeId(id2) && id2.includes(".") ? id2.slice(0, id2.indexOf(".") + 1) : null;
 }
 function getBBoxCenter({
   x: x2,
@@ -4050,7 +4054,6 @@ function useUpdateEffect(callback, deps, equalityFn, effectHook) {
 const useXYFlow = useReactFlow, useXYNodesData = useNodesData;
 function useXYStore(selector2, equalityFn) {
   return useStore(
-    // @ts-expect-error - types are not correct
     selector2,
     shallowEqual
   );
@@ -5199,7 +5202,8 @@ function isSamePoint$1(a2, b2) {
   return isClose(ax, bx) && isClose(ay, by);
 }
 function diagramViewToXYFlowData(view, opts) {
-  const isDynamicView = view.__ === "dynamic", xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map(), traverse = view.nodes.reduce(
+  view.__;
+  const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map(), traverse = view.nodes.reduce(
     (acc, node) => (nodeLookup.set(node.id, node), node.parent || acc.push({ node, parent: null }), acc),
     new Array()
   );
@@ -5264,7 +5268,6 @@ function diagramViewToXYFlowData(view, opts) {
       data: {
         edge,
         controlPoints: edge.controlPoints || null,
-        stepNum: isDynamicView ? extractStep(edge.id) : null,
         label: edge.labelBBox ? {
           bbox: edge.labelBBox,
           text: edge.label ?? ""
@@ -5286,7 +5289,7 @@ const StringSet = Set, DEFAULT_PROPS = {
   initialized: !1,
   navigationHistoryIndex: 0,
   viewportChanged: !1,
-  activeDynamicViewStep: null,
+  activeWalkthrough: null,
   focusedNodeId: null,
   hoveredNodeId: null,
   hoveredEdgeId: null,
@@ -5345,7 +5348,7 @@ function createDiagramStore(props2) {
               focusedNodeId,
               lastClickedNodeId,
               lastClickedEdgeId,
-              activeDynamicViewStep,
+              activeWalkthrough,
               nodesDraggable,
               nodesSelectable,
               hoveredEdgeId,
@@ -5357,7 +5360,7 @@ function createDiagramStore(props2) {
             const isSameView = current.id === nextView.id;
             if (isSameView) {
               const nodeIds = new StringSet(nextView.nodes.map((n2) => n2.id)), edgeIds = new StringSet(nextView.edges.map((e2) => e2.id));
-              if (lastClickedNodeId && !nodeIds.has(lastClickedNodeId) && (lastClickedNodeId = null), hoveredNodeId && !nodeIds.has(hoveredNodeId) && (hoveredNodeId = null), focusedNodeId && !nodeIds.has(focusedNodeId) && (focusedNodeId = null), lastClickedEdgeId && !edgeIds.has(lastClickedEdgeId) && (lastClickedEdgeId = null), hoveredEdgeId && !edgeIds.has(hoveredEdgeId) && (hoveredEdgeId = null), activeDynamicViewStep && !edgeIds.has(StepEdgeId(activeDynamicViewStep)) && (activeDynamicViewStep = null), dimmed2.size > 0) {
+              if (lastClickedNodeId && !nodeIds.has(lastClickedNodeId) && (lastClickedNodeId = null), hoveredNodeId && !nodeIds.has(hoveredNodeId) && (hoveredNodeId = null), focusedNodeId && !nodeIds.has(focusedNodeId) && (focusedNodeId = null, dimmed2 = EmptyStringSet), lastClickedEdgeId && !edgeIds.has(lastClickedEdgeId) && (lastClickedEdgeId = null), hoveredEdgeId && !edgeIds.has(hoveredEdgeId) && (hoveredEdgeId = null), activeWalkthrough && !edgeIds.has(activeWalkthrough.stepId) && (activeWalkthrough = null, dimmed2 = EmptyStringSet), dimmed2.size > 0) {
                 let nextDimmed = new StringSet([...dimmed2].filter((id2) => nodeIds.has(id2) || edgeIds.has(id2)));
                 nextDimmed.size !== dimmed2.size && (dimmed2 = nextDimmed);
               }
@@ -5396,7 +5399,7 @@ function createDiagramStore(props2) {
                 };
                 xystore.getState().panBy(diff), lastOnNavigate = null;
               }
-              lastClickedEdgeId = null, lastClickedNodeId = null, hoveredEdgeId = null, hoveredNodeId = null, focusedNodeId = null, activeDynamicViewStep = null, dimmed2 = EmptyStringSet;
+              lastClickedEdgeId = null, lastClickedNodeId = null, hoveredEdgeId = null, hoveredNodeId = null, focusedNodeId = null, activeWalkthrough = null, dimmed2 = EmptyStringSet;
             }
             const update = diagramViewToXYFlowData(nextView, {
               where: whereFilter,
@@ -5424,7 +5427,7 @@ function createDiagramStore(props2) {
                 isDynamicView: nextView.__ === "dynamic",
                 viewSyncDebounceTimeout,
                 view: nextView,
-                activeDynamicViewStep,
+                activeWalkthrough,
                 lastOnNavigate,
                 lastClickedNodeId,
                 lastClickedEdgeId,
@@ -5451,7 +5454,7 @@ function createDiagramStore(props2) {
                 notDimmed.has(node.id) || dimmed2.add(node.id);
               set(
                 {
-                  activeDynamicViewStep: null,
+                  activeWalkthrough: null,
                   focusedNodeId: nodeId,
                   dimmed: dimmed2
                 },
@@ -5474,14 +5477,14 @@ function createDiagramStore(props2) {
           },
           resetLastClicked: () => {
             let {
-              activeDynamicViewStep,
+              activeWalkthrough,
               focusedNodeId,
               lastClickedNodeId,
               lastClickedEdgeId
             } = get();
-            (activeDynamicViewStep || focusedNodeId || lastClickedNodeId || lastClickedEdgeId) && set(
+            (activeWalkthrough || focusedNodeId || lastClickedNodeId || lastClickedEdgeId) && set(
               {
-                activeDynamicViewStep: null,
+                activeWalkthrough: null,
                 focusedNodeId: null,
                 lastClickedNodeId: null,
                 lastClickedEdgeId: null,
@@ -5648,8 +5651,7 @@ function createDiagramStore(props2) {
             ), onNavigateTo(
               element.navigateTo,
               event,
-              element,
-              xynode
+              element
             );
           },
           goBack: () => {
@@ -5687,10 +5689,10 @@ function createDiagramStore(props2) {
             ), onNavigateTo(stepForward.viewId));
           },
           fitDiagram: (duration = 500) => {
-            const { fitViewPadding, view, focusedNodeId, activeDynamicViewStep, xystore } = get(), { width, height, panZoom, transform } = xystore.getState(), bounds = view.bounds, maxZoom = Math.max(1, transform[2]), viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, fitViewPadding);
-            panZoom?.setViewport(viewport, { duration }), (focusedNodeId ?? activeDynamicViewStep) !== null && set(
+            const { fitViewPadding, view, focusedNodeId, activeWalkthrough, xystore } = get(), { width, height, panZoom, transform } = xystore.getState(), bounds = view.bounds, maxZoom = Math.max(1, transform[2]), viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, fitViewPadding);
+            panZoom?.setViewport(viewport, { duration }), (focusedNodeId ?? activeWalkthrough) !== null && set(
               {
-                activeDynamicViewStep: null,
+                activeWalkthrough: null,
                 focusedNodeId: null,
                 dimmed: EmptyStringSet
               },
@@ -5699,23 +5701,85 @@ function createDiagramStore(props2) {
             );
           },
           nextDynamicStep: (increment = 1) => {
-            const { activeDynamicViewStep, activateDynamicStep } = get(), nextStep = (activeDynamicViewStep ?? 0) + increment;
-            nextStep <= 0 || nextStep !== activeDynamicViewStep && activateDynamicStep(nextStep);
+            const { activeWalkthrough, xyedges: xyedges2, activateWalkthrough } = get(), stepId = activeWalkthrough?.stepId;
+            let nextStep;
+            if (stepId) {
+              const nextIndex = xyedges2.findIndex(({ id: id2 }) => id2 === stepId) + increment;
+              nextStep = xyedges2[nextIndex];
+            } else
+              nextStep = d(xyedges2);
+            if (nextStep) {
+              activateWalkthrough(nextStep.data.edge.id);
+              return;
+            }
           },
-          activateDynamicStep: (nextStep) => {
-            const { isDynamicView, xyflow, xystore, fitViewPadding } = get();
+          // activateDynamicStep: (nextStep: number) => {
+          //   const { isDynamicView, xyflow, xystore, fitViewPadding } = get()
+          //   invariant(isDynamicView, 'view is not dynamic')
+          //   const edgeId = StepEdgeId(nextStep)
+          //   const dimmed = new StringSet()
+          //   let edge: XYFlowEdge | null = null
+          //   for (const e of xyflow.getEdges()) {
+          //     if (e.id === edgeId) {
+          //       edge = e
+          //       continue
+          //     }
+          //     dimmed.add(e.id)
+          //   }
+          //   invariant(!!edge, `edge not found: ${edgeId}`)
+          //   const selected = [] as XYFlowNode[]
+          //   for (const n of xyflow.getNodes()) {
+          //     if (n.id === edge.source || n.id === edge.target) {
+          //       selected.push(n)
+          //       continue
+          //     }
+          //     dimmed.add(n.id)
+          //   }
+          //   const { fitView, transform } = xystore.getState()
+          //   fitView({
+          //     duration: 400,
+          //     includeHiddenNodes: true,
+          //     maxZoom: Math.max(1, transform[2]),
+          //     minZoom: MinZoom,
+          //     padding: Math.max(fitViewPadding, 0.2),
+          //     nodes: selected
+          //   })
+          //   set(
+          //     {
+          //       focusedNodeId: null,
+          //       activeDynamicViewStep: nextStep,
+          //       dimmed
+          //     },
+          //     noReplace,
+          //     'activateDynamicStep'
+          //   )
+          // },
+          activateWalkthrough: (step) => {
+            const stepId = typeof step == "string" ? step : step.data.edge.id;
+            invariant(isStepEdgeId(stepId), `stepId ${stepId} is not a step edge id`);
+            let {
+              isDynamicView,
+              xyflow,
+              xyedges: xyedges2,
+              xystore,
+              fitViewPadding,
+              activeWalkthrough
+            } = get();
             invariant(isDynamicView, "view is not dynamic");
-            const edgeId = StepEdgeId(nextStep), dimmed2 = new StringSet();
-            let edge = null;
-            for (const e2 of xyflow.getEdges()) {
-              if (e2.id === edgeId) {
-                edge = e2;
-                continue;
-              }
-              dimmed2.add(e2.id);
-            }
-            invariant(!!edge, `edge not found: ${edgeId}`);
-            const selected = [];
+            const edge = typeof step == "string" ? xyedges2.find(({ id: id2 }) => id2 === stepId) : step;
+            invariant(edge, `edge not found: ${stepId}`);
+            const currentIndex = xyedges2.findIndex(({ id: id2 }) => id2 === stepId);
+            activeWalkthrough = {
+              stepId,
+              hasPrevious: currentIndex > 0,
+              hasNext: currentIndex < xyedges2.length - 1,
+              parallelPrefix: getParallelStepsPrefix(stepId)
+            };
+            const dimmed2 = new StringSet(
+              xyedges2.filter(
+                ({ id: id2 }) => id2 !== stepId && !(activeWalkthrough.parallelPrefix && id2.startsWith(activeWalkthrough.parallelPrefix))
+              ).map(({ id: id2 }) => id2)
+            ), selected = [];
             for (const n2 of xyflow.getNodes()) {
               if (n2.id === edge.source || n2.id === edge.target) {
                 selected.push(n2);
@@ -5734,22 +5798,22 @@ function createDiagramStore(props2) {
             }), set(
               {
                 focusedNodeId: null,
-                activeDynamicViewStep: nextStep,
+                activeWalkthrough,
                 dimmed: dimmed2
               },
               noReplace,
-              "activateDynamicStep"
+              "activateWalkthrough"
             );
           },
-          stopDynamicView: () => {
-            get().activeDynamicViewStep !== null && (set(
+          stopWalkthrough: () => {
+            get().activeWalkthrough !== null && (set(
               {
-                activeDynamicViewStep: null,
+                activeWalkthrough: null,
                 focusedNodeId: null,
                 dimmed: EmptyStringSet
               },
               noReplace,
-              "stopDynamicView"
+              "stopWalkthrough"
             ), get().fitDiagram());
           },
           onInit: (instance) => {
@@ -5887,28 +5951,33 @@ function FitViewOnViewportResize({ diagramApi }) {
       focusedNodeId || prevDimensionsRef.current === dimensions || (prevDimensionsRef.current = dimensions, fitDiagram(250));
     },
     [dimensions, diagramApi],
-    250,
-    1e3
+    250
   ), null;
 }
-function selector$4({ view, viewportChanged, fitViewPadding }) {
+function selector$3({ view, activeWalkthrough, viewportChanged, fitViewPadding }) {
   return {
     layoutId: view.id + "_" + view.autoLayout + "_" + fitViewPadding,
+    isActiveWalkthrough: !!activeWalkthrough,
     viewportNotMoved: !viewportChanged
   };
 }
 function FitViewOnDiagramChange() {
   const {
     layoutId,
+    isActiveWalkthrough,
     viewportNotMoved
-  } = useDiagramState(selector$4, shallowEqual), diagramApi = useDiagramStoreApi(), [currentLayoutId, setCurrent] = useState$1(layoutId), requiresFit = layoutId !== currentLayoutId;
+  } = useDiagramState(selector$3, shallowEqual), diagramApi = useDiagramStoreApi(), [currentLayoutId, setCurrent] = useState$1(layoutId), requiresFit = layoutId !== currentLayoutId;
   return useDebouncedEffect(
     () => {
       layoutId !== currentLayoutId && (setCurrent(layoutId), diagramApi.getState().fitDiagram(450));
     },
     [requiresFit, diagramApi],
     50
-  ), viewportNotMoved && !requiresFit ? /* @__PURE__ */ jsx(FitViewOnViewportResize, { diagramApi }) : null;
+  ), viewportNotMoved && !isActiveWalkthrough && !requiresFit ? /* @__PURE__ */ jsx(FitViewOnViewportResize, { diagramApi }) : null;
+}
+function useMantinePortalProps() {
+  const target = useDiagramState((s2) => s2.getContainer());
+  return useMemo$1(() => target ? { portalProps: { target } } : { withinPortal: !1 }, [target]);
 }
 function SelectEdgesOnNodeFocus() {
   const diagramStore = useDiagramStoreApi(), focusedNodeId = useDiagramState((s2) => s2.focusedNodeId);
@@ -5977,241 +6046,497 @@ function SelectEdgesOnNodeFocus() {
     ] : []
   ), null;
 }
-function getVarName(variable) {
-  var matches = variable.match(/^var\((.*)\)$/);
-  return matches ? matches[1] : variable;
-}
-function assignInlineVars(varsOrContract, tokens) {
-  var styles = {};
-  {
-    var _vars = varsOrContract;
-    for (var varName in _vars) {
-      var value = _vars[varName];
-      value != null && (styles[getVarName(varName)] = value);
-    }
-  }
-  return Object.defineProperty(styles, "toString", {
-    value: function() {
-      return Object.keys(this).map((key) => "".concat(key, ":").concat(this[key])).join(";");
-    },
-    writable: !1
-  }), styles;
-}
-function constant(x2) {
-  return function() {
-    return x2;
-  };
-}
-const epsilon$1 = 1e-12, pi = Math.PI, tau = 2 * pi, epsilon = 1e-6, tauEpsilon = tau - epsilon;
-function append(strings) {
-  this._ += strings[0];
-  for (let i2 = 1, n2 = strings.length; i2 < n2; ++i2)
-    this._ += arguments[i2] + strings[i2];
-}
-function appendRound(digits) {
-  let d2 = Math.floor(digits);
-  if (!(d2 >= 0)) throw new Error(`invalid digits: ${digits}`);
-  if (d2 > 15) return append;
-  const k = 10 ** d2;
-  return function(strings) {
-    this._ += strings[0];
-    for (let i2 = 1, n2 = strings.length; i2 < n2; ++i2)
-      this._ += Math.round(arguments[i2] * k) / k + strings[i2];
-  };
-}
-class Path {
-  constructor(digits) {
-    this._x0 = this._y0 = // start of current subpath
-    this._x1 = this._y1 = null, this._ = "", this._append = digits == null ? append : appendRound(digits);
-  }
-  moveTo(x2, y2) {
-    this._append`M${this._x0 = this._x1 = +x2},${this._y0 = this._y1 = +y2}`;
-  }
-  closePath() {
-    this._x1 !== null && (this._x1 = this._x0, this._y1 = this._y0, this._append`Z`);
-  }
-  lineTo(x2, y2) {
-    this._append`L${this._x1 = +x2},${this._y1 = +y2}`;
-  }
-  quadraticCurveTo(x1, y1, x2, y2) {
-    this._append`Q${+x1},${+y1},${this._x1 = +x2},${this._y1 = +y2}`;
-  }
-  bezierCurveTo(x1, y1, x2, y2, x3, y3) {
-    this._append`C${+x1},${+y1},${+x2},${+y2},${this._x1 = +x3},${this._y1 = +y3}`;
-  }
-  arcTo(x1, y1, x2, y2, r2) {
-    if (x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r2 = +r2, r2 < 0) throw new Error(`negative radius: ${r2}`);
-    let x0 = this._x1, y0 = this._y1, x21 = x2 - x1, y21 = y2 - y1, x01 = x0 - x1, y01 = y0 - y1, l01_2 = x01 * x01 + y01 * y01;
-    if (this._x1 === null)
-      this._append`M${this._x1 = x1},${this._y1 = y1}`;
-    else if (l01_2 > epsilon) if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon) || !r2)
-      this._append`L${this._x1 = x1},${this._y1 = y1}`;
-    else {
-      let x20 = x2 - x0, y20 = y2 - y0, l21_2 = x21 * x21 + y21 * y21, l20_2 = x20 * x20 + y20 * y20, l21 = Math.sqrt(l21_2), l01 = Math.sqrt(l01_2), l2 = r2 * Math.tan((pi - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2), t01 = l2 / l01, t21 = l2 / l21;
-      Math.abs(t01 - 1) > epsilon && this._append`L${x1 + t01 * x01},${y1 + t01 * y01}`, this._append`A${r2},${r2},0,0,${+(y01 * x20 > x01 * y20)},${this._x1 = x1 + t21 * x21},${this._y1 = y1 + t21 * y21}`;
-    }
-  }
-  arc(x2, y2, r2, a0, a1, ccw) {
-    if (x2 = +x2, y2 = +y2, r2 = +r2, ccw = !!ccw, r2 < 0) throw new Error(`negative radius: ${r2}`);
-    let dx = r2 * Math.cos(a0), dy = r2 * Math.sin(a0), x0 = x2 + dx, y0 = y2 + dy, cw = 1 ^ ccw, da = ccw ? a0 - a1 : a1 - a0;
-    this._x1 === null ? this._append`M${x0},${y0}` : (Math.abs(this._x1 - x0) > epsilon || Math.abs(this._y1 - y0) > epsilon) && this._append`L${x0},${y0}`, r2 && (da < 0 && (da = da % tau + tau), da > tauEpsilon ? this._append`A${r2},${r2},0,1,${cw},${x2 - dx},${y2 - dy}A${r2},${r2},0,1,${cw},${this._x1 = x0},${this._y1 = y0}` : da > epsilon && this._append`A${r2},${r2},0,${+(da >= pi)},${cw},${this._x1 = x2 + r2 * Math.cos(a1)},${this._y1 = y2 + r2 * Math.sin(a1)}`);
-  }
-  rect(x2, y2, w, h) {
-    this._append`M${this._x0 = this._x1 = +x2},${this._y0 = this._y1 = +y2}h${w = +w}v${+h}h${-w}Z`;
-  }
-  toString() {
-    return this._;
-  }
-}
-function withPath(shape) {
-  let digits = 3;
-  return shape.digits = function(_) {
-    if (!arguments.length) return digits;
-    if (_ == null)
-      digits = null;
-    else {
-      const d2 = Math.floor(_);
-      if (!(d2 >= 0)) throw new RangeError(`invalid digits: ${_}`);
-      digits = d2;
-    }
-    return shape;
-  }, () => new Path(digits);
-}
-function array(x2) {
-  return typeof x2 == "object" && "length" in x2 ? x2 : Array.from(x2);
-}
-function Linear(context) {
-  this._context = context;
-}
-Linear.prototype = {
-  areaStart: function() {
-    this._line = 0;
-  },
-  areaEnd: function() {
-    this._line = NaN;
-  },
-  lineStart: function() {
-    this._point = 0;
-  },
-  lineEnd: function() {
-    (this._line || this._line !== 0 && this._point === 1) && this._context.closePath(), this._line = 1 - this._line;
+/**
+ * @license @tabler/icons-react v3.14.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var defaultAttributes = {
+  outline: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   },
-  point: function(x2, y2) {
-    switch (x2 = +x2, y2 = +y2, this._point) {
-      case 0:
-        this._point = 1, this._line ? this._context.lineTo(x2, y2) : this._context.moveTo(x2, y2);
-        break;
-      case 1:
-        this._point = 2;
-      default:
-        this._context.lineTo(x2, y2);
-        break;
-    }
+  filled: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    stroke: "none"
   }
 };
-function curveLinear(context) {
-  return new Linear(context);
-}
-function x(p2) {
-  return p2[0];
-}
-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);
-  x$1 = typeof x$1 == "function" ? x$1 : x$1 === void 0 ? x : constant(x$1), y$12 = typeof y$12 == "function" ? y$12 : y$12 === void 0 ? y : constant(y$12);
-  function line(data) {
-    var i2, n2 = (data = array(data)).length, d2, defined0 = !1, buffer;
-    for (context == null && (output = curve2(buffer = path())), i2 = 0; i2 <= n2; ++i2)
-      !(i2 < n2 && defined(d2 = data[i2], i2, data)) === defined0 && ((defined0 = !defined0) ? output.lineStart() : output.lineEnd()), defined0 && output.point(+x$1(d2, i2, data), +y$12(d2, i2, data));
-    if (buffer) return output = null, buffer + "" || null;
-  }
-  return line.x = function(_) {
-    return arguments.length ? (x$1 = typeof _ == "function" ? _ : constant(+_), line) : x$1;
-  }, line.y = function(_) {
-    return arguments.length ? (y$12 = typeof _ == "function" ? _ : constant(+_), line) : y$12;
-  }, line.defined = function(_) {
-    return arguments.length ? (defined = typeof _ == "function" ? _ : constant(!!_), line) : defined;
-  }, line.curve = function(_) {
-    return arguments.length ? (curve2 = _, context != null && (output = curve2(context)), line) : curve2;
-  }, line.context = function(_) {
-    return arguments.length ? (_ == null ? context = output = null : output = curve2(context = _), line) : context;
-  }, line;
-}
-function point$1(that, x2, y2) {
-  that._context.bezierCurveTo(
-    that._x1 + that._k * (that._x2 - that._x0),
-    that._y1 + that._k * (that._y2 - that._y0),
-    that._x2 + that._k * (that._x1 - x2),
-    that._y2 + that._k * (that._y1 - y2),
-    that._x2,
-    that._y2
+/**
+ * @license @tabler/icons-react v3.14.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
+  const Component2 = forwardRef$1(
+    ({ color: color2 = "currentColor", size = 24, stroke = 2, title: title2, className, children, ...rest }, ref) => createElement$1(
+      "svg",
+      {
+        ref,
+        ...defaultAttributes[type],
+        width: size,
+        height: size,
+        className: ["tabler-icon", `tabler-icon-${iconName}`, className].join(" "),
+        ...type === "filled" ? {
+          fill: color2
+        } : {
+          strokeWidth: stroke,
+          stroke: color2
+        },
+        ...rest
+      },
+      [
+        title2 && createElement$1("title", { key: "svg-title" }, title2),
+        ...iconNode.map(([tag, attrs]) => createElement$1(tag, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    )
   );
-}
-function Cardinal(context, tension) {
-  this._context = context, this._k = (1 - tension) / 6;
-}
-Cardinal.prototype = {
-  areaStart: function() {
-    this._line = 0;
-  },
-  areaEnd: function() {
-    this._line = NaN;
-  },
-  lineStart: function() {
-    this._x0 = this._x1 = this._x2 = this._y0 = this._y1 = this._y2 = NaN, this._point = 0;
-  },
-  lineEnd: function() {
-    switch (this._point) {
-      case 2:
-        this._context.lineTo(this._x2, this._y2);
-        break;
-      case 3:
-        point$1(this, this._x1, this._y1);
-        break;
-    }
-    (this._line || this._line !== 0 && this._point === 1) && this._context.closePath(), this._line = 1 - this._line;
-  },
-  point: function(x2, y2) {
-    switch (x2 = +x2, y2 = +y2, this._point) {
-      case 0:
-        this._point = 1, this._line ? this._context.lineTo(x2, y2) : this._context.moveTo(x2, y2);
-        break;
-      case 1:
-        this._point = 2, this._x1 = x2, this._y1 = y2;
-        break;
-      case 2:
-        this._point = 3;
-      default:
-        point$1(this, x2, y2);
-        break;
-    }
-    this._x0 = this._x1, this._x1 = this._x2, this._x2 = x2, this._y0 = this._y1, this._y1 = this._y2, this._y2 = y2;
-  }
+  return Component2.displayName = `${iconNamePascal}`, Component2;
 };
-(function custom(tension) {
-  function cardinal(context) {
-    return new Cardinal(context, tension);
+/**
+ * @license @tabler/icons-react v3.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var IconPlayerStopFilled = createReactComponent("filled", "player-stop-filled", "IconPlayerStopFilled", [["path", { d: "M17 4h-10a3 3 0 0 0 -3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3 -3v-10a3 3 0 0 0 -3 -3z", key: "svg-0" }]]);
+function getVarName(variable) {
+  var matches = variable.match(/^var\((.*)\)$/);
+  return matches ? matches[1] : variable;
+}
+function assignInlineVars(varsOrContract, tokens) {
+  var styles = {};
+  {
+    var _vars = varsOrContract;
+    for (var varName in _vars) {
+      var value = _vars[varName];
+      value != null && (styles[getVarName(varName)] = value);
+    }
   }
-  return cardinal.tension = function(tension2) {
-    return custom(+tension2);
-  }, cardinal;
-})(0);
-function CardinalOpen(context, tension) {
-  this._context = context, this._k = (1 - tension) / 6;
+  return Object.defineProperty(styles, "toString", {
+    value: function() {
+      return Object.keys(this).map((key) => "".concat(key, ":").concat(this[key])).join(";");
+    },
+    writable: !1
+  }), styles;
 }
-CardinalOpen.prototype = {
-  areaStart: function() {
-    this._line = 0;
-  },
-  areaEnd: function() {
-    this._line = NaN;
-  },
-  lineStart: function() {
-    this._x0 = this._x1 = this._x2 = this._y0 = this._y1 = this._y2 = NaN, this._point = 0;
-  },
-  lineEnd: function() {
+function constant(x2) {
+  return function() {
+    return x2;
+  };
+}
+const epsilon$1 = 1e-12, pi = Math.PI, tau = 2 * pi, epsilon = 1e-6, tauEpsilon = tau - epsilon;
+function append(strings) {
+  this._ += strings[0];
+  for (let i2 = 1, n2 = strings.length; i2 < n2; ++i2)
+    this._ += arguments[i2] + strings[i2];
+}
+function appendRound(digits) {
+  let d2 = Math.floor(digits);
+  if (!(d2 >= 0)) throw new Error(`invalid digits: ${digits}`);
+  if (d2 > 15) return append;
+  const k = 10 ** d2;
+  return function(strings) {
+    this._ += strings[0];
+    for (let i2 = 1, n2 = strings.length; i2 < n2; ++i2)
+      this._ += Math.round(arguments[i2] * k) / k + strings[i2];
+  };
+}
+class Path {
+  constructor(digits) {
+    this._x0 = this._y0 = // start of current subpath
+    this._x1 = this._y1 = null, this._ = "", this._append = digits == null ? append : appendRound(digits);
+  }
+  moveTo(x2, y2) {
+    this._append`M${this._x0 = this._x1 = +x2},${this._y0 = this._y1 = +y2}`;
+  }
+  closePath() {
+    this._x1 !== null && (this._x1 = this._x0, this._y1 = this._y0, this._append`Z`);
+  }
+  lineTo(x2, y2) {
+    this._append`L${this._x1 = +x2},${this._y1 = +y2}`;
+  }
+  quadraticCurveTo(x1, y1, x2, y2) {
+    this._append`Q${+x1},${+y1},${this._x1 = +x2},${this._y1 = +y2}`;
+  }
+  bezierCurveTo(x1, y1, x2, y2, x3, y3) {
+    this._append`C${+x1},${+y1},${+x2},${+y2},${this._x1 = +x3},${this._y1 = +y3}`;
+  }
+  arcTo(x1, y1, x2, y2, r2) {
+    if (x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r2 = +r2, r2 < 0) throw new Error(`negative radius: ${r2}`);
+    let x0 = this._x1, y0 = this._y1, x21 = x2 - x1, y21 = y2 - y1, x01 = x0 - x1, y01 = y0 - y1, l01_2 = x01 * x01 + y01 * y01;
+    if (this._x1 === null)
+      this._append`M${this._x1 = x1},${this._y1 = y1}`;
+    else if (l01_2 > epsilon) if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon) || !r2)
+      this._append`L${this._x1 = x1},${this._y1 = y1}`;
+    else {
+      let x20 = x2 - x0, y20 = y2 - y0, l21_2 = x21 * x21 + y21 * y21, l20_2 = x20 * x20 + y20 * y20, l21 = Math.sqrt(l21_2), l01 = Math.sqrt(l01_2), l2 = r2 * Math.tan((pi - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2), t01 = l2 / l01, t21 = l2 / l21;
+      Math.abs(t01 - 1) > epsilon && this._append`L${x1 + t01 * x01},${y1 + t01 * y01}`, this._append`A${r2},${r2},0,0,${+(y01 * x20 > x01 * y20)},${this._x1 = x1 + t21 * x21},${this._y1 = y1 + t21 * y21}`;
+    }
+  }
+  arc(x2, y2, r2, a0, a1, ccw) {
+    if (x2 = +x2, y2 = +y2, r2 = +r2, ccw = !!ccw, r2 < 0) throw new Error(`negative radius: ${r2}`);
+    let dx = r2 * Math.cos(a0), dy = r2 * Math.sin(a0), x0 = x2 + dx, y0 = y2 + dy, cw = 1 ^ ccw, da = ccw ? a0 - a1 : a1 - a0;
+    this._x1 === null ? this._append`M${x0},${y0}` : (Math.abs(this._x1 - x0) > epsilon || Math.abs(this._y1 - y0) > epsilon) && this._append`L${x0},${y0}`, r2 && (da < 0 && (da = da % tau + tau), da > tauEpsilon ? this._append`A${r2},${r2},0,1,${cw},${x2 - dx},${y2 - dy}A${r2},${r2},0,1,${cw},${this._x1 = x0},${this._y1 = y0}` : da > epsilon && this._append`A${r2},${r2},0,${+(da >= pi)},${cw},${this._x1 = x2 + r2 * Math.cos(a1)},${this._y1 = y2 + r2 * Math.sin(a1)}`);
+  }
+  rect(x2, y2, w, h) {
+    this._append`M${this._x0 = this._x1 = +x2},${this._y0 = this._y1 = +y2}h${w = +w}v${+h}h${-w}Z`;
+  }
+  toString() {
+    return this._;
+  }
+}
+function withPath(shape) {
+  let digits = 3;
+  return shape.digits = function(_) {
+    if (!arguments.length) return digits;
+    if (_ == null)
+      digits = null;
+    else {
+      const d2 = Math.floor(_);
+      if (!(d2 >= 0)) throw new RangeError(`invalid digits: ${_}`);
+      digits = d2;
+    }
+    return shape;
+  }, () => new Path(digits);
+}
+function array(x2) {
+  return typeof x2 == "object" && "length" in x2 ? x2 : Array.from(x2);
+}
+function Linear(context) {
+  this._context = context;
+}
+Linear.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._point = 0;
+  },
+  lineEnd: function() {
+    (this._line || this._line !== 0 && this._point === 1) && this._context.closePath(), this._line = 1 - this._line;
+  },
+  point: function(x2, y2) {
+    switch (x2 = +x2, y2 = +y2, this._point) {
+      case 0:
+        this._point = 1, this._line ? this._context.lineTo(x2, y2) : this._context.moveTo(x2, y2);
+        break;
+      case 1:
+        this._point = 2;
+      default:
+        this._context.lineTo(x2, y2);
+        break;
+    }
+  }
+};
+function curveLinear(context) {
+  return new Linear(context);
+}
+function x(p2) {
+  return p2[0];
+}
+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);
+  x$1 = typeof x$1 == "function" ? x$1 : x$1 === void 0 ? x : constant(x$1), y$12 = typeof y$12 == "function" ? y$12 : y$12 === void 0 ? y : constant(y$12);
+  function line(data) {
+    var i2, n2 = (data = array(data)).length, d2, defined0 = !1, buffer;
+    for (context == null && (output = curve2(buffer = path())), i2 = 0; i2 <= n2; ++i2)
+      !(i2 < n2 && defined(d2 = data[i2], i2, data)) === defined0 && ((defined0 = !defined0) ? output.lineStart() : output.lineEnd()), defined0 && output.point(+x$1(d2, i2, data), +y$12(d2, i2, data));
+    if (buffer) return output = null, buffer + "" || null;
+  }
+  return line.x = function(_) {
+    return arguments.length ? (x$1 = typeof _ == "function" ? _ : constant(+_), line) : x$1;
+  }, line.y = function(_) {
+    return arguments.length ? (y$12 = typeof _ == "function" ? _ : constant(+_), line) : y$12;
+  }, line.defined = function(_) {
+    return arguments.length ? (defined = typeof _ == "function" ? _ : constant(!!_), line) : defined;
+  }, line.curve = function(_) {
+    return arguments.length ? (curve2 = _, context != null && (output = curve2(context)), line) : curve2;
+  }, line.context = function(_) {
+    return arguments.length ? (_ == null ? context = output = null : output = curve2(context = _), line) : context;
+  }, line;
+}
+function point$1(that, x2, y2) {
+  that._context.bezierCurveTo(
+    that._x1 + that._k * (that._x2 - that._x0),
+    that._y1 + that._k * (that._y2 - that._y0),
+    that._x2 + that._k * (that._x1 - x2),
+    that._y2 + that._k * (that._y1 - y2),
+    that._x2,
+    that._y2
+  );
+}
+function Cardinal(context, tension) {
+  this._context = context, this._k = (1 - tension) / 6;
+}
+Cardinal.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._x0 = this._x1 = this._x2 = this._y0 = this._y1 = this._y2 = NaN, this._point = 0;
+  },
+  lineEnd: function() {
+    switch (this._point) {
+      case 2:
+        this._context.lineTo(this._x2, this._y2);
+        break;
+      case 3:
+        point$1(this, this._x1, this._y1);
+        break;
+    }
+    (this._line || this._line !== 0 && this._point === 1) && this._context.closePath(), this._line = 1 - this._line;
+  },
+  point: function(x2, y2) {
+    switch (x2 = +x2, y2 = +y2, this._point) {
+      case 0:
+        this._point = 1, this._line ? this._context.lineTo(x2, y2) : this._context.moveTo(x2, y2);
+        break;
+      case 1:
+        this._point = 2, this._x1 = x2, this._y1 = y2;
+        break;
+      case 2:
+        this._point = 3;
+      default:
+        point$1(this, x2, y2);
+        break;
+    }
+    this._x0 = this._x1, this._x1 = this._x2, this._x2 = x2, this._y0 = this._y1, this._y1 = this._y2, this._y2 = y2;
+  }
+};
+(function custom(tension) {
+  function cardinal(context) {
+    return new Cardinal(context, tension);
+  }
+  return cardinal.tension = function(tension2) {
+    return custom(+tension2);
+  }, cardinal;
+})(0);
+function CardinalOpen(context, tension) {
+  this._context = context, this._k = (1 - tension) / 6;
+}
+CardinalOpen.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._x0 = this._x1 = this._x2 = this._y0 = this._y1 = this._y2 = NaN, this._point = 0;
+  },
+  lineEnd: function() {
     (this._line || this._line !== 0 && this._point === 3) && this._context.closePath(), this._line = 1 - this._line;
   },
   point: function(x2, y2) {
@@ -6513,7 +6838,7 @@ const curveCatmullRomOpen = function custom4(alpha2) {
   Dot,
   ODot
 };
-var container$5 = "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$2 = "yi2p6v2", edgePathBg = "yi2p6v3", markerContext = "yi2p6v4", controlPoint = "yi2p6v5", controlDragging = "yi2p6v6", cssEdgePath = "yi2p6v8", stepEdgeNumber = "yi2p6v9", varLabelX = "var(--yi2p6va)", varLabelY = "var(--yi2p6vb)", edgeLabel = "yi2p6vd", edgeLabelText = "yi2p6ve", edgeNoteCloseButton = "yi2p6vf", edgeNoteText = "yi2p6vg", cssNavigateBtn$1 = "yi2p6vh", cssNavigateBtnIcon = "yi2p6vi";
 function getNodeIntersectionFromCenterToPoint(intersectionNode, { x: x1, y: y1 }) {
   const {
     width: intersectionNodeWidth,
@@ -6557,7 +6882,7 @@ function bezierPath(bezierSpline) {
 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];
   return isSame(ax, bx) && isSame(ay, by);
-}, sameControlPoints = (a2, b2) => a2 === b2 ? !0 : !a2 || !b2 || a2.length !== b2.length ? !1 : a2.every((ap, i2) => isSamePoint(ap, b2[i2])), isEqualProps$2 = (prev, next) => prev.id === next.id && deepEqual(prev.source, next.source) && deepEqual(prev.target, next.target) && deepEqual(prev.selected ?? !1, next.selected ?? !1) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data.stepNum, next.data.stepNum) && deepEqual(prev.data.label, next.data.label) && sameControlPoints(prev.data.controlPoints, next.data.controlPoints) && deepEqual(prev.data.edge, next.data.edge), curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y), RelationshipEdge = /* @__PURE__ */ memo$1(function({
+}, sameControlPoints = (a2, b2) => a2 === b2 ? !0 : !a2 || !b2 || a2.length !== b2.length ? !1 : a2.every((ap, i2) => isSamePoint(ap, b2[i2])), isEqualProps$2 = (prev, next) => prev.id === next.id && deepEqual(prev.source, next.source) && deepEqual(prev.target, next.target) && deepEqual(prev.selected ?? !1, next.selected ?? !1) && isSame(prev.sourceX, next.sourceX) && isSame(prev.sourceY, next.sourceY) && isSame(prev.targetX, next.targetX) && isSame(prev.targetY, next.targetY) && deepEqual(prev.data.label, next.data.label) && sameControlPoints(prev.data.controlPoints, next.data.controlPoints) && deepEqual(prev.data.edge, next.data.edge), curve = d3line().curve(curveCatmullRomOpen).x((d2) => d2.x).y((d2) => d2.y), RelationshipEdge = /* @__PURE__ */ memo$1(function({
   id: id2,
   data,
   selected,
@@ -6570,13 +6895,26 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => {
   target,
   interactionWidth
 }) {
-  const [isControlPointDragging, setIsControlPointDragging] = useState$1(!1), diagramStore = useDiagramStoreApi(), xyflowStore = useXYStoreApi(), { isActive, isEdgePathEditable, isHovered, isDimmed, hasOpenSourceRelation } = useDiagramState((s2) => ({
-    isEdgePathEditable: s2.readonly !== !0 && s2.experimentalEdgeEditing === !0 && s2.focusedNodeId === null && s2.activeDynamicViewStep === null,
-    isActive: s2.focusedNodeId === source || s2.focusedNodeId === target || s2.activeDynamicViewStep !== null && s2.activeDynamicViewStep === data.stepNum,
+  const [isControlPointDragging, setIsControlPointDragging] = useState$1(!1), diagramStore = useDiagramStoreApi(), xyflowStore = useXYStoreApi(), {
+    isFocusedNode,
+    isActiveWalkthroughStep,
+    isEdgePathEditable,
+    isHovered,
+    isDimmed,
+    isActiveAsParallel,
+    hasOnOpenSourceRelation,
+    hasOnNavigateTo
+  } = useDiagramState((s2) => ({
+    isEdgePathEditable: s2.readonly !== !0 && s2.experimentalEdgeEditing === !0 && s2.focusedNodeId === null && s2.activeWalkthrough === null,
+    isFocusedNode: s2.focusedNodeId === source || s2.focusedNodeId === target,
+    isActiveWalkthroughStep: s2.activeWalkthrough?.stepId === data.edge.id,
+    // If activeWalkthrough and this edge is part of the parallel group
+    isActiveAsParallel: !!s2.activeWalkthrough?.parallelPrefix && id2.startsWith(s2.activeWalkthrough.parallelPrefix),
     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$1(data.controlPoints) || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.element.position) || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.element.position), {
+    hasOnOpenSourceRelation: !!s2.onOpenSourceRelation,
+    hasOnNavigateTo: !!s2.onNavigateTo
+  })), navigateTo = hasOnNavigateTo ? data.edge.navigateTo ?? null : null, isActive = isFocusedNode || isActiveWalkthroughStep, { 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), {
     label,
     edge: {
       points: diagramEdgePoints,
@@ -6587,7 +6925,7 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => {
     }
   } = data;
   let controlPoints = data.controlPoints ?? bezierControlPoints(data.edge);
-  const isStepEdge = data.stepNum !== null, isDotted = line === "dotted", isDashed = isDotted || line === "dashed";
+  const isStepEdge = isStepEdgeId(data.edge.id), isDotted = line === "dotted", isDashed = isDotted || line === "dashed";
   let strokeDasharray;
   isDotted ? strokeDasharray = "1,8" : isDashed && (strokeDasharray = "8,10");
   let labelX = labelBBox?.x ?? 0, labelY = labelBBox?.y ?? 0;
@@ -6681,408 +7019,242 @@ const isSame = (a2, b2) => Math.abs(a2 - b2) < 2.5, isSamePoint = (a2, b2) => {
       once: !0,
       capture: !0
     });
-  };
-  let markerStartName = toMarker(diagramEdge.tail), markerEndName = toMarker(diagramEdge.head ?? "normal");
-  diagramEdge.dir === "back" && ([markerStartName, markerEndName] = [markerEndName, markerStartName]);
-  const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null, MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null, labelZIndex = 1 + (isHovered ? ZIndexes.Element : edgeLookup.get(id2).zIndex ?? ZIndexes.Edge), relationId = d(data.edge.relations), showOpenSourceRelation = hasOpenSourceRelation && relationId !== void 0;
-  return /* @__PURE__ */ jsxs(
-    "g",
-    {
-      className: clsx(
-        container$5,
-        isDimmed && dimmed$2,
-        isControlPointDragging && controlDragging
-      ),
-      "data-likec4-color": color2,
-      "data-edge-dir": diagramEdge.dir,
-      "data-edge-active": isActive,
-      "data-edge-hovered": isHovered,
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            className: clsx("react-flow__edge-interaction"),
-            d: edgePath,
-            fill: "none",
-            stroke: "transparent",
-            strokeWidth: interactionWidth ?? 10
-          }
-        ),
-        /* @__PURE__ */ jsxs("g", { className: markerContext, children: [
-          /* @__PURE__ */ jsxs("defs", { children: [
-            MarkerStart && /* @__PURE__ */ jsx(MarkerStart, { id: "start" + id2 }),
-            MarkerEnd && /* @__PURE__ */ jsx(MarkerEnd, { id: "end" + id2 })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              className: clsx("react-flow__edge-path", edgePathBg),
-              d: edgePath,
-              style,
-              strokeLinecap: "round"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              ref: svgPathRef,
-              className: clsx("react-flow__edge-path", cssEdgePath),
-              d: edgePath,
-              style,
-              strokeLinecap: "round",
-              strokeDasharray,
-              markerStart: MarkerStart ? `url(#start${id2})` : void 0,
-              markerEnd: MarkerEnd ? `url(#end${id2})` : void 0
-            }
-          )
-        ] }),
-        isEdgePathEditable && /* @__PURE__ */ jsx(
-          "g",
-          {
-            onContextMenu: (e2) => {
-              e2.preventDefault(), e2.stopPropagation();
-            },
-            children: controlPoints.map((p2, i2) => /* @__PURE__ */ jsx(
-              "circle",
-              {
-                onPointerDown: (e2) => onControlPointerDown(i2, e2),
-                className: controlPoint,
-                cx: p2.x,
-                cy: p2.y,
-                r: 3
-              },
-              i2
-            ))
-          }
-        ),
-        (data.label || isStepEdge) && /* @__PURE__ */ jsx(
-          EdgeLabel,
-          {
-            isDimmed,
-            color: color2,
-            isModified,
-            labelX,
-            labelY,
-            isEdgePathEditable,
-            selected: selected ?? !1,
-            stepNum: data.stepNum,
-            label: data.label,
-            zIndex: labelZIndex,
-            isHovered,
-            isActive,
-            isStepEdge,
-            onClick: showOpenSourceRelation && ((e2) => {
-              e2.stopPropagation(), diagramStore.getState().onOpenSourceRelation?.(relationId);
-            })
-          }
-        )
-      ]
-    }
-  );
-}, isEqualProps$2), EdgeLabel = ({
-  isDimmed,
-  color: color2,
-  isModified,
-  labelX,
-  labelY,
-  isEdgePathEditable,
-  selected,
-  label,
-  stepNum,
-  isHovered,
-  isActive,
-  zIndex,
-  onClick
-}) => /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs(
-  Box,
-  {
-    className: clsx([
-      "nodrag nopan",
-      container$5,
-      edgeLabel,
-      isDimmed && dimmed$2
-    ]),
-    style: {
-      ...assignInlineVars({
-        [varLabelX]: isModified ? `calc(${labelX}px - 10%)` : `${labelX}px`,
-        [varLabelY]: isModified ? `${labelY - 5}px` : `${labelY}px`
-      }),
-      ...isEdgePathEditable && selected && {
-        pointerEvents: "none"
-      },
-      ...label && {
-        maxWidth: label.bbox.width + 18
-      },
-      zIndex
-    },
-    mod: {
-      "data-likec4-color": color2,
-      "data-edge-hovered": isHovered,
-      "data-edge-active": isActive
-    },
-    onClick: onClick || void 0,
-    children: [
-      stepNum !== null && /* @__PURE__ */ jsx(Box, { className: stepEdgeNumber, children: stepNum }),
-      n$1(label?.text) && /* @__PURE__ */ jsx(Box, { className: edgeLabelText, children: label.text })
-    ]
-  }
-) });
-/**
- * @license @tabler/icons-react v3.14.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-var defaultAttributes = {
-  outline: {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  },
-  filled: {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    stroke: "none"
-  }
-};
-/**
- * @license @tabler/icons-react v3.14.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
-  const Component2 = forwardRef$1(
-    ({ color: color2 = "currentColor", size = 24, stroke = 2, title: title2, className, children, ...rest }, ref) => createElement$1(
-      "svg",
-      {
-        ref,
-        ...defaultAttributes[type],
-        width: size,
-        height: size,
-        className: ["tabler-icon", `tabler-icon-${iconName}`, className].join(" "),
-        ...type === "filled" ? {
-          fill: color2
-        } : {
-          strokeWidth: stroke,
-          stroke: color2
-        },
-        ...rest
-      },
-      [
-        title2 && createElement$1("title", { key: "svg-title" }, title2),
-        ...iconNode.map(([tag, attrs]) => createElement$1(tag, attrs)),
-        ...Array.isArray(children) ? children : [children]
-      ]
-    )
-  );
-  return Component2.displayName = `${iconNamePascal}`, Component2;
-};
-/**
- * @license @tabler/icons-react v3.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.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.14.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-var IconPlayerStopFilled = createReactComponent("filled", "player-stop-filled", "IconPlayerStopFilled", [["path", { d: "M17 4h-10a3 3 0 0 0 -3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3 -3v-10a3 3 0 0 0 -3 -3z", key: "svg-0" }]]);
+  };
+  let markerStartName = toMarker(diagramEdge.tail), markerEndName = toMarker(diagramEdge.head ?? "normal");
+  diagramEdge.dir === "back" && ([markerStartName, markerEndName] = [markerEndName, markerStartName]);
+  const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null, MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null, labelZIndex = 1 + (isHovered ? ZIndexes.Element : edgeLookup.get(id2).zIndex ?? ZIndexes.Edge), relationId = d(data.edge.relations), showOpenSourceRelation = hasOnOpenSourceRelation && relationId !== void 0;
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      className: clsx(
+        container$5,
+        isDimmed && dimmed$2,
+        isControlPointDragging && controlDragging
+      ),
+      "data-likec4-color": color2,
+      "data-edge-dir": diagramEdge.dir,
+      "data-edge-active": isActive,
+      "data-edge-animated": isActive || isActiveAsParallel,
+      "data-edge-hovered": isHovered,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: clsx("react-flow__edge-interaction"),
+            d: edgePath,
+            fill: "none",
+            stroke: "transparent",
+            strokeWidth: interactionWidth ?? 10
+          }
+        ),
+        /* @__PURE__ */ jsxs("g", { className: markerContext, children: [
+          /* @__PURE__ */ jsxs("defs", { children: [
+            MarkerStart && /* @__PURE__ */ jsx(MarkerStart, { id: "start" + id2 }),
+            MarkerEnd && /* @__PURE__ */ jsx(MarkerEnd, { id: "end" + id2 })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: clsx("react-flow__edge-path", edgePathBg),
+              d: edgePath,
+              style,
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              ref: svgPathRef,
+              className: clsx("react-flow__edge-path", cssEdgePath),
+              d: edgePath,
+              style,
+              strokeLinecap: "round",
+              strokeDasharray,
+              markerStart: MarkerStart ? `url(#start${id2})` : void 0,
+              markerEnd: MarkerEnd ? `url(#end${id2})` : void 0
+            }
+          )
+        ] }),
+        isEdgePathEditable && /* @__PURE__ */ jsx(
+          "g",
+          {
+            onContextMenu: (e2) => {
+              e2.preventDefault(), e2.stopPropagation();
+            },
+            children: controlPoints.map((p2, i2) => /* @__PURE__ */ jsx(
+              "circle",
+              {
+                onPointerDown: (e2) => onControlPointerDown(i2, e2),
+                className: controlPoint,
+                cx: p2.x,
+                cy: p2.y,
+                r: 3
+              },
+              i2
+            ))
+          }
+        ),
+        (data.label || isStepEdge) && /* @__PURE__ */ jsx(
+          EdgeLabel,
+          {
+            isDimmed,
+            color: color2,
+            isModified,
+            labelX,
+            labelY,
+            navigateTo,
+            isEdgePathEditable,
+            selected: selected ?? !1,
+            stepNum: isStepEdge ? extractStep(data.edge.id) : null,
+            label: data.label,
+            zIndex: labelZIndex,
+            notes: isActiveWalkthroughStep ? data.edge.notes ?? null : null,
+            isHovered,
+            isActive,
+            isStepEdge,
+            onClick: showOpenSourceRelation && ((e2) => {
+              e2.stopPropagation(), diagramStore.getState().onOpenSourceRelation?.(relationId);
+            })
+          }
+        )
+      ]
+    }
+  );
+}, isEqualProps$2), EdgeLabel = ({
+  isDimmed,
+  color: color2,
+  isModified,
+  labelX,
+  labelY,
+  isEdgePathEditable,
+  selected,
+  navigateTo,
+  label,
+  notes,
+  stepNum,
+  isHovered,
+  isActive,
+  zIndex,
+  onClick
+}) => {
+  let labelBox = /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: clsx([
+        "nodrag nopan",
+        container$5,
+        edgeLabel,
+        isDimmed && dimmed$2
+      ]),
+      style: {
+        ...assignInlineVars({
+          [varLabelX]: isModified ? `calc(${labelX}px - 10%)` : `${labelX}px`,
+          [varLabelY]: isModified ? `${labelY - 5}px` : `${labelY}px`
+        }),
+        ...isEdgePathEditable && selected && {
+          pointerEvents: "none"
+        },
+        ...label && {
+          maxWidth: label.bbox.width + 18
+        },
+        zIndex
+      },
+      mod: {
+        "data-likec4-color": color2,
+        "data-edge-hovered": isHovered,
+        "data-edge-active": isActive
+      },
+      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 }),
+        navigateTo && !isDimmed && /* @__PURE__ */ jsx(NavigateToBtn$1, { viewId: navigateTo })
+      ]
+    }
+  );
+  return n$2(notes) && (labelBox = /* @__PURE__ */ jsx(NotePopover, { notes, children: labelBox })), /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: labelBox });
+}, NotePopover = ({ notes, children }) => {
+  const {
+    nextDynamicStep,
+    hasNext,
+    hasPrevious
+  } = useDiagramState((s2) => ({
+    nextDynamicStep: s2.nextDynamicStep,
+    hasNext: s2.activeWalkthrough?.hasNext ?? !1,
+    hasPrevious: s2.activeWalkthrough?.hasPrevious ?? !1
+  })), [isOpened, setIsOpened] = useState$1(!1), portalProps = useMantinePortalProps();
+  return useDebouncedEffect(
+    () => {
+      setIsOpened(!0);
+    },
+    [],
+    300
+  ), /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      shadow: "xs",
+      offset: 16,
+      opened: isOpened,
+      closeOnClickOutside: !1,
+      ...portalProps,
+      children: [
+        /* @__PURE__ */ jsx(PopoverTarget, { children }),
+        /* @__PURE__ */ jsxs(
+          PopoverDropdown,
+          {
+            component: Stack,
+            p: "xs",
+            onPointerDownCapture: (e2) => e2.stopPropagation(),
+            onClick: (e2) => e2.stopPropagation(),
+            onDoubleClick: (e2) => e2.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx(ScrollAreaAutosize, { maw: 450, mah: 350, type: "scroll", mx: "auto", mt: 2, children: /* @__PURE__ */ jsx(Text$1, { component: "div", className: edgeNoteText, p: 4, children: notes }) }),
+              /* @__PURE__ */ jsx(
+                CloseButton,
+                {
+                  size: "xs",
+                  className: edgeNoteCloseButton,
+                  onClick: () => setIsOpened(!1)
+                }
+              ),
+              (hasPrevious || hasNext) && /* @__PURE__ */ jsxs(Group, { gap: 0, justify: hasPrevious ? "flex-start" : "flex-end", children: [
+                hasPrevious && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "subtle",
+                    radius: "xs",
+                    size: "compact-xs",
+                    onClick: () => nextDynamicStep(-1),
+                    children: "back"
+                  }
+                ),
+                hasNext && /* @__PURE__ */ jsx(Button, { variant: "subtle", radius: "xs", size: "compact-xs", onClick: () => nextDynamicStep(), children: "next" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+function NavigateToBtn$1({ viewId }) {
+  const diagramApi = useDiagramStoreApi();
+  return /* @__PURE__ */ jsx(
+    ActionIcon$2,
+    {
+      className: clsx("nodrag nopan", cssNavigateBtn$1),
+      size: "sm",
+      radius: "sm",
+      onPointerDownCapture: (e2) => e2.stopPropagation(),
+      onClick: (event) => {
+        event.stopPropagation(), diagramApi.getState().onNavigateTo?.(viewId, event);
+      },
+      role: "button",
+      onDoubleClick: (event) => event.stopPropagation(),
+      children: /* @__PURE__ */ jsx(IconZoomScan, { className: cssNavigateBtnIcon })
+    }
+  );
+}
 function NavigateToBtn({ xynodeId, className }) {
   const diagramApi = useDiagramStoreApi();
   return /* @__PURE__ */ jsx(
@@ -7168,13 +7340,15 @@ const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.dat
                 opacity < 1 && transparent,
                 "likec4-compound"
               ),
-              style: opacity < 1 ? {
-                ...assignInlineVars({
-                  [varBorderTransparency]: `${borderTransparency}%`,
-                  [varOpacity]: opacity.toFixed(2)
-                }),
-                borderStyle: style.border ?? "dashed"
-              } : void 0,
+              style: {
+                ...opacity < 1 && {
+                  ...assignInlineVars({
+                    [varBorderTransparency]: `${borderTransparency}%`,
+                    [varOpacity]: opacity.toFixed(2)
+                  }),
+                  borderStyle: style.border ?? "dashed"
+                }
+              },
               children: /* @__PURE__ */ jsx(
                 Text$1,
                 {
@@ -7204,15 +7378,11 @@ const isEqualProps$1 = (prev, next) => prev.id === next.id && deepEqual(prev.dat
   ] });
 }, isEqualProps$1);
 var container$3 = "_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$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$3);
+  const id2 = useId$1(), portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsx("div", { className: elementLink, "data-likec4-linkid": id2, children: /* @__PURE__ */ jsxs(
     HoverCard,
     {
@@ -7225,7 +7395,7 @@ function ElementLink({
       transitionProps: {
         transition: "pop"
       },
-      ...portalProps ? { portalProps } : { withinPortal: !1 },
+      ...portalProps,
       floatingStrategy: "fixed",
       openDelay: 350,
       closeDelay: 800,
@@ -7564,7 +7734,7 @@ const Text = Text$1.withProps({
             {
               className: clsx(
                 elementDataContainer,
-                n$1(elementIcon2) && hasIcon,
+                n$2(elementIcon2) && hasIcon,
                 "likec4-element"
               ),
               children: [
@@ -8896,30 +9066,28 @@ function useXYFlowEvents() {
           return;
         const {
           focusedNodeId,
-          activeDynamicViewStep,
+          activeWalkthrough,
           fitDiagram,
           onCanvasClick,
           xystore,
           resetLastClicked
         } = diagramApi.getState();
-        (focusedNodeId ?? activeDynamicViewStep) !== null && (fitDiagram(), onCanvasClick || event.stopPropagation()), resetLastClicked(), xystore.getState().resetSelectedElements(), onCanvasClick?.(event);
+        (focusedNodeId ?? activeWalkthrough) !== null && (fitDiagram(), onCanvasClick || event.stopPropagation()), resetLastClicked(), xystore.getState().resetSelectedElements(), onCanvasClick?.(event);
       },
       onNodeContextMenu: (event, xynode) => {
-        diagramApi.getState().setLastClickedNode(xynode.id), diagramApi.getState().onNodeContextMenu?.({
-          element: xynode.data.element,
-          xynode,
+        diagramApi.getState().setLastClickedNode(xynode.id), diagramApi.getState().onNodeContextMenu?.(
+          xynode.data.element,
           event
-        });
+        );
       },
       onPaneContextMenu: (event) => {
         diagramApi.getState().resetLastClicked(), diagramApi.getState().onCanvasContextMenu?.(event);
       },
       onEdgeContextMenu: (event, xyedge) => {
-        diagramApi.getState().setLastClickedEdge(xyedge.id), diagramApi.getState().onEdgeContextMenu?.({
-          edge: xyedge.data.edge,
-          xyedge,
+        diagramApi.getState().setLastClickedEdge(xyedge.id), diagramApi.getState().onEdgeContextMenu?.(
+          xyedge.data.edge,
           event
-        });
+        );
       },
       onNodeClick: (event, xynode) => {
         const {
@@ -8957,11 +9125,10 @@ function useXYFlowEvents() {
           }
           !onNodeClick && stopPropagation && event.stopPropagation();
         }
-        lastClickTimestamp.current = Date.now(), onNodeClick?.({
-          element: xynode.data.element,
-          xynode,
+        lastClickTimestamp.current = Date.now(), onNodeClick?.(
+          xynode.data.element,
           event
-        });
+        );
       },
       onNodeDoubleClick: (event, xynode) => {
         const {
@@ -8978,8 +9145,8 @@ function useXYFlowEvents() {
           lastClickedEdgeId,
           isDynamicView,
           enableDynamicViewWalkthrough,
-          activateDynamicStep,
-          activeDynamicViewStep,
+          activateWalkthrough,
+          activeWalkthrough,
           focusedNodeId,
           xystore,
           nodesSelectable,
@@ -8988,19 +9155,18 @@ function useXYFlowEvents() {
           setLastClickedEdge
         } = diagramApi.getState();
         lastClickedEdgeId !== xyedge.id && setLastClickedEdge(xyedge.id);
-        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) {
-            activateDynamicStep(nextStep), event.stopPropagation();
+        const isNotAFirstClick = lastClickedEdgeId === xyedge.id, isEdgeOfFocusedNode = n$2(focusedNodeId) && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target);
+        if (isDynamicView && enableDynamicViewWalkthrough && (isEdgeOfFocusedNode || isNotAFirstClick || l(activeWalkthrough))) {
+          const nextStep = xyedge.data.edge.id;
+          if (activeWalkthrough?.stepId !== nextStep) {
+            activateWalkthrough(nextStep), event.stopPropagation();
             return;
           }
         }
-        isEdgeOfFocusedNode ? (focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source), onEdgeClick || event.stopPropagation()) : nodesSelectable && (xystore.getState().addSelectedEdges([xyedge.id]), onEdgeClick || event.stopPropagation()), onEdgeClick?.({
-          edge: xyedge.data.edge,
-          xyedge,
+        isEdgeOfFocusedNode ? (focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source), onEdgeClick || event.stopPropagation()) : nodesSelectable && (xystore.getState().addSelectedEdges([xyedge.id]), onEdgeClick || event.stopPropagation()), onEdgeClick?.(
+          xyedge.data.edge,
           event
-        });
+        );
       },
       onEdgeDoubleClick: (event, xyedge) => {
         diagramApi.getState().setLastClickedEdge(xyedge.id);
@@ -9009,12 +9175,12 @@ function useXYFlowEvents() {
           isDynamicView,
           enableDynamicViewWalkthrough,
           focusOnNode,
-          activateDynamicStep,
-          activeDynamicViewStep
+          activeWalkthrough,
+          activateWalkthrough
         } = diagramApi.getState();
         if (isDynamicView && enableDynamicViewWalkthrough) {
-          const nextStep = extractStep(xyedge.data.edge.id);
-          activeDynamicViewStep !== nextStep && (activateDynamicStep(extractStep(xyedge.data.edge.id)), event.stopPropagation());
+          const nextStep = xyedge.data.edge.id;
+          activeWalkthrough?.stepId !== nextStep && (activateWalkthrough(nextStep), event.stopPropagation());
           return;
         }
         if (enableFocusMode) {
@@ -9355,19 +9521,23 @@ function DiagramTitlePanel() {
     id2
   ) });
 }
-var container$1 = "h3ljtj0", buttons = "h3ljtj1", btn = "h3ljtj3";
+var container$1 = "h3ljtj0", buttons = "h3ljtj1", btn = "h3ljtj3", parallelStateFrame = "h3ljtj4";
 function DynamicViewWalkthrough() {
   const isMobile = useXYStore((s2) => s2.width <= 750), {
     nextDynamicStep,
     stopDynamicView,
-    activeDynamicViewStep,
-    hasNextSteps
+    isActive,
+    isParallel,
+    hasNext,
+    hasPrevious
   } = useDiagramState((s2) => ({
     nextDynamicStep: s2.nextDynamicStep,
-    stopDynamicView: s2.stopDynamicView,
-    activeDynamicViewStep: s2.activeDynamicViewStep,
-    hasNextSteps: (s2.activeDynamicViewStep ?? 1) < s2.view.edges.length
-  })), isActive = e$2(activeDynamicViewStep);
+    stopDynamicView: s2.stopWalkthrough,
+    isActive: n$1(s2.activeWalkthrough),
+    isParallel: n$2(s2.activeWalkthrough?.parallelPrefix),
+    hasNext: s2.activeWalkthrough?.hasNext ?? !1,
+    hasPrevious: s2.activeWalkthrough?.hasPrevious ?? !1
+  })), diagramApi = useDiagramStoreApi();
   useHotkeys(
     isActive ? [
       ["ArrowLeft", () => nextDynamicStep(-1)],
@@ -9384,65 +9554,104 @@ function DynamicViewWalkthrough() {
     className: btn,
     size: isMobile ? "compact-md" : "lg",
     radius: isMobile ? "lg" : "xl"
+  }, startWalkthrough = (e2) => {
+    e2.stopPropagation();
+    const {
+      xyedges,
+      activateWalkthrough
+    } = diagramApi.getState(), firstEdge = nonNullable(d(xyedges), "expected at least one edge");
+    activateWalkthrough(firstEdge.data.edge.id);
   }, nextStep = (increment = 1) => (e2) => {
     e2.stopPropagation(), nextDynamicStep(increment);
   };
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      className: clsx("react-flow__panel", container$1),
-      onClick: (e2) => e2.stopPropagation(),
-      onDoubleClick: (e2) => e2.stopPropagation(),
-      children: [
-        e$3(activeDynamicViewStep) && /* @__PURE__ */ jsx(
-          Button,
-          {
-            ...buttonProps,
-            className: clsx(buttons, btn),
-            rightSection: /* @__PURE__ */ jsx(IconPlayerPlayFilled, {}),
-            onClick: nextStep(),
-            px: "xl",
-            children: "Start"
-          }
-        ),
-        e$2(activeDynamicViewStep) && /* @__PURE__ */ jsxs(ButtonGroup, { className: buttons, children: [
-          /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+    isParallel && /* @__PURE__ */ jsx(
+      Box,
+      {
+        layout: !0,
+        component: m$1.div,
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: clsx("react-flow__panel", parallelStateFrame)
+      },
+      "parallel-frame"
+    ),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: clsx("react-flow__panel", container$1),
+        onClick: (e2) => e2.stopPropagation(),
+        onDoubleClick: (e2) => e2.stopPropagation(),
+        children: [
+          !isActive && /* @__PURE__ */ jsx(
             Button,
             {
               ...buttonProps,
-              pl: "lg",
-              disabled: activeDynamicViewStep === 1,
-              onClick: nextStep(-1),
-              children: /* @__PURE__ */ jsx(IconPlayerSkipBackFilled, {})
+              className: clsx(buttons, btn),
+              rightSection: /* @__PURE__ */ jsx(IconPlayerPlayFilled, {}),
+              onClick: startWalkthrough,
+              px: "xl",
+              children: "Start"
             }
           ),
-          /* @__PURE__ */ jsxs(
-            Button,
+          isParallel && /* @__PURE__ */ jsx(
+            Badge,
             {
-              ...buttonProps,
-              px: hasNextSteps ? "md" : "xl",
-              onClick: (e2) => {
-                e2.stopPropagation(), stopDynamicView();
+              component: m$1.div,
+              initial: { opacity: 0.05, transform: "translateY(20px)" },
+              animate: { opacity: 1, transform: "translateY(0)" },
+              exit: {
+                opacity: 0,
+                transform: "translateY(20px)"
               },
-              children: [
-                hasNextSteps && /* @__PURE__ */ jsx(IconPlayerStopFilled, {}),
-                !hasNextSteps && "End"
-              ]
-            }
+              variant: "gradient",
+              size: isMobile ? "xs" : "md",
+              gradient: { from: "red", to: "orange", deg: 90 },
+              radius: "sm",
+              children: "parallel"
+            },
+            "parallel-badge"
           ),
-          hasNextSteps && /* @__PURE__ */ jsx(
-            Button,
-            {
-              ...buttonProps,
-              pr: "lg",
-              onClick: nextStep(),
-              children: /* @__PURE__ */ jsx(IconPlayerSkipForwardFilled, {})
-            }
-          )
-        ] })
-      ]
-    }
-  );
+          isActive && /* @__PURE__ */ jsxs(ButtonGroup, { className: buttons, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...buttonProps,
+                pl: "lg",
+                disabled: !hasPrevious,
+                onClick: nextStep(-1),
+                children: /* @__PURE__ */ jsx(IconPlayerSkipBackFilled, {})
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                ...buttonProps,
+                px: hasNext ? "md" : "xl",
+                onClick: (e2) => {
+                  e2.stopPropagation(), stopDynamicView();
+                },
+                children: [
+                  hasNext && /* @__PURE__ */ jsx(IconPlayerStopFilled, {}),
+                  !hasNext && "End"
+                ]
+              }
+            ),
+            hasNext && /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...buttonProps,
+                pr: "lg",
+                onClick: nextStep(),
+                children: /* @__PURE__ */ jsx(IconPlayerSkipForwardFilled, {})
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
 }
 var container = "eaj0yq0", card = "eaj0yq1", tabPanel = "eaj0yq2", elementNotation = "eaj0yq3", shapeSvg = "eaj0yq4", shapeBadge = "eaj0yq5";
 const ElementNotation = ({ value }) => {
@@ -9541,20 +9750,18 @@ const ElementNotation = ({ value }) => {
   id: s2.view.id,
   notations: s2.view.notation?.elements ?? [],
   height: s2.xystore.getState().height,
-  isVisible: e$3(s2.focusedNodeId ?? s2.activeDynamicViewStep),
-  target: s2.getContainer()
+  isVisible: e$3(s2.focusedNodeId ?? s2.activeWalkthrough)
 });
 function NotationPanel() {
   const {
     id: id2,
     notations,
     isVisible,
-    height,
-    target
+    height
   } = useDiagramState(selector), [isCollapsed, setCollapsed] = useLocalStorage({
     key: "notation-panel-collapsed",
     defaultValue: !0
-  }), hasNotations = notations.length > 0, portalProps = target ? { portalProps: { target } } : { withinPortal: !1 };
+  }), hasNotations = notations.length > 0, portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
     !hasNotations && isVisible && /* @__PURE__ */ jsx(
       m$1.div,
@@ -9651,7 +9858,7 @@ function NotationPanel() {
                 {
                   viewportProps: {
                     style: {
-                      maxHeight: height > 50 ? `min(40vh, ${height - 20}px)` : "40vh"
+                      maxHeight: `min(40vh, ${Math.max(height - 60, 50)}px)`
                     }
                   },
                   children: /* @__PURE__ */ jsx(Stack, { gap: 0, children: notations.map((n2, i2) => /* @__PURE__ */ jsx(ElementNotation, { value: n2 }, i2)) })
@@ -9921,7 +10128,7 @@ var panel$1 = "_12rmdgk0";
 function OptionsPanel() {
   const { isFocused, viewId } = useDiagramState((s2) => ({
     viewId: s2.view.id,
-    isFocused: s2.focusedNodeId !== null || s2.activeDynamicViewStep !== null
+    isFocused: s2.focusedNodeId !== null || s2.activeWalkthrough !== null
   })), [selected, setSelected] = useState$1({
     nodes: [],
     edges: []
@@ -10192,19 +10399,17 @@ const ActionIcon = ActionIcon$2.withProps({
     showFitDiagram,
     showLayoutDriftWarning,
     showChangeAutoLayout,
-    target,
     showGoToSource
   } = useDiagramState((s2) => {
-    const isNotActive = s2.activeDynamicViewStep === null && s2.focusedNodeId === null;
+    const isNotActive = s2.activeWalkthrough === 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,
-      target: s2.getContainer()
+      showGoToSource: !!s2.onOpenSourceView
     };
-  }), portalProps = target ? { portalProps: { target } } : void 0;
+  }), portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(
     Stack,
     {
@@ -10251,7 +10456,7 @@ const ActionIcon = ActionIcon$2.withProps({
                 opacity: 0,
                 transform: "translateX(-30%)"
               },
-              children: /* @__PURE__ */ jsx(Tooltip$1, { label: "Center diagram", ...portalProps, children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsx(Tooltip$1, { label: "Center camera", ...portalProps, children: /* @__PURE__ */ jsx(
                 ActionIcon$1,
                 {
                   className: "action-icon",
@@ -10288,7 +10493,7 @@ function XYFlowBackground({ background }) {
   const { variant, ...rest } = background;
   return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(variant), ...rest });
 }
-const XYFlowInner = memo$1(function({
+const XYFlowInner = /* @__PURE__ */ memo$1(function({
   children,
   background,
   controls,
@@ -10305,7 +10510,7 @@ const XYFlowInner = memo$1(function({
     isDynamicView: s2.isDynamicView,
     readonly: s2.readonly,
     enableDynamicViewWalkthrough: s2.enableDynamicViewWalkthrough,
-    isDynamicViewActive: l(s2.activeDynamicViewStep)
+    isDynamicViewActive: l(s2.activeWalkthrough)
   }));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     background !== "transparent" && background !== "solid" && /* @__PURE__ */ jsx(XYFlowBackground, { background }),
@@ -10419,7 +10624,7 @@ function LikeC4Diagram({
   ) }) });
 }
 LikeC4Diagram.displayName = "LikeC4Diagram";
-const LikeC4DiagramInnerMemo = memo$1(function({
+const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo$1(function({
   background,
   controls,
   showDiagramTitle
@@ -10556,7 +10761,7 @@ function DiagramPreview(props2) {
     }
   ) });
 }
-const OverviewGraph = /* @__PURE__ */ lazy(() => import("./-index-overview-BAmvrzHU.js"));
+const OverviewGraph = /* @__PURE__ */ lazy(() => import("./-index-overview-DZ3H7kDb.js"));
 function WithOverviewGraph() {
   return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(OverviewGraph, {}) });
 }
@@ -10729,7 +10934,7 @@ function buildDiagramTreeData(views) {
       label: view.title ?? view.id,
       type: "diagram",
       children: []
-    }), parent !== root2 && (parent.children.sort(compareTreeNodes), n$1(view.relativePath) && parent.type !== "file" && (parent.type = "file"));
+    }), parent !== root2 && (parent.children.sort(compareTreeNodes), n$2(view.relativePath) && parent.type !== "file" && (parent.type = "file"));
   }
   return root2.children.sort(compareTreeNodes);
 }
@@ -10740,17 +10945,18 @@ function useDiagramsTreeData() {
 const isFile = (node) => isTreeNodeData(node) && node.type === "file", FolderIcon = ({ node, expanded }) => isFile(node) ? /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", color: "indigo", children: /* @__PURE__ */ jsx(IconFileCode, { size: 16 }) }) : /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", color: "violet", children: expanded ? /* @__PURE__ */ jsx(IconFolderOpen, { size: 16 }) : /* @__PURE__ */ jsx(IconFolderFilled, { size: 16 }) }), DiagramsTree = /* @__PURE__ */ memo$1(() => {
   const data = useDiagramsTreeData(), { viewId } = useParams({
     from: "/view/$viewId"
-  }), diagram = useLikeC4View(viewId), initialExpandedState = {};
-  if (diagram && n$1(diagram.relativePath)) {
-    const segments = diagram.relativePath.split("/");
-    let path = "@fs";
-    for (const segment of segments)
-      path += `/${segment}`, initialExpandedState[path] = !0;
-  }
-  const tree = useTree({
-    initialExpandedState,
+  }), diagram = useLikeC4View(viewId), tree = useTree({
     multiple: !1
-  }), theme2 = useComputedColorScheme();
+  }), relativePath = diagram?.relativePath ?? null;
+  useEffect$1(() => {
+    if (relativePath) {
+      const segments = relativePath.split("/");
+      let path = "@fs";
+      for (const segment of segments)
+        path += `/${segment}`, tree.expand(path);
+    }
+  }, [relativePath]);
+  const theme2 = useComputedColorScheme();
   return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
     Tree,
     {
@@ -10806,6 +11012,7 @@ function SidebarDrawer() {
     {
       size: "sm",
       opened,
+      keepMounted: !0,
       onClose: () => drawerOpenedAtom.set(!1),
       title: /* @__PURE__ */ jsx(
         Button,
@@ -10877,7 +11084,7 @@ const AlertLocalhost = () => /* @__PURE__ */ jsx(
 `.trim();
   return /* @__PURE__ */ jsxs(Stack, { children: [
     code.includes("http://localhost") && /* @__PURE__ */ jsx(AlertLocalhost, {}),
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$1, { size: "sm", children: "Embeded view is an iframe with a static diagram" }) }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$1, { size: "sm", children: "Embedded view is an iframe with a static diagram" }) }),
     /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
       /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
         /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text$1, { fw: "500", size: "sm", children: "HTML" }) }),
@@ -10999,7 +11206,7 @@ function ShareModal({
           /* @__PURE__ */ jsxs(Tabs, { value: activeTab, onChange: (tab) => setActiveTab(tab ?? "webcomponent"), children: [
             /* @__PURE__ */ jsxs(TabsList, { children: [
               /* @__PURE__ */ jsx(TabsTab, { value: "webcomponent", children: "Webcomponent" }),
-              /* @__PURE__ */ jsx(TabsTab, { value: "embed", children: "Embed" })
+              /* @__PURE__ */ jsx(TabsTab, { value: "embed", children: "Embedded" })
             ] }),
             /* @__PURE__ */ jsx(TabsPanel, { value: "embed", pt: "md", children: /* @__PURE__ */ jsx(EmbedPanel, { diagram }) }),
             /* @__PURE__ */ jsx(TabsPanel, { value: "webcomponent", pt: "md", children: /* @__PURE__ */ jsx(WebcomponentsPanel, { diagram }) })
@@ -13016,9 +13223,22 @@ const Route = createFileRoute("/view/$viewId/d2")({
       throw notFound();
     }
   }
-});
+}), fetchFromKroki = async (d2) => await (await fetch("https://kroki.io/d2/svg", {
+  method: "POST",
+  cache: "force-cache",
+  body: JSON.stringify({
+    diagram_source: d2,
+    // diagram_options: {
+    //   theme: 'colorblind-clear'
+    // },
+    output_format: "svg"
+  }),
+  headers: {
+    "Content-Type": "application/json"
+  }
+})).text();
 function ViewAsD2() {
-  const { source } = Route.useLoaderData();
+  const { source } = Route.useLoaderData(), [krokiSvg, { execute }] = useAsync(fetchFromKroki, null);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(PanelGroup, { className: viewWithTopPadding, direction: "horizontal", autoSaveId: "viewAsD2", children: [
       /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsxs(
@@ -13045,7 +13265,22 @@ function ViewAsD2() {
           }
         }
       ),
-      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%" }) })
+      /* @__PURE__ */ jsx(Panel, { children: /* @__PURE__ */ jsxs(ScrollArea, { h: "100%", children: [
+        krokiSvg.status !== "success" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              mt: "xs",
+              variant: "light",
+              disabled: krokiSvg.status === "loading",
+              onClick: () => void execute(source),
+              children: krokiSvg.status === "loading" ? "Loading..." : "Render with Kroki"
+            }
+          ),
+          krokiSvg.status === "error" && /* @__PURE__ */ jsx(Box, { children: krokiSvg.error?.message })
+        ] }),
+        krokiSvg.status === "success" && /* @__PURE__ */ jsx(Box, { className: svgContainer, children: krokiSvg.result ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: krokiSvg.result } }) : /* @__PURE__ */ jsx(Box, { children: "Empty result" }) })
+      ] }) })
     ] }),
     /* @__PURE__ */ jsx(
       Box,