@likec4/diagram 1.58.0 → 1.59.0

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

@@ -13,14 +13,14 @@ var fqn = css({
 });
 var relationshipStat = css({
 	_light: {
-		background: "mantine.colors.gray[1]",
+		background: "mantine.gray[1]",
 		"&[data-missing": {}
 	},
 	[`&[data-missing]`]: {
-		color: "mantine.colors.orange[4]",
-		background: `mantine.colors.orange[8]/15`,
-		borderColor: `mantine.colors.orange[5]/20`,
-		_light: { color: "mantine.colors.orange[8]" }
+		color: "mantine.orange[4]",
+		background: `mantine.orange[8]/15`,
+		borderColor: `mantine.orange[5]/20`,
+		_light: { color: "mantine.orange[8]" }
 	}
 });
 var xyflow = css({
@@ -32,8 +32,8 @@ var xyflow = css({
 	border: "default",
 	borderRadius: "sm",
 	_light: {
-		borderColor: "mantine.colors.gray[3]",
-		background: "mantine.colors.gray[1]"
+		borderColor: "mantine.gray[3]",
+		background: "mantine.gray[1]"
 	}
 });
 css({
@@ -49,7 +49,7 @@ css({
 		opacity: .85,
 		transform: "translateY(-100%) translateY(-2px)"
 	},
-	_light: { "& .mantine-SegmentedControl-root": { background: "mantine.colors.gray[3]" } }
+	_light: { "& .mantine-SegmentedControl-root": { background: "mantine.gray[3]" } }
 });
 css({
 	display: "inline-block",
@@ -59,12 +59,12 @@ css({
 	minWidth: "24px",
 	textAlign: "center",
 	borderRadius: "sm",
-	background: "mantine.colors.dark[7]",
+	background: "mantine.dark[7]",
 	color: "default.color",
 	[`&[data-zero]`]: { color: "text.dimmed" },
 	[`&[data-missing]`]: {
-		color: "mantine.colors.orange[4]",
-		background: `mantine.colors.orange[8]/20`
+		color: "mantine.orange[4]",
+		background: `mantine.orange[8]/20`
 	}
 });
 //#endregion

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

@@ -1,8 +1,8 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { useDiagram } from "../../hooks/safeContext.js";
+import { fqn, relationshipStat, xyflow } from "./TabPanelRelationships.css.js";
 import { useElementDetailsActorRef } from "./actorContext.js";
 import { RelationshipsBrowser } from "../relationships-browser/RelationshipsBrowser.js";
-import { fqn, relationshipStat, xyflow } from "./TabPanelRelationships.css.js";
 import { IconArrowRight, IconExternalLink, IconInfoCircle } from "@tabler/icons-react";
 import { useCallback } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

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

@@ -14,8 +14,8 @@ var elementLabel = css({
 	py: "xs",
 	alignItems: "center",
 	cursor: "pointer",
-	color: "mantine.colors.gray[7]",
-	_dark: { color: "mantine.colors.dark[1]" },
+	color: "mantine.gray[7]",
+	_dark: { color: "mantine.dark[1]" },
 	"& > *": { transition: "fast" },
 	_hover: {
 		transitionTimingFunction: "out",

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

@@ -91,4 +91,4 @@ function TabPanelStructure({ element }) {
 	})] });
 }
 //#endregion
-export { TabPanelStructure };
+export { ElementLabel, TabPanelStructure };

package/dist/overlays/element-details/actor.d.ts

@@ -2,7 +2,7 @@ import { DiagramView, Fqn, NodeId } from '@likec4/core/types';
 import { Rect } from '@xyflow/system';
 import { ActorRef, SnapshotFrom, StateMachine } from 'xstate';
 import { RelationshipsBrowserActorRef } from '../relationships-browser/actor';
-export type Input = {
+export type ElementDetailsInput = {
     subject: Fqn;
     currentView: DiagramView;
     initiatedFrom?: {
@@ -26,10 +26,9 @@ export type Events = {
 };
 export interface ElementDetailsLogic extends StateMachine<Context, Events, {
     [key: `${string}-relationships`]: RelationshipsBrowserActorRef | undefined;
-}, any, any, any, any, any, never, Input, any, any, any, any> {
+}, any, any, any, any, any, never, ElementDetailsInput, any, any, any, any> {
 }
 export declare const elementDetailsLogic: ElementDetailsLogic;
 export type ElementDetailsSnapshot = SnapshotFrom<ElementDetailsLogic>;
 export interface ElementDetailsActorRef extends ActorRef<ElementDetailsSnapshot, Events> {
 }
-export type { Input as ElementDetailsInput, };

package/dist/overlays/hooks.d.ts

@@ -0,0 +1,28 @@
+import { OverlaysActorRef, OverlaysContext, OverlayActorEvent } from './overlaysActor';
+import { Provider } from 'react';
+import { MachineSnapshot } from 'xstate';
+export declare const OverlaysActorContext: Provider<OverlaysActorRef>, selectOverlaysSnapshot: <T>(select: (state: MachineSnapshot<OverlaysContext, OverlayActorEvent, {
+    [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?: ((old: NoInfer<T>, next: NoInfer<T>) => boolean) | undefined) => [selector: (snapshot: MachineSnapshot<OverlaysContext, OverlayActorEvent, {
+    [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: {
+    <T>(select: (state: MachineSnapshot<OverlaysContext, OverlayActorEvent, {
+        [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): T;
+    <T>(selectorCompare: [selector: (snapshot: MachineSnapshot<OverlaysContext, OverlayActorEvent, {
+        [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]): T;
+    <T>(selector: (snapshot: MachineSnapshot<OverlaysContext, OverlayActorEvent, {
+        [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): T;
+};

package/dist/overlays/hooks.js

@@ -0,0 +1,5 @@
+import { createSafeContextForActor } from "../hooks/safeContext.js";
+//#region src/overlays/hooks.ts
+var { ContextProvider: OverlaysActorContext, selectSnapshot: selectOverlaysSnapshot, useActorSelector: useSelectOverlaysActor } = createSafeContextForActor("Overlays");
+//#endregion
+export { OverlaysActorContext, selectOverlaysSnapshot, useSelectOverlaysActor };

package/dist/overlays/overlay/Overlay.js

@@ -12,35 +12,37 @@ import { overlay } from "@likec4/styles/recipes";
 var backdropBlur = "--_blur";
 var backdropOpacity = "--_opacity";
 var cssVarLevel = "--_level";
-var Overlay = forwardRef(({ onClose, className, classes, overlayLevel = 0, children, fullscreen = false, withBackdrop = true, backdrop, openDelay = 130, ...rest }, ref) => {
+var Overlay = forwardRef(({ onClose, className, classes, overlayLevel = 0, children, fullscreen = false, withBackdrop = true, backdrop, openDelay = 120, ...rest }, ref) => {
 	const [opened, setOpened] = useState(false);
 	const focusTrapRef = useFocusTrap(opened);
 	const dialogRef = useRef(null);
-	const onCloseRef = useRef(null);
+	const onCloseCalledRef = useRef(false);
 	const motionNotReduced = useReducedMotionConfig() !== true;
 	/**
-	* Close the overlay and call the onClose callback
+	* This function is called when the overlay is closed by outside click or escape key.
+	* It ensures that the onClose callback is only called once.
 	*/
-	const cancelMe = () => {
-		onCloseRef.current = onClose;
-		dialogRef.current?.close();
+	const closeMe = () => {
+		if (!onCloseCalledRef.current) {
+			onCloseCalledRef.current = true;
+			onClose();
+		}
 	};
 	const isPresent = useIsPresent();
 	useEffect(() => {
 		if (isPresent) return;
-		if (dialogRef.current?.open) {
-			onCloseRef.current = null;
-			dialogRef.current.close();
-		}
+		const dialog = dialogRef.current;
+		return () => {
+			onCloseCalledRef.current = true;
+			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);
+	useTimeoutEffect(() => setOpened(true), openDelay > 0 ? openDelay : void 0);
 	const overlayRecipe = overlay({
 		fullscreen,
 		withBackdrop
@@ -49,22 +51,31 @@ var Overlay = forwardRef(({ onClose, className, classes, overlayLevel = 0, child
 	if (backdrop?.opacity !== void 0) targetBackdropOpacity = `${backdrop.opacity * 100}%`;
 	const motionProps = useMemo(() => ({
 		initial: {
-			[backdropBlur]: "1px",
-			[backdropOpacity]: "10%",
-			scale: .95,
+			[backdropBlur]: "2px",
+			[backdropOpacity]: "20%",
+			scaleX: .95,
+			scaleY: .85,
+			originY: 0,
+			translateY: -8,
 			opacity: 0
 		},
 		animate: {
 			[backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
 			[backdropOpacity]: targetBackdropOpacity,
-			scale: 1,
+			scaleX: 1,
+			scaleY: 1,
+			originY: 0,
+			translateY: 0,
 			opacity: 1
 		},
 		exit: {
+			scaleX: .9,
+			scaleY: .8,
+			originY: 0,
+			translateY: -10,
 			opacity: 0,
-			scale: .97,
-			[backdropBlur]: "0px",
-			[backdropOpacity]: "0%"
+			[backdropBlur]: "2px",
+			[backdropOpacity]: "20%"
 		}
 	}), [overlayLevel, targetBackdropOpacity]);
 	return /* @__PURE__ */ jsx(m.dialog, {
@@ -81,16 +92,14 @@ var Overlay = forwardRef(({ onClose, className, classes, overlayLevel = 0, child
 		...rest,
 		onClick: (e) => {
 			e.stopPropagation();
-			if (e.target === e.currentTarget) cancelMe();
+			if (e.target === e.currentTarget) closeMe();
 		},
 		onCancel: (e) => {
 			e.preventDefault();
 			e.stopPropagation();
-			cancelMe();
-		},
-		onClose: () => {
-			onCloseRef.current?.();
+			closeMe();
 		},
+		onClose: closeMe,
 		children: /* @__PURE__ */ jsx(RemoveScroll, {
 			forwardProps: true,
 			children: /* @__PURE__ */ jsx("div", {

package/dist/overlays/overlaysActor.js

@@ -5,7 +5,6 @@ import { relationshipDetailsLogic } from "./relationship-details/actor.js";
 import { isString, last, reverse } from "remeda";
 import { getHotkeyHandler } from "@mantine/hooks";
 import { assertEvent, fromCallback, setup } from "xstate";
-import "xstate/guards";
 //#region src/overlays/overlaysActor.ts
 var machine = setup({
 	types: {

package/dist/overlays/relationship-details/custom/nodeTypes.js

@@ -96,4 +96,4 @@ function CompoundPorts({ data }) {
 	}, id))] });
 }
 //#endregion
-export { CompoundNode, ElementNode };
+export { CompoundNode, CompoundPorts, ElementNode, ElementPorts };

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

@@ -1,9 +1,9 @@
 import "../../_virtual/_rolldown/runtime.js";
 import { filter, find, map, mapToObj, omit, pipe, prop, reduce, sortBy, tap } from "remeda";
 import { DefaultMap, ifind, invariant } from "@likec4/core/utils";
+import { exact, preferSummary } from "@likec4/core/types";
 import { treeFromElements } from "@likec4/core/compute-view";
 import dagre from "@dagrejs/dagre";
-import { exact, preferSummary } from "@likec4/core/types";
 //#region src/overlays/relationship-details/layout.ts
 /**
 * All constants related to the layout

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

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

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

@@ -17,6 +17,83 @@ import { assertEvent, assign, cancel, enqueueActions, fromPromise, raise, setup
 * Root node in 'subjects' column
 */
 var findRootSubject = (nodes) => nodes.find((n) => n.data.column === "subjects" && isNullish(n.parentId));
+var layouter = fromPromise(async ({ input, self, signal }) => {
+	const { subjectId, navigateFromNode, xyflow, xystore, update } = input;
+	let { nodes: currentNodes, width, height } = xystore.getState();
+	const next = viewToNodesEdge(update);
+	const updateXYData = () => {
+		const { nodes, edges } = xystore.getState();
+		return {
+			xynodes: updateNodes(nodes, next.xynodes),
+			xyedges: updateEdges(edges, next.xyedges)
+		};
+	};
+	const parent = nonNullable(self._parent);
+	let zoom = xyflow.getZoom();
+	const maxZoom = Math.max(zoom, 1);
+	const nextviewport = getViewportForBounds$1(update.bounds, width, height, MinZoom, maxZoom, ViewPadding);
+	const nextSubjectNode = next.xynodes.find((n) => n.type !== "empty" && n.data.column === "subjects" && n.data.fqn === subjectId) ?? findRootSubject(next.xynodes);
+	const currentSubjectNode = findRootSubject(currentNodes);
+	const existingNode = navigateFromNode ? currentNodes.find((n) => n.id === navigateFromNode) : currentNodes.find((n) => n.type !== "empty" && n.data.column !== "subjects" && n.data.fqn === subjectId);
+	if (!nextSubjectNode || !existingNode || nextSubjectNode.type === "empty" || !currentSubjectNode || nextSubjectNode.data.fqn === currentSubjectNode.data.fqn) {
+		await xyflow.setViewport(nextviewport);
+		return updateXYData();
+	}
+	const nextSubjectCenter = {
+		x: nextSubjectNode.position.x + (nextSubjectNode.initialWidth ?? 0) / 2,
+		y: nextSubjectNode.position.y + (nextSubjectNode.initialHeight ?? 0) / 2
+	};
+	const currentSubjectCenter = getNodeCenter(xyflow.getInternalNode(currentSubjectNode.id));
+	const nested = /* @__PURE__ */ new Set();
+	currentNodes.forEach((n) => {
+		if (n.id === existingNode.id) return;
+		if (n.data.column === "subjects") {
+			nested.add(n.id);
+			return;
+		}
+		if (n.parentId && (n.parentId === existingNode.id || nested.has(n.parentId))) nested.add(n.id);
+	});
+	currentNodes = updateNodes(currentNodes, currentNodes.flatMap((n) => {
+		if (nested.has(n.id)) return [];
+		if (n.id !== existingNode.id) return {
+			...n,
+			data: {
+				...n.data,
+				dimmed: n.data.column === "subjects" ? "immediate" : true
+			}
+		};
+		return {
+			...omit(n, ["parentId"]),
+			position: {
+				x: currentSubjectCenter.x - n.initialWidth / 2,
+				y: currentSubjectCenter.y - n.initialHeight / 2
+			},
+			zIndex: ZIndexes.Max,
+			hidden: false,
+			data: {
+				...n.data,
+				dimmed: false
+			}
+		};
+	}));
+	parent.send({
+		type: "update.xydata",
+		xynodes: currentNodes,
+		xyedges: []
+	});
+	await delay(120);
+	next.xynodes = next.xynodes.map(Base.setDimmed(false));
+	if (signal.aborted) return updateXYData();
+	const duration = 300;
+	xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, {
+		zoom,
+		duration,
+		interpolate: "smooth"
+	});
+	await delay(duration);
+	await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
+	return updateXYData();
+});
 var machine = setup({
 	types: {
 		context: {},
@@ -25,83 +102,7 @@ var machine = setup({
 		input: {},
 		events: {}
 	},
-	actors: { layouter: fromPromise(async ({ input, self, signal }) => {
-		const { subjectId, navigateFromNode, xyflow, xystore, update } = input;
-		let { nodes: currentNodes, width, height } = xystore.getState();
-		const next = viewToNodesEdge(update);
-		const updateXYData = () => {
-			const { nodes, edges } = xystore.getState();
-			return {
-				xynodes: updateNodes(nodes, next.xynodes),
-				xyedges: updateEdges(edges, next.xyedges)
-			};
-		};
-		const parent = nonNullable(self._parent);
-		let zoom = xyflow.getZoom();
-		const maxZoom = Math.max(zoom, 1);
-		const nextviewport = getViewportForBounds$1(update.bounds, width, height, MinZoom, maxZoom, ViewPadding);
-		const nextSubjectNode = next.xynodes.find((n) => n.type !== "empty" && n.data.column === "subjects" && n.data.fqn === subjectId) ?? findRootSubject(next.xynodes);
-		const currentSubjectNode = findRootSubject(currentNodes);
-		const existingNode = navigateFromNode ? currentNodes.find((n) => n.id === navigateFromNode) : currentNodes.find((n) => n.type !== "empty" && n.data.column !== "subjects" && n.data.fqn === subjectId);
-		if (!nextSubjectNode || !existingNode || nextSubjectNode.type === "empty" || !currentSubjectNode || nextSubjectNode.data.fqn === currentSubjectNode.data.fqn) {
-			await xyflow.setViewport(nextviewport);
-			return updateXYData();
-		}
-		const nextSubjectCenter = {
-			x: nextSubjectNode.position.x + (nextSubjectNode.initialWidth ?? 0) / 2,
-			y: nextSubjectNode.position.y + (nextSubjectNode.initialHeight ?? 0) / 2
-		};
-		const currentSubjectCenter = getNodeCenter(xyflow.getInternalNode(currentSubjectNode.id));
-		const nested = /* @__PURE__ */ new Set();
-		currentNodes.forEach((n) => {
-			if (n.id === existingNode.id) return;
-			if (n.data.column === "subjects") {
-				nested.add(n.id);
-				return;
-			}
-			if (n.parentId && (n.parentId === existingNode.id || nested.has(n.parentId))) nested.add(n.id);
-		});
-		currentNodes = updateNodes(currentNodes, currentNodes.flatMap((n) => {
-			if (nested.has(n.id)) return [];
-			if (n.id !== existingNode.id) return {
-				...n,
-				data: {
-					...n.data,
-					dimmed: n.data.column === "subjects" ? "immediate" : true
-				}
-			};
-			return {
-				...omit(n, ["parentId"]),
-				position: {
-					x: currentSubjectCenter.x - n.initialWidth / 2,
-					y: currentSubjectCenter.y - n.initialHeight / 2
-				},
-				zIndex: ZIndexes.Max,
-				hidden: false,
-				data: {
-					...n.data,
-					dimmed: false
-				}
-			};
-		}));
-		parent.send({
-			type: "update.xydata",
-			xynodes: currentNodes,
-			xyedges: []
-		});
-		await delay(120);
-		next.xynodes = next.xynodes.map(Base.setDimmed(false));
-		if (signal.aborted) return updateXYData();
-		const duration = 300;
-		xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, {
-			zoom,
-			duration,
-			interpolate: "smooth"
-		});
-		await delay(duration);
-		await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
-		return updateXYData();
-	}) },
+	actors: { layouter },
 	guards: {
 		hasViewId: ({ context }) => context.viewId !== null,
 		isReady: ({ context }) => context.xyflow !== null && context.xystore !== null && context.layouted !== null,
@@ -371,4 +372,4 @@ var relationshipsBrowserLogic = machine.createMachine({
 	exit: dispose()
 });
 //#endregion
-export { relationshipsBrowserLogic };
+export { layouter, relationshipsBrowserLogic };

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

@@ -103,4 +103,4 @@ var CompoundPorts = ({ data }) => /* @__PURE__ */ jsxs(Fragment, { children: [da
 	}
 }, id))] });
 //#endregion
-export { CompoundNode, ElementNode };
+export { CompoundNode, CompoundPorts, ElementNode, ElementPorts };

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

@@ -52,4 +52,4 @@ function useRelationshipsBrowser() {
 	}), [actor]);
 }
 //#endregion
-export { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState };
+export { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserActor, useRelationshipsBrowserState };

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

@@ -3,9 +3,9 @@ import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
 import { useMemo } from "react";
 import { concat, filter, find, forEachObj, groupBy, 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";
-import { exact, preferSummary } from "@likec4/core/types";
 //#region src/overlays/relationships-browser/layout.ts
 /**
 * All constants related to the layout
@@ -423,4 +423,4 @@ function useRelationshipsView(subject, viewId, scope) {
 	]);
 }
 //#endregion
-export { LayoutRelationshipsViewResult, useRelationshipsView };
+export { LayoutRelationshipsViewResult, layoutRelationshipsView, useRelationshipsView };

package/dist/projects-overview/actor.js

@@ -6,9 +6,9 @@ import { ProjectsOverviewViewportPersistence } from "./persistence.js";
 import { applyEdgeChanges, applyNodeChanges, getViewportForBounds } from "@xyflow/react";
 import { clamp } from "remeda";
 import { invariant, nonNullable, nonexhaustive } from "@likec4/core";
-import { assertEvent, setup } from "xstate";
 import { animate, mapValue, motionValue, stagger, styleEffect } from "motion";
-import { assign as assign$1, emit as emit$1 } from "xstate/actions";
+import { assertEvent, setup } from "xstate";
+import { assign as assign$1, emit } from "xstate/actions";
 //#region src/projects-overview/actor.ts
 var machine = setup({
 	types: {
@@ -247,7 +247,7 @@ var projectOverviewLogic = machine.createMachine({
 					});
 				}
 			],
-			on: { "emit.navigate.to": { actions: emit$1(({ event }) => ({
+			on: { "emit.navigate.to": { actions: emit(({ event }) => ({
 				...event,
 				type: "navigate.to"
 			})) } }
@@ -263,4 +263,4 @@ function sleep(ms) {
 	return new Promise((resolve) => setTimeout(resolve, ms));
 }
 //#endregion
-export { projectOverviewLogic };
+export { fitDiagram, onMouseEnterOrLeave, projectOverviewLogic, restoreViewport };

package/dist/search/Search.js

@@ -194,4 +194,4 @@ var SearchPanelContent = forwardRef((_, ref) => {
 });
 SearchPanelContent.displayName = "SearchPanelContent";
 //#endregion
-export { Search, SearchPanelContent, bodyCss, dialogCss };
+export { Search, SearchPanelContent, bodyCss, dialogCss, scrollAreaCss };

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

@@ -32,8 +32,8 @@ var elementId = css({
 	whiteSpace: "nowrap",
 	padding: "[1px 5px]",
 	borderRadius: "sm",
-	background: `mantine.colors.dark[9]/30`,
-	_light: { background: `mantine.colors.gray[3]/20` }
+	background: `mantine.dark[9]/30`,
+	_light: { background: `mantine.gray[3]/20` }
 });
 var elementIcon = css({
 	["--likec4-icon-size"]: "24px",

package/dist/search/components/ViewsColum.js

@@ -12,8 +12,8 @@ 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 * as m from "motion/react-m";
 import { preferSummary } from "@likec4/core/types";
+import * as m from "motion/react-m";
 //#region src/search/components/ViewsColum.tsx
 var NothingFound = () => /* @__PURE__ */ jsx(Box$1, {
 	className: emptyBoX,

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

@@ -1,4 +1,4 @@
-import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '../../../styled-system';
+import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '../../../styled-system/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">>;