@shotstack/shotstack-canvas 2.0.14 → 2.0.16

package/README.md

@@ -1,13 +1,72 @@
-# @shotstack/shotstack-canvas
-
-One package → identical text shaping/wrapping/animation on Web & Node.
-- HarfBuzz WASM for shaping and glyph outlines (via `harfbuzzjs`).
-- Device-independent draw-ops.
-- Painters: Canvas2D (web) and node-canvas (node).
-- Deterministic time-driven animations.
-
-## Install
-
-```bash
-pnpm add @shotstack/shotstack-canvas
-# or npm i / yarn add
+# @shotstack/shotstack-canvas
+
+Text layout and animation engine using HarfBuzz WASM. Identical rendering on Node.js and Web.
+
+## Features
+
+- HarfBuzz WASM text shaping with glyph outlines
+- Cross-platform DrawOp abstraction (Canvas2D for web, @napi-rs/canvas for Node.js)
+- Rich text with fonts, stroke, shadow, gradients, backgrounds, and borders
+- SVG asset rendering (11 shape types + SVG markup import)
+- Rich caption support with word-level timing and 8 animation styles
+- Video generation (H.264 MP4 via FFmpeg on Node.js, WebCodecs in browser)
+- RTL and bidirectional text support
+- Custom font registration (file, URL, or ArrayBuffer)
+
+## Install
+
+```bash
+pnpm add @shotstack/shotstack-canvas
+```
+
+## Quick Start
+
+### Node.js
+
+```js
+import { createTextEngine } from "@shotstack/shotstack-canvas";
+
+const engine = await createTextEngine({ width: 800, height: 400 });
+
+const asset = engine.validate({
+  type: "rich-text",
+  text: "Hello World",
+  font: { family: "Open Sans", size: 48, color: "#ffffff" },
+});
+
+const drawOps = await engine.renderFrame(asset.value, 0);
+const renderer = await engine.createRenderer({ width: 800, height: 400 });
+const buffer = renderer.paint(drawOps);
+```
+
+### Web
+
+```js
+import { createTextEngine } from "@shotstack/shotstack-canvas";
+
+const engine = await createTextEngine({ width: 800, height: 400 });
+const asset = engine.validate({ type: "rich-text", text: "Hello World" });
+const drawOps = await engine.renderFrame(asset.value, 0);
+const renderer = engine.createRenderer(canvas);
+renderer.paint(drawOps);
+```
+
+## Development
+
+```bash
+pnpm install
+pnpm build
+pnpm test
+```
+
+## Release
+
+Releases are automated via [semantic-release](https://github.com/semantic-release/semantic-release). Pushing to `main` with Conventional Commit messages triggers a release:
+
+- `fix: ...` — patch release (e.g., 2.0.15 → 2.0.16)
+- `feat: ...` — minor release (e.g., 2.0.15 → 2.1.0)
+- `feat!: ...` or `BREAKING CHANGE:` — major release (e.g., 2.0.15 → 3.0.0)
+
+## License
+
+MIT

package/dist/entry.node.cjs

@@ -1377,17 +1377,45 @@ function mirrorAnimationDirection(direction, isRTL) {
 }
 
 // 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) {
@@ -1412,6 +1440,9 @@ var LayoutEngine = class {
       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;
@@ -1434,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;
@@ -1443,38 +1532,7 @@ var LayoutEngine = class {
       }
       let shaped;
       try {
-        if (!emojiFallback) {
-          const textDirection = containsRTLCharacters(input) ? "rtl" : void 0;
-          shaped = await this.shapeFull(input, desc, textDirection);
-        } 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 runDirection = containsRTLCharacters(run.text) ? "rtl" : void 0;
-            const runShaped = await this.shapeFull(run.text, runFont, runDirection);
-            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)}`);
       }
@@ -1505,7 +1563,6 @@ var LayoutEngine = class {
           cluster: g.cl,
           char,
           fontDesc: g.fontDesc
-          // Preserve font descriptor
         };
       });
       const lines = [];

package/dist/entry.node.d.cts

