@likec4/diagram 1.21.1 → 1.22.0

package/dist/likec4diagram/ui/search/LikeC4Search.js

@@ -0,0 +1,265 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Portal, RemoveScroll, Group, Box, ActionIcon, Grid, GridCol, Title, ScrollArea, ScrollAreaAutosize, Stack } from "@mantine/core";
+import { useDisclosure, useHotkeys, useCallbackRef, useFocusTrap, useFocusWithin, useMergedRef, useWindowEvent, useFocusReturn } from "@mantine/hooks";
+import { IconX } from "@tabler/icons-react";
+import { AnimatePresence, m, LayoutGroup } from "framer-motion";
+import { useRef } from "react";
+import { SearchControl } from "../../../components/SearchControl.js";
+import { ElementsColumn } from "./ElementsColumn.js";
+import { backdrop, root, scrollArea, pickviewBackdrop, pickview, pickviewGroup } from "./LikeC4Search.css.js";
+import { LikeC4SearchInput } from "./SearchInput.js";
+import { LikeC4SearchContext, useCloseSearch, wasResetPickView, usePickView, setPickView } from "./state.js";
+import { stopAndPrevent } from "./utils.js";
+import { ViewsColumn, ViewButton } from "./ViewsColum.js";
+import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
+function LikeC4Search() {
+  const [searchOpened, searchOps] = useDisclosure(false);
+  useHotkeys([
+    ["mod+k", () => searchOps.toggle(), {
+      preventDefault: true
+    }],
+    ["mod+f", () => searchOps.toggle(), {
+      preventDefault: true
+    }]
+  ]);
+  const afterCloseCbRef = useRef(null);
+  const close = useCallbackRef((cb) => {
+    afterCloseCbRef.current = cb ?? null;
+    searchOps.close();
+  });
+  const onExitComplete = useCallbackRef(() => {
+    if (afterCloseCbRef.current) {
+      afterCloseCbRef.current();
+      afterCloseCbRef.current = null;
+    }
+  });
+  const { portalProps } = useMantinePortalProps();
+  return /* @__PURE__ */ jsxs(LikeC4SearchContext, { value: close, children: [
+    /* @__PURE__ */ jsx(
+      SearchControl,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          searchOps.toggle();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(RemoveScroll, { enabled: searchOpened, children: /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete, children: searchOpened && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        m.div,
+        {
+          className: backdrop,
+          initial: { opacity: 0.7 },
+          animate: {
+            opacity: 1,
+            transition: {
+              duration: 0.1
+            }
+          },
+          exit: {
+            opacity: 0,
+            transition: {
+              duration: 0.075
+            }
+          }
+        },
+        "backdrop"
+      ),
+      /* @__PURE__ */ jsx(LikeC4SearchOverlay, {}, "overlay")
+    ] }) }) }) })
+  ] });
+}
+function LikeC4SearchOverlay() {
+  const close = useCloseSearch();
+  const focusTrapRef = useFocusTrap();
+  const { ref: forcusRef, focused } = useFocusWithin();
+  const ref = useMergedRef(forcusRef, focusTrapRef);
+  useWindowEvent(
+    "keydown",
+    (event) => {
+      if (event.key === "Escape") {
+        stopAndPrevent(event);
+        if (!wasResetPickView()) {
+          close();
+        }
+        return;
+      }
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    m.div,
+    {
+      ref,
+      className: root,
+      animate: {
+        opacity: 1,
+        scale: 1,
+        translateY: 0
+      },
+      exit: {
+        opacity: 0,
+        scale: 0.9,
+        transition: {
+          duration: 0.1
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx(Box, { flex: 1, px: "sm", children: /* @__PURE__ */ jsx(LikeC4SearchInput, {}) }),
+          /* @__PURE__ */ jsx(Box, { flex: "0 0 auto", children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              size: "lg",
+              variant: "default",
+              onClick: (e) => {
+                e.stopPropagation();
+                close();
+              },
+              children: /* @__PURE__ */ jsx(IconX, {})
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs(Grid, { children: [
+          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Elements" }) }),
+          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Views" }) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Grid,
+          {
+            style: {
+              containerName: "likec4-search-elements",
+              containerType: "size",
+              overflow: "hidden",
+              flexGrow: 1
+            },
+            children: [
+              /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
+                ScrollArea,
+                {
+                  type: "hover",
+                  className: scrollArea,
+                  pr: "xs",
+                  scrollbars: "y",
+                  children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-elements", children: /* @__PURE__ */ jsx(ElementsColumn, {}) }) })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
+                ScrollArea,
+                {
+                  type: "hover",
+                  className: scrollArea,
+                  pr: "xs",
+                  scrollbars: "y",
+                  children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-views", children: /* @__PURE__ */ jsx(ViewsColumn, {}) }) })
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, {}),
+        /* @__PURE__ */ jsx(PickView, {})
+      ]
+    }
+  );
+}
+function PickView() {
+  const pickview$1 = usePickView();
+  const focusTrapRef = useFocusTrap(!!pickview$1);
+  useFocusReturn({
+    opened: !!pickview$1
+  });
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-pickview", children: pickview$1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      m.div,
+      {
+        className: pickviewBackdrop,
+        onClick: (e) => {
+          e.stopPropagation();
+          setPickView(null);
+        }
+      },
+      "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,
+        ref: focusTrapRef,
+        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();
+                  setPickView(null);
+                },
+                children: /* @__PURE__ */ jsx(IconX, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(ScrollAreaAutosize, { mah: "calc(100vh - 8rem - 50px)", type: "never", children: [
+            pickview$1.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" }),
+              pickview$1.scoped.map((view, i) => /* @__PURE__ */ jsx(
+                ViewButton,
+                {
+                  view,
+                  search: "",
+                  loop: true,
+                  mod: {
+                    autofocus: i === 0
+                  }
+                },
+                view.id
+              ))
+            ] }),
+            pickview$1.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" }),
+              pickview$1.others.map((view, i) => /* @__PURE__ */ jsx(
+                ViewButton,
+                {
+                  view,
+                  search: "",
+                  loop: true,
+                  mod: {
+                    autofocus: i === 0 && pickview$1.scoped.length === 0
+                  }
+                },
+                view.id
+              ))
+            ] })
+          ] })
+        ]
+      },
+      "pickview"
+    )
+  ] }) }) });
+}
+export {
+  LikeC4Search
+};

