likec4 1.42.0 → 1.42.1

package/__app__/src/likec4.js

@@ -1,7 +1,7 @@
-import { forwardRef, createElement, useContext, createContext, useRef, useState, useEffect, useMemo, memo as memo$1, useCallback, useLayoutEffect, useDeferredValue, Fragment as Fragment$1 } from "react";
+import { forwardRef, createElement, useContext, createContext, useState, useRef, useEffect, useMemo, memo as memo$1, useCallback, useLayoutEffect, useDeferredValue, Fragment as Fragment$1 } from "react";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import "react-dom";
-import { u as useFirstMountState, a as useCustomCompareEffect, s as shallowEqual, b as useStoreApi, c as useStore, d as useCallbackRef, e as useReactFlow, f as useInternalNode, t, g as e, h as compare$1, i as e$1, j as e$2, k as t$1, l as setExports, m as unified, r as remarkParse, n as remarkGfm, o as remarkRehype, p as rehypeRaw, q as rehypeSanitize, v as rehypeStringify, w as toString, x as fromMarkdown, y as chroma, z as generateColors, A as t$2, B as t$3, C as t$4, D as t$5, E as t$6, F as e$3, G as e$4, H as defu, I as Bezier, J as e$5, K as getNodeDimensions, L as Background$1, M as BackgroundVariant, N as n, O as useMantineColorScheme, P as index, Q as atom, R as createSafeContext, S as useIsomorphicLayoutEffect, T as useSyncedRef, U as t$7, V as t$8, W as MantineContext, X as MantineProvider, Y as useMantineStyleNonce, Z as LazyMotion, _ as domMax, $ as MotionConfig, a0 as createOptionalContext, a1 as deepEqual, a2 as e$6, a3 as t$9, a4 as t$a, a5 as t$b, a6 as t$c, a7 as useId$1, a8 as ErrorBoundary$1, a9 as Notification, aa as ScrollAreaAutosize, ab as Code, ac as Group, ad as Button, ae as getNodesBounds, af as getEdgePosition, ag as xstateReact_cjsExports, ah as xstate_cjsExports, ai as ActionIcon, aj as MotionButton, ak as ThemeIcon, al as Tooltip$6, am as Breadcrumbs, an as useHover, ao as Popover, ap as PopoverTarget, aq as PopoverDropdown, ar as Box$1, as as FloatingIndicator, at as Text, au as Flex, av as UnstyledButton, aw as useDebouncedCallback, ax as useUncontrolled, ay as clampUseMovePosition, az as useMove, aA as useMergedRef, aB as HoverCard, aC as HoverCardTarget, aD as HoverCardDropdown, aE as TooltipGroup, aF as AnimatePresence, aG as MotionDiv, aH as isMacOs, aI as useDebouncedValue, aJ as e$7, aK as EdgeLabelRenderer, aL as e$8, aM as useDebouncedState, aN as NodeToolbar, aO as Position, aP as Handle, aQ as Badge, aR as CopyButton, aS as SegmentedControl, aT as MotionSpan, aU as Portal, aV as NavLink, aW as ColorSwatch, aX as Space, aY as Divider$1, aZ as Stack, a_ as CheckIcon, a$ as rem, b0 as useUpdateEffect$1, b1 as Slider, b2 as Paper, b3 as Menu, b4 as MenuTarget, b5 as MenuDropdown, b6 as MenuItem, b7 as useFocusTrap, b8 as useReducedMotionConfig, b9 as useTimeoutEffect, ba as m, bb as ReactRemoveScroll, bc as useThrottledCallback, bd as createScopedKeydownHandler, be as Input, bf as t$d, bg as Highlight, bh as e$9, bi as LayoutGroup, bj as useTree, bk as Alert, bl as Tree, bm as getBezierPath, bn as DefaultMap, bo as t$e, bp as t$f, bq as e$a, br as t$g, bs as t$h, bt as n$1, bu as n$2, bv as r, bw as t$i, bx as n$3, by as dagre, bz as t$j, bA as t$k, bB as t$l, bC as ReactFlowProvider, bD as useStateHistory, bE as useRafEffect, bF as Panel, bG as Anchor, bH as Pill, bI as useViewportSize, bJ as useSessionStorage, bK as t$m, bL as useDragControls, bM as useMotionValue, bN as CloseButton, bO as ActionIconGroup, bP as Tabs, bQ as TabsList, bR as TabsTab, bS as TabsPanel, bT as ScrollArea, 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 t$n, cn as useDebouncedEffect, co as getSmoothStepPath, cp as useTimeout, cq as useDebouncedCallback$1, cr as useCustomCompareMemo, cs as Queue, ct as t$o, cu as e$c, cv as applyEdgeChanges, cw as applyNodeChanges, cx as getViewportForBounds, cy as t$p, cz as getHotkeyHandler, cA as n$6, cB as t$q, cC as e$d, cD as getBoundsOfRects, cE as boxToRect, cF as nodeToRect, cG as toRgba, cH as t$r, cI as mix, cJ as toHex, cK as scale } from "./vendors.js";
+import { u as useFirstMountState, a as useCustomCompareEffect, s as shallowEqual, b as useStoreApi, c as useStore, d as useCallbackRef, e as useReactFlow, f as useInternalNode, t, g as e, h as compare$1, i as e$1, j as e$2, k as t$1, l as setExports, m as unified, r as remarkParse, n as remarkGfm, o as remarkRehype, p as rehypeRaw, q as rehypeSanitize, v as rehypeStringify, w as toString, x as fromMarkdown, y as chroma, z as generateColors, A as t$2, B as t$3, C as t$4, D as t$5, E as t$6, F as e$3, G as e$4, H as defu, I as Bezier, J as e$5, K as getNodeDimensions, L as Background$1, M as BackgroundVariant, N as n, O as useMantineColorScheme, P as index, Q as createSafeContext, R as atom, S as useIsomorphicLayoutEffect, T as useSyncedRef, U as t$7, V as t$8, W as MantineContext, X as MantineProvider, Y as useMantineStyleNonce, Z as LazyMotion, _ as domMax, $ as MotionConfig, a0 as deepEqual, a1 as e$6, a2 as t$9, a3 as t$a, a4 as t$b, a5 as t$c, a6 as useId$1, a7 as ErrorBoundary$1, a8 as Notification, a9 as ScrollAreaAutosize, aa as Code, ab as Group, ac as Button, ad as getNodesBounds, ae as getEdgePosition, af as xstateReact_cjsExports, ag as xstate_cjsExports, ah as ActionIcon, ai as MotionButton, aj as ThemeIcon, ak as Tooltip$6, al as Breadcrumbs, am as useHover, an as Popover, ao as PopoverTarget, ap as PopoverDropdown, aq as Box$1, ar as FloatingIndicator, as as Text, at as Flex, au as UnstyledButton, av as useDebouncedCallback, aw as useUncontrolled, ax as clampUseMovePosition, ay as useMove, az as useMergedRef, aA as HoverCard, aB as HoverCardTarget, aC as HoverCardDropdown, aD as TooltipGroup, aE as AnimatePresence, aF as MotionDiv, aG as isMacOs, aH as useDebouncedValue, aI as e$7, aJ as EdgeLabelRenderer, aK as e$8, aL as useDebouncedState, aM as NodeToolbar, aN as Position, aO as Handle, aP as Badge, aQ as CopyButton, aR as SegmentedControl, aS as MotionSpan, aT as Portal, aU as NavLink, aV as ColorSwatch, aW as Space, aX as Divider$1, aY as Stack, aZ as CheckIcon, a_ as rem, a$ as useUpdateEffect$1, b0 as Slider, b1 as Paper, b2 as Menu, b3 as MenuTarget, b4 as MenuDropdown, b5 as MenuItem, b6 as useFocusTrap, b7 as useReducedMotionConfig, b8 as useTimeoutEffect, b9 as m, ba as ReactRemoveScroll, bb as useThrottledCallback, bc as createScopedKeydownHandler, bd as Input, be as t$d, bf as Highlight, bg as useMountEffect, bh as e$9, bi as LayoutGroup, bj as useTree, bk as Alert, bl as Tree, bm as getBezierPath, bn as DefaultMap, bo as t$e, bp as t$f, bq as e$a, br as t$g, bs as t$h, bt as n$1, bu as n$2, bv as r, bw as t$i, bx as n$3, by as dagre, bz as t$j, bA as t$k, bB as t$l, bC as ReactFlowProvider, bD as useStateHistory, bE as useRafEffect, bF as Panel, bG as Anchor, bH as Pill, bI as useViewportSize, bJ as useSessionStorage, bK as t$m, bL as useDragControls, bM as useMotionValue, bN as CloseButton, bO as ActionIconGroup, bP as Tabs, bQ as TabsList, bR as TabsTab, bS as TabsPanel, bT as ScrollArea, 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 t$n, cn as useDebouncedEffect, co as getSmoothStepPath, cp as useTimeout, cq as useDebouncedCallback$1, cr as useCustomCompareMemo, cs as Queue, ct as t$o, cu as e$c, cv as applyEdgeChanges, cw as applyNodeChanges, cx as getViewportForBounds, cy as t$p, cz as getHotkeyHandler, cA as n$6, cB as t$q, cC as e$d, cD as getBoundsOfRects, cE as boxToRect, cF as nodeToRect, cG as toRgba, cH as t$r, cI as mix, cJ as toHex, cK as scale, cL as e$e, cM as t$s } from "./vendors.js";
 function isObject(value) {
   return typeof value == "object" && value != null && !Array.isArray(value);
 }