@@ -534,6 +534,7 @@ interface HBGlyphInfo {
 interface HBBuffer {
     addText(text: string): void;
     guessSegmentProperties(): void;
+    setDirection(direction: "ltr" | "rtl" | "ttb" | "btt"): void;
     json(): HBGlyphInfo[];
     destroy(): void;
 }

package/dist/entry.node.d.ts

@@ -534,6 +534,7 @@ interface HBGlyphInfo {
 interface HBBuffer {
     addText(text: string): void;
     guessSegmentProperties(): void;
+    setDirection(direction: "ltr" | "rtl" | "ttb" | "btt"): void;
     json(): HBGlyphInfo[];
     destroy(): void;
 }

package/dist/entry.node.js

@@ -974,17 +974,45 @@ function mirrorAnimationDirection(direction, isRTL) {
 }
 
 // src/core/layout.ts
+import bidiFactory2 from "bidi-js";
 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) {
@@ -1009,6 +1037,9 @@ var LayoutEngine = class {
       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;
@@ -1031,6 +1062,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 = bidiFactory2();
+    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;
@@ -1040,38 +1129,7 @@ var LayoutEngine = class {
       }
       let shaped;
       try {
-        if (!emojiFallback) {
-          const textDirection = containsRTLCharacters(input) ? "rtl" : void 0;
-          shaped = await this.shapeFull(input, desc, textDirection);
-        } 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 runDirection = containsRTLCharacters(run.text) ? "rtl" : void 0;
-            const runShaped = await this.shapeFull(run.text, runFont, runDirection);
-            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)}`);
       }
@@ -1102,7 +1160,6 @@ var LayoutEngine = class {
           cluster: g.cl,
           char,
           fontDesc: g.fontDesc
-          // Preserve font descriptor
         };
       });
       const lines = [];

package/dist/entry.web.d.ts

@@ -534,6 +534,7 @@ interface HBGlyphInfo {
 interface HBBuffer {
     addText(text: string): void;
     guessSegmentProperties(): void;
+    setDirection(direction: "ltr" | "rtl" | "ttb" | "btt"): void;
     json(): HBGlyphInfo[];
     destroy(): void;
 }

package/dist/entry.web.js

@@ -33016,14 +33016,41 @@ function mirrorAnimationDirection(direction, isRTL) {
 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) {
@@ -33048,6 +33075,9 @@ var LayoutEngine = class {
       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;
@@ -33070,6 +33100,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 = bidi_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;
@@ -33079,38 +33167,7 @@ var LayoutEngine = class {
       }
       let shaped;
       try {
-        if (!emojiFallback) {
-          const textDirection = containsRTLCharacters(input) ? "rtl" : void 0;
-          shaped = await this.shapeFull(input, desc, textDirection);
-        } 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 runDirection = containsRTLCharacters(run.text) ? "rtl" : void 0;
-            const runShaped = await this.shapeFull(run.text, runFont, runDirection);
-            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)}`);
       }
@@ -33141,7 +33198,6 @@ var LayoutEngine = class {
           cluster: g.cl,
           char,
           fontDesc: g.fontDesc
-          // Preserve font descriptor
         };
       });
       const lines = [];

package/package.json

