@likec4/diagram 1.59.2 → 1.59.4

package/dist/overlays/relationships-browser/custom/ElementActions.js

@@ -16,45 +16,46 @@ var ElementActions = (props) => {
 	const browser = useRelationshipsBrowser();
 	const subject = useRelationshipsBrowserState(selectSubject);
 	const { navigateTo, fqn } = props.data;
+	const buttons = useMemo(() => {
+		const buttons = [];
+		if (navigateTo && enableNavigateTo && currentViewId !== navigateTo) buttons.push({
+			key: "navigate",
+			icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.navigateTo(navigateTo);
+			}
+		});
+		if (fqn !== subject) buttons.push({
+			key: "relationships",
+			icon: /* @__PURE__ */ jsx(IconTransform, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				browser.navigateTo(fqn, props.id);
+			}
+		});
+		if (enableVscode) buttons.push({
+			key: "goToSource",
+			icon: /* @__PURE__ */ jsx(IconFileSymlink, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.openSource({ element: fqn });
+			}
+		});
+		return buttons;
+	}, [
+		navigateTo,
+		enableNavigateTo,
+		currentViewId,
+		fqn,
+		subject,
+		enableVscode,
+		diagram,
+		browser,
+		props.id
+	]);
 	return /* @__PURE__ */ jsx(ElementActionButtons, {
-		buttons: useMemo(() => {
-			const buttons = [];
-			if (navigateTo && enableNavigateTo && currentViewId !== navigateTo) buttons.push({
-				key: "navigate",
-				icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
-				onClick: (e) => {
-					e.stopPropagation();
-					diagram.navigateTo(navigateTo);
-				}
-			});
-			if (fqn !== subject) buttons.push({
-				key: "relationships",
-				icon: /* @__PURE__ */ jsx(IconTransform, {}),
-				onClick: (e) => {
-					e.stopPropagation();
-					browser.navigateTo(fqn, props.id);
-				}
-			});
-			if (enableVscode) buttons.push({
-				key: "goToSource",
-				icon: /* @__PURE__ */ jsx(IconFileSymlink, {}),
-				onClick: (e) => {
-					e.stopPropagation();
-					diagram.openSource({ element: fqn });
-				}
-			});
-			return buttons;
-		}, [
-			navigateTo,
-			enableNavigateTo,
-			currentViewId,
-			fqn,
-			subject,
-			enableVscode,
-			diagram,
-			browser,
-			props.id
-		]),
+		buttons,
 		...props
 	});
 };

package/dist/overlays/relationships-browser/custom/EmptyNode.js

@@ -1,24 +1,22 @@
 import "../../../_virtual/_rolldown/runtime.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Text } from "@mantine/core";