@@ -612,105 +612,105 @@ const __iconNode$l = [["path", { d: "M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$k = [["path", { d: "M4 6l16 0", key: "svg-0" }], ["path", { d: "M4 12l16 0", key: "svg-1" }], ["path", { d: "M4 18l16 0", key: "svg-2" }]], IconMenu2 = createReactComponent("outline", "menu-2", "Menu2", __iconNode$k);
+const __iconNode$k = [["path", { d: "M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z", key: "svg-0" }], ["path", { d: "M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2", key: "svg-1" }], ["path", { d: "M19 11h2m-1 -1v2", key: "svg-2" }]], IconMoonStars = createReactComponent("outline", "moon-stars", "MoonStars", __iconNode$k);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$j = [["path", { d: "M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z", key: "svg-0" }], ["path", { d: "M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2", key: "svg-1" }], ["path", { d: "M19 11h2m-1 -1v2", key: "svg-2" }]], IconMoonStars = createReactComponent("outline", "moon-stars", "MoonStars", __iconNode$j);
+const __iconNode$j = [["path", { d: "M21 14.008v-5.018a1.98 1.98 0 0 0 -1 -1.717l-4 -2.008a2.016 2.016 0 0 0 -2 0l-10 5.008c-.619 .355 -1 1.01 -1 1.718v5.018c0 .709 .381 1.363 1 1.717l4 2.008a2.016 2.016 0 0 0 2 0l10 -5.008c.619 -.355 1 -1.01 1 -1.718z", key: "svg-0" }], ["path", { d: "M9 21v-7.5", key: "svg-1" }], ["path", { d: "M9 13.5l11.5 -5.5", key: "svg-2" }], ["path", { d: "M3.5 11l5.5 2.5", key: "svg-3" }]], IconRectangularPrism = createReactComponent("outline", "rectangular-prism", "RectangularPrism", __iconNode$j);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [["path", { d: "M21 14.008v-5.018a1.98 1.98 0 0 0 -1 -1.717l-4 -2.008a2.016 2.016 0 0 0 -2 0l-10 5.008c-.619 .355 -1 1.01 -1 1.718v5.018c0 .709 .381 1.363 1 1.717l4 2.008a2.016 2.016 0 0 0 2 0l10 -5.008c.619 -.355 1 -1.01 1 -1.718z", key: "svg-0" }], ["path", { d: "M9 21v-7.5", key: "svg-1" }], ["path", { d: "M9 13.5l11.5 -5.5", key: "svg-2" }], ["path", { d: "M3.5 11l5.5 2.5", key: "svg-3" }]], IconRectangularPrism = createReactComponent("outline", "rectangular-prism", "RectangularPrism", __iconNode$i);
+const __iconNode$i = [["path", { d: "M3 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", key: "svg-0" }], ["path", { d: "M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", key: "svg-1" }], ["path", { d: "M17 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", key: "svg-2" }], ["path", { d: "M5 11v-3a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v3", key: "svg-3" }], ["path", { d: "M16.5 8.5l2.5 2.5l2.5 -2.5", key: "svg-4" }]], IconReorder = createReactComponent("outline", "reorder", "Reorder", __iconNode$i);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$h = [["path", { d: "M3 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", key: "svg-0" }], ["path", { d: "M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", key: "svg-1" }], ["path", { d: "M17 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z", key: "svg-2" }], ["path", { d: "M5 11v-3a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v3", key: "svg-3" }], ["path", { d: "M16.5 8.5l2.5 2.5l2.5 -2.5", key: "svg-4" }]], IconReorder = createReactComponent("outline", "reorder", "Reorder", __iconNode$h);
+const __iconNode$h = [["path", { d: "M6 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", key: "svg-0" }], ["path", { d: "M18 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", key: "svg-1" }], ["path", { d: "M12 19h4.5c.71 0 1.372 -.212 1.924 -.576m1.545 -2.459a3.5 3.5 0 0 0 -3.469 -3.965h-.499m-4 0h-3.501a3.5 3.5 0 0 1 -2.477 -5.972m2.477 -1.028h3.5", key: "svg-2" }], ["path", { d: "M3 3l18 18", key: "svg-3" }]], IconRouteOff = createReactComponent("outline", "route-off", "RouteOff", __iconNode$h);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$g = [["path", { d: "M6 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", key: "svg-0" }], ["path", { d: "M18 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", key: "svg-1" }], ["path", { d: "M12 19h4.5c.71 0 1.372 -.212 1.924 -.576m1.545 -2.459a3.5 3.5 0 0 0 -3.469 -3.965h-.499m-4 0h-3.501a3.5 3.5 0 0 1 -2.477 -5.972m2.477 -1.028h3.5", key: "svg-2" }], ["path", { d: "M3 3l18 18", key: "svg-3" }]], IconRouteOff = createReactComponent("outline", "route-off", "RouteOff", __iconNode$g);
+const __iconNode$g = [["path", { d: "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0", key: "svg-0" }], ["path", { d: "M21 21l-6 -6", key: "svg-1" }]], IconSearch = createReactComponent("outline", "search", "Search", __iconNode$g);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$f = [["path", { d: "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0", key: "svg-0" }], ["path", { d: "M21 21l-6 -6", key: "svg-1" }]], IconSearch = createReactComponent("outline", "search", "Search", __iconNode$f);
+const __iconNode$f = [["path", { d: "M8 9l4 -4l4 4", key: "svg-0" }], ["path", { d: "M16 15l-4 4l-4 -4", key: "svg-1" }]], IconSelector = createReactComponent("outline", "selector", "Selector", __iconNode$f);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$e = [["path", { d: "M8 9l4 -4l4 4", key: "svg-0" }], ["path", { d: "M16 15l-4 4l-4 -4", key: "svg-1" }]], IconSelector = createReactComponent("outline", "selector", "Selector", __iconNode$e);
+const __iconNode$e = [["path", { d: "M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-0" }], ["path", { d: "M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-1" }], ["path", { d: "M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-2" }], ["path", { d: "M8.7 10.7l6.6 -3.4", key: "svg-3" }], ["path", { d: "M8.7 13.3l6.6 3.4", key: "svg-4" }]], IconShare = createReactComponent("outline", "share", "Share", __iconNode$e);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$d = [["path", { d: "M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-0" }], ["path", { d: "M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-1" }], ["path", { d: "M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0", key: "svg-2" }], ["path", { d: "M8.7 10.7l6.6 -3.4", key: "svg-3" }], ["path", { d: "M8.7 13.3l6.6 3.4", key: "svg-4" }]], IconShare = createReactComponent("outline", "share", "Share", __iconNode$d);
+const __iconNode$d = [["path", { d: "M12 4l-8 4l8 4l8 -4l-8 -4", key: "svg-0" }], ["path", { d: "M4 12l8 4l8 -4", key: "svg-1" }], ["path", { d: "M4 16l8 4l8 -4", key: "svg-2" }]], IconStack2 = createReactComponent("outline", "stack-2", "Stack2", __iconNode$d);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$c = [["path", { d: "M12 4l-8 4l8 4l8 -4l-8 -4", key: "svg-0" }], ["path", { d: "M4 12l8 4l8 -4", key: "svg-1" }], ["path", { d: "M4 16l8 4l8 -4", key: "svg-2" }]], IconStack2 = createReactComponent("outline", "stack-2", "Stack2", __iconNode$c);
+const __iconNode$c = [["path", { d: "M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", key: "svg-0" }], ["path", { d: "M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7", key: "svg-1" }]], IconSun = createReactComponent("outline", "sun", "Sun", __iconNode$c);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$b = [["path", { d: "M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", key: "svg-0" }], ["path", { d: "M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7", key: "svg-1" }]], IconSun = createReactComponent("outline", "sun", "Sun", __iconNode$b);
+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: "M12 12m-5 0a5 5 0 1 0 10 0a5 5 0 1 0 -10 0", key: "svg-1" }], ["path", { d: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", key: "svg-2" }]], IconTarget = createReactComponent("outline", "target", "Target", __iconNode$b);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$a = [["path", { d: "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", key: "svg-0" }], ["path", { d: "M12 12m-5 0a5 5 0 1 0 10 0a5 5 0 1 0 -10 0", key: "svg-1" }], ["path", { d: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", key: "svg-2" }]], IconTarget = createReactComponent("outline", "target", "Target", __iconNode$a);
+const __iconNode$a = [["path", { d: "M3 6a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-0" }], ["path", { d: "M21 11v-3a2 2 0 0 0 -2 -2h-6l3 3m0 -6l-3 3", key: "svg-1" }], ["path", { d: "M3 13v3a2 2 0 0 0 2 2h6l-3 -3m0 6l3 -3", key: "svg-2" }], ["path", { d: "M15 18a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-3" }]], IconTransform = createReactComponent("outline", "transform", "Transform", __iconNode$a);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$9 = [["path", { d: "M3 6a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-0" }], ["path", { d: "M21 11v-3a2 2 0 0 0 -2 -2h-6l3 3m0 -6l-3 3", key: "svg-1" }], ["path", { d: "M3 13v3a2 2 0 0 0 2 2h6l-3 -3m0 6l3 -3", key: "svg-2" }], ["path", { d: "M15 18a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-3" }]], IconTransform = createReactComponent("outline", "transform", "Transform", __iconNode$9);
+const __iconNode$9 = [["path", { d: "M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0", key: "svg-0" }], ["path", { d: "M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2", key: "svg-1" }]], IconUser = createReactComponent("outline", "user", "User", __iconNode$9);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$8 = [["path", { d: "M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0", key: "svg-0" }], ["path", { d: "M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2", key: "svg-1" }]], IconUser = createReactComponent("outline", "user", "User", __iconNode$8);
+const __iconNode$8 = [["path", { d: "M18 6l-12 12", key: "svg-0" }], ["path", { d: "M6 6l12 12", key: "svg-1" }]], IconX = createReactComponent("outline", "x", "X", __iconNode$8);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$7 = [["path", { d: "M18 6l-12 12", key: "svg-0" }], ["path", { d: "M6 6l12 12", key: "svg-1" }]], IconX = createReactComponent("outline", "x", "X", __iconNode$7);
+const __iconNode$7 = [["path", { d: "M4 8v-2a2 2 0 0 1 2 -2h2", key: "svg-0" }], ["path", { d: "M4 16v2a2 2 0 0 0 2 2h2", key: "svg-1" }], ["path", { d: "M16 4h2a2 2 0 0 1 2 2v2", key: "svg-2" }], ["path", { d: "M16 20h2a2 2 0 0 0 2 -2v-2", key: "svg-3" }], ["path", { d: "M8 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-4" }], ["path", { d: "M16 16l-2.5 -2.5", key: "svg-5" }]], IconZoomScan = createReactComponent("outline", "zoom-scan", "ZoomScan", __iconNode$7);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$6 = [["path", { d: "M4 8v-2a2 2 0 0 1 2 -2h2", key: "svg-0" }], ["path", { d: "M4 16v2a2 2 0 0 0 2 2h2", key: "svg-1" }], ["path", { d: "M16 4h2a2 2 0 0 1 2 2v2", key: "svg-2" }], ["path", { d: "M16 20h2a2 2 0 0 0 2 -2v-2", key: "svg-3" }], ["path", { d: "M8 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-4" }], ["path", { d: "M16 16l-2.5 -2.5", key: "svg-5" }]], IconZoomScan = createReactComponent("outline", "zoom-scan", "ZoomScan", __iconNode$6);
+const __iconNode$6 = [["path", { d: "M10.52 2.614a2.095 2.095 0 0 1 2.835 -.117l.126 .117l7.905 7.905c.777 .777 .816 2.013 .117 2.836l-.117 .126l-7.905 7.905a2.094 2.094 0 0 1 -2.836 .117l-.126 -.117l-7.907 -7.906a2.096 2.096 0 0 1 -.115 -2.835l.117 -.126l7.905 -7.905zm5.969 9.535l.01 -.116l-.003 -.12l-.016 -.114l-.03 -.11l-.044 -.112l-.052 -.098l-.076 -.105l-.07 -.081l-3.5 -3.5l-.095 -.083a1 1 0 0 0 -1.226 0l-.094 .083l-.083 .094a1 1 0 0 0 0 1.226l.083 .094l1.792 1.793h-5.085l-.117 .007a1 1 0 0 0 0 1.986l.117 .007h5.085l-1.792 1.793l-.083 .094a1 1 0 0 0 1.403 1.403l.094 -.083l3.5 -3.5l.097 -.112l.05 -.074l.037 -.067l.05 -.112l.023 -.076l.025 -.117z", key: "svg-0" }]], IconDirectionSignFilled = createReactComponent("filled", "direction-sign-filled", "DirectionSignFilled", __iconNode$6);
 /**
  * @license @tabler/icons-react v3.35.0 - MIT
  *
@@ -1982,19 +1982,7 @@ const selectDimensions = ({ width, height }) => (width || 1) * (height || 1), Vi
 }) => {
   const square = useStore(selectDimensions);
   return useUpdateEffect(onViewportResize, [square]), null;
-}, ReduceGraphicsModeCtx = createContext(null);
-function useIsReducedGraphics() {
-  const isReduced = useContext(ReduceGraphicsModeCtx);
-  return isReduced === null && console.warn("ReduceGraphicsMode is not provided"), isReduced ?? !1;
-}
-const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext(
-  "PanningAtomSafeCtx is not provided"
-);
-function ReduceGraphicsContext({ reduceGraphics, children }) {
-  const $isPanningRef = useRef(null);
-  return $isPanningRef.current || ($isPanningRef.current = atom(reduceGraphics)), /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx.Provider, { value: reduceGraphics, children }) });
-}
-const RootContainerContext = createContext(null);
+}, RootContainerContext = createContext(null);
 function useRootContainer() {
   const ctx = useContext(RootContainerContext);
   if (!ctx)
@@ -2007,20 +1995,28 @@ function useRootContainerRef() {
 function useRootContainerElement() {
   return useRootContainer().ref.current;
 }
+const ReduceGraphicsModeCtx = createContext(null);
+function useIsReducedGraphics() {
+  const isReduced = useContext(ReduceGraphicsModeCtx);
+  return isReduced === null && console.warn("ReduceGraphicsMode is not provided"), isReduced ?? !1;
+}
+const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext(
+  "PanningAtomSafeCtx is not provided"
+);
 function RootContainer({
   id,
   className,
   reduceGraphics = !1,
   children
 }) {
-  const [mounted, setMounted] = useState(!1), ref = useRef(null), $isPanning = usePanningAtom();
-  useIsomorphicLayoutEffect(() => {
+  const [mounted, setMounted] = useState(!1), ref = useRef(null), $isPanningRef = useRef(null);
+  $isPanningRef.current || ($isPanningRef.current = atom(!1)), useIsomorphicLayoutEffect(() => {
     setMounted(!0);
-  }, []), useEffect(() => $isPanning.listen((isPanning) => {
+  }, []), useEffect(() => $isPanningRef.current?.subscribe((isPanning) => {
     ref.current?.setAttribute("data-likec4-diagram-panning", isPanning ? "true" : "false");
-  }), [$isPanning]);
+  }), []);
   const ctx = useMemo(() => ({ id, ref }), [id, ref]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx.Provider, { value: reduceGraphics, children: /* @__PURE__ */ jsx(
     "div",
     {
       id,
@@ -2031,7 +2027,7 @@ function RootContainer({
       },
       children: mounted && !!ctx.ref.current && /* @__PURE__ */ jsx(RootContainerContext.Provider, { value: ctx, children })
     }
-  );
+  ) }) });
 }
 const defaultHandlers = {
   onChange: null,
@@ -2155,10 +2151,7 @@ const FramerMotionConfig = ({
 }) => {
   const nonce = useMantineStyleNonce()?.();
   return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: !0, children: /* @__PURE__ */ jsx(MotionConfig, { reducedMotion, ...nonce && { nonce }, children }) });
