@likec4/diagram 1.60.0 → 1.61.0

package/dist/likec4diagram/custom/nodes/GraphElementNode.mjs

@@ -1,12 +1,12 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
-import { useDiagram } from "../../../hooks/safeContext.mjs";
 import { DefaultHandles } from "../../../base-primitives/NodeHandles.mjs";
+import { useDiagram } from "../../../hooks/safeContext.mjs";
 import { css } from "@likec4/styles/css";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box } from "@likec4/styles/jsx";
 import * as m from "motion/react-m";
 
-//#region src/likec4diagram/custom/nodes/GraphElementNode.tsx
+// src/likec4diagram/custom/nodes/GraphElementNode.tsx
 const circle = css({
 	flexShrink: 0,
 	width: "[100%]",
@@ -28,7 +28,7 @@ const label = css({
 	pointerEvents: "none",
 	fontSize: "xs",
 	lineHeight: "[1.2]",
-	color: "[var(--likec4-palette-hiContrast)]"
+	color: "text"
 });
 /**
 * Renders an element as a compact circle, used in the "graph" display variant of element views.
@@ -80,5 +80,4 @@ function GraphElementNode(props) {
 	});
 }
 
-//#endregion
 export { GraphElementNode };

package/dist/likec4diagram/custom/nodes/NodeDrifts.d.mts

@@ -1 +1,6 @@
-import "../../types.mjs";
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { Types } from "../../types.mjs";
+export type NodeDriftsProps = {
+  nodeProps: Types.NodeProps;
+};
+export declare function NodeDrifts({ nodeProps: { data } }: NodeDriftsProps): import("react").JSX.Element | null;

package/dist/likec4diagram/custom/nodes/NodeDrifts.mjs

@@ -1,11 +1,13 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { useIsComparingLayouts } from "../../../context/ComparingLayoutsContext.mjs";
 import { jsx } from "react/jsx-runtime";
 import { Box } from "@likec4/styles/jsx";
 
-//#region src/likec4diagram/custom/nodes/NodeDrifts.tsx
+// src/likec4diagram/custom/nodes/NodeDrifts.tsx
 function NodeDrifts({ nodeProps: { data } }) {
+	const isComparing = useIsComparingLayouts();
 	const drifts = data.drifts;
-	if (!drifts || drifts.length === 0) return null;
+	if (!isComparing || !drifts || drifts.length === 0) return null;
 	return /* @__PURE__ */ jsx(Box, {
 		className: "likec4-node-drifts",
 		css: {
@@ -20,5 +22,4 @@ function NodeDrifts({ nodeProps: { data } }) {
 	});
 }
 
-//#endregion
 export { NodeDrifts };

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

@@ -1,7 +1,7 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { MarkdownWithRefs } from "../../../components/markdown/MarkdownWithRefs.mjs";
 import { useCallbackRef as useCallbackRef$1 } from "../../../hooks/useCallbackRef.mjs";
 import { useOnDiagramEvent } from "../../../hooks/useDiagram.mjs";
-import { Markdown } from "../../../base-primitives/Markdown.mjs";
 import { css, cx } from "@likec4/styles/css";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ViewportPortal } from "@xyflow/react";
@@ -14,7 +14,7 @@ import { useDisclosure } from "@mantine/hooks";
 import { Box as Box$1 } from "@likec4/styles/jsx";
 import { nodeNotes } from "@likec4/styles/recipes";
 
-//#region src/likec4diagram/custom/nodes/NodeNotes.tsx
+// src/likec4diagram/custom/nodes/NodeNotes.tsx
 function NodeNotes({ data }) {
 	if (!hasProp(data, "notes") || isEmptyish(data.notes.md || data.notes.txt)) return null;
 	return /* @__PURE__ */ jsx(NodeNotesInternal2, { data });
@@ -95,7 +95,6 @@ function NodeNotesInternal({ data }) {
 			maxWidth: `min(calc(${width}px * 2), 50cqw)`
 		},
 		onMouseDownCapture: stopPropagation,
-		onClickCapture: stopPropagation,
 		onClick: stopPropagation,
 		children: /* @__PURE__ */ jsx(ScrollAreaAutosize, {
 			component: m.div,
@@ -104,7 +103,7 @@ function NodeNotesInternal({ data }) {
 				padding: "xs",
 				paddingRight: "xxs"
 			})),
-			children: /* @__PURE__ */ jsx(Markdown, {
+			children: /* @__PURE__ */ jsx(MarkdownWithRefs, {
 				className: css({ paddingRight: "xxs" }),
 				value: RichText.from(markdown)
 			})
@@ -222,5 +221,4 @@ function Catch({ data, onCatchClick }) {
 	}) }, "catch-all");
 }
 
-//#endregion
 export { NodeNotes };

package/dist/likec4diagram/custom/nodes/SequenceActorNode.d.mts

@@ -1,6 +1,4 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
 import { Types } from "../../types.mjs";
-//#region src/likec4diagram/custom/nodes/SequenceActorNode.d.ts
 export declare function SequenceActorNode(props: Types.NodeProps<'seq-actor'>): import("react").JSX.Element;
-export declare function SequenceParallelArea(props: Types.NodeProps<'seq-parallel'>): import("react").JSX.Element;
-//#endregion
+export declare function SequenceParallelArea(props: Types.NodeProps<'seq-parallel'>): import("react").JSX.Element;

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

@@ -1,13 +1,13 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
-import { useEnabledFeatures } from "../../../context/DiagramFeatures.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 { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
 import { ElementActions } from "./ElementActions.mjs";
 import { NodeDrifts } from "./NodeDrifts.mjs";
 import { NodeNotes } from "./NodeNotes.mjs";
-import { ElementToolbar } from "./toolbar/ElementToolbar.mjs";
 import { ElementDetailsButtonWithHandler } from "./nodes.mjs";
+import { ElementToolbar } from "./toolbar/ElementToolbar.mjs";
 import { css } from "@likec4/styles/css";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Handle, Position } from "@xyflow/react";
