@shotstack/shotstack-canvas 2.1.4 → 2.1.6

package/dist/entry.node.js

@@ -18,8 +18,7 @@ import {
   svgShadowSchema,
   svgTransformSchema,
   svgGradientStopSchema,
-  richCaptionActiveSchema as baseCaptionActiveSchema,
-  richCaptionWordAnimationSchema as baseCaptionWordAnimationSchema
+  richCaptionActiveSchema as baseCaptionActiveSchema
 } from "@shotstack/schemas/zod";
 
 // src/config/canvas-constants.ts
@@ -188,24 +187,38 @@ var richCaptionFontSchema = z.object({
   weight: z.union([z.string(), z.number()]).default("400"),
   color: z.string().regex(HEX6).default("#ffffff"),
   opacity: z.number().min(0).max(1).default(1),
-  background: z.string().regex(HEX6).optional()
+  background: z.string().regex(HEX6).optional(),
+  textDecoration: z.enum(["none", "underline", "line-through"]).default("none")
 });
 var richCaptionActiveSchema = baseCaptionActiveSchema.extend({
   font: z.object({
-    color: z.string().regex(HEX6).default("#ffffff"),
-    background: z.string().regex(HEX6).optional(),
-    opacity: z.number().min(0).max(1).default(1)
-  }).optional(),
-  stroke: z.object({
-    width: z.number().min(0).optional(),
     color: z.string().regex(HEX6).optional(),
-    opacity: z.number().min(0).max(1).optional()
+    background: z.string().regex(HEX6).optional(),
+    opacity: z.number().min(0).max(1).optional(),
+    textDecoration: z.enum(["none", "underline", "line-through"]).optional()
   }).optional(),
+  stroke: z.union([
+    z.object({
+      width: z.number().min(0).optional(),
+      color: z.string().regex(HEX6).optional(),
+      opacity: z.number().min(0).max(1).optional()
+    }),
+    z.literal("none")
+  ]).optional(),
+  shadow: z.union([
+    z.object({
+      offsetX: z.number().optional(),
+      offsetY: z.number().optional(),
+      blur: z.number().min(0).optional(),
+      color: z.string().regex(HEX6).optional(),
+      opacity: z.number().min(0).max(1).optional()
+    }),
+    z.literal("none")
+  ]).optional(),
   scale: z.number().min(0.5).max(2).default(1)
 });
