@pixodesk/svg-animator-react 1.0.19 → 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(),
@@ -2786,6 +2790,7 @@ var PixodeskAnimatorReact = (() => {
     transformation: PxTransformationEffectSchema.optional(),
     repeater: PxRepeaterEffectSchema.optional(),
     maskedBy: PxMaskedByEffectSchema.optional(),
+    clipPath: PxClipPathEffectSchema.optional(),
     trimPath: PxTrimPathEffectSchema.optional(),
     clone: PxCloneEffectSchema.optional(),
     isCombinedShape: px.boolean().optional(),
@@ -3078,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) {
@@ -3513,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) {
@@ -3929,6 +3946,8 @@ var PixodeskAnimatorReact = (() => {
     // Filter
     "filterUnits",
     "primitiveUnits",
+    "tableValues",
+    // feFuncR/G/B/A transfer table (type="table")
     "stdDeviation",
     "baseFrequency",
     "numOctaves",
@@ -4185,6 +4204,9 @@ var PixodeskAnimatorReact = (() => {
       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);
@@ -4433,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;
@@ -4442,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;
       }
     };
@@ -4489,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);
           }
         }
       }
@@ -4511,10 +4568,17 @@ 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 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;
@@ -4527,6 +4591,7 @@ 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;
@@ -4534,9 +4599,9 @@ var PixodeskAnimatorReact = (() => {
     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, isClip), create);
+      return toGroup(node, buildAnimatedAlongPath(cells, sampler, so.keyframes, so.loop, create, isClip, alongOffset, perp), 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 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;
@@ -4544,7 +4609,7 @@ var PixodeskAnimatorReact = (() => {
     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);
   }
@@ -4554,10 +4619,10 @@ var PixodeskAnimatorReact = (() => {
     const f = __pow(10, n);
     return Math.round(v * f) / f;
   }
-  function buildAnimatedAlongPath(cells, sampler, sokfs, loop, create, isClip) {
+  function buildAnimatedAlongPath(cells, sampler, sokfs, loop, create, isClip, alongOffset = 0, perp = 0) {
     const step = Math.max(sampler.totalLength / ALONG_PATH_MAX_STEPS, 0.5);
     const timeOf = (kf) => Number(kf.time) || 0;
-    const offOf = (kf) => Number(kf.value) || 0;
+    const offOf = (kf) => alongOffset + (Number(kf.value) || 0);
     const onPath = (dist) => dist >= 0 && dist <= sampler.totalLength;
     const out = [];
     for (const c of cells) {
@@ -4565,13 +4630,14 @@ var PixodeskAnimatorReact = (() => {
       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 */
@@ -4838,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);
@@ -4861,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),
@@ -6057,7 +6134,7 @@ 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, textPath, text } = fx != null ? fx : {};
+    const { transformation, repeater, maskedBy, clipPath, trimPath, clone: cloneFx, fillGradient, strokeGradient, textPath, text } = fx != null ? fx : {};
     const isCombinedShape = fx == null ? void 0 : fx.isCombinedShape;
     if (fx) delete node.effects;
     let n = node;
@@ -6083,6 +6160,7 @@ var PixodeskAnimatorReact = (() => {
     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);
@@ -6405,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;
@@ -6417,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;
@@ -6432,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 = () => {
@@ -6444,6 +6531,8 @@ var PixodeskAnimatorReact = (() => {
           api.cancel();
           break;
         case "reverse":
+          reversed = true;
+          api.setPlaybackRate(-1);
           api.play();
           break;
         case "continue":
@@ -6504,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;
@@ -6514,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;
@@ -6570,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;
     };
@@ -6623,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 {
@@ -6661,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 = {
@@ -6674,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();
@@ -6694,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();
@@ -6707,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;
@@ -6873,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");
     }
@@ -6889,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,
@@ -6910,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);
@@ -6940,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);
       },
@@ -6950,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);
       },
@@ -6979,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) {
@@ -7127,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;
@@ -7155,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();
       }
     };
@@ -7308,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();
@@ -7347,7 +7540,6 @@ var PixodeskAnimatorReact = (() => {
     time,
     timeMs,
     apiRef,
-    timeline,
     // Overrides
     mode,
     delay,
@@ -7358,7 +7550,13 @@ var PixodeskAnimatorReact = (() => {
     frameRate,
     startOn,
     outAction,
-    scrollIntoViewThreshold
+    scrollIntoViewThreshold,
+    onPlay,
+    onStop,
+    onPause,
+    onCancel,
+    onFinish,
+    onRemove
   }) => {
     let compMode = "static" /* static */;
     if (apiRef) {
@@ -7367,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 */) {
@@ -7417,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,
@@ -7438,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 () => {
@@ -7457,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
     );
@@ -7497,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