@likec4/diagram 1.59.4 → 1.61.0

package/dist/search/Search.d.mts

@@ -0,0 +1,9 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import "./searchActor.mjs";
+export declare const dialogCss: string;
+export declare const bodyCss: string;
+/**
+ * The shared search panel content used by both diagram and overview search.
+ * Must be rendered inside a SearchContext.Provider.
+ */
+export declare const SearchPanelContent: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLDivElement>>;

package/dist/search/Search.mjs

@@ -0,0 +1,202 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { PortalToContainer } from "../components/PortalToContainer.mjs";
+import { useDiagram } from "../hooks/safeContext.mjs";
+import { Overlay } from "../overlays/overlay/Overlay.mjs";
+import { ElementsColumn } from "./components/ElementsColumn.mjs";
+import { PickView } from "./components/PickView.mjs";
+import { SearchByTags } from "./components/SearchByTags.mjs";
+import { LikeC4SearchInput } from "./components/SearchInput.mjs";
+import { focusToFirstFoundElement, moveFocusToSearchInput } from "./components/utils.mjs";
+import { ViewsColumn } from "./components/ViewsColum.mjs";
+import { useSearchContext } from "./SearchContext.mjs";
+import { XStateSearchAdapter } from "./XStateSearchAdapter.mjs";
+import { css } from "@likec4/styles/css";
+import { forwardRef, memo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTimeoutEffect } from "@react-hookz/web";
+import { isTruthy } from "remeda";
+import { Grid, GridCol, Group, ScrollArea, Title } from "@mantine/core";
+import { AnimatePresence, LayoutGroup } from "motion/react";
+import { useSelector } from "@xstate/react";
+import { useHotkeys, useMergedRef } from "@mantine/hooks";
+import { Box as Box$1, VStack } from "@likec4/styles/jsx";
+
+// src/search/Search.tsx
+const dialogCss = css({
+	backgroundColor: `[rgb(34 34 34 / var(--_opacity, 95%))]`,
+	_light: { backgroundColor: `[rgb(250 250 250 / var(--_opacity, 95%))]` },
+	backdropFilter: "auto",
+	backdropBlur: "var(--_blur, 10px)"
+});
+const bodyCss = css({
+	width: "100%",
+	height: "100%",
+	maxHeight: "100vh",
+	overflow: "hidden",
+	display: "flex",
+	flexDirection: "column",
+	justifyContent: "stretch",
+	gap: "sm",
+	paddingTop: "[20px]",
+	paddingLeft: "md",
+	paddingRight: "md",
+	paddingBottom: "sm",
+	background: "transparent"
+});
+const classes = {
+	dialog: dialogCss,
+	body: bodyCss
+};
+const scrollAreaCss = css({
+	height: ["100%", "100cqh"],
+	"& .mantine-ScrollArea-viewport": {
+		minHeight: "100%",
+		"& > div": {
+			minHeight: "100%",
+			height: "100%"
+		}
+	}
+});
+const selectIsOpened = (s) => {
+	try {
+		return s.status === "active" && (s.value === "opened" || s.value === "pickView");
+	} catch (e) {
+		console.error(e);
+		return false;
+	}
+};
+const Search = memo(({ searchActorRef }) => {
+	const diagram = useDiagram();
+	const isOpened = useSelector(searchActorRef, selectIsOpened);
+	const close = () => {
+		diagram.searchActor().send({ type: "close" });
+	};
+	const open = (event) => {
+		event.stopPropagation();
+		diagram.openSearch();
+	};
+	useHotkeys(isOpened ? [] : [[
+		"mod+k",
+		open,
+		{ preventDefault: true }
+	], [
+		"mod+f",
+		open,
+		{ preventDefault: true }
+	]]);
+	return /* @__PURE__ */ jsx(PortalToContainer, { children: /* @__PURE__ */ jsx(AnimatePresence, {
+		onExitComplete: () => {
+			searchActorRef.send({ type: "animation.presence.end" });
+		},
+		children: isOpened && /* @__PURE__ */ jsx(Overlay, {
+			fullscreen: true,
+			withBackdrop: false,
+			backdrop: { opacity: .9 },
+			classes,
+			openDelay: 100,
+			onClose: close,
+			"data-likec4-search": "true",
+			children: /* @__PURE__ */ jsx(XStateSearchAdapter, {
+				searchActorRef,
+				children: /* @__PURE__ */ jsx(SearchOverlayBody, { searchActorRef })
+			})
+		})
+	}) });
+});
+Search.displayName = "Search";
+function SearchOverlayBody({ searchActorRef }) {
+	const ref = useRef(null);
+	useTimeoutEffect(() => {
+		if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) focusToFirstFoundElement(ref.current);
+	}, 150);
+	return /* @__PURE__ */ jsx(SearchPanelContent, { ref });
+}
+/**
+* The shared search panel content used by both diagram and overview search.
+* Must be rendered inside a SearchContext.Provider.
+*/
+const SearchPanelContent = forwardRef((_, ref) => {
+	const contentRef = useRef(null);
+	const { pickViewFor } = useSearchContext();
+	return /* @__PURE__ */ jsxs(Box$1, {
+		ref: useMergedRef(ref, contentRef),
+		display: "contents",
+		children: [
+			/* @__PURE__ */ jsx(Group, {
+				className: "group",
+				wrap: "nowrap",
+				onClick: (e) => {
+					e.stopPropagation();
+					moveFocusToSearchInput(contentRef.current);
+				},
+				children: /* @__PURE__ */ jsxs(VStack, {
+					flex: "1",
+					px: "sm",
+					children: [/* @__PURE__ */ jsx(LikeC4SearchInput, {}), /* @__PURE__ */ jsx(SearchByTags, {})]
+				})
+			}),
+			/* @__PURE__ */ jsxs(Grid, { children: [/* @__PURE__ */ jsx(GridCol, {
+				span: 6,
+				children: /* @__PURE__ */ jsx(Title, {
+					component: "div",
+					order: 6,
+					c: "dimmed",
+					pl: "md",
+					children: "Elements"
+				})
+			}), /* @__PURE__ */ jsx(GridCol, {
+				span: 6,
+				children: /* @__PURE__ */ jsx(Title, {
+					component: "div",
+					order: 6,
+					c: "dimmed",
+					pl: "sm",
+					children: "Views"
+				})
+			})] }),
+			/* @__PURE__ */ jsxs(Grid, {
+				className: css({
+					containerName: "likec4-search-elements",
+					containerType: "size",
+					overflow: "hidden",
+					flexGrow: 1
+				}),
+				children: [/* @__PURE__ */ jsx(GridCol, {
+					span: 6,
+					children: /* @__PURE__ */ jsx(ScrollArea, {
+						type: "scroll",
+						className: scrollAreaCss,
+						pr: "xs",
+						scrollbars: "y",
+						children: /* @__PURE__ */ jsx(LayoutGroup, {
+							id: "likec4-search-elements",
+							children: /* @__PURE__ */ jsx(AnimatePresence, {
+								initial: false,
+								children: /* @__PURE__ */ jsx(ElementsColumn, {})
+							})
+						})
+					})
+				}), /* @__PURE__ */ jsx(GridCol, {
+					span: 6,
+					children: /* @__PURE__ */ jsx(ScrollArea, {
+						type: "scroll",
+						className: scrollAreaCss,
+						pr: "xs",
+						scrollbars: "y",
+						children: /* @__PURE__ */ jsx(LayoutGroup, {
+							id: "likec4-search-views",
+							children: /* @__PURE__ */ jsx(AnimatePresence, {
+								initial: false,
+								children: /* @__PURE__ */ jsx(ViewsColumn, {})
+							})
+						})
+					})
+				})]
+			}),
+			pickViewFor && /* @__PURE__ */ jsx(PickView, { elementFqn: pickViewFor })
+		]
+	});
+});
+SearchPanelContent.displayName = "SearchPanelContent";
+
+export { Search, SearchPanelContent, bodyCss, dialogCss, scrollAreaCss };

