@likec4/diagram 1.59.3 → 1.60.0

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

@@ -0,0 +1,251 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { MinZoom } from "../../base/const.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 { layoutResultToXYFlow } from "./layout-to-xyflow.mjs";
+import { applyEdgeChanges, applyNodeChanges, getViewportForBounds } from "@xyflow/react";
+import { shallowEqual } from "fast-equals";
+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
+function inputToSubject(input) {
+	if ("edgeId" in input) {
+		invariant(isString(input.edgeId), "edgeId is required");
+		return { edgeId: input.edgeId };
+	}
+	return {
+		source: input.source,
+		target: input.target
+	};
+}
+const ViewPadding = {
+	x: "22px",
+	y: "22px"
+};
+const _relationshipDetailsLogic = setup({
+	types: {
+		context: {},
+		input: {},
+		tags: {},
+		events: {}
+	},
+	actions: {
+		"xyflow:fitDiagram": ({ context }, params) => {
+			let { duration, bounds } = params ?? {};
+			duration ??= 450;
+			const { xyflow, xystore } = context;
+			invariant(xyflow, "xyflow is not initialized");
+			invariant(xystore, "xystore is not initialized");
+			bounds ??= context.bounds;
+			const maxZoom = Math.max(xyflow.getZoom(), 1);
+			if (bounds) {
+				const { width, height } = xystore.getState();
+				const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, ViewPadding);
+				xyflow.setViewport(viewport, duration > 0 ? { duration } : void 0).catch(console.error);
+			} else xyflow.fitView({
+				minZoom: MinZoom,
+				maxZoom,
+				padding: ViewPadding,
+				...duration > 0 && {
+					duration,
+					interpolate: "smooth"
+				}
+			}).catch(console.error);
+		},
+		"xyflow:updateNodeInternals": ({ 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();
+			for (const updateId of nodeIds) {
+				const nodeElement = domNode.querySelector(`.react-flow__node[data-id="${updateId}"]`);
+				if (nodeElement) updates.set(updateId, {
+					id: updateId,
+					nodeElement,
+					force: true
+				});
+			}
+			updateNodeInternals(updates, { triggerFitView: false });
+		},
+		"updateXYFlow": assign(({ context, event }) => {
+			assertEvent(event, "xyflow.init");
+			let initialized = context.initialized;
+			if (!initialized.xyflow) initialized = {
+				...initialized,
+				xyflow: true
+			};
+			return {
+				initialized,
+				xyflow: event.instance,
+				xystore: event.store
+			};
+		}),
+		"updateLayoutData": assign(({ context, event }) => {
+			assertEvent(event, "update.layoutData");
+			const { xynodes, xyedges, bounds } = layoutResultToXYFlow(event.data);
+			let initialized = context.initialized;
+			if (!initialized.xydata) initialized = {
+				...initialized,
+				xydata: true
+			};
+			return {
+				initialized,
+				xynodes: updateNodes(context.xynodes, xynodes),
+				xyedges: updateEdges(context.xyedges, xyedges),
+				bounds: shallowEqual(context.bounds, bounds) ? context.bounds : bounds
+			};
+		}),
+		"open relationship source": enqueueActions(({ system, event }) => {
+			if (event.type !== "xyflow.edgeClick") return;
+			const diagramActor = typedSystem(system).diagramActorRef;
+			const relationId = event.edge.data.relationId;
+			if (relationId) diagramActor.send({
+				type: "open.source",
+				relation: relationId
+			});
+		})
+	},
+	guards: {
+		"isReady": ({ context }) => context.initialized.xydata && context.initialized.xyflow,
+		"enable: navigate.to": () => true
+	}
+}).createMachine({
+	initial: "initializing",
+	context: ({ input }) => ({
+		subject: inputToSubject(input),
+		viewId: input.viewId,
+		bounds: {
+			x: 0,
+			y: 0,
+			width: 200,
+			height: 200
+		},
+		initialized: {
+			xydata: false,
+			xyflow: false
+		},
+		xyflow: null,
+		xystore: null,
+		xynodes: [],
+		xyedges: []
+	}),
+	states: {
+		"initializing": { on: {
+			"xyflow.init": {
+				actions: "updateXYFlow",
+				target: "isReady"
+			},
+			"update.layoutData": {
+				actions: "updateLayoutData",
+				target: "isReady"
+			},
+			"close": { target: "closed" }
+		} },
+		"isReady": { always: [{
+			guard: "isReady",
+			actions: [{
+				type: "xyflow:fitDiagram",
+				params: { duration: 0 }
+			}, raise({ type: "xyflow.updateNodeInternals" }, { delay: 50 })],
+			target: "ready"
+		}, { target: "initializing" }] },
+		"ready": {
+			on: {
+				"xyflow.edgeMouseEnter": { actions: [
+					assign({ xyedges: ({ context, event }) => {
+						const hasDimmed = context.xyedges.some((edge) => edge.data.dimmed === true || edge.data.dimmed === "immediate");
+						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: 100
+					})
+				] },
+				"xyflow.edgeMouseLeave": { actions: [
+					assign({ xyedges: ({ context, event }) => 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) => Base.setDimmed(edge, edge.data.hovered !== true)) }) },
+				"undim.edges": { actions: assign({ xyedges: ({ context }) => {
+					if (context.xyedges.some((edge) => edge.selected === true)) return context.xyedges.map((edge) => Base.setDimmed(edge, edge.selected !== true ? edge.data.dimmed || "immediate" : false));
+					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" });
+				}) },
+				"update.layoutData": { actions: [
+					"updateLayoutData",
+					cancel("fitDiagram"),
+					raise({
+						type: "fitDiagram",
+						duration: 0
+					}, {
+						id: "fitDiagram",
+						delay: 50
+					}),
+					raise({ type: "xyflow.updateNodeInternals" }, { delay: 75 })
+				] },
+				"xyflow.init": { actions: "updateXYFlow" },
+				"xyflow.applyNodeChanges": { actions: assign({ xynodes: ({ context, event }) => {
+					return applyNodeChanges(event.changes, context.xynodes);
+				} }) },
+				"xyflow.applyEdgeChanges": { actions: assign({ xyedges: ({ context, event }) => {
+					return applyEdgeChanges(event.changes, context.xyedges);
+				} }) },
+				"xyflow.paneDblClick": { actions: "xyflow:fitDiagram" },
+				"xyflow.edgeClick": { actions: "open relationship source" },
+				"navigate.to": { actions: assign({
+					subject: ({ event }) => inputToSubject(event.params),
+					viewId: ({ context, event }) => event.params.viewId ?? context.viewId
+				}) },
+				"close": { target: "closed" }
+			},
+			exit: assign({
+				xyedges: [],
+				xynodes: [],
+				initialized: {
+					xydata: false,
+					xyflow: false
+				},
+				xyflow: null,
+				xystore: null
+			})
+		},
+		"closed": { type: "final" }
+	},
+	on: {
+		"fitDiagram": { actions: {
+			type: "xyflow:fitDiagram",
+			params: prop("event")
+		} },
+		"xyflow.resized": { actions: [cancel("fitDiagram"), raise({ type: "fitDiagram" }, {
+			id: "fitDiagram",
+			delay: 200
+		})] },
+		"xyflow.updateNodeInternals": { actions: "xyflow:updateNodeInternals" }
+	}
+});
+const relationshipDetailsLogic = _relationshipDetailsLogic;
+
+//#endregion
+export { relationshipDetailsLogic };

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

@@ -0,0 +1,3 @@
+import { EdgeId } from "@likec4/core";
+import "@likec4/core/types";
+import { LikeC4ViewModel } from "@likec4/core/model";

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

@@ -0,0 +1,116 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { hasAtLeast } from "remeda";
+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
+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]));
+	return elements;
+};
+function computeEdgeDetailsViewData(edges, view) {
+	const sources = /* @__PURE__ */ new Set();
+	const relationships = /* @__PURE__ */ new Set();
+	const targets = /* @__PURE__ */ new Set();
+	const explicit = {
+		sources: /* @__PURE__ */ new Set(),
+		targets: /* @__PURE__ */ new Set()
+	};
+	const addExplicit = (el, type) => {
+		if (type === "source") {
+			sources.add(el);
+			explicit.sources.add(el);
+		} else {
+			targets.add(el);
+			explicit.targets.add(el);
+		}
+	};
+	for (const edgeId of edges) {
+		const edge = view.findEdge(edgeId);
+		const _relationships = edge ? [...edge.relationships("model")] : [];
+		if (!edge || !hasAtLeast(_relationships, 1) || !edge.source.hasElement() || !edge.target.hasElement()) continue;
+		const source = edge.source.element;
+		const target = edge.target.element;
+		addExplicit(source, "source");
+		addExplicit(target, "target");
+		for (const relationship of _relationships) {
+			relationships.add(relationship);
+			if (relationship.source !== source) {
+				addExplicit(relationship.source, "source");
+				for (const parent of relationship.source.ancestors()) {
+					if (parent === source) break;
+					sources.add(parent);
+				}
+			}
+			if (relationship.target !== target) {
+				addExplicit(relationship.target, "target");
+				for (const parent of relationship.target.ancestors()) {
+					if (parent === target) break;
+					targets.add(parent);
+				}
+			}
+		}
+	}
+	return {
+		sources: finalize(sources, explicit.sources),
+		targets: finalize(targets, explicit.targets),
+		relationships
+	};
+}
+function computeRelationshipDetailsViewData({ source, target }) {
+	const sources = /* @__PURE__ */ new Set();
+	const relationships = /* @__PURE__ */ new Set();
+	const targets = /* @__PURE__ */ new Set();
+	const explicit = {
+		sources: /* @__PURE__ */ new Set(),
+		targets: /* @__PURE__ */ new Set()
+	};
+	const addExplicit = (el, type) => {
+		if (type === "source") {
+			sources.add(el);
+			explicit.sources.add(el);
+		} else {
+			targets.add(el);
+			explicit.targets.add(el);
+		}
+	};
+	if (source) addExplicit(source, "source");
+	if (target) addExplicit(target, "target");
+	const [connection] = modelConnection.findConnection(source, target, "directed");
+	if (!connection) return {
+		sources,
+		targets,
+		relationships
+	};
+	for (const relationship of connection.relations) {
+		const relationSource = relationship.source;
+		const relationTarget = relationship.target;
+		addExplicit(relationSource, "source");
+		addExplicit(relationTarget, "target");
+		relationships.add(relationship);
+		if (source !== relationSource) {
+			invariant(isAncestor(source, relationSource), `${source.id} is not an ancestor of ${relationSource.id}`);
+			for (const parent of relationSource.ancestors()) {
+				if (parent === source) break;
+				sources.add(parent);
+			}
+		}
+		if (target !== relationTarget) {
+			invariant(isAncestor(target, relationTarget), `${target.id} is not an ancestor of ${relationTarget.id}`);
+			for (const parent of relationTarget.ancestors()) {
+				if (parent === target) break;
+				targets.add(parent);
+			}
+		}
+	}
+	return {
+		sources: finalize(sources, explicit.sources),
+		targets: finalize(targets, explicit.targets),
+		relationships
+	};
+}
+
+//#endregion
+export { computeEdgeDetailsViewData, computeRelationshipDetailsViewData };

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

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

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

