@statelyai/layout 0.0.4 → 0.1.0

package/dist/{layered-Bp8MkxWK.mjs → layered-CZs9YWVx.mjs}

@@ -392,7 +392,8 @@ function addDepthFirstBackEdges(input, initialReversedEdgeIds, targetOrder) {
 			const targetId = reversed ? edge.sourceId : edge.targetId;
 			if (sourceId === targetId) continue;
 			const targetState = state.get(targetId);
-			if (targetState === "active") reversedEdgeIds.add(edge.id);
+			if (targetState === "active") if (reversed) reversedEdgeIds.delete(edge.id);
+			else reversedEdgeIds.add(edge.id);
 			else if (targetState === void 0) {
 				state.set(targetId, "active");
 				stack.push({
@@ -664,7 +665,7 @@ function applyLayerConstraintOrientation(input, orientation) {
 		if (reversedEdgeIds.has(edge.id)) reversedEdgeIds.delete(edge.id);
 		else reversedEdgeIds.add(edge.id);
 	}
-	return { reversedEdgeIds };
+	return { reversedEdgeIds: addDepthFirstBackEdges(input, reversedEdgeIds, "model") };
 }
 /** Keep activated ELK partitions in ascending, contiguous layer blocks. */
 function applyPartitions(input, assignment) {
@@ -1730,7 +1731,7 @@ function applyDirectionCongruency(input, order) {
 	return { layers: order.layers.map((layer) => [...layer].reverse()) };
 }
 /** ELK post-placement one-dimensional graph compaction. */
-function applyPostCompaction(input, placement, routes) {
+function applyPostCompaction(input, placement, routes, labelEdges = input.graph.edges) {
 	const strategy = input.settings["compaction.postCompaction.strategy"] ?? "NONE";
 	input.settings["compaction.postCompaction.constraints"];
 	if (strategy === "NONE") return placement;
@@ -1778,7 +1779,15 @@ function applyPostCompaction(input, placement, routes) {
 		}
 	}
 	const verticalSpacing = (left, right) => left.kind === "node" && right.kind === "node" ? input.spacing.node : left.kind === "segment" && right.kind === "segment" && left.edgeId === right.edgeId ? 1 : Number(input.settings[left.kind === "segment" && right.kind === "segment" ? "spacing.edgeEdge" : "spacing.edgeNode"] ?? 10);
-	const horizontalSpacing = (left, right) => left.kind === "node" && right.kind === "node" ? input.spacing.node : left.kind === "segment" && right.kind === "segment" && left.edgeId === right.edgeId ? 0 : Number(input.settings[left.kind === "segment" && right.kind === "segment" ? "spacing.edgeEdge" : "spacing.edgeNode"] ?? 10);
+	const inlineLabelSpaceByPair = /* @__PURE__ */ new Map();
+	if (strategy !== "EDGE_LENGTH" && (input.direction === "left" || input.direction === "right")) for (const edge of labelEdges) {
+		const settings = input.edgeSettings?.(edge);
+		if (edge.sourceId === edge.targetId || settings?.["edgeLabels.inline"] !== true || (settings["edgeLabels.placement"] ?? "CENTER") !== "CENTER") continue;
+		const key = [edge.sourceId, edge.targetId].sort().join("\0");
+		inlineLabelSpaceByPair.set(key, Math.max(inlineLabelSpaceByPair.get(key) ?? 0, (edge.width ?? 0) + 2 * input.spacing.layer));
+	}
+	const labelSpace = (left, right) => left.nodeId !== void 0 && right.nodeId !== void 0 ? inlineLabelSpaceByPair.get([left.nodeId, right.nodeId].sort().join("\0")) ?? 0 : 0;
+	const horizontalSpacing = (left, right) => left.kind === "node" && right.kind === "node" ? Math.max(input.spacing.node, labelSpace(left, right)) : left.kind === "segment" && right.kind === "segment" && left.edgeId === right.edgeId ? 0 : Number(input.settings[left.kind === "segment" && right.kind === "segment" ? "spacing.edgeEdge" : "spacing.edgeNode"] ?? 10);
 	const centerLabeledEdgeIds = new Set(input.graph.edges.filter((edge) => (edge.width ?? 0) > 0 && (input.edgeSettings?.(edge)?.["edgeLabels.placement"] ?? "CENTER") === "CENTER").map((edge) => edge.id));
 	const labelFlowLocked = new Set(compactables.filter((item) => item.kind === "segment" && item.edgeId !== void 0 && centerLabeledEdgeIds.has(item.edgeId)).map((item) => item.id));
 	const compact$1 = (direction, locked = /* @__PURE__ */ new Set()) => {
@@ -1794,7 +1803,7 @@ function applyPostCompaction(input, placement, routes) {
 			if (left === right) continue;
 			const ordered = right.x > left.x || right.x === left.x && left.width < right.width;
 			const verticalCollision = right.y + right.height + verticalSpacing(left, right) > left.y + 1e-9 && right.y < left.y + left.height + verticalSpacing(left, right) - 1e-9;
-			if (!ordered || !verticalCollision) continue;
+			if (!ordered || !verticalCollision && labelSpace(left, right) === 0) continue;
 			constraints.get(left.id).push(right.id);
 			incoming.set(right.id, (incoming.get(right.id) ?? 0) + 1);
 		}
@@ -1884,7 +1893,7 @@ function applyPostCompaction(input, placement, routes) {
 		const itemByNodeId = new Map(compactables.flatMap((item) => item.kind === "node" && item.nodeId ? [[item.nodeId, item]] : []));
 		const edgeNodeSpacing = Number(input.settings["spacing.edgeNodeBetweenLayers"] ?? 10);
 		for (const edge of input.graph.edges) {
-			if (!centerLabeledEdgeIds.has(edge.id)) continue;
+			if (!centerLabeledEdgeIds.has(edge.id) || strategy !== "EDGE_LENGTH" && input.edgeSettings?.(edge)?.["edgeLabels.inline"] === true) continue;
 			const source = itemByNodeId.get(edge.sourceId);
 			const target = itemByNodeId.get(edge.targetId);
 			const originalEndpoints = originalEndpointsByEdgeId.get(edge.id);
@@ -1933,7 +1942,13 @@ function applyPostCompaction(input, placement, routes) {
 					...originalEndpoints.end,
 					x: originalEndpoints.end.x + (nodeDeltaById.get(edge.targetId) ?? 0)
 				};
-				if (routes.outsideFeedbackEdgeIds?.has(edgeId)) {
+				if (edge.sourceId === edge.targetId && routes.outsideFeedbackEdgeIds?.has(edgeId)) {
+					const delta = nodeDeltaById.get(edge.sourceId) ?? 0;
+					for (let index = 1; index + 1 < points.length; index++) points[index] = {
+						...points[index],
+						x: points[index].x + delta
+					};
+				} else if (routes.outsideFeedbackEdgeIds?.has(edgeId)) {
 					const horizontal = input.direction === "left" || input.direction === "right";
 					const startDelta = points[0].x - originalEndpoints.start.x;
 					const endDelta = points.at(-1).x - originalEndpoints.end.x;
@@ -2350,6 +2365,34 @@ function routeEdges(style) {
 				});
 			}
 		}
+		const loopSide = (distribution, index, edge) => {
+			const node = edge ? nodeById.get(edge.sourceId) : void 0;
+			const sourcePort = node?.ports?.find((port) => port.name === edge?.sourcePort);
+			const targetPort = node?.ports?.find((port) => port.name === edge?.targetPort);
+			const sourceSide = node && sourcePort ? input.portSettings?.(sourcePort, node)?.["port.side"] : void 0;
+			const targetSide = node && targetPort ? input.portSettings?.(targetPort, node)?.["port.side"] : void 0;
+			if (sourceSide && sourceSide === targetSide && [
+				"NORTH",
+				"SOUTH",
+				"EAST",
+				"WEST"
+			].includes(sourceSide)) return sourceSide;
+			return distribution === "EQUALLY" ? [
+				"NORTH",
+				"SOUTH",
+				"EAST",
+				"WEST"
+			][index % 4] : distribution === "NORTH_SOUTH" && index % 2 === 1 ? "SOUTH" : "NORTH";
+		};
+		const loopDistance = (loops, edge, side, ordering) => {
+			const axis = side === "NORTH" || side === "SOUTH" ? "height" : "width";
+			const ordered = ordering === "REVERSE_STACKED" ? [...loops].reverse() : loops;
+			const index = ordered.indexOf(edge);
+			const spacing = Number(input.settings["spacing.nodeSelfLoop"] ?? 10);
+			const labelSpacing = Number(input.settings["spacing.edgeLabel"] ?? 2);
+			const size = (candidate) => input.edgeSettings?.(candidate)?.["edgeLabels.inline"] === true ? candidate[axis] ?? 0 : 0;
+			return spacing * (ordering === "SEQUENCED" ? 1 : index + 1) + ordered.slice(0, index).reduce((extent$1, candidate) => extent$1 + (size(candidate) > 0 ? size(candidate) + labelSpacing : 0), 0) + (size(edge) > 0 ? size(edge) / 2 + labelSpacing : 0);
+		};
 		const northReserveByLayer = /* @__PURE__ */ new Map();
 		for (const [id, loops] of selfLoopsByNodeId) {
 			const rect = mutableRects.get(id);
@@ -2379,6 +2422,41 @@ function routeEdges(style) {
 				y: candidateRect.y + reserve
 			});
 		}
+		if (style === "ORTHOGONAL") for (const axis of ["x", "y"]) {
+			const size = axis === "x" ? "width" : "height";
+			const reservations = /* @__PURE__ */ new Map();
+			for (const [id, loops] of selfLoopsByNodeId) {
+				const rect = mutableRects.get(id);
+				const node = nodeById.get(id);
+				if (!rect || !node) continue;
+				const settings = input.nodeSettings?.(node);
+				const distribution = settings?.["edgeRouting.selfLoopDistribution"] ?? "NORTH";
+				const ordering = settings?.["edgeRouting.selfLoopOrdering"] ?? "STACKED";
+				for (const [index, edge] of loops.entries()) {
+					if (input.edgeSettings?.(edge)?.["edgeLabels.inline"] !== true) continue;
+					const side = loopSide(distribution, index, edge);
+					if (axis === "y" !== (side === "NORTH" || side === "SOUTH")) continue;
+					const extent$1 = loopDistance(loops.filter((candidate, i) => loopSide(distribution, i, candidate) === side), edge, side, ordering) + (edge[size] ?? 0) / 2;
+					const negative = side === "NORTH" || side === "WEST";
+					const boundary = rect[axis] + (negative ? 0 : rect[size]);
+					const neighboringBounds = [...mutableRects.entries()].flatMap(([otherId, other]) => {
+						if (otherId === id) return [];
+						const bound = other[axis] + (negative ? other[size] : 0);
+						return negative ? bound <= boundary ? [bound] : [] : bound >= boundary ? [bound] : [];
+					});
+					const existingGap = neighboringBounds.length === 0 ? 0 : negative ? boundary - Math.max(...neighboringBounds) : Math.min(...neighboringBounds) - boundary;
+					const required = Math.max(0, extent$1 + (neighboringBounds.length > 0 ? input.spacing.node : 0) - existingGap);
+					reservations.set(boundary, Math.max(reservations.get(boundary) ?? 0, required));
+				}
+			}
+			for (const [id, rect] of mutableRects) {
+				const shift = [...reservations].reduce((sum, [boundary, extent$1]) => sum + (rect[axis] >= boundary - 1e-9 ? extent$1 : 0), 0);
+				if (shift > 0) mutableRects.set(id, {
+					...rect,
+					[axis]: rect[axis] + shift
+				});
+			}
+		}
 		const edgeLabelSideSelection = input.settings["edgeLabels.sideSelection"] ?? "SMART_DOWN";
 		if (edgeLabelSideSelection === "ALWAYS_UP" || edgeLabelSideSelection === "SMART_UP" || edgeLabelSideSelection === "DIRECTION_UP") {
 			let crossShift = 0;
@@ -2671,7 +2749,7 @@ function routeEdges(style) {
 				const slots = slotsByGap[layerNo] ?? 0;
 				const routesNearTarget = candidatesByGap[layerNo]?.some((candidate) => hasZeroFixedSideTarget(candidate.edge) && candidatesByGap[layerNo].filter(({ edge }) => edge.targetId === candidate.edge.targetId).length > candidatesByGap[layerNo].filter(({ edge }) => edge.sourceId === candidate.edge.sourceId).length);
 				const preservedGap = (existingGapByLayer[layerNo] ?? input.spacing.layer) - (routesNearTarget ? edgeEdgeSpacing : 0);
-				const gapSpacing = slots === 0 ? existingGapByLayer[layerNo] ?? input.spacing.layer : Math.max(preservesNodeFlexibilityGap || (labelExtraByGap[layerNo] ?? 0) > 0 ? preservedGap : input.spacing.layer, 2 * edgeNodeSpacing + Math.max(0, slots - 1) * edgeEdgeSpacing);
+				const gapSpacing = slots === 0 ? existingGapByLayer[layerNo] ?? input.spacing.layer : Math.max(preservesNodeFlexibilityGap || (labelExtraByGap[layerNo] ?? 0) > 0 || [...selfLoopsByNodeId].some(([id, loops]) => (flowLayerByNodeId.get(id) === layerNo || flowLayerByNodeId.get(id) === layerNo + 1) && loops.some((edge) => input.edgeSettings?.(edge)?.["edgeLabels.inline"] === true)) ? preservedGap : input.spacing.layer, 2 * edgeNodeSpacing + Math.max(0, slots - 1) * edgeEdgeSpacing);
 				nextStart = bounds.end + gapSpacing;
 			}
 			implicitEndpoints = implicitEdgeEndpoints(input, placement, orientation);
@@ -2935,7 +3013,7 @@ function routeEdges(style) {
 				const constraints = String(input.nodeSettings?.(node)?.portConstraints ?? "UNDEFINED");
 				return constraints !== "UNDEFINED" && constraints !== "FREE";
 			};
-			const fixedSideFeedback = style === "ORTHOGONAL" && !sameSideSelfLoop && (hasFixedPortSide(source) && feedbackSourcePortSide === sourceAwaySide || hasFixedPortSide(target) && feedbackTargetPortSide === targetAwaySide);
+			const fixedSideFeedback = style === "ORTHOGONAL" && !sameSideSelfLoop && (source.id !== target.id || input.edgeSettings?.(edge)?.["edgeLabels.inline"] !== true) && (hasFixedPortSide(source) && feedbackSourcePortSide === sourceAwaySide || hasFixedPortSide(target) && feedbackTargetPortSide === targetAwaySide);
 			if (input.settings.feedbackEdges === true && reversedEdge || fixedSideFeedback) {
 				if (fixedSideFeedback) outsideFeedbackEdgeIds.add(edge.id);
 				const crossSpacing = Number(input.settings["spacing.edgeNode"] ?? 10);
@@ -3066,6 +3144,7 @@ function routeEdges(style) {
 				continue;
 			}
 			if (source.id === target.id) {
+				if (style === "ORTHOGONAL" && input.edgeSettings?.(edge)?.["edgeLabels.inline"] === true) outsideFeedbackEdgeIds.add(edge.id);
 				const loops = selfLoopsByNodeId.get(source.id) ?? [edge];
 				const loopIndex = loops.indexOf(edge);
 				const spacing = Number(input.settings["spacing.nodeSelfLoop"] ?? 10);
@@ -3093,7 +3172,7 @@ function routeEdges(style) {
 						});
 						const sameSideLoopIndex = sameSideLoops.findIndex((candidate) => candidate.id === edge.id);
 						const labelSpacing = Number(input.settings["spacing.edgeLabel"] ?? 2);
-						const trackDistance = spacing + sameSideLoops.slice(0, Math.max(0, sameSideLoopIndex)).reduce((extent$1, candidate) => extent$1 + (side === "EAST" || side === "WEST" ? candidate.width ?? 0 : candidate.height ?? 0) + labelSpacing, 0);
+						const trackDistance = spacing + sameSideLoops.slice(0, Math.max(0, sameSideLoopIndex)).reduce((extent$1, candidate) => extent$1 + (side === "EAST" || side === "WEST" ? candidate.width ?? 0 : candidate.height ?? 0) + labelSpacing, 0) + ((side === "NORTH" || side === "SOUTH") && input.edgeSettings?.(edge)?.["edgeLabels.inline"] === true ? (edge.height ?? 0) / 2 + labelSpacing : 0);
 						if (side === "EAST" || side === "WEST") {
 							const nodeRects = [...placement.rectByNodeId.values()];
 							const minimumNodeX = Math.min(...nodeRects.map((rect) => rect.x));
@@ -3146,7 +3225,6 @@ function routeEdges(style) {
 						const denominator = countOnSide * 2 + 1;
 						const sequenced = ordering === "SEQUENCED";
 						const nestingIndex = ordering === "REVERSE_STACKED" ? countOnSide - indexOnSide - 1 : indexOnSide;
-						const trackIndex = sequenced ? 1 : nestingIndex + 1;
 						let startRatio;
 						let endRatio;
 						if (sequenced) if (side === "NORTH") {
@@ -3163,7 +3241,8 @@ function routeEdges(style) {
 							startRatio = (countOnSide + nestingIndex + 1) / denominator;
 							endRatio = (countOnSide - nestingIndex) / denominator;
 						}
-						const y = side === "NORTH" ? sourceRect.y - spacing * trackIndex : sourceRect.y + sourceRect.height + spacing * trackIndex;
+						const distance = loopDistance(loops.filter((candidate, i) => loopSide(distribution, i, candidate) === side), edge, side, ordering);
+						const y = side === "NORTH" ? sourceRect.y - distance : sourceRect.y + sourceRect.height + distance;
 						const start$2 = {
 							x: sourceRect.x + sourceRect.width * startRatio,
 							y: side === "NORTH" ? sourceRect.y : sourceRect.y + sourceRect.height
@@ -3192,7 +3271,8 @@ function routeEdges(style) {
 						const secondRatio = sequenced ? 1 / denominator : 2 / denominator;
 						const startRatio = side === "EAST" ? firstRatio : secondRatio;
 						const endRatio = side === "EAST" ? secondRatio : firstRatio;
-						const x = side === "EAST" ? sourceRect.x + sourceRect.width + spacing * (indexOnSide + 1) : sourceRect.x - spacing * (indexOnSide + 1);
+						const distance = input.edgeSettings?.(edge)?.["edgeLabels.inline"] === true ? loopDistance(loops.filter((candidate, i) => loopSide(distribution, i, candidate) === side), edge, side, ordering) : spacing * (indexOnSide + 1);
+						const x = side === "EAST" ? sourceRect.x + sourceRect.width + distance : sourceRect.x - distance;
 						const start$2 = {
 							x: side === "EAST" ? sourceRect.x + sourceRect.width : sourceRect.x,
 							y: sourceRect.y + sourceRect.height * startRatio
@@ -3699,6 +3779,77 @@ function getPolylineMidpoint(points) {
 	};
 }
 
+//#endregion
+//#region src/layered/separate-exterior-labels.ts
+/** Separates movable inline labels and their exterior orthogonal route tracks. */
+function separateExteriorLabels({ edges, nodeRects, direction, spacing, settings }) {
+	const horizontalFlow = direction === "left" || direction === "right";
+	const nodeCrossStart = Math.min(...nodeRects.map((rect) => horizontalFlow ? rect.y : rect.x));
+	const nodeCrossEnd = Math.max(...nodeRects.map((rect) => horizontalFlow ? rect.y + rect.height : rect.x + rect.width));
+	const flowStart = (rect) => horizontalFlow ? rect.x : rect.y;
+	const flowEnd = (rect) => horizontalFlow ? rect.x + rect.width : rect.y + rect.height;
+	const crossStart = (rect) => horizontalFlow ? rect.y : rect.x;
+	const crossEnd = (rect) => horizontalFlow ? rect.y + rect.height : rect.x + rect.width;
+	const overlaps = (left, right) => flowStart(left) < flowEnd(right) && flowEnd(left) > flowStart(right) && crossStart(left) < crossEnd(right) && crossEnd(left) > crossStart(right);
+	const labelRectByEdgeId = new Map(edges.filter((edge) => edge.width > 0 && edge.height > 0).map((edge) => [String(edge.id), {
+		x: edge.x,
+		y: edge.y,
+		width: edge.width,
+		height: edge.height
+	}]));
+	const movableLabels = edges.flatMap((edge) => {
+		const labelRect = labelRectByEdgeId.get(String(edge.id));
+		const labelSettings = settings(edge);
+		if (!labelRect || !labelSettings.inline || labelSettings.placement !== "CENTER") return [];
+		const exteriorTrack = edge.points.flatMap((point, index) => {
+			const next = edge.points[index + 1];
+			if (!next) return [];
+			const isFlowSegment = horizontalFlow ? point.y === next.y && point.x !== next.x : point.x === next.x && point.y !== next.y;
+			const trackCross = horizontalFlow ? point.y : point.x;
+			return isFlowSegment && (trackCross < nodeCrossStart || trackCross > nodeCrossEnd) ? [{
+				cross: trackCross,
+				length: horizontalFlow ? Math.abs(next.x - point.x) : Math.abs(next.y - point.y)
+			}] : [];
+		}).sort((left, right) => right.length - left.length)[0];
+		if (!exteriorTrack) return [];
+		return [{
+			edge,
+			exteriorTrack,
+			labelRect,
+			lowSide: exteriorTrack.cross < (nodeCrossStart + nodeCrossEnd) / 2
+		}];
+	});
+	movableLabels.sort((left, right) => {
+		if (left.lowSide !== right.lowSide) return left.lowSide ? -1 : 1;
+		return (left.lowSide ? crossStart(left.labelRect) - crossStart(right.labelRect) : crossStart(right.labelRect) - crossStart(left.labelRect)) || flowStart(left.labelRect) - flowStart(right.labelRect) || (String(left.edge.id) < String(right.edge.id) ? -1 : String(left.edge.id) > String(right.edge.id) ? 1 : 0);
+	});
+	for (const { edge, exteriorTrack, labelRect, lowSide } of movableLabels) {
+		const obstacles = [...nodeRects, ...[...labelRectByEdgeId.entries()].flatMap(([edgeId, rect]) => edgeId === String(edge.id) ? [] : [rect])];
+		let totalDelta = 0;
+		while (true) {
+			const blockers = obstacles.filter((rect) => overlaps(labelRect, rect));
+			if (blockers.length === 0) break;
+			const delta = (lowSide ? Math.min(...blockers.map(crossStart)) - spacing - (horizontalFlow ? edge.height : edge.width) : Math.max(...blockers.map(crossEnd)) + spacing) - crossStart(labelRect);
+			totalDelta += delta;
+			if (horizontalFlow) labelRect.y += delta;
+			else labelRect.x += delta;
+		}
+		if (totalDelta === 0) continue;
+		if (horizontalFlow) edge.y += totalDelta;
+		else edge.x += totalDelta;
+		edge.points = edge.points.map((point) => {
+			if ((horizontalFlow ? point.y : point.x) !== exteriorTrack.cross) return point;
+			return horizontalFlow ? {
+				...point,
+				y: point.y + totalDelta
+			} : {
+				...point,
+				x: point.x + totalDelta
+			};
+		});
+	}
+}
+
 //#endregion
 //#region src/layered/network-simplex.ts
 function connectedEdges(node) {
@@ -8691,30 +8842,37 @@ function runLayeredPipeline(graph, options, context) {
 	}
 	{
 		const horizontal = direction === "right" || direction === "left";
+		const targetsBySource = /* @__PURE__ */ new Map();
+		for (const edge of graph.edges) {
+			if (edge.sourceId === edge.targetId) continue;
+			const targets = targetsBySource.get(edge.sourceId) ?? /* @__PURE__ */ new Set();
+			targets.add(edge.targetId);
+			targetsBySource.set(edge.sourceId, targets);
+		}
 		for (const edge of graph.edges) {
 			if (edge.sourcePort === void 0) continue;
 			const source = graph.nodes.find((node) => node.id === edge.sourceId);
 			const targetRect = mutableRects.get(edge.targetId);
 			const sourceRect = mutableRects.get(edge.sourceId);
-			const port = source?.ports?.find((candidate) => candidate.name === edge.sourcePort);
+			const port = source?.ports?.find((candidate$1) => candidate$1.name === edge.sourcePort);
 			if (!source || !sourceRect || !targetRect || !port) continue;
 			const side = input.portSettings?.(port, source)?.["port.side"];
-			if (horizontal && side === "NORTH") mutableRects.set(edge.targetId, {
+			if (edge.sourceId === edge.targetId || (targetsBySource.get(edge.sourceId)?.size ?? 0) > 1) continue;
+			const candidate = horizontal && side === "NORTH" ? {
 				...targetRect,
 				y: sourceRect.y - (port.height ?? 0) - targetRect.height
-			});
-			else if (horizontal && side === "SOUTH") mutableRects.set(edge.targetId, {
+			} : horizontal && side === "SOUTH" ? {
 				...targetRect,
 				y: sourceRect.y + sourceRect.height + (port.height ?? 0)
-			});
-			else if (!horizontal && side === "WEST") mutableRects.set(edge.targetId, {
+			} : !horizontal && side === "WEST" ? {
 				...targetRect,
 				x: sourceRect.x - (port.width ?? 0) - targetRect.width
-			});
-			else if (!horizontal && side === "EAST") mutableRects.set(edge.targetId, {
+			} : !horizontal && side === "EAST" ? {
 				...targetRect,
 				x: sourceRect.x + sourceRect.width + (port.width ?? 0)
-			});
+			} : void 0;
+			if (!candidate || [...mutableRects].some(([id, other]) => id !== edge.targetId && other.width > 0 && other.height > 0 && candidate.x < other.x + other.width && candidate.x + candidate.width > other.x && candidate.y < other.y + other.height && candidate.y + candidate.height > other.y)) continue;
+			mutableRects.set(edge.targetId, candidate);
 		}
 	}
 	measure("port-margin-normalization", () => normalizePlacementForPortExtents(expanded.input, placement, order, expanded.orientation));
@@ -8743,7 +8901,7 @@ function runLayeredPipeline(graph, options, context) {
 	const edgeRouting = options.settings?.edgeRouting ?? "ORTHOGONAL";
 	const edgeRouter = options.strategies?.routeEdges ?? (edgeRouting === "POLYLINE" ? routeEdgesWithPolylines : edgeRouting === "SPLINES" ? routeEdgesWithSplines : routeEdgesOrthogonally);
 	let expandedRoutes = measure("edge-routing", () => edgeRouter(expanded.input, expanded.orientation, placement));
-	measure("post-compaction", () => applyPostCompaction(expanded.input, placement, expandedRoutes));
+	measure("post-compaction", () => applyPostCompaction(expanded.input, placement, expandedRoutes, graph.edges));
 	const antiparallelLabelPositions = /* @__PURE__ */ new Map();
 	const outerAntiparallelLabelIds = /* @__PURE__ */ new Set();
 	const parallelLabelPositions = /* @__PURE__ */ new Map();
@@ -9248,10 +9406,10 @@ function runLayeredPipeline(graph, options, context) {
 			const constraints = node ? options.nodeSettings?.(node)?.portConstraints : void 0;
 			return constraints === void 0 || constraints === "UNDEFINED" || constraints === "FREE";
 		};
-		const flexibleFeedbackLabel = labelPlacement === "CENTER" && inlineLabel && expanded.orientation.reversedEdgeIds.has(edge.id) && hasFlexiblePorts(sourceNode) && hasFlexiblePorts(targetNode) && sourceRect !== void 0 && targetRect !== void 0;
+		const flexibleFeedbackLabel = labelPlacement === "CENTER" && inlineLabel && edge.sourceId !== edge.targetId && expanded.orientation.reversedEdgeIds.has(edge.id) && hasFlexiblePorts(sourceNode) && hasFlexiblePorts(targetNode) && sourceRect !== void 0 && targetRect !== void 0;
 		const [beforeFlowRect, afterFlowRect] = sourceRect && targetRect ? horizontal ? sourceRect.x <= targetRect.x ? [sourceRect, targetRect] : [targetRect, sourceRect] : sourceRect.y <= targetRect.y ? [sourceRect, targetRect] : [targetRect, sourceRect] : [void 0, void 0];
 		const antiparallelLabelPosition = antiparallelLabelPositions.get(edge.id);
-		const explicitLabelPosition = (() => {
+		const outerAntiparallelLabelPosition = (() => {
 			if (!outerAntiparallelLabelIds.has(edge.id)) return void 0;
 			const edgeNodeSpacing$1 = Number(options.settings?.["spacing.edgeNode"] ?? 10);
 			if (horizontal) {
@@ -9276,9 +9434,14 @@ function runLayeredPipeline(graph, options, context) {
 				x: Math.max(...blockers.map((rect) => rect.x + rect.width)) + edgeNodeSpacing$1,
 				y: y$1
 			};
-		})() ?? antiparallelLabelPosition ?? parallelLabelPositions.get(edge.id);
-		const x = explicitLabelPosition ? explicitLabelPosition.x : flexibleFeedbackLabel ? horizontal ? (beforeFlowRect.x + beforeFlowRect.width + afterFlowRect.x - width) / 2 : targetRect.x + (targetRect.width - width) / 2 : labelPlacement === "CENTER" && horizontal && labelDummyRect ? labelDummyRect.x : routeX;
-		const y = explicitLabelPosition ? explicitLabelPosition.y : flexibleFeedbackLabel ? horizontal ? targetRect.y + (targetRect.height - height) / 2 : (beforeFlowRect.y + beforeFlowRect.height + afterFlowRect.y - height) / 2 : labelPlacement === "CENTER" && !horizontal && labelDummyRect ? labelDummyRect.y : routeY;
+		})();
+		const centerFlowPosition = options.settings?.["compaction.postCompaction.strategy"] !== "EDGE_LENGTH" && labelDummyRect === void 0 && edgeRouting === "ORTHOGONAL" && inlineLabel && labelPlacement === "CENTER" && edge.sourceId !== edge.targetId && beforeFlowRect && afterFlowRect && (horizontal ? afterFlowRect.x - beforeFlowRect.x - beforeFlowRect.width >= width : afterFlowRect.y - beforeFlowRect.y - beforeFlowRect.height >= height) ? horizontal ? (beforeFlowRect.x + beforeFlowRect.width + afterFlowRect.x - width) / 2 : (beforeFlowRect.y + beforeFlowRect.height + afterFlowRect.y - height) / 2 - edgeThickness / 2 : void 0;
+		const explicitLabelPosition = (edgeRouting === "ORTHOGONAL" && labelPlacement === "CENTER" && inlineLabel && edge.sourceId === edge.targetId && points.length === 4 ? {
+			x: (points[1].x + points[2].x - width) / 2,
+			y: (points[1].y + points[2].y - height) / 2
+		} : void 0) ?? outerAntiparallelLabelPosition ?? antiparallelLabelPosition ?? parallelLabelPositions.get(edge.id);
+		const x = explicitLabelPosition ? explicitLabelPosition.x : flexibleFeedbackLabel ? horizontal ? (beforeFlowRect.x + beforeFlowRect.width + afterFlowRect.x - width) / 2 : targetRect.x + (targetRect.width - width) / 2 : centerFlowPosition !== void 0 && horizontal ? centerFlowPosition : labelPlacement === "CENTER" && horizontal && labelDummyRect ? labelDummyRect.x : routeX;
+		const y = explicitLabelPosition ? explicitLabelPosition.y : flexibleFeedbackLabel ? horizontal ? targetRect.y + (targetRect.height - height) / 2 : (beforeFlowRect.y + beforeFlowRect.height + afterFlowRect.y - height) / 2 : centerFlowPosition !== void 0 && !horizontal ? centerFlowPosition : labelPlacement === "CENTER" && !horizontal && labelDummyRect ? labelDummyRect.y : routeY;
 		return {
 			...edge,
 			x,
@@ -9289,6 +9452,19 @@ function runLayeredPipeline(graph, options, context) {
 			routing: edgeRouting === "POLYLINE" ? "polyline" : edgeRouting === "SPLINES" ? "splines" : "orthogonal"
 		};
 	});
+	if (edgeRouting === "ORTHOGONAL") separateExteriorLabels({
+		edges,
+		nodeRects: feedbackNodeRects,
+		direction,
+		spacing: Number(options.settings?.["spacing.edgeEdge"] ?? 10),
+		settings: (edge) => {
+			const edgeSettings = options.edgeSettings?.(edge);
+			return {
+				inline: edgeSettings?.["edgeLabels.inline"] === true,
+				placement: edgeSettings?.["edgeLabels.placement"] ?? "CENTER"
+			};
+		}
+	});
 	return {
 		...graph,
 		direction,

package/dist/{spore-ePWz2LtF.mjs → spore-9N0W9dZn.mjs}

@@ -1,4 +1,4 @@
-import { F as placePorts, O as getPolylineMidpoint, z as JavaRandom } from "./layered-Bp8MkxWK.mjs";
+import { F as placePorts, O as getPolylineMidpoint, z as JavaRandom } from "./layered-CZs9YWVx.mjs";
 import { getNodeSize } from "@statelyai/graph/layout";
 
 //#region src/fixed.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statelyai/layout",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "Extensible, graph-native layout algorithms for @statelyai/graph",
   "license": "EPL-2.0 OR GPL-3.0-or-later",
   "repository": {
@@ -47,6 +47,7 @@
     "@changesets/cli": "3.0.1",
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lint": "^6.9.7",
+    "@statelyai/layout-pre-exterior-label-separation": "npm:@statelyai/layout@0.0.4",
     "@types/node": "^25.0.3",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",

package/src/elkjs/index.ts

@@ -510,6 +510,7 @@ export default class ELK {
     if (
       algorithm === "layered" &&
       graph_.edges.some((edge) => {
+        if (edge.sourceId === edge.targetId) return false;
         const sourceConstraint = layerConstraintByNodeId.get(edge.sourceId);
         const targetConstraint = layerConstraintByNodeId.get(edge.targetId);
         return (
@@ -722,10 +723,15 @@ export default class ELK {
       }
       const edgeNodeSpacing = getNumberOption(layoutOptions, "spacing.edgeNodeBetweenLayers") ?? 10;
       for (const restoration of hierarchyRestorations) {
-        const route = laidOut.edges.find((edge) => edge.id === String(restoration.edge.id))?.points;
+        const nativeEdge = laidOut.edges.find((edge) => edge.id === String(restoration.edge.id));
+        const route = nativeEdge?.points;
         if (!route || route.length < 2) continue;
         const start = route[0]!;
         const end = route.at(-1)!;
+        // Decomposed ancestor/descendant edges are native self-loops. Preserve
+        // their reserved exterior route and label placement instead of treating
+        // equal endpoint coordinates as a straight inter-node connection.
+        if (nativeEdge.sourceId === nativeEdge.targetId) continue;
         if (Math.abs(cross(start) - cross(end)) < 1e-9) {
           route.splice(1, route.length - 2);
           continue;
@@ -1824,3 +1830,11 @@ function placePortLabels(node: ElkNode, globalOptions: Readonly<Record<string, u
     }
   }
 }
+
+export { compileStatechartLayout, layoutStatechart, scoreStatechartLayout } from "./statechart";
+export type {
+  StatechartScope,
+  StatechartLayoutOptions,
+  StatechartLayoutScore,
+  StatechartLayoutPlan,
+} from "./statechart";