@likec4/diagram 1.59.4 → 1.60.0

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

@@ -0,0 +1,103 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { RelationshipsBrowserTypes } from "./_types.mjs";
+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 = {
+  getState: () => XYStoreState;
+  setState: (state: XYStoreState) => void;
+};
+export type Input = {
+  subject: Fqn;
+  viewId: ViewId | null;
+  scope: 'global' | 'view';
+  closeable?: boolean;
+  enableSelectSubject?: boolean;
+  enableChangeScope?: boolean;
+};
+export interface Context {
+  subject: Fqn;
+  viewId: ViewId | null;
+  scope: 'global' | 'view';
+  closeable: boolean;
+  enableSelectSubject: boolean;
+  enableChangeScope: boolean;
+  xyflow: XYFLowInstance | null;
+  xystore: XYStoreApi | null;
+  layouted: LayoutRelationshipsViewResult | null;
+  navigateFromNode: string | null;
+  xynodes: RelationshipsBrowserTypes.Node[];
+  xyedges: RelationshipsBrowserTypes.Edge[];
+}
+export type Events = {
+  type: 'xyflow.init';
+  instance: XYFLowInstance;
+  store: XYStoreApi;
+} | {
+  type: 'xyflow.nodeClick';
+  node: RelationshipsBrowserTypes.Node;
+} | {
+  type: 'xyflow.edgeClick';
+  edge: RelationshipsBrowserTypes.Edge;
+} | {
+  type: 'xyflow.applyNodeChanges';
+  changes: NodeChange<RelationshipsBrowserTypes.Node>[];
+} | {
+  type: 'xyflow.applyEdgeChanges';
+  changes: EdgeChange<RelationshipsBrowserTypes.Edge>[];
+} | {
+  type: 'xyflow.paneClick';
+} | {
+  type: 'xyflow.paneDblClick';
+} | {
+  type: 'xyflow.resized';
+} | {
+  type: 'xyflow.edgeMouseEnter';
+  edge: RelationshipsBrowserTypes.Edge;
+} | {
+  type: 'xyflow.edgeMouseLeave';
+  edge: RelationshipsBrowserTypes.Edge;
+} | {
+  type: 'xyflow.selectionChange';
+  nodes: RelationshipsBrowserTypes.Node[];
+  edges: RelationshipsBrowserTypes.Edge[];
+} | {
+  type: 'dim.nonhovered.edges';
+} | {
+  type: 'undim.edges';
+} | {
+  type: 'xyflow.updateNodeInternals';
+} | {
+  type: 'xyflow.unmount';
+} | {
+  type: 'fitDiagram';
+  duration?: number;
+  bounds?: BBox;
+} | {
+  type: 'navigate.to';
+  subject: Fqn;
+  fromNode?: string | undefined;
+  viewId?: ViewId | undefined;
+} | {
+  type: 'update.xydata';
+  xynodes: RelationshipsBrowserTypes.Node[];
+  xyedges: RelationshipsBrowserTypes.Edge[];
+} | {
+  type: 'change.scope';
+  scope: 'global' | 'view';
+} | {
+  type: 'update.view';
+  layouted: LayoutRelationshipsViewResult;
+} | {
+  type: 'close';
+};
+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

