@pixodesk/svg-animator-web 1.0.18 → 1.0.20

package/dist/index.cjs

@@ -83,8 +83,8 @@ __export(index_exports, {
   PxRetimeEffectSchema: () => PxRetimeEffectSchema,
   PxStrokeGradientEffectSchema: () => PxStrokeGradientEffectSchema,
   PxSvgNodeExtra: () => PxSvgNodeExtra,
-  PxTextAlongPathEffectSchema: () => PxTextAlongPathEffectSchema,
   PxTextEffectSchema: () => PxTextEffectSchema,
+  PxTextPathEffectSchema: () => PxTextPathEffectSchema,
   PxTransformPartsSchema: () => PxTransformPartsSchema,
   PxTransformValueSchema: () => PxTransformValueSchema,
   PxTransformationEffectSchema: () => PxTransformationEffectSchema,
@@ -100,10 +100,12 @@ __export(index_exports, {
   createAnimatorImpl: () => createAnimatorImpl,
   createBasicFrameLoopAnimator: () => createBasicFrameLoopAnimator,
   createFrameLoopAnimator: () => createFrameLoopAnimator,
+  createPathSampler: () => createPathSampler,
   createWebApiAnimator: () => createWebApiAnimator,
   describeSchema: () => describeSchema,
   diffInEffect: () => diffInEffect,
   evaluateMotionPathSegment: () => evaluateMotionPathSegment,
+  extendedPathForBrowser: () => extendedPathForBrowser,
   generateNewIds: () => generateNewIds,
   getAnimatorConfig: () => getAnimatorConfig,
   getBindings: () => getBindings,
@@ -113,6 +115,7 @@ __export(index_exports, {
   isPxElementFileFormat: () => isPxElementFileFormat,
   isPxElementFileFormatDeep: () => isPxElementFileFormatDeep,
   jsonElementFactory: () => jsonElementFactory,
+  layoutGlyphTextChars: () => layoutGlyphTextChars,
   loadTagAnimators: () => loadTagAnimators,
   materialiseAllInTree: () => materialiseAllInTree,
   materialiseAnimatedUseInstances: () => materialiseAnimatedUseInstances,
@@ -129,6 +132,7 @@ __export(index_exports, {
   renderNode: () => renderNode,
   schemaKeys: () => schemaKeys,
   setupAnimationTriggers: () => setupAnimationTriggers,
+  shiftAnimatable: () => shiftAnimatable,
   toRGBA: () => toRGBA,
   validateNodeEffects: () => validateNodeEffects,
   visualModelAt: () => visualModelAt
@@ -1088,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(),
@@ -1139,8 +1147,9 @@ var PxFillGradientEffectSchema = implementsInterface()(px.object({
   gradientTransform: px.string().optional()
 }));
 var PxStrokeGradientEffectSchema = PxFillGradientEffectSchema;
-var PxTextAlongPathEffectSchema = implementsInterface()(px.object({
-  href: px.string(),
+var PxTextPathEffectSchema = implementsInterface()(px.object({
+  path: px.string(),
+  pathOverflow: px.string().optional(),
   lengthAdjust: px.string().optional(),
   method: px.string().optional(),
   spacing: px.string().optional(),
@@ -1154,12 +1163,13 @@ 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(),
   fillGradient: PxFillGradientEffectSchema.optional(),
   strokeGradient: PxStrokeGradientEffectSchema.optional(),
-  textAlongPath: PxTextAlongPathEffectSchema.optional(),
+  textPath: PxTextPathEffectSchema.optional(),
   text: PxTextEffectSchema.optional()
 }));
 function validateNodeEffects(root, opts) {
@@ -1460,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;
@@ -1902,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) {
@@ -2032,103 +2056,6 @@ function remapKeyframeTimesOnly(node, start, stretch) {
   }
 }
 
-// src/effects/textAlongPathEffect.ts
-function applyTextAlongPathEffect(node, fx, _ctx) {
-  var _a;
-  if (!fx) return node;
-  const href = typeof fx.href === "string" && !fx.href.startsWith("#") ? "#" + fx.href : fx.href;
-  const textPath = {
-    type: "textPath",
-    href,
-    children: (_a = node.children) != null ? _a : []
-  };
-  if (fx.lengthAdjust !== void 0) textPath.lengthAdjust = fx.lengthAdjust;
-  if (fx.method !== void 0) textPath.method = fx.method;
-  if (fx.spacing !== void 0) textPath.spacing = fx.spacing;
-  applyAnimatableNumber(textPath, "startOffset", fx.startOffset);
-  applyAnimatableNumber(textPath, "textLength", fx.textLength);
-  node.children = [textPath];
-  return node;
-}
-function applyAnimatableNumber(node, attrName, raw) {
-  if (raw === void 0 || raw === null) return;
-  if (typeof raw === "number") {
-    node[attrName] = String(raw);
-    return;
-  }
-  if (typeof raw === "object" && raw !== null) {
-    const obj = raw;
-    if (Array.isArray(obj.keyframes)) {
-      const prevAnimate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
-      const animate = __spreadValues({}, prevAnimate || {});
-      const block = { keyframes: obj.keyframes };
-      if (obj.loop !== void 0) block.loop = obj.loop;
-      animate[attrName] = block;
-      node.animate = animate;
-      return;
-    }
-    if (typeof obj.value === "number") {
-      node[attrName] = String(obj.value);
-      return;
-    }
-  }
-}
-
-// src/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;
@@ -2417,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",
@@ -2673,7 +2602,11 @@ function createPathSampler(d) {
   };
   return {
     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);
@@ -2685,6 +2618,173 @@ function createPathSampler(d) {
   };
 }
 
+// src/effects/textPathEffect.ts
+var EXTEND_MARGIN_FRAC = 0.15;
+function numRange(v) {
+  if (typeof v === "number") return { min: v, max: v };
+  if (v && typeof v === "object") {
+    const o = v;
+    if (typeof o.value === "number") return { min: o.value, max: o.value };
+    if (Array.isArray(o.keyframes) && o.keyframes.length) {
+      const vals = o.keyframes.map((k) => Number(k.value) || 0);
+      return { min: Math.min(...vals), max: Math.max(...vals) };
+    }
+  }
+  return { min: 0, max: 0 };
+}
+function estimateTextAdvance(node) {
+  let chars = 0, maxFont = 16;
+  const walk = (el) => {
+    var _a, _b;
+    const fs = parseFloat(String((_a = el.fontSize) != null ? _a : "")) || 0;
+    if (fs) maxFont = Math.max(maxFont, fs);
+    const t = (_b = el.text) != null ? _b : el.textContent;
+    if (typeof t === "string") chars += t.length;
+    if (el.children) for (const c of el.children) walk(c);
+  };
+  walk(node);
+  return chars * maxFont;
+}
+var r3 = (n) => Math.round(n * 1e3) / 1e3;
+function shiftAnimatable(v, by) {
+  if (!by || v === void 0 || v === null) return v;
+  if (typeof v === "number") return v + by;
+  const o = v;
+  if (typeof o.value === "number") return __spreadProps(__spreadValues({}, o), { value: o.value + by });
+  if (Array.isArray(o.keyframes)) return __spreadProps(__spreadValues({}, o), { keyframes: o.keyframes.map((k) => __spreadProps(__spreadValues({}, k), { value: (Number(k.value) || 0) + by })) });
+  return v;
+}
+function extendedPathForBrowser(pathD, opts) {
+  var _a;
+  if (opts.pathOverflow === "clip") return { d: pathD, startShift: 0 };
+  const sampler = createPathSampler(pathD);
+  if (!sampler || sampler.closed || sampler.totalLength <= 0) return { d: pathD, startShift: 0 };
+  const L = sampler.totalLength;
+  const margin = EXTEND_MARGIN_FRAC * L;
+  const so = numRange(opts.startOffset);
+  const runWidth = numRange(opts.textLength).max || ((_a = opts.advance) != null ? _a : 0);
+  const startOverflow = Math.max(0, -so.min);
+  const endOverflow = Math.max(0, so.max + runWidth - L);
+  const startExt = startOverflow > 0 ? startOverflow + margin : 0;
+  const endExt = endOverflow > 0 ? endOverflow + margin : 0;
+  if (endExt <= 0 && startExt <= 0) return { d: pathD, startShift: 0 };
+  const s = sampler.sampleAtDistance(0);
+  const e = sampler.sampleAtDistance(L);
+  let d = pathD;
+  if (startExt > 0) {
+    const sx = s.x - Math.cos(s.angle) * startExt, sy = s.y - Math.sin(s.angle) * startExt;
+    const rest = pathD.replace(/^\s*[Mm]\s*-?[\d.]+[\s,]+-?[\d.]+/, "");
+    d = "M" + r3(sx) + "," + r3(sy) + "L" + r3(s.x) + "," + r3(s.y) + rest;
+  }
+  if (endExt > 0) {
+    const ex = e.x + Math.cos(e.angle) * endExt, ey = e.y + Math.sin(e.angle) * endExt;
+    d += "L" + r3(ex) + "," + r3(ey);
+  }
+  return { d, startShift: startExt };
+}
+function applyTextPathEffect(node, fx, ctx) {
+  var _a;
+  if (!fx || typeof fx.path !== "string" || !fx.path) return node;
+  const pathId = genId(ctx, "tpath");
+  const { d, startShift } = extendedPathForBrowser(fx.path, {
+    pathOverflow: fx.pathOverflow,
+    startOffset: fx.startOffset,
+    textLength: fx.textLength,
+    advance: estimateTextAdvance(node)
+  });
+  ctx.defs.push({ type: "path", id: pathId, d });
+  const textPath = {
+    type: "textPath",
+    href: "#" + pathId,
+    children: (_a = node.children) != null ? _a : []
+  };
+  if (fx.lengthAdjust !== void 0) textPath.lengthAdjust = fx.lengthAdjust;
+  if (fx.method !== void 0) textPath.method = fx.method;
+  if (fx.spacing !== void 0) textPath.spacing = fx.spacing;
+  applyAnimatableNumber(textPath, "startOffset", shiftAnimatable(fx.startOffset, startShift));
+  applyAnimatableNumber(textPath, "textLength", fx.textLength);
+  node.children = [textPath];
+  return node;
+}
+function applyAnimatableNumber(node, attrName, raw) {
+  if (raw === void 0 || raw === null) return;
+  if (typeof raw === "number") {
+    node[attrName] = String(raw);
+    return;
+  }
+  if (typeof raw === "object" && raw !== null) {
+    const obj = raw;
+    if (Array.isArray(obj.keyframes)) {
+      const prevAnimate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
+      const animate = __spreadValues({}, prevAnimate || {});
+      const block = { keyframes: obj.keyframes };
+      if (obj.loop !== void 0) block.loop = obj.loop;
+      animate[attrName] = block;
+      node.animate = animate;
+      return;
+    }
+    if (typeof obj.value === "number") {
+      node[attrName] = String(obj.value);
+      return;
+    }
+  }
+}
+
+// src/effects/elementFactory.ts
+var jsonElementFactory = (type, props, children) => {
+  const node = { type };
+  for (const k in props) if (props[k] !== void 0) node[k] = props[k];
+  const arr = Array.isArray(children) ? children.filter((c) => c != null) : children != null ? [children] : [];
+  if (arr.length) node.children = arr;
+  return node;
+};
+
+// src/effects/glyphPathBake.ts
+function fmt(v, decimals) {
+  return Math.round(v) === v ? "" + Math.round(v) : v.toFixed(decimals);
+}
+function pack(nums, decimals) {
+  let s = "";
+  for (let i = 0; i < nums.length; i++) {
+    const str2 = fmt(nums[i], decimals);
+    if (i > 0 && str2.charCodeAt(0) !== 45) s += " ";
+    s += str2;
+  }
+  return s;
+}
+function apply(m, x, y) {
+  return [m[0] * x + m[2] * y + m[4], m[1] * x + m[3] * y + m[5]];
+}
+var TOKEN_RE = /([MLCQZ])|(-?\d*\.?\d+(?:e[-+]?\d+)?)/gi;
+function transformPathData(d, m, decimals = 2) {
+  const tokens = [];
+  let match;
+  TOKEN_RE.lastIndex = 0;
+  while ((match = TOKEN_RE.exec(d)) !== null) tokens.push(match[0]);
+  let out = "";
+  let i = 0;
+  const num2 = () => parseFloat(tokens[i++]);
+  while (i < tokens.length) {
+    const cmd = tokens[i++];
+    if (cmd === "M" || cmd === "L") {
+      const [x, y] = apply(m, num2(), num2());
+      out += cmd + pack([x, y], decimals);
+    } else if (cmd === "C") {
+      const [x1, y1] = apply(m, num2(), num2());
+      const [x2, y2] = apply(m, num2(), num2());
+      const [x, y] = apply(m, num2(), num2());
+      out += "C" + pack([x1, y1, x2, y2, x, y], decimals);
+    } else if (cmd === "Q") {
+      const [x1, y1] = apply(m, num2(), num2());
+      const [x, y] = apply(m, num2(), num2());
+      out += "Q" + pack([x1, y1, x, y], decimals);
+    } else if (cmd === "Z" || cmd === "z") {
+      out += "Z";
+    }
+  }
+  return out;
+}
+
 // src/effects/textGlyphsEffect.ts
 var DEFAULT_FONT_SIZE = 16;
 var TEXT_ATTR_KEYS = [
@@ -2763,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;
@@ -2772,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;
     }
   };
@@ -2815,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);
         }
       }
     }
@@ -2841,12 +3093,19 @@ 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) {
+function materialiseGlyphTextAlongPath(node, pathD, startOffset, opts, textLength, pathOverflow) {
   var _a;
   const { glyphs, create = jsonElementFactory, warnings } = opts;
   const sampler = pathD ? createPathSampler(pathD) : null;
@@ -2857,19 +3116,25 @@ 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;
   }
+  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), 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) => ({
+    return toGroup(node, buildAnimatedAlongPath(cells, sampler, so.keyframes, so.loop, create, isClip, alongOffset, perp), create);
+  }
+  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;
+  }) : cells;
+  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);
 }
