@likec4/diagram 1.30.0 → 1.32.0

package/dist/{likec4diagram/ui/search → search/components}/ElementsColumn.js

@@ -4,27 +4,27 @@ import { cx } from '@likec4/styles/css';
 import { useTree, Tree, ActionIcon, UnstyledButton, Box, Group, Highlight, Tooltip, Text } from '@mantine/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { IconChevronRight } from '@tabler/icons-react';
-import clsx from 'clsx';
 import * as m from 'motion/react-m';
-import { r as reactExports } from '../../../_virtual/index.js';
-import { isEmpty, pipe, reduce, only, partition, first } from 'remeda';
-import { IconOrShapeRenderer } from '../../../context/IconRenderer.js';
-import { sortByLabel } from '../../../likec4model/useLikeC4ElementsTree.js';
-import { useLikeC4Model } from '../../../likec4model/useLikeC4Model.js';
+import { memo, useMemo, useCallback, useEffect } from 'react';
+import { isEmpty, pipe, reduce, only, first } from 'remeda';
+import { IconOrShapeRenderer } from '../../context/IconRenderer.js';
+import { useDiagram } from '../../hooks/useDiagram.js';
+import { sortByLabel } from '../../likec4model/useLikeC4ElementsTree.js';
+import { useLikeC4Model } from '../../likec4model/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 { useNormalizedSearch, useCloseSearchAndNavigateTo, setPickView } from './state.js';
 import { stopAndPrevent, moveFocusToSearchInput, centerY } from './utils.js';
 import { NothingFound } from './ViewsColum.js';
 
 const btn = buttonsva();
