@likec4/diagram 1.51.0 → 1.52.0

package/dist/components/NavigationPanel.js

@@ -36,13 +36,15 @@ const Logo = withContext(LogoButton, "logo");
 const Label = withContext(m.div, "label", {
   shouldForwardProp
 });
-withContext(m.div, "dropdown", {
+const Dropdown = withContext(m.div, "dropdown", {
   shouldForwardProp
 });
 const NavigationPanel = {
   Root,
   Body,
   Logo,
-  Label};
+  Label,
+  Dropdown
+};
 
 export { NavigationPanel };

package/dist/components/SearchControl.css.js

@@ -0,0 +1,79 @@
+import { css } from '@likec4/styles/css';
+
+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"
+  }
+});
+const placeholder = css({
+  fontSize: "sm",
+  // mantine.fontSizes.sm,
+  fontWeight: "medium",
+  paddingRight: "2.5",
+  // 10px
+  color: "text.placeholder",
+  flex: "1",
+  sm: {
+    paddingRight: "[30px]"
+  },
+  md: {
+    paddingRight: "[50px]"
+  }
+});
+const 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]"
+    }
+  }
+});
+
+export { placeholder, root, shortcut };

package/dist/components/SearchControl.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
+import { UnstyledButton, Group, Text } from '@mantine/core';
+import { isMacOs } from '@xyflow/system';
+import { placeholder, shortcut, root } from './SearchControl.css.js';
+import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+
+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" })
+  ] }) });
+}
+
+export { SearchControl };

package/dist/custom/index.d.ts

@@ -12,3 +12,4 @@ export type { OverlayProps } from '../overlays/overlay/Overlay';
 export { PortalToContainer } from '../components/PortalToContainer';
 export { ShadowRoot } from '../shadowroot/ShadowRoot';
 export { FramerMotionConfig } from '../context/FramerMotionConfig';
+export { NavigationPanel } from '../components/NavigationPanel';

package/dist/custom/index.js

@@ -5,6 +5,7 @@ export { Overlay } from '../overlays/overlay/Overlay.js';
 export { PortalToContainer } from '../components/PortalToContainer.js';
 export { ShadowRoot } from '../shadowroot/ShadowRoot.js';
 export { FramerMotionConfig } from '../context/FramerMotionConfig.js';
+export { NavigationPanel } from '../components/NavigationPanel.js';
 export { CompoundActionButton } from '../base-primitives/compound/CompoundActionButton.js';
 export { CompoundActions } from '../likec4diagram/custom/nodes/CompoundActions.js';
 export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from '../likec4diagram/custom/nodes/nodes.js';

package/dist/index.d.ts

@@ -19,3 +19,6 @@ export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4';
 export { useCurrentView, useCurrentViewId, } from './hooks/useCurrentView';
 export { pickViewBounds } from './utils/view-bounds';
 export { LikeC4ProjectsOverview, type LikeC4ProjectsOverviewProps, } from './LikeC4ProjectsOverview';
+export { normalizeSearch, SearchContext, type SearchContextValue, useSearchContext, } from './search/SearchContext';
+export { bodyCss as searchBodyCss, dialogCss as searchDialogCss, SearchPanelContent, } from './search/Search';
+export { SearchControl } from './components/SearchControl';

package/dist/index.js

@@ -16,5 +16,8 @@ export { ReactLikeC4 } from './ReactLikeC4.js';
 export { useCurrentView, useCurrentViewId } from './hooks/useCurrentView.js';
 export { pickViewBounds } from './utils/view-bounds.js';
 export { LikeC4ProjectsOverview } from './LikeC4ProjectsOverview.js';
+export { SearchContext, normalizeSearch, useSearchContext } from './search/SearchContext.js';
+export { SearchPanelContent, bodyCss as searchBodyCss, dialogCss as searchDialogCss } from './search/Search.js';
+export { SearchControl } from './components/SearchControl.js';
 export { useDiagram } from './hooks/safeContext.js';
 export { useOptionalCurrentViewModel } from './context/LikeC4ModelContext.js';

package/dist/search/Search.d.ts

@@ -1,2 +1,10 @@
 import { MemoExoticComponent } from 'react';
+export declare const dialogCss: string;
+export declare const bodyCss: string;
+export declare const scrollAreaCss: string;
 export declare const Search: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+/**
+ * The shared search panel content used by both diagram and overview search.
+ * Must be rendered inside a SearchContext.Provider.
+ */
+export declare const SearchPanelContent: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/search/Search.js

