@likec4/diagram 1.60.0 → 1.61.0

package/dist/overlays/relationships-browser/layout.mjs

@@ -1,13 +1,16 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { useEnabledFeatures } from "../../context/DiagramFeatures.mjs";
+import { useEdgeLabelFontLoader } from "../../hooks/useEdgeLabelFontLoader.mjs";
 import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
-import { useMemo } from "react";
-import { concat, filter, find, forEachObj, groupBy, map, mapToObj, omit, only, pipe, prop, reduce, sortBy, tap, unique } from "remeda";
+import { measureEdgeLabel } from "../../utils/measure-edge-label.mjs";
+import { useEffect, useMemo } from "react";
+import { concat, filter, find, forEachObj, groupBy, isNumber, map, mapToObj, omit, only, pipe, prop, reduce, sortBy, tap, unique } from "remeda";
 import { DefaultMap, ifind, invariant, nonNullable, toArray } from "@likec4/core/utils";
 import { exact, preferSummary } from "@likec4/core/types";
 import { computeRelationshipsView, treeFromElements } from "@likec4/core/compute-view";
 import dagre from "@dagrejs/dagre";
 
-//#region src/overlays/relationships-browser/layout.ts
+// src/overlays/relationships-browser/layout.ts
 /**
 * All constants related to the layout
 */
@@ -21,7 +24,8 @@ const Sizes = {
 		width: 140,
 		height: 10,
 		minlen: 1,
-		weight: 1
+		weight: 1,
+		labelpos: "c"
 	},
 	emptyNodeOffset: 120,
 	nodeWidth: 330,
@@ -122,7 +126,7 @@ let LayoutRelationshipsViewResult;
 (function(_LayoutRelationshipsViewResult) {
 	_LayoutRelationshipsViewResult.Empty = "@empty";
 })(LayoutRelationshipsViewResult || (LayoutRelationshipsViewResult = {}));
-function layoutRelationshipsView(data, scope) {
+function layoutRelationshipsView(data, scope, { withNavigateButtons = false } = {}) {
 	const g = createGraph();
 	const incomers = createNodes("incomers", data.incomers, g);
 	const subjects = createNodes("subjects", data.subjects, g);
@@ -151,7 +155,18 @@ function layoutRelationshipsView(data, scope) {
 		const name = grouped[0].expr;
 		g.node(source.id).outPorts.push(target.id);
 		g.node(target.id).inPorts.push(source.id);
-		g.setEdge(source.portId, target.portId, { ...Sizes.edgeLabel }, name);
+		const relations = map(grouped, prop("relation"));
+		const onlyRelation = only(relations);
+		const navigateTo = only(unique(relations.flatMap((r) => r.navigateTo?.id ? r.navigateTo.id : []))) ?? null;
+		const label = measureEdgeLabel({
+			label: relations.length > 1 ? `${relations.length} relationships` : onlyRelation?.title ?? "untitled",
+			withActionButton: withNavigateButtons && !!navigateTo
+		});
+		g.setEdge(source.portId, target.portId, {
+			...Sizes.edgeLabel,
+			width: label.width,
+			height: label.height
+		}, name);
 		edges.push({
 			name,
 			sourceFqn: grouped[0].sourceFqn,
@@ -160,7 +175,9 @@ function layoutRelationshipsView(data, scope) {
 			sourceHandle: source.id + "_out" + (g.node(source.id).outPorts.length - 1),
 			target: target.id,
 			targetHandle: target.id + "_in" + (g.node(target.id).inPorts.length - 1),
-			relations: map(grouped, prop("relation"))
+			relations,
+			label,
+			navigateTo
 		});
 	}));
 	for (const subjectNode of subjects.graphNodes.values()) {
@@ -212,10 +229,17 @@ function layoutRelationshipsView(data, scope) {
 		});
 	}
 	const edgeCount = g.edgeCount();
-	if (edgeCount > 10) for (const edge of g.edges()) g.setEdge(edge, {
-		...Sizes.edgeLabel,
-		width: edgeCount > 25 ? 800 : 400
-	});
+	if (edgeCount > 10) {
+		const minWidth = edgeCount > 25 ? 800 : 400;
+		for (const edge of g.edges()) {
+			const config = g.edge(edge);
+			const width = config["width"];
+			g.setEdge(edge, {
+				...config,
+				width: Math.max(isNumber(width) ? width : 0, minWidth)
+			});
+		}
+	}
 	const dagreBounds = applyDagreLayout(g);
 	const _calculatedNodeBounds = pipe(nodeIds, filter((n) => n.id === n.portId), mapToObj((n) => [n.id, dagreBounds(n.id)]));
 	function nodeBounds(nodeId) {
@@ -364,6 +388,7 @@ function layoutRelationshipsView(data, scope) {
 			existsInCurrentView: !!inheritFromNode
 		};
 	});
