@likec4/diagram 1.60.0 → 1.61.0

package/dist/overlays/element-details/TabPanelViews.mjs

@@ -0,0 +1,51 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { ViewIcon } from "../../components/ViewIcon.mjs";
+import { ViewButtonTitle, viewButton } from "./ElementDetailsCard.css.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { hasAtLeast, map, partition, pipe } from "remeda";
+import { Divider, ScrollArea, Stack, UnstyledButton } from "@mantine/core";
+import { isNonEmptyArray } from "@likec4/core/types";
+import { Box as Box$1 } from "@likec4/styles/jsx";
+import { isElementModel } from "@likec4/core/model";
+
+// src/overlays/element-details/TabPanelViews.tsx
+const Divider$1 = Divider.withProps({
+	mb: 8,
+	labelPosition: "left",
+	variant: "dashed"
+});
+function TabPanelViews({ elementModel, onNavigateTo }) {
+	const [viewsOf, otherViews] = pipe([...elementModel.views()], map((v) => v.$view), partition((v) => v._type === "element" && v.viewOf === elementModel.id));
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		scrollbars: "y",
+		type: "auto",
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "lg",
+			children: [isNonEmptyArray(viewsOf) && /* @__PURE__ */ jsxs(Box$1, { children: [/* @__PURE__ */ jsx(Divider$1, { label: "views of the element (scoped)" }), /* @__PURE__ */ jsx(Stack, {
+				gap: "sm",
+				children: viewsOf.map((view) => /* @__PURE__ */ jsx(ViewButton, {
+					view,
+					onNavigateTo
+				}, view.id))
+			})] }), isNonEmptyArray(otherViews) && /* @__PURE__ */ jsxs(Box$1, { children: [/* @__PURE__ */ jsx(Divider$1, { label: isElementModel(elementModel) ? "views including this element" : "views including this deployment" }), /* @__PURE__ */ jsx(Stack, {
+				gap: "sm",
+				children: otherViews.map((view) => /* @__PURE__ */ jsx(ViewButton, {
+					view,
+					onNavigateTo
+				}, view.id))
+			})] })]
+		})
+	});
+}
+const ViewButton = ({ view, onNavigateTo }) => {
+	return /* @__PURE__ */ jsxs(UnstyledButton, {
+		className: viewButton,
+		onClick: (e) => {
+			e.stopPropagation();
+			onNavigateTo(view.id);
+		},
+		children: [/* @__PURE__ */ jsx(ViewIcon, { type: view._type }), /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(ViewButtonTitle, { children: view.title || "untitled" }) })]
+	});
+};
+
+export { TabPanelViews };

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

@@ -1,11 +1,11 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { RelationshipsBrowserActorRef } from "../relationships-browser/actor.mjs";
+import { DetailsSubject } from "./subject.mjs";
 import { Rect } from "@xyflow/system";
-import { DiagramView, Fqn, NodeId } from "@likec4/core/types";
+import { DiagramView, NodeId } from "@likec4/core/types";
 import { ActorRef, SnapshotFrom, StateMachine } from "xstate";
