likec4 1.50.0 → 1.52.0

package/__app__/src/likec4.js

@@ -1,7 +1,7 @@
 import { forwardRef, createElement, useContext, createContext as createContext$1, memo as memo$1, useRef, useMemo, useCallback, useState, useEffect, Fragment as Fragment$1, useDeferredValue, useLayoutEffect, Suspense, Profiler } from "react";
 import { BBox, vector, convertPoint } from "@likec4/core/geometry";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { B as Background$1, a as BackgroundVariant, d as deepEqual, u as useFirstMountState, b as useCustomCompareEffect, s as shallowEqual, c as useStore, e as useStoreApi, f as useReactFlow, t, g as e, h as t$1, i as Bezier, j as getNodeDimensions, n, k as useMantineColorScheme, l as index, m as e$1, o as t$2, p as t$3, q as createSafeContext$1, r as atom, v as useStore$1, w as useSyncedRef, x as e$2, y as t$4, z as t$5, M as MantineProvider, A as createTheme, T as Tooltip$7, P as Portal, S as SegmentedControl, C as MantineContext, D as useMantineStyleNonce, L as LazyMotion, E as domMax, F as MotionConfig, G as useSelector, H as e$3, I as t$6, J as t$7, K as t$8, N as t$9, O as useId$1, Q as m, R as ThemeIcon, U as Text, V as ScrollAreaAutosize, W as Button, X as setup, Y as emit, Z as assign, _ as raise, $ as assertEvent, a0 as t$a, a1 as fromCallback, a2 as getHotkeyHandler, a3 as fromPromise, a4 as t$b, a5 as n$1, a6 as n$2, a7 as e$4, a8 as enqueueActions, a9 as r, aa as log, ab as sendTo, ac as getViewportForBounds, ad as getNodesBounds, ae as getEdgePosition, af as t$c, ag as t$d, ah as e$5, ai as t$e, aj as t$f, ak as n$3, al as dagre, am as t$g, an as t$h, ao as t$i, ap as cancel, aq as applyEdgeChanges, ar as applyNodeChanges, as as e$6, at as stopChild, au as spawnChild, av as e$7, aw as not, ax as t$j, ay as t$k, az as e$8, aA as ActionIcon, aB as MotionButton, aC as Breadcrumbs, aD as Menu, aE as UnstyledButton, aF as MotionDiv, aG as Divider$2, aH as useDebouncedCallback, aI as AnimatePresence, aJ as m$1, aK as stagger, aL as useIsMounted, aM as useHover, aN as Popover, aO as PopoverTarget, aP as PopoverDropdown, aQ as Box$1, aR as FloatingIndicator, aS as Flex$1, aT as useDebouncedCallback$1, aU as useUncontrolled, aV as clampUseMovePosition, aW as useMove, aX as useMergedRef, aY as TooltipGroup, aZ as useDebouncedValue, a_ as EdgeLabelRenderer, a$ as e$9, b0 as useDebouncedState, b1 as NodeToolbar, b2 as Position, b3 as Handle, b4 as Badge, b5 as CopyButton, b6 as HoverCard, b7 as HoverCardTarget, b8 as HoverCardDropdown, b9 as Notification, ba as isMacOs, bb as NavLink, bc as MenuTarget, bd as MenuDropdown, be as MenuItem, bf as useThrottledCallback, bg as Input, bh as rem, bi as t$l, bj as createScopedKeydownHandler, bk as Highlight, bl as useMountEffect, bm as e$a, bn as useActorRef, bo as LayoutGroup, bp as Stack, bq as useTree, br as Alert, bs as Tree$1, bt as Group, bu as getBezierPath, bv as ReactFlowProvider, bw as useStateHistory, bx as Panel, by as useClipboard, bz as Paper, bA as Anchor, bB as Pill, bC as useViewportSize, bD as useSessionStorage, bE as t$m, bF as useDragControls, bG as useMotionValue, bH as useTimeoutEffect, bI as ReactRemoveScroll, bJ as CloseButton, bK as ActionIconGroup, bL as Tabs, bM as TabsList, bN as TabsTab, bO as TabsPanel, bP as ScrollArea, bQ as useFocusTrap, bR as useReducedMotionConfig, bS as useCallbackRef$1, bT as animate, bU as e$b, bV as VisuallyHidden, bW as n$4, bX as useWindowEvent, bY as FocusTrap, bZ as Title$1, b_ as useFocusWithin, b$ as useCombobox, c0 as ComboboxOption, c1 as Combobox, c2 as ComboboxTarget, c3 as ComboboxDropdown, c4 as ComboboxOptions, c5 as ComboboxEmpty, c6 as createEmptyActor, c7 as useHotkeys, c8 as usePresence, c9 as Grid, ca as GridCol, cb as autoUpdate, cc as computePosition, cd as offset, ce as autoPlacement, cf as size, cg as hide, ch as useLocalStorage, ci as Card, cj as n$5, ck as useRerender, cl as d3line, cm as curveCatmullRomOpen, cn as useRafEffect, co as getSmoothStepPath, cp as e$c, cq as useDisclosure, cr as ViewportPortal, cs as ColorSwatch, ct as Space, cu as CheckIcon, cv as useUpdateEffect$1, cw as Slider, cx as r$1, cy as produce, cz as useTimeout, cA as useCustomCompareMemo, cB as setAutoFreeze, cC as castDraft, cD as n$6, cE as t$n, cF as nodeToRect$1, cG as and, cH as or, cI as e$d, cJ as e$e, cK as motionValue, cL as mapValue, cM as styleEffect, cN as isValidMotionProp, cO as collection, cP as useMachine, cQ as machine$6, cR as connect, cS as normalizeProps, cT as createStore, cU as shallowEqual$1, cV as useSelector$1, cW as mergeProps$1, cX as t$o } from "./vendors.js";
