@likec4/diagram 1.21.1 → 1.22.1

package/dist/likec4diagram/ui/controls/Controls.js

@@ -1,18 +1,20 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { Stack, ActionIconGroup, Badge, Loader } from "@mantine/core";
-import { openSpotlight } from "@mantine/spotlight";
-import { IconSearch, IconFileSymlink, IconFocusCentered } from "@tabler/icons-react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Group, Stack, ActionIconGroup, Badge, Loader } from "@mantine/core";
+import { IconMenu2, IconFileSymlink, IconFocusCentered } from "@tabler/icons-react";
 import { clsx } from "clsx";
+import { LayoutGroup } from "framer-motion";
 import { memo } from "react";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { useDiagramSyncLayoutState } from "../../../hooks/useDiagramActor.js";
 import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
-import { Tooltip, ActionIcon } from "./_shared.js";
+import { LikeC4Search } from "../search/LikeC4Search.js";
+import { ActionIcon, Tooltip } from "./_shared.js";
 import { ChangeAutoLayoutButton } from "./ChangeAutoLayoutButton.js";
 import { LayoutDriftNotification } from "./LayoutDriftNotification.js";
 import { ManualLayoutToolsButton } from "./ManualLayoutToolsButton.js";
 import { NavigationButtons } from "./NavigationButtons.js";
-import { actionIconGroup, panel } from "./styles.css.js";
+import { navigationButtons, actionIconGroup, panel } from "./styles.css.js";
+import { ToggleReadonly } from "./ToggleReadonly.js";
 import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
 import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
 import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
@@ -25,72 +27,87 @@ const Controls = memo(() => {
   }));
   const diagram = useDiagram();
   const {
-    onOpenSource
+    onOpenSource,
+    onBurgerMenuClick
   } = useDiagramEventHandlers();
   const {
     enableControls,
     enableSearch,
     enableNavigationButtons,
     enableReadOnly,
-    enableEdgeEditing,
     enableVscode
   } = useEnabledFeatures();
   const notReadOnly = !enableReadOnly;
   const portalProps = useMantinePortalProps();
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    Stack,
+  return /* @__PURE__ */ jsxs(
+    Group,
     {
+      align: "flex-start",
       className: clsx(
         "react-flow__panel",
         panel,
         "likec4-top-left-panel"
       ),
-      align: "flex-start",
-      onClick: stopPropagation,
       gap: "xs",
+      onClick: stopPropagation,
       children: [
-        enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {}),
-        /* @__PURE__ */ jsxs(ActionIconGroup, { className: actionIconGroup, orientation: "vertical", children: [
-          enableControls && enableSearch && /* @__PURE__ */ jsx(Tooltip, { label: "Search (Ctrl+F or ⌘+F)", ...portalProps, children: /* @__PURE__ */ jsx(
-            ActionIcon,
+        /* @__PURE__ */ jsxs(Stack, { align: "flex-start", gap: "xs", children: [
+          /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
+            Group,
             {
-              onClick: (e) => {
-                e.stopPropagation();
-                openSpotlight();
-              },
-              children: /* @__PURE__ */ jsx(IconSearch, {})
+              className: clsx(navigationButtons, "likec4-navigation-webview"),
+              gap: "xs",
+              children: [
+                onBurgerMenuClick && /* @__PURE__ */ jsx(
+                  ActionIcon,
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onBurgerMenuClick();
+                    },
+                    children: /* @__PURE__ */ jsx(IconMenu2, {})
+                  }
+                ),
+                enableNavigationButtons && /* @__PURE__ */ jsx(NavigationButtons, {})
+              ]
             }
           ) }),
-          enableVscode && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                onOpenSource == null ? void 0 : onOpenSource({ view: viewId });
-              },
-              children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
-            }
-          ) }),
-          enableControls && hasLayoutDrift && /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps }),
-          enableControls && notReadOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),
-            /* @__PURE__ */ jsx(ManualLayoutToolsButton, { ...portalProps })
-          ] }),
-          enableControls && /* @__PURE__ */ jsx(Tooltip, { label: viewportChanged ? "Center camera" : "Camera is centered", ...portalProps, children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                diagram.fitDiagram();
-              },
-              children: /* @__PURE__ */ jsx(IconFocusCentered, {})
-            }
-          ) })
+          /* @__PURE__ */ jsxs(ActionIconGroup, { className: actionIconGroup, orientation: "vertical", children: [
+            enableVscode && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onOpenSource == null ? void 0 : onOpenSource({ view: viewId });
+                },
+                children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
+              }
+            ) }),
+            enableControls && /* @__PURE__ */ jsx(ToggleReadonly, {}),
+            enableControls && hasLayoutDrift && /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps }),
+            enableControls && notReadOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),
+              /* @__PURE__ */ jsx(ManualLayoutToolsButton, { ...portalProps })
+            ] }),
+            enableControls && /* @__PURE__ */ jsx(Tooltip, { label: viewportChanged ? "Center camera" : "Camera is centered", ...portalProps, children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  diagram.fitDiagram();
+                },
+                children: /* @__PURE__ */ jsx(IconFocusCentered, {})
+              }
+            ) })
+          ] })
         ] }),
