likec4 1.42.0 → 1.43.0

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
  *
@@ -1801,7 +1801,7 @@ const ZIndexes = {
 }, MinZoom = 0.05, MaxZoom = 3, FitViewPaddings = {
   default: "16px",
   withControls: {
-    top: "50px",
+    top: "58px",
     left: "16px",
     right: "16px",
     bottom: "16px"
@@ -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,
@@ -7969,7 +8044,252 @@ const useElementDetailsActorRef = () => {
     borderWidth: "4px",
     borderColor: "mantine.colors.dark[1]"
   }
-}), treeNode$1 = css({
+});
+function MetadataProvider({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function TruncatedValue({ value, isExpanded }) {
+  const [isTruncated, setIsTruncated] = useState(!1), textRef = useRef(null);
+  return useEffect(() => {
+    textRef.current && setIsTruncated(textRef.current.scrollWidth > textRef.current.clientWidth);
+  }, [value]), /* @__PURE__ */ jsx(
+    Tooltip$6,
+    {
+      label: isTruncated && !isExpanded ? value : null,
+      multiline: !0,
+      w: 300,
+      withinPortal: !0,
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          ref: textRef,
+          component: "div",
+          className: css({
+            fontSize: "sm",
+            padding: "xs",
+            userSelect: "all",
+            color: "mantine.colors.text",
+            lineHeight: 1.4,
+            whiteSpace: isExpanded ? "pre-wrap" : "nowrap",
+            overflow: isExpanded ? "visible" : "hidden",
+            textOverflow: isExpanded ? "unset" : "ellipsis",
+            wordBreak: isExpanded ? "break-word" : "normal",
+            minWidth: 0,
+            width: "100%"
+          }),
+          children: value
+        }
+      )
+    }
+  );
+}
+function MultiValueDisplay({
+  values,
+  isExpanded,
+  onToggle
+}) {
+  return isExpanded ? /* @__PURE__ */ jsx(Stack, { gap: "xs", children: values.map((value, index2) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        className: css({
+          fontSize: "xs",
+          color: "mantine.colors.gray[5]",
+          fontWeight: 500,
+          flexShrink: 0,
+          _dark: {
+            color: "mantine.colors.dark[3]"
+          }
+        }),
+        children: "•"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box$1,
+      {
+        className: css({
+          minHeight: "32px",
+          display: "flex",
+          alignItems: "center",
+          flex: 1
+        }),
+        children: /* @__PURE__ */ jsx(TruncatedValue, { value, isExpanded: !0 })
+      }
+    )
+  ] }, index2)) }) : /* @__PURE__ */ jsx(
+    Box$1,
+    {
+      className: css({
+        minHeight: "32px",
+        display: "flex",
+        alignItems: "center",
+        padding: "xs",
+        gap: "xs",
+        flexWrap: "wrap",
+        minWidth: 0,
+        // Allow shrinking
+        overflow: "hidden"
+        // Prevent overflow
+      }),
+      children: values.map((value, index2) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: css({
+              fontSize: "sm",
+              padding: "[4px 8px]",
+              backgroundColor: "mantine.colors.white",
+              color: "mantine.colors.text",
+              borderRadius: "sm",
+              border: "1px solid",
+              borderColor: "mantine.colors.gray[3]",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              maxWidth: "min(200px, 100%)",
+              minWidth: "60px",
+              flex: "0 1 auto",
+              userSelect: "all",
+              _dark: {
+                backgroundColor: "mantine.colors.dark[9]",
+                color: "mantine.colors.text",
+                borderColor: "mantine.colors.dark[4]"
+              }
+            }),
+            title: value,
+            children: value
+          }
+        ),
+        index2 < values.length - 1 && /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: css({
+              fontSize: "xs",
+              color: "mantine.colors.gray[5]",
+              fontWeight: 500,
+              flexShrink: 0,
+              _dark: {
+                color: "mantine.colors.dark[3]"
+              }
+            }),
+            children: "•"
+          }
+        )
+      ] }, index2))
+    }
+  );
+}
+function MetadataValue({ label: label2, value }) {
+  const elements = Array.isArray(value) ? value : typeof value == "string" && value.includes(`
+`) ? value.split(`
+`).map((s) => s.trim()).filter(Boolean) : [value], hasMultipleElements = elements.length > 1, [isExpanded, setIsExpanded] = useState(!1), handleToggle = () => {
+    setIsExpanded(!isExpanded);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasMultipleElements ? /* @__PURE__ */ jsx(
+      UnstyledButton,
+      {
+        onClick: handleToggle,
+        className: css({
+          fontSize: "xs",
+          color: "mantine.colors.dimmed",
+          justifySelf: "end",
+          textAlign: "right",
+          userSelect: "none",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          gap: "xs",
+          padding: "[4px 8px]",
+          borderRadius: "sm",
+          whiteSpace: "nowrap",
+          transition: "all 150ms ease",
+          _hover: {
+            backgroundColor: "mantine.colors.gray[1]",
+            color: "mantine.colors.primary[6]",
+            _dark: {
+              backgroundColor: "mantine.colors.dark[7]",
+              color: "mantine.colors.primary[4]"
+            }
+          }
+        }),
+        children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", children: [
+          /* @__PURE__ */ jsxs(Text, { component: "span", size: "xs", fw: 700, children: [
+            label2,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              component: "span",
+              className: css({
+                fontSize: "xs",
+                fontWeight: 500,
+                color: "mantine.colors.gray[6]",
+                backgroundColor: "mantine.colors.gray[1]",
+                padding: "[1px 4px]",
+                borderRadius: "xs",
+                _dark: {
+                  color: "mantine.colors.dark[2]",
+                  backgroundColor: "mantine.colors.dark[6]"
+                }
+              }),
+              children: elements.length
+            }
+          ),
+          isExpanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: 12 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 12 })
+        ] })
+      }
+    ) : /* @__PURE__ */ jsxs(
+      Text,
+      {
+        component: "div",
+        className: css({
+          fontSize: "xs",
+          color: "mantine.colors.dimmed",
+          justifySelf: "end",
+          textAlign: "right",
+          userSelect: "none",
+          whiteSpace: "nowrap",
+          padding: "[4px 8px]",
+          fontWeight: 700
+        }),
+        children: [
+          label2,
+          ":"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box$1,
+      {
+        className: css({
+          justifySelf: "stretch",
+          alignSelf: "start"
+        }),
+        children: hasMultipleElements ? /* @__PURE__ */ jsx(
+          MultiValueDisplay,
+          {
+            values: elements,
+            isExpanded,
+            onToggle: handleToggle
+          }
+        ) : /* @__PURE__ */ jsx(
+          Box$1,
+          {
+            className: css({
+              minHeight: "32px",
+              display: "flex",
+              alignItems: "center"
+            }),
+            children: /* @__PURE__ */ jsx(TruncatedValue, { value: elements[0] || "", isExpanded })
+          }
+        )
+      }
+    )
+  ] });
+}
+const treeNode$1 = css({
   "&[data-level='1']": {
     marginBottom: "sm"
   }
@@ -9927,7 +10247,7 @@ function ElementDetailsCard({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(MetadataProvider, { children: /* @__PURE__ */ jsxs(
               Tabs,
               {
                 value: activeTab,
@@ -10007,7 +10327,7 @@ function ElementDetailsCard({
                   /* @__PURE__ */ jsx(TabsPanel, { value: "Deployments", children: /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "y", type: "auto", children: /* @__PURE__ */ jsx(TabPanelDeployments, { elementFqn: elementModel.id }) }) })
                 ]
               }
-            ),
+            ) }),
             /* @__PURE__ */ jsx(
               m.div,
               {
@@ -10061,97 +10381,24 @@ function ElementProperty({
 function ElementMetata({
   value: metadata
 }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(PropertyLabel, { children: "metadata" }),
+  const metadataEntries = t$c(metadata).sort(([a], [b]) => a.localeCompare(b));
+  return /* @__PURE__ */ jsx(MetadataProvider, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PropertyLabel, { style: { justifySelf: "end", textAlign: "right" }, children: "metadata" }),
     /* @__PURE__ */ jsx(
       Box$1,
       {
         className: css({
-          flex: 1,
           display: "grid",
           gridTemplateColumns: "min-content 1fr",
-          gridAutoRows: "min-content max-content",
-          gap: "[4px 4px]",
+          gridAutoRows: "min-content",
+          gap: "[12px 16px]",
           alignItems: "baseline",
-          justifyItems: "stretch",
-          paddingRight: "xxs"
+          justifyItems: "stretch"
         }),
-        children: t$c(metadata).map(([key2, value]) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "contents"
-            },
-            className: "group",
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: css({
-                    fontSize: "sm",
-                    fontWeight: 500,
-                    justifySelf: "end",
-                    whiteSpace: "nowrap"
-                  }),
-                  children: [
-                    key2,
-                    ":"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: css({}),
-                  children: /* @__PURE__ */ jsx(
-                    ScrollArea.Autosize,
-                    {
-                      type: "auto",
-                      mah: 200,
-                      classNames: {
-                        root: css({
-                          transitionProperty: "all",
-                          transitionDuration: "fast",
-                          transitionTimingFunction: "inOut",
-                          rounded: "sm",
-                          color: "mantine.colors.gray[8]",
-                          _dark: {
-                            color: "mantine.colors.dark[1]"
-                          },
-                          _groupHover: {
-                            transitionTimingFunction: "out",
-                            color: "mantine.colors.defaultColor",
-                            background: "mantine.colors.defaultHover"
-                          }
-                        }),
-                        viewport: css({
-                          overscrollBehavior: "none"
-                        })
-                      },
-                      children: /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: css({
-                            fontSize: "sm",
-                            padding: "xxs",
-                            whiteSpace: "pre",
-                            fontFamily: "mono",
-                            userSelect: "all"
-                          }),
-                          children: value
-                        }
-                      )
-                    }
-                  )
-                }
-              )
-            ]
-          },
-          key2
-        ))
+        children: metadataEntries.map(([key2, value]) => /* @__PURE__ */ jsx(MetadataValue, { label: key2, value }, key2))
       }
     )