package/dist/likec4diagram/ui/search/SearchInput.d.ts

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

package/dist/likec4diagram/ui/search/SearchInput.js

@@ -0,0 +1,196 @@
+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 { usePreviousDistinct } from "@react-hookz/web";
+import { IconSearch } from "@tabler/icons-react";
+import "react";
+import { isString, keys, only } from "remeda";
+import { useLikeC4Model } from "../../../likec4model/useLikeC4Model.js";
+import { input, root, focusable } from "./LikeC4Search.css.js";
+import { useIsPickViewActive, useSearch, setSearch } from "./state.js";
+import { moveFocusToSearchInput, stopAndPrevent } from "./utils.js";
+function startingWithKind(search) {
+  return search.match(/^(k|ki|kin|kind|kind:)$/) != null;
+}
+const SEARCH_PREFIXES = ["#", "kind:"];
+function LikeC4SearchInput() {
+  var _a, _b;
+  const isPickViewActive = useIsPickViewActive();
+  const likec4model = useLikeC4Model(true);
+  const combobox = useCombobox({
+    scrollBehavior: "smooth"
+  });
+  const { ref, focused } = useFocusWithin();
+  const search = useSearch();
+  const previous = usePreviousDistinct(search);
+  const isFirstRender = useIsFirstRender();
+  const [isEmptyForSomeTime] = useDebouncedValue(search === "" && !isFirstRender, isString(previous) ? 400 : 1e3);
+  useWindowEvent(
+    "keydown",
+    (event) => {
+      try {
+        if (!focused && !isPickViewActive && (event.key === "Backspace" || event.key.startsWith("Arrow") || event.key.match(new RegExp("^\\p{L}$", "u")))) {
+          moveFocusToSearchInput();
+        }
+      } catch (e) {
+        console.warn(e);
+      }
+    }
+  );
+  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.startsWith("#"): {
+      const searchTag = search.toLocaleLowerCase().slice(1);
+      const alloptions = likec4model.allTags().filter((tag) => tag.toLocaleLowerCase().includes(searchTag)).sort(
+        compareNatural
+      );
+      isExactMatch = ((_a = only(alloptions)) == null ? void 0 : _a.toLocaleLowerCase()) === searchTag;
+      if (alloptions.length === 0) {
+        options = [
+          /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No tags found" }, "empty-tags")
+        ];
+      } else {
+        options = alloptions.map((tag) => /* @__PURE__ */ jsxs(ComboboxOption, { value: `#${tag}`, children: [
+          /* @__PURE__ */ jsx(Text, { component: "span", opacity: 0.5, mr: 1, fz: "sm", children: "#" }),
+          tag
+        ] }, tag));
+      }
+      break;
+    }
+    case search.startsWith("kind:"):
+    case startingWithKind(search): {
+      const term = search.length > 5 ? search.slice(5).toLocaleLowerCase() : "";
+      let alloptions = keys(likec4model.$model.specification.elements);
+      if (term) {
+        alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term));
+        isExactMatch = ((_b = only(alloptions)) == null ? void 0 : _b.toLocaleLowerCase()) === term;
+      }
+      if (alloptions.length === 0) {
+        options = [
+          /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No kinds found" }, "empty-kinds")
+        ];
+      } else {
+        options = alloptions.map((kind) => /* @__PURE__ */ jsxs(ComboboxOption, { value: `kind:${kind}`, children: [
+          /* @__PURE__ */ jsx(Text, { component: "span", opacity: 0.5, mr: 1, fz: "sm", children: "kind:" }),
+          kind
+        ] }, kind));
+      }
+      break;
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    Combobox,
+    {
+      onOptionSubmit: (optionValue) => {
+        setSearch(optionValue);
+        combobox.resetSelectedOption();
+        if (!SEARCH_PREFIXES.includes(optionValue)) {
+          combobox.closeDropdown();
+          setTimeout(() => {
+            var _a2;
+            (_a2 = document.querySelector(`.${root} .${focusable}`)) == null ? void 0 : _a2.focus();
+          }, 50);
+        }
+      },
+      width: "max-content",
+      position: "bottom-start",
+      shadow: "md",
+      offset: {
+        mainAxis: 4,
+        crossAxis: 50
+      },
+      store: combobox,
+      withinPortal: false,
+      children: [
+        /* @__PURE__ */ jsx(ComboboxTarget, { children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref,
+            id: "likec4searchinput",
+            placeholder: "Search by title, description or start with # or kind:",
+            tabIndex: 0,
+            classNames: {
+              input
+            },
+            size: "xl",
+            value: search,
+            leftSection: /* @__PURE__ */ jsx(IconSearch, { style: { width: rem(20) }, stroke: 2 }),
+            onChange: (event) => {
+              setSearch(event.currentTarget.value);
+              combobox.openDropdown();
+              combobox.updateSelectedOptionIndex();
+            },
+            onClick: () => combobox.openDropdown(),
+            onFocus: () => combobox.openDropdown(),
+            onBlur: () => combobox.closeDropdown(),
+            onKeyDownCapture: (e) => {
+              var _a2;
+              if (e.key === "Tab") {
+                switch (true) {
+                  case combobox.getSelectedOptionIndex() >= 0: {
+                    combobox.clickSelectedOption();
+                    return stopAndPrevent(e);
+                  }
+                  case options.length === 1: {
+                    const firstOption = combobox.selectFirstOption();
+                    if (firstOption) {
+                      combobox.clickSelectedOption();
+                    }
+                    return stopAndPrevent(e);
+                  }
+                  case startingWithKind(search): {
+                    setSearch("kind:");
+                    return stopAndPrevent(e);
+                  }
+                }
+                return;
+              }
+              if (e.key === "Backspace" && combobox.dropdownOpened) {
+                if (search === "kind:") {
+                  setSearch("");
+                  combobox.resetSelectedOption();
+                  return stopAndPrevent(e);
+                }
+                if (search.startsWith("kind:") && isExactMatch) {
+                  setSearch("kind:");
+                  combobox.resetSelectedOption();
+                  return stopAndPrevent(e);
+                }
+                if (search.startsWith("#") && isExactMatch) {
+                  setSearch("#");
+                  combobox.resetSelectedOption();
+                  return stopAndPrevent(e);
+                }
+              }
+              if (e.key === "Escape" && combobox.dropdownOpened && options.length > 0) {
+                stopAndPrevent(e);
+                combobox.closeDropdown();
+                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);
+                (_a2 = document.querySelector(`.${root} .${focusable}`)) == null ? void 0 : _a2.focus();
+                return;
+              }
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(ComboboxDropdown, { hidden: options.length === 0, style: { minWidth: 300 }, children: /* @__PURE__ */ jsx(ComboboxOptions, { children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { mah: "min(322px, calc(100cqh - 50px))", type: "scroll", children: options }) }) })
+      ]
+    }
+  );
+}
+export {
+  LikeC4SearchInput
+};

