@likec4/diagram 1.48.0 → 1.49.0

package/dist/search/components/ElementsColumn.js

@@ -1,80 +1,110 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ifilter, sortParentsFirst, isAncestor, nameFromFqn } from '@likec4/core/utils';
+import { ifilter, imap, toArray, isAncestor, stringHash, nameFromFqn } from '@likec4/core/utils';
 import { cx } from '@likec4/styles/css';
-import { useTree, Tree, ActionIcon, UnstyledButton, Box, Group, Highlight, Tooltip, Text } from '@mantine/core';
+import { Txt } from '@likec4/styles/jsx';
+import { useTree, Tree, ActionIcon, UnstyledButton, Box, Group, Highlight, Tooltip } from '@mantine/core';
 import * as m from 'motion/react-m';
 import { memo, useMemo, useEffect } from 'react';
-import { isEmpty, pipe, reduce, only, first } from 'remeda';
+import { pipe, filter, hasAtLeast, reduce, only, first, last } from 'remeda';
 import { IconOrShapeRenderer } from '../../context/IconRenderer.js';
 import { useCallbackRef } from '../../hooks/useCallbackRef.js';
-import '@xstate/react';
-import 'fast-equals';
-import { useDiagram } from '../../hooks/safeContext.js';
-import { sortByLabel } from '../../hooks/useLikeC4ElementsTree.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useNormalizedSearch, useSearchActor } from '../hooks.js';
 import { focusable, buttonsva } from './_shared.css.js';
 import { treeSubtree, treeLabel, treeRoot, treeNode, elementIcon, elementExpandIcon, elementTitleAndId, elementId, elementViewsCount } from './ElementsColumn.css.js';
