semajsx 0.7.0 → 0.9.0

package/dist/ssg/plugins/docs-theme.mjs

@@ -1,17 +1,17 @@
 import { t as signal } from "../../signal-4PgGfydw.mjs";
 import { n as unwrap } from "../../utils-BrGmTgfG.mjs";
-import { a as jsxs, i as jsx, u as context, v as Fragment } from "../../src-Cv4rRVzv.mjs";
-import "../../src-C_aFsFJ3.mjs";
+import { a as jsxs, i as jsx, u as context, v as Fragment } from "../../src--YS4EvMz.mjs";
+import "../../src-Cm12Y2XV.mjs";
 import { G as rules, K as classes, M as createTheme, N as defineTokens, W as rule } from "../../src-DV9uwtE5.mjs";
 import "../../jsx-runtime-BFs1c0xz.mjs";
-import "../../src-CXY-7FC3.mjs";
+import "../../src-77V1Plyd.mjs";
 import "../../jsx-runtime-kv_6vBiR.mjs";
-import { d as island } from "../../resource-pm7qP-jV.mjs";
-import "../../src-CAyv9Uf9.mjs";
-import "../../document-XKyAs62C.mjs";
-import "../../client-BrupjhG0.mjs";
-import { d as defineCollection } from "../../src-SqJ6k7Xv.mjs";
-import { n as Icon, t as lucide } from "../../lucide-Ddt_N9dJ.mjs";
+import { d as island } from "../../resource-BU0Po0ez.mjs";
+import "../../src-Mucdq4zw.mjs";
+import "../../document-Cfdhi7vG.mjs";
+import "../../client-CEJQ4fit.mjs";
+import { d as defineCollection } from "../../src-BTG08Qnh.mjs";
+import { n as Icon, t as lucide } from "../../lucide-DWk3itzO.mjs";
 import { dirname, join } from "path";
 import { mkdir, writeFile } from "fs/promises";
 import { z } from "zod";
@@ -464,6 +464,7 @@ function parseNodeRef(state) {
 		const shape = parseNodeShape(state, id);
 		if (shape) {
 			if (!state.nodes.has(id)) state.nodes.set(id, shape);
+			state.nodeRefCollector?.push(id);
 			return id;
 		}
 	}
@@ -472,6 +473,7 @@ function parseNodeRef(state) {
 		label: id,
 		shape: "rect"
 	});
+	state.nodeRefCollector?.push(id);
 	return id;
 }
 function parseNodeShape(state, id) {
@@ -607,7 +609,8 @@ function parseSubgraph(state) {
 		}
 		skipSemicolon(state);
 	}
-	const nodesBefore = new Set(state.nodes.keys());
+	const childSubgraphs = [];
+	const childNodeIds = /* @__PURE__ */ new Set();
 	const nodeIds = [];
 	while (!isEof$1(state)) {
 		skipNewlines$1(state);
@@ -617,18 +620,39 @@ function parseSubgraph(state) {
 			advance$1(state);
 			break;
 		}
+		if (token.type === "keyword" && token.value === "subgraph") {
+			const sgCountBefore = state.subgraphs.length;
+			const result = parseSubgraph(state);
+			if ("message" in result) return result;
+			if (state.subgraphs.length > sgCountBefore) {
+				const child = state.subgraphs.pop();
+				childSubgraphs.push(child);
+				collectAllNodes(child, childNodeIds);
+			}
+			continue;
+		}
+		state.nodeRefCollector = [];
 		const result = parseStatement(state);
+		const refs = state.nodeRefCollector;
+		state.nodeRefCollector = void 0;
 		if (result && "message" in result) return result;
-		for (const [nodeId] of state.nodes) if (!nodesBefore.has(nodeId) && !nodeIds.includes(nodeId)) nodeIds.push(nodeId);
+		for (const nodeId of refs) if (!childNodeIds.has(nodeId) && !nodeIds.includes(nodeId)) nodeIds.push(nodeId);
 	}
-	state.subgraphs.push({
+	const sg = {
 		id: id || `subgraph_${state.subgraphs.length}`,
 		label,
 		nodes: nodeIds,
 		direction
-	});
+	};
+	if (childSubgraphs.length > 0) sg.subgraphs = childSubgraphs;
+	state.subgraphs.push(sg);
 	return { ok: true };
 }
