@likec4/diagram 1.59.4 → 1.61.0

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

@@ -0,0 +1,150 @@
+import { __name } from "../../_virtual/_rolldown/runtime.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";
+
+// src/overlays/relationship-details/SelectEdge.tsx
+const SelectEdge = ({ edge, view }) => {
+	const browser = useRelationshipDetails();
+	const viewport = useRef(null);
+	const edgeSource$1 = view.nodes.find((n) => n.id === edge.source);
+	const edgeTarget$1 = view.nodes.find((n) => n.id === edge.target);
+	const edges = view.edges.flatMap((edge) => {
+		const source = view.nodes.find((n) => n.id === edge.source);
+		const target = view.nodes.find((n) => n.id === edge.target);
+		if (source && target) return {
+			id: edge.id,
+			source,
+			target,
+			label: edge.label
+		};
+		return [];
+	});
+	if (!edgeSource$1 || !edgeTarget$1 || edges.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Popover, {
+		position: "bottom-start",
+		shadow: "md",
+		keepMounted: true,
+		withinPortal: false,
+		closeOnClickOutside: true,
+		clickOutsideEvents: [
+			"pointerdown",
+			"mousedown",
+			"click"
+		],
+		onOpen: () => {
+			setTimeout(() => {
+				(viewport.current?.querySelector(`[data-edge-id="${edge.id}"]`))?.scrollIntoView({
+					behavior: "instant",
+					block: "nearest"
+				});
+			}, 100);
+		},
+		children: [/* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsxs(Button, {
+			size: "xs",
+			variant: "default",
+			fw: "500",
+			style: { padding: "0.25rem 0.75rem" },
+			rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 16 }),
+			children: [
+				/* @__PURE__ */ jsx(Box, {
+					className: edgeSource,
+					maw: 160,
+					p: 0,
+					mod: { "likec4-color": edgeSource$1.color },
+					children: /* @__PURE__ */ jsx(Text, {
+						component: "span",
+						truncate: true,
+						children: edgeSource$1.title
+					})
+				}),
+				/* @__PURE__ */ jsx(ThemeIcon, {
+					color: "dark",
+					variant: "transparent",
+					size: "xs",
+					children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: "80%" } })
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					className: edgeTarget,
+					maw: 160,
+					p: 0,
+					mod: { "likec4-color": edgeTarget$1.color },
+					children: /* @__PURE__ */ jsx(Text, {
+						component: "span",
+						truncate: true,
+						children: edgeTarget$1.title
+					})
+				})
+			]
+		}) }), /* @__PURE__ */ jsx(PopoverDropdown, {
+			p: 0,
+			miw: 250,
+			maw: 400,
+			children: /* @__PURE__ */ jsx(ScrollAreaAutosize, {
+				className: scrollArea,
+				scrollbars: "y",
+				type: "never",
+				viewportRef: viewport,
+				children: /* @__PURE__ */ jsx(Box, {
+					className: edgeGrid,
+					p: "xs",
+					maw: 400,
+					children: edges.map((e) => /* @__PURE__ */ jsxs("div", {
+						className: edgeRow,
+						"data-selected": e.id === edge.id,
+						onClick: (event) => {
+							event.stopPropagation();
+							browser.navigateTo(e.id);
+						},
+						children: [
+							/* @__PURE__ */ jsx(Box, {
+								className: edgeSource,
+								mod: {
+									"edge-id": e.id,
+									"likec4-color": e.source.color
+								},
+								children: /* @__PURE__ */ jsx(Text, {
+									component: "span",
+									truncate: true,
+									children: e.source.title
+								})
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								className: edgeArrow,
+								children: /* @__PURE__ */ jsx(ThemeIcon, {
+									color: "dark",
+									variant: "transparent",
+									size: "xs",
+									children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: "80%" } })
+								})
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								className: edgeTarget,
+								mod: { "likec4-color": e.target.color },
+								children: /* @__PURE__ */ jsx(Text, {
+									component: "span",
+									truncate: true,
+									children: e.target.title
+								})
+							}),
+							/* @__PURE__ */ jsx(Box, {
+								className: edgeLabel,
+								children: /* @__PURE__ */ jsx(Text, {
+									component: "span",
+									truncate: true,
+									children: e.label || "untitled"
+								})
+							})
+						]
+					}, e.id))
+				})
+			})
+		})]
+	});
+};
+
+export { SelectEdge };

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

