@likec4/diagram 1.59.2 → 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

@@ -6,6 +6,20 @@ import { isString, last, reverse } from "remeda";
 import { getHotkeyHandler } from "@mantine/hooks";
 import { assertEvent, fromCallback, setup } from "xstate";
 //#region src/overlays/overlaysActor.ts
+var hotkeyLogic = fromCallback(({ sendBack }) => {
+	const handler = getHotkeyHandler([[
+		"Escape",
+		(event) => {
+			event.stopPropagation();
+			sendBack({ type: "close" });
+		},
+		{ preventDefault: true }
+	]]);
+	document.body.addEventListener("keydown", handler, { capture: true });
+	return () => {
+		document.body.removeEventListener("keydown", handler, { capture: true });
+	};
+});
 var machine = setup({
 	types: {
 		context: {},
@@ -17,20 +31,7 @@ var machine = setup({
 		relationshipDetails: relationshipDetailsLogic,
 		elementDetails: elementDetailsLogic,
 		relationshipsBrowser: relationshipsBrowserLogic,
-		hotkey: fromCallback(({ sendBack }) => {
-			const handler = getHotkeyHandler([[
-				"Escape",
-				(event) => {
-					event.stopPropagation();
-					sendBack({ type: "close" });
-				},
-				{ preventDefault: true }
-			]]);
-			document.body.addEventListener("keydown", handler, { capture: true });
-			return () => {
-				document.body.removeEventListener("keydown", handler, { capture: true });
-			};
-		})
+		hotkey: hotkeyLogic
 	},
 	guards: {
 		"has overlays?": ({ context }) => context.overlays.length > 0,
@@ -136,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}`;
@@ -167,9 +172,7 @@ var openOverlay = () => machine.enqueueActions(({ enqueue, event }) => {
 		case "open.relationshipDetails":
 			enqueue(openRelationshipDetails());
 			break;
-		case "open.relationshipsBrowser":
-			enqueue(openRelationshipsBrowser());
-			break;
+		case "open.relationshipsBrowser": enqueue(openRelationshipsBrowser());
 	}
 });
 var listenToEsc = () => machine.spawnChild("hotkey", { id: "hotkey" });

package/dist/overlays/relationship-details/RelationshipDetails.js

@@ -56,7 +56,8 @@ var SyncRelationshipDetailsXYFlow = memo(() => {
 		let data;
 		if ("edgeId" in subject && isTruthy(subject.edgeId)) {
 			invariant(view, `view ${subject.viewId} not found`);
-			data = computeEdgeDetailsViewData([nonNullable(view.findEdge(subject.edgeId), `edge ${subject.edgeId} not found in ${subject.viewId}`).id], view);
+			const edge = nonNullable(view.findEdge(subject.edgeId), `edge ${subject.edgeId} not found in ${subject.viewId}`);
+			data = computeEdgeDetailsViewData([edge.id], view);
 		} else if (!!subject.source && !!subject.target) data = computeRelationshipDetailsViewData({
 			source: likec4model.element(subject.source),
 			target: likec4model.element(subject.target)

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/relationship-details/hooks.js

@@ -11,7 +11,8 @@ function useRelationshipDetailsActor() {
 }
 function useRelationshipDetailsState(selector, compare = shallowEqual) {
 	const select = useCallbackRef(selector);
-	return useSelector(useRelationshipDetailsActor(), select, compare);
+	const actor = useRelationshipDetailsActor();
+	return useSelector(actor, select, compare);
 }
 function useRelationshipDetails() {
 	const actor = useRelationshipDetailsActor();

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

@@ -152,9 +152,11 @@ var RelationshipsBrowserInner = memo(() => {
 	useEffect(() => {
 		browser.updateView(layouted);
 	}, [layouted, browser]);
+	const hasStepBack = current > 0;
+	const hasStepForward = current + 1 < history.length;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TopLeftPanel, {
-		hasStepBack: current > 0,
-		hasStepForward: current + 1 < history.length,
+		hasStepBack,
+		hasStepForward,
 		onStepBack: () => historyOps.back(),
 		onStepForward: () => historyOps.forward()
 	}), closeable && /* @__PURE__ */ jsx(Panel, {
@@ -162,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) => {
@@ -248,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;
 }
 /**
@@ -264,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);
@@ -275,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(() => {
@@ -323,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";
@@ -43,7 +43,8 @@ var layouter = fromPromise(async ({ input, self, signal }) => {
 		x: nextSubjectNode.position.x + (nextSubjectNode.initialWidth ?? 0) / 2,
 		y: nextSubjectNode.position.y + (nextSubjectNode.initialHeight ?? 0) / 2
 	};
-	const currentSubjectCenter = getNodeCenter(xyflow.getInternalNode(currentSubjectNode.id));
+	const currentSubjectInternalNode = xyflow.getInternalNode(currentSubjectNode.id);
+	const currentSubjectCenter = getNodeCenter(currentSubjectInternalNode);
 	const nested = /* @__PURE__ */ new Set();
 	currentNodes.forEach((n) => {
 		if (n.id === existingNode.id) return;