@@ -0,0 +1,47 @@
+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 { jsx, jsxs } from "react/jsx-runtime";
+import { getBezierPath } from "@xyflow/system";
+
+//#region 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 diagram = useDiagram();
+	return /* @__PURE__ */ jsxs(EdgeContainer, {
+		...props,
+		children: [/* @__PURE__ */ jsx(EdgePath, {
+			edgeProps: 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) },
+			children: /* @__PURE__ */ jsx(EdgeLabel, {
+				edgeProps: props,
+				children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, {
+					...props,
+					onClick: (e) => {
+						e.stopPropagation();
+						diagram.navigateTo(navigateTo);
+					}
+				})
+			})
+		})]
+	});
+});
+
+//#endregion
+export { RelationshipEdge };

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

@@ -0,0 +1,101 @@
+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";
+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 { ElementTags as ElementTags$1 } from "../../../base-primitives/element/ElementTags.mjs";
+import { ElementActions } from "./ElementActions.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
+function ElementTags(props) {
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsx(ElementTags$1, {
+		onTagClick: useCallbackRef((tag) => {
+			diagram.openSearch(tag);
+		}),
+		...props
+	});
+}
+const ElementDetailsButtonWithHandler = (props) => {
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsx(ElementDetailsButton, {
+		...props,
+		onClick: (e) => {
+			e.stopPropagation();
+			diagram.openElementDetails(props.data.fqn);
+		}
+	});
+};
+function ElementNode(props) {
+	const { enableElementTags } = useEnabledFeatures();
+	return /* @__PURE__ */ jsxs(ElementNodeContainer, {
+		nodeProps: props,
+		children: [
+			/* @__PURE__ */ jsx(ElementShape, { ...props }),
+			/* @__PURE__ */ jsx(ElementData, { ...props }),
+			enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
+			/* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
+			/* @__PURE__ */ jsx(ElementActions, { ...props }),
+			/* @__PURE__ */ jsx(ElementPorts, { ...props })
+		]
+	});
+}
+function CompoundNode(props) {
+	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
+		nodeProps: props,
+		children: [
+			/* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
+			/* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+			/* @__PURE__ */ jsx(CompoundPorts, { ...props })
+		]
+	});
+}
+function ElementPorts({ data: { ports, height: h } }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [ports.in.map((id, i) => /* @__PURE__ */ jsx(Handle, {
+		id,
+		type: "target",
+		position: Position$1.Left,
+		style: {
+			visibility: "hidden",
+			top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
+		}
+	}, id)), ports.out.map((id, i) => /* @__PURE__ */ jsx(Handle, {
+		id,
+		type: "source",
+		position: Position$1.Right,
+		style: {
+			visibility: "hidden",
+			top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
+		}
+	}, id))] });
+}
+function CompoundPorts({ data }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [data.ports.in.map((id, i) => /* @__PURE__ */ jsx(Handle, {
+		id,
+		type: "target",
+		position: Position$1.Left,
+		style: {
+			visibility: "hidden",
+			top: `${20 * (i + 1)}px`
+		}
+	}, id)), data.ports.out.map((id, i) => /* @__PURE__ */ jsx(Handle, {
+		id,
+		type: "source",
+		position: Position$1.Right,
+		style: {
+			visibility: "hidden",
+			top: `${20 * (i + 1)}px`
+		}
+	}, id))] });
+}
+
+//#endregion
+export { CompoundNode, CompoundPorts, ElementNode, ElementPorts };

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