+import { B as Background$1, a as BackgroundVariant, d as deepEqual, u as useFirstMountState, b as useCustomCompareEffect, s as shallowEqual, c as useStore, e as useStoreApi, f as useReactFlow, t, g as e, h as t$1, i as Bezier, j as getNodeDimensions, n, k as useMantineColorScheme, l as index, m as e$1, o as t$2, p as t$3, q as createSafeContext$1, r as atom, v as useStore$1, w as useSyncedRef, x as e$2, y as t$4, z as t$5, M as MantineProvider, A as createTheme, T as Tooltip$7, P as Portal, S as SegmentedControl, C as MantineContext, D as useMantineStyleNonce, L as LazyMotion, E as domMax, F as MotionConfig, G as useSelector, H as e$3, I as t$6, J as t$7, K as t$8, N as t$9, O as useId$1, Q as m, R as ThemeIcon, U as Text, V as ScrollAreaAutosize, W as Button, X as setup, Y as emit, Z as assign, _ as raise, $ as assertEvent, a0 as t$a, a1 as fromCallback, a2 as getHotkeyHandler, a3 as fromPromise, a4 as t$b, a5 as n$1, a6 as n$2, a7 as e$4, a8 as enqueueActions, a9 as r, aa as log, ab as sendTo, ac as getViewportForBounds, ad as getNodesBounds, ae as getEdgePosition, af as t$c, ag as t$d, ah as e$5, ai as t$e, aj as t$f, ak as n$3, al as dagre, am as t$g, an as t$h, ao as t$i, ap as cancel, aq as applyEdgeChanges, ar as applyNodeChanges, as as e$6, at as stopChild, au as spawnChild, av as e$7, aw as not, ax as t$j, ay as t$k, az as e$8, aA as ActionIcon, aB as MotionButton, aC as Breadcrumbs, aD as Menu, aE as UnstyledButton, aF as MotionDiv, aG as Divider$2, aH as useDebouncedCallback, aI as AnimatePresence, aJ as m$1, aK as stagger, aL as useIsMounted, aM as useHover, aN as Popover, aO as PopoverTarget, aP as PopoverDropdown, aQ as Box$1, aR as FloatingIndicator, aS as Flex$1, aT as useDebouncedCallback$1, aU as useUncontrolled, aV as clampUseMovePosition, aW as useMove, aX as useMergedRef, aY as TooltipGroup, aZ as useDebouncedValue, a_ as EdgeLabelRenderer, a$ as e$9, b0 as useDebouncedState, b1 as NodeToolbar, b2 as Position, b3 as Handle, b4 as Badge, b5 as CopyButton, b6 as HoverCard, b7 as HoverCardTarget, b8 as HoverCardDropdown, b9 as Notification, ba as isMacOs, bb as NavLink, bc as MenuTarget, bd as MenuDropdown, be as MenuItem, bf as useThrottledCallback, bg as Input, bh as rem, bi as t$l, bj as createScopedKeydownHandler, bk as Highlight, bl as useMountEffect, bm as e$a, bn as useActorRef, bo as LayoutGroup, bp as Stack, bq as useTree, br as Alert, bs as Tree$1, bt as Group, bu as getBezierPath, bv as ReactFlowProvider, bw as useStateHistory, bx as Panel, by as useClipboard, bz as Paper, bA as Anchor, bB as Pill, bC as useViewportSize, bD as useSessionStorage, bE as t$m, bF as useDragControls, bG as useMotionValue, bH as useTimeoutEffect, bI as ReactRemoveScroll, bJ as CloseButton, bK as ActionIconGroup, bL as Tabs, bM as TabsList, bN as TabsTab, bO as TabsPanel, bP as ScrollArea, bQ as useFocusTrap, bR as useReducedMotionConfig, bS as useCallbackRef$1, bT as animate, bU as e$b, bV as VisuallyHidden, bW as n$4, bX as useWindowEvent, bY as FocusTrap, bZ as Title$1, b_ as useFocusWithin, b$ as useCombobox, c0 as ComboboxOption, c1 as Combobox, c2 as ComboboxTarget, c3 as ComboboxDropdown, c4 as ComboboxOptions, c5 as ComboboxEmpty, c6 as Grid, c7 as GridCol, c8 as createEmptyActor, c9 as useHotkeys, ca as usePresence, cb as autoUpdate, cc as computePosition, cd as offset, ce as autoPlacement, cf as size, cg as hide, ch as useLocalStorage, ci as Card, cj as n$5, ck as useRerender, cl as d3line, cm as curveCatmullRomOpen, cn as useRafEffect, co as getSmoothStepPath, cp as e$c, cq as useDisclosure, cr as ViewportPortal, cs as ColorSwatch, ct as Space, cu as CheckIcon, cv as useUpdateEffect$1, cw as Slider, cx as r$1, cy as produce, cz as useTimeout, cA as useCustomCompareMemo, cB as setAutoFreeze, cC as castDraft, cD as n$6, cE as t$n, cF as nodeToRect$1, cG as and, cH as or, cI as e$d, cJ as e$e, cK as motionValue, cL as mapValue, cM as styleEffect, cN as isValidMotionProp, cO as collection, cP as useMachine, cQ as machine$6, cR as connect, cS as normalizeProps, cT as createStore, cU as shallowEqual$1, cV as useSelector$1, cW as mergeProps$1, cX as t$o } from "./vendors.js";
 import { nonexhaustive, isTagColorSpecified, invariant as invariant$1, Queue, GroupElementKind, nonNullable as nonNullable$1, isStepEdgeId, extractStep, RichText as RichText$1, ancestorsFqn, nameFromFqn, isAncestor as isAncestor$1, hasProp, DefaultMap as DefaultMap$1, whereOperatorAsPredicate, isNonEmptyArray, BBox as BBox$1, exact as exact$1, getParallelStepsPrefix, ModelFqnExpr } from "@likec4/core";
 import { invariant, nonNullable, nonexhaustive as nonexhaustive$1, toArray, ifind, DefaultMap, delay, ifirst, ifilter, compareNaturalHierarchically, compareNatural, isAncestor, sortParentsFirst, imap, stringHash, nameFromFqn as nameFromFqn$1, isome, difference, toSet, objectHash } from "@likec4/core/utils";
 import { computeRelationshipsView, treeFromElements } from "@likec4/core/compute-view";
@@ -370,23 +370,25 @@ const createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
   );
   return Component.displayName = `${iconNamePascal}`, Component;
 };