package/dist/search/SearchContext.d.mts

@@ -0,0 +1,21 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { Fqn, ViewId } from "@likec4/core/types";
+export interface SearchContextValue {
+  searchValue: string;
+  setSearchValue: (value: string) => void;
+  normalizedSearch: string;
+  navigateTo: (viewId: ViewId, focusOnElement?: Fqn) => void;
+  openPickView: (elementFqn: Fqn) => void;
+  closePickView: () => void;
+  pickViewFor: Fqn | null;
+  close: () => void;
+  currentViewId: string | null;
+  openedWithSearch: string | null;
+}
+export declare const SearchContext: import("react").Context<SearchContextValue | null>;
+export declare function useSearchContext(): SearchContextValue;
+/**
+ * Normalize a raw search string for comparison.
+ * Extracted as a pure function so both XState and standalone adapters can reuse it.
+ */
+export declare function normalizeSearch(value: string): string;

package/dist/search/SearchContext.mjs

@@ -0,0 +1,22 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { createContext, useContext } from "react";
+
+// src/search/SearchContext.tsx
+const SearchContext = createContext(null);
+function useSearchContext() {
+	const ctx = useContext(SearchContext);
+	if (!ctx) throw new Error("useSearchContext must be used within a SearchContext.Provider");
+	return ctx;
+}
+/**
+* Normalize a raw search string for comparison.
+* Extracted as a pure function so both XState and standalone adapters can reuse it.
+*/
+function normalizeSearch(value) {
+	if (value === "") return value;
+	const v = value.trim().toLowerCase();
+	if (v.startsWith("#") && v.length <= 2) return "";
+	return v.length > 1 ? v : "";
+}
+
+export { SearchContext, normalizeSearch, useSearchContext };

