@bendyline/squisq 2.0.1 → 2.2.0

package/dist/{chunk-X6DUONGT.js → chunk-7ARJZYQY.js}

@@ -1,10 +1,11 @@
 import {
   anchorPoint,
+  base64ToUtf8,
   connectorPath,
   lineStyleDasharray,
   shapePath,
   snapEndpoints
-} from "./chunk-TUWMK62B.js";
+} from "./chunk-PUS54YU6.js";
 import {
   detectAsciiDiagram,
   detectAsciiTimeline,
@@ -19,7 +20,7 @@ import {
   parseAsciiTimeline,
   pickAutoTemplate,
   profileBlockContents
-} from "./chunk-5UYI3RJB.js";
+} from "./chunk-FDYDYL77.js";
 import {
   DEFAULT_THEME,
   FRONTMATTER_CUSTOM_TEMPLATES_KEY,
@@ -30,7 +31,7 @@ import {
   resolveFontFamily,
   validateTheme,
   withAlpha
-} from "./chunk-W4O2TX5I.js";
+} from "./chunk-C33GTPUZ.js";
 import {
   VIEWPORT_PRESETS,
   cloneData,
@@ -39,7 +40,7 @@ import {
   isPersistentLayerTemplate,
   isTemplateBlock,
   scaledFontSize2 as scaledFontSize
-} from "./chunk-5J4HKRJF.js";
+} from "./chunk-BAOV476U.js";
 import {
   KNOWN_BLOCK_META_KEYS,
   coerceAnnotationValues,
@@ -48,25 +49,25 @@ import {
   parseTimeSeconds,
   splitKeyValueToken,
   tokenizeAttrTokens
-} from "./chunk-R2YZTCLO.js";
+} from "./chunk-ZQKZSJAX.js";
 import {
   extractPlainText,
   readFrontmatterThemeId,
   walkMarkdownTree
-} from "./chunk-AMIR72JP.js";
+} from "./chunk-BCCXTMN5.js";
 import {
   resolveBlockTransition
-} from "./chunk-QE7TWGVT.js";
+} from "./chunk-4VOD55SX.js";
 import {
   estimateReadingTime
-} from "./chunk-4X3JQXNM.js";
+} from "./chunk-XOFT65EX.js";
 import {
   estimateSpokenWordCount
-} from "./chunk-3E5F2XMR.js";
+} from "./chunk-67L6WRJN.js";
 import {
   SeededRandom,
   hashString
-} from "./chunk-FVTQSNR7.js";
+} from "./chunk-XRW6P7IF.js";
 
 // src/doc/templates/persistentLayers.ts
 var GRADIENT_PRESETS = {
@@ -198,14 +199,19 @@ function expandTitleCaption(config) {
   const isBottom = config.position.includes("bottom");
   const isLeft = config.position.includes("left");
   const pad = 3;
+  const thumbPad = 1.5;
   const pillHeight = hasSubtitle ? "15%" : "7%";
   const bgYPos = isBottom ? hasSubtitle ? "78%" : "84%" : "2%";
-  const bgXPos = isLeft ? `${pad}%` : "68%";
-  const thumbW = hasSubtitle ? "6%" : "5%";
+  const pillW = config.showThumbnail ? 30 : 28;
+  const pillX = isLeft ? pad : 100 - pad - pillW;
+  const bgXPos = `${pillX}%`;
+  const thumbWNum = hasSubtitle ? 6 : 5;
+  const thumbW = `${thumbWNum}%`;
   const thumbH = hasSubtitle ? "10%" : "5%";
-  const thumbPad = 1.5;
-  const textX = config.showThumbnail && isLeft ? `${pad + thumbPad + 6 + thumbPad}%` : `${pad + thumbPad}%`;
-  const textWidth = config.showThumbnail ? "19%" : "24%";
+  const innerX = pillX + thumbPad;
+  const innerW = pillW - thumbPad * 2;
+  const textX = config.showThumbnail && isLeft ? `${innerX + thumbWNum + thumbPad}%` : `${innerX}%`;
+  const textWidth = config.showThumbnail ? `${innerW - thumbWNum - thumbPad}%` : `${innerW}%`;
   const titleYPos = isBottom ? hasSubtitle ? "80%" : "86%" : "4%";
   layers.push({
     type: "shape",
@@ -218,12 +224,12 @@ function expandTitleCaption(config) {
     position: {
       x: bgXPos,
       y: bgYPos,
-      width: config.showThumbnail ? "30%" : "28%",
+      width: `${pillW}%`,
       height: pillHeight
     }
   });
   if (config.showThumbnail && config.thumbnailSrc) {
-    const thumbX = isLeft ? `${pad + thumbPad}%` : "93%";
+    const thumbX = isLeft ? `${innerX}%` : `${pillX + pillW - thumbPad - thumbWNum}%`;
     const thumbY = isBottom ? hasSubtitle ? `${78 + thumbPad}%` : "85%" : "3%";
     layers.push({
       type: "image",
@@ -620,84 +626,6 @@ function titleBlock(input, context) {
   return layers;
 }
 
-// src/doc/templates/sectionHeader.ts
-function sectionHeader(input, context) {
-  const { title = "", colorScheme = "blue", imageSrc, imageAlt, ambientMotion } = input;
-  const { theme, layout } = context;
-  const treatment = themedImageTreatment(context, input.imageTreatment);
-  const colors = resolveColorScheme(context, colorScheme);
-  const titleFontSize = themedFontSize(84, context, true);
-  const layers = [];
-  if (imageSrc) {
-    layers.push({
-      type: "image",
-      id: "bg-image",
-      content: {
-        src: imageSrc,
-        alt: imageAlt || title,
-        fit: "cover",
-        ...treatment ? { treatment } : {}
-      },
-      position: { x: 0, y: 0, width: "100%", height: "100%" },
-      animation: ambientMotion ? { type: ambientMotion, duration: 8 } : { type: "slowZoom", duration: 8, direction: "in" }
-    });
-    layers.push({
-      type: "shape",
-      id: "overlay",
-      content: {
-        shape: "rect",
-        fill: themedScrim(context)
-      },
-      position: { x: 0, y: 0, width: "100%", height: "100%" }
-    });
-  } else {
-    layers.push({
-      type: "shape",
-      id: "bg",
-      content: {
-        shape: "rect",
-        fill: colors.bg
-      },
-      position: { x: 0, y: 0, width: "100%", height: "100%" }
-    });
-    layers.push({
-      type: "shape",
-      id: "line-top",
-      content: { shape: "rect", fill: `${colors.text}33` },
-      position: { x: "50%", y: "40%", width: "20%", height: "2px", anchor: "center" }
-    });
-    layers.push({
-      type: "shape",
-      id: "line-bottom",
-      content: { shape: "rect", fill: `${colors.text}33` },
-      position: { x: "50%", y: "60%", width: "20%", height: "2px", anchor: "center" }
-    });
-  }
-  layers.push({
-    type: "text",
-    id: "title",
-    content: {
-      text: title,
-      style: {
-        fontSize: titleFontSize,
-        fontFamily: getThemeFont(context, "title"),
-        fontWeight: "bold",
-        color: imageSrc ? theme.colors.text : colors.text,
-        textAlign: "center",
-        shadow: shouldUseShadow(context)
-      }
-    },
-    position: {
-      x: "50%",
-      y: "50%",
-      anchor: "center",
-      width: layout.maxTextWidth
-    },
-    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1.5 })
-  });
-  return layers;
-}
-
 // src/doc/templates/accentImage.ts
 var PERCENTAGE_RE = /^(\d+(?:\.\d+)?)\s*%?$/;
 var DEFAULT_LAYOUT = {
@@ -928,6 +856,92 @@ function adjustY(originalY, layout) {
   return yStr;
 }
 
+// src/doc/templates/sectionHeader.ts
+function sectionHeader(input, context) {
+  const { title = "", colorScheme = "blue", imageSrc, imageAlt, ambientMotion } = input;
+  const { theme, layout } = context;
+  const treatment = themedImageTreatment(context, input.imageTreatment);
+  const colors = resolveColorScheme(context, colorScheme);
+  const titleFontSize = themedFontSize(84, context, true);
+  const layers = [];
+  if (imageSrc) {
+    layers.push({
+      type: "image",
+      id: "bg-image",
+      content: {
+        src: imageSrc,
+        alt: imageAlt || title,
+        fit: "cover",
+        ...treatment ? { treatment } : {}
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" },
+      // Route through mapAmbientMotion like every other image template: the
+      // authored vocabulary (`zoomIn`/`panLeft`/…) are NOT AnimationTypes, so
+      // passing them raw produced an unknown animation here while the same
+      // input animated correctly on imageWithCaption/coverBlock/accentImage.
+      animation: mapAmbientMotion(ambientMotion, 8) ?? {
+        type: "slowZoom",
+        duration: 8,
+        direction: "in"
+      }
+    });
+    layers.push({
+      type: "shape",
+      id: "overlay",
+      content: {
+        shape: "rect",
+        fill: themedScrim(context)
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    });
+  } else {
+    layers.push({
+      type: "shape",
+      id: "bg",
+      content: {
+        shape: "rect",
+        fill: colors.bg
+      },
+      position: { x: 0, y: 0, width: "100%", height: "100%" }
+    });
+    layers.push({
+      type: "shape",
+      id: "line-top",
+      content: { shape: "rect", fill: withAlpha(colors.text, 0.2) },
+      position: { x: "50%", y: "40%", width: "20%", height: "2px", anchor: "center" }
+    });
+    layers.push({
+      type: "shape",
+      id: "line-bottom",
+      content: { shape: "rect", fill: withAlpha(colors.text, 0.2) },
+      position: { x: "50%", y: "60%", width: "20%", height: "2px", anchor: "center" }
+    });
+  }
+  layers.push({
+    type: "text",
+    id: "title",
+    content: {
+      text: title,
+      style: {
+        fontSize: titleFontSize,
+        fontFamily: getThemeFont(context, "title"),
+        fontWeight: "bold",
+        color: imageSrc ? theme.colors.text : colors.text,
+        textAlign: "center",
+        shadow: shouldUseShadow(context)
+      }
+    },
+    position: {
+      x: "50%",
+      y: "50%",
+      anchor: "center",
+      width: layout.maxTextWidth
+    },
+    animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1.5 })
+  });
+  return layers;
+}
+
 // src/doc/templates/statHighlight.ts
 function statHighlight(input, context) {
   const { stat, description, detail, colorScheme = "blue", accentImage } = input;
@@ -1520,7 +1534,7 @@ function imageWithCaption(input, context) {
     imageSrc,
     imageAlt,
     caption: rawCaption,
-    captionPosition: _captionPosition = "bottom",
+    captionPosition = "bottom",
     ambientMotion,
     isTitle,
     subtitle,
@@ -1612,6 +1626,8 @@ function imageWithCaption(input, context) {
     return layers;
   }
   if (caption) {
+    const captionBgY = captionPosition === "top" ? "7%" : captionPosition === "center" ? "42%" : "68%";
+    const captionY = captionPosition === "top" ? "13%" : captionPosition === "center" ? "48%" : "74%";
     layers.push({
       type: "shape",
       id: "caption-gradient",
@@ -1621,7 +1637,7 @@ function imageWithCaption(input, context) {
       },
       position: {
         x: 0,
-        y: "68%",
+        y: captionBgY,
         width: "100%",
         height: "16%"
       }
@@ -1643,7 +1659,7 @@ function imageWithCaption(input, context) {
       },
       position: {
         x: "50%",
-        y: "74%",
+        y: captionY,
         anchor: "center",
         width: "78%"
       },
@@ -2158,6 +2174,8 @@ function getGridPositions(count, gridHeight, stacked) {
   const halfW = 50 - GAP / 2;
   const halfH = gridHeight / 2 - GAP / 2;
   switch (count) {
+    case 1:
+      return [{ x: 0, y: 0, w: 100, h: gridHeight }];
     case 2:
       if (stacked) {
         return [
@@ -2322,12 +2340,14 @@ function comparisonBar(input, context) {
   const barHeight = 6;
   const topBarY = 36;
   const bottomBarY = 58;
-  const maxValue = Math.max(leftValue, rightValue, 1);
+  const leftExtent = Math.max(0, leftValue);
+  const rightExtent = Math.max(0, rightValue);
+  const maxValue = Math.max(leftExtent, rightExtent, 1);
   const longestLabelPx = Math.max(leftDisplay.length, rightDisplay.length) * valueFontSize * 0.58;
   const labelWidthPct = longestLabelPx / viewport.width * 100;
   const maxBarWidth = Math.max(20, Math.min(65, 96 - barStartX - labelWidthPct - 2));
-  const leftBarWidth = leftValue / maxValue * maxBarWidth;
-  const rightBarWidth = rightValue / maxValue * maxBarWidth;
+  const leftBarWidth = leftExtent / maxValue * maxBarWidth;
+  const rightBarWidth = rightExtent / maxValue * maxBarWidth;
   return [
     // Background
     {
@@ -2461,7 +2481,10 @@ function pullQuote(input, context) {
         ...treatment ? { treatment } : {}
       },
       position: { x: 0, y: 0, width: "100%", height: "100%" },
-      animation: ambientMotion ? { type: ambientMotion, duration: 15 } : void 0
+      // Same authored `ambientMotion` vocabulary as every other image
+      // template — map it to a real Ken Burns animation rather than passing
+      // the token straight through as an animation type.
+      animation: mapAmbientMotion(ambientMotion, 15)
     },
     // Dark overlay for text readability
     {
@@ -5227,7 +5250,7 @@ function fallbackBlockLayers(block, context, notice) {
       style: {
         fontSize: themedFontSize(18, context),
         fontFamily: getThemeFont(context, "body"),
-        color: `${colors.text}99`,
+        color: withAlpha(colors.text, 0.6),
         textAlign: "center"
       }
     },
@@ -5255,9 +5278,10 @@ function materializeBlockLayersWithRuntime(block, options, runtime) {
   const effectivePersistentLayers = options.persistentLayers === false ? void 0 : options.persistentLayers ?? theme.persistentLayers;
   const existingLayers = block.layers;
   if (existingLayers && existingLayers.length > 0 && !isTemplateBlock(block)) {
+    const layers = appendMermaidLayers(cloneData(existingLayers), block, theme, viewport);
     return {
       layers: injectPersistentLayers(
-        cloneData(existingLayers),
+        layers,
         block,
         theme,
         effectivePersistentLayers,
@@ -5267,15 +5291,16 @@ function materializeBlockLayersWithRuntime(block, options, runtime) {
     };
   }
   if (!isTemplateBlock(block)) {
+    const layers = appendMermaidLayers([], block, theme, viewport);
     return {
       layers: injectPersistentLayers(
-        [],
+        layers,
         block,
         theme,
         effectivePersistentLayers,
         runtime.expandedPersistentLayers
       ),
-      source: "empty"
+      source: layers.length > 0 ? "rich-content" : "empty"
     };
   }
   const context = runtime.templateContext ? cloneData(runtime.templateContext) : createTemplateContext(theme, blockIndex, totalBlocks, viewport);
@@ -5283,9 +5308,10 @@ function materializeBlockLayersWithRuntime(block, options, runtime) {
   const execution = executeTemplateMaterialization(block, context, runtime.registry);
   if (execution.status === "ok") {
     const styledLayers = runtime.applyRenderStyle !== false ? applyRenderStyleToLayers(execution.layers, block, theme) : execution.layers;
+    const layers = appendMermaidLayers(styledLayers, block, theme, viewport);
     return {
       layers: injectPersistentLayers(
-        styledLayers,
+        layers,
         block,
         theme,
         effectivePersistentLayers,
@@ -5296,21 +5322,28 @@ function materializeBlockLayersWithRuntime(block, options, runtime) {
   }
   const diagnostic = toLayerMaterializationDiagnostic(block.template, execution);
   if ((options.failureMode ?? "fallback") === "empty") {
+    const layers = appendMermaidLayers([], block, theme, viewport);
     return {
       layers: injectPersistentLayers(
-        [],
+        layers,
         block,
         theme,
         effectivePersistentLayers,
         runtime.expandedPersistentLayers
       ),
-      source: "empty",
+      source: layers.length > 0 ? "rich-content" : "empty",
       diagnostic
     };
   }
+  const fallbackLayers = appendMermaidLayers(
+    fallbackBlockLayers(block, context, diagnostic.message),
+    block,
+    theme,
+    viewport
+  );
   return {
     layers: injectPersistentLayers(
-      fallbackBlockLayers(block, context, diagnostic.message),
+      fallbackLayers,
       block,
       theme,
       effectivePersistentLayers,
@@ -5320,6 +5353,109 @@ function materializeBlockLayersWithRuntime(block, options, runtime) {
     diagnostic
   };
 }
+function mermaidSources(block) {
+  return (block.contents ?? []).filter(
+    (node) => node.type === "code" && node.lang?.trim().toLowerCase() === "mermaid"
+  ).map((node) => node.value).filter((source) => source.trim().length > 0);
+}
+function resolvePositionValue(value, dimension) {
+  if (value === void 0) return 0;
+  if (typeof value === "number") return value;
+  const percent = value.match(/^\s*(-?\d+(?:\.\d+)?)%\s*$/);
+  if (percent) return Number(percent[1]) / 100 * dimension;
+  const numeric = Number.parseFloat(value);
+  return Number.isFinite(numeric) ? numeric : 0;
+}
+function positionRect(position, viewport, fallbackWidth, fallbackHeight) {
+  const width = position.width ? resolvePositionValue(position.width, viewport.width) : fallbackWidth;
+  const height = position.height ? resolvePositionValue(position.height, viewport.height) : fallbackHeight;
+  let x = resolvePositionValue(position.x, viewport.width);
+  let y = resolvePositionValue(position.y, viewport.height);
+  const anchor = position.anchor ?? "top-left";
+  if (anchor === "center") {
+    x -= width / 2;
+    y -= height / 2;
+  } else {
+    if (anchor.endsWith("right")) x -= width;
+    if (anchor.startsWith("bottom")) y -= height;
+  }
+  return { x, y, width, height };
+}
+function overlapArea(a, b) {
+  const width = Math.max(0, Math.min(a.x + a.width, b.x + b.width) - Math.max(a.x, b.x));
+  const height = Math.max(0, Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y));
+  return width * height;
+}
+function mermaidRegion(layers, viewport) {
+  const occupied = layers.filter((layer) => layer.type !== "shape" && layer.type !== "path" && layer.type !== "mermaid").map(
+    (layer) => positionRect(
+      layer.position,
+      viewport,
+      layer.type === "text" ? viewport.width * 0.45 : viewport.width * 0.5,
+      layer.type === "text" ? viewport.height * 0.2 : viewport.height * 0.55
+    )
+  );
+  if (occupied.length === 0) {
+    return {
+      x: viewport.width * 0.06,
+      y: viewport.height * 0.08,
+      width: viewport.width * 0.88,
+      height: viewport.height * 0.84
+    };
+  }
+  const candidates = [
+    {
+      x: viewport.width * 0.52,
+      y: viewport.height * 0.12,
+      width: viewport.width * 0.44,
+      height: viewport.height * 0.76
+    },
+    {
+      x: viewport.width * 0.04,
+      y: viewport.height * 0.12,
+      width: viewport.width * 0.44,
+      height: viewport.height * 0.76
+    },
+    {
+      x: viewport.width * 0.15,
+      y: viewport.height * 0.53,
+      width: viewport.width * 0.7,
+      height: viewport.height * 0.41
+    }
+  ];
+  return candidates.reduce((best, candidate) => {
+    const score = occupied.reduce((sum, rect) => sum + overlapArea(candidate, rect), 0);
+    const bestScore = occupied.reduce((sum, rect) => sum + overlapArea(best, rect), 0);
+    return score < bestScore ? candidate : best;
+  });
+}
+function appendMermaidLayers(layers, block, theme, viewport) {
+  const sources = mermaidSources(block);
+  if (sources.length === 0 || layers.some((layer) => layer.type === "mermaid")) return layers;
+  const region = mermaidRegion(layers, viewport);
+  const columns = sources.length === 1 ? 1 : 2;
+  const rows = Math.ceil(sources.length / columns);
+  const gap = Math.min(viewport.width, viewport.height) * 0.018;
+  const width = (region.width - gap * (columns - 1)) / columns;
+  const height = (region.height - gap * (rows - 1)) / rows;
+  const mermaidLayers = sources.map((source, index) => ({
+    id: `${block.id}-mermaid-${index + 1}`,
+    type: "mermaid",
+    position: {
+      x: region.x + index % columns * (width + gap),
+      y: region.y + Math.floor(index / columns) * (height + gap),
+      width,
+      height
+    },
+    content: {
+      source,
+      background: theme.colors.backgroundLight,
+      foreground: theme.colors.text,
+      padding: Math.max(12, Math.round(Math.min(width, height) * 0.025))
+    }
+  }));
+  return [...layers, ...mermaidLayers];
+}
 function executeTemplateMaterialization(templateBlock, context, registry) {
   const safeTemplateBlock = cloneData(templateBlock);
   const safeContext = cloneData(context);
@@ -5497,6 +5633,17 @@ function isStandardLightCover(context) {
   const { theme } = context;
   return theme.id === "standard" && relativeLuminance(theme.colors.background) > 0.85;
 }
+var COVER_SCRIM_STOPS = [
+  { pos: 0, alpha: 0.95 },
+  { pos: 38, alpha: 0.86 },
+  { pos: 58, alpha: 0.4 },
+  { pos: 78, alpha: 0.1 },
+  { pos: 100, alpha: 0 }
+];
+function coverScrimGradient(background) {
+  const stops = COVER_SCRIM_STOPS.map((s) => `${withAlpha(background, s.alpha)} ${s.pos}%`);
+  return `linear-gradient(0deg, ${stops.join(", ")})`;
+}
 function coverBlock(input, context) {
   const treatment = themedImageTreatment(context, input.imageTreatment);
   const { heroSrc, heroAlt, title, subtitle, ambientMotion, heroCredit, heroLicense } = input;
@@ -5527,7 +5674,7 @@ function coverBlock(input, context) {
         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%)"
+          fill: coverScrimGradient(theme.colors.background)
         },
         position: { x: 0, y: 0, width: "100%", height: "100%" }
       }
@@ -6152,7 +6299,7 @@ function findFirstList(contents) {
 // src/doc/templateInputs.ts
 function extractBodyPlainText(contents) {
   if (!contents || contents.length === 0) return "";
-  return contents.map((n) => extractPlainText(n)).join("\n").trim();
+  return contents.filter((node) => !(node.type === "code" && node.lang?.trim().toLowerCase() === "mermaid")).map((n) => extractPlainText(n)).join("\n").trim();
 }
 function extractListItems(contents) {
   if (!contents) return [];
@@ -6489,15 +6636,6 @@ function renameKeys(value, map) {
 function isDefaultViewport(v) {
   return !v || v.width === DEFAULT_VIEWPORT.width && v.height === DEFAULT_VIEWPORT.height;
 }
-function base64ToUtf8(b64) {
-  if (typeof globalThis.atob === "function") {
-    const binary = globalThis.atob(b64);
-    const bytes = new Uint8Array(binary.length);
-    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
-    return new TextDecoder().decode(bytes);
-  }
-  return Buffer.from(b64, "base64").toString("utf-8");
-}
 function readCustomTemplatesFromFrontmatter(frontmatter) {
   if (!frontmatter) return void 0;
   const candidates = normalizeCandidates(frontmatter[FRONTMATTER_CUSTOM_TEMPLATES_KEY]);
@@ -6977,10 +7115,18 @@ function expandStandaloneAnnotations(blocks, makeId, defaultDuration) {
       makeId,
       defaultDuration
     });
-    if (produced.length > 0) {
-      block.contents = leading;
+    if (produced.length === 0) {
+      out.push(block);
+      continue;
+    }
+    block.contents = leading;
+    const nestable = (block.children?.length ?? 0) > 0 && !isContainerTemplate(block.template);
+    if (nestable) {
+      block.children = [...produced, ...block.children];
+      out.push(block);
+    } else {
+      out.push(block, ...produced);
     }
-    out.push(block, ...produced);
   }
   return out;
 }
@@ -7701,7 +7847,11 @@ function buildNarrationTimingJson(script, alignment, durationSec, options) {
     duration: Number.isFinite(durationSec) && durationSec >= 0 ? durationSec : 0,
     bookmarks,
     blocks,
-    ...options?.cameraOffsetSec !== void 0 ? { cameraOffsetSec: options.cameraOffsetSec } : {},
+    // Write only what `parseNarrationTimingJson` will read back, so the codec
+    // is a round-trip pair. A non-finite value would serialize to `null`
+    // (JSON has no NaN) and be dropped on parse anyway — omitting it here
+    // keeps the emitted sidecar honest rather than carrying a dead field.
+    ...finiteNumber(options?.cameraOffsetSec) ? { cameraOffsetSec: options.cameraOffsetSec } : {},
     generator: {
       name: "squisq-teleprompter",
       method: "dsp-align",
@@ -7712,6 +7862,9 @@ function buildNarrationTimingJson(script, alignment, durationSec, options) {
 function finiteNonNegative(value) {
   return typeof value === "number" && Number.isFinite(value) && value >= 0;
 }
+function finiteNumber(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
 function parseNarrationTimingJson(data) {
   try {
     const text = typeof data === "string" ? data : new TextDecoder().decode(data instanceof Uint8Array ? data : new Uint8Array(data));
@@ -7765,7 +7918,7 @@ function parseNarrationTimingJson(data) {
       duration: raw.duration,
       bookmarks,
       blocks,
-      ...finiteNonNegative(raw.cameraOffsetSec) ? { cameraOffsetSec: raw.cameraOffsetSec } : {},
+      ...finiteNumber(raw.cameraOffsetSec) ? { cameraOffsetSec: raw.cameraOffsetSec } : {},
       ...typeof raw.generator === "object" && raw.generator !== null ? { generator: raw.generator } : {}
     };
   } catch {
@@ -7795,11 +7948,11 @@ export {
   themedScrim,
   getTemplateHint,
   titleBlock,
-  sectionHeader,
   DEFAULT_LAYOUT,
   getAccentLayout,
   createAccentLayers,
   adjustY,
+  sectionHeader,
   statHighlight,
   quoteBlock,
   factCard,
@@ -7897,4 +8050,3 @@ export {
   buildNarrationTimingJson,
   parseNarrationTimingJson
 };
-//# sourceMappingURL=chunk-X6DUONGT.js.map

package/dist/{chunk-DBS6RIFL.js → chunk-7N4G32LG.js}

@@ -78,4 +78,3 @@ export {
   iconGlyph,
   suggestIcons
 };
-//# sourceMappingURL=chunk-DBS6RIFL.js.map