@shotstack/shotstack-canvas 2.0.3 → 2.0.5

package/dist/entry.node.cjs

@@ -362,6 +362,7 @@ __export(entry_node_exports, {
   RichCaptionRenderer: () => RichCaptionRenderer,
   WordTimingStore: () => WordTimingStore,
   arcToCubicBeziers: () => arcToCubicBeziers,
+  breakIntoLines: () => breakIntoLines,
   calculateAnimationStatesForGroup: () => calculateAnimationStatesForGroup,
   commandsToPathString: () => commandsToPathString,
   computeSimplePathBounds: () => computeSimplePathBounds,
@@ -417,7 +418,7 @@ var CANVAS_CONFIG = {
     width: 800,
     height: 400,
     pixelRatio: 2,
-    fontFamily: "Roboto",
+    fontFamily: "Open Sans",
     fontSize: 48,
     color: "#ffffff",
     textAlign: "center"
@@ -572,7 +573,7 @@ var wordTimingSchema = import_zod2.wordTimingSchema.extend({
   confidence: import_zod.z.number().min(0).max(1).optional()
 });
 var richCaptionFontSchema = import_zod.z.object({
-  family: import_zod.z.string().default("Open Sans"),
+  family: import_zod.z.string().default(CANVAS_CONFIG.DEFAULTS.fontFamily),
   size: import_zod.z.number().int().min(1).max(500).default(24),
   weight: import_zod.z.union([import_zod.z.string(), import_zod.z.number()]).default("400"),
   color: import_zod.z.string().regex(HEX6).default("#ffffff"),
@@ -581,7 +582,7 @@ var richCaptionFontSchema = import_zod.z.object({
 });
 var richCaptionActiveSchema = import_zod2.richCaptionActiveSchema.extend({
   font: import_zod.z.object({
-    color: import_zod.z.string().regex(HEX6).default("#ffff00"),
+    color: import_zod.z.string().regex(HEX6).default("#ffffff"),
     background: import_zod.z.string().regex(HEX6).optional(),
     opacity: import_zod.z.number().min(0).max(1).default(1)
   }).optional(),
@@ -4328,7 +4329,7 @@ function groupWordsByPause(store, pauseThreshold = 500) {
   }
   return groups;
 }
-function breakIntoLines(wordWidths, maxWidth, maxLines, spaceWidth) {
+function breakIntoLines(wordWidths, maxWidth, spaceWidth) {
   const lines = [];
   let currentLine = [];
   let currentWidth = 0;
@@ -4341,15 +4342,12 @@ function breakIntoLines(wordWidths, maxWidth, maxLines, spaceWidth) {
     } else {
       if (currentLine.length > 0) {
         lines.push(currentLine);
-        if (lines.length >= maxLines) {
-          return lines;
-        }
       }
       currentLine = [i];
       currentWidth = wordWidth;
     }
   }
-  if (currentLine.length > 0 && lines.length < maxLines) {
+  if (currentLine.length > 0) {
     lines.push(currentLine);
   }
   return lines;
@@ -4382,6 +4380,13 @@ function transformText(text, transform) {
       return text;
   }
 }
+function splitIntoChunks(arr, chunkSize) {
+  const chunks = [];
+  for (let i = 0; i < arr.length; i += chunkSize) {
+    chunks.push(arr.slice(i, i + chunkSize));
+  }
+  return chunks;
+}
 var CaptionLayoutEngine = class {
   fontRegistry;
   cache;
@@ -4468,31 +4473,34 @@ var CaptionLayoutEngine = class {
       const spaceWord = await this.measureWord(" ", measurementConfig);
       spaceWidth = spaceWord.width + config.wordSpacing;
     }
-    const groups = wordGroups.map((indices) => {
+    const groups = wordGroups.flatMap((indices) => {
       const groupWidths = indices.map((i) => store.widths[i]);
-      const lineIndices = breakIntoLines(
+      const allLines = breakIntoLines(
         groupWidths,
         pixelMaxWidth,
-        config.maxLines,
         spaceWidth
       );
-      const lines = lineIndices.map((lineWordIndices, lineIndex) => {
-        const actualIndices = lineWordIndices.map((i) => indices[i]);
-        const lineWidth = actualIndices.reduce((sum, idx) => sum + store.widths[idx], 0) + (actualIndices.length - 1) * spaceWidth;
+      const lineChunks = splitIntoChunks(allLines, config.maxLines);
+      return lineChunks.map((chunkLines) => {
+        const lines = chunkLines.map((lineWordIndices, lineIndex) => {
+          const actualIndices = lineWordIndices.map((i) => indices[i]);
+          const lineWidth = actualIndices.reduce((sum, idx) => sum + store.widths[idx], 0) + (actualIndices.length - 1) * spaceWidth;
+          return {
+            wordIndices: actualIndices,
+            x: 0,
+            y: lineIndex * config.fontSize * config.lineHeight,
+            width: lineWidth,
+            height: config.fontSize
+          };
+        });
+        const allWordIndices = lines.flatMap((l) => l.wordIndices);
         return {
-          wordIndices: actualIndices,
-          x: 0,
-          y: lineIndex * config.fontSize * config.lineHeight,
-          width: lineWidth,
-          height: config.fontSize
+          wordIndices: allWordIndices,
+          startTime: store.startTimes[allWordIndices[0]],
+          endTime: store.endTimes[allWordIndices[allWordIndices.length - 1]],
+          lines
         };
       });
-      return {
-        wordIndices: lines.flatMap((l) => l.wordIndices),
-        startTime: store.startTimes[indices[0]],
-        endTime: store.endTimes[indices[indices.length - 1]],
-        lines
-      };
     });
     const calculateGroupY = (group) => {
       const totalHeight = group.lines.length * config.fontSize * config.lineHeight;
@@ -4867,11 +4875,11 @@ function extractFontConfig(asset) {
   const font = asset.font;
   const active = asset.active?.font;
   return {
-    family: font?.family ?? "Open Sans",
+    family: font?.family ?? CANVAS_CONFIG.DEFAULTS.fontFamily,
     size: font?.size ?? 24,
     weight: String(font?.weight ?? "400"),
     baseColor: font?.color ?? "#ffffff",
-    activeColor: active?.color ?? "#ffff00",
+    activeColor: active?.color ?? "#ffffff",
     baseOpacity: font?.opacity ?? 1,
     activeOpacity: active?.opacity ?? 1,
     letterSpacing: asset.style?.letterSpacing ?? 0
@@ -5773,15 +5781,14 @@ async function createNodeRawEncoder(config, options) {
 }
 
 // src/core/rich-caption-renderer.ts
-var ROBOTO_FONT_URLS = {
-  "100": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbGmT.ttf",
-  "300": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabWmT.ttf",
-  "400": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbWmT.ttf",
-  "500": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bWmT.ttf",
-  "600": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYaammT.ttf",
-  "700": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjammT.ttf",
-  "800": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuZEammT.ttf",
-  "900": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuZtammT.ttf"
+var OPEN_SANS_FONT_URL = "https://fonts.gstatic.com/s/opensans/v44/mem8YaGs126MiZpBA-U1UpcaXcl0Aw.ttf";
+var OPEN_SANS_FONT_URLS = {
+  "300": OPEN_SANS_FONT_URL,
+  "400": OPEN_SANS_FONT_URL,
+  "500": OPEN_SANS_FONT_URL,
+  "600": OPEN_SANS_FONT_URL,
+  "700": OPEN_SANS_FONT_URL,
+  "800": OPEN_SANS_FONT_URL
 };
 var RichCaptionRenderer = class {
   width;
@@ -5811,12 +5818,12 @@ var RichCaptionRenderer = class {
   async initialize() {
     this.fontRegistry = await FontRegistry.getSharedInstance(this.wasmBaseURL);
     this.layoutEngine = new CaptionLayoutEngine(this.fontRegistry);
-    const weightsToLoad = Object.keys(ROBOTO_FONT_URLS);
+    const weightsToLoad = Object.keys(OPEN_SANS_FONT_URLS);
     const loadPromises = weightsToLoad.map(async (weight) => {
-      const existingFace = await this.fontRegistry.getFace({ family: "Roboto", weight });
+      const existingFace = await this.fontRegistry.getFace({ family: "Open Sans", weight });
       if (!existingFace) {
-        const bytes = await loadFileOrHttpToArrayBuffer(ROBOTO_FONT_URLS[weight]);
-        await this.fontRegistry.registerFromBytes(bytes, { family: "Roboto", weight });
+        const bytes = await loadFileOrHttpToArrayBuffer(OPEN_SANS_FONT_URLS[weight]);
+        await this.fontRegistry.registerFromBytes(bytes, { family: "Open Sans", weight });
       }
     });
     await Promise.all(loadPromises);
@@ -5860,7 +5867,7 @@ var RichCaptionRenderer = class {
       maxLines: asset.maxLines ?? 2,
       position: asset.position ?? "bottom",
       fontSize: font?.size ?? 24,
-      fontFamily: font?.family ?? "Roboto",
+      fontFamily: font?.family ?? "Open Sans",
       fontWeight: String(font?.weight ?? "400"),
       letterSpacing: style?.letterSpacing ?? 0,
       wordSpacing: typeof style?.wordSpacing === "number" ? style.wordSpacing : 0,
@@ -5953,7 +5960,15 @@ var RichCaptionRenderer = class {
           const elapsed = performance.now() - totalStart;
           const fps = framesProcessed / (elapsed / 1e3);
           const eta = (schedule.totalFrames - framesProcessed) / fps * 1e3;
-          this.logProgress(pct, framesProcessed, schedule.totalFrames, i + 1, schedule.uniqueFrameCount, fps, eta);
+          this.logProgress(
+            pct,
+            framesProcessed,
+            schedule.totalFrames,
+            i + 1,
+            schedule.uniqueFrameCount,
+            fps,
+            eta
+          );
         }
         if (i % 500 === 0 && i > 0) {
           this.checkMemoryUsage();
@@ -6333,7 +6348,7 @@ async function createTextEngine(opts = {}) {
         }
       }
       const main = asset.font ?? {
-        family: "Roboto",
+        family: "Open Sans",
         weight: "400",
         size: 48,
         color: "#000000",
@@ -6562,6 +6577,7 @@ async function createTextEngine(opts = {}) {
   RichCaptionRenderer,
   WordTimingStore,
   arcToCubicBeziers,
+  breakIntoLines,
   calculateAnimationStatesForGroup,
   commandsToPathString,
   computeSimplePathBounds,

package/dist/entry.node.d.cts

@@ -670,6 +670,7 @@ declare class WordTimingStore {
 }
 declare function findWordAtTime(store: WordTimingStore, timeMs: number): number;
 declare function groupWordsByPause(store: WordTimingStore, pauseThreshold?: number): number[][];
+declare function breakIntoLines(wordWidths: number[], maxWidth: number, spaceWidth: number): number[][];
 declare class CaptionLayoutEngine {
     private fontRegistry;
     private cache;
@@ -1314,4 +1315,4 @@ declare function createTextEngine(opts?: {
     destroy(): void;
 }>;
 
-export { type AnimationDirection, type AnimationStyle, type ArcCommand, type BackgroundConfig, type BoundingBox, type CanvasRichCaptionAsset, CanvasRichCaptionAssetSchema, type CanvasRichTextAsset, CanvasRichTextAssetSchema, type CanvasSvgAsset, CanvasSvgAssetSchema, type CaptionGroup, type CaptionLayout, type CaptionLayoutConfig, CaptionLayoutEngine, type CaptionLine, type ClosePathCommand, type CubicBezierCommand, type DrawOp, type EngineInit, type FastVideoOptions, type FastVideoResult, type FontConfig, FontRegistry, type FrameSchedule, type Glyph, type GradientSpec, type IVideoEncoder, type LineToCommand, type MoveToCommand, NodeRawEncoder, type NormalizedPathCommand, type ParsedPathCommand, type PathCommandType, type Point2D, type PositionedWord, type QuadraticBezierCommand, type RGBA, type RenderFrame, type RenderStats, type Renderer, type ResvgRenderOptions, type ResvgRenderResult, type RichCaptionGeneratorConfig, RichCaptionRenderer, type RichCaptionRendererOptions, type ShadowConfig, type ShapedLine, type ShapedWord, type ShapedWordGlyph, type ShotstackRichTextAsset, type ShotstackSvgAsset, type StrokeConfig, type StrokeSpec, type ValidAsset, type VideoEncoderCapabilities, type VideoEncoderConfig, type VideoEncoderProgress, type WordAnimationConfig, type WordAnimationState, type WordTiming, WordTimingStore, arcToCubicBeziers, calculateAnimationStatesForGroup, commandsToPathString, computeSimplePathBounds, createDefaultGeneratorConfig, createFrameSchedule, createNodePainter, createNodeRawEncoder, createRichCaptionRenderer, createTextEngine, createVideoEncoder, detectPlatform, detectSubtitleFormat, findWordAtTime, generateRichCaptionDrawOps, generateRichCaptionFrame, generateShapePathData, getDefaultAnimationConfig, getDrawCaptionWordOps, getEncoderCapabilities, getEncoderWarning, groupWordsByPause, isDrawCaptionWordOp, isRTLText, isWebCodecsH264Supported, normalizePath, normalizePathString, parseSubtitleToWords, parseSvgPath, quadraticToCubic, renderSvgAssetToPng, renderSvgToPng, richCaptionAssetSchema, shapeToSvgString };
+export { type AnimationDirection, type AnimationStyle, type ArcCommand, type BackgroundConfig, type BoundingBox, type CanvasRichCaptionAsset, CanvasRichCaptionAssetSchema, type CanvasRichTextAsset, CanvasRichTextAssetSchema, type CanvasSvgAsset, CanvasSvgAssetSchema, type CaptionGroup, type CaptionLayout, type CaptionLayoutConfig, CaptionLayoutEngine, type CaptionLine, type ClosePathCommand, type CubicBezierCommand, type DrawOp, type EngineInit, type FastVideoOptions, type FastVideoResult, type FontConfig, FontRegistry, type FrameSchedule, type Glyph, type GradientSpec, type IVideoEncoder, type LineToCommand, type MoveToCommand, NodeRawEncoder, type NormalizedPathCommand, type ParsedPathCommand, type PathCommandType, type Point2D, type PositionedWord, type QuadraticBezierCommand, type RGBA, type RenderFrame, type RenderStats, type Renderer, type ResvgRenderOptions, type ResvgRenderResult, type RichCaptionGeneratorConfig, RichCaptionRenderer, type RichCaptionRendererOptions, type ShadowConfig, type ShapedLine, type ShapedWord, type ShapedWordGlyph, type ShotstackRichTextAsset, type ShotstackSvgAsset, type StrokeConfig, type StrokeSpec, type ValidAsset, type VideoEncoderCapabilities, type VideoEncoderConfig, type VideoEncoderProgress, type WordAnimationConfig, type WordAnimationState, type WordTiming, WordTimingStore, arcToCubicBeziers, breakIntoLines, calculateAnimationStatesForGroup, commandsToPathString, computeSimplePathBounds, createDefaultGeneratorConfig, createFrameSchedule, createNodePainter, createNodeRawEncoder, createRichCaptionRenderer, createTextEngine, createVideoEncoder, detectPlatform, detectSubtitleFormat, findWordAtTime, generateRichCaptionDrawOps, generateRichCaptionFrame, generateShapePathData, getDefaultAnimationConfig, getDrawCaptionWordOps, getEncoderCapabilities, getEncoderWarning, groupWordsByPause, isDrawCaptionWordOp, isRTLText, isWebCodecsH264Supported, normalizePath, normalizePathString, parseSubtitleToWords, parseSvgPath, quadraticToCubic, renderSvgAssetToPng, renderSvgToPng, richCaptionAssetSchema, shapeToSvgString };

package/dist/entry.node.d.ts

@@ -670,6 +670,7 @@ declare class WordTimingStore {
 }
 declare function findWordAtTime(store: WordTimingStore, timeMs: number): number;
 declare function groupWordsByPause(store: WordTimingStore, pauseThreshold?: number): number[][];
+declare function breakIntoLines(wordWidths: number[], maxWidth: number, spaceWidth: number): number[][];
 declare class CaptionLayoutEngine {
     private fontRegistry;
     private cache;
@@ -1314,4 +1315,4 @@ declare function createTextEngine(opts?: {
     destroy(): void;
 }>;
 
-export { type AnimationDirection, type AnimationStyle, type ArcCommand, type BackgroundConfig, type BoundingBox, type CanvasRichCaptionAsset, CanvasRichCaptionAssetSchema, type CanvasRichTextAsset, CanvasRichTextAssetSchema, type CanvasSvgAsset, CanvasSvgAssetSchema, type CaptionGroup, type CaptionLayout, type CaptionLayoutConfig, CaptionLayoutEngine, type CaptionLine, type ClosePathCommand, type CubicBezierCommand, type DrawOp, type EngineInit, type FastVideoOptions, type FastVideoResult, type FontConfig, FontRegistry, type FrameSchedule, type Glyph, type GradientSpec, type IVideoEncoder, type LineToCommand, type MoveToCommand, NodeRawEncoder, type NormalizedPathCommand, type ParsedPathCommand, type PathCommandType, type Point2D, type PositionedWord, type QuadraticBezierCommand, type RGBA, type RenderFrame, type RenderStats, type Renderer, type ResvgRenderOptions, type ResvgRenderResult, type RichCaptionGeneratorConfig, RichCaptionRenderer, type RichCaptionRendererOptions, type ShadowConfig, type ShapedLine, type ShapedWord, type ShapedWordGlyph, type ShotstackRichTextAsset, type ShotstackSvgAsset, type StrokeConfig, type StrokeSpec, type ValidAsset, type VideoEncoderCapabilities, type VideoEncoderConfig, type VideoEncoderProgress, type WordAnimationConfig, type WordAnimationState, type WordTiming, WordTimingStore, arcToCubicBeziers, calculateAnimationStatesForGroup, commandsToPathString, computeSimplePathBounds, createDefaultGeneratorConfig, createFrameSchedule, createNodePainter, createNodeRawEncoder, createRichCaptionRenderer, createTextEngine, createVideoEncoder, detectPlatform, detectSubtitleFormat, findWordAtTime, generateRichCaptionDrawOps, generateRichCaptionFrame, generateShapePathData, getDefaultAnimationConfig, getDrawCaptionWordOps, getEncoderCapabilities, getEncoderWarning, groupWordsByPause, isDrawCaptionWordOp, isRTLText, isWebCodecsH264Supported, normalizePath, normalizePathString, parseSubtitleToWords, parseSvgPath, quadraticToCubic, renderSvgAssetToPng, renderSvgToPng, richCaptionAssetSchema, shapeToSvgString };
+export { type AnimationDirection, type AnimationStyle, type ArcCommand, type BackgroundConfig, type BoundingBox, type CanvasRichCaptionAsset, CanvasRichCaptionAssetSchema, type CanvasRichTextAsset, CanvasRichTextAssetSchema, type CanvasSvgAsset, CanvasSvgAssetSchema, type CaptionGroup, type CaptionLayout, type CaptionLayoutConfig, CaptionLayoutEngine, type CaptionLine, type ClosePathCommand, type CubicBezierCommand, type DrawOp, type EngineInit, type FastVideoOptions, type FastVideoResult, type FontConfig, FontRegistry, type FrameSchedule, type Glyph, type GradientSpec, type IVideoEncoder, type LineToCommand, type MoveToCommand, NodeRawEncoder, type NormalizedPathCommand, type ParsedPathCommand, type PathCommandType, type Point2D, type PositionedWord, type QuadraticBezierCommand, type RGBA, type RenderFrame, type RenderStats, type Renderer, type ResvgRenderOptions, type ResvgRenderResult, type RichCaptionGeneratorConfig, RichCaptionRenderer, type RichCaptionRendererOptions, type ShadowConfig, type ShapedLine, type ShapedWord, type ShapedWordGlyph, type ShotstackRichTextAsset, type ShotstackSvgAsset, type StrokeConfig, type StrokeSpec, type ValidAsset, type VideoEncoderCapabilities, type VideoEncoderConfig, type VideoEncoderProgress, type WordAnimationConfig, type WordAnimationState, type WordTiming, WordTimingStore, arcToCubicBeziers, breakIntoLines, calculateAnimationStatesForGroup, commandsToPathString, computeSimplePathBounds, createDefaultGeneratorConfig, createFrameSchedule, createNodePainter, createNodeRawEncoder, createRichCaptionRenderer, createTextEngine, createVideoEncoder, detectPlatform, detectSubtitleFormat, findWordAtTime, generateRichCaptionDrawOps, generateRichCaptionFrame, generateShapePathData, getDefaultAnimationConfig, getDrawCaptionWordOps, getEncoderCapabilities, getEncoderWarning, groupWordsByPause, isDrawCaptionWordOp, isRTLText, isWebCodecsH264Supported, normalizePath, normalizePathString, parseSubtitleToWords, parseSvgPath, quadraticToCubic, renderSvgAssetToPng, renderSvgToPng, richCaptionAssetSchema, shapeToSvgString };

package/dist/entry.node.js

@@ -29,7 +29,7 @@ var CANVAS_CONFIG = {
     width: 800,
     height: 400,
     pixelRatio: 2,
-    fontFamily: "Roboto",
+    fontFamily: "Open Sans",
     fontSize: 48,
     color: "#ffffff",
     textAlign: "center"
@@ -184,7 +184,7 @@ var wordTimingSchema = baseWordTimingSchema.extend({
   confidence: z.number().min(0).max(1).optional()
 });
 var richCaptionFontSchema = z.object({
-  family: z.string().default("Open Sans"),
+  family: z.string().default(CANVAS_CONFIG.DEFAULTS.fontFamily),
   size: z.number().int().min(1).max(500).default(24),
   weight: z.union([z.string(), z.number()]).default("400"),
   color: z.string().regex(HEX6).default("#ffffff"),
@@ -193,7 +193,7 @@ var richCaptionFontSchema = z.object({
 });
 var richCaptionActiveSchema = baseCaptionActiveSchema.extend({
   font: z.object({
-    color: z.string().regex(HEX6).default("#ffff00"),
+    color: z.string().regex(HEX6).default("#ffffff"),
     background: z.string().regex(HEX6).optional(),
     opacity: z.number().min(0).max(1).default(1)
   }).optional(),
@@ -3939,7 +3939,7 @@ function groupWordsByPause(store, pauseThreshold = 500) {
   }
   return groups;
 }
-function breakIntoLines(wordWidths, maxWidth, maxLines, spaceWidth) {
+function breakIntoLines(wordWidths, maxWidth, spaceWidth) {
   const lines = [];
   let currentLine = [];
   let currentWidth = 0;
@@ -3952,15 +3952,12 @@ function breakIntoLines(wordWidths, maxWidth, maxLines, spaceWidth) {
     } else {
       if (currentLine.length > 0) {
         lines.push(currentLine);
-        if (lines.length >= maxLines) {
-          return lines;
-        }
       }
       currentLine = [i];
       currentWidth = wordWidth;
     }
   }
-  if (currentLine.length > 0 && lines.length < maxLines) {
+  if (currentLine.length > 0) {
     lines.push(currentLine);
   }
   return lines;
@@ -3993,6 +3990,13 @@ function transformText(text, transform) {
       return text;
   }
 }
+function splitIntoChunks(arr, chunkSize) {
+  const chunks = [];
+  for (let i = 0; i < arr.length; i += chunkSize) {
+    chunks.push(arr.slice(i, i + chunkSize));
+  }
+  return chunks;
+}
 var CaptionLayoutEngine = class {
   fontRegistry;
   cache;
@@ -4079,31 +4083,34 @@ var CaptionLayoutEngine = class {
       const spaceWord = await this.measureWord(" ", measurementConfig);
       spaceWidth = spaceWord.width + config.wordSpacing;
     }
-    const groups = wordGroups.map((indices) => {
+    const groups = wordGroups.flatMap((indices) => {
       const groupWidths = indices.map((i) => store.widths[i]);
-      const lineIndices = breakIntoLines(
+      const allLines = breakIntoLines(
         groupWidths,
         pixelMaxWidth,
-        config.maxLines,
         spaceWidth
       );
-      const lines = lineIndices.map((lineWordIndices, lineIndex) => {
-        const actualIndices = lineWordIndices.map((i) => indices[i]);
-        const lineWidth = actualIndices.reduce((sum, idx) => sum + store.widths[idx], 0) + (actualIndices.length - 1) * spaceWidth;
+      const lineChunks = splitIntoChunks(allLines, config.maxLines);
+      return lineChunks.map((chunkLines) => {
+        const lines = chunkLines.map((lineWordIndices, lineIndex) => {
+          const actualIndices = lineWordIndices.map((i) => indices[i]);
+          const lineWidth = actualIndices.reduce((sum, idx) => sum + store.widths[idx], 0) + (actualIndices.length - 1) * spaceWidth;
+          return {
+            wordIndices: actualIndices,
+            x: 0,
+            y: lineIndex * config.fontSize * config.lineHeight,
+            width: lineWidth,
+            height: config.fontSize
+          };
+        });
+        const allWordIndices = lines.flatMap((l) => l.wordIndices);
         return {
-          wordIndices: actualIndices,
-          x: 0,
-          y: lineIndex * config.fontSize * config.lineHeight,
-          width: lineWidth,
-          height: config.fontSize
+          wordIndices: allWordIndices,
+          startTime: store.startTimes[allWordIndices[0]],
+          endTime: store.endTimes[allWordIndices[allWordIndices.length - 1]],
+          lines
         };
       });
-      return {
-        wordIndices: lines.flatMap((l) => l.wordIndices),
-        startTime: store.startTimes[indices[0]],
-        endTime: store.endTimes[indices[indices.length - 1]],
-        lines
-      };
     });
     const calculateGroupY = (group) => {
       const totalHeight = group.lines.length * config.fontSize * config.lineHeight;
@@ -4478,11 +4485,11 @@ function extractFontConfig(asset) {
   const font = asset.font;
   const active = asset.active?.font;
   return {
-    family: font?.family ?? "Open Sans",
+    family: font?.family ?? CANVAS_CONFIG.DEFAULTS.fontFamily,
     size: font?.size ?? 24,
     weight: String(font?.weight ?? "400"),
     baseColor: font?.color ?? "#ffffff",
-    activeColor: active?.color ?? "#ffff00",
+    activeColor: active?.color ?? "#ffffff",
     baseOpacity: font?.opacity ?? 1,
     activeOpacity: active?.opacity ?? 1,
     letterSpacing: asset.style?.letterSpacing ?? 0
@@ -5384,15 +5391,14 @@ async function createNodeRawEncoder(config, options) {
 }
 
 // src/core/rich-caption-renderer.ts
-var ROBOTO_FONT_URLS = {
-  "100": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbGmT.ttf",
-  "300": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuaabWmT.ttf",
-  "400": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbWmT.ttf",
-  "500": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWub2bWmT.ttf",
-  "600": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYaammT.ttf",
-  "700": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuYjammT.ttf",
-  "800": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuZEammT.ttf",
-  "900": "https://fonts.gstatic.com/s/roboto/v50/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWuZtammT.ttf"
+var OPEN_SANS_FONT_URL = "https://fonts.gstatic.com/s/opensans/v44/mem8YaGs126MiZpBA-U1UpcaXcl0Aw.ttf";
+var OPEN_SANS_FONT_URLS = {
+  "300": OPEN_SANS_FONT_URL,
+  "400": OPEN_SANS_FONT_URL,
+  "500": OPEN_SANS_FONT_URL,
+  "600": OPEN_SANS_FONT_URL,
+  "700": OPEN_SANS_FONT_URL,
+  "800": OPEN_SANS_FONT_URL
 };
 var RichCaptionRenderer = class {
   width;
@@ -5422,12 +5428,12 @@ var RichCaptionRenderer = class {
   async initialize() {
     this.fontRegistry = await FontRegistry.getSharedInstance(this.wasmBaseURL);
     this.layoutEngine = new CaptionLayoutEngine(this.fontRegistry);
-    const weightsToLoad = Object.keys(ROBOTO_FONT_URLS);
+    const weightsToLoad = Object.keys(OPEN_SANS_FONT_URLS);
     const loadPromises = weightsToLoad.map(async (weight) => {
-      const existingFace = await this.fontRegistry.getFace({ family: "Roboto", weight });
+      const existingFace = await this.fontRegistry.getFace({ family: "Open Sans", weight });
       if (!existingFace) {
-        const bytes = await loadFileOrHttpToArrayBuffer(ROBOTO_FONT_URLS[weight]);
-        await this.fontRegistry.registerFromBytes(bytes, { family: "Roboto", weight });
+        const bytes = await loadFileOrHttpToArrayBuffer(OPEN_SANS_FONT_URLS[weight]);
+        await this.fontRegistry.registerFromBytes(bytes, { family: "Open Sans", weight });
       }
     });
     await Promise.all(loadPromises);
@@ -5471,7 +5477,7 @@ var RichCaptionRenderer = class {
       maxLines: asset.maxLines ?? 2,
       position: asset.position ?? "bottom",
       fontSize: font?.size ?? 24,
-      fontFamily: font?.family ?? "Roboto",
+      fontFamily: font?.family ?? "Open Sans",
       fontWeight: String(font?.weight ?? "400"),
       letterSpacing: style?.letterSpacing ?? 0,
       wordSpacing: typeof style?.wordSpacing === "number" ? style.wordSpacing : 0,
@@ -5564,7 +5570,15 @@ var RichCaptionRenderer = class {
           const elapsed = performance.now() - totalStart;
           const fps = framesProcessed / (elapsed / 1e3);
           const eta = (schedule.totalFrames - framesProcessed) / fps * 1e3;
-          this.logProgress(pct, framesProcessed, schedule.totalFrames, i + 1, schedule.uniqueFrameCount, fps, eta);
+          this.logProgress(
+            pct,
+            framesProcessed,
+            schedule.totalFrames,
+            i + 1,
+            schedule.uniqueFrameCount,
+            fps,
+            eta
+          );
         }
         if (i % 500 === 0 && i > 0) {
           this.checkMemoryUsage();
@@ -5944,7 +5958,7 @@ async function createTextEngine(opts = {}) {
         }
       }
       const main = asset.font ?? {
-        family: "Roboto",
+        family: "Open Sans",
         weight: "400",
         size: 48,
         color: "#000000",
@@ -6172,6 +6186,7 @@ export {
   RichCaptionRenderer,
   WordTimingStore,
   arcToCubicBeziers,
+  breakIntoLines,
   calculateAnimationStatesForGroup,
   commandsToPathString,
   computeSimplePathBounds,

package/dist/entry.web.d.ts

@@ -670,6 +670,7 @@ declare class WordTimingStore {
 }
 declare function findWordAtTime(store: WordTimingStore, timeMs: number): number;
 declare function groupWordsByPause(store: WordTimingStore, pauseThreshold?: number): number[][];
+declare function breakIntoLines(wordWidths: number[], maxWidth: number, spaceWidth: number): number[][];
 declare class CaptionLayoutEngine {
     private fontRegistry;
     private cache;
@@ -1259,4 +1260,4 @@ declare function createTextEngine(opts?: {
     destroy(): void;
 }>;
 
-export { type AnimationDirection, type AnimationStyle, type ArcCommand, type BackgroundConfig, type BoundingBox, type CanvasRichCaptionAsset, CanvasRichCaptionAssetSchema, type CanvasRichTextAsset, CanvasRichTextAssetSchema, type CanvasSvgAsset, CanvasSvgAssetSchema, type CaptionGroup, type CaptionLayout, type CaptionLayoutConfig, CaptionLayoutEngine, type CaptionLine, type ClosePathCommand, type CubicBezierCommand, type DrawOp, type EngineInit, type FastVideoOptions, type FastVideoResult, type FontConfig, FontRegistry, type FrameSchedule, type Glyph, type GradientSpec, type IVideoEncoder, type LineToCommand, MediaRecorderFallback, type MoveToCommand, type NormalizedPathCommand, type ParsedPathCommand, type PathCommandType, type Point2D, type PositionedWord, type QuadraticBezierCommand, type RGBA, type RenderFrame, type RenderStats, type Renderer, type ResvgRenderOptions, type ResvgRenderResult, type RichCaptionGeneratorConfig, type RichCaptionRendererOptions, type ShadowConfig, type ShapedLine, type ShapedWord, type ShapedWordGlyph, type ShotstackRichTextAsset, type ShotstackSvgAsset, type StrokeConfig, type StrokeSpec, type ValidAsset, type VideoEncoderCapabilities, type VideoEncoderConfig, type VideoEncoderProgress, WebCodecsEncoder, type WordAnimationConfig, type WordAnimationState, type WordTiming, WordTimingStore, arcToCubicBeziers, calculateAnimationStatesForGroup, commandsToPathString, computeSimplePathBounds, createDefaultGeneratorConfig, createFrameSchedule, createMediaRecorderFallback, createTextEngine, createVideoEncoder, createWebCodecsEncoder, createWebPainter, detectPlatform, detectSubtitleFormat, findWordAtTime, generateRichCaptionDrawOps, generateRichCaptionFrame, generateShapePathData, getDefaultAnimationConfig, getDrawCaptionWordOps, getEncoderCapabilities, getEncoderWarning, groupWordsByPause, initResvg, isDrawCaptionWordOp, isMediaRecorderSupported, isRTLText, isWebCodecsH264Supported, normalizePath, normalizePathString, parseSubtitleToWords, parseSvgPath, quadraticToCubic, renderSvgAssetToPng, renderSvgToPng, richCaptionAssetSchema, shapeToSvgString };
+export { type AnimationDirection, type AnimationStyle, type ArcCommand, type BackgroundConfig, type BoundingBox, type CanvasRichCaptionAsset, CanvasRichCaptionAssetSchema, type CanvasRichTextAsset, CanvasRichTextAssetSchema, type CanvasSvgAsset, CanvasSvgAssetSchema, type CaptionGroup, type CaptionLayout, type CaptionLayoutConfig, CaptionLayoutEngine, type CaptionLine, type ClosePathCommand, type CubicBezierCommand, type DrawOp, type EngineInit, type FastVideoOptions, type FastVideoResult, type FontConfig, FontRegistry, type FrameSchedule, type Glyph, type GradientSpec, type IVideoEncoder, type LineToCommand, MediaRecorderFallback, type MoveToCommand, type NormalizedPathCommand, type ParsedPathCommand, type PathCommandType, type Point2D, type PositionedWord, type QuadraticBezierCommand, type RGBA, type RenderFrame, type RenderStats, type Renderer, type ResvgRenderOptions, type ResvgRenderResult, type RichCaptionGeneratorConfig, type RichCaptionRendererOptions, type ShadowConfig, type ShapedLine, type ShapedWord, type ShapedWordGlyph, type ShotstackRichTextAsset, type ShotstackSvgAsset, type StrokeConfig, type StrokeSpec, type ValidAsset, type VideoEncoderCapabilities, type VideoEncoderConfig, type VideoEncoderProgress, WebCodecsEncoder, type WordAnimationConfig, type WordAnimationState, type WordTiming, WordTimingStore, arcToCubicBeziers, breakIntoLines, calculateAnimationStatesForGroup, commandsToPathString, computeSimplePathBounds, createDefaultGeneratorConfig, createFrameSchedule, createMediaRecorderFallback, createTextEngine, createVideoEncoder, createWebCodecsEncoder, createWebPainter, detectPlatform, detectSubtitleFormat, findWordAtTime, generateRichCaptionDrawOps, generateRichCaptionFrame, generateShapePathData, getDefaultAnimationConfig, getDrawCaptionWordOps, getEncoderCapabilities, getEncoderWarning, groupWordsByPause, initResvg, isDrawCaptionWordOp, isMediaRecorderSupported, isRTLText, isWebCodecsH264Supported, normalizePath, normalizePathString, parseSubtitleToWords, parseSvgPath, quadraticToCubic, renderSvgAssetToPng, renderSvgToPng, richCaptionAssetSchema, shapeToSvgString };