@@ -2879,37 +3144,51 @@ function roundN(v, n) {
   const f = __pow(10, n);
   return Math.round(v * f) / f;
 }
-function buildAnimatedAlongPath(cells, sampler, sokfs, loop, create) {
+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) {
     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);
+      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)
         }
       };
     };
-    const kfs = [sampleKf(offOf(sokfs[0]) + c.midBase, timeOf(sokfs[0]))];
+    const kfs = [];
+    const opKfs = [];
+    const pushKf = (dist, time) => {
+      kfs.push(sampleKf(dist, time));
+      if (isClip) opKfs.push({ time, value: onPath(dist) ? 1 : 0 });
+    };
+    pushKf(offOf(sokfs[0]) + c.midBase, timeOf(sokfs[0]));
     for (let k = 1; k < sokfs.length; k++) {
       const t0 = timeOf(sokfs[k - 1]), t1 = timeOf(sokfs[k]);
       const o0 = offOf(sokfs[k - 1]), o1 = offOf(sokfs[k]);
       const n = Math.min(ALONG_PATH_MAX_STEPS_PER_SEGMENT, Math.max(1, Math.ceil(Math.abs(o1 - o0) / step)));
       for (let s = 1; s <= n; s++) {
         const f = s / n;
-        kfs.push(sampleKf(o0 + f * (o1 - o0) + c.midBase, t0 + f * (t1 - t0)));
+        pushKf(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 } }), []));
+    const animate = { transform };
+    if (isClip && opKfs.some((k) => k.value === 0)) {
+      const op = { keyframes: opKfs };
+      if (loop !== void 0) op.loop = loop;
+      animate.opacity = op;
+    }
+    out.push(create("path", __spreadProps(__spreadValues({ d }, paintProps(c.paint)), { animate }), []));
   }
   return out;
 }
