likec4 1.46.3 → 1.47.0

package/__app__/src/likec4.js

@@ -2,12 +2,12 @@ import { forwardRef, createElement, useContext, createContext, memo as memo$1, u
 import { vector, BBox as BBox$2 } from "@likec4/core/geometry";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import "react-dom";
-import { B as Background$1, a as BackgroundVariant, d as deepEqual, u as useFirstMountState, b as useCustomCompareEffect, s as shallowEqual, c as useStoreApi, e as useStore, f as useReactFlow, t, g as t$1, h as Bezier, i as getNodeDimensions, j as e, n, k as useMantineColorScheme, l as index, m as e$1, o as t$2, p as t$3, q as createSafeContext, r as atom, v as useIsomorphicLayoutEffect, w as useSyncedRef, x as t$4, y as e$2, z as t$5, A as createTheme, T as Tooltip$6, P as Portal, M as MantineContext, C as MantineProvider, D as useMantineStyleNonce, L as LazyMotion, E as domMax, F as MotionConfig, G as e$3, H as t$6, I as t$7, J as t$8, K as t$9, N as useId$1, O as ErrorBoundary$1, Q as ThemeIcon, R as Text, S as ScrollAreaAutosize, U as Button, V as useSelector, W as setup, X as emit, Y as assertEvent, Z as assign, _ as raise, $ as t$a, a0 as n$1, a1 as t$b, a2 as n$2, a3 as e$4, a4 as fromCallback, a5 as getHotkeyHandler, a6 as enqueueActions, a7 as r, a8 as sendTo, a9 as log, aa as fromPromise, ab as getNodesBounds, ac as getEdgePosition, ad as getViewportForBounds, ae as t$c, af as t$d, ag as e$5, ah as t$e, ai as t$f, aj as n$3, ak as dagre, al as t$g, am as t$h, an as t$i, ao as cancel, ap as applyEdgeChanges, aq as applyNodeChanges, ar as e$6, as as stopChild, at as spawnChild, au as e$7, av as not, aw as t$j, ax as e$8, ay as ActionIcon, az as MotionButton, aA as MotionDiv, aB as Breadcrumbs, aC as Menu, aD as UnstyledButton, aE as SegmentedControl, aF as Divider$2, aG as AnimatePresence, aH as useHover, aI as Popover, aJ as PopoverTarget, aK as PopoverDropdown, aL as Box$1, aM as FloatingIndicator, aN as Flex, aO as useDebouncedCallback, aP as useUncontrolled, aQ as clampUseMovePosition, aR as useMove, aS as useMergedRef, aT as TooltipGroup, aU as useDebouncedValue, aV as EdgeLabelRenderer, aW as e$9, aX as useDebouncedState, aY as NodeToolbar, aZ as Position, a_ as Handle, a$ as Badge, b0 as CopyButton, b1 as HoverCard, b2 as HoverCardTarget, b3 as HoverCardDropdown, b4 as Notification, b5 as isMacOs, b6 as NavLink, b7 as ColorSwatch, b8 as Space, b9 as Stack, ba as CheckIcon, bb as rem, bc as useUpdateEffect$1, bd as Slider, be as Paper, bf as Group, bg as MenuTarget, bh as MenuDropdown, bi as MenuItem, bj as useFocusTrap, bk as useReducedMotionConfig, bl as useTimeoutEffect, bm as m, bn as ReactRemoveScroll, bo as useThrottledCallback, bp as Input, bq as createScopedKeydownHandler, br as t$k, bs as Highlight, bt as useMountEffect, bu as e$a, bv as useActorRef, bw as LayoutGroup, bx as useTree, by as Alert, bz as Tree, bA as getBezierPath, bB as ReactFlowProvider, bC as useStateHistory, bD as useRafEffect, bE as Panel, bF as Anchor, bG as Pill, bH as useViewportSize, bI as useSessionStorage, bJ as t$l, bK as useDragControls, bL as useMotionValue, bM as CloseButton, bN as ActionIconGroup, bO as Tabs, bP as TabsList, bQ as TabsTab, bR as TabsPanel, bS as ScrollArea, bT as useCallbackRef$1, bU as animate, bV as e$b, bW as VisuallyHidden, bX as n$4, bY as useWindowEvent, bZ as FocusTrap, b_ as Title$1, b$ as useFocusWithin, c0 as useCombobox, c1 as ComboboxOption, c2 as Combobox, c3 as ComboboxTarget, c4 as ComboboxDropdown, c5 as ComboboxOptions, c6 as ComboboxEmpty, c7 as useHotkeys, c8 as Grid, c9 as GridCol, ca as autoUpdate, cb as computePosition, cc as offset, cd as autoPlacement, ce as size, cf as hide, cg as useLocalStorage, ch as Card, ci as n$5, cj as useRerender, ck as d3line, cl as curveCatmullRomOpen, cm as getSmoothStepPath, cn as r$1, co as produce, cp as useTimeout, cq as useDebouncedCallback$1, cr as useCustomCompareMemo, cs as setAutoFreeze, ct as castDraft, cu as n$6, cv as t$m, cw as nodeToRect$1, cx as and, cy as or, cz as e$c, cA as t$n, cB as toRgba, cC as t$o, cD as mix, cE as toHex, cF as scale, cG as e$d, cH as t$p } from "./vendors.js";
+import { B as Background$1, a as BackgroundVariant, d as deepEqual, u as useFirstMountState, b as useCustomCompareEffect, s as shallowEqual, c as useStore, e as useStoreApi, f as useReactFlow, t, g as e, h as t$1, i as Bezier, j as getNodeDimensions, n, k as useMantineColorScheme, l as index, m as e$1, o as t$2, p as t$3, q as createSafeContext$1, r as atom, v as useIsomorphicLayoutEffect, w as useSyncedRef, x as t$4, y as e$2, z as t$5, A as createTheme, T as Tooltip$6, P as Portal, M as MantineContext, C as MantineProvider, D as useMantineStyleNonce, L as LazyMotion, E as domMax, F as MotionConfig, G as e$3, H as t$6, I as t$7, J as t$8, K as t$9, N as useId$1, O as ErrorBoundary$1, Q as ThemeIcon, R as Text, S as ScrollAreaAutosize, U as Button, V as useSelector, W as setup, X as emit, Y as assertEvent, Z as assign, _ as raise, $ as t$a, a0 as n$1, a1 as t$b, a2 as n$2, a3 as e$4, a4 as fromCallback, a5 as getHotkeyHandler, a6 as enqueueActions, a7 as r, a8 as sendTo, a9 as log, aa as fromPromise, ab as getViewportForBounds, ac as getNodesBounds, ad as getEdgePosition, ae as t$c, af as t$d, ag as e$5, ah as t$e, ai as t$f, aj as n$3, ak as dagre, al as t$g, am as t$h, an as t$i, ao as cancel, ap as applyEdgeChanges, aq as applyNodeChanges, ar as e$6, as as stopChild, at as spawnChild, au as e$7, av as not, aw as t$j, ax as e$8, ay as ActionIcon, az as MotionButton, aA as MotionDiv, aB as Breadcrumbs, aC as Menu, aD as UnstyledButton, aE as SegmentedControl, aF as Divider$2, aG as AnimatePresence, aH as useHover, aI as Popover, aJ as PopoverTarget, aK as PopoverDropdown, aL as Box$1, aM as FloatingIndicator, aN as Flex, aO as useDebouncedCallback, aP as useUncontrolled, aQ as clampUseMovePosition, aR as useMove, aS as useMergedRef, aT as TooltipGroup, aU as useDebouncedValue, aV as EdgeLabelRenderer, aW as e$9, aX as useDebouncedState, aY as NodeToolbar, aZ as Position, a_ as Handle, a$ as Badge, b0 as CopyButton, b1 as HoverCard, b2 as HoverCardTarget, b3 as HoverCardDropdown, b4 as Notification, b5 as isMacOs, b6 as NavLink, b7 as ColorSwatch, b8 as Space, b9 as Stack, ba as CheckIcon, bb as rem, bc as useUpdateEffect$1, bd as Slider, be as Paper, bf as MenuTarget, bg as MenuDropdown, bh as MenuItem, bi as useFocusTrap, bj as useReducedMotionConfig, bk as useTimeoutEffect, bl as m, bm as ReactRemoveScroll, bn as useThrottledCallback, bo as Input, bp as createScopedKeydownHandler, bq as t$k, br as Highlight, bs as useMountEffect, bt as e$a, bu as useActorRef, bv as LayoutGroup, bw as useTree, bx as Alert, by as Tree, bz as Group, bA as getBezierPath, bB as ReactFlowProvider, bC as useStateHistory, bD as useRafEffect, bE as Panel, bF as Anchor, bG as Pill, bH as useViewportSize, bI as useSessionStorage, bJ as t$l, bK as useDragControls, bL as useMotionValue, bM as CloseButton, bN as ActionIconGroup, bO as Tabs, bP as TabsList, bQ as TabsTab, bR as TabsPanel, bS as ScrollArea, bT as useCallbackRef$1, bU as animate, bV as e$b, bW as VisuallyHidden, bX as n$4, bY as useWindowEvent, bZ as FocusTrap, b_ as Title$1, b$ as useFocusWithin, c0 as useCombobox, c1 as ComboboxOption, c2 as Combobox, c3 as ComboboxTarget, c4 as ComboboxDropdown, c5 as ComboboxOptions, c6 as ComboboxEmpty, c7 as useHotkeys, c8 as Grid, c9 as GridCol, ca as autoUpdate, cb as computePosition, cc as offset, cd as autoPlacement, ce as size, cf as hide, cg as useLocalStorage, ch as Card, ci as n$5, cj as useRerender, ck as d3line, cl as curveCatmullRomOpen, cm as getSmoothStepPath, cn as r$1, co as produce, cp as useTimeout, cq as useDebouncedCallback$1, cr as useCustomCompareMemo, cs as setAutoFreeze, ct as castDraft, cu as n$6, cv as t$m, cw as nodeToRect$1, cx as and, cy as or, cz as e$c, cA as t$n, cB as toRgba, cC as t$o, cD as mix, cE as toHex, cF as scale, cG as e$d, cH as t$p, cI as stagger, cJ as motionValue, cK as mapValue, cL as styleEffect, cM as isValidMotionProp } from "./vendors.js";
 import { nonexhaustive, BBox, isTagColorSpecified, Queue, GroupElementKind, nonNullable as nonNullable$1, invariant as invariant$1, isStepEdgeId, extractStep, RichText as RichText$1, ancestorsFqn, nameFromFqn, isAncestor as isAncestor$1, DefaultMap as DefaultMap$1, whereOperatorAsPredicate, getParallelStepsPrefix } from "@likec4/core";
 import { DefaultTagColors, LikeC4Styles as LikeC4Styles$1, ElementShapes } from "@likec4/core/styles";
-import { invariant, nonNullable, nonexhaustive as nonexhaustive$1, toArray, ifind, DefaultMap, delay, ifirst, ifilter, compareNaturalHierarchically, compareNatural, isAncestor, sortParentsFirst, nameFromFqn as nameFromFqn$1, isome } from "@likec4/core/utils";
 import { computeRelationshipsView, treeFromElements } from "@likec4/core/compute-view/relationships";
 import { BBox as BBox$1, preferSummary, exact, ensureSizes, RichText } from "@likec4/core/types";
+import { invariant, nonNullable, nonexhaustive as nonexhaustive$1, toArray, ifind, DefaultMap, delay, ifirst, ifilter, compareNaturalHierarchically, compareNatural, isAncestor, sortParentsFirst, nameFromFqn as nameFromFqn$1, isome } from "@likec4/core/utils";
 import { extractViewTitleFromPath, VIEW_FOLDERS_SEPARATOR, normalizeViewPath, modelConnection } from "@likec4/core/model";
 function isObject(value) {
   return typeof value == "object" && value != null && !Array.isArray(value);
@@ -192,7 +192,7 @@ function normalizeHTMLProps(props) {
   return Object.fromEntries(Object.entries(props).map(([key2, value]) => [convert(key2), value]));
 }
 normalizeHTMLProps.keys = htmlProps;
-const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_shapeSizeXs,_shapeSizeSm,_shapeSizeMd,_shapeSizeLg,_shapeSizeXl,_shapeRectangle,_shapePerson,_shapeBrowser,_shapeMobile,_shapeCylinder,_shapeStorage,_shapeQueue,_notDisabled,_reduceGraphics,_reduceGraphicsOnPan,_noReduceGraphics,_whenPanning,_smallZoom,_compoundTransparent,_edgeActive,_whenHovered,_whenSelectable,_whenSelected,_whenDimmed,_whenFocused,_p3,_srgb,_rec2020,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,xsToSm,xsToMd,xsToLg,xsToXl,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,@/xs,@/sm,@/md,@/lg,@likec4-root/xs,@likec4-root/sm,@likec4-root/md,@likec4-root/lg,@likec4-dialog/xs,@likec4-dialog/sm,@likec4-dialog/md,@likec4-dialog/lg,base", conditions = new Set(conditionsStr.split(",")), conditionRegex = /^@|&|&$/;
+const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_shapeSizeXs,_shapeSizeSm,_shapeSizeMd,_shapeSizeLg,_shapeSizeXl,_shapeRectangle,_shapePerson,_shapeBrowser,_shapeMobile,_shapeCylinder,_shapeStorage,_shapeQueue,_shapeBucket,_shapeDocument,_notDisabled,_reduceGraphics,_reduceGraphicsOnPan,_noReduceGraphics,_whenPanning,_smallZoom,_compoundTransparent,_edgeActive,_whenHovered,_whenSelectable,_whenSelected,_whenDimmed,_whenFocused,_p3,_srgb,_rec2020,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,xsToSm,xsToMd,xsToLg,xsToXl,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,@/xs,@/sm,@/md,@/lg,@likec4-root/xs,@likec4-root/sm,@likec4-root/md,@likec4-root/lg,@likec4-dialog/xs,@likec4-dialog/sm,@likec4-dialog/md,@likec4-dialog/lg,base", conditions = new Set(conditionsStr.split(",")), conditionRegex = /^@|&|&$/;
 function isCondition(value) {
   return conditions.has(value) || conditionRegex.test(value);
 }
@@ -370,22 +370,23 @@ const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
   );
   return Component.displayName = `${iconNamePascal}`, Component;
 };
