@likec4/diagram 1.59.4 → 1.60.0

package/dist/likec4diagram/custom/edges/RelationshipEdge.mjs

@@ -0,0 +1,446 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { useCallbackRef } from "../../../hooks/useCallbackRef.mjs";
+import { useUpdateEffect as useUpdateEffect$1 } from "../../../hooks/useUpdateEffect.mjs";
+import { useXYFlow, useXYStoreApi } from "../../../hooks/useXYFlow.mjs";
+import { isSamePoint, leafNodeRects } from "../../../utils/xyflow.mjs";
+import { useSetState } from "../../../hooks/useSetState.mjs";
+import { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
+import { useDiagram } from "../../../hooks/safeContext.mjs";
+import { useCurrentViewRouting } from "../../../hooks/useCurrentView.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 { edgeEndCenters } from "../../../utils/edge-endpoints.mjs";
+import { selectLabelRoutes } from "../../../hooks/useEdgeTracks.mjs";
+import { snapCorner } from "../../../utils/edge-corners.mjs";
+import { edgeLabelPosition } from "../../../utils/edge-label.mjs";
+import { EdgeDrifts } from "./EdgeDrifts.mjs";
+import { controlPoint, controlPointsContainer, labelDraggable } from "./edges.css.mjs";
+import { useControlPoints } from "./useControlPoints.mjs";
+import { useRelationshipEdgePath } from "./useRelationshipEdgePath.mjs";
+import { css, cx } from "@likec4/styles/css";
+import { useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useRafEffect } from "@react-hookz/web";
+import { EdgeLabelRenderer } from "@xyflow/react";
+import { isNumber } from "remeda";
+
+//#region src/likec4diagram/custom/edges/RelationshipEdge.tsx
+const RelationshipEdge = memoEdge((props) => {
+	const [isControlPointDragging, setIsControlPointDragging] = useState(false);
+	const isControlPointDraggingRef = useRef(isControlPointDragging);
+	isControlPointDraggingRef.current = isControlPointDragging;
+	const [isLabelDragging, setIsLabelDragging] = useState(false);
+	const isLabelDraggingRef = useRef(isLabelDragging);
+	isLabelDraggingRef.current = isLabelDragging;
+	const xyflow = useXYFlow();
+	const xyflowStore = useXYStoreApi();
+	const diagram = useDiagram();
+	const { enableNavigateTo, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+	const enabledEditing = !enableReadOnly;
+	const routing = useCurrentViewRouting();
+	const { id, selected = false, data: { labelBBox, labelXY, ...data } } = props;
+	const navigateTo = enableNavigateTo && !isControlPointDragging ? data.navigateTo : void 0;
+	const { controlPoints, setControlPoints, insertControlPoint } = useControlPoints(props, routing);
+	let edgePath = useRelationshipEdgePath({
+		props,
+		controlPoints,
+		isControlPointDragging,
+		routing
+	});
+	let labelX = labelBBox?.x ?? 0;
+	let labelY = labelBBox?.y ?? 0;
+	const [labelPos, setLabelPos] = useSetState({
+		x: labelXY?.x ?? labelX,
+		y: labelXY?.y ?? labelY
+	}, isSamePoint);
+	useUpdateEffect$1(() => {
+		if (isControlPointDraggingRef.current || isLabelDraggingRef.current) return;
+		setLabelPos({
+			x: labelX,
+			y: labelY
+		});
+	}, [labelX, labelY]);
+	const svgPathRef = useRef(null);
+	const labelTopLeftAt = (path) => {
+		const state = xyflowStore.getState();
+		const placeAutomatically = routing === "ortho" && !data.isLabelCustomized;
+		const others = placeAutomatically ? selectLabelRoutes(state).filter((route) => route.id !== id) : [];
+		const committedRoutes = placeAutomatically ? selectLabelRoutes({
+			...state,
+			edges: state.edges.map((edge) => edge.id === id && edge.type === "relationship" ? {
+				...edge,
+				data: {
+					...edge.data,
+					controlPoints
+				}
+			} : edge)
+		}) : [];
+		return edgeLabelPosition({
+			path,
+			segments: edgePath.segments,
+			routing,
+			size: {
+				width: labelBBox?.width ?? 0,
+				height: labelBBox?.height ?? 0
+			},
+			obstacles: [...leafNodeRects(state.nodeLookup.values()), ...others.flatMap((route) => route.labelBBox ? [route.labelBBox] : [])],
+			routes: [
+				...edgePath.segments,
+				...others.flatMap((route) => route.segments),
+				...committedRoutes.flatMap((route) => route.segments)
+			],
+			customized: data.isLabelCustomized ?? false
+		});
+	};
+	const labelOffsetRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const captureLabelOffset = useCallbackRef(() => {
+		const path = svgPathRef.current;
+		if (data.isLabelCustomized && path && labelBBox) {
+			const topLeft = labelTopLeftAt(path);
+			labelOffsetRef.current = {
+				x: labelBBox.x - topLeft.x,
+				y: labelBBox.y - topLeft.y
+			};
+		} else labelOffsetRef.current = {
+			x: 0,
+			y: 0
+		};
+	});
+	useRafEffect(() => {
+		const path = svgPathRef.current;
+		if (!path || !isControlPointDragging) return;
+		const topLeft = labelTopLeftAt(path);
+		const offset = labelOffsetRef.current;
+		setLabelPos({
+			x: topLeft.x + offset.x,
+			y: topLeft.y + offset.y
+		});
+	}, [
+		edgePath.d,
+		isControlPointDragging,
+		routing
+	]);
+	const updateEdgeData = useCallbackRef((controlPoints) => {
+		const topLeft = labelBBox && svgPathRef.current ? labelTopLeftAt(svgPathRef.current) : null;
+		if (topLeft) {
+			const offset = labelOffsetRef.current;
+			diagram.updateEdgeData(id, {
+				controlPoints,
+				labelBBox: {
+					...labelBBox,
+					x: topLeft.x + offset.x,
+					y: topLeft.y + offset.y
+				}
+			});
+		} else diagram.updateEdgeData(id, { controlPoints });
+		diagram.stopEditing(true);
+		setIsControlPointDragging(false);
+	});
+	const onControlPointerStartMove = useCallbackRef(() => {
+		captureLabelOffset();
+		diagram.startEditing("edge");
+		setIsControlPointDragging(true);
+	});
+	const onControlPointerCancelMove = useCallbackRef(() => {
+		diagram.stopEditing();
+		setIsControlPointDragging(false);
+	});
+	const onControlPointerFinishMove = useCallbackRef((points) => {
+		setControlPoints(points);
+		requestAnimationFrame(() => {
+			updateEdgeData(points);
+		});
+	});
+	const onControlPointerDelete = useCallbackRef((points) => {
+		captureLabelOffset();
+		diagram.startEditing("edge");
+		setIsControlPointDragging(true);
+		setControlPoints(points);
+		requestAnimationFrame(() => {
+			updateEdgeData(points);
+		});
+	});
+	/**
+	* Handle pointer down event on the edge to add new control points
+	*/
+	const onEdgePointerDown = useCallbackRef((e) => {
+		if (e.pointerType !== "mouse") return;
+		if (e.button !== 2 && !selected) return;
+		e.stopPropagation();
+		e.preventDefault();
+		diagram.startEditing("edge");
+		const newControlPoints = insertControlPoint(xyflow.screenToFlowPosition({
+			x: e.clientX,
+			y: e.clientY
+		}, { snapToGrid: false }));
+		diagram.updateEdgeData(id, { controlPoints: newControlPoints });
+		diagram.stopEditing(true);
+	});
+	const updateLabelPosition = useCallbackRef((pos) => {
+		if (labelBBox) diagram.updateEdgeData(id, {
+			labelBBox: {
+				...labelBBox,
+				x: pos.x,
+				y: pos.y
+			},
+			isLabelCustomized: true
+		});
+		diagram.stopEditing(true);
+		setIsLabelDragging(false);
+	});
+	/**
+	* Handle pointer down on the edge label to drag it to a custom position.
+	* Mirrors the control-point LMB drag.
+	*/
+	const onLabelPointerDown = useCallbackRef((e) => {
+		if (e.pointerType !== "mouse" || e.button !== 0 || !labelBBox || isControlPointDraggingRef.current) return;
+		const { domNode, edges, addSelectedEdges, unselectNodesAndEdges } = xyflowStore.getState();
+		if (!domNode) return;
+		e.stopPropagation();
+		if (!selected) {
+			unselectNodesAndEdges({ edges: edges.filter((ed) => ed.selected && ed.id !== id) });
+			addSelectedEdges([id]);
+		}
+		let hasMoved = false;
+		const initialPoint = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		const clientPoint = { ...initialPoint };
+		const flowStart = xyflow.screenToFlowPosition(initialPoint, { snapToGrid: false });
+		const grab = {
+			x: flowStart.x - labelBBox.x,
+			y: flowStart.y - labelBBox.y
+		};
+		let pos = {
+			x: labelBBox.x,
+			y: labelBBox.y
+		};
+		let animationFrameId = null;
+		const onPointerMove = (ev) => {
+			clientPoint.x = ev.clientX;
+			clientPoint.y = ev.clientY;
+			if (!isSamePoint(initialPoint, clientPoint)) {
+				if (!hasMoved) {
+					hasMoved = true;
+					diagram.startEditing("edge");
+					setIsLabelDragging(true);
+				}
+				animationFrameId ??= requestAnimationFrame(() => {
+					animationFrameId = null;
+					const { x, y } = xyflow.screenToFlowPosition(clientPoint, { snapToGrid: false });
+					pos = {
+						x: Math.round(x - grab.x),
+						y: Math.round(y - grab.y)
+					};
+					setLabelPos(pos);
+				});
+			}
+			ev.stopPropagation();
+		};
+		const onPointerUp = (ev) => {
+			ev.stopPropagation();
+			domNode.removeEventListener("pointermove", onPointerMove, { capture: true });
+			if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
+			if (hasMoved) {
+				domNode.addEventListener("click", stopAndPrevent, {
+					capture: true,
+					once: true
+				});
+				updateLabelPosition(pos);
+			}
+		};
+		domNode.addEventListener("pointermove", onPointerMove, { capture: true });
+		domNode.addEventListener("pointerup", onPointerUp, {
+			once: true,
+			capture: true
+		});
+	});
+	if (isControlPointDragging && !props.data.hovered) props = {
+		...props,
+		data: {
+			...props.data,
+			hovered: true
+		}
+	};
+	const sequenceStepData = isNumber(props.data.stepnum) ? {
+		isSequenceStep: true,
+		stepNum: props.data.stepnum
+	} : void 0;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(EdgeContainer, {
+		...props,
+		className: css({ "& .react-flow__edge-interaction": { cursor: enabledEditing && selected ? "[copy]" : "inherit" } }),
+		children: [
+			/* @__PURE__ */ jsx(EdgePath, {
+				edgeProps: props,
+				svgPath: edgePath.d,
+				ref: svgPathRef,
+				isDragging: isControlPointDragging,
+				...enabledEditing && { onEdgePointerDown }
+			}),
+			enableCompareWithLatest && /* @__PURE__ */ jsx(EdgeDrifts, {
+				edgeProps: props,
+				svgPath: edgePath.d
+			}),
+			labelBBox && /* @__PURE__ */ jsx(EdgeLabelContainer, {
+				edgeProps: props,
+				labelPosition: isControlPointDragging || isLabelDragging ? labelPos : {
+					x: labelX,
+					y: labelY
+				},
+				...enabledEditing && { onPointerDown: onLabelPointerDown },
+				children: /* @__PURE__ */ jsx(EdgeLabel, {
+					pointerEvents: "all",
+					className: enabledEditing ? labelDraggable : void 0,
+					...sequenceStepData,
+					edgeProps: props,
+					children: navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, {
+						ariaLabel: "Navigate to view",
+						onClick: (e) => {
+							e.stopPropagation();
+							diagram.navigateTo(navigateTo);
+						}
+					})
+				})
+			})
+		]
+	}), enabledEditing && controlPoints.length > 0 && /* @__PURE__ */ jsx(ControlPoints, {
+		isControlPointDragging,
+		edgeProps: props,
+		controlPoints,
+		onMove: setControlPoints,
+		routing,
+		onStartMove: onControlPointerStartMove,
+		onCancelMove: onControlPointerCancelMove,
+		onFinishMove: onControlPointerFinishMove,
+		onDelete: onControlPointerDelete
+	})] });
+});
+RelationshipEdge.displayName = "RelationshipEdge";
+function ControlPoints({ isControlPointDragging, edgeProps, routing, controlPoints, onMove, onStartMove, onCancelMove, onFinishMove, onDelete }) {
+	const xyflowStore = useXYStoreApi();
+	const xyflow = useXYFlow();
+	const edgeId = edgeProps.data.id;
+	const controlPointsRef = useRef(controlPoints);
+	controlPointsRef.current = controlPoints;
+	const onLmbControlPointerDown = (index, e, domNode) => {
+		let hasMoved = false;
+		let initialPoint = {
+			x: e.clientX,
+			y: e.clientY
+		};
+		let clientPoint = { ...initialPoint };
+		let animationFrameId = null;
+		let cp = [...controlPointsRef.current];
+		const onPointerMove = (e) => {
+			clientPoint.x = e.clientX;
+			clientPoint.y = e.clientY;
+			if (!isSamePoint(initialPoint, clientPoint)) {
+				if (!hasMoved) {
+					hasMoved = true;
+					onStartMove();
+				}
+				animationFrameId ??= requestAnimationFrame(() => {
+					animationFrameId = null;
+					const { x, y } = xyflow.screenToFlowPosition(clientPoint, { snapToGrid: false });
+					cp = [...cp];
+					cp[index] = snapCorner({
+						index,
+						point: {
+							x: Math.trunc(x),
+							y: Math.trunc(y)
+						},
+						controlPoints: cp,
+						...edgeEndCenters(xyflowStore.getState().nodeLookup, edgeProps),
+						dir: edgeProps.data.dir,
+						routing
+					});
+					onMove(cp);
+				});
+			}
+			e.stopPropagation();
+		};
+		const onPointerUp = (e) => {
+			e.stopPropagation();
+			domNode.removeEventListener("pointermove", onPointerMove, { capture: true });
+			domNode.removeEventListener("click", stopAndPrevent, { capture: true });
+			if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
+			if (hasMoved) onFinishMove(cp);
+			else onCancelMove();
+		};
+		domNode.addEventListener("pointermove", onPointerMove, { capture: true });
+		domNode.addEventListener("pointerup", onPointerUp, {
+			once: true,
+			capture: true
+		});
+		domNode.addEventListener("click", stopAndPrevent, {
+			capture: true,
+			once: true
+		});
+	};
+	const onRmbControlPointerDown = (index, e) => {
+		const newControlPoints = [...controlPointsRef.current];
+		if (newControlPoints.length <= 1 || index >= newControlPoints.length) return;
+		stopAndPrevent(e);
+		newControlPoints.splice(index, 1);
+		setTimeout(() => {
+			onDelete(newControlPoints);
+		}, 10);
+	};
+	const onControlPointerDown = useCallbackRef((e) => {
+		const { domNode, addSelectedEdges, edges, unselectNodesAndEdges } = xyflowStore.getState();
+		if (!domNode || e.pointerType !== "mouse") return;
+		const index = parseFloat(e.currentTarget.getAttribute("data-control-point-index") || "");
+		if (isNaN(index)) throw new Error("data-control-point-index is not a number");
+		switch (e.button) {
+			case 0:
+				e.stopPropagation();
+				unselectNodesAndEdges({ edges: edges.filter((ed) => ed.selected && ed.id !== edgeId) });
+				addSelectedEdges([edgeId]);
+				onLmbControlPointerDown(index, e, domNode);
+				break;
+			case 2: onRmbControlPointerDown(index, e);
+		}
+	});
+	const onControlPointerDblClick = useCallbackRef((e) => {
+		if (e.pointerType !== "mouse") return;
+		const index = parseFloat(e.currentTarget.getAttribute("data-control-point-index") || "");
+		if (isNaN(index)) {
+			console.error(e.currentTarget);
+			throw new Error("data-control-point-index is not a number");
+		}
+		onRmbControlPointerDown(index, e);
+	});
+	return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(EdgeContainer, {
+		component: "svg",
+		className: controlPointsContainer,
+		...edgeProps,
+		children: /* @__PURE__ */ jsx("g", {
+			"data-active": isControlPointDragging ? true : void 0,
+			className: "group",
+			onContextMenu: stopAndPrevent,
+			children: controlPoints.map((p, i) => /* @__PURE__ */ jsx("circle", {
+				"data-control-point-index": i,
+				onPointerDownCapture: onControlPointerDown,
+				onDoubleClick: onControlPointerDblClick,
+				className: cx("nodrag nopan", controlPoint),
+				cx: p.x,
+				cy: p.y
+			}, "controlPoints" + edgeId + "#" + i))
+		})
+	}) });
+}
+const stopAndPrevent = (e) => {
+	e.stopPropagation();
+	e.preventDefault();
+};
+
+//#endregion
+export { RelationshipEdge };