@@ -1,66 +1,78 @@
-{
-  "name": "@shotstack/shotstack-canvas",
-  "version": "2.0.14",
-  "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
-  "type": "module",
-  "main": "./dist/entry.node.cjs",
-  "module": "./dist/entry.node.js",
-  "browser": "./dist/entry.web.js",
-  "types": "./dist/entry.node.d.ts",
-  "exports": {
-    ".": {
-      "node": {
-        "import": "./dist/entry.node.js",
-        "require": "./dist/entry.node.cjs"
-      },
-      "browser": "./dist/entry.web.js",
-      "default": "./dist/entry.web.js"
-    }
-  },
-  "files": [
-    "dist/**",
-    "scripts/postinstall.js",
-    "README.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
-    "postinstall": "node scripts/postinstall.js",
-    "vendor:harfbuzz": "node scripts/vendor-harfbuzz.js",
-    "example:node": "node examples/node-example.mjs",
-    "example:video": "node examples/node-video.mjs",
-    "example:web": "vite dev examples/web-example",
-    "test:caption-web": "vite dev examples/caption-tests",
-    "prepublishOnly": "npm run build"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "sideEffects": false,
-  "dependencies": {
-    "@resvg/resvg-js": "^2.6.2",
-    "@resvg/resvg-wasm": "^2.6.2",
-    "bidi-js": "^1.0.3",
-    "@shotstack/schemas": "1.8.7",
-    "canvas": "npm:@napi-rs/canvas@^0.1.54",
-    "ffmpeg-static": "^5.2.0",
-    "fontkit": "^2.0.4",
-    "harfbuzzjs": "0.4.12",
-    "lru-cache": "^11.2.5",
-    "mp4-muxer": "^5.1.3",
-    "zod": "^4.2.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20.14.10",
-    "tsup": "^8.2.3",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.3",
-    "vite-plugin-top-level-await": "1.6.0",
-    "vite-plugin-wasm": "3.5.0"
-  }
-}
+{
+  "name": "@shotstack/shotstack-canvas",
+  "version": "2.0.16",
+  "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
+  "type": "module",
+  "main": "./dist/entry.node.cjs",
+  "module": "./dist/entry.node.js",
+  "browser": "./dist/entry.web.js",
+  "types": "./dist/entry.node.d.ts",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/entry.node.js",
+        "require": "./dist/entry.node.cjs"
+      },
+      "browser": "./dist/entry.web.js",
+      "default": "./dist/entry.web.js"
+    }
+  },
+  "files": [
+    "dist/**",
+    "scripts/postinstall.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "postinstall": "node scripts/postinstall.js",
+    "vendor:harfbuzz": "node scripts/vendor-harfbuzz.js",
+    "example:node": "node examples/node-example.mjs",
+    "example:video": "node examples/node-video.mjs",
+    "example:web": "vite dev examples/web-example",
+    "test:caption-web": "vite dev examples/caption-tests",
+    "prepublishOnly": "node scripts/publish-guard.cjs && pnpm build",
+    "test": "node --test tests/build-verify.mjs"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@resvg/resvg-js": "^2.6.2",
+    "@resvg/resvg-wasm": "^2.6.2",
+    "@shotstack/schemas": "1.8.7",
+    "bidi-js": "^1.0.3",
+    "canvas": "npm:@napi-rs/canvas@^0.1.54",
+    "ffmpeg-static": "^5.2.0",
+    "fontkit": "^2.0.4",
+    "harfbuzzjs": "0.4.12",
+    "lru-cache": "^11.2.5",
+    "mp4-muxer": "^5.1.3",
+    "zod": "^4.2.0"
+  },
+  "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^12.0.6",
+    "@semantic-release/npm": "^13.1.5",
+    "@semantic-release/release-notes-generator": "^14.1.0",
+    "@types/node": "^20.14.10",
+    "semantic-release": "^25.0.3",
+    "tsup": "^8.2.3",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
+    "vite-plugin-top-level-await": "1.6.0",
+    "vite-plugin-wasm": "3.5.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shotstack/shotstack-canvas.git"
+  }
+}

package/scripts/postinstall.js

