@pixodesk/svg-animator-web 1.0.17 → 1.0.19

package/dist/index.umd.js

@@ -8,6 +8,7 @@ var PixodeskAnimator = (() => {
   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
   var __hasOwnProp = Object.prototype.hasOwnProperty;
   var __propIsEnum = Object.prototype.propertyIsEnumerable;
+  var __pow = Math.pow;
   var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues = (a, b) => {
     for (var prop in b || (b = {}))
@@ -83,7 +84,8 @@ var PixodeskAnimator = (() => {
     PxRetimeEffectSchema: () => PxRetimeEffectSchema,
     PxStrokeGradientEffectSchema: () => PxStrokeGradientEffectSchema,
     PxSvgNodeExtra: () => PxSvgNodeExtra,
-    PxTextAlongPathEffectSchema: () => PxTextAlongPathEffectSchema,
+    PxTextEffectSchema: () => PxTextEffectSchema,
+    PxTextPathEffectSchema: () => PxTextPathEffectSchema,
     PxTransformPartsSchema: () => PxTransformPartsSchema,
     PxTransformValueSchema: () => PxTransformValueSchema,
     PxTransformationEffectSchema: () => PxTransformationEffectSchema,
@@ -103,6 +105,7 @@ var PixodeskAnimator = (() => {
     describeSchema: () => describeSchema,
     diffInEffect: () => diffInEffect,
     evaluateMotionPathSegment: () => evaluateMotionPathSegment,
+    extendedPathForBrowser: () => extendedPathForBrowser,
     generateNewIds: () => generateNewIds,
     getAnimatorConfig: () => getAnimatorConfig,
     getBindings: () => getBindings,
@@ -111,9 +114,13 @@ var PixodeskAnimator = (() => {
     getNormalizedProps: () => getNormalizedProps,
     isPxElementFileFormat: () => isPxElementFileFormat,
     isPxElementFileFormatDeep: () => isPxElementFileFormatDeep,
+    jsonElementFactory: () => jsonElementFactory,
     loadTagAnimators: () => loadTagAnimators,
     materialiseAllInTree: () => materialiseAllInTree,
     materialiseAnimatedUseInstances: () => materialiseAnimatedUseInstances,
+    materialiseGlyphText: () => materialiseGlyphText,
+    materialiseGlyphTextAlongPath: () => materialiseGlyphTextAlongPath,
+    materialiseGlyphTextHorizontal: () => materialiseGlyphTextHorizontal,
     materialiseInternalLoopsInPropAnim: () => materialiseInternalLoopsInPropAnim,
     materialiseInternalLoopsInTree: () => materialiseInternalLoopsInTree,
     materialiseMotionPathInPropAnim: () => materialiseMotionPathInPropAnim,
@@ -124,6 +131,7 @@ var PixodeskAnimator = (() => {
     renderNode: () => renderNode,
     schemaKeys: () => schemaKeys,
     setupAnimationTriggers: () => setupAnimationTriggers,
+    shiftAnimatable: () => shiftAnimatable,
     toRGBA: () => toRGBA,
     validateNodeEffects: () => validateNodeEffects,
     visualModelAt: () => visualModelAt
@@ -1005,10 +1013,22 @@ var PixodeskAnimator = (() => {
     outAction: px.enum(["continue", "pause", "reset", "reverse"]).optional(),
     scrollIntoViewThreshold: px.number().optional()
   }));
+  var PxGlyphSchema = implementsInterface()(px.object({
+    width: px.number(),
+    d: px.string()
+  }));
+  var PxGlyphFontSchema = implementsInterface()(px.object({
+    fFamily: px.string(),
+    style: px.string(),
+    ascent: px.number(),
+    unitsPerEm: px.number(),
+    glyphs: px.record(PxGlyphSchema)
+  }));
   var PxDefsSchema = implementsInterface()(px.object({
     easings: px.record(px.tuple([px.number(), px.number(), px.number(), px.number()])).optional(),
     animations: px.record(PxAnimationDefinitionSchema).optional(),
-    styles: px.record(px.any()).optional()
+    styles: px.record(px.any()).optional(),
+    glyphs: px.record(PxGlyphFontSchema).optional()
   }));
   var PxAnimatorConfigSchema = implementsInterface()(px.object({
     mode: px.enum([PxAnimatorMode.auto, PxAnimatorMode.webapi, PxAnimatorMode.frames]).optional(),
@@ -1121,14 +1141,18 @@ var PixodeskAnimator = (() => {
     gradientTransform: px.string().optional()
   }));
   var PxStrokeGradientEffectSchema = PxFillGradientEffectSchema;
-  var PxTextAlongPathEffectSchema = implementsInterface()(px.object({
-    href: px.string(),
+  var PxTextPathEffectSchema = implementsInterface()(px.object({
+    path: px.string(),
+    pathOverflow: px.string().optional(),
     lengthAdjust: px.string().optional(),
     method: px.string().optional(),
     spacing: px.string().optional(),
     startOffset: PxAnimatableNumberSchema.optional(),
     textLength: PxAnimatableNumberSchema.optional()
   }));
+  var PxTextEffectSchema = implementsInterface()(px.object({
+    useGlyphs: px.boolean().optional()
+  }));
   var PxEffectsSchema = implementsInterface()(px.object({
     transformation: PxTransformationEffectSchema.optional(),
     repeater: PxRepeaterEffectSchema.optional(),
@@ -1138,7 +1162,8 @@ var PixodeskAnimator = (() => {
     isCombinedShape: px.boolean().optional(),
     fillGradient: PxFillGradientEffectSchema.optional(),
     strokeGradient: PxStrokeGradientEffectSchema.optional(),
-    textAlongPath: PxTextAlongPathEffectSchema.optional()
+    textPath: PxTextPathEffectSchema.optional(),
+    text: PxTextEffectSchema.optional()
   }));
   function validateNodeEffects(root, opts) {
     const warnings = [];
@@ -2010,48 +2035,6 @@ var PixodeskAnimator = (() => {
     }
   }
 
-  // src/effects/textAlongPathEffect.ts
-  function applyTextAlongPathEffect(node, fx, _ctx) {
-    var _a;
-    if (!fx) return node;
-    const href = typeof fx.href === "string" && !fx.href.startsWith("#") ? "#" + fx.href : fx.href;
-    const textPath = {
-      type: "textPath",
-      href,
-      children: (_a = node.children) != null ? _a : []
-    };
-    if (fx.lengthAdjust !== void 0) textPath.lengthAdjust = fx.lengthAdjust;
-    if (fx.method !== void 0) textPath.method = fx.method;
-    if (fx.spacing !== void 0) textPath.spacing = fx.spacing;
-    applyAnimatableNumber(textPath, "startOffset", fx.startOffset);
-    applyAnimatableNumber(textPath, "textLength", fx.textLength);
-    node.children = [textPath];
-    return node;
-  }
-  function applyAnimatableNumber(node, attrName, raw) {
-    if (raw === void 0 || raw === null) return;
-    if (typeof raw === "number") {
-      node[attrName] = String(raw);
-      return;
-    }
-    if (typeof raw === "object" && raw !== null) {
-      const obj = raw;
-      if (Array.isArray(obj.keyframes)) {
-        const prevAnimate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
-        const animate = __spreadValues({}, prevAnimate || {});
-        const block = { keyframes: obj.keyframes };
-        if (obj.loop !== void 0) block.loop = obj.loop;
-        animate[attrName] = block;
-        node.animate = animate;
-        return;
-      }
-      if (typeof obj.value === "number") {
-        node[attrName] = String(obj.value);
-        return;
-      }
-    }
-  }
-
   // src/PxAnimatorUtil.ts
   function bezierToSvgPath(path) {
     var _a, _b, _c, _d;
@@ -2424,6 +2407,24 @@ var PixodeskAnimator = (() => {
     }
     return { ts, ds };
   }
+  function bezier2D_tForDistance(lut, distance) {
+    const { ts, ds } = lut;
+    const last = ds.length - 1;
+    if (distance <= 0) return ts[0];
+    if (distance >= ds[last]) return ts[last];
+    let lo = 1;
+    let hi = last;
+    while (lo < hi) {
+      const mid = lo + hi >>> 1;
+      if (ds[mid] < distance) lo = mid + 1;
+      else hi = mid;
+    }
+    const dPrev = ds[hi - 1];
+    const dCur = ds[hi];
+    const span = dCur - dPrev;
+    const frac = span > 0 ? (distance - dPrev) / span : 0;
+    return ts[hi - 1] + frac * (ts[hi] - ts[hi - 1]);
+  }
   function bezier2D_arcAtT(lut, t) {
     const { ts, ds } = lut;
     const last = ts.length - 1;
@@ -2446,6 +2447,623 @@ var PixodeskAnimator = (() => {
     return cubicBezier(flipped);
   }
 
+  // src/effects/pathSampler.ts
+  var LUT_STEPS = 48;
+  var CMD_RE = /[MmLlHhVvCcSsQqTtAaZz]/;
+  function tokenize(d) {
+    const tokens = [];
+    const re = /([MmLlHhVvCcSsQqTtAaZz])|(-?\d*\.?\d+(?:[eE][-+]?\d+)?)/g;
+    let m;
+    while ((m = re.exec(d)) !== null) tokens.push(m[0]);
+    return tokens;
+  }
+  function quadToCubic(P0, Qc, P3) {
+    return {
+      P1: [P0[0] + 2 / 3 * (Qc[0] - P0[0]), P0[1] + 2 / 3 * (Qc[1] - P0[1])],
+      P2: [P3[0] + 2 / 3 * (Qc[0] - P3[0]), P3[1] + 2 / 3 * (Qc[1] - P3[1])]
+    };
+  }
+  function parseCubics(d) {
+    const tokens = tokenize(d);
+    const segs = [];
+    let i = 0;
+    let cx = 0, cy = 0;
+    let sx = 0, sy = 0;
+    let pcx = 0, pcy = 0;
+    let pqx = 0, pqy = 0;
+    let prevCmd = "";
+    const num2 = () => parseFloat(tokens[i++]);
+    const push = (P1, P2, P3) => {
+      const P0 = [cx, cy];
+      const lut = bezier2D_arcLengthLUT(P0, P1, P2, P3, LUT_STEPS);
+      segs.push({ P0, P1, P2, P3, lut, len: lut.ds[lut.ds.length - 1] });
+      cx = P3[0];
+      cy = P3[1];
+    };
+    const pushLine = (x, y) => {
+      push(
+        [cx + (x - cx) / 3, cy + (y - cy) / 3],
+        [cx + 2 * (x - cx) / 3, cy + 2 * (y - cy) / 3],
+        [x, y]
+      );
+    };
+    while (i < tokens.length) {
+      let cmd = tokens[i];
+      if (CMD_RE.test(cmd)) i++;
+      else cmd = prevCmd === "M" ? "L" : prevCmd === "m" ? "l" : prevCmd;
+      const rel = cmd >= "a";
+      const U = cmd.toUpperCase();
+      if (U === "Z") {
+        pushLine(sx, sy);
+        cx = sx;
+        cy = sy;
+        prevCmd = cmd;
+        continue;
+      }
+      if (U === "M") {
+        const x = num2() + (rel ? cx : 0), y = num2() + (rel ? cy : 0);
+        cx = x;
+        cy = y;
+        sx = x;
+        sy = y;
+        prevCmd = cmd;
+        continue;
+      }
+      if (U === "L") {
+        pushLine(num2() + (rel ? cx : 0), num2() + (rel ? cy : 0));
+      } else if (U === "H") {
+        pushLine(num2() + (rel ? cx : 0), cy);
+      } else if (U === "V") {
+        pushLine(cx, num2() + (rel ? cy : 0));
+      } else if (U === "C") {
+        const p1 = [num2() + (rel ? cx : 0), num2() + (rel ? cy : 0)];
+        const p2 = [num2() + (rel ? cx : 0), num2() + (rel ? cy : 0)];
+        const p3 = [num2() + (rel ? cx : 0), num2() + (rel ? cy : 0)];
+        pcx = p2[0];
+        pcy = p2[1];
+        push(p1, p2, p3);
+      } else if (U === "S") {
+        const smooth = prevCmd.toUpperCase() === "C" || prevCmd.toUpperCase() === "S";
+        const p1 = smooth ? [2 * cx - pcx, 2 * cy - pcy] : [cx, cy];
+        const p2 = [num2() + (rel ? cx : 0), num2() + (rel ? cy : 0)];
+        const p3 = [num2() + (rel ? cx : 0), num2() + (rel ? cy : 0)];
+        pcx = p2[0];
+        pcy = p2[1];
+        push(p1, p2, p3);
+      } else if (U === "Q") {
+        const qc = [num2() + (rel ? cx : 0), num2() + (rel ? cy : 0)];
+        const p3 = [num2() + (rel ? cx : 0), num2() + (rel ? cy : 0)];
+        pqx = qc[0];
+        pqy = qc[1];
+        const { P1, P2 } = quadToCubic([cx, cy], qc, p3);
+        push(P1, P2, p3);
+      } else if (U === "T") {
+        const smooth = prevCmd.toUpperCase() === "Q" || prevCmd.toUpperCase() === "T";
+        const qc = smooth ? [2 * cx - pqx, 2 * cy - pqy] : [cx, cy];
+        const p3 = [num2() + (rel ? cx : 0), num2() + (rel ? cy : 0)];
+        pqx = qc[0];
+        pqy = qc[1];
+        const { P1, P2 } = quadToCubic([cx, cy], qc, p3);
+        push(P1, P2, p3);
+      } else if (U === "A") {
+        i += 5;
+        pushLine(num2() + (rel ? cx : 0), num2() + (rel ? cy : 0));
+      } else {
+        i++;
+        continue;
+      }
+      prevCmd = cmd;
+    }
+    return segs.length ? segs : null;
+  }
+  function clamp2(v, lo, hi) {
+    return v < lo ? lo : v > hi ? hi : v;
+  }
+  function createPathSampler(d) {
+    const segs = parseCubics(d);
+    if (!segs) return null;
+    const cum = new Float64Array(segs.length + 1);
+    for (let k = 0; k < segs.length; k++) cum[k + 1] = cum[k] + segs[k].len;
+    const totalLength = cum[segs.length];
+    const start = segs[0].P0, end = segs[segs.length - 1].P3;
+    const closed = Math.hypot(end[0] - start[0], end[1] - start[1]) < 1e-3;
+    const sampleOn = (dist) => {
+      let k = 0;
+      while (k < segs.length - 1 && dist > cum[k + 1]) k++;
+      const seg = segs[k];
+      const local = dist - cum[k];
+      const t = seg.len > 0 ? bezier2D_tForDistance(seg.lut, local) : 0;
+      const [x, y] = bezier2D_pointAt(seg.P0, seg.P1, seg.P2, seg.P3, t);
+      const [dx, dy] = bezier2D_derivativeAt(seg.P0, seg.P1, seg.P2, seg.P3, t);
+      return { x, y, angle: Math.atan2(dy, dx) };
+    };
+    return {
+      totalLength,
+      closed,
+      sampleAtDistance(dist) {
+        if (!closed && (dist < 0 || dist > totalLength)) {
+          const edge = dist < 0 ? 0 : totalLength;
+          const p = sampleOn(edge);
+          const over = dist - edge;
+          return { x: p.x + Math.cos(p.angle) * over, y: p.y + Math.sin(p.angle) * over, angle: p.angle };
+        }
+        return sampleOn(clamp2(dist, 0, totalLength));
+      }
+    };
+  }
+
+  // src/effects/textPathEffect.ts
+  var EXTEND_MARGIN_FRAC = 0.15;
+  function numRange(v) {
+    if (typeof v === "number") return { min: v, max: v };
+    if (v && typeof v === "object") {
+      const o = v;
+      if (typeof o.value === "number") return { min: o.value, max: o.value };
+      if (Array.isArray(o.keyframes) && o.keyframes.length) {
+        const vals = o.keyframes.map((k) => Number(k.value) || 0);
+        return { min: Math.min(...vals), max: Math.max(...vals) };
+      }
+    }
+    return { min: 0, max: 0 };
+  }
+  function estimateTextAdvance(node) {
+    let chars = 0, maxFont = 16;
+    const walk = (el) => {
+      var _a, _b;
+      const fs = parseFloat(String((_a = el.fontSize) != null ? _a : "")) || 0;
+      if (fs) maxFont = Math.max(maxFont, fs);
+      const t = (_b = el.text) != null ? _b : el.textContent;
+      if (typeof t === "string") chars += t.length;
+      if (el.children) for (const c of el.children) walk(c);
+    };
+    walk(node);
+    return chars * maxFont;
+  }
+  var r3 = (n) => Math.round(n * 1e3) / 1e3;
+  function shiftAnimatable(v, by) {
+    if (!by || v === void 0 || v === null) return v;
+    if (typeof v === "number") return v + by;
+    const o = v;
+    if (typeof o.value === "number") return __spreadProps(__spreadValues({}, o), { value: o.value + by });
+    if (Array.isArray(o.keyframes)) return __spreadProps(__spreadValues({}, o), { keyframes: o.keyframes.map((k) => __spreadProps(__spreadValues({}, k), { value: (Number(k.value) || 0) + by })) });
+    return v;
+  }
+  function extendedPathForBrowser(pathD, opts) {
+    var _a;
+    if (opts.pathOverflow === "clip") return { d: pathD, startShift: 0 };
+    const sampler = createPathSampler(pathD);
+    if (!sampler || sampler.closed || sampler.totalLength <= 0) return { d: pathD, startShift: 0 };
+    const L = sampler.totalLength;
+    const margin = EXTEND_MARGIN_FRAC * L;
+    const so = numRange(opts.startOffset);
+    const runWidth = numRange(opts.textLength).max || ((_a = opts.advance) != null ? _a : 0);
+    const startOverflow = Math.max(0, -so.min);
+    const endOverflow = Math.max(0, so.max + runWidth - L);
+    const startExt = startOverflow > 0 ? startOverflow + margin : 0;
+    const endExt = endOverflow > 0 ? endOverflow + margin : 0;
+    if (endExt <= 0 && startExt <= 0) return { d: pathD, startShift: 0 };
+    const s = sampler.sampleAtDistance(0);
+    const e = sampler.sampleAtDistance(L);
+    let d = pathD;
+    if (startExt > 0) {
+      const sx = s.x - Math.cos(s.angle) * startExt, sy = s.y - Math.sin(s.angle) * startExt;
+      const rest = pathD.replace(/^\s*[Mm]\s*-?[\d.]+[\s,]+-?[\d.]+/, "");
+      d = "M" + r3(sx) + "," + r3(sy) + "L" + r3(s.x) + "," + r3(s.y) + rest;
+    }
+    if (endExt > 0) {
+      const ex = e.x + Math.cos(e.angle) * endExt, ey = e.y + Math.sin(e.angle) * endExt;
+      d += "L" + r3(ex) + "," + r3(ey);
+    }
+    return { d, startShift: startExt };
+  }
+  function applyTextPathEffect(node, fx, ctx) {
+    var _a;
+    if (!fx || typeof fx.path !== "string" || !fx.path) return node;
+    const pathId = genId(ctx, "tpath");
+    const { d, startShift } = extendedPathForBrowser(fx.path, {
+      pathOverflow: fx.pathOverflow,
+      startOffset: fx.startOffset,
+      textLength: fx.textLength,
+      advance: estimateTextAdvance(node)
+    });
+    ctx.defs.push({ type: "path", id: pathId, d });
+    const textPath = {
+      type: "textPath",
+      href: "#" + pathId,
+      children: (_a = node.children) != null ? _a : []
+    };
+    if (fx.lengthAdjust !== void 0) textPath.lengthAdjust = fx.lengthAdjust;
+    if (fx.method !== void 0) textPath.method = fx.method;
+    if (fx.spacing !== void 0) textPath.spacing = fx.spacing;
+    applyAnimatableNumber(textPath, "startOffset", shiftAnimatable(fx.startOffset, startShift));
+    applyAnimatableNumber(textPath, "textLength", fx.textLength);
+    node.children = [textPath];
+    return node;
+  }
+  function applyAnimatableNumber(node, attrName, raw) {
+    if (raw === void 0 || raw === null) return;
+    if (typeof raw === "number") {
+      node[attrName] = String(raw);
+      return;
+    }
+    if (typeof raw === "object" && raw !== null) {
+      const obj = raw;
+      if (Array.isArray(obj.keyframes)) {
+        const prevAnimate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
+        const animate = __spreadValues({}, prevAnimate || {});
+        const block = { keyframes: obj.keyframes };
+        if (obj.loop !== void 0) block.loop = obj.loop;
+        animate[attrName] = block;
+        node.animate = animate;
+        return;
+      }
+      if (typeof obj.value === "number") {
+        node[attrName] = String(obj.value);
+        return;
+      }
+    }
+  }
+
+  // src/effects/elementFactory.ts
+  var jsonElementFactory = (type, props, children) => {
+    const node = { type };
+    for (const k in props) if (props[k] !== void 0) node[k] = props[k];
+    const arr = Array.isArray(children) ? children.filter((c) => c != null) : children != null ? [children] : [];
+    if (arr.length) node.children = arr;
+    return node;
+  };
+
+  // src/effects/glyphPathBake.ts
+  function fmt(v, decimals) {
+    return Math.round(v) === v ? "" + Math.round(v) : v.toFixed(decimals);
+  }
+  function pack(nums, decimals) {
+    let s = "";
+    for (let i = 0; i < nums.length; i++) {
+      const str2 = fmt(nums[i], decimals);
+      if (i > 0 && str2.charCodeAt(0) !== 45) s += " ";
+      s += str2;
+    }
+    return s;
+  }
+  function apply(m, x, y) {
+    return [m[0] * x + m[2] * y + m[4], m[1] * x + m[3] * y + m[5]];
+  }
+  var TOKEN_RE = /([MLCQZ])|(-?\d*\.?\d+(?:e[-+]?\d+)?)/gi;
+  function transformPathData(d, m, decimals = 2) {
+    const tokens = [];
+    let match;
+    TOKEN_RE.lastIndex = 0;
+    while ((match = TOKEN_RE.exec(d)) !== null) tokens.push(match[0]);
+    let out = "";
+    let i = 0;
+    const num2 = () => parseFloat(tokens[i++]);
+    while (i < tokens.length) {
+      const cmd = tokens[i++];
+      if (cmd === "M" || cmd === "L") {
+        const [x, y] = apply(m, num2(), num2());
+        out += cmd + pack([x, y], decimals);
+      } else if (cmd === "C") {
+        const [x1, y1] = apply(m, num2(), num2());
+        const [x2, y2] = apply(m, num2(), num2());
+        const [x, y] = apply(m, num2(), num2());
+        out += "C" + pack([x1, y1, x2, y2, x, y], decimals);
+      } else if (cmd === "Q") {
+        const [x1, y1] = apply(m, num2(), num2());
+        const [x, y] = apply(m, num2(), num2());
+        out += "Q" + pack([x1, y1, x, y], decimals);
+      } else if (cmd === "Z" || cmd === "z") {
+        out += "Z";
+      }
+    }
+    return out;
+  }
+
+  // src/effects/textGlyphsEffect.ts
+  var DEFAULT_FONT_SIZE = 16;
+  var TEXT_ATTR_KEYS = [
+    "fontFamily",
+    "fontSize",
+    "fontWeight",
+    "fontStyle",
+    "textAnchor",
+    "letterSpacing",
+    "wordSpacing",
+    "textDecoration",
+    "textTransform",
+    "whiteSpace",
+    "x",
+    "y",
+    "dx",
+    "dy",
+    "lengthAdjust",
+    "fill",
+    "stroke",
+    "strokeWidth",
+    "effects",
+    TEXT_ATTR,
+    TEXT_CONTENT_ATTR,
+    "xml:space"
+  ];
+  function parseLen(v) {
+    if (typeof v === "number") return v;
+    if (typeof v === "string") {
+      const n = parseFloat(v);
+      return isNaN(n) ? void 0 : n;
+    }
+    return void 0;
+  }
+  function str(v) {
+    return typeof v === "string" ? v : void 0;
+  }
+  function resolveStyle(node, parent) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return {
+      fontFamily: (_a = str(node.fontFamily)) != null ? _a : parent.fontFamily,
+      fontSize: (_b = parseLen(node.fontSize)) != null ? _b : parent.fontSize,
+      fill: (_c = node.fill) != null ? _c : parent.fill,
+      stroke: (_d = node.stroke) != null ? _d : parent.stroke,
+      strokeWidth: (_e = node.strokeWidth) != null ? _e : parent.strokeWidth,
+      letterSpacing: (_f = parseLen(node.letterSpacing)) != null ? _f : parent.letterSpacing,
+      wordSpacing: (_g = parseLen(node.wordSpacing)) != null ? _g : parent.wordSpacing
+    };
+  }
+  function rootStyleOf(node) {
+    var _a, _b, _c;
+    return {
+      fontFamily: str(node.fontFamily),
+      fontSize: (_a = parseLen(node.fontSize)) != null ? _a : DEFAULT_FONT_SIZE,
+      fill: node.fill,
+      stroke: node.stroke,
+      strokeWidth: node.strokeWidth,
+      letterSpacing: (_b = parseLen(node.letterSpacing)) != null ? _b : 0,
+      wordSpacing: (_c = parseLen(node.wordSpacing)) != null ? _c : 0
+    };
+  }
+  function paintOf(s) {
+    const p = {};
+    if (s.fill !== void 0) p.fill = s.fill;
+    if (s.stroke !== void 0) p.stroke = s.stroke;
+    if (s.strokeWidth !== void 0) p.strokeWidth = s.strokeWidth;
+    return p;
+  }
+  function glyphFontFor(s, glyphs, soleFont, warnings) {
+    var _a;
+    const gf = s.fontFamily ? glyphs[s.fontFamily] : soleFont;
+    if (!gf) warnings == null ? void 0 : warnings.push('textGlyphs: no glyphs for font "' + ((_a = s.fontFamily) != null ? _a : "") + '"');
+    return gf;
+  }
+  function soleFontOf(glyphs) {
+    const names = Object.keys(glyphs);
+    return names.length === 1 ? glyphs[names[0]] : void 0;
+  }
+  function materialiseGlyphTextHorizontal(node, opts) {
+    var _a, _b, _c, _d;
+    const { glyphs, create = jsonElementFactory, warnings } = opts;
+    const soleFont = soleFontOf(glyphs);
+    const pen = { x: (_a = parseLen(node.x)) != null ? _a : 0, y: (_b = parseLen(node.y)) != null ? _b : 0 };
+    const placements = [];
+    const lines = [{ start: pen.x, end: pen.x }];
+    let line = 0;
+    const renderChars = (content, s) => {
+      const gf = glyphFontFor(s, glyphs, soleFont, warnings);
+      if (!gf) return;
+      const scale = s.fontSize / gf.unitsPerEm;
+      const paint = paintOf(s);
+      for (let i = 0; i < content.length; i++) {
+        const ch = content.charAt(i);
+        const g = gf.glyphs[ch];
+        if (g && g.d) placements.push({ glyphD: g.d, m: [scale, 0, 0, scale, pen.x, pen.y], paint, line, x: pen.x, y: pen.y, scale });
+        pen.x += (g ? g.width : 0) * scale + s.letterSpacing + (ch === " " ? s.wordSpacing : 0);
+        lines[line].end = pen.x;
+      }
+    };
+    const walk = (el, parentStyle) => {
+      var _a2, _b2, _c2, _d2;
+      const s = resolveStyle(el, parentStyle);
+      const x = parseLen(el.x);
+      const y = parseLen(el.y);
+      if (x !== void 0) {
+        pen.x = x;
+        line = lines.length;
+        lines.push({ start: pen.x, end: pen.x });
+      }
+      if (y !== void 0) pen.y = y;
+      pen.x += (_a2 = parseLen(el.dx)) != null ? _a2 : 0;
+      pen.y += (_b2 = parseLen(el.dy)) != null ? _b2 : 0;
+      const content = (_c2 = str(el[TEXT_ATTR])) != null ? _c2 : str(el[TEXT_CONTENT_ATTR]);
+      if (content && !((_d2 = el.children) == null ? void 0 : _d2.length)) renderChars(content, s);
+      if (el.children) for (const ch of el.children) walk(ch, s);
+    };
+    const rootStyle = rootStyleOf(node);
+    if (node.children) for (const ch of node.children) walk(ch, rootStyle);
+    const rootContent = (_c = str(node[TEXT_ATTR])) != null ? _c : str(node[TEXT_CONTENT_ATTR]);
+    if (rootContent && !((_d = node.children) == null ? void 0 : _d.length)) renderChars(rootContent, rootStyle);
+    const anchor = str(node.textAnchor);
+    if (anchor === "middle" || anchor === "end") {
+      for (const p of placements) {
+        const w = lines[p.line].end - lines[p.line].start;
+        const shift = anchor === "middle" ? -w / 2 : -w;
+        p.m = [p.scale, 0, 0, p.scale, p.x + shift, p.y];
+      }
+    }
+    return toGroup(node, buildPaths(placements, create, warnings), create);
+  }
+  function collectAlongPathCells(node, glyphs, soleFont, warnings) {
+    const cells = [];
+    let adv = 0;
+    const walk = (el, parentStyle) => {
+      var _a, _b;
+      const s = resolveStyle(el, parentStyle);
+      const content = (_a = str(el[TEXT_ATTR])) != null ? _a : str(el[TEXT_CONTENT_ATTR]);
+      if (content && !((_b = el.children) == null ? void 0 : _b.length)) {
+        const gf = glyphFontFor(s, glyphs, soleFont, warnings);
+        if (gf) {
+          const scale = s.fontSize / gf.unitsPerEm;
+          const paint = paintOf(s);
+          for (let i = 0; i < content.length; i++) {
+            const ch = content.charAt(i);
+            const g = gf.glyphs[ch];
+            const glyphAdv = (g ? g.width : 0) * scale;
+            if (g && g.d) cells.push({ glyphD: g.d, widthEm: g.width, scale, paint, midBase: adv + glyphAdv / 2 });
+            adv += glyphAdv + s.letterSpacing + (ch === " " ? s.wordSpacing : 0);
+          }
+        }
+      }
+      if (el.children) for (const ch of el.children) walk(ch, s);
+    };
+    walk(node, rootStyleOf(node));
+    return { cells, width: adv };
+  }
+  function alongAffine(sampler, dist, scale, widthEm) {
+    const { x, y, angle } = sampler.sampleAtDistance(dist);
+    const cos = Math.cos(angle), sin = Math.sin(angle), hw = widthEm / 2;
+    return [scale * cos, scale * sin, -scale * sin, scale * cos, x - scale * cos * hw, y - scale * sin * hw];
+  }
+  function materialiseGlyphTextAlongPath(node, pathD, startOffset, opts, textLength, pathOverflow) {
+    var _a;
+    const { glyphs, create = jsonElementFactory, warnings } = opts;
+    const sampler = pathD ? createPathSampler(pathD) : null;
+    if (!sampler) {
+      warnings == null ? void 0 : warnings.push("textGlyphs: unparsable along-path geometry");
+      return null;
+    }
+    const soleFont = soleFontOf(glyphs);
+    const { cells, width } = collectAlongPathCells(node, glyphs, soleFont, warnings);
+    if (!cells.length) return toGroup(node, [], create);
+    if (textLength && textLength > 0 && width > 0) {
+      const k = textLength / width;
+      for (const c of cells) c.midBase *= k;
+    }
+    const isClip = pathOverflow === "clip" && !sampler.closed;
+    const so = readAnimatable(startOffset);
+    if (so.kind === "animated" /* Animated */ && so.keyframes.length >= 2) {
+      return toGroup(node, buildAnimatedAlongPath(cells, sampler, so.keyframes, so.loop, create, isClip), create);
+    }
+    const base = so.kind === "animated" /* Animated */ ? Number((_a = so.keyframes[0]) == null ? void 0 : _a.value) || 0 : so.kind === "static" /* Static */ ? Number(so.value) || 0 : 0;
+    const placeCells = isClip ? cells.filter((c) => {
+      const d = base + c.midBase;
+      return d >= 0 && d <= sampler.totalLength;
+    }) : cells;
+    const placements = placeCells.map((c) => ({
+      glyphD: c.glyphD,
+      paint: c.paint,
+      m: alongAffine(sampler, base + c.midBase, c.scale, c.widthEm)
+    }));
+    return toGroup(node, buildPaths(placements, create, warnings), create);
+  }
+  var ALONG_PATH_MAX_STEPS = 48;
+  var ALONG_PATH_MAX_STEPS_PER_SEGMENT = 64;
+  function roundN(v, n) {
+    const f = __pow(10, n);
+    return Math.round(v * f) / f;
+  }
+  function buildAnimatedAlongPath(cells, sampler, sokfs, loop, create, isClip) {
+    const step = Math.max(sampler.totalLength / ALONG_PATH_MAX_STEPS, 0.5);
+    const timeOf = (kf) => Number(kf.time) || 0;
+    const offOf = (kf) => Number(kf.value) || 0;
+    const onPath = (dist) => dist >= 0 && dist <= sampler.totalLength;
+    const out = [];
+    for (const c of cells) {
+      const centred = [c.scale, 0, 0, c.scale, -c.scale * (c.widthEm / 2), 0];
+      const d = transformPathData(c.glyphD, centred);
+      const sampleKf = (dist, time) => {
+        const { x, y, angle } = sampler.sampleAtDistance(dist);
+        return {
+          time,
+          value: {
+            ["translate" /* Translate */]: [roundN(x, 3), roundN(y, 3)],
+            ["rotate" /* Rotate */]: roundN(angle * 180 / Math.PI, 3)
+          }
+        };
+      };
+      const kfs = [];
+      const opKfs = [];
+      const pushKf = (dist, time) => {
+        kfs.push(sampleKf(dist, time));
+        if (isClip) opKfs.push({ time, value: onPath(dist) ? 1 : 0 });
+      };
+      pushKf(offOf(sokfs[0]) + c.midBase, timeOf(sokfs[0]));
+      for (let k = 1; k < sokfs.length; k++) {
+        const t0 = timeOf(sokfs[k - 1]), t1 = timeOf(sokfs[k]);
+        const o0 = offOf(sokfs[k - 1]), o1 = offOf(sokfs[k]);
+        const n = Math.min(ALONG_PATH_MAX_STEPS_PER_SEGMENT, Math.max(1, Math.ceil(Math.abs(o1 - o0) / step)));
+        for (let s = 1; s <= n; s++) {
+          const f = s / n;
+          pushKf(o0 + f * (o1 - o0) + c.midBase, t0 + f * (t1 - t0));
+        }
+      }
+      const transform = { keyframes: kfs };
+      if (loop !== void 0) transform.loop = loop;
+      const animate = { transform };
+      if (isClip && opKfs.some((k) => k.value === 0)) {
+        const op = { keyframes: opKfs };
+        if (loop !== void 0) op.loop = loop;
+        animate.opacity = op;
+      }
+      out.push(create("path", __spreadProps(__spreadValues({ d }, paintProps(c.paint)), { animate }), []));
+    }
+    return out;
+  }
+  function paintProps(paint) {
+    const p = {};
+    if (paint.fill !== void 0) p.fill = paint.fill;
+    if (paint.stroke !== void 0) p.stroke = paint.stroke;
+    if (paint.strokeWidth !== void 0) p.strokeWidth = paint.strokeWidth;
+    return p;
+  }
+  function buildPaths(placements, create, warnings) {
+    var _a, _b, _c;
+    if (!placements.length) {
+      warnings == null ? void 0 : warnings.push("textGlyphs: nothing to render");
+      return [];
+    }
+    const byPaint = /* @__PURE__ */ new Map();
+    for (const p of placements) {
+      const key = JSON.stringify([(_a = p.paint.fill) != null ? _a : null, (_b = p.paint.stroke) != null ? _b : null, (_c = p.paint.strokeWidth) != null ? _c : null]);
+      const baked = transformPathData(p.glyphD, p.m);
+      const entry = byPaint.get(key);
+      if (entry) entry.d += baked;
+      else byPaint.set(key, { paint: p.paint, d: baked });
+    }
+    const out = [];
+    for (const { paint, d } of byPaint.values()) out.push(create("path", __spreadValues({ d }, paintProps(paint)), []));
+    return out;
+  }
+  function toGroup(node, children, create) {
+    const gProps = {};
+    for (const k of Object.keys(node)) {
+      if (k === "type" || k === "children" || TEXT_ATTR_KEYS.indexOf(k) !== -1) continue;
+      gProps[k] = node[k];
+    }
+    if (gProps.style && typeof gProps.style === "object") {
+      const style = __spreadValues({}, gProps.style);
+      delete style["white-space"];
+      if (Object.keys(style).length) gProps.style = style;
+      else delete gProps.style;
+    }
+    return create("g", gProps, children);
+  }
+  function materialiseGlyphText(node, opts) {
+    if (opts.alongPath) return materialiseGlyphTextAlongPath(node, opts.alongPath.pathD, opts.alongPath.startOffset, opts, opts.alongPath.textLength, opts.alongPath.pathOverflow);
+    return materialiseGlyphTextHorizontal(node, opts);
+  }
+  function applyTextGlyphsEffect(node, fx, ctx) {
+    if (!(fx == null ? void 0 : fx.useGlyphs)) return node;
+    if (!ctx.glyphs) {
+      ctx.warnings.push("textGlyphs: no definitions.glyphs \u2014 left as native <text>");
+      return node;
+    }
+    return materialiseGlyphTextHorizontal(node, { glyphs: ctx.glyphs, warnings: ctx.warnings });
+  }
+  function applyTextGlyphsAlongPath(node, ctx, pathD, startOffset, textLength, pathOverflow) {
+    if (!ctx.glyphs) {
+      ctx.warnings.push("textGlyphs: no definitions.glyphs");
+      return null;
+    }
+    return materialiseGlyphTextAlongPath(node, pathD, startOffset, { glyphs: ctx.glyphs, warnings: ctx.warnings }, textLength, pathOverflow);
+  }
+
   // src/PxMotionPath.ts
   function getKfTranslate(kf) {
     var _a;
@@ -2889,12 +3507,12 @@ var PixodeskAnimator = (() => {
     }
     return res;
   }
-  function extractPathData(str) {
-    if (str.startsWith("path(") && str.endsWith(")")) {
-      return str.slice(5, -1);
+  function extractPathData(str2) {
+    if (str2.startsWith("path(") && str2.endsWith(")")) {
+      return str2.slice(5, -1);
     }
-    if (/^[MmZzLlHhVvCcSsQqTtAa]/.test(str)) {
-      return str;
+    if (/^[MmZzLlHhVvCcSsQqTtAa]/.test(str2)) {
+      return str2;
     }
     return void 0;
   }
@@ -3819,7 +4437,7 @@ var PixodeskAnimator = (() => {
 
   // src/effects/PlayerEffectsUtil.ts
   function applyPlayerEffects(root) {
-    var _a;
+    var _a, _b;
     const ctx = {
       defs: [],
       warnings: [],
@@ -3830,7 +4448,8 @@ var PixodeskAnimator = (() => {
       maskAncestorChains: /* @__PURE__ */ new Map(),
       // Resolved engine: `frames` ONLY when explicitly set; auto/webapi/unset →
       // webapi (we're not 100% sure it's frames, and CSS/WAAPI need the inline form).
-      engine: ((_a = getAnimatorConfig(root)) == null ? void 0 : _a.mode) === PxAnimatorMode.frames ? PxAnimatorEngine.frames : PxAnimatorEngine.webapi
+      engine: ((_a = getAnimatorConfig(root)) == null ? void 0 : _a.mode) === PxAnimatorMode.frames ? PxAnimatorEngine.frames : PxAnimatorEngine.webapi,
+      glyphs: (_b = getDefs(root)) == null ? void 0 : _b.glyphs
     };
     const working = clone(root);
     indexById(working, ctx.idMap);
@@ -3842,16 +4461,33 @@ var PixodeskAnimator = (() => {
     return { root: out, defs: ctx.defs, warnings: ctx.warnings, errors: ctx.errors };
   }
   function applyPlayerEffects_exceptRetime(node, ctx) {
+    var _a;
     if (node.children) node.children = node.children.map((child) => applyPlayerEffects_exceptRetime(child, ctx));
     const fx = node.effects;
     const originalId = typeof node.id === "string" ? node.id : void 0;
     const innerIdForContentRef = originalId ? ctx.contentRefInnerIds.get(originalId) : void 0;
     if (!fx && !innerIdForContentRef) return node;
-    const { transformation, repeater, maskedBy, trimPath, clone: cloneFx, fillGradient, strokeGradient, textAlongPath } = fx != null ? fx : {};
+    const { transformation, repeater, maskedBy, trimPath, clone: cloneFx, fillGradient, strokeGradient, textPath, text } = fx != null ? fx : {};
     const isCombinedShape = fx == null ? void 0 : fx.isCombinedShape;
     if (fx) delete node.effects;
     let n = node;
-    n = applyTextAlongPathEffect(n, textAlongPath, ctx);
+    let consumedByGlyphs = false;
+    if (text == null ? void 0 : text.useGlyphs) {
+      if (textPath) {
+        const pathD = typeof textPath.path === "string" ? textPath.path : void 0;
+        const rawTL = textPath.textLength;
+        const textLength = typeof rawTL === "number" ? rawTL : rawTL && typeof rawTL === "object" ? typeof rawTL.value === "number" ? rawTL.value : Array.isArray(rawTL.keyframes) && rawTL.keyframes.length ? Number((_a = rawTL.keyframes[0]) == null ? void 0 : _a.value) : void 0 : void 0;
+        const glyphed = applyTextGlyphsAlongPath(n, ctx, pathD, textPath.startOffset, textLength, textPath.pathOverflow);
+        if (glyphed) {
+          n = glyphed;
+          consumedByGlyphs = true;
+        }
+      } else {
+        n = applyTextGlyphsEffect(n, text, ctx);
+        consumedByGlyphs = true;
+      }
+    }
+    if (!consumedByGlyphs) n = applyTextPathEffect(n, textPath, ctx);
     n = applyFillGradientEffect(n, fillGradient, ctx);
     n = applyStrokeGradientEffect(n, strokeGradient, ctx);
     n = applyTrimPathEffect(n, trimPath, isCombinedShape, ctx);
@@ -4094,8 +4730,8 @@ var PixodeskAnimator = (() => {
   var DATA_SVG_IMAGE_RE = /^data:image\/svg\+xml(?:;[^,]*)?,/i;
   var DATA_IMAGE_BASE64_PAYLOAD_RE = /^data:image\/[^;,]*;base64,([A-Za-z0-9+/]{8})/i;
   var BASE64_RASTER_MAGICS = ["iVBORw0K", "/9j/", "R0lGOD", "UklGR", "Qk"];
-  function isContentSniffedRasterImage(str) {
-    const m = DATA_IMAGE_BASE64_PAYLOAD_RE.exec(str);
+  function isContentSniffedRasterImage(str2) {
+    const m = DATA_IMAGE_BASE64_PAYLOAD_RE.exec(str2);
     return !!m && BASE64_RASTER_MAGICS.some((magic) => m[1].startsWith(magic));
   }
   function isDangerousAttrName(nameLower) {
@@ -4109,18 +4745,18 @@ var PixodeskAnimator = (() => {
       return void 0;
     }
     if (nameLower === "fill" || nameLower === "stroke" || nameLower === "stopcolor") {
-      const str = String(value);
-      if (str.includes("url(") && !/^url\(#[^)]+\)$/.test(str)) {
+      const str2 = String(value);
+      if (str2.includes("url(") && !/^url\(#[^)]+\)$/.test(str2)) {
         console.warn('Attribute "' + nameLower + '" blocked: url() must be internal url(#id), got:', value);
         return void 0;
       }
       return value;
     }
     if (URL_VALUE_ATTRS_LOWER.has(nameLower)) {
-      const str = String(value);
-      if (str.startsWith("#")) return value;
-      if (/^url\(#[^)]+\)$/.test(str)) return value;
-      if (IMAGE_REF_ATTRS_LOWER.has(nameLower) && (DATA_RASTER_IMAGE_RE.test(str) || DATA_SVG_IMAGE_RE.test(str) || isContentSniffedRasterImage(str))) return value;
+      const str2 = String(value);
+      if (str2.startsWith("#")) return value;
+      if (/^url\(#[^)]+\)$/.test(str2)) return value;
+      if (IMAGE_REF_ATTRS_LOWER.has(nameLower) && (DATA_RASTER_IMAGE_RE.test(str2) || DATA_SVG_IMAGE_RE.test(str2) || isContentSniffedRasterImage(str2))) return value;
       console.warn('Attribute "' + nameLower + '" blocked: must be #id, url(#id), or data:image/\u2026 URI, got:', value);
       return void 0;
     }
@@ -4150,7 +4786,7 @@ var PixodeskAnimator = (() => {
     if (textContent) element.textContent = textContent;
     return element;
   }
-  function resolveStyle(style, defs) {
+  function resolveStyle2(style, defs) {
     var _a;
     if (!style) return void 0;
     if (typeof style === "string") {
@@ -4186,7 +4822,7 @@ var PixodeskAnimator = (() => {
     if (!node) return null;
     const _a = node, { type, children, style } = _a, props = __objRest(_a, ["type", "children", "style"]);
     const nodeDefs = getDefs(node) || defs;
-    const resolvedStyle = resolveStyle(style, nodeDefs);
+    const resolvedStyle = resolveStyle2(style, nodeDefs);
     let childElements;
     if (children) {
       for (const ch of children) {