@@ -1,12 +1,12 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { css } from '@likec4/styles/css';
 import { Box, VStack } from '@likec4/styles/jsx';
 import { Group, Grid, GridCol, Title, ScrollArea } from '@mantine/core';
 import { useHotkeys } from '@mantine/hooks';
 import { useTimeoutEffect } from '@react-hookz/web';
 import { useSelector } from '@xstate/react';
-import { AnimatePresence, usePresence, LayoutGroup } from 'motion/react';
-import { memo, useRef, useMemo, useEffect, Suspense } from 'react';
+import { LayoutGroup, AnimatePresence, usePresence } from 'motion/react';
+import { memo, useRef, Suspense, useMemo, useEffect } from 'react';
 import { isTruthy } from 'remeda';
 import { createEmptyActor } from 'xstate';
 import { useCallbackRef } from '../hooks/useCallbackRef.js';
@@ -16,27 +16,20 @@ import { ElementsColumn } from './components/ElementsColumn.js';
 import { PickView } from './components/PickView.js';
 import { SearchByTags } from './components/SearchByTags.js';
 import { LikeC4SearchInput } from './components/SearchInput.js';
-import { focusToFirstFoundElement, moveFocusToSearchInput } from './components/utils.js';
+import { moveFocusToSearchInput, focusToFirstFoundElement } from './components/utils.js';
 import { ViewsColumn } from './components/ViewsColum.js';
+import { useSearchContext } from './SearchContext.js';
+import { XStateSearchAdapter } from './XStateSearchAdapter.js';
 