+	const scopedEdges = scope ? [...scope.edges()] : [];
 	return {
 		subjectExistsInScope: !scope || scope.includesElement(subject.id),
 		bounds: {
@@ -377,11 +402,23 @@ function layoutRelationshipsView(data, scope) {
 			const edge = g.edge(e);
 			const ename = e.name;
 			if (!ename) return acc;
-			const { name, source, sourceFqn, target, targetFqn, relations, sourceHandle, targetHandle } = nonNullable(find(edges, (e) => e.name === ename));
+			const { name, source, sourceFqn, target, targetFqn, relations, sourceHandle, targetHandle, label, navigateTo } = nonNullable(find(edges, (e) => e.name === ename));
 			const onlyRelation = only(relations);
-			const label = onlyRelation?.title ?? "untitled";
-			const isMultiple = relations.length > 1;
-			const navigateTo = only(unique(relations.flatMap((r) => r.navigateTo?.id ? r.navigateTo.id : [])));
+			const scopedEdgesForGroup = scopedEdges.filter((edge) => relations.some((r) => edge.includesRelation(r.id)));
+			const commonScopedStyle = (values) => {
+				const [value] = values;
+				return values.length > 0 && values.every((v) => v === value) ? {
+					found: true,
+					value
+				} : { found: false };
+			};
+			const color = commonScopedStyle(scopedEdgesForGroup.map((edge) => edge.color));
+			const line = commonScopedStyle(scopedEdgesForGroup.map((edge) => edge.line));
+			const head = commonScopedStyle(scopedEdgesForGroup.map((edge) => edge.head));
+			const tail = commonScopedStyle(scopedEdgesForGroup.map((edge) => edge.tail));
+			const labelX = edge["x"];
+			const labelY = edge["y"];
+			invariant(isNumber(labelX) && isNumber(labelY), `dagre should place the label of ${name}`);
 			acc.push(exact({
 				id: name,
 				sourceFqn,
@@ -390,14 +427,20 @@ function layoutRelationshipsView(data, scope) {
 				targetFqn,
 				target,
 				targetHandle,
-				label: isMultiple ? `${relations.length} relationships` : label,
+				label: label.label,
+				labelBBox: {
+					x: Math.round(labelX - label.width / 2),
+					y: Math.round(labelY - label.height / 2),
+					width: label.width,
+					height: label.height
+				},
 				navigateTo,
-				color: onlyRelation?.color ?? "gray",
+				color: color.found ? color.value ?? onlyRelation?.color ?? "gray" : onlyRelation?.color ?? "gray",
 				existsInCurrentView: !scope || relations.every((r) => scope.includesRelation(r.id)),
 				points: edge.points.map((p) => [p.x, p.y]),
-				line: onlyRelation?.line ?? "dashed",
-				head: onlyRelation?.head,
-				tail: onlyRelation?.tail,
+				line: line.found ? line.value ?? onlyRelation?.line ?? "dashed" : onlyRelation?.line ?? "dashed",
+				head: head.found ? head.value : onlyRelation?.head,
+				tail: tail.found ? tail.value : scopedEdgesForGroup.length === 0 ? onlyRelation?.tail : void 0,
 				relations: relations.map((r) => r.id),
 				parent: null
 			}));
@@ -407,9 +450,11 @@ function layoutRelationshipsView(data, scope) {
 }
 function useRelationshipsView(subject, viewId, scope) {
 	const model = useLikeC4Model();
-	return useMemo(() => {
+	const { enableNavigateTo } = useEnabledFeatures();
+	const [fontsVersion, ensureFontsLoaded] = useEdgeLabelFontLoader();
+	const result = useMemo(() => {
 		const view = viewId ? model.findView(viewId) : null;
-		const data = layoutRelationshipsView(computeRelationshipsView(subject, model, viewId, scope), scope === "view" ? view : null);
+		const data = layoutRelationshipsView(computeRelationshipsView(subject, model, viewId, scope), scope === "view" ? view : null, { withNavigateButtons: enableNavigateTo });
 		if (view && (scope === "global" || !data.subjectExistsInScope)) data.edges = data.edges.map((edge) => {
 			edge.existsInCurrentView = edge.relations.every((r) => view.includesRelation(r));
 			return edge;
@@ -420,9 +465,13 @@ function useRelationshipsView(subject, viewId, scope) {
 		subject,
 		viewId,
 		scope,
-		computeRelationshipsView
+		enableNavigateTo,
+		fontsVersion
 	]);
+	useEffect(() => {
+		ensureFontsLoaded(result.edges.flatMap((edge) => edge.label ?? []));
+	}, [result]);
+	return result;
 }
 
-//#endregion
 export { LayoutRelationshipsViewResult, layoutRelationshipsView, useRelationshipsView };

package/dist/overlays/relationships-browser/useViewToNodesEdges.mjs

@@ -5,7 +5,7 @@ import "@react-hookz/web";
 import { hasAtLeast } from "remeda";
 import { GroupElementKind, Queue, invariant, nonNullable } from "@likec4/core";
 
-//#region src/overlays/relationships-browser/useViewToNodesEdges.ts
+// src/overlays/relationships-browser/useViewToNodesEdges.ts
 function viewToNodesEdge(view) {
 	const xynodes = [];
 	const xyedges = [];
@@ -129,6 +129,7 @@ function viewToNodesEdge(view) {
 				relations: edge.relations,
 				color: edge.color ?? "gray",
 				label: edge.label,
+				labelBBox: edge.labelBBox ?? null,
 				navigateTo: edge.navigateTo ?? null,
 				line: edge.line ?? "dashed",
 				existsInCurrentView: edge.existsInCurrentView
@@ -142,5 +143,4 @@ function viewToNodesEdge(view) {
 	};
 }
 
-//#endregion
 export { viewToNodesEdge };

package/dist/overlays/types.d.mts

@@ -1,8 +1,7 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { Input, RelationshipsBrowserActorRef, RelationshipsBrowserLogic } from "./relationships-browser/actor.mjs";
 import { ElementDetailsActorRef, ElementDetailsInput, ElementDetailsLogic } from "./element-details/actor.mjs";
-import { Input as Input$1, RelationshipDetailsActorRef, RelationshipDetailsLogic } from "./relationship-details/actor.mjs";
-//#region src/overlays/types.d.ts
+import { Input, RelationshipDetailsActorRef, RelationshipDetailsLogic } from "./relationship-details/actor.mjs";
+import { Input as Input$1, RelationshipsBrowserActorRef, RelationshipsBrowserLogic } from "./relationships-browser/actor.mjs";
 export declare namespace Overlays {
   namespace ElementDetails {
     interface Input extends ElementDetailsInput {}
@@ -10,14 +9,13 @@ export declare namespace Overlays {
     interface ActorRef extends ElementDetailsActorRef {}
   }
   namespace RelationshipDetails {
-    type Input = Input$1;
+    type Input = Input;
     interface Logic extends RelationshipDetailsLogic {}
     interface ActorRef extends RelationshipDetailsActorRef {}
   }
   namespace RelationshipsBrowser {
-    interface Input extends Input {}
+    interface Input extends Input$1 {}
     interface Logic extends RelationshipsBrowserLogic {}
     interface ActorRef extends RelationshipsBrowserActorRef {}
   }
-}
-//#endregion
+}

package/dist/projects-overview/ProjectsOverview.d.mts

@@ -3,7 +3,6 @@ import { ViewPadding } from "../LikeC4Diagram.props.mjs";
 import { ProjectsOverviewXYProps } from "./ProjectsOverviewXY.mjs";
 import { ProjectId } from "@likec4/core";
 import { LayoutedProjectsView } from "@likec4/core/compute-view";
-//#region src/projects-overview/ProjectsOverview.d.ts
 export type ProjectsOverviewProps = {
   view: LayoutedProjectsView;
   /**
@@ -11,5 +10,4 @@ export type ProjectsOverviewProps = {
    */
   onNavigateToProject?: undefined | ((projectId: ProjectId) => void);
   fitViewPadding?: ViewPadding | undefined;
-} & ProjectsOverviewXYProps;
-//#endregion
+} & ProjectsOverviewXYProps;

package/dist/projects-overview/ProjectsOverview.mjs

@@ -10,7 +10,7 @@ import { ReactFlowProvider } from "@xyflow/react";
 import { LayoutGroup } from "motion/react";
 import { useActorRef } from "@xstate/react";
 
-//#region src/projects-overview/ProjectsOverview.tsx
+// src/projects-overview/ProjectsOverview.tsx
 function ProjectsOverview({ view, onNavigateToProject, fitViewPadding = {
 	top: "50px",
 	bottom: "32px",
@@ -57,5 +57,4 @@ function ProjectsOverview({ view, onNavigateToProject, fitViewPadding = {
 	});
 }
 
-//#endregion
 export { ProjectsOverview };

package/dist/projects-overview/ProjectsOverviewXY.d.mts

@@ -1,5 +1,4 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-//#region src/projects-overview/ProjectsOverviewXY.d.ts
 export type ProjectsOverviewXYProps = {
   /**
    * Background pattern
@@ -10,5 +9,4 @@ export type ProjectsOverviewXYProps = {
    * @default - determined by the user's system preferences.
    */
   colorScheme?: 'light' | 'dark' | undefined;
-};
-//#endregion
+};

package/dist/projects-overview/ProjectsOverviewXY.mjs

@@ -1,16 +1,16 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { useCallbackRef } from "../hooks/useCallbackRef.mjs";
 import { BaseXYFlow } from "../base/BaseXYFlow.mjs";
+import { useCallbackRef } from "../hooks/useCallbackRef.mjs";
 import { useProjectsOverviewActor } from "./context.mjs";
-import { RelationshipEdge } from "./custom/edgeTypes.mjs";
 import { ProjectNode } from "./custom/nodeTypes.mjs";
+import { RelationshipEdge } from "./custom/edgeTypes.mjs";
 import { useProjectsOverviewState, useProjectsOverviewXYStoreApi } from "./hooks.mjs";
 import { cx } from "@likec4/styles/css";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { shallowEqual } from "fast-equals";
 
-//#region src/projects-overview/ProjectsOverviewXY.tsx
+// src/projects-overview/ProjectsOverviewXY.tsx
 const nodeTypes = { project: ProjectNode };
 const edgeTypes = { relationship: RelationshipEdge };
 const selector = (state) => ({
@@ -107,5 +107,4 @@ const ProjectsOverviewXY = memo(({ background = "dots", ...props }) => {
 });
 ProjectsOverviewXY.displayName = "ProjectsOverviewXY";
 
-//#endregion
 export { ProjectsOverviewXY };

package/dist/projects-overview/actor.mjs

@@ -10,7 +10,7 @@ import { animate, mapValue, motionValue, stagger, styleEffect } from "motion";
 import { assertEvent, setup } from "xstate";
 import { assign as assign$1, emit } from "xstate/actions";
 
-//#region src/projects-overview/actor.ts
+// src/projects-overview/actor.ts
 const machine = setup({
 	types: {
 		context: {},
@@ -265,5 +265,4 @@ function sleep(ms) {
 	return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-//#endregion
 export { fitDiagram, onMouseEnterOrLeave, projectOverviewLogic, restoreViewport };

package/dist/projects-overview/context.mjs

@@ -2,12 +2,11 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { createContext, useContext } from "react";
 import { nonNullable } from "@likec4/core";
 
-//#region src/projects-overview/context.ts
+// src/projects-overview/context.ts
 const ProjectsOverviewActorContext = createContext(null);
 const ProjectsOverviewActorContextProvider = ProjectsOverviewActorContext.Provider;
 function useProjectsOverviewActor() {
 	return nonNullable(useContext(ProjectsOverviewActorContext), "No ProjectsOverviewActorContext");
 }
 
-//#endregion
 export { ProjectsOverviewActorContextProvider, useProjectsOverviewActor };

package/dist/projects-overview/custom/edgeTypes.mjs

@@ -1,13 +1,13 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { bezierPath } from "../../utils/xyflow.mjs";
 import { EdgeContainer } from "../../base-primitives/edge/EdgeContainer.mjs";
 import { EdgeLabel } from "../../base-primitives/edge/EdgeLabel.mjs";
 import { EdgeLabelContainer } from "../../base-primitives/edge/EdgeLabelContainer.mjs";
 import { EdgePath } from "../../base-primitives/edge/EdgePath.mjs";
 import { memoEdge } from "../../base-primitives/memoEdge.mjs";
+import { bezierPath } from "../../utils/xyflow.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/projects-overview/custom/edgeTypes.tsx
+// src/projects-overview/custom/edgeTypes.tsx
 const RelationshipEdge = memoEdge((edgeProps) => {
 	const path = bezierPath(edgeProps.data.points);
 	return /* @__PURE__ */ jsxs(EdgeContainer, {
@@ -22,5 +22,4 @@ const RelationshipEdge = memoEdge((edgeProps) => {
 	});
 });
 
-//#endregion
 export { RelationshipEdge };

package/dist/projects-overview/custom/nodeTypes.mjs

@@ -1,15 +1,15 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconZoomScan from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
+import IconZoomScan from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.mjs";
+import { DefaultHandles } from "../../base-primitives/NodeHandles.mjs";
 import { ElementActionButtons } from "../../base-primitives/element/ElementActionButtons.mjs";
 import { ElementData } from "../../base-primitives/element/ElementData.mjs";
 import { ElementNodeContainer } from "../../base-primitives/element/ElementNodeContainer.mjs";
 import { ElementShape } from "../../base-primitives/element/ElementShape.mjs";
-import { DefaultHandles } from "../../base-primitives/NodeHandles.mjs";
 import { useProjectsOverviewActor } from "../context.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallbackRef } from "@mantine/hooks";
 
-//#region src/projects-overview/custom/nodeTypes.tsx
+// src/projects-overview/custom/nodeTypes.tsx
 function ProjectNode(props) {
 	const actor = useProjectsOverviewActor();
 	const navigateTo = useCallbackRef((e) => {
@@ -39,5 +39,4 @@ function ProjectNode(props) {
 	}, props.id);
 }
 
-//#endregion
 export { ProjectNode };

package/dist/projects-overview/hooks.mjs

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

package/dist/projects-overview/layouted-to-xyflow.mjs

@@ -2,7 +2,7 @@ import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { ZIndexes } from "../base/const.mjs";
 import { map } from "remeda";
 
-//#region src/projects-overview/layouted-to-xyflow.ts
+// src/projects-overview/layouted-to-xyflow.ts
 function layoutedProjectsViewToXYFlow(view) {
 	return {
 		xynodes: map(view.nodes, projectNodeToXY),
@@ -51,5 +51,4 @@ function projectEdgeToXY({ id, source, target, ...edge }) {
 	};
 }
 
-//#endregion
 export { layoutedProjectsViewToXYFlow };

package/dist/projects-overview/panel/ProjectsOverviewPanel.mjs

@@ -2,10 +2,9 @@ import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { NavigationPanel } from "../../components/NavigationPanel.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/projects-overview/panel/ProjectsOverviewPanel.tsx
+// src/projects-overview/panel/ProjectsOverviewPanel.tsx
 const ProjectsOverviewPanel = () => {
 	return /* @__PURE__ */ jsx(NavigationPanel.Root, { children: /* @__PURE__ */ jsxs(NavigationPanel.Body, { children: [/* @__PURE__ */ jsx(NavigationPanel.Logo, {}), /* @__PURE__ */ jsx(NavigationPanel.Label, { children: "Projects Overview" })] }) });
 };
 
-//#endregion
 export { ProjectsOverviewPanel };

package/dist/projects-overview/persistence.mjs

@@ -1,6 +1,6 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 
-//#region src/projects-overview/persistence.ts
+// src/projects-overview/persistence.ts
 const key = `likec4:projects-overview:lastViewport`;
 const ProjectsOverviewViewportPersistence = {
 	read() {
@@ -22,5 +22,4 @@ const ProjectsOverviewViewportPersistence = {
 	}
 };
 
-//#endregion
 export { ProjectsOverviewViewportPersistence };

package/dist/search/Search.d.mts

@@ -1,11 +1,9 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import "./searchActor.mjs";
-//#region src/search/Search.d.ts
 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>>;
-//#endregion
+export declare const SearchPanelContent: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLDivElement>>;

package/dist/search/Search.mjs

@@ -1,13 +1,14 @@
 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 { useSearchContext } from "./SearchContext.mjs";
-import { focusToFirstFoundElement, moveFocusToSearchInput } from "./components/utils.mjs";
-import { ViewsColumn } from "./components/ViewsColum.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";
@@ -20,7 +21,7 @@ import { useSelector } from "@xstate/react";
 import { useHotkeys, useMergedRef } from "@mantine/hooks";
 import { Box as Box$1, VStack } from "@likec4/styles/jsx";
 
-//#region src/search/Search.tsx
+// src/search/Search.tsx
 const dialogCss = css({
 	backgroundColor: `[rgb(34 34 34 / var(--_opacity, 95%))]`,
 	_light: { backgroundColor: `[rgb(250 250 250 / var(--_opacity, 95%))]` },
@@ -42,6 +43,10 @@ const bodyCss = css({
 	paddingBottom: "sm",
 	background: "transparent"
 });
+const classes = {
+	dialog: dialogCss,
+	body: bodyCss
+};
 const scrollAreaCss = css({
 	height: ["100%", "100cqh"],
 	"& .mantine-ScrollArea-viewport": {
@@ -68,7 +73,7 @@ const Search = memo(({ searchActorRef }) => {
 	};
 	const open = (event) => {
 		event.stopPropagation();
-		diagram.searchActor().send({ type: "open" });
+		diagram.openSearch();
 	};
 	useHotkeys(isOpened ? [] : [[
 		"mod+k",
@@ -79,7 +84,7 @@ const Search = memo(({ searchActorRef }) => {
 		open,
 		{ preventDefault: true }
 	]]);
-	return /* @__PURE__ */ jsx(AnimatePresence, {
+	return /* @__PURE__ */ jsx(PortalToContainer, { children: /* @__PURE__ */ jsx(AnimatePresence, {
 		onExitComplete: () => {
 			searchActorRef.send({ type: "animation.presence.end" });
 		},
@@ -87,10 +92,7 @@ const Search = memo(({ searchActorRef }) => {
 			fullscreen: true,
 			withBackdrop: false,
 			backdrop: { opacity: .9 },
-			classes: {
-				dialog: dialogCss,
-				body: bodyCss
-			},
+			classes,
 			openDelay: 100,
 			onClose: close,
 			"data-likec4-search": "true",
@@ -99,7 +101,7 @@ const Search = memo(({ searchActorRef }) => {
 				children: /* @__PURE__ */ jsx(SearchOverlayBody, { searchActorRef })
 			})
 		})
-	});
+	}) });
 });
 Search.displayName = "Search";
 function SearchOverlayBody({ searchActorRef }) {
@@ -197,5 +199,4 @@ const SearchPanelContent = forwardRef((_, ref) => {
 });
 SearchPanelContent.displayName = "SearchPanelContent";
 
-//#endregion
 export { Search, SearchPanelContent, bodyCss, dialogCss, scrollAreaCss };

package/dist/search/SearchContext.d.mts

@@ -1,6 +1,5 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { Fqn, ViewId } from "@likec4/core/types";
-//#region src/search/SearchContext.d.ts
 export interface SearchContextValue {
   searchValue: string;
   setSearchValue: (value: string) => void;
@@ -19,5 +18,4 @@ 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;
-//#endregion
+export declare function normalizeSearch(value: string): string;

package/dist/search/SearchContext.mjs

@@ -1,7 +1,7 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
 import { createContext, useContext } from "react";
 
-//#region src/search/SearchContext.tsx
+// src/search/SearchContext.tsx
 const SearchContext = createContext(null);
 function useSearchContext() {
 	const ctx = useContext(SearchContext);
@@ -19,5 +19,4 @@ function normalizeSearch(value) {
 	return v.length > 1 ? v : "";
 }
 
-//#endregion
 export { SearchContext, normalizeSearch, useSearchContext };

package/dist/search/XStateSearchAdapter.mjs

@@ -6,7 +6,7 @@ import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useSelector } from "@xstate/react";
 
-//#region src/search/XStateSearchAdapter.tsx
+// src/search/XStateSearchAdapter.tsx
 const selectSearchValue = (s) => s.context.searchValue;
 const selectPickViewFor = (s) => s.context.pickViewFor;
 const selectOpenedWithSearch = (s) => s.context.openedWithSearch;
@@ -68,5 +68,4 @@ function XStateSearchAdapter({ searchActorRef, children }) {
 	});
 }
 
-//#endregion
 export { XStateSearchAdapter };

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

@@ -2,7 +2,7 @@ import { focusable } from "./_shared.css.mjs";
 import { css } from "@likec4/styles/css";
 import { container } from "@likec4/styles/patterns";
 
-//#region src/search/components/ElementsColumn.css.ts
+// src/search/components/ElementsColumn.css.ts
 const whenContainerIsNarrow = `@container likec4-tree (max-width: 450px)`;
 const treeNode = css({
 	outline: "none",
@@ -50,5 +50,4 @@ const elementViewsCount = css({
 	[whenContainerIsNarrow]: { display: "none" }
 });
 
-//#endregion
 export { elementExpandIcon, elementIcon, elementId, elementTitleAndId, elementViewsCount, treeLabel, treeNode, treeRoot, treeSubtree };