-        notReadOnly && /* @__PURE__ */ jsx(SyncLayoutBadge, {})
+        /* @__PURE__ */ jsxs(Group, { children: [
+          enableSearch && /* @__PURE__ */ jsx(LikeC4Search, {}),
+          notReadOnly && /* @__PURE__ */ jsx(SyncLayoutBadge, {})
+        ] })
       ]
     }
-  ) });
+  );
 });
 const SyncLayoutBadge = () => {
   const isPending = useDiagramSyncLayoutState((s) => s.hasTag("pending"));

package/dist/likec4diagram/ui/controls/NavigationButtons.js

@@ -1,16 +1,11 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { IconMenu2, IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
-import { LayoutGroup, AnimatePresence, m } from "framer-motion";
-import { Group } from "@mantine/core";
-import clsx from "clsx";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { AnimatePresence, m } from "framer-motion";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
 import { ActionIcon } from "./_shared.js";
-import { navigationButtons } from "./styles.css.js";
-import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
 const NavigationButtons = () => {
   const diagram = useDiagram();
-  const { onBurgerMenuClick } = useDiagramEventHandlers();
   const {
     hasStepBack,
     hasStepForward
@@ -18,74 +13,54 @@ const NavigationButtons = () => {
     hasStepBack: s.navigationHistory.currentIndex > 0,
     hasStepForward: s.navigationHistory.currentIndex < s.navigationHistory.history.length - 1
   }));
-  return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
-    Group,
-    {
-      className: clsx(navigationButtons, "likec4-navigation-webview"),
-      align: "flex-start",
-      gap: "xs",
-      children: [
-        onBurgerMenuClick && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+    hasStepBack && /* @__PURE__ */ jsx(
+      m.div,
+      {
+        layout: true,
+        initial: { opacity: 0.05, transform: "translateX(-10px)" },
+        animate: { opacity: 1, transform: "translateX(0)" },
+        exit: {
+          opacity: 0.05,
+          transform: "translateX(-10px)"
+        },
+        children: /* @__PURE__ */ jsx(
           ActionIcon,
           {
             onClick: (e) => {
               e.stopPropagation();
-              onBurgerMenuClick();
+              diagram.navigate("back");
             },
-            children: /* @__PURE__ */ jsx(IconMenu2, {})
+            children: /* @__PURE__ */ jsx(IconChevronLeft, {})
           }
-        ),
-        /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-          hasStepBack && /* @__PURE__ */ jsx(
-            m.div,
-            {
-              layout: true,
-              initial: { opacity: 0.05, transform: "translateX(-10px)" },
-              animate: { opacity: 1, transform: "translateX(0)" },
-              exit: {
-                opacity: 0.05,
-                transform: "translateX(-10px)"
-              },
-              children: /* @__PURE__ */ jsx(
-                ActionIcon,
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    diagram.navigate("back");
-                  },
-                  children: /* @__PURE__ */ jsx(IconChevronLeft, {})
-                }
-              )
-            },
-            "back"
-          ),
-          hasStepForward && /* @__PURE__ */ jsx(
-            m.div,
-            {
-              layout: true,
-              initial: { opacity: 0.05, transform: "translateX(10px)" },
-              animate: { opacity: 1, transform: "translateX(0)" },
-              exit: {
-                opacity: 0,
-                transform: "translateX(10px)"
-              },
-              children: /* @__PURE__ */ jsx(
-                ActionIcon,
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    diagram.navigate("forward");
-                  },
-                  children: /* @__PURE__ */ jsx(IconChevronRight, {})
-                }
-              )
+        )
+      },
+      "back"
+    ),
+    hasStepForward && /* @__PURE__ */ jsx(
+      m.div,
+      {
+        layout: true,
+        initial: { opacity: 0.05, transform: "translateX(10px)" },
+        animate: { opacity: 1, transform: "translateX(0)" },
+        exit: {
+          opacity: 0,
+          transform: "translateX(10px)"
+        },
+        children: /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              diagram.navigate("forward");
             },
-            "forward"
-          )
-        ] })
-      ]
-    }
-  ) });
+            children: /* @__PURE__ */ jsx(IconChevronRight, {})
+          }
+        )
+      },
+      "forward"
+    )
+  ] });
 };
 export {
   NavigationButtons

package/dist/likec4diagram/ui/controls/ToggleReadonly.d.ts

@@ -0,0 +1 @@
+export declare const ToggleReadonly: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/likec4diagram/ui/controls/ToggleReadonly.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { IconLock, IconLockOpen2 } from "@tabler/icons-react";
+import { useDiagram } from "../../../hooks/useDiagram.js";
+import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
+import { Tooltip, ActionIcon } from "./_shared.js";
+const selector = (state) => ({
+  visible: state.features.enableReadOnly !== true,
+  isReadOnly: state.toggledFeatures.enableReadOnly ?? state.features.enableReadOnly
+});
+const ToggleReadonly = () => {
+  const { visible, isReadOnly } = useDiagramContext(selector);
+  const diagram = useDiagram();
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { label: isReadOnly ? "Enable editing" : "Disable editing", children: /* @__PURE__ */ jsx(
+    ActionIcon,
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.toggleFeature("ReadOnly");
+      },
+      children: isReadOnly ? /* @__PURE__ */ jsx(IconLock, {}) : /* @__PURE__ */ jsx(IconLockOpen2, {})
+    }
+  ) });
+};
+export {
+  ToggleReadonly
+};