-import { Box as Box$1 } from "@likec4/styles/jsx";
+import { Box, Txt } from "@likec4/styles/jsx";
 //#region src/overlays/relationships-browser/custom/EmptyNode.tsx
 function EmptyNode({ data: { column } }) {
-	return /* @__PURE__ */ jsx(Box$1, {
+	return /* @__PURE__ */ jsx(Box, {
 		css: {
 			width: "100%",
 			height: "100%",
-			border: `3px dashed`,
-			borderColor: `default.border`,
+			border: `[3px dashed {colors.border.default}]`,
 			borderRadius: "md",
 			display: "flex",
 			justifyContent: "center",
 			alignItems: "center"
 		},
-		children: /* @__PURE__ */ jsxs(Text, {
-			c: "dimmed",
-			fz: "lg",
-			fw: 500,
+		children: /* @__PURE__ */ jsxs(Txt, {
+			textStyle: "dimmed",
+			fontSize: "lg",
+			medium: true,
 			children: ["No ", column === "incomers" ? "incoming" : "outgoing"]
 		})
 	});

package/dist/overlays/relationships-browser/hooks.js

@@ -9,7 +9,8 @@ function useRelationshipsBrowserActor() {
 	return nonNullable(useContext(RelationshipsBrowserActorContext), "No RelationshipsBrowserActorContext");
 }
 function useRelationshipsBrowserState(selector, compare = shallowEqual) {
-	return useSelector(useRelationshipsBrowserActor(), selector, compare);
+	const actor = useRelationshipsBrowserActor();
+	return useSelector(actor, selector, compare);
 }
 function useRelationshipsBrowser() {
 	const actor = useRelationshipsBrowserActor();

package/dist/projects-overview/ProjectsOverview.js

@@ -36,16 +36,17 @@ function ProjectsOverview({ view, onNavigateToProject, fitViewPadding = {
 		};
 	}, [actorRef]);
 	const bounds = view.bounds;
+	const initialRef = useRef({
+		initialNodes: [],
+		initialEdges: [],
+		initialWidth: bounds.width,
+		initialHeight: bounds.height,
+		fitView: false
+	});
 	return /* @__PURE__ */ jsx(ProjectsOverviewActorContextProvider, {
 		value: actorRef,
 		children: /* @__PURE__ */ jsxs(ReactFlowProvider, {
-			...useRef({
-				initialNodes: [],
-				initialEdges: [],
-				initialWidth: bounds.width,
-				initialHeight: bounds.height,
-				fitView: false
-			}).current,
+			...initialRef.current,
 			children: [/* @__PURE__ */ jsx(LayoutGroup, {
 				id: actorRef.sessionId,
 				inherit: false,

package/dist/projects-overview/actor.js

@@ -1,6 +1,6 @@
 import "../_virtual/_rolldown/runtime.js";
-import { Base } from "../base/Base.js";
 import { MinZoom } from "../base/const.js";
+import { Base } from "../base/Base.js";
 import { layoutedProjectsViewToXYFlow } from "./layouted-to-xyflow.js";
 import { ProjectsOverviewViewportPersistence } from "./persistence.js";
 import { applyEdgeChanges, applyNodeChanges, getViewportForBounds } from "@xyflow/react";

package/dist/projects-overview/hooks.js

@@ -5,7 +5,8 @@ import { shallowEqual } from "fast-equals";
 import { useSelector } from "@xstate/react";
 //#region src/projects-overview/hooks.ts
 function useProjectsOverviewState(selector, compare = shallowEqual) {
-	return useSelector(useProjectsOverviewActor(), selector, compare);
+	const actor = useProjectsOverviewActor();
+	return useSelector(actor, selector, compare);
 }
 function useProjectsOverviewXYStoreApi() {
 	return useStoreApi();

package/dist/search/Search.js

@@ -80,7 +80,7 @@ var Search = memo(({ searchActorRef }) => {
 	]]);
 	return /* @__PURE__ */ jsx(AnimatePresence, {
 		onExitComplete: () => {
-			diagram.searchActor().send({ type: "animation.presence.end" });
+			searchActorRef.send({ type: "animation.presence.end" });
 		},
 		children: isOpened && /* @__PURE__ */ jsx(Overlay, {
 			fullscreen: true,
@@ -90,7 +90,7 @@ var Search = memo(({ searchActorRef }) => {
 				dialog: dialogCss,
 				body: bodyCss
 			},
-			openDelay: 0,
+			openDelay: 100,
 			onClose: close,
 			"data-likec4-search": "true",
 			children: /* @__PURE__ */ jsx(XStateSearchAdapter, {
@@ -127,7 +127,7 @@ var SearchPanelContent = forwardRef((_, ref) => {
 					moveFocusToSearchInput(contentRef.current);
 				},
 				children: /* @__PURE__ */ jsxs(VStack, {
-					flex: 1,
+					flex: "1",
 					px: "sm",
 					children: [/* @__PURE__ */ jsx(LikeC4SearchInput, {}), /* @__PURE__ */ jsx(SearchByTags, {})]
 				})
@@ -138,7 +138,7 @@ var SearchPanelContent = forwardRef((_, ref) => {
 					component: "div",
 					order: 6,
 					c: "dimmed",
-					pl: "sm",
+					pl: "md",
 					children: "Elements"
 				})
 			}), /* @__PURE__ */ jsx(GridCol, {
@@ -168,8 +168,7 @@ var SearchPanelContent = forwardRef((_, ref) => {
 						children: /* @__PURE__ */ jsx(LayoutGroup, {
 							id: "likec4-search-elements",
 							children: /* @__PURE__ */ jsx(AnimatePresence, {
-								mode: "popLayout",
-								anchorY: "top",
+								initial: false,
 								children: /* @__PURE__ */ jsx(ElementsColumn, {})
 							})
 						})
@@ -183,7 +182,10 @@ var SearchPanelContent = forwardRef((_, ref) => {
 						scrollbars: "y",
 						children: /* @__PURE__ */ jsx(LayoutGroup, {
 							id: "likec4-search-views",
-							children: /* @__PURE__ */ jsx(ViewsColumn, {})
+							children: /* @__PURE__ */ jsx(AnimatePresence, {
+								initial: false,
+								children: /* @__PURE__ */ jsx(ViewsColumn, {})
+							})
 						})
 					})
 				})]

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

@@ -9,6 +9,7 @@ var treeNode = css({
 });
 var treeRoot = css(container.raw({ containerName: "likec4-tree" }), {
 	containerType: "inline-size",
+	px: "4",
 	height: "100%"
 });
 var treeLabel = css({
@@ -25,8 +26,8 @@ var elementTitleAndId = css({ [whenContainerIsNarrow]: {
 	gap: "0.5"
 } });
 var elementId = css({
-	fontSize: "10px",
-	lineHeight: "1.3",
+	fontSize: "xxs",
+	lineHeight: "sm",
 	display: "block",
 	fontWeight: "medium",
 	whiteSpace: "nowrap",
@@ -40,11 +41,11 @@ var elementIcon = css({
 	[whenContainerIsNarrow]: { ["--likec4-icon-size"]: "18px" }
 });
 var elementViewsCount = css({
-	flex: 0,
-	fontSize: "10px",
+	flex: "[0]",
+	fontSize: "xxs",
 	fontWeight: "medium",
 	whiteSpace: "nowrap",
-	lineHeight: "1.1",
+	lineHeight: "[1.1]",
 	[whenContainerIsNarrow]: { display: "none" }
 });
 //#endregion

package/dist/search/components/ElementsColumn.js

@@ -167,11 +167,12 @@ function ElementTreeNode({ node, elementProps, expanded, handleClick, searchTerm
 	});
 	const key = `@tree.${node.value}`;
 	return /* @__PURE__ */ jsxs(m.div, {
+		layout: "position",
 		layoutId: key,
 		...elementProps,
 		children: [/* @__PURE__ */ jsx(ActionIcon, {
 			variant: "transparent",
-			size: 16,
+			size: 20,
 			tabIndex: -1,
 			className: cx(elementExpandIcon),
 			style: { visibility: node.hasChildren ? "visible" : "hidden" },
@@ -179,8 +180,7 @@ function ElementTreeNode({ node, elementProps, expanded, handleClick, searchTerm
 				stroke: 3.5,
 				style: {
 					transition: "transform 150ms ease",
-					transform: `rotate(${expanded ? "90deg" : "0"})`,
-					width: "100%"
+					transform: `rotate(${expanded ? "90deg" : "0"})`
 				}
 			})
 		}), /* @__PURE__ */ jsxs(UnstyledButton, {
@@ -208,6 +208,7 @@ function ElementTreeNode({ node, elementProps, expanded, handleClick, searchTerm
 							component: "div",
 							highlight: searchTerms,
 							className: btn.title,
+							lineClamp: 1,
 							children: label
 						}), /* @__PURE__ */ jsx(Tooltip, {
 							label: element.id,

package/dist/search/components/SearchByTags.js

@@ -35,16 +35,16 @@ function SearchByTags() {
 			css: {
 				gap: "1.5",
 				flexWrap: "wrap",
-				opacity: isFiltered ? 1 : .3,
+				opacity: isFiltered ? "1" : "0.3",
 				grayscale: isFiltered ? 0 : .9,
 				filter: "auto",
 				transition: "fast",
 				_groupHover: {
-					opacity: 1,
+					opacity: "1",
 					grayscale: 0
 				},
 				_groupFocusWithin: {
-					opacity: 1,
+					opacity: "1",
 					grayscale: 0
 				}
 			},

package/dist/search/components/ViewsColum.js

@@ -1,22 +1,25 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
+import { EmptyBox } from "../../components/EmptyBox.js";
+import { ViewIcon } from "../../components/ViewIcon.js";
 import { useSearchContext } from "../SearchContext.js";
 import { useNormalizedSearch } from "../hooks.js";
-import { buttonsva, emptyBoX, focusable } from "./_shared.css.js";
+import { buttonsva, focusable } from "./_shared.css.js";
 import { centerY, moveFocusToSearchInput, queryAllFocusable } from "./utils.js";
 import { viewButton } from "./ViewsColumn.css.js";
 import { cx } from "@likec4/styles/css";
-import { IconStack2, IconZoomScan } from "@tabler/icons-react";
 import { memo, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { first } from "remeda";
-import { Badge, Group, Highlight, Stack, ThemeIcon, UnstyledButton, VisuallyHidden, createScopedKeydownHandler } from "@mantine/core";
-import { Box as Box$1 } from "@likec4/styles/jsx";
+import { Badge, Group, Highlight, ThemeIcon, UnstyledButton, VisuallyHidden, createScopedKeydownHandler } from "@mantine/core";
+import { m } from "motion/react";
 import { preferSummary } from "@likec4/core/types";
-import * as m from "motion/react-m";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { vstack } from "@likec4/styles/patterns";
 //#region src/search/components/ViewsColum.tsx
-var NothingFound = () => /* @__PURE__ */ jsx(Box$1, {
-	className: emptyBoX,
+var NothingFound = () => /* @__PURE__ */ jsx(EmptyBox, {
+	fullsize: true,
+	as: m.div,
 	children: "Nothing found"
 });
 var useFoundViews = () => {
@@ -25,14 +28,16 @@ var useFoundViews = () => {
 	const search = useNormalizedSearch();
 	return useMemo(() => {
 		let views = [...likec4model.views()];
-		if (search) if (search.startsWith("kind:")) views = [];
-		else {
-			const searchTag = search.startsWith("#") ? search.slice(1) : null;
-			views = views.filter((view) => {
-				if (searchTag) return view.tags.some((tag) => tag.toLocaleLowerCase().includes(searchTag));
-				const desc = preferSummary(view.$view)?.md || " ";
-				return `${view.id} ${view.title} ${desc}`.toLocaleLowerCase().includes(search);
-			});
+		if (search) {
+			if (search.startsWith("kind:")) views = [];
+			else {
+				const searchTag = search.startsWith("#") ? search.slice(1) : null;
+				views = views.filter((view) => {
+					if (searchTag) return view.tags.some((tag) => tag.toLocaleLowerCase().includes(searchTag));
+					const desc = preferSummary(view.$view)?.md || " ";
+					return `${view.id} ${view.title} ${desc}`.toLocaleLowerCase().includes(search);
+				});
+			}
 		}
 		return [
 			views,
@@ -48,13 +53,11 @@ var useFoundViews = () => {
 var ViewsColumn = memo(() => {
 	const ref = useRef(null);
 	const [views, search, currentViewId] = useFoundViews();
-	return /* @__PURE__ */ jsxs(Stack, {
+	if (views.length === 0) return /* @__PURE__ */ jsx(NothingFound, {}, "nothing-found");
+	return /* @__PURE__ */ jsxs(m.div, {
 		ref,
-		renderRoot: (props) => /* @__PURE__ */ jsx(m.div, {
-			layout: true,
-			...props
-		}),
-		gap: 8,
+		layout: true,
+		className: vstack({ gap: "2" }),
 		"data-likec4-search-views": true,
 		onKeyDown: (e) => {
 			if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
@@ -69,27 +72,23 @@ var ViewsColumn = memo(() => {
 				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(ref.current);
-				}
-			}) }),
-			views.map((view, i) => /* @__PURE__ */ jsx(m.div, {
-				layoutId: `@view${view.id}`,
-				children: /* @__PURE__ */ jsx(ViewButton, {
-					view,
-					currentViewId: currentViewId ?? "",
-					search,
-					tabIndex: i === 0 ? 0 : -1
-				})
-			}, view.id))
-		]
-	});
+		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");
 });
 var btn = buttonsva();
 function ViewButton({ className, view, loop = false, search, focusOnElement, currentViewId, ...props }) {
@@ -124,7 +123,10 @@ function ViewButton({ className, view, loop = false, search, focusOnElement, cur
 		children: [/* @__PURE__ */ jsx(ThemeIcon, {
 			variant: "transparent",
 			className: btn.icon,
-			children: view.isDeploymentView() ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 })
+			children: /* @__PURE__ */ jsx(ViewIcon, {
+				type: view._type,
+				size: 16
+			})
 		}), /* @__PURE__ */ jsxs(Box$1, {
 			style: { flexGrow: 1 },
 			children: [/* @__PURE__ */ jsxs(Group, {
@@ -135,6 +137,7 @@ function ViewButton({ className, view, loop = false, search, focusOnElement, cur
 					component: "div",
 					highlight: search,
 					className: btn.title,
+					lineClamp: 1,
 					children: view.titleOrUntitled
 				}), isCurrentView && /* @__PURE__ */ jsx(Badge, {
 					size: "xs",

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

@@ -3,13 +3,13 @@ import { css, cx } from "@likec4/styles/css";
 var viewButton = cx(css({
 	flexWrap: "nowrap",
 	display: "flex",
-	"&[data-disabled] .mantine-ThemeIcon-root": { opacity: .45 }
+	"&[data-disabled] .mantine-ThemeIcon-root": { opacity: "0.45" }
 }), "likec4-view-btn");
 css({
 	marginTop: "1",
-	fontSize: "13px",
-	lineHeight: "1.4",
-	[`:where(.likec4-view-btn[data-disabled]) &`]: { opacity: .85 }
+	fontSize: "sm",
+	lineHeight: "md",
+	[`:where(.likec4-view-btn[data-disabled]) &`]: { opacity: "0.85" }
 });
 //#endregion
 export { viewButton };

package/dist/search/components/_shared.css.d.ts

@@ -1,4 +1,4 @@
-import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '../../../styled-system/types';
+import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '@likec4/styles/types';
 export declare const focusable = "likec4-focusable";
 export declare const emptyBoX: string;
-export declare const buttonsva: SlotRecipeRuntimeFn<"title" | "description" | "icon" | "root" | "descriptionColor", SlotRecipeVariantRecord<"title" | "description" | "icon" | "root" | "descriptionColor">>;
+export declare const buttonsva: SlotRecipeRuntimeFn<"icon" | "title" | "description" | "root" | "descriptionColor", SlotRecipeVariantRecord<"icon" | "title" | "description" | "root" | "descriptionColor">>;

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

@@ -1,9 +1,10 @@
 import { css, sva } from "@likec4/styles/css";
+import { emptyBox } from "@likec4/styles/recipes";
 //#region src/search/components/_shared.css.ts
 var buttonFocused = css.raw({
 	outline: "none",
-	background: "mantine.primary[8]",
-	borderColor: "mantine.primary[9]"
+	background: "likec4.accent.8",
+	borderColor: "likec4.accent.9"
 });
 var _treenodefocus = ".mantine-Tree-node:focus > .mantine-Tree-label &";
 var button = css.raw({
@@ -12,14 +13,13 @@ var button = css.raw({
 	background: "surface.default",
 	rounded: "sm",
 	padding: `[12px 8px 12px 14px]`,
-	minHeight: "60px",
+	minHeight: "[60px]",
 	gap: "2",
-	border: `1px solid`,
-	borderColor: "default.border",
+	border: `default`,
 	_hover: {
 		...buttonFocused,
-		borderColor: "mantine.primary[9]",
-		background: `mantine.primary[8]/60`
+		borderColor: "likec4.accent.9",
+		background: `likec4.accent.8/60`
 	},
 	_focus: buttonFocused,
 	[_treenodefocus]: buttonFocused,
@@ -28,26 +28,24 @@ var button = css.raw({
 		background: `mantine.dark[6]/80`
 	},
 	_light: {
-		background: `mantine.white/80`,
+		background: `white/80`,
 		_hover: {
-			borderColor: "mantine.primary[6]",
-			backgroundColor: "mantine.primary[5]"
+			borderColor: "likec4.accent.6",
+			backgroundColor: "likec4.accent.5"
 		}
 	}
 });
 var focusable = "likec4-focusable";
-var iconSize = { ref: "var(--likec4-icon-size, 24px)" };
+var iconSize = { ref: "24px" };
 var icon = css.raw({
 	color: {
 		base: "text.dimmed",
-		_light: "mantine.gray[5]",
-		_groupHover: "mantine.primary[0]",
-		_groupFocus: "mantine.primary[0]"
+		_groupHover: "likec4.accent.0",
+		_groupFocus: "likec4.accent.0"
 	},
-	[_treenodefocus]: { color: "mantine.primary[0]" },
-	flex: `0 0 ${iconSize.ref}`,
-	height: iconSize.ref,
-	width: iconSize.ref,
+	[_treenodefocus]: { color: "likec4.accent.0" },
+	flex: `[0 0 ${iconSize.ref}]`,
+	boxSize: `[${iconSize.ref}]`,
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "center",
@@ -63,24 +61,24 @@ var icon = css.raw({
 	"&.likec4-shape-icon svg": { strokeWidth: "[1.5]" }
 });
 var title = css.raw({
-	fontSize: "16px",
+	fontSize: "lg",
 	fontWeight: "medium",
-	lineHeight: "1.1",
-	[`:where([data-disabled]) &`]: { opacity: .4 },
+	lineHeight: "snug",
+	[`:where([data-disabled]) &`]: { opacity: "[0.4]" },
 	color: {
 		base: "mantine.dark[1]",
 		_light: "mantine.gray[7]",
 		_groupHover: {
-			base: "mantine.primary[1]",
+			base: "likec4.accent.1",
 			_light: "white"
 		},
 		_groupFocus: {
-			base: "mantine.primary[1]",
+			base: "likec4.accent.1",
 			_light: "white"
 		}
 	},
 	[_treenodefocus]: { color: {
-		base: "mantine.primary[1]",
+		base: "likec4.accent.1",
 		_light: "white"
 	} }
 });
@@ -88,33 +86,20 @@ var descriptionColor = css.raw({
 	color: {
 		base: "text.dimmed",
 		_groupHover: {
-			base: "mantine.primary[1]",
-			_light: "mantine.primary[0]"
+			base: "likec4.accent.1",
+			_light: "likec4.accent.0"
 		},
-		_groupFocus: "mantine.primary[0]"
+		_groupFocus: "likec4.accent.0"
 	},
-	[_treenodefocus]: { color: "mantine.primary[0]" }
+	[_treenodefocus]: { color: "likec4.accent.0" }
 });
 var description = css.raw(descriptionColor, {
 	marginTop: "1",
-	fontSize: "12px",
-	lineHeight: "1.4",
-	[`:where([data-disabled]) &`]: { opacity: .85 }
-});
-var emptyBoX = css({
-	width: "100%",
-	height: "100%",
-	border: `2px dashed`,
-	borderColor: "default.border",
-	rounded: "md",
-	display: "flex",
-	justifyContent: "center",
-	alignItems: "center",
-	fontSize: "md",
-	color: "text.dimmed",
-	padding: "md",
-	paddingBlock: "xl"
+	fontSize: "sm",
+	lineHeight: "sm",
+	[`:where([data-disabled]) &`]: { opacity: "[0.85]" }
 });
+emptyBox({ fullsize: true });
 var buttonsva = sva({
 	slots: [
 		"root",
@@ -133,4 +118,4 @@ var buttonsva = sva({
 	}
 });
 //#endregion
-export { buttonsva, emptyBoX, focusable };
+export { buttonsva, focusable };

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

@@ -21,7 +21,7 @@ var pickviewBackdrop = css({
 	width: "100%",
 	height: "100%",
 	backgroundColor: "[rgb(34 34 34 / 0.7)]",
-	zIndex: 902,
+	zIndex: "[902]",
 	backdropFilter: "auto",
 	backdropBlur: "10px",
 	_light: { backgroundColor: "[rgb(255 255 255 / 0.6)]" }
@@ -31,10 +31,10 @@ var pickview = css({
 	top: "[2rem]",
 	left: "[50%]",
 	width: "100%",
-	maxWidth: "600px",
-	minWidth: "200px",
+	maxWidth: "[600px]",
+	minWidth: "[200px]",
 	transform: "translateX(-50%)",
-	zIndex: 903
+	zIndex: "[903]"
 });
 var pickviewGroup = css({
 	marginTop: "2",

package/dist/search/hooks.js

@@ -3,7 +3,8 @@ import { useSearchContext } from "./SearchContext.js";
 import { useCallback, useDeferredValue } from "react";
 //#region src/search/hooks.ts
 function useNormalizedSearch() {
-	return useDeferredValue(useSearchContext().normalizedSearch);
+	const ctx = useSearchContext();
+	return useDeferredValue(ctx.normalizedSearch);
 }
 function useUpdateSearch() {
 	const { setSearchValue } = useSearchContext();