@pixerate/editor 0.55.0 → 0.57.0

package/dist/canvas/index.js

@@ -15,8 +15,39 @@ import {
   pathfinder
 } from "../chunk-VWZB6BCY.js";
 import {
-  parseMermaid
-} from "../chunk-WWJNC7SX.js";
+  ARCH_METRICS,
+  GANTT_METRICS,
+  GIT_METRICS,
+  JOURNEY_METRICS,
+  MINDMAP_METRICS,
+  PIE_METRICS,
+  QUADRANT_METRICS,
+  RADAR_CHART_BOX,
+  SEQUENCE_METRICS,
+  TIMELINE_METRICS,
+  XY_CHART_BOX,
+  architectureArrow,
+  architectureEdgeRoute,
+  c4ArrowHead,
+  c4BoundaryText,
+  c4ElementGeometry,
+  c4RelGeometry,
+  estimateTextWidth,
+  ganttGeometry,
+  getFamilyLayout,
+  gitGraphGeometry,
+  isSide,
+  journeyGeometry,
+  mindmapGeometry,
+  parseMermaid,
+  pieGeometry,
+  quadrantGeometry,
+  sequenceGeometry,
+  serviceLabelLines,
+  shiftEndpoint,
+  textWidth,
+  timelineGeometry
+} from "../chunk-WJSCGBJ2.js";
 import {
   DEFAULT_NODE_HEIGHT,
   DEFAULT_NODE_WIDTH,
@@ -36,6 +67,13 @@ import {
   DEFAULT_ARRANGE_SHORTCUTS,
   matchArrangeShortcut
 } from "../chunk-7DWMJCAT.js";
+import {
+  layoutChart
+} from "../chunk-OEFCLWZ3.js";
+import {
+  createChartSpec
+} from "../chunk-633QC34G.js";
+import "../chunk-EKYHKQPG.js";
 import {
   CANVAS_GRADIENT_PRESETS,
   PIXERATE_BRAND_GRADIENT,
@@ -1321,12 +1359,12 @@ function computeSnapGuides(moving, targets, options = {}) {
     if (useCentres) {
       lines.push({ value: start + size / 2, kind: "centre", axis: horizontal ? index.centreX : index.centreY });
     }
-    for (const line3 of lines) {
-      const aligned = matches(line3.axis, line3.value, eps);
+    for (const line4 of lines) {
+      const aligned = matches(line4.axis, line4.value, eps);
       if (aligned.length === 0) continue;
       const span = boundsOf([snapped, ...aligned]);
       guides.push(
-        horizontal ? { orientation: "vertical", kind: line3.kind, x1: line3.value, y1: span.y, x2: line3.value, y2: span.y + span.height } : { orientation: "horizontal", kind: line3.kind, x1: span.x, y1: line3.value, x2: span.x + span.width, y2: line3.value }
+        horizontal ? { orientation: "vertical", kind: line4.kind, x1: line4.value, y1: span.y, x2: line4.value, y2: span.y + span.height } : { orientation: "horizontal", kind: line4.kind, x1: span.x, y1: line4.value, x2: span.x + span.width, y2: line4.value }
       );
     }
   };
@@ -1547,13 +1585,13 @@ function parseCanvasScenes(input) {
   }
   const list = Array.isArray(value) ? value : typeof value === "object" && value !== null && Array.isArray(value.scenes) ? value.scenes : [];
   const seen = /* @__PURE__ */ new Set();
-  const scenes = [];
+  const scenes2 = [];
   for (const entry of list) {
     if (!isValidCanvasScene(entry) || seen.has(entry.id)) continue;
     seen.add(entry.id);
-    scenes.push(cloneScene(entry));
+    scenes2.push(cloneScene(entry));
   }
-  return scenes;
+  return scenes2;
 }
 var CanvasScenesStore = class {
   scenes;
@@ -1578,9 +1616,9 @@ var CanvasScenesStore = class {
       currentIndex
     };
   }
-  commit(scenes = this.scenes) {
-    this.scenes = scenes;
-    if (this.currentId && !scenes.some((s) => s.id === this.currentId)) this.currentId = null;
+  commit(scenes2 = this.scenes) {
+    this.scenes = scenes2;
+    if (this.currentId && !scenes2.some((s) => s.id === this.currentId)) this.currentId = null;
     this.cached = this.snapshot();
     this.onChange?.(this.cached);
     for (const listener of this.listeners) listener(this.cached);
@@ -1615,11 +1653,11 @@ var CanvasScenesStore = class {
       nodeIds: input.nodeIds
     });
     if (!isValidCanvasScene(scene)) throw new Error("[CanvasScenesStore] Invalid scene viewport.");
-    const scenes = [...this.scenes];
-    const at = index === void 0 ? scenes.length : Math.max(0, Math.min(scenes.length, index));
-    scenes.splice(at, 0, scene);
+    const scenes2 = [...this.scenes];
+    const at = index === void 0 ? scenes2.length : Math.max(0, Math.min(scenes2.length, index));
+    scenes2.splice(at, 0, scene);
     this.currentId = scene.id;
-    this.commit(scenes);
+    this.commit(scenes2);
     return scene;
   }
   /** Patches a scene's name, viewport or node ids. Returns the updated scene. */
@@ -1635,9 +1673,9 @@ var CanvasScenesStore = class {
       id
     });
     if (!isValidCanvasScene(next)) throw new Error("[CanvasScenesStore] Invalid scene viewport.");
-    const scenes = [...this.scenes];
-    scenes[index] = next;
-    this.commit(scenes);
+    const scenes2 = [...this.scenes];
+    scenes2[index] = next;
+    this.commit(scenes2);
     return next;
   }
   rename(id, name) {
@@ -1649,10 +1687,10 @@ var CanvasScenesStore = class {
     if (from === -1) return;
     const to = Math.max(0, Math.min(this.scenes.length - 1, Math.trunc(toIndex2)));
     if (from === to) return;
-    const scenes = [...this.scenes];
-    const [scene] = scenes.splice(from, 1);
-    scenes.splice(to, 0, scene);
-    this.commit(scenes);
+    const scenes2 = [...this.scenes];
+    const [scene] = scenes2.splice(from, 1);
+    scenes2.splice(to, 0, scene);
+    this.commit(scenes2);
   }
   /** Reorders scenes to match `ids`; unknown ids are ignored and missing scenes keep their relative order at the end. */
   reorder(ids) {
@@ -1867,8 +1905,8 @@ function combineShapeNodes(nodes, ids, operation, options = {}) {
   } else {
     report = { engine: "polygon" };
     const operands = ordered.map((node) => shapeNodeToPolygon(node, lookup, options));
-    const write = (polygon) => toBezierPath(
-      polygonToSvgPath(polygon, {
+    const write = (polygon2) => toBezierPath(
+      polygonToSvgPath(polygon2, {
         precision: 9,
         simplify: options.simplify,
         curves: options.curves ?? "fit",
@@ -2621,10 +2659,10 @@ function layoutFrameInner(s, frame) {
   } else {
     lines.push(items.map((_, i) => i));
   }
-  for (const line3 of lines) {
-    const fixed = line3.filter((i) => !items[i].fillMain).reduce((sum, i) => sum + items[i].main, 0);
-    const gaps = gap * Math.max(line3.length - 1, 0);
-    const fills = line3.filter((i) => items[i].fillMain);
+  for (const line4 of lines) {
+    const fixed = line4.filter((i) => !items[i].fillMain).reduce((sum, i) => sum + items[i].main, 0);
+    const gaps = gap * Math.max(line4.length - 1, 0);
+    const fills = line4.filter((i) => items[i].fillMain);
     if (fills.length > 0) distribute(items, fills, innerMainFixed - fixed - (autoGap ? 0 : gaps));
   }
   for (const it of items) {
@@ -2637,11 +2675,11 @@ function layoutFrameInner(s, frame) {
     for (const it of items) if (!it.fillCross) it.baseline = itemBaseline(s, it.id, 0);
   }
   const extents = [];
-  for (const line3 of lines) {
-    const gaps = gap * Math.max(line3.length - 1, 0);
-    const lineBase = line3.reduce((m, i) => Math.max(m, items[i].baseline ?? 0), 0);
-    for (const i of line3) items[i].baseOff = items[i].baseline !== void 0 ? lineBase - items[i].baseline : 0;
-    const inLine = line3.map((i) => items[i]);
+  for (const line4 of lines) {
+    const gaps = gap * Math.max(line4.length - 1, 0);
+    const lineBase = line4.reduce((m, i) => Math.max(m, items[i].baseline ?? 0), 0);
+    for (const i of line4) items[i].baseOff = items[i].baseline !== void 0 ? lineBase - items[i].baseline : 0;
+    const inLine = line4.map((i) => items[i]);
     const mainUsed = inLine.reduce((sum, it) => sum + it.main, 0) + gaps;
     const allFill = inLine.every((it) => it.fillCross);
     const cross = inLine.filter((it) => allFill || !it.fillCross).reduce((m, it) => Math.max(m, it.baseOff + it.cross), 0);
@@ -2688,13 +2726,13 @@ function layoutFrameInner(s, frame) {
       }
     }
   }
-  lines.forEach((line3, li) => {
+  lines.forEach((line4, li) => {
     const [used, ownCross] = extents[li];
     const lineCross = single ? innerCross : ownCross;
-    const total = used - gap * Math.max(line3.length - 1, 0);
-    let [pos, step] = mainOffsets(alignMain, innerMain, total, line3.length, gap);
+    const total = used - gap * Math.max(line4.length - 1, 0);
+    let [pos, step] = mainOffsets(alignMain, innerMain, total, line4.length, gap);
     pos += horizontal ? pl : pt;
-    for (const i of line3) {
+    for (const i of line4) {
       const it = items[i];
       const crossSize = it.fillCross ? clampLayoutSize(lineCross, it.minCross, it.maxCross) : it.cross;
       let off = 0;
@@ -3672,37 +3710,37 @@ function inside(out, inner, outer) {
 }
 function measureBetween(a, b) {
   const out = [];
-  const A = toBox(a);
+  const A2 = toBox(a);
   const B = toBox(b);
-  if (!finiteBox(A) || !finiteBox(B)) return out;
-  if (contains(B, A)) {
-    inside(out, A, B);
+  if (!finiteBox(A2) || !finiteBox(B)) return out;
+  if (contains(B, A2)) {
+    inside(out, A2, B);
     return out;
   }
-  if (contains(A, B)) {
-    inside(out, B, A);
+  if (contains(A2, B)) {
+    inside(out, B, A2);
     return out;
   }
-  const ox = overlapMid(A.x0, A.x1, B.x0, B.x1);
-  const oy = overlapMid(A.y0, A.y1, B.y0, B.y1);
-  const overlapping = A.x0 < B.x1 && B.x0 < A.x1 && A.y0 < B.y1 && B.y0 < A.y1;
+  const ox = overlapMid(A2.x0, A2.x1, B.x0, B.x1);
+  const oy = overlapMid(A2.y0, A2.y1, B.y0, B.y1);
+  const overlapping = A2.x0 < B.x1 && B.x0 < A2.x1 && A2.y0 < B.y1 && B.y0 < A2.y1;
   if (overlapping && ox !== null && oy !== null) {
-    measured(out, A.x0, oy, B.x0, oy);
-    measured(out, A.x1, oy, B.x1, oy);
-    measured(out, ox, A.y0, ox, B.y0);
-    measured(out, ox, A.y1, ox, B.y1);
+    measured(out, A2.x0, oy, B.x0, oy);
+    measured(out, A2.x1, oy, B.x1, oy);
+    measured(out, ox, A2.y0, ox, B.y0);
+    measured(out, ox, A2.y1, ox, B.y1);
     return out;
   }
-  const cx = (A.x0 + A.x1) / 2;
-  const cy = (A.y0 + A.y1) / 2;
-  const gapX = B.x0 >= A.x1 ? [A.x1, B.x0] : B.x1 <= A.x0 ? [A.x0, B.x1] : null;
+  const cx = (A2.x0 + A2.x1) / 2;
+  const cy = (A2.y0 + A2.y1) / 2;
+  const gapX = B.x0 >= A2.x1 ? [A2.x1, B.x0] : B.x1 <= A2.x0 ? [A2.x0, B.x1] : null;
   if (gapX) {
     const [from, to] = gapX;
     const y = oy ?? cy;
     measured(out, from, y, to, y);
     if (oy === null) extension(out, to, y, to, y < B.y0 ? B.y0 : B.y1);
   }
-  const gapY = B.y0 >= A.y1 ? [A.y1, B.y0] : B.y1 <= A.y0 ? [A.y0, B.y1] : null;
+  const gapY = B.y0 >= A2.y1 ? [A2.y1, B.y0] : B.y1 <= A2.y0 ? [A2.y0, B.y1] : null;
   if (gapY) {
     const [from, to] = gapY;
     const x = ox ?? cx;
@@ -3713,12 +3751,12 @@ function measureBetween(a, b) {
 }
 function measureToLine(a, orientation, at) {
   const out = [];
-  const A = toBox(a);
-  if (!finiteBox(A) || !Number.isFinite(at)) return out;
+  const A2 = toBox(a);
+  if (!finiteBox(A2) || !Number.isFinite(at)) return out;
   const vertical = orientation === "vertical";
-  const cx = (A.x0 + A.x1) / 2;
-  const cy = (A.y0 + A.y1) / 2;
-  const [lo, hi] = vertical ? [A.x0, A.x1] : [A.y0, A.y1];
+  const cx = (A2.x0 + A2.x1) / 2;
+  const cy = (A2.y0 + A2.y1) / 2;
+  const [lo, hi] = vertical ? [A2.x0, A2.x1] : [A2.y0, A2.y1];
   const seg = (from, to) => vertical ? measured(out, from, cy, to, cy) : measured(out, cx, from, cx, to);
   if (at >= hi) seg(hi, at);
   else if (at <= lo) seg(at, lo);
@@ -4078,17 +4116,17 @@ function readNodeStyleProperty(style, prop) {
 function writeNodeStyleProperty(style, prop, value, unitless = false) {
   if (typeof style === "string") {
     const name = kebab(prop);
-    const text = value === void 0 ? void 0 : typeof value === "number" && !unitless ? `${value}px` : String(value);
+    const text2 = value === void 0 ? void 0 : typeof value === "number" && !unitless ? `${value}px` : String(value);
     const decls = [];
-    let placed = text === void 0;
+    let placed = text2 === void 0;
     for (const [key, current] of parseDeclarations(style)) {
       if (key.toLowerCase() !== name) decls.push([key, current]);
       else if (!placed) {
-        decls.push([name, text]);
+        decls.push([name, text2]);
         placed = true;
       }
     }
-    if (!placed) decls.push([name, text]);
+    if (!placed) decls.push([name, text2]);
     return decls.map(([k, v]) => `${k}: ${v}`).join("; ");
   }
   const next = { ...style ?? {} };
@@ -5331,7 +5369,7 @@ function timing(options, duration) {
     direction: loop === "ping-pong" ? rate < 0 ? "alternate-reverse" : "alternate" : rate < 0 ? "reverse" : "normal"
   };
 }
-var cssIdent = (text) => text.replace(/[^A-Za-z0-9_-]/g, "-").replace(/^(\d)/, "_$1");
+var cssIdent = (text2) => text2.replace(/[^A-Za-z0-9_-]/g, "-").replace(/^(\d)/, "_$1");
 function exportCssAnimation(nodes, nodeId, options = {}) {
   const duration = options.duration ?? getAnimationDuration(nodes.filter((n3) => n3.id === nodeId));
   const props = getCssPropertyAnimations(nodes, nodeId, { ...options, duration });
@@ -7293,8 +7331,8 @@ function swapCanvasInstance(nodes, ids, componentId, options = {}) {
     if (options.keepTextOverridesOnly) {
       for (const d of g.subtree(id)) {
         const layer = updates.get(d) ?? g.get(d);
-        const text = typeof layer.type === "string" && (options.textTypes ?? ["text"]).includes(layer.type);
-        const keep = getNodeOverrides(layer).filter((gr) => text || d === id && gr === "size");
+        const text2 = typeof layer.type === "string" && (options.textTypes ?? ["text"]).includes(layer.type);
+        const keep = getNodeOverrides(layer).filter((gr) => text2 || d === id && gr === "size");
         updates.set(d, setOverrides(layer, keep));
       }
     }
@@ -8454,9 +8492,9 @@ function estimateDiagramNodeSize(node) {
 }
 var IMAGE_LABEL_HEIGHT = 24;
 function diagramImageSize(node) {
-  const num2 = (v) => typeof v === "number" && v > 0 ? v : void 0;
-  const w = num2(node.data?.w);
-  const h = num2(node.data?.h);
+  const num4 = (v) => typeof v === "number" && v > 0 ? v : void 0;
+  const w = num4(node.data?.w);
+  const h = num4(node.data?.h);
   return { width: w ?? h ?? 96, height: h ?? w ?? 96 };
 }
 function extraLines(node) {
@@ -8475,6 +8513,8 @@ function rankdir(direction) {
 }
 function autoLayoutDiagram(graph, options = {}) {
   const measure = options.measure ?? estimateDiagramNodeSize;
+  const custom = getFamilyLayout(options.family);
+  if (custom) return custom(graph, { v: 1 }, { ...options, measure });
   const nodeSep = options.nodeSep ?? 48;
   const rankSep = options.rankSep ?? 72;
   const pad = options.groupPadding ?? 24;
@@ -8573,6 +8613,8 @@ function push(map, key, value) {
 }
 function ensureDiagramLayout(graph, meta, options) {
   const measure = options?.measure ?? estimateDiagramNodeSize;
+  const custom = getFamilyLayout(options?.family);
+  if (custom) return custom(graph, meta, { ...options ?? {}, measure });
   const stored = meta.layout ?? {};
   const allIds = [...graph.nodes.map((n3) => n3.id), ...graph.groups.map((g) => g.id)];
   const missing = allIds.filter((id) => !stored[id]);
@@ -8837,14 +8879,14 @@ var DiagramStream = class {
   layout = null;
   /** Reads the source so far. `complete` when nothing more will arrive. */
   update(source, complete = false) {
-    const text = streamedDiagramText(source);
-    const parsed = parseMermaid(text);
+    const text2 = streamedDiagramText(source);
+    const parsed = parseMermaid(text2);
     const document2 = !complete ? { ...parsed, graph: connectedDiagramOnly(parsed.graph) } : parsed;
     if (document2.tier !== "editable" || !document2.graph.nodes.length) return { document: document2, layout: this.layout && complete ? null : this.layout, relaid: false };
     const key = fingerprint(document2.graph);
     if (key === this.lastKey && this.layout) return { document: document2, layout: this.layout, relaid: false };
     this.lastKey = key;
-    this.layout = ensureDiagramLayout(document2.graph, document2.meta, this.options);
+    this.layout = ensureDiagramLayout(document2.graph, document2.meta, { family: document2.family, ...this.options });
     return { document: document2, layout: this.layout, relaid: true };
   }
   /** Forgets the previous layout (a new source). */
@@ -8863,6 +8905,1881 @@ function streamedDiagramText(source) {
 }
 var easeDiagramTween = (t) => 1 - Math.pow(1 - Math.max(0, Math.min(1, t)), 3);
 
+// src/canvas/mermaid/theme.ts
+var DIAGRAM_SVG_LIGHT_THEME = {
+  background: "#ffffff",
+  nodeFill: "#ffffff",
+  nodeStroke: "#0f172a",
+  text: "#0f172a",
+  edge: "#64748b",
+  edgeLabelBackground: "#ffffff",
+  groupFill: "#f8fafc",
+  groupStroke: "#cbd5e1",
+  groupText: "#475569",
+  fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
+  fontSize: 13
+};
+var DIAGRAM_SVG_DARK_THEME = {
+  background: "#0f172a",
+  nodeFill: "#1e293b",
+  nodeStroke: "#e2e8f0",
+  text: "#f1f5f9",
+  edge: "#94a3b8",
+  edgeLabelBackground: "#0f172a",
+  groupFill: "#111c33",
+  groupStroke: "#334155",
+  groupText: "#94a3b8",
+  fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
+  fontSize: 13
+};
+
+// src/canvas/mermaid/scene-kit.ts
+var PALETTE_LIGHT = ["#4e79a7", "#f28e2b", "#59a14f", "#e15759", "#76b7b2", "#edc948", "#b07aa1", "#ff9da7", "#9c755f", "#bab0ac", "#8cd17d", "#86bcb6"];
+var PALETTE_DARK = ["#7aa6d6", "#ffad5c", "#7fcf73", "#ff8587", "#9fdcd6", "#ffe07a", "#d4a2c6", "#ffc2c9", "#c49a82", "#d9d0cc", "#b0eba3", "#acd8d3"];
+var DIAGRAM_SCENE_LIGHT_THEME = {
+  ...DIAGRAM_SVG_LIGHT_THEME,
+  palette: PALETTE_LIGHT,
+  paletteText: "#0f172a",
+  grid: "#cbd5e1",
+  mutedText: "#64748b",
+  selection: "#2563eb"
+};
+var DIAGRAM_SCENE_DARK_THEME = {
+  ...DIAGRAM_SVG_DARK_THEME,
+  palette: PALETTE_DARK,
+  paletteText: "#0f172a",
+  grid: "#334155",
+  mutedText: "#94a3b8",
+  selection: "#60a5fa"
+};
+var DIAGRAM_TITLE_TARGET = "::title";
+function sceneColor(theme, i) {
+  return theme.palette[(i % theme.palette.length + theme.palette.length) % theme.palette.length];
+}
+function estimateTextWidth2(text2, size) {
+  return text2.length * size * 0.58;
+}
+
+// src/canvas/mermaid/families/pie.ts
+var M = PIE_METRICS;
+var pieScene = ({ graph, theme }) => {
+  const geo = pieGeometry(graph);
+  const marks = [];
+  for (const slice of geo.slices) {
+    if (!slice.drawn) continue;
+    const r = geo.radius;
+    marks.push({
+      kind: "path",
+      key: `wedge:${slice.id}`,
+      role: "slice",
+      target: slice.id,
+      d: slice.path,
+      fill: sceneColor(theme, slice.colorIndex),
+      stroke: theme.background,
+      strokeWidth: 2,
+      box: { x: geo.cx - r, y: geo.cy - r, width: r * 2, height: r * 2 }
+    });
+  }
+  marks.push({ kind: "circle", key: "outer", role: "outline", cx: geo.cx, cy: geo.cy, r: geo.outerRadius, fill: "none", stroke: theme.nodeStroke, strokeWidth: M.outerStrokeWidth });
+  for (const slice of geo.slices) {
+    if (!slice.drawn) continue;
+    marks.push({ kind: "text", key: `percent:${slice.id}`, role: "slice-label", target: slice.id, x: slice.labelX, y: slice.labelY, text: slice.labelText, anchor: "middle", baseline: "bottom", size: 17, fill: theme.paletteText });
+  }
+  for (const entry of geo.legend) {
+    marks.push(
+      { kind: "rect", key: `swatch:${entry.sliceId}`, role: "legend", target: entry.sliceId, x: entry.x, y: entry.y, width: M.legendRectSize, height: M.legendRectSize, fill: sceneColor(theme, entry.colorIndex), stroke: sceneColor(theme, entry.colorIndex) },
+      {
+        kind: "text",
+        key: `legend:${entry.sliceId}`,
+        role: "legend",
+        target: entry.sliceId,
+        x: entry.x + M.legendRectSize + M.legendSpacing,
+        y: entry.y + M.legendRectSize / 2,
+        text: entry.text,
+        anchor: "start",
+        baseline: "middle",
+        size: M.legendFontSize,
+        fill: theme.text
+      }
+    );
+  }
+  if (geo.title)
+    marks.push({ kind: "text", key: "title", role: "title", target: DIAGRAM_TITLE_TARGET, x: geo.title.x, y: geo.title.y, text: geo.title.text, anchor: "middle", baseline: "bottom", size: M.titleFontSize, fill: theme.text });
+  return marks;
+};
+
+// src/canvas/mermaid/families/charts.ts
+var num2 = (v) => typeof v === "number" && Number.isFinite(v) ? v : null;
+var numbers = (v) => Array.isArray(v) ? v.map(num2) : [];
+var text = (v) => typeof v === "string" ? v : "";
+function chartTheme(theme) {
+  return {
+    background: theme.background,
+    surface: theme.background,
+    text: theme.text,
+    mutedText: theme.mutedText,
+    grid: theme.grid,
+    axis: theme.mutedText,
+    selection: theme.selection,
+    fontFamily: theme.fontFamily
+  };
+}
+function xyChartSpec(graph, palette) {
+  const data = graph.data ?? {};
+  const longest = Math.max(0, ...graph.nodes.map((n3) => numbers(n3.data?.values).length));
+  let categories = Array.isArray(data.categories) ? data.categories.map(String) : [];
+  const xMin = num2(data.xMin);
+  const xMax = num2(data.xMax);
+  if (!categories.length && longest) {
+    categories = Array.from(
+      { length: longest },
+      (_, i) => xMin !== null && xMax !== null ? String(Math.round((xMin + (xMax - xMin) * i / Math.max(1, longest - 1)) * 100) / 100) : String(i + 1)
+    );
+  }
+  const bars = graph.nodes.some((n3) => n3.shape === "bar");
+  return createChartSpec({
+    type: bars ? "bar" : "line",
+    title: graph.title ?? "",
+    categories,
+    series: graph.nodes.map((n3) => ({ id: n3.id, name: n3.label, values: numbers(n3.data?.values), type: n3.shape === "line" ? "line" : "bar" })),
+    orientation: data.horizontal ? "horizontal" : "vertical",
+    xAxis: { show: true, title: text(data.xTitle), min: null, max: null, step: null, gridlines: false, format: {} },
+    yAxis: { show: true, title: text(data.yTitle), min: num2(data.yMin), max: num2(data.yMax), step: null, gridlines: true, format: {} },
+    legend: { show: graph.nodes.some((n3) => n3.data?.titled), position: "top" },
+    ...palette ? { palette: [...palette] } : {}
+  });
+}
+function radarChartSpec(graph, palette) {
+  const data = graph.data ?? {};
+  return createChartSpec({
+    type: "radar",
+    title: graph.title ?? "",
+    categories: Array.isArray(data.axes) ? data.axes.map(String) : [],
+    series: graph.nodes.map((n3) => ({ id: n3.id, name: n3.label, values: numbers(n3.data?.values) })),
+    yAxis: { show: true, title: "", min: num2(data.min), max: num2(data.max), step: null, gridlines: true, format: {} },
+    legend: { show: data.showLegend !== false, position: "top" },
+    ...palette ? { palette: [...palette] } : {}
+  });
+}
+function targetOf(target) {
+  if (!target) return void 0;
+  if (target.kind === "series" || target.kind === "point") return target.seriesId;
+  if (target.kind === "title") return DIAGRAM_TITLE_TARGET;
+  return void 0;
+}
+function toDiagramMarks(marks, x, y) {
+  return marks.filter((m) => m.role !== "selection" && m.role !== "drag-readout").map((m) => {
+    const base = { key: m.key, role: m.role, ...targetOf(m.target) ? { target: targetOf(m.target) } : {}, ...m.opacity !== void 0 ? { opacity: m.opacity } : {} };
+    switch (m.kind) {
+      case "rect":
+        return { ...base, kind: "rect", x: m.x + x, y: m.y + y, width: m.width, height: m.height, fill: m.fill, stroke: m.stroke, strokeWidth: m.strokeWidth, radius: m.radius };
+      case "circle":
+        return { ...base, kind: "circle", cx: m.cx + x, cy: m.cy + y, r: m.r, fill: m.fill, stroke: m.stroke, strokeWidth: m.strokeWidth };
+      case "line":
+        return { ...base, kind: "line", x1: m.x1 + x, y1: m.y1 + y, x2: m.x2 + x, y2: m.y2 + y, stroke: m.stroke, strokeWidth: m.strokeWidth, dash: m.dash };
+      case "text":
+        return { ...base, kind: "text", x: m.x + x, y: m.y + y, text: m.text, anchor: m.anchor, baseline: m.baseline, size: m.size, weight: m.weight, fill: m.fill, rotate: m.rotate };
+      case "path":
+        return {
+          ...base,
+          kind: "path",
+          // Chart paths are absolute, so the whole path moves with a translate prefix.
+          d: x || y ? translatePath(m.d, x, y) : m.d,
+          fill: m.fill,
+          stroke: m.stroke,
+          strokeWidth: m.strokeWidth,
+          dash: m.dash
+        };
+    }
+  });
+}
+function translatePath(d, dx, dy) {
+  let i = 0;
+  return d.replace(/-?\d*\.?\d+(?:e-?\d+)?/gi, (v) => String(Math.round((Number(v) + (i++ % 2 === 0 ? dx : dy)) * 100) / 100));
+}
+var xyChartScene = ({ graph, theme }) => {
+  const box = XY_CHART_BOX;
+  const scene = layoutChart(xyChartSpec(graph, theme.palette), { width: box.width, height: box.height, theme: chartTheme(theme) });
+  return toDiagramMarks(scene.marks, box.x, box.y);
+};
+var radarScene = ({ graph, theme }) => {
+  const box = RADAR_CHART_BOX;
+  const scene = layoutChart(radarChartSpec(graph, theme.palette), { width: box.width, height: box.height, theme: chartTheme(theme) });
+  return toDiagramMarks(scene.marks, box.x, box.y);
+};
+
+// src/canvas/mermaid/families/sequence.ts
+var M2 = SEQUENCE_METRICS;
+var LABEL_SIZE = 14;
+var LINE_HEIGHT = 1.25;
+var SMALL_SIZE = 13;
+var TITLE_SIZE = 18;
+var NOTE_COLOR = 5;
+function displayLines(label) {
+  let text2 = label;
+  if (text2.startsWith("`") && text2.endsWith("`")) text2 = text2.slice(1, -1);
+  return text2.replace(/<br\s*\/?>/gi, "\n").replace(/#quot;/g, '"').replace(/#(\d+);/g, (_, n3) => String.fromCharCode(Number(n3))).split("\n");
+}
+function dashFor(pattern) {
+  return pattern === "dotted" ? "6 4" : pattern === "invisible" ? "0 1" : void 0;
+}
+function markerFor(head) {
+  if (head === "none" || head === "arrow_cross") return void 0;
+  return head === "arrow_open" ? "arrow" : "arrowclosed";
+}
+function textLines(lines, base) {
+  const lh = base.size * LINE_HEIGHT;
+  const top = base.cy - (lines.length - 1) * lh / 2;
+  return lines.map((text2, i) => ({
+    kind: "text",
+    key: lines.length === 1 ? base.key : `${base.key}:${i}`,
+    role: base.role,
+    ...base.target ? { target: base.target } : {},
+    x: base.x,
+    y: top + i * lh,
+    text: text2,
+    anchor: base.anchor ?? "middle",
+    baseline: "middle",
+    size: base.size,
+    fill: base.fill,
+    ...base.weight ? { weight: base.weight } : {}
+  }));
+}
+function participantMarks(node, box, mirror, theme) {
+  const prefix = mirror ? "mirror" : "participant";
+  const role = mirror ? "participant-mirror" : "participant";
+  const lines = displayLines(node.label || node.id);
+  if (node.shape !== "actor") {
+    return [
+      { kind: "rect", key: `${prefix}:${node.id}`, role, target: node.id, ...box, fill: theme.nodeFill, stroke: theme.nodeStroke, strokeWidth: 1, radius: 3 },
+      ...textLines(lines, { key: `${prefix}-label:${node.id}`, role: `${role}-label`, target: node.id, x: box.x + box.width / 2, cy: box.y + box.height / 2, size: LABEL_SIZE, fill: theme.text })
+    ];
+  }
+  const lh = LABEL_SIZE * LINE_HEIGHT;
+  const labelHeight = lines.length * lh;
+  const scale = Math.min(28 / 40, 34 / 46);
+  const figTop = box.y + box.height - labelHeight - 2 - 34 + (34 - 46 * scale) / 2;
+  const figLeft = box.x + box.width / 2 - 20 * scale;
+  const fx = (v) => figLeft + v * scale;
+  const fy = (v) => figTop + v * scale;
+  const d = `M${fx(20)},${fy(15)} V${fy(31)} M${fx(6)},${fy(21)} H${fx(34)} M${fx(20)},${fy(31)} L${fx(9)},${fy(44)} M${fx(20)},${fy(31)} L${fx(31)},${fy(44)}`;
+  return [
+    { kind: "circle", key: `${prefix}-head:${node.id}`, role: `${role}-figure`, target: node.id, cx: fx(20), cy: fy(8), r: 7 * scale, fill: theme.nodeFill, stroke: theme.nodeStroke, strokeWidth: 1.5 },
+    {
+      kind: "path",
+      key: `${prefix}-body:${node.id}`,
+      role: `${role}-figure`,
+      target: node.id,
+      d,
+      fill: "none",
+      stroke: theme.nodeStroke,
+      strokeWidth: 1.5,
+      box: { x: fx(6), y: fy(15), width: 28 * scale, height: 29 * scale }
+    },
+    ...textLines(lines, {
+      key: `${prefix}-label:${node.id}`,
+      role: `${role}-label`,
+      target: node.id,
+      x: box.x + box.width / 2,
+      cy: box.y + box.height - labelHeight / 2,
+      size: LABEL_SIZE,
+      fill: theme.text
+    })
+  ];
+}
+function crossMark(key, target, x, y, dir, stroke) {
+  const cx = x - dir * 2.8;
+  const h = 2.8;
+  return {
+    kind: "path",
+    key,
+    role: "message-head",
+    target,
+    d: `M${cx - h},${y - h} L${cx + h},${y + h} M${cx + h},${y - h} L${cx - h},${y + h}`,
+    stroke,
+    strokeWidth: 1.5
+  };
+}
+var sequenceScene = ({ graph, theme }) => {
+  const geo = sequenceGeometry(graph);
+  const marks = [];
+  for (const group of graph.groups) {
+    const box = geo.boxes.get(group.id);
+    if (!box) continue;
+    const color = typeof group.data?.color === "string" ? group.data.color : void 0;
+    marks.push(
+      { kind: "rect", key: `box:${group.id}`, role: "box", target: group.id, ...box, fill: color ?? "none", stroke: theme.groupStroke, strokeWidth: 1 },
+      ...textLines(displayLines(group.label), {
+        key: `box-label:${group.id}`,
+        role: "box-label",
+        target: group.id,
+        x: box.x + box.width / 2,
+        cy: box.y + 4 + LABEL_SIZE * LINE_HEIGHT / 2,
+        size: LABEL_SIZE,
+        weight: 600,
+        fill: theme.groupText
+      })
+    );
+  }
+  if (graph.title) {
+    const lefts = [...[...geo.columns.values()].map((c) => c.x), ...[...geo.boxes.values()].map((b) => b.x)];
+    const rights = [...[...geo.columns.values()].map((c) => c.x + c.width), ...[...geo.boxes.values()].map((b) => b.x + b.width)];
+    const tops = [0, ...[...geo.boxes.values()].map((b) => b.y)];
+    const minX = lefts.length ? Math.min(...lefts) : 0;
+    const maxX = rights.length ? Math.max(...rights) : 240;
+    marks.push({ kind: "text", key: "title", role: "title", target: DIAGRAM_TITLE_TARGET, x: (minX + maxX) / 2, y: Math.min(...tops) - 38, text: graph.title, anchor: "middle", baseline: "middle", size: TITLE_SIZE, weight: 600, fill: theme.text });
+  }
+  [...geo.fragments].map((f, i) => ({ f, i })).sort((a, b) => a.f.depth - b.f.depth || a.i - b.i).forEach(({ f, i }) => {
+    marks.push({ kind: "rect", key: `fragment:${i}`, role: "fragment", x: f.x, y: f.y, width: f.width, height: f.height, fill: "none", stroke: theme.mutedText, strokeWidth: 1.5 });
+    const tabW = estimateTextWidth2(f.keyword, SMALL_SIZE) + 22;
+    const tabH = SMALL_SIZE * LINE_HEIGHT + 4;
+    marks.push(
+      {
+        kind: "path",
+        key: `fragment-tab:${i}`,
+        role: "fragment-tab",
+        d: `M${f.x},${f.y} H${f.x + tabW} V${f.y + tabH * 0.6} L${f.x + tabW - 8},${f.y + tabH} H${f.x} Z`,
+        fill: theme.groupFill,
+        stroke: theme.mutedText,
+        strokeWidth: 1.5
+      },
+      { kind: "text", key: `fragment-keyword:${i}`, role: "fragment-keyword", x: f.x + 8, y: f.y + tabH / 2, text: f.keyword, anchor: "start", baseline: "middle", size: SMALL_SIZE, weight: 600, fill: theme.groupText }
+    );
+    if (f.text)
+      marks.push({ kind: "text", key: `fragment-text:${i}`, role: "fragment-text", x: f.x + f.width / 2, y: f.y + 3, text: `[${f.text}]`, anchor: "middle", baseline: "top", size: SMALL_SIZE, weight: 600, fill: theme.text });
+    f.dividers.forEach((d, j) => {
+      marks.push({ kind: "line", key: `fragment-divider:${i}:${j}`, role: "fragment-divider", x1: f.x, y1: d.y, x2: f.x + f.width, y2: d.y, stroke: theme.mutedText, strokeWidth: 1.5, dash: "6 4" });
+      if (d.text)
+        marks.push({ kind: "text", key: `fragment-divider-text:${i}:${j}`, role: "fragment-text", x: f.x + f.width / 2, y: d.y + 3, text: `[${d.text}]`, anchor: "middle", baseline: "top", size: SMALL_SIZE, weight: 600, fill: theme.text });
+    });
+  });
+  for (const col of geo.columns.values())
+    marks.push({ kind: "line", key: `lifeline:${col.id}`, role: "lifeline", target: col.id, x1: col.center, y1: geo.lifelineTop, x2: col.center, y2: geo.lifelineBottom, stroke: theme.grid, strokeWidth: 1 });
+  geo.activations.forEach(
+    (a, i) => marks.push({ kind: "rect", key: `activation:${i}`, role: "activation", x: a.x, y: a.top, width: M2.activationWidth, height: Math.max(8, a.bottom - a.top), fill: theme.groupFill, stroke: theme.edge, strokeWidth: 1 })
+  );
+  for (const node of graph.nodes) {
+    const col = geo.columns.get(node.id);
+    if (!col) continue;
+    marks.push(...participantMarks(node, { x: col.x, y: 0, width: col.width, height: M2.actorHeight }, false, theme));
+    marks.push(...participantMarks(node, { x: col.x, y: geo.lifelineBottom, width: col.width, height: M2.actorHeight }, true, theme));
+  }
+  const noteColor = sceneColor(theme, NOTE_COLOR);
+  geo.notes.forEach((n3, i) => {
+    const box = { x: n3.x, y: n3.y, width: n3.width, height: n3.height };
+    marks.push(
+      { kind: "rect", key: `note-bg:${i}`, role: "note", ...box, fill: theme.background },
+      { kind: "rect", key: `note-fill:${i}`, role: "note", ...box, fill: noteColor, opacity: 0.3 },
+      { kind: "rect", key: `note:${i}`, role: "note", ...box, fill: "none", stroke: noteColor, strokeWidth: 1 },
+      ...textLines(displayLines(n3.text), { key: `note-text:${i}`, role: "note-text", x: n3.x + n3.width / 2, cy: n3.y + n3.height / 2, size: LABEL_SIZE, fill: theme.text })
+    );
+  });
+  const edges = new Map(graph.edges.map((e) => [e.id, e]));
+  const autonumber = !!graph.data?.autonumber;
+  geo.messages.forEach((row, index) => {
+    const edge = edges.get(row.edgeId);
+    if (!edge) return;
+    const x1 = geo.columns.get(edge.source)?.center ?? 0;
+    const x2 = geo.columns.get(edge.target)?.center ?? 0;
+    const y = row.y;
+    const stroke = theme.edge;
+    const strokeWidth = edge.pattern === "thick" ? 3.5 : 1.5;
+    const dash = dashFor(edge.pattern);
+    const markerEnd = markerFor(edge.arrowEnd);
+    const markerStart = markerFor(edge.arrowStart);
+    const heads = { ...markerEnd ? { markerEnd } : {}, ...markerStart ? { markerStart } : {} };
+    let endX;
+    let endDir;
+    let startDir;
+    let endY = y;
+    let startY = y;
+    if (row.self) {
+      endX = x1 + 4;
+      endDir = -1;
+      startDir = -1;
+      endY = y + 10;
+      startY = y - 10;
+      marks.push({
+        kind: "path",
+        key: `message:${edge.id}`,
+        role: "message",
+        target: edge.id,
+        d: `M${x1},${y - 10} H${x1 + 44} V${y + 10} H${x1 + 4}`,
+        fill: "none",
+        stroke,
+        strokeWidth,
+        ...dash ? { dash } : {},
+        ...heads,
+        box: { x: x1, y: y - 10, width: 44, height: 20 }
+      });
+    } else {
+      endX = x2 + (x2 > x1 ? -2 : 2);
+      endDir = x2 >= x1 ? 1 : -1;
+      startDir = -endDir;
+      marks.push({ kind: "line", key: `message:${edge.id}`, role: "message", target: edge.id, x1, y1: y, x2: endX, y2: y, stroke, strokeWidth, ...dash ? { dash } : {}, ...heads });
+    }
+    if (edge.arrowEnd === "arrow_cross") marks.push(crossMark(`message-cross-end:${edge.id}`, edge.id, endX, endY, endDir, stroke));
+    if (edge.arrowStart === "arrow_cross") marks.push(crossMark(`message-cross-start:${edge.id}`, edge.id, x1, startY, startDir, stroke));
+    if (autonumber)
+      marks.push(
+        { kind: "circle", key: `number-dot:${edge.id}`, role: "message-number", target: edge.id, cx: x1, cy: y, r: 10, fill: stroke },
+        { kind: "text", key: `number:${edge.id}`, role: "message-number", target: edge.id, x: x1, y, text: String(index + 1), anchor: "middle", baseline: "middle", size: 11, weight: 600, fill: theme.background }
+      );
+    const label = edge.label ? displayLines(edge.label).join(" ") : "";
+    if (label)
+      marks.push({
+        kind: "text",
+        key: `message-label:${edge.id}`,
+        role: "message-label",
+        target: edge.id,
+        x: row.self ? x1 + 52 + 4 : (x1 + x2) / 2,
+        y: row.self ? y - 18 : y - 13,
+        text: label,
+        anchor: row.self ? "start" : "middle",
+        baseline: "middle",
+        size: LABEL_SIZE,
+        fill: theme.text
+      });
+  });
+  return marks;
+};
+
+// src/canvas/mermaid/families/journey.ts
+var M3 = JOURNEY_METRICS;
+var TITLE_SIZE2 = 32;
+function actorColor(theme, slot) {
+  return sceneColor(theme, M3.sectionColours + slot);
+}
+function wrapLines(text2, size, max) {
+  const lines = [];
+  for (const para of text2.replace(/<br\s*\/?>/gi, "\n").split("\n")) {
+    let line4 = "";
+    for (const word of para.split(/\s+/).filter(Boolean)) {
+      const next = line4 ? `${line4} ${word}` : word;
+      if (line4 && estimateTextWidth2(next, size) > max) {
+        lines.push(line4);
+        line4 = word;
+      } else line4 = next;
+    }
+    lines.push(line4);
+  }
+  return lines;
+}
+function boxLabel(key, role, target, text2, box, fill) {
+  let size = M3.fontSize;
+  let lines = wrapLines(text2, size, box.width - 10);
+  if (lines.length > 2) {
+    size = 13;
+    lines = wrapLines(text2, size, box.width - 8);
+  }
+  const lineHeight = size * 1.15;
+  const max = Math.max(1, Math.floor(box.height / lineHeight));
+  if (lines.length > max) lines = [...lines.slice(0, max - 1), `${lines[max - 1]}\u2026`];
+  const top = box.y + box.height / 2 - lines.length * lineHeight / 2 + lineHeight / 2;
+  return lines.map((line4, i) => ({
+    kind: "text",
+    key: `${key}:${i}`,
+    role,
+    target,
+    x: box.x + box.width / 2,
+    y: top + i * lineHeight,
+    text: line4,
+    anchor: "middle",
+    baseline: "middle",
+    size,
+    fill
+  }));
+}
+var journeyScene = ({ graph, theme }) => {
+  const geo = journeyGeometry(graph);
+  const marks = [];
+  const ink = theme.mutedText;
+  if (graph.title)
+    marks.push({
+      kind: "text",
+      key: "title",
+      role: "title",
+      target: DIAGRAM_TITLE_TARGET,
+      x: geo.title.x,
+      y: geo.title.baseline + 7,
+      text: graph.title,
+      anchor: "start",
+      baseline: "bottom",
+      size: TITLE_SIZE2,
+      weight: 700,
+      fill: theme.text
+    });
+  for (const t of geo.tasks.values())
+    marks.push({ kind: "line", key: `task-line:${t.id}`, role: "task-line", x1: t.face.x, y1: t.y, x2: t.face.x, y2: M3.lineBottom, stroke: theme.grid, strokeWidth: 1, dash: "4 2" });
+  marks.push({
+    kind: "line",
+    key: "axis",
+    role: "axis",
+    x1: geo.axis.x1,
+    y1: geo.axis.y,
+    x2: geo.axis.x2,
+    y2: geo.axis.y,
+    stroke: theme.edge,
+    strokeWidth: M3.axisWidth,
+    markerEnd: "arrowclosed"
+  });
+  for (const l of geo.legend)
+    marks.push(
+      { kind: "circle", key: `legend-dot:${l.name}`, role: "legend", cx: l.x, cy: l.y, r: M3.actorRadius, fill: actorColor(theme, l.colour), stroke: theme.nodeStroke, strokeWidth: 1 },
+      { kind: "text", key: `legend:${l.name}`, role: "legend", x: l.labelX, y: l.y, text: l.name, anchor: "start", baseline: "middle", size: M3.fontSize, fill: theme.text }
+    );
+  for (const t of geo.tasks.values()) {
+    const { x, y } = t.face;
+    const r = M3.faceRadius;
+    marks.push(
+      { kind: "circle", key: `face:${t.id}`, role: "face", target: t.id, cx: x, cy: y, r, fill: theme.nodeFill, stroke: ink, strokeWidth: 2 },
+      { kind: "circle", key: `eye-l:${t.id}`, role: "face-eye", cx: x - r / 3, cy: y - r / 3, r: 1.5, fill: ink, stroke: ink, strokeWidth: 2 },
+      { kind: "circle", key: `eye-r:${t.id}`, role: "face-eye", cx: x + r / 3, cy: y - r / 3, r: 1.5, fill: ink, stroke: ink, strokeWidth: 2 }
+    );
+    if (t.score > 3)
+      marks.push({ kind: "path", key: `mouth:${t.id}`, role: "face-mouth", d: `M${x + 7},${y + 2} A7,7 0 0 1 ${x - 7},${y + 2}`, fill: "none", stroke: ink, strokeWidth: 1, box: { x: x - 7, y: y + 2, width: 14, height: 7 } });
+    else if (t.score < 3)
+      marks.push({ kind: "path", key: `mouth:${t.id}`, role: "face-mouth", d: `M${x - 7},${y + 7} A7,7 0 0 1 ${x + 7},${y + 7}`, fill: "none", stroke: ink, strokeWidth: 1, box: { x: x - 7, y, width: 14, height: 7 } });
+    else marks.push({ kind: "line", key: `mouth:${t.id}`, role: "face-mouth", x1: x - 5, y1: y + 7, x2: x + 5, y2: y + 7, stroke: ink, strokeWidth: 1 });
+  }
+  for (const group of graph.groups) {
+    const s = geo.sections.get(group.id);
+    if (!s) continue;
+    marks.push({
+      kind: "rect",
+      key: `section:${s.id}`,
+      role: "section",
+      target: s.id,
+      x: s.x,
+      y: s.y,
+      width: s.width,
+      height: s.height,
+      fill: sceneColor(theme, s.colour),
+      stroke: theme.nodeStroke,
+      strokeWidth: 1,
+      radius: 3,
+      // Mermaid draws no bar for an empty section; it is parked after the tasks, faded.
+      ...s.empty ? { dash: "4 3", opacity: 0.6 } : {}
+    });
+    marks.push(...boxLabel(`section-label:${s.id}`, "section-label", s.id, group.label, s, theme.paletteText).map((m) => s.empty ? { ...m, opacity: 0.6 } : m));
+  }
+  for (const node of graph.nodes) {
+    const t = geo.tasks.get(node.id);
+    if (!t) continue;
+    marks.push({
+      kind: "rect",
+      key: `task:${t.id}`,
+      role: "task",
+      target: t.id,
+      x: t.x,
+      y: t.y,
+      width: t.width,
+      height: t.height,
+      fill: sceneColor(theme, t.colour),
+      stroke: theme.nodeStroke,
+      strokeWidth: 1,
+      radius: 3
+    });
+    marks.push(...boxLabel(`task-label:${t.id}`, "task-label", t.id, node.label ?? node.id, t, theme.paletteText));
+    for (const a of t.actors)
+      marks.push({ kind: "circle", key: `actor:${t.id}:${a.name}`, role: "actor", target: t.id, cx: a.x, cy: a.y, r: M3.actorRadius, fill: actorColor(theme, a.colour), stroke: theme.nodeStroke, strokeWidth: 1 });
+  }
+  return marks;
+};
+
+// src/canvas/mermaid/families/quadrant.ts
+var M4 = QUADRANT_METRICS;
+var QUADRANT_TINT = 0.18;
+var quadrantScene = ({ graph, theme }) => {
+  const geo = quadrantGeometry(graph);
+  const marks = [];
+  const groups = new Map(graph.groups.map((g) => [g.id, g]));
+  for (const q of geo.quadrants) {
+    const group = groups.get(q.id);
+    marks.push({ kind: "rect", key: `quadrant-fill:${q.id}`, role: "quadrant-fill", x: q.x, y: q.y, width: q.width, height: q.height, fill: sceneColor(theme, q.n - 1), opacity: QUADRANT_TINT });
+    marks.push({ kind: "rect", key: `quadrant:${q.id}`, role: "quadrant", ...group ? { target: q.id } : {}, x: q.x, y: q.y, width: q.width, height: q.height, fill: "transparent" });
+  }
+  for (const q of geo.quadrants) {
+    const group = groups.get(q.id);
+    if (!group || group.data?.placeholder || !group.label) continue;
+    marks.push({
+      kind: "text",
+      key: `quadrant-label:${q.id}`,
+      role: "quadrant-label",
+      target: q.id,
+      x: q.labelX,
+      y: q.labelY,
+      text: group.label,
+      anchor: "middle",
+      baseline: q.labelBaseline,
+      size: M4.quadrantLabelFontSize,
+      fill: theme.text
+    });
+  }
+  geo.borders.forEach(
+    (b, i) => marks.push({
+      kind: "line",
+      key: `border:${i}`,
+      role: b.external ? "border" : "divider",
+      x1: b.x1,
+      y1: b.y1,
+      x2: b.x2,
+      y2: b.y2,
+      stroke: theme.nodeStroke,
+      strokeWidth: b.external ? M4.externalBorderWidth : M4.internalBorderWidth
+    })
+  );
+  for (const l of geo.axisLabels)
+    marks.push({
+      kind: "text",
+      key: `axis:${l.key}`,
+      role: "axis-label",
+      x: l.x,
+      y: l.y,
+      text: l.text,
+      anchor: l.anchor,
+      baseline: "top",
+      size: l.rotation ? M4.yAxisLabelFontSize : M4.xAxisLabelFontSize,
+      fill: theme.text,
+      ...l.rotation ? { rotate: l.rotation } : {}
+    });
+  if (geo.title)
+    marks.push({ kind: "text", key: "title", role: "title", target: DIAGRAM_TITLE_TARGET, x: geo.title.x, y: geo.title.y, text: geo.title.text, anchor: "middle", baseline: "top", size: M4.titleFontSize, fill: theme.text });
+  for (const p of geo.points) {
+    const fill = p.color ?? sceneColor(theme, 0);
+    const strokeWidth = p.strokeWidth ? parseFloat(p.strokeWidth) : 0;
+    marks.push({
+      kind: "circle",
+      key: `point:${p.id}`,
+      role: "point",
+      target: p.id,
+      cx: p.cx,
+      cy: p.cy,
+      r: p.radius,
+      fill,
+      ...Number.isFinite(strokeWidth) && strokeWidth > 0 ? { stroke: p.strokeColor ?? fill, strokeWidth } : {}
+    });
+    marks.push({
+      kind: "text",
+      key: `point-label:${p.id}`,
+      role: "point-label",
+      target: p.id,
+      x: p.cx,
+      y: p.cy + M4.pointTextPadding,
+      text: p.label.replace(/<br\s*\/?>/gi, " "),
+      anchor: "middle",
+      baseline: "top",
+      size: M4.pointLabelFontSize,
+      fill: theme.text
+    });
+  }
+  return marks;
+};
+
+// src/canvas/mermaid/families/gitgraph.ts
+var M5 = GIT_METRICS;
+function rot([dx, dy], deg) {
+  const a = deg * Math.PI / 180;
+  const c = Math.cos(a);
+  const s = Math.sin(a);
+  return [dx * c - dy * s, dx * s + dy * c];
+}
+var polygon = (points) => `M${points.map(([x, y]) => `${round2(x)},${round2(y)}`).join(" L")} Z`;
+var round2 = (v) => Math.round(v * 100) / 100;
+function boxOf(points) {
+  const xs = points.map((p) => p[0]);
+  const ys = points.map((p) => p[1]);
+  const x = Math.min(...xs);
+  const y = Math.min(...ys);
+  return { x, y, width: Math.max(...xs) - x, height: Math.max(...ys) - y };
+}
+function arrowBox(d) {
+  const points = [];
+  for (const [, cmd, args] of d.matchAll(/([MLA])([^MLA]*)/g)) {
+    const nums = (args.match(/-?\d+(?:\.\d+)?(?:e-?\d+)?/gi) ?? []).map(Number);
+    if (cmd === "A") {
+      for (let i = 0; i + 6 < nums.length; i += 7) points.push([nums[i + 5], nums[i + 6]]);
+    } else for (let i = 0; i + 1 < nums.length; i += 2) points.push([nums[i], nums[i + 1]]);
+  }
+  return points.length ? boxOf(points) : { x: 0, y: 0, width: 0, height: 0 };
+}
+function commitSymbol(c, theme) {
+  const color = sceneColor(theme, c.color);
+  const base = { target: c.id };
+  switch (c.symbol) {
+    case "HIGHLIGHT":
+      return [
+        { kind: "rect", key: `commit:${c.id}`, role: "commit", ...base, x: c.x - 10, y: c.y - 10, width: 20, height: 20, fill: theme.text, stroke: theme.text },
+        { kind: "rect", key: `commit-inner:${c.id}`, role: "commit-inner", ...base, x: c.x - 6, y: c.y - 6, width: 12, height: 12, fill: color, stroke: color }
+      ];
+    case "CHERRY_PICK":
+      return [
+        { kind: "circle", key: `commit:${c.id}`, role: "commit", ...base, cx: c.x, cy: c.y, r: M5.commitRadius, fill: theme.text },
+        { kind: "circle", key: `cherry-l:${c.id}`, role: "cherry", ...base, cx: c.x - 3, cy: c.y + 2, r: 2.75, fill: theme.background },
+        { kind: "circle", key: `cherry-r:${c.id}`, role: "cherry", ...base, cx: c.x + 3, cy: c.y + 2, r: 2.75, fill: theme.background },
+        {
+          kind: "path",
+          key: `cherry-stem:${c.id}`,
+          role: "cherry-stem",
+          ...base,
+          d: `M${c.x + 3},${c.y + 1} L${c.x},${c.y - 5} M${c.x - 3},${c.y + 1} L${c.x},${c.y - 5}`,
+          fill: "none",
+          stroke: theme.background
+        }
+      ];
+    default: {
+      const marks = [{ kind: "circle", key: `commit:${c.id}`, role: "commit", ...base, cx: c.x, cy: c.y, r: M5.commitRadius, fill: color, stroke: color }];
+      if (c.symbol === "MERGE")
+        marks.push({ kind: "circle", key: `commit-inner:${c.id}`, role: "commit-inner", ...base, cx: c.x, cy: c.y, r: 6, fill: theme.background, stroke: theme.background });
+      if (c.symbol === "REVERSE")
+        marks.push({
+          kind: "path",
+          key: `commit-reverse:${c.id}`,
+          role: "commit-reverse",
+          ...base,
+          d: `M${c.x - 5},${c.y - 5} L${c.x + 5},${c.y + 5} M${c.x - 5},${c.y + 5} L${c.x + 5},${c.y - 5}`,
+          fill: "none",
+          stroke: theme.background,
+          strokeWidth: 3
+        });
+      return marks;
+    }
+  }
+}
+function commitLabel(c, text2, direction, theme) {
+  const w = estimateTextWidth(text2, M5.labelFontSize);
+  const anchor = direction === "LR" ? [1 - 0.026 * w, 18.1 - 0.0136 * w] : [-14.9, 9.2];
+  const ax = c.x + anchor[0];
+  const ay = c.y + anchor[1];
+  const corners = [[-w - 4, -7], [0, -7], [0, 7], [-w - 4, 7]].map((p) => {
+    const [dx, dy] = rot(p, -45);
+    return [ax + dx, ay + dy];
+  });
+  const [tx, ty] = rot([-2, 0], -45);
+  return [
+    { kind: "path", key: `label-bg:${c.id}`, role: "commit-label-bg", target: c.id, d: polygon(corners), fill: theme.edgeLabelBackground, opacity: 0.5 },
+    { kind: "text", key: `label:${c.id}`, role: "commit-label", target: c.id, x: ax + tx, y: ay + ty, text: text2, anchor: "end", baseline: "middle", size: M5.labelFontSize, fill: theme.text, rotate: -45 }
+  ];
+}
+function commitTag(c, text2, index, direction, theme) {
+  const w = estimateTextWidth(text2, M5.labelFontSize);
+  const h2 = M5.labelTextHeight / 2;
+  const key = `${c.id}:${index}`;
+  let points;
+  let hole;
+  let label;
+  let rotate;
+  if (direction === "LR") {
+    const ly = -19.2 - index * 20;
+    const local = [
+      [-w / 2 - 12, ly + 2],
+      [-w / 2 - 12, ly - 2],
+      [-w / 2 - 4, ly - h2 - 2],
+      [w / 2 + 4, ly - h2 - 2],
+      [w / 2 + 4, ly + h2 + 2],
+      [-w / 2 - 4, ly + h2 + 2]
+    ];
+    points = local.map(([x, y]) => [c.x + x, c.y + y]);
+    hole = [c.x - w / 2 - 8, c.y + ly];
+    label = [c.x, c.y + ly];
+  } else {
+    const ox = c.x + 12;
+    const oy = c.y + 2 + index * 20;
+    const place2 = (p) => {
+      const [dx, dy] = rot(p, 45);
+      return [ox + dx, oy + dy];
+    };
+    points = [[0, 2], [0, -2], [10, -h2 - 2], [14 + w, -h2 - 2], [14 + w, h2 + 2], [10, h2 + 2]].map(place2);
+    hole = place2([2, 0]);
+    label = place2([12 + w / 2, 0]);
+    rotate = 45;
+  }
+  return [
+    { kind: "path", key: `tag:${key}`, role: "tag", target: c.id, d: polygon(points), fill: theme.groupFill, stroke: theme.groupStroke },
+    { kind: "circle", key: `tag-hole:${key}`, role: "tag-hole", target: c.id, cx: hole[0], cy: hole[1], r: 1.5, fill: theme.text },
+    {
+      kind: "text",
+      key: `tag-label:${key}`,
+      role: "tag-label",
+      target: c.id,
+      x: label[0],
+      y: label[1],
+      text: text2,
+      anchor: "middle",
+      baseline: "middle",
+      size: M5.labelFontSize,
+      fill: theme.text,
+      ...rotate !== void 0 ? { rotate } : {}
+    }
+  ];
+}
+var gitGraphScene = ({ graph, theme }) => {
+  const geo = gitGraphGeometry(graph);
+  const marks = [];
+  for (const lane of geo.lanes) {
+    const { x1, y1, x2, y2 } = lane.line;
+    marks.push({ kind: "line", key: `lane:${lane.branch}`, role: "lane", x1, y1, x2, y2, stroke: theme.grid, strokeWidth: 1, dash: "2 2" });
+  }
+  for (const edge of graph.edges) {
+    const arrow = geo.arrows.get(edge.id);
+    if (!arrow) continue;
+    marks.push({
+      kind: "path",
+      key: `arrow:${edge.id}`,
+      role: "parent-link",
+      target: edge.id,
+      d: arrow.path,
+      fill: "none",
+      stroke: sceneColor(theme, arrow.color),
+      strokeWidth: 8,
+      box: arrowBox(arrow.path)
+    });
+  }
+  const groups = new Map(graph.groups.map((g) => [g.id, g]));
+  for (const lane of geo.lanes) {
+    const group = groups.get(lane.branch);
+    if (!group) continue;
+    const { x, y, width, height } = lane.label;
+    const color = sceneColor(theme, lane.color);
+    marks.push(
+      { kind: "rect", key: `branch:${lane.branch}`, role: "branch", target: lane.branch, x, y, width, height, fill: color, radius: 4 },
+      {
+        kind: "text",
+        key: `branch-label:${lane.branch}`,
+        role: "branch-label",
+        target: lane.branch,
+        x: x + width / 2,
+        y: y + height / 2,
+        text: group.label || group.id,
+        anchor: "middle",
+        baseline: "middle",
+        size: M5.branchFontSize,
+        fill: theme.paletteText
+      }
+    );
+  }
+  for (const node of graph.nodes) {
+    const c = geo.commits.get(node.id);
+    if (!c) continue;
+    marks.push(...commitSymbol(c, theme));
+    if (c.label !== void 0) marks.push(...commitLabel(c, c.label, geo.direction, theme));
+    c.tags.forEach((t, i) => marks.push(...commitTag(c, t, i, geo.direction, theme)));
+  }
+  return marks;
+};
+
+// src/canvas/mermaid/families/mindmap.ts
+var M6 = MINDMAP_METRICS;
+var round3 = (v) => Math.round(v * 100) / 100;
+function displayLabel(label) {
+  let text2 = label;
+  if (text2.startsWith("`") && text2.endsWith("`")) text2 = text2.slice(1, -1);
+  return text2.replace(/<br\s*\/?>/gi, "\n").replace(/#quot;/g, '"').replace(/#(\d+);/g, (_, n3) => String.fromCharCode(Number(n3)));
+}
+function arcOutline(x, y, arcs) {
+  let px2 = x;
+  let py = y;
+  const xs = [x];
+  const ys = [y];
+  const parts = [`M${round3(x)},${round3(y)}`];
+  for (const a of arcs) {
+    parts.push(`a${round3(a.rx)},${round3(a.ry)} ${a.rotation} ${a.large},${a.sweep} ${round3(a.dx)},${round3(a.dy)}`);
+    for (const [sx, sy] of sampleArc(px2, py, a)) {
+      xs.push(sx);
+      ys.push(sy);
+    }
+    px2 += a.dx;
+    py += a.dy;
+  }
+  parts.push(`H${round3(x)} V${round3(y)} Z`);
+  const bx = Math.min(...xs);
+  const by = Math.min(...ys);
+  return { d: parts.join(" "), box: { x: bx, y: by, width: Math.max(...xs) - bx, height: Math.max(...ys) - by } };
+}
+function sampleArc(x1, y1, a) {
+  const x2 = x1 + a.dx;
+  const y2 = y1 + a.dy;
+  let rx = Math.abs(a.rx);
+  let ry = Math.abs(a.ry);
+  if (!rx || !ry || a.dx === 0 && a.dy === 0) return [[x2, y2]];
+  const phi = a.rotation * Math.PI / 180;
+  const cos = Math.cos(phi);
+  const sin = Math.sin(phi);
+  const hx = (x1 - x2) / 2;
+  const hy = (y1 - y2) / 2;
+  const x1p = cos * hx + sin * hy;
+  const y1p = -sin * hx + cos * hy;
+  const lambda = x1p * x1p / (rx * rx) + y1p * y1p / (ry * ry);
+  if (lambda > 1) {
+    rx *= Math.sqrt(lambda);
+    ry *= Math.sqrt(lambda);
+  }
+  const num4 = rx * rx * ry * ry - rx * rx * y1p * y1p - ry * ry * x1p * x1p;
+  const den = rx * rx * y1p * y1p + ry * ry * x1p * x1p;
+  const k = (a.large === a.sweep ? -1 : 1) * Math.sqrt(Math.max(0, num4 / den));
+  const cxp = k * rx * y1p / ry;
+  const cyp = -k * ry * x1p / rx;
+  const cx = cos * cxp - sin * cyp + (x1 + x2) / 2;
+  const cy = sin * cxp + cos * cyp + (y1 + y2) / 2;
+  const angle = (ux, uy, vx, vy) => Math.atan2(ux * vy - uy * vx, ux * vx + uy * vy);
+  const t1 = angle(1, 0, (x1p - cxp) / rx, (y1p - cyp) / ry);
+  let dt = angle((x1p - cxp) / rx, (y1p - cyp) / ry, (-x1p - cxp) / rx, (-y1p - cyp) / ry);
+  if (!a.sweep && dt > 0) dt -= 2 * Math.PI;
+  if (a.sweep && dt < 0) dt += 2 * Math.PI;
+  const out = [];
+  const steps = 24;
+  for (let i = 1; i <= steps; i++) {
+    const t = t1 + dt * i / steps;
+    out.push([cx + rx * Math.cos(t) * cos - ry * Math.sin(t) * sin, cy + rx * Math.cos(t) * sin + ry * Math.sin(t) * cos]);
+  }
+  return out;
+}
+var arc = (rx, ry, rotation, sweep, dx, dy) => ({ rx, ry, rotation, large: 0, sweep, dx, dy });
+function topicShape(t, x0, y0, fill, underline) {
+  const { width: w, height: h } = t;
+  const base = { target: t.id, role: "topic" };
+  const key = `topic:${t.id}`;
+  switch (t.form) {
+    case "circle":
+      return [{ kind: "circle", key, ...base, cx: x0 + w / 2, cy: y0 + h / 2, r: w / 2, fill }];
+    case "square":
+      return [{ kind: "rect", key, ...base, x: x0, y: y0, width: w, height: h, fill }];
+    case "rounded":
+      return [{ kind: "rect", key, ...base, x: x0, y: y0, width: w, height: h, fill, radius: 5 }];
+    case "hexagon": {
+      const m = h / 4;
+      const pts = [
+        [m, h],
+        [w - m, h],
+        [w, h / 2],
+        [w - m, 0],
+        [m, 0],
+        [0, h / 2]
+      ];
+      return [{ kind: "path", key, ...base, d: `M${pts.map(([x, y]) => `${round3(x0 + x)},${round3(y0 + y)}`).join(" L")} Z`, fill }];
+    }
+    case "cloud": {
+      const r1 = 0.15 * w;
+      const r22 = 0.25 * w;
+      const r3 = 0.35 * w;
+      const r4 = 0.2 * w;
+      const { d, box } = arcOutline(x0, y0, [
+        arc(r1, r1, 0, 1, w * 0.25, -w * 0.1),
+        arc(r3, r3, 1, 1, w * 0.4, -w * 0.1),
+        arc(r22, r22, 1, 1, w * 0.35, w * 0.2),
+        arc(r1, r1, 1, 1, w * 0.15, h * 0.35),
+        arc(r4, r4, 1, 1, -w * 0.15, h * 0.65),
+        arc(r22, r1, 1, 1, -w * 0.25, w * 0.15),
+        arc(r3, r3, 1, 1, -w * 0.5, 0),
+        arc(r1, r1, 1, 1, -w * 0.25, -w * 0.15),
+        arc(r1, r1, 1, 1, -w * 0.1, -h * 0.35),
+        arc(r4, r4, 1, 1, w * 0.1, -h * 0.65)
+      ]);
+      return [{ kind: "path", key, ...base, d, fill, box }];
+    }
+    case "bang": {
+      const r = 0.15 * w;
+      const { d, box } = arcOutline(x0, y0, [
+        arc(r, r, 1, 0, w * 0.25, -h * 0.1),
+        arc(r, r, 1, 0, w * 0.25, 0),
+        arc(r, r, 1, 0, w * 0.25, 0),
+        arc(r, r, 1, 0, w * 0.25, h * 0.1),
+        arc(r, r, 1, 0, w * 0.15, h * 0.33),
+        arc(r * 0.8, r * 0.8, 1, 0, 0, h * 0.34),
+        arc(r, r, 1, 0, -w * 0.15, h * 0.33),
+        arc(r, r, 1, 0, -w * 0.25, h * 0.15),
+        arc(r, r, 1, 0, -w * 0.25, 0),
+        arc(r, r, 1, 0, -w * 0.25, 0),
+        arc(r, r, 1, 0, -w * 0.25, -h * 0.15),
+        arc(r, r, 1, 0, -w * 0.1, -h * 0.33),
+        arc(r * 0.8, r * 0.8, 1, 0, 0, -h * 0.34),
+        arc(r, r, 1, 0, w * 0.1, -h * 0.33)
+      ]);
+      return [{ kind: "path", key, ...base, d, fill, box }];
+    }
+    default:
+      return [
+        { kind: "rect", key, ...base, x: x0, y: y0, width: w, height: h, fill, radius: 5 },
+        { kind: "line", key: `underline:${t.id}`, role: "topic-underline", target: t.id, x1: x0, y1: y0 + h, x2: x0 + w, y2: y0 + h, stroke: underline, strokeWidth: 3 }
+      ];
+  }
+}
+function topicColors(t, theme) {
+  const underline = sceneColor(theme, t.section + Math.floor(theme.palette.length / 2));
+  if (t.section < 0) return { fill: theme.nodeStroke, label: theme.background, underline };
+  return { fill: sceneColor(theme, t.section), label: theme.paletteText, underline };
+}
+function iconGlyph(icon) {
+  const name = icon.trim().split(/\s+/).pop() ?? "";
+  const word = name.replace(/^(fa[a-z]?|mdi|bi|icon)-/, "");
+  return (word[0] ?? "?").toUpperCase();
+}
+var mindmapScene = ({ graph, theme }) => {
+  const geo = mindmapGeometry(graph);
+  const marks = [];
+  for (const e of geo.edges) {
+    const a = geo.topics.get(e.source);
+    const b = geo.topics.get(e.target);
+    if (!a || !b) continue;
+    marks.push({ kind: "line", key: `branch:${e.edgeId}`, role: "branch", x1: a.x, y1: a.y, x2: b.x, y2: b.y, stroke: sceneColor(theme, e.section), strokeWidth: e.width });
+  }
+  for (const node of graph.nodes) {
+    const t = geo.topics.get(node.id);
+    if (!t) continue;
+    const x0 = t.x - t.width / 2;
+    const y0 = t.y - t.height / 2;
+    const colors = topicColors(t, theme);
+    marks.push(...topicShape(t, x0, y0, colors.fill, colors.underline));
+    const top = t.y - t.lines.length * M6.lineHeight / 2;
+    t.lines.forEach((line4, i) => {
+      const text2 = displayLabel(line4);
+      if (!text2) return;
+      marks.push({
+        kind: "text",
+        key: `label:${t.id}:${i}`,
+        role: "topic-label",
+        target: t.id,
+        x: t.x,
+        y: top + (i + 0.5) * M6.lineHeight,
+        text: text2,
+        anchor: "middle",
+        baseline: "middle",
+        size: M6.fontSize,
+        fill: colors.label
+      });
+    });
+    const icon = typeof node.data?.icon === "string" ? node.data.icon : void 0;
+    if (icon) {
+      marks.push(
+        { kind: "circle", key: `icon:${t.id}`, role: "icon", target: t.id, cx: x0, cy: y0, r: 11, fill: colors.fill, stroke: theme.background, strokeWidth: 2 },
+        { kind: "text", key: `icon-glyph:${t.id}`, role: "icon", target: t.id, x: x0, y: y0, text: iconGlyph(icon), anchor: "middle", baseline: "middle", size: 12, fill: colors.label }
+      );
+    }
+  }
+  return marks;
+};
+
+// src/canvas/mermaid/families/c4.ts
+var C4_COLORS = {
+  person: { bg: "#08427b", border: "#073b6f" },
+  system: { bg: "#1168bd", border: "#3c7fc0" },
+  container: { bg: "#438dd5", border: "#3c7fc0" },
+  component: { bg: "#85bbf0", border: "#78a8d8" },
+  external_person: { bg: "#686868", border: "#8a8a8a" },
+  external_system: { bg: "#999999", border: "#8a8a8a" },
+  external_container: { bg: "#b3b3b3", border: "#a6a6a6" },
+  external_component: { bg: "#cccccc", border: "#bfbfbf" }
+};
+var C4_ELEMENT_FG = "#ffffff";
+var NAME_SIZE = 14;
+var TYPE_SIZE = 10.5;
+var DESCR_SIZE = 11.48;
+var LINE_HEIGHT2 = 1.15;
+var SECTION_GAP = 3;
+var REL_FONT = 12;
+var REL_LINE = 14;
+var REL_GAP = 3;
+function colorsOf(type) {
+  return C4_COLORS[`${type.external ? "external_" : ""}${type.base}`] ?? C4_COLORS.container;
+}
+var styleOf = (data) => data?.c4Style ?? {};
+function titleMark(graph, layout2, theme) {
+  if (!graph.title) return null;
+  const groupIds = new Set(graph.groups.map((g) => g.id));
+  const roots = [...graph.nodes, ...graph.groups].filter((n3) => !(n3.parentId && groupIds.has(n3.parentId)) && layout2.positions[n3.id] && layout2.sizes[n3.id]);
+  const minX = roots.length ? Math.min(...roots.map((n3) => layout2.positions[n3.id][0])) : 0;
+  const maxX = roots.length ? Math.max(...roots.map((n3) => layout2.positions[n3.id][0] + layout2.sizes[n3.id].width)) : 240;
+  const minY = roots.length ? Math.min(...roots.map((n3) => layout2.positions[n3.id][1])) : 0;
+  return { kind: "text", key: "title", role: "title", target: DIAGRAM_TITLE_TARGET, x: (minX + maxX) / 2, y: minY - 56 + 18, text: graph.title, anchor: "middle", baseline: "middle", size: 18, weight: 600, fill: theme.text };
+}
+var c4Scene = ({ graph, layout: layout2, theme }) => {
+  const marks = [];
+  const box = (id) => {
+    const p = layout2.positions[id];
+    const s = layout2.sizes[id];
+    return p && s ? { x: p[0], y: p[1], width: s.width, height: s.height } : null;
+  };
+  const groupIds = new Set(graph.groups.map((g) => g.id));
+  const depth2 = (id) => {
+    let d = 0;
+    const seen = /* @__PURE__ */ new Set();
+    let p = graph.groups.find((g) => g.id === id)?.parentId;
+    while (p && groupIds.has(p) && !seen.has(p)) {
+      seen.add(p);
+      d++;
+      p = graph.groups.find((g) => g.id === p)?.parentId;
+    }
+    return d;
+  };
+  for (const group of [...graph.groups].sort((a, b) => depth2(a.id) - depth2(b.id))) {
+    const b = box(group.id);
+    if (!b) continue;
+    const text2 = c4BoundaryText(group);
+    const cx = b.x + b.width / 2;
+    marks.push({ kind: "rect", key: `boundary:${group.id}`, role: "boundary", target: group.id, ...b, radius: 2.5, fill: "none", stroke: theme.groupStroke, strokeWidth: 1, dash: text2.solid ? void 0 : "7 7" });
+    marks.push({ kind: "text", key: `boundary-label:${group.id}`, role: "boundary-label", target: group.id, x: cx, y: b.y + text2.labelY, text: text2.label, anchor: "middle", baseline: "middle", size: 16, weight: 700, fill: theme.groupText });
+    marks.push({ kind: "text", key: `boundary-type:${group.id}`, role: "boundary-type", target: group.id, x: cx, y: b.y + text2.typeY, text: text2.type, anchor: "middle", baseline: "middle", size: 14, fill: theme.groupText });
+    if (text2.descr && text2.descrY !== void 0)
+      marks.push({ kind: "text", key: `boundary-descr:${group.id}`, role: "boundary-descr", target: group.id, x: cx, y: b.y + text2.descrY, text: text2.descr, anchor: "middle", baseline: "middle", size: 12, fill: theme.groupText });
+  }
+  const labels = [];
+  const dynamic = graph.data?.c4Type === "C4Dynamic";
+  graph.edges.forEach((edge, index) => {
+    const from = box(edge.source);
+    const to = box(edge.target);
+    if (!from || !to) return;
+    const geo = c4RelGeometry(from, to, index);
+    const { start, end, control } = geo;
+    const style = styleOf(edge.data);
+    const line4 = style.lineColor || theme.edge;
+    marks.push({
+      kind: "path",
+      key: `relation:${edge.id}`,
+      role: "relation",
+      target: edge.id,
+      d: control ? `M${start.x},${start.y} Q${control.x},${control.y} ${end.x},${end.y}` : `M${start.x},${start.y} L${end.x},${end.y}`,
+      fill: "none",
+      stroke: line4,
+      strokeWidth: 1
+    });
+    const head = (key, points) => marks.push({ kind: "path", key, role: "arrow", target: edge.id, d: `M${points.split(" ").join(" L")} Z`, fill: line4 });
+    if (edge.arrowEnd !== "none") head(`arrow-end:${edge.id}`, c4ArrowHead(end, control ?? start));
+    if (edge.arrowStart !== "none") head(`arrow-start:${edge.id}`, c4ArrowHead(start, control ?? end));
+    const offsetX = parseInt(style.offsetX ?? "0", 10) || 0;
+    const offsetY = parseInt(style.offsetY ?? "0", 10) || 0;
+    const left = geo.label.x + offsetX;
+    const top = geo.label.y + offsetY - 7;
+    const textFill = style.textColor || theme.text;
+    const label = `${dynamic ? `${index + 1}: ` : ""}${edge.label ?? ""}`;
+    const tech = typeof edge.data?.tech === "string" && edge.data.tech ? `[${edge.data.tech}]` : "";
+    const gridWidth = Math.max(label ? estimateTextWidth2(label, REL_FONT) : 0, tech ? estimateTextWidth2(tech, REL_FONT) : 0);
+    if (label)
+      labels.push({ kind: "text", key: `relation-label:${edge.id}`, role: "relation-label", target: edge.id, x: left, y: top + REL_LINE / 2, text: label, anchor: "start", baseline: "middle", size: REL_FONT, fill: textFill });
+    if (tech)
+      labels.push({
+        kind: "text",
+        key: `relation-tech:${edge.id}`,
+        role: "relation-tech",
+        target: edge.id,
+        x: left + gridWidth / 2,
+        y: top + (label ? REL_LINE + REL_GAP : 0) + REL_LINE / 2,
+        text: tech,
+        anchor: "middle",
+        baseline: "middle",
+        size: REL_FONT,
+        italic: true,
+        fill: style.textColor || theme.mutedText
+      });
+  });
+  for (const node of graph.nodes) {
+    const b = box(node.id);
+    if (!b) continue;
+    const geo = c4ElementGeometry(node);
+    const style = styleOf(node.data);
+    const colors = colorsOf(geo.type);
+    const fill = style.bgColor || colors.bg;
+    const stroke = style.borderColor || colors.border;
+    const fg = style.fontColor || C4_ELEMENT_FG;
+    const { x, y } = b;
+    const w = geo.width;
+    const h = geo.height;
+    const common = { target: node.id, fill, stroke, strokeWidth: 2 };
+    if (geo.person) {
+      const { headRadius: r, bodyTop, bodyRadius } = geo.person;
+      marks.push(
+        { kind: "rect", key: `element:${node.id}`, role: "element", ...common, x, y: y + bodyTop, width: w, height: h - bodyTop, radius: bodyRadius },
+        { kind: "circle", key: `element-head:${node.id}`, role: "element", ...common, cx: x + w / 2, cy: y + r, r }
+      );
+    } else if (geo.shape === "cylinder" && geo.cylinder) {
+      const { rx, ry } = geo.cylinder;
+      const body = h - 2 * ry;
+      marks.push({
+        kind: "path",
+        key: `element:${node.id}`,
+        role: "element",
+        ...common,
+        d: `M${x},${y + ry} a${rx},${ry} 0,0,0 ${w},0 a${rx},${ry} 0,0,0 ${-w},0 l0,${body} a${rx},${ry} 0,0,0 ${w},0 l0,${-body}`,
+        box: { x, y, width: w, height: h }
+      });
+    } else if (geo.shape === "h-cyl" && geo.cylinder) {
+      const { rx, ry } = geo.cylinder;
+      const body = w - 2 * rx;
+      marks.push({
+        kind: "path",
+        key: `element:${node.id}`,
+        role: "element",
+        ...common,
+        d: `M${x + rx},${y + h} a${rx},${ry} 0,0,1 0,${-h} l${body},0 a${rx},${ry} 0,0,1 0,${h} M${x + rx + body},${y} a${rx},${ry} 0,0,0 0,${h} l${-body},0`,
+        box: { x, y, width: w, height: h }
+      });
+    } else marks.push({ kind: "rect", key: `element:${node.id}`, role: "element", ...common, x, y, width: w, height: h, radius: 12 });
+    let top = y + geo.textCenter.y - geo.textHeight / 2;
+    for (const section of geo.sections) {
+      const size = section.part === "label" ? NAME_SIZE : section.part === "tech" ? TYPE_SIZE : DESCR_SIZE;
+      const lh = section.fontSize * LINE_HEIGHT2;
+      section.lines.forEach((line4, i) => {
+        if (!line4) return;
+        marks.push({
+          kind: "text",
+          key: `element-${section.part}:${node.id}:${i}`,
+          role: section.part === "label" ? "element-name" : section.part === "tech" ? "element-type" : "element-descr",
+          target: node.id,
+          x: x + geo.textCenter.x,
+          y: top + (i + 0.5) * lh,
+          text: line4,
+          anchor: "middle",
+          baseline: "middle",
+          size,
+          weight: section.bold ? 700 : void 0,
+          fill: fg
+        });
+      });
+      top += section.height + SECTION_GAP;
+    }
+  }
+  marks.push(...labels);
+  const title = titleMark(graph, layout2, theme);
+  if (title) marks.push(title);
+  return marks;
+};
+
+// src/canvas/mermaid/families/architecture.ts
+var A = ARCH_METRICS;
+var ICON_BG = "#087ebf";
+var ICON_FG = "#ffffff";
+var r2 = (n3) => Math.round(n3 * 100) / 100;
+function placePath(d, s, ox, oy) {
+  const tokens = d.match(/[MmLlHhVvCcSsQqZz]|-?(?:\d*\.\d+|\d+\.?)(?:e[-+]?\d+)?/g) ?? [];
+  const out = [];
+  const P = (x2, y2) => `${r2(ox + x2 * s)},${r2(oy + y2 * s)}`;
+  let i = 0;
+  let cmd = "";
+  let x = 0, y = 0, sx = 0, sy = 0;
+  let lastC = null;
+  const num4 = () => Number(tokens[i++]);
+  while (i < tokens.length) {
+    if (/[A-Za-z]/.test(tokens[i])) cmd = tokens[i++];
+    const rel = cmd === cmd.toLowerCase();
+    const bx = rel ? x : 0;
+    const by = rel ? y : 0;
+    switch (cmd.toUpperCase()) {
+      case "M":
+        x = bx + num4();
+        y = by + num4();
+        sx = x;
+        sy = y;
+        out.push(`M${P(x, y)}`);
+        cmd = rel ? "l" : "L";
+        lastC = null;
+        break;
+      case "L":
+        x = bx + num4();
+        y = by + num4();
+        out.push(`L${P(x, y)}`);
+        lastC = null;
+        break;
+      case "H":
+        x = bx + num4();
+        out.push(`L${P(x, y)}`);
+        lastC = null;
+        break;
+      case "V":
+        y = (rel ? y : 0) + num4();
+        out.push(`L${P(x, y)}`);
+        lastC = null;
+        break;
+      case "C": {
+        const c1x = bx + num4(), c1y = by + num4(), c2x = bx + num4(), c2y = by + num4();
+        x = bx + num4();
+        y = by + num4();
+        out.push(`C${P(c1x, c1y)} ${P(c2x, c2y)} ${P(x, y)}`);
+        lastC = [c2x, c2y];
+        break;
+      }
+      case "S": {
+        const c1x = lastC ? 2 * x - lastC[0] : x;
+        const c1y = lastC ? 2 * y - lastC[1] : y;
+        const c2x = bx + num4(), c2y = by + num4();
+        x = bx + num4();
+        y = by + num4();
+        out.push(`C${P(c1x, c1y)} ${P(c2x, c2y)} ${P(x, y)}`);
+        lastC = [c2x, c2y];
+        break;
+      }
+      case "Q": {
+        const cx = bx + num4(), cy = by + num4();
+        x = bx + num4();
+        y = by + num4();
+        out.push(`Q${P(cx, cy)} ${P(x, y)}`);
+        lastC = null;
+        break;
+      }
+      case "Z":
+        x = sx;
+        y = sy;
+        out.push("Z");
+        lastC = null;
+        break;
+      default:
+        i++;
+    }
+  }
+  return out.join(" ");
+}
+function ellipse(cx, cy, rx, ry) {
+  const k = 0.5523;
+  return `M${cx - rx},${cy} C${cx - rx},${cy - ry * k} ${cx - rx * k},${cy - ry} ${cx},${cy - ry} C${cx + rx * k},${cy - ry} ${cx + rx},${cy - ry * k} ${cx + rx},${cy} C${cx + rx},${cy + ry * k} ${cx + rx * k},${cy + ry} ${cx},${cy + ry} C${cx - rx * k},${cy + ry} ${cx - rx},${cy + ry * k} ${cx - rx},${cy} Z`;
+}
+function roundRect(x, y, w, h, r) {
+  return `M${x + r},${y} H${x + w - r} Q${x + w},${y} ${x + w},${y + r} V${y + h - r} Q${x + w},${y + h} ${x + w - r},${y + h} H${x + r} Q${x},${y + h} ${x},${y + h - r} V${y + r} Q${x},${y} ${x + r},${y} Z`;
+}
+var line2 = (x1, y1, x2, y2) => `M${x1},${y1} L${x2},${y2}`;
+var BAR = (y) => ({ d: `m56.25,${y}c0,.27-.45.5-1,.5h-10.5c-.55,0-1-.23-1-.5s.45-.5,1-.5h10.5c.55,0,1,.23,1,.5Z`, paint: "both", width: 1 });
+var DOTS = (y) => [32.5, 27.5, 22.5].map((x) => ({ d: ellipse(x, y, 0.75, 0.75), paint: "both", width: 1 }));
+var ARCH_GLYPHS = {
+  database: [
+    { d: "m20,57.86c0,3.94,8.95,7.14,20,7.14s20-3.2,20-7.14", paint: "stroke" },
+    { d: "m20,45.95c0,3.94,8.95,7.14,20,7.14s20-3.2,20-7.14", paint: "stroke" },
+    { d: "m20,34.05c0,3.94,8.95,7.14,20,7.14s20-3.2,20-7.14", paint: "stroke" },
+    { d: ellipse(40, 22.14, 20, 7.14), paint: "stroke" },
+    { d: line2(20, 57.86, 20, 22.14), paint: "stroke" },
+    { d: line2(60, 57.86, 60, 22.14), paint: "stroke" }
+  ],
+  server: [
+    { d: roundRect(17.5, 17.5, 45, 45, 2), paint: "stroke" },
+    { d: line2(17.5, 32.5, 62.5, 32.5), paint: "stroke" },
+    { d: line2(17.5, 47.5, 62.5, 47.5), paint: "stroke" },
+    BAR(25),
+    BAR(40),
+    BAR(55),
+    ...DOTS(25),
+    ...DOTS(40),
+    ...DOTS(55)
+  ],
+  disk: [
+    { d: roundRect(20, 15, 40, 50, 1), paint: "stroke" },
+    { d: ellipse(24, 19.17, 0.8, 0.83), paint: "stroke" },
+    { d: ellipse(56, 19.17, 0.8, 0.83), paint: "stroke" },
+    { d: ellipse(24, 60.83, 0.8, 0.83), paint: "stroke" },
+    { d: ellipse(56, 60.83, 0.8, 0.83), paint: "stroke" },
+    { d: ellipse(40, 33.75, 14, 14.58), paint: "stroke" },
+    { d: ellipse(40, 33.75, 4, 4.17), paint: "both" },
+    { d: "m37.51,42.52l-4.83,13.22c-.26.71-1.1,1.02-1.76.64l-4.18-2.42c-.66-.38-.81-1.26-.33-1.84l9.01-10.8c.88-1.05,2.56-.08,2.09,1.2Z", paint: "fill" }
+  ],
+  internet: [
+    { d: ellipse(40, 40, 22.5, 22.5), paint: "stroke" },
+    { d: line2(40, 17.5, 40, 62.5), paint: "stroke" },
+    { d: line2(17.5, 40, 62.5, 40), paint: "stroke" },
+    { d: "m39.99,17.51c-15.28,11.1-15.28,33.88,0,44.98", paint: "stroke" },
+    { d: "m40.01,17.51c15.28,11.1,15.28,33.88,0,44.98", paint: "stroke" },
+    { d: line2(19.75, 30.1, 60.25, 30.1), paint: "stroke" },
+    { d: line2(19.75, 49.9, 60.25, 49.9), paint: "stroke" }
+  ],
+  cloud: [
+    {
+      d: "m65,47.5c0,2.76-2.24,5-5,5H20c-2.76,0-5-2.24-5-5,0-1.87,1.03-3.51,2.56-4.36-.04-.21-.06-.42-.06-.64,0-2.6,2.48-4.74,5.65-4.97,1.65-4.51,6.34-7.76,11.85-7.76.86,0,1.69.08,2.5.23,2.09-1.57,4.69-2.5,7.5-2.5,6.1,0,11.19,4.38,12.28,10.17,2.14.56,3.72,2.51,3.72,4.83,0,.03,0,.07-.01.1,2.29.46,4.01,2.48,4.01,4.9Z",
+      paint: "stroke"
+    }
+  ],
+  blank: []
+};
+function iconMarks(key, target, icon, x, y, size, theme) {
+  const s = size / 80;
+  if (!icon)
+    return [
+      {
+        kind: "path",
+        key: `icon:${key}`,
+        role: "icon",
+        target,
+        d: placePath("M0,80 V5 Q0,0 5,0 H75 Q80,0 80,5 V80 Z", s, x, y),
+        fill: "none",
+        stroke: theme.groupStroke,
+        strokeWidth: 2,
+        dash: "8"
+      }
+    ];
+  const marks = [{ kind: "rect", key: `icon:${key}`, role: "icon", target, x, y, width: size, height: size, fill: ICON_BG }];
+  const glyph = ARCH_GLYPHS[icon];
+  if (glyph) {
+    glyph.forEach(
+      (part, i) => marks.push({
+        kind: "path",
+        key: `icon-glyph:${key}:${i}`,
+        role: "icon-glyph",
+        target,
+        d: placePath(part.d, s, x, y),
+        fill: part.paint === "stroke" ? "none" : ICON_FG,
+        stroke: part.paint === "fill" ? void 0 : ICON_FG,
+        strokeWidth: (part.width ?? 2) * s
+      })
+    );
+    return marks;
+  }
+  const font = 11 * s;
+  const perLine = Math.max(1, Math.floor(72 * s / estimateTextWidth2("m", font)));
+  const lines = [];
+  for (let i = 0; i < icon.length; i += perLine) lines.push(icon.slice(i, i + perLine));
+  const shown = lines.slice(0, Math.max(1, Math.floor(72 * s / (font * 1.2))));
+  const lh = font * 1.2;
+  shown.forEach(
+    (text2, i) => marks.push({ kind: "text", key: `icon-name:${key}:${i}`, role: "icon-name", target, x: x + size / 2, y: y + size / 2 + (i - (shown.length - 1) / 2) * lh, text: text2, anchor: "middle", baseline: "middle", size: font, fill: ICON_FG })
+  );
+  return marks;
+}
+var isJunction = (n3) => n3.shape === "sm-circ" || !!n3.data?.junction;
+var iconOf = (data) => typeof data?.icon === "string" && data.icon ? data.icon : void 0;
+function titleMark2(graph, layout2, theme) {
+  if (!graph.title) return null;
+  const groupIds = new Set(graph.groups.map((g) => g.id));
+  const roots = [...graph.nodes, ...graph.groups].filter((n3) => !(n3.parentId && groupIds.has(n3.parentId)) && layout2.positions[n3.id] && layout2.sizes[n3.id]);
+  const minX = roots.length ? Math.min(...roots.map((n3) => layout2.positions[n3.id][0])) : 0;
+  const maxX = roots.length ? Math.max(...roots.map((n3) => layout2.positions[n3.id][0] + layout2.sizes[n3.id].width)) : 240;
+  const minY = roots.length ? Math.min(...roots.map((n3) => layout2.positions[n3.id][1])) : 0;
+  return { kind: "text", key: "title", role: "title", target: DIAGRAM_TITLE_TARGET, x: (minX + maxX) / 2, y: minY - 56 + 18, text: graph.title, anchor: "middle", baseline: "middle", size: 18, weight: 600, fill: theme.text };
+}
+var architectureScene = ({ graph, layout: layout2, theme }) => {
+  const marks = [];
+  const box = (id) => {
+    const p = layout2.positions[id];
+    const s = layout2.sizes[id];
+    return p && s ? { x: p[0], y: p[1], width: s.width, height: s.height } : null;
+  };
+  const groupIds = new Set(graph.groups.map((g) => g.id));
+  const parentOf = new Map(graph.groups.map((g) => [g.id, g.parentId]));
+  const depth2 = (id) => {
+    let d = 0;
+    const seen = /* @__PURE__ */ new Set();
+    let p = parentOf.get(id);
+    while (p && groupIds.has(p) && !seen.has(p)) {
+      seen.add(p);
+      d++;
+      p = parentOf.get(p);
+    }
+    return d;
+  };
+  for (const group of [...graph.groups].sort((a, b) => depth2(a.id) - depth2(b.id))) {
+    const b = box(group.id);
+    if (!b) continue;
+    const icon = iconOf(group.data);
+    marks.push({ kind: "rect", key: `group:${group.id}`, role: "group", target: group.id, ...b, fill: "none", stroke: theme.groupStroke, strokeWidth: 2, dash: "8" });
+    if (icon) marks.push(...iconMarks(`group:${group.id}`, group.id, icon, b.x + 1, b.y + 1, A.groupIconSize, theme));
+    const label = group.data?.untitled ? "" : group.label;
+    if (label)
+      marks.push({ kind: "text", key: `group-label:${group.id}`, role: "group-label", target: group.id, x: b.x + (icon ? A.groupIconSize + 4 : 4), y: b.y + 7 + 19 / 2, text: label, anchor: "start", baseline: "middle", size: A.fontSize, fill: theme.groupText });
+  }
+  const labels = [];
+  const junctions = new Set(graph.nodes.filter(isJunction).map((n3) => n3.id));
+  const port = (b, side) => side === "L" ? { x: b.x, y: b.y + b.height / 2 } : side === "R" ? { x: b.x + b.width, y: b.y + b.height / 2 } : side === "T" ? { x: b.x + b.width / 2, y: b.y } : { x: b.x + b.width / 2, y: b.y + b.height };
+  for (const edge of graph.edges) {
+    const from = box(edge.source);
+    const to = box(edge.target);
+    if (!from || !to) continue;
+    const d = edge.data ?? {};
+    const sourceSide = isSide(d.sourceSide) ? d.sourceSide : "R";
+    const targetSide = isSide(d.targetSide) ? d.targetSide : "L";
+    const s = shiftEndpoint(port(from, sourceSide), sourceSide, { group: !!d.sourceGroup, junction: junctions.has(edge.source) });
+    const t = shiftEndpoint(port(to, targetSide), targetSide, { group: !!d.targetGroup, junction: junctions.has(edge.target) });
+    const route = architectureEdgeRoute(s, sourceSide, t, targetSide);
+    marks.push({ kind: "path", key: `edge:${edge.id}`, role: "edge", target: edge.id, d: route.points.map((p, i) => `${i ? "L" : "M"}${p.x},${p.y}`).join(" "), fill: "none", stroke: theme.edge, strokeWidth: 3 });
+    const head = (key, points) => marks.push({ kind: "path", key, role: "arrow", target: edge.id, d: `M${points.split(" ").join(" L")} Z`, fill: theme.edge });
+    if (edge.arrowStart !== "none") head(`arrow-start:${edge.id}`, architectureArrow(s, sourceSide));
+    if (edge.arrowEnd !== "none") head(`arrow-end:${edge.id}`, architectureArrow(t, targetSide));
+    if (edge.label)
+      labels.push({ kind: "text", key: `edge-label:${edge.id}`, role: "edge-label", target: edge.id, x: route.label.x, y: route.label.y, text: edge.label, anchor: "middle", baseline: "middle", size: A.fontSize, rotate: route.rotate || void 0, fill: theme.text });
+  }
+  for (const node of graph.nodes) {
+    const b = box(node.id);
+    if (!b) continue;
+    if (isJunction(node)) {
+      const cx = b.x + b.width / 2;
+      const cy = b.y + b.height / 2;
+      marks.push(
+        { kind: "circle", key: `junction:${node.id}`, role: "junction", target: node.id, cx, cy, r: b.width / 2, fill: "transparent" },
+        { kind: "circle", key: `junction-dot:${node.id}`, role: "junction", target: node.id, cx, cy, r: Math.max(1, b.width / 2 - 3), fill: theme.edge }
+      );
+      continue;
+    }
+    marks.push(...iconMarks(`service:${node.id}`, node.id, iconOf(node.data), b.x, b.y, b.width, theme));
+    if (node.data?.untitled) continue;
+    serviceLabelLines(node.label ?? "").forEach(
+      (text2, i) => marks.push({ kind: "text", key: `service-label:${node.id}:${i}`, role: "service-label", target: node.id, x: b.x + b.width / 2, y: b.y + b.height + (i + 0.5) * A.lineHeight, text: text2, anchor: "middle", baseline: "middle", size: A.fontSize, fill: theme.text })
+    );
+  }
+  marks.push(...labels);
+  const title = titleMark2(graph, layout2, theme);
+  if (title) marks.push(title);
+  return marks;
+};
+
+// src/canvas/mermaid/families/gantt.ts
+var M7 = GANTT_METRICS;
+var CRIT = 3;
+function statusOf(node) {
+  const tags = Array.isArray(node?.data?.tags) ? node.data.tags.map(String) : [];
+  const done2 = tags.includes("done");
+  const active = tags.includes("active");
+  const crit = tags.includes("crit");
+  if (crit && done2) return "done-crit";
+  if (crit && active) return "active-crit";
+  if (crit) return "crit";
+  if (done2) return "done";
+  if (active) return "active";
+  return "";
+}
+function barColours(theme, status) {
+  const task = sceneColor(theme, 0);
+  const crit = sceneColor(theme, CRIT);
+  switch (status) {
+    case "active":
+      return { fill: theme.background, stroke: task, text: theme.text };
+    case "done":
+      return { fill: theme.grid, stroke: theme.mutedText, text: theme.text };
+    case "crit":
+      return { fill: crit, stroke: crit, text: theme.paletteText };
+    case "active-crit":
+      return { fill: theme.background, stroke: crit, text: theme.text };
+    case "done-crit":
+      return { fill: theme.grid, stroke: crit, text: theme.text };
+    default:
+      return { fill: task, stroke: task, text: theme.paletteText };
+  }
+}
+function bandFill(theme, index) {
+  const slot = (index % 4 + 4) % 4;
+  if (slot === 1 || slot === 3) return theme.background;
+  return sceneColor(theme, slot === 0 ? 0 : 2);
+}
+var labelWidth = (text2) => text2.length * 6.8 + 16;
+function stepPath(from, to) {
+  const offset = 12;
+  const sx = from.x + from.width;
+  const sy = from.y + from.height / 2;
+  const tx = to.x;
+  const ty = to.y + to.height / 2;
+  if (tx >= sx + 2 * offset) {
+    const mx = (sx + tx) / 2;
+    return `M ${sx} ${sy} L ${mx} ${sy} L ${mx} ${ty} L ${tx} ${ty}`;
+  }
+  const my = (sy + ty) / 2;
+  return `M ${sx} ${sy} L ${sx + offset} ${sy} L ${sx + offset} ${my} L ${tx - offset} ${my} L ${tx - offset} ${ty} L ${tx} ${ty}`;
+}
+var ganttScene = ({ graph, selection, theme }) => {
+  const geo = ganttGeometry(graph);
+  const nodes = new Map(graph.nodes.map((n3) => [n3.id, n3]));
+  const marks = [];
+  const left = geo.chartX - M7.labelWidth;
+  const fullWidth = M7.labelWidth + geo.chartWidth + M7.rightPadding;
+  for (const band of geo.bands) {
+    const key = band.id ?? "::loose";
+    marks.push({
+      kind: "rect",
+      key: `band:${key}`,
+      role: "section",
+      target: band.id,
+      x: left,
+      y: band.y,
+      width: fullWidth,
+      height: band.height,
+      fill: bandFill(theme, band.id ? band.index : 0),
+      opacity: 0.2
+    });
+    if (band.label !== void 0)
+      marks.push({ kind: "text", key: `section:${key}`, role: "section-label", target: band.id, x: left + 8, y: band.y + 4, text: band.label, anchor: "start", baseline: "top", size: 12, fill: theme.groupText });
+  }
+  for (const tick of geo.ticks) {
+    marks.push(
+      { kind: "line", key: `tick:${tick.time}`, role: "grid", x1: tick.x, y1: geo.top, x2: tick.x, y2: geo.bottom, stroke: theme.grid, opacity: 0.8 },
+      { kind: "text", key: `tick-label:${tick.time}`, role: "axis", x: tick.x, y: geo.bottom + 6, text: tick.label, anchor: "middle", baseline: "top", size: 11, fill: theme.mutedText }
+    );
+  }
+  if (geo.today !== void 0)
+    marks.push({ kind: "line", key: "today", role: "today", x1: geo.today, y1: geo.top, x2: geo.today, y2: geo.bottom, stroke: sceneColor(theme, CRIT), strokeWidth: 2 });
+  for (const edge of graph.edges) {
+    if (!selection.has(edge.id) && !selection.has(edge.source) && !selection.has(edge.target)) continue;
+    const from = geo.rowById.get(edge.source);
+    const to = geo.rowById.get(edge.target);
+    if (!from || !to) continue;
+    marks.push({ kind: "path", key: `dependency:${edge.id}`, role: "dependency", target: edge.id, d: stepPath(from, to), stroke: theme.selection, strokeWidth: 1.5, dash: "5 4", markerEnd: "arrowclosed" });
+  }
+  for (const row of geo.rows) {
+    const node = nodes.get(row.id);
+    const status = statusOf(node);
+    const colours2 = barColours(theme, status);
+    const label = (node?.label ?? row.id).replace(/<br\s*\/?>/gi, " ");
+    if (row.milestone) {
+      const cx = row.x + row.width / 2;
+      const cy = row.y + row.height / 2;
+      const h = row.width * 0.8 * Math.SQRT2 / 2;
+      const crit = status.includes("crit");
+      marks.push({
+        kind: "path",
+        key: `milestone:${row.id}`,
+        role: "milestone",
+        target: row.id,
+        d: `M ${cx} ${cy - h} L ${cx + h} ${cy} L ${cx} ${cy + h} L ${cx - h} ${cy} Z`,
+        fill: status.startsWith("done") ? theme.grid : sceneColor(theme, 0),
+        stroke: crit ? sceneColor(theme, CRIT) : status.startsWith("done") ? theme.mutedText : sceneColor(theme, 0),
+        strokeWidth: 2
+      });
+    } else {
+      marks.push({ kind: "rect", key: `bar:${row.id}`, role: "bar", target: row.id, x: row.x, y: row.y, width: row.width, height: row.height, fill: colours2.fill, stroke: colours2.stroke, strokeWidth: 2, radius: 3 });
+    }
+    const outside = row.milestone || labelWidth(label) > row.width;
+    marks.push({
+      kind: "text",
+      key: `label:${row.id}`,
+      role: "task-label",
+      target: row.id,
+      x: outside ? row.x + row.width + 6 : row.x + row.width / 2,
+      y: row.y + row.height / 2,
+      text: label,
+      anchor: outside ? "start" : "middle",
+      baseline: "middle",
+      size: 12,
+      fill: outside ? theme.text : colours2.text,
+      ...row.milestone ? { italic: true } : {}
+    });
+  }
+  if (graph.title)
+    marks.push({ kind: "text", key: "title", role: "title", target: DIAGRAM_TITLE_TARGET, x: left + fullWidth / 2, y: geo.top - 38, text: graph.title, anchor: "middle", baseline: "middle", size: 18, weight: 600, fill: theme.text });
+  return marks;
+};
+
+// src/canvas/mermaid/families/timeline.ts
+var M8 = TIMELINE_METRICS;
+var RADIUS = 5;
+var TEXT_TOP = 17;
+var TEXT_LINE = M8.fontSize * 1.1;
+function colours(theme, colour) {
+  if (colour === "root") return { fill: theme.nodeStroke, text: theme.background };
+  return { fill: sceneColor(theme, colour), text: theme.paletteText, line: sceneColor(theme, colour + 6) };
+}
+function boxPath({ x, y, width: w, height: h }) {
+  const r = Math.min(RADIUS, w / 2, h / 2);
+  return `M ${x} ${y + r} Q ${x} ${y} ${x + r} ${y} L ${x + w - r} ${y} Q ${x + w} ${y} ${x + w} ${y + r} L ${x + w} ${y + h} L ${x} ${y + h} Z`;
+}
+function wrap(text2, width) {
+  const out = [];
+  for (const part of String(text2).split(/<br\s*\/?>|\n/i)) {
+    let line4 = "";
+    for (const word of part.split(/\s+/).filter(Boolean)) {
+      const next = line4 ? `${line4} ${word}` : word;
+      if (line4 && textWidth(next) > width) {
+        out.push(line4);
+        line4 = word;
+      } else line4 = next;
+    }
+    out.push(line4);
+  }
+  return out.length ? out : [""];
+}
+function arrowLine(key, x1, y1, x2, y2, width, dashed, colour) {
+  const len = Math.hypot(x2 - x1, y2 - y1) || 1;
+  const ux = (x2 - x1) / len;
+  const uy = (y2 - y1) / len;
+  const bx = x2 - ux * 5 * width;
+  const by = y2 - uy * 5 * width;
+  const tx = x2 + ux * width;
+  const ty = y2 + uy * width;
+  return [
+    { kind: "line", key, role: dashed ? "event-line" : "axis", x1, y1, x2, y2, stroke: colour, strokeWidth: width, ...dashed ? { dash: "5,5" } : {} },
+    {
+      kind: "path",
+      key: `${key}:head`,
+      role: dashed ? "event-line" : "axis",
+      d: `M ${bx - uy * 2 * width} ${by + ux * 2 * width} L ${tx} ${ty} L ${bx + uy * 2 * width} ${by - ux * 2 * width} Z`,
+      fill: colour
+    }
+  ];
+}
+var timelineScene = ({ graph, theme }) => {
+  const geo = timelineGeometry(graph);
+  const marks = [];
+  const nodes = new Map(graph.nodes.map((n3) => [n3.id, n3]));
+  const groups = new Map(graph.groups.map((g) => [g.id, g]));
+  const line4 = theme.text;
+  const box = (key, role, target, b, colour, text2, opacity, brighten = false) => {
+    const c = colours(theme, colour);
+    marks.push({ kind: "path", key, role, target, d: boxPath(b), fill: c.fill, ...opacity !== void 0 ? { opacity } : {} });
+    if (brighten) marks.push({ kind: "path", key: `${key}:wash`, role, target, d: boxPath(b), fill: theme.background, opacity: 0.2 });
+    if (c.line) marks.push({ kind: "line", key: `${key}:line`, role, target, x1: b.x, y1: b.y + b.height, x2: b.x + b.width, y2: b.y + b.height, stroke: c.line, strokeWidth: 3 });
+    wrap(text2, b.width - 2 * M8.padding).forEach(
+      (t, i) => marks.push({ kind: "text", key: `${key}:text:${i}`, role: `${role}-label`, target, x: b.x + b.width / 2, y: b.y + TEXT_TOP + TEXT_LINE * (i + 0.5), text: t, anchor: "middle", baseline: "middle", size: M8.fontSize, fill: c.text })
+    );
+  };
+  for (const l of geo.eventLines) marks.push(...arrowLine(`event-line:${l.periodId}`, l.x, l.y1, l.x, l.y2, M8.eventLineWidth, true, line4));
+  marks.push(...arrowLine("axis", geo.axis.x1, geo.axis.y, geo.axis.x2, geo.axis.y, M8.axisWidth, false, line4));
+  for (const e of geo.events) box(`event:${e.periodId}:${e.index}`, "event", e.periodId, e, e.colour, e.text, void 0, true);
+  for (const s of geo.sections.values()) box(`section:${s.id}`, "section", s.id, s, s.colour, groups.get(s.id)?.label ?? s.id, s.empty ? 0.6 : void 0);
+  for (const p of geo.periods.values()) {
+    const node = nodes.get(p.id);
+    box(`period:${p.id}`, "period", p.id, p, p.colour, node?.label ?? p.id);
+  }
+  if (graph.title)
+    marks.push({ kind: "text", key: "title", role: "title", target: DIAGRAM_TITLE_TARGET, x: geo.title.x, y: geo.title.baseline, text: graph.title, anchor: "start", baseline: "bottom", size: 32, weight: 700, fill: theme.text });
+  return marks;
+};
+
+// src/canvas/mermaid/families/index.ts
+var BUILTIN_FAMILY_SCENES = {
+  pie: pieScene,
+  xychart: xyChartScene,
+  radar: radarScene,
+  sequence: sequenceScene,
+  journey: journeyScene,
+  quadrant: quadrantScene,
+  gitGraph: gitGraphScene,
+  mindmap: mindmapScene,
+  c4: c4Scene,
+  architecture: architectureScene,
+  gantt: ganttScene,
+  timeline: timelineScene
+};
+
+// src/canvas/mermaid/scene.ts
+var scenes = new Map(Object.entries(BUILTIN_FAMILY_SCENES));
+function registerFamilyScene(family, scene) {
+  scenes.set(family, scene);
+}
+function getFamilyScene(family) {
+  return scenes.get(family);
+}
+function hasFamilyScene(family) {
+  return scenes.has(family);
+}
+function markBounds(mark) {
+  switch (mark.kind) {
+    case "rect":
+      return [mark.x, mark.y, mark.x + mark.width, mark.y + mark.height];
+    case "circle":
+      return [mark.cx - mark.r, mark.cy - mark.r, mark.cx + mark.r, mark.cy + mark.r];
+    case "line":
+      return [Math.min(mark.x1, mark.x2), Math.min(mark.y1, mark.y2), Math.max(mark.x1, mark.x2), Math.max(mark.y1, mark.y2)];
+    case "text": {
+      const w = estimateTextWidth2(mark.text, mark.size);
+      const x0 = mark.anchor === "start" ? mark.x : mark.anchor === "end" ? mark.x - w : mark.x - w / 2;
+      const y0 = mark.baseline === "top" ? mark.y : mark.baseline === "bottom" ? mark.y - mark.size * 1.2 : mark.y - mark.size * 0.6;
+      if (mark.rotate) {
+        const r = Math.max(w, mark.size * 1.2);
+        return [mark.x - r, mark.y - r, mark.x + r, mark.y + r];
+      }
+      return [x0, y0, x0 + w, y0 + mark.size * 1.2];
+    }
+    case "path": {
+      if (mark.box) return [mark.box.x, mark.box.y, mark.box.x + mark.box.width, mark.box.y + mark.box.height];
+      const nums = mark.d.match(/-?\d*\.?\d+(?:e-?\d+)?/gi)?.map(Number) ?? [];
+      if (nums.length < 2) return null;
+      let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+      for (let i = 0; i + 1 < nums.length; i += 2) {
+        x0 = Math.min(x0, nums[i]);
+        y0 = Math.min(y0, nums[i + 1]);
+        x1 = Math.max(x1, nums[i]);
+        y1 = Math.max(y1, nums[i + 1]);
+      }
+      return [x0, y0, x1, y1];
+    }
+  }
+}
+function diagramMarksBounds(marks) {
+  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+  for (const mark of marks) {
+    const b = markBounds(mark);
+    if (!b) continue;
+    x0 = Math.min(x0, b[0]);
+    y0 = Math.min(y0, b[1]);
+    x1 = Math.max(x1, b[2]);
+    y1 = Math.max(y1, b[3]);
+  }
+  if (x0 === Infinity) return { x: 0, y: 0, width: 0, height: 0 };
+  return { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
+}
+function mermaidToScene(doc, options = {}) {
+  const scene = scenes.get(doc.family);
+  if (!scene || doc.tier !== "editable") return null;
+  const layout2 = options.layout ?? ensureDiagramLayout(doc.graph, doc.meta, { family: doc.family, ...options });
+  return familySceneFromLayout(doc.family, doc.graph, layout2, options);
+}
+function familySceneFromLayout(family, graph, layout2, options = {}) {
+  const scene = scenes.get(family);
+  if (!scene) return null;
+  const theme = { ...DIAGRAM_SCENE_LIGHT_THEME, ...options.theme };
+  const selection = new Set(options.selection ?? []);
+  const marks = scene({ graph, layout: layout2, theme, selection }).map((m) => m.target && selection.has(m.target) ? { ...m, selected: true } : m);
+  return { family, ...diagramMarksBounds(marks), marks };
+}
+var esc = (text2) => text2.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+var num3 = (v) => String(Math.round(v * 100) / 100);
+function diagramTextBaseline(baseline) {
+  return baseline === "top" ? "hanging" : baseline === "bottom" ? "text-after-edge" : "central";
+}
+var DIAGRAM_MARKER_IDS = { arrow: "pd-arrow-open", arrowclosed: "pd-arrow-closed" };
+function diagramMarksToSvg(marks, theme = DIAGRAM_SCENE_LIGHT_THEME) {
+  const out = [];
+  for (const m of marks) {
+    const common = `${m.target ? ` data-target="${esc(m.target)}"` : ""}${m.opacity !== void 0 ? ` opacity="${num3(m.opacity)}"` : ""}`;
+    const sel = m.selected ? ` stroke="${esc(theme.selection)}" stroke-width="2"` : "";
+    const markers = (mk) => `${mk.markerEnd ? ` marker-end="url(#${DIAGRAM_MARKER_IDS[mk.markerEnd]})"` : ""}${mk.markerStart ? ` marker-start="url(#${DIAGRAM_MARKER_IDS[mk.markerStart]})"` : ""}`;
+    switch (m.kind) {
+      case "rect":
+        out.push(
+          `<rect x="${num3(m.x)}" y="${num3(m.y)}" width="${num3(Math.max(0, m.width))}" height="${num3(Math.max(0, m.height))}"${m.radius ? ` rx="${num3(m.radius)}"` : ""} fill="${esc(m.fill)}"${sel || (m.stroke ? ` stroke="${esc(m.stroke)}" stroke-width="${num3(m.strokeWidth ?? 1)}"` : "")}${m.dash ? ` stroke-dasharray="${m.dash}"` : ""}${common}/>`
+        );
+        break;
+      case "circle":
+        out.push(
+          `<circle cx="${num3(m.cx)}" cy="${num3(m.cy)}" r="${num3(m.r)}" fill="${esc(m.fill)}"${sel || (m.stroke ? ` stroke="${esc(m.stroke)}" stroke-width="${num3(m.strokeWidth ?? 1)}"` : "")}${common}/>`
+        );
+        break;
+      case "line":
+        out.push(
+          `<line x1="${num3(m.x1)}" y1="${num3(m.y1)}" x2="${num3(m.x2)}" y2="${num3(m.y2)}" stroke="${esc(m.selected ? theme.selection : m.stroke)}" stroke-width="${num3(m.strokeWidth ?? 1)}"${m.dash ? ` stroke-dasharray="${m.dash}"` : ""}${markers(m)}${common}/>`
+        );
+        break;
+      case "path":
+        out.push(
+          `<path d="${m.d}" fill="${esc(m.fill ?? "none")}"${sel || (m.stroke ? ` stroke="${esc(m.stroke)}" stroke-width="${num3(m.strokeWidth ?? 1)}"` : "")}${m.dash ? ` stroke-dasharray="${m.dash}"` : ""}${markers(m)}${common}/>`
+        );
+        break;
+      case "text":
+        out.push(
+          `<text x="${num3(m.x)}" y="${num3(m.y)}" text-anchor="${m.anchor}" dominant-baseline="${diagramTextBaseline(m.baseline)}" font-size="${num3(m.size)}"${m.weight ? ` font-weight="${m.weight}"` : ""}${m.italic ? ' font-style="italic"' : ""} fill="${esc(m.fill)}"${m.rotate ? ` transform="rotate(${num3(m.rotate)} ${num3(m.x)} ${num3(m.y)})"` : ""}${common}>${esc(m.text)}</text>`
+        );
+        break;
+    }
+  }
+  return out.join("");
+}
+var CSS_VARIABLE_DIAGRAM_SCENE_THEME = {
+  ...DIAGRAM_SCENE_LIGHT_THEME,
+  background: "var(--background, #ffffff)",
+  nodeFill: "var(--background, #ffffff)",
+  nodeStroke: "var(--foreground, #0f172a)",
+  text: "var(--foreground, #0f172a)",
+  edge: "var(--muted-foreground, #64748b)",
+  edgeLabelBackground: "var(--background, #ffffff)",
+  groupFill: "var(--muted, #f8fafc)",
+  groupStroke: "var(--border, #cbd5e1)",
+  groupText: "var(--muted-foreground, #475569)",
+  grid: "var(--border, #cbd5e1)",
+  mutedText: "var(--muted-foreground, #64748b)",
+  selection: "var(--primary, #2563eb)",
+  fontFamily: "inherit"
+};
+function diagramRenameOp(doc, target, label) {
+  const { graph } = doc;
+  if (target === DIAGRAM_TITLE_TARGET) return { type: "setTitle", title: label.trim() || void 0 };
+  if (graph.groups.some((g) => g.id === target)) return { type: "renameGroup", id: target, label };
+  if (graph.edges.some((e) => e.id === target)) return { type: "setEdgeLabel", id: target, label };
+  if (graph.nodes.some((n3) => n3.id === target)) return { type: "renameNode", id: target, label };
+  return null;
+}
+function diagramTargetLabel(doc, target) {
+  const { graph } = doc;
+  if (target === DIAGRAM_TITLE_TARGET) return graph.title ?? "";
+  return graph.groups.find((g) => g.id === target)?.label ?? graph.edges.find((e) => e.id === target)?.label ?? graph.nodes.find((n3) => n3.id === target)?.label ?? null;
+}
+
 // src/canvas/mermaid/shapes.ts
 var n = (v) => Math.round(v * 100) / 100;
 var poly = (points) => `M${points.map(([x, y]) => `${n(x)},${n(y)}`).join(" L")} Z`;
@@ -8871,8 +10788,8 @@ var rect = (x, y, w, h, r = 0) => {
   const rr = Math.min(r, w / 2, h / 2);
   return `M${n(x + rr)},${n(y)} H${n(x + w - rr)} A${n(rr)},${n(rr)} 0 0 1 ${n(x + w)},${n(y + rr)} V${n(y + h - rr)} A${n(rr)},${n(rr)} 0 0 1 ${n(x + w - rr)},${n(y + h)} H${n(x + rr)} A${n(rr)},${n(rr)} 0 0 1 ${n(x)},${n(y + h - rr)} V${n(y + rr)} A${n(rr)},${n(rr)} 0 0 1 ${n(x + rr)},${n(y)} Z`;
 };
-var ellipse = (cx, cy, rx, ry) => `M${n(cx - rx)},${n(cy)} A${n(rx)},${n(ry)} 0 1 0 ${n(cx + rx)},${n(cy)} A${n(rx)},${n(ry)} 0 1 0 ${n(cx - rx)},${n(cy)} Z`;
-var line2 = (x1, y1, x2, y2) => `M${n(x1)},${n(y1)} L${n(x2)},${n(y2)}`;
+var ellipse2 = (cx, cy, rx, ry) => `M${n(cx - rx)},${n(cy)} A${n(rx)},${n(ry)} 0 1 0 ${n(cx + rx)},${n(cy)} A${n(rx)},${n(ry)} 0 1 0 ${n(cx - rx)},${n(cy)} Z`;
+var line3 = (x1, y1, x2, y2) => `M${n(x1)},${n(y1)} L${n(x2)},${n(y2)}`;
 function mermaidShapePaths(shape, width, height, inset = 1) {
   const s = inset;
   const W = Math.max(0, width - 2 * s);
@@ -8895,7 +10812,7 @@ function mermaidShapePaths(shape, width, height, inset = 1) {
     case "subproc":
     case "subroutine": {
       const i = Math.min(10, W / 8);
-      return [fill(rect(x0, y0, W, H)), stroke(line2(x0 + i, y0, x0 + i, y1)), stroke(line2(x1 - i, y0, x1 - i, y1))];
+      return [fill(rect(x0, y0, W, H)), stroke(line3(x0 + i, y0, x0 + i, y1)), stroke(line3(x1 - i, y0, x1 - i, y1))];
     }
     case "cyl":
     case "cylinder": {
@@ -8910,28 +10827,28 @@ function mermaidShapePaths(shape, width, height, inset = 1) {
       const rx = Math.min(W / 6, 14);
       const paths = [
         fill(`M${n(x0 + rx)},${n(y0)} L${n(x1 - rx)},${n(y0)} A${n(rx)},${n(H / 2)} 0 0 1 ${n(x1 - rx)},${n(y1)} L${n(x0 + rx)},${n(y1)} A${n(rx)},${n(H / 2)} 0 0 1 ${n(x0 + rx)},${n(y0)} Z`),
-        stroke(ellipse(x1 - rx, cy, rx, H / 2))
+        stroke(ellipse2(x1 - rx, cy, rx, H / 2))
       ];
-      if (shape === "lin-cyl") paths.push(stroke(line2(x0 + rx * 2, y0, x0 + rx * 2, y1)));
+      if (shape === "lin-cyl") paths.push(stroke(line3(x0 + rx * 2, y0, x0 + rx * 2, y1)));
       return paths;
     }
     case "circle":
     case "circ":
-      return [fill(ellipse(cx, cy, W / 2, H / 2))];
+      return [fill(ellipse2(cx, cy, W / 2, H / 2))];
     case "dbl-circ":
-      return [fill(ellipse(cx, cy, W / 2, H / 2)), stroke(ellipse(cx, cy, Math.max(0, W / 2 - 5), Math.max(0, H / 2 - 5)))];
+      return [fill(ellipse2(cx, cy, W / 2, H / 2)), stroke(ellipse2(cx, cy, Math.max(0, W / 2 - 5), Math.max(0, H / 2 - 5)))];
     case "sm-circ":
     case "f-circ":
     case "stateStart":
-      return [solid(ellipse(cx, cy, W / 2, H / 2))];
+      return [solid(ellipse2(cx, cy, W / 2, H / 2))];
     case "fr-circ":
     case "stateEnd":
-      return [fill(ellipse(cx, cy, W / 2, H / 2)), solid(ellipse(cx, cy, Math.max(0, W / 2 - 5), Math.max(0, H / 2 - 5)))];
+      return [fill(ellipse2(cx, cy, W / 2, H / 2)), solid(ellipse2(cx, cy, Math.max(0, W / 2 - 5), Math.max(0, H / 2 - 5)))];
     case "cross-circ":
       return [
-        fill(ellipse(cx, cy, W / 2, H / 2)),
-        stroke(line2(cx - W / 2.83, cy - H / 2.83, cx + W / 2.83, cy + H / 2.83)),
-        stroke(line2(cx + W / 2.83, cy - H / 2.83, cx - W / 2.83, cy + H / 2.83))
+        fill(ellipse2(cx, cy, W / 2, H / 2)),
+        stroke(line3(cx - W / 2.83, cy - H / 2.83, cx + W / 2.83, cy + H / 2.83)),
+        stroke(line3(cx + W / 2.83, cy - H / 2.83, cx - W / 2.83, cy + H / 2.83))
       ];
     case "odd":
     case "asymmetric": {
@@ -8973,7 +10890,7 @@ function mermaidShapePaths(shape, width, height, inset = 1) {
     }
     case "lin-rect":
     case "shaded-process":
-      return [fill(rect(x0, y0, W, H)), stroke(line2(x0 + 8, y0, x0 + 8, y1))];
+      return [fill(rect(x0, y0, W, H)), stroke(line3(x0 + 8, y0, x0 + 8, y1))];
     case "fork":
     case "join":
       return [solid(rect(x0, y0, W, H, 2))];
@@ -8986,8 +10903,8 @@ function mermaidShapePaths(shape, width, height, inset = 1) {
     case "tag-doc": {
       const wave = Math.min(12, H / 5);
       const paths = [fill(`M${n(x0)},${n(y0)} L${n(x1)},${n(y0)} L${n(x1)},${n(y1 - wave)} Q${n(x1 - W / 4)},${n(y1 - wave * 2.2)} ${n(cx)},${n(y1 - wave)} T${n(x0)},${n(y1 - wave)} Z`)];
-      if (shape === "lin-doc") paths.push(stroke(line2(x0 + 8, y0, x0 + 8, y1 - wave)));
-      if (shape === "tag-doc") paths.push(stroke(line2(x1 - 12, y1 - wave * 1.6, x1, y1 - wave * 2.6)));
+      if (shape === "lin-doc") paths.push(stroke(line3(x0 + 8, y0, x0 + 8, y1 - wave)));
+      if (shape === "tag-doc") paths.push(stroke(line3(x1 - 12, y1 - wave * 1.6, x1, y1 - wave * 2.6)));
       return paths;
     }
     case "docs": {
@@ -9003,14 +10920,14 @@ function mermaidShapePaths(shape, width, height, inset = 1) {
     }
     case "div-rect": {
       const d = Math.min(24, H / 3);
-      return [fill(rect(x0, y0, W, H)), stroke(line2(x0, y0 + d, x1, y0 + d))];
+      return [fill(rect(x0, y0, W, H)), stroke(line3(x0, y0 + d, x1, y0 + d))];
     }
     case "tri":
       return [fill(poly([[cx, y0], [x1, y1], [x0, y1]]))];
     case "flip-tri":
       return [fill(poly([[x0, y0], [x1, y0], [cx, y1]]))];
     case "win-pane":
-      return [fill(rect(x0, y0, W, H)), stroke(line2(x0 + 10, y0, x0 + 10, y1)), stroke(line2(x0, y0 + 10, x1, y0 + 10))];
+      return [fill(rect(x0, y0, W, H)), stroke(line3(x0 + 10, y0, x0 + 10, y1)), stroke(line3(x0, y0 + 10, x1, y0 + 10))];
     case "flag": {
       const wave = Math.min(10, H / 5);
       return [fill(`M${n(x0)},${n(y0 + wave)} Q${n(x0 + W / 4)},${n(y0 - wave)} ${n(cx)},${n(y0 + wave)} T${n(x1)},${n(y0 + wave)} L${n(x1)},${n(y1 - wave)} Q${n(x1 - W / 4)},${n(y1 + wave)} ${n(cx)},${n(y1 - wave)} T${n(x0)},${n(y1 - wave)} Z`)];
@@ -9022,7 +10939,7 @@ function mermaidShapePaths(shape, width, height, inset = 1) {
       return [fill(`M${n(x0)},${n(y0)} Q${n(x0 + d)},${n(cy)} ${n(x0)},${n(y1)} L${n(x1)},${n(y1)} Q${n(x1 - d)},${n(cy)} ${n(x1)},${n(y0)} Z`)];
     }
     case "tag-rect":
-      return [fill(rect(x0, y0, W, H)), stroke(line2(x1 - 14, y1, x1, y1 - 14))];
+      return [fill(rect(x0, y0, W, H)), stroke(line3(x1 - 14, y1, x1, y1 - 14))];
     case "notch-pent": {
       const d = Math.min(W / 6, H / 3);
       return [fill(poly([[x0 + d, y0], [x1 - d, y0], [x1, y0 + d], [x1, y1], [x0, y1], [x0, y0 + d]]))];
@@ -9075,7 +10992,7 @@ var MERMAID_SHAPE_PAINT = {
   hidden: { fill: "transparent", stroke: "none" }
 };
 function mermaidLabelLines(label) {
-  return String(label).replace(/^"`?|`?"$/g, "").split(/<br\s*\/?>|\n/i).map((line3) => line3.replace(/<[^>]+>/g, ""));
+  return String(label).replace(/^"`?|`?"$/g, "").split(/<br\s*\/?>|\n/i).map((line4) => line4.replace(/<[^>]+>/g, ""));
 }
 function mermaidNodeMembers(data) {
   const list = [...data?.members ?? [], ...data?.attributes ?? []];
@@ -9083,33 +11000,7 @@ function mermaidNodeMembers(data) {
 }
 
 // src/canvas/mermaid/export.ts
-var DIAGRAM_SVG_LIGHT_THEME = {
-  background: "#ffffff",
-  nodeFill: "#ffffff",
-  nodeStroke: "#0f172a",
-  text: "#0f172a",
-  edge: "#64748b",
-  edgeLabelBackground: "#ffffff",
-  groupFill: "#f8fafc",
-  groupStroke: "#cbd5e1",
-  groupText: "#475569",
-  fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
-  fontSize: 13
-};
-var DIAGRAM_SVG_DARK_THEME = {
-  background: "#0f172a",
-  nodeFill: "#1e293b",
-  nodeStroke: "#e2e8f0",
-  text: "#f1f5f9",
-  edge: "#94a3b8",
-  edgeLabelBackground: "#0f172a",
-  groupFill: "#111c33",
-  groupStroke: "#334155",
-  groupText: "#94a3b8",
-  fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
-  fontSize: 13
-};
-var esc = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+var esc2 = (text2) => text2.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 var n2 = (v) => String(Math.round(v * 100) / 100);
 function exitPoint(box, to) {
   const cx = box.x + box.width / 2;
@@ -9126,19 +11017,25 @@ function mermaidToSvg(doc, options = {}) {
   const theme = { ...DIAGRAM_SVG_LIGHT_THEME, ...options.theme };
   const pad = options.padding ?? 16;
   const graph = doc.graph;
-  const layout2 = options.layout ?? ensureDiagramLayout(graph, doc.meta, options);
-  const boxOf = (id) => {
+  const layout2 = options.layout ?? ensureDiagramLayout(graph, doc.meta, { family: doc.family, ...options });
+  const boxOf2 = (id) => {
     const p = layout2.positions[id];
     if (!p) return null;
     const s = layout2.sizes[id] ?? { width: 160, height: 56 };
     return { x: p[0], y: p[1], width: s.width, height: s.height };
   };
+  const scene = doc.tier === "editable" ? familySceneFromLayout(doc.family, graph, layout2, { theme: { ...DIAGRAM_SCENE_LIGHT_THEME, ...theme } }) : null;
   let minX = Infinity;
   let minY = Infinity;
   let maxX = -Infinity;
   let maxY = -Infinity;
-  for (const id of Object.keys(layout2.positions)) {
-    const b = boxOf(id);
+  if (scene && scene.marks.length) {
+    minX = scene.x;
+    minY = scene.y;
+    maxX = scene.x + scene.width;
+    maxY = scene.y + scene.height;
+  } else for (const id of Object.keys(layout2.positions)) {
+    const b = boxOf2(id);
     minX = Math.min(minX, b.x);
     minY = Math.min(minY, b.y);
     maxX = Math.max(maxX, b.x + b.width);
@@ -9156,15 +11053,19 @@ function mermaidToSvg(doc, options = {}) {
   const title = options.title ?? graph.title ?? `${doc.family} diagram`;
   const out = [];
   out.push(
-    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${naturalWidth} ${naturalHeight}" role="img" aria-label="${esc(title)}" font-family="${esc(theme.fontFamily)}" font-size="${fs}">`,
-    `<title>${esc(title)}</title>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${naturalWidth} ${naturalHeight}" role="img" aria-label="${esc2(title)}" font-family="${esc2(theme.fontFamily)}" font-size="${fs}">`,
+    `<title>${esc2(title)}</title>`,
     "<defs>",
-    `<marker id="pd-arrow-closed" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 Z" fill="${esc(theme.edge)}"/></marker>`,
-    `<marker id="pd-arrow-open" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10" fill="none" stroke="${esc(theme.edge)}" stroke-width="1.5"/></marker>`,
+    `<marker id="pd-arrow-closed" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 Z" fill="${esc2(theme.edge)}"/></marker>`,
+    `<marker id="pd-arrow-open" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10" fill="none" stroke="${esc2(theme.edge)}" stroke-width="1.5"/></marker>`,
     "</defs>"
   );
-  if (!options.transparent) out.push(`<rect width="${naturalWidth}" height="${naturalHeight}" fill="${esc(theme.background)}"/>`);
+  if (!options.transparent) out.push(`<rect width="${naturalWidth}" height="${naturalHeight}" fill="${esc2(theme.background)}"/>`);
   out.push(`<g transform="translate(${n2(ox)} ${n2(oy)})">`);
+  if (scene) {
+    out.push(diagramMarksToSvg(scene.marks, { ...DIAGRAM_SCENE_LIGHT_THEME, ...theme }), "</g></svg>");
+    return { svg: out.join(""), width, height, naturalWidth, naturalHeight };
+  }
   const depth2 = (id) => {
     let d = 0;
     let cur = graph.groups.find((g) => g.id === id)?.parentId;
@@ -9175,17 +11076,17 @@ function mermaidToSvg(doc, options = {}) {
     return d;
   };
   for (const g of [...graph.groups].sort((a, b) => depth2(a.id) - depth2(b.id))) {
-    const b = boxOf(g.id);
+    const b = boxOf2(g.id);
     if (!b) continue;
     const st = resolveMermaidStyles(g.classes, g.styles, graph.classDefs);
     out.push(
-      `<g data-group="${esc(g.id)}"><rect x="${n2(b.x)}" y="${n2(b.y)}" width="${n2(b.width)}" height="${n2(b.height)}" rx="8" fill="${esc(st.fill ?? theme.groupFill)}" stroke="${esc(st.stroke ?? theme.groupStroke)}" stroke-dasharray="4 3"/>`,
-      `<text x="${n2(b.x + 10)}" y="${n2(b.y + 18)}" fill="${esc(st.color ?? theme.groupText)}" font-size="${fs - 1}" font-weight="600">${esc(mermaidLabelLines(g.label).join(" "))}</text></g>`
+      `<g data-group="${esc2(g.id)}"><rect x="${n2(b.x)}" y="${n2(b.y)}" width="${n2(b.width)}" height="${n2(b.height)}" rx="8" fill="${esc2(st.fill ?? theme.groupFill)}" stroke="${esc2(st.stroke ?? theme.groupStroke)}" stroke-dasharray="4 3"/>`,
+      `<text x="${n2(b.x + 10)}" y="${n2(b.y + 18)}" fill="${esc2(st.color ?? theme.groupText)}" font-size="${fs - 1}" font-weight="600">${esc2(mermaidLabelLines(g.label).join(" "))}</text></g>`
     );
   }
   for (const e of graph.edges) {
-    const a = boxOf(e.source);
-    const b = boxOf(e.target);
+    const a = boxOf2(e.source);
+    const b = boxOf2(e.target);
     if (!a || !b || e.pattern === "invisible") continue;
     const ca = { x: a.x + a.width / 2, y: a.y + a.height / 2 };
     const cb = { x: b.x + b.width / 2, y: b.y + b.height / 2 };
@@ -9197,41 +11098,41 @@ function mermaidToSvg(doc, options = {}) {
     const marker = (m) => m === "arrow" ? "url(#pd-arrow-open)" : m ? "url(#pd-arrow-closed)" : "";
     const dash = mermaidEdgeDash(e.pattern);
     out.push(
-      `<line data-edge="${esc(e.id)}" x1="${n2(p.x)}" y1="${n2(p.y)}" x2="${n2(q.x)}" y2="${n2(q.y)}" stroke="${esc(st.stroke ?? theme.edge)}" stroke-width="${e.pattern === "thick" ? 3 : 1.5}"${dash ? ` stroke-dasharray="${dash}"` : ""}${end ? ` marker-end="${marker(end)}"` : ""}${start ? ` marker-start="${marker(start)}"` : ""}/>`
+      `<line data-edge="${esc2(e.id)}" x1="${n2(p.x)}" y1="${n2(p.y)}" x2="${n2(q.x)}" y2="${n2(q.y)}" stroke="${esc2(st.stroke ?? theme.edge)}" stroke-width="${e.pattern === "thick" ? 3 : 1.5}"${dash ? ` stroke-dasharray="${dash}"` : ""}${end ? ` marker-end="${marker(end)}"` : ""}${start ? ` marker-start="${marker(start)}"` : ""}/>`
     );
     if (e.label) {
-      const text = mermaidLabelLines(e.label).join(" ");
-      const w = text.length * fs * 0.55 + 10;
+      const text2 = mermaidLabelLines(e.label).join(" ");
+      const w = text2.length * fs * 0.55 + 10;
       const mx = (p.x + q.x) / 2;
       const my = (p.y + q.y) / 2;
       out.push(
-        `<rect x="${n2(mx - w / 2)}" y="${n2(my - fs * 0.75)}" width="${n2(w)}" height="${n2(fs * 1.5)}" rx="3" fill="${esc(theme.edgeLabelBackground)}"/>`,
-        `<text x="${n2(mx)}" y="${n2(my)}" text-anchor="middle" dominant-baseline="central" fill="${esc(st.color ?? theme.text)}" font-size="${fs - 1}">${esc(text)}</text>`
+        `<rect x="${n2(mx - w / 2)}" y="${n2(my - fs * 0.75)}" width="${n2(w)}" height="${n2(fs * 1.5)}" rx="3" fill="${esc2(theme.edgeLabelBackground)}"/>`,
+        `<text x="${n2(mx)}" y="${n2(my)}" text-anchor="middle" dominant-baseline="central" fill="${esc2(st.color ?? theme.text)}" font-size="${fs - 1}">${esc2(text2)}</text>`
       );
     }
   }
   for (const node of graph.nodes) {
-    const b = boxOf(node.id);
+    const b = boxOf2(node.id);
     if (!b) continue;
     const st = resolveMermaidStyles(node.classes, node.styles, graph.classDefs);
     const fill = st.fill ?? theme.nodeFill;
     const stroke = st.stroke ?? theme.nodeStroke;
     const color = st.color ?? theme.text;
     const strokeWidth = st["stroke-width"]?.replace("px", "") ?? "1.25";
-    const paint = (kind) => kind === "shape" ? `fill="${esc(fill)}" stroke="${esc(stroke)}" stroke-width="${esc(strokeWidth)}"` : kind === "line" ? `fill="none" stroke="${esc(stroke)}" stroke-width="${esc(strokeWidth)}"` : kind === "filled" ? `fill="${esc(stroke)}" stroke="${esc(stroke)}"` : 'fill="none" stroke="none"';
-    out.push(`<g data-node="${esc(node.id)}" transform="translate(${n2(b.x)} ${n2(b.y)})">`);
+    const paint = (kind) => kind === "shape" ? `fill="${esc2(fill)}" stroke="${esc2(stroke)}" stroke-width="${esc2(strokeWidth)}"` : kind === "line" ? `fill="none" stroke="${esc2(stroke)}" stroke-width="${esc2(strokeWidth)}"` : kind === "filled" ? `fill="${esc2(stroke)}" stroke="${esc2(stroke)}"` : 'fill="none" stroke="none"';
+    out.push(`<g data-node="${esc2(node.id)}" transform="translate(${n2(b.x)} ${n2(b.y)})">`);
     for (const path of mermaidShapePaths(node.shape, b.width, b.height)) out.push(`<path d="${path.d}" ${paint(path.paint)}/>`);
     const lines = mermaidLabelLines(node.label).filter((l, i, all) => l || all.length === 1);
     const members = mermaidNodeMembers(node.data);
     const lh = fs * 1.3;
     if (members.length) {
-      lines.forEach((line3, i) => out.push(`<text x="${n2(b.width / 2)}" y="${n2(14 + lh * i)}" text-anchor="middle" dominant-baseline="central" fill="${esc(color)}" font-weight="600">${esc(line3)}</text>`));
+      lines.forEach((line4, i) => out.push(`<text x="${n2(b.width / 2)}" y="${n2(14 + lh * i)}" text-anchor="middle" dominant-baseline="central" fill="${esc2(color)}" font-weight="600">${esc2(line4)}</text>`));
       const top = 14 + lh * lines.length - lh / 2 + 4;
-      out.push(`<line x1="0" y1="${n2(top)}" x2="${n2(b.width)}" y2="${n2(top)}" stroke="${esc(stroke)}" stroke-width="1"/>`);
-      members.forEach((m, i) => out.push(`<text x="8" y="${n2(top + 4 + lh * (i + 0.5))}" dominant-baseline="central" fill="${esc(color)}" font-size="${fs - 1}">${esc(m)}</text>`));
+      out.push(`<line x1="0" y1="${n2(top)}" x2="${n2(b.width)}" y2="${n2(top)}" stroke="${esc2(stroke)}" stroke-width="1"/>`);
+      members.forEach((m, i) => out.push(`<text x="8" y="${n2(top + 4 + lh * (i + 0.5))}" dominant-baseline="central" fill="${esc2(color)}" font-size="${fs - 1}">${esc2(m)}</text>`));
     } else {
       const first = b.height / 2 - (lines.length - 1) * lh / 2;
-      lines.forEach((line3, i) => out.push(`<text x="${n2(b.width / 2)}" y="${n2(first + lh * i)}" text-anchor="middle" dominant-baseline="central" fill="${esc(color)}">${esc(line3)}</text>`));
+      lines.forEach((line4, i) => out.push(`<text x="${n2(b.width / 2)}" y="${n2(first + lh * i)}" text-anchor="middle" dominant-baseline="central" fill="${esc2(color)}">${esc2(line4)}</text>`));
     }
     out.push("</g>");
   }
@@ -9300,7 +11201,7 @@ async function downloadDiagramPng(doc, options = {}) {
 
 // src/canvas/mermaid/index.ts
 function mermaidToCanvas(doc, options = {}) {
-  const layout2 = options.layout ?? ensureDiagramLayout(doc.graph, doc.meta, options);
+  const layout2 = options.layout ?? ensureDiagramLayout(doc.graph, doc.meta, { family: doc.family, ...options });
   return {
     nodes: mermaidFlowNodes(doc.graph, layout2, { editable: options.editable }),
     edges: mermaidFlowEdges(doc.graph, { editable: options.editable }),
@@ -9375,10 +11276,10 @@ function calculateCurvedPath(fromX, fromY, toX, toY, progress, options) {
   const p = Math.max(0, Math.min(1, progress));
   const arcHeight = options?.arcHeight ?? -30;
   const wobble = options?.wobble ?? 0;
-  const arc = Math.sin(p * Math.PI) * arcHeight;
+  const arc2 = Math.sin(p * Math.PI) * arcHeight;
   const sway = Math.sin(p * Math.PI * 2) * wobble;
   const currentX = fromX + (toX - fromX) * p + sway;
-  const currentY = fromY + (toY - fromY) * p + arc;
+  const currentY = fromY + (toY - fromY) * p + arc2;
   return { x: currentX, y: currentY };
 }
 function getNaturalMovementTiming(distance, seedStr = "drag") {
@@ -9460,6 +11361,7 @@ export {
   AUTO_LAYOUT_DATA_KEY,
   AnimationEditError,
   AnimationPlayer,
+  BUILTIN_FAMILY_SCENES,
   CANVAS_COMPONENT_DRAG_TYPE,
   CANVAS_GRADIENT_PRESETS,
   CANVAS_TOKEN_PROPERTIES,
@@ -9472,6 +11374,7 @@ export {
   COMPONENT_SOURCE_DATA_KEY,
   CONNECTION_LINE_TYPES,
   CSS_ANIMATION_PROPERTIES,
+  CSS_VARIABLE_DIAGRAM_SCENE_THEME,
   CUBIC_BEZIER_PRESETS,
   CanvasScenesStore,
   DEFAULT_ARRANGE_SHORTCUTS,
@@ -9481,9 +11384,13 @@ export {
   DEFAULT_NODE_HEIGHT,
   DEFAULT_NODE_WIDTH,
   DEFAULT_PLACEMENT_GAP,
+  DIAGRAM_MARKER_IDS,
   DIAGRAM_RASTER_MAX_SIZE,
+  DIAGRAM_SCENE_DARK_THEME,
+  DIAGRAM_SCENE_LIGHT_THEME,
   DIAGRAM_SVG_DARK_THEME,
   DIAGRAM_SVG_LIGHT_THEME,
+  DIAGRAM_TITLE_TARGET,
   DiagramStream,
   INSTANCE_DATA_KEY,
   LOCKED_DATA_KEY,
@@ -9515,6 +11422,7 @@ export {
   applyShapeCombination,
   applyShapeReplacement,
   arcToCubics,
+  architectureScene,
   autoLayoutDiagram,
   bezierPathArea,
   bezierPathBounds,
@@ -9527,6 +11435,7 @@ export {
   blendDiagramLayout,
   blendLayout,
   boundsOf,
+  c4Scene,
   calculateCursorArrowRotation,
   calculateCurvedPath,
   calculateDagreReflowDisplacement,
@@ -9581,6 +11490,11 @@ export {
   diagramGroupSize,
   diagramImageSize,
   diagramLayoutBounds,
+  diagramMarksBounds,
+  diagramMarksToSvg,
+  diagramRenameOp,
+  diagramTargetLabel,
+  diagramTextBaseline,
   diffOverrideGroups,
   distanceToBezierPath,
   distributeNodes,
@@ -9598,11 +11512,13 @@ export {
   estimateDiagramCanvasHeight,
   estimateDiagramNodeSize,
   estimateNodeSize,
+  estimateTextWidth2 as estimateTextWidth,
   evaluateAnimation,
   evaluateEasing,
   evaluateTrack,
   excludePaths,
   exportCssAnimation,
+  familySceneFromLayout,
   findConnectorSnap,
   findStrokesAtPoint,
   findVariant,
@@ -9620,6 +11536,7 @@ export {
   formatNumber,
   formatOklab,
   formatVariantName,
+  ganttScene,
   getAbsolutePosition,
   getAgentCardAnchor,
   getAnimatableProperty,
@@ -9644,6 +11561,7 @@ export {
   getCursorTransitionDuration,
   getDefaultVariant,
   getEffectiveTokenModes,
+  getFamilyScene,
   getFlowChildren,
   getInstanceData,
   getInstanceProperties,
@@ -9676,8 +11594,10 @@ export {
   getVariantOptions,
   getVariantSet,
   getVariantValues,
+  gitGraphScene,
   gradientToSvgDef,
   handlePoint,
+  hasFamilyScene,
   hasVisibleStroke,
   hashString,
   hatchPath,
@@ -9711,6 +11631,7 @@ export {
   isValidCanvasNode,
   isValidCanvasScene,
   isValidUrl,
+  journeyScene,
   layoutAll,
   layoutBounds,
   layoutFrame,
@@ -9741,7 +11662,9 @@ export {
   mermaidShapePaths,
   mermaidThumbnailSvg,
   mermaidToCanvas,
+  mermaidToScene,
   mermaidToSvg,
+  mindmapScene,
   mixColorsOklab,
   moveKeyframes,
   moveLayoutChild,
@@ -9773,6 +11696,7 @@ export {
   pathBooleanSelect,
   pathToContours,
   pathfinder,
+  pieScene,
   placeBeside,
   planarSplit,
   playWebAnimations,
@@ -9785,6 +11709,9 @@ export {
   positionToSide,
   pruneCanvasTokenModes,
   pushCanvasInstanceOverrides,
+  quadrantScene,
+  radarChartSpec,
+  radarScene,
   rasterSize,
   rasterizeSvg,
   readAnimatableValue,
@@ -9793,6 +11720,7 @@ export {
   readStyleSize,
   realClock,
   recordAnimationChanges,
+  registerFamilyScene,
   relayoutUpdates,
   remapPastedNodes,
   removeCanvasVariant,
@@ -9815,6 +11743,7 @@ export {
   runMultiNodeTransition,
   sampleAnimationFrames,
   scaleKeyframes,
+  sceneColor,
   segmentBounds,
   segmentCurvature,
   segmentDerivative,
@@ -9825,6 +11754,7 @@ export {
   segmentParamAtLength,
   segmentPoint,
   segmentTangent,
+  sequenceScene,
   serializeCanvasNodes,
   setCanvasComponentProperty,
   setCanvasInstanceProperties,
@@ -9862,6 +11792,7 @@ export {
   syncCanvasComponents,
   syncCanvasInstance,
   timeToX,
+  timelineScene,
   toBezierPath,
   toWebAnimations,
   toggleLockNodes,
@@ -9880,6 +11811,8 @@ export {
   writeNodeStyleProperty,
   writeOverrideGroup,
   xToTime,
-  xorPolygons
+  xorPolygons,
+  xyChartScene,
+  xyChartSpec
 };
 //# sourceMappingURL=index.js.map