merslim 0.1.0

package/dist/index.cjs

@@ -0,0 +1,4349 @@
+'use strict';
+
+var dagre2 = require('dagre');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var dagre2__default = /*#__PURE__*/_interopDefault(dagre2);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+function layoutFlowchart(ir, options = {}) {
+  const defaultSize = options.defaultNodeSize ?? { width: 180, height: 60 };
+  const nodeSizes = options.nodeSizes ?? /* @__PURE__ */ new Map();
+  const nodeSep = options.nodeSeparation ?? 60;
+  const rankSep = options.rankSeparation ?? 80;
+  const margin = options.margin ?? 24;
+  const g = new dagre2__default.default.graphlib.Graph({ multigraph: true, compound: true });
+  g.setGraph({
+    rankdir: DAGRE_RANK_DIR[ir.direction],
+    nodesep: nodeSep,
+    ranksep: rankSep,
+    marginx: margin,
+    marginy: margin
+  });
+  g.setDefaultEdgeLabel(() => ({}));
+  const subgraphIds = /* @__PURE__ */ new Set();
+  if (ir.subgraphs) {
+    for (const sg of ir.subgraphs) {
+      g.setNode(sg.id, { label: sg.label, clusterLabelPos: "top" });
+      subgraphIds.add(sg.id);
+    }
+  }
+  const representativeChild = /* @__PURE__ */ new Map();
+  for (const node of ir.nodes) {
+    const size = nodeSizes.get(node.id) ?? defaultSize;
+    g.setNode(node.id, { ...size, label: node.label });
+    if (node.subgraph) {
+      g.setParent(node.id, node.subgraph);
+      if (!representativeChild.has(node.subgraph)) {
+        representativeChild.set(node.subgraph, node.id);
+      }
+    }
+  }
+  const resolveEndpoint = (id) => {
+    if (!subgraphIds.has(id)) return id;
+    return representativeChild.get(id) ?? null;
+  };
+  for (const edge of ir.edges) {
+    const source = resolveEndpoint(edge.source);
+    const target = resolveEndpoint(edge.target);
+    if (!source || !target) continue;
+    if (!g.hasNode(source) || !g.hasNode(target)) continue;
+    g.setEdge(source, target, edge.label ? { label: edge.label } : {});
+  }
+  dagre2__default.default.layout(g);
+  const nodePositions = /* @__PURE__ */ new Map();
+  let maxX = 0;
+  let maxY = 0;
+  for (const node of ir.nodes) {
+    const { x, y } = g.node(node.id);
+    const size = nodeSizes.get(node.id) ?? defaultSize;
+    const topLeft = { x: x - size.width / 2, y: y - size.height / 2 };
+    nodePositions.set(node.id, topLeft);
+    maxX = Math.max(maxX, topLeft.x + size.width);
+    maxY = Math.max(maxY, topLeft.y + size.height);
+  }
+  return {
+    nodePositions,
+    width: maxX + margin,
+    height: maxY + margin
+  };
+}
+var DAGRE_RANK_DIR;
+var init_dagreLayout = __esm({
+  "src/utils/diagrams/layout/dagreLayout.ts"() {
+    DAGRE_RANK_DIR = {
+      TB: "TB",
+      BT: "BT",
+      LR: "LR",
+      RL: "RL"
+    };
+  }
+});
+
+// src/components/diagrams/shared/theme.ts
+function getDiagramTheme(dark) {
+  return dark ? DARK : LIGHT;
+}
+var LIGHT, DARK;
+var init_theme = __esm({
+  "src/components/diagrams/shared/theme.ts"() {
+    LIGHT = {
+      canvasBg: "#f8fafc",
+      // slate-50
+      edgeColor: "#94a3b8",
+      // slate-400
+      edgeLabel: "#475569",
+      // slate-600
+      edgeLabelBg: "#ffffff",
+      subgraphBg: "rgba(241, 245, 249, 0.5)",
+      // slate-100/50
+      subgraphBorder: "#cbd5e1",
+      // slate-300
+      subgraphLabel: "#475569",
+      nodeShadow: "rgba(15, 23, 42, 0.08)",
+      byKind: {
+        service: {
+          border: "#86efac",
+          headerBg: "#ecfdf5",
+          accent: "#10b981",
+          bodyBg: "#ffffff",
+          text: "#064e3b",
+          iconColor: "#10b981"
+        },
+        database: {
+          border: "#fcd34d",
+          headerBg: "#fffbeb",
+          accent: "#f59e0b",
+          bodyBg: "#ffffff",
+          text: "#78350f",
+          iconColor: "#f59e0b"
+        },
+        queue: {
+          border: "#fda4af",
+          headerBg: "#fff1f2",
+          accent: "#f43f5e",
+          bodyBg: "#ffffff",
+          text: "#881337",
+          iconColor: "#f43f5e"
+        },
+        storage: {
+          border: "#67e8f9",
+          headerBg: "#ecfeff",
+          accent: "#06b6d4",
+          bodyBg: "#ffffff",
+          text: "#164e63",
+          iconColor: "#06b6d4"
+        },
+        user: {
+          border: "#93c5fd",
+          headerBg: "#eff6ff",
+          accent: "#3b82f6",
+          bodyBg: "#ffffff",
+          text: "#1e3a8a",
+          iconColor: "#3b82f6"
+        },
+        client: {
+          border: "#c4b5fd",
+          headerBg: "#f5f3ff",
+          accent: "#8b5cf6",
+          bodyBg: "#ffffff",
+          text: "#4c1d95",
+          iconColor: "#8b5cf6"
+        },
+        external: {
+          border: "#cbd5e1",
+          headerBg: "#f1f5f9",
+          accent: "#64748b",
+          bodyBg: "#ffffff",
+          text: "#334155",
+          iconColor: "#64748b"
+        },
+        process: {
+          border: "#bfdbfe",
+          headerBg: "#eff6ff",
+          accent: "#60a5fa",
+          bodyBg: "#ffffff",
+          text: "#1e3a8a",
+          iconColor: "#60a5fa"
+        },
+        decision: {
+          border: "#c4b5fd",
+          headerBg: "#f5f3ff",
+          accent: "#8b5cf6",
+          bodyBg: "#faf5ff",
+          text: "#4c1d95",
+          iconColor: "#8b5cf6"
+        },
+        start: {
+          border: "#86efac",
+          headerBg: "#ecfdf5",
+          accent: "#10b981",
+          bodyBg: "#ffffff",
+          text: "#064e3b",
+          iconColor: "#10b981"
+        },
+        end: {
+          border: "#fda4af",
+          headerBg: "#fff1f2",
+          accent: "#f43f5e",
+          bodyBg: "#ffffff",
+          text: "#881337",
+          iconColor: "#f43f5e"
+        },
+        icon: {
+          border: "#cbd5e1",
+          headerBg: "#ffffff",
+          accent: "#64748b",
+          bodyBg: "#ffffff",
+          text: "#1e293b",
+          iconColor: "#64748b"
+        },
+        plain: {
+          border: "#cbd5e1",
+          headerBg: "#f8fafc",
+          accent: "#64748b",
+          bodyBg: "#ffffff",
+          text: "#1e293b",
+          iconColor: "#64748b"
+        }
+      }
+    };
+    DARK = {
+      canvasBg: "#0f172a",
+      edgeColor: "#64748b",
+      edgeLabel: "#cbd5e1",
+      edgeLabelBg: "#1e293b",
+      subgraphBg: "rgba(30, 41, 59, 0.5)",
+      subgraphBorder: "#475569",
+      subgraphLabel: "#94a3b8",
+      nodeShadow: "rgba(0, 0, 0, 0.30)",
+      byKind: {
+        service: {
+          border: "#10b981",
+          headerBg: "rgba(16, 185, 129, 0.12)",
+          accent: "#34d399",
+          bodyBg: "#1e293b",
+          text: "#a7f3d0",
+          iconColor: "#34d399"
+        },
+        database: {
+          border: "#f59e0b",
+          headerBg: "rgba(245, 158, 11, 0.12)",
+          accent: "#fbbf24",
+          bodyBg: "#1e293b",
+          text: "#fde68a",
+          iconColor: "#fbbf24"
+        },
+        queue: {
+          border: "#f43f5e",
+          headerBg: "rgba(244, 63, 94, 0.12)",
+          accent: "#fb7185",
+          bodyBg: "#1e293b",
+          text: "#fecdd3",
+          iconColor: "#fb7185"
+        },
+        storage: {
+          border: "#06b6d4",
+          headerBg: "rgba(6, 182, 212, 0.12)",
+          accent: "#22d3ee",
+          bodyBg: "#1e293b",
+          text: "#a5f3fc",
+          iconColor: "#22d3ee"
+        },
+        user: {
+          border: "#3b82f6",
+          headerBg: "rgba(59, 130, 246, 0.12)",
+          accent: "#60a5fa",
+          bodyBg: "#1e293b",
+          text: "#bfdbfe",
+          iconColor: "#60a5fa"
+        },
+        client: {
+          border: "#8b5cf6",
+          headerBg: "rgba(139, 92, 246, 0.12)",
+          accent: "#a78bfa",
+          bodyBg: "#1e293b",
+          text: "#ddd6fe",
+          iconColor: "#a78bfa"
+        },
+        external: {
+          border: "#64748b",
+          headerBg: "rgba(100, 116, 139, 0.12)",
+          accent: "#94a3b8",
+          bodyBg: "#1e293b",
+          text: "#cbd5e1",
+          iconColor: "#94a3b8"
+        },
+        process: {
+          border: "#60a5fa",
+          headerBg: "rgba(96, 165, 250, 0.12)",
+          accent: "#93c5fd",
+          bodyBg: "#1e293b",
+          text: "#bfdbfe",
+          iconColor: "#93c5fd"
+        },
+        decision: {
+          border: "#8b5cf6",
+          headerBg: "rgba(139, 92, 246, 0.12)",
+          accent: "#a78bfa",
+          bodyBg: "#1e293b",
+          text: "#ddd6fe",
+          iconColor: "#a78bfa"
+        },
+        start: {
+          border: "#10b981",
+          headerBg: "rgba(16, 185, 129, 0.12)",
+          accent: "#34d399",
+          bodyBg: "#1e293b",
+          text: "#a7f3d0",
+          iconColor: "#34d399"
+        },
+        end: {
+          border: "#f43f5e",
+          headerBg: "rgba(244, 63, 94, 0.12)",
+          accent: "#fb7185",
+          bodyBg: "#1e293b",
+          text: "#fecdd3",
+          iconColor: "#fb7185"
+        },
+        icon: {
+          border: "#475569",
+          headerBg: "#1e293b",
+          accent: "#94a3b8",
+          bodyBg: "#1e293b",
+          text: "#e2e8f0",
+          iconColor: "#94a3b8"
+        },
+        plain: {
+          border: "#475569",
+          headerBg: "#1e293b",
+          accent: "#94a3b8",
+          bodyBg: "#1e293b",
+          text: "#e2e8f0",
+          iconColor: "#94a3b8"
+        }
+      }
+    };
+  }
+});
+function escXml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function palette(dark) {
+  return {
+    common: dark ? DARK_COMMON : LIGHT_COMMON,
+    byKind: dark ? DARK_KIND : LIGHT_KIND
+  };
+}
+function flowchartNodeSize(node) {
+  if (node.kind === "user" || node.kind === "start" || node.kind === "end") {
+    return { width: 84, height: 84 };
+  }
+  if (node.kind === "icon") return { width: 100, height: 96 };
+  if (node.kind === "decision") {
+    const len2 = node.label.length;
+    return {
+      width: Math.max(140, Math.min(280, len2 * 11 + 60)),
+      height: Math.max(96, Math.min(160, Math.ceil(len2 / 16) * 32 + 64))
+    };
+  }
+  if (node.kind === "queue") return { width: 220, height: 64 };
+  const len = node.label.length;
+  const lines = Math.max(1, Math.ceil(len / 24));
+  return {
+    width: Math.max(160, Math.min(320, len * 8 + 40)),
+    height: 48 + (lines - 1) * 18
+  };
+}
+function wrapText(text, maxChars) {
+  if (text.length <= maxChars) return [text];
+  const words = text.split(/\s+/);
+  const lines = [];
+  let line = "";
+  for (const w of words) {
+    if ((line + " " + w).trim().length > maxChars && line) {
+      lines.push(line);
+      line = w;
+    } else {
+      line = (line + " " + w).trim();
+    }
+  }
+  if (line) lines.push(line);
+  return lines;
+}
+function tspans(lines, x, lineHeight) {
+  return lines.map((l, i) => `<tspan x="${x}" dy="${i === 0 ? 0 : lineHeight}">${escXml(l)}</tspan>`).join("");
+}
+function attachPoint(box, towards) {
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  const dx = towards.x - cx;
+  const dy = towards.y - cy;
+  if (dx === 0 && dy === 0) return { x: cx, y: cy };
+  const halfW = box.width / 2;
+  const halfH = box.height / 2;
+  const tx = Math.abs(dx) > 0 ? halfW / Math.abs(dx) : Infinity;
+  const ty = Math.abs(dy) > 0 ? halfH / Math.abs(dy) : Infinity;
+  const t = Math.min(tx, ty);
+  return { x: cx + dx * t, y: cy + dy * t };
+}
+function arrowDef(id, color) {
+  return `<marker id="${id}" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="${color}"/></marker>`;
+}
+function svgOpen(viewX, viewY, w, h, bg, title) {
+  const label = (title ?? "Diagram").trim() || "Diagram";
+  const titleEl = `<title>${escXml(label)}</title>`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="${viewX} ${viewY} ${w} ${h}" width="${w}" height="${h}" font-family='${FONT_FAMILY}' role="img" aria-label="${escXml(label)}">${titleEl}<rect x="${viewX}" y="${viewY}" width="${w}" height="${h}" fill="${bg}"/>`;
+}
+function buildFlowchartSvg(ir, positions, options = {}) {
+  const { common, byKind } = palette(options.dark ?? false);
+  const padding = options.padding ?? 40;
+  const boxes = /* @__PURE__ */ new Map();
+  for (const node of ir.nodes) {
+    const pos = positions.get(node.id);
+    if (!pos) continue;
+    const size = flowchartNodeSize(node);
+    boxes.set(node.id, { x: pos.x, y: pos.y, width: size.width, height: size.height });
+  }
+  if (boxes.size === 0) return svgOpen(0, 0, 100, 100, common.canvasBg) + "</svg>";
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const b of boxes.values()) {
+    minX = Math.min(minX, b.x);
+    minY = Math.min(minY, b.y);
+    maxX = Math.max(maxX, b.x + b.width);
+    maxY = Math.max(maxY, b.y + b.height);
+  }
+  minX -= padding;
+  minY -= padding;
+  maxX += padding;
+  maxY += padding;
+  const width = Math.round(maxX - minX);
+  const height = Math.round(maxY - minY);
+  const parts = [];
+  parts.push(svgOpen(minX, minY, width, height, common.canvasBg, "Flowchart diagram"));
+  parts.push(`<defs>${arrowDef("arr", common.edgeColor)}</defs>`);
+  for (const e of ir.edges) {
+    const a = boxes.get(e.source);
+    const b = boxes.get(e.target);
+    if (!a || !b) continue;
+    parts.push(buildEdgePath(a, b, e, common));
+  }
+  for (const node of ir.nodes) {
+    const box = boxes.get(node.id);
+    if (!box) continue;
+    parts.push(buildFlowNode(node, box, byKind[node.kind]));
+  }
+  parts.push("</svg>");
+  return parts.join("");
+}
+function buildEdgePath(a, b, edge, common) {
+  const ac = { x: a.x + a.width / 2, y: a.y + a.height / 2 };
+  const bc = { x: b.x + b.width / 2, y: b.y + b.height / 2 };
+  const p1 = attachPoint(a, bc);
+  const p2 = attachPoint(b, ac);
+  const dx = Math.abs(p2.x - p1.x);
+  const dy = Math.abs(p2.y - p1.y);
+  const horizontal = dx > dy;
+  const cp = Math.max(30, (horizontal ? dx : dy) * 0.45);
+  const c1 = horizontal ? { x: p1.x + Math.sign(p2.x - p1.x) * cp, y: p1.y } : { x: p1.x, y: p1.y + Math.sign(p2.y - p1.y) * cp };
+  const c2 = horizontal ? { x: p2.x - Math.sign(p2.x - p1.x) * cp, y: p2.y } : { x: p2.x, y: p2.y - Math.sign(p2.y - p1.y) * cp };
+  const dash = edge.kind === "dashed" ? ' stroke-dasharray="6 4"' : edge.kind === "dotted" ? ' stroke-dasharray="2 3"' : "";
+  const sw = edge.kind === "thick" ? 2.5 : 1.5;
+  const path = `<path d="M ${p1.x} ${p1.y} C ${c1.x} ${c1.y}, ${c2.x} ${c2.y}, ${p2.x} ${p2.y}" stroke="${common.edgeColor}" stroke-width="${sw}" fill="none"${dash} marker-end="url(#arr)"/>`;
+  if (!edge.label) return path;
+  const lx = 0.125 * p1.x + 0.375 * c1.x + 0.375 * c2.x + 0.125 * p2.x;
+  const ly = 0.125 * p1.y + 0.375 * c1.y + 0.375 * c2.y + 0.125 * p2.y;
+  const text = escXml(edge.label);
+  const w = text.length * 6.5 + 12;
+  return path + `<rect x="${lx - w / 2}" y="${ly - 9}" width="${w}" height="16" fill="${common.edgeLabelBg}" rx="3"/><text x="${lx}" y="${ly + 3}" text-anchor="middle" font-size="11" font-weight="500" fill="${common.edgeLabel}">${text}</text>`;
+}
+function buildFlowNode(node, box, c) {
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  if (node.kind === "decision") {
+    const left = box.x, right = box.x + box.width, top = box.y, bottom = box.y + box.height;
+    const points = `${cx},${top} ${right},${cy} ${cx},${bottom} ${left},${cy}`;
+    const lines2 = wrapText(node.label, 18);
+    return `<polygon points="${points}" fill="${c.bodyBg}" stroke="${c.accent}" stroke-width="1.5"/><text x="${cx}" y="${cy - (lines2.length - 1) * 7}" text-anchor="middle" font-size="12" font-weight="600" fill="${c.text}">${tspans(lines2, cx, 14)}</text>`;
+  }
+  if (node.kind === "database") {
+    const rx = box.width / 2;
+    const ry = 8;
+    const top = box.y;
+    const bottom = box.y + box.height;
+    const path = `M ${box.x} ${top + ry} A ${rx} ${ry} 0 0 0 ${box.x + box.width} ${top + ry} L ${box.x + box.width} ${bottom - ry} A ${rx} ${ry} 0 0 1 ${box.x} ${bottom - ry} Z`;
+    const ellipse = `<ellipse cx="${cx}" cy="${top + ry}" rx="${rx}" ry="${ry}" fill="none" stroke="${c.accent}" stroke-width="2"/>`;
+    return `<path d="${path}" fill="${c.bodyBg}" stroke="${c.border}" stroke-width="1"/>` + ellipse + `<text x="${cx}" y="${cy + 6}" text-anchor="middle" font-size="13" font-weight="500" fill="${c.text}">${escXml(node.label)}</text>`;
+  }
+  if (node.kind === "user" || node.kind === "start" || node.kind === "end") {
+    const r = Math.min(box.width, box.height) / 2;
+    const lines2 = wrapText(node.label, 12);
+    return `<circle cx="${cx}" cy="${cy}" r="${r}" fill="${c.bodyBg}" stroke="${c.accent}" stroke-width="2"/><text x="${cx}" y="${cy + 4 - (lines2.length - 1) * 7}" text-anchor="middle" font-size="12" font-weight="600" fill="${c.text}">${tspans(lines2, cx, 14)}</text>`;
+  }
+  if (node.kind === "queue") {
+    return `<rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="8" fill="${c.bodyBg}" stroke="${c.accent}" stroke-width="1"/><rect x="${box.x + 4}" y="${box.y + 4}" width="${box.width - 8}" height="${box.height - 8}" rx="5" fill="none" stroke="${c.border}" stroke-width="1"/><text x="${cx}" y="${cy + 5}" text-anchor="middle" font-size="13" font-weight="500" fill="${c.text}">${escXml(node.label)}</text>`;
+  }
+  const lines = wrapText(node.label, 24);
+  return `<rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="10" fill="${c.bodyBg}" stroke="${c.border}" stroke-width="1"/><rect x="${box.x}" y="${box.y}" width="4" height="${box.height}" fill="${c.accent}"/><text x="${cx}" y="${cy + 4 - (lines.length - 1) * 8}" text-anchor="middle" font-size="13" font-weight="500" fill="${c.text}">${tspans(lines, cx, 16)}</text>`;
+}
+function buildStateSvg(ir, positions, options = {}) {
+  const { common } = palette(options.dark ?? false);
+  const dark = options.dark ?? false;
+  const padding = options.padding ?? 40;
+  const boxes = /* @__PURE__ */ new Map();
+  for (const [id, p] of positions.topLevel) {
+    boxes.set(id, p);
+  }
+  for (const [id, p] of positions.children) {
+    const parent = boxes.get(p.parent);
+    if (!parent) continue;
+    boxes.set(id, { x: parent.x + p.x, y: parent.y + p.y, width: p.width, height: p.height });
+  }
+  if (boxes.size === 0) return svgOpen(0, 0, 100, 100, common.canvasBg) + "</svg>";
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const b of boxes.values()) {
+    minX = Math.min(minX, b.x);
+    minY = Math.min(minY, b.y);
+    maxX = Math.max(maxX, b.x + b.width);
+    maxY = Math.max(maxY, b.y + b.height);
+  }
+  minX -= padding;
+  minY -= padding;
+  maxX += padding;
+  maxY += padding;
+  const width = Math.round(maxX - minX);
+  const height = Math.round(maxY - minY);
+  const parts = [];
+  parts.push(svgOpen(minX, minY, width, height, common.canvasBg, "State diagram"));
+  parts.push(`<defs>${arrowDef("arr", common.edgeColor)}</defs>`);
+  for (const s of ir.states) {
+    if (s.kind !== "composite") continue;
+    const box = boxes.get(s.id);
+    if (!box) continue;
+    parts.push(
+      `<rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="14" fill="${dark ? "rgba(15,23,42,0.5)" : "#ffffff"}" stroke="${common.border}" stroke-width="1.5"/><rect x="${box.x}" y="${box.y}" width="${box.width}" height="32" rx="14" fill="${dark ? "#1e293b" : "#f1f5f9"}"/><rect x="${box.x}" y="${box.y + 18}" width="${box.width}" height="14" fill="${dark ? "#1e293b" : "#f1f5f9"}"/><line x1="${box.x}" y1="${box.y + 32}" x2="${box.x + box.width}" y2="${box.y + 32}" stroke="${common.border}" stroke-width="1"/><text x="${box.x + box.width / 2}" y="${box.y + 21}" text-anchor="middle" font-size="13" font-weight="600" fill="${common.text}">${escXml(s.label || s.id)}</text>`
+    );
+  }
+  for (const t of ir.transitions) {
+    const a = boxes.get(t.source);
+    const b = boxes.get(t.target);
+    if (!a || !b) continue;
+    parts.push(buildEdgePath(a, b, { source: t.source, target: t.target, label: t.label, kind: "solid" }, common));
+  }
+  for (const s of ir.states) {
+    if (s.kind === "composite") continue;
+    const box = boxes.get(s.id);
+    if (!box) continue;
+    parts.push(buildStateBox(s, box, common, dark));
+  }
+  parts.push("</svg>");
+  return parts.join("");
+}
+function buildStateBox(s, box, common, dark) {
+  if (s.kind === "start" || s.kind === "end") {
+    const cx2 = box.x + box.width / 2;
+    const cy2 = box.y + box.height / 2;
+    const r = 12;
+    const fill = s.kind === "start" ? dark ? "#e2e8f0" : "#0f172a" : dark ? "#0f172a" : "#ffffff";
+    const stroke = dark ? "#e2e8f0" : "#0f172a";
+    const inner = s.kind === "end" ? `<circle cx="${cx2}" cy="${cy2}" r="${r - 4}" fill="${dark ? "#e2e8f0" : "#0f172a"}"/>` : "";
+    return `<circle cx="${cx2}" cy="${cy2}" r="${r}" fill="${fill}" stroke="${stroke}" stroke-width="2"/>${inner}`;
+  }
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  return `<rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="14" fill="${dark ? "#1e293b" : "#ffffff"}" stroke="${common.border}" stroke-width="1.5"/><text x="${cx}" y="${cy + 5}" text-anchor="middle" font-size="13" font-weight="500" fill="${common.text}">${escXml(s.label || s.id)}</text>`;
+}
+function buildClassSvg(ir, positions, options = {}) {
+  const { common } = palette(options.dark ?? false);
+  const dark = options.dark ?? false;
+  const padding = options.padding ?? 40;
+  if (positions.size === 0) return svgOpen(0, 0, 100, 100, common.canvasBg) + "</svg>";
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const p of positions.values()) {
+    minX = Math.min(minX, p.x);
+    minY = Math.min(minY, p.y);
+    maxX = Math.max(maxX, p.x + p.width);
+    maxY = Math.max(maxY, p.y + p.height);
+  }
+  minX -= padding;
+  minY -= padding;
+  maxX += padding;
+  maxY += padding;
+  const width = Math.round(maxX - minX);
+  const height = Math.round(maxY - minY);
+  const parts = [];
+  parts.push(svgOpen(minX, minY, width, height, common.canvasBg, "Class diagram"));
+  parts.push(`<defs>${arrowDef("arr", common.edgeColor)}</defs>`);
+  for (const rel of ir.relations) {
+    const a = positions.get(rel.source);
+    const b = positions.get(rel.target);
+    if (!a || !b) continue;
+    const aBox = { x: a.x, y: a.y, width: a.width, height: a.height };
+    const bBox = { x: b.x, y: b.y, width: b.width, height: b.height };
+    const dashed = rel.kind === "dependency" || rel.kind === "realization";
+    parts.push(buildEdgePath(aBox, bBox, { source: rel.source, target: rel.target, label: rel.label, kind: dashed ? "dashed" : "solid" }, common));
+  }
+  for (const cls of ir.classes) {
+    const p = positions.get(cls.id);
+    if (!p) continue;
+    parts.push(buildClassNode(cls, p, common, dark));
+  }
+  parts.push("</svg>");
+  return parts.join("");
+}
+function buildClassNode(cls, p, common, dark) {
+  const headerH = 30;
+  const rowH = 18;
+  const attrs = cls.members.filter((m) => m.kind === "attribute");
+  const methods = cls.members.filter((m) => m.kind === "method");
+  const parts = [];
+  parts.push(`<g transform="translate(${p.x},${p.y})">`);
+  parts.push(`<rect width="${p.width}" height="${p.height}" rx="8" fill="${dark ? "#0f172a" : "#ffffff"}" stroke="${common.border}" stroke-width="1"/>`);
+  parts.push(`<rect width="${p.width}" height="${headerH}" rx="8" fill="${dark ? "#1e293b" : "#f1f5f9"}"/>`);
+  parts.push(`<rect y="${headerH - 8}" width="${p.width}" height="8" fill="${dark ? "#1e293b" : "#f1f5f9"}"/>`);
+  parts.push(`<line x1="0" y1="${headerH}" x2="${p.width}" y2="${headerH}" stroke="${common.border}"/>`);
+  parts.push(`<text x="${p.width / 2}" y="${headerH / 2 + 5}" text-anchor="middle" font-size="13" font-weight="600" fill="${common.text}">${escXml(cls.label)}</text>`);
+  let y = headerH + 14;
+  for (const m of attrs) {
+    parts.push(buildClassMember(m, y, p.width, common));
+    y += rowH;
+  }
+  if (attrs.length > 0 && methods.length > 0) {
+    parts.push(`<line x1="6" y1="${y - 6}" x2="${p.width - 6}" y2="${y - 6}" stroke="${common.border}" stroke-dasharray="3 2"/>`);
+    y += 4;
+  }
+  for (const m of methods) {
+    parts.push(buildClassMember(m, y, p.width, common));
+    y += rowH;
+  }
+  parts.push("</g>");
+  return parts.join("");
+}
+function buildClassMember(m, y, width, common) {
+  const sym = m.visibility ? VIS_SYMBOL[m.visibility] ?? "" : "";
+  const sig = m.kind === "method" ? `${m.name}(${m.parameters ?? ""})${m.returnType ? `: ${m.returnType}` : ""}` : `${m.name}${m.returnType ? `: ${m.returnType}` : ""}`;
+  return `<text x="10" y="${y}" font-family='${MONO_FAMILY}' font-size="11" fill="${common.subtle}">${escXml(sym)}</text><text x="22" y="${y}" font-family='${MONO_FAMILY}' font-size="11" fill="${common.text}">${escXml(sig.length > 32 ? sig.slice(0, 31) + "\u2026" : sig)}</text>`;
+}
+function buildErSvg(ir, positions, options = {}) {
+  const { common } = palette(options.dark ?? false);
+  const dark = options.dark ?? false;
+  const padding = options.padding ?? 40;
+  const HEADER_H = 34;
+  const ROW_H = 26;
+  if (positions.size === 0) return svgOpen(0, 0, 100, 100, common.canvasBg) + "</svg>";
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const p of positions.values()) {
+    minX = Math.min(minX, p.x);
+    minY = Math.min(minY, p.y);
+    maxX = Math.max(maxX, p.x + p.width);
+    maxY = Math.max(maxY, p.y + p.height);
+  }
+  minX -= padding;
+  minY -= padding;
+  maxX += padding;
+  maxY += padding;
+  const width = Math.round(maxX - minX);
+  const height = Math.round(maxY - minY);
+  const parts = [];
+  parts.push(svgOpen(minX, minY, width, height, common.canvasBg, "Entity-relationship diagram"));
+  parts.push(`<defs>${arrowDef("arr", common.edgeColor)}</defs>`);
+  for (const rel of ir.schema.relations) {
+    const fromTable = ir.schema.tables.find((t) => t.name === rel.fromTable);
+    const toTable = ir.schema.tables.find((t) => t.name === rel.toTable);
+    if (!fromTable || !toTable) continue;
+    const fromPos = positions.get(rel.fromTable);
+    const toPos = positions.get(rel.toTable);
+    if (!fromPos || !toPos) continue;
+    const fromColIdx = fromTable.columns.findIndex((c) => c.name === rel.fromCol);
+    const toColIdx = toTable.columns.findIndex((c) => c.name === rel.toCol);
+    const fy = fromColIdx >= 0 ? fromPos.y + HEADER_H + fromColIdx * ROW_H + ROW_H / 2 : fromPos.y + fromPos.height / 2;
+    const ty = toColIdx >= 0 ? toPos.y + HEADER_H + toColIdx * ROW_H + ROW_H / 2 : toPos.y + toPos.height / 2;
+    const goRight = toPos.x + toPos.width / 2 > fromPos.x + fromPos.width / 2;
+    const fx = goRight ? fromPos.x + fromPos.width : fromPos.x;
+    const tx = goRight ? toPos.x : toPos.x + toPos.width;
+    const cp = Math.max(40, Math.abs(tx - fx) * 0.55);
+    const c1x = goRight ? fx + cp : fx - cp;
+    const c2x = goRight ? tx - cp : tx + cp;
+    parts.push(`<path d="M ${fx} ${fy} C ${c1x} ${fy}, ${c2x} ${ty}, ${tx} ${ty}" stroke="${common.edgeColor}" stroke-width="1.4" fill="none" stroke-dasharray="5 4" marker-end="url(#arr)"/>`);
+    const lx = (fx + tx) / 2;
+    const ly = (fy + ty) / 2 - 5;
+    parts.push(`<text x="${lx}" y="${ly}" font-size="9" font-style="italic" fill="${common.subtle}" text-anchor="middle">${escXml(fromColIdx >= 0 ? "FK" : rel.fromCol)}</text>`);
+  }
+  for (const table of ir.schema.tables) {
+    const p = positions.get(table.name);
+    if (!p) continue;
+    parts.push(`<g transform="translate(${p.x},${p.y})">`);
+    parts.push(`<rect width="${p.width}" height="${p.height}" rx="8" fill="${dark ? "#0f172a" : "#ffffff"}" stroke="${common.border}" stroke-width="1"/>`);
+    parts.push(`<rect width="${p.width}" height="${HEADER_H}" rx="8" fill="${dark ? "#1e293b" : "#f8fafc"}"/>`);
+    parts.push(`<rect y="${HEADER_H - 8}" width="${p.width}" height="8" fill="${dark ? "#1e293b" : "#f8fafc"}"/>`);
+    parts.push(`<line x1="0" y1="${HEADER_H}" x2="${p.width}" y2="${HEADER_H}" stroke="${common.border}"/>`);
+    parts.push(`<text x="12" y="${HEADER_H / 2 + 5}" font-family='${MONO_FAMILY}' font-size="12" font-weight="600" fill="${common.text}">${escXml(table.name)}</text>`);
+    for (let i = 0; i < table.columns.length; i++) {
+      const col = table.columns[i];
+      const rowY = HEADER_H + i * ROW_H;
+      const textY = rowY + ROW_H / 2 + 3;
+      if (i > 0) {
+        parts.push(`<line x1="8" y1="${rowY}" x2="${p.width - 8}" y2="${rowY}" stroke="${dark ? "#1e293b" : "#f1f5f9"}"/>`);
+      }
+      const nameColor = col.isPK ? "#d97706" : col.isFK ? "#0284c7" : dark ? "#cbd5e1" : "#475569";
+      const marker = col.isPK ? "\u{1F511}" : col.isFK ? "\u2197" : "\xB7";
+      parts.push(`<text x="14" y="${textY}" font-size="10" fill="${nameColor}">${marker}</text>`);
+      parts.push(`<text x="28" y="${textY}" font-family='${MONO_FAMILY}' font-size="11" font-weight="${col.isPK ? "600" : "400"}" fill="${nameColor}">${escXml(col.name)}</text>`);
+      parts.push(`<text x="${p.width - 12}" y="${textY}" text-anchor="end" font-family='${MONO_FAMILY}' font-size="10" fill="${common.subtle}">${escXml(col.type)}</text>`);
+    }
+    parts.push("</g>");
+  }
+  parts.push("</svg>");
+  return parts.join("");
+}
+function buildMindmapSvg(ir, positions, options = {}) {
+  const { common } = palette(options.dark ?? false);
+  const dark = options.dark ?? false;
+  const padding = options.padding ?? 60;
+  if (positions.size === 0) return svgOpen(0, 0, 100, 100, common.canvasBg) + "</svg>";
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const p of positions.values()) {
+    minX = Math.min(minX, p.x);
+    minY = Math.min(minY, p.y);
+    maxX = Math.max(maxX, p.x + p.width);
+    maxY = Math.max(maxY, p.y + p.height);
+  }
+  minX -= padding;
+  minY -= padding;
+  maxX += padding;
+  maxY += padding;
+  const width = Math.round(maxX - minX);
+  const height = Math.round(maxY - minY);
+  const parts = [];
+  parts.push(svgOpen(minX, minY, width, height, common.canvasBg, ir.root.label || "Mindmap"));
+  const collect = (node) => {
+    const p = positions.get(node.id);
+    if (!p) return;
+    for (const c of node.children) {
+      const cp = positions.get(c.id);
+      if (!cp) continue;
+      const fx = p.x + p.width / 2;
+      const fy = p.y + p.height / 2;
+      const tx = cp.x + cp.width / 2;
+      const ty = cp.y + cp.height / 2;
+      const c1x = fx + (tx - fx) * 0.4;
+      const c2x = fx + (tx - fx) * 0.6;
+      parts.push(`<path d="M ${fx} ${fy} C ${c1x} ${fy}, ${c2x} ${ty}, ${tx} ${ty}" stroke="${common.edgeColor}" stroke-width="1.5" fill="none"/>`);
+      collect(c);
+    }
+  };
+  collect(ir.root);
+  const palettes = [
+    dark ? { bg: "#e2e8f0", border: "#f8fafc", text: "#0f172a" } : { bg: "#1e293b", border: "#0f172a", text: "#f8fafc" },
+    dark ? { bg: "rgba(59,130,246,0.20)", border: "#60a5fa", text: "#bfdbfe" } : { bg: "#dbeafe", border: "#3b82f6", text: "#1e3a8a" },
+    dark ? { bg: "rgba(16,185,129,0.20)", border: "#34d399", text: "#a7f3d0" } : { bg: "#dcfce7", border: "#10b981", text: "#064e3b" },
+    dark ? { bg: "rgba(245,158,11,0.20)", border: "#fbbf24", text: "#fde68a" } : { bg: "#fef3c7", border: "#f59e0b", text: "#78350f" },
+    dark ? { bg: "rgba(244,63,94,0.20)", border: "#fb7185", text: "#fecdd3" } : { bg: "#fee2e2", border: "#f43f5e", text: "#881337" },
+    dark ? { bg: "rgba(139,92,246,0.20)", border: "#a78bfa", text: "#ddd6fe" } : { bg: "#ede9fe", border: "#8b5cf6", text: "#4c1d95" }
+  ];
+  const renderNode = (node) => {
+    const p = positions.get(node.id);
+    if (!p) return;
+    const c = palettes[Math.min(p.depth, palettes.length - 1)];
+    const isRoot = p.depth === 0;
+    const radius = node.shape === "circle" ? Math.min(p.width, p.height) / 2 : node.shape === "rounded" ? 999 : node.shape === "square" ? 4 : 12;
+    parts.push(
+      `<rect x="${p.x}" y="${p.y}" width="${p.width}" height="${p.height}" rx="${radius}" ry="${radius}" fill="${c.bg}" stroke="${c.border}" stroke-width="2"/>`
+    );
+    parts.push(
+      `<text x="${p.x + p.width / 2}" y="${p.y + p.height / 2 + 4}" text-anchor="middle" font-size="${isRoot ? 14 : 12}" font-weight="${isRoot ? 700 : 500}" fill="${c.text}">${escXml(node.label)}</text>`
+    );
+    for (const child of node.children) renderNode(child);
+  };
+  renderNode(ir.root);
+  parts.push("</svg>");
+  return parts.join("");
+}
+function buildGanttSvg(ir, options = {}) {
+  const { common } = palette(options.dark ?? false);
+  const dark = options.dark ?? false;
+  const padding = options.padding ?? 24;
+  if (ir.tasks.length === 0) return svgOpen(0, 0, 200, 60, common.canvasBg) + "</svg>";
+  const sections = /* @__PURE__ */ new Map();
+  for (const t of ir.tasks) {
+    const s = t.section ?? "Tasks";
+    if (!sections.has(s)) sections.set(s, []);
+    sections.get(s).push(t);
+  }
+  const rowH = 30;
+  const sectionHeaderH = 24;
+  const labelW = 160;
+  const chartW = 760;
+  const headerH = 36;
+  const totalRows = ir.tasks.length;
+  const totalSections = sections.size;
+  const titleH = ir.title ? 32 : 0;
+  const bodyH = headerH + totalSections * sectionHeaderH + totalRows * rowH;
+  const width = padding * 2 + labelW + chartW;
+  const height = padding * 2 + titleH + bodyH;
+  let minTime = Infinity, maxTime = -Infinity;
+  for (const t of ir.tasks) {
+    minTime = Math.min(minTime, new Date(t.start).getTime());
+    maxTime = Math.max(maxTime, new Date(t.end).getTime());
+  }
+  if (!isFinite(minTime) || !isFinite(maxTime) || maxTime === minTime) maxTime = minTime + 864e5;
+  const timeToX = (t) => padding + labelW + (t - minTime) / (maxTime - minTime) * chartW;
+  const colors = dark ? {
+    default: { fill: "rgba(59,130,246,0.30)", stroke: "#60a5fa", text: "#bfdbfe" },
+    active: { fill: "rgba(245,158,11,0.30)", stroke: "#fbbf24", text: "#fde68a" },
+    done: { fill: "rgba(16,185,129,0.30)", stroke: "#34d399", text: "#a7f3d0" },
+    crit: { fill: "rgba(244,63,94,0.30)", stroke: "#fb7185", text: "#fecdd3" },
+    milestone: { fill: "rgba(139,92,246,0.40)", stroke: "#a78bfa", text: "#ddd6fe" }
+  } : {
+    default: { fill: "#bfdbfe", stroke: "#3b82f6", text: "#1e3a8a" },
+    active: { fill: "#fde68a", stroke: "#f59e0b", text: "#78350f" },
+    done: { fill: "#a7f3d0", stroke: "#10b981", text: "#064e3b" },
+    crit: { fill: "#fecaca", stroke: "#f43f5e", text: "#881337" },
+    milestone: { fill: "#ddd6fe", stroke: "#8b5cf6", text: "#4c1d95" }
+  };
+  const parts = [];
+  parts.push(svgOpen(0, 0, width, height, common.canvasBg, ir.title || "Gantt chart"));
+  if (ir.title) {
+    parts.push(`<text x="${width / 2}" y="22" text-anchor="middle" font-size="15" font-weight="600" fill="${common.text}">${escXml(ir.title)}</text>`);
+  }
+  const axisY = padding + titleH + headerH - 4;
+  for (const ratio of [0, 0.5, 1]) {
+    const x = padding + labelW + ratio * chartW;
+    const time = minTime + (maxTime - minTime) * ratio;
+    const date = new Date(time);
+    const label = `${date.getMonth() + 1}/${date.getDate()}/${String(date.getFullYear()).slice(2)}`;
+    parts.push(`<text x="${x}" y="${axisY}" text-anchor="middle" font-size="10" fill="${common.subtle}">${escXml(label)}</text>`);
+    parts.push(`<line x1="${x}" y1="${axisY + 4}" x2="${x}" y2="${padding + titleH + bodyH}" stroke="${common.border}" stroke-dasharray="2 3"/>`);
+  }
+  let cy = padding + titleH + headerH;
+  for (const [section, tasks] of sections) {
+    parts.push(`<rect x="${padding}" y="${cy}" width="${labelW + chartW}" height="${sectionHeaderH}" fill="${dark ? "#1e293b" : "#f8fafc"}"/>`);
+    parts.push(`<text x="${padding + 8}" y="${cy + 16}" font-size="11" font-weight="600" fill="${common.text}">${escXml(section)}</text>`);
+    cy += sectionHeaderH;
+    for (const t of tasks) {
+      const x1 = timeToX(new Date(t.start).getTime());
+      const x2 = timeToX(new Date(t.end).getTime());
+      const c = colors[t.status] ?? colors.default;
+      parts.push(`<text x="${padding + 8}" y="${cy + rowH / 2 + 4}" font-size="11" fill="${common.text}">${escXml(t.label)}</text>`);
+      if (t.status === "milestone") {
+        const cx = x1;
+        const my = cy + rowH / 2;
+        parts.push(`<polygon points="${cx},${my - 7} ${cx + 7},${my} ${cx},${my + 7} ${cx - 7},${my}" fill="${c.fill}" stroke="${c.stroke}" stroke-width="1.5"/>`);
+      } else {
+        const w = Math.max(4, x2 - x1);
+        parts.push(`<rect x="${x1}" y="${cy + 6}" width="${w}" height="${rowH - 12}" rx="4" fill="${c.fill}" stroke="${c.stroke}" stroke-width="1"/>`);
+      }
+      cy += rowH;
+    }
+  }
+  parts.push("</svg>");
+  return parts.join("");
+}
+function buildTimelineSvg(ir, options = {}) {
+  const { common } = palette(options.dark ?? false);
+  const dark = options.dark ?? false;
+  const padding = options.padding ?? 24;
+  if (ir.events.length === 0) return svgOpen(0, 0, 200, 60, common.canvasBg) + "</svg>";
+  const sectionsMap = /* @__PURE__ */ new Map();
+  for (const e of ir.events) {
+    const s = e.section ?? "";
+    if (!sectionsMap.has(s)) sectionsMap.set(s, []);
+    sectionsMap.get(s).push(e);
+  }
+  const titleH = ir.title ? 32 : 0;
+  const sectionHeaderH = 28;
+  const eventH = 56;
+  const rows = [];
+  for (const [section, events] of sectionsMap) {
+    if (section) rows.push({ type: "section", data: section });
+    for (const e of events) rows.push({ type: "event", data: e });
+  }
+  const lineX = padding + 80;
+  const eventBoxX = lineX + 24;
+  const eventBoxW = 480;
+  const width = padding * 2 + 80 + 24 + eventBoxW;
+  let height = padding * 2 + titleH;
+  for (const r of rows) height += r.type === "section" ? sectionHeaderH : eventH;
+  height += 20;
+  const sectionColors = ["#3b82f6", "#10b981", "#f59e0b", "#f43f5e", "#8b5cf6", "#06b6d4"];
+  const parts = [];
+  parts.push(svgOpen(0, 0, width, height, common.canvasBg, ir.title || "Timeline"));
+  if (ir.title) {
+    parts.push(`<text x="${width / 2}" y="22" text-anchor="middle" font-size="15" font-weight="600" fill="${common.text}">${escXml(ir.title)}</text>`);
+  }
+  parts.push(`<line x1="${lineX}" y1="${padding + titleH}" x2="${lineX}" y2="${height - padding}" stroke="${common.border}" stroke-width="2"/>`);
+  let cy = padding + titleH + 8;
+  let sectionIndex = -1;
+  for (const r of rows) {
+    if (r.type === "section") {
+      sectionIndex++;
+      parts.push(`<text x="${padding}" y="${cy + 16}" font-size="11" font-weight="700" fill="${common.subtle}">${escXml(r.data)}</text>`);
+      cy += sectionHeaderH;
+    } else {
+      const e = r.data;
+      const color = sectionColors[Math.max(0, sectionIndex) % sectionColors.length];
+      parts.push(`<circle cx="${lineX}" cy="${cy + eventH / 2}" r="6" fill="${color}" stroke="${common.canvasBg}" stroke-width="2"/>`);
+      parts.push(`<text x="${lineX - 12}" y="${cy + eventH / 2 + 4}" text-anchor="end" font-size="11" font-weight="600" fill="${common.text}">${escXml(e.period)}</text>`);
+      parts.push(`<rect x="${eventBoxX}" y="${cy + 4}" width="${eventBoxW}" height="${eventH - 12}" rx="8" fill="${dark ? "rgba(30,41,59,0.6)" : "#f8fafc"}" stroke="${color}" stroke-width="1"/>`);
+      const lines = wrapText(e.text, 60);
+      for (let i = 0; i < Math.min(lines.length, 3); i++) {
+        parts.push(`<text x="${eventBoxX + 12}" y="${cy + 22 + i * 14}" font-size="11" fill="${common.text}">${escXml(lines[i])}</text>`);
+      }
+      cy += eventH;
+    }
+  }
+  parts.push("</svg>");
+  return parts.join("");
+}
+function buildPieSvg(ir, options = {}) {
+  const { common } = palette(options.dark ?? false);
+  const padding = options.padding ?? 20;
+  const titleH = ir.title ? 32 : 0;
+  const legendW = 200;
+  const radius = 160;
+  const cx = padding + radius + 16;
+  const cy = padding + titleH + radius + 16;
+  const width = padding * 2 + radius * 2 + 32 + legendW;
+  const height = padding * 2 + titleH + radius * 2 + 32;
+  const total = ir.slices.reduce((s, sl) => s + sl.value, 0);
+  const parts = [];
+  parts.push(svgOpen(0, 0, width, height, common.canvasBg, ir.title || "Pie chart"));
+  if (ir.title) {
+    parts.push(`<text x="${width / 2}" y="22" text-anchor="middle" font-size="16" font-weight="600" fill="${common.text}">${escXml(ir.title)}</text>`);
+  }
+  if (total === 0 || ir.slices.length === 0) {
+    parts.push(`<circle cx="${cx}" cy="${cy}" r="${radius}" fill="${common.border}"/>`);
+    parts.push("</svg>");
+    return parts.join("");
+  }
+  let startAngle = -Math.PI / 2;
+  ir.slices.forEach((slice, i) => {
+    const fraction = slice.value / total;
+    const endAngle = startAngle + fraction * Math.PI * 2;
+    const fill = PIE_PALETTE[i % PIE_PALETTE.length];
+    if (fraction >= 0.999) {
+      parts.push(`<circle cx="${cx}" cy="${cy}" r="${radius}" fill="${fill}" stroke="${common.canvasBg}" stroke-width="2"/>`);
+    } else {
+      const x1 = cx + Math.cos(startAngle) * radius;
+      const y1 = cy + Math.sin(startAngle) * radius;
+      const x2 = cx + Math.cos(endAngle) * radius;
+      const y2 = cy + Math.sin(endAngle) * radius;
+      const largeArc = fraction > 0.5 ? 1 : 0;
+      parts.push(
+        `<path d="M ${cx} ${cy} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z" fill="${fill}" stroke="${common.canvasBg}" stroke-width="2"/>`
+      );
+    }
+    if (ir.showData && fraction >= 0.04) {
+      const mid = (startAngle + endAngle) / 2;
+      const lx = cx + Math.cos(mid) * radius * 0.65;
+      const ly = cy + Math.sin(mid) * radius * 0.65;
+      parts.push(
+        `<text x="${lx}" y="${ly + 4}" text-anchor="middle" font-size="12" font-weight="600" fill="#ffffff">${(fraction * 100).toFixed(1)}%</text>`
+      );
+    }
+    startAngle = endAngle;
+  });
+  const legendX = cx + radius + 24;
+  let legendY = padding + titleH + 16;
+  ir.slices.forEach((slice, i) => {
+    const fill = PIE_PALETTE[i % PIE_PALETTE.length];
+    const pct = (slice.value / total * 100).toFixed(1);
+    parts.push(`<rect x="${legendX}" y="${legendY - 10}" width="14" height="14" rx="2" fill="${fill}"/>`);
+    parts.push(`<text x="${legendX + 22}" y="${legendY + 1}" font-size="12" fill="${common.text}">${escXml(slice.label)}</text>`);
+    parts.push(`<text x="${legendX + 22}" y="${legendY + 16}" font-size="10" fill="${common.subtle}">${slice.value} \xB7 ${pct}%</text>`);
+    legendY += 32;
+  });
+  parts.push("</svg>");
+  return parts.join("");
+}
+function buildQuadrantSvg(ir, options = {}) {
+  const { common } = palette(options.dark ?? false);
+  const dark = options.dark ?? false;
+  const padding = options.padding ?? 60;
+  const titleH = ir.title ? 32 : 0;
+  const chartW = 700;
+  const chartH = 500;
+  const yAxis = ir.yAxisLabel ?? { low: "Low", high: "High" };
+  const xAxis = ir.xAxisLabel ?? { low: "Low", high: "High" };
+  const longestYLabel = Math.max(yAxis.low.length, yAxis.high.length);
+  const leftPadding = Math.max(padding, longestYLabel * 7 + 24);
+  const width = leftPadding + chartW + padding;
+  const height = padding * 2 + titleH + chartH;
+  const x0 = leftPadding;
+  const y0 = padding + titleH;
+  const tints = dark ? { q1: "rgba(16,185,129,0.18)", q2: "rgba(245,158,11,0.18)", q3: "rgba(244,63,94,0.18)", q4: "rgba(59,130,246,0.18)" } : { q1: "#10b98120", q2: "#f59e0b20", q3: "#ef444420", q4: "#3b82f620" };
+  const parts = [];
+  parts.push(svgOpen(0, 0, width, height, common.canvasBg, ir.title || "Quadrant chart"));
+  if (ir.title) {
+    parts.push(`<text x="${width / 2}" y="22" text-anchor="middle" font-size="16" font-weight="600" fill="${common.text}">${escXml(ir.title)}</text>`);
+  }
+  const halfW = chartW / 2;
+  const halfH = chartH / 2;
+  parts.push(`<rect x="${x0}" y="${y0 + halfH}" width="${halfW}" height="${halfH}" fill="${tints.q3}"/>`);
+  parts.push(`<rect x="${x0 + halfW}" y="${y0 + halfH}" width="${halfW}" height="${halfH}" fill="${tints.q4}"/>`);
+  parts.push(`<rect x="${x0}" y="${y0}" width="${halfW}" height="${halfH}" fill="${tints.q2}"/>`);
+  parts.push(`<rect x="${x0 + halfW}" y="${y0}" width="${halfW}" height="${halfH}" fill="${tints.q1}"/>`);
+  parts.push(`<line x1="${x0}" y1="${y0 + halfH}" x2="${x0 + chartW}" y2="${y0 + halfH}" stroke="${common.border}" stroke-width="1"/>`);
+  parts.push(`<line x1="${x0 + halfW}" y1="${y0}" x2="${x0 + halfW}" y2="${y0 + chartH}" stroke="${common.border}" stroke-width="1"/>`);
+  const labels = ir.quadrantLabels ?? {};
+  if (labels.q1) parts.push(`<text x="${x0 + halfW + halfW / 2}" y="${y0 + halfH / 2}" text-anchor="middle" font-size="13" font-weight="500" fill="${common.text}">${escXml(labels.q1)}</text>`);
+  if (labels.q2) parts.push(`<text x="${x0 + halfW / 2}" y="${y0 + halfH / 2}" text-anchor="middle" font-size="13" font-weight="500" fill="${common.text}">${escXml(labels.q2)}</text>`);
+  if (labels.q3) parts.push(`<text x="${x0 + halfW / 2}" y="${y0 + halfH + halfH / 2}" text-anchor="middle" font-size="13" font-weight="500" fill="${common.text}">${escXml(labels.q3)}</text>`);
+  if (labels.q4) parts.push(`<text x="${x0 + halfW + halfW / 2}" y="${y0 + halfH + halfH / 2}" text-anchor="middle" font-size="13" font-weight="500" fill="${common.text}">${escXml(labels.q4)}</text>`);
+  parts.push(`<text x="${x0}" y="${y0 + chartH + 24}" text-anchor="start" font-size="12" fill="${common.text}">${escXml(xAxis.low)}</text>`);
+  parts.push(`<text x="${x0 + chartW}" y="${y0 + chartH + 24}" text-anchor="end" font-size="12" fill="${common.text}">${escXml(xAxis.high)}</text>`);
+  parts.push(`<text x="${x0 - 12}" y="${y0 + chartH}" text-anchor="end" font-size="12" fill="${common.text}">${escXml(yAxis.low)}</text>`);
+  parts.push(`<text x="${x0 - 12}" y="${y0 + 12}" text-anchor="end" font-size="12" fill="${common.text}">${escXml(yAxis.high)}</text>`);
+  for (const p of ir.points) {
+    const px = x0 + p.x * chartW;
+    const py = y0 + (1 - p.y) * chartH;
+    parts.push(`<circle cx="${px}" cy="${py}" r="6" fill="#3b82f6" stroke="${common.canvasBg}" stroke-width="2"/>`);
+    parts.push(`<text x="${px}" y="${py - 12}" text-anchor="middle" font-size="11" font-weight="500" fill="${common.text}">${escXml(p.label)}</text>`);
+  }
+  parts.push("</svg>");
+  return parts.join("");
+}
+function buildJourneySvg(ir, options = {}) {
+  const { common } = palette(options.dark ?? false);
+  const padding = options.padding ?? 40;
+  const titleH = ir.title ? 32 : 0;
+  const SECTION_HEADER_H = 32;
+  const TASK_H = 36;
+  const labelW = 200;
+  const chartW = 600;
+  const SCORE_MAX = 7;
+  const allTasks = [];
+  ir.sections.forEach((s, idx) => {
+    s.tasks.forEach((t) => allTasks.push({ sectionTitle: s.title, sectionIdx: idx, label: t.label, score: t.score, actors: t.actors }));
+  });
+  const totalH = padding * 2 + titleH + ir.sections.length * SECTION_HEADER_H + allTasks.length * TASK_H + 40;
+  const width = padding * 2 + labelW + chartW;
+  const height = totalH;
+  const sectionColors = ["#3b82f6", "#10b981", "#f59e0b", "#f43f5e", "#8b5cf6", "#06b6d4"];
+  const parts = [];
+  parts.push(svgOpen(0, 0, width, height, common.canvasBg, ir.title || "User journey"));
+  if (ir.title) {
+    parts.push(`<text x="${width / 2}" y="22" text-anchor="middle" font-size="16" font-weight="600" fill="${common.text}">${escXml(ir.title)}</text>`);
+  }
+  const chartX = padding + labelW;
+  const axisY = padding + titleH + 14;
+  for (let s = 1; s <= SCORE_MAX; s++) {
+    const x = chartX + (s - 1) / (SCORE_MAX - 1) * chartW;
+    parts.push(`<text x="${x}" y="${axisY}" text-anchor="middle" font-size="10" fill="${common.subtle}">${s}</text>`);
+  }
+  let cy = padding + titleH + SECTION_HEADER_H;
+  ir.sections.forEach((section, idx) => {
+    const color = sectionColors[idx % sectionColors.length];
+    parts.push(`<rect x="${padding}" y="${cy - SECTION_HEADER_H + 4}" width="${labelW + chartW}" height="${SECTION_HEADER_H - 4}" fill="${color}20" rx="6"/>`);
+    parts.push(`<text x="${padding + 10}" y="${cy - 12}" font-size="12" font-weight="600" fill="${common.text}">${escXml(section.title)}</text>`);
+    section.tasks.forEach((task) => {
+      parts.push(`<text x="${padding + 10}" y="${cy + TASK_H / 2 + 4}" font-size="12" fill="${common.text}">${escXml(task.label)}</text>`);
+      const scoreClamped = Math.max(1, Math.min(SCORE_MAX, task.score));
+      const dotX = chartX + (scoreClamped - 1) / (SCORE_MAX - 1) * chartW;
+      const dotY = cy + TASK_H / 2;
+      parts.push(`<line x1="${chartX}" y1="${dotY}" x2="${chartX + chartW}" y2="${dotY}" stroke="${common.border}" stroke-dasharray="2 3"/>`);
+      parts.push(`<circle cx="${dotX}" cy="${dotY}" r="8" fill="${color}" stroke="${common.canvasBg}" stroke-width="2"/>`);
+      parts.push(`<text x="${dotX}" y="${dotY + 3}" text-anchor="middle" font-size="10" font-weight="700" fill="#ffffff">${task.score}</text>`);
+      if (task.actors.length > 0) {
+        const actorsText = task.actors.join(", ");
+        parts.push(`<text x="${dotX + 14}" y="${dotY + 4}" font-size="10" fill="${common.subtle}">${escXml(actorsText)}</text>`);
+      }
+      cy += TASK_H;
+    });
+    cy += SECTION_HEADER_H;
+  });
+  parts.push("</svg>");
+  return parts.join("");
+}
+function archTint(icon, dark) {
+  if (!icon) return dark ? { fill: "#1e293b", border: "#475569" } : { fill: "#ffffff", border: "#cbd5e1" };
+  const key = Object.keys(ARCH_ICON_TINT).find((k) => icon.toLowerCase().includes(k));
+  const base = key ? ARCH_ICON_TINT[key] : { fill: "#ffffff", border: "#cbd5e1" };
+  if (!dark) return base;
+  return { fill: `${base.border}25`, border: base.border };
+}
+function buildArchitectureSvg(ir, options = {}) {
+  const { common } = palette(options.dark ?? false);
+  const dark = options.dark ?? false;
+  const padding = options.padding ?? 40;
+  const SERVICE_W = 130;
+  const SERVICE_H = 80;
+  const byParent = /* @__PURE__ */ new Map();
+  for (const n of ir.nodes) {
+    const k = n.parent;
+    if (!byParent.has(k)) byParent.set(k, []);
+    byParent.get(k).push(n);
+  }
+  const groupBounds = /* @__PURE__ */ new Map();
+  for (const node of ir.nodes) {
+    if (node.kind !== "group") continue;
+    const children = byParent.get(node.id) ?? [];
+    const g = new dagre2__default.default.graphlib.Graph();
+    g.setGraph({ rankdir: "LR", nodesep: 30, ranksep: 50, marginx: 16, marginy: 16 });
+    g.setDefaultEdgeLabel(() => ({}));
+    for (const c of children) {
+      g.setNode(c.id, { width: SERVICE_W, height: SERVICE_H });
+    }
+    const childIds = new Set(children.map((c) => c.id));
+    for (const e of ir.edges) {
+      if (childIds.has(e.source) && childIds.has(e.target) && g.hasNode(e.source) && g.hasNode(e.target)) {
+        g.setEdge(e.source, e.target);
+      }
+    }
+    if (children.length > 0) dagre2__default.default.layout(g);
+    const positions = /* @__PURE__ */ new Map();
+    let minLeft = Infinity, minTop = Infinity, maxRight = 0, maxBottom = 0;
+    for (const c of children) {
+      const { x, y } = g.node(c.id);
+      const left = x - SERVICE_W / 2;
+      const top = y - SERVICE_H / 2;
+      positions.set(c.id, { x: left, y: top });
+      minLeft = Math.min(minLeft, left);
+      minTop = Math.min(minTop, top);
+      maxRight = Math.max(maxRight, left + SERVICE_W);
+      maxBottom = Math.max(maxBottom, top + SERVICE_H);
+    }
+    const HEADER = 28;
+    const PAD = 16;
+    const dx = PAD - (isFinite(minLeft) ? minLeft : 0);
+    const dy = HEADER + PAD - (isFinite(minTop) ? minTop : 0);
+    const offset = /* @__PURE__ */ new Map();
+    for (const [id, p] of positions) offset.set(id, { x: p.x + dx, y: p.y + dy });
+    groupBounds.set(node.id, {
+      width: Math.max(220, (isFinite(maxRight - minLeft) ? maxRight - minLeft : 0) + PAD * 2),
+      height: Math.max(120, (isFinite(maxBottom - minTop) ? maxBottom - minTop : 0) + HEADER + PAD * 2),
+      positions: offset
+    });
+  }
+  const topLevel = ir.nodes.filter((n) => !n.parent);
+  const outer = new dagre2__default.default.graphlib.Graph();
+  outer.setGraph({ rankdir: "LR", nodesep: 50, ranksep: 80, marginx: 32, marginy: 32 });
+  outer.setDefaultEdgeLabel(() => ({}));
+  for (const n of topLevel) {
+    if (n.kind === "group") {
+      const b = groupBounds.get(n.id);
+      outer.setNode(n.id, { width: b.width, height: b.height });
+    } else {
+      outer.setNode(n.id, { width: SERVICE_W, height: SERVICE_H });
+    }
+  }
+  for (const e of ir.edges) {
+    if (outer.hasNode(e.source) && outer.hasNode(e.target)) outer.setEdge(e.source, e.target);
+  }
+  dagre2__default.default.layout(outer);
+  const abs = /* @__PURE__ */ new Map();
+  for (const n of topLevel) {
+    const { x, y } = outer.node(n.id);
+    const w = n.kind === "group" ? groupBounds.get(n.id).width : SERVICE_W;
+    const h = n.kind === "group" ? groupBounds.get(n.id).height : SERVICE_H;
+    abs.set(n.id, { x: x - w / 2, y: y - h / 2, width: w, height: h, kind: n.kind, node: n });
+  }
+  for (const n of ir.nodes) {
+    if (!n.parent) continue;
+    const parentBox = abs.get(n.parent);
+    if (!parentBox) continue;
+    const pos = groupBounds.get(n.parent)?.positions.get(n.id);
+    if (!pos) continue;
+    abs.set(n.id, { x: parentBox.x + pos.x, y: parentBox.y + pos.y, width: SERVICE_W, height: SERVICE_H, kind: n.kind, node: n });
+  }
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const b of abs.values()) {
+    minX = Math.min(minX, b.x);
+    minY = Math.min(minY, b.y);
+    maxX = Math.max(maxX, b.x + b.width);
+    maxY = Math.max(maxY, b.y + b.height);
+  }
+  minX -= padding;
+  minY -= padding;
+  maxX += padding;
+  maxY += padding;
+  const width = Math.round(maxX - minX);
+  const height = Math.round(maxY - minY);
+  const parts = [];
+  parts.push(svgOpen(minX, minY, width, height, common.canvasBg, "Architecture diagram"));
+  parts.push(`<defs>${arrowDef("arr", common.edgeColor)}</defs>`);
+  for (const n of ir.nodes) {
+    if (n.kind !== "group") continue;
+    const b = abs.get(n.id);
+    if (!b) continue;
+    const tint = archTint(n.icon, dark);
+    parts.push(
+      `<rect x="${b.x}" y="${b.y}" width="${b.width}" height="${b.height}" rx="12" fill="${tint.fill}" stroke="${tint.border}" stroke-width="1.5" stroke-dasharray="6 4"/>`
+    );
+    parts.push(`<text x="${b.x + 14}" y="${b.y + 18}" font-size="12" font-weight="700" fill="${common.text}">${escXml(n.label)}</text>`);
+    if (n.icon) {
+      parts.push(`<text x="${b.x + b.width - 14}" y="${b.y + 18}" text-anchor="end" font-size="9" fill="${common.subtle}">${escXml(n.icon)}</text>`);
+    }
+  }
+  for (const e of ir.edges) {
+    const a = abs.get(e.source);
+    const b = abs.get(e.target);
+    if (!a || !b) continue;
+    parts.push(buildEdgePath(a, b, { source: e.source, target: e.target, label: e.label, kind: "solid" }, common));
+  }
+  for (const n of ir.nodes) {
+    if (n.kind !== "service") continue;
+    const b = abs.get(n.id);
+    if (!b) continue;
+    const tint = archTint(n.icon, dark);
+    parts.push(
+      `<rect x="${b.x}" y="${b.y}" width="${b.width}" height="${b.height}" rx="10" fill="${tint.fill}" stroke="${tint.border}" stroke-width="1.5"/>`
+    );
+    parts.push(`<circle cx="${b.x + b.width / 2}" cy="${b.y + 22}" r="14" fill="${tint.border}" opacity="0.85"/>`);
+    if (n.icon) {
+      const short = n.icon.split(":").pop().slice(0, 3).toUpperCase();
+      parts.push(`<text x="${b.x + b.width / 2}" y="${b.y + 26}" text-anchor="middle" font-size="9" font-weight="700" fill="#ffffff">${escXml(short)}</text>`);
+    }
+    parts.push(`<text x="${b.x + b.width / 2}" y="${b.y + 56}" text-anchor="middle" font-size="12" font-weight="600" fill="${common.text}">${escXml(n.label)}</text>`);
+  }
+  parts.push("</svg>");
+  return parts.join("");
+}
+function c4StyleFor(kind, dark) {
+  const isExternal = kind.endsWith("-external");
+  const base = kind.startsWith("person") ? { fill: dark ? "rgba(8, 80, 134, 0.4)" : "#08427b", text: "#ffffff" } : kind.startsWith("system") ? { fill: dark ? "rgba(17, 102, 187, 0.4)" : "#1168bd", text: "#ffffff" } : kind.startsWith("container") ? { fill: dark ? "rgba(67, 130, 245, 0.4)" : "#438dd5", text: "#ffffff" } : kind.startsWith("component") ? { fill: dark ? "rgba(133, 187, 245, 0.4)" : "#85bbf0", text: "#0f172a" } : { fill: dark ? "rgba(148, 163, 184, 0.3)" : "#9ca3af", text: "#0f172a" };
+  let shape = "rect";
+  if (kind.startsWith("person")) shape = "person";
+  else if (kind.endsWith("-db")) shape = "cylinder";
+  else if (kind.endsWith("-queue")) shape = "queue";
+  else if (kind.endsWith("boundary")) shape = "boundary";
+  else if (kind === "node") shape = "node";
+  return {
+    fill: isExternal ? dark ? "rgba(100, 116, 139, 0.4)" : "#999999" : base.fill,
+    border: isExternal ? "#64748b" : "#073b6f",
+    text: base.text,
+    badge: "#0f172a40",
+    badgeText: "#ffffff",
+    shape,
+    dashed: shape === "boundary" || shape === "node"
+  };
+}
+function c4BadgeLabel(kind) {
+  if (kind.startsWith("person")) return "Person";
+  if (kind.endsWith("-external")) {
+    if (kind.startsWith("system")) return "External System";
+    if (kind.startsWith("container")) return "External Container";
+    if (kind.startsWith("component")) return "External Component";
+  }
+  if (kind.endsWith("-db")) return kind.startsWith("system") ? "System" : kind.startsWith("container") ? "Container" : "Component";
+  if (kind.endsWith("-queue")) return kind.startsWith("system") ? "System" : kind.startsWith("container") ? "Container" : "Component";
+  if (kind === "system") return "System";
+  if (kind === "container") return "Container";
+  if (kind === "component") return "Component";
+  if (kind === "node") return "Deployment Node";
+  return "Boundary";
+}
+function buildC4Svg(ir, options = {}) {
+  const { common } = palette(options.dark ?? false);
+  const dark = options.dark ?? false;
+  const padding = options.padding ?? 40;
+  const titleH = ir.title ? 32 : 0;
+  const ELEM_W = 200;
+  const ELEM_H = 110;
+  const nonBoundary = ir.elements.filter((e) => !c4StyleFor(e.kind, dark).shape.includes("boundary") && c4StyleFor(e.kind, dark).shape !== "node");
+  const boundaries = ir.elements.filter((e) => {
+    const s = c4StyleFor(e.kind, dark);
+    return s.shape === "boundary" || s.shape === "node";
+  });
+  const g = new dagre2__default.default.graphlib.Graph();
+  g.setGraph({ rankdir: "TB", nodesep: 60, ranksep: 80, marginx: 32, marginy: 32 });
+  g.setDefaultEdgeLabel(() => ({}));
+  for (const el of nonBoundary) g.setNode(el.id, { width: ELEM_W, height: ELEM_H });
+  for (const rel of ir.relations) {
+    if (g.hasNode(rel.source) && g.hasNode(rel.target)) g.setEdge(rel.source, rel.target);
+  }
+  dagre2__default.default.layout(g);
+  const positions = /* @__PURE__ */ new Map();
+  for (const el of nonBoundary) {
+    const { x, y } = g.node(el.id);
+    positions.set(el.id, { x: x - ELEM_W / 2, y: y - ELEM_H / 2, width: ELEM_W, height: ELEM_H });
+  }
+  for (const b of boundaries) {
+    const children = ir.elements.filter((e) => e.parent === b.id);
+    const childPositions = children.map((c) => positions.get(c.id)).filter((p) => !!p);
+    if (childPositions.length === 0) continue;
+    let minX2 = Infinity, minY2 = Infinity, maxX2 = -Infinity, maxY2 = -Infinity;
+    for (const p of childPositions) {
+      minX2 = Math.min(minX2, p.x);
+      minY2 = Math.min(minY2, p.y);
+      maxX2 = Math.max(maxX2, p.x + p.width);
+      maxY2 = Math.max(maxY2, p.y + p.height);
+    }
+    positions.set(b.id, { x: minX2 - 20, y: minY2 - 28, width: maxX2 - minX2 + 40, height: maxY2 - minY2 + 48 });
+  }
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const p of positions.values()) {
+    minX = Math.min(minX, p.x);
+    minY = Math.min(minY, p.y);
+    maxX = Math.max(maxX, p.x + p.width);
+    maxY = Math.max(maxY, p.y + p.height);
+  }
+  minX -= padding;
+  minY -= padding - titleH;
+  maxX += padding;
+  maxY += padding;
+  const width = Math.round(maxX - minX);
+  const height = Math.round(maxY - minY) + titleH;
+  const viewMinY = minY - titleH;
+  const parts = [];
+  parts.push(svgOpen(minX, viewMinY, width, height, common.canvasBg, ir.title || `C4 ${ir.variant} diagram`));
+  parts.push(`<defs>${arrowDef("arr", common.edgeColor)}</defs>`);
+  if (ir.title) {
+    parts.push(`<text x="${minX + width / 2}" y="${viewMinY + 22}" text-anchor="middle" font-size="16" font-weight="700" fill="${common.text}">${escXml(ir.title)}</text>`);
+  }
+  for (const b of boundaries) {
+    const p = positions.get(b.id);
+    if (!p) continue;
+    const style = c4StyleFor(b.kind, dark);
+    parts.push(
+      `<rect x="${p.x}" y="${p.y}" width="${p.width}" height="${p.height}" rx="8" fill="none" stroke="${style.border}" stroke-width="2" stroke-dasharray="8 4"/>`
+    );
+    parts.push(`<text x="${p.x + 12}" y="${p.y + 18}" font-size="11" font-weight="700" fill="${common.text}">${escXml(b.label)}</text>`);
+    parts.push(`<text x="${p.x + 12}" y="${p.y + 32}" font-size="9" fill="${common.subtle}" font-style="italic">[${escXml(c4BadgeLabel(b.kind))}]</text>`);
+  }
+  for (const rel of ir.relations) {
+    const a = positions.get(rel.source);
+    const b = positions.get(rel.target);
+    if (!a || !b) continue;
+    const labelLine = rel.label ?? "";
+    const techLine = rel.technology ? `[${rel.technology}]` : "";
+    parts.push(
+      buildEdgePath(a, b, { source: rel.source, target: rel.target, label: [labelLine, techLine].filter(Boolean).join(" "), kind: "solid" }, common)
+    );
+  }
+  for (const el of nonBoundary) {
+    const p = positions.get(el.id);
+    if (!p) continue;
+    parts.push(buildC4Element(el, p, dark));
+  }
+  parts.push("</svg>");
+  return parts.join("");
+}
+function buildC4Element(el, p, dark) {
+  const style = c4StyleFor(el.kind, dark);
+  const cx = p.x + p.width / 2;
+  const parts = [];
+  if (style.shape === "person") {
+    const headR = 14;
+    parts.push(
+      `<rect x="${p.x}" y="${p.y + headR + 8}" width="${p.width}" height="${p.height - headR - 8}" rx="10" fill="${style.fill}" stroke="${style.border}" stroke-width="1.5"/>`
+    );
+    parts.push(`<circle cx="${cx}" cy="${p.y + headR + 4}" r="${headR}" fill="${style.fill}" stroke="${style.border}" stroke-width="1.5"/>`);
+  } else if (style.shape === "cylinder") {
+    const ry = 8;
+    parts.push(
+      `<path d="M ${p.x} ${p.y + ry} A ${p.width / 2} ${ry} 0 0 0 ${p.x + p.width} ${p.y + ry} L ${p.x + p.width} ${p.y + p.height - ry} A ${p.width / 2} ${ry} 0 0 1 ${p.x} ${p.y + p.height - ry} Z" fill="${style.fill}" stroke="${style.border}" stroke-width="1.5"/>`
+    );
+    parts.push(`<ellipse cx="${cx}" cy="${p.y + ry}" rx="${p.width / 2}" ry="${ry}" fill="none" stroke="${style.border}" stroke-width="1.5"/>`);
+  } else if (style.shape === "queue") {
+    parts.push(
+      `<rect x="${p.x}" y="${p.y}" width="${p.width}" height="${p.height}" rx="${p.height / 2}" fill="${style.fill}" stroke="${style.border}" stroke-width="1.5"/>`
+    );
+  } else {
+    parts.push(
+      `<rect x="${p.x}" y="${p.y}" width="${p.width}" height="${p.height}" rx="8" fill="${style.fill}" stroke="${style.border}" stroke-width="1.5"/>`
+    );
+  }
+  const badgeY = p.y + (style.shape === "person" ? 36 : 18);
+  parts.push(`<text x="${cx}" y="${badgeY}" text-anchor="middle" font-size="9" font-style="italic" font-weight="600" fill="${style.text}" opacity="0.85">[${escXml(c4BadgeLabel(el.kind))}]</text>`);
+  parts.push(`<text x="${cx}" y="${badgeY + 18}" text-anchor="middle" font-size="13" font-weight="700" fill="${style.text}">${escXml(el.label)}</text>`);
+  if (el.technology) {
+    parts.push(`<text x="${cx}" y="${badgeY + 32}" text-anchor="middle" font-size="10" font-style="italic" fill="${style.text}" opacity="0.85">[${escXml(el.technology)}]</text>`);
+  }
+  if (el.description) {
+    const lines = wrapText(el.description, 28);
+    const startY = badgeY + (el.technology ? 48 : 36);
+    for (let i = 0; i < Math.min(lines.length, 2); i++) {
+      parts.push(`<text x="${cx}" y="${startY + i * 12}" text-anchor="middle" font-size="10" fill="${style.text}" opacity="0.92">${escXml(lines[i])}</text>`);
+    }
+  }
+  return parts.join("");
+}
+function buildGitGraphSvg(ir, options = {}) {
+  const { common } = palette(options.dark ?? false);
+  const dark = options.dark ?? false;
+  const padding = options.padding ?? 40;
+  const titleH = ir.title ? 32 : 0;
+  const commits = [];
+  const branchOrder = ["main"];
+  const branchHead = /* @__PURE__ */ new Map();
+  branchHead.set("main", null);
+  let currentBranch = "main";
+  let counter = 0;
+  for (const op of ir.ops) {
+    if (op.kind === "branch") {
+      if (!branchOrder.includes(op.name)) branchOrder.push(op.name);
+      branchHead.set(op.name, branchHead.get(currentBranch) ?? null);
+      currentBranch = op.name;
+    } else if (op.kind === "checkout") {
+      currentBranch = op.name;
+      if (!branchOrder.includes(op.name)) branchOrder.push(op.name);
+      if (!branchHead.has(op.name)) branchHead.set(op.name, null);
+    } else if (op.kind === "commit") {
+      const id = op.id ?? `c${++counter}`;
+      const parent = branchHead.get(currentBranch);
+      const commit = {
+        id,
+        branch: currentBranch,
+        parents: parent ? [parent] : [],
+        tag: op.tag,
+        type: op.type ?? "NORMAL"
+      };
+      commits.push(commit);
+      branchHead.set(currentBranch, id);
+    } else if (op.kind === "merge") {
+      const id = `merge-${++counter}`;
+      const a = branchHead.get(currentBranch);
+      const b = branchHead.get(op.from);
+      const commit = {
+        id,
+        branch: currentBranch,
+        parents: [a, b].filter((p) => !!p),
+        tag: op.tag,
+        type: "NORMAL",
+        isMerge: true
+      };
+      commits.push(commit);
+      branchHead.set(currentBranch, id);
+    } else if (op.kind === "cherry-pick") {
+      const id = `cherry-${++counter}`;
+      const parent = branchHead.get(currentBranch);
+      commits.push({
+        id,
+        branch: currentBranch,
+        parents: parent ? [parent] : [],
+        type: "HIGHLIGHT"
+      });
+      branchHead.set(currentBranch, id);
+    }
+  }
+  const BRANCH_GAP = 60;
+  const COMMIT_GAP = 70;
+  const branchIdx = new Map(branchOrder.map((b, i) => [b, i]));
+  const branchX = (b) => padding + 90 + (branchIdx.get(b) ?? 0) * BRANCH_GAP;
+  const commitPositions = /* @__PURE__ */ new Map();
+  commits.forEach((c, i) => {
+    commitPositions.set(c.id, { x: branchX(c.branch), y: padding + titleH + 40 + i * COMMIT_GAP });
+  });
+  const width = padding * 2 + 90 + branchOrder.length * BRANCH_GAP + 200;
+  const height = padding * 2 + titleH + 60 + commits.length * COMMIT_GAP;
+  const branchColors = ["#3b82f6", "#10b981", "#f59e0b", "#f43f5e", "#8b5cf6", "#06b6d4", "#ec4899"];
+  const branchColor = (b) => branchColors[(branchIdx.get(b) ?? 0) % branchColors.length];
+  const parts = [];
+  parts.push(svgOpen(0, 0, width, height, common.canvasBg, ir.title || "Git graph"));
+  if (ir.title) {
+    parts.push(`<text x="${width / 2}" y="22" text-anchor="middle" font-size="15" font-weight="600" fill="${common.text}">${escXml(ir.title)}</text>`);
+  }
+  for (const b of branchOrder) {
+    const x = branchX(b);
+    const y = padding + titleH + 16;
+    parts.push(`<text x="${x}" y="${y}" text-anchor="middle" font-size="11" font-weight="700" fill="${branchColor(b)}">${escXml(b)}</text>`);
+    parts.push(`<line x1="${x}" y1="${y + 8}" x2="${x}" y2="${height - padding}" stroke="${branchColor(b)}" stroke-width="2" opacity="0.3"/>`);
+  }
+  for (const c of commits) {
+    const cp = commitPositions.get(c.id);
+    if (!cp) continue;
+    for (const pid of c.parents) {
+      const pp = commitPositions.get(pid);
+      if (!pp) continue;
+      const sameLane = pp.x === cp.x;
+      const stroke = branchColor(c.branch);
+      if (sameLane) {
+        parts.push(`<line x1="${pp.x}" y1="${pp.y}" x2="${cp.x}" y2="${cp.y}" stroke="${stroke}" stroke-width="2"/>`);
+      } else {
+        const midY = (pp.y + cp.y) / 2;
+        parts.push(`<path d="M ${pp.x} ${pp.y} C ${pp.x} ${midY}, ${cp.x} ${midY}, ${cp.x} ${cp.y}" stroke="${stroke}" stroke-width="2" fill="none"/>`);
+      }
+    }
+  }
+  for (const c of commits) {
+    const cp = commitPositions.get(c.id);
+    if (!cp) continue;
+    const color = branchColor(c.branch);
+    const r = 9;
+    if (c.type === "REVERSE") {
+      parts.push(`<rect x="${cp.x - r}" y="${cp.y - r}" width="${r * 2}" height="${r * 2}" fill="${dark ? "#0f172a" : "#ffffff"}" stroke="${color}" stroke-width="2"/>`);
+    } else if (c.type === "HIGHLIGHT") {
+      parts.push(`<rect x="${cp.x - r}" y="${cp.y - r}" width="${r * 2}" height="${r * 2}" rx="3" fill="${color}" stroke="${color}" stroke-width="2"/>`);
+    } else if (c.isMerge) {
+      parts.push(`<circle cx="${cp.x}" cy="${cp.y}" r="${r}" fill="${dark ? "#0f172a" : "#ffffff"}" stroke="${color}" stroke-width="2.5"/>`);
+      parts.push(`<circle cx="${cp.x}" cy="${cp.y}" r="${r - 4}" fill="${color}"/>`);
+    } else {
+      parts.push(`<circle cx="${cp.x}" cy="${cp.y}" r="${r}" fill="${color}" stroke="${dark ? "#0f172a" : "#ffffff"}" stroke-width="2"/>`);
+    }
+    const labelX = padding + 90 + branchOrder.length * BRANCH_GAP + 24;
+    parts.push(`<text x="${labelX}" y="${cp.y + 4}" font-family='${MONO_FAMILY}' font-size="11" fill="${common.text}">${escXml(c.id)}</text>`);
+    if (c.tag) {
+      const tagX = labelX + c.id.length * 7 + 12;
+      parts.push(`<rect x="${tagX}" y="${cp.y - 8}" width="${c.tag.length * 6.5 + 12}" height="16" rx="3" fill="${color}" opacity="0.85"/>`);
+      parts.push(`<text x="${tagX + 6}" y="${cp.y + 4}" font-size="10" font-weight="700" fill="#ffffff">${escXml(c.tag)}</text>`);
+    }
+  }
+  parts.push("</svg>");
+  return parts.join("");
+}
+function svgStringToElement(svg) {
+  if (typeof window === "undefined" || !window.DOMParser) return null;
+  const doc = new DOMParser().parseFromString(svg, "image/svg+xml");
+  const root = doc.documentElement;
+  if (root.tagName !== "svg") return null;
+  const imported = document.importNode(root, true);
+  return imported;
+}
+var LIGHT_KIND, DARK_KIND, LIGHT_COMMON, DARK_COMMON, FONT_FAMILY, MONO_FAMILY, VIS_SYMBOL, PIE_PALETTE, ARCH_ICON_TINT;
+var init_svgBuilders = __esm({
+  "src/utils/diagrams/svgBuilders.ts"() {
+    LIGHT_KIND = {
+      service: { border: "#86efac", headerBg: "#ecfdf5", accent: "#10b981", bodyBg: "#ffffff", text: "#064e3b" },
+      database: { border: "#fcd34d", headerBg: "#fffbeb", accent: "#f59e0b", bodyBg: "#ffffff", text: "#78350f" },
+      queue: { border: "#fda4af", headerBg: "#fff1f2", accent: "#f43f5e", bodyBg: "#ffffff", text: "#881337" },
+      storage: { border: "#67e8f9", headerBg: "#ecfeff", accent: "#06b6d4", bodyBg: "#ffffff", text: "#164e63" },
+      user: { border: "#93c5fd", headerBg: "#eff6ff", accent: "#3b82f6", bodyBg: "#ffffff", text: "#1e3a8a" },
+      client: { border: "#c4b5fd", headerBg: "#f5f3ff", accent: "#8b5cf6", bodyBg: "#ffffff", text: "#4c1d95" },
+      external: { border: "#cbd5e1", headerBg: "#f1f5f9", accent: "#64748b", bodyBg: "#ffffff", text: "#334155" },
+      process: { border: "#bfdbfe", headerBg: "#eff6ff", accent: "#60a5fa", bodyBg: "#ffffff", text: "#1e3a8a" },
+      decision: { border: "#c4b5fd", headerBg: "#f5f3ff", accent: "#8b5cf6", bodyBg: "#faf5ff", text: "#4c1d95" },
+      start: { border: "#86efac", headerBg: "#ecfdf5", accent: "#10b981", bodyBg: "#ffffff", text: "#064e3b" },
+      end: { border: "#fda4af", headerBg: "#fff1f2", accent: "#f43f5e", bodyBg: "#ffffff", text: "#881337" },
+      icon: { border: "#cbd5e1", headerBg: "#ffffff", accent: "#64748b", bodyBg: "#ffffff", text: "#1e293b" },
+      plain: { border: "#cbd5e1", headerBg: "#f8fafc", accent: "#64748b", bodyBg: "#ffffff", text: "#1e293b" }
+    };
+    DARK_KIND = {
+      service: { border: "#10b981", headerBg: "rgba(16,185,129,0.12)", accent: "#34d399", bodyBg: "#1e293b", text: "#a7f3d0" },
+      database: { border: "#f59e0b", headerBg: "rgba(245,158,11,0.12)", accent: "#fbbf24", bodyBg: "#1e293b", text: "#fde68a" },
+      queue: { border: "#f43f5e", headerBg: "rgba(244,63,94,0.12)", accent: "#fb7185", bodyBg: "#1e293b", text: "#fecdd3" },
+      storage: { border: "#06b6d4", headerBg: "rgba(6,182,212,0.12)", accent: "#22d3ee", bodyBg: "#1e293b", text: "#a5f3fc" },
+      user: { border: "#3b82f6", headerBg: "rgba(59,130,246,0.12)", accent: "#60a5fa", bodyBg: "#1e293b", text: "#bfdbfe" },
+      client: { border: "#8b5cf6", headerBg: "rgba(139,92,246,0.12)", accent: "#a78bfa", bodyBg: "#1e293b", text: "#ddd6fe" },
+      external: { border: "#64748b", headerBg: "rgba(100,116,139,0.12)", accent: "#94a3b8", bodyBg: "#1e293b", text: "#cbd5e1" },
+      process: { border: "#60a5fa", headerBg: "rgba(96,165,250,0.12)", accent: "#93c5fd", bodyBg: "#1e293b", text: "#bfdbfe" },
+      decision: { border: "#8b5cf6", headerBg: "rgba(139,92,246,0.12)", accent: "#a78bfa", bodyBg: "#1e293b", text: "#ddd6fe" },
+      start: { border: "#10b981", headerBg: "rgba(16,185,129,0.12)", accent: "#34d399", bodyBg: "#1e293b", text: "#a7f3d0" },
+      end: { border: "#f43f5e", headerBg: "rgba(244,63,94,0.12)", accent: "#fb7185", bodyBg: "#1e293b", text: "#fecdd3" },
+      icon: { border: "#475569", headerBg: "#1e293b", accent: "#94a3b8", bodyBg: "#1e293b", text: "#e2e8f0" },
+      plain: { border: "#475569", headerBg: "#1e293b", accent: "#94a3b8", bodyBg: "#1e293b", text: "#e2e8f0" }
+    };
+    LIGHT_COMMON = {
+      canvasBg: "#ffffff",
+      edgeColor: "#94a3b8",
+      edgeLabel: "#475569",
+      edgeLabelBg: "#ffffff",
+      text: "#1e293b",
+      subtle: "#64748b",
+      border: "#cbd5e1"
+    };
+    DARK_COMMON = {
+      canvasBg: "#0f172a",
+      edgeColor: "#64748b",
+      edgeLabel: "#cbd5e1",
+      edgeLabelBg: "#1e293b",
+      text: "#e2e8f0",
+      subtle: "#94a3b8",
+      border: "#475569"
+    };
+    FONT_FAMILY = '"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif';
+    MONO_FAMILY = '"Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace';
+    VIS_SYMBOL = { public: "+", private: "-", protected: "#", package: "~" };
+    PIE_PALETTE = [
+      "#3b82f6",
+      "#10b981",
+      "#f59e0b",
+      "#ef4444",
+      "#8b5cf6",
+      "#06b6d4",
+      "#ec4899",
+      "#84cc16",
+      "#f97316",
+      "#6366f1",
+      "#14b8a6",
+      "#d946ef"
+    ];
+    ARCH_ICON_TINT = {
+      aws: { fill: "#fff5e6", border: "#ff9900" },
+      google: { fill: "#e8f0fe", border: "#4285f4" },
+      azure: { fill: "#e3f2fd", border: "#0078d4" },
+      cloudflare: { fill: "#fff4e0", border: "#f48120" },
+      docker: { fill: "#e7f3ff", border: "#2496ed" },
+      kubernetes: { fill: "#eaf1ff", border: "#326ce5" },
+      redis: { fill: "#fde7e3", border: "#dc382d" },
+      postgresql: { fill: "#e3f2fa", border: "#336791" },
+      mongodb: { fill: "#e8f5e9", border: "#47a248" },
+      cloud: { fill: "#f0f4ff", border: "#6366f1" },
+      database: { fill: "#fff7ed", border: "#f59e0b" },
+      disk: { fill: "#ecfeff", border: "#06b6d4" },
+      server: { fill: "#ecfdf5", border: "#10b981" },
+      internet: { fill: "#eff6ff", border: "#3b82f6" }
+    };
+  }
+});
+
+// src/components/diagrams/FlowchartRenderer.tsx
+var FlowchartRenderer_exports = {};
+__export(FlowchartRenderer_exports, {
+  default: () => FlowchartRenderer
+});
+function rectSize(label) {
+  const width = Math.max(160, Math.min(320, label.length * 8 + 40));
+  const lines = Math.max(1, Math.ceil(label.length / 24));
+  return { width, height: 48 + (lines - 1) * 18 };
+}
+function diamondSize(label) {
+  return {
+    width: Math.max(140, Math.min(280, label.length * 11 + 60)),
+    height: Math.max(96, Math.min(160, Math.ceil(label.length / 16) * 32 + 64))
+  };
+}
+function FlowchartRenderer({ ir, dark = false, handleRef }) {
+  const theme = getDiagramTheme(dark);
+  const containerRef = react.useRef(null);
+  const svg = react.useMemo(() => {
+    const sizes = /* @__PURE__ */ new Map();
+    for (const n of ir.nodes) {
+      if (n.kind === "user" || n.kind === "start" || n.kind === "end") sizes.set(n.id, NODE_SIZE.circle);
+      else if (n.kind === "icon") sizes.set(n.id, NODE_SIZE.icon);
+      else if (n.kind === "decision") sizes.set(n.id, diamondSize(n.label));
+      else if (n.kind === "queue") sizes.set(n.id, NODE_SIZE.subroutine);
+      else sizes.set(n.id, rectSize(n.label));
+    }
+    const layout = layoutFlowchart(ir, { nodeSizes: sizes });
+    return buildFlowchartSvg(ir, layout.nodePositions, { dark });
+  }, [ir, dark]);
+  react.useEffect(() => {
+    if (!handleRef) return;
+    const handle = {
+      getSvgElement: () => svgStringToElement(svg)
+    };
+    handleRef.current = handle;
+    return () => {
+      if (handleRef.current === handle) handleRef.current = null;
+    };
+  }, [handleRef, svg]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "flowchart-renderer",
+      style: { width: "100%", background: theme.canvasBg, borderRadius: 12, padding: 12, overflow: "auto" },
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+var NODE_SIZE;
+var init_FlowchartRenderer = __esm({
+  "src/components/diagrams/FlowchartRenderer.tsx"() {
+    init_dagreLayout();
+    init_theme();
+    init_svgBuilders();
+    NODE_SIZE = {
+      circle: { width: 84, height: 84 },
+      icon: { width: 100, height: 96 },
+      subroutine: { width: 220, height: 64 }
+    };
+  }
+});
+
+// src/components/diagrams/ERRenderer.tsx
+var ERRenderer_exports = {};
+__export(ERRenderer_exports, {
+  default: () => ERRenderer
+});
+function ERRenderer({ ir, dark = false, handleRef }) {
+  const theme = getDiagramTheme(dark);
+  const containerRef = react.useRef(null);
+  const svg = react.useMemo(() => {
+    const g = new dagre2__default.default.graphlib.Graph();
+    g.setGraph({ rankdir: "LR", nodesep: 60, ranksep: 100, marginx: 24, marginy: 24 });
+    g.setDefaultEdgeLabel(() => ({}));
+    const tableHeight = (cols) => TABLE_HEADER_HEIGHT + cols * TABLE_ROW_HEIGHT;
+    for (const table of ir.schema.tables) {
+      g.setNode(table.name, { width: TABLE_NODE_WIDTH, height: tableHeight(table.columns.length) });
+    }
+    for (const rel of ir.schema.relations) {
+      if (g.hasNode(rel.fromTable) && g.hasNode(rel.toTable)) g.setEdge(rel.fromTable, rel.toTable);
+    }
+    dagre2__default.default.layout(g);
+    const positions = /* @__PURE__ */ new Map();
+    for (const table of ir.schema.tables) {
+      const { x, y } = g.node(table.name);
+      const h = tableHeight(table.columns.length);
+      positions.set(table.name, { x: x - TABLE_NODE_WIDTH / 2, y: y - h / 2, width: TABLE_NODE_WIDTH, height: h });
+    }
+    return buildErSvg(ir, positions, { dark });
+  }, [ir, dark]);
+  react.useEffect(() => {
+    if (!handleRef) return;
+    const handle = {
+      getSvgElement: () => svgStringToElement(svg)
+    };
+    handleRef.current = handle;
+    return () => {
+      if (handleRef.current === handle) handleRef.current = null;
+    };
+  }, [handleRef, svg]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "er-renderer",
+      style: { width: "100%", background: theme.canvasBg, borderRadius: 12, padding: 12, overflow: "auto" },
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+var TABLE_NODE_WIDTH, TABLE_HEADER_HEIGHT, TABLE_ROW_HEIGHT;
+var init_ERRenderer = __esm({
+  "src/components/diagrams/ERRenderer.tsx"() {
+    init_theme();
+    init_svgBuilders();
+    TABLE_NODE_WIDTH = 240;
+    TABLE_HEADER_HEIGHT = 34;
+    TABLE_ROW_HEIGHT = 26;
+  }
+});
+
+// src/components/diagrams/PieRenderer.tsx
+var PieRenderer_exports = {};
+__export(PieRenderer_exports, {
+  default: () => PieRenderer
+});
+function PieRenderer({ ir, dark = false, handleRef }) {
+  const theme = getDiagramTheme(dark);
+  const containerRef = react.useRef(null);
+  const svg = react.useMemo(() => buildPieSvg(ir, { dark }), [ir, dark]);
+  react.useEffect(() => {
+    if (!handleRef) return;
+    const handle = {
+      getSvgElement: () => svgStringToElement(svg)
+    };
+    handleRef.current = handle;
+    return () => {
+      if (handleRef.current === handle) handleRef.current = null;
+    };
+  }, [handleRef, svg]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "pie-renderer",
+      style: { width: "100%", background: theme.canvasBg, borderRadius: 12, padding: 12, overflow: "auto" },
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+var init_PieRenderer = __esm({
+  "src/components/diagrams/PieRenderer.tsx"() {
+    init_theme();
+    init_svgBuilders();
+  }
+});
+
+// src/components/diagrams/QuadrantRenderer.tsx
+var QuadrantRenderer_exports = {};
+__export(QuadrantRenderer_exports, {
+  default: () => QuadrantRenderer
+});
+function QuadrantRenderer({ ir, dark = false, handleRef }) {
+  const theme = getDiagramTheme(dark);
+  const containerRef = react.useRef(null);
+  const svg = react.useMemo(() => buildQuadrantSvg(ir, { dark }), [ir, dark]);
+  react.useEffect(() => {
+    if (!handleRef) return;
+    const handle = {
+      getSvgElement: () => svgStringToElement(svg)
+    };
+    handleRef.current = handle;
+    return () => {
+      if (handleRef.current === handle) handleRef.current = null;
+    };
+  }, [handleRef, svg]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "quadrant-renderer",
+      style: { width: "100%", background: theme.canvasBg, borderRadius: 12, padding: 12, overflow: "auto" },
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+var init_QuadrantRenderer = __esm({
+  "src/components/diagrams/QuadrantRenderer.tsx"() {
+    init_theme();
+    init_svgBuilders();
+  }
+});
+
+// src/components/diagrams/JourneyRenderer.tsx
+var JourneyRenderer_exports = {};
+__export(JourneyRenderer_exports, {
+  default: () => JourneyRenderer
+});
+function JourneyRenderer({ ir, dark = false, handleRef }) {
+  const theme = getDiagramTheme(dark);
+  const containerRef = react.useRef(null);
+  const svg = react.useMemo(() => buildJourneySvg(ir, { dark }), [ir, dark]);
+  react.useEffect(() => {
+    if (!handleRef) return;
+    const handle = {
+      getSvgElement: () => svgStringToElement(svg)
+    };
+    handleRef.current = handle;
+    return () => {
+      if (handleRef.current === handle) handleRef.current = null;
+    };
+  }, [handleRef, svg]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "journey-renderer",
+      style: { width: "100%", background: theme.canvasBg, borderRadius: 12, padding: 12, overflow: "auto" },
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+var init_JourneyRenderer = __esm({
+  "src/components/diagrams/JourneyRenderer.tsx"() {
+    init_theme();
+    init_svgBuilders();
+  }
+});
+
+// src/components/diagrams/SequenceRenderer.tsx
+var SequenceRenderer_exports = {};
+__export(SequenceRenderer_exports, {
+  default: () => SequenceRenderer
+});
+function SequenceRenderer({ ir, dark = false, handleRef }) {
+  const theme = getDiagramTheme(dark);
+  const containerRef = react.useRef(null);
+  const layout = react.useMemo(() => computeLayout(ir.participants, ir.steps), [ir.participants, ir.steps]);
+  react.useEffect(() => {
+    if (!handleRef) return;
+    const handle = {
+      getSvgElement: () => containerRef.current?.querySelector("svg.sequence-svg") ?? null
+    };
+    handleRef.current = handle;
+    return () => {
+      if (handleRef.current === handle) handleRef.current = null;
+    };
+  }, [handleRef, layout]);
+  const lifelineColor = dark ? "#475569" : "#cbd5e1";
+  const headFill = dark ? "#1e293b" : "#f1f5f9";
+  const headBorder = dark ? "#475569" : "#cbd5e1";
+  const headText = dark ? "#e2e8f0" : "#1e293b";
+  const arrowColor = dark ? "#94a3b8" : "#64748b";
+  const labelColor = dark ? "#cbd5e1" : "#334155";
+  const noteFill = dark ? "#451a03" : "#fef3c7";
+  const noteBorder = dark ? "#92400e" : "#fcd34d";
+  const noteText = dark ? "#fde68a" : "#78350f";
+  const titleY = ir.title ? TITLE_H : 0;
+  const headTopY = titleY + HEAD_PAD_Y;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "sequence-renderer",
+      style: {
+        width: "100%",
+        background: theme.canvasBg,
+        borderRadius: 12,
+        padding: 16,
+        overflow: "auto"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          className: "sequence-svg",
+          xmlns: "http://www.w3.org/2000/svg",
+          width: layout.width,
+          height: layout.height + titleY,
+          viewBox: `0 0 ${layout.width} ${layout.height + titleY}`,
+          style: { display: "block", minWidth: "100%", fontFamily: '"Inter", ui-sans-serif, system-ui, sans-serif' },
+          children: [
+            ir.title && /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                x: layout.width / 2,
+                y: 20,
+                textAnchor: "middle",
+                fontSize: 15,
+                fontWeight: 600,
+                fill: headText,
+                children: ir.title
+              }
+            ),
+            ir.participants.map((p) => {
+              const x = layout.participantX.get(p.id);
+              if (x === void 0) return null;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "line",
+                {
+                  x1: x,
+                  x2: x,
+                  y1: headTopY + PART_BOX_H,
+                  y2: headTopY + PART_BOX_H + layout.contentH + STEP_GAP,
+                  stroke: lifelineColor,
+                  strokeWidth: 1,
+                  strokeDasharray: "4 4"
+                },
+                `life-${p.id}`
+              );
+            }),
+            ir.participants.map((p) => {
+              const x = layout.participantX.get(p.id);
+              if (x === void 0) return null;
+              return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "rect",
+                  {
+                    x: x - PART_BOX_W / 2,
+                    y: headTopY,
+                    width: PART_BOX_W,
+                    height: PART_BOX_H,
+                    rx: 6,
+                    fill: headFill,
+                    stroke: headBorder,
+                    strokeWidth: 1
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "text",
+                  {
+                    x,
+                    y: headTopY + PART_BOX_H / 2 + 4,
+                    textAnchor: "middle",
+                    fontSize: 12,
+                    fontWeight: 600,
+                    fill: headText,
+                    children: truncate(p.label, 18)
+                  }
+                )
+              ] }, `head-${p.id}`);
+            }),
+            layout.placedSteps.map((ps, i) => {
+              if (ps.step.kind === "message") {
+                const fromX = layout.participantX.get(ps.step.from);
+                const isSelf = ps.step.from === ps.step.to;
+                const isRightmost = isSelf && fromX === Math.max(...layout.participantX.values());
+                return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  MessageStep,
+                  {
+                    msg: ps.step,
+                    fromX,
+                    toX: layout.participantX.get(ps.step.to),
+                    y: headTopY + PART_BOX_H + ps.y,
+                    arrowColor,
+                    labelColor,
+                    selfDirection: isRightmost ? "left" : "right",
+                    canvasWidth: layout.width
+                  }
+                ) }, i);
+              }
+              return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                NoteStep,
+                {
+                  note: ps.step,
+                  participantXs: ps.step.participants.map((id) => layout.participantX.get(id)).filter((x) => x !== void 0),
+                  y: headTopY + PART_BOX_H + ps.y,
+                  fill: noteFill,
+                  border: noteBorder,
+                  textColor: noteText
+                }
+              ) }, i);
+            }),
+            ir.participants.map((p) => {
+              const x = layout.participantX.get(p.id);
+              if (x === void 0) return null;
+              const footY = headTopY + PART_BOX_H + layout.contentH + STEP_GAP - PART_BOX_H / 2;
+              return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "rect",
+                  {
+                    x: x - PART_BOX_W / 2,
+                    y: footY,
+                    width: PART_BOX_W,
+                    height: PART_BOX_H,
+                    rx: 6,
+                    fill: headFill,
+                    stroke: headBorder,
+                    strokeWidth: 1
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "text",
+                  {
+                    x,
+                    y: footY + PART_BOX_H / 2 + 4,
+                    textAnchor: "middle",
+                    fontSize: 12,
+                    fontWeight: 600,
+                    fill: headText,
+                    children: truncate(p.label, 18)
+                  }
+                )
+              ] }, `foot-${p.id}`);
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(ArrowDefs, { arrowColor })
+          ]
+        }
+      )
+    }
+  );
+}
+function MessageStep({
+  msg,
+  fromX,
+  toX,
+  y,
+  arrowColor,
+  labelColor,
+  selfDirection = "right",
+  canvasWidth
+}) {
+  const isReply = msg.arrow === "reply";
+  const isAsync = msg.arrow === "async";
+  const isCross = msg.arrow === "cross";
+  const dasharray = isReply ? "5 4" : isAsync ? "8 3" : void 0;
+  const markerEnd = isCross ? "url(#arr-cross)" : isAsync ? "url(#arr-open)" : "url(#arr-solid)";
+  const labelX = (fromX + toX) / 2;
+  const labelY = y - 8;
+  const showSelf = fromX === toX;
+  if (showSelf) {
+    const dir = selfDirection === "left" ? -1 : 1;
+    const loopEndX = fromX + dir * SELF_LOOP_W;
+    const labelText = truncate(msg.label, 28);
+    const charW = 6.2;
+    const approxLabelW = labelText.length * charW;
+    const labelXPos = dir === 1 ? (
+      // loop opens right; label sits to the right of the loop's edge
+      Math.min(loopEndX + 8, (canvasWidth ?? Infinity) - approxLabelW - 4)
+    ) : (
+      // loop opens left; label sits to the left of the loop's edge
+      Math.max(loopEndX - approxLabelW - 8, 4)
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: `M ${fromX} ${y} h ${dir * SELF_LOOP_W} v 22 h ${-dir * SELF_LOOP_W}`,
+          fill: "none",
+          stroke: arrowColor,
+          strokeWidth: 1.4,
+          strokeDasharray: dasharray,
+          markerEnd
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "text",
+        {
+          x: labelXPos,
+          y: y + 14,
+          fontSize: 11,
+          fill: labelColor,
+          textAnchor: dir === 1 ? "start" : "start",
+          children: labelText
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: labelX,
+        y: labelY,
+        textAnchor: "middle",
+        fontSize: 11,
+        fill: labelColor,
+        fontWeight: 500,
+        children: truncate(msg.label, 60)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: fromX,
+        x2: toX,
+        y1: y,
+        y2: y,
+        stroke: arrowColor,
+        strokeWidth: 1.4,
+        strokeDasharray: dasharray,
+        markerEnd
+      }
+    )
+  ] });
+}
+function NoteStep({
+  note,
+  participantXs,
+  y,
+  fill,
+  border,
+  textColor
+}) {
+  if (participantXs.length === 0) return null;
+  let x = 0;
+  let w = 160;
+  if (note.side === "over") {
+    const min = Math.min(...participantXs);
+    const max = Math.max(...participantXs);
+    w = Math.max(160, max - min + 80);
+    x = min - (w - (max - min)) / 2;
+  } else if (note.side === "left") {
+    x = participantXs[0] - 90 - 60;
+    w = 140;
+  } else {
+    x = participantXs[0] + 60;
+    w = 140;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x,
+        y: y - 6,
+        width: w,
+        height: NOTE_H,
+        rx: 4,
+        fill,
+        stroke: border,
+        strokeWidth: 1
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: x + w / 2, y: y + NOTE_H / 2 - 1, textAnchor: "middle", fontSize: 11, fill: textColor, children: truncate(note.text, 50) })
+  ] });
+}
+function ArrowDefs({ arrowColor }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "arr-solid", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: arrowColor }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "arr-open", viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "9", markerHeight: "9", orient: "auto-start-reverse", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 0 0 L 10 5 L 0 10", fill: "none", stroke: arrowColor, strokeWidth: "1.5" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "arr-cross", viewBox: "0 0 10 10", refX: "5", refY: "5", markerWidth: "9", markerHeight: "9", orient: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 0 0 L 10 10 M 10 0 L 0 10", stroke: arrowColor, strokeWidth: "1.5" }) })
+  ] });
+}
+function computeLayout(participants, steps) {
+  const participantX = /* @__PURE__ */ new Map();
+  participants.forEach((p, i) => {
+    participantX.set(p.id, SIDE_PAD + PART_BOX_W / 2 + i * PARTICIPANT_GAP);
+  });
+  const lastX = (participants.length - 1) * PARTICIPANT_GAP + SIDE_PAD * 2 + PART_BOX_W;
+  const placedSteps = [];
+  let y = 36;
+  for (const step of steps) {
+    placedSteps.push({ step, y });
+    y += step.kind === "note" ? NOTE_H + 16 : STEP_GAP;
+  }
+  return {
+    width: lastX,
+    height: HEAD_PAD_Y + PART_BOX_H + y + STEP_GAP + PART_BOX_H + FOOT_HEIGHT,
+    contentH: y,
+    participantX,
+    placedSteps
+  };
+}
+function truncate(s, max) {
+  return s.length <= max ? s : s.slice(0, max - 1) + "\u2026";
+}
+var PARTICIPANT_GAP, STEP_GAP, HEAD_PAD_Y, FOOT_HEIGHT, SIDE_PAD, PART_BOX_W, PART_BOX_H, NOTE_H, TITLE_H, SELF_LOOP_W;
+var init_SequenceRenderer = __esm({
+  "src/components/diagrams/SequenceRenderer.tsx"() {
+    init_theme();
+    PARTICIPANT_GAP = 200;
+    STEP_GAP = 56;
+    HEAD_PAD_Y = 20;
+    FOOT_HEIGHT = 36;
+    SIDE_PAD = 40;
+    PART_BOX_W = 150;
+    PART_BOX_H = 36;
+    NOTE_H = 38;
+    TITLE_H = 28;
+    SELF_LOOP_W = 60;
+  }
+});
+
+// src/components/diagrams/ClassRenderer.tsx
+var ClassRenderer_exports = {};
+__export(ClassRenderer_exports, {
+  default: () => ClassRenderer
+});
+function classBoxSize(memberCount) {
+  return { width: 220, height: Math.max(64, 40 + memberCount * 18) };
+}
+function ClassRenderer({ ir, dark = false, handleRef }) {
+  const theme = getDiagramTheme(dark);
+  const containerRef = react.useRef(null);
+  const svg = react.useMemo(() => {
+    const g = new dagre2__default.default.graphlib.Graph();
+    g.setGraph({ rankdir: "TB", nodesep: 50, ranksep: 80, marginx: 24, marginy: 24 });
+    g.setDefaultEdgeLabel(() => ({}));
+    for (const cls of ir.classes) g.setNode(cls.id, classBoxSize(cls.members.length));
+    for (const rel of ir.relations) {
+      if (g.hasNode(rel.source) && g.hasNode(rel.target)) g.setEdge(rel.source, rel.target);
+    }
+    dagre2__default.default.layout(g);
+    const positions = /* @__PURE__ */ new Map();
+    for (const cls of ir.classes) {
+      const { x, y } = g.node(cls.id);
+      const size = classBoxSize(cls.members.length);
+      positions.set(cls.id, { x: x - size.width / 2, y: y - size.height / 2, width: size.width, height: size.height });
+    }
+    return buildClassSvg(ir, positions, { dark });
+  }, [ir, dark]);
+  react.useEffect(() => {
+    if (!handleRef) return;
+    const handle = {
+      getSvgElement: () => svgStringToElement(svg)
+    };
+    handleRef.current = handle;
+    return () => {
+      if (handleRef.current === handle) handleRef.current = null;
+    };
+  }, [handleRef, svg]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "class-renderer",
+      style: { width: "100%", background: theme.canvasBg, borderRadius: 12, padding: 12, overflow: "auto" },
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+var init_ClassRenderer = __esm({
+  "src/components/diagrams/ClassRenderer.tsx"() {
+    init_theme();
+    init_svgBuilders();
+  }
+});
+
+// src/components/diagrams/StateRenderer.tsx
+var StateRenderer_exports = {};
+__export(StateRenderer_exports, {
+  default: () => StateRenderer
+});
+function stateNodeSize(s) {
+  if (s.kind === "start" || s.kind === "end") return { width: 80, height: 32 };
+  const len = (s.label || s.id).length;
+  return { width: Math.max(96, len * 9 + 40), height: 44 };
+}
+function layoutComposite(parentId, ir) {
+  const children = ir.states.filter((s) => s.parent === parentId);
+  if (children.length === 0) {
+    return { width: 200, height: COMPOSITE_HEADER_HEIGHT + 60, positions: /* @__PURE__ */ new Map() };
+  }
+  const g = new dagre2__default.default.graphlib.Graph();
+  g.setGraph({ rankdir: "TB", nodesep: 60, ranksep: 70, marginx: 16, marginy: 16 });
+  g.setDefaultEdgeLabel(() => ({}));
+  for (const c of children) g.setNode(c.id, stateNodeSize(c));
+  for (const t of ir.transitions) {
+    if (t.parent !== parentId) continue;
+    if (g.hasNode(t.source) && g.hasNode(t.target)) g.setEdge(t.source, t.target);
+  }
+  dagre2__default.default.layout(g);
+  let minLeft = Infinity, minTop = Infinity, maxRight = 0, maxBottom = 0;
+  const tmp = /* @__PURE__ */ new Map();
+  for (const c of children) {
+    const { x, y } = g.node(c.id);
+    const sz = stateNodeSize(c);
+    const left = x - sz.width / 2;
+    const top = y - sz.height / 2;
+    tmp.set(c.id, { x: left, y: top });
+    minLeft = Math.min(minLeft, left);
+    minTop = Math.min(minTop, top);
+    maxRight = Math.max(maxRight, left + sz.width);
+    maxBottom = Math.max(maxBottom, top + sz.height);
+  }
+  const dx = COMPOSITE_PAD - minLeft;
+  const dy = COMPOSITE_HEADER_HEIGHT + COMPOSITE_PAD - minTop;
+  const positions = /* @__PURE__ */ new Map();
+  for (const [id, p] of tmp) positions.set(id, { x: p.x + dx, y: p.y + dy });
+  return {
+    width: maxRight - minLeft + COMPOSITE_PAD * 2,
+    height: maxBottom - minTop + COMPOSITE_HEADER_HEIGHT + COMPOSITE_PAD * 2,
+    positions
+  };
+}
+function StateRenderer({ ir, dark = false, handleRef }) {
+  const theme = getDiagramTheme(dark);
+  const containerRef = react.useRef(null);
+  const svg = react.useMemo(() => {
+    const compositeIds = ir.states.filter((s) => s.kind === "composite").map((s) => s.id);
+    const innerLayouts = /* @__PURE__ */ new Map();
+    for (const id of compositeIds) innerLayouts.set(id, layoutComposite(id, ir));
+    const buildPositions = { topLevel: /* @__PURE__ */ new Map(), children: /* @__PURE__ */ new Map() };
+    const topLevel = ir.states.filter((s) => !s.parent);
+    const g = new dagre2__default.default.graphlib.Graph();
+    g.setGraph({ rankdir: "TB", nodesep: 80, ranksep: 90, marginx: 32, marginy: 32 });
+    g.setDefaultEdgeLabel(() => ({}));
+    for (const s of topLevel) {
+      if (s.kind === "composite") {
+        const inner = innerLayouts.get(s.id);
+        g.setNode(s.id, { width: inner.width, height: inner.height });
+      } else {
+        g.setNode(s.id, stateNodeSize(s));
+      }
+    }
+    for (const t of ir.transitions) {
+      if (t.parent) continue;
+      if (g.hasNode(t.source) && g.hasNode(t.target)) g.setEdge(t.source, t.target);
+    }
+    dagre2__default.default.layout(g);
+    for (const s of topLevel) {
+      const { x, y } = g.node(s.id);
+      if (s.kind === "composite") {
+        const inner = innerLayouts.get(s.id);
+        buildPositions.topLevel.set(s.id, {
+          x: x - inner.width / 2,
+          y: y - inner.height / 2,
+          width: inner.width,
+          height: inner.height
+        });
+      } else {
+        const size = stateNodeSize(s);
+        buildPositions.topLevel.set(s.id, {
+          x: x - size.width / 2,
+          y: y - size.height / 2,
+          width: size.width,
+          height: size.height
+        });
+      }
+    }
+    for (const compId of compositeIds) {
+      const inner = innerLayouts.get(compId);
+      const children = ir.states.filter((s) => s.parent === compId);
+      for (const c of children) {
+        const pos = inner.positions.get(c.id);
+        if (!pos) continue;
+        const size = stateNodeSize(c);
+        buildPositions.children.set(c.id, {
+          x: pos.x,
+          y: pos.y,
+          width: size.width,
+          height: size.height,
+          parent: compId
+        });
+      }
+    }
+    return buildStateSvg(ir, buildPositions, { dark });
+  }, [ir, dark]);
+  react.useEffect(() => {
+    if (!handleRef) return;
+    const handle = {
+      getSvgElement: () => svgStringToElement(svg)
+    };
+    handleRef.current = handle;
+    return () => {
+      if (handleRef.current === handle) handleRef.current = null;
+    };
+  }, [handleRef, svg]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "state-renderer",
+      style: { width: "100%", background: theme.canvasBg, borderRadius: 12, padding: 12, overflow: "auto" },
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+var COMPOSITE_HEADER_HEIGHT, COMPOSITE_PAD;
+var init_StateRenderer = __esm({
+  "src/components/diagrams/StateRenderer.tsx"() {
+    init_theme();
+    init_svgBuilders();
+    COMPOSITE_HEADER_HEIGHT = 32;
+    COMPOSITE_PAD = 18;
+  }
+});
+
+// src/components/diagrams/GanttRenderer.tsx
+var GanttRenderer_exports = {};
+__export(GanttRenderer_exports, {
+  default: () => GanttRenderer
+});
+function GanttRenderer({ ir, dark = false, handleRef }) {
+  const theme = getDiagramTheme(dark);
+  const containerRef = react.useRef(null);
+  const svg = react.useMemo(() => buildGanttSvg(ir, { dark }), [ir, dark]);
+  react.useEffect(() => {
+    if (!handleRef) return;
+    const handle = {
+      getSvgElement: () => svgStringToElement(svg)
+    };
+    handleRef.current = handle;
+    return () => {
+      if (handleRef.current === handle) handleRef.current = null;
+    };
+  }, [handleRef, svg]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "gantt-renderer",
+      style: { width: "100%", background: theme.canvasBg, borderRadius: 12, padding: 12, overflowX: "auto" },
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+var init_GanttRenderer = __esm({
+  "src/components/diagrams/GanttRenderer.tsx"() {
+    init_theme();
+    init_svgBuilders();
+  }
+});
+
+// src/components/diagrams/TimelineRenderer.tsx
+var TimelineRenderer_exports = {};
+__export(TimelineRenderer_exports, {
+  default: () => TimelineRenderer
+});
+function TimelineRenderer({ ir, dark = false, handleRef }) {
+  const theme = getDiagramTheme(dark);
+  const containerRef = react.useRef(null);
+  const svg = react.useMemo(() => buildTimelineSvg(ir, { dark }), [ir, dark]);
+  react.useEffect(() => {
+    if (!handleRef) return;
+    const handle = {
+      getSvgElement: () => svgStringToElement(svg)
+    };
+    handleRef.current = handle;
+    return () => {
+      if (handleRef.current === handle) handleRef.current = null;
+    };
+  }, [handleRef, svg]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "timeline-renderer",
+      style: { width: "100%", background: theme.canvasBg, borderRadius: 12, padding: 12, overflowX: "auto" },
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+var init_TimelineRenderer = __esm({
+  "src/components/diagrams/TimelineRenderer.tsx"() {
+    init_theme();
+    init_svgBuilders();
+  }
+});
+
+// src/components/diagrams/MindmapRenderer.tsx
+var MindmapRenderer_exports = {};
+__export(MindmapRenderer_exports, {
+  default: () => MindmapRenderer
+});
+function radialLayout(root) {
+  const positioned = [];
+  const RING_DISTANCE = 180;
+  const place = (node, depth, startAngle, endAngle) => {
+    const angle = (startAngle + endAngle) / 2;
+    const x = depth === 0 ? 0 : Math.cos(angle) * RING_DISTANCE * depth;
+    const y = depth === 0 ? 0 : Math.sin(angle) * RING_DISTANCE * depth;
+    positioned.push({ id: node.id, node, x, y, depth });
+    if (node.children.length === 0) return;
+    const span = endAngle - startAngle;
+    const slice = span / node.children.length;
+    for (let i = 0; i < node.children.length; i++) {
+      place(node.children[i], depth + 1, startAngle + i * slice, startAngle + (i + 1) * slice);
+    }
+  };
+  place(root, 0, 0, Math.PI * 2);
+  let minX = 0, minY = 0, maxX = 0, maxY = 0;
+  for (const p of positioned) {
+    if (p.x < minX) minX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y > maxY) maxY = p.y;
+  }
+  for (const p of positioned) {
+    p.x = p.x - minX + 200;
+    p.y = p.y - minY + 100;
+  }
+  return { positioned, bounds: { w: maxX - minX + 400, h: maxY - minY + 200 } };
+}
+function MindmapRenderer({ ir, dark = false, handleRef }) {
+  const theme = getDiagramTheme(dark);
+  const containerRef = react.useRef(null);
+  const svg = react.useMemo(() => {
+    const { positioned } = radialLayout(ir.root);
+    const positions = /* @__PURE__ */ new Map();
+    for (const p of positioned) {
+      const isRoot = p.depth === 0;
+      const labelLen = p.node.label.length;
+      const w = Math.max(isRoot ? 100 : 70, labelLen * (isRoot ? 9 : 7) + 40);
+      const h = isRoot ? 44 : 32;
+      positions.set(p.id, { x: p.x, y: p.y, width: w, height: h, depth: p.depth });
+    }
+    return buildMindmapSvg(ir, positions, { dark });
+  }, [ir, dark]);
+  react.useEffect(() => {
+    if (!handleRef) return;
+    const handle = {
+      getSvgElement: () => svgStringToElement(svg)
+    };
+    handleRef.current = handle;
+    return () => {
+      if (handleRef.current === handle) handleRef.current = null;
+    };
+  }, [handleRef, svg]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "mindmap-renderer",
+      style: { width: "100%", background: theme.canvasBg, borderRadius: 12, padding: 12, overflow: "auto" },
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+var init_MindmapRenderer = __esm({
+  "src/components/diagrams/MindmapRenderer.tsx"() {
+    init_theme();
+    init_svgBuilders();
+  }
+});
+
+// src/components/diagrams/ArchitectureRenderer.tsx
+var ArchitectureRenderer_exports = {};
+__export(ArchitectureRenderer_exports, {
+  default: () => ArchitectureRenderer
+});
+function ArchitectureRenderer({ ir, dark = false, handleRef }) {
+  const theme = getDiagramTheme(dark);
+  const containerRef = react.useRef(null);
+  const svg = react.useMemo(() => buildArchitectureSvg(ir, { dark }), [ir, dark]);
+  react.useEffect(() => {
+    if (!handleRef) return;
+    const handle = {
+      getSvgElement: () => svgStringToElement(svg)
+    };
+    handleRef.current = handle;
+    return () => {
+      if (handleRef.current === handle) handleRef.current = null;
+    };
+  }, [handleRef, svg]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "architecture-renderer",
+      style: { width: "100%", background: theme.canvasBg, borderRadius: 12, padding: 12, overflow: "auto" },
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+var init_ArchitectureRenderer = __esm({
+  "src/components/diagrams/ArchitectureRenderer.tsx"() {
+    init_theme();
+    init_svgBuilders();
+  }
+});
+
+// src/components/diagrams/C4Renderer.tsx
+var C4Renderer_exports = {};
+__export(C4Renderer_exports, {
+  default: () => C4Renderer
+});
+function C4Renderer({ ir, dark = false, handleRef }) {
+  const theme = getDiagramTheme(dark);
+  const containerRef = react.useRef(null);
+  const svg = react.useMemo(() => buildC4Svg(ir, { dark }), [ir, dark]);
+  react.useEffect(() => {
+    if (!handleRef) return;
+    const handle = {
+      getSvgElement: () => svgStringToElement(svg)
+    };
+    handleRef.current = handle;
+    return () => {
+      if (handleRef.current === handle) handleRef.current = null;
+    };
+  }, [handleRef, svg]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "c4-renderer",
+      style: { width: "100%", background: theme.canvasBg, borderRadius: 12, padding: 12, overflow: "auto" },
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+var init_C4Renderer = __esm({
+  "src/components/diagrams/C4Renderer.tsx"() {
+    init_theme();
+    init_svgBuilders();
+  }
+});
+
+// src/components/diagrams/GitGraphRenderer.tsx
+var GitGraphRenderer_exports = {};
+__export(GitGraphRenderer_exports, {
+  default: () => GitGraphRenderer
+});
+function GitGraphRenderer({ ir, dark = false, handleRef }) {
+  const theme = getDiagramTheme(dark);
+  const containerRef = react.useRef(null);
+  const svg = react.useMemo(() => buildGitGraphSvg(ir, { dark }), [ir, dark]);
+  react.useEffect(() => {
+    if (!handleRef) return;
+    const handle = {
+      getSvgElement: () => svgStringToElement(svg)
+    };
+    handleRef.current = handle;
+    return () => {
+      if (handleRef.current === handle) handleRef.current = null;
+    };
+  }, [handleRef, svg]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "gitgraph-renderer",
+      style: { width: "100%", background: theme.canvasBg, borderRadius: 12, padding: 12, overflow: "auto" },
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+var init_GitGraphRenderer = __esm({
+  "src/components/diagrams/GitGraphRenderer.tsx"() {
+    init_theme();
+    init_svgBuilders();
+  }
+});
+
+// src/utils/diagrams/parser.ts
+var HEADER_KEYWORDS = [
+  { re: /^(flowchart|graph)\b/i, type: "flowchart" },
+  { re: /^erdiagram\b/i, type: "er" },
+  { re: /^sequencediagram\b/i, type: "sequence" },
+  { re: /^classdiagram\b/i, type: "class" },
+  { re: /^statediagram(-v2)?\b/i, type: "state" },
+  { re: /^gantt\b/i, type: "gantt" },
+  { re: /^pie\b/i, type: "pie" },
+  { re: /^quadrantchart\b/i, type: "quadrant" },
+  { re: /^mindmap\b/i, type: "mindmap" },
+  { re: /^gitgraph\b/i, type: "gitgraph" },
+  { re: /^timeline\b/i, type: "timeline" },
+  { re: /^journey\b/i, type: "journey" },
+  { re: /^c4(context|container|component|deployment)/i, type: "c4" },
+  { re: /^architecture(-beta)?\b/i, type: "architecture" }
+];
+async function detectDiagramType(source) {
+  const clean = source.replace(/^/, "");
+  const firstLine = clean.split("\n").map((l) => l.trim()).find((l) => l.length > 0 && !l.startsWith("%%"));
+  if (!firstLine) return null;
+  for (const { re, type } of HEADER_KEYWORDS) {
+    if (re.test(firstLine)) return type;
+  }
+  return "unsupported";
+}
+async function parseToIR(source) {
+  const type = await detectDiagramType(source);
+  if (type === null) {
+    return { ok: false, source, error: "Empty or whitespace-only source" };
+  }
+  if (type === "unsupported") {
+    return { ok: false, source, error: "Unrecognized diagram type" };
+  }
+  try {
+    switch (type) {
+      case "flowchart":
+        return { ok: true, type, ir: parseFlowchart(source) };
+      case "pie":
+        return { ok: true, type, ir: parsePieChart(source) };
+      case "quadrant":
+        return { ok: true, type, ir: parseQuadrantChart(source) };
+      case "journey":
+        return { ok: true, type, ir: parseJourney(source) };
+      case "sequence":
+        return { ok: true, type, ir: parseSequence(source) };
+      case "class":
+        return { ok: true, type, ir: parseClassDiagram(source) };
+      case "state":
+        return { ok: true, type, ir: parseStateDiagram(source) };
+      case "er":
+        return { ok: true, type, ir: parseMermaidERDiagram(source) };
+      case "gantt":
+        return { ok: true, type, ir: parseGantt(source) };
+      case "timeline":
+        return { ok: true, type, ir: parseTimeline(source) };
+      case "mindmap":
+        return { ok: true, type, ir: parseMindmap(source) };
+      case "architecture":
+        return { ok: true, type, ir: parseArchitecture(source) };
+      case "c4":
+        return { ok: true, type, ir: parseC4(source) };
+      case "gitgraph":
+        return { ok: true, type, ir: parseGitGraph(source) };
+    }
+    return { ok: false, source, error: `Unhandled diagram type: ${String(type)}` };
+  } catch (err) {
+    return {
+      ok: false,
+      source,
+      error: err instanceof Error ? err.message : String(err)
+    };
+  }
+}
+var HEADER_RE = /^(?:flowchart|graph)\s+(TB|TD|BT|LR|RL)\b/i;
+var SUBGRAPH_OPEN_RE = /^subgraph\s+([\w-]+)(?:\s*\[(.+?)\])?/i;
+var EDGE_LINE_REGEX = /-{2,}>|-{2,}|-\.-+>|\.-+>|={2,}>|-{2,}-|=={2,}|~~~/;
+function parseFlowchart(source) {
+  const rawLines = source.split("\n");
+  if (rawLines.length === 0) throw new Error("Empty flowchart source");
+  let direction = "TB";
+  const nodes = /* @__PURE__ */ new Map();
+  const edges = [];
+  const subgraphs = [];
+  const subgraphStack = [];
+  const ensureNode = (decl) => {
+    const existing = nodes.get(decl.id);
+    if (existing) {
+      if (decl.label && (decl.label !== decl.id || !existing.label)) existing.label = decl.label;
+      if (decl.kind !== "plain" && existing.kind === "plain") existing.kind = decl.kind;
+      if (decl.icon) {
+        existing.icon = decl.icon;
+        existing.kind = "icon";
+      }
+      return existing;
+    }
+    const node = {
+      id: decl.id,
+      label: decl.label,
+      kind: decl.icon ? "icon" : decl.kind
+    };
+    if (decl.icon) node.icon = decl.icon;
+    if (subgraphStack.length > 0) node.subgraph = subgraphStack[subgraphStack.length - 1];
+    nodes.set(decl.id, node);
+    return node;
+  };
+  for (let i = 0; i < rawLines.length; i++) {
+    const line = rawLines[i].trim();
+    if (!line || line.startsWith("%%")) continue;
+    if (i === 0 || nodes.size === 0 && edges.length === 0 && subgraphs.length === 0) {
+      const m = line.match(HEADER_RE);
+      if (m) {
+        const dir = m[1].toUpperCase();
+        direction = dir === "TD" ? "TB" : dir;
+        continue;
+      }
+    }
+    const subOpen = line.match(SUBGRAPH_OPEN_RE);
+    if (subOpen) {
+      const id = subOpen[1];
+      const label = subOpen[2] ?? id;
+      subgraphs.push({ id, label });
+      subgraphStack.push(id);
+      continue;
+    }
+    if (/^end\b/i.test(line)) {
+      subgraphStack.pop();
+      continue;
+    }
+    if (/^(direction|class|classDef|style|linkStyle|click)\b/i.test(line)) continue;
+    if (EDGE_LINE_REGEX.test(line)) {
+      const edge = parseEdge(line);
+      if (edge) {
+        const fromTokens = edge.from.split(/\s*&\s*/).filter(Boolean);
+        const toTokens = edge.to.split(/\s*&\s*/).filter(Boolean);
+        for (const f of fromTokens) {
+          const fromDecl = parseNodeDecl(f);
+          if (!fromDecl.id) continue;
+          ensureNode(fromDecl);
+          for (const t of toTokens) {
+            const toDecl = parseNodeDecl(t);
+            if (!toDecl.id) continue;
+            ensureNode(toDecl);
+            const e = { source: fromDecl.id, target: toDecl.id, kind: edge.kind };
+            if (edge.label) e.label = edge.label;
+            edges.push(e);
+          }
+        }
+        continue;
+      }
+    }
+    const decl = parseNodeDecl(line);
+    if (decl.id) ensureNode(decl);
+  }
+  for (const sg of subgraphs) nodes.delete(sg.id);
+  return {
+    type: "flowchart",
+    direction,
+    nodes: [...nodes.values()],
+    edges,
+    subgraphs
+  };
+}
+function splitClassDirective(text) {
+  const idx = text.indexOf(":::");
+  if (idx === -1) return { core: text };
+  const core = text.slice(0, idx).trim();
+  const rest = text.slice(idx + 3).trim();
+  const iconMatch = rest.match(/(?:^|[\s,])icon\s*=\s*([\w:_-]+)/);
+  return { core, icon: iconMatch?.[1] };
+}
+function parseNodeDecl(text) {
+  const trimmed = text.trim();
+  const { core, icon } = splitClassDirective(trimmed);
+  const shapes = [
+    { re: /^([\w-]+)\(\(([^)]*)\)\)$/, kind: "user" },
+    // ((circle))
+    { re: /^([\w-]+)\[\(([^)]*)\)\]$/, kind: "database" },
+    // [(cylinder)]
+    { re: /^([\w-]+)\[\[([^\]]*)\]\]$/, kind: "queue" },
+    // [[subroutine]]
+    { re: /^([\w-]+)\[\/([^/]*)\/\]$/, kind: "process" },
+    // [/parallelogram/]
+    { re: /^([\w-]+)\[\\([^\\]*)\\\]$/, kind: "process" },
+    // [\..\]
+    { re: /^([\w-]+)\{([^}]*)\}$/, kind: "decision" },
+    // {decision}
+    { re: /^([\w-]+)>([^\]]*)\]$/, kind: "plain" },
+    // >tag]
+    { re: /^([\w-]+)\(([^)]*)\)$/, kind: "service" },
+    // (rounded)
+    { re: /^([\w-]+)\[([^\]]*)\]$/, kind: "process" }
+    // [rect]
+  ];
+  for (const { re, kind } of shapes) {
+    const m = core.match(re);
+    if (m) {
+      return {
+        id: m[1],
+        label: stripQuotes(m[2]) || m[1],
+        kind,
+        icon
+      };
+    }
+  }
+  const bare = core.match(/^([\w-]+)$/);
+  if (bare) {
+    return { id: bare[1], label: bare[1], kind: "plain", icon };
+  }
+  return { id: "", label: "", kind: "plain" };
+}
+function stripQuotes(s) {
+  if (s.startsWith('"') && s.endsWith('"') || s.startsWith("'") && s.endsWith("'")) {
+    return s.slice(1, -1);
+  }
+  return s;
+}
+function parseEdge(line) {
+  const labeled = [
+    { re: /^(.+?)\s*--\s*([^-][^|]*?)\s*-{1,2}>\s*(.+)$/, kind: "solid" },
+    { re: /^(.+?)\s*-\.\s*([^.][^|]*?)\s*\.-+>\s*(.+)$/, kind: "dashed" },
+    { re: /^(.+?)\s*==\s*([^=][^|]*?)\s*={1,2}>\s*(.+)$/, kind: "thick" }
+  ];
+  for (const { re, kind } of labeled) {
+    const m = line.match(re);
+    if (m) return { from: m[1].trim(), to: m[3].trim(), label: m[2].trim(), kind };
+  }
+  const unlabeled = [
+    { re: /^(.+?)\s*~~~\s*(?:\|([^|]+)\|\s*)?(.+)$/, kind: "invisible" },
+    { re: /^(.+?)\s*-\.-+>\s*(?:\|([^|]+)\|\s*)?(.+)$/, kind: "dashed" },
+    { re: /^(.+?)\s*={2,}>\s*(?:\|([^|]+)\|\s*)?(.+)$/, kind: "thick" },
+    { re: /^(.+?)\s*-{2,}>\s*(?:\|([^|]+)\|\s*)?(.+)$/, kind: "solid" },
+    { re: /^(.+?)\s*-{2,}\s*(?:\|([^|]+)\|\s*)?(.+)$/, kind: "solid" }
+  ];
+  for (const { re, kind } of unlabeled) {
+    const m = line.match(re);
+    if (m) {
+      const label = m[2]?.trim();
+      return { from: m[1].trim(), to: m[3].trim(), label: label || void 0, kind };
+    }
+  }
+  return null;
+}
+var PIE_SLICE_RE = /^"([^"]+)"\s*:\s*([\d.]+)/;
+function parsePieChart(source) {
+  const lines = source.split("\n").map((l) => l.trim());
+  const ir = { type: "pie", slices: [] };
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (!line || line.startsWith("%%")) continue;
+    if (/^pie\b/i.test(line)) {
+      if (/\bshowData\b/i.test(line)) ir.showData = true;
+      continue;
+    }
+    const titleMatch = line.match(/^title\s+(.+)$/i);
+    if (titleMatch) {
+      ir.title = titleMatch[1].trim();
+      continue;
+    }
+    const sliceMatch = line.match(PIE_SLICE_RE);
+    if (sliceMatch) {
+      const value = parseFloat(sliceMatch[2]);
+      if (!isNaN(value)) ir.slices.push({ label: sliceMatch[1], value });
+    }
+  }
+  return ir;
+}
+var QUADRANT_POINT_RE = /^([^:]+):\s*\[\s*([\d.]+)\s*,\s*([\d.]+)\s*\]/;
+function parseQuadrantChart(source) {
+  const lines = source.split("\n").map((l) => l.trim());
+  const ir = { type: "quadrant", points: [] };
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (!line || line.startsWith("%%")) continue;
+    if (/^quadrantchart\b/i.test(line)) continue;
+    const titleMatch = line.match(/^title\s+(.+)$/i);
+    if (titleMatch) {
+      ir.title = titleMatch[1].trim();
+      continue;
+    }
+    const xAxisMatch = line.match(/^x-axis\s+(.+?)\s*-->\s*(.+)$/i);
+    if (xAxisMatch) {
+      ir.xAxisLabel = { low: xAxisMatch[1].trim(), high: xAxisMatch[2].trim() };
+      continue;
+    }
+    const yAxisMatch = line.match(/^y-axis\s+(.+?)\s*-->\s*(.+)$/i);
+    if (yAxisMatch) {
+      ir.yAxisLabel = { low: yAxisMatch[1].trim(), high: yAxisMatch[2].trim() };
+      continue;
+    }
+    const qMatch = line.match(/^quadrant-([1-4])\s+(.+)$/i);
+    if (qMatch) {
+      ir.quadrantLabels = ir.quadrantLabels ?? {};
+      ir.quadrantLabels[`q${qMatch[1]}`] = qMatch[2].trim();
+      continue;
+    }
+    const pt = line.match(QUADRANT_POINT_RE);
+    if (pt) {
+      const x = parseFloat(pt[2]);
+      const y = parseFloat(pt[3]);
+      if (!isNaN(x) && !isNaN(y)) {
+        ir.points.push({ label: pt[1].trim(), x, y });
+      }
+    }
+  }
+  return ir;
+}
+var JOURNEY_TASK_RE = /^([^:]+?)\s*:\s*([\d.]+)\s*:\s*(.+)$/;
+function parseJourney(source) {
+  const lines = source.split("\n").map((l) => l.replace(/^\s+/, ""));
+  const ir = { type: "journey", sections: [] };
+  let currentSection = null;
+  for (const rawLine of lines) {
+    const line = rawLine.trimEnd();
+    if (!line || line.startsWith("%%")) continue;
+    if (/^journey\b/i.test(line)) continue;
+    const titleMatch = line.match(/^title\s+(.+)$/i);
+    if (titleMatch) {
+      ir.title = titleMatch[1].trim();
+      continue;
+    }
+    const sectionMatch = line.match(/^section\s+(.+)$/i);
+    if (sectionMatch) {
+      currentSection = { title: sectionMatch[1].trim(), tasks: [] };
+      ir.sections.push(currentSection);
+      continue;
+    }
+    const taskMatch = line.match(JOURNEY_TASK_RE);
+    if (taskMatch && currentSection) {
+      const score = parseFloat(taskMatch[2]);
+      const actors = taskMatch[3].split(",").map((a) => a.trim()).filter(Boolean);
+      currentSection.tasks.push({ label: taskMatch[1].trim(), score, actors });
+    }
+  }
+  return ir;
+}
+var SEQ_ARROW_TOKENS = [
+  { token: "-->>", arrow: "reply" },
+  { token: "->>", arrow: "sync" },
+  { token: "-->", arrow: "reply" },
+  { token: "->", arrow: "sync" },
+  { token: "-x", arrow: "cross" },
+  { token: "-)", arrow: "async" }
+];
+function matchSequenceArrow(line) {
+  let bestIdx = -1;
+  let bestToken = null;
+  for (const t of SEQ_ARROW_TOKENS) {
+    const idx = line.indexOf(t.token);
+    if (idx === -1) continue;
+    if (bestIdx === -1 || idx < bestIdx || idx === bestIdx && t.token.length > (bestToken?.token.length ?? 0)) {
+      bestIdx = idx;
+      bestToken = t;
+    }
+  }
+  if (bestIdx === -1 || !bestToken) return null;
+  const from = line.slice(0, bestIdx).trim();
+  const rest = line.slice(bestIdx + bestToken.token.length);
+  const colonIdx = rest.indexOf(":");
+  if (colonIdx === -1) return null;
+  let to = rest.slice(0, colonIdx).trim();
+  const label = rest.slice(colonIdx + 1).trim();
+  if (!from || !to || !label) return null;
+  if (to.startsWith("+") || to.startsWith("-")) to = to.slice(1).trim();
+  return { from, to, arrow: bestToken.arrow, label };
+}
+function parseSequence(source) {
+  const lines = source.split("\n").map((l) => l.trim());
+  const ir = { type: "sequence", participants: [], steps: [] };
+  const ensureParticipant = (id, label) => {
+    const existing = ir.participants.find((p) => p.id === id);
+    if (existing) {
+      if (label && existing.label === existing.id) existing.label = label;
+      return;
+    }
+    ir.participants.push({ id, label: label ?? id });
+  };
+  for (const line of lines) {
+    if (!line || line.startsWith("%%")) continue;
+    if (/^sequencediagram\b/i.test(line)) continue;
+    if (/^(loop|alt|opt|par|else|critical|break|rect|end|activate|deactivate|autonumber|box)\b/i.test(line)) continue;
+    const titleMatch = line.match(/^title\s+(.+)$/i);
+    if (titleMatch) {
+      ir.title = titleMatch[1].trim();
+      continue;
+    }
+    const partMatch = line.match(/^(?:participant|actor)\s+(.+)$/i);
+    if (partMatch) {
+      const rest = partMatch[1].trim();
+      const asMatch = rest.match(/^(.+?)\s+as\s+(.+)$/i);
+      if (asMatch) {
+        ensureParticipant(stripQuotes(asMatch[1].trim()), stripQuotes(asMatch[2].trim()));
+      } else {
+        ensureParticipant(stripQuotes(rest));
+      }
+      continue;
+    }
+    const noteMatch = line.match(/^note\s+(left of|right of|over)\s+([^:]+)\s*:\s*(.+)$/i);
+    if (noteMatch) {
+      const sideRaw = noteMatch[1].toLowerCase();
+      const side = sideRaw.startsWith("left") ? "left" : sideRaw.startsWith("right") ? "right" : "over";
+      const participants = noteMatch[2].split(",").map((p) => p.trim()).filter(Boolean);
+      participants.forEach((p) => ensureParticipant(p));
+      const note = { kind: "note", side, participants, text: noteMatch[3].trim() };
+      ir.steps.push(note);
+      continue;
+    }
+    const arrowMatch = matchSequenceArrow(line);
+    if (arrowMatch) {
+      ensureParticipant(arrowMatch.from);
+      ensureParticipant(arrowMatch.to);
+      const msg = {
+        kind: "message",
+        from: arrowMatch.from,
+        to: arrowMatch.to,
+        arrow: arrowMatch.arrow,
+        label: arrowMatch.label
+      };
+      ir.steps.push(msg);
+    }
+  }
+  return ir;
+}
+var CLASS_VISIBILITY = {
+  "+": "public",
+  "-": "private",
+  "#": "protected",
+  "~": "package"
+};
+var CLASS_REL_PATTERNS = [
+  { re: /^([\w-]+)\s*<\|--\s*([\w-]+)$/, kind: "inheritance", reversed: true },
+  { re: /^([\w-]+)\s*--\|>\s*([\w-]+)$/, kind: "inheritance" },
+  { re: /^([\w-]+)\s*<\|\.\.\s*([\w-]+)$/, kind: "realization", reversed: true },
+  { re: /^([\w-]+)\s*\.\.\|>\s*([\w-]+)$/, kind: "realization" },
+  { re: /^([\w-]+)\s*\*--\s*([\w-]+)$/, kind: "composition" },
+  { re: /^([\w-]+)\s*o--\s*([\w-]+)$/, kind: "aggregation" },
+  { re: /^([\w-]+)\s*<\.\.\s*([\w-]+)$/, kind: "dependency", reversed: true },
+  { re: /^([\w-]+)\s*\.\.>\s*([\w-]+)$/, kind: "dependency" },
+  { re: /^([\w-]+)\s*--\s*([\w-]+)$/, kind: "association" }
+];
+function parseClassDiagram(source) {
+  const lines = source.split("\n").map((l) => l.trim());
+  const classes = /* @__PURE__ */ new Map();
+  const relations = [];
+  const ensureClass = (id) => {
+    let cls = classes.get(id);
+    if (!cls) {
+      cls = { id, label: id, members: [] };
+      classes.set(id, cls);
+    }
+    return cls;
+  };
+  let currentClassBody = null;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (!line || line.startsWith("%%")) continue;
+    if (/^classdiagram\b/i.test(line)) continue;
+    if (currentClassBody) {
+      if (/^\}\s*$/.test(line)) {
+        currentClassBody = null;
+        continue;
+      }
+      const stereotype = matchStereotype(line);
+      if (stereotype) {
+        ensureClass(currentClassBody).stereotype = stereotype;
+        continue;
+      }
+      const member = parseClassMember(line);
+      if (member) ensureClass(currentClassBody).members.push(member);
+      continue;
+    }
+    const sameLine = line.match(/^class\s+([\w-]+)\s*\{(.*)\}\s*$/);
+    if (sameLine) {
+      const cls = ensureClass(sameLine[1]);
+      const inner = sameLine[2].split(/[;\n]/).map((s) => s.trim()).filter(Boolean);
+      for (const part of inner) {
+        const stereotype = matchStereotype(part);
+        if (stereotype) {
+          cls.stereotype = stereotype;
+          continue;
+        }
+        const m = parseClassMember(part);
+        if (m) cls.members.push(m);
+      }
+      continue;
+    }
+    const open = line.match(/^class\s+([\w-]+)\s*\{$/);
+    if (open) {
+      ensureClass(open[1]);
+      currentClassBody = open[1];
+      continue;
+    }
+    const decl = line.match(/^class\s+([\w-]+)$/);
+    if (decl) {
+      ensureClass(decl[1]);
+      continue;
+    }
+    const memberDecl = line.match(/^([\w-]+)\s*:\s*(.+)$/);
+    if (memberDecl && !line.includes("-->") && !line.includes("--")) {
+      const stereotype = matchStereotype(memberDecl[2]);
+      if (stereotype) {
+        ensureClass(memberDecl[1]).stereotype = stereotype;
+        continue;
+      }
+      const m = parseClassMember(memberDecl[2]);
+      if (m) ensureClass(memberDecl[1]).members.push(m);
+      continue;
+    }
+    let labelPart;
+    let relLine = line;
+    const labelMatch = line.match(/^(.+?)\s*:\s*(.+)$/);
+    if (labelMatch && /(<\|--|--\|>|<\|\.\.|\.\.\|>|\*--|o--|<\.\.|\.\.>|--)/.test(labelMatch[1])) {
+      relLine = labelMatch[1];
+      labelPart = labelMatch[2].trim();
+    }
+    for (const { re, kind, reversed } of CLASS_REL_PATTERNS) {
+      const m = relLine.match(re);
+      if (m) {
+        const a = m[1];
+        const b = m[2];
+        ensureClass(a);
+        ensureClass(b);
+        relations.push({
+          source: reversed ? b : a,
+          target: reversed ? a : b,
+          kind,
+          label: labelPart
+        });
+        break;
+      }
+    }
+  }
+  return { type: "class", classes: [...classes.values()], relations };
+}
+function matchStereotype(text) {
+  const m = text.trim().match(/^<<\s*([^>]+?)\s*>>$/);
+  return m ? m[1] : void 0;
+}
+function parseClassMember(text) {
+  const t = text.trim();
+  if (!t) return null;
+  let visibility;
+  let body = t;
+  const first = body[0];
+  if (first in CLASS_VISIBILITY) {
+    visibility = CLASS_VISIBILITY[first];
+    body = body.slice(1).trim();
+  }
+  const methodMatch = body.match(/^([\w-]+)\(([^)]*)\)(?:\s*([\w<>[\]]+))?$/);
+  if (methodMatch) {
+    return {
+      kind: "method",
+      visibility,
+      name: methodMatch[1],
+      parameters: methodMatch[2] || void 0,
+      returnType: methodMatch[3] || void 0
+    };
+  }
+  const colonMatch = body.match(/^([\w-]+)\s*:\s*([\w<>[\]]+)$/);
+  if (colonMatch) {
+    return { kind: "attribute", visibility, name: colonMatch[1], returnType: colonMatch[2] };
+  }
+  const typeNameMatch = body.match(/^([\w<>[\]]+)\s+([\w-]+)$/);
+  if (typeNameMatch) {
+    return { kind: "attribute", visibility, name: typeNameMatch[2], returnType: typeNameMatch[1] };
+  }
+  return { kind: "attribute", visibility, name: body };
+}
+function parseStateDiagram(source) {
+  const lines = source.split("\n").map((l) => l.trim());
+  const states = /* @__PURE__ */ new Map();
+  const transitions = [];
+  const parentStack = [];
+  const currentParent = () => parentStack.length > 0 ? parentStack[parentStack.length - 1] : void 0;
+  const markerId = (kind, parent) => parent ? `__${kind}_${parent}` : `__${kind}`;
+  const ensureMarker = (kind) => {
+    const parent = currentParent();
+    const id = markerId(kind, parent);
+    let s = states.get(id);
+    if (!s) {
+      s = { id, label: "", kind, parent };
+      states.set(id, s);
+    }
+    return s;
+  };
+  const ensureState = (id) => {
+    let s = states.get(id);
+    if (s) return s;
+    s = { id, label: id, kind: "state", parent: currentParent() };
+    states.set(id, s);
+    return s;
+  };
+  for (const line of lines) {
+    if (!line || line.startsWith("%%")) continue;
+    if (/^statediagram(-v2)?\b/i.test(line)) continue;
+    const compositeOpen = line.match(/^state\s+([\w-]+)\s*\{$/);
+    if (compositeOpen) {
+      const id = compositeOpen[1];
+      const existing = states.get(id);
+      if (existing) {
+        existing.kind = "composite";
+      } else {
+        states.set(id, { id, label: id, kind: "composite", parent: currentParent() });
+      }
+      parentStack.push(id);
+      continue;
+    }
+    if (line === "}") {
+      parentStack.pop();
+      continue;
+    }
+    const arrow = line.match(/^(\[\*\]|[\w-]+)\s*-->\s*(\[\*\]|[\w-]+)(?:\s*:\s*(.+))?$/);
+    if (arrow) {
+      const src = arrow[1] === "[*]" ? ensureMarker("start") : ensureState(arrow[1]);
+      const tgt = arrow[2] === "[*]" ? ensureMarker("end") : ensureState(arrow[2]);
+      transitions.push({
+        source: src.id,
+        target: tgt.id,
+        label: arrow[3]?.trim(),
+        parent: currentParent()
+      });
+      continue;
+    }
+    const stateLabel = line.match(/^([\w-]+)\s*:\s*(.+)$/);
+    if (stateLabel) {
+      const s = ensureState(stateLabel[1]);
+      s.label = stateLabel[2].trim();
+      continue;
+    }
+    if (/^[\w-]+$/.test(line)) ensureState(line);
+  }
+  return { type: "state", states: [...states.values()], transitions };
+}
+function parseMermaidERDiagram(source) {
+  const lines = source.split("\n").map((l) => l.trim());
+  const tables = /* @__PURE__ */ new Map();
+  const relations = [];
+  const ensureTable = (name) => {
+    let t = tables.get(name);
+    if (!t) {
+      t = { name, columns: [] };
+      tables.set(name, t);
+    }
+    return t;
+  };
+  let currentTableBody = null;
+  for (const line of lines) {
+    if (!line || line.startsWith("%%")) continue;
+    if (/^erdiagram\b/i.test(line)) continue;
+    if (currentTableBody) {
+      if (/^\}\s*$/.test(line)) {
+        currentTableBody = null;
+        continue;
+      }
+      const col = line.match(/^([\w-]+)\s+([\w-]+)(?:\s+(.+))?$/);
+      if (col) {
+        const flags = (col[3] ?? "").toUpperCase();
+        const column = {
+          name: col[2],
+          type: col[1],
+          isPK: /\bPK\b/.test(flags),
+          isFK: /\bFK\b/.test(flags),
+          isNullable: !/\bNOT NULL\b/.test(flags),
+          isUnique: /\bUK\b/.test(flags) || /\bUNIQUE\b/.test(flags)
+        };
+        ensureTable(currentTableBody).columns.push(column);
+      }
+      continue;
+    }
+    const blockOpen = line.match(/^([A-Z][\w-]*)\s*\{$/);
+    if (blockOpen) {
+      ensureTable(blockOpen[1]);
+      currentTableBody = blockOpen[1];
+      continue;
+    }
+    const rel = line.match(/^([A-Z][\w-]*)\s+([|}{o\-.]+)\s+([A-Z][\w-]*)\s*:\s*(.+)$/);
+    if (rel) {
+      const fromTable = rel[1];
+      const toTable = rel[3];
+      const cardinality = rel[2];
+      ensureTable(fromTable);
+      ensureTable(toTable);
+      relations.push({
+        fromTable,
+        fromCol: rel[4].trim(),
+        toTable,
+        toCol: rel[4].trim(),
+        nullable: cardinality.includes("o")
+      });
+    }
+  }
+  const schema = {
+    tables: [...tables.values()],
+    relations,
+    inputFormat: "unknown"
+  };
+  return { type: "er", schema };
+}
+var GANTT_TASK_LINE_RE = /^([^:]+?)\s*:\s*(.+)$/;
+var STATUS_TOKENS = {
+  done: "done",
+  active: "active",
+  crit: "crit",
+  milestone: "milestone"
+};
+function parseGantt(source) {
+  const lines = source.split("\n").map((l) => l.trim());
+  const ir = { type: "gantt", tasks: [] };
+  const intermediates = [];
+  let currentSection;
+  let anonCounter = 0;
+  for (const line of lines) {
+    if (!line || line.startsWith("%%")) continue;
+    if (/^gantt\b/i.test(line)) continue;
+    const titleMatch = line.match(/^title\s+(.+)$/i);
+    if (titleMatch) {
+      ir.title = titleMatch[1].trim();
+      continue;
+    }
+    const dateMatch = line.match(/^dateFormat\s+(.+)$/i);
+    if (dateMatch) {
+      ir.dateFormat = dateMatch[1].trim();
+      continue;
+    }
+    const axisMatch = line.match(/^axisFormat\s+(.+)$/i);
+    if (axisMatch) {
+      ir.axisFormat = axisMatch[1].trim();
+      continue;
+    }
+    const sectionMatch = line.match(/^section\s+(.+)$/i);
+    if (sectionMatch) {
+      currentSection = sectionMatch[1].trim();
+      continue;
+    }
+    if (/^(excludes|includes|todayMarker|click|tickInterval|weekday)\b/i.test(line)) continue;
+    const taskMatch = line.match(GANTT_TASK_LINE_RE);
+    if (!taskMatch) continue;
+    const label = taskMatch[1].trim();
+    const parts = taskMatch[2].split(",").map((p) => p.trim()).filter(Boolean);
+    if (parts.length === 0) continue;
+    let status = "default";
+    let id;
+    let startSpec;
+    let durationOrEnd;
+    for (const part of parts) {
+      const lower = part.toLowerCase();
+      if (lower in STATUS_TOKENS) {
+        status = STATUS_TOKENS[lower];
+        continue;
+      }
+      if (id === void 0 && /^[\w-]+$/.test(part) && !isDateLike(part) && !/^\d/.test(part)) {
+        id = part;
+        continue;
+      }
+      if (startSpec === void 0) {
+        startSpec = part;
+        continue;
+      }
+      if (durationOrEnd === void 0) {
+        durationOrEnd = part;
+        continue;
+      }
+    }
+    if (!startSpec || !durationOrEnd) continue;
+    intermediates.push({
+      id: id ?? `__gantt_${anonCounter++}`,
+      label,
+      status,
+      startSpec,
+      durationOrEnd,
+      section: currentSection
+    });
+  }
+  const byId = /* @__PURE__ */ new Map();
+  for (const it of intermediates) {
+    const start = resolveGanttDate(it.startSpec, byId);
+    if (!start) continue;
+    let end = resolveGanttDate(it.durationOrEnd, byId);
+    if (!end) {
+      end = applyGanttDuration(start, it.durationOrEnd);
+    }
+    if (!end) continue;
+    if (it.status === "milestone") end = start;
+    const task = {
+      id: it.id,
+      label: it.label,
+      start: toIsoDay(start),
+      end: toIsoDay(end),
+      status: it.status,
+      section: it.section
+    };
+    ir.tasks.push(task);
+    byId.set(it.id, task);
+  }
+  return ir;
+}
+function isDateLike(s) {
+  return /^\d{4}-\d{2}-\d{2}/.test(s);
+}
+function resolveGanttDate(spec, byId) {
+  if (isDateLike(spec)) {
+    const d = new Date(spec);
+    return isNaN(d.getTime()) ? null : d;
+  }
+  const after = spec.match(/^after\s+(.+)$/i);
+  if (after) {
+    const refIds = after[1].split(/\s+/);
+    let max = null;
+    for (const refId of refIds) {
+      const ref = byId.get(refId);
+      if (!ref) continue;
+      const d = new Date(ref.end);
+      if (!max || d.getTime() > max.getTime()) max = d;
+    }
+    return max;
+  }
+  return null;
+}
+function applyGanttDuration(start, dur) {
+  const m = dur.match(/^(\d+(?:\.\d+)?)\s*(d|h|w|m|y)$/i);
+  if (!m) return null;
+  const n = parseFloat(m[1]);
+  const unit = m[2].toLowerCase();
+  const result = new Date(start);
+  switch (unit) {
+    case "h":
+      result.setHours(result.getHours() + n);
+      break;
+    case "d":
+      result.setDate(result.getDate() + n);
+      break;
+    case "w":
+      result.setDate(result.getDate() + n * 7);
+      break;
+    case "m":
+      result.setMonth(result.getMonth() + n);
+      break;
+    case "y":
+      result.setFullYear(result.getFullYear() + n);
+      break;
+    default:
+      return null;
+  }
+  return result;
+}
+function toIsoDay(d) {
+  return d.toISOString();
+}
+function parseTimeline(source) {
+  const lines = source.split("\n");
+  const ir = { type: "timeline", events: [] };
+  let currentSection;
+  let counter = 0;
+  for (const rawLine of lines) {
+    const line = rawLine.trim();
+    if (!line || line.startsWith("%%")) continue;
+    if (/^timeline\b/i.test(line)) continue;
+    const titleMatch = line.match(/^title\s+(.+)$/i);
+    if (titleMatch) {
+      ir.title = titleMatch[1].trim();
+      continue;
+    }
+    const sectionMatch = line.match(/^section\s+(.+)$/i);
+    if (sectionMatch) {
+      currentSection = sectionMatch[1].trim();
+      continue;
+    }
+    const parts = line.split(":").map((p) => p.trim()).filter(Boolean);
+    if (parts.length < 2) continue;
+    const period = parts[0];
+    for (let i = 1; i < parts.length; i++) {
+      const event = {
+        id: `__tl_${counter++}`,
+        period,
+        text: parts[i],
+        section: currentSection
+      };
+      ir.events.push(event);
+    }
+  }
+  return ir;
+}
+var MINDMAP_SHAPE_PATTERNS = [
+  { re: /^([\w-]*)\(\(([^)]*)\)\)$/, shape: "circle" },
+  // ((text))
+  { re: /^([\w-]*)\)\)([^(]*)\(\($/, shape: "bang" },
+  // ))text(( bang
+  { re: /^([\w-]*)\)([^(]*)\($/, shape: "cloud" },
+  // )text( cloud
+  { re: /^([\w-]*)\{\{([^}]*)\}\}$/, shape: "hexagon" },
+  // {{text}}
+  { re: /^([\w-]*)\(([^)]*)\)$/, shape: "rounded" },
+  // (text)
+  { re: /^([\w-]*)\[([^\]]*)\]$/, shape: "square" }
+  // [text]
+];
+function parseMindmap(source) {
+  const rawLines = source.split("\n");
+  const stripped = [];
+  let inHeader = true;
+  for (const line of rawLines) {
+    if (line.trim().length === 0) continue;
+    if (inHeader && /^\s*mindmap\b/i.test(line)) {
+      inHeader = false;
+      continue;
+    }
+    inHeader = false;
+    if (line.trim().startsWith("%%")) continue;
+    const indent = line.match(/^\s*/)?.[0]?.length ?? 0;
+    stripped.push({ indent, raw: line.trim() });
+  }
+  if (stripped.length === 0) {
+    return {
+      type: "mindmap",
+      root: { id: "__mm_0", label: "Mindmap", shape: "default", children: [] }
+    };
+  }
+  let counter = 0;
+  const makeNode = (raw) => {
+    let label = raw;
+    let shape = "default";
+    let icon;
+    const iconMatch = label.match(/^(.*?)\s*::icon\(([^)]+)\)\s*$/);
+    if (iconMatch) {
+      label = iconMatch[1].trim();
+      icon = iconMatch[2].trim();
+    }
+    for (const { re, shape: s } of MINDMAP_SHAPE_PATTERNS) {
+      const m = label.match(re);
+      if (m) {
+        label = m[2].trim() || m[1].trim();
+        shape = s;
+        break;
+      }
+    }
+    const node = {
+      id: `__mm_${counter++}`,
+      label,
+      shape,
+      children: []
+    };
+    if (icon) node.icon = icon;
+    return node;
+  };
+  const rootEntry = stripped[0];
+  const root = makeNode(rootEntry.raw);
+  const stack = [{ indent: rootEntry.indent, node: root }];
+  for (let i = 1; i < stripped.length; i++) {
+    const { indent, raw } = stripped[i];
+    while (stack.length > 0 && stack[stack.length - 1].indent >= indent) stack.pop();
+    const parent = stack.length > 0 ? stack[stack.length - 1].node : root;
+    const node = makeNode(raw);
+    parent.children.push(node);
+    stack.push({ indent, node });
+  }
+  return { type: "mindmap", root };
+}
+var ARCH_DECL_RE = /^(group|service)\s+([\w-]+)\s*(?:\(([^)]+)\))?\s*(?:\[([^\]]+)\])?\s*(?:in\s+([\w-]+))?\s*$/i;
+var ARCH_EDGE_RE = /^([\w-]+)(?::([LRTB]))?\s*(?:--|<-->|<--|-->|<-|->)\s*(?:([LRTB]):)?([\w-]+)(?:\s*\[([^\]]+)\])?$/i;
+function parseArchitecture(source) {
+  const lines = source.split("\n").map((l) => l.trim());
+  const nodes = [];
+  const edges = [];
+  for (const line of lines) {
+    if (!line || line.startsWith("%%")) continue;
+    if (/^architecture(-beta)?\b/i.test(line)) continue;
+    if (/^title\b/i.test(line)) continue;
+    const decl = line.match(ARCH_DECL_RE);
+    if (decl) {
+      const [, kind, id, icon, label, parent] = decl;
+      nodes.push({
+        id,
+        kind: kind.toLowerCase() === "group" ? "group" : "service",
+        label: label?.trim() || id,
+        icon: icon?.trim() || void 0,
+        parent: parent?.trim() || void 0
+      });
+      continue;
+    }
+    const edge = line.match(ARCH_EDGE_RE);
+    if (edge) {
+      const [, source2, sourceSide, targetSide, target, label] = edge;
+      edges.push({
+        source: source2,
+        target,
+        sourceSide: sourceSide?.toUpperCase() ?? void 0,
+        targetSide: targetSide?.toUpperCase() ?? void 0,
+        label: label?.trim() || void 0
+      });
+    }
+  }
+  return { type: "architecture", nodes, edges };
+}
+var C4_VARIANT_RE = /^C4(Context|Container|Component|Deployment)\b/i;
+var C4_ELEMENT_RE = /^([A-Z][\w_]*)\s*\(\s*([^,)]+)(?:\s*,\s*"([^"]*)")?(?:\s*,\s*"([^"]*)")?(?:\s*,\s*"([^"]*)")?(?:\s*,\s*"([^"]*)")?\s*\)\s*\{?\s*$/;
+var C4_REL_RE = /^(Rel|BiRel|Rel_Back|Rel_Up|Rel_Down|Rel_Left|Rel_Right)\s*\(\s*([\w_]+)\s*,\s*([\w_]+)\s*(?:,\s*"([^"]*)")?(?:\s*,\s*"([^"]*)")?\s*\)\s*$/i;
+var C4_KIND_MAP = {
+  Person: "person",
+  Person_Ext: "person-external",
+  System: "system",
+  System_Ext: "system-external",
+  SystemDb: "system-db",
+  SystemDb_Ext: "system-db",
+  SystemQueue: "system-queue",
+  SystemQueue_Ext: "system-queue",
+  Container: "container",
+  Container_Ext: "container-external",
+  ContainerDb: "container-db",
+  ContainerDb_Ext: "container-db",
+  ContainerQueue: "container-queue",
+  Component: "component",
+  Component_Ext: "component-external",
+  ComponentDb: "component-db",
+  ComponentQueue: "component-queue",
+  Boundary: "boundary",
+  System_Boundary: "system-boundary",
+  Container_Boundary: "container-boundary",
+  Enterprise_Boundary: "enterprise-boundary",
+  Node: "node",
+  Deployment_Node: "node"
+};
+function parseC4(source) {
+  const lines = source.split("\n").map((l) => l.trim());
+  const elements = [];
+  const relations = [];
+  let variant = "context";
+  let title;
+  const boundaryStack = [];
+  for (const rawLine of lines) {
+    let line = rawLine;
+    if (!line || line.startsWith("%%")) continue;
+    const v = line.match(C4_VARIANT_RE);
+    if (v) {
+      const t = v[1].toLowerCase();
+      variant = t === "context" ? "context" : t === "container" ? "container" : t === "component" ? "component" : "deployment";
+      continue;
+    }
+    const titleMatch = line.match(/^title\s+(.+)$/i);
+    if (titleMatch) {
+      title = titleMatch[1].trim();
+      continue;
+    }
+    if (line === "}") {
+      boundaryStack.pop();
+      continue;
+    }
+    const rel = line.match(C4_REL_RE);
+    if (rel) {
+      const [, , src, tgt, label, technology] = rel;
+      relations.push({ source: src, target: tgt, label, technology });
+      continue;
+    }
+    const el = line.match(C4_ELEMENT_RE);
+    if (el) {
+      const [, type, id, ...rest] = el;
+      const kind = C4_KIND_MAP[type] ?? "system";
+      const label = rest[0] ?? id;
+      const isBoundary = kind.endsWith("boundary") || kind === "node";
+      const technology = !isBoundary ? rest[1] : void 0;
+      const description = !isBoundary ? rest[2] : rest[1];
+      elements.push({
+        id,
+        kind,
+        label: label.trim(),
+        technology: technology?.trim(),
+        description: description?.trim(),
+        parent: boundaryStack.length > 0 ? boundaryStack[boundaryStack.length - 1] : void 0
+      });
+      if (line.endsWith("{") && isBoundary) {
+        boundaryStack.push(id);
+      }
+    }
+  }
+  return { type: "c4", variant, title, elements, relations };
+}
+function parseGitGraph(source) {
+  const lines = source.split("\n").map((l) => l.trim());
+  const ops = [];
+  let title;
+  for (const line of lines) {
+    if (!line || line.startsWith("%%")) continue;
+    if (/^gitgraph\b/i.test(line) || /^---/.test(line)) continue;
+    const titleMatch = line.match(/^title:\s*(.+)$/i) || line.match(/^title\s+(.+)$/i);
+    if (titleMatch) {
+      title = titleMatch[1].trim();
+      continue;
+    }
+    const commit = line.match(/^commit\b(.*)$/i);
+    if (commit) {
+      const rest = commit[1];
+      const idMatch = rest.match(/id:\s*"([^"]+)"/);
+      const tagMatch = rest.match(/tag:\s*"([^"]+)"/);
+      const typeMatch = rest.match(/type:\s*(HIGHLIGHT|REVERSE|NORMAL)/);
+      ops.push({
+        kind: "commit",
+        id: idMatch?.[1],
+        tag: tagMatch?.[1],
+        type: typeMatch ? typeMatch[1] : "NORMAL"
+      });
+      continue;
+    }
+    const branch = line.match(/^branch\s+([\w/-]+)/i);
+    if (branch) {
+      ops.push({ kind: "branch", name: branch[1] });
+      continue;
+    }
+    const checkout = line.match(/^(?:checkout|switch)\s+([\w/-]+)/i);
+    if (checkout) {
+      ops.push({ kind: "checkout", name: checkout[1] });
+      continue;
+    }
+    const merge = line.match(/^merge\s+([\w/-]+)(?:\s+tag:\s*"([^"]+)")?/i);
+    if (merge) {
+      ops.push({ kind: "merge", from: merge[1], tag: merge[2] });
+      continue;
+    }
+    const cherry = line.match(/^cherry-pick\s+id:\s*"([^"]+)"/i);
+    if (cherry) {
+      ops.push({ kind: "cherry-pick", commitId: cherry[1] });
+    }
+  }
+  return { type: "gitgraph", title, ops };
+}
+
+// src/utils/diagrams/registry.ts
+var REGISTRY = /* @__PURE__ */ new Map();
+function register(entry) {
+  REGISTRY.set(entry.type, entry);
+}
+function getRenderer(type) {
+  return REGISTRY.get(type) ?? null;
+}
+function hasRenderer(type) {
+  return REGISTRY.has(type);
+}
+function _resetRegistry() {
+  REGISTRY.clear();
+}
+var LAZY_RENDERERS = /* @__PURE__ */ new Map();
+function getLazyRenderer(type) {
+  let lazyComp = LAZY_RENDERERS.get(type);
+  if (lazyComp) return lazyComp;
+  const entry = getRenderer(type);
+  if (!entry) return null;
+  lazyComp = react.lazy(entry.loader);
+  LAZY_RENDERERS.set(type, lazyComp);
+  return lazyComp;
+}
+function DiagramRenderer({ source, dark, handleRef, onError }) {
+  const [parsed, setParsed] = react.useState(null);
+  react.useEffect(() => {
+    let cancelled = false;
+    setParsed(null);
+    parseToIR(source).then((result) => {
+      if (cancelled) return;
+      if (!result.ok && onError) onError(result.error);
+      setParsed(result);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [source, onError]);
+  if (!parsed) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-4 text-slate-400 text-xs italic", children: "Parsing diagram\u2026" });
+  }
+  if (!parsed.ok) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-xs font-mono", children: [
+      "Diagram parse error: ",
+      parsed.error
+    ] });
+  }
+  const ir = parsed.ir;
+  const lazyRenderer = getLazyRenderer(ir.type);
+  if (!lazyRenderer) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-4 p-3 bg-amber-50 border border-amber-200 rounded-lg text-amber-700 text-xs font-mono", children: [
+      'No renderer registered for "',
+      ir.type,
+      '".'
+    ] });
+  }
+  const Component = lazyRenderer;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-4 text-slate-400 text-xs italic", children: "Loading renderer\u2026" }), children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ir, dark, handleRef }) });
+}
+
+// src/utils/diagrams/export.ts
+var INLINEABLE_STYLE_PROPS = [
+  "fill",
+  "fill-opacity",
+  "stroke",
+  "stroke-width",
+  "stroke-opacity",
+  "stroke-dasharray",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "stroke-miterlimit",
+  "opacity",
+  "visibility",
+  "display",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "font-style",
+  "text-anchor",
+  "dominant-baseline",
+  "alignment-baseline",
+  "letter-spacing",
+  "color",
+  "cursor"
+];
+var SVG_NS = "http://www.w3.org/2000/svg";
+var XLINK_NS = "http://www.w3.org/1999/xlink";
+function resolveSource(source) {
+  if (typeof source === "string") return source;
+  if (typeof source === "function") {
+    const el = source();
+    if (!el) throw new Error("SVG source resolver returned null");
+    return el;
+  }
+  return source;
+}
+function inlineStylesOnClone(live, clone) {
+  if (typeof window === "undefined" || !window.getComputedStyle) return;
+  const visit = (l, c) => {
+    const computed = window.getComputedStyle(l);
+    const decls = [];
+    for (const prop of INLINEABLE_STYLE_PROPS) {
+      const value = computed.getPropertyValue(prop);
+      if (value && value !== "" && value !== "none" && value !== "normal") {
+        decls.push(`${prop}: ${value}`);
+      }
+    }
+    if (decls.length > 0) {
+      const existing = c.getAttribute("style") ?? "";
+      const merged = existing ? `${existing}; ${decls.join("; ")}` : decls.join("; ");
+      c.setAttribute("style", merged);
+    }
+    const liveChildren = l.children;
+    const cloneChildren = c.children;
+    const n = Math.min(liveChildren.length, cloneChildren.length);
+    for (let i = 0; i < n; i++) visit(liveChildren[i], cloneChildren[i]);
+  };
+  visit(live, clone);
+}
+function toSvgString(source, options = {}) {
+  const inlineStyles = options.inlineStyles !== false;
+  const stripForeignObject = options.stripForeignObject !== false;
+  const resolved = resolveSource(source);
+  if (typeof resolved === "string") return resolved;
+  const clone = resolved.cloneNode(true);
+  if (!clone.getAttribute("xmlns")) clone.setAttribute("xmlns", SVG_NS);
+  if (!clone.getAttribute("xmlns:xlink")) clone.setAttribute("xmlns:xlink", XLINK_NS);
+  if (inlineStyles) inlineStylesOnClone(resolved, clone);
+  if (stripForeignObject) clone.querySelectorAll("foreignObject").forEach((el) => el.remove());
+  return new XMLSerializer().serializeToString(clone);
+}
+function getSvgDimensions(svg) {
+  const fallback = { width: 800, height: 600 };
+  const vbMatch = svg.match(/viewBox\s*=\s*["']([^"']+)["']/);
+  if (vbMatch) {
+    const parts = vbMatch[1].split(/[\s,]+/).map((p) => parseFloat(p)).filter((n) => !isNaN(n));
+    if (parts.length === 4 && parts[2] > 0 && parts[3] > 0) {
+      return { width: parts[2], height: parts[3] };
+    }
+  }
+  const rootMatch = svg.match(/<svg\b[^>]*>/);
+  if (rootMatch) {
+    const root = rootMatch[0];
+    const wMatch = root.match(/\swidth\s*=\s*["']([^"']+)["']/);
+    const hMatch = root.match(/\sheight\s*=\s*["']([^"']+)["']/);
+    const w = wMatch ? parseFloat(wMatch[1]) : NaN;
+    const h = hMatch ? parseFloat(hMatch[1]) : NaN;
+    return {
+      width: !isNaN(w) && w > 0 ? w : fallback.width,
+      height: !isNaN(h) && h > 0 ? h : fallback.height
+    };
+  }
+  return fallback;
+}
+async function svgToPngBlob(svg, options = {}) {
+  const scale = options.scale ?? 2;
+  const background = options.background === void 0 ? "#ffffff" : options.background;
+  const { width, height } = getSvgDimensions(svg);
+  const blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  try {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    await new Promise((resolve, reject) => {
+      img.onload = () => resolve();
+      img.onerror = () => reject(new Error("Failed to load SVG image for PNG conversion"));
+      img.src = url;
+    });
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.round(width * scale);
+    canvas.height = Math.round(height * scale);
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Canvas 2D context unavailable");
+    if (background !== null) {
+      ctx.fillStyle = background;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    return await new Promise(
+      (resolve, reject) => canvas.toBlob(
+        (b) => b ? resolve(b) : reject(new Error("canvas.toBlob() returned null")),
+        "image/png"
+      )
+    );
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+function triggerDownload(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.rel = "noopener";
+  document.body.appendChild(a);
+  a.click();
+  setTimeout(() => {
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, 1500);
+}
+async function downloadSvg(source, filename) {
+  const svg = toSvgString(source, { stripForeignObject: false });
+  const blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
+  triggerDownload(blob, filename);
+}
+async function downloadPng(source, filename, options = {}) {
+  const svg = toSvgString(source);
+  const blob = await svgToPngBlob(svg, options);
+  triggerDownload(blob, filename);
+}
+async function copySvgToClipboard(source) {
+  const svg = toSvgString(source, { stripForeignObject: false });
+  await navigator.clipboard.writeText(svg);
+}
+async function copyPngToClipboard(source, options = {}) {
+  const svg = toSvgString(source);
+  const blob = await svgToPngBlob(svg, options);
+  if (typeof ClipboardItem === "undefined" || !navigator.clipboard?.write) {
+    throw new Error("Clipboard image write not supported in this environment");
+  }
+  await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
+}
+var ICON_PROPS = {
+  width: 11,
+  height: 11,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": true
+};
+var IconCopy = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...ICON_PROPS, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+] });
+var IconCheck = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...ICON_PROPS, stroke: props.color ?? "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) });
+var IconDownload = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...ICON_PROPS, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "7 10 12 15 17 10" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+] });
+var IconFileImage = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...ICON_PROPS, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "14 2 14 8 20 8" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "13", r: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m20 17-1.09-1.09a2 2 0 0 0-2.82 0L10 22" })
+] });
+var IconImageDown = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...ICON_PROPS, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5.3" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m14 19 3 3 3-3" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 22V13" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "2" })
+] });
+function DiagramExportToolbar({
+  source,
+  filenameBase = "diagram",
+  pngScale = 2,
+  pngBackground,
+  className = "",
+  onError
+}) {
+  const [flash, setFlash] = react.useState("idle");
+  const flashAndReset = (state) => {
+    setFlash(state);
+    setTimeout(() => setFlash("idle"), 2e3);
+  };
+  const safe = async (fn, e) => {
+    e.stopPropagation();
+    try {
+      await fn();
+    } catch (err) {
+      onError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  };
+  const handleCopySvg = (e) => safe(async () => {
+    await copySvgToClipboard(source);
+    flashAndReset("svg-copied");
+  }, e);
+  const handleCopyPng = (e) => safe(async () => {
+    await copyPngToClipboard(source, { scale: pngScale, background: pngBackground });
+    flashAndReset("png-copied");
+  }, e);
+  const handleDownloadSvg = (e) => safe(() => downloadSvg(source, `${filenameBase}.svg`), e);
+  const handleDownloadPng = (e) => safe(
+    () => downloadPng(source, `${filenameBase}.png`, { scale: pngScale, background: pngBackground }),
+    e
+  );
+  const buttonClass = "flex items-center gap-1 px-2 py-1 rounded-md bg-white border border-slate-200 text-slate-500 hover:text-blue-600 hover:border-blue-300 text-[10px] font-bold shadow-sm transition-colors";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-1 ${className}`, role: "toolbar", "aria-label": "Diagram export", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleCopySvg,
+        className: buttonClass,
+        "aria-label": "Copy SVG markup to clipboard",
+        title: "Copy SVG markup",
+        children: [
+          flash === "svg-copied" ? /* @__PURE__ */ jsxRuntime.jsx(IconCheck, { color: "#22c55e" }) : /* @__PURE__ */ jsxRuntime.jsx(IconCopy, {}),
+          flash === "svg-copied" ? "Copied!" : "SVG"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleCopyPng,
+        className: buttonClass,
+        "aria-label": "Copy diagram as PNG to clipboard",
+        title: "Copy as PNG image",
+        children: [
+          flash === "png-copied" ? /* @__PURE__ */ jsxRuntime.jsx(IconCheck, { color: "#22c55e" }) : /* @__PURE__ */ jsxRuntime.jsx(IconFileImage, {}),
+          flash === "png-copied" ? "Copied!" : "PNG"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleDownloadSvg,
+        className: buttonClass,
+        "aria-label": "Download diagram as SVG file",
+        title: "Download SVG",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconDownload, {}),
+          " SVG"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleDownloadPng,
+        className: buttonClass,
+        "aria-label": "Download diagram as PNG file",
+        title: "Download PNG",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconImageDown, {}),
+          " PNG"
+        ]
+      }
+    )
+  ] });
+}
+
+// src/index.ts
+init_FlowchartRenderer();
+init_ERRenderer();
+init_PieRenderer();
+init_QuadrantRenderer();
+init_JourneyRenderer();
+init_SequenceRenderer();
+init_ClassRenderer();
+init_StateRenderer();
+init_GanttRenderer();
+init_TimelineRenderer();
+init_MindmapRenderer();
+init_ArchitectureRenderer();
+init_C4Renderer();
+init_GitGraphRenderer();
+
+// src/components/diagrams/bootstrap.ts
+var bootstrapped = false;
+function bootstrapDiagramRenderers() {
+  if (bootstrapped) return;
+  bootstrapped = true;
+  register({
+    type: "flowchart",
+    loader: () => Promise.resolve().then(() => (init_FlowchartRenderer(), FlowchartRenderer_exports))
+  });
+  register({
+    type: "er",
+    loader: () => Promise.resolve().then(() => (init_ERRenderer(), ERRenderer_exports))
+  });
+  register({
+    type: "pie",
+    loader: () => Promise.resolve().then(() => (init_PieRenderer(), PieRenderer_exports))
+  });
+  register({
+    type: "quadrant",
+    loader: () => Promise.resolve().then(() => (init_QuadrantRenderer(), QuadrantRenderer_exports))
+  });
+  register({
+    type: "journey",
+    loader: () => Promise.resolve().then(() => (init_JourneyRenderer(), JourneyRenderer_exports))
+  });
+  register({
+    type: "sequence",
+    loader: () => Promise.resolve().then(() => (init_SequenceRenderer(), SequenceRenderer_exports))
+  });
+  register({
+    type: "class",
+    loader: () => Promise.resolve().then(() => (init_ClassRenderer(), ClassRenderer_exports))
+  });
+  register({
+    type: "state",
+    loader: () => Promise.resolve().then(() => (init_StateRenderer(), StateRenderer_exports))
+  });
+  register({
+    type: "gantt",
+    loader: () => Promise.resolve().then(() => (init_GanttRenderer(), GanttRenderer_exports))
+  });
+  register({
+    type: "timeline",
+    loader: () => Promise.resolve().then(() => (init_TimelineRenderer(), TimelineRenderer_exports))
+  });
+  register({
+    type: "mindmap",
+    loader: () => Promise.resolve().then(() => (init_MindmapRenderer(), MindmapRenderer_exports))
+  });
+  register({
+    type: "architecture",
+    loader: () => Promise.resolve().then(() => (init_ArchitectureRenderer(), ArchitectureRenderer_exports))
+  });
+  register({
+    type: "c4",
+    loader: () => Promise.resolve().then(() => (init_C4Renderer(), C4Renderer_exports))
+  });
+  register({
+    type: "gitgraph",
+    loader: () => Promise.resolve().then(() => (init_GitGraphRenderer(), GitGraphRenderer_exports))
+  });
+}
+
+// src/utils/diagrams/convenience.ts
+init_dagreLayout();
+init_svgBuilders();
+var FLOW_DEFAULT_SIZE = { width: 180, height: 60 };
+var CLASS_NODE_WIDTH = 220;
+var ER_NODE_WIDTH = 240;
+var ER_HEADER_H = 34;
+var ER_ROW_H = 26;
+function flowchartNodeSize2(label) {
+  const len = label.length;
+  return {
+    width: Math.max(160, Math.min(320, len * 8 + 40)),
+    height: 48
+  };
+}
+function flowchartToSvg(ir, options = {}) {
+  const nodeSizes = /* @__PURE__ */ new Map();
+  for (const node of ir.nodes) {
+    nodeSizes.set(node.id, flowchartNodeSize2(node.label || node.id));
+  }
+  const { nodePositions } = layoutFlowchart(ir, {
+    defaultNodeSize: FLOW_DEFAULT_SIZE,
+    nodeSizes
+  });
+  return buildFlowchartSvg(ir, nodePositions, options);
+}
+function classToSvg(ir, options = {}) {
+  const g = new dagre2__default.default.graphlib.Graph();
+  g.setGraph({ rankdir: "TB", nodesep: 50, ranksep: 80, marginx: 24, marginy: 24 });
+  g.setDefaultEdgeLabel(() => ({}));
+  const sizeFor = (memberCount) => ({
+    width: CLASS_NODE_WIDTH,
+    height: Math.max(64, 40 + memberCount * 18)
+  });
+  for (const cls of ir.classes) g.setNode(cls.id, sizeFor(cls.members.length));
+  for (const rel of ir.relations) {
+    if (g.hasNode(rel.source) && g.hasNode(rel.target)) g.setEdge(rel.source, rel.target);
+  }
+  dagre2__default.default.layout(g);
+  const positions = /* @__PURE__ */ new Map();
+  for (const cls of ir.classes) {
+    const { x, y } = g.node(cls.id);
+    const size = sizeFor(cls.members.length);
+    positions.set(cls.id, {
+      x: x - size.width / 2,
+      y: y - size.height / 2,
+      width: size.width,
+      height: size.height
+    });
+  }
+  return buildClassSvg(ir, positions, options);
+}
+function erToSvg(ir, options = {}) {
+  const g = new dagre2__default.default.graphlib.Graph();
+  g.setGraph({ rankdir: "LR", nodesep: 60, ranksep: 100, marginx: 24, marginy: 24 });
+  g.setDefaultEdgeLabel(() => ({}));
+  const tableHeight = (cols) => ER_HEADER_H + cols * ER_ROW_H;
+  for (const table of ir.schema.tables) {
+    g.setNode(table.name, {
+      width: ER_NODE_WIDTH,
+      height: tableHeight(table.columns.length)
+    });
+  }
+  for (const rel of ir.schema.relations) {
+    if (g.hasNode(rel.fromTable) && g.hasNode(rel.toTable)) {
+      g.setEdge(rel.fromTable, rel.toTable);
+    }
+  }
+  dagre2__default.default.layout(g);
+  const positions = /* @__PURE__ */ new Map();
+  for (const table of ir.schema.tables) {
+    const { x, y } = g.node(table.name);
+    const h = tableHeight(table.columns.length);
+    positions.set(table.name, {
+      x: x - ER_NODE_WIDTH / 2,
+      y: y - h / 2,
+      width: ER_NODE_WIDTH,
+      height: h
+    });
+  }
+  return buildErSvg(ir, positions, options);
+}
+
+// src/index.ts
+init_svgBuilders();
+init_dagreLayout();
+
+// src/components/diagrams/darkMode.ts
+function isDarkMode() {
+  if (typeof document === "undefined") return false;
+  return document.documentElement.classList.contains("dark");
+}
+function watchDarkMode(callback) {
+  if (typeof MutationObserver === "undefined" || typeof document === "undefined") {
+    return () => {
+    };
+  }
+  let last = isDarkMode();
+  const observer = new MutationObserver(() => {
+    const next = isDarkMode();
+    if (next !== last) {
+      last = next;
+      callback(next);
+    }
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"]
+  });
+  return () => observer.disconnect();
+}
+
+// src/index.ts
+init_theme();
+
+exports.ArchitectureRenderer = ArchitectureRenderer;
+exports.C4Renderer = C4Renderer;
+exports.ClassRenderer = ClassRenderer;
+exports.DiagramExportToolbar = DiagramExportToolbar;
+exports.DiagramRenderer = DiagramRenderer;
+exports.ERRenderer = ERRenderer;
+exports.FlowchartRenderer = FlowchartRenderer;
+exports.GanttRenderer = GanttRenderer;
+exports.GitGraphRenderer = GitGraphRenderer;
+exports.INLINEABLE_STYLE_PROPS = INLINEABLE_STYLE_PROPS;
+exports.JourneyRenderer = JourneyRenderer;
+exports.MindmapRenderer = MindmapRenderer;
+exports.PieRenderer = PieRenderer;
+exports.QuadrantRenderer = QuadrantRenderer;
+exports.SequenceRenderer = SequenceRenderer;
+exports.StateRenderer = StateRenderer;
+exports.TimelineRenderer = TimelineRenderer;
+exports._resetRegistry = _resetRegistry;
+exports.bootstrapDiagramRenderers = bootstrapDiagramRenderers;
+exports.buildArchitectureSvg = buildArchitectureSvg;
+exports.buildC4Svg = buildC4Svg;
+exports.buildClassSvg = buildClassSvg;
+exports.buildErSvg = buildErSvg;
+exports.buildFlowchartSvg = buildFlowchartSvg;
+exports.buildGanttSvg = buildGanttSvg;
+exports.buildGitGraphSvg = buildGitGraphSvg;
+exports.buildJourneySvg = buildJourneySvg;
+exports.buildMindmapSvg = buildMindmapSvg;
+exports.buildPieSvg = buildPieSvg;
+exports.buildQuadrantSvg = buildQuadrantSvg;
+exports.buildStateSvg = buildStateSvg;
+exports.buildTimelineSvg = buildTimelineSvg;
+exports.classToSvg = classToSvg;
+exports.copyPngToClipboard = copyPngToClipboard;
+exports.copySvgToClipboard = copySvgToClipboard;
+exports.detectDiagramType = detectDiagramType;
+exports.downloadPng = downloadPng;
+exports.downloadSvg = downloadSvg;
+exports.erToSvg = erToSvg;
+exports.flowchartToSvg = flowchartToSvg;
+exports.getDiagramTheme = getDiagramTheme;
+exports.getRenderer = getRenderer;
+exports.getSvgDimensions = getSvgDimensions;
+exports.hasRenderer = hasRenderer;
+exports.isDarkMode = isDarkMode;
+exports.layoutFlowchart = layoutFlowchart;
+exports.parseToIR = parseToIR;
+exports.register = register;
+exports.svgStringToElement = svgStringToElement;
+exports.svgToPngBlob = svgToPngBlob;
+exports.toSvgString = toSvgString;
+exports.watchDarkMode = watchDarkMode;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map