@pixodesk/svg-animator-react 1.0.18 → 1.0.20

package/dist/index.umd.js

@@ -2728,6 +2728,10 @@ var PixodeskAnimatorReact = (() => {
     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(),
@@ -2770,8 +2774,9 @@ var PixodeskAnimatorReact = (() => {
     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(),
@@ -2785,12 +2790,13 @@ var PixodeskAnimatorReact = (() => {
     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) {
@@ -3077,6 +3083,15 @@ var PixodeskAnimatorReact = (() => {
     const pct = Math.round(o * 1e3) / 10;
     return pct + "%";
   }
+  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;
+  }
   function applyMaskedByEffect(node, fx, transformation, ctx) {
     if (!fx) return node;
     if (!fx.href) {
@@ -3512,6 +3527,9 @@ var PixodeskAnimatorReact = (() => {
   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) {
@@ -3641,97 +3659,6 @@ var PixodeskAnimatorReact = (() => {
       }
     }
   }
-  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;
-      }
-    }
-  }
-  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;
-  };
-  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;
-  }
   function bezierToSvgPath(path) {
     var _a, _b, _c, _d;
     const v = path.v;
@@ -4019,6 +3946,8 @@ var PixodeskAnimatorReact = (() => {
     // Filter
     "filterUnits",
     "primitiveUnits",
+    "tableValues",
+    // feFuncR/G/B/A transfer table (type="table")
     "stdDeviation",
     "baseFrequency",
     "numOctaves",
@@ -4273,7 +4202,11 @@ var PixodeskAnimatorReact = (() => {
     };
     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);
@@ -4284,6 +4217,167 @@ var PixodeskAnimatorReact = (() => {
       }
     };
   }
+  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;
+      }
+    }
+  }
+  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;
+  };
+  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;
+  }
   var DEFAULT_FONT_SIZE = 16;
   var TEXT_ATTR_KEYS = [
     "fontFamily",
@@ -4361,6 +4455,19 @@ var PixodeskAnimatorReact = (() => {
     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;
@@ -4370,15 +4477,26 @@ var PixodeskAnimatorReact = (() => {
     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;
       }
     };
@@ -4417,20 +4535,31 @@ var PixodeskAnimatorReact = (() => {
     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);
           }
         }
       }
@@ -4439,12 +4568,19 @@ var PixodeskAnimatorReact = (() => {
     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 materialiseGlyphTextAlongPath(node, pathD, startOffset, opts, textLength) {
+  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;
     const { glyphs, create = jsonElementFactory, warnings } = opts;
     const sampler = pathD ? createPathSampler(pathD) : null;
@@ -4455,19 +4591,25 @@ var PixodeskAnimatorReact = (() => {
     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" && so.keyframes.length >= 2) {
-      return toGroup(node, buildAnimatedAlongPath(cells, sampler, so.keyframes, so.loop, create), create);
-    }
-    const base = so.kind === "animated" ? Number((_a = so.keyframes[0]) == null ? void 0 : _a.value) || 0 : so.kind === "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" ? Number((_a = so.keyframes[0]) == null ? void 0 : _a.value) || 0 : so.kind === "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);
   }
@@ -4477,23 +4619,25 @@ var PixodeskAnimatorReact = (() => {
     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)],
+            ]: [roundN(x - perp * sin, 3), roundN(y + perp * cos, 3)],
             [
               "rotate"
               /* Rotate */
@@ -4501,19 +4645,31 @@ var PixodeskAnimatorReact = (() => {
           }
         };
       };
-      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;
   }
@@ -4564,12 +4720,12 @@ var PixodeskAnimatorReact = (() => {
     }
     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);
   }
   function getKfTranslate(kf) {
     var _a;
@@ -4748,9 +4904,18 @@ var PixodeskAnimatorReact = (() => {
       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);
@@ -4771,10 +4936,12 @@ var PixodeskAnimatorReact = (() => {
     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),
@@ -5967,18 +6134,17 @@ var PixodeskAnimatorReact = (() => {
     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;
@@ -5988,12 +6154,13 @@ var PixodeskAnimatorReact = (() => {
         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);
@@ -6316,6 +6483,8 @@ var PixodeskAnimatorReact = (() => {
   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;
@@ -6328,13 +6497,15 @@ var PixodeskAnimatorReact = (() => {
         }
       }
     }
-    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;
   }
   function setupAnimationTriggers(api, config) {
     const { startOn, outAction = "continue", scrollIntoViewThreshold = 0.5 } = config;
@@ -6343,7 +6514,12 @@ var PixodeskAnimatorReact = (() => {
       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 = () => {
@@ -6355,6 +6531,8 @@ var PixodeskAnimatorReact = (() => {
           api.cancel();
           break;
         case "reverse":
+          reversed = true;
+          api.setPlaybackRate(-1);
           api.play();
           break;
         case "continue":
@@ -6415,6 +6593,7 @@ var PixodeskAnimatorReact = (() => {
     return "#" + id;
   }
   function createBasicFrameLoopAnimator(doc, adapter, callbacks) {
+    var _a;
     const config = getAnimatorConfig(doc) || {};
     const bindings = getNormalisedBindings(doc, PxAnimatorEngine.frames);
     const _iterations = config.iterations;
@@ -6425,18 +6604,24 @@ var PixodeskAnimatorReact = (() => {
     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;
@@ -6481,40 +6666,59 @@ var PixodeskAnimatorReact = (() => {
       }
     }
     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;
     };
@@ -6534,37 +6738,53 @@ var PixodeskAnimatorReact = (() => {
     };
     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 {
@@ -6572,10 +6792,14 @@ var PixodeskAnimatorReact = (() => {
       }
       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 = {
@@ -6585,14 +6809,14 @@ var PixodeskAnimatorReact = (() => {
         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();
@@ -6605,7 +6829,9 @@ var PixodeskAnimatorReact = (() => {
           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();
@@ -6618,10 +6844,13 @@ var PixodeskAnimatorReact = (() => {
         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;
@@ -6784,6 +7013,8 @@ var PixodeskAnimatorReact = (() => {
     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");
     }
@@ -6800,7 +7031,11 @@ var PixodeskAnimatorReact = (() => {
       }
       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,
@@ -6821,13 +7056,17 @@ var PixodeskAnimatorReact = (() => {
               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);
@@ -6851,6 +7090,7 @@ var PixodeskAnimatorReact = (() => {
       },
       "play": () => {
         var _a2;
+        finishNotified = false;
         animations.forEach((a) => a.play());
         (_a2 = callbacks == null ? void 0 : callbacks.onPlay) == null ? void 0 : _a2.call(callbacks);
       },
@@ -6861,6 +7101,7 @@ var PixodeskAnimatorReact = (() => {
       },
       "cancel": () => {
         var _a2;
+        finishNotified = false;
         animations.forEach((a) => a.cancel());
         (_a2 = callbacks == null ? void 0 : callbacks.onCancel) == null ? void 0 : _a2.call(callbacks);
       },
@@ -6890,13 +7131,19 @@ var PixodeskAnimatorReact = (() => {
         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) {
@@ -7038,7 +7285,6 @@ var PixodeskAnimatorReact = (() => {
     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;
@@ -7066,37 +7312,55 @@ var PixodeskAnimatorReact = (() => {
       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();
       }
     };
@@ -7219,22 +7483,40 @@ var PixodeskAnimatorReact = (() => {
     style,
     doc,
     compMode,
-    apiHolderRef
+    apiHolderRef,
+    callbacksRef
   }) => {
     doc = generateNewIds(doc);
     const elementRefs = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
-    const renderNode2 = (node) => {
+    const renderNode2 = (node, isRoot = false) => {
       if (!node) return null;
       const { type, animate, meta, children, ...props } = node;
       const normProps = getNormalizedProps(props);
       normProps["ref"] = (domEl) => {
         if (node["id"]) elementRefs.current.set(node["id"], domEl);
       };
+      if (isRoot) {
+        if (className) {
+          normProps["className"] = normProps["className"] ? normProps["className"] + " " + className : className;
+        }
+        if (style) normProps["style"] = style;
+      }
       return (0, import_react2.createElement)(type, normProps, children?.map((child) => renderNode2(child)));
     };
-    const root = doc ? renderNode2(doc) : null;
+    const root = doc ? renderNode2(doc, true) : null;
     (0, import_react2.useEffect)(() => {
-      let api = createAnimator({ data: doc, adapter: createReactAdapter(elementRefs) });
+      const cb = (name, alsoStop = false) => () => {
+        callbacksRef.current?.[name]?.();
+        if (alsoStop) callbacksRef.current?.onStop?.();
+      };
+      const callbacks = {
+        onPlay: cb("onPlay"),
+        onPause: cb("onPause", true),
+        onCancel: cb("onCancel", true),
+        onFinish: cb("onFinish", true),
+        onRemove: cb("onRemove", true)
+      };
+      let api = createAnimator({ data: doc, adapter: createReactAdapter(elementRefs), callbacks });
       apiHolderRef.current = api;
       return () => {
         api?.destroy();
@@ -7258,7 +7540,6 @@ var PixodeskAnimatorReact = (() => {
     time,
     timeMs,
     apiRef,
-    timeline,
     // Overrides
     mode,
     delay,
@@ -7269,7 +7550,13 @@ var PixodeskAnimatorReact = (() => {
     frameRate,
     startOn,
     outAction,
-    scrollIntoViewThreshold
+    scrollIntoViewThreshold,
+    onPlay,
+    onStop,
+    onPause,
+    onCancel,
+    onFinish,
+    onRemove
   }) => {
     let compMode = "static" /* static */;
     if (apiRef) {
@@ -7278,7 +7565,7 @@ var PixodeskAnimatorReact = (() => {
       compMode = "autoplay" /* autoplay */;
     } else if (time !== void 0 || timeMs !== void 0) {
       compMode = "fixedTime" /* fixedTime */;
-    } else {
+    } else if (play !== void 0 || pause !== void 0) {
       compMode = "play" /* play */;
     }
     if (compMode !== "autoplay" /* autoplay */) {
@@ -7328,20 +7615,20 @@ var PixodeskAnimatorReact = (() => {
         }
       };
     }
+    let seekMs;
     if (compMode === "fixedTime" /* fixedTime */) {
-      let delay2 = 0;
-      if (time !== void 0) delay2 = -time;
-      if (timeMs !== void 0) delay2 = -timeMs;
       const animator = doc.animator || {};
-      doc = {
-        ...doc,
-        animator: {
-          ...animator,
-          delay: delay2
-        }
-      };
+      if (time !== void 0) {
+        const iterationsValue = iterations ?? animator.iterations;
+        const iterationsCount = typeof iterationsValue === "number" && iterationsValue >= 1 ? iterationsValue : 1;
+        const singleDuration = duration ?? animator.duration ?? 1e3;
+        seekMs = time * singleDuration * iterationsCount;
+      }
+      if (timeMs !== void 0) seekMs = timeMs;
     }
     const apiHolderRef = (0, import_react2.useRef)(null);
+    const callbacksRef = (0, import_react2.useRef)({});
+    callbacksRef.current = { onPlay, onStop, onPause, onCancel, onFinish, onRemove };
     (0, import_react2.useImperativeHandle)(apiRef, () => {
       return {
         isPlaying: () => apiHolderRef.current?.isPlaying() || false,
@@ -7349,18 +7636,22 @@ var PixodeskAnimatorReact = (() => {
         pause: () => apiHolderRef.current?.pause(),
         cancel: () => apiHolderRef.current?.cancel(),
         finish: () => apiHolderRef.current?.finish(),
-        getCurrentTime: () => apiHolderRef.current?.getCurrentTime() || null,
+        setPlaybackRate: (rate) => apiHolderRef.current?.setPlaybackRate(rate),
+        getCurrentTime: () => apiHolderRef.current?.getCurrentTime() ?? null,
         setCurrentTime: (time2) => apiHolderRef.current?.setCurrentTime(time2)
       };
     }, []);
+    const key = useDepsVersion(compMode, doc, className, style);
     (0, import_react2.useEffect)(() => {
       if (compMode === "play" /* play */) {
         if (play && !pause) {
           apiHolderRef.current?.play();
         } else if (pause) {
           apiHolderRef.current?.pause();
-        } else {
+        } else if (play === false) {
           apiHolderRef.current?.finish();
+        } else {
+          apiHolderRef.current?.play();
         }
       }
       return () => {
@@ -7368,14 +7659,22 @@ var PixodeskAnimatorReact = (() => {
           apiHolderRef.current?.pause();
         }
       };
-    }, [compMode, play, pause]);
-    const key = useDepsVersion(compMode, doc);
+    }, [compMode, play, pause, key]);
+    (0, import_react2.useEffect)(() => {
+      if (compMode === "fixedTime" /* fixedTime */ && seekMs !== void 0) {
+        apiHolderRef.current?.setCurrentTime(seekMs);
+        apiHolderRef.current?.pause();
+      }
+    }, [compMode, seekMs, key]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       PixodeskSvgAnimatorImplOnce,
       {
+        className,
+        style,
         compMode,
         doc,
-        apiHolderRef
+        apiHolderRef,
+        callbacksRef
       },
       key
     );
@@ -7408,7 +7707,10 @@ var PixodeskAnimatorReact = (() => {
       "div",
       {
         ref,
-        className: className + (state === "playing" ? "px-anim-enabled px-anim-playing" : state === "paused" ? "px-anim-enabled" : ""),
+        className: [
+          className,
+          state === "playing" ? "px-anim-enabled px-anim-playing" : state === "paused" ? "px-anim-enabled" : ""
+        ].filter(Boolean).join(" "),
         style,
         ...handlers,
         children