-var richCaptionWordAnimationSchema = baseCaptionWordAnimationSchema.extend({
+var richCaptionWordAnimationSchema = z.object({
   style: z.enum(["karaoke", "highlight", "pop", "fade", "slide", "bounce", "typewriter", "none"]).default("highlight"),
-  speed: z.number().min(0.5).max(2).default(1),
   direction: z.enum(["left", "right", "up", "down"]).default("up")
 });
 var richCaptionAssetSchema = z.object({
@@ -2216,281 +2229,616 @@ function parseHex6(hex, alpha = 1) {
   return { r, g, b, a: alpha };
 }
 
-// src/core/rich-caption-animator.ts
-var ANIMATION_DURATIONS = {
-  karaoke: 0,
-  highlight: 0,
-  pop: 200,
-  fade: 150,
-  slide: 250,
-  bounce: 400,
-  typewriter: 0,
-  none: 0
-};
-var DEFAULT_ANIMATION_STATE = {
-  opacity: 1,
-  scale: 1,
-  translateX: 0,
-  translateY: 0,
-  fillProgress: 1,
-  isActive: false,
-  visibleCharacters: -1
-};
-function easeOutQuad2(t) {
-  return t * (2 - t);
-}
-function easeInOutQuad(t) {
-  return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
-}
-function easeOutBack(t) {
-  const c1 = 1.70158;
-  const c3 = c1 + 1;
-  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
-}
-function easeOutCirc(t) {
-  return Math.sqrt(1 - Math.pow(t - 1, 2));
+// src/core/rich-caption-layout.ts
+import { LRUCache } from "lru-cache";
+var ASCENT_RATIO = 0.8;
+var DESCENT_RATIO = 0.2;
+function isRTLText(text) {
+  return containsRTLCharacters(text);
 }
-function easeOutBounce(t) {
-  const n1 = 7.5625;
-  const d1 = 2.75;
-  if (t < 1 / d1) {
-    return n1 * t * t;
-  }
-  if (t < 2 / d1) {
-    return n1 * (t -= 1.5 / d1) * t + 0.75;
+var WordTimingStore = class {
+  startTimes;
+  endTimes;
+  xPositions;
+  yPositions;
+  widths;
+  words;
+  length;
+  constructor(words) {
+    this.length = words.length;
+    this.startTimes = new Uint32Array(this.length);
+    this.endTimes = new Uint32Array(this.length);
+    this.xPositions = new Float32Array(this.length);
+    this.yPositions = new Float32Array(this.length);
+    this.widths = new Float32Array(this.length);
+    this.words = new Array(this.length);
+    for (let i = 0; i < this.length; i++) {
+      this.startTimes[i] = Math.floor(words[i].start);
+      this.endTimes[i] = Math.floor(words[i].end);
+      this.words[i] = words[i].text;
+    }
   }
-  if (t < 2.5 / d1) {
-    return n1 * (t -= 2.25 / d1) * t + 0.9375;
+};
+function findWordAtTime(store, timeMs) {
+  let left = 0;
+  let right = store.length - 1;
+  while (left <= right) {
+    const mid = left + right >>> 1;
+    const start = store.startTimes[mid];
+    const end = store.endTimes[mid];
+    if (timeMs >= start && timeMs < end) {
+      return mid;
+    }
+    if (timeMs < start) {
+      right = mid - 1;
+    } else {
+      left = mid + 1;
+    }
   }
-  return n1 * (t -= 2.625 / d1) * t + 0.984375;
-}
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
+  return -1;
 }
-function calculateAnimationProgress(ctx) {
-  if (ctx.animationDuration <= 0) {
-    return ctx.currentTime >= ctx.wordStart ? 1 : 0;
+function groupWordsByPause(store, pauseThreshold = 500) {
+  if (store.length === 0) {
+    return [];
   }
-  const elapsed = ctx.currentTime - ctx.wordStart;
-  return clamp(elapsed / ctx.animationDuration, 0, 1);
-}
-function calculateWordProgress(ctx) {
-  const duration = ctx.wordEnd - ctx.wordStart;
-  if (duration <= 0) {
-    return ctx.currentTime >= ctx.wordStart ? 1 : 0;
+  const groups = [];
+  let currentGroup = [];
+  for (let i = 0; i < store.length; i++) {
+    if (currentGroup.length === 0) {
+      currentGroup.push(i);
+      continue;
+    }
+    const prevEnd = store.endTimes[currentGroup[currentGroup.length - 1]];
+    const currStart = store.startTimes[i];
+    const gap = currStart - prevEnd;
+    const prevText = store.words[currentGroup[currentGroup.length - 1]];
+    const endsWithPunctuation = /[.!?]$/.test(prevText);
+    if (gap >= pauseThreshold || endsWithPunctuation) {
+      groups.push(currentGroup);
+      currentGroup = [i];
+    } else {
+      currentGroup.push(i);
+    }
   }
-  const elapsed = ctx.currentTime - ctx.wordStart;
-  return clamp(elapsed / duration, 0, 1);
-}
-function isWordActive(ctx) {
-  return ctx.currentTime >= ctx.wordStart && ctx.currentTime < ctx.wordEnd;
+  if (currentGroup.length > 0) {
+    groups.push(currentGroup);
+  }
+  return groups;
 }
-function calculateKaraokeState(ctx, speed) {
-  const isActive = isWordActive(ctx);
-  const wordDuration = ctx.wordEnd - ctx.wordStart;
-  const adjustedDuration = wordDuration / speed;
-  const adjustedEnd = ctx.wordStart + adjustedDuration;
-  const adjustedCtx = { ...ctx, wordEnd: adjustedEnd };
-  if (ctx.currentTime < ctx.wordStart) {
-    return {
-      fillProgress: 0,
-      isActive: false,
-      opacity: 1
-    };
+function breakIntoLines(wordWidths, maxWidth, spaceWidth) {
+  const lines = [];
+  let currentLine = [];
+  let currentWidth = 0;
+  for (let i = 0; i < wordWidths.length; i++) {
+    const wordWidth = wordWidths[i];
+    const spaceNeeded = currentLine.length > 0 ? spaceWidth : 0;
+    if (currentWidth + spaceNeeded + wordWidth <= maxWidth) {
+      currentLine.push(i);
+      currentWidth += spaceNeeded + wordWidth;
+    } else {
+      if (currentLine.length > 0) {
+        lines.push(currentLine);
+      }
+      currentLine = [i];
+      currentWidth = wordWidth;
+    }
   }
-  if (ctx.currentTime >= adjustedEnd) {
-    return {
-      fillProgress: 1,
-      isActive: false,
-      opacity: 1
-    };
+  if (currentLine.length > 0) {
+    lines.push(currentLine);
   }
-  return {
-    fillProgress: calculateWordProgress(adjustedCtx),
-    isActive,
-    opacity: 1
-  };
+  return lines;
 }
-function calculateHighlightState(ctx) {
-  const isActive = isWordActive(ctx);
-  return {
-    isActive,
-    fillProgress: isActive ? 1 : 0,
-    opacity: 1
-  };
+var GLYPH_SIZE_ESTIMATE = 64;
+function createShapedWordCache() {
+  return new LRUCache({
+    max: 5e4,
+    maxSize: 50 * 1024 * 1024,
+    maxEntrySize: 100 * 1024,
+    sizeCalculation: (value, key) => {
+      const keySize = key.length * 2;
+      const glyphsSize = value.glyphs.length * GLYPH_SIZE_ESTIMATE;
+      return keySize + glyphsSize + 100;
+    }
+  });
 }
-function calculatePopState(ctx, activeScale, speed) {
-  if (ctx.currentTime < ctx.wordStart) {
-    return {
-      scale: 0.5,
-      opacity: 0,
-      isActive: false,
-      fillProgress: 0
-    };
-  }
-  const adjustedDuration = ctx.animationDuration / speed;
-  const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
-  const progress = calculateAnimationProgress(adjustedCtx);
-  const easedProgress = easeOutBack(progress);
-  const startScale = 0.5;
-  const isActive = isWordActive(ctx);
-  const endScale = isActive ? activeScale : 1;
-  const scale = startScale + (endScale - startScale) * easedProgress;
-  return {
-    scale: Math.min(scale, activeScale),
-    opacity: easedProgress,
-    isActive,
-    fillProgress: isActive ? 1 : 0
-  };
+function makeShapingKey(text, fontFamily, fontSize, fontWeight, letterSpacing = 0) {
+  return `${text}\0${fontFamily}\0${fontSize}\0${fontWeight}\0${letterSpacing}`;
 }
-function calculateFadeState(ctx, speed) {
-  if (ctx.currentTime < ctx.wordStart) {
-    return {
-      opacity: 0,
-      isActive: false,
-      fillProgress: 0
-    };
+function transformText(text, transform) {
+  switch (transform) {
+    case "uppercase":
+      return text.toUpperCase();
+    case "lowercase":
+      return text.toLowerCase();
+    case "capitalize":
+      return text.replace(/\b\w/g, (c) => c.toUpperCase());
+    default:
+      return text;
   }
-  const adjustedDuration = ctx.animationDuration / speed;
-  const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
-  const progress = calculateAnimationProgress(adjustedCtx);
-  const easedProgress = easeInOutQuad(progress);
-  const isActive = isWordActive(ctx);
-  return {
-    opacity: easedProgress,
-    isActive,
-    fillProgress: isActive ? 1 : 0
-  };
 }
-function calculateSlideState(ctx, direction, speed, fontSize) {
-  const slideDistance = fontSize * 1.5;
-  if (ctx.currentTime < ctx.wordStart) {
-    const offset2 = getDirectionOffset(direction, slideDistance);
-    return {
-      translateX: offset2.x,
-      translateY: offset2.y,
-      opacity: 0,
-      isActive: false,
-      fillProgress: 0
-    };
+function splitIntoChunks(arr, chunkSize) {
+  const chunks = [];
+  for (let i = 0; i < arr.length; i += chunkSize) {
+    chunks.push(arr.slice(i, i + chunkSize));
   }
-  const adjustedDuration = ctx.animationDuration / speed;
-  const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
-  const progress = calculateAnimationProgress(adjustedCtx);
-  const easedProgress = easeOutCirc(progress);
-  const offset = getDirectionOffset(direction, slideDistance);
-  const translateX = offset.x * (1 - easedProgress);
-  const translateY = offset.y * (1 - easedProgress);
-  const isActive = isWordActive(ctx);
-  return {
-    translateX,
-    translateY,
-    opacity: easeOutQuad2(progress),
-    isActive,
-    fillProgress: isActive ? 1 : 0
-  };
+  return chunks;
 }
-function getDirectionOffset(direction, distance) {
-  switch (direction) {
-    case "left":
-      return { x: -distance, y: 0 };
-    case "right":
-      return { x: distance, y: 0 };
-    case "up":
-      return { x: 0, y: -distance };
-    case "down":
-      return { x: 0, y: distance };
+var CaptionLayoutEngine = class {
+  fontRegistry;
+  cache;
+  layoutEngine;
+  constructor(fontRegistry) {
+    this.fontRegistry = fontRegistry;
+    this.cache = createShapedWordCache();
+    this.layoutEngine = new LayoutEngine(fontRegistry);
   }
-}
-function calculateBounceState(ctx, speed, fontSize) {
-  const bounceDistance = fontSize * 0.8;
-  if (ctx.currentTime < ctx.wordStart) {
+  async measureWord(text, config) {
+    const transformedText = transformText(text, config.textTransform);
+    const cacheKey = makeShapingKey(
+      transformedText,
+      config.fontFamily,
+      config.fontSize,
+      config.fontWeight,
+      config.letterSpacing
+    );
+    const cached = this.cache.get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    const lines = await this.layoutEngine.layout({
+      text: transformedText,
+      width: 1e5,
+      letterSpacing: config.letterSpacing,
+      fontSize: config.fontSize,
+      lineHeight: 1,
+      desc: { family: config.fontFamily, weight: config.fontWeight },
+      textTransform: "none"
+    });
+    const width = lines[0]?.width ?? 0;
+    const glyphs = lines[0]?.glyphs ?? [];
+    const isRTL = isRTLText(transformedText);
+    const shaped = {
+      text: transformedText,
+      width,
+      glyphs: glyphs.map((g) => ({
+        id: g.id,
+        xAdvance: g.xAdvance,
+        xOffset: g.xOffset,
+        yOffset: g.yOffset,
+        cluster: g.cluster
+      })),
+      isRTL
+    };
+    this.cache.set(cacheKey, shaped);
+    return shaped;
+  }
+  async layoutCaption(words, config) {
+    const store = new WordTimingStore(words);
+    const measurementConfig = {
+      fontFamily: config.fontFamily,
+      fontSize: config.fontSize,
+      fontWeight: config.fontWeight,
+      letterSpacing: config.letterSpacing,
+      textTransform: config.textTransform
+    };
+    const shapedWords = await Promise.all(
+      words.map((w) => this.measureWord(w.text, measurementConfig))
+    );
+    if (config.measureTextWidth) {
+      const fontString = `${config.fontWeight} ${config.fontSize}px "${config.fontFamily}"`;
+      for (let i = 0; i < shapedWords.length; i++) {
+        store.widths[i] = config.measureTextWidth(shapedWords[i].text, fontString);
+      }
+    } else {
+      for (let i = 0; i < shapedWords.length; i++) {
+        store.widths[i] = shapedWords[i].width;
+      }
+    }
+    if (config.textTransform !== "none") {
+      for (let i = 0; i < shapedWords.length; i++) {
+        store.words[i] = shapedWords[i].text;
+      }
+    }
+    const wordGroups = groupWordsByPause(store, config.pauseThreshold);
+    const pixelMaxWidth = config.availableWidth;
+    let spaceWidth;
+    if (config.measureTextWidth) {
+      const fontString = `${config.fontWeight} ${config.fontSize}px "${config.fontFamily}"`;
+      spaceWidth = config.measureTextWidth(" ", fontString) + config.wordSpacing;
+    } else {
+      const spaceWord = await this.measureWord(" ", measurementConfig);
+      spaceWidth = spaceWord.width + config.wordSpacing;
+    }
+    const groups = wordGroups.flatMap((indices) => {
+      const groupWidths = indices.map((i) => store.widths[i]);
+      const allLines = breakIntoLines(
+        groupWidths,
+        pixelMaxWidth,
+        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);
+        if (allWordIndices.length === 0) {
+          return null;
+        }
+        return {
+          wordIndices: allWordIndices,
+          startTime: store.startTimes[allWordIndices[0]],
+          endTime: store.endTimes[allWordIndices[allWordIndices.length - 1]],
+          lines
+        };
+      }).filter((g) => g !== null);
+    });
+    const contentHeight = config.frameHeight - config.padding.top - config.padding.bottom;
+    const contentWidth = config.frameWidth - config.padding.left - config.padding.right;
+    const calculateGroupY = (group) => {
+      const totalHeight = group.lines.length * config.fontSize * config.lineHeight;
+      switch (config.verticalAlign) {
+        case "top":
+          return config.padding.top + config.fontSize * ASCENT_RATIO;
+        case "bottom":
+          return config.frameHeight - config.padding.bottom - totalHeight + config.fontSize * ASCENT_RATIO;
+        case "middle":
+        default:
+          return config.padding.top + (contentHeight - totalHeight) / 2 + config.fontSize * ASCENT_RATIO;
+      }
+    };
+    const allWordTexts = store.words.slice(0, store.length);
+    const paragraphDirection = detectParagraphDirectionFromWords(allWordTexts);
+    const calculateLineX = (lineWidth) => {
+      switch (config.horizontalAlign) {
+        case "left":
+          return config.padding.left;
+        case "right":
+          return config.frameWidth - lineWidth - config.padding.right;
+        case "center":
+        default:
+          return config.padding.left + (contentWidth - lineWidth) / 2;
+      }
+    };
+    for (const group of groups) {
+      const baseY = calculateGroupY(group);
+      for (let lineIdx = 0; lineIdx < group.lines.length; lineIdx++) {
+        const line = group.lines[lineIdx];
+        line.x = calculateLineX(line.width);
+        line.y = baseY + lineIdx * config.fontSize * config.lineHeight;
+        const lineWordTexts = line.wordIndices.map((idx) => store.words[idx]);
+        const visualOrder = reorderWordsForLine(lineWordTexts, paragraphDirection);
+        let xCursor = line.x;
+        for (const visualIdx of visualOrder) {
+          const wordIdx = line.wordIndices[visualIdx];
+          store.xPositions[wordIdx] = xCursor;
+          store.yPositions[wordIdx] = line.y;
+          xCursor += store.widths[wordIdx] + spaceWidth;
+        }
+      }
+    }
     return {
-      translateY: -bounceDistance,
-      opacity: 0,
-      isActive: false,
-      fillProgress: 0
+      store,
+      groups,
+      shapedWords,
+      paragraphDirection
     };
   }
-  const adjustedDuration = ctx.animationDuration / speed;
-  const adjustedCtx = { ...ctx, animationDuration: adjustedDuration };
-  const progress = calculateAnimationProgress(adjustedCtx);
-  const easedProgress = easeOutBounce(progress);
-  const isActive = isWordActive(ctx);
-  return {
-    translateY: -bounceDistance * (1 - easedProgress),
-    opacity: easeOutQuad2(progress),
-    isActive,
-    fillProgress: isActive ? 1 : 0
-  };
-}
-function calculateTypewriterState(ctx, charCount, speed) {
-  const wordDuration = ctx.wordEnd - ctx.wordStart;
-  const adjustedDuration = wordDuration / speed;
-  const adjustedEnd = ctx.wordStart + adjustedDuration;
-  const adjustedCtx = { ...ctx, wordEnd: adjustedEnd };
-  if (ctx.currentTime < ctx.wordStart) {
+  getVisibleWordsAtTime(layout, timeMs) {
+    const activeGroup = layout.groups.find(
+      (g) => timeMs >= g.startTime && timeMs <= g.endTime
+    );
+    if (!activeGroup) {
+      return [];
+    }
+    return activeGroup.wordIndices.map((idx) => ({
+      wordIndex: idx,
+      text: layout.store.words[idx],
+      x: layout.store.xPositions[idx],
+      y: layout.store.yPositions[idx],
+      width: layout.store.widths[idx],
+      startTime: layout.store.startTimes[idx],
+      endTime: layout.store.endTimes[idx],
+      isRTL: layout.shapedWords[idx].isRTL
+    }));
+  }
+  getActiveWordAtTime(layout, timeMs) {
+    const wordIndex = findWordAtTime(layout.store, timeMs);
+    if (wordIndex === -1) {
+      return null;
+    }
     return {
-      visibleCharacters: 0,
-      opacity: 1,
-      isActive: false
+      wordIndex,
+      text: layout.store.words[wordIndex],
+      x: layout.store.xPositions[wordIndex],
+      y: layout.store.yPositions[wordIndex],
+      width: layout.store.widths[wordIndex],
+      startTime: layout.store.startTimes[wordIndex],
+      endTime: layout.store.endTimes[wordIndex],
+      isRTL: layout.shapedWords[wordIndex].isRTL
     };
   }
-  if (ctx.currentTime >= adjustedEnd) {
+  clearCache() {
+    this.cache.clear();
+  }
+  getCacheStats() {
     return {
-      visibleCharacters: charCount,
-      opacity: 1,
-      isActive: false
+      size: this.cache.size,
+      calculatedSize: this.cache.calculatedSize
     };
   }
-  const progress = calculateWordProgress(adjustedCtx);
-  const visibleCharacters = Math.ceil(progress * charCount);
-  return {
-    visibleCharacters: clamp(visibleCharacters, 0, charCount),
-    opacity: 1,
-    isActive: isWordActive(ctx)
-  };
-}
-function calculateNoneState(_ctx) {
-  return {
-    opacity: 1,
-    isActive: false,
-    fillProgress: 0
-  };
-}
-function calculateWordAnimationState(wordStart, wordEnd, currentTime, config, activeScale = 1, charCount = 0, fontSize = 48, isRTL = false) {
-  const safeSpeed = config.speed > 0 ? config.speed : 1;
-  const ctx = {
-    wordStart,
-    wordEnd,
-    currentTime,
-    animationDuration: ANIMATION_DURATIONS[config.style]
-  };
-  const baseState = { ...DEFAULT_ANIMATION_STATE };
+};
+
+// src/core/rich-caption-animator.ts
+var ANIMATION_DURATIONS = {
+  karaoke: 0,
+  highlight: 0,
+  pop: 200,
+  fade: 150,
+  slide: 250,
+  bounce: 400,
+  typewriter: 0,
+  none: 0
+};
+var DEFAULT_ANIMATION_STATE = {
+  opacity: 1,
+  scale: 1,
+  translateX: 0,
+  translateY: 0,
+  fillProgress: 1,
+  isActive: false,
+  visibleCharacters: -1
+};
+function easeOutQuad2(t) {
+  return t * (2 - t);
+}
+function easeInOutQuad(t) {
+  return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+}
+function easeOutBack(t) {
+  const c1 = 1.70158;
+  const c3 = c1 + 1;
+  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+}
+function easeOutCirc(t) {
+  return Math.sqrt(1 - Math.pow(t - 1, 2));
+}
+function easeOutBounce(t) {
+  const n1 = 7.5625;
+  const d1 = 2.75;
+  if (t < 1 / d1) {
+    return n1 * t * t;
+  }
+  if (t < 2 / d1) {
+    return n1 * (t -= 1.5 / d1) * t + 0.75;
+  }
+  if (t < 2.5 / d1) {
+    return n1 * (t -= 2.25 / d1) * t + 0.9375;
+  }
+  return n1 * (t -= 2.625 / d1) * t + 0.984375;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function calculateAnimationProgress(ctx) {
+  if (ctx.animationDuration <= 0) {
+    return ctx.currentTime >= ctx.wordStart ? 1 : 0;
+  }
+  const elapsed = ctx.currentTime - ctx.wordStart;
+  return clamp(elapsed / ctx.animationDuration, 0, 1);
+}
+function calculateWordProgress(ctx) {
+  const duration = ctx.wordEnd - ctx.wordStart;
+  if (duration <= 0) {
+    return ctx.currentTime >= ctx.wordStart ? 1 : 0;
+  }
+  const elapsed = ctx.currentTime - ctx.wordStart;
+  return clamp(elapsed / duration, 0, 1);
+}
+function isWordActive(ctx) {
+  return ctx.currentTime >= ctx.wordStart && ctx.currentTime < ctx.wordEnd;
+}
+function calculateKaraokeState(ctx) {
+  const isActive = isWordActive(ctx);
+  if (ctx.currentTime < ctx.wordStart) {
+    return {
+      fillProgress: 0,
+      isActive: false,
+      opacity: 1
+    };
+  }
+  if (ctx.currentTime >= ctx.wordEnd) {
+    return {
+      fillProgress: 1,
+      isActive: false,
+      opacity: 1
+    };
+  }
+  return {
+    fillProgress: calculateWordProgress(ctx),
+    isActive,
+    opacity: 1
+  };
+}
+function calculateHighlightState(ctx) {
+  const isActive = isWordActive(ctx);
+  return {
+    isActive,
+    fillProgress: isActive ? 1 : 0,
+    opacity: 1
+  };
+}
+function calculatePopState(ctx, activeScale) {
+  if (ctx.currentTime < ctx.wordStart) {
+    return {
+      scale: 0.5,
+      opacity: 0,
+      isActive: false,
+      fillProgress: 0
+    };
+  }
+  const progress = calculateAnimationProgress(ctx);
+  const easedProgress = easeOutBack(progress);
+  const startScale = 0.5;
+  const isActive = isWordActive(ctx);
+  const endScale = isActive ? activeScale : 1;
+  const scale = startScale + (endScale - startScale) * easedProgress;
+  return {
+    scale: Math.min(scale, activeScale),
+    opacity: easedProgress,
+    isActive,
+    fillProgress: isActive ? 1 : 0
+  };
+}
+function calculateFadeState(ctx) {
+  if (ctx.currentTime < ctx.wordStart) {
+    return {
+      opacity: 0,
+      isActive: false,
+      fillProgress: 0
+    };
+  }
+  const progress = calculateAnimationProgress(ctx);
+  const easedProgress = easeInOutQuad(progress);
+  const isActive = isWordActive(ctx);
+  return {
+    opacity: easedProgress,
+    isActive,
+    fillProgress: isActive ? 1 : 0
+  };
+}
+function calculateSlideState(ctx, direction, fontSize) {
+  const slideDistance = fontSize * 1.5;
+  if (ctx.currentTime < ctx.wordStart) {
+    const offset2 = getDirectionOffset(direction, slideDistance);
+    return {
+      translateX: offset2.x,
+      translateY: offset2.y,
+      opacity: 0,
+      isActive: false,
+      fillProgress: 0
+    };
+  }
+  const progress = calculateAnimationProgress(ctx);
+  const easedProgress = easeOutCirc(progress);
+  const offset = getDirectionOffset(direction, slideDistance);
+  const translateX = offset.x * (1 - easedProgress);
+  const translateY = offset.y * (1 - easedProgress);
+  const isActive = isWordActive(ctx);
+  return {
+    translateX,
+    translateY,
+    opacity: easeOutQuad2(progress),
+    isActive,
+    fillProgress: isActive ? 1 : 0
+  };
+}
+function getDirectionOffset(direction, distance) {
+  switch (direction) {
+    case "left":
+      return { x: -distance, y: 0 };
+    case "right":
+      return { x: distance, y: 0 };
+    case "up":
+      return { x: 0, y: distance };
+    case "down":
+      return { x: 0, y: -distance };
+  }
+}
+function calculateBounceState(ctx, fontSize) {
+  const bounceDistance = fontSize * 0.8;
+  if (ctx.currentTime < ctx.wordStart) {
+    return {
+      translateY: -bounceDistance,
+      opacity: 0,
+      isActive: false,
+      fillProgress: 0
+    };
+  }
+  const progress = calculateAnimationProgress(ctx);
+  const easedProgress = easeOutBounce(progress);
+  const isActive = isWordActive(ctx);
+  return {
+    translateY: -bounceDistance * (1 - easedProgress),
+    opacity: easeOutQuad2(progress),
+    isActive,
+    fillProgress: isActive ? 1 : 0
+  };
+}
+function calculateTypewriterState(ctx, charCount) {
+  if (ctx.currentTime < ctx.wordStart) {
+    return {
+      visibleCharacters: 0,
+      opacity: 1,
+      isActive: false,
+      fillProgress: 0
+    };
+  }
+  if (ctx.currentTime >= ctx.wordEnd) {
+    return {
+      visibleCharacters: charCount,
+      opacity: 1,
+      isActive: false,
+      fillProgress: 0
+    };
+  }
+  const progress = calculateWordProgress(ctx);
+  const visibleCharacters = Math.ceil(progress * charCount);
+  const isActive = isWordActive(ctx);
+  return {
+    visibleCharacters: clamp(visibleCharacters, 0, charCount),
+    opacity: 1,
+    isActive,
+    fillProgress: isActive ? 1 : 0
+  };
+}
+function calculateNoneState(_ctx) {
+  return {
+    opacity: 1,
+    isActive: false,
+    fillProgress: 0
+  };
+}
+function calculateWordAnimationState(wordStart, wordEnd, currentTime, config, activeScale = 1, charCount = 0, fontSize = 48, isRTL = false) {
+  const ctx = {
+    wordStart,
+    wordEnd,
+    currentTime,
+    animationDuration: ANIMATION_DURATIONS[config.style]
+  };
+  const baseState = { ...DEFAULT_ANIMATION_STATE };
   let partialState;
   switch (config.style) {
     case "karaoke":
-      partialState = calculateKaraokeState(ctx, safeSpeed);
+      partialState = calculateKaraokeState(ctx);
       break;
     case "highlight":
       partialState = calculateHighlightState(ctx);
       break;
     case "pop":
-      partialState = calculatePopState(ctx, activeScale, safeSpeed);
+      partialState = calculatePopState(ctx, activeScale);
       break;
     case "fade":
-      partialState = calculateFadeState(ctx, safeSpeed);
+      partialState = calculateFadeState(ctx);
       break;
     case "slide": {
       const slideDir = mirrorAnimationDirection(config.direction, isRTL);
-      partialState = calculateSlideState(ctx, slideDir, config.speed, fontSize);
+      partialState = calculateSlideState(ctx, slideDir, fontSize);
       break;
     }
     case "bounce":
-      partialState = calculateBounceState(ctx, safeSpeed, fontSize);
+      partialState = calculateBounceState(ctx, fontSize);
       break;
     case "typewriter":
-      partialState = calculateTypewriterState(ctx, charCount, safeSpeed);
+      partialState = calculateTypewriterState(ctx, charCount);
       break;
     case "none":
     default:
@@ -2523,34 +2871,30 @@ function calculateAnimationStatesForGroup(words, currentTime, config, activeScal
 function getDefaultAnimationConfig() {
   return {
     style: "highlight",
-    speed: 1,
     direction: "up"
   };
 }
 
 // src/core/rich-caption-generator.ts
-var ASCENT_RATIO = 0.8;
-var DESCENT_RATIO = 0.2;
 var WORD_BG_OPACITY = 1;
 var WORD_BG_BORDER_RADIUS = 4;
 var WORD_BG_PADDING_RATIO = 0.12;
 function extractFontConfig(asset) {
   const font = asset.font;
   const active = asset.active?.font;
-  const hasActiveConfig = asset.active !== void 0;
+  const hasExplicitActiveColor = active?.color !== void 0;
   const baseColor = font?.color ?? "#ffffff";
   const baseOpacity = font?.opacity ?? 1;
   let activeColor;
   let activeOpacity;
-  if (!hasActiveConfig) {
+  if (!hasExplicitActiveColor) {
     activeColor = baseColor;
-    activeOpacity = baseOpacity;
+    activeOpacity = active?.opacity ?? baseOpacity;
   } else {
-    const explicitActiveColor = active?.color;
     const animStyle = asset.wordAnimation?.style ?? "highlight";
     const isFillAnimation = animStyle === "karaoke" || animStyle === "highlight";
     const DEFAULT_ACTIVE_COLOR = "#ffff00";
-    activeColor = explicitActiveColor ?? (isFillAnimation ? DEFAULT_ACTIVE_COLOR : baseColor);
+    activeColor = active.color ?? (isFillAnimation ? DEFAULT_ACTIVE_COLOR : baseColor);
     activeOpacity = active?.opacity ?? baseOpacity;
   }
   return {
@@ -2567,18 +2911,17 @@ function extractFontConfig(asset) {
 function extractStrokeConfig(asset, isActive) {
   const baseStroke = asset.stroke;
   const activeStroke = asset.active?.stroke;
-  if (!baseStroke && !activeStroke) {
-    return void 0;
-  }
   if (isActive) {
-    if (!activeStroke) {
+    if (activeStroke === "none") {
       return void 0;
     }
-    return {
-      width: activeStroke.width ?? baseStroke?.width ?? 0,
-      color: activeStroke.color ?? baseStroke?.color ?? "#000000",
-      opacity: activeStroke.opacity ?? baseStroke?.opacity ?? 1
-    };
+    if (activeStroke && typeof activeStroke === "object") {
+      return {
+        width: activeStroke.width ?? baseStroke?.width ?? 0,
+        color: activeStroke.color ?? baseStroke?.color ?? "#000000",
+        opacity: activeStroke.opacity ?? baseStroke?.opacity ?? 1
+      };
+    }
   }
   if (baseStroke) {
     return {
@@ -2590,25 +2933,42 @@ function extractStrokeConfig(asset, isActive) {
   return void 0;
 }
 function extractShadowConfig(asset, isActive) {
+  const baseShadow = asset.shadow;
+  const activeShadow = asset.active?.shadow;
   if (isActive) {
-    return void 0;
+    if (activeShadow === "none") {
+      return void 0;
+    }
+    if (activeShadow && typeof activeShadow === "object") {
+      return {
+        offsetX: activeShadow.offsetX ?? baseShadow?.offsetX ?? 0,
+        offsetY: activeShadow.offsetY ?? baseShadow?.offsetY ?? 0,
+        blur: activeShadow.blur ?? baseShadow?.blur ?? 0,
+        color: activeShadow.color ?? baseShadow?.color ?? "#000000",
+        opacity: activeShadow.opacity ?? baseShadow?.opacity ?? 0.5
+      };
+    }
   }
-  const shadow = asset.shadow;
-  if (!shadow) {
-    return void 0;
+  if (baseShadow) {
+    return {
+      offsetX: baseShadow.offsetX ?? 0,
+      offsetY: baseShadow.offsetY ?? 0,
+      blur: baseShadow.blur ?? 0,
+      color: baseShadow.color ?? "#000000",
+      opacity: baseShadow.opacity ?? 0.5
+    };
   }
-  return {
-    offsetX: shadow.offsetX ?? 0,
-    offsetY: shadow.offsetY ?? 0,
-    blur: shadow.blur ?? 0,
-    color: shadow.color ?? "#000000",
-    opacity: shadow.opacity ?? 0.5
-  };
+  return void 0;
 }
 function extractBackgroundConfig(asset, isActive, fontSize) {
   const fontBackground = asset.font?.background;
   const activeBackground = asset.active?.font?.background;
-  const bgColor = isActive && activeBackground ? activeBackground : fontBackground;
+  let bgColor;
+  if (isActive) {
+    bgColor = activeBackground ?? fontBackground;
+  } else {
+    bgColor = fontBackground;
+  }
   if (!bgColor) {
     return void 0;
   }
@@ -2658,6 +3018,17 @@ function extractCaptionBorder(asset) {
     radius: border.radius ?? 0
   };
 }
+function extractTextDecoration(asset, isActive) {
+  const baseDecoration = asset.font?.textDecoration;
+  const activeDecoration = asset.active?.font?.textDecoration;
+  if (isActive && activeDecoration !== void 0) {
+    return activeDecoration === "none" ? void 0 : activeDecoration;
+  }
+  if (!baseDecoration || baseDecoration === "none") {
+    return void 0;
+  }
+  return baseDecoration;
+}
 function extractAnimationConfig(asset) {
   const wordAnim = asset.wordAnimation;
   if (!wordAnim) {
@@ -2665,7 +3036,6 @@ function extractAnimationConfig(asset) {
   }
   return {
     style: wordAnim.style ?? "highlight",
-    speed: wordAnim.speed ?? 1,
     direction: wordAnim.direction ?? "up"
   };
 }
@@ -2700,7 +3070,8 @@ function createDrawCaptionWordOp(word, animState, asset, fontConfig) {
     letterSpacing: fontConfig.letterSpacing > 0 ? fontConfig.letterSpacing : void 0,
     stroke: extractStrokeConfig(asset, isActive),
     shadow: extractShadowConfig(asset, isActive),
-    background: extractBackgroundConfig(asset, isActive, fontConfig.size)
+    background: extractBackgroundConfig(asset, isActive, fontConfig.size),
+    textDecoration: extractTextDecoration(asset, isActive)
   };
 }
 function generateRichCaptionDrawOps(asset, layout, frameTimeMs, layoutEngine, config) {
@@ -3204,7 +3575,8 @@ async function createNodePainter(opts) {
                 context.lineCap = "round";
                 context.strokeText(displayText, 0, 0);
               }
-              if (wordOp.fillProgress <= 0) {
+              const sameColor = wordOp.activeColor === wordOp.baseColor && wordOp.activeOpacity === wordOp.baseOpacity;
+              if (wordOp.fillProgress <= 0 || sameColor) {
                 const baseC = parseHex6(wordOp.baseColor, wordOp.baseOpacity);
                 context.fillStyle = `rgba(${baseC.r},${baseC.g},${baseC.b},${baseC.a})`;
                 context.fillText(displayText, 0, 0);
@@ -3231,7 +3603,26 @@ async function createNodePainter(opts) {
                 context.fillText(displayText, 0, 0);
                 context.restore();
               }
-              context.restore();
+              if (wordOp.textDecoration) {
+                const geo = decorationGeometry(wordOp.textDecoration, {
+                  baselineY: 0,
+                  fontSize: wordOp.fontSize,
+                  lineWidth: textWidth,
+                  xStart: 0
+                });
+                const sameC = wordOp.activeColor === wordOp.baseColor && wordOp.activeOpacity === wordOp.baseOpacity;
+                const decoIsActive = wordOp.fillProgress >= 1 && !sameC;
+                const decoColor = decoIsActive ? wordOp.activeColor : wordOp.baseColor;
+                const decoOpacity = decoIsActive ? wordOp.activeOpacity : wordOp.baseOpacity;
+                const dc = parseHex6(decoColor, decoOpacity);
+                context.strokeStyle = `rgba(${dc.r},${dc.g},${dc.b},${dc.a})`;
+                context.lineWidth = geo.width;
+                context.beginPath();
+                context.moveTo(geo.x1, geo.y);
+                context.lineTo(geo.x2, geo.y);
+                context.stroke();
+              }
+              context.restore();
             }
           });
           continue;
@@ -4522,520 +4913,173 @@ function computeSimplePathBounds(d) {
           minX = Math.min(minX, currentX);
           maxX = Math.max(maxX, currentX);
         }
-        break;
-      case "h":
-        if (numIndex < numbers.length) {
-          currentX += numbers[numIndex++];
-          minX = Math.min(minX, currentX);
-          maxX = Math.max(maxX, currentX);
-        }
-        break;
-      case "V":
-        if (numIndex < numbers.length) {
-          currentY = numbers[numIndex++];
-          minY = Math.min(minY, currentY);
-          maxY = Math.max(maxY, currentY);
-        }
-        break;
-      case "v":
-        if (numIndex < numbers.length) {
-          currentY += numbers[numIndex++];
-          minY = Math.min(minY, currentY);
-          maxY = Math.max(maxY, currentY);
-        }
-        break;
-      case "C":
-        if (numIndex + 5 < numbers.length) {
-          for (let j = 0; j < 3; j++) {
-            const x = numbers[numIndex++];
-            const y = numbers[numIndex++];
-            minX = Math.min(minX, x);
-            maxX = Math.max(maxX, x);
-            minY = Math.min(minY, y);
-            maxY = Math.max(maxY, y);
-            if (j === 2) {
-              currentX = x;
-              currentY = y;
-            }
-          }
-        }
-        break;
-      case "c":
-        if (numIndex + 5 < numbers.length) {
-          for (let j = 0; j < 3; j++) {
-            const x = currentX + numbers[numIndex++];
-            const y = currentY + numbers[numIndex++];
-            minX = Math.min(minX, x);
-            maxX = Math.max(maxX, x);
-            minY = Math.min(minY, y);
-            maxY = Math.max(maxY, y);
-            if (j === 2) {
-              currentX = x;
-              currentY = y;
-            }
-          }
-        }
-        break;
-      case "S":
-      case "Q":
-        if (numIndex + 3 < numbers.length) {
-          for (let j = 0; j < 2; j++) {
-            const x = numbers[numIndex++];
-            const y = numbers[numIndex++];
-            minX = Math.min(minX, x);
-            maxX = Math.max(maxX, x);
-            minY = Math.min(minY, y);
-            maxY = Math.max(maxY, y);
-            if (j === 1) {
-              currentX = x;
-              currentY = y;
-            }
-          }
-        }
-        break;
-      case "s":
-      case "q":
-        if (numIndex + 3 < numbers.length) {
-          for (let j = 0; j < 2; j++) {
-            const x = currentX + numbers[numIndex++];
-            const y = currentY + numbers[numIndex++];
-            minX = Math.min(minX, x);
-            maxX = Math.max(maxX, x);
-            minY = Math.min(minY, y);
-            maxY = Math.max(maxY, y);
-            if (j === 1) {
-              currentX = x;
-              currentY = y;
-            }
-          }
-        }
-        break;
-      case "A":
-        if (numIndex + 6 < numbers.length) {
-          numIndex += 5;
-          currentX = numbers[numIndex++];
-          currentY = numbers[numIndex++];
-          minX = Math.min(minX, currentX);
-          maxX = Math.max(maxX, currentX);
-          minY = Math.min(minY, currentY);
-          maxY = Math.max(maxY, currentY);
-        }
-        break;
-      case "a":
-        if (numIndex + 6 < numbers.length) {
-          numIndex += 5;
-          currentX += numbers[numIndex++];
-          currentY += numbers[numIndex++];
-          minX = Math.min(minX, currentX);
-          maxX = Math.max(maxX, currentX);
-          minY = Math.min(minY, currentY);
-          maxY = Math.max(maxY, currentY);
-        }
-        break;
-      case "Z":
-      case "z":
-        break;
-    }
-    cmdIndex++;
-  }
-  if (minX === Infinity) {
-    return { x: 0, y: 0, w: 0, h: 0 };
-  }
-  return {
-    x: minX,
-    y: minY,
-    w: maxX - minX,
-    h: maxY - minY
-  };
-}
-async function renderSvgAssetToPng(asset, options = {}) {
-  const defaultWidth = options.defaultWidth ?? 1920;
-  const defaultHeight = options.defaultHeight ?? 1080;
-  let svgString;
-  let targetWidth;
-  let targetHeight;
-  if (asset.src) {
-    svgString = asset.src;
-    const dimensions = extractSvgDimensions(svgString);
-    targetWidth = dimensions.width || defaultWidth;
-    targetHeight = dimensions.height || defaultHeight;
-  } else if (asset.shape) {
-    targetWidth = toNumber(asset.width, defaultWidth);
-    targetHeight = toNumber(asset.height, defaultHeight);
-    svgString = shapeToSvgString(asset, targetWidth, targetHeight);
-  } else {
-    throw new Error("Either 'src' or 'shape' must be provided");
-  }
-  return renderSvgToPng(svgString, {
-    width: targetWidth,
-    height: targetHeight,
-    background: options.background
-  });
-}
-function extractSvgDimensions(svgString) {
-  const widthMatch = svgString.match(/width\s*=\s*["']?(\d+(?:\.\d+)?)/i);
-  const heightMatch = svgString.match(/height\s*=\s*["']?(\d+(?:\.\d+)?)/i);
-  let width = widthMatch ? parseFloat(widthMatch[1]) : 0;
-  let height = heightMatch ? parseFloat(heightMatch[1]) : 0;
-  if (!width || !height) {
-    const viewBoxMatch = svgString.match(/viewBox\s*=\s*["']([^"']+)["']/i);
-    if (viewBoxMatch) {
-      const parts = viewBoxMatch[1].trim().split(/[\s,]+/).map(parseFloat);
-      if (parts.length === 4) {
-        width = width || parts[2];
-        height = height || parts[3];
-      }
-    }
-  }
-  return { width, height };
-}
-
-// src/core/rich-caption-layout.ts
-import { LRUCache } from "lru-cache";
-function isRTLText(text) {
-  return containsRTLCharacters(text);
-}
-var WordTimingStore = class {
-  startTimes;
-  endTimes;
-  xPositions;
-  yPositions;
-  widths;
-  words;
-  length;
-  constructor(words) {
-    this.length = words.length;
-    this.startTimes = new Uint32Array(this.length);
-    this.endTimes = new Uint32Array(this.length);
-    this.xPositions = new Float32Array(this.length);
-    this.yPositions = new Float32Array(this.length);
-    this.widths = new Float32Array(this.length);
-    this.words = new Array(this.length);
-    for (let i = 0; i < this.length; i++) {
-      this.startTimes[i] = Math.floor(words[i].start);
-      this.endTimes[i] = Math.floor(words[i].end);
-      this.words[i] = words[i].text;
-    }
-  }
-};
-function findWordAtTime(store, timeMs) {
-  let left = 0;
-  let right = store.length - 1;
-  while (left <= right) {
-    const mid = left + right >>> 1;
-    const start = store.startTimes[mid];
-    const end = store.endTimes[mid];
-    if (timeMs >= start && timeMs < end) {
-      return mid;
-    }
-    if (timeMs < start) {
-      right = mid - 1;
-    } else {
-      left = mid + 1;
-    }
-  }
-  return -1;
-}
-function groupWordsByPause(store, pauseThreshold = 500) {
-  if (store.length === 0) {
-    return [];
-  }
-  const groups = [];
-  let currentGroup = [];
-  for (let i = 0; i < store.length; i++) {
-    if (currentGroup.length === 0) {
-      currentGroup.push(i);
-      continue;
-    }
-    const prevEnd = store.endTimes[currentGroup[currentGroup.length - 1]];
-    const currStart = store.startTimes[i];
-    const gap = currStart - prevEnd;
-    const prevText = store.words[currentGroup[currentGroup.length - 1]];
-    const endsWithPunctuation = /[.!?]$/.test(prevText);
-    if (gap >= pauseThreshold || endsWithPunctuation) {
-      groups.push(currentGroup);
-      currentGroup = [i];
-    } else {
-      currentGroup.push(i);
-    }
-  }
-  if (currentGroup.length > 0) {
-    groups.push(currentGroup);
-  }
-  return groups;
-}
-function breakIntoLines(wordWidths, maxWidth, spaceWidth) {
-  const lines = [];
-  let currentLine = [];
-  let currentWidth = 0;
-  for (let i = 0; i < wordWidths.length; i++) {
-    const wordWidth = wordWidths[i];
-    const spaceNeeded = currentLine.length > 0 ? spaceWidth : 0;
-    if (currentWidth + spaceNeeded + wordWidth <= maxWidth) {
-      currentLine.push(i);
-      currentWidth += spaceNeeded + wordWidth;
-    } else {
-      if (currentLine.length > 0) {
-        lines.push(currentLine);
-      }
-      currentLine = [i];
-      currentWidth = wordWidth;
-    }
-  }
-  if (currentLine.length > 0) {
-    lines.push(currentLine);
-  }
-  return lines;
-}
-var GLYPH_SIZE_ESTIMATE = 64;
-function createShapedWordCache() {
-  return new LRUCache({
-    max: 5e4,
-    maxSize: 50 * 1024 * 1024,
-    maxEntrySize: 100 * 1024,
-    sizeCalculation: (value, key) => {
-      const keySize = key.length * 2;
-      const glyphsSize = value.glyphs.length * GLYPH_SIZE_ESTIMATE;
-      return keySize + glyphsSize + 100;
-    }
-  });
-}
-function makeShapingKey(text, fontFamily, fontSize, fontWeight, letterSpacing = 0) {
-  return `${text}\0${fontFamily}\0${fontSize}\0${fontWeight}\0${letterSpacing}`;
-}
-function transformText(text, transform) {
-  switch (transform) {
-    case "uppercase":
-      return text.toUpperCase();
-    case "lowercase":
-      return text.toLowerCase();
-    case "capitalize":
-      return text.replace(/\b\w/g, (c) => c.toUpperCase());
-    default:
-      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;
-  layoutEngine;
-  constructor(fontRegistry) {
-    this.fontRegistry = fontRegistry;
-    this.cache = createShapedWordCache();
-    this.layoutEngine = new LayoutEngine(fontRegistry);
-  }
-  async measureWord(text, config) {
-    const transformedText = transformText(text, config.textTransform);
-    const cacheKey = makeShapingKey(
-      transformedText,
-      config.fontFamily,
-      config.fontSize,
-      config.fontWeight,
-      config.letterSpacing
-    );
-    const cached = this.cache.get(cacheKey);
-    if (cached) {
-      return cached;
-    }
-    const lines = await this.layoutEngine.layout({
-      text: transformedText,
-      width: 1e5,
-      letterSpacing: config.letterSpacing,
-      fontSize: config.fontSize,
-      lineHeight: 1,
-      desc: { family: config.fontFamily, weight: config.fontWeight },
-      textTransform: "none"
-    });
-    const width = lines[0]?.width ?? 0;
-    const glyphs = lines[0]?.glyphs ?? [];
-    const isRTL = isRTLText(transformedText);
-    const shaped = {
-      text: transformedText,
-      width,
-      glyphs: glyphs.map((g) => ({
-        id: g.id,
-        xAdvance: g.xAdvance,
-        xOffset: g.xOffset,
-        yOffset: g.yOffset,
-        cluster: g.cluster
-      })),
-      isRTL
-    };
-    this.cache.set(cacheKey, shaped);
-    return shaped;
-  }
-  async layoutCaption(words, config) {
-    const store = new WordTimingStore(words);
-    const measurementConfig = {
-      fontFamily: config.fontFamily,
-      fontSize: config.fontSize,
-      fontWeight: config.fontWeight,
-      letterSpacing: config.letterSpacing,
-      textTransform: config.textTransform
-    };
-    const shapedWords = await Promise.all(
-      words.map((w) => this.measureWord(w.text, measurementConfig))
-    );
-    if (config.measureTextWidth) {
-      const fontString = `${config.fontWeight} ${config.fontSize}px "${config.fontFamily}"`;
-      for (let i = 0; i < shapedWords.length; i++) {
-        store.widths[i] = config.measureTextWidth(shapedWords[i].text, fontString);
-      }
-    } else {
-      for (let i = 0; i < shapedWords.length; i++) {
-        store.widths[i] = shapedWords[i].width;
-      }
-    }
-    if (config.textTransform !== "none") {
-      for (let i = 0; i < shapedWords.length; i++) {
-        store.words[i] = shapedWords[i].text;
-      }
-    }
-    const wordGroups = groupWordsByPause(store, config.pauseThreshold);
-    const pixelMaxWidth = config.availableWidth;
-    let spaceWidth;
-    if (config.measureTextWidth) {
-      const fontString = `${config.fontWeight} ${config.fontSize}px "${config.fontFamily}"`;
-      spaceWidth = config.measureTextWidth(" ", fontString) + config.wordSpacing;
-    } else {
-      const spaceWord = await this.measureWord(" ", measurementConfig);
-      spaceWidth = spaceWord.width + config.wordSpacing;
-    }
-    const groups = wordGroups.flatMap((indices) => {
-      const groupWidths = indices.map((i) => store.widths[i]);
-      const allLines = breakIntoLines(
-        groupWidths,
-        pixelMaxWidth,
-        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);
-        if (allWordIndices.length === 0) {
-          return null;
+        break;
+      case "h":
+        if (numIndex < numbers.length) {
+          currentX += numbers[numIndex++];
+          minX = Math.min(minX, currentX);
+          maxX = Math.max(maxX, currentX);
         }
-        return {
-          wordIndices: allWordIndices,
-          startTime: store.startTimes[allWordIndices[0]],
-          endTime: store.endTimes[allWordIndices[allWordIndices.length - 1]],
-          lines
-        };
-      }).filter((g) => g !== null);
-    });
-    const contentHeight = config.frameHeight - config.padding.top - config.padding.bottom;
-    const contentWidth = config.frameWidth - config.padding.left - config.padding.right;
-    const ASCENT_RATIO2 = 0.8;
-    const calculateGroupY = (group) => {
-      const totalHeight = group.lines.length * config.fontSize * config.lineHeight;
-      switch (config.verticalAlign) {
-        case "top":
-          return config.padding.top + config.fontSize * ASCENT_RATIO2;
-        case "bottom":
-          return config.frameHeight - config.padding.bottom - totalHeight + config.fontSize * ASCENT_RATIO2;
-        case "middle":
-        default:
-          return config.padding.top + (contentHeight - totalHeight) / 2 + config.fontSize * ASCENT_RATIO2;
-      }
-    };
-    const allWordTexts = store.words.slice(0, store.length);
-    const paragraphDirection = detectParagraphDirectionFromWords(allWordTexts);
-    const calculateLineX = (lineWidth) => {
-      switch (config.horizontalAlign) {
-        case "left":
-          return config.padding.left;
-        case "right":
-          return config.frameWidth - lineWidth - config.padding.right;
-        case "center":
-        default:
-          return config.padding.left + (contentWidth - lineWidth) / 2;
-      }
-    };
-    for (const group of groups) {
-      const baseY = calculateGroupY(group);
-      for (let lineIdx = 0; lineIdx < group.lines.length; lineIdx++) {
-        const line = group.lines[lineIdx];
-        line.x = calculateLineX(line.width);
-        line.y = baseY + lineIdx * config.fontSize * config.lineHeight;
-        const lineWordTexts = line.wordIndices.map((idx) => store.words[idx]);
-        const visualOrder = reorderWordsForLine(lineWordTexts, paragraphDirection);
-        let xCursor = line.x;
-        for (const visualIdx of visualOrder) {
-          const wordIdx = line.wordIndices[visualIdx];
-          store.xPositions[wordIdx] = xCursor;
-          store.yPositions[wordIdx] = line.y;
-          xCursor += store.widths[wordIdx] + spaceWidth;
+        break;
+      case "V":
+        if (numIndex < numbers.length) {
+          currentY = numbers[numIndex++];
+          minY = Math.min(minY, currentY);
+          maxY = Math.max(maxY, currentY);
         }
-      }
-    }
-    return {
-      store,
-      groups,
-      shapedWords,
-      paragraphDirection
-    };
-  }
-  getVisibleWordsAtTime(layout, timeMs) {
-    const activeGroup = layout.groups.find(
-      (g) => timeMs >= g.startTime && timeMs <= g.endTime
-    );
-    if (!activeGroup) {
-      return [];
+        break;
+      case "v":
+        if (numIndex < numbers.length) {
+          currentY += numbers[numIndex++];
+          minY = Math.min(minY, currentY);
+          maxY = Math.max(maxY, currentY);
+        }
+        break;
+      case "C":
+        if (numIndex + 5 < numbers.length) {
+          for (let j = 0; j < 3; j++) {
+            const x = numbers[numIndex++];
+            const y = numbers[numIndex++];
+            minX = Math.min(minX, x);
+            maxX = Math.max(maxX, x);
+            minY = Math.min(minY, y);
+            maxY = Math.max(maxY, y);
+            if (j === 2) {
+              currentX = x;
+              currentY = y;
+            }
+          }
+        }
+        break;
+      case "c":
+        if (numIndex + 5 < numbers.length) {
+          for (let j = 0; j < 3; j++) {
+            const x = currentX + numbers[numIndex++];
+            const y = currentY + numbers[numIndex++];
+            minX = Math.min(minX, x);
+            maxX = Math.max(maxX, x);
+            minY = Math.min(minY, y);
+            maxY = Math.max(maxY, y);
+            if (j === 2) {
+              currentX = x;
+              currentY = y;
+            }
+          }
+        }
+        break;
+      case "S":
+      case "Q":
+        if (numIndex + 3 < numbers.length) {
+          for (let j = 0; j < 2; j++) {
+            const x = numbers[numIndex++];
+            const y = numbers[numIndex++];
+            minX = Math.min(minX, x);
+            maxX = Math.max(maxX, x);
+            minY = Math.min(minY, y);
+            maxY = Math.max(maxY, y);
+            if (j === 1) {
+              currentX = x;
+              currentY = y;
+            }
+          }
+        }
+        break;
+      case "s":
+      case "q":
+        if (numIndex + 3 < numbers.length) {
+          for (let j = 0; j < 2; j++) {
+            const x = currentX + numbers[numIndex++];
+            const y = currentY + numbers[numIndex++];
+            minX = Math.min(minX, x);
+            maxX = Math.max(maxX, x);
+            minY = Math.min(minY, y);
+            maxY = Math.max(maxY, y);
+            if (j === 1) {
+              currentX = x;
+              currentY = y;
+            }
+          }
+        }
+        break;
+      case "A":
+        if (numIndex + 6 < numbers.length) {
+          numIndex += 5;
+          currentX = numbers[numIndex++];
+          currentY = numbers[numIndex++];
+          minX = Math.min(minX, currentX);
+          maxX = Math.max(maxX, currentX);
+          minY = Math.min(minY, currentY);
+          maxY = Math.max(maxY, currentY);
+        }
+        break;
+      case "a":
+        if (numIndex + 6 < numbers.length) {
+          numIndex += 5;
+          currentX += numbers[numIndex++];
+          currentY += numbers[numIndex++];
+          minX = Math.min(minX, currentX);
+          maxX = Math.max(maxX, currentX);
+          minY = Math.min(minY, currentY);
+          maxY = Math.max(maxY, currentY);
+        }
+        break;
+      case "Z":
+      case "z":
+        break;
     }
-    return activeGroup.wordIndices.map((idx) => ({
-      wordIndex: idx,
-      text: layout.store.words[idx],
-      x: layout.store.xPositions[idx],
-      y: layout.store.yPositions[idx],
-      width: layout.store.widths[idx],
-      startTime: layout.store.startTimes[idx],
-      endTime: layout.store.endTimes[idx],
-      isRTL: layout.shapedWords[idx].isRTL
-    }));
+    cmdIndex++;
   }
-  getActiveWordAtTime(layout, timeMs) {
-    const wordIndex = findWordAtTime(layout.store, timeMs);
-    if (wordIndex === -1) {
-      return null;
-    }
-    return {
-      wordIndex,
-      text: layout.store.words[wordIndex],
-      x: layout.store.xPositions[wordIndex],
-      y: layout.store.yPositions[wordIndex],
-      width: layout.store.widths[wordIndex],
-      startTime: layout.store.startTimes[wordIndex],
-      endTime: layout.store.endTimes[wordIndex],
-      isRTL: layout.shapedWords[wordIndex].isRTL
-    };
+  if (minX === Infinity) {
+    return { x: 0, y: 0, w: 0, h: 0 };
   }
-  clearCache() {
-    this.cache.clear();
+  return {
+    x: minX,
+    y: minY,
+    w: maxX - minX,
+    h: maxY - minY
+  };
+}
+async function renderSvgAssetToPng(asset, options = {}) {
+  const defaultWidth = options.defaultWidth ?? 1920;
+  const defaultHeight = options.defaultHeight ?? 1080;
+  let svgString;
+  let targetWidth;
+  let targetHeight;
+  if (asset.src) {
+    svgString = asset.src;
+    const dimensions = extractSvgDimensions(svgString);
+    targetWidth = dimensions.width || defaultWidth;
+    targetHeight = dimensions.height || defaultHeight;
+  } else if (asset.shape) {
+    targetWidth = toNumber(asset.width, defaultWidth);
+    targetHeight = toNumber(asset.height, defaultHeight);
+    svgString = shapeToSvgString(asset, targetWidth, targetHeight);
+  } else {
+    throw new Error("Either 'src' or 'shape' must be provided");
   }
-  getCacheStats() {
-    return {
-      size: this.cache.size,
-      calculatedSize: this.cache.calculatedSize
-    };
+  return renderSvgToPng(svgString, {
+    width: targetWidth,
+    height: targetHeight,
+    background: options.background
+  });
+}
+function extractSvgDimensions(svgString) {
+  const widthMatch = svgString.match(/width\s*=\s*["']?(\d+(?:\.\d+)?)/i);
+  const heightMatch = svgString.match(/height\s*=\s*["']?(\d+(?:\.\d+)?)/i);
+  let width = widthMatch ? parseFloat(widthMatch[1]) : 0;
+  let height = heightMatch ? parseFloat(heightMatch[1]) : 0;
+  if (!width || !height) {
+    const viewBoxMatch = svgString.match(/viewBox\s*=\s*["']([^"']+)["']/i);
+    if (viewBoxMatch) {
+      const parts = viewBoxMatch[1].trim().split(/[\s,]+/).map(parseFloat);
+      if (parts.length === 4) {
+        width = width || parts[2];
+        height = height || parts[3];
+      }
+    }
   }
-};
+  return { width, height };
+}
 
 // src/core/canvas-text-measurer.ts
 async function createCanvasTextMeasurer() {
@@ -5411,7 +5455,7 @@ function findActiveWordIndex(store, groupWordIndices, timeMs) {
   }
   return -1;
 }
-function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle, speed) {
+function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle) {
   if (groupWordIndices.length === 0) {
     return "idle";
   }
@@ -5428,7 +5472,7 @@ function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle, spee
     return "after";
   }
   if (TRANSITION_ANIMATION_STYLES.has(animationStyle)) {
-    const transitionDurationMs = (ANIMATION_DURATION_MS[animationStyle] ?? 200) / speed;
+    const transitionDurationMs = ANIMATION_DURATION_MS[animationStyle] ?? 200;
     for (const idx of groupWordIndices) {
       const wordStart = store.startTimes[idx];
       if (timeMs >= wordStart && timeMs < wordStart + transitionDurationMs) {
@@ -5450,7 +5494,7 @@ function getAnimationPhase(store, groupWordIndices, timeMs, animationStyle, spee
   }
   return "before";
 }
-function computeStateSignature(layout, timeMs, animationStyle, speed) {
+function computeStateSignature(layout, timeMs, animationStyle) {
   const groupIndex = findGroupIndexAtTime(layout.groups, timeMs);
   if (groupIndex === -1) {
     return { groupIndex: -1, activeWordIndex: -1, animationPhase: "idle" };
@@ -5461,21 +5505,20 @@ function computeStateSignature(layout, timeMs, animationStyle, speed) {
     layout.store,
     group.wordIndices,
     timeMs,
-    animationStyle,
-    speed
+    animationStyle
   );
   return { groupIndex, activeWordIndex, animationPhase };
 }
 function signaturesMatch(a, b) {
   return a.groupIndex === b.groupIndex && a.activeWordIndex === b.activeWordIndex && a.animationPhase === b.animationPhase;
 }
-function createFrameSchedule(layout, durationMs, fps, animationStyle = "highlight", speed = 1) {
+function createFrameSchedule(layout, durationMs, fps, animationStyle = "highlight") {
   const totalFrames = Math.max(2, Math.round(durationMs / 1e3 * fps) + 1);
   const renderFrames = [];
   let previousSignature = null;
   for (let frame = 0; frame < totalFrames; frame++) {
     const timeMs = frame / (totalFrames - 1) * durationMs;
-    const signature = computeStateSignature(layout, timeMs, animationStyle, speed);
+    const signature = computeStateSignature(layout, timeMs, animationStyle);
     const isAnimating = signature.animationPhase === "animating";
     if (isAnimating || previousSignature === null || !signaturesMatch(signature, previousSignature)) {
       renderFrames.push({
@@ -5877,14 +5920,12 @@ var RichCaptionRenderer = class {
       throw new Error("No asset loaded. Call loadAsset() first.");
     }
     const animationStyle = this.extractAnimationStyle();
-    const animationSpeed = this.extractAnimationSpeed();
     const durationMs = duration * 1e3;
     const schedule = createFrameSchedule(
       this.currentLayout,
       durationMs,
       this.fps,
-      animationStyle,
-      animationSpeed
+      animationStyle
     );
     const bgColor = options?.bgColor;
     const hasAlpha = !bgColor;
@@ -6045,13 +6086,11 @@ var RichCaptionRenderer = class {
       throw new Error("No asset loaded. Call loadAsset() first.");
     }
     const animationStyle = this.extractAnimationStyle();
-    const animationSpeed = this.extractAnimationSpeed();
     return createFrameSchedule(
       this.currentLayout,
       duration * 1e3,
       this.fps,
-      animationStyle,
-      animationSpeed
+      animationStyle
     );
   }
   getStats() {
@@ -6089,10 +6128,6 @@ var RichCaptionRenderer = class {
     const wordAnim = this.currentAsset?.wordAnimation;
     return wordAnim?.style ?? "highlight";
   }
-  extractAnimationSpeed() {
-    const wordAnim = this.currentAsset?.wordAnimation;
-    return wordAnim?.speed ?? 1;
-  }
   logProgress(pct, framesProcessed, totalFrames, uniqueProcessed, uniqueTotal, fps, eta) {
     if (typeof process !== "undefined" && process.stderr) {
       process.stderr.write(