@pixodesk/svg-animator-rn 1.0.21 → 1.0.22

package/dist/index.js

@@ -34,13 +34,16 @@ var __objRest = (source, exclude) => {
 import {
   generateNewIds,
   getAnimatorConfig as getAnimatorConfig2,
+  getDefs,
   materialiseAllInTree,
   validateNodeEffects,
   PxAnimatorEngine as PxAnimatorEngine2
 } from "@pixodesk/svg-animator-core";
-import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import { createElement as createElement2, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Dimensions, Platform, Pressable, View } from "react-native";
 import Animated, {
   cancelAnimation,
+  useAnimatedReaction,
   Easing,
   runOnJS,
   useAnimatedProps,
@@ -61,6 +64,74 @@ import {
 
 // src/PxRnPropNames.ts
 import { kebabToCamelCaseWord } from "@pixodesk/svg-animator-core";
+
+// src/PxRnMatrix.ts
+var DEG = Math.PI / 180;
+function multiply(m1, m2) {
+  const [a1, b1, c1, d1, e1, f1] = m1;
+  const [a2, b2, c2, d2, e2, f2] = m2;
+  return [
+    a1 * a2 + c1 * b2,
+    b1 * a2 + d1 * b2,
+    a1 * c2 + c1 * d2,
+    b1 * c2 + d1 * d2,
+    a1 * e2 + c1 * f2 + e1,
+    b1 * e2 + d1 * f2 + f1
+  ];
+}
+var FN_RE = /([a-zA-Z]+)\s*\(([^)]*)\)/g;
+function numbers(raw) {
+  return raw.split(/[\s,]+/).filter((s) => s.length > 0).map(Number).filter((n) => Number.isFinite(n));
+}
+function svgTransformToMatrix(value) {
+  var _a;
+  let m;
+  FN_RE.lastIndex = 0;
+  let match;
+  while ((match = FN_RE.exec(value)) !== null) {
+    const fn = match[1].toLowerCase();
+    const n = numbers(match[2]);
+    let step;
+    switch (fn) {
+      case "translate":
+        step = [1, 0, 0, 1, n[0] || 0, n[1] || 0];
+        break;
+      case "scale": {
+        const sx = (_a = n[0]) != null ? _a : 1;
+        const sy = n.length > 1 ? n[1] : sx;
+        step = [sx, 0, 0, sy, 0, 0];
+        break;
+      }
+      case "rotate": {
+        const rad = (n[0] || 0) * DEG;
+        const cos = Math.cos(rad), sin = Math.sin(rad);
+        const rot = [cos, sin, -sin, cos, 0, 0];
+        if (n.length >= 3) {
+          const cx = n[1], cy = n[2];
+          step = multiply(multiply([1, 0, 0, 1, cx, cy], rot), [1, 0, 0, 1, -cx, -cy]);
+        } else {
+          step = rot;
+        }
+        break;
+      }
+      case "skewx":
+        step = [1, 0, Math.tan((n[0] || 0) * DEG), 1, 0, 0];
+        break;
+      case "skewy":
+        step = [1, Math.tan((n[0] || 0) * DEG), 0, 1, 0, 0];
+        break;
+      case "matrix":
+        if (n.length >= 6) step = [n[0], n[1], n[2], n[3], n[4], n[5]];
+        break;
+      default:
+        step = void 0;
+    }
+    if (step) m = m ? multiply(m, step) : step;
+  }
+  return m;
+}
+
+// src/PxRnPropNames.ts
 var ATTR_NAME_OVERRIDES = {
   "xlink:href": "href"
 };
@@ -72,7 +143,11 @@ function toRnPropName(attrName) {
   return kebabToCamelCaseWord(attrName);
 }
 var LENGTH_LIST_PROPS = /* @__PURE__ */ new Set(["strokeDasharray"]);
-function toRnPropValue(rnPropName, value) {
+function toRnPropValue(rnPropName, value, tag, native = false) {
+  if (native && rnPropName === "transform" && typeof value === "string" && tag !== "svg") {
+    const m = svgTransformToMatrix(value);
+    if (m) return m;
+  }
   if (LENGTH_LIST_PROPS.has(rnPropName)) {
     const parts = String(value).trim().replace(/,/g, " ").split(/\s+/).map(Number).filter((n) => Number.isFinite(n));
     return parts.length % 2 === 1 ? parts.concat(parts) : parts;
@@ -84,7 +159,7 @@ function toRnPropValue(rnPropName, value) {
 
 // src/PxRnTracks.ts
 function compileTracks(doc, opts) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const config = getAnimatorConfig(doc) || {};
   const duration = +(config.duration || DEFAULT_DURATION_MS);
   const _iterations = config.iterations;
@@ -92,11 +167,19 @@ function compileTracks(doc, opts) {
   if (typeof _iterations === "number") iterations = _iterations || 1;
   if (_iterations === "infinite") iterations = Infinity;
   if (iterations < 1) iterations = 1;
-  const sampleRate = (_a = opts == null ? void 0 : opts.sampleRate) != null ? _a : 60;
-  const maxSamples = (_b = opts == null ? void 0 : opts.maxSamples) != null ? _b : 600;
+  const native = (_a = opts == null ? void 0 : opts.native) != null ? _a : false;
+  const sampleRate = (_b = opts == null ? void 0 : opts.sampleRate) != null ? _b : 60;
+  const maxSamples = (_c = opts == null ? void 0 : opts.maxSamples) != null ? _c : 600;
   let sampleCount = Math.max(2, Math.round(duration / 1e3 * sampleRate) + 1);
   if (sampleCount > maxSamples) sampleCount = maxSamples;
   const stepMs = duration / (sampleCount - 1);
+  const tagById = /* @__PURE__ */ new Map();
+  const indexTags = (n) => {
+    var _a2;
+    if (n && typeof n.id === "string") tagById.set(n.id, String(n.type));
+    ((_a2 = n == null ? void 0 : n.children) != null ? _a2 : []).forEach(indexTags);
+  };
+  indexTags(doc);
   const bindings = getNormalisedBindings(doc, PxAnimatorEngine.frames) || [];
   const elements = [];
   for (const binding of bindings) {
@@ -112,9 +195,9 @@ function compileTracks(doc, opts) {
         let arr = props[rnProp];
         if (!arr) {
           arr = props[rnProp] = new Array(sampleCount);
-          for (let j = 0; j < i; j++) arr[j] = toRnPropValue(rnProp, value);
+          for (let j = 0; j < i; j++) arr[j] = toRnPropValue(rnProp, value, tagById.get(binding.id), native);
         }
-        arr[i] = toRnPropValue(rnProp, value);
+        arr[i] = toRnPropValue(rnProp, value, tagById.get(binding.id), native);
       }
     }
     for (const arr of Object.values(props)) {
@@ -131,20 +214,27 @@ function compileTracks(doc, opts) {
     iterations,
     direction: config.direction || "normal",
     delay: config.delay || 0,
-    fill: (_c = config.fill) != null ? _c : "forwards",
+    fill: (_d = config.fill) != null ? _d : "forwards",
+    resetOnFinish: !!config.resetOnFinish,
     stepMs,
     sampleCount,
     elements
   };
 }
-function sampleProps(tracks, tMs, stepMs, sampleCount) {
+function sampleProps(tracks, tMs, stepMs, sampleCount, native = false) {
   "worklet";
+  const out = {};
+  if (!tracks || !tracks.props || !(stepMs > 0)) return out;
   let idx = Math.round(tMs / stepMs);
   if (idx < 0) idx = 0;
   if (idx >= sampleCount) idx = sampleCount - 1;
-  const out = {};
   for (const key in tracks.props) {
-    out[key] = tracks.props[key][idx];
+    const values = tracks.props[key];
+    if (!values) continue;
+    const value = values[idx];
+    if (value === void 0) continue;
+    const name = native && key === "transform" ? "matrix" : key;
+    out[name] = value;
   }
   return out;
 }
@@ -152,6 +242,7 @@ function sampleProps(tracks, tMs, stepMs, sampleCount) {
 // src/PxRnRender.tsx
 import {
   getNormalizedProps,
+  resolveStyle,
   sanitiseAttributeValue,
   DISALLOWED_SVG_TAGS_LOWER,
   TEXT_ATTR,
@@ -165,6 +256,32 @@ import {
   ClipPath,
   Defs,
   Ellipse,
+  FeBlend,
+  FeColorMatrix,
+  FeComponentTransfer,
+  FeComposite,
+  FeConvolveMatrix,
+  FeDiffuseLighting,
+  FeDisplacementMap,
+  FeDistantLight,
+  FeDropShadow,
+  FeFlood,
+  FeFuncA,
+  FeFuncB,
+  FeFuncG,
+  FeFuncR,
+  FeGaussianBlur,
+  FeImage,
+  FeMerge,
+  FeMergeNode,
+  FeMorphology,
+  FeOffset,
+  FePointLight,
+  FeSpecularLighting,
+  FeSpotLight,
+  FeTile,
+  FeTurbulence,
+  Filter,
   G,
   Image,
   Line,
@@ -186,8 +303,13 @@ import {
   Use
 } from "react-native-svg";
 var RN_SVG_COMPONENTS = {
+  // Root & containers
   svg: Svg,
   g: G,
+  defs: Defs,
+  symbol: SvgSymbol,
+  use: Use,
+  // Shapes
   rect: Rect,
   circle: Circle,
   ellipse: Ellipse,
@@ -195,24 +317,53 @@ var RN_SVG_COMPONENTS = {
   path: Path,
   polygon: Polygon,
   polyline: Polyline,
+  image: Image,
+  // Text
   text: SvgText,
   tspan: TSpan,
   textPath: TextPath,
-  defs: Defs,
+  // Paint servers & clipping
   linearGradient: LinearGradient,
   radialGradient: RadialGradient,
   stop: Stop,
-  use: Use,
-  symbol: SvgSymbol,
+  pattern: Pattern,
   mask: Mask,
   clipPath: ClipPath,
-  pattern: Pattern,
   marker: Marker,
-  image: Image
+  // Filters — react-native-svg implements the full primitive set.
+  // NOTE: filter rendering requires the New Architecture (Fabric) and is
+  // newer than the rest of react-native-svg; treat visual parity with the
+  // web player as unverified until checked on a device.
+  filter: Filter,
+  feBlend: FeBlend,
+  feColorMatrix: FeColorMatrix,
+  feComponentTransfer: FeComponentTransfer,
+  feComposite: FeComposite,
+  feConvolveMatrix: FeConvolveMatrix,
+  feDiffuseLighting: FeDiffuseLighting,
+  feDisplacementMap: FeDisplacementMap,
+  feDistantLight: FeDistantLight,
+  feDropShadow: FeDropShadow,
+  feFlood: FeFlood,
+  feFuncA: FeFuncA,
+  feFuncB: FeFuncB,
+  feFuncG: FeFuncG,
+  feFuncR: FeFuncR,
+  feGaussianBlur: FeGaussianBlur,
+  feImage: FeImage,
+  feMerge: FeMerge,
+  feMergeNode: FeMergeNode,
+  feMorphology: FeMorphology,
+  feOffset: FeOffset,
+  fePointLight: FePointLight,
+  feSpecularLighting: FeSpecularLighting,
+  feSpotLight: FeSpotLight,
+  feTile: FeTile,
+  feTurbulence: FeTurbulence
 };
 
 // src/PxRnRender.tsx
-function toRnProps(props, warnings) {
+function toRnProps(props, warnings, tag) {
   const normalised = getNormalizedProps(props);
   const out = {};
   for (const key of Object.keys(normalised)) {
@@ -220,7 +371,7 @@ function toRnProps(props, warnings) {
     if (sanitised === void 0) continue;
     const rnKey = toRnPropName(key);
     if (!rnKey) continue;
-    out[rnKey] = toRnPropValue(rnKey, String(sanitised));
+    out[rnKey] = toRnPropValue(rnKey, String(sanitised), tag);
   }
   return out;
 }
@@ -229,42 +380,164 @@ function renderRnNode(node, opts = {}, key) {
   if (!node) return null;
   const _a = node, { type, children, style, animate, meta, effects } = _a, props = __objRest(_a, ["type", "children", "style", "animate", "meta", "effects"]);
   const tag = String(type || "g");
+  const feFuncType = props.funcType;
+  if (feFuncType !== void 0) delete props.funcType;
   if (DISALLOWED_SVG_TAGS_LOWER.has(tag.toLowerCase())) {
     (_b = opts.warnings) == null ? void 0 : _b.push("tag blocked (dangerous): " + tag);
     return null;
   }
-  const Component = RN_SVG_COMPONENTS[tag];
-  if (!Component) {
+  const Component2 = RN_SVG_COMPONENTS[tag];
+  if (!Component2) {
     (_c = opts.warnings) == null ? void 0 : _c.push("tag not supported in react-native-svg mapping: " + tag);
     return null;
   }
-  const rnProps = toRnProps(props, opts.warnings);
-  if (key !== void 0) rnProps.key = key;
+  const rnProps = toRnProps(props, opts.warnings, tag);
+  if (feFuncType !== void 0) rnProps.type = feFuncType;
+  const resolved = resolveStyle(style, opts.defs);
+  if (resolved) {
+    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 textContent = props[TEXT_ATTR] || props[TEXT_CONTENT_ATTR];
   let childElements = void 0;
   if (Array.isArray(children) && children.length > 0) {
-    childElements = children.map((ch, i) => renderRnNode(ch, opts, i)).filter(Boolean);
+    childElements = children.map((ch, i) => {
+      var _a2;
+      try {
+        return renderRnNode(ch, opts, i);
+      } catch (e) {
+        (_a2 = opts.warnings) == null ? void 0 : _a2.push("child failed to render: " + (e instanceof Error ? e.message : String(e)));
+        return null;
+      }
+    }).filter(Boolean);
   } else if (textContent !== void 0) {
     childElements = String(textContent);
   }
-  const decorated = (_d = opts.decorate) == null ? void 0 : _d.call(opts, node, Component, rnProps, childElements);
+  const decorated = (_d = opts.decorate) == null ? void 0 : _d.call(opts, node, Component2, rnProps, childElements, key);
   if (decorated !== void 0) return decorated;
-  return createElement(Component, rnProps, childElements);
+  return createElement(
+    Component2,
+    key !== void 0 ? __spreadProps(__spreadValues({}, rnProps), { key }) : rnProps,
+    childElements
+  );
+}
+
+// src/PxRnErrorBoundary.tsx
+import { Component } from "react";
+var PxRnErrorBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    var _a, _b, _c, _d;
+    (_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);
+  }
+  componentDidUpdate(prev) {
+    if (this.state.error && prev.children !== this.props.children) {
+      this.setState({ error: null });
+    }
+  }
+  render() {
+    const { error } = this.state;
+    if (error) return this.props.fallback ? this.props.fallback(error) : null;
+    return this.props.children;
+  }
+};
+
+// src/PxRnSafety.ts
+import { deepClone, generateUniqueId } from "@pixodesk/svg-animator-core";
+function isClosedPath(d) {
+  return typeof d === "string" && /[zZ]/.test(d);
+}
+function openPath(d) {
+  return d.replace(/[zZ]/g, "").trimEnd();
+}
+function localRef(value) {
+  if (typeof value !== "string") return void 0;
+  const trimmed = value.trim();
+  return trimmed.startsWith("#") ? trimmed.slice(1) : void 0;
+}
+function forEachNode(node, visit, parent) {
+  var _a;
+  if (!node) return;
+  visit(node, parent);
+  for (const child of (_a = node.children) != null ? _a : []) forEachNode(child, visit, node);
+}
+function openClosedTextPathTargets(doc, warnings) {
+  var _a;
+  let hasTextPath = false;
+  forEachNode(doc, (n) => {
+    if (String(n.type) === "textPath") hasTextPath = true;
+  });
+  if (!hasTextPath) return doc;
+  const result = deepClone(doc);
+  const byId = /* @__PURE__ */ new Map();
+  forEachNode(result, (n) => {
+    const id = n.id;
+    if (typeof id === "string") byId.set(id, n);
+  });
+  let defs = ((_a = result.children) != null ? _a : []).find((c) => String(c.type) === "defs");
+  const ensureDefs = () => {
+    var _a2;
+    if (!defs) {
+      defs = { type: "defs", children: [] };
+      ((_a2 = result.children) != null ? _a2 : result.children = []).unshift(defs);
+    }
+    return defs;
+  };
+  const openCopies = /* @__PURE__ */ new Map();
+  forEachNode(result, (node) => {
+    var _a2, _b;
+    if (String(node.type) !== "textPath") return;
+    const anyNode = node;
+    const attr = anyNode.href !== void 0 ? "href" : "xlink:href";
+    const targetId = localRef(anyNode[attr]);
+    if (!targetId) return;
+    const target = byId.get(targetId);
+    if (!target || !isClosedPath(target.d)) return;
+    let copyId = openCopies.get(targetId);
+    if (!copyId) {
+      const copy = deepClone(target);
+      copyId = "px_open_" + generateUniqueId();
+      copy.id = copyId;
+      copy.d = openPath(String(copy.d));
+      delete copy.animate;
+      delete copy.effects;
+      ((_b = (_a2 = ensureDefs()).children) != null ? _b : _a2.children = []).push(copy);
+      openCopies.set(targetId, copyId);
+      warnings == null ? void 0 : warnings.push(
+        "textPath follows a closed path (#" + targetId + "); using an open copy to avoid a react-native-svg native crash"
+      );
+    }
+    anyNode[attr] = "#" + copyId;
+  });
+  return result;
 }
 
 // src/PixodeskSvgAnimator.tsx
 import { jsx } from "react/jsx-runtime";
+var NATIVE_SVG_VIEWS = Platform.OS !== "web";
 var animatedComponentCache = /* @__PURE__ */ new Map();
-function getAnimatedComponent(Component) {
-  let cached = animatedComponentCache.get(Component);
+function getAnimatedComponent(Component2) {
+  let cached = animatedComponentCache.get(Component2);
   if (!cached) {
-    cached = Animated.createAnimatedComponent(Component);
-    animatedComponentCache.set(Component, cached);
+    cached = Animated.createAnimatedComponent(Component2);
+    animatedComponentCache.set(Component2, cached);
   }
   return cached;
 }
 function AnimatedPxElement({
-  Component,
+  Component: Component2,
   staticProps,
   children,
   tracks,
@@ -272,12 +545,83 @@ function AnimatedPxElement({
   stepMs,
   sampleCount
 }) {
-  const AnimatedComponent = useMemo(() => getAnimatedComponent(Component), [Component]);
+  const AnimatedComponent = useMemo(() => getAnimatedComponent(Component2), [Component2]);
   const animatedProps = useAnimatedProps(() => {
-    return sampleProps(tracks, progress.value, stepMs, sampleCount);
+    return sampleProps(tracks, progress.value, stepMs, sampleCount, NATIVE_SVG_VIEWS);
   }, [tracks, stepMs, sampleCount]);
   return /* @__PURE__ */ jsx(AnimatedComponent, __spreadProps(__spreadValues({}, staticProps), { animatedProps, children }));
 }
+var NON_HOST_TAGS = /* @__PURE__ */ new Set(["stop", "feMergeNode"]);
+var SAMPLED_DEF_TAGS = /* @__PURE__ */ new Set(["linearGradient", "radialGradient", ...NON_HOST_TAGS]);
+function needsJsSampling(node, trackById) {
+  var _a;
+  const id = node.id;
+  if (SAMPLED_DEF_TAGS.has(String(node.type)) && id && trackById.has(id)) return true;
+  return ((_a = node.children) != null ? _a : []).some((c) => needsJsSampling(c, trackById));
+}
+function SampledSubtree({
+  node,
+  trackById,
+  progress,
+  stepMs,
+  sampleCount,
+  renderOpts
+}) {
+  const [idx, setIdx] = useState(0);
+  useAnimatedReaction(
+    () => Math.floor(Math.round(progress.value / stepMs) / 2) * 2,
+    // half-rate
+    (next, prev) => {
+      if (next !== prev) runOnJS(setIdx)(next);
+    },
+    [stepMs]
+  );
+  const tMs = Math.min(Math.max(idx, 0), sampleCount - 1) * stepMs;
+  return renderRnNode(node, __spreadProps(__spreadValues({}, renderOpts), {
+    // Sampled values are baked in as PLAIN props — nothing reanimated-driven.
+    decorate: (n, Component2, staticProps, children, key) => {
+      const id = n.id;
+      const tracks = id ? trackById.get(id) : void 0;
+      if (!tracks) return void 0;
+      const sampled = sampleProps(tracks, tMs, stepMs, sampleCount);
+      return createElement2(Component2, __spreadProps(__spreadValues(__spreadValues({}, staticProps), sampled), { key }), children);
+    }
+  }));
+}
+var EMPTY_TRACKS = {
+  duration: 1,
+  iterations: 1,
+  direction: "normal",
+  delay: 0,
+  fill: "forwards",
+  resetOnFinish: false,
+  stepMs: 1,
+  sampleCount: 2,
+  elements: []
+};
+function compileDocument(doc, overrides) {
+  const { duration, delay, iterations, fill, direction, resetOnFinish } = overrides;
+  const warnings = validateNodeEffects(doc);
+  for (const w of warnings) console.warn("[PixodeskSvgAnimator] effects shape warning:", w);
+  let prepared = materialiseAllInTree(doc, PxAnimatorEngine2.webapi);
+  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,
   duration,
@@ -285,6 +629,8 @@ function PixodeskSvgAnimator({
   iterations,
   fill,
   direction,
+  resetOnFinish,
+  outAction: outActionProp,
   autoplay,
   play,
   pause,
@@ -295,49 +641,54 @@ function PixodeskSvgAnimator({
   onStop,
   onPause,
   onCancel,
-  onFinish
+  onFinish,
+  onError,
+  fallback
 }) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const compiled = useMemo(() => {
-    const warnings = validateNodeEffects(doc);
-    for (const w of warnings) console.warn("[PixodeskSvgAnimator] effects shape warning:", w);
-    let prepared = materialiseAllInTree(doc, PxAnimatorEngine2.webapi);
-    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
-      })
-    });
-    prepared = generateNewIds(prepared);
-    const tracks2 = compileTracks(prepared);
-    return { doc: prepared, tracks: tracks2 };
-  }, [doc, duration, delay, iterations, fill, direction]);
+    try {
+      return compileDocument(
+        doc,
+        { duration, delay, iterations, fill, direction, resetOnFinish }
+      );
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error(String(e));
+      console.warn("[PixodeskSvgAnimator] could not compile the document:", error.message);
+      return { doc: null, tracks: EMPTY_TRACKS, error };
+    }
+  }, [doc, duration, delay, iterations, fill, direction, resetOnFinish]);
   const tracks = compiled.tracks;
   const totalDuration = tracks.duration * (tracks.iterations === Infinity ? 1 : tracks.iterations);
   const progress = useSharedValue(0);
   const playingRef = useRef(false);
   const rateRef = useRef(1);
+  const reversePlayback = () => rateRef.current < 0;
+  const restingPosition = () => {
+    if (tracks.resetOnFinish) return 0;
+    if (tracks.fill === "none" || tracks.fill === "backwards") return 0;
+    return reversePlayback() ? 0 : tracks.duration;
+  };
   const notifyFinish = () => {
     playingRef.current = false;
-    if (tracks.fill === "none" || tracks.fill === "backwards") progress.value = 0;
+    progress.value = restingPosition();
     onFinish == null ? void 0 : onFinish();
     onStop == null ? void 0 : onStop();
   };
   const startFrom = (fromMs) => {
     const dur = tracks.duration;
     const rate = rateRef.current || 1;
-    const reversedStart = tracks.direction === "reverse" || tracks.direction === "alternate-reverse";
+    const backwards = rate < 0;
+    const speed = Math.abs(rate);
+    const directionReversed = tracks.direction === "reverse" || tracks.direction === "alternate-reverse";
+    const reversedStart = backwards ? !directionReversed : directionReversed;
     const alternates = tracks.direction === "alternate" || tracks.direction === "alternate-reverse";
     const from = Math.max(0, Math.min(fromMs, dur));
     const legTarget = reversedStart ? 0 : dur;
-    const legRemaining = Math.abs(legTarget - from) / rate;
+    const legRemaining = Math.abs(legTarget - from) / speed;
     const repeats = tracks.iterations === Infinity ? -1 : tracks.iterations;
     cancelAnimation(progress);
-    progress.value = reversedStart ? from === 0 ? dur : from : from;
+    progress.value = reversedStart ? from <= 0 ? dur : from : from >= dur ? 0 : from;
     const animation = repeats === 1 ? withTiming(legTarget, { duration: legRemaining, easing: Easing.linear }, (finished) => {
       "worklet";
       if (finished) runOnJS(notifyFinish)();
@@ -350,14 +701,13 @@ function PixodeskSvgAnimator({
         if (finished) runOnJS(notifyFinish)();
       }
     );
-    progress.value = tracks.delay > 0 && from === 0 ? withDelay(tracks.delay / rate, animation) : animation;
+    progress.value = tracks.delay > 0 && from === 0 ? withDelay(tracks.delay / speed, animation) : animation;
     playingRef.current = true;
   };
   const api = {
     isPlaying: () => playingRef.current,
     play: () => {
-      const from = playingRef.current ? progress.value : progress.value >= tracks.duration ? 0 : progress.value;
-      startFrom(from);
+      startFrom(progress.value);
       onPlay == null ? void 0 : onPlay();
     },
     pause: () => {
@@ -375,14 +725,14 @@ function PixodeskSvgAnimator({
     },
     finish: () => {
       cancelAnimation(progress);
-      progress.value = tracks.fill === "none" || tracks.fill === "backwards" ? 0 : tracks.duration;
       playingRef.current = false;
+      progress.value = restingPosition();
       onFinish == null ? void 0 : onFinish();
       onStop == null ? void 0 : onStop();
     },
     setPlaybackRate: (rate) => {
-      if (!isFinite(rate) || rate <= 0) {
-        console.warn("setPlaybackRate: only finite positive rates are supported in the RN player (reverse is on the feature-gap list)");
+      if (!isFinite(rate) || rate === 0) {
+        console.warn("setPlaybackRate: rate must be finite and non-zero");
         return;
       }
       rateRef.current = rate;
@@ -390,14 +740,19 @@ function PixodeskSvgAnimator({
     },
     getCurrentTime: () => progress.value,
     setCurrentTime: (t) => {
+      const wasPlaying = playingRef.current;
       cancelAnimation(progress);
       playingRef.current = false;
       const clamped = Math.max(0, Math.min(t, totalDuration));
-      progress.value = tracks.duration > 0 ? clamped % tracks.duration || (clamped === 0 ? 0 : tracks.duration) : 0;
+      const withinIteration = tracks.duration > 0 ? clamped % tracks.duration || (clamped === 0 ? 0 : tracks.duration) : 0;
+      progress.value = withinIteration;
+      if (wasPlaying) startFrom(withinIteration);
     }
   };
   useImperativeHandle(apiRef, () => api, [compiled]);
-  const startOn = (_c = (_b = (_a = getAnimatorConfig2(compiled.doc)) == null ? void 0 : _a.trigger) == null ? void 0 : _b.startOn) != null ? _c : "load";
+  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";
   useEffect(() => {
     if (time !== void 0 || timeMs !== void 0) {
       const seekMs = timeMs !== void 0 ? timeMs : (time != null ? time : 0) * totalDuration;
@@ -415,6 +770,38 @@ function PixodeskSvgAnimator({
       api.play();
     }
   }, [compiled, autoplay, play, pause, time, timeMs]);
+  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;
+    inViewRef.current = false;
+    const check = () => {
+      const node = scrollRef.current;
+      if (!node) return;
+      node.measureInWindow((_x, y, _w, h) => {
+        if (!h) return;
+        const screen = Dimensions.get("window").height;
+        const visible = Math.max(0, Math.min(y + h, screen) - Math.max(y, 0));
+        const ratio = visible / h;
+        const isIn = ratio > 0 && ratio >= threshold;
+        if (isIn === inViewRef.current) return;
+        inViewRef.current = isIn;
+        if (isIn) {
+          if (rateRef.current < 0) api.setPlaybackRate(Math.abs(rateRef.current));
+          api.play();
+        } else if (outAction === "reset") api.cancel();
+        else if (outAction === "reverse") {
+          api.setPlaybackRate(-Math.abs(rateRef.current || 1));
+          api.play();
+        } else if (outAction !== "continue") api.pause();
+      });
+    };
+    check();
+    const id = setInterval(check, 200);
+    return () => clearInterval(id);
+  }, [compiled, autoplay, startOn, outAction]);
   useEffect(() => {
     return () => {
       cancelAnimation(progress);
@@ -427,41 +814,98 @@ function PixodeskSvgAnimator({
     return map;
   }, [tracks]);
   const warningsRef = useRef([]);
+  const renderErrorRef = useRef(null);
   const root = useMemo(() => {
     warningsRef.current = [];
-    return renderRnNode(compiled.doc, {
+    renderErrorRef.current = null;
+    if (!compiled.doc) return null;
+    const renderOpts = {
       warnings: warningsRef.current,
-      decorate: (node, Component, staticProps, children) => {
-        const id = node.id;
-        const elTracks = id ? trackById.get(id) : void 0;
-        if (!elTracks) return void 0;
-        return /* @__PURE__ */ jsx(
-          AnimatedPxElement,
-          {
-            Component,
-            staticProps,
-            tracks: elTracks,
-            progress,
-            stepMs: tracks.stepMs,
-            sampleCount: tracks.sampleCount,
-            children
-          },
-          staticProps.key
-        );
-      }
-    });
+      defs: getDefs(compiled.doc)
+    };
+    try {
+      return renderRnNode(compiled.doc, __spreadProps(__spreadValues({}, renderOpts), {
+        decorate: (node, Component2, staticProps, children, key) => {
+          if (needsJsSampling(node, trackById)) {
+            return /* @__PURE__ */ jsx(
+              SampledSubtree,
+              {
+                node,
+                trackById,
+                progress,
+                stepMs: tracks.stepMs,
+                sampleCount: tracks.sampleCount,
+                renderOpts
+              },
+              key
+            );
+          }
+          const id = node.id;
+          const elTracks = id ? trackById.get(id) : void 0;
+          if (!elTracks) return void 0;
+          return /* @__PURE__ */ jsx(
+            AnimatedPxElement,
+            {
+              Component: Component2,
+              staticProps,
+              tracks: elTracks,
+              progress,
+              stepMs: tracks.stepMs,
+              sampleCount: tracks.sampleCount,
+              children
+            },
+            key
+          );
+        }
+      }));
+    } 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);
+      return null;
+    }
   }, [compiled, trackById]);
   useEffect(() => {
     for (const w of warningsRef.current) console.warn("[PixodeskSvgAnimator]", w);
   }, [root]);
-  return root;
+  const failure = (_d = compiled.error) != null ? _d : 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) {
+    content = /* @__PURE__ */ jsx(View, { ref: scrollRef, collapsable: false, children: root });
+  } else if (autoplay && startOn === "click" && root) {
+    content = /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress: () => {
+          if (playingRef.current) {
+            if (outAction === "reset") api.cancel();
+            else if (outAction === "reverse") {
+              api.setPlaybackRate(-Math.abs(rateRef.current || 1));
+              api.play();
+            } else if (outAction !== "continue") api.pause();
+          } else {
+            if (rateRef.current < 0) api.setPlaybackRate(Math.abs(rateRef.current));
+            api.play();
+          }
+        },
+        children: root
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(PxRnErrorBoundary, { onError, fallback, children: content });
 }
 var PixodeskSvgAnimator_default = PixodeskSvgAnimator;
 export {
   PixodeskSvgAnimator,
+  PxRnErrorBoundary,
   RN_SVG_COMPONENTS,
   compileTracks,
   PixodeskSvgAnimator_default as default,
+  openClosedTextPathTargets,
   renderRnNode,
   sampleProps,
   toRnPropName,