-const __iconNode$R = [["path", { d: "M12 9v4", key: "svg-0" }], ["path", { d: "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0", key: "svg-1" }], ["path", { d: "M12 16h.01", key: "svg-2" }]], IconAlertTriangle = createReactComponent("outline", "alert-triangle", "AlertTriangle", __iconNode$R);
-const __iconNode$Q = [["path", { d: "M7 7l10 10", key: "svg-0" }], ["path", { d: "M17 8l0 9l-9 0", key: "svg-1" }]], IconArrowDownRight = createReactComponent("outline", "arrow-down-right", "ArrowDownRight", __iconNode$Q);
-const __iconNode$P = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M5 12l6 6", key: "svg-1" }], ["path", { d: "M5 12l6 -6", key: "svg-2" }]], IconArrowLeft = createReactComponent("outline", "arrow-left", "ArrowLeft", __iconNode$P);
-const __iconNode$O = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M13 18l6 -6", key: "svg-1" }], ["path", { d: "M13 6l6 6", key: "svg-2" }]], IconArrowRight = createReactComponent("outline", "arrow-right", "ArrowRight", __iconNode$O);
-const __iconNode$N = [["path", { d: "M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11", key: "svg-0" }]], IconBolt = createReactComponent("outline", "bolt", "Bolt", __iconNode$N);
-const __iconNode$M = [["path", { d: "M4 8h16", key: "svg-0" }], ["path", { d: "M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12", key: "svg-1" }], ["path", { d: "M8 4v4", key: "svg-2" }]], IconBrowser = createReactComponent("outline", "browser", "Browser", __iconNode$M);
-const __iconNode$L = [["path", { d: "M5 12l5 5l10 -10", key: "svg-0" }]], IconCheck = createReactComponent("outline", "check", "Check", __iconNode$L);
-const __iconNode$K = [["path", { d: "M6 9l6 6l6 -6", key: "svg-0" }]], IconChevronDown = createReactComponent("outline", "chevron-down", "ChevronDown", __iconNode$K);
-const __iconNode$J = [["path", { d: "M15 6l-6 6l6 6", key: "svg-0" }]], IconChevronLeft = createReactComponent("outline", "chevron-left", "ChevronLeft", __iconNode$J);
-const __iconNode$I = [["path", { d: "M9 6l6 6l-6 6", key: "svg-0" }]], IconChevronRight = createReactComponent("outline", "chevron-right", "ChevronRight", __iconNode$I);
-const __iconNode$H = [["path", { d: "M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666", key: "svg-0" }], ["path", { d: "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", key: "svg-1" }]], IconCopy = createReactComponent("outline", "copy", "Copy", __iconNode$H);
-const __iconNode$G = [["path", { d: "M5 6a7 3 0 1 0 14 0a7 3 0 1 0 -14 0", key: "svg-0" }], ["path", { d: "M5 6v12c0 1.657 3.134 3 7 3s7 -1.343 7 -3v-12", key: "svg-1" }]], IconCylinder = createReactComponent("outline", "cylinder", "Cylinder", __iconNode$G);
-const __iconNode$F = [["path", { d: "M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14", key: "svg-0" }], ["path", { d: "M11 4h2", key: "svg-1" }], ["path", { d: "M12 17v.01", key: "svg-2" }]], IconDeviceMobile = createReactComponent("outline", "device-mobile", "DeviceMobile", __iconNode$F);
-const __iconNode$E = [["path", { d: "M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6", key: "svg-0" }], ["path", { d: "M11 13l9 -9", key: "svg-1" }], ["path", { d: "M15 4h5v5", key: "svg-2" }]], IconExternalLink = createReactComponent("outline", "external-link", "ExternalLink", __iconNode$E);
-const __iconNode$D = [["path", { d: "M4 21v-4a3 3 0 0 1 3 -3h5", key: "svg-0" }], ["path", { d: "M9 17l3 -3l-3 -3", key: "svg-1" }], ["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-2" }], ["path", { d: "M5 11v-6a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-9.5", key: "svg-3" }]], IconFileSymlink = createReactComponent("outline", "file-symlink", "FileSymlink", __iconNode$D);
-const __iconNode$C = [["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-0" }], ["path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2", key: "svg-1" }], ["path", { d: "M9 9l1 0", key: "svg-2" }], ["path", { d: "M9 13l6 0", key: "svg-3" }], ["path", { d: "M9 17l6 0", key: "svg-4" }]], IconFileText = createReactComponent("outline", "file-text", "FileText", __iconNode$C);
-const __iconNode$B = [["path", { d: "M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", key: "svg-0" }], ["path", { d: "M4 8v-2a2 2 0 0 1 2 -2h2", key: "svg-1" }], ["path", { d: "M4 16v2a2 2 0 0 0 2 2h2", key: "svg-2" }], ["path", { d: "M16 4h2a2 2 0 0 1 2 2v2", key: "svg-3" }], ["path", { d: "M16 20h2a2 2 0 0 0 2 -2v-2", key: "svg-4" }]], IconFocusCentered = createReactComponent("outline", "focus-centered", "FocusCentered", __iconNode$B);
+const __iconNode$T = [["path", { d: "M12 9v4", key: "svg-0" }], ["path", { d: "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0", key: "svg-1" }], ["path", { d: "M12 16h.01", key: "svg-2" }]], IconAlertTriangle = createReactComponent("outline", "alert-triangle", "AlertTriangle", __iconNode$T);
+const __iconNode$S = [["path", { d: "M7 7l10 10", key: "svg-0" }], ["path", { d: "M17 8l0 9l-9 0", key: "svg-1" }]], IconArrowDownRight = createReactComponent("outline", "arrow-down-right", "ArrowDownRight", __iconNode$S);
+const __iconNode$R = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M5 12l6 6", key: "svg-1" }], ["path", { d: "M5 12l6 -6", key: "svg-2" }]], IconArrowLeft = createReactComponent("outline", "arrow-left", "ArrowLeft", __iconNode$R);
+const __iconNode$Q = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M13 18l6 -6", key: "svg-1" }], ["path", { d: "M13 6l6 6", key: "svg-2" }]], IconArrowRight = createReactComponent("outline", "arrow-right", "ArrowRight", __iconNode$Q);
+const __iconNode$P = [["path", { d: "M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11", key: "svg-0" }]], IconBolt = createReactComponent("outline", "bolt", "Bolt", __iconNode$P);
+const __iconNode$O = [["path", { d: "M4 8h16", key: "svg-0" }], ["path", { d: "M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12", key: "svg-1" }], ["path", { d: "M8 4v4", key: "svg-2" }]], IconBrowser = createReactComponent("outline", "browser", "Browser", __iconNode$O);
+const __iconNode$N = [["path", { d: "M5 12l5 5l10 -10", key: "svg-0" }]], IconCheck = createReactComponent("outline", "check", "Check", __iconNode$N);
+const __iconNode$M = [["path", { d: "M6 9l6 6l6 -6", key: "svg-0" }]], IconChevronDown = createReactComponent("outline", "chevron-down", "ChevronDown", __iconNode$M);
+const __iconNode$L = [["path", { d: "M15 6l-6 6l6 6", key: "svg-0" }]], IconChevronLeft = createReactComponent("outline", "chevron-left", "ChevronLeft", __iconNode$L);
+const __iconNode$K = [["path", { d: "M9 6l6 6l-6 6", key: "svg-0" }]], IconChevronRight = createReactComponent("outline", "chevron-right", "ChevronRight", __iconNode$K);
+const __iconNode$J = [["path", { d: "M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666", key: "svg-0" }], ["path", { d: "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", key: "svg-1" }]], IconCopy = createReactComponent("outline", "copy", "Copy", __iconNode$J);
+const __iconNode$I = [["path", { d: "M5 6a7 3 0 1 0 14 0a7 3 0 1 0 -14 0", key: "svg-0" }], ["path", { d: "M5 6v12c0 1.657 3.134 3 7 3s7 -1.343 7 -3v-12", key: "svg-1" }]], IconCylinder = createReactComponent("outline", "cylinder", "Cylinder", __iconNode$I);
+const __iconNode$H = [["path", { d: "M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14", key: "svg-0" }], ["path", { d: "M11 4h2", key: "svg-1" }], ["path", { d: "M12 17v.01", key: "svg-2" }]], IconDeviceMobile = createReactComponent("outline", "device-mobile", "DeviceMobile", __iconNode$H);
+const __iconNode$G = [["path", { d: "M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6", key: "svg-0" }], ["path", { d: "M11 13l9 -9", key: "svg-1" }], ["path", { d: "M15 4h5v5", key: "svg-2" }]], IconExternalLink = createReactComponent("outline", "external-link", "ExternalLink", __iconNode$G);
+const __iconNode$F = [["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-0" }], ["path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2", key: "svg-1" }], ["path", { d: "M10 13l-1 2l1 2", key: "svg-2" }], ["path", { d: "M14 13l1 2l-1 2", key: "svg-3" }]], IconFileCode = createReactComponent("outline", "file-code", "FileCode", __iconNode$F);
+const __iconNode$E = [["path", { d: "M4 21v-4a3 3 0 0 1 3 -3h5", key: "svg-0" }], ["path", { d: "M9 17l3 -3l-3 -3", key: "svg-1" }], ["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-2" }], ["path", { d: "M5 11v-6a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-9.5", key: "svg-3" }]], IconFileSymlink = createReactComponent("outline", "file-symlink", "FileSymlink", __iconNode$E);
+const __iconNode$D = [["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-0" }], ["path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2", key: "svg-1" }], ["path", { d: "M9 9l1 0", key: "svg-2" }], ["path", { d: "M9 13l6 0", key: "svg-3" }], ["path", { d: "M9 17l6 0", key: "svg-4" }]], IconFileText = createReactComponent("outline", "file-text", "FileText", __iconNode$D);
+const __iconNode$C = [["path", { d: "M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", key: "svg-0" }], ["path", { d: "M4 8v-2a2 2 0 0 1 2 -2h2", key: "svg-1" }], ["path", { d: "M4 16v2a2 2 0 0 0 2 2h2", key: "svg-2" }], ["path", { d: "M16 4h2a2 2 0 0 1 2 2v2", key: "svg-3" }], ["path", { d: "M16 20h2a2 2 0 0 0 2 -2v-2", key: "svg-4" }]], IconFocusCentered = createReactComponent("outline", "focus-centered", "FocusCentered", __iconNode$C);
+const __iconNode$B = [["path", { d: "M5 19l2.757 -7.351a1 1 0 0 1 .936 -.649h12.307a1 1 0 0 1 .986 1.164l-.996 5.211a2 2 0 0 1 -1.964 1.625h-14.026a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2", key: "svg-0" }]], IconFolderOpen = createReactComponent("outline", "folder-open", "FolderOpen", __iconNode$B);
 const __iconNode$A = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 16v.01", key: "svg-1" }], ["path", { d: "M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483", key: "svg-2" }]], IconHelpCircle = createReactComponent("outline", "help-circle", "HelpCircle", __iconNode$A);
 const __iconNode$z = [["path", { d: "M3 7a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3l0 -10", key: "svg-0" }], ["path", { d: "M7 10a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", key: "svg-1" }], ["path", { d: "M15 8l2 0", key: "svg-2" }], ["path", { d: "M15 12l2 0", key: "svg-3" }], ["path", { d: "M7 16l10 0", key: "svg-4" }]], IconId = createReactComponent("outline", "id", "Id", __iconNode$z);
 const __iconNode$y = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 9h.01", key: "svg-1" }], ["path", { d: "M11 12h1v4h1", key: "svg-2" }]], IconInfoCircle = createReactComponent("outline", "info-circle", "InfoCircle", __iconNode$y);
@@ -5034,7 +5036,7 @@ function DriftsSummary() {
     onMouseLeave: onMouseLeaveDebounced,
     onClick
   }, { view, nodes, edges } = selected;
-  return view.length === 0 && nodes.length === 0 && edges.length === 0 ? null : /* @__PURE__ */ jsx(AnimatePresence, { propagate: !0, mode: "wait", children: /* @__PURE__ */ jsxs(
+  return view.length === 0 && nodes.length === 0 && edges.length === 0 ? null : /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsxs(
     m$1.div,
     {
       layout: "size",
@@ -5053,16 +5055,16 @@ function DriftsSummary() {
       }),
       children: [
         t$1(view, 1) && /* @__PURE__ */ jsx(ViewDrifts, { drifts: view }),
-        nodes.length > 0 && /* @__PURE__ */ jsxs(m$1.div, { layout: "size", children: [
+        nodes.length > 0 && /* @__PURE__ */ jsxs(m$1.div, { layout: !0, children: [
           /* @__PURE__ */ jsx(SectionHeader$2, { children: "Elements:" }),
-          /* @__PURE__ */ jsx(m$1.div, { layout: "size", className: vstack({ mt: "2", gap: "2" }), children: t$a(
+          /* @__PURE__ */ jsx("div", { className: vstack({ mt: "2", gap: "2" }), children: t$a(
             nodes,
             (node2) => /* @__PURE__ */ jsx(NodeDrifts$1, { ...node2, ...handlers }, node2.id)
           ) })
         ] }, "nodes-drifts"),
-        edges.length > 0 && /* @__PURE__ */ jsxs(m$1.div, { layout: "size", children: [
+        edges.length > 0 && /* @__PURE__ */ jsxs(m$1.div, { layout: !0, children: [
           /* @__PURE__ */ jsx(SectionHeader$2, { children: "Relationships:" }),
-          /* @__PURE__ */ jsx(m$1.div, { layout: "size", className: vstack({ mt: "2", gap: "2" }), children: t$a(edges, (edge) => /* @__PURE__ */ jsx(EdgeDrifts$1, { ...edge, ...handlers }, edge.edgeId)) })
+          /* @__PURE__ */ jsx("div", { className: vstack({ mt: "2", gap: "2" }), children: t$a(edges, (edge) => /* @__PURE__ */ jsx(EdgeDrifts$1, { ...edge, ...handlers }, edge.edgeId)) })
         ] }, "edges-drifts")
       ]
     },
@@ -5086,6 +5088,7 @@ function ViewDrifts({ drifts }) {
   ) });
 }
 function NodeDrifts$1({ id, name, drifts, ...handlers }) {
+  const key2 = `node-drifts-${id}`;
   return /* @__PURE__ */ jsxs(
     DriftsGroup,
     {
@@ -5111,28 +5114,29 @@ function NodeDrifts$1({ id, name, drifts, ...handlers }) {
             children: name
           }
         ),
-        t$a(drifts, (drift) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, id + drift))
+        t$a(drifts, (drift, i) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, key2 + drift + i))
       ]
     },
-    `node-drifts-${id}`
+    key2
   );
 }
 function EdgeDrifts$1({ edgeId, drifts, ...handlers }) {
+  const key2 = `edge-drifts-${edgeId}`;
   return /* @__PURE__ */ jsx(
     DriftsGroup,
     {
       "data-drift-type": "edge",
       "data-drift-id": edgeId,
       ...handlers,
-      children: t$a(drifts, (drift) => /* @__PURE__ */ jsx(
+      children: t$a(drifts, (drift, i) => /* @__PURE__ */ jsx(
         DriftLabel,
         {
           children: drift
         },
-        edgeId + drift
+        key2 + drift + i
       ))
     },
-    `edge-drifts-${edgeId}`
+    key2
   );
 }
 const DriftsGroup = styled(m$1.div, {
@@ -5153,7 +5157,7 @@ const DriftsGroup = styled(m$1.div, {
   defaultProps: {
     className: "group",
     variants: variants$7,
-    layout: "size",
+    layout: !0,
     initial: "initial",
     animate: "animate",
     exit: "exit"
@@ -7860,7 +7864,7 @@ const Logo$1 = forwardRef(
     }
   ) }) : null;
 };
-function SearchControl() {
+function SearchControl$1() {
   const diagram = useDiagram(), isMac = isMacOs();
   return /* @__PURE__ */ jsxs(
     UnstyledButton,
@@ -8014,17 +8018,9 @@ const selector$5 = (ctx) => {
   }
 ));
 function StartWalkthroughButton() {
-  const { enableReadOnly, enableCompareWithLatest } = useEnabledFeatures(), diagram = useDiagram(), actor = useNavigationActor();
+  const { enableCompareWithLatest } = useEnabledFeatures(), diagram = useDiagram(), actor = useNavigationActor();
   let tooltipLabel = "Start Dynamic View Walkthrough";
-  switch (!0) {
-    case !enableReadOnly:
-      tooltipLabel = "Walkthrough not available in Edit mode";
-      break;
-    case enableCompareWithLatest:
-      tooltipLabel = "Walkthrough not available when Compare is active";
-      break;
-  }
-  return /* @__PURE__ */ jsx(Tooltip$6, { label: tooltipLabel, children: /* @__PURE__ */ jsx(
+  return !0 === enableCompareWithLatest && (tooltipLabel = "Walkthrough not available when Compare is active"), /* @__PURE__ */ jsx(Tooltip$6, { label: tooltipLabel, children: /* @__PURE__ */ jsx(
     TriggerWalkthroughButton,
     {
       onClick: (e2) => {
@@ -8035,7 +8031,7 @@ function StartWalkthroughButton() {
       exit: { opacity: 0, translateX: -20 },
       size: "compact-xs",
       h: 26,
-      disabled: !enableReadOnly || enableCompareWithLatest,
+      disabled: enableCompareWithLatest,
       classNames: {
         label: css({
           display: {
@@ -8331,7 +8327,7 @@ const selectBreadcrumbs = ({ context: context2 }) => {
       "actions"
     ),
     enableDynamicViewWalkthrough && isDynamicView && /* @__PURE__ */ jsx(DynamicViewControls, {}, "dynamic-view-controls"),
-    enableSearch && !enableCompareWithLatest && /* @__PURE__ */ jsx(SearchControl, {}, "search-control"),
+    enableSearch && !enableCompareWithLatest && /* @__PURE__ */ jsx(SearchControl$1, {}, "search-control"),
     /* @__PURE__ */ jsx(LayoutWarning, {}, "outdated-manual-layout-warning")
   ] });
 });
@@ -9043,7 +9039,7 @@ const useElementDetailsActorRef = () => {
   if (ctx === null)
     throw new Error("ElementDetailsActorRef is not provided");
   return ctx;
-}, backdropBlur$1 = "--_blur", backdropOpacity$1 = "--_opacity", dialog$1 = css({
+}, backdropBlur$1 = "--_blur", backdropOpacity$1 = "--_opacity", dialog = css({
   boxSizing: "border-box",
   margin: "0",
   padding: "0",
@@ -10007,7 +10003,7 @@ const node = css({
       color: "white"
     }
   }
-}), scrollArea$2 = css({
+}), scrollArea$1 = css({
   maxHeight: [
     "70vh",
     "calc(100cqh - 70px)"
@@ -10016,7 +10012,7 @@ const node = css({
   __proto__: null,
   label,
   node,
-  scrollArea: scrollArea$2
+  scrollArea: scrollArea$1
 }, Symbol.toStringTag, { value: "Module" })), selector2$1 = (state) => {
   const subjectExistsInScope = state.context.layouted?.subjectExistsInScope ?? !1;
   return {
@@ -10036,14 +10032,14 @@ const node = css({
     subjectExistsInScope,
     enableSelectSubject,
     enableChangeScope
-  } = useRelationshipsBrowserState(selector2$1), root = useRef(null), viewport = useRef(null), subject = useLikeC4Model().findElement(subjectId), data2 = useLikeC4ElementsTree(scope === "view" && viewId ? viewId : void 0), tree2 = useTree({
+  } = useRelationshipsBrowserState(selector2$1), root2 = useRef(null), viewport = useRef(null), subject = useLikeC4Model().findElement(subjectId), data2 = useLikeC4ElementsTree(scope === "view" && viewId ? viewId : void 0), tree2 = useTree({
     multiple: !1
   });
   return tree2.setHoveredNode = setHoveredNode$2, useEffect(() => {
     ancestorsFqn(subjectId).reverse().forEach((id) => {
       tree2.expand(id);
     }), tree2.select(subjectId);
-  }, [subjectId]), /* @__PURE__ */ jsxs(Group, { ref: root, gap: "xs", pos: "relative", children: [
+  }, [subjectId]), /* @__PURE__ */ jsxs(Group, { ref: root2, gap: "xs", pos: "relative", children: [
     enableSelectSubject && /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
       /* @__PURE__ */ jsx(
         Box$1,
@@ -10080,7 +10076,7 @@ const node = css({
                 children: /* @__PURE__ */ jsx(Text, { fz: "xs", fw: "500", truncate: !0, children: subject?.title ?? "???" })
               }
             ) }),
-            /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 400, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { scrollbars: "y", type: "never", viewportRef: viewport, className: scrollArea$2, children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 400, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { scrollbars: "y", type: "never", viewportRef: viewport, className: scrollArea$1, children: /* @__PURE__ */ jsx(
               Tree$1,
               {
                 allowRangeSelection: !1,
@@ -10175,7 +10171,7 @@ const node = css({
           position: "bottom-start",
           disabled: subjectExistsInScope,
           portalProps: {
-            target: root.current
+            target: root2.current
           },
           children: /* @__PURE__ */ jsx(
             SegmentedControl,
@@ -10841,7 +10837,7 @@ function ElementDetailsCard({
     m$1.dialog,
     {
       ref,
-      className: cx(dialog$1, ReactRemoveScroll.classNames.fullWidth),
+      className: cx(dialog, ReactRemoveScroll.classNames.fullWidth),
       layout: !0,
       initial: {
         [backdropBlur$1]: "0px",
@@ -11886,7 +11882,7 @@ css({
   alignItems: "baseline",
   justifyItems: "start"
 });
-const scrollArea$1 = css({
+const scrollArea = css({
   maxHeight: [
     "70vh",
     "calc(100cqh - 70px)"
@@ -11956,7 +11952,7 @@ const scrollArea$1 = css({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 400, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { className: scrollArea$1, scrollbars: "y", type: "never", viewportRef: viewport, children: /* @__PURE__ */ jsx(Box$1, { className: edgeGrid, p: "xs", maw: 400, children: edges.map((e2) => /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 400, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { className: scrollArea, scrollbars: "y", type: "never", viewportRef: viewport, children: /* @__PURE__ */ jsx(Box$1, { className: edgeGrid, p: "xs", maw: 400, children: edges.map((e2) => /* @__PURE__ */ jsxs(
           "div",
           {
             className: edgeRow,
@@ -12267,32 +12263,27 @@ const select$1 = (s) => s.children.search ?? null;
 function useSearchActorRef() {
   return useDiagramSnapshot(select$1, Object.is);
 }
-function useSearchActor() {
-  const searchActorRef = useSearchActorRef();
-  if (!searchActorRef)
-    throw new Error("Search actor not found");
-  return searchActorRef;
+const SearchContext = createContext$1(null);
+function useSearchContext() {
+  const ctx = useContext(SearchContext);
+  if (!ctx)
+    throw new Error("useSearchContext must be used within a SearchContext.Provider");
+  return ctx;
 }
-const selectSearchValue = (s) => s.context.searchValue;
-function useSearch() {
-  const searchActorRef = useSearchActor(), searchValue = useSelector(searchActorRef, selectSearchValue), updateSearch = useCallback((search) => {
-    searchActorRef.send({ type: "change.search", search });
-  }, [searchActorRef]);
-  return [searchValue, updateSearch];
+function normalizeSearch(value) {
+  if (value === "") return value;
+  const v = value.trim().toLowerCase();
+  return v.startsWith("#") && v.length <= 2 ? "" : v.length > 1 ? v : "";
 }
-const selectNormalizedSearchValue = (s) => {
-  let v = selectSearchValue(s);
-  return v === "" ? v : (v = v.trim().toLowerCase(), v.startsWith("#") && v.length <= 2 ? "" : v.length > 1 ? v : "");
-};
 function useNormalizedSearch() {
-  const searchActorRef = useSearchActor();
-  return useDeferredValue(useSelector(searchActorRef, selectNormalizedSearchValue));
+  const ctx = useSearchContext();
+  return useDeferredValue(ctx.normalizedSearch);
 }
 function useUpdateSearch() {
-  const searchActorRef = useSearchActor();
+  const { setSearchValue } = useSearchContext();
   return useCallback((search) => {
-    searchActorRef.send({ type: "change.search", search });
-  }, [searchActorRef]);
+    setSearchValue(search);
+  }, [setSearchValue]);
 }
 const buttonFocused = css.raw({
   outline: "none",
@@ -12508,12 +12499,12 @@ function moveFocusToSearchInput(from) {
     console.error("moveFocusToSearchInput: from is null or undefined");
     return;
   }
-  const root = from.getRootNode();
-  if (!e$2(root.querySelector)) {
+  const root2 = from.getRootNode();
+  if (!e$2(root2.querySelector)) {
     console.error("moveFocusToSearchInput: root.querySelector is not a function");
     return;
   }
-  let input2 = root.querySelector("[data-likec4-search-input]");
+  let input2 = root2.querySelector("[data-likec4-search-input]");
   if (input2) {
     const length = input2.value.length;
     input2.focus(), input2.setSelectionRange(length, length);
@@ -12524,18 +12515,18 @@ function focusToFirstFoundElement(from) {
     console.error("focusToFirstFoundElement: from is null or undefined");
     return;
   }
-  const root = from.getRootNode();
-  if (!e$2(root.querySelector)) {
+  const root2 = from.getRootNode();
+  if (!e$2(root2.querySelector)) {
     console.error("focusToFirstFoundElement: root.querySelector is not a function");
     return;
   }
-  root.querySelector(`[data-likec4-search] .${focusable}`)?.focus();
+  root2.querySelector(`[data-likec4-search] .${focusable}`)?.focus();
 }
 function queryAllFocusable(from, where, selector3 = `.${focusable}`) {
   if (!from)
     return console.error("queryAllFocusable: from is null or undefined"), [];
-  const root = from.getRootNode();
-  return e$2(root.querySelectorAll) ? [...root.querySelectorAll(`[data-likec4-search-${where}] ${selector3}`)] : (console.error("queryAllFocusable: root.querySelectorAll is not a function"), []);
+  const root2 = from.getRootNode();
+  return e$2(root2.querySelectorAll) ? [...root2.querySelectorAll(`[data-likec4-search-${where}] ${selector3}`)] : (console.error("queryAllFocusable: root.querySelectorAll is not a function"), []);
 }
 const _viewBtn = "likec4-view-btn", viewButton = cx(
   css({
@@ -12562,7 +12553,7 @@ css({
   }
 });
 const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" }), useFoundViews = () => {
-  const currentViewId = useCurrentViewId(), likec4model = useLikeC4Model(), search = useNormalizedSearch();
+  const { currentViewId } = useSearchContext(), likec4model = useLikeC4Model(), search = useNormalizedSearch();
   return useMemo(() => {
     let views = [...likec4model.views()];
     if (search)
@@ -12612,7 +12603,7 @@ const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, child
           ViewButton,
           {
             view,
-            currentViewId,
+            currentViewId: currentViewId ?? "",
             search,
             tabIndex: i === 0 ? 0 : -1
           }
@@ -12622,12 +12613,8 @@ const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, child
   );
 }), btn$1 = buttonsva();
 function ViewButton({ className, view, loop = !1, search, focusOnElement, currentViewId, ...props }) {
-  const searchActorRef = useSearchActor(), nextViewId = view.id, isCurrentView = nextViewId === currentViewId, navigate = () => {
-    searchActorRef.send({
-      type: "navigate.to",
-      viewId: nextViewId,
-      focusOnElement
-    });
+  const ctx = useSearchContext(), nextViewId = view.id, isCurrentView = nextViewId === currentViewId, navigate = () => {
+    ctx.navigateTo(nextViewId, focusOnElement);
   };
   return /* @__PURE__ */ jsxs(
     UnstyledButton,
@@ -12717,7 +12704,7 @@ function useElementsColumnData() {
       elements,
       t$g((acc, treeItem) => {
         treeItem.children = [], byid[treeItem.value] = treeItem;
-        const parent = acc.all.findLast((root) => isAncestor(root.value, treeItem.value));
+        const parent = acc.all.findLast((root2) => isAncestor(root2.value, treeItem.value));
         return parent ? parent.children.push(treeItem) : acc.roots.push(treeItem), acc.all.push(treeItem), acc.hash = stringHash(acc.hash + treeItem.value), acc;
       }, {
         hash: "empty",
@@ -12883,21 +12870,17 @@ function ElementTreeNode({ node: node2, elementProps, hasChildren, expanded, han
   ] });
 }
 function useHandleElementSelection() {
-  const searchActorRef = useSearchActor();
+  const ctx = useSearchContext();
   return useCallbackRef((element) => {
     const views = [...element.views()];
     if (views.length === 0)
       return;
     const elementFqn = element.id, onlyOneViewId = t$f(views)?.id;
     if (!onlyOneViewId) {
-      searchActorRef.send({ type: "pickview.open", elementFqn });
+      ctx.openPickView(elementFqn);
       return;
     }
-    searchActorRef.send({
-      type: "navigate.to",
-      viewId: onlyOneViewId,
-      focusOnElement: elementFqn
-    });
+    ctx.navigateTo(onlyOneViewId, elementFqn);
   });
 }
 const input = css({
@@ -12954,14 +12937,13 @@ css({
   }
 });
 function PickView({
-  searchActorRef,
   elementFqn
 }) {
-  const currentViewId = useCurrentViewId(), element = useLikeC4Model().element(elementFqn), scoped = [], others = [];
+  const ctx = useSearchContext(), currentViewId = ctx.currentViewId ?? "", element = useLikeC4Model().element(elementFqn), scoped = [], others = [];
   for (const view of element.views())
     view.viewOf === element ? scoped.push(view) : others.push(view);
   const closePickView = () => {
-    searchActorRef.send({ type: "pickview.close" });
+    ctx.closePickView();
   };
   return useWindowEvent(
     "keydown",
@@ -13143,7 +13125,7 @@ function startingWithKind(search) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null;
 }
 const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$1(() => {
-  const searchActorRef = useSearchActor(), likec4model = useLikeC4Model(), inputRef = useRef(null), { ref, focused: focused2 } = useFocusWithin(), [search, setSearch] = useSearch(), combobox = useCombobox({
+  const searchCtx = useSearchContext(), likec4model = useLikeC4Model(), inputRef = useRef(null), { ref, focused: focused2 } = useFocusWithin(), { searchValue: search, setSearchValue: setSearch } = searchCtx, combobox = useCombobox({
     scrollBehavior: "smooth",
     loop: !1
   });
@@ -13228,9 +13210,7 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$1(() => {
               Input.ClearButton,
               {
                 onClick: (e2) => {
-                  e2.stopPropagation();
-                  const openedWithSearch = searchActorRef.getSnapshot().context.openedWithSearch;
-                  search === "" || search === openedWithSearch ? searchActorRef.send({ type: "close" }) : setSearch("");
+                  e2.stopPropagation(), search === "" || search === searchCtx.openedWithSearch ? searchCtx.close() : setSearch("");
                 }
               }
             ),
@@ -13281,23 +13261,58 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$1(() => {
       ]
     }
   );
-}), dialog = css({
+}), selectSearchValue = (s) => s.context.searchValue, selectPickViewFor = (s) => s.context.pickViewFor, selectOpenedWithSearch = (s) => s.context.openedWithSearch;
+function XStateSearchAdapter({
+  searchActorRef,
+  children
+}) {
+  const searchValue = useSelector(searchActorRef, selectSearchValue), pickViewFor = useSelector(searchActorRef, selectPickViewFor), openedWithSearch = useSelector(searchActorRef, selectOpenedWithSearch), currentViewId = useCurrentViewId(), setSearchValue = useCallbackRef((search) => {
+    searchActorRef.send({ type: "change.search", search });
+  }), navigateTo = useCallbackRef((viewId, focusOnElement) => {
+    searchActorRef.send({
+      type: "navigate.to",
+      viewId,
+      focusOnElement
+    });
+  }), openPickView = useCallbackRef((elementFqn) => {
+    searchActorRef.send({ type: "pickview.open", elementFqn });
+  }), closePickView = useCallbackRef(() => {
+    searchActorRef.send({ type: "pickview.close" });
+  }), close = useCallbackRef(() => {
+    searchActorRef.send({ type: "close" });
+  }), value = useMemo(() => ({
+    searchValue,
+    setSearchValue,
+    normalizedSearch: normalizeSearch(searchValue),
+    navigateTo,
+    openPickView,
+    closePickView,
+    pickViewFor,
+    close,
+    currentViewId,
+    openedWithSearch
+  }), [
+    searchValue,
+    pickViewFor,
+    currentViewId,
+    openedWithSearch,
+    // stable refs from useCallbackRef — listed for exhaustive-deps lint rule
+    setSearchValue,
+    navigateTo,
+    openPickView,
+    closePickView,
+    close
+  ]);
+  return /* @__PURE__ */ jsx(SearchContext.Provider, { value, children });
+}
+const dialogCss = css({
   backgroundColor: "[rgb(34 34 34 / var(--_opacity, 95%))]",
   _light: {
     backgroundColor: "[rgb(250 250 250 / var(--_opacity, 95%))]"
   },
   backdropFilter: "auto",
   backdropBlur: "var(--_blur, 10px)"
-  //   base: `[rgb(34 34 34 / var(${backdropOpacity}))]`,
-  //   _light: `[rgb(255 255 255/ var(${backdropOpacity}))]`,
-  // },
-}), body = css({
-  // containerName: 'likec4-search',
-  // containerType: 'size',
-  // position: 'fixed',
-  // zIndex: 901,
-  // top: '0',
-  // left: '0',
+}), bodyCss = css({
   width: "100%",
   height: "100%",
   maxHeight: "100vh",
@@ -13311,11 +13326,7 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$1(() => {
   paddingRight: "md",
   paddingBottom: "sm",
   background: "transparent"
-  // backgroundColor: {
-  //   _dark: `[rgb(34 34 34 / 0.95)]`,
-  //   _light: `[rgb(255 255 255/ 0.95)]`,
-  // },
-}), scrollArea = css({
+}), scrollAreaCss = css({
   height: [
     "100%",
     "100cqh"
@@ -13358,33 +13369,20 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$1(() => {
         opacity: 0.9
       },
       classes: {
-        dialog,
-        body
+        dialog: dialogCss,
+        body: bodyCss
       },
       openDelay: 0,
       onClose: close,
       "data-likec4-search": "true",
-      children: /* @__PURE__ */ jsx(SearchOverlayBody, { searchActorRef })
+      children: /* @__PURE__ */ jsx(XStateSearchAdapter, { searchActorRef, children: /* @__PURE__ */ jsx(SearchOverlayBody, { searchActorRef }) })
     }
   ) });
 });
 Search.displayName = "Search";
-const selectPickViewFor = (s) => s.context.pickViewFor, SearchOverlayBody = memo$1(({ searchActorRef }) => {
-  const ref = useRef(null), pickViewFor = useSelector(searchActorRef, selectPickViewFor);
-  useTimeoutEffect(() => {
-    e$8(searchActorRef.getSnapshot().context.openedWithSearch) && focusToFirstFoundElement(ref.current);
-  }, 150);
-  const [isPresent, safeToRemove] = usePresence();
-  return useEffect(() => {
-    if (!isPresent) {
-      safeToRemove();
-      try {
-        searchActorRef.send({ type: "animation.presence.end" });
-      } catch (e2) {
-        console.debug("SearchOverlayBody: animation.presence.end failed", e2);
-      }
-    }
-  }, [isPresent, searchActorRef, safeToRemove]), /* @__PURE__ */ jsxs(Box, { ref, display: "contents", children: [
+const SearchPanelContent = memo$1(() => {
+  const ref = useRef(null), { pickViewFor } = useSearchContext();
+  return /* @__PURE__ */ jsxs(Box, { ref, display: "contents", children: [
     /* @__PURE__ */ jsx(
       Group,
       {
@@ -13417,7 +13415,7 @@ const selectPickViewFor = (s) => s.context.pickViewFor, SearchOverlayBody = memo
             ScrollArea,
             {
               type: "scroll",
-              className: scrollArea,
+              className: scrollAreaCss,
               pr: "xs",
               scrollbars: "y",
               children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-elements", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(ElementsColumn, {}) }) })
@@ -13427,7 +13425,7 @@ const selectPickViewFor = (s) => s.context.pickViewFor, SearchOverlayBody = memo
             ScrollArea,
             {
               type: "scroll",
-              className: scrollArea,
+              className: scrollAreaCss,
               pr: "xs",
               scrollbars: "y",
               children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-views", children: /* @__PURE__ */ jsx(ViewsColumn, {}) }) })
@@ -13436,9 +13434,27 @@ const selectPickViewFor = (s) => s.context.pickViewFor, SearchOverlayBody = memo
         ]
       }
     ),
-    pickViewFor && /* @__PURE__ */ jsx(PickView, { searchActorRef, elementFqn: pickViewFor })
+    pickViewFor && /* @__PURE__ */ jsx(PickView, { elementFqn: pickViewFor })
   ] });
 });
+SearchPanelContent.displayName = "SearchPanelContent";
+const SearchOverlayBody = memo$1(function({ searchActorRef }) {
+  const ref = useRef(null);
+  useTimeoutEffect(() => {
+    e$8(searchActorRef.getSnapshot().context.openedWithSearch) && focusToFirstFoundElement(ref.current);
+  }, 150);
+  const [isPresent, safeToRemove] = usePresence();
+  return useEffect(() => {
+    if (!isPresent) {
+      safeToRemove();
+      try {
+        searchActorRef.send({ type: "animation.presence.end" });
+      } catch (e2) {
+        console.debug("SearchOverlayBody: animation.presence.end failed", e2);
+      }
+    }
+  }, [isPresent, searchActorRef, safeToRemove]), /* @__PURE__ */ jsx(Box, { ref, display: "contents", children: /* @__PURE__ */ jsx(SearchPanelContent, {}) });
+});
 function PortalToContainer({ children }) {
   const ctx = useRootContainerContext();
   if (!ctx)
@@ -20079,6 +20095,87 @@ function LikeC4ProjectsOverview({
     ) })
   ] }) });
 }
+const root = css({
+  height: "30px",
+  paddingLeft: "sm",
+  paddingRight: "1",
+  borderRadius: "sm",
+  // TODO
+  // color: fallbackVar('var(--search-color)', 'mantine.colors.placeholder)',
+  border: "1px solid",
+  borderColor: {
+    base: "default.border",
+    _light: "mantine.colors.gray[4]",
+    _dark: "mantine.colors.dark[4]",
+    _hover: "default.border"
+  },
+  cursor: "pointer",
+  background: {
+    base: "default",
+    _light: "white",
+    _dark: "mantine.colors.dark[6]",
+    _hover: "default.hover"
+  },
+  width: "100%",
+  "& .tabler-icon": {
+    color: "text"
+  },
+  transition: {
+    base: "fast",
+    _whenPanning: "none !important"
+  },
+  boxShadow: {
+    base: "xs",
+    _hover: "sm",
+    _whenPanning: "none !important"
+  }
+}), placeholder = css({
+  fontSize: "sm",
+  // mantine.fontSizes.sm,
+  fontWeight: "medium",
+  paddingRight: "2.5",
+  // 10px
+  color: "text.placeholder",
+  flex: "1",
+  sm: {
+    paddingRight: "[30px]"
+  },
+  md: {
+    paddingRight: "[50px]"
+  }
+}), shortcut = css({
+  fontSize: "11px",
+  fontWeight: "bold",
+  lineHeight: 1,
+  padding: "[4px 7px]",
+  borderRadius: "sm",
+  border: "1px solid",
+  transition: "fast",
+  _light: {
+    color: "mantine.colors.gray[7]",
+    borderColor: "mantine.colors.gray[2]"
+  },
+  _dark: {
+    color: "mantine.colors.dark[0]",
+    borderColor: "mantine.colors.dark[7]"
+  },
+  backgroundColor: {
+    _light: "mantine.colors.gray[2]/70",
+    _dark: "mantine.colors.dark[8]/70",
+    _groupHover: {
+      _light: "mantine.colors.gray[2]",
+      _dark: "mantine.colors.dark[8]"
+    }
+  }
+});
+function SearchControl({ className, ...others }) {
+  const isMac = isMacOs();
+  return /* @__PURE__ */ jsx(UnstyledButton, { ...others, className: cx("group", root, className), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+    /* @__PURE__ */ jsx(IconSearch, { style: { width: "15px", height: "15px" }, stroke: 2 }),
+    /* @__PURE__ */ jsx(Text, { component: "div", className: placeholder, children: "Search" }),
+    /* @__PURE__ */ jsx(Text, { component: "div", className: shortcut, children: isMac ? "⌘ + K" : "Ctrl + K" })
+  ] }) });
+}
 const statebtn = cva({
   base: {
     border: "none",
@@ -21088,35 +21185,51 @@ const LikeC4AdHocView = memo$1(({ id }) => {
   }, [actorRef, diagram]), null;
 });
 export {
+  IconAlertTriangle as A,
   Box as B,
+  IconCheck as C,
+  IconCopy as D,
+  IconExternalLink as E,
+  FramerMotionConfig as F,
+  IconShare as G,
+  pickViewBounds as H,
   IconRendererProvider as I,
+  LikeC4Diagram as J,
+  useDiagramContext as K,
   LikeC4ProjectsProvider as L,
   Markdown as M,
-  StaticLikeC4Diagram as S,
+  NavigationPanel as N,
+  Overlay as O,
+  useDiagram as P,
+  useOnDiagramEvent as Q,
+  LikeC4EditorProvider as R,
+  SearchContext as S,
+  useChangeLikeC4Project as T,
+  LikeC4ProjectsOverview as U,
   LikeC4ModelProvider as a,
-  LikeC4AdHocViewEditor as b,
+  IconMoonStars as b,
   css as c,
-  IconMoonStars as d,
-  IconSun as e,
-  createStyleContext as f,
-  useLikeC4Projects as g,
-  IconChevronDown as h,
-  isCssProperty as i,
-  IconAlertTriangle as j,
-  IconCheck as k,
-  IconCopy as l,
-  IconExternalLink as m,
-  navigationPanel as n,
-  IconShare as o,
-  pickViewBounds as p,
-  LikeC4Diagram as q,
-  useLikeC4Model as r,
+  IconSun as d,
+  SearchControl as e,
+  bodyCss as f,
+  dialogCss as g,
+  SearchPanelContent as h,
+  useLikeC4Model as i,
+  StaticLikeC4Diagram as j,
+  IconStarFilled as k,
+  IconStack2 as l,
+  IconLayoutDashboard as m,
+  normalizeSearch as n,
+  IconFileCode as o,
+  IconFolderOpen as p,
+  IconFolderFilled as q,
+  IconArrowLeft as r,
   styled as s,
-  useDiagramContext as t,
+  LikeC4AdHocViewEditor as t,
   useUpdateEffect as u,
-  useDiagram as v,
-  useOnDiagramEvent as w,
-  LikeC4EditorProvider as x,
-  useChangeLikeC4Project as y,
-  LikeC4ProjectsOverview as z
+  createStyleContext as v,
+  navigationPanel as w,
+  isCssProperty as x,
+  useLikeC4Projects as y,
+  IconChevronDown as z
 };