@@ -2953,7 +3232,7 @@ function toGroup(node, children, create) {
   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);
+  if (opts.alongPath) return materialiseGlyphTextAlongPath(node, opts.alongPath.pathD, opts.alongPath.startOffset, opts, opts.alongPath.textLength, opts.alongPath.pathOverflow);
   return materialiseGlyphTextHorizontal(node, opts);
 }
 function applyTextGlyphsEffect(node, fx, ctx) {
@@ -2964,12 +3243,12 @@ function applyTextGlyphsEffect(node, fx, ctx) {
   }
   return materialiseGlyphTextHorizontal(node, { glyphs: ctx.glyphs, warnings: ctx.warnings });
 }
-function applyTextGlyphsAlongPath(node, ctx, pathD, startOffset, textLength) {
+function applyTextGlyphsAlongPath(node, ctx, pathD, startOffset, textLength, pathOverflow) {
   if (!ctx.glyphs) {
     ctx.warnings.push("textGlyphs: no definitions.glyphs");
     return null;
   }
-  return materialiseGlyphTextAlongPath(node, pathD, startOffset, { glyphs: ctx.glyphs, warnings: ctx.warnings }, textLength);
+  return materialiseGlyphTextAlongPath(node, pathD, startOffset, { glyphs: ctx.glyphs, warnings: ctx.warnings }, textLength, pathOverflow);
 }
 
 // src/PxMotionPath.ts
@@ -3150,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);
@@ -3173,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),
@@ -4375,18 +4665,17 @@ 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, textAlongPath, 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;
   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;