package/dist/likec4diagram/ui/search/ViewsColum.d.ts

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

package/dist/likec4diagram/ui/search/ViewsColum.js

@@ -0,0 +1,130 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isDeploymentView } from "@likec4/core";
+import { Stack, VisuallyHidden, UnstyledButton, Box, createScopedKeydownHandler, ThemeIcon, Group, Highlight, Badge } from "@mantine/core";
+import { IconStack2, IconZoomScan } from "@tabler/icons-react";
+import clsx from "clsx";
+import { m } from "framer-motion";
+import { first } from "remeda";
+import { useLikeC4Model } from "../../../likec4model/useLikeC4Model.js";
+import { emptyBoX } from "./_shared.css.js";
+import { useNormalizedSearch, useCloseSearchAndNavigateTo } from "./state.js";
+import { moveFocusToSearchInput, centerY } from "./utils.js";
+import { viewTitle, viewDescription, focusable, viewButton } from "./ViewsColumn.css.js";
+import { useCurrentViewId } from "../../../hooks/useCurrentViewId.js";
+const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
+function ViewsColumn() {
+  const search = useNormalizedSearch();
+  let views = [...useLikeC4Model(true).views()];
+  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.title ?? "" + view.$view.description ?? "").toLocaleLowerCase().includes(search);
+      });
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      renderRoot: (props) => /* @__PURE__ */ jsx(m.div, { layout: true, ...props }),
+      gap: 8,
+      "data-likec4-search-views": true,
+      onKeyDown: (e) => {
+        if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+          const maxY = e.target.getBoundingClientRect().y;
+          const elementButtons = [...document.querySelectorAll(
+            `[data-likec4-search-elements] .likec4-element-button`
+          )];
+          let elementButton = elementButtons.length > 1 ? elementButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1) : null;
+          elementButton ?? (elementButton = first(elementButtons));
+          if (elementButton) {
+            e.stopPropagation();
+            elementButton.focus();
+          }
+          return;
+        }
+      },
+      children: [
+        views.length === 0 && /* @__PURE__ */ jsx(NothingFound, {}),
+        views.length > 0 && /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
+          UnstyledButton,
+          {
+            "data-likec4-view": true,
+            tabIndex: -1,
+            onFocus: (e) => {
+              e.stopPropagation();
+              moveFocusToSearchInput();
+            }
+          }
+        ) }),
+        views.map((view, i) => /* @__PURE__ */ jsx(m.div, { layoutId: `@view${view.id}`, children: /* @__PURE__ */ jsx(
+          ViewButton,
+          {
+            view,
+            search,
+            tabIndex: i === 0 ? 0 : -1
+          }
+        ) }, view.id))
+      ]
+    }
+  );
+}
+function ViewButton({ className, view, loop = false, search, ...props }) {
+  const navigateTo = useCloseSearchAndNavigateTo();
+  const currentViewId = useCurrentViewId();
+  const isCurrentView = view.id === currentViewId;
+  return /* @__PURE__ */ jsxs(
+    UnstyledButton,
+    {
+      ...props,
+      className: clsx(focusable, viewButton, className),
+      "data-likec4-view": view.id,
+      ...isCurrentView && { "data-disabled": true },
+      onClick: (e) => {
+        e.stopPropagation();
+        navigateTo(view.id);
+      },
+      onKeyDown: createScopedKeydownHandler({
+        siblingSelector: "[data-likec4-view]",
+        parentSelector: "[data-likec4-search-views]",
+        activateOnFocus: false,
+        loop,
+        orientation: "vertical",
+        onKeyDown: (e) => {
+          if (e.nativeEvent.code === "Space") {
+            e.stopPropagation();
+            navigateTo(view.id);
+          }
+        }
+      }),
+      children: [
+        /* @__PURE__ */ jsx(ThemeIcon, { variant: "transparent", children: isDeploymentView(view) ? /* @__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: viewTitle, children: view.title || "untitled" }),
+            isCurrentView && /* @__PURE__ */ jsx(Badge, { size: "xs", fz: 9, radius: "sm", children: "current" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Highlight,
+            {
+              highlight: view.$view.description ? search : "",
+              component: "div",
+              className: viewDescription,
+              lineClamp: 1,
+              children: view.$view.description || "No description"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  NothingFound,
+  ViewButton,
+  ViewsColumn
+};

package/dist/likec4diagram/ui/search/ViewsColumn.css.d.ts

@@ -0,0 +1,5 @@
+export { focusable } from './_shared.css';
+export declare const viewButton: string;
+export declare const viewTitle: string;
+export declare const viewDescription: string;
+export declare const viewButtonDescription: string;

package/dist/likec4diagram/ui/search/ViewsColumn.css.js

@@ -0,0 +1,12 @@
+/* empty css                           */
+/* empty css                               */
+var focusable = "_1cfw8gr4";
+var viewButton = "ia79t50 _1cfw8gr3";
+var viewTitle = "ia79t51 _1cfw8gr5";
+var viewDescription = "ia79t52 _1cfw8gr6";
+export {
+  focusable,
+  viewButton,
+  viewDescription,
+  viewTitle
+};

package/dist/likec4diagram/ui/search/_shared.css.d.ts

@@ -0,0 +1,16 @@
+export declare const titleColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const descriptionColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const iconColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const buttonFocused: {
+    outline: "none";
+    backgroundColor: string;
+    borderColor: string;
+    vars: {
+        [x: string]: string;
+    };
+};
+export declare const button: string;
+export declare const focusable: string;
+export declare const title: string;
+export declare const description: string;
+export declare const emptyBoX: string;

package/dist/likec4diagram/ui/search/_shared.css.js

@@ -0,0 +1,5 @@
+/* empty css                           */
+var emptyBoX = "_1cfw8gr7";
+export {
+  emptyBoX
+};

package/dist/likec4diagram/ui/search/state.d.ts

@@ -0,0 +1,19 @@
+import { Fqn, LikeC4Model, ViewId } from '@likec4/core';
+export declare function setSearch(term: string): void;
+export declare function useSearch(): string;
+export declare function useNormalizedSearch(): string;
+export declare const LikeC4SearchContext: ({ children, value }: {
+    value: (cb?: () => void) => void;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useCloseSearch: () => (cb?: () => void) => void;
+type PickView = {
+    elementFqn: Fqn;
+    scoped: LikeC4Model.View[];
+    others: LikeC4Model.View[];
+};
+export declare function usePickView(): PickView | null;
+export declare function setPickView(data: PickView | null): void;
+export declare function wasResetPickView(): boolean;
+export declare function useIsPickViewActive(): boolean;
+export declare function useCloseSearchAndNavigateTo(): (viewId: ViewId, fromElementFqn?: Fqn) => void;
+export {};