@pixodesk/svg-animator-web 1.0.16 → 1.0.18

package/dist/index.js

@@ -4,6 +4,7 @@ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 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 = {}))
@@ -45,7 +46,7 @@ function readAnimatable(raw) {
   if (typeof raw === "object") {
     const obj = raw;
     if (obj.keyframes) {
-      return { kind: "animated" /* Animated */, keyframes: obj.keyframes, autoOrient: obj.autoOrient };
+      return { kind: "animated" /* Animated */, keyframes: obj.keyframes, autoOrient: obj.autoOrient, loop: obj.loop };
     }
     if (obj.value !== void 0) return { kind: "static" /* Static */, value: obj.value };
   }
@@ -135,6 +136,7 @@ function wrapTransformPart(inner, part, raw, ctx) {
   if (v.kind === "animated" /* Animated */) {
     const animTr = { keyframes: v.keyframes.map((kf) => keyframeWith(kf, partsRecord(part, kf.value, void 0))) };
     if (v.autoOrient) animTr.autoOrient = true;
+    if (v.loop !== void 0) animTr.loop = v.loop;
     return {
       type: "g",
       animate: { transform: animTr },
@@ -153,9 +155,11 @@ function wrapOrigin(inner, raw, invert) {
     return { type: "g", transform: { value: { translate: sign(v.value) } }, children: [inner] };
   }
   if (v.kind === "animated" /* Animated */) {
+    const animTr = { keyframes: v.keyframes.map((kf) => keyframeWith(kf, { translate: sign(kf.value) })) };
+    if (v.loop !== void 0) animTr.loop = v.loop;
     return {
       type: "g",
-      animate: { transform: { keyframes: v.keyframes.map((kf) => keyframeWith(kf, { translate: sign(kf.value) })) } },
+      animate: { transform: animTr },
       children: [inner]
     };
   }
@@ -165,8 +169,8 @@ function wrapOrigin(inner, raw, invert) {
 // src/effects/contentRefSplit.ts
 function identifyContentRefTargets(node, ctx, allocator) {
   var _a, _b, _c;
-  if (node.type === "use" && ((_b = (_a = node.effects) == null ? void 0 : _a.ref) == null ? void 0 : _b.type) === "content") {
-    const baseId = node.effects.ref.baseId;
+  if (node.type === "use" && ((_b = (_a = node.effects) == null ? void 0 : _a.clone) == null ? void 0 : _b.type) === "content") {
+    const baseId = node.effects.clone.baseId;
     if (typeof baseId === "string" && baseId && !ctx.contentRefInnerIds.has(baseId)) {
       ctx.contentRefInnerIds.set(baseId, allocator(baseId));
     }
@@ -214,6 +218,8 @@ function liftBodyTranslate(node, transformation) {
       });
       const outerAnimTr = { keyframes: outerKfs };
       if (animTr.autoOrient) outerAnimTr.autoOrient = true;
+      const srcLoop = animTr.loop;
+      if (srcLoop !== void 0) outerAnimTr.loop = srcLoop;
       out.animate = { transform: outerAnimTr };
       const innerHasPivotedPart = kfs.some((kf) => {
         const v = kf.value || {};
@@ -235,7 +241,9 @@ function liftBodyTranslate(node, transformation) {
         delete node.animate.transform;
         if (node.animate && Object.keys(node.animate).length === 0) delete node.animate;
       } else {
-        node.animate.transform = { keyframes: innerKfs };
+        const innerAnimTr = { keyframes: innerKfs };
+        if (srcLoop !== void 0) innerAnimTr.loop = srcLoop;
+        node.animate.transform = innerAnimTr;
       }
       didLiftAnimate = true;
     }
@@ -899,10 +907,22 @@ var PxTriggerSchema = implementsInterface()(px.object({
   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(),
@@ -975,9 +995,10 @@ var PxRetimeEffectSchema = implementsInterface()(px.object({
   stretch: px.number().optional(),
   timeCrop: px.tuple([px.number(), px.number()]).optional()
 }));
-var PxRefEffectSchema = implementsInterface()(px.object({
+var PxCloneEffectSchema = implementsInterface()(px.object({
+  type: px.string().optional(),
   baseId: px.string().optional(),
-  type: px.string().optional()
+  retime: PxRetimeEffectSchema.optional()
 }));
 var PxGradientUnits = {
   userSpaceOnUse: "userSpaceOnUse",
@@ -1022,17 +1043,20 @@ var PxTextAlongPathEffectSchema = implementsInterface()(px.object({
   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(),
   maskedBy: PxMaskedByEffectSchema.optional(),
   trimPath: PxTrimPathEffectSchema.optional(),
-  retime: PxRetimeEffectSchema.optional(),
+  clone: PxCloneEffectSchema.optional(),
   isCombinedShape: px.boolean().optional(),
-  ref: PxRefEffectSchema.optional(),
   fillGradient: PxFillGradientEffectSchema.optional(),
   strokeGradient: PxStrokeGradientEffectSchema.optional(),
-  textAlongPath: PxTextAlongPathEffectSchema.optional()
+  textAlongPath: PxTextAlongPathEffectSchema.optional(),
+  text: PxTextEffectSchema.optional()
 }));
 function validateNodeEffects(root, opts) {
   const warnings = [];
@@ -1257,6 +1281,7 @@ function buildStopChildren(stops, ctx) {
   const animBlock = stops;
   const kfs = animBlock.keyframes;
   if (!Array.isArray(kfs) || !kfs.length) return [];
+  const loopFromSource = animBlock.loop;
   let stopCount = 0;
   for (const kf of kfs) {
     const v = (_a = kf.value) != null ? _a : kf.v;
@@ -1269,7 +1294,7 @@ function buildStopChildren(stops, ctx) {
     const s = (_d = (_c = firstKfValue == null ? void 0 : firstKfValue[i]) != null ? _c : prevDefinedStop(kfs, 0, i)) != null ? _d : { offset: i / Math.max(1, stopCount - 1), color: "#000000" };
     baselineStops.push({ offset: s.offset, color: s.color });
   }
-  return baselineStops.map((bs, i) => animatedStopNode(bs, kfs, i, ctx));
+  return baselineStops.map((bs, i) => animatedStopNode(bs, kfs, i, ctx, loopFromSource));
 }
 function staticStopNode(s) {
   return {
@@ -1278,7 +1303,7 @@ function staticStopNode(s) {
     stopColor: s.color
   };
 }
-function animatedStopNode(baseline, kfs, stopIdx, _ctx) {
+function animatedStopNode(baseline, kfs, stopIdx, _ctx, loop) {
   var _a, _b, _c, _d, _e;
   const colorKfs = [];
   const offsetKfs = [];
@@ -1303,8 +1328,14 @@ function animatedStopNode(baseline, kfs, stopIdx, _ctx) {
     stopColor: baseline.color
   };
   const animate = {};
-  if (colorKfs.length) animate.stopColor = { keyframes: colorKfs };
-  if (offsetVaries && offsetKfs.length) animate.offset = { keyframes: offsetKfs };
+  if (colorKfs.length) {
+    animate.stopColor = { keyframes: colorKfs };
+    if (loop !== void 0) animate.stopColor.loop = loop;
+  }
+  if (offsetVaries && offsetKfs.length) {
+    animate.offset = { keyframes: offsetKfs };
+    if (loop !== void 0) animate.offset.loop = loop;
+  }
   if (Object.keys(animate).length) stop.animate = animate;
   return stop;
 }
@@ -1369,9 +1400,11 @@ function wrapInversePart(inner, part, raw, origin, ctx) {
     return { type: "g", transform: { value: partsRecord(part, invertPartValue(part, v.value), origin) }, children: [inner] };
   }
   if (v.kind === "animated" /* Animated */) {
+    const animTr = { keyframes: v.keyframes.map((kf) => keyframeWith(kf, partsRecord(part, invertPartValue(part, kf.value), origin))) };
+    if (v.loop !== void 0) animTr.loop = v.loop;
     return {
       type: "g",
-      animate: { transform: { keyframes: v.keyframes.map((kf) => keyframeWith(kf, partsRecord(part, invertPartValue(part, kf.value), origin))) } },
+      animate: { transform: animTr },
       children: [inner]
     };
   }
@@ -1408,10 +1441,16 @@ function wrapInverseAnimatedBodyTransform(inner, node, _ctx) {
       scaleKfs.push(__spreadProps(__spreadValues({}, baseKf), { value: rec }));
     }
   }
+  const srcLoop = animTr == null ? void 0 : animTr.loop;
+  const withLoop = (kfs2) => {
+    const block = { keyframes: kfs2 };
+    if (srcLoop !== void 0) block.loop = srcLoop;
+    return block;
+  };
   let n = inner;
-  if (translateKfs.length) n = { type: "g", animate: { transform: { keyframes: translateKfs } }, children: [n] };
-  if (rotateKfs.length) n = { type: "g", animate: { transform: { keyframes: rotateKfs } }, children: [n] };
-  if (scaleKfs.length) n = { type: "g", animate: { transform: { keyframes: scaleKfs } }, children: [n] };
+  if (translateKfs.length) n = { type: "g", animate: { transform: withLoop(translateKfs) }, children: [n] };
+  if (rotateKfs.length) n = { type: "g", animate: { transform: withLoop(rotateKfs) }, children: [n] };
+  if (scaleKfs.length) n = { type: "g", animate: { transform: withLoop(scaleKfs) }, children: [n] };
   return n;
 }
 function nodeHasBodyTransform(node) {
@@ -1645,16 +1684,18 @@ function parseTranslateOnlyFromString(s, ctx) {
 
 // src/effects/refEffect.ts
 var CONTENT_SUBREF = "content";
-function applyRefAndTransformationEffect(node, ref, transformation, ctx) {
-  if (ref) {
-    const baseId = ref.baseId;
-    if (!baseId) {
-      ctx.errors.push("ref: missing baseId");
-    } else {
-      const targetId = ref.type === CONTENT_SUBREF ? ctx.contentRefInnerIds.get(baseId) || baseId : baseId;
-      node.href = "#" + targetId;
-    }
+function applyRefHref(node, clone2, ctx) {
+  if (!clone2) return;
+  const baseId = clone2.baseId;
+  if (!baseId) {
+    if (clone2.type === CONTENT_SUBREF) ctx.errors.push("clone: content ref missing baseId");
+    return;
   }
+  const targetId = clone2.type === CONTENT_SUBREF ? ctx.contentRefInnerIds.get(baseId) || baseId : baseId;
+  node.href = "#" + targetId;
+}
+function applyRefAndTransformationEffect(node, clone2, transformation, ctx) {
+  applyRefHref(node, clone2, ctx);
   return applyTransformationEffect(node, transformation, ctx);
 }
 
@@ -1765,22 +1806,32 @@ function concatRetime(child, parent) {
     stretch: parent.stretch * child.stretch
   };
 }
-function applyAllRetimeEffects(root, ctx) {
+function readCloneRetime(n) {
+  var _a, _b;
+  return (_b = (_a = n.effects) == null ? void 0 : _a.clone) == null ? void 0 : _b.retime;
+}
+function clearCloneRetime(n) {
   var _a;
+  const clone2 = (_a = n.effects) == null ? void 0 : _a.clone;
+  if (!clone2) return;
+  delete clone2.retime;
+  if (Object.keys(clone2).length === 0) delete n.effects.clone;
+  if (n.effects && Object.keys(n.effects).length === 0) delete n.effects;
+}
+function applyAllRetimeEffects(root, ctx) {
   ctx.idMap.clear();
   indexById(root, ctx.idMap);
   const sites = [];
   const collect = (n) => {
-    var _a2, _b;
-    if ((_a2 = n.effects) == null ? void 0 : _a2.retime) sites.push(n);
-    (_b = n.children) == null ? void 0 : _b.forEach(collect);
+    var _a;
+    if (readCloneRetime(n)) sites.push(n);
+    (_a = n.children) == null ? void 0 : _a.forEach(collect);
   };
   collect(root);
   for (const useNode of sites) {
-    const retime = (_a = useNode.effects) == null ? void 0 : _a.retime;
+    const retime = readCloneRetime(useNode);
     if (!retime) continue;
-    delete useNode.effects.retime;
-    if (Object.keys(useNode.effects).length === 0) delete useNode.effects;
+    clearCloneRetime(useNode);
     materialiseRetime(useNode, asRetime(retime), ctx);
   }
 }
@@ -1804,7 +1855,6 @@ function materialiseRetime(useNode, retime, ctx) {
   }
 }
 function buildChainClone(targetId, accum, ctx, chain) {
-  var _a, _b;
   if (chain.has(targetId)) {
     ctx.errors.push('retime: loop via "' + targetId + '"');
     return void 0;
@@ -1821,25 +1871,43 @@ function buildChainClone(targetId, accum, ctx, chain) {
   } else {
     remapKeyframeTimes(cloneNode, accum.start, accum.stretch);
   }
-  if ((_a = cloneNode.effects) == null ? void 0 : _a.retime) {
-    delete cloneNode.effects.retime;
-    if (Object.keys(cloneNode.effects).length === 0) delete cloneNode.effects;
-  }
+  clearCloneRetime(cloneNode);
   if (target.type === "use" && target.href) {
     const subId = stripHash(target.href);
     if (subId) {
-      const innerRetime = (_b = target.effects) == null ? void 0 : _b.retime;
+      const innerRetime = readCloneRetime(target);
       const subAccum = innerRetime ? concatRetime(asRetime(innerRetime), accum) : accum;
       const subChain = new Set(chain);
       subChain.add(targetId);
       const subId2 = buildChainClone(subId, subAccum, ctx, subChain);
       if (subId2) cloneNode.href = "#" + subId2;
     }
+  } else {
+    materialiseNestedRetimeUses(cloneNode, accum, ctx, chain, targetId);
   }
   ctx.defs.push(cloneNode);
   if (typeof cloneNode.id === "string") ctx.idMap.set(cloneNode.id, cloneNode);
   return typeof cloneNode.id === "string" ? cloneNode.id : void 0;
 }
+function materialiseNestedRetimeUses(node, accum, ctx, chain, parentTargetId) {
+  const visit = (n) => {
+    var _a;
+    const retime = readCloneRetime(n);
+    if (n.type === "use" && retime && n.href) {
+      const subId = stripHash(n.href);
+      if (subId) {
+        const subAccum = concatRetime(asRetime(retime), accum);
+        const subChain = new Set(chain);
+        subChain.add(parentTargetId);
+        const subId2 = buildChainClone(subId, subAccum, ctx, subChain);
+        if (subId2) n.href = "#" + subId2;
+      }
+      clearCloneRetime(n);
+    }
+    (_a = n.children) == null ? void 0 : _a.forEach(visit);
+  };
+  visit(node);
+}
 function remapKeyframeTimes(node, start, stretch) {
   var _a;
   remapKeyframeTimesOnly(node, start, stretch);
@@ -1884,12 +1952,14 @@ function applyAnimatableNumber(node, attrName, raw) {
     node[attrName] = String(raw);
     return;
   }
-  if (typeof raw === "object") {
+  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 || {});
-      animate[attrName] = { keyframes: obj.keyframes };
+      const block = { keyframes: obj.keyframes };
+      if (obj.loop !== void 0) block.loop = obj.loop;
+      animate[attrName] = block;
       node.animate = animate;
       return;
     }
@@ -1900,6 +1970,61 @@ function applyAnimatableNumber(node, attrName, raw) {
   }
 }
 
+// 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/PxAnimatorUtil.ts
 function bezierToSvgPath(path) {
   var _a, _b, _c, _d;
@@ -2272,6 +2397,24 @@ function bezier2D_arcLengthLUT(P0, P1, P2, P3, steps = 100) {
   }
   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;
@@ -2294,6 +2437,437 @@ function invertEasing(easing) {
   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,
+    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/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) {
+  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 so = readAnimatable(startOffset);
+  if (so.kind === "animated" /* Animated */ && so.keyframes.length >= 2) {
+    return toGroup(node, buildAnimatedAlongPath(cells, sampler, so.keyframes, so.loop, create), 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 placements = cells.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) {
+  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 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 = [sampleKf(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;
+        kfs.push(sampleKf(o0 + f * (o1 - o0) + c.midBase, t0 + f * (t1 - t0)));
+      }
+    }
+    const transform = { keyframes: kfs };
+    if (loop !== void 0) transform.loop = loop;
+    out.push(create("path", __spreadProps(__spreadValues({ d }, paintProps(c.paint)), { animate: { transform } }), []));
+  }
+  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);
+  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) {
+  if (!ctx.glyphs) {
+    ctx.warnings.push("textGlyphs: no definitions.glyphs");
+    return null;
+  }
+  return materialiseGlyphTextAlongPath(node, pathD, startOffset, { glyphs: ctx.glyphs, warnings: ctx.warnings }, textLength);
+}
+
 // src/PxMotionPath.ts
 function getKfTranslate(kf) {
   var _a;
@@ -2737,12 +3311,12 @@ function parseSvgPathToBezier(d) {
   }
   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;
 }
@@ -2952,16 +3526,67 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
       looped.push(pushed);
     }
   }
-  for (let rep = 0; rep < fullReps; rep++) {
-    const distFromBoundary = loop.before ? fullReps - 1 - rep : rep;
-    const isReversed = !!loop.alternate && distFromBoundary % 2 === 0;
-    const repStart = fillStart + rep * segDuration;
-    appendRep(repStart, isReversed);
+  function appendRepTail(repStart, isReversed, tailFraction) {
+    let entries;
+    if (isReversed) {
+      entries = [];
+      for (let i = template.length - 1; i >= 0; i--) {
+        entries.push({
+          relT: 1 - template[i].relT,
+          v: template[i].v,
+          e: i > 0 ? reverseEasing(template[i - 1].e) : void 0,
+          tangentIn: template[i].tangentOut,
+          tangentOut: template[i].tangentIn
+        });
+      }
+    } else {
+      entries = template;
+    }
+    const startRelT = 1 - tailFraction;
+    for (let i = 0; i < entries.length; i++) {
+      const entry = entries[i];
+      if (entry.relT < startRelT - 1e-9) continue;
+      const prev = entries[i - 1];
+      if (prev && prev.relT < startRelT - 1e-9 && entry.relT > startRelT + 1e-9) {
+        const intervalSpan = entry.relT - prev.relT;
+        const localFrac = (startRelT - prev.relT) / intervalSpan;
+        const easedFrac = prev.e ? cubicBezier(prev.e)(localFrac) : localFrac;
+        const startValue = interpolateValue(propName, prev.v, entry.v, easedFrac);
+        const { right: rightEasing } = splitEasing(prev.e, localFrac);
+        looped.push({ t: repStart, v: startValue, e: rightEasing });
+      }
+      const pushed = {
+        t: repStart + (entry.relT - startRelT) * segDuration,
+        v: entry.v,
+        e: i < entries.length - 1 ? entry.e : void 0
+      };
+      if (entry.tangentIn) pushed.tangentIn = entry.tangentIn;
+      if (entry.tangentOut) pushed.tangentOut = entry.tangentOut;
+      looped.push(pushed);
+    }
   }
-  if (partialFraction > 1e-9) {
-    const isReversed = !!loop.alternate && fullReps % 2 === 0;
-    const repStart = fillStart + fullReps * segDuration;
-    appendRep(repStart, isReversed, partialFraction);
+  if (loop.before) {
+    if (partialFraction > 1e-9) {
+      const isReversed = !!loop.alternate && fullReps % 2 === 0;
+      appendRepTail(fillStart, isReversed, partialFraction);
+    }
+    for (let rep = 0; rep < fullReps; rep++) {
+      const distFromBoundary = fullReps - 1 - rep;
+      const isReversed = !!loop.alternate && distFromBoundary % 2 === 0;
+      const repStart = fillStart + remainder + rep * segDuration;
+      appendRep(repStart, isReversed);
+    }
+  } else {
+    for (let rep = 0; rep < fullReps; rep++) {
+      const isReversed = !!loop.alternate && rep % 2 === 0;
+      const repStart = fillStart + rep * segDuration;
+      appendRep(repStart, isReversed);
+    }
+    if (partialFraction > 1e-9) {
+      const isReversed = !!loop.alternate && fullReps % 2 === 0;
+      const repStart = fillStart + fullReps * segDuration;
+      appendRep(repStart, isReversed, partialFraction);
+    }
   }
   if (loop.before) {
     return [...looped, ...keyframes];
@@ -3280,7 +3905,6 @@ function applyTrimPathEffect(node, trimPath, isCombinedShape, ctx) {
   if (!trimPath) return node;
   const trimAllAsOne = !!trimPath.trimAllAsOne;
   const leafEntries = [];
-  let acc = 0;
   const measure = (n) => {
     if (Array.isArray(n.children) && n.children.length > 0) {
       for (const ch of n.children) measure(ch);
@@ -3292,15 +3916,22 @@ function applyTrimPathEffect(node, trimPath, isCombinedShape, ctx) {
     if (!subpaths.length) return;
     const entry = { leaf: n, subpaths: [] };
     for (const sp of subpaths) {
-      if (!trimAllAsOne) acc = 0;
       const lengthPx = pxBezierPathLength(sp);
-      entry.subpaths.push({ subpath: sp, lengthPx, startOffsetPx: acc });
-      acc += lengthPx;
+      entry.subpaths.push({ subpath: sp, lengthPx, startOffsetPx: 0 });
     }
     leafEntries.push(entry);
   };
   measure(node);
   if (!leafEntries.length) return node;
+  let acc = 0;
+  const iterOrder = trimAllAsOne ? [...leafEntries].reverse() : leafEntries;
+  for (const entry of iterOrder) {
+    for (const sp of entry.subpaths) {
+      if (!trimAllAsOne) acc = 0;
+      sp.startOffsetPx = acc;
+      acc += sp.lengthPx;
+    }
+  }
   const chainLengthPx = acc;
   if (trimAllAsOne && chainLengthPx < 1e-3) return node;
   const offsetReadRaw = readAnimatable(trimPath.offset);
@@ -3427,10 +4058,12 @@ function computeAnimAttr(read, map) {
         value: map((_c = kf.value) != null ? _c : kf.v),
         easing: (_d = kf.easing) != null ? _d : kf.e
       };
-    })
+    }),
+    loop: read.loop
   };
 }
 function applyAttr(node, attrName, attr) {
+  var _a, _b;
   if (!attr) return;
   if (attr.kind === "static" /* Static */) {
     node[attrName] = attr.value;
@@ -3438,9 +4071,16 @@ function applyAttr(node, attrName, attr) {
   }
   const prevAnimate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
   const animate = __spreadValues({}, prevAnimate || {});
-  animate[attrName] = { keyframes: attr.keyframes };
+  const block = { keyframes: attr.keyframes };
+  if (attr.loop !== void 0) block.loop = attr.loop;
+  animate[attrName] = block;
   node.animate = animate;
+  const firstKf = attr.keyframes[0];
+  if (firstKf && ((_a = firstKf.value) != null ? _a : firstKf.v) !== void 0) {
+    node[attrName] = (_b = firstKf.value) != null ? _b : firstKf.v;
+  }
 }
+var OPACITY_STEP_MS = 10;
 function computeOpacityFromRange(rangeRead) {
   var _a, _b, _c, _d, _e, _f;
   const hide = (v) => v[0] === v[1];
@@ -3466,9 +4106,9 @@ function computeOpacityFromRange(rangeRead) {
     const nextHide = nextKf ? thisHide && hide((_f = nextKf.value) != null ? _f : nextKf.v) : thisHide;
     if (prevHide && !nextHide) {
       out.push({ time: t, value: 0 });
-      out.push({ time: t + 1, value: 1 });
+      out.push({ time: t + OPACITY_STEP_MS, value: 1 });
     } else if (!prevHide && nextHide) {
-      out.push({ time: t - 1, value: 1 });
+      out.push({ time: t - OPACITY_STEP_MS, value: 1 });
       out.push({ time: t, value: 0 });
     }
   }
@@ -3601,6 +4241,7 @@ function rectToPathD(node) {
 
 // src/effects/PlayerEffectsUtil.ts
 function applyPlayerEffects(root) {
+  var _a, _b;
   const ctx = {
     defs: [],
     warnings: [],
@@ -3608,7 +4249,11 @@ function applyPlayerEffects(root) {
     idMap: /* @__PURE__ */ new Map(),
     nextId: 0,
     contentRefInnerIds: /* @__PURE__ */ new Map(),
-    maskAncestorChains: /* @__PURE__ */ new Map()
+    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,
+    glyphs: (_b = getDefs(root)) == null ? void 0 : _b.glyphs
   };
   const working = clone(root);
   indexById(working, ctx.idMap);
@@ -3620,27 +4265,46 @@ function applyPlayerEffects(root) {
   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, retime, ref, fillGradient, strokeGradient, textAlongPath } = fx != null ? fx : {};
+  const { transformation, repeater, maskedBy, trimPath, clone: cloneFx, fillGradient, strokeGradient, textAlongPath, 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 (textAlongPath) {
+      const pathNode = typeof textAlongPath.href === "string" ? ctx.idMap.get(textAlongPath.href) : void 0;
+      const pathD = pathNode && typeof pathNode.d === "string" ? pathNode.d : void 0;
+      const rawTL = textAlongPath.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, textAlongPath.startOffset, textLength);
+      if (glyphed) {
+        n = glyphed;
+        consumedByGlyphs = true;
+      }
+    } else {
+      n = applyTextGlyphsEffect(n, text, ctx);
+      consumedByGlyphs = true;
+    }
+  }
+  if (!consumedByGlyphs) n = applyTextAlongPathEffect(n, textAlongPath, ctx);
   n = applyFillGradientEffect(n, fillGradient, ctx);
   n = applyStrokeGradientEffect(n, strokeGradient, ctx);
   n = applyTrimPathEffect(n, trimPath, isCombinedShape, ctx);
   n = applyRepeaterEffect(n, repeater, ctx);
   n = applyMaskedByEffect(n, maskedBy, transformation, ctx);
   if (innerIdForContentRef) {
+    applyRefHref(n, cloneFx, ctx);
     n = splitForContentRef(n, transformation, originalId, innerIdForContentRef, ctx);
   } else {
-    n = applyRefAndTransformationEffect(n, ref, transformation, ctx);
+    n = applyRefAndTransformationEffect(n, cloneFx, transformation, ctx);
   }
-  if (retime) node.effects = { retime };
+  if (cloneFx == null ? void 0 : cloneFx.retime) node.effects = { clone: { retime: cloneFx.retime } };
   if (originalId) ctx.idMap.set(originalId, n);
   return n;
 }
@@ -3657,13 +4321,30 @@ function materialiseAnimatedUseInstances(root) {
   if (animatedIds.size === 0) return root;
   let idCounter = 0;
   const genId3 = () => "_lw_use_mat_" + ++idCounter;
+  const rootViewport = readRootViewport(root);
   const defsCollector = [];
-  const walked = walkAndMaterialise2(root, idMap, animatedIds, genId3, defsCollector);
+  const walked = walkAndMaterialise2(root, idMap, animatedIds, genId3, defsCollector, rootViewport);
   if (defsCollector.length === 0) return walked;
   const defsNode = { type: "defs", children: defsCollector };
   const newChildren = [...(_a = walked.children) != null ? _a : [], defsNode];
   return __spreadProps(__spreadValues({}, walked), { children: newChildren });
 }
+function readRootViewport(root) {
+  const vb = parseViewBox(root.viewBox);
+  if (vb) return [vb[2], vb[3]];
+  const w = numericAttr(root.width);
+  const h = numericAttr(root.height);
+  if (w !== void 0 && h !== void 0) return [w, h];
+  return [1, 1];
+}
+function numericAttr(v) {
+  if (typeof v === "number") return v;
+  if (typeof v === "string") {
+    const n = parseFloat(v);
+    return Number.isFinite(n) ? n : void 0;
+  }
+  return void 0;
+}
 function buildIdMap(root) {
   const map = /* @__PURE__ */ new Map();
   const visit = (n) => {
@@ -3715,16 +4396,22 @@ function stripHash2(href) {
   if (typeof href !== "string") return void 0;
   return href.startsWith("#") ? href.slice(1) : href;
 }
-function materialiseOneUse(useNode, target, idMap, animatedIds, genId3, defsCollector) {
+function materialiseOneUse(useNode, target, idMap, animatedIds, genId3, defsCollector, rootViewport) {
+  var _a, _b, _c, _d;
   const clone2 = deepClonePxNode(target);
   regenerateIdsAndRewriteRefs(clone2, genId3);
-  const rewrittenClone = clone2.type === "symbol" ? rewriteSymbolRootToGroup(clone2, genId3, defsCollector) : clone2;
-  const materialisedClone = walkAndMaterialise2(rewrittenClone, idMap, animatedIds, genId3, defsCollector);
+  const symbolViewBox = clone2.type === "symbol" ? parseViewBox(clone2.viewBox) : void 0;
+  const useW = (_b = (_a = numericAttr(useNode.width)) != null ? _a : symbolViewBox == null ? void 0 : symbolViewBox[2]) != null ? _b : rootViewport[0];
+  const useH = (_d = (_c = numericAttr(useNode.height)) != null ? _c : symbolViewBox == null ? void 0 : symbolViewBox[3]) != null ? _d : rootViewport[1];
+  const rewrittenClone = clone2.type === "symbol" ? rewriteSymbolRootToGroup(clone2, genId3, defsCollector, useW, useH) : clone2;
+  const materialisedClone = walkAndMaterialise2(rewrittenClone, idMap, animatedIds, genId3, defsCollector, rootViewport);
   const newNode = __spreadProps(__spreadValues({}, useNode), { type: "g", children: [materialisedClone] });
   delete newNode.href;
+  delete newNode.width;
+  delete newNode.height;
   return applyUseOffsetToG(newNode);
 }
-function rewriteSymbolRootToGroup(symbolNode, genId3, defsCollector) {
+function rewriteSymbolRootToGroup(symbolNode, genId3, defsCollector, useW, useH) {
   const viewBox = parseViewBox(symbolNode.viewBox);
   const g = __spreadProps(__spreadValues({}, symbolNode), { type: "g" });
   delete g.viewBox;
@@ -3733,9 +4420,14 @@ function rewriteSymbolRootToGroup(symbolNode, genId3, defsCollector) {
   delete g.height;
   if (!viewBox) return g;
   const [vbX, vbY, vbW, vbH] = viewBox;
-  if (vbX !== 0 || vbY !== 0) {
-    g.transform = "translate(" + -vbX + "," + -vbY + ")";
-  }
+  const scale = vbW > 0 && vbH > 0 ? Math.min(useW / vbW, useH / vbH) : 1;
+  const xOff = (useW - vbW * scale) / 2;
+  const yOff = (useH - vbH * scale) / 2;
+  const parts = [];
+  if (xOff !== 0 || yOff !== 0) parts.push("translate(" + xOff + "," + yOff + ")");
+  if (scale !== 1) parts.push("scale(" + scale + ")");
+  if (vbX !== 0 || vbY !== 0) parts.push("translate(" + -vbX + "," + -vbY + ")");
+  if (parts.length) g.transform = parts.join("");
   const clipId = genId3();
   defsCollector.push({
     type: "clipPath",
@@ -3751,18 +4443,18 @@ function parseViewBox(v) {
   if (parts.length < 4 || parts.some((n) => !Number.isFinite(n))) return void 0;
   return [parts[0], parts[1], parts[2], parts[3]];
 }
-function walkAndMaterialise2(node, idMap, animatedIds, genId3, defsCollector) {
+function walkAndMaterialise2(node, idMap, animatedIds, genId3, defsCollector, rootViewport) {
   if (node.type === "use" && typeof node.href === "string") {
     const targetId = stripHash2(node.href);
     if (targetId && animatedIds.has(targetId)) {
       const target = idMap.get(targetId);
-      if (target) return materialiseOneUse(node, target, idMap, animatedIds, genId3, defsCollector);
+      if (target) return materialiseOneUse(node, target, idMap, animatedIds, genId3, defsCollector, rootViewport);
     }
   }
   if (!node.children) return node;
   let changed = false;
   const newChildren = node.children.map((ch) => {
-    const m = walkAndMaterialise2(ch, idMap, animatedIds, genId3, defsCollector);
+    const m = walkAndMaterialise2(ch, idMap, animatedIds, genId3, defsCollector, rootViewport);
     if (m !== ch) changed = true;
     return m;
   });
@@ -3778,6 +4470,36 @@ function materialiseAllInTree(doc, engine, opts) {
   if (engine === PxAnimatorEngine.webapi) {
     root = materialiseMotionPathsInTree(root, opts == null ? void 0 : opts.motionPath);
     root = materialiseAnimatedUseInstances(root);
+    root = pruneUnreferencedDefs(root);
+  }
+  return root;
+}
+function pruneUnreferencedDefs(root) {
+  const stripHash3 = (h) => h.startsWith("#") ? h.slice(1) : h;
+  const walk = (n, fn) => {
+    var _a;
+    fn(n);
+    (_a = n.children) == null ? void 0 : _a.forEach((c) => walk(c, fn));
+  };
+  let changed = true;
+  while (changed) {
+    changed = false;
+    const referenced = /* @__PURE__ */ new Set();
+    walk(root, (n) => {
+      if (n.type === "use" && typeof n.href === "string") referenced.add(stripHash3(n.href));
+    });
+    walk(root, (n) => {
+      if (!n.children) return;
+      let kept = n.children;
+      if (n.type === "defs") {
+        kept = kept.filter((c) => !((c.type === "g" || c.type === "symbol") && typeof c.id === "string" && !referenced.has(c.id)));
+      }
+      kept = kept.filter((c) => !(c.type === "defs" && (!c.children || c.children.length === 0)));
+      if (kept.length !== n.children.length) {
+        n.children = kept;
+        changed = true;
+      }
+    });
   }
   return root;
 }
@@ -3810,6 +4532,13 @@ var URL_VALUE_ATTRS_LOWER = /* @__PURE__ */ new Set([
 ]);
 var IMAGE_REF_ATTRS_LOWER = /* @__PURE__ */ new Set(["href", "xlink:href", "src"]);
 var DATA_RASTER_IMAGE_RE = /^data:image\/(?:png|jpe?g|gif|webp|bmp);base64,/i;
+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(str2) {
+  const m = DATA_IMAGE_BASE64_PAYLOAD_RE.exec(str2);
+  return !!m && BASE64_RASTER_MAGICS.some((magic) => m[1].startsWith(magic));
+}
 function isDangerousAttrName(nameLower) {
   if (nameLower.startsWith("on")) return true;
   return false;
@@ -3821,19 +4550,19 @@ function sanitiseAttributeValue(name, value) {
     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)) return value;
-    console.warn('Attribute "' + nameLower + '" blocked: must be #id, url(#id), or base64 raster data: URI, got:', 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;
   }
   return value;
@@ -3862,7 +4591,7 @@ function createElement(tagName, normalisedProps, style, children, textContent) {
   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") {
@@ -3898,7 +4627,7 @@ function renderNode(node, defs) {
   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) {
@@ -4930,6 +5659,7 @@ export {
   PxAttrValueSchema,
   PxBezierPathSchema,
   PxBindingSchema,
+  PxCloneEffectSchema,
   PxDefsSchema,
   PxEasingOrRefSchema,
   PxEffectsSchema,
@@ -4945,12 +5675,12 @@ export {
   PxNodeBase,
   PxNodeSchema,
   PxPropertyAnimationSchema,
-  PxRefEffectSchema,
   PxRepeaterEffectSchema,
   PxRetimeEffectSchema,
   PxStrokeGradientEffectSchema,
   PxSvgNodeExtra,
   PxTextAlongPathEffectSchema,
+  PxTextEffectSchema,
   PxTransformPartsSchema,
   PxTransformValueSchema,
   PxTransformationEffectSchema,
@@ -4978,9 +5708,13 @@ export {
   getNormalizedProps,
   isPxElementFileFormat,
   isPxElementFileFormatDeep,
+  jsonElementFactory,
   loadTagAnimators,
   materialiseAllInTree,
   materialiseAnimatedUseInstances,
+  materialiseGlyphText,
+  materialiseGlyphTextAlongPath,
+  materialiseGlyphTextHorizontal,
   materialiseInternalLoopsInPropAnim,
   materialiseInternalLoopsInTree,
   materialiseMotionPathInPropAnim,