semajsx 0.6.1 → 0.8.0

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

@@ -1,16 +1,17 @@
-import { d as defineCollection, v as __exportAll } from "../../src-75qcxwT_.mjs";
-import { t as signal } from "../../signal-BN8vHXDb.mjs";
-import { a as jsxs, i as jsx, v as Fragment } from "../../src-DW3tIczg.mjs";
-import "../../src-BqX3sryB.mjs";
-import { G as rules, K as classes, M as createTheme, N as defineTokens, U as isStyleToken, W as rule } from "../../src-Ds9vl42d.mjs";
-import "../../jsx-runtime-D9ZNjMJ2.mjs";
-import "../../src-DUpFNNM_.mjs";
-import "../../jsx-runtime-BjCGsceN.mjs";
-import { d as island } from "../../resource-DSlXDZZi.mjs";
-import "../../src-B4VBiHa8.mjs";
-import "../../document-BOJDaiBc.mjs";
-import "../../client-CButR91p.mjs";
-import { n as Icon, t as lucide } from "../../lucide-C5BghhSl.mjs";
+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 { 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 "../../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 { dirname, join } from "path";
 import { mkdir, writeFile } from "fs/promises";
 import { z } from "zod";
@@ -19,12 +20,3338 @@ import { dirname as dirname$1, join as join$1 } from "node:path";
 import { fileURLToPath } from "node:url";
 import remarkGfm from "remark-gfm";
 
+//#region ../mermaid/src/parser/tokenizer.ts
+const KEYWORDS = new Set([
+	"graph",
+	"flowchart",
+	"sequenceDiagram",
+	"subgraph",
+	"end",
+	"direction",
+	"participant",
+	"actor",
+	"as",
+	"activate",
+	"deactivate",
+	"loop",
+	"alt",
+	"else",
+	"opt",
+	"par",
+	"and",
+	"critical",
+	"break",
+	"Note",
+	"over",
+	"left",
+	"right",
+	"of"
+]);
+const ARROW_PATTERNS = [
+	"-->>",
+	"--))",
+	"->>",
+	"-))",
+	"x-.-x",
+	"o-.-o",
+	"<-.->",
+	"x==x",
+	"o==o",
+	"<==>",
+	"x--x",
+	"o--o",
+	"<-->",
+	"o-.->",
+	"o==>",
+	"o-->",
+	"-.-o",
+	"-.-x",
+	"-.->|",
+	"-.->",
+	"-.-",
+	"==o",
+	"==x",
+	"==>|",
+	"==>",
+	"===",
+	"--o",
+	"--x",
+	"-->|",
+	"-->",
+	"---",
+	"-x",
+	"->",
+	"--"
+];
+function tokenize(input) {
+	const tokens = [];
+	let pos = 0;
+	let line = 1;
+	let col = 1;
+	while (pos < input.length) {
+		const ch = input[pos];
+		if (ch === " " || ch === "	") {
+			pos++;
+			col++;
+			continue;
+		}
+		if (ch === "\n") {
+			tokens.push({
+				type: "newline",
+				value: "\n",
+				line,
+				column: col
+			});
+			pos++;
+			line++;
+			col = 1;
+			continue;
+		}
+		if (ch === "\r") {
+			pos++;
+			if (pos < input.length && input[pos] === "\n") pos++;
+			tokens.push({
+				type: "newline",
+				value: "\n",
+				line,
+				column: col
+			});
+			line++;
+			col = 1;
+			continue;
+		}
+		if (ch === "%" && pos + 1 < input.length && input[pos + 1] === "%") {
+			const start = pos;
+			pos += 2;
+			while (pos < input.length && input[pos] !== "\n") pos++;
+			tokens.push({
+				type: "comment",
+				value: input.slice(start, pos),
+				line,
+				column: col
+			});
+			col += pos - start;
+			continue;
+		}
+		if (ch === ";") {
+			tokens.push({
+				type: "semicolon",
+				value: ";",
+				line,
+				column: col
+			});
+			pos++;
+			col++;
+			continue;
+		}
+		if (ch === ":") {
+			tokens.push({
+				type: "colon",
+				value: ":",
+				line,
+				column: col
+			});
+			pos++;
+			col++;
+			continue;
+		}
+		if (ch === "|") {
+			tokens.push({
+				type: "pipe",
+				value: "|",
+				line,
+				column: col
+			});
+			pos++;
+			col++;
+			continue;
+		}
+		if (ch === "[") {
+			tokens.push({
+				type: "openBracket",
+				value: "[",
+				line,
+				column: col
+			});
+			pos++;
+			col++;
+			continue;
+		}
+		if (ch === "]") {
+			tokens.push({
+				type: "closeBracket",
+				value: "]",
+				line,
+				column: col
+			});
+			pos++;
+			col++;
+			continue;
+		}
+		if (ch === "(") {
+			if (pos + 1 < input.length && input[pos + 1] === "(") {
+				tokens.push({
+					type: "openParen",
+					value: "((",
+					line,
+					column: col
+				});
+				pos += 2;
+				col += 2;
+			} else {
+				tokens.push({
+					type: "openParen",
+					value: "(",
+					line,
+					column: col
+				});
+				pos++;
+				col++;
+			}
+			continue;
+		}
+		if (ch === ")") {
+			if (pos + 1 < input.length && input[pos + 1] === ")") {
+				tokens.push({
+					type: "closeParen",
+					value: "))",
+					line,
+					column: col
+				});
+				pos += 2;
+				col += 2;
+			} else {
+				tokens.push({
+					type: "closeParen",
+					value: ")",
+					line,
+					column: col
+				});
+				pos++;
+				col++;
+			}
+			continue;
+		}
+		if (ch === "{") {
+			tokens.push({
+				type: "openBrace",
+				value: "{",
+				line,
+				column: col
+			});
+			pos++;
+			col++;
+			continue;
+		}
+		if (ch === "}") {
+			tokens.push({
+				type: "closeBrace",
+				value: "}",
+				line,
+				column: col
+			});
+			pos++;
+			col++;
+			continue;
+		}
+		if (ch === "\"" || ch === "'") {
+			const quote = ch;
+			const startCol = col;
+			pos++;
+			col++;
+			let value = "";
+			while (pos < input.length && input[pos] !== quote) {
+				if (input[pos] === "\\") {
+					pos++;
+					col++;
+				}
+				value += input[pos];
+				pos++;
+				col++;
+			}
+			if (pos < input.length) {
+				pos++;
+				col++;
+			}
+			tokens.push({
+				type: "string",
+				value,
+				line,
+				column: startCol
+			});
+			continue;
+		}
+		let matchedArrow = false;
+		for (const arrow of ARROW_PATTERNS) if (input.startsWith(arrow, pos)) {
+			tokens.push({
+				type: "arrow",
+				value: arrow,
+				line,
+				column: col
+			});
+			pos += arrow.length;
+			col += arrow.length;
+			matchedArrow = true;
+			break;
+		}
+		if (matchedArrow) continue;
+		if (isIdStart(ch)) {
+			const startCol = col;
+			let value = "";
+			while (pos < input.length && isIdPart(input[pos])) {
+				value += input[pos];
+				pos++;
+				col++;
+			}
+			const type = KEYWORDS.has(value) ? "keyword" : "identifier";
+			tokens.push({
+				type,
+				value,
+				line,
+				column: startCol
+			});
+			continue;
+		}
+		if (ch === ">") {
+			tokens.push({
+				type: "openBracket",
+				value: ">",
+				line,
+				column: col
+			});
+			pos++;
+			col++;
+			continue;
+		}
+		pos++;
+		col++;
+	}
+	tokens.push({
+		type: "eof",
+		value: "",
+		line,
+		column: col
+	});
+	return tokens;
+}
+function isIdStart(ch) {
+	return ch != null && /[a-zA-Z_$0-9]/.test(ch);
+}
+function isIdPart(ch) {
+	return ch != null && /[a-zA-Z0-9_$]/.test(ch);
+}
+/** Filter out comments and newlines for easier parsing */
+function filterTokens(tokens) {
+	return tokens.filter((t) => t.type !== "comment");
+}
+
+//#endregion
+//#region ../mermaid/src/parser/flowchart.ts
+function parseFlowchart(input) {
+	const state = {
+		tokens: filterTokens(tokenize(input)),
+		pos: 0,
+		nodes: /* @__PURE__ */ new Map(),
+		edges: [],
+		subgraphs: [],
+		direction: "TD"
+	};
+	if (!parseHeader(state)) return {
+		message: "Expected 'graph' or 'flowchart' keyword",
+		line: 1,
+		column: 1
+	};
+	while (!isEof$1(state)) {
+		skipNewlines$1(state);
+		if (isEof$1(state)) break;
+		const token = peek$1(state);
+		if (token.type === "keyword" && token.value === "subgraph") {
+			const result = parseSubgraph(state);
+			if ("message" in result) return result;
+			continue;
+		}
+		if (token.type === "keyword" && token.value === "direction") {
+			advance$1(state);
+			const dir = peek$1(state);
+			if (dir.type === "identifier" || dir.type === "keyword") {
+				state.direction = dir.value;
+				advance$1(state);
+			}
+			skipSemicolon(state);
+			continue;
+		}
+		if (token.type === "keyword" && token.value === "end") break;
+		const result = parseStatement(state);
+		if (result && "message" in result) return result;
+	}
+	return {
+		type: "flowchart",
+		direction: state.direction,
+		nodes: Array.from(state.nodes.values()),
+		edges: state.edges,
+		subgraphs: state.subgraphs
+	};
+}
+function parseHeader(state) {
+	skipNewlines$1(state);
+	const token = peek$1(state);
+	if (token.type !== "keyword" || token.value !== "graph" && token.value !== "flowchart") return false;
+	advance$1(state);
+	skipNewlines$1(state);
+	const dir = peek$1(state);
+	if (dir.type === "identifier" || dir.type === "keyword") {
+		const dirVal = dir.value.toUpperCase();
+		if ([
+			"TB",
+			"TD",
+			"BT",
+			"LR",
+			"RL"
+		].includes(dirVal)) {
+			state.direction = dirVal;
+			advance$1(state);
+		}
+	}
+	skipSemicolon(state);
+	return true;
+}
+function parseStatement(state) {
+	let currentNode = parseNodeRef(state);
+	if (!currentNode) {
+		advance$1(state);
+		return;
+	}
+	while (!isEof$1(state) && peek$1(state).type === "arrow") {
+		const arrowToken = advance$1(state);
+		const { lineStyle, sourceMarker, targetMarker } = parseArrow(arrowToken.value);
+		let edgeLabel;
+		if (arrowToken.value.endsWith("|")) edgeLabel = parseEdgeLabel(state);
+		else if (peek$1(state).type === "pipe") {
+			advance$1(state);
+			edgeLabel = parseEdgeLabel(state);
+		}
+		const targetNode = parseNodeRef(state);
+		if (!targetNode) return {
+			message: "Expected target node after arrow",
+			line: arrowToken.line,
+			column: arrowToken.column
+		};
+		state.edges.push({
+			source: currentNode,
+			target: targetNode,
+			lineStyle,
+			sourceMarker,
+			targetMarker,
+			label: edgeLabel
+		});
+		currentNode = targetNode;
+	}
+	skipSemicolon(state);
+}
+function parseNodeRef(state) {
+	skipNewlines$1(state);
+	const token = peek$1(state);
+	if (token.type !== "identifier" && token.type !== "keyword") return;
+	if (token.type === "keyword" && [
+		"subgraph",
+		"end",
+		"direction"
+	].includes(token.value)) return;
+	const id = token.value;
+	advance$1(state);
+	const next = peek$1(state);
+	if (next.type === "openBracket" || next.type === "openParen" || next.type === "openBrace") {
+		const shape = parseNodeShape(state, id);
+		if (shape) {
+			if (!state.nodes.has(id)) state.nodes.set(id, shape);
+			state.nodeRefCollector?.push(id);
+			return id;
+		}
+	}
+	if (!state.nodes.has(id)) state.nodes.set(id, {
+		id,
+		label: id,
+		shape: "rect"
+	});
+	state.nodeRefCollector?.push(id);
+	return id;
+}
+function parseNodeShape(state, id) {
+	const open = peek$1(state);
+	if (open.value === "[") {
+		advance$1(state);
+		const next = peek$1(state);
+		if (next.type === "openParen") {
+			advance$1(state);
+			const label = readUntil(state, "closeParen");
+			expect(state, "closeBracket");
+			return {
+				id,
+				label,
+				shape: "cylinder"
+			};
+		}
+		if (next.type === "openBracket") {
+			advance$1(state);
+			const label = readUntil(state, "closeBracket");
+			expect(state, "closeBracket");
+			return {
+				id,
+				label,
+				shape: "subroutine"
+			};
+		}
+		return {
+			id,
+			label: readUntil(state, "closeBracket"),
+			shape: "rect"
+		};
+	}
+	if (open.value === "(") {
+		advance$1(state);
+		const next = peek$1(state);
+		if (next.type === "openParen" || next.value === "(") {
+			advance$1(state);
+			const label = readUntil(state, "closeParen");
+			if (peek$1(state).type === "closeParen") advance$1(state);
+			return {
+				id,
+				label,
+				shape: "double-circle"
+			};
+		}
+		if (next.type === "openBracket") {
+			advance$1(state);
+			const label = readUntil(state, "closeBracket");
+			expect(state, "closeParen");
+			return {
+				id,
+				label,
+				shape: "stadium"
+			};
+		}
+		return {
+			id,
+			label: readUntil(state, "closeParen"),
+			shape: "round"
+		};
+	}
+	if (open.value === "((") {
+		advance$1(state);
+		const label = readUntil(state, "closeParen");
+		if (peek$1(state).type === "closeParen") advance$1(state);
+		return {
+			id,
+			label,
+			shape: "double-circle"
+		};
+	}
+	if (open.value === "{") {
+		advance$1(state);
+		if (peek$1(state).type === "openBrace") {
+			advance$1(state);
+			const label = readUntil(state, "closeBrace");
+			expect(state, "closeBrace");
+			return {
+				id,
+				label,
+				shape: "hexagon"
+			};
+		}
+		return {
+			id,
+			label: readUntil(state, "closeBrace"),
+			shape: "rhombus"
+		};
+	}
+	if (open.value === ">") {
+		advance$1(state);
+		return {
+			id,
+			label: readUntil(state, "closeBracket"),
+			shape: "asymmetric"
+		};
+	}
+}
+function parseEdgeLabel(state) {
+	let label = "";
+	while (!isEof$1(state) && peek$1(state).type !== "pipe") {
+		label += peek$1(state).value;
+		advance$1(state);
+	}
+	if (peek$1(state).type === "pipe") advance$1(state);
+	return label.trim();
+}
+function parseSubgraph(state) {
+	advance$1(state);
+	skipNewlines$1(state);
+	let id = "";
+	let label = "";
+	const next = peek$1(state);
+	if (next.type === "identifier" || next.type === "keyword") {
+		id = next.value;
+		label = id;
+		advance$1(state);
+	}
+	if (peek$1(state).type === "openBracket") {
+		advance$1(state);
+		label = readUntil(state, "closeBracket");
+	}
+	skipSemicolon(state);
+	skipNewlines$1(state);
+	let direction;
+	if (peek$1(state).type === "keyword" && peek$1(state).value === "direction") {
+		advance$1(state);
+		const dir = peek$1(state);
+		if (dir.type === "identifier" || dir.type === "keyword") {
+			direction = dir.value;
+			advance$1(state);
+		}
+		skipSemicolon(state);
+	}
+	const childSubgraphs = [];
+	const childNodeIds = /* @__PURE__ */ new Set();
+	const nodeIds = [];
+	while (!isEof$1(state)) {
+		skipNewlines$1(state);
+		if (isEof$1(state)) break;
+		const token = peek$1(state);
+		if (token.type === "keyword" && token.value === "end") {
+			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 refs) if (!childNodeIds.has(nodeId) && !nodeIds.includes(nodeId)) nodeIds.push(nodeId);
+	}
+	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";
+	let rest = raw;
+	if (rest.startsWith("o")) {
+		sourceMarker = "dot";
+		rest = rest.slice(1);
+	} else if (rest.startsWith("x")) {
+		sourceMarker = "cross";
+		rest = rest.slice(1);
+	} else if (rest.startsWith("<")) {
+		sourceMarker = "arrow";
+		rest = rest.slice(1);
+	}
+	let targetMarker = "none";
+	if (rest.endsWith(">")) {
+		targetMarker = "arrow";
+		rest = rest.slice(0, -1);
+	} else if (rest.endsWith("o")) {
+		targetMarker = "dot";
+		rest = rest.slice(0, -1);
+	} else if (rest.endsWith("x")) {
+		targetMarker = "cross";
+		rest = rest.slice(0, -1);
+	}
+	let lineStyle = "solid";
+	if (rest.includes("-.") || rest.includes(".-")) lineStyle = "dotted";
+	else if (rest.startsWith("==") || rest.startsWith("=")) lineStyle = "thick";
+	return {
+		lineStyle,
+		sourceMarker,
+		targetMarker
+	};
+}
+function peek$1(state) {
+	return state.tokens[state.pos] ?? {
+		type: "eof",
+		value: "",
+		line: 0,
+		column: 0
+	};
+}
+function advance$1(state) {
+	const token = state.tokens[state.pos] ?? {
+		type: "eof",
+		value: "",
+		line: 0,
+		column: 0
+	};
+	if (state.pos < state.tokens.length) state.pos++;
+	return token;
+}
+function isEof$1(state) {
+	return state.pos >= state.tokens.length || state.tokens[state.pos]?.type === "eof";
+}
+function skipNewlines$1(state) {
+	while (!isEof$1(state) && peek$1(state).type === "newline") advance$1(state);
+}
+function skipSemicolon(state) {
+	if (!isEof$1(state) && peek$1(state).type === "semicolon") advance$1(state);
+}
+function expect(state, type) {
+	if (peek$1(state).type === type) return advance$1(state);
+}
+function readUntil(state, closeType) {
+	let value = "";
+	while (!isEof$1(state) && peek$1(state).type !== closeType) {
+		if (value) value += " ";
+		value += peek$1(state).value;
+		advance$1(state);
+	}
+	if (peek$1(state).type === closeType) advance$1(state);
+	return value.trim();
+}
+
+//#endregion
+//#region ../mermaid/src/parser/sequence.ts
+function parseSequence(input) {
+	const state = {
+		tokens: filterTokens(tokenize(input)),
+		pos: 0,
+		participants: /* @__PURE__ */ new Map(),
+		messages: [],
+		blocks: [],
+		notes: [],
+		noteMessageCounts: []
+	};
+	skipNewlines(state);
+	const header = peek(state);
+	if (header.type !== "keyword" || header.value !== "sequenceDiagram") return {
+		message: "Expected 'sequenceDiagram' keyword",
+		line: header.line,
+		column: header.column
+	};
+	advance(state);
+	skipNewlines(state);
+	while (!isEof(state)) {
+		skipNewlines(state);
+		if (isEof(state)) break;
+		const token = peek(state);
+		if (token.type === "keyword" && (token.value === "participant" || token.value === "actor")) {
+			parseParticipant(state, token.value);
+			continue;
+		}
+		if (token.type === "keyword" && (token.value === "activate" || token.value === "deactivate")) {
+			advance(state);
+			skipNewlines(state);
+			if (!isEof(state) && peek(state).type === "identifier") advance(state);
+			skipNewlines(state);
+			continue;
+		}
+		if (token.type === "keyword" && token.value === "Note") {
+			const result = parseNote(state);
+			if (result && "message" in result) return result;
+			continue;
+		}
+		if (token.type === "keyword" && isBlockKeyword(token.value)) {
+			const result = parseBlock(state);
+			if ("message" in result) return result;
+			continue;
+		}
+		if (token.type === "keyword" && token.value === "end") break;
+		if (token.type === "identifier" || token.type === "keyword") {
+			const result = parseMessage(state);
+			if (result && "message" in result && "line" in result) return result;
+			continue;
+		}
+		advance(state);
+	}
+	return {
+		type: "sequence",
+		participants: Array.from(state.participants.values()),
+		messages: state.messages,
+		blocks: state.blocks,
+		notes: state.notes,
+		_noteMessageCounts: state.noteMessageCounts
+	};
+}
+function parseParticipant(state, type) {
+	advance(state);
+	skipNewlines(state);
+	const idToken = peek(state);
+	if (idToken.type !== "identifier" && idToken.type !== "keyword") return;
+	const id = idToken.value;
+	advance(state);
+	let label = id;
+	if (peek(state).type === "keyword" && peek(state).value === "as") {
+		advance(state);
+		label = readRestOfLine(state);
+	}
+	state.participants.set(id, {
+		id,
+		label,
+		type
+	});
+	skipNewlines(state);
+}
+function parseMessage(state) {
+	const from = peek(state).value;
+	advance(state);
+	ensureParticipant(state, from);
+	if (peek(state).type !== "arrow") {
+		skipToEndOfLine(state);
+		return;
+	}
+	const arrowToken = advance(state);
+	const arrow = arrowToType(arrowToken.value);
+	const toToken = peek(state);
+	if (toToken.type !== "identifier" && toToken.type !== "keyword") return {
+		message: `Expected target after arrow at line ${arrowToken.line}`,
+		line: arrowToken.line,
+		column: arrowToken.column
+	};
+	const to = toToken.value;
+	advance(state);
+	ensureParticipant(state, to);
+	let text = "";
+	if (peek(state).type === "colon") {
+		advance(state);
+		text = readRestOfLine(state);
+	}
+	const activate = arrowToken.value.includes("+") || void 0;
+	const deactivate = arrowToken.value.includes("-") || void 0;
+	state.messages.push({
+		from,
+		to,
+		text,
+		arrow,
+		activate,
+		deactivate
+	});
+	skipNewlines(state);
+}
+function parseNote(state) {
+	advance(state);
+	let position;
+	const posToken = peek(state);
+	if (posToken.value === "left" || posToken.value === "right") {
+		const side = posToken.value;
+		advance(state);
+		if (peek(state).value === "of") advance(state);
+		position = `${side} of`;
+	} else if (posToken.value === "over") {
+		advance(state);
+		position = "over";
+	} else return {
+		message: `Expected note position (left of, right of, over) at line ${posToken.line}`,
+		line: posToken.line,
+		column: posToken.column
+	};
+	const participants = [];
+	while (!isEof(state) && peek(state).type !== "colon" && peek(state).type !== "newline") {
+		const p = peek(state);
+		if (p.type === "identifier" || p.type === "keyword") {
+			participants.push(p.value);
+			ensureParticipant(state, p.value);
+		}
+		advance(state);
+	}
+	let text = "";
+	if (peek(state).type === "colon") {
+		advance(state);
+		text = readRestOfLine(state);
+	}
+	state.noteMessageCounts.push(state.messages.length);
+	state.notes.push({
+		position,
+		participants,
+		text
+	});
+	skipNewlines(state);
+}
+function parseBlock(state) {
+	const blockType = advance(state).value;
+	let label = "";
+	if (peek(state).type !== "newline" && !isEof(state)) label = readRestOfLine(state);
+	skipNewlines(state);
+	const messages = [];
+	const sections = [];
+	let currentSection;
+	while (!isEof(state)) {
+		skipNewlines(state);
+		if (isEof(state)) break;
+		const token = peek(state);
+		if (token.type === "keyword" && token.value === "end") {
+			advance(state);
+			break;
+		}
+		if (token.type === "keyword" && token.value === "else") {
+			advance(state);
+			const sectionLabel = readRestOfLine(state);
+			if (currentSection) sections.push(currentSection);
+			currentSection = {
+				label: sectionLabel,
+				messages: []
+			};
+			skipNewlines(state);
+			continue;
+		}
+		if (token.type === "keyword" && token.value === "and") {
+			advance(state);
+			const sectionLabel = readRestOfLine(state);
+			if (currentSection) sections.push(currentSection);
+			currentSection = {
+				label: sectionLabel,
+				messages: []
+			};
+			skipNewlines(state);
+			continue;
+		}
+		if (token.type === "keyword" && token.value === "Note") {
+			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[state.messages.length - 1];
+				if (currentSection) currentSection.messages.push(msg);
+				else messages.push(msg);
+			}
+			continue;
+		}
+		advance(state);
+	}
+	if (currentSection) sections.push(currentSection);
+	state.blocks.push({
+		type: blockType,
+		label,
+		messages,
+		sections: sections.length > 0 ? sections : void 0
+	});
+	skipNewlines(state);
+	return { ok: true };
+}
+function arrowToType(arrow) {
+	if (arrow === "->>") return "solid";
+	if (arrow === "-->>") return "dotted";
+	if (arrow === "-x" || arrow === "-X") return "solidCross";
+	if (arrow === "--x" || arrow === "--X") return "dottedCross";
+	if (arrow === "-))") return "solidOpen";
+	if (arrow === "--))") return "dottedOpen";
+	if (arrow === "->") return "solid";
+	return "solid";
+}
+function isBlockKeyword(value) {
+	return [
+		"loop",
+		"alt",
+		"opt",
+		"par",
+		"critical",
+		"break"
+	].includes(value);
+}
+function ensureParticipant(state, id) {
+	if (!state.participants.has(id)) state.participants.set(id, {
+		id,
+		label: id,
+		type: "participant"
+	});
+}
+function peek(state) {
+	return state.tokens[state.pos] ?? {
+		type: "eof",
+		value: "",
+		line: 0,
+		column: 0
+	};
+}
+function advance(state) {
+	const token = state.tokens[state.pos] ?? {
+		type: "eof",
+		value: "",
+		line: 0,
+		column: 0
+	};
+	if (state.pos < state.tokens.length) state.pos++;
+	return token;
+}
+function isEof(state) {
+	return state.pos >= state.tokens.length || state.tokens[state.pos]?.type === "eof";
+}
+function skipNewlines(state) {
+	while (!isEof(state) && peek(state).type === "newline") advance(state);
+}
+function skipToEndOfLine(state) {
+	while (!isEof(state) && peek(state).type !== "newline") advance(state);
+}
+function readRestOfLine(state) {
+	let text = "";
+	while (!isEof(state) && peek(state).type !== "newline" && peek(state).type !== "semicolon") {
+		if (text) text += " ";
+		text += peek(state).value;
+		advance(state);
+	}
+	return text.trim();
+}
+
+//#endregion
+//#region ../mermaid/src/parser/index.ts
+/**
+* Parse a Mermaid DSL string into a structured diagram IR.
+*
+* Returns a FlowchartDiagram, SequenceDiagram, or ParseError.
+* Check for errors with: `if ("message" in result)`
+*/
+function parse(input) {
+	const trimmed = input.trim();
+	if (trimmed.startsWith("sequenceDiagram")) return parseSequence(trimmed);
+	if (trimmed.startsWith("graph") || trimmed.startsWith("flowchart")) return parseFlowchart(trimmed);
+	return {
+		message: `Unknown diagram type. Expected 'graph', 'flowchart', or 'sequenceDiagram'.`,
+		line: 1,
+		column: 1
+	};
+}
+
+//#endregion
+//#region ../mermaid/src/root.style.ts
+const c$15 = classes(["svgRoot"]);
+const svgRoot = rule`${c$15.svgRoot} {
+  width: 100%;
+  height: auto;
+  font-family: inherit;
+}`;
+
+//#endregion
+//#region ../mermaid/src/tokens.ts
+const tokenDefinition$1 = {
+	nodeFill: "#e8f4f8",
+	nodeStroke: "#23395d",
+	nodeText: "#1d1d1f",
+	nodeRadius: "8",
+	edgeStroke: "#666",
+	edgeWidth: "2",
+	edgeLabelBg: "#fff",
+	edgeLabelText: "#333",
+	arrowFill: "#666",
+	animatedDashArray: "5",
+	animatedDuration: "0.5s",
+	animatedDashOffset: "10",
+	subgraphFill: "#f8f9fa",
+	subgraphStroke: "#ccc",
+	subgraphTitleBg: "#eee",
+	subgraphTitleText: "#333",
+	actorFill: "#e8f4f8",
+	actorStroke: "#23395d",
+	lifelineStroke: "#999",
+	activationFill: "#d4e6f1",
+	messageStroke: "#333",
+	blockFill: "rgba(200,200,200,0.1)",
+	blockStroke: "#aaa",
+	noteBg: "#fffacd",
+	noteStroke: "#e6d800",
+	noteText: "#333",
+	bgColor: "#ffffff",
+	gridDotColor: "rgba(0, 0, 0, 0.1)",
+	gridDotGap: "20",
+	gridDotRadius: "1",
+	fontFamily: "-apple-system, BlinkMacSystemFont, 'Inter', sans-serif",
+	fontSize: "14"
+};
+const tokens$1 = defineTokens(tokenDefinition$1);
+/**
+* Default mermaid theme — sets CSS custom properties on :root.
+* Embed its __cssTemplate in an SVG <style> for self-contained rendering.
+*/
+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([
+	"edgeLine",
+	"edgeInteraction",
+	"edgeArrow",
+	"edgeDotted",
+	"edgeThick",
+	"edgeAnimated",
+	"edgeLabel",
+	"edgeLabelBg",
+	"arrowHead",
+	"arrowHeadClosed",
+	"dotMarker",
+	"crossMarker"
+]);
+const edgeLine = rule`${c$14.edgeLine} {
+  fill: none;
+  stroke: ${tokens$1.edgeStroke};
+  stroke-width: ${tokens$1.edgeWidth};
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}`;
+const edgeInteraction = rule`${c$14.edgeInteraction} {
+  fill: none;
+  stroke-opacity: 0;
+  stroke-width: 20;
+}`;
+const edgeDotted = rule`${c$14.edgeDotted} {
+  stroke-dasharray: 6, 4;
+}`;
+const edgeAnimated = rule`${c$14.edgeAnimated} {
+  stroke-dasharray: ${tokens$1.animatedDashArray};
+  animation: mmd-dash-flow ${tokens$1.animatedDuration} linear infinite;
+}`;
+const edgeAnimatedKeyframes = rule`
+@keyframes mmd-dash-flow {
+  from {
+    stroke-dashoffset: ${tokens$1.animatedDashOffset};
+  }
+}
+`;
+const edgeThick = rule`${c$14.edgeThick} {
+  stroke-width: 3;
+}`;
+const edgeLabel = rule`${c$14.edgeLabel} {
+  ${textLabel(tokens$1.edgeLabelText, "12px")}
+}`;
+const edgeLabelBg = rule`${c$14.edgeLabelBg} {
+  fill: ${tokens$1.edgeLabelBg};
+  stroke: none;
+}`;
+const arrowHead = rule`${c$14.arrowHead} {
+  fill: none;
+  stroke: ${tokens$1.arrowFill};
+  stroke-width: 1;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}`;
+const arrowHeadClosed = rule`${c$14.arrowHeadClosed} {
+  fill: ${tokens$1.arrowFill};
+  stroke: ${tokens$1.arrowFill};
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}`;
+const dotMarker = rule`${c$14.dotMarker} {
+  fill: ${tokens$1.bgColor};
+  stroke: ${tokens$1.edgeStroke};
+  stroke-width: 1.5;
+}`;
+const crossMarker = rule`${c$14.crossMarker} {
+  fill: none;
+  stroke: ${tokens$1.edgeStroke};
+  stroke-width: 2;
+  stroke-linecap: round;
+}`;
+
+//#endregion
+//#region ../mermaid/src/components/defs.tsx
+/**
+* Arrow markers follow xyflow conventions:
+* - viewBox "-10 -10 20 20", tip at origin (0,0)
+* - refX=0 so the arrow tip aligns with the path endpoint
+* - markerUnits="strokeWidth" for automatic scaling
+*
+* Closed arrow: polyline "-5,-4 0,0 -5,4 -5,-4" (filled triangle)
+* Open arrow:   polyline "-5,-4 0,0 -5,4"        (chevron)
+*/
+const ARROW_CLOSED_POINTS = "-5,-4 0,0 -5,4 -5,-4";
+const ARROW_OPEN_POINTS = "-5,-4 0,0 -5,4";
+/** Dot marker radius in marker coordinate space. */
+const DOT_RADIUS = 4;
+function Defs() {
+	return /* @__PURE__ */ jsxs("defs", { children: [
+		/* @__PURE__ */ jsx("pattern", {
+			id: "mmd-grid",
+			x: 0,
+			y: 0,
+			width: tokens$1.gridDotGap,
+			height: tokens$1.gridDotGap,
+			patternUnits: "userSpaceOnUse",
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: tokens$1.gridDotGap,
+				cy: tokens$1.gridDotGap,
+				r: tokens$1.gridDotRadius,
+				fill: tokens$1.gridDotColor
+			})
+		}),
+		/* @__PURE__ */ jsx("marker", {
+			id: "mmd-arrow",
+			viewBox: "-10 -10 20 20",
+			refX: 0,
+			refY: 0,
+			markerWidth: 12.5,
+			markerHeight: 12.5,
+			markerUnits: "strokeWidth",
+			orient: "auto-start-reverse",
+			children: /* @__PURE__ */ jsx("polyline", {
+				class: arrowHeadClosed,
+				points: ARROW_CLOSED_POINTS,
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			})
+		}),
+		/* @__PURE__ */ jsx("marker", {
+			id: "mmd-arrow-filled",
+			viewBox: "-10 -10 20 20",
+			refX: 0,
+			refY: 0,
+			markerWidth: 12.5,
+			markerHeight: 12.5,
+			markerUnits: "strokeWidth",
+			orient: "auto-start-reverse",
+			children: /* @__PURE__ */ jsx("polyline", {
+				class: arrowHeadClosed,
+				points: ARROW_CLOSED_POINTS,
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			})
+		}),
+		/* @__PURE__ */ jsx("marker", {
+			id: "mmd-arrow-open",
+			viewBox: "-10 -10 20 20",
+			refX: 0,
+			refY: 0,
+			markerWidth: 12.5,
+			markerHeight: 12.5,
+			markerUnits: "strokeWidth",
+			orient: "auto-start-reverse",
+			children: /* @__PURE__ */ jsx("polyline", {
+				class: arrowHead,
+				points: ARROW_OPEN_POINTS,
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			})
+		}),
+		/* @__PURE__ */ jsx("marker", {
+			id: "mmd-dot",
+			viewBox: "-10 -10 20 20",
+			refX: 0,
+			refY: 0,
+			markerWidth: 8,
+			markerHeight: 8,
+			markerUnits: "strokeWidth",
+			orient: "auto-start-reverse",
+			children: /* @__PURE__ */ jsx("circle", {
+				class: dotMarker,
+				cx: 0,
+				cy: 0,
+				r: DOT_RADIUS
+			})
+		}),
+		/* @__PURE__ */ jsx("marker", {
+			id: "mmd-cross",
+			viewBox: "-10 -10 20 20",
+			refX: 0,
+			refY: 0,
+			markerWidth: 10,
+			markerHeight: 10,
+			markerUnits: "strokeWidth",
+			orient: "auto-start-reverse",
+			children: /* @__PURE__ */ jsx("path", {
+				class: crossMarker,
+				d: "M -4,-4 L 4,4 M -4,4 L 4,-4"
+			})
+		})
+	] });
+}
+
+//#endregion
+//#region ../mermaid/src/node.style.ts
+const c$13 = classes([
+	"node",
+	"nodeShape",
+	"nodeRect",
+	"nodeRound",
+	"nodeCircle",
+	"nodeRhombus",
+	"nodeHexagon",
+	"nodeCylinder",
+	"nodeStadium",
+	"nodeLabel"
+]);
+const nodeShape = rule`${c$13.nodeShape} {
+  ${boxShape(tokens$1.nodeFill, tokens$1.nodeStroke, tokens$1.edgeWidth)}
+}`;
+const nodeShapeHover = rule`${c$13.nodeShape} {
+  transition: filter 0.15s ease;
+  cursor: pointer;
+}
+${c$13.nodeShape}:hover {
+  filter: brightness(0.93);
+}`;
+const nodeLabel = rule`${c$13.nodeLabel} {
+  ${textLabel(tokens$1.nodeText, `${tokens$1.fontSize}px`)}
+  pointer-events: none;
+}`;
+
+//#endregion
+//#region ../mermaid/src/components/nodes/rect.tsx
+function RectNode(props) {
+	const { node, x, y, width, height } = props.positioned;
+	return /* @__PURE__ */ jsxs("g", {
+		class: [c$13.node, props.class],
+		transform: `translate(${x}, ${y})`,
+		children: [/* @__PURE__ */ jsx("rect", {
+			class: [nodeShape, nodeShapeHover],
+			x: -width / 2,
+			y: -height / 2,
+			width,
+			height,
+			rx: 12
+		}), /* @__PURE__ */ jsx("text", {
+			class: nodeLabel,
+			children: node.label
+		})]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/nodes/round.tsx
+function RoundNode(props) {
+	const { node, x, y, width, height } = props.positioned;
+	return /* @__PURE__ */ jsxs("g", {
+		class: [c$13.node, props.class],
+		transform: `translate(${x}, ${y})`,
+		children: [/* @__PURE__ */ jsx("rect", {
+			class: [nodeShape, nodeShapeHover],
+			x: -width / 2,
+			y: -height / 2,
+			width,
+			height,
+			rx: height / 2
+		}), /* @__PURE__ */ jsx("text", {
+			class: nodeLabel,
+			children: node.label
+		})]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/nodes/circle.tsx
+function CircleNode(props) {
+	const { node, x, y, width } = props.positioned;
+	return /* @__PURE__ */ jsxs("g", {
+		class: [c$13.node, props.class],
+		transform: `translate(${x}, ${y})`,
+		children: [/* @__PURE__ */ jsx("circle", {
+			class: [nodeShape, nodeShapeHover],
+			r: width / 2
+		}), /* @__PURE__ */ jsx("text", {
+			class: nodeLabel,
+			children: node.label
+		})]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/nodes/rhombus.tsx
+function RhombusNode(props) {
+	const { node, x, y, width, height } = props.positioned;
+	const hw = width / 2;
+	const hh = height / 2;
+	return /* @__PURE__ */ jsxs("g", {
+		class: [c$13.node, props.class],
+		transform: `translate(${x}, ${y})`,
+		children: [/* @__PURE__ */ jsx("polygon", {
+			class: [nodeShape, nodeShapeHover],
+			points: `0,${-hh} ${hw},0 0,${hh} ${-hw},0`
+		}), /* @__PURE__ */ jsx("text", {
+			class: nodeLabel,
+			children: node.label
+		})]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/nodes/hexagon.tsx
+function HexagonNode(props) {
+	const { node, x, y, width, height } = props.positioned;
+	const hw = width / 2;
+	const hh = height / 2;
+	const inset = width * .15;
+	return /* @__PURE__ */ jsxs("g", {
+		class: [c$13.node, props.class],
+		transform: `translate(${x}, ${y})`,
+		children: [/* @__PURE__ */ jsx("polygon", {
+			class: [nodeShape, nodeShapeHover],
+			points: `${-hw + inset},${-hh} ${hw - inset},${-hh} ${hw},0 ${hw - inset},${hh} ${-hw + inset},${hh} ${-hw},0`
+		}), /* @__PURE__ */ jsx("text", {
+			class: nodeLabel,
+			children: node.label
+		})]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/nodes/stadium.tsx
+function StadiumNode(props) {
+	const { node, x, y, width, height } = props.positioned;
+	return /* @__PURE__ */ jsxs("g", {
+		class: [c$13.node, props.class],
+		transform: `translate(${x}, ${y})`,
+		children: [/* @__PURE__ */ jsx("rect", {
+			class: [nodeShape, nodeShapeHover],
+			x: -width / 2,
+			y: -height / 2,
+			width,
+			height,
+			rx: height / 2,
+			ry: height / 2
+		}), /* @__PURE__ */ jsx("text", {
+			class: nodeLabel,
+			children: node.label
+		})]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/nodes/cylinder.tsx
+function CylinderNode(props) {
+	const { node, x, y, width, height } = props.positioned;
+	const hw = width / 2;
+	const hh = height / 2;
+	const ry = 8;
+	return /* @__PURE__ */ jsxs("g", {
+		class: [c$13.node, props.class],
+		transform: `translate(${x}, ${y})`,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				class: [nodeShape, nodeShapeHover],
+				d: `M ${-hw} ${-hh + ry} A ${hw} ${ry} 0 0 1 ${hw} ${-hh + ry} L ${hw} ${hh - ry} A ${hw} ${ry} 0 0 1 ${-hw} ${hh - ry} Z`
+			}),
+			/* @__PURE__ */ jsx("ellipse", {
+				class: nodeShape,
+				cx: 0,
+				cy: -hh + ry,
+				rx: hw,
+				ry
+			}),
+			/* @__PURE__ */ jsx("text", {
+				class: nodeLabel,
+				y: ry / 2,
+				children: node.label
+			})
+		]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/nodes/subroutine.tsx
+function SubroutineNode(props) {
+	const { node, x, y, width, height } = props.positioned;
+	const hw = width / 2;
+	const hh = height / 2;
+	const inset = 8;
+	return /* @__PURE__ */ jsxs("g", {
+		class: [c$13.node, props.class],
+		transform: `translate(${x}, ${y})`,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				class: [nodeShape, nodeShapeHover],
+				x: -hw,
+				y: -hh,
+				width,
+				height,
+				rx: 0
+			}),
+			/* @__PURE__ */ jsx("line", {
+				class: nodeShape,
+				x1: -hw + inset,
+				y1: -hh,
+				x2: -hw + inset,
+				y2: hh
+			}),
+			/* @__PURE__ */ jsx("line", {
+				class: nodeShape,
+				x1: hw - inset,
+				y1: -hh,
+				x2: hw - inset,
+				y2: hh
+			}),
+			/* @__PURE__ */ jsx("text", {
+				class: nodeLabel,
+				children: node.label
+			})
+		]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/nodes/asymmetric.tsx
+function AsymmetricNode(props) {
+	const { node, x, y, width, height } = props.positioned;
+	const hw = width / 2;
+	const hh = height / 2;
+	return /* @__PURE__ */ jsxs("g", {
+		class: [c$13.node, props.class],
+		transform: `translate(${x}, ${y})`,
+		children: [/* @__PURE__ */ jsx("polygon", {
+			class: [nodeShape, nodeShapeHover],
+			points: `${-hw},${-hh} ${hw},${-hh} ${hw},${hh} ${-hw},${hh} ${-hw + 10},0`
+		}), /* @__PURE__ */ jsx("text", {
+			class: nodeLabel,
+			children: node.label
+		})]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/nodes/parallelogram.tsx
+function ParallelogramNode(props) {
+	const { node, x, y, width, height } = props.positioned;
+	const hw = width / 2;
+	const hh = height / 2;
+	const skew = width * .15;
+	return /* @__PURE__ */ jsxs("g", {
+		class: [c$13.node, props.class],
+		transform: `translate(${x}, ${y})`,
+		children: [/* @__PURE__ */ jsx("polygon", {
+			class: [nodeShape, nodeShapeHover],
+			points: `${-hw + skew},${-hh} ${hw + skew},${-hh} ${hw - skew},${hh} ${-hw - skew},${hh}`
+		}), /* @__PURE__ */ jsx("text", {
+			class: nodeLabel,
+			children: node.label
+		})]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/nodes/trapezoid.tsx
+function TrapezoidNode(props) {
+	const { node, x, y, width, height } = props.positioned;
+	const hw = width / 2;
+	const hh = height / 2;
+	const inset = width * .15;
+	return /* @__PURE__ */ jsxs("g", {
+		class: [c$13.node, props.class],
+		transform: `translate(${x}, ${y})`,
+		children: [/* @__PURE__ */ jsx("polygon", {
+			class: [nodeShape, nodeShapeHover],
+			points: `${-hw + inset},${-hh} ${hw - inset},${-hh} ${hw},${hh} ${-hw},${hh}`
+		}), /* @__PURE__ */ jsx("text", {
+			class: nodeLabel,
+			children: node.label
+		})]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/nodes/double-circle.tsx
+function DoubleCircleNode(props) {
+	const { node, x, y, width } = props.positioned;
+	const outerR = width / 2;
+	const innerR = outerR - 4;
+	return /* @__PURE__ */ jsxs("g", {
+		class: [c$13.node, props.class],
+		transform: `translate(${x}, ${y})`,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				class: [nodeShape, nodeShapeHover],
+				r: outerR
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				class: nodeShape,
+				r: innerR
+			}),
+			/* @__PURE__ */ jsx("text", {
+				class: nodeLabel,
+				children: node.label
+			})
+		]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/nodes/index.ts
+const shapeMap = {
+	rect: RectNode,
+	round: RoundNode,
+	stadium: StadiumNode,
+	circle: CircleNode,
+	rhombus: RhombusNode,
+	hexagon: HexagonNode,
+	cylinder: CylinderNode,
+	subroutine: SubroutineNode,
+	asymmetric: AsymmetricNode,
+	parallelogram: ParallelogramNode,
+	trapezoid: TrapezoidNode,
+	"double-circle": DoubleCircleNode
+};
+
+//#endregion
+//#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];
+	const markerEnd = MARKER_URL[edge.targetMarker];
+	const markerStart = MARKER_URL[edge.sourceMarker];
+	return /* @__PURE__ */ jsxs("g", {
+		class: props.class,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				class: [edgeLine, lineStyle],
+				d: path,
+				"marker-start": markerStart,
+				"marker-end": markerEnd
+			}),
+			/* @__PURE__ */ jsx("path", {
+				class: edgeInteraction,
+				d: path
+			}),
+			edge.label && labelPosition && labelSize ? /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+				class: edgeLabelBg,
+				x: labelPosition.x - labelSize.width / 2 - 4,
+				y: labelPosition.y - labelSize.height / 2 - 2,
+				width: labelSize.width + 8,
+				height: labelSize.height + 4,
+				rx: 4
+			}), /* @__PURE__ */ jsx("text", {
+				class: edgeLabel,
+				x: labelPosition.x,
+				y: labelPosition.y,
+				children: edge.label
+			})] }) : null
+		]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/subgraph.style.ts
+const c$12 = classes(["subgraphBg", "subgraphTitle"]);
+const subgraphBg = rule`${c$12.subgraphBg} {
+  ${boxShape(tokens$1.subgraphFill, tokens$1.subgraphStroke, 1)}
+}`;
+const subgraphTitle = rule`${c$12.subgraphTitle} {
+  fill: ${tokens$1.subgraphTitleText};
+  font-family: ${tokens$1.fontFamily};
+  font-size: 12px;
+  font-weight: 600;
+}`;
+
+//#endregion
+//#region ../mermaid/src/components/subgraph.tsx
+function SubgraphBox(props) {
+	const { subgraph, x, y, width, height } = props.positioned;
+	return /* @__PURE__ */ jsxs("g", {
+		class: props.class,
+		transform: `translate(${x}, ${y})`,
+		children: [/* @__PURE__ */ jsx("rect", {
+			class: subgraphBg,
+			width,
+			height,
+			rx: 8
+		}), /* @__PURE__ */ jsx("text", {
+			class: subgraphTitle,
+			x: 16,
+			y: 24,
+			children: subgraph.label
+		})]
+	});
+}
+
+//#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 = {
+	nodeSpacing: 60,
+	rankSpacing: 80,
+	nodeWidth: 150,
+	nodeHeight: 50,
+	nodePadding: 16,
+	diagramPadding: 20,
+	edgeRouting: "bezier"
+};
+function flowchartLayout(diagram, options) {
+	const opts = {
+		...DEFAULT_OPTIONS$1,
+		...options
+	};
+	const { nodes, edges, subgraphs, direction } = diagram;
+	if (nodes.length === 0) return {
+		width: 0,
+		height: 0,
+		viewBox: "0 0 0 0",
+		nodes: [],
+		edges: [],
+		subgraphs: []
+	};
+	const nodeSizes = /* @__PURE__ */ new Map();
+	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 visited = /* @__PURE__ */ new Set();
+	const inStack = /* @__PURE__ */ new Set();
+	for (const node of nodes) adj.set(node.id, []);
+	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 = 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);
+	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();
+	for (const node of nodes) {
+		safeAdj.set(node.id, []);
+		inDegree.set(node.id, 0);
+	}
+	for (const edge of safeEdges) {
+		safeAdj.get(edge.source)?.push(edge.target);
+		inDegree.set(edge.target, (inDegree.get(edge.target) ?? 0) + 1);
+	}
+	const queue = [];
+	for (const node of nodes) if ((inDegree.get(node.id) ?? 0) === 0) {
+		queue.push(node.id);
+		layers.set(node.id, 0);
+	}
+	while (queue.length > 0) {
+		const current = queue.shift();
+		const currentLayer = layers.get(current) ?? 0;
+		for (const neighbor of safeAdj.get(current) ?? []) {
+			const existingLayer = layers.get(neighbor) ?? -1;
+			layers.set(neighbor, Math.max(existingLayer, currentLayer + 1));
+			inDegree.set(neighbor, (inDegree.get(neighbor) ?? 1) - 1);
+			if (inDegree.get(neighbor) === 0) queue.push(neighbor);
+		}
+	}
+	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 (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;
+				}
+			}
+		}
+		if (!improved) break;
+	}
+	const isVertical = direction === "TB" || direction === "TD" || direction === "BT";
+	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, p] of positions) {
+		if (dummySet.has(id)) continue;
+		const size = nodeSizes.get(id);
+		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 [, p] of positions) {
+		p.x += offsetX;
+		p.y += offsetY;
+	}
+	if (direction === "BT") {
+		const totalHeight = maxY - minY;
+		for (const [, p] of positions) p.y = totalHeight - (p.y - opts.diagramPadding) + opts.diagramPadding;
+	}
+	if (direction === "RL") {
+		const totalWidth = maxX - minX;
+		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 p = positions.get(node.id);
+		const size = nodeSizes.get(node.id);
+		return {
+			node,
+			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 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) {
+			labelPosition = result.labelMid;
+			labelSize = measureLabel(edge.label, opts);
+		}
+		return {
+			edge,
+			path: result.path,
+			labelPosition,
+			labelSize
+		};
+	});
+	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 p = positions.get(nodeId);
+			const size = nodeSizes.get(nodeId);
+			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;
+		const positioned = {
+			subgraph: sg,
+			x: sgMinX - padding,
+			y: sgMinY - padding - 20,
+			width: sgMaxX - sgMinX + padding * 2,
+			height: sgMaxY - sgMinY + padding * 2 + 20
+		};
+		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,
+		viewBox: `0 0 ${diagramWidth} ${diagramHeight}`,
+		nodes: positionedNodes,
+		edges: positionedEdges,
+		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;
+/**
+* Calculate control-point offset along the primary axis.
+* When distance >= 0 (normal flow), the offset is half the distance.
+* When distance < 0 (backward edge), use a wider curve via sqrt scaling.
+*/
+function controlOffset(distance, curvature) {
+	if (distance >= 0) return .5 * distance;
+	return curvature * 25 * Math.sqrt(-distance);
+}
+/**
+* Compute the label position on a cubic bezier at t=0.5.
+* Uses the exact bezier midpoint formula instead of a simple linear midpoint.
+*/
+function bezierMidpoint(sx, sy, cx1, cy1, cx2, cy2, tx, ty) {
+	return {
+		x: sx * .125 + cx1 * .375 + cx2 * .375 + tx * .125,
+		y: sy * .125 + cy1 * .375 + cy2 * .375 + ty * .125
+	};
+}
+function buildEdgePath(source, target, sourceSize, targetSize, 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;
+		}
+	}
+	if (opts.edgeRouting === "bezier") if (isVertical) {
+		const offset = controlOffset(ty - sy, DEFAULT_CURVATURE);
+		const cy1 = sy + offset;
+		const cy2 = ty - offset;
+		const mid = bezierMidpoint(sx, sy, sx, cy1, tx, cy2, tx, ty);
+		return {
+			path: `M ${sx} ${sy} C ${sx} ${cy1} ${tx} ${cy2} ${tx} ${ty}`,
+			labelMid: mid
+		};
+	} else {
+		const offset = controlOffset(tx - sx, DEFAULT_CURVATURE);
+		const cx1 = sx + offset;
+		const cx2 = tx - offset;
+		const mid = bezierMidpoint(sx, sy, cx1, sy, cx2, ty, tx, ty);
+		return {
+			path: `M ${sx} ${sy} C ${cx1} ${sy} ${cx2} ${ty} ${tx} ${ty}`,
+			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: {
+			x: (sx + tx) / 2,
+			y: (sy + ty) / 2
+		}
+	};
+}
+/**
+* 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 {
+		path: d,
+		labelMid
+	};
+}
+/** 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 {
+		minX: minX - opts.nodePadding,
+		minY: minY - opts.nodePadding - titleHeight
+	};
+}
+
+//#endregion
+//#region ../mermaid/src/layout/sequence.ts
+const DEFAULT_OPTIONS = {
+	nodeSpacing: 200,
+	rankSpacing: 50,
+	nodeWidth: 120,
+	nodeHeight: 40,
+	nodePadding: 16,
+	diagramPadding: 20,
+	edgeRouting: "bezier"
+};
+function sequenceLayout(diagram, options) {
+	const opts = {
+		...DEFAULT_OPTIONS,
+		...options
+	};
+	const { participants, messages, blocks, notes } = diagram;
+	if (participants.length === 0) return {
+		width: 0,
+		height: 0,
+		viewBox: "0 0 0 0",
+		participants: [],
+		messages: [],
+		lifelines: [],
+		activations: [],
+		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();
+	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 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,
+			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) {
+		const msg = pmsg.message;
+		if (msg.activate) activationStarts.set(msg.to, pmsg.y);
+		if (msg.deactivate) {
+			const startY = activationStarts.get(msg.from);
+			if (startY !== void 0) {
+				const x = participantX.get(msg.from) ?? 0;
+				const participant = participants.find((p) => p.id === msg.from);
+				if (participant) positionedActivations.push({
+					participant,
+					x: x - 7,
+					y: startY,
+					width: 14,
+					height: pmsg.y - startY
+				});
+				activationStarts.delete(msg.from);
+			}
+		}
+	}
+	const lastMsg = positionedMessages[positionedMessages.length - 1];
+	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,
+			x: participantX.get(p.id) ?? 0,
+			y1: headerY + opts.nodeHeight / 2,
+			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;
+		let maxX = -Infinity;
+		for (const msg of allMsgs) {
+			const fromX = participantX.get(msg.from) ?? 0;
+			const toX = participantX.get(msg.to) ?? 0;
+			minX = Math.min(minX, fromX, toX);
+			maxX = Math.max(maxX, fromX, toX);
+		}
+		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,
+			sectionDividers
+		};
+	});
+	const positionedParticipants = participants.map((p) => {
+		return {
+			participant: p,
+			x: participantX.get(p.id) ?? 0,
+			y: headerY,
+			width: participantSizes.get(p.id).width,
+			height: opts.nodeHeight
+		};
+	});
+	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,
+		height: diagramHeight,
+		viewBox: `0 0 ${diagramWidth} ${diagramHeight}`,
+		participants: positionedParticipants,
+		messages: positionedMessages,
+		lifelines: positionedLifelines,
+		activations: positionedActivations,
+		blocks: positionedBlocks,
+		notes: positionedNotes
+	};
+}
+/** 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
+//#region ../mermaid/src/layout/index.ts
+const builtinLayout = {
+	flowchart: flowchartLayout,
+	sequence: sequenceLayout
+};
+
+//#endregion
+//#region ../mermaid/src/themes.ts
+const lightTheme$1 = createTheme(tokens$1);
+const darkTheme$1 = createTheme(tokens$1, {
+	nodeFill: "#2d3748",
+	nodeStroke: "#63b3ed",
+	nodeText: "#e2e8f0",
+	edgeStroke: "#a0aec0",
+	edgeLabelBg: "#1a202c",
+	edgeLabelText: "#e2e8f0",
+	arrowFill: "#a0aec0",
+	subgraphFill: "#1a202c",
+	subgraphStroke: "#4a5568",
+	subgraphTitleBg: "#2d3748",
+	subgraphTitleText: "#e2e8f0",
+	actorFill: "#2d3748",
+	actorStroke: "#63b3ed",
+	lifelineStroke: "#4a5568",
+	activationFill: "#2d3748",
+	messageStroke: "#a0aec0",
+	blockFill: "rgba(100,100,100,0.15)",
+	blockStroke: "#4a5568",
+	noteBg: "#4a4528",
+	noteStroke: "#b8a900",
+	noteText: "#e2e8f0",
+	bgColor: "#1a202c",
+	gridDotColor: "rgba(255, 255, 255, 0.08)"
+});
+
+//#endregion
+//#region ../mermaid/src/provider.tsx
+/** @jsxImportSource @semajsx/dom */
+const MermaidRenderers = context("mermaid-renderers");
+const MermaidLayout = context("mermaid-layout");
+
+//#endregion
+//#region ../mermaid/src/components/label.tsx
+function Label(props) {
+	return /* @__PURE__ */ jsx("text", {
+		class: [nodeLabel, props.class],
+		x: props.x,
+		y: props.y,
+		children: props.text
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/sequence.style.ts
+const c$11 = classes([
+	"participantBox",
+	"participantLabel",
+	"lifeline",
+	"activation",
+	"messageLine",
+	"messageDotted",
+	"messageText",
+	"blockBg",
+	"blockLabel",
+	"blockLabelText",
+	"blockSectionLine",
+	"blockSectionLabel",
+	"noteBg",
+	"noteText"
+]);
+const participantBox = rule`${c$11.participantBox} {
+  ${boxShape(tokens$1.actorFill, tokens$1.actorStroke, 2)}
+}`;
+const participantLabel = rule`${c$11.participantLabel} {
+  ${textLabel(tokens$1.nodeText, `${tokens$1.fontSize}px`)}
+}`;
+const lifeline = rule`${c$11.lifeline} {
+  stroke: ${tokens$1.lifelineStroke};
+  stroke-width: 1;
+  stroke-dasharray: 6, 4;
+}`;
+const activation = rule`${c$11.activation} {
+  ${boxShape(tokens$1.activationFill, tokens$1.actorStroke, 1)}
+}`;
+const messageLine = rule`${c$11.messageLine} {
+  stroke: ${tokens$1.messageStroke};
+  stroke-width: 1.5;
+  fill: none;
+}`;
+const messageDotted = rule`${c$11.messageDotted} {
+  stroke-dasharray: 6, 4;
+}`;
+const messageText = rule`${c$11.messageText} {
+  ${textLabel(tokens$1.nodeText, "12px")}
+}`;
+const blockBg = rule`${c$11.blockBg} {
+  ${boxShape(tokens$1.blockFill, tokens$1.blockStroke, 1)}
+}`;
+const blockLabel = rule`${c$11.blockLabel} {
+  fill: ${tokens$1.blockStroke};
+}`;
+const blockLabelText = rule`${c$11.blockLabelText} {
+  ${textLabel(tokens$1.nodeText, "11px")}
+  font-weight: 600;
+}`;
+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} {
+  ${textLabel(tokens$1.noteText, "12px")}
+}`;
+
+//#endregion
+//#region ../mermaid/src/components/sequence/participant.tsx
+function Participant(props) {
+	const { participant, x, y, width, height } = props;
+	return /* @__PURE__ */ jsxs("g", {
+		class: props.class,
+		transform: `translate(${x}, ${y})`,
+		children: [/* @__PURE__ */ jsx("rect", {
+			class: participantBox,
+			x: -width / 2,
+			y: -height / 2,
+			width,
+			height,
+			rx: 6
+		}), /* @__PURE__ */ jsx("text", {
+			class: participantLabel,
+			children: participant.label
+		})]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/sequence/message.tsx
+function Message(props) {
+	const { message, fromX, toX, y } = props;
+	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;
+	return /* @__PURE__ */ jsxs("g", {
+		class: props.class,
+		children: [/* @__PURE__ */ jsx("line", {
+			class: [messageLine, isDotted ? messageDotted : void 0],
+			x1: fromX,
+			y1: y,
+			x2: toX,
+			y2: y,
+			"marker-end": markerEnd
+		}), /* @__PURE__ */ jsx("text", {
+			class: messageText,
+			x: midX,
+			y: y - 8,
+			children: message.text
+		})]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/sequence/lifeline.tsx
+function Lifeline(props) {
+	return /* @__PURE__ */ jsx("line", {
+		class: [lifeline, props.class],
+		x1: props.x,
+		y1: props.y1,
+		x2: props.x,
+		y2: props.y2
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/sequence/activation.tsx
+function Activation(props) {
+	return /* @__PURE__ */ jsx("rect", {
+		class: [activation, props.class],
+		x: props.x - props.width / 2,
+		y: props.y,
+		width: props.width,
+		height: props.height
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/sequence/block.tsx
+function Block(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: [
+			/* @__PURE__ */ jsx("rect", {
+				class: blockBg,
+				x,
+				y,
+				width,
+				height,
+				rx: 4
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				class: blockLabel,
+				x,
+				y,
+				width: labelWidth,
+				height: 20,
+				rx: 4
+			}),
+			/* @__PURE__ */ jsx("text", {
+				class: blockLabelText,
+				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,
+					"]"
+				]
+			})] }))
+		]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/sequence/note.tsx
+function Note(props) {
+	const { note, x, y, width, height } = props;
+	return /* @__PURE__ */ jsxs("g", {
+		class: props.class,
+		transform: `translate(${x}, ${y})`,
+		children: [/* @__PURE__ */ jsx("rect", {
+			class: noteBg,
+			x: -width / 2,
+			y: -height / 2,
+			width,
+			height,
+			rx: 4
+		}), /* @__PURE__ */ jsx("text", {
+			class: noteText,
+			children: note.text
+		})]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/components/index.ts
+const defaultRenderers = {
+	node: shapeMap.rect,
+	edge: Edge,
+	subgraph: SubgraphBox,
+	label: Label,
+	participant: Participant,
+	message: Message,
+	lifeline: Lifeline,
+	activation: Activation,
+	block: Block,
+	note: Note
+};
+
+//#endregion
+//#region ../mermaid/src/flowchart.tsx
+function Flowchart(props, ctx) {
+	const engine = ctx?.inject(MermaidLayout) ?? builtinLayout;
+	const renderers = ctx?.inject(MermaidRenderers) ?? defaultRenderers;
+	const graphData = unwrap(props.graph);
+	const positioned = engine.flowchart(graphData);
+	return /* @__PURE__ */ jsxs("svg", {
+		class: [svgRoot, props.class],
+		viewBox: positioned.viewBox,
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [
+			/* @__PURE__ */ jsx("style", { children: defaultTheme.__cssTemplate }),
+			/* @__PURE__ */ jsx(Defs, {}),
+			/* @__PURE__ */ jsx("rect", {
+				x: 0,
+				y: 0,
+				width: positioned.width,
+				height: positioned.height,
+				fill: "url(#mmd-grid)"
+			}),
+			positioned.subgraphs.map((s) => {
+				return /* @__PURE__ */ jsx(renderers.subgraph ?? SubgraphBox, { positioned: s });
+			}),
+			positioned.edges.map((e) => {
+				return /* @__PURE__ */ jsx(renderers[`edge:${e.edge.lineStyle}`] ?? renderers.edge ?? Edge, { positioned: e });
+			}),
+			positioned.nodes.map((n) => {
+				return /* @__PURE__ */ jsx(renderers[`node:${n.node.shape}`] ?? renderers.node ?? shapeMap[n.node.shape] ?? shapeMap.rect, { positioned: n });
+			})
+		]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/sequence.tsx
+function Sequence(props, ctx) {
+	const engine = ctx?.inject(MermaidLayout) ?? builtinLayout;
+	const renderers = ctx?.inject(MermaidRenderers) ?? defaultRenderers;
+	const graphData = unwrap(props.graph);
+	const positioned = engine.sequence(graphData);
+	const LifelineComp = renderers.lifeline;
+	const BlockComp = renderers.block;
+	const ActivationComp = renderers.activation;
+	const NoteComp = renderers.note;
+	const MessageComp = renderers.message;
+	const ParticipantComp = renderers.participant;
+	return /* @__PURE__ */ jsxs("svg", {
+		class: [svgRoot, props.class],
+		viewBox: positioned.viewBox,
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [
+			/* @__PURE__ */ jsx("style", { children: defaultTheme.__cssTemplate }),
+			/* @__PURE__ */ jsx(Defs, {}),
+			positioned.lifelines.map((l) => /* @__PURE__ */ jsx(LifelineComp, {
+				participant: l.participant,
+				x: l.x,
+				y1: l.y1,
+				y2: l.y2
+			})),
+			positioned.blocks.map((b) => /* @__PURE__ */ jsx(BlockComp, {
+				block: b.block,
+				x: b.x,
+				y: b.y,
+				width: b.width,
+				height: b.height,
+				sectionDividers: b.sectionDividers
+			})),
+			positioned.activations.map((a) => /* @__PURE__ */ jsx(ActivationComp, {
+				participant: a.participant,
+				x: a.x,
+				y: a.y,
+				width: a.width,
+				height: a.height
+			})),
+			positioned.notes.map((n) => /* @__PURE__ */ jsx(NoteComp, {
+				note: n.note,
+				x: n.x,
+				y: n.y,
+				width: n.width,
+				height: n.height
+			})),
+			positioned.messages.map((m) => /* @__PURE__ */ jsx(MessageComp, {
+				message: m.message,
+				fromX: m.fromX,
+				toX: m.toX,
+				y: m.y
+			})),
+			positioned.participants.map((p) => /* @__PURE__ */ jsx(ParticipantComp, {
+				participant: p.participant,
+				x: p.x,
+				y: p.y,
+				width: p.width,
+				height: p.height
+			}))
+		]
+	});
+}
+
+//#endregion
+//#region ../mermaid/src/mermaid.tsx
+function Mermaid(props) {
+	const diagram = parse(unwrap(props.code));
+	if ("message" in diagram) {
+		props.onError?.(diagram);
+		return null;
+	}
+	if (diagram.type === "flowchart") return /* @__PURE__ */ jsx(Flowchart, {
+		graph: diagram,
+		class: props.class
+	});
+	if (diagram.type === "sequence") return /* @__PURE__ */ jsx(Sequence, {
+		graph: diagram,
+		class: props.class
+	});
+	return null;
+}
+
+//#endregion
+//#region ../mermaid/src/remark-mermaid.ts
+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") {
+			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() {
+	return (tree) => walk(tree);
+}
+
+//#endregion
 //#region ../ssg/src/plugins/docs-theme/styles.ts
 /**
 * Apple-inspired theme CSS for the docs-theme plugin.
 *
 * All class names are prefixed with `dt-` to avoid collisions.
-* Component styles (Card, Callout, Badge) come from @semajsx/ui via componentCSS.
+* Component styles (Card, Callout, Badge) from @semajsx/ui are collected automatically
+* by the SSR renderer from StyleTokens.
 * This file contains layout, navigation, hero, typography, animations, and responsive styles.
 */
 const THEME_CSS = `
@@ -1019,26 +4346,20 @@ const tokens = defineTokens(tokenDefinition);
 * Five semantic variants: info, warning, success, error, tip
 * Matching the docs site callout design.
 */
-var callout_style_exports = /* @__PURE__ */ __exportAll({
-	content: () => content$1,
-	icon: () => icon$2,
-	root: () => root$11,
-	title: () => title$1
-});
-const c$11 = classes([
+const c$10 = classes([
 	"root",
 	"title",
 	"icon",
 	"content"
 ]);
-const root$11 = rule`${c$11.root} {
+const root$10 = rule`${c$10.root} {
   padding: 1.25rem 1.5rem;
   margin: 1.5rem 0;
   border-radius: 14px;
   border: 0.5px solid rgba(0, 0, 0, 0.04);
   font-family: ${tokens.fonts.base};
 }`;
-const title$1 = rule`${c$11.title} {
+const title$1 = rule`${c$10.title} {
   font-weight: ${tokens.fontWeights.semibold};
   font-size: 0.9375rem;
   margin: 0 0 0.5rem;
@@ -1047,7 +4368,7 @@ const title$1 = rule`${c$11.title} {
   gap: ${tokens.space.sm};
   letter-spacing: -0.005em;
 }`;
-const icon$2 = rule`${c$11.icon} {
+const icon$2 = rule`${c$10.icon} {
   width: 18px;
   height: 18px;
   display: inline-flex;
@@ -1055,7 +4376,7 @@ const icon$2 = rule`${c$11.icon} {
   justify-content: center;
   flex-shrink: 0;
 }`;
-const content$1 = rule`${c$11.content} {
+const content$1 = rule`${c$10.content} {
   color: ${tokens.colors.text};
   font-size: 0.9375rem;
   line-height: ${tokens.lineHeights.normal};
@@ -1159,7 +4480,7 @@ function Callout(props) {
 	const config = calloutConfig[props.type ?? "info"];
 	const IconComponent = config.icon;
 	return /* @__PURE__ */ jsxs("div", {
-		class: [root$11, props.class],
+		class: [root$10, props.class],
 		style: `background: ${config.bg}`,
 		role: "note",
 		children: [props.title && /* @__PURE__ */ jsxs("div", {
@@ -1183,9 +4504,8 @@ function Callout(props) {
 *
 * Pill-shaped labels with semantic color variants.
 */
-var badge_style_exports = /* @__PURE__ */ __exportAll({ root: () => root$10 });
-const c$10 = classes(["root"]);
-const root$10 = rule`${c$10.root} {
+const c$9 = classes(["root"]);
+const root$9 = rule`${c$9.root} {
   display: inline-flex;
   align-items: center;
   font-size: 0.6875rem;
@@ -1230,7 +4550,7 @@ const badgeColors = {
 function Badge(props) {
 	const config = badgeColors[props.color ?? "default"];
 	return /* @__PURE__ */ jsx("span", {
-		class: [root$10, props.class],
+		class: [root$9, props.class],
 		style: `background: ${config.bg}; color: ${config.fg}`,
 		children: props.children
 	});
@@ -1245,19 +4565,7 @@ function Badge(props) {
 * - feature: Large card with icon, heading, description
 * - link: Smaller clickable card for navigation
 */
-var card_style_exports = /* @__PURE__ */ __exportAll({
-	desc: () => desc,
-	descLink: () => descLink,
-	feature: () => feature,
-	featureStates: () => featureStates,
-	heading: () => heading,
-	headingLink: () => headingLink,
-	icon: () => icon$1,
-	link: () => link,
-	linkStates: () => linkStates,
-	root: () => root$9
-});
-const c$9 = classes([
+const c$8 = classes([
 	"root",
 	"feature",
 	"link",
@@ -1265,22 +4573,22 @@ const c$9 = classes([
 	"heading",
 	"desc"
 ]);
-const root$9 = rule`${c$9.root} {
+const root$8 = rule`${c$8.root} {
   background: white;
   border: 0.5px solid rgba(0, 0, 0, 0.06);
   font-family: ${tokens.fonts.base};
   transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
 }`;
-const feature = rule`${c$9.feature} {
+const feature = rule`${c$8.feature} {
   border-radius: ${tokens.radii.xl};
   padding: 2.5rem;
   box-shadow: ${tokens.shadows.md};
 }`;
-const featureStates = rule`${c$9.feature}:hover {
+const featureStates = rule`${c$8.feature}:hover {
   transform: translateY(-4px) scale(1.01);
   box-shadow: ${tokens.shadows.lg};
 }`;
-const link = rule`${c$9.link} {
+const link = rule`${c$8.link} {
   display: block;
   border-radius: ${tokens.radii.lg};
   padding: 1.75rem;
@@ -1288,12 +4596,12 @@ const link = rule`${c$9.link} {
   text-decoration: none;
   cursor: pointer;
 }`;
-const linkStates = rules(rule`${c$9.link}:hover {
+const linkStates = rules(rule`${c$8.link}:hover {
     border-color: rgba(0, 113, 227, 0.3);
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
     transform: translateY(-2px);
   }`);
-const icon$1 = rule`${c$9.icon} {
+const icon$1 = rule`${c$8.icon} {
   font-size: 2rem;
   width: 48px;
   height: 48px;
@@ -1304,24 +4612,24 @@ const icon$1 = rule`${c$9.icon} {
   border-radius: ${tokens.radii.md};
   margin-bottom: 1.25rem;
 }`;
-const heading = rule`${c$9.heading} {
+const heading = rule`${c$8.heading} {
   font-size: 1.375rem;
   font-weight: ${tokens.fontWeights.semibold};
   color: ${tokens.colors.text};
   margin: 0 0 0.5rem;
   letter-spacing: -0.01em;
 }`;
-const headingLink = rule`${c$9.link} ${c$9.heading} {
+const headingLink = rule`${c$8.link} ${c$8.heading} {
   font-size: ${tokens.fontSizes.lg};
   margin-bottom: 0.25rem;
 }`;
-const desc = rule`${c$9.desc} {
+const desc = rule`${c$8.desc} {
   color: ${tokens.colors.textMuted};
   line-height: ${tokens.lineHeights.normal};
   font-size: 0.9375rem;
   margin: 0;
 }`;
-const descLink = rule`${c$9.link} ${c$9.desc} {
+const descLink = rule`${c$8.link} ${c$8.desc} {
   font-size: ${tokens.fontSizes.sm};
   line-height: 1.5;
 }`;
@@ -1348,7 +4656,7 @@ function Card(props) {
 	if (variant === "link") return /* @__PURE__ */ jsx("a", {
 		href: props.href,
 		class: [
-			root$9,
+			root$8,
 			link,
 			linkStates,
 			props.class
@@ -1358,7 +4666,7 @@ function Card(props) {
 	});
 	return /* @__PURE__ */ jsx("div", {
 		class: [
-			root$9,
+			root$8,
 			feature,
 			featureStates,
 			props.class
@@ -1375,26 +4683,18 @@ function Card(props) {
 *
 * A tab bar with active indicator and content panels.
 */
-var tabs_style_exports = /* @__PURE__ */ __exportAll({
-	active: () => active,
-	list: () => list,
-	panel: () => panel,
-	root: () => root$8,
-	trigger: () => trigger,
-	triggerStates: () => triggerStates
-});
-const c$8 = classes([
+const c$7 = classes([
 	"root",
 	"list",
 	"trigger",
 	"active",
 	"panel"
 ]);
-const root$8 = rule`${c$8.root} {
+const root$7 = rule`${c$7.root} {
   margin: 1.5rem 0;
   font-family: ${tokens.fonts.base};
 }`;
-const list = rule`${c$8.list} {
+const list = rule`${c$7.list} {
   display: flex;
   gap: 0;
   border-bottom: 1px solid ${tokens.colors.border};
@@ -1402,7 +4702,7 @@ const list = rule`${c$8.list} {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }`;
-const trigger = rule`${c$8.trigger} {
+const trigger = rule`${c$7.trigger} {
   padding: 0.625rem 1rem;
   font-size: ${tokens.fontSizes.sm};
   font-weight: ${tokens.fontWeights.medium};
@@ -1416,17 +4716,17 @@ const trigger = rule`${c$8.trigger} {
   transition: color ${tokens.transitions.fast}, border-color ${tokens.transitions.fast};
   margin-bottom: -1px;
 }`;
-const triggerStates = rules(rule`${c$8.trigger}:hover {
+const triggerStates = rules(rule`${c$7.trigger}:hover {
     color: ${tokens.colors.text};
-  }`, rule`${c$8.trigger}:focus-visible {
+  }`, rule`${c$7.trigger}:focus-visible {
     outline: 2px solid ${tokens.colors.primary};
     outline-offset: -2px;
   }`);
-const active = rule`${c$8.active} {
+const active = rule`${c$7.active} {
   color: ${tokens.colors.primary};
   border-bottom-color: ${tokens.colors.primary};
 }`;
-const panel = rule`${c$8.panel} {
+const panel = rule`${c$7.panel} {
   padding: 1rem 0;
 }`;
 
@@ -1448,7 +4748,7 @@ function Tabs(props) {
 	const active = signal(props.defaultValue);
 	_ssrDefaultTab = props.defaultValue;
 	return /* @__PURE__ */ jsx("div", {
-		class: [root$8, props.class],
+		class: [root$7, props.class],
 		"data-tabs": active,
 		onClick: (e) => {
 			const tab = e.target.closest("[role=tab]");
@@ -1506,15 +4806,7 @@ function TabPanel(props) {
 *
 * Numbered step indicators for tutorials and guides.
 */
-var steps_style_exports = /* @__PURE__ */ __exportAll({
-	body: () => body,
-	content: () => content,
-	item: () => item,
-	number: () => number,
-	root: () => root$7,
-	title: () => title
-});
-const c$7 = classes([
+const c$6 = classes([
 	"root",
 	"item",
 	"number",
@@ -1522,20 +4814,20 @@ const c$7 = classes([
 	"title",
 	"body"
 ]);
-const root$7 = rule`${c$7.root} {
+const root$6 = rule`${c$6.root} {
   display: flex;
   flex-direction: column;
   gap: 0;
   margin: 1.5rem 0;
   font-family: ${tokens.fonts.base};
 }`;
-const item = rule`${c$7.item} {
+const item = rule`${c$6.item} {
   display: flex;
   gap: 1rem;
   padding: 1.25rem 0;
   border-bottom: 0.5px solid ${tokens.colors.border};
 }`;
-const number = rule`${c$7.number} {
+const number = rule`${c$6.number} {
   flex-shrink: 0;
   width: 28px;
   height: 28px;
@@ -1549,18 +4841,18 @@ const number = rule`${c$7.number} {
   justify-content: center;
   margin-top: 0.125rem;
 }`;
-const content = rule`${c$7.content} {
+const content = rule`${c$6.content} {
   flex: 1;
   min-width: 0;
 }`;
-const title = rule`${c$7.title} {
+const title = rule`${c$6.title} {
   font-size: ${tokens.fontSizes.md};
   font-weight: ${tokens.fontWeights.semibold};
   color: ${tokens.colors.text};
   margin: 0 0 0.375rem;
   letter-spacing: -0.005em;
 }`;
-const body = rule`${c$7.body} {
+const body = rule`${c$6.body} {
   color: ${tokens.colors.textMuted};
   font-size: ${tokens.fontSizes.sm};
   line-height: ${tokens.lineHeights.normal};
@@ -1570,7 +4862,7 @@ const body = rule`${c$7.body} {
 //#region ../ui/src/components/steps/steps.tsx
 function Steps(props) {
 	return /* @__PURE__ */ jsx("div", {
-		class: [root$7, props.class],
+		class: [root$6, props.class],
 		children: props.children
 	});
 }
@@ -1650,6 +4942,38 @@ const darkTheme = createTheme(tokens, {
 	}
 });
 
+//#endregion
+//#region ../ui/src/theme/provider.tsx
+/** @jsxImportSource @semajsx/dom */
+/**
+* ThemeProvider component
+*
+* Wraps the application to provide theme context and inject CSS custom properties.
+* Components can access theme tokens via ctx.inject(ThemeContext).
+*
+* @example
+* ```tsx
+* import { ThemeProvider } from "@semajsx/ui/theme";
+*
+* function App() {
+*   return (
+*     <ThemeProvider>
+*       <Button>Themed button</Button>
+*     </ThemeProvider>
+*   );
+* }
+*
+* // With dark theme
+* <ThemeProvider theme="dark">
+*   <App />
+* </ThemeProvider>
+* ```
+*/
+/**
+* Context for passing theme tokens through the component tree
+*/
+const ThemeContext = context("semajsx-theme");
+
 //#endregion
 //#region ../ui/src/components/button/button.style.ts
 /**
@@ -1658,23 +4982,7 @@ const darkTheme = createTheme(tokens, {
 * All styles reference theme tokens via CSS custom properties,
 * so they respond to theme changes automatically.
 */
-var button_style_exports = /* @__PURE__ */ __exportAll({
-	danger: () => danger,
-	dangerStates: () => dangerStates,
-	ghost: () => ghost,
-	ghostStates: () => ghostStates,
-	icon: () => icon,
-	lg: () => lg$2,
-	md: () => md$2,
-	outline: () => outline,
-	outlineStates: () => outlineStates,
-	root: () => root$6,
-	rootStates: () => rootStates$1,
-	sm: () => sm$2,
-	solid: () => solid,
-	solidStates: () => solidStates
-});
-const c$6 = classes([
+const c$5 = classes([
 	"root",
 	"solid",
 	"outline",
@@ -1685,7 +4993,7 @@ const c$6 = classes([
 	"danger",
 	"icon"
 ]);
-const root$6 = rule`${c$6.root} {
+const root$5 = rule`${c$5.root} {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1700,155 +5008,121 @@ const root$6 = rule`${c$6.root} {
   user-select: none;
   transition: all ${tokens.transitions.normal};
 }`;
-const rootStates$1 = rules(rule`${c$6.root}:focus-visible {
+const rootStates$1 = rules(rule`${c$5.root}:focus-visible {
     outline: 2px solid ${tokens.colors.primary};
     outline-offset: 2px;
-  }`, rule`${c$6.root}:disabled {
+  }`, rule`${c$5.root}:disabled {
     opacity: 0.5;
     cursor: not-allowed;
     pointer-events: none;
   }`);
-const solid = rule`${c$6.solid} {
+const solid = rule`${c$5.solid} {
   background: ${tokens.colors.primary};
   color: ${tokens.colors.onPrimary};
   border-color: ${tokens.colors.primary};
 }`;
-const solidStates = rules(rule`${c$6.solid}:hover:not(:disabled) {
+const solidStates = rules(rule`${c$5.solid}:hover:not(:disabled) {
     background: ${tokens.colors.primaryHover};
     border-color: ${tokens.colors.primaryHover};
     transform: scale(1.02);
     box-shadow: ${tokens.shadows.primaryGlow};
-  }`, rule`${c$6.solid}:active:not(:disabled) {
+  }`, rule`${c$5.solid}:active:not(:disabled) {
     background: ${tokens.colors.primaryActive};
     border-color: ${tokens.colors.primaryActive};
     transform: scale(0.98);
     box-shadow: none;
   }`);
-const outline = rule`${c$6.outline} {
+const outline = rule`${c$5.outline} {
   background: transparent;
   color: ${tokens.colors.primary};
   border-color: ${tokens.colors.primary};
 }`;
-const outlineStates = rules(rule`${c$6.outline}:hover:not(:disabled) {
+const outlineStates = rules(rule`${c$5.outline}:hover:not(:disabled) {
     background: ${tokens.colors.primary};
     color: ${tokens.colors.onPrimary};
     transform: scale(1.02);
-  }`, rule`${c$6.outline}:active:not(:disabled) {
+  }`, rule`${c$5.outline}:active:not(:disabled) {
     background: ${tokens.colors.primaryActive};
     color: ${tokens.colors.onPrimary};
     transform: scale(0.98);
   }`);
-const ghost = rule`${c$6.ghost} {
+const ghost = rule`${c$5.ghost} {
   background: transparent;
   color: ${tokens.colors.text};
   border-color: transparent;
 }`;
-const ghostStates = rules(rule`${c$6.ghost}:hover:not(:disabled) {
+const ghostStates = rules(rule`${c$5.ghost}:hover:not(:disabled) {
     background: ${tokens.colors.surface};
-  }`, rule`${c$6.ghost}:active:not(:disabled) {
+  }`, rule`${c$5.ghost}:active:not(:disabled) {
     background: ${tokens.colors.border};
   }`);
-const danger = rule`${c$6.danger} {
+const danger = rule`${c$5.danger} {
   background: ${tokens.colors.danger};
   color: ${tokens.colors.onDanger};
   border-color: ${tokens.colors.danger};
 }`;
-const dangerStates = rules(rule`${c$6.danger}:hover:not(:disabled) {
+const dangerStates = rules(rule`${c$5.danger}:hover:not(:disabled) {
     background: ${tokens.colors.dangerHover};
     border-color: ${tokens.colors.dangerHover};
     transform: scale(1.02);
-  }`, rule`${c$6.danger}:focus-visible {
+  }`, rule`${c$5.danger}:focus-visible {
     outline-color: ${tokens.colors.danger};
   }`);
-const sm$2 = rule`${c$6.sm} {
+const sm$2 = rule`${c$5.sm} {
   padding: ${tokens.space.sm} ${tokens.space.lg};
   font-size: ${tokens.fontSizes.sm};
 }`;
-const md$2 = rule`${c$6.md} {
+const md$2 = rule`${c$5.md} {
   padding: ${tokens.space.md} ${tokens.space.xl};
   font-size: ${tokens.fontSizes.md};
 }`;
-const lg$2 = rule`${c$6.lg} {
+const lg$2 = rule`${c$5.lg} {
   padding: 0.875rem 1.75rem;
   font-size: ${tokens.fontSizes.lg};
 }`;
-const icon = rule`${c$6.icon} {
+const icon = rule`${c$5.icon} {
   display: inline-flex;
   flex-shrink: 0;
 }`;
 
 //#endregion
-//#region ../ui/src/components/code-block/code-block.style.ts
-/**
-* CodeBlock component styles
-*
-* Dark-themed code display with optional language header.
-*/
-var code_block_style_exports = /* @__PURE__ */ __exportAll({
-	header: () => header,
-	inline: () => inline,
-	lang: () => lang,
-	pre: () => pre,
-	root: () => root$5
-});
-const c$5 = classes([
-	"root",
-	"header",
-	"lang",
-	"pre",
-	"inline"
-]);
-const root$5 = rule`${c$5.root} {
-  margin: 1.5rem 0;
-  border-radius: ${tokens.radii.md};
-  overflow: hidden;
-  border: 0.5px solid rgba(0, 0, 0, 0.1);
-  font-family: ${tokens.fonts.mono};
-}`;
-const header = rule`${c$5.header} {
-  background: #161617;
-  padding: 0.5rem 1.25rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}`;
-const lang = rule`${c$5.lang} {
-  color: #86868b;
-  font-size: 0.6875rem;
-  text-transform: uppercase;
-  font-weight: ${tokens.fontWeights.semibold};
-  letter-spacing: 0.04em;
-  font-family: ${tokens.fonts.mono};
-}`;
-const pre = rule`${c$5.pre} {
-  background: #1d1d1f;
-  color: #e5e5ea;
-  padding: 1.25rem 1.5rem;
-  overflow-x: auto;
-  margin: 0;
-  font-size: ${tokens.fontSizes.sm};
-  line-height: 1.65;
-  font-family: ${tokens.fonts.mono};
-}`;
-const inline = rule`${c$5.inline} {
-  background: rgba(0, 0, 0, 0.04);
-  padding: 0.15rem 0.4rem;
-  border-radius: 5px;
-  font-size: 0.875em;
-  border: 0.5px solid rgba(0, 0, 0, 0.06);
-  font-family: ${tokens.fonts.mono};
-}`;
+//#region ../ui/src/components/button/button.tsx
+const variantStyles = {
+	solid: [solid, solidStates],
+	outline: [outline, outlineStates],
+	ghost: [ghost, ghostStates]
+};
+const sizeStyles$2 = {
+	sm: sm$2,
+	md: md$2,
+	lg: lg$2
+};
+function Button(props) {
+	const variant = props.variant ?? "solid";
+	const size = props.size ?? "md";
+	const color = props.color ?? "default";
+	return /* @__PURE__ */ jsx("button", {
+		type: props.type ?? "button",
+		disabled: props.disabled,
+		class: [
+			root$5,
+			rootStates$1,
+			...variantStyles[variant],
+			sizeStyles$2[size],
+			color === "danger" && [danger, dangerStates],
+			props.class
+		],
+		onClick: props.onClick,
+		"aria-label": props["aria-label"],
+		children: props.children
+	});
+}
 
 //#endregion
 //#region ../ui/src/components/separator/separator.style.ts
 /**
 * Separator component styles
 */
-var separator_style_exports = /* @__PURE__ */ __exportAll({
-	horizontal: () => horizontal,
-	root: () => root$4,
-	vertical: () => vertical
-});
 const c$4 = classes(["root", "vertical"]);
 const root$4 = rule`${c$4.root} {
   border: none;
@@ -1867,20 +5141,28 @@ const vertical = rule`${c$4.vertical} {
   margin: 0 ${tokens.space.lg};
 }`;
 
+//#endregion
+//#region ../ui/src/components/separator/separator.tsx
+function Separator(props) {
+	const orientation = props.orientation ?? "horizontal";
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": orientation,
+		class: [
+			root$4,
+			horizontal,
+			orientation === "vertical" && vertical,
+			props.class
+		],
+		style: props.style
+	});
+}
+
 //#endregion
 //#region ../ui/src/components/input/input.style.ts
 /**
 * Input component styles
 */
-var input_style_exports = /* @__PURE__ */ __exportAll({
-	label: () => label$1,
-	lg: () => lg$1,
-	md: () => md$1,
-	root: () => root$3,
-	rootStates: () => rootStates,
-	sm: () => sm$1,
-	wrapper: () => wrapper
-});
 const c$3 = classes([
 	"root",
 	"wrapper",
@@ -1937,19 +5219,47 @@ const lg$1 = rule`${c$3.lg} {
   font-size: ${tokens.fontSizes.lg};
 }`;
 
+//#endregion
+//#region ../ui/src/components/input/input.tsx
+const sizeStyles$1 = {
+	sm: sm$1,
+	md: md$1,
+	lg: lg$1
+};
+function Input(props) {
+	const size = props.size ?? "md";
+	const inputId = props.id ?? props.name;
+	const input = /* @__PURE__ */ jsx("input", {
+		type: props.type ?? "text",
+		id: inputId,
+		name: props.name,
+		placeholder: props.placeholder,
+		value: props.value,
+		disabled: props.disabled,
+		readOnly: props.readOnly,
+		class: [
+			root$3,
+			rootStates,
+			sizeStyles$1[size],
+			props.class
+		]
+	});
+	if (props.label) return /* @__PURE__ */ jsxs("div", {
+		class: wrapper,
+		children: [/* @__PURE__ */ jsx("label", {
+			class: label$1,
+			for: inputId,
+			children: props.label
+		}), input]
+	});
+	return input;
+}
+
 //#endregion
 //#region ../ui/src/components/avatar/avatar.style.ts
 /**
 * Avatar component styles
 */
-var avatar_style_exports = /* @__PURE__ */ __exportAll({
-	fallback: () => fallback,
-	image: () => image,
-	lg: () => lg,
-	md: () => md,
-	root: () => root$2,
-	sm: () => sm
-});
 const c$2 = classes([
 	"root",
 	"image",
@@ -1997,12 +5307,39 @@ const lg = rule`${c$2.lg} {
   font-size: ${tokens.fontSizes.md};
 }`;
 
+//#endregion
+//#region ../ui/src/components/avatar/avatar.tsx
+const sizeStyles = {
+	sm,
+	md,
+	lg
+};
+function Avatar(props) {
+	const size = props.size ?? "md";
+	return /* @__PURE__ */ jsx("div", {
+		class: [
+			root$2,
+			sizeStyles[size],
+			props.class
+		],
+		role: "img",
+		"aria-label": props.alt ?? props.initials ?? "Avatar",
+		children: props.src ? /* @__PURE__ */ jsx("img", {
+			class: image,
+			src: props.src,
+			alt: props.alt ?? ""
+		}) : /* @__PURE__ */ jsx("span", {
+			class: fallback,
+			children: props.initials ?? "?"
+		})
+	});
+}
+
 //#endregion
 //#region ../ui/src/components/kbd/kbd.style.ts
 /**
 * Kbd (keyboard) component styles
 */
-var kbd_style_exports = /* @__PURE__ */ __exportAll({ root: () => root$1 });
 const c$1 = classes(["root"]);
 const root$1 = rule`${c$1.root} {
   display: inline-flex;
@@ -2024,20 +5361,20 @@ const root$1 = rule`${c$1.root} {
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
 }`;
 
+//#endregion
+//#region ../ui/src/components/kbd/kbd.tsx
+function Kbd(props) {
+	return /* @__PURE__ */ jsx("kbd", {
+		class: [root$1, props.class],
+		children: props.children
+	});
+}
+
 //#endregion
 //#region ../ui/src/components/switch/switch.style.ts
 /**
 * Switch component styles
 */
-var switch_style_exports = /* @__PURE__ */ __exportAll({
-	label: () => label,
-	root: () => root,
-	rootDisabled: () => rootDisabled,
-	thumb: () => thumb,
-	thumbOn: () => thumbOn,
-	track: () => track,
-	trackOn: () => trackOn
-});
 const c = classes([
 	"root",
 	"track",
@@ -2091,165 +5428,6 @@ const label = rule`${c.label} {
   letter-spacing: -0.005em;
 }`;
 
-//#endregion
-//#region ../ui/src/css.ts
-/**
-* Pre-collected CSS for SSG/SSR usage
-*
-* Since @semajsx/style's inject() requires a DOM, this module provides
-* all component CSS as a static string for server-side rendering.
-*
-* @example
-* ```tsx
-* import { componentCSS } from "@semajsx/ui/css";
-*
-* // Include in a <style> tag for SSG output
-* <style>{componentCSS}</style>
-* ```
-*/
-function collectCSS(styles) {
-	return Object.values(styles).filter((v) => isStyleToken(v)).map((t) => t.__cssTemplate).join("\n");
-}
-/** All @semajsx/ui component CSS (theme variables + component rules) */
-const componentCSS = [
-	lightTheme.__cssTemplate,
-	collectCSS(button_style_exports),
-	collectCSS(card_style_exports),
-	collectCSS(callout_style_exports),
-	collectCSS(badge_style_exports),
-	collectCSS(code_block_style_exports),
-	collectCSS(tabs_style_exports),
-	collectCSS(steps_style_exports),
-	collectCSS(separator_style_exports),
-	collectCSS(input_style_exports),
-	collectCSS(avatar_style_exports),
-	collectCSS(kbd_style_exports),
-	collectCSS(switch_style_exports)
-].join("\n");
-
-//#endregion
-//#region ../ui/src/components/button/button.tsx
-const variantStyles = {
-	solid: [solid, solidStates],
-	outline: [outline, outlineStates],
-	ghost: [ghost, ghostStates]
-};
-const sizeStyles$2 = {
-	sm: sm$2,
-	md: md$2,
-	lg: lg$2
-};
-function Button(props) {
-	const variant = props.variant ?? "solid";
-	const size = props.size ?? "md";
-	const color = props.color ?? "default";
-	return /* @__PURE__ */ jsx("button", {
-		type: props.type ?? "button",
-		disabled: props.disabled,
-		class: [
-			root$6,
-			rootStates$1,
-			...variantStyles[variant],
-			sizeStyles$2[size],
-			color === "danger" && [danger, dangerStates],
-			props.class
-		],
-		onClick: props.onClick,
-		"aria-label": props["aria-label"],
-		children: props.children
-	});
-}
-
-//#endregion
-//#region ../ui/src/components/separator/separator.tsx
-function Separator(props) {
-	const orientation = props.orientation ?? "horizontal";
-	return /* @__PURE__ */ jsx("div", {
-		role: "separator",
-		"aria-orientation": orientation,
-		class: [
-			root$4,
-			horizontal,
-			orientation === "vertical" && vertical,
-			props.class
-		],
-		style: props.style
-	});
-}
-
-//#endregion
-//#region ../ui/src/components/input/input.tsx
-const sizeStyles$1 = {
-	sm: sm$1,
-	md: md$1,
-	lg: lg$1
-};
-function Input(props) {
-	const size = props.size ?? "md";
-	const inputId = props.id ?? props.name;
-	const input = /* @__PURE__ */ jsx("input", {
-		type: props.type ?? "text",
-		id: inputId,
-		name: props.name,
-		placeholder: props.placeholder,
-		value: props.value,
-		disabled: props.disabled,
-		readOnly: props.readOnly,
-		class: [
-			root$3,
-			rootStates,
-			sizeStyles$1[size],
-			props.class
-		]
-	});
-	if (props.label) return /* @__PURE__ */ jsxs("div", {
-		class: wrapper,
-		children: [/* @__PURE__ */ jsx("label", {
-			class: label$1,
-			for: inputId,
-			children: props.label
-		}), input]
-	});
-	return input;
-}
-
-//#endregion
-//#region ../ui/src/components/avatar/avatar.tsx
-const sizeStyles = {
-	sm,
-	md,
-	lg
-};
-function Avatar(props) {
-	const size = props.size ?? "md";
-	return /* @__PURE__ */ jsx("div", {
-		class: [
-			root$2,
-			sizeStyles[size],
-			props.class
-		],
-		role: "img",
-		"aria-label": props.alt ?? props.initials ?? "Avatar",
-		children: props.src ? /* @__PURE__ */ jsx("img", {
-			class: image,
-			src: props.src,
-			alt: props.alt ?? ""
-		}) : /* @__PURE__ */ jsx("span", {
-			class: fallback,
-			children: props.initials ?? "?"
-		})
-	});
-}
-
-//#endregion
-//#region ../ui/src/components/kbd/kbd.tsx
-function Kbd(props) {
-	return /* @__PURE__ */ jsx("kbd", {
-		class: [root$1, props.class],
-		children: props.children
-	});
-}
-
 //#endregion
 //#region ../ui/src/components/switch/switch.tsx
 function Switch(props) {
@@ -2344,7 +5522,7 @@ const DIFFICULTY_LABELS = {
 };
 function createComponents(options) {
 	function Document(props) {
-		const { children, title, scripts, css } = props;
+		const { children, title, scripts, css, styles } = props;
 		const defaultTitle = options.title;
 		const pageTitle = title ?? defaultTitle;
 		const desc = options.description ?? "";
@@ -2385,7 +5563,8 @@ function createComponents(options) {
 				css?.map((href) => /* @__PURE__ */ jsx("link", {
 					rel: "stylesheet",
 					href
-				}, href))
+				}, href)),
+				styles && styles.length > 0 && /* @__PURE__ */ jsx("style", { children: styles.join("\n") })
 			] }), /* @__PURE__ */ jsxs("body", { children: [children, scripts] })]
 		});
 	}
@@ -2395,7 +5574,7 @@ function createComponents(options) {
 		return /* @__PURE__ */ jsxs("div", {
 			class: "dt-root",
 			children: [
-				/* @__PURE__ */ jsx("style", { children: componentCSS }),
+				/* @__PURE__ */ jsx("style", { children: lightTheme.__cssTemplate }),
 				/* @__PURE__ */ jsx("style", { children: THEME_CSS }),
 				/* @__PURE__ */ jsx("nav", {
 					class: "dt-glass-nav",
@@ -3463,6 +6642,7 @@ function docsTheme(options) {
 				Avatar,
 				Kbd,
 				Switch,
+				Mermaid,
 				...options.mdx?.components
 			};
 			return {
@@ -3470,7 +6650,11 @@ function docsTheme(options) {
 				collections,
 				routes,
 				mdx: {
-					remarkPlugins: [remarkGfm, ...options.mdx?.remarkPlugins ?? []],
+					remarkPlugins: [
+						remarkGfm,
+						remarkMermaid,
+						...options.mdx?.remarkPlugins ?? []
+					],
 					rehypePlugins: options.mdx?.rehypePlugins,
 					components: mdxComponents
 				}
@@ -3515,5 +6699,5 @@ function docsTheme(options) {
 }
 
 //#endregion
-export { Avatar, Badge, Button, Callout, Card, CodeBlock, ComponentPreview, Input, Kbd, Separator, Step, Steps, Switch, Tab, TabList, TabPanel, Tabs, docsTheme };
+export { Avatar, Badge, Button, Callout, Card, CodeBlock, ComponentPreview, Input, Kbd, Mermaid, Separator, Step, Steps, Switch, Tab, TabList, TabPanel, Tabs, docsTheme, remarkMermaid };
 //# sourceMappingURL=docs-theme.mjs.map