@pixodesk/svg-animator-web 1.0.10 → 1.0.16

package/dist/index.cjs

@@ -50,17 +50,58 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   COLOUR_ATTR_NAMES: () => COLOUR_ATTR_NAMES,
+  PX_ANIMATOR_DATA_KEY: () => PX_ANIMATOR_DATA_KEY,
   PX_ANIM_ATTR_NAME: () => PX_ANIM_ATTR_NAME,
   PX_ANIM_SRC_ATTR_NAME: () => PX_ANIM_SRC_ATTR_NAME,
+  PX_TRANSFORM_PART_KEYS: () => PX_TRANSFORM_PART_KEYS,
+  PxAnimatedSvgDocumentSchema: () => PxAnimatedSvgDocumentSchema,
+  PxAnimationDefinitionSchema: () => PxAnimationDefinitionSchema,
+  PxAnimatorConfigSchema: () => PxAnimatorConfigSchema,
+  PxAnimatorEngine: () => PxAnimatorEngine,
+  PxAnimatorMode: () => PxAnimatorMode,
+  PxAttrValueSchema: () => PxAttrValueSchema,
+  PxBezierPathSchema: () => PxBezierPathSchema,
+  PxBindingSchema: () => PxBindingSchema,
+  PxDefsSchema: () => PxDefsSchema,
+  PxEasingOrRefSchema: () => PxEasingOrRefSchema,
+  PxEffectsSchema: () => PxEffectsSchema,
+  PxElementAnimationSchema: () => PxElementAnimationSchema,
+  PxFillGradientEffectSchema: () => PxFillGradientEffectSchema,
+  PxGradientSpreadMethod: () => PxGradientSpreadMethod,
+  PxGradientStopSchema: () => PxGradientStopSchema,
+  PxGradientType: () => PxGradientType,
+  PxGradientUnits: () => PxGradientUnits,
+  PxKeyframeSchema: () => PxKeyframeSchema,
+  PxLoopSchema: () => PxLoopSchema,
+  PxMaskedByEffectSchema: () => PxMaskedByEffectSchema,
+  PxNodeBase: () => PxNodeBase,
+  PxNodeSchema: () => PxNodeSchema,
+  PxPropertyAnimationSchema: () => PxPropertyAnimationSchema,
+  PxRefEffectSchema: () => PxRefEffectSchema,
+  PxRepeaterEffectSchema: () => PxRepeaterEffectSchema,
+  PxRetimeEffectSchema: () => PxRetimeEffectSchema,
+  PxStrokeGradientEffectSchema: () => PxStrokeGradientEffectSchema,
+  PxSvgNodeExtra: () => PxSvgNodeExtra,
+  PxTextAlongPathEffectSchema: () => PxTextAlongPathEffectSchema,
+  PxTransformPartsSchema: () => PxTransformPartsSchema,
+  PxTransformValueSchema: () => PxTransformValueSchema,
+  PxTransformationEffectSchema: () => PxTransformationEffectSchema,
+  PxTriggerSchema: () => PxTriggerSchema,
+  PxTrimPathEffectSchema: () => PxTrimPathEffectSchema,
   STYLE_ATTR_NAMES: () => STYLE_ATTR_NAMES,
   TRANSFORM_FN_NAMES: () => TRANSFORM_FN_NAMES,
+  applyPlayerEffects: () => applyPlayerEffects,
   calcAnimationValues: () => calcAnimationValues,
   camelCaseToKebabWordIfNeeded: () => camelCaseToKebabWordIfNeeded,
+  collectSampleTimes: () => collectSampleTimes,
   createAnimator: () => createAnimator,
   createAnimatorImpl: () => createAnimatorImpl,
   createBasicFrameLoopAnimator: () => createBasicFrameLoopAnimator,
   createFrameLoopAnimator: () => createFrameLoopAnimator,
   createWebApiAnimator: () => createWebApiAnimator,
+  describeSchema: () => describeSchema,
+  diffInEffect: () => diffInEffect,
+  evaluateMotionPathSegment: () => evaluateMotionPathSegment,
   generateNewIds: () => generateNewIds,
   getAnimatorConfig: () => getAnimatorConfig,
   getBindings: () => getBindings,
