@likec4/diagram 1.51.0 → 1.53.0

package/dist/overlays/relationship-details/SelectEdge.js

@@ -3,8 +3,8 @@ import { Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown,
 import { useRef } from 'react';
 import { useRelationshipDetails } from './hooks.js';
 import { edgeSource, edgeTarget, scrollArea, edgeGrid, edgeRow, edgeArrow, edgeLabel } from './SelectEdge.css.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
 
 const SelectEdge = ({
   edge,

package/dist/overlays/relationship-details/custom/ElementActions.js

@@ -6,9 +6,9 @@ import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../../hooks/safeContext.js';
 import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const ElementActions = (props) => {
   const { enableNavigateTo, enableVscode } = useEnabledFeatures();

package/dist/overlays/relationships-browser/RelationshipsBrowser.js

@@ -14,12 +14,12 @@ import { SelectElement } from './SelectElement.js';
 import { RelationshipEdge } from './custom/edgeTypes.js';
 import { EmptyNode } from './custom/EmptyNode.js';
 import { CompoundNode, ElementNode } from './custom/nodeTypes.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';
-import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
-import IconCheck from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
-import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
-import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconCheck from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
 
 const nodeTypes = {
   element: ElementNode,

package/dist/overlays/relationships-browser/SelectElement.js

@@ -7,8 +7,8 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
 import * as SelectElement_css from './SelectElement.css.js';
 import { scrollArea } from './SelectElement.css.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const selector2 = (state) => {
   const subjectExistsInScope = state.context.layouted?.subjectExistsInScope ?? false;

package/dist/overlays/relationships-browser/custom/ElementActions.js

@@ -6,9 +6,9 @@ import '@xstate/react';
 import 'fast-equals';
 import { useDiagram } from '../../../hooks/safeContext.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from '../hooks.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
 
 const selectSubject = (state) => state.context.subject;

package/dist/projects-overview/actor.d.ts

@@ -3,7 +3,7 @@ import { LayoutedProjectsView } from '@likec4/core/compute-view';
 import { EdgeChange, NodeChange } from '@xyflow/system';
 import { MouseEvent } from 'react';
 import { Simplify } from 'type-fest';
-import { ActorRef, SnapshotFrom, StateMachine, ActionFunction, Values } from 'xstate';
+import { ActorRef, SnapshotFrom, StateMachine, ActionFunction } from 'xstate';
 import { ViewPadding } from '../LikeC4Diagram.props';
 import { ProjectsOverviewTypes, ProjectsOverviewXYFLowInstance, ProjectsOverviewXYStoreApi } from './_types';
 export type Input = {
@@ -92,26 +92,20 @@ export declare const onMouseEnterOrLeave: () => ActionFunction<Context, Events,
 export declare const fitDiagram: (params?: {
     duration?: number;
     bounds?: BBox;
-}) => ActionFunction<Context, Events, Events, undefined, never, never, Values<{
-    isReady: {
-        type: "isReady";
-        params: unknown;
-    };
-    "click: selected node": {
-        type: "click: selected node";
-        params: unknown;
-    };
-}>, never, EmittedEvents>;
-export declare const restoreViewport: () => ActionFunction<Context, Events, Events, undefined, never, never, Values<{
-    isReady: {
-        type: "isReady";
-        params: unknown;
-    };
-    "click: selected node": {
-        type: "click: selected node";
-        params: unknown;
-    };
-}>, never, EmittedEvents>;
+}) => ActionFunction<Context, Events, Events, undefined, never, never, {
+    type: "isReady";
+    params: unknown;
+} | {
+    type: "click: selected node";
+    params: unknown;
+}, never, EmittedEvents>;
+export declare const restoreViewport: () => ActionFunction<Context, Events, Events, undefined, never, never, {
+    type: "isReady";
+    params: unknown;
+} | {
+    type: "click: selected node";
+    params: unknown;
+}, never, EmittedEvents>;
 export interface ProjectsOverviewLogic extends StateMachine<Context, Events, {}, any, any, any, any, any, Tags, Input, any, EmittedEvents, any, any> {
 }
 export declare const projectOverviewLogic: ProjectsOverviewLogic;

package/dist/projects-overview/custom/nodeTypes.js

@@ -5,7 +5,7 @@ import { ElementNodeContainer } from '../../base-primitives/element/ElementNodeC
 import { ElementShape } from '../../base-primitives/element/ElementShape.js';
 import { ElementData } from '../../base-primitives/element/ElementData.js';
 import { ElementActionButtons } from '../../base-primitives/element/ElementActionButtons.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 import { DefaultHandles } from '../../base-primitives/NodeHandles.js';
 
 function ProjectNode(props) {

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,12 +9,13 @@ 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';
 import { NothingFound } from './ViewsColum.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 function useElementsColumnData() {
   const model = useLikeC4Model();
@@ -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';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_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/SearchByTags.js

@@ -7,7 +7,7 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useUpdateSearch, useNormalizedSearch } from '../hooks.js';
 import { focusToFirstFoundElement, moveFocusToSearchInput } from './utils.js';
 import { ElementTag } from '../../base-primitives/element/ElementTags.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';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function SearchByTags() {
   const ref = useRef(null);

package/dist/search/components/SearchInput.js

@@ -4,21 +4,21 @@ 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';
+import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 
 function startingWithKind(search) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null;
 }
 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,18 +6,18 @@ 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';
-import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 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;