@pixodesk/svg-animator-web 1.0.19 → 1.0.20

package/dist/index.cjs

@@ -100,6 +100,7 @@ __export(index_exports, {
   createAnimatorImpl: () => createAnimatorImpl,
   createBasicFrameLoopAnimator: () => createBasicFrameLoopAnimator,
   createFrameLoopAnimator: () => createFrameLoopAnimator,
+  createPathSampler: () => createPathSampler,
   createWebApiAnimator: () => createWebApiAnimator,
   describeSchema: () => describeSchema,
   diffInEffect: () => diffInEffect,
@@ -114,6 +115,7 @@ __export(index_exports, {
   isPxElementFileFormat: () => isPxElementFileFormat,
   isPxElementFileFormatDeep: () => isPxElementFileFormatDeep,
   jsonElementFactory: () => jsonElementFactory,
+  layoutGlyphTextChars: () => layoutGlyphTextChars,
   loadTagAnimators: () => loadTagAnimators,
   materialiseAllInTree: () => materialiseAllInTree,
   materialiseAnimatedUseInstances: () => materialiseAnimatedUseInstances,
@@ -1090,6 +1092,10 @@ var PxMaskedByEffectSchema = implementsInterface()(px.object({
   maskUnits: px.string().optional(),
   maskContentUnits: px.string().optional()
 }));
+var PxClipPathEffectSchema = implementsInterface()(px.object({
+  d: px.string().optional(),
+  animate: PxPropertyAnimationSchema.optional()
+}));
 var PxTrimPathEffectSchema = implementsInterface()(px.object({
   offset: PxAnimatableNumberSchema.optional(),
   range: PxAnimatableVec2Schema.optional(),
@@ -1157,6 +1163,7 @@ var PxEffectsSchema = implementsInterface()(px.object({
   transformation: PxTransformationEffectSchema.optional(),
   repeater: PxRepeaterEffectSchema.optional(),
   maskedBy: PxMaskedByEffectSchema.optional(),
+  clipPath: PxClipPathEffectSchema.optional(),
   trimPath: PxTrimPathEffectSchema.optional(),
   clone: PxCloneEffectSchema.optional(),
   isCombinedShape: px.boolean().optional(),
@@ -1463,6 +1470,17 @@ function formatOffset(o) {
   return pct + "%";
 }
 
+// src/effects/clipPathEffect.ts
+function applyClipPathEffect(node, fx, ctx) {
+  if (!fx || !fx.d && !fx.animate) return node;
+  const clipId = genId(ctx, "clip");
+  const pathChild = { type: "path", d: fx.d };
+  if (fx.animate) pathChild.animate = { d: fx.animate };
+  ctx.defs.push({ type: "clipPath", id: clipId, children: [pathChild] });
+  node.clipPath = "url(#" + clipId + ")";
+  return node;
+}
+
 // src/effects/maskedByEffect.ts
 function applyMaskedByEffect(node, fx, transformation, ctx) {
   if (!fx) return node;
@@ -1905,6 +1923,9 @@ function synthesiseScale(raw, i) {
 var RETIME_MATERIALISATION_MODE_INLINE_G = false;
 function asRetime(r) {
   var _a, _b;
+  if (r.timeCrop) {
+    console.warn("retime: `timeCrop` is not supported yet and will be ignored");
+  }
   return { start: (_a = r.start) != null ? _a : 0, stretch: (_b = r.stretch) != null ? _b : 1 };
 }
 function concatRetime(child, parent) {
@@ -2323,6 +2344,8 @@ var SVG_CAMEL_CASE_ATTRS = /* @__PURE__ */ new Set([
   // Filter
   "filterUnits",
   "primitiveUnits",
+  "tableValues",
+  // feFuncR/G/B/A transfer table (type="table")
   "stdDeviation",
   "baseFrequency",
   "numOctaves",
@@ -2581,6 +2604,9 @@ function createPathSampler(d) {
     totalLength,
     closed,
     sampleAtDistance(dist) {
+      if (closed && totalLength > 0 && (dist < 0 || dist > totalLength)) {
+        return sampleOn((dist % totalLength + totalLength) % totalLength);
+      }
       if (!closed && (dist < 0 || dist > totalLength)) {
         const edge = dist < 0 ? 0 : totalLength;
         const p = sampleOn(edge);
@@ -2837,6 +2863,19 @@ function soleFontOf(glyphs) {
   const names = Object.keys(glyphs);
   return names.length === 1 ? glyphs[names[0]] : void 0;
 }
+var MISSING_GLYPH_ADVANCE_EM = 0.6;
+function missingGlyphBoxEm(advanceEm, ascentEm) {
+  if (advanceEm <= 0 || ascentEm <= 0) return "";
+  const inset = 0.08;
+  const x0 = advanceEm * inset, x1 = advanceEm * (1 - inset);
+  const y1 = -ascentEm * (1 - inset);
+  const bw = x1 - x0, bh = -y1;
+  const t = Math.max(1, Math.min(bw, bh) * 0.12);
+  const outer = "M" + x0 + " 0L" + x1 + " 0L" + x1 + " " + y1 + "L" + x0 + " " + y1 + "Z";
+  if (bw <= 2 * t || bh <= 2 * t) return outer;
+  const ix0 = x0 + t, ix1 = x1 - t, iyb = -t, iyt = y1 + t;
+  return outer + "M" + ix0 + " " + iyb + "L" + ix0 + " " + iyt + "L" + ix1 + " " + iyt + "L" + ix1 + " " + iyb + "Z";
+}
 function materialiseGlyphTextHorizontal(node, opts) {
   var _a, _b, _c, _d;
   const { glyphs, create = jsonElementFactory, warnings } = opts;
@@ -2846,15 +2885,26 @@ function materialiseGlyphTextHorizontal(node, opts) {
   const lines = [{ start: pen.x, end: pen.x }];
   let line = 0;
   const renderChars = (content, s) => {
+    var _a2;
     const gf = glyphFontFor(s, glyphs, soleFont, warnings);
-    if (!gf) return;
-    const scale = s.fontSize / gf.unitsPerEm;
+    const upm = (gf == null ? void 0 : gf.unitsPerEm) || 1e3;
+    const scale = s.fontSize / upm;
+    const ascentEm = (_a2 = gf == null ? void 0 : gf.ascent) != null ? _a2 : 0.9 * upm;
     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);
+      const g = gf == null ? void 0 : 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.width * scale;
+      } else if (/\S/.test(ch)) {
+        const advEm = g && g.width > 0 ? g.width : MISSING_GLYPH_ADVANCE_EM * upm;
+        placements.push({ glyphD: missingGlyphBoxEm(advEm, ascentEm), m: [scale, 0, 0, scale, pen.x, pen.y], paint, line, x: pen.x, y: pen.y, scale });
+        pen.x += advEm * scale;
+      } else {
+        pen.x += (g ? g.width : 0) * scale;
+      }
+      pen.x += s.letterSpacing + (ch === " " ? s.wordSpacing : 0);
       lines[line].end = pen.x;
     }
   };
@@ -2889,24 +2939,152 @@ function materialiseGlyphTextHorizontal(node, opts) {
   }
   return toGroup(node, buildPaths(placements, create, warnings), create);
 }
+function layoutGlyphTextChars(node, opts) {
+  var _a, _b, _c, _d, _e;
+  if ((_a = opts.alongPath) == null ? void 0 : _a.pathD) return layoutGlyphTextCharsAlongPath(node, opts.alongPath.pathD, opts);
+  const { glyphs, warnings } = opts;
+  const soleFont = soleFontOf(glyphs);
+  const pen = { x: (_b = parseLen(node.x)) != null ? _b : 0, y: (_c = parseLen(node.y)) != null ? _c : 0 };
+  const boxes = [];
+  const lines = [{ start: pen.x, end: pen.x }];
+  let line = 0;
+  const renderChars = (content, s) => {
+    var _a2;
+    const gf = glyphFontFor(s, glyphs, soleFont, warnings);
+    const upm = (gf == null ? void 0 : gf.unitsPerEm) || 1e3;
+    const scale = s.fontSize / upm;
+    const ascent = ((_a2 = gf == null ? void 0 : gf.ascent) != null ? _a2 : 0.9 * upm) * scale;
+    for (let i = 0; i < content.length; i++) {
+      const ch = content.charAt(i);
+      const g = gf == null ? void 0 : gf.glyphs[ch];
+      const advance = (g ? g.width : 0) * scale + s.letterSpacing + (ch === " " ? s.wordSpacing : 0);
+      boxes.push({ x: pen.x, y: pen.y, width: advance, ascent, fontSize: s.fontSize, line });
+      pen.x += advance;
+      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 = (_d = str(node[TEXT_ATTR])) != null ? _d : str(node[TEXT_CONTENT_ATTR]);
+  if (rootContent && !((_e = node.children) == null ? void 0 : _e.length)) renderChars(rootContent, rootStyle);
+  const anchor = str(node.textAnchor);
+  if (anchor === "middle" || anchor === "end") {
+    for (const b of boxes) {
+      const w = lines[b.line].end - lines[b.line].start;
+      b.x += anchor === "middle" ? -w / 2 : -w;
+    }
+  }
+  return boxes.map((_f) => {
+    var _g = _f, { line: _l } = _g, b = __objRest(_g, ["line"]);
+    return b;
+  });
+}
+function layoutGlyphTextCharsAlongPath(node, pathD, opts) {
+  var _a;
+  const { glyphs, warnings, alongPath } = opts;
+  const sampler = createPathSampler(pathD);
+  if (!sampler) {
+    warnings == null ? void 0 : warnings.push("textGlyphs: unparsable along-path geometry (caret)");
+    return [];
+  }
+  const soleFont = soleFontOf(glyphs);
+  const chars = [];
+  let adv = 0;
+  const walk = (el, parentStyle) => {
+    var _a2, _b, _c;
+    const s = resolveStyle(el, parentStyle);
+    const content = (_a2 = str(el[TEXT_ATTR])) != null ? _a2 : str(el[TEXT_CONTENT_ATTR]);
+    if (content && !((_b = el.children) == null ? void 0 : _b.length)) {
+      const gf = glyphFontFor(s, glyphs, soleFont, warnings);
+      const upm = (gf == null ? void 0 : gf.unitsPerEm) || 1e3;
+      const scale = s.fontSize / upm;
+      const ascent = ((_c = gf == null ? void 0 : gf.ascent) != null ? _c : 0.9 * upm) * scale;
+      for (let i = 0; i < content.length; i++) {
+        const ch = content.charAt(i);
+        const g = gf == null ? void 0 : gf.glyphs[ch];
+        const glyphW = (g ? g.width : 0) * scale;
+        const advance = glyphW + s.letterSpacing + (ch === " " ? s.wordSpacing : 0);
+        chars.push({ advStart: adv, advEnd: adv + advance, glyphW, ascent, fontSize: s.fontSize });
+        adv += advance;
+      }
+    }
+    if (el.children) for (const ch of el.children) walk(ch, s);
+  };
+  walk(node, rootStyleOf(node));
+  const width = adv;
+  const k = (alongPath == null ? void 0 : alongPath.textLength) && alongPath.textLength > 0 && width > 0 ? alongPath.textLength / width : 1;
+  const so = readAnimatable(alongPath == null ? void 0 : alongPath.startOffset);
+  const { along: alongOffset, perp } = alongPathNodeOffsets(node);
+  const base = alongOffset + (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 withPerp = (p) => ({
+    x: p.x - perp * Math.sin(p.angle),
+    y: p.y + perp * Math.cos(p.angle),
+    angle: p.angle
+  });
+  return chars.map((c) => {
+    const dStart = base + c.advStart * k;
+    const dEnd = base + c.advEnd * k;
+    const p0 = withPerp(sampler.sampleAtDistance(dStart));
+    const p1 = withPerp(sampler.sampleAtDistance(dEnd));
+    const glyphMid = sampler.sampleAtDistance(base + (c.advStart + c.glyphW / 2) * k);
+    return {
+      x: p0.x,
+      y: p0.y,
+      width: c.advEnd - c.advStart,
+      ascent: c.ascent,
+      fontSize: c.fontSize,
+      endX: p1.x,
+      endY: p1.y,
+      rotation: glyphMid.angle * 180 / Math.PI
+    };
+  });
+}
 function collectAlongPathCells(node, glyphs, soleFont, warnings) {
   const cells = [];
   let adv = 0;
   const walk = (el, parentStyle) => {
-    var _a, _b;
+    var _a, _b, _c;
     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 ascentEm = (_c = gf.ascent) != null ? _c : 0.9 * 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 (g && g.d) {
+            const glyphAdv = g.width * scale;
+            cells.push({ glyphD: g.d, widthEm: g.width, scale, paint, midBase: adv + glyphAdv / 2 });
+            adv += glyphAdv;
+          } else if (/\S/.test(ch)) {
+            const wEm = g && g.width > 0 ? g.width : MISSING_GLYPH_ADVANCE_EM * gf.unitsPerEm;
+            const boxAdv = wEm * scale;
+            cells.push({ glyphD: missingGlyphBoxEm(wEm, ascentEm), widthEm: wEm, scale, paint, midBase: adv + boxAdv / 2 });
+            adv += boxAdv;
+          } else {
+            adv += (g ? g.width : 0) * scale;
+          }
+          adv += s.letterSpacing + (ch === " " ? s.wordSpacing : 0);
         }
       }
     }
@@ -2915,10 +3093,17 @@ function collectAlongPathCells(node, glyphs, soleFont, warnings) {
   walk(node, rootStyleOf(node));
   return { cells, width: adv };
 }
-function alongAffine(sampler, dist, scale, widthEm) {
+function alongAffine(sampler, dist, scale, widthEm, perp = 0) {
   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];
+  return [scale * cos, scale * sin, -scale * sin, scale * cos, x - scale * cos * hw - perp * sin, y - scale * sin * hw + perp * cos];
+}
+function alongPathNodeOffsets(node) {
+  var _a, _b, _c;
+  return {
+    along: ((_a = parseLen(node.x)) != null ? _a : 0) + ((_b = parseLen(node.dx)) != null ? _b : 0),
+    perp: (_c = parseLen(node.dy)) != null ? _c : 0
+  };
 }
 function materialiseGlyphTextAlongPath(node, pathD, startOffset, opts, textLength, pathOverflow) {
   var _a;
@@ -2931,6 +3116,7 @@ function materialiseGlyphTextAlongPath(node, pathD, startOffset, opts, textLengt
   const soleFont = soleFontOf(glyphs);
   const { cells, width } = collectAlongPathCells(node, glyphs, soleFont, warnings);
   if (!cells.length) return toGroup(node, [], create);
+  const { along: alongOffset, perp } = alongPathNodeOffsets(node);
   if (textLength && textLength > 0 && width > 0) {
     const k = textLength / width;
     for (const c of cells) c.midBase *= k;
@@ -2938,9 +3124,9 @@ function materialiseGlyphTextAlongPath(node, pathD, startOffset, opts, textLengt
   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);
+    return toGroup(node, buildAnimatedAlongPath(cells, sampler, so.keyframes, so.loop, create, isClip, alongOffset, perp), 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 base = alongOffset + (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;
@@ -2948,7 +3134,7 @@ function materialiseGlyphTextAlongPath(node, pathD, startOffset, opts, textLengt
   const placements = placeCells.map((c) => ({
     glyphD: c.glyphD,
     paint: c.paint,
-    m: alongAffine(sampler, base + c.midBase, c.scale, c.widthEm)
+    m: alongAffine(sampler, base + c.midBase, c.scale, c.widthEm, perp)
   }));
   return toGroup(node, buildPaths(placements, create, warnings), create);
 }
@@ -2958,10 +3144,10 @@ function roundN(v, n) {
   const f = __pow(10, n);
   return Math.round(v * f) / f;
 }
-function buildAnimatedAlongPath(cells, sampler, sokfs, loop, create, isClip) {
+function buildAnimatedAlongPath(cells, sampler, sokfs, loop, create, isClip, alongOffset = 0, perp = 0) {
   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 offOf = (kf) => alongOffset + (Number(kf.value) || 0);
   const onPath = (dist) => dist >= 0 && dist <= sampler.totalLength;
   const out = [];
   for (const c of cells) {
@@ -2969,10 +3155,11 @@ function buildAnimatedAlongPath(cells, sampler, sokfs, loop, create, isClip) {
     const d = transformPathData(c.glyphD, centred);
     const sampleKf = (dist, time) => {
       const { x, y, angle } = sampler.sampleAtDistance(dist);
+      const cos = Math.cos(angle), sin = Math.sin(angle);
       return {
         time,
         value: {
-          ["translate" /* Translate */]: [roundN(x, 3), roundN(y, 3)],
+          ["translate" /* Translate */]: [roundN(x - perp * sin, 3), roundN(y + perp * cos, 3)],
           ["rotate" /* Rotate */]: roundN(angle * 180 / Math.PI, 3)
         }
       };
@@ -3242,9 +3429,18 @@ function buildOutKfValue(prevV, nextV, p, translate, rotateDegFromAutoOrient, au
     if (pv === void 0 && nv === void 0) continue;
     value[k] = interpolatePart(pv, nv, p);
   }
-  if (rotateDegFromAutoOrient !== void 0) value.rotate = rotateDegFromAutoOrient;
+  if (rotateDegFromAutoOrient !== void 0) {
+    value.rotate = rotateDegFromAutoOrient + explicitRotateAt(prevV, nextV, p);
+  }
   return value;
 }
+function explicitRotateAt(prevV, nextV, p) {
+  const pv = typeof (prevV == null ? void 0 : prevV.rotate) === "number" ? prevV.rotate : void 0;
+  const nv = typeof (nextV == null ? void 0 : nextV.rotate) === "number" ? nextV.rotate : void 0;
+  if (pv === void 0 && nv === void 0) return 0;
+  const r = interpolatePart(pv, nv, p);
+  return typeof r === "number" ? r : 0;
+}
 function derivAngleForFirstKf(kf0, kf1) {
   const p0 = getKfTranslate(kf0);
   const p1 = getKfTranslate(kf1);
@@ -3265,10 +3461,12 @@ function insertSharpCornerStepKfIfNeeded(out, prevKf, nextKf, prevPos, nextPos,
   const lastV = (_a = lastKf.v) != null ? _a : lastKf.value;
   const prevExit = lastV == null ? void 0 : lastV.rotate;
   if (typeof prevExit !== "number") return;
+  const boundaryV = getKfValueParts(prevKf);
+  const prevExitTangent = prevExit - explicitRotateAt(boundaryV, boundaryV, 0);
   const seg = getSegmentCache(prevKf, nextKf, prevPos, nextPos);
   const tanAtStart = bezier2D_derivativeAt(seg.P0, seg.P1, seg.P2, seg.P3, 0);
   const nextEntry = Math.atan2(tanAtStart[1], tanAtStart[0]) * 180 / Math.PI;
-  const delta = wrappedAngleDelta(nextEntry, prevExit);
+  const delta = wrappedAngleDelta(nextEntry, prevExitTangent);
   if (Math.abs(delta) <= rotationTol) return;
   const dupValue = buildOutKfValue(
     getKfValueParts(prevKf),
@@ -4467,7 +4665,7 @@ function applyPlayerEffects_exceptRetime(node, ctx) {
   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, textPath, text } = fx != null ? fx : {};
+  const { transformation, repeater, maskedBy, clipPath, 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;
@@ -4493,6 +4691,7 @@ function applyPlayerEffects_exceptRetime(node, ctx) {
   n = applyTrimPathEffect(n, trimPath, isCombinedShape, ctx);
   n = applyRepeaterEffect(n, repeater, ctx);
   n = applyMaskedByEffect(n, maskedBy, transformation, ctx);
+  n = applyClipPathEffect(n, clipPath, ctx);
   if (innerIdForContentRef) {
     applyRefHref(n, cloneFx, ctx);
     n = splitForContentRef(n, transformation, originalId, innerIdForContentRef, ctx);
@@ -4821,6 +5020,8 @@ function getNormalizedProps(props) {
 function renderNode(node, defs) {
   if (!node) return null;
   const _a = node, { type, children, style } = _a, props = __objRest(_a, ["type", "children", "style"]);
+  const feFuncType = props.funcType;
+  if (feFuncType !== void 0) delete props.funcType;
   const nodeDefs = getDefs(node) || defs;
   const resolvedStyle = resolveStyle2(style, nodeDefs);
   let childElements;
@@ -4833,13 +5034,15 @@ function renderNode(node, defs) {
       }
     }
   }
-  return createElement(
+  const element = createElement(
     type || "g",
     getNormalizedProps(props),
     resolvedStyle,
     childElements,
     props[TEXT_ATTR] || props[TEXT_CONTENT_ATTR]
   );
+  if (element && feFuncType !== void 0) element.setAttribute("type", feFuncType);
+  return element;
 }
 
 // src/PxAnimatorTriggers.ts
@@ -4850,7 +5053,12 @@ function setupAnimationTriggers(api, config) {
     console.warn("setupAnimationTriggers: No root element found for animation.");
     return api;
   }
+  let reversed = false;
   const start = () => {
+    if (reversed) {
+      reversed = false;
+      api.setPlaybackRate(1);
+    }
     api.play();
   };
   const handleEndAction = () => {
@@ -4862,6 +5070,8 @@ function setupAnimationTriggers(api, config) {
         api.cancel();
         break;
       case "reverse":
+        reversed = true;
+        api.setPlaybackRate(-1);
         api.play();
         break;
       case "continue":
@@ -4924,6 +5134,7 @@ function getSelector(id) {
   return "#" + id;
 }
 function createBasicFrameLoopAnimator(doc, adapter, callbacks) {
+  var _a;
   const config = getAnimatorConfig(doc) || {};
   const bindings = getNormalisedBindings(doc, PxAnimatorEngine.frames);
   const _iterations = config.iterations;
@@ -4934,18 +5145,24 @@ function createBasicFrameLoopAnimator(doc, adapter, callbacks) {
   const duration = +(config.duration || DEFAULT_DURATION_MS);
   const totalDuration = duration && iterations ? duration * (iterations === Infinity ? Infinity : iterations) : duration ? (iterations != null ? iterations : 1) * duration : 0;
   const direction = config.direction || "normal";
+  const fill = (_a = config.fill) != null ? _a : "forwards";
+  const fillsForwards = fill === "forwards" || fill === "both";
+  const fillsBackwards = fill === "backwards" || fill === "both";
   let timerId = null;
   let playing = false;
-  let timeBeforeLastStartMs = config.delay || 0;
+  let timeBeforeLastStartMs = -(config.delay || 0);
   let lastStartedTs = 0;
   let playbackRate = 1;
   let finishCalled = false;
   const frameRate = config.frameRate;
   const minFrameIntervalMs = frameRate && frameRate > 0 ? 1e3 / frameRate : 0;
   let lastRenderTs = 0;
-  const getAnimCurrentTime = () => {
+  const getRawAnimTime = () => {
     const runningElapsed = lastStartedTs ? (Date.now() - lastStartedTs) * playbackRate : 0;
-    let time = timeBeforeLastStartMs + runningElapsed;
+    return timeBeforeLastStartMs + runningElapsed;
+  };
+  const getAnimCurrentTime = () => {
+    let time = getRawAnimTime();
     if (Number.isFinite(totalDuration) && time > totalDuration) time = totalDuration;
     if (time < 0) time = 0;
     return time;
@@ -4990,40 +5207,59 @@ function createBasicFrameLoopAnimator(doc, adapter, callbacks) {
     }
   }
   const tick = () => {
-    var _a;
+    var _a2, _b;
     if (!adapter.isConnected()) {
       pauseAnim();
       return;
     }
     const currentTime = getAnimCurrentTime();
-    if (minFrameIntervalMs > 0) {
-      const now = Date.now();
-      if (lastRenderTs && now - lastRenderTs < minFrameIntervalMs) {
-        return;
-      }
-      lastRenderTs = now;
-    }
-    if (duration <= 0) {
+    const rawTime = getRawAnimTime();
+    if (rawTime < 0 && playbackRate > 0) {
+      if (fillsBackwards) renderFrame(0);
+      return;
     }
-    if (totalDuration && Number.isFinite(totalDuration) && currentTime >= totalDuration) {
-      renderFrame(totalDuration);
+    if (playbackRate < 0 && rawTime <= 0) {
+      pauseAnim();
+      renderFrame(0);
       if (!finishCalled) {
         finishCalled = true;
-        (_a = callbacks == null ? void 0 : callbacks.onFinish) == null ? void 0 : _a.call(callbacks);
+        (_a2 = callbacks == null ? void 0 : callbacks.onFinish) == null ? void 0 : _a2.call(callbacks);
       }
+      return;
+    }
+    if (playbackRate > 0 && totalDuration && Number.isFinite(totalDuration) && currentTime >= totalDuration) {
       pauseAnim();
+      renderFrame(fillsForwards ? totalDuration : 0);
+      if (!finishCalled) {
+        finishCalled = true;
+        (_b = callbacks == null ? void 0 : callbacks.onFinish) == null ? void 0 : _b.call(callbacks);
+      }
       return;
     }
+    if (minFrameIntervalMs > 0) {
+      const now = Date.now();
+      if (lastRenderTs && now - lastRenderTs < minFrameIntervalMs) {
+        return;
+      }
+      lastRenderTs = now;
+    }
     renderFrame(currentTime);
   };
   if (config.delay) {
-    renderFrame(getAnimCurrentTime());
+    if (config.delay < 0) {
+      renderFrame(getAnimCurrentTime());
+    } else if (fillsBackwards) {
+      renderFrame(0);
+    }
   }
   const _isPlaying = () => {
     if (!playing) return false;
     if (!adapter.isConnected()) {
       return false;
     }
+    if (playbackRate < 0) {
+      return getRawAnimTime() > 0;
+    }
     if (Number.isFinite(totalDuration) && getAnimCurrentTime() >= totalDuration) return false;
     return true;
   };
@@ -5043,37 +5279,53 @@ function createBasicFrameLoopAnimator(doc, adapter, callbacks) {
   };
   const startAnim = () => {
     if (playing) return;
-    if (Number.isFinite(totalDuration) && timeBeforeLastStartMs >= totalDuration) {
-      timeBeforeLastStartMs = 0;
-      finishCalled = false;
+    if (playbackRate >= 0) {
+      if (Number.isFinite(totalDuration) && timeBeforeLastStartMs >= totalDuration) {
+        timeBeforeLastStartMs = 0;
+      }
+    } else {
+      if (timeBeforeLastStartMs <= 0) {
+        if (!Number.isFinite(totalDuration)) {
+          console.warn("play: cannot start reverse playback of an infinite animation from time 0");
+          return;
+        }
+        timeBeforeLastStartMs = totalDuration;
+      }
     }
+    finishCalled = false;
     playing = true;
     lastStartedTs = Date.now();
     loopAnim(true);
   };
   const pauseAnim = () => {
     if (!playing) return;
-    timeBeforeLastStartMs = getAnimCurrentTime();
+    let raw = getRawAnimTime();
+    if (Number.isFinite(totalDuration) && raw > totalDuration) raw = totalDuration;
+    timeBeforeLastStartMs = raw;
     lastStartedTs = 0;
     playing = false;
     if (timerId !== null) {
       cancelAnimationFrame(timerId);
       timerId = null;
     }
-    renderFrame(timeBeforeLastStartMs);
+    if (raw >= 0) {
+      renderFrame(raw);
+    } else if (fillsBackwards) {
+      renderFrame(0);
+    }
   };
   const cancelAnim = () => {
-    var _a;
+    var _a2;
     pauseAnim();
     timeBeforeLastStartMs = 0;
     lastStartedTs = 0;
     playing = false;
     finishCalled = false;
     renderFrame(timeBeforeLastStartMs);
-    (_a = callbacks == null ? void 0 : callbacks.onCancel) == null ? void 0 : _a.call(callbacks);
+    (_a2 = callbacks == null ? void 0 : callbacks.onCancel) == null ? void 0 : _a2.call(callbacks);
   };
   const finishAnim = (callOnFinish = true) => {
-    var _a;
+    var _a2;
     if (Number.isFinite(totalDuration)) {
       timeBeforeLastStartMs = totalDuration;
     } else {
@@ -5081,10 +5333,14 @@ function createBasicFrameLoopAnimator(doc, adapter, callbacks) {
     }
     lastStartedTs = 0;
     playing = false;
-    renderFrame(timeBeforeLastStartMs);
+    if (timerId !== null) {
+      cancelAnimationFrame(timerId);
+      timerId = null;
+    }
+    renderFrame(fillsForwards ? timeBeforeLastStartMs : 0);
     if (callOnFinish && !finishCalled) {
       finishCalled = true;
-      (_a = callbacks == null ? void 0 : callbacks.onFinish) == null ? void 0 : _a.call(callbacks);
+      (_a2 = callbacks == null ? void 0 : callbacks.onFinish) == null ? void 0 : _a2.call(callbacks);
     }
   };
   const api = {
@@ -5094,14 +5350,14 @@ function createBasicFrameLoopAnimator(doc, adapter, callbacks) {
       return _isPlaying();
     },
     "play": () => {
-      var _a;
+      var _a2;
       startAnim();
-      (_a = callbacks == null ? void 0 : callbacks.onPlay) == null ? void 0 : _a.call(callbacks);
+      (_a2 = callbacks == null ? void 0 : callbacks.onPlay) == null ? void 0 : _a2.call(callbacks);
     },
     "pause": () => {
-      var _a;
+      var _a2;
       pauseAnim();
-      (_a = callbacks == null ? void 0 : callbacks.onPause) == null ? void 0 : _a.call(callbacks);
+      (_a2 = callbacks == null ? void 0 : callbacks.onPause) == null ? void 0 : _a2.call(callbacks);
     },
     "cancel": () => {
       cancelAnim();
@@ -5114,7 +5370,9 @@ function createBasicFrameLoopAnimator(doc, adapter, callbacks) {
         console.warn("setPlaybackRate: rate must be finite and non-zero");
         return;
       }
-      const current = getAnimCurrentTime();
+      let current = getRawAnimTime();
+      if (Number.isFinite(totalDuration) && current > totalDuration) current = totalDuration;
+      if (rate < 0 !== playbackRate < 0) finishCalled = false;
       playbackRate = rate;
       timeBeforeLastStartMs = current;
       if (playing) lastStartedTs = Date.now();
@@ -5127,10 +5385,13 @@ function createBasicFrameLoopAnimator(doc, adapter, callbacks) {
       if (Number.isFinite(totalDuration) && newTime > totalDuration) newTime = totalDuration;
       timeBeforeLastStartMs = newTime;
       if (playing) lastStartedTs = Date.now();
+      if (!Number.isFinite(totalDuration) || newTime < totalDuration) finishCalled = false;
       renderFrame(getAnimCurrentTime());
     },
     "destroy": () => {
+      var _a2;
       api.cancel();
+      (_a2 = callbacks == null ? void 0 : callbacks.onRemove) == null ? void 0 : _a2.call(callbacks);
     }
   };
   return api;
@@ -5295,6 +5556,8 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
   if (typeof _iterations === "number") iterations = _iterations;
   if (_iterations === "infinite") iterations = Infinity;
   const unsupportedSet = /* @__PURE__ */ new Set();
+  let finishNotified = false;
+  let removeCalled = false;
   if (!(bindings == null ? void 0 : bindings.length)) {
     console.warn("createWebApiAnimator: No animation bindings defined");
   }
@@ -5311,7 +5574,11 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
     }
     const keyframesMap = convertToWebApiKeyframes(animDef, unsupportedSet, config);
     const positiveDelay = config.delay && config.delay > 0 ? config.delay : void 0;
-    const seekPosition = config.delay && config.delay < 0 && config.duration ? -config.delay % config.duration : void 0;
+    let seekPosition;
+    if (config.delay && config.delay < 0 && config.duration) {
+      const rawSeek = -config.delay;
+      seekPosition = iterations === Infinity ? rawSeek % config.duration : Math.min(rawSeek, config.duration * (iterations != null ? iterations : 1));
+    }
     const effectOptions = {
       duration: config.duration,
       delay: positiveDelay,
@@ -5332,13 +5599,17 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
             const anim = new Animation(effect, document.timeline);
             if (callbacks == null ? void 0 : callbacks.onFinish) anim.onfinish = () => {
               var _a2;
-              return (_a2 = callbacks.onFinish) == null ? void 0 : _a2.call(callbacks);
+              if (finishNotified) return;
+              finishNotified = true;
+              (_a2 = callbacks.onFinish) == null ? void 0 : _a2.call(callbacks);
             };
             if (callbacks == null ? void 0 : callbacks.onRemove) anim.onremove = () => {
               var _a2;
-              return (_a2 = callbacks.onRemove) == null ? void 0 : _a2.call(callbacks);
+              if (removeCalled) return;
+              removeCalled = true;
+              (_a2 = callbacks.onRemove) == null ? void 0 : _a2.call(callbacks);
             };
-            if (seekPosition) {
+            if (seekPosition !== void 0) {
               anim.currentTime = seekPosition;
             }
             animations.push(anim);
@@ -5362,6 +5633,7 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
     },
     "play": () => {
       var _a2;
+      finishNotified = false;
       animations.forEach((a) => a.play());
       (_a2 = callbacks == null ? void 0 : callbacks.onPlay) == null ? void 0 : _a2.call(callbacks);
     },
@@ -5372,6 +5644,7 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
     },
     "cancel": () => {
       var _a2;
+      finishNotified = false;
       animations.forEach((a) => a.cancel());
       (_a2 = callbacks == null ? void 0 : callbacks.onCancel) == null ? void 0 : _a2.call(callbacks);
     },
@@ -5401,13 +5674,19 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
       return res !== null ? +res : null;
     },
     "setCurrentTime": (time) => {
+      finishNotified = false;
       animations.forEach((a) => {
         a.currentTime = time;
       });
     },
     "destroy": () => {
+      var _a2;
       api.cancel();
       animations.splice(0, animations.length);
+      if (!removeCalled) {
+        removeCalled = true;
+        (_a2 = callbacks == null ? void 0 : callbacks.onRemove) == null ? void 0 : _a2.call(callbacks);
+      }
     }
   };
   if (config.trigger) {
@@ -5551,7 +5830,6 @@ function createAnimatorImpl(doc, adapter, callbacks, containerElement) {
   const effectsWarnings = validateNodeEffects(doc);
   for (const w of effectsWarnings) console.warn("[PxAnimator] effects shape warning:", w);
   const animatorConfig = getAnimatorConfig(doc) || {};
-  animatorConfig.debug = true;
   const engine = animatorConfig.mode === PxAnimatorMode.frames ? PxAnimatorEngine.frames : PxAnimatorEngine.webapi;
   doc = materialiseAllInTree(doc, engine);
   let rootElement = null;
@@ -5580,37 +5858,55 @@ function createAnimator(options) {
     return createAnimatorImpl(data, adapter, callbacks, container);
   }
   let animator = null;
+  let pending = [];
+  let destroyed = false;
+  const enqueue = (call) => {
+    if (animator) {
+      call(animator);
+    } else if (pending) {
+      pending.push(call);
+    }
+  };
   fetch(src).then((res) => res.json()).then((json) => {
+    if (destroyed) return;
     if (isPxElementFileFormat(json)) {
       animator = createAnimatorImpl(json, adapter, callbacks, container);
+      const queued = pending;
+      pending = null;
+      queued == null ? void 0 : queued.forEach((call) => call(animator));
     } else {
-      console.error("Invalid animation document format");
+      console.error('createAnimator: invalid animation document format at "' + src + '"');
     }
+  }).catch((err) => {
+    pending = null;
+    console.error('createAnimator: failed to load "' + src + '"', err);
   });
   return {
     "isReady": () => !!animator,
     "getRootElement": () => animator ? animator.getRootElement() : null,
     "isPlaying": () => (animator == null ? void 0 : animator.isPlaying()) || false,
     "play": () => {
-      animator == null ? void 0 : animator.play();
+      enqueue((api) => api.play());
     },
     "pause": () => {
-      animator == null ? void 0 : animator.pause();
+      enqueue((api) => api.pause());
     },
     "cancel": () => {
-      animator == null ? void 0 : animator.cancel();
+      enqueue((api) => api.cancel());
     },
     "finish": () => {
-      animator == null ? void 0 : animator.finish();
+      enqueue((api) => api.finish());
     },
     "setPlaybackRate": (rate) => {
-      animator == null ? void 0 : animator.setPlaybackRate(rate);
+      enqueue((api) => api.setPlaybackRate(rate));
     },
-    "getCurrentTime": () => (animator == null ? void 0 : animator.getCurrentTime()) || 0,
+    "getCurrentTime": () => animator ? animator.getCurrentTime() : null,
     "setCurrentTime": (time) => {
-      animator == null ? void 0 : animator.setCurrentTime(time);
+      enqueue((api) => api.setCurrentTime(time));
     },
     "destroy": () => {
+      destroyed = true;
+      pending = null;
       animator == null ? void 0 : animator.destroy();
     }
   };
@@ -5892,6 +6188,7 @@ function subtractMultiset(a, b) {
   createAnimatorImpl,
   createBasicFrameLoopAnimator,
   createFrameLoopAnimator,
+  createPathSampler,
   createWebApiAnimator,
   describeSchema,
   diffInEffect,
@@ -5906,6 +6203,7 @@ function subtractMultiset(a, b) {
   isPxElementFileFormat,
   isPxElementFileFormatDeep,
   jsonElementFactory,
+  layoutGlyphTextChars,
   loadTagAnimators,
   materialiseAllInTree,
   materialiseAnimatedUseInstances,