@ngroznykh/papirus 0.7.3 → 0.8.1

package/dist/papirus.js

@@ -1672,10 +1672,26 @@ var NavigationManager = class extends EventEmitter {
 //#endregion
 //#region src/utils/direction.ts
 /**
-* Map outline param [0,1) to cardinal direction (top → right → bottom → left).
+* Map outline param [0,1) to cardinal direction.
+*
+* When `bounds` are provided, uses the same perimeter walk as
+* `Node.getConnectionPointAtOutlineParam` (top → right → bottom → left).
+* Equal-quarter mapping is only a fallback for square-ish shapes / legacy callers —
+* on wide/short nodes it wrongly labels the left half of the bottom edge as `left`.
 */
-function getDirectionFromOutlineParam(param) {
+function getDirectionFromOutlineParam(param, bounds) {
 	const p = (param % 1 + 1) % 1;
+	const w = bounds?.width ?? 0;
+	const h = bounds?.height ?? 0;
+	if (w > 0 && h > 0) {
+		let s = p * (2 * (w + h));
+		if (s < w) return "top";
+		s -= w;
+		if (s < h) return "right";
+		s -= h;
+		if (s < w) return "bottom";
+		return "left";
+	}
 	if (p < .25) return "top";
 	if (p < .5) return "right";
 	if (p < .75) return "bottom";
@@ -1946,14 +1962,14 @@ var ConnectionManager = class extends EventEmitter {
 				snappedPoint = bestResult.point;
 				this.reconnectingOutlineParam = bestResult.param;
 				this.reconnectingTargetNodeId = bestResult.node.id;
-				snappedDir = getDirectionFromOutlineParam(bestResult.param);
+				snappedDir = getDirectionFromOutlineParam(bestResult.param, bestResult.node.getBounds());
 				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 = getDirectionFromOutlineParam(reprojected.param);
+					snappedDir = getDirectionFromOutlineParam(reprojected.param, targetNode.getBounds());
 				}
 			} else {
 				this.reconnectingOutlineParam = null;
@@ -1976,15 +1992,38 @@ var ConnectionManager = class extends EventEmitter {
 			if (toNode) {
 				const target = this.getTargetPointForReconnect(edge, toNode, "to", snappedPoint);
 				const toDir = this.getTargetDirForReconnect(edge, "to");
-				edge.updateEndpoints(snappedPoint, target, snappedDir, toDir);
+				const sourceId = targetNode?.id ?? edge.from.nodeId;
+				edge.updateEndpoints(snappedPoint, target, snappedDir, toDir, this.buildReconnectRoutingOptions(sourceId, toNode.id));
 			}
 		} else if (fromNode) {
 			const start = this.getTargetPointForReconnect(edge, fromNode, "from", snappedPoint);
 			const fromDir = this.getTargetDirForReconnect(edge, "from");
-			edge.updateEndpoints(start, snappedPoint, fromDir, snappedDir);
+			edge.updateEndpoints(start, snappedPoint, fromDir, snappedDir, this.buildReconnectRoutingOptions(fromNode.id, targetNode?.id));
 		}
 		this.renderer.markDirty();
 	}
+	/**
+	* Match DiagramRenderer.getNodeObstacles padding and EdgeEndpointUpdater roles
+	* so reconnect preview uses the same polyline routing as updateAll.
+	*/
+	buildReconnectRoutingOptions(sourceNodeId, targetNodeId) {
+		const obstacles = [];
+		for (const node of this.renderer.nodes.values()) {
+			let role = "other";
+			if (node.id === sourceNodeId) role = "source";
+			else if (node.id === targetNodeId) role = "target";
+			const pad = 4;
+			obstacles.push({
+				id: node.id,
+				x: node.x - pad,
+				y: node.y - pad,
+				width: node.width + pad * 2,
+				height: node.height + pad * 2,
+				role
+			});
+		}
+		return { obstacles };
+	}
 	getTargetPointForReconnect(edge, node, endpoint, fallbackPoint) {
 		const ep = endpoint === "from" ? edge.from : edge.to;
 		if (this.attachToOutline && ep.outlineParam !== void 0) return node.getConnectionPointAtOutlineParam(ep.outlineParam);
@@ -1994,7 +2033,10 @@ var ConnectionManager = class extends EventEmitter {
 	}
 	getTargetDirForReconnect(edge, endpoint) {
 		const ep = endpoint === "from" ? edge.from : edge.to;
-		if (this.attachToOutline && ep.outlineParam !== void 0) return getDirectionFromOutlineParam(ep.outlineParam);
+		if (this.attachToOutline && ep.outlineParam !== void 0) {
+			const node = ep.nodeId ? this.renderer.getNode(ep.nodeId) : void 0;
+			return getDirectionFromOutlineParam(ep.outlineParam, node?.getBounds());
+		}
 		return (ep.portId?.replace(ANCHOR_PORT_PREFIX, ""))?.split(":")[0];
 	}
 	/**
@@ -2309,8 +2351,9 @@ var ConnectionManager = class extends EventEmitter {
 			ctx.lineTo(end.x, end.y);
 			ctx.stroke();
 		} else {
-			const fromDir = this.sourceOutlineParam !== null ? getDirectionFromOutlineParam(this.sourceOutlineParam) : this.sourceAnchorId?.split(":")[0];
-			const toDir = this.previewTargetOutlineParam !== null ? getDirectionFromOutlineParam(this.previewTargetOutlineParam) : this.previewTargetAnchorId?.split(":")[0];
+			const previewTarget = this.previewTargetNodeId != null ? this.renderer.getNode(this.previewTargetNodeId) : void 0;
+			const fromDir = this.sourceOutlineParam !== null ? getDirectionFromOutlineParam(this.sourceOutlineParam, this.sourceNode?.getBounds()) : this.sourceAnchorId?.split(":")[0];
+			const toDir = this.previewTargetOutlineParam !== null ? getDirectionFromOutlineParam(this.previewTargetOutlineParam, previewTarget?.getBounds()) : this.previewTargetAnchorId?.split(":")[0];
 			this.drawBezierPreview(ctx, start, end, fromDir, toDir);
 		}
 		ctx.setLineDash([]);
@@ -3777,7 +3820,781 @@ var StraightPathStrategy = class {
 	}
 };
 //#endregion
+//#region src/elements/paths/routeOrthogonalAround.ts
+var DEFAULT_MARGIN = 12;
+var DEFAULT_EXIT = 20;
+var BEND_PENALTY = .001;
+/** Prefer mid-gap over hugging obstacle borders (same Manhattan, fewer bends). */
+var CONTOUR_BAND = 18;
+var CONTOUR_PENALTY = 140;
+function expandRect(r, m) {
+	return {
+		...r,
+		x: r.x - m,
+		y: r.y - m,
+		width: r.width + 2 * m,
+		height: r.height + 2 * m
+	};
+}
+/**
+* Diagram padding + router margin can seal a real visual gap between stacked nodes
+* (e.g. ArchiMate BP header above a Product ~12px apart, 8px pad each side).
+* Shrink facing sides of the expanded rects so a mid-gap corridor stays open.
+*/
+function preserveFacingGap(expandedA, expandedB, rawA, rawB, minCorridor = 2) {
+	let a = { ...expandedA };
+	let b = { ...expandedB };
+	if (rawB.y - (rawA.y + rawA.height) >= minCorridor) {
+		const mid = (rawA.y + rawA.height + rawB.y) / 2;
+		const half = minCorridor / 2;
+		const aBottom = mid - half;
+		const bTop = mid + half;
+		if (a.y + a.height > aBottom) a = {
+			...a,
+			height: Math.max(0, aBottom - a.y)
+		};
+		if (b.y < bTop) b = {
+			...b,
+			height: Math.max(0, b.y + b.height - bTop),
+			y: bTop
+		};
+		return [a, b];
+	}
+	if (rawA.y - (rawB.y + rawB.height) >= minCorridor) {
+		const mid = (rawB.y + rawB.height + rawA.y) / 2;
+		const half = minCorridor / 2;
+		const bBottom = mid - half;
+		const aTop = mid + half;
+		if (b.y + b.height > bBottom) b = {
+			...b,
+			height: Math.max(0, bBottom - b.y)
+		};
+		if (a.y < aTop) a = {
+			...a,
+			height: Math.max(0, a.y + a.height - aTop),
+			y: aTop
+		};
+		return [a, b];
+	}
+	if (rawB.x - (rawA.x + rawA.width) >= minCorridor) {
+		const mid = (rawA.x + rawA.width + rawB.x) / 2;
+		const half = minCorridor / 2;
+		const aRight = mid - half;
+		const bLeft = mid + half;
+		if (a.x + a.width > aRight) a = {
+			...a,
+			width: Math.max(0, aRight - a.x)
+		};
+		if (b.x < bLeft) b = {
+			...b,
+			width: Math.max(0, b.x + b.width - bLeft),
+			x: bLeft
+		};
+		return [a, b];
+	}
+	if (rawA.x - (rawB.x + rawB.width) >= minCorridor) {
+		const mid = (rawB.x + rawB.width + rawA.x) / 2;
+		const half = minCorridor / 2;
+		const bRight = mid - half;
+		const aLeft = mid + half;
+		if (b.x + b.width > bRight) b = {
+			...b,
+			width: Math.max(0, bRight - b.x)
+		};
+		if (a.x < aLeft) a = {
+			...a,
+			width: Math.max(0, a.x + a.width - aLeft),
+			x: aLeft
+		};
+		return [a, b];
+	}
+	return [a, b];
+}
+function insetRect(r, m) {
+	if (m <= 0) return r;
+	const width = r.width - 2 * m;
+	const height = r.height - 2 * m;
+	if (width <= 1 || height <= 1) return null;
+	return {
+		...r,
+		x: r.x + m,
+		y: r.y + m,
+		width,
+		height
+	};
+}
+/** Midline of a positive gap between two raw rects, if any. */
+function facingGapMid(rawA, rawB) {
+	if (rawA.y + rawA.height < rawB.y) return {
+		x: (rawA.x + rawA.width / 2 + rawB.x + rawB.width / 2) / 2,
+		y: (rawA.y + rawA.height + rawB.y) / 2
+	};
+	if (rawB.y + rawB.height < rawA.y) return {
+		x: (rawA.x + rawA.width / 2 + rawB.x + rawB.width / 2) / 2,
+		y: (rawB.y + rawB.height + rawA.y) / 2
+	};
+	if (rawA.x + rawA.width < rawB.x) return {
+		x: (rawA.x + rawA.width + rawB.x) / 2,
+		y: (rawA.y + rawA.height / 2 + rawB.y + rawB.height / 2) / 2
+	};
+	if (rawB.x + rawB.width < rawA.x) return {
+		x: (rawB.x + rawB.width + rawA.x) / 2,
+		y: (rawA.y + rawA.height / 2 + rawB.y + rawB.height / 2) / 2
+	};
+	return null;
+}
+/**
+* Obstacles arrive pre-padded (diagram pad 4–8). Peel common pad amounts so a
+* real visual gap between stacked nodes is visible to corridor / endEntry logic.
+*/
+function peelForFacingGap(a, b) {
+	for (const peel of [
+		0,
+		4,
+		8
+	]) {
+		const aa = insetRect(a, peel);
+		const bb = insetRect(b, peel);
+		if (!aa || !bb) continue;
+		if (facingGapMid(aa, bb)) return {
+			a: aa,
+			b: bb
+		};
+	}
+	return null;
+}
+function moveByDir$1(p, dir, d) {
+	switch (dir) {
+		case "top": return {
+			x: p.x,
+			y: p.y - d
+		};
+		case "bottom": return {
+			x: p.x,
+			y: p.y + d
+		};
+		case "left": return {
+			x: p.x - d,
+			y: p.y
+		};
+		case "right": return {
+			x: p.x + d,
+			y: p.y
+		};
+	}
+}
+function pointInOpenInterior(p, r) {
+	return p.x > r.x && p.x < r.x + r.width && p.y > r.y && p.y < r.y + r.height;
+}
+/** Axis-aligned segment vs open interior of a rect (boundary grazing allowed). */
+function segmentIntersectsOpenInterior(a, b, r) {
+	if (Math.abs(a.x - b.x) < .001) {
+		const x = a.x;
+		const y1 = Math.min(a.y, b.y);
+		const y2 = Math.max(a.y, b.y);
+		return x > r.x && x < r.x + r.width && y2 > r.y && y1 < r.y + r.height;
+	}
+	if (Math.abs(a.y - b.y) < .001) {
+		const y = a.y;
+		const x1 = Math.min(a.x, b.x);
+		const x2 = Math.max(a.x, b.x);
+		return y > r.y && y < r.y + r.height && x2 > r.x && x1 < r.x + r.width;
+	}
+	return true;
+}
+function segmentHitsObstacles(a, b, obstacles) {
+	return obstacles.some((o) => segmentIntersectsOpenInterior(a, b, o));
+}
+function manhattan$1(a, b) {
+	return Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
+}
+/**
+* Extra cost when a segment runs parallel to an obstacle edge inside CONTOUR_BAND.
+* Scaled by segment length so a long “lick” along a wide BP costs far more than a short stub.
+*/
+function contourProximityPenalty(a, b, obstacles) {
+	if (obstacles.length === 0) return 0;
+	const segLen = manhattan$1(a, b);
+	if (segLen < 1) return 0;
+	let minDist = Infinity;
+	if (Math.abs(a.y - b.y) < .001) {
+		const y = a.y;
+		const x1 = Math.min(a.x, b.x);
+		const x2 = Math.max(a.x, b.x);
+		for (const o of obstacles) {
+			if (x2 < o.x - 1 || x1 > o.x + o.width + 1) continue;
+			minDist = Math.min(minDist, Math.abs(y - o.y), Math.abs(y - (o.y + o.height)));
+		}
+	} else if (Math.abs(a.x - b.x) < .001) {
+		const x = a.x;
+		const y1 = Math.min(a.y, b.y);
+		const y2 = Math.max(a.y, b.y);
+		for (const o of obstacles) {
+			if (y2 < o.y - 1 || y1 > o.y + o.height + 1) continue;
+			minDist = Math.min(minDist, Math.abs(x - o.x), Math.abs(x - (o.x + o.width)));
+		}
+	} else return 0;
+	if (!Number.isFinite(minDist) || minDist >= CONTOUR_BAND) return 0;
+	const proximity = 1 - minDist / CONTOUR_BAND;
+	return segLen * (CONTOUR_PENALTY / 10) * proximity;
+}
+/** Push along dir until outside expanded parent (and at least exitDistance). */
+function computeStartExit(from, fromDir, parent, margin, exitDistance) {
+	let p = moveByDir$1(from, fromDir, exitDistance);
+	if (!parent) return p;
+	const expanded = expandRect(parent, margin);
+	let guard = 0;
+	while (pointInOpenInterior(p, expanded) && guard++ < 64) p = moveByDir$1(p, fromDir, exitDistance);
+	if (pointInOpenInterior(p, expanded)) {
+		const e = expanded;
+		switch (fromDir) {
+			case "left":
+				p = {
+					x: e.x - 1,
+					y: from.y
+				};
+				break;
+			case "right":
+				p = {
+					x: e.x + e.width + 1,
+					y: from.y
+				};
+				break;
+			case "top":
+				p = {
+					x: from.x,
+					y: e.y - 1
+				};
+				break;
+			case "bottom":
+				p = {
+					x: from.x,
+					y: e.y + e.height + 1
+				};
+				break;
+		}
+	}
+	return p;
+}
+function computeEndEntry(to, toDir, exitDistance, rawTarget, rawNeighbor) {
+	const stub = moveByDir$1(to, toDir, exitDistance);
+	if (!rawTarget || !rawNeighbor) return stub;
+	const mid = facingGapMid(rawTarget, rawNeighbor);
+	if (!mid) return stub;
+	switch (toDir) {
+		case "bottom":
+			if (mid.y > to.y && rawNeighbor.y >= rawTarget.y + rawTarget.height) return {
+				x: to.x,
+				y: mid.y
+			};
+			break;
+		case "top":
+			if (mid.y < to.y && rawNeighbor.y + rawNeighbor.height <= rawTarget.y) return {
+				x: to.x,
+				y: mid.y
+			};
+			break;
+		case "right":
+			if (mid.x > to.x && rawNeighbor.x >= rawTarget.x + rawTarget.width) return {
+				x: mid.x,
+				y: to.y
+			};
+			break;
+		case "left":
+			if (mid.x < to.x && rawNeighbor.x + rawNeighbor.width <= rawTarget.x) return {
+				x: mid.x,
+				y: to.y
+			};
+			break;
+	}
+	return stub;
+}
+/**
+* When nodes face each other closer than 2×exitDistance, fixed stubs cross
+* (startExit past endEntry). That draws a U-turn "tail" at the first bend.
+* Meet both stubs on the mid-gap instead.
+*/
+function clampFacingExitEntry(from, to, fromDir, toDir, startExit, endEntry) {
+	if (fromDir === "bottom" && toDir === "top" && to.y > from.y && startExit.y > endEntry.y) {
+		const midY = (from.y + to.y) / 2;
+		return {
+			startExit: {
+				x: startExit.x,
+				y: midY
+			},
+			endEntry: {
+				x: endEntry.x,
+				y: midY
+			}
+		};
+	}
+	if (fromDir === "top" && toDir === "bottom" && to.y < from.y && startExit.y < endEntry.y) {
+		const midY = (from.y + to.y) / 2;
+		return {
+			startExit: {
+				x: startExit.x,
+				y: midY
+			},
+			endEntry: {
+				x: endEntry.x,
+				y: midY
+			}
+		};
+	}
+	if (fromDir === "right" && toDir === "left" && to.x > from.x && startExit.x > endEntry.x) {
+		const midX = (from.x + to.x) / 2;
+		return {
+			startExit: {
+				x: midX,
+				y: startExit.y
+			},
+			endEntry: {
+				x: midX,
+				y: endEntry.y
+			}
+		};
+	}
+	if (fromDir === "left" && toDir === "right" && to.x < from.x && startExit.x < endEntry.x) {
+		const midX = (from.x + to.x) / 2;
+		return {
+			startExit: {
+				x: midX,
+				y: startExit.y
+			},
+			endEntry: {
+				x: midX,
+				y: endEntry.y
+			}
+		};
+	}
+	return {
+		startExit,
+		endEntry
+	};
+}
+function simplifyPath$1(path) {
+	const out = [];
+	for (const p of path) {
+		const prev = out[out.length - 1];
+		if (!prev || Math.abs(prev.x - p.x) > .001 || Math.abs(prev.y - p.y) > .001) out.push(p);
+	}
+	let i = 0;
+	while (i + 2 < out.length) {
+		const a = out[i];
+		const b = out[i + 1];
+		const c = out[i + 2];
+		const colinearV = Math.abs(a.x - b.x) < .001 && Math.abs(b.x - c.x) < .001;
+		const colinearH = Math.abs(a.y - b.y) < .001 && Math.abs(b.y - c.y) < .001;
+		const colinear = colinearV || colinearH;
+		const uturn = colinearV && (a.y < c.y && c.y < b.y || b.y < c.y && c.y < a.y) || colinearH && (a.x < c.x && c.x < b.x || b.x < c.x && c.x < a.x);
+		const spur = colinearV && (b.y < a.y && a.y < c.y || c.y < a.y && a.y < b.y) || colinearH && (b.x < a.x && a.x < c.x || c.x < a.x && a.x < b.x);
+		if (uturn || spur || colinear && i > 0 && i + 2 < out.length - 1) out.splice(i + 1, 1);
+		else i++;
+	}
+	return out;
+}
+function unionBBox(obstacles) {
+	let x1 = Infinity;
+	let y1 = Infinity;
+	let x2 = -Infinity;
+	let y2 = -Infinity;
+	for (const o of obstacles) {
+		x1 = Math.min(x1, o.x);
+		y1 = Math.min(y1, o.y);
+		x2 = Math.max(x2, o.x + o.width);
+		y2 = Math.max(y2, o.y + o.height);
+	}
+	return {
+		x: x1,
+		y: y1,
+		width: x2 - x1,
+		height: y2 - y1
+	};
+}
+function collectLatticeCoords(startExit, endEntry, obstacles, parent, target, margin) {
+	const xSet = new Set([startExit.x, endEntry.x]);
+	const ySet = new Set([startExit.y, endEntry.y]);
+	for (const o of obstacles) {
+		xSet.add(o.x);
+		xSet.add(o.x + o.width);
+		ySet.add(o.y);
+		ySet.add(o.y + o.height);
+		xSet.add(o.x - 1);
+		xSet.add(o.x + o.width + 1);
+		ySet.add(o.y - 1);
+		ySet.add(o.y + o.height + 1);
+	}
+	if (parent && target) {
+		const addGapY = (gapY) => {
+			ySet.add(gapY);
+			const left = Math.min(parent.x, target.x, startExit.x, endEntry.x);
+			const right = Math.max(parent.x + parent.width, target.x + target.width, startExit.x, endEntry.x);
+			xSet.add(left);
+			xSet.add(right);
+			xSet.add(startExit.x);
+			xSet.add(endEntry.x);
+		};
+		const addGapX = (gapX) => {
+			xSet.add(gapX);
+			const top = Math.min(parent.y, target.y, startExit.y, endEntry.y);
+			const bottom = Math.max(parent.y + parent.height, target.y + target.height, startExit.y, endEntry.y);
+			ySet.add(top);
+			ySet.add(bottom);
+			ySet.add(startExit.y);
+			ySet.add(endEntry.y);
+		};
+		const mid = facingGapMid(parent, target);
+		if (mid) if (parent.y + parent.height < target.y || target.y + target.height < parent.y) addGapY(mid.y);
+		else addGapX(mid.x);
+		else if (margin != null) {
+			const ep = expandRect(parent, margin);
+			const et = expandRect(target, margin);
+			if (et.y + et.height < ep.y) addGapY((et.y + et.height + ep.y) / 2);
+			if (ep.y + ep.height < et.y) addGapY((ep.y + ep.height + et.y) / 2);
+			if (et.x + et.width < ep.x) addGapX((et.x + et.width + ep.x) / 2);
+			if (ep.x + ep.width < et.x) addGapX((ep.x + ep.width + et.x) / 2);
+		}
+	}
+	return {
+		xs: [...xSet].sort((a, b) => a - b),
+		ys: [...ySet].sort((a, b) => a - b)
+	};
+}
+function buildCornerGraph(startExit, endEntry, obstacles, parent, target, margin) {
+	const { xs, ys } = collectLatticeCoords(startExit, endEntry, obstacles, parent, target, margin);
+	const nodes = [];
+	const nodeIndex = /* @__PURE__ */ new Map();
+	const nodeKey = (x, y) => `${x}|${y}`;
+	const addNode = (x, y) => {
+		const key = nodeKey(x, y);
+		if (nodeIndex.has(key)) return;
+		const point = {
+			x,
+			y
+		};
+		if (obstacles.some((o) => pointInOpenInterior(point, o))) return;
+		nodeIndex.set(key, nodes.length);
+		nodes.push(point);
+	};
+	for (const x of xs) for (const y of ys) addNode(x, y);
+	addNode(startExit.x, startExit.y);
+	addNode(endEntry.x, endEntry.y);
+	const startIdx = nodeIndex.get(nodeKey(startExit.x, startExit.y));
+	const goalIdx = nodeIndex.get(nodeKey(endEntry.x, endEntry.y));
+	if (startIdx == null || goalIdx == null) return null;
+	const edges = /* @__PURE__ */ new Map();
+	const pushEdge = (a, b, dir, length) => {
+		const list = edges.get(a) ?? [];
+		list.push({
+			to: b,
+			dir,
+			length
+		});
+		edges.set(a, list);
+	};
+	const byX = /* @__PURE__ */ new Map();
+	const byY = /* @__PURE__ */ new Map();
+	for (let i = 0; i < nodes.length; i++) {
+		const node = nodes[i];
+		const xsList = byX.get(node.x) ?? [];
+		xsList.push(i);
+		byX.set(node.x, xsList);
+		const ysList = byY.get(node.y) ?? [];
+		ysList.push(i);
+		byY.set(node.y, ysList);
+	}
+	for (const list of byX.values()) {
+		list.sort((a, b) => nodes[a].y - nodes[b].y);
+		for (let i = 1; i < list.length; i++) {
+			const a = nodes[list[i - 1]];
+			const b = nodes[list[i]];
+			if (!segmentHitsObstacles(a, b, obstacles)) {
+				const length = manhattan$1(a, b) + contourProximityPenalty(a, b, obstacles);
+				pushEdge(list[i - 1], list[i], "v", length);
+				pushEdge(list[i], list[i - 1], "v", length);
+			}
+		}
+	}
+	for (const list of byY.values()) {
+		list.sort((a, b) => nodes[a].x - nodes[b].x);
+		for (let i = 1; i < list.length; i++) {
+			const a = nodes[list[i - 1]];
+			const b = nodes[list[i]];
+			if (!segmentHitsObstacles(a, b, obstacles)) {
+				const length = manhattan$1(a, b) + contourProximityPenalty(a, b, obstacles);
+				pushEdge(list[i - 1], list[i], "h", length);
+				pushEdge(list[i], list[i - 1], "h", length);
+			}
+		}
+	}
+	return {
+		nodes,
+		edges,
+		startIdx,
+		goalIdx
+	};
+}
+function searchMidPath(nodes, edges, startIdx, goalIdx) {
+	const makeStateKey = (node, dir) => `${node}:${dir}`;
+	const open = [];
+	const best = /* @__PURE__ */ new Map();
+	const prev = /* @__PURE__ */ new Map();
+	const startKey = makeStateKey(startIdx, "s");
+	best.set(startKey, 0);
+	open.push({
+		node: startIdx,
+		dir: "s",
+		g: 0,
+		f: manhattan$1(nodes[startIdx], nodes[goalIdx]),
+		key: startKey
+	});
+	let goalKey = null;
+	while (open.length > 0) {
+		let bestIdx = 0;
+		for (let i = 1; i < open.length; i++) if (open[i].f < open[bestIdx].f) bestIdx = i;
+		const current = open.splice(bestIdx, 1)[0];
+		if (current.node === goalIdx) {
+			goalKey = current.key;
+			break;
+		}
+		for (const edge of edges.get(current.node) ?? []) {
+			const nextDir = edge.dir;
+			let stepCost = edge.length;
+			if (current.dir !== "s" && current.dir !== nextDir) stepCost += BEND_PENALTY;
+			const nextG = current.g + stepCost;
+			const nextKey = makeStateKey(edge.to, nextDir);
+			if (nextG >= (best.get(nextKey) ?? Infinity)) continue;
+			best.set(nextKey, nextG);
+			prev.set(nextKey, current.key);
+			open.push({
+				node: edge.to,
+				dir: nextDir,
+				g: nextG,
+				f: nextG + manhattan$1(nodes[edge.to], nodes[goalIdx]),
+				key: nextKey
+			});
+		}
+	}
+	if (!goalKey) return null;
+	const path = [];
+	let key = goalKey;
+	while (key) {
+		const nodeIdx = Number(key.split(":")[0]);
+		path.unshift(nodes[nodeIdx]);
+		key = prev.get(key);
+	}
+	return path;
+}
+function pathIsValid(path, obstacles) {
+	for (let i = 1; i < path.length; i++) if (segmentHitsObstacles(path[i - 1], path[i], obstacles)) return false;
+	return true;
+}
+/** Always orthogonal: never emit a diagonal between startExit and endEntry. */
+function orthogonalElbow(startExit, endEntry) {
+	if (Math.abs(startExit.x - endEntry.x) < .001 || Math.abs(startExit.y - endEntry.y) < .001) return [startExit, endEntry];
+	return [
+		startExit,
+		{
+			x: startExit.x,
+			y: endEntry.y
+		},
+		endEntry
+	];
+}
+function fallbackOuterRoute(startExit, endEntry, obstacles) {
+	if (obstacles.length === 0) return orthogonalElbow(startExit, endEntry);
+	const u = unionBBox(obstacles);
+	const pad = 1;
+	const top = u.y - pad;
+	const bottom = u.y + u.height + pad;
+	const left = u.x - pad;
+	const right = u.x + u.width + pad;
+	const candidates = [
+		[
+			startExit,
+			{
+				x: startExit.x,
+				y: top
+			},
+			{
+				x: endEntry.x,
+				y: top
+			},
+			endEntry
+		],
+		[
+			startExit,
+			{
+				x: startExit.x,
+				y: bottom
+			},
+			{
+				x: endEntry.x,
+				y: bottom
+			},
+			endEntry
+		],
+		[
+			startExit,
+			{
+				x: left,
+				y: startExit.y
+			},
+			{
+				x: left,
+				y: endEntry.y
+			},
+			endEntry
+		],
+		[
+			startExit,
+			{
+				x: right,
+				y: startExit.y
+			},
+			{
+				x: right,
+				y: endEntry.y
+			},
+			endEntry
+		],
+		[
+			startExit,
+			{
+				x: startExit.x,
+				y: endEntry.y
+			},
+			endEntry
+		],
+		[
+			startExit,
+			{
+				x: endEntry.x,
+				y: startExit.y
+			},
+			endEntry
+		]
+	];
+	let best = null;
+	let bestLen = Infinity;
+	for (const candidate of candidates) {
+		const simplified = simplifyPath$1(candidate);
+		if (!pathIsValid(simplified, obstacles)) continue;
+		const len = simplified.reduce((sum, p, i) => {
+			if (i === 0) return 0;
+			return sum + manhattan$1(simplified[i - 1], p);
+		}, 0);
+		if (len < bestLen) {
+			bestLen = len;
+			best = simplified;
+		}
+	}
+	return best ?? orthogonalElbow(startExit, endEntry);
+}
+function routeMidPath(startExit, endEntry, obstacles, parent, target, margin) {
+	if (Math.abs(startExit.x - endEntry.x) < .001 || Math.abs(startExit.y - endEntry.y) < .001) {
+		const direct = [startExit, endEntry];
+		if (pathIsValid(direct, obstacles)) return direct;
+	}
+	const graph = buildCornerGraph(startExit, endEntry, obstacles, parent, target, margin);
+	if (graph) {
+		const mid = searchMidPath(graph.nodes, graph.edges, graph.startIdx, graph.goalIdx);
+		if (mid && pathIsValid(mid, obstacles)) return mid;
+	}
+	return fallbackOuterRoute(startExit, endEntry, obstacles);
+}
+function routeOrthogonalAround(input) {
+	const margin = input.margin ?? DEFAULT_MARGIN;
+	const exitDistance = input.exitDistance ?? DEFAULT_EXIT;
+	const exitBlocker = input.parent ?? input.source;
+	const rawStartExit = computeStartExit(input.from, input.fromDir, exitBlocker, margin, exitDistance);
+	const gapNeighbor = input.parent ?? input.source;
+	const peeledTargetNeighbor = input.target && gapNeighbor ? peelForFacingGap(input.target, gapNeighbor) : null;
+	const rawEndEntry = computeEndEntry(input.to, input.toDir, exitDistance, peeledTargetNeighbor?.a, peeledTargetNeighbor?.b);
+	const { startExit, endEntry } = clampFacingExitEntry(input.from, input.to, input.fromDir, input.toDir, rawStartExit, rawEndEntry);
+	let sourceObs = input.source ? expandRect(input.source, margin) : void 0;
+	let parentObs = input.parent ? expandRect(input.parent, margin) : void 0;
+	let targetObs = input.target ? expandRect(input.target, margin) : void 0;
+	const openCorridor = (expA, expB, inputA, inputB) => {
+		const peeled = peelForFacingGap(inputA, inputB);
+		if (peeled) return preserveFacingGap(expA, expB, peeled.a, peeled.b);
+		return preserveFacingGap(expA, expB, inputA, inputB);
+	};
+	if (parentObs && targetObs && input.parent && input.target) [parentObs, targetObs] = openCorridor(parentObs, targetObs, input.parent, input.target);
+	else if (sourceObs && targetObs && input.source && input.target) [sourceObs, targetObs] = openCorridor(sourceObs, targetObs, input.source, input.target);
+	if (sourceObs && parentObs && input.source && input.parent) [sourceObs, parentObs] = openCorridor(sourceObs, parentObs, input.source, input.parent);
+	const obstacles = [];
+	if (sourceObs) obstacles.push(sourceObs);
+	if (parentObs) obstacles.push(parentObs);
+	if (targetObs) obstacles.push(targetObs);
+	const peeledLattice = input.parent && input.target ? peelForFacingGap(input.parent, input.target) : input.source && input.target ? peelForFacingGap(input.source, input.target) : null;
+	const mid = routeMidPath(startExit, endEntry, obstacles, peeledLattice?.a ?? input.parent ?? input.source, peeledLattice?.b ?? input.target, margin).slice(1, -1);
+	const lastMid = mid[mid.length - 1];
+	const alreadyApproaching = !!lastMid && isOnApproachOutside(lastMid, input.to, input.toDir, 1);
+	return simplifyPath$1(ensureOrthogonalPath([
+		input.from,
+		startExit,
+		...mid,
+		...alreadyApproaching ? [] : [endEntry],
+		input.to
+	]));
+}
+/** Insert elbows so no consecutive points form a diagonal (safety net). */
+function ensureOrthogonalPath(path) {
+	if (path.length < 2) return path;
+	const out = [path[0]];
+	for (let i = 1; i < path.length; i++) {
+		const prev = out[out.length - 1];
+		const next = path[i];
+		if (!(Math.abs(prev.x - next.x) < .001 || Math.abs(prev.y - next.y) < .001)) out.push({
+			x: prev.x,
+			y: next.y
+		});
+		out.push(next);
+	}
+	return out;
+}
+function isOnApproachOutside(p, to, toDir, minClearance) {
+	switch (toDir) {
+		case "top": return Math.abs(p.x - to.x) < .001 && p.y <= to.y - minClearance;
+		case "bottom": return Math.abs(p.x - to.x) < .001 && p.y >= to.y + minClearance;
+		case "left": return Math.abs(p.y - to.y) < .001 && p.x <= to.x - minClearance;
+		case "right": return Math.abs(p.y - to.y) < .001 && p.x >= to.x + minClearance;
+	}
+}
+//#endregion
+//#region src/utils/routeDebug.ts
+function isRouteDebugEnabled() {
+	if (typeof globalThis === "undefined") return false;
+	const g = globalThis;
+	if (g.__PAPIRUS_ROUTE_DEBUG__ === true || g.__PAPIRUS_ROUTE_DEBUG__ === 1) return true;
+	try {
+		if (typeof localStorage !== "undefined" && localStorage.getItem("papirusRouteDebug") === "1") return true;
+	} catch {}
+	return false;
+}
+function routeDebug(tag, payload) {
+	if (!isRouteDebugEnabled()) return;
+	console.log(`[papirus:route] ${tag}`, payload);
+}
+//#endregion
 //#region src/elements/paths/PolylinePathStrategy.ts
+function isSide(v) {
+	return v === "top" || v === "right" || v === "bottom" || v === "left";
+}
+function resolveRoutingRoles(from, to, obstacles) {
+	const target = obstacles.find((o) => o.role === "target") ?? obstacles.find((o) => {
+		const onVertical = (Math.abs(to.x - o.x) < 1 || Math.abs(to.x - (o.x + o.width)) < 1) && to.y >= o.y - 1 && to.y <= o.y + o.height + 1;
+		const onHorizontal = (Math.abs(to.y - o.y) < 1 || Math.abs(to.y - (o.y + o.height)) < 1) && to.x >= o.x - 1 && to.x <= o.x + o.width + 1;
+		return onVertical || onHorizontal;
+	});
+	const source = obstacles.find((o) => o.role === "source" && o !== target);
+	return {
+		parent: obstacles.find((o) => o !== target && o !== source && o.role !== "source" && from.x >= o.x && from.x <= o.x + o.width && from.y >= o.y && from.y <= o.y + o.height),
+		source,
+		target
+	};
+}
 var MIN_SEGMENT_LENGTH = 20;
 var SELF_LOOP_MIN_DISTANCE$1 = 1;
 var SELF_LOOP_OFFSET$1 = 42;
@@ -3855,27 +4672,66 @@ function moveByDir(point, dir, distance) {
 		default: return point;
 	}
 }
-function inferDir(from, to) {
+/** Push `point` along `dir` until it clears every obstacle (plus margin). */
+function moveOutsideObstacles(point, dir, obstacles, minDistance) {
+	if (!dir || obstacles.length === 0) return moveByDir(point, dir, minDistance);
+	const expanded = expandObstacles(obstacles, OBSTACLE_MARGIN);
+	let dist = minDistance;
+	let candidate = moveByDir(point, dir, dist);
+	const step = 16;
+	const maxDist = 4e3;
+	while (dist < maxDist && expanded.some((obstacle) => pointInsideObstacle(candidate, obstacle))) {
+		dist += step;
+		candidate = moveByDir(point, dir, dist);
+	}
+	return candidate;
+}
+function inferExitDir(from, to) {
 	const dx = to.x - from.x;
 	const dy = to.y - from.y;
 	if (Math.abs(dx) >= Math.abs(dy)) return dx >= 0 ? "right" : "left";
 	return dy >= 0 ? "bottom" : "top";
 }
-function oppositeDir(dir) {
-	switch (dir) {
-		case "left": return "right";
-		case "right": return "left";
-		case "top": return "bottom";
-		case "bottom": return "top";
-		default: return dir;
+/** Outward side at `to` we should approach from (not opposite of fromDir). */
+function inferApproachDir(from, to) {
+	const dx = from.x - to.x;
+	const dy = from.y - to.y;
+	if (Math.abs(dy) > 1) return dy >= 0 ? "bottom" : "top";
+	if (Math.abs(dx) > 1) return dx >= 0 ? "right" : "left";
+	return dy >= 0 ? "bottom" : "top";
+}
+/** Which side of `target` the attachment point `to` lies on (border hit). */
+function sideOfPointOnRect(to, target) {
+	const onLeft = Math.abs(to.x - target.x) <= 1;
+	const onRight = Math.abs(to.x - (target.x + target.width)) <= 1;
+	const onTop = Math.abs(to.y - target.y) <= 1;
+	const onBottom = Math.abs(to.y - (target.y + target.height)) <= 1;
+	if (onTop && !onLeft && !onRight) return "top";
+	if (onBottom && !onLeft && !onRight) return "bottom";
+	if (onLeft && !onTop && !onBottom) return "left";
+	if (onRight && !onTop && !onBottom) return "right";
+}
+/**
+* Resolve approach side at `to`.
+* Prefer the side of the target rect where `to` actually sits — never override a
+* left/right attachment with top/bottom from source geometry (that puts endEntry
+* inside the target and draws the last bend through the node).
+*/
+function resolveApproachDir(from, to, toDir, target) {
+	if (target) {
+		const side = sideOfPointOnRect(to, target);
+		if (side) return side;
 	}
+	if (toDir && isSide(toDir)) return toDir;
+	return inferApproachDir(from, to);
 }
 function buildRoutedPolyline(from, to, fromDir, toDir, obstacles) {
 	if (obstacles.length === 0) return null;
-	const effectiveFromDir = fromDir ?? inferDir(from, to);
-	const effectiveToDir = toDir ?? oppositeDir(effectiveFromDir);
-	const startExit = moveByDir(from, effectiveFromDir, ROUTE_EXIT_DISTANCE);
-	const endEntry = moveByDir(to, effectiveToDir, ROUTE_EXIT_DISTANCE);
+	const effectiveFromDir = fromDir ?? inferExitDir(from, to);
+	const { target: routedTarget } = resolveRoutingRoles(from, to, obstacles);
+	const effectiveToDir = resolveApproachDir(from, to, toDir, routedTarget);
+	const startExit = moveOutsideObstacles(from, effectiveFromDir, obstacles, ROUTE_EXIT_DISTANCE);
+	const endEntry = moveOutsideObstacles(to, effectiveToDir, obstacles, ROUTE_EXIT_DISTANCE);
 	const expanded = expandObstacles(obstacles, OBSTACLE_MARGIN);
 	const xs = new Set([startExit.x, endEntry.x]);
 	const ys = new Set([startExit.y, endEntry.y]);
@@ -4020,12 +4876,11 @@ var PolylinePathStrategy = class {
 	calculatePath(from, to, fromDir, toDir, _options) {
 		const controlPoints = _options?.controlPoints;
 		if (_options?.editablePolyline) {
-			if (controlPoints && controlPoints.length > 0) return [
+			const path = controlPoints && controlPoints.length > 0 ? [
 				from,
 				...controlPoints,
 				to
-			];
-			return [
+			] : [
 				from,
 				{
 					x: (from.x + to.x) / 2,
@@ -4033,14 +4888,32 @@ var PolylinePathStrategy = class {
 				},
 				to
 			];
+			routeDebug("polyline.via", {
+				via: "editable",
+				path
+			});
+			return path;
 		}
 		const dist = distance(from, to);
 		const selfLoop = _options?.selfLoop ?? false;
 		const obstacles = _options?.obstacles ?? [];
-		if (!selfLoop && dist < OBSTACLE_ROUTING_DISTANCE) {
-			const routed = buildRoutedPolyline(from, to, fromDir, toDir, obstacles);
-			if (routed) return routed;
-		}
+		const finish = (via, path) => {
+			const roles = resolveRoutingRoles(from, to, obstacles);
+			routeDebug("polyline.via", {
+				via,
+				fromDir,
+				toDir,
+				approachDir: roles.target ? resolveApproachDir(from, to, toDir, roles.target) : toDir,
+				roles: {
+					parent: roles.parent?.id,
+					source: roles.source?.id,
+					target: roles.target?.id
+				},
+				obstacleRoles: obstacles.map((o) => `${o.id}:${o.role ?? "?"}`),
+				path: path.map((p) => `${Math.round(p.x)},${Math.round(p.y)}`).join(" → ")
+			});
+			return path;
+		};
 		if (selfLoop && dist < SELF_LOOP_MIN_DISTANCE$1 && (fromDir || toDir)) switch (fromDir ?? toDir) {
 			case "bottom": return [
 				from,
@@ -4168,9 +5041,40 @@ var PolylinePathStrategy = class {
 				to
 			];
 		}
-		if (fromDir || toDir) return this.calculateDirectedPath(from, to, fromDir, toDir);
+		if (!selfLoop && isSide(fromDir) && isSide(toDir)) {
+			const { parent, source, target } = resolveRoutingRoles(from, to, obstacles);
+			const approachDir = resolveApproachDir(from, to, toDir, target);
+			if ((parent || source || target) && isSide(approachDir)) return finish("routeOrthogonalAround", routeOrthogonalAround({
+				from,
+				to,
+				fromDir,
+				toDir: approachDir,
+				parent,
+				source,
+				target,
+				margin: 4,
+				exitDistance: 20
+			}));
+			routeDebug("polyline.via", {
+				via: "roles-missed-around",
+				fromDir,
+				toDir,
+				approachDir,
+				roles: {
+					parent: parent?.id,
+					source: source?.id,
+					target: target?.id
+				},
+				obstacleRoles: obstacles.map((o) => `${o.id}:${o.role ?? "?"}`)
+			});
+		}
+		if (!selfLoop && dist < OBSTACLE_ROUTING_DISTANCE) {
+			const routed = buildRoutedPolyline(from, to, fromDir, toDir, obstacles);
+			if (routed) return finish("buildRoutedPolyline", routed);
+		}
+		if (fromDir || toDir) return finish("calculateDirectedPath", this.calculateDirectedPath(from, to, fromDir, toDir));
 		const midX = (from.x + to.x) / 2;
-		if (Math.abs(to.x - from.x) > Math.abs(to.y - from.y)) return [
+		if (Math.abs(to.x - from.x) > Math.abs(to.y - from.y)) return finish("manhattan-h", [
 			from,
 			{
 				x: midX,
@@ -4181,9 +5085,9 @@ var PolylinePathStrategy = class {
 				y: to.y
 			},
 			to
-		];
+		]);
 		const midY = (from.y + to.y) / 2;
-		return [
+		return finish("manhattan-v", [
 			from,
 			{
 				x: from.x,
@@ -4194,7 +5098,7 @@ var PolylinePathStrategy = class {
 				y: midY
 			},
 			to
-		];
+		]);
 	}
 	calculateDirectedPath(from, to, fromDir, toDir) {
 		const points = [from];
@@ -4248,15 +5152,39 @@ var PolylinePathStrategy = class {
 					y: to.y
 				});
 			}
-		} else if (fromVertical && toHorizontal) points.push({
-			x: from.x,
-			y: to.y
-		});
-		else if (fromHorizontal && toVertical) points.push({
-			x: to.x,
-			y: from.y
-		});
-		else {
+		} else if (fromVertical && toHorizontal) {
+			const exitY = fromDir === "top" ? from.y - MIN_SEGMENT_LENGTH : from.y + MIN_SEGMENT_LENGTH;
+			const entryX = toDir === "left" ? to.x - MIN_SEGMENT_LENGTH : to.x + MIN_SEGMENT_LENGTH;
+			const jogX = (from.x + to.x) / 2;
+			const approachX = Math.abs(jogX - to.x) >= MIN_SEGMENT_LENGTH ? jogX : entryX;
+			points.push({
+				x: from.x,
+				y: exitY
+			});
+			points.push({
+				x: approachX,
+				y: exitY
+			});
+			points.push({
+				x: approachX,
+				y: to.y
+			});
+		} else if (fromHorizontal && toVertical) {
+			const exitX = fromDir === "left" ? from.x - MIN_SEGMENT_LENGTH : from.x + MIN_SEGMENT_LENGTH;
+			const jogY = (from.y + to.y) / 2;
+			points.push({
+				x: exitX,
+				y: from.y
+			});
+			points.push({
+				x: exitX,
+				y: jogY
+			});
+			points.push({
+				x: to.x,
+				y: jogY
+			});
+		} else {
 			const midX = (from.x + to.x) / 2;
 			points.push({
 				x: midX,
@@ -4872,12 +5800,34 @@ function getEdgeLabelRotation(options) {
 	return angle;
 }
 //#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/elements/Edge.ts
 var DEFAULT_EDGE_STYLE = {
 	strokeColor: "#666666",
 	strokeWidth: 2,
 	opacity: 1
 };
+/** Compare path options that affect polyline routing (not control-point identity). */
+function routingOptionsEqual(a, b) {
+	const aObs = a?.obstacles;
+	const bObs = b?.obstacles;
+	if (aObs === bObs) return true;
+	if (!aObs || !bObs) return !aObs && !bObs;
+	if (aObs.length !== bObs.length) return false;
+	for (let i = 0; i < aObs.length; i++) {
+		const left = aObs[i];
+		const right = bObs[i];
+		if (left.id !== right.id || left.role !== right.role || left.x !== right.x || left.y !== right.y || left.width !== right.width || left.height !== right.height) return false;
+	}
+	return true;
+}
 /**
 * Connection edge between nodes
 */
@@ -5223,8 +6173,15 @@ 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) {
+		const geometryUnchanged = 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;
+		const routingOptionsChanged = !routingOptionsEqual(this._pathOptions, options);
+		if (geometryUnchanged && !routingOptionsChanged) {
 			this._pathOptions = options;
+			routeDebug("edge.updateEndpoints:skip", {
+				id: this.id,
+				type: this._type,
+				reason: "geometry+routing unchanged"
+			});
 			return;
 		}
 		this._fromPoint = fromPoint;
@@ -5244,6 +6201,51 @@ var Edge = class extends Element {
 			editablePolyline: this.isEditablePolyline(),
 			selfLoop: this._from.nodeId === this._to.nodeId
 		});
+		if (this._type === "polyline" || this._type === "editable-polyline" || this._type === "bezier") {
+			const obstacles = this._pathOptions?.obstacles ?? [];
+			const segs = [];
+			for (let i = 1; i < this._path.length; i++) {
+				const a = this._path[i - 1];
+				const b = this._path[i];
+				const dx = b.x - a.x;
+				const dy = b.y - a.y;
+				const axis = Math.abs(dy) < .01 ? "H" : Math.abs(dx) < .01 ? "V" : `DIAG(${dx.toFixed(0)},${dy.toFixed(0)})`;
+				segs.push({
+					axis,
+					len: Math.round(Math.abs(dx) + Math.abs(dy)),
+					a: `${Math.round(a.x)},${Math.round(a.y)}`,
+					b: `${Math.round(b.x)},${Math.round(b.y)}`
+				});
+			}
+			routeDebug("edge.recalculatePath", {
+				id: this.id,
+				type: this._type,
+				from: {
+					nodeId: this._from.nodeId,
+					portId: isNodeEdgeEndpoint(this._from) ? this._from.portId : void 0,
+					outlineParam: isNodeEdgeEndpoint(this._from) ? this._from.outlineParam : void 0,
+					point: `${Math.round(this._fromPoint.x)},${Math.round(this._fromPoint.y)}`,
+					dir: this._fromDir
+				},
+				to: {
+					nodeId: this._to.nodeId,
+					portId: isNodeEdgeEndpoint(this._to) ? this._to.portId : void 0,
+					outlineParam: isNodeEdgeEndpoint(this._to) ? this._to.outlineParam : void 0,
+					point: `${Math.round(this._toPoint.x)},${Math.round(this._toPoint.y)}`,
+					dir: this._toDir
+				},
+				lockAnchors: this.lockAnchors,
+				obstacleCount: obstacles.length,
+				obstacles: obstacles.map((o) => ({
+					id: o.id,
+					role: o.role,
+					box: `${Math.round(o.x)},${Math.round(o.y)} ${Math.round(o.width)}x${Math.round(o.height)}`
+				})),
+				path: this._path.map((p) => `${Math.round(p.x)},${Math.round(p.y)}`).join(" → "),
+				segments: segs,
+				controlPoints: this._controlPoints?.length ?? 0
+			});
+		}
 		this.updateBounds();
 		this.markDirty();
 	}
@@ -6971,14 +7973,6 @@ var ContextMenuManager = class extends EventEmitter {
 	}
 };
 //#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 {
@@ -6986,7 +7980,7 @@ var EdgeEndpointUpdater = class {
 		this.host = host;
 	}
 	updateForDrag() {
-		this.update(false);
+		this.update(true);
 	}
 	updateAll() {
 		this.update(true);
@@ -7014,10 +8008,47 @@ var EdgeEndpointUpdater = class {
 		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);
+		if (includeRoutingObstacles) {
+			this.preferFacingSidePorts(edge, fromNode, toNode);
+			this.lockAnchors(edge, fromNode, toNode);
+		}
 		const from = this.resolveNodeEndpoint(fromNode, edge.from, toNode.getCenter(), edge.lockAnchors);
 		const to = this.resolveNodeEndpoint(toNode, edge.to, fromNode.getCenter(), edge.lockAnchors);
-		edge.updateEndpoints(from.point, to.point, from.direction, to.direction, obstacles ? { obstacles } : void 0);
+		const fromId = edge.from.nodeId;
+		const toId = edge.to.nodeId;
+		const routingObstacles = obstacles?.map((obstacle) => {
+			if (obstacle.id === fromId) return {
+				...obstacle,
+				role: "source"
+			};
+			if (obstacle.id === toId) return {
+				...obstacle,
+				role: "target"
+			};
+			return obstacle;
+		});
+		routeDebug("updater.nodeNode", {
+			edgeId: edge.id,
+			type: edge.type,
+			includeRoutingObstacles,
+			lockAnchors: edge.lockAnchors,
+			from: {
+				nodeId: fromId,
+				portId: edge.from.portId,
+				outlineParam: edge.from.outlineParam,
+				point: `${Math.round(from.point.x)},${Math.round(from.point.y)}`,
+				dir: from.direction
+			},
+			to: {
+				nodeId: toId,
+				portId: edge.to.portId,
+				outlineParam: edge.to.outlineParam,
+				point: `${Math.round(to.point.x)},${Math.round(to.point.y)}`,
+				dir: to.direction
+			},
+			obstacleCount: routingObstacles?.length ?? 0
+		});
+		edge.updateEndpoints(from.point, to.point, from.direction, to.direction, routingObstacles ? { obstacles: routingObstacles } : void 0);
 	}
 	/**
 	* @returns true when the resolved geometry changed enough to warrant another pass
@@ -7067,6 +8098,79 @@ var EdgeEndpointUpdater = class {
 		}
 	}
 	/**
+	* When nodes are clearly stacked, retarget side ports that would force the
+	* polyline to approach along the long edge (contour crawl).
+	*
+	* Uses bounding-box gaps (not center dx/dy): a large horizontal offset must not
+	* flip bottom→left while the source is still below the target — that reintroduces
+	* the left-edge contour jog when the user drags the node leftward.
+	*
+	* - Always set facing ports when unset (so lockAnchors does not pick left/right).
+	* - Rewrite target left/right → top/bottom when there is a clear vertical gap.
+	* - Do not rewrite an intentional source side exit (e.g. left exit from a nested
+	*   component around its parent).
+	*/
+	preferFacingSidePorts(edge, fromNode, toNode) {
+		if (!edge.lockAnchors) return;
+		if (!isNodeEdgeEndpoint(edge.from) || !isNodeEdgeEndpoint(edge.to)) return;
+		if (edge.from.outlineParam !== void 0 || edge.to.outlineParam !== void 0) return;
+		const fromB = fromNode.getBounds();
+		const toB = toNode.getBounds();
+		const fromBelow = fromB.y - (toB.y + toB.height);
+		const fromAbove = toB.y - (fromB.y + fromB.height);
+		const fromRight = fromB.x - (toB.x + toB.width);
+		const fromLeft = toB.x - (fromB.x + fromB.width);
+		const fc = fromNode.getCenter();
+		const tc = toNode.getCenter();
+		if (fromBelow > 0 || fromAbove > 0) {
+			const fromSide = fromBelow > 0 ? "top" : "bottom";
+			const toSide = fromBelow > 0 ? "bottom" : "top";
+			const curFrom = this.portSide(edge.from.portId);
+			const curTo = this.portSide(edge.to.portId);
+			if (!curFrom) this.setEndpointSidePort(edge, "from", fromNode, fromSide, tc);
+			if (!curTo || curTo === "left" || curTo === "right" || curTo === toSide) this.setEndpointSidePort(edge, "to", toNode, toSide, fc);
+			return;
+		}
+		if (fromLeft > 0 || fromRight > 0) {
+			const fromSide = fromRight > 0 ? "left" : "right";
+			const toSide = fromRight > 0 ? "right" : "left";
+			const curFrom = this.portSide(edge.from.portId);
+			const curTo = this.portSide(edge.to.portId);
+			if (!curFrom) this.setEndpointSidePort(edge, "from", fromNode, fromSide, tc);
+			if (!curTo || curTo === "top" || curTo === "bottom") this.setEndpointSidePort(edge, "to", toNode, toSide, fc);
+		}
+	}
+	portSide(portId) {
+		if (!portId?.startsWith("anchor:")) return void 0;
+		const side = portId.slice(ANCHOR_PORT_PREFIX.length).split(":")[0];
+		if (side === "top" || side === "right" || side === "bottom" || side === "left") return side;
+	}
+	nearestAnchorOnSide(node, side, toward) {
+		const anchors = node.getAnchors().filter((a) => a.id.startsWith(`${side}:`));
+		if (anchors.length === 0) return null;
+		let best = anchors[0];
+		let minDist = Infinity;
+		for (const anchor of anchors) {
+			const dist = (anchor.point.x - toward.x) ** 2 + (anchor.point.y - toward.y) ** 2;
+			if (dist < minDist) {
+				minDist = dist;
+				best = anchor;
+			}
+		}
+		return best;
+	}
+	setEndpointSidePort(edge, end, node, side, toward) {
+		const anchor = this.nearestAnchorOnSide(node, side, toward);
+		if (!anchor) return;
+		const next = {
+			...end === "from" ? edge.from : edge.to,
+			portId: `${ANCHOR_PORT_PREFIX}${anchor.id}`,
+			outlineParam: void 0
+		};
+		if (end === "from") edge.from = next;
+		else edge.to = next;
+	}
+	/**
 	* Resolve a node endpoint:
 	* - lockAnchors + portId → fixed side port (wins over leftover outlineParam)
 	* - outlineParam → fixed point on outline (attach-to-outline)
@@ -7081,10 +8185,13 @@ var EdgeEndpointUpdater = class {
 				direction: anchorId.split(":")[0]
 			};
 		}
-		if (isNodeEdgeEndpoint(endpoint) && endpoint.outlineParam !== void 0) return {
-			point: node.getConnectionPointAtOutlineParam(endpoint.outlineParam),
-			direction: getDirectionFromOutlineParam(endpoint.outlineParam)
-		};
+		if (isNodeEdgeEndpoint(endpoint) && endpoint.outlineParam !== void 0) {
+			const bounds = node.getBounds();
+			return {
+				point: node.getConnectionPointAtOutlineParam(endpoint.outlineParam),
+				direction: getDirectionFromOutlineParam(endpoint.outlineParam, bounds)
+			};
+		}
 		if (toward) return this.resolveFloatingEndpoint(node, toward);
 		return { point: node.getCenter() };
 	}
@@ -8105,11 +9212,13 @@ var DiagramRenderer = class extends EventEmitter {
 	}
 	getNodeObstacles() {
 		if (this._nodeObstaclesCache !== null) return this._nodeObstaclesCache;
+		const pad = 4;
 		this._nodeObstaclesCache = Array.from(this._nodes.values()).map((node) => ({
-			x: node.x - 8,
-			y: node.y - 8,
-			width: node.width + 16,
-			height: node.height + 16,
+			id: node.id,
+			x: node.x - pad,
+			y: node.y - pad,
+			width: node.width + pad * 2,
+			height: node.height + pad * 2,
 			role: "other"
 		}));
 		return this._nodeObstaclesCache;