-}, [
-  ControlsCustomLayoutProvider,
-  useControlsCustomLayout
-] = createOptionalContext(null), LikeC4ModelContext = createContext(null), CurrentViewModelContext = createContext(null);
+}, LikeC4ModelContext = createContext(null), CurrentViewModelContext = createContext(null);
 function EnsureCurrentViewModel({ children }) {
   return useContext(CurrentViewModelContext) ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
 }
@@ -3758,12 +3751,41 @@ function useNavigationActor() {
     closeDropdown: () => actorRef.send({ type: "dropdown.dismiss" })
   }), [actorRef]);
 }
-const BurgerButton = () => {
+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(
-    PanelActionIcon,
+  return /* @__PURE__ */ jsx(MotionDiv, { layout: "position", children: /* @__PURE__ */ jsxs(
+    UnstyledButton,
     {
-      layout: "position",
       onMouseEnter: () => {
         actor.send({ type: "breadcrumbs.mouseEnter.root" });
       },
@@ -3775,9 +3797,45 @@ const BurgerButton = () => {
           onBurgerMenuClick();
         }, 100), actor.send({ type: "breadcrumbs.click.root" });
       },
-      children: /* @__PURE__ */ jsx(IconMenu2, { style: { width: "80%", height: "80%" } })
+      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"
+              }
+            })
+          }
+        )
+      ]
     }
