@likec4/diagram 1.58.0 → 1.59.0

package/dist/likec4diagram/custom/nodes/ElementActions.d.ts

@@ -26,7 +26,7 @@ type WithExtraButtons = {
 };
 export type ElementActionsProps = SimplifyDeep<{
     selected?: boolean;
-    data: Pick<Types.ElementNodeData, 'id' | 'modelFqn' | 'navigateTo'> & BaseNodeData;
+    data: Pick<Types.ElementNodeData, 'id' | 'modelFqn' | 'navigateTo' | 'title'> & BaseNodeData;
 }> & WithExtraButtons;
 /**
  * Center-Bottom action bar, includes zoom-in and browse relationships actions, if the features are enabled.
@@ -56,7 +56,7 @@ export type ElementActionsProps = SimplifyDeep<{
 export declare function ElementActions({ extraButtons, ...props }: ElementActionsProps): import("react").JSX.Element;
 export type DeploymentElementActionsProps = SimplifyDeep<{
     selected?: boolean;
-    data: Pick<Types.DeploymentElementNodeData, 'id' | 'modelFqn' | 'navigateTo'> & BaseNodeData;
+    data: Pick<Types.DeploymentElementNodeData, 'id' | 'modelFqn' | 'navigateTo' | 'title'> & BaseNodeData;
 }> & WithExtraButtons;
 /**
  * Center-Bottom action bar, includes zoom-in and browse relationships actions, if the features are enabled.

package/dist/likec4diagram/custom/nodes/ElementActions.js

@@ -1,6 +1,7 @@
 import "../../../_virtual/_rolldown/runtime.js";
 import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
 import { useDiagram } from "../../../hooks/safeContext.js";
+import { readableText } from "../../../utils/readableText.js";
 import { ElementActionButtons } from "../../../base-primitives/element/ElementActionButtons.js";
 import { IconTransform, IconZoomScan } from "@tabler/icons-react";
 import { useMemo } from "react";
@@ -35,11 +36,13 @@ import { hasAtLeast } from "remeda";
 function ElementActions({ extraButtons, ...props }) {
 	const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
 	const diagram = useDiagram();
-	const { id, navigateTo, modelFqn } = props.data;
+	const { id, navigateTo, modelFqn, title } = props.data;
 	let buttons = useMemo(() => {
 		const buttons = [];
+		const labelTitle = readableText(title) || id;
 		if (navigateTo && enableNavigateTo) buttons.push({
 			key: "navigate",
+			ariaLabel: "Navigate to view",
 			icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
 			onClick: (e) => {
 				e.stopPropagation();
@@ -48,6 +51,7 @@ function ElementActions({ extraButtons, ...props }) {
 		});
 		if (enableRelationshipBrowser) buttons.push({
 			key: "relationships",
+			ariaLabel: `Browse ${labelTitle} relationships`,
 			icon: /* @__PURE__ */ jsx(IconTransform, {}),
 			onClick: (e) => {
 				e.stopPropagation();
@@ -61,6 +65,7 @@ function ElementActions({ extraButtons, ...props }) {
 		modelFqn,
 		navigateTo,
 		id,
+		title,
 		diagram
 	]);
 	if (extraButtons && hasAtLeast(extraButtons, 1)) buttons = [...buttons, ...extraButtons];
