@likec4/diagram 1.60.0 → 1.61.0

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

@@ -1,7 +1,4 @@
 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 { CompoundNodeContainer } from "../../../base-primitives/compound/CompoundNodeContainer.mjs";
 import { CompoundTitle } from "../../../base-primitives/compound/CompoundTitle.mjs";
 import { ElementData } from "../../../base-primitives/element/ElementData.mjs";
@@ -10,11 +7,14 @@ import { ElementNodeContainer } from "../../../base-primitives/element/ElementNo
 import { ElementShape } from "../../../base-primitives/element/ElementShape.mjs";
 import { ElementTags as ElementTags$1 } from "../../../base-primitives/element/ElementTags.mjs";
 import { ElementActions } from "./ElementActions.mjs";
+import { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
+import { useCallbackRef } from "../../../hooks/useCallbackRef.mjs";
+import { useDiagram } from "../../../hooks/safeContext.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Handle } from "@xyflow/react";
 import { Position as Position$1 } from "@xyflow/system";
 
-//#region src/overlays/relationship-details/custom/nodeTypes.tsx
+// src/overlays/relationship-details/custom/nodeTypes.tsx
 function ElementTags(props) {
 	const diagram = useDiagram();
 	return /* @__PURE__ */ jsx(ElementTags$1, {
@@ -30,7 +30,10 @@ const ElementDetailsButtonWithHandler = (props) => {
 		...props,
 		onClick: (e) => {
 			e.stopPropagation();
-			diagram.openElementDetails(props.data.fqn);
+			diagram.openNodeDetails({
+				type: "element",
+				element: props.data.fqn
+			});
 		}
 	});
 };
@@ -97,5 +100,4 @@ function CompoundPorts({ data }) {
 	}, id))] });
 }
 
-//#endregion
 export { CompoundNode, CompoundPorts, ElementNode, ElementPorts };

package/dist/overlays/relationship-details/hooks.mjs

@@ -5,7 +5,7 @@ import { shallowEqual } from "fast-equals";
 import { nonNullable } from "@likec4/core";
 import { useSelector } from "@xstate/react";
 
-//#region src/overlays/relationship-details/hooks.ts
+// src/overlays/relationship-details/hooks.ts
 const RelationshipDetailsActorContext = createContext(null);
 function useRelationshipDetailsActor() {
 	return nonNullable(useContext(RelationshipDetailsActorContext), "No RelationshipDetailsActorContext");
@@ -50,5 +50,4 @@ function useRelationshipDetails() {
 	}), [actor]);
 }
 
-//#endregion
 export { RelationshipDetailsActorContext, useRelationshipDetails, useRelationshipDetailsActor, useRelationshipDetailsState };

package/dist/overlays/relationship-details/layout-to-xyflow.mjs

@@ -3,7 +3,7 @@ import { ZIndexes } from "../../base/const.mjs";
 import { hasAtLeast } from "remeda";
 import { Queue, nonNullable } from "@likec4/core";
 
-//#region src/overlays/relationship-details/layout-to-xyflow.ts
+// src/overlays/relationship-details/layout-to-xyflow.ts
 function layoutResultToXYFlow(layout) {
 	const xynodes = [];
 	const xyedges = [];
@@ -92,7 +92,7 @@ function layoutResultToXYFlow(layout) {
 			});
 		}
 	}