@@ -1,58 +1,58 @@
-#!/usr/bin/env node
-
-/**
- * Postinstall script to verify native canvas bindings are available
- * This helps catch issues early and provides helpful guidance
- */
-
-import { platform as _platform, arch as _arch } from 'os';
-import { dirname } from 'path';
-import { readdirSync } from 'fs';
-import { createRequire } from 'module';
-
-const require = createRequire(import.meta.url);
-
-const platform = _platform();
-const arch = _arch();
-
-// Map platform/arch to package names
-const platformMap = {
-  'darwin-arm64': '@napi-rs/canvas-darwin-arm64',
-  'darwin-x64': '@napi-rs/canvas-darwin-x64',
-  'linux-arm64': '@napi-rs/canvas-linux-arm64-gnu',
-  'linux-x64': '@napi-rs/canvas-linux-x64-gnu',
-  'win32-x64': '@napi-rs/canvas-win32-x64-msvc',
-  'linux-arm': '@napi-rs/canvas-linux-arm-gnueabihf',
-  'android-arm64': '@napi-rs/canvas-android-arm64',
-};
-
-const platformKey = `${platform}-${arch}`;
-const requiredPackage = platformMap[platformKey];
-
-if (!requiredPackage) {
-  console.warn(`\n⚠️  Warning: Unsupported platform ${platformKey} for @napi-rs/canvas`);
-  console.warn('   Canvas rendering may not work on this platform.\n');
-  process.exit(0);
-}
-
-// Check if the native binding package is installed
-try {
-  const packagePath = require.resolve(`${requiredPackage}/package.json`);
-  const packageDir = dirname(packagePath);
-
-  // Verify the .node file exists
-  const nodeFiles = readdirSync(packageDir).filter(f => f.endsWith('.node'));
-
-  if (nodeFiles.length > 0) {
-    console.log(`✅ @shotstack/shotstack-canvas: Native canvas binding found for ${platformKey}`);
-  } else {
-    throw new Error('No .node file found');
-  }
-} catch (error) {
-  console.warn(`\n⚠️  Warning: Native canvas binding not found for ${platformKey}`);
-  console.warn(`   Expected package: ${requiredPackage}`);
-  console.warn('\n   If you see "Cannot find native binding" errors, try:');
-  console.warn('   1. Delete node_modules and package-lock.json');
-  console.warn('   2. Run: npm install');
-  console.warn(`   3. Or manually install: npm install ${requiredPackage}\n`);
-}
+#!/usr/bin/env node
+
+/**
+ * Postinstall script to verify native canvas bindings are available
+ * This helps catch issues early and provides helpful guidance
+ */
+
+import { platform as _platform, arch as _arch } from 'os';
+import { dirname } from 'path';
+import { readdirSync } from 'fs';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+
+const platform = _platform();
+const arch = _arch();
+
+// Map platform/arch to package names
+const platformMap = {
+  'darwin-arm64': '@napi-rs/canvas-darwin-arm64',
+  'darwin-x64': '@napi-rs/canvas-darwin-x64',
+  'linux-arm64': '@napi-rs/canvas-linux-arm64-gnu',
+  'linux-x64': '@napi-rs/canvas-linux-x64-gnu',
+  'win32-x64': '@napi-rs/canvas-win32-x64-msvc',
+  'linux-arm': '@napi-rs/canvas-linux-arm-gnueabihf',
+  'android-arm64': '@napi-rs/canvas-android-arm64',
+};
+
+const platformKey = `${platform}-${arch}`;
+const requiredPackage = platformMap[platformKey];
+
+if (!requiredPackage) {
+  console.warn(`\n⚠️  Warning: Unsupported platform ${platformKey} for @napi-rs/canvas`);
+  console.warn('   Canvas rendering may not work on this platform.\n');
+  process.exit(0);
+}
+
+// Check if the native binding package is installed
+try {
+  const packagePath = require.resolve(`${requiredPackage}/package.json`);
+  const packageDir = dirname(packagePath);
+
+  // Verify the .node file exists
+  const nodeFiles = readdirSync(packageDir).filter(f => f.endsWith('.node'));
+
+  if (nodeFiles.length > 0) {
+    console.log(`✅ @shotstack/shotstack-canvas: Native canvas binding found for ${platformKey}`);
+  } else {
+    throw new Error('No .node file found');
+  }
+} catch (error) {
+  console.warn(`\n⚠️  Warning: Native canvas binding not found for ${platformKey}`);
+  console.warn(`   Expected package: ${requiredPackage}`);
+  console.warn('\n   If you see "Cannot find native binding" errors, try:');
+  console.warn('   1. Delete node_modules and package-lock.json');
+  console.warn('   2. Run: npm install');
+  console.warn(`   3. Or manually install: npm install ${requiredPackage}\n`);
+}