@likec4/diagram 1.47.0 → 1.49.0

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

@@ -1,8 +1,4 @@
-import { ProjectsOverviewTypes } from './_types';
-import { FunctionComponent, NamedExoticComponent } from 'react';
-export declare const edgeTypes: {
-    relationship: FunctionComponent<ProjectsOverviewTypes.EdgeProps>;
-};
+import { NamedExoticComponent } from 'react';
 export type ProjectsOverviewXYProps = {
     /**
      * Background pattern

package/dist/projects-overview/ProjectsOverviewXY.js

@@ -95,4 +95,4 @@ const ProjectsOverviewXY = memo(({
 });
 ProjectsOverviewXY.displayName = "ProjectsOverviewXY";
 
-export { ProjectsOverviewXY, edgeTypes };
+export { ProjectsOverviewXY };

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

@@ -4,7 +4,7 @@ import { EdgeChange, NodeChange } from '@xyflow/system';
 import { MouseEvent } from 'react';
 import { Simplify } from 'type-fest';
 import { ActorRef, SnapshotFrom, StateMachine, ActionFunction, Values } from 'xstate';
-import { ViewPadding } from '../custom';
+import { ViewPadding } from '../LikeC4Diagram.props';
 import { ProjectsOverviewTypes, ProjectsOverviewXYFLowInstance, ProjectsOverviewXYStoreApi } from './_types';
 export type Input = {
     view: LayoutedProjectsView;

package/dist/projects-overview/actor.js

@@ -20,8 +20,7 @@ const machine = setup({
   guards: {
     isReady: ({ context }) => context.initialized.xydata && context.initialized.xyflow && !!context.xystore && !!context.xyflow,
     "click: selected node": ({ event }) => {
-      assertEvent(event, ["xyflow.click.node"]);
-      return event.node.selected === true;
+      return event.type === "xyflow.click.node" && event.node.selected === true;
     }
   }
 });
@@ -91,32 +90,11 @@ const saveViewport = () => machine.createAction(({ context }) => {
 });
 const handleClick = () => machine.enqueueActions(({ event, enqueue }) => {
   if (event.type === "xyflow.click.double") {
-    enqueue(cancelFitDiagram());
-    enqueue(raiseFitDiagram());
+    enqueue(fitDiagram());
     return;
   }
-  if (event.type === "xyflow.click.pane") {
-    enqueue(cancelFitDiagram());
-    return;
-  }
-  console.warn("Unknown event", event);
 });
-const cancelFitDiagram = () => machine.cancel("fitDiagram");
-const raiseFitDiagram = (params) => {
-  const { delay = 30, ...rest } = {};
-  return machine.raise(
-    {
-      type: "xyflow.fitDiagram",
-      ...rest
-    },
-    {
-      id: "fitDiagram",
-      delay
-    }
-  );
-};
-const fitDiagram = (params) => machine.enqueueActions(({ context, event, enqueue }) => {
-  enqueue(cancelFitDiagram());
+const fitDiagram = (params) => machine.enqueueActions(({ context, event }) => {
   let bounds = context.view.bounds, duration;
   if (params) {
     bounds = params.bounds ?? context.view.bounds;
@@ -261,16 +239,16 @@ const _projectOverviewLogic = machine.createMachine({
         "xyflow.mouse.*": {
           actions: onMouseEnterOrLeave()
         },
-        "xyflow.click.node": [
+        "xyflow.click.*": [
           {
             guard: "click: selected node",
             actions: assignNavigateTo(),
             target: "navigate"
+          },
+          {
+            actions: handleClick()
           }
         ],
-        "xyflow.click.*": {
-          actions: handleClick()
-        },
         "xyflow.fitDiagram": {
           actions: fitDiagram()
         },
@@ -282,7 +260,6 @@ const _projectOverviewLogic = machine.createMachine({
     navigate: {
       tags: "active",
       entry: [
-        cancelFitDiagram(),
         saveViewport(),
         xstateActions_cjsExports.assign({
           xyedges: []
@@ -292,7 +269,7 @@ const _projectOverviewLogic = machine.createMachine({
           const { width, domNode } = nonNullable(xystore).getState();
           const nextZoom = clamp(
             Math.min(
-              width * 2 / 3 / navigateTo.data.width
+              width * 7 / 9 / navigateTo.data.width
               // (height - 200) / (navigateTo.data.height),
             ),
             { min: MinZoom, max: 2.5 }

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

@@ -1,4 +1,4 @@
 import { ProjectsOverviewActorRef } from './actor';
-import { Context } from 'react';
-export declare const ProjectsOverviewActorContext: Context<ProjectsOverviewActorRef | null>;
+import { Provider } from 'react';
+export declare const ProjectsOverviewActorContextProvider: Provider<ProjectsOverviewActorRef | null>;
 export declare function useProjectsOverviewActor(): ProjectsOverviewActorRef;

package/dist/projects-overview/context.js

@@ -2,8 +2,9 @@ import { nonNullable } from '@likec4/core';
 import { createContext, useContext } from 'react';
 
 const ProjectsOverviewActorContext = createContext(null);
+const ProjectsOverviewActorContextProvider = ProjectsOverviewActorContext.Provider;
 function useProjectsOverviewActor() {
   return nonNullable(useContext(ProjectsOverviewActorContext), "No ProjectsOverviewActorContext");
 }
 
-export { ProjectsOverviewActorContext, useProjectsOverviewActor };
+export { ProjectsOverviewActorContextProvider, useProjectsOverviewActor };

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.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.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 { DefaultHandles } from '../../base-primitives/NodeHandles.js';
 
 function ProjectNode(props) {

package/dist/projects-overview/panel/ProjectsOverviewPanel.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { NavigationPanel } from '../../components/NavigationPanel.js';
 
 const ProjectsOverviewPanel = () => {
-  return /* @__PURE__ */ jsx(NavigationPanel.Root, { size: "lg", children: /* @__PURE__ */ jsxs(NavigationPanel.Body, { children: [
+  return /* @__PURE__ */ jsx(NavigationPanel.Root, { children: /* @__PURE__ */ jsxs(NavigationPanel.Body, { children: [
     /* @__PURE__ */ jsx(NavigationPanel.Logo, {}),
     /* @__PURE__ */ jsx(NavigationPanel.Label, { children: "Projects Overview" })
   ] }) });

package/dist/search/Search.d.ts

@@ -1,4 +1,2 @@
-import { SearchActorRef } from './searchActor';
-export declare function Search({ searchActorRef }: {
-    searchActorRef: SearchActorRef;
-}): import("react/jsx-runtime").JSX.Element;
+import { MemoExoticComponent } from 'react';
+export declare const Search: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/search/Search.js

@@ -5,13 +5,12 @@ 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, LayoutGroup } from 'motion/react';
-import { useRef } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
+import { AnimatePresence, usePresence, LayoutGroup } from 'motion/react';
+import { memo, useRef, useMemo, useEffect, Suspense } from 'react';
 import { isTruthy } from 'remeda';
-import { ErrorFallback } from '../components/ErrorFallback.js';
-import { DiagramFeatures } from '../context/DiagramFeatures.js';
+import { createEmptyActor } from 'xstate';
 import { useCallbackRef } from '../hooks/useCallbackRef.js';
+import { useSearchActorRef } from '../hooks/useSearchActor.js';
 import { Overlay } from '../overlays/overlay/Overlay.js';
 import { ElementsColumn } from './components/ElementsColumn.js';
 import { PickView } from './components/PickView.js';
@@ -19,7 +18,6 @@ import { SearchByTags } from './components/SearchByTags.js';
 import { LikeC4SearchInput } from './components/SearchInput.js';
 import { focusToFirstFoundElement, moveFocusToSearchInput } from './components/utils.js';
 import { ViewsColumn } from './components/ViewsColum.js';
-import { SearchActorContext, usePickViewFor } from './hooks.js';
 
 const dialog = css({
   backgroundColor: `[rgb(34 34 34 / var(--_opacity, 95%))]`,
@@ -51,30 +49,54 @@ const body = css({
   paddingLeft: "md",
   paddingRight: "md",
   paddingBottom: "sm",
-  background: "[transparent]"
+  background: "transparent"
   // backgroundColor: {
   //   _dark: `[rgb(34 34 34 / 0.95)]`,
   //   _light: `[rgb(255 255 255/ 0.95)]`,
   // },
 });
-const selectIsOpened = (s) => !s.matches("inactive");
-function Search({ searchActorRef }) {
-  const isOpened = useSelector(searchActorRef, selectIsOpened);
-  const openSearch = () => {
-    searchActorRef.send({ type: "open" });
-  };
+const scrollArea = css({
+  height: [
+    "100%",
+    "100cqh"
+  ],
+  "& .mantine-ScrollArea-viewport": {
+    minHeight: "100%",
+    "& > div": {
+      minHeight: "100%",
+      height: "100%"
+    }
+  }
+});
+const selectIsOpened = (s) => {
+  try {
+    return s.status === "active" && (s.value === "opened" || s.value === "pickView");
+  } catch (e) {
+    console.error(e);
+    return false;
+  }
+};
+const Search = memo(() => {
+  const searchActorRef = useSearchActorRef();
+  const emptyActorRef = useRef(createEmptyActor());
+  const isOpened = useSelector(searchActorRef ?? emptyActorRef.current, selectIsOpened);
   const close = useCallbackRef(() => {
-    searchActorRef.send({ type: "close" });
+    searchActorRef?.send({ type: "close" });
   });
-  useHotkeys([
-    ["mod+k", openSearch, {
-      preventDefault: true
-    }],
-    ["mod+f", openSearch, {
-      preventDefault: true
-    }]
-  ]);
-  return /* @__PURE__ */ jsx(SearchActorContext, { value: searchActorRef, children: /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: close, children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsx(
+  useHotkeys(
+    useMemo(() => {
+      const openSearch = () => searchActorRef?.send({ type: "open" });
+      return searchActorRef ? [
+        ["mod+k", openSearch, {
+          preventDefault: true
+        }],
+        ["mod+f", openSearch, {
+          preventDefault: true
+        }]
+      ] : [];
+    }, [searchActorRef])
+  );
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: searchActorRef && isOpened && /* @__PURE__ */ jsx(
     Overlay,
     {
       fullscreen: true,
@@ -89,31 +111,32 @@ function Search({ searchActorRef }) {
       openDelay: 0,
       onClose: close,
       "data-likec4-search": "true",
-      children: /* @__PURE__ */ jsx(SearchOverlay, { searchActorRef })
+      children: /* @__PURE__ */ jsx(SearchOverlayBody, { searchActorRef })
     }
-  ) }) }) }) });
-}
-const scrollArea = css({
-  height: [
-    "100%",
-    "100cqh"
-  ],
-  "& .mantine-ScrollArea-viewport": {
-    minHeight: "100%",
-    "& > div": {
-      minHeight: "100%",
-      height: "100%"
-    }
-  }
+  ) });
 });
-const SearchOverlay = ({ searchActorRef }) => {
+Search.displayName = "Search";
+const selectPickViewFor = (s) => s.context.pickViewFor;
+const SearchOverlayBody = memo(({ searchActorRef }) => {
   const ref = useRef(null);
-  const pickViewFor = usePickViewFor();
+  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]);
   return /* @__PURE__ */ jsxs(Box, { ref, display: "contents", children: [
     /* @__PURE__ */ jsx(
       Group,
@@ -151,7 +174,7 @@ const SearchOverlay = ({ searchActorRef }) => {
               className: scrollArea,
               pr: "xs",
               scrollbars: "y",
-              children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-elements", children: /* @__PURE__ */ jsx(ElementsColumn, {}) }) })
+              children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-elements", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(ElementsColumn, {}) }) })
             }
           ) }),
           /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
@@ -161,14 +184,14 @@ const SearchOverlay = ({ searchActorRef }) => {
               className: scrollArea,
               pr: "xs",
               scrollbars: "y",
-              children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-views", children: /* @__PURE__ */ jsx(ViewsColumn, {}) }) })
+              children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-views", children: /* @__PURE__ */ jsx(ViewsColumn, {}) }) })
             }
           ) })
         ]
       }
     ),
