@bendyline/squisq 2.0.0 → 2.0.1

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

@@ -30,7 +30,7 @@ import {
   resolveFontFamily,
   validateTheme,
   withAlpha
-} from "./chunk-6PJRB2CF.js";
+} from "./chunk-W4O2TX5I.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;
 }
@@ -7132,6 +7185,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 +7195,7 @@ function markdownToDoc(markdownDoc, options) {
     },
     ...captions ? { captions } : {},
     ...markdownDoc.frontmatter ? { frontmatter: markdownDoc.frontmatter } : {},
+    ...themeId ? { themeId } : {},
     ...customTemplates ? { customTemplates } : {},
     ...customThemes ? { customThemes } : {},
     ...diagnostics.length > 0 ? { diagnostics } : {},
@@ -7842,4 +7897,4 @@ export {
   buildNarrationTimingJson,
   parseNarrationTimingJson
 };
-//# sourceMappingURL=chunk-GF3BVNLU.js.map
+//# sourceMappingURL=chunk-X6DUONGT.js.map