-	for (const { source, target, relationId, label, technology, description, navigateTo = null, color = "gray", line = "dashed", ...edge } of layout.edges) {
+	for (const { source, target, relationId, label, labelBBox = null, technology, description, navigateTo = null, color = "gray", line = "dashed", ...edge } of layout.edges) {
 		const id = edge.id;
 		xyedges.push({
 			id,
@@ -105,6 +105,7 @@ function layoutResultToXYFlow(layout) {
 			data: {
 				relationId,
 				label,
+				labelBBox,
 				color,
 				navigateTo,
 				line,
@@ -120,5 +121,4 @@ function layoutResultToXYFlow(layout) {
 	};
 }
 
-//#endregion
 export { layoutResultToXYFlow };

package/dist/overlays/relationship-details/layout.d.mts

@@ -4,7 +4,6 @@ import "./compute.mjs";
 import { DiagramEdge, DiagramNode, DiagramView, Fqn, MarkdownOrString, RelationId } from "@likec4/core/types";
 import { LikeC4ViewModel } from "@likec4/core/model";
 import { Except } from "type-fest";
-//#region src/overlays/relationship-details/layout.d.ts
 export type LayoutResult = {
   nodes: LayoutResult.Node[];
   edges: LayoutResult.Edge[];
@@ -23,5 +22,4 @@ export declare namespace LayoutResult {
     targetHandle: string;
     description: MarkdownOrString | null;
   };
-}
-//#endregion
+}

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

@@ -1,11 +1,12 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { filter, find, map, mapToObj, omit, pipe, prop, reduce, sortBy, tap } from "remeda";
+import { measureEdgeLabel } from "../../utils/measure-edge-label.mjs";
+import { filter, find, isNumber, 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";
 
-//#region src/overlays/relationship-details/layout.ts
+// src/overlays/relationship-details/layout.ts
 /**
 * All constants related to the layout
 */
@@ -17,7 +18,8 @@ const Sizes = {
 	},
 	edgeLabel: {
 		width: 220,
-		height: 55
+		height: 55,
+		labelpos: "c"
 	},
 	nodeWidth: 330,
 	nodeHeight: 180,
@@ -113,7 +115,7 @@ function applyDagreLayout(g) {
 		};
 	};
 }
-function layoutRelationshipDetails(data, scope) {
+function layoutRelationshipDetails(data, scope, { withNavigateButtons = false } = {}) {
 	const g = createGraph();
 	const sources = createNodes("sources", data.sources, g);
 	const targets = createNodes("targets", data.targets, g);
@@ -123,9 +125,19 @@ function layoutRelationshipDetails(data, scope) {
 		const name = r.id;
 		g.node(source.id).outPorts.push(target.id);
 		g.node(target.id).inPorts.push(source.id);
-		g.setEdge(source.portId, target.portId, { ...Sizes.edgeLabel }, name);
+		const label = measureEdgeLabel({
+			label: r.title ?? "untitled",
+			technology: r.technology,
+			withActionButton: withNavigateButtons && !!r.navigateTo
+		});
+		g.setEdge(source.portId, target.portId, {
+			...Sizes.edgeLabel,
+			width: label.width,
+			height: label.height
+		}, name);
 		return {
 			name,
+			label,
 			source: source.id,
 			sourceHandle: source.id + "_out" + (g.node(source.id).outPorts.length - 1),
 			target: target.id,
@@ -141,10 +153,17 @@ function layoutRelationshipDetails(data, scope) {
 		if (edgeCount > 3) node.height = node.height + (edgeCount - 4) * 14;
 	}
 	const edgeCount = g.edgeCount();
-	if (edgeCount > 5) for (const edge of g.edges()) g.setEdge(edge, {
-		...Sizes.edgeLabel,
-		width: edgeCount > 10 ? 800 : 400
-	});
+	if (edgeCount > 5) {
+		const minWidth = edgeCount > 10 ? 800 : 400;
+		for (const edge of g.edges()) {
+			const config = g.edge(edge);
+			const width = config["width"];
+			g.setEdge(edge, {
+				...config,
+				width: Math.max(isNumber(width) ? width : 0, minWidth)
+			});
+		}
+	}
 	const dagreBounds = applyDagreLayout(g);
 	const _calculatedNodeBounds = pipe(nodeIds, filter((n) => n.id === n.portId), mapToObj((n) => [n.id, dagreBounds(n.id)]));
 	function nodeBounds(nodeId) {
@@ -257,8 +276,10 @@ function layoutRelationshipDetails(data, scope) {
 			const edge = g.edge(e);
 			const ename = e.name;
 			if (!ename) return acc;
-			const { name, source, target, relationship, sourceHandle, targetHandle } = find(edges, (e) => e.name === ename);
-			const label = relationship.title ?? "untitled";
+			const { name, source, target, relationship, sourceHandle, targetHandle, label } = find(edges, (e) => e.name === ename);
+			const labelX = edge["x"];
+			const labelY = edge["y"];
+			invariant(isNumber(labelX) && isNumber(labelY), `dagre should place the label of ${name}`);
 			const navigateTo = relationship.navigateTo?.id ?? null;
 			const description = preferSummary(relationship.$relationship) ?? null;
 			const technology = relationship.technology ?? null;
@@ -268,7 +289,13 @@ function layoutRelationshipDetails(data, scope) {
 				sourceHandle,
 				target,
 				targetHandle,
-				label,
+				label: label.label,
+				labelBBox: {
+					x: Math.round(labelX - label.width / 2),
+					y: Math.round(labelY - label.height / 2),
+					width: label.width,
+					height: label.height
+				},
 				color: relationship.color,
 				description,
 				...navigateTo && { navigateTo },
@@ -283,5 +310,4 @@ function layoutRelationshipDetails(data, scope) {
 	};
 }
 
-//#endregion
 export { layoutRelationshipDetails };

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

@@ -1,17 +1,17 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconAlertTriangle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.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 IconChevronLeft from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.mjs";
-import IconChevronRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
-import IconLink from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.mjs";
-import IconX from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs";
-import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.mjs";
+import IconAlertTriangle from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.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 IconChevronLeft from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.mjs";
+import IconChevronRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs";
+import IconLink from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.mjs";
+import IconX from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.mjs";
 import { BaseXYFlow } from "../../base/BaseXYFlow.mjs";
-import { useRelationshipsView } from "./layout.mjs";
-import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from "./hooks.mjs";
-import { RelationshipEdge } from "./custom/edgeTypes.mjs";
-import { EmptyNode } from "./custom/EmptyNode.mjs";
+import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.mjs";
 import { CompoundNode, ElementNode } from "./custom/nodeTypes.mjs";
+import { EmptyNode } from "./custom/EmptyNode.mjs";
+import { RelationshipEdge } from "./custom/edgeTypes.mjs";
+import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from "./hooks.mjs";
+import { useRelationshipsView } from "./layout.mjs";
 import { SelectElement } from "./SelectElement.mjs";
 import { cx } from "@likec4/styles/css";
 import { memo, useEffect, useRef, useState } from "react";
@@ -22,7 +22,7 @@ import { ActionIcon, Group, Tooltip } from "@mantine/core";
 import { AnimatePresence, LayoutGroup, m } from "motion/react";
 import { useClipboard, useStateHistory } from "@mantine/hooks";
 
-//#region src/overlays/relationships-browser/RelationshipsBrowser.tsx
+// src/overlays/relationships-browser/RelationshipsBrowser.tsx
 const nodeTypes = {
 	element: ElementNode,
 	compound: CompoundNode,
@@ -342,5 +342,4 @@ const CopyLinkButton = ({ subjectId, scope }) => {
 	});
 };
 
-//#endregion
 export { RelationshipsBrowser, buildRelationshipUrl };

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

@@ -1,7 +1,7 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.mjs";
 import { css } from "@likec4/styles/css";
 
-//#region src/overlays/relationships-browser/SelectElement.css.ts
+// src/overlays/relationships-browser/SelectElement.css.ts
 var SelectElement_css_exports = /* @__PURE__ */ __exportAll({
 	label: () => label,
 	node: () => node,
@@ -11,5 +11,4 @@ const node = css({ margin: "0" });
 const label = css({ _hover: { backgroundColor: "surface.hover" } });
 const scrollArea = css({ maxHeight: ["[70vh]", "[calc(100cqh - 70px)]"] });
 
-//#endregion
 export { SelectElement_css_exports, label, node, scrollArea };

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

@@ -1,17 +1,17 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import IconChevronRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.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 IconChevronRight from "../../node_modules/.pnpm/@tabler_icons-react@3.49.0_react@19.3.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.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 { useDiagramEventHandlers } from "../../context/DiagramEventHandlers.mjs";
+import { useLikeC4ElementsTree } from "../../hooks/useLikeC4ElementsTree.mjs";
 import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from "./hooks.mjs";
-import { useLikeC4ElementsTree } from "../../hooks/useLikeC4ElementsTree.mjs";
 import { SelectElement_css_exports, scrollArea } from "./SelectElement.css.mjs";
 import { memo, useEffect, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ancestorsFqn } from "@likec4/core";
 import { ActionIcon, Box, Button, Group, Popover, PopoverDropdown, PopoverTarget, ScrollAreaAutosize, SegmentedControl, Text, Tooltip, Tree, useTree } from "@mantine/core";
 
-//#region src/overlays/relationships-browser/SelectElement.tsx
+// src/overlays/relationships-browser/SelectElement.tsx
 const selector2 = (state) => {
 	const subjectExistsInScope = state.context.layouted?.subjectExistsInScope ?? false;
 	return {
@@ -198,5 +198,4 @@ const SelectElement = memo(() => {
 	});
 });
 
-//#endregion
 export { SelectElement };

package/dist/overlays/relationships-browser/_types.d.mts

@@ -1,9 +1,8 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseNode, BaseNodeData, BaseNodeProps, NonOptional } from "../../base/types.mjs";
 import { FunctionComponent } from "react";
-import { Color, DiagramNode, ExclusiveUnion, Fqn, IconUrl, NonEmptyArray, RelationId, RelationshipArrowType, RelationshipLineType, ViewId } from "@likec4/core/types";
+import { BBox, Color, DiagramNode, ExclusiveUnion, Fqn, IconUrl, NonEmptyArray, RelationId, RelationshipArrowType, RelationshipLineType, ViewId } from "@likec4/core/types";
 import { Simplify } from "type-fest";
-//#region src/overlays/relationships-browser/_types.d.ts
 export declare namespace RelationshipsBrowserTypes {
   type Column = 'incomers' | 'subjects' | 'outgoers';
   /**
@@ -53,6 +52,10 @@ export declare namespace RelationshipsBrowserTypes {
     relations: NonEmptyArray<RelationId>;
     color: Color;
     label: string | null;
+    /**
+     * Label box placed by the layout, the edge goes through it
+     */
+    labelBBox: BBox | null;
     navigateTo: ViewId | null;
     line: RelationshipLineType;
     head?: RelationshipArrowType;
@@ -61,5 +64,4 @@ export declare namespace RelationshipsBrowserTypes {
   }>;
   type Edge = BaseEdge<EdgeData, 'relationship'>;
   type EdgeProps = BaseEdgeProps<Edge>;
-}
-//#endregion
+}

package/dist/overlays/relationships-browser/actor.d.mts

@@ -4,7 +4,6 @@ import { LayoutRelationshipsViewResult } from "./layout.mjs";
 import { EdgeChange, NodeChange, ReactFlowInstance, ReactFlowState } from "@xyflow/react";
 import { BBox, Fqn, ViewId } from "@likec4/core";
 import { ActorRef, SnapshotFrom, StateMachine } from "xstate";
-//#region src/overlays/relationships-browser/actor.d.ts
 type XYFLowInstance = ReactFlowInstance<RelationshipsBrowserTypes.AnyNode, RelationshipsBrowserTypes.Edge>;
 type XYStoreState = ReactFlowState<RelationshipsBrowserTypes.AnyNode, RelationshipsBrowserTypes.Edge>;
 type XYStoreApi = {
@@ -99,5 +98,4 @@ type Tags = 'active';
 export interface RelationshipsBrowserLogic extends StateMachine<Context, Events, {}, any, any, any, any, any, Tags, Input, any, any, any, any> {}
 export type RelationshipsBrowserSnapshot = SnapshotFrom<RelationshipsBrowserLogic>;
 export interface RelationshipsBrowserActorRef extends ActorRef<RelationshipsBrowserSnapshot, Events> {}
-//#endregion
 export type { Input as RelationshipsBrowserInput };

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

@@ -1,19 +1,19 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { MinZoom, ZIndexes } from "../../base/const.mjs";
-import { getNodeCenter } from "../../utils/xyflow.mjs";
 import { Base } from "../../base/Base.mjs";
+import { MinZoom, ZIndexes } from "../../base/const.mjs";
 import { updateEdges } from "../../base/updateEdges.mjs";
 import { updateNodes } from "../../base/updateNodes.mjs";
 import { typedSystem } from "../../likec4diagram/state/utils.mjs";
+import { getNodeCenter } from "../../utils/xyflow.mjs";
 import { ViewPadding } from "./const.mjs";
 import { viewToNodesEdge } from "./useViewToNodesEdges.mjs";
 import { applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
 import { hasAtLeast, isNullish, omit } from "remeda";
-import { delay, invariant, nonNullable } from "@likec4/core/utils";
 import { getViewportForBounds as getViewportForBounds$1 } from "@xyflow/system";
+import { delay, invariant, nonNullable } from "@likec4/core/utils";
 import { assertEvent, assign, cancel, enqueueActions, fromPromise, raise, setup } from "xstate";
 
-//#region src/overlays/relationships-browser/actor.ts
+// src/overlays/relationships-browser/actor.ts
 /**
 * Root node in 'subjects' column
 */
@@ -375,5 +375,4 @@ const _relationshipsBrowserLogic = machine.createMachine({
 });
 const relationshipsBrowserLogic = _relationshipsBrowserLogic;
 
-//#endregion
 export { layouter, relationshipsBrowserLogic };

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

@@ -1,4 +1,4 @@
-//#region src/overlays/relationships-browser/const.ts
+// src/overlays/relationships-browser/const.ts
 const ViewPadding = {
 	top: "40px",
 	bottom: "22px",
@@ -6,5 +6,4 @@ const ViewPadding = {
 	right: "22px"
 };
 
-//#endregion
 export { ViewPadding };

package/dist/overlays/relationships-browser/custom/ElementActions.mjs

@@ -1,16 +1,16 @@
 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 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 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 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 { ElementActionButtons } from "../../../base-primitives/element/ElementActionButtons.mjs";
 import { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
-import { useDiagram } from "../../../hooks/safeContext.mjs";
 import { useCurrentViewId } from "../../../hooks/useCurrentView.mjs";
-import { ElementActionButtons } from "../../../base-primitives/element/ElementActionButtons.mjs";
+import { useDiagram } from "../../../hooks/safeContext.mjs";
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from "../hooks.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/overlays/relationships-browser/custom/ElementActions.tsx
+// src/overlays/relationships-browser/custom/ElementActions.tsx
 const selectSubject = (state) => state.context.subject;
 const ElementActions = (props) => {
 	const { enableNavigateTo, enableVscode } = useEnabledFeatures();
@@ -63,5 +63,4 @@ const ElementActions = (props) => {
 	});
 };
 
-//#endregion
 export { ElementActions };

package/dist/overlays/relationships-browser/custom/EmptyNode.mjs

@@ -2,7 +2,7 @@ import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Txt } from "@likec4/styles/jsx";
 
-//#region src/overlays/relationships-browser/custom/EmptyNode.tsx
+// src/overlays/relationships-browser/custom/EmptyNode.tsx
 function EmptyNode({ data: { column } }) {
 	return /* @__PURE__ */ jsx(Box, {
 		css: {
@@ -23,5 +23,4 @@ function EmptyNode({ data: { column } }) {
 	});
 }
 
-//#endregion
 export { EmptyNode };

package/dist/overlays/relationships-browser/custom/edgeTypes.mjs

@@ -1,27 +1,29 @@
 import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
-import { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
-import { useDiagram } from "../../../hooks/safeContext.mjs";
 import { EdgeActionButton } from "../../../base-primitives/edge/EdgeActionButton.mjs";
 import { EdgeContainer } from "../../../base-primitives/edge/EdgeContainer.mjs";
 import { EdgeLabel } from "../../../base-primitives/edge/EdgeLabel.mjs";
 import { EdgeLabelContainer } from "../../../base-primitives/edge/EdgeLabelContainer.mjs";
 import { EdgePath } from "../../../base-primitives/edge/EdgePath.mjs";
 import { memoEdge } from "../../../base-primitives/memoEdge.mjs";
-import { useRelationshipsBrowser } from "../hooks.mjs";
+import { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
+import { useDiagram } from "../../../hooks/safeContext.mjs";
+import { edgePathThroughLabel } from "../../../utils/edge-path-through-label.mjs";
+import { useRelationshipsBrowser, useRelationshipsBrowserState } from "../hooks.mjs";
 import { css } from "@likec4/styles/css";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "@mantine/core";
-import { getBezierPath } from "@xyflow/system";
 
-//#region src/overlays/relationships-browser/custom/edgeTypes.tsx
+// src/overlays/relationships-browser/custom/edgeTypes.tsx
 const RelationshipEdge = memoEdge((props) => {
 	const browser = useRelationshipsBrowser();
+	const isGlobalScope = useRelationshipsBrowserState((state) => state.context.scope === "global");
 	const { enableNavigateTo } = useEnabledFeatures();
-	const { data: { navigateTo, relations, existsInCurrentView } } = props;
-	const [svgPath, labelX, labelY] = getBezierPath(props);
+	const { data: { navigateTo, relations, existsInCurrentView, labelBBox } } = props;
+	const [svgPath, labelPosition] = edgePathThroughLabel(props, labelBBox);
 	const diagram = useDiagram();
-	const markOrange = relations.length > 1 || !existsInCurrentView;
-	const edgeProps = markOrange ? {
+	const isGrouped = relations.length > 1;
+	const isThick = isGrouped || !existsInCurrentView;
+	const edgeProps = isGlobalScope && isGrouped || !existsInCurrentView ? {
 		...props,
 		data: {
 			...props.data,
@@ -52,19 +54,14 @@ const RelationshipEdge = memoEdge((props) => {
 		children: [/* @__PURE__ */ jsx(EdgePath, {
 			edgeProps,
 			svgPath,
-			...markOrange && { strokeWidth: 5 }
+			...isThick && { strokeWidth: 5 }
 		}), /* @__PURE__ */ jsx(EdgeLabelContainer, {
 			edgeProps,
-			labelPosition: {
-				x: labelX,
-				y: labelY,
-				translate: "translate(-50%, 0)"
-			},
-			style: { maxWidth: Math.min(Math.abs(props.targetX - props.sourceX - 70), 250) },
+			labelPosition,
+			...!labelBBox && { style: { maxWidth: Math.min(Math.abs(props.targetX - props.sourceX - 70), 250) } },
 			children: label
 		})]
 	});
 });
 
-//#endregion
 export { RelationshipEdge };

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

@@ -1,7 +1,4 @@
 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";
@@ -10,11 +7,14 @@ import { ElementDetailsButton } from "../../../base-primitives/element/ElementDe
 import { ElementNodeContainer } from "../../../base-primitives/element/ElementNodeContainer.mjs";
 import { ElementShape } from "../../../base-primitives/element/ElementShape.mjs";
 import { ElementTags as ElementTags$1 } from "../../../base-primitives/element/ElementTags.mjs";
+import { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
+import { useCallbackRef } from "../../../hooks/useCallbackRef.mjs";
+import { useDiagram } from "../../../hooks/safeContext.mjs";
 import { ElementActions } from "./ElementActions.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Handle, Position } from "@xyflow/react";
 
-//#region src/overlays/relationships-browser/custom/nodeTypes.tsx
+// src/overlays/relationships-browser/custom/nodeTypes.tsx
 function ElementTags(props) {
 	const diagram = useDiagram();
 	return /* @__PURE__ */ jsx(ElementTags$1, {
@@ -30,7 +30,10 @@ const ElementDetailsButtonWithHandler = (props) => {
 		...props,
 		onClick: (e) => {
 			e.stopPropagation();
-			diagram.openElementDetails(props.data.fqn);
+			diagram.openNodeDetails({
+				type: "element",
+				element: props.data.fqn
+			});
 		}
 	});
 };
@@ -60,7 +63,10 @@ function CompoundNode(props) {
 				...props,
 				onClick: (e) => {
 					e.stopPropagation();
-					diagram.openElementDetails(props.data.fqn);
+					diagram.openNodeDetails({
+						type: "element",
+						element: props.data.fqn
+					});
 				}
 			}),
 			/* @__PURE__ */ jsx(CompoundPorts, { ...props })
@@ -104,5 +110,4 @@ const CompoundPorts = ({ data }) => /* @__PURE__ */ jsxs(Fragment, { children: [
 	}
 }, id))] });
 
-//#endregion
 export { CompoundNode, CompoundPorts, ElementNode, ElementPorts };

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

@@ -4,7 +4,7 @@ import { shallowEqual } from "fast-equals";
 import { nonNullable } from "@likec4/core";
 import { useSelector } from "@xstate/react";
 
-//#region src/overlays/relationships-browser/hooks.ts
+// src/overlays/relationships-browser/hooks.ts
 const RelationshipsBrowserActorContext = createContext(null);
 function useRelationshipsBrowserActor() {
 	return nonNullable(useContext(RelationshipsBrowserActorContext), "No RelationshipsBrowserActorContext");
@@ -54,5 +54,4 @@ function useRelationshipsBrowser() {
 	}), [actor]);
 }
 
-//#endregion
 export { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserActor, useRelationshipsBrowserState };

package/dist/overlays/relationships-browser/layout.d.mts

@@ -3,7 +3,6 @@ import { RelationshipsBrowserTypes } from "./_types.mjs";
 import { DiagramEdge, DiagramNode, DiagramView, ElementKind, Fqn, MarkdownOrString, ViewId } from "@likec4/core/types";
 import { LikeC4ViewModel } from "@likec4/core/model";
 import "@likec4/core/compute-view";
-//#region src/overlays/relationships-browser/layout.d.ts
 export type LayoutRelationshipsViewResult = {
   subject: Fqn;
   subjectExistsInScope: boolean;
@@ -26,5 +25,4 @@ export declare namespace LayoutRelationshipsViewResult {
     targetHandle: string;
     existsInCurrentView: boolean;
   };
-}
-//#endregion
+}