-const __iconNode$R = [["path", { d: "M12 9v4", key: "svg-0" }], ["path", { d: "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z", key: "svg-1" }], ["path", { d: "M12 16h.01", key: "svg-2" }]], IconAlertTriangle = createReactComponent("outline", "alert-triangle", "AlertTriangle", __iconNode$R);
-const __iconNode$Q = [["path", { d: "M7 7l10 10", key: "svg-0" }], ["path", { d: "M17 8l0 9l-9 0", key: "svg-1" }]], IconArrowDownRight = createReactComponent("outline", "arrow-down-right", "ArrowDownRight", __iconNode$Q);
-const __iconNode$P = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M5 12l6 6", key: "svg-1" }], ["path", { d: "M5 12l6 -6", key: "svg-2" }]], IconArrowLeft = createReactComponent("outline", "arrow-left", "ArrowLeft", __iconNode$P);
-const __iconNode$O = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M13 18l6 -6", key: "svg-1" }], ["path", { d: "M13 6l6 6", key: "svg-2" }]], IconArrowRight = createReactComponent("outline", "arrow-right", "ArrowRight", __iconNode$O);
-const __iconNode$N = [["path", { d: "M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11", key: "svg-0" }]], IconBolt = createReactComponent("outline", "bolt", "Bolt", __iconNode$N);
-const __iconNode$M = [["path", { d: "M4 8h16", key: "svg-0" }], ["path", { d: "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", key: "svg-1" }], ["path", { d: "M8 4v4", key: "svg-2" }]], IconBrowser = createReactComponent("outline", "browser", "Browser", __iconNode$M);
-const __iconNode$L = [["path", { d: "M5 12l5 5l10 -10", key: "svg-0" }]], IconCheck = createReactComponent("outline", "check", "Check", __iconNode$L);
-const __iconNode$K = [["path", { d: "M6 9l6 6l6 -6", key: "svg-0" }]], IconChevronDown = createReactComponent("outline", "chevron-down", "ChevronDown", __iconNode$K);
-const __iconNode$J = [["path", { d: "M15 6l-6 6l6 6", key: "svg-0" }]], IconChevronLeft = createReactComponent("outline", "chevron-left", "ChevronLeft", __iconNode$J);
-const __iconNode$I = [["path", { d: "M9 6l6 6l-6 6", key: "svg-0" }]], IconChevronRight = createReactComponent("outline", "chevron-right", "ChevronRight", __iconNode$I);
-const __iconNode$H = [["path", { d: "M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z", key: "svg-0" }], ["path", { d: "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", key: "svg-1" }]], IconCopy = createReactComponent("outline", "copy", "Copy", __iconNode$H);
-const __iconNode$G = [["path", { d: "M12 6m-7 0a7 3 0 1 0 14 0a7 3 0 1 0 -14 0", key: "svg-0" }], ["path", { d: "M5 6v12c0 1.657 3.134 3 7 3s7 -1.343 7 -3v-12", key: "svg-1" }]], IconCylinder = createReactComponent("outline", "cylinder", "Cylinder", __iconNode$G);
-const __iconNode$F = [["path", { d: "M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z", key: "svg-0" }], ["path", { d: "M11 4h2", key: "svg-1" }], ["path", { d: "M12 17v.01", key: "svg-2" }]], IconDeviceMobile = createReactComponent("outline", "device-mobile", "DeviceMobile", __iconNode$F);
-const __iconNode$E = [["path", { d: "M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6", key: "svg-0" }], ["path", { d: "M11 13l9 -9", key: "svg-1" }], ["path", { d: "M15 4h5v5", key: "svg-2" }]], IconExternalLink = createReactComponent("outline", "external-link", "ExternalLink", __iconNode$E);
-const __iconNode$D = [["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-0" }], ["path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z", key: "svg-1" }], ["path", { d: "M10 13l-1 2l1 2", key: "svg-2" }], ["path", { d: "M14 13l1 2l-1 2", key: "svg-3" }]], IconFileCode = createReactComponent("outline", "file-code", "FileCode", __iconNode$D);
-const __iconNode$C = [["path", { d: "M4 21v-4a3 3 0 0 1 3 -3h5", key: "svg-0" }], ["path", { d: "M9 17l3 -3l-3 -3", key: "svg-1" }], ["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-2" }], ["path", { d: "M5 11v-6a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-9.5", key: "svg-3" }]], IconFileSymlink = createReactComponent("outline", "file-symlink", "FileSymlink", __iconNode$C);
+const __iconNode$S = [["path", { d: "M12 9v4", key: "svg-0" }], ["path", { d: "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z", key: "svg-1" }], ["path", { d: "M12 16h.01", key: "svg-2" }]], IconAlertTriangle = createReactComponent("outline", "alert-triangle", "AlertTriangle", __iconNode$S);
+const __iconNode$R = [["path", { d: "M7 7l10 10", key: "svg-0" }], ["path", { d: "M17 8l0 9l-9 0", key: "svg-1" }]], IconArrowDownRight = createReactComponent("outline", "arrow-down-right", "ArrowDownRight", __iconNode$R);
+const __iconNode$Q = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M5 12l6 6", key: "svg-1" }], ["path", { d: "M5 12l6 -6", key: "svg-2" }]], IconArrowLeft = createReactComponent("outline", "arrow-left", "ArrowLeft", __iconNode$Q);
+const __iconNode$P = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M13 18l6 -6", key: "svg-1" }], ["path", { d: "M13 6l6 6", key: "svg-2" }]], IconArrowRight = createReactComponent("outline", "arrow-right", "ArrowRight", __iconNode$P);
+const __iconNode$O = [["path", { d: "M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11", key: "svg-0" }]], IconBolt = createReactComponent("outline", "bolt", "Bolt", __iconNode$O);
+const __iconNode$N = [["path", { d: "M4 8h16", key: "svg-0" }], ["path", { d: "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", key: "svg-1" }], ["path", { d: "M8 4v4", key: "svg-2" }]], IconBrowser = createReactComponent("outline", "browser", "Browser", __iconNode$N);
+const __iconNode$M = [["path", { d: "M5 12l5 5l10 -10", key: "svg-0" }]], IconCheck = createReactComponent("outline", "check", "Check", __iconNode$M);
+const __iconNode$L = [["path", { d: "M6 9l6 6l6 -6", key: "svg-0" }]], IconChevronDown = createReactComponent("outline", "chevron-down", "ChevronDown", __iconNode$L);
+const __iconNode$K = [["path", { d: "M15 6l-6 6l6 6", key: "svg-0" }]], IconChevronLeft = createReactComponent("outline", "chevron-left", "ChevronLeft", __iconNode$K);
+const __iconNode$J = [["path", { d: "M9 6l6 6l-6 6", key: "svg-0" }]], IconChevronRight = createReactComponent("outline", "chevron-right", "ChevronRight", __iconNode$J);
+const __iconNode$I = [["path", { d: "M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z", key: "svg-0" }], ["path", { d: "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", key: "svg-1" }]], IconCopy = createReactComponent("outline", "copy", "Copy", __iconNode$I);
+const __iconNode$H = [["path", { d: "M12 6m-7 0a7 3 0 1 0 14 0a7 3 0 1 0 -14 0", key: "svg-0" }], ["path", { d: "M5 6v12c0 1.657 3.134 3 7 3s7 -1.343 7 -3v-12", key: "svg-1" }]], IconCylinder = createReactComponent("outline", "cylinder", "Cylinder", __iconNode$H);
+const __iconNode$G = [["path", { d: "M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14z", key: "svg-0" }], ["path", { d: "M11 4h2", key: "svg-1" }], ["path", { d: "M12 17v.01", key: "svg-2" }]], IconDeviceMobile = createReactComponent("outline", "device-mobile", "DeviceMobile", __iconNode$G);
+const __iconNode$F = [["path", { d: "M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6", key: "svg-0" }], ["path", { d: "M11 13l9 -9", key: "svg-1" }], ["path", { d: "M15 4h5v5", key: "svg-2" }]], IconExternalLink = createReactComponent("outline", "external-link", "ExternalLink", __iconNode$F);
+const __iconNode$E = [["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-0" }], ["path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z", key: "svg-1" }], ["path", { d: "M10 13l-1 2l1 2", key: "svg-2" }], ["path", { d: "M14 13l1 2l-1 2", key: "svg-3" }]], IconFileCode = createReactComponent("outline", "file-code", "FileCode", __iconNode$E);
+const __iconNode$D = [["path", { d: "M4 21v-4a3 3 0 0 1 3 -3h5", key: "svg-0" }], ["path", { d: "M9 17l3 -3l-3 -3", key: "svg-1" }], ["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-2" }], ["path", { d: "M5 11v-6a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-9.5", key: "svg-3" }]], IconFileSymlink = createReactComponent("outline", "file-symlink", "FileSymlink", __iconNode$D);
+const __iconNode$C = [["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: "M9 9l1 0", key: "svg-2" }], ["path", { d: "M9 13l6 0", key: "svg-3" }], ["path", { d: "M9 17l6 0", key: "svg-4" }]], IconFileText = createReactComponent("outline", "file-text", "FileText", __iconNode$C);
 const __iconNode$B = [["path", { d: "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", key: "svg-0" }], ["path", { d: "M4 8v-2a2 2 0 0 1 2 -2h2", key: "svg-1" }], ["path", { d: "M4 16v2a2 2 0 0 0 2 2h2", key: "svg-2" }], ["path", { d: "M16 4h2a2 2 0 0 1 2 2v2", key: "svg-3" }], ["path", { d: "M16 20h2a2 2 0 0 0 2 -2v-2", key: "svg-4" }]], IconFocusCentered = createReactComponent("outline", "focus-centered", "FocusCentered", __iconNode$B);
 const __iconNode$A = [["path", { d: "M5 19l2.757 -7.351a1 1 0 0 1 .936 -.649h12.307a1 1 0 0 1 .986 1.164l-.996 5.211a2 2 0 0 1 -1.964 1.625h-14.026a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2", key: "svg-0" }]], IconFolderOpen = createReactComponent("outline", "folder-open", "FolderOpen", __iconNode$A);
 const __iconNode$z = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 16v.01", key: "svg-1" }], ["path", { d: "M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483", key: "svg-2" }]], IconHelpCircle = createReactComponent("outline", "help-circle", "HelpCircle", __iconNode$z);
@@ -459,7 +460,9 @@ const ShapeIcons = {
   person: IconUser,
   queue: IconReorder,
   rectangle: IconRectangularPrism,
-  storage: IconCylinder
+  storage: IconCylinder,
+  bucket: IconCylinder,
+  document: IconFileText
 };
 function IconOrShapeRenderer({
   element,
@@ -880,7 +883,7 @@ function useIsReducedGraphics() {
   const isReduced = useContext(ReduceGraphicsModeCtx);
   return isReduced === null && console.warn("ReduceGraphicsMode is not provided"), isReduced ?? !1;
 }
-const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext(
+const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext$1(
   "PanningAtomSafeCtx is not provided"
 );
 function RootContainer({
@@ -918,7 +921,7 @@ const defaultHandlers = {
   onEdgeContextMenu: null,
   onCanvasClick: null,
   onCanvasDblClick: null,
-  onBurgerMenuClick: null,
+  onLogoClick: null,
   onOpenSource: null,
   onInitialized: null,
   onLayoutTypeChange: null
@@ -1117,8 +1120,8 @@ function useOptionalLikeC4EditorPort() {
 function useId() {
   return useId$1().replace("mantine-", "likec4-");
 }
-var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,WebkitTextFillColor,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,cursor,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_shapeSizeXs,_shapeSizeSm,_shapeSizeMd,_shapeSizeLg,_shapeSizeXl,_shapeRectangle,_shapePerson,_shapeBrowser,_shapeMobile,_shapeCylinder,_shapeStorage,_shapeQueue,_notDisabled,_reduceGraphics,_reduceGraphicsOnPan,_noReduceGraphics,_whenPanning,_smallZoom,_compoundTransparent,_edgeActive,_whenHovered,_whenSelectable,_whenSelected,_whenDimmed,_whenFocused,_p3,_srgb,_rec2020,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,xsToSm,xsToMd,xsToLg,xsToXl,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,@/xs,@/sm,@/md,@/lg,@likec4-root/xs,@likec4-root/sm,@likec4-root/md,@likec4-root/lg,@likec4-dialog/xs,@likec4-dialog/sm,@likec4-dialog/md,@likec4-dialog/lg,textStyle,layerStyle,animationStyle", userGenerated = userGeneratedStr.split(","), cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical", allCssProperties = cssPropertiesStr.split(",").concat(userGenerated), properties = new Map(allCssProperties.map((prop) => [prop, !0])), cssPropertySelectorRegex = /&|@/, isCssProperty = /* @__PURE__ */ memo((prop) => properties.has(prop) || prop.startsWith("--") || cssPropertySelectorRegex.test(prop));
-const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop), composeShouldForwardProps = (tag, shouldForwardProp) => tag.__shouldForwardProps__ && shouldForwardProp ? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp(propName) : shouldForwardProp, composeCvaFn = (cvaA, cvaB) => {
+var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,WebkitTextFillColor,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,cursor,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_shapeSizeXs,_shapeSizeSm,_shapeSizeMd,_shapeSizeLg,_shapeSizeXl,_shapeRectangle,_shapePerson,_shapeBrowser,_shapeMobile,_shapeCylinder,_shapeStorage,_shapeQueue,_shapeBucket,_shapeDocument,_notDisabled,_reduceGraphics,_reduceGraphicsOnPan,_noReduceGraphics,_whenPanning,_smallZoom,_compoundTransparent,_edgeActive,_whenHovered,_whenSelectable,_whenSelected,_whenDimmed,_whenFocused,_p3,_srgb,_rec2020,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,xsToSm,xsToMd,xsToLg,xsToXl,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,@/xs,@/sm,@/md,@/lg,@likec4-root/xs,@likec4-root/sm,@likec4-root/md,@likec4-root/lg,@likec4-dialog/xs,@likec4-dialog/sm,@likec4-dialog/md,@likec4-dialog/lg,textStyle,layerStyle,animationStyle", userGenerated = userGeneratedStr.split(","), cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical", allCssProperties = cssPropertiesStr.split(",").concat(userGenerated), properties = new Map(allCssProperties.map((prop) => [prop, !0])), cssPropertySelectorRegex = /&|@/, isCssProperty = /* @__PURE__ */ memo((prop) => properties.has(prop) || prop.startsWith("--") || cssPropertySelectorRegex.test(prop));
+const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop), composeShouldForwardProps = (tag, shouldForwardProp2) => tag.__shouldForwardProps__ && shouldForwardProp2 ? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp2(propName) : shouldForwardProp2, composeCvaFn = (cvaA, cvaB) => {
   if (cvaA && !cvaB) return cvaA;
   if (!cvaA && cvaB) return cvaB;
   if (cvaA.__cva__ && cvaB.__cva__ || cvaA.__recipe__ && cvaB.__recipe__) return cvaA.merge(cvaB);
@@ -1126,10 +1129,10 @@ const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(pr
   throw TypeError.captureStackTrace?.(error), error;
 }, getDisplayName = (Component) => typeof Component == "string" ? Component : Component?.displayName || Component?.name || "Component";
 function styledFn(Dynamic, configOrCva = {}, options = {}) {
-  const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva), forwardFn = options.shouldForwardProp || defaultShouldForwardProp, shouldForwardProp = (prop) => options.forwardProps?.includes(prop) ? !0 : forwardFn(prop, cvaFn.variantKeys), defaultProps = Object.assign(
+  const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva), forwardFn = options.shouldForwardProp || defaultShouldForwardProp, shouldForwardProp2 = (prop) => options.forwardProps?.includes(prop) ? !0 : forwardFn(prop, cvaFn.variantKeys), defaultProps = Object.assign(
     options.dataAttr && configOrCva.__name__ ? { "data-recipe": configOrCva.__name__ } : {},
     options.defaultProps
-  ), __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn), __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp), __base__ = Dynamic.__base__ || Dynamic, StyledComponent = /* @__PURE__ */ forwardRef(function(props, ref) {
+  ), __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn), __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp2), __base__ = Dynamic.__base__ || Dynamic, StyledComponent = /* @__PURE__ */ forwardRef(function(props, ref) {
     const { as: Element = __base__, unstyled, children, ...restProps } = props, combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps]), [htmlProps2, forwardedProps, variantProps, styleProps, elementProps] = useMemo(() => splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty), [combinedProps]);
     function recipeClass() {
       const { css: cssStyles, ...propStyles } = styleProps, compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
@@ -1154,7 +1157,7 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
       className: classes2()
     }, children ?? combinedProps.children);
   }), name = getDisplayName(__base__);
-  return StyledComponent.displayName = `styled.${name}`, StyledComponent.__cva__ = __cvaFn__, StyledComponent.__base__ = __base__, StyledComponent.__shouldForwardProps__ = shouldForwardProp, StyledComponent;
+  return StyledComponent.displayName = `styled.${name}`, StyledComponent.__cva__ = __cvaFn__, StyledComponent.__base__ = __base__, StyledComponent.__shouldForwardProps__ = shouldForwardProp2, StyledComponent;
 }
 function createJsxFactory() {
   const cache = /* @__PURE__ */ new Map();
@@ -1167,7 +1170,68 @@ function createJsxFactory() {
     }
   });
 }