+    if (textPath) {
+      const pathD = typeof textPath.path === "string" ? textPath.path : void 0;
+      const rawTL = textPath.textLength;
       const textLength = typeof rawTL === "number" ? rawTL : rawTL && typeof rawTL === "object" ? typeof rawTL.value === "number" ? rawTL.value : Array.isArray(rawTL.keyframes) && rawTL.keyframes.length ? Number((_a = rawTL.keyframes[0]) == null ? void 0 : _a.value) : void 0 : void 0;
-      const glyphed = applyTextGlyphsAlongPath(n, ctx, pathD, textAlongPath.startOffset, textLength);
+      const glyphed = applyTextGlyphsAlongPath(n, ctx, pathD, textPath.startOffset, textLength, textPath.pathOverflow);
       if (glyphed) {
         n = glyphed;
         consumedByGlyphs = true;
@@ -4396,12 +4685,13 @@ function applyPlayerEffects_exceptRetime(node, ctx) {
       consumedByGlyphs = true;
     }
   }
-  if (!consumedByGlyphs) n = applyTextAlongPathEffect(n, textAlongPath, ctx);
+  if (!consumedByGlyphs) n = applyTextPathEffect(n, textPath, 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);
+  n = applyClipPathEffect(n, clipPath, ctx);
   if (innerIdForContentRef) {
     applyRefHref(n, cloneFx, ctx);
     n = splitForContentRef(n, transformation, originalId, innerIdForContentRef, ctx);
@@ -4730,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;
@@ -4742,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
@@ -4759,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 = () => {
@@ -4771,6 +5070,8 @@ function setupAnimationTriggers(api, config) {
         api.cancel();
         break;
       case "reverse":
+        reversed = true;
+        api.setPlaybackRate(-1);
         api.play();
         break;
       case "continue":
@@ -4833,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;
@@ -4843,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;
@@ -4899,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;
   };
@@ -4952,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 {
@@ -4990,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 = {
@@ -5003,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();
@@ -5023,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();
@@ -5036,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;
@@ -5204,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");
   }
@@ -5220,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,
@@ -5241,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);
@@ -5271,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);
     },
@@ -5281,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);
     },
