@shotstack/shotstack-canvas 1.0.2

package/.eslintrc.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  env: { es2022: true, node: true, browser: true },
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  extends: ["eslint:recommended", "prettier"],
+  rules: {}
+};

package/.prettierrc

@@ -0,0 +1 @@
+{ "singleQuote": false, "semi": true, "printWidth": 100 }

package/README.md

@@ -0,0 +1,13 @@
+# @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

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@shotstack/shotstack-canvas",
+  "version": "1.0.2",
+  "type": "module",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/entry.node.js",
+        "require": "./dist/entry.node.cjs"
+      },
+      "browser": "./dist/entry.web.js",
+      "default": "./dist/entry.web.js"
+    }
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "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"
+  },
+  "dependencies": {
+    "harfbuzzjs": "0.4.12",
+    "joi": "^17.13.3"
+  },
+  "publishConfig": { "access": "public" },
+  "devDependencies": {
+    "@types/fluent-ffmpeg": "2.1.27",
+    "@types/node": "^20.14.10",
+    "canvas": "^2.11.2",
+    "ffmpeg-static": "^5.2.0",
+    "fluent-ffmpeg": "^2.1.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"
+  },
+  "peerDependencies": {
+    "canvas": "^2.11.2"
+  },
+  "peerDependenciesMeta": {
+    "canvas": {
+      "optional": true
+    }
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - "packages/*"
+  - "examples/*"

package/scripts/vendor-harfbuzz.js

@@ -0,0 +1,64 @@
+/* eslint-disable no-console */
+import fs from "node:fs";
+import path from "node:path";
+import url from "node:url";
+import { createRequire } from "node:module";
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+
+function findHbWasm(pkgRoot) {
+  const candidates = [
+    "hb.wasm",
+    "harfbuzz.wasm",
+    "dist/hb.wasm",
+    "dist/harfbuzz.wasm"
+  ];
+  for (const c of candidates) {
+    const p = path.join(pkgRoot, c);
+    if (fs.existsSync(p)) return p;
+  }
+  // shallow scan
+  for (const f of fs.readdirSync(pkgRoot)) {
+    if (f.endsWith(".wasm") && /hb|harfbuzz/i.test(f)) return path.join(pkgRoot, f);
+  }
+  return null;
+}
+
+async function resolveFromImportMeta(specifier) {
+  // Node >=20 supports import.meta.resolve; fallback to createRequire for Node 18/19
+  if (typeof import.meta.resolve === "function") {
+    try {
+      return await import.meta.resolve(specifier);
+    } catch {
+      // fall through
+    }
+  }
+  return require.resolve(specifier);
+}
+
+(async () => {
+  try {
+    // Resolve the harfbuzzjs package root
+    const hbPkgJsonUrl = await resolveFromImportMeta("harfbuzzjs/package.json");
+    const hbPkgRoot = path.dirname(
+      hbPkgJsonUrl.startsWith("file:") ? url.fileURLToPath(hbPkgJsonUrl) : hbPkgJsonUrl
+    );
+
+    // Try common paths; if not found, scan
+    const wasmSrc = findHbWasm(hbPkgRoot);
+    if (!wasmSrc) {
+      console.error("[vendor-harfbuzz] Could not locate hb.wasm inside harfbuzzjs package.");
+      process.exit(1);
+    }
+
+    const destDir = path.join(__dirname, "..", "assets", "wasm");
+    fs.mkdirSync(destDir, { recursive: true });
+    const wasmDest = path.join(destDir, "hb.wasm");
+    fs.copyFileSync(wasmSrc, wasmDest);
+    console.log(`[vendor-harfbuzz] Vendored ${wasmSrc} -> ${wasmDest}`);
+  } catch (e) {
+    console.error("[vendor-harfbuzz] Failed:", e);
+    process.exit(1);
+  }
+})();

package/src/config/canvas-constants.ts

@@ -0,0 +1,30 @@
+export const CANVAS_CONFIG = {
+  DEFAULTS: {
+    width: 800,
+    height: 400,
+    pixelRatio: 2,
+    fontFamily: "Roboto",
+    fontSize: 48,
+    color: "#000000",
+    textAlign: "left" as const
+  },
+  LIMITS: {
+    minWidth: 1,
+    maxWidth: 4096,
+    minHeight: 1,
+    maxHeight: 4096,
+    minFontSize: 1,
+    maxFontSize: 512,
+    minDuration: 0.1,
+    maxDuration: 120,
+    maxTextLength: 10000
+  },
+  ANIMATION_TYPES: [
+    "typewriter",
+    "fadeIn",
+    "slideIn",
+    "shift",
+    "ascend",
+    "movingLetters"
+  ] as const
+};