-  );
+  ) });
 }, NavigationButtons = () => {
   const diagram = useDiagram(), {
     hasStepBack,
@@ -5719,7 +5777,7 @@ const style = {
     transition: "fast",
     color: {
       base: "mantine.colors.text/90",
-      _hover: "mantine.colors.text"
+      _hover: "[var(--mantine-color-bright)]"
     }
   },
   variants: {
@@ -6019,7 +6077,7 @@ const selectBreadcrumbs = ({ context: context2 }) => {
       {
         layout: "position",
         className: hstack({
-          gap: "[3px]",
+          gap: "1",
           flexShrink: 1,
           flexGrow: 1,
           overflow: "hidden"
@@ -6036,7 +6094,7 @@ const selectBreadcrumbs = ({ context: context2 }) => {
       {
         layout: "position",
         className: hstack({
-          gap: "[1px]",
+          gap: "0.5",
           flexGrow: 0,
           _empty: {
             display: "none"
@@ -7226,7 +7284,7 @@ function NavigationPanelDropdown() {
         /* @__PURE__ */ jsx(
           ScrollAreaAutosize,
           {
-            scrollbars: "xy",
+            scrollbars: "x",
             type: "auto",
             offsetScrollbars: "present",
             classNames: {
@@ -7237,6 +7295,11 @@ function NavigationPanelDropdown() {
                 ]
               })
             },
+            styles: {
+              viewport: {
+                overscrollBehavior: "none"
+              }
+            },
             children: hasSearchQuery ? /* @__PURE__ */ jsx(SearchResults, { searchQuery: normalizeViewPath(searchQuery).toLowerCase() }) : /* @__PURE__ */ jsx(FolderColumns, {})
           }
         )
@@ -7271,7 +7334,7 @@ function SearchResults({ searchQuery }) {
           "calc(100cqh - 200px)"
         ]
       }),
-      children: /* @__PURE__ */ jsx(VStack, { gap: "[1px]", children: found.map((v) => /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(VStack, { gap: "0.5", children: found.map((v) => /* @__PURE__ */ jsx(
         FoundedView,
         {
           view: v,
@@ -7420,7 +7483,7 @@ const btnRightSection = /* @__PURE__ */ jsx(IconChevronRight, { size: 12, stroke
     }
   ),
   deployment: /* @__PURE__ */ jsx(IconStack2, { size: 16, stroke: 1.5, className: viewTypeIconCss }),
-  dynamic: /* @__PURE__ */ jsx(IconStack2, { size: 16, stroke: 1.5, className: viewTypeIconCss })
+  dynamic: /* @__PURE__ */ jsx(IconDirectionSignFilled, { size: 18, className: viewTypeIconCss })
 }, ColumnScrollArea = ScrollAreaAutosize.withProps({
   scrollbars: "y",
   className: css({
@@ -7464,14 +7527,26 @@ function FolderColumns() {
   const columns = useNavigationActorContext(selectColumns, deepEqual);
   return /* @__PURE__ */ jsx(HStack, { gap: "xs", alignItems: "stretch", children: columns.flatMap((column, i) => [
     i > 0 && /* @__PURE__ */ jsx(Divider$1, { orientation: "vertical" }, "divider" + i),
-    /* @__PURE__ */ jsx(FolderColumn, { data: column }, column.folderPath)
+    /* @__PURE__ */ jsx(
+      FolderColumn,
+      {
+        data: column,
+        isLast: i == columns.length - 1
+      },
+      column.folderPath
+    )
   ]) });
 }
-function FolderColumn({ data }) {
-  const actor = useNavigationActorRef(), onItemClicked = (item) => (e2) => {
+function FolderColumn({ data, isLast }) {
+  const ref = useRef(null), actor = useNavigationActorRef(), onItemClicked = (item) => (e2) => {
     e2.stopPropagation(), item.type === "folder" ? actor.send({ type: "select.folder", folderPath: item.folderPath }) : actor.send({ type: "select.view", viewId: item.viewId });
   };
-  return /* @__PURE__ */ jsx(Box, { mb: "1", children: /* @__PURE__ */ jsx(ColumnScrollArea, { children: /* @__PURE__ */ jsx(VStack, { gap: "[1px]", children: data.items.map((item, i) => /* @__PURE__ */ jsx(
+  return useMountEffect(() => {
+    isLast && ref.current && ref.current.scrollIntoView({
+      inline: "nearest",
+      behavior: "smooth"
+    });
+  }), /* @__PURE__ */ jsx(Box, { mb: "1", ref, children: /* @__PURE__ */ jsx(ColumnScrollArea, { children: /* @__PURE__ */ jsx(VStack, { gap: "0.5", children: data.items.map((item, i) => /* @__PURE__ */ jsx(
     FolderColumnItem,
     {
       columnItem: item,
@@ -13659,9 +13734,7 @@ function LikeC4DiagramXYFlow({
       onEdgeMouseLeave: useCallbackRef((event, edge) => {
         event.stopPropagation(), edge.data.hovered && diagram.send({ type: "xyflow.edgeMouseLeave", edge, event });
       }),
-      ...props.pannable && {
-        onMove
-      },
+      onMove,
       onMoveEnd,
       onInit: useCallbackRef((instance) => {
         diagram.send({ type: "xyflow.init", instance });
@@ -17052,12 +17125,11 @@ function DiagramActorProvider({
     },
     [features],
     shallowEqual
-  ), useCustomCompareEffect(
+  ), useEffect(
     () => {
       actorRef.send({ type: "update.inputs", inputs: { zoomable, pannable, fitViewPadding, nodesSelectable } });
     },
-    [zoomable, pannable, fitViewPadding, nodesSelectable],
-    deepEqual
+    [zoomable, pannable, fitViewPadding, nodesSelectable]
   );
   const dynamicViewVariant = xstateReact_cjsExports.useSelector(actorRef, selectDynamicViewVariant), update = useMemo(
     () => convertToXYFlow({ view, where, nodesSelectable, dynamicViewVariant }),
@@ -17202,7 +17274,7 @@ function LikeC4Diagram({
   readonly = !0,
   controls = !readonly,
   fitView = !0,
-  fitViewPadding = controls ? FitViewPaddings.withControls : FitViewPaddings.default,
+  fitViewPadding: _fitViewPadding = controls ? FitViewPaddings.withControls : FitViewPaddings.default,
   pannable = !0,
   zoomable = !0,
   background = "dots",
@@ -17223,20 +17295,26 @@ function LikeC4Diagram({
   experimentalEdgeEditing = !readonly,
   reduceGraphics = "auto",
   renderIcon,
-  renderControls,
   where,
   reactFlowProps,
   renderNodes,
   children
 }) {
-  const id = useId(), initialRef = useRef(null), bounds = getViewBounds(view, dynamicViewVariant);
+  const id = useId(), initialRef = useRef(null), bounds = getViewBounds(view, dynamicViewVariant), fitViewPadding = useNormalizedViewPadding(_fitViewPadding);
   initialRef.current == null && (initialRef.current = {
     defaultEdges: [],
     defaultNodes: [],
     initialWidth: initialWidth ?? bounds.width,
-    initialHeight: initialHeight ?? bounds.height
+    initialHeight: initialHeight ?? bounds.height,
+    initialFitViewOptions: {
+      maxZoom: MaxZoom,
+      minZoom: MinZoom,
+      padding: fitViewPadding
+    },
+    initialMaxZoom: MaxZoom,
+    initialMinZoom: MinZoom
   });
-  const isReducedGraphicsMode = reduceGraphics === "auto" ? pannable && (bounds.width ?? 1) * (bounds.height ?? 1) > 6e6 : reduceGraphics;
+  const isReducedGraphicsMode = reduceGraphics === "auto" ? pannable && (bounds.width ?? 1) * (bounds.height ?? 1) > 6e6 && view.nodes.some((n2) => n2.children?.length > 0) : reduceGraphics;
   return /* @__PURE__ */ jsx(EnsureMantine, { children: /* @__PURE__ */ jsx(
     FramerMotionConfig,
     {
@@ -17280,12 +17358,12 @@ function LikeC4Diagram({
               },
               children: [
                 /* @__PURE__ */ jsx(LikeC4Styles2, { id }),
-                /* @__PURE__ */ jsx(TagStylesProvider, { rootSelector: `#${id}`, children: /* @__PURE__ */ jsx(ReduceGraphicsContext, { reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(RootContainer, { id, className, reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(TagStylesProvider, { rootSelector: `#${id}`, children: /* @__PURE__ */ jsx(RootContainer, { id, className, reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(
                   ReactFlowProvider,
                   {
                     fitView,
                     ...initialRef.current,
-                    children: /* @__PURE__ */ jsx(
+                    children: /* @__PURE__ */ jsxs(
                       DiagramActorProvider,
                       {
                         view,
@@ -17295,7 +17373,7 @@ function LikeC4Diagram({
                         nodesSelectable,
                         where: where ?? null,
                         dynamicViewVariant,
-                        children: /* @__PURE__ */ jsxs(ControlsCustomLayoutProvider, { value: renderControls ?? null, children: [
+                        children: [
                           /* @__PURE__ */ jsx(
                             LikeC4DiagramXYFlow,
                             {
@@ -17308,11 +17386,11 @@ function LikeC4Diagram({
                             }
                           ),
                           /* @__PURE__ */ jsx(LikeC4DiagramUI, {})
-                        ] })
+                        ]
                       }
                     )
                   }
-                ) }) }) })
+                ) }) })
               ]
             }
           )
@@ -17321,6 +17399,14 @@ function LikeC4Diagram({
     }
   ) });
 }
+const toLiteralPaddingWithUnit = (value) => typeof value == "number" ? `${value}px` : value;
+function useNormalizedViewPadding(raw) {
+  return useCustomCompareMemo(
+    () => e$e(raw) ? t$s(raw, toLiteralPaddingWithUnit) : toLiteralPaddingWithUnit(raw),
+    [raw],
+    deepEqual
+  );
+}
 function LikeC4ModelProvider({
   children,
   likec4model

package/__app__/src/main.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useEffect, lazy, Suspense, createContext, useContext, useState, useMemo, memo, useRef, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { cL as useRouter, cM as isNotFound, cN as Container, bk as Alert, at as Text, ab as Code, ad as Button, ac as Group, a$ as rem, b_ as Title, cO as Link, cP as useNavigate, d as useCallbackRef, cQ as createRootRouteWithContext, cR as stripSearchParams, aJ as e, cS as Outlet, O as useMantineColorScheme, cT as createFileRoute, cU as useDocumentTitle, aZ as Stack, cV as Loader, cW as useStore, a8 as ErrorBoundary, cX as Navigate, cY as t, s as shallowEqual, cZ as useParams, S as useIsomorphicLayoutEffect, c_ as SimpleGrid, c$ as useInViewport, j as e$1, ch as Card, ar as Box, d0 as notFound, bv as r, bj as useTree, d1 as useComputedColorScheme, bl as Tree, aB as HoverCard, aC as HoverCardTarget, aD as HoverCardDropdown, ak as ThemeIcon, d2 as onMount, Q as atom, cg as useLocalStorage, d3 as Drawer, bT as ScrollArea, aS as SegmentedControl, ai as ActionIcon, b3 as Menu, b4 as MenuTarget, b5 as MenuDropdown, b6 as MenuItem, aR as CopyButton$1, d4 as Select, d5 as ModalRoot, d6 as ModalOverlay, d7 as ModalContent, d8 as ModalBody, bP as Tabs, bQ as TabsList, bR as TabsTab, bS as TabsPanel, d9 as useMatches, da as useMantineTheme, db as useMediaQuery, dc as useDisclosure, b2 as Paper, aY as Divider, aX as Space, dd as useParentMatches, de as MenuLabel, a3 as t$1, bo as t$2, br as t$3, bq as e$2, bp as t$4, bs as t$5, V as t$6, bt as n, k as t$7, by as dagre, bn as DefaultMap, bz as t$8, bA as t$9, df as useSearch, aw as useDebouncedCallback, dg as LoadingOverlay, dh as toBlob, al as Tooltip, di as useAsync, dj as PanelGroup, dk as Panel, dl as PanelResizeHandle, dm as Burger, dn as RouterProvider, dp as createRouter$1, dq as createHashHistory, dr as createBrowserHistory, ds as createTheme, aU as Portal, X as MantineProvider } from "./vendors.js";
+import { cN as useRouter, cO as isNotFound, cP as Container, bk as Alert, as as Text, aa as Code, ac as Button, ab as Group, a_ as rem, b_ as Title, cQ as Link, cR as useNavigate, d as useCallbackRef, cS as createRootRouteWithContext, cT as stripSearchParams, aI as e, cU as Outlet, O as useMantineColorScheme, cV as createFileRoute, cW as useDocumentTitle, aY as Stack, cX as Loader, cY as useStore, a7 as ErrorBoundary, cZ as Navigate, c_ as t, s as shallowEqual, c$ as useParams, S as useIsomorphicLayoutEffect, d0 as SimpleGrid, d1 as useInViewport, j as e$1, ch as Card, aq as Box, d2 as notFound, bv as r, bj as useTree, d3 as useComputedColorScheme, bl as Tree, aA as HoverCard, aB as HoverCardTarget, aC as HoverCardDropdown, aj as ThemeIcon, d4 as onMount, R as atom, cg as useLocalStorage, d5 as Drawer, bT as ScrollArea, aR as SegmentedControl, ah as ActionIcon, b2 as Menu, b3 as MenuTarget, b4 as MenuDropdown, b5 as MenuItem, aQ as CopyButton$1, d6 as Select, d7 as ModalRoot, d8 as ModalOverlay, d9 as ModalContent, da as ModalBody, bP as Tabs, bQ as TabsList, bR as TabsTab, bS as TabsPanel, db as useMatches, dc as useMantineTheme, dd as useMediaQuery, de as useDisclosure, b1 as Paper, aX as Divider, aW as Space, df as useParentMatches, dg as MenuLabel, a2 as t$1, bo as t$2, br as t$3, bq as e$2, bp as t$4, bs as t$5, V as t$6, bt as n, k as t$7, by as dagre, bn as DefaultMap, bz as t$8, bA as t$9, dh as useSearch, av as useDebouncedCallback, di as LoadingOverlay, dj as toBlob, ak as Tooltip, dk as useAsync, dl as PanelGroup, dm as Panel, dn as PanelResizeHandle, dp as Burger, dq as RouterProvider, dr as createRouter$1, ds as createHashHistory, dt as createBrowserHistory, du as createTheme, aT as Portal, X as MantineProvider } from "./vendors.js";
 import { projects } from "likec4:projects";
 import { c as css, L as LikeC4ProjectsProvider, u as useLikeC4Projects, I as IconRendererProvider, a as LikeC4ModelProvider, S as StaticLikeC4Diagram, M as Markdown, R as RichText, B as Box$1, b as useLikeC4Model$1, n as nonexhaustive, d as compareNatural, e as useUpdateEffect, f as IconStarFilled, g as IconStack2, h as IconLayoutDashboard, i as IconFileCode, j as IconFolderOpen, k as IconFolderFilled, l as IconArrowLeft, m as IconMoonStars, o as IconSun, p as IconChevronDown, q as IconAlertTriangle, r as IconCheck, s as IconCopy, t as IconExternalLink, v as IconShare, w as computeRelationshipsView, x as toArray, y as sortParentsFirst, z as exact, A as invariant, C as isDescendantOf, D as isAncestor, E as nonNullable, F as getViewBounds, G as LikeC4Diagram, H as useDiagramContext } from "./likec4.js";
 import { pageTitle, ComponentName, useHashHistory, withOverviewGraph, krokiPumlSvgUrl, isDevelopment, krokiD2SvgUrl, basepath } from "./const.js";