package/dist/search/XStateSearchAdapter.mjs

@@ -0,0 +1,71 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { useCallbackRef } from "../hooks/useCallbackRef.mjs";
+import { useCurrentViewId } from "../hooks/useCurrentView.mjs";
+import { SearchContext, normalizeSearch } from "./SearchContext.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useSelector } from "@xstate/react";
+
+// src/search/XStateSearchAdapter.tsx
+const selectSearchValue = (s) => s.context.searchValue;
+const selectPickViewFor = (s) => s.context.pickViewFor;
+const selectOpenedWithSearch = (s) => s.context.openedWithSearch;
+function XStateSearchAdapter({ searchActorRef, children }) {
+	const searchValue = useSelector(searchActorRef, selectSearchValue);
+	const pickViewFor = useSelector(searchActorRef, selectPickViewFor);
+	const openedWithSearch = useSelector(searchActorRef, selectOpenedWithSearch);
+	const currentViewId = useCurrentViewId();
+	const setSearchValue = useCallbackRef((search) => {
+		searchActorRef.send({
+			type: "change.search",
+			search
+		});
+	});
+	const navigateTo = useCallbackRef((viewId, focusOnElement) => {
+		searchActorRef.send({
+			type: "navigate.to",
+			viewId,
+			focusOnElement
+		});
+	});
+	const openPickView = useCallbackRef((elementFqn) => {
+		searchActorRef.send({
+			type: "pickview.open",
+			elementFqn
+		});
+	});
+	const closePickView = useCallbackRef(() => {
+		searchActorRef.send({ type: "pickview.close" });
+	});
+	const close = useCallbackRef(() => {
+		searchActorRef.send({ type: "close" });
+	});
+	const value = useMemo(() => ({
+		searchValue,
+		setSearchValue,
+		normalizedSearch: normalizeSearch(searchValue),
+		navigateTo,
+		openPickView,
+		closePickView,
+		pickViewFor,
+		close,
+		currentViewId,
+		openedWithSearch
+	}), [
+		searchValue,
+		pickViewFor,
+		currentViewId,
+		openedWithSearch,
+		setSearchValue,
+		navigateTo,
+		openPickView,
+		closePickView,
+		close
+	]);
+	return /* @__PURE__ */ jsx(SearchContext.Provider, {
+		value,
+		children
+	});
+}
+
+export { XStateSearchAdapter };

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