-  ] });
+  ] }) });
 }
 function ElementDetails({
   actorRef,
@@ -12911,20 +13158,17 @@ const shapeBadge = css({
   );
 }, selector = (s) => ({
   id: s.view.id,
-  notations: s.view.notation?.nodes ?? [],
-  isVisible: !0
-  // isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough),
+  notations: s.view.notation?.nodes ?? []
 }), NotationPanel = memo$1(() => {
   const height = useXYStore((s) => s.height), {
     id,
-    notations,
-    isVisible
+    notations
   } = useDiagramContext(selector), [isCollapsed, setCollapsed] = useLocalStorage({
     key: "notation-webview-collapsed",
     defaultValue: !0
   }), hasNotations = notations.length > 0, portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-    !hasNotations && isVisible && /* @__PURE__ */ jsx(
+    !hasNotations && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: { opacity: 0.75, translateX: "50%" },
@@ -12947,7 +13191,7 @@ const shapeBadge = css({
       },
       "empty"
     ),
-    hasNotations && isVisible && isCollapsed && /* @__PURE__ */ jsx(
+    hasNotations && isCollapsed && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: { opacity: 0.75, translateX: "50%" },
@@ -12971,7 +13215,7 @@ const shapeBadge = css({
       },
       "collapsed"
     ),
-    hasNotations && isVisible && !isCollapsed && /* @__PURE__ */ jsx(
+    hasNotations && !isCollapsed && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: {
@@ -13659,9 +13903,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 });
@@ -14118,11 +14360,11 @@ function _update(current, updated) {
 function updateNodes(current, update) {
   return e$c(update) ? _update(current, update) : (update = current, (current2) => _update(current2, update));
 }
-const ViewPadding = {
+const ViewPadding$1 = {
   top: "40px",
-  bottom: "16px",
-  left: "16px",
-  right: "16px"
+  bottom: "22px",
+  left: "22px",
+  right: "22px"
 };
 function viewToNodesEdge(view) {
   const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map(), queue = Queue.from(view.nodes.reduce(
@@ -14281,7 +14523,7 @@ const findRootSubject = (nodes) => nodes.find(
     };
   }, parent = nonNullable(self._parent);
   let zoom = xyflow2.getZoom();
-  const maxZoom = Math.max(zoom, 1), nextviewport = getViewportForBounds(update.bounds, width, height, MinZoom, maxZoom, ViewPadding), nextSubjectNode = next.xynodes.find(
+  const maxZoom = Math.max(zoom, 1), nextviewport = getViewportForBounds(update.bounds, width, height, MinZoom, maxZoom, ViewPadding$1), nextSubjectNode = next.xynodes.find(
     (n2) => n2.type !== "empty" && n2.data.column === "subjects" && n2.data.fqn === subjectId
   ) ?? findRootSubject(next.xynodes), currentSubjectNode = findRootSubject(currentNodes), existingNode = navigateFromNode ? currentNodes.find((n2) => n2.id === navigateFromNode) : currentNodes.find((n2) => n2.type !== "empty" && n2.data.column !== "subjects" && n2.data.fqn === subjectId);
   if (!nextSubjectNode || !existingNode || nextSubjectNode.type === "empty" || !currentSubjectNode || nextSubjectNode.data.fqn === currentSubjectNode.data.fqn)
@@ -14368,13 +14610,13 @@ const findRootSubject = (nodes) => nodes.find(
       invariant(xyflow2, "xyflow is not initialized"), invariant(xystore, "xystore is not initialized"), bounds ??= context2.layouted?.bounds;
       const maxZoom = Math.max(xyflow2.getZoom(), 1);
       if (bounds) {
-        const { width, height } = xystore.getState(), viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, ViewPadding);
+        const { width, height } = xystore.getState(), viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, ViewPadding$1);
         xyflow2.setViewport(viewport, duration > 0 ? { duration } : void 0).catch(console.error);
       } else
         xyflow2.fitView({
           minZoom: MinZoom,
           maxZoom,
-          padding: ViewPadding,
+          padding: ViewPadding$1,
           ...duration > 0 && { duration }
         }).catch(console.error);
     },
@@ -14798,7 +15040,10 @@ function inputToSubject(input2) {
     target: input2.target
   };
 }
-const _relationshipDetailsLogic = xstate_cjsExports.setup({
+const ViewPadding = {
+  x: "22px",
+  y: "22px"
+}, _relationshipDetailsLogic = xstate_cjsExports.setup({
   types: {
     context: {},
     input: {},
@@ -14812,13 +15057,13 @@ const _relationshipDetailsLogic = xstate_cjsExports.setup({
       invariant(xyflow2, "xyflow is not initialized"), invariant(xystore, "xystore is not initialized"), bounds ??= context2.bounds;
       const maxZoom = Math.max(xyflow2.getZoom(), 1);
       if (bounds) {
-        const { width, height } = xystore.getState(), viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, 0.1);
+        const { width, height } = xystore.getState(), viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, ViewPadding);
         xyflow2.setViewport(viewport, duration > 0 ? { duration } : void 0).catch(console.error);
       } else
         xyflow2.fitView({
           minZoom: MinZoom,
           maxZoom,
-          padding: 0.1,
+          padding: ViewPadding,
           ...duration > 0 && { duration }
         }).catch(console.error);
     },
@@ -17052,12 +17297,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 +17446,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",
@@ -17213,7 +17457,7 @@ function LikeC4Diagram({
   enableRelationshipBrowser = !1,
   nodesDraggable = !readonly,
   nodesSelectable = !readonly || enableFocusMode || !!onNavigateTo || !!onNodeClick,
-  showNotations = !0,
+  enableNotations = !1,
   showNavigationButtons = !!onNavigateTo,
   enableDynamicViewWalkthrough = !1,
   dynamicViewVariant,
@@ -17223,20 +17467,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,
     {
@@ -17256,7 +17506,7 @@ function LikeC4Diagram({
             enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
             enableDynamicViewWalkthrough: view._type === "dynamic" && enableDynamicViewWalkthrough,
             enableEdgeEditing: experimentalEdgeEditing,
-            enableNotations: showNotations,
+            enableNotations,
             enableVscode: !!onOpenSource,
             enableControls: controls,
             enableElementTags
@@ -17280,12 +17530,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 +17545,7 @@ function LikeC4Diagram({
                         nodesSelectable,
                         where: where ?? null,
                         dynamicViewVariant,
-                        children: /* @__PURE__ */ jsxs(ControlsCustomLayoutProvider, { value: renderControls ?? null, children: [
+                        children: [
                           /* @__PURE__ */ jsx(
                             LikeC4DiagramXYFlow,
                             {
@@ -17308,11 +17558,11 @@ function LikeC4Diagram({
                             }
                           ),
                           /* @__PURE__ */ jsx(LikeC4DiagramUI, {})
-                        ] })
+                        ]
                       }
                     )
                   }
-                ) }) }) })
+                ) }) })
               ]
             }
           )
@@ -17321,6 +17571,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
@@ -17358,7 +17616,7 @@ function StaticLikeC4Diagram({
       zoomable: !1,
       controls: !1,
       background,
-      showNotations: !1,
+      enableNotations: !1,
       enableElementDetails: !1,
       enableRelationshipDetails,
       enableRelationshipBrowser,