@@ -0,0 +1,62 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseNode, BaseNodeData, BaseNodeProps, NonOptional } from "../../base/types.mjs";
+import { FunctionComponent } from "react";
+import { BBox, Color, DiagramNode, ExclusiveUnion, Fqn, IconUrl, MarkdownOrString, RelationId, RelationshipArrowType, RelationshipLineType, ViewId } from "@likec4/core/types";
+import { Simplify } from "type-fest";
+export declare namespace RelationshipDetailsTypes {
+  type Column = 'sources' | 'targets';
+  /**
+   * The node's incoming and outgoing ports
+   */
+  type Ports = {
+    in: string[];
+    out: string[];
+  };
+  type ElementNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'height' | 'navigateTo' | 'style' | 'tags'>> & {
+    column: Column;
+    fqn: Fqn;
+    icon: IconUrl;
+    ports: Ports;
+  }>;
+  type CompoundNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'style'>> & {
+    column: Column;
+    fqn: Fqn;
+    depth: number;
+    icon?: IconUrl;
+    ports: Ports;
+  }>;
+  type ElementNode = BaseNode<ElementNodeData, 'element'>;
+  type CompoundNode = BaseNode<CompoundNodeData, 'compound'>;
+  type AnyNode = ElementNode | CompoundNode;
+  type NodeType = AnyNode['type'];
+  type Node<T extends NodeType = NodeType> = Extract<AnyNode, {
+    type: T;
+  }>;
+  type NodeProps<T extends NodeType = NodeType> = BaseNodeProps<Node<T>>;
+  type NodeData = ExclusiveUnion<{
+    ElementNodeData: ElementNodeData;
+    CompoundNodeData: CompoundNodeData;
+  }>;
+  type NodeRenderer<T extends NodeType = NodeType> = FunctionComponent<NodeProps<T>>;
+  type NodeRenderers = {
+    element: NodeRenderer<'element'>;
+    compound: NodeRenderer<'compound'>;
+  };
+  type EdgeData = Simplify<BaseEdgeData & {
+    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;
+    head?: RelationshipArrowType;
+    tail?: RelationshipArrowType;
+    description: MarkdownOrString | null;
+  }>;
+  type Edge = BaseEdge<EdgeData, 'relationship'>;
+  type EdgeProps = BaseEdgeProps<Edge>;
+}

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

@@ -0,0 +1,107 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { RelationshipDetailsTypes } from "./_types.mjs";
+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";
+type XYFLowInstance = ReactFlowInstance<RelationshipDetailsTypes.AnyNode, RelationshipDetailsTypes.Edge>;
+type XYStoreState = ReactFlowState<RelationshipDetailsTypes.AnyNode, RelationshipDetailsTypes.Edge>;
+type XYStoreApi = {
+  getState: () => XYStoreState;
+};
+export type Input = ExclusiveUnion<{
+  Edge: {
+    edgeId: EdgeId;
+    viewId: ViewId;
+  };
+  Between: {
+    source: Fqn;
+    target: Fqn;
+    viewId: ViewId;
+  };
+}>;
+type Subject = {
+  edgeId: EdgeId;
+  source?: never;
+  target?: never;
+} | {
+  source: Fqn;
+  target: Fqn;
+  edgeId?: never;
+};
+export type Context = Readonly<{
+  subject: Subject;
+  viewId: ViewId;
+  xyflow: XYFLowInstance | null;
+  xystore: XYStoreApi | null;
+  initialized: {
+    xydata: boolean;
+    xyflow: boolean;
+  };
+  xynodes: RelationshipDetailsTypes.Node[];
+  xyedges: RelationshipDetailsTypes.Edge[];
+  bounds: BBox;
+}>;
+export type Events = {
+  type: 'xyflow.init';
+  instance: XYFLowInstance;
+  store: XYStoreApi;
+} | {
+  type: 'xyflow.nodeClick';
+  node: RelationshipDetailsTypes.Node;
+} | {
+  type: 'xyflow.edgeClick';
+  edge: RelationshipDetailsTypes.Edge;
+} | {
+  type: 'xyflow.edgeMouseEnter';
+  edge: RelationshipDetailsTypes.Edge;
+} | {
+  type: 'xyflow.edgeMouseLeave';
+  edge: RelationshipDetailsTypes.Edge;
+} | {
+  type: 'dim.nonhovered.edges';
+} | {
+  type: 'undim.edges';
+} | {
+  type: 'xyflow.selectionChange';
+  nodes: RelationshipDetailsTypes.Node[];
+  edges: RelationshipDetailsTypes.Edge[];
+} | {
+  type: 'xyflow.applyNodeChanges';
+  changes: NodeChange<RelationshipDetailsTypes.Node>[];
+} | {
+  type: 'xyflow.applyEdgeChanges';
+  changes: EdgeChange<RelationshipDetailsTypes.Edge>[];
+} | {
+  type: 'xyflow.paneClick';
+} | {
+  type: 'xyflow.paneDblClick';
+} | {
+  type: 'xyflow.resized';
+} | {
+  type: 'xyflow.updateNodeInternals';
+} | {
+  type: 'update.layoutData';
+  data: LayoutResult;
+} | {
+  type: 'fitDiagram';
+  duration?: number;
+  bounds?: BBox;
+} | {
+  type: 'navigate.to';
+  params: {
+    edgeId: EdgeId;
+    viewId?: ViewId;
+  } | {
+    source: Fqn;
+    target: Fqn;
+    viewId?: ViewId;
+  };
+} | {
+  type: 'close';
+};
+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> {}
+export type { Input as RelationshipDetailsInput };

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

@@ -0,0 +1,250 @@
+import { __name } from "../../_virtual/_rolldown/runtime.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";
+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";
+
+// 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;
+
+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,115 @@
+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";
+
+// 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
+	};
+}
+
+export { computeEdgeDetailsViewData, computeRelationshipDetailsViewData };