@@ -15,7 +15,7 @@ import { isTruthy } from "remeda";
 import { m } from "motion/react";
 import { Box } from "@likec4/styles/jsx";
 
-//#region src/likec4diagram/custom/nodes/SequenceActorNode.tsx
+// src/likec4diagram/custom/nodes/SequenceActorNode.tsx
 const positionMap = {
 	left: Position.Left,
 	right: Position.Right,
@@ -149,5 +149,4 @@ function SequenceParallelArea(props) {
 	});
 }
 
-//#endregion
 export { SequenceActorNode, SequenceParallelArea };

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

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

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

@@ -4,7 +4,7 @@ import { css, cx, sva } from "@likec4/styles/css";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { hstack } from "@likec4/styles/patterns";
 
-//#region src/likec4diagram/custom/nodes/SequenceSubFlow.tsx
+// src/likec4diagram/custom/nodes/SequenceSubFlow.tsx
 const labelStyle = css.raw({
 	color: "colorPalette.text",
 	fontSize: "[9px]",
@@ -235,5 +235,4 @@ function SequenceSubflowArea(props) {
 	});
 }
 
-//#endregion
 export { SequenceSubflowArea };

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

@@ -1,11 +1,11 @@
 import { CompoundActions } from "./CompoundActions.mjs";
 import { DeploymentElementActions, DeploymentElementActionsProps, ElementActions, ElementActionsProps } from "./ElementActions.mjs";
