@likec4/diagram 1.50.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/navigationpanel/comparepanel/DriftsSummary.js

@@ -101,7 +101,7 @@ function DriftsSummary() {
   if (view.length === 0 && nodes.length === 0 && edges.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(AnimatePresence, { propagate: true, mode: "wait", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsxs(
     m.div,
     {
       layout: "size",
@@ -120,16 +120,16 @@ function DriftsSummary() {
       }),
       children: [
         hasAtLeast(view, 1) && /* @__PURE__ */ jsx(ViewDrifts, { drifts: view }),
-        nodes.length > 0 && /* @__PURE__ */ jsxs(m.div, { layout: "size", children: [
+        nodes.length > 0 && /* @__PURE__ */ jsxs(m.div, { layout: true, children: [
           /* @__PURE__ */ jsx(SectionHeader, { children: "Elements:" }),
-          /* @__PURE__ */ jsx(m.div, { layout: "size", className: vstack({ mt: "2", gap: "2" }), children: map(
+          /* @__PURE__ */ jsx("div", { className: vstack({ mt: "2", gap: "2" }), children: map(
             nodes,
             (node) => /* @__PURE__ */ jsx(NodeDrifts, { ...node, ...handlers }, node.id)
           ) })
         ] }, `nodes-drifts`),
-        edges.length > 0 && /* @__PURE__ */ jsxs(m.div, { layout: "size", children: [
+        edges.length > 0 && /* @__PURE__ */ jsxs(m.div, { layout: true, children: [
           /* @__PURE__ */ jsx(SectionHeader, { children: "Relationships:" }),
-          /* @__PURE__ */ jsx(m.div, { layout: "size", className: vstack({ mt: "2", gap: "2" }), children: map(edges, (edge) => /* @__PURE__ */ jsx(EdgeDrifts, { ...edge, ...handlers }, edge.edgeId)) })
+          /* @__PURE__ */ jsx("div", { className: vstack({ mt: "2", gap: "2" }), children: map(edges, (edge) => /* @__PURE__ */ jsx(EdgeDrifts, { ...edge, ...handlers }, edge.edgeId)) })
         ] }, `edges-drifts`)
       ]
     },
@@ -153,6 +153,7 @@ function ViewDrifts({ drifts }) {
   ) });
 }
 function NodeDrifts({ id, name, drifts, ...handlers }) {
+  const key = `node-drifts-${id}`;
   return /* @__PURE__ */ jsxs(
     DriftsGroup,
     {
@@ -178,28 +179,29 @@ function NodeDrifts({ id, name, drifts, ...handlers }) {
             children: name
           }
         ),
-        map(drifts, (drift) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, id + drift))
+        map(drifts, (drift, i) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, key + drift + i))
       ]
     },
-    `node-drifts-${id}`
+    key
   );
 }
 function EdgeDrifts({ edgeId, drifts, ...handlers }) {
+  const key = `edge-drifts-${edgeId}`;
   return /* @__PURE__ */ jsx(
     DriftsGroup,
     {
       "data-drift-type": "edge",
       "data-drift-id": edgeId,
       ...handlers,
-      children: map(drifts, (drift) => /* @__PURE__ */ jsx(
+      children: map(drifts, (drift, i) => /* @__PURE__ */ jsx(
         DriftLabel,
         {
           children: drift
         },
-        edgeId + drift
+        key + drift + i
       ))
     },
-    `edge-drifts-${edgeId}`
+    key
   );
 }
 const DriftsGroup = styled(m.div, {
@@ -220,7 +222,7 @@ const DriftsGroup = styled(m.div, {
   defaultProps: {
     className: "group",
     variants,
-    layout: "size",
+    layout: true,
     initial: "initial",
     animate: "animate",
     exit: "exit"

package/dist/navigationpanel/walkthrough/DynamicViewControls.js

@@ -32,14 +32,14 @@ const TriggerWalkthroughButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(
   }
 ));
 function StartWalkthroughButton() {
-  const { enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+  const { enableCompareWithLatest } = useEnabledFeatures();
   const diagram = useDiagram();
   const actor = useNavigationActor();
   let tooltipLabel = "Start Dynamic View Walkthrough";
   switch (true) {
-    case !enableReadOnly:
-      tooltipLabel = "Walkthrough not available in Edit mode";
-      break;
+    // case !enableReadOnly:
+    //   tooltipLabel = 'Walkthrough not available in Edit mode'
+    //   break
     case enableCompareWithLatest:
       tooltipLabel = "Walkthrough not available when Compare is active";
       break;
@@ -57,7 +57,7 @@ function StartWalkthroughButton() {
       exit: { opacity: 0, translateX: -20 },
       size: "compact-xs",
       h: 26,
-      disabled: !enableReadOnly || enableCompareWithLatest,
+      disabled: enableCompareWithLatest,
       classNames: {
         label: css({
           display: {

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("");
                   }