-const styled = /* @__PURE__ */ createJsxFactory(), boxConfig = {
+const styled = /* @__PURE__ */ createJsxFactory();
+function createSafeContext(contextName) {
+  const Context = createContext(void 0);
+  return [Context, (componentName, slot) => {
+    const context2 = useContext(Context);
+    if (context2 === void 0) {
+      const componentInfo = componentName ? `Component "${componentName}"` : "A component", slotInfo = slot ? ` (slot: "${slot}")` : "";
+      throw new Error(
+        `${componentInfo}${slotInfo} cannot access ${contextName} because it's missing its Provider.`
+      );
+    }
+    return context2;
+  }];
+}
+function createStyleContext(recipe) {
+  const isConfigRecipe = "__recipe__" in recipe, recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : void 0, contextName = recipeName ? `createStyleContext("${recipeName}")` : "createStyleContext", [StyleContext, useStyleContext] = createSafeContext(contextName), svaFn = isConfigRecipe ? recipe : sva(recipe.config), getResolvedProps = (props, slotStyles) => {
+    const { unstyled, ...restProps } = props;
+    return unstyled ? restProps : isConfigRecipe ? { ...restProps, className: cx(slotStyles, restProps.className) } : { ...slotStyles, ...restProps };
+  };
+  return {
+    withRootProvider: (Component, options) => {
+      const WithRootProvider = (props) => {
+        const [variantProps, otherProps] = svaFn.splitVariantProps(props), slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps);
+        slotStyles._classNameMap = svaFn.classNameMap;
+        const mergedProps = options?.defaultProps ? { ...options.defaultProps, ...otherProps } : otherProps;
+        return createElement(StyleContext.Provider, {
+          value: slotStyles,
+          children: createElement(Component, mergedProps)
+        });
+      }, componentName = getDisplayName(Component);
+      return WithRootProvider.displayName = `withRootProvider(${componentName})`, WithRootProvider;
+    },
+    withProvider: (Component, slot, options) => {
+      const StyledComponent = styled(Component, {}, options), WithProvider = forwardRef((props, ref) => {
+        const [variantProps, restProps] = svaFn.splitVariantProps(props), slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps);
+        slotStyles._classNameMap = svaFn.classNameMap;
+        const propsWithClass = { ...restProps, className: restProps.className ?? options?.defaultProps?.className }, resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot]);
+        return createElement(StyleContext.Provider, {
+          value: slotStyles,
+          children: createElement(StyledComponent, {
+            ...resolvedProps,
+            className: cx(resolvedProps.className, slotStyles._classNameMap[slot]),
+            ref
+          })
+        });
+      }), componentName = getDisplayName(Component);
+      return WithProvider.displayName = `withProvider(${componentName})`, WithProvider;
+    },
+    withContext: (Component, slot, options) => {
+      const StyledComponent = styled(Component, {}, options), componentName = getDisplayName(Component), WithContext = forwardRef((props, ref) => {
+        const slotStyles = useStyleContext(componentName, slot), propsWithClass = { ...props, className: props.className ?? options?.defaultProps?.className }, resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot]);
+        return createElement(StyledComponent, {
+          ...resolvedProps,
+          className: cx(resolvedProps.className, slotStyles._classNameMap[slot]),
+          ref
+        });
+      });
+      return WithContext.displayName = `withContext(${componentName})`, WithContext;
+    }
+  };
+}
+const boxConfig = {
   transform(props) {
     return props;
   }
@@ -1232,8 +1296,8 @@ const HStack = /* @__PURE__ */ forwardRef(function(props, ref) {
 }, getContainerStyle = (styles = {}) => {
   const _styles = getPatternStyles(containerConfig, styles);
   return containerConfig.transform(_styles, patternFns);
-}, container$4 = (styles) => css(getContainerStyle(styles));
-container$4.raw = getContainerStyle;
+}, container$3 = (styles) => css(getContainerStyle(styles));
+container$3.raw = getContainerStyle;
 const bleedConfig = {
   transform(props, { map, isCssUnit: isCssUnit2, isCssVar: isCssVar2 }) {
     const { inline, block, ...rest } = props, valueFn = (v) => isCssUnit2(v) || isCssVar2(v) ? v : `token(spacing.${v}, ${v})`;
@@ -1685,7 +1749,7 @@ const diagramActorRef$1 = function(system) {
   return system.get("diagram");
 }, getDiagramContext = function(system) {
   return system.get("diagram").getSnapshot().context;
-}, raiseSync = () => machine$3.raise({ type: "sync" }, { delay: 200, id: "sync" }), cancelSync = () => machine$3.cancel("sync"), reschedule = (delay2 = 50) => machine$3.raise(({ event }) => event, { delay: delay2 }), isLayoutChange = (change) => change.op === "reset-manual-layout" || change.op === "save-view-snapshot", withoutSnapshotChanges = n$2(e$4(isLayoutChange)), saveStateBeforeEdit = () => machine$3.assign(({ system }) => {
+}, raiseSync = () => machine$4.raise({ type: "sync" }, { delay: 200, id: "sync" }), cancelSync = () => machine$4.cancel("sync"), reschedule = (delay2 = 50) => machine$4.raise(({ event }) => event, { delay: delay2 }), isLayoutChange = (change) => change.op === "reset-manual-layout" || change.op === "save-view-snapshot", withoutSnapshotChanges = n$2(e$4(isLayoutChange)), saveStateBeforeEdit = () => machine$4.assign(({ system }) => {
   const parentContext = getDiagramContext(system);
   return {
     beforeEditing: {
@@ -1709,11 +1773,11 @@ const diagramActorRef$1 = function(system) {
       synched: !1
     }
   };
-}), startEditing$1 = () => machine$3.enqueueActions(({ enqueue, event }) => {
+}), startEditing$1 = () => machine$4.enqueueActions(({ enqueue, event }) => {
   enqueue(saveStateBeforeEdit()), event.type === "edit.start" && enqueue.assign({
     editing: event.subject
   });
-}), stopHotkey = () => machine$3.stopChild("hotkey"), ensureHotKey = () => machine$3.enqueueActions(({ check, enqueue, self }) => {
+}), stopHotkey = () => machine$4.stopChild("hotkey"), ensureHotKey = () => machine$4.enqueueActions(({ check, enqueue, self }) => {
   const hasUndo = check("can undo"), hotkey = self.getSnapshot().children.hotkey;
   if (!hasUndo && hotkey) {
     enqueue.stopChild(hotkey);
@@ -1722,7 +1786,7 @@ const diagramActorRef$1 = function(system) {
   hasUndo && !hotkey && enqueue.spawnChild("hotkey", {
     id: "hotkey"
   });
-}), pushHistory = () => machine$3.assign(({ context: context2 }) => {
+}), pushHistory = () => machine$4.assign(({ context: context2 }) => {
   const snapshot = context2.beforeEditing;
   return snapshot ? {
     beforeEditing: null,
@@ -1734,7 +1798,7 @@ const diagramActorRef$1 = function(system) {
   } : {
     editing: null
   };
-}), stopEditing$1 = () => machine$3.enqueueActions(({ event, enqueue }) => {
+}), stopEditing$1 = () => machine$4.enqueueActions(({ event, enqueue }) => {
   if (event.type === "edit.finish" && event.wasChanged) {
     enqueue(pushHistory()), enqueue(raiseSync());
     return;
@@ -1743,7 +1807,7 @@ const diagramActorRef$1 = function(system) {
     beforeEditing: null,
     editing: null
   });
-}), markHistoryAsSynched = () => machine$3.assign(({ context: context2 }) => ({
+}), markHistoryAsSynched = () => machine$4.assign(({ context: context2 }) => ({
   beforeEditing: context2.beforeEditing && context2.beforeEditing.synched === !1 ? {
     ...context2.beforeEditing,
     synched: !0
@@ -1752,11 +1816,11 @@ const diagramActorRef$1 = function(system) {
     ...i,
     synched: !0
   }))
-})), popHistory = () => machine$3.assign(({ context: context2 }) => context2.history.length <= 1 ? {
+})), popHistory = () => machine$4.assign(({ context: context2 }) => context2.history.length <= 1 ? {
   history: []
 } : {
   history: context2.history.slice(0, context2.history.length - 1)
-}), undo = () => machine$3.enqueueActions(({ context: context2, enqueue, system }) => {
+}), undo = () => machine$4.enqueueActions(({ context: context2, enqueue, system }) => {
   const lastHistoryItem = t$b(context2.history);
   if (!lastHistoryItem)
     return;
@@ -1771,7 +1835,7 @@ const diagramActorRef$1 = function(system) {
   }), enqueue.assign({
     pendingChanges: []
   }), lastHistoryItem.synched ? enqueue.raise({ type: "change", change: lastHistoryItem.change }, { delay: 50 }) : enqueue(raiseSync());
-}), addSnapshotToPendingChanges = () => machine$3.assign(({ context: context2, system }) => {
+}), addSnapshotToPendingChanges = () => machine$4.assign(({ context: context2, system }) => {
   const parentContext = getDiagramContext(system), change = createViewChange(parentContext);
   return {
     pendingChanges: [
@@ -1801,7 +1865,7 @@ const diagramActorRef$1 = function(system) {
   }
 ), diagramActorRef = function(params) {
   return params.system.get("diagram");
-}, machine$3 = setup({
+}, machine$4 = setup({
   delays: {
     "350ms": 350,
     waitBeforeSync: 2e3
@@ -1822,7 +1886,7 @@ const diagramActorRef$1 = function(system) {
   pending: { target: "#pending" },
   applyLatestToManual: { target: "#applyLatestToManual" },
   executeChanges: { target: "#executeChanges" }
-}, idle$1 = machine$3.createStateConfig({
+}, idle$1 = machine$4.createStateConfig({
   id: "idle",
   on: {
     sync: {
@@ -1832,7 +1896,7 @@ const diagramActorRef$1 = function(system) {
       ...to.editing
     }
   }
-}), editing = machine$3.createStateConfig({
+}), editing = machine$4.createStateConfig({
   id: "editing",
   tags: "pending",
   entry: [
@@ -1853,7 +1917,7 @@ const diagramActorRef$1 = function(system) {
       ...to.idle
     }
   }
-}), pending = machine$3.createStateConfig({
+}), pending = machine$4.createStateConfig({
   id: "pending",
   tags: ["pending"],
   entry: ensureHotKey(),
@@ -1878,13 +1942,13 @@ const diagramActorRef$1 = function(system) {
       ...to.executeChanges
     }
   }
-}), afterEdit = machine$3.createStateConfig({
+}), afterEdit = machine$4.createStateConfig({
   id: "afterEdit",
   always: [
     { guard: "has pending", ...to.pending },
     { ...to.idle }
   ]
-}), applyLatestToManual = machine$3.createStateConfig({
+}), applyLatestToManual = machine$4.createStateConfig({
   id: "applyLatestToManual",
   entry: [
     cancelSync(),
@@ -1952,7 +2016,7 @@ const diagramActorRef$1 = function(system) {
       }
     }
   }
-}), executeChanges = machine$3.createStateConfig({
+}), executeChanges = machine$4.createStateConfig({
   id: "executeChanges",
   entry: [
     assign(({ event, context: context2 }) => {
@@ -2009,7 +2073,7 @@ const diagramActorRef$1 = function(system) {
       actions: reschedule()
     }
   }
-}), _editorActorLogic = machine$3.createMachine({
+}), _editorActorLogic = machine$4.createMachine({
   id: "editor",
   context: ({ input: input2 }) => ({
     viewId: input2.viewId,
@@ -2822,7 +2886,7 @@ const findRootSubject = (nodes) => nodes.find(
     return updateXYData();
   const duration = 300;
   return xyflow2.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration, interpolate: "smooth" }), await delay(duration), await xyflow2.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom }), updateXYData();
-}), machine$2 = setup({
+}), machine$3 = setup({
   actors: {
     layouter
   },
@@ -2831,13 +2895,13 @@ const findRootSubject = (nodes) => nodes.find(
     isReady: ({ context: context2 }) => context2.xyflow !== null && context2.xystore !== null && context2.layouted !== null,
     anotherSubject: ({ context: context2, event }) => event.type === "update.view" ? context2.layouted?.subject !== event.layouted.subject : !1
   }
-}), xyflowInit = () => machine$2.assign(({ event }) => (assertEvent(event, "xyflow.init"), {
+}), xyflowInit = () => machine$3.assign(({ event }) => (assertEvent(event, "xyflow.init"), {
   xyflow: event.instance,
   xystore: event.store
-})), updateView$1 = () => machine$2.assign(({ event }) => (assertEvent(event, "update.view"), {
+})), updateView$2 = () => machine$3.assign(({ event }) => (assertEvent(event, "update.view"), {
   layouted: event.layouted,
   ...viewToNodesEdge(event.layouted)
-})), xyflowUpdateNodeInternals = () => machine$2.createAction(({ context: context2 }) => {
+})), xyflowUpdateNodeInternals = () => machine$3.createAction(({ context: context2 }) => {
   invariant(context2.xystore, "xystore is not initialized");
   const { domNode, updateNodeInternals } = context2.xystore.getState(), nodeIds = new Set(context2.xyedges.flatMap((e2) => [e2.source, e2.target]));
   if (nodeIds.size === 0 || !domNode)
@@ -2848,7 +2912,7 @@ const findRootSubject = (nodes) => nodes.find(
     nodeId && nodeIds.has(nodeId) && updates.set(nodeId, { id: nodeId, nodeElement, force: !0 });
   }
   updateNodeInternals(updates, { triggerFitView: !1 });
-}), xyflowFitDiagram = (params) => machine$2.createAction(({ context: context2, event }) => {
+}), xyflowFitDiagram = (params) => machine$3.createAction(({ context: context2, event }) => {
   params ??= event.type === "fitDiagram" ? event : {};
   let { duration, bounds } = params ?? {};
   duration ??= 450;
@@ -2867,22 +2931,22 @@ const findRootSubject = (nodes) => nodes.find(
       padding: ViewPadding$1,
       ...duration > 0 && { duration, interpolate: "smooth" }
     }).catch(console.error);
-}), xyflowApplyNodeChanges = () => machine$2.assign(({ context: context2, event }) => (assertEvent(event, "xyflow.applyNodeChanges"), {
+}), xyflowApplyNodeChanges$1 = () => machine$3.assign(({ context: context2, event }) => (assertEvent(event, "xyflow.applyNodeChanges"), {
   xynodes: applyNodeChanges(event.changes, context2.xynodes)
-})), xyflowApplyEdgeChanges = () => machine$2.assign(({ context: context2, event }) => (assertEvent(event, "xyflow.applyEdgeChanges"), {
+})), xyflowApplyEdgeChanges$1 = () => machine$3.assign(({ context: context2, event }) => (assertEvent(event, "xyflow.applyEdgeChanges"), {
   xyedges: applyEdgeChanges(event.changes, context2.xyedges)
-})), openRelationshipSource = () => machine$2.enqueueActions(({ system, event }) => {
+})), openRelationshipSource = () => machine$3.enqueueActions(({ system, event }) => {
   if (event.type !== "xyflow.edgeClick")
     return;
   const diagramActor = typedSystem(system).diagramActorRef, relations = event.edge.data.relations;
   t$1(relations, 1) && diagramActor.send({ type: "open.source", relation: relations[0] });
-}), dispose = () => machine$2.assign({
+}), dispose$1 = () => machine$3.assign({
   xyflow: null,
   layouted: null,
   xystore: null,
   xyedges: [],
   xynodes: []
-}), _relationshipsBrowserLogic = machine$2.createMachine({
+}), _relationshipsBrowserLogic = machine$3.createMachine({
   id: "relationships-browser",
   context: ({ input: input2 }) => ({
     subject: input2.subject,
@@ -2901,10 +2965,10 @@ const findRootSubject = (nodes) => nodes.find(
   initial: "initializing",
   on: {
     "xyflow.applyNodeChanges": {
-      actions: xyflowApplyNodeChanges()
+      actions: xyflowApplyNodeChanges$1()
     },
     "xyflow.applyEdgeChanges": {
-      actions: xyflowApplyEdgeChanges()
+      actions: xyflowApplyEdgeChanges$1()
     }
   },
   states: {
@@ -2915,7 +2979,7 @@ const findRootSubject = (nodes) => nodes.find(
           target: "isReady"
         },
         "update.view": {
-          actions: updateView$1(),
+          actions: updateView$2(),
           target: "isReady"
         },
         stop: "closed",
@@ -2979,7 +3043,7 @@ const findRootSubject = (nodes) => nodes.find(
           actions: xyflowFitDiagram()
         },
         "update.view": {
-          actions: updateView$1(),
+          actions: updateView$2(),
           target: ".layouting"
         },
         "change.scope": {
@@ -3098,10 +3162,10 @@ const findRootSubject = (nodes) => nodes.find(
     closed: {
       id: "closed",
       type: "final",
-      entry: dispose()
+      entry: dispose$1()
     }
   },
-  exit: dispose()
+  exit: dispose$1()
 }), relationshipsBrowserLogic = _relationshipsBrowserLogic, _elementDetailsLogic = setup({
   actors: {
     relationshipsBrowserLogic
@@ -3180,53 +3244,46 @@ function layoutResultToXYFlow(layout) {
         parentId: parent.id
       }
     }, fqn2 = node2.modelRef, navigateTo = { navigateTo: node2.navigateTo ?? null };
-    switch (!0) {
-      case isCompound: {
-        xynodes.push(
-          {
-            ...base,
-            type: "compound",
-            data: {
-              id,
-              column: node2.column,
-              title: node2.title,
-              color: node2.color,
-              style: node2.style,
-              depth: node2.depth ?? 0,
-              icon: node2.icon ?? "none",
-              ports: node2.ports,
-              fqn: fqn2,
-              ...navigateTo
-            }
-          }
-        );
-        break;
+    !0 === isCompound ? xynodes.push(
+      {
+        ...base,
+        type: "compound",
+        data: {
+          id,
+          column: node2.column,
+          title: node2.title,
+          color: node2.color,
+          style: node2.style,
+          depth: node2.depth ?? 0,
+          icon: node2.icon ?? "none",
+          ports: node2.ports,
+          fqn: fqn2,
+          ...navigateTo
+        }
       }
-      default:
-        xynodes.push(
-          {
-            ...base,
-            type: "element",
-            data: {
-              id,
-              column: node2.column,
-              fqn: fqn2,
-              title: node2.title,
-              technology: node2.technology,
-              description: node2.description ?? null,
-              height: node2.height,
-              width: node2.width,
-              color: node2.color,
-              shape: node2.shape,
-              icon: node2.icon ?? "none",
-              ports: node2.ports,
-              style: node2.style,
-              tags: node2.tags,
-              ...navigateTo
-            }
-          }
-        );
-    }
+    ) : xynodes.push(
+      {
+        ...base,
+        type: "element",
+        data: {
+          id,
+          column: node2.column,
+          fqn: fqn2,
+          title: node2.title,
+          technology: node2.technology,
+          description: node2.description ?? null,
+          height: node2.height,
+          width: node2.width,
+          color: node2.color,
+          shape: node2.shape,
+          icon: node2.icon ?? "none",
+          ports: node2.ports,
+          style: node2.style,
+          tags: node2.tags,
+          ...navigateTo
+        }
+      }
+    );
   }
   for (const {
     source,
@@ -3521,7 +3578,7 @@ const ViewPadding = {
   return document.body.addEventListener("keydown", handler, { capture: !0 }), () => {
     document.body.removeEventListener("keydown", handler, { capture: !0 });
   };
-}), machine$1 = setup({
+}), machine$2 = setup({
   actors: {
     relationshipDetails: relationshipDetailsLogic,
     elementDetails: elementDetailsLogic,
@@ -3534,14 +3591,14 @@ const ViewPadding = {
     "last: is relationshipDetails?": ({ context: context2 }) => t$b(context2.overlays)?.type === "relationshipDetails",
     "last: is relationshipsBrowser?": ({ context: context2 }) => t$b(context2.overlays)?.type === "relationshipsBrowser"
   }
-}), closeLastOverlay = () => machine$1.enqueueActions(({ context: context2, enqueue }) => {
+}), closeLastOverlay = () => machine$2.enqueueActions(({ context: context2, enqueue }) => {
   if (context2.overlays.length === 0)
     return;
   const lastOverlay = t$b(context2.overlays)?.id;
   lastOverlay && (enqueue.sendTo(lastOverlay, { type: "close" }), enqueue.stopChild(lastOverlay), enqueue.assign({
     overlays: context2.overlays.filter((o) => o.id !== lastOverlay)
   }));
-}), closeSpecificOverlay = () => machine$1.enqueueActions(({ context: context2, enqueue, event }) => {
+}), closeSpecificOverlay = () => machine$2.enqueueActions(({ context: context2, enqueue, event }) => {
   assertEvent(event, "close");
   const actorId = event.actorId;
   if (!e$7(actorId))
@@ -3550,11 +3607,11 @@ const ViewPadding = {
   toClose && (enqueue.sendTo(toClose, { type: "close" }), enqueue.stopChild(toClose), enqueue.assign({
     overlays: context2.overlays.filter((o) => o.id !== toClose)
   }));
-}), closeAllOverlays$1 = () => machine$1.enqueueActions(({ context: context2, enqueue }) => {
+}), closeAllOverlays$1 = () => machine$2.enqueueActions(({ context: context2, enqueue }) => {
   for (const { id } of t$j(context2.overlays))
     enqueue.sendTo(id, { type: "close" }), enqueue.stopChild(id);
   enqueue.assign({ overlays: [] });
-}), openElementDetails$1 = () => machine$1.enqueueActions(({ context: context2, enqueue, event }) => {
+}), openElementDetails$1 = () => machine$2.enqueueActions(({ context: context2, enqueue, event }) => {
   if (assertEvent(event, "open.elementDetails"), context2.overlays.some((o) => o.type === "elementDetails" && o.subject === event.subject))
     return;
   const id = `elementDetails-${context2.seq}`;
@@ -3573,7 +3630,7 @@ const ViewPadding = {
       }
     ]
   });
-}), openRelationshipDetails = () => machine$1.enqueueActions(({ context: context2, enqueue, event }) => {
+}), openRelationshipDetails = () => machine$2.enqueueActions(({ context: context2, enqueue, event }) => {
   assertEvent(event, "open.relationshipDetails");
   const currentOverlay = t$b(context2.overlays);
   if (currentOverlay?.type === "relationshipDetails") {
@@ -3598,7 +3655,7 @@ const ViewPadding = {
       }
     ]
   });
-}), openRelationshipsBrowser = () => machine$1.enqueueActions(({ context: context2, enqueue, event }) => {
+}), openRelationshipsBrowser = () => machine$2.enqueueActions(({ context: context2, enqueue, event }) => {
   assertEvent(event, "open.relationshipsBrowser");
   const currentOverlay = t$b(context2.overlays);
   if (currentOverlay?.type === "relationshipsBrowser") {
@@ -3625,7 +3682,7 @@ const ViewPadding = {
       }
     ]
   });
-}), openOverlay$1 = () => machine$1.enqueueActions(({ enqueue, event }) => {
+}), openOverlay$1 = () => machine$2.enqueueActions(({ enqueue, event }) => {
   switch (assertEvent(event, [
     "open.elementDetails",
     "open.relationshipDetails",
@@ -3641,11 +3698,11 @@ const ViewPadding = {
       enqueue(openRelationshipsBrowser());
       break;
   }
-}), listenToEsc = () => machine$1.spawnChild("hotkey", {
+}), listenToEsc = () => machine$2.spawnChild("hotkey", {
   id: "hotkey"
-}), stopListeningToEsc = () => machine$1.stopChild("hotkey"), checkState = () => machine$1.enqueueActions(({ enqueue, context: context2 }) => {
+}), stopListeningToEsc = () => machine$2.stopChild("hotkey"), checkState = () => machine$2.enqueueActions(({ enqueue, context: context2 }) => {
   context2.overlays.length === 0 && enqueue.raise({ type: "close" });
-}), _overlaysActorLogic = machine$1.createMachine({
+}), _overlaysActorLogic = machine$2.createMachine({
   id: "overlays",
   context: () => ({
     seq: 1,
@@ -3817,7 +3874,7 @@ const ViewPadding = {
     enableCompareWithLatest,
     enableReadOnly
   };
-}, isReadOnly = (context2) => deriveToggledFeatures(context2).enableReadOnly, machine = setup({
+}, isReadOnly = (context2) => deriveToggledFeatures(context2).enableReadOnly, machine$1 = setup({
   actors: {
     hotkeyActorLogic,
     overlaysActorLogic,
@@ -4094,7 +4151,7 @@ const createRecipe = (name, defaultVariants, compoundVariants) => {
     "middlePoint",
     "likec4-edge__middlePoint"
   ]
-], edgePathSlotFns = /* @__PURE__ */ edgePathSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, edgePathDefaultVariants, getSlotCompoundVariant(edgePathCompoundVariants, slotName))]), edgePathFn = memo((props = {}) => Object.fromEntries(edgePathSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))), edgePathVariantKeys = [], getVariantProps$1 = (variants) => ({ ...edgePathDefaultVariants, ...compact(variants) }), edgePath = /* @__PURE__ */ Object.assign(edgePathFn, {
+], edgePathSlotFns = /* @__PURE__ */ edgePathSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, edgePathDefaultVariants, getSlotCompoundVariant(edgePathCompoundVariants, slotName))]), edgePathFn = memo((props = {}) => Object.fromEntries(edgePathSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))), edgePathVariantKeys = [], getVariantProps$2 = (variants) => ({ ...edgePathDefaultVariants, ...compact(variants) }), edgePath = /* @__PURE__ */ Object.assign(edgePathFn, {
   __recipe__: !1,
   __name__: "edgePath",
   raw: (props) => props,
@@ -4104,7 +4161,21 @@ const createRecipe = (name, defaultVariants, compoundVariants) => {
   splitVariantProps(props) {
     return splitProps(props, edgePathVariantKeys);
   },
-  getVariantProps: getVariantProps$1
+  getVariantProps: getVariantProps$2
+}), elementNodeFn = /* @__PURE__ */ createRecipe("likec4-element-node", {}, []), elementNodeVariantMap = {}, elementNodeVariantKeys = Object.keys(elementNodeVariantMap), elementNode = /* @__PURE__ */ Object.assign(memo(elementNodeFn.recipeFn), {
+  __recipe__: !0,
+  __name__: "elementNode",
+  __getCompoundVariantCss__: elementNodeFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: elementNodeVariantKeys,
+  variantMap: elementNodeVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe);
+  },
+  splitVariantProps(props) {
+    return splitProps(props, elementNodeVariantKeys);
+  },
+  getVariantProps: elementNodeFn.getVariantProps
 }), elementNodeDataFn = /* @__PURE__ */ createRecipe("likec4-element-node-data", {}, []), elementNodeDataVariantMap = {}, elementNodeDataVariantKeys = Object.keys(elementNodeDataVariantMap), elementNodeData = /* @__PURE__ */ Object.assign(memo(elementNodeDataFn.recipeFn), {
   __recipe__: !0,
   __name__: "elementNodeData",
@@ -4119,10 +4190,32 @@ const createRecipe = (name, defaultVariants, compoundVariants) => {
     return splitProps(props, elementNodeDataVariantKeys);
   },
   getVariantProps: elementNodeDataFn.getVariantProps
-}), elementShapeRecipeFn = /* @__PURE__ */ createRecipe("likec4-element-shape", {}, []), elementShapeRecipeVariantMap = {
+}), elementShapeRecipeFn = /* @__PURE__ */ createRecipe("likec4-element-shape", {
+  withBorder: !1
+}, [
+  {
+    shapetype: "html",
+    withBorder: !0,
+    css: {
+      "&": {
+        borderStyle: "solid",
+        borderWidth: "3px",
+        borderColor: "var(--likec4-palette-stroke)",
+        "--likec4-outline-size": "6px"
+      },
+      "& .likec4-shape-outline": {
+        borderRadius: "10px"
+      }
+    }
+  }
+]), elementShapeRecipeVariantMap = {
   shapetype: [
     "html",
     "svg"
+  ],
+  withBorder: [
+    "true",
+    "false"
   ]
 }, elementShapeRecipeVariantKeys = Object.keys(elementShapeRecipeVariantMap), elementShapeRecipe = /* @__PURE__ */ Object.assign(memo(elementShapeRecipeFn.recipeFn), {
   __recipe__: !0,
@@ -4273,7 +4366,7 @@ const createRecipe = (name, defaultVariants, compoundVariants) => {
   ]
 ], navigationLinkSlotFns = /* @__PURE__ */ navigationLinkSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, navigationLinkDefaultVariants, getSlotCompoundVariant(navigationLinkCompoundVariants, slotName))]), navigationLinkFn = memo((props = {}) => Object.fromEntries(navigationLinkSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))), navigationLinkVariantKeys = [
   "truncateLabel"
-], getVariantProps = (variants) => ({ ...navigationLinkDefaultVariants, ...compact(variants) }), navigationLink = /* @__PURE__ */ Object.assign(navigationLinkFn, {
+], getVariantProps$1 = (variants) => ({ ...navigationLinkDefaultVariants, ...compact(variants) }), navigationLink = /* @__PURE__ */ Object.assign(navigationLinkFn, {
   __recipe__: !1,
   __name__: "navigationLink",
   raw: (props) => props,
@@ -4288,6 +4381,47 @@ const createRecipe = (name, defaultVariants, compoundVariants) => {
   splitVariantProps(props) {
     return splitProps(props, navigationLinkVariantKeys);
   },
+  getVariantProps: getVariantProps$1
+}), navigationPanelDefaultVariants = {
+  size: "md"
+}, navigationPanelCompoundVariants = [], navigationPanelSlotNames = [
+  [
+    "root",
+    "likec4-navigation-panel__root"
+  ],
+  [
+    "body",
+    "likec4-navigation-panel__body"
+  ],
+  [
+    "logo",
+    "likec4-navigation-panel__logo"
+  ],
+  [
+    "label",
+    "likec4-navigation-panel__label"
+  ],
+  [
+    "dropdown",
+    "likec4-navigation-panel__dropdown"
+  ]
+], navigationPanelSlotFns = /* @__PURE__ */ navigationPanelSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, navigationPanelDefaultVariants, getSlotCompoundVariant(navigationPanelCompoundVariants, slotName))]), navigationPanelFn = memo((props = {}) => Object.fromEntries(navigationPanelSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))), navigationPanelVariantKeys = [
+  "size"
+], getVariantProps = (variants) => ({ ...navigationPanelDefaultVariants, ...compact(variants) }), navigationPanel = /* @__PURE__ */ Object.assign(navigationPanelFn, {
+  __recipe__: !1,
+  __name__: "navigationPanel",
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: navigationPanelVariantKeys,
+  variantMap: {
+    size: [
+      "md",
+      "lg"
+    ]
+  },
+  splitVariantProps(props) {
+    return splitProps(props, navigationPanelVariantKeys);
+  },
   getVariantProps
 }), Tooltip$5 = Tooltip$6.withProps({
   color: "dark",
@@ -4620,7 +4754,7 @@ const autolayoutButton = css({
   borderColor: "mantine.colors.gray[5]",
   borderRadius: 3,
   transform: "translate(-50%, -50%)"
-}), selector$6 = (state) => ({
+}), selector$7 = (state) => ({
   viewId: state.view.id,
   isManualLayout: state.view._layout === "manual",
   autoLayout: state.view.autoLayout
@@ -4629,7 +4763,7 @@ const autolayoutButton = css({
     autoLayout,
     viewId,
     isManualLayout
-  } = useDiagramContext(selector$6), { ref, hovered: isSpacingHovered } = useHover(), setControlRef = (name) => (node2) => {
+  } = useDiagramContext(selector$7), { ref, hovered: isSpacingHovered } = useHover(), setControlRef = (name) => (node2) => {
     controlsRefs[name] = node2, setControlsRefs(controlsRefs);
   }, setAutoLayout = (direction) => (event) => {
     event.stopPropagation(), diagram.fitDiagram(), diagram.triggerChange({
@@ -4944,92 +5078,7 @@ function useNavigationActor() {
     closeDropdown: () => actorRef.send({ type: "dropdown.dismiss" })
   }), [actorRef]);
 }
-const Logo = forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxs("svg", { ref, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 222 56", ...props, children: [
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        fill: "#5E98AF",
-        d: "M33.95 33.78V0H2.37A2.37 2.37 0 0 0 0 2.35V33.9h33.95v-.12ZM38.57 33.78H55.6v-14.6c0-1.3-1.06-2.35-2.36-2.35H38.57v16.95ZM33.95 38.37H17.04v14.6c0 1.29 1.06 2.35 2.36 2.35h14.67V38.37h-.12ZM38.57 38.37v16.95h14.67c1.3 0 2.36-1.06 2.36-2.36v-14.6H38.57Z"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        className: css({
-          fill: "[#FCFBF7]",
-          _light: {
-            fill: "[#222221]"
-          }
-        }),
-        d: "M71.61 12.08c-.06 3.61.3 29.95.23 31.87 0 1.8 0 3.6.06 5.41 0 .3.18.58.47.58 4.1.18 8.13-.17 12.22-.11 1.34.05 2.69 0 3.97 0 1.29-.06 1.4-.59 1.35-1.63-.06-1.63-.06-3.08-.06-4.65-.06-.82-.53-1.11-1.23-1.11-2.4.06-4.8-.06-7.19.06-.4.06-.82.06-1.23.06-.7-.06-.87-.24-.93-1v-.86c-.18-4.83.17-9.83.17-14.66-.06-4.07 0-7.73-.06-11.34 0-1.57 0-3.14-.05-4.65-.06-.93 0-1.92-.24-2.85-.11-.35-.29-.81-.7-.81h-5.5c-.93 0-1.22.64-1.28 1.57v4.12ZM103.81 35c-.17-6.63-.1-13.67-.05-20.24 0-2.04-.12-4.25-.12-6.28 0-2.21-.87-2.1-2.04-2.15-1.7-.06-2.46-.06-4.15-.06-1.11-.06-1.58.23-1.58 1.34 0 5.7-.18 21.8-.12 24.13.06 2.33.3 12.91.18 15.24-.06.81 0 1.62.06 2.44.05.29.23.58.7.58 1.93-.12 3.74-.12 5.67-.17.7-.06 1.28-.24 1.58-1 .05-.4-.12-11.04-.12-13.83Zm13.92 4.47c0-2.03-.3-7.56-.23-8.72 0-.17.11-.4.17-.4.12 0 .35.11.41.17 1.87 2.44 10.64 19.36 11.7 19.42.28.06.58.06.87.06 1.99-.12 3.74 0 5.73 0 2.04 0 .7-1.98.35-2.5-.53-.76-7.48-13.14-7.9-13.9-1.16-1.98-2.16-4.13-3.32-6.05-.12-.23-.24-.58-.18-.81.12-.7.3-1.34.59-1.98a93.18 93.18 0 0 1 4.55-8.14c1.88-2.97 2.93-4.83 4.45-7.5.35-.64.58-1.34.82-2.1.05-.29-.18-.58-.53-.58-1.11-.05-5.15 0-6.43 0-.59 0-1.17.12-1.46.64-.76 1.46-8.6 15.7-9.35 16.98-.06.12-.24.18-.41.18 0 0-.12-.18-.12-.3-.06-3.25.53-13.9.4-16.04-.05-1.28-.28-1.4-1.57-1.46-1.4-.05-3.33-.05-4.73-.05-1.3 0-1.4.7-1.58 1.62-.06.18-.06 5.64-.06 8.09 0 3.54-.3 25.76.11 32.8 0 .7.18 1.1.77 1.1 1.57-.12 3.91 0 5.49 0 1.11 0 1.29-.12 1.29-1.98 0-2.5.23-4.77.23-7.85 0-.23-.06-.46-.06-.7Zm25.66-1.4h-.06c0 1.46-.05 2.97 0 4.49.06 1.86.18 3.72.3 5.58 0 .64.17.81.76.93 1.22.29 2.4.35 3.62.35 3.16-.12 6.31.11 9.47 0 1.29-.06 1.87.06 3.16-.18 1.17-.23 1.58-.87 1.58-2.61-.12-1.1-.06-1.57-.06-2.91 0-1.92-1.35-2.56-2.52-2.5-.81.06-4.73-.06-6.31-.06-2.63.06-2.22.4-2.22-2.33 0-2.2.06-5.05.06-7.32 0-1.22.11-1.63 1.28-1.63h7.31c1.17.17 1.99-.64 1.99-1.86 0-1.22.12-1.28.12-2.5l-.18-1.75c-.12-.99-.47-1.33-1.46-1.33-.64 0-1.29.05-1.93.11-2.52.18-3.68-.17-6.14 0-.82 0-.93-.11-1-.87-.23-2.27 0-4.77.24-7.04.06-.93.3-1.1 1.17-1.16l8.24-.06c1.11-.11 1.46-.06 1.4-1.16-.11-1.69.06-3.43-.11-5.12-.12-.93-.41-1.1-1.46-1.1-1.76.05-2.17.05-3.92.17-1.75.06-8.77.06-10.46.06-2.46 0-2.63-.18-2.7 2.8-.1 2.32-.05 4.7-.05 7.09 0 4.07-.23 18.66-.12 21.92Zm47.76-24.82c.06-1.92 0-3.5 0-5.35 0-2.15-3.92-1.92-5.32-1.86a18.95 18.95 0 0 0-15.08 9.77c-.82 1.57-1.4 3.2-1.81 4.88a34 34 0 0 0-.59 12.15c.41 3.78 1.4 7.56 3.74 10.59 4.04 5.3 11.46 7.15 17.83 6.16.3-.06.59-.11.82-.29.18-.11.35-.35.35-.58l.18-3.31c.06-1.05 0-1 0-2.04 0-1.4-2.93-.35-4.74-.35-1.75 0-3.62-.06-5.2-.87-2.8-1.57-4.38-4.71-5.26-7.68-1-3.2-1.23-6.63-.64-9.88.7-4.25 2.74-9.13 7.25-10.59 2.57-.87 5.31-.58 7.89-.29.35.06.58-.17.58-.46Zm26.77 15.3c.06-2.5 0-14.84 0-18.38.06-.82 0-1.63-.11-2.45-.06-.99-.24-1.28-1.29-1.33h-4.44c-.82 0-1.35.4-1.82 1.27-1.34 3.2-10.75 24.02-12.15 26.58-.53.99-1 1.63-1 2.68v4.24c0 .76-.06 1.28 1.23 1.28l11.1-.06c1.47 0 1.47.3 1.47 1.1 0 .88-.12 4.9-.12 5.3 0 .58.12 1.16 1.23 1.16h5.08c1.23 0 1.23-.7 1.23-2.03.06-1.17-.06-3.5-.06-4.66 0-.93.18-.98 1.76-.98 1.22 0 1.75-.12 1.75-.88.06-1.57 0-2.67 0-4.42 0-1.04-.93-.98-2.92-.98-.65 0-.7-.18-.7-1.05-.12-1.8-.24-4.6-.24-6.4Zm-7.25-5.94c-.05.7-.11 10.82-.11 12.27-.06.81-.24 1.05-1 1.1-1.93.06-3.85.06-5.78.06-.47 0-.65-.4-.41-.87.23-.4 4.85-11.57 6.13-14.48.18-.17.24-.35.41-.52.18-.12.41-.18.59-.23.06 0 .23.29.23.46 0 .76-.06 1.51-.06 2.21Z"
-      }
-    )
-  ] })
-), LogoIcon = forwardRef(
-  (props, ref) => /* @__PURE__ */ jsx("svg", { ref, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 56 56", ...props, children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      fill: "#5E98AF",
-      d: "M33.95 33.78V0H2.37A2.37 2.37 0 0 0 0 2.35V33.9h33.95v-.12ZM38.57 33.78H55.6v-14.6c0-1.3-1.06-2.35-2.36-2.35H38.57v16.95ZM33.95 38.37H17.04v14.6c0 1.29 1.06 2.35 2.36 2.35h14.67V38.37h-.12ZM38.57 38.37v16.95h14.67c1.3 0 2.36-1.06 2.36-2.36v-14.6H38.57Z"
-    }
-  ) })
-), BurgerButton = () => {
-  const actor = useNavigationActor(), { onBurgerMenuClick } = useDiagramEventHandlers();
-  return /* @__PURE__ */ jsx(MotionDiv, { layout: "position", children: /* @__PURE__ */ jsxs(
-    UnstyledButton,
-    {
-      onMouseEnter: () => {
-        actor.send({ type: "breadcrumbs.mouseEnter.root" });
-      },
-      onMouseLeave: () => {
-        actor.send({ type: "breadcrumbs.mouseLeave.root" });
-      },
-      onClick: (e2) => {
-        e2.stopPropagation(), onBurgerMenuClick && actor.isOpened() && setTimeout(() => {
-          onBurgerMenuClick();
-        }, 100), actor.send({ type: "breadcrumbs.click.root" });
-      },
-      className: cx(
-        "mantine-active",
-        hstack({
-          padding: "0.5",
-          // _active: {
-          //   transform: 'translateY(1px)',
-          // },
-          width: {
-            base: "[20px]",
-            "@/md": "[64px]"
-          }
-        })
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          Logo,
-          {
-            className: css({
-              display: {
-                base: "none",
-                "@/md": "block"
-              }
-            })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          LogoIcon,
-          {
-            className: css({
-              display: {
-                base: "block",
-                "@/md": "none"
-              }
-            })
-          }
-        )
-      ]
-    }
-  ) });
-}, compoundActionBtn = cva({
+const compoundActionBtn = cva({
   base: {
     transitionDuration: "normal"
   },
@@ -5664,7 +5713,7 @@ const EdgePath = forwardRef(({
   ] });
 });
 EdgePath.displayName = "EdgePath";
-const container$3 = hstack({
+const container$2 = hstack({
   position: "absolute",
   zIndex: 1,
   justifyContent: "center",
@@ -5688,7 +5737,7 @@ function ElementActionButtons({
   return buttons.length ? /* @__PURE__ */ jsx(
     Box,
     {
-      className: container$3,
+      className: container$2,
       style: {
         top: "calc(100% - 30px)",
         transform: "translateX(-50%)",
@@ -5773,7 +5822,7 @@ const Markdown = forwardRef(({
   );
 });
 Markdown.displayName = "Markdown";
-const Root = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const Root$1 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ...props,
@@ -5856,7 +5905,7 @@ const Root = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
 });
 function ElementData({ iconSize: iconSize2, data }) {
   return /* @__PURE__ */ jsxs(
-    Root,
+    Root$1,
     {
       style: e$9(iconSize2) ? {
         // @ts-ignore
@@ -5873,13 +5922,13 @@ function ElementData({ iconSize: iconSize2, data }) {
     }
   );
 }
-ElementData.Root = Root;
+ElementData.Root = Root$1;
 ElementData.Icon = Icon;
 ElementData.Content = Content;
 ElementData.Title = Title;
 ElementData.Technology = Technology;
 ElementData.Description = Description;
-const container$2 = css({
+const container$1 = css({
   position: "absolute",
   top: "0.5",
   right: "0.5",
@@ -5912,7 +5961,7 @@ function ElementDetailsButton({
   icon: icon2,
   onClick
 }) {
-  return /* @__PURE__ */ jsx(Box, { className: cx(container$2, "details-button"), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { className: cx(container$1, "details-button"), children: /* @__PURE__ */ jsx(
     ActionIcon,
     {
       className: cx("nodrag nopan", actionBtn({ variant: "transparent" })),
@@ -5940,41 +5989,7 @@ function ElementDetailsButton({
     }
   ) });
 }
-const container$1 = css({
-  position: "relative",
-  width: "full",
-  height: "full",
-  padding: "0",
-  margin: "0",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  pointerEvents: "none",
-  _focusVisible: {
-    outline: "none"
-  },
-  _whenSelectable: {
-    pointerEvents: "all",
-    _before: {
-      content: '" "',
-      position: "absolute",
-      top: "[calc(100% - 4px)]",
-      left: "0",
-      width: "full",
-      height: "24px",
-      background: "transparent",
-      pointerEvents: "all"
-    }
-  },
-  _reduceGraphicsOnPan: {
-    _before: {
-      display: "none"
-    }
-  },
-  ":where(.react-flow__node.selectable:not(.dragging)) &": {
-    cursor: "pointer"
-  }
-}), ElementNodeContainer = forwardRef(({
+const ElementNodeContainer = forwardRef(({
   nodeProps: {
     selected = !1,
     selectable = !1,
@@ -6008,9 +6023,8 @@ const container$1 = css({
     {
       ref,
       className: cx(
-        container$1,
+        elementNode(),
         "group",
-        "likec4-element-node",
         className
       ),
       initial: !1,
@@ -6038,7 +6052,7 @@ const container$1 = css({
   );
 });
 ElementNodeContainer.displayName = "ElementNodeContainer";
-function cylinderSVGPath(diameter, height, tilt = 0.065) {
+function cylinderSVGPath(diameter, height, tilt = 0.07) {
   const radius = Math.round(diameter / 2), rx = radius, ry = roundDpr(tilt * radius), tiltAdjustedHeight = height - 2 * ry;
   return {
     path: `  M ${diameter},${ry}
@@ -6052,6 +6066,36 @@ function cylinderSVGPath(diameter, height, tilt = 0.065) {
     rx
   };
 }
+function docSVGPath(width, height) {
+  const waveHeight = height / 8, baseY = roundDpr(height - waveHeight / 2), amplitude = roundDpr(height / 6), radius = 6;
+  return {
+    path: `
+    M 0 ${baseY}
+    V ${radius}
+    Q 0 0 ${radius} 0
+    H ${width - radius}
+    Q ${width} 0 ${width} ${radius}
+    V ${baseY}
+    C ${roundDpr(width * 0.75)} ${baseY + amplitude}, ${roundDpr(width * 0.5)} ${baseY - amplitude}, 0 ${baseY}
+  `.replace(/\s+/g, " ").trim()
+  };
+}
+function bucketSVGPath(width, height) {
+  const cx2 = width / 2, topRx = roundDpr(cx2), topRy = roundDpr(Math.min(height / 8, topRx * 0.08)), bottomRx = roundDpr(topRx * 0.8), bottomRy = roundDpr(topRy * 1.05), topY = topRy, bottomY = height - bottomRy, leftBottomX = cx2 - bottomRx;
+  return {
+    path: `
+    M ${width},${topY}
+    a ${topRx},${topRy} 0,0,0 ${-width} 0
+    L ${leftBottomX},${bottomY}
+    a ${bottomRx},${bottomRy} 0,0,0 ${bottomRx * 2} 0
+    Z
+  `.replace(/\s+/g, " ").trim(),
+    topRx,
+    topRy,
+    bottomRx,
+    bottomRy
+  };
+}
 function queueSVGPath(width, height, tilt = 0.185) {
   const diameter = height, ry = Math.round(diameter / 2), rx = roundDpr(diameter / 2 * tilt), tiltAdjustedWidth = width - 2 * rx;
   return {
@@ -6089,6 +6133,17 @@ function ShapeSvg({ shape, w, h }) {
           /* @__PURE__ */ jsx("rect", { x: 33, y: 12, width: w - 44, height: h - 24, rx: 5 })
         ] })
       ] });
+    case "document": {
+      const { path } = docSVGPath(w, h);
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: path,
+          "data-likec4-fill": "fill",
+          strokeWidth: 2
+        }
+      );
+    }
     case "browser":
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
@@ -6146,12 +6201,39 @@ function ShapeSvg({ shape, w, h }) {
         /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry: ry - 0.75, rx, "data-likec4-fill": "mix-stroke", strokeWidth: 2 })
       ] });
     }
+    case "bucket": {
+      const { path, topRx, topRy } = bucketSVGPath(w, h);
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
+        /* @__PURE__ */ jsx(
+          "ellipse",
+          {
+            cx: w / 2,
+            cy: topRy,
+            rx: topRx,
+            ry: topRy,
+            "data-likec4-fill": "mix-stroke",
+            strokeWidth: 2
+          }
+        )
+      ] });
+    }
     case "storage":
     case "cylinder": {
       const { path, rx, ry } = cylinderSVGPath(w, h);
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("path", { d: path, strokeWidth: 2 }),
-        /* @__PURE__ */ jsx("ellipse", { cx: rx, cy: ry, ry, rx: rx - 0.75, "data-likec4-fill": "mix-stroke", strokeWidth: 2 })
+        /* @__PURE__ */ jsx(
+          "ellipse",
+          {
+            cx: rx,
+            cy: ry,
+            ry,
+            rx: rx - 0.75,
+            "data-likec4-fill": "mix-stroke",
+            strokeWidth: 2
+          }
+        )
       ] });
     }
     default:
@@ -6161,12 +6243,18 @@ function ShapeSvg({ shape, w, h }) {
 function ShapeSvgOutline({ shape, w, h }) {
   let svg;
   switch (shape) {
+    case "bucket":
+      svg = /* @__PURE__ */ jsx("g", { transform: "translate(-3 -3)", children: /* @__PURE__ */ jsx("path", { d: bucketSVGPath(w + 6, h + 6).path }) });
+      break;
     case "queue":
-      svg = /* @__PURE__ */ jsx("path", { d: queueSVGPath(w, h).path });
+      svg = /* @__PURE__ */ jsx("g", { transform: "translate(-3 -3)", children: /* @__PURE__ */ jsx("path", { d: queueSVGPath(w + 6, h + 6).path }) });
+      break;
+    case "document":
+      svg = /* @__PURE__ */ jsx("g", { transform: "translate(-3 -3)", children: /* @__PURE__ */ jsx("path", { d: docSVGPath(w + 6, h + 6).path }) });
       break;
     case "storage":
     case "cylinder": {
-      svg = /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w, h).path });
+      svg = /* @__PURE__ */ jsx("g", { transform: "translate(-3 -3)", children: /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w + 6, h + 6).path }) });
       break;
     }
     default: {
@@ -6185,31 +6273,32 @@ function ShapeSvgOutline({ shape, w, h }) {
   }
   return /* @__PURE__ */ jsx("g", { className: "likec4-shape-outline", children: svg });
 }
-function ShapeHtml({ multiple, withOutLine }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: elementShapeRecipe({
-        shapetype: "html"
-      }),
-      children: [
-        multiple && /* @__PURE__ */ jsx("div", { className: "likec4-shape-multiple" }),
-        withOutLine && /* @__PURE__ */ jsx("div", { className: "likec4-shape-outline" })
-      ]
-    }
-  );
-}
 function ElementShape({ data, width, height, showSeletionOutline = !0 }) {
   let w = width && width > 10 ? width : data.width, h = height && height > 10 ? height : data.height;
-  const isMultiple = data.style?.multiple ?? !1;
+  const isMultiple = data.style?.multiple ?? !1, borderStyle = data.style?.border ?? "none", withBorder = borderStyle !== "none";
   if (data.shape === "rectangle")
-    return /* @__PURE__ */ jsx(ShapeHtml, { multiple: isMultiple, withOutLine: showSeletionOutline });
-  const className = elementShapeRecipe({
-    shapetype: "svg"
-  });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isMultiple && /* @__PURE__ */ jsx("svg", { className, "data-likec4-shape-multiple": "true", viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, w, h }) }),
-    /* @__PURE__ */ jsxs("svg", { className, viewBox: `0 0 ${w} ${h}`, children: [
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          borderStyle
+        },
+        className: elementShapeRecipe({
+          shapetype: "html",
+          withBorder
+        }),
+        children: [
+          isMultiple && /* @__PURE__ */ jsx("div", { className: "likec4-shape-multiple" }),
+          showSeletionOutline && /* @__PURE__ */ jsx("div", { className: "likec4-shape-outline" })
+        ]
+      }
+    );
+  const className = elementShapeRecipe({
+    shapetype: "svg"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isMultiple && /* @__PURE__ */ jsx("svg", { className, "data-likec4-shape-multiple": "true", viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, w, h }) }),
+    /* @__PURE__ */ jsxs("svg", { className, viewBox: `0 0 ${w} ${h}`, children: [
       showSeletionOutline && /* @__PURE__ */ jsx(ShapeSvgOutline, { shape: data.shape, w, h }),
       /* @__PURE__ */ jsx(ShapeSvg, { shape: data.shape, w, h })
     ] })
@@ -6503,7 +6592,7 @@ const positions = [Position.Top, Position.Right, Position.Bottom, Position.Left]
       }
     );
   }
-), selector$5 = ({ context: context2 }) => {
+), selector$6 = ({ context: context2 }) => {
   const view = context2.view;
   return {
     id: view.id,
@@ -6513,7 +6602,7 @@ const positions = [Position.Top, Position.Right, Position.Bottom, Position.Left]
     links: view.links ?? []
   };
 }, DetailsControls = (props) => {
-  const [opened, setOpened] = useState(!1), data = useNavigationActorSnapshot(selector$5, deepEqual), portalProps = useMantinePortalProps();
+  const [opened, setOpened] = useState(!1), data = useNavigationActorSnapshot(selector$6, deepEqual), portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(
     Popover,
     {
@@ -6802,7 +6891,92 @@ const positions = [Position.Top, Position.Right, Position.Bottom, Position.Left]
   ) });
 });
 LayoutWarning.displayName = "ManualLayoutWarning";
-const NavigationButtons = () => {
+const Logo$1 = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsxs("svg", { ref, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 222 56", ...props, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "#5E98AF",
+        d: "M33.95 33.78V0H2.37A2.37 2.37 0 0 0 0 2.35V33.9h33.95v-.12ZM38.57 33.78H55.6v-14.6c0-1.3-1.06-2.35-2.36-2.35H38.57v16.95ZM33.95 38.37H17.04v14.6c0 1.29 1.06 2.35 2.36 2.35h14.67V38.37h-.12ZM38.57 38.37v16.95h14.67c1.3 0 2.36-1.06 2.36-2.36v-14.6H38.57Z"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        className: css({
+          fill: "[#FCFBF7]",
+          _light: {
+            fill: "[#222221]"
+          }
+        }),
+        d: "M71.61 12.08c-.06 3.61.3 29.95.23 31.87 0 1.8 0 3.6.06 5.41 0 .3.18.58.47.58 4.1.18 8.13-.17 12.22-.11 1.34.05 2.69 0 3.97 0 1.29-.06 1.4-.59 1.35-1.63-.06-1.63-.06-3.08-.06-4.65-.06-.82-.53-1.11-1.23-1.11-2.4.06-4.8-.06-7.19.06-.4.06-.82.06-1.23.06-.7-.06-.87-.24-.93-1v-.86c-.18-4.83.17-9.83.17-14.66-.06-4.07 0-7.73-.06-11.34 0-1.57 0-3.14-.05-4.65-.06-.93 0-1.92-.24-2.85-.11-.35-.29-.81-.7-.81h-5.5c-.93 0-1.22.64-1.28 1.57v4.12ZM103.81 35c-.17-6.63-.1-13.67-.05-20.24 0-2.04-.12-4.25-.12-6.28 0-2.21-.87-2.1-2.04-2.15-1.7-.06-2.46-.06-4.15-.06-1.11-.06-1.58.23-1.58 1.34 0 5.7-.18 21.8-.12 24.13.06 2.33.3 12.91.18 15.24-.06.81 0 1.62.06 2.44.05.29.23.58.7.58 1.93-.12 3.74-.12 5.67-.17.7-.06 1.28-.24 1.58-1 .05-.4-.12-11.04-.12-13.83Zm13.92 4.47c0-2.03-.3-7.56-.23-8.72 0-.17.11-.4.17-.4.12 0 .35.11.41.17 1.87 2.44 10.64 19.36 11.7 19.42.28.06.58.06.87.06 1.99-.12 3.74 0 5.73 0 2.04 0 .7-1.98.35-2.5-.53-.76-7.48-13.14-7.9-13.9-1.16-1.98-2.16-4.13-3.32-6.05-.12-.23-.24-.58-.18-.81.12-.7.3-1.34.59-1.98a93.18 93.18 0 0 1 4.55-8.14c1.88-2.97 2.93-4.83 4.45-7.5.35-.64.58-1.34.82-2.1.05-.29-.18-.58-.53-.58-1.11-.05-5.15 0-6.43 0-.59 0-1.17.12-1.46.64-.76 1.46-8.6 15.7-9.35 16.98-.06.12-.24.18-.41.18 0 0-.12-.18-.12-.3-.06-3.25.53-13.9.4-16.04-.05-1.28-.28-1.4-1.57-1.46-1.4-.05-3.33-.05-4.73-.05-1.3 0-1.4.7-1.58 1.62-.06.18-.06 5.64-.06 8.09 0 3.54-.3 25.76.11 32.8 0 .7.18 1.1.77 1.1 1.57-.12 3.91 0 5.49 0 1.11 0 1.29-.12 1.29-1.98 0-2.5.23-4.77.23-7.85 0-.23-.06-.46-.06-.7Zm25.66-1.4h-.06c0 1.46-.05 2.97 0 4.49.06 1.86.18 3.72.3 5.58 0 .64.17.81.76.93 1.22.29 2.4.35 3.62.35 3.16-.12 6.31.11 9.47 0 1.29-.06 1.87.06 3.16-.18 1.17-.23 1.58-.87 1.58-2.61-.12-1.1-.06-1.57-.06-2.91 0-1.92-1.35-2.56-2.52-2.5-.81.06-4.73-.06-6.31-.06-2.63.06-2.22.4-2.22-2.33 0-2.2.06-5.05.06-7.32 0-1.22.11-1.63 1.28-1.63h7.31c1.17.17 1.99-.64 1.99-1.86 0-1.22.12-1.28.12-2.5l-.18-1.75c-.12-.99-.47-1.33-1.46-1.33-.64 0-1.29.05-1.93.11-2.52.18-3.68-.17-6.14 0-.82 0-.93-.11-1-.87-.23-2.27 0-4.77.24-7.04.06-.93.3-1.1 1.17-1.16l8.24-.06c1.11-.11 1.46-.06 1.4-1.16-.11-1.69.06-3.43-.11-5.12-.12-.93-.41-1.1-1.46-1.1-1.76.05-2.17.05-3.92.17-1.75.06-8.77.06-10.46.06-2.46 0-2.63-.18-2.7 2.8-.1 2.32-.05 4.7-.05 7.09 0 4.07-.23 18.66-.12 21.92Zm47.76-24.82c.06-1.92 0-3.5 0-5.35 0-2.15-3.92-1.92-5.32-1.86a18.95 18.95 0 0 0-15.08 9.77c-.82 1.57-1.4 3.2-1.81 4.88a34 34 0 0 0-.59 12.15c.41 3.78 1.4 7.56 3.74 10.59 4.04 5.3 11.46 7.15 17.83 6.16.3-.06.59-.11.82-.29.18-.11.35-.35.35-.58l.18-3.31c.06-1.05 0-1 0-2.04 0-1.4-2.93-.35-4.74-.35-1.75 0-3.62-.06-5.2-.87-2.8-1.57-4.38-4.71-5.26-7.68-1-3.2-1.23-6.63-.64-9.88.7-4.25 2.74-9.13 7.25-10.59 2.57-.87 5.31-.58 7.89-.29.35.06.58-.17.58-.46Zm26.77 15.3c.06-2.5 0-14.84 0-18.38.06-.82 0-1.63-.11-2.45-.06-.99-.24-1.28-1.29-1.33h-4.44c-.82 0-1.35.4-1.82 1.27-1.34 3.2-10.75 24.02-12.15 26.58-.53.99-1 1.63-1 2.68v4.24c0 .76-.06 1.28 1.23 1.28l11.1-.06c1.47 0 1.47.3 1.47 1.1 0 .88-.12 4.9-.12 5.3 0 .58.12 1.16 1.23 1.16h5.08c1.23 0 1.23-.7 1.23-2.03.06-1.17-.06-3.5-.06-4.66 0-.93.18-.98 1.76-.98 1.22 0 1.75-.12 1.75-.88.06-1.57 0-2.67 0-4.42 0-1.04-.93-.98-2.92-.98-.65 0-.7-.18-.7-1.05-.12-1.8-.24-4.6-.24-6.4Zm-7.25-5.94c-.05.7-.11 10.82-.11 12.27-.06.81-.24 1.05-1 1.1-1.93.06-3.85.06-5.78.06-.47 0-.65-.4-.41-.87.23-.4 4.85-11.57 6.13-14.48.18-.17.24-.35.41-.52.18-.12.41-.18.59-.23.06 0 .23.29.23.46 0 .76-.06 1.51-.06 2.21Z"
+      }
+    )
+  ] })
+), LogoIcon = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx("svg", { ref, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 56 56", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "#5E98AF",
+      d: "M33.95 33.78V0H2.37A2.37 2.37 0 0 0 0 2.35V33.9h33.95v-.12ZM38.57 33.78H55.6v-14.6c0-1.3-1.06-2.35-2.36-2.35H38.57v16.95ZM33.95 38.37H17.04v14.6c0 1.29 1.06 2.35 2.36 2.35h14.67V38.37h-.12ZM38.57 38.37v16.95h14.67c1.3 0 2.36-1.06 2.36-2.36v-14.6H38.57Z"
+    }
+  ) })
+), LogoButton$1 = () => {
+  const actor = useNavigationActor(), { onLogoClick } = useDiagramEventHandlers();
+  return /* @__PURE__ */ jsx(MotionDiv, { layout: "position", children: /* @__PURE__ */ jsxs(
+    UnstyledButton,
+    {
+      onMouseEnter: () => {
+        actor.send({ type: "breadcrumbs.mouseEnter.root" });
+      },
+      onMouseLeave: () => {
+        actor.send({ type: "breadcrumbs.mouseLeave.root" });
+      },
+      onClick: (e2) => {
+        e2.stopPropagation(), onLogoClick && actor.isOpened() && setTimeout(() => {
+          onLogoClick();
+        }, 100), actor.send({ type: "breadcrumbs.click.root" });
+      },
+      className: cx(
+        "mantine-active",
+        hstack({
+          padding: "0.5",
+          // _active: {
+          //   transform: 'translateY(1px)',
+          // },
+          width: {
+            base: "[20px]",
+            "@/md": "[64px]"
+          }
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Logo$1,
+          {
+            className: css({
+              display: {
+                base: "none",
+                "@/md": "block"
+              }
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          LogoIcon,
+          {
+            className: css({
+              display: {
+                base: "block",
+                "@/md": "none"
+              }
+            })
+          }
+        )
+      ]
+    }
+  ) });
+}, NavigationButtons = () => {
   const diagram = useDiagram(), {
     hasStepBack,
     hasStepForward
@@ -6900,7 +7074,7 @@ const NavigationButtons = () => {
   ) });
 });
 SearchControl.displayName = "SearchControl";
-const selector$4 = (ctx) => {
+const selector$5 = (ctx) => {
   const comparingLatest = deriveToggledFeatures(ctx).enableCompareWithLatest && !!ctx.view.drifts && ctx.view._layout === "auto", sequenceLayoutActive = ctx.view._type === "dynamic" && ctx.dynamicViewVariant === "sequence", noActiveWalkthrough = !e$8(ctx.activeWalkthrough);
   return {
     visible: ctx.features.enableEditor && noActiveWalkthrough,
@@ -6908,7 +7082,7 @@ const selector$4 = (ctx) => {
     isReadOnly: ctx.toggledFeatures.enableReadOnly ?? !1
   };
 }, ToggleReadonly = () => {
-  const { visible, disabled, isReadOnly: isReadOnly2 } = useDiagramContext(selector$4), diagram = useDiagram();
+  const { visible, disabled, isReadOnly: isReadOnly2 } = useDiagramContext(selector$5), diagram = useDiagram();
   return /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: visible && /* @__PURE__ */ jsxs(
     UnstyledButton,
     {
@@ -6992,8 +7166,14 @@ function useLikeC4Projects() {
   const ctx = useContext(LikeC4ProjectsContext);
   return ctx ? ctx.projects : emptyProjects;
 }
-const emptyOnProjectChange = () => {
-}, emptyContext = {
+const emptyOnProjectChange = (id) => {
+  console.warn(`Triggered callback to change project to ${id}, but no <LikeC4ProjectsProvider/> found`);
+};
+function useChangeLikeC4Project() {
+  const ctx = useContext(LikeC4ProjectsContext);
+  return ctx ? ctx.onProjectChange : emptyOnProjectChange;
+}
+const emptyContext = {
   projects: emptyProjects,
   onProjectChange: emptyOnProjectChange
 };
@@ -7007,9 +7187,7 @@ function useLikeC4ProjectId() {
   return ctx.projectId;
 }
 function useLikeC4Styles() {
-  const model = useContext(LikeC4ModelContext);
-  model || console.error("No LikeC4ModelContext found");
-  const $styles = model?.$styles ?? LikeC4Styles$1.DEFAULT, [styles, setStyles] = useState($styles);
+  const $styles = useContext(LikeC4ModelContext)?.$styles ?? LikeC4Styles$1.DEFAULT, [styles, setStyles] = useState($styles);
   return useEffect(() => {
     setStyles((current) => current.equals($styles) ? current : $styles);
   }, [$styles]), styles;
@@ -7310,7 +7488,7 @@ const selectBreadcrumbs = ({ context: context2 }) => {
     "view-title"
   );
   return /* @__PURE__ */ jsxs(AnimatePresence, { propagate: !0, mode: "popLayout", children: [
-    /* @__PURE__ */ jsx(BurgerButton, {}, "burger-button"),
+    /* @__PURE__ */ jsx(LogoButton$1, {}, "logo-button"),
     enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}, "nav-buttons"),
     /* @__PURE__ */ jsxs(
       MotionDiv,
@@ -7479,7 +7657,7 @@ function BrowseRelationshipsButton({ fqn: fqn2 }) {
   return /* @__PURE__ */ jsx(Tooltip$3, { label: "Browse relationships", children: /* @__PURE__ */ jsx(
     ActionIcon,
     {
-      size: "sm",
+      size: "md",
       variant: "subtle",
       color: "gray",
       onClick: (e2) => {
@@ -7490,8 +7668,8 @@ function BrowseRelationshipsButton({ fqn: fqn2 }) {
         {
           stroke: 2,
           style: {
-            width: "72%",
-            height: "72%"
+            width: "65%",
+            height: "65%"
           }
         }
       )
@@ -7503,7 +7681,7 @@ function GoToSourceButton(props) {
   return onOpenSource ? /* @__PURE__ */ jsx(Tooltip$3, { label: "Open source", children: /* @__PURE__ */ jsx(
     ActionIcon,
     {
-      size: "sm",
+      size: "md",
       variant: "subtle",
       color: "gray",
       onClick: (e2) => {
@@ -7513,10 +7691,44 @@ function GoToSourceButton(props) {
           deployment: props.deploymentId
         });
       },
-      children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "70%" } })
+      children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "65%" } })
     }
   ) }) : null;
 }
+function BorderStyleOption({
+  elementBorderStyle = "none",
+  onChange
+}) {
+  const [value, setValue] = useState(elementBorderStyle);
+  return useEffect(() => {
+    setValue(elementBorderStyle);
+  }, [elementBorderStyle]), /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      size: "xs",
+      fz: 9,
+      fullWidth: !0,
+      withItemsBorders: !1,
+      value,
+      onChange: (v) => {
+        const border = v;
+        setValue(border), onChange({ border });
+      },
+      styles: {
+        label: {
+          paddingTop: 2,
+          paddingBottom: 2
+        }
+      },
+      data: [
+        { label: "Solid", value: "solid" },
+        { label: "Dashed", value: "dashed" },
+        { label: "Dotted", value: "dotted" },
+        { label: "None", value: "none" }
+      ]
+    }
+  );
+}
 const SemanticColors = [
   "primary",
   "secondary",
@@ -7535,16 +7747,16 @@ function ColorButton({
     Popover,
     {
       clickOutsideEvents: ["pointerdown", "mousedown", "click"],
-      position: "right-end",
+      position: "top-start",
       offset: 2,
       withinPortal: !1,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Button, { variant: "subtle", color: "gray", size: "compact-xs", px: 3, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Button, { variant: "subtle", color: "gray", size: "xs", px: 6, children: /* @__PURE__ */ jsx(
           ColorSwatch,
           {
             color: theme.colors[elementColor].elements.fill,
-            size: 14,
+            size: 16,
             withShadow: !0,
             style: { color: "#fff", cursor: "pointer" }
           }
@@ -7676,7 +7888,7 @@ const toolbarTitle = css({
   textOverflow: "ellipsis",
   overflow: "hidden",
   whiteSpace: "nowrap"
-}), useSelectedNodesCount = () => useDiagramContext((s) => s.xynodes.filter((x) => x.selected).length);
+}), selectSelectedNodesCount = (context2) => context2.xynodes.filter((x) => x.selected).length, useSelectedNodesCount = () => useDiagramContext(selectSelectedNodesCount);
 function Toolbar({ title: title2, children, nodeProps, ...props }) {
   const selectedNodesCount = useSelectedNodesCount(), {
     selected = !1,
@@ -7708,9 +7920,9 @@ function Toolbar({ title: title2, children, nodeProps, ...props }) {
           onClick: stopPropagation,
           onDoubleClick: stopPropagation,
           withBorder: !0,
-          children: /* @__PURE__ */ jsxs(Stack, { gap: "6px", children: [
-            /* @__PURE__ */ jsx(Box$1, { px: "4px", children: /* @__PURE__ */ jsx(Text, { className: toolbarTitle, children: title2 }) }),
-            /* @__PURE__ */ jsx(Group, { gap: 4, children })
+          children: /* @__PURE__ */ jsxs(VStack, { gap: "2", children: [
+            /* @__PURE__ */ jsx(Box, { px: "1", children: /* @__PURE__ */ jsx(Text, { className: toolbarTitle, children: title2 }) }),
+            /* @__PURE__ */ jsx(HStack, { gap: "1", children })
           ] })
         }
       )
@@ -7824,44 +8036,12 @@ function CompoundDeploymentToolbar(props) {
     }
   );
 }
-function BorderStyleOption({
-  elementBorderStyle = "dashed",
-  onChange
-}) {
-  const [value, setValue] = useState(elementBorderStyle);
-  return useEffect(() => {
-    setValue(elementBorderStyle);
-  }, [elementBorderStyle]), /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(
-    SegmentedControl,
-    {
-      size: "xs",
-      fullWidth: !0,
-      withItemsBorders: !1,
-      value,
-      onChange: (v) => {
-        const border = v;
-        setValue(border), onChange({ border });
-      },
-      styles: {
-        label: {
-          paddingTop: "0.5",
-          paddingBottom: "0.5"
-        }
-      },
-      data: [
-        { label: "Solid", value: "solid" },
-        { label: "Dashed", value: "dashed" },
-        { label: "Dotted", value: "dotted" },
-        { label: "None", value: "none" }
-      ]
-    }
-  ) });
-}
 function ElementToolbar(props) {
   const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures(), {
     data: {
       shape,
-      modelFqn
+      modelFqn,
+      style
     }
   } = props, { elementColor, onColorPreview, onChange } = useHandlers(modelFqn, props);
   return /* @__PURE__ */ jsxs(
@@ -7871,6 +8051,14 @@ function ElementToolbar(props) {
       title: modelFqn,
       align: "start",
       children: [
+        /* @__PURE__ */ jsx(
+          ColorButton,
+          {
+            elementColor,
+            onColorPreview,
+            onChange
+          }
+        ),
         /* @__PURE__ */ jsx(
           ElementShapeButton,
           {
@@ -7879,12 +8067,10 @@ function ElementToolbar(props) {
           }
         ),
         /* @__PURE__ */ jsx(
-          ColorButton,
+          BorderStyleOption,
           {
-            elementColor,
-            onColorPreview,
-            onChange,
-            position: "right-end"
+            elementBorderStyle: style?.border ?? "none",
+            onChange
           }
         ),
         enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { elementId: modelFqn }),
@@ -7898,7 +8084,8 @@ function DeploymentElementToolbar(props) {
     data: {
       shape,
       deploymentFqn,
-      modelFqn
+      modelFqn,
+      style
     }
   } = props, { elementColor, onColorPreview, onChange } = useHandlers(deploymentFqn, props);
   return /* @__PURE__ */ jsxs(
@@ -7908,6 +8095,14 @@ function DeploymentElementToolbar(props) {
       title: deploymentFqn,
       align: "start",
       children: [
+        /* @__PURE__ */ jsx(
+          ColorButton,
+          {
+            elementColor,
+            onColorPreview,
+            onChange
+          }
+        ),
         /* @__PURE__ */ jsx(
           ElementShapeButton,
           {
@@ -7916,12 +8111,10 @@ function DeploymentElementToolbar(props) {
           }
         ),
         /* @__PURE__ */ jsx(
-          ColorButton,
+          BorderStyleOption,
           {
-            elementColor,
-            onColorPreview,
-            onChange,
-            position: "right-end"
+            elementBorderStyle: style?.border ?? "none",
+            onChange
           }
         ),
         enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { deploymentId: deploymentFqn }),
@@ -7958,7 +8151,8 @@ function ElementShapeButton({
           {
             variant: "light",
             color: "gray",
-            size: "compact-xs",
+            size: "xs",
+            px: 8,
             rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 12 }),
             children: elementShape
           }
@@ -8925,7 +9119,7 @@ const WalkthroughPanel = memo$1(() => {
       )
     }
   ) });
-}), NavigationPanel = memo$1(() => {
+}), NavigationPanel$1 = memo$1(() => {
   const diagram = useDiagram(), view = useCurrentView(), viewModel = useOptionalCurrentViewModel(), actorRef = useActorRef(
     navigationPanelActorLogic,
     {
@@ -8980,7 +9174,7 @@ const WalkthroughPanel = memo$1(() => {
     }
   );
 });
-NavigationPanel.displayName = "NavigationPanel";
+NavigationPanel$1.displayName = "NavigationPanel";
 const NavigationPanelImpl = ({ actor }) => {
   const opened = useSelector(actor, (s) => s.hasTag("active")), portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(
@@ -9737,7 +9931,7 @@ function useRelationshipsBrowser() {
     }
   }), [actor]);
 }
-const RelationshipEdge$2 = memoEdge((props) => {
+const RelationshipEdge$3 = memoEdge((props) => {
   const browser = useRelationshipsBrowser(), { enableNavigateTo } = useEnabledFeatures(), {
     data: {
       navigateTo,
@@ -9748,7 +9942,6 @@ const RelationshipEdge$2 = memoEdge((props) => {
     ...props,
     data: {
       ...props.data,
-      line: "solid",
       color: "amber"
     }
   } : props;
@@ -10174,12 +10367,12 @@ const node = css({
       ) })
     ] })
   ] });
-}), nodeTypes$1 = {
+}), nodeTypes$2 = {
   element: ElementNode$1,
   compound: CompoundNode$1,
   empty: EmptyNode
-}, edgeTypes$2 = {
-  relationship: RelationshipEdge$2
+}, edgeTypes$3 = {
+  relationship: RelationshipEdge$3
 };
 function RelationshipsBrowser({ actorRef }) {
   const initialRef = useRef(null);
@@ -10188,18 +10381,18 @@ function RelationshipsBrowser({ actorRef }) {
     initialEdges: []
   }), /* @__PURE__ */ jsx(RelationshipsBrowserActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: !1, children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(RelationshipsBrowserXYFlow, {}) }) }) }) });
 }
-const selector$3 = (state) => ({
+const selector$4 = (state) => ({
   isActive: state.hasTag("active"),
   nodes: state.context.xynodes,
   edges: state.context.xyedges
-}), selectorEq = (a, b) => a.isActive === b.isActive && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges), RelationshipsBrowserXYFlow = memo$1(() => {
+}), selectorEq$1 = (a, b) => a.isActive === b.isActive && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges), RelationshipsBrowserXYFlow = memo$1(() => {
   const browser = useRelationshipsBrowser(), {
     isActive,
     nodes,
     edges
   } = useRelationshipsBrowserState(
-    selector$3,
-    selectorEq
+    selector$4,
+    selectorEq$1
   );
   return /* @__PURE__ */ jsx(
     BaseXYFlow,
@@ -10211,8 +10404,8 @@ const selector$3 = (state) => ({
         isActive ? "initialized" : "not-initialized",
         "relationships-browser"
       ),
-      nodeTypes: nodeTypes$1,
-      edgeTypes: edgeTypes$2,
+      nodeTypes: nodeTypes$2,
+      edgeTypes: edgeTypes$3,
       fitView: !1,
       onNodeClick: useCallbackRef((_e, node2) => {
         _e.stopPropagation(), browser.send({ type: "xyflow.nodeClick", node: node2 });
@@ -11096,7 +11289,7 @@ function ElementMetata({
     )
   ] }) });
 }
-const selector$2 = (s) => ({
+const selector$3 = (s) => ({
   viewId: s.context.currentView.id,
   fromNode: s.context.initiatedFrom.node,
   rectFromNode: s.context.initiatedFrom.clientRect,
@@ -11108,7 +11301,7 @@ function ElementDetails({
 }) {
   const props = useSelector(
     actorRef,
-    selector$2,
+    selector$3,
     shallowEqual
   );
   return /* @__PURE__ */ jsx(ElementDetailsActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(
@@ -11205,7 +11398,7 @@ function computeRelationshipDetailsViewData({
     relationships
   };
 }
-const RelationshipEdge$1 = memoEdge((props) => {
+const RelationshipEdge$2 = memoEdge((props) => {
   const { enableNavigateTo } = useEnabledFeatures(), {
     data: { navigateTo }
   } = props, [svgPath, labelX, labelY] = getBezierPath(props), diagram = useDiagram();
@@ -11793,11 +11986,11 @@ const scrollArea$1 = css({
       ]
     }
   );
-}, nodeTypes = {
+}, nodeTypes$1 = {
   element: ElementNode,
   compound: CompoundNode
-}, edgeTypes$1 = {
-  relationship: RelationshipEdge$1
+}, edgeTypes$2 = {
+  relationship: RelationshipEdge$2
 };
 function RelationshipDetails({ actorRef }) {
   const initialRef = useRef(null);
@@ -11837,7 +12030,7 @@ const selectSubject = (state) => ({
   }, [store, instance.viewportInitialized, actor]), useEffect(() => {
     data !== null && actor.send({ type: "update.layoutData", data });
   }, [data, actor]), null;
-}), selector$1 = ({ context: context2 }) => ({
+}), selector$2 = ({ context: context2 }) => ({
   // subject: context.subject,
   // view: state.context.view,
   initialized: context2.initialized.xydata && context2.initialized.xyflow,
@@ -11848,7 +12041,7 @@ const selectSubject = (state) => ({
     initialized,
     nodes,
     edges
-  } = useRelationshipDetailsState(selector$1, deepEqual);
+  } = useRelationshipDetailsState(selector$2, deepEqual);
   return /* @__PURE__ */ jsxs(
     BaseXYFlow,
     {
@@ -11859,8 +12052,8 @@ const selectSubject = (state) => ({
         initialized ? "initialized" : "not-initialized",
         "likec4-relationship-details"
       ),
-      nodeTypes,
-      edgeTypes: edgeTypes$1,
+      nodeTypes: nodeTypes$1,
+      edgeTypes: edgeTypes$2,
       onNodesChange: useCallbackRef$1((changes) => {
         browser.send({ type: "xyflow.applyNodeChanges", changes });
       }),
@@ -12061,7 +12254,7 @@ function Overlays({ overlaysActorRef }) {
   });
   return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: overlaysReact }) }) }) });
 }
-const [SearchActorContext, useSearchActor] = createSafeContext("SearchActorContext"), selectSearchValue = (s) => s.context.searchValue;
+const [SearchActorContext, useSearchActor] = createSafeContext$1("SearchActorContext"), selectSearchValue = (s) => s.context.searchValue;
 function useSearch() {
   const searchActorRef = useSearchActor(), searchValue = useSelector(searchActorRef, selectSearchValue), updateSearch = useCallback((search) => {
     searchActorRef.send({ type: "change.search", search });
@@ -12238,7 +12431,7 @@ const buttonFocused = css.raw({
   outline: "none",
   marginBottom: "2"
 }), treeRoot = css(
-  container$4.raw({
+  container$3.raw({
     containerName: "likec4-tree"
   }),
   {
@@ -12480,8 +12673,8 @@ const btn = buttonsva(), ElementsColumn = memo$1(() => {
       byid,
       roots: roots.sort(sortByLabel)
     };
-  }, [model, search]), handleClick = useHandleElementSelection();
-  return data.all.length === 0 ? /* @__PURE__ */ jsx(NothingFound, {}) : /* @__PURE__ */ jsx(ElementsTree, { data, handleClick });
+  }, [model, search]), handleClick2 = useHandleElementSelection();
+  return data.all.length === 0 ? /* @__PURE__ */ jsx(NothingFound, {}) : /* @__PURE__ */ jsx(ElementsTree, { data, handleClick: handleClick2 });
 }), setHoveredNode = () => {
 };
 function ElementsTree({
@@ -12490,7 +12683,7 @@ function ElementsTree({
     byid,
     roots
   },
-  handleClick
+  handleClick: handleClick2
 }) {
   const tree = useTree({
     multiple: !1
@@ -12516,7 +12709,7 @@ function ElementsTree({
         return;
       }
       if (e2.key === " " || e2.key === "Enter") {
-        stopAndPrevent$1(e2), handleClick(node2.element);
+        stopAndPrevent$1(e2), handleClick2(node2.element);
         return;
       }
     }
@@ -12551,7 +12744,7 @@ function ElementTreeNode({ node: node2, elementProps, hasChildren, expanded }) {
       icon: element.icon
     },
     className: cx(btn.icon, elementIcon)
-  }), views = [...element.views()], handleClick = useHandleElementSelection(), key2 = `@tree.${node2.value}`;
+  }), views = [...element.views()], handleClick2 = useHandleElementSelection(), key2 = `@tree.${node2.value}`;
   return /* @__PURE__ */ jsxs(MotionDiv, { layoutId: key2, ...elementProps, children: [
     /* @__PURE__ */ jsx(
       ActionIcon,
@@ -12586,7 +12779,7 @@ function ElementTreeNode({ node: node2, elementProps, hasChildren, expanded }) {
         className: cx(btn.root, "group", "likec4-element-button"),
         ...views.length > 0 && {
           onClick: (e2) => {
-            (!hasChildren || expanded) && (e2.stopPropagation(), handleClick(element));
+            (!hasChildren || expanded) && (e2.stopPropagation(), handleClick2(element));
           }
         },
         children: [
@@ -13540,12 +13733,12 @@ const RelationshipPopover = memo$1(() => {
               }
             ),
             direct.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Label, { children: "DIRECT RELATIONSHIPS" }),
+              /* @__PURE__ */ jsx(Label$1, { children: "DIRECT RELATIONSHIPS" }),
               direct.map(renderRelationship)
             ] }),
             nested.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(
-                Label,
+                Label$1,
                 {
                   css: {
                     mt: direct.length > 0 ? "2" : "0"
@@ -13726,15 +13919,15 @@ const RelationshipPopover = memo$1(() => {
           )
         ] }),
         r2.kind && /* @__PURE__ */ jsxs(HStack, { gap: "2", children: [
-          /* @__PURE__ */ jsx(Label, { children: "kind" }),
+          /* @__PURE__ */ jsx(Label$1, { children: "kind" }),
           /* @__PURE__ */ jsx(Text, { size: "xs", className: css({ userSelect: "all" }), children: r2.kind })
         ] }),
         r2.technology && /* @__PURE__ */ jsxs(HStack, { gap: "2", children: [
-          /* @__PURE__ */ jsx(Label, { children: "technology" }),
+          /* @__PURE__ */ jsx(Label$1, { children: "technology" }),
           /* @__PURE__ */ jsx(Text, { size: "xs", className: css({ userSelect: "all" }), children: r2.technology })
         ] }),
         r2.summary.nonEmpty && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Label, { children: "description" }),
+          /* @__PURE__ */ jsx(Label$1, { children: "description" }),
           /* @__PURE__ */ jsx(
             Box,
             {
@@ -13752,13 +13945,13 @@ const RelationshipPopover = memo$1(() => {
           )
         ] }),
         links.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Label, { children: "links" }),
+          /* @__PURE__ */ jsx(Label$1, { children: "links" }),
           /* @__PURE__ */ jsx(HStack, { gap: "1", flexWrap: "wrap", children: links.map((link) => /* @__PURE__ */ jsx(Link, { size: "sm", value: link }, link.url)) })
         ] })
       ]
     }
   );
-}), Label = styled("div", {
+}), Label$1 = styled("div", {
   base: {
     display: "block",
     fontSize: "xxs",
@@ -14000,14 +14193,14 @@ const shapeBadge = css({
       )
     }
   );
-}, selector = (s) => ({
+}, selector$1 = (s) => ({
   id: s.view.id,
   notations: s.view.notation?.nodes ?? []
 }), NotationPanel = memo$1(() => {
   const height = useXYStore((s) => s.height), {
     id,
     notations
-  } = useDiagramContext(selector), [isCollapsed, setCollapsed] = useLocalStorage({
+  } = useDiagramContext(selector$1), [isCollapsed, setCollapsed] = useLocalStorage({
     key: "notation-webview-collapsed",
     defaultValue: !0
   }), hasNotations = notations.length > 0, portalProps = useMantinePortalProps();
@@ -14132,7 +14325,7 @@ const shapeBadge = css({
     console.warn("DiagramUI: resetting error boundary and rerendering..."), rerender();
   }, []);
   return /* @__PURE__ */ jsxs(ErrorBoundary, { onReset: handleReset, children: [
-    enableControls && /* @__PURE__ */ jsx(NavigationPanel, {}),
+    enableControls && /* @__PURE__ */ jsx(NavigationPanel$1, {}),
     overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
     enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
     enableSearch && searchActorRef && /* @__PURE__ */ jsx(Search, { searchActorRef }),
@@ -14302,7 +14495,7 @@ const getEdgeCenter = (path) => {
     x: Math.round(dompoint.x),
     y: Math.round(dompoint.y)
   };
-}, RelationshipEdge = memoEdge((props) => {
+}, RelationshipEdge$1 = memoEdge((props) => {
   const [isControlPointDragging, setIsControlPointDragging] = useState(!1), isControlPointDraggingRef = useRef(isControlPointDragging);
   isControlPointDraggingRef.current = isControlPointDragging;
   const xyflow2 = useXYFlow(), diagram = useDiagram(), {
@@ -14460,7 +14653,7 @@ const getEdgeCenter = (path) => {
     )
   ] });
 });
-RelationshipEdge.displayName = "RelationshipEdge";
+RelationshipEdge$1.displayName = "RelationshipEdge";
 function ControlPoints({
   isControlPointDragging,
   edgeProps,
@@ -14638,7 +14831,7 @@ const BuiltinNodes = {
   SequenceActorNode,
   SequenceParallelArea
 }, BuiltinEdges = {
-  RelationshipEdge,
+  RelationshipEdge: RelationshipEdge$1,
   SequenceStepEdge
 };
 class Rect {
@@ -14929,7 +15122,7 @@ function useLayoutConstraints() {
     }
   }), [xystore, diagram]);
 }
-const edgeTypes = {
+const edgeTypes$1 = {
   relationship: BuiltinEdges.RelationshipEdge,
   "seq-step": BuiltinEdges.SequenceStepEdge
 }, builtinNodes = {
@@ -15027,7 +15220,7 @@ function LikeC4DiagramXYFlow({
       edges,
       className: cx(initialized ? "initialized" : "not-initialized"),
       nodeTypes: nodeTypes2,
-      edgeTypes,
+      edgeTypes: edgeTypes$1,
       onNodesChange: useCallbackRef((changes) => {
         diagram.send({ type: "xyflow.applyNodeChanges", changes });
       }),
@@ -15091,6 +15284,7 @@ function LikeC4DiagramXYFlow({
       nodesDraggable,
       nodesSelectable,
       elevateEdgesOnSelect: !enableReadOnly,
+      zIndexMode: "manual",
       ...nodesDraggable && layoutConstraints,
       ...props,
       ...reactFlowProps,
@@ -16117,7 +16311,7 @@ function getAligner(mode) {
       nonexhaustive(mode);
   }
 }
-const setViewport = (params) => machine.createAction(({ context: context2, event }) => {
+const setViewport = (params) => machine$1.createAction(({ context: context2, event }) => {
   let viewport, duration;
   params ? (viewport = params.viewport, duration = params.duration) : (assertEvent(event, "xyflow.setViewport"), viewport = event.viewport, duration = event.duration), duration = duration ?? 400;
   const { panZoom } = nonNullable$1(context2.xystore).getState(), animationProps = duration > 0 ? { duration, interpolate: "smooth" } : void 0;
@@ -16128,7 +16322,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
   }, animationProps).catch((err) => {
     console.error("Error during fitDiagram panZoom setViewport", { err });
   });
-}), fitDiagram = (params) => machine.enqueueActions(({ context: context2, event, enqueue }) => {
+}), fitDiagram$1 = (params) => machine$1.enqueueActions(({ context: context2, event, enqueue }) => {
   let bounds = context2.view.bounds, duration;
   params ? (bounds = params.bounds ?? context2.view.bounds, duration = params.duration) : event.type === "xyflow.fitDiagram" && (bounds = event.bounds ?? context2.view.bounds, duration = event.duration, enqueue.assign({
     viewportChangedManually: !1
@@ -16146,7 +16340,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
   panZoom?.setViewport(viewport, animationProps).catch((err) => {
     console.error("Error during fitDiagram panZoom setViewport", { err });
   });
-}), fitFocusedBounds = () => machine.createAction(({ context: context2 }) => {
+}), fitFocusedBounds = () => machine$1.createAction(({ context: context2 }) => {
   const isActiveSequenceWalkthrough = !!context2.activeWalkthrough && context2.dynamicViewVariant === "sequence", { bounds, duration = 450 } = isActiveSequenceWalkthrough ? activeSequenceBounds({ context: context2 }) : focusedBounds({ context: context2 }), { width, height, panZoom, transform } = nonNullable$1(context2.xystore).getState(), maxZoom = Math.max(1, transform[2]), viewport = getViewportForBounds(
     bounds,
     width,
@@ -16162,7 +16356,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
   });
 }), DEFAULT_DELAY = 30, raiseSetViewport = (params) => {
   const { delay: delay2 = DEFAULT_DELAY, ...rest } = params ?? {};
-  return machine.raise(
+  return machine$1.raise(
     {
       type: "xyflow.setViewport",
       ...rest
@@ -16172,9 +16366,9 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       delay: delay2
     }
   );
-}, cancelFitDiagram = () => machine.cancel("fitDiagram"), raiseFitDiagram = (params) => {
+}, cancelFitDiagram$1 = () => machine$1.cancel("fitDiagram"), raiseFitDiagram$1 = (params) => {
   const { delay: delay2 = DEFAULT_DELAY, ...rest } = params ?? {};
-  return machine.raise(
+  return machine$1.raise(
     {
       type: "xyflow.fitDiagram",
       ...rest
@@ -16184,28 +16378,28 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       delay: delay2
     }
   );
-}, raiseUpdateView = (view) => machine.raise(({ context: context2 }) => ({
+}, raiseUpdateView = (view) => machine$1.raise(({ context: context2 }) => ({
   type: "update.view",
   view: context2.view
-}), { delay: DEFAULT_DELAY }), assignViewportBefore = (viewport) => machine.assign(({ context: context2 }) => ({
+}), { delay: DEFAULT_DELAY }), assignViewportBefore = (viewport) => machine$1.assign(({ context: context2 }) => ({
   // We can assign
   viewportBefore: {
     wasChangedManually: context2.viewportChangedManually,
     value: { ...context2.viewport }
   }
-})), returnViewportBefore = (params) => machine.enqueueActions(({ enqueue, context: { viewportBefore } }) => {
-  enqueue(cancelFitDiagram()), viewportBefore ? (enqueue.assign({
+})), returnViewportBefore = (params) => machine$1.enqueueActions(({ enqueue, context: { viewportBefore } }) => {
+  enqueue(cancelFitDiagram$1()), viewportBefore ? (enqueue.assign({
     viewportChangedManually: viewportBefore.wasChangedManually,
     viewportBefore: null
-  }), params && params.delay === 0 ? enqueue(setViewport({ viewport: viewportBefore.value, ...params })) : enqueue(raiseSetViewport({ viewport: viewportBefore.value, ...params }))) : params && params.delay === 0 ? enqueue(fitDiagram({ ...params })) : enqueue(raiseFitDiagram({ ...params }));
-}), disableCompareWithLatest = () => machine.assign(({ context: context2 }) => ({
+  }), params && params.delay === 0 ? enqueue(setViewport({ viewport: viewportBefore.value, ...params })) : enqueue(raiseSetViewport({ viewport: viewportBefore.value, ...params }))) : params && params.delay === 0 ? enqueue(fitDiagram$1({ ...params })) : enqueue(raiseFitDiagram$1({ ...params }));
+}), disableCompareWithLatest = () => machine$1.assign(({ context: context2 }) => ({
   toggledFeatures: {
     ...context2.toggledFeatures,
     enableCompareWithLatest: !1
   },
   viewportOnAutoLayout: null,
   viewportOnManualLayout: null
-})), onEdgeDoubleClick = () => machine.assign(({ context: context2, event }) => {
+})), onEdgeDoubleClick = () => machine$1.assign(({ context: context2, event }) => {
   if (assertEvent(event, "xyflow.edgeDoubleClick"), !event.edge.data.controlPoints)
     return {};
   const { nodeLookup } = context2.xystore.getState();
@@ -16226,7 +16420,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       return e2;
     })
   };
-}), assignLastClickedNode = () => machine.assign(({ context: context2, event }) => {
+}), assignLastClickedNode = () => machine$1.assign(({ context: context2, event }) => {
   assertEvent(event, "xyflow.nodeClick");
   const { lastClickedNode } = context2;
   return !lastClickedNode || lastClickedNode.id !== event.node.id ? {
@@ -16242,7 +16436,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       timestamp: Date.now()
     }
   };
-}), assignFocusedNode = () => machine.assign(({ event }) => {
+}), assignFocusedNode = () => machine$1.assign(({ event }) => {
   let focusedNode, autoUnfocusTimer = !1;
   switch (event.type) {
     case "xyflow.nodeClick":
@@ -16258,11 +16452,11 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
     focusedNode,
     autoUnfocusTimer
   };
-}), resetLastClickedNode = () => machine.assign(() => ({
+}), resetLastClickedNode = () => machine$1.assign(() => ({
   lastClickedNode: null
-})), updateFeatures = () => machine.assign(({ event }) => (assertEvent(event, "update.features"), {
+})), updateFeatures = () => machine$1.assign(({ event }) => (assertEvent(event, "update.features"), {
   features: { ...event.features }
-})), updateInputs = () => machine.assign(({ event }) => (assertEvent(event, "update.inputs"), { ...event.inputs })), assignXYDataFromView = (view) => machine.assign(({ context: context2, event }) => {
+})), updateInputs = () => machine$1.assign(({ event }) => (assertEvent(event, "update.inputs"), { ...event.inputs })), assignXYDataFromView = (view) => machine$1.assign(({ context: context2, event }) => {
   let xydata;
   assertEvent(event, "update.view"), xydata = "xynodes" in event ? event : convertToXYFlow({
     dynamicViewVariant: context2.dynamicViewVariant,
@@ -16283,50 +16477,50 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
     };
   }
   return update;
-}), focusOnNodesAndEdges = () => machine.enqueueActions(({ context: context2, enqueue }) => {
+}), focusOnNodesAndEdges = () => machine$1.enqueueActions(({ context: context2, enqueue }) => {
   const next = focusNodesEdges(context2);
   next ? enqueue.assign(next) : enqueue.raise({ type: "key.esc" });
-}), undimEverything = () => machine.assign(({ context: context2 }) => ({
+}), undimEverything = () => machine$1.assign(({ context: context2 }) => ({
   xynodes: context2.xynodes.map(Base.setDimmed(!1)),
   xyedges: context2.xyedges.map(Base.setData({
     dimmed: !1,
     active: !1
   }))
-})), assignDynamicViewVariant = () => machine.assign(({ event }) => (assertEvent(event, "switch.dynamicViewVariant"), {
+})), assignDynamicViewVariant = () => machine$1.assign(({ event }) => (assertEvent(event, "switch.dynamicViewVariant"), {
   dynamicViewVariant: event.variant
-})), onNodeMouseEnter = (params) => machine.assign(({ context: context2, event }) => {
+})), onNodeMouseEnter = (params) => machine$1.assign(({ context: context2, event }) => {
   let node2 = params?.node;
   return node2 || (assertEvent(event, "xyflow.nodeMouseEnter"), node2 = event.node), {
     xynodes: context2.xynodes.map((n2) => n2.id === node2.id ? Base.setHovered(n2, !0) : n2)
   };
-}), onNodeMouseLeave = (params) => machine.assign(({ context: context2, event }) => {
+}), onNodeMouseLeave = (params) => machine$1.assign(({ context: context2, event }) => {
   let node2 = params?.node;
   return node2 || (assertEvent(event, "xyflow.nodeMouseLeave"), node2 = event.node), {
     xynodes: context2.xynodes.map((n2) => n2.id === node2.id ? Base.setHovered(n2, !1) : n2)
   };
-}), emitPaneClick = () => machine.emit(() => ({
+}), emitPaneClick = () => machine$1.emit(() => ({
   type: "paneClick"
-})), emitOpenSource = (params) => machine.emit(({ event }) => params ? {
+})), emitOpenSource = (params) => machine$1.emit(({ event }) => params ? {
   type: "openSource",
   params
 } : (assertEvent(event, "open.source"), {
   type: "openSource",
   params: event
-})), emitInitialized = () => machine.emit(({ context: context2 }) => (invariant$1(context2.xyflow, "XYFlow instance not found"), {
+})), emitInitialized = () => machine$1.emit(({ context: context2 }) => (invariant$1(context2.xyflow, "XYFlow instance not found"), {
   type: "initialized",
   instance: context2.xyflow
-})), emitNodeClick = () => machine.emit(({ context: context2, event }) => (assertEvent(event, "xyflow.nodeClick"), {
+})), emitNodeClick = () => machine$1.emit(({ context: context2, event }) => (assertEvent(event, "xyflow.nodeClick"), {
   type: "nodeClick",
   node: nonNullable$1(findDiagramNode(context2, event.node.id), `Node ${event.node.id} not found in diagram`),
   xynode: event.node
-})), emitNavigateTo = (params) => machine.emit(({ context: context2 }) => ({
+})), emitNavigateTo = (params) => machine$1.emit(({ context: context2 }) => ({
   type: "navigateTo",
   viewId: params?.viewId ?? nonNullable$1(context2.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
-})), emitEdgeClick = () => machine.emit(({ context: context2, event }) => (assertEvent(event, "xyflow.edgeClick"), {
+})), emitEdgeClick = () => machine$1.emit(({ context: context2, event }) => (assertEvent(event, "xyflow.edgeClick"), {
   type: "edgeClick",
   edge: nonNullable$1(findDiagramEdge(context2, event.edge.id), `Edge ${event.edge.id} not found in diagram`),
   xyedge: event.edge
-})), triggerChange = (viewChange) => machine.enqueueActions(({ event, enqueue }) => {
+})), triggerChange = (viewChange) => machine$1.enqueueActions(({ event, enqueue }) => {
   let change = viewChange;
   change || (assertEvent(event, "trigger.change"), change = event.change), enqueue.assign({
     viewportChangedManually: !0
@@ -16337,7 +16531,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       change
     }
   );
-}), emitOnLayoutTypeChange = () => machine.enqueueActions(({ event, system, context: context2, enqueue }) => {
+}), emitOnLayoutTypeChange = () => machine$1.enqueueActions(({ event, system, context: context2, enqueue }) => {
   if (!context2.features.enableCompareWithLatest) {
     console.warn("Layout type cannot be changed while CompareWithLatest feature is disabled");
     return;
@@ -16363,7 +16557,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
     type: "onLayoutTypeChange",
     layoutType: nextLayoutType
   });
-}), layoutAlign = (params) => machine.createAction(({ context: context2, event }) => {
+}), layoutAlign = (params) => machine$1.createAction(({ context: context2, event }) => {
   let mode;
   assertEvent(event, "layout.align"), mode = event.mode;
   const xystore = nonNullable$1(context2.xystore, "xystore is not initialized"), { nodeLookup, parentLookup } = xystore.getState(), nodesToAlign = [...new Set(nodeLookup.values().filter((n2) => n2.selected).map((n2) => n2.id)).difference(new Set(parentLookup.keys()))];
@@ -16382,7 +16576,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       ...aligner.applyPosition(toNodeRect(node2))
     };
   constraints.updateXYFlow();
-}), resetEdgesControlPoints = () => machine.assign(({ context: context2 }) => {
+}), resetEdgesControlPoints = () => machine$1.assign(({ context: context2 }) => {
   const { nodeLookup } = context2.xystore.getState();
   return {
     xyedges: context2.xyedges.map((edge) => {
@@ -16400,16 +16594,16 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       };
     })
   };
-}), notationsHighlight = () => machine.assign(({ context: context2, event }) => {
+}), notationsHighlight = () => machine$1.assign(({ context: context2, event }) => {
   assertEvent(event, "notations.highlight");
   const { notation, kind } = event, targetKinds = kind ? [kind] : notation.kinds, shouldHighlight = (node2) => node2.notation === notation.title && node2.shape === notation.shape && node2.color === notation.color && targetKinds.includes(node2.kind), xynodes = context2.xynodes.map((n2) => {
     const node2 = findDiagramNode(context2, n2.id), highlighted = node2 && shouldHighlight(node2);
     return Base.setDimmed(n2, highlighted ? !1 : "immediate");
   }), xyedges = context2.xyedges.map((edge) => Base.setDimmed(edge, !0));
   return { xynodes, xyedges };
-}), tagHighlight = () => machine.assign(({ context: context2, event }) => (assertEvent(event, "tag.highlight"), {
+}), tagHighlight = () => machine$1.assign(({ context: context2, event }) => (assertEvent(event, "tag.highlight"), {
   xynodes: context2.xynodes.map((n2) => n2.data.tags?.includes(event.tag) ? Base.setDimmed(n2, !1) : Base.setDimmed(n2, !0))
-})), assignToggledFeatures = () => machine.assign(({ context: context2, event }) => {
+})), assignToggledFeatures = () => machine$1.assign(({ context: context2, event }) => {
   assertEvent(event, "toggle.feature");
   const currentValue = context2.toggledFeatures[`enable${event.feature}`] ?? context2.features[`enable${event.feature}`], nextValue = event.forceValue ?? !currentValue;
   return {
@@ -16418,20 +16612,20 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       [`enable${event.feature}`]: nextValue
     }
   };
-}), closeSearch = () => machine.sendTo(
+}), closeSearch = () => machine$1.sendTo(
   typedSystem.searchActor,
   {
     type: "close"
   }
-), closeAllOverlays = () => machine.sendTo(
+), closeAllOverlays = () => machine$1.sendTo(
   typedSystem.overlaysActor,
   {
     type: "close.all"
   }
-), stopEditorActor = () => machine.enqueueActions(({ enqueue, system }) => {
+), stopEditorActor = () => machine$1.enqueueActions(({ enqueue, system }) => {
   const actor = typedSystem(system).editorActorRef;
   actor && enqueue.stopChild(actor);
-}), ensureEditorActor = () => machine.enqueueActions(({ enqueue, context: context2, system, check }) => {
+}), ensureEditorActor = () => machine$1.enqueueActions(({ enqueue, context: context2, system, check }) => {
   const hasEditor = check("enabled: Editor"), editor = typedSystem(system).editorActorRef;
   if (!hasEditor && editor) {
     enqueue.stopChild(editor);
@@ -16445,29 +16639,29 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
     },
     syncSnapshot: !0
   });
-}), startEditing = (subject = "node") => machine.sendTo(
+}), startEditing = (subject = "node") => machine$1.sendTo(
   typedSystem.editorActor,
   {
     type: "edit.start",
     subject
   }
-), sendSynced = () => machine.sendTo(
+), sendSynced = () => machine$1.sendTo(
   typedSystem.editorActor,
   {
     type: "synced"
   }
-), stopEditing = (wasChanged = !0) => machine.sendTo(
+), stopEditing = (wasChanged = !0) => machine$1.sendTo(
   typedSystem.editorActor,
   {
     type: "edit.finish",
     wasChanged
   }
-), cancelEditing = () => machine.sendTo(
+), cancelEditing = () => machine$1.sendTo(
   typedSystem.editorActor,
   {
     type: "cancel"
   }
-), hasModelFqn = (node2) => "modelFqn" in node2.data && e$8(node2.data.modelFqn), openElementDetails = (params) => machine.enqueueActions(({ context: context2, event, enqueue }) => {
+), hasModelFqn = (node2) => "modelFqn" in node2.data && e$8(node2.data.modelFqn), openElementDetails = (params) => machine$1.enqueueActions(({ context: context2, event, enqueue }) => {
   let initiatedFrom = null, fromNodeId, subject;
   switch (!0) {
     case event.type === "xyflow.nodeClick": {
@@ -16518,7 +16712,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       ...initiatedFrom && { initiatedFrom }
     }
   );
-}), openOverlay = () => machine.enqueueActions(({ context: context2, event, enqueue, check }) => {
+}), openOverlay = () => machine$1.enqueueActions(({ context: context2, event, enqueue, check }) => {
   if (assertEvent(event, ["open.relationshipsBrowser", "open.relationshipDetails", "open.elementDetails"]), !check("enabled: Overlays")) {
     console.warn("Overlays feature is disabled");
     return;
@@ -16557,12 +16751,12 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
     default:
       nonexhaustive(event);
   }
-}), openSourceOfFocusedOrLastClickedNode = () => machine.enqueueActions(({ context: context2, enqueue }) => {
+}), openSourceOfFocusedOrLastClickedNode = () => machine$1.enqueueActions(({ context: context2, enqueue }) => {
   const nodeId = context2.focusedNode ?? context2.lastClickedNode?.id;
   if (!nodeId || !context2.features.enableVscode) return;
   const diagramNode = findDiagramNode(context2, nodeId);
   diagramNode && (diagramNode.deploymentRef ? enqueue.raise({ type: "open.source", deployment: diagramNode.deploymentRef }) : diagramNode.modelRef && enqueue.raise({ type: "open.source", element: diagramNode.modelRef }));
-}), ensureOverlaysActor = () => machine.enqueueActions(({ enqueue, check, system }) => {
+}), ensureOverlaysActor = () => machine$1.enqueueActions(({ enqueue, check, system }) => {
   const enableOverlays = check("enabled: Overlays"), hasRunning = typedSystem(system).overlaysActorRef;
   if (enableOverlays && !hasRunning) {
     enqueue.spawnChild("overlaysActorLogic", { id: "overlays", systemId: "overlays" });
@@ -16571,7 +16765,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
   !enableOverlays && hasRunning && (enqueue.sendTo(hasRunning, {
     type: "close.all"
   }), enqueue.stopChild("overlays"));
-}), ensureSearchActor = () => machine.enqueueActions(({ enqueue, context: { features: { enableSearch } }, system }) => {
+}), ensureSearchActor = () => machine$1.enqueueActions(({ enqueue, context: { features: { enableSearch } }, system }) => {
   const hasRunning = typedSystem(system).searchActorRef;
   if (enableSearch && !hasRunning) {
     enqueue.spawnChild("searchActorLogic", { id: "search", systemId: "search" });
@@ -16580,7 +16774,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
   !enableSearch && hasRunning && (enqueue.sendTo(hasRunning, {
     type: "close"
   }), enqueue.stopChild("search"));
-}), onEdgeMouseEnter = () => machine.enqueueActions(({ enqueue, context: context2, event }) => {
+}), onEdgeMouseEnter = () => machine$1.enqueueActions(({ enqueue, context: context2, event }) => {
   assertEvent(event, "xyflow.edgeMouseEnter");
   let edge = event.edge;
   enqueue.assign({
@@ -16590,7 +16784,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
     edge,
     event: event.event
   });
-}), onEdgeMouseLeave = () => machine.enqueueActions(({ enqueue, context: context2, event }) => {
+}), onEdgeMouseLeave = () => machine$1.enqueueActions(({ enqueue, context: context2, event }) => {
   assertEvent(event, "xyflow.edgeMouseLeave");
   let edge = event.edge;
   enqueue.assign({
@@ -16600,9 +16794,9 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
     edge,
     event: event.event
   });
-}), startHotKeyActor = () => machine.spawnChild("hotkeyActorLogic", { id: "hotkey" }), stopHotKeyActor = () => machine.stopChild("hotkey"), AUTO_UNFOCUS_DELAY = 3e3, startAutoUnfocusTimer = () => machine.enqueueActions(({ context: context2, enqueue }) => {
+}), startHotKeyActor = () => machine$1.spawnChild("hotkeyActorLogic", { id: "hotkey" }), stopHotKeyActor = () => machine$1.stopChild("hotkey"), AUTO_UNFOCUS_DELAY = 3e3, startAutoUnfocusTimer = () => machine$1.enqueueActions(({ context: context2, enqueue }) => {
   context2.autoUnfocusTimer && AUTO_UNFOCUS_DELAY > 0 && enqueue.raise({ type: "focus.autoUnfocus" }, { delay: AUTO_UNFOCUS_DELAY, id: "autoUnfocusTimer" });
-}), cancelAutoUnfocusTimer = () => machine.cancel("autoUnfocusTimer"), handleNavigate = () => machine.enqueueActions(({ enqueue, context: context2, event }) => {
+}), cancelAutoUnfocusTimer = () => machine$1.cancel("autoUnfocusTimer"), handleNavigate = () => machine$1.enqueueActions(({ enqueue, context: context2, event }) => {
   assertEvent(event, ["navigate.to", "navigate.back", "navigate.forward"]);
   const {
     view,
@@ -16667,7 +16861,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
     default:
       nonexhaustive(event);
   }
-}), updateView = () => machine.enqueueActions(
+}), updateView$1 = () => machine$1.enqueueActions(
   ({ enqueue, event, context: context2 }) => {
     if (event.type !== "update.view") {
       console.warn(`Ignoring unexpected event type: ${event.type} in action 'update.view'`);
@@ -16702,11 +16896,11 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
         return;
       }
     }
-    recenter = recenter || nextView._type === "dynamic" && context2.view._type === "dynamic" && nextView.variant !== context2.view.variant, recenter = recenter || context2.toggledFeatures.enableCompareWithLatest === !0 && !!nextView._layout && context2.view._layout !== nextView._layout, recenter && (enqueue(cancelFitDiagram()), enqueue(raiseFitDiagram({
+    recenter = recenter || nextView._type === "dynamic" && context2.view._type === "dynamic" && nextView.variant !== context2.view.variant, recenter = recenter || context2.toggledFeatures.enableCompareWithLatest === !0 && !!nextView._layout && context2.view._layout !== nextView._layout, recenter && (enqueue(cancelFitDiagram$1()), enqueue(raiseFitDiagram$1({
       bounds: event.view.bounds
     })));
   }
-), initializing = machine.createStateConfig({
+), initializing = machine$1.createStateConfig({
   on: {
     "xyflow.init": {
       actions: assign(({ context: context2, event }) => ({
@@ -16731,11 +16925,11 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       target: "isReady"
     }
   }
-}), isReady = machine.createStateConfig({
+}), isReady = machine$1.createStateConfig({
   always: [{
     guard: "isReady",
     actions: [
-      fitDiagram({ duration: 0 }),
+      fitDiagram$1({ duration: 0 }),
       assign(({ context: context2 }) => ({
         navigationHistory: {
           currentIndex: 0,
@@ -16752,7 +16946,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
   }, {
     target: "initializing"
   }]
-}), handleBrowserForwardBackward = () => machine.assign(({ context: context2, event }) => {
+}), handleBrowserForwardBackward = () => machine$1.assign(({ context: context2, event }) => {
   assertEvent(event, "update.view");
   let {
     lastOnNavigate,
@@ -16794,12 +16988,12 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       };
   }
   return {};
-}), navigating = machine.createStateConfig({
+}), navigating = machine$1.createStateConfig({
   id: targetState.navigating.slice(1),
   always: {
     target: targetState.idle,
     actions: [
-      cancelFitDiagram(),
+      cancelFitDiagram$1(),
       handleBrowserForwardBackward(),
       disableCompareWithLatest(),
       enqueueActions(({ enqueue, context: context2, event }) => {
@@ -16904,16 +17098,16 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
           type: "focus.node",
           nodeId: nodeToFocus.id,
           autoUnfocus: !0
-        }, { delay: 150 }) : enqueue(raiseFitDiagram({
+        }, { delay: 150 }) : enqueue(raiseFitDiagram$1({
           delay: 100
         }));
       })
     ]
   }
-}), focused = machine.createStateConfig({
+}), focused = machine$1.createStateConfig({
   id: targetState.focused.slice(1),
   entry: [
-    cancelFitDiagram(),
+    cancelFitDiagram$1(),
     focusOnNodesAndEdges(),
     assignViewportBefore(),
     openSourceOfFocusedOrLastClickedNode(),
@@ -16994,12 +17188,12 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
     "update.view": {
       guard: "is same view",
       actions: [
-        updateView(),
+        updateView$1(),
         focusOnNodesAndEdges()
       ]
     }
   }
-}), idle = machine.createStateConfig({
+}), idle = machine$1.createStateConfig({
   id: targetState.idle.slice(1),
   on: {
     "xyflow.nodeClick": [
@@ -17055,7 +17249,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       actions: [
         resetLastClickedNode(),
         enqueueActions(({ context: context2, enqueue, check }) => {
-          check("enabled: FitView") && enqueue(fitDiagram()), enqueue(
+          check("enabled: FitView") && enqueue(fitDiagram$1()), enqueue(
             emitOpenSource({ view: context2.view.id })
           );
         })
@@ -17092,10 +17286,10 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       ]
     }
   }
-}), printing = machine.createStateConfig({
+}), printing = machine$1.createStateConfig({
   id: targetState.printing.slice(1),
   entry: [
-    cancelFitDiagram(),
+    cancelFitDiagram$1(),
     assignViewportBefore(),
     enqueueActions(({ enqueue, context: context2 }) => {
       const bounds = context2.view.bounds, OFFSET = 16;
@@ -17124,7 +17318,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       ]
     }
   }
-}), updateActiveWalkthroughState = () => machine.enqueueActions(({ context: context2, enqueue }) => {
+}), updateActiveWalkthroughState = () => machine$1.enqueueActions(({ context: context2, enqueue }) => {
   const { activeWalkthrough } = context2;
   if (!activeWalkthrough) {
     console.warn("Active walkthrough is null"), enqueue.raise({ type: "walkthrough.end" });
@@ -17151,26 +17345,26 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       }) : Base.setDimmed(node2, dimmed);
     })
   });
-}), emitWalkthroughStarted = () => machine.emit(({ context: context2 }) => {
+}), emitWalkthroughStarted = () => machine$1.emit(({ context: context2 }) => {
   const edge = context2.xyedges.find((x) => x.id === context2.activeWalkthrough?.stepId);
   return invariant$1(edge, "Invalid walkthrough state"), {
     type: "walkthroughStarted",
     edge
   };
-}), emitWalkthroughStopped = () => machine.emit(() => ({
+}), emitWalkthroughStopped = () => machine$1.emit(() => ({
   type: "walkthroughStopped"
-})), emitWalkthroughStep = () => machine.emit(({ context: context2 }) => {
+})), emitWalkthroughStep = () => machine$1.emit(({ context: context2 }) => {
   const edge = context2.xyedges.find((x) => x.id === context2.activeWalkthrough?.stepId);
   return invariant$1(edge, "Invalid walkthrough state"), {
     type: "walkthroughStep",
     edge
   };
-}), walkthrough = machine.createStateConfig({
+}), walkthrough = machine$1.createStateConfig({
   id: targetState.walkthrough.slice(1),
   entry: [
     startHotKeyActor(),
     cancelEditing(),
-    cancelFitDiagram(),
+    cancelFitDiagram$1(),
     assignViewportBefore(),
     assign({
       activeWalkthrough: ({ context: context2, event }) => {
@@ -17262,7 +17456,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
     "update.view": {
       guard: "is same view",
       actions: [
-        updateView(),
+        updateView$1(),
         updateActiveWalkthroughState()
       ]
     },
@@ -17273,7 +17467,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       target: targetState.idle
     }
   }
-}), ready = machine.createStateConfig({
+}), ready = machine$1.createStateConfig({
   initial: "idle",
   entry: [
     spawnChild("mediaPrintActorLogic", { id: "mediaPrint" }),
@@ -17282,7 +17476,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
     ensureSearchActor()
   ],
   exit: [
-    cancelFitDiagram(),
+    cancelFitDiagram$1(),
     stopChild("mediaPrint"),
     closeAllOverlays(),
     closeSearch(),
@@ -17327,8 +17521,8 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
     "xyflow.resized": {
       guard: ({ context: context2 }) => context2.features.enableFitView && !context2.viewportChangedManually,
       actions: [
-        cancelFitDiagram(),
-        raiseFitDiagram({ delay: 200 })
+        cancelFitDiagram$1(),
+        raiseFitDiagram$1({ delay: 200 })
       ]
     },
     "open.elementDetails": {
@@ -17424,7 +17618,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
     },
     "xyflow.fitDiagram": {
       guard: "enabled: FitView",
-      actions: fitDiagram()
+      actions: fitDiagram$1()
     },
     "xyflow.setViewport": {
       actions: setViewport()
@@ -17437,26 +17631,26 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       },
       // Otherwise, just update the view in place
       {
-        actions: updateView()
+        actions: updateView$1()
       }
     ],
     "media.print.on": {
       target: targetState.printing
     }
   }
-}), key = "likec4:diagram:toggledFeatures", DiagramToggledFeaturesPersistence = {
+}), key$1 = "likec4:diagram:toggledFeatures", DiagramToggledFeaturesPersistence = {
   read() {
     try {
-      let fromStorage = sessionStorage.getItem(key);
+      let fromStorage = sessionStorage.getItem(key$1);
       return fromStorage ? JSON.parse(fromStorage) : null;
     } catch (e2) {
-      return console.error(`Error reading fromStorage ${key}:`, e2), null;
+      return console.error(`Error reading fromStorage ${key$1}:`, e2), null;
     }
   },
   write(toggledFeatures) {
-    return sessionStorage.setItem(key, JSON.stringify(t$2(toggledFeatures, e$c))), toggledFeatures;
+    return sessionStorage.setItem(key$1, JSON.stringify(t$2(toggledFeatures, e$c))), toggledFeatures;
   }
-}, _diagramMachine = machine.createMachine({
+}, _diagramMachine = machine$1.createMachine({
   initial: "initializing",
   context: ({ input: input2 }) => ({
     ...input2,
@@ -17498,7 +17692,7 @@ const setViewport = (params) => machine.createAction(({ context: context2, event
       type: "final",
       entry: [
         stopEditorActor(),
-        cancelFitDiagram(),
+        cancelFitDiagram$1(),
         stopChild("hotkey"),
         stopChild("overlays"),
         stopChild("search"),
@@ -17762,7 +17956,7 @@ function LikeC4Diagram({
   onNodeClick,
   onNodeContextMenu,
   onOpenSource,
-  onBurgerMenuClick,
+  onLogoClick,
   onLayoutTypeChange,
   onInitialized,
   view,
@@ -17849,7 +18043,7 @@ function LikeC4Diagram({
                 onNodeClick,
                 onNodeContextMenu,
                 onOpenSource,
-                onBurgerMenuClick,
+                onLogoClick,
                 onInitialized,
                 onLayoutTypeChange
               },
@@ -17964,6 +18158,609 @@ function StaticLikeC4Diagram({
     }
   );
 }
+function layoutedProjectsViewToXYFlow(view) {
+  return {
+    xynodes: t$a(view.nodes, projectNodeToXY),
+    xyedges: t$a(view.edges, projectEdgeToXY)
+  };
+}
+function projectNodeToXY({ id, x, y, width, height, ...node2 }) {
+  return {
+    id,
+    position: { x, y },
+    type: "project",
+    initialWidth: width,
+    initialHeight: height,
+    draggable: !1,
+    deletable: !1,
+    zIndex: ZIndexes.Element,
+    style: {
+      width,
+      height
+    },
+    data: {
+      id,
+      width,
+      height,
+      ...node2
+    }
+  };
+}
+function projectEdgeToXY({ id, source, target, ...edge }) {
+  return {
+    id,
+    source,
+    target,
+    type: "relationship",
+    zIndex: ZIndexes.Edge,
+    deletable: !1,
+    data: {
+      id,
+      technology: null,
+      labelBBox: null,
+      ...edge
+    }
+  };
+}
+const key = "likec4:projects-overview:lastViewport", ProjectsOverviewViewportPersistence = {
+  read() {
+    try {
+      let fromStorage = sessionStorage.getItem(key);
+      return fromStorage ? JSON.parse(fromStorage) : null;
+    } catch (e2) {
+      return console.error(`Error reading fromStorage ${key}:`, e2), null;
+    }
+  },
+  write(viewport) {
+    if (!viewport) {
+      sessionStorage.removeItem(key);
+      return;
+    }
+    sessionStorage.setItem(key, JSON.stringify(viewport));
+  }
+}, machine = setup({
+  guards: {
+    isReady: ({ context: context2 }) => context2.initialized.xydata && context2.initialized.xyflow && !!context2.xystore && !!context2.xyflow,
+    "click: selected node": ({ event }) => (assertEvent(event, ["xyflow.click.node"]), event.node.selected === !0)
+  }
+}), updateView = () => machine.assign(({ event }) => {
+  assertEvent(event, "update.view");
+  const { xynodes, xyedges } = layoutedProjectsViewToXYFlow(event.view);
+  return {
+    view: event.view,
+    xynodes,
+    xyedges
+  };
+}), xyflowApplyNodeChanges = () => machine.assign(({ context: context2, event }) => (assertEvent(event, "xyflow.applyNodeChanges"), {
+  xynodes: applyNodeChanges(event.changes, context2.xynodes)
+})), xyflowApplyEdgeChanges = () => machine.assign(({ context: context2, event }) => (assertEvent(event, "xyflow.applyEdgeChanges"), {
+  xyedges: applyEdgeChanges(event.changes, context2.xyedges)
+})), onMouseEnterOrLeave = () => machine.assign(({ context: context2, event }) => {
+  assertEvent(event, [
+    "xyflow.mouse.enter.edge",
+    "xyflow.mouse.leave.edge",
+    "xyflow.mouse.enter.node",
+    "xyflow.mouse.leave.node"
+  ]);
+  const isEnter = event.type.startsWith("xyflow.mouse.enter");
+  switch (event.type) {
+    case "xyflow.mouse.enter.edge":
+    case "xyflow.mouse.leave.edge": {
+      const edgeId = event.edge.id;
+      return {
+        xyedges: context2.xyedges.map((e2) => e2.id === edgeId ? Base.setHovered(e2, isEnter) : e2)
+      };
+    }
+    case "xyflow.mouse.enter.node":
+    case "xyflow.mouse.leave.node": {
+      const nodeId = event.node.id;
+      return {
+        xynodes: context2.xynodes.map((n2) => n2.id === nodeId ? Base.setHovered(n2, isEnter) : n2)
+      };
+    }
+    default:
+      nonexhaustive(event);
+  }
+}), saveViewport = () => machine.createAction(({ context: context2 }) => {
+  const xyflow2 = context2.xyflow;
+  xyflow2 && ProjectsOverviewViewportPersistence.write(xyflow2.getViewport());
+}), handleClick = () => machine.enqueueActions(({ event, enqueue }) => {
+  if (event.type === "xyflow.click.double") {
+    enqueue(cancelFitDiagram()), enqueue(raiseFitDiagram());
+    return;
+  }
+  if (event.type === "xyflow.click.pane") {
+    enqueue(cancelFitDiagram());
+    return;
+  }
+  console.warn("Unknown event", event);
+}), cancelFitDiagram = () => machine.cancel("fitDiagram"), raiseFitDiagram = (params) => {
+  const { delay: delay2 = 30, ...rest } = {};
+  return machine.raise(
+    {
+      type: "xyflow.fitDiagram",
+      ...rest
+    },
+    {
+      id: "fitDiagram",
+      delay: delay2
+    }
+  );
+}, fitDiagram = (params) => machine.enqueueActions(({ context: context2, event, enqueue }) => {
+  enqueue(cancelFitDiagram());
+  let bounds = context2.view.bounds, duration;
+  params ? (bounds = params.bounds ?? context2.view.bounds, duration = params.duration) : event.type === "xyflow.fitDiagram" && (bounds = event.bounds ?? context2.view.bounds, duration = event.duration), duration ??= 450;
+  const { width, height, panZoom, transform } = nonNullable$1(context2.xystore).getState(), maxZoom = Math.max(1, transform[2]), viewport = getViewportForBounds(
+    bounds,
+    width,
+    height,
+    MinZoom,
+    maxZoom,
+    context2.fitViewPadding
+  );
+  viewport.x = Math.round(viewport.x), viewport.y = Math.round(viewport.y);
+  const animationProps = duration > 0 ? { duration, interpolate: "smooth" } : void 0;
+  panZoom?.setViewport(viewport, animationProps).catch((err) => {
+    console.error("Error during fitDiagram panZoom setViewport", { err });
+  }), ProjectsOverviewViewportPersistence.write(null);
+}), restoreViewport = () => machine.enqueueActions(({ context: context2, enqueue }) => {
+  const viewport = ProjectsOverviewViewportPersistence.read();
+  if (viewport) {
+    nonNullable$1(context2.xyflow).setViewport(viewport, {
+      duration: 0
+    });
+    return;
+  }
+  enqueue(fitDiagram({ duration: 0 }));
+}), dispose = () => machine.assign({
+  xyflow: null,
+  xystore: null,
+  initialized: {
+    xyflow: !1,
+    xydata: !1
+  },
+  xyedges: [],
+  xynodes: []
+}), assignNavigateTo = () => machine.assign(({ event, context: context2 }) => {
+  let navigateTo;
+  switch (event.type) {
+    case "xyflow.click.node": {
+      navigateTo = event.node;
+      break;
+    }
+    case "navigate.to": {
+      navigateTo = nonNullable$1(context2.xynodes.find((n2) => n2.id === event.fromNode), `Node ${event.fromNode} not found`);
+      break;
+    }
+    default:
+      return console.warn(`Unexpected event ${event.type} in assignNavigateTo`), {};
+  }
+  return {
+    navigateTo
+  };
+}), _projectOverviewLogic = machine.createMachine({
+  id: "projects-overview",
+  context: ({ input: input2 }) => ({
+    ...input2,
+    initialized: {
+      xydata: !1,
+      xyflow: !1
+    },
+    xyflow: null,
+    xystore: null,
+    xynodes: [],
+    xyedges: []
+  }),
+  initial: "init",
+  on: {
+    close: {
+      target: ".closed"
+    }
+  },
+  states: {
+    init: {
+      on: {
+        "update.view": {
+          actions: [
+            updateView(),
+            assign(({ context: context2 }) => ({
+              initialized: {
+                ...context2.initialized,
+                xydata: !0
+              }
+            }))
+          ],
+          target: "isReady"
+        },
+        "xyflow.init": {
+          actions: [
+            assign(({ context: context2, event }) => ({
+              initialized: {
+                ...context2.initialized,
+                xyflow: !0
+              },
+              xyflow: event.xyflow,
+              xystore: event.xystore
+            }))
+          ],
+          target: "isReady"
+        }
+      }
+    },
+    isReady: {
+      always: [{
+        guard: "isReady",
+        target: "active"
+      }, {
+        target: "init"
+      }]
+    },
+    active: {
+      tags: "active",
+      entry: [
+        restoreViewport()
+      ],
+      on: {
+        "navigate.to": {
+          actions: assignNavigateTo(),
+          target: "navigate"
+        },
+        "xyflow.applyNodeChanges": {
+          actions: xyflowApplyNodeChanges()
+        },
+        "xyflow.applyEdgeChanges": {
+          actions: xyflowApplyEdgeChanges()
+        },
+        "xyflow.mouse.*": {
+          actions: onMouseEnterOrLeave()
+        },
+        "xyflow.click.node": [
+          {
+            guard: "click: selected node",
+            actions: assignNavigateTo(),
+            target: "navigate"
+          }
+        ],
+        "xyflow.click.*": {
+          actions: handleClick()
+        },
+        "xyflow.fitDiagram": {
+          actions: fitDiagram()
+        },
+        "update.view": {
+          actions: updateView()
+        }
+      }
+    },
+    navigate: {
+      tags: "active",
+      entry: [
+        cancelFitDiagram(),
+        saveViewport(),
+        assign({
+          xyedges: []
+        }),
+        ({ context: { navigateTo, xyflow: xyflow2, xystore }, self }) => {
+          invariant$1(xyflow2 && navigateTo, "Invalid state, xyflow is undefined");
+          const { width, domNode } = nonNullable$1(xystore).getState(), nextZoom = t(
+            Math.min(
+              width * 2 / 3 / navigateTo.data.width
+              // (height - 200) / (navigateTo.data.height),
+            ),
+            { min: MinZoom, max: 2.5 }
+          ), next = {
+            x: Math.round(
+              -nextZoom * navigateTo.position.x + (width - nextZoom * navigateTo.data.width) / 2
+            ),
+            y: Math.round(-nextZoom * navigateTo.position.y) + 50
+          }, current = xyflow2.getViewport(), otherNodes = domNode.querySelectorAll(
+            `.react-flow__node-project:not([data-id="${navigateTo.id}"]) > *`
+          ), otherNodesAnimation = animate(otherNodes, {
+            opacity: 0,
+            scale: 0.9
+          }, {
+            visualDuration: 0.25,
+            delay: stagger(0.08, { from: "center" })
+          }), v = motionValue(1), transform = mapValue(
+            v,
+            [1, 0],
+            [
+              `translate(${current.x}px, ${current.y}px) scale(${current.zoom})`,
+              `translate(${next.x}px, ${next.y}px) scale(${nextZoom})`
+            ]
+          ), cancelViewportAnimation = styleEffect(
+            domNode.querySelector(".xyflow__viewport"),
+            { transform }
+          ), cancelOpacityAnimation = styleEffect(
+            domNode.querySelector(`.react-flow__node-project:is([data-id="${navigateTo.id}"]) > *`),
+            { opacity: v }
+          ), targetAnimation = animate(
+            v,
+            0,
+            {
+              delay: otherNodes.length > 3 ? 0.25 : 0,
+              type: "spring",
+              stiffness: 350,
+              damping: 40,
+              mass: 1.5,
+              visualDuration: 0.55
+            }
+          );
+          Promise.race([
+            targetAnimation.finished,
+            sleep(750)
+          ]).then(() => {
+            cancelViewportAnimation(), cancelOpacityAnimation(), targetAnimation.stop(), otherNodesAnimation.stop(), self.send({
+              type: "emit.navigate.to",
+              projectId: navigateTo.data.projectId
+            });
+          });
+        }
+      ],
+      on: {
+        "emit.navigate.to": {
+          actions: emit(({ event }) => ({
+            ...event,
+            type: "navigate.to"
+          }))
+        }
+      }
+    },
+    closed: {
+      id: "closed",
+      type: "final",
+      entry: dispose()
+    }
+  }
+}), projectOverviewLogic = _projectOverviewLogic;
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+const ProjectsOverviewActorContext = createContext(null);
+function useProjectsOverviewActor() {
+  return nonNullable$1(useContext(ProjectsOverviewActorContext), "No ProjectsOverviewActorContext");
+}
+const { withProvider, withContext } = createStyleContext(navigationPanel), shouldForwardProp = (prop, variantKeys) => isValidMotionProp(prop) || !variantKeys.includes(prop) && !isCssProperty(prop), LogoButton = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  "button",
+  {
+    ...props,
+    ref,
+    className: cx(
+      "mantine-active",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx(
+        Logo$1,
+        {
+          className: css({
+            display: {
+              base: "none",
+              "@/md": "block"
+            }
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Logo$1,
+        {
+          className: css({
+            display: {
+              base: "block",
+              "@/md": "none"
+            }
+          })
+        }
+      )
+    ]
+  }
+)), Root = withProvider(MotionDiv, "root", {
+  shouldForwardProp
+}), Body = withContext(MotionDiv, "body", {
+  shouldForwardProp
+}), Logo = withContext(LogoButton, "logo"), Label = withContext(MotionDiv, "label", {
+  shouldForwardProp
+});
+withContext(MotionDiv, "dropdown", {
+  shouldForwardProp
+});
+const NavigationPanel = {
+  Root,
+  Body,
+  Logo,
+  Label
+}, ProjectsOverviewPanel = () => /* @__PURE__ */ jsx(NavigationPanel.Root, { size: "lg", children: /* @__PURE__ */ jsxs(NavigationPanel.Body, { children: [
+  /* @__PURE__ */ jsx(NavigationPanel.Logo, {}),
+  /* @__PURE__ */ jsx(NavigationPanel.Label, { children: "Projects Overview" })
+] }) }), RelationshipEdge = memoEdge((edgeProps) => {
+  const path = bezierPath(edgeProps.data.points);
+  return /* @__PURE__ */ jsxs(EdgeContainer, { ...edgeProps, children: [
+    /* @__PURE__ */ jsx(
+      EdgePath,
+      {
+        edgeProps,
+        svgPath: path
+      }
+    ),
+    /* @__PURE__ */ jsx(EdgeLabelContainer, { edgeProps, children: /* @__PURE__ */ jsx(EdgeLabel, { edgeProps }) })
+  ] });
+});
+function ProjectNode(props) {
+  const actor = useProjectsOverviewActor(), navigateTo = useCallbackRef$1((e2) => {
+    e2.stopPropagation(), actor.send({ type: "navigate.to", fromNode: props.data.id, projectId: props.data.projectId });
+  });
+  return /* @__PURE__ */ jsxs(
+    ElementNodeContainer,
+    {
+      layout: !0,
+      nodeProps: props,
+      children: [
+        /* @__PURE__ */ jsx(ElementShape, { ...props }),
+        /* @__PURE__ */ jsx(ElementData, { ...props }),
+        /* @__PURE__ */ jsx(
+          ElementActionButtons,
+          {
+            ...props,
+            buttons: [
+              {
+                key: "navigate",
+                icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+                onClick: navigateTo
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(DefaultHandles, {})
+      ]
+    },
+    props.id
+  );
+}
+function useProjectsOverviewState(selector3, compare2 = shallowEqual) {
+  const actor = useProjectsOverviewActor();
+  return useSelector(actor, selector3, compare2);
+}
+function useProjectsOverviewXYStoreApi() {
+  return useStoreApi();
+}
+const nodeTypes = {
+  project: ProjectNode
+}, edgeTypes = {
+  relationship: RelationshipEdge
+}, selector = (state) => ({
+  isActive: state.hasTag("active"),
+  nodes: state.context.xynodes,
+  edges: state.context.xyedges
+}), selectorEq = (a, b) => a.isActive === b.isActive && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges), ProjectsOverviewXY = memo$1(({
+  background = "dots",
+  ...props
+}) => {
+  const actorRef = useProjectsOverviewActor(), {
+    isActive,
+    nodes,
+    edges
+  } = useProjectsOverviewState(
+    selector,
+    selectorEq
+  ), xystore = useProjectsOverviewXYStoreApi();
+  return /* @__PURE__ */ jsx(
+    BaseXYFlow,
+    {
+      nodes,
+      edges,
+      className: cx(
+        isActive ? "initialized" : "not-initialized",
+        "projects-overview"
+      ),
+      nodeTypes,
+      edgeTypes,
+      fitView: !1,
+      onNodeClick: useCallbackRef((_e, node2) => {
+        _e.stopPropagation(), actorRef.send({ type: "xyflow.click.node", node: node2 });
+      }),
+      onEdgeClick: useCallbackRef((_e, edge) => {
+        _e.stopPropagation(), actorRef.send({ type: "xyflow.click.edge", edge });
+      }),
+      onPaneClick: useCallbackRef((_e) => {
+        _e.stopPropagation(), actorRef.send({ type: "xyflow.click.pane" });
+      }),
+      onDoubleClick: useCallbackRef((_e) => {
+        _e.stopPropagation(), actorRef.send({ type: "xyflow.click.double" });
+      }),
+      onNodesChange: useCallbackRef((changes) => {
+        actorRef.send({ type: "xyflow.applyNodeChanges", changes });
+      }),
+      onEdgesChange: useCallbackRef((changes) => {
+        actorRef.send({ type: "xyflow.applyEdgeChanges", changes });
+      }),
+      onEdgeMouseEnter: useCallbackRef((event, edge) => {
+        actorRef.send({ type: "xyflow.mouse.enter.edge", edge, event });
+      }),
+      onEdgeMouseLeave: useCallbackRef((event, edge) => {
+        actorRef.send({ type: "xyflow.mouse.leave.edge", edge, event });
+      }),
+      onNodeMouseEnter: useCallbackRef((event, node2) => {
+        actorRef.send({ type: "xyflow.mouse.enter.node", node: node2 });
+      }),
+      onNodeMouseLeave: useCallbackRef((event, node2) => {
+        actorRef.send({ type: "xyflow.mouse.leave.node", node: node2 });
+      }),
+      onInit: useCallbackRef((xyflow2) => {
+        actorRef.send({ type: "xyflow.init", xyflow: xyflow2, xystore });
+      }),
+      nodesDraggable: !1,
+      nodesSelectable: !0,
+      pannable: !0,
+      zoomable: !0,
+      background,
+      ...props
+    }
+  );
+});
+ProjectsOverviewXY.displayName = "ProjectsOverviewXY";
+function ProjectsOverview({
+  view,
+  onNavigateToProject,
+  fitViewPadding = {
+    top: "50px",
+    bottom: "32px",
+    left: "32px",
+    right: "32px"
+  },
+  ...props
+}) {
+  const actorRef = useActorRef(
+    projectOverviewLogic,
+    {
+      input: { view, fitViewPadding }
+    }
+  );
+  useEffect(() => {
+    actorRef.send({ type: "update.view", view });
+  }, [actorRef, view]);
+  const onNavigateToProjectRef = useSyncedRef(onNavigateToProject);
+  useEffect(() => {
+    const subs = [
+      actorRef.on("navigate.to", ({ projectId }) => {
+        onNavigateToProjectRef.current?.(projectId);
+      })
+    ];
+    return () => {
+      subs.forEach((sub) => sub.unsubscribe());
+    };
+  }, [actorRef]);
+  const bounds = view.bounds, initialRef = useRef({
+    initialNodes: [],
+    initialEdges: [],
+    initialWidth: bounds.width,
+    initialHeight: bounds.height,
+    fitView: !1
+  });
+  return /* @__PURE__ */ jsx(ProjectsOverviewActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsxs(ReactFlowProvider, { ...initialRef.current, children: [
+    /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: !1, children: /* @__PURE__ */ jsx(ProjectsOverviewXY, { ...props }) }),
+    /* @__PURE__ */ jsx(ProjectsOverviewPanel, {})
+  ] }) });
+}
+function LikeC4ProjectsOverview({
+  view,
+  className,
+  onNavigateToProject,
+  ...props
+}) {
+  const onChangeLikeC4Project = useChangeLikeC4Project(), id = useId();
+  return onNavigateToProject ??= onChangeLikeC4Project, /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsxs(FramerMotionConfig, { children: [
+    /* @__PURE__ */ jsx(LikeC4Styles, { id }),
+    /* @__PURE__ */ jsx(RootContainer, { id, className, children: /* @__PURE__ */ jsx(
+      ProjectsOverview,
+      {
+        view,
+        onNavigateToProject,
+        ...props
+      }
+    ) })
+  ] }) });
+}
 export {
   Box as B,
   IconRendererProvider as I,
@@ -17971,18 +18768,18 @@ export {
   Markdown as M,
   StaticLikeC4Diagram as S,
   LikeC4ModelProvider as a,
-  useUpdateEffect as b,
+  useLikeC4Model as b,
   css as c,
-  useLikeC4Model as d,
-  IconStarFilled as e,
-  IconStack2 as f,
-  IconLayoutDashboard as g,
-  IconFileCode as h,
-  IconFolderOpen as i,
-  IconFolderFilled as j,
-  IconArrowLeft as k,
-  IconMoonStars as l,
-  IconSun as m,
+  IconStarFilled as d,
+  IconStack2 as e,
+  IconLayoutDashboard as f,
+  IconFileCode as g,
+  IconFolderOpen as h,
+  IconFolderFilled as i,
+  IconArrowLeft as j,
+  IconMoonStars as k,
+  IconSun as l,
+  useLikeC4Projects as m,
   IconChevronDown as n,
   IconAlertTriangle as o,
   IconCheck as p,
@@ -17990,8 +18787,10 @@ export {
   IconExternalLink as r,
   IconShare as s,
   pickViewBounds as t,
-  useLikeC4Projects as u,
+  useUpdateEffect as u,
   LikeC4Diagram as v,
-  LikeC4EditorProvider as w,
-  useDiagramContext as x
+  useDiagramContext as w,
+  LikeC4EditorProvider as x,
+  useChangeLikeC4Project as y,
+  LikeC4ProjectsOverview as z
 };