@shotstack/shotstack-canvas 1.7.2 → 1.8.0

package/dist/entry.node.cjs

@@ -430,6 +430,9 @@ var FontRegistry = class _FontRegistry {
   fonts = /* @__PURE__ */ new Map();
   blobs = /* @__PURE__ */ new Map();
   fontkitFonts = /* @__PURE__ */ new Map();
+  fontkitBaseFonts = /* @__PURE__ */ new Map();
+  colorEmojiFonts = /* @__PURE__ */ new Set();
+  colorEmojiFontBytes = /* @__PURE__ */ new Map();
   wasmBaseURL;
   initPromise;
   emojiFallbackDesc;
@@ -493,6 +496,49 @@ var FontRegistry = class _FontRegistry {
   setEmojiFallback(desc) {
     this.emojiFallbackDesc = desc;
   }
+  isColorEmojiFont(family) {
+    return this.colorEmojiFonts.has(family);
+  }
+  getColorEmojiFontBytes(family) {
+    return this.colorEmojiFontBytes.get(family);
+  }
+  getColorEmojiFontFamilies() {
+    return Array.from(this.colorEmojiFonts);
+  }
+  detectColorEmojiFont(fkFont) {
+    try {
+      if (fkFont.directory && fkFont.directory.tables) {
+        const tables = fkFont.directory.tables;
+        if (tables.CBDT || tables.CBLC) {
+          return true;
+        }
+        if (tables.sbix) {
+          return true;
+        }
+        if (tables.COLR && tables.CPAL) {
+          return true;
+        }
+        if (tables.SVG) {
+          return true;
+        }
+      }
+      if (fkFont.availableTables) {
+        const tables = fkFont.availableTables;
+        if (tables.includes("CBDT") || tables.includes("CBLC") || tables.includes("sbix") || tables.includes("COLR") && tables.includes("CPAL") || tables.includes("SVG")) {
+          return true;
+        }
+      }
+      if (fkFont._tables) {
+        const tableNames = Object.keys(fkFont._tables);
+        if (tableNames.includes("CBDT") || tableNames.includes("CBLC") || tableNames.includes("sbix") || tableNames.includes("COLR") && tableNames.includes("CPAL") || tableNames.includes("SVG")) {
+          return true;
+        }
+      }
+      return false;
+    } catch {
+      return false;
+    }
+  }
   constructor(wasmBaseURL) {
     this.wasmBaseURL = wasmBaseURL;
   }
@@ -561,13 +607,29 @@ var FontRegistry = class _FontRegistry {
       try {
         const buffer = typeof Buffer !== "undefined" ? Buffer.from(bytes) : new Uint8Array(bytes);
         const fkFont = fontkit.create(buffer);
+        const baseFontKey = desc.family;
+        if (!this.fontkitBaseFonts.has(baseFontKey)) {
+          this.fontkitBaseFonts.set(baseFontKey, fkFont);
+        }
+        const isColorEmojiFont = this.detectColorEmojiFont(fkFont);
+        if (isColorEmojiFont) {
+          this.colorEmojiFonts.add(desc.family);
+          if (!this.colorEmojiFontBytes.has(desc.family)) {
+            this.colorEmojiFontBytes.set(desc.family, bytes.slice(0));
+          }
+          console.log(`\u{1F3A8} Registered color emoji font: ${desc.family}`);
+        }
         if (fkFont.variationAxes && Object.keys(fkFont.variationAxes).length > 0) {
           const variationFont = fkFont.getVariation({ wght: weightNum });
           this.fontkitFonts.set(k, variationFont);
-          console.log(`\u2705 Registered variable font: ${desc.family} weight=${weightNum}`);
+          if (!isColorEmojiFont) {
+            console.log(`\u2705 Registered variable font: ${desc.family} weight=${weightNum}`);
+          }
         } else {
           this.fontkitFonts.set(k, fkFont);
-          console.log(`\u2705 Registered static font: ${desc.family}`);
+          if (!isColorEmojiFont) {
+            console.log(`\u2705 Registered static font: ${desc.family}`);
+          }
         }
       } catch (err) {
         console.warn(`\u26A0\uFE0F  Fontkit failed for ${desc.family}:`, err);
@@ -606,6 +668,9 @@ var FontRegistry = class _FontRegistry {
         const installed = await this.tryFallbackInstall(desc);
         f = installed ? this.fonts.get(k) : void 0;
       }
+      if (!f) {
+        f = await this.tryDeriveFromExistingFont(desc);
+      }
       if (!f) throw new Error(`Font not registered for ${k}`);
       return f;
     } catch (err) {
@@ -617,6 +682,53 @@ var FontRegistry = class _FontRegistry {
       );
     }
   }
+  async tryDeriveFromExistingFont(desc) {
+    const targetFamily = desc.family;
+    const targetWeight = normalizeWeight(desc.weight);
+    const targetWeightNum = parseInt(targetWeight, 10);
+    let existingBlob;
+    for (const [key, blob] of this.blobs) {
+      if (key.startsWith(`${targetFamily}__`)) {
+        existingBlob = blob;
+        break;
+      }
+    }
+    const baseFkFont = this.fontkitBaseFonts.get(targetFamily);
+    if (!existingBlob || !baseFkFont) {
+      return void 0;
+    }
+    const hasWeightAxis = baseFkFont.variationAxes && baseFkFont.variationAxes["wght"] !== void 0;
+    if (!hasWeightAxis) {
+      console.warn(
+        `Font ${targetFamily} is not a variable font, cannot derive weight ${targetWeight}`
+      );
+      return void 0;
+    }
+    const k = this.key(desc);
+    const face = this.hb.createFace(existingBlob, 0);
+    const font = this.hb.createFont(face);
+    const upem = face.upem || 1e3;
+    font.setScale(upem, upem);
+    if (typeof font.setVariations === "function") {
+      try {
+        font.setVariations(`wght=${targetWeightNum}`);
+      } catch (e) {
+      }
+    }
+    this.faces.set(k, face);
+    this.fonts.set(k, font);
+    try {
+      const variationFont = baseFkFont.getVariation({ wght: targetWeightNum });
+      this.fontkitFonts.set(k, variationFont);
+      console.log(
+        `\u2705 Derived variable font: ${targetFamily} weight=${targetWeightNum} from existing registration`
+      );
+    } catch (err) {
+      this.fontkitFonts.set(k, baseFkFont);
+      console.warn(`\u26A0\uFE0F Could not apply weight variation, using base font for ${targetFamily}`);
+    }
+    return font;
+  }
   async getFace(desc) {
     try {
       if (!this.hb) await this.init();
@@ -626,6 +738,10 @@ var FontRegistry = class _FontRegistry {
         const installed = await this.tryFallbackInstall(desc);
         face = installed ? this.faces.get(k) : void 0;
       }
+      if (!face) {
+        await this.tryDeriveFromExistingFont(desc);
+        face = this.faces.get(k);
+      }
       return face;
     } catch (err) {
       throw new Error(
@@ -696,6 +812,9 @@ var FontRegistry = class _FontRegistry {
       this.faces.clear();
       this.blobs.clear();
       this.fontkitFonts.clear();
+      this.fontkitBaseFonts.clear();
+      this.colorEmojiFonts.clear();
+      this.colorEmojiFontBytes.clear();
       this.hb = void 0;
       this.initPromise = void 0;
     } catch (err) {
@@ -820,7 +939,10 @@ var LayoutEngine = class {
         const charIndex = g.cl;
         let char;
         if (charIndex >= 0 && charIndex < input.length) {
-          char = input[charIndex];
+          const codePoint = input.codePointAt(charIndex);
+          if (codePoint !== void 0) {
+            char = String.fromCodePoint(codePoint);
+          }
         }
         return {
           id: g.g,
@@ -1005,13 +1127,27 @@ async function buildDrawOps(p) {
       });
     }
     for (const glyph of line.glyphs) {
+      const glyphX = xCursor + glyph.xOffset;
+      const glyphY = baselineY + glyph.yOffset;
+      const glyphFamily = glyph.fontDesc?.family;
+      const isColorEmoji = glyph.isColorEmoji || glyphFamily && p.isColorEmojiFont && p.isColorEmojiFont(glyphFamily);
+      if (isColorEmoji && glyph.char) {
+        textOps.push({
+          op: "DrawColorEmoji",
+          char: glyph.char,
+          x: glyphX,
+          y: glyphY,
+          fontSize: p.font.size,
+          fontFamily: glyphFamily || "NotoColorEmoji"
+        });
+        xCursor += glyph.xAdvance;
+        continue;
+      }
       const path = await p.glyphPathProvider(glyph.id, glyph.fontDesc);
       if (!path || path === "M 0 0") {
         xCursor += glyph.xAdvance;
         continue;
       }
-      const glyphX = xCursor + glyph.xOffset;
-      const glyphY = baselineY + glyph.yOffset;
       const pb = computePathBounds(path);
       const x1 = glyphX + scale * pb.x;
       const x2 = glyphX + scale * (pb.x + pb.w);
@@ -1986,6 +2122,16 @@ async function createNodePainter(opts) {
           });
           continue;
         }
+        if (op.op === "DrawColorEmoji") {
+          renderToBoth((context) => {
+            context.save();
+            context.font = `${op.fontSize}px "${op.fontFamily}"`;
+            context.textBaseline = "alphabetic";
+            context.fillText(op.char, op.x, op.y);
+            context.restore();
+          });
+          continue;
+        }
       }
       if (needsAlphaExtraction) {
         const whiteData = ctx.getImageData(0, 0, canvas.width, canvas.height);
@@ -2452,6 +2598,24 @@ var isGlyphFill2 = (op) => {
 };
 
 // src/env/entry.node.ts
+var registeredGlobalFonts = /* @__PURE__ */ new Set();
+async function registerColorEmojiWithCanvas(family, bytes) {
+  if (registeredGlobalFonts.has(family)) {
+    return;
+  }
+  try {
+    const canvasMod = await import("canvas");
+    const GlobalFonts = canvasMod.GlobalFonts;
+    if (GlobalFonts && typeof GlobalFonts.register === "function") {
+      const buffer = Buffer.from(bytes);
+      GlobalFonts.register(buffer, family);
+      registeredGlobalFonts.add(family);
+      console.log(`\u{1F3A8} Registered color emoji font with canvas: ${family}`);
+    }
+  } catch (err) {
+    console.warn(`\u26A0\uFE0F Could not register color emoji font with canvas GlobalFonts: ${err}`);
+  }
+}
 async function createTextEngine(opts = {}) {
   const width = opts.width ?? CANVAS_CONFIG.DEFAULTS.width;
   const height = opts.height ?? CANVAS_CONFIG.DEFAULTS.height;
@@ -2478,6 +2642,12 @@ async function createTextEngine(opts = {}) {
               family: cf.family,
               weight: cf.weight ?? "400"
             });
+            if (fonts.isColorEmojiFont(cf.family)) {
+              const emojiBytes = fonts.getColorEmojiFontBytes(cf.family);
+              if (emojiBytes) {
+                await registerColorEmojiWithCanvas(cf.family, emojiBytes);
+              }
+            }
           } catch (err) {
             throw new Error(
               `Failed to load custom font "${cf.family}" from ${cf.src}: ${err instanceof Error ? err.message : String(err)}`
@@ -2535,12 +2705,17 @@ async function createTextEngine(opts = {}) {
         const desc = { family: main.family, weight: `${main.weight}` };
         let lines;
         try {
-          const emojiDesc = { family: "NotoEmoji", weight: "400" };
-          let emojiAvailable = false;
-          try {
-            await fonts.getFace(emojiDesc);
-            emojiAvailable = true;
-          } catch {
+          let emojiFallback = void 0;
+          const colorEmojiFamilies = fonts.getColorEmojiFontFamilies();
+          if (colorEmojiFamilies.length > 0) {
+            emojiFallback = { family: colorEmojiFamilies[0], weight: "400" };
+          } else {
+            const notoEmojiDesc = { family: "NotoEmoji", weight: "400" };
+            try {
+              await fonts.getFace(notoEmojiDesc);
+              emojiFallback = notoEmojiDesc;
+            } catch {
+            }
           }
           const padding2 = asset.padding ? typeof asset.padding === "number" ? {
             top: asset.padding,
@@ -2556,7 +2731,7 @@ async function createTextEngine(opts = {}) {
             lineHeight: asset.style?.lineHeight ?? 1.2,
             desc,
             textTransform: asset.style?.textTransform ?? "none",
-            emojiFallback: emojiAvailable ? emojiDesc : void 0
+            emojiFallback
           });
         } catch (err) {
           throw new Error(
@@ -2611,7 +2786,8 @@ async function createTextEngine(opts = {}) {
             border: asset.border,
             padding: asset.padding,
             glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
-            getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
+            getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc),
+            isColorEmojiFont: (family) => fonts.isColorEmojiFont(family)
           });
         } catch (err) {
           throw new Error(

package/dist/entry.node.d.cts

@@ -156,6 +156,7 @@ type Glyph = {
         family: string;
         weight?: string | number;
     };
+    isColorEmoji?: boolean;
 };
 type ShapedLine = {
     glyphs: Glyph[];
@@ -229,6 +230,13 @@ type DrawOp = {
         opacity: number;
     };
     borderRadius?: number;
+} | {
+    op: "DrawColorEmoji";
+    char: string;
+    x: number;
+    y: number;
+    fontSize: number;
+    fontFamily: string;
 };
 type EngineInit = {
     width: number;

package/dist/entry.node.d.ts

@@ -156,6 +156,7 @@ type Glyph = {
         family: string;
         weight?: string | number;
     };
+    isColorEmoji?: boolean;
 };
 type ShapedLine = {
     glyphs: Glyph[];
@@ -229,6 +230,13 @@ type DrawOp = {
         opacity: number;
     };
     borderRadius?: number;
+} | {
+    op: "DrawColorEmoji";
+    char: string;
+    x: number;
+    y: number;
+    fontSize: number;
+    fontFamily: string;
 };
 type EngineInit = {
     width: number;

package/dist/entry.node.js

@@ -399,6 +399,9 @@ var FontRegistry = class _FontRegistry {
   fonts = /* @__PURE__ */ new Map();
   blobs = /* @__PURE__ */ new Map();
   fontkitFonts = /* @__PURE__ */ new Map();
+  fontkitBaseFonts = /* @__PURE__ */ new Map();
+  colorEmojiFonts = /* @__PURE__ */ new Set();
+  colorEmojiFontBytes = /* @__PURE__ */ new Map();
   wasmBaseURL;
   initPromise;
   emojiFallbackDesc;
@@ -462,6 +465,49 @@ var FontRegistry = class _FontRegistry {
   setEmojiFallback(desc) {
     this.emojiFallbackDesc = desc;
   }
+  isColorEmojiFont(family) {
+    return this.colorEmojiFonts.has(family);
+  }
+  getColorEmojiFontBytes(family) {
+    return this.colorEmojiFontBytes.get(family);
+  }
+  getColorEmojiFontFamilies() {
+    return Array.from(this.colorEmojiFonts);
+  }
+  detectColorEmojiFont(fkFont) {
+    try {
+      if (fkFont.directory && fkFont.directory.tables) {
+        const tables = fkFont.directory.tables;
+        if (tables.CBDT || tables.CBLC) {
+          return true;
+        }
+        if (tables.sbix) {
+          return true;
+        }
+        if (tables.COLR && tables.CPAL) {
+          return true;
+        }
+        if (tables.SVG) {
+          return true;
+        }
+      }
+      if (fkFont.availableTables) {
+        const tables = fkFont.availableTables;
+        if (tables.includes("CBDT") || tables.includes("CBLC") || tables.includes("sbix") || tables.includes("COLR") && tables.includes("CPAL") || tables.includes("SVG")) {
+          return true;
+        }
+      }
+      if (fkFont._tables) {
+        const tableNames = Object.keys(fkFont._tables);
+        if (tableNames.includes("CBDT") || tableNames.includes("CBLC") || tableNames.includes("sbix") || tableNames.includes("COLR") && tableNames.includes("CPAL") || tableNames.includes("SVG")) {
+          return true;
+        }
+      }
+      return false;
+    } catch {
+      return false;
+    }
+  }
   constructor(wasmBaseURL) {
     this.wasmBaseURL = wasmBaseURL;
   }
@@ -530,13 +576,29 @@ var FontRegistry = class _FontRegistry {
       try {
         const buffer = typeof Buffer !== "undefined" ? Buffer.from(bytes) : new Uint8Array(bytes);
         const fkFont = fontkit.create(buffer);
+        const baseFontKey = desc.family;
+        if (!this.fontkitBaseFonts.has(baseFontKey)) {
+          this.fontkitBaseFonts.set(baseFontKey, fkFont);
+        }
+        const isColorEmojiFont = this.detectColorEmojiFont(fkFont);
+        if (isColorEmojiFont) {
+          this.colorEmojiFonts.add(desc.family);
+          if (!this.colorEmojiFontBytes.has(desc.family)) {
+            this.colorEmojiFontBytes.set(desc.family, bytes.slice(0));
+          }
+          console.log(`\u{1F3A8} Registered color emoji font: ${desc.family}`);
+        }
         if (fkFont.variationAxes && Object.keys(fkFont.variationAxes).length > 0) {
           const variationFont = fkFont.getVariation({ wght: weightNum });
           this.fontkitFonts.set(k, variationFont);
-          console.log(`\u2705 Registered variable font: ${desc.family} weight=${weightNum}`);
+          if (!isColorEmojiFont) {
+            console.log(`\u2705 Registered variable font: ${desc.family} weight=${weightNum}`);
+          }
         } else {
           this.fontkitFonts.set(k, fkFont);
-          console.log(`\u2705 Registered static font: ${desc.family}`);
+          if (!isColorEmojiFont) {
+            console.log(`\u2705 Registered static font: ${desc.family}`);
+          }
         }
       } catch (err) {
         console.warn(`\u26A0\uFE0F  Fontkit failed for ${desc.family}:`, err);
@@ -575,6 +637,9 @@ var FontRegistry = class _FontRegistry {
         const installed = await this.tryFallbackInstall(desc);
         f = installed ? this.fonts.get(k) : void 0;
       }
+      if (!f) {
+        f = await this.tryDeriveFromExistingFont(desc);
+      }
       if (!f) throw new Error(`Font not registered for ${k}`);
       return f;
     } catch (err) {
@@ -586,6 +651,53 @@ var FontRegistry = class _FontRegistry {
       );
     }
   }
+  async tryDeriveFromExistingFont(desc) {
+    const targetFamily = desc.family;
+    const targetWeight = normalizeWeight(desc.weight);
+    const targetWeightNum = parseInt(targetWeight, 10);
+    let existingBlob;
+    for (const [key, blob] of this.blobs) {
+      if (key.startsWith(`${targetFamily}__`)) {
+        existingBlob = blob;
+        break;
+      }
+    }
+    const baseFkFont = this.fontkitBaseFonts.get(targetFamily);
+    if (!existingBlob || !baseFkFont) {
+      return void 0;
+    }
+    const hasWeightAxis = baseFkFont.variationAxes && baseFkFont.variationAxes["wght"] !== void 0;
+    if (!hasWeightAxis) {
+      console.warn(
+        `Font ${targetFamily} is not a variable font, cannot derive weight ${targetWeight}`
+      );
+      return void 0;
+    }
+    const k = this.key(desc);
+    const face = this.hb.createFace(existingBlob, 0);
+    const font = this.hb.createFont(face);
+    const upem = face.upem || 1e3;
+    font.setScale(upem, upem);
+    if (typeof font.setVariations === "function") {
+      try {
+        font.setVariations(`wght=${targetWeightNum}`);
+      } catch (e) {
+      }
+    }
+    this.faces.set(k, face);
+    this.fonts.set(k, font);
+    try {
+      const variationFont = baseFkFont.getVariation({ wght: targetWeightNum });
+      this.fontkitFonts.set(k, variationFont);
+      console.log(
+        `\u2705 Derived variable font: ${targetFamily} weight=${targetWeightNum} from existing registration`
+      );
+    } catch (err) {
+      this.fontkitFonts.set(k, baseFkFont);
+      console.warn(`\u26A0\uFE0F Could not apply weight variation, using base font for ${targetFamily}`);
+    }
+    return font;
+  }
   async getFace(desc) {
     try {
       if (!this.hb) await this.init();
@@ -595,6 +707,10 @@ var FontRegistry = class _FontRegistry {
         const installed = await this.tryFallbackInstall(desc);
         face = installed ? this.faces.get(k) : void 0;
       }
+      if (!face) {
+        await this.tryDeriveFromExistingFont(desc);
+        face = this.faces.get(k);
+      }
       return face;
     } catch (err) {
       throw new Error(
@@ -665,6 +781,9 @@ var FontRegistry = class _FontRegistry {
       this.faces.clear();
       this.blobs.clear();
       this.fontkitFonts.clear();
+      this.fontkitBaseFonts.clear();
+      this.colorEmojiFonts.clear();
+      this.colorEmojiFontBytes.clear();
       this.hb = void 0;
       this.initPromise = void 0;
     } catch (err) {
@@ -789,7 +908,10 @@ var LayoutEngine = class {
         const charIndex = g.cl;
         let char;
         if (charIndex >= 0 && charIndex < input.length) {
-          char = input[charIndex];
+          const codePoint = input.codePointAt(charIndex);
+          if (codePoint !== void 0) {
+            char = String.fromCodePoint(codePoint);
+          }
         }
         return {
           id: g.g,
@@ -974,13 +1096,27 @@ async function buildDrawOps(p) {
       });
     }
     for (const glyph of line.glyphs) {
+      const glyphX = xCursor + glyph.xOffset;
+      const glyphY = baselineY + glyph.yOffset;
+      const glyphFamily = glyph.fontDesc?.family;
+      const isColorEmoji = glyph.isColorEmoji || glyphFamily && p.isColorEmojiFont && p.isColorEmojiFont(glyphFamily);
+      if (isColorEmoji && glyph.char) {
+        textOps.push({
+          op: "DrawColorEmoji",
+          char: glyph.char,
+          x: glyphX,
+          y: glyphY,
+          fontSize: p.font.size,
+          fontFamily: glyphFamily || "NotoColorEmoji"
+        });
+        xCursor += glyph.xAdvance;
+        continue;
+      }
       const path = await p.glyphPathProvider(glyph.id, glyph.fontDesc);
       if (!path || path === "M 0 0") {
         xCursor += glyph.xAdvance;
         continue;
       }
-      const glyphX = xCursor + glyph.xOffset;
-      const glyphY = baselineY + glyph.yOffset;
       const pb = computePathBounds(path);
       const x1 = glyphX + scale * pb.x;
       const x2 = glyphX + scale * (pb.x + pb.w);
@@ -1955,6 +2091,16 @@ async function createNodePainter(opts) {
           });
           continue;
         }
+        if (op.op === "DrawColorEmoji") {
+          renderToBoth((context) => {
+            context.save();
+            context.font = `${op.fontSize}px "${op.fontFamily}"`;
+            context.textBaseline = "alphabetic";
+            context.fillText(op.char, op.x, op.y);
+            context.restore();
+          });
+          continue;
+        }
       }
       if (needsAlphaExtraction) {
         const whiteData = ctx.getImageData(0, 0, canvas.width, canvas.height);
@@ -2421,6 +2567,24 @@ var isGlyphFill2 = (op) => {
 };
 
 // src/env/entry.node.ts
+var registeredGlobalFonts = /* @__PURE__ */ new Set();
+async function registerColorEmojiWithCanvas(family, bytes) {
+  if (registeredGlobalFonts.has(family)) {
+    return;
+  }
+  try {
+    const canvasMod = await import("canvas");
+    const GlobalFonts = canvasMod.GlobalFonts;
+    if (GlobalFonts && typeof GlobalFonts.register === "function") {
+      const buffer = Buffer.from(bytes);
+      GlobalFonts.register(buffer, family);
+      registeredGlobalFonts.add(family);
+      console.log(`\u{1F3A8} Registered color emoji font with canvas: ${family}`);
+    }
+  } catch (err) {
+    console.warn(`\u26A0\uFE0F Could not register color emoji font with canvas GlobalFonts: ${err}`);
+  }
+}
 async function createTextEngine(opts = {}) {
   const width = opts.width ?? CANVAS_CONFIG.DEFAULTS.width;
   const height = opts.height ?? CANVAS_CONFIG.DEFAULTS.height;
@@ -2447,6 +2611,12 @@ async function createTextEngine(opts = {}) {
               family: cf.family,
               weight: cf.weight ?? "400"
             });
+            if (fonts.isColorEmojiFont(cf.family)) {
+              const emojiBytes = fonts.getColorEmojiFontBytes(cf.family);
+              if (emojiBytes) {
+                await registerColorEmojiWithCanvas(cf.family, emojiBytes);
+              }
+            }
           } catch (err) {
             throw new Error(
               `Failed to load custom font "${cf.family}" from ${cf.src}: ${err instanceof Error ? err.message : String(err)}`
@@ -2504,12 +2674,17 @@ async function createTextEngine(opts = {}) {
         const desc = { family: main.family, weight: `${main.weight}` };
         let lines;
         try {
-          const emojiDesc = { family: "NotoEmoji", weight: "400" };
-          let emojiAvailable = false;
-          try {
-            await fonts.getFace(emojiDesc);
-            emojiAvailable = true;
-          } catch {
+          let emojiFallback = void 0;
+          const colorEmojiFamilies = fonts.getColorEmojiFontFamilies();
+          if (colorEmojiFamilies.length > 0) {
+            emojiFallback = { family: colorEmojiFamilies[0], weight: "400" };
+          } else {
+            const notoEmojiDesc = { family: "NotoEmoji", weight: "400" };
+            try {
+              await fonts.getFace(notoEmojiDesc);
+              emojiFallback = notoEmojiDesc;
+            } catch {
+            }
           }
           const padding2 = asset.padding ? typeof asset.padding === "number" ? {
             top: asset.padding,
@@ -2525,7 +2700,7 @@ async function createTextEngine(opts = {}) {
             lineHeight: asset.style?.lineHeight ?? 1.2,
             desc,
             textTransform: asset.style?.textTransform ?? "none",
-            emojiFallback: emojiAvailable ? emojiDesc : void 0
+            emojiFallback
           });
         } catch (err) {
           throw new Error(
@@ -2580,7 +2755,8 @@ async function createTextEngine(opts = {}) {
             border: asset.border,
             padding: asset.padding,
             glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
-            getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
+            getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc),
+            isColorEmojiFont: (family) => fonts.isColorEmojiFont(family)
           });
         } catch (err) {
           throw new Error(

package/dist/entry.web.d.ts

@@ -156,6 +156,7 @@ type Glyph = {
         family: string;
         weight?: string | number;
     };
+    isColorEmoji?: boolean;
 };
 type ShapedLine = {
     glyphs: Glyph[];
@@ -229,6 +230,13 @@ type DrawOp = {
         opacity: number;
     };
     borderRadius?: number;
+} | {
+    op: "DrawColorEmoji";
+    char: string;
+    x: number;
+    y: number;
+    fontSize: number;
+    fontFamily: string;
 };
 type EngineInit = {
     width: number;

package/dist/entry.web.js

@@ -404,6 +404,9 @@ var _FontRegistry = class _FontRegistry {
     __publicField(this, "fonts", /* @__PURE__ */ new Map());
     __publicField(this, "blobs", /* @__PURE__ */ new Map());
     __publicField(this, "fontkitFonts", /* @__PURE__ */ new Map());
+    __publicField(this, "fontkitBaseFonts", /* @__PURE__ */ new Map());
+    __publicField(this, "colorEmojiFonts", /* @__PURE__ */ new Set());
+    __publicField(this, "colorEmojiFontBytes", /* @__PURE__ */ new Map());
     __publicField(this, "wasmBaseURL");
     __publicField(this, "initPromise");
     __publicField(this, "emojiFallbackDesc");
@@ -465,6 +468,49 @@ var _FontRegistry = class _FontRegistry {
   setEmojiFallback(desc) {
     this.emojiFallbackDesc = desc;
   }
+  isColorEmojiFont(family) {
+    return this.colorEmojiFonts.has(family);
+  }
+  getColorEmojiFontBytes(family) {
+    return this.colorEmojiFontBytes.get(family);
+  }
+  getColorEmojiFontFamilies() {
+    return Array.from(this.colorEmojiFonts);
+  }
+  detectColorEmojiFont(fkFont) {
+    try {
+      if (fkFont.directory && fkFont.directory.tables) {
+        const tables = fkFont.directory.tables;
+        if (tables.CBDT || tables.CBLC) {
+          return true;
+        }
+        if (tables.sbix) {
+          return true;
+        }
+        if (tables.COLR && tables.CPAL) {
+          return true;
+        }
+        if (tables.SVG) {
+          return true;
+        }
+      }
+      if (fkFont.availableTables) {
+        const tables = fkFont.availableTables;
+        if (tables.includes("CBDT") || tables.includes("CBLC") || tables.includes("sbix") || tables.includes("COLR") && tables.includes("CPAL") || tables.includes("SVG")) {
+          return true;
+        }
+      }
+      if (fkFont._tables) {
+        const tableNames = Object.keys(fkFont._tables);
+        if (tableNames.includes("CBDT") || tableNames.includes("CBLC") || tableNames.includes("sbix") || tableNames.includes("COLR") && tableNames.includes("CPAL") || tableNames.includes("SVG")) {
+          return true;
+        }
+      }
+      return false;
+    } catch {
+      return false;
+    }
+  }
   async init() {
     if (this.initPromise) {
       await this.initPromise;
@@ -530,13 +576,29 @@ var _FontRegistry = class _FontRegistry {
       try {
         const buffer = typeof Buffer !== "undefined" ? Buffer.from(bytes) : new Uint8Array(bytes);
         const fkFont = fontkit.create(buffer);
+        const baseFontKey = desc.family;
+        if (!this.fontkitBaseFonts.has(baseFontKey)) {
+          this.fontkitBaseFonts.set(baseFontKey, fkFont);
+        }
+        const isColorEmojiFont = this.detectColorEmojiFont(fkFont);
+        if (isColorEmojiFont) {
+          this.colorEmojiFonts.add(desc.family);
+          if (!this.colorEmojiFontBytes.has(desc.family)) {
+            this.colorEmojiFontBytes.set(desc.family, bytes.slice(0));
+          }
+          console.log(`\u{1F3A8} Registered color emoji font: ${desc.family}`);
+        }
         if (fkFont.variationAxes && Object.keys(fkFont.variationAxes).length > 0) {
           const variationFont = fkFont.getVariation({ wght: weightNum });
           this.fontkitFonts.set(k, variationFont);
-          console.log(`\u2705 Registered variable font: ${desc.family} weight=${weightNum}`);
+          if (!isColorEmojiFont) {
+            console.log(`\u2705 Registered variable font: ${desc.family} weight=${weightNum}`);
+          }
         } else {
           this.fontkitFonts.set(k, fkFont);
-          console.log(`\u2705 Registered static font: ${desc.family}`);
+          if (!isColorEmojiFont) {
+            console.log(`\u2705 Registered static font: ${desc.family}`);
+          }
         }
       } catch (err) {
         console.warn(`\u26A0\uFE0F  Fontkit failed for ${desc.family}:`, err);
@@ -575,6 +637,9 @@ var _FontRegistry = class _FontRegistry {
         const installed = await this.tryFallbackInstall(desc);
         f = installed ? this.fonts.get(k) : void 0;
       }
+      if (!f) {
+        f = await this.tryDeriveFromExistingFont(desc);
+      }
       if (!f) throw new Error(`Font not registered for ${k}`);
       return f;
     } catch (err) {
@@ -586,6 +651,53 @@ var _FontRegistry = class _FontRegistry {
       );
     }
   }
+  async tryDeriveFromExistingFont(desc) {
+    const targetFamily = desc.family;
+    const targetWeight = normalizeWeight(desc.weight);
+    const targetWeightNum = parseInt(targetWeight, 10);
+    let existingBlob;
+    for (const [key, blob] of this.blobs) {
+      if (key.startsWith(`${targetFamily}__`)) {
+        existingBlob = blob;
+        break;
+      }
+    }
+    const baseFkFont = this.fontkitBaseFonts.get(targetFamily);
+    if (!existingBlob || !baseFkFont) {
+      return void 0;
+    }
+    const hasWeightAxis = baseFkFont.variationAxes && baseFkFont.variationAxes["wght"] !== void 0;
+    if (!hasWeightAxis) {
+      console.warn(
+        `Font ${targetFamily} is not a variable font, cannot derive weight ${targetWeight}`
+      );
+      return void 0;
+    }
+    const k = this.key(desc);
+    const face = this.hb.createFace(existingBlob, 0);
+    const font = this.hb.createFont(face);
+    const upem = face.upem || 1e3;
+    font.setScale(upem, upem);
+    if (typeof font.setVariations === "function") {
+      try {
+        font.setVariations(`wght=${targetWeightNum}`);
+      } catch (e) {
+      }
+    }
+    this.faces.set(k, face);
+    this.fonts.set(k, font);
+    try {
+      const variationFont = baseFkFont.getVariation({ wght: targetWeightNum });
+      this.fontkitFonts.set(k, variationFont);
+      console.log(
+        `\u2705 Derived variable font: ${targetFamily} weight=${targetWeightNum} from existing registration`
+      );
+    } catch (err) {
+      this.fontkitFonts.set(k, baseFkFont);
+      console.warn(`\u26A0\uFE0F Could not apply weight variation, using base font for ${targetFamily}`);
+    }
+    return font;
+  }
   async getFace(desc) {
     try {
       if (!this.hb) await this.init();
@@ -595,6 +707,10 @@ var _FontRegistry = class _FontRegistry {
         const installed = await this.tryFallbackInstall(desc);
         face = installed ? this.faces.get(k) : void 0;
       }
+      if (!face) {
+        await this.tryDeriveFromExistingFont(desc);
+        face = this.faces.get(k);
+      }
       return face;
     } catch (err) {
       throw new Error(
@@ -665,6 +781,9 @@ var _FontRegistry = class _FontRegistry {
       this.faces.clear();
       this.blobs.clear();
       this.fontkitFonts.clear();
+      this.fontkitBaseFonts.clear();
+      this.colorEmojiFonts.clear();
+      this.colorEmojiFontBytes.clear();
       this.hb = void 0;
       this.initPromise = void 0;
     } catch (err) {
@@ -794,7 +913,10 @@ var LayoutEngine = class {
         const charIndex = g.cl;
         let char;
         if (charIndex >= 0 && charIndex < input.length) {
-          char = input[charIndex];
+          const codePoint = input.codePointAt(charIndex);
+          if (codePoint !== void 0) {
+            char = String.fromCodePoint(codePoint);
+          }
         }
         return {
           id: g.g,
@@ -979,13 +1101,27 @@ async function buildDrawOps(p) {
       });
     }
     for (const glyph of line.glyphs) {
+      const glyphX = xCursor + glyph.xOffset;
+      const glyphY = baselineY + glyph.yOffset;
+      const glyphFamily = glyph.fontDesc?.family;
+      const isColorEmoji = glyph.isColorEmoji || glyphFamily && p.isColorEmojiFont && p.isColorEmojiFont(glyphFamily);
+      if (isColorEmoji && glyph.char) {
+        textOps.push({
+          op: "DrawColorEmoji",
+          char: glyph.char,
+          x: glyphX,
+          y: glyphY,
+          fontSize: p.font.size,
+          fontFamily: glyphFamily || "NotoColorEmoji"
+        });
+        xCursor += glyph.xAdvance;
+        continue;
+      }
       const path = await p.glyphPathProvider(glyph.id, glyph.fontDesc);
       if (!path || path === "M 0 0") {
         xCursor += glyph.xAdvance;
         continue;
       }
-      const glyphX = xCursor + glyph.xOffset;
-      const glyphY = baselineY + glyph.yOffset;
       const pb = computePathBounds(path);
       const x1 = glyphX + scale * pb.x;
       const x2 = glyphX + scale * (pb.x + pb.w);
@@ -1913,6 +2049,14 @@ function createWebPainter(canvas) {
           ctx.restore();
           continue;
         }
+        if (op.op === "DrawColorEmoji") {
+          ctx.save();
+          ctx.font = `${op.fontSize}px "${op.fontFamily}"`;
+          ctx.textBaseline = "alphabetic";
+          ctx.fillText(op.char, op.x, op.y);
+          ctx.restore();
+          continue;
+        }
       }
     }
   };
@@ -2213,12 +2357,17 @@ async function createTextEngine(opts = {}) {
         const desc = { family: main.family, weight: `${main.weight}` };
         let lines;
         try {
-          const emojiDesc = { family: "NotoEmoji", weight: "400" };
-          let emojiAvailable = false;
-          try {
-            await fonts.getFace(emojiDesc);
-            emojiAvailable = true;
-          } catch {
+          let emojiFallback = void 0;
+          const colorEmojiFamilies = fonts.getColorEmojiFontFamilies();
+          if (colorEmojiFamilies.length > 0) {
+            emojiFallback = { family: colorEmojiFamilies[0], weight: "400" };
+          } else {
+            const notoEmojiDesc = { family: "NotoEmoji", weight: "400" };
+            try {
+              await fonts.getFace(notoEmojiDesc);
+              emojiFallback = notoEmojiDesc;
+            } catch {
+            }
           }
           const padding2 = asset.padding ? typeof asset.padding === "number" ? {
             top: asset.padding,
@@ -2234,7 +2383,7 @@ async function createTextEngine(opts = {}) {
             lineHeight: asset.style?.lineHeight ?? 1.2,
             desc,
             textTransform: asset.style?.textTransform ?? "none",
-            emojiFallback: emojiAvailable ? emojiDesc : void 0
+            emojiFallback
           });
         } catch (err) {
           throw new Error(
@@ -2289,7 +2438,8 @@ async function createTextEngine(opts = {}) {
             border: asset.border,
             padding: asset.padding,
             glyphPathProvider: (gid, fontDesc) => fonts.glyphPath(fontDesc || desc, gid),
-            getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc)
+            getUnitsPerEm: (fontDesc) => fonts.getUnitsPerEm(fontDesc || desc),
+            isColorEmojiFont: (family) => fonts.isColorEmojiFont(family)
           });
         } catch (err) {
           throw new Error(

package/package.json

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