@shotstack/shotstack-canvas 2.0.4 → 2.0.6

package/README.md

@@ -1,13 +1,13 @@
-# @shotstack/shotstack-canvas
-
-One package → identical text shaping/wrapping/animation on Web & Node.
-- HarfBuzz WASM for shaping and glyph outlines (via `harfbuzzjs`).
-- Device-independent draw-ops.
-- Painters: Canvas2D (web) and node-canvas (node).
-- Deterministic time-driven animations.
-
-## Install
-
-```bash
-pnpm add @shotstack/shotstack-canvas
-# or npm i / yarn add
+# @shotstack/shotstack-canvas
+
+One package → identical text shaping/wrapping/animation on Web & Node.
+- HarfBuzz WASM for shaping and glyph outlines (via `harfbuzzjs`).
+- Device-independent draw-ops.
+- Painters: Canvas2D (web) and node-canvas (node).
+- Deterministic time-driven animations.
+
+## Install
+
+```bash
+pnpm add @shotstack/shotstack-canvas
+# or npm i / yarn add

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,
@@ -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;
@@ -4871,7 +4879,7 @@ function extractFontConfig(asset) {
     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
@@ -5607,6 +5615,7 @@ var NodeRawEncoder = class _NodeRawEncoder {
       preset = "ultrafast",
       profile = "high"
     } = config;
+    const hasAlpha = config.hasAlpha ?? false;
     const args = [
       "-y",
       "-f",
@@ -5620,32 +5629,49 @@ var NodeRawEncoder = class _NodeRawEncoder {
       "-thread_queue_size",
       "512",
       "-i",
-      "pipe:0",
-      "-c:v",
-      "libx264",
-      "-preset",
-      preset,
-      "-tune",
-      "stillimage",
-      "-crf",
-      String(crf),
-      "-profile:v",
-      profile,
-      "-g",
-      "300",
-      "-bf",
-      "2",
-      "-threads",
-      "0",
-      "-pix_fmt",
-      "yuv420p",
-      "-r",
-      String(fps),
-      "-movflags",
-      "+faststart"
+      "pipe:0"
     ];
+    if (hasAlpha) {
+      args.push(
+        "-c:v",
+        "prores_ks",
+        "-profile:v",
+        "4444",
+        "-pix_fmt",
+        "yuva444p10le",
+        "-vendor",
+        "apl0",
+        "-r",
+        String(fps)
+      );
+    } else {
+      args.push(
+        "-c:v",
+        "libx264",
+        "-preset",
+        preset,
+        "-tune",
+        "stillimage",
+        "-crf",
+        String(crf),
+        "-profile:v",
+        profile,
+        "-g",
+        "300",
+        "-bf",
+        "2",
+        "-threads",
+        "0",
+        "-pix_fmt",
+        "yuv420p",
+        "-r",
+        String(fps),
+        "-movflags",
+        "+faststart"
+      );
+    }
     if (this.outputToMemory) {
-      args.push("-f", "mp4", "pipe:1");
+      args.push("-f", hasAlpha ? "mov" : "mp4", "pipe:1");
     } else {
       args.push(this.outputPath);
     }
@@ -5905,6 +5931,8 @@ var RichCaptionRenderer = class {
       animationStyle,
       animationSpeed
     );
+    const bgColor = options?.bgColor;
+    const hasAlpha = !bgColor;
     const encoder = new NodeRawEncoder();
     await encoder.configure(
       {
@@ -5914,7 +5942,8 @@ var RichCaptionRenderer = class {
         duration,
         crf: options?.crf ?? 23,
         preset: options?.preset ?? "ultrafast",
-        profile: options?.profile ?? "high"
+        profile: options?.profile ?? "high",
+        hasAlpha
       },
       {
         outputPath,
@@ -5926,7 +5955,6 @@ var RichCaptionRenderer = class {
       height: this.height,
       pixelRatio: this.pixelRatio
     });
-    const bgColor = options?.bgColor ?? "#000000";
     const totalStart = performance.now();
     let framesProcessed = 0;
     let lastPct = -1;
@@ -5940,7 +5968,7 @@ var RichCaptionRenderer = class {
           height: this.height * this.pixelRatio,
           pixelRatio: this.pixelRatio,
           clear: true,
-          bg: { color: bgColor, opacity: 1, radius: 0 }
+          ...bgColor ? { bg: { color: bgColor, opacity: 1, radius: 0 } } : {}
         };
         await painter.render([beginOp, ...captionOps]);
         const rawResult = painter.toRawRGBA();
@@ -6569,6 +6597,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;
@@ -1206,6 +1207,7 @@ interface VideoEncoderConfig {
     hardwareAcceleration?: "prefer-hardware" | "prefer-software" | "no-preference";
     crf?: number;
     preset?: "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow";
+    hasAlpha?: boolean;
 }
 interface VideoEncoderProgress {
     framesEncoded: number;
@@ -1314,4 +1316,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;
@@ -1206,6 +1207,7 @@ interface VideoEncoderConfig {
     hardwareAcceleration?: "prefer-hardware" | "prefer-software" | "no-preference";
     crf?: number;
     preset?: "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow";
+    hasAlpha?: boolean;
 }
 interface VideoEncoderProgress {
     framesEncoded: number;
@@ -1314,4 +1316,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

@@ -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;
@@ -4482,7 +4489,7 @@ function extractFontConfig(asset) {
     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
@@ -5218,6 +5225,7 @@ var NodeRawEncoder = class _NodeRawEncoder {
       preset = "ultrafast",
       profile = "high"
     } = config;
+    const hasAlpha = config.hasAlpha ?? false;
     const args = [
       "-y",
       "-f",
@@ -5231,32 +5239,49 @@ var NodeRawEncoder = class _NodeRawEncoder {
       "-thread_queue_size",
       "512",
       "-i",
-      "pipe:0",
-      "-c:v",
-      "libx264",
-      "-preset",
-      preset,
-      "-tune",
-      "stillimage",
-      "-crf",
-      String(crf),
-      "-profile:v",
-      profile,
-      "-g",
-      "300",
-      "-bf",
-      "2",
-      "-threads",
-      "0",
-      "-pix_fmt",
-      "yuv420p",
-      "-r",
-      String(fps),
-      "-movflags",
-      "+faststart"
+      "pipe:0"
     ];
+    if (hasAlpha) {
+      args.push(
+        "-c:v",
+        "prores_ks",
+        "-profile:v",
+        "4444",
+        "-pix_fmt",
+        "yuva444p10le",
+        "-vendor",
+        "apl0",
+        "-r",
+        String(fps)
+      );
+    } else {
+      args.push(
+        "-c:v",
+        "libx264",
+        "-preset",
+        preset,
+        "-tune",
+        "stillimage",
+        "-crf",
+        String(crf),
+        "-profile:v",
+        profile,
+        "-g",
+        "300",
+        "-bf",
+        "2",
+        "-threads",
+        "0",
+        "-pix_fmt",
+        "yuv420p",
+        "-r",
+        String(fps),
+        "-movflags",
+        "+faststart"
+      );
+    }
     if (this.outputToMemory) {
-      args.push("-f", "mp4", "pipe:1");
+      args.push("-f", hasAlpha ? "mov" : "mp4", "pipe:1");
     } else {
       args.push(this.outputPath);
     }
@@ -5516,6 +5541,8 @@ var RichCaptionRenderer = class {
       animationStyle,
       animationSpeed
     );
+    const bgColor = options?.bgColor;
+    const hasAlpha = !bgColor;
     const encoder = new NodeRawEncoder();
     await encoder.configure(
       {
@@ -5525,7 +5552,8 @@ var RichCaptionRenderer = class {
         duration,
         crf: options?.crf ?? 23,
         preset: options?.preset ?? "ultrafast",
-        profile: options?.profile ?? "high"
+        profile: options?.profile ?? "high",
+        hasAlpha
       },
       {
         outputPath,
@@ -5537,7 +5565,6 @@ var RichCaptionRenderer = class {
       height: this.height,
       pixelRatio: this.pixelRatio
     });
-    const bgColor = options?.bgColor ?? "#000000";
     const totalStart = performance.now();
     let framesProcessed = 0;
     let lastPct = -1;
@@ -5551,7 +5578,7 @@ var RichCaptionRenderer = class {
           height: this.height * this.pixelRatio,
           pixelRatio: this.pixelRatio,
           clear: true,
-          bg: { color: bgColor, opacity: 1, radius: 0 }
+          ...bgColor ? { bg: { color: bgColor, opacity: 1, radius: 0 } } : {}
         };
         await painter.render([beginOp, ...captionOps]);
         const rawResult = painter.toRawRGBA();
@@ -6179,6 +6206,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;
@@ -1147,6 +1148,7 @@ interface VideoEncoderConfig {
     hardwareAcceleration?: "prefer-hardware" | "prefer-software" | "no-preference";
     crf?: number;
     preset?: "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "medium" | "slow" | "slower" | "veryslow";
+    hasAlpha?: boolean;
 }
 interface VideoEncoderProgress {
     framesEncoded: number;
@@ -1259,4 +1261,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 };