@bendyline/squisq 2.7.1 → 2.9.0

package/dist/{chunk-ENNNQIYV.js → chunk-W2GIFNLN.js}

@@ -1066,1909 +1066,1999 @@ function bigText(input, context) {
   return layers;
 }
 
-// src/doc/templates/contentBlock.ts
-function completeBodyText(context) {
-  return (context.block?.contents ?? []).filter((node) => !(node.type === "code" && node.lang?.trim().toLowerCase() === "mermaid")).map((node) => extractPlainText(node)).join("\n").trim();
-}
-function bodyFontSize(body, context) {
-  const base = body.length > 1800 ? 18 : body.length > 1100 ? 21 : body.length > 650 ? 24 : 28;
-  return themedFontSize(base, context, false);
-}
-function contentBlock(input, context) {
-  const { theme } = context;
-  const title = input.title ?? context.block?.title ?? "";
-  const body = completeBodyText(context);
-  const layers = [createBackgroundLayer("bg", theme.colors.background)];
-  if (title) {
-    layers.push({
-      type: "text",
-      id: "title",
-      content: {
-        text: title,
-        style: {
-          fontSize: themedFontSize(46, context, true),
-          fontFamily: getThemeFont(context, "title"),
-          fontWeight: "bold",
-          color: theme.colors.text,
-          textAlign: "left",
-          lineHeight: 1.15,
-          shadow: shouldUseShadow(context)
-        }
-      },
-      position: { x: "8%", y: "9%", width: "84%", height: "15%", anchor: "top-left" }
-    });
+// src/doc/templates/diagramLayout.ts
+var DEFAULT_OPTS = {
+  gapX: 260,
+  gapY: 140,
+  gridPad: 80,
+  gridOriginX: 80,
+  gridOriginY: 80
+};
+function computeDiagramLayout(children, options = {}) {
+  const opts = { ...DEFAULT_OPTS, ...options };
+  const warnings = [];
+  const entries = [];
+  const unpositionedIdx = [];
+  for (let i = 0; i < children.length; i++) {
+    const c = children[i];
+    const hasX = typeof c.x === "number";
+    const hasY = typeof c.y === "number";
+    if (hasX && hasY) {
+      entries.push({ child: c, pinned: true, x: c.x, y: c.y });
+    } else {
+      entries.push({ child: c, pinned: false, x: 0, y: 0 });
+      unpositionedIdx.push(i);
+    }
   }
-  if (body) {
-    layers.push({
-      type: "text",
-      id: "body",
-      content: {
-        text: body,
-        style: {
-          fontSize: bodyFontSize(body, context),
-          fontFamily: getThemeFont(context, "body"),
-          color: theme.colors.text,
-          textAlign: "left",
-          lineHeight: 1.35,
-          shadow: shouldUseShadow(context)
-        }
-      },
-      position: {
-        x: "8%",
-        y: title ? "28%" : "10%",
-        width: "84%",
-        height: title ? "64%" : "82%",
-        anchor: "top-left"
-      }
+  if (unpositionedIdx.length > 0) {
+    const cols = Math.max(1, Math.ceil(Math.sqrt(unpositionedIdx.length)));
+    let baseX = opts.gridOriginX;
+    let baseY = opts.gridOriginY;
+    const pinned = entries.filter((e) => e.pinned);
+    if (pinned.length > 0) {
+      const minX = Math.min(...pinned.map((e) => e.x));
+      const maxY = Math.max(...pinned.map((e) => e.y));
+      baseX = minX;
+      baseY = maxY + opts.gridPad + opts.gapY;
+    }
+    unpositionedIdx.forEach((entryIdx, k) => {
+      const col = k % cols;
+      const row = Math.floor(k / cols);
+      entries[entryIdx].x = baseX + col * opts.gapX;
+      entries[entryIdx].y = baseY + row * opts.gapY;
     });
   }
-  return layers;
-}
-
-// src/doc/templates/statHighlight.ts
-function statHighlight(input, context) {
-  const { stat, description, detail, colorScheme = "blue", accentImage } = input;
-  const { theme } = context;
-  const colors = resolveColorScheme(context, colorScheme);
-  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
-  const statFontSize = themedFontSize(148, context, true);
-  const descFontSize = themedFontSize(32, context, false);
-  const detailFontSize = themedFontSize(26, context, false);
-  const layers = [createBackgroundLayer("bg", themedSurfaceGradient(context, 180))];
-  if (accentImage) {
-    layers.push(
-      ...createAccentLayers(
-        accentImage,
-        input.id,
-        themedImageTreatment(context, input.imageTreatment)
-      )
-    );
-  }
-  layers.push({
-    type: "text",
-    id: "stat",
-    content: {
-      text: stat,
-      style: {
-        fontSize: statFontSize,
-        fontFamily: getThemeFont(context, "title"),
-        fontWeight: "bold",
-        color: colors.text,
-        shadow: shouldUseShadow(context)
-      }
-    },
-    position: {
-      x: accentLayout.textCenterX,
-      y: adjustY("36%", accentLayout),
-      anchor: "center"
-    },
-    animation: getTemplateHint(context, "statHighlight", "entrance", "subtle") === "dramatic" ? { type: "zoomIn", duration: 0.4 } : { type: "zoomIn", duration: 0.6 }
-  });
-  layers.push({
-    type: "text",
-    id: "description",
-    content: {
-      text: description,
-      style: {
-        fontSize: descFontSize,
-        fontFamily: getThemeFont(context, "body"),
-        color: theme.colors.textMuted,
-        textAlign: "center",
-        lineHeight: 1.5,
-        shadow: shouldUseShadow(context)
+  const nodes = entries.map((e) => ({
+    id: e.child.id,
+    label: e.child.title ?? e.child.id,
+    x: e.x,
+    y: e.y,
+    pinned: e.pinned,
+    ...e.child.classes && e.child.classes.length > 0 ? { classes: e.child.classes } : {}
+  }));
+  const nodeIds = new Set(nodes.map((n) => n.id));
+  const edges = [];
+  const seenEdgeIds = /* @__PURE__ */ new Set();
+  for (const child of children) {
+    if (!child.connectsTo) continue;
+    for (const conn of child.connectsTo) {
+      if (!nodeIds.has(conn.target)) {
+        warnings.push(`Edge from "${child.id}" to "${conn.target}" dropped: no such sibling node`);
+        continue;
       }
-    },
-    position: {
-      x: accentLayout.textCenterX,
-      y: adjustY("54%", accentLayout),
-      width: accentLayout.textWidth,
-      anchor: "center"
-    },
-    animation: { type: "fadeIn", duration: 1, delay: 0.3 }
-  });
-  if (detail) {
-    layers.push({
-      type: "text",
-      id: "detail",
-      content: {
-        text: detail,
-        style: {
-          fontSize: detailFontSize,
-          fontFamily: getThemeFont(context, "body"),
-          // Scheme *text* rather than *accent*: accents in the built-in
-          // schemes are tuned as chart/fill colors and drop below legible
-          // contrast as body copy on light surfaces.
-          color: colors.text,
-          textAlign: "center",
-          shadow: shouldUseShadow(context)
-        }
-      },
-      position: {
-        x: accentLayout.textCenterX,
-        y: adjustY("66%", accentLayout),
-        width: accentLayout.textWidth,
-        anchor: "center"
-      },
-      animation: { type: "fadeIn", duration: 1, delay: 1 }
-    });
+      const edgeId = makeEdgeId(child.id, conn);
+      if (seenEdgeIds.has(edgeId)) continue;
+      seenEdgeIds.add(edgeId);
+      edges.push({
+        id: edgeId,
+        source: child.id,
+        target: conn.target,
+        ...conn.type ? { type: conn.type } : {}
+      });
+    }
   }
-  return layers;
+  return { nodes, edges, warnings };
+}
+function makeEdgeId(source, conn) {
+  return conn.type ? `${source}->${conn.target}:${conn.type}` : `${source}->${conn.target}`;
 }
 
-// src/doc/templates/quoteBlock.ts
-function quoteBlock(input, context) {
-  const { title, quote, attribution, accentImage } = input;
-  const { theme, viewport } = context;
-  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
-  const quoteFontSize = themedFontSize(48, context, true);
-  const titleFontSize = themedFontSize(34, context, true);
-  const attrFontSize = themedFontSize(26, context, false);
-  const quoteLineHeight = Math.max(theme.typography.titleLineHeight ?? 1.4, 1.25);
-  const decorativeQuoteFontSize = themedFontSize(280, context, true);
-  const layers = [createBackgroundLayer("bg", themedSurfaceGradient(context, 160))];
-  if (accentImage) {
-    layers.push(
-      ...createAccentLayers(
-        accentImage,
-        input.id,
-        themedImageTreatment(context, input.imageTreatment)
-      )
-    );
-  }
-  if (title) {
-    layers.push({
-      type: "text",
-      id: "quote-title",
-      content: {
-        text: title,
-        style: {
-          fontSize: titleFontSize,
-          fontFamily: getThemeFont(context, "body"),
-          fontWeight: "bold",
-          color: theme.colors.textMuted,
-          textAlign: "center",
-          shadow: shouldUseShadow(context)
-        }
-      },
-      position: {
-        x: accentLayout.textCenterX,
-        y: adjustY("14%", accentLayout),
-        width: accentLayout.textWidth,
-        anchor: "center"
-      },
-      animation: { type: "fadeIn", duration: 0.8 }
-    });
-  }
-  layers.push({
-    type: "text",
-    id: "deco-quote",
-    content: {
-      text: "\u201C",
-      style: {
-        fontSize: decorativeQuoteFontSize,
-        fontFamily: getThemeFont(context, "title"),
-        color: withAlpha(theme.colors.text, 0.09),
-        textAlign: "center"
-      }
-    },
-    position: {
-      x: accentLayout.textCenterX,
-      y: adjustY("26%", accentLayout),
-      anchor: "center"
+// src/doc/asciiDiagram/types.ts
+var ASCII_CHAR_W = 14;
+var ASCII_CHAR_H = 28;
+
+// src/doc/asciiDiagram/mapping.ts
+function asciiCellToCanvas(col, row) {
+  return { x: col * ASCII_CHAR_W, y: row * ASCII_CHAR_H };
+}
+function canvasToAsciiCell(x, y) {
+  return {
+    col: Math.max(0, Math.round(x / ASCII_CHAR_W)),
+    row: Math.max(0, Math.round(y / ASCII_CHAR_H))
+  };
+}
+function asciiDiagramToTemplateData(diagram) {
+  const nodes = diagram.nodes.map((n) => ({
+    id: n.id,
+    label: n.label,
+    ...asciiCellToCanvas(n.col, n.row),
+    w: n.wCols * ASCII_CHAR_W,
+    h: n.hRows * ASCII_CHAR_H,
+    ...n.containerId ? { container: n.containerId } : {}
+  }));
+  const anchors = inferEdgeAnchors(nodes, diagram.edges);
+  const edges = diagram.edges.map((e, index) => ({
+    source: e.source,
+    target: e.target,
+    ...e.label ? { label: e.label } : {},
+    ...e.directed ? {} : { directed: false },
+    ...anchors[index],
+    routing: "orthogonal"
+  }));
+  return { nodes, edges };
+}
+function inferEdgeAnchors(nodes, edges) {
+  const nodeById = new Map(nodes.map((node) => [node.id, node]));
+  const pairs = edges.map((edge) => {
+    const source = nodeById.get(edge.source);
+    const target = nodeById.get(edge.target);
+    if (!source || !target) {
+      return {
+        sourceAnchor: { side: "right", offset: 0.5 },
+        targetAnchor: { side: "left", offset: 0.5 }
+      };
+    }
+    const sourceW = source.w ?? ASCII_CHAR_W * 12;
+    const sourceH = source.h ?? ASCII_CHAR_H * 3;
+    const targetW = target.w ?? ASCII_CHAR_W * 12;
+    const targetH = target.h ?? ASCII_CHAR_H * 3;
+    const dx = target.x + targetW / 2 - (source.x + sourceW / 2);
+    const dy = target.y + targetH / 2 - (source.y + sourceH / 2);
+    const horizontalDistance = Math.abs(dx) / Math.max(1, (sourceW + targetW) / 2);
+    const verticalDistance = Math.abs(dy) / Math.max(1, (sourceH + targetH) / 2);
+    if (verticalDistance >= horizontalDistance) {
+      return dy >= 0 ? {
+        sourceAnchor: { side: "bottom", offset: 0.5 },
+        targetAnchor: { side: "top", offset: 0.5 }
+      } : {
+        sourceAnchor: { side: "top", offset: 0.5 },
+        targetAnchor: { side: "bottom", offset: 0.5 }
+      };
     }
+    return dx >= 0 ? {
+      sourceAnchor: { side: "right", offset: 0.5 },
+      targetAnchor: { side: "left", offset: 0.5 }
+    } : {
+      sourceAnchor: { side: "left", offset: 0.5 },
+      targetAnchor: { side: "right", offset: 0.5 }
+    };
   });
-  const quoteYPct = attribution ? 45 : title ? 52 : 50;
-  layers.push({
-    type: "text",
-    id: "quote",
-    content: {
-      text: quote,
-      style: {
-        fontSize: quoteFontSize,
-        fontFamily: getThemeFont(context, "title"),
-        color: theme.colors.text,
-        textAlign: "center",
-        lineHeight: quoteLineHeight,
-        shadow: shouldUseShadow(context)
-      }
-    },
-    position: {
-      x: accentLayout.textCenterX,
-      y: adjustY(`${quoteYPct}%`, accentLayout),
-      anchor: "center",
-      width: accentLayout.textWidth
-    },
-    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 2 })
+  distributeOffsets(pairs, edges, nodes, "source");
+  distributeOffsets(pairs, edges, nodes, "target");
+  coalesceAlignedFanOutAnchors(pairs, edges, nodes);
+  return pairs;
+}
+function coalesceAlignedFanOutAnchors(pairs, edges, nodes) {
+  const nodeById = new Map(nodes.map((node) => [node.id, node]));
+  const groups = /* @__PURE__ */ new Map();
+  edges.forEach((edge, index) => {
+    const group = groups.get(edge.source) ?? [];
+    group.push(index);
+    groups.set(edge.source, group);
   });
-  if (attribution) {
-    const quoteWidthPx = parseFloat(accentLayout.textWidth) / 100 * viewport.width;
-    const quoteHeightPx = estimateTextHeight(quote, quoteFontSize, quoteWidthPx, quoteLineHeight);
-    const gapPx = quoteFontSize * 1.7;
-    const attrYPct = Math.min(
-      82,
-      quoteYPct + (quoteHeightPx / 2 + gapPx) / viewport.height * 100
-    );
-    layers.push({
-      type: "text",
-      id: "attribution",
-      content: {
-        text: `\u2014 ${attribution}`,
-        style: {
-          fontSize: attrFontSize,
-          fontFamily: getThemeFont(context, "body"),
-          color: theme.colors.textMuted,
-          textAlign: "center",
-          shadow: shouldUseShadow(context)
-        }
-      },
-      position: {
-        x: accentLayout.textCenterX,
-        y: adjustY(`${attrYPct}%`, accentLayout),
-        anchor: "center"
-      },
-      animation: { type: "fadeIn", duration: 1, delay: 1.5 }
+  for (const [sourceId, indexes] of groups) {
+    if (indexes.length < 2) continue;
+    const source = nodeById.get(sourceId);
+    const targets = indexes.map((index) => nodeById.get(edges[index].target)).filter((node) => node !== void 0);
+    if (!source || targets.length !== indexes.length) continue;
+    const sourceW = source.w ?? ASCII_CHAR_W * 12;
+    const sourceH = source.h ?? ASCII_CHAR_H * 3;
+    const sourceRight = source.x + sourceW;
+    const sourceBottom = source.y + sourceH;
+    const targetRight = (target) => target.x + (target.w ?? ASCII_CHAR_W * 12);
+    const targetBottom = (target) => target.y + (target.h ?? ASCII_CHAR_H * 3);
+    let sourceSide;
+    let targetSide;
+    if (targets.every((target) => target.y >= sourceBottom)) {
+      sourceSide = "bottom";
+      targetSide = "top";
+    } else if (targets.every((target) => targetBottom(target) <= source.y)) {
+      sourceSide = "top";
+      targetSide = "bottom";
+    } else if (targets.every((target) => target.x >= sourceRight)) {
+      sourceSide = "right";
+      targetSide = "left";
+    } else if (targets.every((target) => targetRight(target) <= source.x)) {
+      sourceSide = "left";
+      targetSide = "right";
+    }
+    if (!sourceSide || !targetSide) continue;
+    for (const index of indexes) {
+      pairs[index] = {
+        sourceAnchor: { side: sourceSide, offset: 0.5 },
+        targetAnchor: { side: targetSide, offset: 0.5 }
+      };
+    }
+  }
+}
+function distributeOffsets(pairs, edges, nodes, endpoint) {
+  const nodeById = new Map(nodes.map((node) => [node.id, node]));
+  const groups = /* @__PURE__ */ new Map();
+  for (let index = 0; index < edges.length; index++) {
+    const edge = edges[index];
+    const anchor = endpoint === "source" ? pairs[index].sourceAnchor : pairs[index].targetAnchor;
+    const nodeId = endpoint === "source" ? edge.source : edge.target;
+    const key = `${nodeId}:${anchor.side}`;
+    const group = groups.get(key) ?? [];
+    group.push(index);
+    groups.set(key, group);
+  }
+  for (const indexes of groups.values()) {
+    if (indexes.length < 2) continue;
+    const side = endpoint === "source" ? pairs[indexes[0]].sourceAnchor.side : pairs[indexes[0]].targetAnchor.side;
+    indexes.sort((a, b) => {
+      const oppositeA = nodeById.get(endpoint === "source" ? edges[a].target : edges[a].source);
+      const oppositeB = nodeById.get(endpoint === "source" ? edges[b].target : edges[b].source);
+      const axisA = side === "top" || side === "bottom" ? oppositeA?.x ?? 0 : oppositeA?.y ?? 0;
+      const axisB = side === "top" || side === "bottom" ? oppositeB?.x ?? 0 : oppositeB?.y ?? 0;
+      return axisA - axisB || a - b;
+    });
+    indexes.forEach((edgeIndex, rank) => {
+      const anchor = endpoint === "source" ? pairs[edgeIndex].sourceAnchor : pairs[edgeIndex].targetAnchor;
+      anchor.offset = (rank + 1) / (indexes.length + 1);
     });
   }
-  return layers;
+}
+function asciiDiagramFromTemplateData(nodes, edges, options = {}) {
+  const ids = new Set(nodes.map((n) => n.id));
+  const outNodes = nodes.map((n) => {
+    const { col, row } = canvasToAsciiCell(n.x, n.y);
+    const labelLines = n.label.length > 0 ? n.label.split("\n") : [];
+    const innerW = labelLines.reduce((w, l) => Math.max(w, l.length), 0);
+    const wCols = typeof n.w === "number" ? Math.max(3, Math.round(n.w / ASCII_CHAR_W)) : innerW + 4;
+    const hRows = typeof n.h === "number" ? Math.max(3, Math.round(n.h / ASCII_CHAR_H)) : labelLines.length + 2;
+    return {
+      id: n.id,
+      label: n.label,
+      col,
+      row,
+      wCols: Math.max(wCols, 3),
+      hRows: Math.max(hRows, 3),
+      ...n.container && ids.has(n.container) && n.container !== n.id ? { containerId: n.container } : {}
+    };
+  });
+  return {
+    nodes: outNodes,
+    edges: edges.filter((e) => ids.has(e.source) && ids.has(e.target)).map((e) => ({
+      source: e.source,
+      target: e.target,
+      ...e.label ? { label: e.label } : {},
+      directed: e.directed !== false
+    })),
+    style: options.style ?? "unicode",
+    warnings: []
+  };
+}
+function asciiDiagramFromBlocks(children, options = {}) {
+  const layout = computeDiagramLayout(children);
+  const nodes = layout.nodes.map((n) => ({
+    id: n.id,
+    label: n.label,
+    x: n.x,
+    y: n.y
+  }));
+  const edges = layout.edges.map((e) => ({
+    source: e.source,
+    target: e.target,
+    ...e.type ? { label: e.type } : {}
+  }));
+  const diagram = asciiDiagramFromTemplateData(nodes, edges, options);
+  diagram.warnings.push(...layout.warnings);
+  return diagram;
 }
 
-// src/doc/templates/factCard.ts
-function factCard(input, context) {
-  const { fact, explanation, source, accentImage } = input;
-  const { theme, viewport } = context;
-  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
-  const factFontSize = themedFontSize(56, context, true);
-  const explainFontSize = themedFontSize(34, context, false);
-  const sourceFontSize = themedFontSize(20, context, false);
-  const layers = [createBackgroundLayer("bg", themedSurfaceGradient(context, 170))];
-  if (accentImage) {
-    layers.push(
-      ...createAccentLayers(
-        accentImage,
-        input.id,
-        themedImageTreatment(context, input.imageTreatment)
-      )
+// src/doc/asciiTimeline/mapping.ts
+function asciiTimelineToTemplateData(timeline) {
+  const globalStart = timeline.tracks.length > 0 ? Math.min(...timeline.tracks.map((track) => track.startColumn)) : 0;
+  const globalEnd = timeline.tracks.length > 0 ? Math.max(...timeline.tracks.map((track) => track.endColumn)) : 1;
+  const span = Math.max(1, globalEnd - globalStart);
+  const tracks = timeline.tracks.map((track) => ({
+    id: track.id,
+    ...track.label ? { label: track.label } : {},
+    ...track.endLabel ? { endLabel: track.endLabel } : {},
+    events: track.events.map(
+      (event) => ({
+        id: event.id,
+        label: event.label,
+        ...event.description ? { description: event.description } : {},
+        position: clamp01((event.column - globalStart) / span),
+        ...event.side ? { side: event.side } : {},
+        ...event.descriptionSide ? { descriptionSide: event.descriptionSide } : {},
+        ...event.callout === false ? { callout: false } : {},
+        ...event.marker ? { marker: event.marker } : {}
+      })
+    )
+  }));
+  const links = timeline.links.map((link) => ({ ...link }));
+  return { tracks, links };
+}
+function clamp01(value) {
+  return Math.max(0, Math.min(1, value));
+}
+
+// src/doc/treeview/mapping.ts
+function treeToTemplateData(tree) {
+  return { items: tree.roots.map(toItem) };
+}
+function toItem(node) {
+  return {
+    id: node.id,
+    label: node.label,
+    ...node.isDir ? { isDir: true } : {},
+    ...node.comment ? { comment: node.comment } : {},
+    children: node.children.map(toItem)
+  };
+}
+function treeFromTemplateData(items, options = {}) {
+  const roots = items.map(fromItem);
+  return { roots, style: options.style ?? "unicode", warnings: [] };
+}
+function fromItem(item) {
+  const children = Array.isArray(item.children) ? item.children.map(fromItem) : [];
+  return {
+    id: typeof item.id === "string" && item.id ? item.id : "node",
+    label: typeof item.label === "string" ? item.label : "",
+    children,
+    isDir: item.isDir === true || children.length > 0,
+    ...item.comment ? { comment: item.comment } : {}
+  };
+}
+function treeFromMarkdownList(list) {
+  const usedIds = /* @__PURE__ */ new Map();
+  const slugify2 = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "node";
+  const idFor = (label) => {
+    const base = slugify2(label.replace(/\/$/, ""));
+    const count = usedIds.get(base) ?? 0;
+    usedIds.set(base, count + 1);
+    return count === 0 ? base : `${base}-${count + 1}`;
+  };
+  const itemToNode = (item) => {
+    const labelNode = item.children.find((c) => c.type !== "list");
+    const label = labelNode ? extractPlainText(labelNode).trim() : "";
+    const childLists = item.children.filter((c) => c.type === "list");
+    const children = [];
+    for (const cl of childLists) for (const ci of cl.children) children.push(itemToNode(ci));
+    return {
+      id: idFor(label),
+      label,
+      children,
+      isDir: label.endsWith("/") || children.length > 0
+    };
+  };
+  return { roots: list.children.map(itemToNode), style: "unicode", warnings: [] };
+}
+function findFirstList(contents) {
+  return contents?.find((n) => n.type === "list");
+}
+
+// src/doc/templateInputs.ts
+var VIDEO_FILE_RE = /\.(?:webm|mp4|mov|m4v|ogv)(?:[?#].*)?$/i;
+function extractBodyPlainText(contents) {
+  if (!contents || contents.length === 0) return "";
+  return contents.filter((node) => !(node.type === "code" && node.lang?.trim().toLowerCase() === "mermaid")).map((n) => extractPlainText(n)).join("\n").trim();
+}
+function extractListItems(contents) {
+  return extractRichListItems(contents).map((item) => item.text);
+}
+function escapeInlineHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function renderInlineHtml(nodes) {
+  return nodes.map((node) => {
+    switch (node.type) {
+      case "text":
+        return escapeInlineHtml(node.value);
+      case "emphasis":
+        return `<em>${renderInlineHtml(node.children)}</em>`;
+      case "strong":
+        return `<strong>${renderInlineHtml(node.children)}</strong>`;
+      case "delete":
+        return `<del>${renderInlineHtml(node.children)}</del>`;
+      case "inlineCode":
+        return `<code>${escapeInlineHtml(node.value)}</code>`;
+      case "link": {
+        const label = renderInlineHtml(node.children);
+        const href = sanitizeUrl(node.url, "link");
+        if (!href) return label;
+        const title = node.title ? ` title="${escapeInlineHtml(node.title)}"` : "";
+        return `<a href="${escapeInlineHtml(href)}"${title}>${label}</a>`;
+      }
+      case "break":
+        return "<br>";
+      case "image":
+        return escapeInlineHtml(node.alt ?? "");
+      case "inlineMath":
+        return escapeInlineHtml(`$${node.value}$`);
+      case "footnoteReference":
+        return escapeInlineHtml(`[^${node.label ?? node.identifier}]`);
+      case "linkReference":
+      case "textDirective":
+        return renderInlineHtml(node.children);
+      case "imageReference":
+        return escapeInlineHtml(node.alt ?? "");
+      case "mention":
+        return escapeInlineHtml(`@${node.displayName}`);
+      case "inlineIcon":
+        return `<i class="fa-${node.family} fa-${node.name}" aria-hidden="true"></i>`;
+      case "htmlInline":
+        return escapeInlineHtml(node.rawHtml);
+    }
+  }).join("");
+}
+function renderMarkdownBlocksHtml(nodes) {
+  const renderBlocks = (blocks) => blocks.map((node, index) => {
+    const previous = blocks[index - 1];
+    const extraBlankLines = previous ? Math.max(0, markdownBlockSeparatorLines(previous, node) - 2) : 0;
+    const sourceGap = '<div data-squisq-source-gap aria-hidden="true"><br></div>'.repeat(
+      extraBlankLines
     );
-  }
-  const textWidthPx = parseFloat(accentLayout.textWidth) / 100 * viewport.width;
-  const factH = estimateTextHeight(fact, factFontSize, textWidthPx, 1.3);
-  const explainH = estimateTextHeight(explanation, explainFontSize, textWidthPx, 1.5);
-  const sourceH = source ? sourceFontSize * 1.4 : 0;
-  const gap = factFontSize * 0.9;
-  const sourceGap = source ? explainFontSize * 1.1 : 0;
-  const totalH = factH + gap + explainH + sourceGap + sourceH;
-  const groupTopPct = 47 - totalH / 2 / viewport.height * 100;
-  const pct = (px) => groupTopPct + px / viewport.height * 100;
-  const factY = pct(factH / 2);
-  const explainY = pct(factH + gap + explainH / 2);
-  const sourceY = pct(factH + gap + explainH + sourceGap + sourceH / 2);
-  layers.push({
-    type: "text",
-    id: "fact",
-    content: {
-      text: fact,
-      style: {
-        fontSize: factFontSize,
-        fontFamily: getThemeFont(context, "title"),
-        fontWeight: "bold",
-        color: theme.colors.text,
-        textAlign: "center",
-        lineHeight: 1.3,
-        shadow: shouldUseShadow(context)
+    return `${sourceGap}${renderBlock(node)}`;
+  }).join("");
+  const renderList = (node) => {
+    const tag = node.ordered ? "ol" : "ul";
+    const start = node.ordered && node.start != null ? ` start="${node.start}"` : "";
+    const items = node.children.map((item) => {
+      const taskMarker = item.checked == null ? "" : `<span>${item.checked ? "[x]" : "[ ]"} </span>`;
+      return `<li>${taskMarker}${renderBlocks(item.children)}</li>`;
+    }).join("");
+    return `<${tag}${start}>${items}</${tag}>`;
+  };
+  const renderBlock = (node) => {
+    switch (node.type) {
+      case "paragraph":
+        return `<p>${renderInlineHtml(node.children)}</p>`;
+      case "heading":
+        return `<h${node.depth}>${renderInlineHtml(node.children)}</h${node.depth}>`;
+      case "blockquote":
+        return `<blockquote>${renderBlocks(node.children)}</blockquote>`;
+      case "list":
+        return renderList(node);
+      case "code":
+        return `<pre><code>${escapeInlineHtml(node.value)}</code></pre>`;
+      case "thematicBreak":
+        return "<hr>";
+      case "table": {
+        const [head, ...body] = node.children;
+        const row = (cells, header) => `<tr>${cells.map((cell) => {
+          const tag = header ? "th" : "td";
+          return `<${tag}>${renderInlineHtml(cell.children)}</${tag}>`;
+        }).join("")}</tr>`;
+        const thead = head ? `<thead>${row(head.children, true)}</thead>` : "";
+        const tbody = body.length ? `<tbody>${body.map((item) => row(item.children, false)).join("")}</tbody>` : "";
+        return `<table>${thead}${tbody}</table>`;
       }
-    },
-    position: {
-      x: accentLayout.textCenterX,
-      y: adjustY(`${factY}%`, accentLayout),
-      width: accentLayout.textWidth,
-      anchor: "center"
-    },
-    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1.5 })
-  });
-  layers.push({
-    type: "text",
-    id: "explanation",
-    content: {
-      text: explanation,
-      style: {
-        fontSize: explainFontSize,
-        fontFamily: getThemeFont(context, "body"),
-        color: theme.colors.textMuted,
-        textAlign: "center",
-        lineHeight: 1.5,
-        shadow: shouldUseShadow(context)
+      case "math":
+        return `<pre><code>${escapeInlineHtml(node.value)}</code></pre>`;
+      case "definition":
+        return "";
+      default: {
+        const text = extractPlainText(node).trim();
+        return text ? `<p>${escapeInlineHtml(text)}</p>` : "";
       }
-    },
-    position: {
-      x: accentLayout.textCenterX,
-      y: adjustY(`${explainY}%`, accentLayout),
-      width: accentLayout.textWidth,
-      anchor: "center"
-    },
-    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1, delay: 0.8 })
-  });
-  if (source) {
-    layers.push({
-      type: "text",
-      id: "source",
-      content: {
-        text: source,
-        style: {
-          fontSize: sourceFontSize,
-          fontFamily: getThemeFont(context, "body"),
-          color: theme.colors.textMuted,
-          textAlign: "center",
-          shadow: shouldUseShadow(context)
-        }
-      },
-      position: {
-        x: accentLayout.textCenterX,
-        y: adjustY(`${sourceY}%`, accentLayout),
-        anchor: "center"
-      },
-      animation: { type: "fadeIn", duration: 0.8, delay: 1.5 }
-    });
+    }
+  };
+  return renderBlocks(nodes);
+}
+function markdownBlockSeparatorLines(previous, next) {
+  const previousEndLine = previous.position?.end.line;
+  const nextStartLine = next.position?.start.line;
+  if (previousEndLine == null || nextStartLine == null || nextStartLine <= previousEndLine) {
+    return 2;
   }
-  return layers;
+  return Math.max(2, nextStartLine - previousEndLine);
 }
-
-// src/doc/templates/twoColumn.ts
-function twoColumn(input, context) {
-  const { left, right, header, leftColor = "green", rightColor = "blue" } = input;
-  if (!left?.label || !right?.label) return [];
-  const { theme, layout, orientation } = context;
-  const leftColors = resolveColorScheme(context, leftColor);
-  const rightColors = resolveColorScheme(context, rightColor);
-  const positions = getTwoColumnPositions(orientation);
-  const isStacked = layout.stackColumns;
-  const columnWidth = isStacked ? "85%" : "42%";
-  const headerFontSize = themedFontSize(36, context, true);
-  const labelFontSize = themedFontSize(44, context, true);
-  const sublabelFontSize = themedFontSize(22, context, false);
-  const panelTop = header && !isStacked ? 22 : 15;
-  const panelHeight = header && !isStacked ? 64 : 70;
-  const layers = [
-    // Background — subtle gradient to add depth
-    {
-      type: "shape",
-      id: "bg",
-      content: {
-        shape: "rect",
-        fill: themedSurfaceGradient(context, 135)
-      },
-      position: { x: 0, y: 0, width: "100%", height: "100%" }
+function renderListItemHtml(markdown) {
+  return markdown.map(
+    (node) => node.type === "paragraph" || node.type === "heading" ? renderInlineHtml(node.children) : escapeInlineHtml(extractPlainText(node))
+  ).join("<br>");
+}
+function extractRichListItems(contents) {
+  if (!contents) return [];
+  const items = [];
+  for (const node of contents) {
+    if (node.type !== "list") continue;
+    for (const item of node.children) {
+      const text = extractPlainText(item).trim();
+      if (!text) continue;
+      const html = renderListItemHtml(item.children);
+      const plainHtml = escapeInlineHtml(text).replace(/\r?\n/g, "<br>");
+      items.push({
+        text,
+        markdown: item.children,
+        ...html && html !== plainHtml ? { html } : {}
+      });
     }
-  ];
-  if (!isStacked) {
-    const panelFill = withAlpha(theme.colors.text, 0.05);
-    layers.push({
-      type: "shape",
-      id: "left-panel",
-      content: {
-        shape: "rect",
-        fill: panelFill,
-        borderRadius: 12
-      },
-      position: { x: "3%", y: `${panelTop}%`, width: "44%", height: `${panelHeight}%` }
-    });
-    layers.push({
-      type: "shape",
-      id: "right-panel",
-      content: {
-        shape: "rect",
-        fill: panelFill,
-        borderRadius: 12
-      },
-      position: { x: "53%", y: `${panelTop}%`, width: "44%", height: `${panelHeight}%` }
-    });
   }
-  const headerY = isStacked ? "8%" : "12%";
-  if (header) {
-    layers.push({
-      type: "text",
-      id: "header",
-      content: {
-        text: header,
-        style: {
-          fontSize: headerFontSize,
-          fontFamily: getThemeFont(context, "title"),
-          fontWeight: "bold",
-          color: theme.colors.text,
-          textAlign: "center"
+  return items;
+}
+function parseDim(raw) {
+  if (raw === void 0) return void 0;
+  const n = parseFloat(raw);
+  return Number.isFinite(n) && n > 0 ? n : void 0;
+}
+function extractImages(contents, limit = Infinity) {
+  if (!contents || contents.length === 0) return [];
+  const found = [];
+  function fromHtml(nodes) {
+    for (const node of nodes) {
+      if (found.length >= limit) return;
+      if (!node || typeof node !== "object") continue;
+      const n = node;
+      if (n.type === "htmlElement" && n.tagName === "img") {
+        const attrs = n.attributes;
+        if (attrs && typeof attrs.src === "string" && attrs.src) {
+          found.push({
+            src: attrs.src,
+            alt: typeof attrs.alt === "string" ? attrs.alt : "",
+            width: parseDim(attrs.width),
+            height: parseDim(attrs.height)
+          });
         }
-      },
-      position: { x: "50%", y: headerY, anchor: "center" },
-      animation: themedEntrance(context, "text", { type: "fadeIn", duration: 0.8 })
-    });
+      }
+      if (Array.isArray(n.children)) fromHtml(n.children);
+    }
   }
-  let leftY;
-  let leftSublabelY;
-  let rightY;
-  let rightSublabelY;
-  if (isStacked) {
-    leftY = header ? "30%" : "25%";
-    leftSublabelY = header ? "40%" : "35%";
-    rightY = header ? "60%" : "55%";
-    rightSublabelY = header ? "70%" : "65%";
-  } else {
-    const panelCenter = panelTop + panelHeight / 2;
-    leftY = `${panelCenter - 4}%`;
-    leftSublabelY = `${panelCenter + 7}%`;
-    rightY = `${panelCenter - 4}%`;
-    rightSublabelY = `${panelCenter + 7}%`;
+  function walk(node) {
+    if (found.length >= limit) return;
+    if (!node || typeof node !== "object") return;
+    const n = node;
+    if (n.type === "image" && typeof n.url === "string" && n.url) {
+      found.push({ src: n.url, alt: typeof n.alt === "string" ? n.alt : "" });
+      return;
+    }
+    if ((n.type === "htmlBlock" || n.type === "htmlInline") && Array.isArray(n.htmlChildren)) {
+      fromHtml(n.htmlChildren);
+    }
+    if (Array.isArray(n.children)) {
+      for (const child of n.children) walk(child);
+    }
   }
-  layers.push({
-    type: "text",
-    id: "left-label",
-    content: {
-      text: left.label,
-      style: {
-        fontSize: labelFontSize,
-        fontFamily: getThemeFont(context, "body"),
-        fontWeight: "bold",
-        color: leftColors.text,
-        textAlign: "center",
-        lineHeight: 1.3
-      }
-    },
-    position: {
-      x: positions.left.x,
-      y: leftY,
-      anchor: "center",
-      width: columnWidth
-    },
-    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1 })
-  });
-  if (left.sublabel) {
-    layers.push({
-      type: "text",
-      id: "left-sublabel",
-      content: {
-        text: left.sublabel,
-        style: {
-          fontSize: sublabelFontSize,
-          fontFamily: getThemeFont(context, "body"),
-          color: theme.colors.textMuted,
-          textAlign: "center",
-          lineHeight: 1.4
-        }
-      },
-      position: {
-        x: positions.left.x,
-        y: leftSublabelY,
-        anchor: "center",
-        width: columnWidth
-      },
-      animation: { type: "fadeIn", duration: 0.8, delay: 0.3 }
-    });
+  for (const node of contents) {
+    if (found.length >= limit) break;
+    walk(node);
   }
-  const connectorFontSize = themedFontSize(64, context, true);
-  const connectorY = isStacked ? "48%" : `${panelTop + panelHeight / 2}%`;
-  const connectorSymbol = isStacked ? "\u2193" : "\u2192";
-  layers.push({
-    type: "text",
-    id: "connector",
-    content: {
-      text: connectorSymbol,
-      style: {
-        fontSize: connectorFontSize,
-        fontFamily: getThemeFont(context, "title"),
-        fontWeight: "bold",
-        color: withAlpha(theme.colors.text, 0.45),
-        textAlign: "center"
+  return found;
+}
+function extractFirstImage(contents) {
+  return extractImages(contents, 1)[0] ?? null;
+}
+function extractEmbeddedVideos(contents, limit = Infinity) {
+  if (!contents || contents.length === 0) return [];
+  const found = [];
+  const seen = /* @__PURE__ */ new Set();
+  const add = (video) => {
+    if (!video.src || found.length >= limit || seen.has(video.src)) return;
+    seen.add(video.src);
+    found.push(video);
+  };
+  function nestedSource(children) {
+    if (!Array.isArray(children)) return void 0;
+    for (const child of children) {
+      if (!child || typeof child !== "object") continue;
+      const node = child;
+      if (node.tagName === "source") {
+        const attrs = node.attributes;
+        if (typeof attrs?.src === "string" && attrs.src) return attrs.src;
       }
-    },
-    position: {
-      x: "50%",
-      y: connectorY,
-      anchor: "center"
-    },
-    animation: { type: "fadeIn", duration: 0.6, delay: 0.4 }
-  });
-  layers.push({
-    type: "text",
-    id: "right-label",
-    content: {
-      text: right.label,
-      style: {
-        fontSize: labelFontSize,
-        fontFamily: getThemeFont(context, "body"),
-        fontWeight: "bold",
-        color: rightColors.text,
-        textAlign: "center",
-        lineHeight: 1.3
+      const nested = nestedSource(node.children);
+      if (nested) return nested;
+    }
+    return void 0;
+  }
+  function walk(node) {
+    if (found.length >= limit || !node || typeof node !== "object") return;
+    const n = node;
+    if (n.type === "htmlElement" && n.tagName === "video") {
+      const attrs = n.attributes;
+      const src = attrs?.src || nestedSource(n.children);
+      if (src) {
+        const startAt = attrs?.["data-squisq-video-start-at"] ? parseTimeSeconds(attrs["data-squisq-video-start-at"]) : null;
+        const clipStart = attrs?.["data-squisq-video-clip-start"] ? parseTimeSeconds(attrs["data-squisq-video-clip-start"]) : null;
+        const clipEnd = attrs?.["data-squisq-video-clip-end"] ? parseTimeSeconds(attrs["data-squisq-video-clip-end"]) : null;
+        add({
+          src,
+          ...attrs?.poster ? { posterSrc: attrs.poster } : {},
+          alt: attrs?.["aria-label"] || attrs?.title || attrs?.alt || "",
+          ...startAt != null ? { startAt } : {},
+          ...clipStart != null ? { clipStart } : {},
+          ...clipEnd != null ? { clipEnd } : {}
+        });
       }
-    },
-    position: {
-      x: positions.right.x,
-      y: rightY,
-      anchor: "center",
-      width: columnWidth
-    },
-    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1, delay: 0.5 })
-  });
-  if (right.sublabel) {
-    layers.push({
-      type: "text",
-      id: "right-sublabel",
-      content: {
-        text: right.sublabel,
-        style: {
-          fontSize: sublabelFontSize,
-          fontFamily: getThemeFont(context, "body"),
-          color: theme.colors.textMuted,
-          textAlign: "center",
-          lineHeight: 1.4
-        }
-      },
-      position: {
-        x: positions.right.x,
-        y: rightSublabelY,
-        anchor: "center",
-        width: columnWidth
-      },
-      animation: { type: "fadeIn", duration: 0.8, delay: 0.8 }
-    });
+    } else if ((n.type === "link" || n.type === "image") && typeof n.url === "string" && VIDEO_FILE_RE.test(n.url)) {
+      add({
+        src: n.url,
+        alt: typeof n.alt === "string" ? n.alt : extractPlainText(n).trim()
+      });
+    }
+    if (Array.isArray(n.children)) n.children.forEach(walk);
+    if (Array.isArray(n.htmlChildren)) n.htmlChildren.forEach(walk);
   }
-  return layers;
+  contents.forEach(walk);
+  return found;
 }
-
-// src/doc/templates/dateEvent.ts
-var MOOD_ACCENTS = {
-  neutral: "#63b3ed",
-  somber: "#e53e3e",
-  celebratory: "#68d391"
-};
-function dateEvent(input, context) {
-  const { date, description, footer, mood = "neutral", accentImage } = input;
-  const { theme } = context;
-  const moodAccent = MOOD_ACCENTS[mood];
-  const dateColor = relativeLuminance(theme.colors.background) > 0.5 ? oklchDarken(moodAccent, 0.25) : moodAccent;
-  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
-  const dateFontSize = themedFontSize(96, context, true);
-  const descFontSize = themedFontSize(30, context, false);
-  const footerFontSize = themedFontSize(26, context, false);
-  const layers = [
-    // Background — theme surface gradient (diagonal to differentiate
-    // from other text templates)
-    {
-      type: "shape",
-      id: "bg",
-      content: {
-        shape: "rect",
-        fill: themedSurfaceGradient(context, 135)
-      },
-      position: { x: 0, y: 0, width: "100%", height: "100%" }
+function extractFirstEmbeddedVideo(contents) {
+  return extractEmbeddedVideos(contents, 1)[0] ?? null;
+}
+function extractTableFromContents(contents) {
+  if (!contents) return null;
+  for (const node of contents) {
+    if (node.type === "table") {
+      const table = node;
+      const [headerRow, ...bodyRows] = table.children;
+      if (!headerRow) return null;
+      const headers = headerRow.children.map((cell) => extractPlainText(cell).trim());
+      const rows = bodyRows.map((row) => row.children.map((cell) => extractPlainText(cell).trim()));
+      return { headers, rows, align: table.align };
     }
-  ];
-  if (accentImage) {
-    layers.push(
-      ...createAccentLayers(
-        accentImage,
-        input.id,
-        themedImageTreatment(context, input.imageTreatment)
-      )
-    );
   }
-  layers.push({
-    type: "text",
-    id: "date",
-    content: {
-      text: date,
-      style: {
-        fontSize: dateFontSize,
-        fontFamily: getThemeFont(context, "title"),
-        fontWeight: "bold",
-        color: dateColor,
-        shadow: shouldUseShadow(context)
-      }
-    },
-    position: {
-      x: accentLayout.textCenterX,
-      y: adjustY("35%", accentLayout),
-      anchor: "center"
-    },
-    animation: { type: "fadeIn", duration: 1.5 }
-  });
-  layers.push({
-    type: "text",
-    id: "description",
-    content: {
-      text: description,
-      style: {
-        fontSize: descFontSize,
-        fontFamily: getThemeFont(context, "body"),
-        color: theme.colors.text,
-        textAlign: "center",
-        lineHeight: 1.6,
-        shadow: shouldUseShadow(context)
-      }
-    },
-    position: {
-      x: accentLayout.textCenterX,
-      y: adjustY("58%", accentLayout),
-      width: accentLayout.textWidth,
-      anchor: "center"
-    },
-    animation: { type: "fadeIn", duration: 2, delay: 1 }
-  });
-  if (footer) {
-    layers.push({
-      type: "text",
-      id: "footer",
-      content: {
-        text: footer,
-        style: {
-          fontSize: footerFontSize,
-          fontFamily: getThemeFont(context, "body"),
-          color: theme.colors.textMuted,
-          shadow: shouldUseShadow(context)
-        }
-      },
-      position: {
-        x: accentLayout.textCenterX,
-        y: adjustY("72%", accentLayout),
-        anchor: "center"
-      },
-      animation: { type: "fadeIn", duration: 1, delay: 3 }
-    });
+  return null;
+}
+function extractBlockquoteText(contents) {
+  if (!contents) return "";
+  for (const node of contents) {
+    if (node.type === "blockquote") return extractPlainText(node).trim();
   }
-  return layers;
+  return "";
 }
-
-// src/doc/templates/imageWithCaption.ts
-function imageWithCaption(input, context) {
-  const {
-    imageSrc,
-    imageAlt,
-    caption: rawCaption,
-    captionPosition = "bottom",
-    ambientMotion,
-    isTitle,
-    subtitle,
-    imageCredit,
-    imageLicense
-  } = input;
-  const caption = rawCaption ? cleanCaption(rawCaption) : rawCaption;
-  const { theme, layout } = context;
-  const treatment = themedImageTreatment(context, input.imageTreatment);
-  const captionFontSize = themedFontSize(30, context, false);
-  const titleFontSize = themedFontSize(96, context, true);
-  const subtitleFontSize = themedFontSize(36, context, false);
-  const legacyKenBurns = input.kenBurns;
-  const motion = ambientMotion || legacyKenBurns;
-  const imageAnimation = mapAmbientMotion(motion);
-  const layers = [
-    // Background image
-    {
-      type: "image",
-      id: "bg-image",
-      content: {
-        src: imageSrc,
-        alt: imageAlt,
-        fit: "cover",
-        credit: imageCredit,
-        license: imageLicense,
-        ...treatment ? { treatment } : {}
-      },
-      position: { x: 0, y: 0, width: "100%", height: "100%" },
-      animation: imageAnimation
+function firstParagraph(contents) {
+  if (!contents) return null;
+  const index = contents.findIndex((node) => node.type === "paragraph");
+  if (index < 0) return null;
+  return {
+    node: contents[index],
+    index
+  };
+}
+function leadingStrongStat(paragraph) {
+  for (const child of paragraph.children) {
+    if (child.type === "text" && child.value.trim() === "") continue;
+    if (child.type !== "strong") return null;
+    const text = extractPlainText(child).trim();
+    const match = text.match(/^(?:[$€£¥]\s*)?[+-]?\d+(?:[.,]\d+)*(?:\s?(?:[%‰x×]|[A-Za-z]+))?/);
+    return match?.[0].trim() || null;
+  }
+  return null;
+}
+function removeStatPhrase(text, start, end) {
+  const before = text.slice(0, start).trim();
+  let after = text.slice(end);
+  if (!before) after = after.replace(/^\s*(?:[-–—:]\s*)?/, "");
+  else after = after.trim();
+  return [before, after].filter(Boolean).join(" ").trim();
+}
+function bodyWithoutParagraphStat(contents, paragraphIndex, paragraphText, start, end) {
+  if (!contents) return "";
+  return contents.map(
+    (node, index) => index === paragraphIndex ? removeStatPhrase(paragraphText, start, end) : extractPlainText(node).trim()
+  ).filter(Boolean).join("\n").trim();
+}
+function deriveStatHighlightInputs(headingText, contents, bodyText3) {
+  const paragraph = firstParagraph(contents);
+  if (paragraph) {
+    const paragraphText = extractPlainText(paragraph.node).trim();
+    const strongStat = leadingStrongStat(paragraph.node);
+    if (strongStat) {
+      const start = paragraphText.indexOf(strongStat);
+      const description = bodyWithoutParagraphStat(
+        contents,
+        paragraph.index,
+        paragraphText,
+        start,
+        start + strongStat.length
+      );
+      return {
+        stat: strongStat,
+        description: description || headingText || strongStat
+      };
     }
-  ];
-  const bg = theme.colors.background;
-  if (isTitle && caption) {
-    layers.push({
-      type: "shape",
-      id: "title-gradient",
-      content: {
-        shape: "rect",
-        fill: `linear-gradient(0deg, ${withAlpha(bg, 0.85)} 0%, ${withAlpha(bg, 0.45)} 40%, ${withAlpha(bg, 0.1)} 70%, ${withAlpha(bg, 0)} 100%)`
-      },
-      position: { x: 0, y: 0, width: "100%", height: "100%" }
-    });
-    layers.push({
-      type: "text",
-      id: "title",
-      content: {
-        text: caption,
-        style: {
-          fontSize: titleFontSize,
-          fontFamily: getThemeFont(context, "title"),
-          fontWeight: "bold",
-          color: theme.colors.text,
-          textAlign: "center",
-          shadow: shouldUseShadow(context)
-        }
-      },
-      position: {
-        x: "50%",
-        y: subtitle ? "70%" : "75%",
-        anchor: "center",
-        width: layout.maxTextWidth
-      },
-      animation: { type: "fadeIn", duration: 0.8 }
-    });
-    if (subtitle) {
-      layers.push({
-        type: "text",
-        id: "subtitle",
-        content: {
-          text: subtitle,
-          style: {
-            fontSize: subtitleFontSize,
-            fontFamily: getThemeFont(context, "body"),
-            color: theme.colors.textMuted,
-            textAlign: "center",
-            lineHeight: 1.5
-          }
-        },
-        position: {
-          x: "50%",
-          y: "82%",
-          anchor: "center",
-          width: layout.maxTextWidth
-        },
-        animation: { type: "fadeIn", duration: 0.8, delay: 0.2 }
-      });
-    }
-    return layers;
-  }
-  if (caption) {
-    const captionBgY = captionPosition === "top" ? "7%" : captionPosition === "center" ? "42%" : "68%";
-    const captionY = captionPosition === "top" ? "13%" : captionPosition === "center" ? "48%" : "74%";
-    layers.push({
-      type: "shape",
-      id: "caption-gradient",
-      content: {
-        shape: "rect",
-        fill: `linear-gradient(90deg, ${withAlpha(bg, 0)}, ${withAlpha(bg, 0.78)} 16%, ${withAlpha(bg, 0.78)} 84%, ${withAlpha(bg, 0)})`
-      },
-      position: {
-        x: 0,
-        y: captionBgY,
-        width: "100%",
-        height: "16%"
-      }
-    });
-    layers.push({
-      type: "text",
-      id: "caption",
-      content: {
-        text: caption,
-        style: {
-          fontSize: captionFontSize,
-          fontFamily: getThemeFont(context, "body"),
-          color: theme.colors.text,
-          textAlign: "center",
-          shadow: shouldUseShadow(context),
-          lineHeight: 1.18,
-          maxLines: 2
-        }
-      },
-      position: {
-        x: "50%",
-        y: captionY,
-        anchor: "center",
-        width: "78%"
-      },
-      animation: { type: "fadeIn", duration: 1.5, delay: 0.5 }
-    });
   }
-  return layers;
-}
-
-// src/doc/templates/featureBlock.ts
-function buildFeatureLayers(input, context, side) {
-  const { imageSrc, imageAlt, imageWidth, imageHeight, title, body } = input;
-  const { theme, layout } = context;
-  const treatment = themedImageTreatment(context, input.imageTreatment);
-  const sized = (imageWidth ?? 0) > 0 || (imageHeight ?? 0) > 0;
-  const stack = layout.stackColumns;
-  const titleFontSize = themedFontSize(48, context, true);
-  const bodyFontSize2 = themedFontSize(24, context, false);
-  let imgX;
-  let imgY;
-  let imgW;
-  let imgH;
-  let imageFit;
-  if (stack) {
-    imgX = "0";
-    imgY = "0";
-    imgW = "100%";
-    imgH = "50%";
-    imageFit = sized ? "contain" : "cover";
-  } else if (sized) {
-    const halfStart = side === "left" ? 5 : 55;
-    imgX = `${halfStart}%`;
-    imgY = "5%";
-    imgW = "40%";
-    imgH = "90%";
-    imageFit = "contain";
-  } else {
-    imgX = side === "left" ? "0" : "50%";
-    imgY = "0";
-    imgW = "50%";
-    imgH = "100%";
-    imageFit = "cover";
+  const trimmedHeading = headingText.trim();
+  const headingStat = matchNumberHighlight(trimmedHeading);
+  if (headingStat && headingStat.index === 0 && headingStat.end === trimmedHeading.length) {
+    return { stat: headingText, description: bodyText3 || headingText };
   }
-  const COLUMN_INSET = 4;
-  const textColumnWidth = stack ? 90 : 42;
-  const textX = stack ? `${(100 - textColumnWidth) / 2}%` : side === "left" ? `${50 + COLUMN_INSET}%` : `${COLUMN_INSET + 2}%`;
-  const titleY = stack ? "60%" : body ? "42%" : "50%";
-  const bodyY = stack ? "78%" : title ? "55%" : "50%";
-  const textAnchor = "top-left";
-  const textAlign = "left";
-  const layers = [
-    {
-      type: "shape",
-      id: "feature-bg",
-      content: { shape: "rect", fill: theme.colors.background },
-      position: { x: 0, y: 0, width: "100%", height: "100%" }
+  if (paragraph) {
+    const paragraphText = extractPlainText(paragraph.node).trim();
+    const bodyStat = matchNumberHighlight(paragraphText);
+    if (bodyStat) {
+      const description = bodyWithoutParagraphStat(
+        contents,
+        paragraph.index,
+        paragraphText,
+        bodyStat.index,
+        bodyStat.end
+      );
+      return {
+        stat: bodyStat.value,
+        description: description || headingText || bodyStat.value
+      };
     }
-  ];
-  if (imageSrc) {
-    layers.push({
-      type: "image",
-      id: "feature-image",
-      content: {
-        src: imageSrc,
-        alt: imageAlt ?? title ?? "",
-        fit: imageFit,
-        ...treatment ? { treatment } : {}
-      },
-      position: { x: imgX, y: imgY, width: imgW, height: imgH }
-    });
-  }
-  if (title) {
-    layers.push({
-      type: "text",
-      id: "feature-title",
-      content: {
-        text: title,
-        style: {
-          fontSize: titleFontSize,
-          fontFamily: getThemeFont(context, "title"),
-          fontWeight: "bold",
-          color: theme.colors.text,
-          textAlign,
-          lineHeight: 1.2
-        }
-      },
-      position: {
-        x: textX,
-        y: titleY,
-        anchor: textAnchor,
-        width: `${textColumnWidth}%`
-      },
-      animation: themedEntrance(context, "text", { type: "fadeIn", duration: 0.8 })
-    });
-  }
-  if (body) {
-    layers.push({
-      type: "text",
-      id: "feature-body",
-      content: {
-        text: body,
-        style: {
-          fontSize: bodyFontSize2,
-          fontFamily: getThemeFont(context, "body"),
-          color: theme.colors.textMuted,
-          textAlign,
-          lineHeight: 1.5
-        }
-      },
-      position: {
-        x: textX,
-        y: bodyY,
-        anchor: textAnchor,
-        width: `${textColumnWidth}%`
-      },
-      animation: themedEntrance(context, "text", { type: "fadeIn", duration: 0.8, delay: 0.2 })
-    });
   }
-  return layers;
+  return { stat: headingText, description: bodyText3 || headingText };
 }
-function leftFeature(input, context) {
-  return buildFeatureLayers(input, context, "left");
+function normalizeCoverageText(value) {
+  return value.replace(/\s+/g, " ").trim();
 }
-function rightFeature(input, context) {
-  return buildFeatureLayers(input, context, "right");
+function autoTemplatePreservesContent(templateName, contents) {
+  const nodes = contents ?? [];
+  switch (templateName) {
+    case "quote":
+      return nodes.length === 1 && nodes[0]?.type === "blockquote";
+    case "dataTable":
+      return nodes.length === 1 && nodes[0]?.type === "table";
+    case "list":
+      return nodes.length === 1 && nodes[0]?.type === "list";
+    case "diagram":
+    case "timeline":
+      return nodes.length === 1 && nodes[0]?.type === "code";
+    case "tree":
+      return nodes.length === 1 && (nodes[0]?.type === "code" || nodes[0]?.type === "list");
+    case "photoGrid": {
+      const images = extractImages(nodes);
+      if (images.length < 2 || images.length > 4) return false;
+      const bodyText3 = normalizeCoverageText(extractBodyPlainText(nodes));
+      const representedText = normalizeCoverageText(
+        images.map((image) => image.alt).filter(Boolean).join(" ")
+      );
+      return bodyText3 === "" || bodyText3 === representedText;
+    }
+    case "videoWithCaption": {
+      const videos = extractEmbeddedVideos(nodes);
+      if (videos.length !== 1) return false;
+      const bodyText3 = normalizeCoverageText(extractBodyPlainText(nodes));
+      return bodyText3 === normalizeCoverageText(videos[0]?.alt ?? "");
+    }
+    case "leftFeature":
+    case "rightFeature":
+    case "statHighlight":
+      return true;
+    default:
+      return false;
+  }
 }
-
-// src/doc/templates/mapBlock.ts
-function mapBlock(input, context) {
-  const {
-    center,
-    zoom,
-    mapStyle = "terrain",
-    title,
-    caption,
-    markers,
-    ambientMotion,
-    staticSrc
-  } = input;
-  const { theme, layout } = context;
-  const titleFontSize = themedFontSize(64, context, true);
-  const captionFontSize = themedFontSize(32, context, false);
-  const mapAnimation = mapAmbientMotion(ambientMotion);
-  const layers = [
-    // Map background
-    {
-      type: "map",
-      id: "map-bg",
-      content: {
-        center,
-        zoom,
-        style: mapStyle,
-        markers,
-        showAttribution: true,
-        staticSrc
-        // Use pre-rendered image if available
-      },
-      position: { x: 0, y: 0, width: "100%", height: "100%" },
-      animation: mapAnimation
+function deriveTemplateInputs(templateName, headingText, contents, options = {}) {
+  const placeholders = options.placeholders === true;
+  const bodyText3 = extractBodyPlainText(contents);
+  switch (templateName) {
+    case "statHighlight": {
+      const inputs = deriveStatHighlightInputs(headingText, contents, bodyText3);
+      if (options.preserveSourceHeading && headingText && inputs.stat !== headingText && inputs.description !== headingText) {
+        return {
+          ...inputs,
+          description: headingText,
+          ...inputs.description ? { detail: inputs.description } : {}
+        };
+      }
+      return inputs;
     }
-  ];
-  const bg = theme.colors.background;
+    case "quote": {
+      const quote = extractBlockquoteText(contents) || bodyText3;
+      if (quote) return { quote, ...headingText ? { title: headingText } : {} };
+      return { quote: headingText };
+    }
+    case "fullBleedQuote":
+    case "pullQuote": {
+      const text = extractBlockquoteText(contents) || bodyText3 || headingText;
+      return { text };
+    }
+    case "factCard":
+      return { fact: headingText, explanation: bodyText3 || headingText };
+    case "comparisonBar":
+      return placeholders ? { leftLabel: "A", leftValue: 60, rightLabel: "B", rightValue: 40 } : null;
+    case "list": {
+      const items = extractListItems(contents);
+      if (items.length > 0) return { items, ...headingText ? { title: headingText } : {} };
+      return placeholders ? { items: ["Item 1", "Item 2", "Item 3"] } : null;
+    }
+    case "definitionCard":
+      return { term: headingText, definition: bodyText3 || headingText };
+    case "dateEvent":
+      return { date: headingText, description: bodyText3 || headingText };
+    case "dataTable": {
+      const tableData = extractTableFromContents(contents);
+      if (tableData) return { ...tableData, ...headingText ? { title: headingText } : {} };
+      return placeholders ? { headers: ["Column"], rows: [["Data"]] } : null;
+    }
+    case "barChart":
+    case "columnChart":
+    case "pieChart":
+    case "donutChart":
+    case "lineChart":
+    case "areaChart":
+    case "scatterChart": {
+      const tableData = extractTableFromContents(contents);
+      if (tableData) {
+        return {
+          headers: tableData.headers,
+          rows: tableData.rows,
+          ...headingText ? { title: headingText } : {}
+        };
+      }
+      return placeholders && !bodyText3.trim() ? {
+        headers: ["Quarter", "Revenue", "Costs"],
+        rows: [
+          ["Q1", "40", "28"],
+          ["Q2", "55", "31"],
+          ["Q3", "48", "30"],
+          ["Q4", "62", "35"]
+        ],
+        ...headingText ? { title: headingText } : {}
+      } : null;
+    }
+    case "imageWithCaption": {
+      const img = extractFirstImage(contents);
+      if (!img) return placeholders ? { caption: headingText } : null;
+      return { imageSrc: img.src, imageAlt: img.alt || headingText, caption: headingText };
+    }
+    case "bigText": {
+      const img = extractFirstImage(contents);
+      return {
+        title: headingText,
+        ...img ? { imageSrc: img.src, imageAlt: img.alt || headingText } : {}
+      };
+    }
+    case "photoGrid": {
+      const images = extractImages(contents, 4);
+      if (images.length < 2) return placeholders ? {} : null;
+      return {
+        images: images.map((i) => ({ src: i.src, alt: i.alt })),
+        caption: headingText
+      };
+    }
+    case "videoWithCaption": {
+      const video = extractFirstEmbeddedVideo(contents);
+      if (!video) return placeholders ? { caption: headingText } : null;
+      return {
+        videoSrc: video.src,
+        posterSrc: video.posterSrc,
+        videoAlt: video.alt || headingText,
+        caption: headingText
+      };
+    }
+    case "leftFeature":
+    case "rightFeature": {
+      const img = extractFirstImage(contents);
+      if (!img && !placeholders) return null;
+      return {
+        imageSrc: img?.src ?? "",
+        imageAlt: img?.alt || headingText,
+        imageWidth: img?.width,
+        imageHeight: img?.height,
+        title: headingText,
+        body: bodyText3
+      };
+    }
+    case "diagram": {
+      const fences = (contents ?? []).filter((n) => n.type === "code");
+      const fence = fences.length === 1 && isEligibleAsciiFenceLang(fences[0].lang) ? fences[0] : void 0;
+      const detection = fence ? detectAsciiDiagram(fence.value, { explicit: isExplicitDiagramLang(fence.lang) }) : void 0;
+      if (!detection?.isDiagram || !detection.diagram) return placeholders ? {} : null;
+      const { nodes, edges } = asciiDiagramToTemplateData(detection.diagram);
+      return { nodes, edges, ...headingText ? { title: headingText } : {} };
+    }
+    case "timeline": {
+      const fences = (contents ?? []).filter((n) => n.type === "code");
+      const fence = fences.length === 1 && isEligibleAsciiTimelineFenceLang(fences[0].lang) ? fences[0] : void 0;
+      const detection = fence ? detectAsciiTimeline(fence.value, { explicit: true }) : void 0;
+      if (!detection?.isTimeline || !detection.timeline) return placeholders ? {} : null;
+      const { tracks, links } = asciiTimelineToTemplateData(detection.timeline);
+      return { tracks, links, ...headingText ? { title: headingText } : {} };
+    }
+    case "tree": {
+      const fences = (contents ?? []).filter((n) => n.type === "code");
+      const fence = fences.length === 1 && isEligibleTreeFenceLang(fences[0].lang) ? fences[0] : void 0;
+      if (fence) {
+        const detection = detectTree(fence.value, { explicit: isExplicitTreeLang(fence.lang) });
+        if (detection.isTree && detection.tree) {
+          const { items } = treeToTemplateData(detection.tree);
+          return { items, ...headingText ? { title: headingText } : {} };
+        }
+      }
+      const list = findFirstList(contents);
+      if (list) {
+        const { items } = treeToTemplateData(treeFromMarkdownList(list));
+        if (items.length > 0) return { items, ...headingText ? { title: headingText } : {} };
+      }
+      return placeholders ? {} : null;
+    }
+    default:
+      return placeholders ? {} : null;
+  }
+}
+
+// src/doc/templates/contentBlock.ts
+function bodyNodes(context) {
+  return (context.block?.contents ?? []).filter(
+    // Mermaid source is already materialized as a visual layer. Repeating the
+    // fence text as prose makes the loss-averse default noisy without
+    // preserving any additional authored meaning.
+    (node) => !(node.type === "code" && node.lang?.trim().toLowerCase() === "mermaid")
+  );
+}
+function plainListText(list, depth = 0) {
+  const indent = "  ".repeat(depth);
+  return list.children.flatMap((item, index) => {
+    const ownText = item.children.filter((node) => node.type !== "list").map((node) => extractPlainText(node).trim()).filter(Boolean).join(" ");
+    const marker = list.ordered ? `${(list.start ?? 1) + index}.` : "\u2022";
+    const lines = ownText ? [`${indent}${marker} ${ownText}`] : [];
+    for (const child of item.children) {
+      if (child.type === "list") lines.push(plainListText(child, depth + 1));
+    }
+    return lines;
+  }).join("\n");
+}
+function completeBodyText(nodes) {
+  return nodes.map((node, index) => {
+    const text = node.type === "list" ? plainListText(node) : extractPlainText(node);
+    if (index === 0) return text;
+    const separator = "\n".repeat(markdownBlockSeparatorLines(nodes[index - 1], node));
+    return `${separator}${text}`;
+  }).join("").trim();
+}
+function bodyFontSize(body, context) {
+  const base = body.length > 1800 ? 18 : body.length > 1100 ? 21 : body.length > 650 ? 24 : 28;
+  return themedFontSize(base, context, false);
+}
+function contentBlock(input, context) {
+  const { theme } = context;
+  const title = input.title ?? context.block?.title ?? "";
+  const markdown = bodyNodes(context);
+  const body = completeBodyText(markdown);
+  const bodyHtml = renderMarkdownBlocksHtml(markdown);
+  const layers = [createBackgroundLayer("bg", theme.colors.background)];
   if (title) {
-    layers.push({
-      type: "shape",
-      id: "title-overlay",
-      content: {
-        shape: "rect",
-        fill: `linear-gradient(180deg, ${withAlpha(bg, 0.85)} 0%, ${withAlpha(bg, 0.6)} 70%, ${withAlpha(bg, 0)} 100%)`
-      },
-      position: { x: 0, y: 0, width: "100%", height: "20%" }
-    });
     layers.push({
       type: "text",
       id: "title",
       content: {
         text: title,
         style: {
-          fontSize: titleFontSize,
+          fontSize: themedFontSize(46, context, true),
           fontFamily: getThemeFont(context, "title"),
           fontWeight: "bold",
           color: theme.colors.text,
-          textAlign: "center",
+          textAlign: "left",
+          lineHeight: 1.15,
           shadow: shouldUseShadow(context)
         }
       },
-      position: {
-        x: "50%",
-        y: "9%",
-        anchor: "center",
-        width: layout.maxTextWidth
-      },
-      animation: { type: "fadeIn", duration: 1, delay: 0.3 }
+      position: { x: "8%", y: "9%", width: "84%", height: "15%", anchor: "top-left" }
     });
   }
-  if (caption) {
-    layers.push({
-      type: "shape",
-      id: "caption-overlay",
-      content: {
-        shape: "rect",
-        fill: `linear-gradient(0deg, ${withAlpha(bg, 0.85)} 0%, ${withAlpha(bg, 0.6)} 70%, ${withAlpha(bg, 0)} 100%)`
-      },
-      position: { x: 0, y: "80%", width: "100%", height: "20%" }
-    });
+  if (body) {
     layers.push({
       type: "text",
-      id: "caption",
+      id: "body",
       content: {
-        text: caption,
+        text: body,
+        ...bodyHtml ? { html: bodyHtml } : {},
         style: {
-          fontSize: captionFontSize,
+          fontSize: bodyFontSize(body, context),
           fontFamily: getThemeFont(context, "body"),
           color: theme.colors.text,
-          textAlign: "center",
+          textAlign: "left",
+          lineHeight: 1.35,
           shadow: shouldUseShadow(context)
         }
       },
       position: {
-        x: "50%",
-        y: layout.captionY,
-        anchor: "center",
-        width: layout.maxTextWidth
-      },
-      animation: { type: "fadeIn", duration: 1, delay: 0.5 }
+        x: "8%",
+        y: title ? "28%" : "10%",
+        width: "84%",
+        height: title ? "64%" : "82%",
+        anchor: "top-left"
+      }
     });
   }
   return layers;
 }
 
-// src/doc/templates/fullBleedQuote.ts
-function fullBleedQuote(input, context) {
-  const { text, colorScheme = "blue" } = input;
+// src/doc/templates/statHighlight.ts
+function statHighlight(input, context) {
+  const { stat, description, detail, colorScheme = "blue", accentImage } = input;
+  const { theme } = context;
   const colors = resolveColorScheme(context, colorScheme);
-  const textFontSize = themedFontSize(120, context, true);
-  return [
-    // Background — radial vignette built from the color scheme's own
-    // surface, so the card takes on the scheme (and the theme behind it)
-    // instead of vignetting every theme into hard black.
-    {
-      type: "shape",
-      id: "bg",
-      content: {
-        shape: "rect",
-        fill: `radial-gradient(ellipse at 50% 50%, ${colors.bg} 0%, ${oklchDarken(colors.bg, 0.12)} 100%)`
-      },
-      position: { x: 0, y: 0, width: "100%", height: "100%" }
+  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
+  const statFontSize = themedFontSize(148, context, true);
+  const descFontSize = themedFontSize(32, context, false);
+  const detailFontSize = themedFontSize(26, context, false);
+  const layers = [createBackgroundLayer("bg", themedSurfaceGradient(context, 180))];
+  if (accentImage) {
+    layers.push(
+      ...createAccentLayers(
+        accentImage,
+        input.id,
+        themedImageTreatment(context, input.imageTreatment)
+      )
+    );
+  }
+  layers.push({
+    type: "text",
+    id: "stat",
+    content: {
+      text: stat,
+      style: {
+        fontSize: statFontSize,
+        fontFamily: getThemeFont(context, "title"),
+        fontWeight: "bold",
+        color: colors.text,
+        shadow: shouldUseShadow(context)
+      }
     },
-    // The text — massive, centered
-    {
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY("36%", accentLayout),
+      anchor: "center"
+    },
+    animation: getTemplateHint(context, "statHighlight", "entrance", "subtle") === "dramatic" ? { type: "zoomIn", duration: 0.4 } : { type: "zoomIn", duration: 0.6 }
+  });
+  layers.push({
+    type: "text",
+    id: "description",
+    content: {
+      text: description,
+      style: {
+        fontSize: descFontSize,
+        fontFamily: getThemeFont(context, "body"),
+        color: theme.colors.textMuted,
+        textAlign: "center",
+        lineHeight: 1.5,
+        shadow: shouldUseShadow(context)
+      }
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY("54%", accentLayout),
+      width: accentLayout.textWidth,
+      anchor: "center"
+    },
+    animation: { type: "fadeIn", duration: 1, delay: 0.3 }
+  });
+  if (detail) {
+    layers.push({
       type: "text",
-      id: "impact-text",
+      id: "detail",
       content: {
-        text,
+        text: detail,
         style: {
-          fontSize: textFontSize,
-          fontFamily: getThemeFont(context, "title"),
-          fontWeight: "bold",
+          fontSize: detailFontSize,
+          fontFamily: getThemeFont(context, "body"),
+          // Scheme *text* rather than *accent*: accents in the built-in
+          // schemes are tuned as chart/fill colors and drop below legible
+          // contrast as body copy on light surfaces.
           color: colors.text,
           textAlign: "center",
-          lineHeight: 1.2,
           shadow: shouldUseShadow(context)
         }
       },
       position: {
-        x: "50%",
-        y: "50%",
-        anchor: "center",
-        width: "85%"
+        x: accentLayout.textCenterX,
+        y: adjustY("66%", accentLayout),
+        width: accentLayout.textWidth,
+        anchor: "center"
       },
-      animation: getTemplateHint(context, "fullBleedQuote", "entrance", "subtle") === "dramatic" ? { type: "zoomIn", duration: 0.8 } : { type: "fadeIn", duration: 1.5 }
-    }
-  ];
+      animation: { type: "fadeIn", duration: 1, delay: 1 }
+    });
+  }
+  return layers;
 }
 
-// src/doc/templates/diagramLayout.ts
-var DEFAULT_OPTS = {
-  gapX: 260,
-  gapY: 140,
-  gridPad: 80,
-  gridOriginX: 80,
-  gridOriginY: 80
-};
-function computeDiagramLayout(children, options = {}) {
-  const opts = { ...DEFAULT_OPTS, ...options };
-  const warnings = [];
-  const entries = [];
-  const unpositionedIdx = [];
-  for (let i = 0; i < children.length; i++) {
-    const c = children[i];
-    const hasX = typeof c.x === "number";
-    const hasY = typeof c.y === "number";
-    if (hasX && hasY) {
-      entries.push({ child: c, pinned: true, x: c.x, y: c.y });
-    } else {
-      entries.push({ child: c, pinned: false, x: 0, y: 0 });
-      unpositionedIdx.push(i);
-    }
+// src/doc/templates/quoteBlock.ts
+function quoteBlock(input, context) {
+  const { title, quote, attribution, accentImage } = input;
+  const { theme, viewport } = context;
+  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
+  const quoteFontSize = themedFontSize(48, context, true);
+  const titleFontSize = themedFontSize(34, context, true);
+  const attrFontSize = themedFontSize(26, context, false);
+  const quoteLineHeight = Math.max(theme.typography.titleLineHeight ?? 1.4, 1.25);
+  const decorativeQuoteFontSize = themedFontSize(280, context, true);
+  const layers = [createBackgroundLayer("bg", themedSurfaceGradient(context, 160))];
+  if (accentImage) {
+    layers.push(
+      ...createAccentLayers(
+        accentImage,
+        input.id,
+        themedImageTreatment(context, input.imageTreatment)
+      )
+    );
   }
-  if (unpositionedIdx.length > 0) {
-    const cols = Math.max(1, Math.ceil(Math.sqrt(unpositionedIdx.length)));
-    let baseX = opts.gridOriginX;
-    let baseY = opts.gridOriginY;
-    const pinned = entries.filter((e) => e.pinned);
-    if (pinned.length > 0) {
-      const minX = Math.min(...pinned.map((e) => e.x));
-      const maxY = Math.max(...pinned.map((e) => e.y));
-      baseX = minX;
-      baseY = maxY + opts.gridPad + opts.gapY;
-    }
-    unpositionedIdx.forEach((entryIdx, k) => {
-      const col = k % cols;
-      const row = Math.floor(k / cols);
-      entries[entryIdx].x = baseX + col * opts.gapX;
-      entries[entryIdx].y = baseY + row * opts.gapY;
+  if (title) {
+    layers.push({
+      type: "text",
+      id: "quote-title",
+      content: {
+        text: title,
+        style: {
+          fontSize: titleFontSize,
+          fontFamily: getThemeFont(context, "body"),
+          fontWeight: "bold",
+          color: theme.colors.textMuted,
+          textAlign: "center",
+          shadow: shouldUseShadow(context)
+        }
+      },
+      position: {
+        x: accentLayout.textCenterX,
+        y: adjustY("14%", accentLayout),
+        width: accentLayout.textWidth,
+        anchor: "center"
+      },
+      animation: { type: "fadeIn", duration: 0.8 }
     });
   }
-  const nodes = entries.map((e) => ({
-    id: e.child.id,
-    label: e.child.title ?? e.child.id,
-    x: e.x,
-    y: e.y,
-    pinned: e.pinned,
-    ...e.child.classes && e.child.classes.length > 0 ? { classes: e.child.classes } : {}
-  }));
-  const nodeIds = new Set(nodes.map((n) => n.id));
-  const edges = [];
-  const seenEdgeIds = /* @__PURE__ */ new Set();
-  for (const child of children) {
-    if (!child.connectsTo) continue;
-    for (const conn of child.connectsTo) {
-      if (!nodeIds.has(conn.target)) {
-        warnings.push(`Edge from "${child.id}" to "${conn.target}" dropped: no such sibling node`);
-        continue;
+  layers.push({
+    type: "text",
+    id: "deco-quote",
+    content: {
+      text: "\u201C",
+      style: {
+        fontSize: decorativeQuoteFontSize,
+        fontFamily: getThemeFont(context, "title"),
+        color: withAlpha(theme.colors.text, 0.09),
+        textAlign: "center"
       }
-      const edgeId = makeEdgeId(child.id, conn);
-      if (seenEdgeIds.has(edgeId)) continue;
-      seenEdgeIds.add(edgeId);
-      edges.push({
-        id: edgeId,
-        source: child.id,
-        target: conn.target,
-        ...conn.type ? { type: conn.type } : {}
-      });
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY("26%", accentLayout),
+      anchor: "center"
     }
-  }
-  return { nodes, edges, warnings };
-}
-function makeEdgeId(source, conn) {
-  return conn.type ? `${source}->${conn.target}:${conn.type}` : `${source}->${conn.target}`;
-}
-
-// src/doc/asciiDiagram/types.ts
-var ASCII_CHAR_W = 14;
-var ASCII_CHAR_H = 28;
-
-// src/doc/asciiDiagram/mapping.ts
-function asciiCellToCanvas(col, row) {
-  return { x: col * ASCII_CHAR_W, y: row * ASCII_CHAR_H };
-}
-function canvasToAsciiCell(x, y) {
-  return {
-    col: Math.max(0, Math.round(x / ASCII_CHAR_W)),
-    row: Math.max(0, Math.round(y / ASCII_CHAR_H))
-  };
-}
-function asciiDiagramToTemplateData(diagram) {
-  const nodes = diagram.nodes.map((n) => ({
-    id: n.id,
-    label: n.label,
-    ...asciiCellToCanvas(n.col, n.row),
-    w: n.wCols * ASCII_CHAR_W,
-    h: n.hRows * ASCII_CHAR_H,
-    ...n.containerId ? { container: n.containerId } : {}
-  }));
-  const anchors = inferEdgeAnchors(nodes, diagram.edges);
-  const edges = diagram.edges.map((e, index) => ({
-    source: e.source,
-    target: e.target,
-    ...e.label ? { label: e.label } : {},
-    ...e.directed ? {} : { directed: false },
-    ...anchors[index],
-    routing: "orthogonal"
-  }));
-  return { nodes, edges };
-}
-function inferEdgeAnchors(nodes, edges) {
-  const nodeById = new Map(nodes.map((node) => [node.id, node]));
-  const pairs = edges.map((edge) => {
-    const source = nodeById.get(edge.source);
-    const target = nodeById.get(edge.target);
-    if (!source || !target) {
-      return {
-        sourceAnchor: { side: "right", offset: 0.5 },
-        targetAnchor: { side: "left", offset: 0.5 }
-      };
-    }
-    const sourceW = source.w ?? ASCII_CHAR_W * 12;
-    const sourceH = source.h ?? ASCII_CHAR_H * 3;
-    const targetW = target.w ?? ASCII_CHAR_W * 12;
-    const targetH = target.h ?? ASCII_CHAR_H * 3;
-    const dx = target.x + targetW / 2 - (source.x + sourceW / 2);
-    const dy = target.y + targetH / 2 - (source.y + sourceH / 2);
-    const horizontalDistance = Math.abs(dx) / Math.max(1, (sourceW + targetW) / 2);
-    const verticalDistance = Math.abs(dy) / Math.max(1, (sourceH + targetH) / 2);
-    if (verticalDistance >= horizontalDistance) {
-      return dy >= 0 ? {
-        sourceAnchor: { side: "bottom", offset: 0.5 },
-        targetAnchor: { side: "top", offset: 0.5 }
-      } : {
-        sourceAnchor: { side: "top", offset: 0.5 },
-        targetAnchor: { side: "bottom", offset: 0.5 }
-      };
-    }
-    return dx >= 0 ? {
-      sourceAnchor: { side: "right", offset: 0.5 },
-      targetAnchor: { side: "left", offset: 0.5 }
-    } : {
-      sourceAnchor: { side: "left", offset: 0.5 },
-      targetAnchor: { side: "right", offset: 0.5 }
-    };
   });
-  distributeOffsets(pairs, edges, nodes, "source");
-  distributeOffsets(pairs, edges, nodes, "target");
-  coalesceAlignedFanOutAnchors(pairs, edges, nodes);
-  return pairs;
-}
-function coalesceAlignedFanOutAnchors(pairs, edges, nodes) {
-  const nodeById = new Map(nodes.map((node) => [node.id, node]));
-  const groups = /* @__PURE__ */ new Map();
-  edges.forEach((edge, index) => {
-    const group = groups.get(edge.source) ?? [];
-    group.push(index);
-    groups.set(edge.source, group);
+  const quoteYPct = attribution ? 45 : title ? 52 : 50;
+  layers.push({
+    type: "text",
+    id: "quote",
+    content: {
+      text: quote,
+      style: {
+        fontSize: quoteFontSize,
+        fontFamily: getThemeFont(context, "title"),
+        color: theme.colors.text,
+        textAlign: "center",
+        lineHeight: quoteLineHeight,
+        shadow: shouldUseShadow(context)
+      }
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY(`${quoteYPct}%`, accentLayout),
+      anchor: "center",
+      width: accentLayout.textWidth
+    },
+    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 2 })
   });
-  for (const [sourceId, indexes] of groups) {
-    if (indexes.length < 2) continue;
-    const source = nodeById.get(sourceId);
-    const targets = indexes.map((index) => nodeById.get(edges[index].target)).filter((node) => node !== void 0);
-    if (!source || targets.length !== indexes.length) continue;
-    const sourceW = source.w ?? ASCII_CHAR_W * 12;
-    const sourceH = source.h ?? ASCII_CHAR_H * 3;
-    const sourceRight = source.x + sourceW;
-    const sourceBottom = source.y + sourceH;
-    const targetRight = (target) => target.x + (target.w ?? ASCII_CHAR_W * 12);
-    const targetBottom = (target) => target.y + (target.h ?? ASCII_CHAR_H * 3);
-    let sourceSide;
-    let targetSide;
-    if (targets.every((target) => target.y >= sourceBottom)) {
-      sourceSide = "bottom";
-      targetSide = "top";
-    } else if (targets.every((target) => targetBottom(target) <= source.y)) {
-      sourceSide = "top";
-      targetSide = "bottom";
-    } else if (targets.every((target) => target.x >= sourceRight)) {
-      sourceSide = "right";
-      targetSide = "left";
-    } else if (targets.every((target) => targetRight(target) <= source.x)) {
-      sourceSide = "left";
-      targetSide = "right";
-    }
-    if (!sourceSide || !targetSide) continue;
-    for (const index of indexes) {
-      pairs[index] = {
-        sourceAnchor: { side: sourceSide, offset: 0.5 },
-        targetAnchor: { side: targetSide, offset: 0.5 }
-      };
-    }
+  if (attribution) {
+    const quoteWidthPx = parseFloat(accentLayout.textWidth) / 100 * viewport.width;
+    const quoteHeightPx = estimateTextHeight(quote, quoteFontSize, quoteWidthPx, quoteLineHeight);
+    const gapPx = quoteFontSize * 1.7;
+    const attrYPct = Math.min(
+      82,
+      quoteYPct + (quoteHeightPx / 2 + gapPx) / viewport.height * 100
+    );
+    layers.push({
+      type: "text",
+      id: "attribution",
+      content: {
+        text: `\u2014 ${attribution}`,
+        style: {
+          fontSize: attrFontSize,
+          fontFamily: getThemeFont(context, "body"),
+          color: theme.colors.textMuted,
+          textAlign: "center",
+          shadow: shouldUseShadow(context)
+        }
+      },
+      position: {
+        x: accentLayout.textCenterX,
+        y: adjustY(`${attrYPct}%`, accentLayout),
+        anchor: "center"
+      },
+      animation: { type: "fadeIn", duration: 1, delay: 1.5 }
+    });
   }
+  return layers;
 }
-function distributeOffsets(pairs, edges, nodes, endpoint) {
-  const nodeById = new Map(nodes.map((node) => [node.id, node]));
-  const groups = /* @__PURE__ */ new Map();
-  for (let index = 0; index < edges.length; index++) {
-    const edge = edges[index];
-    const anchor = endpoint === "source" ? pairs[index].sourceAnchor : pairs[index].targetAnchor;
-    const nodeId = endpoint === "source" ? edge.source : edge.target;
-    const key = `${nodeId}:${anchor.side}`;
-    const group = groups.get(key) ?? [];
-    group.push(index);
-    groups.set(key, group);
+
+// src/doc/templates/factCard.ts
+function factCard(input, context) {
+  const { fact, explanation, source, accentImage } = input;
+  const { theme, viewport } = context;
+  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
+  const factFontSize = themedFontSize(56, context, true);
+  const explainFontSize = themedFontSize(34, context, false);
+  const sourceFontSize = themedFontSize(20, context, false);
+  const layers = [createBackgroundLayer("bg", themedSurfaceGradient(context, 170))];
+  if (accentImage) {
+    layers.push(
+      ...createAccentLayers(
+        accentImage,
+        input.id,
+        themedImageTreatment(context, input.imageTreatment)
+      )
+    );
   }
-  for (const indexes of groups.values()) {
-    if (indexes.length < 2) continue;
-    const side = endpoint === "source" ? pairs[indexes[0]].sourceAnchor.side : pairs[indexes[0]].targetAnchor.side;
-    indexes.sort((a, b) => {
-      const oppositeA = nodeById.get(endpoint === "source" ? edges[a].target : edges[a].source);
-      const oppositeB = nodeById.get(endpoint === "source" ? edges[b].target : edges[b].source);
-      const axisA = side === "top" || side === "bottom" ? oppositeA?.x ?? 0 : oppositeA?.y ?? 0;
-      const axisB = side === "top" || side === "bottom" ? oppositeB?.x ?? 0 : oppositeB?.y ?? 0;
-      return axisA - axisB || a - b;
-    });
-    indexes.forEach((edgeIndex, rank) => {
-      const anchor = endpoint === "source" ? pairs[edgeIndex].sourceAnchor : pairs[edgeIndex].targetAnchor;
-      anchor.offset = (rank + 1) / (indexes.length + 1);
+  const textWidthPx = parseFloat(accentLayout.textWidth) / 100 * viewport.width;
+  const factH = estimateTextHeight(fact, factFontSize, textWidthPx, 1.3);
+  const explainH = estimateTextHeight(explanation, explainFontSize, textWidthPx, 1.5);
+  const sourceH = source ? sourceFontSize * 1.4 : 0;
+  const gap = factFontSize * 0.9;
+  const sourceGap = source ? explainFontSize * 1.1 : 0;
+  const totalH = factH + gap + explainH + sourceGap + sourceH;
+  const groupTopPct = 47 - totalH / 2 / viewport.height * 100;
+  const pct = (px) => groupTopPct + px / viewport.height * 100;
+  const factY = pct(factH / 2);
+  const explainY = pct(factH + gap + explainH / 2);
+  const sourceY = pct(factH + gap + explainH + sourceGap + sourceH / 2);
+  layers.push({
+    type: "text",
+    id: "fact",
+    content: {
+      text: fact,
+      style: {
+        fontSize: factFontSize,
+        fontFamily: getThemeFont(context, "title"),
+        fontWeight: "bold",
+        color: theme.colors.text,
+        textAlign: "center",
+        lineHeight: 1.3,
+        shadow: shouldUseShadow(context)
+      }
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY(`${factY}%`, accentLayout),
+      width: accentLayout.textWidth,
+      anchor: "center"
+    },
+    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1.5 })
+  });
+  layers.push({
+    type: "text",
+    id: "explanation",
+    content: {
+      text: explanation,
+      style: {
+        fontSize: explainFontSize,
+        fontFamily: getThemeFont(context, "body"),
+        color: theme.colors.textMuted,
+        textAlign: "center",
+        lineHeight: 1.5,
+        shadow: shouldUseShadow(context)
+      }
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY(`${explainY}%`, accentLayout),
+      width: accentLayout.textWidth,
+      anchor: "center"
+    },
+    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1, delay: 0.8 })
+  });
+  if (source) {
+    layers.push({
+      type: "text",
+      id: "source",
+      content: {
+        text: source,
+        style: {
+          fontSize: sourceFontSize,
+          fontFamily: getThemeFont(context, "body"),
+          color: theme.colors.textMuted,
+          textAlign: "center",
+          shadow: shouldUseShadow(context)
+        }
+      },
+      position: {
+        x: accentLayout.textCenterX,
+        y: adjustY(`${sourceY}%`, accentLayout),
+        anchor: "center"
+      },
+      animation: { type: "fadeIn", duration: 0.8, delay: 1.5 }
     });
   }
-}
-function asciiDiagramFromTemplateData(nodes, edges, options = {}) {
-  const ids = new Set(nodes.map((n) => n.id));
-  const outNodes = nodes.map((n) => {
-    const { col, row } = canvasToAsciiCell(n.x, n.y);
-    const labelLines = n.label.length > 0 ? n.label.split("\n") : [];
-    const innerW = labelLines.reduce((w, l) => Math.max(w, l.length), 0);
-    const wCols = typeof n.w === "number" ? Math.max(3, Math.round(n.w / ASCII_CHAR_W)) : innerW + 4;
-    const hRows = typeof n.h === "number" ? Math.max(3, Math.round(n.h / ASCII_CHAR_H)) : labelLines.length + 2;
-    return {
-      id: n.id,
-      label: n.label,
-      col,
-      row,
-      wCols: Math.max(wCols, 3),
-      hRows: Math.max(hRows, 3),
-      ...n.container && ids.has(n.container) && n.container !== n.id ? { containerId: n.container } : {}
-    };
-  });
-  return {
-    nodes: outNodes,
-    edges: edges.filter((e) => ids.has(e.source) && ids.has(e.target)).map((e) => ({
-      source: e.source,
-      target: e.target,
-      ...e.label ? { label: e.label } : {},
-      directed: e.directed !== false
-    })),
-    style: options.style ?? "unicode",
-    warnings: []
-  };
-}
-function asciiDiagramFromBlocks(children, options = {}) {
-  const layout = computeDiagramLayout(children);
-  const nodes = layout.nodes.map((n) => ({
-    id: n.id,
-    label: n.label,
-    x: n.x,
-    y: n.y
-  }));
-  const edges = layout.edges.map((e) => ({
-    source: e.source,
-    target: e.target,
-    ...e.type ? { label: e.type } : {}
-  }));
-  const diagram = asciiDiagramFromTemplateData(nodes, edges, options);
-  diagram.warnings.push(...layout.warnings);
-  return diagram;
+  return layers;
 }
 
-// src/doc/asciiTimeline/mapping.ts
-function asciiTimelineToTemplateData(timeline) {
-  const globalStart = timeline.tracks.length > 0 ? Math.min(...timeline.tracks.map((track) => track.startColumn)) : 0;
-  const globalEnd = timeline.tracks.length > 0 ? Math.max(...timeline.tracks.map((track) => track.endColumn)) : 1;
-  const span = Math.max(1, globalEnd - globalStart);
-  const tracks = timeline.tracks.map((track) => ({
-    id: track.id,
-    ...track.label ? { label: track.label } : {},
-    ...track.endLabel ? { endLabel: track.endLabel } : {},
-    events: track.events.map(
-      (event) => ({
-        id: event.id,
-        label: event.label,
-        ...event.description ? { description: event.description } : {},
-        position: clamp01((event.column - globalStart) / span),
-        ...event.side ? { side: event.side } : {},
-        ...event.descriptionSide ? { descriptionSide: event.descriptionSide } : {},
-        ...event.callout === false ? { callout: false } : {},
-        ...event.marker ? { marker: event.marker } : {}
-      })
-    )
-  }));
-  const links = timeline.links.map((link) => ({ ...link }));
-  return { tracks, links };
-}
-function clamp01(value) {
-  return Math.max(0, Math.min(1, value));
-}
-
-// src/doc/treeview/mapping.ts
-function treeToTemplateData(tree) {
-  return { items: tree.roots.map(toItem) };
-}
-function toItem(node) {
-  return {
-    id: node.id,
-    label: node.label,
-    ...node.isDir ? { isDir: true } : {},
-    ...node.comment ? { comment: node.comment } : {},
-    children: node.children.map(toItem)
-  };
-}
-function treeFromTemplateData(items, options = {}) {
-  const roots = items.map(fromItem);
-  return { roots, style: options.style ?? "unicode", warnings: [] };
-}
-function fromItem(item) {
-  const children = Array.isArray(item.children) ? item.children.map(fromItem) : [];
-  return {
-    id: typeof item.id === "string" && item.id ? item.id : "node",
-    label: typeof item.label === "string" ? item.label : "",
-    children,
-    isDir: item.isDir === true || children.length > 0,
-    ...item.comment ? { comment: item.comment } : {}
-  };
-}
-function treeFromMarkdownList(list) {
-  const usedIds = /* @__PURE__ */ new Map();
-  const slugify2 = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "node";
-  const idFor = (label) => {
-    const base = slugify2(label.replace(/\/$/, ""));
-    const count = usedIds.get(base) ?? 0;
-    usedIds.set(base, count + 1);
-    return count === 0 ? base : `${base}-${count + 1}`;
-  };
-  const itemToNode = (item) => {
-    const labelNode = item.children.find((c) => c.type !== "list");
-    const label = labelNode ? extractPlainText(labelNode).trim() : "";
-    const childLists = item.children.filter((c) => c.type === "list");
-    const children = [];
-    for (const cl of childLists) for (const ci of cl.children) children.push(itemToNode(ci));
-    return {
-      id: idFor(label),
-      label,
-      children,
-      isDir: label.endsWith("/") || children.length > 0
-    };
-  };
-  return { roots: list.children.map(itemToNode), style: "unicode", warnings: [] };
-}
-function findFirstList(contents) {
-  return contents?.find((n) => n.type === "list");
-}
-
-// src/doc/templateInputs.ts
-var VIDEO_FILE_RE = /\.(?:webm|mp4|mov|m4v|ogv)(?:[?#].*)?$/i;
-function extractBodyPlainText(contents) {
-  if (!contents || contents.length === 0) return "";
-  return contents.filter((node) => !(node.type === "code" && node.lang?.trim().toLowerCase() === "mermaid")).map((n) => extractPlainText(n)).join("\n").trim();
-}
-function extractListItems(contents) {
-  return extractRichListItems(contents).map((item) => item.text);
-}
-function escapeInlineHtml(value) {
-  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-}
-function renderInlineHtml(nodes) {
-  return nodes.map((node) => {
-    switch (node.type) {
-      case "text":
-        return escapeInlineHtml(node.value);
-      case "emphasis":
-        return `<em>${renderInlineHtml(node.children)}</em>`;
-      case "strong":
-        return `<strong>${renderInlineHtml(node.children)}</strong>`;
-      case "delete":
-        return `<del>${renderInlineHtml(node.children)}</del>`;
-      case "inlineCode":
-        return `<code>${escapeInlineHtml(node.value)}</code>`;
-      case "link": {
-        const label = renderInlineHtml(node.children);
-        const href = sanitizeUrl(node.url, "link");
-        if (!href) return label;
-        const title = node.title ? ` title="${escapeInlineHtml(node.title)}"` : "";
-        return `<a href="${escapeInlineHtml(href)}"${title}>${label}</a>`;
-      }
-      case "break":
-        return "<br>";
-      case "image":
-        return escapeInlineHtml(node.alt ?? "");
-      case "inlineMath":
-        return escapeInlineHtml(`$${node.value}$`);
-      case "footnoteReference":
-        return escapeInlineHtml(`[^${node.label ?? node.identifier}]`);
-      case "linkReference":
-      case "textDirective":
-        return renderInlineHtml(node.children);
-      case "imageReference":
-        return escapeInlineHtml(node.alt ?? "");
-      case "mention":
-        return escapeInlineHtml(`@${node.displayName}`);
-      case "inlineIcon":
-        return `<i class="fa-${node.family} fa-${node.name}" aria-hidden="true"></i>`;
-      case "htmlInline":
-        return escapeInlineHtml(node.rawHtml);
-    }
-  }).join("");
-}
-function renderListItemHtml(markdown) {
-  return markdown.map(
-    (node) => node.type === "paragraph" || node.type === "heading" ? renderInlineHtml(node.children) : escapeInlineHtml(extractPlainText(node))
-  ).join("<br>");
-}
-function extractRichListItems(contents) {
-  if (!contents) return [];
-  const items = [];
-  for (const node of contents) {
-    if (node.type !== "list") continue;
-    for (const item of node.children) {
-      const text = extractPlainText(item).trim();
-      if (!text) continue;
-      const html = renderListItemHtml(item.children);
-      const plainHtml = escapeInlineHtml(text).replace(/\r?\n/g, "<br>");
-      items.push({
-        text,
-        markdown: item.children,
-        ...html && html !== plainHtml ? { html } : {}
-      });
-    }
-  }
-  return items;
-}
-function parseDim(raw) {
-  if (raw === void 0) return void 0;
-  const n = parseFloat(raw);
-  return Number.isFinite(n) && n > 0 ? n : void 0;
-}
-function extractImages(contents, limit = Infinity) {
-  if (!contents || contents.length === 0) return [];
-  const found = [];
-  function fromHtml(nodes) {
-    for (const node of nodes) {
-      if (found.length >= limit) return;
-      if (!node || typeof node !== "object") continue;
-      const n = node;
-      if (n.type === "htmlElement" && n.tagName === "img") {
-        const attrs = n.attributes;
-        if (attrs && typeof attrs.src === "string" && attrs.src) {
-          found.push({
-            src: attrs.src,
-            alt: typeof attrs.alt === "string" ? attrs.alt : "",
-            width: parseDim(attrs.width),
-            height: parseDim(attrs.height)
-          });
-        }
-      }
-      if (Array.isArray(n.children)) fromHtml(n.children);
-    }
-  }
-  function walk(node) {
-    if (found.length >= limit) return;
-    if (!node || typeof node !== "object") return;
-    const n = node;
-    if (n.type === "image" && typeof n.url === "string" && n.url) {
-      found.push({ src: n.url, alt: typeof n.alt === "string" ? n.alt : "" });
-      return;
-    }
-    if ((n.type === "htmlBlock" || n.type === "htmlInline") && Array.isArray(n.htmlChildren)) {
-      fromHtml(n.htmlChildren);
-    }
-    if (Array.isArray(n.children)) {
-      for (const child of n.children) walk(child);
+// src/doc/templates/twoColumn.ts
+function twoColumn(input, context) {
+  const { left, right, header, leftColor = "green", rightColor = "blue" } = input;
+  if (!left?.label || !right?.label) return [];
+  const { theme, layout, orientation } = context;
+  const leftColors = resolveColorScheme(context, leftColor);
+  const rightColors = resolveColorScheme(context, rightColor);
+  const positions = getTwoColumnPositions(orientation);
+  const isStacked = layout.stackColumns;
+  const columnWidth = isStacked ? "85%" : "42%";
+  const headerFontSize = themedFontSize(36, context, true);
+  const labelFontSize = themedFontSize(44, context, true);
+  const sublabelFontSize = themedFontSize(22, context, false);
+  const panelTop = header && !isStacked ? 22 : 15;
+  const panelHeight = header && !isStacked ? 64 : 70;
+  const layers = [
+    // Background — subtle gradient to add depth
+    {
+      type: "shape",
+      id: "bg",
+      content: {
+        shape: "rect",
+        fill: themedSurfaceGradient(context, 135)
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
     }
+  ];
+  if (!isStacked) {
+    const panelFill = withAlpha(theme.colors.text, 0.05);
+    layers.push({
+      type: "shape",
+      id: "left-panel",
+      content: {
+        shape: "rect",
+        fill: panelFill,
+        borderRadius: 12
+      },
+      position: { x: "3%", y: `${panelTop}%`, width: "44%", height: `${panelHeight}%` }
+    });
+    layers.push({
+      type: "shape",
+      id: "right-panel",
+      content: {
+        shape: "rect",
+        fill: panelFill,
+        borderRadius: 12
+      },
+      position: { x: "53%", y: `${panelTop}%`, width: "44%", height: `${panelHeight}%` }
+    });
   }
-  for (const node of contents) {
-    if (found.length >= limit) break;
-    walk(node);
+  const headerY = isStacked ? "8%" : "12%";
+  if (header) {
+    layers.push({
+      type: "text",
+      id: "header",
+      content: {
+        text: header,
+        style: {
+          fontSize: headerFontSize,
+          fontFamily: getThemeFont(context, "title"),
+          fontWeight: "bold",
+          color: theme.colors.text,
+          textAlign: "center"
+        }
+      },
+      position: { x: "50%", y: headerY, anchor: "center" },
+      animation: themedEntrance(context, "text", { type: "fadeIn", duration: 0.8 })
+    });
   }
-  return found;
-}
-function extractFirstImage(contents) {
-  return extractImages(contents, 1)[0] ?? null;
-}
-function extractEmbeddedVideos(contents, limit = Infinity) {
-  if (!contents || contents.length === 0) return [];
-  const found = [];
-  const seen = /* @__PURE__ */ new Set();
-  const add = (video) => {
-    if (!video.src || found.length >= limit || seen.has(video.src)) return;
-    seen.add(video.src);
-    found.push(video);
-  };
-  function nestedSource(children) {
-    if (!Array.isArray(children)) return void 0;
-    for (const child of children) {
-      if (!child || typeof child !== "object") continue;
-      const node = child;
-      if (node.tagName === "source") {
-        const attrs = node.attributes;
-        if (typeof attrs?.src === "string" && attrs.src) return attrs.src;
-      }
-      const nested = nestedSource(node.children);
-      if (nested) return nested;
-    }
-    return void 0;
+  let leftY;
+  let leftSublabelY;
+  let rightY;
+  let rightSublabelY;
+  if (isStacked) {
+    leftY = header ? "30%" : "25%";
+    leftSublabelY = header ? "40%" : "35%";
+    rightY = header ? "60%" : "55%";
+    rightSublabelY = header ? "70%" : "65%";
+  } else {
+    const panelCenter = panelTop + panelHeight / 2;
+    leftY = `${panelCenter - 4}%`;
+    leftSublabelY = `${panelCenter + 7}%`;
+    rightY = `${panelCenter - 4}%`;
+    rightSublabelY = `${panelCenter + 7}%`;
   }
-  function walk(node) {
-    if (found.length >= limit || !node || typeof node !== "object") return;
-    const n = node;
-    if (n.type === "htmlElement" && n.tagName === "video") {
-      const attrs = n.attributes;
-      const src = attrs?.src || nestedSource(n.children);
-      if (src) {
-        const startAt = attrs?.["data-squisq-video-start-at"] ? parseTimeSeconds(attrs["data-squisq-video-start-at"]) : null;
-        const clipStart = attrs?.["data-squisq-video-clip-start"] ? parseTimeSeconds(attrs["data-squisq-video-clip-start"]) : null;
-        const clipEnd = attrs?.["data-squisq-video-clip-end"] ? parseTimeSeconds(attrs["data-squisq-video-clip-end"]) : null;
-        add({
-          src,
-          ...attrs?.poster ? { posterSrc: attrs.poster } : {},
-          alt: attrs?.["aria-label"] || attrs?.title || attrs?.alt || "",
-          ...startAt != null ? { startAt } : {},
-          ...clipStart != null ? { clipStart } : {},
-          ...clipEnd != null ? { clipEnd } : {}
-        });
+  layers.push({
+    type: "text",
+    id: "left-label",
+    content: {
+      text: left.label,
+      style: {
+        fontSize: labelFontSize,
+        fontFamily: getThemeFont(context, "body"),
+        fontWeight: "bold",
+        color: leftColors.text,
+        textAlign: "center",
+        lineHeight: 1.3
       }
-    } else if ((n.type === "link" || n.type === "image") && typeof n.url === "string" && VIDEO_FILE_RE.test(n.url)) {
-      add({
-        src: n.url,
-        alt: typeof n.alt === "string" ? n.alt : extractPlainText(n).trim()
-      });
-    }
-    if (Array.isArray(n.children)) n.children.forEach(walk);
-    if (Array.isArray(n.htmlChildren)) n.htmlChildren.forEach(walk);
-  }
-  contents.forEach(walk);
-  return found;
-}
-function extractFirstEmbeddedVideo(contents) {
-  return extractEmbeddedVideos(contents, 1)[0] ?? null;
-}
-function extractTableFromContents(contents) {
-  if (!contents) return null;
-  for (const node of contents) {
-    if (node.type === "table") {
-      const table = node;
-      const [headerRow, ...bodyRows] = table.children;
-      if (!headerRow) return null;
-      const headers = headerRow.children.map((cell) => extractPlainText(cell).trim());
-      const rows = bodyRows.map((row) => row.children.map((cell) => extractPlainText(cell).trim()));
-      return { headers, rows, align: table.align };
-    }
-  }
-  return null;
-}
-function extractBlockquoteText(contents) {
-  if (!contents) return "";
-  for (const node of contents) {
-    if (node.type === "blockquote") return extractPlainText(node).trim();
+    },
+    position: {
+      x: positions.left.x,
+      y: leftY,
+      anchor: "center",
+      width: columnWidth
+    },
+    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1 })
+  });
+  if (left.sublabel) {
+    layers.push({
+      type: "text",
+      id: "left-sublabel",
+      content: {
+        text: left.sublabel,
+        style: {
+          fontSize: sublabelFontSize,
+          fontFamily: getThemeFont(context, "body"),
+          color: theme.colors.textMuted,
+          textAlign: "center",
+          lineHeight: 1.4
+        }
+      },
+      position: {
+        x: positions.left.x,
+        y: leftSublabelY,
+        anchor: "center",
+        width: columnWidth
+      },
+      animation: { type: "fadeIn", duration: 0.8, delay: 0.3 }
+    });
   }
-  return "";
-}
-function firstParagraph(contents) {
-  if (!contents) return null;
-  const index = contents.findIndex((node) => node.type === "paragraph");
-  if (index < 0) return null;
-  return {
-    node: contents[index],
-    index
-  };
-}
-function leadingStrongStat(paragraph) {
-  for (const child of paragraph.children) {
-    if (child.type === "text" && child.value.trim() === "") continue;
-    if (child.type !== "strong") return null;
-    const text = extractPlainText(child).trim();
-    const match = text.match(/^(?:[$€£¥]\s*)?[+-]?\d+(?:[.,]\d+)*(?:\s?(?:[%‰x×]|[A-Za-z]+))?/);
-    return match?.[0].trim() || null;
+  const connectorFontSize = themedFontSize(64, context, true);
+  const connectorY = isStacked ? "48%" : `${panelTop + panelHeight / 2}%`;
+  const connectorSymbol = isStacked ? "\u2193" : "\u2192";
+  layers.push({
+    type: "text",
+    id: "connector",
+    content: {
+      text: connectorSymbol,
+      style: {
+        fontSize: connectorFontSize,
+        fontFamily: getThemeFont(context, "title"),
+        fontWeight: "bold",
+        color: withAlpha(theme.colors.text, 0.45),
+        textAlign: "center"
+      }
+    },
+    position: {
+      x: "50%",
+      y: connectorY,
+      anchor: "center"
+    },
+    animation: { type: "fadeIn", duration: 0.6, delay: 0.4 }
+  });
+  layers.push({
+    type: "text",
+    id: "right-label",
+    content: {
+      text: right.label,
+      style: {
+        fontSize: labelFontSize,
+        fontFamily: getThemeFont(context, "body"),
+        fontWeight: "bold",
+        color: rightColors.text,
+        textAlign: "center",
+        lineHeight: 1.3
+      }
+    },
+    position: {
+      x: positions.right.x,
+      y: rightY,
+      anchor: "center",
+      width: columnWidth
+    },
+    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1, delay: 0.5 })
+  });
+  if (right.sublabel) {
+    layers.push({
+      type: "text",
+      id: "right-sublabel",
+      content: {
+        text: right.sublabel,
+        style: {
+          fontSize: sublabelFontSize,
+          fontFamily: getThemeFont(context, "body"),
+          color: theme.colors.textMuted,
+          textAlign: "center",
+          lineHeight: 1.4
+        }
+      },
+      position: {
+        x: positions.right.x,
+        y: rightSublabelY,
+        anchor: "center",
+        width: columnWidth
+      },
+      animation: { type: "fadeIn", duration: 0.8, delay: 0.8 }
+    });
   }
-  return null;
-}
-function removeStatPhrase(text, start, end) {
-  const before = text.slice(0, start).trim();
-  let after = text.slice(end);
-  if (!before) after = after.replace(/^\s*(?:[-–—:]\s*)?/, "");
-  else after = after.trim();
-  return [before, after].filter(Boolean).join(" ").trim();
-}
-function bodyWithoutParagraphStat(contents, paragraphIndex, paragraphText, start, end) {
-  if (!contents) return "";
-  return contents.map(
-    (node, index) => index === paragraphIndex ? removeStatPhrase(paragraphText, start, end) : extractPlainText(node).trim()
-  ).filter(Boolean).join("\n").trim();
+  return layers;
 }
-function deriveStatHighlightInputs(headingText, contents, bodyText3) {
-  const paragraph = firstParagraph(contents);
-  if (paragraph) {
-    const paragraphText = extractPlainText(paragraph.node).trim();
-    const strongStat = leadingStrongStat(paragraph.node);
-    if (strongStat) {
-      const start = paragraphText.indexOf(strongStat);
-      const description = bodyWithoutParagraphStat(
-        contents,
-        paragraph.index,
-        paragraphText,
-        start,
-        start + strongStat.length
-      );
-      return {
-        stat: strongStat,
-        description: description || headingText || strongStat
-      };
+
+// src/doc/templates/dateEvent.ts
+var MOOD_ACCENTS = {
+  neutral: "#63b3ed",
+  somber: "#e53e3e",
+  celebratory: "#68d391"
+};
+function dateEvent(input, context) {
+  const { date, description, footer, mood = "neutral", accentImage } = input;
+  const { theme } = context;
+  const moodAccent = MOOD_ACCENTS[mood];
+  const dateColor = relativeLuminance(theme.colors.background) > 0.5 ? oklchDarken(moodAccent, 0.25) : moodAccent;
+  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
+  const dateFontSize = themedFontSize(96, context, true);
+  const descFontSize = themedFontSize(30, context, false);
+  const footerFontSize = themedFontSize(26, context, false);
+  const layers = [
+    // Background — theme surface gradient (diagonal to differentiate
+    // from other text templates)
+    {
+      type: "shape",
+      id: "bg",
+      content: {
+        shape: "rect",
+        fill: themedSurfaceGradient(context, 135)
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
     }
+  ];
+  if (accentImage) {
+    layers.push(
+      ...createAccentLayers(
+        accentImage,
+        input.id,
+        themedImageTreatment(context, input.imageTreatment)
+      )
+    );
   }
-  const trimmedHeading = headingText.trim();
-  const headingStat = matchNumberHighlight(trimmedHeading);
-  if (headingStat && headingStat.index === 0 && headingStat.end === trimmedHeading.length) {
-    return { stat: headingText, description: bodyText3 || headingText };
+  layers.push({
+    type: "text",
+    id: "date",
+    content: {
+      text: date,
+      style: {
+        fontSize: dateFontSize,
+        fontFamily: getThemeFont(context, "title"),
+        fontWeight: "bold",
+        color: dateColor,
+        shadow: shouldUseShadow(context)
+      }
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY("35%", accentLayout),
+      anchor: "center"
+    },
+    animation: { type: "fadeIn", duration: 1.5 }
+  });
+  layers.push({
+    type: "text",
+    id: "description",
+    content: {
+      text: description,
+      style: {
+        fontSize: descFontSize,
+        fontFamily: getThemeFont(context, "body"),
+        color: theme.colors.text,
+        textAlign: "center",
+        lineHeight: 1.6,
+        shadow: shouldUseShadow(context)
+      }
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY("58%", accentLayout),
+      width: accentLayout.textWidth,
+      anchor: "center"
+    },
+    animation: { type: "fadeIn", duration: 2, delay: 1 }
+  });
+  if (footer) {
+    layers.push({
+      type: "text",
+      id: "footer",
+      content: {
+        text: footer,
+        style: {
+          fontSize: footerFontSize,
+          fontFamily: getThemeFont(context, "body"),
+          color: theme.colors.textMuted,
+          shadow: shouldUseShadow(context)
+        }
+      },
+      position: {
+        x: accentLayout.textCenterX,
+        y: adjustY("72%", accentLayout),
+        anchor: "center"
+      },
+      animation: { type: "fadeIn", duration: 1, delay: 3 }
+    });
   }
-  if (paragraph) {
-    const paragraphText = extractPlainText(paragraph.node).trim();
-    const bodyStat = matchNumberHighlight(paragraphText);
-    if (bodyStat) {
-      const description = bodyWithoutParagraphStat(
-        contents,
-        paragraph.index,
-        paragraphText,
-        bodyStat.index,
-        bodyStat.end
-      );
-      return {
-        stat: bodyStat.value,
-        description: description || headingText || bodyStat.value
-      };
+  return layers;
+}
+
+// src/doc/templates/imageWithCaption.ts
+function imageWithCaption(input, context) {
+  const {
+    imageSrc,
+    imageAlt,
+    caption: rawCaption,
+    captionPosition = "bottom",
+    ambientMotion,
+    isTitle,
+    subtitle,
+    imageCredit,
+    imageLicense
+  } = input;
+  const caption = rawCaption ? cleanCaption(rawCaption) : rawCaption;
+  const { theme, layout } = context;
+  const treatment = themedImageTreatment(context, input.imageTreatment);
+  const captionFontSize = themedFontSize(30, context, false);
+  const titleFontSize = themedFontSize(96, context, true);
+  const subtitleFontSize = themedFontSize(36, context, false);
+  const legacyKenBurns = input.kenBurns;
+  const motion = ambientMotion || legacyKenBurns;
+  const imageAnimation = mapAmbientMotion(motion);
+  const layers = [
+    // Background image
+    {
+      type: "image",
+      id: "bg-image",
+      content: {
+        src: imageSrc,
+        alt: imageAlt,
+        fit: "cover",
+        credit: imageCredit,
+        license: imageLicense,
+        ...treatment ? { treatment } : {}
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" },
+      animation: imageAnimation
+    }
+  ];
+  const bg = theme.colors.background;
+  if (isTitle && caption) {
+    layers.push({
+      type: "shape",
+      id: "title-gradient",
+      content: {
+        shape: "rect",
+        fill: `linear-gradient(0deg, ${withAlpha(bg, 0.85)} 0%, ${withAlpha(bg, 0.45)} 40%, ${withAlpha(bg, 0.1)} 70%, ${withAlpha(bg, 0)} 100%)`
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    });
+    layers.push({
+      type: "text",
+      id: "title",
+      content: {
+        text: caption,
+        style: {
+          fontSize: titleFontSize,
+          fontFamily: getThemeFont(context, "title"),
+          fontWeight: "bold",
+          color: theme.colors.text,
+          textAlign: "center",
+          shadow: shouldUseShadow(context)
+        }
+      },
+      position: {
+        x: "50%",
+        y: subtitle ? "70%" : "75%",
+        anchor: "center",
+        width: layout.maxTextWidth
+      },
+      animation: { type: "fadeIn", duration: 0.8 }
+    });
+    if (subtitle) {
+      layers.push({
+        type: "text",
+        id: "subtitle",
+        content: {
+          text: subtitle,
+          style: {
+            fontSize: subtitleFontSize,
+            fontFamily: getThemeFont(context, "body"),
+            color: theme.colors.textMuted,
+            textAlign: "center",
+            lineHeight: 1.5
+          }
+        },
+        position: {
+          x: "50%",
+          y: "82%",
+          anchor: "center",
+          width: layout.maxTextWidth
+        },
+        animation: { type: "fadeIn", duration: 0.8, delay: 0.2 }
+      });
     }
+    return layers;
   }
-  return { stat: headingText, description: bodyText3 || headingText };
-}
-function normalizeCoverageText(value) {
-  return value.replace(/\s+/g, " ").trim();
-}
-function autoTemplatePreservesContent(templateName, contents) {
-  const nodes = contents ?? [];
-  switch (templateName) {
-    case "quote":
-      return nodes.length === 1 && nodes[0]?.type === "blockquote";
-    case "dataTable":
-      return nodes.length === 1 && nodes[0]?.type === "table";
-    case "list":
-      return nodes.length === 1 && nodes[0]?.type === "list";
-    case "diagram":
-    case "timeline":
-      return nodes.length === 1 && nodes[0]?.type === "code";
-    case "tree":
-      return nodes.length === 1 && (nodes[0]?.type === "code" || nodes[0]?.type === "list");
-    case "photoGrid": {
-      const images = extractImages(nodes);
-      if (images.length < 2 || images.length > 4) return false;
-      const bodyText3 = normalizeCoverageText(extractBodyPlainText(nodes));
-      const representedText = normalizeCoverageText(
-        images.map((image) => image.alt).filter(Boolean).join(" ")
-      );
-      return bodyText3 === "" || bodyText3 === representedText;
-    }
-    case "videoWithCaption": {
-      const videos = extractEmbeddedVideos(nodes);
-      if (videos.length !== 1) return false;
-      const bodyText3 = normalizeCoverageText(extractBodyPlainText(nodes));
-      return bodyText3 === normalizeCoverageText(videos[0]?.alt ?? "");
-    }
-    case "leftFeature":
-    case "rightFeature":
-    case "statHighlight":
-      return true;
-    default:
-      return false;
+  if (caption) {
+    const captionBgY = captionPosition === "top" ? "7%" : captionPosition === "center" ? "42%" : "68%";
+    const captionY = captionPosition === "top" ? "13%" : captionPosition === "center" ? "48%" : "74%";
+    layers.push({
+      type: "shape",
+      id: "caption-gradient",
+      content: {
+        shape: "rect",
+        fill: `linear-gradient(90deg, ${withAlpha(bg, 0)}, ${withAlpha(bg, 0.78)} 16%, ${withAlpha(bg, 0.78)} 84%, ${withAlpha(bg, 0)})`
+      },
+      position: {
+        x: 0,
+        y: captionBgY,
+        width: "100%",
+        height: "16%"
+      }
+    });
+    layers.push({
+      type: "text",
+      id: "caption",
+      content: {
+        text: caption,
+        style: {
+          fontSize: captionFontSize,
+          fontFamily: getThemeFont(context, "body"),
+          color: theme.colors.text,
+          textAlign: "center",
+          shadow: shouldUseShadow(context),
+          lineHeight: 1.18,
+          maxLines: 2
+        }
+      },
+      position: {
+        x: "50%",
+        y: captionY,
+        anchor: "center",
+        width: "78%"
+      },
+      animation: { type: "fadeIn", duration: 1.5, delay: 0.5 }
+    });
   }
+  return layers;
 }
-function deriveTemplateInputs(templateName, headingText, contents, options = {}) {
-  const placeholders = options.placeholders === true;
-  const bodyText3 = extractBodyPlainText(contents);
-  switch (templateName) {
-    case "statHighlight": {
-      const inputs = deriveStatHighlightInputs(headingText, contents, bodyText3);
-      if (options.preserveSourceHeading && headingText && inputs.stat !== headingText && inputs.description !== headingText) {
-        return {
-          ...inputs,
-          description: headingText,
-          ...inputs.description ? { detail: inputs.description } : {}
-        };
-      }
-      return inputs;
-    }
-    case "quote": {
-      const quote = extractBlockquoteText(contents) || bodyText3;
-      if (quote) return { quote, ...headingText ? { title: headingText } : {} };
-      return { quote: headingText };
-    }
-    case "fullBleedQuote":
-    case "pullQuote": {
-      const text = extractBlockquoteText(contents) || bodyText3 || headingText;
-      return { text };
-    }
-    case "factCard":
-      return { fact: headingText, explanation: bodyText3 || headingText };
-    case "comparisonBar":
-      return placeholders ? { leftLabel: "A", leftValue: 60, rightLabel: "B", rightValue: 40 } : null;
-    case "list": {
-      const items = extractListItems(contents);
-      if (items.length > 0) return { items, ...headingText ? { title: headingText } : {} };
-      return placeholders ? { items: ["Item 1", "Item 2", "Item 3"] } : null;
-    }
-    case "definitionCard":
-      return { term: headingText, definition: bodyText3 || headingText };
-    case "dateEvent":
-      return { date: headingText, description: bodyText3 || headingText };
-    case "dataTable": {
-      const tableData = extractTableFromContents(contents);
-      if (tableData) return { ...tableData, ...headingText ? { title: headingText } : {} };
-      return placeholders ? { headers: ["Column"], rows: [["Data"]] } : null;
-    }
-    case "barChart":
-    case "columnChart":
-    case "pieChart":
-    case "donutChart":
-    case "lineChart":
-    case "areaChart":
-    case "scatterChart": {
-      const tableData = extractTableFromContents(contents);
-      if (tableData) {
-        return {
-          headers: tableData.headers,
-          rows: tableData.rows,
-          ...headingText ? { title: headingText } : {}
-        };
-      }
-      return placeholders && !bodyText3.trim() ? {
-        headers: ["Quarter", "Revenue", "Costs"],
-        rows: [
-          ["Q1", "40", "28"],
-          ["Q2", "55", "31"],
-          ["Q3", "48", "30"],
-          ["Q4", "62", "35"]
-        ],
-        ...headingText ? { title: headingText } : {}
-      } : null;
-    }
-    case "imageWithCaption": {
-      const img = extractFirstImage(contents);
-      if (!img) return placeholders ? { caption: headingText } : null;
-      return { imageSrc: img.src, imageAlt: img.alt || headingText, caption: headingText };
-    }
-    case "bigText": {
-      const img = extractFirstImage(contents);
-      return {
-        title: headingText,
-        ...img ? { imageSrc: img.src, imageAlt: img.alt || headingText } : {}
-      };
-    }
-    case "photoGrid": {
-      const images = extractImages(contents, 4);
-      if (images.length < 2) return placeholders ? {} : null;
-      return {
-        images: images.map((i) => ({ src: i.src, alt: i.alt })),
-        caption: headingText
-      };
-    }
-    case "videoWithCaption": {
-      const video = extractFirstEmbeddedVideo(contents);
-      if (!video) return placeholders ? { caption: headingText } : null;
-      return {
-        videoSrc: video.src,
-        posterSrc: video.posterSrc,
-        videoAlt: video.alt || headingText,
-        caption: headingText
-      };
-    }
-    case "leftFeature":
-    case "rightFeature": {
-      const img = extractFirstImage(contents);
-      if (!img && !placeholders) return null;
-      return {
-        imageSrc: img?.src ?? "",
-        imageAlt: img?.alt || headingText,
-        imageWidth: img?.width,
-        imageHeight: img?.height,
-        title: headingText,
-        body: bodyText3
-      };
-    }
-    case "diagram": {
-      const fences = (contents ?? []).filter((n) => n.type === "code");
-      const fence = fences.length === 1 && isEligibleAsciiFenceLang(fences[0].lang) ? fences[0] : void 0;
-      const detection = fence ? detectAsciiDiagram(fence.value, { explicit: isExplicitDiagramLang(fence.lang) }) : void 0;
-      if (!detection?.isDiagram || !detection.diagram) return placeholders ? {} : null;
-      const { nodes, edges } = asciiDiagramToTemplateData(detection.diagram);
-      return { nodes, edges, ...headingText ? { title: headingText } : {} };
-    }
-    case "timeline": {
-      const fences = (contents ?? []).filter((n) => n.type === "code");
-      const fence = fences.length === 1 && isEligibleAsciiTimelineFenceLang(fences[0].lang) ? fences[0] : void 0;
-      const detection = fence ? detectAsciiTimeline(fence.value, { explicit: true }) : void 0;
-      if (!detection?.isTimeline || !detection.timeline) return placeholders ? {} : null;
-      const { tracks, links } = asciiTimelineToTemplateData(detection.timeline);
-      return { tracks, links, ...headingText ? { title: headingText } : {} };
+
+// src/doc/templates/featureBlock.ts
+function buildFeatureLayers(input, context, side) {
+  const { imageSrc, imageAlt, imageWidth, imageHeight, title, body } = input;
+  const { theme, layout } = context;
+  const treatment = themedImageTreatment(context, input.imageTreatment);
+  const sized = (imageWidth ?? 0) > 0 || (imageHeight ?? 0) > 0;
+  const stack = layout.stackColumns;
+  const titleFontSize = themedFontSize(48, context, true);
+  const bodyFontSize2 = themedFontSize(24, context, false);
+  let imgX;
+  let imgY;
+  let imgW;
+  let imgH;
+  let imageFit;
+  if (stack) {
+    imgX = "0";
+    imgY = "0";
+    imgW = "100%";
+    imgH = "50%";
+    imageFit = sized ? "contain" : "cover";
+  } else if (sized) {
+    const halfStart = side === "left" ? 5 : 55;
+    imgX = `${halfStart}%`;
+    imgY = "5%";
+    imgW = "40%";
+    imgH = "90%";
+    imageFit = "contain";
+  } else {
+    imgX = side === "left" ? "0" : "50%";
+    imgY = "0";
+    imgW = "50%";
+    imgH = "100%";
+    imageFit = "cover";
+  }
+  const COLUMN_INSET = 4;
+  const textColumnWidth = stack ? 90 : 42;
+  const textX = stack ? `${(100 - textColumnWidth) / 2}%` : side === "left" ? `${50 + COLUMN_INSET}%` : `${COLUMN_INSET + 2}%`;
+  const titleY = stack ? "60%" : body ? "42%" : "50%";
+  const bodyY = stack ? "78%" : title ? "55%" : "50%";
+  const textAnchor = "top-left";
+  const textAlign = "left";
+  const layers = [
+    {
+      type: "shape",
+      id: "feature-bg",
+      content: { shape: "rect", fill: theme.colors.background },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
     }
-    case "tree": {
-      const fences = (contents ?? []).filter((n) => n.type === "code");
-      const fence = fences.length === 1 && isEligibleTreeFenceLang(fences[0].lang) ? fences[0] : void 0;
-      if (fence) {
-        const detection = detectTree(fence.value, { explicit: isExplicitTreeLang(fence.lang) });
-        if (detection.isTree && detection.tree) {
-          const { items } = treeToTemplateData(detection.tree);
-          return { items, ...headingText ? { title: headingText } : {} };
+  ];
+  if (imageSrc) {
+    layers.push({
+      type: "image",
+      id: "feature-image",
+      content: {
+        src: imageSrc,
+        alt: imageAlt ?? title ?? "",
+        fit: imageFit,
+        ...treatment ? { treatment } : {}
+      },
+      position: { x: imgX, y: imgY, width: imgW, height: imgH }
+    });
+  }
+  if (title) {
+    layers.push({
+      type: "text",
+      id: "feature-title",
+      content: {
+        text: title,
+        style: {
+          fontSize: titleFontSize,
+          fontFamily: getThemeFont(context, "title"),
+          fontWeight: "bold",
+          color: theme.colors.text,
+          textAlign,
+          lineHeight: 1.2
         }
-      }
-      const list = findFirstList(contents);
-      if (list) {
-        const { items } = treeToTemplateData(treeFromMarkdownList(list));
-        if (items.length > 0) return { items, ...headingText ? { title: headingText } : {} };
-      }
-      return placeholders ? {} : null;
+      },
+      position: {
+        x: textX,
+        y: titleY,
+        anchor: textAnchor,
+        width: `${textColumnWidth}%`
+      },
+      animation: themedEntrance(context, "text", { type: "fadeIn", duration: 0.8 })
+    });
+  }
+  if (body) {
+    layers.push({
+      type: "text",
+      id: "feature-body",
+      content: {
+        text: body,
+        style: {
+          fontSize: bodyFontSize2,
+          fontFamily: getThemeFont(context, "body"),
+          color: theme.colors.textMuted,
+          textAlign,
+          lineHeight: 1.5
+        }
+      },
+      position: {
+        x: textX,
+        y: bodyY,
+        anchor: textAnchor,
+        width: `${textColumnWidth}%`
+      },
+      animation: themedEntrance(context, "text", { type: "fadeIn", duration: 0.8, delay: 0.2 })
+    });
+  }
+  return layers;
+}
+function leftFeature(input, context) {
+  return buildFeatureLayers(input, context, "left");
+}
+function rightFeature(input, context) {
+  return buildFeatureLayers(input, context, "right");
+}
+
+// src/doc/templates/mapBlock.ts
+function mapBlock(input, context) {
+  const {
+    center,
+    zoom,
+    mapStyle = "terrain",
+    title,
+    caption,
+    markers,
+    ambientMotion,
+    staticSrc
+  } = input;
+  const { theme, layout } = context;
+  const titleFontSize = themedFontSize(64, context, true);
+  const captionFontSize = themedFontSize(32, context, false);
+  const mapAnimation = mapAmbientMotion(ambientMotion);
+  const layers = [
+    // Map background
+    {
+      type: "map",
+      id: "map-bg",
+      content: {
+        center,
+        zoom,
+        style: mapStyle,
+        markers,
+        showAttribution: true,
+        staticSrc
+        // Use pre-rendered image if available
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" },
+      animation: mapAnimation
     }
-    default:
-      return placeholders ? {} : null;
+  ];
+  const bg = theme.colors.background;
+  if (title) {
+    layers.push({
+      type: "shape",
+      id: "title-overlay",
+      content: {
+        shape: "rect",
+        fill: `linear-gradient(180deg, ${withAlpha(bg, 0.85)} 0%, ${withAlpha(bg, 0.6)} 70%, ${withAlpha(bg, 0)} 100%)`
+      },
+      position: { x: 0, y: 0, width: "100%", height: "20%" }
+    });
+    layers.push({
+      type: "text",
+      id: "title",
+      content: {
+        text: title,
+        style: {
+          fontSize: titleFontSize,
+          fontFamily: getThemeFont(context, "title"),
+          fontWeight: "bold",
+          color: theme.colors.text,
+          textAlign: "center",
+          shadow: shouldUseShadow(context)
+        }
+      },
+      position: {
+        x: "50%",
+        y: "9%",
+        anchor: "center",
+        width: layout.maxTextWidth
+      },
+      animation: { type: "fadeIn", duration: 1, delay: 0.3 }
+    });
+  }
+  if (caption) {
+    layers.push({
+      type: "shape",
+      id: "caption-overlay",
+      content: {
+        shape: "rect",
+        fill: `linear-gradient(0deg, ${withAlpha(bg, 0.85)} 0%, ${withAlpha(bg, 0.6)} 70%, ${withAlpha(bg, 0)} 100%)`
+      },
+      position: { x: 0, y: "80%", width: "100%", height: "20%" }
+    });
+    layers.push({
+      type: "text",
+      id: "caption",
+      content: {
+        text: caption,
+        style: {
+          fontSize: captionFontSize,
+          fontFamily: getThemeFont(context, "body"),
+          color: theme.colors.text,
+          textAlign: "center",
+          shadow: shouldUseShadow(context)
+        }
+      },
+      position: {
+        x: "50%",
+        y: layout.captionY,
+        anchor: "center",
+        width: layout.maxTextWidth
+      },
+      animation: { type: "fadeIn", duration: 1, delay: 0.5 }
+    });
   }
+  return layers;
+}
+
+// src/doc/templates/fullBleedQuote.ts
+function fullBleedQuote(input, context) {
+  const { text, colorScheme = "blue" } = input;
+  const colors = resolveColorScheme(context, colorScheme);
+  const textFontSize = themedFontSize(120, context, true);
+  return [
+    // Background — radial vignette built from the color scheme's own
+    // surface, so the card takes on the scheme (and the theme behind it)
+    // instead of vignetting every theme into hard black.
+    {
+      type: "shape",
+      id: "bg",
+      content: {
+        shape: "rect",
+        fill: `radial-gradient(ellipse at 50% 50%, ${colors.bg} 0%, ${oklchDarken(colors.bg, 0.12)} 100%)`
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    },
+    // The text — massive, centered
+    {
+      type: "text",
+      id: "impact-text",
+      content: {
+        text,
+        style: {
+          fontSize: textFontSize,
+          fontFamily: getThemeFont(context, "title"),
+          fontWeight: "bold",
+          color: colors.text,
+          textAlign: "center",
+          lineHeight: 1.2,
+          shadow: shouldUseShadow(context)
+        }
+      },
+      position: {
+        x: "50%",
+        y: "50%",
+        anchor: "center",
+        width: "85%"
+      },
+      animation: getTemplateHint(context, "fullBleedQuote", "entrance", "subtle") === "dramatic" ? { type: "zoomIn", duration: 0.8 } : { type: "fadeIn", duration: 1.5 }
+    }
+  ];
 }
 
 // src/doc/templates/listBlock.ts
@@ -10657,8 +10747,10 @@ function buildStartBlock(markdownDoc, rootBlocks, fileName) {
   const headingTitle = headingBlock ? headingBlock.title ?? extractPlainText(headingBlock.sourceHeading) : void 0;
   const title = frontmatterTitle || headingTitle || fileNameCoverTitle(fileName);
   if (!title) return void 0;
+  const frontmatterSubtitle = typeof markdownDoc.frontmatter?.subtitle === "string" ? markdownDoc.frontmatter.subtitle.trim() : void 0;
   const subtitleBlock = headingBlock ?? rootBlocks[0];
-  const subtitle = subtitleBlock?.contents?.[0]?.type === "paragraph" ? extractPlainText(subtitleBlock.contents[0]) : void 0;
+  const inferredSubtitle = subtitleBlock?.contents?.[0]?.type === "paragraph" ? extractPlainText(subtitleBlock.contents[0]) : void 0;
+  const subtitle = frontmatterSubtitle || inferredSubtitle;
   const firstImage = findFirstImage(markdownDoc);
   const config = {
     title,
@@ -11008,17 +11100,6 @@ export {
   sectionHeader,
   fitBigTextSize,
   bigText,
-  contentBlock,
-  statHighlight,
-  quoteBlock,
-  factCard,
-  twoColumn,
-  dateEvent,
-  imageWithCaption,
-  leftFeature,
-  rightFeature,
-  mapBlock,
-  fullBleedQuote,
   computeDiagramLayout,
   ASCII_CHAR_W,
   ASCII_CHAR_H,
@@ -11034,6 +11115,8 @@ export {
   findFirstList,
   extractBodyPlainText,
   extractListItems,
+  renderMarkdownBlocksHtml,
+  markdownBlockSeparatorLines,
   extractRichListItems,
   extractImages,
   extractFirstImage,
@@ -11043,6 +11126,17 @@ export {
   extractBlockquoteText,
   autoTemplatePreservesContent,
   deriveTemplateInputs,
+  contentBlock,
+  statHighlight,
+  quoteBlock,
+  factCard,
+  twoColumn,
+  dateEvent,
+  imageWithCaption,
+  leftFeature,
+  rightFeature,
+  mapBlock,
+  fullBleedQuote,
   listBlock,
   photoGrid,
   definitionCard,
@@ -11079,7 +11173,9 @@ export {
   fallbackBlockLayers,
   BLOCK_MEDIA_LAYOUT_POLICIES,
   getBlockMediaLayoutPolicy,
+  placeLayersInRect,
   materializeBlockLayers,
+  materializeBlockLayersWithRuntime,
   TEMPLATE_METADATA,
   TEMPLATE_AUTHORING_METADATA,
   coverBlock,