@shotstack/shotstack-canvas 2.0.13 → 2.0.15

package/dist/entry.node.cjs

@@ -371,6 +371,7 @@ __export(entry_node_exports, {
   calculateAnimationStatesForGroup: () => calculateAnimationStatesForGroup,
   commandsToPathString: () => commandsToPathString,
   computeSimplePathBounds: () => computeSimplePathBounds,
+  containsRTLCharacters: () => containsRTLCharacters,
   createDefaultGeneratorConfig: () => createDefaultGeneratorConfig,
   createFrameSchedule: () => createFrameSchedule,
   createNodePainter: () => createNodePainter,
@@ -378,6 +379,8 @@ __export(entry_node_exports, {
   createRichCaptionRenderer: () => createRichCaptionRenderer,
   createTextEngine: () => createTextEngine,
   createVideoEncoder: () => createVideoEncoder,
+  detectParagraphDirection: () => detectParagraphDirection,
+  detectParagraphDirectionFromWords: () => detectParagraphDirectionFromWords,
   detectPlatform: () => detectPlatform,
   detectSubtitleFormat: () => detectSubtitleFormat,
   extractCaptionPadding: () => extractCaptionPadding,
@@ -389,10 +392,12 @@ __export(entry_node_exports, {
   getDrawCaptionWordOps: () => getDrawCaptionWordOps,
   getEncoderCapabilities: () => getEncoderCapabilities,
   getEncoderWarning: () => getEncoderWarning,
+  getVisibleText: () => getVisibleText,
   groupWordsByPause: () => groupWordsByPause,
   isDrawCaptionWordOp: () => isDrawCaptionWordOp,
   isRTLText: () => isRTLText,
   isWebCodecsH264Supported: () => isWebCodecsH264Supported,
+  mirrorAnimationDirection: () => mirrorAnimationDirection,
   normalizePath: () => normalizePath,
   normalizePathString: () => normalizePathString,
   parseSubtitleToWords: () => parseSubtitleToWords,
@@ -400,6 +405,7 @@ __export(entry_node_exports, {
   quadraticToCubic: () => quadraticToCubic,
   renderSvgAssetToPng: () => renderSvgAssetToPng,
   renderSvgToPng: () => renderSvgToPng,
+  reorderWordsForLine: () => reorderWordsForLine,
   richCaptionAssetSchema: () => richCaptionAssetSchema,
   shapeToSvgString: () => shapeToSvgString,
   svgAssetSchema: () => import_zod2.svgAssetSchema,
@@ -1280,18 +1286,136 @@ var FontRegistry = class _FontRegistry {
   }
 };
 
+// src/core/bidi.ts
+var import_bidi_js = __toESM(require("bidi-js"), 1);
+var bidiInstance = null;
+function getBidi() {
+  if (!bidiInstance) {
+    bidiInstance = (0, import_bidi_js.default)();
+  }
+  return bidiInstance;
+}
+var RTL_SCRIPT_REGEX = /[֐-׿؀-ۿ܀-ݏݐ-ݿހ-޿߀-߿ࠀ-࠿ࡀ-࡟ࡠ-࡯ࢠ-ࣿיִ-ﭏﭐ-﷿ﹰ-𐴀-𐴿𐹠-𐹿𞠀-𞣟𞤀-𞥟𞱰-𞲿𞴀-𞵏𞸀-𞻿]/u;
+function containsRTLCharacters(text) {
+  return RTL_SCRIPT_REGEX.test(text);
+}
+function detectParagraphDirection(text) {
+  const bidi = getBidi();
+  const { paragraphs } = bidi.getEmbeddingLevels(text);
+  if (paragraphs.length === 0) {
+    return "ltr";
+  }
+  return paragraphs[0].level % 2 === 1 ? "rtl" : "ltr";
+}
+function detectParagraphDirectionFromWords(words) {
+  const combined = words.join(" ");
+  return detectParagraphDirection(combined);
+}
+function reorderWordsForLine(wordTexts, paragraphDirection) {
+  if (wordTexts.length <= 1) {
+    return wordTexts.map((_, i) => i);
+  }
+  const lineText = wordTexts.join(" ");
+  const bidi = getBidi();
+  const { levels } = bidi.getEmbeddingLevels(lineText, paragraphDirection);
+  const wordLevels = [];
+  let charIndex = 0;
+  for (let i = 0; i < wordTexts.length; i++) {
+    const wordLevel = levels[charIndex];
+    wordLevels.push(wordLevel);
+    charIndex += wordTexts[i].length;
+    if (i < wordTexts.length - 1) {
+      charIndex += 1;
+    }
+  }
+  const indices = wordTexts.map((_, i) => i);
+  const maxLevel = Math.max(...wordLevels);
+  const minOddLevel = paragraphDirection === "rtl" ? 1 : Math.min(...wordLevels.filter((l) => l % 2 === 1), maxLevel + 1);
+  for (let level = maxLevel; level >= minOddLevel; level--) {
+    let start = 0;
+    while (start < indices.length) {
+      if (wordLevels[indices[start]] >= level) {
+        let end = start;
+        while (end + 1 < indices.length && wordLevels[indices[end + 1]] >= level) {
+          end++;
+        }
+        if (start < end) {
+          let left = start;
+          let right = end;
+          while (left < right) {
+            const tmp = indices[left];
+            indices[left] = indices[right];
+            indices[right] = tmp;
+            left++;
+            right--;
+          }
+        }
+        start = end + 1;
+      } else {
+        start++;
+      }
+    }
+  }
+  return indices;
+}
+function getVisibleText(text, visibleCharacters, isRTL) {
+  if (visibleCharacters < 0 || visibleCharacters >= text.length) {
+    return text;
+  }
+  if (visibleCharacters === 0) {
+    return "";
+  }
+  return text.slice(0, visibleCharacters);
+}
+function mirrorAnimationDirection(direction, isRTL) {
+  if (!isRTL) {
+    return direction;
+  }
+  if (direction === "left") return "right";
+  if (direction === "right") return "left";
+  return direction;
+}
+
 // src/core/layout.ts
+var import_bidi_js2 = __toESM(require("bidi-js"), 1);
 function isEmoji(char) {
   const code = char.codePointAt(0);
   if (!code) return false;
-  return code >= 127744 && code <= 129535 || // Emoticons, symbols, pictographs
-  code >= 9728 && code <= 9983 || // Miscellaneous symbols
-  code >= 9984 && code <= 10175 || // Dingbats
-  code >= 65024 && code <= 65039 || // Variation selectors
-  code >= 128512 && code <= 128591 || // Emoticons
-  code >= 128640 && code <= 128767 || // Transport and map symbols
-  code >= 129280 && code <= 129535 || // Supplemental symbols and pictographs
-  code >= 129648 && code <= 129791;
+  return code >= 127744 && code <= 129535 || code >= 9728 && code <= 9983 || code >= 9984 && code <= 10175 || code >= 65024 && code <= 65039 || code >= 128512 && code <= 128591 || code >= 128640 && code <= 128767 || code >= 129280 && code <= 129535 || code >= 129648 && code <= 129791;
+}
+function reorderRunsVisually(runs) {
+  if (runs.length <= 1) return runs;
+  const result = runs.slice();
+  const runLevels = result.map((r) => r.level);
+  const maxLevel = Math.max(...runLevels);
+  const minLevel = Math.min(...runLevels);
+  const minOddLevel = minLevel % 2 === 1 ? minLevel : minLevel + 1;
+  for (let level = maxLevel; level >= minOddLevel; level--) {
+    let start = 0;
+    while (start < result.length) {
+      if (runLevels[result.indexOf(result[start])] >= level) {
+        let end = start;
+        while (end + 1 < result.length && result[end + 1].level >= level) {
+          end++;
+        }
+        if (start < end) {
+          let left = start;
+          let right = end;
+          while (left < right) {
+            const tmp = result[left];
+            result[left] = result[right];
+            result[right] = tmp;
+            left++;
+            right--;
+          }
+        }
+        start = end + 1;
+      } else {
+        start++;
+      }
+    }
+  }
+  return result;
 }
 var LayoutEngine = class {
   constructor(fonts) {
@@ -1309,13 +1433,16 @@ var LayoutEngine = class {
         return t;
     }
   }
-  async shapeFull(text, desc) {
+  async shapeFull(text, desc, direction) {
     try {
       const hb = await this.fonts.getHB();
       const buffer = hb.createBuffer();
       try {
         buffer.addText(text);
         buffer.guessSegmentProperties();
+        if (direction) {
+          buffer.setDirection(direction);
+        }
         const font = await this.fonts.getFont(desc);
         const face = await this.fonts.getFace(desc);
         const upem = face?.upem || 1e3;
@@ -1338,6 +1465,64 @@ var LayoutEngine = class {
       );
     }
   }
+  splitIntoBidiRuns(input, levels, desc, emojiFallback) {
+    const runs = [];
+    if (input.length === 0) return runs;
+    let runStart = 0;
+    let runLevel = levels[0];
+    let runIsEmoji = emojiFallback ? isEmoji(input[0]) : false;
+    for (let i = 1; i <= input.length; i++) {
+      const atEnd = i === input.length;
+      const charLevel = atEnd ? -1 : levels[i];
+      const charIsEmoji = !atEnd && emojiFallback ? isEmoji(String.fromCodePoint(input.codePointAt(i) ?? 0)) : false;
+      if (atEnd || charLevel !== runLevel || emojiFallback && charIsEmoji !== runIsEmoji) {
+        const text = input.slice(runStart, i);
+        const font = runIsEmoji && emojiFallback ? emojiFallback : desc;
+        runs.push({ text, startIndex: runStart, endIndex: i, level: runLevel, font });
+        if (!atEnd) {
+          runStart = i;
+          runLevel = charLevel;
+          runIsEmoji = charIsEmoji;
+        }
+      }
+    }
+    return runs;
+  }
+  async shapeWithBidi(input, desc, emojiFallback) {
+    const hasRTL = containsRTLCharacters(input);
+    const hasLTR = /[a-zA-Z0-9]/.test(input);
+    const hasMixedDirection = hasRTL && hasLTR;
+    if (!hasMixedDirection && !emojiFallback) {
+      const textDirection = hasRTL ? "rtl" : void 0;
+      return this.shapeFull(input, desc, textDirection);
+    }
+    const bidi = (0, import_bidi_js2.default)();
+    const { levels } = bidi.getEmbeddingLevels(input);
+    const bidiRuns = this.splitIntoBidiRuns(input, levels, desc, emojiFallback);
+    const shapedRuns = [];
+    for (const run of bidiRuns) {
+      const runDirection = run.level % 2 === 1 ? "rtl" : "ltr";
+      const runShaped = await this.shapeFull(run.text, run.font, runDirection);
+      for (const glyph of runShaped) {
+        glyph.cl += run.startIndex;
+        if (run.font !== desc) {
+          glyph.fontDesc = run.font;
+        }
+      }
+      shapedRuns.push({
+        glyphs: runShaped,
+        startIndex: run.startIndex,
+        endIndex: run.endIndex,
+        level: run.level
+      });
+    }
+    const visualRuns = reorderRunsVisually(shapedRuns);
+    const visualGlyphs = [];
+    for (const run of visualRuns) {
+      visualGlyphs.push(...run.glyphs);
+    }
+    return visualGlyphs;
+  }
   async layout(params) {
     try {
       const { textTransform, desc, fontSize, letterSpacing, width, emojiFallback } = params;
@@ -1347,36 +1532,7 @@ var LayoutEngine = class {
       }
       let shaped;
       try {
-        if (!emojiFallback) {
-          shaped = await this.shapeFull(input, desc);
-        } else {
-          const chars = Array.from(input);
-          const runs = [];
-          let currentRun = { text: "", startIndex: 0, isEmoji: false };
-          for (let i = 0; i < chars.length; i++) {
-            const char = chars[i];
-            const charIsEmoji = isEmoji(char);
-            if (i === 0) {
-              currentRun = { text: char, startIndex: 0, isEmoji: charIsEmoji };
-            } else if (currentRun.isEmoji === charIsEmoji) {
-              currentRun.text += char;
-            } else {
-              runs.push(currentRun);
-              currentRun = { text: char, startIndex: currentRun.startIndex + currentRun.text.length, isEmoji: charIsEmoji };
-            }
-          }
-          if (currentRun.text) runs.push(currentRun);
-          shaped = [];
-          for (const run of runs) {
-            const runFont = run.isEmoji ? emojiFallback : desc;
-            const runShaped = await this.shapeFull(run.text, runFont);
-            for (const glyph of runShaped) {
-              glyph.cl += run.startIndex;
-              glyph.fontDesc = runFont;
-            }
-            shaped.push(...runShaped);
-          }
-        }
+        shaped = await this.shapeWithBidi(input, desc, emojiFallback);
       } catch (err) {
         throw new Error(`Text shaping failed: ${err instanceof Error ? err.message : String(err)}`);
       }
@@ -1407,7 +1563,6 @@ var LayoutEngine = class {
           cluster: g.cl,
           char,
           fontDesc: g.fontDesc
-          // Preserve font descriptor
         };
       });
       const lines = [];
@@ -1470,9 +1625,11 @@ var LayoutEngine = class {
           y: 0
         });
       }
+      const textIsRTL = containsRTLCharacters(input);
       const lineHeight = params.lineHeight * fontSize;
       for (let i = 0; i < lines.length; i++) {
         lines[i].y = (i + 1) * lineHeight;
+        lines[i].isRTL = textIsRTL;
       }
       return lines;
     } catch (err) {
@@ -1511,6 +1668,14 @@ function normalizePadding(padding) {
   }
   return padding;
 }
+function resolveHorizontalAlign(align, isRTL) {
+  if (!isRTL || align === "center") {
+    return align;
+  }
+  if (align === "left") return "right";
+  if (align === "right") return "left";
+  return align;
+}
 async function buildDrawOps(p) {
   const ops = [];
   const padding = normalizePadding(p.padding);
@@ -1551,7 +1716,8 @@ async function buildDrawOps(p) {
   let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
   for (const line of p.lines) {
     let lineX;
-    switch (p.align.horizontal) {
+    const effectiveAlign = resolveHorizontalAlign(p.align.horizontal, line.isRTL);
+    switch (effectiveAlign) {
       case "left":
         lineX = 0;
         break;
@@ -1679,7 +1845,7 @@ async function buildDrawOps(p) {
     const contentWidth = p.contentRect?.width ?? p.canvas.width;
     const contentHeight = p.contentRect?.height ?? p.canvas.height;
     const borderWidth2 = p.border?.width ?? 0;
-    const borderRadius = p.border?.radius ?? 0;
+    const borderRadius = p.border?.radius ?? p.background?.borderRadius ?? 0;
     const halfBorder = borderWidth2 / 2;
     const canvasCenterX = p.canvas.width / 2;
     const canvasCenterY = p.canvas.height / 2;
@@ -1797,7 +1963,15 @@ function applyAnimation(ops, lines, p) {
     case "fadeIn":
       return applyFadeInAnimation(ops, lines, progress, p.anim.style, p.fontSize, duration);
     case "slideIn":
-      return applySlideInAnimation(ops, lines, progress, p.anim.direction ?? "left", p.fontSize, p.anim.style, duration);
+      return applySlideInAnimation(
+        ops,
+        lines,
+        progress,
+        p.anim.direction ?? "left",
+        p.fontSize,
+        p.anim.style,
+        duration
+      );
     case "shift":
       return applyShiftAnimation(
         ops,
@@ -1825,6 +1999,9 @@ function applyAnimation(ops, lines, p) {
 }
 var isShadowFill = (op) => op.op === "FillPath" && op.isShadow === true;
 var isGlyphFill = (op) => op.op === "FillPath" && !op.isShadow === true;
+function isRTLLines(lines) {
+  return lines.length > 0 && lines[0].isRTL === true;
+}
 function getTextColorFromOps(ops) {
   for (const op of ops) {
     if (op.op === "FillPath") {
@@ -1844,28 +2021,32 @@ function applyTypewriterAnimation(ops, lines, progress, style, fontSize, time, d
     const totalWords = wordSegments.length;
     const visibleWords = Math.floor(progress * totalWords);
     if (visibleWords === 0) {
-      return ops.filter((x) => x.op === "BeginFrame" || x.op === "Rectangle" || x.op === "RectangleStroke");
+      return ops.filter(
+        (x) => x.op === "BeginFrame" || x.op === "Rectangle" || x.op === "RectangleStroke"
+      );
     }
     let totalVisibleGlyphs = 0;
     for (let i = 0; i < Math.min(visibleWords, wordSegments.length); i++) {
       totalVisibleGlyphs += wordSegments[i].glyphCount;
     }
-    const visibleOpsRaw = sliceGlyphOps(ops, totalVisibleGlyphs);
+    const visibleOpsRaw = isRTLLines(lines) ? sliceGlyphOpsFromEnd(ops, totalVisibleGlyphs) : sliceGlyphOps(ops, totalVisibleGlyphs);
     const visibleOps = progress >= DECORATION_DONE_THRESHOLD ? visibleOpsRaw : visibleOpsRaw.filter((o) => o.op !== "DecorationLine");
     if (progress < 1 && totalVisibleGlyphs > 0) {
-      return addTypewriterCursor(visibleOps, totalVisibleGlyphs, fontSize, time);
+      return addTypewriterCursor(visibleOps, totalVisibleGlyphs, fontSize, time, isRTLLines(lines));
     }
     return visibleOps;
   } else {
     const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
     const visibleGlyphs = Math.floor(progress * totalGlyphs);
     if (visibleGlyphs === 0) {
-      return ops.filter((x) => x.op === "BeginFrame" || x.op === "Rectangle" || x.op === "RectangleStroke");
+      return ops.filter(
+        (x) => x.op === "BeginFrame" || x.op === "Rectangle" || x.op === "RectangleStroke"
+      );
     }
-    const visibleOpsRaw = sliceGlyphOps(ops, visibleGlyphs);
+    const visibleOpsRaw = isRTLLines(lines) ? sliceGlyphOpsFromEnd(ops, visibleGlyphs) : sliceGlyphOps(ops, visibleGlyphs);
     const visibleOps = progress >= DECORATION_DONE_THRESHOLD ? visibleOpsRaw : visibleOpsRaw.filter((o) => o.op !== "DecorationLine");
     if (progress < 1 && visibleGlyphs > 0) {
-      return addTypewriterCursor(visibleOps, visibleGlyphs, fontSize, time);
+      return addTypewriterCursor(visibleOps, visibleGlyphs, fontSize, time, isRTLLines(lines));
     }
     return visibleOps;
   }
@@ -1896,7 +2077,8 @@ function applyAscendAnimation(ops, lines, progress, direction, fontSize, duratio
         acc += gcount;
       }
       if (wordIndex >= 0) {
-        const startF = wordIndex / Math.max(1, totalWords) * (duration / duration);
+        const effectiveWordIndex = isRTLLines(lines) ? Math.max(0, totalWords - 1 - wordIndex) : wordIndex;
+        const startF = effectiveWordIndex / Math.max(1, totalWords) * (duration / duration);
         const endF = Math.min(1, startF + 0.3);
         if (progress >= endF) {
           result.push(op);
@@ -1976,7 +2158,8 @@ function applyShiftAnimation(ops, lines, progress, direction, fontSize, style, d
       }
       unitIndex = Math.max(0, wordIndex);
     }
-    const { startF, endF } = windowFor(unitIndex);
+    const effectiveUnit = isRTLLines(lines) ? Math.max(0, totalUnits - 1 - unitIndex) : unitIndex;
+    const { startF, endF } = windowFor(effectiveUnit);
     if (progress <= startF) {
       const animated = { ...op, x: op.x + offset.x, y: op.y + offset.y };
       if (op.op === "FillPath") {
@@ -2057,7 +2240,8 @@ function applyFadeInAnimation(ops, lines, progress, style, fontSize, duration) {
       }
       unitIndex = Math.max(0, wordIndex);
     }
-    const { startF, endF } = windowFor(unitIndex);
+    const effectiveUnit = isRTLLines(lines) ? Math.max(0, totalUnits - 1 - unitIndex) : unitIndex;
+    const { startF, endF } = windowFor(effectiveUnit);
     if (progress <= startF) {
       const animated = { ...op };
       if (op.op === "FillPath") {
@@ -2144,7 +2328,8 @@ function applySlideInAnimation(ops, lines, progress, direction, fontSize, style,
       }
       unitIndex = Math.max(0, wordIndex);
     }
-    const { startF, endF } = windowFor(unitIndex);
+    const effectiveUnit = isRTLLines(lines) ? Math.max(0, totalUnits - 1 - unitIndex) : unitIndex;
+    const { startF, endF } = windowFor(effectiveUnit);
     if (progress <= startF) {
       const animated = { ...op, x: op.x + offset.x, y: op.y + offset.y };
       if (op.op === "FillPath") {
@@ -2211,6 +2396,43 @@ function segmentLineBySpaces(line) {
   if (current.length) words.push(current);
   return words;
 }
+function sliceGlyphOpsFromEnd(ops, maxGlyphs) {
+  let totalGlyphs = 0;
+  for (const op of ops) {
+    if (op.op === "FillPath" && !isShadowFill(op)) totalGlyphs++;
+  }
+  const skipCount = Math.max(0, totalGlyphs - maxGlyphs);
+  const result = [];
+  let glyphCount = 0;
+  let foundGlyphs = false;
+  for (const op of ops) {
+    if (op.op === "BeginFrame" || op.op === "Rectangle" || op.op === "RectangleStroke") {
+      result.push(op);
+      continue;
+    }
+    if (op.op === "FillPath" && !isShadowFill(op)) {
+      if (glyphCount >= skipCount) {
+        result.push(op);
+        foundGlyphs = true;
+      }
+      glyphCount++;
+      continue;
+    }
+    if (op.op === "StrokePath") {
+      if (glyphCount >= skipCount) result.push(op);
+      continue;
+    }
+    if (op.op === "FillPath" && isShadowFill(op)) {
+      if (glyphCount >= skipCount) result.push(op);
+      continue;
+    }
+    if (op.op === "DecorationLine" && foundGlyphs) {
+      result.push(op);
+      continue;
+    }
+  }
+  return result;
+}
 function sliceGlyphOps(ops, maxGlyphs) {
   const result = [];
   let glyphCount = 0;
@@ -2243,27 +2465,30 @@ function sliceGlyphOps(ops, maxGlyphs) {
   }
   return result;
 }
-function addTypewriterCursor(ops, glyphCount, fontSize, time) {
+function addTypewriterCursor(ops, glyphCount, fontSize, time, isRTL = false) {
   if (glyphCount === 0) return ops;
   const blinkRate = 1;
   const cursorVisible = Math.floor(time * blinkRate * 2) % 2 === 0;
   const alwaysShowCursor = true;
   if (!alwaysShowCursor && !cursorVisible) return ops;
   let last = null;
+  let first = null;
   let count = 0;
   for (const op of ops) {
     if (op.op === "FillPath" && !isShadowFill(op)) {
       count++;
+      if (count === 1) first = op;
       if (count === glyphCount) {
         last = op;
         break;
       }
     }
   }
-  if (last && last.op === "FillPath") {
+  const cursorAnchor = isRTL && first ? first : last;
+  if (cursorAnchor && cursorAnchor.op === "FillPath") {
     const color = getTextColorFromOps(ops);
-    const cursorX = last.x + fontSize * 0.5;
-    const cursorY = last.y;
+    const cursorX = isRTL && first ? first.x - fontSize * 0.15 : cursorAnchor.x + fontSize * 0.5;
+    const cursorY = cursorAnchor.y;
     const cursorWidth = Math.max(3, fontSize / 15);
     const cursorOp = {
       op: "DecorationLine",
@@ -2623,7 +2848,7 @@ function calculateNoneState(ctx) {
     isActive: isWordActive(ctx)
   };
 }
-function calculateWordAnimationState(wordStart, wordEnd, currentTime, config, activeScale = 1, charCount = 0, fontSize = 48) {
+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,
@@ -2646,9 +2871,11 @@ function calculateWordAnimationState(wordStart, wordEnd, currentTime, config, ac
     case "fade":
       partialState = calculateFadeState(ctx, safeSpeed);
       break;
-    case "slide":
-      partialState = calculateSlideState(ctx, config.direction, safeSpeed, fontSize);
+    case "slide": {
+      const slideDir = mirrorAnimationDirection(config.direction, isRTL);
+      partialState = calculateSlideState(ctx, slideDir, config.speed, fontSize);
       break;
+    }
     case "bounce":
       partialState = calculateBounceState(ctx, safeSpeed, fontSize);
       break;
@@ -2676,7 +2903,8 @@ function calculateAnimationStatesForGroup(words, currentTime, config, activeScal
       config,
       activeScale,
       word.text.length,
-      fontSize
+      fontSize,
+      word.isRTL
     );
     states.set(word.wordIndex, state);
   }
@@ -2820,7 +3048,7 @@ function extractActiveScale(asset) {
 }
 function createDrawCaptionWordOp(word, animState, asset, fontConfig) {
   const isActive = animState.isActive;
-  const displayText = animState.visibleCharacters >= 0 && animState.visibleCharacters < word.text.length ? word.text.slice(0, animState.visibleCharacters) : word.text;
+  const displayText = getVisibleText(word.text, animState.visibleCharacters, word.isRTL);
   return {
     op: "DrawCaptionWord",
     text: displayText,
@@ -3275,7 +3503,7 @@ async function createNodePainter(opts) {
           renderToBoth((context) => {
             for (const wordOp of captionWordOps) {
               if (!wordOp.background) continue;
-              const wordDisplayText = wordOp.visibleCharacters >= 0 && wordOp.visibleCharacters < wordOp.text.length ? wordOp.text.slice(0, wordOp.visibleCharacters) : wordOp.text;
+              const wordDisplayText = getVisibleText(wordOp.text, wordOp.visibleCharacters, wordOp.isRTL);
               if (wordDisplayText.length === 0) continue;
               context.save();
               const bgTx = Math.round(wordOp.x + wordOp.transform.translateX);
@@ -3309,7 +3537,7 @@ async function createNodePainter(opts) {
               context.restore();
             }
             for (const wordOp of captionWordOps) {
-              const displayText = wordOp.visibleCharacters >= 0 && wordOp.visibleCharacters < wordOp.text.length ? wordOp.text.slice(0, wordOp.visibleCharacters) : wordOp.text;
+              const displayText = getVisibleText(wordOp.text, wordOp.visibleCharacters, wordOp.isRTL);
               if (displayText.length === 0) continue;
               context.save();
               const tx = Math.round(wordOp.x + wordOp.transform.translateX);
@@ -4841,9 +5069,8 @@ function extractSvgDimensions(svgString) {
 
 // src/core/rich-caption-layout.ts
 var import_lru_cache = require("lru-cache");
-var RTL_RANGES = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/;
 function isRTLText(text) {
-  return RTL_RANGES.test(text);
+  return containsRTLCharacters(text);
 }
 var WordTimingStore = class {
   startTimes;
@@ -5102,6 +5329,8 @@ var CaptionLayoutEngine = class {
           return (config.frameHeight - totalHeight) / 2 + config.fontSize;
       }
     };
+    const allWordTexts = store.words.slice(0, store.length);
+    const paragraphDirection = detectParagraphDirectionFromWords(allWordTexts);
     const calculateLineX = (lineWidth) => {
       switch (config.horizontalAlign) {
         case "left":
@@ -5119,8 +5348,11 @@ var CaptionLayoutEngine = class {
         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 wordIdx of line.wordIndices) {
+        for (const visualIdx of visualOrder) {
+          const wordIdx = line.wordIndices[visualIdx];
           store.xPositions[wordIdx] = xCursor;
           store.yPositions[wordIdx] = line.y;
           xCursor += store.widths[wordIdx] + spaceWidth;
@@ -5130,7 +5362,8 @@ var CaptionLayoutEngine = class {
     return {
       store,
       groups,
-      shapedWords
+      shapedWords,
+      paragraphDirection
     };
   }
   getVisibleWordsAtTime(layout, timeMs) {
@@ -6601,7 +6834,7 @@ async function createTextEngine(opts = {}) {
               horizontal: asset.align?.horizontal ?? "center",
               vertical: asset.align?.vertical ?? "middle"
             },
-            background: asset.background,
+            background: asset.background ? { color: asset.background.color, opacity: asset.background.opacity, borderRadius: typeof asset.background.borderRadius === "number" ? asset.background.borderRadius : Number(asset.background.borderRadius) || 0 } : void 0,
             border: asset.border,
             padding: asset.padding,
             glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
@@ -6656,7 +6889,8 @@ async function createTextEngine(opts = {}) {
       try {
         const hasBackground = !!asset.background?.color;
         const hasAnimation = !!asset.animation?.preset;
-        const hasBorderRadius = (asset.border?.radius ?? 0) > 0;
+        const bgBorderRadius = typeof asset.background?.borderRadius === "number" ? asset.background.borderRadius : Number(asset.background?.borderRadius) || 0;
+        const hasBorderRadius = (asset.border?.radius ?? 0) > 0 || bgBorderRadius > 0;
         const needsAlpha = !hasBackground && hasAnimation || hasBorderRadius;
         console.log(
           `\u{1F3A8} Video settings: Animation=${hasAnimation}, Background=${hasBackground}, BorderRadius=${hasBorderRadius}, Alpha=${needsAlpha}`
@@ -6715,6 +6949,7 @@ async function createTextEngine(opts = {}) {
   calculateAnimationStatesForGroup,
   commandsToPathString,
   computeSimplePathBounds,
+  containsRTLCharacters,
   createDefaultGeneratorConfig,
   createFrameSchedule,
   createNodePainter,
@@ -6722,6 +6957,8 @@ async function createTextEngine(opts = {}) {
   createRichCaptionRenderer,
   createTextEngine,
   createVideoEncoder,
+  detectParagraphDirection,
+  detectParagraphDirectionFromWords,
   detectPlatform,
   detectSubtitleFormat,
   extractCaptionPadding,
@@ -6733,10 +6970,12 @@ async function createTextEngine(opts = {}) {
   getDrawCaptionWordOps,
   getEncoderCapabilities,
   getEncoderWarning,
+  getVisibleText,
   groupWordsByPause,
   isDrawCaptionWordOp,
   isRTLText,
   isWebCodecsH264Supported,
+  mirrorAnimationDirection,
   normalizePath,
   normalizePathString,
   parseSubtitleToWords,
@@ -6744,6 +6983,7 @@ async function createTextEngine(opts = {}) {
   quadraticToCubic,
   renderSvgAssetToPng,
   renderSvgToPng,
+  reorderWordsForLine,
   richCaptionAssetSchema,
   shapeToSvgString,
   svgAssetSchema,