@pixodesk/svg-animator-rn 1.0.34 → 1.0.39

package/dist/index.d.ts

@@ -1,69 +1,44 @@
-import { PxAnimatedSvgDocument, FillMode, PlaybackDirection, OutAction, PxDefs, PxNode } from '@pixodesk/svg-animator-core';
+import { PxPlaybackOverrideProps, PxControlProps, PxComponentCallbacks, PxAnimatedSvgDocument, PxTimelinePatch, PxAnimatorHandle, PxDefs, PxNode, PxDiagnostics } from '@pixodesk/svg-animator-core';
 import React, { ReactElement, ComponentType, ReactNode, Component, ErrorInfo } from 'react';
 
-/** Imperative playback API — mirrors ReactAnimatorApi from svg-animator-react. */
-interface RnAnimatorApi {
-    /** Returns true if the animation is currently running. */
-    isPlaying(): boolean;
-    /** Starts or resumes the animation. */
-    play(): void;
-    /** Pauses the animation at its current state. */
-    pause(): void;
-    /** Stops the animation and resets it to its initial state. */
-    cancel(): void;
-    /** Jumps to the end of the animation and holds the final state. */
-    finish(): void;
-    /** Changes the speed of the animation. 1 is normal, 2 is double. */
-    setPlaybackRate(rate: number): void;
-    /** Returns the current playback time in milliseconds. */
-    getCurrentTime(): number | null;
-    /** Jumps to a specific time (in milliseconds) in the animation. */
-    setCurrentTime(time: number): void;
-}
-interface PixodeskSvgAnimatorProps {
+/**
+ * The imperative handle `apiRef` is filled with — core's `PxAnimatorHandle` under this package's
+ * name (review §9). It no longer "mirrors" the React one by hand: the local copy had already
+ * drifted (its `setPlaybackRate` comment lost "negative plays backwards"). One definition.
+ */
+type RnAnimatorApi = PxAnimatorHandle;
+/**
+ * The component's props. The playback override, the control props and the callbacks are core's
+ * shared shapes (review §9) — `PxPlaybackOverrideProps`, `PxControlProps` and
+ * `PxComponentCallbacks` — so React, Vue and React Native cannot drift apart. Only what differs
+ * on this platform is declared here: `onError` keeps its richer signature (the error boundary
+ * hands it a component stack), and `fallback` has no web counterpart.
+ */
+interface PixodeskSvgAnimatorProps extends PxPlaybackOverrideProps, PxControlProps, Omit<PxComponentCallbacks, 'onError'> {
     /** The animation document to render. */
     doc: PxAnimatedSvgDocument;
-    /** Duration of a single iteration in milliseconds. */
-    duration?: number;
-    /** Delay before the animation starts, in milliseconds. */
-    delay?: number;
-    /** Number of iterations, or 'infinite' for endless looping. */
-    iterations?: number | 'infinite';
-    /** Defines the element's state when the animation is not active. */
-    fill?: FillMode;
-    /** Playback direction. */
-    direction?: PlaybackDirection;
-    /** Snap back to the start state after a natural finish. */
-    resetOnFinish?: boolean;
     /**
-     * What a second tap does when `startOn: 'click'` is active.
-     * Defaults to the document's `trigger.outAction`, else `'pause'`.
+     * Per-instance override of the document's `timeline` — see `PxPlaybackOverrideProps`.
+     *
+     * `engine` is accepted but ignored here: React Native always uses the `native` (fully
+     * flattened) materialization, because react-native-svg has no `<use>` shadow-tree
+     * propagation.
+     */
+    timeline?: PxTimelinePatch | string;
+    /**
+     * Ref populated with the imperative playback API. Filled in EVERY mode and never picks one
+     * (review §1): `autoplay` next to it still autoplays.
      */
-    outAction?: OutAction;
-    /** When true, honours the document trigger (`startOn: 'load'` plays on mount). */
-    autoplay?: boolean;
-    /** Starts playback unconditionally. */
-    play?: boolean;
-    /** Pauses current playback. */
-    pause?: boolean;
-    /** Ref populated with the imperative playback API. */
     apiRef?: React.RefObject<RnAnimatorApi | null>;
-    /** Seek to a fraction (0–1) of the whole timeline (duration × iterations). */
-    progress?: number;
-    /** Seek to a specific time in milliseconds. */
-    time?: number;
-    onPlay?: () => void;
-    onStop?: () => void;
-    onPause?: () => void;
-    onCancel?: () => void;
-    onFinish?: () => void;
     /**
      * Called when a document cannot be compiled or rendered. The component
      * renders {@link fallback} instead of throwing, so a single broken
      * animation never takes down the screen around it.
      *
      * Only JavaScript failures reach this — a crash inside react-native-svg's
-     * native renderer bypasses JavaScript entirely.
+     * native renderer bypasses JavaScript entirely. Richer than the web's
+     * `onError(diagnostic)` because the error boundary hands it a component stack; it is
+     * adapted into the shared diagnostics channel rather than narrowed to match it.
      */
     onError?: (error: Error, componentStack?: string) => void;
     /** Rendered in place of the animation after a failure. Default: nothing. */
@@ -72,14 +47,15 @@ interface PixodeskSvgAnimatorProps {
 /**
  * React Native component for rendering and controlling Pixodesk SVG animations.
  *
- * The document is materialised once through the shared core pipeline (effects,
+ * The document is materialized once through the shared core pipeline (effects,
  * loops, motion-path sampling, animated-`<use>` inlining — identical to the
- * web frames engine), compiled into densely sampled per-element tracks, and
+ * web's `native` engine, NOT the frame loop, which keeps `<use>` live), compiled
+ * into densely sampled per-element tracks, and
  * played back natively: a single reanimated progress value driven by
  * `withTiming`/`withRepeat` on the UI thread, with per-element worklets
  * indexing the precompiled tracks. No JS-thread frame loop.
  */
-declare function PixodeskSvgAnimator({ doc, duration, delay, iterations, fill, direction, resetOnFinish, outAction: outActionProp, autoplay, play, pause, apiRef, progress: progressProp, time, onPlay, onStop, onPause, onCancel, onFinish, onError, fallback, }: PixodeskSvgAnimatorProps): ReactElement | null;
+declare function PixodeskSvgAnimator({ doc, timeline, resetTimeline, duration, delay, iterations, startOn, autoplay, play, pause, apiRef, progress: progressProp, time, onPlay, onStop, onPause, onCancel, onFinish, onRemove, onError, fallback, onWarn, silent, }: PixodeskSvgAnimatorProps): ReactElement | null;
 
 interface RenderRnNodeOptions {
     /** Collects non-fatal issues (unsupported tags, dropped attrs). */
@@ -99,13 +75,13 @@ interface RenderRnNodeOptions {
     decorate?: (node: PxNode, Component: ComponentType<any>, props: Record<string, any>, children: ReactNode, key: string | number | undefined) => ReactElement | undefined;
 }
 /**
- * Converts core-normalised wire props into react-native-svg props: RN prop
- * naming, sanitisation (same security rules as the web renderer), numeric
+ * Converts core-normalized wire props into react-native-svg props: RN prop
+ * naming, sanitization (same security rules as the web renderer), numeric
  * coercion where possible.
  */
 declare function toRnProps(props: Record<string, any>, warnings?: Array<string>, tag?: string): Record<string, any>;
 /**
- * Renders a (materialised) PxNode tree to react-native-svg elements.
+ * Renders a (materialized) PxNode tree to react-native-svg elements.
  * Mirrors the web `renderNode` contract: unsupported/dangerous tags are
  * skipped with a warning, never a crash.
  */
@@ -116,6 +92,8 @@ interface PxRnErrorBoundaryProps {
     /** Rendered instead of the children once something has thrown. */
     fallback?: (error: Error) => ReactNode;
     onError?: (error: Error, info?: string) => void;
+    /** Where to report the failure (API review §5). Defaults to the console. */
+    diag?: PxDiagnostics;
 }
 interface State {
     error: Error | null;
@@ -170,7 +148,7 @@ declare function openClosedTextPathTargets(doc: PxNode, warnings?: Array<string>
  * The compiler densely samples every animated property through core's
  * `calcAnimationValues` — the exact function the web frames engine renders
  * with — so RN playback is value-identical to the web player. Easing, loops,
- * transform composition, colour interpolation and path morphing are all baked
+ * transform composition, color interpolation and path morphing are all baked
  * into the samples at compile time; the UI-thread worklet only indexes arrays.
  */
 interface PxElementTracks {
@@ -215,7 +193,7 @@ interface CompileTracksOptions {
     native?: boolean;
 }
 /**
- * Compiles a MATERIALISED document (run `materialiseAllInTree(doc, 'frames')`
+ * Compiles a MATERIALIZED document (run `materializeAllInTree(doc, 'frames')`
  * + `generateNewIds` first) into densely sampled per-element tracks.
  */
 declare function compileTracks(doc: PxAnimatedSvgDocument, opts?: CompileTracksOptions): PxCompiledTracks;
@@ -232,7 +210,7 @@ declare function compileTracks(doc: PxAnimatedSvgDocument, opts?: CompileTracksO
 declare function sampleProps(tracks: PxElementTracks, tMs: number, stepMs: number, sampleCount: number, native?: boolean): Record<string, string | number | Array<number>>;
 
 /**
- * Converts one normalised wire attribute name (camelCase after core's
+ * Converts one normalized wire attribute name (camelCase after core's
  * `getNormalizedProps`, or kebab-case raw) to a react-native-svg prop name.
  * Returns undefined for props that must be dropped.
  *

package/dist/index.js

@@ -32,12 +32,28 @@ var __objRest = (source, exclude) => {
 
 // src/PixodeskSvgAnimator.tsx
 import {
+  clampSeekMs,
+  createDiagnostics as createDiagnostics2,
+  createRunClock,
+  isValidPlaybackRate,
+  progressSpanMs,
+  progressToTimeMs,
+  PX_RATE_REJECTED,
+  PxDiagnosticKind as PxDiagnosticKind2,
+  seekCeilingMs,
+  timeToProgress,
+  reportDocumentDiagnostics,
   generateNewIds,
   getAnimatorConfig as getAnimatorConfig2,
   getDefs,
-  materialiseAllInTree,
+  materializeAllInTree,
+  resolveTrigger,
   validateNodeEffects,
-  PxAnimatorEngine as PxAnimatorEngine2
+  PxTimelineEngine as PxTimelineEngine2,
+  PxControlMode,
+  resolveControlMode,
+  applyAnimatorConfig,
+  foldTimelineOverride
 } from "@pixodesk/svg-animator-core";
 import { createElement as createElement2, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Dimensions, Platform, Pressable, View } from "react-native";
@@ -57,9 +73,9 @@ import Animated, {
 import {
   calcAnimationValues,
   getAnimatorConfig,
-  getNormalisedBindings,
+  getNormalizedBindings,
   DEFAULT_DURATION_MS,
-  PxAnimatorEngine
+  PxTimelineEngine
 } from "@pixodesk/svg-animator-core";
 
 // src/PxRnPropNames.ts
@@ -180,7 +196,7 @@ function compileTracks(doc, opts) {
     ((_a2 = n == null ? void 0 : n.children) != null ? _a2 : []).forEach(indexTags);
   };
   indexTags(doc);
-  const bindings = getNormalisedBindings(doc, PxAnimatorEngine.frames) || [];
+  const bindings = getNormalizedBindings(doc, PxTimelineEngine.js) || [];
   const elements = [];
   for (const binding of bindings) {
     const animDef = binding.animate;
@@ -243,9 +259,8 @@ function sampleProps(tracks, tMs, stepMs, sampleCount, native = false) {
 import {
   getNormalizedProps,
   resolveStyle,
-  sanitiseAttributeValue,
+  sanitizeAttributeValue,
   DISALLOWED_SVG_TAGS_LOWER,
-  TEXT_ATTR,
   TEXT_CONTENT_ATTR
 } from "@pixodesk/svg-animator-core";
 import { createElement } from "react";
@@ -364,14 +379,14 @@ var RN_SVG_COMPONENTS = {
 
 // src/PxRnRender.tsx
 function toRnProps(props, warnings, tag) {
-  const normalised = getNormalizedProps(props);
+  const normalized = getNormalizedProps(props);
   const out = {};
-  for (const key of Object.keys(normalised)) {
-    const sanitised = sanitiseAttributeValue(key, normalised[key]);
-    if (sanitised === void 0) continue;
+  for (const key of Object.keys(normalized)) {
+    const sanitized = sanitizeAttributeValue(key, normalized[key]);
+    if (sanitized === void 0) continue;
     const rnKey = toRnPropName(key);
     if (!rnKey) continue;
-    out[rnKey] = toRnPropValue(rnKey, String(sanitised), tag);
+    out[rnKey] = toRnPropValue(rnKey, String(sanitized), tag);
   }
   return out;
 }
@@ -398,12 +413,12 @@ function renderRnNode(node, opts = {}, key) {
     for (const [k, v] of Object.entries(resolved)) {
       const rnKey = toRnPropName(k);
       if (!rnKey || rnKey in rnProps) continue;
-      const sanitised = sanitiseAttributeValue(rnKey, v);
-      if (sanitised === void 0) continue;
-      rnProps[rnKey] = toRnPropValue(rnKey, String(sanitised), tag);
+      const sanitized = sanitizeAttributeValue(rnKey, v);
+      if (sanitized === void 0) continue;
+      rnProps[rnKey] = toRnPropValue(rnKey, String(sanitized), tag);
     }
   }
-  const textContent = props[TEXT_ATTR] || props[TEXT_CONTENT_ATTR];
+  const textContent = props[TEXT_CONTENT_ATTR];
   let childElements = void 0;
   if (Array.isArray(children) && children.length > 0) {
     childElements = children.map((ch, i) => {
@@ -429,6 +444,7 @@ function renderRnNode(node, opts = {}, key) {
 
 // src/PxRnErrorBoundary.tsx
 import { Component } from "react";
+import { createDiagnostics, PxDiagnosticKind } from "@pixodesk/svg-animator-core";
 var PxRnErrorBoundary = class extends Component {
   constructor() {
     super(...arguments);
@@ -438,9 +454,9 @@ var PxRnErrorBoundary = class extends Component {
     return { error };
   }
   componentDidCatch(error, info) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     (_c = (_b = this.props).onError) == null ? void 0 : _c.call(_b, error, (_a = info == null ? void 0 : info.componentStack) != null ? _a : void 0);
-    console.warn("[PixodeskSvgAnimator] render failed:", (_d = error == null ? void 0 : error.message) != null ? _d : error);
+    ((_d = this.props.diag) != null ? _d : createDiagnostics(void 0, "[PixodeskSvgAnimator]")).warn(PxDiagnosticKind.internal, "render failed: " + ((_e = error == null ? void 0 : error.message) != null ? _e : String(error)));
   }
   componentDidUpdate(prev) {
     if (this.state.error && prev.children !== this.props.children) {
@@ -599,38 +615,33 @@ var EMPTY_TRACKS = {
   sampleCount: 2,
   elements: []
 };
-function compileDocument(doc, overrides) {
-  const { duration, delay, iterations, fill, direction, resetOnFinish } = overrides;
+function compileDocument(doc, overrides, diag) {
+  const { timeline, resetTimeline, duration, delay, iterations, startOn } = overrides;
   const warnings = validateNodeEffects(doc);
-  for (const w of warnings) console.warn("[PixodeskSvgAnimator] effects shape warning:", w);
-  let prepared = materialiseAllInTree(doc, PxAnimatorEngine2.waapi);
+  for (const w of warnings) diag.warn(PxDiagnosticKind2.document, "effects shape: " + w);
+  reportDocumentDiagnostics(doc, "[PixodeskSvgAnimator]");
+  const patch = foldTimelineOverride(timeline, { duration, delay, iterations, startOn });
+  if (patch !== void 0 || resetTimeline) {
+    const applied = applyAnimatorConfig(doc, patch != null ? patch : {}, { resetDefaults: !!resetTimeline });
+    for (const w of applied.warnings) diag.warn(PxDiagnosticKind2.usage, "timeline override: " + w);
+    doc = applied.doc;
+  }
+  let prepared = materializeAllInTree(doc, PxTimelineEngine2.native);
   if (NATIVE_SVG_VIEWS) {
     prepared = openClosedTextPathTargets(prepared);
   }
-  const animator = getAnimatorConfig2(prepared) || {};
-  prepared = __spreadProps(__spreadValues({}, prepared), {
-    animator: __spreadProps(__spreadValues({}, animator), {
-      duration: duration !== void 0 ? duration : animator.duration,
-      delay: delay !== void 0 ? delay : animator.delay,
-      iterations: iterations !== void 0 ? iterations : animator.iterations,
-      fill: fill !== void 0 ? fill : animator.fill,
-      direction: direction !== void 0 ? direction : animator.direction,
-      resetOnFinish: resetOnFinish !== void 0 ? resetOnFinish : animator.resetOnFinish
-    })
-  });
   prepared = generateNewIds(prepared);
   const tracks = compileTracks(prepared, { native: NATIVE_SVG_VIEWS });
   return { doc: prepared, tracks, error: null };
 }
 function PixodeskSvgAnimator({
   doc,
+  timeline,
+  resetTimeline,
   duration,
   delay,
   iterations,
-  fill,
-  direction,
-  resetOnFinish,
-  outAction: outActionProp,
+  startOn,
   // (`progress` prop aliased — the name is taken by the internal reanimated SharedValue)
   autoplay,
   play,
@@ -643,24 +654,42 @@ function PixodeskSvgAnimator({
   onPause,
   onCancel,
   onFinish,
+  onRemove,
   onError,
-  fallback
+  fallback,
+  onWarn,
+  silent
 }) {
-  var _a, _b, _c, _d;
+  var _a, _b;
+  const timelineKey = typeof timeline === "string" ? timeline : JSON.stringify(timeline != null ? timeline : null);
+  const makeDiag = () => createDiagnostics2({
+    onWarn,
+    // This component's public `onError` is richer — `(error, componentStack?)` — and the
+    // error boundary hands it a component stack. Adapt rather than narrow it; the ternary
+    // keeps "not given" as undefined, so the console fallback still fires.
+    onError: onError ? (d) => {
+      var _a2;
+      return onError((_a2 = d.error) != null ? _a2 : new Error(d.message));
+    } : void 0,
+    silent
+  }, "[PixodeskSvgAnimator]");
   const compiled = useMemo(() => {
     try {
       return compileDocument(
         doc,
-        { duration, delay, iterations, fill, direction, resetOnFinish }
+        { timeline, resetTimeline, duration, delay, iterations, startOn },
+        makeDiag()
       );
     } catch (e) {
       const error = e instanceof Error ? e : new Error(String(e));
-      console.warn("[PixodeskSvgAnimator] could not compile the document:", error.message);
+      makeDiag().warn(PxDiagnosticKind2.internal, "could not compile the document: " + error.message);
       return { doc: null, tracks: EMPTY_TRACKS, error };
     }
-  }, [doc, duration, delay, iterations, fill, direction, resetOnFinish]);
+  }, [doc, timelineKey, resetTimeline, duration, delay, iterations, startOn]);
   const tracks = compiled.tracks;
-  const totalDuration = tracks.duration * (tracks.iterations === Infinity ? 1 : tracks.iterations);
+  const totalDuration = progressSpanMs(tracks.duration, tracks.iterations);
+  const seekCeiling = seekCeilingMs(tracks.duration, tracks.iterations);
+  const runClock = useMemo(() => createRunClock(seekCeiling), [seekCeiling]);
   const progress = useSharedValue(0);
   const playingRef = useRef(false);
   const rateRef = useRef(1);
@@ -672,6 +701,8 @@ function PixodeskSvgAnimator({
   };
   const notifyFinish = () => {
     playingRef.current = false;
+    runClock.seek(Number.isFinite(seekCeiling) ? seekCeiling : tracks.duration);
+    runClock.stop();
     progress.value = restingPosition();
     onFinish == null ? void 0 : onFinish();
     onStop == null ? void 0 : onStop();
@@ -708,12 +739,15 @@ function PixodeskSvgAnimator({
   const api = {
     isPlaying: () => playingRef.current,
     play: () => {
+      if (Number.isFinite(seekCeiling) && runClock.now() >= seekCeiling) runClock.seek(0);
+      runClock.start(rateRef.current);
       startFrom(progress.value);
       onPlay == null ? void 0 : onPlay();
     },
     pause: () => {
       cancelAnimation(progress);
       playingRef.current = false;
+      runClock.stop();
       onPause == null ? void 0 : onPause();
       onStop == null ? void 0 : onStop();
     },
@@ -721,62 +755,82 @@ function PixodeskSvgAnimator({
       cancelAnimation(progress);
       progress.value = 0;
       playingRef.current = false;
+      runClock.seek(0);
+      runClock.stop();
       onCancel == null ? void 0 : onCancel();
       onStop == null ? void 0 : onStop();
     },
     finish: () => {
       cancelAnimation(progress);
       playingRef.current = false;
+      runClock.seek(Number.isFinite(seekCeiling) ? seekCeiling : tracks.duration);
+      runClock.stop();
       progress.value = restingPosition();
       onFinish == null ? void 0 : onFinish();
       onStop == null ? void 0 : onStop();
     },
     setPlaybackRate: (rate) => {
-      if (!isFinite(rate) || rate === 0) {
-        console.warn("setPlaybackRate: rate must be finite and non-zero");
+      if (!isValidPlaybackRate(rate)) {
+        makeDiag().warn(PxDiagnosticKind2.usage, PX_RATE_REJECTED);
         return;
       }
       rateRef.current = rate;
-      if (playingRef.current) startFrom(progress.value);
+      if (playingRef.current) {
+        runClock.start(rate);
+        startFrom(progress.value);
+      }
     },
-    getCurrentTime: () => progress.value,
+    // Ms from the start of the WHOLE run, like every other engine (review §3). This used
+    // to return `progress.value`, which is ms within the current iteration — so a slider
+    // built on it jumped back to 0 every time the animation repeated.
+    getCurrentTime: () => runClock.now(),
     setCurrentTime: (t) => {
       const wasPlaying = playingRef.current;
       cancelAnimation(progress);
       playingRef.current = false;
-      const clamped = Math.max(0, Math.min(t, totalDuration));
+      const clamped = clampSeekMs(t, seekCeiling);
+      runClock.seek(clamped);
       const withinIteration = tracks.duration > 0 ? clamped % tracks.duration || (clamped === 0 ? 0 : tracks.duration) : 0;
       progress.value = withinIteration;
       if (wasPlaying) startFrom(withinIteration);
+      else runClock.stop();
+    },
+    getCurrentProgress: () => timeToProgress(runClock.now(), tracks.duration, tracks.iterations),
+    setCurrentProgress: (p) => {
+      api.setCurrentTime(progressToTimeMs(p, tracks.duration, tracks.iterations));
     }
   };
   useImperativeHandle(apiRef, () => api, [compiled]);
-  const trigger = compiled.doc ? (_a = getAnimatorConfig2(compiled.doc)) == null ? void 0 : _a.trigger : void 0;
-  const startOn = (_b = trigger == null ? void 0 : trigger.startOn) != null ? _b : "load";
-  const outAction = (_c = outActionProp != null ? outActionProp : trigger == null ? void 0 : trigger.outAction) != null ? _c : "pause";
+  const trigger = resolveTrigger(compiled.doc ? (_a = getAnimatorConfig2(compiled.doc)) == null ? void 0 : _a.trigger : void 0);
+  const effectiveStartOn = trigger.startOn;
+  const effectiveOutAction = trigger.outAction;
+  const { mode: compMode, warnings: modeWarnings } = resolveControlMode({ progress: progressProp, time, play, pause, autoplay });
+  useEffect(() => {
+    const diag = makeDiag();
+    for (const w of modeWarnings) diag.warn(PxDiagnosticKind2.usage, w);
+  }, [modeWarnings.join("|")]);
   useEffect(() => {
-    if (progressProp !== void 0 || time !== void 0) {
-      const seekMs = time !== void 0 ? time : (progressProp != null ? progressProp : 0) * totalDuration;
+    if (compMode === PxControlMode.fixedTime) {
+      const seekMs = time !== void 0 ? time : progressToTimeMs(progressProp != null ? progressProp : 0, tracks.duration, tracks.iterations);
       api.setCurrentTime(seekMs);
       return;
     }
-    if (play !== void 0 || pause !== void 0) {
+    if (compMode === PxControlMode.play) {
       if (play && !pause) api.play();
       else if (pause) api.pause();
-      else if (play === false) api.finish();
+      else if (play === false) api.pause();
       else api.play();
       return;
     }
-    if (autoplay && startOn === "load") {
+    if (compMode === PxControlMode.autoplay && effectiveStartOn === "load") {
       api.play();
     }
-  }, [compiled, autoplay, play, pause, progressProp, time]);
+  }, [compiled, compMode, autoplay, play, pause, progressProp, time]);
   const scrollRef = useRef(null);
   const inViewRef = useRef(false);
   useEffect(() => {
-    var _a2;
-    if (!autoplay || startOn !== "scrollIntoView") return;
-    const threshold = (_a2 = trigger == null ? void 0 : trigger.scrollIntoViewThreshold) != null ? _a2 : 0;
+    if (!autoplay || effectiveStartOn !== "scrollIntoView") return;
+    const threshold = trigger.scrollIntoViewThreshold;
     inViewRef.current = false;
     const check = () => {
       const node = scrollRef.current;
@@ -792,21 +846,23 @@ function PixodeskSvgAnimator({
         if (isIn) {
           if (rateRef.current < 0) api.setPlaybackRate(Math.abs(rateRef.current));
           api.play();
-        } else if (outAction === "reset") api.cancel();
-        else if (outAction === "reverse") {
+        } else if (effectiveOutAction === "reset") api.cancel();
+        else if (effectiveOutAction === "reverse") {
           api.setPlaybackRate(-Math.abs(rateRef.current || 1));
           api.play();
-        } else if (outAction !== "continue") api.pause();
+        } else if (effectiveOutAction !== "continue") api.pause();
       });
     };
     check();
     const id = setInterval(check, 200);
     return () => clearInterval(id);
-  }, [compiled, autoplay, startOn, outAction]);
+  }, [compiled, autoplay, effectiveStartOn, effectiveOutAction]);
   useEffect(() => {
     return () => {
       cancelAnimation(progress);
       playingRef.current = false;
+      onRemove == null ? void 0 : onRemove();
+      onStop == null ? void 0 : onStop();
     };
   }, [compiled]);
   const trackById = useMemo(() => {
@@ -862,32 +918,33 @@ function PixodeskSvgAnimator({
     } catch (e) {
       const error = e instanceof Error ? e : new Error(String(e));
       renderErrorRef.current = error;
-      console.warn("[PixodeskSvgAnimator] could not render the document:", error.message);
+      makeDiag().warn(PxDiagnosticKind2.internal, "could not render the document: " + error.message);
       return null;
     }
   }, [compiled, trackById]);
   useEffect(() => {
-    for (const w of warningsRef.current) console.warn("[PixodeskSvgAnimator]", w);
+    const diag = makeDiag();
+    for (const w of warningsRef.current) diag.warn(PxDiagnosticKind2.platform, w);
   }, [root]);
-  const failure = (_d = compiled.error) != null ? _d : renderErrorRef.current;
+  const failure = (_b = compiled.error) != null ? _b : renderErrorRef.current;
   useEffect(() => {
     if (failure) onError == null ? void 0 : onError(failure);
   }, [failure]);
   if (failure) return fallback ? fallback(failure) : null;
   let content = root;
-  if (autoplay && startOn === "scrollIntoView" && root) {
+  if (autoplay && effectiveStartOn === "scrollIntoView" && root) {
     content = /* @__PURE__ */ jsx(View, { ref: scrollRef, collapsable: false, children: root });
-  } else if (autoplay && startOn === "click" && root) {
+  } else if (autoplay && effectiveStartOn === "click" && root) {
     content = /* @__PURE__ */ jsx(
       Pressable,
       {
         onPress: () => {
           if (playingRef.current) {
-            if (outAction === "reset") api.cancel();
-            else if (outAction === "reverse") {
+            if (effectiveOutAction === "reset") api.cancel();
+            else if (effectiveOutAction === "reverse") {
               api.setPlaybackRate(-Math.abs(rateRef.current || 1));
               api.play();
-            } else if (outAction !== "continue") api.pause();
+            } else if (effectiveOutAction !== "continue") api.pause();
           } else {
             if (rateRef.current < 0) api.setPlaybackRate(Math.abs(rateRef.current));
             api.play();
@@ -897,7 +954,7 @@ function PixodeskSvgAnimator({
       }
     );
   }
-  return /* @__PURE__ */ jsx(PxRnErrorBoundary, { onError, fallback, children: content });
+  return /* @__PURE__ */ jsx(PxRnErrorBoundary, { onError, fallback, diag: makeDiag(), children: content });
 }
 var PixodeskSvgAnimator_default = PixodeskSvgAnimator;
 export {