@@ -0,0 +1,53 @@
+import { focusable } from "./_shared.css.mjs";
+import { css } from "@likec4/styles/css";
+import { container } from "@likec4/styles/patterns";
+
+// src/search/components/ElementsColumn.css.ts
+const whenContainerIsNarrow = `@container likec4-tree (max-width: 450px)`;
+const treeNode = css({
+	outline: "none",
+	marginBottom: "2"
+});
+const treeRoot = css(container.raw({ containerName: "likec4-tree" }), {
+	containerType: "inline-size",
+	px: "4",
+	height: "100%"
+});
+const treeLabel = css({
+	display: "flex",
+	alignItems: "baseline",
+	outline: "none !important",
+	gap: "1"
+});
+const treeSubtree = css({ marginTop: "2" });
+const elementExpandIcon = css({ color: "text.dimmed" });
+const elementTitleAndId = css({ [whenContainerIsNarrow]: {
+	flexDirection: "column-reverse",
+	alignItems: "flex-start",
+	gap: "0.5"
+} });
+const elementId = css({
+	fontSize: "xxs",
+	lineHeight: "sm",
+	display: "block",
+	fontWeight: "medium",
+	whiteSpace: "nowrap",
+	padding: "[1px 5px]",
+	borderRadius: "sm",
+	background: `mantine.dark[9]/30`,
+	_light: { background: `mantine.gray[3]/20` }
+});
+const elementIcon = css({
+	["--likec4-icon-size"]: "24px",
+	[whenContainerIsNarrow]: { ["--likec4-icon-size"]: "18px" }
+});
+const elementViewsCount = css({
+	flex: "[0]",
+	fontSize: "xxs",
+	fontWeight: "medium",
+	whiteSpace: "nowrap",
+	lineHeight: "[1.1]",
+	[whenContainerIsNarrow]: { display: "none" }
+});
+
+export { elementExpandIcon, elementIcon, elementId, elementTitleAndId, elementViewsCount, treeLabel, treeNode, treeRoot, treeSubtree };

package/dist/search/components/ElementsColumn.mjs

