@bendyline/squisq 1.4.0 → 1.5.0

package/dist/chunk-KSWJR66U.js

@@ -1,3706 +0,0 @@
-import {
-  DEFAULT_THEME,
-  resolveFontFamily
-} from "./chunk-B4EEON3N.js";
-import {
-  VIEWPORT_PRESETS,
-  createTemplateContext,
-  getTwoColumnPositions,
-  isPersistentLayerTemplate,
-  isTemplateBlock,
-  scaledFontSize2 as scaledFontSize
-} from "./chunk-5WFRKURX.js";
-import {
-  extractPlainText
-} from "./chunk-H3AXU4MJ.js";
-import {
-  estimateReadingTime
-} from "./chunk-4X3JQXNM.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/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;
-}
-var FALLBACK_BODY = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
-var FALLBACK_TITLE = 'Georgia, "Times New Roman", serif';
-var FALLBACK_MONO = 'Consolas, "Courier New", monospace';
-function getThemeFont(context, role) {
-  const { typography } = context.theme;
-  switch (role) {
-    case "title":
-      return resolveFontFamily(typography.titleFont, FALLBACK_TITLE);
-    case "body":
-      return resolveFontFamily(typography.bodyFont, FALLBACK_BODY);
-    case "mono":
-      return resolveFontFamily(typography.monoFont, FALLBACK_MONO);
-  }
-}
-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/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,
-          fontFamily: getThemeFont(context, "title"),
-          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,
-          fontFamily: getThemeFont(context, "body"),
-          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/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,
-        fontFamily: getThemeFont(context, "title"),
-        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,
-        fontFamily: getThemeFont(context, "title"),
-        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,
-        fontFamily: getThemeFont(context, "body"),
-        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,
-          fontFamily: getThemeFont(context, "body"),
-          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,
-        fontFamily: getThemeFont(context, "title"),
-        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,
-        fontFamily: getThemeFont(context, "title"),
-        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,
-          fontFamily: getThemeFont(context, "body"),
-          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,
-        fontFamily: getThemeFont(context, "title"),
-        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,
-        fontFamily: getThemeFont(context, "body"),
-        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,
-          fontFamily: getThemeFont(context, "body"),
-          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,
-          fontFamily: getThemeFont(context, "title"),
-          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,
-        fontFamily: getThemeFont(context, "body"),
-        fontWeight: "bold",
-        color: leftColors.text,
-        textAlign: "center",
-        lineHeight: 1.3
-      }
-    },
-    position: {
-      x: positions.left.x,
-      y: leftY,
-      anchor: "center",
-      width: columnWidth
-    },
-    animation: { type: "fadeIn", duration: 1 }
-  });
-  if (left.sublabel) {
-    layers.push({
-      type: "text",
-      id: "left-sublabel",
-      content: {
-        text: left.sublabel,
-        style: {
-          fontSize: sublabelFontSize,
-          fontFamily: getThemeFont(context, "body"),
-          color: theme.colors.textMuted,
-          textAlign: "center",
-          lineHeight: 1.4
-        }
-      },
-      position: {
-        x: positions.left.x,
-        y: leftSublabelY,
-        anchor: "center",
-        width: columnWidth
-      },
-      animation: { type: "fadeIn", duration: 0.8, delay: 0.3 }
-    });
-  }
-  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,
-        fontFamily: getThemeFont(context, "title"),
-        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,
-        fontFamily: getThemeFont(context, "body"),
-        fontWeight: "bold",
-        color: rightColors.text,
-        textAlign: "center",
-        lineHeight: 1.3
-      }
-    },
-    position: {
-      x: positions.right.x,
-      y: rightY,
-      anchor: "center",
-      width: columnWidth
-    },
-    animation: { type: "fadeIn", duration: 1, delay: 0.5 }
-  });
-  if (right.sublabel) {
-    layers.push({
-      type: "text",
-      id: "right-sublabel",
-      content: {
-        text: right.sublabel,
-        style: {
-          fontSize: sublabelFontSize,
-          fontFamily: getThemeFont(context, "body"),
-          color: theme.colors.textMuted,
-          textAlign: "center",
-          lineHeight: 1.4
-        }
-      },
-      position: {
-        x: positions.right.x,
-        y: rightSublabelY,
-        anchor: "center",
-        width: columnWidth
-      },
-      animation: { type: "fadeIn", duration: 0.8, delay: 0.8 }
-    });
-  }
-  return 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,
-        fontFamily: getThemeFont(context, "title"),
-        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,
-        fontFamily: getThemeFont(context, "body"),
-        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,
-          fontFamily: getThemeFont(context, "body"),
-          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,
-          fontFamily: getThemeFont(context, "title"),
-          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,
-            fontFamily: getThemeFont(context, "body"),
-            color: theme.colors.textMuted,
-            textAlign: "center",
-            lineHeight: 1.5
-          }
-        },
-        position: {
-          x: "50%",
-          y: "82%",
-          anchor: "center",
-          width: layout.maxTextWidth
-        },
-        animation: { type: "fadeIn", duration: 0.8, delay: 0.2 }
-      });
-    }
-    return layers;
-  }
-  if (caption) {
-    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,
-          fontFamily: getThemeFont(context, "body"),
-          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/featureBlock.ts
-function buildFeatureLayers(input, context, side) {
-  const { imageSrc, imageAlt, imageWidth, imageHeight, title, body } = input;
-  const { theme, layout } = context;
-  const sized = (imageWidth ?? 0) > 0 || (imageHeight ?? 0) > 0;
-  const stack = layout.stackColumns;
-  const titleFontSize = scaledFontSize(48, context, true);
-  const bodyFontSize = scaledFontSize(24, context, false);
-  let imgX;
-  let imgY;
-  let imgW;
-  let imgH;
-  let imageFit;
-  if (stack) {
-    imgX = "0";
-    imgY = "0";
-    imgW = "100%";
-    imgH = "50%";
-    imageFit = sized ? "contain" : "cover";
-  } else if (sized) {
-    const halfStart = side === "left" ? 5 : 55;
-    imgX = `${halfStart}%`;
-    imgY = "5%";
-    imgW = "40%";
-    imgH = "90%";
-    imageFit = "contain";
-  } else {
-    imgX = side === "left" ? "0" : "50%";
-    imgY = "0";
-    imgW = "50%";
-    imgH = "100%";
-    imageFit = "cover";
-  }
-  const COLUMN_INSET = 4;
-  const textColumnWidth = stack ? 90 : 42;
-  const textX = stack ? `${(100 - textColumnWidth) / 2}%` : side === "left" ? `${50 + COLUMN_INSET}%` : `${50 - COLUMN_INSET}%`;
-  const titleY = stack ? "60%" : body ? "42%" : "50%";
-  const bodyY = stack ? "78%" : title ? "55%" : "50%";
-  const textAnchor = side === "right" && !stack ? "top-right" : "top-left";
-  const textAlign = side === "right" && !stack ? "right" : "left";
-  const layers = [
-    {
-      type: "shape",
-      id: "feature-bg",
-      content: { shape: "rect", fill: theme.colors.background },
-      position: { x: 0, y: 0, width: "100%", height: "100%" }
-    }
-  ];
-  if (imageSrc) {
-    layers.push({
-      type: "image",
-      id: "feature-image",
-      content: {
-        src: imageSrc,
-        alt: imageAlt ?? title ?? "",
-        fit: imageFit
-      },
-      position: { x: imgX, y: imgY, width: imgW, height: imgH }
-    });
-  }
-  if (title) {
-    layers.push({
-      type: "text",
-      id: "feature-title",
-      content: {
-        text: title,
-        style: {
-          fontSize: titleFontSize,
-          fontFamily: getThemeFont(context, "title"),
-          fontWeight: "bold",
-          color: theme.colors.text,
-          textAlign,
-          lineHeight: 1.2
-        }
-      },
-      position: {
-        x: textX,
-        y: titleY,
-        anchor: textAnchor,
-        width: `${textColumnWidth}%`
-      },
-      animation: { type: "fadeIn", duration: 0.8 }
-    });
-  }
-  if (body) {
-    layers.push({
-      type: "text",
-      id: "feature-body",
-      content: {
-        text: body,
-        style: {
-          fontSize: bodyFontSize,
-          fontFamily: getThemeFont(context, "body"),
-          color: theme.colors.textMuted,
-          textAlign,
-          lineHeight: 1.5
-        }
-      },
-      position: {
-        x: textX,
-        y: bodyY,
-        anchor: textAnchor,
-        width: `${textColumnWidth}%`
-      },
-      animation: { type: "fadeIn", duration: 0.8, delay: 0.2 }
-    });
-  }
-  return layers;
-}
-function leftFeature(input, context) {
-  return buildFeatureLayers(input, context, "left");
-}
-function rightFeature(input, context) {
-  return buildFeatureLayers(input, context, "right");
-}
-
-// src/doc/templates/mapBlock.ts
-function mapBlock(input, context) {
-  const {
-    center,
-    zoom,
-    mapStyle = "terrain",
-    title,
-    caption,
-    markers,
-    ambientMotion,
-    staticSrc
-  } = input;
-  const { theme, layout } = context;
-  const titleFontSize = 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,
-          fontFamily: getThemeFont(context, "title"),
-          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,
-          fontFamily: getThemeFont(context, "body"),
-          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,
-          fontFamily: getThemeFont(context, "title"),
-          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 { title, accentImage } = input;
-  const items = Array.isArray(input.items) ? input.items : [];
-  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,
-          fontFamily: getThemeFont(context, "title"),
-          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 centerX = parseFloat(accentLayout.textCenterX);
-  const widthPct = parseFloat(accentLayout.textWidth);
-  const leftX = Number.isFinite(centerX) && Number.isFinite(widthPct) ? `${centerX - widthPct / 2}%` : "8%";
-  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,
-          fontFamily: getThemeFont(context, "body"),
-          color: theme.colors.text,
-          textAlign: "left",
-          lineHeight: 1.2,
-          shadow: !!accentImage
-        }
-      },
-      position: {
-        x: leftX,
-        y: adjustY(`${y}%`, accentLayout),
-        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,
-            fontFamily: getThemeFont(context, "body"),
-            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,
-          fontFamily: getThemeFont(context, "body"),
-          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,
-        fontFamily: getThemeFont(context, "title"),
-        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,
-        fontFamily: getThemeFont(context, "body"),
-        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,
-          fontFamily: getThemeFont(context, "body"),
-          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,
-          fontFamily: getThemeFont(context, "body"),
-          color: theme.colors.textMuted
-        }
-      },
-      position: { x: `${barStartX}%`, y: `${topBarY - 8}%` }
-    },
-    // Top bar value
-    {
-      type: "text",
-      id: "left-value",
-      content: {
-        text: leftDisplay,
-        style: {
-          fontSize: valueFontSize,
-          fontFamily: getThemeFont(context, "body"),
-          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,
-          fontFamily: getThemeFont(context, "body"),
-          color: theme.colors.textMuted
-        }
-      },
-      position: { x: `${barStartX}%`, y: `${bottomBarY - 8}%` }
-    },
-    // Bottom bar value
-    {
-      type: "text",
-      id: "right-value",
-      content: {
-        text: rightDisplay,
-        style: {
-          fontSize: valueFontSize,
-          fontFamily: getThemeFont(context, "body"),
-          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,
-          fontFamily: getThemeFont(context, "title"),
-          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,
-          fontFamily: getThemeFont(context, "title"),
-          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,
-          fontFamily: getThemeFont(context, "body"),
-          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,
-          fontFamily: getThemeFont(context, "body"),
-          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,
-          fontFamily: getThemeFont(context, "body"),
-          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,
-          fontFamily: getThemeFont(context, "title"),
-          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,
-          fontFamily: getThemeFont(context, "title"),
-          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,
-          fontFamily: getThemeFont(context, "body"),
-          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/dataTable.ts
-function dataTable(input, context) {
-  const { title, headers, rows, align, colorScheme } = input;
-  const { theme } = context;
-  const colors = resolveColorScheme(context, colorScheme);
-  const titleFontSize = scaledFontSize(48, context, true);
-  const tableFontSize = scaledFontSize(28, context, false);
-  const layers = [
-    createBackgroundLayer(
-      "bg",
-      `linear-gradient(170deg, ${theme.colors.background} 0%, #0f1520 100%)`
-    )
-  ];
-  if (title) {
-    layers.push({
-      type: "text",
-      id: "title",
-      content: {
-        text: title,
-        style: {
-          fontSize: titleFontSize,
-          fontFamily: getThemeFont(context, "title"),
-          fontWeight: "bold",
-          color: theme.colors.text,
-          textAlign: "center",
-          shadow: true
-        }
-      },
-      position: { x: "50%", y: "10%", width: "80%", anchor: "center" },
-      animation: { type: "fadeIn", duration: 0.8 }
-    });
-  }
-  layers.push({
-    type: "table",
-    id: "table",
-    content: {
-      headers,
-      rows,
-      align,
-      style: {
-        headerBackground: colors.accent,
-        headerColor: colors.text,
-        cellBackground: "rgba(255,255,255,0.05)",
-        cellColor: theme.colors.text,
-        borderColor: "rgba(255,255,255,0.12)",
-        fontSize: tableFontSize,
-        fontFamily: getThemeFont(context, "body"),
-        headerFontFamily: getThemeFont(context, "title"),
-        borderRadius: 8
-      }
-    },
-    position: {
-      x: "10%",
-      y: title ? "18%" : "8%",
-      width: "80%",
-      height: title ? "74%" : "84%"
-    },
-    animation: { type: "fadeIn", duration: 1, delay: title ? 0.4 : 0 }
-  });
-  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(120, context, true);
-  const subtitleFontSize = scaledFontSize(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
-        },
-        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 {
-    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: "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: true
-      }
-    },
-    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"),
-          color: 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 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 = {
-  title: titleBlock,
-  sectionHeader,
-  statHighlight,
-  quote: quoteBlock,
-  factCard,
-  twoColumn,
-  dateEvent,
-  imageWithCaption,
-  leftFeature,
-  rightFeature,
-  map: mapBlock,
-  fullBleedQuote,
-  list: listBlock,
-  photoGrid,
-  definitionCard,
-  comparisonBar,
-  pullQuote,
-  videoWithCaption,
-  videoPullQuote,
-  dataTable
-};
-var TEMPLATE_ALIASES = {
-  titleBlock: "title",
-  quoteBlock: "quote",
-  mapBlock: "map",
-  listBlock: "list"
-};
-function resolveTemplateName(name) {
-  return TEMPLATE_ALIASES[name] ?? name;
-}
-function expandTemplateBlock(templateBlock, context) {
-  const resolved = resolveTemplateName(templateBlock.template);
-  const templateFn = templateRegistry[resolved];
-  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 resolveTemplateName(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 rawTemplate = annotation?.template ?? (heading ? defaultTemplate : void 0);
-    const template = rawTemplate != null ? resolveTemplateName(rawTemplate) : void 0;
-    const title = heading ? extractPlainText(heading) : void 0;
-    const block = {
-      id,
-      startTime: 0,
-      duration: defaultDuration,
-      audioSegment: 0,
-      template,
-      ...heading ? { sourceHeading: heading } : {},
-      ...title ? { title } : {}
-    };
-    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);
-  const minDuration = 3;
-  const phrases = [];
-  for (const block of allBlocks) {
-    const bodyText = getBlockBodyText(block);
-    if (bodyText.length > 0) {
-      const estimate = estimateReadingTime(bodyText);
-      block.duration = Math.max(minDuration, estimate.seconds);
-    } else {
-      block.duration = defaultDuration;
-    }
-  }
-  let currentTime = 0;
-  for (const block of allBlocks) {
-    block.startTime = currentTime;
-    const bodyText = getBlockBodyText(block);
-    if (bodyText.length > 0) {
-      const sentences = splitIntoSentences(bodyText);
-      if (sentences.length > 0) {
-        const timePerSentence = block.duration / sentences.length;
-        for (let i = 0; i < sentences.length; i++) {
-          phrases.push({
-            text: sentences[i],
-            startTime: currentTime + i * timePerSentence,
-            endTime: currentTime + (i + 1) * timePerSentence,
-            audioSegment: 0
-          });
-        }
-      }
-    }
-    currentTime += block.duration;
-  }
-  const captions = phrases.length > 0 ? { phrases, generatedAt: (/* @__PURE__ */ new Date()).toISOString(), version: 1 } : void 0;
-  const doc = {
-    articleId,
-    duration: currentTime,
-    blocks: rootBlocks,
-    audio: {
-      segments: []
-    },
-    ...captions ? { captions } : {},
-    ...markdownDoc.frontmatter ? { frontmatter: markdownDoc.frontmatter } : {}
-  };
-  if (options?.generateCoverBlock ?? true) {
-    const coverConfig = buildStartBlock(markdownDoc, rootBlocks);
-    if (coverConfig) {
-      doc.startBlock = coverConfig;
-    }
-  }
-  return doc;
-}
-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;
-}
-function getBlockBodyText(block) {
-  if (!block.contents || block.contents.length === 0) return "";
-  return block.contents.map((node) => extractPlainText(node)).join("\n").trim();
-}
-var MAX_PHRASE_WORDS = 12;
-function splitIntoSentences(text) {
-  const lines = text.split(/\n+/).map((s) => s.trim()).filter((s) => s.length > 0);
-  const sentenceRe = /(?<=[.!?])\s+/;
-  const fragments = [];
-  for (const line of lines) {
-    const sentences = line.split(sentenceRe).map((s) => s.trim()).filter((s) => s.length > 0);
-    fragments.push(...sentences);
-  }
-  if (fragments.length === 0) return [];
-  const split = [];
-  for (const frag of fragments) {
-    const words = frag.split(/\s+/);
-    if (words.length > MAX_PHRASE_WORDS) {
-      const mid = Math.floor(frag.length / 2);
-      const clauseRe = /[,;]\s+|\s+—\s+|\s+-\s+/g;
-      let bestSplit = -1;
-      let bestDist = Infinity;
-      let match;
-      while ((match = clauseRe.exec(frag)) !== null) {
-        const dist = Math.abs(match.index - mid);
-        if (dist < bestDist) {
-          bestDist = dist;
-          bestSplit = match.index + match[0].length;
-        }
-      }
-      if (bestSplit > 0 && bestSplit < frag.length - 5) {
-        split.push(frag.slice(0, bestSplit).trim());
-        split.push(frag.slice(bestSplit).trim());
-      } else {
-        split.push(frag);
-      }
-    } else {
-      split.push(frag);
-    }
-  }
-  const merged = [split[0]];
-  for (let i = 1; i < split.length; i++) {
-    if (split[i].length < 15 && merged.length > 0) {
-      merged[merged.length - 1] += " " + split[i];
-    } else {
-      merged.push(split[i]);
-    }
-  }
-  return merged;
-}
-function findFirstHtmlImage(nodes) {
-  for (const node of nodes) {
-    if (node.type !== "htmlElement") continue;
-    if (node.tagName === "img" && node.attributes.src) {
-      return { url: node.attributes.src, alt: node.attributes.alt };
-    }
-    const nested = findFirstHtmlImage(node.children);
-    if (nested) return nested;
-  }
-  return void 0;
-}
-function findFirstImage(node) {
-  if (node.type === "image") {
-    const img = node;
-    return { url: img.url, alt: img.alt };
-  }
-  if (node.type === "htmlBlock" || node.type === "htmlInline") {
-    const html = node;
-    if (html.htmlChildren) {
-      const found = findFirstHtmlImage(html.htmlChildren);
-      if (found) return found;
-    }
-  }
-  if ("children" in node && Array.isArray(node.children)) {
-    for (const child of node.children) {
-      const found = findFirstImage(child);
-      if (found) return found;
-    }
-  }
-  return void 0;
-}
-function buildStartBlock(markdownDoc, rootBlocks) {
-  const firstH1 = rootBlocks.find((b) => b.sourceHeading?.depth === 1);
-  if (!firstH1) return void 0;
-  const title = firstH1.title ?? extractPlainText(firstH1.sourceHeading);
-  if (!title) return void 0;
-  const subtitle = firstH1.contents?.[0]?.type === "paragraph" ? extractPlainText(firstH1.contents[0]) : void 0;
-  const firstImage = findFirstImage(markdownDoc);
-  const config = {
-    title,
-    ...subtitle ? { subtitle } : {},
-    ...firstImage ? { heroSrc: firstImage.url, heroAlt: firstImage.alt ?? title } : {},
-    ambientMotion: "zoomIn"
-  };
-  return config;
-}
-
-// 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)) {
-    const resolved = resolveTemplateName(block.template);
-    if (resolved in templateRegistry) {
-      const templateName = resolved;
-      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 : []];
-}
-
-// src/doc/audioMapping.ts
-function parseTimingJson(data) {
-  try {
-    const text = new TextDecoder().decode(data);
-    const parsed = JSON.parse(text);
-    if (parsed && typeof parsed.sourceText === "string" && typeof parsed.duration === "number") {
-      return {
-        sourceText: parsed.sourceText,
-        bookmarks: Array.isArray(parsed.bookmarks) ? parsed.bookmarks : [],
-        duration: parsed.duration
-      };
-    }
-    return null;
-  } catch {
-    return null;
-  }
-}
-function normalizeToWords(text) {
-  const words = text.toLowerCase().replace(/[^\w\s]/g, " ").split(/\s+/).filter((w) => w.length > 2);
-  return new Set(words);
-}
-function scoreTextSimilarity(a, b) {
-  const wordsA = normalizeToWords(a);
-  const wordsB = normalizeToWords(b);
-  if (wordsA.size === 0 || wordsB.size === 0) return 0;
-  let intersection = 0;
-  for (const w of wordsA) {
-    if (wordsB.has(w)) intersection++;
-  }
-  const union = (/* @__PURE__ */ new Set([...wordsA, ...wordsB])).size;
-  return union > 0 ? intersection / union : 0;
-}
-function slugify2(text) {
-  return text.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
-}
-function blockToPlainText(block) {
-  const parts = [];
-  if (block.title) parts.push(block.title);
-  if (block.contents) {
-    for (const node of block.contents) {
-      parts.push(extractPlainText(node));
-    }
-  }
-  return parts.join("\n");
-}
-function flattenForAudio(blocks) {
-  const result = [];
-  for (const block of blocks) {
-    if (block.children && block.children.length > 0) {
-      result.push(...flattenForAudio(block.children));
-    } else {
-      result.push(block);
-    }
-  }
-  return result;
-}
-var AUDIO_ONLY_EXTENSIONS = [".mp3", ".wav", ".ogg", ".m4a"];
-var AMBIGUOUS_EXTENSIONS = [".webm", ".mp4"];
-function isNarrationAudioPath(path) {
-  const lower = path.toLowerCase();
-  if (AUDIO_ONLY_EXTENSIONS.some((ext) => lower.endsWith(ext))) return true;
-  if (AMBIGUOUS_EXTENSIONS.some((ext) => lower.endsWith(ext))) {
-    return lower.startsWith("audio/");
-  }
-  return false;
-}
-function stripAudioExtension(filename) {
-  const lower = filename.toLowerCase();
-  for (const ext of [...AUDIO_ONLY_EXTENSIONS, ...AMBIGUOUS_EXTENSIONS]) {
-    if (lower.endsWith(ext)) return filename.slice(0, -ext.length);
-  }
-  return filename;
-}
-function parseConsolidatedTiming(data) {
-  try {
-    const text = new TextDecoder().decode(data);
-    const parsed = JSON.parse(text);
-    if (parsed && parsed.version === 2 && parsed.sections) {
-      return parsed.sections;
-    }
-    return null;
-  } catch {
-    return null;
-  }
-}
-async function discoverMp3s(container) {
-  const files = await container.listFiles();
-  const audioFiles = files.filter((f) => isNarrationAudioPath(f.path));
-  const results = [];
-  let consolidatedSections = null;
-  const consolidatedData = await container.readFile("timing.json");
-  if (consolidatedData) {
-    consolidatedSections = parseConsolidatedTiming(consolidatedData);
-  }
-  for (const file of audioFiles) {
-    const filename = file.path.split("/").pop() ?? file.path;
-    let timing = null;
-    if (consolidatedSections) {
-      const audioBase = stripAudioExtension(filename);
-      for (const [sectionName, sectionTiming] of Object.entries(consolidatedSections)) {
-        if (audioBase.endsWith(`-${sectionName}`)) {
-          timing = sectionTiming;
-          break;
-        }
-      }
-    }
-    if (!timing) {
-      const timingPath = `${file.path}.timing.json`;
-      const timingData = await container.readFile(timingPath);
-      if (timingData) {
-        timing = parseTimingJson(timingData);
-      }
-    }
-    results.push({ path: file.path, filename, timing });
-  }
-  return results;
-}
-function resolveFromAnnotations(blocks, mp3s) {
-  const matches = [];
-  const flat = flattenForAudio(blocks);
-  for (const block of flat) {
-    const audioRef = block.templateOverrides?.audio;
-    if (!audioRef) continue;
-    const mp3 = mp3s.find(
-      (m) => m.filename === audioRef || m.path === audioRef || m.path.endsWith(`/${audioRef}`)
-    );
-    if (mp3) {
-      matches.push({ block, mp3 });
-    }
-  }
-  return matches;
-}
-var MIN_CONTENT_SIMILARITY = 0.35;
-var MIN_FILENAME_SIMILARITY = 0.5;
-function autoMatchBlocks(blocks, mp3s) {
-  const flat = flattenForAudio(blocks);
-  if (flat.length === 0 || mp3s.length === 0) return [];
-  const scoredPairs = [];
-  for (let mi = 0; mi < mp3s.length; mi++) {
-    const mp3 = mp3s[mi];
-    for (let bi = 0; bi < flat.length; bi++) {
-      const block = flat[bi];
-      const blockText = blockToPlainText(block);
-      if (!blockText.trim()) continue;
-      let score = 0;
-      if (mp3.timing?.sourceText) {
-        score = scoreTextSimilarity(mp3.timing.sourceText, blockText);
-      }
-      if (score < MIN_CONTENT_SIMILARITY && block.title) {
-        const titleSlug = slugify2(block.title);
-        const fileSlug = slugify2(stripAudioExtension(mp3.filename));
-        if (fileSlug.includes(titleSlug) && titleSlug.length >= 3) {
-          score = Math.max(score, MIN_FILENAME_SIMILARITY + 0.1);
-        }
-      }
-      if (score >= MIN_CONTENT_SIMILARITY) {
-        scoredPairs.push({ block, blockIndex: bi, mp3, mp3Index: mi, score });
-      }
-    }
-  }
-  scoredPairs.sort((a, b) => b.score - a.score);
-  const usedBlocks = /* @__PURE__ */ new Set();
-  const usedMp3s = /* @__PURE__ */ new Set();
-  const matches = [];
-  for (const pair of scoredPairs) {
-    if (usedBlocks.has(pair.blockIndex) || usedMp3s.has(pair.mp3Index)) continue;
-    usedBlocks.add(pair.blockIndex);
-    usedMp3s.add(pair.mp3Index);
-    matches.push({ block: pair.block, mp3: pair.mp3, score: pair.score });
-  }
-  return matches;
-}
-async function resolveAudioMapping(doc, container) {
-  const mp3s = await discoverMp3s(container);
-  if (mp3s.length === 0) return doc;
-  let matches = resolveFromAnnotations(doc.blocks, mp3s);
-  if (matches.length === 0) {
-    matches = autoMatchBlocks(doc.blocks, mp3s).map((m) => ({
-      block: m.block,
-      mp3: m.mp3
-    }));
-  }
-  if (matches.length === 0) return doc;
-  const flat = flattenForAudio(doc.blocks);
-  const blockOrder = new Map(flat.map((b, i) => [b.id, i]));
-  matches.sort((a, b) => (blockOrder.get(a.block.id) ?? 0) - (blockOrder.get(b.block.id) ?? 0));
-  const segments = [];
-  const blockToSegment = /* @__PURE__ */ new Map();
-  let startTime = 0;
-  for (let i = 0; i < matches.length; i++) {
-    const { block, mp3 } = matches[i];
-    const duration = mp3.timing?.duration ?? 30;
-    segments.push({
-      src: mp3.path,
-      name: block.title ?? block.id,
-      duration,
-      startTime
-    });
-    blockToSegment.set(block.id, i);
-    startTime += duration;
-  }
-  const newBlocks = assignSegmentIndices(doc.blocks, blockToSegment);
-  return {
-    ...doc,
-    blocks: newBlocks,
-    duration: startTime,
-    audio: { segments }
-  };
-}
-function assignSegmentIndices(blocks, blockToSegment, inheritedSegment) {
-  return blocks.map((block) => {
-    const segment = blockToSegment.get(block.id) ?? inheritedSegment ?? block.audioSegment;
-    const newBlock = {
-      ...block,
-      audioSegment: segment
-    };
-    if (block.children) {
-      newBlock.children = assignSegmentIndices(block.children, blockToSegment, segment);
-    }
-    return newBlock;
-  });
-}
-
-export {
-  expandPersistentLayers,
-  getDocStyleConfig,
-  resolveColorScheme,
-  getThemeFont,
-  themedFontSize,
-  scaleAnimationDuration,
-  getDefaultAnimation,
-  shouldUseShadow,
-  getOverlayOpacity,
-  getTemplateHint,
-  titleBlock,
-  sectionHeader,
-  DEFAULT_LAYOUT,
-  getAccentLayout,
-  createAccentLayers,
-  adjustY,
-  statHighlight,
-  quoteBlock,
-  factCard,
-  twoColumn,
-  dateEvent,
-  imageWithCaption,
-  leftFeature,
-  rightFeature,
-  mapBlock,
-  fullBleedQuote,
-  listBlock,
-  photoGrid,
-  definitionCard,
-  comparisonBar,
-  pullQuote,
-  videoWithCaption,
-  videoPullQuote,
-  dataTable,
-  coverBlock,
-  expandCoverBlock,
-  templateRegistry,
-  TEMPLATE_ALIASES,
-  resolveTemplateName,
-  expandTemplateBlock,
-  expandDocBlocks,
-  getAvailableTemplates,
-  hasTemplate,
-  getAnimationStyle,
-  getDefaultAnimationDuration,
-  getTransitionClass,
-  getAnimationProgress,
-  markdownToDoc,
-  flattenBlocks,
-  countBlocks,
-  getBlockDepth,
-  docToMarkdown,
-  getLayers,
-  scoreTextSimilarity,
-  resolveAudioMapping
-};
-//# sourceMappingURL=chunk-KSWJR66U.js.map