@bendyline/squisq 2.0.0 → 2.1.0

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

@@ -30,7 +30,7 @@ import {
   resolveFontFamily,
   validateTheme,
   withAlpha
-} from "./chunk-6PJRB2CF.js";
+} from "./chunk-JHZWYRSW.js";
 import {
   VIEWPORT_PRESETS,
   cloneData,
@@ -51,6 +51,7 @@ import {
 } from "./chunk-R2YZTCLO.js";
 import {
   extractPlainText,
+  readFrontmatterThemeId,
   walkMarkdownTree
 } from "./chunk-AMIR72JP.js";
 import {
@@ -1919,6 +1920,30 @@ function fullBleedQuote(input, context) {
 }
 
 // src/doc/templates/listBlock.ts
+var LIST_ITEM_LINE_HEIGHT = 1.2;
+var LIST_ITEM_GAP_PX = 18;
+function estimateWrappedLineCount(text, fontSize, maxWidth) {
+  if (!text.trim()) return 1;
+  const charsPerLine = Math.floor(maxWidth / (fontSize * 0.5));
+  if (charsPerLine <= 0) return 1;
+  let lineCount = 0;
+  let currentLineLength = 0;
+  for (const word of text.split(/\s+/)) {
+    const testLineLength = currentLineLength ? currentLineLength + 1 + word.length : word.length;
+    if (testLineLength <= charsPerLine) {
+      currentLineLength = testLineLength;
+      continue;
+    }
+    if (currentLineLength) lineCount += 1;
+    let remainingLength = word.length;
+    while (remainingLength > charsPerLine) {
+      lineCount += 1;
+      remainingLength -= charsPerLine;
+    }
+    currentLineLength = remainingLength;
+  }
+  return Math.max(1, lineCount + (currentLineLength ? 1 : 0));
+}
 function listBlock(input, context) {
   const { title, accentImage } = input;
   const items = Array.isArray(input.items) ? input.items : [];
@@ -1949,7 +1974,8 @@ function listBlock(input, context) {
   }
   const centerX = parseFloat(accentLayout.textCenterX);
   const widthPct = parseFloat(accentLayout.textWidth);
-  const leftX = Number.isFinite(centerX) && Number.isFinite(widthPct) ? `${centerX - widthPct / 2}%` : "8%";
+  const leftPct = Number.isFinite(centerX) && Number.isFinite(widthPct) ? centerX - widthPct / 2 : 8;
+  const leftX = `${leftPct}%`;
   const startY = title ? 34 : 26;
   if (title) {
     layers.push({
@@ -1974,14 +2000,43 @@ function listBlock(input, context) {
       animation: themedEntrance(context, "text", { type: "fadeIn", duration: 1 })
     });
   }
-  const LIST_ITEM_BASE_PX = 34;
-  const LIST_ITEM_LINE_HEIGHT = 1.2;
-  const LIST_ITEM_GAP_PX = 18;
-  const DESIGN_HEIGHT_PX = 1080;
-  const spacing = (LIST_ITEM_BASE_PX * LIST_ITEM_LINE_HEIGHT + LIST_ITEM_GAP_PX) / DESIGN_HEIGHT_PX * 100;
+  const textWidthPx = (Number.isFinite(widthPct) ? widthPct / 100 : 0.85) * context.viewport.width;
+  const markerText = `${items.length}.`;
+  const markerWidthPx = Math.max(itemFontSize, markerText.length * itemFontSize * 0.5);
+  const markerGapPx = itemFontSize * 0.35;
+  const bodyIndentPx = markerWidthPx + markerGapPx;
+  const bodyLeftX = `${leftPct + bodyIndentPx / context.viewport.width * 100}%`;
+  const bodyWidthPx = Math.max(itemFontSize, textWidthPx - bodyIndentPx);
+  let itemY = startY;
   for (let i = 0; i < items.length; i++) {
-    const y = startY + spacing * i;
-    const itemText = `${i + 1}.  ${items[i]}`;
+    const itemText = items[i];
+    const lineCount = estimateWrappedLineCount(itemText, itemFontSize, bodyWidthPx);
+    const animation = themedEntrance(context, "text", {
+      type: "fadeIn",
+      duration: 0.8,
+      delay: 0.3 + 0.3 * i
+    });
+    layers.push({
+      type: "text",
+      id: `item-${i}-marker`,
+      content: {
+        text: `${i + 1}.`,
+        style: {
+          fontSize: itemFontSize,
+          fontFamily: getThemeFont(context, "body"),
+          color: theme.colors.text,
+          textAlign: "right",
+          lineHeight: LIST_ITEM_LINE_HEIGHT,
+          shadow: shouldUseShadow(context)
+        }
+      },
+      position: {
+        x: leftX,
+        y: adjustY(`${itemY}%`, accentLayout),
+        width: markerWidthPx
+      },
+      animation
+    });
     layers.push({
       type: "text",
       id: `item-${i}`,
@@ -1992,21 +2047,19 @@ function listBlock(input, context) {
           fontFamily: getThemeFont(context, "body"),
           color: theme.colors.text,
           textAlign: "left",
-          lineHeight: 1.2,
+          lineHeight: LIST_ITEM_LINE_HEIGHT,
           shadow: shouldUseShadow(context)
         }
       },
       position: {
-        x: leftX,
-        y: adjustY(`${y}%`, accentLayout),
-        width: accentLayout.textWidth
+        x: bodyLeftX,
+        y: adjustY(`${itemY}%`, accentLayout),
+        width: bodyWidthPx
       },
-      animation: themedEntrance(context, "text", {
-        type: "fadeIn",
-        duration: 0.8,
-        delay: 0.3 + 0.3 * i
-      })
+      animation
     });
+    const itemHeightPx = lineCount * itemFontSize * LIST_ITEM_LINE_HEIGHT;
+    itemY += (itemHeightPx + LIST_ITEM_GAP_PX) / context.viewport.height * 100;
   }
   return layers;
 }
@@ -5202,9 +5255,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,
@@ -5214,15 +5268,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);
@@ -5230,9 +5285,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,
@@ -5243,21 +5299,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,
@@ -5267,6 +5330,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);
@@ -6099,7 +6265,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 [];
@@ -7132,6 +7298,7 @@ function markdownToDoc(markdownDoc, options) {
   } : void 0;
   const customTemplates = readCustomTemplatesFromFrontmatter(markdownDoc.frontmatter);
   const customThemes = readCustomThemesFromFrontmatter(markdownDoc.frontmatter);
+  const themeId = readFrontmatterThemeId(markdownDoc.frontmatter);
   const doc = {
     articleId,
     duration: currentTime,
@@ -7141,6 +7308,7 @@ function markdownToDoc(markdownDoc, options) {
     },
     ...captions ? { captions } : {},
     ...markdownDoc.frontmatter ? { frontmatter: markdownDoc.frontmatter } : {},
+    ...themeId ? { themeId } : {},
     ...customTemplates ? { customTemplates } : {},
     ...customThemes ? { customThemes } : {},
     ...diagnostics.length > 0 ? { diagnostics } : {},
@@ -7842,4 +8010,4 @@ export {
   buildNarrationTimingJson,
   parseNarrationTimingJson
 };
-//# sourceMappingURL=chunk-GF3BVNLU.js.map
+//# sourceMappingURL=chunk-JI77MGAK.js.map