semajsx 0.6.0 → 0.7.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,2521 @@ 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);
+			return id;
+		}
+	}
+	if (!state.nodes.has(id)) state.nodes.set(id, {
+		id,
+		label: id,
+		shape: "rect"
+	});
+	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 nodesBefore = new Set(state.nodes.keys());
+	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;
+		}
+		const result = parseStatement(state);
+		if (result && "message" in result) return result;
+		for (const [nodeId] of state.nodes) if (!nodesBefore.has(nodeId) && !nodeIds.includes(nodeId)) nodeIds.push(nodeId);
+	}
+	state.subgraphs.push({
+		id: id || `subgraph_${state.subgraphs.length}`,
+		label,
+		nodes: nodeIds,
+		direction
+	});
+	return { ok: true };
+}
+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: []
+	};
+	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
+	};
+}
+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.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 === "identifier" || token.type === "keyword") {
+			const beforeLen = state.messages.length;
+			parseMessage(state);
+			if (state.messages.length > beforeLen) {
+				const msg = state.messages.pop();
+				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/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} {
+  fill: ${tokens$1.edgeLabelText};
+  stroke: none;
+  font-family: ${tokens$1.fontFamily};
+  font-size: 12px;
+  text-anchor: middle;
+  dominant-baseline: central;
+}`;
+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} {
+  fill: ${tokens$1.nodeFill};
+  stroke: ${tokens$1.nodeStroke};
+  stroke-width: ${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} {
+  fill: ${tokens$1.nodeText};
+  stroke: none;
+  font-family: ${tokens$1.fontFamily};
+  font-size: ${tokens$1.fontSize}px;
+  text-anchor: middle;
+  dominant-baseline: central;
+  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/edge.tsx
+const LINE_STYLE = {
+	solid: void 0,
+	dotted: edgeDotted,
+	thick: edgeThick
+};
+const MARKER_URL = {
+	arrow: "url(#mmd-arrow)",
+	dot: "url(#mmd-dot)",
+	cross: "url(#mmd-cross)",
+	none: void 0
+};
+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} {
+  fill: ${tokens$1.subgraphFill};
+  stroke: ${tokens$1.subgraphStroke};
+  stroke-width: 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/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, opts));
+	const adj = /* @__PURE__ */ new Map();
+	const safeEdges = [];
+	const visited = /* @__PURE__ */ new Set();
+	const inStack = /* @__PURE__ */ new Set();
+	for (const node of nodes) adj.set(node.id, []);
+	for (const edge of edges) {
+		const targets = adj.get(edge.source);
+		if (targets) targets.push(edge.target);
+	}
+	function dfs(node) {
+		visited.add(node);
+		inStack.add(node);
+		for (const neighbor of adj.get(node) ?? []) if (inStack.has(neighbor)) {
+			const edge = edges.find((e) => e.source === node && e.target === neighbor);
+			if (edge) safeEdges.push({
+				...edge,
+				source: neighbor,
+				target: node
+			});
+		} else if (!visited.has(neighbor)) dfs(neighbor);
+		inStack.delete(node);
+	}
+	for (const node of nodes) if (!visited.has(node.id)) dfs(node.id);
+	for (const edge of edges) if (!safeEdges.some((e) => e.source === edge.target && e.target === edge.source)) safeEdges.push(edge);
+	const 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 maxLayer = Math.max(...Array.from(layers.values()), 0);
+	const layerGroups = Array.from({ length: maxLayer + 1 }, () => []);
+	for (const node of nodes) layerGroups[layers.get(node.id) ?? 0].push(node.id);
+	for (let pass = 0; pass < 2; pass++) for (let l = 1; l <= maxLayer; l++) {
+		const layer = layerGroups[l];
+		const barycenters = /* @__PURE__ */ new Map();
+		for (const nodeId of layer) {
+			const prevLayer = layerGroups[l - 1];
+			let sum = 0;
+			let count = 0;
+			for (const edge of safeEdges) if (edge.target === nodeId && prevLayer.includes(edge.source)) {
+				sum += prevLayer.indexOf(edge.source);
+				count++;
+			}
+			barycenters.set(nodeId, count > 0 ? sum / count : prevLayer.length / 2);
+		}
+		layer.sort((a, b) => (barycenters.get(a) ?? 0) - (barycenters.get(b) ?? 0));
+	}
+	const isVertical = direction === "TB" || direction === "TD" || direction === "BT";
+	const positions = /* @__PURE__ */ new Map();
+	for (let l = 0; l <= maxLayer; l++) {
+		const layer = layerGroups[l];
+		let offset = -layer.reduce((sum, id) => {
+			const size = nodeSizes.get(id);
+			return sum + (isVertical ? size.width : size.height) + opts.nodeSpacing;
+		}, -opts.nodeSpacing) / 2;
+		for (const nodeId of layer) {
+			const size = nodeSizes.get(nodeId);
+			const primaryDim = isVertical ? size.width : size.height;
+			if (isVertical) positions.set(nodeId, {
+				x: offset + primaryDim / 2,
+				y: l * (opts.nodeHeight + opts.rankSpacing)
+			});
+			else positions.set(nodeId, {
+				x: l * (opts.nodeWidth + opts.rankSpacing),
+				y: offset + primaryDim / 2
+			});
+			offset += primaryDim + opts.nodeSpacing;
+		}
+	}
+	let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+	for (const [id, pos] of positions) {
+		const size = nodeSizes.get(id);
+		minX = Math.min(minX, pos.x - size.width / 2);
+		minY = Math.min(minY, pos.y - size.height / 2);
+		maxX = Math.max(maxX, pos.x + size.width / 2);
+		maxY = Math.max(maxY, pos.y + size.height / 2);
+	}
+	const offsetX = opts.diagramPadding - minX;
+	const offsetY = opts.diagramPadding - minY;
+	for (const [, pos] of positions) {
+		pos.x += offsetX;
+		pos.y += offsetY;
+	}
+	if (direction === "BT") {
+		const totalHeight = maxY - minY;
+		for (const [, pos] of positions) pos.y = totalHeight - (pos.y - opts.diagramPadding) + opts.diagramPadding;
+	}
+	if (direction === "RL") {
+		const totalWidth = maxX - minX;
+		for (const [, pos] of positions) pos.x = totalWidth - (pos.x - opts.diagramPadding) + opts.diagramPadding;
+	}
+	const positionedNodes = nodes.map((node) => {
+		const pos = positions.get(node.id);
+		const size = nodeSizes.get(node.id);
+		return {
+			node,
+			x: pos.x,
+			y: pos.y,
+			width: size.width,
+			height: size.height
+		};
+	});
+	const positionedEdges = edges.map((edge) => {
+		const sourcePos = positions.get(edge.source);
+		const targetPos = positions.get(edge.target);
+		if (!sourcePos || !targetPos) return {
+			edge,
+			path: "M 0 0"
+		};
+		const result = buildEdgePath(sourcePos, targetPos, nodeSizes.get(edge.source), nodeSizes.get(edge.target), isVertical, opts);
+		let labelPosition;
+		let labelSize;
+		if (edge.label) {
+			labelPosition = result.labelMid;
+			labelSize = measureLabel(edge.label, opts);
+		}
+		return {
+			edge,
+			path: result.path,
+			labelPosition,
+			labelSize
+		};
+	});
+	const positionedSubgraphs = subgraphs.map((sg) => {
+		let sgMinX = Infinity, sgMinY = Infinity, sgMaxX = -Infinity, sgMaxY = -Infinity;
+		for (const nodeId of sg.nodes) {
+			const pos = positions.get(nodeId);
+			const size = nodeSizes.get(nodeId);
+			if (pos && size) {
+				sgMinX = Math.min(sgMinX, pos.x - size.width / 2);
+				sgMinY = Math.min(sgMinY, pos.y - size.height / 2);
+				sgMaxX = Math.max(sgMaxX, pos.x + size.width / 2);
+				sgMaxY = Math.max(sgMaxY, pos.y + size.height / 2);
+			}
+		}
+		const padding = opts.nodePadding;
+		return {
+			subgraph: sg,
+			x: sgMinX - padding,
+			y: sgMinY - padding - 20,
+			width: sgMaxX - sgMinX + padding * 2,
+			height: sgMaxY - sgMinY + padding * 2 + 20
+		};
+	});
+	const diagramWidth = maxX - minX + opts.diagramPadding * 2;
+	const diagramHeight = maxY - minY + opts.diagramPadding * 2;
+	return {
+		width: diagramWidth,
+		height: diagramHeight,
+		viewBox: `0 0 ${diagramWidth} ${diagramHeight}`,
+		nodes: positionedNodes,
+		edges: positionedEdges,
+		subgraphs: positionedSubgraphs
+	};
+}
+/** 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
+		};
+	}
+	return {
+		path: `M ${sx} ${sy} L ${tx} ${ty}`,
+		labelMid: {
+			x: (sx + tx) / 2,
+			y: (sy + ty) / 2
+		}
+	};
+}
+function measureNode(node, opts) {
+	const textSize = (opts.measureText ?? estimateTextSize$1)(node.label, 14);
+	return {
+		width: Math.max(textSize.width + opts.nodePadding * 2, opts.nodeWidth),
+		height: Math.max(textSize.height + opts.nodePadding * 2, opts.nodeHeight)
+	};
+}
+function measureLabel(text, opts) {
+	return (opts.measureText ?? estimateTextSize$1)(text, 12);
+}
+function estimateTextSize$1(text, fontSize) {
+	const avgCharWidth = fontSize * .6;
+	return {
+		width: text.length * avgCharWidth,
+		height: fontSize * 1.4
+	};
+}
+
+//#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 participantX = /* @__PURE__ */ new Map();
+	participants.forEach((p, i) => {
+		participantX.set(p.id, opts.diagramPadding + opts.nodeWidth / 2 + i * opts.nodeSpacing);
+	});
+	const headerY = opts.diagramPadding + opts.nodeHeight / 2;
+	const headerBottom = headerY + opts.nodeHeight / 2 + 20;
+	const positionedMessages = messages.map((msg, i) => {
+		return {
+			message: msg,
+			fromX: participantX.get(msg.from) ?? 0,
+			toX: participantX.get(msg.to) ?? 0,
+			y: headerBottom + i * opts.rankSpacing
+		};
+	});
+	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 diagramBottom = (lastMsg ? lastMsg.y : headerBottom) + opts.rankSpacing;
+	const positionedLifelines = participants.map((p) => {
+		return {
+			participant: p,
+			x: participantX.get(p.id) ?? 0,
+			y1: headerY + opts.nodeHeight / 2,
+			y2: diagramBottom
+		};
+	});
+	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) => messages.findIndex((pm) => pm.from === m.from && pm.to === m.to && pm.text === m.text)).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;
+		const padding = opts.nodePadding;
+		return {
+			block,
+			x: minX - padding - opts.nodeWidth / 2,
+			y: startY,
+			width: maxX - minX + opts.nodeWidth + padding * 2,
+			height: endY - startY
+		};
+	});
+	const positionedNotes = notes.map((note, i) => {
+		const xs = note.participants.map((id) => participantX.get(id) ?? 0).filter((x) => x > 0);
+		let x;
+		if (note.position === "left of") x = (xs[0] ?? opts.diagramPadding) - opts.nodeWidth;
+		else if (note.position === "right of") x = (xs[0] ?? opts.diagramPadding) + opts.nodeWidth;
+		else x = xs.length > 0 ? xs.reduce((a, b) => a + b, 0) / xs.length : opts.diagramPadding;
+		const y = headerBottom + (messages.length + i) * opts.rankSpacing * .5;
+		const size = estimateTextSize(note.text, 12);
+		return {
+			note,
+			x,
+			y,
+			width: Math.max(size.width + opts.nodePadding * 2, 80),
+			height: Math.max(size.height + opts.nodePadding, 30)
+		};
+	});
+	const positionedParticipants = participants.map((p) => {
+		const x = participantX.get(p.id) ?? 0;
+		const size = estimateTextSize(p.label, 14);
+		return {
+			participant: p,
+			x,
+			y: headerY,
+			width: Math.max(size.width + opts.nodePadding * 2, opts.nodeWidth),
+			height: opts.nodeHeight
+		};
+	});
+	const diagramWidth = (participants.length - 1) * opts.nodeSpacing + opts.nodeWidth + opts.diagramPadding * 2;
+	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
+	};
+}
+function estimateTextSize(text, fontSize) {
+	const avgCharWidth = fontSize * .6;
+	return {
+		width: text.length * avgCharWidth,
+		height: fontSize * 1.4
+	};
+}
+
+//#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",
+	"noteBg",
+	"noteText"
+]);
+const participantBox = rule`${c$11.participantBox} {
+  fill: ${tokens$1.actorFill};
+  stroke: ${tokens$1.actorStroke};
+  stroke-width: 2;
+}`;
+const participantLabel = rule`${c$11.participantLabel} {
+  fill: ${tokens$1.nodeText};
+  stroke: none;
+  font-family: ${tokens$1.fontFamily};
+  font-size: ${tokens$1.fontSize}px;
+  text-anchor: middle;
+  dominant-baseline: central;
+}`;
+const lifeline = rule`${c$11.lifeline} {
+  stroke: ${tokens$1.lifelineStroke};
+  stroke-width: 1;
+  stroke-dasharray: 6, 4;
+}`;
+const activation = rule`${c$11.activation} {
+  fill: ${tokens$1.activationFill};
+  stroke: ${tokens$1.actorStroke};
+  stroke-width: 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} {
+  fill: ${tokens$1.nodeText};
+  stroke: none;
+  font-family: ${tokens$1.fontFamily};
+  font-size: 12px;
+  text-anchor: middle;
+}`;
+const blockBg = rule`${c$11.blockBg} {
+  fill: ${tokens$1.blockFill};
+  stroke: ${tokens$1.blockStroke};
+  stroke-width: 1;
+}`;
+const blockLabel = rule`${c$11.blockLabel} {
+  fill: ${tokens$1.blockStroke};
+}`;
+const blockLabelText = rule`${c$11.blockLabelText} {
+  fill: ${tokens$1.nodeText};
+  stroke: none;
+  font-family: ${tokens$1.fontFamily};
+  font-size: 11px;
+  font-weight: 600;
+}`;
+const noteBg = rule`${c$11.noteBg} {
+  fill: ${tokens$1.noteBg};
+  stroke: ${tokens$1.noteStroke};
+  stroke-width: 1;
+}`;
+const noteText = rule`${c$11.noteText} {
+  fill: ${tokens$1.noteText};
+  stroke: none;
+  font-family: ${tokens$1.fontFamily};
+  font-size: 12px;
+  text-anchor: middle;
+  dominant-baseline: central;
+}`;
+
+//#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
+const MARKER = {
+	solid: "url(#mmd-arrow)",
+	dotted: "url(#mmd-arrow)",
+	solidCross: "url(#mmd-cross)",
+	dottedCross: "url(#mmd-cross)",
+	solidOpen: "url(#mmd-arrow-open)",
+	dottedOpen: "url(#mmd-arrow-open)"
+};
+function Message(props) {
+	const { message, fromX, toX, y } = props;
+	const isDotted = message.arrow === "dotted" || message.arrow === "dottedCross" || message.arrow === "dottedOpen";
+	const midX = (fromX + toX) / 2;
+	const markerEnd = MARKER[message.arrow];
+	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 } = props;
+	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: 50,
+				height: 20,
+				rx: 4
+			}),
+			/* @__PURE__ */ jsx("text", {
+				class: blockLabelText,
+				x: x + 5,
+				y: y + 14,
+				children: block.type
+			})
+		]
+	});
+}
+
+//#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
+			})),
+			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") 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 +3529,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 +3551,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 +3559,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 +3663,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 +3687,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 +3733,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 +3748,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 +3756,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 +3779,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 +3795,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 +3839,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 +3849,7 @@ function Card(props) {
 	});
 	return /* @__PURE__ */ jsx("div", {
 		class: [
-			root$9,
+			root$8,
 			feature,
 			featureStates,
 			props.class
@@ -1375,26 +3866,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 +3885,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 +3899,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 +3931,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 +3989,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 +3997,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 +4024,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 +4045,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 +4125,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 +4165,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 +4176,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 +4191,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 +4324,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 +4402,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 +4490,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 +4544,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 +4611,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 +4705,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 +4746,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 +4757,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 +5825,7 @@ function docsTheme(options) {
 				Avatar,
 				Kbd,
 				Switch,
+				Mermaid,
 				...options.mdx?.components
 			};
 			return {
@@ -3470,7 +5833,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 +5882,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