@@ -97,11 +102,13 @@ function ElementActions({ extraButtons, ...props }) {
 var DeploymentElementActions = ({ extraButtons, ...props }) => {
 	const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
 	const diagram = useDiagram();
-	const { id, navigateTo, modelFqn } = props.data;
+	const { id, navigateTo, modelFqn, title } = props.data;
 	let buttons = useMemo(() => {
 		const buttons = [];
+		const labelTitle = readableText(title) || id;
 		if (navigateTo && enableNavigateTo) buttons.push({
 			key: "navigate",
+			ariaLabel: "Navigate to view",
 			icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
 			onClick: (e) => {
 				e.stopPropagation();
@@ -110,6 +117,7 @@ var DeploymentElementActions = ({ extraButtons, ...props }) => {
 		});
 		if (enableRelationshipBrowser && !!modelFqn) buttons.push({
 			key: "relationships",
+			ariaLabel: `Browse ${labelTitle} relationships`,
 			icon: /* @__PURE__ */ jsx(IconTransform, {}),
 			onClick: (e) => {
 				e.stopPropagation();
@@ -122,7 +130,9 @@ var DeploymentElementActions = ({ extraButtons, ...props }) => {
 		enableRelationshipBrowser,
 		modelFqn,
 		navigateTo,
-		id
+		id,
+		title,
+		diagram
 	]);
 	if (extraButtons && hasAtLeast(extraButtons, 1)) buttons = [...buttons, ...extraButtons];
 	return /* @__PURE__ */ jsx(ElementActionButtons, {

package/dist/likec4diagram/custom/nodes/NodeNotes.js

@@ -31,10 +31,6 @@ function NodeNotesInternal({ data }) {
 		min: 250,
 		max: 500
 	});
-	clamp(data.height ?? 0, {
-		min: 200,
-		max: 600
-	});
 	const [expanded, handlers] = useDisclosure(false, {});
 	const id = stringHash(data.id + (markdown.md ?? markdown.txt));
 	const onClickCapture = useCallbackRef$1((e) => {

package/dist/likec4diagram/custom/nodes/SequenceActorNode.js

@@ -12,6 +12,7 @@ import { css } from "@likec4/styles/css";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Handle, Position } from "@xyflow/react";
 import { isTruthy } from "remeda";
+import { m } from "motion/react";
 import { Box } from "@likec4/styles/jsx";
 //#region src/likec4diagram/custom/nodes/SequenceActorNode.tsx
 var positionMap = {
@@ -20,26 +21,37 @@ var positionMap = {
 	top: Position.Top,
 	bottom: Position.Bottom
 };
-var ActorStepPort = ({ data, port: p }) => {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Box, {
+var ActorStepPort = ({ nodeProps: { selected, data }, port: p }) => {
+	let scaleX = 1;
+	let scaleY = 1;
+	if (data.hovered || selected) {
+		scaleX = 1.8;
+		scaleY = 1.1;
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(m.div, {
 		"data-likec4-color": data.color,
 		className: css({
 			position: "absolute",
 			backgroundColor: "var(--likec4-palette-fill)",
-			rounded: "xs",
-			width: {
-				base: "5px",
-				_whenHovered: "7px",
-				_whenSelected: "7px"
-			},
-			transition: "fast",
-			translateX: "-1/2",
-			translateY: "-1/2",
-			translate: "auto"
+			rounded: "xs"
 		}),
+		initial: false,
+		animate: {
+			scaleX,
+			scaleY
+		},
+		transition: {
+			type: "spring",
+			stiffness: 400,
+			damping: 30
+		},
 		style: {
+			x: "-50%",
+			y: "-50%",
 			top: p.cy,
 			left: p.cx,
+			width: 5,
+			visibility: p.hidden ? "hidden" : "visible",
 			height: p.height
 		}
 	}), /* @__PURE__ */ jsx(Handle, {
@@ -73,16 +85,15 @@ function SequenceActorNode(props) {
 				pointerEvents: "none",
 				transition: "fast",
 				translateX: "-1/2",
-				translate: "auto"
+				translate: "auto",
+				zIndex: "z-0"
 			}),
 			style: {
 				backgroundColor: "var(--likec4-palette-stroke)",
 				opacity: isHovered ? .6 : .4,
 				left: "50%",
 				width: isHovered ? 3 : 2,
-				height: viewHeight - positionAbsoluteY,
-				zIndex: -1,
-				pointerEvents: "none"
+				height: viewHeight - positionAbsoluteY
 			}
 		}),
 		/* @__PURE__ */ jsxs(ElementNodeContainer, {
@@ -90,7 +101,10 @@ function SequenceActorNode(props) {
 			children: [
 				enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
 				/* @__PURE__ */ jsx(ElementShape, { ...props }),
-				/* @__PURE__ */ jsx(ElementData, { ...props }),
+				/* @__PURE__ */ jsx(ElementData, {
+					...props,
+					"aria-hidden": true
+				}),
 				hasModelFqn(props) && /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx(ElementActions, { ...props }),
 					enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, {
@@ -104,7 +118,7 @@ function SequenceActorNode(props) {
 		}),
 		ports.map((p) => /* @__PURE__ */ jsx(ActorStepPort, {
 			port: p,
-			data: props.data
+			nodeProps: props
 		}, p.id))
 	] });
 }
@@ -116,7 +130,6 @@ function SequenceParallelArea(props) {
 			height: "100%",
 			border: "default",
 			rounded: "sm",
-			borderWidth: 1,
 			"--_color": {
 				base: "var(--likec4-palette-stroke)",
 				_dark: "[color-mix(in oklab, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]"

package/dist/likec4diagram/custom/nodes/SequenceSubFlow.d.ts

@@ -0,0 +1,2 @@
+import { Types } from '../../types';
+export declare function SequenceSubflowArea(props: Types.NodeProps<'seq-subflow'>): import("react").JSX.Element;

package/dist/likec4diagram/custom/nodes/SequenceSubFlow.js

@@ -0,0 +1,234 @@
+import "../../../_virtual/_rolldown/runtime.js";
+import { useDiagram } from "../../../hooks/safeContext.js";
+import { css, cx, sva } from "@likec4/styles/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "@likec4/core";
+import { hstack } from "@likec4/styles/patterns";
+//#region src/likec4diagram/custom/nodes/SequenceSubFlow.tsx
+var labelStyle = css.raw({
+	color: "colorPalette.text",
+	fontSize: "[9px]",
+	fontWeight: "bold",
+	lineHeight: "xs",
+	letterSpacing: "tight",
+	textTransform: "uppercase"
+});
+var withBorder = css.raw({ border: "{borderWidths.2} solid {colors.colorPalette.border}" });
+var withBackground = css.raw({
+	background: "colorPalette",
+	["&[data-state=\"hovered\"]"]: {
+		background: "colorPalette.hovered",
+		transition: "faster",
+		transitionDelay: "faster",
+		transitionTimingFunction: "out",
+		transitionProperty: "background"
+	},
+	["&[data-state=\"collapsed\"]"]: { background: "colorPalette.label" }
+});
+var recipe = sva({
+	slots: [
+		"root",
+		"content",
+		"label",
+		"title"
+	],
+	base: {
+		root: css.raw({
+			width: "100%",
+			height: "100%",
+			padding: "0"
+		}),
+		content: hstack.raw({
+			gap: "2",
+			width: "100%",
+			alignItems: "center"
+		}),
+		label: css.raw(labelStyle),
+		title: css.raw({
+			flex: "1",
+			color: `[oklch(from {colors.colorPalette.text} l calc(c - 0.15) h)]`,
+			fontSize: "xs",
+			lineHeight: "xxs",
+			fontWeight: "medium",
+			truncate: true
+		})
+	},
+	variants: { variant: {
+		subflow: {
+			root: css.raw(withBackground, withBorder, { rounded: "md" }),
+			label: css.raw(withBorder, {
+				alignSelf: "stretch",
+				paddingInline: "2",
+				paddingBlock: "1",
+				background: "colorPalette.label",
+				width: "max-content",
+				borderTopLeftRadius: "sm",
+				borderBottomRightRadius: "sm",
+				borderTop: "none",
+				borderLeft: "none",
+				[":is([data-state=\"collapsed\"]) &"]: {
+					background: "none",
+					borderColor: "transparent"
+				}
+			})
+		},
+		branch: {
+			root: css.raw(withBackground, withBorder, {
+				rounded: "0",
+				borderTopWidth: "1",
+				["&[data-is-last=\"true\"]"]: {
+					borderBottomLeftRadius: "md",
+					borderBottomRightRadius: "md"
+				},
+				["&:not([data-is-last=\"true\"])"]: { borderBottomWidth: "1" },
+				["&[data-state=\"collapsed\"]"]: { background: "colorPalette.header" }
+			}),
+			label: css.raw({
+				position: "relative",
+				background: "colorPalette.label",
+				paddingLeft: "4.5",
+				paddingRight: "2",
+				paddingBlock: "1",
+				marginBlock: "2",
+				marginInlineStart: "2",
+				rounded: "sm",
+				minWidth: "[40px]",
+				width: "min-content",
+				textAlign: "center",
+				_before: {
+					position: "absolute",
+					content: "\" \"",
+					background: "currentColor",
+					width: "[5px]",
+					height: "[5px]",
+					opacity: "[.6]",
+					rounded: "pill",
+					top: "[50%]",
+					left: "2",
+					transform: "translateY(-50%)"
+				}
+			})
+		},
+		withbranches: { content: css.raw(withBorder, {
+			width: "100%",
+			borderTopLeftRadius: "md",
+			borderTopRightRadius: "md",
+			paddingInline: "2",
+			borderBottomWidth: "1",
+			background: "colorPalette.header"
+		}) }
+	} },
+	defaultVariants: { variant: "subflow" },
+	className: "seq-subflow"
+});
+/**
+* PandaCSS `colorPalette` classes for each sub-flow palette.
+* Declared as literals so the static analyzer can extract them.
+*/
+var palette = {
+	loop: css({ colorPalette: "subflow.loop" }),
+	opt: css({ colorPalette: "subflow.opt" }),
+	par: css({ colorPalette: "subflow.par" }),
+	break: css({ colorPalette: "subflow.break" }),
+	alt: css({ colorPalette: "subflow.alt" }),
+	try: css({ colorPalette: "subflow.try" })
+};
+var flowPresentation = {
+	loop: {
+		paletteClass: palette.loop,
+		variant: "subflow",
+		label: "loop"
+	},
+	opt: {
+		paletteClass: palette.opt,
+		variant: "subflow",
+		label: "opt"
+	},
+	par: {
+		paletteClass: palette.par,
+		variant: "subflow",
+		label: "par"
+	},
+	break: {
+		paletteClass: palette.break,
+		variant: "subflow",
+		label: "break"
+	},
+	alt: {
+		paletteClass: palette.alt,
+		variant: "withbranches",
+		label: "alt"
+	},
+	"alt-when": {
+		paletteClass: palette.alt,
+		variant: "branch",
+		label: "when"
+	},
+	"alt-else": {
+		paletteClass: palette.alt,
+		variant: "branch",
+		label: "else"
+	},
+	"alt-if": {
+		paletteClass: palette.alt,
+		variant: "branch",
+		label: "if"
+	},
+	try: {
+		paletteClass: palette.try,
+		variant: "withbranches",
+		label: "try"
+	},
+	"try-block": {
+		paletteClass: palette.try,
+		variant: "branch",
+		label: "block"
+	},
+	"try-catch": {
+		paletteClass: palette.break,
+		variant: "branch",
+		label: "catch"
+	},
+	"try-finally": {
+		paletteClass: palette.break,
+		variant: "branch",
+		label: "finally"
+	}
+};
+function SequenceSubflowArea(props) {
+	const { data } = props;
+	const isDimmed = data.dimmed ?? false;
+	const diagram = useDiagram();
+	const toggleSequenceFlow = (event) => {
+		event.stopPropagation();
+		diagram.toggleSequenceFlow(data.flowId);
+	};
+	const { paletteClass, variant, label } = flowPresentation[data.flowType];
+	const classes = recipe({ variant });
+	const headerHeight = data.flowType === "alt" || data.flowType === "try" ? data.headerHeight : void 0;
+	let state = void 0;
+	if (data.collapsed === true) state = "collapsed";
+	else if (data.hovered) state = "hovered";
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(classes.root, paletteClass),
+		"data-is-first": data.isFirst === true,
+		"data-is-last": data.isLast === true,
+		"data-state": state,
+		...isDimmed !== false && { "data-likec4-dimmed": isDimmed },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: classes.content,
+			style: { height: headerHeight },
+			children: [/* @__PURE__ */ jsx("div", {
+				className: classes.label,
+				onClick: toggleSequenceFlow,
+				children: label
+			}), data.title && /* @__PURE__ */ jsx("div", {
+				className: classes.title,
+				onClick: toggleSequenceFlow,
+				children: data.title
+			})]
+		})
+	});
+}
+//#endregion
+export { SequenceSubflowArea };

package/dist/likec4diagram/custom/nodes/index.d.ts

@@ -2,6 +2,7 @@ export { CompoundActions } from './CompoundActions';
 export { DeploymentElementActions, ElementActions } from './ElementActions';
 export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode, } from './nodes';
 export { SequenceActorNode, SequenceParallelArea } from './SequenceActorNode';
+export { SequenceSubflowArea } from './SequenceSubFlow';
 export { NodeDrifts, type NodeDriftsProps } from './NodeDrifts';
 export * from './CompoundActions';
 export * from './ElementActions';

package/dist/likec4diagram/custom/nodes/nodes.js

@@ -72,7 +72,10 @@ function ElementNode(props) {
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
 			/* @__PURE__ */ jsx(ElementShape, { ...props }),
-			/* @__PURE__ */ jsx(ElementData, { ...props }),
+			/* @__PURE__ */ jsx(ElementData, {
+				...props,
+				"aria-hidden": true
+			}),
 			enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
 			/* @__PURE__ */ jsx(ElementActions, { ...props }),
 			enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
@@ -89,7 +92,10 @@ function DeploymentNode(props) {
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
 			/* @__PURE__ */ jsx(ElementShape, { ...props }),
-			/* @__PURE__ */ jsx(ElementData, { ...props }),
+			/* @__PURE__ */ jsx(ElementData, {
+				...props,
+				"aria-hidden": true
+			}),
 			enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
 			/* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
 			enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
@@ -115,7 +121,10 @@ function CompoundElementNode(props) {
 		nodeProps: props,
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-			/* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+			/* @__PURE__ */ jsx(CompoundTitle, {
+				...props,
+				"aria-hidden": true
+			}),
 			/* @__PURE__ */ jsx(CompoundActions, { ...props }),
 			enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
 			!enableReadOnly && /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }),
@@ -130,7 +139,10 @@ function CompoundDeploymentNode(props) {
 		nodeProps: props,
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-			/* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+			/* @__PURE__ */ jsx(CompoundTitle, {
+				...props,
+				"aria-hidden": true
+			}),
 			/* @__PURE__ */ jsx(CompoundActions, { ...props }),
 			enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
 			!enableReadOnly && /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }),
@@ -145,7 +157,10 @@ function ViewGroupNode(props) {
 		nodeProps: props,
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-			/* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+			/* @__PURE__ */ jsx(CompoundTitle, {
+				...props,
+				"aria-hidden": true
+			}),
 			/* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
 		]
 	});

package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js

@@ -155,4 +155,4 @@ function OpacityOption({ elementOpacity = 100, onOpacityChange }) {
 	});
 }
 //#endregion
-export { ColorButton };
+export { ColorButton, ColorSwatches, OpacityOption };

package/dist/likec4diagram/custom/nodes/toolbar/_shared.js

@@ -100,4 +100,4 @@ function BorderStyleOption({ elementBorderStyle = "none", onChange }) {
 	});
 }
 //#endregion
-export { BorderStyleOption, BrowseRelationshipsButton, GoToSourceButton };
+export { BorderStyleOption, BrowseRelationshipsButton, GoToSourceButton, Tooltip$1 as Tooltip };

package/dist/likec4diagram/relationship-popover/RelationshipPopover.js

@@ -3,8 +3,8 @@ import { roundDpr } from "../../utils/roundDpr.js";
 import { useRootContainerRef } from "../../context/RootContainerContext.js";
 import { useDiagramEventHandlers } from "../../context/DiagramEventHandlers.js";
 import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
-import { useDiagram } from "../../hooks/safeContext.js";
-import { useDiagramContext, useOnDiagramEvent } from "../../hooks/useDiagram.js";
+import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.js";
+import { useOnDiagramEvent } from "../../hooks/useDiagram.js";
 import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
 import { findDiagramEdge, findDiagramNode } from "../state/utils.js";
 import { Markdown } from "../../base-primitives/Markdown.js";
@@ -25,7 +25,7 @@ import { Box as Box$1, HStack, VStack, styled } from "@likec4/styles/jsx";
 import { bleed } from "@likec4/styles/patterns";
 import { autoPlacement, autoUpdate, computePosition, hide, offset, size } from "@floating-ui/dom";
 //#region src/likec4diagram/relationship-popover/RelationshipPopover.tsx
-function selectDiagramContext(c) {
+var selector = selectDiagramContext((c) => {
 	let selected = null;
 	for (const edge of c.xyedges) if (edge.selected) {
 		if (selected) {
@@ -38,12 +38,12 @@ function selectDiagramContext(c) {
 		viewId: c.view.id,
 		selected
 	};
-}
+});
 var RelationshipPopover = memo(() => {
 	const likec4model = useLikeC4Model();
 	const actorRef = useActorRef(RelationshipPopoverActorLogic);
 	const diagram = useDiagram();
-	const { viewId, selected } = useDiagramContext(selectDiagramContext);
+	const { viewId, selected } = useDiagramSelector(selector);
 	const openedEdgeId = useSelector(actorRef, (s) => s.hasTag("opened") ? s.context.edgeId : null);
 	useOnDiagramEvent("navigateTo", () => {
 		actorRef.send({ type: "close" });
@@ -95,14 +95,14 @@ var RelationshipPopover = memo(() => {
 		diagram,
 		openedEdgeId
 	]);
-	const { diagramEdge, sourceNode, targetNode } = useDiagramContext((ctx) => {
+	const { diagramEdge, sourceNode, targetNode } = useDiagramSelector(useCallback(({ context: ctx }) => {
 		const diagramEdge = openedEdgeId ? findDiagramEdge(ctx, openedEdgeId) : null;
 		return {
 			diagramEdge,
 			sourceNode: diagramEdge ? findDiagramNode(ctx, diagramEdge.source) : null,
 			targetNode: diagramEdge ? findDiagramNode(ctx, diagramEdge.target) : null
 		};
-	}, shallowEqual, [openedEdgeId]);
+	}, [openedEdgeId]), shallowEqual);
 	if (!diagramEdge || !sourceNode || !targetNode || isEmpty(diagramEdge.relations)) return null;
 	const [direct, nested] = pipe(diagramEdge.relations, map((id) => {
 		try {
@@ -340,8 +340,8 @@ var Relationship = forwardRef(({ viewId, relationship: r, sourceNode, targetNode
 			gap: "1",
 			rounded: "sm",
 			backgroundColor: { _hover: {
-				base: "mantine.colors.gray[1]",
-				_dark: "mantine.colors.dark[5]/70"
+				base: "mantine.gray[1]",
+				_dark: "mantine.dark[5]/70"
 			} }
 		}),
 		children: [
@@ -448,7 +448,7 @@ var Relationship = forwardRef(({ viewId, relationship: r, sourceNode, targetNode
 					className: css({
 						userSelect: "all",
 						wordBreak: "break-word",
-						minWidth: 0
+						minWidth: "0"
 					}),
 					children: r.kind
 				})]
@@ -460,7 +460,7 @@ var Relationship = forwardRef(({ viewId, relationship: r, sourceNode, targetNode
 					className: css({
 						userSelect: "all",
 						wordBreak: "break-word",
-						minWidth: 0
+						minWidth: "0"
 					}),
 					children: r.technology
 				})]
@@ -469,10 +469,11 @@ var Relationship = forwardRef(({ viewId, relationship: r, sourceNode, targetNode
 				css: {
 					paddingLeft: "2.5",
 					py: "1.5",
-					borderLeft: "2px dotted",
+					borderLeftWidth: "2",
+					borderLeftStyle: "dotted",
 					borderLeftColor: {
-						base: "mantine.colors.gray[3]",
-						_dark: "mantine.colors.dark[4]"
+						base: "mantine.gray[3]",
+						_dark: "mantine.dark[4]"
 					}
 				},
 				children: /* @__PURE__ */ jsx(Markdown, {

package/dist/likec4diagram/relationship-popover/components.d.ts

@@ -1,6 +1,6 @@
 import { Color } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-import { StyledComponent } from '../../../styled-system';
+import { StyledComponent } from '../../../styled-system/types';
 export declare const Endpoint: ({ children, likec4color }: PropsWithChildren<{
     likec4color: Color;
 }>) => import("react").JSX.Element;