-function ElementsColumn() {
+const ElementsColumn = memo(() => {
+  const model = useLikeC4Model();
   const search = useNormalizedSearch();
-  const model = useLikeC4Model(true);
-  const data = reactExports.useMemo(() => {
+  const data = useMemo(() => {
     const searchTerms = search.split(".");
     let elements;
-    if (isEmpty(search) || search === "kind:") {
+    if (isEmpty(searchTerms) || searchTerms[0] === "kind:") {
       elements = model.elements();
     } else {
       elements = ifilter(model.elements(), (element) => {
@@ -77,7 +77,7 @@ function ElementsColumn() {
     return /* @__PURE__ */ jsx(NothingFound, {});
   }
   return /* @__PURE__ */ jsx(ElementsTree, { data, handleClick });
-}
+});
 const setHoveredNode = () => {
 };
 function ElementsTree({
@@ -92,7 +92,7 @@ function ElementsTree({
     multiple: false
   });
   tree.setHoveredNode = setHoveredNode;
-  reactExports.useEffect(() => {
+  useEffect(() => {
     tree.collapseAllNodes();
     for (const nd of all) {
       if (nd.children.length > 0) {
@@ -178,7 +178,7 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
         variant: "transparent",
         size: 16,
         tabIndex: -1,
-        className: clsx(elementExpandIcon),
+        className: cx(elementExpandIcon),
         style: {
           visibility: hasChildren ? "visible" : "hidden"
         },
@@ -201,7 +201,8 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
         component: m.button,
         layout: true,
         tabIndex: -1,
-        className: clsx(btn.root, "group", "likec4-element-button"),
+        "data-value": element.id,
+        className: cx(btn.root, "group", "likec4-element-button"),
         ...views.length > 0 && {
           onClick: (e) => {
             if (!hasChildren || expanded) {
@@ -238,24 +239,24 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
   ] });
 }
 function useHandleElementSelection() {
-  const navigateTo = useCloseSearchAndNavigateTo();
-  return reactExports.useCallback((element) => {
+  const diagram = useDiagram();
+  const { searchActorRef } = useSearchActor();
+  return useCallback((element) => {
     const views = [...element.views()];
     if (views.length === 0) {
       return;
     }
     const singleView = only(views);
     if (singleView) {
-      navigateTo(singleView.id, element.id);
+      if (singleView.id === diagram.currentView.id) {
+        searchActorRef.send({ type: "close" });
+      } else {
+        diagram.navigateTo(singleView.id);
+      }
       return;
     }
-    const [scoped, others] = partition(views, (v) => v.viewOf?.id === element.id);
-    setPickView({
-      elementFqn: element.id,
-      scoped,
-      others
-    });
-  }, [setPickView, navigateTo]);
+    searchActorRef.send({ type: "pickview.open", elementFqn: element.id });
+  }, []);
 }
 
 export { ElementsColumn };

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

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

package/dist/search/components/PickView.js

@@ -0,0 +1,135 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Group, Title, ActionIcon, FocusTrap, ScrollAreaAutosize, Stack } from '@mantine/core';
+import { useWindowEvent } from '@mantine/hooks';
+import { IconX } from '@tabler/icons-react';
+import * as m from 'motion/react-m';
+import { useSearchActor } from '../hooks.js';
+import { pickviewBackdrop, pickview, pickviewGroup } from './styles.css.js';
+import { ViewButton } from './ViewsColum.js';
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+
+function PickView({ elementFqn }) {
+  const { searchActorRef } = useSearchActor();
+  const element = useLikeC4Model().element(elementFqn);
+  const scoped = [];
+  const others = [];
+  for (const view of element.views()) {
+    if (view.viewOf === element) {
+      scoped.push(view);
+    } else {
+      others.push(view);
+    }
+  }
+  const closePickView = () => {
+    searchActorRef.send({ type: "pickview.close" });
+  };
+  useWindowEvent(
+    "keydown",
+    (event) => {
+      try {
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          event.preventDefault();
+          closePickView();
+        }
+      } catch (e) {
+        console.warn(e);
+      }
+    },
+    {
+      capture: true
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      m.div,
+      {
+        className: pickviewBackdrop,
+        onClick: (e) => {
+          e.stopPropagation();
+          closePickView();
+        }
+      },
+      "pickview-backdrop"
+    ),
+    /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        initial: {
+          opacity: 0,
+          scale: 0.95,
+          originY: 0,
+          translateX: "-50%",
+          translateY: -20
+        },
+        animate: {
+          opacity: 1,
+          scale: 1,
+          translateY: 0
+        },
+        exit: {
+          opacity: 0,
+          scale: 0.98,
+          translateY: -20,
+          transition: {
+            duration: 0.1
+          }
+        },
+        className: pickview,
+        "data-likec4-search-views": true,
+        children: [
+          /* @__PURE__ */ jsxs(Group, { px: "sm", py: "md", justify: "space-between", children: [
+            /* @__PURE__ */ jsx(Title, { order: 2, lh: 1, children: "Select view" }),
+            /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                size: "md",
+                variant: "default",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  closePickView();
+                },
+                children: /* @__PURE__ */ jsx(IconX, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsxs(ScrollAreaAutosize, { mah: "calc(100vh - 8rem - 50px)", type: "never", children: [
+            scoped.length > 0 && /* @__PURE__ */ jsxs(Stack, { gap: "sm", px: "sm", className: pickviewGroup, children: [
+              /* @__PURE__ */ jsx(Title, { order: 6, c: "dimmed", children: "scoped views of the element" }),
+              scoped.map((view, i) => /* @__PURE__ */ jsx(
+                ViewButton,
+                {
+                  view,
+                  search: "",
+                  loop: true,
+                  mod: {
+                    autofocus: i === 0
+                  }
+                },
+                view.id
+              ))
+            ] }),
+            others.length > 0 && /* @__PURE__ */ jsxs(Stack, { gap: "sm", px: "sm", className: pickviewGroup, children: [
+              /* @__PURE__ */ jsx(Title, { order: 6, c: "dimmed", children: "views including this element" }),
+              others.map((view, i) => /* @__PURE__ */ jsx(
+                ViewButton,
+                {
+                  view,
+                  search: "",
+                  loop: true,
+                  mod: {
+                    autofocus: i === 0 && scoped.length === 0
+                  }
+                },
+                view.id
+              ))
+            ] })
+          ] }) })
+        ]
+      },
+      "pickview"
+    )
+  ] });
+}
+
+export { PickView };

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

@@ -0,0 +1 @@
+export declare function SearchByTags(): import("react/jsx-runtime").JSX.Element | null;

package/dist/search/components/SearchByTags.js

@@ -0,0 +1,116 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { css } from '@likec4/styles/css';
+import { HStack } from '@likec4/styles/jsx';
+import { Button } from '@mantine/core';
+import { IconX } from '@tabler/icons-react';
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { useUpdateSearch, useNormalizedSearch } from '../hooks.js';
+import { focusToFirstFoundElement, moveFocusToSearchInput } from './utils.js';
+import { ElementTag } from '../../base/primitives/element/ElementTags.js';
+
+function SearchByTags() {
+  let tags = useLikeC4Model().tagsSortedByUsage;
+  let setSearch = useUpdateSearch();
+  let search = useNormalizedSearch();
+  let countBefore = tags.length;
+  if (search.startsWith("#")) {
+    const searchTag = search.slice(1);
+    tags = tags.filter(({ tag }) => tag.toLocaleLowerCase().includes(searchTag));
+  }
+  if (tags.length === 0) {
+    return null;
+  }
+  const isFiltered = tags.length !== countBefore;
+  return /* @__PURE__ */ jsxs(
+    HStack,
+    {
+      css: {
+        gap: "md",
+        paddingLeft: 48,
+        flexWrap: "nowrap"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          HStack,
+          {
+            css: {
+              gap: 6,
+              flexWrap: "wrap",
+              opacity: isFiltered ? 1 : 0.3,
+              grayscale: isFiltered ? 0 : 0.9,
+              filter: "auto",
+              transition: "fast",
+              _groupHover: {
+                opacity: 1,
+                grayscale: 0
+              },
+              _groupFocusWithin: {
+                opacity: 1,
+                grayscale: 0
+              }
+            },
+            children: tags.map(({ tag }) => (
+              // <Pill
+              //   key={tag}
+              //   data-likec4-tag={tag}
+              //   className={cx(
+              //     likec4tag(),
+              //     css({
+              //       minWidth: 'unset',
+              //       cursor: 'pointer',
+              //     }),
+              //   )}
+              //   onClick={(e) => {
+              //     e.stopPropagation()
+              //     setSearch(`#${tag}`)
+              //   }}
+              //   onRemove={() => {
+              //     setSearch('#')
+              //     moveFocusToSearchInput()
+              //   }}
+              //   withRemoveButton={tag === `${search.slice(1)}`}
+              // >
+              //   <span style={{ opacity: 0.7, fontSize: '1.05em' }}>#</span>
+              //   {tag}
+              // </Pill>
+              /* @__PURE__ */ jsx(
+                ElementTag,
+                {
+                  tag,
+                  className: css({
+                    userSelect: "none",
+                    cursor: "pointer"
+                  }),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setSearch(`#${tag}`);
+                    setTimeout(() => {
+                      focusToFirstFoundElement();
+                    }, 350);
+                  }
+                },
+                tag
+              )
+            ))
+          }
+        ),
+        isFiltered && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "compact-xs",
+            variant: "light",
+            onClick: (e) => {
+              e.stopPropagation();
+              setSearch("");
+              moveFocusToSearchInput();
+            },
+            rightSection: /* @__PURE__ */ jsx(IconX, { size: 14 }),
+            children: "Clear"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { SearchByTags };

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

@@ -0,0 +1,2 @@
+import { MemoExoticComponent } from 'react';
+export declare const LikeC4SearchInput: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/{likec4diagram/ui/search → search/components}/SearchInput.js

@@ -1,37 +1,34 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { compareNatural } from '@likec4/core';
 import { useCombobox, ComboboxOption, Text, Combobox, ComboboxTarget, Input, rem, ComboboxDropdown, ComboboxOptions, ScrollAreaAutosize, ComboboxEmpty } from '@mantine/core';
-import { useFocusWithin, useIsFirstRender, useDebouncedValue, useWindowEvent } from '@mantine/hooks';
+import { useFocusWithin, useWindowEvent } from '@mantine/hooks';
 import { usePreviousDistinct } from '@react-hookz/web';
 import { IconSearch } from '@tabler/icons-react';
-import '../../../_virtual/index.js';
-import { isString, keys, only } from 'remeda';
-import { useLikeC4Model } from '../../../likec4model/useLikeC4Model.js';
-import { input } from './LikeC4Search.css.js';
-import { useIsPickViewActive, useSearch, setSearch } from './state.js';
-import { moveFocusToSearchInput, stopAndPrevent } from './utils.js';
-import { focusable } from './_shared.css.js';
+import { memo } from 'react';
+import { keys, only } from 'remeda';
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { useSearchActor, useSearch } from '../hooks.js';
+import { input } from './styles.css.js';
+import { moveFocusToSearchInput, stopAndPrevent, focusToFirstFoundElement } from './utils.js';
 
 function startingWithKind(search) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null;
 }
 const SEARCH_PREFIXES = ["#", "kind:"];
-function LikeC4SearchInput() {
-  const isPickViewActive = useIsPickViewActive();
-  const likec4model = useLikeC4Model(true);
+const LikeC4SearchInput = memo(() => {
+  const { close, searchActorRef } = useSearchActor();
+  const likec4model = useLikeC4Model();
+  const { ref, focused } = useFocusWithin();
+  const [search, setSearch] = useSearch();
+  usePreviousDistinct(search);
   const combobox = useCombobox({
-    scrollBehavior: "smooth"
+    scrollBehavior: "smooth",
+    loop: false
   });
-  const { ref, focused } = useFocusWithin();
-  const search = useSearch();
-  const previous = usePreviousDistinct(search);
-  const isFirstRender = useIsFirstRender();
-  const [isEmptyForSomeTime] = useDebouncedValue(search === "" && !isFirstRender, isString(previous) ? 500 : 2e3);
   useWindowEvent(
     "keydown",
     (event) => {
       try {
-        if (!focused && !isPickViewActive && (event.key === "Backspace" || event.key.startsWith("Arrow") || event.key.match(/^\p{L}$/u))) {
+        if (!focused && (event.key === "Backspace" || event.key.startsWith("Arrow") || event.key.match(/^\p{L}$/u))) {
           moveFocusToSearchInput();
         }
       } catch (e) {
@@ -42,18 +39,18 @@ function LikeC4SearchInput() {
   let options = [];
   let isExactMatch = false;
   switch (true) {
-    case (search === "" && (isEmptyForSomeTime || SEARCH_PREFIXES.includes(previous ?? ""))): {
-      options = SEARCH_PREFIXES.map((prefix) => /* @__PURE__ */ jsxs(ComboboxOption, { value: prefix, children: [
-        /* @__PURE__ */ jsx(Text, { component: "span", opacity: 0.5, mr: 4, fz: "sm", children: "Search by" }),
-        prefix
-      ] }, prefix));
-      break;
-    }
+    // case search === '' && isEmptyForSomeTime === '': {
+    //   options = SEARCH_PREFIXES.map((prefix) => (
+    //     <ComboboxOption value={prefix} key={prefix}>
+    //       <Text component="span" opacity={.5} mr={4} fz={'sm'}>Search by</Text>
+    //       {prefix}
+    //     </ComboboxOption>
+    //   ))
+    //   break
+    // }
     case search.startsWith("#"): {
       const searchTag = search.toLocaleLowerCase().slice(1);
-      const alloptions = likec4model.allTags().filter((tag) => tag.toLocaleLowerCase().includes(searchTag)).sort(
-        compareNatural
-      );
+      const alloptions = likec4model.tags.filter((tag) => tag.toLocaleLowerCase().includes(searchTag));
       isExactMatch = only(alloptions)?.toLocaleLowerCase() === searchTag;
       if (alloptions.length === 0) {
         options = [
@@ -70,7 +67,7 @@ function LikeC4SearchInput() {
     case search.startsWith("kind:"):
     case startingWithKind(search): {
       const term = search.length > 5 ? search.slice(5).toLocaleLowerCase() : "";
-      let alloptions = keys(likec4model.$model.specification.elements);
+      let alloptions = keys(likec4model.specification.elements);
       if (term) {
         alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term));
         isExactMatch = only(alloptions)?.toLocaleLowerCase() === term;
@@ -97,8 +94,8 @@ function LikeC4SearchInput() {
         if (!SEARCH_PREFIXES.includes(optionValue)) {
           combobox.closeDropdown();
           setTimeout(() => {
-            document.querySelector(`[data-likec4-search] .${focusable}`)?.focus();
-          }, 50);
+            focusToFirstFoundElement();
+          }, 350);
         }
       },
       width: "max-content",
@@ -117,13 +114,29 @@ function LikeC4SearchInput() {
             ref,
             id: "likec4searchinput",
             placeholder: "Search by title, description or start with # or kind:",
+            autoFocus: true,
             tabIndex: 0,
             classNames: {
               input: input
             },
-            size: "xl",
+            size: "lg",
             value: search,
             leftSection: /* @__PURE__ */ jsx(IconSearch, { style: { width: rem(20) }, stroke: 2 }),
+            rightSection: /* @__PURE__ */ jsx(
+              Input.ClearButton,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  const openedWithSearch = searchActorRef.getSnapshot().context.openedWithSearch;
+                  if (search === "" || search === openedWithSearch) {
+                    close();
+                  } else {
+                    setSearch("");
+                  }
+                }
+              }
+            ),
+            rightSectionPointerEvents: "auto",
             onChange: (event) => {
               setSearch(event.currentTarget.value);
               combobox.openDropdown();
@@ -175,11 +188,16 @@ function LikeC4SearchInput() {
                 combobox.closeDropdown();
                 return;
               }
+              if (e.key === "ArrowUp" && combobox.dropdownOpened && search === "" && combobox.getSelectedOptionIndex() === 0) {
+                combobox.closeDropdown();
+                stopAndPrevent(e);
+                return;
+              }
               if (e.key === "ArrowDown" && (!combobox.dropdownOpened || options.length === 0 || isExactMatch || // reached the last option and the search is empty
               search === "" && combobox.getSelectedOptionIndex() === options.length - 1)) {
                 combobox.closeDropdown();
                 stopAndPrevent(e);
-                document.querySelector(`[data-likec4-search] .${focusable}`)?.focus();
+                focusToFirstFoundElement();
                 return;
               }
             }
@@ -189,6 +207,6 @@ function LikeC4SearchInput() {
       ]
     }
   );
-}
+});
 
 export { LikeC4SearchInput };

package/dist/{likec4diagram/ui/search → search/components}/ViewsColum.d.ts

@@ -1,7 +1,8 @@
-import { LikeC4Model } from '@likec4/core';
+import { LikeC4Model } from '@likec4/core/model';
 import { ElementProps, UnstyledButtonProps } from '@mantine/core';
+import { MemoExoticComponent } from 'react';
 export declare const NothingFound: () => import("react/jsx-runtime").JSX.Element;
-export declare function ViewsColumn(): 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, ...props }: {
     view: LikeC4Model.View;
     search: string;

package/dist/{likec4diagram/ui/search → search/components}/ViewsColum.js

@@ -1,22 +1,23 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { isDeploymentView } from '@likec4/core';
 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 { IconStack2, IconZoomScan } from '@tabler/icons-react';
 import * as m from 'motion/react-m';
+import { memo } from 'react';
 import { first } from 'remeda';
-import { useCurrentViewId } from '../../../hooks/useCurrentViewId.js';
-import { useLikeC4Model } from '../../../likec4model/useLikeC4Model.js';
+import { useCurrentViewId } from '../../hooks/useCurrentViewId.js';
+import { useDiagram } from '../../hooks/useDiagram.js';
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { useNormalizedSearch } from '../hooks.js';
 import { emptyBoX, buttonsva, focusable } from './_shared.css.js';
-import { useNormalizedSearch, useCloseSearchAndNavigateTo } from './state.js';
 import { moveFocusToSearchInput, centerY } from './utils.js';
 import { viewButton } from './ViewsColumn.css.js';
 
 const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
-function ViewsColumn() {
-  const search = useNormalizedSearch();
-  let views = [...useLikeC4Model(true).views()];
+const ViewsColumn = memo(() => {
+  let views = [...useLikeC4Model().views()];
+  let search = useNormalizedSearch();
   if (search) {
     if (search.startsWith("kind:")) {
       views = [];
@@ -39,7 +40,7 @@ function ViewsColumn() {
         if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
           const maxY = e.target.getBoundingClientRect().y;
           const elementButtons = [...document.querySelectorAll(
-            `[data-likec4-search-elements] .likec4-element-button`
+            `[data-likec4-search-elements] .likec4-focusable`
           )];
           let elementButton = elementButtons.length > 1 ? elementButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1) : null;
           elementButton ??= first(elementButtons);
@@ -74,10 +75,10 @@ function ViewsColumn() {
       ]
     }
   );
-}
+});
 const btn = buttonsva();
 function ViewButton({ className, view, loop = false, search, ...props }) {
-  const navigateTo = useCloseSearchAndNavigateTo();
+  const diagram = useDiagram();
   const currentViewId = useCurrentViewId();
   const isCurrentView = view.id === currentViewId;
   return /* @__PURE__ */ jsxs(
@@ -89,7 +90,7 @@ function ViewButton({ className, view, loop = false, search, ...props }) {
       ...isCurrentView && { "data-disabled": true },
       onClick: (e) => {
         e.stopPropagation();
-        navigateTo(view.id);
+        diagram.navigateTo(view.id);
       },
       onKeyDown: createScopedKeydownHandler({
         siblingSelector: "[data-likec4-view]",
@@ -100,12 +101,12 @@ function ViewButton({ className, view, loop = false, search, ...props }) {
         onKeyDown: (e) => {
           if (e.nativeEvent.code === "Space") {
             e.stopPropagation();
-            navigateTo(view.id);
+            diagram.navigateTo(view.id);
           }
         }
       }),
       children: [
-        /* @__PURE__ */ jsx(ThemeIcon, { variant: "transparent", className: btn.icon, children: isDeploymentView(view) ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 }) }),
+        /* @__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" }),

package/dist/search/components/_shared.css.d.ts

@@ -0,0 +1,4 @@
+import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '@likec4/styles/types';
+export declare const focusable = "likec4-focusable";
+export declare const emptyBoX: string;
+export declare const buttonsva: SlotRecipeRuntimeFn<"root" | "title" | "description" | "icon" | "descriptionColor", SlotRecipeVariantRecord<"root" | "title" | "description" | "icon" | "descriptionColor">>;