+/** Recursively collect all node IDs owned by a subgraph and its children. */
+function collectAllNodes(sg, out) {
+	for (const id of sg.nodes) out.add(id);
+	for (const child of sg.subgraphs ?? []) collectAllNodes(child, out);
+}
 function parseArrow(arrow) {
 	const raw = arrow.endsWith("|") ? arrow.slice(0, -1) : arrow;
 	let sourceMarker = "none";
@@ -713,7 +737,8 @@ function parseSequence(input) {
 		participants: /* @__PURE__ */ new Map(),
 		messages: [],
 		blocks: [],
-		notes: []
+		notes: [],
+		noteMessageCounts: []
 	};
 	skipNewlines(state);
 	const header = peek(state);
@@ -762,7 +787,8 @@ function parseSequence(input) {
 		participants: Array.from(state.participants.values()),
 		messages: state.messages,
 		blocks: state.blocks,
-		notes: state.notes
+		notes: state.notes,
+		_noteMessageCounts: state.noteMessageCounts
 	};
 }
 function parseParticipant(state, type) {
@@ -851,6 +877,7 @@ function parseNote(state) {
 		advance(state);
 		text = readRestOfLine(state);
 	}
+	state.noteMessageCounts.push(state.messages.length);
 	state.notes.push({
 		position,
 		participants,
@@ -900,11 +927,16 @@ function parseBlock(state) {
 			parseNote(state);
 			continue;
 		}
+		if (token.type === "keyword" && isBlockKeyword(token.value)) {
+			const result = parseBlock(state);
+			if ("message" in result) return result;
+			continue;
+		}
 		if (token.type === "identifier" || token.type === "keyword") {
 			const beforeLen = state.messages.length;
 			parseMessage(state);
 			if (state.messages.length > beforeLen) {
-				const msg = state.messages.pop();
+				const msg = state.messages[state.messages.length - 1];
 				if (currentSection) currentSection.messages.push(msg);
 				else messages.push(msg);
 			}
@@ -1057,6 +1089,30 @@ const tokens$1 = defineTokens(tokenDefinition$1);
 */
 const defaultTheme = createTheme(tokens$1);
 
+//#endregion
+//#region ../mermaid/src/base.style.ts
+/**
+* Common SVG text label properties.
+* Produces: fill, stroke:none, font-family, font-size, text-anchor, dominant-baseline.
+*/
+function textLabel(fill, fontSize) {
+	return `fill: ${fill};
+  stroke: none;
+  font-family: ${tokens$1.fontFamily};
+  font-size: ${fontSize};
+  text-anchor: middle;
+  dominant-baseline: central;`;
+}
+/**
+* Common SVG box/container properties.
+* Produces: fill, stroke, stroke-width.
+*/
+function boxShape(fill, stroke, strokeWidth = 1) {
+	return `fill: ${fill};
+  stroke: ${stroke};
+  stroke-width: ${strokeWidth};`;
+}
+
 //#endregion
 //#region ../mermaid/src/edge.style.ts
 const c$14 = classes([
@@ -1103,12 +1159,7 @@ const edgeThick = rule`${c$14.edgeThick} {
   stroke-width: 3;
 }`;
 const edgeLabel = rule`${c$14.edgeLabel} {
-  fill: ${tokens$1.edgeLabelText};
-  stroke: none;
-  font-family: ${tokens$1.fontFamily};
-  font-size: 12px;
-  text-anchor: middle;
-  dominant-baseline: central;
+  ${textLabel(tokens$1.edgeLabelText, "12px")}
 }`;
 const edgeLabelBg = rule`${c$14.edgeLabelBg} {
   fill: ${tokens$1.edgeLabelBg};
@@ -1267,9 +1318,7 @@ const c$13 = classes([
 	"nodeLabel"
 ]);
 const nodeShape = rule`${c$13.nodeShape} {
-  fill: ${tokens$1.nodeFill};
-  stroke: ${tokens$1.nodeStroke};
-  stroke-width: ${tokens$1.edgeWidth};
+  ${boxShape(tokens$1.nodeFill, tokens$1.nodeStroke, tokens$1.edgeWidth)}
 }`;
 const nodeShapeHover = rule`${c$13.nodeShape} {
   transition: filter 0.15s ease;
@@ -1279,12 +1328,7 @@ ${c$13.nodeShape}:hover {
   filter: brightness(0.93);
 }`;
 const nodeLabel = rule`${c$13.nodeLabel} {
-  fill: ${tokens$1.nodeText};
-  stroke: none;
-  font-family: ${tokens$1.fontFamily};
-  font-size: ${tokens$1.fontSize}px;
-  text-anchor: middle;
-  dominant-baseline: central;
+  ${textLabel(tokens$1.nodeText, `${tokens$1.fontSize}px`)}
   pointer-events: none;
 }`;
 
@@ -1583,18 +1627,42 @@ const shapeMap = {
 };
 
 //#endregion
-//#region ../mermaid/src/components/edge.tsx
-const LINE_STYLE = {
-	solid: void 0,
-	dotted: edgeDotted,
-	thick: edgeThick
-};
+//#region ../mermaid/src/components/markers.ts
+/** SVG marker URL by EdgeMarker type (used by flowchart edges). */
 const MARKER_URL = {
 	arrow: "url(#mmd-arrow)",
 	dot: "url(#mmd-dot)",
 	cross: "url(#mmd-cross)",
 	none: void 0
 };
+/**
+* Resolve an ArrowType (sequence diagram) to a marker URL.
+* This bridges the sequence-specific enum to the shared marker definitions in defs.tsx.
+*/
+const SEQUENCE_MARKER = {
+	solid: "url(#mmd-arrow)",
+	dotted: "url(#mmd-arrow)",
+	solidCross: "url(#mmd-cross)",
+	dottedCross: "url(#mmd-cross)",
+	solidOpen: "url(#mmd-arrow-open)",
+	dottedOpen: "url(#mmd-arrow-open)"
+};
+/** Get marker-end URL for a sequence message arrow type. */
+function sequenceMarker(arrow) {
+	return SEQUENCE_MARKER[arrow];
+}
+/** Check if an ArrowType renders with a dashed stroke. */
+function isDottedArrow(arrow) {
+	return arrow === "dotted" || arrow === "dottedCross" || arrow === "dottedOpen";
+}
+
+//#endregion
+//#region ../mermaid/src/components/edge.tsx
+const LINE_STYLE = {
+	solid: void 0,
+	dotted: edgeDotted,
+	thick: edgeThick
+};
 function Edge(props) {
 	const { edge, path, labelPosition, labelSize } = props.positioned;
 	const lineStyle = LINE_STYLE[edge.lineStyle];
@@ -1634,9 +1702,7 @@ function Edge(props) {
 //#region ../mermaid/src/subgraph.style.ts
 const c$12 = classes(["subgraphBg", "subgraphTitle"]);
 const subgraphBg = rule`${c$12.subgraphBg} {
-  fill: ${tokens$1.subgraphFill};
-  stroke: ${tokens$1.subgraphStroke};
-  stroke-width: 1;
+  ${boxShape(tokens$1.subgraphFill, tokens$1.subgraphStroke, 1)}
 }`;
 const subgraphTitle = rule`${c$12.subgraphTitle} {
   fill: ${tokens$1.subgraphTitleText};
@@ -1666,6 +1732,171 @@ function SubgraphBox(props) {
 	});
 }
 
+//#endregion
+//#region ../mermaid/src/layout/measure.ts
+/**
+* Per-character width multipliers relative to fontSize, derived from
+* font metrics of common sans-serif typefaces (Helvetica / Arial).
+* Covers ASCII printable range; anything outside falls back to a
+* sensible default (0.55 for Latin, 1.0 for CJK / fullwidth).
+*/
+const CHAR_WIDTH = {
+	" ": .28,
+	"!": .28,
+	"'": .19,
+	",": .28,
+	".": .28,
+	":": .28,
+	";": .28,
+	i: .22,
+	j: .22,
+	l: .22,
+	f: .28,
+	r: .33,
+	t: .33,
+	I: .22,
+	"|": .22,
+	a: .5,
+	b: .55,
+	c: .5,
+	d: .55,
+	e: .5,
+	g: .55,
+	h: .55,
+	k: .5,
+	n: .55,
+	o: .55,
+	p: .55,
+	q: .55,
+	s: .5,
+	u: .55,
+	v: .5,
+	x: .5,
+	y: .5,
+	z: .5,
+	"0": .55,
+	"1": .55,
+	"2": .55,
+	"3": .55,
+	"4": .55,
+	"5": .55,
+	"6": .55,
+	"7": .55,
+	"8": .55,
+	"9": .55,
+	"-": .33,
+	"(": .33,
+	")": .33,
+	"/": .28,
+	m: .83,
+	w: .72,
+	M: .72,
+	W: .83,
+	A: .67,
+	B: .67,
+	C: .67,
+	D: .72,
+	E: .61,
+	F: .56,
+	G: .72,
+	H: .72,
+	J: .5,
+	K: .67,
+	L: .56,
+	N: .72,
+	O: .72,
+	P: .67,
+	Q: .72,
+	R: .67,
+	S: .67,
+	T: .61,
+	U: .72,
+	V: .67,
+	X: .67,
+	Y: .67,
+	Z: .61,
+	"@": .92,
+	"#": .55,
+	$: .55,
+	"%": .89,
+	"&": .67,
+	"+": .58,
+	"=": .58,
+	"<": .58,
+	">": .58,
+	_: .55,
+	"{": .33,
+	"}": .33,
+	"[": .28,
+	"]": .28,
+	"\"": .35,
+	"~": .58,
+	"^": .47,
+	"*": .39,
+	"\\": .28,
+	"`": .33,
+	"?": .56
+};
+/** Default multiplier for unlisted Latin / symbol characters. */
+const DEFAULT_CHAR_WIDTH = .55;
+/**
+* Check whether a code point is in a CJK / fullwidth Unicode range.
+* These characters are typically rendered at roughly 1em width.
+*/
+function isCJKOrFullwidth(code) {
+	return code >= 11904 && code <= 40959 || code >= 63744 && code <= 64255 || code >= 65072 && code <= 65103 || code >= 65280 && code <= 65376 || code >= 65504 && code <= 65510 || code >= 131072 && code <= 195103 || code >= 12288 && code <= 12351 || code >= 12352 && code <= 12543 || code >= 44032 && code <= 55215;
+}
+/**
+* Estimate text dimensions using per-character width tables.
+* Falls back to this when no Canvas / DOM measurement is available.
+*/
+function estimateTextSize(text, fontSize) {
+	let totalWidth = 0;
+	for (let i = 0; i < text.length; i++) {
+		const ch = text[i];
+		const known = CHAR_WIDTH[ch];
+		if (known !== void 0) totalWidth += known;
+		else {
+			const code = ch.charCodeAt(0);
+			totalWidth += isCJKOrFullwidth(code) ? 1 : DEFAULT_CHAR_WIDTH;
+		}
+	}
+	return {
+		width: totalWidth * fontSize,
+		height: fontSize * 1.4
+	};
+}
+let _ctx;
+function canvasMeasureText(text, fontSize) {
+	if (_ctx === void 0) {
+		_ctx = null;
+		try {
+			if (typeof OffscreenCanvas !== "undefined") _ctx = new OffscreenCanvas(1, 1).getContext("2d");
+			else if (typeof document !== "undefined") _ctx = document.createElement("canvas").getContext("2d");
+		} catch {}
+	}
+	if (_ctx) {
+		_ctx.font = `${fontSize}px sans-serif`;
+		return {
+			width: _ctx.measureText(text).width,
+			height: fontSize * 1.2
+		};
+	}
+	return estimateTextSize(text, fontSize);
+}
+/** Measure a node label (default 14px). */
+function measureNode(label, opts) {
+	const textSize = (opts.measureText ?? canvasMeasureText)(label, 14);
+	return {
+		width: Math.max(textSize.width + opts.nodePadding * 2, opts.nodeWidth),
+		height: Math.max(textSize.height + opts.nodePadding * 2, opts.nodeHeight)
+	};
+}
+/** Measure an edge / message label (default 12px). */
+function measureLabel(text, opts) {
+	return (opts.measureText ?? canvasMeasureText)(text, 12);
+}
+
 //#endregion
 //#region ../mermaid/src/layout/flowchart.ts
 const DEFAULT_OPTIONS$1 = {
@@ -1692,31 +1923,37 @@ function flowchartLayout(diagram, options) {
 		subgraphs: []
 	};
 	const nodeSizes = /* @__PURE__ */ new Map();
-	for (const node of nodes) nodeSizes.set(node.id, measureNode(node, opts));
+	for (const node of nodes) nodeSizes.set(node.id, measureNode(node.label, opts));
+	const selfLoops = [];
+	const nonSelfEdges = [];
+	for (const edge of edges) if (edge.source === edge.target) selfLoops.push(edge);
+	else nonSelfEdges.push(edge);
+	const backEdgeSet = /* @__PURE__ */ new Set();
 	const adj = /* @__PURE__ */ new Map();
-	const safeEdges = [];
 	const visited = /* @__PURE__ */ new Set();
 	const inStack = /* @__PURE__ */ new Set();
 	for (const node of nodes) adj.set(node.id, []);
-	for (const edge of edges) {
-		const targets = adj.get(edge.source);
-		if (targets) targets.push(edge.target);
-	}
+	for (const edge of nonSelfEdges) adj.get(edge.source)?.push(edge.target);
 	function dfs(node) {
 		visited.add(node);
 		inStack.add(node);
 		for (const neighbor of adj.get(node) ?? []) if (inStack.has(neighbor)) {
-			const edge = edges.find((e) => e.source === node && e.target === neighbor);
-			if (edge) safeEdges.push({
-				...edge,
-				source: neighbor,
-				target: node
-			});
+			const edge = nonSelfEdges.find((e) => e.source === node && e.target === neighbor);
+			if (edge) backEdgeSet.add(edge);
 		} else if (!visited.has(neighbor)) dfs(neighbor);
 		inStack.delete(node);
 	}
 	for (const node of nodes) if (!visited.has(node.id)) dfs(node.id);
-	for (const edge of edges) if (!safeEdges.some((e) => e.source === edge.target && e.target === edge.source)) safeEdges.push(edge);
+	const origToSafe = /* @__PURE__ */ new Map();
+	const safeEdges = nonSelfEdges.map((edge) => {
+		const safe = backEdgeSet.has(edge) ? {
+			...edge,
+			source: edge.target,
+			target: edge.source
+		} : edge;
+		origToSafe.set(edge, safe);
+		return safe;
+	});
 	const layers = /* @__PURE__ */ new Map();
 	const safeAdj = /* @__PURE__ */ new Map();
 	const inDegree = /* @__PURE__ */ new Map();
@@ -1744,87 +1981,276 @@ function flowchartLayout(diagram, options) {
 		}
 	}
 	for (const node of nodes) if (!layers.has(node.id)) layers.set(node.id, 0);
+	const DUMMY_DIM = 8;
+	const dummySet = /* @__PURE__ */ new Set();
+	const dummySize = {
+		width: DUMMY_DIM,
+		height: DUMMY_DIM
+	};
+	const edgeDummies = /* @__PURE__ */ new Map();
+	let workEdges = [...safeEdges];
+	{
+		const newEdges = [];
+		for (const edge of workEdges) {
+			const srcLayer = layers.get(edge.source) ?? 0;
+			const tgtLayer = layers.get(edge.target) ?? 0;
+			if (tgtLayer - srcLayer <= 1) {
+				newEdges.push(edge);
+				continue;
+			}
+			const dummies = [];
+			let prev = edge.source;
+			for (let l = srcLayer + 1; l < tgtLayer; l++) {
+				const dummyId = `__dummy_${edge.source}_${edge.target}_${l}`;
+				dummies.push(dummyId);
+				dummySet.add(dummyId);
+				layers.set(dummyId, l);
+				nodeSizes.set(dummyId, dummySize);
+				newEdges.push({
+					source: prev,
+					target: dummyId,
+					lineStyle: edge.lineStyle,
+					sourceMarker: "none",
+					targetMarker: "none"
+				});
+				prev = dummyId;
+			}
+			newEdges.push({
+				source: prev,
+				target: edge.target,
+				lineStyle: edge.lineStyle,
+				sourceMarker: "none",
+				targetMarker: "none"
+			});
+			edgeDummies.set(edge, dummies);
+		}
+		workEdges = newEdges;
+	}
 	const maxLayer = Math.max(...Array.from(layers.values()), 0);
 	const layerGroups = Array.from({ length: maxLayer + 1 }, () => []);
 	for (const node of nodes) layerGroups[layers.get(node.id) ?? 0].push(node.id);
-	for (let pass = 0; pass < 2; pass++) for (let l = 1; l <= maxLayer; l++) {
-		const layer = layerGroups[l];
-		const barycenters = /* @__PURE__ */ new Map();
-		for (const nodeId of layer) {
-			const prevLayer = layerGroups[l - 1];
-			let sum = 0;
-			let count = 0;
-			for (const edge of safeEdges) if (edge.target === nodeId && prevLayer.includes(edge.source)) {
-				sum += prevLayer.indexOf(edge.source);
-				count++;
+	for (const dummyId of dummySet) layerGroups[layers.get(dummyId) ?? 0].push(dummyId);
+	const nodeSubgraph = /* @__PURE__ */ new Map();
+	for (const sg of subgraphs) mapNodesToSubgraph(sg, nodeSubgraph);
+	const allNodeIds = [...nodes.map((n) => n.id), ...dummySet];
+	const parents = /* @__PURE__ */ new Map();
+	const children = /* @__PURE__ */ new Map();
+	for (const id of allNodeIds) {
+		parents.set(id, []);
+		children.set(id, []);
+	}
+	for (const edge of workEdges) {
+		children.get(edge.source)?.push(edge.target);
+		parents.get(edge.target)?.push(edge.source);
+	}
+	for (let pass = 0; pass < 4; pass++) if (pass % 2 === 0) for (let l = 1; l <= maxLayer; l++) orderLayerByBarycenter(layerGroups[l], layerGroups[l - 1], parents, nodeSubgraph);
+	else for (let l = maxLayer - 1; l >= 0; l--) orderLayerByBarycenter(layerGroups[l], layerGroups[l + 1], children, nodeSubgraph);
+	for (let pass = 0; pass < 3; pass++) {
+		let improved = false;
+		for (let l = 0; l < maxLayer; l++) {
+			const layer = layerGroups[l];
+			const nextLayer = layerGroups[l + 1];
+			for (let i = 0; i < layer.length - 1; i++) {
+				const crossBefore = countCrossings(layer, nextLayer, children);
+				const tmp = layer[i];
+				layer[i] = layer[i + 1];
+				layer[i + 1] = tmp;
+				if (countCrossings(layer, nextLayer, children) < crossBefore) improved = true;
+				else {
+					layer[i + 1] = layer[i];
+					layer[i] = tmp;
+				}
 			}
-			barycenters.set(nodeId, count > 0 ? sum / count : prevLayer.length / 2);
 		}
-		layer.sort((a, b) => (barycenters.get(a) ?? 0) - (barycenters.get(b) ?? 0));
+		if (!improved) break;
 	}
 	const isVertical = direction === "TB" || direction === "TD" || direction === "BT";
-	const positions = /* @__PURE__ */ new Map();
-	for (let l = 0; l <= maxLayer; l++) {
-		const layer = layerGroups[l];
-		let offset = -layer.reduce((sum, id) => {
-			const size = nodeSizes.get(id);
-			return sum + (isVertical ? size.width : size.height) + opts.nodeSpacing;
-		}, -opts.nodeSpacing) / 2;
-		for (const nodeId of layer) {
-			const size = nodeSizes.get(nodeId);
-			const primaryDim = isVertical ? size.width : size.height;
-			if (isVertical) positions.set(nodeId, {
-				x: offset + primaryDim / 2,
-				y: l * (opts.nodeHeight + opts.rankSpacing)
-			});
-			else positions.set(nodeId, {
-				x: l * (opts.nodeWidth + opts.rankSpacing),
-				y: offset + primaryDim / 2
-			});
-			offset += primaryDim + opts.nodeSpacing;
+	const sgLayerRanges = computeSubgraphLayerRanges(subgraphs, layers);
+	const allSubgraphs = flattenSubgraphs(subgraphs);
+	const rankNodeDim = isVertical ? opts.nodeHeight : opts.nodeWidth;
+	const sgTitleHeight = 20;
+	const rankPos = [0];
+	for (let l = 0; l < maxLayer; l++) {
+		let overhead = 0;
+		for (const sg of allSubgraphs) {
+			const range = sgLayerRanges.get(sg.id);
+			if (!range || range.minLayer > range.maxLayer) continue;
+			if (range.maxLayer === l) overhead += opts.nodePadding;
+			if (range.minLayer === l + 1) overhead += opts.nodePadding + sgTitleHeight;
 		}
+		const extra = overhead > 0 ? Math.max(0, overhead - opts.rankSpacing + opts.nodePadding) : 0;
+		rankPos.push(rankPos[l] + rankNodeDim + opts.rankSpacing + extra);
+	}
+	const dim = (id) => {
+		if (dummySet.has(id)) return DUMMY_DIM;
+		const size = nodeSizes.get(id);
+		return isVertical ? size.width : size.height;
+	};
+	const gap = (a, b) => {
+		if (nodeSubgraph.get(a) !== nodeSubgraph.get(b)) return opts.nodeSpacing + opts.nodePadding * 2;
+		return opts.nodeSpacing;
+	};
+	const bkResults = [];
+	for (let dir = 0; dir < 4; dir++) {
+		const isDown = dir < 2;
+		const isLeft = dir % 2 === 0;
+		const alignment = isDown ? parents : children;
+		const p = /* @__PURE__ */ new Map();
+		for (let l = 0; l <= maxLayer; l++) packLayerCentered(layerGroups[l], p, dim, gap);
+		const sweeps = 4;
+		for (let s = 0; s < sweeps; s++) if (isDown) for (let l = 1; l <= maxLayer; l++) alignLayerBK(layerGroups[l], alignment, p, dim, gap, isLeft);
+		else for (let l = maxLayer - 1; l >= 0; l--) alignLayerBK(layerGroups[l], alignment, p, dim, gap, isLeft);
+		bkResults.push(p);
+	}
+	const pos = /* @__PURE__ */ new Map();
+	for (const id of allNodeIds) {
+		const vals = bkResults.map((r) => r.get(id) ?? 0).sort((a, b) => a - b);
+		pos.set(id, (vals[1] + vals[2]) / 2);
+	}
+	for (const [, dummies] of edgeDummies) {
+		if (dummies.length === 0) continue;
+		let sum = 0;
+		for (const id of dummies) sum += pos.get(id) ?? 0;
+		const avg = sum / dummies.length;
+		for (const id of dummies) pos.set(id, avg);
+	}
+	const nodeLayer = /* @__PURE__ */ new Map();
+	for (let l = 0; l <= maxLayer; l++) for (const id of layerGroups[l]) nodeLayer.set(id, l);
+	const positions = /* @__PURE__ */ new Map();
+	for (const id of allNodeIds) {
+		const p = pos.get(id) ?? 0;
+		const l = nodeLayer.get(id) ?? 0;
+		if (isVertical) positions.set(id, {
+			x: p,
+			y: rankPos[l]
+		});
+		else positions.set(id, {
+			x: rankPos[l],
+			y: p
+		});
 	}
 	let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-	for (const [id, pos] of positions) {
+	for (const [id, p] of positions) {
+		if (dummySet.has(id)) continue;
 		const size = nodeSizes.get(id);
-		minX = Math.min(minX, pos.x - size.width / 2);
-		minY = Math.min(minY, pos.y - size.height / 2);
-		maxX = Math.max(maxX, pos.x + size.width / 2);
-		maxY = Math.max(maxY, pos.y + size.height / 2);
+		minX = Math.min(minX, p.x - size.width / 2);
+		minY = Math.min(minY, p.y - size.height / 2);
+		maxX = Math.max(maxX, p.x + size.width / 2);
+		maxY = Math.max(maxY, p.y + size.height / 2);
 	}
 	const offsetX = opts.diagramPadding - minX;
 	const offsetY = opts.diagramPadding - minY;
-	for (const [, pos] of positions) {
-		pos.x += offsetX;
-		pos.y += offsetY;
+	for (const [, p] of positions) {
+		p.x += offsetX;
+		p.y += offsetY;
 	}
 	if (direction === "BT") {
 		const totalHeight = maxY - minY;
-		for (const [, pos] of positions) pos.y = totalHeight - (pos.y - opts.diagramPadding) + opts.diagramPadding;
+		for (const [, p] of positions) p.y = totalHeight - (p.y - opts.diagramPadding) + opts.diagramPadding;
 	}
 	if (direction === "RL") {
 		const totalWidth = maxX - minX;
-		for (const [, pos] of positions) pos.x = totalWidth - (pos.x - opts.diagramPadding) + opts.diagramPadding;
+		for (const [, p] of positions) p.x = totalWidth - (p.x - opts.diagramPadding) + opts.diagramPadding;
+	}
+	if (subgraphs.length > 0) {
+		let extraShiftX = 0;
+		let extraShiftY = 0;
+		for (const sg of subgraphs) {
+			const sgMin = precomputeSgMin(sg, positions, nodeSizes, opts);
+			extraShiftX = Math.max(extraShiftX, opts.diagramPadding - sgMin.minX);
+			extraShiftY = Math.max(extraShiftY, opts.diagramPadding - sgMin.minY);
+		}
+		if (extraShiftX > 0 || extraShiftY > 0) for (const [, p] of positions) {
+			p.x += extraShiftX;
+			p.y += extraShiftY;
+		}
 	}
 	const positionedNodes = nodes.map((node) => {
-		const pos = positions.get(node.id);
+		const p = positions.get(node.id);
 		const size = nodeSizes.get(node.id);
 		return {
 			node,
-			x: pos.x,
-			y: pos.y,
+			x: p.x,
+			y: p.y,
 			width: size.width,
 			height: size.height
 		};
 	});
 	const positionedEdges = edges.map((edge) => {
+		if (edge.source === edge.target) {
+			const p = positions.get(edge.source);
+			const size = nodeSizes.get(edge.source);
+			if (!p || !size) return {
+				edge,
+				path: "M 0 0"
+			};
+			const loopSize = 30;
+			const rx = size.width / 2;
+			const ry = size.height / 2;
+			let path;
+			let labelMid;
+			if (isVertical) {
+				const sx = p.x + rx;
+				const sy = p.y - ry * .3;
+				const tx = p.x + rx;
+				const ty = p.y + ry * .3;
+				const cx = p.x + rx + loopSize;
+				path = `M ${sx} ${sy} C ${cx} ${sy - loopSize} ${cx} ${ty + loopSize} ${tx} ${ty}`;
+				labelMid = {
+					x: cx + 4,
+					y: p.y
+				};
+			} else {
+				const sx = p.x - rx * .3;
+				const sy = p.y + ry;
+				const tx = p.x + rx * .3;
+				const ty = p.y + ry;
+				const cy = p.y + ry + loopSize;
+				path = `M ${sx} ${sy} C ${sx - loopSize} ${cy} ${tx + loopSize} ${cy} ${tx} ${ty}`;
+				labelMid = {
+					x: p.x,
+					y: cy + 4
+				};
+			}
+			let labelPosition;
+			let labelSize;
+			if (edge.label) {
+				labelPosition = labelMid;
+				labelSize = measureLabel(edge.label, opts);
+			}
+			return {
+				edge,
+				path,
+				labelPosition,
+				labelSize
+			};
+		}
 		const sourcePos = positions.get(edge.source);
 		const targetPos = positions.get(edge.target);
 		if (!sourcePos || !targetPos) return {
 			edge,
 			path: "M 0 0"
 		};
-		const result = buildEdgePath(sourcePos, targetPos, nodeSizes.get(edge.source), nodeSizes.get(edge.target), isVertical, opts);
+		const sourceSize = nodeSizes.get(edge.source);
+		const targetSize = nodeSizes.get(edge.target);
+		const safeEdge = origToSafe.get(edge);
+		const dummies = safeEdge ? edgeDummies.get(safeEdge) : void 0;
+		if (dummies && dummies.length > 0) {
+			const result = buildLongEdgePath(sourcePos, targetPos, sourceSize, targetSize, dummies.map((id) => positions.get(id)), isVertical, opts);
+			let labelPosition;
+			let labelSize;
+			if (edge.label) {
+				labelPosition = result.labelMid;
+				labelSize = measureLabel(edge.label, opts);
+			}
+			return {
+				edge,
+				path: result.path,
+				labelPosition,
+				labelSize
+			};
+		}
+		const result = buildEdgePath(sourcePos, targetPos, sourceSize, targetSize, isVertical, opts);
 		let labelPosition;
 		let labelSize;
 		if (edge.label) {
@@ -1838,29 +2264,51 @@ function flowchartLayout(diagram, options) {
 			labelSize
 		};
 	});
-	const positionedSubgraphs = subgraphs.map((sg) => {
+	const positionedSubgraphs = [];
+	function layoutSubgraph(sg) {
+		const childPositioned = [];
+		for (const child of sg.subgraphs ?? []) childPositioned.push(layoutSubgraph(child));
 		let sgMinX = Infinity, sgMinY = Infinity, sgMaxX = -Infinity, sgMaxY = -Infinity;
 		for (const nodeId of sg.nodes) {
-			const pos = positions.get(nodeId);
+			const p = positions.get(nodeId);
 			const size = nodeSizes.get(nodeId);
-			if (pos && size) {
-				sgMinX = Math.min(sgMinX, pos.x - size.width / 2);
-				sgMinY = Math.min(sgMinY, pos.y - size.height / 2);
-				sgMaxX = Math.max(sgMaxX, pos.x + size.width / 2);
-				sgMaxY = Math.max(sgMaxY, pos.y + size.height / 2);
+			if (p && size) {
+				sgMinX = Math.min(sgMinX, p.x - size.width / 2);
+				sgMinY = Math.min(sgMinY, p.y - size.height / 2);
+				sgMaxX = Math.max(sgMaxX, p.x + size.width / 2);
+				sgMaxY = Math.max(sgMaxY, p.y + size.height / 2);
 			}
 		}
+		for (const child of childPositioned) {
+			sgMinX = Math.min(sgMinX, child.x);
+			sgMinY = Math.min(sgMinY, child.y);
+			sgMaxX = Math.max(sgMaxX, child.x + child.width);
+			sgMaxY = Math.max(sgMaxY, child.y + child.height);
+		}
 		const padding = opts.nodePadding;
-		return {
+		const positioned = {
 			subgraph: sg,
 			x: sgMinX - padding,
 			y: sgMinY - padding - 20,
 			width: sgMaxX - sgMinX + padding * 2,
 			height: sgMaxY - sgMinY + padding * 2 + 20
 		};
-	});
-	const diagramWidth = maxX - minX + opts.diagramPadding * 2;
-	const diagramHeight = maxY - minY + opts.diagramPadding * 2;
+		positionedSubgraphs.push(positioned);
+		return positioned;
+	}
+	for (const sg of subgraphs) layoutSubgraph(sg);
+	let extMaxX = -Infinity;
+	let extMaxY = -Infinity;
+	for (const pn of positionedNodes) {
+		extMaxX = Math.max(extMaxX, pn.x + pn.width / 2);
+		extMaxY = Math.max(extMaxY, pn.y + pn.height / 2);
+	}
+	for (const psg of positionedSubgraphs) {
+		extMaxX = Math.max(extMaxX, psg.x + psg.width);
+		extMaxY = Math.max(extMaxY, psg.y + psg.height);
+	}
+	const diagramWidth = extMaxX + opts.diagramPadding;
+	const diagramHeight = extMaxY + opts.diagramPadding;
 	return {
 		width: diagramWidth,
 		height: diagramHeight,
@@ -1870,6 +2318,136 @@ function flowchartLayout(diagram, options) {
 		subgraphs: positionedSubgraphs
 	};
 }
+/** Map each node to its most immediate (deepest) containing subgraph. */
+function mapNodesToSubgraph(sg, out) {
+	for (const nodeId of sg.nodes) out.set(nodeId, sg.id);
+	for (const child of sg.subgraphs ?? []) mapNodesToSubgraph(child, out);
+}
+/**
+* Order a layer using barycenter heuristic with subgraph clustering.
+* `neighbors` maps each node to its connected nodes in the reference layer.
+* Nodes in the same subgraph are kept adjacent.
+*/
+function orderLayerByBarycenter(layer, refLayer, neighborMap, nodeSubgraph) {
+	const barycenters = /* @__PURE__ */ new Map();
+	const refIndex = /* @__PURE__ */ new Map();
+	for (let i = 0; i < refLayer.length; i++) refIndex.set(refLayer[i], i);
+	for (const nodeId of layer) {
+		const nbrs = neighborMap.get(nodeId) ?? [];
+		let sum = 0;
+		let count = 0;
+		for (const n of nbrs) {
+			const idx = refIndex.get(n);
+			if (idx !== void 0) {
+				sum += idx;
+				count++;
+			}
+		}
+		if (count > 0) barycenters.set(nodeId, sum / count);
+	}
+	const groupBary = /* @__PURE__ */ new Map();
+	for (const nodeId of layer) {
+		const sgId = nodeSubgraph.get(nodeId) ?? "";
+		if (!groupBary.has(sgId)) {
+			const connected = layer.filter((n) => (nodeSubgraph.get(n) ?? "") === sgId).filter((n) => barycenters.has(n));
+			if (connected.length > 0) {
+				const avg = connected.reduce((s, n) => s + barycenters.get(n), 0) / connected.length;
+				groupBary.set(sgId, avg);
+			}
+		}
+	}
+	const original = [...layer];
+	layer.sort((a, b) => {
+		const sgA = nodeSubgraph.get(a) ?? "";
+		const sgB = nodeSubgraph.get(b) ?? "";
+		if (sgA !== sgB) {
+			const ga = groupBary.get(sgA);
+			const gb = groupBary.get(sgB);
+			if (ga !== void 0 && gb !== void 0 && ga !== gb) return ga - gb;
+			if (ga !== void 0 && gb === void 0) return -1;
+			if (ga === void 0 && gb !== void 0) return 1;
+		}
+		const ba = barycenters.get(a);
+		const bb = barycenters.get(b);
+		if (ba !== void 0 && bb !== void 0 && ba !== bb) return ba - bb;
+		if (ba !== void 0 && bb === void 0) return -1;
+		if (ba === void 0 && bb !== void 0) return 1;
+		return original.indexOf(a) - original.indexOf(b);
+	});
+}
+/**
+* Count edge crossings between two adjacent layers.
+* Two edges (u1→v1) and (u2→v2) cross iff u1 < u2 and v1 > v2 (or vice versa).
+*/
+function countCrossings(upperLayer, lowerLayer, children) {
+	const lowerIdx = /* @__PURE__ */ new Map();
+	for (let i = 0; i < lowerLayer.length; i++) lowerIdx.set(lowerLayer[i], i);
+	const edgePairs = [];
+	for (let ui = 0; ui < upperLayer.length; ui++) for (const child of children.get(upperLayer[ui]) ?? []) {
+		const li = lowerIdx.get(child);
+		if (li !== void 0) edgePairs.push([ui, li]);
+	}
+	let crossings = 0;
+	for (let i = 0; i < edgePairs.length; i++) for (let j = i + 1; j < edgePairs.length; j++) {
+		const [u1, v1] = edgePairs[i];
+		const [u2, v2] = edgePairs[j];
+		if (u1 < u2 && v1 > v2 || u1 > u2 && v1 < v2) crossings++;
+	}
+	return crossings;
+}
+/** Pack a layer centered at x=0 with minimum spacing. */
+function packLayerCentered(layer, pos, dim, gap) {
+	if (layer.length === 0) return;
+	let totalWidth = dim(layer[0]);
+	for (let i = 1; i < layer.length; i++) totalWidth += gap(layer[i - 1], layer[i]) + dim(layer[i]);
+	let offset = -totalWidth / 2;
+	for (let i = 0; i < layer.length; i++) {
+		const id = layer[i];
+		const d = dim(id);
+		if (i > 0) offset += gap(layer[i - 1], id);
+		pos.set(id, offset + d / 2);
+		offset += d;
+	}
+}
+/**
+* Brandes-Köpf style single-direction alignment.
+* `isLeft`: when true, prefer the left (lower-index) median neighbor;
+* when false, prefer the right (higher-index) median neighbor.
+* This produces 4 distinct alignments that are then merged via median.
+*/
+function alignLayerBK(layer, neighborMap, pos, dim, gap, isLeft) {
+	if (layer.length === 0) return;
+	const ideal = /* @__PURE__ */ new Map();
+	for (const id of layer) {
+		const nbrs = neighborMap.get(id) ?? [];
+		if (nbrs.length > 0) {
+			const xs = nbrs.map((n) => pos.get(n)).sort((a, b) => a - b);
+			const mid = Math.floor(xs.length / 2);
+			if (xs.length % 2 === 1) ideal.set(id, xs[mid]);
+			else ideal.set(id, isLeft ? xs[mid - 1] : xs[mid]);
+		}
+	}
+	if (ideal.size === 0) return;
+	const indices = layer.map((_, i) => i);
+	if (!isLeft) indices.reverse();
+	for (const i of indices) {
+		const id = layer[i];
+		const target = ideal.get(id);
+		if (target === void 0) continue;
+		const halfDim = dim(id) / 2;
+		let minPos = -Infinity;
+		if (i > 0) {
+			const leftId = layer[i - 1];
+			minPos = pos.get(leftId) + dim(leftId) / 2 + gap(leftId, id) + halfDim;
+		}
+		let maxPos = Infinity;
+		if (i < layer.length - 1) {
+			const rightId = layer[i + 1];
+			maxPos = pos.get(rightId) - dim(rightId) / 2 - gap(id, rightId) - halfDim;
+		}
+		pos.set(id, Math.max(minPos, Math.min(maxPos, target)));
+	}
+}
 /** Default curvature factor (matches xyflow) */
 const DEFAULT_CURVATURE = .25;
 /**
@@ -1931,6 +2509,25 @@ function buildEdgePath(source, target, sourceSize, targetSize, isVertical, opts)
 			labelMid: mid
 		};
 	}
+	if (opts.edgeRouting === "orthogonal") if (isVertical) {
+		const midY = (sy + ty) / 2;
+		return {
+			path: `M ${sx} ${sy} L ${sx} ${midY} L ${tx} ${midY} L ${tx} ${ty}`,
+			labelMid: {
+				x: (sx + tx) / 2,
+				y: midY
+			}
+		};
+	} else {
+		const midX = (sx + tx) / 2;
+		return {
+			path: `M ${sx} ${sy} L ${midX} ${sy} L ${midX} ${ty} L ${tx} ${ty}`,
+			labelMid: {
+				x: midX,
+				y: (sy + ty) / 2
+			}
+		};
+	}
 	return {
 		path: `M ${sx} ${sy} L ${tx} ${ty}`,
 		labelMid: {
@@ -1939,21 +2536,146 @@ function buildEdgePath(source, target, sourceSize, targetSize, isVertical, opts)
 		}
 	};
 }
-function measureNode(node, opts) {
-	const textSize = (opts.measureText ?? estimateTextSize$1)(node.label, 14);
+/**
+* Build a smooth path through dummy waypoints for edges spanning multiple layers.
+* Uses cubic Bezier spline fitting through the waypoints for bezier mode,
+* or polyline/orthogonal segments through the waypoints for other modes.
+*/
+function buildLongEdgePath(source, target, sourceSize, targetSize, waypoints, isVertical, opts) {
+	let sx, sy, tx, ty;
+	if (isVertical) {
+		sx = source.x;
+		sy = source.y + sourceSize.height / 2;
+		tx = target.x;
+		ty = target.y - targetSize.height / 2;
+		if (source.y > target.y) {
+			sy = source.y - sourceSize.height / 2;
+			ty = target.y + targetSize.height / 2;
+		}
+	} else {
+		sx = source.x + sourceSize.width / 2;
+		sy = source.y;
+		tx = target.x - targetSize.width / 2;
+		ty = target.y;
+		if (source.x > target.x) {
+			sx = source.x - sourceSize.width / 2;
+			tx = target.x + targetSize.width / 2;
+		}
+	}
+	const points = [
+		{
+			x: sx,
+			y: sy
+		},
+		...waypoints,
+		{
+			x: tx,
+			y: ty
+		}
+	];
+	const labelMid = points[Math.floor(points.length / 2)];
+	if (opts.edgeRouting === "bezier" && points.length >= 3) {
+		let d = `M ${points[0].x} ${points[0].y}`;
+		for (let i = 0; i < points.length - 1; i++) {
+			const p0 = points[Math.max(0, i - 1)];
+			const p1 = points[i];
+			const p2 = points[i + 1];
+			const p3 = points[Math.min(points.length - 1, i + 2)];
+			const cp1x = p1.x + (p2.x - p0.x) / 6;
+			const cp1y = p1.y + (p2.y - p0.y) / 6;
+			const cp2x = p2.x - (p3.x - p1.x) / 6;
+			const cp2y = p2.y - (p3.y - p1.y) / 6;
+			d += ` C ${cp1x} ${cp1y} ${cp2x} ${cp2y} ${p2.x} ${p2.y}`;
+		}
+		return {
+			path: d,
+			labelMid
+		};
+	}
+	if (opts.edgeRouting === "orthogonal") {
+		let d = `M ${points[0].x} ${points[0].y}`;
+		for (let i = 1; i < points.length; i++) {
+			const prev = points[i - 1];
+			const curr = points[i];
+			if (isVertical) {
+				const midY = (prev.y + curr.y) / 2;
+				d += ` L ${prev.x} ${midY} L ${curr.x} ${midY} L ${curr.x} ${curr.y}`;
+			} else {
+				const midX = (prev.x + curr.x) / 2;
+				d += ` L ${midX} ${prev.y} L ${midX} ${curr.y} L ${curr.x} ${curr.y}`;
+			}
+		}
+		return {
+			path: d,
+			labelMid
+		};
+	}
+	let d = `M ${points[0].x} ${points[0].y}`;
+	for (let i = 1; i < points.length; i++) d += ` L ${points[i].x} ${points[i].y}`;
 	return {
-		width: Math.max(textSize.width + opts.nodePadding * 2, opts.nodeWidth),
-		height: Math.max(textSize.height + opts.nodePadding * 2, opts.nodeHeight)
+		path: d,
+		labelMid
 	};
 }
-function measureLabel(text, opts) {
-	return (opts.measureText ?? estimateTextSize$1)(text, 12);
-}
-function estimateTextSize$1(text, fontSize) {
-	const avgCharWidth = fontSize * .6;
+/** Compute the layer range (min, max) for each subgraph including nested children. */
+function computeSubgraphLayerRanges(subgraphs, layers) {
+	const ranges = /* @__PURE__ */ new Map();
+	function compute(sg) {
+		let minL = Infinity;
+		let maxL = -Infinity;
+		for (const nodeId of sg.nodes) {
+			const l = layers.get(nodeId);
+			if (l !== void 0) {
+				minL = Math.min(minL, l);
+				maxL = Math.max(maxL, l);
+			}
+		}
+		for (const child of sg.subgraphs ?? []) {
+			const childRange = compute(child);
+			minL = Math.min(minL, childRange.minLayer);
+			maxL = Math.max(maxL, childRange.maxLayer);
+		}
+		const range = {
+			minLayer: minL,
+			maxLayer: maxL
+		};
+		ranges.set(sg.id, range);
+		return range;
+	}
+	for (const sg of subgraphs) compute(sg);
+	return ranges;
+}
+/** Flatten a subgraph tree into a flat array of all subgraphs. */
+function flattenSubgraphs(subgraphs) {
+	const result = [];
+	function collect(sg) {
+		result.push(sg);
+		for (const child of sg.subgraphs ?? []) collect(child);
+	}
+	for (const sg of subgraphs) collect(sg);
+	return result;
+}
+/** Pre-compute the minimum x/y bounds of a subgraph (including nested children). */
+function precomputeSgMin(sg, positions, nodeSizes, opts) {
+	const titleHeight = 20;
+	let minX = Infinity;
+	let minY = Infinity;
+	for (const nodeId of sg.nodes) {
+		const p = positions.get(nodeId);
+		const size = nodeSizes.get(nodeId);
+		if (p && size) {
+			minX = Math.min(minX, p.x - size.width / 2);
+			minY = Math.min(minY, p.y - size.height / 2);
+		}
+	}
+	for (const child of sg.subgraphs ?? []) {
+		const childMin = precomputeSgMin(child, positions, nodeSizes, opts);
+		minX = Math.min(minX, childMin.minX);
+		minY = Math.min(minY, childMin.minY);
+	}
 	return {
-		width: text.length * avgCharWidth,
-		height: fontSize * 1.4
+		minX: minX - opts.nodePadding,
+		minY: minY - opts.nodePadding - titleHeight
 	};
 }
 
@@ -1985,20 +2707,72 @@ function sequenceLayout(diagram, options) {
 		blocks: [],
 		notes: []
 	};
+	const participantIndex = /* @__PURE__ */ new Map();
+	const participantSizes = /* @__PURE__ */ new Map();
+	for (let i = 0; i < participants.length; i++) {
+		const p = participants[i];
+		participantIndex.set(p.id, i);
+		participantSizes.set(p.id, measureNode(p.label, opts));
+	}
+	const pairSpacing = [];
+	for (let i = 0; i < participants.length - 1; i++) {
+		const left = participants[i];
+		const right = participants[i + 1];
+		const leftSize = participantSizes.get(left.id);
+		const rightSize = participantSizes.get(right.id);
+		let minDist = leftSize.width / 2 + rightSize.width / 2 + opts.nodePadding * 2;
+		for (const msg of messages) {
+			const fi = participantIndex.get(msg.from);
+			const ti = participantIndex.get(msg.to);
+			if (fi === void 0 || ti === void 0) continue;
+			const lo = Math.min(fi, ti);
+			const hi = Math.max(fi, ti);
+			if (lo <= i && hi >= i + 1 && msg.text) {
+				const labelSize = measureLabel(msg.text, opts);
+				const spanCols = hi - lo;
+				const perGap = (labelSize.width + opts.nodePadding * 2) / spanCols;
+				minDist = Math.max(minDist, perGap);
+			}
+		}
+		pairSpacing.push(Math.max(minDist, opts.nodeSpacing));
+	}
 	const participantX = /* @__PURE__ */ new Map();
-	participants.forEach((p, i) => {
-		participantX.set(p.id, opts.diagramPadding + opts.nodeWidth / 2 + i * opts.nodeSpacing);
-	});
+	let currentX = opts.diagramPadding + (participantSizes.get(participants[0].id)?.width ?? opts.nodeWidth) / 2;
+	participantX.set(participants[0].id, currentX);
+	for (let i = 1; i < participants.length; i++) {
+		currentX += pairSpacing[i - 1];
+		participantX.set(participants[i].id, currentX);
+	}
 	const headerY = opts.diagramPadding + opts.nodeHeight / 2;
 	const headerBottom = headerY + opts.nodeHeight / 2 + 20;
-	const positionedMessages = messages.map((msg, i) => {
-		return {
+	const selfMessageWidth = 40;
+	const selfMessageHeight = 30;
+	const positionedMessages = [];
+	const positionedNotes = [];
+	let currentY = headerBottom;
+	const noteMessageCounts = diagram._noteMessageCounts ?? notes.map(() => messages.length);
+	let nextNoteIdx = 0;
+	for (let msgIdx = 0; msgIdx < messages.length; msgIdx++) {
+		while (nextNoteIdx < notes.length && (noteMessageCounts[nextNoteIdx] ?? messages.length) <= msgIdx) {
+			currentY = positionNote(notes[nextNoteIdx], nextNoteIdx, currentY, positionedNotes, participantX, opts);
+			nextNoteIdx++;
+		}
+		const msg = messages[msgIdx];
+		const fromX = participantX.get(msg.from) ?? 0;
+		const toX = participantX.get(msg.to) ?? 0;
+		const isSelf = msg.from === msg.to;
+		positionedMessages.push({
 			message: msg,
-			fromX: participantX.get(msg.from) ?? 0,
-			toX: participantX.get(msg.to) ?? 0,
-			y: headerBottom + i * opts.rankSpacing
-		};
-	});
+			fromX,
+			toX: isSelf ? fromX + selfMessageWidth : toX,
+			y: currentY
+		});
+		currentY += isSelf ? selfMessageHeight + opts.rankSpacing * .5 : opts.rankSpacing;
+	}
+	while (nextNoteIdx < notes.length) {
+		currentY = positionNote(notes[nextNoteIdx], nextNoteIdx, currentY, positionedNotes, participantX, opts);
+		nextNoteIdx++;
+	}
 	const activationStarts = /* @__PURE__ */ new Map();
 	const positionedActivations = [];
 	for (const pmsg of positionedMessages) {
@@ -2021,7 +2795,10 @@ function sequenceLayout(diagram, options) {
 		}
 	}
 	const lastMsg = positionedMessages[positionedMessages.length - 1];
-	const diagramBottom = (lastMsg ? lastMsg.y : headerBottom) + opts.rankSpacing;
+	const lastNote = positionedNotes[positionedNotes.length - 1];
+	const lastMessageY = lastMsg ? lastMsg.y : headerBottom;
+	const lastNoteY = lastNote ? lastNote.y + lastNote.height : headerBottom;
+	const diagramBottom = Math.max(lastMessageY, lastNoteY) + opts.rankSpacing;
 	const positionedLifelines = participants.map((p) => {
 		return {
 			participant: p,
@@ -2030,6 +2807,8 @@ function sequenceLayout(diagram, options) {
 			y2: diagramBottom
 		};
 	});
+	const msgIndexMap = /* @__PURE__ */ new Map();
+	for (let i = 0; i < messages.length; i++) msgIndexMap.set(messages[i], i);
 	const positionedBlocks = blocks.map((block) => {
 		const allMsgs = [...block.messages, ...block.sections?.flatMap((s) => s.messages) ?? []];
 		let minX = Infinity;
@@ -2040,48 +2819,48 @@ function sequenceLayout(diagram, options) {
 			minX = Math.min(minX, fromX, toX);
 			maxX = Math.max(maxX, fromX, toX);
 		}
-		const msgIndices = allMsgs.map((m) => messages.findIndex((pm) => pm.from === m.from && pm.to === m.to && pm.text === m.text)).filter((i) => i >= 0);
+		const msgIndices = allMsgs.map((m) => msgIndexMap.get(m) ?? -1).filter((i) => i >= 0);
 		const firstBlockMsg = msgIndices.length > 0 ? positionedMessages[Math.min(...msgIndices)] : void 0;
 		const lastBlockMsg = msgIndices.length > 0 ? positionedMessages[Math.max(...msgIndices)] : void 0;
 		const startY = firstBlockMsg ? firstBlockMsg.y - 20 : headerBottom;
 		const endY = lastBlockMsg ? lastBlockMsg.y + 20 : headerBottom + opts.rankSpacing;
+		let sectionDividers;
+		if (block.sections && block.sections.length > 0) {
+			sectionDividers = [];
+			for (const section of block.sections) {
+				const sectionMsgIndices = section.messages.map((m) => msgIndexMap.get(m) ?? -1).filter((i) => i >= 0);
+				if (sectionMsgIndices.length > 0) {
+					const firstSectionMsg = positionedMessages[Math.min(...sectionMsgIndices)];
+					if (firstSectionMsg) sectionDividers.push({
+						y: firstSectionMsg.y - 15,
+						label: section.label
+					});
+				}
+			}
+		}
 		const padding = opts.nodePadding;
 		return {
 			block,
 			x: minX - padding - opts.nodeWidth / 2,
 			y: startY,
 			width: maxX - minX + opts.nodeWidth + padding * 2,
-			height: endY - startY
-		};
-	});
-	const positionedNotes = notes.map((note, i) => {
-		const xs = note.participants.map((id) => participantX.get(id) ?? 0).filter((x) => x > 0);
-		let x;
-		if (note.position === "left of") x = (xs[0] ?? opts.diagramPadding) - opts.nodeWidth;
-		else if (note.position === "right of") x = (xs[0] ?? opts.diagramPadding) + opts.nodeWidth;
-		else x = xs.length > 0 ? xs.reduce((a, b) => a + b, 0) / xs.length : opts.diagramPadding;
-		const y = headerBottom + (messages.length + i) * opts.rankSpacing * .5;
-		const size = estimateTextSize(note.text, 12);
-		return {
-			note,
-			x,
-			y,
-			width: Math.max(size.width + opts.nodePadding * 2, 80),
-			height: Math.max(size.height + opts.nodePadding, 30)
+			height: endY - startY,
+			sectionDividers
 		};
 	});
 	const positionedParticipants = participants.map((p) => {
-		const x = participantX.get(p.id) ?? 0;
-		const size = estimateTextSize(p.label, 14);
 		return {
 			participant: p,
-			x,
+			x: participantX.get(p.id) ?? 0,
 			y: headerY,
-			width: Math.max(size.width + opts.nodePadding * 2, opts.nodeWidth),
+			width: participantSizes.get(p.id).width,
 			height: opts.nodeHeight
 		};
 	});
-	const diagramWidth = (participants.length - 1) * opts.nodeSpacing + opts.nodeWidth + opts.diagramPadding * 2;
+	const firstX = participantX.get(participants[0].id);
+	const lastX = participantX.get(participants[participants.length - 1].id);
+	const firstHalf = (participantSizes.get(participants[0].id)?.width ?? opts.nodeWidth) / 2;
+	const diagramWidth = lastX + (participantSizes.get(participants[participants.length - 1].id)?.width ?? opts.nodeWidth) / 2 + opts.diagramPadding - (firstX - firstHalf - opts.diagramPadding);
 	const diagramHeight = diagramBottom + opts.diagramPadding;
 	return {
 		width: diagramWidth,
@@ -2095,12 +2874,23 @@ function sequenceLayout(diagram, options) {
 		notes: positionedNotes
 	};
 }
-function estimateTextSize(text, fontSize) {
-	const avgCharWidth = fontSize * .6;
-	return {
-		width: text.length * avgCharWidth,
-		height: fontSize * 1.4
-	};
+/** Position a single note and advance currentY, returning the new currentY */
+function positionNote(note, _index, currentY, out, participantX, opts) {
+	const xs = note.participants.map((id) => participantX.get(id) ?? 0).filter((x) => x > 0);
+	let x;
+	if (note.position === "left of") x = (xs[0] ?? opts.diagramPadding) - opts.nodeWidth;
+	else if (note.position === "right of") x = (xs[0] ?? opts.diagramPadding) + opts.nodeWidth;
+	else x = xs.length > 0 ? xs.reduce((a, b) => a + b, 0) / xs.length : opts.diagramPadding;
+	const size = estimateTextSize(note.text, 12);
+	const noteHeight = Math.max(size.height + opts.nodePadding, 30);
+	out.push({
+		note,
+		x,
+		y: currentY,
+		width: Math.max(size.width + opts.nodePadding * 2, 80),
+		height: noteHeight
+	});
+	return currentY + noteHeight + opts.rankSpacing * .3;
 }
 
 //#endregion
@@ -2169,21 +2959,16 @@ const c$11 = classes([
 	"blockBg",
 	"blockLabel",
 	"blockLabelText",
+	"blockSectionLine",
+	"blockSectionLabel",
 	"noteBg",
 	"noteText"
 ]);
 const participantBox = rule`${c$11.participantBox} {
-  fill: ${tokens$1.actorFill};
-  stroke: ${tokens$1.actorStroke};
-  stroke-width: 2;
+  ${boxShape(tokens$1.actorFill, tokens$1.actorStroke, 2)}
 }`;
 const participantLabel = rule`${c$11.participantLabel} {
-  fill: ${tokens$1.nodeText};
-  stroke: none;
-  font-family: ${tokens$1.fontFamily};
-  font-size: ${tokens$1.fontSize}px;
-  text-anchor: middle;
-  dominant-baseline: central;
+  ${textLabel(tokens$1.nodeText, `${tokens$1.fontSize}px`)}
 }`;
 const lifeline = rule`${c$11.lifeline} {
   stroke: ${tokens$1.lifelineStroke};
@@ -2191,9 +2976,7 @@ const lifeline = rule`${c$11.lifeline} {
   stroke-dasharray: 6, 4;
 }`;
 const activation = rule`${c$11.activation} {
-  fill: ${tokens$1.activationFill};
-  stroke: ${tokens$1.actorStroke};
-  stroke-width: 1;
+  ${boxShape(tokens$1.activationFill, tokens$1.actorStroke, 1)}
 }`;
 const messageLine = rule`${c$11.messageLine} {
   stroke: ${tokens$1.messageStroke};
@@ -2204,39 +2987,33 @@ const messageDotted = rule`${c$11.messageDotted} {
   stroke-dasharray: 6, 4;
 }`;
 const messageText = rule`${c$11.messageText} {
-  fill: ${tokens$1.nodeText};
-  stroke: none;
-  font-family: ${tokens$1.fontFamily};
-  font-size: 12px;
-  text-anchor: middle;
+  ${textLabel(tokens$1.nodeText, "12px")}
 }`;
 const blockBg = rule`${c$11.blockBg} {
-  fill: ${tokens$1.blockFill};
-  stroke: ${tokens$1.blockStroke};
-  stroke-width: 1;
+  ${boxShape(tokens$1.blockFill, tokens$1.blockStroke, 1)}
 }`;
 const blockLabel = rule`${c$11.blockLabel} {
   fill: ${tokens$1.blockStroke};
 }`;
 const blockLabelText = rule`${c$11.blockLabelText} {
-  fill: ${tokens$1.nodeText};
-  stroke: none;
-  font-family: ${tokens$1.fontFamily};
-  font-size: 11px;
+  ${textLabel(tokens$1.nodeText, "11px")}
   font-weight: 600;
 }`;
-const noteBg = rule`${c$11.noteBg} {
-  fill: ${tokens$1.noteBg};
-  stroke: ${tokens$1.noteStroke};
+const blockSectionLine = rule`${c$11.blockSectionLine} {
+  stroke: ${tokens$1.blockStroke};
   stroke-width: 1;
+  stroke-dasharray: 6, 4;
+}`;
+const blockSectionLabel = rule`${c$11.blockSectionLabel} {
+  ${textLabel(tokens$1.nodeText, "11px")}
+  font-weight: 600;
+  font-style: italic;
+}`;
+const noteBg = rule`${c$11.noteBg} {
+  ${boxShape(tokens$1.noteBg, tokens$1.noteStroke, 1)}
 }`;
 const noteText = rule`${c$11.noteText} {
-  fill: ${tokens$1.noteText};
-  stroke: none;
-  font-family: ${tokens$1.fontFamily};
-  font-size: 12px;
-  text-anchor: middle;
-  dominant-baseline: central;
+  ${textLabel(tokens$1.noteText, "12px")}
 }`;
 
 //#endregion
@@ -2262,19 +3039,36 @@ function Participant(props) {
 
 //#endregion
 //#region ../mermaid/src/components/sequence/message.tsx
-const MARKER = {
-	solid: "url(#mmd-arrow)",
-	dotted: "url(#mmd-arrow)",
-	solidCross: "url(#mmd-cross)",
-	dottedCross: "url(#mmd-cross)",
-	solidOpen: "url(#mmd-arrow-open)",
-	dottedOpen: "url(#mmd-arrow-open)"
-};
 function Message(props) {
 	const { message, fromX, toX, y } = props;
-	const isDotted = message.arrow === "dotted" || message.arrow === "dottedCross" || message.arrow === "dottedOpen";
+	const isDotted = isDottedArrow(message.arrow);
+	const markerEnd = sequenceMarker(message.arrow);
+	if (message.from === message.to) {
+		const loopWidth = toX - fromX;
+		const loopHeight = 30;
+		const path = [
+			`M ${fromX} ${y}`,
+			`L ${fromX + loopWidth} ${y}`,
+			`L ${fromX + loopWidth} ${y + loopHeight}`,
+			`L ${fromX} ${y + loopHeight}`
+		].join(" ");
+		return /* @__PURE__ */ jsxs("g", {
+			class: props.class,
+			children: [/* @__PURE__ */ jsx("path", {
+				class: [messageLine, isDotted ? messageDotted : void 0],
+				d: path,
+				fill: "none",
+				"marker-end": markerEnd
+			}), /* @__PURE__ */ jsx("text", {
+				class: messageText,
+				x: fromX + loopWidth / 2 + loopWidth / 2 + 6,
+				y: y + loopHeight / 2,
+				"text-anchor": "start",
+				children: message.text
+			})]
+		});
+	}
 	const midX = (fromX + toX) / 2;
-	const markerEnd = MARKER[message.arrow];
 	return /* @__PURE__ */ jsxs("g", {
 		class: props.class,
 		children: [/* @__PURE__ */ jsx("line", {
@@ -2320,7 +3114,10 @@ function Activation(props) {
 //#endregion
 //#region ../mermaid/src/components/sequence/block.tsx
 function Block(props) {
-	const { block, x, y, width, height } = props;
+	const { block, x, y, width, height, sectionDividers } = props;
+	const typeText = block.type;
+	const labelText = block.label ? `${typeText} [${block.label}]` : typeText;
+	const labelWidth = Math.max(labelText.length * 7 + 10, 50);
 	return /* @__PURE__ */ jsxs("g", {
 		class: props.class,
 		children: [
@@ -2336,16 +3133,33 @@ function Block(props) {
 				class: blockLabel,
 				x,
 				y,
-				width: 50,
+				width: labelWidth,
 				height: 20,
 				rx: 4
 			}),
 			/* @__PURE__ */ jsx("text", {
 				class: blockLabelText,
-				x: x + 5,
-				y: y + 14,
-				children: block.type
-			})
+				x: x + labelWidth / 2,
+				y: y + 10,
+				children: labelText
+			}),
+			sectionDividers?.map((div) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+				class: blockSectionLine,
+				x1: x,
+				y1: div.y,
+				x2: x + width,
+				y2: div.y
+			}), div.label && /* @__PURE__ */ jsxs("text", {
+				class: blockSectionLabel,
+				x: x + 8,
+				y: div.y + 14,
+				"text-anchor": "start",
+				children: [
+					"[",
+					div.label,
+					"]"
+				]
+			})] }))
 		]
 	});
 }
@@ -2451,7 +3265,8 @@ function Sequence(props, ctx) {
 				x: b.x,
 				y: b.y,
 				width: b.width,
-				height: b.height
+				height: b.height,
+				sectionDividers: b.sectionDividers
 			})),
 			positioned.activations.map((a) => /* @__PURE__ */ jsx(ActivationComp, {
 				participant: a.participant,
@@ -2509,18 +3324,20 @@ function walk(node) {
 	if (!node.children) return;
 	for (let i = 0; i < node.children.length; i++) {
 		const child = node.children[i];
-		if (child.type === "code" && child.lang === "mermaid") node.children[i] = {
-			type: "mdxJsxFlowElement",
-			name: "Mermaid",
-			attributes: [{
-				type: "mdxJsxAttribute",
-				name: "code",
-				value: child.value ?? ""
-			}],
-			children: [],
-			data: { _mdxExplicitJsx: true }
-		};
-		else walk(child);
+		if (child.type === "code" && child.lang === "mermaid") {
+			if (child.meta && /\braw\b/.test(child.meta)) continue;
+			node.children[i] = {
+				type: "mdxJsxFlowElement",
+				name: "Mermaid",
+				attributes: [{
+					type: "mdxJsxAttribute",
+					name: "code",
+					value: child.value ?? ""
+				}],
+				children: [],
+				data: { _mdxExplicitJsx: true }
+			};
+		} else walk(child);
 	}
 }
 function remarkMermaid() {