@shotstack/shotstack-canvas 1.5.8 → 1.6.0

package/dist/entry.node.cjs

@@ -397,6 +397,37 @@ async function initHB(wasmBaseURL) {
 
 // src/core/font-registry.ts
 var fontkit = __toESM(require("fontkit"), 1);
+function normalizeWeight(weight) {
+  if (weight === void 0 || weight === null) return "400";
+  if (typeof weight === "number") return String(weight);
+  const lowerWeight = String(weight).toLowerCase().trim();
+  const weightMap = {
+    thin: "100",
+    hairline: "100",
+    extralight: "200",
+    ultralight: "200",
+    light: "300",
+    normal: "400",
+    regular: "400",
+    medium: "500",
+    semibold: "600",
+    demibold: "600",
+    bold: "700",
+    extrabold: "800",
+    ultrabold: "800",
+    black: "900",
+    heavy: "900"
+  };
+  if (weightMap[lowerWeight]) {
+    return weightMap[lowerWeight];
+  }
+  const numWeight = parseInt(String(weight), 10);
+  if (!isNaN(numWeight) && numWeight >= 100 && numWeight <= 900) {
+    return String(numWeight);
+  }
+  console.warn(`Invalid font weight "${weight}", defaulting to 400`);
+  return "400";
+}
 var FontRegistry = class _FontRegistry {
   hb;
   faces = /* @__PURE__ */ new Map();
@@ -454,7 +485,8 @@ var FontRegistry = class _FontRegistry {
     return this.hb;
   }
   key(desc) {
-    return `${desc.family}__${desc.weight ?? "400"}`;
+    const normalizedWeight = normalizeWeight(desc.weight);
+    return `${desc.family}__${normalizedWeight}`;
   }
   async registerFromBytes(bytes, desc) {
     try {
@@ -466,8 +498,8 @@ var FontRegistry = class _FontRegistry {
       const font = this.hb.createFont(face);
       const upem = face.upem || 1e3;
       font.setScale(upem, upem);
-      const weight = desc.weight ?? "400";
-      const weightNum = typeof weight === "string" ? parseInt(weight, 10) : weight;
+      const normalizedWeight = normalizeWeight(desc.weight);
+      const weightNum = parseInt(normalizedWeight, 10);
       if (weightNum !== 400 && typeof font.setVariations === "function") {
         try {
           font.setVariations(`wght=${weightNum}`);
@@ -501,14 +533,15 @@ var FontRegistry = class _FontRegistry {
     const loader = _FontRegistry.fallbackLoader;
     if (!loader) return false;
     try {
+      const normalizedWeight = normalizeWeight(desc.weight);
       const bytes = await loader({
         family: desc.family,
-        weight: desc.weight ?? "400"
+        weight: normalizedWeight
       });
       if (!bytes) return false;
       await this.registerFromBytes(bytes, {
         family: desc.family,
-        weight: desc.weight ?? "400"
+        weight: normalizedWeight
       });
       return true;
     } catch {
@@ -870,19 +903,20 @@ async function buildDrawOps(p) {
   const scale = p.font.size / upem;
   const numLines = p.lines.length;
   const lineHeightPx = p.font.size * p.style.lineHeight;
+  const textOffsetY = borderWidth + padding.top;
   let blockY;
   switch (p.align.vertical) {
     case "top":
-      blockY = p.font.size + padding.top;
+      blockY = p.font.size + textOffsetY;
       break;
     case "bottom":
-      blockY = p.textRect.height - (numLines - 1) * lineHeightPx + padding.top;
+      blockY = p.textRect.height - (numLines - 1) * lineHeightPx + textOffsetY;
       break;
     case "middle":
     default:
       const capHeightRatio = 0.35;
       const visualOffset = p.font.size * capHeightRatio;
-      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + padding.top;
+      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + textOffsetY;
       break;
   }
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
@@ -891,17 +925,18 @@ async function buildDrawOps(p) {
   const highlighterOps = [];
   let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
   for (const line of p.lines) {
+    const textOffsetX = borderWidth + padding.left;
     let lineX;
     switch (p.align.horizontal) {
       case "left":
-        lineX = padding.left;
+        lineX = textOffsetX;
         break;
       case "right":
-        lineX = p.textRect.width - line.width + padding.left;
+        lineX = p.textRect.width - line.width + textOffsetX;
         break;
       case "center":
       default:
-        lineX = (p.textRect.width - line.width) / 2 + padding.left;
+        lineX = (p.textRect.width - line.width) / 2 + textOffsetX;
         break;
     }
     let xCursor = lineX;
@@ -2481,8 +2516,9 @@ async function createTextEngine(opts = {}) {
           width: asset.width ?? width,
           height: asset.height ?? height
         };
-        const canvasW = (asset.width ?? width) + padding.left + padding.right;
-        const canvasH = (asset.height ?? height) + padding.top + padding.bottom;
+        const borderWidth = asset.border?.width ?? 0;
+        const canvasW = (asset.width ?? width) + padding.left + padding.right + borderWidth * 2;
+        const canvasH = (asset.height ?? height) + padding.top + padding.bottom + borderWidth * 2;
         const canvasPR = pixelRatio;
         let ops0;
         try {

package/dist/entry.node.js

@@ -358,6 +358,37 @@ async function initHB(wasmBaseURL) {
 
 // src/core/font-registry.ts
 import * as fontkit from "fontkit";
+function normalizeWeight(weight) {
+  if (weight === void 0 || weight === null) return "400";
+  if (typeof weight === "number") return String(weight);
+  const lowerWeight = String(weight).toLowerCase().trim();
+  const weightMap = {
+    thin: "100",
+    hairline: "100",
+    extralight: "200",
+    ultralight: "200",
+    light: "300",
+    normal: "400",
+    regular: "400",
+    medium: "500",
+    semibold: "600",
+    demibold: "600",
+    bold: "700",
+    extrabold: "800",
+    ultrabold: "800",
+    black: "900",
+    heavy: "900"
+  };
+  if (weightMap[lowerWeight]) {
+    return weightMap[lowerWeight];
+  }
+  const numWeight = parseInt(String(weight), 10);
+  if (!isNaN(numWeight) && numWeight >= 100 && numWeight <= 900) {
+    return String(numWeight);
+  }
+  console.warn(`Invalid font weight "${weight}", defaulting to 400`);
+  return "400";
+}
 var FontRegistry = class _FontRegistry {
   hb;
   faces = /* @__PURE__ */ new Map();
@@ -415,7 +446,8 @@ var FontRegistry = class _FontRegistry {
     return this.hb;
   }
   key(desc) {
-    return `${desc.family}__${desc.weight ?? "400"}`;
+    const normalizedWeight = normalizeWeight(desc.weight);
+    return `${desc.family}__${normalizedWeight}`;
   }
   async registerFromBytes(bytes, desc) {
     try {
@@ -427,8 +459,8 @@ var FontRegistry = class _FontRegistry {
       const font = this.hb.createFont(face);
       const upem = face.upem || 1e3;
       font.setScale(upem, upem);
-      const weight = desc.weight ?? "400";
-      const weightNum = typeof weight === "string" ? parseInt(weight, 10) : weight;
+      const normalizedWeight = normalizeWeight(desc.weight);
+      const weightNum = parseInt(normalizedWeight, 10);
       if (weightNum !== 400 && typeof font.setVariations === "function") {
         try {
           font.setVariations(`wght=${weightNum}`);
@@ -462,14 +494,15 @@ var FontRegistry = class _FontRegistry {
     const loader = _FontRegistry.fallbackLoader;
     if (!loader) return false;
     try {
+      const normalizedWeight = normalizeWeight(desc.weight);
       const bytes = await loader({
         family: desc.family,
-        weight: desc.weight ?? "400"
+        weight: normalizedWeight
       });
       if (!bytes) return false;
       await this.registerFromBytes(bytes, {
         family: desc.family,
-        weight: desc.weight ?? "400"
+        weight: normalizedWeight
       });
       return true;
     } catch {
@@ -831,19 +864,20 @@ async function buildDrawOps(p) {
   const scale = p.font.size / upem;
   const numLines = p.lines.length;
   const lineHeightPx = p.font.size * p.style.lineHeight;
+  const textOffsetY = borderWidth + padding.top;
   let blockY;
   switch (p.align.vertical) {
     case "top":
-      blockY = p.font.size + padding.top;
+      blockY = p.font.size + textOffsetY;
       break;
     case "bottom":
-      blockY = p.textRect.height - (numLines - 1) * lineHeightPx + padding.top;
+      blockY = p.textRect.height - (numLines - 1) * lineHeightPx + textOffsetY;
       break;
     case "middle":
     default:
       const capHeightRatio = 0.35;
       const visualOffset = p.font.size * capHeightRatio;
-      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + padding.top;
+      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + textOffsetY;
       break;
   }
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
@@ -852,17 +886,18 @@ async function buildDrawOps(p) {
   const highlighterOps = [];
   let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
   for (const line of p.lines) {
+    const textOffsetX = borderWidth + padding.left;
     let lineX;
     switch (p.align.horizontal) {
       case "left":
-        lineX = padding.left;
+        lineX = textOffsetX;
         break;
       case "right":
-        lineX = p.textRect.width - line.width + padding.left;
+        lineX = p.textRect.width - line.width + textOffsetX;
         break;
       case "center":
       default:
-        lineX = (p.textRect.width - line.width) / 2 + padding.left;
+        lineX = (p.textRect.width - line.width) / 2 + textOffsetX;
         break;
     }
     let xCursor = lineX;
@@ -2442,8 +2477,9 @@ async function createTextEngine(opts = {}) {
           width: asset.width ?? width,
           height: asset.height ?? height
         };
-        const canvasW = (asset.width ?? width) + padding.left + padding.right;
-        const canvasH = (asset.height ?? height) + padding.top + padding.bottom;
+        const borderWidth = asset.border?.width ?? 0;
+        const canvasW = (asset.width ?? width) + padding.left + padding.right + borderWidth * 2;
+        const canvasH = (asset.height ?? height) + padding.top + padding.bottom + borderWidth * 2;
         const canvasPR = pixelRatio;
         let ops0;
         try {

package/dist/entry.web.js

@@ -362,6 +362,37 @@ async function initHB(wasmBaseURL) {
 
 // src/core/font-registry.ts
 import * as fontkit from "fontkit";
+function normalizeWeight(weight) {
+  if (weight === void 0 || weight === null) return "400";
+  if (typeof weight === "number") return String(weight);
+  const lowerWeight = String(weight).toLowerCase().trim();
+  const weightMap = {
+    thin: "100",
+    hairline: "100",
+    extralight: "200",
+    ultralight: "200",
+    light: "300",
+    normal: "400",
+    regular: "400",
+    medium: "500",
+    semibold: "600",
+    demibold: "600",
+    bold: "700",
+    extrabold: "800",
+    ultrabold: "800",
+    black: "900",
+    heavy: "900"
+  };
+  if (weightMap[lowerWeight]) {
+    return weightMap[lowerWeight];
+  }
+  const numWeight = parseInt(String(weight), 10);
+  if (!isNaN(numWeight) && numWeight >= 100 && numWeight <= 900) {
+    return String(numWeight);
+  }
+  console.warn(`Invalid font weight "${weight}", defaulting to 400`);
+  return "400";
+}
 var _FontRegistry = class _FontRegistry {
   constructor(wasmBaseURL) {
     __publicField(this, "hb");
@@ -418,7 +449,8 @@ var _FontRegistry = class _FontRegistry {
     return this.hb;
   }
   key(desc) {
-    return `${desc.family}__${desc.weight ?? "400"}`;
+    const normalizedWeight = normalizeWeight(desc.weight);
+    return `${desc.family}__${normalizedWeight}`;
   }
   async registerFromBytes(bytes, desc) {
     try {
@@ -430,8 +462,8 @@ var _FontRegistry = class _FontRegistry {
       const font = this.hb.createFont(face);
       const upem = face.upem || 1e3;
       font.setScale(upem, upem);
-      const weight = desc.weight ?? "400";
-      const weightNum = typeof weight === "string" ? parseInt(weight, 10) : weight;
+      const normalizedWeight = normalizeWeight(desc.weight);
+      const weightNum = parseInt(normalizedWeight, 10);
       if (weightNum !== 400 && typeof font.setVariations === "function") {
         try {
           font.setVariations(`wght=${weightNum}`);
@@ -465,14 +497,15 @@ var _FontRegistry = class _FontRegistry {
     const loader = _FontRegistry.fallbackLoader;
     if (!loader) return false;
     try {
+      const normalizedWeight = normalizeWeight(desc.weight);
       const bytes = await loader({
         family: desc.family,
-        weight: desc.weight ?? "400"
+        weight: normalizedWeight
       });
       if (!bytes) return false;
       await this.registerFromBytes(bytes, {
         family: desc.family,
-        weight: desc.weight ?? "400"
+        weight: normalizedWeight
       });
       return true;
     } catch {
@@ -836,19 +869,20 @@ async function buildDrawOps(p) {
   const scale = p.font.size / upem;
   const numLines = p.lines.length;
   const lineHeightPx = p.font.size * p.style.lineHeight;
+  const textOffsetY = borderWidth + padding.top;
   let blockY;
   switch (p.align.vertical) {
     case "top":
-      blockY = p.font.size + padding.top;
+      blockY = p.font.size + textOffsetY;
       break;
     case "bottom":
-      blockY = p.textRect.height - (numLines - 1) * lineHeightPx + padding.top;
+      blockY = p.textRect.height - (numLines - 1) * lineHeightPx + textOffsetY;
       break;
     case "middle":
     default:
       const capHeightRatio = 0.35;
       const visualOffset = p.font.size * capHeightRatio;
-      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + padding.top;
+      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + textOffsetY;
       break;
   }
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
@@ -857,17 +891,18 @@ async function buildDrawOps(p) {
   const highlighterOps = [];
   let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
   for (const line of p.lines) {
+    const textOffsetX = borderWidth + padding.left;
     let lineX;
     switch (p.align.horizontal) {
       case "left":
-        lineX = padding.left;
+        lineX = textOffsetX;
         break;
       case "right":
-        lineX = p.textRect.width - line.width + padding.left;
+        lineX = p.textRect.width - line.width + textOffsetX;
         break;
       case "center":
       default:
-        lineX = (p.textRect.width - line.width) / 2 + padding.left;
+        lineX = (p.textRect.width - line.width) / 2 + textOffsetX;
         break;
     }
     let xCursor = lineX;
@@ -2153,8 +2188,9 @@ async function createTextEngine(opts = {}) {
           width: asset.width ?? width,
           height: asset.height ?? height
         };
-        const canvasW = (asset.width ?? width) + padding.left + padding.right;
-        const canvasH = (asset.height ?? height) + padding.top + padding.bottom;
+        const borderWidth = asset.border?.width ?? 0;
+        const canvasW = (asset.width ?? width) + padding.left + padding.right + borderWidth * 2;
+        const canvasH = (asset.height ?? height) + padding.top + padding.bottom + borderWidth * 2;
         const canvasPR = pixelRatio;
         let ops0;
         try {

package/package.json

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