@likec4/diagram 1.31.0 → 1.32.0

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,36 +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 { 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) {
@@ -41,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 = [
@@ -69,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;
@@ -96,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",
@@ -116,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();
@@ -174,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;
               }
             }
@@ -188,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/{likec4diagram/ui/search → search/components}/_shared.css.js

@@ -6,20 +6,6 @@ const buttonFocused = css.raw({
   borderColor: "mantine.colors.primary[9]"
 });
 const _treenodefocus = ".mantine-Tree-node:focus > .mantine-Tree-label &";
-function colors(color, hover) {
-  return {
-    color,
-    _groupHover: {
-      color: hover
-    },
-    _groupFocus: {
-      color: hover
-    },
-    [_treenodefocus]: {
-      color: hover
-    }
-  };
-}
 const button = css.raw({
   display: "flex",
   width: "100%",
@@ -27,7 +13,7 @@ const button = css.raw({
   rounded: "sm",
   padding: `12px 8px 12px 14px`,
   minHeight: "60px",
-  gap: "8",
+  gap: 8,
   // alignItems: 'flex-start',
   // transition: `all 50ms ${easings.inOut}`,
   border: `1px solid`,
@@ -65,9 +51,14 @@ const iconSize = {
   ref: "var(--likec4-icon-size, 24px)"
 };
 const icon = css.raw({
-  ...colors("mantine.colors.dimmed", "mantine.colors.primary[0]"),
-  _light: {
-    ...colors("mantine.colors.gray[6]", "mantine.colors.primary[3]")
+  color: {
+    base: "mantine.colors.dimmed",
+    _light: "mantine.colors.gray[5]",
+    _groupHover: "mantine.colors.primary[0]",
+    _groupFocus: "mantine.colors.primary[0]"
+  },
+  [_treenodefocus]: {
+    color: "mantine.colors.primary[0]"
   },
   flex: `0 0 ${iconSize.ref}`,
   height: iconSize.ref,
@@ -102,23 +93,23 @@ const title = css.raw({
   [`:where([data-disabled]) &`]: {
     opacity: 0.4
   },
-  // color: 'mantine.colors.dark[1]',
-  // _groupHover: {
-  //   color: 'mantine.colors.primary[1]',
-  // },
-  // _groupFocus: {
-  //   color: 'mantine.colors.primary[1]',
-  // },
-  ...colors("mantine.colors.dark[1]", "mantine.colors.primary[1]"),
-  _light: {
-    ...colors("mantine.colors.gray[6]", "mantine.colors.primary[3]")
-    // color: `mantine.colors.gray[6]`,
-    // _groupHover: {
-    //   color: 'mantine.colors.primary[3]',
-    // },
-    // _groupFocus: {
-    //   color: 'mantine.colors.primary[3]',
-    // },
+  color: {
+    base: "mantine.colors.dark[1]",
+    _light: "mantine.colors.gray[7]",
+    _groupHover: {
+      base: "mantine.colors.primary[1]",
+      _light: "mantine.colors.white"
+    },
+    _groupFocus: {
+      base: "mantine.colors.primary[1]",
+      _light: "mantine.colors.white"
+    }
+  },
+  [_treenodefocus]: {
+    color: {
+      base: "mantine.colors.primary[1]",
+      _light: "mantine.colors.white"
+    }
   }
 });
 const descriptionColor = css.raw({

package/dist/{likec4diagram/ui/search/LikeC4Search.css.d.ts → search/components/styles.css.d.ts}

@@ -1,6 +1,4 @@
 export { focusable } from './_shared.css';
-export declare const backdrop: string;
-export declare const root: string;
 export declare const input: string;
 export declare const pickviewBackdrop: string;
 export declare const pickview: string;

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

@@ -0,0 +1,60 @@
+import { css } from '@likec4/styles/css';
+
+const input = css({
+  border: "transparent",
+  background: {
+    base: "transparent",
+    _focusWithin: {
+      base: `mantine.colors.gray[4]/55 !important`,
+      _dark: `mantine.colors.dark[5]/55 !important`
+    },
+    _groupHover: {
+      base: "mantine.colors.gray[3]/35",
+      _dark: "mantine.colors.dark[5]/35"
+    }
+  }
+});
+const pickviewBackdrop = css({
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  backgroundColor: "[rgb(34 34 34 / 0.7)]",
+  zIndex: 902,
+  backdropFilter: "auto",
+  backdropBlur: "10px",
+  _light: {
+    backgroundColor: "[rgb(255 255 255 / 0.6)]"
+  }
+});
+const pickview = css({
+  position: "absolute",
+  top: "2rem",
+  left: "50%",
+  width: "100%",
+  maxWidth: "600px",
+  minWidth: "200px",
+  transform: "translateX(-50%)",
+  zIndex: 903
+});
+const pickviewGroup = css({
+  marginTop: "8px",
+  "& + &": {
+    marginTop: "32px"
+  }
+});
+css({
+  height: [
+    "100%",
+    "100cqh"
+  ],
+  "& .mantine-ScrollArea-viewport": {
+    minHeight: "100%",
+    "& > div": {
+      minHeight: "100%",
+      height: "100%"
+    }
+  }
+});
+
+export { input, pickview, pickviewBackdrop, pickviewGroup };

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

@@ -1,3 +1,4 @@
 export declare function stopAndPrevent(e: React.KeyboardEvent | KeyboardEvent): void;
 export declare function centerY(element: HTMLElement): number;
 export declare function moveFocusToSearchInput(): void;
+export declare function focusToFirstFoundElement(): void;