@likec4/diagram 1.57.0 → 1.59.0

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

@@ -95,21 +95,21 @@ var viewButton = css({
 	transition: "fast",
 	border: `1px dashed`,
 	borderColor: "default.border",
-	[viewTitleColor]: "{colors.mantine.colors.dark[1]}",
+	[viewTitleColor]: "{colors.mantine.dark[1]}",
 	_hover: {
 		background: "default.hover",
-		[iconColor]: "{colors.mantine.colors.dark[1]}",
+		[iconColor]: "{colors.mantine.dark[1]}",
 		[viewTitleColor]: "{colors.default.color}"
 	},
-	_dark: { background: "mantine.colors.dark[6]" },
+	_dark: { background: "mantine.dark[6]" },
 	_light: {
-		[iconColor]: "{colors.mantine.colors.gray[6]}",
-		[viewTitleColor]: "{colors.mantine.colors.gray[7]}",
-		_hover: { [iconColor]: "{colors.mantine.colors.gray[7]}" }
+		[iconColor]: "{colors.mantine.gray[6]}",
+		[viewTitleColor]: "{colors.mantine.gray[7]}",
+		_hover: { [iconColor]: "{colors.mantine.gray[7]}" }
 	},
 	"& .mantine-ThemeIcon-root": {
 		transition: "fast",
-		color: `[var(${iconColor}, {colors.mantine.colors.dark[2]})]`,
+		color: `[var(${iconColor}, {colors.mantine.dark[2]})]`,
 		"--ti-size": "22px",
 		_hover: { color: "default.color" }
 	},
@@ -121,7 +121,7 @@ var viewButton = css({
 });
 var viewButtonTitle = css({
 	transition: "fast",
-	color: `[var(${viewTitleColor}, {colors.mantine.colors.gray[7]})]`,
+	color: `[var(${viewTitleColor}, {colors.mantine.gray[7]})]`,
 	fontSize: "15px",
 	fontWeight: "medium",
 	lineHeight: "1.4"
@@ -135,12 +135,12 @@ var tabsRoot = css({
 	gap: "sm"
 });
 var tabsList = css({
-	background: "mantine.colors.gray[1]",
+	background: "mantine.gray[1]",
 	borderRadius: "sm",
 	flexWrap: "nowrap",
 	gap: "1.5",
 	padding: "1",
-	_dark: { background: "mantine.colors.dark[7]" }
+	_dark: { background: "mantine.dark[7]" }
 });
 var tabsTab = css({
 	fontSize: "xs",
@@ -149,11 +149,11 @@ var tabsTab = css({
 	padding: "[6px 8px]",
 	transition: "fast",
 	borderRadius: "sm",
-	color: "mantine.colors.gray[7]",
+	color: "mantine.gray[7]",
 	_hover: {
 		transitionTimingFunction: "out",
 		color: "default.color",
-		background: "mantine.colors.gray[3]"
+		background: "mantine.gray[3]"
 	},
 	["&[data-active]"]: {
 		transition: "none",
@@ -162,14 +162,14 @@ var tabsTab = css({
 		color: "default.color"
 	},
 	_dark: {
-		color: "mantine.colors.dark[1]",
+		color: "mantine.dark[1]",
 		_hover: {
 			color: "white",
-			background: "mantine.colors.dark[6]"
+			background: "mantine.dark[6]"
 		},
 		[`&:is([data-active])`]: {
 			color: "white",
-			background: "mantine.colors.dark[5]"
+			background: "mantine.dark[5]"
 		}
 	}
 });
@@ -209,7 +209,7 @@ var resizeHandle = css({
 	width: "14px",
 	height: "14px",
 	border: `3.5px solid`,
-	borderColor: "mantine.colors.dark[3]",
+	borderColor: "mantine.dark[3]",
 	borderTop: "none",
 	borderLeft: "none",
 	borderRadius: "xs",
@@ -219,7 +219,7 @@ var resizeHandle = css({
 	cursor: "se-resize",
 	_hover: {
 		borderWidth: "4px",
-		borderColor: "mantine.colors.dark[1]"
+		borderColor: "mantine.dark[1]"
 	}
 });
 //#endregion

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

@@ -7,5 +7,5 @@ type ElementDetailsCardProps = {
     onClose: () => void;
     fqn: Fqn;
 };
-export declare function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose, }: ElementDetailsCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose, }: ElementDetailsCardProps): import("react").JSX.Element;
 export {};

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

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
 export declare function MetadataProvider({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 interface MetadataValueProps {
     label: string;
     value: string | string[];
 }
-export declare function MetadataValue({ label, value }: MetadataValueProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataValue({ label, value }: MetadataValueProps): import("react").JSX.Element;
 export {};

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

@@ -48,10 +48,10 @@ function MultiValueDisplay({ values, isExpanded }) {
 			children: [/* @__PURE__ */ jsx(Text, {
 				className: css({
 					fontSize: "xs",
-					color: "mantine.colors.gray[5]",
+					color: "mantine.gray[5]",
 					fontWeight: "medium",
 					flexShrink: 0,
-					_dark: { color: "mantine.colors.dark[3]" }
+					_dark: { color: "mantine.dark[3]" }
 				}),
 				children: "•"
 			}), /* @__PURE__ */ jsx(Box, {
@@ -91,7 +91,7 @@ function MultiValueDisplay({ values, isExpanded }) {
 					color: "text",
 					borderRadius: "sm",
 					border: "1px solid",
-					borderColor: "mantine.colors.gray[3]",
+					borderColor: "mantine.gray[3]",
 					whiteSpace: "nowrap",
 					overflow: "hidden",
 					textOverflow: "ellipsis",
@@ -100,8 +100,8 @@ function MultiValueDisplay({ values, isExpanded }) {
 					flex: "0 1 auto",
 					userSelect: "all",
 					_dark: {
-						backgroundColor: "mantine.colors.dark[9]",
-						borderColor: "mantine.colors.dark[4]"
+						backgroundColor: "mantine.dark[9]",
+						borderColor: "mantine.dark[4]"
 					}
 				}),
 				title: value,
@@ -109,10 +109,10 @@ function MultiValueDisplay({ values, isExpanded }) {
 			}), index < values.length - 1 && /* @__PURE__ */ jsx(Text, {
 				className: css({
 					fontSize: "xs",
-					color: "mantine.colors.gray[5]",
+					color: "mantine.gray[5]",
 					fontWeight: "medium",
 					flexShrink: 0,
-					_dark: { color: "mantine.colors.dark[3]" }
+					_dark: { color: "mantine.dark[3]" }
 				}),
 				children: "•"
 			})]
@@ -143,11 +143,11 @@ function MetadataValue({ label, value }) {
 			whiteSpace: "nowrap",
 			transition: "all 150ms ease",
 			_hover: {
-				backgroundColor: "mantine.colors.gray[1]",
-				color: "mantine.colors.primary[6]",
+				backgroundColor: "mantine.gray[1]",
+				color: "mantine.primary[6]",
 				_dark: {
-					backgroundColor: "mantine.colors.dark[7]",
-					color: "mantine.colors.primary[4]"
+					backgroundColor: "mantine.dark[7]",
+					color: "mantine.primary[4]"
 				}
 			}
 		}),
@@ -166,13 +166,13 @@ function MetadataValue({ label, value }) {
 					className: css({
 						fontSize: "xs",
 						fontWeight: "medium",
-						color: "mantine.colors.gray[6]",
-						backgroundColor: "mantine.colors.gray[1]",
+						color: "mantine.gray[6]",
+						backgroundColor: "mantine.gray[1]",
 						padding: "[1px 4px]",
 						borderRadius: "xs",
 						_dark: {
-							color: "mantine.colors.dark[2]",
-							backgroundColor: "mantine.colors.dark[6]"
+							color: "mantine.dark[2]",
+							backgroundColor: "mantine.dark[6]"
 						}
 					}),
 					children: elements.length

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

@@ -8,8 +8,8 @@ var treeNodeLabel = css({
 });
 var label = css({
 	transition: "fast",
-	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",
@@ -30,9 +30,9 @@ var instanceLabel = cx(label, css({
 	paddingInlineEnd: "2.5",
 	borderRadius: "sm",
 	alignItems: "center",
-	color: "mantine.colors.gray[7]",
-	_dark: { color: "mantine.colors.gray.lightColor" },
-	_hover: { background: "mantine.colors.gray.lightHover" },
+	color: "mantine.gray[7]",
+	_dark: { color: "mantine.gray.lightColor" },
+	_hover: { background: "mantine.gray.lightHover" },
 	"& .tabler-icon": {
 		transition: "fast",
 		width: "90%",

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.d.ts

@@ -3,5 +3,5 @@ type RelationshipsTabPanelProps = {
     node: LikeC4Model.Node | null;
     element: LikeC4Model.Element;
 };
-export declare function TabPanelRelationships({ node, element, }: RelationshipsTabPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabPanelRelationships({ node, element, }: RelationshipsTabPanelProps): import("react").JSX.Element;
 export {};

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.d.ts

@@ -20,6 +20,6 @@ type TabPanelStructureProps = {
 export declare const ElementLabel: ({ element, }: {
     element: LikeC4Model.Element;
     type: "ancestor" | "current" | "descedant";
-}) => import("react/jsx-runtime").JSX.Element;
-export declare function TabPanelStructure({ element, }: TabPanelStructureProps): import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
+export declare function TabPanelStructure({ element, }: TabPanelStructureProps): import("react").JSX.Element;
 export {};

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/RelationshipDetails.d.ts

@@ -2,4 +2,4 @@ import { RelationshipDetailsActorRef } from './actor';
 export type RelationshipDetailsProps = {
     actorRef: RelationshipDetailsActorRef;
 };
-export declare function RelationshipDetails({ actorRef }: RelationshipDetailsProps): import("react/jsx-runtime").JSX.Element;
+export declare function RelationshipDetails({ actorRef }: RelationshipDetailsProps): import("react").JSX.Element;

package/dist/overlays/relationship-details/SelectEdge.d.ts

@@ -2,4 +2,4 @@ import { DiagramEdge, DiagramView } from '@likec4/core';
 export declare const SelectEdge: ({ edge, view, }: {
     edge: DiagramEdge;
     view: DiagramView;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => import("react").JSX.Element | null;

package/dist/overlays/relationship-details/custom/ElementActions.d.ts

@@ -1,2 +1,2 @@
 import { RelationshipDetailsTypes as Types } from '../_types';
-export declare const ElementActions: (props: Types.NodeProps<"element">) => import("react/jsx-runtime").JSX.Element;
+export declare const ElementActions: (props: Types.NodeProps<"element">) => import("react").JSX.Element;

package/dist/overlays/relationship-details/custom/nodeTypes.d.ts

@@ -1,9 +1,9 @@
 import { BaseNodePropsWithData } from '../../../base';
 import { RelationshipDetailsTypes } from '../_types';
-export declare function ElementNode(props: RelationshipDetailsTypes.NodeProps<'element'>): import("react/jsx-runtime").JSX.Element;
-export declare function CompoundNode(props: RelationshipDetailsTypes.NodeProps<'compound'>): import("react/jsx-runtime").JSX.Element;
+export declare function ElementNode(props: RelationshipDetailsTypes.NodeProps<'element'>): import("react").JSX.Element;
+export declare function CompoundNode(props: RelationshipDetailsTypes.NodeProps<'compound'>): import("react").JSX.Element;
 type ElementPortsProps = BaseNodePropsWithData<Pick<RelationshipDetailsTypes.ElementNodeData, 'ports' | 'height'>>;
-export declare function ElementPorts({ data: { ports, height: h } }: ElementPortsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ElementPorts({ data: { ports, height: h } }: ElementPortsProps): import("react").JSX.Element;
 type CompoundPortsProps = BaseNodePropsWithData<Pick<RelationshipDetailsTypes.CompoundNodeData, 'ports'>>;
-export declare function CompoundPorts({ data }: CompoundPortsProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundPorts({ data }: CompoundPortsProps): import("react").JSX.Element;
 export {};

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/RelationshipsBrowser.d.ts

@@ -2,4 +2,4 @@ import { RelationshipsBrowserActorRef } from './actor';
 export type RelationshipsBrowserProps = {
     actorRef: RelationshipsBrowserActorRef;
 };
-export declare function RelationshipsBrowser({ actorRef }: RelationshipsBrowserProps): import("react/jsx-runtime").JSX.Element;
+export declare function RelationshipsBrowser({ actorRef }: RelationshipsBrowserProps): import("react").JSX.Element;

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/SelectElement.d.ts

@@ -1,2 +1,2 @@
 import { MemoExoticComponent } from 'react';
-export declare const SelectElement: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare const SelectElement: MemoExoticComponent<() => import("react").JSX.Element>;