@@ -0,0 +1,379 @@
+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 { updateEdges } from "../../base/updateEdges.mjs";
+import { updateNodes } from "../../base/updateNodes.mjs";
+import { typedSystem } from "../../likec4diagram/state/utils.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 { assertEvent, assign, cancel, enqueueActions, fromPromise, raise, setup } from "xstate";
+
+//#region src/overlays/relationships-browser/actor.ts
+/**
+* Root node in 'subjects' column
+*/
+const findRootSubject = (nodes) => nodes.find((n) => n.data.column === "subjects" && isNullish(n.parentId));
+const layouter = fromPromise(async ({ input, self, signal }) => {
+	const { subjectId, navigateFromNode, xyflow, xystore, update } = input;
+	let { nodes: currentNodes, width, height } = xystore.getState();
+	const next = viewToNodesEdge(update);
+	const updateXYData = () => {
+		const { nodes, edges } = xystore.getState();
+		return {
+			xynodes: updateNodes(nodes, next.xynodes),
+			xyedges: updateEdges(edges, next.xyedges)
+		};
+	};
+	const parent = nonNullable(self._parent);
+	let zoom = xyflow.getZoom();
+	const maxZoom = Math.max(zoom, 1);
+	const nextviewport = getViewportForBounds$1(update.bounds, width, height, MinZoom, maxZoom, ViewPadding);
+	const nextSubjectNode = next.xynodes.find((n) => n.type !== "empty" && n.data.column === "subjects" && n.data.fqn === subjectId) ?? findRootSubject(next.xynodes);
+	const currentSubjectNode = findRootSubject(currentNodes);
+	const existingNode = navigateFromNode ? currentNodes.find((n) => n.id === navigateFromNode) : currentNodes.find((n) => n.type !== "empty" && n.data.column !== "subjects" && n.data.fqn === subjectId);
+	if (!nextSubjectNode || !existingNode || nextSubjectNode.type === "empty" || !currentSubjectNode || nextSubjectNode.data.fqn === currentSubjectNode.data.fqn) {
+		await xyflow.setViewport(nextviewport);
+		return updateXYData();
+	}
+	const nextSubjectCenter = {
+		x: nextSubjectNode.position.x + (nextSubjectNode.initialWidth ?? 0) / 2,
+		y: nextSubjectNode.position.y + (nextSubjectNode.initialHeight ?? 0) / 2
+	};
+	const currentSubjectInternalNode = xyflow.getInternalNode(currentSubjectNode.id);
+	const currentSubjectCenter = getNodeCenter(currentSubjectInternalNode);
+	const nested = /* @__PURE__ */ new Set();
+	currentNodes.forEach((n) => {
+		if (n.id === existingNode.id) return;
+		if (n.data.column === "subjects") {
+			nested.add(n.id);
+			return;
+		}
+		if (n.parentId && (n.parentId === existingNode.id || nested.has(n.parentId))) nested.add(n.id);
+	});
+	currentNodes = updateNodes(currentNodes, currentNodes.flatMap((n) => {
+		if (nested.has(n.id)) return [];
+		if (n.id !== existingNode.id) return {
+			...n,
+			data: {
+				...n.data,
+				dimmed: n.data.column === "subjects" ? "immediate" : true
+			}
+		};
+		return {
+			...omit(n, ["parentId"]),
+			position: {
+				x: currentSubjectCenter.x - n.initialWidth / 2,
+				y: currentSubjectCenter.y - n.initialHeight / 2
+			},
+			zIndex: ZIndexes.Max,
+			hidden: false,
+			data: {
+				...n.data,
+				dimmed: false
+			}
+		};
+	}));
+	parent.send({
+		type: "update.xydata",
+		xynodes: currentNodes,
+		xyedges: []
+	});
+	await delay(120);
+	next.xynodes = next.xynodes.map(Base.setDimmed(false));
+	if (signal.aborted) return updateXYData();
+	const duration = 300;
+	xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, {
+		zoom,
+		duration,
+		interpolate: "smooth"
+	});
+	await delay(duration);
+	await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
+	return updateXYData();
+});
+const machine = setup({
+	types: {
+		context: {},
+		tags: "",
+		children: {},
+		input: {},
+		events: {}
+	},
+	actors: { layouter },
+	guards: {
+		hasViewId: ({ context }) => context.viewId !== null,
+		isReady: ({ context }) => context.xyflow !== null && context.xystore !== null && context.layouted !== null,
+		anotherSubject: ({ context, event }) => {
+			if (event.type === "update.view") return context.layouted?.subject !== event.layouted.subject;
+			return false;
+		}
+	}
+});
+const xyflowInit = () => machine.assign(({ event }) => {
+	assertEvent(event, "xyflow.init");
+	return {
+		xyflow: event.instance,
+		xystore: event.store
+	};
+});
+const updateView = () => machine.assign(({ event }) => {
+	assertEvent(event, "update.view");
+	return {
+		layouted: event.layouted,
+		...viewToNodesEdge(event.layouted)
+	};
+});
+const xyflowUpdateNodeInternals = () => machine.createAction(({ context }) => {
+	invariant(context.xystore, "xystore is not initialized");
+	const { domNode, updateNodeInternals } = context.xystore.getState();
+	const nodeIds = new Set(context.xyedges.flatMap((e) => [e.source, e.target]));
+	if (nodeIds.size === 0 || !domNode) return;
+	const updates = /* @__PURE__ */ new Map();
+	const domNodes = domNode.querySelectorAll(".react-flow__node");
+	for (const nodeElement of domNodes) {
+		const nodeId = nodeElement.getAttribute("data-id");
+		if (nodeId && nodeIds.has(nodeId)) updates.set(nodeId, {
+			id: nodeId,
+			nodeElement,
+			force: true
+		});
+	}
+	updateNodeInternals(updates, { triggerFitView: false });
+});
+const xyflowFitDiagram = (params) => machine.createAction(({ context, event }) => {
+	params ??= event.type === "fitDiagram" ? event : {};
+	let { duration, bounds } = params ?? {};
+	duration ??= 450;
+	const { xyflow, xystore } = context;
+	invariant(xyflow, "xyflow is not initialized");
+	invariant(xystore, "xystore is not initialized");
+	bounds ??= context.layouted?.bounds;
+	const maxZoom = Math.max(xyflow.getZoom(), 1);
+	if (bounds) {
+		const { width, height } = xystore.getState();
+		const viewport = getViewportForBounds$1(bounds, width, height, MinZoom, maxZoom, ViewPadding);
+		xyflow.setViewport(viewport, duration > 0 ? {
+			duration,
+			interpolate: "smooth"
+		} : void 0).catch(console.error);
+	} else xyflow.fitView({
+		minZoom: MinZoom,
+		maxZoom,
+		padding: ViewPadding,
+		...duration > 0 && {
+			duration,
+			interpolate: "smooth"
+		}
+	}).catch(console.error);
+});
+const xyflowApplyNodeChanges = () => machine.assign(({ context, event }) => {
+	assertEvent(event, "xyflow.applyNodeChanges");
+	return { xynodes: applyNodeChanges(event.changes, context.xynodes) };
+});
+const xyflowApplyEdgeChanges = () => machine.assign(({ context, event }) => {
+	assertEvent(event, "xyflow.applyEdgeChanges");
+	return { xyedges: applyEdgeChanges(event.changes, context.xyedges) };
+});
+const openRelationshipSource = () => machine.enqueueActions(({ system, event }) => {
+	if (event.type !== "xyflow.edgeClick") return;
+	const diagramActor = typedSystem(system).diagramActorRef;
+	const relations = event.edge.data.relations;
+	if (hasAtLeast(relations, 1)) diagramActor.send({
+		type: "open.source",
+		relation: relations[0]
+	});
+});
+const dispose = () => machine.assign({
+	xyflow: null,
+	layouted: null,
+	xystore: null,
+	xyedges: [],
+	xynodes: []
+});
+const _relationshipsBrowserLogic = machine.createMachine({
+	id: "relationships-browser",
+	context: ({ input }) => ({
+		subject: input.subject,
+		viewId: input.viewId,
+		scope: input.viewId ? input.scope : "global",
+		closeable: input.closeable ?? true,
+		enableSelectSubject: input.enableSelectSubject ?? true,
+		enableChangeScope: input.enableChangeScope ?? true,
+		xyflow: null,
+		xystore: null,
+		layouted: null,
+		navigateFromNode: null,
+		xynodes: [],
+		xyedges: []
+	}),
+	initial: "initializing",
+	on: {
+		"xyflow.applyNodeChanges": { actions: xyflowApplyNodeChanges() },
+		"xyflow.applyEdgeChanges": { actions: xyflowApplyEdgeChanges() }
+	},
+	states: {
+		initializing: { on: {
+			"xyflow.init": {
+				actions: xyflowInit(),
+				target: "isReady"
+			},
+			"update.view": {
+				actions: updateView(),
+				target: "isReady"
+			},
+			"stop": "closed",
+			"close": "closed"
+		} },
+		"isReady": { always: [{
+			guard: "isReady",
+			actions: [xyflowFitDiagram({ duration: 0 }), raise({ type: "xyflow.updateNodeInternals" }, { delay: 150 })],
+			target: "active"
+		}, { target: "initializing" }] },
+		"active": {
+			initial: "idle",
+			tags: ["active"],
+			on: {
+				"xyflow.nodeClick": { actions: enqueueActions(({ event, enqueue }) => {
+					if ("fqn" in event.node.data) {
+						const fqn = event.node.data.fqn;
+						enqueue.raise({
+							type: "navigate.to",
+							subject: fqn,
+							fromNode: event.node.id
+						});
+					}
+				}) },
+				"xyflow.edgeClick": [{
+					guard: "hasViewId",
+					actions: enqueueActions(({ event, context, system, enqueue }) => {
+						if (event.edge.selected || event.edge.data.relations.length > 1) enqueue.sendTo(typedSystem(system).overlaysActorRef, {
+							type: "open.relationshipDetails",
+							viewId: context.viewId,
+							source: event.edge.data.sourceFqn,
+							target: event.edge.data.targetFqn
+						});
+						else enqueue(openRelationshipSource());
+					})
+				}, { actions: openRelationshipSource() }],
+				"navigate.to": { actions: [assign({
+					subject: ({ event }) => event.subject,
+					viewId: ({ event, context }) => event.viewId ?? context.viewId ?? null,
+					navigateFromNode: ({ event }) => event.fromNode ?? null
+				})] },
+				"xyflow.paneDblClick": { actions: xyflowFitDiagram() },
+				"update.view": {
+					actions: updateView(),
+					target: ".layouting"
+				},
+				"change.scope": { actions: assign({ scope: ({ event }) => event.scope }) },
+				"xyflow.updateNodeInternals": { actions: xyflowUpdateNodeInternals() },
+				"fitDiagram": { actions: xyflowFitDiagram() },
+				"xyflow.resized": { actions: [cancel("fitDiagram"), raise({ type: "fitDiagram" }, {
+					id: "fitDiagram",
+					delay: 300
+				})] },
+				"xyflow.init": { actions: xyflowInit() },
+				"xyflow.unmount": { target: "initializing" },
+				"close": "closed"
+			},
+			states: {
+				"idle": { on: {
+					"xyflow.edgeMouseEnter": { actions: [
+						assign({ xyedges: ({ context, event }) => {
+							const hasDimmed = context.xyedges.some((edge) => edge.data.dimmed !== false || edge.selected);
+							return context.xyedges.map((edge) => {
+								if (edge.id === event.edge.id) return Base.setData(edge, {
+									hovered: true,
+									dimmed: false
+								});
+								return hasDimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge;
+							});
+						} }),
+						cancel("undim.edges"),
+						cancel("dim.nonhovered.edges"),
+						raise({ type: "dim.nonhovered.edges" }, {
+							id: "dim.nonhovered.edges",
+							delay: 200
+						})
+					] },
+					"xyflow.edgeMouseLeave": { actions: [
+						assign({ xyedges: ({ context, event }) => {
+							return context.xyedges.map((edge) => {
+								if (edge.id === event.edge.id) return Base.setHovered(edge, false);
+								return edge;
+							});
+						} }),
+						cancel("dim.nonhovered.edges"),
+						raise({ type: "undim.edges" }, {
+							id: "undim.edges",
+							delay: 400
+						})
+					] },
+					"dim.nonhovered.edges": { actions: assign({ xyedges: ({ context }) => context.xyedges.map((edge) => edge.data.hovered ? edge : Base.setDimmed(edge, edge.data.dimmed === "immediate" ? "immediate" : true)) }) },
+					"undim.edges": { actions: assign({ xyedges: ({ context }) => {
+						return context.xyedges.map(Base.setDimmed(false));
+					} }) },
+					"xyflow.selectionChange": { actions: enqueueActions(({ event, context, enqueue }) => {
+						if (event.edges.length === 0 && context.xyedges.some((e) => e.data.dimmed) && !context.xyedges.some((e) => e.data.hovered)) enqueue.raise({ type: "undim.edges" });
+					}) }
+				} },
+				"layouting": {
+					invoke: {
+						id: "layouter",
+						src: "layouter",
+						input: ({ context }) => {
+							return {
+								subjectId: context.subject,
+								navigateFromNode: context.navigateFromNode,
+								xyflow: nonNullable(context.xyflow),
+								xystore: nonNullable(context.xystore),
+								update: nonNullable(context.layouted)
+							};
+						},
+						onDone: {
+							target: "idle",
+							actions: enqueueActions(({ enqueue, event }) => {
+								enqueue.assign({
+									xynodes: event.output.xynodes,
+									xyedges: event.output.xyedges,
+									navigateFromNode: null
+								});
+								enqueue.raise({
+									type: "fitDiagram",
+									duration: 200
+								}, {
+									id: "fitDiagram",
+									delay: 50
+								});
+								for (let i = 1; i < 8; i++) enqueue.raise({ type: "xyflow.updateNodeInternals" }, { delay: 120 + i * 75 });
+							})
+						}
+					},
+					on: {
+						"update.xydata": { actions: assign({
+							xynodes: ({ event }) => event.xynodes,
+							xyedges: ({ event }) => event.xyedges
+						}) },
+						"xyflow.applyEdgeChanges": {},
+						"xyflow.applyNodeChanges": {}
+					}
+				}
+			}
+		},
+		closed: {
+			id: "closed",
+			type: "final",
+			entry: dispose()
+		}
+	},
+	exit: dispose()
+});
+const relationshipsBrowserLogic = _relationshipsBrowserLogic;
+
+//#endregion
+export { layouter, relationshipsBrowserLogic };

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

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

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

