@bendyline/squisq 2.1.0 → 2.3.0

package/dist/{chunk-JI77MGAK.js → chunk-GIIOY6XR.js}

@@ -1,10 +1,11 @@
 import {
   anchorPoint,
+  base64ToUtf8,
   connectorPath,
   lineStyleDasharray,
   shapePath,
   snapEndpoints
-} from "./chunk-TUWMK62B.js";
+} from "./chunk-PUS54YU6.js";
 import {
   detectAsciiDiagram,
   detectAsciiTimeline,
@@ -19,7 +20,7 @@ import {
   parseAsciiTimeline,
   pickAutoTemplate,
   profileBlockContents
-} from "./chunk-5UYI3RJB.js";
+} from "./chunk-QWCFK5FN.js";
 import {
   DEFAULT_THEME,
   FRONTMATTER_CUSTOM_TEMPLATES_KEY,
@@ -30,16 +31,17 @@ import {
   resolveFontFamily,
   validateTheme,
   withAlpha
-} from "./chunk-JHZWYRSW.js";
+} from "./chunk-C33GTPUZ.js";
 import {
   VIEWPORT_PRESETS,
   cloneData,
   createTemplateContext,
   getTwoColumnPositions,
+  getViewportOrientation,
   isPersistentLayerTemplate,
   isTemplateBlock,
   scaledFontSize2 as scaledFontSize
-} from "./chunk-5J4HKRJF.js";
+} from "./chunk-BAOV476U.js";
 import {
   KNOWN_BLOCK_META_KEYS,
   coerceAnnotationValues,
@@ -48,25 +50,25 @@ import {
   parseTimeSeconds,
   splitKeyValueToken,
   tokenizeAttrTokens
-} from "./chunk-R2YZTCLO.js";
+} from "./chunk-ZQKZSJAX.js";
 import {
   extractPlainText,
   readFrontmatterThemeId,
   walkMarkdownTree
-} from "./chunk-AMIR72JP.js";
+} from "./chunk-BCCXTMN5.js";
 import {
   resolveBlockTransition
-} from "./chunk-QE7TWGVT.js";
+} from "./chunk-4VOD55SX.js";
 import {
   estimateReadingTime
-} from "./chunk-4X3JQXNM.js";
+} from "./chunk-XOFT65EX.js";
 import {
   estimateSpokenWordCount
-} from "./chunk-3E5F2XMR.js";
+} from "./chunk-67L6WRJN.js";
 import {
   SeededRandom,
   hashString
-} from "./chunk-FVTQSNR7.js";
+} from "./chunk-XRW6P7IF.js";
 
 // src/doc/templates/persistentLayers.ts
 var GRADIENT_PRESETS = {
@@ -198,14 +200,19 @@ function expandTitleCaption(config) {
   const isBottom = config.position.includes("bottom");
   const isLeft = config.position.includes("left");
   const pad = 3;
+  const thumbPad = 1.5;
   const pillHeight = hasSubtitle ? "15%" : "7%";
   const bgYPos = isBottom ? hasSubtitle ? "78%" : "84%" : "2%";
-  const bgXPos = isLeft ? `${pad}%` : "68%";
-  const thumbW = hasSubtitle ? "6%" : "5%";
+  const pillW = config.showThumbnail ? 30 : 28;
+  const pillX = isLeft ? pad : 100 - pad - pillW;
+  const bgXPos = `${pillX}%`;
+  const thumbWNum = hasSubtitle ? 6 : 5;
+  const thumbW = `${thumbWNum}%`;
   const thumbH = hasSubtitle ? "10%" : "5%";
-  const thumbPad = 1.5;
-  const textX = config.showThumbnail && isLeft ? `${pad + thumbPad + 6 + thumbPad}%` : `${pad + thumbPad}%`;
-  const textWidth = config.showThumbnail ? "19%" : "24%";
+  const innerX = pillX + thumbPad;
+  const innerW = pillW - thumbPad * 2;
+  const textX = config.showThumbnail && isLeft ? `${innerX + thumbWNum + thumbPad}%` : `${innerX}%`;
+  const textWidth = config.showThumbnail ? `${innerW - thumbWNum - thumbPad}%` : `${innerW}%`;
   const titleYPos = isBottom ? hasSubtitle ? "80%" : "86%" : "4%";
   layers.push({
     type: "shape",
@@ -218,12 +225,12 @@ function expandTitleCaption(config) {
     position: {
       x: bgXPos,
       y: bgYPos,
-      width: config.showThumbnail ? "30%" : "28%",
+      width: `${pillW}%`,
       height: pillHeight
     }
   });
   if (config.showThumbnail && config.thumbnailSrc) {
-    const thumbX = isLeft ? `${pad + thumbPad}%` : "93%";
+    const thumbX = isLeft ? `${innerX}%` : `${pillX + pillW - thumbPad - thumbWNum}%`;
     const thumbY = isBottom ? hasSubtitle ? `${78 + thumbPad}%` : "85%" : "3%";
     layers.push({
       type: "image",
@@ -620,84 +627,6 @@ function titleBlock(input, context) {
   return layers;
 }
 
-// src/doc/templates/sectionHeader.ts
-function sectionHeader(input, context) {
-  const { title = "", colorScheme = "blue", imageSrc, imageAlt, ambientMotion } = input;
-  const { theme, layout } = context;
-  const treatment = themedImageTreatment(context, input.imageTreatment);
-  const colors = resolveColorScheme(context, colorScheme);
-  const titleFontSize = themedFontSize(84, context, true);
-  const layers = [];
-  if (imageSrc) {
-    layers.push({
-      type: "image",
-      id: "bg-image",
-      content: {
-        src: imageSrc,
-        alt: imageAlt || title,
-        fit: "cover",
-        ...treatment ? { treatment } : {}
-      },
-      position: { x: 0, y: 0, width: "100%", height: "100%" },
-      animation: ambientMotion ? { type: ambientMotion, duration: 8 } : { type: "slowZoom", duration: 8, direction: "in" }
-    });
-    layers.push({
-      type: "shape",
-      id: "overlay",
-      content: {
-        shape: "rect",
-        fill: themedScrim(context)
-      },
-      position: { x: 0, y: 0, width: "100%", height: "100%" }
-    });
-  } else {
-    layers.push({
-      type: "shape",
-      id: "bg",
-      content: {
-        shape: "rect",
-        fill: colors.bg
-      },
-      position: { x: 0, y: 0, width: "100%", height: "100%" }
-    });
-    layers.push({
-      type: "shape",
-      id: "line-top",
-      content: { shape: "rect", fill: `${colors.text}33` },
-      position: { x: "50%", y: "40%", width: "20%", height: "2px", anchor: "center" }
-    });
-    layers.push({
-      type: "shape",
-      id: "line-bottom",
-      content: { shape: "rect", fill: `${colors.text}33` },
-      position: { x: "50%", y: "60%", width: "20%", height: "2px", anchor: "center" }
-    });
-  }
-  layers.push({
-    type: "text",
-    id: "title",
-    content: {
-      text: title,
-      style: {
-        fontSize: titleFontSize,
-        fontFamily: getThemeFont(context, "title"),
-        fontWeight: "bold",
-        color: imageSrc ? theme.colors.text : colors.text,
-        textAlign: "center",
-        shadow: shouldUseShadow(context)
-      }
-    },
-    position: {
-      x: "50%",
-      y: "50%",
-      anchor: "center",
-      width: layout.maxTextWidth
-    },
-    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1.5 })
-  });
-  return layers;
-}
-
 // src/doc/templates/accentImage.ts
 var PERCENTAGE_RE = /^(\d+(?:\.\d+)?)\s*%?$/;
 var DEFAULT_LAYOUT = {
@@ -928,6 +857,92 @@ function adjustY(originalY, layout) {
   return yStr;
 }
 
+// src/doc/templates/sectionHeader.ts
+function sectionHeader(input, context) {
+  const { title = "", colorScheme = "blue", imageSrc, imageAlt, ambientMotion } = input;
+  const { theme, layout } = context;
+  const treatment = themedImageTreatment(context, input.imageTreatment);
+  const colors = resolveColorScheme(context, colorScheme);
+  const titleFontSize = themedFontSize(84, context, true);
+  const layers = [];
+  if (imageSrc) {
+    layers.push({
+      type: "image",
+      id: "bg-image",
+      content: {
+        src: imageSrc,
+        alt: imageAlt || title,
+        fit: "cover",
+        ...treatment ? { treatment } : {}
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" },
+      // Route through mapAmbientMotion like every other image template: the
+      // authored vocabulary (`zoomIn`/`panLeft`/…) are NOT AnimationTypes, so
+      // passing them raw produced an unknown animation here while the same
+      // input animated correctly on imageWithCaption/coverBlock/accentImage.
+      animation: mapAmbientMotion(ambientMotion, 8) ?? {
+        type: "slowZoom",
+        duration: 8,
+        direction: "in"
+      }
+    });
+    layers.push({
+      type: "shape",
+      id: "overlay",
+      content: {
+        shape: "rect",
+        fill: themedScrim(context)
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    });
+  } else {
+    layers.push({
+      type: "shape",
+      id: "bg",
+      content: {
+        shape: "rect",
+        fill: colors.bg
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    });
+    layers.push({
+      type: "shape",
+      id: "line-top",
+      content: { shape: "rect", fill: withAlpha(colors.text, 0.2) },
+      position: { x: "50%", y: "40%", width: "20%", height: "2px", anchor: "center" }
+    });
+    layers.push({
+      type: "shape",
+      id: "line-bottom",
+      content: { shape: "rect", fill: withAlpha(colors.text, 0.2) },
+      position: { x: "50%", y: "60%", width: "20%", height: "2px", anchor: "center" }
+    });
+  }
+  layers.push({
+    type: "text",
+    id: "title",
+    content: {
+      text: title,
+      style: {
+        fontSize: titleFontSize,
+        fontFamily: getThemeFont(context, "title"),
+        fontWeight: "bold",
+        color: imageSrc ? theme.colors.text : colors.text,
+        textAlign: "center",
+        shadow: shouldUseShadow(context)
+      }
+    },
+    position: {
+      x: "50%",
+      y: "50%",
+      anchor: "center",
+      width: layout.maxTextWidth
+    },
+    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1.5 })
+  });
+  return layers;
+}
+
 // src/doc/templates/statHighlight.ts
 function statHighlight(input, context) {
   const { stat, description, detail, colorScheme = "blue", accentImage } = input;
@@ -1020,10 +1035,11 @@ function statHighlight(input, context) {
 
 // src/doc/templates/quoteBlock.ts
 function quoteBlock(input, context) {
-  const { quote, attribution, accentImage } = input;
+  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);
@@ -1037,6 +1053,30 @@ function quoteBlock(input, context) {
       )
     );
   }
+  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",
@@ -1055,7 +1095,7 @@ function quoteBlock(input, context) {
       anchor: "center"
     }
   });
-  const quoteYPct = attribution ? 45 : 50;
+  const quoteYPct = attribution ? 45 : title ? 52 : 50;
   layers.push({
     type: "text",
     id: "quote",
@@ -1520,7 +1560,7 @@ function imageWithCaption(input, context) {
     imageSrc,
     imageAlt,
     caption: rawCaption,
-    captionPosition: _captionPosition = "bottom",
+    captionPosition = "bottom",
     ambientMotion,
     isTitle,
     subtitle,
@@ -1612,6 +1652,8 @@ function imageWithCaption(input, context) {
     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",
@@ -1621,7 +1663,7 @@ function imageWithCaption(input, context) {
       },
       position: {
         x: 0,
-        y: "68%",
+        y: captionBgY,
         width: "100%",
         height: "16%"
       }
@@ -1643,7 +1685,7 @@ function imageWithCaption(input, context) {
       },
       position: {
         x: "50%",
-        y: "74%",
+        y: captionY,
         anchor: "center",
         width: "78%"
       },
@@ -2158,6 +2200,8 @@ function getGridPositions(count, gridHeight, stacked) {
   const halfW = 50 - GAP / 2;
   const halfH = gridHeight / 2 - GAP / 2;
   switch (count) {
+    case 1:
+      return [{ x: 0, y: 0, w: 100, h: gridHeight }];
     case 2:
       if (stacked) {
         return [
@@ -2322,12 +2366,14 @@ function comparisonBar(input, context) {
   const barHeight = 6;
   const topBarY = 36;
   const bottomBarY = 58;
-  const maxValue = Math.max(leftValue, rightValue, 1);
+  const leftExtent = Math.max(0, leftValue);
+  const rightExtent = Math.max(0, rightValue);
+  const maxValue = Math.max(leftExtent, rightExtent, 1);
   const longestLabelPx = Math.max(leftDisplay.length, rightDisplay.length) * valueFontSize * 0.58;
   const labelWidthPct = longestLabelPx / viewport.width * 100;
   const maxBarWidth = Math.max(20, Math.min(65, 96 - barStartX - labelWidthPct - 2));
-  const leftBarWidth = leftValue / maxValue * maxBarWidth;
-  const rightBarWidth = rightValue / maxValue * maxBarWidth;
+  const leftBarWidth = leftExtent / maxValue * maxBarWidth;
+  const rightBarWidth = rightExtent / maxValue * maxBarWidth;
   return [
     // Background
     {
@@ -2461,7 +2507,10 @@ function pullQuote(input, context) {
         ...treatment ? { treatment } : {}
       },
       position: { x: 0, y: 0, width: "100%", height: "100%" },
-      animation: ambientMotion ? { type: ambientMotion, duration: 15 } : void 0
+      // Same authored `ambientMotion` vocabulary as every other image
+      // template — map it to a real Ken Burns animation rather than passing
+      // the token straight through as an animation type.
+      animation: mapAmbientMotion(ambientMotion, 15)
     },
     // Dark overlay for text readability
     {
@@ -2553,7 +2602,7 @@ function videoWithCaption(input, context) {
     videoSrc,
     posterSrc,
     videoAlt,
-    clipStart,
+    clipStart = 0,
     clipEnd,
     sourceDuration,
     caption: rawCaption,
@@ -2563,6 +2612,7 @@ function videoWithCaption(input, context) {
   } = input;
   const caption = rawCaption ? cleanCaption(rawCaption) : rawCaption;
   const { theme } = context;
+  const resolvedClipEnd = Math.max(clipStart, clipEnd ?? clipStart + Math.max(0, input.duration));
   const captionFontSize = themedFontSize(30, context, false);
   const creditFontSize = themedFontSize(16, context, false);
   const layers = [
@@ -2576,7 +2626,7 @@ function videoWithCaption(input, context) {
         alt: videoAlt,
         fit: "cover",
         clipStart,
-        clipEnd,
+        clipEnd: resolvedClipEnd,
         sourceDuration,
         credit: videoCredit,
         license: videoLicense
@@ -4920,6 +4970,7 @@ var TEMPLATE_INPUT_DESCRIPTORS = {
     { key: "colorScheme", description: "Color scheme for the stat", valueHint: COLOR_SCHEME_HINT }
   ],
   quote: [
+    { key: "title", description: "Optional heading above the quote" },
     { key: "quote", description: "The quote text" },
     { key: "attribution", description: "Attribution (author, source)" }
   ],
@@ -5227,7 +5278,7 @@ function fallbackBlockLayers(block, context, notice) {
       style: {
         fontSize: themedFontSize(18, context),
         fontFamily: getThemeFont(context, "body"),
-        color: `${colors.text}99`,
+        color: withAlpha(colors.text, 0.6),
         textAlign: "center"
       }
     },
@@ -5242,1287 +5293,2111 @@ function extractBodyText(block) {
   return `${text.slice(0, MAX_BODY_CHARS).trimEnd()}\u2026`;
 }
 
-// src/doc/materializeBlockLayers.ts
-function materializeBlockLayers(block, options = {}) {
-  const registry = options.customTemplates && options.customTemplates.length > 0 ? buildRegistry(options.customTemplates) : templateRegistry;
-  return materializeBlockLayersWithRuntime(block, options, { registry });
+// 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 materializeBlockLayersWithRuntime(block, options, runtime) {
-  const theme = options.theme ?? DEFAULT_THEME;
-  const viewport = options.viewport ?? VIEWPORT_PRESETS.landscape;
-  const blockIndex = options.blockIndex ?? 0;
-  const totalBlocks = options.totalBlocks ?? 1;
-  const effectivePersistentLayers = options.persistentLayers === false ? void 0 : options.persistentLayers ?? theme.persistentLayers;
-  const existingLayers = block.layers;
-  if (existingLayers && existingLayers.length > 0 && !isTemplateBlock(block)) {
-    const layers = appendMermaidLayers(cloneData(existingLayers), block, theme, viewport);
-    return {
-      layers: injectPersistentLayers(
-        layers,
-        block,
-        theme,
-        effectivePersistentLayers,
-        runtime.expandedPersistentLayers
-      ),
-      source: "authored"
-    };
-  }
-  if (!isTemplateBlock(block)) {
-    const layers = appendMermaidLayers([], block, theme, viewport);
-    return {
-      layers: injectPersistentLayers(
-        layers,
-        block,
-        theme,
-        effectivePersistentLayers,
-        runtime.expandedPersistentLayers
-      ),
-      source: layers.length > 0 ? "rich-content" : "empty"
-    };
-  }
-  const context = runtime.templateContext ? cloneData(runtime.templateContext) : createTemplateContext(theme, blockIndex, totalBlocks, viewport);
-  context.block = cloneData(block);
-  const execution = executeTemplateMaterialization(block, context, runtime.registry);
-  if (execution.status === "ok") {
-    const styledLayers = runtime.applyRenderStyle !== false ? applyRenderStyleToLayers(execution.layers, block, theme) : execution.layers;
-    const layers = appendMermaidLayers(styledLayers, block, theme, viewport);
-    return {
-      layers: injectPersistentLayers(
-        layers,
-        block,
-        theme,
-        effectivePersistentLayers,
-        runtime.expandedPersistentLayers
-      ),
-      source: "template"
-    };
-  }
-  const diagnostic = toLayerMaterializationDiagnostic(block.template, execution);
-  if ((options.failureMode ?? "fallback") === "empty") {
-    const layers = appendMermaidLayers([], block, theme, viewport);
-    return {
-      layers: injectPersistentLayers(
-        layers,
-        block,
-        theme,
-        effectivePersistentLayers,
-        runtime.expandedPersistentLayers
-      ),
-      source: layers.length > 0 ? "rich-content" : "empty",
-      diagnostic
-    };
-  }
-  const fallbackLayers = appendMermaidLayers(
-    fallbackBlockLayers(block, context, diagnostic.message),
-    block,
-    theme,
-    viewport
-  );
+function canvasToAsciiCell(x, y) {
   return {
-    layers: injectPersistentLayers(
-      fallbackLayers,
-      block,
-      theme,
-      effectivePersistentLayers,
-      runtime.expandedPersistentLayers
-    ),
-    source: "fallback",
-    diagnostic
+    col: Math.max(0, Math.round(x / ASCII_CHAR_W)),
+    row: Math.max(0, Math.round(y / ASCII_CHAR_H))
   };
 }
-function mermaidSources(block) {
-  return (block.contents ?? []).filter(
-    (node) => node.type === "code" && node.lang?.trim().toLowerCase() === "mermaid"
-  ).map((node) => node.value).filter((source) => source.trim().length > 0);
-}
-function resolvePositionValue(value, dimension) {
-  if (value === void 0) return 0;
-  if (typeof value === "number") return value;
-  const percent = value.match(/^\s*(-?\d+(?:\.\d+)?)%\s*$/);
-  if (percent) return Number(percent[1]) / 100 * dimension;
-  const numeric = Number.parseFloat(value);
-  return Number.isFinite(numeric) ? numeric : 0;
-}
-function positionRect(position, viewport, fallbackWidth, fallbackHeight) {
-  const width = position.width ? resolvePositionValue(position.width, viewport.width) : fallbackWidth;
-  const height = position.height ? resolvePositionValue(position.height, viewport.height) : fallbackHeight;
-  let x = resolvePositionValue(position.x, viewport.width);
-  let y = resolvePositionValue(position.y, viewport.height);
-  const anchor = position.anchor ?? "top-left";
-  if (anchor === "center") {
-    x -= width / 2;
-    y -= height / 2;
-  } else {
-    if (anchor.endsWith("right")) x -= width;
-    if (anchor.startsWith("bottom")) y -= height;
-  }
-  return { x, y, width, height };
-}
-function overlapArea(a, b) {
-  const width = Math.max(0, Math.min(a.x + a.width, b.x + b.width) - Math.max(a.x, b.x));
-  const height = Math.max(0, Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y));
-  return width * height;
-}
-function mermaidRegion(layers, viewport) {
-  const occupied = layers.filter((layer) => layer.type !== "shape" && layer.type !== "path" && layer.type !== "mermaid").map(
-    (layer) => positionRect(
-      layer.position,
-      viewport,
-      layer.type === "text" ? viewport.width * 0.45 : viewport.width * 0.5,
-      layer.type === "text" ? viewport.height * 0.2 : viewport.height * 0.55
-    )
-  );
-  if (occupied.length === 0) {
-    return {
-      x: viewport.width * 0.06,
-      y: viewport.height * 0.08,
-      width: viewport.width * 0.88,
-      height: viewport.height * 0.84
-    };
-  }
-  const candidates = [
-    {
-      x: viewport.width * 0.52,
-      y: viewport.height * 0.12,
-      width: viewport.width * 0.44,
-      height: viewport.height * 0.76
-    },
-    {
-      x: viewport.width * 0.04,
-      y: viewport.height * 0.12,
-      width: viewport.width * 0.44,
-      height: viewport.height * 0.76
-    },
-    {
-      x: viewport.width * 0.15,
-      y: viewport.height * 0.53,
-      width: viewport.width * 0.7,
-      height: viewport.height * 0.41
-    }
-  ];
-  return candidates.reduce((best, candidate) => {
-    const score = occupied.reduce((sum, rect) => sum + overlapArea(candidate, rect), 0);
-    const bestScore = occupied.reduce((sum, rect) => sum + overlapArea(best, rect), 0);
-    return score < bestScore ? candidate : best;
-  });
-}
-function appendMermaidLayers(layers, block, theme, viewport) {
-  const sources = mermaidSources(block);
-  if (sources.length === 0 || layers.some((layer) => layer.type === "mermaid")) return layers;
-  const region = mermaidRegion(layers, viewport);
-  const columns = sources.length === 1 ? 1 : 2;
-  const rows = Math.ceil(sources.length / columns);
-  const gap = Math.min(viewport.width, viewport.height) * 0.018;
-  const width = (region.width - gap * (columns - 1)) / columns;
-  const height = (region.height - gap * (rows - 1)) / rows;
-  const mermaidLayers = sources.map((source, index) => ({
-    id: `${block.id}-mermaid-${index + 1}`,
-    type: "mermaid",
-    position: {
-      x: region.x + index % columns * (width + gap),
-      y: region.y + Math.floor(index / columns) * (height + gap),
-      width,
-      height
-    },
-    content: {
-      source,
-      background: theme.colors.backgroundLight,
-      foreground: theme.colors.text,
-      padding: Math.max(12, Math.round(Math.min(width, height) * 0.025))
-    }
+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 [...layers, ...mermaidLayers];
+  return { nodes, edges };
 }
-function executeTemplateMaterialization(templateBlock, context, registry) {
-  const safeTemplateBlock = cloneData(templateBlock);
-  const safeContext = cloneData(context);
-  const maybeChildren = safeTemplateBlock.children;
-  if ((!safeContext.children || safeContext.children.length === 0) && maybeChildren?.length) {
-    safeContext.children = maybeChildren;
-  }
-  const templateFn = registry[resolveTemplateName(safeTemplateBlock.template)];
-  if (!templateFn) return { status: "unknown-template", layers: [] };
-  const { templateData, templateOverrides } = safeTemplateBlock;
-  const input = templateData || templateOverrides ? {
-    ...safeTemplateBlock,
-    ...templateData,
-    ...coerceTemplateParams(safeTemplateBlock.template, templateOverrides ?? {}).input
-  } : safeTemplateBlock;
-  try {
-    const renderedLayers = templateFn(input, safeContext);
-    if (!Array.isArray(renderedLayers)) {
+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 {
-        status: "invalid-result",
-        layers: [],
-        receivedType: typeof renderedLayers
+        sourceAnchor: { side: "right", offset: 0.5 },
+        targetAnchor: { side: "left", offset: 0.5 }
       };
     }
-    return { status: "ok", layers: cloneData(renderedLayers) };
-  } catch (error) {
-    return { status: "error", layers: [], error };
-  }
-}
-function toLayerMaterializationDiagnostic(template, execution) {
-  if (execution.status === "unknown-template") {
-    return {
-      code: "unknown-template",
-      template,
-      message: `Unknown template "${template}"`
+    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");
+  return pairs;
+}
+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);
   }
-  if (execution.status === "invalid-result") {
+  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);
+    });
+  }
+}
+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 {
-      code: "invalid-template-result",
-      template,
-      receivedType: execution.receivedType,
-      message: `Template "${template}" returned ${execution.receivedType}, not a layer array`
+      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 {
-    code: "template-error",
-    template,
-    cause: execution.error,
-    message: `Template "${template}" failed`
+    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 injectPersistentLayers(layers, block, theme, persistentLayers, expanded) {
-  if (!persistentLayers) return layers;
-  const bottomLayers = expanded?.bottomLayers ?? expandPersistentLayers(persistentLayers.bottomLayers, theme);
-  const topLayers = expanded?.topLayers ?? expandPersistentLayers(persistentLayers.topLayers, theme);
-  return wrapWithPersistentLayers(layers, block, bottomLayers, topLayers);
+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/metadata.ts
-var TEMPLATE_METADATA = {
-  title: {
-    label: "Title",
-    description: "A bold opening slide with large title text, perfect for covers and chapters."
-  },
-  sectionHeader: {
-    label: "Section Header",
-    description: "A clean section break with a prominent title and optional subtitle."
-  },
-  statHighlight: {
-    label: "Stat Highlight",
-    description: "Showcases a single key number or metric with supporting context."
+// 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: clamp012((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 clamp012(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) {
+  if (!contents) return [];
+  const items = [];
+  for (const node of contents) {
+    if (node.type === "list") {
+      for (const item of node.children) {
+        const text = extractPlainText(item).trim();
+        if (text) items.push(text);
+      }
+    }
+  }
+  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);
+    }
+  }
+  for (const node of contents) {
+    if (found.length >= limit) break;
+    walk(node);
+  }
+  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;
+  }
+  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) {
+        add({
+          src,
+          ...attrs?.poster ? { posterSrc: attrs.poster } : {},
+          alt: attrs?.["aria-label"] || attrs?.title || attrs?.alt || ""
+        });
+      }
+    } 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();
+  }
+  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;
+  }
+  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 trimmedHeading = headingText.trim();
+  const headingStat = matchNumberHighlight(trimmedHeading);
+  if (headingStat && headingStat.index === 0 && headingStat.end === trimmedHeading.length) {
+    return { stat: headingText, description: bodyText3 || headingText };
+  }
+  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 { 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;
+  }
+}
+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 "imageWithCaption": {
+      const img = extractFirstImage(contents);
+      if (!img) return placeholders ? { caption: headingText } : null;
+      return { imageSrc: img.src, imageAlt: img.alt || headingText, caption: 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/mediaLayoutPolicy.ts
+var TITLE_VARIANTS = {
+  landscape: {
+    wide: "title-stack",
+    tall: "split",
+    square: "title-stack",
+    multiple: "title-stack"
+  },
+  square: {
+    wide: "title-stack",
+    tall: "split",
+    square: "title-stack",
+    multiple: "title-stack"
+  },
+  portrait: {
+    wide: "title-stack",
+    tall: "title-stack",
+    square: "title-stack",
+    multiple: "title-stack"
+  }
+};
+var TEXT_VARIANTS = {
+  landscape: {
+    wide: "split",
+    tall: "split",
+    square: "split",
+    multiple: "split"
+  },
+  square: {
+    wide: "text-stack",
+    tall: "split",
+    square: "text-stack",
+    multiple: "text-stack"
+  },
+  portrait: {
+    wide: "text-stack",
+    tall: "text-stack",
+    square: "text-stack",
+    multiple: "text-stack"
+  }
+};
+var DENSE_VARIANTS = {
+  landscape: {
+    wide: "dense-stack",
+    tall: "dense-stack",
+    square: "dense-stack",
+    multiple: "dense-stack"
+  },
+  square: {
+    wide: "dense-stack",
+    tall: "dense-stack",
+    square: "dense-stack",
+    multiple: "dense-stack"
+  },
+  portrait: {
+    wide: "dense-stack",
+    tall: "dense-stack",
+    square: "dense-stack",
+    multiple: "dense-stack"
+  }
+};
+var BLOCK_MEDIA_LAYOUT_POLICIES = {
+  title: {
+    summary: "Text-only by default; supplemental media gets a title band plus a reserved field.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: TITLE_VARIANTS
+  },
+  sectionHeader: {
+    summary: "Uses its authored background image when present; otherwise supplemental media receives a title composition.",
+    noMedia: "template-without-optional-media",
+    ownership: "optional-native",
+    nativeLayout: "background-image",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "reserve-when-no-native-media",
+    variants: TITLE_VARIANTS
+  },
+  statHighlight: {
+    summary: "Uses its optional accent image natively; otherwise supplemental media occupies a companion field.",
+    noMedia: "template-without-optional-media",
+    ownership: "optional-native",
+    nativeLayout: "accent-strip-or-inset",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "reserve-when-no-native-media",
+    variants: TEXT_VARIANTS
   },
   quote: {
-    label: "Quote",
-    description: "Displays a stylized pull quote with decorative marks and attribution."
+    summary: "Uses its optional accent image natively; otherwise supplemental media is paired with the quote.",
+    noMedia: "template-without-optional-media",
+    ownership: "optional-native",
+    nativeLayout: "accent-strip-or-inset",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "reserve-when-no-native-media",
+    variants: TEXT_VARIANTS
   },
   factCard: {
-    label: "Fact Card",
-    description: "Presents a focused fact or insight with a labeled header and body text."
+    summary: "Uses its optional accent image natively; otherwise supplemental media is paired with the fact card.",
+    noMedia: "template-without-optional-media",
+    ownership: "optional-native",
+    nativeLayout: "accent-strip-or-inset",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "reserve-when-no-native-media",
+    variants: TEXT_VARIANTS
   },
   twoColumn: {
-    label: "Two Column",
-    description: "Divides the slide into two equal side-by-side content columns."
+    summary: "Text comparison by default; supplemental media stacks below the dense two-column panel.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: DENSE_VARIANTS
   },
   dateEvent: {
-    label: "Date Event",
-    description: "Highlights a date-based event or milestone with a prominent date display."
+    summary: "Uses its optional accent image natively; otherwise supplemental media is paired with the event.",
+    noMedia: "template-without-optional-media",
+    ownership: "optional-native",
+    nativeLayout: "accent-strip-or-inset",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "reserve-when-no-native-media",
+    variants: TEXT_VARIANTS
   },
   imageWithCaption: {
-    label: "Image with Caption",
-    description: "Displays a full-bleed image with an optional caption below."
+    summary: "Requires one primary image and owns its full-bleed image/caption geometry.",
+    noMedia: "unsupported",
+    ownership: "required-native",
+    nativeLayout: "full-bleed-image",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "retain-native-layout"
   },
   leftFeature: {
-    label: "Left Feature",
-    description: "Image on the left, title and body text stacked on the right."
+    summary: "Requires a primary image in the left feature cell; text occupies the right cell.",
+    noMedia: "unsupported",
+    ownership: "required-native",
+    nativeLayout: "feature-left",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "retain-native-layout"
   },
   rightFeature: {
-    label: "Right Feature",
-    description: "Image on the right, title and body text stacked on the left."
+    summary: "Requires a primary image in the right feature cell; text occupies the left cell.",
+    noMedia: "unsupported",
+    ownership: "required-native",
+    nativeLayout: "feature-right",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "retain-native-layout"
   },
   map: {
-    label: "Map",
-    description: "Embeds an interactive map centered on a geographic location."
+    summary: "The map canvas is the primary visual; other media must not reflow its geography.",
+    noMedia: "intrinsic-visual",
+    ownership: "intrinsic-visual",
+    nativeLayout: "map-canvas",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "retain-native-layout"
   },
   fullBleedQuote: {
-    label: "Full Bleed Quote",
-    description: "A full-width quote that spans the entire slide for maximum impact."
+    summary: "Despite its name this is text-only; supplemental media receives the same dramatic title treatment.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: TITLE_VARIANTS
   },
   list: {
-    label: "List",
-    description: "Renders a bulleted or numbered list in a clean, card-style layout."
+    summary: "Uses its optional accent image natively; otherwise supplemental media is paired with the list.",
+    noMedia: "template-without-optional-media",
+    ownership: "optional-native",
+    nativeLayout: "accent-strip-or-inset",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "reserve-when-no-native-media",
+    variants: TEXT_VARIANTS
   },
   photoGrid: {
-    label: "Photo Grid",
-    description: "Arranges multiple photos in a 2\xD72 or 3\xD73 mosaic grid."
+    summary: "Requires a primary image collection and owns the complete tiled media field.",
+    noMedia: "unsupported",
+    ownership: "required-native",
+    nativeLayout: "photo-grid",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "retain-native-layout"
   },
   definitionCard: {
-    label: "Definition Card",
-    description: "Shows a term and its definition in a structured, dictionary-style card."
-  },
-  comparisonBar: {
-    label: "Comparison Bar",
-    description: "Visualizes two or more values side-by-side with labeled horizontal bars."
-  },
-  pullQuote: {
-    label: "Pull Quote",
-    description: "A stylized pull quote with large decorative marks and centered text."
-  },
-  videoWithCaption: {
-    label: "Video with Caption",
-    description: "Embeds a video player with an optional caption below."
-  },
-  videoPullQuote: {
-    label: "Video Pull Quote",
-    description: "Combines a video panel with a highlighted pull quote side-by-side."
-  },
-  dataTable: {
-    label: "Data Table",
-    description: "Renders tabular data in a clean, styled table with a header row."
-  },
-  diagram: {
-    label: "Diagram",
-    description: "Renders sub-headings as connected nodes \u2014 edit visually as a node-and-edge diagram."
+    summary: "Uses its optional accent image natively; otherwise supplemental media is paired with the definition.",
+    noMedia: "template-without-optional-media",
+    ownership: "optional-native",
+    nativeLayout: "accent-strip-or-inset",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "reserve-when-no-native-media",
+    variants: TEXT_VARIANTS
   },
-  tree: {
-    label: "Tree",
-    description: "Renders an ASCII file-tree / outline fence as a filesystem-style treeview \u2014 edit as an outline."
-  },
-  timeline: {
-    label: "Timeline",
-    description: "Plots events across one or more horizontal tracks with callouts and optional branching links."
-  },
-  layout: {
-    label: "Layout",
-    description: "Free-form 2D canvas \u2014 drag layers into place. Use for one-off block layouts that don't fit a template."
-  },
-  drawing: {
-    label: "Drawing",
-    description: "Free-form sketches \u2014 draw shapes, paths, and text directly on a 2D surface."
-  }
-};
-
-// src/doc/templates/coverBlock.ts
-var COVER_TITLE_BASE_PX = 120;
-var COVER_TITLE_COMFORTABLE_CHARS = 26;
-var COVER_TITLE_MIN_BASE_PX = 62;
-function fitCoverTitleSize(title) {
-  const len = title.trim().length;
-  if (len <= COVER_TITLE_COMFORTABLE_CHARS) return COVER_TITLE_BASE_PX;
-  const scaled = COVER_TITLE_BASE_PX * Math.sqrt(COVER_TITLE_COMFORTABLE_CHARS / len);
-  return Math.max(COVER_TITLE_MIN_BASE_PX, Math.round(scaled));
-}
-function isStandardLightCover(context) {
-  const { theme } = context;
-  return theme.id === "standard" && relativeLuminance(theme.colors.background) > 0.85;
-}
-function coverBlock(input, context) {
-  const treatment = themedImageTreatment(context, input.imageTreatment);
-  const { heroSrc, heroAlt, title, subtitle, ambientMotion, heroCredit, heroLicense } = input;
-  const { theme, layout } = context;
-  const standardLightCover = !heroSrc && isStandardLightCover(context);
-  const titleFontSize = themedFontSize(fitCoverTitleSize(title), context, true);
-  const subtitleFontSize = themedFontSize(40, context, false);
-  const layers = [];
-  if (heroSrc) {
-    const imageAnimation = mapAmbientMotion(ambientMotion);
-    layers.push(
-      {
-        type: "image",
-        id: "cover-hero",
-        content: {
-          src: heroSrc,
-          alt: heroAlt || title,
-          fit: "cover",
-          credit: heroCredit,
-          license: heroLicense,
-          ...treatment ? { treatment } : {}
-        },
-        position: { x: 0, y: 0, width: "100%", height: "100%" },
-        animation: imageAnimation
-      },
-      {
-        type: "shape",
-        id: "cover-gradient",
-        content: {
-          shape: "rect",
-          fill: "linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.1) 70%, transparent 100%)"
-        },
-        position: { x: 0, y: 0, width: "100%", height: "100%" }
-      }
-    );
-  } else {
-    if (standardLightCover) {
-      layers.push(
-        {
-          type: "shape",
-          id: "cover-bg",
-          content: {
-            shape: "rect",
-            fill: theme.colors.background
-          },
-          position: { x: 0, y: 0, width: "100%", height: "100%" }
-        },
-        {
-          type: "shape",
-          id: "cover-bg-tint",
-          content: {
-            shape: "rect",
-            fill: `radial-gradient(ellipse at 50% 40%, ${withAlpha(theme.colors.primary, 0.16)} 0%, ${withAlpha(theme.colors.primary, 0.07)} 38%, ${withAlpha(theme.colors.primary, 0)} 78%)`
-          },
-          position: { x: 0, y: 0, width: "100%", height: "100%" }
-        }
-      );
-    } else {
-      layers.push({
-        type: "shape",
-        id: "cover-bg",
-        content: {
-          shape: "rect",
-          fill: `radial-gradient(ellipse at 50% 40%, ${theme.colors.primary} 0%, ${theme.colors.background} 100%)`
-        },
-        position: { x: 0, y: 0, width: "100%", height: "100%" }
-      });
-    }
-    layers.push({
-      type: "shape",
-      id: "cover-accent",
-      content: {
-        shape: "rect",
-        fill: standardLightCover ? withAlpha(theme.colors.primary, 0.24) : "rgba(255, 255, 255, 0.2)"
-      },
-      position: {
-        x: "35%",
-        y: subtitle ? "42%" : "58%",
-        width: "30%",
-        height: "2px"
-      }
-    });
-  }
-  layers.push({
-    type: "text",
-    id: "cover-title",
-    content: {
-      text: title,
-      style: {
-        fontSize: titleFontSize,
-        fontFamily: getThemeFont(context, "title"),
-        fontWeight: "bold",
-        color: theme.colors.text,
-        textAlign: "center",
-        shadow: !standardLightCover
-      }
-    },
-    position: {
-      x: "50%",
-      y: heroSrc ? subtitle ? "70%" : "75%" : subtitle ? layout.primaryY : "50%",
-      anchor: "center",
-      width: layout.maxTextWidth
-    },
-    // No animation delay - shown immediately at rest
-    animation: { type: "fadeIn", duration: 0.8 }
-  });
-  if (subtitle) {
-    layers.push({
-      type: "text",
-      id: "cover-subtitle",
-      content: {
-        text: subtitle,
-        style: {
-          fontSize: subtitleFontSize,
-          fontFamily: getThemeFont(context, "body"),
-          fontWeight: standardLightCover ? "bold" : "normal",
-          color: standardLightCover ? withAlpha(theme.colors.text, 0.78) : theme.colors.textMuted,
-          textAlign: "center",
-          lineHeight: 1.5
-        }
-      },
-      position: {
-        x: "50%",
-        y: heroSrc ? "82%" : layout.secondaryY,
-        anchor: "center",
-        width: layout.maxTextWidth
-      },
-      animation: { type: "fadeIn", duration: 0.8, delay: 0.2 }
-    });
+  comparisonBar: {
+    summary: "Data bars are primary; supplemental media stacks below to preserve horizontal scale.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: DENSE_VARIANTS
+  },
+  pullQuote: {
+    summary: "Requires and owns a full-bleed background image behind the quote lockup.",
+    noMedia: "unsupported",
+    ownership: "required-native",
+    nativeLayout: "full-bleed-image",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "retain-native-layout"
+  },
+  videoWithCaption: {
+    summary: "Requires one primary video and owns its full-bleed video/caption geometry.",
+    noMedia: "unsupported",
+    ownership: "required-native",
+    nativeLayout: "full-bleed-video",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "retain-native-layout"
+  },
+  videoPullQuote: {
+    summary: "Requires and owns a full-bleed video behind the quote lockup.",
+    noMedia: "unsupported",
+    ownership: "required-native",
+    nativeLayout: "full-bleed-video",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "retain-native-layout"
+  },
+  dataTable: {
+    summary: "The table remains wide; supplemental media stacks below the dense data region.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: DENSE_VARIANTS
+  },
+  diagram: {
+    summary: "The node-and-edge canvas is intrinsic media and retains its spatial coordinate system.",
+    noMedia: "intrinsic-visual",
+    ownership: "intrinsic-visual",
+    nativeLayout: "spatial-canvas",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "retain-native-layout"
+  },
+  tree: {
+    summary: "The interactive tree canvas is intrinsic media and retains its full layout region.",
+    noMedia: "intrinsic-visual",
+    ownership: "intrinsic-visual",
+    nativeLayout: "spatial-canvas",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "retain-native-layout"
+  },
+  timeline: {
+    summary: "The track canvas is intrinsic media and retains its shared horizontal time scale.",
+    noMedia: "intrinsic-visual",
+    ownership: "intrinsic-visual",
+    nativeLayout: "spatial-canvas",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "retain-native-layout"
+  },
+  layout: {
+    summary: "The authored layer canvas is intrinsic media and must preserve absolute placement.",
+    noMedia: "intrinsic-visual",
+    ownership: "intrinsic-visual",
+    nativeLayout: "freeform-canvas",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "retain-native-layout"
+  },
+  drawing: {
+    summary: "The drawing canvas is intrinsic media and must preserve authored geometry.",
+    noMedia: "intrinsic-visual",
+    ownership: "intrinsic-visual",
+    nativeLayout: "freeform-canvas",
+    additionalMediaLayout: "overlay-inset",
+    unconsumedMedia: "retain-native-layout"
   }
-  return layers;
+};
+function getBlockMediaLayoutPolicy(template) {
+  if (!template) return void 0;
+  return BLOCK_MEDIA_LAYOUT_POLICIES[template];
 }
-function startBlockToCoverInput(config) {
+
+// src/doc/richMediaLayout.ts
+function rect(viewport, x, y, width, height) {
   return {
-    heroSrc: config.heroSrc,
-    heroAlt: config.heroAlt,
-    title: config.title,
-    subtitle: config.subtitle,
-    ambientMotion: config.ambientMotion,
-    heroCredit: config.heroCredit,
-    heroLicense: config.heroLicense
+    x: viewport.width * x,
+    y: viewport.height * y,
+    width: viewport.width * width,
+    height: viewport.height * height
   };
 }
-function expandCoverBlock(config, context) {
-  const input = startBlockToCoverInput(config);
-  return coverBlock(input, context);
+function mediaShape(mediaCount, aspectRatios) {
+  if (mediaCount > 1) return "multiple";
+  const aspect = aspectRatios[0] ?? 16 / 9;
+  if (aspect < 0.8) return "tall";
+  if (aspect > 1.25) return "wide";
+  return "square";
 }
-
-// src/doc/templates/index.ts
-function materializeScheduledBlock(sourceBlock, blockIndex, totalBlocks, theme, viewport, persistentLayers, expandedPersistentLayers, registry, failureMode, onDiagnostic) {
-  const materialized = materializeBlockLayersWithRuntime(
-    sourceBlock,
-    {
-      theme,
-      viewport,
-      persistentLayers: persistentLayers ?? false,
-      blockIndex,
-      totalBlocks,
-      failureMode
-    },
-    { registry, expandedPersistentLayers }
-  );
-  if (materialized.diagnostic) {
-    onDiagnostic?.(materialized.diagnostic, sourceBlock, blockIndex);
+function stackedTitleLayout(viewport, orientation) {
+  if (orientation === "portrait") {
+    return {
+      contentRect: rect(viewport, 0.06, 0.04, 0.88, 0.3),
+      mediaRect: rect(viewport, 0.06, 0.39, 0.88, 0.55),
+      fontScale: 0.76
+    };
   }
-  const expandedBlock = isTemplateBlock(sourceBlock) ? {
-    id: sourceBlock.id,
-    startTime: 0,
-    duration: sourceBlock.duration,
-    audioSegment: sourceBlock.audioSegment,
-    ...materialized.layers.length > 0 ? { layers: materialized.layers } : {},
-    transition: sourceBlock.transition,
-    template: sourceBlock.template
-  } : {
-    ...cloneData(sourceBlock),
-    ...materialized.layers.length > 0 ? { layers: materialized.layers } : {}
+  if (orientation === "square") {
+    return {
+      contentRect: rect(viewport, 0.05, 0.04, 0.9, 0.33),
+      mediaRect: rect(viewport, 0.07, 0.42, 0.86, 0.51),
+      fontScale: 0.72
+    };
+  }
+  return {
+    contentRect: rect(viewport, 0.04, 0.03, 0.92, 0.32),
+    mediaRect: rect(viewport, 0.08, 0.4, 0.84, 0.52),
+    fontScale: 0.72
   };
-  const transition = resolveBlockTransition(expandedBlock, theme, blockIndex);
-  if (transition !== expandedBlock.transition) {
-    expandedBlock.transition = transition;
+}
+function splitLayout(viewport, orientation) {
+  const square = orientation === "square";
+  return {
+    contentRect: rect(viewport, square ? 0.05 : 0.04, 0.05, square ? 0.42 : 0.43, 0.9),
+    mediaRect: rect(viewport, square ? 0.52 : 0.53, 0.07, square ? 0.43 : 0.43, 0.86),
+    fontScale: 0.72
+  };
+}
+function stackedTextLayout(viewport, orientation, dense) {
+  if (orientation === "portrait") {
+    return {
+      contentRect: rect(viewport, 0.06, 0.04, 0.88, dense ? 0.41 : 0.36),
+      mediaRect: rect(viewport, 0.06, dense ? 0.5 : 0.45, 0.88, dense ? 0.44 : 0.49),
+      fontScale: dense ? 0.42 : 0.44
+    };
   }
-  return expandedBlock;
+  if (orientation === "square") {
+    return {
+      contentRect: rect(viewport, 0.05, 0.04, 0.9, dense ? 0.43 : 0.36),
+      mediaRect: rect(viewport, 0.07, dense ? 0.52 : 0.45, 0.86, dense ? 0.41 : 0.48),
+      fontScale: dense ? 0.45 : 0.46
+    };
+  }
+  return {
+    contentRect: rect(viewport, 0.05, 0.03, 0.9, dense ? 0.46 : 0.35),
+    mediaRect: rect(viewport, 0.07, dense ? 0.55 : 0.43, 0.86, dense ? 0.38 : 0.49),
+    fontScale: dense ? 0.5 : 0.48
+  };
 }
-function expandDocBlocks(blocks, options = {}) {
-  const opts = options;
-  const theme = opts.theme ?? DEFAULT_THEME;
-  const viewport = opts.viewport ?? VIEWPORT_PRESETS.landscape;
-  const {
-    persistentLayers,
-    audioSegments,
-    customTemplates,
-    failureMode = "fallback",
-    onDiagnostic
-  } = opts;
-  const totalBlocks = blocks.length;
-  const registry = customTemplates && customTemplates.length > 0 ? buildRegistry(customTemplates) : templateRegistry;
-  const effectivePersistentLayers = persistentLayers === false ? void 0 : persistentLayers ?? theme.persistentLayers;
-  const expandedPersistentLayers = effectivePersistentLayers ? {
-    bottomLayers: expandPersistentLayers(effectivePersistentLayers.bottomLayers, theme),
-    topLayers: expandPersistentLayers(effectivePersistentLayers.topLayers, theme)
-  } : void 0;
-  if (!audioSegments || audioSegments.length === 0) {
-    let currentTime = 0;
-    return blocks.map((block, index) => {
-      const expandedBlock = materializeScheduledBlock(
-        block,
-        index,
-        totalBlocks,
-        theme,
-        viewport,
-        effectivePersistentLayers,
-        expandedPersistentLayers,
-        registry,
-        failureMode,
-        onDiagnostic
-      );
-      expandedBlock.startTime = currentTime;
-      currentTime += expandedBlock.duration;
-      return expandedBlock;
-    });
+function overlayMediaRect(viewport, shape) {
+  const orientation = getViewportOrientation(viewport);
+  if (orientation === "portrait") {
+    switch (shape) {
+      case "tall":
+        return rect(viewport, 0.55, 0.5, 0.38, 0.44);
+      case "square":
+        return rect(viewport, 0.49, 0.58, 0.44, 0.35);
+      case "multiple":
+        return rect(viewport, 0.07, 0.67, 0.86, 0.27);
+      case "wide":
+        return rect(viewport, 0.07, 0.71, 0.86, 0.23);
+    }
+  }
+  if (orientation === "square") {
+    switch (shape) {
+      case "tall":
+        return rect(viewport, 0.68, 0.1, 0.27, 0.8);
+      case "square":
+        return rect(viewport, 0.55, 0.52, 0.4, 0.4);
+      case "multiple":
+        return rect(viewport, 0.08, 0.62, 0.84, 0.31);
+      case "wide":
+        return rect(viewport, 0.08, 0.68, 0.84, 0.27);
+    }
+  }
+  switch (shape) {
+    case "tall":
+      return rect(viewport, 0.7, 0.1, 0.26, 0.8);
+    case "square":
+      return rect(viewport, 0.62, 0.22, 0.34, 0.56);
+    case "multiple":
+      return rect(viewport, 0.52, 0.5, 0.44, 0.42);
+    case "wide":
+      return rect(viewport, 0.54, 0.58, 0.42, 0.34);
+  }
+}
+function designedLayout(variant, viewport) {
+  const orientation = getViewportOrientation(viewport);
+  switch (variant) {
+    case "title-stack":
+      return stackedTitleLayout(viewport, orientation);
+    case "split":
+      return splitLayout(viewport, orientation);
+    case "text-stack":
+      return stackedTextLayout(viewport, orientation, false);
+    case "dense-stack":
+      return stackedTextLayout(viewport, orientation, true);
   }
-  const blocksBySegment = /* @__PURE__ */ new Map();
-  blocks.forEach((block, index) => {
-    const segmentIndex = block.audioSegment ?? 0;
-    if (!blocksBySegment.has(segmentIndex)) {
-      blocksBySegment.set(segmentIndex, []);
-    }
-    blocksBySegment.get(segmentIndex).push({ block, originalIndex: index });
-  });
-  const expandedBlocks = new Array(blocks.length);
-  for (const [segmentIndex, segmentBlocks] of blocksBySegment) {
-    const audioSegment = audioSegments[segmentIndex];
-    if (!audioSegment) {
-      let offsetTime = 0;
-      for (const { block, originalIndex } of segmentBlocks) {
-        const expandedBlock = materializeScheduledBlock(
-          block,
-          originalIndex,
-          totalBlocks,
-          theme,
-          viewport,
-          effectivePersistentLayers,
-          expandedPersistentLayers,
-          registry,
-          failureMode,
-          onDiagnostic
-        );
-        expandedBlock.startTime = offsetTime;
-        offsetTime += expandedBlock.duration;
-        expandedBlocks[originalIndex] = expandedBlock;
-      }
-      continue;
-    }
-    const sectionHeaderBlocks = [];
-    const contentBlocks = [];
-    for (const item of segmentBlocks) {
-      const templateBlock = item.block;
-      if (templateBlock.template === "sectionHeader") {
-        sectionHeaderBlocks.push(item);
-      } else {
-        contentBlocks.push(item);
-      }
-    }
-    const fixedDuration = sectionHeaderBlocks.reduce((sum, { block }) => {
-      return sum + (block.duration ?? 0);
-    }, 0);
-    const contentBlockDuration = contentBlocks.reduce((sum, { block }) => {
-      return sum + (block.duration ?? 0);
-    }, 0);
-    const remainingDuration = audioSegment.duration - fixedDuration;
-    const scaleFactor = contentBlockDuration > 0 && remainingDuration > 0 ? remainingDuration / contentBlockDuration : 1;
-    const expandedInfos = [];
-    for (const { block, originalIndex } of segmentBlocks) {
-      const expandedBlock = materializeScheduledBlock(
-        block,
-        originalIndex,
-        totalBlocks,
-        theme,
-        viewport,
-        effectivePersistentLayers,
-        expandedPersistentLayers,
-        registry,
-        failureMode,
-        onDiagnostic
-      );
-      const templateBlock = block;
-      expandedInfos.push({
-        block: expandedBlock,
-        originalIndex,
-        templateBlock,
-        hasSourceTiming: typeof templateBlock.sourceStartTime === "number"
-      });
-    }
-    const hasAnySourceTiming = expandedInfos.some((info) => info.hasSourceTiming);
-    expandedInfos.sort((a, b) => {
-      if (hasAnySourceTiming) {
-        const aIsHeader = a.templateBlock.template === "sectionHeader";
-        const bIsHeader = b.templateBlock.template === "sectionHeader";
-        if (aIsHeader && !bIsHeader) return -1;
-        if (!aIsHeader && bIsHeader) return 1;
-        if (a.hasSourceTiming && b.hasSourceTiming) {
-          return a.templateBlock.sourceStartTime - b.templateBlock.sourceStartTime;
-        }
-        if (a.hasSourceTiming && !b.hasSourceTiming) return -1;
-        if (!a.hasSourceTiming && b.hasSourceTiming) return 1;
-      }
-      return a.originalIndex - b.originalIndex;
-    });
-    let offsetWithinSegment = 0;
-    for (let i = 0; i < expandedInfos.length; i++) {
-      const info = expandedInfos[i];
-      const { block: expandedBlock, templateBlock } = info;
-      if (info.hasSourceTiming) {
-        const sourceStart = templateBlock.sourceStartTime;
-        expandedBlock.startTime = audioSegment.startTime + sourceStart;
-        if (typeof templateBlock.sourceDuration === "number") {
-          expandedBlock.duration = Math.max(5, templateBlock.sourceDuration);
-        }
-        offsetWithinSegment = sourceStart + expandedBlock.duration;
-      } else if (templateBlock.template === "sectionHeader") {
-        expandedBlock.startTime = audioSegment.startTime + offsetWithinSegment;
-        offsetWithinSegment += expandedBlock.duration;
-      } else {
-        expandedBlock.startTime = audioSegment.startTime + offsetWithinSegment;
-        const scaledDuration = expandedBlock.duration * scaleFactor;
-        expandedBlock.duration = scaledDuration;
-        offsetWithinSegment += scaledDuration;
-      }
-      expandedBlocks[info.originalIndex] = expandedBlock;
-    }
-    const segmentExpandedBlocks = expandedInfos.map((info) => expandedBlocks[info.originalIndex]).sort((a, b) => a.startTime - b.startTime);
-    for (let i = 0; i < segmentExpandedBlocks.length - 1; i++) {
-      const current = segmentExpandedBlocks[i];
-      const next = segmentExpandedBlocks[i + 1];
-      const currentEnd = current.startTime + current.duration;
-      if (currentEnd > next.startTime) {
-        current.duration = next.startTime - current.startTime;
-      } else if (currentEnd < next.startTime - 0.5) {
-        current.duration = Math.max(0.1, next.startTime - current.startTime);
-      }
-    }
-    const MIN_TRANSITION_GAP = 5;
-    const segmentEnd = audioSegment.startTime + audioSegment.duration;
-    while (segmentExpandedBlocks.length > 1) {
-      const lastBlock = segmentExpandedBlocks[segmentExpandedBlocks.length - 1];
-      const timeFromLastToEnd = segmentEnd - lastBlock.startTime;
-      if (timeFromLastToEnd < MIN_TRANSITION_GAP && lastBlock.template !== "sectionHeader") {
-        const prevBlock = segmentExpandedBlocks[segmentExpandedBlocks.length - 2];
-        prevBlock.duration = segmentEnd - prevBlock.startTime;
-        lastBlock.duration = 0;
-        lastBlock.startTime = segmentEnd;
-        segmentExpandedBlocks.pop();
-      } else {
-        if (lastBlock.startTime + lastBlock.duration < segmentEnd) {
-          lastBlock.duration = segmentEnd - lastBlock.startTime;
+}
+function resolvePositionValue(value, dimension) {
+  if (value === void 0) return 0;
+  if (typeof value === "number") return value;
+  const percent = value.match(/^\s*(-?\d+(?:\.\d+)?)%\s*$/);
+  if (percent) return Number(percent[1]) / 100 * dimension;
+  const numeric = Number.parseFloat(value);
+  return Number.isFinite(numeric) ? numeric : 0;
+}
+function isZero(value) {
+  return value === 0 || value === "0" || value === "0%";
+}
+function isFullViewportBackground(layer, viewport) {
+  if (layer.type !== "shape" && layer.type !== "image") return false;
+  const { position } = layer;
+  const fullWidth = position.width === "100%" || position.width === viewport.width;
+  const fullHeight = position.height === "100%" || position.height === viewport.height;
+  return isZero(position.x) && isZero(position.y) && fullWidth && fullHeight;
+}
+function mapPosition(position, contentRect, viewport) {
+  const mapped = {
+    ...position,
+    x: contentRect.x + resolvePositionValue(position.x, viewport.width) / viewport.width * contentRect.width,
+    y: contentRect.y + resolvePositionValue(position.y, viewport.height) / viewport.height * contentRect.height
+  };
+  if (position.width !== void 0) {
+    mapped.width = resolvePositionValue(position.width, viewport.width) / viewport.width * contentRect.width;
+  }
+  if (position.height !== void 0) {
+    mapped.height = resolvePositionValue(position.height, viewport.height) / viewport.height * contentRect.height;
+  }
+  return mapped;
+}
+function mapForegroundLayers(layers, contentRect, viewport, fontScale, template) {
+  const mapped = layers.map((layer) => {
+    if (isFullViewportBackground(layer, viewport)) return layer;
+    const position = mapPosition(layer.position, contentRect, viewport);
+    if (layer.type === "text") {
+      return {
+        ...layer,
+        position,
+        content: {
+          ...layer.content,
+          style: {
+            ...layer.content.style,
+            fontSize: Math.max(12, Math.round(layer.content.style.fontSize * fontScale)),
+            ...layer.content.style.padding !== void 0 ? { padding: Math.round(layer.content.style.padding * fontScale) } : {}
+          }
         }
-        break;
-      }
+      };
     }
-    if (segmentExpandedBlocks.length === 1) {
-      const onlyBlock = segmentExpandedBlocks[0];
-      if (onlyBlock.startTime + onlyBlock.duration < segmentEnd) {
-        onlyBlock.duration = segmentEnd - onlyBlock.startTime;
+    return { ...layer, position };
+  });
+  return arrangeTitleFamily(mapped, template, contentRect, viewport);
+}
+function arrangeTitleFamily(layers, template, contentRect, viewport) {
+  const centerX = contentRect.x + contentRect.width / 2;
+  const centerY = contentRect.y + contentRect.height / 2;
+  if (template === "sectionHeader") {
+    return layers.map((layer) => {
+      if (layer.id === "title") {
+        return {
+          ...layer,
+          position: {
+            ...layer.position,
+            x: centerX,
+            y: centerY,
+            width: contentRect.width * 0.9,
+            anchor: "center"
+          }
+        };
       }
+      if (layer.id === "line-top" || layer.id === "line-bottom") {
+        const direction = layer.id === "line-top" ? -1 : 1;
+        return {
+          ...layer,
+          position: {
+            ...layer.position,
+            x: centerX,
+            y: centerY + direction * contentRect.height * 0.28,
+            width: Math.min(contentRect.width * 0.22, viewport.width * 0.2),
+            height: 2,
+            anchor: "center"
+          }
+        };
+      }
+      return layer;
+    });
+  }
+  if (template !== "title") return layers;
+  const title = layers.find((layer) => layer.type === "text" && layer.id === "title");
+  const subtitle = layers.find((layer) => layer.type === "text" && layer.id === "subtitle");
+  if (!title || title.type !== "text") return layers;
+  const subtitleText = subtitle?.type === "text" ? subtitle : void 0;
+  const maxWidth = contentRect.width * 0.9;
+  const decorationGap = Math.max(12, Math.min(viewport.width, viewport.height) * 0.018);
+  const textGap = subtitleText ? decorationGap : 0;
+  const availableHeight = contentRect.height * 0.78;
+  let titleFontSize = title.content.style.fontSize;
+  let subtitleFontSize = subtitleText?.content.style.fontSize ?? 0;
+  const measure = () => {
+    const titleHeight = estimateTextHeight(
+      title.content.text,
+      titleFontSize,
+      maxWidth,
+      title.content.style.lineHeight ?? 1.15
+    );
+    const subtitleHeight = subtitleText ? estimateTextHeight(
+      subtitleText.content.text,
+      subtitleFontSize,
+      maxWidth,
+      subtitleText.content.style.lineHeight ?? 1.5
+    ) : 0;
+    return { titleHeight, subtitleHeight, total: titleHeight + textGap + subtitleHeight };
+  };
+  let measured = measure();
+  if (measured.total > availableHeight) {
+    const fit = Math.max(0.5, availableHeight / measured.total);
+    titleFontSize = Math.max(18, Math.round(titleFontSize * fit));
+    subtitleFontSize = Math.max(14, Math.round(subtitleFontSize * fit));
+    measured = measure();
+  }
+  const top = contentRect.y + (contentRect.height - measured.total) / 2;
+  const titleY = top + measured.titleHeight / 2;
+  const subtitleY = top + measured.titleHeight + textGap + measured.subtitleHeight / 2;
+  return layers.map((layer) => {
+    if (layer.id === "title" && layer.type === "text") {
+      return {
+        ...layer,
+        position: { ...layer.position, x: centerX, y: titleY, width: maxWidth, anchor: "center" },
+        content: {
+          ...layer.content,
+          style: { ...layer.content.style, fontSize: titleFontSize }
+        }
+      };
     }
-    let changed = true;
-    while (changed) {
-      changed = false;
-      for (let i = segmentExpandedBlocks.length - 1; i >= 1; i--) {
-        const block = segmentExpandedBlocks[i];
-        if (block.duration > 0 && block.duration < MIN_TRANSITION_GAP) {
-          const prev = segmentExpandedBlocks[i - 1];
-          const blockEnd = block.startTime + block.duration;
-          prev.duration = blockEnd - prev.startTime;
-          block.duration = 0;
-          block.startTime = segmentEnd;
-          segmentExpandedBlocks.splice(i, 1);
-          changed = true;
-          break;
+    if (layer.id === "subtitle" && layer.type === "text") {
+      return {
+        ...layer,
+        position: {
+          ...layer.position,
+          x: centerX,
+          y: subtitleY,
+          width: maxWidth,
+          anchor: "center"
+        },
+        content: {
+          ...layer.content,
+          style: { ...layer.content.style, fontSize: subtitleFontSize }
         }
-      }
+      };
     }
-    const MAX_BLOCK_DURATION = 20;
-    for (let i = 0; i < segmentExpandedBlocks.length; i++) {
-      const block = segmentExpandedBlocks[i];
-      if (block.duration > MAX_BLOCK_DURATION) {
-        const numParts = Math.ceil(block.duration / MAX_BLOCK_DURATION);
-        const partDuration = block.duration / numParts;
-        if (partDuration >= MIN_TRANSITION_GAP) {
-          block.duration = partDuration;
-          for (let p = 1; p < numParts; p++) {
-            const splitBlock = {
-              id: `${block.id}-split-${p}`,
-              startTime: block.startTime + p * partDuration,
-              duration: partDuration,
-              audioSegment: block.audioSegment,
-              layers: (block.layers ?? []).map((layer) => ({
-                ...cloneData(layer),
-                id: `${layer.id}-split-${p}`
-              })),
-              transition: { type: "dissolve", duration: 1 },
-              template: block.template
-            };
-            expandedBlocks.push(splitBlock);
-          }
+    if (layer.id === "accent-line") {
+      return {
+        ...layer,
+        position: {
+          ...layer.position,
+          x: centerX,
+          y: Math.max(contentRect.y + 2, top - decorationGap * 0.75),
+          width: Math.min(contentRect.width * 0.18, viewport.width * 0.12),
+          height: 3,
+          anchor: "center"
         }
-      }
+      };
     }
-  }
-  return expandedBlocks.filter((block) => block && block.duration > 0);
+    return layer;
+  });
 }
-function getAvailableTemplates() {
-  return Object.keys(templateRegistry);
+function positionRect(position, viewport, fallbackWidth, fallbackHeight) {
+  const width = position.width ? resolvePositionValue(position.width, viewport.width) : fallbackWidth;
+  const height = position.height ? resolvePositionValue(position.height, viewport.height) : fallbackHeight;
+  let x = resolvePositionValue(position.x, viewport.width);
+  let y = resolvePositionValue(position.y, viewport.height);
+  const anchor = position.anchor ?? "top-left";
+  if (anchor === "center") {
+    x -= width / 2;
+    y -= height / 2;
+  } else {
+    if (anchor.endsWith("right")) x -= width;
+    if (anchor.startsWith("bottom")) y -= height;
+  }
+  return { x, y, width, height };
 }
-function hasTemplate(name) {
-  return resolveTemplateName(name) in templateRegistry;
+function overlapArea(a, b) {
+  const width = Math.max(0, Math.min(a.x + a.width, b.x + b.width) - Math.max(a.x, b.x));
+  const height = Math.max(0, Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y));
+  return width * height;
 }
-
-// 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 leastObstructedMediaRect(layers, viewport) {
+  const occupied = layers.filter((layer) => layer.type !== "shape" && layer.type !== "path" && layer.type !== "mermaid").map(
+    (layer) => positionRect(
+      layer.position,
+      viewport,
+      layer.type === "text" ? viewport.width * 0.45 : viewport.width * 0.5,
+      layer.type === "text" ? viewport.height * 0.2 : viewport.height * 0.55
+    )
+  );
+  if (occupied.length === 0) return rect(viewport, 0.06, 0.08, 0.88, 0.84);
+  const candidates = [
+    rect(viewport, 0.52, 0.12, 0.44, 0.76),
+    rect(viewport, 0.04, 0.12, 0.44, 0.76),
+    rect(viewport, 0.15, 0.53, 0.7, 0.41)
+  ];
+  return candidates.reduce((best, candidate) => {
+    const score = occupied.reduce((sum, item) => sum + overlapArea(candidate, item), 0);
+    const bestScore = occupied.reduce((sum, item) => sum + overlapArea(best, item), 0);
+    return score < bestScore ? candidate : best;
+  });
 }
-function canvasToAsciiCell(x, y) {
+function resolveSupplementalMediaLayout(layers, template, viewport, mediaCount, aspectRatios) {
+  const policy = getBlockMediaLayoutPolicy(template);
+  const shape = mediaShape(mediaCount, aspectRatios);
+  const alreadyOwnsMedia = layers.some(
+    (layer) => layer.type === "image" || layer.type === "video" || layer.type === "map" || layer.type === "mermaid"
+  );
+  const retainNativeLayout = policy?.unconsumedMedia === "retain-native-layout" || policy?.unconsumedMedia === "reserve-when-no-native-media" && alreadyOwnsMedia;
+  if (policy?.additionalMediaLayout === "overlay-inset" && retainNativeLayout) {
+    return {
+      layers,
+      mediaRect: overlayMediaRect(viewport, shape),
+      framed: true
+    };
+  }
+  const canReserve = policy?.unconsumedMedia === "reserved-slot" || policy?.unconsumedMedia === "reserve-when-no-native-media" && !alreadyOwnsMedia;
+  if (!policy || !canReserve || !policy.variants) {
+    return {
+      layers,
+      mediaRect: leastObstructedMediaRect(layers, viewport),
+      framed: false
+    };
+  }
+  const orientation = getViewportOrientation(viewport);
+  const layout = designedLayout(policy.variants[orientation][shape], viewport);
   return {
-    col: Math.max(0, Math.round(x / ASCII_CHAR_W)),
-    row: Math.max(0, Math.round(y / ASCII_CHAR_H))
+    layers: mapForegroundLayers(
+      layers,
+      layout.contentRect,
+      viewport,
+      layout.fontScale,
+      template ?? ""
+    ),
+    mediaRect: layout.mediaRect,
+    framed: true
   };
 }
-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 };
+
+// src/doc/materializeBlockLayers.ts
+function materializeBlockLayers(block, options = {}) {
+  const registry = options.customTemplates && options.customTemplates.length > 0 ? buildRegistry(options.customTemplates) : templateRegistry;
+  return materializeBlockLayersWithRuntime(block, options, { registry });
 }
-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 }
+function materializeBlockLayersWithRuntime(block, options, runtime) {
+  const theme = options.theme ?? DEFAULT_THEME;
+  const viewport = options.viewport ?? VIEWPORT_PRESETS.landscape;
+  const blockIndex = options.blockIndex ?? 0;
+  const totalBlocks = options.totalBlocks ?? 1;
+  const effectivePersistentLayers = options.persistentLayers === false ? void 0 : options.persistentLayers ?? theme.persistentLayers;
+  const existingLayers = block.layers;
+  if (existingLayers && existingLayers.length > 0 && !isTemplateBlock(block)) {
+    const layers = appendRichContentLayers(
+      cloneData(existingLayers),
+      block,
+      theme,
+      viewport
+    );
+    return {
+      layers: injectPersistentLayers(
+        layers,
+        block,
+        theme,
+        effectivePersistentLayers,
+        runtime.expandedPersistentLayers
+      ),
+      source: "authored"
+    };
+  }
+  if (!isTemplateBlock(block)) {
+    const layers = appendRichContentLayers([], block, theme, viewport);
+    return {
+      layers: injectPersistentLayers(
+        layers,
+        block,
+        theme,
+        effectivePersistentLayers,
+        runtime.expandedPersistentLayers
+      ),
+      source: layers.length > 0 ? "rich-content" : "empty"
     };
-  });
-  distributeOffsets(pairs, edges, nodes, "source");
-  distributeOffsets(pairs, edges, nodes, "target");
-  return pairs;
-}
-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);
-    });
+  const context = runtime.templateContext ? cloneData(runtime.templateContext) : createTemplateContext(theme, blockIndex, totalBlocks, viewport);
+  context.block = cloneData(block);
+  const execution = executeTemplateMaterialization(block, context, runtime.registry);
+  if (execution.status === "ok") {
+    const styledLayers = runtime.applyRenderStyle !== false ? applyRenderStyleToLayers(execution.layers, block, theme) : execution.layers;
+    const layers = appendRichContentLayers(styledLayers, block, theme, viewport);
+    return {
+      layers: injectPersistentLayers(
+        layers,
+        block,
+        theme,
+        effectivePersistentLayers,
+        runtime.expandedPersistentLayers
+      ),
+      source: "template"
+    };
   }
-}
-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;
+  const diagnostic = toLayerMaterializationDiagnostic(block.template, execution);
+  if ((options.failureMode ?? "fallback") === "empty") {
+    const layers = appendRichContentLayers([], block, theme, viewport);
     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 } : {}
+      layers: injectPersistentLayers(
+        layers,
+        block,
+        theme,
+        effectivePersistentLayers,
+        runtime.expandedPersistentLayers
+      ),
+      source: layers.length > 0 ? "rich-content" : "empty",
+      diagnostic
     };
-  });
+  }
+  const fallbackLayers = appendRichContentLayers(
+    fallbackBlockLayers(block, context, diagnostic.message),
+    block,
+    theme,
+    viewport
+  );
   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: []
+    layers: injectPersistentLayers(
+      fallbackLayers,
+      block,
+      theme,
+      effectivePersistentLayers,
+      runtime.expandedPersistentLayers
+    ),
+    source: "fallback",
+    diagnostic
   };
 }
-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;
+function mermaidSources(block) {
+  return (block.contents ?? []).filter(
+    (node) => node.type === "code" && node.lang?.trim().toLowerCase() === "mermaid"
+  ).map((node) => node.value).filter((source) => source.trim().length > 0);
 }
-
-// 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: clamp012((event.column - globalStart) / span),
-        ...event.side ? { side: event.side } : {},
-        ...event.descriptionSide ? { descriptionSide: event.descriptionSide } : {},
-        ...event.callout === false ? { callout: false } : {},
-        ...event.marker ? { marker: event.marker } : {}
+function collectRichMediaItems(layers, block) {
+  const existingImages = new Set(
+    layers.filter((layer) => layer.type === "image").map((layer) => layer.content.src)
+  );
+  const existingVideos = new Set(
+    layers.filter((layer) => layer.type === "video").map((layer) => layer.content.src)
+  );
+  const existingMermaid = new Set(
+    layers.filter((layer) => layer.type === "mermaid").map((layer) => layer.content.source)
+  );
+  const embeddedVideos = extractEmbeddedVideos(block.contents);
+  const videos = embeddedVideos.filter((video) => !existingVideos.has(video.src));
+  const videoSources = new Set(embeddedVideos.map((video) => video.src));
+  const seenImages = new Set(existingImages);
+  const images = extractImages(block.contents).filter((image) => {
+    if (videoSources.has(image.src) || seenImages.has(image.src)) return false;
+    seenImages.add(image.src);
+    return true;
+  });
+  const sources = mermaidSources(block).filter((source) => !existingMermaid.has(source));
+  return [
+    ...images.map(
+      (image) => ({
+        kind: "image",
+        src: image.src,
+        alt: image.alt,
+        ...image.width && image.height ? { aspectRatio: image.width / image.height } : {}
       })
-    )
-  }));
-  const links = timeline.links.map((link) => ({ ...link }));
-  return { tracks, links };
-}
-function clamp012(value) {
-  return Math.max(0, Math.min(1, value));
-}
-
-// src/doc/treeview/mapping.ts
-function treeToTemplateData(tree) {
-  return { items: tree.roots.map(toItem) };
+    ),
+    ...videos.map(
+      (video) => ({
+        kind: "video",
+        src: video.src,
+        ...video.posterSrc ? { posterSrc: video.posterSrc } : {},
+        alt: video.alt,
+        aspectRatio: 16 / 9
+      })
+    ),
+    ...sources.map((source) => ({ kind: "mermaid", source, aspectRatio: 16 / 9 }))
+  ];
 }
-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 gridCells(region, count, viewport, inset) {
+  const unit = Math.min(viewport.width, viewport.height);
+  const padding = inset ? unit * 0.025 : 0;
+  const gap = count > 1 ? unit * 0.018 : 0;
+  const inner = {
+    x: region.x + padding,
+    y: region.y + padding,
+    width: Math.max(0, region.width - padding * 2),
+    height: Math.max(0, region.height - padding * 2)
   };
+  const columns = Math.min(
+    count,
+    Math.max(1, Math.ceil(Math.sqrt(count * (inner.width / Math.max(1, inner.height)))))
+  );
+  const rows = Math.ceil(count / columns);
+  const width = (inner.width - gap * (columns - 1)) / columns;
+  const height = (inner.height - gap * (rows - 1)) / rows;
+  return Array.from({ length: count }, (_, index) => ({
+    x: inner.x + index % columns * (width + gap),
+    y: inner.y + Math.floor(index / columns) * (height + gap),
+    width,
+    height
+  }));
 }
-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 effectiveImageTreatment(theme, block) {
+  const override = block.imageTreatment;
+  if (override === "none") return void 0;
+  const base = override ? { type: override, strength: theme.style.imageTreatment?.strength } : theme.style.imageTreatment;
+  if (!base || base.type === "none") return void 0;
+  return base.type === "duotone" && !base.color ? { ...base, color: theme.colors.primary } : base;
 }
-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));
+function richMediaLayer(item, position, block, theme, kindIndex) {
+  if (item.kind === "image") {
+    const treatment = effectiveImageTreatment(theme, block);
     return {
-      id: idFor(label),
-      label,
-      children,
-      isDir: label.endsWith("/") || children.length > 0
+      id: `${block.id}-embedded-image-${kindIndex}`,
+      type: "image",
+      position,
+      content: {
+        src: item.src,
+        alt: item.alt || block.title || "Embedded image",
+        fit: "contain",
+        ...treatment ? { treatment } : {}
+      }
     };
-  };
-  return { roots: list.children.map(itemToNode), style: "unicode", warnings: [] };
-}
-function findFirstList(contents) {
-  return contents?.find((n) => n.type === "list");
-}
-
-// src/doc/templateInputs.ts
-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) {
-  if (!contents) return [];
-  const items = [];
-  for (const node of contents) {
-    if (node.type === "list") {
-      for (const item of node.children) {
-        const text = extractPlainText(item).trim();
-        if (text) items.push(text);
+  }
+  if (item.kind === "video") {
+    return {
+      id: `${block.id}-embedded-video-${kindIndex}`,
+      type: "video",
+      position,
+      content: {
+        src: item.src,
+        ...item.posterSrc ? { posterSrc: item.posterSrc } : {},
+        alt: item.alt || block.title || "Embedded video",
+        fit: "contain",
+        clipStart: 0,
+        clipEnd: Math.max(0, block.duration)
       }
-    }
+    };
   }
-  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;
+  return {
+    id: `${block.id}-mermaid-${kindIndex}`,
+    type: "mermaid",
+    position,
+    content: {
+      source: item.source,
+      background: theme.colors.backgroundLight,
+      foreground: theme.colors.text,
+      padding: Math.max(12, Math.round(Math.min(position.width, position.height) * 0.025))
+    }
+  };
 }
-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 appendRichContentLayers(layers, block, theme, viewport) {
+  const items = collectRichMediaItems(layers, block);
+  if (items.length === 0) return layers;
+  const layout = resolveSupplementalMediaLayout(
+    layers,
+    block.template ? resolveTemplateName(block.template) : void 0,
+    viewport,
+    items.length,
+    items.map((item) => item.aspectRatio)
+  );
+  const cells = gridCells(layout.mediaRect, items.length, viewport, layout.framed);
+  const counters = { image: 0, video: 0, mermaid: 0 };
+  const mediaLayers = items.map((item, index) => {
+    counters[item.kind] += 1;
+    return richMediaLayer(item, cells[index], block, theme, counters[item.kind]);
+  });
+  const frame = layout.framed ? {
+    id: `${block.id}-rich-media-frame`,
+    type: "shape",
+    position: layout.mediaRect,
+    content: {
+      shape: "rect",
+      fill: theme.colors.backgroundLight,
+      stroke: withAlpha(theme.colors.text, 0.14),
+      strokeWidth: 2,
+      borderRadius: Math.max(12, Math.round(Math.min(viewport.width, viewport.height) * 0.018))
     }
+  } : void 0;
+  return [...layout.layers, ...frame ? [frame] : [], ...mediaLayers];
+}
+function executeTemplateMaterialization(templateBlock, context, registry) {
+  const safeTemplateBlock = cloneData(templateBlock);
+  const safeContext = cloneData(context);
+  const maybeChildren = safeTemplateBlock.children;
+  if ((!safeContext.children || safeContext.children.length === 0) && maybeChildren?.length) {
+    safeContext.children = maybeChildren;
   }
-  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);
+  const templateFn = registry[resolveTemplateName(safeTemplateBlock.template)];
+  if (!templateFn) return { status: "unknown-template", layers: [] };
+  const { templateData, templateOverrides } = safeTemplateBlock;
+  const sourceBlock = safeTemplateBlock;
+  const derivedInputs = sourceBlock.sourceHeading ? deriveTemplateInputs(
+    safeTemplateBlock.template,
+    sourceBlock.title ?? "",
+    sourceBlock.contents
+  ) : null;
+  const coercedOverrides = coerceTemplateParams(
+    safeTemplateBlock.template,
+    templateOverrides ?? {}
+  ).input;
+  const input = derivedInputs || templateData || templateOverrides ? {
+    ...derivedInputs,
+    ...safeTemplateBlock,
+    ...templateData,
+    ...coercedOverrides
+  } : safeTemplateBlock;
+  const explicitQuote = Object.prototype.hasOwnProperty.call(coercedOverrides, "quote") ? coercedOverrides.quote : Object.prototype.hasOwnProperty.call(templateData ?? {}, "quote") ? templateData?.quote : Object.prototype.hasOwnProperty.call(safeTemplateBlock, "quote") ? safeTemplateBlock.quote : void 0;
+  if (resolveTemplateName(safeTemplateBlock.template) === "quote" && derivedInputs && !Object.prototype.hasOwnProperty.call(derivedInputs, "title") && !(typeof explicitQuote === "string" && explicitQuote.trim())) {
+    const quoteInput = input;
+    quoteInput.quote = derivedInputs.quote;
+    if (!Object.prototype.hasOwnProperty.call(templateData ?? {}, "title") && !Object.prototype.hasOwnProperty.call(coercedOverrides, "title")) {
+      delete quoteInput.title;
     }
-    if (Array.isArray(n.children)) {
-      for (const child of n.children) walk(child);
+  }
+  try {
+    const renderedLayers = templateFn(input, safeContext);
+    if (!Array.isArray(renderedLayers)) {
+      return {
+        status: "invalid-result",
+        layers: [],
+        receivedType: typeof renderedLayers
+      };
     }
+    return { status: "ok", layers: cloneData(renderedLayers) };
+  } catch (error) {
+    return { status: "error", layers: [], error };
   }
-  for (const node of contents) {
-    if (found.length >= limit) break;
-    walk(node);
+}
+function toLayerMaterializationDiagnostic(template, execution) {
+  if (execution.status === "unknown-template") {
+    return {
+      code: "unknown-template",
+      template,
+      message: `Unknown template "${template}"`
+    };
   }
-  return found;
+  if (execution.status === "invalid-result") {
+    return {
+      code: "invalid-template-result",
+      template,
+      receivedType: execution.receivedType,
+      message: `Template "${template}" returned ${execution.receivedType}, not a layer array`
+    };
+  }
+  return {
+    code: "template-error",
+    template,
+    cause: execution.error,
+    message: `Template "${template}" failed`
+  };
 }
-function extractFirstImage(contents) {
-  return extractImages(contents, 1)[0] ?? null;
+function injectPersistentLayers(layers, block, theme, persistentLayers, expanded) {
+  if (!persistentLayers) return layers;
+  const bottomLayers = expanded?.bottomLayers ?? expandPersistentLayers(persistentLayers.bottomLayers, theme);
+  const topLayers = expanded?.topLayers ?? expandPersistentLayers(persistentLayers.topLayers, theme);
+  return wrapWithPersistentLayers(layers, block, bottomLayers, topLayers);
 }
-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 };
+
+// src/doc/templates/metadata.ts
+var TEMPLATE_METADATA = {
+  title: {
+    label: "Title",
+    description: "A bold opening slide with large title text, perfect for covers and chapters."
+  },
+  sectionHeader: {
+    label: "Section Header",
+    description: "A clean section break with a prominent title and optional subtitle."
+  },
+  statHighlight: {
+    label: "Stat Highlight",
+    description: "Showcases a single key number or metric with supporting context."
+  },
+  quote: {
+    label: "Quote",
+    description: "Displays a stylized pull quote with decorative marks and attribution."
+  },
+  factCard: {
+    label: "Fact Card",
+    description: "Presents a focused fact or insight with a labeled header and body text."
+  },
+  twoColumn: {
+    label: "Two Column",
+    description: "Divides the slide into two equal side-by-side content columns."
+  },
+  dateEvent: {
+    label: "Date Event",
+    description: "Highlights a date-based event or milestone with a prominent date display."
+  },
+  imageWithCaption: {
+    label: "Image with Caption",
+    description: "Displays a full-bleed image with an optional caption below."
+  },
+  leftFeature: {
+    label: "Left Feature",
+    description: "Image on the left, title and body text stacked on the right."
+  },
+  rightFeature: {
+    label: "Right Feature",
+    description: "Image on the right, title and body text stacked on the left."
+  },
+  map: {
+    label: "Map",
+    description: "Embeds an interactive map centered on a geographic location."
+  },
+  fullBleedQuote: {
+    label: "Full Bleed Quote",
+    description: "A full-width quote that spans the entire slide for maximum impact."
+  },
+  list: {
+    label: "List",
+    description: "Renders a bulleted or numbered list in a clean, card-style layout."
+  },
+  photoGrid: {
+    label: "Photo Grid",
+    description: "Arranges multiple photos in a 2\xD72 or 3\xD73 mosaic grid."
+  },
+  definitionCard: {
+    label: "Definition Card",
+    description: "Shows a term and its definition in a structured, dictionary-style card."
+  },
+  comparisonBar: {
+    label: "Comparison Bar",
+    description: "Visualizes two or more values side-by-side with labeled horizontal bars."
+  },
+  pullQuote: {
+    label: "Pull Quote",
+    description: "A stylized pull quote with large decorative marks and centered text."
+  },
+  videoWithCaption: {
+    label: "Video with Caption",
+    description: "Embeds a video player with an optional caption below."
+  },
+  videoPullQuote: {
+    label: "Video Pull Quote",
+    description: "Combines a video panel with a highlighted pull quote side-by-side."
+  },
+  dataTable: {
+    label: "Data Table",
+    description: "Renders tabular data in a clean, styled table with a header row."
+  },
+  diagram: {
+    label: "Diagram",
+    description: "Renders sub-headings as connected nodes \u2014 edit visually as a node-and-edge diagram."
+  },
+  tree: {
+    label: "Tree",
+    description: "Renders an ASCII file-tree / outline fence as a filesystem-style treeview \u2014 edit as an outline."
+  },
+  timeline: {
+    label: "Timeline",
+    description: "Plots events across one or more horizontal tracks with callouts and optional branching links."
+  },
+  layout: {
+    label: "Layout",
+    description: "Free-form 2D canvas \u2014 drag layers into place. Use for one-off block layouts that don't fit a template."
+  },
+  drawing: {
+    label: "Drawing",
+    description: "Free-form sketches \u2014 draw shapes, paths, and text directly on a 2D surface."
+  }
+};
+
+// src/doc/templates/coverBlock.ts
+var COVER_TITLE_BASE_PX = 120;
+var COVER_TITLE_COMFORTABLE_CHARS = 26;
+var COVER_TITLE_MIN_BASE_PX = 62;
+function fitCoverTitleSize(title) {
+  const len = title.trim().length;
+  if (len <= COVER_TITLE_COMFORTABLE_CHARS) return COVER_TITLE_BASE_PX;
+  const scaled = COVER_TITLE_BASE_PX * Math.sqrt(COVER_TITLE_COMFORTABLE_CHARS / len);
+  return Math.max(COVER_TITLE_MIN_BASE_PX, Math.round(scaled));
+}
+function isStandardLightCover(context) {
+  const { theme } = context;
+  return theme.id === "standard" && relativeLuminance(theme.colors.background) > 0.85;
+}
+var COVER_SCRIM_STOPS = [
+  { pos: 0, alpha: 0.95 },
+  { pos: 38, alpha: 0.86 },
+  { pos: 58, alpha: 0.4 },
+  { pos: 78, alpha: 0.1 },
+  { pos: 100, alpha: 0 }
+];
+function coverScrimGradient(background) {
+  const stops = COVER_SCRIM_STOPS.map((s) => `${withAlpha(background, s.alpha)} ${s.pos}%`);
+  return `linear-gradient(0deg, ${stops.join(", ")})`;
+}
+function coverBlock(input, context) {
+  const treatment = themedImageTreatment(context, input.imageTreatment);
+  const { heroSrc, heroAlt, title, subtitle, ambientMotion, heroCredit, heroLicense } = input;
+  const { theme, layout } = context;
+  const standardLightCover = !heroSrc && isStandardLightCover(context);
+  const titleFontSize = themedFontSize(fitCoverTitleSize(title), context, true);
+  const subtitleFontSize = themedFontSize(40, context, false);
+  const layers = [];
+  if (heroSrc) {
+    const imageAnimation = mapAmbientMotion(ambientMotion);
+    layers.push(
+      {
+        type: "image",
+        id: "cover-hero",
+        content: {
+          src: heroSrc,
+          alt: heroAlt || title,
+          fit: "cover",
+          credit: heroCredit,
+          license: heroLicense,
+          ...treatment ? { treatment } : {}
+        },
+        position: { x: 0, y: 0, width: "100%", height: "100%" },
+        animation: imageAnimation
+      },
+      {
+        type: "shape",
+        id: "cover-gradient",
+        content: {
+          shape: "rect",
+          fill: coverScrimGradient(theme.colors.background)
+        },
+        position: { x: 0, y: 0, width: "100%", height: "100%" }
+      }
+    );
+  } else {
+    if (standardLightCover) {
+      layers.push(
+        {
+          type: "shape",
+          id: "cover-bg",
+          content: {
+            shape: "rect",
+            fill: theme.colors.background
+          },
+          position: { x: 0, y: 0, width: "100%", height: "100%" }
+        },
+        {
+          type: "shape",
+          id: "cover-bg-tint",
+          content: {
+            shape: "rect",
+            fill: `radial-gradient(ellipse at 50% 40%, ${withAlpha(theme.colors.primary, 0.16)} 0%, ${withAlpha(theme.colors.primary, 0.07)} 38%, ${withAlpha(theme.colors.primary, 0)} 78%)`
+          },
+          position: { x: 0, y: 0, width: "100%", height: "100%" }
+        }
+      );
+    } else {
+      layers.push({
+        type: "shape",
+        id: "cover-bg",
+        content: {
+          shape: "rect",
+          fill: `radial-gradient(ellipse at 50% 40%, ${theme.colors.primary} 0%, ${theme.colors.background} 100%)`
+        },
+        position: { x: 0, y: 0, width: "100%", height: "100%" }
+      });
     }
+    layers.push({
+      type: "shape",
+      id: "cover-accent",
+      content: {
+        shape: "rect",
+        fill: standardLightCover ? withAlpha(theme.colors.primary, 0.24) : "rgba(255, 255, 255, 0.2)"
+      },
+      position: {
+        x: "35%",
+        y: subtitle ? "42%" : "58%",
+        width: "30%",
+        height: "2px"
+      }
+    });
   }
-  return null;
-}
-function extractBlockquoteText(contents) {
-  if (!contents) return "";
-  for (const node of contents) {
-    if (node.type === "blockquote") return extractPlainText(node).trim();
+  layers.push({
+    type: "text",
+    id: "cover-title",
+    content: {
+      text: title,
+      style: {
+        fontSize: titleFontSize,
+        fontFamily: getThemeFont(context, "title"),
+        fontWeight: "bold",
+        color: theme.colors.text,
+        textAlign: "center",
+        shadow: !standardLightCover
+      }
+    },
+    position: {
+      x: "50%",
+      y: heroSrc ? subtitle ? "70%" : "75%" : subtitle ? layout.primaryY : "50%",
+      anchor: "center",
+      width: layout.maxTextWidth
+    },
+    // No animation delay - shown immediately at rest
+    animation: { type: "fadeIn", duration: 0.8 }
+  });
+  if (subtitle) {
+    layers.push({
+      type: "text",
+      id: "cover-subtitle",
+      content: {
+        text: subtitle,
+        style: {
+          fontSize: subtitleFontSize,
+          fontFamily: getThemeFont(context, "body"),
+          fontWeight: standardLightCover ? "bold" : "normal",
+          color: standardLightCover ? withAlpha(theme.colors.text, 0.78) : theme.colors.textMuted,
+          textAlign: "center",
+          lineHeight: 1.5
+        }
+      },
+      position: {
+        x: "50%",
+        y: heroSrc ? "82%" : layout.secondaryY,
+        anchor: "center",
+        width: layout.maxTextWidth
+      },
+      animation: { type: "fadeIn", duration: 0.8, delay: 0.2 }
+    });
   }
-  return "";
+  return layers;
 }
-function firstParagraph(contents) {
-  if (!contents) return null;
-  const index = contents.findIndex((node) => node.type === "paragraph");
-  if (index < 0) return null;
+function startBlockToCoverInput(config) {
   return {
-    node: contents[index],
-    index
+    heroSrc: config.heroSrc,
+    heroAlt: config.heroAlt,
+    title: config.title,
+    subtitle: config.subtitle,
+    ambientMotion: config.ambientMotion,
+    heroCredit: config.heroCredit,
+    heroLicense: config.heroLicense
   };
 }
-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 expandCoverBlock(config, context) {
+  const input = startBlockToCoverInput(config);
+  return coverBlock(input, context);
 }
-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/index.ts
+function materializeScheduledBlock(sourceBlock, blockIndex, totalBlocks, theme, viewport, persistentLayers, expandedPersistentLayers, registry, failureMode, onDiagnostic) {
+  const materialized = materializeBlockLayersWithRuntime(
+    sourceBlock,
+    {
+      theme,
+      viewport,
+      persistentLayers: persistentLayers ?? false,
+      blockIndex,
+      totalBlocks,
+      failureMode
+    },
+    { registry, expandedPersistentLayers }
+  );
+  if (materialized.diagnostic) {
+    onDiagnostic?.(materialized.diagnostic, sourceBlock, blockIndex);
   }
-  const trimmedHeading = headingText.trim();
-  const headingStat = matchNumberHighlight(trimmedHeading);
-  if (headingStat && headingStat.index === 0 && headingStat.end === trimmedHeading.length) {
-    return { stat: headingText, description: bodyText3 || headingText };
+  const expandedBlock = isTemplateBlock(sourceBlock) ? {
+    id: sourceBlock.id,
+    startTime: 0,
+    duration: sourceBlock.duration,
+    audioSegment: sourceBlock.audioSegment,
+    ...materialized.layers.length > 0 ? { layers: materialized.layers } : {},
+    transition: sourceBlock.transition,
+    template: sourceBlock.template
+  } : {
+    ...cloneData(sourceBlock),
+    ...materialized.layers.length > 0 ? { layers: materialized.layers } : {}
+  };
+  const transition = resolveBlockTransition(expandedBlock, theme, blockIndex);
+  if (transition !== expandedBlock.transition) {
+    expandedBlock.transition = transition;
   }
-  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 expandedBlock;
+}
+function expandDocBlocks(blocks, options = {}) {
+  const opts = options;
+  const theme = opts.theme ?? DEFAULT_THEME;
+  const viewport = opts.viewport ?? VIEWPORT_PRESETS.landscape;
+  const {
+    persistentLayers,
+    audioSegments,
+    customTemplates,
+    failureMode = "fallback",
+    onDiagnostic
+  } = opts;
+  const totalBlocks = blocks.length;
+  const registry = customTemplates && customTemplates.length > 0 ? buildRegistry(customTemplates) : templateRegistry;
+  const effectivePersistentLayers = persistentLayers === false ? void 0 : persistentLayers ?? theme.persistentLayers;
+  const expandedPersistentLayers = effectivePersistentLayers ? {
+    bottomLayers: expandPersistentLayers(effectivePersistentLayers.bottomLayers, theme),
+    topLayers: expandPersistentLayers(effectivePersistentLayers.topLayers, theme)
+  } : void 0;
+  if (!audioSegments || audioSegments.length === 0) {
+    let currentTime = 0;
+    return blocks.map((block, index) => {
+      const expandedBlock = materializeScheduledBlock(
+        block,
+        index,
+        totalBlocks,
+        theme,
+        viewport,
+        effectivePersistentLayers,
+        expandedPersistentLayers,
+        registry,
+        failureMode,
+        onDiagnostic
       );
-      return {
-        stat: bodyStat.value,
-        description: description || headingText || bodyStat.value
-      };
-    }
+      expandedBlock.startTime = currentTime;
+      currentTime += expandedBlock.duration;
+      return expandedBlock;
+    });
   }
-  return { stat: headingText, description: bodyText3 || headingText };
-}
-function deriveTemplateInputs(templateName, headingText, contents, options = {}) {
-  const placeholders = options.placeholders === true;
-  const bodyText3 = extractBodyPlainText(contents);
-  switch (templateName) {
-    case "statHighlight":
-      return deriveStatHighlightInputs(headingText, contents, bodyText3);
-    case "quote": {
-      const quote = extractBlockquoteText(contents) || bodyText3 || headingText;
-      return { quote };
-    }
-    case "fullBleedQuote":
-    case "pullQuote": {
-      const text = extractBlockquoteText(contents) || bodyText3 || headingText;
-      return { text };
+  const blocksBySegment = /* @__PURE__ */ new Map();
+  blocks.forEach((block, index) => {
+    const segmentIndex = block.audioSegment ?? 0;
+    if (!blocksBySegment.has(segmentIndex)) {
+      blocksBySegment.set(segmentIndex, []);
     }
-    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 };
-      return placeholders ? { items: ["Item 1", "Item 2", "Item 3"] } : null;
+    blocksBySegment.get(segmentIndex).push({ block, originalIndex: index });
+  });
+  const expandedBlocks = new Array(blocks.length);
+  for (const [segmentIndex, segmentBlocks] of blocksBySegment) {
+    const audioSegment = audioSegments[segmentIndex];
+    if (!audioSegment) {
+      let offsetTime = 0;
+      for (const { block, originalIndex } of segmentBlocks) {
+        const expandedBlock = materializeScheduledBlock(
+          block,
+          originalIndex,
+          totalBlocks,
+          theme,
+          viewport,
+          effectivePersistentLayers,
+          expandedPersistentLayers,
+          registry,
+          failureMode,
+          onDiagnostic
+        );
+        expandedBlock.startTime = offsetTime;
+        offsetTime += expandedBlock.duration;
+        expandedBlocks[originalIndex] = expandedBlock;
+      }
+      continue;
     }
-    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;
-      return placeholders ? { headers: ["Column"], rows: [["Data"]] } : null;
+    const sectionHeaderBlocks = [];
+    const contentBlocks = [];
+    for (const item of segmentBlocks) {
+      const templateBlock = item.block;
+      if (templateBlock.template === "sectionHeader") {
+        sectionHeaderBlocks.push(item);
+      } else {
+        contentBlocks.push(item);
+      }
     }
-    case "imageWithCaption": {
-      const img = extractFirstImage(contents);
-      if (!img) return placeholders ? { caption: headingText } : null;
-      return { imageSrc: img.src, imageAlt: img.alt || headingText, caption: headingText };
+    const fixedDuration = sectionHeaderBlocks.reduce((sum, { block }) => {
+      return sum + (block.duration ?? 0);
+    }, 0);
+    const contentBlockDuration = contentBlocks.reduce((sum, { block }) => {
+      return sum + (block.duration ?? 0);
+    }, 0);
+    const remainingDuration = audioSegment.duration - fixedDuration;
+    const scaleFactor = contentBlockDuration > 0 && remainingDuration > 0 ? remainingDuration / contentBlockDuration : 1;
+    const expandedInfos = [];
+    for (const { block, originalIndex } of segmentBlocks) {
+      const expandedBlock = materializeScheduledBlock(
+        block,
+        originalIndex,
+        totalBlocks,
+        theme,
+        viewport,
+        effectivePersistentLayers,
+        expandedPersistentLayers,
+        registry,
+        failureMode,
+        onDiagnostic
+      );
+      const templateBlock = block;
+      expandedInfos.push({
+        block: expandedBlock,
+        originalIndex,
+        templateBlock,
+        hasSourceTiming: typeof templateBlock.sourceStartTime === "number"
+      });
     }
-    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
-      };
+    const hasAnySourceTiming = expandedInfos.some((info) => info.hasSourceTiming);
+    expandedInfos.sort((a, b) => {
+      if (hasAnySourceTiming) {
+        const aIsHeader = a.templateBlock.template === "sectionHeader";
+        const bIsHeader = b.templateBlock.template === "sectionHeader";
+        if (aIsHeader && !bIsHeader) return -1;
+        if (!aIsHeader && bIsHeader) return 1;
+        if (a.hasSourceTiming && b.hasSourceTiming) {
+          return a.templateBlock.sourceStartTime - b.templateBlock.sourceStartTime;
+        }
+        if (a.hasSourceTiming && !b.hasSourceTiming) return -1;
+        if (!a.hasSourceTiming && b.hasSourceTiming) return 1;
+      }
+      return a.originalIndex - b.originalIndex;
+    });
+    let offsetWithinSegment = 0;
+    for (let i = 0; i < expandedInfos.length; i++) {
+      const info = expandedInfos[i];
+      const { block: expandedBlock, templateBlock } = info;
+      if (info.hasSourceTiming) {
+        const sourceStart = templateBlock.sourceStartTime;
+        expandedBlock.startTime = audioSegment.startTime + sourceStart;
+        if (typeof templateBlock.sourceDuration === "number") {
+          expandedBlock.duration = Math.max(5, templateBlock.sourceDuration);
+        }
+        offsetWithinSegment = sourceStart + expandedBlock.duration;
+      } else if (templateBlock.template === "sectionHeader") {
+        expandedBlock.startTime = audioSegment.startTime + offsetWithinSegment;
+        offsetWithinSegment += expandedBlock.duration;
+      } else {
+        expandedBlock.startTime = audioSegment.startTime + offsetWithinSegment;
+        const scaledDuration = expandedBlock.duration * scaleFactor;
+        expandedBlock.duration = scaledDuration;
+        offsetWithinSegment += scaledDuration;
+      }
+      expandedBlocks[info.originalIndex] = expandedBlock;
     }
-    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
-      };
+    const segmentExpandedBlocks = expandedInfos.map((info) => expandedBlocks[info.originalIndex]).sort((a, b) => a.startTime - b.startTime);
+    for (let i = 0; i < segmentExpandedBlocks.length - 1; i++) {
+      const current = segmentExpandedBlocks[i];
+      const next = segmentExpandedBlocks[i + 1];
+      const currentEnd = current.startTime + current.duration;
+      if (currentEnd > next.startTime) {
+        current.duration = next.startTime - current.startTime;
+      } else if (currentEnd < next.startTime - 0.5) {
+        current.duration = Math.max(0.1, next.startTime - current.startTime);
+      }
     }
-    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 } : {} };
+    const MIN_TRANSITION_GAP = 5;
+    const segmentEnd = audioSegment.startTime + audioSegment.duration;
+    while (segmentExpandedBlocks.length > 1) {
+      const lastBlock = segmentExpandedBlocks[segmentExpandedBlocks.length - 1];
+      const timeFromLastToEnd = segmentEnd - lastBlock.startTime;
+      if (timeFromLastToEnd < MIN_TRANSITION_GAP && lastBlock.template !== "sectionHeader") {
+        const prevBlock = segmentExpandedBlocks[segmentExpandedBlocks.length - 2];
+        prevBlock.duration = segmentEnd - prevBlock.startTime;
+        lastBlock.duration = 0;
+        lastBlock.startTime = segmentEnd;
+        segmentExpandedBlocks.pop();
+      } else {
+        if (lastBlock.startTime + lastBlock.duration < segmentEnd) {
+          lastBlock.duration = segmentEnd - lastBlock.startTime;
+        }
+        break;
+      }
     }
-    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 } : {} };
+    if (segmentExpandedBlocks.length === 1) {
+      const onlyBlock = segmentExpandedBlocks[0];
+      if (onlyBlock.startTime + onlyBlock.duration < segmentEnd) {
+        onlyBlock.duration = segmentEnd - onlyBlock.startTime;
+      }
     }
-    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 } : {} };
+    let changed = true;
+    while (changed) {
+      changed = false;
+      for (let i = segmentExpandedBlocks.length - 1; i >= 1; i--) {
+        const block = segmentExpandedBlocks[i];
+        if (block.duration > 0 && block.duration < MIN_TRANSITION_GAP) {
+          const prev = segmentExpandedBlocks[i - 1];
+          const blockEnd = block.startTime + block.duration;
+          prev.duration = blockEnd - prev.startTime;
+          block.duration = 0;
+          block.startTime = segmentEnd;
+          segmentExpandedBlocks.splice(i, 1);
+          changed = true;
+          break;
         }
       }
-      const list = findFirstList(contents);
-      if (list) {
-        const { items } = treeToTemplateData(treeFromMarkdownList(list));
-        if (items.length > 0) return { items, ...headingText ? { title: headingText } : {} };
+    }
+    const MAX_BLOCK_DURATION = 20;
+    for (let i = 0; i < segmentExpandedBlocks.length; i++) {
+      const block = segmentExpandedBlocks[i];
+      if (block.duration > MAX_BLOCK_DURATION) {
+        const numParts = Math.ceil(block.duration / MAX_BLOCK_DURATION);
+        const partDuration = block.duration / numParts;
+        if (partDuration >= MIN_TRANSITION_GAP) {
+          block.duration = partDuration;
+          for (let p = 1; p < numParts; p++) {
+            const splitBlock = {
+              id: `${block.id}-split-${p}`,
+              startTime: block.startTime + p * partDuration,
+              duration: partDuration,
+              audioSegment: block.audioSegment,
+              layers: (block.layers ?? []).map((layer) => ({
+                ...cloneData(layer),
+                id: `${layer.id}-split-${p}`
+              })),
+              transition: { type: "dissolve", duration: 1 },
+              template: block.template
+            };
+            expandedBlocks.push(splitBlock);
+          }
+        }
       }
-      return placeholders ? {} : null;
     }
-    default:
-      return placeholders ? {} : null;
   }
+  return expandedBlocks.filter((block) => block && block.duration > 0);
+}
+function getAvailableTemplates() {
+  return Object.keys(templateRegistry);
+}
+function hasTemplate(name) {
+  return resolveTemplateName(name) in templateRegistry;
 }
 
 // src/doc/customTemplatesFrontmatter.ts
@@ -6602,15 +7477,6 @@ function renameKeys(value, map) {
 function isDefaultViewport(v) {
   return !v || v.width === DEFAULT_VIEWPORT.width && v.height === DEFAULT_VIEWPORT.height;
 }
-function base64ToUtf8(b64) {
-  if (typeof globalThis.atob === "function") {
-    const binary = globalThis.atob(b64);
-    const bytes = new Uint8Array(binary.length);
-    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
-    return new TextDecoder().decode(bytes);
-  }
-  return Buffer.from(b64, "base64").toString("utf-8");
-}
 function readCustomTemplatesFromFrontmatter(frontmatter) {
   if (!frontmatter) return void 0;
   const candidates = normalizeCandidates(frontmatter[FRONTMATTER_CUSTOM_TEMPLATES_KEY]);
@@ -7090,10 +7956,18 @@ function expandStandaloneAnnotations(blocks, makeId, defaultDuration) {
       makeId,
       defaultDuration
     });
-    if (produced.length > 0) {
-      block.contents = leading;
+    if (produced.length === 0) {
+      out.push(block);
+      continue;
+    }
+    block.contents = leading;
+    const nestable = (block.children?.length ?? 0) > 0 && !isContainerTemplate(block.template);
+    if (nestable) {
+      block.children = [...produced, ...block.children];
+      out.push(block);
+    } else {
+      out.push(block, ...produced);
     }
-    out.push(block, ...produced);
   }
   return out;
 }
@@ -7465,8 +8339,10 @@ function applyAutoTemplates(blocks, resolvedDefault, state) {
     if (block.sourceHeading && !annotated && block.template === resolvedDefault) {
       const profile = profileBlockContents(block.contents ?? []);
       const picked = pickAutoTemplate(profile, state.featureIndex);
-      if (picked) {
-        const inputs = deriveTemplateInputs(picked, block.title ?? "", block.contents);
+      if (picked && autoTemplatePreservesContent(picked, block.contents)) {
+        const inputs = deriveTemplateInputs(picked, block.title ?? "", block.contents, {
+          preserveSourceHeading: true
+        });
         if (inputs) {
           if (picked === "leftFeature" || picked === "rightFeature") state.featureIndex += 1;
           block.template = picked;
@@ -7814,7 +8690,11 @@ function buildNarrationTimingJson(script, alignment, durationSec, options) {
     duration: Number.isFinite(durationSec) && durationSec >= 0 ? durationSec : 0,
     bookmarks,
     blocks,
-    ...options?.cameraOffsetSec !== void 0 ? { cameraOffsetSec: options.cameraOffsetSec } : {},
+    // Write only what `parseNarrationTimingJson` will read back, so the codec
+    // is a round-trip pair. A non-finite value would serialize to `null`
+    // (JSON has no NaN) and be dropped on parse anyway — omitting it here
+    // keeps the emitted sidecar honest rather than carrying a dead field.
+    ...finiteNumber(options?.cameraOffsetSec) ? { cameraOffsetSec: options.cameraOffsetSec } : {},
     generator: {
       name: "squisq-teleprompter",
       method: "dsp-align",
@@ -7825,6 +8705,9 @@ function buildNarrationTimingJson(script, alignment, durationSec, options) {
 function finiteNonNegative(value) {
   return typeof value === "number" && Number.isFinite(value) && value >= 0;
 }
+function finiteNumber(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
 function parseNarrationTimingJson(data) {
   try {
     const text = typeof data === "string" ? data : new TextDecoder().decode(data instanceof Uint8Array ? data : new Uint8Array(data));
@@ -7878,7 +8761,7 @@ function parseNarrationTimingJson(data) {
       duration: raw.duration,
       bookmarks,
       blocks,
-      ...finiteNonNegative(raw.cameraOffsetSec) ? { cameraOffsetSec: raw.cameraOffsetSec } : {},
+      ...finiteNumber(raw.cameraOffsetSec) ? { cameraOffsetSec: raw.cameraOffsetSec } : {},
       ...typeof raw.generator === "object" && raw.generator !== null ? { generator: raw.generator } : {}
     };
   } catch {
@@ -7908,11 +8791,11 @@ export {
   themedScrim,
   getTemplateHint,
   titleBlock,
-  sectionHeader,
   DEFAULT_LAYOUT,
   getAccentLayout,
   createAccentLayers,
   adjustY,
+  sectionHeader,
   statHighlight,
   quoteBlock,
   factCard,
@@ -7957,13 +8840,6 @@ export {
   coerceTemplateParams,
   lintTemplateParams,
   fallbackBlockLayers,
-  materializeBlockLayers,
-  TEMPLATE_METADATA,
-  coverBlock,
-  expandCoverBlock,
-  expandDocBlocks,
-  getAvailableTemplates,
-  hasTemplate,
   ASCII_CHAR_W,
   ASCII_CHAR_H,
   asciiCellToCanvas,
@@ -7980,9 +8856,21 @@ export {
   extractListItems,
   extractImages,
   extractFirstImage,
+  extractEmbeddedVideos,
+  extractFirstEmbeddedVideo,
   extractTableFromContents,
   extractBlockquoteText,
+  autoTemplatePreservesContent,
   deriveTemplateInputs,
+  BLOCK_MEDIA_LAYOUT_POLICIES,
+  getBlockMediaLayoutPolicy,
+  materializeBlockLayers,
+  TEMPLATE_METADATA,
+  coverBlock,
+  expandCoverBlock,
+  expandDocBlocks,
+  getAvailableTemplates,
+  hasTemplate,
   readCustomTemplatesFromFrontmatter,
   writeCustomTemplatesToFrontmatter,
   readCustomThemesFromFrontmatter,
@@ -8010,4 +8898,3 @@ export {
   buildNarrationTimingJson,
   parseNarrationTimingJson
 };
-//# sourceMappingURL=chunk-JI77MGAK.js.map