-//#region src/overlays/element-details/actor.d.ts
 export type ElementDetailsInput = {
-  subject: Fqn;
+  subject: DetailsSubject;
   currentView: DiagramView;
   initiatedFrom?: {
     node?: NodeId;
@@ -13,7 +13,7 @@ export type ElementDetailsInput = {
   };
 };
 export type Context = {
-  subject: Fqn;
+  subject: DetailsSubject;
   currentView: DiagramView;
   initiatedFrom: {
     node: NodeId | null;
@@ -22,7 +22,7 @@ export type Context = {
 };
 export type Events = {
   type: 'change.subject';
-  subject: Fqn;
+  subject: DetailsSubject;
 } | {
   type: 'close';
 };
@@ -30,5 +30,4 @@ export interface ElementDetailsLogic extends StateMachine<Context, Events, {
   [key: `${string}-relationships`]: RelationshipsBrowserActorRef | undefined;
 }, any, any, any, any, any, never, ElementDetailsInput, any, any, any, any> {}
 export type ElementDetailsSnapshot = SnapshotFrom<ElementDetailsLogic>;
-export interface ElementDetailsActorRef extends ActorRef<ElementDetailsSnapshot, Events> {}
-//#endregion
+export interface ElementDetailsActorRef extends ActorRef<ElementDetailsSnapshot, Events> {}

package/dist/overlays/element-details/actor.mjs

@@ -1,8 +1,8 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { relationshipsBrowserLogic } from "../relationships-browser/actor.mjs";
-import { assign, sendTo, setup, spawnChild, stopChild } from "xstate";
+import { assign, enqueueActions, setup } from "xstate";
 
-//#region src/overlays/element-details/actor.ts
+// src/overlays/element-details/actor.ts
 const _elementDetailsLogic = setup({
 	types: {
 		context: {},
@@ -23,20 +23,37 @@ const _elementDetailsLogic = setup({
 	initial: "active",
 	states: {
 		"active": {
-			entry: spawnChild("relationshipsBrowserLogic", {
-				id: ({ self }) => `${self.id}-relationships`,
-				input: ({ context }) => ({
-					subject: context.subject,
-					viewId: context.currentView.id,
-					scope: "view",
-					enableSelectSubject: false,
-					enableChangeScope: true,
-					closeable: false
-				})
+			entry: enqueueActions(({ context, self, enqueue }) => {
+				if (context.subject.type === "element") enqueue.spawnChild("relationshipsBrowserLogic", {
+					id: `${self.id}-relationships`,
+					input: {
+						subject: context.subject.element,
+						viewId: context.currentView.id,
+						scope: "view",
+						enableSelectSubject: false,
+						enableChangeScope: true,
+						closeable: false
+					}
+				});
+			}),
+			exit: enqueueActions(({ context, self, enqueue }) => {
+				if (context.subject.type === "element") {
+					enqueue.sendTo(`${self.id}-relationships`, { type: "close" });
+					enqueue.stopChild(`${self.id}-relationships`);
+				}
 			}),
-			exit: [sendTo(({ self }) => `${self.id}-relationships`, { type: "close" }), stopChild(({ self }) => `${self.id}-relationships`)],
 			on: {
-				"change.subject": { actions: assign({ subject: ({ event }) => event.subject }) },
+				"change.subject": {
+					target: "active",
+					reenter: true,
+					actions: assign({
+						subject: ({ event }) => event.subject,
+						initiatedFrom: ({ context }) => ({
+							node: null,
+							clientRect: context.initiatedFrom.clientRect
+						})
+					})
+				},
 				"close": "closed"
 			}
 		},
@@ -48,5 +65,4 @@ const _elementDetailsLogic = setup({
 });
 const elementDetailsLogic = _elementDetailsLogic;
 
-//#endregion
 export { elementDetailsLogic };

package/dist/overlays/element-details/actorContext.mjs

@@ -1,7 +1,7 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { createContext, useContext } from "react";
 
-//#region src/overlays/element-details/actorContext.tsx
+// src/overlays/element-details/actorContext.tsx
 /**
 * To improve experience with HMR, we use `createSafeContext` as a boundary for hooks
 */
@@ -13,5 +13,4 @@ const useElementDetailsActorRef = () => {
 	return ctx;
 };
 
-//#endregion
 export { ElementDetailsActorContext, useElementDetailsActorRef };

package/dist/overlays/element-details/subject.d.mts

@@ -0,0 +1,12 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import "../../base/types.mjs";
+import { DeploymentFqn, Fqn } from "@likec4/core";
+export type DetailsSubject = {
+  type: 'element';
+  element: Fqn;
+  deployment?: never;
+} | {
+  type: 'deployment';
+  deployment: DeploymentFqn;
+  element?: never;
+};

package/dist/overlays/element-details/subject.mjs

@@ -0,0 +1,15 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+
+// src/overlays/element-details/subject.ts
+function detailsSubject(data) {
+	if (data.deploymentFqn) return {
+		type: "deployment",
+		deployment: data.deploymentFqn
+	};
+	return data.modelFqn ? {
+		type: "element",
+		element: data.modelFqn
+	} : null;
+}
+
+export { detailsSubject };

package/dist/overlays/hooks.mjs

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

package/dist/overlays/overlay/Overlay.d.mts

@@ -1,6 +1,5 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { PropsWithChildren } from "react";
-//#region src/overlays/overlay/Overlay.d.ts
 export type OverlayProps = PropsWithChildren<{
   fullscreen?: boolean | undefined;
   withBackdrop?: boolean | undefined;
@@ -50,5 +49,4 @@ export declare const Overlay: import("react").ForwardRefExoticComponent<{
   onClick?: never;
 } & {
   children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDialogElement>>;
-//#endregion
+} & import("react").RefAttributes<HTMLDialogElement>>;

package/dist/overlays/overlay/Overlay.mjs

@@ -1,15 +1,15 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
 import { stopPropagation } from "../../utils/xyflow.mjs";
 import { cx } from "@likec4/styles/css";
-import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 import { useTimeoutEffect } from "@react-hookz/web";
-import { FocusTrap, RemoveScroll } from "@mantine/core";
+import { RemoveScroll } from "@mantine/core";
 import { m, useIsPresent, useReducedMotionConfig } from "motion/react";
 import { useFocusTrap, useMergedRef } from "@mantine/hooks";
 import { overlay } from "@likec4/styles/recipes";
 
-//#region src/overlays/overlay/Overlay.tsx
+// src/overlays/overlay/Overlay.tsx
 const backdropBlur = "--_blur";
 const backdropOpacity = "--_opacity";
 const cssVarLevel = "--_level";
@@ -43,7 +43,7 @@ const Overlay = forwardRef(({ onClose, className, classes, overlayLevel = 0, chi
 			if (dialog?.open) dialog.close();
 		};
 	}, [isPresent]);
-	useTimeoutEffect(() => setOpened(true), openDelay > 0 ? openDelay : void 0);
+	useTimeoutEffect(() => setOpened(true), !opened && openDelay > 0 ? openDelay : void 0);
 	const overlayRecipe = overlay({
 		fullscreen,
 		withBackdrop
@@ -113,5 +113,4 @@ const Overlay = forwardRef(({ onClose, className, classes, overlayLevel = 0, chi
 });
 Overlay.displayName = "Overlay";
 
-//#endregion
 export { Overlay };

package/dist/overlays/overlaysActor.d.mts

@@ -1,15 +1,23 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { DetailsSubject } from "./element-details/subject.mjs";
 import { Overlays } from "./types.mjs";
 import { Fqn } from "@likec4/core/types";
 import { ActorRef, SnapshotFrom, StateMachine } from "xstate";
-//#region src/overlays/overlaysActor.d.ts
 export type OverlayActorEvent = {
   type: 'open.elementDetails';
 } & Overlays.ElementDetails.Input | {
   type: 'open.relationshipDetails';
 } & Overlays.RelationshipDetails.Input | {
   type: 'open.relationshipsBrowser';
-} & Overlays.RelationshipsBrowser.Input | {
+} & Overlays.RelationshipsBrowser.Input |
+/**
+ * Replace the subject of an open element details card (no new card is opened)
+ */
+{
+  type: 'change.elementDetails';
+  actorId: string;
+  subject: DetailsSubject;
+} | {
   type: 'close';
   actorId?: string | undefined;
 } | {
@@ -20,7 +28,7 @@ export interface OverlaysContext {
   overlays: Array<{
     type: 'elementDetails';
     id: `elementDetails-${number}`;
-    subject: Fqn;
+    subject: DetailsSubject;
   } | {
     type: 'relationshipDetails';
     id: `relationshipDetails-${number}`;
@@ -45,5 +53,4 @@ export interface OverlaysActorLogic extends StateMachine<OverlaysContext, Overla
   [key: `relationshipsBrowser-${number}`]: Overlays.RelationshipsBrowser.ActorRef | undefined;
 }, any, any, any, any, any, never, never, any, OverlayActorEmitedEvent, any, any> {}
 export type OverlaysActorSnapshot = SnapshotFrom<OverlaysActorLogic>;
-export interface OverlaysActorRef extends ActorRef<OverlaysActorSnapshot, OverlayActorEvent, OverlayActorEmitedEvent> {}
-//#endregion
+export interface OverlaysActorRef extends ActorRef<OverlaysActorSnapshot, OverlayActorEvent, OverlayActorEmitedEvent> {}

package/dist/overlays/overlaysActor.mjs

@@ -1,12 +1,13 @@
 import { __name } from "../_virtual/_rolldown/runtime.mjs";
-import { relationshipsBrowserLogic } from "./relationships-browser/actor.mjs";
+import { isEventFromSearch } from "../utils/search-event.mjs";
 import { elementDetailsLogic } from "./element-details/actor.mjs";
 import { relationshipDetailsLogic } from "./relationship-details/actor.mjs";
+import { relationshipsBrowserLogic } from "./relationships-browser/actor.mjs";
 import { isString, last, reverse } from "remeda";
 import { getHotkeyHandler } from "@mantine/hooks";
 import { assertEvent, fromCallback, setup } from "xstate";
 
-//#region src/overlays/overlaysActor.ts
+// src/overlays/overlaysActor.ts
 const hotkeyLogic = fromCallback(({ sendBack }) => {
 	const handler = getHotkeyHandler([[
 		"Escape",
@@ -16,9 +17,12 @@ const hotkeyLogic = fromCallback(({ sendBack }) => {
 		},
 		{ preventDefault: true }
 	]]);
-	document.body.addEventListener("keydown", handler, { capture: true });
+	const onKeyDown = (event) => {
+		if (!isEventFromSearch(event)) handler(event);
+	};
+	document.body.addEventListener("keydown", onKeyDown, { capture: true });
 	return () => {
-		document.body.removeEventListener("keydown", handler, { capture: true });
+		document.body.removeEventListener("keydown", onKeyDown, { capture: true });
 	};
 });
 const machine = setup({
@@ -87,7 +91,7 @@ const closeAllOverlays = () => machine.enqueueActions(({ context, enqueue }) =>
 });
 const openElementDetails = () => machine.enqueueActions(({ context, enqueue, event }) => {
 	assertEvent(event, "open.elementDetails");
-	if (context.overlays.some((o) => o.type === "elementDetails" && o.subject === event.subject)) return;
+	if (context.overlays.some((o) => o.type === "elementDetails" && o.subject.element === event.subject.element && o.subject.deployment === event.subject.deployment)) return;
 	const id = `elementDetails-${context.seq}`;
 	enqueue.spawnChild("elementDetails", {
 		id,
@@ -104,6 +108,20 @@ const openElementDetails = () => machine.enqueueActions(({ context, enqueue, eve
 	});
 	enqueue(emitOpened(id));
 });
+const changeElementDetails = () => machine.enqueueActions(({ context, enqueue, event }) => {
+	assertEvent(event, "change.elementDetails");
+	const overlay = context.overlays.find((o) => o.id === event.actorId);
+	if (overlay?.type !== "elementDetails") return;
+	if (overlay.subject.element === event.subject.element && overlay.subject.deployment === event.subject.deployment) return;
+	enqueue.sendTo(overlay.id, {
+		type: "change.subject",
+		subject: event.subject
+	});
+	enqueue.assign({ overlays: context.overlays.map((o) => o.id === overlay.id ? {
+		...overlay,
+		subject: event.subject
+	} : o) });
+});
 const openRelationshipDetails = () => machine.enqueueActions(({ context, enqueue, event }) => {
 	assertEvent(event, "open.relationshipDetails");
 	const currentOverlay = last(context.overlays);
@@ -205,6 +223,7 @@ const _overlaysActorLogic = machine.createMachine({
 			states: {
 				hasOverlays: { on: {
 					"open.*": { actions: openOverlay() },
+					"change.elementDetails": { actions: changeElementDetails() },
 					"close": [{
 						guard: "close specific overlay?",
 						actions: closeSpecificOverlay(),
@@ -228,5 +247,4 @@ const _overlaysActorLogic = machine.createMachine({
 });
 const overlaysActorLogic = _overlaysActorLogic;
 
-//#endregion
 export { overlaysActorLogic };

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

@@ -1,12 +1,14 @@
 import { __name } from "../../_virtual/_rolldown/runtime.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 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 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 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 { useEnabledFeatures } from "../../context/DiagramFeatures.mjs";
+import { useEdgeLabelFontLoader } from "../../hooks/useEdgeLabelFontLoader.mjs";
 import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
 import { computeEdgeDetailsViewData, computeRelationshipDetailsViewData } from "./compute.mjs";
-import { RelationshipEdge } from "./custom/edgeTypes.mjs";
 import { CompoundNode, ElementNode } from "./custom/nodeTypes.mjs";
+import { RelationshipEdge } from "./custom/edgeTypes.mjs";
 import { RelationshipDetailsActorContext, useRelationshipDetails, useRelationshipDetailsActor, useRelationshipDetailsState } from "./hooks.mjs";
 import { layoutRelationshipDetails } from "./layout.mjs";
 import { SelectEdge } from "./SelectEdge.mjs";
@@ -22,7 +24,7 @@ import { AnimatePresence, LayoutGroup, m } from "motion/react";
 import { useSelector } from "@xstate/react";
 import { useCallbackRef, useStateHistory } from "@mantine/hooks";
 
-//#region src/overlays/relationship-details/RelationshipDetails.tsx
+// src/overlays/relationship-details/RelationshipDetails.tsx
 const nodeTypes = {
 	element: ElementNode,
 	compound: CompoundNode
@@ -55,6 +57,8 @@ const SyncRelationshipDetailsXYFlow = memo(() => {
 	const subject = useSelector(actor, selectSubject, deepEqual);
 	const likec4model = useLikeC4Model();
 	const view = likec4model.findView(subject.viewId) ?? null;
+	const { enableNavigateTo } = useEnabledFeatures();
+	const [fontsVersion, ensureFontsLoaded] = useEdgeLabelFontLoader();
 	const data = useMemo(() => {
 		let data;
 		if ("edgeId" in subject && isTruthy(subject.edgeId)) {
@@ -66,12 +70,17 @@ const SyncRelationshipDetailsXYFlow = memo(() => {
 			target: likec4model.element(subject.target)
 		});
 		else return null;
-		return layoutRelationshipDetails(data, view);
+		return layoutRelationshipDetails(data, view, { withNavigateButtons: enableNavigateTo });
 	}, [
 		subject,
 		view,
-		likec4model
+		likec4model,
+		enableNavigateTo,
+		fontsVersion
 	]);
+	useEffect(() => {
+		if (data) ensureFontsLoaded(data.edges.flatMap((edge) => edge.label ?? []));
+	}, [data]);
 	const store = useStoreApi();
 	const instance = useReactFlow();
 	useEffect(() => {
@@ -282,5 +291,4 @@ const TopLeftPanelInner = ({ edge, view }) => {
 	});
 };
 
-//#endregion
 export { RelationshipDetails };

package/dist/overlays/relationship-details/SelectEdge.css.mjs

@@ -1,6 +1,6 @@
 import { css, cx } from "@likec4/styles/css";
 
-//#region src/overlays/relationship-details/SelectEdge.css.ts
+// src/overlays/relationship-details/SelectEdge.css.ts
 const edgeEnpoint = css.raw({
 	display: "inline-flex",
 	alignItems: "center",
@@ -73,5 +73,4 @@ const edgeDataGrid = css({
 });
 const scrollArea = css({ maxHeight: ["[70vh]", "[calc(100cqh - 70px)]"] });
 
-//#endregion
 export { edgeArrow, edgeGrid, edgeLabel, edgeRow, edgeSource, edgeTarget, scrollArea };

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

@@ -1,13 +1,13 @@
 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 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 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 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 { useRelationshipDetails } from "./hooks.mjs";
 import { edgeArrow, edgeGrid, edgeLabel, edgeRow, edgeSource, edgeTarget, scrollArea } from "./SelectEdge.css.mjs";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Button, Popover, PopoverDropdown, PopoverTarget, ScrollAreaAutosize, Text, ThemeIcon } from "@mantine/core";
 
-//#region src/overlays/relationship-details/SelectEdge.tsx
+// src/overlays/relationship-details/SelectEdge.tsx
 const SelectEdge = ({ edge, view }) => {
 	const browser = useRelationshipDetails();
 	const viewport = useRef(null);
@@ -147,5 +147,4 @@ const SelectEdge = ({ edge, view }) => {
 	});
 };
 
-//#endregion
 export { SelectEdge };

package/dist/overlays/relationship-details/_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, MarkdownOrString, RelationId, RelationshipArrowType, RelationshipLineType, ViewId } from "@likec4/core/types";
+import { BBox, Color, DiagramNode, ExclusiveUnion, Fqn, IconUrl, MarkdownOrString, RelationId, RelationshipArrowType, RelationshipLineType, ViewId } from "@likec4/core/types";
 import { Simplify } from "type-fest";
-//#region src/overlays/relationship-details/_types.d.ts
 export declare namespace RelationshipDetailsTypes {
   type Column = 'sources' | 'targets';
   /**
@@ -47,6 +46,10 @@ export declare namespace RelationshipDetailsTypes {
     relationId: RelationId;
     color: Color;
     label: string | null;
+    /**
+     * Label box placed by the layout, the edge goes through it
+     */
+    labelBBox: BBox | null;
     technology?: string | undefined;
     navigateTo: ViewId | null;
     line: RelationshipLineType;
@@ -56,5 +59,4 @@ export declare namespace RelationshipDetailsTypes {
   }>;
   type Edge = BaseEdge<EdgeData, 'relationship'>;
   type EdgeProps = BaseEdgeProps<Edge>;
-}
-//#endregion
+}

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

@@ -4,7 +4,6 @@ import { LayoutResult } from "./layout.mjs";
 import { EdgeChange, NodeChange, ReactFlowInstance, ReactFlowState } from "@xyflow/react";
 import { BBox, EdgeId, ExclusiveUnion, Fqn, ViewId } from "@likec4/core";
 import { ActorRef, SnapshotFrom, StateMachine } from "xstate";
-//#region src/overlays/relationship-details/actor.d.ts
 type XYFLowInstance = ReactFlowInstance<RelationshipDetailsTypes.AnyNode, RelationshipDetailsTypes.Edge>;
 type XYStoreState = ReactFlowState<RelationshipDetailsTypes.AnyNode, RelationshipDetailsTypes.Edge>;
 type XYStoreApi = {
@@ -105,5 +104,4 @@ export type Tags = never;
 export interface RelationshipDetailsLogic extends StateMachine<Context, Events, {}, any, any, any, any, any, Tags, Input, any, any, any, any> {}
 export type RelationshipDetailsSnapshot = SnapshotFrom<RelationshipDetailsLogic>;
 export interface RelationshipDetailsActorRef extends ActorRef<RelationshipDetailsSnapshot, Events> {}
-//#endregion
 export type { Input as RelationshipDetailsInput };

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

@@ -1,6 +1,6 @@
 import { __name } from "../../_virtual/_rolldown/runtime.mjs";
-import { MinZoom } from "../../base/const.mjs";
 import { Base } from "../../base/Base.mjs";
+import { MinZoom } from "../../base/const.mjs";
 import { updateEdges } from "../../base/updateEdges.mjs";
 import { updateNodes } from "../../base/updateNodes.mjs";
 import { typedSystem } from "../../likec4diagram/state/utils.mjs";
@@ -11,7 +11,7 @@ import { isString, prop } from "remeda";
 import { invariant } from "@likec4/core";
 import { assertEvent, assign, cancel, enqueueActions, raise, setup } from "xstate";
 
-//#region src/overlays/relationship-details/actor.ts
+// src/overlays/relationship-details/actor.ts
 function inputToSubject(input) {
 	if ("edgeId" in input) {
 		invariant(isString(input.edgeId), "edgeId is required");
@@ -247,5 +247,4 @@ const _relationshipDetailsLogic = setup({
 });
 const relationshipDetailsLogic = _relationshipDetailsLogic;
 
-//#endregion
 export { relationshipDetailsLogic };

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

@@ -4,7 +4,7 @@ import { invariant, isAncestor, sortParentsFirst } from "@likec4/core/utils";
 import { modelConnection } from "@likec4/core/model";
 import { treeFromElements } from "@likec4/core/compute-view";
 
-//#region src/overlays/relationship-details/compute.ts
+// src/overlays/relationship-details/compute.ts
 const finalize = (elements, explicits) => {
 	if (elements.size > 2 && explicits.size !== elements.size) return new Set(sortParentsFirst([...treeFromElements(elements).flatten(), ...explicits]));
 	if (elements.size > 1) return new Set(sortParentsFirst([...elements]));
@@ -112,5 +112,4 @@ function computeRelationshipDetailsViewData({ source, target }) {
 	};
 }
 
-//#endregion
 export { computeEdgeDetailsViewData, computeRelationshipDetailsViewData };

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

@@ -1,14 +1,14 @@
 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 { jsx } from "react/jsx-runtime";
 
-//#region src/overlays/relationship-details/custom/ElementActions.tsx
+// src/overlays/relationship-details/custom/ElementActions.tsx
 const ElementActions = (props) => {
 	const { enableNavigateTo, enableVscode } = useEnabledFeatures();
 	const diagram = useDiagram();
@@ -45,5 +45,4 @@ const ElementActions = (props) => {
 	});
 };
 
-//#endregion
 export { ElementActions };

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

@@ -1,20 +1,20 @@
 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 { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
+import { useDiagram } from "../../../hooks/safeContext.mjs";
+import { edgePathThroughLabel } from "../../../utils/edge-path-through-label.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { getBezierPath } from "@xyflow/system";
 
-//#region src/overlays/relationship-details/custom/edgeTypes.tsx
+// src/overlays/relationship-details/custom/edgeTypes.tsx
 const RelationshipEdge = memoEdge((props) => {
 	const { enableNavigateTo } = useEnabledFeatures();
-	const { data: { navigateTo } } = props;
-	const [svgPath, labelX, labelY] = getBezierPath(props);
+	const { data: { navigateTo, labelBBox } } = props;
+	const [svgPath, labelPosition] = edgePathThroughLabel(props, labelBBox);
 	const diagram = useDiagram();
 	return /* @__PURE__ */ jsxs(EdgeContainer, {
 		...props,
@@ -23,12 +23,8 @@ const RelationshipEdge = memoEdge((props) => {
 			svgPath
 		}), /* @__PURE__ */ jsx(EdgeLabelContainer, {
 			edgeProps: props,
-			labelPosition: {
-				x: labelX,
-				y: labelY,
-				translate: "translate(-50%, 0)"
-			},
-			style: { maxWidth: Math.abs(props.targetX - props.sourceX - 100) },
+			labelPosition,
+			...!labelBBox && { style: { maxWidth: Math.abs(props.targetX - props.sourceX - 100) } },
 			children: /* @__PURE__ */ jsx(EdgeLabel, {
 				edgeProps: props,
 				children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, {
@@ -43,5 +39,4 @@ const RelationshipEdge = memoEdge((props) => {
 	});
 });
 
-//#endregion
 export { RelationshipEdge };