@@ -0,0 +1,67 @@
+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 { 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 { useRelationshipsBrowser, useRelationshipsBrowserState } from "../hooks.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/overlays/relationships-browser/custom/ElementActions.tsx
+const selectSubject = (state) => state.context.subject;
+const ElementActions = (props) => {
+	const { enableNavigateTo, enableVscode } = useEnabledFeatures();
+	const diagram = useDiagram();
+	const currentViewId = useCurrentViewId();
+	const browser = useRelationshipsBrowser();
+	const subject = useRelationshipsBrowserState(selectSubject);
+	const { navigateTo, fqn } = props.data;
+	const buttons = useMemo(() => {
+		const buttons = [];
+		if (navigateTo && enableNavigateTo && currentViewId !== navigateTo) buttons.push({
+			key: "navigate",
+			icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.navigateTo(navigateTo);
+			}
+		});
+		if (fqn !== subject) buttons.push({
+			key: "relationships",
+			icon: /* @__PURE__ */ jsx(IconTransform, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				browser.navigateTo(fqn, props.id);
+			}
+		});
+		if (enableVscode) buttons.push({
+			key: "goToSource",
+			icon: /* @__PURE__ */ jsx(IconFileSymlink, {}),
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.openSource({ element: fqn });
+			}
+		});
+		return buttons;
+	}, [
+		navigateTo,
+		enableNavigateTo,
+		currentViewId,
+		fqn,
+		subject,
+		enableVscode,
+		diagram,
+		browser,
+		props.id
+	]);
+	return /* @__PURE__ */ jsx(ElementActionButtons, {
+		buttons,
+		...props
+	});
+};
+
+//#endregion
+export { ElementActions };

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