@@ -0,0 +1,54 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { useCallbackRef } from "../../hooks/useCallbackRef.mjs";
+import { createContext, useContext, useMemo } from "react";
+import { shallowEqual } from "fast-equals";
+import { nonNullable } from "@likec4/core";
+import { useSelector } from "@xstate/react";
+
+//#region src/overlays/relationship-details/hooks.ts
+const RelationshipDetailsActorContext = createContext(null);
+function useRelationshipDetailsActor() {
+	return nonNullable(useContext(RelationshipDetailsActorContext), "No RelationshipDetailsActorContext");
+}
+function useRelationshipDetailsState(selector, compare = shallowEqual) {
+	const select = useCallbackRef(selector);
+	const actor = useRelationshipDetailsActor();
+	return useSelector(actor, select, compare);
+}
+function useRelationshipDetails() {
+	const actor = useRelationshipDetailsActor();
+	return useMemo(() => ({
+		actor,
+		get rootElementId() {
+			return `relationship-details-${actor.sessionId.replaceAll(":", "_")}`;
+		},
+		getState: () => actor.getSnapshot().context,
+		send: actor.send,
+		navigateTo: (...params) => {
+			if (params.length === 1) actor.send({
+				type: "navigate.to",
+				params: { edgeId: params[0] }
+			});
+			else actor.send({
+				type: "navigate.to",
+				params: {
+					source: params[0],
+					target: params[1]
+				}
+			});
+		},
+		fitDiagram: () => {
+			actor.send({ type: "fitDiagram" });
+		},
+		close: () => {
+			if (actor._parent) actor._parent?.send({
+				type: "close",
+				actorId: actor.id
+			});
+			else actor.send({ type: "close" });
+		}
+	}), [actor]);
+}
+
+//#endregion
+export { RelationshipDetailsActorContext, useRelationshipDetails, useRelationshipDetailsActor, useRelationshipDetailsState };