package/dist/likec4diagram/custom/edges/SequenceStepEdge.mjs

@@ -0,0 +1,81 @@
+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 { EdgeDrifts } from "./EdgeDrifts.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getSmoothStepPath } from "@xyflow/system";
+
+//#region src/likec4diagram/custom/edges/SequenceStepEdge.tsx
+const LABEL_OFFSET = 16;
+function SequenceStepEdge(props) {
+	const { enableNavigateTo, enableCompareWithLatest } = useEnabledFeatures();
+	const diagram = useDiagram();
+	const { navigateTo } = props.data;
+	const isSelfLoop = props.source === props.target;
+	const isBack = props.sourceX > props.targetX;
+	const [path] = getSmoothStepPath({
+		sourceX: props.sourceX,
+		sourceY: props.sourceY,
+		sourcePosition: props.sourcePosition,
+		targetX: props.targetX,
+		targetY: props.targetY,
+		targetPosition: props.targetPosition,
+		...isSelfLoop && {
+			offset: 30,
+			borderRadius: 16
+		}
+	});
+	let labelX = props.sourceX;
+	switch (true) {
+		case isSelfLoop:
+			labelX = props.sourceX + 24 + LABEL_OFFSET;
+			break;
+		case isBack:
+			labelX = props.sourceX - LABEL_OFFSET;
+			break;
+		default: labelX = props.sourceX + LABEL_OFFSET;
+	}
+	const { state, stepnum } = props.data;
+	return /* @__PURE__ */ jsxs(EdgeContainer, {
+		...props,
+		...state && { "data-seq-edge-state": state },
+		children: [
+			/* @__PURE__ */ jsx(EdgePath, {
+				edgeProps: props,
+				svgPath: path
+			}),
+			enableCompareWithLatest && /* @__PURE__ */ jsx(EdgeDrifts, {
+				edgeProps: props,
+				svgPath: path
+			}),
+			/* @__PURE__ */ jsx(EdgeLabelContainer, {
+				edgeProps: props,
+				labelPosition: {
+					x: labelX,
+					y: props.sourceY + (!isSelfLoop ? LABEL_OFFSET : 0),
+					translate: isBack ? "translate(-100%, 0)" : void 0
+				},
+				children: /* @__PURE__ */ jsx(EdgeLabel, {
+					edgeProps: props,
+					isSequenceStep: true,
+					stepNum: stepnum,
+					children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(EdgeActionButton, {
+						ariaLabel: "Navigate to view",
+						onClick: (e) => {
+							e.stopPropagation();
+							diagram.navigateTo(navigateTo);
+						}
+					})
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { SequenceStepEdge };

package/dist/likec4diagram/custom/edges/edges.css.mjs

@@ -0,0 +1,50 @@
+import { css } from "@likec4/styles/css";
+
+//#region src/likec4diagram/custom/edges/edges.css.ts
+const controlPointsContainer = css({
+	overflow: "visible",
+	position: "absolute",
+	pointerEvents: "none",
+	top: "0",
+	left: "0",
+	mixBlendMode: {
+		_dark: "screen",
+		_light: "multiply"
+	},
+	zIndex: "[100]"
+});
+const labelDraggable = css({
+	cursor: "grab!",
+	_active: { cursor: "grabbing!" }
+});
+const controlPoint = css({
+	fill: `[var(--xy-edge-stroke)]`,
+	stroke: `transparent`,
+	fillOpacity: "0.5",
+	strokeWidth: "[10]",
+	r: "[4]",
+	cursor: "grab",
+	pointerEvents: "all",
+	visibility: "hidden",
+	transitionDuration: "fast",
+	transitionProperty: "[visibility, fill, fill-opacity, r]",
+	transitionTimingFunction: "inOut",
+	transitionDelay: "[20ms]",
+	[`:where([data-likec4-selected='true'], [data-likec4-hovered='true']) &`]: {
+		visibility: "visible",
+		fillOpacity: "1",
+		transitionTimingFunction: "out",
+		transitionDelay: "0"
+	},
+	[`:where([data-likec4-selected='true']) &`]: { r: "[6]" },
+	[`:is([data-likec4-hovered='true']) &`]: { r: "[8]" },
+	_hover: {
+		fill: "primary.body.hover",
+		r: "[10]",
+		transitionDuration: "fastest"
+	},
+	_groupActive: { cursor: "grabbing" }
+});
+
+//#endregion
+export { controlPoint, controlPointsContainer, labelDraggable };

package/dist/likec4diagram/custom/edges/useControlPoints.mjs

@@ -0,0 +1,41 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { useCallbackRef } from "../../../hooks/useCallbackRef.mjs";
+import { useUpdateEffect } from "../../../hooks/useUpdateEffect.mjs";
+import { useXYStoreApi } from "../../../hooks/useXYFlow.mjs";
+import { edgeEndCenters } from "../../../utils/edge-endpoints.mjs";
+import { initialControlPoints, insertCorner } from "../../../utils/edge-corners.mjs";
+import { useState } from "react";
+import { deepEqual } from "fast-equals";
+
+//#region src/likec4diagram/custom/edges/useControlPoints.ts
+function useControlPoints(props, routing) {
+	const { data } = props;
+	const xyflowStore = useXYStoreApi();
+	const [controlPoints, setControlPoints] = useState(() => data.controlPoints ?? initialControlPoints(data.points, routing));
+	useUpdateEffect(() => {
+		const next = data.controlPoints ?? initialControlPoints(data.points, routing);
+		setControlPoints((prev) => deepEqual(prev, next) ? prev : next);
+	}, [
+		data.points,
+		data.controlPoints ?? [],
+		routing
+	]);
+	return {
+		controlPoints,
+		setControlPoints,
+		insertControlPoint: useCallbackRef((point) => {
+			const newControlPoints = insertCorner({
+				point,
+				controlPoints,
+				...edgeEndCenters(xyflowStore.getState().nodeLookup, props),
+				dir: data.dir,
+				routing
+			});
+			setControlPoints(newControlPoints);
+			return newControlPoints;
+		})
+	};
+}
+
+//#endregion
+export { useControlPoints };

package/dist/likec4diagram/custom/edges/useRelationshipEdgePath.mjs

@@ -0,0 +1,41 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { useXYStore } from "../../../hooks/useXYFlow.mjs";
+import { edgeEndFromNode } from "../../../utils/edge-endpoints.mjs";
+import { layoutedEdgePath } from "../../../utils/edge-path.mjs";
+import { trackedEdgePath } from "../../../utils/edge-tracks.mjs";
+import { useTrackRoutes } from "../../../hooks/useEdgeTracks.mjs";
+import { useCallback } from "react";
+import { deepEqual } from "fast-equals";
+import { isTruthy } from "remeda";
+import { nonNullable } from "@likec4/core/utils";
+
+//#region src/likec4diagram/custom/edges/useRelationshipEdgePath.ts
+/**
+* @returns The SVG path data and, for orthogonal routing, straight segments for label placement.
+*/
+function useRelationshipEdgePath({ props: { id, source, target, data }, controlPoints, isControlPointDragging, routing }) {
+	const endpoints = useXYStore(useCallback(({ nodeLookup }) => ({
+		source: nonNullable(edgeEndFromNode(nodeLookup.get(source), "source"), `source node ${source} not found`),
+		target: nonNullable(edgeEndFromNode(nodeLookup.get(target), "target"), `target node ${target} not found`)
+	}), [source, target]), deepEqual);
+	const isModified = isTruthy(data.controlPoints) || isControlPointDragging;
+	const trackRoutes = useTrackRoutes(routing, isModified);
+	const edge = {
+		...endpoints,
+		dir: data.dir,
+		routing
+	};
+	if (!isModified) return layoutedEdgePath({
+		...edge,
+		points: data.points
+	});
+	return trackedEdgePath({
+		...edge,
+		id,
+		controlPoints,
+		others: trackRoutes.values()
+	});
+}
+
+//#endregion
+export { useRelationshipEdgePath };

package/dist/likec4diagram/custom/index.mjs

@@ -0,0 +1,26 @@
+import { GraphElementNode } from "./nodes/GraphElementNode.mjs";
+import { CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode, ViewGroupNode } from "./nodes/nodes.mjs";
+import { SequenceActorNode, SequenceParallelArea } from "./nodes/SequenceActorNode.mjs";
+import { SequenceSubflowArea } from "./nodes/SequenceSubFlow.mjs";
+import { RelationshipEdge } from "./edges/RelationshipEdge.mjs";
+import { SequenceStepEdge } from "./edges/SequenceStepEdge.mjs";
+
+//#region src/likec4diagram/custom/index.tsx
+const BuiltinNodes = {
+	ElementNode,
+	DeploymentNode,
+	CompoundElementNode,
+	CompoundDeploymentNode,
+	ViewGroupNode,
+	SequenceActorNode,
+	SequenceParallelArea,
+	SequenceSubflowArea,
+	GraphElementNode
+};
+const BuiltinEdges = {
+	RelationshipEdge,
+	SequenceStepEdge
+};
+
+//#endregion
+export { BuiltinEdges, BuiltinNodes };

package/dist/likec4diagram/custom/nodes/CompoundActions.d.mts

@@ -0,0 +1,6 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { Types } from "../../types.mjs";
+//#region src/likec4diagram/custom/nodes/CompoundActions.d.ts
+type CompoundActionsProps = Types.NodeProps<'compound-deployment' | 'compound-element'>;
+export declare const CompoundActions: (props: CompoundActionsProps) => import("react").JSX.Element | null;
+//#endregion