@shotstack/shotstack-canvas 2.1.4 → 2.1.5

package/dist/entry.node.cjs

@@ -590,19 +590,28 @@ var richCaptionFontSchema = import_zod.z.object({
   weight: import_zod.z.union([import_zod.z.string(), import_zod.z.number()]).default("400"),
   color: import_zod.z.string().regex(HEX6).default("#ffffff"),
   opacity: import_zod.z.number().min(0).max(1).default(1),
-  background: import_zod.z.string().regex(HEX6).optional()
+  background: import_zod.z.string().regex(HEX6).optional(),
+  textDecoration: import_zod.z.enum(["none", "underline", "line-through"]).default("none")
 });
 var richCaptionActiveSchema = import_zod2.richCaptionActiveSchema.extend({
   font: import_zod.z.object({
-    color: import_zod.z.string().regex(HEX6).default("#ffffff"),
+    color: import_zod.z.string().regex(HEX6).optional(),
     background: import_zod.z.string().regex(HEX6).optional(),
-    opacity: import_zod.z.number().min(0).max(1).default(1)
+    opacity: import_zod.z.number().min(0).max(1).optional(),
+    textDecoration: import_zod.z.enum(["none", "underline", "line-through"]).optional()
   }).optional(),
   stroke: import_zod.z.object({
     width: import_zod.z.number().min(0).optional(),
     color: import_zod.z.string().regex(HEX6).optional(),
     opacity: import_zod.z.number().min(0).max(1).optional()
   }).optional(),
+  shadow: import_zod.z.object({
+    offsetX: import_zod.z.number().optional(),
+    offsetY: import_zod.z.number().optional(),
+    blur: import_zod.z.number().min(0).optional(),
+    color: import_zod.z.string().regex(HEX6).optional(),
+    opacity: import_zod.z.number().min(0).max(1).optional()
+  }).optional(),
   scale: import_zod.z.number().min(0.5).max(2).default(1)
 });
 var richCaptionWordAnimationSchema = import_zod2.richCaptionWordAnimationSchema.extend({
@@ -2619,239 +2628,591 @@ 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
+var import_lru_cache = require("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 import_lru_cache.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
-    };
+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;
   }
-  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 calculateFadeState(ctx, speed) {
-  if (ctx.currentTime < ctx.wordStart) {
-    return {
-      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 = easeInOutQuad(progress);
-  const isActive = isWordActive(ctx);
-  return {
-    opacity: easedProgress,
-    isActive,
-    fillProgress: isActive ? 1 : 0
-  };
+  return chunks;
 }
-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
-    };
+var CaptionLayoutEngine = class {
+  fontRegistry;
+  cache;
+  layoutEngine;
+  constructor(fontRegistry) {
+    this.fontRegistry = fontRegistry;
+    this.cache = createShapedWordCache();
+    this.layoutEngine = new LayoutEngine(fontRegistry);
   }
-  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
-  };
-}
-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 };
+  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;
   }