-import { whenSearchAnimationEnds, stopAndPrevent, moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.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.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.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';
 
-const btn = buttonsva();
-const ElementsColumn = memo(() => {
+function useElementsColumnData() {
   const model = useLikeC4Model();
+  const allElements = useMemo(() => pipe(
+    model.elements(),
+    ifilter((i) => !i.imported),
+    imap((element) => ({
+      label: element.title,
+      value: element.id,
+      element,
+      // searchTerms,
+      viewsCount: [...element.views()].length,
+      children: []
+    })),
+    toArray()
+  ), [model]);
   const search = useNormalizedSearch();
-  const data = useMemo(() => {
+  return useMemo(() => {
     const searchTerms = search.split(".");
     let elements;
-    if (isEmpty(searchTerms) || searchTerms[0] === "kind:") {
-      elements = model.elements();
-    } else {
-      elements = ifilter(model.elements(), (element) => {
-        if (search.startsWith("kind:")) {
-          return element.kind.toLocaleLowerCase().startsWith(search.slice(5));
+    if (search === "" || search === "kind:") {
+      elements = allElements;
+    } else if (search.startsWith("kind:")) {
+      const searchKind = search.slice(5);
+      elements = filter(allElements, ({ element }) => {
+        return element.kind.toLocaleLowerCase()[searchKind.length > 4 ? "startsWith" : "includes"](searchKind);
+      });
+    } else if (search.startsWith("#")) {
+      const searchTag = search.slice(1);
+      elements = filter(allElements, ({ element }) => {
+        return element.tags.some((tag) => tag.toLocaleLowerCase().includes(searchTag));
+      });
+    } else if (hasAtLeast(searchTerms, 2)) {
+      const satisfies = (element) => {
+        const fqnParts = element.id.toLocaleLowerCase().split(".");
+        if (fqnParts.length < searchTerms.length) {
+          return false;
         }
-        if (search.startsWith("#")) {
-          return element.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)));
+        let lastMatchIndex = 0;
+        for (let i = 0; i < fqnParts.length; i++) {
+          if (fqnParts[i].includes(searchTerms[lastMatchIndex])) {
+            lastMatchIndex++;
+            if (lastMatchIndex === searchTerms.length) {
+              return true;
+            }
+            continue;
+          }
         }
-        const value = element.title + " " + element.id + " " + element.summary.text;
+        return false;
+      };
+      elements = filter(allElements, ({ element }) => satisfies(element));
+    } else {
+      elements = filter(allElements, ({ element }) => {
+        const value = element.title + " " + element.name + " " + (element.summary.md || "");
         return value.toLocaleLowerCase().includes(search);
       });
     }
     const byid = {};
-    const { all, roots } = pipe(
-      [...elements],
-      sortParentsFirst,
-      reduce((acc, element) => {
-        const treeItem = {
-          label: element.title,
-          value: element.id,
-          element,
-          searchTerms,
-          children: []
-        };
+    const { hash, all, roots } = pipe(
+      elements,
+      reduce((acc, treeItem) => {
+        treeItem.children = [];
         byid[treeItem.value] = treeItem;
         const parent = acc.all.findLast((root) => isAncestor(root.value, treeItem.value));
         if (parent) {
           parent.children.push(treeItem);
-          if (parent.children.length > 1) {
-            parent.children.sort(sortByLabel);
-          }
         } else {
           acc.roots.push(treeItem);
         }
         acc.all.push(treeItem);
+        acc.hash = stringHash(acc.hash + treeItem.value);
         return acc;
       }, {
+        hash: "empty",
         all: [],
         roots: []
       })
     );
     return {
+      hash,
       all,
       byid,
-      roots: roots.sort(sortByLabel)
+      roots,
+      searchTerms: hasAtLeast(searchTerms, 1) ? searchTerms : [search]
     };
-  }, [model, search]);
+  }, [allElements, search]);
+}
+const btn = buttonsva();
+const ElementsColumn = memo(() => {
+  const data = useElementsColumnData();
   const handleClick = useHandleElementSelection();
   if (data.all.length === 0) {
     return /* @__PURE__ */ jsx(NothingFound, {});
@@ -85,8 +115,10 @@ const setHoveredNode = () => {
 };
 function ElementsTree({
   data: {
+    searchTerms,
     all,
     byid,
+    hash,
     roots
   },
   handleClick
@@ -102,7 +134,7 @@ function ElementsTree({
         tree.expand(nd.value);
       }
     }
-  }, [all]);
+  }, [hash]);
   const onKeyDownCapture = useCallbackRef((e) => {
     const target = e.target;
     const id = target.getAttribute("data-value");
@@ -154,12 +186,12 @@ function ElementsTree({
         subtree: treeSubtree
       },
       onKeyDownCapture,
-      renderNode: (p) => /* @__PURE__ */ jsx(ElementTreeNode, { ...p, handleClick })
+      renderNode: (p) => /* @__PURE__ */ jsx(ElementTreeNode, { ...p, searchTerms, handleClick })
     }
   );
 }
-function ElementTreeNode({ node, elementProps, hasChildren, expanded, handleClick }) {
-  const { element, searchTerms } = node;
+function ElementTreeNode({ node, elementProps, hasChildren, expanded, handleClick, searchTerms }) {
+  const { label, element, viewsCount } = node;
   const elementIcon$1 = IconOrShapeRenderer({
     element: {
       id: element.id,
@@ -169,7 +201,6 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded, handleClic
     },
     className: cx(btn.icon, elementIcon)
   });
-  const views = [...element.views()];
   const key = `@tree.${node.value}`;
   return /* @__PURE__ */ jsxs(m.div, { layoutId: key, ...elementProps, children: [
     /* @__PURE__ */ jsx(
@@ -203,7 +234,7 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded, handleClic
         tabIndex: -1,
         "data-value": element.id,
         className: cx(btn.root, "group", "likec4-element-button"),
-        ...views.length > 0 && {
+        ...viewsCount > 0 && {
           onClick: (e) => {
             if (!hasChildren || expanded) {
               e.stopPropagation();
@@ -215,23 +246,32 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded, handleClic
           elementIcon$1,
           /* @__PURE__ */ jsxs(Box, { style: { flexGrow: 1 }, children: [
             /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", align: "center", className: elementTitleAndId, children: [
-              /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: btn.title, children: node.label }),
+              /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: btn.title, children: label }),
               /* @__PURE__ */ jsx(Tooltip, { label: element.id, withinPortal: false, fz: "xs", disabled: !element.id.includes("."), children: /* @__PURE__ */ jsx(
                 Highlight,
                 {
                   component: "div",
-                  highlight: searchTerms,
+                  highlight: last(searchTerms),
                   className: cx(elementId, btn.descriptionColor),
                   children: nameFromFqn(element.id)
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: btn.description, lineClamp: 1, children: element.summary.text || "No description" })
+            /* @__PURE__ */ jsx(
+              Highlight,
+              {
+                component: "div",
+                highlight: element.summary.nonEmpty ? searchTerms : [],
+                className: btn.description,
+                lineClamp: 1,
+                children: element.summary.nonEmpty ? element.summary.text : "No description"
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsx(Text, { component: "div", className: cx(elementViewsCount, btn.descriptionColor), fz: "xs", children: views.length === 0 ? "No views" : /* @__PURE__ */ jsxs(Fragment, { children: [
-            views.length,
+          /* @__PURE__ */ jsx(Txt, { as: "div", className: cx(elementViewsCount, btn.descriptionColor), size: "xs", children: viewsCount === 0 ? "No views" : /* @__PURE__ */ jsxs(Fragment, { children: [
+            viewsCount,
             " view",
-            views.length > 1 ? "s" : ""
+            viewsCount > 1 ? "s" : ""
           ] }) })
         ]
       }
@@ -239,7 +279,6 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded, handleClic
   ] });
 }
 function useHandleElementSelection() {
-  const diagram = useDiagram();
   const searchActorRef = useSearchActor();
   return useCallbackRef((element) => {
     const views = [...element.views()];
@@ -252,16 +291,11 @@ function useHandleElementSelection() {
       searchActorRef.send({ type: "pickview.open", elementFqn });
       return;
     }
-    const isSameView = onlyOneViewId === diagram.currentView.id;
-    searchActorRef.send({ type: "close" });
-    whenSearchAnimationEnds(() => {
-      if (isSameView) {
-        diagram.focusOnElement(elementFqn);
-        return;
-      }
-      diagram.navigateTo(onlyOneViewId, void 0, elementFqn);
+    searchActorRef.send({
+      type: "navigate.to",
+      viewId: onlyOneViewId,
+      focusOnElement: elementFqn
     });
-    return;
   });
 }
 

package/dist/search/components/PickView.js

@@ -1,16 +1,18 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { FocusTrap, Group, Title, ActionIcon, ScrollAreaAutosize, Stack } from '@mantine/core';
-import { useWindowEvent } from '@mantine/hooks';
+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 { pickviewBackdrop, pickview, pickviewGroup } from './styles.css.js';
 import { ViewButton } from './ViewsColum.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.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 element = useLikeC4Model().element(elementFqn);
   const scoped = [];
   const others = [];
@@ -26,7 +28,7 @@ function PickView({
   };
   useWindowEvent(
     "keydown",
-    (event) => {
+    useCallbackRef((event) => {
       try {
         if (event.key === "Escape") {
           event.stopPropagation();
@@ -36,7 +38,7 @@ function PickView({
       } catch (e) {
         console.warn(e);
       }
-    },
+    }),
     {
       capture: true
     }
@@ -101,6 +103,7 @@ function PickView({
                 ViewButton,
                 {
                   view,
+                  currentViewId,
                   search: "",
                   loop: true,
                   focusOnElement: elementFqn,
@@ -117,6 +120,7 @@ function PickView({
                 ViewButton,
                 {
                   view,
+                  currentViewId,
                   search: "",
                   loop: true,
                   focusOnElement: elementFqn,

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.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.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 SearchByTags() {
   const ref = useRef(null);

package/dist/search/components/SearchInput.js

@@ -7,7 +7,7 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useSearchActor, useSearch } from '../hooks.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.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.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 startingWithKind(search) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null;
@@ -56,7 +56,7 @@ const LikeC4SearchInput = memo(() => {
           /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No tags found" }, "empty-tags")
         ];
       } else {
-        isExactMatch = likec4model.tags.some((tag) => tag.toLocaleLowerCase() === searchTag);
+        isExactMatch = alloptions.some((tag) => tag.toLocaleLowerCase() === searchTag);
         options = alloptions.map((tag) => /* @__PURE__ */ jsxs(ComboboxOption, { value: `#${tag}`, children: [
           /* @__PURE__ */ jsx(Text, { component: "span", opacity: 0.5, mr: 1, fz: "sm", children: "#" }),
           tag

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

@@ -4,8 +4,9 @@ import { ElementProps, UnstyledButtonProps } from '@mantine/core';
 import { MemoExoticComponent } from 'react';
 export declare const NothingFound: () => import("react/jsx-runtime").JSX.Element;
 export declare const ViewsColumn: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
-export declare function ViewButton({ className, view, loop, search, focusOnElement, ...props }: {
+export declare function ViewButton({ className, view, loop, search, focusOnElement, currentViewId, ...props }: {
     view: LikeC4Model.View;
+    currentViewId: string;
     search: string;
     loop?: boolean;
     focusOnElement?: Fqn;

package/dist/search/components/ViewsColum.js

@@ -1,39 +1,47 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { preferSummary } from '@likec4/core/types';
 import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
-import { Stack, VisuallyHidden, UnstyledButton, createScopedKeydownHandler, ThemeIcon, Group, Highlight, Badge } from '@mantine/core';
+import { Stack, VisuallyHidden, UnstyledButton, ThemeIcon, Group, Highlight, Badge, createScopedKeydownHandler } from '@mantine/core';
 import * as m from 'motion/react-m';
-import { memo, useRef } from 'react';
+import { memo, useRef, useMemo } from 'react';
 import { first } from 'remeda';
 import { useCurrentViewId } from '../../hooks/useCurrentView.js';
-import '@xstate/react';
-import 'fast-equals';
-import { useDiagram } from '../../hooks/safeContext.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useNormalizedSearch, useSearchActor } from '../hooks.js';
-import { emptyBoX, buttonsva, focusable } from './_shared.css.js';
-import { moveFocusToSearchInput, queryAllFocusable, centerY, whenSearchAnimationEnds } from './utils.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.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.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.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';
 
 const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
+const useFoundViews = () => {
+  const currentViewId = useCurrentViewId();
+  const likec4model = useLikeC4Model();
+  const search = useNormalizedSearch();
+  return useMemo(() => {
+    let views = [...likec4model.views()];
+    if (search) {
+      if (search.startsWith("kind:")) {
+        views = [];
+      } else {
+        const searchTag = search.startsWith("#") ? search.slice(1) : null;
+        views = views.filter((view) => {
+          if (searchTag) {
+            return view.tags.some((tag) => tag.toLocaleLowerCase().includes(searchTag));
+          }
+          const desc = preferSummary(view.$view)?.md || " ";
+          return `${view.id} ${view.title} ${desc}`.toLocaleLowerCase().includes(search);
+        });
+      }
+    }
+    return [views, search, currentViewId];
+  }, [likec4model, search, currentViewId]);
+};
 const ViewsColumn = memo(() => {
   const ref = useRef(null);
-  let views = [...useLikeC4Model().views()];
-  let search = useNormalizedSearch();
-  if (search) {
-    if (search.startsWith("kind:")) {
-      views = [];
-    } else {
-      views = views.filter((view) => {
-        if (search.startsWith("#")) {
-          return view.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)));
-        }
-        return `${view.id} ${view.title} ${view.description.text}`.toLocaleLowerCase().includes(search);
-      });
-    }
-  }
+  const [views, search, currentViewId] = useFoundViews();
   return /* @__PURE__ */ jsxs(
     Stack,
     {
@@ -71,6 +79,7 @@ const ViewsColumn = memo(() => {
           ViewButton,
           {
             view,
+            currentViewId,
             search,
             tabIndex: i === 0 ? 0 : -1
           }
@@ -80,20 +89,15 @@ const ViewsColumn = memo(() => {
   );
 });
 const btn = buttonsva();
-function ViewButton({ className, view, loop = false, search, focusOnElement, ...props }) {
+function ViewButton({ className, view, loop = false, search, focusOnElement, currentViewId, ...props }) {
   const searchActorRef = useSearchActor();
-  const diagram = useDiagram();
   const nextViewId = view.id;
-  const currentViewId = useCurrentViewId();
   const isCurrentView = nextViewId === currentViewId;
   const navigate = () => {
-    searchActorRef.send({ type: "close" });
-    whenSearchAnimationEnds(() => {
-      if (isCurrentView && focusOnElement) {
-        diagram.focusOnElement(focusOnElement);
-        return;
-      }
-      diagram.navigateTo(nextViewId, void 0, focusOnElement);
+    searchActorRef.send({
+      type: "navigate.to",
+      viewId: nextViewId,
+      focusOnElement
     });
   };
   return /* @__PURE__ */ jsxs(
@@ -124,7 +128,7 @@ function ViewButton({ className, view, loop = false, search, focusOnElement, ...
         /* @__PURE__ */ jsx(ThemeIcon, { variant: "transparent", className: btn.icon, children: view.isDeploymentView() ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 }) }),
         /* @__PURE__ */ jsxs(Box, { style: { flexGrow: 1 }, children: [
           /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", align: "center", children: [
-            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: search, className: btn.title, children: view.title || "untitled" }),
+            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: search, className: btn.title, children: view.titleOrUntitled }),
             isCurrentView && /* @__PURE__ */ jsx(Badge, { size: "xs", fz: 9, radius: "sm", children: "current" })
           ] }),
           /* @__PURE__ */ jsx(

package/dist/search/components/ViewsColumn.css.js

@@ -18,7 +18,7 @@ const viewButton = cx(
 css({
   marginTop: "1",
   // transition: transitions.fast,
-  // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
+  // color: `[var(${descriptionColor}, {colors.text.dimmed})]`,
   fontSize: "13px",
   lineHeight: "1.4",
   [`:where(.likec4-view-btn[data-disabled]) &`]: {

package/dist/search/components/_shared.css.js

@@ -9,7 +9,7 @@ const _treenodefocus = ".mantine-Tree-node:focus > .mantine-Tree-label &";
 const button = css.raw({
   display: "flex",
   width: "100%",
-  background: "mantine.colors.body",
+  background: "body",
   rounded: "sm",
   padding: `[12px 8px 12px 14px]`,
   minHeight: "60px",
@@ -17,10 +17,10 @@ const button = css.raw({
   // alignItems: 'flex-start',
   // transition: `all 50ms ${easings.inOut}`,
   border: `1px solid`,
-  borderColor: "mantine.colors.defaultBorder",
+  borderColor: "default.border",
   // [titleColor]: '{colors.mantine.colors.dark[1]}',
-  // [iconColor]: '{colors.mantine.colors.dimmed}',
-  // [descriptionColor]: '{colors.mantine.colors.dimmed}',
+  // [iconColor]: '{colors.text.dimmed}',
+  // [descriptionColor]: '{colors.text.dimmed}',
   _hover: {
     ...buttonFocused,
     borderColor: "mantine.colors.primary[9]",
@@ -52,7 +52,7 @@ const iconSize = {
 };
 const icon = css.raw({
   color: {
-    base: "mantine.colors.dimmed",
+    base: "text.dimmed",
     _light: "mantine.colors.gray[5]",
     _groupHover: "mantine.colors.primary[0]",
     _groupFocus: "mantine.colors.primary[0]"
@@ -98,23 +98,23 @@ const title = css.raw({
     _light: "mantine.colors.gray[7]",
     _groupHover: {
       base: "mantine.colors.primary[1]",
-      _light: "mantine.colors.white"
+      _light: "white"
     },
     _groupFocus: {
       base: "mantine.colors.primary[1]",
-      _light: "mantine.colors.white"
+      _light: "white"
     }
   },
   [_treenodefocus]: {
     color: {
       base: "mantine.colors.primary[1]",
-      _light: "mantine.colors.white"
+      _light: "white"
     }
   }
 });
 const descriptionColor = css.raw({
   color: {
-    base: "mantine.colors.dimmed",
+    base: "text.dimmed",
     _groupHover: {
       base: "mantine.colors.primary[1]",
       _light: "mantine.colors.primary[0]"
@@ -137,13 +137,13 @@ const emptyBoX = css({
   width: "100%",
   height: "100%",
   border: `2px dashed`,
-  borderColor: "mantine.colors.defaultBorder",
+  borderColor: "default.border",
   rounded: "md",
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
   fontSize: "md",
-  color: "mantine.colors.dimmed",
+  color: "text.dimmed",
   padding: "md",
   paddingBlock: "xl"
 });

package/dist/search/components/utils.js

@@ -54,8 +54,5 @@ function queryAllFocusable(from, where, selector = `.${focusable}`) {
   const elements = root.querySelectorAll(`[data-likec4-search-${where}] ${selector}`);
   return [...elements];
 }
-function whenSearchAnimationEnds(callback) {
-  setTimeout(callback, 400);
-}
 
-export { centerY, focusToFirstFoundElement, moveFocusToSearchInput, queryAllFocusable, stopAndPrevent, whenSearchAnimationEnds };
+export { centerY, focusToFirstFoundElement, moveFocusToSearchInput, queryAllFocusable, stopAndPrevent };

package/dist/search/hooks.js

@@ -20,8 +20,11 @@ function useSearch() {
 }
 const selectNormalizedSearchValue = (s) => {
   let v = selectSearchValue(s);
-  if (v === "") return "";
+  if (v === "") return v;
   v = v.trim().toLowerCase();
+  if (v.startsWith("#") && v.length <= 2) {
+    return "";
+  }
   return v.length > 1 ? v : "";
 };
 function useNormalizedSearch() {

package/dist/search/searchActor.d.ts

@@ -1,4 +1,4 @@
-import { Fqn } from '@likec4/core/types';
+import { Fqn, ViewId } from '@likec4/core/types';
 import { ActorRef, SnapshotFrom, StateMachine } from 'xstate';
 export type SearchActorEvent = {
     type: 'open';
@@ -11,6 +11,12 @@ export type SearchActorEvent = {
 } | {
     type: 'pickview.open';
     elementFqn: Fqn;
+} | {
+    type: 'navigate.to';
+    viewId: ViewId;
+    focusOnElement?: Fqn | undefined;
+} | {
+    type: 'animation.presence.end';
 } | {
     type: 'pickview.close';
 };
@@ -18,8 +24,12 @@ export interface SearchContext {
     openedWithSearch: string | null;
     searchValue: string;
     pickViewFor: Fqn | null;
+    navigateTo: {
+        viewId: ViewId;
+        focusOnElement?: Fqn | undefined;
+    } | null;
 }
-export interface SearchActorLogic extends StateMachine<SearchContext, SearchActorEvent, {}, any, any, any, any, 'inactive' | 'opened' | 'pickView', never, never, any, any, any, any> {
+export interface SearchActorLogic extends StateMachine<SearchContext, SearchActorEvent, {}, any, any, any, any, 'inactive' | 'opened' | 'pickView' | 'waitAnimationEnd', never, never, any, any, any, any> {
 }
 export declare const searchActorLogic: SearchActorLogic;
 export type SearchActorSnapshot = SnapshotFrom<SearchActorLogic>;