-const dialog = css({
+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}))]`,
-  // },
 });
-const body = css({
-  // containerName: 'likec4-search',
-  // containerType: 'size',
-  // position: 'fixed',
-  // zIndex: 901,
-  // top: '0',
-  // left: '0',
+const bodyCss = css({
   width: "100%",
   height: "100%",
   maxHeight: "100vh",
@@ -50,12 +43,8 @@ const body = css({
   paddingRight: "md",
   paddingBottom: "sm",
   background: "transparent"
-  // backgroundColor: {
-  //   _dark: `[rgb(34 34 34 / 0.95)]`,
-  //   _light: `[rgb(255 255 255/ 0.95)]`,
-  // },
 });
-const scrollArea = css({
+const scrollAreaCss = css({
   height: [
     "100%",
     "100cqh"
@@ -105,38 +94,20 @@ const Search = memo(() => {
         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;
-const SearchOverlayBody = memo(({ searchActorRef }) => {
+const SearchPanelContent = memo(() => {
   const ref = useRef(null);
-  const pickViewFor = useSelector(searchActorRef, selectPickViewFor);
-  useTimeoutEffect(() => {
-    if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) {
-      focusToFirstFoundElement(ref.current);
-    }
-  }, 150);
-  const [isPresent, safeToRemove] = usePresence();
-  useEffect(() => {
-    if (isPresent) {
-      return;
-    }
-    safeToRemove();
-    try {
-      searchActorRef.send({ type: "animation.presence.end" });
-    } catch (e) {
-      console.debug("SearchOverlayBody: animation.presence.end failed", e);
-    }
-  }, [isPresent, searchActorRef, safeToRemove]);
+  const { pickViewFor } = useSearchContext();
   return /* @__PURE__ */ jsxs(Box, { ref, display: "contents", children: [
     /* @__PURE__ */ jsx(
       Group,
@@ -171,7 +142,7 @@ const SearchOverlayBody = memo(({ searchActorRef }) => {
             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, {}) }) })
@@ -181,7 +152,7 @@ const SearchOverlayBody = memo(({ searchActorRef }) => {
             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, {}) }) })
@@ -190,8 +161,30 @@ const SearchOverlayBody = memo(({ searchActorRef }) => {
         ]
       }
     ),
-    pickViewFor && /* @__PURE__ */ jsx(PickView, { searchActorRef, elementFqn: pickViewFor })
+    pickViewFor && /* @__PURE__ */ jsx(PickView, { elementFqn: pickViewFor })
   ] });
 });
+SearchPanelContent.displayName = "SearchPanelContent";
+const SearchOverlayBody = memo(function SearchOverlayBody2({ searchActorRef }) {
+  const ref = useRef(null);
+  useTimeoutEffect(() => {
+    if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) {
+      focusToFirstFoundElement(ref.current);
+    }
+  }, 150);
+  const [isPresent, safeToRemove] = usePresence();
+  useEffect(() => {
+    if (isPresent) {
+      return;
+    }
+    safeToRemove();
+    try {
+      searchActorRef.send({ type: "animation.presence.end" });
+    } catch (e) {
+      console.debug("SearchOverlayBody: animation.presence.end failed", e);
+    }
+  }, [isPresent, searchActorRef, safeToRemove]);
+  return /* @__PURE__ */ jsx(Box, { ref, display: "contents", children: /* @__PURE__ */ jsx(SearchPanelContent, {}) });
+});
 
-export { Search };
+export { Search, SearchPanelContent, bodyCss, dialogCss, scrollAreaCss };

package/dist/search/SearchContext.d.ts

@@ -0,0 +1,21 @@
+import { Fqn, ViewId } from '@likec4/core/types';
+import { Context } from 'react';
+export interface SearchContextValue {
+    searchValue: string;
+    setSearchValue: (value: string) => void;
+    normalizedSearch: string;
+    navigateTo: (viewId: ViewId, focusOnElement?: Fqn) => void;
+    openPickView: (elementFqn: Fqn) => void;
+    closePickView: () => void;
+    pickViewFor: Fqn | null;
+    close: () => void;
+    currentViewId: string | null;
+    openedWithSearch: string | null;
+}
+export declare const SearchContext: Context<SearchContextValue | null>;
+export declare function useSearchContext(): SearchContextValue;
+/**
+ * Normalize a raw search string for comparison.
+ * Extracted as a pure function so both XState and standalone adapters can reuse it.
+ */
+export declare function normalizeSearch(value: string): string;

package/dist/search/SearchContext.js

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+
+const SearchContext = createContext(null);
+function useSearchContext() {
+  const ctx = useContext(SearchContext);
+  if (!ctx) {
+    throw new Error("useSearchContext must be used within a SearchContext.Provider");
+  }
+  return ctx;
+}
+function normalizeSearch(value) {
+  if (value === "") return value;
+  const v = value.trim().toLowerCase();
+  if (v.startsWith("#") && v.length <= 2) {
+    return "";
+  }
+  return v.length > 1 ? v : "";
+}
+
+export { SearchContext, normalizeSearch, useSearchContext };

package/dist/search/XStateSearchAdapter.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import { SearchActorRef } from './searchActor';
+export declare function XStateSearchAdapter({ searchActorRef, children, }: PropsWithChildren<{
+    searchActorRef: SearchActorRef;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/search/XStateSearchAdapter.js

@@ -0,0 +1,64 @@
+import { jsx } from 'react/jsx-runtime';
+import { useSelector } from '@xstate/react';
+import { useMemo } from 'react';
+import { useCallbackRef } from '../hooks/useCallbackRef.js';
+import { useCurrentViewId } from '../hooks/useCurrentView.js';
+import { normalizeSearch, SearchContext } from './SearchContext.js';
+
+const selectSearchValue = (s) => s.context.searchValue;
+const selectPickViewFor = (s) => s.context.pickViewFor;
+const selectOpenedWithSearch = (s) => s.context.openedWithSearch;
+function XStateSearchAdapter({
+  searchActorRef,
+  children
+}) {
+  const searchValue = useSelector(searchActorRef, selectSearchValue);
+  const pickViewFor = useSelector(searchActorRef, selectPickViewFor);
+  const openedWithSearch = useSelector(searchActorRef, selectOpenedWithSearch);
+  const currentViewId = useCurrentViewId();
+  const setSearchValue = useCallbackRef((search) => {
+    searchActorRef.send({ type: "change.search", search });
+  });
+  const navigateTo = useCallbackRef((viewId, focusOnElement) => {
+    searchActorRef.send({
+      type: "navigate.to",
+      viewId,
+      focusOnElement
+    });
+  });
+  const openPickView = useCallbackRef((elementFqn) => {
+    searchActorRef.send({ type: "pickview.open", elementFqn });
+  });
+  const closePickView = useCallbackRef(() => {
+    searchActorRef.send({ type: "pickview.close" });
+  });
+  const close = useCallbackRef(() => {
+    searchActorRef.send({ type: "close" });
+  });
+  const 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 });
+}
+
+export { XStateSearchAdapter };

package/dist/search/components/ElementsColumn.js

@@ -9,7 +9,8 @@ import { pipe, filter, hasAtLeast, reduce, only, first, last } from 'remeda';
 import { IconOrShapeRenderer } from '../../context/IconRenderer.js';
 import { useCallbackRef } from '../../hooks/useCallbackRef.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
-import { useNormalizedSearch, useSearchActor } from '../hooks.js';
+import { useNormalizedSearch } from '../hooks.js';
+import { useSearchContext } from '../SearchContext.js';
 import { focusable, buttonsva } from './_shared.css.js';
 import { treeSubtree, treeLabel, treeRoot, treeNode, elementIcon, elementExpandIcon, elementTitleAndId, elementId, elementViewsCount } from './ElementsColumn.css.js';
 import { stopAndPrevent, moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
@@ -279,7 +280,7 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded, handleClic
   ] });
 }
 function useHandleElementSelection() {
-  const searchActorRef = useSearchActor();
+  const ctx = useSearchContext();
   return useCallbackRef((element) => {
     const views = [...element.views()];
     if (views.length === 0) {
@@ -288,14 +289,10 @@ function useHandleElementSelection() {
     const elementFqn = element.id;
     const onlyOneViewId = only(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);
   });
 }
 

package/dist/search/components/PickView.d.ts

@@ -1,6 +1,4 @@
 import { Fqn } from '@likec4/core/types';
-import { SearchActorRef } from '../searchActor';
-export declare function PickView({ searchActorRef, elementFqn, }: {
-    searchActorRef: SearchActorRef;
+export declare function PickView({ elementFqn, }: {
     elementFqn: Fqn;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/search/components/PickView.js

@@ -2,17 +2,17 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { FocusTrap, Group, Title, ActionIcon, ScrollAreaAutosize, Stack } from '@mantine/core';
 import { useWindowEvent, useCallbackRef } from '@mantine/hooks';
 import * as m from 'motion/react-m';
-import { useCurrentViewId } from '../../hooks/useCurrentView.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
+import { useSearchContext } from '../SearchContext.js';
 import { pickviewBackdrop, pickview, pickviewGroup } from './styles.css.js';
 import { ViewButton } from './ViewsColum.js';
 import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function PickView({
-  searchActorRef,
   elementFqn
 }) {
-  const currentViewId = useCurrentViewId();
+  const ctx = useSearchContext();
+  const currentViewId = ctx.currentViewId ?? "";
   const element = useLikeC4Model().element(elementFqn);
   const scoped = [];
   const others = [];
@@ -24,7 +24,7 @@ function PickView({
     }
   }
   const closePickView = () => {
-    searchActorRef.send({ type: "pickview.close" });
+    ctx.closePickView();
   };
   useWindowEvent(
     "keydown",

package/dist/search/components/SearchInput.js

@@ -4,7 +4,7 @@ import { useFocusWithin, useWindowEvent, useMergedRef } from '@mantine/hooks';
 import { memo, useRef } from 'react';
 import { keys } from 'remeda';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
-import { useSearchActor, useSearch } from '../hooks.js';
+import { useSearchContext } from '../SearchContext.js';
 import { input } from './styles.css.js';
 import { moveFocusToSearchInput, stopAndPrevent, focusToFirstFoundElement } from './utils.js';
 import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
@@ -14,11 +14,11 @@ function startingWithKind(search) {
 }
 const SEARCH_PREFIXES = ["#", "kind:"];
 const LikeC4SearchInput = memo(() => {
-  const searchActorRef = useSearchActor();
+  const searchCtx = useSearchContext();
   const likec4model = useLikeC4Model();
   const inputRef = useRef(null);
   const { ref, focused } = useFocusWithin();
-  const [search, setSearch] = useSearch();
+  const { searchValue: search, setSearchValue: setSearch } = searchCtx;
   const combobox = useCombobox({
     scrollBehavior: "smooth",
     loop: false
@@ -129,9 +129,8 @@ const LikeC4SearchInput = memo(() => {
               {
                 onClick: (e) => {
                   e.stopPropagation();
-                  const openedWithSearch = searchActorRef.getSnapshot().context.openedWithSearch;
-                  if (search === "" || search === openedWithSearch) {
-                    searchActorRef.send({ type: "close" });
+                  if (search === "" || search === searchCtx.openedWithSearch) {
+                    searchCtx.close();
                   } else {
                     setSearch("");
                   }

package/dist/search/components/ViewsColum.js

@@ -6,9 +6,9 @@ import { Stack, VisuallyHidden, UnstyledButton, ThemeIcon, Group, Highlight, Bad
 import * as m from 'motion/react-m';
 import { memo, useRef, useMemo } from 'react';
 import { first } from 'remeda';
-import { useCurrentViewId } from '../../hooks/useCurrentView.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
-import { useNormalizedSearch, useSearchActor } from '../hooks.js';
+import { useNormalizedSearch } from '../hooks.js';
+import { useSearchContext } from '../SearchContext.js';
 import { emptyBoX, focusable, buttonsva } from './_shared.css.js';
 import { moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { viewButton } from './ViewsColumn.css.js';
@@ -17,7 +17,7 @@ import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_re
 
 const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
 const useFoundViews = () => {
-  const currentViewId = useCurrentViewId();
+  const { currentViewId } = useSearchContext();
   const likec4model = useLikeC4Model();
   const search = useNormalizedSearch();
   return useMemo(() => {
@@ -79,7 +79,7 @@ const ViewsColumn = memo(() => {
           ViewButton,
           {
             view,
-            currentViewId,
+            currentViewId: currentViewId ?? "",
             search,
             tabIndex: i === 0 ? 0 : -1
           }
@@ -90,15 +90,11 @@ const ViewsColumn = memo(() => {
 });
 const btn = buttonsva();
 function ViewButton({ className, view, loop = false, search, focusOnElement, currentViewId, ...props }) {
-  const searchActorRef = useSearchActor();
+  const ctx = useSearchContext();
   const nextViewId = view.id;
   const isCurrentView = nextViewId === currentViewId;
   const navigate = () => {
-    searchActorRef.send({
-      type: "navigate.to",
-      viewId: nextViewId,
-      focusOnElement
-    });
+    ctx.navigateTo(nextViewId, focusOnElement);
   };
   return /* @__PURE__ */ jsxs(
     UnstyledButton,

package/dist/search/hooks.d.ts

@@ -1,5 +1,3 @@
-import { SearchActorRef } from './searchActor';
-export declare function useSearchActor(): SearchActorRef;
 export declare function useSearch(): [string, (search: string) => void];
 export declare function useNormalizedSearch(): string;
 export declare function useUpdateSearch(): (search: string) => void;

package/dist/search/hooks.js

@@ -1,41 +1,15 @@
-import { useSelector } from '@xstate/react';
 import { useCallback, useDeferredValue } from 'react';
-import { useSearchActorRef } from '../hooks/useSearchActor.js';
+import { useSearchContext } from './SearchContext.js';
 
-function useSearchActor() {
-  const searchActorRef = useSearchActorRef();
-  if (!searchActorRef) {
-    throw new Error("Search actor not found");
-  }
-  return searchActorRef;
-}
-const selectSearchValue = (s) => s.context.searchValue;
-function useSearch() {
-  const searchActorRef = useSearchActor();
-  const searchValue = useSelector(searchActorRef, selectSearchValue);
-  const updateSearch = useCallback((search) => {
-    searchActorRef.send({ type: "change.search", search });
-  }, [searchActorRef]);
-  return [searchValue, updateSearch];
-}
-const selectNormalizedSearchValue = (s) => {
-  let v = selectSearchValue(s);
-  if (v === "") return v;
-  v = v.trim().toLowerCase();
-  if (v.startsWith("#") && v.length <= 2) {
-    return "";
-  }
-  return 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]);
 }
 
-export { useNormalizedSearch, useSearch, useSearchActor, useUpdateSearch };
+export { useNormalizedSearch, useUpdateSearch };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.51.0",
+  "version": "1.52.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -63,7 +63,7 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.8",
-    "@floating-ui/dom": "^1.7.5",
+    "@floating-ui/dom": "^1.7.6",
     "@lume/kiwi": "^0.4.4",
     "@mantine/core": "8.3.15",
     "@mantine/hooks": "8.3.15",
@@ -72,8 +72,8 @@
     "@react-hookz/web": "^25.2.0",
     "@xstate/react": "6.0.0",
     "@xstate/store": "3.14.0",
-    "@xyflow/react": "12.10.0",
-    "@xyflow/system": "0.0.74",
+    "@xyflow/react": "12.10.1",
+    "@xyflow/system": "0.0.75",
     "@zag-js/collection": "^1.33.1",
     "@zag-js/react": "^1.33.1",
     "@zag-js/tree-view": "^1.33.1",
@@ -82,15 +82,15 @@
     "defu": "^6.1.4",
     "fast-equals": "^6.0.0",
     "immer": "^11.1.4",
-    "motion": "^12.34.2",
+    "motion": "^12.34.5",
     "nanostores": "1.1.0",
     "react-error-boundary": "^6.1.1",
     "react-shadow": "^20.6.0",
     "remeda": "^2.33.6",
     "type-fest": "^4.41.0",
     "xstate": "5.24.0",
-    "@likec4/core": "1.51.0",
-    "@likec4/styles": "1.51.0"
+    "@likec4/styles": "1.52.0",
+    "@likec4/core": "1.52.0"
   },
   "peerDependencies": {
     "@pandacss/dev": "^1.8.2",
@@ -122,7 +122,7 @@
     "vitest": "4.0.18",
     "wireit": "0.14.12",
     "zx": "8.8.5",
-    "@likec4/tsconfig": "1.51.0",
+    "@likec4/tsconfig": "1.52.0",
     "@likec4/devops": "1.42.0"
   },
   "scripts": {