@@ -70,288 +111,1088 @@ __export(index_exports, {
   isPxElementFileFormat: () => isPxElementFileFormat,
   isPxElementFileFormatDeep: () => isPxElementFileFormatDeep,
   loadTagAnimators: () => loadTagAnimators,
+  materialiseAllInTree: () => materialiseAllInTree,
+  materialiseAnimatedUseInstances: () => materialiseAnimatedUseInstances,
+  materialiseInternalLoopsInPropAnim: () => materialiseInternalLoopsInPropAnim,
+  materialiseInternalLoopsInTree: () => materialiseInternalLoopsInTree,
+  materialiseMotionPathInPropAnim: () => materialiseMotionPathInPropAnim,
+  materialiseMotionPathsInTree: () => materialiseMotionPathsInTree,
   normalizeDocument: () => getNormalisedBindings,
+  propAnimIsMotionPath: () => propAnimIsMotionPath,
+  px: () => px,
   renderNode: () => renderNode,
+  schemaKeys: () => schemaKeys,
   setupAnimationTriggers: () => setupAnimationTriggers,
-  toRGBA: () => toRGBA
+  toRGBA: () => toRGBA,
+  validateNodeEffects: () => validateNodeEffects,
+  visualModelAt: () => visualModelAt
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/PxAnimatorTypes.ts
-var PX_ANIM_SRC_ATTR_NAME = "data-px-animation-src";
-var PX_ANIM_ATTR_NAME = "_px_animator";
-var ANIMATE_ATTR = "animate";
-var TEXT_ATTR = "text";
-var TEXT_CONTENT_ATTR = "textContent";
-var INTERNAL_ATTRS = /* @__PURE__ */ new Set([
-  "type",
-  "children",
-  ANIMATE_ATTR,
-  "animator",
-  "meta",
-  "defs",
-  "bindings",
-  TEXT_ATTR,
-  TEXT_CONTENT_ATTR
-]);
-function isPxElementFileFormat(fileJson) {
-  if (!(fileJson && typeof fileJson === "object" && !Array.isArray(fileJson))) {
-    return false;
+// src/effects/transformParts.ts
+function partsRecord(part, value, origin) {
+  const rec = {};
+  if (part === "translate" /* Translate */) rec.translate = value;
+  else if (part === "rotate" /* Rotate */) rec.rotate = value;
+  else rec.scale = value;
+  if (origin && part !== "translate" /* Translate */) rec.origin = origin;
+  return rec;
+}
+function readAnimatable(raw) {
+  if (raw === void 0) return { kind: "absent" /* Absent */ };
+  if (Array.isArray(raw)) return { kind: "static" /* Static */, value: raw };
+  if (typeof raw === "object") {
+    const obj = raw;
+    if (obj.keyframes) {
+      return { kind: "animated" /* Animated */, keyframes: obj.keyframes, autoOrient: obj.autoOrient };
+    }
+    if (obj.value !== void 0) return { kind: "static" /* Static */, value: obj.value };
   }
-  return fileJson["type"] === "svg" || fileJson["tagName"] === "svg";
+  return { kind: "static" /* Static */, value: raw };
 }
-function isObject(v) {
-  return v && typeof v === "object" && !Array.isArray(v);
+function readStaticOrigin(raw, ctx) {
+  var _a;
+  const o = readAnimatable(raw);
+  if (o.kind === "absent" /* Absent */) return void 0;
+  if (o.kind === "static" /* 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 validateFillMode(v, path, errors) {
-  if (v === "forwards" || v === "backwards" || v === "both" || v === "none") return true;
-  errors.push(path + ': invalid FillMode "' + v + `", expected 'forwards'|'backwards'|'both'|'none'`);
-  return false;
+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 validatePlaybackDirection(v, path, errors) {
-  if (v === "normal" || v === "reverse" || v === "alternate" || v === "alternate-reverse") return true;
-  errors.push(path + ': invalid PlaybackDirection "' + v + `", expected 'normal'|'reverse'|'alternate'|'alternate-reverse'`);
-  return false;
+
+// src/effects/transformationEffect.ts
+function applyTransformationEffect(node, fx, ctx) {
+  if (!fx) return node;
+  delete node.transform;
+  let n = node;
+  n = wrapTransformPart(n, "skew" /* Skew */, fx.skew, ctx);
+  n = wrapOrigin(
+    n,
+    fx.origin,
+    /*invert=*/
+    true
+  );
+  n = wrapTransformPart(n, "scale" /* Scale */, normalizeScale(fx.scale), ctx);
+  n = wrapTransformPart(n, "rotate" /* 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" /* Translate */, fx.translate, ctx);
+    n = wrapOrigin(
+      n,
+      fx.origin,
+      /*invert=*/
+      false
+    );
+  } else {
+    n = wrapTransformPart(n, "translate" /* Translate */, fx.translate, ctx);
+  }
+  return n;
 }
-function validatePxEasingOrRef(v, path, errors) {
-  if (typeof v === "string") return true;
-  if (Array.isArray(v) && v.length === 4 && v.every((n) => typeof n === "number")) return true;
-  errors.push(path + ": invalid easing, expected string or [number, number, number, number]");
-  return false;
+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 validatePxKeyframe(v, path, errors) {
-  if (!isObject(v)) {
-    errors.push(path + ": expected object");
-    return false;
+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" /* Skew */) {
+    const skew = readAnimatable(raw);
+    if (skew.kind !== "static" /* 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] };
   }
-  let valid = true;
-  if (v.time !== void 0 && typeof v.time !== "number") {
-    errors.push(path + ".time: expected number, got " + typeof v.time);
-    valid = false;
+  const v = readAnimatable(raw);
+  if (v.kind === "static" /* Static */) {
+    return { type: "g", transform: { value: partsRecord(part, v.value, void 0) }, children: [inner] };
   }
-  if (v.t !== void 0 && typeof v.t !== "number") {
-    errors.push(path + ".t: expected number, got " + typeof v.t);
-    valid = false;
+  if (v.kind === "animated" /* 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]
+    };
   }
-  if (v.easing !== void 0 && !validatePxEasingOrRef(v.easing, path + ".easing", errors)) valid = false;
-  if (v.e !== void 0 && !validatePxEasingOrRef(v.e, path + ".e", errors)) valid = false;
-  return valid;
+  return inner;
 }
-function validatePxPropertyAnimation(v, path, errors) {
-  if (!isObject(v)) {
-    errors.push(path + ": expected object");
-    return false;
+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" /* Absent */) return inner;
+  if (v.kind === "static" /* Static */) {
+    if (v.value[0] === 0 && v.value[1] === 0) return inner;
+    return { type: "g", transform: { value: { translate: sign(v.value) } }, children: [inner] };
   }
-  let valid = true;
-  if (v.keyframes !== void 0) {
-    if (!Array.isArray(v.keyframes)) {
-      errors.push(path + ".keyframes: expected array");
-      valid = false;
-    } else {
-      v.keyframes.forEach((kf, i) => {
-        if (!validatePxKeyframe(kf, path + ".keyframes[" + i + "]", errors)) valid = false;
-      });
+  if (v.kind === "animated" /* Animated */) {
+    return {
+      type: "g",
+      animate: { transform: { keyframes: v.keyframes.map((kf) => keyframeWith(kf, { translate: sign(kf.value) })) } },
+      children: [inner]
+    };
+  }
+  return inner;
+}
+
+// src/effects/contentRefSplit.ts
+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));
     }
   }
-  if (v.kfs !== void 0) {
-    if (!Array.isArray(v.kfs)) {
-      errors.push(path + ".kfs: expected array");
-      valid = false;
-    } else {
-      v.kfs.forEach((kf, i) => {
-        if (!validatePxKeyframe(kf, path + ".kfs[" + i + "]", errors)) valid = false;
+  (_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, _b, _c;
+  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;
+  const liftedAnimateIsAutoOriented = didLiftAnimate && needsOriginOnOuter(((_b = node.animate) == null ? void 0 : _b.transform) || void 0) || didLiftAnimate && needsOriginOnOuter(((_c = out.animate) == null ? void 0 : _c.transform) || void 0);
+  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 (liftedAnimateIsAutoOriented && isSingleMatrixBody(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 valid;
+  return out;
 }
-function validatePxAnimationDefinition(v, path, errors) {
-  if (!isObject(v)) {
-    errors.push(path + ": expected object");
-    return false;
+function isSingleMatrixBody(s) {
+  const re = /(translate|rotate|scale|matrix|skewX|skewY)\(([^)]*)\)/g;
+  let count = 0;
+  let isMatrix = false;
+  let m;
+  while (m = re.exec(s)) {
+    count++;
+    if (m[1] === "matrix") isMatrix = true;
+  }
+  return count === 1 && isMatrix;
+}
+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("") };
   }
-  let valid = true;
-  for (const key of Object.keys(v)) {
-    if (!validatePxPropertyAnimation(v[key], path + "." + key, errors)) valid = false;
+  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 };
   }
-  return valid;
+  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 validatePxElementAnimation(v, path, errors) {
-  if (typeof v === "string") return true;
-  if (Array.isArray(v)) {
-    let valid = true;
-    v.forEach((item, i) => {
-      if (typeof item !== "string" && !validatePxAnimationDefinition(item, path + "[" + i + "]", errors)) {
-        valid = false;
-      }
-    });
-    return valid;
+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);
   }
-  if (isObject(v)) return validatePxAnimationDefinition(v, path, errors);
-  errors.push(path + ": expected string, array, or PxAnimationDefinition object");
   return false;
 }
-function validatePxTrigger(v, path, errors) {
-  if (!isObject(v)) {
-    errors.push(path + ": expected object");
+
+// src/PxSchema.ts
+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;
   }
-  let valid = true;
-  const validStartOn = ["load", "mouseOver", "click", "scrollIntoView", "programmatic"];
-  if (!validStartOn.includes(v.startOn)) {
-    errors.push(path + '.startOn: invalid value "' + v.startOn + '", expected ' + validStartOn.join("|"));
-    valid = false;
+};
+var Num = class extends Base {
+  constructor(_default = 0) {
+    super();
+    this._default = _default;
+  }
+  sanitize(raw) {
+    return typeof raw === "number" && isFinite(raw) ? raw : this._default;
   }
-  if (v.outAction !== void 0) {
-    const validOutAction = ["continue", "pause", "reset", "reverse"];
-    if (!validOutAction.includes(v.outAction)) {
-      errors.push(path + '.outAction: invalid value "' + v.outAction + '", expected ' + validOutAction.join("|"));
-      valid = false;
-    }
+  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;
   }
-  if (v.scrollIntoViewThreshold !== void 0 && typeof v.scrollIntoViewThreshold !== "number") {
-    errors.push(path + ".scrollIntoViewThreshold: expected number, got " + typeof v.scrollIntoViewThreshold);
-    valid = false;
+  sanitize(raw) {
+    return typeof raw === "boolean" ? raw : this._default;
   }
-  return valid;
-}
-function validatePxAnimatorConfig(v, path, errors) {
-  if (!isObject(v)) {
-    errors.push(path + ": expected object");
+  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;
   }
-  let valid = true;
-  if (v.mode !== void 0 && !["auto", "webapi", "frames"].includes(v.mode)) {
-    errors.push(path + '.mode: invalid value "' + v.mode + `", expected 'auto'|'webapi'|'frames'`);
-    valid = false;
+};
+var Literal = class extends Base {
+  constructor(value) {
+    super();
+    this.value = value;
+    this._default = value;
   }
-  if (v.duration !== void 0 && typeof v.duration !== "number") {
-    errors.push(path + ".duration: expected number, got " + typeof v.duration);
-    valid = false;
+  sanitize(raw) {
+    return raw === this.value ? this.value : this._default;
   }
-  if (v.delay !== void 0 && typeof v.delay !== "number") {
-    errors.push(path + ".delay: expected number, got " + typeof v.delay);
-    valid = false;
+  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;
   }
-  if (v.iterations !== void 0 && typeof v.iterations !== "number" && v.iterations !== "infinite") {
-    errors.push(path + ".iterations: expected number or 'infinite', got " + typeof v.iterations);
-    valid = false;
+};
+var Enum = class extends Base {
+  constructor(values, defaultVal) {
+    super();
+    this.values = values;
+    this._default = defaultVal != null ? defaultVal : values[0];
   }
-  if (v.fill !== void 0 && !validateFillMode(v.fill, path + ".fill", errors)) valid = false;
-  if (v.direction !== void 0 && !validatePlaybackDirection(v.direction, path + ".direction", errors)) valid = false;
-  if (v.frameRate !== void 0 && typeof v.frameRate !== "number") {
-    errors.push(path + ".frameRate: expected number, got " + typeof v.frameRate);
-    valid = false;
+  sanitize(raw) {
+    return this.values.includes(raw) ? raw : this._default;
   }
-  if (v.trigger !== void 0 && !validatePxTrigger(v.trigger, path + ".trigger", errors)) valid = false;
-  return valid;
-}
-function validatePxDefs(v, path, errors) {
-  if (!isObject(v)) {
-    errors.push(path + ": expected object");
+  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;
   }
-  let valid = true;
-  if (v.easings !== void 0) {
-    if (!isObject(v.easings)) {
-      errors.push(path + ".easings: expected object");
-      valid = false;
-    } else {
-      for (const key of Object.keys(v.easings)) {
-        if (!validatePxEasingOrRef(v.easings[key], path + ".easings." + key, errors)) valid = 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;
   }
-  if (v.animations !== void 0) {
-    if (!isObject(v.animations)) {
-      errors.push(path + ".animations: expected object");
-      valid = false;
-    } else {
-      for (const key of Object.keys(v.animations)) {
-        if (!validatePxAnimationDefinition(v.animations[key], path + ".animations." + key, errors)) valid = false;
+  _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;
   }
-  if (v.styles !== void 0 && !isObject(v.styles)) {
-    errors.push(path + ".styles: expected object");
-    valid = false;
+  _canSanitize(raw) {
+    return !!raw && typeof raw === "object" && !Array.isArray(raw);
   }
-  return valid;
-}
-function validatePxBinding(v, path, errors) {
-  if (!isObject(v)) {
-    errors.push(path + ": expected object");
-    return false;
+};
+var Arr = class extends Base {
+  constructor(item) {
+    super();
+    this.item = item;
+    this._default = [];
   }
-  let valid = true;
-  if (typeof v.id !== "string") {
-    errors.push(path + ".id: expected string, got " + typeof v.id);
-    valid = false;
+  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;
   }
-  if (!validatePxElementAnimation(v.animate, path + ".animate", errors)) valid = false;
-  return valid;
-}
-function validatePxNode(v, path, errors) {
-  if (!isObject(v)) {
-    errors.push(path + ": expected object");
-    return false;
+  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;
   }
-  let valid = true;
-  if (typeof v.type !== "string") {
-    errors.push(path + ".type: expected string, got " + typeof v.type);
-    valid = false;
+  _canSanitize(raw) {
+    return Array.isArray(raw);
   }
-  if (v.children !== void 0) {
-    if (!Array.isArray(v.children)) {
-      errors.push(path + ".children: expected array");
-      valid = false;
-    } else {
-      v.children.forEach((child, i) => {
-        if (!validatePxNode(child, path + ".children[" + i + "]", errors)) valid = false;
-      });
+};
+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;
   }
-  if (v.animate !== void 0 && !validatePxElementAnimation(v.animate, path + ".animate", errors)) valid = false;
-  return valid;
-}
-function validatePxSvgNode(v, path, errors) {
-  if (!validatePxNode(v, path, errors)) return false;
-  let valid = true;
-  if (v.type !== "svg") {
-    errors.push(path + ".type: expected 'svg', got '" + v.type + "'");
-    valid = false;
+  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;
   }
-  if (v.width !== void 0 && typeof v.width !== "number") {
-    errors.push(path + ".width: expected number, got " + typeof v.width);
-    valid = false;
+  _canSanitize(raw) {
+    return !!raw && typeof raw === "object" && !Array.isArray(raw);
   }
-  if (v.height !== void 0 && typeof v.height !== "number") {
-    errors.push(path + ".height: expected number, got " + typeof v.height);
-    valid = false;
+};
+var Any = class extends Base {
+  constructor() {
+    super(...arguments);
+    this._default = void 0;
   }
-  if (v.viewBox !== void 0 && typeof v.viewBox !== "string") {
-    errors.push(path + ".viewBox: expected string, got " + typeof v.viewBox);
-    valid = false;
+  sanitize(raw) {
+    return raw;
   }
-  if (v.animator !== void 0 && !validatePxAnimatorConfig(v.animator, path + ".animator", errors)) valid = false;
-  if (v.defs !== void 0 && !validatePxDefs(v.defs, path + ".defs", errors)) valid = false;
-  if (v.bindings !== void 0) {
-    if (!Array.isArray(v.bindings)) {
-      errors.push(path + ".bindings: expected array");
-      valid = false;
-    } else {
-      v.bindings.forEach((binding, i) => {
-        if (!validatePxBinding(binding, path + ".bindings[" + i + "]", errors)) valid = false;
-      });
+  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;
+}
+function schemaKeys(schema) {
+  return Object.fromEntries(
+    Object.keys(schema["_shape"]).map((k) => [k, k])
+  );
+}
+function describeSchema(schema) {
+  var _a;
+  const s = schema;
+  if ("_shape" in s) return { kind: "shape", shape: s._shape };
+  if ("item" in s) return { kind: "array", item: s.item };
+  if ("inner" in s) return { kind: "optional", inner: s.inner };
+  if ("fn" in s) return { kind: "lazy", resolved: (_a = s.resolved) != null ? _a : s.fn() };
+  return { kind: "leaf" };
+}
+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)
+};
+
+// src/PxAnimatorTypes.ts
+var PX_ANIM_SRC_ATTR_NAME = "data-px-animation-src";
+var PX_ANIM_ATTR_NAME = "_px_animator";
+var PxAnimatorMode = {
+  auto: "auto",
+  webapi: "webapi",
+  frames: "frames"
+};
+var PxAnimatorEngine = {
+  webapi: PxAnimatorMode.webapi,
+  frames: PxAnimatorMode.frames
+};
+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 PX_TRANSFORM_PART_KEYS = ["translate", "rotate", "scale", "origin"];
+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([PxAnimatorMode.auto, PxAnimatorMode.webapi, PxAnimatorMode.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 = implementsInterface()(px.object({
+  translate: PxAnimatableVec2Schema.optional(),
+  rotate: PxAnimatableNumberSchema.optional(),
+  scale: PxAnimatableVec2Schema.optional(),
+  skew: PxAnimatableVec2Schema.optional(),
+  origin: PxAnimatableVec2Schema.optional()
+}));
+var PxRepeaterEffectSchema = implementsInterface()(px.object({
+  copies: px.number().optional(),
+  translate: PxAnimatableVec2Schema.optional(),
+  rotate: PxAnimatableNumberSchema.optional(),
+  scale: PxAnimatableVec2Schema.optional(),
+  origin: PxAnimatableVec2Schema.optional()
+}));
+var PxMaskedByEffectSchema = implementsInterface()(px.object({
+  href: px.string().optional(),
+  maskType: px.string().optional(),
+  maskUnits: px.string().optional(),
+  maskContentUnits: px.string().optional()
+}));
+var PxTrimPathEffectSchema = implementsInterface()(px.object({
+  offset: PxAnimatableNumberSchema.optional(),
+  range: PxAnimatableVec2Schema.optional(),
+  trimAllAsOne: px.boolean().optional()
+}));
+var PxRetimeEffectSchema = implementsInterface()(px.object({
+  baseId: px.string().optional(),
+  start: px.number().optional(),
+  stretch: px.number().optional(),
+  timeCrop: px.tuple([px.number(), px.number()]).optional()
+}));
+var PxRefEffectSchema = implementsInterface()(px.object({
+  baseId: px.string().optional(),
+  type: px.string().optional()
+}));
+var PxGradientUnits = {
+  userSpaceOnUse: "userSpaceOnUse",
+  objectBoundingBox: "objectBoundingBox"
+};
+var PxGradientSpreadMethod = {
+  pad: "pad",
+  reflect: "reflect",
+  repeat: "repeat"
+};
+var PxGradientType = {
+  linear: "linear",
+  radial: "radial"
+};
+var PxGradientStopSchema = implementsInterface()(px.object({
+  offset: px.number(),
+  color: px.string()
+}));
+var PxAnimatableGradientStopsSchema = px.union([
+  px.array(PxGradientStopSchema),
+  px.object({ value: px.array(PxGradientStopSchema) }),
+  px.object({ keyframes: px.array(PxKeyframeSchema) })
+]);
+var PxFillGradientEffectSchema = implementsInterface()(px.object({
+  type: px.enum([PxGradientType.linear, PxGradientType.radial]),
+  p1: px.tuple([px.number(), px.number()]).optional(),
+  p2: px.tuple([px.number(), px.number()]).optional(),
+  c: px.tuple([px.number(), px.number()]).optional(),
+  r: px.number().optional(),
+  fp: px.tuple([px.number(), px.number()]).optional(),
+  stops: PxAnimatableGradientStopsSchema.optional(),
+  gradientUnits: px.string().optional(),
+  spreadMethod: px.string().optional(),
+  gradientTransform: px.string().optional()
+}));
+var PxStrokeGradientEffectSchema = PxFillGradientEffectSchema;
+var PxTextAlongPathEffectSchema = implementsInterface()(px.object({
+  href: px.string(),
+  lengthAdjust: px.string().optional(),
+  method: px.string().optional(),
+  spacing: px.string().optional(),
+  startOffset: PxAnimatableNumberSchema.optional(),
+  textLength: PxAnimatableNumberSchema.optional()
+}));
+var PxEffectsSchema = implementsInterface()(px.object({
+  transformation: PxTransformationEffectSchema.optional(),
+  repeater: PxRepeaterEffectSchema.optional(),
+  maskedBy: PxMaskedByEffectSchema.optional(),
+  trimPath: PxTrimPathEffectSchema.optional(),
+  retime: PxRetimeEffectSchema.optional(),
+  isCombinedShape: px.boolean().optional(),
+  ref: PxRefEffectSchema.optional(),
+  fillGradient: PxFillGradientEffectSchema.optional(),
+  strokeGradient: PxStrokeGradientEffectSchema.optional(),
+  textAlongPath: PxTextAlongPathEffectSchema.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(),
+  // `PxElementAnimation` (not just `PxAnimationDefinition`) — accepts
+  // string ref / array of refs / inline definition / mixed array; mirrors
+  // `animator.animate` map values and what `processNode` resolves at runtime.
+  animate: PxElementAnimationSchema.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;
   }
-  if (v.design !== void 0 && !validatePxNode(v.design, path + ".design", errors)) valid = false;
-  return valid;
+  return fileJson["type"] === "svg" || fileJson["tagName"] === "svg";
 }
 function isPxElementFileFormatDeep(fileJson) {
-  const errors = [];
-  const valid = validatePxSvgNode(fileJson, "root", errors);
-  return { valid, errors };
+  const valid = PxAnimatedSvgDocumentSchema.isValid(fileJson);
+  return { valid, errors: valid ? [] : ["Document failed schema validation"] };
 }
 function getAnimatorConfig(doc) {
   var _a, _b;
@@ -360,59 +1201,846 @@ function getAnimatorConfig(doc) {
 function getDefs(doc) {
   var _a;
   if (!doc) return void 0;
-  return doc.defs || ((_a = doc.meta) == null ? void 0 : _a.defs);
+  return (_a = getAnimatorConfig(doc)) == null ? void 0 : _a.definitions;
 }
 function getBindings(doc) {
   var _a;
   if (!doc) return void 0;
-  return doc.bindings || ((_a = doc.meta) == null ? void 0 : _a.bindings);
+  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 getChildren(doc) {
   return doc == null ? void 0 : doc.children;
 }
 
-// src/PxAnimatorUtil.ts
-function bezierToSvgPath(path) {
-  var _a, _b, _c, _d;
-  const v = path.v;
-  const i = path.i;
-  const o = path.o;
-  const c = path.c;
-  if (!v.length) return "";
-  const d = [];
-  const len = v.length;
-  d.push("M" + v[0][0] + "," + v[0][1]);
-  for (let idx = 1; idx < len; idx++) {
-    const prevV = v[idx - 1];
-    const prevO = (_a = o == null ? void 0 : o[idx - 1]) != null ? _a : prevV;
-    const currI = (_b = i == null ? void 0 : i[idx]) != null ? _b : v[idx];
-    const currV = v[idx];
-    const isLine = prevO[0] === prevV[0] && prevO[1] === prevV[1] && (currI[0] === currV[0] && currI[1] === currV[1]);
-    if (isLine) {
-      d.push("L" + currV[0] + "," + currV[1]);
-    } else {
-      d.push("C" + prevO[0] + "," + prevO[1] + "," + currI[0] + "," + currI[1] + "," + currV[0] + "," + currV[1]);
+// src/PxNodeCloneUtil.ts
+function deepClonePxNode(value) {
+  if (value === null || typeof value !== "object") return value;
+  if (Array.isArray(value)) return value.map(deepClonePxNode);
+  const out = {};
+  for (const k of Object.keys(value)) out[k] = deepClonePxNode(value[k]);
+  return out;
+}
+function regenerateIdsAndRewriteRefs(root, genId3) {
+  const oldToNew = /* @__PURE__ */ new Map();
+  const walkAssign = (n) => {
+    var _a;
+    if (typeof n.id === "string") {
+      const newId = genId3();
+      oldToNew.set(n.id, newId);
+      n.id = newId;
     }
-  }
-  if (c && len > 0) {
-    const lastV = v[len - 1];
-    const lastO = (_c = o == null ? void 0 : o[len - 1]) != null ? _c : lastV;
-    const firstI = (_d = i == null ? void 0 : i[0]) != null ? _d : v[0];
-    const firstV = v[0];
-    const isLine = lastO[0] === lastV[0] && lastO[1] === lastV[1] && (firstI[0] === firstV[0] && firstI[1] === firstV[1]);
-    if (!isLine) {
-      d.push("C" + lastO[0] + "," + lastO[1] + "," + firstI[0] + "," + firstI[1] + "," + firstV[0] + "," + firstV[1]);
+    (_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;
     }
-    d.push("z");
-  }
-  return d.join("");
+    for (const k of Object.keys(n)) {
+      if (k === "children" || k === "effects" || k === "meta" || k === "animate" || 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 interpolateNum(a, b, t) {
-  return a + (b - a) * t;
+function toFiniteNum(v) {
+  const n = typeof v === "number" ? v : typeof v === "string" ? parseFloat(v) : NaN;
+  return Number.isFinite(n) ? n : 0;
 }
-function interpolateVec(a, b, t) {
-  const res = [];
-  const count = Math.max(a.length, b.length);
+function applyUseOffsetToG(gNode) {
+  var _a;
+  const x = toFiniteNum(gNode.x);
+  const y = toFiniteNum(gNode.y);
+  delete gNode.x;
+  delete gNode.y;
+  if (!x && !y) return gNode;
+  const offset = "translate(" + x + "," + y + ")";
+  const carriesTransform = gNode.transform !== void 0 || gNode.animate !== void 0;
+  if (carriesTransform) {
+    const inner = { type: "g", transform: offset, children: (_a = gNode.children) != null ? _a : [] };
+    gNode.children = [inner];
+  } else {
+    gNode.transform = offset;
+  }
+  return gNode;
+}
+
+// src/effects/util.ts
+function genId(ctx, prefix) {
+  return "_lw_" + prefix + "_" + ctx.nextId++;
+}
+function stripHash(href) {
+  return typeof href === "string" ? href.replace(/^#/, "") : void 0;
+}
+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 });
+}
+var clone = deepClonePxNode;
+function regenerateIdsInClone(root, ctx) {
+  return regenerateIdsAndRewriteRefs(root, () => genId(ctx, "retimed"));
+}
+
+// src/effects/gradientEffect.ts
+function applyFillGradientEffect(node, fx, ctx) {
+  return applyGradient(node, fx, ctx, "fill");
+}
+function applyStrokeGradientEffect(node, fx, ctx) {
+  return applyGradient(node, fx, ctx, "stroke");
+}
+function applyGradient(node, fx, ctx, attr) {
+  if (!fx) return node;
+  const id = genId(ctx, "grad");
+  const def = synthesiseGradientDef(fx, id, ctx);
+  ctx.defs.push(def);
+  node[attr] = "url(#" + id + ")";
+  return node;
+}
+function synthesiseGradientDef(fx, id, ctx) {
+  const out = {
+    type: fx.type === PxGradientType.radial ? "radialGradient" : "linearGradient",
+    id
+  };
+  if (fx.type === PxGradientType.linear) {
+    if (fx.p1) {
+      out.x1 = String(fx.p1[0]);
+      out.y1 = String(fx.p1[1]);
+    }
+    if (fx.p2) {
+      out.x2 = String(fx.p2[0]);
+      out.y2 = String(fx.p2[1]);
+    }
+  } else {
+    if (fx.c) {
+      out.cx = String(fx.c[0]);
+      out.cy = String(fx.c[1]);
+    }
+    if (fx.r !== void 0) out.r = String(fx.r);
+    if (fx.fp) {
+      out.fx = String(fx.fp[0]);
+      out.fy = String(fx.fp[1]);
+    }
+  }
+  if (fx.gradientUnits) out.gradientUnits = fx.gradientUnits;
+  if (fx.spreadMethod) out.spreadMethod = fx.spreadMethod;
+  if (fx.gradientTransform) out.gradientTransform = fx.gradientTransform;
+  out.children = buildStopChildren(fx.stops, ctx);
+  return out;
+}
+function buildStopChildren(stops, ctx) {
+  var _a, _b, _c, _d;
+  if (!stops) return [];
+  if (Array.isArray(stops)) return stops.map(staticStopNode);
+  if (typeof stops === "object" && Array.isArray(stops.value)) {
+    return stops.value.map(staticStopNode);
+  }
+  const animBlock = stops;
+  const kfs = animBlock.keyframes;
+  if (!Array.isArray(kfs) || !kfs.length) return [];
+  let stopCount = 0;
+  for (const kf of kfs) {
+    const v = (_a = kf.value) != null ? _a : kf.v;
+    if (Array.isArray(v) && v.length > stopCount) stopCount = v.length;
+  }
+  if (!stopCount) return [];
+  const firstKfValue = (_b = kfs[0].value) != null ? _b : kfs[0].v;
+  const baselineStops = [];
+  for (let i = 0; i < stopCount; i++) {
+    const s = (_d = (_c = firstKfValue == null ? void 0 : firstKfValue[i]) != null ? _c : prevDefinedStop(kfs, 0, i)) != null ? _d : { offset: i / Math.max(1, stopCount - 1), color: "#000000" };
+    baselineStops.push({ offset: s.offset, color: s.color });
+  }
+  return baselineStops.map((bs, i) => animatedStopNode(bs, kfs, i, ctx));
+}
+function staticStopNode(s) {
+  return {
+    type: "stop",
+    offset: formatOffset(s.offset),
+    stopColor: s.color
+  };
+}
+function animatedStopNode(baseline, kfs, stopIdx, _ctx) {
+  var _a, _b, _c, _d, _e;
+  const colorKfs = [];
+  const offsetKfs = [];
+  let offsetVaries = false;
+  for (const kf of kfs) {
+    const t = (_b = (_a = kf.time) != null ? _a : kf.t) != null ? _b : 0;
+    const arr = (_c = kf.value) != null ? _c : kf.v;
+    const sliced = (_d = arr == null ? void 0 : arr[stopIdx]) != null ? _d : prevDefinedStop(kfs, kfs.indexOf(kf), stopIdx);
+    if (!sliced) continue;
+    const easing = (_e = kf.easing) != null ? _e : kf.e;
+    const colorOut = { time: t, value: sliced.color };
+    if (easing !== void 0) colorOut.easing = easing;
+    colorKfs.push(colorOut);
+    const offsetOut = { time: t, value: sliced.offset };
+    if (easing !== void 0) offsetOut.easing = easing;
+    offsetKfs.push(offsetOut);
+    if (sliced.offset !== baseline.offset) offsetVaries = true;
+  }
+  const stop = {
+    type: "stop",
+    offset: formatOffset(baseline.offset),
+    stopColor: baseline.color
+  };
+  const animate = {};
+  if (colorKfs.length) animate.stopColor = { keyframes: colorKfs };
+  if (offsetVaries && offsetKfs.length) animate.offset = { keyframes: offsetKfs };
+  if (Object.keys(animate).length) stop.animate = animate;
+  return stop;
+}
+function prevDefinedStop(kfs, fromIdx, stopIdx) {
+  var _a, _b;
+  for (let i = fromIdx; i >= 0; i--) {
+    const arr = (_a = kfs[i].value) != null ? _a : kfs[i].v;
+    if (arr == null ? void 0 : arr[stopIdx]) return arr[stopIdx];
+  }
+  for (let i = fromIdx + 1; i < kfs.length; i++) {
+    const arr = (_b = kfs[i].value) != null ? _b : kfs[i].v;
+    if (arr == null ? void 0 : arr[stopIdx]) return arr[stopIdx];
+  }
+  return void 0;
+}
+function formatOffset(o) {
+  const pct = Math.round(o * 1e3) / 10;
+  return pct + "%";
+}
+
+// src/effects/maskedByEffect.ts
+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 };
+  if (transformation) {
+    content = wrapInverseTransform(content, transformation, ctx);
+  } else if (hasAnimateTransform(node)) {
+    content = wrapInverseAnimatedBodyTransform(content, node, ctx);
+  } else {
+    const bodyStatic = readTransformationFromBody(node);
+    if (bodyStatic) content = wrapInverseTransform(content, bodyStatic, ctx);
+  }
+  const includeTargetOwn = transformation === void 0 && !nodeHasBodyTransform(node);
+  content = wrapAncestorChainCompensation(content, node, fx.href, ctx, includeTargetOwn);
+  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" /* Translate */, fx.translate, void 0, ctx);
+  n = wrapInversePart(n, "rotate" /* Rotate */, fx.rotate, origin, ctx);
+  n = wrapInversePart(n, "scale" /* Scale */, fx.scale, origin, ctx);
+  return n;
+}
+function wrapInversePart(inner, part, raw, origin, ctx) {
+  if (raw === void 0) return inner;
+  const normalisedRaw = part === "scale" /* Scale */ && Array.isArray(raw) ? [raw[0] / 100, raw[1] / 100] : raw;
+  const v = readAnimatable(normalisedRaw);
+  if (v.kind === "static" /* Static */) {
+    return { type: "g", transform: { value: partsRecord(part, invertPartValue(part, v.value), origin) }, children: [inner] };
+  }
+  if (v.kind === "animated" /* 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" /* Translate */) return [-value[0], -value[1]];
+  if (part === "rotate" /* Rotate */) return -value;
+  return [1 / value[0], 1 / value[1]];
+}
+function wrapInverseAnimatedBodyTransform(inner, node, _ctx) {
+  var _a;
+  const animate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
+  const animTr = animate == null ? void 0 : animate.transform;
+  const kfs = animTr && typeof animTr === "object" && Array.isArray(animTr.keyframes) ? animTr.keyframes : void 0;
+  if (!kfs || !kfs.length) return inner;
+  const translateKfs = [];
+  const rotateKfs = [];
+  const scaleKfs = [];
+  for (const kf of kfs) {
+    const v = ((_a = kf.value) != null ? _a : kf.v) || {};
+    const baseKf = keyframeWith(kf, void 0);
+    if (Array.isArray(v.translate)) {
+      translateKfs.push(__spreadProps(__spreadValues({}, baseKf), { value: { translate: [-v.translate[0], -v.translate[1]] } }));
+    }
+    if (typeof v.rotate === "number") {
+      const rec = { rotate: -v.rotate };
+      if (Array.isArray(v.origin)) rec.origin = [v.origin[0], v.origin[1]];
+      rotateKfs.push(__spreadProps(__spreadValues({}, baseKf), { value: rec }));
+    }
+    if (Array.isArray(v.scale)) {
+      const rec = { scale: [1 / v.scale[0], 1 / v.scale[1]] };
+      if (Array.isArray(v.origin)) rec.origin = [v.origin[0], v.origin[1]];
+      scaleKfs.push(__spreadProps(__spreadValues({}, baseKf), { value: rec }));
+    }
+  }
+  let n = inner;
+  if (translateKfs.length) n = { type: "g", animate: { transform: { keyframes: translateKfs } }, children: [n] };
+  if (rotateKfs.length) n = { type: "g", animate: { transform: { keyframes: rotateKfs } }, children: [n] };
+  if (scaleKfs.length) n = { type: "g", animate: { transform: { keyframes: scaleKfs } }, children: [n] };
+  return n;
+}
+function nodeHasBodyTransform(node) {
+  if (typeof node.transform === "string") return true;
+  if (node.transform && typeof node.transform === "object") return true;
+  return hasAnimateTransform(node);
+}
+function hasAnimateTransform(node) {
+  const animate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
+  return !!(animate && animate.transform);
+}
+function readTransformationFromBody(node) {
+  if (typeof node.transform === "string") {
+    const parts = parseTransformStringToParts(node.transform);
+    if (!parts) return void 0;
+    const out = {};
+    if (parts.translate) out.translate = parts.translate;
+    if (parts.rotate !== void 0) out.rotate = parts.rotate;
+    if (parts.scale) out.scale = { value: parts.scale };
+    if (parts.origin) out.origin = parts.origin;
+    return Object.keys(out).length ? out : void 0;
+  }
+  return void 0;
+}
+function parseTransformStringToParts(s) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  const re = /([a-zA-Z]+)\s*\(([^)]*)\)/g;
+  let m;
+  const ops = [];
+  while ((m = re.exec(s)) !== null) {
+    const args = m[2].split(/[\s,]+/).filter((a) => a.length > 0).map(Number);
+    ops.push({ name: m[1], args });
+  }
+  if (!ops.length) return void 0;
+  const last = ops[ops.length - 1];
+  if (last.name === "translate") {
+    for (let j = ops.length - 2; j >= 0; j--) {
+      const cand = ops[j];
+      if (cand.name !== "translate") continue;
+      const ox = (_a = cand.args[0]) != null ? _a : 0;
+      const oy = (_b = cand.args[1]) != null ? _b : 0;
+      const lx = (_c = last.args[0]) != null ? _c : 0;
+      const ly = (_d = last.args[1]) != null ? _d : 0;
+      if (lx !== -ox || ly !== -oy) continue;
+      const out2 = {};
+      out2.origin = [ox, oy];
+      for (let k = 0; k < j; k++) {
+        if (ops[k].name === "translate") {
+          const tx = (_e = ops[k].args[0]) != null ? _e : 0;
+          const ty = (_f = ops[k].args[1]) != null ? _f : 0;
+          out2.translate = out2.translate ? [out2.translate[0] + tx, out2.translate[1] + ty] : [tx, ty];
+        }
+      }
+      for (let k = j + 1; k < ops.length - 1; k++) {
+        const op = ops[k];
+        if (op.name === "rotate") out2.rotate = ((_g = out2.rotate) != null ? _g : 0) + ((_h = op.args[0]) != null ? _h : 0);
+        else if (op.name === "scale") {
+          const sx = (_i = op.args[0]) != null ? _i : 1;
+          const sy = op.args.length > 1 ? op.args[1] : sx;
+          out2.scale = out2.scale ? [out2.scale[0] * sx, out2.scale[1] * sy] : [sx, sy];
+        }
+      }
+      return out2;
+    }
+  }
+  let translate;
+  let rotate;
+  let scale;
+  for (const op of ops) {
+    if (op.name === "translate") {
+      const dx = (_j = op.args[0]) != null ? _j : 0;
+      const dy = (_k = op.args[1]) != null ? _k : 0;
+      translate = translate ? [translate[0] + dx, translate[1] + dy] : [dx, dy];
+    } else if (op.name === "rotate") {
+      rotate = (rotate != null ? rotate : 0) + ((_l = op.args[0]) != null ? _l : 0);
+    } else if (op.name === "scale") {
+      const sx = (_m = op.args[0]) != null ? _m : 1;
+      const sy = op.args.length > 1 ? op.args[1] : sx;
+      scale = scale ? [scale[0] * sx, scale[1] * sy] : [sx, sy];
+    }
+  }
+  const out = {};
+  if (translate) out.translate = translate;
+  if (rotate !== void 0) out.rotate = rotate;
+  if (scale) out.scale = scale;
+  return Object.keys(out).length ? out : void 0;
+}
+function wrapAncestorChainCompensation(inner, maskedNode, sourceId, ctx, includeTargetOwn) {
+  const sourceNode = ctx.idMap.get(sourceId);
+  const targetAncestors = ctx.maskAncestorChains.get(maskedNode) || [];
+  const targetOwn = includeTargetOwn ? extractTranslateOnly(maskedNode, ctx) : void 0;
+  const targetChain = targetOwn ? [...targetAncestors, targetOwn] : targetAncestors;
+  const sourceChain = sourceNode && ctx.maskAncestorChains.get(sourceNode) || [];
+  if (!targetChain.length && !sourceChain.length) return inner;
+  const times = /* @__PURE__ */ new Set();
+  for (const a of targetChain) if (a.translateKeyframes) for (const kf of a.translateKeyframes) times.add(kf.time);
+  for (const a of sourceChain) if (a.translateKeyframes) for (const kf of a.translateKeyframes) times.add(kf.time);
+  const animated = times.size > 0;
+  if (!animated) {
+    const tgt = sumStaticTranslate(targetChain);
+    const src = sumStaticTranslate(sourceChain);
+    const dx = src[0] - tgt[0];
+    const dy = src[1] - tgt[1];
+    if (dx === 0 && dy === 0) return inner;
+    return { type: "g", transform: "translate(" + dx + "," + dy + ")", children: [inner] };
+  }
+  const sortedTimes = Array.from(times).sort((a, b) => a - b);
+  const keyframes = sortedTimes.map((t) => {
+    const tgt = sumTranslateAt(targetChain, t);
+    const src = sumTranslateAt(sourceChain, t);
+    return { time: t, value: { translate: [src[0] - tgt[0], src[1] - tgt[1]] } };
+  });
+  return { type: "g", animate: { transform: { keyframes } }, children: [inner] };
+}
+function sumStaticTranslate(chain) {
+  let x = 0, y = 0;
+  for (const a of chain) {
+    if (a.translate) {
+      x += a.translate[0];
+      y += a.translate[1];
+    }
+  }
+  return [x, y];
+}
+function sumTranslateAt(chain, t) {
+  let x = 0, y = 0;
+  for (const a of chain) {
+    if (a.translateKeyframes && a.translateKeyframes.length) {
+      const v = interpKfs(a.translateKeyframes, t);
+      x += v[0];
+      y += v[1];
+    } else if (a.translate) {
+      x += a.translate[0];
+      y += a.translate[1];
+    }
+  }
+  return [x, y];
+}
+function interpKfs(kfs, t) {
+  if (t <= kfs[0].time) return kfs[0].value;
+  if (t >= kfs[kfs.length - 1].time) return kfs[kfs.length - 1].value;
+  for (let i = 1; i < kfs.length; i++) {
+    if (t <= kfs[i].time) {
+      const prev = kfs[i - 1];
+      const cur = kfs[i];
+      const a = (t - prev.time) / (cur.time - prev.time);
+      return [prev.value[0] + (cur.value[0] - prev.value[0]) * a, prev.value[1] + (cur.value[1] - prev.value[1]) * a];
+    }
+  }
+  return kfs[kfs.length - 1].value;
+}
+function collectMaskAncestorChains(root, ctx) {
+  const interestingNodes = /* @__PURE__ */ new Set();
+  const collectInterestingNodes = (n) => {
+    var _a, _b;
+    const href = (_b = (_a = n.effects) == null ? void 0 : _a.maskedBy) == null ? void 0 : _b.href;
+    if (typeof href === "string") {
+      interestingNodes.add(n);
+      const sourceNode = ctx.idMap.get(href);
+      if (sourceNode) interestingNodes.add(sourceNode);
+    }
+    if (Array.isArray(n.children)) for (const ch of n.children) collectInterestingNodes(ch);
+  };
+  collectInterestingNodes(root);
+  if (interestingNodes.size === 0) return;
+  const walk = (node, chain) => {
+    if (interestingNodes.has(node)) ctx.maskAncestorChains.set(node, chain);
+    if (Array.isArray(node.children)) {
+      const own = extractTranslateOnly(node, ctx);
+      const next = own ? [...chain, own] : chain;
+      for (const ch of node.children) walk(ch, next);
+    }
+  };
+  walk(root, []);
+}
+function extractTranslateOnly(node, ctx) {
+  var _a, _b, _c;
+  const tr = node.transform;
+  const animateBlock = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate.transform : void 0;
+  if (tr === void 0 && !animateBlock) return void 0;
+  const out = {};
+  if (typeof tr === "string") {
+    const parts = parseTranslateOnlyFromString(tr, ctx);
+    if (parts) out.translate = parts;
+  } else if (tr && typeof tr === "object") {
+    const value = tr.value;
+    if (value && typeof value === "object" && Array.isArray(value.translate)) {
+      out.translate = [value.translate[0] || 0, value.translate[1] || 0];
+    }
+    if (value && (value.rotate !== void 0 || value.scale !== void 0 || value.skew !== void 0)) {
+      ctx.warnings.push("maskedBy ancestor: non-translate transform parts ignored (rotate/scale not yet supported)");
+    }
+  }
+  if (animateBlock && Array.isArray(animateBlock.keyframes)) {
+    const kfs = animateBlock.keyframes;
+    const translateKfs = [];
+    for (const kf of kfs) {
+      const v = (_a = kf.value) != null ? _a : kf.v;
+      const t = (_c = (_b = kf.time) != null ? _b : kf.t) != null ? _c : 0;
+      if (v && typeof v === "object" && Array.isArray(v.translate)) {
+        translateKfs.push({ time: t, value: [v.translate[0] || 0, v.translate[1] || 0] });
+        if (v.rotate !== void 0 || v.scale !== void 0 || v.skew !== void 0) {
+          ctx.warnings.push("maskedBy ancestor: animated non-translate parts ignored");
+        }
+      }
+    }
+    if (translateKfs.length) out.translateKeyframes = translateKfs;
+  }
+  return out.translate || out.translateKeyframes ? out : void 0;
+}
+function parseTranslateOnlyFromString(s, ctx) {
+  const re = /([a-zA-Z]+)\s*\(([^)]*)\)/g;
+  let m;
+  let x = 0, y = 0;
+  let seen = false;
+  let droppedNonTranslate = false;
+  while ((m = re.exec(s)) !== null) {
+    const name = m[1];
+    const args = m[2].split(/[\s,]+/).filter((a) => a.length > 0).map(Number);
+    if (name === "translate") {
+      x += args[0] || 0;
+      y += args[1] || 0;
+      seen = true;
+    } else {
+      droppedNonTranslate = true;
+    }
+  }
+  if (droppedNonTranslate) ctx.warnings.push("maskedBy ancestor: non-translate transform in string ignored: " + s);
+  return seen ? [x, y] : void 0;
+}
+
+// src/effects/refEffect.ts
+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);
+}
+
+// src/effects/repeaterEffect.ts
+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 baseClone = clone(base);
+    const synthFx = synthesisePerCopyFx(fx, i);
+    const wrapped = synthFx ? applyTransformationEffect(baseClone, synthFx, ctx) : baseClone;
+    children.push(wrapped);
+  }
+  const wrapper = { type: "g", children };
+  if (sharedTransform !== void 0) wrapper.transform = sharedTransform;
+  if (sharedAnimTransform !== void 0) wrapper.animate = { transform: sharedAnimTransform };
+  return wrapper;
+}
+function synthesisePerCopyFx(fx, i) {
+  const out = {};
+  if (fx.translate !== void 0) {
+    out.translate = mapAnimatableVec2(fx.translate, (v) => [v[0] * i, v[1] * i]);
+  }
+  if (fx.rotate !== void 0) {
+    out.rotate = mapAnimatableNumber(fx.rotate, (v) => v * i);
+  }
+  if (fx.scale !== void 0) {
+    out.scale = synthesiseScale(fx.scale, i);
+  }
+  if (fx.origin !== void 0) {
+    out.origin = fx.origin;
+  }
+  return Object.keys(out).length ? out : void 0;
+}
+function mapAnimatableVec2(raw, fn) {
+  if (Array.isArray(raw)) return fn(raw);
+  if (raw && typeof raw === "object") {
+    const obj = raw;
+    if (Array.isArray(obj.keyframes)) {
+      return __spreadProps(__spreadValues({}, obj), {
+        keyframes: obj.keyframes.map((kf) => kf && kf.value !== void 0 ? __spreadProps(__spreadValues({}, kf), { value: fn(kf.value) }) : kf)
+      });
+    }
+    if (obj.value !== void 0) {
+      return __spreadProps(__spreadValues({}, obj), { value: fn(obj.value) });
+    }
+  }
+  return raw;
+}
+function mapAnimatableNumber(raw, fn) {
+  if (typeof raw === "number") return fn(raw);
+  if (raw && typeof raw === "object") {
+    const obj = raw;
+    if (Array.isArray(obj.keyframes)) {
+      return __spreadProps(__spreadValues({}, obj), {
+        keyframes: obj.keyframes.map((kf) => kf && kf.value !== void 0 ? __spreadProps(__spreadValues({}, kf), { value: fn(kf.value) }) : kf)
+      });
+    }
+    if (obj.value !== void 0) {
+      return __spreadProps(__spreadValues({}, obj), { value: fn(obj.value) });
+    }
+  }
+  return raw;
+}
+function synthesiseScale(raw, i) {
+  const scalePowerFromPercent = (v) => [Math.pow(v[0] / 100, i), Math.pow(v[1] / 100, i)];
+  const scalePowerFromUnits = (v) => [Math.pow(v[0], i), Math.pow(v[1], i)];
+  if (Array.isArray(raw)) {
+    return { value: scalePowerFromPercent(raw) };
+  }
+  if (raw && typeof raw === "object") {
+    const obj = raw;
+    if (Array.isArray(obj.keyframes)) {
+      return __spreadProps(__spreadValues({}, obj), {
+        keyframes: obj.keyframes.map((kf) => kf && kf.value !== void 0 ? __spreadProps(__spreadValues({}, kf), { value: scalePowerFromUnits(kf.value) }) : kf)
+      });
+    }
+    if (obj.value !== void 0) {
+      return __spreadProps(__spreadValues({}, obj), { value: scalePowerFromPercent(obj.value) });
+    }
+  }
+  return raw;
+}
+
+// src/effects/retimeEffect.ts
+var RETIME_MATERIALISATION_MODE_INLINE_G = false;
+function asRetime(r) {
+  var _a, _b;
+  return { start: (_a = r.start) != null ? _a : 0, stretch: (_b = r.stretch) != null ? _b : 1 };
+}
+function concatRetime(child, parent) {
+  return {
+    start: parent.start + parent.stretch * child.start,
+    stretch: parent.stretch * child.stretch
+  };
+}
+function applyAllRetimeEffects(root, ctx) {
+  var _a;
+  ctx.idMap.clear();
+  indexById(root, ctx.idMap);
+  const sites = [];
+  const collect = (n) => {
+    var _a2, _b;
+    if ((_a2 = n.effects) == null ? void 0 : _a2.retime) sites.push(n);
+    (_b = n.children) == null ? void 0 : _b.forEach(collect);
+  };
+  collect(root);
+  for (const useNode of sites) {
+    const retime = (_a = useNode.effects) == null ? void 0 : _a.retime;
+    if (!retime) continue;
+    delete useNode.effects.retime;
+    if (Object.keys(useNode.effects).length === 0) delete useNode.effects;
+    materialiseRetime(useNode, asRetime(retime), ctx);
+  }
+}
+function materialiseRetime(useNode, retime, ctx) {
+  const targetId = stripHash(useNode.href);
+  if (!targetId) {
+    ctx.errors.push("retime: <use> has no href to follow");
+    return;
+  }
+  const chainRootId = buildChainClone(targetId, retime, ctx, /* @__PURE__ */ new Set());
+  if (!chainRootId) return;
+  if (RETIME_MATERIALISATION_MODE_INLINE_G) {
+    const cloneNode = ctx.idMap.get(chainRootId);
+    useNode.type = "g";
+    delete useNode.href;
+    useNode.children = [cloneNode];
+    applyUseOffsetToG(useNode);
+    ctx.defs = ctx.defs.filter((d) => d !== cloneNode);
+  } else {
+    useNode.href = "#" + chainRootId;
+  }
+}
+function buildChainClone(targetId, accum, ctx, chain) {
+  var _a, _b;
+  if (chain.has(targetId)) {
+    ctx.errors.push('retime: loop via "' + targetId + '"');
+    return void 0;
+  }
+  const target = ctx.idMap.get(targetId);
+  if (!target) {
+    ctx.warnings.push('retime: target "' + targetId + '" not found');
+    return void 0;
+  }
+  const cloneNode = clone(target);
+  regenerateIdsInClone(cloneNode, ctx);
+  if (target.type === "use") {
+    remapKeyframeTimesOnly(cloneNode, accum.start, accum.stretch);
+  } else {
+    remapKeyframeTimes(cloneNode, accum.start, accum.stretch);
+  }
+  if ((_a = cloneNode.effects) == null ? void 0 : _a.retime) {
+    delete cloneNode.effects.retime;
+    if (Object.keys(cloneNode.effects).length === 0) delete cloneNode.effects;
+  }
+  if (target.type === "use" && target.href) {
+    const subId = stripHash(target.href);
+    if (subId) {
+      const innerRetime = (_b = target.effects) == null ? void 0 : _b.retime;
+      const subAccum = innerRetime ? concatRetime(asRetime(innerRetime), accum) : accum;
+      const subChain = new Set(chain);
+      subChain.add(targetId);
+      const subId2 = buildChainClone(subId, subAccum, ctx, subChain);
+      if (subId2) cloneNode.href = "#" + subId2;
+    }
+  }
+  ctx.defs.push(cloneNode);
+  if (typeof cloneNode.id === "string") ctx.idMap.set(cloneNode.id, cloneNode);
+  return typeof cloneNode.id === "string" ? cloneNode.id : void 0;
+}
+function remapKeyframeTimes(node, start, stretch) {
+  var _a;
+  remapKeyframeTimesOnly(node, start, stretch);
+  (_a = node.children) == null ? void 0 : _a.forEach((c) => remapKeyframeTimes(c, start, stretch));
+}
+function remapKeyframeTimesOnly(node, start, stretch) {
+  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);
+    }
+  }
+}
+
+// src/effects/textAlongPathEffect.ts
+function applyTextAlongPathEffect(node, fx, _ctx) {
+  var _a;
+  if (!fx) return node;
+  const href = typeof fx.href === "string" && !fx.href.startsWith("#") ? "#" + fx.href : fx.href;
+  const textPath = {
+    type: "textPath",
+    href,
+    children: (_a = node.children) != null ? _a : []
+  };
+  if (fx.lengthAdjust !== void 0) textPath.lengthAdjust = fx.lengthAdjust;
+  if (fx.method !== void 0) textPath.method = fx.method;
+  if (fx.spacing !== void 0) textPath.spacing = fx.spacing;
+  applyAnimatableNumber(textPath, "startOffset", fx.startOffset);
+  applyAnimatableNumber(textPath, "textLength", fx.textLength);
+  node.children = [textPath];
+  return node;
+}
+function applyAnimatableNumber(node, attrName, raw) {
+  if (raw === void 0 || raw === null) return;
+  if (typeof raw === "number") {
+    node[attrName] = String(raw);
+    return;
+  }
+  if (typeof raw === "object") {
+    const obj = raw;
+    if (Array.isArray(obj.keyframes)) {
+      const prevAnimate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
+      const animate = __spreadValues({}, prevAnimate || {});
+      animate[attrName] = { keyframes: obj.keyframes };
+      node.animate = animate;
+      return;
+    }
+    if (typeof obj.value === "number") {
+      node[attrName] = String(obj.value);
+      return;
+    }
+  }
+}
+
+// src/PxAnimatorUtil.ts
+function bezierToSvgPath(path) {
+  var _a, _b, _c, _d;
+  const v = path.v;
+  const i = path.i;
+  const o = path.o;
+  const c = path.c;
+  if (!v.length) return "";
+  const d = [];
+  const len = v.length;
+  d.push("M" + v[0][0] + "," + v[0][1]);
+  for (let idx = 1; idx < len; idx++) {
+    const prevV = v[idx - 1];
+    const prevO = (_a = o == null ? void 0 : o[idx - 1]) != null ? _a : prevV;
+    const currI = (_b = i == null ? void 0 : i[idx]) != null ? _b : v[idx];
+    const currV = v[idx];
+    const isLine = prevO[0] === prevV[0] && prevO[1] === prevV[1] && (currI[0] === currV[0] && currI[1] === currV[1]);
+    if (isLine) {
+      d.push("L" + currV[0] + "," + currV[1]);
+    } else {
+      d.push("C" + prevO[0] + "," + prevO[1] + "," + currI[0] + "," + currI[1] + "," + currV[0] + "," + currV[1]);
+    }
+  }
+  if (c && len > 0) {
+    const lastV = v[len - 1];
+    const lastO = (_c = o == null ? void 0 : o[len - 1]) != null ? _c : lastV;
+    const firstI = (_d = i == null ? void 0 : i[0]) != null ? _d : v[0];
+    const firstV = v[0];
+    const isLine = lastO[0] === lastV[0] && lastO[1] === lastV[1] && (firstI[0] === firstV[0] && firstI[1] === firstV[1]);
+    if (!isLine) {
+      d.push("C" + lastO[0] + "," + lastO[1] + "," + firstI[0] + "," + firstI[1] + "," + firstV[0] + "," + firstV[1]);
+    }
+    d.push("z");
+  }
+  return d.join("");
+}
+function interpolateNum(a, b, t) {
+  return a + (b - a) * t;
+}
+function interpolateVec(a, b, t) {
+  const res = [];
+  const count = Math.max(a.length, b.length);
   for (let i = 0; i < count; i++) {
     res[i] = interpolateNum(a[i] || 0, b[i] || 0, t);
   }
@@ -604,6 +2232,24 @@ function parseColor(s) {
 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) {
@@ -628,6 +2274,12 @@ var SVG_CAMEL_CASE_ATTRS = /* @__PURE__ */ new Set([
   "clipPathUnits",
   "maskUnits",
   "maskContentUnits",
+  // Marker  (SVG spec keeps these camelCase, like viewBox)
+  "markerUnits",
+  "markerWidth",
+  "markerHeight",
+  "refX",
+  "refY",
   // Text
   "textLength",
   "lengthAdjust",
@@ -663,288 +2315,456 @@ function camelCaseToKebabWordIfNeeded(camel) {
 function clamp(value, min, max) {
   return Math.max(min, Math.min(value, max));
 }
-
-// src/PxAnimatorDOM.ts
-var SVG_NS = "http://www.w3.org/2000/svg";
-var ALLOWED_SVG_TAGS_LOWER_CASE = new Set([
-  "svg",
-  "g",
-  "path",
-  "circle",
-  "ellipse",
-  "rect",
-  "line",
-  "polyline",
-  "polygon",
-  "text",
-  "tspan",
-  "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_SET = /* @__PURE__ */ new Set([
-  "href",
-  "src",
-  // Presentation
-  "fill",
-  "stroke",
-  "strokeWidth",
-  "opacity",
-  "transform",
-  // Geometry
-  "x",
-  "y",
-  "cx",
-  "cy",
-  "r",
-  "rx",
-  "ry",
-  "width",
-  "height",
-  "d",
-  "x1",
-  "y1",
-  "x2",
-  "y2",
-  "points",
-  // Text
-  "fontSize",
-  "fontFamily",
-  "textAnchor",
-  // Structure
-  "id",
-  "class",
-  "viewBox",
-  "preserveAspectRatio",
-  // Gradient/Pattern
-  "offset",
-  "stopColor",
-  "stopOpacity",
-  "gradientTransform",
-  // Clippath/Mask
-  "clipPath",
-  "mask",
-  // Filter
-  "filter",
-  "stdDeviation",
-  "in",
-  "in2",
-  "result",
-  "mode",
-  ...ALLOWED_RESOURCE_ATTRIBUTES
-]);
-function sanitiseAttributeValue(name, value) {
-  const nameLower = name.toLowerCase();
-  if (!ALLOWED_ATTRIBUTES_SET.has(nameLower)) {
-    console.warn("Attribute not in whitelist: ", nameLower);
-    return void 0;
+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);
   }
-  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;
+  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;
   }
-  if (ALLOWED_RESOURCE_ATTRIBUTES_SET.has(nameLower)) {
-    const str = String(value);
-    if (str.startsWith("#")) {
-      return value;
+  return { ts, ds };
+}
+function bezier2D_arcAtT(lut, t) {
+  const { ts, ds } = lut;
+  const last = ts.length - 1;
+  if (t <= ts[0]) return ds[0];
+  if (t >= ts[last]) return ds[last];
+  let lo = 1, hi = last;
+  while (lo < hi) {
+    const mid = lo + hi >>> 1;
+    if (ts[mid] < t) lo = mid + 1;
+    else hi = mid;
+  }
+  const tPrev = ts[hi - 1];
+  const span = ts[hi] - tPrev;
+  const frac = span > 0 ? (t - tPrev) / span : 0;
+  return ds[hi - 1] + frac * (ds[hi] - ds[hi - 1]);
+}
+function invertEasing(easing) {
+  if (!easing) return (y) => y;
+  const flipped = [easing[1], easing[0], easing[3], easing[2]];
+  return cubicBezier(flipped);
+}
+
+// src/PxMotionPath.ts
+function getKfTranslate(kf) {
+  var _a;
+  const v = (_a = kf.value) != null ? _a : kf.v;
+  if (!v) return void 0;
+  if (Array.isArray(v) && v.length >= 2 && typeof v[0] === "number" && typeof v[1] === "number") {
+    return [v[0], v[1]];
+  }
+  const tr = v.translate;
+  if (Array.isArray(tr) && tr.length >= 2) return [tr[0], tr[1]];
+  return void 0;
+}
+function getKfTime(kf) {
+  var _a, _b;
+  return (_b = (_a = kf.time) != null ? _a : kf.t) != null ? _b : 0;
+}
+function getKfEasing(kf) {
+  var _a;
+  return (_a = kf.easing) != null ? _a : kf.e;
+}
+function propAnimIsMotionPath(anim) {
+  var _a, _b, _c;
+  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 (((_b = kf.tangentIn) != null ? _b : kf.ti) || ((_c = kf.tangentOut) != null ? _c : kf.to)) return true;
+  }
+  return false;
+}
+var _segmentCache = /* @__PURE__ */ new WeakMap();
+function getSegmentCache(prevKf, nextKf, prevPos, nextPos) {
+  var _a, _b;
+  const existing = _segmentCache.get(prevKf);
+  if (existing) return existing;
+  const to = (_a = prevKf.tangentOut) != null ? _a : prevKf.to;
+  const ti = (_b = nextKf.tangentIn) != null ? _b : nextKf.ti;
+  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 evaluateMotionPathSegment(prevKf, nextKf, prevPos, nextPos, localProgress, autoOrient) {
+  const seg = getSegmentCache(prevKf, nextKf, prevPos, nextPos);
+  const t = seg.totalArc === 0 ? localProgress : tFromArcFraction(seg.lut, localProgress);
+  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 tFromArcFraction(lut, arcFrac) {
+  const total = lut.ds[lut.ds.length - 1];
+  const target = arcFrac * total;
+  const { ts, ds } = lut;
+  const last = ds.length - 1;
+  if (target <= 0) return ts[0];
+  if (target >= ds[last]) return ts[last];
+  let lo = 1, hi = last;
+  while (lo < hi) {
+    const mid = lo + hi >>> 1;
+    if (ds[mid] < target) lo = mid + 1;
+    else hi = mid;
+  }
+  const dPrev = ds[hi - 1];
+  const span = ds[hi] - dPrev;
+  const frac = span > 0 ? (target - dPrev) / span : 0;
+  return ts[hi - 1] + frac * (ts[hi] - ts[hi - 1]);
+}
+var DEFAULT_FLATNESS_TOL = 0.5;
+var DEFAULT_ROTATION_TOL = 5;
+var DEFAULT_MAX_SAMPLES = 32;
+function materialiseMotionPathInPropAnim(anim, opts) {
+  var _a, _b, _c, _d;
+  if (!propAnimIsMotionPath(anim)) return anim;
+  const kfs = (_a = anim.keyframes) != null ? _a : anim.kfs;
+  if (!Array.isArray(kfs) || kfs.length < 2) return anim;
+  const autoOrient = !!anim.autoOrient;
+  const flatnessTol = (_b = opts == null ? void 0 : opts.flatnessTolerance) != null ? _b : DEFAULT_FLATNESS_TOL;
+  const rotationTol = (_c = opts == null ? void 0 : opts.rotationTolerance) != null ? _c : DEFAULT_ROTATION_TOL;
+  const maxSamples = (_d = opts == null ? void 0 : opts.maxSamplesPerSegment) != null ? _d : DEFAULT_MAX_SAMPLES;
+  const out = [];
+  const firstPos = getKfTranslate(kfs[0]);
+  if (!firstPos) return anim;
+  const firstRotate = autoOrient ? derivAngleForFirstKf(kfs[0], kfs[1]) : void 0;
+  out.push(makeOutKf(
+    getKfTime(kfs[0]),
+    buildOutKfValue(getKfValueParts(kfs[0]), getKfValueParts(kfs[0]), 0, firstPos, firstRotate, autoOrient)
+  ));
+  for (let i = 0; i < kfs.length - 1; i++) {
+    const prevKf = kfs[i];
+    const nextKf = kfs[i + 1];
+    const prevPos = getKfTranslate(prevKf);
+    const nextPos = getKfTranslate(nextKf);
+    if (!prevPos || !nextPos) {
+      out.push(makeOutKf(
+        getKfTime(nextKf),
+        buildOutKfValue(getKfValueParts(nextKf), getKfValueParts(nextKf), 1, nextPos != null ? nextPos : [0, 0], void 0, autoOrient)
+      ));
+      continue;
     }
-    if (/^url\(#[^)]+\)$/.test(str)) {
-      return value;
+    if (autoOrient && i > 0) {
+      insertSharpCornerStepKfIfNeeded(out, prevKf, nextKf, prevPos, nextPos, rotationTol);
     }
-    return void 0;
+    materialiseSegment(out, prevKf, nextKf, prevPos, nextPos, autoOrient, flatnessTol, rotationTol, maxSamples);
   }
-  return value;
+  const lastInE = getKfEasing(kfs[kfs.length - 1]);
+  if (lastInE) out[out.length - 1].e = lastInE;
+  if (autoOrient) unwrapAutoOrientRotations(out);
+  const result = { kfs: out };
+  if (anim.loop !== void 0) result.loop = anim.loop;
+  return result;
 }
-function createElement(tagName, normalisedProps, style, children, textContent) {
-  if (!ALLOWED_SVG_TAGS_LOWER_CASE.has(tagName.toLowerCase())) return null;
-  const element = document.createElementNS(SVG_NS, tagName);
-  for (const propName in normalisedProps) {
-    element.setAttribute(
-      camelCaseToKebabWordIfNeeded(propName),
-      sanitiseAttributeValue(propName, normalisedProps[propName])
-    );
-  }
-  if (style) {
-    for (const styleProp in style) {
-      element.style[styleProp] = String(style[styleProp]);
+function unwrapAutoOrientRotations(kfs) {
+  var _a;
+  let prev;
+  for (const kf of kfs) {
+    const v = (_a = kf.v) != null ? _a : kf.value;
+    if (!v || typeof v.rotate !== "number") continue;
+    if (prev === void 0) {
+      prev = v.rotate;
+      continue;
     }
+    let r = v.rotate;
+    while (r - prev > 180) r -= 360;
+    while (r - prev < -180) r += 360;
+    v.rotate = r;
+    prev = r;
   }
-  if (children) {
-    for (const child of children) {
-      element.appendChild(child);
+}
+function makeOutKf(time, value) {
+  return { t: time, v: value };
+}
+function getKfValueParts(kf) {
+  var _a;
+  const v = (_a = kf.value) != null ? _a : kf.v;
+  if (!v || typeof v !== "object" || Array.isArray(v)) return void 0;
+  return v;
+}
+function interpolatePart(prev, next, p) {
+  if (prev === void 0) return next;
+  if (next === void 0) return prev;
+  if (typeof prev === "number" && typeof next === "number") {
+    return prev + (next - prev) * p;
+  }
+  if (Array.isArray(prev) && Array.isArray(next) && prev.length === next.length) {
+    const out = new Array(prev.length);
+    for (let i = 0; i < prev.length; i++) {
+      const a = typeof prev[i] === "number" ? prev[i] : 0;
+      const b = typeof next[i] === "number" ? next[i] : 0;
+      out[i] = a + (b - a) * p;
     }
+    return out;
   }
-  if (textContent) element.textContent = textContent;
-  return element;
+  return p < 0.5 ? prev : next;
 }
-function resolveStyle(style, defs) {
+function buildOutKfValue(prevV, nextV, p, translate, rotateDegFromAutoOrient, autoOrient) {
+  const value = { translate };
+  const keys = /* @__PURE__ */ new Set();
+  if (prevV) for (const k of Object.keys(prevV)) keys.add(k);
+  if (nextV) for (const k of Object.keys(nextV)) keys.add(k);
+  for (const k of keys) {
+    if (k === "translate") continue;
+    if (k === "rotate" && autoOrient) continue;
+    const pv = prevV == null ? void 0 : prevV[k];
+    const nv = nextV == null ? void 0 : nextV[k];
+    if (pv === void 0 && nv === void 0) continue;
+    value[k] = interpolatePart(pv, nv, p);
+  }
+  if (rotateDegFromAutoOrient !== void 0) value.rotate = rotateDegFromAutoOrient;
+  return value;
+}
+function derivAngleForFirstKf(kf0, kf1) {
+  const p0 = getKfTranslate(kf0);
+  const p1 = getKfTranslate(kf1);
+  if (!p0 || !p1) return 0;
+  const seg = getSegmentCache(kf0, kf1, p0, p1);
+  const tan = bezier2D_derivativeAt(seg.P0, seg.P1, seg.P2, seg.P3, 0);
+  return Math.atan2(tan[1], tan[0]) * 180 / Math.PI;
+}
+function wrappedAngleDelta(a, b) {
+  let d = a - b;
+  while (d > 180) d -= 360;
+  while (d < -180) d += 360;
+  return d;
+}
+function insertSharpCornerStepKfIfNeeded(out, prevKf, nextKf, prevPos, nextPos, rotationTol) {
   var _a;
-  if (!style) return void 0;
-  if (typeof style === "string") {
-    return (_a = defs == null ? void 0 : defs.styles) == null ? void 0 : _a[style];
+  const lastKf = out[out.length - 1];
+  const lastV = (_a = lastKf.v) != null ? _a : lastKf.value;
+  const prevExit = lastV == null ? void 0 : lastV.rotate;
+  if (typeof prevExit !== "number") return;
+  const seg = getSegmentCache(prevKf, nextKf, prevPos, nextPos);
+  const tanAtStart = bezier2D_derivativeAt(seg.P0, seg.P1, seg.P2, seg.P3, 0);
+  const nextEntry = Math.atan2(tanAtStart[1], tanAtStart[0]) * 180 / Math.PI;
+  const delta = wrappedAngleDelta(nextEntry, prevExit);
+  if (Math.abs(delta) <= rotationTol) return;
+  const dupValue = buildOutKfValue(
+    getKfValueParts(prevKf),
+    getKfValueParts(prevKf),
+    0,
+    prevPos,
+    nextEntry,
+    true
+  );
+  out.push(makeOutKf(getKfTime(prevKf), dupValue));
+}
+function materialiseSegment(out, prevKf, nextKf, prevPos, nextPos, autoOrient, flatnessTol, rotationTol, maxSamples) {
+  const seg = getSegmentCache(prevKf, nextKf, prevPos, nextPos);
+  const prevTime = getKfTime(prevKf);
+  const nextTime = getKfTime(nextKf);
+  const prevEasing = getKfEasing(prevKf);
+  const invertFn = invertEasing(prevEasing);
+  const prevV = getKfValueParts(prevKf);
+  const nextV = getKfValueParts(nextKf);
+  const interiorTs = computeSampleTs(seg, autoOrient, flatnessTol, rotationTol, maxSamples);
+  const samples = [];
+  for (const t of interiorTs) {
+    const arc = bezier2D_arcAtT(seg.lut, t);
+    const p = clamp(seg.totalArc > 0 ? arc / seg.totalArc : t, 0, 1);
+    const u = clamp(invertFn(p), 0, 1);
+    const pos = bezier2D_pointAt(seg.P0, seg.P1, seg.P2, seg.P3, t);
+    const sample = { u, p, pos };
+    if (autoOrient) {
+      const tan = bezier2D_derivativeAt(seg.P0, seg.P1, seg.P2, seg.P3, t);
+      sample.rotateDeg = Math.atan2(tan[1], tan[0]) * 180 / Math.PI;
+    }
+    samples.push(sample);
+  }
+  let remaining = prevEasing;
+  let prevU = 0;
+  const startIdx = out.length - 1;
+  for (let i = 0; i < samples.length; i++) {
+    const s = samples[i];
+    const xFrac = prevU < 1 ? clamp((s.u - prevU) / (1 - prevU), 0, 1) : 1;
+    const { left, right } = splitEasing(remaining, xFrac);
+    const ownerIdx = i === 0 ? startIdx : out.length - 1;
+    if (left) out[ownerIdx].e = left;
+    else delete out[ownerIdx].e;
+    const tGlobal = prevTime + s.u * (nextTime - prevTime);
+    const value = buildOutKfValue(prevV, nextV, s.p, s.pos, s.rotateDeg, autoOrient);
+    out.push(makeOutKf(tGlobal, value));
+    remaining = right;
+    prevU = s.u;
   }
-  return style;
 }
-function getNormalizedProps(props) {
-  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 (TRANSFORM_FN_NAMES.has(key)) {
-      if (Array.isArray(value)) {
-        if (key === "translate") value = value.map((v) => v + "px");
-        value = value.join(",");
-      }
-      if (key === "rotate") value = value + "deg";
-      propsCopy["transform"] = key + "(" + value + ")";
-    } else if (value !== void 0 && value !== null) {
-      propsCopy[key] = String(value);
+function computeSampleTs(seg, autoOrient, flatnessTol, rotationTol, maxSamples) {
+  const extremes = [];
+  addAxisExtremes(seg.P0[0], seg.P1[0], seg.P2[0], seg.P3[0], extremes);
+  addAxisExtremes(seg.P0[1], seg.P1[1], seg.P2[1], seg.P3[1], extremes);
+  extremes.sort((a, b) => a - b);
+  const critical = [0];
+  for (const t of extremes) {
+    if (t > critical[critical.length - 1] + 1e-6 && t < 1 - 1e-6) {
+      critical.push(t);
     }
   }
-  return propsCopy;
+  critical.push(1);
+  const out = [];
+  const budget = { remaining: maxSamples - critical.length };
+  for (let i = 0; i < critical.length - 1; i++) {
+    bisect(critical[i], critical[i + 1], out, seg, autoOrient, flatnessTol, rotationTol, budget);
+  }
+  return out;
 }
-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 resolvedStyle = resolveStyle(style, nodeDefs);
-  let childElements;
-  if (children) {
-    for (const ch of children) {
-      const child = renderNode(ch, nodeDefs);
-      if (child) {
-        if (!childElements) childElements = [];
-        childElements.push(child);
-      }
+function addAxisExtremes(p0, p1, p2, p3, out) {
+  const a = p1 - p0;
+  const b = p2 - p1;
+  const c = p3 - p2;
+  const A = a - 2 * b + c;
+  const B = 2 * (b - a);
+  const C = a;
+  if (Math.abs(A) < 1e-10) {
+    if (Math.abs(B) > 1e-10) {
+      const t = -C / B;
+      if (t > 1e-6 && t < 1 - 1e-6) out.push(t);
     }
+    return;
   }
-  return createElement(
-    type || "g",
-    getNormalizedProps(props),
-    resolvedStyle,
-    childElements,
-    props[TEXT_ATTR] || props[TEXT_CONTENT_ATTR]
+  const disc = B * B - 4 * A * C;
+  if (disc < 0) return;
+  const sq = Math.sqrt(disc);
+  const t1 = (-B - sq) / (2 * A);
+  const t2 = (-B + sq) / (2 * A);
+  if (t1 > 1e-6 && t1 < 1 - 1e-6) out.push(t1);
+  if (t2 > 1e-6 && t2 < 1 - 1e-6) out.push(t2);
+}
+function bisect(tA, tB, out, seg, autoOrient, flatnessTol, rotationTol, budget) {
+  const tMid = (tA + tB) / 2;
+  const pA = bezier2D_pointAt(seg.P0, seg.P1, seg.P2, seg.P3, tA);
+  const pB = bezier2D_pointAt(seg.P0, seg.P1, seg.P2, seg.P3, tB);
+  const span = tB - tA;
+  const p25 = bezier2D_pointAt(seg.P0, seg.P1, seg.P2, seg.P3, tA + span * 0.25);
+  const p50 = bezier2D_pointAt(seg.P0, seg.P1, seg.P2, seg.P3, tMid);
+  const p75 = bezier2D_pointAt(seg.P0, seg.P1, seg.P2, seg.P3, tA + span * 0.75);
+  const dev = Math.max(
+    perpDist(p25, pA, pB),
+    perpDist(p50, pA, pB),
+    perpDist(p75, pA, pB)
   );
+  let rotOk = true;
+  if (autoOrient) {
+    const tanA = bezier2D_derivativeAt(seg.P0, seg.P1, seg.P2, seg.P3, tA);
+    const tanB = bezier2D_derivativeAt(seg.P0, seg.P1, seg.P2, seg.P3, tB);
+    const angA = Math.atan2(tanA[1], tanA[0]) * 180 / Math.PI;
+    const angB = Math.atan2(tanB[1], tanB[0]) * 180 / Math.PI;
+    let delta = Math.abs(angA - angB);
+    if (delta > 180) delta = 360 - delta;
+    if (delta > rotationTol) rotOk = false;
+  }
+  if (dev <= flatnessTol && rotOk || budget.remaining <= 0 || span < 1e-6) {
+    out.push(tB);
+    return;
+  }
+  budget.remaining -= 1;
+  bisect(tA, tMid, out, seg, autoOrient, flatnessTol, rotationTol, budget);
+  bisect(tMid, tB, out, seg, autoOrient, flatnessTol, rotationTol, budget);
 }
-
-// src/PxAnimatorTriggers.ts
-function setupAnimationTriggers(api, config) {
-  const { startOn, outAction = "continue", scrollIntoViewThreshold = 0.5 } = config;
-  const root = api.getRootElement();
-  if (!root) {
-    console.warn("setupAnimationTriggers: No root element found for animation.");
-    return api;
+function perpDist(q, pA, pB) {
+  const dx = pB[0] - pA[0];
+  const dy = pB[1] - pA[1];
+  const len2 = dx * dx + dy * dy;
+  if (len2 < 1e-20) {
+    const qdx = q[0] - pA[0];
+    const qdy = q[1] - pA[1];
+    return Math.sqrt(qdx * qdx + qdy * qdy);
   }
-  const start = () => {
-    api.play();
-  };
-  const handleEndAction = () => {
-    switch (outAction) {
-      case "pause":
-        api.pause();
-        break;
-      case "reset":
-        api.cancel();
-        break;
-      case "reverse":
-        api.play();
-        break;
-      case "continue":
-      default:
-        break;
-    }
-  };
-  switch (startOn) {
-    case "load": {
-      const startHandler = () => start();
-      if (document.readyState === "complete") {
-        startHandler();
-      } else {
-        window.addEventListener("load", startHandler, { once: true });
+  const cross = (q[0] - pA[0]) * dy - (q[1] - pA[1]) * dx;
+  return Math.abs(cross) / Math.sqrt(len2);
+}
+function materialiseMotionPathsInTree(root, opts) {
+  const out = walkAndMaterialise(root, opts);
+  return out != null ? out : root;
+}
+function walkAndMaterialise(node, opts) {
+  let newChildren;
+  if (node.children) {
+    for (let i = 0; i < node.children.length; i++) {
+      const ch = node.children[i];
+      const ret = walkAndMaterialise(ch, opts);
+      if (ret !== null) {
+        if (!newChildren) newChildren = node.children.slice();
+        newChildren[i] = ret;
       }
-      break;
-    }
-    case "mouseOver": {
-      const mouseOverHandler = () => start();
-      const mouseOutHandler = () => handleEndAction();
-      root.addEventListener("mouseenter", mouseOverHandler);
-      root.addEventListener("mouseleave", mouseOutHandler);
-      break;
-    }
-    case "click": {
-      const clickHandler = () => {
-        if (api.isPlaying()) {
-          handleEndAction();
-        } else {
-          start();
-        }
-      };
-      root.addEventListener("click", clickHandler);
-      break;
     }
-    case "scrollIntoView": {
-      const observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting && entry.intersectionRatio >= scrollIntoViewThreshold) {
-              start();
-            } else {
-              handleEndAction();
-            }
-          });
-        },
-        { threshold: scrollIntoViewThreshold }
-      );
-      observer.observe(root);
-      break;
+  }
+  let newAnimate;
+  const animBucket = node.animate;
+  if (animBucket && typeof animBucket === "object" && !Array.isArray(animBucket)) {
+    const animDef = animBucket;
+    const transformAnim = animDef.transform;
+    if (transformAnim && typeof transformAnim === "object" && propAnimIsMotionPath(transformAnim)) {
+      const materialised = materialiseMotionPathInPropAnim(transformAnim, opts);
+      if (materialised !== transformAnim) {
+        newAnimate = __spreadProps(__spreadValues({}, animDef), { transform: materialised });
+      }
     }
-    case "programmatic":
-      break;
   }
-  return api;
+  if (!newChildren && !newAnimate) return null;
+  const cloned = __spreadValues({}, node);
+  if (newChildren) cloned.children = newChildren;
+  if (newAnimate) cloned.animate = newAnimate;
+  return cloned;
 }
 
 // src/PxDefinitions.ts
@@ -1010,6 +2830,8 @@ function parseSvgPathToBezier(d) {
       currentPath.o.push([x2, y2]);
     } else if (type === "Z" || type === "z") {
       currentPath.c = true;
+    } else {
+      console.warn('Unsupported path command "' + type + '"');
     }
   }
   return res;
@@ -1027,13 +2849,17 @@ function isPathString(value) {
   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));
           }
@@ -1046,8 +2872,8 @@ function normalizePathValue(value) {
   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));
         }
@@ -1111,11 +2937,34 @@ function interpolateValue(propName, a, b, t) {
   if (COLOUR_ATTR_NAMES.has(propName)) {
     return interpolateColor(a || [0, 0, 0, 1], b || [0, 0, 0, 1], t);
   }
+  if (propName === "transform" && typeof a === "object" && a !== null && !Array.isArray(a) && typeof b === "object" && b !== null && !Array.isArray(b)) {
+    return interpolateTransformParts(a, b, t);
+  }
+  if (propName === "rotate" && typeof a === "number" && typeof b === "number") {
+    return interpolateNum(a, b, 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 interpolateTransformParts(a, b, t) {
+  const keys = /* @__PURE__ */ new Set([...Object.keys(a != null ? a : {}), ...Object.keys(b != null ? b : {})]);
+  const out = {};
+  for (const k of keys) {
+    const av = a == null ? void 0 : a[k];
+    const bv = b == null ? void 0 : b[k];
+    if (k === "rotate") {
+      out[k] = interpolateNum(+(av != null ? av : 0), +(bv != null ? bv : 0), t);
+    } else if (k === "translate" || k === "scale" || k === "origin") {
+      const fallback = k === "scale" ? [1, 1] : [0, 0];
+      out[k] = interpolateVec(av || fallback, bv || fallback, t);
+    } else {
+      out[k] = bv != null ? bv : av;
+    }
+  }
+  return out;
+}
 function expandLoopKeyframes(propName, keyframes, loop, duration) {
   var _a, _b, _c, _d, _e;
   const totalIntervals = keyframes.length - 1;
@@ -1142,11 +2991,16 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
   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 template = segKfs.map((kf) => {
+    var _a2, _b2;
+    return {
+      relT: (kf.t - segStartT) / segDuration,
+      v: kf.v,
+      e: kf.e,
+      tangentIn: (_a2 = kf.tangentIn) != null ? _a2 : kf.ti,
+      tangentOut: (_b2 = kf.tangentOut) != null ? _b2 : kf.to
+    };
+  });
   const fullReps = Math.floor(fillDuration / segDuration);
   const remainder = fillDuration - fullReps * segDuration;
   const partialFraction = remainder / segDuration;
@@ -1160,7 +3014,12 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
           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
+          e: i > 0 ? reverseEasing(template[i - 1].e) : void 0,
+          // Reversed traversal swaps each vertex's in/out spatial tangents
+          // (geometry is identical, walked backwards), so curvature and
+          // auto-orientation survive the reversed rep.
+          tangentIn: template[i].tangentOut,
+          tangentOut: template[i].tangentIn
         });
       }
     } else {
@@ -1182,11 +3041,14 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
         looped.push({ t: repStart + cutRelT * segDuration, v: cutValue, e: void 0 });
         return;
       }
-      looped.push({
+      const pushed = {
         t: repStart + entry.relT * segDuration,
         v: entry.v,
         e: i < entries.length - 1 ? entry.e : void 0
-      });
+      };
+      if (entry.tangentIn) pushed.tangentIn = entry.tangentIn;
+      if (entry.tangentOut) pushed.tangentOut = entry.tangentOut;
+      looped.push(pushed);
     }
   }
   for (let rep = 0; rep < fullReps; rep++) {
@@ -1207,7 +3069,7 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
   }
 }
 function normalizeKeyframes(propName, propAnim, duration, defs) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g;
   const keyframes = propAnim.keyframes || propAnim.kfs || [];
   const normalized = [];
   for (const kf of keyframes) {
@@ -1217,14 +3079,20 @@ function normalizeKeyframes(propName, propAnim, duration, defs) {
     if (propName === "d") {
       value = normalizePathValue(value);
     }
-    if (COLOUR_ATTR_NAMES.has(propName)) {
+    const propNameKebab = isCamelCaseWord(propName) ? camelCaseToKebabWordIfNeeded(propName) : propName;
+    if (COLOUR_ATTR_NAMES.has(propNameKebab)) {
       value = (_e = parseColor(value)) != null ? _e : value;
     }
-    normalized.push({
+    const normKf = {
       t: timePct,
       v: value,
       e: resolveEasing(easing, defs)
-    });
+    };
+    const tIn = (_f = kf.tangentIn) != null ? _f : kf.ti;
+    const tOut = (_g = kf.tangentOut) != null ? _g : kf.to;
+    if (tIn) normKf.tangentIn = tIn;
+    if (tOut) normKf.tangentOut = tOut;
+    normalized.push(normKf);
   }
   normalized.sort((a, b) => {
     var _a2, _b2;
@@ -1246,21 +3114,84 @@ function mergeAnimationDefinitions(animations) {
   }
   return merged;
 }
+function materialiseInternalLoopsInPropAnim(propName, propAnim, duration) {
+  var _a;
+  const loopRaw = propAnim.loop;
+  if (loopRaw === void 0 || loopRaw === null || loopRaw === false) return propAnim;
+  const loop = loopRaw === true ? {} : loopRaw;
+  const rawKfs = (_a = propAnim.keyframes) != null ? _a : propAnim.kfs;
+  if (!Array.isArray(rawKfs) || rawKfs.length < 2) return propAnim;
+  const propNameKebab = isCamelCaseWord(propName) ? camelCaseToKebabWordIfNeeded(propName) : propName;
+  const isColour = COLOUR_ATTR_NAMES.has(propNameKebab);
+  const kfs = rawKfs.map((kf) => {
+    var _a2, _b, _c, _d, _e, _f, _g, _h;
+    const t = (_a2 = kf.t) != null ? _a2 : kf.time;
+    let v = (_b = kf.v) != null ? _b : kf.value;
+    if (propName === "d") v = normalizePathValue(v);
+    if (isColour) v = (_c = parseColor(v)) != null ? _c : v;
+    const e = (_d = kf.e) != null ? _d : kf.easing;
+    const out2 = { t, v, e };
+    if ((_e = kf.tangentIn) != null ? _e : kf.ti) out2.tangentIn = (_f = kf.tangentIn) != null ? _f : kf.ti;
+    if ((_g = kf.tangentOut) != null ? _g : kf.to) out2.tangentOut = (_h = kf.tangentOut) != null ? _h : kf.to;
+    return out2;
+  });
+  const expanded = expandLoopKeyframes(propName, kfs, loop, duration);
+  const out = { kfs: expanded };
+  if (propAnim.autoOrient !== void 0) out.autoOrient = propAnim.autoOrient;
+  return out;
+}
+function materialiseInternalLoopsInTree(root, duration) {
+  const ret = walkAndMaterialiseLoops(root, duration);
+  return ret != null ? ret : root;
+}
+function walkAndMaterialiseLoops(node, duration) {
+  let newChildren;
+  if (node.children) {
+    for (let i = 0; i < node.children.length; i++) {
+      const ret = walkAndMaterialiseLoops(node.children[i], duration);
+      if (ret !== null) {
+        if (!newChildren) newChildren = node.children.slice();
+        newChildren[i] = ret;
+      }
+    }
+  }
+  let newAnimate;
+  const animBucket = node.animate;
+  if (animBucket && typeof animBucket === "object" && !Array.isArray(animBucket)) {
+    const animDef = animBucket;
+    for (const propName of Object.keys(animDef)) {
+      const propAnim = animDef[propName];
+      const materialised = materialiseInternalLoopsInPropAnim(propName, propAnim, duration);
+      if (materialised !== propAnim) {
+        if (!newAnimate) newAnimate = __spreadValues({}, animDef);
+        newAnimate[propName] = materialised;
+      }
+    }
+  }
+  if (!newChildren && !newAnimate) return null;
+  const cloned = __spreadValues({}, node);
+  if (newChildren) cloned.children = newChildren;
+  if (newAnimate) cloned.animate = newAnimate;
+  return cloned;
+}
 var _elementIdCounter = 0;
 function generateElementId() {
   return "_px_el_" + ++_elementIdCounter;
 }
-function normalizeAnimationDefinition(animDef, duration, defs) {
+function normalizeAnimationDefinition(animDef, duration, defs, engine = PxAnimatorEngine.webapi) {
   const normalized = {};
   for (const [propName, propAnim] of Object.entries(animDef)) {
     const normalizedKfs = normalizeKeyframes(propName, propAnim, duration, defs);
     if (normalizedKfs.length > 0) {
-      normalized[propName] = { kfs: normalizedKfs };
+      const out = { kfs: normalizedKfs };
+      if (propAnim.autoOrient !== void 0) out.autoOrient = propAnim.autoOrient;
+      if (propAnim.loop !== void 0) out.loop = propAnim.loop;
+      normalized[propName] = engine === PxAnimatorEngine.webapi && propName === "transform" ? materialiseMotionPathInPropAnim(out) : out;
     }
   }
   return normalized;
 }
-function getNormalisedBindings(doc) {
+function getNormalisedBindings(doc, engine = PxAnimatorEngine.webapi) {
   const animatorConfig = getAnimatorConfig(doc) || {};
   const defs = getDefs(doc);
   const duration = animatorConfig.duration || 1e3;
@@ -1270,7 +3201,7 @@ function getNormalisedBindings(doc) {
     const animDefs = resolveElementAnimation(animate, defs);
     if (animDefs.length === 0) return null;
     const merged = mergeAnimationDefinitions(animDefs);
-    const normalizedAnim = normalizeAnimationDefinition(merged, duration, defs);
+    const normalizedAnim = normalizeAnimationDefinition(merged, duration, defs, engine);
     if (Object.keys(normalizedAnim).length === 0) return null;
     return {
       id,
@@ -1285,10 +3216,11 @@ function getNormalisedBindings(doc) {
     }
   }
   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) {
@@ -1296,115 +3228,870 @@ function getNormalisedBindings(doc) {
         processNode(node.children[i]);
       }
     }
-  };
-  if (doc.children) {
-    for (let i = 0; i < doc.children.length; i++) {
-      processNode(doc.children[i]);
-    }
+  };
+  if (doc.children) {
+    for (let i = 0; i < doc.children.length; i++) {
+      processNode(doc.children[i]);
+    }
+  }
+  return bindings;
+}
+function getKeyframesPair(keyframes, progress) {
+  var _a, _b;
+  let prevKf = keyframes[0];
+  let nextKf = keyframes[keyframes.length - 1];
+  for (let j = 0; j < keyframes.length - 1; j++) {
+    const aOff = (_a = keyframes[j].t) != null ? _a : 0;
+    const bOff = (_b = keyframes[j + 1].t) != null ? _b : 0;
+    if (aOff <= progress && progress <= bOff) {
+      prevKf = keyframes[j];
+      nextKf = keyframes[j + 1];
+      break;
+    }
+  }
+  return { prevKf, nextKf };
+}
+function calcPropertyValue(propName, propAnim, progress) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const keyframes = propAnim.kfs || propAnim.keyframes || [];
+  if (keyframes.length === 0) return null;
+  const { prevKf, nextKf } = getKeyframesPair(keyframes, progress);
+  let localProgress = prevKf === nextKf ? 0 : remap(progress, (_a = prevKf.t) != null ? _a : 0, (_b = nextKf.t) != null ? _b : 0, 0, 1);
+  localProgress = clamp(localProgress, 0, 1);
+  const easing = (_c = prevKf.e) != null ? _c : prevKf.easing;
+  if (easing && Array.isArray(easing)) {
+    try {
+      localProgress = cubicBezier(easing)(localProgress);
+    } catch (e) {
+    }
+  }
+  let cssAttrName = isCamelCaseWord(propName) ? camelCaseToKebabWordIfNeeded(propName) : propName;
+  let cssValue = null;
+  const prevV = (_d = prevKf == null ? void 0 : prevKf.v) != null ? _d : prevKf == null ? void 0 : prevKf.value;
+  const nextV = (_e = nextKf == null ? void 0 : nextKf.v) != null ? _e : nextKf == null ? void 0 : nextKf.value;
+  if (cssAttrName === "d") {
+    const prevPaths = (_f = prevV == null ? void 0 : prevV.paths) != null ? _f : Array.isArray(prevV) ? prevV : [];
+    const nextPaths = (_g = nextV == null ? void 0 : nextV.paths) != null ? _g : Array.isArray(nextV) ? nextV : [];
+    cssValue = interpolateBeziers(
+      prevPaths,
+      nextPaths,
+      localProgress
+    ).map((bz) => bezierToSvgPath(bz)).join("");
+  } else if (COLOUR_ATTR_NAMES.has(cssAttrName)) {
+    cssValue = toRGBA(interpolateColor(
+      prevV || [0, 0, 0, 1],
+      nextV || [0, 0, 0, 1],
+      localProgress
+    ));
+    cssAttrName = propName;
+  } else if (cssAttrName === "stroke-dasharray") {
+    cssValue = interpolateVec(
+      prevV || [],
+      nextV || [],
+      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],
+      nextV || [0, 0],
+      localProgress
+    );
+    cssValue = "translate(" + v.join(",") + ")";
+    cssAttrName = "transform";
+  } else if (cssAttrName === "rotate") {
+    const v = interpolateNum(
+      +(prevV || 0),
+      +(nextV || 0),
+      localProgress
+    );
+    cssValue = "rotate(" + v + ")";
+    cssAttrName = "transform";
+  } else if (cssAttrName === "scale") {
+    const v = interpolateVec(
+      prevV || [1, 1],
+      nextV || [1, 1],
+      localProgress
+    );
+    cssValue = "scale(" + v.join(",") + ")";
+    cssAttrName = "transform";
+  } else {
+    const num2 = interpolateNum(
+      +(prevV || 0),
+      +(nextV || 0),
+      localProgress
+    );
+    cssValue = num2;
+  }
+  if (PCT_BASED_ATTR_NAMES.has(cssAttrName) && typeof cssValue === "number") {
+    cssValue = cssValue * 100 + "%";
+  }
+  return { k: cssAttrName, v: cssValue === null ? "" : "" + cssValue };
+}
+function calcAnimationValues(animDef, progress) {
+  const result = {};
+  for (const [propName, propAnim] of Object.entries(animDef)) {
+    const computed = calcPropertyValue(propName, propAnim, progress);
+    if (computed) {
+      result[computed.k] = computed.v;
+    }
+  }
+  return result;
+}
+
+// src/effects/trimPathEffect.ts
+function applyTrimPathEffect(node, trimPath, isCombinedShape, ctx) {
+  if (!trimPath) return node;
+  const trimAllAsOne = !!trimPath.trimAllAsOne;
+  const leafEntries = [];
+  let acc = 0;
+  const measure = (n) => {
+    if (Array.isArray(n.children) && n.children.length > 0) {
+      for (const ch of n.children) measure(ch);
+      return;
+    }
+    const d = typeof n.d === "string" ? n.d : rectToPathD(n);
+    if (d === void 0) return;
+    const subpaths = parseSvgPathToBezier(d);
+    if (!subpaths.length) return;
+    const entry = { leaf: n, subpaths: [] };
+    for (const sp of subpaths) {
+      if (!trimAllAsOne) acc = 0;
+      const lengthPx = pxBezierPathLength(sp);
+      entry.subpaths.push({ subpath: sp, lengthPx, startOffsetPx: acc });
+      acc += lengthPx;
+    }
+    leafEntries.push(entry);
+  };
+  measure(node);
+  if (!leafEntries.length) return node;
+  const chainLengthPx = acc;
+  if (trimAllAsOne && chainLengthPx < 1e-3) return node;
+  const offsetReadRaw = readAnimatable(trimPath.offset);
+  const offsetRead = offsetReadRaw.kind === "absent" /* Absent */ ? { kind: "static" /* Static */, value: 0 } : offsetReadRaw;
+  const rangeReadRaw = readRangeWithCrossings(trimPath.range);
+  const rangeRead = rangeReadRaw.kind === "absent" /* Absent */ ? { kind: "static" /* Static */, value: [0, 1] } : rangeReadRaw;
+  const offsetValues = readScalarValues(offsetRead);
+  const minOffset = offsetValues.length ? Math.min(...offsetValues) : 0;
+  const maxOffset = offsetValues.length ? Math.max(...offsetValues) : 0;
+  const minMaxOffset = [minOffset, maxOffset];
+  if (leafEntries.length === 1 && leafEntries[0].leaf === node && leafEntries[0].subpaths.length === 1) {
+    const entry = leafEntries[0];
+    const sp = entry.subpaths[0];
+    const pathLengthPx = trimAllAsOne ? chainLengthPx : sp.lengthPx;
+    if (pathLengthPx < 1e-3) return node;
+    const startOffsetPct = trimAllAsOne ? sp.startOffsetPx / pathLengthPx : 0;
+    return collapseLeafWithTrim(entry.leaf, pathLengthPx, startOffsetPct, minMaxOffset, offsetRead, rangeRead);
+  }
+  const replacements = /* @__PURE__ */ new Map();
+  for (const entry of leafEntries) {
+    const newChildren = [];
+    for (const sp of entry.subpaths) {
+      const pathLengthPx = trimAllAsOne ? chainLengthPx : sp.lengthPx;
+      if (pathLengthPx < 1e-3) continue;
+      const startOffsetPct = trimAllAsOne ? sp.startOffsetPx / pathLengthPx : 0;
+      newChildren.push(...buildSubpathNodes(entry.leaf, sp.subpath, pathLengthPx, startOffsetPct, minMaxOffset, offsetRead, rangeRead, ctx));
+    }
+    replacements.set(entry.leaf, wrapLeafAsGroup(entry.leaf, newChildren));
+  }
+  const swap = (n) => {
+    const r = replacements.get(n);
+    if (r) return r;
+    if (Array.isArray(n.children) && n.children.length > 0) {
+      return __spreadProps(__spreadValues({}, n), { children: n.children.map(swap) });
+    }
+    return n;
+  };
+  return swap(node);
+}
+function wrapLeafAsGroup(leaf, children) {
+  const wrapper = __spreadProps(__spreadValues({}, leaf), { type: "g", children });
+  delete wrapper.d;
+  delete wrapper.strokeDasharray;
+  delete wrapper.strokeDashoffset;
+  delete wrapper.effects;
+  return wrapper;
+}
+function buildSubpathNodes(leaf, subpath, pathLengthPx, startOffsetPct, minMaxOffset, offsetRead, rangeRead, ctx) {
+  const offsetToDashOffset = makeOffsetToDashOffset(startOffsetPct, pathLengthPx, minMaxOffset);
+  const rangeToDasharray = makeRangeToDasharray(pathLengthPx, minMaxOffset);
+  const dashOffsetAttr = computeAnimAttr(offsetRead, offsetToDashOffset);
+  const dashArrayAttr = computeAnimAttr(rangeRead, rangeToDasharray);
+  const strokeOpacityAttr = computeOpacityFromRange(rangeRead);
+  const dStr = bezierToSvgPath(subpath);
+  const base = makeBareSubpath(dStr);
+  applyAttr(base, "strokeDasharray", dashArrayAttr);
+  applyAttr(base, "strokeDashoffset", dashOffsetAttr);
+  applyAttr(base, "strokeOpacity", strokeOpacityAttr);
+  return [base];
+}
+function collapseLeafWithTrim(leaf, pathLengthPx, startOffsetPct, minMaxOffset, offsetRead, rangeRead) {
+  const offsetToDashOffset = makeOffsetToDashOffset(startOffsetPct, pathLengthPx, minMaxOffset);
+  const rangeToDasharray = makeRangeToDasharray(pathLengthPx, minMaxOffset);
+  const node = __spreadValues({}, leaf);
+  delete node.effects;
+  applyAttr(node, "strokeDasharray", computeAnimAttr(rangeRead, rangeToDasharray));
+  applyAttr(node, "strokeDashoffset", computeAnimAttr(offsetRead, offsetToDashOffset));
+  applyAttr(node, "strokeOpacity", computeOpacityFromRange(rangeRead));
+  return node;
+}
+function makeBareSubpath(dStr) {
+  return { type: "path", d: dStr };
+}
+var SMALL_PADDING_PX = 1;
+function makeOffsetToDashOffset(startOffsetPct, pathLengthPx, minMaxOffset) {
+  const [minIdx] = getOffsetIndexRange(minMaxOffset);
+  return (offsetVal) => pathLengthPx * (-offsetVal - minIdx + startOffsetPct) + SMALL_PADDING_PX;
+}
+function makeRangeToDasharray(pathLengthPx, minMaxOffset) {
+  const [minIdx, maxIdx] = getOffsetIndexRange(minMaxOffset);
+  const repeats = maxIdx - minIdx + 1;
+  return (rangeVal) => {
+    const a = clamp(rangeVal[0], 0, 1);
+    const b = clamp(rangeVal[1], 0, 1);
+    const minR = Math.min(a, b);
+    const maxR = Math.max(a, b);
+    const out = [0];
+    let gap = SMALL_PADDING_PX;
+    for (let i = 0; i < repeats; i++) {
+      out.push(gap + minR * pathLengthPx);
+      out.push((maxR - minR) * pathLengthPx);
+      gap = (1 - maxR) * pathLengthPx;
+    }
+    out.push(gap + SMALL_PADDING_PX);
+    return out;
+  };
+}
+function getOffsetIndexRange(minMaxOffset) {
+  return [
+    Math.floor(Math.min(-minMaxOffset[0], -minMaxOffset[1])),
+    Math.ceil(Math.max(-minMaxOffset[0], -minMaxOffset[1]))
+  ];
+}
+function readScalarValues(r) {
+  var _a;
+  if (r.kind === "absent" /* Absent */) return [];
+  if (r.kind === "static" /* Static */) return [r.value];
+  const out = [];
+  for (const kf of r.keyframes) {
+    const v = (_a = kf.value) != null ? _a : kf.v;
+    if (typeof v === "number") out.push(v);
+  }
+  return out;
+}
+function computeAnimAttr(read, map) {
+  if (read.kind === "absent" /* Absent */) return void 0;
+  if (read.kind === "static" /* Static */) return { kind: "static" /* Static */, value: map(read.value) };
+  return {
+    kind: "animated" /* Animated */,
+    keyframes: read.keyframes.map((kf) => {
+      var _a, _b, _c, _d;
+      return {
+        time: (_b = (_a = kf.time) != null ? _a : kf.t) != null ? _b : 0,
+        value: map((_c = kf.value) != null ? _c : kf.v),
+        easing: (_d = kf.easing) != null ? _d : kf.e
+      };
+    })
+  };
+}
+function applyAttr(node, attrName, attr) {
+  if (!attr) return;
+  if (attr.kind === "static" /* Static */) {
+    node[attrName] = attr.value;
+    return;
+  }
+  const prevAnimate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
+  const animate = __spreadValues({}, prevAnimate || {});
+  animate[attrName] = { keyframes: attr.keyframes };
+  node.animate = animate;
+}
+function computeOpacityFromRange(rangeRead) {
+  var _a, _b, _c, _d, _e, _f;
+  const hide = (v) => v[0] === v[1];
+  if (rangeRead.kind === "absent" /* Absent */) return void 0;
+  if (rangeRead.kind === "static" /* Static */) return hide(rangeRead.value) ? { kind: "static" /* Static */, value: 0 } : void 0;
+  const kfs = rangeRead.keyframes;
+  let anyHide = false;
+  let allHide = true;
+  for (const kf of kfs) {
+    if (hide((_a = kf.value) != null ? _a : kf.v)) anyHide = true;
+    else allHide = false;
+  }
+  if (!anyHide) return void 0;
+  if (allHide) return { kind: "static" /* Static */, value: 0 };
+  const out = [];
+  for (let i = 0; i < kfs.length; i++) {
+    const kf = kfs[i];
+    const prevKf = i > 0 ? kfs[i - 1] : void 0;
+    const nextKf = i < kfs.length - 1 ? kfs[i + 1] : void 0;
+    const t = (_c = (_b = kf.time) != null ? _b : kf.t) != null ? _c : 0;
+    const thisHide = hide((_d = kf.value) != null ? _d : kf.v);
+    const prevHide = prevKf ? thisHide && hide((_e = prevKf.value) != null ? _e : prevKf.v) : thisHide;
+    const nextHide = nextKf ? thisHide && hide((_f = nextKf.value) != null ? _f : nextKf.v) : thisHide;
+    if (prevHide && !nextHide) {
+      out.push({ time: t, value: 0 });
+      out.push({ time: t + 1, value: 1 });
+    } else if (!prevHide && nextHide) {
+      out.push({ time: t - 1, value: 1 });
+      out.push({ time: t, value: 0 });
+    }
+  }
+  if (out.length <= 1) return void 0;
+  return { kind: "animated" /* Animated */, keyframes: out };
+}
+function readRangeWithCrossings(raw) {
+  const r = readAnimatable(raw);
+  if (r.kind !== "animated" /* Animated */) return r;
+  const kfs = r.keyframes.map((kf) => {
+    var _a, _b, _c, _d;
+    return {
+      time: (_b = (_a = kf.time) != null ? _a : kf.t) != null ? _b : 0,
+      value: (_c = kf.value) != null ? _c : kf.v,
+      easing: (_d = kf.easing) != null ? _d : kf.e
+    };
+  });
+  const hasReverse = kfs.some((kf) => kf.value[0] > kf.value[1]);
+  if (!hasReverse) {
+    return {
+      kind: "animated" /* Animated */,
+      keyframes: kfs.map((kf) => ({ time: kf.time, value: kf.value, easing: kf.easing }))
+    };
+  }
+  const crossingTimes = [];
+  for (let i = 1; i < kfs.length; i++) {
+    const prev = kfs[i - 1];
+    const cur = kfs[i];
+    const dPrev = prev.value[1] - prev.value[0];
+    const dCur = cur.value[1] - cur.value[0];
+    if (dPrev * dCur < 0) {
+      const t = bisectionForRangeCrossing(prev, cur);
+      if (t !== null && t > prev.time && t < cur.time) {
+        crossingTimes.push(Math.round(t));
+      }
+    }
+  }
+  const uniqueTs = Array.from(new Set(crossingTimes)).sort((a, b) => a - b);
+  const out = [];
+  let j = 0;
+  for (const kf of kfs) {
+    while (j < uniqueTs.length && uniqueTs[j] < kf.time) {
+      const t = uniqueTs[j++];
+      const v2 = interpolateRangeAt(kfs, t);
+      const m = (v2[0] + v2[1]) / 2;
+      out.push({ time: t, value: [m, m] });
+    }
+    const v = kf.value[0] > kf.value[1] ? [kf.value[1], kf.value[0]] : kf.value;
+    out.push({ time: kf.time, value: v, easing: kf.easing });
+  }
+  while (j < uniqueTs.length) {
+    const t = uniqueTs[j++];
+    const v = interpolateRangeAt(kfs, t);
+    const m = (v[0] + v[1]) / 2;
+    out.push({ time: t, value: [m, m] });
+  }
+  return { kind: "animated" /* Animated */, keyframes: out };
+}
+function bisectionForRangeCrossing(prev, cur) {
+  const f = (t) => {
+    const a = (t - prev.time) / (cur.time - prev.time);
+    const v0 = prev.value[0] + (cur.value[0] - prev.value[0]) * a;
+    const v1 = prev.value[1] + (cur.value[1] - prev.value[1]) * a;
+    return v1 - v0;
+  };
+  let lo = prev.time, hi = cur.time;
+  let fLo = f(lo);
+  if (fLo === 0) return lo;
+  const fHi = f(hi);
+  if (fHi === 0) return hi;
+  if (fLo * fHi > 0) return null;
+  for (let i = 0; i < 100; i++) {
+    const mid = (lo + hi) / 2;
+    const fMid = f(mid);
+    if (fMid === 0 || Math.abs(hi - lo) < 1e-4) return mid;
+    if (fLo * fMid < 0) {
+      hi = mid;
+    } else {
+      lo = mid;
+      fLo = fMid;
+    }
+  }
+  return (lo + hi) / 2;
+}
+function interpolateRangeAt(kfs, t) {
+  if (t <= kfs[0].time) return kfs[0].value;
+  if (t >= kfs[kfs.length - 1].time) return kfs[kfs.length - 1].value;
+  for (let i = 1; i < kfs.length; i++) {
+    if (t <= kfs[i].time) {
+      const prev = kfs[i - 1];
+      const cur = kfs[i];
+      const a = (t - prev.time) / (cur.time - prev.time);
+      return [
+        prev.value[0] + (cur.value[0] - prev.value[0]) * a,
+        prev.value[1] + (cur.value[1] - prev.value[1]) * a
+      ];
+    }
+  }
+  return kfs[kfs.length - 1].value;
+}
+function pxBezierPathLength(path) {
+  const v = path.v;
+  if (!v || v.length < 2) return 0;
+  let total = 0;
+  for (let i = 0; i < v.length - 1; i++) {
+    total += segmentLength(path, i, i + 1);
+  }
+  if (path.c && v.length > 1) {
+    total += segmentLength(path, v.length - 1, 0);
+  }
+  return total;
+}
+function segmentLength(path, from, to) {
+  var _a, _b, _c, _d;
+  const v = path.v;
+  const p0 = v[from];
+  const p3 = v[to];
+  const p1 = (_b = (_a = path.o) == null ? void 0 : _a[from]) != null ? _b : p0;
+  const p2 = (_d = (_c = path.i) == null ? void 0 : _c[to]) != null ? _d : p3;
+  const lut = bezier2D_arcLengthLUT(p0, p1, p2, p3);
+  return lut.ds[lut.ds.length - 1];
+}
+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";
+}
+
+// src/effects/PlayerEffectsUtil.ts
+function applyPlayerEffects(root) {
+  const ctx = {
+    defs: [],
+    warnings: [],
+    errors: [],
+    idMap: /* @__PURE__ */ new Map(),
+    nextId: 0,
+    contentRefInnerIds: /* @__PURE__ */ new Map(),
+    maskAncestorChains: /* @__PURE__ */ new Map()
+  };
+  const working = clone(root);
+  indexById(working, ctx.idMap);
+  identifyContentRefTargets(working, ctx, () => genId(ctx, "inner"));
+  collectMaskAncestorChains(working, ctx);
+  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, fillGradient, strokeGradient, textAlongPath } = fx != null ? fx : {};
+  const isCombinedShape = fx == null ? void 0 : fx.isCombinedShape;
+  if (fx) delete node.effects;
+  let n = node;
+  n = applyTextAlongPathEffect(n, textAlongPath, ctx);
+  n = applyFillGradientEffect(n, fillGradient, ctx);
+  n = applyStrokeGradientEffect(n, strokeGradient, ctx);
+  n = applyTrimPathEffect(n, trimPath, isCombinedShape, ctx);
+  n = applyRepeaterEffect(n, repeater, ctx);
+  n = applyMaskedByEffect(n, maskedBy, transformation, ctx);
+  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) {
+  applyAllRetimeEffects(node, ctx);
+  return node;
+}
+
+// src/PxAnimatorUseMaterialiser.ts
+function materialiseAnimatedUseInstances(root) {
+  var _a;
+  const idMap = buildIdMap(root);
+  const animatedIds = computeAnimatedSubtreeIds(root, idMap);
+  if (animatedIds.size === 0) return root;
+  let idCounter = 0;
+  const genId3 = () => "_lw_use_mat_" + ++idCounter;
+  const defsCollector = [];
+  const walked = walkAndMaterialise2(root, idMap, animatedIds, genId3, defsCollector);
+  if (defsCollector.length === 0) return walked;
+  const defsNode = { type: "defs", children: defsCollector };
+  const newChildren = [...(_a = walked.children) != null ? _a : [], defsNode];
+  return __spreadProps(__spreadValues({}, walked), { children: newChildren });
+}
+function buildIdMap(root) {
+  const map = /* @__PURE__ */ new Map();
+  const visit = (n) => {
+    var _a;
+    if (typeof n.id === "string") map.set(n.id, n);
+    (_a = n.children) == null ? void 0 : _a.forEach(visit);
+  };
+  visit(root);
+  return map;
+}
+function computeAnimatedSubtreeIds(root, idMap) {
+  const cache = /* @__PURE__ */ new WeakMap();
+  const result = /* @__PURE__ */ new Set();
+  const hasAnim = (n, visiting) => {
+    const cached = cache.get(n);
+    if (cached !== void 0) return cached;
+    if (visiting.has(n)) return false;
+    visiting.add(n);
+    let r = false;
+    if (n.animate && typeof n.animate === "object" && !Array.isArray(n.animate)) {
+      for (const _ in n.animate) {
+        r = true;
+        break;
+      }
+    }
+    if (!r && n.children) {
+      for (const ch of n.children) {
+        if (hasAnim(ch, visiting)) {
+          r = true;
+          break;
+        }
+      }
+    }
+    if (!r && n.type === "use" && typeof n.href === "string") {
+      const targetId = stripHash2(n.href);
+      const target = targetId ? idMap.get(targetId) : void 0;
+      if (target) r = hasAnim(target, visiting);
+    }
+    visiting.delete(n);
+    cache.set(n, r);
+    return r;
+  };
+  for (const [id, node] of idMap) {
+    if (hasAnim(node, /* @__PURE__ */ new Set())) result.add(id);
+  }
+  return result;
+}
+function stripHash2(href) {
+  if (typeof href !== "string") return void 0;
+  return href.startsWith("#") ? href.slice(1) : href;
+}
+function materialiseOneUse(useNode, target, idMap, animatedIds, genId3, defsCollector) {
+  const clone2 = deepClonePxNode(target);
+  regenerateIdsAndRewriteRefs(clone2, genId3);
+  const rewrittenClone = clone2.type === "symbol" ? rewriteSymbolRootToGroup(clone2, genId3, defsCollector) : clone2;
+  const materialisedClone = walkAndMaterialise2(rewrittenClone, idMap, animatedIds, genId3, defsCollector);
+  const newNode = __spreadProps(__spreadValues({}, useNode), { type: "g", children: [materialisedClone] });
+  delete newNode.href;
+  return applyUseOffsetToG(newNode);
+}
+function rewriteSymbolRootToGroup(symbolNode, genId3, defsCollector) {
+  const viewBox = parseViewBox(symbolNode.viewBox);
+  const g = __spreadProps(__spreadValues({}, symbolNode), { type: "g" });
+  delete g.viewBox;
+  delete g.preserveAspectRatio;
+  delete g.width;
+  delete g.height;
+  if (!viewBox) return g;
+  const [vbX, vbY, vbW, vbH] = viewBox;
+  if (vbX !== 0 || vbY !== 0) {
+    g.transform = "translate(" + -vbX + "," + -vbY + ")";
+  }
+  const clipId = genId3();
+  defsCollector.push({
+    type: "clipPath",
+    id: clipId,
+    children: [{ type: "rect", x: vbX, y: vbY, width: vbW, height: vbH }]
+  });
+  g.clipPath = "url(#" + clipId + ")";
+  return g;
+}
+function parseViewBox(v) {
+  if (typeof v !== "string") return void 0;
+  const parts = v.trim().split(/[\s,]+/).map(Number);
+  if (parts.length < 4 || parts.some((n) => !Number.isFinite(n))) return void 0;
+  return [parts[0], parts[1], parts[2], parts[3]];
+}
+function walkAndMaterialise2(node, idMap, animatedIds, genId3, defsCollector) {
+  if (node.type === "use" && typeof node.href === "string") {
+    const targetId = stripHash2(node.href);
+    if (targetId && animatedIds.has(targetId)) {
+      const target = idMap.get(targetId);
+      if (target) return materialiseOneUse(node, target, idMap, animatedIds, genId3, defsCollector);
+    }
+  }
+  if (!node.children) return node;
+  let changed = false;
+  const newChildren = node.children.map((ch) => {
+    const m = walkAndMaterialise2(ch, idMap, animatedIds, genId3, defsCollector);
+    if (m !== ch) changed = true;
+    return m;
+  });
+  return changed ? __spreadProps(__spreadValues({}, node), { children: newChildren }) : node;
+}
+
+// src/PxAnimatorMaterialiseAll.ts
+function materialiseAllInTree(doc, engine, opts) {
+  var _a, _b;
+  let root = applyPlayerEffects(doc).root;
+  const duration = (_b = (_a = getAnimatorConfig(root)) == null ? void 0 : _a.duration) != null ? _b : DEFAULT_DURATION_MS;
+  root = materialiseInternalLoopsInTree(root, duration);
+  if (engine === PxAnimatorEngine.webapi) {
+    root = materialiseMotionPathsInTree(root, opts == null ? void 0 : opts.motionPath);
+    root = materialiseAnimatedUseInstances(root);
+  }
+  return root;
+}
+
+// src/PxAnimatorDOM.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var DISALLOWED_SVG_TAGS_LOWER = /* @__PURE__ */ new Set([
+  "script",
+  "foreignobject"
+]);
+var URL_VALUE_ATTRS_LOWER = /* @__PURE__ */ new Set([
+  "href",
+  // <use>, <image>
+  "xlink:href",
+  // legacy <use>
+  "src",
+  // <image>
+  "filter",
+  // url(#filterId)
+  "clippath",
+  // clip-path="url(#…)"
+  "mask",
+  // url(#maskId)
+  "markerstart",
+  // marker-start="url(#…)"
+  "markermid",
+  // marker-mid="url(#…)"
+  "markerend"
+  // marker-end="url(#…)"
+]);
+var IMAGE_REF_ATTRS_LOWER = /* @__PURE__ */ new Set(["href", "xlink:href", "src"]);
+var DATA_RASTER_IMAGE_RE = /^data:image\/(?:png|jpe?g|gif|webp|bmp);base64,/i;
+function isDangerousAttrName(nameLower) {
+  if (nameLower.startsWith("on")) return true;
+  return false;
+}
+function sanitiseAttributeValue(name, value) {
+  const nameLower = name.toLowerCase();
+  if (isDangerousAttrName(nameLower)) {
+    console.warn("Attribute blocked (event handler / dangerous): ", 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() must be internal url(#id), got:', value);
+      return void 0;
+    }
+    return value;
+  }
+  if (URL_VALUE_ATTRS_LOWER.has(nameLower)) {
+    const str = String(value);
+    if (str.startsWith("#")) return value;
+    if (/^url\(#[^)]+\)$/.test(str)) return value;
+    if (IMAGE_REF_ATTRS_LOWER.has(nameLower) && DATA_RASTER_IMAGE_RE.test(str)) return value;
+    console.warn('Attribute "' + nameLower + '" blocked: must be #id, url(#id), or base64 raster data: URI, got:', value);
+    return void 0;
+  }
+  return value;
+}
+function createElement(tagName, normalisedProps, style, children, textContent) {
+  if (DISALLOWED_SVG_TAGS_LOWER.has(tagName.toLowerCase())) {
+    console.warn("SVG tag blocked (dangerous): ", tagName);
+    return null;
+  }
+  const element = document.createElementNS(SVG_NS, tagName);
+  for (const propName in normalisedProps) {
+    const sanitised = sanitiseAttributeValue(propName, normalisedProps[propName]);
+    if (sanitised === void 0) continue;
+    element.setAttribute(camelCaseToKebabWordIfNeeded(propName), sanitised);
+  }
+  if (style) {
+    for (const styleProp in style) {
+      element.style[styleProp] = String(style[styleProp]);
+    }
+  }
+  if (children) {
+    for (const child of children) {
+      element.appendChild(child);
+    }
+  }
+  if (textContent) element.textContent = textContent;
+  return element;
+}
+function resolveStyle(style, defs) {
+  var _a;
+  if (!style) return void 0;
+  if (typeof style === "string") {
+    return (_a = defs == null ? void 0 : defs.styles) == null ? void 0 : _a[style];
+  }
+  return style;
+}
+function getNormalizedProps(props) {
+  const propsCopy = {};
+  for (const rawKey of Object.keys(props)) {
+    const key = kebabToCamelCaseWord(rawKey);
+    if (INTERNAL_ATTRS.has(key)) continue;
+    if (key === "style") continue;
+    let value = props[rawKey];
+    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");
+        value = value.join(",");
+      }
+      if (key === "rotate") value = value + "deg";
+      propsCopy["transform"] = key + "(" + value + ")";
+    } else if (value !== void 0 && value !== null) {
+      propsCopy[key] = String(value);
+    }
+  }
+  return propsCopy;
+}
+function renderNode(node, defs) {
+  if (!node) return null;
+  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) {
+    for (const ch of children) {
+      const child = renderNode(ch, nodeDefs);
+      if (child) {
+        if (!childElements) childElements = [];
+        childElements.push(child);
+      }
+    }
   }
-  return bindings;
+  return createElement(
+    type || "g",
+    getNormalizedProps(props),
+    resolvedStyle,
+    childElements,
+    props[TEXT_ATTR] || props[TEXT_CONTENT_ATTR]
+  );
 }
-function getKeyframesPair(keyframes, progress) {
-  var _a, _b;
-  let prevKf = keyframes[0];
-  let nextKf = keyframes[keyframes.length - 1];
-  for (let j = 0; j < keyframes.length - 1; j++) {
-    const aOff = (_a = keyframes[j].t) != null ? _a : 0;
-    const bOff = (_b = keyframes[j + 1].t) != null ? _b : 0;
-    if (aOff <= progress && progress <= bOff) {
-      prevKf = keyframes[j];
-      nextKf = keyframes[j + 1];
+
+// src/PxAnimatorTriggers.ts
+function setupAnimationTriggers(api, config) {
+  const { startOn, outAction = "continue", scrollIntoViewThreshold = 0.5 } = config;
+  const root = api.getRootElement();
+  if (!root) {
+    console.warn("setupAnimationTriggers: No root element found for animation.");
+    return api;
+  }
+  const start = () => {
+    api.play();
+  };
+  const handleEndAction = () => {
+    switch (outAction) {
+      case "pause":
+        api.pause();
+        break;
+      case "reset":
+        api.cancel();
+        break;
+      case "reverse":
+        api.play();
+        break;
+      case "continue":
+      default:
+        break;
+    }
+  };
+  switch (startOn) {
+    case "load": {
+      const startHandler = () => start();
+      if (document.readyState === "complete") {
+        startHandler();
+      } else {
+        window.addEventListener("load", startHandler, { once: true });
+      }
       break;
     }
-  }
-  return { prevKf, nextKf };
-}
-function calcPropertyValue(propName, propAnim, progress) {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const keyframes = propAnim.kfs || propAnim.keyframes || [];
-  if (keyframes.length === 0) return null;
-  const { prevKf, nextKf } = getKeyframesPair(keyframes, progress);
-  let localProgress = prevKf === nextKf ? 0 : remap(progress, (_a = prevKf.t) != null ? _a : 0, (_b = nextKf.t) != null ? _b : 0, 0, 1);
-  localProgress = clamp(localProgress, 0, 1);
-  const easing = (_c = prevKf.e) != null ? _c : prevKf.easing;
-  if (easing && Array.isArray(easing)) {
-    try {
-      localProgress = cubicBezier(easing)(localProgress);
-    } catch (e) {
+    case "mouseOver": {
+      const mouseOverHandler = () => start();
+      const mouseOutHandler = () => handleEndAction();
+      root.addEventListener("mouseenter", mouseOverHandler);
+      root.addEventListener("mouseleave", mouseOutHandler);
+      break;
     }
-  }
-  let cssAttrName = isCamelCaseWord(propName) ? camelCaseToKebabWordIfNeeded(propName) : propName;
-  let cssValue = null;
-  const prevV = (_d = prevKf == null ? void 0 : prevKf.v) != null ? _d : prevKf == null ? void 0 : prevKf.value;
-  const nextV = (_e = nextKf == null ? void 0 : nextKf.v) != null ? _e : nextKf == null ? void 0 : nextKf.value;
-  if (cssAttrName === "d") {
-    const prevPaths = (_f = prevV == null ? void 0 : prevV.paths) != null ? _f : Array.isArray(prevV) ? prevV : [];
-    const nextPaths = (_g = nextV == null ? void 0 : nextV.paths) != null ? _g : Array.isArray(nextV) ? nextV : [];
-    cssValue = interpolateBeziers(
-      prevPaths,
-      nextPaths,
-      localProgress
-    ).map((bz) => bezierToSvgPath(bz)).join("");
-  } else if (COLOUR_ATTR_NAMES.has(cssAttrName)) {
-    cssValue = toRGBA(interpolateColor(
-      prevV || [0, 0, 0, 1],
-      nextV || [0, 0, 0, 1],
-      localProgress
-    ));
-    cssAttrName = propName;
-  } else if (cssAttrName === "stroke-dasharray") {
-    cssValue = interpolateVec(
-      prevV || [],
-      nextV || [],
-      localProgress
-    ).join(" ");
-    cssAttrName = propName;
-  } else if (cssAttrName === "translate") {
-    const v = interpolateVec(
-      prevV || [0, 0],
-      nextV || [0, 0],
-      localProgress
-    );
-    cssValue = "translate(" + v.join(",") + ")";
-    cssAttrName = "transform";
-  } else if (cssAttrName === "rotate") {
-    const v = interpolateNum(
-      +(prevV || 0),
-      +(nextV || 0),
-      localProgress
-    );
-    cssValue = "rotate(" + v + ")";
-    cssAttrName = "transform";
-  } else if (cssAttrName === "scale") {
-    const v = interpolateVec(
-      prevV || [1, 1],
-      nextV || [1, 1],
-      localProgress
-    );
-    cssValue = "scale(" + v.join(",") + ")";
-    cssAttrName = "transform";
-  } else {
-    const num = interpolateNum(
-      +(prevV || 0),
-      +(nextV || 0),
-      localProgress
-    );
-    cssValue = num;
-  }
-  if (PCT_BASED_ATTR_NAMES.has(cssAttrName) && typeof cssValue === "number") {
-    cssValue = cssValue * 100 + "%";
-  }
-  return { k: cssAttrName, v: cssValue === null ? "" : "" + cssValue };
-}
-function calcAnimationValues(animDef, progress) {
-  const result = {};
-  for (const [propName, propAnim] of Object.entries(animDef)) {
-    const computed = calcPropertyValue(propName, propAnim, progress);
-    if (computed) {
-      result[computed.k] = computed.v;
+    case "click": {
+      const clickHandler = () => {
+        if (api.isPlaying()) {
+          handleEndAction();
+        } else {
+          start();
+        }
+      };
+      root.addEventListener("click", clickHandler);
+      break;
+    }
+    case "scrollIntoView": {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && entry.intersectionRatio >= scrollIntoViewThreshold) {
+              start();
+            } else {
+              handleEndAction();
+            }
+          });
+        },
+        { threshold: scrollIntoViewThreshold }
+      );
+      observer.observe(root);
+      break;
     }
+    case "programmatic":
+      break;
   }
-  return result;
+  return api;
 }
 
 // src/PxAnimatorFrameLoop.ts
@@ -1413,7 +4100,7 @@ function getSelector(id) {
 }
 function createBasicFrameLoopAnimator(doc, adapter, callbacks) {
   const config = getAnimatorConfig(doc) || {};
-  const bindings = getNormalisedBindings(doc);
+  const bindings = getNormalisedBindings(doc, PxAnimatorEngine.frames);
   const _iterations = config.iterations;
   let iterations = 1;
   if (typeof _iterations === "number") iterations = _iterations || 1;
@@ -1531,6 +4218,10 @@ function createBasicFrameLoopAnimator(doc, adapter, callbacks) {
   };
   const startAnim = () => {
     if (playing) return;
+    if (Number.isFinite(totalDuration) && timeBeforeLastStartMs >= totalDuration) {
+      timeBeforeLastStartMs = 0;
+      finishCalled = false;
+    }
     playing = true;
     lastStartedTs = Date.now();
     loopAnim(true);
@@ -1681,6 +4372,9 @@ function createCssKf(kf, t, propName, unsupportedSet) {
   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");
@@ -1697,28 +4391,59 @@ function createCssKf(kf, t, propName, unsupportedSet) {
   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;
+  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 (let i = 0; i < keyframes.length; i++) {
-      const kf = keyframes[i];
-      let t = (_b = (_a = kf.t) != null ? _a : kf.time) != null ? _b : 0;
-      t = clamp(t / (config.duration || 1), 0, 1);
+    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
-        }));
+        cssKeyframes.push(__spreadProps(__spreadValues({}, cssKf), { offset: 0 }));
       }
       cssKeyframes.push(cssKf);
-      if (i === keyframes.length - 1 && (cssKf.offset || 0) < 1) {
-        cssKeyframes.push(__spreadProps(__spreadValues({}, cssKf), {
-          offset: 1
-        }));
-      }
+    }
+    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);
@@ -1727,8 +4452,8 @@ function convertToWebApiKeyframes(animDef, unsupportedSet, config) {
   return result;
 }
 function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsupportedAttrs) {
+  var _a;
   const config = getAnimatorConfig(doc) || {};
-  const bindings = getNormalisedBindings(doc);
   if (!rootElement) {
     if (doc.id) {
       const rootSelector = getSelector(doc.id);
@@ -1738,6 +4463,7 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
       console.warn("createFrameLoopAnimator: No root element provided");
     }
   }
+  const bindings = getNormalisedBindings(doc, PxAnimatorEngine.webapi);
   const animations = [];
   const _iterations = config.iterations;
   let iterations;
@@ -1764,7 +4490,11 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
     const effectOptions = {
       duration: config.duration,
       delay: positiveDelay,
-      fill: config.fill,
+      // 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
     };
@@ -1776,12 +4506,12 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
             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;
@@ -1802,29 +4532,29 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
     "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": () => {
-      var _a;
+      var _a2;
       for (const a of animations) {
         try {
-          if (((_a = a.effect) == null ? void 0 : _a.getTiming().iterations) === Infinity) {
+          if (((_a2 = a.effect) == null ? void 0 : _a2.getTiming().iterations) === Infinity) {
             a.effect.updateTiming({ iterations: 1 });
             a.finish();
             a.effect.updateTiming({ iterations: Infinity });
@@ -1841,8 +4571,8 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
       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) => {
@@ -1865,15 +4595,15 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
 function createAnimatorFromConfig(doc, adapter, callbacks, rootElement) {
   const animatorConfig = getAnimatorConfig(doc) || {};
   let res;
-  if (animatorConfig.mode === "frames") {
+  if (animatorConfig.mode === PxAnimatorMode.frames) {
     res = createFrameLoopAnimator(doc, adapter, callbacks, rootElement);
   } else {
     res = createWebApiAnimator(
       doc,
       callbacks,
       rootElement,
-      animatorConfig.mode === "webapi"
-      // Forcing "webapi"
+      animatorConfig.mode === PxAnimatorMode.webapi
+      // forcing webapi
     ) || createFrameLoopAnimator(doc, adapter, callbacks, rootElement);
   }
   if (animatorConfig.debugInstName) {
@@ -1899,6 +4629,7 @@ function deepClone(value) {
   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"]);
@@ -1924,6 +4655,8 @@ function generateNewIds(doc) {
       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) {
@@ -1965,23 +4698,21 @@ function generateNewIds(doc) {
             value[styleProp] = replaceUrlRefs(styleValue, idMap);
           }
         }
-      } else if (typeof value === "object" && value !== null && key !== ANIMATE_ATTR) {
+      } 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;
 }
@@ -1992,8 +4723,12 @@ function replaceUrlRefs(value, idMap) {
   });
 }
 function createAnimatorImpl(doc, adapter, callbacks, containerElement) {
+  const effectsWarnings = validateNodeEffects(doc);
+  for (const w of effectsWarnings) console.warn("[PxAnimator] effects shape warning:", w);
   const animatorConfig = getAnimatorConfig(doc) || {};
   animatorConfig.debug = true;
+  const engine = animatorConfig.mode === PxAnimatorMode.frames ? PxAnimatorEngine.frames : PxAnimatorEngine.webapi;
+  doc = materialiseAllInTree(doc, engine);
   let rootElement = null;
   if (containerElement && doc.children) {
     doc = generateNewIds(doc);
@@ -2007,14 +4742,22 @@ function createAnimatorImpl(doc, adapter, callbacks, containerElement) {
   }
   return createAnimatorFromConfig(doc, adapter, callbacks, rootElement);
 }
-function createAnimator(docOrUrl, adapter, callbacks, containerElement) {
-  if (typeof docOrUrl === "object") {
-    return createAnimatorImpl(docOrUrl, adapter, callbacks, containerElement);
+var PX_ANIMATOR_DATA_KEY = "data";
+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");
     }
@@ -2054,7 +4797,7 @@ function loadTagAnimators() {
     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 });
       }
     }
   }
@@ -2064,20 +4807,269 @@ if (typeof window !== "undefined") {
   window["createAnimator"] = createAnimator;
   window["setupAnimationTriggers"] = setupAnimationTriggers;
 }
+
+// src/effects/PlayerEffectsUtil.visualModel.ts
+var IDENTITY = [1, 0, 0, 1, 0, 0];
+function mul(m, n) {
+  return [
+    m[0] * n[0] + m[2] * n[1],
+    m[1] * n[0] + m[3] * n[1],
+    m[0] * n[2] + m[2] * n[3],
+    m[1] * n[2] + m[3] * n[3],
+    m[0] * n[4] + m[2] * n[5] + m[4],
+    m[1] * n[4] + m[3] * n[5] + m[5]
+  ];
+}
+var translateM = (x, y) => [1, 0, 0, 1, x, y];
+var scaleM = (sx, sy) => [sx, 0, 0, sy, 0, 0];
+function rotateM(deg) {
+  const r = deg * Math.PI / 180;
+  return [Math.cos(r), Math.sin(r), -Math.sin(r), Math.cos(r), 0, 0];
+}
+var skewXM = (deg) => [1, 0, Math.tan(deg * Math.PI / 180), 1, 0, 0];
+var skewYM = (deg) => [1, Math.tan(deg * Math.PI / 180), 0, 1, 0, 0];
+function parseTransformString(s) {
+  let m = IDENTITY;
+  const re = /(translate|rotate|scale|matrix|skewX|skewY)\(([^)]*)\)/g;
+  let hit;
+  while (hit = re.exec(s)) {
+    const fn = hit[1];
+    const a = hit[2].split(/[\s,]+/).filter(Boolean).map(Number);
+    if (fn === "translate") m = mul(m, translateM(a[0] || 0, a[1] || 0));
+    else if (fn === "scale") m = mul(m, scaleM(a[0], a.length > 1 ? a[1] : a[0]));
+    else if (fn === "rotate") m = mul(m, rotateM(a[0]));
+    else if (fn === "skewX") m = mul(m, skewXM(a[0]));
+    else if (fn === "skewY") m = mul(m, skewYM(a[0]));
+    else if (fn === "matrix") m = mul(m, [a[0], a[1], a[2], a[3], a[4], a[5]]);
+  }
+  return m;
+}
+function partsToMatrix(p) {
+  let m = IDENTITY;
+  if (p.translate) m = mul(m, translateM(p.translate[0], p.translate[1]));
+  const pivot = p.origin && (p.rotate !== void 0 || p.scale);
+  if (pivot) m = mul(m, translateM(p.origin[0], p.origin[1]));
+  if (p.rotate !== void 0) m = mul(m, rotateM(p.rotate));
+  if (p.scale) m = mul(m, scaleM(p.scale[0], p.scale[1]));
+  if (pivot) m = mul(m, translateM(-p.origin[0], -p.origin[1]));
+  return m;
+}
+function lerp(a, b, f) {
+  return a + (b - a) * f;
+}
+function interpParts(kfs, t) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  if (!kfs.length) return {};
+  if (t <= ((_a = kfs[0].time) != null ? _a : 0)) return kfs[0].value || {};
+  if (t >= ((_b = kfs[kfs.length - 1].time) != null ? _b : 0)) return kfs[kfs.length - 1].value || {};
+  let i = 0;
+  while (i < kfs.length - 1 && ((_c = kfs[i + 1].time) != null ? _c : 0) < t) i++;
+  const a = kfs[i], b = kfs[i + 1];
+  const f = (t - ((_d = a.time) != null ? _d : 0)) / (((_e = b.time) != null ? _e : 0) - ((_f = a.time) != null ? _f : 0) || 1);
+  const va = a.value || {}, vb = b.value || {};
+  const out = {};
+  if (va.translate && vb.translate) out.translate = [lerp(va.translate[0], vb.translate[0], f), lerp(va.translate[1], vb.translate[1], f)];
+  else out.translate = va.translate || vb.translate;
+  if (va.rotate !== void 0 && vb.rotate !== void 0) out.rotate = lerp(va.rotate, vb.rotate, f);
+  else out.rotate = (_g = va.rotate) != null ? _g : vb.rotate;
+  if (va.scale && vb.scale) out.scale = [lerp(va.scale[0], vb.scale[0], f), lerp(va.scale[1], vb.scale[1], f)];
+  else out.scale = va.scale || vb.scale;
+  out.origin = va.origin || vb.origin;
+  return out;
+}
+function evalTransformValue(v, t) {
+  if (v === void 0 || v === null) return IDENTITY;
+  if (typeof v === "string") return parseTransformString(v);
+  if (v.keyframes) return partsToMatrix(interpParts(v.keyframes, t));
+  if (v.value) return partsToMatrix(v.value);
+  return IDENTITY;
+}
+function nodeMatrix(node, t) {
+  if (node.animate && node.animate.transform) return evalTransformValue(node.animate.transform, t);
+  if (node.transform !== void 0) return evalTransformValue(node.transform, t);
+  return IDENTITY;
+}
+function evalScalar(animated, staticVal, fallback, t) {
+  var _a, _b, _c, _d, _e, _f;
+  if (animated && animated.keyframes && animated.keyframes.length) {
+    const kfs = animated.keyframes;
+    if (t <= ((_a = kfs[0].time) != null ? _a : 0)) return kfs[0].value;
+    if (t >= ((_b = kfs[kfs.length - 1].time) != null ? _b : 0)) return kfs[kfs.length - 1].value;
+    let i = 0;
+    while (i < kfs.length - 1 && ((_c = kfs[i + 1].time) != null ? _c : 0) < t) i++;
+    const a = kfs[i], b = kfs[i + 1];
+    const f = (t - ((_d = a.time) != null ? _d : 0)) / (((_e = b.time) != null ? _e : 0) - ((_f = a.time) != null ? _f : 0) || 1);
+    return lerp(a.value, b.value, f);
+  }
+  return staticVal !== void 0 ? Number(staticVal) : fallback;
+}
+var CONTAINER_TYPES = /* @__PURE__ */ new Set(["svg", "g", "symbol"]);
+var SKIP_TYPES = /* @__PURE__ */ new Set(["defs", "mask", "clipPath", "title"]);
+function buildIdMap2(node, map) {
+  var _a;
+  if (typeof node.id === "string") map.set(node.id, node);
+  (_a = node.children) == null ? void 0 : _a.forEach((c) => buildIdMap2(c, map));
+}
+function num(v) {
+  return v === void 0 || v === null ? 0 : Number(v);
+}
+function round(n) {
+  return Math.round(n * 100) / 100 + 0;
+}
+function geomKey(node) {
+  var _a;
+  switch (node.type) {
+    case "rect":
+      return num(node.width) + "," + num(node.height) + "," + num(node.x) + "," + num(node.y);
+    case "ellipse":
+      return num(node.rx) + "," + num(node.ry) + "," + num(node.cx) + "," + num(node.cy);
+    case "circle":
+      return num(node.r) + "," + num(node.cx) + "," + num(node.cy);
+    case "path":
+      return String((_a = node.d) != null ? _a : "");
+    default:
+      return "";
+  }
+}
+function describePrimitive(node, m, t) {
+  var _a, _b, _c, _d, _e;
+  const fill = (_a = node.fill) != null ? _a : "";
+  const stroke = (_b = node.stroke) != null ? _b : "";
+  const sw = (_d = (_c = node["stroke-width"]) != null ? _c : node.strokeWidth) != null ? _d : "";
+  const opacity = round(evalScalar((_e = node.animate) == null ? void 0 : _e.opacity, node.opacity, 1, t));
+  const masked = node.mask ? 1 : 0;
+  const mat = m.map(round).join(",");
+  return node.type + "|" + geomKey(node) + "|[" + mat + "]|f:" + fill + "|s:" + stroke + "|sw:" + (num(sw) || "") + "|o:" + opacity + "|m:" + masked;
+}
+function flatten(node, parent, t, idMap, out) {
+  var _a;
+  const type = node.type || "";
+  if (SKIP_TYPES.has(type)) return;
+  const m = mul(parent, nodeMatrix(node, t));
+  if (type === "use") {
+    const targetId = typeof node.href === "string" ? node.href.replace(/^#/, "") : "";
+    const target = idMap.get(targetId);
+    const useM = mul(m, translateM(num(node.x), num(node.y)));
+    if (target) flatten(target, useM, t, idMap, out);
+    else out.push("UNRESOLVED_USE:#" + targetId);
+    return;
+  }
+  if (CONTAINER_TYPES.has(type)) {
+    (_a = node.children) == null ? void 0 : _a.forEach((c) => flatten(c, m, t, idMap, out));
+    return;
+  }
+  out.push(describePrimitive(node, m, t));
+}
+function collectSampleTimes(node, into) {
+  var _a;
+  into.add(0);
+  const scanAnim = (anim) => {
+    var _a2;
+    if (!anim || typeof anim !== "object") return;
+    for (const key of Object.keys(anim)) {
+      const kfs = (_a2 = anim[key]) == null ? void 0 : _a2.keyframes;
+      if (Array.isArray(kfs)) kfs.forEach((kf) => {
+        var _a3;
+        return into.add((_a3 = kf.time) != null ? _a3 : 0);
+      });
+    }
+  };
+  scanAnim(node.animate);
+  if (node.transform && typeof node.transform === "object" && node.transform.keyframes) {
+    node.transform.keyframes.forEach((kf) => {
+      var _a2;
+      return into.add((_a2 = kf.time) != null ? _a2 : 0);
+    });
+  }
+  (_a = node.children) == null ? void 0 : _a.forEach((c) => collectSampleTimes(c, into));
+}
+function visualModelAt(root, t) {
+  const idMap = /* @__PURE__ */ new Map();
+  buildIdMap2(root, idMap);
+  const out = [];
+  flatten(root, IDENTITY, t, idMap, out);
+  return out.sort();
+}
+function diffInEffect(a, b) {
+  const times = /* @__PURE__ */ new Set();
+  collectSampleTimes(a, times);
+  collectSampleTimes(b, times);
+  const diffs = [];
+  for (const t of Array.from(times).sort((x, y) => x - y)) {
+    const ma = visualModelAt(a, t);
+    const mb = visualModelAt(b, t);
+    const onlyInA = subtractMultiset(ma, mb);
+    const onlyInB = subtractMultiset(mb, ma);
+    if (onlyInA.length || onlyInB.length) diffs.push({ time: t, onlyInA, onlyInB });
+  }
+  return diffs;
+}
+function subtractMultiset(a, b) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const x of b) counts.set(x, (counts.get(x) || 0) + 1);
+  const extra = [];
+  for (const x of a) {
+    const c = counts.get(x) || 0;
+    if (c > 0) counts.set(x, c - 1);
+    else extra.push(x);
+  }
+  return extra;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   COLOUR_ATTR_NAMES,
+  PX_ANIMATOR_DATA_KEY,
   PX_ANIM_ATTR_NAME,
   PX_ANIM_SRC_ATTR_NAME,
+  PX_TRANSFORM_PART_KEYS,
+  PxAnimatedSvgDocumentSchema,
+  PxAnimationDefinitionSchema,
+  PxAnimatorConfigSchema,
+  PxAnimatorEngine,
+  PxAnimatorMode,
+  PxAttrValueSchema,
+  PxBezierPathSchema,
+  PxBindingSchema,
+  PxDefsSchema,
+  PxEasingOrRefSchema,
+  PxEffectsSchema,
+  PxElementAnimationSchema,
+  PxFillGradientEffectSchema,
+  PxGradientSpreadMethod,
+  PxGradientStopSchema,
+  PxGradientType,
+  PxGradientUnits,
+  PxKeyframeSchema,
+  PxLoopSchema,
+  PxMaskedByEffectSchema,
+  PxNodeBase,
+  PxNodeSchema,
+  PxPropertyAnimationSchema,
+  PxRefEffectSchema,
+  PxRepeaterEffectSchema,
+  PxRetimeEffectSchema,
+  PxStrokeGradientEffectSchema,
+  PxSvgNodeExtra,
+  PxTextAlongPathEffectSchema,
+  PxTransformPartsSchema,
+  PxTransformValueSchema,
+  PxTransformationEffectSchema,
+  PxTriggerSchema,
+  PxTrimPathEffectSchema,
   STYLE_ATTR_NAMES,
   TRANSFORM_FN_NAMES,
+  applyPlayerEffects,
   calcAnimationValues,
   camelCaseToKebabWordIfNeeded,
+  collectSampleTimes,
   createAnimator,
   createAnimatorImpl,
   createBasicFrameLoopAnimator,
   createFrameLoopAnimator,
   createWebApiAnimator,
+  describeSchema,
+  diffInEffect,
+  evaluateMotionPathSegment,
   generateNewIds,
   getAnimatorConfig,
   getBindings,
@@ -2087,9 +5079,20 @@ if (typeof window !== "undefined") {
   isPxElementFileFormat,
   isPxElementFileFormatDeep,
   loadTagAnimators,
+  materialiseAllInTree,
+  materialiseAnimatedUseInstances,
+  materialiseInternalLoopsInPropAnim,
+  materialiseInternalLoopsInTree,
+  materialiseMotionPathInPropAnim,
+  materialiseMotionPathsInTree,
   normalizeDocument,
+  propAnimIsMotionPath,
+  px,
   renderNode,
+  schemaKeys,
   setupAnimationTriggers,
-  toRGBA
+  toRGBA,
+  validateNodeEffects,
+  visualModelAt
 });
 //# sourceMappingURL=index.cjs.map