@@ -5310,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) {
@@ -5460,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;
@@ -5489,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();
     }
   };
@@ -5784,8 +6171,8 @@ function subtractMultiset(a, b) {
   PxRetimeEffectSchema,
   PxStrokeGradientEffectSchema,
   PxSvgNodeExtra,
-  PxTextAlongPathEffectSchema,
   PxTextEffectSchema,
+  PxTextPathEffectSchema,
   PxTransformPartsSchema,
   PxTransformValueSchema,
   PxTransformationEffectSchema,
@@ -5801,10 +6188,12 @@ function subtractMultiset(a, b) {
   createAnimatorImpl,
   createBasicFrameLoopAnimator,
   createFrameLoopAnimator,
+  createPathSampler,
   createWebApiAnimator,
   describeSchema,
   diffInEffect,
   evaluateMotionPathSegment,
+  extendedPathForBrowser,
   generateNewIds,
   getAnimatorConfig,
   getBindings,
@@ -5814,6 +6203,7 @@ function subtractMultiset(a, b) {
   isPxElementFileFormat,
   isPxElementFileFormatDeep,
   jsonElementFactory,
+  layoutGlyphTextChars,
   loadTagAnimators,
   materialiseAllInTree,
   materialiseAnimatedUseInstances,
@@ -5830,6 +6220,7 @@ function subtractMultiset(a, b) {
   renderNode,
   schemaKeys,
   setupAnimationTriggers,
+  shiftAnimatable,
   toRGBA,
   validateNodeEffects,
   visualModelAt