@likec4/diagram 1.59.3 → 1.59.4

package/dist/overlays/element-details/MetadataValue.js

@@ -27,12 +27,12 @@ function TruncatedValue({ value, isExpanded }) {
 				padding: "xs",
 				userSelect: "all",
 				color: "text",
-				lineHeight: 1.4,
+				lineHeight: "md",
 				whiteSpace: isExpanded ? "pre-wrap" : "nowrap",
 				overflow: isExpanded ? "visible" : "hidden",
 				textOverflow: isExpanded ? "unset" : "ellipsis",
 				wordBreak: isExpanded ? "break-word" : "normal",
-				minWidth: 0,
+				minWidth: "0",
 				width: "100%"
 			}),
 			children: value
@@ -50,16 +50,16 @@ function MultiValueDisplay({ values, isExpanded }) {
 					fontSize: "xs",
 					color: "mantine.gray[5]",
 					fontWeight: "medium",
-					flexShrink: 0,
+					flexShrink: "0",
 					_dark: { color: "mantine.dark[3]" }
 				}),
 				children: "•"
 			}), /* @__PURE__ */ jsx(Box, {
 				className: css({
-					minHeight: "32px",
+					minHeight: "[32px]",
 					display: "flex",
 					alignItems: "center",
-					flex: 1
+					flex: "1"
 				}),
 				children: /* @__PURE__ */ jsx(TruncatedValue, {
 					value,
@@ -70,13 +70,13 @@ function MultiValueDisplay({ values, isExpanded }) {
 	});
 	return /* @__PURE__ */ jsx(Box, {
 		className: css({
-			minHeight: "32px",
+			minHeight: "[32px]",
 			display: "flex",
 			alignItems: "center",
 			padding: "xs",
 			gap: "xs",
 			flexWrap: "wrap",
-			minWidth: 0,
+			minWidth: "0",
 			overflow: "hidden"
 		}),
 		children: values.map((value, index) => /* @__PURE__ */ jsxs(Flex, {
@@ -90,14 +90,15 @@ function MultiValueDisplay({ values, isExpanded }) {
 					backgroundColor: "white",
 					color: "text",
 					borderRadius: "sm",
-					border: "1px solid",
+					borderWidth: "default",
+					borderStyle: "solid",
 					borderColor: "mantine.gray[3]",
 					whiteSpace: "nowrap",
 					overflow: "hidden",
 					textOverflow: "ellipsis",
-					maxWidth: "min(200px, 100%)",
-					minWidth: "60px",
-					flex: "0 1 auto",
+					maxWidth: "[min(200px, 100%)]",
+					minWidth: "[60px]",
+					flex: "[0 1 auto]",
 					userSelect: "all",
 					_dark: {
 						backgroundColor: "mantine.dark[9]",
@@ -111,7 +112,7 @@ function MultiValueDisplay({ values, isExpanded }) {
 					fontSize: "xs",
 					color: "mantine.gray[5]",
 					fontWeight: "medium",
-					flexShrink: 0,
+					flexShrink: "0",
 					_dark: { color: "mantine.dark[3]" }
 				}),
 				children: "•"
@@ -141,13 +142,14 @@ function MetadataValue({ label, value }) {
 			padding: "[4px 8px]",
 			borderRadius: "sm",
 			whiteSpace: "nowrap",
-			transition: "all 150ms ease",
+			transitionProperty: "common",
+			transition: "medium",
 			_hover: {
 				backgroundColor: "mantine.gray[1]",
-				color: "mantine.primary[6]",
+				color: "primary.body",
 				_dark: {
 					backgroundColor: "mantine.dark[7]",
-					color: "mantine.primary[4]"
+					color: "primary.body.hover"
 				}
 			}
 		}),
@@ -203,7 +205,7 @@ function MetadataValue({ label, value }) {
 			isExpanded
 		}) : /* @__PURE__ */ jsx(Box, {
 			className: css({
-				minHeight: "32px",
+				minHeight: "[32px]",
 				display: "flex",
 				alignItems: "center"
 			}),

package/dist/overlays/element-details/TabPanelDeployments.css.js

@@ -10,14 +10,7 @@ var label = css({
 	transition: "fast",
 	color: "mantine.gray[7]",
 	_dark: { color: "mantine.dark[1]" },
-	"& > *": { transition: "fast" },
-	_hover: {
-		transitionTimingFunction: "out",
-		"& > :not([data-no-transform])": {
-			transitionTimingFunction: "out",
-			transform: "translateX(1px)"
-		}
-	}
+	"& > *": { transition: "fast" }
 });
 var nodeLabel = cx(label);
 var instanceLabel = cx(label, css({
@@ -25,18 +18,17 @@ var instanceLabel = cx(label, css({
 	width: "100%",
 	justifyContent: "stretch",
 	flexWrap: "nowrap",
-	height: "36px",
+	height: "[36px]",
 	paddingInlineStart: "[16px]",
 	paddingInlineEnd: "2.5",
 	borderRadius: "sm",
 	alignItems: "center",
-	color: "mantine.gray[7]",
-	_dark: { color: "mantine.gray.lightColor" },
-	_hover: { background: "mantine.gray.lightHover" },
+	color: "text.default",
+	_hover: { background: "surface.hover" },
 	"& .tabler-icon": {
 		transition: "fast",
-		width: "90%",
-		opacity: .65
+		boxSize: "[90%]",
+		opacity: "[0.65]"
 	}
 }));
 //#endregion

package/dist/overlays/element-details/TabPanelRelationships.css.js

@@ -8,7 +8,7 @@ var fqn = css({
 	padding: "[3px 6px]",
 	borderRadius: "xs",
 	background: `var(--likec4-palette-fill)/75`,
-	lineHeight: 1.2,
+	lineHeight: "[1.2]",
 	color: "var(--likec4-palette-hiContrast)"
 });
 var relationshipStat = css({
@@ -24,17 +24,13 @@ var relationshipStat = css({
 	}
 });
 var xyflow = css({
-	flex: "1 1 100%",
+	flex: "[1 1 100%]",
 	position: "relative",
 	width: "100%",
 	height: "100%",
-	background: "body",
+	background: "surface.sunken",
 	border: "default",
-	borderRadius: "sm",
-	_light: {
-		borderColor: "mantine.gray[3]",
-		background: "mantine.gray[1]"
-	}
+	borderRadius: "sm"
 });
 css({
 	_before: {
@@ -46,7 +42,7 @@ css({
 		fontWeight: "medium",
 		lineHeight: "1",
 		color: "text.dimmed",
-		opacity: .85,
+		opacity: "[0.85]",
 		transform: "translateY(-100%) translateY(-2px)"
 	},
 	_light: { "& .mantine-SegmentedControl-root": { background: "mantine.gray[3]" } }
@@ -56,11 +52,11 @@ css({
 	fontSize: "xl",
 	fontWeight: "bold",
 	padding: "[1px 5px]",
-	minWidth: "24px",
+	minWidth: "[24px]",
 	textAlign: "center",
 	borderRadius: "sm",
-	background: "mantine.dark[7]",
-	color: "default.color",
+	background: "surface.sunken",
+	color: "text.default",
 	[`&[data-zero]`]: { color: "text.dimmed" },
 	[`&[data-missing]`]: {
 		color: "mantine.orange[4]",

package/dist/overlays/element-details/TabPanelStructure.css.js

@@ -7,8 +7,8 @@ var treeNodeLabel = css({
 var elementLabel = css({
 	display: "inline-flex",
 	transition: "fast",
-	border: `1px dashed`,
-	borderColor: "default.border",
+	border: "default",
+	borderStyle: "dashed",
 	borderRadius: "sm",
 	px: "md",
 	py: "xs",
@@ -20,12 +20,8 @@ var elementLabel = css({
 	_hover: {
 		transitionTimingFunction: "out",
 		borderStyle: "solid",
-		color: "default.color",
-		background: "default.hover",
-		"& > *": {
-			transitionTimingFunction: "out",
-			transform: "translateX(1px)"
-		}
+		color: "text.default",
+		background: "surface.hover"
 	}
 });
 //#endregion

package/dist/overlays/hooks.d.ts

@@ -9,7 +9,9 @@ export declare const OverlaysActorContext: Provider<OverlaysActorRef>, selectOve
     [key: `elementDetails-${number}`]: import("./types").Overlays.ElementDetails.ActorRef | undefined;
     [key: `relationshipDetails-${number}`]: import("./types").Overlays.RelationshipDetails.ActorRef | undefined;
     [key: `relationshipsBrowser-${number}`]: import("./types").Overlays.RelationshipsBrowser.ActorRef | undefined;
-}, any, never, any, any, any>) => T, compare: (a: T, b: T) => boolean], useSelectOverlaysActor: {
+}, any, never, any, any, any>) => T, compare: (a: T, b: T) => boolean] & {
+    Out: T;
+}, useSelectOverlaysActor: {
     <T>(select: (state: MachineSnapshot<OverlaysContext, OverlayActorEvent, {
         [key: `elementDetails-${number}`]: import("./types").Overlays.ElementDetails.ActorRef | undefined;
         [key: `relationshipDetails-${number}`]: import("./types").Overlays.RelationshipDetails.ActorRef | undefined;

package/dist/overlays/overlay/Overlay.js

@@ -1,7 +1,7 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { stopPropagation } from "../../utils/xyflow.js";
 import { cx } from "@likec4/styles/css";
-import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 import { useTimeoutEffect } from "@react-hookz/web";
 import { RemoveScroll } from "@mantine/core";
@@ -29,6 +29,11 @@ var Overlay = forwardRef(({ onClose, className, classes, overlayLevel = 0, child
 		}
 	};
 	const isPresent = useIsPresent();
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (dialog && !dialog.open) dialog.showModal();
+		if (openDelay === 0) setOpened(true);
+	}, []);
 	useEffect(() => {
 		if (isPresent) return;
 		const dialog = dialogRef.current;
@@ -37,11 +42,6 @@ var Overlay = forwardRef(({ onClose, className, classes, overlayLevel = 0, child
 			if (dialog?.open) dialog.close();
 		};
 	}, [isPresent]);
-	useLayoutEffect(() => {
-		const dialog = dialogRef.current;
-		if (dialog && !dialog.open) dialog.showModal();
-		if (openDelay === 0) setOpened(true);
-	}, []);
 	useTimeoutEffect(() => setOpened(true), openDelay > 0 ? openDelay : void 0);
 	const overlayRecipe = overlay({
 		fullscreen,
@@ -79,7 +79,7 @@ var Overlay = forwardRef(({ onClose, className, classes, overlayLevel = 0, child
 		}
 	}), [overlayLevel, targetBackdropOpacity]);
 	return /* @__PURE__ */ jsx(m.dialog, {
-		ref: useMergedRef(dialogRef, focusTrapRef, ref),
+		ref: useMergedRef(dialogRef, ref),
 		className: cx(classes?.dialog, className, overlayRecipe, fullscreen && RemoveScroll.classNames.fullWidth),
 		layout: true,
 		style: { [cssVarLevel]: overlayLevel },
@@ -103,6 +103,7 @@ var Overlay = forwardRef(({ onClose, className, classes, overlayLevel = 0, child
 		children: /* @__PURE__ */ jsx(RemoveScroll, {
 			forwardProps: true,
 			children: /* @__PURE__ */ jsx("div", {
+				ref: focusTrapRef,
 				className: cx(classes?.body, "likec4-overlay-body"),
 				children: opened && /* @__PURE__ */ jsx(Fragment$1, { children })
 			})

package/dist/overlays/overlaysActor.js

@@ -137,6 +137,10 @@ var openRelationshipsBrowser = () => machine.enqueueActions(({ context, enqueue,
 			subject: event.subject,
 			viewId: event.viewId
 		});
+		enqueue.sendTo(currentOverlay.id, {
+			type: "change.scope",
+			scope: event.viewId ? event.scope : "global"
+		});
 		return;
 	}
 	const id = `relationshipsBrowser-${context.seq}`;

package/dist/overlays/relationship-details/SelectEdge.css.js

@@ -8,7 +8,7 @@ var edgeEnpoint = css.raw({
 		color: "text/90",
 		fontSize: "xs",
 		fontWeight: "medium",
-		lineHeight: "1.2"
+		lineHeight: "xs"
 	}
 });
 var edgeSource = css({
@@ -25,8 +25,9 @@ var edgeLabel = cx(edgeLabelclass, css({
 	display: "grid",
 	gridColumnStart: 1,
 	gridColumnEnd: 4,
-	borderBottom: `1px solid`,
-	borderBottomColor: "default.border",
+	borderBottomWidth: "default",
+	borderBottomStyle: "solid",
+	borderBottomColor: "border.default",
 	marginBottom: "0",
 	padding: "[0 4px 5px 4px]",
 	width: "100%",
@@ -43,28 +44,32 @@ var edgeRow = css({
 		borderBottom: "none",
 		marginBottom: "0"
 	},
-	"& > *": { transition: "all 0.15s ease-in" },
+	"& > *": {
+		transitionProperty: "common",
+		transition: "medium"
+	},
 	"&:is(:hover, [data-selected=true]) > *": {
-		transition: "all 0.15s ease-out",
+		transitionProperty: "common",
+		transition: "medium",
 		cursor: "pointer",
-		backgroundColor: "default.hover"
+		backgroundColor: "surface.hover"
 	}
 });
 var edgeGrid = css({
 	display: "grid",
 	gridTemplateColumns: "1fr 30px 1fr",
-	gridAutoRows: "min-content max-content",
+	gridAutoRows: "[min-content max-content]",
 	gap: "0",
 	alignItems: "stretch"
 });
 css({
 	display: "grid",
 	gridTemplateColumns: "min-content 1fr",
-	gridAutoRows: "min-content max-content",
+	gridAutoRows: "[min-content max-content]",
 	gap: "[10px 12px]",
 	alignItems: "baseline",
 	justifyItems: "start"
 });
-var scrollArea = css({ maxHeight: ["70vh", "calc(100cqh - 70px)"] });
+var scrollArea = css({ maxHeight: ["[70vh]", "[calc(100cqh - 70px)]"] });
 //#endregion
 export { edgeArrow, edgeGrid, edgeLabel, edgeRow, edgeSource, edgeTarget, scrollArea };

package/dist/overlays/relationship-details/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 { updateEdges } from "../../base/updateEdges.js";
 import { updateNodes } from "../../base/updateNodes.js";
 import { typedSystem } from "../../likec4diagram/state/utils.js";

package/dist/overlays/relationships-browser/RelationshipsBrowser.d.ts

@@ -3,3 +3,9 @@ export type RelationshipsBrowserProps = {
     actorRef: RelationshipsBrowserActorRef;
 };
 export declare function RelationshipsBrowser({ actorRef }: RelationshipsBrowserProps): import("react").JSX.Element;
+/**
+ * Builds a shareable URL with the relationships parameter.
+ * Handles both browser history routing and hash-based routing.
+ * Preserves base paths when app is hosted under a sub-path.
+ */
+export declare function buildRelationshipUrl(subjectId: string, scope: 'global' | 'view'): string;

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

@@ -164,7 +164,10 @@ var RelationshipsBrowserInner = memo(() => {
 		children: /* @__PURE__ */ jsxs(Group, {
 			gap: 4,
 			wrap: "nowrap",
-			children: [/* @__PURE__ */ jsx(CopyLinkButton, { subjectId }), /* @__PURE__ */ jsx(ActionIcon, {
+			children: [/* @__PURE__ */ jsx(CopyLinkButton, {
+				subjectId,
+				scope
+			}), /* @__PURE__ */ jsx(ActionIcon, {
 				variant: "default",
 				color: "gray",
 				onClick: (e) => {
@@ -250,15 +253,17 @@ var Tooltip$1 = Tooltip.withProps({
 * Handles both browser history routing and hash-based routing.
 * Preserves base paths when app is hosted under a sub-path.
 */
-function buildRelationshipUrl(subjectId) {
+function buildRelationshipUrl(subjectId, scope) {
 	const currentUrl = new URL(window.location.href);
 	if (currentUrl.hash.startsWith("#/")) {
 		const hashUrl = new URL(currentUrl.hash.substring(1), currentUrl.origin);
 		hashUrl.searchParams.set("relationships", subjectId);
+		hashUrl.searchParams.set("relationshipsScope", scope);
 		const cleanPath = hashUrl.pathname.replace(/\/$/, "");
 		return `${currentUrl.origin}${currentUrl.pathname}${currentUrl.search}#${cleanPath}${hashUrl.search}`;
 	}
 	currentUrl.searchParams.set("relationships", subjectId);
+	currentUrl.searchParams.set("relationshipsScope", scope);
 	return currentUrl.href;
 }
 /**
@@ -266,7 +271,7 @@ function buildRelationshipUrl(subjectId) {
 * Shows visual feedback for both success and failure states.
 * Note: Clipboard API requires HTTPS or localhost. This is a browser security restriction, not a code issue.
 */
-var CopyLinkButton = ({ subjectId }) => {
+var CopyLinkButton = ({ subjectId, scope }) => {
 	const clipboard = useClipboard({ timeout: 2e3 });
 	const [copyError, setCopyError] = useState(false);
 	const errorTimeoutRef = useRef(null);
@@ -277,7 +282,7 @@ var CopyLinkButton = ({ subjectId }) => {
 			clearTimeout(errorTimeoutRef.current);
 			errorTimeoutRef.current = null;
 		}
-		const url = buildRelationshipUrl(subjectId);
+		const url = buildRelationshipUrl(subjectId, scope);
 		if (!window.isSecureContext) {
 			setCopyError(true);
 			errorTimeoutRef.current = window.setTimeout(() => {
@@ -325,10 +330,10 @@ var CopyLinkButton = ({ subjectId }) => {
 			variant: "default",
 			color: "gray",
 			onClick: handleCopy,
-			"aria-label": "Copy link to this relationship view",
+			"aria-label": "Copy relationship URL",
 			children: buttonState.icon
 		})
 	});
 };
 //#endregion
-export { RelationshipsBrowser };
+export { RelationshipsBrowser, buildRelationshipUrl };

package/dist/overlays/relationships-browser/SelectElement.css.js

@@ -7,13 +7,7 @@ var SelectElement_css_exports = /* @__PURE__ */ __exportAll({
 	scrollArea: () => scrollArea
 });
 var node = css({ margin: "0" });
-var label = css({ _hover: {
-	backgroundColor: "mantine.gray[0]",
-	_dark: {
-		backgroundColor: "default.hover",
-		color: "white"
-	}
-} });
-var scrollArea = css({ maxHeight: ["70vh", "calc(100cqh - 70px)"] });
+var label = css({ _hover: { backgroundColor: "surface.hover" } });
+var scrollArea = css({ maxHeight: ["[70vh]", "[calc(100cqh - 70px)]"] });
 //#endregion
 export { SelectElement_css_exports, label, node, scrollArea };

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

@@ -1,4 +1,5 @@
 import "../../_virtual/_rolldown/runtime.js";
+import { useDiagramEventHandlers } from "../../context/DiagramEventHandlers.js";
 import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from "./hooks.js";
 import { useLikeC4ElementsTree } from "../../hooks/useLikeC4ElementsTree.js";
@@ -22,6 +23,7 @@ var selector2 = (state) => {
 };
 var SelectElement = memo(() => {
 	const browser = useRelationshipsBrowser();
+	const { onRelationshipBrowserScopeChange } = useDiagramEventHandlers();
 	const { subjectId, viewId, scope, subjectExistsInScope, enableSelectSubject, enableChangeScope } = useRelationshipsBrowserState(selector2);
 	const root = useRef(null);
 	const viewport = useRef(null);
@@ -176,7 +178,9 @@ var SelectElement = memo(() => {
 						paddingRight: 8
 					} },
 					onChange: (value) => {
-						browser.changeScope(value);
+						const nextScope = value;
+						browser.changeScope(nextScope);
+						onRelationshipBrowserScopeChange?.(nextScope);
 					},
 					data: [{
 						label: "Global",

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

@@ -1,7 +1,7 @@
 import "../../_virtual/_rolldown/runtime.js";
+import { MinZoom, ZIndexes } from "../../base/const.js";
 import { getNodeCenter } from "../../utils/xyflow.js";
 import { Base } from "../../base/Base.js";
-import { MinZoom, ZIndexes } from "../../base/const.js";
 import { updateEdges } from "../../base/updateEdges.js";
 import { updateNodes } from "../../base/updateNodes.js";
 import { typedSystem } from "../../likec4diagram/state/utils.js";

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/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/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,