@likec4/diagram 1.59.4 → 1.61.0

package/dist/search/components/PickView.mjs

@@ -0,0 +1,119 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconX from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { useSearchContext } from "../SearchContext.mjs";
+import { pickview, pickviewBackdrop, pickviewGroup } from "./styles.css.mjs";
+import { ViewButton } from "./ViewsColum.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ActionIcon, FocusTrap, Group, ScrollAreaAutosize, Stack, Title } from "@mantine/core";
+import { useCallbackRef, useWindowEvent } from "@mantine/hooks";
+import * as m from "motion/react-m";
+
+// src/search/components/PickView.tsx
+function PickView({ elementFqn }) {
+	const ctx = useSearchContext();
+	const currentViewId = ctx.currentViewId ?? "";
+	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 = () => {
+		ctx.closePickView();
+	};
+	useWindowEvent("keydown", useCallbackRef((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__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsxs(m.div, {
+		initial: {
+			opacity: 0,
+			scale: .95,
+			originY: 0,
+			translateX: "-50%",
+			translateY: -20
+		},
+		animate: {
+			opacity: 1,
+			scale: 1,
+			translateY: 0
+		},
+		exit: {
+			opacity: 0,
+			scale: .98,
+			translateY: -20,
+			transition: { duration: .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__ */ jsxs(ScrollAreaAutosize, {
+			mah: "calc(100vh - 110px)",
+			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,
+					currentViewId,
+					search: "",
+					loop: true,
+					focusOnElement: elementFqn,
+					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,
+					currentViewId,
+					search: "",
+					loop: true,
+					focusOnElement: elementFqn,
+					mod: { autofocus: i === 0 && scoped.length === 0 }
+				}, view.id))]
+			})]
+		})]
+	}, "pickview") })] });
+}
+
+export { PickView };

package/dist/search/components/SearchByTags.mjs

@@ -0,0 +1,80 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconX from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs";
+import { ElementTag } from "../../base-primitives/element/ElementTags.mjs";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { useNormalizedSearch, useUpdateSearch } from "../hooks.mjs";
+import { focusToFirstFoundElement, moveFocusToSearchInput } from "./utils.mjs";
+import { css } from "@likec4/styles/css";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@mantine/core";
+import { HStack } from "@likec4/styles/jsx";
+
+// src/search/components/SearchByTags.tsx
+function SearchByTags() {
+	const ref = useRef(null);
+	let tags = useLikeC4Model().tagsSortedByUsage;
+	let setSearch = useUpdateSearch();
+	let search = useNormalizedSearch();
+	let countBefore = tags.length;
+	let isFiltered = false;
+	if (search.startsWith("#")) {
+		const searchTag = search.slice(1);
+		tags = tags.filter(({ tag }) => tag.toLocaleLowerCase().includes(searchTag));
+		isFiltered = tags.length !== countBefore;
+	}
+	if (tags.length === 0) return null;
+	tags = tags.slice(0, 15);
+	return /* @__PURE__ */ jsxs(HStack, {
+		ref,
+		css: {
+			gap: "md",
+			paddingLeft: "[48px]",
+			flexWrap: "nowrap"
+		},
+		children: [/* @__PURE__ */ jsx(HStack, {
+			css: {
+				gap: "1.5",
+				flexWrap: "wrap",
+				opacity: isFiltered ? "1" : "0.3",
+				grayscale: isFiltered ? 0 : .9,
+				filter: "auto",
+				transition: "fast",
+				_groupHover: {
+					opacity: "1",
+					grayscale: 0
+				},
+				_groupFocusWithin: {
+					opacity: "1",
+					grayscale: 0
+				}
+			},
+			children: tags.map(({ tag }) => /* @__PURE__ */ jsx(ElementTag, {
+				tag,
+				className: css({
+					userSelect: "none",
+					cursor: "pointer"
+				}),
+				onClick: (e) => {
+					e.stopPropagation();
+					setSearch(`#${tag}`);
+					setTimeout(() => {
+						focusToFirstFoundElement(ref.current);
+					}, 350);
+				}
+			}, tag))
+		}), isFiltered && /* @__PURE__ */ jsx(Button, {
+			size: "compact-xs",
+			variant: "light",
+			onClick: (e) => {
+				e.stopPropagation();
+				setSearch("");
+				moveFocusToSearchInput(ref.current);
+			},
+			rightSection: /* @__PURE__ */ jsx(IconX, { size: 14 }),
+			children: "Clear"
+		})]
+	});
+}
+
+export { SearchByTags };

