@shotstack/shotstack-canvas 1.3.8 → 1.4.0

package/dist/entry.node.cjs

@@ -370,10 +370,14 @@ var FontRegistry = class _FontRegistry {
   fontkitFonts = /* @__PURE__ */ new Map();
   wasmBaseURL;
   initPromise;
+  emojiFallbackDesc;
   static fallbackLoader;
   static setFallbackLoader(loader) {
     _FontRegistry.fallbackLoader = loader;
   }
+  setEmojiFallback(desc) {
+    this.emojiFallbackDesc = desc;
+  }
   constructor(wasmBaseURL) {
     this.wasmBaseURL = wasmBaseURL;
   }
@@ -415,7 +419,8 @@ var FontRegistry = class _FontRegistry {
     return this.hb;
   }
   key(desc) {
-    return `${desc.family}__${desc.weight ?? "400"}__${desc.style ?? "normal"}`;
+    const normalizedStyle = desc.style === "oblique" ? "italic" : desc.style ?? "normal";
+    return `${desc.family}__${desc.weight ?? "400"}__${normalizedStyle}`;
   }
   async registerFromBytes(bytes, desc) {
     try {
@@ -531,7 +536,8 @@ var FontRegistry = class _FontRegistry {
       if (fkFont) {
         const glyph = fkFont.getGlyph(glyphId);
         if (glyph && glyph.path) {
-          return glyph.path.toSVG();
+          const path2 = glyph.path.toSVG();
+          return path2 && path2 !== "" ? path2 : "M 0 0";
         }
       }
       const font = await this.getFont(desc);
@@ -587,6 +593,18 @@ var FontRegistry = class _FontRegistry {
 };
 
 // src/core/layout.ts
+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;
+}
 var LayoutEngine = class {
   constructor(fonts) {
     this.fonts = fonts;
@@ -634,14 +652,43 @@ var LayoutEngine = class {
   }
   async layout(params) {
     try {
-      const { textTransform, desc, fontSize, letterSpacing, width } = params;
+      const { textTransform, desc, fontSize, letterSpacing, width, emojiFallback } = params;
       const input = this.transformText(params.text, textTransform);
       if (!input || input.length === 0) {
         return [];
       }
       let shaped;
       try {
-        shaped = await this.shapeFull(input, desc);
+        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);
+          }
+        }
       } catch (err) {
         throw new Error(`Text shaping failed: ${err instanceof Error ? err.message : String(err)}`);
       }
@@ -667,7 +714,9 @@ var LayoutEngine = class {
           xOffset: g.dx * scale,
           yOffset: -g.dy * scale,
           cluster: g.cl,
-          char
+          char,
+          fontDesc: g.fontDesc
+          // Preserve font descriptor
         };
       });
       const lines = [];
@@ -815,7 +864,7 @@ async function buildDrawOps(p) {
     const lineIndex = p.lines.indexOf(line);
     const baselineY = blockY + lineIndex * lineHeightPx;
     for (const glyph of line.glyphs) {
-      const path = await p.glyphPathProvider(glyph.id);
+      const path = await p.glyphPathProvider(glyph.id, glyph.fontDesc);
       if (!path || path === "M 0 0") {
         xCursor += glyph.xAdvance;
         continue;
@@ -2079,6 +2128,13 @@ async function createTextEngine(opts = {}) {
         const desc = { family: main.family, weight: `${main.weight}`, style: main.style };
         let lines;
         try {
+          const emojiDesc = { family: "NotoEmoji", weight: "400", style: "normal" };
+          let emojiAvailable = false;
+          try {
+            await fonts.getFace(emojiDesc);
+            emojiAvailable = true;
+          } catch {
+          }
           lines = await layout.layout({
             text: asset.text,
             width: asset.width ?? width,
@@ -2086,7 +2142,8 @@ async function createTextEngine(opts = {}) {
             fontSize: main.size,
             lineHeight: asset.style?.lineHeight ?? 1.2,
             desc,
-            textTransform: asset.style?.textTransform ?? "none"
+            textTransform: asset.style?.textTransform ?? "none",
+            emojiFallback: emojiAvailable ? emojiDesc : void 0
           });
         } catch (err) {
           throw new Error(
@@ -2128,8 +2185,8 @@ async function createTextEngine(opts = {}) {
               vertical: asset.align?.vertical ?? "middle"
             },
             background: asset.background,
-            glyphPathProvider: (gid) => fonts.glyphPath(desc, gid),
-            getUnitsPerEm: () => fonts.getUnitsPerEm(desc)
+            glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
+            getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
           });
         } catch (err) {
           throw new Error(

package/dist/entry.node.d.cts

@@ -121,6 +121,11 @@ type Glyph = {
     yOffset: number;
     cluster: number;
     char?: string;
+    fontDesc?: {
+        family: string;
+        weight?: string | number;
+        style?: string;
+    };
 };
 type ShapedLine = {
     glyphs: Glyph[];

package/dist/entry.node.d.ts

@@ -121,6 +121,11 @@ type Glyph = {
     yOffset: number;
     cluster: number;
     char?: string;
+    fontDesc?: {
+        family: string;
+        weight?: string | number;
+        style?: string;
+    };
 };
 type ShapedLine = {
     glyphs: Glyph[];

package/dist/entry.node.js

@@ -331,10 +331,14 @@ var FontRegistry = class _FontRegistry {
   fontkitFonts = /* @__PURE__ */ new Map();
   wasmBaseURL;
   initPromise;
+  emojiFallbackDesc;
   static fallbackLoader;
   static setFallbackLoader(loader) {
     _FontRegistry.fallbackLoader = loader;
   }
+  setEmojiFallback(desc) {
+    this.emojiFallbackDesc = desc;
+  }
   constructor(wasmBaseURL) {
     this.wasmBaseURL = wasmBaseURL;
   }
@@ -376,7 +380,8 @@ var FontRegistry = class _FontRegistry {
     return this.hb;
   }
   key(desc) {
-    return `${desc.family}__${desc.weight ?? "400"}__${desc.style ?? "normal"}`;
+    const normalizedStyle = desc.style === "oblique" ? "italic" : desc.style ?? "normal";
+    return `${desc.family}__${desc.weight ?? "400"}__${normalizedStyle}`;
   }
   async registerFromBytes(bytes, desc) {
     try {
@@ -492,7 +497,8 @@ var FontRegistry = class _FontRegistry {
       if (fkFont) {
         const glyph = fkFont.getGlyph(glyphId);
         if (glyph && glyph.path) {
-          return glyph.path.toSVG();
+          const path2 = glyph.path.toSVG();
+          return path2 && path2 !== "" ? path2 : "M 0 0";
         }
       }
       const font = await this.getFont(desc);
@@ -548,6 +554,18 @@ var FontRegistry = class _FontRegistry {
 };
 
 // src/core/layout.ts
+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;
+}
 var LayoutEngine = class {
   constructor(fonts) {
     this.fonts = fonts;
@@ -595,14 +613,43 @@ var LayoutEngine = class {
   }
   async layout(params) {
     try {
-      const { textTransform, desc, fontSize, letterSpacing, width } = params;
+      const { textTransform, desc, fontSize, letterSpacing, width, emojiFallback } = params;
       const input = this.transformText(params.text, textTransform);
       if (!input || input.length === 0) {
         return [];
       }
       let shaped;
       try {
-        shaped = await this.shapeFull(input, desc);
+        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);
+          }
+        }
       } catch (err) {
         throw new Error(`Text shaping failed: ${err instanceof Error ? err.message : String(err)}`);
       }
@@ -628,7 +675,9 @@ var LayoutEngine = class {
           xOffset: g.dx * scale,
           yOffset: -g.dy * scale,
           cluster: g.cl,
-          char
+          char,
+          fontDesc: g.fontDesc
+          // Preserve font descriptor
         };
       });
       const lines = [];
@@ -776,7 +825,7 @@ async function buildDrawOps(p) {
     const lineIndex = p.lines.indexOf(line);
     const baselineY = blockY + lineIndex * lineHeightPx;
     for (const glyph of line.glyphs) {
-      const path = await p.glyphPathProvider(glyph.id);
+      const path = await p.glyphPathProvider(glyph.id, glyph.fontDesc);
       if (!path || path === "M 0 0") {
         xCursor += glyph.xAdvance;
         continue;
@@ -2040,6 +2089,13 @@ async function createTextEngine(opts = {}) {
         const desc = { family: main.family, weight: `${main.weight}`, style: main.style };
         let lines;
         try {
+          const emojiDesc = { family: "NotoEmoji", weight: "400", style: "normal" };
+          let emojiAvailable = false;
+          try {
+            await fonts.getFace(emojiDesc);
+            emojiAvailable = true;
+          } catch {
+          }
           lines = await layout.layout({
             text: asset.text,
             width: asset.width ?? width,
@@ -2047,7 +2103,8 @@ async function createTextEngine(opts = {}) {
             fontSize: main.size,
             lineHeight: asset.style?.lineHeight ?? 1.2,
             desc,
-            textTransform: asset.style?.textTransform ?? "none"
+            textTransform: asset.style?.textTransform ?? "none",
+            emojiFallback: emojiAvailable ? emojiDesc : void 0
           });
         } catch (err) {
           throw new Error(
@@ -2089,8 +2146,8 @@ async function createTextEngine(opts = {}) {
               vertical: asset.align?.vertical ?? "middle"
             },
             background: asset.background,
-            glyphPathProvider: (gid) => fonts.glyphPath(desc, gid),
-            getUnitsPerEm: () => fonts.getUnitsPerEm(desc)
+            glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
+            getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
           });
         } catch (err) {
           throw new Error(

package/dist/entry.web.d.ts

@@ -121,6 +121,11 @@ type Glyph = {
     yOffset: number;
     cluster: number;
     char?: string;
+    fontDesc?: {
+        family: string;
+        weight?: string | number;
+        style?: string;
+    };
 };
 type ShapedLine = {
     glyphs: Glyph[];

package/dist/entry.web.js

@@ -336,11 +336,15 @@ var _FontRegistry = class _FontRegistry {
     __publicField(this, "fontkitFonts", /* @__PURE__ */ new Map());
     __publicField(this, "wasmBaseURL");
     __publicField(this, "initPromise");
+    __publicField(this, "emojiFallbackDesc");
     this.wasmBaseURL = wasmBaseURL;
   }
   static setFallbackLoader(loader) {
     _FontRegistry.fallbackLoader = loader;
   }
+  setEmojiFallback(desc) {
+    this.emojiFallbackDesc = desc;
+  }
   async init() {
     if (this.initPromise) {
       await this.initPromise;
@@ -379,7 +383,8 @@ var _FontRegistry = class _FontRegistry {
     return this.hb;
   }
   key(desc) {
-    return `${desc.family}__${desc.weight ?? "400"}__${desc.style ?? "normal"}`;
+    const normalizedStyle = desc.style === "oblique" ? "italic" : desc.style ?? "normal";
+    return `${desc.family}__${desc.weight ?? "400"}__${normalizedStyle}`;
   }
   async registerFromBytes(bytes, desc) {
     try {
@@ -495,7 +500,8 @@ var _FontRegistry = class _FontRegistry {
       if (fkFont) {
         const glyph = fkFont.getGlyph(glyphId);
         if (glyph && glyph.path) {
-          return glyph.path.toSVG();
+          const path2 = glyph.path.toSVG();
+          return path2 && path2 !== "" ? path2 : "M 0 0";
         }
       }
       const font = await this.getFont(desc);
@@ -553,6 +559,18 @@ __publicField(_FontRegistry, "fallbackLoader");
 var FontRegistry = _FontRegistry;
 
 // src/core/layout.ts
+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;
+}
 var LayoutEngine = class {
   constructor(fonts) {
     this.fonts = fonts;
@@ -600,14 +618,43 @@ var LayoutEngine = class {
   }
   async layout(params) {
     try {
-      const { textTransform, desc, fontSize, letterSpacing, width } = params;
+      const { textTransform, desc, fontSize, letterSpacing, width, emojiFallback } = params;
       const input = this.transformText(params.text, textTransform);
       if (!input || input.length === 0) {
         return [];
       }
       let shaped;
       try {
-        shaped = await this.shapeFull(input, desc);
+        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);
+          }
+        }
       } catch (err) {
         throw new Error(`Text shaping failed: ${err instanceof Error ? err.message : String(err)}`);
       }
@@ -633,7 +680,9 @@ var LayoutEngine = class {
           xOffset: g.dx * scale,
           yOffset: -g.dy * scale,
           cluster: g.cl,
-          char
+          char,
+          fontDesc: g.fontDesc
+          // Preserve font descriptor
         };
       });
       const lines = [];
@@ -781,7 +830,7 @@ async function buildDrawOps(p) {
     const lineIndex = p.lines.indexOf(line);
     const baselineY = blockY + lineIndex * lineHeightPx;
     for (const glyph of line.glyphs) {
-      const path = await p.glyphPathProvider(glyph.id);
+      const path = await p.glyphPathProvider(glyph.id, glyph.fontDesc);
       if (!path || path === "M 0 0") {
         xCursor += glyph.xAdvance;
         continue;
@@ -1761,6 +1810,13 @@ async function createTextEngine(opts = {}) {
         const desc = { family: main.family, weight: `${main.weight}`, style: main.style };
         let lines;
         try {
+          const emojiDesc = { family: "NotoEmoji", weight: "400", style: "normal" };
+          let emojiAvailable = false;
+          try {
+            await fonts.getFace(emojiDesc);
+            emojiAvailable = true;
+          } catch {
+          }
           lines = await layout.layout({
             text: asset.text,
             width: asset.width ?? width,
@@ -1768,7 +1824,8 @@ async function createTextEngine(opts = {}) {
             fontSize: main.size,
             lineHeight: asset.style?.lineHeight ?? 1.2,
             desc,
-            textTransform: asset.style?.textTransform ?? "none"
+            textTransform: asset.style?.textTransform ?? "none",
+            emojiFallback: emojiAvailable ? emojiDesc : void 0
           });
         } catch (err) {
           throw new Error(
@@ -1810,8 +1867,8 @@ async function createTextEngine(opts = {}) {
               vertical: asset.align?.vertical ?? "middle"
             },
             background: asset.background,
-            glyphPathProvider: (gid) => fonts.glyphPath(desc, gid),
-            getUnitsPerEm: () => fonts.getUnitsPerEm(desc)
+            glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
+            getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
           });
         } catch (err) {
           throw new Error(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotstack/shotstack-canvas",
-  "version": "1.3.8",
+  "version": "1.4.0",
   "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
   "type": "module",
   "main": "./dist/entry.node.cjs",