mosage 0.2.0 → 0.8.0

package/dist/diagram-xlVDekYk.js

@@ -0,0 +1,763 @@
+//#region src/app/lib/design.ts
+function designToCssVars(d) {
+	return {
+		"--od-bg": d.palette.bg,
+		"--od-text": d.palette.text,
+		"--od-muted": d.palette.muted,
+		"--od-accent": d.palette.accent,
+		"--od-rule": d.palette.rule,
+		"--od-font-heading": d.fonts.heading,
+		"--od-font-body": d.fonts.body,
+		"--od-font-mono": d.fonts.mono,
+		"--od-size-title": `${d.typeScale.title}px`,
+		"--od-size-h1": `${d.typeScale.h1}px`,
+		"--od-size-h2": `${d.typeScale.h2}px`,
+		"--od-size-h3": `${d.typeScale.h3}px`,
+		"--od-size-body": `${d.typeScale.body}px`,
+		"--od-size-caption": `${d.typeScale.caption}px`,
+		"--od-margin": `${d.margin}px`,
+		"--od-leading": String(d.leading),
+		"--od-radius": `${d.radius}px`
+	};
+}
+function cssVarsToString(vars) {
+	return Object.entries(vars).map(([k, v]) => `  ${k}: ${v};`).join("\n");
+}
+const defaultDesign = {
+	palette: {
+		bg: "#ffffff",
+		text: "#16181d",
+		muted: "#6b7280",
+		accent: "#2563eb",
+		rule: "#e5e7eb"
+	},
+	fonts: {
+		heading: "-apple-system, BlinkMacSystemFont, \"Inter\", system-ui, sans-serif",
+		body: "-apple-system, BlinkMacSystemFont, \"Inter\", system-ui, sans-serif",
+		mono: "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, monospace"
+	},
+	typeScale: {
+		title: 44,
+		h1: 28,
+		h2: 20,
+		h3: 16,
+		body: 14,
+		caption: 10
+	},
+	margin: 76,
+	leading: 1.55,
+	radius: 6
+};
+//#endregion
+//#region src/data/delimited.ts
+/**
+* RFC 4180 with the parts that actually show up in exported data: quoted
+* fields, doubled quotes inside them, embedded newlines, and CRLF.
+*
+* Hand-written because `core` ships to every user and a CSV dependency is a lot
+* of install size for something a report needs in one place.
+*/
+function splitRecords(text, delimiter) {
+	const records = [];
+	let row = [];
+	let field = "";
+	let quoted = false;
+	let started = false;
+	const endField = () => {
+		row.push(field);
+		field = "";
+		started = false;
+	};
+	const endRow = () => {
+		endField();
+		records.push(row);
+		row = [];
+	};
+	for (let i = 0; i < text.length; i++) {
+		const char = text[i];
+		if (quoted) {
+			if (char === "\"") {
+				if (text[i + 1] === "\"") {
+					field += "\"";
+					i++;
+					continue;
+				}
+				quoted = false;
+				continue;
+			}
+			field += char;
+			continue;
+		}
+		if (char === "\"" && !started) {
+			quoted = true;
+			started = true;
+			continue;
+		}
+		if (char === delimiter) {
+			endField();
+			continue;
+		}
+		if (char === "\r") {
+			if (text[i + 1] === "\n") i++;
+			endRow();
+			continue;
+		}
+		if (char === "\n") {
+			endRow();
+			continue;
+		}
+		field += char;
+		started = true;
+	}
+	if (field !== "" || row.length > 0) endRow();
+	return records;
+}
+/** Numbers stay numbers so a table can align and format them; nothing else is guessed at. */
+function coerce(raw) {
+	const value = raw.trim();
+	if (value === "") return null;
+	if (/^-?(?:\d+|\d*\.\d+)(?:[eE][-+]?\d+)?$/.test(value)) {
+		const n = Number(value);
+		if (Number.isFinite(n)) return n;
+	}
+	return value;
+}
+function parseDelimited(text, opts = {}) {
+	const delimiter = opts.delimiter ?? ",";
+	const records = splitRecords(text.replace(/^/, ""), delimiter).filter((record) => record.length > 1 || (record[0] ?? "") !== "");
+	if (records.length === 0) return {
+		columns: [],
+		rows: []
+	};
+	const header = opts.noHeader ? records[0].map((_, index) => `column${index + 1}`) : records[0].map((name, index) => name.trim() || `column${index + 1}`);
+	return {
+		columns: header,
+		rows: (opts.noHeader ? records : records.slice(1)).map((record) => {
+			const row = {};
+			header.forEach((name, index) => {
+				row[name] = coerce(record[index] ?? "");
+			});
+			return row;
+		})
+	};
+}
+//#endregion
+//#region src/diagram/layout.ts
+const DEFAULTS = {
+	fontSize: 13,
+	rankGap: 48,
+	nodeGap: 28,
+	maxLabelWidth: 190,
+	padding: 8
+};
+const MIN_WIDTH = 76;
+const LINE_HEIGHT$1 = 1.35;
+/**
+* Text has to be measured without a DOM: the SVG is produced in the Vite
+* plugin, at build time, where there is no browser to ask. Full-width
+* characters take about one em and Latin about half of one, which is close
+* enough that a box never clips its own label.
+*/
+function measureText(text, fontSize) {
+	let width = 0;
+	for (const char of text) {
+		const code = char.codePointAt(0) ?? 0;
+		width += code >= 4352 && code <= 4447 || code >= 11904 && code <= 42191 || code >= 44032 && code <= 55203 || code >= 63744 && code <= 64255 || code >= 65072 && code <= 65135 || code >= 65280 && code <= 65376 || code >= 65504 && code <= 65510 ? fontSize : fontSize * .53;
+	}
+	return width;
+}
+/** Wraps on spaces where there are any, and between characters where there are not. */
+function wrapLabel(text, fontSize, maxWidth) {
+	const explicit = text.split(/<br\s*\/?>/);
+	const lines = [];
+	for (const segment of explicit) {
+		const trimmed = segment.trim();
+		if (!trimmed) continue;
+		if (measureText(trimmed, fontSize) <= maxWidth) {
+			lines.push(trimmed);
+			continue;
+		}
+		const words = trimmed.includes(" ") ? trimmed.split(/\s+/) : [...trimmed];
+		const joiner = trimmed.includes(" ") ? " " : "";
+		let current = "";
+		for (const word of words) {
+			const candidate = current ? current + joiner + word : word;
+			if (current && measureText(candidate, fontSize) > maxWidth) {
+				lines.push(current);
+				current = word;
+			} else current = candidate;
+		}
+		if (current) lines.push(current);
+	}
+	return lines.length > 0 ? lines : [""];
+}
+function sizeOf(node, lines, fontSize) {
+	const textWidth = Math.max(...lines.map((line) => measureText(line, fontSize)));
+	const textHeight = lines.length * fontSize * LINE_HEIGHT$1;
+	let width = Math.max(MIN_WIDTH, textWidth + 28);
+	let height = textHeight + 20;
+	if (node.shape === "diamond") {
+		width = textWidth * 2 + 28;
+		height = textHeight * 2 + 20;
+	}
+	if (node.shape === "circle") {
+		const diameter = Math.max(textWidth, textHeight) + 28;
+		width = diameter;
+		height = diameter;
+	}
+	return {
+		width: Math.round(width),
+		height: Math.round(height)
+	};
+}
+/**
+* Ranks by longest path. Edges that close a cycle are excluded from ranking —
+* a feedback arrow in an architecture diagram is normal, and it must not make
+* the graph unrankable.
+*/
+function assignRanks(nodes, edges) {
+	const ids = nodes.map((n) => n.id);
+	const outgoing = new Map(ids.map((id) => [id, []]));
+	for (const edge of edges) outgoing.get(edge.from)?.push(edge.to);
+	const state = /* @__PURE__ */ new Map();
+	const backEdges = /* @__PURE__ */ new Set();
+	const key = (from, to) => `${from} ${to}`;
+	const visit = (id) => {
+		state.set(id, 1);
+		for (const next of outgoing.get(id) ?? []) {
+			const seen = state.get(next);
+			if (seen === 1) backEdges.add(key(id, next));
+			else if (seen === void 0) visit(next);
+		}
+		state.set(id, 2);
+	};
+	for (const id of ids) if (state.get(id) === void 0) visit(id);
+	const forward = edges.filter((e) => !backEdges.has(key(e.from, e.to)));
+	const incoming = new Map(ids.map((id) => [id, []]));
+	for (const edge of forward) incoming.get(edge.to)?.push(edge.from);
+	const rank = /* @__PURE__ */ new Map();
+	const resolve = (id, guard) => {
+		const cached = rank.get(id);
+		if (cached !== void 0) return cached;
+		if (guard.has(id)) return 0;
+		guard.add(id);
+		const parents = incoming.get(id) ?? [];
+		const value = parents.length === 0 ? 0 : Math.max(...parents.map((p) => resolve(p, guard) + 1));
+		guard.delete(id);
+		rank.set(id, value);
+		return value;
+	};
+	for (const id of ids) resolve(id, /* @__PURE__ */ new Set());
+	return rank;
+}
+/** Barycenter sweeps — cheap, and enough to untangle the graphs a report contains. */
+function orderRanks(ranks, edges) {
+	const neighbours = /* @__PURE__ */ new Map();
+	for (const rank of ranks) for (const id of rank) neighbours.set(id, {
+		up: [],
+		down: []
+	});
+	for (const edge of edges) {
+		neighbours.get(edge.to)?.up.push(edge.from);
+		neighbours.get(edge.from)?.down.push(edge.to);
+	}
+	const positions = /* @__PURE__ */ new Map();
+	const index = () => {
+		for (const rank of ranks) rank.forEach((id, i) => {
+			positions.set(id, i);
+		});
+	};
+	index();
+	const sweep = (side) => {
+		for (const rank of ranks) {
+			const scored = rank.map((id, i) => {
+				const related = neighbours.get(id)?.[side] ?? [];
+				const known = [];
+				for (const other of related) {
+					const at = positions.get(other);
+					if (at !== void 0) known.push(at);
+				}
+				return {
+					id,
+					score: known.length ? known.reduce((a, b) => a + b, 0) / known.length : i
+				};
+			});
+			scored.sort((a, b) => a.score - b.score);
+			rank.splice(0, rank.length, ...scored.map((s) => s.id));
+		}
+		index();
+	};
+	for (let pass = 0; pass < 4; pass += 1) {
+		sweep("up");
+		sweep("down");
+	}
+}
+/**
+* The point a given fraction along the polyline by length. Taking a *vertex*
+* instead would park every label on an elbow, where two of them meet.
+*/
+function pointAlong(points, fraction) {
+	let total = 0;
+	const spans = [];
+	for (let i = 1; i < points.length; i += 1) {
+		const span = Math.hypot(points[i].x - points[i - 1].x, points[i].y - points[i - 1].y);
+		spans.push(span);
+		total += span;
+	}
+	const target = total * fraction;
+	let walked = 0;
+	for (let i = 0; i < spans.length; i += 1) {
+		if (walked + spans[i] >= target) {
+			const into = spans[i] === 0 ? 0 : (target - walked) / spans[i];
+			return {
+				x: points[i].x + (points[i + 1].x - points[i].x) * into,
+				y: points[i].y + (points[i + 1].y - points[i].y) * into
+			};
+		}
+		walked += spans[i];
+	}
+	return points[points.length - 1];
+}
+/** Where along an edge a label may sit, tried in order of how central it is. */
+const LABEL_STOPS = [
+	.5,
+	.34,
+	.66,
+	.24,
+	.76
+];
+/**
+* Two edges leaving the same node reach their midpoints at the same height, so
+* their labels land on top of each other. Each label slides along its own line
+* until it clears the ones already placed.
+*/
+function placeLabels(edges, fontSize) {
+	const size = fontSize * .85;
+	const height = size * 1.7;
+	const placed = [];
+	const hits = (a) => placed.some((b) => Math.abs(a.x - b.x) * 2 < a.w + b.w && Math.abs(a.y - b.y) * 2 < a.h + b.h);
+	for (const edge of edges) {
+		if (!edge.label) continue;
+		const width = measureText(edge.label, size) + 10;
+		let chosen = pointAlong(edge.points, LABEL_STOPS[0]);
+		for (const stop of LABEL_STOPS) {
+			const candidate = pointAlong(edge.points, stop);
+			if (!hits({
+				...candidate,
+				w: width,
+				h: height
+			})) {
+				chosen = candidate;
+				break;
+			}
+		}
+		placed.push({
+			...chosen,
+			w: width,
+			h: height
+		});
+		edge.labelAt = chosen;
+	}
+}
+/** Straight where the two boxes line up, a single elbow where they do not. */
+function route(from, to, horizontal) {
+	const fromCentre = {
+		x: from.x + from.width / 2,
+		y: from.y + from.height / 2
+	};
+	const toCentre = {
+		x: to.x + to.width / 2,
+		y: to.y + to.height / 2
+	};
+	if (horizontal) {
+		const start = {
+			x: from.x + from.width,
+			y: fromCentre.y
+		};
+		const end = {
+			x: to.x,
+			y: toCentre.y
+		};
+		if (Math.abs(start.y - end.y) < 1 || end.x <= start.x) return [start, end];
+		const midX = (start.x + end.x) / 2;
+		return [
+			start,
+			{
+				x: midX,
+				y: start.y
+			},
+			{
+				x: midX,
+				y: end.y
+			},
+			end
+		];
+	}
+	const start = {
+		x: fromCentre.x,
+		y: from.y + from.height
+	};
+	const end = {
+		x: toCentre.x,
+		y: to.y
+	};
+	if (Math.abs(start.x - end.x) < 1 || end.y <= start.y) return [start, end];
+	const midY = (start.y + end.y) / 2;
+	return [
+		start,
+		{
+			x: start.x,
+			y: midY
+		},
+		{
+			x: end.x,
+			y: midY
+		},
+		end
+	];
+}
+function layoutDiagram(diagram, options = {}) {
+	const opts = {
+		...DEFAULTS,
+		...options
+	};
+	const horizontal = diagram.direction === "LR";
+	const lines = /* @__PURE__ */ new Map();
+	const sizes = /* @__PURE__ */ new Map();
+	for (const node of diagram.nodes) {
+		const limit = node.shape === "diamond" ? Math.max(84, opts.maxLabelWidth * .5) : opts.maxLabelWidth;
+		const wrapped = wrapLabel(node.label, opts.fontSize, limit);
+		lines.set(node.id, wrapped);
+		sizes.set(node.id, sizeOf(node, wrapped, opts.fontSize));
+	}
+	const rankOf = assignRanks(diagram.nodes, diagram.edges);
+	const depth = Math.max(...rankOf.values()) + 1;
+	const ranks = Array.from({ length: depth }, () => []);
+	for (const node of diagram.nodes) ranks[rankOf.get(node.id) ?? 0].push(node.id);
+	orderRanks(ranks, diagram.edges);
+	const rankOffset = [];
+	let cursor = opts.padding;
+	for (const rank of ranks) {
+		rankOffset.push(cursor);
+		const extent = Math.max(...rank.map((id) => {
+			const size = sizes.get(id);
+			return horizontal ? size?.width ?? 0 : size?.height ?? 0;
+		}));
+		cursor += extent + opts.rankGap;
+	}
+	const cross = /* @__PURE__ */ new Map();
+	const rankSpan = [];
+	ranks.forEach((rank, i) => {
+		let offset = 0;
+		for (const id of rank) {
+			const size = sizes.get(id);
+			const extent = horizontal ? size?.height ?? 0 : size?.width ?? 0;
+			cross.set(id, offset + extent / 2);
+			offset += extent + opts.nodeGap;
+		}
+		rankSpan[i] = Math.max(0, offset - opts.nodeGap);
+	});
+	const widest = Math.max(...rankSpan, 0);
+	ranks.forEach((rank, i) => {
+		const shift = (widest - rankSpan[i]) / 2 + opts.padding;
+		for (const id of rank) cross.set(id, (cross.get(id) ?? 0) + shift);
+	});
+	const nodes = diagram.nodes.map((node) => {
+		const size = sizes.get(node.id) ?? {
+			width: MIN_WIDTH,
+			height: 40
+		};
+		const along = rankOffset[rankOf.get(node.id) ?? 0];
+		const crossCentre = cross.get(node.id) ?? 0;
+		return {
+			...node,
+			lines: lines.get(node.id) ?? [node.label],
+			width: size.width,
+			height: size.height,
+			x: horizontal ? along : crossCentre - size.width / 2,
+			y: horizontal ? crossCentre - size.height / 2 : along
+		};
+	});
+	const byId = new Map(nodes.map((n) => [n.id, n]));
+	const edges = [];
+	for (const edge of diagram.edges) {
+		const from = byId.get(edge.from);
+		const to = byId.get(edge.to);
+		if (!from || !to) continue;
+		const points = route(from, to, horizontal);
+		edges.push({
+			...edge,
+			points,
+			labelAt: null
+		});
+	}
+	placeLabels(edges, opts.fontSize);
+	const width = Math.max(...nodes.map((n) => n.x + n.width)) + opts.padding;
+	const height = Math.max(...nodes.map((n) => n.y + n.height)) + opts.padding;
+	return {
+		direction: diagram.direction,
+		nodes,
+		edges,
+		width,
+		height
+	};
+}
+//#endregion
+//#region src/diagram/parse.ts
+var DiagramSyntaxError = class extends Error {
+	line;
+	constructor(message, line) {
+		super(`line ${line}: ${message}`);
+		this.name = "DiagramSyntaxError";
+		this.line = line;
+	}
+};
+const HEADER_RE = /^(?:flowchart|graph)(?:\s+(TB|TD|BT|LR|RL))?$/i;
+/** `A[Label]`, `A(Label)`, `A([Label])`, `A{Label}`, `A((Label))`, or a bare `A`. */
+const NODE_RE = /^([A-Za-z0-9_.-]+)(?:(\(\(|\(\[|\[|\(|\{)([\s\S]*?)(\)\)|\]\)|\]|\)|\}))?$/;
+const SHAPES = {
+	"[": "rect",
+	"(": "round",
+	"([": "stadium",
+	"{": "diamond",
+	"((": "circle"
+};
+/**
+* Links, longest first: `-.->` must be tried before `-->` or the dash prefix
+* would match and leave a stray dot in the label.
+*/
+const LINKS = [
+	{
+		re: /-\.->/,
+		style: "dashed",
+		arrow: true
+	},
+	{
+		re: /-\.-/,
+		style: "dashed",
+		arrow: false
+	},
+	{
+		re: /==>/,
+		style: "thick",
+		arrow: true
+	},
+	{
+		re: /===/,
+		style: "thick",
+		arrow: false
+	},
+	{
+		re: /-->/,
+		style: "solid",
+		arrow: true
+	},
+	{
+		re: /---/,
+		style: "solid",
+		arrow: false
+	}
+];
+function normalizeDirection(raw) {
+	const value = (raw ?? "TD").toUpperCase();
+	return value === "LR" || value === "RL" ? "LR" : "TD";
+}
+function stripComment(line) {
+	const at = line.indexOf("%%");
+	return at === -1 ? line : line.slice(0, at);
+}
+/** Splits `A --> B --> C` into consecutive pairs, keeping each link's own style. */
+function splitChain(text) {
+	const parts = [];
+	let rest = text;
+	for (;;) {
+		let best = null;
+		for (const link of LINKS) {
+			const match = link.re.exec(rest);
+			if (!match) continue;
+			if (!best || match.index < best.index) best = {
+				index: match.index,
+				link,
+				length: match[0].length
+			};
+		}
+		if (!best) {
+			parts.push({
+				raw: rest,
+				label: null
+			});
+			return parts;
+		}
+		const head = rest.slice(0, best.index);
+		let tail = rest.slice(best.index + best.length);
+		let label = null;
+		const labelled = /^\s*\|([\s\S]*?)\|/.exec(tail);
+		if (labelled) {
+			label = labelled[1].trim();
+			tail = tail.slice(labelled[0].length);
+		}
+		parts.push({
+			raw: head,
+			link: best.link,
+			label
+		});
+		rest = tail;
+	}
+}
+function parseNode(raw, line) {
+	const text = raw.trim();
+	if (!text) throw new DiagramSyntaxError("empty node", line);
+	const match = NODE_RE.exec(text);
+	if (!match) throw new DiagramSyntaxError(`cannot read node "${text}"`, line);
+	const [, id, open, label] = match;
+	if (!open) return {
+		id,
+		label: id,
+		shape: "rect"
+	};
+	const shape = SHAPES[open];
+	if (!shape) throw new DiagramSyntaxError(`unknown node shape "${open}"`, line);
+	return {
+		id,
+		label: unquote(label ?? ""),
+		shape
+	};
+}
+function unquote(label) {
+	const trimmed = label.trim();
+	if (trimmed.length > 1 && trimmed.startsWith("\"") && trimmed.endsWith("\"")) return trimmed.slice(1, -1);
+	return trimmed;
+}
+/**
+* A practical subset of Mermaid's flowchart syntax — the shapes and links a
+* report actually uses. Agents already write this dialect fluently, which is
+* the whole reason to borrow it rather than invent one; the renderer is ours,
+* so the output follows the document's theme instead of Mermaid's.
+*/
+function parseDiagram(source) {
+	const lines = source.split("\n");
+	let direction = "TD";
+	let sawHeader = false;
+	const nodes = /* @__PURE__ */ new Map();
+	const edges = [];
+	const remember = (node) => {
+		const existing = nodes.get(node.id);
+		if (!existing || existing.label === existing.id && node.label !== node.id) nodes.set(node.id, node);
+		return node.id;
+	};
+	lines.forEach((rawLine, index) => {
+		const lineNumber = index + 1;
+		const line = stripComment(rawLine).trim();
+		if (!line) return;
+		if (!sawHeader) {
+			const header = HEADER_RE.exec(line);
+			if (header) {
+				direction = normalizeDirection(header[1]);
+				sawHeader = true;
+				return;
+			}
+		}
+		const chain = splitChain(line);
+		if (chain.length === 1) {
+			remember(parseNode(chain[0].raw, lineNumber));
+			return;
+		}
+		for (let i = 0; i < chain.length - 1; i += 1) {
+			const left = chain[i];
+			const right = chain[i + 1];
+			const from = remember(parseNode(left.raw, lineNumber));
+			const to = remember(parseNode(right.raw, lineNumber));
+			const link = left.link;
+			if (!link) throw new DiagramSyntaxError("malformed link", lineNumber);
+			edges.push({
+				from,
+				to,
+				label: left.label,
+				style: link.style,
+				arrow: link.arrow
+			});
+		}
+	});
+	if (nodes.size === 0) throw new DiagramSyntaxError("diagram has no nodes", 1);
+	return {
+		direction,
+		nodes: [...nodes.values()],
+		edges
+	};
+}
+//#endregion
+//#region src/diagram/render.ts
+const LINE_HEIGHT = 1.35;
+function escapeXml(text) {
+	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+/**
+* Every colour and face is a `--od-*` variable rather than a literal, which is
+* the entire reason this renderer exists: the drawing inherits the document's
+* theme, in the viewer and in the PDF, instead of arriving with a palette of
+* its own.
+*/
+function shapePath(node) {
+	const { x, y, width: w, height: h } = node;
+	const common = "fill=\"var(--od-bg)\" stroke=\"var(--od-text)\" stroke-width=\"1.25\"";
+	switch (node.shape) {
+		case "diamond": return `<polygon points="${[
+			`${x + w / 2},${y}`,
+			`${x + w},${y + h / 2}`,
+			`${x + w / 2},${y + h}`,
+			`${x},${y + h / 2}`
+		].join(" ")}" ${common} />`;
+		case "circle": return `<ellipse cx="${x + w / 2}" cy="${y + h / 2}" rx="${w / 2}" ry="${h / 2}" ${common} />`;
+		case "stadium": return `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${h / 2}" ry="${h / 2}" ${common} />`;
+		case "round": return `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="10" ry="10" ${common} />`;
+		default: return `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="var(--od-radius, 2)" ${common} />`;
+	}
+}
+function nodeText(node, fontSize) {
+	const firstBaseline = node.y + node.height / 2 - node.lines.length * fontSize * LINE_HEIGHT / 2 + fontSize * .98;
+	return node.lines.map((line, i) => {
+		const y = firstBaseline + i * fontSize * LINE_HEIGHT;
+		return `<text x="${node.x + node.width / 2}" y="${y}" text-anchor="middle" font-family="var(--od-font-body)" font-size="${fontSize}" fill="var(--od-text)">${escapeXml(line)}</text>`;
+	}).join("");
+}
+function edgePath(edge, marker) {
+	const d = edge.points.map((point, i) => `${i === 0 ? "M" : "L"}${round(point.x)},${round(point.y)}`).join(" ");
+	const dash = edge.style === "dashed" ? " stroke-dasharray=\"5 4\"" : "";
+	return `<path d="${d}" fill="none" stroke="var(--od-text)" stroke-width="${edge.style === "thick" ? 2.25 : 1.25}"${dash} stroke-linejoin="round"${edge.arrow ? ` marker-end="url(#${marker})"` : ""} />`;
+}
+function edgeLabel(edge, fontSize) {
+	if (!edge.labelAt || !edge.label) return "";
+	const size = fontSize * .85;
+	const width = measureText(edge.label, size) + 10;
+	return `<rect x="${round(edge.labelAt.x - width / 2)}" y="${round(edge.labelAt.y - size * .8)}" width="${round(width)}" height="${round(size * 1.6)}" fill="var(--od-bg)" /><text x="${round(edge.labelAt.x)}" y="${round(edge.labelAt.y + size * .34)}" text-anchor="middle" font-family="var(--od-font-body)" font-size="${size}" fill="var(--od-muted)">${escapeXml(edge.label)}</text>`;
+}
+function round(value) {
+	return Math.round(value * 100) / 100;
+}
+function renderDiagram(diagram, options = {}) {
+	const fontSize = options.fontSize ?? 13;
+	const marker = `od-arrow${options.idSuffix ? `-${options.idSuffix}` : ""}`;
+	const defs = `<defs><marker id="${marker}" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,1 L10,5 L0,9 z" fill="var(--od-text)" /></marker></defs>`;
+	const body = [
+		...diagram.edges.map((edge) => edgePath(edge, marker)),
+		...diagram.nodes.map((node) => shapePath(node)),
+		...diagram.nodes.map((node) => nodeText(node, fontSize)),
+		...diagram.edges.map((edge) => edgeLabel(edge, fontSize))
+	].join("");
+	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${round(diagram.width)} ${round(diagram.height)}" width="${round(diagram.width)}" height="${round(diagram.height)}" role="img">${defs}${body}</svg>`;
+}
+//#endregion
+//#region src/diagram/index.ts
+/** Mermaid-flavoured text in, themed SVG out. One call, no browser. */
+function compileDiagram(source, options = {}) {
+	const parsed = parseDiagram(source);
+	const laidOut = layoutDiagram(parsed, options);
+	return {
+		svg: renderDiagram(laidOut, options),
+		width: laidOut.width,
+		height: laidOut.height,
+		source: parsed
+	};
+}
+//#endregion
+export { defaultDesign as a, cssVarsToString as i, DiagramSyntaxError as n, designToCssVars as o, parseDelimited as r, compileDiagram as t };