@shotstack/shotstack-canvas 1.0.2 → 1.0.4

package/dist/entry.web.js

@@ -0,0 +1,1285 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/schema/asset-schema.ts
+import Joi from "joi";
+
+// src/config/canvas-constants.ts
+var CANVAS_CONFIG = {
+  DEFAULTS: {
+    width: 800,
+    height: 400,
+    pixelRatio: 2,
+    fontFamily: "Roboto",
+    fontSize: 48,
+    color: "#000000",
+    textAlign: "left"
+  },
+  LIMITS: {
+    minWidth: 1,
+    maxWidth: 4096,
+    minHeight: 1,
+    maxHeight: 4096,
+    minFontSize: 1,
+    maxFontSize: 512,
+    minDuration: 0.1,
+    maxDuration: 120,
+    maxTextLength: 1e4
+  },
+  ANIMATION_TYPES: [
+    "typewriter",
+    "fadeIn",
+    "slideIn",
+    "shift",
+    "ascend",
+    "movingLetters"
+  ]
+};
+
+// src/schema/asset-schema.ts
+var HEX6 = /^#[A-Fa-f0-9]{6}$/;
+var gradientSchema = Joi.object({
+  type: Joi.string().valid("linear", "radial").default("linear"),
+  angle: Joi.number().min(0).max(360).default(0),
+  stops: Joi.array().items(
+    Joi.object({
+      offset: Joi.number().min(0).max(1).required(),
+      color: Joi.string().pattern(HEX6).required()
+    }).unknown(false)
+  ).min(2).required()
+}).unknown(false);
+var shadowSchema = Joi.object({
+  offsetX: Joi.number().default(0),
+  offsetY: Joi.number().default(0),
+  blur: Joi.number().min(0).default(0),
+  color: Joi.string().pattern(HEX6).default("#000000"),
+  opacity: Joi.number().min(0).max(1).default(0.5)
+}).unknown(false);
+var strokeSchema = Joi.object({
+  width: Joi.number().min(0).default(0),
+  color: Joi.string().pattern(HEX6).default("#000000"),
+  opacity: Joi.number().min(0).max(1).default(1)
+}).unknown(false);
+var fontSchema = Joi.object({
+  family: Joi.string().default(CANVAS_CONFIG.DEFAULTS.fontFamily),
+  size: Joi.number().min(CANVAS_CONFIG.LIMITS.minFontSize).max(CANVAS_CONFIG.LIMITS.maxFontSize).default(CANVAS_CONFIG.DEFAULTS.fontSize),
+  weight: Joi.alternatives().try(Joi.string(), Joi.number()).default("400"),
+  style: Joi.string().valid("normal", "italic", "oblique").default("normal"),
+  color: Joi.string().pattern(HEX6).default(CANVAS_CONFIG.DEFAULTS.color),
+  opacity: Joi.number().min(0).max(1).default(1)
+}).unknown(false);
+var styleSchema = Joi.object({
+  letterSpacing: Joi.number().default(0),
+  lineHeight: Joi.number().min(0).max(10).default(1.2),
+  textTransform: Joi.string().valid("none", "uppercase", "lowercase", "capitalize").default("none"),
+  textDecoration: Joi.string().valid("none", "underline", "line-through").default("none"),
+  gradient: gradientSchema.optional()
+}).unknown(false);
+var alignmentSchema = Joi.object({
+  horizontal: Joi.string().valid("left", "center", "right").default(CANVAS_CONFIG.DEFAULTS.textAlign),
+  vertical: Joi.string().valid("top", "middle", "bottom").default("middle")
+}).unknown(false);
+var animationSchema = Joi.object({
+  preset: Joi.string().valid(...CANVAS_CONFIG.ANIMATION_TYPES),
+  speed: Joi.number().min(0.1).max(10).default(1),
+  duration: Joi.number().min(CANVAS_CONFIG.LIMITS.minDuration).max(CANVAS_CONFIG.LIMITS.maxDuration).optional(),
+  style: Joi.string().valid("character", "word").optional().when("preset", {
+    is: Joi.valid("typewriter", "shift"),
+    then: Joi.optional(),
+    otherwise: Joi.forbidden()
+  }),
+  direction: Joi.string().optional().when("preset", {
+    switch: [
+      { is: "ascend", then: Joi.valid("up", "down") },
+      { is: "shift", then: Joi.valid("left", "right", "up", "down") },
+      { is: "slideIn", then: Joi.valid("left", "right", "up", "down") },
+      { is: "movingLetters", then: Joi.valid("left", "right", "up", "down") }
+    ],
+    otherwise: Joi.forbidden()
+  })
+}).unknown(false);
+var backgroundSchema = Joi.object({
+  color: Joi.string().pattern(HEX6).optional(),
+  opacity: Joi.number().min(0).max(1).default(1),
+  borderRadius: Joi.number().min(0).default(0)
+}).unknown(false);
+var customFontSchema = Joi.object({
+  src: Joi.string().uri().required(),
+  family: Joi.string().required(),
+  weight: Joi.alternatives().try(Joi.string(), Joi.number()).optional(),
+  style: Joi.string().optional(),
+  originalFamily: Joi.string().optional()
+}).unknown(false);
+var RichTextAssetSchema = Joi.object({
+  type: Joi.string().valid("rich-text").required(),
+  text: Joi.string().allow("").max(CANVAS_CONFIG.LIMITS.maxTextLength).default(""),
+  width: Joi.number().min(CANVAS_CONFIG.LIMITS.minWidth).max(CANVAS_CONFIG.LIMITS.maxWidth).default(CANVAS_CONFIG.DEFAULTS.width).optional(),
+  height: Joi.number().min(CANVAS_CONFIG.LIMITS.minHeight).max(CANVAS_CONFIG.LIMITS.maxHeight).default(CANVAS_CONFIG.DEFAULTS.height).optional(),
+  font: fontSchema.optional(),
+  style: styleSchema.optional(),
+  stroke: strokeSchema.optional(),
+  shadow: shadowSchema.optional(),
+  background: backgroundSchema.optional(),
+  align: alignmentSchema.optional(),
+  animation: animationSchema.optional(),
+  customFonts: Joi.array().items(customFontSchema).optional(),
+  cacheEnabled: Joi.boolean().default(true),
+  pixelRatio: Joi.number().min(1).max(3).default(CANVAS_CONFIG.DEFAULTS.pixelRatio)
+}).unknown(false);
+
+// src/wasm/hb-loader.ts
+var hbSingleton = null;
+async function initHB(wasmBaseURL) {
+  if (hbSingleton) return hbSingleton;
+  const harfbuzzjs = await import("harfbuzzjs");
+  const hbPromise = harfbuzzjs.default;
+  if (typeof hbPromise === "function") {
+    hbSingleton = await hbPromise();
+  } else if (hbPromise && typeof hbPromise.then === "function") {
+    hbSingleton = await hbPromise;
+  } else {
+    hbSingleton = hbPromise;
+  }
+  if (!hbSingleton || typeof hbSingleton.createBuffer !== "function") {
+    throw new Error("Failed to initialize HarfBuzz: invalid API");
+  }
+  return hbSingleton;
+}
+
+// src/core/font-registry.ts
+var FontRegistry = class {
+  constructor(wasmBaseURL) {
+    __publicField(this, "hb");
+    __publicField(this, "faces", /* @__PURE__ */ new Map());
+    __publicField(this, "fonts", /* @__PURE__ */ new Map());
+    __publicField(this, "blobs", /* @__PURE__ */ new Map());
+    __publicField(this, "wasmBaseURL");
+    this.wasmBaseURL = wasmBaseURL;
+  }
+  async init() {
+    if (!this.hb) this.hb = await initHB(this.wasmBaseURL);
+  }
+  getHB() {
+    if (!this.hb) throw new Error("FontRegistry not initialized - call init() first");
+    return this.hb;
+  }
+  key(desc) {
+    return `${desc.family}__${desc.weight ?? "400"}__${desc.style ?? "normal"}`;
+  }
+  async registerFromBytes(bytes, desc) {
+    if (!this.hb) await this.init();
+    const k = this.key(desc);
+    if (this.fonts.has(k)) return;
+    const blob = this.hb.createBlob(bytes);
+    const face = this.hb.createFace(blob, 0);
+    const font = this.hb.createFont(face);
+    const upem = face.upem || 1e3;
+    font.setScale(upem, upem);
+    this.blobs.set(k, blob);
+    this.faces.set(k, face);
+    this.fonts.set(k, font);
+  }
+  getFont(desc) {
+    const k = this.key(desc);
+    const f = this.fonts.get(k);
+    if (!f) throw new Error(`Font not registered for ${k}`);
+    return f;
+  }
+  getFace(desc) {
+    const k = this.key(desc);
+    return this.faces.get(k);
+  }
+  /** NEW: expose units-per-em for scaling glyph paths to px */
+  getUnitsPerEm(desc) {
+    const face = this.getFace(desc);
+    return face?.upem || 1e3;
+  }
+  glyphPath(desc, glyphId) {
+    const font = this.getFont(desc);
+    const path = font.glyphToPath(glyphId);
+    return path && path !== "" ? path : "M 0 0";
+  }
+  destroy() {
+    for (const [, f] of this.fonts) f.destroy?.();
+    for (const [, f] of this.faces) f.destroy?.();
+    for (const [, b] of this.blobs) b.destroy?.();
+    this.fonts.clear();
+    this.faces.clear();
+    this.blobs.clear();
+  }
+};
+
+// src/core/layout.ts
+var LayoutEngine = class {
+  constructor(fonts) {
+    this.fonts = fonts;
+  }
+  transformText(t, tr) {
+    switch (tr) {
+      case "uppercase":
+        return t.toUpperCase();
+      case "lowercase":
+        return t.toLowerCase();
+      case "capitalize":
+        return t.replace(/\b\w/g, (c) => c.toUpperCase());
+      default:
+        return t;
+    }
+  }
+  shapeFull(text, desc) {
+    const hb = this.fonts.getHB();
+    const buffer = hb.createBuffer();
+    buffer.addText(text);
+    buffer.guessSegmentProperties();
+    const font = this.fonts.getFont(desc);
+    const face = this.fonts.getFace(desc);
+    const upem = face?.upem || 1e3;
+    font.setScale(upem, upem);
+    hb.shape(font, buffer);
+    const result = buffer.json();
+    buffer.destroy();
+    return result;
+  }
+  layout(params) {
+    const { textTransform, desc, fontSize, letterSpacing, width } = params;
+    const input = this.transformText(params.text, textTransform);
+    if (!input || input.length === 0) {
+      return [];
+    }
+    const shaped = this.shapeFull(input, desc);
+    const face = this.fonts.getFace(desc);
+    const upem = face?.upem || 1e3;
+    const scale = fontSize / upem;
+    const glyphs = shaped.map((g, i) => {
+      const charIndex = g.cl;
+      let char;
+      if (charIndex >= 0 && charIndex < input.length) {
+        char = input[charIndex];
+      }
+      return {
+        id: g.g,
+        xAdvance: g.ax * scale + letterSpacing,
+        xOffset: g.dx * scale,
+        yOffset: -g.dy * scale,
+        cluster: g.cl,
+        char
+        // This now correctly maps to the original character
+      };
+    });
+    const lines = [];
+    let currentLine = [];
+    let currentWidth = 0;
+    const spaceIndices = /* @__PURE__ */ new Set();
+    for (let i = 0; i < input.length; i++) {
+      if (input[i] === " ") {
+        spaceIndices.add(i);
+      }
+    }
+    let lastBreakIndex = -1;
+    for (let i = 0; i < glyphs.length; i++) {
+      const glyph = glyphs[i];
+      const glyphWidth = glyph.xAdvance;
+      if (glyph.char === "\n") {
+        if (currentLine.length > 0) {
+          lines.push({
+            glyphs: currentLine,
+            width: currentWidth,
+            y: 0
+          });
+        }
+        currentLine = [];
+        currentWidth = 0;
+        lastBreakIndex = i;
+        continue;
+      }
+      if (currentWidth + glyphWidth > width && currentLine.length > 0) {
+        if (lastBreakIndex > -1) {
+          const breakPoint = lastBreakIndex - (i - currentLine.length) + 1;
+          const nextLine = currentLine.splice(breakPoint);
+          const lineWidth = currentLine.reduce((sum, g) => sum + g.xAdvance, 0);
+          lines.push({
+            glyphs: currentLine,
+            width: lineWidth,
+            y: 0
+          });
+          currentLine = nextLine;
+          currentWidth = nextLine.reduce((sum, g) => sum + g.xAdvance, 0);
+        } else {
+          lines.push({
+            glyphs: currentLine,
+            width: currentWidth,
+            y: 0
+          });
+          currentLine = [];
+          currentWidth = 0;
+        }
+        lastBreakIndex = -1;
+      }
+      currentLine.push(glyph);
+      currentWidth += glyphWidth;
+      if (spaceIndices.has(glyph.cluster)) {
+        lastBreakIndex = i;
+      }
+    }
+    if (currentLine.length > 0) {
+      lines.push({
+        glyphs: currentLine,
+        width: currentWidth,
+        y: 0
+      });
+    }
+    const lineHeight = params.lineHeight * fontSize;
+    for (let i = 0; i < lines.length; i++) {
+      lines[i].y = (i + 1) * lineHeight;
+    }
+    return lines;
+  }
+};
+
+// src/core/gradients.ts
+function gradientSpecFrom(g, opacity) {
+  if (g.type === "linear") {
+    return { kind: "linear", angle: g.angle, stops: g.stops, opacity };
+  } else {
+    return { kind: "radial", stops: g.stops, opacity };
+  }
+}
+
+// src/core/decoration.ts
+function decorationGeometry(kind, p) {
+  const thickness = Math.max(1, Math.round(p.fontSize * 0.05));
+  let y = p.baselineY + Math.round(p.fontSize * 0.1);
+  if (kind === "line-through") y = p.baselineY - Math.round(p.fontSize * 0.3);
+  return { x1: p.xStart, x2: p.xStart + p.lineWidth, y, width: thickness };
+}
+
+// src/core/drawops.ts
+function buildDrawOps(p) {
+  const ops = [];
+  ops.push({
+    op: "BeginFrame",
+    width: p.canvas.width,
+    height: p.canvas.height,
+    pixelRatio: p.canvas.pixelRatio,
+    clear: true,
+    bg: p.background ? { color: p.background.color, opacity: p.background.opacity, radius: p.background.borderRadius } : void 0
+  });
+  if (p.lines.length === 0) return ops;
+  const upem = Math.max(1, p.getUnitsPerEm?.() ?? 1e3);
+  const scale = p.font.size / upem;
+  const blockHeight = p.lines[p.lines.length - 1].y;
+  let blockY;
+  switch (p.align.vertical) {
+    case "top":
+      blockY = p.font.size;
+      break;
+    case "bottom":
+      blockY = p.textRect.height - blockHeight + p.font.size;
+      break;
+    case "middle":
+    default:
+      blockY = (p.textRect.height - blockHeight) / 2 + p.font.size;
+      break;
+  }
+  const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
+  const decoColor = p.style.gradient ? p.style.gradient.stops[p.style.gradient.stops.length - 1]?.color ?? p.font.color : p.font.color;
+  let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
+  for (const line of p.lines) {
+    let lineX;
+    switch (p.align.horizontal) {
+      case "left":
+        lineX = 0;
+        break;
+      case "right":
+        lineX = p.textRect.width - line.width;
+        break;
+      case "center":
+      default:
+        lineX = (p.textRect.width - line.width) / 2;
+        break;
+    }
+    let xCursor = lineX;
+    const baselineY = blockY + line.y - p.font.size;
+    for (const glyph of line.glyphs) {
+      const path = p.glyphPathProvider(glyph.id);
+      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);
+      const y1 = glyphY - scale * (pb.y + pb.h);
+      const y2 = glyphY - scale * pb.y;
+      if (x1 < gMinX) gMinX = x1;
+      if (y1 < gMinY) gMinY = y1;
+      if (x2 > gMaxX) gMaxX = x2;
+      if (y2 > gMaxY) gMaxY = y2;
+      if (p.shadow && p.shadow.blur > 0) {
+        ops.push({
+          isShadow: true,
+          op: "FillPath",
+          path,
+          x: glyphX + p.shadow.offsetX,
+          y: glyphY + p.shadow.offsetY,
+          // @ts-ignore scale propagated to painters
+          scale,
+          fill: { kind: "solid", color: p.shadow.color, opacity: p.shadow.opacity }
+        });
+      }
+      if (p.stroke && p.stroke.width > 0) {
+        ops.push({
+          op: "StrokePath",
+          path,
+          x: glyphX,
+          y: glyphY,
+          // @ts-ignore scale propagated to painters
+          scale,
+          width: p.stroke.width,
+          color: p.stroke.color,
+          opacity: p.stroke.opacity
+        });
+      }
+      ops.push({
+        op: "FillPath",
+        path,
+        x: glyphX,
+        y: glyphY,
+        // @ts-ignore scale propagated to painters
+        scale,
+        fill
+      });
+      xCursor += glyph.xAdvance;
+    }
+    if (p.style.textDecoration !== "none") {
+      const deco = decorationGeometry(p.style.textDecoration, {
+        baselineY,
+        fontSize: p.font.size,
+        lineWidth: line.width,
+        xStart: lineX
+      });
+      ops.push({
+        op: "DecorationLine",
+        from: { x: deco.x1, y: deco.y },
+        to: { x: deco.x2, y: deco.y },
+        width: deco.width,
+        color: decoColor,
+        opacity: p.font.opacity
+      });
+    }
+  }
+  if (gMinX !== Infinity) {
+    const gbox = { x: gMinX, y: gMinY, w: Math.max(1, gMaxX - gMinX), h: Math.max(1, gMaxY - gMinY) };
+    for (const op of ops) {
+      if (op.op === "FillPath" && !op.isShadow) {
+        op.gradientBBox = gbox;
+      }
+    }
+  }
+  return ops;
+}
+function tokenizePath(d) {
+  return d.match(/[MLCQZ]|-?\d*\.?\d+(?:e[-+]?\d+)?/gi) ?? [];
+}
+function computePathBounds(d) {
+  const t = tokenizePath(d);
+  let i = 0;
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  const touch = (x, y) => {
+    if (x < minX) minX = x;
+    if (y < minY) minY = y;
+    if (x > maxX) maxX = x;
+    if (y > maxY) maxY = y;
+  };
+  while (i < t.length) {
+    const cmd = t[i++];
+    switch (cmd) {
+      case "M":
+      case "L": {
+        const x = parseFloat(t[i++]);
+        const y = parseFloat(t[i++]);
+        touch(x, y);
+        break;
+      }
+      case "C": {
+        const c1x = parseFloat(t[i++]);
+        const c1y = parseFloat(t[i++]);
+        const c2x = parseFloat(t[i++]);
+        const c2y = parseFloat(t[i++]);
+        const x = parseFloat(t[i++]);
+        const y = parseFloat(t[i++]);
+        touch(c1x, c1y);
+        touch(c2x, c2y);
+        touch(x, y);
+        break;
+      }
+      case "Q": {
+        const cx = parseFloat(t[i++]);
+        const cy = parseFloat(t[i++]);
+        const x = parseFloat(t[i++]);
+        const y = parseFloat(t[i++]);
+        touch(cx, cy);
+        touch(x, y);
+        break;
+      }
+      case "Z":
+        break;
+    }
+  }
+  if (minX === Infinity) return { x: 0, y: 0, w: 0, h: 0 };
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+
+// src/core/animations.ts
+var DECORATION_DONE_THRESHOLD = 0.999;
+function applyAnimation(ops, lines, p) {
+  if (!p.anim || !p.anim.preset) return ops;
+  const { preset } = p.anim;
+  const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
+  const duration = p.anim.duration ?? Math.max(0.3, totalGlyphs / 30 / p.anim.speed);
+  const progress = Math.max(0, Math.min(1, p.t / duration));
+  switch (preset) {
+    case "typewriter":
+      return applyTypewriterAnimation(
+        ops,
+        lines,
+        progress,
+        p.anim.style,
+        p.fontSize,
+        p.t,
+        duration
+      );
+    case "fadeIn":
+      return applyFadeInAnimation(ops, progress);
+    case "slideIn":
+      return applySlideInAnimation(ops, progress, p.anim.direction ?? "left", p.fontSize);
+    case "shift":
+      return applyShiftAnimation(
+        ops,
+        lines,
+        progress,
+        p.anim.direction ?? "left",
+        p.fontSize,
+        p.anim.style,
+        duration
+      );
+    case "ascend":
+      return applyAscendAnimation(
+        ops,
+        lines,
+        progress,
+        p.anim.direction ?? "up",
+        p.fontSize,
+        duration
+      );
+    case "movingLetters":
+      return applyMovingLettersAnimation(ops, progress, p.anim.direction ?? "up", p.fontSize);
+    default:
+      return ops;
+  }
+}
+var isShadowFill = (op) => op.op === "FillPath" && op.isShadow === true;
+var isGlyphFill = (op) => op.op === "FillPath" && !op.isShadow === true;
+function getTextColorFromOps(ops) {
+  for (const op of ops) {
+    if (op.op === "FillPath") {
+      const fill = op.fill;
+      if (fill?.kind === "solid") return fill.color;
+      if ((fill?.kind === "linear" || fill?.kind === "radial") && Array.isArray(fill.stops) && fill.stops.length) {
+        return fill.stops[fill.stops.length - 1].color || "#000000";
+      }
+    }
+  }
+  return "#000000";
+}
+function applyTypewriterAnimation(ops, lines, progress, style, fontSize, time, duration) {
+  const byWord = style === "word";
+  if (byWord) {
+    const wordSegments = getWordSegments(lines);
+    const totalWords = wordSegments.length;
+    const visibleWords = Math.floor(progress * totalWords);
+    if (visibleWords === 0) return ops.filter((x) => x.op === "BeginFrame");
+    let totalVisibleGlyphs = 0;
+    for (let i = 0; i < Math.min(visibleWords, wordSegments.length); i++) {
+      totalVisibleGlyphs += wordSegments[i].glyphCount;
+    }
+    const visibleOpsRaw = sliceGlyphOps(ops, totalVisibleGlyphs);
+    const visibleOps = progress >= DECORATION_DONE_THRESHOLD ? visibleOpsRaw : visibleOpsRaw.filter((o) => o.op !== "DecorationLine");
+    if (progress < 1 && totalVisibleGlyphs > 0) {
+      return addTypewriterCursor(visibleOps, totalVisibleGlyphs, fontSize, time);
+    }
+    return visibleOps;
+  } else {
+    const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
+    const visibleGlyphs = Math.floor(progress * totalGlyphs);
+    if (visibleGlyphs === 0) return ops.filter((x) => x.op === "BeginFrame");
+    const visibleOpsRaw = sliceGlyphOps(ops, visibleGlyphs);
+    const visibleOps = progress >= DECORATION_DONE_THRESHOLD ? visibleOpsRaw : visibleOpsRaw.filter((o) => o.op !== "DecorationLine");
+    if (progress < 1 && visibleGlyphs > 0) {
+      return addTypewriterCursor(visibleOps, visibleGlyphs, fontSize, time);
+    }
+    return visibleOps;
+  }
+}
+function applyAscendAnimation(ops, lines, progress, direction, fontSize, duration) {
+  const wordSegments = getWordSegments(lines);
+  const totalWords = wordSegments.length;
+  if (totalWords === 0) return ops;
+  const result = [];
+  let glyphIndex = 0;
+  for (const op of ops) {
+    if (op.op === "BeginFrame") {
+      result.push(op);
+      break;
+    }
+  }
+  for (const op of ops) {
+    if (op.op === "FillPath" || op.op === "StrokePath") {
+      let wordIndex = -1, acc = 0;
+      for (let i = 0; i < wordSegments.length; i++) {
+        const gcount = wordSegments[i].glyphCount;
+        if (glyphIndex >= acc && glyphIndex < acc + gcount) {
+          wordIndex = i;
+          break;
+        }
+        acc += gcount;
+      }
+      if (wordIndex >= 0) {
+        const startF = wordIndex / Math.max(1, totalWords) * (duration / duration);
+        const endF = Math.min(1, startF + 0.3);
+        if (progress >= endF) {
+          result.push(op);
+        } else if (progress > startF) {
+          const local = (progress - startF) / Math.max(1e-6, endF - startF);
+          const ease = easeOutCubic(Math.min(1, local));
+          const startOffset = direction === "up" ? fontSize * 0.4 : -fontSize * 0.4;
+          const animated = { ...op, y: op.y + startOffset * (1 - ease) };
+          if (op.op === "FillPath") {
+            if (animated.fill.kind === "solid")
+              animated.fill = { ...animated.fill, opacity: animated.fill.opacity * ease };
+            else animated.fill = { ...animated.fill, opacity: (animated.fill.opacity ?? 1) * ease };
+          } else {
+            animated.opacity = animated.opacity * ease;
+          }
+          result.push(animated);
+        }
+      }
+      if (isGlyphFill(op)) glyphIndex++;
+    } else if (op.op === "DecorationLine") {
+      if (progress >= DECORATION_DONE_THRESHOLD) {
+        result.push(op);
+      }
+    }
+  }
+  return result;
+}
+function applyShiftAnimation(ops, lines, progress, direction, fontSize, style, duration) {
+  const byWord = style === "word";
+  const startOffsets = {
+    left: { x: fontSize * 0.6, y: 0 },
+    right: { x: -fontSize * 0.6, y: 0 },
+    up: { x: 0, y: fontSize * 0.6 },
+    down: { x: 0, y: -fontSize * 0.6 }
+  };
+  const offset = startOffsets[direction];
+  const wordSegments = byWord ? getWordSegments(lines) : [];
+  const totalGlyphs = lines.reduce((s, l) => s + l.glyphs.length, 0);
+  const totalUnits = byWord ? wordSegments.length : totalGlyphs;
+  if (totalUnits === 0) return ops;
+  const result = [];
+  for (const op of ops) {
+    if (op.op === "BeginFrame") {
+      result.push(op);
+      break;
+    }
+  }
+  const windowDuration = 0.3;
+  const overlapFactor = 0.7;
+  const staggerDelay = duration * overlapFactor / Math.max(1, totalUnits - 1);
+  const windowFor = (unitIdx) => {
+    const startTime = unitIdx * staggerDelay;
+    const startF = startTime / duration;
+    const endF = Math.min(1, (startTime + windowDuration) / duration);
+    return { startF, endF };
+  };
+  let glyphIndex = 0;
+  for (const op of ops) {
+    if (op.op !== "FillPath" && op.op !== "StrokePath") {
+      if (op.op === "DecorationLine" && progress > 0.8) result.push(op);
+      continue;
+    }
+    let unitIndex;
+    if (!byWord) {
+      unitIndex = glyphIndex;
+    } else {
+      let wordIndex = -1, acc = 0;
+      for (let i = 0; i < wordSegments.length; i++) {
+        const gcount = wordSegments[i].glyphCount;
+        if (glyphIndex >= acc && glyphIndex < acc + gcount) {
+          wordIndex = i;
+          break;
+        }
+        acc += gcount;
+      }
+      unitIndex = Math.max(0, wordIndex);
+    }
+    const { startF, endF } = windowFor(unitIndex);
+    if (progress <= startF) {
+      const animated = { ...op, x: op.x + offset.x, y: op.y + offset.y };
+      if (op.op === "FillPath") {
+        if (animated.fill.kind === "solid") animated.fill = { ...animated.fill, opacity: 0 };
+        else animated.fill = { ...animated.fill, opacity: 0 };
+      } else {
+        animated.opacity = 0;
+      }
+      result.push(animated);
+    } else if (progress >= endF) {
+      result.push(op);
+    } else {
+      const local = (progress - startF) / Math.max(1e-6, endF - startF);
+      const ease = easeOutCubic(Math.min(1, local));
+      const dx = offset.x * (1 - ease);
+      const dy = offset.y * (1 - ease);
+      const animated = { ...op, x: op.x + dx, y: op.y + dy };
+      if (op.op === "FillPath") {
+        const targetOpacity = animated.fill.kind === "solid" ? animated.fill.opacity : animated.fill.opacity ?? 1;
+        if (animated.fill.kind === "solid")
+          animated.fill = { ...animated.fill, opacity: targetOpacity * ease };
+        else animated.fill = { ...animated.fill, opacity: targetOpacity * ease };
+      } else {
+        animated.opacity = animated.opacity * ease;
+      }
+      result.push(animated);
+    }
+    if (isGlyphFill(op)) glyphIndex++;
+  }
+  return result;
+}
+function applyFadeInAnimation(ops, progress) {
+  const alpha = easeOutQuad(progress);
+  const scale = 0.95 + 0.05 * alpha;
+  return scaleAndFade(ops, alpha, scale);
+}
+function applySlideInAnimation(ops, progress, direction, fontSize) {
+  const easeProgress = easeOutCubic(progress);
+  const shift = shiftFor(1 - easeProgress, direction, fontSize * 2);
+  const alpha = easeOutQuad(progress);
+  return translateGlyphOps(ops, shift.dx, shift.dy, alpha);
+}
+function applyMovingLettersAnimation(ops, progress, direction, fontSize) {
+  const amp = fontSize * 0.3;
+  return waveTransform(ops, direction, amp, progress);
+}
+function getWordSegments(lines) {
+  const segments = [];
+  let totalGlyphIndex = 0;
+  for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+    const line = lines[lineIndex];
+    const words = segmentLineBySpaces(line);
+    for (const word of words) {
+      if (word.length > 0)
+        segments.push({ startGlyph: totalGlyphIndex, glyphCount: word.length, lineIndex });
+      totalGlyphIndex += word.length;
+    }
+  }
+  return segments;
+}
+function segmentLineBySpaces(line) {
+  const words = [];
+  let current = [];
+  for (const g of line.glyphs) {
+    const isSpace = g.char === " " || g.char === "	" || g.char === "\n";
+    if (isSpace) {
+      if (current.length) {
+        words.push([...current]);
+        current = [];
+      }
+    } else {
+      current.push(g);
+    }
+  }
+  if (current.length) words.push(current);
+  return words;
+}
+function sliceGlyphOps(ops, maxGlyphs) {
+  const result = [];
+  let glyphCount = 0;
+  let foundGlyphs = false;
+  for (const op of ops) {
+    if (op.op === "BeginFrame") {
+      result.push(op);
+      continue;
+    }
+    if (op.op === "FillPath" && !isShadowFill(op)) {
+      if (glyphCount < maxGlyphs) {
+        result.push(op);
+        foundGlyphs = true;
+      }
+      glyphCount++;
+      continue;
+    }
+    if (op.op === "StrokePath") {
+      if (glyphCount < maxGlyphs) result.push(op);
+      continue;
+    }
+    if (op.op === "FillPath" && isShadowFill(op)) {
+      if (glyphCount < maxGlyphs) result.push(op);
+      continue;
+    }
+    if (op.op === "DecorationLine" && foundGlyphs) {
+      result.push(op);
+      continue;
+    }
+  }
+  return result;
+}
+function addTypewriterCursor(ops, glyphCount, fontSize, time) {
+  const blinkRate = 2;
+  const cursorVisible = Math.floor(time * blinkRate * 2) % 2 === 0;
+  if (!cursorVisible || glyphCount === 0) return ops;
+  let last = null;
+  let count = 0;
+  for (const op of ops) {
+    if (op.op === "FillPath" && !isShadowFill(op)) {
+      count++;
+      if (count === glyphCount) {
+        last = op;
+        break;
+      }
+    }
+  }
+  if (last && last.op === "FillPath") {
+    const color = getTextColorFromOps(ops);
+    const cursorX = last.x + fontSize * 0.5;
+    const cursorY = last.y;
+    const cursorOp = {
+      op: "DecorationLine",
+      from: { x: cursorX, y: cursorY - fontSize * 0.7 },
+      to: { x: cursorX, y: cursorY + fontSize * 0.1 },
+      width: Math.max(2, fontSize / 25),
+      color,
+      opacity: 1
+    };
+    return [...ops, cursorOp];
+  }
+  return ops;
+}
+function scaleAndFade(ops, alpha, scale) {
+  let cx = 0, cy = 0, n = 0;
+  ops.forEach((op) => {
+    if (op.op === "FillPath") {
+      cx += op.x;
+      cy += op.y;
+      n++;
+    }
+  });
+  if (n > 0) {
+    cx /= n;
+    cy /= n;
+  }
+  return ops.map((op) => {
+    if (op.op === "FillPath") {
+      const out = { ...op };
+      if (out.fill.kind === "solid") out.fill = { ...out.fill, opacity: out.fill.opacity * alpha };
+      else out.fill = { ...out.fill, opacity: (out.fill.opacity ?? 1) * alpha };
+      if (scale !== 1 && n > 0) {
+        const dx = op.x - cx, dy = op.y - cy;
+        out.x = cx + dx * scale;
+        out.y = cy + dy * scale;
+      }
+      return out;
+    }
+    if (op.op === "StrokePath") {
+      const out = { ...op, opacity: op.opacity * alpha };
+      if (scale !== 1 && n > 0) {
+        const dx = op.x - cx, dy = op.y - cy;
+        out.x = cx + dx * scale;
+        out.y = cy + dy * scale;
+      }
+      return out;
+    }
+    if (op.op === "DecorationLine") return { ...op, opacity: op.opacity * alpha };
+    return op;
+  });
+}
+function translateGlyphOps(ops, dx, dy, alpha = 1) {
+  return ops.map((op) => {
+    if (op.op === "FillPath") {
+      const out = { ...op, x: op.x + dx, y: op.y + dy };
+      if (alpha < 1) {
+        if (out.fill.kind === "solid")
+          out.fill = { ...out.fill, opacity: out.fill.opacity * alpha };
+        else out.fill = { ...out.fill, opacity: (out.fill.opacity ?? 1) * alpha };
+      }
+      return out;
+    }
+    if (op.op === "StrokePath")
+      return { ...op, x: op.x + dx, y: op.y + dy, opacity: op.opacity * alpha };
+    if (op.op === "DecorationLine") {
+      return {
+        ...op,
+        from: { x: op.from.x + dx, y: op.from.y + dy },
+        to: { x: op.to.x + dx, y: op.to.y + dy },
+        opacity: op.opacity * alpha
+      };
+    }
+    return op;
+  });
+}
+function waveTransform(ops, dir, amp, p) {
+  let glyphIndex = 0;
+  return ops.map((op) => {
+    if (op.op === "FillPath" || op.op === "StrokePath") {
+      const phase = Math.sin(glyphIndex / 5 * Math.PI + p * Math.PI * 4);
+      const dx = dir === "left" || dir === "right" ? phase * amp * (dir === "left" ? -1 : 1) : 0;
+      const dy = dir === "up" || dir === "down" ? phase * amp * (dir === "up" ? -1 : 1) : 0;
+      const waveAlpha = Math.min(1, p * 2);
+      if (op.op === "FillPath") {
+        if (!isShadowFill(op)) glyphIndex++;
+        const out = { ...op, x: op.x + dx, y: op.y + dy };
+        if (out.fill.kind === "solid")
+          out.fill = { ...out.fill, opacity: out.fill.opacity * waveAlpha };
+        else out.fill = { ...out.fill, opacity: (out.fill.opacity ?? 1) * waveAlpha };
+        return out;
+      }
+      return { ...op, x: op.x + dx, y: op.y + dy, opacity: op.opacity * waveAlpha };
+    }
+    return op;
+  });
+}
+function shiftFor(progress, dir, dist) {
+  const d = progress * dist;
+  switch (dir) {
+    case "left":
+      return { dx: -d, dy: 0 };
+    case "right":
+      return { dx: d, dy: 0 };
+    case "up":
+      return { dx: 0, dy: -d };
+    case "down":
+      return { dx: 0, dy: d };
+  }
+}
+function easeOutQuad(t) {
+  return t * (2 - t);
+}
+function easeOutCubic(t) {
+  return 1 - Math.pow(1 - t, 3);
+}
+
+// src/core/colors.ts
+function parseHex6(hex, alpha = 1) {
+  const m = /^#?([a-f0-9]{6})$/i.exec(hex);
+  if (!m) throw new Error(`Invalid color ${hex}`);
+  const n = parseInt(m[1], 16);
+  const r = n >> 16 & 255;
+  const g = n >> 8 & 255;
+  const b = n & 255;
+  return { r, g, b, a: alpha };
+}
+
+// src/painters/web.ts
+function createWebPainter(canvas) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("2D context unavailable");
+  return {
+    async render(ops) {
+      const globalBox = computeGlobalTextBounds(ops);
+      for (const op of ops) {
+        if (op.op === "BeginFrame") {
+          const dpr = op.pixelRatio;
+          const w = op.width, h = op.height;
+          if ("width" in canvas && "height" in canvas) {
+            canvas.width = Math.floor(w * dpr);
+            canvas.height = Math.floor(h * dpr);
+          }
+          ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+          if (op.clear) ctx.clearRect(0, 0, w, h);
+          if (op.bg) {
+            const { color, opacity, radius } = op.bg;
+            if (color) {
+              const c = parseHex6(color, opacity);
+              ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
+              if (radius && radius > 0) {
+                drawRoundedRect(ctx, 0, 0, w, h, radius);
+                ctx.fill();
+              } else {
+                ctx.fillRect(0, 0, w, h);
+              }
+            }
+          }
+          continue;
+        }
+        if (op.op === "FillPath") {
+          const p = new Path2D(op.path);
+          ctx.save();
+          ctx.translate(op.x, op.y);
+          const s = op.scale ?? 1;
+          ctx.scale(s, -s);
+          const bbox = op.gradientBBox ?? globalBox;
+          const fill = makeGradientFromBBox(ctx, op.fill, bbox);
+          ctx.fillStyle = fill;
+          ctx.fill(p);
+          ctx.restore();
+          continue;
+        }
+        if (op.op === "StrokePath") {
+          const p = new Path2D(op.path);
+          ctx.save();
+          ctx.translate(op.x, op.y);
+          const s = op.scale ?? 1;
+          ctx.scale(s, -s);
+          const invAbs = 1 / Math.abs(s);
+          const c = parseHex6(op.color, op.opacity);
+          ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
+          ctx.lineWidth = op.width * invAbs;
+          ctx.lineJoin = "round";
+          ctx.lineCap = "round";
+          ctx.stroke(p);
+          ctx.restore();
+          continue;
+        }
+        if (op.op === "DecorationLine") {
+          ctx.save();
+          const c = parseHex6(op.color, op.opacity);
+          ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
+          ctx.lineWidth = op.width;
+          ctx.beginPath();
+          ctx.moveTo(op.from.x, op.from.y);
+          ctx.lineTo(op.to.x, op.to.y);
+          ctx.stroke();
+          ctx.restore();
+          continue;
+        }
+      }
+    }
+  };
+}
+function drawRoundedRect(ctx, x, y, w, h, r) {
+  const p = new Path2D();
+  p.moveTo(x + r, y);
+  p.arcTo(x + w, y, x + w, y + h, r);
+  p.arcTo(x + w, y + h, x, y + h, r);
+  p.arcTo(x, y + h, x, y, r);
+  p.arcTo(x, y, x + w, y, r);
+  p.closePath();
+  ctx.save();
+  ctx.fill(p);
+  ctx.restore();
+}
+function makeGradientFromBBox(ctx, spec, box) {
+  if (spec.kind === "solid") {
+    const c = parseHex6(spec.color, spec.opacity);
+    return `rgba(${c.r},${c.g},${c.b},${c.a})`;
+  }
+  const cx = box.x + box.w / 2, cy = box.y + box.h / 2, r = Math.max(box.w, box.h) / 2;
+  const addStops = (g) => {
+    const op = spec.opacity ?? 1;
+    for (const s of spec.stops) {
+      const c = parseHex6(s.color, op);
+      g.addColorStop(s.offset, `rgba(${c.r},${c.g},${c.b},${c.a})`);
+    }
+    return g;
+  };
+  if (spec.kind === "linear") {
+    const rad = (spec.angle || 0) * Math.PI / 180;
+    const x1 = cx + Math.cos(rad + Math.PI) * r;
+    const y1 = cy + Math.sin(rad + Math.PI) * r;
+    const x2 = cx + Math.cos(rad) * r;
+    const y2 = cy + Math.sin(rad) * r;
+    return addStops(ctx.createLinearGradient(x1, y1, x2, y2));
+  } else {
+    return addStops(ctx.createRadialGradient(cx, cy, 0, cx, cy, r));
+  }
+}
+function computeGlobalTextBounds(ops) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const op of ops) {
+    if (op.op !== "FillPath" || op.isShadow) continue;
+    const b = computePathBounds2(op.path);
+    const s = op.scale ?? 1;
+    const x1 = op.x + s * b.x;
+    const x2 = op.x + s * (b.x + b.w);
+    const y1 = op.y - s * (b.y + b.h);
+    const y2 = op.y - s * b.y;
+    if (x1 < minX) minX = x1;
+    if (y1 < minY) minY = y1;
+    if (x2 > maxX) maxX = x2;
+    if (y2 > maxY) maxY = y2;
+  }
+  if (minX === Infinity) return { x: 0, y: 0, w: 1, h: 1 };
+  return { x: minX, y: minY, w: Math.max(1, maxX - minX), h: Math.max(1, maxY - minY) };
+}
+function computePathBounds2(d) {
+  const tokens = tokenizePath2(d);
+  let i = 0;
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  const touch = (x, y) => {
+    if (x < minX) minX = x;
+    if (y < minY) minY = y;
+    if (x > maxX) maxX = x;
+    if (y > maxY) maxY = y;
+  };
+  while (i < tokens.length) {
+    const t = tokens[i++];
+    switch (t) {
+      case "M":
+      case "L": {
+        const x = parseFloat(tokens[i++]);
+        const y = parseFloat(tokens[i++]);
+        touch(x, y);
+        break;
+      }
+      case "C": {
+        const c1x = parseFloat(tokens[i++]);
+        const c1y = parseFloat(tokens[i++]);
+        const c2x = parseFloat(tokens[i++]);
+        const c2y = parseFloat(tokens[i++]);
+        const x = parseFloat(tokens[i++]);
+        const y = parseFloat(tokens[i++]);
+        touch(c1x, c1y);
+        touch(c2x, c2y);
+        touch(x, y);
+        break;
+      }
+      case "Q": {
+        const cx = parseFloat(tokens[i++]);
+        const cy = parseFloat(tokens[i++]);
+        const x = parseFloat(tokens[i++]);
+        const y = parseFloat(tokens[i++]);
+        touch(cx, cy);
+        touch(x, y);
+        break;
+      }
+      case "Z":
+        break;
+    }
+  }
+  if (minX === Infinity) return { x: 0, y: 0, w: 0, h: 0 };
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+function tokenizePath2(d) {
+  return d.match(/[MLCQZ]|-?\d*\.?\d+(?:e[-+]?\d+)?/gi) ?? [];
+}
+
+// src/io/web.ts
+async function fetchToArrayBuffer(url) {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Failed to fetch ${url}: ${res.status}`);
+  return await res.arrayBuffer();
+}
+
+// src/env/entry.web.ts
+async function createTextEngine(opts = {}) {
+  const width = opts.width ?? CANVAS_CONFIG.DEFAULTS.width;
+  const height = opts.height ?? CANVAS_CONFIG.DEFAULTS.height;
+  const pixelRatio = opts.pixelRatio ?? CANVAS_CONFIG.DEFAULTS.pixelRatio;
+  const wasmBaseURL = opts.wasmBaseURL;
+  const fonts = new FontRegistry(wasmBaseURL);
+  const layout = new LayoutEngine(fonts);
+  async function ensureFonts(asset) {
+    if (asset.customFonts) {
+      for (const cf of asset.customFonts) {
+        const bytes = await fetchToArrayBuffer(cf.src);
+        await fonts.registerFromBytes(bytes, {
+          family: cf.family,
+          weight: cf.weight ?? "400",
+          style: cf.style ?? "normal"
+        });
+      }
+    }
+    const main = asset.font ?? {
+      family: "Roboto",
+      weight: "400",
+      style: "normal",
+      size: 48,
+      color: "#000000",
+      opacity: 1
+    };
+    return main;
+  }
+  return {
+    validate(input) {
+      const { value, error } = RichTextAssetSchema.validate(input, {
+        abortEarly: false,
+        convert: true
+      });
+      if (error) throw error;
+      return { value };
+    },
+    async registerFontFromUrl(url, desc) {
+      const bytes = await fetchToArrayBuffer(url);
+      await fonts.registerFromBytes(bytes, desc);
+    },
+    async registerFontFromFile(source, desc) {
+      let bytes;
+      if (typeof source === "string") {
+        bytes = await fetchToArrayBuffer(source);
+      } else {
+        bytes = await source.arrayBuffer();
+      }
+      await fonts.registerFromBytes(bytes, desc);
+    },
+    async renderFrame(asset, tSeconds) {
+      const main = await ensureFonts(asset);
+      const desc = { family: main.family, weight: `${main.weight}`, style: main.style };
+      const lines = layout.layout({
+        text: asset.text,
+        width: asset.width ?? width,
+        letterSpacing: asset.style?.letterSpacing ?? 0,
+        fontSize: main.size,
+        lineHeight: asset.style?.lineHeight ?? 1.2,
+        desc,
+        textTransform: asset.style?.textTransform ?? "none"
+      });
+      const textRect = { x: 0, y: 0, width: asset.width ?? width, height: asset.height ?? height };
+      const ops0 = buildDrawOps({
+        canvas: { width, height, pixelRatio },
+        textRect,
+        lines,
+        font: {
+          family: main.family,
+          size: main.size,
+          weight: `${main.weight}`,
+          style: main.style,
+          color: main.color,
+          opacity: main.opacity
+        },
+        style: {
+          lineHeight: asset.style?.lineHeight ?? 1.2,
+          textDecoration: asset.style?.textDecoration ?? "none",
+          gradient: asset.style?.gradient
+        },
+        stroke: asset.stroke,
+        shadow: asset.shadow,
+        align: asset.align ?? { horizontal: "left", vertical: "middle" },
+        background: asset.background,
+        glyphPathProvider: (gid) => fonts.glyphPath(desc, gid),
+        /** NEW: provide UPEM so drawops can compute scale */
+        getUnitsPerEm: () => fonts.getUnitsPerEm(desc)
+      });
+      const ops = applyAnimation(ops0, lines, {
+        t: tSeconds,
+        fontSize: main.size,
+        anim: asset.animation ? {
+          preset: asset.animation.preset,
+          speed: asset.animation.speed,
+          duration: asset.animation.duration,
+          style: asset.animation.style,
+          direction: asset.animation.direction
+        } : void 0
+      });
+      return ops;
+    },
+    createRenderer(canvas) {
+      return createWebPainter(canvas);
+    }
+  };
+}
+export {
+  createTextEngine
+};
+//# sourceMappingURL=entry.web.js.map