-    pickViewFor && /* @__PURE__ */ jsx(PickView, { elementFqn: pickViewFor })
+    pickViewFor && /* @__PURE__ */ jsx(PickView, { searchActorRef, elementFqn: pickViewFor })
   ] });
-};
+});
 
 export { Search };

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

@@ -25,7 +25,7 @@ const treeSubtree = css({
   marginTop: "2"
 });
 const elementExpandIcon = css({
-  color: "mantine.colors.dimmed"
+  color: "text.dimmed"
 });
 const elementTitleAndId = css({
   [whenContainerIsNarrow]: {
@@ -35,14 +35,14 @@ const elementTitleAndId = css({
   }
 });
 const elementId = css({
-  // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
+  // color: `[var(${descriptionColor}, {colors.text.dimmed})]`,
   fontSize: "10px",
   lineHeight: "1.3",
   display: "block",
-  fontWeight: 500,
+  fontWeight: "medium",
   whiteSpace: "nowrap",
   padding: "[1px 5px]",
-  borderRadius: "4px",
+  borderRadius: "sm",
   background: `mantine.colors.dark[9]/30`,
   _light: {
     background: `mantine.colors.gray[3]/20`
@@ -56,9 +56,9 @@ const elementIcon = css({
 });
 const elementViewsCount = css({
   flex: 0,
-  // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
+  // color: `[var(${descriptionColor}, {colors.text.dimmed})]`,
   fontSize: "10px",
-  fontWeight: 500,
+  fontWeight: "medium",
   whiteSpace: "nowrap",
   lineHeight: "1.1",
   [whenContainerIsNarrow]: {

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.3/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: ElementTreeNode
+      renderNode: (p) => /* @__PURE__ */ jsx(ElementTreeNode, { ...p, searchTerms, handleClick })
     }
   );
 }
-function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
-  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,8 +201,6 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
     },
     className: cx(btn.icon, elementIcon)
   });
-  const views = [...element.views()];
-  const handleClick = useHandleElementSelection();
   const key = `@tree.${node.value}`;
   return /* @__PURE__ */ jsxs(m.div, { layoutId: key, ...elementProps, children: [
     /* @__PURE__ */ jsx(
@@ -204,7 +234,7 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
         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();
@@ -216,23 +246,32 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
           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" : ""
           ] }) })
         ]
       }
@@ -240,7 +279,6 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
   ] });
 }
 function useHandleElementSelection() {
-  const diagram = useDiagram();
   const searchActorRef = useSearchActor();
   return useCallbackRef((element) => {
     const views = [...element.views()];
@@ -253,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.d.ts

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