package/dist/search/components/SearchInput.mjs

@@ -0,0 +1,192 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import IconSearch from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.mjs";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { useSearchContext } from "../SearchContext.mjs";
+import { input } from "./styles.css.mjs";
+import { focusToFirstFoundElement, moveFocusToSearchInput, stopAndPrevent } from "./utils.mjs";
+import { memo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { keys } from "remeda";
+import { Combobox, ComboboxDropdown, ComboboxEmpty, ComboboxOption, ComboboxOptions, ComboboxTarget, Input, ScrollAreaAutosize, Text, rem, useCombobox } from "@mantine/core";
+import { useFocusWithin, useMergedRef, useWindowEvent } from "@mantine/hooks";
+
+// src/search/components/SearchInput.tsx
+function startingWithKind(search) {
+	return search.match(/^(k|ki|kin|kind|kind:)$/) != null;
+}
+const SEARCH_PREFIXES = ["#", "kind:"];
+const LikeC4SearchInput = memo(() => {
+	const searchCtx = useSearchContext();
+	const likec4model = useLikeC4Model();
+	const inputRef = useRef(null);
+	const { ref, focused } = useFocusWithin();
+	const { searchValue: search, setSearchValue: setSearch } = searchCtx;
+	const combobox = useCombobox({
+		scrollBehavior: "smooth",
+		loop: false
+	});
+	useWindowEvent("keydown", (event) => {
+		try {
+			if (!focused && (event.key === "Backspace" || event.key.startsWith("Arrow") || event.key.match(/^\p{L}$/u))) moveFocusToSearchInput(inputRef.current);
+		} catch (e) {
+			console.warn(e);
+		}
+	});
+	let options = [];
+	let isExactMatch = false;
+	switch (true) {
+		case search.startsWith("#"): {
+			const searchTag = search.toLocaleLowerCase().slice(1);
+			const alloptions = likec4model.tags.filter((tag) => tag.toLocaleLowerCase().includes(searchTag));
+			if (alloptions.length === 0) {
+				isExactMatch = false;
+				options = [/* @__PURE__ */ jsx(ComboboxEmpty, { children: "No tags found" }, "empty-tags")];
+			} else {
+				isExactMatch = alloptions.some((tag) => tag.toLocaleLowerCase() === searchTag);
+				options = alloptions.map((tag) => /* @__PURE__ */ jsxs(ComboboxOption, {
+					value: `#${tag}`,
+					children: [/* @__PURE__ */ jsx(Text, {
+						component: "span",
+						opacity: .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.specification.elements);
+			if (term) alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term));
+			if (alloptions.length === 0) {
+				isExactMatch = false;
+				options = [/* @__PURE__ */ jsx(ComboboxEmpty, { children: "No kinds found" }, "empty-kinds")];
+			} else {
+				isExactMatch = alloptions.some((kind) => kind.toLocaleLowerCase() === term);
+				options = alloptions.map((kind) => /* @__PURE__ */ jsxs(ComboboxOption, {
+					value: `kind:${kind}`,
+					children: [/* @__PURE__ */ jsx(Text, {
+						component: "span",
+						opacity: .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(() => {
+					focusToFirstFoundElement(inputRef.current);
+				}, 350);
+			}
+		},
+		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: useMergedRef(inputRef, ref),
+			placeholder: "Search by title, description or start with # or kind:",
+			autoFocus: true,
+			"data-autofocus": true,
+			"data-likec4-search-input": true,
+			tabIndex: 0,
+			classNames: { input },
+			size: "lg",
+			value: search,
+			leftSection: /* @__PURE__ */ jsx(IconSearch, {
+				style: { width: rem(20) },
+				stroke: 2
+			}),
+			rightSection: /* @__PURE__ */ jsx(Input.ClearButton, { onClick: (e) => {
+				e.stopPropagation();
+				if (search === "" || search === searchCtx.openedWithSearch) searchCtx.close();
+				else setSearch("");
+			} }),
+			rightSectionPointerEvents: "auto",
+			onChange: (event) => {
+				setSearch(event.currentTarget.value);
+				combobox.openDropdown();
+				combobox.updateSelectedOptionIndex();
+			},
+			onClick: () => combobox.openDropdown(),
+			onFocus: () => combobox.openDropdown(),
+			onBlur: () => combobox.closeDropdown(),
+			onKeyDownCapture: (e) => {
+				if (e.key === "Tab") {
+					switch (true) {
+						case combobox.getSelectedOptionIndex() >= 0:
+							combobox.clickSelectedOption();
+							return stopAndPrevent(e);
+						case options.length === 1:
+							if (combobox.selectFirstOption()) 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 === "ArrowUp" && combobox.dropdownOpened && search === "" && combobox.getSelectedOptionIndex() === 0) {
+					combobox.closeDropdown();
+					stopAndPrevent(e);
+					return;
+				}
+				if (e.key === "ArrowDown" && (!combobox.dropdownOpened || options.length === 0 || isExactMatch || search === "" && combobox.getSelectedOptionIndex() === options.length - 1)) {
+					combobox.closeDropdown();
+					stopAndPrevent(e);
+					focusToFirstFoundElement(inputRef.current);
+					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/search/components/ViewsColum.mjs

@@ -0,0 +1,161 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { EmptyBox } from "../../components/EmptyBox.mjs";
+import { ViewIcon } from "../../components/ViewIcon.mjs";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { useNormalizedSearch } from "../hooks.mjs";
+import { METADATA_SEARCH_PREFIX } from "../metadata-search.mjs";
+import { useSearchContext } from "../SearchContext.mjs";
+import { buttonsva, focusable } from "./_shared.css.mjs";
+import { centerY, createViewSearch, moveFocusToSearchInput, queryAllFocusable, viewTitleWithFolder } from "./utils.mjs";
+import { viewButton } from "./ViewsColumn.css.mjs";
+import { cx } from "@likec4/styles/css";
+import { memo, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { first } from "remeda";
+import { Badge, Group, Highlight, ThemeIcon, UnstyledButton, VisuallyHidden, createScopedKeydownHandler } from "@mantine/core";
+import { m } from "motion/react";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { vstack } from "@likec4/styles/patterns";
+
+// src/search/components/ViewsColum.tsx
+const NothingFound = () => /* @__PURE__ */ jsx(EmptyBox, {
+	fullsize: true,
+	as: m.div,
+	children: "Nothing found"
+});
+const useFoundViews = () => {
+	const { currentViewId } = useSearchContext();
+	const likec4model = useLikeC4Model();
+	const search = useNormalizedSearch();
+	const allViews = useMemo(() => [...likec4model.views()], [likec4model]);
+	const fuzzy = useMemo(() => createViewSearch(allViews), [allViews]);
+	return useMemo(() => {
+		let views = allViews;
+		if (search) {
+			if (search.startsWith("kind:") || search.startsWith("meta:")) views = [];
+			else if (search.startsWith("#")) {
+				const searchTag = search.slice(1);
+				views = views.filter((view) => view.tags.some((tag) => tag.toLocaleLowerCase().includes(searchTag)));
+			} else views = fuzzy(search);
+		}
+		return [
+			views,
+			search,
+			currentViewId
+		];
+	}, [
+		allViews,
+		fuzzy,
+		search,
+		currentViewId
+	]);
+};
+const ViewsColumn = memo(() => {
+	const ref = useRef(null);
+	const [views, search, currentViewId] = useFoundViews();
+	if (views.length === 0) return /* @__PURE__ */ jsx(NothingFound, {}, "nothing-found");
+	return /* @__PURE__ */ jsxs(m.div, {
+		ref,
+		layout: true,
+		className: vstack({ gap: "2" }),
+		"data-likec4-search-views": true,
+		onKeyDown: (e) => {
+			if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+				const maxY = e.target.getBoundingClientRect().y;
+				const elementButtons = queryAllFocusable(ref.current, "elements", ".likec4-element-button");
+				let elementButton = elementButtons.length > 1 ? elementButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1) : null;
+				elementButton ??= first(elementButtons);
+				if (elementButton) {
+					e.stopPropagation();
+					elementButton.focus();
+				}
+				return;
+			}
+		},
+		children: [views.length > 0 && /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(UnstyledButton, {
+			"data-likec4-view": true,
+			tabIndex: -1,
+			onFocus: (e) => {
+				e.stopPropagation();
+				moveFocusToSearchInput(ref.current);
+			}
+		}) }), views.map((view, i) => /* @__PURE__ */ jsx(m.div, {
+			layout: "position",
+			children: /* @__PURE__ */ jsx(ViewButton, {
+				view,
+				currentViewId: currentViewId ?? "",
+				search,
+				tabIndex: i === 0 ? 0 : -1
+			})
+		}, `@view${view.id}`))]
+	}, "views-column");
+});
+const btn = buttonsva();
+function ViewButton({ className, view, loop = false, search, focusOnElement, currentViewId, ...props }) {
+	const ctx = useSearchContext();
+	const nextViewId = view.id;
+	const isCurrentView = nextViewId === currentViewId;
+	const label = viewTitleWithFolder(view);
+	const navigate = () => {
+		ctx.navigateTo(nextViewId, focusOnElement);
+	};
+	return /* @__PURE__ */ jsxs(UnstyledButton, {
+		...props,
+		className: cx(btn.root, "group", focusable, viewButton, className),
+		"data-likec4-view": view.id,
+		...isCurrentView && !focusOnElement && { "data-disabled": true },
+		onClick: (e) => {
+			e.stopPropagation();
+			navigate();
+		},
+		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();
+					navigate();
+				}
+			}
+		}),
+		children: [/* @__PURE__ */ jsx(ThemeIcon, {
+			variant: "transparent",
+			className: btn.icon,
+			children: /* @__PURE__ */ jsx(ViewIcon, {
+				type: view._type,
+				size: 16
+			})
+		}), /* @__PURE__ */ jsxs(Box$1, {
+			style: { flexGrow: 1 },
+			children: [/* @__PURE__ */ jsxs(Group, {
+				gap: "xs",
+				wrap: "nowrap",
+				align: "center",
+				children: [/* @__PURE__ */ jsx(Highlight, {
+					component: "div",
+					highlight: search,
+					className: btn.title,
+					lineClamp: 2,
+					title: label,
+					children: label
+				}), isCurrentView && /* @__PURE__ */ jsx(Badge, {
+					size: "xs",
+					fz: 9,
+					radius: "sm",
+					children: "current"
+				})]
+			}), /* @__PURE__ */ jsx(Highlight, {
+				highlight: view.description.nonEmpty ? search : "",
+				component: "div",
+				className: btn.description,
+				lineClamp: 1,
+				children: view.description.text || "No description"
+			})]
+		})]
+	});
+}
+
+export { NothingFound, ViewButton, ViewsColumn };

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

@@ -0,0 +1,18 @@
+import { focusable } from "./_shared.css.mjs";
+import { css, cx } from "@likec4/styles/css";
+
+// src/search/components/ViewsColumn.css.ts
+const _viewBtn = "likec4-view-btn";
+const viewButton = cx(css({
+	flexWrap: "nowrap",
+	display: "flex",
+	"&[data-disabled] .mantine-ThemeIcon-root": { opacity: "0.45" }
+}), _viewBtn);
+const viewButtonDescription = css({
+	marginTop: "1",
+	fontSize: "sm",
+	lineHeight: "md",
+	[`:where(.likec4-view-btn[data-disabled]) &`]: { opacity: "0.85" }
+});
+
+export { viewButton };

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

@@ -0,0 +1,122 @@
+import { css, sva } from "@likec4/styles/css";
+import { emptyBox } from "@likec4/styles/recipes";
+
+// src/search/components/_shared.css.ts
+const buttonFocused = css.raw({
+	outline: "none",
+	background: "likec4.accent.8",
+	borderColor: "likec4.accent.9"
+});
+const _treenodefocus = ".mantine-Tree-node:focus > .mantine-Tree-label &";
+const button = css.raw({
+	display: "flex",
+	width: "100%",
+	background: "surface.default",
+	rounded: "sm",
+	padding: `[12px 8px 12px 14px]`,
+	minHeight: "[60px]",
+	gap: "2",
+	border: `default`,
+	_hover: {
+		...buttonFocused,
+		borderColor: "likec4.accent.9",
+		background: `likec4.accent.8/60`
+	},
+	_focus: buttonFocused,
+	[_treenodefocus]: buttonFocused,
+	_dark: {
+		borderColor: "transparent",
+		background: `mantine.dark[6]/80`
+	},
+	_light: {
+		background: `white/80`,
+		_hover: {
+			borderColor: "likec4.accent.6",
+			backgroundColor: "likec4.accent.5"
+		}
+	}
+});
+const focusable = "likec4-focusable";
+const iconSize = { ref: "24px" };
+const icon = css.raw({
+	color: {
+		base: "text.dimmed",
+		_groupHover: "likec4.accent.0",
+		_groupFocus: "likec4.accent.0"
+	},
+	[_treenodefocus]: { color: "likec4.accent.0" },
+	flex: `[0 0 ${iconSize.ref}]`,
+	boxSize: `[${iconSize.ref}]`,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	alignSelf: "flex-start",
+	["--ti-size"]: iconSize.ref,
+	[`& svg, & img`]: {
+		width: "100%",
+		height: "auto",
+		maxHeight: "100%",
+		pointerEvents: "none"
+	},
+	[`& img`]: { objectFit: "contain" },
+	"&.likec4-shape-icon svg": { strokeWidth: "[1.5]" }
+});
+const title = css.raw({
+	fontSize: "lg",
+	fontWeight: "medium",
+	lineHeight: "snug",
+	[`:where([data-disabled]) &`]: { opacity: "[0.4]" },
+	color: {
+		base: "mantine.dark[1]",
+		_light: "mantine.gray[7]",
+		_groupHover: {
+			base: "likec4.accent.1",
+			_light: "white"
+		},
+		_groupFocus: {
+			base: "likec4.accent.1",
+			_light: "white"
+		}
+	},
+	[_treenodefocus]: { color: {
+		base: "likec4.accent.1",
+		_light: "white"
+	} }
+});
+const descriptionColor = css.raw({
+	color: {
+		base: "text.dimmed",
+		_groupHover: {
+			base: "likec4.accent.1",
+			_light: "likec4.accent.0"
+		},
+		_groupFocus: "likec4.accent.0"
+	},
+	[_treenodefocus]: { color: "likec4.accent.0" }
+});
+const description = css.raw(descriptionColor, {
+	marginTop: "1",
+	fontSize: "sm",
+	lineHeight: "sm",
+	[`:where([data-disabled]) &`]: { opacity: "[0.85]" }
+});
+const emptyBoX = emptyBox({ fullsize: true });
+const buttonsva = sva({
+	slots: [
+		"root",
+		"icon",
+		"title",
+		"description",
+		"descriptionColor"
+	],
+	className: "search-button",
+	base: {
+		root: button,
+		icon,
+		title,
+		description,
+		descriptionColor
+	}
+});
+
+export { buttonsva, focusable };