@@ -0,0 +1,286 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconChevronRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
+import { IconOrShapeRenderer } from "../../context/IconRenderer.mjs";
+import { useCallbackRef } from "../../hooks/useCallbackRef.mjs";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { createFuzzySearch } from "../fuzzy.mjs";
+import { useNormalizedSearch } from "../hooks.mjs";
+import { METADATA_SEARCH_PREFIX, matchesMetadataSearch } from "../metadata-search.mjs";
+import { useSearchContext } from "../SearchContext.mjs";
+import { buttonsva, focusable } from "./_shared.css.mjs";
+import { elementExpandIcon, elementIcon, elementId, elementTitleAndId, elementViewsCount, treeLabel, treeNode, treeRoot, treeSubtree } from "./ElementsColumn.css.mjs";
+import { centerY, moveFocusToSearchInput, queryAllFocusable, stopAndPrevent } from "./utils.mjs";
+import { NothingFound } from "./ViewsColum.mjs";
+import { cx } from "@likec4/styles/css";
+import { memo, useEffect, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { filter, first, hasAtLeast, last, only, pipe, reduce } from "remeda";
+import { ActionIcon, Box, Group, Highlight, Tooltip, Tree, UnstyledButton, useTree } from "@mantine/core";
+import { ifilter, imap, isAncestor, nameFromFqn, stringHash, toArray } from "@likec4/core/utils";
+import { Txt } from "@likec4/styles/jsx";
+import * as m from "motion/react-m";
+
+// src/search/components/ElementsColumn.tsx
+function useElementsColumnData() {
+	const model = useLikeC4Model();
+	const allElements = useMemo(() => pipe(model.elements(), ifilter((i) => !i.imported), imap((element) => ({
+		label: element.title,
+		value: element.id,
+		element,
+		viewsCount: [...element.views()].length,
+		children: [],
+		hasChildren: false
+	})), toArray()), [model]);
+	const fuzzy = useMemo(() => createFuzzySearch(allElements, [
+		{
+			name: "name",
+			getFn: ({ element }) => element.name
+		},
+		{
+			name: "title",
+			getFn: ({ element }) => element.title
+		},
+		{
+			name: "id",
+			getFn: ({ element }) => element.id
+		},
+		{
+			name: "summary",
+			getFn: ({ element }) => element.summary.text ?? ""
+		}
+	]), [allElements]);
+	const search = useNormalizedSearch();
+	return useMemo(() => {
+		const searchTerms = search.split(".");
+		let elements;
+		if (search === "" || search === "kind:") elements = allElements;
+		else if (search.startsWith("kind:")) {
+			const searchKind = search.slice(5);
+			elements = filter(allElements, ({ element }) => {
+				return element.kind.toLocaleLowerCase()[searchKind.length > 4 ? "startsWith" : "includes"](searchKind);
+			});
+		} else if (search.startsWith("#")) {
+			const searchTag = search.slice(1);
+			elements = filter(allElements, ({ element }) => {
+				return element.tags.some((tag) => tag.toLocaleLowerCase().includes(searchTag));
+			});
+		} else if (search.startsWith("meta:")) elements = filter(allElements, ({ element }) => matchesMetadataSearch(element.metadata, search));
+		else if (hasAtLeast(searchTerms, 2)) {
+			const satisfies = (element) => {
+				const fqnParts = element.id.toLocaleLowerCase().split(".");
+				if (fqnParts.length < searchTerms.length) return false;
+				let lastMatchIndex = 0;
+				for (let i = 0; i < fqnParts.length; i++) if (fqnParts[i].includes(searchTerms[lastMatchIndex])) {
+					lastMatchIndex++;
+					if (lastMatchIndex === searchTerms.length) return true;
+					continue;
+				}
+				return false;
+			};
+			elements = filter(allElements, ({ element }) => satisfies(element));
+		} else elements = fuzzy(search);
+		const byid = {};
+		const { hash, all, roots } = pipe(elements, reduce((acc, treeItem) => {
+			treeItem.children = [];
+			treeItem.hasChildren = false;
+			byid[treeItem.value] = treeItem;
+			const parent = acc.all.findLast((root) => isAncestor(root.value, treeItem.value));
+			if (parent) {
+				parent.children.push(treeItem);
+				parent.hasChildren = true;
+			} else acc.roots.push(treeItem);
+			acc.all.push(treeItem);
+			acc.hash = stringHash(acc.hash + treeItem.value);
+			return acc;
+		}, {
+			hash: "empty",
+			all: [],
+			roots: []
+		}));
+		return {
+			hash,
+			all,
+			byid,
+			roots,
+			searchTerms: hasAtLeast(searchTerms, 1) ? searchTerms : [search]
+		};
+	}, [
+		allElements,
+		fuzzy,
+		search
+	]);
+}
+const btn = buttonsva();
+const ElementsColumn = memo(() => {
+	const data = useElementsColumnData();
+	const handleClick = useHandleElementSelection();
+	if (data.all.length === 0) return /* @__PURE__ */ jsx(NothingFound, {});
+	return /* @__PURE__ */ jsx(ElementsTree, {
+		data,
+		handleClick
+	});
+});
+function ElementsTree({ data: { searchTerms, all, byid, hash, roots }, handleClick }) {
+	const tree = useTree({ multiple: false });
+	useEffect(() => {
+		tree.collapseAllNodes();
+		for (const nd of all) if (nd.children.length > 0) tree.expand(nd.value);
+	}, [hash]);
+	const onKeyDownCapture = useCallbackRef((e) => {
+		const target = e.target;
+		const id = target.getAttribute("data-value");
+		const node = !!id && byid[id];
+		if (!node) return;
+		if (e.key === "ArrowUp") {
+			if (id === roots[0]?.value) {
+				stopAndPrevent(e);
+				moveFocusToSearchInput(target);
+			}
+			return;
+		}
+		if (e.key === "ArrowRight") {
+			if (node.children.length > 0 && tree.expandedState[id] !== true) return;
+			const maxY = (e.target.querySelector(".mantine-Tree-label") ?? target).getBoundingClientRect().y;
+			const viewButtons = queryAllFocusable(target, "views");
+			let view = viewButtons.length > 1 ? viewButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1) : null;
+			view ??= first(viewButtons);
+			if (view) {
+				stopAndPrevent(e);
+				view.focus();
+			}
+			return;
+		}
+		if (e.key === " " || e.key === "Enter") {
+			stopAndPrevent(e);
+			handleClick(node.element);
+			return;
+		}
+	});
+	return /* @__PURE__ */ jsx(Tree, {
+		"data-likec4-search-elements": true,
+		allowRangeSelection: false,
+		clearSelectionOnOutsideClick: true,
+		selectOnClick: false,
+		tree,
+		data: roots,
+		levelOffset: "md",
+		classNames: {
+			root: treeRoot,
+			node: cx(focusable, treeNode),
+			label: treeLabel,
+			subtree: treeSubtree
+		},
+		onKeyDownCapture,
+		renderNode: (p) => /* @__PURE__ */ jsx(ElementTreeNode, {
+			...p,
+			searchTerms,
+			handleClick
+		})
+	});
+}
+function ElementTreeNode({ node, elementProps, expanded, handleClick, searchTerms }) {
+	const { label, element, viewsCount } = node;
+	const elementIcon$1 = IconOrShapeRenderer({
+		element: {
+			id: element.id,
+			title: element.title,
+			shape: element.shape,
+			icon: element.icon
+		},
+		className: cx(btn.icon, elementIcon)
+	});
+	const key = `@tree.${node.value}`;
+	return /* @__PURE__ */ jsxs(m.div, {
+		layout: "position",
+		layoutId: key,
+		...elementProps,
+		children: [/* @__PURE__ */ jsx(ActionIcon, {
+			variant: "transparent",
+			size: 20,
+			tabIndex: -1,
+			className: cx(elementExpandIcon),
+			style: { visibility: node.hasChildren ? "visible" : "hidden" },
+			children: /* @__PURE__ */ jsx(IconChevronRight, {
+				stroke: 3.5,
+				style: {
+					transition: "transform 150ms ease",
+					transform: `rotate(${expanded ? "90deg" : "0"})`
+				}
+			})
+		}), /* @__PURE__ */ jsxs(UnstyledButton, {
+			component: m.button,
+			layout: true,
+			tabIndex: -1,
+			"data-value": element.id,
+			className: cx(btn.root, "group", "likec4-element-button"),
+			...viewsCount > 0 && { onClick: (e) => {
+				if (!node.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: btn.title,
+							lineClamp: 1,
+							children: label
+						}), /* @__PURE__ */ jsx(Tooltip, {
+							label: element.id,
+							withinPortal: false,
+							fz: "xs",
+							disabled: !element.id.includes("."),
+							children: /* @__PURE__ */ jsx(Highlight, {
+								component: "div",
+								highlight: last(searchTerms),
+								className: cx(elementId, btn.descriptionColor),
+								children: nameFromFqn(element.id)
+							})
+						})]
+					}), /* @__PURE__ */ jsx(Highlight, {
+						component: "div",
+						highlight: element.summary.nonEmpty ? searchTerms : [],
+						className: btn.description,
+						lineClamp: 1,
+						children: element.summary.nonEmpty ? element.summary.text : "No description"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Txt, {
+					as: "div",
+					className: cx(elementViewsCount, btn.descriptionColor),
+					size: "xs",
+					children: viewsCount === 0 ? "No views" : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						viewsCount,
+						" view",
+						viewsCount > 1 ? "s" : ""
+					] })
+				})
+			]
+		})]
+	});
+}
+function useHandleElementSelection() {
+	const ctx = useSearchContext();
+	return useCallbackRef((element) => {
+		const views = [...element.views()];
+		if (views.length === 0) return;
+		const elementFqn = element.id;
+		const onlyOneViewId = only(views)?.id;
+		if (!onlyOneViewId) {
+			ctx.openPickView(elementFqn);
+			return;
+		}
+		ctx.navigateTo(onlyOneViewId, elementFqn);
+	});
+}
+
+export { ElementsColumn };