-import "./GraphElementNode.mjs";
+import { GraphElementNode } from "./GraphElementNode.mjs";
 import { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from "./nodes.mjs";
 import { SequenceActorNode, SequenceParallelArea } from "./SequenceActorNode.mjs";
-import "./SequenceSubFlow.mjs";
-import "./NodeDrifts.mjs";
+import { SequenceSubflowArea } from "./SequenceSubFlow.mjs";
+import { NodeDrifts, NodeDriftsProps } from "./NodeDrifts.mjs";
 import { CompoundDeploymentToolbar, CompoundElementToolbar } from "./toolbar/CompoundToolbar.mjs";
 import { DeploymentElementToolbar, ElementToolbar } from "./toolbar/ElementToolbar.mjs";
 import { Toolbar, ToolbarProps } from "./toolbar/Toolbar.mjs";
-export { CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, DeploymentElementActions, DeploymentElementActionsProps, DeploymentElementToolbar, DeploymentNode, ElementActions, ElementActionsProps, ElementDetailsButtonWithHandler, ElementNode, ElementToolbar, SequenceActorNode, SequenceParallelArea, Toolbar, ToolbarProps, ViewGroupNode };
+export { CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, DeploymentElementActions, DeploymentElementActionsProps, DeploymentElementToolbar, DeploymentNode, ElementActions, ElementActionsProps, ElementDetailsButtonWithHandler, ElementNode, ElementToolbar, GraphElementNode, NodeDrifts, SequenceActorNode, SequenceParallelArea, SequenceSubflowArea, Toolbar, ToolbarProps, ViewGroupNode };

package/dist/likec4diagram/custom/nodes/nodes.d.mts

@@ -1,13 +1,13 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
 import { BaseNodeData } from "../../../base/types.mjs";
 import { Types } from "../../types.mjs";
-import { Fqn } from "@likec4/core";
-//#region src/likec4diagram/custom/nodes/nodes.d.ts
+import { DeploymentFqn, Fqn } from "@likec4/core";
 export declare function ElementDetailsButtonWithHandler(props: {
   id: string;
   selected?: boolean;
   data: BaseNodeData & {
     modelFqn?: Fqn | null | undefined;
+    deploymentFqn?: DeploymentFqn | null | undefined;
   };
 }): import("react").JSX.Element | null;
 export declare function CompoundDetailsButtonWithHandler(props: Types.NodeProps<'compound-deployment' | 'compound-element'>): import("react").JSX.Element | null;
@@ -18,5 +18,4 @@ export declare function ElementNode(props: Types.NodeProps<'element'>): import("
 export declare function DeploymentNode(props: Types.NodeProps<'deployment'>): import("react").JSX.Element;
 export declare function CompoundElementNode(props: Types.NodeProps<'compound-element'>): import("react").JSX.Element;
 export declare function CompoundDeploymentNode(props: Types.NodeProps<'compound-deployment'>): import("react").JSX.Element;
-export declare function ViewGroupNode(props: Types.NodeProps<'view-group'>): import("react").JSX.Element;
-//#endregion
+export declare function ViewGroupNode(props: Types.NodeProps<'view-group'>): import("react").JSX.Element;

package/dist/likec4diagram/custom/nodes/nodes.mjs

@@ -1,16 +1,17 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
-import { useCallbackRef } from "../../../hooks/useCallbackRef.mjs";
-import { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
-import { useDiagram } from "../../../hooks/safeContext.mjs";
 import { CompoundDetailsButton } from "../../../base-primitives/compound/CompoundDetailsButton.mjs";
 import { CompoundNodeContainer } from "../../../base-primitives/compound/CompoundNodeContainer.mjs";
 import { CompoundTitle } from "../../../base-primitives/compound/CompoundTitle.mjs";
+import { DefaultHandles } from "../../../base-primitives/NodeHandles.mjs";
 import { ElementData } from "../../../base-primitives/element/ElementData.mjs";
 import { ElementDetailsButton } from "../../../base-primitives/element/ElementDetailsButton.mjs";
 import { ElementNodeContainer } from "../../../base-primitives/element/ElementNodeContainer.mjs";
-import { ElementShape } from "../../../base-primitives/element/ElementShape.mjs";
+import { ElementShape as ElementShape$1 } from "../../../base-primitives/element/ElementShape.mjs";
 import { ElementTags as ElementTags$1 } from "../../../base-primitives/element/ElementTags.mjs";
-import { DefaultHandles } from "../../../base-primitives/NodeHandles.mjs";
+import { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
+import { useCallbackRef } from "../../../hooks/useCallbackRef.mjs";
+import { useDiagram } from "../../../hooks/safeContext.mjs";
+import { detailsSubject } from "../../../overlays/element-details/subject.mjs";
 import { CompoundActions } from "./CompoundActions.mjs";
 import { DeploymentElementActions, ElementActions } from "./ElementActions.mjs";
 import { NodeDrifts } from "./NodeDrifts.mjs";
@@ -19,8 +20,9 @@ import { CompoundDeploymentToolbar, CompoundElementToolbar } from "./toolbar/Com
 import { DeploymentElementToolbar, ElementToolbar } from "./toolbar/ElementToolbar.mjs";
 import { css } from "@likec4/styles/css";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { scalar } from "@likec4/core";
 
-//#region src/likec4diagram/custom/nodes/nodes.tsx
+// src/likec4diagram/custom/nodes/nodes.tsx
 function ElementTags(props) {
 	const diagram = useDiagram();
 	return /* @__PURE__ */ jsx(ElementTags$1, {
@@ -41,25 +43,23 @@ function ElementTags(props) {
 }
 function ElementDetailsButtonWithHandler(props) {
 	const diagram = useDiagram();
-	const fqn = props.data.modelFqn;
-	if (!fqn) return null;
+	if (!detailsSubject(props.data)) return null;
 	return /* @__PURE__ */ jsx(ElementDetailsButton, {
 		...props,
 		onClick: (e) => {
 			e.stopPropagation();
-			diagram.openElementDetails(fqn, props.id);
+			diagram.openNodeDetails(scalar.NodeId(props.id));
 		}
 	});
 }
 function CompoundDetailsButtonWithHandler(props) {
 	const diagram = useDiagram();
-	const fqn = props.data.modelFqn;
-	if (!fqn) return null;
+	if (!detailsSubject(props.data)) return null;
 	return /* @__PURE__ */ jsx(CompoundDetailsButton, {
 		...props,
 		onClick: (e) => {
 			e.stopPropagation();
-			diagram.openElementDetails(fqn, props.id);
+			diagram.openNodeDetails(scalar.NodeId(props.id));
 		}
 	});
 }
@@ -67,12 +67,12 @@ function CompoundDetailsButtonWithHandler(props) {
 * Renders an element node.
 */
 function ElementNode(props) {
-	const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest, enableNotes } = useEnabledFeatures();
+	const { enableCompareWithLatest, enableElementTags, enableElementDetails, enableReadOnly, enableNotes } = useEnabledFeatures();
 	return /* @__PURE__ */ jsxs(ElementNodeContainer, {
 		nodeProps: props,
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-			/* @__PURE__ */ jsx(ElementShape, { ...props }),
+			/* @__PURE__ */ jsx(ElementShape$1, { ...props }),
 			/* @__PURE__ */ jsx(ElementData, {
 				...props,
 				"aria-hidden": true
@@ -87,12 +87,12 @@ function ElementNode(props) {
 	});
 }
 function DeploymentNode(props) {
-	const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest, enableNotes } = useEnabledFeatures();
+	const { enableCompareWithLatest, enableElementTags, enableElementDetails, enableReadOnly, enableNotes } = useEnabledFeatures();
 	return /* @__PURE__ */ jsxs(ElementNodeContainer, {
 		nodeProps: props,
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-			/* @__PURE__ */ jsx(ElementShape, { ...props }),
+			/* @__PURE__ */ jsx(ElementShape$1, { ...props }),
 			/* @__PURE__ */ jsx(ElementData, {
 				...props,
 				"aria-hidden": true
@@ -106,20 +106,19 @@ function DeploymentNode(props) {
 		]
 	});
 }
-const compoundHasDrifts = css({
+const compoundHasDrifts = css({ "&:has(.likec4-node-drifts)": {
 	outlineColor: "likec4.compare.outline",
 	outlineWidth: "extra",
 	outlineStyle: "dashed",
 	outlineOffset: "1.5"
-});
+} });
 const hasDrifts = (props) => {
 	return props.data.drifts && props.data.drifts.length > 0;
 };
 function CompoundElementNode(props) {
 	const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
-	const showDrifts = enableCompareWithLatest && hasDrifts(props);
 	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
-		className: showDrifts ? compoundHasDrifts : void 0,
+		className: enableCompareWithLatest && hasDrifts(props) ? compoundHasDrifts : void 0,
 		nodeProps: props,
 		children: [
 			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
@@ -170,5 +169,4 @@ function ViewGroupNode(props) {
 	});
 }
 
-//#endregion
 export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode };

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

@@ -8,7 +8,7 @@ import { keys } from "remeda";
 import { Button, CheckIcon, ColorSwatch, Divider, Popover, PopoverDropdown, PopoverTarget, Slider, Space, Stack, Tooltip, TooltipGroup, rem } from "@mantine/core";
 import { Flex as Flex$1 } from "@likec4/styles/jsx";
 
-//#region src/likec4diagram/custom/nodes/toolbar/ColorButton.tsx
+// src/likec4diagram/custom/nodes/toolbar/ColorButton.tsx
 function ColorButton({ elementColor, elementOpacity, onColorPreview, isOpacityEditable = false, onChange, ...props }) {
 	const { theme } = useLikeC4Styles();
 	return /* @__PURE__ */ jsxs(Popover, {
@@ -156,5 +156,4 @@ function OpacityOption({ elementOpacity = 100, onOpacityChange }) {
 	});
 }
 
-//#endregion
 export { ColorButton, ColorSwatches, OpacityOption };

package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.d.mts

@@ -1,6 +1,4 @@
 import { __name } from "../../../../_virtual/_rolldown/runtime.mjs";
 import { Types } from "../../../types.mjs";
-//#region src/likec4diagram/custom/nodes/toolbar/CompoundToolbar.d.ts
 export declare function CompoundElementToolbar(props: Types.NodeProps<'compound-element'>): import("react").JSX.Element;
-export declare function CompoundDeploymentToolbar(props: Types.NodeProps<'compound-deployment'>): import("react").JSX.Element;
-//#endregion
+export declare function CompoundDeploymentToolbar(props: Types.NodeProps<'compound-deployment'>): import("react").JSX.Element;

package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.mjs

@@ -6,7 +6,7 @@ import { Toolbar } from "./Toolbar.mjs";
 import { useHandlers } from "./useHandlers.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/likec4diagram/custom/nodes/toolbar/CompoundToolbar.tsx
+// src/likec4diagram/custom/nodes/toolbar/CompoundToolbar.tsx
 function CompoundElementToolbar(props) {
 	const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
 	const { data: { style, modelFqn } } = props;
@@ -61,5 +61,4 @@ function CompoundDeploymentToolbar(props) {
 	});
 }
 
-//#endregion
 export { CompoundDeploymentToolbar, CompoundElementToolbar };

package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.d.mts

@@ -1,11 +1,9 @@
 import { __name } from "../../../../_virtual/_rolldown/runtime.mjs";
 import { Types } from "../../../types.mjs";
 import { Fqn } from "@likec4/core/types";
-//#region src/likec4diagram/custom/nodes/toolbar/ElementToolbar.d.ts
 export declare function ElementToolbar(props: Types.NodeProps<'element' | 'seq-actor'> & {
   data: {
     modelFqn: Fqn;
   };
 }): import("react").JSX.Element;
-export declare function DeploymentElementToolbar(props: Types.NodeProps<'deployment'>): import("react").JSX.Element;
-//#endregion
+export declare function DeploymentElementToolbar(props: Types.NodeProps<'deployment'>): import("react").JSX.Element;

package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.mjs

@@ -1,8 +1,8 @@
 import { __name } from "../../../../_virtual/_rolldown/runtime.mjs";
-import IconCheck from "../../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs";
-import IconSelector from "../../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.mjs";
-import { stopPropagation } from "../../../../utils/xyflow.mjs";
+import IconCheck from "../../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.mjs";
+import IconSelector from "../../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.mjs";
 import { useEnabledFeatures } from "../../../../context/DiagramFeatures.mjs";
+import { stopPropagation } from "../../../../utils/xyflow.mjs";
 import { BorderStyleOption, BrowseRelationshipsButton, GoToSourceButton } from "./_shared.mjs";
 import { ColorButton } from "./ColorButton.mjs";
 import { Toolbar } from "./Toolbar.mjs";
@@ -11,7 +11,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Menu, MenuDropdown, MenuItem, MenuTarget } from "@mantine/core";
 import { ElementShapes } from "@likec4/core/styles";
 
-//#region src/likec4diagram/custom/nodes/toolbar/ElementToolbar.tsx
+// src/likec4diagram/custom/nodes/toolbar/ElementToolbar.tsx
 const SortedElementShapes = [...ElementShapes].sort();
 function ElementToolbar(props) {
 	const { enableVscode, enableRelationshipBrowser, enableNotes } = useEnabledFeatures();
@@ -113,5 +113,4 @@ function ElementShapeButton({ elementShape, onChange }) {
 	});
 }
 
-//#endregion
 export { DeploymentElementToolbar, ElementToolbar };

package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.d.mts

@@ -2,10 +2,8 @@ import { __name } from "../../../../_virtual/_rolldown/runtime.mjs";
 import { BaseNodeProps } from "../../../../base/types.mjs";
 import { ReactNode } from "react";
 import { NodeToolbarProps } from "@xyflow/react";
-//#region src/likec4diagram/custom/nodes/toolbar/Toolbar.d.ts
 export type ToolbarProps = Omit<NodeToolbarProps, 'title'> & {
   nodeProps: BaseNodeProps;
   title: ReactNode;
 };
-export declare function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps): import("react").JSX.Element | null;
-//#endregion
+export declare function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps): import("react").JSX.Element | null;

package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.mjs

@@ -1,6 +1,6 @@
 import { __name } from "../../../../_virtual/_rolldown/runtime.mjs";
-import { stopPropagation } from "../../../../utils/xyflow.mjs";
 import { selectDiagramContext, useDiagramSelector } from "../../../../hooks/safeContext.mjs";
+import { stopPropagation } from "../../../../utils/xyflow.mjs";
 import { toolbarTitle } from "./styles.css.mjs";
 import { cx } from "@likec4/styles/css";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,7 +9,7 @@ import { Paper, Text } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
 import { Box as Box$1, HStack, VStack } from "@likec4/styles/jsx";
 
-//#region src/likec4diagram/custom/nodes/toolbar/Toolbar.tsx
+// src/likec4diagram/custom/nodes/toolbar/Toolbar.tsx
 const selectSelectedNodesCount = selectDiagramContext((context) => {
 	return context.xynodes.filter((x) => x.selected).length;
 });
@@ -18,7 +18,7 @@ const useSelectedNodesCount = () => {
 };
 function Toolbar({ title, children, nodeProps, ...props }) {
 	const selectedNodesCount = useSelectedNodesCount();
-	const { selected = false, dragging = false, data: { hovered = false } } = nodeProps;
+	const { selected, dragging, data: { hovered = false } } = nodeProps;
 	const _isToolbarVisible = hovered && selectedNodesCount === 0 || selected && selectedNodesCount === 1;
 	let delay = 150;
 	if (_isToolbarVisible) {
@@ -26,9 +26,8 @@ function Toolbar({ title, children, nodeProps, ...props }) {
 		else delay = 1e3;
 	} else if (selectedNodesCount > 0) delay = 50;
 	const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, delay);
-	if (!isToolbarVisible) return null;
+	if (!isToolbarVisible || dragging) return null;
 	return /* @__PURE__ */ jsx(NodeToolbar, {
-		isVisible: !dragging,
 		offset: 4,
 		...props,
 		children: /* @__PURE__ */ jsx(Paper, {
@@ -60,5 +59,4 @@ function Toolbar({ title, children, nodeProps, ...props }) {
 	});
 }
 
-//#endregion
 export { Toolbar };

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

@@ -1,13 +1,13 @@
 import { __name } from "../../../../_virtual/_rolldown/runtime.mjs";
-import IconFileSymlink from "../../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.mjs";
-import IconTransform from "../../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.mjs";
+import IconFileSymlink from "../../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.mjs";
+import IconTransform from "../../../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.mjs";
 import { useDiagramEventHandlers } from "../../../../context/DiagramEventHandlers.mjs";
 import { useDiagram } from "../../../../hooks/safeContext.mjs";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { ActionIcon, SegmentedControl, Tooltip } from "@mantine/core";
 
-//#region src/likec4diagram/custom/nodes/toolbar/_shared.tsx
+// src/likec4diagram/custom/nodes/toolbar/_shared.tsx
 const Tooltip$1 = Tooltip.withProps({
 	color: "dark",
 	fz: "xs",
@@ -102,5 +102,4 @@ function BorderStyleOption({ elementBorderStyle = "none", onChange }) {
 	});
 }
 
-//#endregion
 export { BorderStyleOption, BrowseRelationshipsButton, GoToSourceButton, Tooltip$1 as Tooltip };

package/dist/likec4diagram/custom/nodes/toolbar/styles.css.mjs

@@ -1,6 +1,6 @@
 import { css } from "@likec4/styles/css";
 
-//#region src/likec4diagram/custom/nodes/toolbar/styles.css.ts
+// src/likec4diagram/custom/nodes/toolbar/styles.css.ts
 const toolbarTitle = css({
 	color: "text.dimmed",
 	fontSize: "xxs",
@@ -13,5 +13,4 @@ const toolbarTitle = css({
 	whiteSpace: "nowrap"
 });
 
-//#endregion
 export { toolbarTitle };

package/dist/likec4diagram/custom/nodes/toolbar/types.mjs

@@ -1,9 +1,8 @@
-//#region src/likec4diagram/custom/nodes/toolbar/types.ts
+// src/likec4diagram/custom/nodes/toolbar/types.ts
 const SemanticColors = [
 	"primary",
 	"secondary",
 	"muted"
 ];
 
-//#endregion
 export { SemanticColors };

package/dist/likec4diagram/custom/nodes/toolbar/useHandlers.mjs

@@ -3,7 +3,7 @@ import { useCallbackRef } from "../../../../hooks/useCallbackRef.mjs";
 import { useDiagram } from "../../../../hooks/safeContext.mjs";
 import { useState } from "react";
 
-//#region src/likec4diagram/custom/nodes/toolbar/useHandlers.ts
+// src/likec4diagram/custom/nodes/toolbar/useHandlers.ts
 function useHandlers(target, props) {
 	const diagram = useDiagram();
 	const [originalColor, setOriginalColor] = useState(null);
@@ -37,5 +37,4 @@ function useHandlers(target, props) {
 	};
 }
 
-//#endregion
 export { useHandlers };

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

@@ -1,18 +1,19 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconArrowRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.mjs";
-import IconFileSymlink from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.mjs";
-import IconInfoCircle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.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 { roundDpr } from "../../utils/roundDpr.mjs";
+import IconArrowRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.mjs";
+import IconFileSymlink from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.mjs";
+import IconInfoCircle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.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 { ElementTag } from "../../base-primitives/element/ElementTags.mjs";
+import { Link } from "../../components/Link.mjs";
+import { MarkdownWithRefs } from "../../components/markdown/MarkdownWithRefs.mjs";
+import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.mjs";
+import { PortalToContainer } from "../../components/PortalToContainer.mjs";
 import { useRootContainerRef } from "../../context/RootContainerContext.mjs";
 import { useEnabledFeatures } from "../../context/DiagramFeatures.mjs";
-import { selectDiagramContext, useDiagram, useDiagramSelector } from "../../hooks/safeContext.mjs";
 import { useOnDiagramEvent } from "../../hooks/useDiagram.mjs";
 import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { roundDpr } from "../../utils/roundDpr.mjs";
 import { findDiagramEdge, findDiagramNode } from "../state/utils.mjs";
-import { Markdown } from "../../base-primitives/Markdown.mjs";
-import { Link } from "../../components/Link.mjs";
-import { PortalToContainer } from "../../components/PortalToContainer.mjs";
 import { RelationshipPopoverActorLogic } from "./actor.mjs";
 import { Endpoint, RelationshipTitle } from "./components.mjs";
 import { css, cx } from "@likec4/styles/css";
@@ -27,7 +28,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
+// src/likec4diagram/relationship-popover/RelationshipPopover.tsx
 const selector = selectDiagramContext((c) => {
 	let selected = null;
 	for (const edge of c.xyedges) if (edge.selected) {
@@ -279,7 +280,13 @@ const Relationship = forwardRef(({ relationship: r, sourceNode, targetNode, onNa
 	const sourceId = getEndpointId(r, "source", sourceNode);
 	const targetId = getEndpointId(r, "target", targetNode);
 	const links = r.links;
+	const tags = r.tags;
+	const infoIconRef = useRef(null);
+	const [metadataPortalTarget, setMetadataPortalTarget] = useState(null);
 	const metadataEntries = r.hasMetadata() ? entries(r.getMetadata()).sort(([a], [b]) => a.localeCompare(b)) : null;
+	useEffect(() => {
+		setMetadataPortalTarget(infoIconRef.current?.closest("dialog") ?? null);
+	}, [metadataEntries !== null]);
 	const metadataTooltipLabel = metadataEntries && /* @__PURE__ */ jsxs("div", {
 		style: {
 			display: "flex",
@@ -426,11 +433,13 @@ const Relationship = forwardRef(({ relationship: r, sourceNode, targetNode, onNa
 					bg: "white",
 					c: "dark",
 					withinPortal: true,
+					portalProps: metadataPortalTarget ? { target: metadataPortalTarget } : {},
 					styles: { tooltip: {
 						boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
 						border: "1px solid #dee2e6"
 					} },
 					children: /* @__PURE__ */ jsx(Box$1, {
+						ref: infoIconRef,
 						display: "inline-flex",
 						children: /* @__PURE__ */ jsx(IconInfoCircle, {
 							size: 14,
@@ -467,6 +476,15 @@ const Relationship = forwardRef(({ relationship: r, sourceNode, targetNode, onNa
 					children: r.technology
 				})]
 			}),
+			tags.length > 0 && /* @__PURE__ */ jsxs(HStack, {
+				gap: "2",
+				alignItems: "center",
+				children: [/* @__PURE__ */ jsx(Label, { children: "tags" }), /* @__PURE__ */ jsx(HStack, {
+					gap: "1",
+					flexWrap: "wrap",
+					children: tags.map((tag) => /* @__PURE__ */ jsx(ElementTag, { tag }, tag))
+				})]
+			}),
 			r.summary.nonEmpty && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Label, { children: "description" }), /* @__PURE__ */ jsx(Box$1, {
 				css: {
 					paddingLeft: "2.5",
@@ -478,7 +496,7 @@ const Relationship = forwardRef(({ relationship: r, sourceNode, targetNode, onNa
 						_dark: "mantine.dark[4]"
 					}
 				},
-				children: /* @__PURE__ */ jsx(Markdown, {
+				children: /* @__PURE__ */ jsx(MarkdownWithRefs, {
 					value: r.summary,
 					fontSize: "sm",
 					textScale: .875
@@ -520,5 +538,4 @@ function getEndpointId(r, endpoint, diagramNode) {
 	};
 }
 
-//#endregion
 export { RelationshipPopover };