-}
-function calculateBounceState(ctx, speed, fontSize) {
-  const bounceDistance = fontSize * 0.8;
-  if (ctx.currentTime < ctx.wordStart) {
+  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
+    };
+  }
+  clearCache() {
+    this.cache.clear();
+  }
+  getCacheStats() {
+    return {
+      size: this.cache.size,
+      calculatedSize: this.cache.calculatedSize
+    };
+  }
+};
+
+// 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, 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
+    };
+  }
+  if (ctx.currentTime >= adjustedEnd) {
+    return {
+      fillProgress: 1,
+      isActive: false,
+      opacity: 1
+    };
+  }
+  return {
+    fillProgress: calculateWordProgress(adjustedCtx),
+    isActive,
+    opacity: 1
+  };
+}
+function calculateHighlightState(ctx) {
+  const isActive = isWordActive(ctx);
+  return {
+    isActive,
+    fillProgress: isActive ? 1 : 0,
+    opacity: 1
+  };
+}
+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 calculateFadeState(ctx, speed) {
+  if (ctx.currentTime < ctx.wordStart) {
+    return {
+      opacity: 0,
+      isActive: false,
+      fillProgress: 0
+    };
+  }
+  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
+    };
+  }
+  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
+  };
+}
+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, speed, fontSize) {
+  const bounceDistance = fontSize * 0.8;
+  if (ctx.currentTime < ctx.wordStart) {
+    return {
+      translateY: -bounceDistance,
+      opacity: 0,
+      isActive: false,
+      fillProgress: 0
+    };
+  }
+  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) {
+    return {
+      visibleCharacters: 0,
+      opacity: 1,
+      isActive: false,
+      fillProgress: 0
     };
   }
   if (ctx.currentTime >= adjustedEnd) {
     return {
       visibleCharacters: charCount,
       opacity: 1,
-      isActive: false
+      isActive: false,
+      fillProgress: 0
     };
   }
   const progress = calculateWordProgress(adjustedCtx);
   const visibleCharacters = Math.ceil(progress * charCount);
+  const isActive = isWordActive(ctx);
   return {
     visibleCharacters: clamp(visibleCharacters, 0, charCount),
     opacity: 1,
-    isActive: isWordActive(ctx)
+    isActive,
+    fillProgress: isActive ? 1 : 0
   };
 }
 function calculateNoneState(_ctx) {
@@ -2932,28 +3293,25 @@ function getDefaultAnimationConfig() {
 }
 
 // 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 {
@@ -2993,20 +3351,33 @@ function extractStrokeConfig(asset, isActive) {
   return void 0;
 }
 function extractShadowConfig(asset, isActive) {
-  if (isActive) {
+  const baseShadow = asset.shadow;
+  const activeShadow = asset.active?.shadow;
+  if (!baseShadow && !activeShadow) {
     return void 0;
   }
-  const shadow = asset.shadow;
-  if (!shadow) {
-    return void 0;
+  if (isActive) {
+    if (!activeShadow) {
+      return void 0;
+    }
+    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
+    };
   }
-  return {
-    offsetX: shadow.offsetX ?? 0,
-    offsetY: shadow.offsetY ?? 0,
-    blur: shadow.blur ?? 0,
-    color: shadow.color ?? "#000000",
-    opacity: shadow.opacity ?? 0.5
-  };
+  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 void 0;
 }
 function extractBackgroundConfig(asset, isActive, fontSize) {
   const fontBackground = asset.font?.background;
@@ -3061,9 +3432,20 @@ function extractCaptionBorder(asset) {
     radius: border.radius ?? 0
   };
 }
-function extractAnimationConfig(asset) {
-  const wordAnim = asset.wordAnimation;
-  if (!wordAnim) {
+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) {
     return getDefaultAnimationConfig();
   }
   return {
@@ -3103,7 +3485,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) {
@@ -3607,7 +3990,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);
@@ -3634,6 +4018,25 @@ async function createNodePainter(opts) {
                 context.fillText(displayText, 0, 0);
                 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();
             }
           });
@@ -5093,353 +5496,6 @@ function extractSvgDimensions(svgString) {
   return { width, height };
 }
 
-// src/core/rich-caption-layout.ts
-var import_lru_cache = require("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 import_lru_cache.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;
-        }
-        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;
-        }
-      }
-    }
-    return {
-      store,
-      groups,
-      shapedWords,
-      paragraphDirection
-    };
-  }
-  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 {
-      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
-    };
-  }
-  clearCache() {
-    this.cache.clear();
-  }
-  getCacheStats() {
-    return {
-      size: this.cache.size,
-      calculatedSize: this.cache.calculatedSize
-    };
-  }
-};
-
 // src/core/canvas-text-measurer.ts
 async function createCanvasTextMeasurer() {
   const canvasMod = await import("canvas");