@@ -0,0 +1,27 @@
+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
+function EmptyNode({ data: { column } }) {
+	return /* @__PURE__ */ jsx(Box, {
+		css: {
+			width: "100%",
+			height: "100%",
+			border: `[3px dashed {colors.border.default}]`,
+			borderRadius: "md",
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center"
+		},
+		children: /* @__PURE__ */ jsxs(Txt, {
+			textStyle: "dimmed",
+			fontSize: "lg",
+			medium: true,
+			children: ["No ", column === "incomers" ? "incoming" : "outgoing"]
+		})
+	});
+}
+
+//#endregion
+export { EmptyNode };

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

@@ -0,0 +1,70 @@
+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 { 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
+const RelationshipEdge = memoEdge((props) => {
+	const browser = useRelationshipsBrowser();
+	const { enableNavigateTo } = useEnabledFeatures();
+	const { data: { navigateTo, relations, existsInCurrentView } } = props;
+	const [svgPath, labelX, labelY] = getBezierPath(props);
+	const diagram = useDiagram();
+	const markOrange = relations.length > 1 || !existsInCurrentView;
+	const edgeProps = markOrange ? {
+		...props,
+		data: {
+			...props.data,
+			color: "amber"
+		}
+	} : props;
+	let label = /* @__PURE__ */ jsx(EdgeLabel, {
+		edgeProps,
+		className: css({ transition: "fast" }),
+		children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, {
+			...props,
+			onClick: (e) => {
+				e.stopPropagation();
+				diagram.navigateTo(navigateTo);
+			}
+		})
+	});
+	if (!existsInCurrentView) label = /* @__PURE__ */ jsx(Tooltip, {
+		color: "orange",
+		c: "black",
+		label: "This relationship is not included in the current view",
+		portalProps: { target: `#${browser.rootElementId}` },
+		openDelay: 800,
+		children: label
+	});
+	return /* @__PURE__ */ jsxs(EdgeContainer, {
+		...edgeProps,
+		children: [/* @__PURE__ */ jsx(EdgePath, {
+			edgeProps,
+			svgPath,
+			...markOrange && { 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) },
+			children: label
+		})]
+	});
+});
+
+//#endregion
+export { RelationshipEdge };