@ngroznykh/papirus 0.6.4 → 0.7.0

package/dist/papirus.js

@@ -1047,19 +1047,21 @@ var DragManager = class extends EventEmitter {
 		const nodeBindings = /* @__PURE__ */ new Map();
 		for (const edge of this.renderer.edges.values()) {
 			if (!edge.hasEditableControlPoints()) continue;
-			const isFromDragged = draggedIds.has(edge.from.nodeId);
-			const isToDragged = draggedIds.has(edge.to.nodeId);
+			const fromId = edge.from.nodeId;
+			const toId = edge.to.nodeId;
+			const isFromDragged = !!fromId && draggedIds.has(fromId);
+			const isToDragged = !!toId && draggedIds.has(toId);
 			if (isFromDragged && isToDragged) {
 				this.editablePolylineFullyConnectedEdges.add(edge.id);
 				this.initialControlPointsForFullyConnected.set(edge.id, clonePoints(edge.controlPoints));
 				continue;
 			}
 			for (const node of this.draggedNodes) {
-				const isFrom = edge.from.nodeId === node.id;
-				const isTo = edge.to.nodeId === node.id;
+				const isFrom = fromId === node.id;
+				const isTo = toId === node.id;
 				if (!isFrom && !isTo) continue;
-				const oppositeNodeId = isFrom ? edge.to.nodeId : edge.from.nodeId;
-				if (draggedIds.has(oppositeNodeId)) continue;
+				const oppositeNodeId = isFrom ? toId : fromId;
+				if (!oppositeNodeId || draggedIds.has(oppositeNodeId)) continue;
 				const controlPointIndex = isFrom ? 0 : edge.controlPoints.length - 1;
 				const nearestPoint = edge.controlPoints[controlPointIndex];
 				const endpoint = isFrom ? edge.startPoint : edge.endPoint;
@@ -1668,6 +1670,51 @@ var NavigationManager = class extends EventEmitter {
 	}
 };
 //#endregion
+//#region src/utils/direction.ts
+/**
+* Map outline param [0,1) to cardinal direction (top → right → bottom → left).
+*/
+function getDirectionFromOutlineParam(param) {
+	const p = (param % 1 + 1) % 1;
+	if (p < .25) return "top";
+	if (p < .5) return "right";
+	if (p < .75) return "bottom";
+	return "left";
+}
+function isHorizontal(dir) {
+	return dir === "left" || dir === "right";
+}
+function isVertical(dir) {
+	return dir === "top" || dir === "bottom";
+}
+function isOppositeDirections(fromDir, toDir) {
+	return fromDir === "left" && toDir === "right" || fromDir === "right" && toDir === "left" || fromDir === "top" && toDir === "bottom" || fromDir === "bottom" && toDir === "top";
+}
+function directionToVector(dir) {
+	switch (dir) {
+		case "top": return {
+			x: 0,
+			y: -1
+		};
+		case "bottom": return {
+			x: 0,
+			y: 1
+		};
+		case "left": return {
+			x: -1,
+			y: 0
+		};
+		case "right": return {
+			x: 1,
+			y: 0
+		};
+		default: return {
+			x: 0,
+			y: 0
+		};
+	}
+}
+//#endregion
 //#region src/core/ConnectionManager.ts
 /**
 * Manages port-to-port connection creation
@@ -1689,6 +1736,8 @@ var ConnectionManager = class extends EventEmitter {
 		this.sourceOutlineParam = null;
 		this.previewTargetOutlineParam = null;
 		this.previewTargetNodeId = null;
+		this.previewTargetEdgeId = null;
+		this.previewTargetPathParam = null;
 		this.isReconnecting = false;
 		this.reconnectingEdge = null;
 		this.reconnectingEndpoint = null;
@@ -1867,8 +1916,8 @@ var ConnectionManager = class extends EventEmitter {
 	updateReconnectingEdge(point) {
 		if (!this.reconnectingEdge) return;
 		const edge = this.reconnectingEdge;
-		const fromNode = this.renderer.getNode(edge.from.nodeId);
-		const toNode = this.renderer.getNode(edge.to.nodeId);
+		const fromNode = edge.from.nodeId ? this.renderer.getNode(edge.from.nodeId) : void 0;
+		const toNode = edge.to.nodeId ? this.renderer.getNode(edge.to.nodeId) : void 0;
 		let snappedPoint = point;
 		let snappedDir;
 		let targetNode = this.getNodeAtPoint(point, true);
@@ -1897,14 +1946,14 @@ var ConnectionManager = class extends EventEmitter {
 				snappedPoint = bestResult.point;
 				this.reconnectingOutlineParam = bestResult.param;
 				this.reconnectingTargetNodeId = bestResult.node.id;
-				snappedDir = this.getDirectionFromOutlineParam(bestResult.param, bestResult.node);
+				snappedDir = getDirectionFromOutlineParam(bestResult.param);
 				if (this.reconnectingEndpoint === "start" ? toNode : fromNode) {
 					const alignRef = edge.isEditablePolyline() ? this.getNearestBendPointForAxisAlignment(edge, this.reconnectingEndpoint) : this.reconnectingEndpoint === "start" ? this.getTargetPointForReconnect(edge, toNode, "to", snappedPoint) : this.getTargetPointForReconnect(edge, fromNode, "from", snappedPoint);
 					snappedPoint = this.applyAxisAlignmentToPoint(snappedPoint, alignRef);
 					const reprojected = targetNode.getClosestPointOnOutline(snappedPoint);
 					snappedPoint = reprojected.point;
 					this.reconnectingOutlineParam = reprojected.param;
-					snappedDir = this.getDirectionFromOutlineParam(reprojected.param, targetNode);
+					snappedDir = getDirectionFromOutlineParam(reprojected.param);
 				}
 			} else {
 				this.reconnectingOutlineParam = null;
@@ -1926,12 +1975,12 @@ var ConnectionManager = class extends EventEmitter {
 		if (this.reconnectingEndpoint === "start") {
 			if (toNode) {
 				const target = this.getTargetPointForReconnect(edge, toNode, "to", snappedPoint);
-				const toDir = this.getTargetDirForReconnect(edge, toNode, "to");
+				const toDir = this.getTargetDirForReconnect(edge, "to");
 				edge.updateEndpoints(snappedPoint, target, snappedDir, toDir);
 			}
 		} else if (fromNode) {
 			const start = this.getTargetPointForReconnect(edge, fromNode, "from", snappedPoint);
-			const fromDir = this.getTargetDirForReconnect(edge, fromNode, "from");
+			const fromDir = this.getTargetDirForReconnect(edge, "from");
 			edge.updateEndpoints(start, snappedPoint, fromDir, snappedDir);
 		}
 		this.renderer.markDirty();
@@ -1943,18 +1992,11 @@ var ConnectionManager = class extends EventEmitter {
 		if (anchorId) return node.getAnchorPointById(anchorId) ?? node.getConnectionPoint(fallbackPoint);
 		return node.getConnectionPoint(fallbackPoint);
 	}
-	getTargetDirForReconnect(edge, node, endpoint) {
+	getTargetDirForReconnect(edge, endpoint) {
 		const ep = endpoint === "from" ? edge.from : edge.to;
-		if (this.attachToOutline && ep.outlineParam !== void 0) return this.getDirectionFromOutlineParam(ep.outlineParam, node);
+		if (this.attachToOutline && ep.outlineParam !== void 0) return getDirectionFromOutlineParam(ep.outlineParam);
 		return (ep.portId?.replace(ANCHOR_PORT_PREFIX, ""))?.split(":")[0];
 	}
-	getDirectionFromOutlineParam(param, _node) {
-		const p = (param % 1 + 1) % 1;
-		if (p < .25) return "top";
-		if (p < .5) return "right";
-		if (p < .75) return "bottom";
-		return "left";
-	}
 	/**
 	* For editable polyline: return the nearest bend point for axis alignment.
 	* When reconnecting 'end', use last control point (or start). When reconnecting 'start', use first control point (or end).
@@ -2018,6 +2060,8 @@ var ConnectionManager = class extends EventEmitter {
 		this.previewTargetAnchorId = null;
 		this.previewTargetOutlineParam = null;
 		this.previewTargetNodeId = null;
+		this.previewTargetEdgeId = null;
+		this.previewTargetPathParam = null;
 		let targetNode = this.getNodeAtPoint(cursorPoint, false);
 		if (this.attachToOutline) {
 			const tolerance = 40 / Math.max(this.renderer.zoom, 1e-4);
@@ -2061,6 +2105,24 @@ var ConnectionManager = class extends EventEmitter {
 				}
 			}
 		}
+		const edgeDrop = this.findEdgeDropTarget(cursorPoint);
+		if (edgeDrop) {
+			let nodeDistance = Infinity;
+			if (targetNode) {
+				const dx = cursorPoint.x - snappedPoint.x;
+				const dy = cursorPoint.y - snappedPoint.y;
+				nodeDistance = Math.sqrt(dx * dx + dy * dy);
+			}
+			if (!targetNode || edgeDrop.distance < nodeDistance) {
+				targetNode = null;
+				this.previewTargetNodeId = null;
+				this.previewTargetOutlineParam = null;
+				this.previewTargetAnchorId = null;
+				snappedPoint = edgeDrop.point;
+				this.previewTargetEdgeId = edgeDrop.edge.id;
+				this.previewTargetPathParam = edgeDrop.pathParam;
+			}
+		}
 		if (targetNode) {
 			const forbidden = this._connectionValidator && this.sourceNode && !this._connectionValidator(this.sourceNode.id, targetNode.id);
 			this.setCursor(forbidden ? "not-allowed" : "crosshair");
@@ -2161,9 +2223,29 @@ var ConnectionManager = class extends EventEmitter {
 			y: event.worldY
 		};
 		let createdEdge = null;
+		const edgeDrop = this.previewTargetEdgeId != null && this.previewTargetPathParam != null ? {
+			edgeId: this.previewTargetEdgeId,
+			pathParam: this.previewTargetPathParam,
+			point
+		} : this.findEdgeDropTarget(point);
 		let targetNode = this.getNodeAtPoint(point, false);
 		if (!targetNode && this.attachToOutline && this.previewTargetNodeId) targetNode = this.renderer.getNode(this.previewTargetNodeId) ?? null;
-		if (targetNode) {
+		if (edgeDrop && this.sourceNode && (!targetNode || this.previewTargetEdgeId != null)) {
+			const from = this.attachToOutline ? {
+				nodeId: this.sourceNode.id,
+				outlineParam: this.sourceOutlineParam ?? void 0
+			} : {
+				nodeId: this.sourceNode.id,
+				portId: this.sourceAnchorId ? `${ANCHOR_PORT_PREFIX}${this.sourceAnchorId}` : void 0
+			};
+			const to = {
+				edgeId: edgeDrop.edgeId,
+				pathParam: edgeDrop.pathParam
+			};
+			createdEdge = this.createEdge(from, to);
+			this.addEdge(createdEdge);
+			this.emit("connect", createdEdge);
+		} else if (targetNode) {
 			if (!this._connectionValidator || this._connectionValidator(this.sourceNode.id, targetNode.id)) {
 				let from;
 				let to;
@@ -2227,8 +2309,8 @@ var ConnectionManager = class extends EventEmitter {
 			ctx.lineTo(end.x, end.y);
 			ctx.stroke();
 		} else {
-			const fromDir = this.sourceOutlineParam !== null ? this.getDirectionFromOutlineParam(this.sourceOutlineParam, this.sourceNode) : this.sourceAnchorId?.split(":")[0];
-			const toDir = this.previewTargetOutlineParam !== null ? this.getDirectionFromOutlineParam(this.previewTargetOutlineParam, this.sourceNode) : this.previewTargetAnchorId?.split(":")[0];
+			const fromDir = this.sourceOutlineParam !== null ? getDirectionFromOutlineParam(this.sourceOutlineParam) : this.sourceAnchorId?.split(":")[0];
+			const toDir = this.previewTargetOutlineParam !== null ? getDirectionFromOutlineParam(this.previewTargetOutlineParam) : this.previewTargetAnchorId?.split(":")[0];
 			this.drawBezierPreview(ctx, start, end, fromDir, toDir);
 		}
 		ctx.setLineDash([]);
@@ -2300,8 +2382,36 @@ var ConnectionManager = class extends EventEmitter {
 		this.sourceOutlineParam = null;
 		this.previewTargetOutlineParam = null;
 		this.previewTargetNodeId = null;
+		this.previewTargetEdgeId = null;
+		this.previewTargetPathParam = null;
 		this.setCursor("");
 	}
+	/**
+	* Find the nearest edge under the cursor for junction / note→relation drops.
+	*/
+	findEdgeDropTarget(point) {
+		const tolerance = Math.max(14, 20 / Math.max(this.renderer.zoom, 1e-4));
+		let best = null;
+		for (const edge of this.renderer.edges.values()) {
+			if (!edge.visible || edge.path.length < 2) continue;
+			const closest = edge.getClosestPointOnPath(point);
+			if (!closest || closest.distance > tolerance) continue;
+			if (!best || closest.distance < best.distance) best = {
+				edge,
+				pathParam: closest.pathParam,
+				point: closest.point,
+				distance: closest.distance
+			};
+		}
+		if (!best) return null;
+		return {
+			edge: best.edge,
+			edgeId: best.edge.id,
+			pathParam: best.pathParam,
+			point: best.point,
+			distance: best.distance
+		};
+	}
 	resetReconnection() {
 		this.isReconnecting = false;
 		if (this.reconnectingEdge) this.reconnectingEdge.autoUpdateEndpoints = true;
@@ -2577,6 +2687,25 @@ var ConnectionManager = class extends EventEmitter {
 	}
 };
 //#endregion
+//#region src/utils/keymap.ts
+var DEFAULT_HISTORY_SHORTCUT_KEYS = {
+	undoKey: "z",
+	redoKey: "y"
+};
+/**
+* Resolves a letter key independently of the active keyboard layout.
+*/
+function getShortcutKey(event) {
+	return event.code.startsWith("Key") ? event.code.slice(3).toLowerCase() : event.key.toLowerCase();
+}
+function getHistoryShortcut(event, keys = DEFAULT_HISTORY_SHORTCUT_KEYS) {
+	if (!event.ctrlKey && !event.metaKey) return null;
+	const key = getShortcutKey(event);
+	if (key === keys.undoKey.toLowerCase() && !event.shiftKey) return "undo";
+	if (key === keys.redoKey.toLowerCase() || key === keys.undoKey.toLowerCase() && event.shiftKey) return "redo";
+	return null;
+}
+//#endregion
 //#region src/utils/style.ts
 /**
 * Shallow compare two objects
@@ -2608,6 +2737,44 @@ function applyStyleManagerToElements(styleManager, groups, edges, nodes) {
 	for (const node of nodes) node.applyStyleManager(styleManager);
 }
 //#endregion
+//#region src/utils/textMeasurer.ts
+/**
+* Wrap text by words while preserving explicit newline boundaries.
+*/
+function wrapMeasuredText(ctx, text, maxWidth, options = {}) {
+	const lines = [];
+	for (const paragraph of text.split("\n")) {
+		const words = paragraph.split(" ");
+		let currentLine = "";
+		for (const word of words) {
+			const testLine = currentLine ? `${currentLine} ${word}` : word;
+			if (ctx.measureText(testLine).width > maxWidth && currentLine) {
+				lines.push(currentLine);
+				currentLine = word;
+			} else currentLine = testLine;
+		}
+		lines.push(currentLine);
+	}
+	const maxLines = options.maxLines;
+	if (maxLines !== void 0 && lines.length > maxLines) {
+		const truncated = lines.slice(0, Math.max(0, maxLines));
+		if (options.appendEllipsis && truncated.length > 0) {
+			const lastIndex = truncated.length - 1;
+			truncated[lastIndex] = `${truncated[lastIndex]}…`;
+		}
+		return truncated;
+	}
+	return lines;
+}
+/**
+* Return the widest measured line.
+*/
+function measureTextLines(ctx, lines) {
+	let maxWidth = 0;
+	for (const line of lines) maxWidth = Math.max(maxWidth, ctx.measureText(line).width);
+	return maxWidth;
+}
+//#endregion
 //#region src/elements/TextLabel.ts
 var DEFAULT_INSET = 8;
 function normalizeTextInset(value, fallback) {
@@ -2815,16 +2982,9 @@ var TextLabel = class {
 		const lineHeight = (this._style.fontSize ?? 14) * 1.2;
 		const effectiveMaxWidth = this._maxWidth ?? this._autoMaxWidth;
 		const text = this._text ?? "";
-		if (effectiveMaxWidth !== void 0) {
-			const maxWidth = Math.max(0, effectiveMaxWidth - this._inset.left - this._inset.right);
-			this._lines = this.wrapText(ctx, text, maxWidth);
-		} else this._lines = text.split("\n");
-		let maxLineWidth = 0;
-		for (const line of this._lines) {
-			const metrics = ctx.measureText(line);
-			maxLineWidth = Math.max(maxLineWidth, metrics.width);
-		}
-		this._measuredWidth = maxLineWidth + this._inset.left + this._inset.right;
+		if (effectiveMaxWidth !== void 0) this._lines = wrapMeasuredText(ctx, text, Math.max(0, effectiveMaxWidth - this._inset.left - this._inset.right));
+		else this._lines = text.split("\n");
+		this._measuredWidth = measureTextLines(ctx, this._lines) + this._inset.left + this._inset.right;
 		this._measuredHeight = this._lines.length * lineHeight + this._inset.top + this._inset.bottom;
 		this._measureDirty = false;
 		return {
@@ -2896,23 +3056,6 @@ var TextLabel = class {
 		ctx.textAlign = this._style.align ?? "center";
 		ctx.textBaseline = this._style.baseline ?? "middle";
 	}
-	wrapText(ctx, text, maxWidth) {
-		const lines = [];
-		const paragraphs = text.split("\n");
-		for (const paragraph of paragraphs) {
-			const words = paragraph.split(" ");
-			let currentLine = "";
-			for (const word of words) {
-				const testLine = currentLine.length > 0 ? `${currentLine} ${word}` : word;
-				if (ctx.measureText(testLine).width > maxWidth && currentLine.length > 0) {
-					lines.push(currentLine);
-					currentLine = word;
-				} else currentLine = testLine;
-			}
-			if (currentLine.length > 0) lines.push(currentLine);
-		}
-		return lines.length > 0 ? lines : [""];
-	}
 };
 //#endregion
 //#region src/core/history/commands.ts
@@ -3282,16 +3425,14 @@ var HistoryManager = class extends EventEmitter {
 	}
 	/**
 	* Handle keyboard shortcuts.
-	* Uses event.code for letter keys to work with any keyboard layout (e.g. Russian).
 	*/
 	handleKeyDown(event) {
-		const isCtrlOrMeta = event.ctrlKey || event.metaKey;
-		const key = event.code.startsWith("Key") ? event.code.slice(3).toLowerCase() : event.key.toLowerCase();
-		if (isCtrlOrMeta && key === "z" && !event.shiftKey) {
+		const shortcut = getHistoryShortcut(event);
+		if (shortcut === "undo") {
 			event.preventDefault();
 			return this.undo();
 		}
-		if (isCtrlOrMeta && (key === "y" || key === "z" && event.shiftKey)) {
+		if (shortcut === "redo") {
 			event.preventDefault();
 			return this.redo();
 		}
@@ -3312,6 +3453,7 @@ function generateId(prefix = "el") {
 }
 /**
 * Reset ID counter (for testing)
+* @internal
 */
 function resetIdCounter() {
 	nextId = 1;
@@ -3518,6 +3660,109 @@ var Element = class {
 	}
 };
 //#endregion
+//#region src/utils/edgePath.ts
+/**
+* Point and tangent angle at a normalized position along an edge path (0..1 by length).
+*/
+function getPathPointAt(path, type, position) {
+	if (type !== "bezier" || path.length < 4) return getPointAlongPolyline(path, position);
+	const samples = [];
+	const steps = 20;
+	for (let i = 1; i + 2 < path.length; i += 3) {
+		const start = path[i - 1];
+		const control1 = path[i];
+		const control2 = path[i + 1];
+		const end = path[i + 2];
+		for (let sample = 0; sample <= steps; sample++) {
+			const t = sample / steps;
+			if (samples.length > 0 && t === 0) continue;
+			samples.push(bezierPoint(start, control1, control2, end, t));
+		}
+	}
+	return getPointAlongPolyline(samples, position);
+}
+function getPointAlongPolyline(path, position) {
+	if (path.length === 0) return {
+		point: {
+			x: 0,
+			y: 0
+		},
+		angle: 0
+	};
+	if (path.length === 1) return {
+		point: path[0],
+		angle: 0
+	};
+	let totalLength = 0;
+	const segments = [];
+	for (let i = 1; i < path.length; i++) {
+		const start = path[i - 1];
+		const end = path[i];
+		const length = Math.hypot(end.x - start.x, end.y - start.y);
+		segments.push({
+			start,
+			end,
+			length
+		});
+		totalLength += length;
+	}
+	const targetLength = totalLength * Math.max(0, Math.min(1, position));
+	let accumulated = 0;
+	for (const segment of segments) {
+		if (accumulated + segment.length >= targetLength) {
+			const segmentPosition = segment.length > 0 ? (targetLength - accumulated) / segment.length : 0;
+			return {
+				point: {
+					x: segment.start.x + segmentPosition * (segment.end.x - segment.start.x),
+					y: segment.start.y + segmentPosition * (segment.end.y - segment.start.y)
+				},
+				angle: Math.atan2(segment.end.y - segment.start.y, segment.end.x - segment.start.x)
+			};
+		}
+		accumulated += segment.length;
+	}
+	const lastSegment = segments[segments.length - 1];
+	return {
+		point: lastSegment.end,
+		angle: Math.atan2(lastSegment.end.y - lastSegment.start.y, lastSegment.end.x - lastSegment.start.x)
+	};
+}
+/** Map tangent angle to a cardinal direction used by polyline routing. */
+function directionFromAngle(angle) {
+	const twoPi = Math.PI * 2;
+	const a = (angle % twoPi + twoPi) % twoPi;
+	if (a >= Math.PI * .25 && a < Math.PI * .75) return "bottom";
+	if (a >= Math.PI * .75 && a < Math.PI * 1.25) return "left";
+	if (a >= Math.PI * 1.25 && a < Math.PI * 1.75) return "top";
+	return "right";
+}
+/**
+* Nearest point on an edge path to `point`, by sampling along normalized length.
+*/
+function getClosestPointOnPath(path, type, point, samples = 48) {
+	if (path.length < 2) return null;
+	let bestPoint = getPathPointAt(path, type, 0).point;
+	let bestParam = 0;
+	let bestDistSq = Infinity;
+	for (let i = 0; i <= samples; i++) {
+		const pathParam = i / samples;
+		const at = getPathPointAt(path, type, pathParam).point;
+		const dx = at.x - point.x;
+		const dy = at.y - point.y;
+		const distSq = dx * dx + dy * dy;
+		if (distSq < bestDistSq) {
+			bestDistSq = distSq;
+			bestPoint = at;
+			bestParam = pathParam;
+		}
+	}
+	return {
+		point: bestPoint,
+		pathParam: bestParam,
+		distance: Math.sqrt(bestDistSq)
+	};
+}
+//#endregion
 //#region src/elements/paths/StraightPathStrategy.ts
 /**
 * Straight line path strategy
@@ -3532,41 +3777,6 @@ var StraightPathStrategy = class {
 	}
 };
 //#endregion
-//#region src/utils/direction.ts
-function isHorizontal(dir) {
-	return dir === "left" || dir === "right";
-}
-function isVertical(dir) {
-	return dir === "top" || dir === "bottom";
-}
-function isOppositeDirections(fromDir, toDir) {
-	return fromDir === "left" && toDir === "right" || fromDir === "right" && toDir === "left" || fromDir === "top" && toDir === "bottom" || fromDir === "bottom" && toDir === "top";
-}
-function directionToVector(dir) {
-	switch (dir) {
-		case "top": return {
-			x: 0,
-			y: -1
-		};
-		case "bottom": return {
-			x: 0,
-			y: 1
-		};
-		case "left": return {
-			x: -1,
-			y: 0
-		};
-		case "right": return {
-			x: 1,
-			y: 0
-		};
-		default: return {
-			x: 0,
-			y: 0
-		};
-	}
-}
-//#endregion
 //#region src/elements/paths/PolylinePathStrategy.ts
 var MIN_SEGMENT_LENGTH = 20;
 var SELF_LOOP_MIN_DISTANCE$1 = 1;
@@ -4298,85 +4508,458 @@ var BezierPathStrategy = class {
 	}
 };
 //#endregion
-//#region src/elements/Edge.ts
-var DEFAULT_EDGE_STYLE = {
-	strokeColor: "#666666",
-	strokeWidth: 2,
-	opacity: 1
-};
+//#region src/utils/markers.ts
 /**
-* Connection edge between nodes
+* Calculate marker points based on edge path
 */
-var Edge = class extends Element {
-	constructor(options) {
-		super({
-			id: options.id ?? generateId("edge"),
-			x: 0,
-			y: 0,
-			width: 0,
-			height: 0,
-			style: options.style,
-			styleClass: options.styleClass
-		});
-		this._path = [];
-		this._autoUpdateEndpoints = true;
-		this._fromPoint = {
-			x: 0,
-			y: 0
-		};
-		this._toPoint = {
-			x: 0,
-			y: 0
-		};
-		this._from = options.from;
-		this._to = options.to;
-		this._type = options.type ?? "straight";
-		this._arrowType = options.arrowType ?? "single";
-		this._controlPoints = options.controlPoints;
-		this._startMarker = options.startMarker;
-		this._endMarker = options.endMarker;
-		this._edgeStyle = {
-			...DEFAULT_EDGE_STYLE,
-			...options.style
+function calculateMarkerPoints(path, position, type) {
+	if (path.length < 2) return null;
+	if (type === "bezier" && path.length >= 4) {
+		const epsilon = .001;
+		const isSame = (a, b) => Math.abs(a.x - b.x) < epsilon && Math.abs(a.y - b.y) < epsilon;
+		if (position === "end") {
+			const endIndex = path.length - 1;
+			const endPoint = path[endIndex];
+			let from = path[endIndex - 1];
+			if (isSame(from, endPoint)) {
+				from = path[endIndex - 2];
+				if (isSame(from, endPoint)) from = path[0];
+			}
+			return {
+				from,
+				to: endPoint
+			};
+		}
+		const start = path[0];
+		let next = path[1];
+		if (isSame(next, start)) {
+			next = path[2];
+			if (isSame(next, start)) next = path[path.length - 1];
+		}
+		return {
+			from: next,
+			to: start
 		};
-		this._pathStrategy = this.getPathStrategy(this._type);
-		this._lockAnchors = options.lockAnchors ?? true;
-		this._labelOffset = options.labelOffset ?? 0;
-		this._labelPosition = options.labelPosition ?? .5;
-		this._labelFollowPath = options.labelFollowPath ?? false;
-		this._labelBackground = options.labelBackground;
-		this._labelLineGap = options.labelLineGap ?? false;
-		if (options.label !== void 0) if (typeof options.label === "string") this._label = new TextLabel({
-			text: options.label,
-			onChange: () => this.markDirty()
-		});
-		else this._label = new TextLabel({
-			...options.label,
-			onChange: () => this.markDirty()
-		});
-	}
-	/**
-	* Source endpoint
-	*/
-	get from() {
-		return this._from;
 	}
-	set from(value) {
-		this._from = value;
-		this.markDirty();
-	}
-	/**
-	* Target endpoint
-	*/
-	get to() {
-		return this._to;
-	}
-	set to(value) {
-		this._to = value;
-		this.markDirty();
-	}
-	/**
-	* Edge type
+	if (position === "end") return {
+		from: path[path.length - 2],
+		to: path[path.length - 1]
+	};
+	return {
+		from: path[1],
+		to: path[0]
+	};
+}
+/**
+* Calculate arrow marker vertex points
+*/
+function calculateArrowMarkerPoints(to, angle, size) {
+	return {
+		tip: to,
+		left: {
+			x: to.x - size * Math.cos(angle - ARROW_ANGLE),
+			y: to.y - size * Math.sin(angle - ARROW_ANGLE)
+		},
+		right: {
+			x: to.x - size * Math.cos(angle + ARROW_ANGLE),
+			y: to.y - size * Math.sin(angle + ARROW_ANGLE)
+		}
+	};
+}
+/**
+* Calculate diamond marker vertex points
+*/
+function calculateDiamondMarkerPoints(to, angle, size) {
+	const halfLength = size / 2;
+	const halfWidth = size * .3;
+	const cos = Math.cos(angle);
+	const sin = Math.sin(angle);
+	return [
+		{
+			x: to.x,
+			y: to.y
+		},
+		{
+			x: to.x - halfLength * cos + halfWidth * sin,
+			y: to.y - halfLength * sin - halfWidth * cos
+		},
+		{
+			x: to.x - size * cos,
+			y: to.y - size * sin
+		},
+		{
+			x: to.x - halfLength * cos - halfWidth * sin,
+			y: to.y - halfLength * sin + halfWidth * cos
+		}
+	];
+}
+/**
+* Calculate circle marker center
+*/
+function calculateCircleMarkerCenter(to, angle, size) {
+	return {
+		x: to.x - size * Math.cos(angle),
+		y: to.y - size * Math.sin(angle)
+	};
+}
+/**
+* Generate SVG path for arrow marker
+*/
+function generateSvgArrowMarker(to, angle, size, fill, fillOpacity, stroke) {
+	const { left, right } = calculateArrowMarkerPoints(to, angle, size);
+	return `<path d="M ${to.x} ${to.y} L ${left.x} ${left.y} L ${right.x} ${right.y} Z" fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="1"/>`;
+}
+/**
+* Generate SVG path for open arrow marker
+*/
+function generateSvgOpenArrowMarker(to, angle, size, stroke) {
+	const { left, right } = calculateArrowMarkerPoints(to, angle, size);
+	return `<path d="M ${to.x} ${to.y} L ${left.x} ${left.y} M ${to.x} ${to.y} L ${right.x} ${right.y}" fill="none" stroke="${stroke}" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>`;
+}
+/**
+* Generate SVG path for diamond marker
+*/
+function generateSvgDiamondMarker(to, angle, size, fill, fillOpacity, stroke) {
+	const points = calculateDiamondMarkerPoints(to, angle, size);
+	return `<path d="M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y} L ${points[2].x} ${points[2].y} L ${points[3].x} ${points[3].y} Z" fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="1"/>`;
+}
+/**
+* Generate SVG circle marker
+*/
+function generateSvgCircleMarker(to, angle, size, fill, fillOpacity, stroke) {
+	const { x: cx, y: cy } = calculateCircleMarkerCenter(to, angle, size);
+	return `<circle cx="${cx}" cy="${cy}" r="${size}" fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="1"/>`;
+}
+/**
+* Square marker: front edge centered at `to`, depth 2×size along the edge toward `from`.
+*/
+function generateSvgSquareMarker(to, angle, size, fill, fillOpacity, stroke) {
+	const cos = Math.cos(angle);
+	const sin = Math.sin(angle);
+	const px = -sin;
+	const py = cos;
+	const p1 = {
+		x: to.x + size * px,
+		y: to.y + size * py
+	};
+	const p2 = {
+		x: to.x - size * px,
+		y: to.y - size * py
+	};
+	const bx = 2 * size * cos;
+	const by = 2 * size * sin;
+	const p3 = {
+		x: p2.x - bx,
+		y: p2.y - by
+	};
+	const p4 = {
+		x: p1.x - bx,
+		y: p1.y - by
+	};
+	return `<path d="M ${p1.x} ${p1.y} L ${p2.x} ${p2.y} L ${p3.x} ${p3.y} L ${p4.x} ${p4.y} Z" fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="1"/>`;
+}
+/**
+* Generate SVG path for any marker type
+*/
+function generateSvgMarker(marker, from, to, edgeStroke) {
+	const angle = Math.atan2(to.y - from.y, to.x - from.x);
+	const size = marker.size ?? 12;
+	const stroke = marker.strokeColor ?? edgeStroke;
+	const fill = marker.fillColor ?? stroke;
+	const fillOpacity = marker.fillOpacity ?? 1;
+	switch (marker.type) {
+		case "open": return generateSvgOpenArrowMarker(to, angle, size, stroke);
+		case "diamond": return generateSvgDiamondMarker(to, angle, size, fill, fillOpacity, stroke);
+		case "circle": return generateSvgCircleMarker(to, angle, size, fill, fillOpacity, stroke);
+		case "square": return generateSvgSquareMarker(to, angle, size, fill, fillOpacity, stroke);
+		default: return generateSvgArrowMarker(to, angle, size, fill, fillOpacity, stroke);
+	}
+}
+//#endregion
+//#region src/elements/edge/EdgeMarkerRenderer.ts
+function getCanvasMarkerLength(config) {
+	const size = config.size ?? MARKER_SIZES[config.type] ?? 10;
+	switch (config.type) {
+		case "arrow": return size * Math.cos(ARROW_ANGLE);
+		case "open": return 0;
+		case "diamond": return size;
+		case "circle":
+		case "square": return size * 2;
+		default: return 0;
+	}
+}
+function renderEdgeMarkers(ctx, options) {
+	const { path, type, arrowType, startMarker, endMarker } = options;
+	if (path.length < 2) return;
+	if (startMarker !== void 0 || endMarker !== void 0) {
+		renderConfiguredMarker(ctx, path, type, "end", endMarker);
+		renderConfiguredMarker(ctx, path, type, "start", startMarker);
+		return;
+	}
+	if (arrowType === "none") return;
+	const endPoints = calculateMarkerPoints(path, "end", type);
+	if (endPoints) drawLegacyArrowHead(ctx, endPoints.from, endPoints.to);
+	if (arrowType === "double") {
+		const startPoints = calculateMarkerPoints(path, "start", type);
+		if (startPoints) drawLegacyArrowHead(ctx, startPoints.from, startPoints.to);
+	}
+}
+function renderConfiguredMarker(ctx, path, type, position, config) {
+	if (!config || config.type === "none") return;
+	const points = calculateMarkerPoints(path, position, type);
+	if (points) drawMarker(ctx, points.from, points.to, config);
+}
+function drawMarker(ctx, from, to, config) {
+	const angle = Math.atan2(to.y - from.y, to.x - from.x);
+	const size = config.size ?? MARKER_SIZES[config.type] ?? 10;
+	const strokeColor = config.strokeColor ?? ctx.strokeStyle;
+	const fillColor = config.fillColor ?? strokeColor;
+	const fillOpacity = config.fillOpacity ?? 1;
+	ctx.save();
+	ctx.setLineDash([]);
+	ctx.lineDashOffset = 0;
+	ctx.strokeStyle = strokeColor;
+	switch (config.type) {
+		case "arrow":
+			drawArrowMarker(ctx, to, angle, size, fillColor, fillOpacity);
+			break;
+		case "open":
+			drawOpenArrowMarker(ctx, to, angle, size);
+			break;
+		case "diamond":
+			drawDiamondMarker(ctx, to, angle, size, fillColor, fillOpacity);
+			break;
+		case "circle":
+			drawCircleMarker(ctx, to, angle, size, fillColor, fillOpacity);
+			break;
+		case "square":
+			drawSquareMarker(ctx, to, angle, size, fillColor, fillOpacity);
+			break;
+	}
+	ctx.restore();
+}
+function drawArrowMarker(ctx, to, angle, size, fillColor, fillOpacity) {
+	const { left, right } = calculateArrowMarkerPoints(to, angle, size);
+	ctx.beginPath();
+	ctx.moveTo(to.x, to.y);
+	ctx.lineTo(left.x, left.y);
+	ctx.lineTo(right.x, right.y);
+	ctx.closePath();
+	fillAndStroke(ctx, fillColor, fillOpacity);
+}
+function drawOpenArrowMarker(ctx, to, angle, size) {
+	const { left, right } = calculateArrowMarkerPoints(to, angle, size);
+	ctx.beginPath();
+	ctx.moveTo(to.x, to.y);
+	ctx.lineTo(left.x, left.y);
+	ctx.moveTo(to.x, to.y);
+	ctx.lineTo(right.x, right.y);
+	ctx.stroke();
+}
+function drawDiamondMarker(ctx, to, angle, size, fillColor, fillOpacity) {
+	const points = calculateDiamondMarkerPoints(to, angle, size);
+	ctx.beginPath();
+	ctx.moveTo(points[0].x, points[0].y);
+	for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);
+	ctx.closePath();
+	fillAndStroke(ctx, fillColor, fillOpacity);
+}
+function drawCircleMarker(ctx, to, angle, size, fillColor, fillOpacity) {
+	const center = calculateCircleMarkerCenter(to, angle, size);
+	ctx.beginPath();
+	ctx.arc(center.x, center.y, size, 0, Math.PI * 2);
+	fillAndStroke(ctx, fillColor, fillOpacity);
+}
+function drawSquareMarker(ctx, to, angle, size, fillColor, fillOpacity) {
+	const cos = Math.cos(angle);
+	const sin = Math.sin(angle);
+	const perpendicularX = -sin;
+	const perpendicularY = cos;
+	const frontLeft = {
+		x: to.x + size * perpendicularX,
+		y: to.y + size * perpendicularY
+	};
+	const frontRight = {
+		x: to.x - size * perpendicularX,
+		y: to.y - size * perpendicularY
+	};
+	const depthX = 2 * size * cos;
+	const depthY = 2 * size * sin;
+	const backRight = {
+		x: frontRight.x - depthX,
+		y: frontRight.y - depthY
+	};
+	const backLeft = {
+		x: frontLeft.x - depthX,
+		y: frontLeft.y - depthY
+	};
+	ctx.beginPath();
+	ctx.moveTo(frontLeft.x, frontLeft.y);
+	ctx.lineTo(frontRight.x, frontRight.y);
+	ctx.lineTo(backRight.x, backRight.y);
+	ctx.lineTo(backLeft.x, backLeft.y);
+	ctx.closePath();
+	fillAndStroke(ctx, fillColor, fillOpacity);
+}
+function fillAndStroke(ctx, fillColor, fillOpacity) {
+	ctx.globalAlpha = fillOpacity;
+	ctx.fillStyle = fillColor;
+	ctx.fill();
+	ctx.globalAlpha = 1;
+	ctx.stroke();
+}
+function drawLegacyArrowHead(ctx, from, to) {
+	const { left, right } = calculateArrowMarkerPoints(to, Math.atan2(to.y - from.y, to.x - from.x), 10);
+	ctx.save();
+	ctx.setLineDash([]);
+	ctx.lineDashOffset = 0;
+	ctx.beginPath();
+	ctx.moveTo(to.x, to.y);
+	ctx.lineTo(left.x, left.y);
+	ctx.moveTo(to.x, to.y);
+	ctx.lineTo(right.x, right.y);
+	ctx.stroke();
+	ctx.restore();
+}
+//#endregion
+//#region src/elements/edge/EdgeLabelRenderer.ts
+function renderEdgeLabel(ctx, options) {
+	const { label, path, background } = options;
+	if (!label || path.length < 2) return;
+	const labelCenter = getEdgeLabelPosition(options);
+	if (!labelCenter) return;
+	const rotation = getEdgeLabelRotation(options);
+	const labelOpacity = label.style.opacity ?? 1;
+	label.measure(ctx);
+	const labelWidth = label.measuredWidth;
+	const labelHeight = label.measuredHeight;
+	const backgroundColor = background?.color ?? "#ffffff";
+	const backgroundOpacity = background?.opacity ?? 1;
+	const backgroundRadius = background?.borderRadius ?? 2;
+	ctx.save();
+	if (rotation !== 0) {
+		ctx.translate(labelCenter.x, labelCenter.y);
+		ctx.rotate(rotation);
+		ctx.translate(-labelCenter.x, -labelCenter.y);
+	}
+	const backgroundX = labelCenter.x - labelWidth / 2;
+	const backgroundY = labelCenter.y - labelHeight / 2;
+	ctx.fillStyle = backgroundColor;
+	ctx.globalAlpha = backgroundOpacity;
+	if (backgroundRadius > 0) {
+		drawRoundedRectPath(ctx, backgroundX, backgroundY, labelWidth, labelHeight, backgroundRadius);
+		ctx.fill();
+	} else ctx.fillRect(backgroundX, backgroundY, labelWidth, labelHeight);
+	ctx.globalAlpha = labelOpacity;
+	label.renderAt(ctx, labelCenter);
+	ctx.globalAlpha = 1;
+	ctx.restore();
+}
+function getEdgeLabelPosition(options) {
+	if (options.path.length < 2) return null;
+	const { point, angle } = getPathPointAt(options.path, options.type, options.position);
+	const perpendicularAngle = options.followPath ? angle + Math.PI / 2 : Math.PI / 2;
+	return {
+		x: point.x + options.offset * Math.cos(perpendicularAngle),
+		y: point.y + options.offset * Math.sin(perpendicularAngle)
+	};
+}
+function getEdgeLabelRotation(options) {
+	if (!options.followPath || options.path.length < 2) return 0;
+	let angle = getPathPointAt(options.path, options.type, options.position).angle;
+	if (angle > Math.PI / 2) angle -= Math.PI;
+	if (angle < -Math.PI / 2) angle += Math.PI;
+	return angle;
+}
+//#endregion
+//#region src/elements/Edge.ts
+var DEFAULT_EDGE_STYLE = {
+	strokeColor: "#666666",
+	strokeWidth: 2,
+	opacity: 1
+};
+/**
+* Connection edge between nodes
+*/
+var Edge = class extends Element {
+	constructor(options) {
+		super({
+			id: options.id ?? generateId("edge"),
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0,
+			style: options.style,
+			styleClass: options.styleClass
+		});
+		this._path = [];
+		this._autoUpdateEndpoints = true;
+		this._fromPoint = {
+			x: 0,
+			y: 0
+		};
+		this._toPoint = {
+			x: 0,
+			y: 0
+		};
+		this._from = options.from;
+		this._to = options.to;
+		this._type = options.type ?? "straight";
+		this._arrowType = options.arrowType ?? "single";
+		this._controlPoints = options.controlPoints;
+		this._startMarker = options.startMarker;
+		this._endMarker = options.endMarker;
+		this._edgeStyle = {
+			...DEFAULT_EDGE_STYLE,
+			...options.style
+		};
+		this._pathStrategy = this.getPathStrategy(this._type);
+		this._lockAnchors = options.lockAnchors ?? true;
+		this._labelOffset = options.labelOffset ?? 0;
+		this._labelPosition = options.labelPosition ?? .5;
+		this._labelFollowPath = options.labelFollowPath ?? false;
+		this._labelBackground = options.labelBackground;
+		this._labelLineGap = options.labelLineGap ?? false;
+		if (options.label !== void 0) if (typeof options.label === "string") this._label = new TextLabel({
+			text: options.label,
+			onChange: () => this.markDirty()
+		});
+		else this._label = new TextLabel({
+			...options.label,
+			onChange: () => this.markDirty()
+		});
+	}
+	/**
+	* Source endpoint
+	*/
+	get from() {
+		return this._from;
+	}
+	set from(value) {
+		this._from = value;
+		this._bindingListener?.();
+		this.markDirty();
+	}
+	/**
+	* Target endpoint
+	*/
+	get to() {
+		return this._to;
+	}
+	set to(value) {
+		this._to = value;
+		this._bindingListener?.();
+		this.markDirty();
+	}
+	/**
+	* Notified when from/to binding changes (ports / outline params / node ids).
+	* Used by DiagramRenderer to resync endpoints without doing so on every pan frame.
+	*/
+	setBindingListener(listener) {
+		this._bindingListener = listener;
+	}
+	/**
+	* Edge type
 	*/
 	get type() {
 		return this._type;
@@ -4640,6 +5223,10 @@ var Edge = class extends Element {
 	* @param toDir Direction at end point (top, right, bottom, left)
 	*/
 	updateEndpoints(fromPoint, toPoint, fromDir, toDir, options) {
+		if (this._path.length > 0 && this._fromPoint.x === fromPoint.x && this._fromPoint.y === fromPoint.y && this._toPoint.x === toPoint.x && this._toPoint.y === toPoint.y && this._fromDir === fromDir && this._toDir === toDir) {
+			this._pathOptions = options;
+			return;
+		}
 		this._fromPoint = fromPoint;
 		this._toPoint = toPoint;
 		this._fromDir = fromDir;
@@ -4737,8 +5324,8 @@ var Edge = class extends Element {
 	renderPath(ctx) {
 		const path = this._path;
 		if (path.length < 2) return;
-		const startOffset = this._startMarker && this._startMarker.type !== "none" ? this.getMarkerLength(this._startMarker) : 0;
-		const endOffset = this._endMarker && this._endMarker.type !== "none" ? this.getMarkerLength(this._endMarker) : 0;
+		const startOffset = this._startMarker && this._startMarker.type !== "none" ? getCanvasMarkerLength(this._startMarker) : 0;
+		const endOffset = this._endMarker && this._endMarker.type !== "none" ? getCanvasMarkerLength(this._endMarker) : 0;
 		const buildPolyline = () => {
 			if (this._type === "bezier" && path.length >= 4) {
 				const samples = [];
@@ -4920,363 +5507,53 @@ var Edge = class extends Element {
 		ctx.stroke();
 	}
 	renderArrows(ctx) {
-		if (this._path.length < 2) return;
-		if (this._startMarker !== void 0 || this._endMarker !== void 0) {
-			if (this._endMarker && this._endMarker.type !== "none") {
-				const points = this.getMarkerPoints("end");
-				if (points) this.drawMarker(ctx, points.from, points.to, this._endMarker);
-			}
-			if (this._startMarker && this._startMarker.type !== "none") {
-				const points = this.getMarkerPoints("start");
-				if (points) this.drawMarker(ctx, points.from, points.to, this._startMarker);
-			}
-		} else {
-			if (this._arrowType === "none") return;
-			const endPoints = this.getMarkerPoints("end");
-			if (endPoints) this.drawArrowHead(ctx, endPoints.from, endPoints.to);
-			if (this._arrowType === "double") {
-				const startPoints = this.getMarkerPoints("start");
-				if (startPoints) this.drawArrowHead(ctx, startPoints.from, startPoints.to);
-			}
-		}
+		renderEdgeMarkers(ctx, {
+			path: this._path,
+			type: this._type,
+			arrowType: this._arrowType,
+			startMarker: this._startMarker,
+			endMarker: this._endMarker
+		});
 	}
-	getMarkerPoints(position) {
-		const path = this._path;
-		if (path.length < 2) return null;
-		if (this._type === "bezier" && path.length >= 4) {
-			const start = path[0];
-			const cp1 = path[1];
-			const cp2 = path[2];
-			const end = path[3];
-			const epsilon = .001;
-			const isSame = (a, b) => Math.abs(a.x - b.x) < epsilon && Math.abs(a.y - b.y) < epsilon;
-			if (position === "end") {
-				const endIndex = path.length - 1;
-				const endPoint = path[endIndex];
-				let from = path[endIndex - 1] ?? cp2;
-				if (isSame(from, endPoint)) {
-					from = path[endIndex - 2] ?? cp1;
-					if (isSame(from, endPoint)) from = start;
-				}
-				return {
-					from,
-					to: endPoint
-				};
-			}
-			let next = cp1;
-			if (isSame(next, start)) {
-				next = cp2;
-				if (isSame(next, start)) next = end;
-			}
-			return {
-				from: next,
-				to: start
-			};
-		}
-		if (position === "end") return {
-			from: path[path.length - 2],
-			to: path[path.length - 1]
-		};
-		return {
-			from: path[1],
-			to: path[0]
-		};
+	renderLabel(ctx) {
+		renderEdgeLabel(ctx, {
+			...this.getLabelLayoutOptions(),
+			label: this._label,
+			background: this._labelBackground
+		});
 	}
 	/**
-	* Get the length of a marker (how much to shorten the line)
+	* Point and tangent on the current path at a normalized length position (0..1).
 	*/
-	getMarkerLength(config) {
-		const size = config.size ?? MARKER_SIZES[config.type] ?? 10;
-		switch (config.type) {
-			case "arrow": return size * Math.cos(ARROW_ANGLE);
-			case "open": return 0;
-			case "diamond": return size;
-			case "circle": return size * 2;
-			case "square": return size * 2;
-			default: return 0;
-		}
-	}
-	drawMarker(ctx, from, to, config) {
-		const angle = Math.atan2(to.y - from.y, to.x - from.x);
-		const size = config.size ?? MARKER_SIZES[config.type] ?? 10;
-		const strokeColor = config.strokeColor ?? ctx.strokeStyle;
-		const fillColor = config.fillColor ?? strokeColor;
-		const fillOpacity = config.fillOpacity ?? 1;
-		ctx.save();
-		ctx.setLineDash([]);
-		ctx.lineDashOffset = 0;
-		ctx.strokeStyle = strokeColor;
-		switch (config.type) {
-			case "arrow":
-				this.drawArrowMarker(ctx, to, angle, size, fillColor, fillOpacity);
-				break;
-			case "open":
-				this.drawOpenArrowMarker(ctx, to, angle, size);
-				break;
-			case "diamond":
-				this.drawDiamondMarker(ctx, to, angle, size, fillColor, fillOpacity);
-				break;
-			case "circle":
-				this.drawCircleMarker(ctx, to, angle, size, fillColor, fillOpacity);
-				break;
-			case "square":
-				this.drawSquareMarker(ctx, to, angle, size, fillColor, fillOpacity);
-				break;
-		}
-		ctx.restore();
-	}
-	drawArrowMarker(ctx, to, angle, size, fillColor, fillOpacity) {
-		const x1 = to.x - size * Math.cos(angle - ARROW_ANGLE);
-		const y1 = to.y - size * Math.sin(angle - ARROW_ANGLE);
-		const x2 = to.x - size * Math.cos(angle + ARROW_ANGLE);
-		const y2 = to.y - size * Math.sin(angle + ARROW_ANGLE);
-		ctx.beginPath();
-		ctx.moveTo(to.x, to.y);
-		ctx.lineTo(x1, y1);
-		ctx.lineTo(x2, y2);
-		ctx.closePath();
-		ctx.globalAlpha = fillOpacity;
-		ctx.fillStyle = fillColor;
-		ctx.fill();
-		ctx.globalAlpha = 1;
-		ctx.stroke();
-	}
-	drawOpenArrowMarker(ctx, to, angle, size) {
-		const x1 = to.x - size * Math.cos(angle - ARROW_ANGLE);
-		const y1 = to.y - size * Math.sin(angle - ARROW_ANGLE);
-		const x2 = to.x - size * Math.cos(angle + ARROW_ANGLE);
-		const y2 = to.y - size * Math.sin(angle + ARROW_ANGLE);
-		ctx.beginPath();
-		ctx.moveTo(to.x, to.y);
-		ctx.lineTo(x1, y1);
-		ctx.moveTo(to.x, to.y);
-		ctx.lineTo(x2, y2);
-		ctx.stroke();
-	}
-	drawDiamondMarker(ctx, to, angle, size, fillColor, fillOpacity) {
-		const halfLength = size / 2;
-		const halfWidth = size * .3;
-		const cos = Math.cos(angle);
-		const sin = Math.sin(angle);
-		const points = [
-			{
-				x: to.x,
-				y: to.y
-			},
-			{
-				x: to.x - halfLength * cos + halfWidth * sin,
-				y: to.y - halfLength * sin - halfWidth * cos
-			},
-			{
-				x: to.x - size * cos,
-				y: to.y - size * sin
-			},
-			{
-				x: to.x - halfLength * cos - halfWidth * sin,
-				y: to.y - halfLength * sin + halfWidth * cos
-			}
-		];
-		ctx.beginPath();
-		ctx.moveTo(points[0].x, points[0].y);
-		for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);
-		ctx.closePath();
-		ctx.globalAlpha = fillOpacity;
-		ctx.fillStyle = fillColor;
-		ctx.fill();
-		ctx.globalAlpha = 1;
-		ctx.stroke();
-	}
-	drawCircleMarker(ctx, to, angle, size, fillColor, fillOpacity) {
-		const cx = to.x - size * Math.cos(angle);
-		const cy = to.y - size * Math.sin(angle);
-		ctx.beginPath();
-		ctx.arc(cx, cy, size, 0, Math.PI * 2);
-		ctx.globalAlpha = fillOpacity;
-		ctx.fillStyle = fillColor;
-		ctx.fill();
-		ctx.globalAlpha = 1;
-		ctx.stroke();
-	}
-	drawSquareMarker(ctx, to, angle, size, fillColor, fillOpacity) {
-		const cos = Math.cos(angle);
-		const sin = Math.sin(angle);
-		const px = -sin;
-		const py = cos;
-		const p1 = {
-			x: to.x + size * px,
-			y: to.y + size * py
-		};
-		const p2 = {
-			x: to.x - size * px,
-			y: to.y - size * py
-		};
-		const bx = 2 * size * cos;
-		const by = 2 * size * sin;
-		const p3 = {
-			x: p2.x - bx,
-			y: p2.y - by
-		};
-		const p4 = {
-			x: p1.x - bx,
-			y: p1.y - by
-		};
-		ctx.beginPath();
-		ctx.moveTo(p1.x, p1.y);
-		ctx.lineTo(p2.x, p2.y);
-		ctx.lineTo(p3.x, p3.y);
-		ctx.lineTo(p4.x, p4.y);
-		ctx.closePath();
-		ctx.globalAlpha = fillOpacity;
-		ctx.fillStyle = fillColor;
-		ctx.fill();
-		ctx.globalAlpha = 1;
-		ctx.stroke();
-	}
-	drawArrowHead(ctx, from, to) {
-		const angle = Math.atan2(to.y - from.y, to.x - from.x);
-		ctx.save();
-		ctx.setLineDash([]);
-		ctx.lineDashOffset = 0;
-		ctx.beginPath();
-		ctx.moveTo(to.x, to.y);
-		ctx.lineTo(to.x - 10 * Math.cos(angle - ARROW_ANGLE), to.y - 10 * Math.sin(angle - ARROW_ANGLE));
-		ctx.moveTo(to.x, to.y);
-		ctx.lineTo(to.x - 10 * Math.cos(angle + ARROW_ANGLE), to.y - 10 * Math.sin(angle + ARROW_ANGLE));
-		ctx.stroke();
-		ctx.restore();
-	}
-	renderLabel(ctx) {
-		if (this._label === void 0 || this._path.length < 2) return;
-		const { point, angle: pathAngle } = this.getPathPointAt(this._labelPosition);
-		const rotation = this.getLabelRotation();
-		const perpAngle = this._labelFollowPath ? pathAngle + Math.PI / 2 : Math.PI / 2;
-		const labelCenter = {
-			x: point.x + this._labelOffset * Math.cos(perpAngle),
-			y: point.y + this._labelOffset * Math.sin(perpAngle)
-		};
-		const labelOpacity = this._label.style.opacity ?? 1;
-		this._label.measure(ctx);
-		const labelWidth = this._label.measuredWidth;
-		const labelHeight = this._label.measuredHeight;
-		const bgColor = this._labelBackground?.color ?? "#ffffff";
-		const bgOpacity = this._labelBackground?.opacity ?? 1;
-		const bgRadius = this._labelBackground?.borderRadius ?? 2;
-		ctx.save();
-		if (rotation !== 0) {
-			ctx.translate(labelCenter.x, labelCenter.y);
-			ctx.rotate(rotation);
-			ctx.translate(-labelCenter.x, -labelCenter.y);
-		}
-		const bgX = labelCenter.x - labelWidth / 2;
-		const bgY = labelCenter.y - labelHeight / 2;
-		ctx.fillStyle = bgColor;
-		ctx.globalAlpha = bgOpacity;
-		if (bgRadius > 0) {
-			this.drawRoundedRect(ctx, bgX, bgY, labelWidth, labelHeight, bgRadius);
-			ctx.fill();
-		} else ctx.fillRect(bgX, bgY, labelWidth, labelHeight);
-		ctx.globalAlpha = labelOpacity;
-		this._label.renderAt(ctx, labelCenter);
-		ctx.globalAlpha = 1;
-		ctx.restore();
-	}
-	drawRoundedRect(ctx, x, y, width, height, radius) {
-		drawRoundedRectPath(ctx, x, y, width, height, radius);
+	getPointAt(pathParam = .5) {
+		if (this._path.length < 2) return null;
+		return getPathPointAt(this._path, this._type, pathParam);
 	}
 	/**
-	* Get a point along the sampled path at parameter t (0..1).
-	* Also returns the tangent angle in radians at that point.
+	* Nearest point on this edge's path to `point` (world coordinates).
 	*/
-	getPathPointAt(t) {
-		const path = this._path;
-		let samples;
-		if (this._type === "bezier" && path.length >= 4) {
-			samples = [];
-			const steps = 20;
-			for (let i = 1; i + 2 < path.length; i += 3) {
-				const p0 = path[i - 1];
-				const p1 = path[i];
-				const p2 = path[i + 1];
-				const p3 = path[i + 2];
-				for (let s = 0; s <= steps; s++) {
-					const st = s / steps;
-					if (samples.length > 0 && st === 0) continue;
-					samples.push(bezierPoint(p0, p1, p2, p3, st));
-				}
-			}
-		} else samples = path;
-		return this.getPointAlongPolyline(samples, t);
+	getClosestPointOnPath(point) {
+		return getClosestPointOnPath(this._path, this._type, point);
 	}
 	/**
 	* Get world position of label center along path.
 	*/
 	getLabelPosition() {
-		if (this._path.length < 2) return null;
-		const { point, angle: pathAngle } = this.getPathPointAt(this._labelPosition);
-		const perpAngle = this._labelFollowPath ? pathAngle + Math.PI / 2 : Math.PI / 2;
-		return {
-			x: point.x + this._labelOffset * Math.cos(perpAngle),
-			y: point.y + this._labelOffset * Math.sin(perpAngle)
-		};
+		return getEdgeLabelPosition(this.getLabelLayoutOptions());
 	}
 	/**
 	* Get label rotation angle in radians (if labelFollowPath is true).
 	*/
 	getLabelRotation() {
-		if (!this._labelFollowPath || this._path.length < 2) return 0;
-		const { angle } = this.getPathPointAt(this._labelPosition);
-		let a = angle;
-		if (a > Math.PI / 2) a -= Math.PI;
-		if (a < -Math.PI / 2) a += Math.PI;
-		return a;
+		return getEdgeLabelRotation(this.getLabelLayoutOptions());
 	}
-	/**
-	* Get point and tangent angle at parameter t along a polyline.
-	*/
-	getPointAlongPolyline(path, t) {
-		if (path.length === 0) return {
-			point: {
-				x: 0,
-				y: 0
-			},
-			angle: 0
-		};
-		if (path.length === 1) return {
-			point: path[0],
-			angle: 0
-		};
-		let totalLength = 0;
-		const segments = [];
-		for (let i = 1; i < path.length; i++) {
-			const start = path[i - 1];
-			const end = path[i];
-			const length = Math.sqrt((end.x - start.x) ** 2 + (end.y - start.y) ** 2);
-			segments.push({
-				start,
-				end,
-				length
-			});
-			totalLength += length;
-		}
-		const targetLength = totalLength * Math.max(0, Math.min(1, t));
-		let accumulated = 0;
-		for (const seg of segments) {
-			if (accumulated + seg.length >= targetLength) {
-				const segT = seg.length > 0 ? (targetLength - accumulated) / seg.length : 0;
-				return {
-					point: {
-						x: seg.start.x + segT * (seg.end.x - seg.start.x),
-						y: seg.start.y + segT * (seg.end.y - seg.start.y)
-					},
-					angle: Math.atan2(seg.end.y - seg.start.y, seg.end.x - seg.start.x)
-				};
-			}
-			accumulated += seg.length;
-		}
-		const lastSeg = segments[segments.length - 1];
+	getLabelLayoutOptions() {
 		return {
-			point: lastSeg.end,
-			angle: Math.atan2(lastSeg.end.y - lastSeg.start.y, lastSeg.end.x - lastSeg.start.x)
+			path: this._path,
+			type: this._type,
+			position: this._labelPosition,
+			offset: this._labelOffset,
+			followPath: this._labelFollowPath
 		};
 	}
 	getPathStrategy(type) {
@@ -5412,6 +5689,179 @@ var LabelEditor = class {
 	}
 };
 //#endregion
+//#region src/core/ClipboardManager.ts
+var ClipboardManager = class {
+	constructor(options) {
+		this.clipboard = null;
+		this.renderer = options.renderer;
+		this.selectionManager = options.selectionManager;
+		this.historyManager = options.historyManager;
+		this.nodeFactory = options.nodeFactory;
+		this.edgeFactory = options.edgeFactory;
+	}
+	copySelection() {
+		const selectedIds = new Set(this.selectionManager.selectedIds);
+		if (selectedIds.size === 0) return;
+		const nodes = [];
+		const edges = [];
+		const nodeIds = /* @__PURE__ */ new Set();
+		for (const id of selectedIds) {
+			const node = this.renderer.getNode(id);
+			if (node) {
+				nodes.push({
+					id: node.id,
+					type: node.typeName,
+					x: node.x,
+					y: node.y,
+					width: node.width,
+					height: node.height,
+					style: node.style,
+					styleClass: node.styleClass,
+					label: node.label?.text,
+					labelStyleClass: node.label?.styleClass,
+					ports: node.ports.map((port) => ({
+						id: port.id,
+						type: port.type,
+						position: port.position,
+						styleClass: port.styleClass
+					})),
+					data: Object.keys(node.data).length > 0 ? node.data : void 0
+				});
+				nodeIds.add(node.id);
+			}
+		}
+		for (const edge of this.renderer.edges.values()) {
+			const fromId = edge.from.nodeId;
+			const toId = edge.to.nodeId;
+			if (!fromId || !toId || !nodeIds.has(fromId) || !nodeIds.has(toId)) continue;
+			edges.push({
+				id: edge.id,
+				from: edge.from,
+				to: edge.to,
+				type: edge.type,
+				controlPoints: edge.controlPoints,
+				arrowType: edge.arrowType,
+				style: edge.style,
+				styleClass: edge.styleClass,
+				label: edge.label?.text,
+				labelStyleClass: edge.label?.styleClass,
+				labelOffset: edge.labelOffset !== 0 ? edge.labelOffset : void 0,
+				labelBackground: edge.labelBackground,
+				labelLineGap: edge.labelLineGap ? true : void 0,
+				data: Object.keys(edge.data).length > 0 ? edge.data : void 0
+			});
+		}
+		this.clipboard = {
+			nodes,
+			edges
+		};
+	}
+	pasteSelection() {
+		if (!this.clipboard || !this.nodeFactory || !this.edgeFactory) return;
+		const offset = {
+			x: 20,
+			y: 20
+		};
+		const idMap = /* @__PURE__ */ new Map();
+		const newNodes = [];
+		const newEdges = [];
+		for (const nodeData of this.clipboard.nodes) {
+			const newId = `${nodeData.id}_copy_${Date.now()}`;
+			idMap.set(nodeData.id, newId);
+			const copyData = {
+				...nodeData,
+				id: newId,
+				x: nodeData.x + offset.x,
+				y: nodeData.y + offset.y
+			};
+			newNodes.push(this.nodeFactory(copyData));
+		}
+		for (const edgeData of this.clipboard.edges) {
+			const fromKey = edgeData.from.nodeId;
+			const toKey = edgeData.to.nodeId;
+			if (!fromKey || !toKey) continue;
+			const fromNodeId = idMap.get(fromKey);
+			const toNodeId = idMap.get(toKey);
+			if (!fromNodeId || !toNodeId) continue;
+			const newId = `${edgeData.id}_copy_${Date.now()}`;
+			const copyEdge = {
+				...edgeData,
+				id: newId,
+				from: {
+					...edgeData.from,
+					nodeId: fromNodeId
+				},
+				to: {
+					...edgeData.to,
+					nodeId: toNodeId
+				}
+			};
+			newEdges.push(this.edgeFactory(copyEdge));
+		}
+		if (newNodes.length === 0 && newEdges.length === 0) return;
+		this.historyManager.execute({
+			execute: () => {
+				for (const node of newNodes) this.renderer.addNode(node);
+				for (const edge of newEdges) this.renderer.addEdge(edge);
+			},
+			undo: () => {
+				for (const edge of newEdges) this.renderer.removeEdge(edge.id);
+				for (const node of newNodes) this.renderer.removeNode(node.id);
+			}
+		});
+	}
+};
+//#endregion
+//#region src/core/PropertyChangeBatcher.ts
+var PropertyChangeBatcher = class {
+	constructor(options) {
+		this.pendingChanges = /* @__PURE__ */ new Map();
+		this.renderer = options.renderer;
+		this.historyManager = options.historyManager;
+		this.debounceMs = options.debounceMs ?? 350;
+	}
+	queue(kind, id, before, after) {
+		const key = `${kind}:${id}`;
+		const existing = this.pendingChanges.get(key);
+		if (existing) {
+			existing.after = after;
+			window.clearTimeout(existing.timerId);
+			existing.timerId = window.setTimeout(() => this.flushOne(key), this.debounceMs);
+			return;
+		}
+		const timerId = window.setTimeout(() => this.flushOne(key), this.debounceMs);
+		this.pendingChanges.set(key, {
+			kind,
+			id,
+			before,
+			after,
+			timerId
+		});
+	}
+	flush() {
+		for (const key of Array.from(this.pendingChanges.keys())) this.flushOne(key);
+	}
+	flushOne(key) {
+		const pending = this.pendingChanges.get(key);
+		if (!pending) return;
+		window.clearTimeout(pending.timerId);
+		this.pendingChanges.delete(key);
+		if (shallowEqual(pending.before, pending.after)) return;
+		switch (pending.kind) {
+			case "node":
+				this.historyManager.execute(new ChangeNodePropertiesCommand((id) => this.renderer.getNode(id), pending.id, pending.before, pending.after));
+				break;
+			case "edge":
+				this.historyManager.execute(new ChangeEdgePropertiesCommand((id) => this.renderer.getEdge(id), pending.id, pending.before, pending.after));
+				break;
+			case "group":
+				this.historyManager.execute(new ChangeGroupPropertiesCommand((id) => this.renderer.getGroup(id), pending.id, pending.before, pending.after));
+				break;
+		}
+		this.renderer.markStyleDirty();
+	}
+};
+//#endregion
 //#region src/core/InteractionManager.ts
 var DEFAULT_KEYMAP = {
 	deleteKeys: ["Delete", "Backspace"],
@@ -5426,9 +5876,6 @@ var InteractionManager = class {
 		this.dragStartPositions = /* @__PURE__ */ new Map();
 		this.dragStartEditablePolylinePoints = /* @__PURE__ */ new Map();
 		this.reconnectOrigins = /* @__PURE__ */ new Map();
-		this.clipboard = null;
-		this.pendingPropertyChanges = /* @__PURE__ */ new Map();
-		this.propertyChangeDebounceMs = 350;
 		this.labelEditor = new LabelEditor();
 		this.scrollbarDragState = null;
 		this.handledScrollbarMouseDown = false;
@@ -5457,6 +5904,17 @@ var InteractionManager = class {
 		});
 		this.navigationManager = new NavigationManager({ renderer: this.renderer });
 		this.historyManager = new HistoryManager();
+		this.clipboardManager = new ClipboardManager({
+			renderer: this.renderer,
+			selectionManager: this.selectionManager,
+			historyManager: this.historyManager,
+			nodeFactory: options.nodeFactory,
+			edgeFactory: options.edgeFactory
+		});
+		this.propertyChangeBatcher = new PropertyChangeBatcher({
+			renderer: this.renderer,
+			historyManager: this.historyManager
+		});
 		this.keymap = {
 			...DEFAULT_KEYMAP,
 			...options.keymap
@@ -5484,7 +5942,7 @@ var InteractionManager = class {
 				});
 			}
 		});
-		this.setupEvents(options);
+		this.setupEvents();
 	}
 	get selection() {
 		return this.selectionManager;
@@ -5525,7 +5983,9 @@ var InteractionManager = class {
 		const idSet = new Set(nodeIds);
 		for (const edge of this.renderer.edges.values()) {
 			if (!edge.hasEditableControlPoints()) continue;
-			if (!idSet.has(edge.from.nodeId) && !idSet.has(edge.to.nodeId)) continue;
+			const fromId = edge.from.nodeId;
+			const toId = edge.to.nodeId;
+			if ((!fromId || !idSet.has(fromId)) && (!toId || !idSet.has(toId))) continue;
 			if (this.dragStartEditablePolylinePoints.has(edge.id)) continue;
 			this.dragStartEditablePolylinePoints.set(edge.id, clonePoints(edge.controlPoints));
 		}
@@ -5547,7 +6007,7 @@ var InteractionManager = class {
 		const after = createNodeSnapshot(node);
 		if (shallowEqual(before, after)) return;
 		this.renderer.markStyleDirty();
-		this.queuePropertyChange("node", nodeId, before, after);
+		this.propertyChangeBatcher.queue("node", nodeId, before, after);
 	}
 	changeEdgeProperties(edgeId, apply) {
 		const edge = this.renderer.getEdge(edgeId);
@@ -5557,7 +6017,7 @@ var InteractionManager = class {
 		const after = createEdgeSnapshot(edge);
 		if (shallowEqual(before, after)) return;
 		this.renderer.markStyleDirty();
-		this.queuePropertyChange("edge", edgeId, before, after);
+		this.propertyChangeBatcher.queue("edge", edgeId, before, after);
 	}
 	changeGroupProperties(groupId, apply) {
 		const group = this.renderer.getGroup(groupId);
@@ -5567,7 +6027,7 @@ var InteractionManager = class {
 		const after = createGroupSnapshot(group);
 		if (shallowEqual(before, after)) return;
 		this.renderer.markStyleDirty();
-		this.queuePropertyChange("group", groupId, before, after);
+		this.propertyChangeBatcher.queue("group", groupId, before, after);
 	}
 	removeNodeFromGroups(nodeId, groupIds) {
 		if (!this.renderer.getNode(nodeId)) return;
@@ -5601,7 +6061,7 @@ var InteractionManager = class {
 		this.overlayCleanup?.();
 		this.overlayCleanup = null;
 	}
-	setupEvents(options) {
+	setupEvents() {
 		this.overlayCleanup = this.renderer.addOverlayRenderer((ctx) => {
 			this.selectionManager.renderSelectionRect(ctx);
 			if (!this.navigationOnly) {
@@ -5622,7 +6082,7 @@ var InteractionManager = class {
 		this.inputHandler.on("wheel", (event) => this.handleWheel(event));
 		this.inputHandler.on("pan", (event) => this.handlePan(event));
 		this.inputHandler.on("pinch", (event) => this.handlePinch(event));
-		this.inputHandler.on("keydown", (event) => this.handleKeyDown(event, options));
+		this.inputHandler.on("keydown", (event) => this.handleKeyDown(event));
 		this.inputHandler.on("keyup", (event) => this.handleKeyUp(event));
 		if (!this.navigationOnly) {
 			this.dragManager.on("dragstart", (nodeIds) => {
@@ -5852,8 +6312,7 @@ var InteractionManager = class {
 		const component = node.getComponentAtPoint(point);
 		if (!component) return;
 		if (component.id !== void 0) this.renderer.emit("componentClick", node.id, component, point);
-		const asAny = component;
-		if (typeof asAny["onClick"] === "function") asAny["onClick"](component);
+		component.onClick?.(component);
 	}
 	handleDoubleClick(event) {
 		if (this.renderer.blocksDiagramPointerAtScreen(event.screenX, event.screenY)) return;
@@ -5919,13 +6378,13 @@ var InteractionManager = class {
 		if (this.renderer.blocksDiagramPointerAtScreen(event.screenX, event.screenY)) return;
 		this.navigationManager.handlePinch(event);
 	}
-	handleKeyDown(event, options) {
+	handleKeyDown(event) {
 		const isCtrlOrMeta = event.ctrlKey || event.metaKey;
-		const key = event.code.startsWith("Key") ? event.code.slice(3).toLowerCase() : event.key.toLowerCase();
+		const key = getShortcutKey(event);
 		this.navigationManager.handleKeyDown(event);
 		if (this.handleViewportNavigationKey(event)) return;
 		if (this.navigationOnly) return;
-		if (isCtrlOrMeta && (key === "z" || key === "y")) this.flushPendingPropertyChanges();
+		if (getHistoryShortcut(event) !== null) this.propertyChangeBatcher.flush();
 		if (this.historyManager.handleKeyDown(event)) return;
 		if (this.keymap.deleteKeys.includes(event.key)) {
 			event.preventDefault();
@@ -5934,12 +6393,12 @@ var InteractionManager = class {
 		}
 		if (isCtrlOrMeta && key === this.keymap.copyKey) {
 			event.preventDefault();
-			this.copySelection();
+			this.clipboardManager.copySelection();
 			return;
 		}
 		if (isCtrlOrMeta && key === this.keymap.pasteKey) {
 			event.preventDefault();
-			this.pasteSelection(options);
+			this.clipboardManager.pasteSelection();
 			return;
 		}
 	}
@@ -6044,49 +6503,6 @@ var InteractionManager = class {
 			edge.label.text = value;
 		});
 	}
-	queuePropertyChange(kind, id, before, after) {
-		const key = `${kind}:${id}`;
-		const existing = this.pendingPropertyChanges.get(key);
-		if (existing) {
-			existing.after = after;
-			window.clearTimeout(existing.timerId);
-			existing.timerId = window.setTimeout(() => this.flushPendingPropertyChange(key), this.propertyChangeDebounceMs);
-			return;
-		}
-		const timerId = window.setTimeout(() => this.flushPendingPropertyChange(key), this.propertyChangeDebounceMs);
-		this.pendingPropertyChanges.set(key, {
-			kind,
-			id,
-			before,
-			after,
-			timerId
-		});
-	}
-	flushPendingPropertyChanges() {
-		const keys = Array.from(this.pendingPropertyChanges.keys());
-		for (const key of keys) this.flushPendingPropertyChange(key);
-	}
-	flushPendingPropertyChange(key) {
-		const pending = this.pendingPropertyChanges.get(key);
-		if (!pending) return;
-		window.clearTimeout(pending.timerId);
-		this.pendingPropertyChanges.delete(key);
-		if (shallowEqual(pending.before, pending.after)) return;
-		switch (pending.kind) {
-			case "node":
-				this.historyManager.execute(new ChangeNodePropertiesCommand((id) => this.renderer.getNode(id), pending.id, pending.before, pending.after));
-				this.renderer.markStyleDirty();
-				break;
-			case "edge":
-				this.historyManager.execute(new ChangeEdgePropertiesCommand((id) => this.renderer.getEdge(id), pending.id, pending.before, pending.after));
-				this.renderer.markStyleDirty();
-				break;
-			case "group":
-				this.historyManager.execute(new ChangeGroupPropertiesCommand((id) => this.renderer.getGroup(id), pending.id, pending.before, pending.after));
-				this.renderer.markStyleDirty();
-				break;
-		}
-	}
 	deleteSelection() {
 		const selectedIds = Array.from(this.selectionManager.selectedIds);
 		this.deleteByIds(selectedIds);
@@ -6117,10 +6533,14 @@ var InteractionManager = class {
 				nodeGroupIds.set(child.id, list);
 			}
 		}
-		for (const edge of this.renderer.edges.values()) if (nodeIds.has(edge.from.nodeId) || nodeIds.has(edge.to.nodeId)) {
-			if (!edgeIds.has(edge.id)) {
-				edgeIds.add(edge.id);
-				edges.push(edge);
+		for (const edge of this.renderer.edges.values()) {
+			const fromId = edge.from.nodeId;
+			const toId = edge.to.nodeId;
+			if (fromId && nodeIds.has(fromId) || toId && nodeIds.has(toId)) {
+				if (!edgeIds.has(edge.id)) {
+					edgeIds.add(edge.id);
+					edges.push(edge);
+				}
 			}
 		}
 		return new CompositeCommand([{
@@ -6142,112 +6562,16 @@ var InteractionManager = class {
 			}
 		}]);
 	}
-	copySelection() {
-		const selectedIds = new Set(this.selectionManager.selectedIds);
-		if (selectedIds.size === 0) return;
-		const nodes = [];
-		const edges = [];
-		const nodeIds = /* @__PURE__ */ new Set();
-		for (const id of selectedIds) {
-			const node = this.renderer.getNode(id);
-			if (node) {
-				nodes.push({
-					id: node.id,
-					type: node.typeName,
-					x: node.x,
-					y: node.y,
-					width: node.width,
-					height: node.height,
-					style: node.style,
-					styleClass: node.styleClass,
-					label: node.label?.text,
-					labelStyleClass: node.label?.styleClass,
-					ports: node.ports.map((port) => ({
-						id: port.id,
-						type: port.type,
-						position: port.position,
-						styleClass: port.styleClass
-					})),
-					data: Object.keys(node.data).length > 0 ? node.data : void 0
-				});
-				nodeIds.add(node.id);
-			}
-		}
-		for (const edge of this.renderer.edges.values()) if (nodeIds.has(edge.from.nodeId) && nodeIds.has(edge.to.nodeId)) edges.push({
-			id: edge.id,
-			from: edge.from,
-			to: edge.to,
-			type: edge.type,
-			controlPoints: edge.controlPoints,
-			arrowType: edge.arrowType,
-			style: edge.style,
-			styleClass: edge.styleClass,
-			label: edge.label?.text,
-			labelStyleClass: edge.label?.styleClass,
-			labelOffset: edge.labelOffset !== 0 ? edge.labelOffset : void 0,
-			labelBackground: edge.labelBackground,
-			labelLineGap: edge.labelLineGap ? true : void 0,
-			data: Object.keys(edge.data).length > 0 ? edge.data : void 0
-		});
-		this.clipboard = {
-			nodes,
-			edges
-		};
-	}
-	pasteSelection(options) {
-		if (!this.clipboard || !options.nodeFactory || !options.edgeFactory) return;
-		const offset = {
-			x: 20,
-			y: 20
-		};
-		const idMap = /* @__PURE__ */ new Map();
-		const newNodes = [];
-		const newEdges = [];
-		for (const nodeData of this.clipboard.nodes) {
-			const newId = `${nodeData.id}_copy_${Date.now()}`;
-			idMap.set(nodeData.id, newId);
-			const copyData = {
-				...nodeData,
-				id: newId,
-				x: nodeData.x + offset.x,
-				y: nodeData.y + offset.y
-			};
-			newNodes.push(options.nodeFactory(copyData));
-		}
-		for (const edgeData of this.clipboard.edges) {
-			const fromNodeId = idMap.get(edgeData.from.nodeId);
-			const toNodeId = idMap.get(edgeData.to.nodeId);
-			if (!fromNodeId || !toNodeId) continue;
-			const newId = `${edgeData.id}_copy_${Date.now()}`;
-			const copyEdge = {
-				...edgeData,
-				id: newId,
-				from: {
-					...edgeData.from,
-					nodeId: fromNodeId
-				},
-				to: {
-					...edgeData.to,
-					nodeId: toNodeId
-				}
-			};
-			newEdges.push(options.edgeFactory(copyEdge));
-		}
-		if (newNodes.length === 0 && newEdges.length === 0) return;
-		this.historyManager.execute({
-			execute: () => {
-				for (const node of newNodes) this.renderer.addNode(node);
-				for (const edge of newEdges) this.renderer.addEdge(edge);
-			},
-			undo: () => {
-				for (const edge of newEdges) this.renderer.removeEdge(edge.id);
-				for (const node of newNodes) this.renderer.removeNode(node.id);
-			}
-		});
-	}
 	endpointsEqual(a, b) {
-		if (a.nodeId !== b.nodeId) return false;
+		if ((a.edgeId ?? null) !== (b.edgeId ?? null)) return false;
+		if ((a.nodeId ?? null) !== (b.nodeId ?? null)) return false;
 		if ((a.portId ?? null) !== (b.portId ?? null)) return false;
+		const aPath = a.pathParam;
+		const bPath = b.pathParam;
+		if (aPath !== void 0 || bPath !== void 0) {
+			if (aPath === void 0 || bPath === void 0) return false;
+			if (Math.abs(aPath - bPath) >= 1e-9) return false;
+		}
 		const aParam = a.outlineParam;
 		const bParam = b.outlineParam;
 		if (aParam === void 0 && bParam === void 0) return true;
@@ -6629,40 +6953,459 @@ var ContextMenuManager = class extends EventEmitter {
 			iconEl.style.fontSize = "16px";
 			iconEl.textContent = icon.value;
 		}
-		return iconEl;
+		return iconEl;
+	}
+	isSvgString(value) {
+		const trimmed = value.trim();
+		return trimmed.startsWith("<svg") || trimmed.includes("</svg>");
+	}
+	adjustPosition(menu) {
+		const rect = menu.getBoundingClientRect();
+		const padding = 8;
+		let left = rect.left;
+		let top = rect.top;
+		if (rect.right > window.innerWidth - padding) left = Math.max(padding, window.innerWidth - rect.width - padding);
+		if (rect.bottom > window.innerHeight - padding) top = Math.max(padding, window.innerHeight - rect.height - padding);
+		menu.style.left = `${left}px`;
+		menu.style.top = `${top}px`;
+	}
+};
+//#endregion
+//#region src/types.ts
+function isNodeEdgeEndpoint(endpoint) {
+	return typeof endpoint.nodeId === "string" && endpoint.nodeId.length > 0;
+}
+function isEdgeEdgeEndpoint(endpoint) {
+	return typeof endpoint.edgeId === "string" && endpoint.edgeId.length > 0;
+}
+//#endregion
+//#region src/core/EdgeEndpointUpdater.ts
+var EDGE_ATTACH_MAX_PASSES = 3;
+var EdgeEndpointUpdater = class {
+	constructor(host) {
+		this.host = host;
+	}
+	updateForDrag() {
+		this.update(false);
+	}
+	updateAll() {
+		this.update(true);
+	}
+	update(includeRoutingObstacles) {
+		const obstacles = includeRoutingObstacles ? this.host.getNodeObstacles() : void 0;
+		const nodes = this.host.getNodes();
+		const edges = this.host.getEdges();
+		const nodeNode = [];
+		const edgeAttached = [];
+		for (const edge of edges.values()) {
+			if (!edge.autoUpdateEndpoints) continue;
+			if (isEdgeEdgeEndpoint(edge.from) || isEdgeEdgeEndpoint(edge.to)) edgeAttached.push(edge);
+			else nodeNode.push(edge);
+		}
+		for (const edge of nodeNode) this.updateNodeNodeEdge(edge, nodes, includeRoutingObstacles, obstacles);
+		for (let pass = 0; pass < EDGE_ATTACH_MAX_PASSES; pass++) {
+			let changed = false;
+			for (const edge of edgeAttached) if (this.updateEdgeAttachedEdge(edge, nodes, edges, obstacles)) changed = true;
+			if (!changed) break;
+		}
+	}
+	updateNodeNodeEdge(edge, nodes, includeRoutingObstacles, obstacles) {
+		if (!isNodeEdgeEndpoint(edge.from) || !isNodeEdgeEndpoint(edge.to)) return;
+		const fromNode = nodes.get(edge.from.nodeId);
+		const toNode = nodes.get(edge.to.nodeId);
+		if (!fromNode || !toNode) return;
+		if (includeRoutingObstacles) this.lockAnchors(edge, fromNode, toNode);
+		const from = this.resolveNodeEndpoint(fromNode, edge.from);
+		const to = this.resolveNodeEndpoint(toNode, edge.to);
+		edge.updateEndpoints(from.point, to.point, from.direction, to.direction, obstacles ? { obstacles } : void 0);
+	}
+	/**
+	* @returns true when the resolved geometry changed enough to warrant another pass
+	*/
+	updateEdgeAttachedEdge(edge, nodes, edges, obstacles) {
+		const from = this.resolveAnyEndpoint(edge.from, nodes, edges);
+		const to = this.resolveAnyEndpoint(edge.to, nodes, edges);
+		if (!from || !to) return false;
+		const before = edge.path;
+		const beforeKey = before.length >= 2 ? `${before[0].x},${before[0].y}:${before[before.length - 1].x},${before[before.length - 1].y}` : "";
+		edge.updateEndpoints(from.point, to.point, from.direction, to.direction, obstacles ? { obstacles } : void 0);
+		const after = edge.path;
+		return beforeKey !== (after.length >= 2 ? `${after[0].x},${after[0].y}:${after[after.length - 1].x},${after[after.length - 1].y}` : "");
+	}
+	resolveAnyEndpoint(endpoint, nodes, edges) {
+		if (isEdgeEdgeEndpoint(endpoint)) return this.resolveEdgeEndpoint(endpoint, edges);
+		if (isNodeEdgeEndpoint(endpoint)) {
+			const node = nodes.get(endpoint.nodeId);
+			if (!node) return null;
+			return this.resolveNodeEndpoint(node, endpoint);
+		}
+		return null;
+	}
+	resolveEdgeEndpoint(endpoint, edges) {
+		const host = edges.get(endpoint.edgeId);
+		if (!host) return null;
+		const pathParam = endpoint.pathParam ?? .5;
+		const at = host.getPointAt(pathParam);
+		if (!at) return null;
+		return {
+			point: at.point,
+			direction: directionFromAngle(at.angle)
+		};
+	}
+	lockAnchors(edge, fromNode, toNode) {
+		if (isNodeEdgeEndpoint(edge.from) && edge.lockAnchors && edge.from.outlineParam === void 0 && !edge.from.portId) {
+			const anchor = fromNode.getNearestAnchor(toNode.getCenter());
+			if (anchor) edge.from = {
+				...edge.from,
+				portId: `${ANCHOR_PORT_PREFIX}${anchor.id}`
+			};
+		}
+		if (isNodeEdgeEndpoint(edge.to) && edge.lockAnchors && edge.to.outlineParam === void 0 && !edge.to.portId) {
+			const anchor = toNode.getNearestAnchor(fromNode.getCenter());
+			if (anchor) edge.to = {
+				...edge.to,
+				portId: `${ANCHOR_PORT_PREFIX}${anchor.id}`
+			};
+		}
+	}
+	resolveNodeEndpoint(node, endpoint) {
+		if (endpoint.portId) {
+			const anchorId = endpoint.portId.slice(ANCHOR_PORT_PREFIX.length);
+			const point = node.getAnchorPointById(anchorId);
+			return point ? {
+				point,
+				direction: anchorId.split(":")[0]
+			} : { point: node.getCenter() };
+		}
+		if (endpoint.outlineParam !== void 0) return {
+			point: node.getConnectionPointAtOutlineParam(endpoint.outlineParam),
+			direction: getDirectionFromOutlineParam(endpoint.outlineParam)
+		};
+		return { point: node.getCenter() };
+	}
+};
+//#endregion
+//#region src/core/ScrollbarController.ts
+var DEFAULT_SCROLLBAR_OPTIONS = {
+	enabled: true,
+	autoHide: false,
+	autoHideDelay: 1200,
+	fadeDuration: 220,
+	thickness: 6,
+	hoverThickness: 8,
+	minThumbLength: 24,
+	hitAreaPadding: 4,
+	pageScrollRatio: .8,
+	trackColor: "",
+	thumbColor: "",
+	thumbHoverColor: "",
+	thumbActiveColor: ""
+};
+var ScrollbarController = class ScrollbarController {
+	constructor(host, diagramOptions) {
+		this.host = host;
+		this.hoveredAxis = null;
+		this.activeAxis = null;
+		this.lastInteractionAt = performance.now();
+		this.lastAlpha = -1;
+		this.options = ScrollbarController.resolveOptions(diagramOptions);
+	}
+	updateAnimation(now) {
+		if (!this.options.enabled || !this.options.autoHide) return false;
+		const alpha = this.getAlpha(now);
+		if (Math.abs(alpha - this.lastAlpha) <= .001) return false;
+		this.lastAlpha = alpha;
+		return true;
+	}
+	render(ctx, frameTime) {
+		const metrics = this.getMetrics();
+		if (!metrics) return;
+		const alpha = this.getAlpha(frameTime);
+		this.lastAlpha = alpha;
+		if (alpha <= .001) return;
+		const colors = this.resolveColors();
+		ctx.save();
+		const pixelRatio = this.host.getPixelRatio();
+		ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+		ctx.globalAlpha = alpha;
+		if (metrics.horizontal) {
+			const isHovered = this.hoveredAxis === "horizontal";
+			const isActive = this.activeAxis === "horizontal";
+			const thickness = isHovered || isActive ? this.options.hoverThickness : this.options.thickness;
+			const trackY = metrics.horizontal.trackY + (metrics.horizontal.thickness - thickness) / 2;
+			const radius = thickness / 2;
+			ctx.fillStyle = colors.track;
+			drawRoundedRectPath(ctx, metrics.horizontal.trackX, trackY, metrics.horizontal.trackLength, thickness, radius);
+			ctx.fill();
+			ctx.fillStyle = isActive ? colors.thumbActive : isHovered ? colors.thumbHover : colors.thumb;
+			drawRoundedRectPath(ctx, metrics.horizontal.trackX + metrics.horizontal.thumbOffset, trackY, metrics.horizontal.thumbLength, thickness, radius);
+			ctx.fill();
+		}
+		if (metrics.vertical) {
+			const isHovered = this.hoveredAxis === "vertical";
+			const isActive = this.activeAxis === "vertical";
+			const thickness = isHovered || isActive ? this.options.hoverThickness : this.options.thickness;
+			const trackX = metrics.vertical.trackX + (metrics.vertical.thickness - thickness) / 2;
+			const radius = thickness / 2;
+			ctx.fillStyle = colors.track;
+			drawRoundedRectPath(ctx, trackX, metrics.vertical.trackY, thickness, metrics.vertical.trackLength, radius);
+			ctx.fill();
+			ctx.fillStyle = isActive ? colors.thumbActive : isHovered ? colors.thumbHover : colors.thumb;
+			drawRoundedRectPath(ctx, trackX, metrics.vertical.trackY + metrics.vertical.thumbOffset, thickness, metrics.vertical.thumbLength, radius);
+			ctx.fill();
+		}
+		ctx.restore();
+	}
+	notifyInteraction() {
+		this.lastInteractionAt = performance.now();
+		this.host.markDirty();
+	}
+	setActiveAxis(axis) {
+		if (this.activeAxis === axis) return;
+		this.activeAxis = axis;
+		if (axis === null) this.host.markDirty();
+		else this.notifyInteraction();
+	}
+	updateHover(screenX, screenY) {
+		const axis = this.hitTestArea(screenX, screenY);
+		if (this.hoveredAxis !== axis) {
+			this.hoveredAxis = axis;
+			this.host.markDirty();
+			if (axis !== null) this.notifyInteraction();
+		}
+		return axis !== null;
+	}
+	clearHover() {
+		if (this.hoveredAxis === null) return;
+		this.hoveredAxis = null;
+		this.host.markDirty();
+	}
+	hitTestThumb(screenX, screenY) {
+		const metrics = this.getMetrics();
+		const point = this.host.screenToCanvas(screenX, screenY);
+		if (!metrics || !point) return null;
+		const padding = this.options.hitAreaPadding;
+		if (metrics.horizontal) {
+			const start = metrics.horizontal.trackX + metrics.horizontal.thumbOffset;
+			if (point.x >= start - padding && point.x <= start + metrics.horizontal.thumbLength + padding && point.y >= metrics.horizontal.trackY - padding && point.y <= metrics.horizontal.trackY + metrics.horizontal.thickness + padding) return {
+				axis: "horizontal",
+				pointerOffset: point.x - start
+			};
+		}
+		if (metrics.vertical) {
+			const start = metrics.vertical.trackY + metrics.vertical.thumbOffset;
+			if (point.x >= metrics.vertical.trackX - padding && point.x <= metrics.vertical.trackX + metrics.vertical.thickness + padding && point.y >= start - padding && point.y <= start + metrics.vertical.thumbLength + padding) return {
+				axis: "vertical",
+				pointerOffset: point.y - start
+			};
+		}
+		return null;
+	}
+	dragThumb(axis, screenX, screenY, pointerOffset) {
+		const metrics = this.getMetrics();
+		const point = this.host.screenToCanvas(screenX, screenY);
+		if (!metrics || !point) return false;
+		const track = axis === "horizontal" ? metrics.horizontal : metrics.vertical;
+		if (!track) return false;
+		const coordinate = axis === "horizontal" ? point.x : point.y;
+		const trackStart = axis === "horizontal" ? track.trackX : track.trackY;
+		const travel = Math.max(0, track.trackLength - track.thumbLength);
+		const thumbOffset = Math.min(Math.max(coordinate - trackStart - pointerOffset, 0), travel);
+		const scroll = travel > 0 && track.maxScroll > 0 ? thumbOffset / travel * track.maxScroll : 0;
+		const viewportStart = (axis === "horizontal" ? metrics.contentBounds.x : metrics.contentBounds.y) + scroll;
+		if (axis === "horizontal") this.host.setOffsetX(-viewportStart * this.host.getZoom());
+		else this.host.setOffsetY(-viewportStart * this.host.getZoom());
+		this.notifyInteraction();
+		return true;
+	}
+	clickTrack(screenX, screenY) {
+		const metrics = this.getMetrics();
+		const point = this.host.screenToCanvas(screenX, screenY);
+		if (!metrics || !point) return false;
+		if (metrics.horizontal && this.clickTrackAxis("horizontal", metrics, point)) return true;
+		return metrics.vertical ? this.clickTrackAxis("vertical", metrics, point) : false;
+	}
+	scrollBy(screenDx, screenDy) {
+		const state = this.getScrollState();
+		if (!state) return false;
+		const zoom = this.host.getZoom();
+		const maxX = Math.max(0, state.contentBounds.width - state.viewportBounds.width);
+		const maxY = Math.max(0, state.contentBounds.height - state.viewportBounds.height);
+		const x = Math.min(Math.max(state.viewportBounds.x + screenDx / zoom, state.contentBounds.x), state.contentBounds.x + maxX);
+		const y = Math.min(Math.max(state.viewportBounds.y + screenDy / zoom, state.contentBounds.y), state.contentBounds.y + maxY);
+		this.host.setOffsetX(-x * zoom);
+		this.host.setOffsetY(-y * zoom);
+		this.notifyInteraction();
+		return true;
+	}
+	scrollToStart() {
+		const state = this.getScrollState();
+		if (!state) return false;
+		const zoom = this.host.getZoom();
+		this.host.setOffsetX(-state.contentBounds.x * zoom);
+		this.host.setOffsetY(-state.contentBounds.y * zoom);
+		this.notifyInteraction();
+		return true;
+	}
+	scrollToEnd() {
+		const state = this.getScrollState();
+		if (!state) return false;
+		const maxX = Math.max(0, state.contentBounds.width - state.viewportBounds.width);
+		const maxY = Math.max(0, state.contentBounds.height - state.viewportBounds.height);
+		const zoom = this.host.getZoom();
+		this.host.setOffsetX(-(state.contentBounds.x + maxX) * zoom);
+		this.host.setOffsetY(-(state.contentBounds.y + maxY) * zoom);
+		this.notifyInteraction();
+		return true;
+	}
+	clickTrackAxis(axis, metrics, point) {
+		const track = axis === "horizontal" ? metrics.horizontal : metrics.vertical;
+		if (!track) return false;
+		const coordinate = axis === "horizontal" ? point.x : point.y;
+		const cross = axis === "horizontal" ? point.y : point.x;
+		const start = axis === "horizontal" ? track.trackX : track.trackY;
+		const crossStart = axis === "horizontal" ? track.trackY : track.trackX;
+		if (coordinate < start || coordinate > start + track.trackLength || cross < crossStart || cross > crossStart + track.thickness) return false;
+		const thumbStart = start + track.thumbOffset;
+		const thumbEnd = thumbStart + track.thumbLength;
+		if (coordinate >= thumbStart && coordinate <= thumbEnd) return false;
+		const direction = coordinate < thumbStart ? -1 : 1;
+		const viewportSize = axis === "horizontal" ? metrics.viewportBounds.width : metrics.viewportBounds.height;
+		const current = (axis === "horizontal" ? metrics.viewportBounds.x : metrics.viewportBounds.y) - (axis === "horizontal" ? metrics.contentBounds.x : metrics.contentBounds.y);
+		const next = Math.min(Math.max(current + viewportSize * this.options.pageScrollRatio * direction, 0), track.maxScroll);
+		const viewportStart = (axis === "horizontal" ? metrics.contentBounds.x : metrics.contentBounds.y) + next;
+		if (axis === "horizontal") this.host.setOffsetX(-viewportStart * this.host.getZoom());
+		else this.host.setOffsetY(-viewportStart * this.host.getZoom());
+		this.notifyInteraction();
+		return true;
+	}
+	getMetrics() {
+		if (!this.options.enabled) return null;
+		const state = this.getScrollState();
+		if (!state) return null;
+		const { contentBounds, viewportBounds } = state;
+		const contentWidth = Math.max(contentBounds.width, 1);
+		const contentHeight = Math.max(contentBounds.height, 1);
+		const showHorizontal = contentWidth > viewportBounds.width + .01;
+		const showVertical = contentHeight > viewportBounds.height + .01;
+		if (!showHorizontal && !showVertical) return null;
+		const padding = 6;
+		const spacing = 4;
+		const width = this.host.getWidth();
+		const height = this.host.getHeight();
+		const availableWidth = width - padding * 2;
+		const availableHeight = height - padding * 2;
+		if (availableWidth <= 0 || availableHeight <= 0) return null;
+		const horizontalLength = Math.max(0, availableWidth - (showVertical ? this.options.thickness + spacing : 0));
+		const verticalLength = Math.max(0, availableHeight - (showHorizontal ? this.options.thickness + spacing : 0));
+		return {
+			contentBounds,
+			viewportBounds,
+			horizontal: showHorizontal ? this.createTrack(horizontalLength, viewportBounds.width, contentWidth, viewportBounds.x - contentBounds.x, padding, height - padding - this.options.thickness) : null,
+			vertical: showVertical ? this.createTrack(verticalLength, viewportBounds.height, contentHeight, viewportBounds.y - contentBounds.y, width - padding - this.options.thickness, padding) : null
+		};
+	}
+	createTrack(length, viewportSize, contentSize, scroll, trackX, trackY) {
+		if (length <= 0) return null;
+		const maxScroll = Math.max(0, contentSize - viewportSize);
+		const thumbLength = Math.min(length, Math.max(this.options.minThumbLength, length * (viewportSize / contentSize)));
+		const travel = Math.max(0, length - thumbLength);
+		return {
+			trackX,
+			trackY,
+			trackLength: length,
+			thickness: this.options.thickness,
+			thumbLength,
+			thumbOffset: maxScroll > 0 ? Math.min(Math.max(scroll, 0), maxScroll) / maxScroll * travel : 0,
+			maxScroll
+		};
+	}
+	getScrollState() {
+		const raw = this.host.getContentBounds();
+		if (!raw) return null;
+		const viewportBounds = this.getViewportBounds();
+		const minX = Math.min(raw.x, viewportBounds.x);
+		const minY = Math.min(raw.y, viewportBounds.y);
+		const maxX = Math.max(raw.x + raw.width, viewportBounds.x + viewportBounds.width);
+		const maxY = Math.max(raw.y + raw.height, viewportBounds.y + viewportBounds.height);
+		return {
+			contentBounds: {
+				x: minX,
+				y: minY,
+				width: maxX - minX,
+				height: maxY - minY
+			},
+			viewportBounds
+		};
+	}
+	getViewportBounds() {
+		const zoom = this.host.getZoom();
+		return {
+			x: -this.host.getOffsetX() / zoom,
+			y: -this.host.getOffsetY() / zoom,
+			width: this.host.getWidth() / zoom,
+			height: this.host.getHeight() / zoom
+		};
+	}
+	hitTestArea(screenX, screenY) {
+		const metrics = this.getMetrics();
+		const point = this.host.screenToCanvas(screenX, screenY);
+		if (!metrics || !point) return null;
+		const padding = this.options.hitAreaPadding;
+		for (const axis of ["horizontal", "vertical"]) {
+			const track = metrics[axis];
+			if (!track) continue;
+			const coordinate = axis === "horizontal" ? point.x : point.y;
+			const cross = axis === "horizontal" ? point.y : point.x;
+			const start = axis === "horizontal" ? track.trackX : track.trackY;
+			const crossStart = axis === "horizontal" ? track.trackY : track.trackX;
+			if (coordinate >= start - padding && coordinate <= start + track.trackLength + padding && cross >= crossStart - padding && cross <= crossStart + track.thickness + padding) return axis;
+		}
+		return null;
 	}
-	isSvgString(value) {
-		const trimmed = value.trim();
-		return trimmed.startsWith("<svg") || trimmed.includes("</svg>");
+	getAlpha(now) {
+		if (!this.options.autoHide || this.activeAxis !== null || this.hoveredAxis !== null) return 1;
+		const elapsed = now - this.lastInteractionAt;
+		if (elapsed <= this.options.autoHideDelay) return 1;
+		if (this.options.fadeDuration <= 0) return 0;
+		return Math.max(0, 1 - (elapsed - this.options.autoHideDelay) / this.options.fadeDuration);
 	}
-	adjustPosition(menu) {
-		const rect = menu.getBoundingClientRect();
-		const padding = 8;
-		let left = rect.left;
-		let top = rect.top;
-		if (rect.right > window.innerWidth - padding) left = Math.max(padding, window.innerWidth - rect.width - padding);
-		if (rect.bottom > window.innerHeight - padding) top = Math.max(padding, window.innerHeight - rect.height - padding);
-		menu.style.left = `${left}px`;
-		menu.style.top = `${top}px`;
+	resolveColors() {
+		const fallback = this.host.isDarkTheme() ? {
+			track: "rgba(148, 163, 184, 0.22)",
+			thumb: "rgba(226, 232, 240, 0.68)",
+			thumbHover: "rgba(226, 232, 240, 0.86)",
+			thumbActive: "rgba(248, 250, 252, 0.96)"
+		} : {
+			track: "rgba(15, 23, 42, 0.16)",
+			thumb: "rgba(51, 65, 85, 0.7)",
+			thumbHover: "rgba(30, 41, 59, 0.82)",
+			thumbActive: "rgba(15, 23, 42, 0.9)"
+		};
+		return {
+			track: this.options.trackColor || fallback.track,
+			thumb: this.options.thumbColor || fallback.thumb,
+			thumbHover: this.options.thumbHoverColor || fallback.thumbHover,
+			thumbActive: this.options.thumbActiveColor || fallback.thumbActive
+		};
+	}
+	static resolveOptions(options) {
+		const resolved = {
+			...DEFAULT_SCROLLBAR_OPTIONS,
+			enabled: options.scrollbarOverlay ?? DEFAULT_SCROLLBAR_OPTIONS.enabled
+		};
+		if (typeof options.scrollbar === "boolean") return {
+			...resolved,
+			enabled: options.scrollbar
+		};
+		return options.scrollbar ? {
+			...resolved,
+			...options.scrollbar
+		} : resolved;
 	}
 };
 //#endregion
 //#region src/core/DiagramRenderer.ts
-var DEFAULT_SCROLLBAR_OPTIONS = {
-	enabled: true,
-	autoHide: false,
-	autoHideDelay: 1200,
-	fadeDuration: 220,
-	thickness: 6,
-	hoverThickness: 8,
-	minThumbLength: 24,
-	hitAreaPadding: 4,
-	pageScrollRatio: .8,
-	trackColor: "",
-	thumbColor: "",
-	thumbHoverColor: "",
-	thumbActiveColor: ""
-};
 var DEFAULT_OPTIONS$1 = {
 	width: 800,
 	height: 600,
@@ -6699,15 +7442,12 @@ var DiagramRenderer = class extends EventEmitter {
 		this.interactionManager = null;
 		this.contextMenuManager = null;
 		this.frameTime = 0;
-		this.scrollbarHoveredAxis = null;
-		this.scrollbarActiveAxis = null;
-		this.scrollbarLastInteractionAt = 0;
-		this.lastScrollbarAlpha = -1;
 		this._zoom = 1;
 		this._offsetX = 0;
 		this._offsetY = 0;
 		this._dirty = true;
 		this._styleDirty = true;
+		this._contentDirty = true;
 		this._destroyed = false;
 		this._canvasRect = null;
 		this._nodeObstaclesCache = null;
@@ -6722,14 +7462,35 @@ var DiagramRenderer = class extends EventEmitter {
 			...DEFAULT_OPTIONS$1,
 			...options
 		};
-		this.scrollbar = this.resolveScrollbarOptions(options);
 		const ctx = this.canvas.getContext("2d");
 		if (ctx === null) throw new Error("Failed to get 2D rendering context");
 		this.ctx = ctx;
 		this.devicePixelRatio = this.options.retina ? window.devicePixelRatio || 1 : 1;
 		this._zoom = this.options.initialZoom;
 		this.animationManager = new AnimationManager(this.options.animations);
-		this.scrollbarLastInteractionAt = performance.now();
+		this.scrollbarController = new ScrollbarController({
+			getWidth: () => this.width,
+			getHeight: () => this.height,
+			getZoom: () => this.zoom,
+			getOffsetX: () => this.offsetX,
+			setOffsetX: (value) => {
+				this.offsetX = value;
+			},
+			getOffsetY: () => this.offsetY,
+			setOffsetY: (value) => {
+				this.offsetY = value;
+			},
+			getPixelRatio: () => this.pixelRatio,
+			markDirty: () => this.markDirty(),
+			screenToCanvas: (x, y) => this.screenToCanvas(x, y),
+			getContentBounds: () => this.getContentBounds(),
+			isDarkTheme: () => this.styleManager?.theme.name === "dark"
+		}, options);
+		this.edgeEndpointUpdater = new EdgeEndpointUpdater({
+			getNodes: () => this.nodes,
+			getEdges: () => this.edges,
+			getNodeObstacles: () => this.getNodeObstacles()
+		});
 		this.setupCanvas();
 		this.startRenderLoop();
 	}
@@ -6743,7 +7504,7 @@ var DiagramRenderer = class extends EventEmitter {
 		const clampedZoom = Math.max(this.options.minZoom, Math.min(this.options.maxZoom, value));
 		if (this._zoom !== clampedZoom) {
 			this._zoom = clampedZoom;
-			this.scrollbarLastInteractionAt = performance.now();
+			this.scrollbarController.notifyInteraction();
 			this.markDirty();
 			this.emit("zoom", clampedZoom);
 		}
@@ -6757,7 +7518,7 @@ var DiagramRenderer = class extends EventEmitter {
 	set offsetX(value) {
 		if (this._offsetX !== value) {
 			this._offsetX = value;
-			this.scrollbarLastInteractionAt = performance.now();
+			this.scrollbarController.notifyInteraction();
 			this.markDirty();
 			this.emit("pan", this._offsetX, this._offsetY);
 		}
@@ -6771,7 +7532,7 @@ var DiagramRenderer = class extends EventEmitter {
 	set offsetY(value) {
 		if (this._offsetY !== value) {
 			this._offsetY = value;
-			this.scrollbarLastInteractionAt = performance.now();
+			this.scrollbarController.notifyInteraction();
 			this.markDirty();
 			this.emit("pan", this._offsetX, this._offsetY);
 		}
@@ -6991,12 +7752,11 @@ var DiagramRenderer = class extends EventEmitter {
 	* Add a node to the diagram
 	*/
 	addNode(node) {
-		node.setDirtyListener(() => this.markDirty());
+		node.setDirtyListener(() => this.markContentDirty());
 		node.setAttachToOutlineGetter(() => this._attachToOutline);
 		this._nodes.set(node.id, node);
-		this._nodeObstaclesCache = null;
 		this.animationManager.registerEnter(node.id);
-		this.markDirty();
+		this.markContentDirty();
 		this.emit("nodeAdd", node);
 	}
 	/**
@@ -7027,11 +7787,12 @@ var DiagramRenderer = class extends EventEmitter {
 	*/
 	addEdge(edge) {
 		edge.setDirtyListener(() => this.markDirty());
+		edge.setBindingListener(() => this.markContentDirty());
 		this._edges.set(edge.id, edge);
-		this._updateEdgeIndex(edge.id, edge.from.nodeId, true);
-		this._updateEdgeIndex(edge.id, edge.to.nodeId, true);
+		if (edge.from.nodeId) this._updateEdgeIndex(edge.id, edge.from.nodeId, true);
+		if (edge.to.nodeId) this._updateEdgeIndex(edge.id, edge.to.nodeId, true);
 		this.animationManager.registerEnter(edge.id);
-		this.markDirty();
+		this.markContentDirty();
 		this.emit("edgeAdd", edge);
 	}
 	/**
@@ -7070,21 +7831,27 @@ var DiagramRenderer = class extends EventEmitter {
 		if (edgesToRemove) for (const edgeId of Array.from(edgesToRemove)) this.removeEdgeImmediate(edgeId);
 		for (const group of this._groups.values()) group.removeChild(nodeId);
 		this._nodes.delete(nodeId);
-		this._nodeObstaclesCache = null;
 		node.setDirtyListener(void 0);
 		node.setAttachToOutlineGetter(void 0);
-		this.markDirty();
+		this.markContentDirty();
 		this.emit("nodeRemove", node);
 		return true;
 	}
 	removeEdgeImmediate(edgeId) {
 		const edge = this._edges.get(edgeId);
 		if (edge === void 0) return false;
-		this._updateEdgeIndex(edgeId, edge.from.nodeId, false);
-		this._updateEdgeIndex(edgeId, edge.to.nodeId, false);
+		const dependents = [];
+		for (const other of this._edges.values()) {
+			if (other.id === edgeId) continue;
+			if (other.from.edgeId === edgeId || other.to.edgeId === edgeId) dependents.push(other.id);
+		}
+		for (const dependentId of dependents) this.removeEdgeImmediate(dependentId);
+		if (edge.from.nodeId) this._updateEdgeIndex(edgeId, edge.from.nodeId, false);
+		if (edge.to.nodeId) this._updateEdgeIndex(edgeId, edge.to.nodeId, false);
 		this._edges.delete(edgeId);
 		edge.setDirtyListener(void 0);
-		this.markDirty();
+		edge.setBindingListener(void 0);
+		this.markContentDirty();
 		this.emit("edgeRemove", edge);
 		return true;
 	}
@@ -7164,12 +7931,22 @@ var DiagramRenderer = class extends EventEmitter {
 		for (const n of this._nodes.values()) n.setBadgeHover(n.id === hoveredNodeId ? hoveredIndex : -1);
 	}
 	/**
-	* Mark the diagram as needing re-render
+	* Mark the diagram as needing re-render (viewport / cosmetics).
+	* Does not resync edge endpoints — use {@link markContentDirty} after layout changes.
 	*/
 	markDirty() {
 		this._dirty = true;
 	}
 	/**
+	* Mark that node/edge layout changed and edge endpoints must be recalculated.
+	* Pan/zoom should call {@link markDirty} only so path routing is not redone every frame.
+	*/
+	markContentDirty() {
+		this._contentDirty = true;
+		this._nodeObstaclesCache = null;
+		this._dirty = true;
+	}
+	/**
 	* Force an immediate render
 	*/
 	render() {
@@ -7235,13 +8012,7 @@ var DiagramRenderer = class extends EventEmitter {
 			if (this._destroyed) return;
 			const now = performance.now();
 			if (this.animationManager.update(now) || this.animationManager.hasActive()) this._dirty = true;
-			if (this.scrollbar.enabled && this.scrollbar.autoHide) {
-				const alpha = this.getScrollbarAlpha(now);
-				if (Math.abs(alpha - this.lastScrollbarAlpha) > .001) {
-					this._dirty = true;
-					this.lastScrollbarAlpha = alpha;
-				}
-			}
+			if (this.scrollbarController.updateAnimation(now)) this._dirty = true;
 			this._canvasRect = null;
 			if (this._dirty) {
 				this.renderFrame(now);
@@ -7253,7 +8024,6 @@ var DiagramRenderer = class extends EventEmitter {
 	}
 	renderFrame(now) {
 		this.frameTime = now;
-		this._nodeObstaclesCache = null;
 		const ctx = this.ctx;
 		const { width, height, backgroundColor } = this.options;
 		ctx.setTransform(this.devicePixelRatio, 0, 0, this.devicePixelRatio, 0, 0);
@@ -7271,7 +8041,10 @@ var DiagramRenderer = class extends EventEmitter {
 			this.renderElementWithAnimation(ctx, group, () => group.render(ctx));
 			group.clearDirty();
 		}
-		this.updateEdgeEndpoints();
+		if (this._contentDirty) {
+			this.edgeEndpointUpdater.updateAll();
+			this._contentDirty = false;
+		}
 		for (const node of this._nodes.values()) if (node.visible) {
 			this.renderElementWithAnimation(ctx, node, () => node.render(ctx));
 			node.clearDirty();
@@ -7283,7 +8056,7 @@ var DiagramRenderer = class extends EventEmitter {
 		for (const edge of this._edges.values()) if (edge.visible) edge.renderHandles(ctx);
 		for (const overlayRenderer of this.overlayRenderers) overlayRenderer(ctx);
 		for (const topOverlay of this.topOverlayRenderers) topOverlay(ctx);
-		this.renderScrollbars(ctx);
+		this.scrollbarController.render(ctx, this.frameTime);
 		this.emit("render");
 	}
 	renderElementWithAnimation(ctx, element, renderFn) {
@@ -7315,93 +8088,7 @@ var DiagramRenderer = class extends EventEmitter {
 	* Called during drag to keep control points in sync
 	*/
 	updateEdgeEndpointsForDrag() {
-		for (const edge of this._edges.values()) {
-			if (!edge.autoUpdateEndpoints) continue;
-			const fromNode = this._nodes.get(edge.from.nodeId);
-			const toNode = this._nodes.get(edge.to.nodeId);
-			if (fromNode === void 0 || toNode === void 0) continue;
-			let fromPoint;
-			let toPoint;
-			let fromDir;
-			let toDir;
-			if (edge.from.portId) {
-				const anchorId = edge.from.portId.slice(ANCHOR_PORT_PREFIX.length);
-				const anchorPoint = fromNode.getAnchorPointById(anchorId);
-				if (anchorPoint) {
-					fromPoint = anchorPoint;
-					fromDir = anchorId.split(":")[0];
-				} else fromPoint = fromNode.getCenter();
-			} else if (edge.from.outlineParam !== void 0) {
-				fromPoint = fromNode.getConnectionPointAtOutlineParam(edge.from.outlineParam);
-				fromDir = this.getDirectionFromOutlineParam(edge.from.outlineParam);
-			} else fromPoint = fromNode.getCenter();
-			if (edge.to.portId) {
-				const anchorId = edge.to.portId.slice(ANCHOR_PORT_PREFIX.length);
-				const anchorPoint = toNode.getAnchorPointById(anchorId);
-				if (anchorPoint) {
-					toPoint = anchorPoint;
-					toDir = anchorId.split(":")[0];
-				} else toPoint = toNode.getCenter();
-			} else if (edge.to.outlineParam !== void 0) {
-				toPoint = toNode.getConnectionPointAtOutlineParam(edge.to.outlineParam);
-				toDir = this.getDirectionFromOutlineParam(edge.to.outlineParam);
-			} else toPoint = toNode.getCenter();
-			edge.updateEndpoints(fromPoint, toPoint, fromDir, toDir);
-		}
-	}
-	updateEdgeEndpoints() {
-		const obstacles = this.getNodeObstacles();
-		for (const edge of this._edges.values()) {
-			if (!edge.autoUpdateEndpoints) continue;
-			const fromNode = this._nodes.get(edge.from.nodeId);
-			const toNode = this._nodes.get(edge.to.nodeId);
-			if (fromNode === void 0 || toNode === void 0) continue;
-			if (edge.lockAnchors && edge.from.outlineParam === void 0) {
-				if (!edge.from.portId) {
-					const anchor = fromNode.getNearestAnchor(toNode.getCenter());
-					if (anchor) edge.from = {
-						...edge.from,
-						portId: `${ANCHOR_PORT_PREFIX}${anchor.id}`
-					};
-				}
-			}
-			if (edge.lockAnchors && edge.to.outlineParam === void 0) {
-				if (!edge.to.portId) {
-					const anchor = toNode.getNearestAnchor(fromNode.getCenter());
-					if (anchor) edge.to = {
-						...edge.to,
-						portId: `${ANCHOR_PORT_PREFIX}${anchor.id}`
-					};
-				}
-			}
-			let fromPoint;
-			let toPoint;
-			let fromDir;
-			let toDir;
-			if (edge.from.portId) {
-				const anchorId = edge.from.portId.slice(ANCHOR_PORT_PREFIX.length);
-				const anchorPoint = fromNode.getAnchorPointById(anchorId);
-				if (anchorPoint) {
-					fromPoint = anchorPoint;
-					fromDir = anchorId.split(":")[0];
-				} else fromPoint = fromNode.getCenter();
-			} else if (edge.from.outlineParam !== void 0) {
-				fromPoint = fromNode.getConnectionPointAtOutlineParam(edge.from.outlineParam);
-				fromDir = this.getDirectionFromOutlineParam(edge.from.outlineParam);
-			} else fromPoint = fromNode.getCenter();
-			if (edge.to.portId) {
-				const anchorId = edge.to.portId.slice(ANCHOR_PORT_PREFIX.length);
-				const anchorPoint = toNode.getAnchorPointById(anchorId);
-				if (anchorPoint) {
-					toPoint = anchorPoint;
-					toDir = anchorId.split(":")[0];
-				} else toPoint = toNode.getCenter();
-			} else if (edge.to.outlineParam !== void 0) {
-				toPoint = toNode.getConnectionPointAtOutlineParam(edge.to.outlineParam);
-				toDir = this.getDirectionFromOutlineParam(edge.to.outlineParam);
-			} else toPoint = toNode.getCenter();
-			edge.updateEndpoints(fromPoint, toPoint, fromDir, toDir, { obstacles });
-		}
+		this.edgeEndpointUpdater.updateForDrag();
 	}
 	getNodeObstacles() {
 		if (this._nodeObstaclesCache !== null) return this._nodeObstaclesCache;
@@ -7414,56 +8101,6 @@ var DiagramRenderer = class extends EventEmitter {
 		}));
 		return this._nodeObstaclesCache;
 	}
-	getDirectionFromOutlineParam(param) {
-		const p = (param % 1 + 1) % 1;
-		if (p < .25) return "top";
-		if (p < .5) return "right";
-		if (p < .75) return "bottom";
-		return "left";
-	}
-	renderScrollbars(ctx) {
-		const metrics = this.getScrollbarMetrics();
-		if (!metrics) return;
-		const alpha = this.getScrollbarAlpha(this.frameTime);
-		this.lastScrollbarAlpha = alpha;
-		if (alpha <= .001) return;
-		const colors = this.resolveScrollbarColors();
-		const drawRoundedRect = (x, y, w, h, r) => {
-			drawRoundedRectPath(ctx, x, y, w, h, r);
-		};
-		ctx.save();
-		ctx.setTransform(this.devicePixelRatio, 0, 0, this.devicePixelRatio, 0, 0);
-		ctx.globalAlpha = alpha;
-		if (metrics.horizontal) {
-			const isHovered = this.scrollbarHoveredAxis === "horizontal";
-			const isActive = this.scrollbarActiveAxis === "horizontal";
-			const thickness = isHovered || isActive ? this.scrollbar.hoverThickness : this.scrollbar.thickness;
-			const trackY = metrics.horizontal.trackY + (metrics.horizontal.thickness - thickness) / 2;
-			const radius = thickness / 2;
-			const thumbColor = isActive ? colors.thumbActive : isHovered ? colors.thumbHover : colors.thumb;
-			ctx.fillStyle = colors.track;
-			drawRoundedRect(metrics.horizontal.trackX, trackY, metrics.horizontal.trackLength, thickness, radius);
-			ctx.fill();
-			ctx.fillStyle = thumbColor;
-			drawRoundedRect(metrics.horizontal.trackX + metrics.horizontal.thumbOffset, trackY, metrics.horizontal.thumbLength, thickness, radius);
-			ctx.fill();
-		}
-		if (metrics.vertical) {
-			const isHovered = this.scrollbarHoveredAxis === "vertical";
-			const isActive = this.scrollbarActiveAxis === "vertical";
-			const thickness = isHovered || isActive ? this.scrollbar.hoverThickness : this.scrollbar.thickness;
-			const trackX = metrics.vertical.trackX + (metrics.vertical.thickness - thickness) / 2;
-			const radius = thickness / 2;
-			const thumbColor = isActive ? colors.thumbActive : isHovered ? colors.thumbHover : colors.thumb;
-			ctx.fillStyle = colors.track;
-			drawRoundedRect(trackX, metrics.vertical.trackY, thickness, metrics.vertical.trackLength, radius);
-			ctx.fill();
-			ctx.fillStyle = thumbColor;
-			drawRoundedRect(trackX, metrics.vertical.trackY + metrics.vertical.thumbOffset, thickness, metrics.vertical.thumbLength, radius);
-			ctx.fill();
-		}
-		ctx.restore();
-	}
 	getContentBounds() {
 		return getContentBounds({
 			nodes: this._nodes.values(),
@@ -7471,348 +8108,69 @@ var DiagramRenderer = class extends EventEmitter {
 			groups: this._groups.values()
 		});
 	}
-	getViewportBounds() {
-		return {
-			x: -this._offsetX / this._zoom,
-			y: -this._offsetY / this._zoom,
-			width: this.options.width / this._zoom,
-			height: this.options.height / this._zoom
-		};
-	}
 	notifyScrollbarInteraction() {
-		this.scrollbarLastInteractionAt = performance.now();
-		this.markDirty();
+		this.scrollbarController.notifyInteraction();
 	}
 	setScrollbarActiveAxis(axis) {
-		if (this.scrollbarActiveAxis === axis) return;
-		this.scrollbarActiveAxis = axis;
-		if (axis !== null) this.notifyScrollbarInteraction();
-		else this.markDirty();
+		this.scrollbarController.setActiveAxis(axis);
 	}
 	updateScrollbarHover(screenX, screenY) {
-		const axis = this.hitTestScrollbarArea(screenX, screenY);
-		if (this.scrollbarHoveredAxis !== axis) {
-			this.scrollbarHoveredAxis = axis;
-			this.markDirty();
-			if (axis !== null) this.notifyScrollbarInteraction();
-		}
-		return axis !== null;
+		return this.scrollbarController.updateHover(screenX, screenY);
 	}
 	clearScrollbarHover() {
-		if (this.scrollbarHoveredAxis !== null) {
-			this.scrollbarHoveredAxis = null;
-			this.markDirty();
-		}
+		this.scrollbarController.clearHover();
 	}
 	hitTestScrollbarThumb(screenX, screenY) {
-		const metrics = this.getScrollbarMetrics();
-		if (!metrics) return null;
-		const localPoint = this.screenToCanvas(screenX, screenY);
-		if (!localPoint) return null;
-		const { x, y } = localPoint;
-		const hitPadding = this.scrollbar.hitAreaPadding;
-		if (metrics.horizontal) {
-			const thumbStartX = metrics.horizontal.trackX + metrics.horizontal.thumbOffset;
-			if (x >= thumbStartX - hitPadding && x <= thumbStartX + metrics.horizontal.thumbLength + hitPadding && y >= metrics.horizontal.trackY - hitPadding && y <= metrics.horizontal.trackY + metrics.horizontal.thickness + hitPadding) return {
-				axis: "horizontal",
-				pointerOffset: x - thumbStartX
-			};
-		}
-		if (metrics.vertical) {
-			const thumbStartY = metrics.vertical.trackY + metrics.vertical.thumbOffset;
-			if (x >= metrics.vertical.trackX - hitPadding && x <= metrics.vertical.trackX + metrics.vertical.thickness + hitPadding && y >= thumbStartY - hitPadding && y <= thumbStartY + metrics.vertical.thumbLength + hitPadding) return {
-				axis: "vertical",
-				pointerOffset: y - thumbStartY
-			};
-		}
-		return null;
+		return this.scrollbarController.hitTestThumb(screenX, screenY);
 	}
 	dragScrollbarThumb(axis, screenX, screenY, pointerOffset) {
-		const metrics = this.getScrollbarMetrics();
-		if (!metrics) return false;
-		const localPoint = this.screenToCanvas(screenX, screenY);
-		if (!localPoint) return false;
-		if (axis === "horizontal" && metrics.horizontal) {
-			const travel = Math.max(0, metrics.horizontal.trackLength - metrics.horizontal.thumbLength);
-			const desiredThumbOffset = localPoint.x - metrics.horizontal.trackX - pointerOffset;
-			const clampedThumbOffset = Math.min(Math.max(desiredThumbOffset, 0), travel);
-			const scrollX = travel > 0 && metrics.horizontal.maxScroll > 0 ? clampedThumbOffset / travel * metrics.horizontal.maxScroll : 0;
-			this.offsetX = -(metrics.contentBounds.x + scrollX) * this._zoom;
-			this.notifyScrollbarInteraction();
-			return true;
-		}
-		if (axis === "vertical" && metrics.vertical) {
-			const travel = Math.max(0, metrics.vertical.trackLength - metrics.vertical.thumbLength);
-			const desiredThumbOffset = localPoint.y - metrics.vertical.trackY - pointerOffset;
-			const clampedThumbOffset = Math.min(Math.max(desiredThumbOffset, 0), travel);
-			const scrollY = travel > 0 && metrics.vertical.maxScroll > 0 ? clampedThumbOffset / travel * metrics.vertical.maxScroll : 0;
-			this.offsetY = -(metrics.contentBounds.y + scrollY) * this._zoom;
-			this.notifyScrollbarInteraction();
-			return true;
-		}
-		return false;
+		return this.scrollbarController.dragThumb(axis, screenX, screenY, pointerOffset);
 	}
 	clickScrollbarTrack(screenX, screenY) {
-		const metrics = this.getScrollbarMetrics();
-		if (!metrics) return false;
-		const localPoint = this.screenToCanvas(screenX, screenY);
-		if (!localPoint) return false;
-		if (metrics.horizontal) {
-			const { trackX, trackY, trackLength, thumbOffset, thumbLength, maxScroll } = metrics.horizontal;
-			if (localPoint.x >= trackX && localPoint.x <= trackX + trackLength && localPoint.y >= trackY && localPoint.y <= trackY + metrics.horizontal.thickness) {
-				const thumbStart = trackX + thumbOffset;
-				const thumbEnd = thumbStart + thumbLength;
-				if (localPoint.x < thumbStart || localPoint.x > thumbEnd) {
-					const direction = localPoint.x < thumbStart ? -1 : 1;
-					const step = metrics.viewportBounds.width * this.scrollbar.pageScrollRatio * direction;
-					const currentScrollX = Math.min(Math.max(metrics.viewportBounds.x - metrics.contentBounds.x, 0), maxScroll);
-					const nextScrollX = Math.min(Math.max(currentScrollX + step, 0), maxScroll);
-					this.offsetX = -(metrics.contentBounds.x + nextScrollX) * this.zoom;
-					this.notifyScrollbarInteraction();
-					return true;
-				}
-			}
-		}
-		if (metrics.vertical) {
-			const { trackX, trackY, trackLength, thumbOffset, thumbLength, maxScroll } = metrics.vertical;
-			if (localPoint.x >= trackX && localPoint.x <= trackX + metrics.vertical.thickness && localPoint.y >= trackY && localPoint.y <= trackY + trackLength) {
-				const thumbStart = trackY + thumbOffset;
-				const thumbEnd = thumbStart + thumbLength;
-				if (localPoint.y < thumbStart || localPoint.y > thumbEnd) {
-					const direction = localPoint.y < thumbStart ? -1 : 1;
-					const step = metrics.viewportBounds.height * this.scrollbar.pageScrollRatio * direction;
-					const currentScrollY = Math.min(Math.max(metrics.viewportBounds.y - metrics.contentBounds.y, 0), maxScroll);
-					const nextScrollY = Math.min(Math.max(currentScrollY + step, 0), maxScroll);
-					this.offsetY = -(metrics.contentBounds.y + nextScrollY) * this.zoom;
-					this.notifyScrollbarInteraction();
-					return true;
-				}
-			}
-		}
-		return false;
-	}
-	scrollViewportBy(screenDx, screenDy) {
-		const scrollState = this.getScrollState();
-		if (!scrollState) return false;
-		const worldDx = screenDx / this.zoom;
-		const worldDy = screenDy / this.zoom;
-		const currentViewportX = scrollState.viewportBounds.x;
-		const currentViewportY = scrollState.viewportBounds.y;
-		const maxScrollX = Math.max(0, scrollState.contentBounds.width - scrollState.viewportBounds.width);
-		const maxScrollY = Math.max(0, scrollState.contentBounds.height - scrollState.viewportBounds.height);
-		const nextViewportX = Math.min(Math.max(currentViewportX + worldDx, scrollState.contentBounds.x), scrollState.contentBounds.x + maxScrollX);
-		const nextViewportY = Math.min(Math.max(currentViewportY + worldDy, scrollState.contentBounds.y), scrollState.contentBounds.y + maxScrollY);
-		this.offsetX = -nextViewportX * this.zoom;
-		this.offsetY = -nextViewportY * this.zoom;
-		this.notifyScrollbarInteraction();
-		return true;
-	}
-	scrollViewportToStart() {
-		const scrollState = this.getScrollState();
-		if (!scrollState) return false;
-		this.offsetX = -scrollState.contentBounds.x * this.zoom;
-		this.offsetY = -scrollState.contentBounds.y * this.zoom;
-		this.notifyScrollbarInteraction();
-		return true;
-	}
-	scrollViewportToEnd() {
-		const scrollState = this.getScrollState();
-		if (!scrollState) return false;
-		const maxScrollX = Math.max(0, scrollState.contentBounds.width - scrollState.viewportBounds.width);
-		const maxScrollY = Math.max(0, scrollState.contentBounds.height - scrollState.viewportBounds.height);
-		const targetViewportX = scrollState.contentBounds.x + maxScrollX;
-		const targetViewportY = scrollState.contentBounds.y + maxScrollY;
-		this.offsetX = -targetViewportX * this.zoom;
-		this.offsetY = -targetViewportY * this.zoom;
-		this.notifyScrollbarInteraction();
-		return true;
-	}
-	beginOverlayDrag(screenX, screenY) {
-		for (const plugin of this.plugins) {
-			const interactivePlugin = plugin;
-			if (!interactivePlugin.beginOverlayDrag) continue;
-			const payload = interactivePlugin.beginOverlayDrag(this, screenX, screenY);
-			if (payload !== null && payload !== void 0) return {
-				plugin: interactivePlugin,
-				payload
-			};
-		}
-		return null;
-	}
-	/**
-	* Точка (client / screen) попадает в оверлей, который не должен «пробрасывать» hit-test в диаграмму.
-	*/
-	blocksDiagramPointerAtScreen(screenX, screenY) {
-		for (const plugin of this.plugins) if (plugin.blocksDiagramPointerAtScreen?.(this, screenX, screenY)) return true;
-		return false;
-	}
-	updateOverlayDrag(session, screenX, screenY) {
-		return session.plugin.updateOverlayDrag?.(this, screenX, screenY, session.payload) ?? false;
-	}
-	endOverlayDrag(session) {
-		session.plugin.endOverlayDrag?.(this, session.payload);
-	}
-	screenToCanvas(screenX, screenY) {
-		const rect = this._canvasRect ?? this.canvas.getBoundingClientRect();
-		if (rect.width <= 0 || rect.height <= 0) return null;
-		const scaleX = rect.width / this.options.width;
-		const scaleY = rect.height / this.options.height;
-		return {
-			x: (screenX - rect.left) / scaleX,
-			y: (screenY - rect.top) / scaleY
-		};
-	}
-	getScrollbarMetrics() {
-		if (!this.scrollbar.enabled) return null;
-		const rawContentBounds = this.getContentBounds();
-		if (!rawContentBounds) return null;
-		const viewportBounds = this.getViewportBounds();
-		const unionMinX = Math.min(rawContentBounds.x, viewportBounds.x);
-		const unionMinY = Math.min(rawContentBounds.y, viewportBounds.y);
-		const unionMaxX = Math.max(rawContentBounds.x + rawContentBounds.width, viewportBounds.x + viewportBounds.width);
-		const unionMaxY = Math.max(rawContentBounds.y + rawContentBounds.height, viewportBounds.y + viewportBounds.height);
-		const contentBounds = {
-			x: unionMinX,
-			y: unionMinY,
-			width: unionMaxX - unionMinX,
-			height: unionMaxY - unionMinY
-		};
-		const contentWidth = Math.max(contentBounds.width, 1);
-		const contentHeight = Math.max(contentBounds.height, 1);
-		const showHorizontal = contentWidth > viewportBounds.width + .01;
-		const showVertical = contentHeight > viewportBounds.height + .01;
-		if (!showHorizontal && !showVertical) return null;
-		const { width, height } = this.options;
-		const padding = 6;
-		const thickness = this.scrollbar.thickness;
-		const spacing = 4;
-		const minThumbLength = this.scrollbar.minThumbLength;
-		const availableWidth = width - padding * 2;
-		const availableHeight = height - padding * 2;
-		if (availableWidth <= 0 || availableHeight <= 0) return null;
-		const horizontalTrackLength = Math.max(0, availableWidth - (showVertical ? thickness + spacing : 0));
-		const verticalTrackLength = Math.max(0, availableHeight - (showHorizontal ? thickness + spacing : 0));
-		const horizontalTrackX = padding;
-		const horizontalTrackY = height - padding - thickness;
-		const verticalTrackX = width - padding - thickness;
-		const verticalTrackY = padding;
-		let horizontal = null;
-		if (showHorizontal && horizontalTrackLength > 0) {
-			const maxScrollX = Math.max(0, contentWidth - viewportBounds.width);
-			const scrollX = Math.min(Math.max(viewportBounds.x - contentBounds.x, 0), maxScrollX);
-			const ratioX = viewportBounds.width / contentWidth;
-			const thumbLength = Math.min(horizontalTrackLength, Math.max(minThumbLength, horizontalTrackLength * ratioX));
-			const travel = Math.max(0, horizontalTrackLength - thumbLength);
-			horizontal = {
-				trackX: horizontalTrackX,
-				trackY: horizontalTrackY,
-				trackLength: horizontalTrackLength,
-				thickness,
-				thumbLength,
-				thumbOffset: maxScrollX > 0 ? scrollX / maxScrollX * travel : 0,
-				maxScroll: maxScrollX
-			};
-		}
-		let vertical = null;
-		if (showVertical && verticalTrackLength > 0) {
-			const maxScrollY = Math.max(0, contentHeight - viewportBounds.height);
-			const scrollY = Math.min(Math.max(viewportBounds.y - contentBounds.y, 0), maxScrollY);
-			const ratioY = viewportBounds.height / contentHeight;
-			const thumbLength = Math.min(verticalTrackLength, Math.max(minThumbLength, verticalTrackLength * ratioY));
-			const travel = Math.max(0, verticalTrackLength - thumbLength);
-			vertical = {
-				trackX: verticalTrackX,
-				trackY: verticalTrackY,
-				trackLength: verticalTrackLength,
-				thickness,
-				thumbLength,
-				thumbOffset: maxScrollY > 0 ? scrollY / maxScrollY * travel : 0,
-				maxScroll: maxScrollY
-			};
-		}
-		if (!horizontal && !vertical) return null;
-		return {
-			contentBounds,
-			viewportBounds,
-			thickness: this.scrollbar.thickness,
-			horizontal,
-			vertical
-		};
-	}
-	resolveScrollbarOptions(options) {
-		const fallbackEnabled = options.scrollbarOverlay ?? DEFAULT_SCROLLBAR_OPTIONS.enabled;
-		const resolved = {
-			...DEFAULT_SCROLLBAR_OPTIONS,
-			enabled: fallbackEnabled
-		};
-		if (typeof options.scrollbar === "boolean") {
-			resolved.enabled = options.scrollbar;
-			return resolved;
-		}
-		if (options.scrollbar) return {
-			...resolved,
-			...options.scrollbar
-		};
-		return resolved;
-	}
-	resolveScrollbarColors() {
-		const fallback = this.styleManager?.theme.name === "dark" ? {
-			track: "rgba(148, 163, 184, 0.22)",
-			thumb: "rgba(226, 232, 240, 0.68)",
-			thumbHover: "rgba(226, 232, 240, 0.86)",
-			thumbActive: "rgba(248, 250, 252, 0.96)"
-		} : {
-			track: "rgba(15, 23, 42, 0.16)",
-			thumb: "rgba(51, 65, 85, 0.7)",
-			thumbHover: "rgba(30, 41, 59, 0.82)",
-			thumbActive: "rgba(15, 23, 42, 0.9)"
-		};
-		return {
-			track: this.scrollbar.trackColor || fallback.track,
-			thumb: this.scrollbar.thumbColor || fallback.thumb,
-			thumbHover: this.scrollbar.thumbHoverColor || fallback.thumbHover,
-			thumbActive: this.scrollbar.thumbActiveColor || fallback.thumbActive
-		};
-	}
-	getScrollbarAlpha(now) {
-		if (!this.scrollbar.autoHide) return 1;
-		if (this.scrollbarActiveAxis !== null || this.scrollbarHoveredAxis !== null) return 1;
-		const elapsed = now - this.scrollbarLastInteractionAt;
-		if (elapsed <= this.scrollbar.autoHideDelay) return 1;
-		if (this.scrollbar.fadeDuration <= 0) return 0;
-		const fadeProgress = (elapsed - this.scrollbar.autoHideDelay) / this.scrollbar.fadeDuration;
-		return Math.max(0, 1 - fadeProgress);
-	}
-	hitTestScrollbarArea(screenX, screenY) {
-		const metrics = this.getScrollbarMetrics();
-		if (!metrics) return null;
-		const localPoint = this.screenToCanvas(screenX, screenY);
-		if (!localPoint) return null;
-		const hitPadding = this.scrollbar.hitAreaPadding;
-		if (metrics.horizontal) {
-			if (localPoint.x >= metrics.horizontal.trackX - hitPadding && localPoint.x <= metrics.horizontal.trackX + metrics.horizontal.trackLength + hitPadding && localPoint.y >= metrics.horizontal.trackY - hitPadding && localPoint.y <= metrics.horizontal.trackY + metrics.horizontal.thickness + hitPadding) return "horizontal";
-		}
-		if (metrics.vertical) {
-			if (localPoint.x >= metrics.vertical.trackX - hitPadding && localPoint.x <= metrics.vertical.trackX + metrics.vertical.thickness + hitPadding && localPoint.y >= metrics.vertical.trackY - hitPadding && localPoint.y <= metrics.vertical.trackY + metrics.vertical.trackLength + hitPadding) return "vertical";
+		return this.scrollbarController.clickTrack(screenX, screenY);
+	}
+	scrollViewportBy(screenDx, screenDy) {
+		return this.scrollbarController.scrollBy(screenDx, screenDy);
+	}
+	scrollViewportToStart() {
+		return this.scrollbarController.scrollToStart();
+	}
+	scrollViewportToEnd() {
+		return this.scrollbarController.scrollToEnd();
+	}
+	beginOverlayDrag(screenX, screenY) {
+		for (const plugin of this.plugins) {
+			const interactivePlugin = plugin;
+			if (!interactivePlugin.beginOverlayDrag) continue;
+			const payload = interactivePlugin.beginOverlayDrag(this, screenX, screenY);
+			if (payload !== null && payload !== void 0) return {
+				plugin: interactivePlugin,
+				payload
+			};
 		}
 		return null;
 	}
-	getScrollState() {
-		const rawContentBounds = this.getContentBounds();
-		if (!rawContentBounds) return null;
-		const viewportBounds = this.getViewportBounds();
-		const unionMinX = Math.min(rawContentBounds.x, viewportBounds.x);
-		const unionMinY = Math.min(rawContentBounds.y, viewportBounds.y);
-		const unionMaxX = Math.max(rawContentBounds.x + rawContentBounds.width, viewportBounds.x + viewportBounds.width);
-		const unionMaxY = Math.max(rawContentBounds.y + rawContentBounds.height, viewportBounds.y + viewportBounds.height);
+	/**
+	* Точка (client / screen) попадает в оверлей, который не должен «пробрасывать» hit-test в диаграмму.
+	*/
+	blocksDiagramPointerAtScreen(screenX, screenY) {
+		for (const plugin of this.plugins) if (plugin.blocksDiagramPointerAtScreen?.(this, screenX, screenY)) return true;
+		return false;
+	}
+	updateOverlayDrag(session, screenX, screenY) {
+		return session.plugin.updateOverlayDrag?.(this, screenX, screenY, session.payload) ?? false;
+	}
+	endOverlayDrag(session) {
+		session.plugin.endOverlayDrag?.(this, session.payload);
+	}
+	screenToCanvas(screenX, screenY) {
+		const rect = this._canvasRect ?? this.canvas.getBoundingClientRect();
+		if (rect.width <= 0 || rect.height <= 0) return null;
+		const scaleX = rect.width / this.options.width;
+		const scaleY = rect.height / this.options.height;
 		return {
-			contentBounds: {
-				x: unionMinX,
-				y: unionMinY,
-				width: unionMaxX - unionMinX,
-				height: unionMaxY - unionMinY
-			},
-			viewportBounds
+			x: (screenX - rect.left) / scaleX,
+			y: (screenY - rect.top) / scaleY
 		};
 	}
 };
@@ -7930,8 +8288,10 @@ var SearchManager = class {
 		for (const edge of this.renderer.edges.values()) {
 			if (scope === "nodes") continue;
 			const matchesEdge = this.matchesEdge(edge, options);
-			const fromVisible = this.renderer.getNode(edge.from.nodeId)?.visible ?? true;
-			const toVisible = this.renderer.getNode(edge.to.nodeId)?.visible ?? true;
+			const fromId = edge.from.nodeId;
+			const toId = edge.to.nodeId;
+			const fromVisible = fromId ? this.renderer.getNode(fromId)?.visible ?? true : true;
+			const toVisible = toId ? this.renderer.getNode(toId)?.visible ?? true : true;
 			edge.visible = matchesEdge && fromVisible && toVisible;
 		}
 		this.renderer.markDirty();
@@ -8032,6 +8392,7 @@ function generatePortId() {
 }
 /**
 * Reset port ID counter (for testing)
+* @internal
 */
 function resetPortIdCounter() {
 	portIdCounter = 1;
@@ -8159,6 +8520,61 @@ var Port = class {
 	}
 };
 //#endregion
+//#region src/utils/svgTint.ts
+/**
+* SVG tinting utilities — shared between NodeImage and CIcon.
+*/
+function styleSetColor(style, key, color) {
+	if (new RegExp(`${key}\\s*:`).test(style)) return style.replace(new RegExp(`${key}\\s*:[^;]+`), `${key}:${color}`);
+	return `${style}${style.trim().endsWith(";") || style.trim() === "" ? "" : ";"}${key}:${color};`;
+}
+/**
+* Tint all stroke/fill attributes and inline styles in an SVG string.
+*/
+function tintSvg(svgText, strokeColor, fillColor) {
+	if (!strokeColor && !fillColor) return svgText;
+	const root = new DOMParser().parseFromString(svgText, "image/svg+xml").documentElement;
+	if (!root || root.nodeName.toLowerCase() === "parsererror") return svgText;
+	const all = [root, ...Array.from(root.querySelectorAll("*"))];
+	for (const el of all) {
+		const stroke = el.getAttribute("stroke");
+		const fill = el.getAttribute("fill");
+		if (strokeColor && (stroke === null || stroke.toLowerCase() !== "none")) el.setAttribute("stroke", strokeColor);
+		if (fillColor && (fill === null || fill.toLowerCase() !== "none")) el.setAttribute("fill", fillColor);
+		const style = el.getAttribute("style");
+		if (style) {
+			let next = style;
+			if (strokeColor && /stroke\s*:\s*(?!none)/.test(style)) next = styleSetColor(next, "stroke", strokeColor);
+			if (fillColor && /fill\s*:\s*(?!none)/.test(style)) next = styleSetColor(next, "fill", fillColor);
+			if (next !== style) el.setAttribute("style", next);
+		}
+	}
+	return new XMLSerializer().serializeToString(root);
+}
+/**
+* Check if a string contains inline SVG markup.
+*/
+function isSvgMarkup(value) {
+	const trimmed = value.trim().toLowerCase();
+	return trimmed.startsWith("<svg") || trimmed.includes("<svg");
+}
+/**
+* Convert SVG markup to a data URL for use in HTMLImageElement.src.
+*/
+function svgToDataUrl(svg) {
+	return `data:image/svg+xml;utf8,${encodeURIComponent(svg).replace(/%0A/g, "").replace(/%0D/g, "").replace(/%09/g, " ").replace(/%20/g, " ")}`;
+}
+/**
+* Check if a URL points to an SVG file.
+*/
+function isSvgUrl(url) {
+	try {
+		return new URL(url, "http://localhost").pathname.endsWith(".svg");
+	} catch {
+		return url.endsWith(".svg");
+	}
+}
+//#endregion
 //#region src/utils/LRUCache.ts
 /**
 * LRU (Least Recently Used) cache implementation
@@ -8225,66 +8641,174 @@ var LRUCache = class {
 	}
 };
 //#endregion
-//#region src/utils/svgTint.ts
+//#region src/utils/svgAssetLoader.ts
+/** Shared LRU for fetched SVG text (NodeImage, CIcon, etc.). */
+var svgTextCache = new LRUCache(100);
 /**
-* SVG tinting utilities — shared between NodeImage and CIcon.
+* Fetch SVG text with a shared LRU cache.
 */
-function styleSetColor(style, key, color) {
-	if (new RegExp(`${key}\\s*:`).test(style)) return style.replace(new RegExp(`${key}\\s*:[^;]+`), `${key}:${color}`);
-	return `${style}${style.trim().endsWith(";") || style.trim() === "" ? "" : ";"}${key}:${color};`;
+function fetchSvgText(url) {
+	let promise = svgTextCache.get(url);
+	if (!promise) {
+		promise = fetch(url).then((r) => r.ok ? r.text() : "").catch(() => "");
+		svgTextCache.set(url, promise);
+	}
+	return promise;
 }
 /**
-* Tint all stroke/fill attributes and inline styles in an SVG string.
+* Synchronously read SVG from a URL (for SvgExporter). Uses cached promise result when already resolved.
 */
-function tintSvg(svgText, strokeColor, fillColor) {
-	if (!strokeColor && !fillColor) return svgText;
-	const root = new DOMParser().parseFromString(svgText, "image/svg+xml").documentElement;
-	if (!root || root.nodeName.toLowerCase() === "parsererror") return svgText;
-	const all = [root, ...Array.from(root.querySelectorAll("*"))];
-	for (const el of all) {
-		const stroke = el.getAttribute("stroke");
-		const fill = el.getAttribute("fill");
-		if (strokeColor && (stroke === null || stroke.toLowerCase() !== "none")) el.setAttribute("stroke", strokeColor);
-		if (fillColor && (fill === null || fill.toLowerCase() !== "none")) el.setAttribute("fill", fillColor);
-		const style = el.getAttribute("style");
-		if (style) {
-			let next = style;
-			if (strokeColor && /stroke\s*:\s*(?!none)/.test(style)) next = styleSetColor(next, "stroke", strokeColor);
-			if (fillColor && /fill\s*:\s*(?!none)/.test(style)) next = styleSetColor(next, "fill", fillColor);
-			if (next !== style) el.setAttribute("style", next);
-		}
+function readSvgFromUrlSync(url) {
+	if (typeof XMLHttpRequest === "undefined") return null;
+	try {
+		const xhr = new XMLHttpRequest();
+		xhr.open("GET", url, false);
+		xhr.send();
+		if (xhr.status >= 200 && xhr.status < 300) return xhr.responseText || null;
+	} catch {}
+	return null;
+}
+/**
+* Resolve a source string to an href suitable for Image/SVG (async, with tint).
+*/
+async function resolveTintedSvgDataUrl(source, options = {}) {
+	const { strokeColor, fillColor } = options;
+	if (isSvgMarkup(source)) return svgToDataUrl(tintSvg(source, strokeColor, fillColor));
+	if (isSvgUrl(source) || source.toLowerCase().endsWith(".svg")) {
+		const svgText = await fetchSvgText(source);
+		if (!svgText) return null;
+		return svgToDataUrl(tintSvg(svgText, strokeColor, fillColor));
 	}
-	return new XMLSerializer().serializeToString(root);
+	return null;
 }
 /**
-* Check if a string contains inline SVG markup.
+* Resolve a source to a tinted data URL synchronously (SvgExporter path).
 */
-function isSvgMarkup(value) {
-	const trimmed = value.trim().toLowerCase();
-	return trimmed.startsWith("<svg") || trimmed.includes("<svg");
+function resolveTintedSvgDataUrlSync(source, options = {}) {
+	const { strokeColor, fillColor } = options;
+	if (isSvgMarkup(source)) return svgToDataUrl(tintSvg(source, strokeColor, fillColor));
+	if (source.toLowerCase().endsWith(".svg")) {
+		const svgText = readSvgFromUrlSync(source);
+		if (!svgText) return null;
+		return svgToDataUrl(tintSvg(svgText, strokeColor, fillColor));
+	}
+	return null;
 }
+//#endregion
+//#region src/utils/iconLayout.ts
 /**
-* Convert SVG markup to a data URL for use in HTMLImageElement.src.
+* Icon zone size including inset padding around the image.
 */
-function svgToDataUrl(svg) {
-	return `data:image/svg+xml;utf8,${encodeURIComponent(svg).replace(/%0A/g, "").replace(/%0D/g, "").replace(/%09/g, " ").replace(/%20/g, " ")}`;
+function getIconBoxSize(imageSize, inset) {
+	return {
+		width: imageSize.width + inset * 2,
+		height: imageSize.height + inset * 2
+	};
 }
 /**
-* Check if a URL points to an SVG file.
+* Bounds of the icon zone within a node, based on placement.
 */
-function isSvgUrl(url) {
-	try {
-		return new URL(url, "http://localhost").pathname.endsWith(".svg");
-	} catch {
-		return url.endsWith(".svg");
+function getIconBounds(bounds, iconBoxSize, placement, inset) {
+	switch (placement) {
+		case "top": return {
+			x: bounds.x,
+			y: bounds.y,
+			width: bounds.width,
+			height: iconBoxSize.height
+		};
+		case "bottom": return {
+			x: bounds.x,
+			y: bounds.y + bounds.height - iconBoxSize.height,
+			width: bounds.width,
+			height: iconBoxSize.height
+		};
+		case "left": return {
+			x: bounds.x,
+			y: bounds.y,
+			width: iconBoxSize.width,
+			height: bounds.height
+		};
+		case "right": return {
+			x: bounds.x + bounds.width - iconBoxSize.width,
+			y: bounds.y,
+			width: iconBoxSize.width,
+			height: bounds.height
+		};
+		case "top-left": return {
+			x: bounds.x + inset,
+			y: bounds.y + inset,
+			width: iconBoxSize.width,
+			height: iconBoxSize.height
+		};
+		case "top-right": return {
+			x: bounds.x + bounds.width - iconBoxSize.width - inset,
+			y: bounds.y + inset,
+			width: iconBoxSize.width,
+			height: iconBoxSize.height
+		};
+		case "bottom-left": return {
+			x: bounds.x + inset,
+			y: bounds.y + bounds.height - iconBoxSize.height - inset,
+			width: iconBoxSize.width,
+			height: iconBoxSize.height
+		};
+		case "bottom-right": return {
+			x: bounds.x + bounds.width - iconBoxSize.width - inset,
+			y: bounds.y + bounds.height - iconBoxSize.height - inset,
+			width: iconBoxSize.width,
+			height: iconBoxSize.height
+		};
+		default: return bounds;
 	}
 }
+/**
+* Compute the draw rectangle for an icon image inside its zone bounds.
+*/
+function computeIconDrawRect(bounds, opts, imageSize, inset) {
+	const fit = opts.fit ?? "none";
+	const scaleWithBounds = opts.scaleWithBounds ?? false;
+	const innerBounds = {
+		x: bounds.x + inset,
+		y: bounds.y + inset,
+		width: Math.max(0, bounds.width - inset * 2),
+		height: Math.max(0, bounds.height - inset * 2)
+	};
+	const availableWidth = Math.max(0, innerBounds.width);
+	const availableHeight = Math.max(0, innerBounds.height);
+	let drawWidth = opts.width ?? imageSize.width;
+	let drawHeight = opts.height ?? imageSize.height;
+	if (scaleWithBounds) {
+		if ((fit === "contain" || fit === "cover") && imageSize.width > 0 && imageSize.height > 0) {
+			const scaleX = availableWidth / imageSize.width;
+			const scaleY = availableHeight / imageSize.height;
+			const scale = fit === "contain" ? Math.min(scaleX, scaleY) : Math.max(scaleX, scaleY);
+			drawWidth = imageSize.width * scale;
+			drawHeight = imageSize.height * scale;
+		} else if (fit === "stretch") {
+			drawWidth = availableWidth;
+			drawHeight = availableHeight;
+		}
+	}
+	drawWidth = Math.min(Math.max(0, drawWidth), Math.max(0, availableWidth));
+	drawHeight = Math.min(Math.max(0, drawHeight), Math.max(0, availableHeight));
+	return {
+		x: innerBounds.x + (innerBounds.width - drawWidth) / 2,
+		y: innerBounds.y + (innerBounds.height - drawHeight) / 2,
+		width: drawWidth,
+		height: drawHeight
+	};
+}
+/**
+* Convenience: compute draw rect from NodeImageOptions.
+*/
+function computeIconDrawRectFromOptions(bounds, opts, imageSize, inset) {
+	return computeIconDrawRect(bounds, opts, imageSize, inset);
+}
 //#endregion
 //#region src/elements/NodeImage.ts
 function isCornerPlacement(placement) {
 	return placement === "top-left" || placement === "top-right" || placement === "bottom-left" || placement === "bottom-right";
 }
-var svgTextCache = new LRUCache(100);
 /**
 * Image helper for node rendering (supports images and inline SVG).
 */
@@ -8327,40 +8851,15 @@ var NodeImage = class {
 	render(ctx, bounds) {
 		if (!this._loaded) return;
 		const ins = this.inset;
-		const fit = this._options.fit ?? "none";
-		const scaleWithBounds = this._options.scaleWithBounds ?? false;
 		const opacity = this._options.opacity ?? 1;
-		const innerBounds = {
-			x: bounds.x + ins,
-			y: bounds.y + ins,
-			width: Math.max(0, bounds.width - ins * 2),
-			height: Math.max(0, bounds.height - ins * 2)
-		};
-		const availableWidth = Math.max(0, innerBounds.width);
-		const availableHeight = Math.max(0, innerBounds.height);
-		let drawWidth = this._options.width ?? this._naturalWidth;
-		let drawHeight = this._options.height ?? this._naturalHeight;
-		if (scaleWithBounds) {
-			if (fit === "contain" || fit === "cover") {
-				const scaleX = availableWidth / this._naturalWidth;
-				const scaleY = availableHeight / this._naturalHeight;
-				const scale = fit === "contain" ? Math.min(scaleX, scaleY) : Math.max(scaleX, scaleY);
-				drawWidth = this._naturalWidth * scale;
-				drawHeight = this._naturalHeight * scale;
-			} else if (fit === "stretch") {
-				drawWidth = availableWidth;
-				drawHeight = availableHeight;
-			}
-		}
-		const maxWidth = Math.max(0, availableWidth);
-		const maxHeight = Math.max(0, availableHeight);
-		drawWidth = Math.min(drawWidth, maxWidth);
-		drawHeight = Math.min(drawHeight, maxHeight);
-		const x = innerBounds.x + (innerBounds.width - drawWidth) / 2;
-		const y = innerBounds.y + (innerBounds.height - drawHeight) / 2;
+		const drawRect = computeIconDrawRect(bounds, this._options, {
+			width: this._naturalWidth,
+			height: this._naturalHeight
+		}, ins);
+		if (drawRect.width <= 0 || drawRect.height <= 0) return;
 		ctx.save();
 		ctx.globalAlpha = opacity;
-		ctx.drawImage(this._image, x, y, drawWidth, drawHeight);
+		ctx.drawImage(this._image, drawRect.x, drawRect.y, drawRect.width, drawRect.height);
 		ctx.restore();
 	}
 	getSize() {
@@ -8379,27 +8878,20 @@ var NodeImage = class {
 		if (source instanceof HTMLImageElement) return;
 		const version = ++this._sourceVersion;
 		if (isSvgMarkup(source)) {
-			const tinted = tintSvg(source, this._options.strokeColor, this._options.fillColor);
+			const resolvedSource = resolveTintedSvgDataUrlSync(source, {
+				strokeColor: this._options.strokeColor,
+				fillColor: this._options.fillColor
+			});
 			if (version !== this._sourceVersion) return;
-			this._image.src = svgToDataUrl(tinted);
+			this._image.src = resolvedSource ?? source;
 			return;
 		}
-		if ((!!this._options.strokeColor || !!this._options.fillColor) && source.toLowerCase().endsWith(".svg")) {
-			let svgPromise = svgTextCache.get(source);
-			if (!svgPromise) {
-				svgPromise = fetch(source).then((r) => r.ok ? r.text() : "");
-				svgTextCache.set(source, svgPromise);
-			}
-			const svgText = await svgPromise;
-			if (version !== this._sourceVersion) return;
-			if (svgText) {
-				const tinted = tintSvg(svgText, this._options.strokeColor, this._options.fillColor);
-				this._image.src = svgToDataUrl(tinted);
-				return;
-			}
-		}
+		const resolvedSource = await resolveTintedSvgDataUrl(source, {
+			strokeColor: this._options.strokeColor,
+			fillColor: this._options.fillColor
+		});
 		if (version !== this._sourceVersion) return;
-		this._image.src = source;
+		this._image.src = resolvedSource ?? source;
 	}
 	attachHandlers() {
 		if (this._image.complete && this._image.naturalWidth > 0) {
@@ -9163,65 +9655,13 @@ var Node = class extends Element {
 		if (!this._icon) return;
 		const { width, height } = this._icon.getSize();
 		if (width <= 0 || height <= 0) return;
-		const ins = this._icon.inset;
-		return {
-			width: width + ins * 2,
-			height: height + ins * 2
-		};
+		return getIconBoxSize({
+			width,
+			height
+		}, this._icon.inset);
 	}
 	getIconBounds(bounds, iconBoxSize, placement) {
-		const ins = this._icon?.inset ?? 0;
-		switch (placement) {
-			case "top": return {
-				x: bounds.x,
-				y: bounds.y,
-				width: bounds.width,
-				height: iconBoxSize.height
-			};
-			case "bottom": return {
-				x: bounds.x,
-				y: bounds.y + bounds.height - iconBoxSize.height,
-				width: bounds.width,
-				height: iconBoxSize.height
-			};
-			case "left": return {
-				x: bounds.x,
-				y: bounds.y,
-				width: iconBoxSize.width,
-				height: bounds.height
-			};
-			case "right": return {
-				x: bounds.x + bounds.width - iconBoxSize.width,
-				y: bounds.y,
-				width: iconBoxSize.width,
-				height: bounds.height
-			};
-			case "top-left": return {
-				x: bounds.x + ins,
-				y: bounds.y + ins,
-				width: iconBoxSize.width,
-				height: iconBoxSize.height
-			};
-			case "top-right": return {
-				x: bounds.x + bounds.width - iconBoxSize.width - ins,
-				y: bounds.y + ins,
-				width: iconBoxSize.width,
-				height: iconBoxSize.height
-			};
-			case "bottom-left": return {
-				x: bounds.x + ins,
-				y: bounds.y + bounds.height - iconBoxSize.height - ins,
-				width: iconBoxSize.width,
-				height: iconBoxSize.height
-			};
-			case "bottom-right": return {
-				x: bounds.x + bounds.width - iconBoxSize.width - ins,
-				y: bounds.y + bounds.height - iconBoxSize.height - ins,
-				width: iconBoxSize.width,
-				height: iconBoxSize.height
-			};
-			default: return bounds;
-		}
+		return getIconBounds(bounds, iconBoxSize, placement, this._icon?.inset ?? 0);
 	}
 	normalizeAnchorPoints(config) {
 		const normalize = (value) => {
@@ -10122,6 +10562,23 @@ var ShapeFactories = {
 	}
 };
 //#endregion
+//#region src/elements/composite/CompositeComponentBase.ts
+/**
+* Shared change notification and default bounds hit testing for composite components.
+*/
+var CompositeComponentBase = class {
+	setOnChange(cb) {
+		this._onChange = cb;
+	}
+	hitTest(point, bounds) {
+		if (this.style.visible === false) return null;
+		return point.x >= bounds.x && point.x <= bounds.x + bounds.width && point.y >= bounds.y && point.y <= bounds.y + bounds.height ? this : null;
+	}
+	markChanged() {
+		this._onChange?.();
+	}
+};
+//#endregion
 //#region src/elements/composite/CText.ts
 var DEFAULT_FONT_FAMILY = "sans-serif";
 var DEFAULT_FONT_SIZE = 14;
@@ -10131,8 +10588,9 @@ var DEFAULT_COLOR$1 = "#000000";
 * Lightweight text component for CompositeNode.
 * Renders directly via canvas ctx without delegating to TextLabel.
 */
-var CText = class {
+var CText = class extends CompositeComponentBase {
 	constructor(options) {
+		super();
 		this.type = "text";
 		this._cachedLines = null;
 		this.id = options.id;
@@ -10158,7 +10616,7 @@ var CText = class {
 		if (this._text !== value) {
 			this._text = value;
 			this._cachedLines = null;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get fontFamily() {
@@ -10167,7 +10625,7 @@ var CText = class {
 	set fontFamily(value) {
 		if (this._fontFamily !== value) {
 			this._fontFamily = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get fontWeight() {
@@ -10176,7 +10634,7 @@ var CText = class {
 	set fontWeight(value) {
 		if (this._fontWeight !== value) {
 			this._fontWeight = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get fontStyle() {
@@ -10185,7 +10643,7 @@ var CText = class {
 	set fontStyle(value) {
 		if (this._fontStyle !== value) {
 			this._fontStyle = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get fontSize() {
@@ -10194,7 +10652,7 @@ var CText = class {
 	set fontSize(value) {
 		if (this._fontSize !== value) {
 			this._fontSize = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get color() {
@@ -10203,7 +10661,7 @@ var CText = class {
 	set color(value) {
 		if (this._color !== value) {
 			this._color = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get align() {
@@ -10212,7 +10670,7 @@ var CText = class {
 	set align(value) {
 		if (this._align !== value) {
 			this._align = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get verticalAlign() {
@@ -10221,7 +10679,7 @@ var CText = class {
 	set verticalAlign(value) {
 		if (this._verticalAlign !== value) {
 			this._verticalAlign = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get maxLines() {
@@ -10230,7 +10688,7 @@ var CText = class {
 	set maxLines(value) {
 		if (this._maxLines !== value) {
 			this._maxLines = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get lineHeight() {
@@ -10248,12 +10706,9 @@ var CText = class {
 	set rotation(value) {
 		if (this._rotation !== value) {
 			this._rotation = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
-	setOnChange(cb) {
-		this._onChange = cb;
-	}
 	getFont() {
 		return `${this._fontStyle} ${this._fontWeight} ${this._fontSize}px ${this._fontFamily}`;
 	}
@@ -10265,34 +10720,16 @@ var CText = class {
 	*/
 	wrapText(ctx, maxWidth) {
 		ctx.font = this.getFont();
-		const words = this._text.split(" ");
-		const lines = [];
-		let currentLine = "";
-		for (const word of words) {
-			const testLine = currentLine ? `${currentLine} ${word}` : word;
-			if (ctx.measureText(testLine).width > maxWidth && currentLine) {
-				lines.push(currentLine);
-				currentLine = word;
-			} else currentLine = testLine;
-		}
-		if (currentLine) lines.push(currentLine);
-		if (this._maxLines !== void 0 && lines.length > this._maxLines) {
-			const truncated = lines.slice(0, this._maxLines);
-			const lastLine = truncated[truncated.length - 1];
-			if (lastLine !== void 0) truncated[truncated.length - 1] = lastLine + "…";
-			return truncated;
-		}
-		return lines;
+		return wrapMeasuredText(ctx, this._text, maxWidth, {
+			maxLines: this._maxLines,
+			appendEllipsis: true
+		});
 	}
 	measure(ctx) {
 		ctx.font = this.getFont();
 		const lineHeightPx = this.getLineHeightPx();
 		const rawLines = this._text.split("\n");
-		let maxWidth = 0;
-		for (const line of rawLines) {
-			const metrics = ctx.measureText(line);
-			if (metrics.width > maxWidth) maxWidth = metrics.width;
-		}
+		const maxWidth = measureTextLines(ctx, rawLines);
 		let lineCount = rawLines.length;
 		if (this._maxLines !== void 0 && lineCount > this._maxLines) lineCount = this._maxLines;
 		const width = maxWidth;
@@ -10363,13 +10800,8 @@ var CText = class {
 			const offsetX = xBase - (textBounds.x + textBounds.width / 2);
 			const offsetY = yStart - (textBounds.y + textBounds.height / 2);
 			for (let i = 0; i < lines.length; i++) ctx.fillText(lines[i], offsetX, offsetY + i * lineHeightPx);
-		} else for (let i = 0; i < lines.length; i++) ctx.fillText(lines[i], xBase, yStart + i * lineHeightPx);
-		ctx.restore();
-	}
-	hitTest(point, bounds) {
-		if (this.style.visible === false) return null;
-		if (point.x >= bounds.x && point.x <= bounds.x + bounds.width && point.y >= bounds.y && point.y <= bounds.y + bounds.height) return this;
-		return null;
+		} else for (let i = 0; i < lines.length; i++) ctx.fillText(lines[i], xBase, yStart + i * lineHeightPx);
+		ctx.restore();
 	}
 	serialize() {
 		const data = {
@@ -10442,12 +10874,12 @@ function escapeXml(str) {
 //#endregion
 //#region src/elements/composite/CIcon.ts
 var DEFAULT_ICON_SIZE = 24;
-var svgFetchCache = new LRUCache(100);
 /**
 * Lightweight SVG/image icon component for CompositeNode.
 */
-var CIcon = class {
+var CIcon = class extends CompositeComponentBase {
 	constructor(options) {
+		super();
 		this.type = "icon";
 		this._loaded = false;
 		this.id = options.id;
@@ -10463,10 +10895,10 @@ var CIcon = class {
 		this._image = new Image();
 		this._image.onload = () => {
 			this._loaded = true;
-			this._onChange?.();
+			this.markChanged();
 		};
 		this._image.onerror = () => {
-			this._onChange?.();
+			this.markChanged();
 		};
 		this.loadSource(this._source);
 	}
@@ -10478,7 +10910,7 @@ var CIcon = class {
 			this._source = value;
 			this._loaded = false;
 			this.loadSource(value);
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get width() {
@@ -10487,7 +10919,7 @@ var CIcon = class {
 	set width(value) {
 		if (this._width !== value) {
 			this._width = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get height() {
@@ -10496,7 +10928,7 @@ var CIcon = class {
 	set height(value) {
 		if (this._height !== value) {
 			this._height = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get backgroundColor() {
@@ -10505,7 +10937,7 @@ var CIcon = class {
 	set backgroundColor(value) {
 		if (this._backgroundColor !== value) {
 			this._backgroundColor = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get fillColor() {
@@ -10515,7 +10947,7 @@ var CIcon = class {
 		if (this._fillColor !== value) {
 			this._fillColor = value;
 			this.loadSource(this._source);
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get loaded() {
@@ -10527,31 +10959,12 @@ var CIcon = class {
 	set bindsNotationIcon(value) {
 		if (this._bindsNotationIcon !== value) {
 			this._bindsNotationIcon = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
-	setOnChange(cb) {
-		this._onChange = cb;
-	}
 	async loadSource(source) {
-		if (isSvgMarkup(source)) {
-			const tinted = this._fillColor ? tintSvg(source, void 0, this._fillColor) : source;
-			this._image.src = svgToDataUrl(tinted);
-		} else if (isSvgUrl(source) && this._fillColor) try {
-			const tinted = tintSvg(await this.fetchSvg(source), void 0, this._fillColor);
-			this._image.src = svgToDataUrl(tinted);
-		} catch {
-			this._image.src = source;
-		}
-		else this._image.src = source;
-	}
-	async fetchSvg(url) {
-		let promise = svgFetchCache.get(url);
-		if (!promise) {
-			promise = fetch(url).then((r) => r.text());
-			svgFetchCache.set(url, promise);
-		}
-		return promise;
+		const resolvedSource = await resolveTintedSvgDataUrl(source, { fillColor: this._fillColor });
+		this._image.src = resolvedSource ?? source;
 	}
 	measure(_ctx) {
 		return {
@@ -10578,11 +10991,6 @@ var CIcon = class {
 		}
 		ctx.restore();
 	}
-	hitTest(point, bounds) {
-		if (this.style.visible === false) return null;
-		if (point.x >= bounds.x && point.x <= bounds.x + bounds.width && point.y >= bounds.y && point.y <= bounds.y + bounds.height) return this;
-		return null;
-	}
 	serialize() {
 		const data = {
 			type: "icon",
@@ -10605,7 +11013,8 @@ var CIcon = class {
 		const drawHeight = Math.min(this._height, bounds.height);
 		const dx = bounds.x + (bounds.width - drawWidth) / 2;
 		const dy = bounds.y + (bounds.height - drawHeight) / 2;
-		svg += `<image href="${escapeXmlAttr(this._source)}" x="${dx}" y="${dy}" width="${drawWidth}" height="${drawHeight}" />`;
+		const source = resolveTintedSvgDataUrlSync(this._source, { fillColor: this._fillColor }) ?? this._source;
+		svg += `<image href="${escapeXmlAttr(source)}" x="${dx}" y="${dy}" width="${drawWidth}" height="${drawHeight}" />`;
 		return svg;
 	}
 };
@@ -10622,8 +11031,9 @@ var DEFAULT_THICKNESS = 1;
 * - In a column container → horizontal line
 * - In a row container → vertical line
 */
-var CDivider = class {
+var CDivider = class extends CompositeComponentBase {
 	constructor(options = {}) {
+		super();
 		this.type = "divider";
 		this.id = options.id;
 		this._color = options.color ?? DEFAULT_COLOR;
@@ -10636,7 +11046,7 @@ var CDivider = class {
 	set color(value) {
 		if (this._color !== value) {
 			this._color = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get thickness() {
@@ -10645,12 +11055,9 @@ var CDivider = class {
 	set thickness(value) {
 		if (this._thickness !== value) {
 			this._thickness = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
-	setOnChange(cb) {
-		this._onChange = cb;
-	}
 	measure(_ctx) {
 		return {
 			width: this._thickness,
@@ -10676,9 +11083,6 @@ var CDivider = class {
 		ctx.stroke();
 		ctx.restore();
 	}
-	hitTest(_point, _bounds) {
-		return null;
-	}
 	serialize() {
 		const data = { type: "divider" };
 		if (this.id !== void 0) data.id = this.id;
@@ -10893,12 +11297,19 @@ function flexLayout(container, config, children) {
 }
 //#endregion
 //#region src/elements/composite/CContainer.ts
+function isCContainer(component) {
+	return component.type === "container";
+}
+function isCShape(component) {
+	return component.type === "shape";
+}
 /**
 * Flex container component for CompositeNode.
 * Lays out children using a flexbox-like algorithm.
 */
-var CContainer = class {
+var CContainer = class extends CompositeComponentBase {
 	constructor(options = {}) {
+		super();
 		this.type = "container";
 		this._cachedBounds = null;
 		this._cachedContainerBounds = null;
@@ -10948,12 +11359,9 @@ var CContainer = class {
 		this._children.splice(index, 0, child);
 		this.handleChildChange();
 	}
-	setOnChange(cb) {
-		this._onChange = cb;
-	}
 	handleChildChange() {
 		this._cachedBounds = null;
-		this._onChange?.();
+		this.markChanged();
 	}
 	getFlexConfig() {
 		return {
@@ -11047,11 +11455,11 @@ var CContainer = class {
 	findById(id) {
 		for (const child of this._children) {
 			if (child.id === id) return child;
-			if (child.type === "container") {
+			if (isCContainer(child)) {
 				const found = child.findById(id);
 				if (found) return found;
 			}
-			if (child.type === "shape") {
+			if (isCShape(child)) {
 				const content = child.content;
 				if (content) {
 					const found = content.findById(id);
@@ -11107,8 +11515,9 @@ var CContainer = class {
 * A bordered box component for CompositeNode.
 * Can contain a CContainer for recursive composition (e.g. UML class sections).
 */
-var CShape = class {
+var CShape = class extends CompositeComponentBase {
 	constructor(options = {}) {
+		super();
 		this.type = "shape";
 		this.id = options.id;
 		this._borderColor = options.borderColor;
@@ -11119,7 +11528,7 @@ var CShape = class {
 		this.onClick = options.onClick;
 		this._content = options.content;
 		this.style = options.style ?? {};
-		if (this._content) this._content.setOnChange(() => this._onChange?.());
+		if (this._content) this._content.setOnChange(() => this.markChanged());
 	}
 	get borderColor() {
 		return this._borderColor;
@@ -11127,7 +11536,7 @@ var CShape = class {
 	set borderColor(value) {
 		if (this._borderColor !== value) {
 			this._borderColor = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get borderWidth() {
@@ -11136,7 +11545,7 @@ var CShape = class {
 	set borderWidth(value) {
 		if (this._borderWidth !== value) {
 			this._borderWidth = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get backgroundColor() {
@@ -11145,7 +11554,7 @@ var CShape = class {
 	set backgroundColor(value) {
 		if (this._backgroundColor !== value) {
 			this._backgroundColor = value;
-			this._onChange?.();
+			this.markChanged();
 		}
 	}
 	get cornerRadius() {
@@ -11157,9 +11566,6 @@ var CShape = class {
 	get content() {
 		return this._content;
 	}
-	setOnChange(cb) {
-		this._onChange = cb;
-	}
 	measure(ctx) {
 		const pad = normalizeSides(this._padding);
 		const bw = this._borderWidth;
@@ -11210,8 +11616,7 @@ var CShape = class {
 		ctx.restore();
 	}
 	hitTest(point, bounds) {
-		if (this.style.visible === false) return null;
-		if (point.x < bounds.x || point.x > bounds.x + bounds.width || point.y < bounds.y || point.y > bounds.y + bounds.height) return null;
+		if (!super.hitTest(point, bounds)) return null;
 		if (this._content) {
 			const pad = normalizeSides(this._padding);
 			const bw = this._borderWidth;
@@ -12028,9 +12433,14 @@ var Serializer = class {
 		if (!Array.isArray(data.nodes)) throw new SerializerValidationError("Invalid or missing nodes array");
 		if (!Array.isArray(data.edges)) throw new SerializerValidationError("Invalid or missing edges array");
 		const nodeIds = new Set(data.nodes.map((n) => n.id));
+		const edgeIds = new Set(data.edges.map((e) => e.id));
 		for (const edge of data.edges) {
-			if (!nodeIds.has(edge.from.nodeId)) throw new SerializerValidationError(`Edge "${edge.id}" references non-existent source node "${edge.from.nodeId}"`);
-			if (!nodeIds.has(edge.to.nodeId)) throw new SerializerValidationError(`Edge "${edge.id}" references non-existent target node "${edge.to.nodeId}"`);
+			if (edge.from.edgeId) {
+				if (!edgeIds.has(edge.from.edgeId)) throw new SerializerValidationError(`Edge "${edge.id}" references non-existent host edge "${edge.from.edgeId}"`);
+			} else if (!edge.from.nodeId || !nodeIds.has(edge.from.nodeId)) throw new SerializerValidationError(`Edge "${edge.id}" references non-existent source node "${edge.from.nodeId}"`);
+			if (edge.to.edgeId) {
+				if (!edgeIds.has(edge.to.edgeId)) throw new SerializerValidationError(`Edge "${edge.id}" references non-existent host edge "${edge.to.edgeId}"`);
+			} else if (!edge.to.nodeId || !nodeIds.has(edge.to.nodeId)) throw new SerializerValidationError(`Edge "${edge.id}" references non-existent target node "${edge.to.nodeId}"`);
 		}
 	}
 	/**
@@ -12299,174 +12709,6 @@ var ImageExporter = class {
 	}
 };
 //#endregion
-//#region src/utils/markers.ts
-/**
-* Calculate marker points based on edge path
-*/
-function calculateMarkerPoints(path, position, type) {
-	if (path.length < 2) return null;
-	if (type === "bezier" && path.length >= 4) {
-		const epsilon = .001;
-		const isSame = (a, b) => Math.abs(a.x - b.x) < epsilon && Math.abs(a.y - b.y) < epsilon;
-		if (position === "end") {
-			const endIndex = path.length - 1;
-			const endPoint = path[endIndex];
-			let from = path[endIndex - 1];
-			if (isSame(from, endPoint)) {
-				from = path[endIndex - 2];
-				if (isSame(from, endPoint)) from = path[0];
-			}
-			return {
-				from,
-				to: endPoint
-			};
-		}
-		const start = path[0];
-		let next = path[1];
-		if (isSame(next, start)) {
-			next = path[2];
-			if (isSame(next, start)) next = path[path.length - 1];
-		}
-		return {
-			from: next,
-			to: start
-		};
-	}
-	if (position === "end") return {
-		from: path[path.length - 2],
-		to: path[path.length - 1]
-	};
-	return {
-		from: path[1],
-		to: path[0]
-	};
-}
-/**
-* Calculate arrow marker vertex points
-*/
-function calculateArrowMarkerPoints(to, angle, size) {
-	return {
-		tip: to,
-		left: {
-			x: to.x - size * Math.cos(angle - ARROW_ANGLE),
-			y: to.y - size * Math.sin(angle - ARROW_ANGLE)
-		},
-		right: {
-			x: to.x - size * Math.cos(angle + ARROW_ANGLE),
-			y: to.y - size * Math.sin(angle + ARROW_ANGLE)
-		}
-	};
-}
-/**
-* Calculate diamond marker vertex points
-*/
-function calculateDiamondMarkerPoints(to, angle, size) {
-	const halfLength = size / 2;
-	const halfWidth = size * .3;
-	const cos = Math.cos(angle);
-	const sin = Math.sin(angle);
-	return [
-		{
-			x: to.x,
-			y: to.y
-		},
-		{
-			x: to.x - halfLength * cos + halfWidth * sin,
-			y: to.y - halfLength * sin - halfWidth * cos
-		},
-		{
-			x: to.x - size * cos,
-			y: to.y - size * sin
-		},
-		{
-			x: to.x - halfLength * cos - halfWidth * sin,
-			y: to.y - halfLength * sin + halfWidth * cos
-		}
-	];
-}
-/**
-* Calculate circle marker center
-*/
-function calculateCircleMarkerCenter(to, angle, size) {
-	return {
-		x: to.x - size * Math.cos(angle),
-		y: to.y - size * Math.sin(angle)
-	};
-}
-/**
-* Generate SVG path for arrow marker
-*/
-function generateSvgArrowMarker(to, angle, size, fill, fillOpacity, stroke) {
-	const { left, right } = calculateArrowMarkerPoints(to, angle, size);
-	return `<path d="M ${to.x} ${to.y} L ${left.x} ${left.y} L ${right.x} ${right.y} Z" fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="1"/>`;
-}
-/**
-* Generate SVG path for open arrow marker
-*/
-function generateSvgOpenArrowMarker(to, angle, size, stroke) {
-	const { left, right } = calculateArrowMarkerPoints(to, angle, size);
-	return `<path d="M ${to.x} ${to.y} L ${left.x} ${left.y} M ${to.x} ${to.y} L ${right.x} ${right.y}" fill="none" stroke="${stroke}" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>`;
-}
-/**
-* Generate SVG path for diamond marker
-*/
-function generateSvgDiamondMarker(to, angle, size, fill, fillOpacity, stroke) {
-	const points = calculateDiamondMarkerPoints(to, angle, size);
-	return `<path d="M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y} L ${points[2].x} ${points[2].y} L ${points[3].x} ${points[3].y} Z" fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="1"/>`;
-}
-/**
-* Generate SVG circle marker
-*/
-function generateSvgCircleMarker(to, angle, size, fill, fillOpacity, stroke) {
-	const { x: cx, y: cy } = calculateCircleMarkerCenter(to, angle, size);
-	return `<circle cx="${cx}" cy="${cy}" r="${size}" fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="1"/>`;
-}
-/**
-* Square marker: front edge centered at `to`, depth 2×size along the edge toward `from`.
-*/
-function generateSvgSquareMarker(to, angle, size, fill, fillOpacity, stroke) {
-	const cos = Math.cos(angle);
-	const sin = Math.sin(angle);
-	const px = -sin;
-	const py = cos;
-	const p1 = {
-		x: to.x + size * px,
-		y: to.y + size * py
-	};
-	const p2 = {
-		x: to.x - size * px,
-		y: to.y - size * py
-	};
-	const bx = 2 * size * cos;
-	const by = 2 * size * sin;
-	const p3 = {
-		x: p2.x - bx,
-		y: p2.y - by
-	};
-	const p4 = {
-		x: p1.x - bx,
-		y: p1.y - by
-	};
-	return `<path d="M ${p1.x} ${p1.y} L ${p2.x} ${p2.y} L ${p3.x} ${p3.y} L ${p4.x} ${p4.y} Z" fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="1"/>`;
-}
-/**
-* Generate SVG path for any marker type
-*/
-function generateSvgMarker(marker, from, to, edgeStroke) {
-	const angle = Math.atan2(to.y - from.y, to.x - from.x);
-	const size = marker.size ?? 12;
-	const stroke = marker.strokeColor ?? edgeStroke;
-	const fill = marker.fillColor ?? stroke;
-	const fillOpacity = marker.fillOpacity ?? 1;
-	switch (marker.type) {
-		case "open": return generateSvgOpenArrowMarker(to, angle, size, stroke);
-		case "diamond": return generateSvgDiamondMarker(to, angle, size, fill, fillOpacity, stroke);
-		case "circle": return generateSvgCircleMarker(to, angle, size, fill, fillOpacity, stroke);
-		case "square": return generateSvgSquareMarker(to, angle, size, fill, fillOpacity, stroke);
-		default: return generateSvgArrowMarker(to, angle, size, fill, fillOpacity, stroke);
-	}
-}
-//#endregion
 //#region src/utils/SvgExporter.ts
 /**
 * Exports diagram to SVG
@@ -12969,9 +13211,7 @@ var SvgExporter = class {
 		const iconSize = icon.getSize();
 		if (iconSize.width <= 0 || iconSize.height <= 0) return "";
 		const iconInset = icon.inset;
-		const iconBoxSize = this.getIconBoxSize(iconSize, iconInset);
-		const iconBounds = this.getIconBounds(nodeBounds, iconBoxSize, opts.placement ?? "center", iconInset);
-		const drawRect = this.getIconDrawRect(iconBounds, opts, iconSize, iconInset);
+		const drawRect = computeIconDrawRectFromOptions(getIconBounds(nodeBounds, getIconBoxSize(iconSize, iconInset), opts.placement ?? "center", iconInset), opts, iconSize, iconInset);
 		if (drawRect.width <= 0 || drawRect.height <= 0) return "";
 		const href = this.resolveIconHref(opts);
 		if (!href) return "";
@@ -12979,150 +13219,14 @@ var SvgExporter = class {
 		const escapedHref = this.escapeAttribute(href);
 		return `<image href="${escapedHref}" xlink:href="${escapedHref}" x="${drawRect.x}" y="${drawRect.y}" width="${drawRect.width}" height="${drawRect.height}" opacity="${opacity}" preserveAspectRatio="none"/>`;
 	}
-	getIconBoxSize(imageSize, inset) {
-		return {
-			width: imageSize.width + inset * 2,
-			height: imageSize.height + inset * 2
-		};
-	}
-	getIconBounds(bounds, iconBoxSize, placement, inset) {
-		switch (placement) {
-			case "top": return {
-				x: bounds.x,
-				y: bounds.y,
-				width: bounds.width,
-				height: iconBoxSize.height
-			};
-			case "bottom": return {
-				x: bounds.x,
-				y: bounds.y + bounds.height - iconBoxSize.height,
-				width: bounds.width,
-				height: iconBoxSize.height
-			};
-			case "left": return {
-				x: bounds.x,
-				y: bounds.y,
-				width: iconBoxSize.width,
-				height: bounds.height
-			};
-			case "right": return {
-				x: bounds.x + bounds.width - iconBoxSize.width,
-				y: bounds.y,
-				width: iconBoxSize.width,
-				height: bounds.height
-			};
-			case "top-left": return {
-				x: bounds.x + inset,
-				y: bounds.y + inset,
-				width: iconBoxSize.width,
-				height: iconBoxSize.height
-			};
-			case "top-right": return {
-				x: bounds.x + bounds.width - iconBoxSize.width - inset,
-				y: bounds.y + inset,
-				width: iconBoxSize.width,
-				height: iconBoxSize.height
-			};
-			case "bottom-left": return {
-				x: bounds.x + inset,
-				y: bounds.y + bounds.height - iconBoxSize.height - inset,
-				width: iconBoxSize.width,
-				height: iconBoxSize.height
-			};
-			case "bottom-right": return {
-				x: bounds.x + bounds.width - iconBoxSize.width - inset,
-				y: bounds.y + bounds.height - iconBoxSize.height - inset,
-				width: iconBoxSize.width,
-				height: iconBoxSize.height
-			};
-			default: return bounds;
-		}
-	}
-	getIconDrawRect(bounds, opts, imageSize, inset) {
-		const fit = opts.fit ?? "none";
-		const scaleWithBounds = opts.scaleWithBounds ?? false;
-		const innerBounds = {
-			x: bounds.x + inset,
-			y: bounds.y + inset,
-			width: Math.max(0, bounds.width - inset * 2),
-			height: Math.max(0, bounds.height - inset * 2)
-		};
-		const availableWidth = Math.max(0, innerBounds.width);
-		const availableHeight = Math.max(0, innerBounds.height);
-		let drawWidth = opts.width ?? imageSize.width;
-		let drawHeight = opts.height ?? imageSize.height;
-		if (scaleWithBounds) {
-			if ((fit === "contain" || fit === "cover") && imageSize.width > 0 && imageSize.height > 0) {
-				const scaleX = availableWidth / imageSize.width;
-				const scaleY = availableHeight / imageSize.height;
-				const scale = fit === "contain" ? Math.min(scaleX, scaleY) : Math.max(scaleX, scaleY);
-				drawWidth = imageSize.width * scale;
-				drawHeight = imageSize.height * scale;
-			} else if (fit === "stretch") {
-				drawWidth = availableWidth;
-				drawHeight = availableHeight;
-			}
-		}
-		drawWidth = Math.min(Math.max(0, drawWidth), Math.max(0, availableWidth));
-		drawHeight = Math.min(Math.max(0, drawHeight), Math.max(0, availableHeight));
-		return {
-			x: innerBounds.x + (innerBounds.width - drawWidth) / 2,
-			y: innerBounds.y + (innerBounds.height - drawHeight) / 2,
-			width: drawWidth,
-			height: drawHeight
-		};
-	}
 	resolveIconHref(opts) {
 		const source = opts.source;
 		if (source instanceof HTMLImageElement) return source.src;
 		if (!source) return "";
-		if (this.isSvgMarkup(source)) return this.svgToDataUrl(this.tintSvg(source, opts.strokeColor, opts.fillColor));
-		if (source.toLowerCase().endsWith(".svg")) {
-			const svgText = this.readSvgFromUrlSync(source);
-			if (svgText) return this.svgToDataUrl(this.tintSvg(svgText, opts.strokeColor, opts.fillColor));
-		}
-		return source;
-	}
-	readSvgFromUrlSync(url) {
-		if (typeof XMLHttpRequest === "undefined") return null;
-		try {
-			const xhr = new XMLHttpRequest();
-			xhr.open("GET", url, false);
-			xhr.send();
-			if (xhr.status >= 200 && xhr.status < 300) return xhr.responseText || null;
-		} catch {}
-		return null;
-	}
-	isSvgMarkup(value) {
-		const trimmed = value.trim().toLowerCase();
-		return trimmed.startsWith("<svg") || trimmed.includes("<svg");
-	}
-	styleSetColor(style, key, color) {
-		if (new RegExp(`${key}\\s*:`).test(style)) return style.replace(new RegExp(`${key}\\s*:[^;]+`), `${key}:${color}`);
-		return `${style}${style.trim().endsWith(";") || style.trim() === "" ? "" : ";"}${key}:${color};`;
-	}
-	tintSvg(svgText, strokeColor, fillColor) {
-		if (!strokeColor && !fillColor) return svgText;
-		const root = new DOMParser().parseFromString(svgText, "image/svg+xml").documentElement;
-		if (!root || root.nodeName.toLowerCase() === "parsererror") return svgText;
-		const all = [root, ...Array.from(root.querySelectorAll("*"))];
-		for (const el of all) {
-			const stroke = el.getAttribute("stroke");
-			if (strokeColor && stroke !== null && stroke.toLowerCase() !== "none") el.setAttribute("stroke", strokeColor);
-			const fill = el.getAttribute("fill");
-			if (fillColor && fill !== null && fill.toLowerCase() !== "none") el.setAttribute("fill", fillColor);
-			const style = el.getAttribute("style");
-			if (style) {
-				let next = style;
-				if (strokeColor && /stroke\s*:\s*(?!none)/.test(style)) next = this.styleSetColor(next, "stroke", strokeColor);
-				if (fillColor && /fill\s*:\s*(?!none)/.test(style)) next = this.styleSetColor(next, "fill", fillColor);
-				if (next !== style) el.setAttribute("style", next);
-			}
-		}
-		return new XMLSerializer().serializeToString(root);
-	}
-	svgToDataUrl(svg) {
-		return `data:image/svg+xml;utf8,${encodeURIComponent(svg).replace(/%0A/g, "").replace(/%0D/g, "").replace(/%09/g, " ").replace(/%20/g, " ")}`;
+		return resolveTintedSvgDataUrlSync(source, {
+			strokeColor: opts.strokeColor,
+			fillColor: opts.fillColor
+		}) ?? source;
 	}
 	escapeAttribute(value) {
 		return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -13179,8 +13283,11 @@ var AutoRouting = class {
 		const type = options.type ?? "polyline";
 		for (const edge of renderer.edges.values()) {
 			edge.type = type;
-			const fromNode = renderer.getNode(edge.from.nodeId);
-			const toNode = renderer.getNode(edge.to.nodeId);
+			const fromId = edge.from.nodeId;
+			const toId = edge.to.nodeId;
+			if (!fromId || !toId) continue;
+			const fromNode = renderer.getNode(fromId);
+			const toNode = renderer.getNode(toId);
 			if (!fromNode || !toNode) continue;
 			const fromPoint = edge.from.portId !== void 0 ? fromNode.getPortPosition(edge.from.portId) ?? fromNode.getCenter() : fromNode.getCenter();
 			const toPoint = edge.to.portId !== void 0 ? toNode.getPortPosition(edge.to.portId) ?? toNode.getCenter() : toNode.getCenter();
@@ -13419,11 +13526,10 @@ var GuidesOverlay = class extends BaseOverlay {
 };
 //#endregion
 //#region src/core/overlays/MiniMap.ts
-var MiniMap = class {
+var MiniMap = class extends BaseOverlay {
 	constructor(options = {}) {
-		this.removeOverlay = null;
+		super(options.enabled ?? true);
 		this.options = {
-			enabled: options.enabled ?? true,
 			width: options.width ?? 180,
 			height: options.height ?? 120,
 			padding: options.padding ?? 12,
@@ -13436,7 +13542,7 @@ var MiniMap = class {
 	}
 	install(renderer) {
 		this.removeOverlay = renderer.addTopOverlayRenderer((ctx) => {
-			if (!this.options.enabled) return;
+			if (!this.enabled) return;
 			const layout = this.computeLayout(renderer);
 			if (!layout) return;
 			const { x, y, width, height, bounds, scale, mapOffsetX, mapOffsetY, viewRect } = layout;
@@ -13485,13 +13591,6 @@ var MiniMap = class {
 			ctx.restore();
 		});
 	}
-	destroy() {
-		this.removeOverlay?.();
-		this.removeOverlay = null;
-	}
-	setEnabled(enabled) {
-		this.options.enabled = enabled;
-	}
 	beginOverlayDrag(renderer, screenX, screenY) {
 		const hit = this.hitTestMiniMap(renderer, screenX, screenY);
 		if (!hit) return null;
@@ -13508,7 +13607,7 @@ var MiniMap = class {
 		return this.hitTestMiniMap(renderer, screenX, screenY) !== null;
 	}
 	updateOverlayDrag(renderer, screenX, screenY, payload) {
-		if (!this.options.enabled) return false;
+		if (!this.enabled) return false;
 		if (typeof payload !== "object" || payload === null || !("kind" in payload)) return false;
 		const dragPayload = payload;
 		if (dragPayload.kind === "block") return true;
@@ -13530,7 +13629,7 @@ var MiniMap = class {
 		return true;
 	}
 	hitTestMiniMap(renderer, screenX, screenY) {
-		if (!this.options.enabled) return null;
+		if (!this.enabled) return null;
 		const layout = this.computeLayout(renderer);
 		if (!layout) return null;
 		const canvasPoint = renderer.screenToCanvas(screenX, screenY);
@@ -13663,6 +13762,6 @@ function applyEdgeStyle(ctx, style) {
 	return baseOpacity * strokeOpacity;
 }
 //#endregion
-export { AddNodeCommand, AnimationManager, AutoLayout, AutoRouting, CContainer, CDivider, CIcon, CShape, CText, ChangeEditablePolylineControlPointsCommand, CircleNode, CompositeCommand, CompositeNode, ConnectionManager, ContextMenuManager, CustomShapeNode, DARK_THEME, DEFAULT_THEME, DiagramRenderer, DiamondNode, DragManager, Edge, Element, EventEmitter, GridOverlay, Group, GuidesOverlay, HistoryManager, ImageExporter, InputHandler, InteractionManager, MiniMap, MoveNodesCommand, NavigationManager, Node, NodeImage, Port, RectangleNode, RemoveNodeCommand, ResizeManager, RulersOverlay, SearchManager, SelectionManager, Serializer, ShapeFactories, StyleManager, SvgExporter, TextLabel, alignNodes, angle, applyEdgeStyle, applyNodeStyle, bezierPoint, boundsCenter, calculateBezierControlPoints, clamp, clonePoints, container, deserializeCComponent, distance, distanceToSegment, distributeNodes, divider, drawRoundedRectPath, expandBounds, flexLayout, generateId, icon, isCornerPlacement, lerp, mergeBounds, normalizeSides, pointInEllipse, pointInRect, rectIntersection, rectUnion, rectsIntersect, renderFillAndStroke, resetIdCounter, resetPortIdCounter, rotatePoint, segmentRectIntersections, shape, snapPointToGrid, snapToGrid, text };
+export { AddNodeCommand, AnimationManager, AutoLayout, AutoRouting, BezierPathStrategy, CContainer, CDivider, CIcon, CShape, CText, ChangeEdgePropertiesCommand, ChangeEditablePolylineControlPointsCommand, ChangeGroupPropertiesCommand, ChangeNodePropertiesCommand, CircleNode, ClipboardManager, CompositeCommand, CompositeNode, ConnectionManager, ContextMenuManager, CustomShapeNode, DARK_THEME, DEFAULT_THEME, DiagramRenderer, DiamondNode, DragManager, Edge, Element, EventEmitter, GridOverlay, Group, GuidesOverlay, HistoryManager, ImageExporter, InputHandler, InteractionManager, MiniMap, MoveNodesCommand, NavigationManager, Node, NodeImage, PolylinePathStrategy, Port, PropertyChangeBatcher, RectangleNode, RemoveNodeCommand, ResizeManager, RulersOverlay, SearchManager, SelectionManager, Serializer, ShapeFactories, StraightPathStrategy, StyleManager, SvgExporter, TextLabel, alignNodes, angle, applyEdgeStyle, applyNodeStyle, bezierPoint, boundsCenter, calculateBezierControlPoints, clamp, clonePoints, container, deserializeCComponent, directionFromAngle, distance, distanceToSegment, distributeNodes, divider, drawRoundedRectPath, expandBounds, flexLayout, generateId, getClosestPointOnPath, getPathPointAt, icon, isCornerPlacement, isEdgeEdgeEndpoint, isNodeEdgeEndpoint, lerp, mergeBounds, normalizeSides, pointInEllipse, pointInRect, rectIntersection, rectUnion, rectsIntersect, renderFillAndStroke, resetIdCounter, resetPortIdCounter, rotatePoint, segmentRectIntersections, shape, snapPointToGrid, snapToGrid, text };
 
 //# sourceMappingURL=papirus.js.map