@pixodesk/svg-animator-react 1.0.8 → 1.0.15

package/dist/index.umd.js

@@ -1759,7 +1759,8 @@ var PixodeskAnimatorReact = (() => {
   // src/index.ts
   var index_exports = {};
   __export(index_exports, {
-    PixodeskSvgAnimator: () => PixodeskSvgAnimator_default
+    PixodeskSvgAnimator: () => PixodeskSvgAnimator_default,
+    PixodeskSvgCssAnimator: () => PixodeskSvgCssAnimator_default
   });
 
   // ../svg-animator-web/dist/index.js
@@ -1769,6 +1770,7 @@ var PixodeskAnimatorReact = (() => {
   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
   var __hasOwnProp2 = Object.prototype.hasOwnProperty;
   var __propIsEnum = Object.prototype.propertyIsEnumerable;
+  var __pow = Math.pow;
   var __defNormalProp = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues = (a, b) => {
     for (var prop in b || (b = {}))
@@ -1794,6 +1796,1258 @@ var PixodeskAnimatorReact = (() => {
       }
     return target;
   };
+  function partsRecord(part, value, origin) {
+    const rec = {};
+    if (part === "translate") rec.translate = value;
+    else if (part === "rotate") rec.rotate = value;
+    else rec.scale = value;
+    if (origin && part !== "translate") rec.origin = origin;
+    return rec;
+  }
+  function readAnimatable(raw) {
+    if (raw === void 0) return { kind: "absent" };
+    if (Array.isArray(raw)) return { kind: "static", value: raw };
+    if (typeof raw === "object") {
+      const obj = raw;
+      if (obj.keyframes) {
+        return { kind: "animated", keyframes: obj.keyframes, autoOrient: obj.autoOrient };
+      }
+      if (obj.value !== void 0) return { kind: "static", value: obj.value };
+    }
+    return { kind: "static", value: raw };
+  }
+  function readStaticOrigin(raw, ctx) {
+    var _a;
+    const o = readAnimatable(raw);
+    if (o.kind === "absent") return void 0;
+    if (o.kind === "static") return o.value;
+    ctx.warnings.push("transformation.origin: animated origin approximated by its first keyframe");
+    return (_a = o.keyframes[0]) == null ? void 0 : _a.value;
+  }
+  function keyframeWith(kf, value) {
+    const out = { value };
+    if (kf.time !== void 0) out.time = kf.time;
+    if (kf.easing !== void 0) out.easing = kf.easing;
+    if (kf.tangentOut !== void 0) out.tangentOut = kf.tangentOut;
+    if (kf.tangentIn !== void 0) out.tangentIn = kf.tangentIn;
+    return out;
+  }
+  function applyTransformationEffect(node, fx, ctx) {
+    if (!fx) return node;
+    delete node.transform;
+    let n = node;
+    n = wrapTransformPart(n, "skew", fx.skew, ctx);
+    n = wrapOrigin(
+      n,
+      fx.origin,
+      /*invert=*/
+      true
+    );
+    n = wrapTransformPart(n, "scale", normalizeScale(fx.scale), ctx);
+    n = wrapTransformPart(n, "rotate", fx.rotate, ctx);
+    n = wrapOrigin(
+      n,
+      fx.origin,
+      /*invert=*/
+      false
+    );
+    if (translateHasAutoOrient(fx.translate)) {
+      n = wrapOrigin(
+        n,
+        fx.origin,
+        /*invert=*/
+        true
+      );
+      n = wrapTransformPart(n, "translate", fx.translate, ctx);
+      n = wrapOrigin(
+        n,
+        fx.origin,
+        /*invert=*/
+        false
+      );
+    } else {
+      n = wrapTransformPart(n, "translate", fx.translate, ctx);
+    }
+    return n;
+  }
+  function translateHasAutoOrient(translate) {
+    if (!translate || typeof translate !== "object") return false;
+    const obj = translate;
+    if (obj.autoOrient) return true;
+    return Array.isArray(obj.keyframes) && obj.keyframes.some((kf) => kf.tangentOut || kf.tangentIn);
+  }
+  function normalizeScale(raw) {
+    if (raw === void 0) return void 0;
+    if (Array.isArray(raw)) return [raw[0] / 100, raw[1] / 100];
+    return raw;
+  }
+  function wrapTransformPart(inner, part, raw, ctx) {
+    if (raw === void 0) return inner;
+    if (part === "skew") {
+      const skew = readAnimatable(raw);
+      if (skew.kind !== "static") {
+        ctx.warnings.push("transformation.skew: only static skew is supported");
+        return inner;
+      }
+      return { type: "g", transform: "skewX(" + skew.value[0] + ")skewY(" + skew.value[1] + ")", children: [inner] };
+    }
+    const v = readAnimatable(raw);
+    if (v.kind === "static") {
+      return { type: "g", transform: { value: partsRecord(part, v.value, void 0) }, children: [inner] };
+    }
+    if (v.kind === "animated") {
+      const animTr = { keyframes: v.keyframes.map((kf) => keyframeWith(kf, partsRecord(part, kf.value, void 0))) };
+      if (v.autoOrient) animTr.autoOrient = true;
+      return {
+        type: "g",
+        animate: { transform: animTr },
+        children: [inner]
+      };
+    }
+    return inner;
+  }
+  function wrapOrigin(inner, raw, invert) {
+    if (raw === void 0) return inner;
+    const v = readAnimatable(raw);
+    const sign = (value) => invert ? [-value[0], -value[1]] : value;
+    if (v.kind === "absent") return inner;
+    if (v.kind === "static") {
+      if (v.value[0] === 0 && v.value[1] === 0) return inner;
+      return { type: "g", transform: { value: { translate: sign(v.value) } }, children: [inner] };
+    }
+    if (v.kind === "animated") {
+      return {
+        type: "g",
+        animate: { transform: { keyframes: v.keyframes.map((kf) => keyframeWith(kf, { translate: sign(kf.value) })) } },
+        children: [inner]
+      };
+    }
+    return inner;
+  }
+  function identifyContentRefTargets(node, ctx, allocator) {
+    var _a, _b, _c;
+    if (node.type === "use" && ((_b = (_a = node.effects) == null ? void 0 : _a.ref) == null ? void 0 : _b.type) === "content") {
+      const baseId = node.effects.ref.baseId;
+      if (typeof baseId === "string" && baseId && !ctx.contentRefInnerIds.has(baseId)) {
+        ctx.contentRefInnerIds.set(baseId, allocator(baseId));
+      }
+    }
+    (_c = node.children) == null ? void 0 : _c.forEach((c) => identifyContentRefTargets(c, ctx, allocator));
+  }
+  function splitForContentRef(node, transformation, originalId, innerId, ctx) {
+    const outerBody = liftBodyTranslate(node, transformation);
+    if (typeof node.id === "string") delete node.id;
+    const { outer: outerTr, inner: innerTr } = splitTransformationEffect(transformation);
+    let innerNode = node;
+    innerNode = applyTransformationEffect(innerNode, innerTr, ctx);
+    const innerWrapper = { type: "g", id: innerId, children: [innerNode] };
+    let outerWrapper = { type: "g", id: originalId, children: [innerWrapper] };
+    if (outerBody.transform !== void 0) outerWrapper.transform = outerBody.transform;
+    if (outerBody.animate !== void 0) outerWrapper.animate = outerBody.animate;
+    if (outerTr) {
+      delete outerWrapper.id;
+      outerWrapper = applyTransformationEffect(outerWrapper, outerTr, ctx);
+      outerWrapper.id = originalId;
+    }
+    return outerWrapper;
+  }
+  function liftBodyTranslate(node, transformation) {
+    var _a;
+    const out = {};
+    let didLiftAnimate = false;
+    const animTr = (_a = node.animate) == null ? void 0 : _a.transform;
+    if (animTr && typeof animTr === "object" && Array.isArray(animTr.keyframes)) {
+      const kfs = animTr.keyframes;
+      const hasTranslate = kfs.some((kf) => kf.value && kf.value.translate);
+      if (hasTranslate) {
+        const outerHasOrigin = needsOriginOnOuter(animTr);
+        const outerKfs = kfs.map((kf) => {
+          const v = kf.value || {};
+          const newValue = {};
+          if (v.translate !== void 0) newValue.translate = v.translate;
+          if (outerHasOrigin && v.origin !== void 0) newValue.origin = v.origin;
+          const outerKf = { value: newValue };
+          if (kf.time !== void 0) outerKf.time = kf.time;
+          if (kf.easing !== void 0) outerKf.easing = kf.easing;
+          if (kf.tangentOut !== void 0) outerKf.tangentOut = kf.tangentOut;
+          if (kf.tangentIn !== void 0) outerKf.tangentIn = kf.tangentIn;
+          return outerKf;
+        });
+        const outerAnimTr = { keyframes: outerKfs };
+        if (animTr.autoOrient) outerAnimTr.autoOrient = true;
+        out.animate = { transform: outerAnimTr };
+        const innerHasPivotedPart = kfs.some((kf) => {
+          const v = kf.value || {};
+          return v.rotate !== void 0 || v.scale !== void 0;
+        });
+        const innerKfs = kfs.map((kf) => {
+          const v = kf.value || {};
+          const newValue = {};
+          if (v.rotate !== void 0) newValue.rotate = v.rotate;
+          if (v.scale !== void 0) newValue.scale = v.scale;
+          if (v.origin !== void 0 && (!outerHasOrigin || innerHasPivotedPart)) newValue.origin = v.origin;
+          const innerKf = { value: newValue };
+          if (kf.time !== void 0) innerKf.time = kf.time;
+          if (kf.easing !== void 0) innerKf.easing = kf.easing;
+          return innerKf;
+        });
+        const allInnerEmpty = innerKfs.every((kf) => Object.keys(kf.value).length === 0);
+        if (allInnerEmpty) {
+          delete node.animate.transform;
+          if (node.animate && Object.keys(node.animate).length === 0) delete node.animate;
+        } else {
+          node.animate.transform = { keyframes: innerKfs };
+        }
+        didLiftAnimate = true;
+      }
+    }
+    const transformationHasTranslate = (transformation == null ? void 0 : transformation.translate) !== void 0;
+    const stripBodyTranslateOnly = didLiftAnimate || transformationHasTranslate;
+    if (typeof node.transform === "string") {
+      const split = splitTransformString(node.transform);
+      if (stripBodyTranslateOnly) {
+        if (split.translate !== void 0) {
+          if (split.rest) node.transform = split.rest;
+          else delete node.transform;
+        } else if (isPureTranslateBody(node.transform)) {
+          delete node.transform;
+        }
+      } else if (split.translate) {
+        out.transform = split.translate;
+        if (split.rest) node.transform = split.rest;
+        else delete node.transform;
+      }
+    }
+    return out;
+  }
+  function isPureTranslateBody(s) {
+    const re = /(translate|rotate|scale|matrix|skewX|skewY)\(([^)]*)\)/g;
+    const ops = [];
+    let m;
+    while (m = re.exec(s)) ops.push({ name: m[1], full: m[0] });
+    if (ops.length !== 1) return false;
+    if (ops[0].name === "translate") return true;
+    if (ops[0].name !== "matrix") return false;
+    const args = /matrix\(([^)]*)\)/.exec(ops[0].full);
+    if (!args) return false;
+    const nums = args[1].split(/[\s,]+/).filter(Boolean).map(Number);
+    return nums.length >= 4 && nums[0] === 1 && nums[1] === 0 && nums[2] === 0 && nums[3] === 1;
+  }
+  function splitTransformString(s) {
+    const ops = [];
+    const re = /(translate|rotate|scale|matrix|skewX|skewY)\(([^)]*)\)/g;
+    let m;
+    while (m = re.exec(s)) ops.push({ name: m[1], full: m[0] });
+    if (!ops.length) return { rest: s || void 0 };
+    if (ops.every((o) => o.name === "translate")) {
+      return { translate: ops.map((o) => o.full).join("") };
+    }
+    const leading = ops[0];
+    const trailing = ops[ops.length - 1];
+    if (trailing.name === "translate" && leading.name === "translate") {
+      const trailingVec = parseTranslateArgs(trailing.full);
+      const leadingVec = parseTranslateArgs(leading.full);
+      const ox = -trailingVec[0];
+      const oy = -trailingVec[1];
+      const userTx = leadingVec[0] - ox;
+      const userTy = leadingVec[1] - oy;
+      if (userTx === 0 && userTy === 0) return { rest: s };
+      const middleAndTrailing = "translate(" + ox + "," + oy + ")" + ops.slice(1).map((o) => o.full).join("");
+      return { translate: "translate(" + userTx + "," + userTy + ")", rest: middleAndTrailing };
+    }
+    if (trailing.name === "translate") return { rest: s };
+    const lifted = [];
+    let i = 0;
+    while (i < ops.length && ops[i].name === "translate") {
+      lifted.push(ops[i].full);
+      i++;
+    }
+    if (!lifted.length) return { rest: s };
+    const rest = ops.slice(i).map((o) => o.full).join("");
+    return {
+      translate: lifted.join(""),
+      rest: rest || void 0
+    };
+  }
+  function parseTranslateArgs(translateOp) {
+    const m = /translate\(([^)]*)\)/.exec(translateOp);
+    if (!m) return [0, 0];
+    const nums = m[1].split(/[\s,]+/).filter(Boolean).map(Number);
+    return [nums[0] || 0, nums[1] || 0];
+  }
+  function splitTransformationEffect(fx) {
+    if (!fx) return {};
+    const originOnOuter = needsOriginOnOuter(fx.translate);
+    const innerHasPivotedPart = fx.rotate !== void 0 || fx.scale !== void 0;
+    const outer = {};
+    const inner = {};
+    if (fx.translate !== void 0) outer.translate = fx.translate;
+    if (originOnOuter && fx.origin !== void 0) outer.origin = fx.origin;
+    if (fx.rotate !== void 0) inner.rotate = fx.rotate;
+    if (fx.scale !== void 0) inner.scale = fx.scale;
+    if (fx.skew !== void 0) inner.skew = fx.skew;
+    if (fx.origin !== void 0 && (!originOnOuter || innerHasPivotedPart)) inner.origin = fx.origin;
+    return {
+      outer: Object.keys(outer).length ? outer : void 0,
+      inner: Object.keys(inner).length ? inner : void 0
+    };
+  }
+  function needsOriginOnOuter(translateAnim) {
+    if (!translateAnim || typeof translateAnim !== "object") return false;
+    const obj = translateAnim;
+    if (obj.autoOrient) return true;
+    if (Array.isArray(obj.keyframes)) {
+      return obj.keyframes.some((kf) => kf.tangentOut || kf.tangentIn);
+    }
+    return false;
+  }
+  function genId(ctx, prefix) {
+    return "_lw_" + prefix + "_" + ctx.nextId++;
+  }
+  function indexById(node, map) {
+    var _a;
+    if (typeof node.id === "string") map.set(node.id, node);
+    (_a = node.children) == null ? void 0 : _a.forEach((child) => indexById(child, map));
+  }
+  function spliceDefs(root, defs) {
+    if (!defs.length) return;
+    const existing = root.children || (root.children = []);
+    existing.unshift({ type: "defs", children: defs });
+  }
+  function clone(value) {
+    if (value === null || typeof value !== "object") return value;
+    if (Array.isArray(value)) return value.map(clone);
+    const out = {};
+    for (const k of Object.keys(value)) out[k] = clone(value[k]);
+    return out;
+  }
+  function regenerateIdsInClone(root, ctx) {
+    const oldToNew = /* @__PURE__ */ new Map();
+    const walkAssign = (n) => {
+      var _a;
+      if (typeof n.id === "string") {
+        const newId = genId(ctx, "retimed");
+        oldToNew.set(n.id, newId);
+        n.id = newId;
+      }
+      (_a = n.children) == null ? void 0 : _a.forEach(walkAssign);
+    };
+    walkAssign(root);
+    const rewriteUrl = (s) => s.replace(/url\(#([^)]+)\)/g, (m, oldId) => {
+      const newId = oldToNew.get(oldId);
+      return newId ? "url(#" + newId + ")" : m;
+    });
+    const walkRewrite = (n) => {
+      var _a;
+      if (typeof n.href === "string" && n.href.startsWith("#")) {
+        const newId = oldToNew.get(n.href.slice(1));
+        if (newId) n.href = "#" + newId;
+      }
+      for (const k of Object.keys(n)) {
+        if (k === "children" || k === "effects" || k === "meta" || k === "href" || k === "id") continue;
+        const v = n[k];
+        if (typeof v === "string" && v.indexOf("url(#") !== -1) n[k] = rewriteUrl(v);
+      }
+      (_a = n.children) == null ? void 0 : _a.forEach(walkRewrite);
+    };
+    walkRewrite(root);
+    return oldToNew;
+  }
+  function applyMaskedByEffect(node, fx, transformation, ctx) {
+    if (!fx) return node;
+    if (!fx.href) {
+      ctx.errors.push("maskedBy.href missing \u2014 cannot build mask");
+      return node;
+    }
+    const maskId = genId(ctx, "mask");
+    let content = { type: "use", href: "#" + fx.href };
+    content = wrapInverseTransform(content, transformation, ctx);
+    const mask = { type: "mask", id: maskId, children: [content] };
+    if (fx.maskType) mask.maskType = fx.maskType;
+    if (fx.maskUnits) mask.maskUnits = fx.maskUnits;
+    if (fx.maskContentUnits) mask.maskContentUnits = fx.maskContentUnits;
+    ctx.defs.push(mask);
+    node.mask = "url(#" + maskId + ")";
+    return node;
+  }
+  function wrapInverseTransform(inner, fx, ctx) {
+    if (!fx) return inner;
+    const origin = readStaticOrigin(fx.origin, ctx);
+    let n = inner;
+    n = wrapInversePart(n, "translate", fx.translate, void 0, ctx);
+    n = wrapInversePart(n, "rotate", fx.rotate, origin, ctx);
+    n = wrapInversePart(n, "scale", fx.scale, origin, ctx);
+    return n;
+  }
+  function wrapInversePart(inner, part, raw, origin, ctx) {
+    if (raw === void 0) return inner;
+    const v = readAnimatable(raw);
+    if (v.kind === "static") {
+      return { type: "g", transform: { value: partsRecord(part, invertPartValue(part, v.value), origin) }, children: [inner] };
+    }
+    if (v.kind === "animated") {
+      return {
+        type: "g",
+        animate: { transform: { keyframes: v.keyframes.map((kf) => keyframeWith(kf, partsRecord(part, invertPartValue(part, kf.value), origin))) } },
+        children: [inner]
+      };
+    }
+    return inner;
+  }
+  function invertPartValue(part, value) {
+    if (part === "translate") return [-value[0], -value[1]];
+    if (part === "rotate") return -value;
+    return [1 / value[0], 1 / value[1]];
+  }
+  var CONTENT_SUBREF = "content";
+  function applyRefAndTransformationEffect(node, ref, transformation, ctx) {
+    if (ref) {
+      const baseId = ref.baseId;
+      if (!baseId) {
+        ctx.errors.push("ref: missing baseId");
+      } else {
+        const targetId = ref.type === CONTENT_SUBREF ? ctx.contentRefInnerIds.get(baseId) || baseId : baseId;
+        node.href = "#" + targetId;
+      }
+    }
+    return applyTransformationEffect(node, transformation, ctx);
+  }
+  function applyRepeaterEffect(node, fx, ctx) {
+    var _a, _b;
+    if (!fx) return node;
+    const copies = (_a = fx.copies) != null ? _a : 1;
+    if (copies < 1) {
+      ctx.errors.push("repeater.copies invalid: " + fx.copies);
+      return node;
+    }
+    const sharedTransform = node.transform;
+    const sharedAnimTransform = (_b = node.animate) == null ? void 0 : _b.transform;
+    const base = clone(node);
+    delete base.transform;
+    if (base.animate) {
+      delete base.animate.transform;
+      if (Object.keys(base.animate).length === 0) delete base.animate;
+    }
+    const children = [base];
+    for (let i = 1; i < copies; i++) {
+      const copy = clone(base);
+      copy.transform = { value: perCopyParts(fx, i) };
+      children.push(copy);
+    }
+    const wrapper = { type: "g", children };
+    if (sharedTransform !== void 0) wrapper.transform = sharedTransform;
+    if (sharedAnimTransform !== void 0) wrapper.animate = { transform: sharedAnimTransform };
+    return wrapper;
+  }
+  function perCopyParts(fx, i) {
+    const parts = {};
+    if (fx.translate) parts.translate = [fx.translate[0] * i, fx.translate[1] * i];
+    if (fx.rotate !== void 0) parts.rotate = fx.rotate * i;
+    if (fx.scale) parts.scale = [__pow(fx.scale[0] / 100, i), __pow(fx.scale[1] / 100, i)];
+    if (fx.origin) parts.origin = [fx.origin[0] * i, fx.origin[1] * i];
+    return parts;
+  }
+  var RETIME_AS_SYMBOL = true;
+  function applyRetimeEffect(node, retime, ctx) {
+    var _a, _b, _c, _d;
+    if (!retime) return node;
+    const baseId = retime.baseId;
+    if (!baseId) {
+      ctx.errors.push("retime: missing baseId");
+      return node;
+    }
+    const target = ctx.idMap.get(baseId);
+    if (!target) {
+      ctx.warnings.push('retime: target "' + baseId + '" not found');
+      return node;
+    }
+    const start = (_a = retime.start) != null ? _a : 0;
+    const stretch = (_b = retime.stretch) != null ? _b : 1;
+    if (RETIME_AS_SYMBOL) {
+      const symbolClone = clone(target);
+      regenerateIdsInClone(symbolClone, ctx);
+      const cloneId = genId(ctx, "retime");
+      symbolClone.id = cloneId;
+      remapKeyframeTimes(symbolClone, start, stretch);
+      ctx.defs.push(symbolClone);
+      node.href = "#" + cloneId;
+      return node;
+    }
+    const sourceNodes = target.type === "symbol" ? target.children || [] : [target];
+    const content = sourceNodes.map((child) => {
+      const c = clone(child);
+      regenerateIdsInClone(c, ctx);
+      remapKeyframeTimes(c, start, stretch);
+      return c;
+    });
+    const g = __spreadProps(__spreadValues({}, node), { type: "g", children: content });
+    delete g.href;
+    const x = Number((_c = node.x) != null ? _c : 0), y = Number((_d = node.y) != null ? _d : 0);
+    if (x || y) {
+      const offset = "translate(" + x + "," + y + ")";
+      g.transform = typeof g.transform === "string" ? offset + g.transform : offset;
+      delete g.x;
+      delete g.y;
+    }
+    return g;
+  }
+  function remapKeyframeTimes(node, start, stretch) {
+    var _a;
+    const remap2 = (kfs) => {
+      for (const kf of kfs) if (typeof kf.time === "number") kf.time = start + kf.time * stretch;
+    };
+    if (node.transform && typeof node.transform === "object" && Array.isArray(node.transform.keyframes)) {
+      remap2(node.transform.keyframes);
+    }
+    if (node.animate && typeof node.animate === "object") {
+      for (const prop of Object.keys(node.animate)) {
+        const anim = node.animate[prop];
+        if (anim && Array.isArray(anim.keyframes)) remap2(anim.keyframes);
+      }
+    }
+    (_a = node.children) == null ? void 0 : _a.forEach((child) => remapKeyframeTimes(child, start, stretch));
+  }
+  function applyTrimPathEffect(node, trimPath, isCombinedShape) {
+    var _a;
+    if (!trimPath && !isCombinedShape) return node;
+    const d = (_a = node.d) != null ? _a : rectToPathD(node);
+    if (d === void 0) return node;
+    const g = __spreadProps(__spreadValues({}, node), { type: "g" });
+    delete g.d;
+    const meta = g.meta = __spreadValues({}, g.meta || {});
+    const effects = meta.effects = __spreadValues({}, meta.effects || {});
+    if (trimPath) effects.trimPath = trimPath;
+    effects.isCombinedShape = true;
+    g.children = [{ type: "path", d }];
+    return g;
+  }
+  function rectToPathD(node) {
+    var _a, _b, _c, _d;
+    if (node.type !== "rect") return void 0;
+    const x = Number((_a = node.x) != null ? _a : 0), y = Number((_b = node.y) != null ? _b : 0);
+    const w = Number((_c = node.width) != null ? _c : 0), h = Number((_d = node.height) != null ? _d : 0);
+    return "M" + (x + w) + "," + y + "L" + (x + w) + "," + (y + h) + "L" + x + "," + (y + h) + "L" + x + "," + y + "L" + (x + w) + "," + y + "z";
+  }
+  function applyPlayerEffects(root) {
+    const ctx = {
+      defs: [],
+      warnings: [],
+      errors: [],
+      idMap: /* @__PURE__ */ new Map(),
+      nextId: 0,
+      contentRefInnerIds: /* @__PURE__ */ new Map()
+    };
+    const working = clone(root);
+    indexById(working, ctx.idMap);
+    identifyContentRefTargets(working, ctx, () => genId(ctx, "inner"));
+    const afterPass1 = applyPlayerEffects_exceptRetime(working, ctx);
+    const out = applyPlayerEffects_retime(afterPass1, ctx);
+    spliceDefs(out, ctx.defs);
+    return { root: out, defs: ctx.defs, warnings: ctx.warnings, errors: ctx.errors };
+  }
+  function applyPlayerEffects_exceptRetime(node, ctx) {
+    if (node.children) node.children = node.children.map((child) => applyPlayerEffects_exceptRetime(child, ctx));
+    const fx = node.effects;
+    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, retime, ref } = fx != null ? fx : {};
+    const isCombinedShape = fx == null ? void 0 : fx.isCombinedShape;
+    if (fx) delete node.effects;
+    let n = node;
+    n = applyTrimPathEffect(n, trimPath, isCombinedShape);
+    n = applyRepeaterEffect(n, repeater, ctx);
+    n = applyMaskedByEffect(n, maskedBy, transformation, ctx);
+    if (innerIdForContentRef) {
+      n = splitForContentRef(n, transformation, originalId, innerIdForContentRef, ctx);
+    } else {
+      n = applyRefAndTransformationEffect(n, ref, transformation, ctx);
+    }
+    if (retime) node.effects = { retime };
+    if (originalId) ctx.idMap.set(originalId, n);
+    return n;
+  }
+  function applyPlayerEffects_retime(node, ctx) {
+    var _a;
+    if (node.children) node.children = node.children.map((child) => applyPlayerEffects_retime(child, ctx));
+    const retime = (_a = node.effects) == null ? void 0 : _a.retime;
+    if (!retime) return node;
+    delete node.effects;
+    return applyRetimeEffect(node, retime, ctx);
+  }
+  function pathStr(path) {
+    if (!path.length) return ".";
+    let result = "";
+    for (const seg of path) {
+      if (seg.startsWith("[")) result += seg;
+      else result += (result ? "." : "") + seg;
+    }
+    return result;
+  }
+  var Base = class {
+    _canSanitize(raw) {
+      return this.isValid(raw);
+    }
+    optional() {
+      return new Optional(this);
+    }
+  };
+  var Optional = class extends Base {
+    constructor(inner) {
+      super();
+      this.inner = inner;
+      this._default = void 0;
+    }
+    sanitize(raw) {
+      if (raw === void 0 || raw === null) return void 0;
+      return this.inner._canSanitize(raw) ? this.inner.sanitize(raw) : void 0;
+    }
+    isValid(raw, ctx, path) {
+      if (raw === void 0 || raw === null) return true;
+      return this.inner.isValid(raw, ctx, path);
+    }
+    _canSanitize(raw) {
+      return raw === void 0 || raw === null || this.inner._canSanitize(raw);
+    }
+  };
+  var Str = class extends Base {
+    constructor(_default = "") {
+      super();
+      this._default = _default;
+    }
+    sanitize(raw) {
+      return typeof raw === "string" ? raw : this._default;
+    }
+    isValid(raw, ctx, path) {
+      if (typeof raw === "string") return true;
+      ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected string, got " + typeof raw);
+      return false;
+    }
+  };
+  var Num = class extends Base {
+    constructor(_default = 0) {
+      super();
+      this._default = _default;
+    }
+    sanitize(raw) {
+      return typeof raw === "number" && isFinite(raw) ? raw : this._default;
+    }
+    isValid(raw, ctx, path) {
+      if (typeof raw === "number" && isFinite(raw)) return true;
+      ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected finite number, got " + JSON.stringify(raw));
+      return false;
+    }
+  };
+  var Bool = class extends Base {
+    constructor(_default = false) {
+      super();
+      this._default = _default;
+    }
+    sanitize(raw) {
+      return typeof raw === "boolean" ? raw : this._default;
+    }
+    isValid(raw, ctx, path) {
+      if (typeof raw === "boolean") return true;
+      ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected boolean, got " + typeof raw);
+      return false;
+    }
+  };
+  var Literal = class extends Base {
+    constructor(value) {
+      super();
+      this.value = value;
+      this._default = value;
+    }
+    sanitize(raw) {
+      return raw === this.value ? this.value : this._default;
+    }
+    isValid(raw, ctx, path) {
+      if (raw === this.value) return true;
+      ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected " + JSON.stringify(this.value) + ", got " + JSON.stringify(raw));
+      return false;
+    }
+  };
+  var Enum = class extends Base {
+    constructor(values, defaultVal) {
+      super();
+      this.values = values;
+      this._default = defaultVal != null ? defaultVal : values[0];
+    }
+    sanitize(raw) {
+      return this.values.includes(raw) ? raw : this._default;
+    }
+    isValid(raw, ctx, path) {
+      if (this.values.includes(raw)) return true;
+      ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected one of " + this.values.map((v) => JSON.stringify(v)).join(" | ") + ", got " + JSON.stringify(raw));
+      return false;
+    }
+  };
+  var Union = class extends Base {
+    constructor(schemas, defaultVal) {
+      super();
+      this.schemas = schemas;
+      this._default = defaultVal != null ? defaultVal : schemas[0]._default;
+    }
+    sanitize(raw) {
+      for (const s of this.schemas) {
+        if (s.isValid(raw)) return s.sanitize(raw);
+      }
+      return this._default;
+    }
+    isValid(raw, ctx, path) {
+      var _a;
+      if (this.schemas.some((s) => s.isValid(raw))) return true;
+      ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": no union member matched for value " + ((_a = JSON.stringify(raw)) != null ? _a : "").slice(0, 60));
+      return false;
+    }
+    _canSanitize(raw) {
+      return this.schemas.some((s) => s._canSanitize(raw));
+    }
+  };
+  var DiscriminatedUnion = class extends Base {
+    constructor(_key, _schemas, defaultVal) {
+      super();
+      this._key = _key;
+      this._schemas = _schemas;
+      this._default = defaultVal != null ? defaultVal : _schemas[0]._default;
+      this._map = /* @__PURE__ */ new Map();
+      for (const s of _schemas) {
+        const keySchema = s._shape[_key];
+        if (keySchema) this._map.set(keySchema._default, s);
+      }
+    }
+    _findSchema(raw) {
+      if (raw === null || typeof raw !== "object" || Array.isArray(raw)) return void 0;
+      const val = raw[this._key];
+      if (val === void 0 || val === null) return void 0;
+      return this._map.get(val);
+    }
+    sanitize(raw) {
+      var _a;
+      return ((_a = this._findSchema(raw)) != null ? _a : this._schemas[0]).sanitize(raw);
+    }
+    isValid(raw, ctx, path) {
+      const schema = this._findSchema(raw);
+      if (!schema) {
+        const val = raw !== null && typeof raw === "object" && !Array.isArray(raw) ? raw[this._key] : void 0;
+        ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": no discriminated union member matched " + this._key + "=" + JSON.stringify(val));
+        return false;
+      }
+      return schema.isValid(raw, ctx, path);
+    }
+    _canSanitize(raw) {
+      if (raw === null || typeof raw !== "object" || Array.isArray(raw)) return false;
+      const schema = this._findSchema(raw);
+      return schema ? schema._canSanitize(raw) : this._schemas[0]._canSanitize(raw);
+    }
+  };
+  var Obj = class extends Base {
+    constructor(_shape) {
+      super();
+      this._shape = _shape;
+      const d = {};
+      for (const key of Object.keys(_shape)) d[key] = _shape[key]._default;
+      this._default = d;
+    }
+    sanitize(raw) {
+      const src = raw && typeof raw === "object" && !Array.isArray(raw) ? raw : {};
+      const out = {};
+      for (const key of Object.keys(this._shape)) {
+        out[key] = this._shape[key].sanitize(src[key]);
+      }
+      return out;
+    }
+    isValid(raw, ctx, path) {
+      if (!raw || typeof raw !== "object" || Array.isArray(raw)) {
+        ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected object, got " + (Array.isArray(raw) ? "array" : typeof raw));
+        return false;
+      }
+      const obj = raw;
+      const p = path != null ? path : [];
+      let ok = true;
+      for (const key of Object.keys(this._shape)) {
+        p.push(key);
+        if (!this._shape[key].isValid(obj[key], ctx, p)) ok = false;
+        p.pop();
+      }
+      if (ctx == null ? void 0 : ctx.strict) {
+        for (const key of Object.keys(obj)) {
+          if (key in this._shape) continue;
+          p.push(key);
+          ctx.errors.push(pathStr(p) + ": unexpected extra key");
+          p.pop();
+          ok = false;
+        }
+      }
+      return ok;
+    }
+    _canSanitize(raw) {
+      return !!raw && typeof raw === "object" && !Array.isArray(raw);
+    }
+  };
+  var OpenObj = class extends Base {
+    constructor(_shape, _openSchema) {
+      super();
+      this._shape = _shape;
+      this._openSchema = _openSchema;
+      const d = {};
+      for (const key of Object.keys(_shape)) d[key] = _shape[key]._default;
+      this._default = d;
+    }
+    sanitize(raw) {
+      const src = raw && typeof raw === "object" && !Array.isArray(raw) ? raw : {};
+      const out = __spreadValues({}, src);
+      for (const key of Object.keys(this._shape)) {
+        out[key] = this._shape[key].sanitize(src[key]);
+      }
+      if (this._openSchema) {
+        for (const key of Object.keys(src)) {
+          if (!(key in this._shape)) out[key] = this._openSchema.sanitize(src[key]);
+        }
+      }
+      return out;
+    }
+    isValid(raw, ctx, path) {
+      if (!raw || typeof raw !== "object" || Array.isArray(raw)) {
+        ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected object, got " + (Array.isArray(raw) ? "array" : typeof raw));
+        return false;
+      }
+      const obj = raw;
+      const p = path != null ? path : [];
+      let ok = true;
+      for (const key of Object.keys(this._shape)) {
+        p.push(key);
+        if (!this._shape[key].isValid(obj[key], ctx, p)) ok = false;
+        p.pop();
+      }
+      if (this._openSchema) {
+        for (const key of Object.keys(obj)) {
+          if (key in this._shape) continue;
+          p.push(key);
+          if (!this._openSchema.isValid(obj[key], ctx, p)) ok = false;
+          p.pop();
+        }
+      }
+      return ok;
+    }
+    _canSanitize(raw) {
+      return !!raw && typeof raw === "object" && !Array.isArray(raw);
+    }
+  };
+  var Arr = class extends Base {
+    constructor(item) {
+      super();
+      this.item = item;
+      this._default = [];
+    }
+    sanitize(raw) {
+      if (!Array.isArray(raw)) return [];
+      const out = [];
+      for (const el of raw) {
+        if (this.item._canSanitize(el)) out.push(this.item.sanitize(el));
+      }
+      return out;
+    }
+    isValid(raw, ctx, path) {
+      if (!Array.isArray(raw)) {
+        ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected array, got " + typeof raw);
+        return false;
+      }
+      const p = path != null ? path : [];
+      let ok = true;
+      for (let i = 0; i < raw.length; i++) {
+        p.push("[" + i + "]");
+        if (!this.item.isValid(raw[i], ctx, p)) ok = false;
+        p.pop();
+      }
+      return ok;
+    }
+    _canSanitize(raw) {
+      return Array.isArray(raw);
+    }
+  };
+  var Rec = class extends Base {
+    constructor(value) {
+      super();
+      this.value = value;
+      this._default = {};
+    }
+    sanitize(raw) {
+      if (!raw || typeof raw !== "object" || Array.isArray(raw)) return {};
+      const out = {};
+      for (const [k, v] of Object.entries(raw)) {
+        if (this.value._canSanitize(v)) out[k] = this.value.sanitize(v);
+      }
+      return out;
+    }
+    isValid(raw, ctx, path) {
+      if (!raw || typeof raw !== "object" || Array.isArray(raw)) {
+        ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected object/record, got " + (Array.isArray(raw) ? "array" : typeof raw));
+        return false;
+      }
+      const p = path != null ? path : [];
+      let ok = true;
+      for (const [k, v] of Object.entries(raw)) {
+        p.push(k);
+        if (!this.value.isValid(v, ctx, p)) ok = false;
+        p.pop();
+      }
+      return ok;
+    }
+    _canSanitize(raw) {
+      return !!raw && typeof raw === "object" && !Array.isArray(raw);
+    }
+  };
+  var Any = class extends Base {
+    constructor() {
+      super(...arguments);
+      this._default = void 0;
+    }
+    sanitize(raw) {
+      return raw;
+    }
+    isValid(_raw, _ctx, _path) {
+      return true;
+    }
+    _canSanitize(_raw) {
+      return true;
+    }
+  };
+  var Lazy = class extends Base {
+    constructor(fn, _default) {
+      super();
+      this.fn = fn;
+      this._default = _default;
+      this.resolved = null;
+    }
+    get schema() {
+      var _a;
+      return (_a = this.resolved) != null ? _a : this.resolved = this.fn();
+    }
+    sanitize(raw) {
+      return this.schema.sanitize(raw);
+    }
+    isValid(raw, ctx, path) {
+      return this.schema.isValid(raw, ctx, path);
+    }
+    _canSanitize(raw) {
+      return this.schema._canSanitize(raw);
+    }
+  };
+  var Tuple = class extends Base {
+    constructor(schemas) {
+      super();
+      this.schemas = schemas;
+      this._default = schemas.map((s) => s._default);
+    }
+    sanitize(raw) {
+      if (!Array.isArray(raw) || raw.length !== this.schemas.length) return this._default;
+      return this.schemas.map((s, i) => s.sanitize(raw[i]));
+    }
+    isValid(raw, ctx, path) {
+      if (!Array.isArray(raw) || raw.length !== this.schemas.length) {
+        ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected tuple of length " + this.schemas.length + ", got " + (Array.isArray(raw) ? "array[" + raw.length + "]" : typeof raw));
+        return false;
+      }
+      const p = path != null ? path : [];
+      let ok = true;
+      for (let i = 0; i < this.schemas.length; i++) {
+        p.push("[" + i + "]");
+        if (!this.schemas[i].isValid(raw[i], ctx, p)) ok = false;
+        p.pop();
+      }
+      return ok;
+    }
+    // Require exact length so wrong-length arrays are dropped rather than repaired to default.
+    _canSanitize(raw) {
+      return Array.isArray(raw) && raw.length === this.schemas.length;
+    }
+  };
+  function implementsInterface() {
+    return (schema) => schema;
+  }
+  var px = {
+    /** Matches a string. Default: '' or provided value. */
+    string: (defaultVal = "") => new Str(defaultVal),
+    /** Matches a finite number. Default: 0 or provided value. */
+    number: (defaultVal = 0) => new Num(defaultVal),
+    /** Matches a boolean. Default: false or provided value. */
+    boolean: (defaultVal = false) => new Bool(defaultVal),
+    /** Matches one exact primitive value; its default is the value itself. */
+    literal: (value) => new Literal(value),
+    /** Matches one of a fixed set of string/number values. Default: first value. */
+    enum: (values, defaultVal) => new Enum(values, defaultVal),
+    /**
+     * Returns the first schema whose isValid passes.
+     * TypeScript infers the union of all member types automatically.
+     */
+    union: (schemas, defaultVal) => new Union(schemas, defaultVal),
+    /**
+     * Discriminated union — reads `raw[key]`, finds the member schema whose
+     * literal at `key` matches, then delegates sanitize/isValid to that member.
+     * Each member must be an object schema with a `px.literal(...)` at `key`.
+     * TypeScript infers the union of all member types automatically.
+     */
+    discriminatedUnion: (key, schemas) => new DiscriminatedUnion(key, schemas),
+    /** Typed object — unknown keys are stripped. Required fields fall back to their default. */
+    object: (shape) => new Obj(shape),
+    /**
+     * Open object — validates known keys; passes unknown keys through as-is,
+     * or validates/sanitizes them against `openSchema` when provided.
+     */
+    openObject: (shape, openSchema) => new OpenObj(shape, openSchema),
+    /**
+     * Creates a new closed object schema by merging a base schema's shape with additional fields.
+     * The base can be the result of px.object() or px.openObject() — anything with a _shape property.
+     *
+     * @example
+     * const PxSvgNodeSchema = px.extendedObject(PxNodeBase, { width: px.number().optional() });
+     */
+    extendedObject: (base, extra) => new Obj(__spreadValues(__spreadValues({}, base._shape), extra)),
+    /** Array whose unrecoverable items are filtered out. Default: []. */
+    array: (item) => new Arr(item),
+    /** String-keyed record whose unrecoverable values are dropped. Default: {}. */
+    record: (value) => new Rec(value),
+    /** Passes anything through unchanged — always valid. */
+    any: () => new Any(),
+    /** Fixed-length tuple — validates element count and each position individually. */
+    tuple: (schemas) => new Tuple(schemas),
+    /** Defers schema creation — required for recursive types. Must supply a default value. */
+    lazy: (fn, defaultVal) => new Lazy(fn, defaultVal)
+  };
+  var PX_ANIM_SRC_ATTR_NAME = "data-px-animation-src";
+  var PX_ANIM_ATTR_NAME = "_px_animator";
+  var TEXT_ATTR = "text";
+  var TEXT_CONTENT_ATTR = "textContent";
+  var INTERNAL_ATTRS = /* @__PURE__ */ new Set([
+    "type",
+    "children",
+    "animator",
+    "meta",
+    "animate",
+    TEXT_ATTR,
+    TEXT_CONTENT_ATTR
+  ]);
+  var PxEasingOrRefSchema = px.union([
+    px.string(),
+    px.tuple([px.number(), px.number(), px.number(), px.number()])
+  ]);
+  var PxKeyframeValueSchema = implementsInterface()(px.union([
+    px.string(),
+    // e.g. for colors
+    px.number(),
+    px.array(px.number()),
+    px.lazy(() => PxTransformPartsSchema, {}),
+    px.object({ path: px.string() }),
+    px.lazy(() => px.object({ paths: px.array(PxBezierPathSchema) }), { paths: [] })
+  ]));
+  var PxKeyframeSchema = implementsInterface()(px.object({
+    time: px.number().optional(),
+    t: px.number().optional(),
+    value: px.any().optional(),
+    v: px.any().optional(),
+    easing: PxEasingOrRefSchema.optional(),
+    e: PxEasingOrRefSchema.optional(),
+    tangentOut: px.tuple([px.number(), px.number()]).optional(),
+    to: px.tuple([px.number(), px.number()]).optional(),
+    // short alias
+    tangentIn: px.tuple([px.number(), px.number()]).optional(),
+    ti: px.tuple([px.number(), px.number()]).optional(),
+    // short alias
+    selected: px.boolean().optional()
+    // editor-side UI state (Player ignores it)
+  }));
+  var PxLoopSchema = implementsInterface()(px.object({
+    segmentCount: px.number().optional(),
+    before: px.boolean().optional(),
+    alternate: px.boolean().optional()
+  }));
+  var PxPropertyAnimationSchema = implementsInterface()(px.object({
+    keyframes: px.array(PxKeyframeSchema).optional(),
+    kfs: px.array(PxKeyframeSchema).optional(),
+    loop: px.union([PxLoopSchema, px.boolean()]).optional(),
+    autoOrient: px.boolean().optional()
+  }));
+  var PxTransformPartsSchema = implementsInterface()(px.object({
+    translate: px.tuple([px.number(), px.number()]).optional(),
+    rotate: px.number().optional(),
+    scale: px.tuple([px.number(), px.number()]).optional(),
+    origin: px.tuple([px.number(), px.number()]).optional()
+  }));
+  var PxTransformValueSchema = px.union([
+    px.string(),
+    px.object({ value: PxTransformPartsSchema }),
+    PxPropertyAnimationSchema
+  ]);
+  var PxAnimationDefinitionSchema = implementsInterface()(
+    px.record(PxPropertyAnimationSchema)
+  );
+  var PxElementAnimationSchema = implementsInterface()(px.union([
+    px.string(),
+    px.array(px.union([px.string(), PxAnimationDefinitionSchema])),
+    PxAnimationDefinitionSchema
+  ]));
+  var PxTriggerSchema = implementsInterface()(px.object({
+    startOn: px.enum(["load", "mouseOver", "click", "scrollIntoView", "programmatic"]).optional(),
+    outAction: px.enum(["continue", "pause", "reset", "reverse"]).optional(),
+    scrollIntoViewThreshold: px.number().optional()
+  }));
+  var PxDefsSchema = implementsInterface()(px.object({
+    easings: px.record(px.tuple([px.number(), px.number(), px.number(), px.number()])).optional(),
+    animations: px.record(PxAnimationDefinitionSchema).optional(),
+    styles: px.record(px.any()).optional()
+  }));
+  var PxAnimatorConfigSchema = implementsInterface()(px.object({
+    mode: px.enum(["auto", "webapi", "frames"]).optional(),
+    duration: px.number().optional(),
+    delay: px.number().optional(),
+    iterations: px.union([px.number(), px.literal("infinite")]).optional(),
+    fill: px.enum(["forwards", "backwards", "both", "none"]).optional(),
+    direction: px.enum(["normal", "reverse", "alternate", "alternate-reverse"]).optional(),
+    frameRate: px.number().optional(),
+    trigger: PxTriggerSchema.optional(),
+    definitions: PxDefsSchema.optional(),
+    animate: px.record(PxElementAnimationSchema).optional(),
+    debug: px.boolean().optional(),
+    debugInstName: px.string().optional()
+  }));
+  var PxBindingSchema = implementsInterface()(px.object({
+    id: px.string(),
+    animate: PxElementAnimationSchema
+  }));
+  var PxAttrValueSchema = px.union([
+    px.string(),
+    px.number(),
+    px.object({ value: px.any() }),
+    PxPropertyAnimationSchema
+  ]);
+  var PxAnimatableNumberSchema = px.union([
+    px.number(),
+    px.object({ value: px.number() }),
+    px.object({
+      keyframes: px.array(PxKeyframeSchema),
+      autoOrient: px.boolean().optional()
+    })
+  ]);
+  var PxAnimatableVec2Schema = px.union([
+    px.tuple([px.number(), px.number()]),
+    px.object({ value: px.tuple([px.number(), px.number()]) }),
+    px.object({
+      keyframes: px.array(PxKeyframeSchema),
+      autoOrient: px.boolean().optional()
+    })
+  ]);
+  var PxTransformationEffectSchema = px.object({
+    translate: PxAnimatableVec2Schema.optional(),
+    rotate: PxAnimatableNumberSchema.optional(),
+    scale: PxAnimatableVec2Schema.optional(),
+    skew: PxAnimatableVec2Schema.optional(),
+    origin: PxAnimatableVec2Schema.optional()
+  });
+  var PxRepeaterEffectSchema = px.object({
+    copies: px.number().optional(),
+    translate: px.tuple([px.number(), px.number()]).optional(),
+    rotate: px.number().optional(),
+    scale: px.tuple([px.number(), px.number()]).optional(),
+    // per-copy scale, PERCENT (85 → 0.85)
+    origin: px.tuple([px.number(), px.number()]).optional()
+  });
+  var PxMaskedByEffectSchema = px.object({
+    href: px.string().optional(),
+    maskType: px.string().optional(),
+    maskUnits: px.string().optional(),
+    maskContentUnits: px.string().optional()
+  });
+  var PxTrimPathEffectSchema = px.any();
+  var PxRetimeEffectSchema = px.object({
+    baseId: px.string().optional(),
+    start: px.number().optional(),
+    stretch: px.number().optional(),
+    timeCrop: px.tuple([px.number(), px.number()]).optional()
+  });
+  var PxRefEffectSchema = px.object({
+    baseId: px.string().optional(),
+    type: px.string().optional()
+  });
+  var PxEffectsSchema = px.object({
+    transformation: PxTransformationEffectSchema.optional(),
+    repeater: PxRepeaterEffectSchema.optional(),
+    maskedBy: PxMaskedByEffectSchema.optional(),
+    trimPath: PxTrimPathEffectSchema.optional(),
+    retime: PxRetimeEffectSchema.optional(),
+    isCombinedShape: px.boolean().optional(),
+    ref: PxRefEffectSchema.optional()
+  });
+  function validateNodeEffects(root, opts) {
+    const warnings = [];
+    const walk = (node, path) => {
+      if (node && node.effects) {
+        const ctx = { errors: [], warnings: [], strict: !!(opts == null ? void 0 : opts.strict) };
+        const ok = PxEffectsSchema.isValid(node.effects, ctx, [path + ".effects"]);
+        if (!ok) {
+          for (const err of ctx.errors) warnings.push(err);
+        }
+      }
+      if (node && Array.isArray(node.children)) {
+        node.children.forEach((c, i) => walk(c, path + ".children[" + i + "]"));
+      }
+    };
+    walk(root, "root");
+    return warnings;
+  }
+  var PxNodeBase = px.openObject({
+    type: px.string(),
+    id: px.string().optional(),
+    meta: px.any().optional(),
+    // Player-effects bucket emitted by the Editor's lightweight design format.
+    // Consumed and removed by `applyPlayerEffects` before any other normalisation
+    // (see `createAnimatorImpl`), so downstream code never sees it.
+    effects: PxEffectsSchema.optional(),
+    animate: PxAnimationDefinitionSchema.optional(),
+    style: px.union([px.string(), px.record(px.union([px.string(), px.number()]))]).optional()
+  }, PxAttrValueSchema);
+  var PxNodeSchema = px.openObject(__spreadProps(__spreadValues({}, PxNodeBase._shape), {
+    children: px.lazy(() => px.array(PxNodeSchema), []).optional()
+  }), PxAttrValueSchema);
+  var PxSvgNodeExtra = px.object({
+    width: px.number().optional(),
+    height: px.number().optional(),
+    viewBox: px.string().optional(),
+    animator: PxAnimatorConfigSchema.optional()
+  });
+  var PxAnimatedSvgDocumentSchema = px.openObject(__spreadProps(__spreadValues(__spreadValues({}, PxNodeBase._shape), PxSvgNodeExtra._shape), {
+    type: px.literal("svg"),
+    // override string → literal to require 'svg'
+    children: px.array(PxNodeSchema).optional()
+  }), PxAttrValueSchema);
+  var PxBezierPathSchema = implementsInterface()(px.object({
+    v: px.array(px.array(px.number())),
+    i: px.array(px.array(px.number())).optional(),
+    o: px.array(px.array(px.number())).optional(),
+    c: px.boolean().optional()
+  }));
+  function isPxElementFileFormat(fileJson) {
+    if (!(fileJson && typeof fileJson === "object" && !Array.isArray(fileJson))) {
+      return false;
+    }
+    return fileJson["type"] === "svg" || fileJson["tagName"] === "svg";
+  }
+  function getAnimatorConfig(doc) {
+    var _a, _b;
+    return (doc == null ? void 0 : doc.animator) || ((_a = doc == null ? void 0 : doc.meta) == null ? void 0 : _a.animator) || (doc == null ? void 0 : doc.animation) || ((_b = doc == null ? void 0 : doc.meta) == null ? void 0 : _b.animation);
+  }
+  function getDefs(doc) {
+    var _a;
+    if (!doc) return void 0;
+    return (_a = getAnimatorConfig(doc)) == null ? void 0 : _a.definitions;
+  }
+  function getBindings(doc) {
+    var _a;
+    if (!doc) return void 0;
+    const animate = (_a = getAnimatorConfig(doc)) == null ? void 0 : _a.animate;
+    if (!animate) return void 0;
+    return Object.entries(animate).map(([id, anim]) => ({ id, animate: anim }));
+  }
   function bezierToSvgPath(path) {
     var _a, _b, _c, _d;
     const v = path.v;
@@ -1882,50 +3136,104 @@ var PixodeskAnimatorReact = (() => {
     const t = (value - inMin) / (inMax - inMin);
     return outMin + t * (outMax - outMin);
   }
-  function cubicBezier(easing) {
-    const [p1x, p1y, p2x, p2y] = easing;
+  function solveCubicBezierX(p1x, p2x, x) {
+    if (x <= 0) return 0;
+    if (x >= 1) return 1;
     const cx = 3 * p1x;
     const bx = 3 * (p2x - p1x) - cx;
     const ax = 1 - cx - bx;
+    function sampleX(t) {
+      return ((ax * t + bx) * t + cx) * t;
+    }
+    function sampleDX(t) {
+      return (3 * ax * t + 2 * bx) * t + cx;
+    }
+    let t2 = x;
+    let t0 = 0;
+    let t1 = 1;
+    for (let i = 0; i < 8; i++) {
+      const x2 = sampleX(t2) - x;
+      if (Math.abs(x2) < 1e-6) return t2;
+      const d2 = sampleDX(t2);
+      if (Math.abs(d2) < 1e-6) break;
+      t2 -= x2 / d2;
+    }
+    t2 = x;
+    while (t0 < t1) {
+      const x2 = sampleX(t2);
+      if (Math.abs(x2 - x) < 1e-6) return t2;
+      if (x > x2) t0 = t2;
+      else t1 = t2;
+      t2 = (t1 + t0) / 2;
+    }
+    return t2;
+  }
+  function cubicBezier(easing) {
+    const [p1x, p1y, p2x, p2y] = easing;
     const cy = 3 * p1y;
     const by = 3 * (p2y - p1y) - cy;
     const ay = 1 - cy - by;
-    function sampleCurveX(t) {
-      return ((ax * t + bx) * t + cx) * t;
-    }
     function sampleCurveY(t) {
       return ((ay * t + by) * t + cy) * t;
     }
-    function sampleCurveDerivativeX(t) {
-      return (3 * ax * t + 2 * bx) * t + cx;
-    }
-    function solveCurveX(x) {
-      if (x <= 0) return 0;
-      if (x >= 1) return 1;
-      let t2 = x;
-      let t0 = 0;
-      let t1 = 1;
-      for (let i = 0; i < 8; i++) {
-        const x2 = sampleCurveX(t2) - x;
-        if (Math.abs(x2) < 1e-6) return t2;
-        const d2 = sampleCurveDerivativeX(t2);
-        if (Math.abs(d2) < 1e-6) break;
-        t2 -= x2 / d2;
-      }
-      t2 = x;
-      while (t0 < t1) {
-        const x2 = sampleCurveX(t2);
-        if (Math.abs(x2 - x) < 1e-6) return t2;
-        if (x > x2) t0 = t2;
-        else t1 = t2;
-        t2 = (t1 + t0) / 2;
-      }
-      return t2;
-    }
     return function(x) {
-      return sampleCurveY(solveCurveX(x));
+      return sampleCurveY(solveCubicBezierX(p1x, p2x, x));
+    };
+  }
+  function lerp2(a, b, t) {
+    return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+  }
+  function subdivideCubicBezier(p0, p1, p2, p3, t) {
+    const q0 = lerp2(p0, p1, t);
+    const q1 = lerp2(p1, p2, t);
+    const q2 = lerp2(p2, p3, t);
+    const r0 = lerp2(q0, q1, t);
+    const r1 = lerp2(q1, q2, t);
+    const s = lerp2(r0, r1, t);
+    return {
+      left: [p0, q0, r0, s],
+      right: [s, r1, q2, p3]
     };
   }
+  function splitEasing(easing, xFraction) {
+    if (!easing) return { left: void 0, right: void 0 };
+    if (xFraction <= 0) return { left: void 0, right: easing };
+    if (xFraction >= 1) return { left: easing, right: void 0 };
+    const [x1, y1, x2, y2] = easing;
+    const t = solveCubicBezierX(x1, x2, xFraction);
+    const p0 = [0, 0];
+    const p1 = [x1, y1];
+    const p2 = [x2, y2];
+    const p3 = [1, 1];
+    const { left, right } = subdivideCubicBezier(p0, p1, p2, p3, t);
+    const sx = left[3][0];
+    const sy = left[3][1];
+    let leftEasing;
+    if (sx > 1e-9 && Math.abs(sy) > 1e-9) {
+      leftEasing = [
+        left[1][0] / sx,
+        left[1][1] / sy,
+        left[2][0] / sx,
+        left[2][1] / sy
+      ];
+    }
+    let rightEasing;
+    const rx = 1 - sx;
+    const ry = 1 - sy;
+    if (rx > 1e-9 && Math.abs(ry) > 1e-9) {
+      rightEasing = [
+        (right[1][0] - sx) / rx,
+        (right[1][1] - sy) / ry,
+        (right[2][0] - sx) / rx,
+        (right[2][1] - sy) / ry
+      ];
+    }
+    return { left: leftEasing, right: rightEasing };
+  }
+  function reverseEasing(easing) {
+    if (!easing) return void 0;
+    return [1 - easing[2], 1 - easing[3], 1 - easing[0], 1 - easing[1]];
+  }
   function toRGBA(color) {
     const r = Math.round(color[0] * 255);
     const g = Math.round(color[1] * 255);
@@ -1972,6 +3280,24 @@ var PixodeskAnimatorReact = (() => {
   var COLOUR_ATTR_NAMES = /* @__PURE__ */ new Set(["color", "fill", "flood-color", "lighting-color", "stop-color", "stroke"]);
   var TRANSFORM_FN_NAMES = /* @__PURE__ */ new Set(["translate", "rotate", "scale", "skew"]);
   var PCT_BASED_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
+  function composeTransformParts(parts, opts) {
+    var _a;
+    if (!parts) return "";
+    const withUnits = (_a = opts == null ? void 0 : opts.withUnits) != null ? _a : true;
+    const segs = [];
+    const t = parts.translate;
+    const o = parts.origin;
+    const r = parts.rotate;
+    const s = parts.scale;
+    const tu = withUnits ? "px" : "";
+    const ru = withUnits ? "deg" : "";
+    if (t) segs.push("translate(" + t[0] + tu + "," + t[1] + tu + ")");
+    if (o) segs.push("translate(" + o[0] + tu + "," + o[1] + tu + ")");
+    if (r !== void 0 && r !== null) segs.push("rotate(" + r + ru + ")");
+    if (s) segs.push("scale(" + s[0] + "," + s[1] + ")");
+    if (o) segs.push("translate(" + -o[0] + tu + "," + -o[1] + tu + ")");
+    return segs.join("");
+  }
   var STYLE_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
   var DEFAULT_DURATION_MS = 1e3;
   function kebabToCamelCaseWord(kebab) {
@@ -2031,12 +3357,258 @@ var PixodeskAnimatorReact = (() => {
   function clamp(value, min, max) {
     return Math.max(min, Math.min(value, max));
   }
+  function bezier2D_pointAt(P0, P1, P2, P3, t) {
+    if (t <= 0) return [P0[0], P0[1]];
+    if (t >= 1) return [P3[0], P3[1]];
+    const u = 1 - t;
+    const u2 = u * u;
+    const u3 = u2 * u;
+    const t2 = t * t;
+    const t3 = t2 * t;
+    const w0 = u3;
+    const w1 = 3 * t * u2;
+    const w2 = 3 * t2 * u;
+    const w3 = t3;
+    return [
+      w0 * P0[0] + w1 * P1[0] + w2 * P2[0] + w3 * P3[0],
+      w0 * P0[1] + w1 * P1[1] + w2 * P2[1] + w3 * P3[1]
+    ];
+  }
+  var BEZIER_T_NUDGE = 1e-4;
+  function bezier2D_derivativeAt(P0, P1, P2, P3, t) {
+    const result = _bezier2D_derivativeAtRaw(P0, P1, P2, P3, t);
+    if (result[0] === 0 && result[1] === 0) {
+      const nudgedT = t < 0.5 ? t + BEZIER_T_NUDGE : t - BEZIER_T_NUDGE;
+      return _bezier2D_derivativeAtRaw(P0, P1, P2, P3, nudgedT);
+    }
+    return result;
+  }
+  function _bezier2D_derivativeAtRaw(P0, P1, P2, P3, t) {
+    const u = 1 - t;
+    const a = 3 * u * u;
+    const b = 6 * t * u;
+    const c = 3 * t * t;
+    return [
+      a * (P1[0] - P0[0]) + b * (P2[0] - P1[0]) + c * (P3[0] - P2[0]),
+      a * (P1[1] - P0[1]) + b * (P2[1] - P1[1]) + c * (P3[1] - P2[1])
+    ];
+  }
+  function bezier2D_arcLengthLUT(P0, P1, P2, P3, steps = 100) {
+    const n = steps + 1;
+    const ts = new Float64Array(n);
+    const ds = new Float64Array(n);
+    let prev = bezier2D_pointAt(P0, P1, P2, P3, 0);
+    ts[0] = 0;
+    ds[0] = 0;
+    let cum = 0;
+    for (let i = 1; i < n; i++) {
+      const t = i / steps;
+      const cur = bezier2D_pointAt(P0, P1, P2, P3, t);
+      const dx = cur[0] - prev[0];
+      const dy = cur[1] - prev[1];
+      cum += Math.sqrt(dx * dx + dy * dy);
+      ts[i] = t;
+      ds[i] = cum;
+      prev = cur;
+    }
+    return { ts, ds };
+  }
+  function bezier2D_tForDistance(lut, distance) {
+    const { ts, ds } = lut;
+    const last = ds.length - 1;
+    if (distance <= 0) return ts[0];
+    if (distance >= ds[last]) return ts[last];
+    let lo = 1;
+    let hi = last;
+    while (lo < hi) {
+      const mid = lo + hi >>> 1;
+      if (ds[mid] < distance) lo = mid + 1;
+      else hi = mid;
+    }
+    const dPrev = ds[hi - 1];
+    const dCur = ds[hi];
+    const span = dCur - dPrev;
+    const frac = span > 0 ? (distance - dPrev) / span : 0;
+    return ts[hi - 1] + frac * (ts[hi] - ts[hi - 1]);
+  }
   var SVG_NS = "http://www.w3.org/2000/svg";
-  var INTERNAL_ATTRS = /* @__PURE__ */ new Set(["type", "children", "animate", "style", "animator", "defs", "bindings"]);
-  function createElement(tagName, props, style, children) {
+  var ALLOWED_SVG_TAGS_LOWER_CASE = new Set([
+    "svg",
+    "g",
+    "path",
+    "circle",
+    "ellipse",
+    "rect",
+    "line",
+    "polyline",
+    "polygon",
+    "text",
+    "tspan",
+    "textPath",
+    "defs",
+    "clipPath",
+    "mask",
+    "pattern",
+    "linearGradient",
+    "radialGradient",
+    "stop",
+    "use",
+    "symbol",
+    "marker",
+    "filter",
+    "feGaussianBlur",
+    "feOffset",
+    "feBlend",
+    "feColorMatrix",
+    "feMerge",
+    "feMergeNode"
+  ].map((tagName) => tagName.toLowerCase()));
+  var ALLOWED_RESOURCE_ATTRIBUTES = [
+    "href",
+    // <use>
+    "src",
+    // <image>
+    "filter",
+    // url(#filterId)
+    "clipPath",
+    // clip-path="url(#clipPathId)"
+    "mask",
+    // url(#maskId)
+    "markerStart",
+    // marker-start="url(#markerId)"
+    "markerMid",
+    // marker-mid="url(#markerId)"
+    "markerEnd"
+    // marker-end="url(#markerId)"
+    // 'fill',           // url(#gradientId) or url(#patternId)
+    // 'stroke',         // url(#gradientId) or url(#patternId)
+    // Don't allow 'cursor', can use external SVG,         // url(cursor.svg)
+  ];
+  var ALLOWED_RESOURCE_ATTRIBUTES_SET = new Set(ALLOWED_RESOURCE_ATTRIBUTES);
+  var ALLOWED_ATTRIBUTES = [
+    "href",
+    "src",
+    // Presentation
+    "fill",
+    "fillOpacity",
+    "fillRule",
+    "stroke",
+    "strokeWidth",
+    "strokeOpacity",
+    "strokeLinecap",
+    "strokeLinejoin",
+    "strokeMiterlimit",
+    "strokeDasharray",
+    "strokeDashoffset",
+    "opacity",
+    "transform",
+    // Geometry
+    "x",
+    "y",
+    "cx",
+    "cy",
+    "r",
+    "rx",
+    "ry",
+    "width",
+    "height",
+    "d",
+    "x1",
+    "y1",
+    "x2",
+    "y2",
+    "points",
+    "dx",
+    "dy",
+    // Font
+    "fontSize",
+    "fontFamily",
+    "fontWeight",
+    "fontStyle",
+    // Text
+    "textAnchor",
+    "letterSpacing",
+    "wordSpacing",
+    "space",
+    "xml:space",
+    "textDecoration",
+    "textTransform",
+    "whiteSpace",
+    "white-space",
+    "dominantBaseline",
+    "alignmentBaseline",
+    "rotate",
+    // per-glyph rotation array, currently not supported
+    // Structure
+    "id",
+    "class",
+    "viewBox",
+    "preserveAspectRatio",
+    // Gradient/Pattern
+    "offset",
+    "stopColor",
+    "stopOpacity",
+    "gradientTransform",
+    // Clippath/Mask
+    "clipPath",
+    "mask",
+    // Motion path
+    "offsetPath",
+    "offsetDistance",
+    "offsetRotate",
+    "offsetAnchor",
+    "offsetPosition",
+    // Text path
+    "startOffset",
+    "textLength",
+    "lengthAdjust",
+    // Filter
+    "filter",
+    "stdDeviation",
+    "in",
+    "in2",
+    "result",
+    "mode",
+    ...ALLOWED_RESOURCE_ATTRIBUTES
+  ];
+  var ALLOWED_ATTRIBUTES_LOW_SET = new Set(ALLOWED_ATTRIBUTES.map((str) => str.toLowerCase()));
+  function sanitiseAttributeValue(name, value) {
+    const nameLower = name.toLowerCase();
+    if (!ALLOWED_ATTRIBUTES_LOW_SET.has(nameLower)) {
+      console.warn("Attribute not in whitelist: ", nameLower);
+      return void 0;
+    }
+    if (nameLower === "fill" || nameLower === "stroke" || nameLower === "stopColor") {
+      const str = String(value);
+      if (str.includes("url(") && !/^url\(#[^)]+\)$/.test(str)) {
+        console.warn('Attribute "' + nameLower + '" blocked: url() references must be internal url(#id), got:', value);
+        return void 0;
+      }
+      return value;
+    }
+    if (ALLOWED_RESOURCE_ATTRIBUTES_SET.has(nameLower)) {
+      const str = String(value);
+      if (str.startsWith("#")) {
+        return value;
+      }
+      if (/^url\(#[^)]+\)$/.test(str)) {
+        return value;
+      }
+      return void 0;
+    }
+    return value;
+  }
+  function createElement(tagName, normalisedProps, style, children, textContent) {
+    if (!ALLOWED_SVG_TAGS_LOWER_CASE.has(tagName.toLowerCase())) {
+      console.warn("Attribute not in whitelist: ", tagName);
+      return null;
+    }
     const element = document.createElementNS(SVG_NS, tagName);
-    for (const propName in props) {
-      element.setAttribute(camelCaseToKebabWordIfNeeded(propName), props[propName]);
+    for (const propName in normalisedProps) {
+      element.setAttribute(
+        camelCaseToKebabWordIfNeeded(propName),
+        sanitiseAttributeValue(propName, normalisedProps[propName])
+      );
     }
     if (style) {
       for (const styleProp in style) {
@@ -2048,6 +3620,7 @@ var PixodeskAnimatorReact = (() => {
         element.appendChild(child);
       }
     }
+    if (textContent) element.textContent = textContent;
     return element;
   }
   function resolveStyle(style, defs) {
@@ -2062,9 +3635,12 @@ var PixodeskAnimatorReact = (() => {
     const propsCopy = {};
     for (const key of Object.keys(props)) {
       if (INTERNAL_ATTRS.has(key)) continue;
+      if (key === "style") continue;
       let value = props[key];
       if (COLOUR_ATTR_NAMES.has(key) && Array.isArray(value)) {
         propsCopy[key] = toRGBA(value);
+      } else if (key === "transform" && value !== null && typeof value === "object" && !Array.isArray(value) && value.value && typeof value.value === "object") {
+        propsCopy["transform"] = composeTransformParts(value.value, { withUnits: false });
       } else if (TRANSFORM_FN_NAMES.has(key)) {
         if (Array.isArray(value)) {
           if (key === "translate") value = value.map((v) => v + "px");
@@ -2080,8 +3656,8 @@ var PixodeskAnimatorReact = (() => {
   }
   function renderNode(node, defs) {
     if (!node) return null;
-    const _a = node, { type, children, animate, style } = _a, props = __objRest(_a, ["type", "children", "animate", "style"]);
-    const nodeDefs = node.defs || defs;
+    const _a = node, { type, children, style } = _a, props = __objRest(_a, ["type", "children", "style"]);
+    const nodeDefs = getDefs(node) || defs;
     const resolvedStyle = resolveStyle(style, nodeDefs);
     let childElements;
     if (children) {
@@ -2097,7 +3673,8 @@ var PixodeskAnimatorReact = (() => {
       type || "g",
       getNormalizedProps(props),
       resolvedStyle,
-      childElements
+      childElements,
+      props[TEXT_ATTR] || props[TEXT_CONTENT_ATTR]
     );
   }
   function setupAnimationTriggers(api, config) {
@@ -2175,27 +3752,44 @@ var PixodeskAnimatorReact = (() => {
     }
     return api;
   }
-  var PX_ANIM_SRC_ATTR_NAME = "data-px-animation-src";
-  var PX_ANIM_ATTR_NAME = "_px_animator";
-  function isPxElementFileFormat(fileJson) {
-    if (!(fileJson && typeof fileJson === "object" && !Array.isArray(fileJson))) {
-      return false;
+  function propAnimIsMotionPath(anim) {
+    var _a;
+    const kfs = (_a = anim.keyframes) != null ? _a : anim.kfs;
+    if (!Array.isArray(kfs)) return false;
+    if (anim.autoOrient) return true;
+    for (const kf of kfs) {
+      if (kf.tangentIn || kf.tangentOut) return true;
     }
-    return fileJson["type"] === "svg" || fileJson["tagName"] === "svg";
+    return false;
   }
-  function getAnimatorConfig(doc) {
-    var _a, _b;
-    return (doc == null ? void 0 : doc.animator) || ((_a = doc == null ? void 0 : doc.meta) == null ? void 0 : _a.animator) || (doc == null ? void 0 : doc.animation) || ((_b = doc == null ? void 0 : doc.meta) == null ? void 0 : _b.animation);
-  }
-  function getDefs(doc) {
-    var _a;
-    if (!doc) return void 0;
-    return doc.defs || ((_a = doc.meta) == null ? void 0 : _a.defs);
+  var _segmentCache = /* @__PURE__ */ new WeakMap();
+  function getSegmentCache(prevKf, nextKf, prevPos, nextPos) {
+    const existing = _segmentCache.get(prevKf);
+    if (existing) return existing;
+    const to = prevKf.tangentOut;
+    const ti = nextKf.tangentIn;
+    const P1 = [prevPos[0] + (to ? to[0] : 0), prevPos[1] + (to ? to[1] : 0)];
+    const P2 = [nextPos[0] + (ti ? ti[0] : 0), nextPos[1] + (ti ? ti[1] : 0)];
+    const lut = bezier2D_arcLengthLUT(prevPos, P1, P2, nextPos);
+    const entry = {
+      P0: prevPos,
+      P1,
+      P2,
+      P3: nextPos,
+      lut,
+      totalArc: lut.ds[lut.ds.length - 1]
+    };
+    _segmentCache.set(prevKf, entry);
+    return entry;
   }
-  function getBindings(doc) {
-    var _a;
-    if (!doc) return void 0;
-    return doc.bindings || ((_a = doc.meta) == null ? void 0 : _a.bindings);
+  function evaluateMotionPathSegment(prevKf, nextKf, prevPos, nextPos, localProgress, autoOrient) {
+    const seg = getSegmentCache(prevKf, nextKf, prevPos, nextPos);
+    const t = seg.totalArc === 0 ? localProgress : bezier2D_tForDistance(seg.lut, localProgress * seg.totalArc);
+    const point = bezier2D_pointAt(seg.P0, seg.P1, seg.P2, seg.P3, t);
+    if (!autoOrient) return { translate: point };
+    const tan = bezier2D_derivativeAt(seg.P0, seg.P1, seg.P2, seg.P3, t);
+    const rotateDeg = Math.atan2(tan[1], tan[0]) * 180 / Math.PI;
+    return { translate: point, rotateDeg };
   }
   function parsePathCommands(d) {
     const tokens = d.split(/([MLCZmlcz]|[\s,]+)/).map((t) => t.trim()).filter((t) => t && t !== ",");
@@ -2259,6 +3853,8 @@ var PixodeskAnimatorReact = (() => {
         currentPath.o.push([x2, y2]);
       } else if (type === "Z" || type === "z") {
         currentPath.c = true;
+      } else {
+        console.warn('Unsupported path command "' + type + '"');
       }
     }
     return res;
@@ -2276,13 +3872,17 @@ var PixodeskAnimatorReact = (() => {
     return typeof value === "string" && extractPathData(value) !== void 0;
   }
   function normalizePathValue(value) {
+    if (value && typeof value === "object" && typeof value.path === "string") {
+      const d = extractPathData(value.path);
+      return d ? { paths: parseSvgPathToBezier(d) } : value;
+    }
     if (value && typeof value === "object" && "paths" in value) {
       const pathsArray = value.paths;
       if (Array.isArray(pathsArray) && pathsArray.length > 0) {
         if (isPathString(pathsArray[0])) {
           const paths = [];
-          for (const pathStr of pathsArray) {
-            const d = extractPathData(pathStr);
+          for (const pathStr2 of pathsArray) {
+            const d = extractPathData(pathStr2);
             if (d) {
               paths.push(...parseSvgPathToBezier(d));
             }
@@ -2295,8 +3895,8 @@ var PixodeskAnimatorReact = (() => {
     if (Array.isArray(value)) {
       if (value.length > 0 && isPathString(value[0])) {
         const paths = [];
-        for (const pathStr of value) {
-          const d = extractPathData(pathStr);
+        for (const pathStr2 of value) {
+          const d = extractPathData(pathStr2);
           if (d) {
             paths.push(...parseSvgPathToBezier(d));
           }
@@ -2350,6 +3950,111 @@ var PixodeskAnimatorReact = (() => {
     }
     return results;
   }
+  function interpolateValue(propName, a, b, t) {
+    var _a, _b;
+    if (propName === "d") {
+      const aPaths = (_a = a == null ? void 0 : a.paths) != null ? _a : Array.isArray(a) ? a : [];
+      const bPaths = (_b = b == null ? void 0 : b.paths) != null ? _b : Array.isArray(b) ? b : [];
+      return { paths: interpolateBeziers(aPaths, bPaths, t) };
+    }
+    if (COLOUR_ATTR_NAMES.has(propName)) {
+      return interpolateColor(a || [0, 0, 0, 1], b || [0, 0, 0, 1], t);
+    }
+    if (TRANSFORM_FN_NAMES.has(propName) || propName === "stroke-dasharray" || propName === "strokeDasharray") {
+      return interpolateVec(a || [], b || [], t);
+    }
+    return interpolateNum(+(a || 0), +(b || 0), t);
+  }
+  function expandLoopKeyframes(propName, keyframes, loop, duration) {
+    var _a, _b, _c, _d, _e;
+    const totalIntervals = keyframes.length - 1;
+    const segCount = clamp((_a = loop.segmentCount) != null ? _a : totalIntervals, 1, totalIntervals);
+    let segKfs;
+    if (loop.before) {
+      segKfs = keyframes.slice(0, segCount + 1);
+    } else {
+      segKfs = keyframes.slice(totalIntervals - segCount);
+    }
+    const firstT = (_b = keyframes[0].t) != null ? _b : 0;
+    const lastT = (_c = keyframes[keyframes.length - 1].t) != null ? _c : 0;
+    let fillStart, fillEnd;
+    if (loop.before) {
+      fillStart = 0;
+      fillEnd = firstT;
+    } else {
+      fillStart = lastT;
+      fillEnd = duration;
+    }
+    const fillDuration = fillEnd - fillStart;
+    if (fillDuration <= 0) return keyframes;
+    const segStartT = (_d = segKfs[0].t) != null ? _d : 0;
+    const segEndT = (_e = segKfs[segKfs.length - 1].t) != null ? _e : 0;
+    const segDuration = segEndT - segStartT;
+    if (segDuration <= 0) return keyframes;
+    const template = segKfs.map((kf) => ({
+      relT: (kf.t - segStartT) / segDuration,
+      v: kf.v,
+      e: kf.e
+    }));
+    const fullReps = Math.floor(fillDuration / segDuration);
+    const remainder = fillDuration - fullReps * segDuration;
+    const partialFraction = remainder / segDuration;
+    const looped = [];
+    function appendRep(repStart, isReversed, partial) {
+      let entries;
+      if (isReversed) {
+        entries = [];
+        for (let i = template.length - 1; i >= 0; i--) {
+          entries.push({
+            relT: 1 - template[i].relT,
+            v: template[i].v,
+            // Easing for reversed transition: use reversed easing from the forward "from" keyframe
+            e: i > 0 ? reverseEasing(template[i - 1].e) : void 0
+          });
+        }
+      } else {
+        entries = template;
+      }
+      const cutRelT = partial !== void 0 ? partial : 1;
+      for (let i = 0; i < entries.length; i++) {
+        const entry = entries[i];
+        if (entry.relT > cutRelT + 1e-9) {
+          const prev = entries[i - 1];
+          const intervalSpan = entry.relT - prev.relT;
+          const localFrac = (cutRelT - prev.relT) / intervalSpan;
+          const easedFrac = prev.e ? cubicBezier(prev.e)(localFrac) : localFrac;
+          const cutValue = interpolateValue(propName, prev.v, entry.v, easedFrac);
+          const { left: leftEasing } = splitEasing(prev.e, localFrac);
+          if (looped.length > 0 && prev.relT <= cutRelT) {
+            looped[looped.length - 1].e = leftEasing;
+          }
+          looped.push({ t: repStart + cutRelT * segDuration, v: cutValue, e: void 0 });
+          return;
+        }
+        looped.push({
+          t: repStart + entry.relT * segDuration,
+          v: entry.v,
+          e: i < entries.length - 1 ? entry.e : void 0
+        });
+      }
+    }
+    for (let rep = 0; rep < fullReps; rep++) {
+      const distFromBoundary = loop.before ? fullReps - 1 - rep : rep;
+      const isReversed = !!loop.alternate && distFromBoundary % 2 === 0;
+      const repStart = fillStart + rep * segDuration;
+      appendRep(repStart, isReversed);
+    }
+    if (partialFraction > 1e-9) {
+      const isReversed = !!loop.alternate && fullReps % 2 === 0;
+      const repStart = fillStart + fullReps * segDuration;
+      appendRep(repStart, isReversed, partialFraction);
+    }
+    if (loop.before) {
+      return [...looped, ...keyframes];
+    } else {
+      return [...keyframes, ...looped];
+    }
+  }
   function normalizeKeyframes(propName, propAnim, duration, defs) {
     var _a, _b, _c, _d, _e;
     const keyframes = propAnim.keyframes || propAnim.kfs || [];
@@ -2374,6 +4079,11 @@ var PixodeskAnimatorReact = (() => {
       var _a2, _b2;
       return ((_a2 = a.t) != null ? _a2 : 0) - ((_b2 = b.t) != null ? _b2 : 0);
     });
+    const loopRaw = propAnim.loop;
+    const loop = loopRaw === true ? {} : loopRaw || void 0;
+    if (loop && normalized.length >= 2) {
+      return expandLoopKeyframes(propName, normalized, loop, duration);
+    }
     return normalized;
   }
   function mergeAnimationDefinitions(animations) {
@@ -2424,10 +4134,11 @@ var PixodeskAnimatorReact = (() => {
       }
     }
     const processNode = (node) => {
-      if (node.animate) {
+      const inlineAnim = node.animate;
+      if (inlineAnim && Object.keys(inlineAnim).length > 0) {
         const nodeId = node.id || generateElementId();
         node.id = nodeId;
-        const normalized = processAnimation(nodeId, node.animate);
+        const normalized = processAnimation(nodeId, inlineAnim);
         if (normalized) bindings.push(normalized);
       }
       if (node.children) {
@@ -2498,6 +4209,41 @@ var PixodeskAnimatorReact = (() => {
         localProgress
       ).join(" ");
       cssAttrName = propName;
+    } else if (cssAttrName === "transform" && prevV !== null && typeof prevV === "object" && !Array.isArray(prevV)) {
+      const partKeys = /* @__PURE__ */ new Set([
+        ...prevV ? Object.keys(prevV) : [],
+        ...nextV ? Object.keys(nextV) : []
+      ]);
+      const partsResult = {};
+      for (const partKey of partKeys) {
+        const prevPart = prevV == null ? void 0 : prevV[partKey];
+        const nextPart = nextV == null ? void 0 : nextV[partKey];
+        if (partKey === "rotate") {
+          partsResult.rotate = interpolateNum(+(prevPart != null ? prevPart : 0), +(nextPart != null ? nextPart : 0), localProgress);
+        } else if (partKey === "translate" || partKey === "scale" || partKey === "origin") {
+          const fallback = partKey === "scale" ? [1, 1] : [0, 0];
+          const interp = interpolateVec(prevPart || fallback, nextPart || fallback, localProgress);
+          partsResult[partKey] = interp;
+        }
+      }
+      if (propAnimIsMotionPath(propAnim)) {
+        const prevTr = prevV.translate;
+        const nextTr = nextV.translate;
+        if (Array.isArray(prevTr) && Array.isArray(nextTr)) {
+          const sample = evaluateMotionPathSegment(
+            prevKf,
+            nextKf,
+            [+prevTr[0], +prevTr[1]],
+            [+nextTr[0], +nextTr[1]],
+            localProgress,
+            !!propAnim.autoOrient
+          );
+          partsResult.translate = [sample.translate[0], sample.translate[1]];
+          if (sample.rotateDeg !== void 0) partsResult.rotate = sample.rotateDeg;
+        }
+      }
+      cssValue = composeTransformParts(partsResult, { withUnits: false });
+      cssAttrName = "transform";
     } else if (cssAttrName === "translate") {
       const v = interpolateVec(
         prevV || [0, 0],
@@ -2523,12 +4269,12 @@ var PixodeskAnimatorReact = (() => {
       cssValue = "scale(" + v.join(",") + ")";
       cssAttrName = "transform";
     } else {
-      const num = interpolateNum(
+      const num2 = interpolateNum(
         +(prevV || 0),
         +(nextV || 0),
         localProgress
       );
-      cssValue = num;
+      cssValue = num2;
     }
     if (PCT_BASED_ATTR_NAMES.has(cssAttrName) && typeof cssValue === "number") {
       cssValue = cssValue * 100 + "%";
@@ -2804,41 +4550,91 @@ var PixodeskAnimatorReact = (() => {
     };
     return adapter;
   }
+  function createCssKf(kf, t, propName, unsupportedSet) {
+    var _a, _b;
+    let value = (_a = kf.v) != null ? _a : kf.value;
+    const e = (_b = kf.e) != null ? _b : kf.easing;
+    const cssKf = {
+      offset: t,
+      easing: e && Array.isArray(e) ? "cubic-bezier(" + e.join(",") + ")" : void 0
+    };
+    let cssValue;
+    let cssKey = propName;
+    if (COLOUR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
+      cssValue = toRGBA(value);
+    } else if (propName === "transform" && value !== null && typeof value === "object" && !Array.isArray(value)) {
+      cssValue = composeTransformParts(value, { withUnits: true });
+      cssKey = "transform";
+    } else if (TRANSFORM_FN_NAMES.has(propName)) {
+      if (Array.isArray(value)) {
+        if (propName === "translate") value = value.map((v) => v + "px");
+        value = value.join(",");
+      }
+      if (propName === "rotate") value = value + "deg";
+      cssValue = propName + "(" + value + ")";
+      cssKey = "transform";
+    } else {
+      cssValue = "" + value;
+    }
+    if (!CSS.supports(cssKey, cssValue)) unsupportedSet.add(cssKey);
+    cssKey = kebabToCamelCaseWord(cssKey);
+    cssKf[cssKey] = cssValue;
+    return cssKf;
+  }
+  function clipKeyframesToDuration(propName, keyframes, duration) {
+    var _a, _b, _c, _d, _e;
+    const result = [];
+    for (let i = 0; i < keyframes.length; i++) {
+      const kf = keyframes[i];
+      const t = (_a = kf.t) != null ? _a : 0;
+      if (t < 0) {
+        const next = keyframes[i + 1];
+        if (next && ((_b = next.t) != null ? _b : 0) >= 0) {
+          const nextT = (_c = next.t) != null ? _c : 0;
+          const localFrac = (0 - t) / (nextT - t);
+          const easedFrac = kf.e ? cubicBezier(kf.e)(localFrac) : localFrac;
+          const { right: rightEasing } = splitEasing(kf.e, localFrac);
+          result.push({ t: 0, v: interpolateValue(propName, kf.v, next.v, easedFrac), e: rightEasing });
+        }
+        continue;
+      }
+      if (t > duration) {
+        const prev = keyframes[i - 1];
+        if (prev && ((_d = prev.t) != null ? _d : 0) <= duration) {
+          const prevT = (_e = prev.t) != null ? _e : 0;
+          const localFrac = (duration - prevT) / (t - prevT);
+          const easedFrac = prev.e ? cubicBezier(prev.e)(localFrac) : localFrac;
+          const { left: leftEasing } = splitEasing(prev.e, localFrac);
+          if (result.length > 0) result[result.length - 1] = __spreadProps(__spreadValues({}, result[result.length - 1]), { e: leftEasing });
+          result.push({ t: duration, v: interpolateValue(propName, prev.v, kf.v, easedFrac), e: void 0 });
+        }
+        break;
+      }
+      result.push(kf);
+    }
+    return result;
+  }
   function convertToWebApiKeyframes(animDef, unsupportedSet, config) {
-    var _a, _b, _c, _d;
+    var _a;
     const result = /* @__PURE__ */ new Map();
     for (const [propName, propAnim] of Object.entries(animDef)) {
-      const keyframes = propAnim.kfs || propAnim.keyframes || [];
+      const duration = config.duration || 1;
+      const clippedKeyframes = clipKeyframesToDuration(propName, propAnim.kfs || propAnim.keyframes || [], duration);
       const cssKeyframes = [];
-      for (const kf of keyframes) {
-        let t = (_b = (_a = kf.t) != null ? _a : kf.time) != null ? _b : 0;
-        t = clamp(t / (config.duration || 1), 0, 1);
-        let value = (_c = kf.v) != null ? _c : kf.value;
-        const e = (_d = kf.e) != null ? _d : kf.easing;
-        const cssKf = {
-          offset: t,
-          easing: e && Array.isArray(e) ? "cubic-bezier(" + e.join(",") + ")" : void 0
-        };
-        let cssValue;
-        let cssKey = propName;
-        if (COLOUR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
-          cssValue = toRGBA(value);
-        } else if (TRANSFORM_FN_NAMES.has(propName)) {
-          if (Array.isArray(value)) {
-            if (propName === "translate") value = value.map((v) => v + "px");
-            value = value.join(",");
-          }
-          if (propName === "rotate") value = value + "deg";
-          cssValue = propName + "(" + value + ")";
-          cssKey = "transform";
-        } else {
-          cssValue = "" + value;
+      for (let i = 0; i < clippedKeyframes.length; i++) {
+        const kf = clippedKeyframes[i];
+        const t = clamp(((_a = kf.t) != null ? _a : 0) / duration, 0, 1);
+        const cssKf = createCssKf(kf, t, propName, unsupportedSet);
+        if (i === 0 && (cssKf.offset || 0) > 0) {
+          cssKeyframes.push(__spreadProps(__spreadValues({}, cssKf), { offset: 0 }));
         }
-        if (!CSS.supports(cssKey, cssValue)) unsupportedSet.add(cssKey);
-        cssKey = kebabToCamelCaseWord(cssKey);
-        cssKf[cssKey] = cssValue;
         cssKeyframes.push(cssKf);
       }
+      if (cssKeyframes.length > 0 && (cssKeyframes[cssKeyframes.length - 1].offset || 0) < 1) {
+        cssKeyframes.push(__spreadProps(__spreadValues({}, cssKeyframes[cssKeyframes.length - 1]), {
+          offset: 1
+        }));
+      }
       if (cssKeyframes.length > 0) {
         result.set(propName, cssKeyframes);
       }
@@ -2846,6 +4642,7 @@ var PixodeskAnimatorReact = (() => {
     return result;
   }
   function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsupportedAttrs) {
+    var _a;
     const config = getAnimatorConfig(doc) || {};
     const bindings = getNormalisedBindings(doc);
     if (!rootElement) {
@@ -2878,29 +4675,33 @@ var PixodeskAnimatorReact = (() => {
         console.warn('createWebApiAnimator: No elements found for selector "' + selector + '"');
       }
       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;
+      const effectOptions = {
+        duration: config.duration,
+        delay: positiveDelay,
+        // Default to 'forwards' so elements hold their final state after the
+        // animation ends — consistent with Lottie and other animation runtimes.
+        // Without this, seeking to the last frame reverts elements to their
+        // pre-animation state (the Web Animations API "after" phase with fill:'none').
+        fill: (_a = config.fill) != null ? _a : "forwards",
+        direction: config.direction,
+        iterations
+      };
       for (let i = 0; i < elements.length; i++) {
         const element = elements[i];
-        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;
-        const effectOptions = {
-          duration: config.duration,
-          delay: positiveDelay,
-          fill: config.fill,
-          direction: config.direction,
-          iterations
-        };
         for (const [, keyframes] of keyframesMap) {
           if (keyframes.length > 0) {
             try {
               const effect = new KeyframeEffect(element, keyframes, effectOptions);
               const anim = new Animation(effect, document.timeline);
               if (callbacks == null ? void 0 : callbacks.onFinish) anim.onfinish = () => {
-                var _a;
-                return (_a = callbacks.onFinish) == null ? void 0 : _a.call(callbacks);
+                var _a2;
+                return (_a2 = callbacks.onFinish) == null ? void 0 : _a2.call(callbacks);
               };
               if (callbacks == null ? void 0 : callbacks.onRemove) anim.onremove = () => {
-                var _a;
-                return (_a = callbacks.onRemove) == null ? void 0 : _a.call(callbacks);
+                var _a2;
+                return (_a2 = callbacks.onRemove) == null ? void 0 : _a2.call(callbacks);
               };
               if (seekPosition) {
                 anim.currentTime = seekPosition;
@@ -2921,34 +4722,47 @@ var PixodeskAnimatorReact = (() => {
       "isReady": () => true,
       "getRootElement": () => rootElement || null,
       "isPlaying": () => {
-        var _a;
-        return ((_a = animations[0]) == null ? void 0 : _a.playState) === "running";
+        var _a2;
+        return ((_a2 = animations[0]) == null ? void 0 : _a2.playState) === "running";
       },
       "play": () => {
-        var _a;
+        var _a2;
         animations.forEach((a) => a.play());
-        (_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;
         animations.forEach((a) => a.pause());
-        (_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": () => {
-        var _a;
+        var _a2;
         animations.forEach((a) => a.cancel());
-        (_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);
       },
       "finish": () => {
-        animations.forEach((a) => a.finish());
+        var _a2;
+        for (const a of animations) {
+          try {
+            if (((_a2 = a.effect) == null ? void 0 : _a2.getTiming().iterations) === Infinity) {
+              a.effect.updateTiming({ iterations: 1 });
+              a.finish();
+              a.effect.updateTiming({ iterations: Infinity });
+            } else {
+              a.finish();
+            }
+          } catch (e) {
+            a.cancel();
+          }
+        }
       },
       "setPlaybackRate": (rate) => {
         animations.forEach((a) => a.playbackRate = rate);
         return api;
       },
       "getCurrentTime": () => {
-        var _a, _b;
-        const res = (_b = (_a = animations[0]) == null ? void 0 : _a.currentTime) != null ? _b : null;
+        var _a2, _b;
+        const res = (_b = (_a2 = animations[0]) == null ? void 0 : _a2.currentTime) != null ? _b : null;
         return res !== null ? +res : null;
       },
       "setCurrentTime": (time) => {
@@ -3003,6 +4817,7 @@ var PixodeskAnimatorReact = (() => {
     return cloned;
   }
   function generateNewIds(doc) {
+    var _a, _b;
     const cloned = deepClone(doc);
     const idMap = /* @__PURE__ */ new Map();
     const hashRefAttrs = /* @__PURE__ */ new Set(["href", "xlink:href"]);
@@ -3028,6 +4843,8 @@ var PixodeskAnimatorReact = (() => {
         const newId = generateUniqueId();
         idMap.set(oldId, newId);
         node.id = newId;
+      } else if (node.animate) {
+        node.id = generateUniqueId();
       }
       if (Array.isArray(node.children)) {
         for (const child of node.children) {
@@ -3069,23 +4886,21 @@ var PixodeskAnimatorReact = (() => {
               value[styleProp] = replaceUrlRefs(styleValue, idMap);
             }
           }
-        } else if (typeof value === "object" && value !== null && key !== "animate") {
+        } else if (typeof value === "object" && value !== null) {
           updateRefs(value);
         }
       }
     }
     collectIds(cloned);
     updateRefs(cloned);
-    const docBindings = cloned.bindings;
-    if (Array.isArray(docBindings)) {
-      for (const binding of docBindings) {
-        if (binding.id) {
-          const newId = idMap.get(binding.id);
-          if (newId) {
-            binding.id = newId;
-          }
-        }
+    const docAnimate = (_a = cloned.animator) == null ? void 0 : _a.animate;
+    if (docAnimate && typeof docAnimate === "object") {
+      const updatedAnimate = {};
+      for (const [id, anim] of Object.entries(docAnimate)) {
+        const newId = (_b = idMap.get(id)) != null ? _b : id;
+        updatedAnimate[newId] = anim;
       }
+      cloned.animator = __spreadProps(__spreadValues({}, cloned.animator), { animate: updatedAnimate });
     }
     return cloned;
   }
@@ -3096,6 +4911,9 @@ var PixodeskAnimatorReact = (() => {
     });
   }
   function createAnimatorImpl(doc, adapter, callbacks, containerElement) {
+    const effectsWarnings = validateNodeEffects(doc);
+    for (const w of effectsWarnings) console.warn("[PxAnimator] effects shape warning:", w);
+    doc = applyPlayerEffects(doc).root;
     const animatorConfig = getAnimatorConfig(doc) || {};
     animatorConfig.debug = true;
     let rootElement = null;
@@ -3111,14 +4929,21 @@ var PixodeskAnimatorReact = (() => {
     }
     return createAnimatorFromConfig(doc, adapter, callbacks, rootElement);
   }
-  function createAnimator(docOrUrl, adapter, callbacks, containerElement) {
-    if (typeof docOrUrl === "object") {
-      return createAnimatorImpl(docOrUrl, adapter, callbacks, containerElement);
+  function createAnimator(options) {
+    const { src, data, adapter, callbacks, container } = options;
+    if (data !== void 0 && src !== void 0) {
+      throw new Error("createAnimator: provide either `src` or `data`, not both");
+    }
+    if (data === void 0 && src === void 0) {
+      throw new Error("createAnimator: either `src` or `data` is required");
+    }
+    if (data !== void 0) {
+      return createAnimatorImpl(data, adapter, callbacks, container);
     }
     let animator = null;
-    fetch(docOrUrl).then((res) => res.json()).then((json) => {
+    fetch(src).then((res) => res.json()).then((json) => {
       if (isPxElementFileFormat(json)) {
-        animator = createAnimatorImpl(json, adapter, callbacks, containerElement);
+        animator = createAnimatorImpl(json, adapter, callbacks, container);
       } else {
         console.error("Invalid animation document format");
       }
@@ -3158,7 +4983,7 @@ var PixodeskAnimatorReact = (() => {
       if (!element[PX_ANIM_ATTR_NAME]) {
         const src = element.getAttribute(PX_ANIM_SRC_ATTR_NAME);
         if (src) {
-          element[PX_ANIM_ATTR_NAME] = createAnimator(src, void 0, void 0, element);
+          element[PX_ANIM_ATTR_NAME] = createAnimator({ src, container: element });
         }
       }
     }
@@ -3284,7 +5109,7 @@ var PixodeskAnimatorReact = (() => {
     };
     const root = doc ? renderNode2(doc) : null;
     (0, import_react2.useEffect)(() => {
-      let api = createAnimator(doc, createReactAdapter(elementRefs));
+      let api = createAnimator({ data: doc, adapter: createReactAdapter(elementRefs) });
       apiHolderRef.current = api;
       return () => {
         api?.destroy();
@@ -3431,6 +5256,41 @@ var PixodeskAnimatorReact = (() => {
     );
   };
   var PixodeskSvgAnimator_default = PixodeskSvgAnimator;
+
+  // src/PixodeskSvgCssAnimator.tsx
+  var import_react3 = __toESM(require_react(), 1);
+  var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
+  var PixodeskSvgCssAnimator = ({ className, style, children, startOn = "load", outAction = "continue" }) => {
+    const [state, setState] = (0, import_react3.useState)(startOn === "load" ? "playing" : "idle");
+    const ref = (0, import_react3.useRef)(null);
+    (0, import_react3.useEffect)(() => {
+      if (startOn !== "scrollIntoView") return;
+      const el = ref.current;
+      if (!el) return;
+      const outState = outAction === "reset" ? "idle" : outAction === "pause" ? "paused" : "playing";
+      const observer = new IntersectionObserver(
+        ([entry]) => setState(entry.isIntersecting ? "playing" : outState),
+        { threshold: 0.1 }
+      );
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, [startOn, outAction]);
+    const goOut = () => setState(
+      outAction === "reset" ? "idle" : outAction === "pause" ? "paused" : "playing"
+    );
+    const handlers = startOn === "mouseOver" ? { onMouseEnter: () => setState("playing"), onMouseLeave: goOut } : startOn === "click" ? { onClick: () => state === "playing" ? goOut() : setState("playing") } : {};
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        ref,
+        className: className + (state === "playing" ? "px-anim-enabled px-anim-playing" : state === "paused" ? "px-anim-enabled" : ""),
+        style,
+        ...handlers,
+        children
+      }
+    );
+  };
+  var PixodeskSvgCssAnimator_default = PixodeskSvgCssAnimator;
   return __toCommonJS(index_exports);
 })();
 /*! Bundled license information: