@bendyline/squisq 0.1.1

package/dist/chunk-PJ7AODIM.js

@@ -0,0 +1,3040 @@
+import {
+  DEFAULT_THEME,
+  VIEWPORT_PRESETS,
+  createTemplateContext,
+  getTwoColumnPositions,
+  isPersistentLayerTemplate,
+  isTemplateBlock,
+  scaledFontSize2 as scaledFontSize
+} from "./chunk-O5HCIUAD.js";
+import {
+  extractPlainText
+} from "./chunk-QWVRN6I4.js";
+
+// src/doc/templates/persistentLayers.ts
+var GRADIENT_PRESETS = {
+  "dark-vignette": "radial-gradient(ellipse at center, rgba(26,32,44,0.8) 0%, rgba(0,0,0,0.95) 100%)",
+  "radial-dark": "radial-gradient(ellipse at center, #1a202c 0%, #000000 100%)",
+  "warm-sunset": "linear-gradient(135deg, rgba(124,58,48,0.9) 0%, rgba(26,32,44,0.95) 100%)",
+  "cool-blue": "linear-gradient(135deg, rgba(26,54,93,0.9) 0%, rgba(26,32,44,0.95) 100%)",
+  "earth-tones": "linear-gradient(135deg, rgba(68,51,34,0.9) 0%, rgba(26,32,44,0.95) 100%)"
+};
+function expandSolidBackground(config) {
+  return {
+    type: "shape",
+    id: "persistent-bg-solid",
+    content: {
+      shape: "rect",
+      fill: config.color
+    },
+    position: { x: 0, y: 0, width: "100%", height: "100%" }
+  };
+}
+function expandGradientBackground(config) {
+  const gradient = config.gradient ?? GRADIENT_PRESETS[config.preset ?? "dark-vignette"];
+  return {
+    type: "shape",
+    id: "persistent-bg-gradient",
+    content: {
+      shape: "rect",
+      fill: gradient
+    },
+    position: { x: 0, y: 0, width: "100%", height: "100%" }
+  };
+}
+function expandImageBackground(config) {
+  const layers = [];
+  const opacity = config.opacity ?? 0.4;
+  const imageLayer = {
+    type: "image",
+    id: "persistent-bg-image",
+    content: {
+      src: config.src,
+      alt: "Background",
+      fit: "cover"
+    },
+    position: { x: 0, y: 0, width: "100%", height: "100%" },
+    animation: config.ambientMotion ? {
+      type: config.ambientMotion,
+      duration: 30
+      // Long ambient motion
+    } : void 0
+  };
+  layers.push(imageLayer);
+  layers.push({
+    type: "shape",
+    id: "persistent-bg-overlay",
+    content: {
+      shape: "rect",
+      fill: `rgba(0,0,0,${0.5 + (1 - opacity) * 0.3})`
+    },
+    position: { x: 0, y: 0, width: "100%", height: "100%" }
+  });
+  return layers;
+}
+function expandPatternBackground(config) {
+  const opacity = config.opacity ?? 0.1;
+  const color = config.color ?? `rgba(255,255,255,${opacity})`;
+  return {
+    type: "shape",
+    id: "persistent-bg-pattern",
+    content: {
+      shape: "rect",
+      fill: color
+    },
+    position: { x: 0, y: 0, width: "100%", height: "100%" }
+  };
+}
+function expandTitleCaption(config) {
+  const layers = [];
+  const fontSize = config.fontSize ?? 18;
+  const hasSubtitle = !!config.subtitle;
+  const isBottom = config.position.includes("bottom");
+  const isLeft = config.position.includes("left");
+  const pad = 3;
+  const pillHeight = hasSubtitle ? "15%" : "7%";
+  const bgYPos = isBottom ? hasSubtitle ? "78%" : "84%" : "2%";
+  const bgXPos = isLeft ? `${pad}%` : "68%";
+  const thumbW = hasSubtitle ? "6%" : "5%";
+  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 titleYPos = isBottom ? hasSubtitle ? "80%" : "86%" : "4%";
+  layers.push({
+    type: "shape",
+    id: "persistent-caption-bg",
+    content: {
+      shape: "rect",
+      fill: "rgba(0,0,0,0.6)",
+      borderRadius: 8
+    },
+    position: {
+      x: bgXPos,
+      y: bgYPos,
+      width: config.showThumbnail ? "30%" : "28%",
+      height: pillHeight
+    }
+  });
+  if (config.showThumbnail && config.thumbnailSrc) {
+    const thumbX = isLeft ? `${pad + thumbPad}%` : "93%";
+    const thumbY = isBottom ? hasSubtitle ? `${78 + thumbPad}%` : "85%" : "3%";
+    layers.push({
+      type: "image",
+      id: "persistent-caption-thumb",
+      content: {
+        src: config.thumbnailSrc,
+        alt: "Article thumbnail",
+        fit: "cover"
+      },
+      position: {
+        x: thumbX,
+        y: thumbY,
+        width: thumbW,
+        height: thumbH
+      }
+    });
+  }
+  layers.push({
+    type: "text",
+    id: "persistent-caption-title",
+    content: {
+      text: config.title,
+      style: {
+        fontSize,
+        fontWeight: "bold",
+        color: "rgba(255,255,255,0.9)",
+        textAlign: isLeft ? "left" : "right",
+        maxLines: 1
+      }
+    },
+    position: {
+      x: textX,
+      y: titleYPos,
+      width: textWidth
+    }
+  });
+  if (hasSubtitle) {
+    const subtitleYPos = isBottom ? "85.5%" : "8%";
+    layers.push({
+      type: "text",
+      id: "persistent-caption-subtitle",
+      content: {
+        text: config.subtitle,
+        style: {
+          fontSize: 18,
+          fontWeight: "normal",
+          color: "rgba(255,255,255,0.55)",
+          textAlign: isLeft ? "left" : "right"
+        }
+      },
+      position: {
+        x: textX,
+        y: subtitleYPos,
+        width: textWidth
+      }
+    });
+  }
+  return layers;
+}
+function expandCornerBranding(config) {
+  const isBottom = config.position.includes("bottom");
+  const isLeft = config.position.includes("left");
+  const xPos = isLeft ? "3%" : "90%";
+  const yPos = isBottom ? "94%" : "3%";
+  if (config.isImage) {
+    return {
+      type: "image",
+      id: "persistent-branding",
+      content: {
+        src: config.content,
+        alt: "Branding",
+        fit: "contain"
+      },
+      position: {
+        x: xPos,
+        y: yPos,
+        width: "8%",
+        height: "4%"
+      }
+    };
+  }
+  return {
+    type: "text",
+    id: "persistent-branding",
+    content: {
+      text: config.content,
+      style: {
+        fontSize: 14,
+        fontWeight: "normal",
+        color: "rgba(255,255,255,0.6)"
+      }
+    },
+    position: {
+      x: xPos,
+      y: yPos
+    }
+  };
+}
+function expandProgressIndicator(config) {
+  const color = config.color ?? "rgba(255,255,255,0.3)";
+  const y = config.position === "top" ? "1%" : "98%";
+  return {
+    type: "shape",
+    id: "persistent-progress",
+    content: {
+      shape: "rect",
+      fill: color,
+      borderRadius: 2
+    },
+    position: {
+      x: "5%",
+      y,
+      width: "90%",
+      height: "0.5%"
+    }
+  };
+}
+function expandPersistentLayer(layer) {
+  if (!isPersistentLayerTemplate(layer)) {
+    return [layer];
+  }
+  const template = layer;
+  const config = template.config;
+  switch (config.type) {
+    case "solidBackground":
+      return [expandSolidBackground(config)];
+    case "gradientBackground":
+      return [expandGradientBackground(config)];
+    case "imageBackground":
+      return expandImageBackground(config);
+    case "patternBackground":
+      return [expandPatternBackground(config)];
+    case "titleCaption":
+      return expandTitleCaption(config);
+    case "cornerBranding":
+      return [expandCornerBranding(config)];
+    case "progressIndicator":
+      return [expandProgressIndicator(config)];
+    default:
+      console.warn("Unknown persistent layer template:", config.type);
+      return [];
+  }
+}
+function expandPersistentLayers(layers) {
+  if (!layers || layers.length === 0) {
+    return [];
+  }
+  return layers.reduce((acc, layer) => acc.concat(expandPersistentLayer(layer)), []);
+}
+function getDocStyleConfig(preset, articleTitle, heroSrc, subtitle) {
+  switch (preset) {
+    case "minimal":
+      return {};
+    case "documentary":
+      return {
+        bottomLayers: [
+          {
+            template: "gradientBackground",
+            config: { type: "gradientBackground", preset: "dark-vignette" }
+          }
+        ],
+        topLayers: [
+          {
+            template: "titleCaption",
+            config: {
+              type: "titleCaption",
+              title: articleTitle,
+              subtitle,
+              position: "bottom-left",
+              fontSize: 24,
+              showThumbnail: !!heroSrc,
+              thumbnailSrc: heroSrc
+            }
+          }
+        ]
+      };
+    case "branded":
+      return {
+        bottomLayers: [
+          {
+            template: "gradientBackground",
+            config: { type: "gradientBackground", preset: "cool-blue" }
+          }
+        ],
+        topLayers: [
+          {
+            template: "titleCaption",
+            config: {
+              type: "titleCaption",
+              title: articleTitle,
+              subtitle,
+              position: "bottom-left",
+              fontSize: 26,
+              showThumbnail: !!heroSrc,
+              thumbnailSrc: heroSrc
+            }
+          }
+        ]
+      };
+    case "cinematic":
+      return {
+        bottomLayers: heroSrc ? [
+          {
+            template: "imageBackground",
+            config: {
+              type: "imageBackground",
+              src: heroSrc,
+              blur: 12,
+              opacity: 0.3,
+              ambientMotion: "zoomIn"
+            }
+          }
+        ] : [
+          {
+            template: "gradientBackground",
+            config: { type: "gradientBackground", preset: "radial-dark" }
+          }
+        ],
+        topLayers: [
+          {
+            template: "titleCaption",
+            config: {
+              type: "titleCaption",
+              title: articleTitle,
+              subtitle,
+              position: "bottom-right",
+              fontSize: 22
+            }
+          }
+        ]
+      };
+    case "clean":
+      return {
+        bottomLayers: [
+          {
+            template: "solidBackground",
+            config: { type: "solidBackground", color: "#1a202c" }
+          }
+        ]
+      };
+    default:
+      return {};
+  }
+}
+
+// src/doc/templates/titleBlock.ts
+function titleBlock(input, context) {
+  const { title, subtitle, backgroundColor } = input;
+  const { theme, layout } = context;
+  const titleFontSize = scaledFontSize(96, context, true);
+  const subtitleFontSize = scaledFontSize(36, context, false);
+  const baseBg = backgroundColor || theme.colors.primary;
+  const layers = [
+    // Background — radial gradient for depth instead of flat color
+    {
+      type: "shape",
+      id: "bg",
+      content: {
+        shape: "rect",
+        fill: `radial-gradient(ellipse at 50% 40%, ${baseBg} 0%, ${theme.colors.background} 100%)`
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    },
+    // Subtle decorative line above title
+    {
+      type: "shape",
+      id: "accent-line",
+      content: {
+        shape: "rect",
+        fill: "rgba(255, 255, 255, 0.2)"
+      },
+      position: {
+        x: "40%",
+        y: subtitle ? "28%" : "38%",
+        width: "20%",
+        height: "2px"
+      }
+    },
+    // Title
+    {
+      type: "text",
+      id: "title",
+      content: {
+        text: title,
+        style: {
+          fontSize: titleFontSize,
+          fontWeight: "bold",
+          color: theme.colors.text,
+          textAlign: "center",
+          shadow: true
+        }
+      },
+      position: {
+        x: "50%",
+        y: subtitle ? layout.primaryY : "50%",
+        anchor: "center",
+        width: layout.maxTextWidth
+      },
+      animation: { type: "fadeIn", duration: 2 }
+    }
+  ];
+  if (subtitle) {
+    layers.push({
+      type: "text",
+      id: "subtitle",
+      content: {
+        text: subtitle,
+        style: {
+          fontSize: subtitleFontSize,
+          color: theme.colors.textMuted,
+          textAlign: "center",
+          lineHeight: 1.5
+        }
+      },
+      position: {
+        x: "50%",
+        y: layout.secondaryY,
+        anchor: "center",
+        width: layout.maxTextWidth
+      },
+      animation: { type: "fadeIn", duration: 1.5, delay: 1 }
+    });
+  }
+  return layers;
+}
+
+// src/doc/utils/themeUtils.ts
+var FALLBACK_COLOR_SCHEME = {
+  bg: "#1a365d",
+  text: "#63b3ed",
+  accent: "#90cdf4"
+};
+function resolveColorScheme(context, name) {
+  const schemes = context.theme.colorSchemes;
+  if (name && name in schemes) return schemes[name];
+  const keys = Object.keys(schemes);
+  if (keys.length > 0) return schemes[keys[0]];
+  return FALLBACK_COLOR_SCHEME;
+}
+function themedFontSize(basePx, context, isTitle = false) {
+  const { fontScale, layout, theme } = context;
+  const layoutScale = isTitle ? layout.titleScale : layout.bodyScale;
+  const themeScale = isTitle ? theme.typography.titleScale ?? 1 : theme.typography.bodyScale ?? 1;
+  return Math.round(basePx * fontScale * layoutScale * themeScale);
+}
+function scaleAnimationDuration(baseDuration, context) {
+  const speed = context.theme.style.animationSpeed ?? 1;
+  return baseDuration * speed;
+}
+function getDefaultAnimation(context, layerType) {
+  const rs = context.theme.renderStyle;
+  return layerType === "text" ? rs.defaultTextAnimation : rs.defaultImageAnimation;
+}
+function shouldUseShadow(context) {
+  return context.theme.style.textShadow ?? true;
+}
+function getOverlayOpacity(context) {
+  return context.theme.style.overlayOpacity ?? 0.5;
+}
+function getTemplateHint(context, templateName, key, fallback) {
+  const hints = context.theme.renderStyle.templateHints;
+  if (!hints) return fallback;
+  const tplHints = hints[templateName];
+  if (!tplHints || !(key in tplHints)) return fallback;
+  return tplHints[key];
+}
+
+// src/doc/templates/sectionHeader.ts
+function sectionHeader(input, context) {
+  const { title, colorScheme = "blue", imageSrc, imageAlt, ambientMotion } = input;
+  const { layout } = context;
+  const colors = resolveColorScheme(context, colorScheme);
+  const titleFontSize = scaledFontSize(72, context, true);
+  const layers = [];
+  if (imageSrc) {
+    layers.push({
+      type: "image",
+      id: "bg-image",
+      content: {
+        src: imageSrc,
+        alt: imageAlt || title,
+        fit: "cover"
+      },
+      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: "rgba(0, 0, 0, 0.5)"
+      },
+      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,
+        fontWeight: "bold",
+        color: imageSrc ? "#ffffff" : colors.text,
+        textAlign: "center",
+        shadow: true
+      }
+    },
+    position: {
+      x: "50%",
+      y: "50%",
+      anchor: "center",
+      width: layout.maxTextWidth
+    },
+    animation: { type: "fadeIn", duration: 1.5 }
+  });
+  return layers;
+}
+
+// src/doc/templates/accentImage.ts
+var PERCENTAGE_RE = /^(\d+(?:\.\d+)?)\s*%?$/;
+var DEFAULT_LAYOUT = {
+  textCenterX: "50%",
+  textWidth: "85%",
+  textYAdjust: 0,
+  adjustY: false
+};
+function mapAmbientMotion(motion, duration) {
+  if (!motion) return void 0;
+  const base = duration !== void 0 ? { duration } : {};
+  switch (motion) {
+    case "zoomIn":
+    case "in":
+      return { type: "slowZoom", direction: "in", ...base };
+    case "zoomOut":
+    case "out":
+      return { type: "slowZoom", direction: "out", ...base };
+    case "panLeft":
+    case "left":
+      return { type: "slowZoom", panDirection: "left", ...base };
+    case "panRight":
+    case "right":
+      return { type: "slowZoom", panDirection: "right", ...base };
+    default:
+      return void 0;
+  }
+}
+var STRIP_SIZE = 35;
+var STRIP_SIZE_PCT = `${STRIP_SIZE}%`;
+function getAccentLayout(position) {
+  switch (position) {
+    case "left-strip":
+      return {
+        textCenterX: `${50 + STRIP_SIZE / 2}%`,
+        // Shift center right
+        textWidth: `${100 - STRIP_SIZE - 8}%`,
+        // Leave margin
+        textYAdjust: 0,
+        adjustY: false
+      };
+    case "right-strip":
+      return {
+        textCenterX: `${50 - STRIP_SIZE / 2}%`,
+        // Shift center left
+        textWidth: `${100 - STRIP_SIZE - 8}%`,
+        textYAdjust: 0,
+        adjustY: false
+      };
+    case "bottom-strip":
+      return {
+        textCenterX: "50%",
+        textWidth: "85%",
+        textYAdjust: -10,
+        // Shift content up by 10%
+        adjustY: true
+      };
+    case "corner-inset":
+      return {
+        textCenterX: "45%",
+        // Slight shift to avoid corner
+        textWidth: "70%",
+        textYAdjust: 0,
+        adjustY: false
+      };
+    default:
+      return DEFAULT_LAYOUT;
+  }
+}
+function createAccentLayers(accent, slideId) {
+  const layers = [];
+  const { src, alt, position, ambientMotion, credit, license } = accent;
+  switch (position) {
+    case "left-strip":
+      layers.push(createStripImage(src, alt, "left", slideId, ambientMotion, credit, license));
+      layers.push(createStripGradient("left", slideId));
+      break;
+    case "right-strip":
+      layers.push(createStripImage(src, alt, "right", slideId, ambientMotion, credit, license));
+      layers.push(createStripGradient("right", slideId));
+      break;
+    case "bottom-strip":
+      layers.push(createBottomStripImage(src, alt, slideId, ambientMotion, credit, license));
+      layers.push(createBottomStripGradient(slideId));
+      break;
+    case "corner-inset":
+      layers.push(createCornerInsetImage(src, alt, slideId, ambientMotion, credit, license));
+      layers.push(createCornerVignette(slideId));
+      break;
+  }
+  return layers;
+}
+function createStripImage(src, alt, side, slideId, ambientMotion, credit, license) {
+  return {
+    type: "image",
+    id: `${slideId}-accent-img`,
+    content: {
+      src,
+      alt,
+      fit: "cover",
+      credit,
+      license
+    },
+    position: {
+      x: side === "left" ? 0 : `${100 - STRIP_SIZE}%`,
+      y: 0,
+      width: STRIP_SIZE_PCT,
+      height: "100%"
+    },
+    animation: mapAmbientMotion(ambientMotion, 15)
+  };
+}
+function createStripGradient(side, slideId) {
+  const gradientId = side === "left" ? "accent-gradient-left" : "accent-gradient-right";
+  return {
+    type: "shape",
+    id: `${slideId}-accent-fade`,
+    content: {
+      shape: "rect",
+      // SVG gradient will be handled by the renderer
+      // Using a semi-transparent overlay as fallback
+      fill: `url(#${gradientId})`
+    },
+    position: {
+      x: side === "left" ? `${STRIP_SIZE - 8}%` : `${100 - STRIP_SIZE}%`,
+      y: 0,
+      width: "10%",
+      height: "100%"
+    }
+  };
+}
+function createBottomStripImage(src, alt, slideId, ambientMotion, credit, license) {
+  return {
+    type: "image",
+    id: `${slideId}-accent-img`,
+    content: {
+      src,
+      alt,
+      fit: "cover",
+      credit,
+      license
+    },
+    position: {
+      x: 0,
+      y: `${100 - STRIP_SIZE}%`,
+      width: "100%",
+      height: STRIP_SIZE_PCT
+    },
+    animation: mapAmbientMotion(ambientMotion, 15)
+  };
+}
+function createBottomStripGradient(slideId) {
+  return {
+    type: "shape",
+    id: `${slideId}-accent-fade`,
+    content: {
+      shape: "rect",
+      fill: "url(#accent-gradient-bottom)"
+    },
+    position: {
+      x: 0,
+      y: `${100 - STRIP_SIZE - 8}%`,
+      width: "100%",
+      height: "12%"
+    }
+  };
+}
+function createCornerInsetImage(src, alt, slideId, ambientMotion, credit, license) {
+  return {
+    type: "image",
+    id: `${slideId}-accent-img`,
+    content: {
+      src,
+      alt,
+      fit: "cover",
+      credit,
+      license
+    },
+    position: {
+      x: "70%",
+      y: "60%",
+      width: "28%",
+      height: "38%",
+      anchor: "top-left"
+    },
+    animation: mapAmbientMotion(ambientMotion, 15) ?? { type: "fadeIn", duration: 2, delay: 0.5 }
+  };
+}
+function createCornerVignette(slideId) {
+  return {
+    type: "shape",
+    id: `${slideId}-accent-vignette`,
+    content: {
+      shape: "rect",
+      fill: "url(#accent-vignette-corner)",
+      borderRadius: 8
+    },
+    position: {
+      x: "69%",
+      y: "59%",
+      width: "30%",
+      height: "40%"
+    }
+  };
+}
+function adjustY(originalY, layout) {
+  if (!layout.adjustY || layout.textYAdjust === 0) {
+    return typeof originalY === "number" ? `${originalY}%` : originalY;
+  }
+  const yStr = typeof originalY === "number" ? `${originalY}` : originalY;
+  const match = yStr.match(PERCENTAGE_RE);
+  if (match) {
+    const yValue = parseFloat(match[1]);
+    const adjusted = Math.max(5, yValue + layout.textYAdjust);
+    return `${adjusted}%`;
+  }
+  return yStr;
+}
+
+// src/doc/templates/captionUtils.ts
+var TRAILING_PUNCT_RE = /[.;:!?]+$/;
+function cleanCaption(text) {
+  return text.replace(TRAILING_PUNCT_RE, "").trim();
+}
+function createBackgroundLayer(id, fill) {
+  return {
+    type: "shape",
+    id,
+    content: { shape: "rect", fill },
+    position: { x: 0, y: 0, width: "100%", height: "100%" }
+  };
+}
+
+// src/doc/templates/statHighlight.ts
+function statHighlight(input, context) {
+  const { stat, description, detail, colorScheme = "blue", accentImage } = input;
+  const { theme } = context;
+  const colors = resolveColorScheme(context, colorScheme);
+  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
+  const statFontSize = scaledFontSize(148, context, true);
+  const descFontSize = scaledFontSize(32, context, false);
+  const detailFontSize = scaledFontSize(26, context, false);
+  const layers = [
+    createBackgroundLayer(
+      "bg",
+      `linear-gradient(180deg, ${theme.colors.background} 0%, #0f1520 100%)`
+    )
+  ];
+  if (accentImage) {
+    layers.push(...createAccentLayers(accentImage, input.id));
+  }
+  layers.push({
+    type: "text",
+    id: "stat",
+    content: {
+      text: stat,
+      style: {
+        fontSize: statFontSize,
+        fontWeight: "bold",
+        color: colors.text,
+        shadow: !!accentImage
+      }
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY("32%", accentLayout),
+      anchor: "center"
+    },
+    animation: { type: "zoomIn", duration: 0.6 }
+  });
+  layers.push({
+    type: "text",
+    id: "description",
+    content: {
+      text: description,
+      style: {
+        fontSize: descFontSize,
+        color: theme.colors.textMuted,
+        textAlign: "center",
+        lineHeight: 1.6,
+        shadow: !!accentImage
+      }
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY("58%", accentLayout),
+      width: accentLayout.textWidth,
+      anchor: "center"
+    },
+    animation: { type: "fadeIn", duration: 1, delay: 0.3 }
+  });
+  if (detail) {
+    layers.push({
+      type: "text",
+      id: "detail",
+      content: {
+        text: detail,
+        style: {
+          fontSize: detailFontSize,
+          color: colors.accent,
+          textAlign: "center",
+          shadow: !!accentImage
+        }
+      },
+      position: {
+        x: accentLayout.textCenterX,
+        y: adjustY("75%", accentLayout),
+        anchor: "center"
+      },
+      animation: { type: "fadeIn", duration: 1, delay: 1 }
+    });
+  }
+  return layers;
+}
+
+// src/doc/templates/quoteBlock.ts
+function quoteBlock(input, context) {
+  const { quote, attribution, accentImage } = input;
+  const { theme, layout } = context;
+  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
+  const quoteFontSize = scaledFontSize(48, context, true);
+  const attrFontSize = scaledFontSize(24, context, false);
+  const decorativeQuoteFontSize = scaledFontSize(280, context, true);
+  const layers = [
+    createBackgroundLayer(
+      "bg",
+      `linear-gradient(160deg, ${theme.colors.backgroundLight} 0%, #1e2636 100%)`
+    )
+  ];
+  if (accentImage) {
+    layers.push(...createAccentLayers(accentImage, input.id));
+  }
+  layers.push({
+    type: "text",
+    id: "deco-quote",
+    content: {
+      text: "\u201C",
+      style: {
+        fontSize: decorativeQuoteFontSize,
+        color: "rgba(255, 255, 255, 0.06)",
+        textAlign: "center"
+      }
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY("18%", accentLayout),
+      anchor: "center"
+    }
+  });
+  const quoteY = attribution ? layout.primaryY : "50%";
+  layers.push({
+    type: "text",
+    id: "quote",
+    content: {
+      text: quote,
+      style: {
+        fontSize: quoteFontSize,
+        color: theme.colors.text,
+        textAlign: "center",
+        lineHeight: 1.6,
+        shadow: true
+      }
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY(quoteY, accentLayout),
+      anchor: "center",
+      width: accentLayout.textWidth
+    },
+    animation: { type: "fadeIn", duration: 2 }
+  });
+  if (attribution) {
+    layers.push({
+      type: "text",
+      id: "attribution",
+      content: {
+        text: `\u2014 ${attribution}`,
+        style: {
+          fontSize: attrFontSize,
+          color: theme.colors.textMuted,
+          textAlign: "center",
+          shadow: !!accentImage
+        }
+      },
+      position: {
+        x: accentLayout.textCenterX,
+        y: adjustY(layout.captionY, accentLayout),
+        anchor: "center"
+      },
+      animation: { type: "fadeIn", duration: 1, delay: 1.5 }
+    });
+  }
+  return layers;
+}
+
+// src/doc/templates/factCard.ts
+function factCard(input, context) {
+  const { fact, explanation, source, accentImage } = input;
+  const { theme } = context;
+  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
+  const factFontSize = scaledFontSize(56, context, true);
+  const explainFontSize = scaledFontSize(32, context, false);
+  const sourceFontSize = scaledFontSize(20, context, false);
+  const layers = [
+    createBackgroundLayer(
+      "bg",
+      `linear-gradient(170deg, #1e2030 0%, ${theme.colors.background} 100%)`
+    )
+  ];
+  if (accentImage) {
+    layers.push(...createAccentLayers(accentImage, input.id));
+  }
+  layers.push({
+    type: "text",
+    id: "fact",
+    content: {
+      text: fact,
+      style: {
+        fontSize: factFontSize,
+        fontWeight: "bold",
+        color: theme.colors.text,
+        textAlign: "center",
+        lineHeight: 1.4,
+        shadow: true
+      }
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY("35%", accentLayout),
+      width: accentLayout.textWidth,
+      anchor: "center"
+    },
+    animation: { type: "fadeIn", duration: 1.5 }
+  });
+  layers.push({
+    type: "text",
+    id: "explanation",
+    content: {
+      text: explanation,
+      style: {
+        fontSize: explainFontSize,
+        color: theme.colors.textMuted,
+        textAlign: "center",
+        lineHeight: 1.5,
+        shadow: !!accentImage
+      }
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY("60%", accentLayout),
+      width: accentLayout.textWidth,
+      anchor: "center"
+    },
+    animation: { type: "fadeIn", duration: 1, delay: 0.8 }
+  });
+  if (source) {
+    layers.push({
+      type: "text",
+      id: "source",
+      content: {
+        text: source,
+        style: {
+          fontSize: sourceFontSize,
+          color: theme.colors.textMuted,
+          textAlign: "center",
+          shadow: !!accentImage
+        }
+      },
+      position: {
+        x: accentLayout.textCenterX,
+        y: adjustY("85%", accentLayout),
+        anchor: "center"
+      },
+      animation: { type: "fadeIn", duration: 0.8, delay: 1.5 }
+    });
+  }
+  return layers;
+}
+
+// src/doc/templates/twoColumn.ts
+function twoColumn(input, context) {
+  const { left, right, header, leftColor = "green", rightColor = "blue" } = input;
+  if (!left?.label || !right?.label) return [];
+  const { theme, layout, orientation } = context;
+  const leftColors = resolveColorScheme(context, leftColor);
+  const rightColors = resolveColorScheme(context, rightColor);
+  const positions = getTwoColumnPositions(orientation);
+  const isStacked = layout.stackColumns;
+  const columnWidth = isStacked ? "85%" : "42%";
+  const headerFontSize = scaledFontSize(32, context, false);
+  const labelFontSize = scaledFontSize(44, context, true);
+  const sublabelFontSize = scaledFontSize(22, context, false);
+  const layers = [
+    // Background — subtle gradient to add depth
+    {
+      type: "shape",
+      id: "bg",
+      content: {
+        shape: "rect",
+        fill: `linear-gradient(135deg, ${theme.colors.background} 0%, #16202e 100%)`
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    }
+  ];
+  if (!isStacked) {
+    layers.push({
+      type: "shape",
+      id: "left-panel",
+      content: {
+        shape: "rect",
+        fill: "rgba(255, 255, 255, 0.04)"
+      },
+      position: { x: "3%", y: "15%", width: "44%", height: "70%" }
+    });
+    layers.push({
+      type: "shape",
+      id: "right-panel",
+      content: {
+        shape: "rect",
+        fill: "rgba(255, 255, 255, 0.04)"
+      },
+      position: { x: "53%", y: "15%", width: "44%", height: "70%" }
+    });
+  }
+  const headerY = isStacked ? "12%" : "22%";
+  if (header) {
+    layers.push({
+      type: "text",
+      id: "header",
+      content: {
+        text: header,
+        style: {
+          fontSize: headerFontSize,
+          color: theme.colors.textMuted,
+          textAlign: "center"
+        }
+      },
+      position: { x: "50%", y: headerY, anchor: "center" },
+      animation: { type: "fadeIn", duration: 0.8 }
+    });
+  }
+  let leftY;
+  let leftSublabelY;
+  let rightY;
+  let rightSublabelY;
+  if (isStacked) {
+    leftY = header ? "30%" : "25%";
+    leftSublabelY = header ? "40%" : "35%";
+    rightY = header ? "60%" : "55%";
+    rightSublabelY = header ? "70%" : "65%";
+  } else {
+    const baseY = header ? "47%" : "45%";
+    const sublabelOffset = header ? "58%" : "56%";
+    leftY = baseY;
+    leftSublabelY = sublabelOffset;
+    rightY = baseY;
+    rightSublabelY = sublabelOffset;
+  }
+  layers.push({
+    type: "text",
+    id: "left-label",
+    content: {
+      text: left.label,
+      style: {
+        fontSize: labelFontSize,
+        fontWeight: "bold",
+        color: leftColors.text,
+        textAlign: "center",
+        lineHeight: 1.3
+      }
+    },
+    position: {
+      x: positions.left.x,
+      y: leftY,
+      anchor: "center",
+      width: columnWidth
+    },
+    animation: { type: "fadeIn", duration: 1 }
+  });
+  if (left.sublabel) {
+    layers.push({
+      type: "text",
+      id: "left-sublabel",
+      content: {
+        text: left.sublabel,
+        style: {
+          fontSize: sublabelFontSize,
+          color: theme.colors.textMuted,
+          textAlign: "center",
+          lineHeight: 1.4
+        }
+      },
+      position: {
+        x: positions.left.x,
+        y: leftSublabelY,
+        anchor: "center",
+        width: columnWidth
+      },
+      animation: { type: "fadeIn", duration: 0.8, delay: 0.3 }
+    });
+  }
+  const connectorFontSize = scaledFontSize(120, context, true);
+  const connectorY = isStacked ? "48%" : "50%";
+  const connectorSymbol = isStacked ? "\u2193" : "\u2192";
+  layers.push({
+    type: "text",
+    id: "connector",
+    content: {
+      text: connectorSymbol,
+      style: {
+        fontSize: connectorFontSize,
+        fontWeight: "bold",
+        color: "rgba(255, 255, 255, 0.6)",
+        textAlign: "center"
+      }
+    },
+    position: {
+      x: "50%",
+      y: connectorY,
+      anchor: "center"
+    },
+    animation: { type: "fadeIn", duration: 0.6, delay: 0.4 }
+  });
+  layers.push({
+    type: "text",
+    id: "right-label",
+    content: {
+      text: right.label,
+      style: {
+        fontSize: labelFontSize,
+        fontWeight: "bold",
+        color: rightColors.text,
+        textAlign: "center",
+        lineHeight: 1.3
+      }
+    },
+    position: {
+      x: positions.right.x,
+      y: rightY,
+      anchor: "center",
+      width: columnWidth
+    },
+    animation: { type: "fadeIn", duration: 1, delay: 0.5 }
+  });
+  if (right.sublabel) {
+    layers.push({
+      type: "text",
+      id: "right-sublabel",
+      content: {
+        text: right.sublabel,
+        style: {
+          fontSize: sublabelFontSize,
+          color: theme.colors.textMuted,
+          textAlign: "center",
+          lineHeight: 1.4
+        }
+      },
+      position: {
+        x: positions.right.x,
+        y: rightSublabelY,
+        anchor: "center",
+        width: columnWidth
+      },
+      animation: { type: "fadeIn", duration: 0.8, delay: 0.8 }
+    });
+  }
+  return layers;
+}
+
+// src/doc/templates/dateEvent.ts
+var MOOD_COLORS = {
+  neutral: { bg: "#1a202c", date: "#63b3ed", text: "#ffffff" },
+  somber: { bg: "#1a1a2e", date: "#e53e3e", text: "#a0aec0" },
+  celebratory: { bg: "#1a365d", date: "#68d391", text: "#ffffff" }
+};
+function dateEvent(input, context) {
+  const { date, description, footer, mood = "neutral", accentImage } = input;
+  const { theme } = context;
+  const colors = MOOD_COLORS[mood];
+  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
+  const dateFontSize = scaledFontSize(96, context, true);
+  const descFontSize = scaledFontSize(30, context, false);
+  const footerFontSize = scaledFontSize(26, context, false);
+  const layers = [
+    // Background — unique diagonal gradient to differentiate from other dark templates
+    {
+      type: "shape",
+      id: "bg",
+      content: {
+        shape: "rect",
+        fill: `linear-gradient(135deg, ${colors.bg} 0%, #0d1117 100%)`
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    }
+  ];
+  if (accentImage) {
+    layers.push(...createAccentLayers(accentImage, input.id));
+  }
+  layers.push({
+    type: "text",
+    id: "date",
+    content: {
+      text: date,
+      style: {
+        fontSize: dateFontSize,
+        fontWeight: "bold",
+        color: colors.date,
+        shadow: !!accentImage
+      }
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY("35%", accentLayout),
+      anchor: "center"
+    },
+    animation: { type: "fadeIn", duration: 1.5 }
+  });
+  layers.push({
+    type: "text",
+    id: "description",
+    content: {
+      text: description,
+      style: {
+        fontSize: descFontSize,
+        color: colors.text,
+        textAlign: "center",
+        lineHeight: 1.8,
+        shadow: !!accentImage
+      }
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY("58%", accentLayout),
+      width: accentLayout.textWidth,
+      anchor: "center"
+    },
+    animation: { type: "fadeIn", duration: 2, delay: 1 }
+  });
+  if (footer) {
+    layers.push({
+      type: "text",
+      id: "footer",
+      content: {
+        text: footer,
+        style: {
+          fontSize: footerFontSize,
+          color: theme.colors.textMuted,
+          shadow: !!accentImage
+        }
+      },
+      position: {
+        x: accentLayout.textCenterX,
+        y: adjustY("82%", accentLayout),
+        anchor: "center"
+      },
+      animation: { type: "fadeIn", duration: 1, delay: 3 }
+    });
+  }
+  return layers;
+}
+
+// src/doc/templates/imageWithCaption.ts
+function imageWithCaption(input, context) {
+  const {
+    imageSrc,
+    imageAlt,
+    caption: rawCaption,
+    captionPosition: _captionPosition = "bottom",
+    ambientMotion,
+    isTitle,
+    subtitle,
+    imageCredit,
+    imageLicense
+  } = input;
+  const caption = rawCaption ? cleanCaption(rawCaption) : rawCaption;
+  const { theme, layout } = context;
+  const captionFontSize = scaledFontSize(36, context, false);
+  const titleFontSize = scaledFontSize(96, context, true);
+  const subtitleFontSize = scaledFontSize(36, context, false);
+  const legacyKenBurns = input.kenBurns;
+  const motion = ambientMotion || legacyKenBurns;
+  const imageAnimation = mapAmbientMotion(motion);
+  const layers = [
+    // Background image
+    {
+      type: "image",
+      id: "bg-image",
+      content: {
+        src: imageSrc,
+        alt: imageAlt,
+        fit: "cover",
+        credit: imageCredit,
+        license: imageLicense
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" },
+      animation: imageAnimation
+    }
+  ];
+  if (isTitle && caption) {
+    layers.push({
+      type: "shape",
+      id: "title-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%" }
+    });
+    layers.push({
+      type: "text",
+      id: "title",
+      content: {
+        text: caption,
+        style: {
+          fontSize: titleFontSize,
+          fontWeight: "bold",
+          color: theme.colors.text,
+          textAlign: "center",
+          shadow: true
+        }
+      },
+      position: {
+        x: "50%",
+        y: subtitle ? "70%" : "75%",
+        anchor: "center",
+        width: layout.maxTextWidth
+      },
+      animation: { type: "fadeIn", duration: 0.8 }
+    });
+    if (subtitle) {
+      layers.push({
+        type: "text",
+        id: "subtitle",
+        content: {
+          text: subtitle,
+          style: {
+            fontSize: subtitleFontSize,
+            color: theme.colors.textMuted,
+            textAlign: "center",
+            lineHeight: 1.5
+          }
+        },
+        position: {
+          x: "50%",
+          y: "82%",
+          anchor: "center",
+          width: layout.maxTextWidth
+        },
+        animation: { type: "fadeIn", duration: 0.8, delay: 0.2 }
+      });
+    }
+    return layers;
+  }
+  if (caption) {
+    layers.push({
+      type: "shape",
+      id: "caption-gradient",
+      content: {
+        shape: "rect",
+        fill: "linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, transparent 100%)"
+      },
+      position: {
+        x: 0,
+        y: "65%",
+        width: "100%",
+        height: "35%"
+      }
+    });
+    layers.push({
+      type: "text",
+      id: "caption",
+      content: {
+        text: caption,
+        style: {
+          fontSize: captionFontSize,
+          color: theme.colors.text,
+          textAlign: "center",
+          shadow: true
+        }
+      },
+      position: {
+        x: "50%",
+        y: "82%",
+        anchor: "center",
+        width: layout.maxTextWidth
+      },
+      animation: { type: "fadeIn", duration: 1.5, delay: 0.5 }
+    });
+  }
+  return layers;
+}
+
+// src/doc/templates/mapBlock.ts
+function mapBlock(input, context) {
+  const {
+    center,
+    zoom,
+    mapStyle = "terrain",
+    title,
+    caption,
+    markers,
+    ambientMotion,
+    staticSrc
+  } = input;
+  const { theme, layout } = context;
+  const titleFontSize = scaledFontSize(64, context, true);
+  const captionFontSize = scaledFontSize(32, context, false);
+  const mapAnimation = mapAmbientMotion(ambientMotion);
+  const layers = [
+    // Map background
+    {
+      type: "map",
+      id: "map-bg",
+      content: {
+        center,
+        zoom,
+        style: mapStyle,
+        markers,
+        showAttribution: true,
+        staticSrc
+        // Use pre-rendered image if available
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" },
+      animation: mapAnimation
+    }
+  ];
+  if (title) {
+    layers.push({
+      type: "shape",
+      id: "title-overlay",
+      content: {
+        shape: "rect",
+        fill: "rgba(0,0,0,0.6)"
+      },
+      position: { x: 0, y: 0, width: "100%", height: "18%" }
+    });
+    layers.push({
+      type: "text",
+      id: "title",
+      content: {
+        text: title,
+        style: {
+          fontSize: titleFontSize,
+          fontWeight: "bold",
+          color: theme.colors.text,
+          textAlign: "center",
+          shadow: true
+        }
+      },
+      position: {
+        x: "50%",
+        y: "9%",
+        anchor: "center",
+        width: layout.maxTextWidth
+      },
+      animation: { type: "fadeIn", duration: 1, delay: 0.3 }
+    });
+  }
+  if (caption) {
+    layers.push({
+      type: "shape",
+      id: "caption-overlay",
+      content: {
+        shape: "rect",
+        fill: "rgba(0,0,0,0.6)"
+      },
+      position: { x: 0, y: "82%", width: "100%", height: "18%" }
+    });
+    layers.push({
+      type: "text",
+      id: "caption",
+      content: {
+        text: caption,
+        style: {
+          fontSize: captionFontSize,
+          color: theme.colors.text,
+          textAlign: "center",
+          shadow: true
+        }
+      },
+      position: {
+        x: "50%",
+        y: layout.captionY,
+        anchor: "center",
+        width: layout.maxTextWidth
+      },
+      animation: { type: "fadeIn", duration: 1, delay: 0.5 }
+    });
+  }
+  return layers;
+}
+
+// src/doc/templates/fullBleedQuote.ts
+function fullBleedQuote(input, context) {
+  const { text, colorScheme = "blue" } = input;
+  const { theme } = context;
+  const colors = resolveColorScheme(context, colorScheme);
+  const textFontSize = scaledFontSize(120, context, true);
+  return [
+    // Background — dark radial vignette for cinematic feel
+    {
+      type: "shape",
+      id: "bg",
+      content: {
+        shape: "rect",
+        fill: `radial-gradient(ellipse at 50% 50%, ${theme.colors.backgroundLight} 0%, #000000 100%)`
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    },
+    // The text — massive, centered
+    {
+      type: "text",
+      id: "impact-text",
+      content: {
+        text,
+        style: {
+          fontSize: textFontSize,
+          fontWeight: "bold",
+          color: colors.text,
+          textAlign: "center",
+          lineHeight: 1.2,
+          shadow: true
+        }
+      },
+      position: {
+        x: "50%",
+        y: "50%",
+        anchor: "center",
+        width: "85%"
+      },
+      animation: { type: "fadeIn", duration: 1.5 }
+    }
+  ];
+}
+
+// src/doc/templates/listBlock.ts
+function listBlock(input, context) {
+  const { items, title, accentImage } = input;
+  const { theme } = context;
+  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
+  const titleFontSize = scaledFontSize(44, context, true);
+  const itemFontSize = scaledFontSize(34, context, false);
+  const layers = [
+    // Background — gradient
+    {
+      type: "shape",
+      id: "bg",
+      content: {
+        shape: "rect",
+        fill: `linear-gradient(155deg, ${theme.colors.backgroundLight} 0%, ${theme.colors.background} 100%)`
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    }
+  ];
+  if (accentImage) {
+    layers.push(...createAccentLayers(accentImage, input.id));
+  }
+  const startY = title ? 30 : 22;
+  if (title) {
+    layers.push({
+      type: "text",
+      id: "list-title",
+      content: {
+        text: title,
+        style: {
+          fontSize: titleFontSize,
+          fontWeight: "bold",
+          color: theme.colors.text,
+          textAlign: "center",
+          shadow: !!accentImage
+        }
+      },
+      position: {
+        x: accentLayout.textCenterX,
+        y: adjustY("16%", accentLayout),
+        anchor: "center"
+      },
+      animation: { type: "fadeIn", duration: 1 }
+    });
+  }
+  const endY = 80;
+  const spacing = items.length > 1 ? (endY - startY) / (items.length - 1) : 0;
+  for (let i = 0; i < items.length; i++) {
+    const y = startY + spacing * i;
+    const itemText = `${i + 1}.  ${items[i]}`;
+    layers.push({
+      type: "text",
+      id: `item-${i}`,
+      content: {
+        text: itemText,
+        style: {
+          fontSize: itemFontSize,
+          color: theme.colors.text,
+          lineHeight: 1.4,
+          shadow: !!accentImage
+        }
+      },
+      position: {
+        x: accentLayout.textCenterX,
+        y: adjustY(`${y}%`, accentLayout),
+        anchor: "center",
+        width: accentLayout.textWidth
+      },
+      animation: { type: "fadeIn", duration: 0.8, delay: 0.3 + 0.3 * i }
+    });
+  }
+  return layers;
+}
+
+// src/doc/templates/photoGrid.ts
+var GAP = 0.5;
+function photoGrid(input, context) {
+  const { images, caption: rawCaption, ambientMotion } = input;
+  if (!images || images.length === 0) return [];
+  const caption = rawCaption ? cleanCaption(rawCaption) : rawCaption;
+  const { theme, layout } = context;
+  const layers = [
+    // Black background (visible in gaps between images)
+    {
+      type: "shape",
+      id: "bg",
+      content: { shape: "rect", fill: "#000000" },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    }
+  ];
+  const captionHeight = caption ? layout.stackColumns ? 18 : 22 : 0;
+  const gridHeight = 100 - captionHeight;
+  const positions = getGridPositions(images.length, gridHeight, layout.stackColumns);
+  const altFontSize = scaledFontSize(24, context, false);
+  for (let i = 0; i < Math.min(images.length, 4); i++) {
+    const img = images[i];
+    const pos = positions[i];
+    layers.push({
+      type: "shape",
+      id: `grid-placeholder-${i}`,
+      content: { shape: "rect", fill: theme.colors.background },
+      position: { x: `${pos.x}%`, y: `${pos.y}%`, width: `${pos.w}%`, height: `${pos.h}%` }
+    });
+    if (img.alt) {
+      layers.push({
+        type: "text",
+        id: `grid-alt-${i}`,
+        content: {
+          text: img.alt,
+          style: {
+            fontSize: altFontSize,
+            color: theme.colors.textMuted,
+            textAlign: "center"
+          }
+        },
+        position: { x: `${pos.x + pos.w / 2}%`, y: `${pos.y + pos.h / 2}%`, anchor: "center" }
+      });
+    }
+    layers.push({
+      type: "image",
+      id: `grid-img-${i}`,
+      content: {
+        src: img.src,
+        alt: img.alt,
+        fit: "cover",
+        credit: img.credit,
+        license: img.license
+      },
+      position: {
+        x: `${pos.x}%`,
+        y: `${pos.y}%`,
+        width: `${pos.w}%`,
+        height: `${pos.h}%`
+      },
+      // Apply ambient motion to the first (largest) image only
+      animation: i === 0 && ambientMotion ? { type: ambientMotion, duration: 15 } : { type: "fadeIn", duration: 1, delay: 0.2 * i }
+    });
+  }
+  if (caption) {
+    const captionFontSize = scaledFontSize(layout.stackColumns ? 28 : 40, context, false);
+    layers.push({
+      type: "shape",
+      id: "caption-bg",
+      content: {
+        shape: "rect",
+        fill: "linear-gradient(transparent, rgba(0,0,0,0.8))"
+      },
+      position: { x: 0, y: `${gridHeight - 4}%`, width: "100%", height: `${captionHeight + 4}%` }
+    });
+    layers.push({
+      type: "text",
+      id: "caption",
+      content: {
+        text: caption,
+        style: {
+          fontSize: captionFontSize,
+          color: theme.colors.text,
+          textAlign: "center",
+          shadow: true
+        }
+      },
+      position: {
+        x: "50%",
+        y: `${gridHeight + (layout.stackColumns ? captionHeight / 2 : captionHeight * 0.3)}%`,
+        anchor: "center",
+        width: "90%"
+      },
+      animation: { type: "fadeIn", duration: 1, delay: 0.5 }
+    });
+  }
+  return layers;
+}
+function getGridPositions(count, gridHeight, stacked) {
+  const halfW = 50 - GAP / 2;
+  const halfH = gridHeight / 2 - GAP / 2;
+  switch (count) {
+    case 2:
+      if (stacked) {
+        return [
+          { x: 0, y: 0, w: 100, h: halfH },
+          { x: 0, y: gridHeight / 2 + GAP / 2, w: 100, h: halfH }
+        ];
+      }
+      return [
+        { x: 0, y: 0, w: halfW, h: gridHeight },
+        { x: 50 + GAP / 2, y: 0, w: halfW, h: gridHeight }
+      ];
+    case 3: {
+      if (stacked) {
+        const thirdH = gridHeight / 3 - GAP * 2 / 3;
+        return [
+          { x: 0, y: 0, w: 100, h: thirdH },
+          { x: 0, y: gridHeight / 3 + GAP / 3, w: 100, h: thirdH },
+          { x: 0, y: gridHeight * 2 / 3 + GAP * 2 / 3, w: 100, h: thirdH }
+        ];
+      }
+      const leftW = 60 - GAP / 2;
+      const rightW = 40 - GAP / 2;
+      return [
+        { x: 0, y: 0, w: leftW, h: gridHeight },
+        { x: 60 + GAP / 2, y: 0, w: rightW, h: halfH },
+        { x: 60 + GAP / 2, y: gridHeight / 2 + GAP / 2, w: rightW, h: halfH }
+      ];
+    }
+    case 4:
+    default:
+      return [
+        { x: 0, y: 0, w: halfW, h: halfH },
+        { x: 50 + GAP / 2, y: 0, w: halfW, h: halfH },
+        { x: 0, y: gridHeight / 2 + GAP / 2, w: halfW, h: halfH },
+        { x: 50 + GAP / 2, y: gridHeight / 2 + GAP / 2, w: halfW, h: halfH }
+      ];
+  }
+}
+
+// src/doc/templates/definitionCard.ts
+function definitionCard(input, context) {
+  const { term, definition, origin, colorScheme = "blue", accentImage } = input;
+  const { theme } = context;
+  const colors = resolveColorScheme(context, colorScheme);
+  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
+  const termFontSize = scaledFontSize(72, context, true);
+  const defFontSize = scaledFontSize(32, context, false);
+  const originFontSize = scaledFontSize(22, context, false);
+  const layers = [
+    createBackgroundLayer(
+      "bg",
+      `linear-gradient(145deg, #1e2030 0%, ${theme.colors.background} 100%)`
+    )
+  ];
+  if (accentImage) {
+    layers.push(...createAccentLayers(accentImage, input.id));
+  }
+  layers.push({
+    type: "text",
+    id: "term",
+    content: {
+      text: term,
+      style: {
+        fontSize: termFontSize,
+        fontWeight: "bold",
+        color: colors.text,
+        textAlign: "center",
+        shadow: !!accentImage
+      }
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY("30%", accentLayout),
+      anchor: "center"
+    },
+    animation: { type: "fadeIn", duration: 1.5 }
+  });
+  layers.push({
+    type: "shape",
+    id: "separator",
+    content: {
+      shape: "rect",
+      fill: `${colors.text}33`
+      // accent color at 20% opacity
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY("42%", accentLayout),
+      width: "30%",
+      height: "2px",
+      anchor: "center"
+    }
+  });
+  layers.push({
+    type: "text",
+    id: "definition",
+    content: {
+      text: definition,
+      style: {
+        fontSize: defFontSize,
+        color: theme.colors.text,
+        textAlign: "center",
+        lineHeight: 1.6,
+        maxLines: 4,
+        shadow: !!accentImage
+      }
+    },
+    position: {
+      x: accentLayout.textCenterX,
+      y: adjustY("55%", accentLayout),
+      width: accentLayout.textWidth,
+      anchor: "center"
+    },
+    animation: { type: "fadeIn", duration: 1, delay: 0.8 }
+  });
+  if (origin) {
+    layers.push({
+      type: "text",
+      id: "origin",
+      content: {
+        text: origin,
+        style: {
+          fontSize: originFontSize,
+          color: theme.colors.textMuted,
+          textAlign: "center",
+          shadow: !!accentImage
+        }
+      },
+      position: {
+        x: accentLayout.textCenterX,
+        y: adjustY("78%", accentLayout),
+        anchor: "center"
+      },
+      animation: { type: "fadeIn", duration: 0.8, delay: 1.5 }
+    });
+  }
+  return layers;
+}
+
+// src/doc/templates/comparisonBar.ts
+function comparisonBar(input, context) {
+  const { leftLabel, leftValue, rightLabel, rightValue, unit, colorScheme = "blue" } = input;
+  const { theme } = context;
+  const colors = resolveColorScheme(context, colorScheme);
+  const labelFontSize = scaledFontSize(28, context, false);
+  const valueFontSize = scaledFontSize(48, context, true);
+  const maxValue = Math.max(leftValue, rightValue, 1);
+  const maxBarWidth = 65;
+  const leftBarWidth = leftValue / maxValue * maxBarWidth;
+  const rightBarWidth = rightValue / maxValue * maxBarWidth;
+  const barStartX = 15;
+  const barHeight = 6;
+  const topBarY = 36;
+  const bottomBarY = 58;
+  const formatValue = (v) => {
+    if (v >= 1e6) return `${(v / 1e6).toFixed(1)}M`;
+    if (v >= 1e3) return `${(v / 1e3).toFixed(v >= 1e4 ? 0 : 1)}K`;
+    return v.toLocaleString();
+  };
+  const leftDisplay = unit ? `${formatValue(leftValue)} ${unit}` : formatValue(leftValue);
+  const rightDisplay = unit ? `${formatValue(rightValue)} ${unit}` : formatValue(rightValue);
+  return [
+    // Background
+    {
+      type: "shape",
+      id: "bg",
+      content: {
+        shape: "rect",
+        fill: `linear-gradient(180deg, ${theme.colors.background} 0%, #0f1520 100%)`
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    },
+    // Top bar label
+    {
+      type: "text",
+      id: "left-label",
+      content: {
+        text: leftLabel,
+        style: { fontSize: labelFontSize, color: theme.colors.textMuted }
+      },
+      position: { x: `${barStartX}%`, y: `${topBarY - 8}%` }
+    },
+    // Top bar value
+    {
+      type: "text",
+      id: "left-value",
+      content: {
+        text: leftDisplay,
+        style: { fontSize: valueFontSize, fontWeight: "bold", color: colors.text }
+      },
+      position: { x: `${barStartX + leftBarWidth + 2}%`, y: `${topBarY - 1}%` },
+      animation: { type: "fadeIn", duration: 0.8, delay: 0.3 }
+    },
+    // Top bar
+    {
+      type: "shape",
+      id: "left-bar",
+      content: {
+        shape: "rect",
+        fill: colors.text,
+        borderRadius: 4
+      },
+      position: {
+        x: `${barStartX}%`,
+        y: `${topBarY}%`,
+        width: `${leftBarWidth}%`,
+        height: `${barHeight}%`
+      },
+      animation: { type: "fadeIn", duration: 1 }
+    },
+    // Bottom bar label
+    {
+      type: "text",
+      id: "right-label",
+      content: {
+        text: rightLabel,
+        style: { fontSize: labelFontSize, color: theme.colors.textMuted }
+      },
+      position: { x: `${barStartX}%`, y: `${bottomBarY - 8}%` }
+    },
+    // Bottom bar value
+    {
+      type: "text",
+      id: "right-value",
+      content: {
+        text: rightDisplay,
+        style: { fontSize: valueFontSize, fontWeight: "bold", color: colors.accent }
+      },
+      position: { x: `${barStartX + rightBarWidth + 2}%`, y: `${bottomBarY - 1}%` },
+      animation: { type: "fadeIn", duration: 0.8, delay: 0.6 }
+    },
+    // Bottom bar
+    {
+      type: "shape",
+      id: "right-bar",
+      content: {
+        shape: "rect",
+        fill: colors.accent,
+        borderRadius: 4
+      },
+      position: {
+        x: `${barStartX}%`,
+        y: `${bottomBarY}%`,
+        width: `${rightBarWidth}%`,
+        height: `${barHeight}%`
+      },
+      animation: { type: "fadeIn", duration: 1, delay: 0.3 }
+    }
+  ];
+}
+
+// src/doc/templates/pullQuote.ts
+function pullQuote(input, context) {
+  const { text, attribution, backgroundImage, ambientMotion } = input;
+  if (!backgroundImage?.src) return [];
+  const quoteFontSize = scaledFontSize(52, context, true);
+  const attrFontSize = scaledFontSize(24, context, false);
+  const decoFontSize = scaledFontSize(200, context, true);
+  const layers = [
+    // Full-bleed background image
+    {
+      type: "image",
+      id: "bg-image",
+      content: {
+        src: backgroundImage.src,
+        alt: backgroundImage.alt,
+        fit: "cover",
+        credit: backgroundImage.credit,
+        license: backgroundImage.license
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" },
+      animation: ambientMotion ? { type: ambientMotion, duration: 15 } : void 0
+    },
+    // Dark overlay for text readability
+    {
+      type: "shape",
+      id: "overlay",
+      content: {
+        shape: "rect",
+        fill: "rgba(0, 0, 0, 0.55)"
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    },
+    // Decorative quotation mark
+    {
+      type: "text",
+      id: "deco-quote",
+      content: {
+        text: "\u201C",
+        style: {
+          fontSize: decoFontSize,
+          color: "rgba(255, 255, 255, 0.08)",
+          textAlign: "center"
+        }
+      },
+      position: {
+        x: "50%",
+        y: "20%",
+        anchor: "center"
+      }
+    },
+    // Quote text
+    {
+      type: "text",
+      id: "quote-text",
+      content: {
+        text,
+        style: {
+          fontSize: quoteFontSize,
+          color: "#ffffff",
+          textAlign: "center",
+          lineHeight: 1.5,
+          shadow: true
+        }
+      },
+      position: {
+        x: "50%",
+        y: attribution ? "45%" : "50%",
+        anchor: "center",
+        width: "80%"
+      },
+      animation: { type: "fadeIn", duration: 2 }
+    }
+  ];
+  if (attribution) {
+    layers.push({
+      type: "text",
+      id: "attribution",
+      content: {
+        text: `\u2014 ${attribution}`,
+        style: {
+          fontSize: attrFontSize,
+          color: "rgba(255, 255, 255, 0.7)",
+          textAlign: "center",
+          shadow: true
+        }
+      },
+      position: {
+        x: "50%",
+        y: "72%",
+        anchor: "center"
+      },
+      animation: { type: "fadeIn", duration: 1, delay: 1.5 }
+    });
+  }
+  return layers;
+}
+
+// src/doc/templates/videoWithCaption.ts
+function videoWithCaption(input, context) {
+  const {
+    videoSrc,
+    posterSrc,
+    videoAlt,
+    clipStart,
+    clipEnd,
+    sourceDuration,
+    caption: rawCaption,
+    captionPosition = "bottom",
+    videoCredit,
+    videoLicense
+  } = input;
+  const caption = rawCaption ? cleanCaption(rawCaption) : rawCaption;
+  const { theme, layout } = context;
+  const captionFontSize = scaledFontSize(36, context, false);
+  const creditFontSize = scaledFontSize(16, context, false);
+  const layers = [
+    // Background video clip
+    {
+      type: "video",
+      id: "bg-video",
+      content: {
+        src: videoSrc,
+        posterSrc,
+        alt: videoAlt,
+        fit: "cover",
+        clipStart,
+        clipEnd,
+        sourceDuration,
+        credit: videoCredit,
+        license: videoLicense
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    }
+  ];
+  if (caption) {
+    layers.push({
+      type: "shape",
+      id: "caption-gradient",
+      content: {
+        shape: "rect",
+        fill: "linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, transparent 100%)"
+      },
+      position: {
+        x: 0,
+        y: captionPosition === "top" ? 0 : "65%",
+        width: "100%",
+        height: "35%"
+      }
+    });
+    const captionY = captionPosition === "top" ? "15%" : captionPosition === "center" ? "50%" : "82%";
+    layers.push({
+      type: "text",
+      id: "caption",
+      content: {
+        text: caption,
+        style: {
+          fontSize: captionFontSize,
+          color: theme.colors.text,
+          textAlign: "center",
+          shadow: true
+        }
+      },
+      position: {
+        x: "50%",
+        y: captionY,
+        anchor: "center",
+        width: layout.maxTextWidth
+      },
+      animation: { type: "fadeIn", duration: 1.5, delay: 0.5 }
+    });
+  }
+  if (videoCredit) {
+    layers.push({
+      type: "text",
+      id: "credit",
+      content: {
+        text: videoCredit,
+        style: {
+          fontSize: creditFontSize,
+          color: "rgba(255, 255, 255, 0.5)",
+          textAlign: "right"
+        }
+      },
+      position: {
+        x: "96%",
+        y: "96%",
+        anchor: "bottom-right"
+      }
+    });
+  }
+  return layers;
+}
+
+// src/doc/templates/videoPullQuote.ts
+function videoPullQuote(input, context) {
+  const { text, attribution, backgroundVideo } = input;
+  if (!backgroundVideo?.src) return [];
+  const quoteFontSize = scaledFontSize(52, context, true);
+  const attrFontSize = scaledFontSize(24, context, false);
+  const decoFontSize = scaledFontSize(200, context, true);
+  const layers = [
+    // Full-bleed background video clip
+    {
+      type: "video",
+      id: "bg-video",
+      content: {
+        src: backgroundVideo.src,
+        posterSrc: backgroundVideo.posterSrc,
+        alt: backgroundVideo.alt,
+        fit: "cover",
+        clipStart: backgroundVideo.clipStart,
+        clipEnd: backgroundVideo.clipEnd,
+        credit: backgroundVideo.credit,
+        license: backgroundVideo.license
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    },
+    // Dark overlay for text readability
+    {
+      type: "shape",
+      id: "overlay",
+      content: {
+        shape: "rect",
+        fill: "rgba(0, 0, 0, 0.55)"
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    },
+    // Decorative quotation mark
+    {
+      type: "text",
+      id: "deco-quote",
+      content: {
+        text: "\u201C",
+        style: {
+          fontSize: decoFontSize,
+          color: "rgba(255, 255, 255, 0.08)",
+          textAlign: "center"
+        }
+      },
+      position: {
+        x: "50%",
+        y: "20%",
+        anchor: "center"
+      }
+    },
+    // Quote text
+    {
+      type: "text",
+      id: "quote-text",
+      content: {
+        text,
+        style: {
+          fontSize: quoteFontSize,
+          color: "#ffffff",
+          textAlign: "center",
+          lineHeight: 1.5,
+          shadow: true
+        }
+      },
+      position: {
+        x: "50%",
+        y: attribution ? "45%" : "50%",
+        anchor: "center",
+        width: "80%"
+      },
+      animation: { type: "fadeIn", duration: 2 }
+    }
+  ];
+  if (attribution) {
+    layers.push({
+      type: "text",
+      id: "attribution",
+      content: {
+        text: `\u2014 ${attribution}`,
+        style: {
+          fontSize: attrFontSize,
+          color: "rgba(255, 255, 255, 0.7)",
+          textAlign: "center",
+          shadow: true
+        }
+      },
+      position: {
+        x: "50%",
+        y: "72%",
+        anchor: "center"
+      },
+      animation: { type: "fadeIn", duration: 1, delay: 1.5 }
+    });
+  }
+  return layers;
+}
+
+// src/doc/templates/coverBlock.ts
+function coverBlock(input, context) {
+  const { heroSrc, heroAlt, title, subtitle, ambientMotion, heroCredit, heroLicense } = input;
+  const { theme, layout } = context;
+  const titleFontSize = scaledFontSize(96, context, true);
+  const subtitleFontSize = scaledFontSize(36, context, false);
+  const imageAnimation = mapAmbientMotion(ambientMotion);
+  const layers = [
+    // Full-screen hero image
+    {
+      type: "image",
+      id: "cover-hero",
+      content: {
+        src: heroSrc,
+        alt: heroAlt || title,
+        fit: "cover",
+        credit: heroCredit,
+        license: heroLicense
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" },
+      animation: imageAnimation
+    },
+    // Gradient overlay for text readability - from bottom
+    {
+      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%" }
+    },
+    // Title - positioned lower in the frame to work with hero composition
+    {
+      type: "text",
+      id: "cover-title",
+      content: {
+        text: title,
+        style: {
+          fontSize: titleFontSize,
+          fontWeight: "bold",
+          color: theme.colors.text,
+          textAlign: "center",
+          shadow: true
+        }
+      },
+      position: {
+        x: "50%",
+        y: subtitle ? "70%" : "75%",
+        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,
+          color: theme.colors.textMuted,
+          textAlign: "center",
+          lineHeight: 1.5
+        }
+      },
+      position: {
+        x: "50%",
+        y: "82%",
+        anchor: "center",
+        width: layout.maxTextWidth
+      },
+      animation: { type: "fadeIn", duration: 0.8, delay: 0.2 }
+    });
+  }
+  return layers;
+}
+function startBlockToCoverInput(config) {
+  return {
+    heroSrc: config.heroSrc,
+    heroAlt: config.heroAlt,
+    title: config.title,
+    subtitle: config.subtitle,
+    ambientMotion: config.ambientMotion,
+    heroCredit: config.heroCredit,
+    heroLicense: config.heroLicense
+  };
+}
+function expandCoverBlock(config, context) {
+  const input = startBlockToCoverInput(config);
+  return coverBlock(input, context);
+}
+
+// src/doc/templates/index.ts
+var templateRegistry = {
+  titleBlock,
+  sectionHeader,
+  statHighlight,
+  quoteBlock,
+  factCard,
+  twoColumn,
+  dateEvent,
+  imageWithCaption,
+  mapBlock,
+  fullBleedQuote,
+  listBlock,
+  photoGrid,
+  definitionCard,
+  comparisonBar,
+  pullQuote,
+  videoWithCaption,
+  videoPullQuote
+};
+function expandTemplateBlock(templateBlock, context) {
+  const templateFn = templateRegistry[templateBlock.template];
+  if (!templateFn) {
+    console.warn(`Unknown template: ${templateBlock.template}`);
+    return {
+      id: templateBlock.id,
+      startTime: 0,
+      duration: templateBlock.duration,
+      audioSegment: templateBlock.audioSegment,
+      transition: templateBlock.transition,
+      template: templateBlock.template
+      // Preserve for debugging
+    };
+  }
+  let layers;
+  try {
+    layers = templateFn(
+      templateBlock,
+      context
+    );
+    if (!Array.isArray(layers)) {
+      console.error(
+        `Template ${templateBlock.template} did not return an array, got:`,
+        typeof layers
+      );
+      layers = [];
+    }
+  } catch (err) {
+    console.error(`Error expanding template ${templateBlock.template}:`, err);
+    layers = [];
+  }
+  return {
+    id: templateBlock.id,
+    startTime: 0,
+    // Will be calculated later
+    duration: templateBlock.duration,
+    audioSegment: templateBlock.audioSegment,
+    ...layers.length > 0 ? { layers } : {},
+    transition: templateBlock.transition,
+    template: templateBlock.template
+    // Preserve for debugging
+  };
+}
+function expandDocBlocks(blocks, options = {}) {
+  const opts = options;
+  const theme = opts.theme ?? DEFAULT_THEME;
+  const viewport = opts.viewport ?? VIEWPORT_PRESETS.landscape;
+  const { persistentLayers, audioSegments } = opts;
+  const totalBlocks = blocks.length;
+  const bottomLayers = expandPersistentLayers(persistentLayers?.bottomLayers);
+  const topLayers = expandPersistentLayers(persistentLayers?.topLayers);
+  if (!audioSegments || audioSegments.length === 0) {
+    let currentTime = 0;
+    return blocks.map((block, index) => {
+      const context = createTemplateContext(theme, index, totalBlocks, viewport);
+      const expandedBlock = isTemplateBlock(block) ? expandTemplateBlock(block, context) : block;
+      const templateBlock = block;
+      const useBottom = templateBlock.useBottomLayer !== false;
+      const useTop = templateBlock.useTopLayer !== false;
+      if (bottomLayers.length > 0 || topLayers.length > 0) {
+        expandedBlock.layers = [
+          ...useBottom ? bottomLayers : [],
+          ...expandedBlock.layers ?? [],
+          ...useTop ? topLayers : []
+        ];
+      }
+      expandedBlock.startTime = currentTime;
+      currentTime += expandedBlock.duration;
+      return expandedBlock;
+    });
+  }
+  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 context = createTemplateContext(theme, originalIndex, totalBlocks, viewport);
+        const expandedBlock = isTemplateBlock(block) ? expandTemplateBlock(block, context) : block;
+        const templateBlock = block;
+        const useBottom = templateBlock.useBottomLayer !== false;
+        const useTop = templateBlock.useTopLayer !== false;
+        if (bottomLayers.length > 0 || topLayers.length > 0) {
+          expandedBlock.layers = [
+            ...useBottom ? bottomLayers : [],
+            ...expandedBlock.layers ?? [],
+            ...useTop ? topLayers : []
+          ];
+        }
+        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 context = createTemplateContext(theme, originalIndex, totalBlocks, viewport);
+      const expandedBlock = isTemplateBlock(block) ? expandTemplateBlock(block, context) : block;
+      const templateBlock = block;
+      const useBottom = templateBlock.useBottomLayer !== false;
+      const useTop = templateBlock.useTopLayer !== false;
+      if (bottomLayers.length > 0 || topLayers.length > 0) {
+        expandedBlock.layers = [
+          ...useBottom ? bottomLayers : [],
+          ...expandedBlock.layers ?? [],
+          ...useTop ? topLayers : []
+        ];
+      }
+      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;
+        }
+        break;
+      }
+    }
+    if (segmentExpandedBlocks.length === 1) {
+      const onlyBlock = segmentExpandedBlocks[0];
+      if (onlyBlock.startTime + onlyBlock.duration < segmentEnd) {
+        onlyBlock.duration = segmentEnd - onlyBlock.startTime;
+      }
+    }
+    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 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) => ({
+                ...layer,
+                id: `${layer.id}-split-${p}`
+              })),
+              transition: { type: "dissolve", duration: 1 },
+              template: block.template
+            };
+            expandedBlocks.push(splitBlock);
+          }
+        }
+      }
+    }
+  }
+  return expandedBlocks.filter((block) => block && block.duration > 0);
+}
+function getAvailableTemplates() {
+  return Object.keys(templateRegistry);
+}
+function hasTemplate(name) {
+  return name in templateRegistry;
+}
+
+// src/doc/utils/animationUtils.ts
+function getAnimationStyle(animation, _currentTime = 0) {
+  if (!animation || animation.type === "none") {
+    return { className: "", style: {} };
+  }
+  const className = getAnimationClassName(animation);
+  const style = getAnimationCSSVars(animation);
+  return { className, style };
+}
+function getAnimationClassName(animation) {
+  const { type, direction, panDirection } = animation;
+  switch (type) {
+    case "fadeIn":
+      return "anim-fadeIn";
+    case "fadeOut":
+      return "anim-fadeOut";
+    case "slowZoom":
+      if (panDirection === "left") return "anim-slowZoom-panLeft";
+      if (panDirection === "right") return "anim-slowZoom-panRight";
+      if (direction === "out") return "anim-slowZoom-out";
+      return "anim-slowZoom-in";
+    case "zoomIn":
+      return "anim-zoomIn";
+    case "zoomOut":
+      return "anim-zoomOut";
+    case "panLeft":
+      return "anim-panLeft";
+    case "panRight":
+      return "anim-panRight";
+    case "typewriter":
+      return "anim-typewriter";
+    default:
+      return "";
+  }
+}
+function getAnimationCSSVars(animation) {
+  const vars = {};
+  if (animation.duration !== void 0) {
+    vars["--anim-duration"] = `${animation.duration}s`;
+  }
+  if (animation.delay !== void 0) {
+    vars["--anim-delay"] = `${animation.delay}s`;
+  }
+  if (animation.easing) {
+    vars["--anim-easing"] = animation.easing;
+  }
+  return vars;
+}
+function getDefaultAnimationDuration(type) {
+  switch (type) {
+    case "slowZoom":
+    case "panLeft":
+    case "panRight":
+      return 8;
+    // Long, slow animations
+    case "typewriter":
+      return 3;
+    case "fadeIn":
+    case "fadeOut":
+      return 1;
+    case "zoomIn":
+    case "zoomOut":
+      return 0.5;
+    default:
+      return 1;
+  }
+}
+function getTransitionClass(type, entering) {
+  const mode = entering ? "enter" : "exit";
+  return `transition-${type}-${mode}`;
+}
+function getAnimationProgress(animation, currentTime, slideDuration) {
+  const delay = animation.delay || 0;
+  const duration = animation.duration || slideDuration;
+  if (currentTime < delay) return 0;
+  if (currentTime >= delay + duration) return 1;
+  return (currentTime - delay) / duration;
+}
+
+// src/doc/markdownToDoc.ts
+var SLUG_NON_WORD_RE = /[^\w\s-]/g;
+var SLUG_SPACES_RE = /[\s_]+/g;
+var SLUG_MULTI_HYPHEN_RE = /-+/g;
+var SLUG_TRIM_HYPHEN_RE = /^-|-$/g;
+function slugify(text) {
+  return text.toLowerCase().replace(SLUG_NON_WORD_RE, "").replace(SLUG_SPACES_RE, "-").replace(SLUG_MULTI_HYPHEN_RE, "-").replace(SLUG_TRIM_HYPHEN_RE, "") || // Trim leading/trailing hyphens
+  "block";
+}
+function createIdGenerator() {
+  const used = /* @__PURE__ */ new Map();
+  return (heading, _index) => {
+    const text = extractPlainText(heading);
+    const base = slugify(text);
+    const count = used.get(base) ?? 0;
+    used.set(base, count + 1);
+    if (count === 0) return base;
+    return `${base}-${count + 1}`;
+  };
+}
+function markdownToDoc(markdownDoc, options) {
+  const articleId = options?.articleId ?? "markdown-doc";
+  const defaultTemplate = options?.defaultTemplate ?? "sectionHeader";
+  const defaultDuration = options?.defaultDuration ?? 5;
+  const generateId = options?.generateId ?? createIdGenerator();
+  const rootBlocks = [];
+  let headingIndex = 0;
+  const stack = [];
+  let pendingContents = [];
+  let currentBlock = null;
+  function flushContents() {
+    if (currentBlock && pendingContents.length > 0) {
+      currentBlock.contents = (currentBlock.contents ?? []).concat(pendingContents);
+      pendingContents = [];
+    }
+  }
+  function makeBlock(heading) {
+    const id = heading ? generateId(heading, headingIndex++) : "preamble";
+    const annotation = heading?.templateAnnotation;
+    const template = annotation?.template ?? (heading ? defaultTemplate : void 0);
+    const block = {
+      id,
+      startTime: 0,
+      duration: defaultDuration,
+      audioSegment: 0,
+      template,
+      ...heading ? { sourceHeading: heading } : {}
+    };
+    if (annotation?.params) {
+      block.templateOverrides = annotation.params;
+    }
+    return block;
+  }
+  for (const node of markdownDoc.children) {
+    if (node.type === "heading") {
+      const heading = node;
+      const depth = heading.depth;
+      flushContents();
+      const newBlock = makeBlock(heading);
+      if (stack.length === 0) {
+        if (currentBlock && !currentBlock.sourceHeading) {
+          rootBlocks.push(currentBlock);
+        }
+        rootBlocks.push(newBlock);
+        stack.push({ block: newBlock, depth });
+      } else {
+        while (stack.length > 0 && stack[stack.length - 1].depth >= depth) {
+          stack.pop();
+        }
+        if (stack.length === 0) {
+          rootBlocks.push(newBlock);
+          stack.push({ block: newBlock, depth });
+        } else {
+          const parent = stack[stack.length - 1].block;
+          if (!parent.children) parent.children = [];
+          parent.children.push(newBlock);
+          stack.push({ block: newBlock, depth });
+        }
+      }
+      currentBlock = newBlock;
+    } else {
+      if (!currentBlock) {
+        currentBlock = makeBlock(null);
+      }
+      pendingContents.push(node);
+    }
+  }
+  flushContents();
+  if (currentBlock && !currentBlock.sourceHeading && !rootBlocks.includes(currentBlock)) {
+    rootBlocks.push(currentBlock);
+  }
+  const allBlocks = flattenBlocks(rootBlocks);
+  let currentTime = 0;
+  for (const block of allBlocks) {
+    block.startTime = currentTime;
+    currentTime += block.duration;
+  }
+  return {
+    articleId,
+    duration: currentTime,
+    blocks: rootBlocks,
+    audio: {
+      segments: []
+    },
+    ...markdownDoc.frontmatter ? { frontmatter: markdownDoc.frontmatter } : {}
+  };
+}
+function flattenBlocks(blocks) {
+  const result = [];
+  for (const block of blocks) {
+    result.push(block);
+    if (block.children) {
+      result.push(...flattenBlocks(block.children));
+    }
+  }
+  return result;
+}
+function countBlocks(blocks) {
+  let count = 0;
+  for (const block of blocks) {
+    count += 1;
+    if (block.children) {
+      count += countBlocks(block.children);
+    }
+  }
+  return count;
+}
+function getBlockDepth(block) {
+  return block.sourceHeading?.depth ?? 0;
+}
+
+// src/doc/docToMarkdown.ts
+function docToMarkdown(doc) {
+  const children = [];
+  function emitBlock(block) {
+    if (block.sourceHeading) {
+      const heading = ensureAnnotation(block, block.sourceHeading);
+      children.push(heading);
+    }
+    if (block.contents) {
+      children.push(...block.contents);
+    }
+    if (block.children) {
+      for (const child of block.children) {
+        emitBlock(child);
+      }
+    }
+  }
+  for (const block of doc.blocks) {
+    emitBlock(block);
+  }
+  return {
+    type: "document",
+    children
+  };
+}
+function ensureAnnotation(block, heading) {
+  if (heading.templateAnnotation) return heading;
+  const hasExplicitTemplate = block.template && block.template !== "sectionHeader";
+  const hasOverrides = block.templateOverrides && Object.keys(block.templateOverrides).length > 0;
+  if (!hasExplicitTemplate && !hasOverrides) return heading;
+  return {
+    ...heading,
+    children: [...heading.children],
+    templateAnnotation: {
+      template: block.template ?? "sectionHeader",
+      ...hasOverrides ? { params: block.templateOverrides } : {}
+    }
+  };
+}
+
+// src/doc/getLayers.ts
+function getLayers(block, context = {}) {
+  const theme = context.theme ?? DEFAULT_THEME;
+  const viewport = context.viewport ?? VIEWPORT_PRESETS.landscape;
+  const blockIndex = context.blockIndex ?? 0;
+  const totalBlocks = context.totalBlocks ?? 1;
+  const existingLayers = block.layers;
+  if (existingLayers && existingLayers.length > 0 && !isTemplateBlock(block)) {
+    return injectPersistentLayers(existingLayers, block, context);
+  }
+  if (isTemplateBlock(block) && block.template in templateRegistry) {
+    const templateName = block.template;
+    const templateCtx = createTemplateContext(theme, blockIndex, totalBlocks, viewport);
+    let layers;
+    try {
+      const templateFn = templateRegistry[templateName];
+      layers = templateFn(block, templateCtx);
+      if (!Array.isArray(layers)) {
+        console.error(`Template ${templateName} did not return an array, got:`, typeof layers);
+        layers = [];
+      }
+    } catch (err) {
+      console.error(`Error expanding template ${templateName}:`, err);
+      layers = [];
+    }
+    return injectPersistentLayers(layers, block, context);
+  }
+  return injectPersistentLayers([], block, context);
+}
+function injectPersistentLayers(layers, block, context) {
+  const { persistentLayers } = context;
+  if (!persistentLayers) return layers;
+  const bottomLayers = expandPersistentLayers(persistentLayers.bottomLayers);
+  const topLayers = expandPersistentLayers(persistentLayers.topLayers);
+  if (bottomLayers.length === 0 && topLayers.length === 0) return layers;
+  const templateBlock = block;
+  const useBottom = templateBlock.useBottomLayer !== false;
+  const useTop = templateBlock.useTopLayer !== false;
+  return [...useBottom ? bottomLayers : [], ...layers, ...useTop ? topLayers : []];
+}
+
+export {
+  expandPersistentLayers,
+  getDocStyleConfig,
+  titleBlock,
+  resolveColorScheme,
+  themedFontSize,
+  scaleAnimationDuration,
+  getDefaultAnimation,
+  shouldUseShadow,
+  getOverlayOpacity,
+  getTemplateHint,
+  sectionHeader,
+  DEFAULT_LAYOUT,
+  getAccentLayout,
+  createAccentLayers,
+  adjustY,
+  statHighlight,
+  quoteBlock,
+  factCard,
+  twoColumn,
+  dateEvent,
+  imageWithCaption,
+  mapBlock,
+  fullBleedQuote,
+  listBlock,
+  photoGrid,
+  definitionCard,
+  comparisonBar,
+  pullQuote,
+  videoWithCaption,
+  videoPullQuote,
+  coverBlock,
+  expandCoverBlock,
+  templateRegistry,
+  expandTemplateBlock,
+  expandDocBlocks,
+  getAvailableTemplates,
+  hasTemplate,
+  getAnimationStyle,
+  getDefaultAnimationDuration,
+  getTransitionClass,
+  getAnimationProgress,
+  markdownToDoc,
+  flattenBlocks,
+  countBlocks,
+  getBlockDepth,
+  docToMarkdown,
+  getLayers
+};
+//# sourceMappingURL=chunk-PJ7AODIM.js.map