package/dist/likec4diagram/ui/controls/_shared.js

@@ -1,4 +1,4 @@
-import { Tooltip as Tooltip$1, ActionIcon as ActionIcon$1 } from "@mantine/core";
+import { ActionIcon as ActionIcon$1, Tooltip as Tooltip$1 } from "@mantine/core";
 const Tooltip = Tooltip$1.withProps({
   color: "dark",
   fz: "xs",

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js

@@ -4,9 +4,9 @@ import { useLocalStorage } from "@mantine/hooks";
 import { IconMenu } from "@tabler/icons-react";
 import clsx from "clsx";
 import { AnimatePresence, m } from "framer-motion";
+import { Link } from "../../../components/Link.js";
 import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
 import { card, title, description, container } from "./DiagramTitlePanel.css.js";
-import { Link } from "../../../base/Link.js";
 const selector = (s) => ({
   id: s.view.id,
   title: s.view.title ?? "untitled",

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

@@ -0,0 +1,15 @@
+export { focusable } from './_shared.css';
+export declare const treeContainer: string;
+export declare const treeNode: string;
+export declare const treeRoot: string;
+export declare const treeLabel: string;
+export declare const treeSubtree: string;
+export declare const iconSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const elementExpandIcon: string;
+export declare const elementButton: string;
+export declare const elementTitleAndId: string;
+export declare const elementTitle: string;
+export declare const elementId: string;
+export declare const elementDescription: string;
+export declare const elementIcon: string;
+export declare const elementViewsCount: string;

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

@@ -0,0 +1,30 @@
+/* empty css                           */
+/* empty css                                  */
+var focusable = "_1cfw8gr4";
+var treeNode = "basone1";
+var treeRoot = "basone2";
+var treeLabel = "basone3";
+var treeSubtree = "basone4";
+var elementExpandIcon = "basone5";
+var elementButton = "basone6 _1cfw8gr3";
+var elementTitleAndId = "basone7";
+var elementTitle = "basone8 _1cfw8gr5";
+var elementId = "basone9";
+var elementDescription = "basonea _1cfw8gr6";
+var elementIcon = "basoneb";
+var elementViewsCount = "basonec";
+export {
+  elementButton,
+  elementDescription,
+  elementExpandIcon,
+  elementIcon,
+  elementId,
+  elementTitle,
+  elementTitleAndId,
+  elementViewsCount,
+  focusable,
+  treeLabel,
+  treeNode,
+  treeRoot,
+  treeSubtree
+};

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

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

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

@@ -0,0 +1,243 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { ifilter, toArray, sortParentsFirst, isAncestor, nameFromFqn } from "@likec4/core";
+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 { m } from "framer-motion";
+import { useMemo, useEffect } from "react";
+import { isEmpty, pipe, reduce, indexBy, prop, first, only, partition } from "remeda";
+import { IconOrShapeRenderer } from "../../../context/IconRenderer.js";
+import { sortByLabel } from "../../../likec4model/useLikeC4ElementsTree.js";
+import { useLikeC4Model } from "../../../likec4model/useLikeC4Model.js";
+import { treeSubtree, treeLabel, treeRoot, focusable, treeNode, elementExpandIcon, elementTitleAndId, elementTitle, elementId, elementDescription, elementViewsCount, elementButton, elementIcon } from "./ElementsColumn.css.js";
+import { useNormalizedSearch, useCloseSearchAndNavigateTo, setPickView } from "./state.js";
+import { stopAndPrevent, moveFocusToSearchInput, centerY } from "./utils.js";
+import { NothingFound } from "./ViewsColum.js";
+function ElementsColumn() {
+  const search = useNormalizedSearch();
+  const model = useLikeC4Model(true);
+  const {
+    all,
+    byid,
+    roots: data
+  } = useMemo(() => {
+    const searchTerms = search.split(".");
+    let elements;
+    if (isEmpty(search) || search === "kind:") {
+      elements = model.elements();
+    } else {
+      elements = ifilter(model.elements(), (element) => {
+        if (search.startsWith("kind:")) {
+          return element.kind.toLocaleLowerCase().startsWith(search.slice(5));
+        }
+        if (search.startsWith("#")) {
+          return element.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)));
+        }
+        return (element.title + " " + element.id + " " + (element.description ?? "")).toLocaleLowerCase().includes(search);
+      });
+    }
+    const { all: all2, roots } = pipe(
+      elements,
+      toArray(),
+      sortParentsFirst,
+      reduce((acc, element) => {
+        const treeItem = {
+          label: element.title,
+          value: element.id,
+          element,
+          searchTerms,
+          children: []
+        };
+        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);
+        return acc;
+      }, {
+        all: [],
+        roots: []
+      })
+    );
+    return {
+      all: all2,
+      byid: indexBy(all2, prop("value")),
+      roots: roots.sort(sortByLabel)
+    };
+  }, [model, search]);
+  const tree = useTree({
+    multiple: false
+  });
+  useEffect(() => {
+    tree.collapseAllNodes();
+    for (const nd of all) {
+      if (nd.children.length > 0) {
+        tree.expand(nd.value);
+      }
+    }
+  }, [all]);
+  const handleClick = useHandleElementSelection();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    data.length === 0 && /* @__PURE__ */ jsx(NothingFound, {}),
+    /* @__PURE__ */ jsx(
+      Tree,
+      {
+        "data-likec4-search-elements": true,
+        allowRangeSelection: false,
+        clearSelectionOnOutsideClick: true,
+        selectOnClick: false,
+        tree,
+        data,
+        levelOffset: "lg",
+        classNames: {
+          root: treeRoot,
+          node: clsx(focusable, treeNode),
+          label: treeLabel,
+          subtree: treeSubtree
+        },
+        onKeyDownCapture: (e) => {
+          var _a;
+          const target = e.target;
+          const id = target.getAttribute("data-value");
+          const node = !!id && byid[id];
+          if (!node) return;
+          if (e.key === "ArrowUp") {
+            if (id === ((_a = data[0]) == null ? void 0 : _a.value)) {
+              stopAndPrevent(e);
+              moveFocusToSearchInput();
+            }
+            return;
+          }
+          if (e.key === "ArrowRight") {
+            const hasChildren = node.children.length > 0;
+            if (hasChildren && tree.expandedState[id] === false) {
+              return;
+            }
+            const label = e.target.querySelector(".mantine-Tree-label") ?? target;
+            const maxY = label.getBoundingClientRect().y;
+            const viewButtons = [...document.querySelectorAll(
+              `[data-likec4-search-views] .${focusable}`
+            )];
+            let view = viewButtons.length > 1 ? viewButtons.find((el, i, all2) => centerY(el) > maxY || i === all2.length - 1) : null;
+            view ?? (view = first(viewButtons));
+            if (view) {
+              stopAndPrevent(e);
+              view.focus();
+            }
+            return;
+          }
+          if (e.key === " " || e.key === "Enter") {
+            stopAndPrevent(e);
+            handleClick(node.element);
+            return;
+          }
+        },
+        renderNode: ElementTreeNode
+      }
+    )
+  ] });
+}
+function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
+  const { element, searchTerms } = node;
+  const elementIcon$1 = IconOrShapeRenderer({
+    element: {
+      id: element.id,
+      title: element.title,
+      shape: element.shape,
+      icon: element.icon
+    },
+    className: elementIcon
+  });
+  const views = [...element.views()];
+  const handleClick = useHandleElementSelection();
+  const key = `@tree.${node.value}`;
+  return /* @__PURE__ */ jsxs(m.div, { layoutId: key, ...elementProps, children: [
+    /* @__PURE__ */ jsx(
+      ActionIcon,
+      {
+        variant: "transparent",
+        size: 16,
+        tabIndex: -1,
+        className: clsx(elementExpandIcon),
+        style: {
+          visibility: hasChildren ? "visible" : "hidden"
+        },
+        children: /* @__PURE__ */ jsx(
+          IconChevronRight,
+          {
+            stroke: 3.5,
+            style: {
+              transition: "transform 150ms ease",
+              transform: `rotate(${expanded ? "90deg" : "0"})`,
+              width: "100%"
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      UnstyledButton,
+      {
+        component: m.button,
+        layout: true,
+        tabIndex: -1,
+        className: clsx(elementButton, "likec4-element-button"),
+        ...views.length > 0 && {
+          onClick: (e) => {
+            if (!hasChildren || expanded) {
+              e.stopPropagation();
+              handleClick(element);
+            }
+          }
+        },
+        children: [
+          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: elementTitle, children: node.label }),
+              /* @__PURE__ */ jsx(Tooltip, { label: element.id, withinPortal: false, fz: "xs", disabled: !element.id.includes("."), children: /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: elementId, children: nameFromFqn(element.id) }) })
+            ] }),
+            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: elementDescription, lineClamp: 1, children: element.description || "No description" })
+          ] }),
+          /* @__PURE__ */ jsx(Text, { component: "div", className: elementViewsCount, children: views.length === 0 ? "No views" : /* @__PURE__ */ jsxs(Fragment, { children: [
+            views.length,
+            " view",
+            views.length > 1 ? "s" : ""
+          ] }) })
+        ]
+      }
+    )
+  ] }, key);
+}
+function useHandleElementSelection() {
+  const navigateTo = useCloseSearchAndNavigateTo();
+  return useCallbackRef((element) => {
+    const views = [...element.views()];
+    if (views.length === 0) {
+      return;
+    }
+    const singleView = only(views);
+    if (singleView) {
+      navigateTo(singleView.id, element.id);
+      return;
+    }
+    const [scoped, others] = partition(views, (v) => {
+      var _a;
+      return ((_a = v.viewOf) == null ? void 0 : _a.id) === element.id;
+    });
+    setPickView({
+      elementFqn: element.id,
+      scoped,
+      others
+    });
+  });
+}
+export {
+  ElementsColumn
+};

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

@@ -0,0 +1,8 @@
+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;
+export declare const pickviewGroup: string;
+export declare const scrollArea: string;

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

@@ -0,0 +1,20 @@
+/* empty css                           */
+/* empty css                                */
+var focusable = "_1cfw8gr4";
+var backdrop = "eien2d0";
+var root = "eien2d1";
+var input = "eien2d2";
+var pickviewBackdrop = "eien2d3";
+var pickview = "eien2d4";
+var pickviewGroup = "eien2d5";
+var scrollArea = "eien2d6";
+export {
+  backdrop,
+  focusable,
+  input,
+  pickview,
+  pickviewBackdrop,
+  pickviewGroup,
+  root,
+  scrollArea
+};