@pixodesk/svg-animator-vue 1.0.15 → 1.0.17

package/dist/index.umd.js

@@ -56768,7 +56768,6 @@ ${codeFrame}` : message);
   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
   var __hasOwnProp2 = Object.prototype.hasOwnProperty;
   var __propIsEnum = Object.prototype.propertyIsEnumerable;
-  var __pow = Math.pow;
   var __defNormalProp = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues = (a, b) => {
     for (var prop in b || (b = {}))
@@ -56803,12 +56802,15 @@ ${codeFrame}` : message);
     return rec;
   }
   function readAnimatable(raw) {
-    if (raw === void 0) return { kind: "absent" };
+    if (raw === void 0) return {
+      kind: "absent"
+      /* Absent */
+    };
     if (Array.isArray(raw)) return { kind: "static", value: raw };
     if (typeof raw === "object") {
       const obj = raw;
       if (obj.keyframes) {
-        return { kind: "animated", keyframes: obj.keyframes, autoOrient: obj.autoOrient };
+        return { kind: "animated", keyframes: obj.keyframes, autoOrient: obj.autoOrient, loop: obj.loop };
       }
       if (obj.value !== void 0) return { kind: "static", value: obj.value };
     }
@@ -56896,6 +56898,7 @@ ${codeFrame}` : message);
     if (v.kind === "animated") {
       const animTr = { keyframes: v.keyframes.map((kf) => keyframeWith(kf, partsRecord(part, kf.value, void 0))) };
       if (v.autoOrient) animTr.autoOrient = true;
+      if (v.loop !== void 0) animTr.loop = v.loop;
       return {
         type: "g",
         animate: { transform: animTr },
@@ -56914,9 +56917,11 @@ ${codeFrame}` : message);
       return { type: "g", transform: { value: { translate: sign(v.value) } }, children: [inner] };
     }
     if (v.kind === "animated") {
+      const animTr = { keyframes: v.keyframes.map((kf) => keyframeWith(kf, { translate: sign(kf.value) })) };
+      if (v.loop !== void 0) animTr.loop = v.loop;
       return {
         type: "g",
-        animate: { transform: { keyframes: v.keyframes.map((kf) => keyframeWith(kf, { translate: sign(kf.value) })) } },
+        animate: { transform: animTr },
         children: [inner]
       };
     }
@@ -56924,8 +56929,8 @@ ${codeFrame}` : message);
   }
   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 (node.type === "use" && ((_b = (_a = node.effects) == null ? void 0 : _a.clone) == null ? void 0 : _b.type) === "content") {
+      const baseId = node.effects.clone.baseId;
       if (typeof baseId === "string" && baseId && !ctx.contentRefInnerIds.has(baseId)) {
         ctx.contentRefInnerIds.set(baseId, allocator(baseId));
       }
@@ -56950,7 +56955,7 @@ ${codeFrame}` : message);
     return outerWrapper;
   }
   function liftBodyTranslate(node, transformation) {
-    var _a;
+    var _a, _b, _c;
     const out = {};
     let didLiftAnimate = false;
     const animTr = (_a = node.animate) == null ? void 0 : _a.transform;
@@ -56973,6 +56978,8 @@ ${codeFrame}` : message);
         });
         const outerAnimTr = { keyframes: outerKfs };
         if (animTr.autoOrient) outerAnimTr.autoOrient = true;
+        const srcLoop = animTr.loop;
+        if (srcLoop !== void 0) outerAnimTr.loop = srcLoop;
         out.animate = { transform: outerAnimTr };
         const innerHasPivotedPart = kfs.some((kf) => {
           const v = kf.value || {};
@@ -56994,13 +57001,16 @@ ${codeFrame}` : message);
           delete node.animate.transform;
           if (node.animate && Object.keys(node.animate).length === 0) delete node.animate;
         } else {
-          node.animate.transform = { keyframes: innerKfs };
+          const innerAnimTr = { keyframes: innerKfs };
+          if (srcLoop !== void 0) innerAnimTr.loop = srcLoop;
+          node.animate.transform = innerAnimTr;
         }
         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) {
@@ -57009,6 +57019,8 @@ ${codeFrame}` : message);
           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;
@@ -57018,6 +57030,17 @@ ${codeFrame}` : message);
     }
     return out;
   }
+  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 = [];
@@ -57099,280 +57122,6 @@ ${codeFrame}` : message);
     }
     return false;
   }
-  function genId(ctx, prefix) {
-    return "_lw_" + prefix + "_" + ctx.nextId++;
-  }
-  function indexById(node, map) {
-    var _a;
-    if (typeof node.id === "string") map.set(node.id, node);
-    (_a = node.children) == null ? void 0 : _a.forEach((child) => indexById(child, map));
-  }
-  function spliceDefs(root, defs) {
-    if (!defs.length) return;
-    const existing = root.children || (root.children = []);
-    existing.unshift({ type: "defs", children: defs });
-  }
-  function clone(value) {
-    if (value === null || typeof value !== "object") return value;
-    if (Array.isArray(value)) return value.map(clone);
-    const out = {};
-    for (const k of Object.keys(value)) out[k] = clone(value[k]);
-    return out;
-  }
-  function regenerateIdsInClone(root, ctx) {
-    const oldToNew = /* @__PURE__ */ new Map();
-    const walkAssign = (n) => {
-      var _a;
-      if (typeof n.id === "string") {
-        const newId = genId(ctx, "retimed");
-        oldToNew.set(n.id, newId);
-        n.id = newId;
-      }
-      (_a = n.children) == null ? void 0 : _a.forEach(walkAssign);
-    };
-    walkAssign(root);
-    const rewriteUrl = (s) => s.replace(/url\(#([^)]+)\)/g, (m, oldId) => {
-      const newId = oldToNew.get(oldId);
-      return newId ? "url(#" + newId + ")" : m;
-    });
-    const walkRewrite = (n) => {
-      var _a;
-      if (typeof n.href === "string" && n.href.startsWith("#")) {
-        const newId = oldToNew.get(n.href.slice(1));
-        if (newId) n.href = "#" + newId;
-      }
-      for (const k of Object.keys(n)) {
-        if (k === "children" || k === "effects" || k === "meta" || k === "href" || k === "id") continue;
-        const v = n[k];
-        if (typeof v === "string" && v.indexOf("url(#") !== -1) n[k] = rewriteUrl(v);
-      }
-      (_a = n.children) == null ? void 0 : _a.forEach(walkRewrite);
-    };
-    walkRewrite(root);
-    return oldToNew;
-  }
-  function applyMaskedByEffect(node, fx, transformation, ctx) {
-    if (!fx) return node;
-    if (!fx.href) {
-      ctx.errors.push("maskedBy.href missing \u2014 cannot build mask");
-      return node;
-    }
-    const maskId = genId(ctx, "mask");
-    let content = { type: "use", href: "#" + fx.href };
-    content = wrapInverseTransform(content, transformation, ctx);
-    const mask = { type: "mask", id: maskId, children: [content] };
-    if (fx.maskType) mask.maskType = fx.maskType;
-    if (fx.maskUnits) mask.maskUnits = fx.maskUnits;
-    if (fx.maskContentUnits) mask.maskContentUnits = fx.maskContentUnits;
-    ctx.defs.push(mask);
-    node.mask = "url(#" + maskId + ")";
-    return node;
-  }
-  function wrapInverseTransform(inner, fx, ctx) {
-    if (!fx) return inner;
-    const origin = readStaticOrigin(fx.origin, ctx);
-    let n = inner;
-    n = wrapInversePart(n, "translate", fx.translate, void 0, ctx);
-    n = wrapInversePart(n, "rotate", fx.rotate, origin, ctx);
-    n = wrapInversePart(n, "scale", fx.scale, origin, ctx);
-    return n;
-  }
-  function wrapInversePart(inner, part, raw, origin, ctx) {
-    if (raw === void 0) return inner;
-    const v = readAnimatable(raw);
-    if (v.kind === "static") {
-      return { type: "g", transform: { value: partsRecord(part, invertPartValue(part, v.value), origin) }, children: [inner] };
-    }
-    if (v.kind === "animated") {
-      return {
-        type: "g",
-        animate: { transform: { keyframes: v.keyframes.map((kf) => keyframeWith(kf, partsRecord(part, invertPartValue(part, kf.value), origin))) } },
-        children: [inner]
-      };
-    }
-    return inner;
-  }
-  function invertPartValue(part, value) {
-    if (part === "translate") return [-value[0], -value[1]];
-    if (part === "rotate") return -value;
-    return [1 / value[0], 1 / value[1]];
-  }
-  var CONTENT_SUBREF = "content";
-  function applyRefAndTransformationEffect(node, ref3, transformation, ctx) {
-    if (ref3) {
-      const baseId = ref3.baseId;
-      if (!baseId) {
-        ctx.errors.push("ref: missing baseId");
-      } else {
-        const targetId = ref3.type === CONTENT_SUBREF ? ctx.contentRefInnerIds.get(baseId) || baseId : baseId;
-        node.href = "#" + targetId;
-      }
-    }
-    return applyTransformationEffect(node, transformation, ctx);
-  }
-  function applyRepeaterEffect(node, fx, ctx) {
-    var _a, _b;
-    if (!fx) return node;
-    const copies = (_a = fx.copies) != null ? _a : 1;
-    if (copies < 1) {
-      ctx.errors.push("repeater.copies invalid: " + fx.copies);
-      return node;
-    }
-    const sharedTransform = node.transform;
-    const sharedAnimTransform = (_b = node.animate) == null ? void 0 : _b.transform;
-    const base = clone(node);
-    delete base.transform;
-    if (base.animate) {
-      delete base.animate.transform;
-      if (Object.keys(base.animate).length === 0) delete base.animate;
-    }
-    const children = [base];
-    for (let i = 1; i < copies; i++) {
-      const copy = clone(base);
-      copy.transform = { value: perCopyParts(fx, i) };
-      children.push(copy);
-    }
-    const wrapper = { type: "g", children };
-    if (sharedTransform !== void 0) wrapper.transform = sharedTransform;
-    if (sharedAnimTransform !== void 0) wrapper.animate = { transform: sharedAnimTransform };
-    return wrapper;
-  }
-  function perCopyParts(fx, i) {
-    const parts = {};
-    if (fx.translate) parts.translate = [fx.translate[0] * i, fx.translate[1] * i];
-    if (fx.rotate !== void 0) parts.rotate = fx.rotate * i;
-    if (fx.scale) parts.scale = [__pow(fx.scale[0] / 100, i), __pow(fx.scale[1] / 100, i)];
-    if (fx.origin) parts.origin = [fx.origin[0] * i, fx.origin[1] * i];
-    return parts;
-  }
-  var RETIME_AS_SYMBOL = true;
-  function applyRetimeEffect(node, retime, ctx) {
-    var _a, _b, _c, _d;
-    if (!retime) return node;
-    const baseId = retime.baseId;
-    if (!baseId) {
-      ctx.errors.push("retime: missing baseId");
-      return node;
-    }
-    const target = ctx.idMap.get(baseId);
-    if (!target) {
-      ctx.warnings.push('retime: target "' + baseId + '" not found');
-      return node;
-    }
-    const start = (_a = retime.start) != null ? _a : 0;
-    const stretch = (_b = retime.stretch) != null ? _b : 1;
-    if (RETIME_AS_SYMBOL) {
-      const symbolClone = clone(target);
-      regenerateIdsInClone(symbolClone, ctx);
-      const cloneId = genId(ctx, "retime");
-      symbolClone.id = cloneId;
-      remapKeyframeTimes(symbolClone, start, stretch);
-      ctx.defs.push(symbolClone);
-      node.href = "#" + cloneId;
-      return node;
-    }
-    const sourceNodes = target.type === "symbol" ? target.children || [] : [target];
-    const content = sourceNodes.map((child) => {
-      const c = clone(child);
-      regenerateIdsInClone(c, ctx);
-      remapKeyframeTimes(c, start, stretch);
-      return c;
-    });
-    const g = __spreadProps(__spreadValues({}, node), { type: "g", children: content });
-    delete g.href;
-    const x = Number((_c = node.x) != null ? _c : 0), y = Number((_d = node.y) != null ? _d : 0);
-    if (x || y) {
-      const offset = "translate(" + x + "," + y + ")";
-      g.transform = typeof g.transform === "string" ? offset + g.transform : offset;
-      delete g.x;
-      delete g.y;
-    }
-    return g;
-  }
-  function remapKeyframeTimes(node, start, stretch) {
-    var _a;
-    const remap2 = (kfs) => {
-      for (const kf of kfs) if (typeof kf.time === "number") kf.time = start + kf.time * stretch;
-    };
-    if (node.transform && typeof node.transform === "object" && Array.isArray(node.transform.keyframes)) {
-      remap2(node.transform.keyframes);
-    }
-    if (node.animate && typeof node.animate === "object") {
-      for (const prop of Object.keys(node.animate)) {
-        const anim = node.animate[prop];
-        if (anim && Array.isArray(anim.keyframes)) remap2(anim.keyframes);
-      }
-    }
-    (_a = node.children) == null ? void 0 : _a.forEach((child) => remapKeyframeTimes(child, start, stretch));
-  }
-  function applyTrimPathEffect(node, trimPath, isCombinedShape) {
-    var _a;
-    if (!trimPath && !isCombinedShape) return node;
-    const d = (_a = node.d) != null ? _a : rectToPathD(node);
-    if (d === void 0) return node;
-    const g = __spreadProps(__spreadValues({}, node), { type: "g" });
-    delete g.d;
-    const meta = g.meta = __spreadValues({}, g.meta || {});
-    const effects = meta.effects = __spreadValues({}, meta.effects || {});
-    if (trimPath) effects.trimPath = trimPath;
-    effects.isCombinedShape = true;
-    g.children = [{ type: "path", d }];
-    return g;
-  }
-  function rectToPathD(node) {
-    var _a, _b, _c, _d;
-    if (node.type !== "rect") return void 0;
-    const x = Number((_a = node.x) != null ? _a : 0), y = Number((_b = node.y) != null ? _b : 0);
-    const w = Number((_c = node.width) != null ? _c : 0), h3 = Number((_d = node.height) != null ? _d : 0);
-    return "M" + (x + w) + "," + y + "L" + (x + w) + "," + (y + h3) + "L" + x + "," + (y + h3) + "L" + x + "," + y + "L" + (x + w) + "," + y + "z";
-  }
-  function applyPlayerEffects(root) {
-    const ctx = {
-      defs: [],
-      warnings: [],
-      errors: [],
-      idMap: /* @__PURE__ */ new Map(),
-      nextId: 0,
-      contentRefInnerIds: /* @__PURE__ */ new Map()
-    };
-    const working = clone(root);
-    indexById(working, ctx.idMap);
-    identifyContentRefTargets(working, ctx, () => genId(ctx, "inner"));
-    const afterPass1 = applyPlayerEffects_exceptRetime(working, ctx);
-    const out = applyPlayerEffects_retime(afterPass1, ctx);
-    spliceDefs(out, ctx.defs);
-    return { root: out, defs: ctx.defs, warnings: ctx.warnings, errors: ctx.errors };
-  }
-  function applyPlayerEffects_exceptRetime(node, ctx) {
-    if (node.children) node.children = node.children.map((child) => applyPlayerEffects_exceptRetime(child, ctx));
-    const fx = node.effects;
-    const originalId = typeof node.id === "string" ? node.id : void 0;
-    const innerIdForContentRef = originalId ? ctx.contentRefInnerIds.get(originalId) : void 0;
-    if (!fx && !innerIdForContentRef) return node;
-    const { transformation, repeater, maskedBy, trimPath, retime, ref: ref3 } = fx != null ? fx : {};
-    const isCombinedShape = fx == null ? void 0 : fx.isCombinedShape;
-    if (fx) delete node.effects;
-    let n = node;
-    n = applyTrimPathEffect(n, trimPath, isCombinedShape);
-    n = applyRepeaterEffect(n, repeater, ctx);
-    n = applyMaskedByEffect(n, maskedBy, transformation, ctx);
-    if (innerIdForContentRef) {
-      n = splitForContentRef(n, transformation, originalId, innerIdForContentRef, ctx);
-    } else {
-      n = applyRefAndTransformationEffect(n, ref3, transformation, ctx);
-    }
-    if (retime) node.effects = { retime };
-    if (originalId) ctx.idMap.set(originalId, n);
-    return n;
-  }
-  function applyPlayerEffects_retime(node, ctx) {
-    var _a;
-    if (node.children) node.children = node.children.map((child) => applyPlayerEffects_retime(child, ctx));
-    const retime = (_a = node.effects) == null ? void 0 : _a.retime;
-    if (!retime) return node;
-    delete node.effects;
-    return applyRetimeEffect(node, retime, ctx);
-  }
   function pathStr(path) {
     if (!path.length) return ".";
     let result = "";
@@ -57815,6 +57564,15 @@ ${codeFrame}` : message);
   };
   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([
@@ -57896,7 +57654,7 @@ ${codeFrame}` : message);
     styles: px.record(px.any()).optional()
   }));
   var PxAnimatorConfigSchema = implementsInterface()(px.object({
-    mode: px.enum(["auto", "webapi", "frames"]).optional(),
+    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(),
@@ -57935,47 +57693,87 @@ ${codeFrame}` : message);
       autoOrient: px.boolean().optional()
     })
   ]);
-  var PxTransformationEffectSchema = px.object({
+  var PxTransformationEffectSchema = implementsInterface()(px.object({
     translate: PxAnimatableVec2Schema.optional(),
     rotate: PxAnimatableNumberSchema.optional(),
     scale: PxAnimatableVec2Schema.optional(),
     skew: PxAnimatableVec2Schema.optional(),
     origin: PxAnimatableVec2Schema.optional()
-  });
-  var PxRepeaterEffectSchema = px.object({
+  }));
+  var PxRepeaterEffectSchema = implementsInterface()(px.object({
     copies: px.number().optional(),
-    translate: px.tuple([px.number(), px.number()]).optional(),
-    rotate: px.number().optional(),
-    scale: px.tuple([px.number(), px.number()]).optional(),
-    // per-copy scale, PERCENT (85 → 0.85)
-    origin: px.tuple([px.number(), px.number()]).optional()
-  });
-  var PxMaskedByEffectSchema = px.object({
+    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 = px.any();
-  var PxRetimeEffectSchema = px.object({
+  }));
+  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 = px.object({
+  }));
+  var PxCloneEffectSchema = implementsInterface()(px.object({
+    type: px.string().optional(),
     baseId: px.string().optional(),
-    type: px.string().optional()
-  });
-  var PxEffectsSchema = px.object({
+    retime: PxRetimeEffectSchema.optional()
+  }));
+  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(),
+    clone: PxCloneEffectSchema.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) => {
@@ -58001,7 +57799,10 @@ ${codeFrame}` : message);
     // Consumed and removed by `applyPlayerEffects` before any other normalisation
     // (see `createAnimatorImpl`), so downstream code never sees it.
     effects: PxEffectsSchema.optional(),
-    animate: PxAnimationDefinitionSchema.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), {
@@ -58046,1255 +57847,3040 @@ ${codeFrame}` : message);
     if (!animate) return void 0;
     return Object.entries(animate).map(([id, anim]) => ({ id, animate: anim }));
   }
-  function bezierToSvgPath(path) {
-    var _a, _b, _c, _d;
-    const v = path.v;
-    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]);
+  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;
       }
-      d.push("z");
-    }
-    return d.join("");
+      (_a = n.children) == null ? void 0 : _a.forEach(walkAssign);
+    };
+    walkAssign(root);
+    const rewriteUrl = (s) => s.replace(/url\(#([^)]+)\)/g, (m, oldId) => {
+      const newId = oldToNew.get(oldId);
+      return newId ? "url(#" + newId + ")" : m;
+    });
+    const walkRewrite = (n) => {
+      var _a;
+      if (typeof n.href === "string" && n.href.startsWith("#")) {
+        const newId = oldToNew.get(n.href.slice(1));
+        if (newId) n.href = "#" + newId;
+      }
+      for (const k of Object.keys(n)) {
+        if (k === "children" || k === "effects" || k === "meta" || k === "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);
-    for (let i = 0; i < count; i++) {
-      res[i] = interpolateNum(a[i] || 0, b[i] || 0, t);
+  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 res;
+    return gNode;
   }
-  function interpolateColor(a, b, t) {
-    return [
-      interpolateNum(a[0] || 0, b[0] || 0, t),
-      interpolateNum(a[1] || 0, b[1] || 0, t),
-      interpolateNum(a[2] || 0, b[2] || 0, t),
-      interpolateNum(a[3] === void 0 ? 1 : a[3], b[3] === void 0 ? 1 : b[3], t)
-    ];
+  function genId(ctx, prefix) {
+    return "_lw_" + prefix + "_" + ctx.nextId++;
   }
-  function interpolateBeziers(paths1, paths2, progress) {
-    const count = Math.max(paths1.length, paths2.length);
-    const res = [];
-    for (let i = 0; i < count; i++) {
-      res.push(interpolateBezier(paths1[i], paths2[i], progress));
-    }
-    return res;
+  function stripHash(href) {
+    return typeof href === "string" ? href.replace(/^#/, "") : void 0;
   }
-  function interpolateBezier(path1, path2, progress) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-    if (!path1 || !path2) return path1 || path2 || { v: [] };
-    const t = Math.min(Math.max(progress, 0), 1);
-    const len = Math.min(path1.v.length, path2.v.length);
-    const v = [];
-    const i = [];
-    const o = [];
-    for (let idx = 0; idx < len; idx++) {
-      const v1 = path1.v[idx];
-      const v2 = path2.v[idx];
-      v.push(interpolateVec(v1, v2, t));
-      const i1 = (_b = (_a = path1.i) == null ? void 0 : _a[idx]) != null ? _b : v1;
-      const i2 = (_d = (_c = path2.i) == null ? void 0 : _c[idx]) != null ? _d : v2;
-      i.push(interpolateVec(i1, i2, t));
-      const o1 = (_f = (_e = path1.o) == null ? void 0 : _e[idx]) != null ? _f : v1;
-      const o2 = (_h = (_g = path2.o) == null ? void 0 : _g[idx]) != null ? _h : v2;
-      o.push(interpolateVec(o1, o2, t));
-    }
-    return { v, i: i.length ? i : void 0, o: o.length ? o : void 0, c: (_i = path1.c) != null ? _i : path2.c };
+  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 remap(value, inMin, inMax, outMin, outMax) {
-    if (inMax === inMin) return outMin;
-    const t = (value - inMin) / (inMax - inMin);
-    return outMin + t * (outMax - outMin);
+  function spliceDefs(root, defs) {
+    if (!defs.length) return;
+    const existing = root.children || (root.children = []);
+    existing.unshift({ type: "defs", children: defs });
   }
-  function solveCubicBezierX(p1x, p2x, x) {
-    if (x <= 0) return 0;
-    if (x >= 1) return 1;
-    const cx = 3 * p1x;
-    const bx = 3 * (p2x - p1x) - cx;
-    const ax = 1 - cx - bx;
-    function sampleX(t) {
-      return ((ax * t + bx) * t + cx) * t;
-    }
-    function sampleDX(t) {
-      return (3 * ax * t + 2 * bx) * t + cx;
+  var clone = deepClonePxNode;
+  function regenerateIdsInClone(root, ctx) {
+    return regenerateIdsAndRewriteRefs(root, () => genId(ctx, "retimed"));
+  }
+  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]);
+      }
     }
-    let t2 = x;
-    let t0 = 0;
-    let t1 = 1;
-    for (let i = 0; i < 8; i++) {
-      const x2 = sampleX(t2) - x;
-      if (Math.abs(x2) < 1e-6) return t2;
-      const d2 = sampleDX(t2);
-      if (Math.abs(d2) < 1e-6) break;
-      t2 -= x2 / d2;
+    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);
     }
-    t2 = x;
-    while (t0 < t1) {
-      const x2 = sampleX(t2);
-      if (Math.abs(x2 - x) < 1e-6) return t2;
-      if (x > x2) t0 = t2;
-      else t1 = t2;
-      t2 = (t1 + t0) / 2;
+    const animBlock = stops;
+    const kfs = animBlock.keyframes;
+    if (!Array.isArray(kfs) || !kfs.length) return [];
+    const loopFromSource = animBlock.loop;
+    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;
     }
-    return t2;
-  }
-  function cubicBezier(easing) {
-    const [p1x, p1y, p2x, p2y] = easing;
-    const cy = 3 * p1y;
-    const by = 3 * (p2y - p1y) - cy;
-    const ay = 1 - cy - by;
-    function sampleCurveY(t) {
-      return ((ay * t + by) * t + cy) * t;
+    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 function(x) {
-      return sampleCurveY(solveCubicBezierX(p1x, p2x, x));
-    };
+    return baselineStops.map((bs, i) => animatedStopNode(bs, kfs, i, ctx, loopFromSource));
   }
-  function lerp2(a, b, t) {
-    return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
-  }
-  function subdivideCubicBezier(p0, p1, p2, p3, t) {
-    const q0 = lerp2(p0, p1, t);
-    const q1 = lerp2(p1, p2, t);
-    const q2 = lerp2(p2, p3, t);
-    const r0 = lerp2(q0, q1, t);
-    const r1 = lerp2(q1, q2, t);
-    const s = lerp2(r0, r1, t);
+  function staticStopNode(s) {
     return {
-      left: [p0, q0, r0, s],
-      right: [s, r1, q2, p3]
+      type: "stop",
+      offset: formatOffset(s.offset),
+      stopColor: s.color
     };
   }
-  function splitEasing(easing, xFraction) {
-    if (!easing) return { left: void 0, right: void 0 };
-    if (xFraction <= 0) return { left: void 0, right: easing };
-    if (xFraction >= 1) return { left: easing, right: void 0 };
-    const [x1, y1, x2, y2] = easing;
-    const t = solveCubicBezierX(x1, x2, xFraction);
-    const p0 = [0, 0];
-    const p1 = [x1, y1];
-    const p2 = [x2, y2];
-    const p3 = [1, 1];
-    const { left, right } = subdivideCubicBezier(p0, p1, p2, p3, t);
-    const sx = left[3][0];
-    const sy = left[3][1];
-    let leftEasing;
-    if (sx > 1e-9 && Math.abs(sy) > 1e-9) {
-      leftEasing = [
-        left[1][0] / sx,
-        left[1][1] / sy,
-        left[2][0] / sx,
-        left[2][1] / sy
-      ];
+  function animatedStopNode(baseline, kfs, stopIdx, _ctx, loop) {
+    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;
     }
-    let rightEasing;
-    const rx = 1 - sx;
-    const ry = 1 - sy;
-    if (rx > 1e-9 && Math.abs(ry) > 1e-9) {
-      rightEasing = [
-        (right[1][0] - sx) / rx,
-        (right[1][1] - sy) / ry,
-        (right[2][0] - sx) / rx,
-        (right[2][1] - sy) / ry
-      ];
+    const stop = {
+      type: "stop",
+      offset: formatOffset(baseline.offset),
+      stopColor: baseline.color
+    };
+    const animate = {};
+    if (colorKfs.length) {
+      animate.stopColor = { keyframes: colorKfs };
+      if (loop !== void 0) animate.stopColor.loop = loop;
     }
-    return { left: leftEasing, right: rightEasing };
-  }
-  function reverseEasing(easing) {
-    if (!easing) return void 0;
-    return [1 - easing[2], 1 - easing[3], 1 - easing[0], 1 - easing[1]];
+    if (offsetVaries && offsetKfs.length) {
+      animate.offset = { keyframes: offsetKfs };
+      if (loop !== void 0) animate.offset.loop = loop;
+    }
+    if (Object.keys(animate).length) stop.animate = animate;
+    return stop;
   }
-  function toRGBA(color) {
-    const r = Math.round(color[0] * 255);
-    const g = Math.round(color[1] * 255);
-    const b = Math.round(color[2] * 255);
-    return color.length === 4 ? "rgba(" + r + "," + g + "," + b + "," + color[3] + ")" : "rgb(" + r + "," + g + "," + b + ")";
+  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 parseRgba(s) {
-    var _a;
-    const inner = (_a = s.match(/rgba?\((.*)\)/)) == null ? void 0 : _a[1];
-    if (!inner) throw new Error("Invalid rgb/rgba format");
-    const parts = inner.split(",").map((v) => +v.trim());
-    return [parts[0] / 255, parts[1] / 255, parts[2] / 255, ...parts[3] !== void 0 ? [parts[3]] : []];
+  function formatOffset(o) {
+    const pct = Math.round(o * 1e3) / 10;
+    return pct + "%";
   }
-  function parseHex(s) {
-    const hex = s.slice(1);
-    const isShort = hex.length <= 4;
-    const r = isShort ? hex[0] + hex[0] : hex.slice(0, 2);
-    const g = isShort ? hex[1] + hex[1] : hex.slice(2, 4);
-    const b = isShort ? hex[2] + hex[2] : hex.slice(4, 6);
-    const a = hex.length === 4 ? hex[3] + hex[3] : hex.length === 8 ? hex.slice(6, 8) : null;
-    const result = [
-      parseInt(r, 16) / 255,
-      parseInt(g, 16) / 255,
-      parseInt(b, 16) / 255
-    ];
-    if (a !== null) {
-      result.push(parseInt(a, 16) / 255);
+  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;
     }
-    return result;
-  }
-  function parseColor(s) {
-    if (!s) return void 0;
-    if (Array.isArray(s)) return s;
-    if (typeof s !== "string") return void 0;
-    if (s.startsWith("#")) {
-      return parseHex(s);
-    } else if (s.startsWith("rgb")) {
-      return parseRgba(s);
+    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 {
-      console.warn("Unsupported color format: " + s);
+      const bodyStatic = readTransformationFromBody(node);
+      if (bodyStatic) content = wrapInverseTransform(content, bodyStatic, ctx);
     }
-    return void 0;
-  }
-  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) {
-    return kebab.includes("-") ? kebab.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()) : kebab;
-  }
-  function isCamelCaseWord(word) {
-    return !word.includes("-") && /[a-z][A-Z]/.test(word);
+    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;
   }
-  var SVG_CAMEL_CASE_ATTRS = /* @__PURE__ */ new Set([
-    // Transform/positioning
-    "viewBox",
-    "preserveAspectRatio",
-    // Gradient
-    "gradientUnits",
-    "gradientTransform",
-    "spreadMethod",
-    // Pattern
-    "patternUnits",
-    "patternContentUnits",
-    "patternTransform",
-    // Clipping/masking
-    "clipPathUnits",
-    "maskUnits",
-    "maskContentUnits",
-    // Text
-    "textLength",
-    "lengthAdjust",
-    "startOffset",
-    // Filter
-    "filterUnits",
-    "primitiveUnits",
-    "stdDeviation",
-    "baseFrequency",
-    "numOctaves",
-    "surfaceScale",
-    "diffuseConstant",
-    "specularConstant",
-    "specularExponent",
-    "kernelMatrix",
-    "kernelUnitLength",
-    "edgeMode",
-    "preserveAlpha",
-    "targetX",
-    "targetY"
-    // // Animation
-    // 'attributeName',
-    // 'attributeType',
-    // 'calcMode',
-    // 'keyTimes',
-    // 'keySplines',
-    // 'repeatCount',
-    // 'repeatDur'    
-  ]);
-  function camelCaseToKebabWordIfNeeded(camel) {
-    return SVG_CAMEL_CASE_ATTRS.has(camel) ? camel : camel.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+  function wrapInverseTransform(inner, fx, ctx) {
+    if (!fx) return inner;
+    const origin = readStaticOrigin(fx.origin, ctx);
+    let n = inner;
+    n = wrapInversePart(n, "translate", fx.translate, void 0, ctx);
+    n = wrapInversePart(n, "rotate", fx.rotate, origin, ctx);
+    n = wrapInversePart(n, "scale", fx.scale, origin, ctx);
+    return n;
   }
-  function clamp(value, min, max) {
-    return Math.max(min, Math.min(value, max));
+  function wrapInversePart(inner, part, raw, origin, ctx) {
+    if (raw === void 0) return inner;
+    const normalisedRaw = part === "scale" && Array.isArray(raw) ? [raw[0] / 100, raw[1] / 100] : raw;
+    const v = readAnimatable(normalisedRaw);
+    if (v.kind === "static") {
+      return { type: "g", transform: { value: partsRecord(part, invertPartValue(part, v.value), origin) }, children: [inner] };
+    }
+    if (v.kind === "animated") {
+      const animTr = { keyframes: v.keyframes.map((kf) => keyframeWith(kf, partsRecord(part, invertPartValue(part, kf.value), origin))) };
+      if (v.loop !== void 0) animTr.loop = v.loop;
+      return {
+        type: "g",
+        animate: { transform: animTr },
+        children: [inner]
+      };
+    }
+    return inner;
   }
-  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]
-    ];
+  function invertPartValue(part, value) {
+    if (part === "translate") return [-value[0], -value[1]];
+    if (part === "rotate") return -value;
+    return [1 / value[0], 1 / value[1]];
   }
-  var 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);
+  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 }));
+      }
     }
-    return result;
+    const srcLoop = animTr == null ? void 0 : animTr.loop;
+    const withLoop = (kfs2) => {
+      const block = { keyframes: kfs2 };
+      if (srcLoop !== void 0) block.loop = srcLoop;
+      return block;
+    };
+    let n = inner;
+    if (translateKfs.length) n = { type: "g", animate: { transform: withLoop(translateKfs) }, children: [n] };
+    if (rotateKfs.length) n = { type: "g", animate: { transform: withLoop(rotateKfs) }, children: [n] };
+    if (scaleKfs.length) n = { type: "g", animate: { transform: withLoop(scaleKfs) }, children: [n] };
+    return n;
   }
-  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 nodeHasBodyTransform(node) {
+    if (typeof node.transform === "string") return true;
+    if (node.transform && typeof node.transform === "object") return true;
+    return hasAnimateTransform(node);
   }
-  function bezier2D_arcLengthLUT(P0, P1, P2, P3, steps = 100) {
-    const n = steps + 1;
-    const ts = new Float64Array(n);
-    const ds = new Float64Array(n);
-    let prev = bezier2D_pointAt(P0, P1, P2, P3, 0);
-    ts[0] = 0;
-    ds[0] = 0;
-    let cum = 0;
-    for (let i = 1; i < n; i++) {
-      const t = i / steps;
-      const cur = bezier2D_pointAt(P0, P1, P2, P3, t);
-      const dx = cur[0] - prev[0];
-      const dy = cur[1] - prev[1];
-      cum += Math.sqrt(dx * dx + dy * dy);
-      ts[i] = t;
-      ds[i] = cum;
-      prev = cur;
-    }
-    return { ts, ds };
+  function hasAnimateTransform(node) {
+    const animate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
+    return !!(animate && animate.transform);
   }
-  function bezier2D_tForDistance(lut, distance) {
-    const { ts, ds } = lut;
-    const last = ds.length - 1;
-    if (distance <= 0) return ts[0];
-    if (distance >= ds[last]) return ts[last];
-    let lo = 1;
-    let hi = last;
-    while (lo < hi) {
-      const mid = lo + hi >>> 1;
-      if (ds[mid] < distance) lo = mid + 1;
-      else hi = mid;
+  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;
     }
-    const dPrev = ds[hi - 1];
-    const dCur = ds[hi];
-    const span = dCur - dPrev;
-    const frac = span > 0 ? (distance - dPrev) / span : 0;
-    return ts[hi - 1] + frac * (ts[hi] - ts[hi - 1]);
+    return void 0;
   }
-  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",
-    "textPath",
-    "defs",
-    "clipPath",
-    "mask",
-    "pattern",
-    "linearGradient",
-    "radialGradient",
-    "stop",
-    "use",
-    "symbol",
-    "marker",
-    "filter",
-    "feGaussianBlur",
-    "feOffset",
-    "feBlend",
-    "feColorMatrix",
-    "feMerge",
-    "feMergeNode"
-  ].map((tagName) => tagName.toLowerCase()));
-  var ALLOWED_RESOURCE_ATTRIBUTES = [
-    "href",
-    // <use>
-    "src",
-    // <image>
-    "filter",
-    // url(#filterId)
-    "clipPath",
-    // clip-path="url(#clipPathId)"
-    "mask",
-    // url(#maskId)
-    "markerStart",
-    // marker-start="url(#markerId)"
-    "markerMid",
-    // marker-mid="url(#markerId)"
-    "markerEnd"
-    // marker-end="url(#markerId)"
-    // 'fill',           // url(#gradientId) or url(#patternId)
-    // 'stroke',         // url(#gradientId) or url(#patternId)
-    // Don't allow 'cursor', can use external SVG,         // url(cursor.svg)
-  ];
-  var ALLOWED_RESOURCE_ATTRIBUTES_SET = new Set(ALLOWED_RESOURCE_ATTRIBUTES);
-  var ALLOWED_ATTRIBUTES = [
-    "href",
-    "src",
-    // Presentation
-    "fill",
-    "fillOpacity",
-    "fillRule",
-    "stroke",
-    "strokeWidth",
-    "strokeOpacity",
-    "strokeLinecap",
-    "strokeLinejoin",
-    "strokeMiterlimit",
-    "strokeDasharray",
-    "strokeDashoffset",
-    "opacity",
-    "transform",
-    // Geometry
-    "x",
-    "y",
-    "cx",
-    "cy",
-    "r",
-    "rx",
-    "ry",
-    "width",
-    "height",
-    "d",
-    "x1",
-    "y1",
-    "x2",
-    "y2",
-    "points",
-    "dx",
-    "dy",
-    // Font
-    "fontSize",
-    "fontFamily",
-    "fontWeight",
-    "fontStyle",
-    // Text
-    "textAnchor",
-    "letterSpacing",
-    "wordSpacing",
-    "space",
-    "xml:space",
-    "textDecoration",
-    "textTransform",
-    "whiteSpace",
-    "white-space",
-    "dominantBaseline",
-    "alignmentBaseline",
-    "rotate",
-    // per-glyph rotation array, currently not supported
-    // Structure
-    "id",
-    "class",
-    "viewBox",
-    "preserveAspectRatio",
-    // Gradient/Pattern
-    "offset",
-    "stopColor",
-    "stopOpacity",
-    "gradientTransform",
-    // Clippath/Mask
-    "clipPath",
-    "mask",
-    // Motion path
-    "offsetPath",
-    "offsetDistance",
-    "offsetRotate",
-    "offsetAnchor",
-    "offsetPosition",
-    // Text path
-    "startOffset",
-    "textLength",
-    "lengthAdjust",
-    // Filter
-    "filter",
-    "stdDeviation",
-    "in",
-    "in2",
-    "result",
-    "mode",
-    ...ALLOWED_RESOURCE_ATTRIBUTES
-  ];
-  var ALLOWED_ATTRIBUTES_LOW_SET = new Set(ALLOWED_ATTRIBUTES.map((str) => str.toLowerCase()));
-  function sanitiseAttributeValue(name, value) {
-    const nameLower = name.toLowerCase();
-    if (!ALLOWED_ATTRIBUTES_LOW_SET.has(nameLower)) {
-      console.warn("Attribute not in whitelist: ", nameLower);
-      return void 0;
+  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 (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;
+    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;
       }
-      return value;
     }
-    if (ALLOWED_RESOURCE_ATTRIBUTES_SET.has(nameLower)) {
-      const str = String(value);
-      if (str.startsWith("#")) {
-        return value;
-      }
-      if (/^url\(#[^)]+\)$/.test(str)) {
-        return value;
+    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];
       }
-      return void 0;
     }
-    return value;
+    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 createElement(tagName, normalisedProps, style, children, textContent) {
-    if (!ALLOWED_SVG_TAGS_LOWER_CASE.has(tagName.toLowerCase())) {
-      console.warn("Attribute not in whitelist: ", tagName);
-      return null;
+  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 element = document.createElementNS(SVG_NS, tagName);
-    for (const propName in normalisedProps) {
-      element.setAttribute(
-        camelCaseToKebabWordIfNeeded(propName),
-        sanitiseAttributeValue(propName, normalisedProps[propName])
-      );
+    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];
+      }
     }
-    if (style) {
-      for (const styleProp in style) {
-        element.style[styleProp] = String(style[styleProp]);
+    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];
       }
     }
-    if (children) {
-      for (const child of children) {
-        element.appendChild(child);
+    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];
       }
     }
-    if (textContent) element.textContent = textContent;
-    return element;
+    return kfs[kfs.length - 1].value;
   }
-  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];
+  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)");
+      }
     }
-    return style;
+    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 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 (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(",");
+  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;
+  }
+  var CONTENT_SUBREF = "content";
+  function applyRefHref(node, clone2, ctx) {
+    if (!clone2) return;
+    const baseId = clone2.baseId;
+    if (!baseId) {
+      if (clone2.type === CONTENT_SUBREF) ctx.errors.push("clone: content ref missing baseId");
+      return;
+    }
+    const targetId = clone2.type === CONTENT_SUBREF ? ctx.contentRefInnerIds.get(baseId) || baseId : baseId;
+    node.href = "#" + targetId;
+  }
+  function applyRefAndTransformationEffect(node, clone2, transformation, ctx) {
+    applyRefHref(node, clone2, ctx);
+    return applyTransformationEffect(node, transformation, ctx);
+  }
+  function applyRepeaterEffect(node, fx, ctx) {
+    var _a, _b;
+    if (!fx) return node;
+    const copies = (_a = fx.copies) != null ? _a : 1;
+    if (copies < 1) {
+      ctx.errors.push("repeater.copies invalid: " + fx.copies);
+      return node;
+    }
+    const sharedTransform = node.transform;
+    const sharedAnimTransform = (_b = node.animate) == null ? void 0 : _b.transform;
+    const base = clone(node);
+    delete base.transform;
+    if (base.animate) {
+      delete base.animate.transform;
+      if (Object.keys(base.animate).length === 0) delete base.animate;
+    }
+    const children = [base];
+    for (let i = 1; i < copies; i++) {
+      const 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;
+  }
+  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 readCloneRetime(n) {
+    var _a, _b;
+    return (_b = (_a = n.effects) == null ? void 0 : _a.clone) == null ? void 0 : _b.retime;
+  }
+  function clearCloneRetime(n) {
+    var _a;
+    const clone2 = (_a = n.effects) == null ? void 0 : _a.clone;
+    if (!clone2) return;
+    delete clone2.retime;
+    if (Object.keys(clone2).length === 0) delete n.effects.clone;
+    if (n.effects && Object.keys(n.effects).length === 0) delete n.effects;
+  }
+  function applyAllRetimeEffects(root, ctx) {
+    ctx.idMap.clear();
+    indexById(root, ctx.idMap);
+    const sites = [];
+    const collect = (n) => {
+      var _a;
+      if (readCloneRetime(n)) sites.push(n);
+      (_a = n.children) == null ? void 0 : _a.forEach(collect);
+    };
+    collect(root);
+    for (const useNode of sites) {
+      const retime = readCloneRetime(useNode);
+      if (!retime) continue;
+      clearCloneRetime(useNode);
+      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) {
+    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);
+    }
+    clearCloneRetime(cloneNode);
+    if (target.type === "use" && target.href) {
+      const subId = stripHash(target.href);
+      if (subId) {
+        const innerRetime = readCloneRetime(target);
+        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;
+      }
+    } else {
+      materialiseNestedRetimeUses(cloneNode, accum, ctx, chain, targetId);
+    }
+    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 materialiseNestedRetimeUses(node, accum, ctx, chain, parentTargetId) {
+    const visit = (n) => {
+      var _a;
+      const retime = readCloneRetime(n);
+      if (n.type === "use" && retime && n.href) {
+        const subId = stripHash(n.href);
+        if (subId) {
+          const subAccum = concatRetime(asRetime(retime), accum);
+          const subChain = new Set(chain);
+          subChain.add(parentTargetId);
+          const subId2 = buildChainClone(subId, subAccum, ctx, subChain);
+          if (subId2) n.href = "#" + subId2;
+        }
+        clearCloneRetime(n);
+      }
+      (_a = n.children) == null ? void 0 : _a.forEach(visit);
+    };
+    visit(node);
+  }
+  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);
+      }
+    }
+  }
+  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" && raw !== null) {
+      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 || {});
+        const block = { keyframes: obj.keyframes };
+        if (obj.loop !== void 0) block.loop = obj.loop;
+        animate[attrName] = block;
+        node.animate = animate;
+        return;
+      }
+      if (typeof obj.value === "number") {
+        node[attrName] = String(obj.value);
+        return;
+      }
+    }
+  }
+  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);
+    }
+    return res;
+  }
+  function interpolateColor(a, b, t) {
+    return [
+      interpolateNum(a[0] || 0, b[0] || 0, t),
+      interpolateNum(a[1] || 0, b[1] || 0, t),
+      interpolateNum(a[2] || 0, b[2] || 0, t),
+      interpolateNum(a[3] === void 0 ? 1 : a[3], b[3] === void 0 ? 1 : b[3], t)
+    ];
+  }
+  function interpolateBeziers(paths1, paths2, progress) {
+    const count = Math.max(paths1.length, paths2.length);
+    const res = [];
+    for (let i = 0; i < count; i++) {
+      res.push(interpolateBezier(paths1[i], paths2[i], progress));
+    }
+    return res;
+  }
+  function interpolateBezier(path1, path2, progress) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    if (!path1 || !path2) return path1 || path2 || { v: [] };
+    const t = Math.min(Math.max(progress, 0), 1);
+    const len = Math.min(path1.v.length, path2.v.length);
+    const v = [];
+    const i = [];
+    const o = [];
+    for (let idx = 0; idx < len; idx++) {
+      const v1 = path1.v[idx];
+      const v2 = path2.v[idx];
+      v.push(interpolateVec(v1, v2, t));
+      const i1 = (_b = (_a = path1.i) == null ? void 0 : _a[idx]) != null ? _b : v1;
+      const i2 = (_d = (_c = path2.i) == null ? void 0 : _c[idx]) != null ? _d : v2;
+      i.push(interpolateVec(i1, i2, t));
+      const o1 = (_f = (_e = path1.o) == null ? void 0 : _e[idx]) != null ? _f : v1;
+      const o2 = (_h = (_g = path2.o) == null ? void 0 : _g[idx]) != null ? _h : v2;
+      o.push(interpolateVec(o1, o2, t));
+    }
+    return { v, i: i.length ? i : void 0, o: o.length ? o : void 0, c: (_i = path1.c) != null ? _i : path2.c };
+  }
+  function remap(value, inMin, inMax, outMin, outMax) {
+    if (inMax === inMin) return outMin;
+    const t = (value - inMin) / (inMax - inMin);
+    return outMin + t * (outMax - outMin);
+  }
+  function solveCubicBezierX(p1x, p2x, x) {
+    if (x <= 0) return 0;
+    if (x >= 1) return 1;
+    const cx = 3 * p1x;
+    const bx = 3 * (p2x - p1x) - cx;
+    const ax = 1 - cx - bx;
+    function sampleX(t) {
+      return ((ax * t + bx) * t + cx) * t;
+    }
+    function sampleDX(t) {
+      return (3 * ax * t + 2 * bx) * t + cx;
+    }
+    let t2 = x;
+    let t0 = 0;
+    let t1 = 1;
+    for (let i = 0; i < 8; i++) {
+      const x2 = sampleX(t2) - x;
+      if (Math.abs(x2) < 1e-6) return t2;
+      const d2 = sampleDX(t2);
+      if (Math.abs(d2) < 1e-6) break;
+      t2 -= x2 / d2;
+    }
+    t2 = x;
+    while (t0 < t1) {
+      const x2 = sampleX(t2);
+      if (Math.abs(x2 - x) < 1e-6) return t2;
+      if (x > x2) t0 = t2;
+      else t1 = t2;
+      t2 = (t1 + t0) / 2;
+    }
+    return t2;
+  }
+  function cubicBezier(easing) {
+    const [p1x, p1y, p2x, p2y] = easing;
+    const cy = 3 * p1y;
+    const by = 3 * (p2y - p1y) - cy;
+    const ay = 1 - cy - by;
+    function sampleCurveY(t) {
+      return ((ay * t + by) * t + cy) * t;
+    }
+    return function(x) {
+      return sampleCurveY(solveCubicBezierX(p1x, p2x, x));
+    };
+  }
+  function lerp2(a, b, t) {
+    return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+  }
+  function subdivideCubicBezier(p0, p1, p2, p3, t) {
+    const q0 = lerp2(p0, p1, t);
+    const q1 = lerp2(p1, p2, t);
+    const q2 = lerp2(p2, p3, t);
+    const r0 = lerp2(q0, q1, t);
+    const r1 = lerp2(q1, q2, t);
+    const s = lerp2(r0, r1, t);
+    return {
+      left: [p0, q0, r0, s],
+      right: [s, r1, q2, p3]
+    };
+  }
+  function splitEasing(easing, xFraction) {
+    if (!easing) return { left: void 0, right: void 0 };
+    if (xFraction <= 0) return { left: void 0, right: easing };
+    if (xFraction >= 1) return { left: easing, right: void 0 };
+    const [x1, y1, x2, y2] = easing;
+    const t = solveCubicBezierX(x1, x2, xFraction);
+    const p0 = [0, 0];
+    const p1 = [x1, y1];
+    const p2 = [x2, y2];
+    const p3 = [1, 1];
+    const { left, right } = subdivideCubicBezier(p0, p1, p2, p3, t);
+    const sx = left[3][0];
+    const sy = left[3][1];
+    let leftEasing;
+    if (sx > 1e-9 && Math.abs(sy) > 1e-9) {
+      leftEasing = [
+        left[1][0] / sx,
+        left[1][1] / sy,
+        left[2][0] / sx,
+        left[2][1] / sy
+      ];
+    }
+    let rightEasing;
+    const rx = 1 - sx;
+    const ry = 1 - sy;
+    if (rx > 1e-9 && Math.abs(ry) > 1e-9) {
+      rightEasing = [
+        (right[1][0] - sx) / rx,
+        (right[1][1] - sy) / ry,
+        (right[2][0] - sx) / rx,
+        (right[2][1] - sy) / ry
+      ];
+    }
+    return { left: leftEasing, right: rightEasing };
+  }
+  function reverseEasing(easing) {
+    if (!easing) return void 0;
+    return [1 - easing[2], 1 - easing[3], 1 - easing[0], 1 - easing[1]];
+  }
+  function toRGBA(color) {
+    const r = Math.round(color[0] * 255);
+    const g = Math.round(color[1] * 255);
+    const b = Math.round(color[2] * 255);
+    return color.length === 4 ? "rgba(" + r + "," + g + "," + b + "," + color[3] + ")" : "rgb(" + r + "," + g + "," + b + ")";
+  }
+  function parseRgba(s) {
+    var _a;
+    const inner = (_a = s.match(/rgba?\((.*)\)/)) == null ? void 0 : _a[1];
+    if (!inner) throw new Error("Invalid rgb/rgba format");
+    const parts = inner.split(",").map((v) => +v.trim());
+    return [parts[0] / 255, parts[1] / 255, parts[2] / 255, ...parts[3] !== void 0 ? [parts[3]] : []];
+  }
+  function parseHex(s) {
+    const hex = s.slice(1);
+    const isShort = hex.length <= 4;
+    const r = isShort ? hex[0] + hex[0] : hex.slice(0, 2);
+    const g = isShort ? hex[1] + hex[1] : hex.slice(2, 4);
+    const b = isShort ? hex[2] + hex[2] : hex.slice(4, 6);
+    const a = hex.length === 4 ? hex[3] + hex[3] : hex.length === 8 ? hex.slice(6, 8) : null;
+    const result = [
+      parseInt(r, 16) / 255,
+      parseInt(g, 16) / 255,
+      parseInt(b, 16) / 255
+    ];
+    if (a !== null) {
+      result.push(parseInt(a, 16) / 255);
+    }
+    return result;
+  }
+  function parseColor(s) {
+    if (!s) return void 0;
+    if (Array.isArray(s)) return s;
+    if (typeof s !== "string") return void 0;
+    if (s.startsWith("#")) {
+      return parseHex(s);
+    } else if (s.startsWith("rgb")) {
+      return parseRgba(s);
+    } else {
+      console.warn("Unsupported color format: " + s);
+    }
+    return void 0;
+  }
+  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) {
+    return kebab.includes("-") ? kebab.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()) : kebab;
+  }
+  function isCamelCaseWord(word) {
+    return !word.includes("-") && /[a-z][A-Z]/.test(word);
+  }
+  var SVG_CAMEL_CASE_ATTRS = /* @__PURE__ */ new Set([
+    // Transform/positioning
+    "viewBox",
+    "preserveAspectRatio",
+    // Gradient
+    "gradientUnits",
+    "gradientTransform",
+    "spreadMethod",
+    // Pattern
+    "patternUnits",
+    "patternContentUnits",
+    "patternTransform",
+    // Clipping/masking
+    "clipPathUnits",
+    "maskUnits",
+    "maskContentUnits",
+    // Marker  (SVG spec keeps these camelCase, like viewBox)
+    "markerUnits",
+    "markerWidth",
+    "markerHeight",
+    "refX",
+    "refY",
+    // Text
+    "textLength",
+    "lengthAdjust",
+    "startOffset",
+    // Filter
+    "filterUnits",
+    "primitiveUnits",
+    "stdDeviation",
+    "baseFrequency",
+    "numOctaves",
+    "surfaceScale",
+    "diffuseConstant",
+    "specularConstant",
+    "specularExponent",
+    "kernelMatrix",
+    "kernelUnitLength",
+    "edgeMode",
+    "preserveAlpha",
+    "targetX",
+    "targetY"
+    // // Animation
+    // 'attributeName',
+    // 'attributeType',
+    // 'calcMode',
+    // 'keyTimes',
+    // 'keySplines',
+    // 'repeatCount',
+    // 'repeatDur'    
+  ]);
+  function camelCaseToKebabWordIfNeeded(camel) {
+    return SVG_CAMEL_CASE_ATTRS.has(camel) ? camel : camel.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+  }
+  function clamp(value, min, max) {
+    return Math.max(min, Math.min(value, max));
+  }
+  function bezier2D_pointAt(P0, P1, P2, P3, t) {
+    if (t <= 0) return [P0[0], P0[1]];
+    if (t >= 1) return [P3[0], P3[1]];
+    const u = 1 - t;
+    const u2 = u * u;
+    const u3 = u2 * u;
+    const t2 = t * t;
+    const t3 = t2 * t;
+    const w0 = u3;
+    const w1 = 3 * t * u2;
+    const w2 = 3 * t2 * u;
+    const w3 = t3;
+    return [
+      w0 * P0[0] + w1 * P1[0] + w2 * P2[0] + w3 * P3[0],
+      w0 * P0[1] + w1 * P1[1] + w2 * P2[1] + w3 * P3[1]
+    ];
+  }
+  var BEZIER_T_NUDGE = 1e-4;
+  function bezier2D_derivativeAt(P0, P1, P2, P3, t) {
+    const result = _bezier2D_derivativeAtRaw(P0, P1, P2, P3, t);
+    if (result[0] === 0 && result[1] === 0) {
+      const nudgedT = t < 0.5 ? t + BEZIER_T_NUDGE : t - BEZIER_T_NUDGE;
+      return _bezier2D_derivativeAtRaw(P0, P1, P2, P3, nudgedT);
+    }
+    return result;
+  }
+  function _bezier2D_derivativeAtRaw(P0, P1, P2, P3, t) {
+    const u = 1 - t;
+    const a = 3 * u * u;
+    const b = 6 * t * u;
+    const c = 3 * t * t;
+    return [
+      a * (P1[0] - P0[0]) + b * (P2[0] - P1[0]) + c * (P3[0] - P2[0]),
+      a * (P1[1] - P0[1]) + b * (P2[1] - P1[1]) + c * (P3[1] - P2[1])
+    ];
+  }
+  function bezier2D_arcLengthLUT(P0, P1, P2, P3, steps = 100) {
+    const n = steps + 1;
+    const ts = new Float64Array(n);
+    const ds = new Float64Array(n);
+    let prev = bezier2D_pointAt(P0, P1, P2, P3, 0);
+    ts[0] = 0;
+    ds[0] = 0;
+    let cum = 0;
+    for (let i = 1; i < n; i++) {
+      const t = i / steps;
+      const cur = bezier2D_pointAt(P0, P1, P2, P3, t);
+      const dx = cur[0] - prev[0];
+      const dy = cur[1] - prev[1];
+      cum += Math.sqrt(dx * dx + dy * dy);
+      ts[i] = t;
+      ds[i] = cum;
+      prev = cur;
+    }
+    return { ts, ds };
+  }
+  function bezier2D_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);
+  }
+  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 (autoOrient && i > 0) {
+        insertSharpCornerStepKfIfNeeded(out, prevKf, nextKf, prevPos, nextPos, rotationTol);
+      }
+      materialiseSegment(out, prevKf, nextKf, prevPos, nextPos, autoOrient, flatnessTol, rotationTol, maxSamples);
+    }
+    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 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;
+    }
+  }
+  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;
+    }
+    return p < 0.5 ? prev : next;
+  }
+  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;
+    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;
+    }
+  }
+  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);
+      }
+    }
+    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 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;
+    }
+    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);
+  }
+  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 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;
+        }
+      }
+    }
+    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 });
+        }
+      }
+    }
+    if (!newChildren && !newAnimate) return null;
+    const cloned = __spreadValues({}, node);
+    if (newChildren) cloned.children = newChildren;
+    if (newAnimate) cloned.animate = newAnimate;
+    return cloned;
+  }
+  function parsePathCommands(d) {
+    const tokens = d.split(/([MLCZmlcz]|[\s,]+)/).map((t) => t.trim()).filter((t) => t && t !== ",");
+    const commands = [];
+    let currentCommand = null;
+    for (const token of tokens) {
+      if (/[MLCZmlcz]/.test(token)) {
+        currentCommand = { type: token, values: [] };
+        commands.push(currentCommand);
+      } else if (currentCommand) {
+        const value = +token;
+        currentCommand.values.push(Number.isNaN(value) ? 0 : value);
+      }
+    }
+    return commands;
+  }
+  function parseSvgPathToBezier(d) {
+    const res = [];
+    let currentPath;
+    const commands = parsePathCommands(d);
+    for (const command of commands) {
+      const type = command.type;
+      const values = command.values;
+      if (type === "M" || type === "m") {
+        const x = values[0] || 0;
+        const y = values[1] || 0;
+        currentPath = {
+          v: [[x, y]],
+          i: [[x, y]],
+          o: [[x, y]],
+          c: false
+        };
+        res.push(currentPath);
+        continue;
+      }
+      if (!currentPath) {
+        currentPath = {
+          v: [[0, 0]],
+          i: [[0, 0]],
+          o: [[0, 0]],
+          c: false
+        };
+        res.push(currentPath);
+      }
+      if (type === "L") {
+        const x = values[0] || 0;
+        const y = values[1] || 0;
+        currentPath.v.push([x, y]);
+        currentPath.i.push([x, y]);
+        currentPath.o.push([x, y]);
+      } else if (type === "C") {
+        const outX = values[0] || 0;
+        const outY = values[1] || 0;
+        const inX2 = values[2] || 0;
+        const inY2 = values[3] || 0;
+        const x2 = values[4] || 0;
+        const y2 = values[5] || 0;
+        currentPath.o[currentPath.o.length - 1] = [outX, outY];
+        currentPath.v.push([x2, y2]);
+        currentPath.i.push([inX2, inY2]);
+        currentPath.o.push([x2, y2]);
+      } else if (type === "Z" || type === "z") {
+        currentPath.c = true;
+      } else {
+        console.warn('Unsupported path command "' + type + '"');
+      }
+    }
+    return res;
+  }
+  function extractPathData(str) {
+    if (str.startsWith("path(") && str.endsWith(")")) {
+      return str.slice(5, -1);
+    }
+    if (/^[MmZzLlHhVvCcSsQqTtAa]/.test(str)) {
+      return str;
+    }
+    return void 0;
+  }
+  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 pathStr2 of pathsArray) {
+            const d = extractPathData(pathStr2);
+            if (d) {
+              paths.push(...parseSvgPathToBezier(d));
+            }
+          }
+          return { paths };
         }
-        if (key === "rotate") value = value + "deg";
-        propsCopy["transform"] = key + "(" + value + ")";
-      } else if (value !== void 0 && value !== null) {
-        propsCopy[key] = String(value);
       }
+      return value;
+    }
+    if (Array.isArray(value)) {
+      if (value.length > 0 && isPathString(value[0])) {
+        const paths = [];
+        for (const pathStr2 of value) {
+          const d = extractPathData(pathStr2);
+          if (d) {
+            paths.push(...parseSvgPathToBezier(d));
+          }
+        }
+        return { paths };
+      }
+      return { paths: value };
+    }
+    if (isPathString(value)) {
+      const d = extractPathData(value);
+      return { paths: parseSvgPathToBezier(d) };
+    }
+    return value;
+  }
+  function resolveEasing(easing, defs) {
+    var _a;
+    if (!easing) return void 0;
+    if (Array.isArray(easing)) {
+      return easing;
+    }
+    if ((_a = defs == null ? void 0 : defs.easings) == null ? void 0 : _a[easing]) {
+      return defs.easings[easing];
+    }
+    console.warn("Unknown easing name: " + easing);
+    return void 0;
+  }
+  function resolveAnimation(animRef, defs) {
+    var _a;
+    if (typeof animRef === "string") {
+      const resolved = (_a = defs == null ? void 0 : defs.animations) == null ? void 0 : _a[animRef];
+      if (!resolved) {
+        console.warn("Unknown animation name: " + animRef);
+      }
+      return resolved;
+    }
+    return animRef;
+  }
+  function resolveElementAnimation(animate, defs) {
+    if (!animate) return [];
+    const results = [];
+    if (typeof animate === "string") {
+      const resolved = resolveAnimation(animate, defs);
+      if (resolved) results.push(resolved);
+    } else if (Array.isArray(animate)) {
+      for (const item of animate) {
+        const resolved = resolveAnimation(item, defs);
+        if (resolved) results.push(resolved);
+      }
+    } else {
+      results.push(animate);
+    }
+    return results;
+  }
+  function interpolateValue(propName, a, b, t) {
+    var _a, _b;
+    if (propName === "d") {
+      const aPaths = (_a = a == null ? void 0 : a.paths) != null ? _a : Array.isArray(a) ? a : [];
+      const bPaths = (_b = b == null ? void 0 : b.paths) != null ? _b : Array.isArray(b) ? b : [];
+      return { paths: interpolateBeziers(aPaths, bPaths, t) };
+    }
+    if (COLOUR_ATTR_NAMES.has(propName)) {
+      return interpolateColor(a || [0, 0, 0, 1], b || [0, 0, 0, 1], t);
+    }
+    if (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;
+    const segCount = clamp((_a = loop.segmentCount) != null ? _a : totalIntervals, 1, totalIntervals);
+    let segKfs;
+    if (loop.before) {
+      segKfs = keyframes.slice(0, segCount + 1);
+    } else {
+      segKfs = keyframes.slice(totalIntervals - segCount);
+    }
+    const firstT = (_b = keyframes[0].t) != null ? _b : 0;
+    const lastT = (_c = keyframes[keyframes.length - 1].t) != null ? _c : 0;
+    let fillStart, fillEnd;
+    if (loop.before) {
+      fillStart = 0;
+      fillEnd = firstT;
+    } else {
+      fillStart = lastT;
+      fillEnd = duration;
+    }
+    const fillDuration = fillEnd - fillStart;
+    if (fillDuration <= 0) return keyframes;
+    const segStartT = (_d = segKfs[0].t) != null ? _d : 0;
+    const segEndT = (_e = segKfs[segKfs.length - 1].t) != null ? _e : 0;
+    const segDuration = segEndT - segStartT;
+    if (segDuration <= 0) return keyframes;
+    const template = segKfs.map((kf) => {
+      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;
+    const looped = [];
+    function appendRep(repStart, isReversed, partial) {
+      let entries;
+      if (isReversed) {
+        entries = [];
+        for (let i = template.length - 1; i >= 0; i--) {
+          entries.push({
+            relT: 1 - template[i].relT,
+            v: template[i].v,
+            // Easing for reversed transition: use reversed easing from the forward "from" keyframe
+            e: i > 0 ? reverseEasing(template[i - 1].e) : void 0,
+            // 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 {
+        entries = template;
+      }
+      const cutRelT = partial !== void 0 ? partial : 1;
+      for (let i = 0; i < entries.length; i++) {
+        const entry = entries[i];
+        if (entry.relT > cutRelT + 1e-9) {
+          const prev = entries[i - 1];
+          const intervalSpan = entry.relT - prev.relT;
+          const localFrac = (cutRelT - prev.relT) / intervalSpan;
+          const easedFrac = prev.e ? cubicBezier(prev.e)(localFrac) : localFrac;
+          const cutValue = interpolateValue(propName, prev.v, entry.v, easedFrac);
+          const { left: leftEasing } = splitEasing(prev.e, localFrac);
+          if (looped.length > 0 && prev.relT <= cutRelT) {
+            looped[looped.length - 1].e = leftEasing;
+          }
+          looped.push({ t: repStart + cutRelT * segDuration, v: cutValue, e: void 0 });
+          return;
+        }
+        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);
+      }
+    }
+    function appendRepTail(repStart, isReversed, tailFraction) {
+      let entries;
+      if (isReversed) {
+        entries = [];
+        for (let i = template.length - 1; i >= 0; i--) {
+          entries.push({
+            relT: 1 - template[i].relT,
+            v: template[i].v,
+            e: i > 0 ? reverseEasing(template[i - 1].e) : void 0,
+            tangentIn: template[i].tangentOut,
+            tangentOut: template[i].tangentIn
+          });
+        }
+      } else {
+        entries = template;
+      }
+      const startRelT = 1 - tailFraction;
+      for (let i = 0; i < entries.length; i++) {
+        const entry = entries[i];
+        if (entry.relT < startRelT - 1e-9) continue;
+        const prev = entries[i - 1];
+        if (prev && prev.relT < startRelT - 1e-9 && entry.relT > startRelT + 1e-9) {
+          const intervalSpan = entry.relT - prev.relT;
+          const localFrac = (startRelT - prev.relT) / intervalSpan;
+          const easedFrac = prev.e ? cubicBezier(prev.e)(localFrac) : localFrac;
+          const startValue = interpolateValue(propName, prev.v, entry.v, easedFrac);
+          const { right: rightEasing } = splitEasing(prev.e, localFrac);
+          looped.push({ t: repStart, v: startValue, e: rightEasing });
+        }
+        const pushed = {
+          t: repStart + (entry.relT - startRelT) * 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);
+      }
+    }
+    if (loop.before) {
+      if (partialFraction > 1e-9) {
+        const isReversed = !!loop.alternate && fullReps % 2 === 0;
+        appendRepTail(fillStart, isReversed, partialFraction);
+      }
+      for (let rep = 0; rep < fullReps; rep++) {
+        const distFromBoundary = fullReps - 1 - rep;
+        const isReversed = !!loop.alternate && distFromBoundary % 2 === 0;
+        const repStart = fillStart + remainder + rep * segDuration;
+        appendRep(repStart, isReversed);
+      }
+    } else {
+      for (let rep = 0; rep < fullReps; rep++) {
+        const isReversed = !!loop.alternate && rep % 2 === 0;
+        const repStart = fillStart + rep * segDuration;
+        appendRep(repStart, isReversed);
+      }
+      if (partialFraction > 1e-9) {
+        const isReversed = !!loop.alternate && fullReps % 2 === 0;
+        const repStart = fillStart + fullReps * segDuration;
+        appendRep(repStart, isReversed, partialFraction);
+      }
+    }
+    if (loop.before) {
+      return [...looped, ...keyframes];
+    } else {
+      return [...keyframes, ...looped];
+    }
+  }
+  function normalizeKeyframes(propName, propAnim, duration, defs) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const keyframes = propAnim.keyframes || propAnim.kfs || [];
+    const normalized = [];
+    for (const kf of keyframes) {
+      const timePct = (_b = (_a = kf.time) != null ? _a : kf.t) != null ? _b : 0;
+      let value = (_c = kf.value) != null ? _c : kf.v;
+      const easing = (_d = kf.easing) != null ? _d : kf.e;
+      if (propName === "d") {
+        value = normalizePathValue(value);
+      }
+      const propNameKebab = isCamelCaseWord(propName) ? camelCaseToKebabWordIfNeeded(propName) : propName;
+      if (COLOUR_ATTR_NAMES.has(propNameKebab)) {
+        value = (_e = parseColor(value)) != null ? _e : value;
+      }
+      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);
     }
-    return propsCopy;
+    normalized.sort((a, b) => {
+      var _a2, _b2;
+      return ((_a2 = a.t) != null ? _a2 : 0) - ((_b2 = b.t) != null ? _b2 : 0);
+    });
+    const loopRaw = propAnim.loop;
+    const loop = loopRaw === true ? {} : loopRaw || void 0;
+    if (loop && normalized.length >= 2) {
+      return expandLoopKeyframes(propName, normalized, loop, duration);
+    }
+    return normalized;
   }
-  function 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);
+  function mergeAnimationDefinitions(animations) {
+    const merged = {};
+    for (const anim of animations) {
+      for (const [prop, propAnim] of Object.entries(anim)) {
+        merged[prop] = propAnim;
+      }
+    }
+    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;
         }
       }
     }
-    return createElement(
-      type || "g",
-      getNormalizedProps(props),
-      resolvedStyle,
-      childElements,
-      props[TEXT_ATTR] || props[TEXT_CONTENT_ATTR]
-    );
+    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;
   }
-  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;
+  var _elementIdCounter = 0;
+  function generateElementId() {
+    return "_px_el_" + ++_elementIdCounter;
+  }
+  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) {
+        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;
+      }
     }
-    const start = () => {
-      api.play();
+    return normalized;
+  }
+  function getNormalisedBindings(doc, engine = PxAnimatorEngine.webapi) {
+    const animatorConfig = getAnimatorConfig(doc) || {};
+    const defs = getDefs(doc);
+    const duration = animatorConfig.duration || 1e3;
+    const bindings = [];
+    const processAnimation = (id, animate) => {
+      if (!animate) return null;
+      const animDefs = resolveElementAnimation(animate, defs);
+      if (animDefs.length === 0) return null;
+      const merged = mergeAnimationDefinitions(animDefs);
+      const normalizedAnim = normalizeAnimationDefinition(merged, duration, defs, engine);
+      if (Object.keys(normalizedAnim).length === 0) return null;
+      return {
+        id,
+        animate: normalizedAnim
+      };
     };
-    const handleEndAction = () => {
-      switch (outAction) {
-        case "pause":
-          api.pause();
-          break;
-        case "reset":
-          api.cancel();
-          break;
-        case "reverse":
-          api.play();
-          break;
-        case "continue":
-        default:
-          break;
+    const docBindings = getBindings(doc);
+    if (docBindings) {
+      for (const binding of docBindings) {
+        const normalized = processAnimation(binding.id, binding.animate);
+        if (normalized) bindings.push(normalized);
       }
-    };
-    switch (startOn) {
-      case "load": {
-        const startHandler = () => start();
-        if (document.readyState === "complete") {
-          startHandler();
-        } else {
-          window.addEventListener("load", startHandler, { once: true });
+    }
+    const processNode = (node) => {
+      const inlineAnim = node.animate;
+      if (inlineAnim && Object.keys(inlineAnim).length > 0) {
+        const nodeId = node.id || generateElementId();
+        node.id = nodeId;
+        const normalized = processAnimation(nodeId, inlineAnim);
+        if (normalized) bindings.push(normalized);
+      }
+      if (node.children) {
+        for (let i = 0; i < node.children.length; i++) {
+          processNode(node.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;
       }
-      case "mouseOver": {
-        const mouseOverHandler = () => start();
-        const mouseOutHandler = () => handleEndAction();
-        root.addEventListener("mouseenter", mouseOverHandler);
-        root.addEventListener("mouseleave", mouseOutHandler);
-        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 computed3 = calcPropertyValue(propName, propAnim, progress);
+      if (computed3) {
+        result[computed3.k] = computed3.v;
+      }
+    }
+    return result;
+  }
+  function applyTrimPathEffect(node, trimPath, isCombinedShape, ctx) {
+    if (!trimPath) return node;
+    const trimAllAsOne = !!trimPath.trimAllAsOne;
+    const leafEntries = [];
+    const measure = (n) => {
+      if (Array.isArray(n.children) && n.children.length > 0) {
+        for (const ch of n.children) measure(ch);
+        return;
       }
-      case "click": {
-        const clickHandler = () => {
-          if (api.isPlaying()) {
-            handleEndAction();
-          } else {
-            start();
-          }
-        };
-        root.addEventListener("click", clickHandler);
-        break;
+      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) {
+        const lengthPx = pxBezierPathLength(sp);
+        entry.subpaths.push({ subpath: sp, lengthPx, startOffsetPx: 0 });
       }
-      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;
+      leafEntries.push(entry);
+    };
+    measure(node);
+    if (!leafEntries.length) return node;
+    let acc = 0;
+    const iterOrder = trimAllAsOne ? [...leafEntries].reverse() : leafEntries;
+    for (const entry of iterOrder) {
+      for (const sp of entry.subpaths) {
+        if (!trimAllAsOne) acc = 0;
+        sp.startOffsetPx = acc;
+        acc += sp.lengthPx;
       }
-      case "programmatic":
-        break;
     }
-    return api;
-  }
-  function propAnimIsMotionPath(anim) {
-    var _a;
-    const kfs = (_a = anim.keyframes) != null ? _a : anim.kfs;
-    if (!Array.isArray(kfs)) return false;
-    if (anim.autoOrient) return true;
-    for (const kf of kfs) {
-      if (kf.tangentIn || kf.tangentOut) return true;
+    const chainLengthPx = acc;
+    if (trimAllAsOne && chainLengthPx < 1e-3) return node;
+    const offsetReadRaw = readAnimatable(trimPath.offset);
+    const offsetRead = offsetReadRaw.kind === "absent" ? { kind: "static", value: 0 } : offsetReadRaw;
+    const rangeReadRaw = readRangeWithCrossings(trimPath.range);
+    const rangeRead = rangeReadRaw.kind === "absent" ? { kind: "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);
     }
-    return false;
+    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);
   }
-  var _segmentCache = /* @__PURE__ */ new WeakMap();
-  function getSegmentCache(prevKf, nextKf, prevPos, nextPos) {
-    const existing = _segmentCache.get(prevKf);
-    if (existing) return existing;
-    const to = prevKf.tangentOut;
-    const ti = nextKf.tangentIn;
-    const P1 = [prevPos[0] + (to ? to[0] : 0), prevPos[1] + (to ? to[1] : 0)];
-    const P2 = [nextPos[0] + (ti ? ti[0] : 0), nextPos[1] + (ti ? ti[1] : 0)];
-    const lut = bezier2D_arcLengthLUT(prevPos, P1, P2, nextPos);
-    const entry = {
-      P0: prevPos,
-      P1,
-      P2,
-      P3: nextPos,
-      lut,
-      totalArc: lut.ds[lut.ds.length - 1]
+  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;
     };
-    _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 : bezier2D_tForDistance(seg.lut, localProgress * seg.totalArc);
-    const point = bezier2D_pointAt(seg.P0, seg.P1, seg.P2, seg.P3, t);
-    if (!autoOrient) return { translate: point };
-    const tan = bezier2D_derivativeAt(seg.P0, seg.P1, seg.P2, seg.P3, t);
-    const rotateDeg = Math.atan2(tan[1], tan[0]) * 180 / Math.PI;
-    return { translate: point, rotateDeg };
+  function getOffsetIndexRange(minMaxOffset) {
+    return [
+      Math.floor(Math.min(-minMaxOffset[0], -minMaxOffset[1])),
+      Math.ceil(Math.max(-minMaxOffset[0], -minMaxOffset[1]))
+    ];
   }
-  function parsePathCommands(d) {
-    const tokens = d.split(/([MLCZmlcz]|[\s,]+)/).map((t) => t.trim()).filter((t) => t && t !== ",");
-    const commands = [];
-    let currentCommand = null;
-    for (const token of tokens) {
-      if (/[MLCZmlcz]/.test(token)) {
-        currentCommand = { type: token, values: [] };
-        commands.push(currentCommand);
-      } else if (currentCommand) {
-        const value = +token;
-        currentCommand.values.push(Number.isNaN(value) ? 0 : value);
-      }
+  function readScalarValues(r) {
+    var _a;
+    if (r.kind === "absent") return [];
+    if (r.kind === "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 commands;
+    return out;
   }
-  function parseSvgPathToBezier(d) {
-    const res = [];
-    let currentPath;
-    const commands = parsePathCommands(d);
-    for (const command of commands) {
-      const type = command.type;
-      const values = command.values;
-      if (type === "M" || type === "m") {
-        const x = values[0] || 0;
-        const y = values[1] || 0;
-        currentPath = {
-          v: [[x, y]],
-          i: [[x, y]],
-          o: [[x, y]],
-          c: false
-        };
-        res.push(currentPath);
-        continue;
-      }
-      if (!currentPath) {
-        currentPath = {
-          v: [[0, 0]],
-          i: [[0, 0]],
-          o: [[0, 0]],
-          c: false
+  function computeAnimAttr(read, map) {
+    if (read.kind === "absent") return void 0;
+    if (read.kind === "static") return { kind: "static", value: map(read.value) };
+    return {
+      kind: "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
         };
-        res.push(currentPath);
-      }
-      if (type === "L") {
-        const x = values[0] || 0;
-        const y = values[1] || 0;
-        currentPath.v.push([x, y]);
-        currentPath.i.push([x, y]);
-        currentPath.o.push([x, y]);
-      } else if (type === "C") {
-        const outX = values[0] || 0;
-        const outY = values[1] || 0;
-        const inX2 = values[2] || 0;
-        const inY2 = values[3] || 0;
-        const x2 = values[4] || 0;
-        const y2 = values[5] || 0;
-        currentPath.o[currentPath.o.length - 1] = [outX, outY];
-        currentPath.v.push([x2, y2]);
-        currentPath.i.push([inX2, inY2]);
-        currentPath.o.push([x2, y2]);
-      } else if (type === "Z" || type === "z") {
-        currentPath.c = true;
-      } else {
-        console.warn('Unsupported path command "' + type + '"');
-      }
-    }
-    return res;
+      }),
+      loop: read.loop
+    };
   }
-  function extractPathData(str) {
-    if (str.startsWith("path(") && str.endsWith(")")) {
-      return str.slice(5, -1);
+  function applyAttr(node, attrName, attr) {
+    var _a, _b;
+    if (!attr) return;
+    if (attr.kind === "static") {
+      node[attrName] = attr.value;
+      return;
     }
-    if (/^[MmZzLlHhVvCcSsQqTtAa]/.test(str)) {
-      return str;
+    const prevAnimate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
+    const animate = __spreadValues({}, prevAnimate || {});
+    const block = { keyframes: attr.keyframes };
+    if (attr.loop !== void 0) block.loop = attr.loop;
+    animate[attrName] = block;
+    node.animate = animate;
+    const firstKf = attr.keyframes[0];
+    if (firstKf && ((_a = firstKf.value) != null ? _a : firstKf.v) !== void 0) {
+      node[attrName] = (_b = firstKf.value) != null ? _b : firstKf.v;
     }
-    return void 0;
-  }
-  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;
+  var OPACITY_STEP_MS = 10;
+  function computeOpacityFromRange(rangeRead) {
+    var _a, _b, _c, _d, _e, _f;
+    const hide = (v) => v[0] === v[1];
+    if (rangeRead.kind === "absent") return void 0;
+    if (rangeRead.kind === "static") return hide(rangeRead.value) ? { kind: "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 (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 pathStr2 of pathsArray) {
-            const d = extractPathData(pathStr2);
-            if (d) {
-              paths.push(...parseSvgPathToBezier(d));
-            }
-          }
-          return { paths };
-        }
+    if (!anyHide) return void 0;
+    if (allHide) return { kind: "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 + OPACITY_STEP_MS, value: 1 });
+      } else if (!prevHide && nextHide) {
+        out.push({ time: t - OPACITY_STEP_MS, value: 1 });
+        out.push({ time: t, value: 0 });
       }
-      return value;
     }
-    if (Array.isArray(value)) {
-      if (value.length > 0 && isPathString(value[0])) {
-        const paths = [];
-        for (const pathStr2 of value) {
-          const d = extractPathData(pathStr2);
-          if (d) {
-            paths.push(...parseSvgPathToBezier(d));
-          }
+    if (out.length <= 1) return void 0;
+    return { kind: "animated", keyframes: out };
+  }
+  function readRangeWithCrossings(raw) {
+    const r = readAnimatable(raw);
+    if (r.kind !== "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",
+        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));
         }
-        return { paths };
       }
-      return { paths: value };
     }
-    if (isPathString(value)) {
-      const d = extractPathData(value);
-      return { paths: parseSvgPathToBezier(d) };
-    }
-    return value;
-  }
-  function resolveEasing(easing, defs) {
-    var _a;
-    if (!easing) return void 0;
-    if (Array.isArray(easing)) {
-      return easing;
+    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 });
     }
-    if ((_a = defs == null ? void 0 : defs.easings) == null ? void 0 : _a[easing]) {
-      return defs.easings[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] });
     }
-    console.warn("Unknown easing name: " + easing);
-    return void 0;
+    return { kind: "animated", keyframes: out };
   }
-  function resolveAnimation(animRef, defs) {
-    var _a;
-    if (typeof animRef === "string") {
-      const resolved = (_a = defs == null ? void 0 : defs.animations) == null ? void 0 : _a[animRef];
-      if (!resolved) {
-        console.warn("Unknown animation name: " + animRef);
+  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 resolved;
     }
-    return animRef;
+    return (lo + hi) / 2;
   }
-  function resolveElementAnimation(animate, defs) {
-    if (!animate) return [];
-    const results = [];
-    if (typeof animate === "string") {
-      const resolved = resolveAnimation(animate, defs);
-      if (resolved) results.push(resolved);
-    } else if (Array.isArray(animate)) {
-      for (const item of animate) {
-        const resolved = resolveAnimation(item, defs);
-        if (resolved) results.push(resolved);
+  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
+        ];
       }
-    } else {
-      results.push(animate);
     }
-    return results;
+    return kfs[kfs.length - 1].value;
   }
-  function interpolateValue(propName, a, b, t) {
-    var _a, _b;
-    if (propName === "d") {
-      const aPaths = (_a = a == null ? void 0 : a.paths) != null ? _a : Array.isArray(a) ? a : [];
-      const bPaths = (_b = b == null ? void 0 : b.paths) != null ? _b : Array.isArray(b) ? b : [];
-      return { paths: interpolateBeziers(aPaths, bPaths, t) };
-    }
-    if (COLOUR_ATTR_NAMES.has(propName)) {
-      return interpolateColor(a || [0, 0, 0, 1], b || [0, 0, 0, 1], t);
+  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 (TRANSFORM_FN_NAMES.has(propName) || propName === "stroke-dasharray" || propName === "strokeDasharray") {
-      return interpolateVec(a || [], b || [], t);
+    if (path.c && v.length > 1) {
+      total += segmentLength(path, v.length - 1, 0);
     }
-    return interpolateNum(+(a || 0), +(b || 0), t);
+    return total;
   }
-  function expandLoopKeyframes(propName, keyframes, loop, duration) {
-    var _a, _b, _c, _d, _e;
-    const totalIntervals = keyframes.length - 1;
-    const segCount = clamp((_a = loop.segmentCount) != null ? _a : totalIntervals, 1, totalIntervals);
-    let segKfs;
-    if (loop.before) {
-      segKfs = keyframes.slice(0, segCount + 1);
+  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), h3 = Number((_d = node.height) != null ? _d : 0);
+    return "M" + (x + w) + "," + y + "L" + (x + w) + "," + (y + h3) + "L" + x + "," + (y + h3) + "L" + x + "," + y + "L" + (x + w) + "," + y + "z";
+  }
+  function applyPlayerEffects(root) {
+    var _a;
+    const ctx = {
+      defs: [],
+      warnings: [],
+      errors: [],
+      idMap: /* @__PURE__ */ new Map(),
+      nextId: 0,
+      contentRefInnerIds: /* @__PURE__ */ new Map(),
+      maskAncestorChains: /* @__PURE__ */ new Map(),
+      // Resolved engine: `frames` ONLY when explicitly set; auto/webapi/unset →
+      // webapi (we're not 100% sure it's frames, and CSS/WAAPI need the inline form).
+      engine: ((_a = getAnimatorConfig(root)) == null ? void 0 : _a.mode) === PxAnimatorMode.frames ? PxAnimatorEngine.frames : PxAnimatorEngine.webapi
+    };
+    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, clone: cloneFx, 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) {
+      applyRefHref(n, cloneFx, ctx);
+      n = splitForContentRef(n, transformation, originalId, innerIdForContentRef, ctx);
     } else {
-      segKfs = keyframes.slice(totalIntervals - segCount);
+      n = applyRefAndTransformationEffect(n, cloneFx, transformation, ctx);
     }
-    const firstT = (_b = keyframes[0].t) != null ? _b : 0;
-    const lastT = (_c = keyframes[keyframes.length - 1].t) != null ? _c : 0;
-    let fillStart, fillEnd;
-    if (loop.before) {
-      fillStart = 0;
-      fillEnd = firstT;
-    } else {
-      fillStart = lastT;
-      fillEnd = duration;
+    if (cloneFx == null ? void 0 : cloneFx.retime) node.effects = { clone: { retime: cloneFx.retime } };
+    if (originalId) ctx.idMap.set(originalId, n);
+    return n;
+  }
+  function applyPlayerEffects_retime(node, ctx) {
+    applyAllRetimeEffects(node, ctx);
+    return node;
+  }
+  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 rootViewport = readRootViewport(root);
+    const defsCollector = [];
+    const walked = walkAndMaterialise2(root, idMap, animatedIds, genId3, defsCollector, rootViewport);
+    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 readRootViewport(root) {
+    const vb = parseViewBox(root.viewBox);
+    if (vb) return [vb[2], vb[3]];
+    const w = numericAttr(root.width);
+    const h3 = numericAttr(root.height);
+    if (w !== void 0 && h3 !== void 0) return [w, h3];
+    return [1, 1];
+  }
+  function numericAttr(v) {
+    if (typeof v === "number") return v;
+    if (typeof v === "string") {
+      const n = parseFloat(v);
+      return Number.isFinite(n) ? n : void 0;
     }
-    const fillDuration = fillEnd - fillStart;
-    if (fillDuration <= 0) return keyframes;
-    const segStartT = (_d = segKfs[0].t) != null ? _d : 0;
-    const segEndT = (_e = segKfs[segKfs.length - 1].t) != null ? _e : 0;
-    const segDuration = segEndT - segStartT;
-    if (segDuration <= 0) return keyframes;
-    const template = segKfs.map((kf) => ({
-      relT: (kf.t - segStartT) / segDuration,
-      v: kf.v,
-      e: kf.e
-    }));
-    const fullReps = Math.floor(fillDuration / segDuration);
-    const remainder = fillDuration - fullReps * segDuration;
-    const partialFraction = remainder / segDuration;
-    const looped = [];
-    function appendRep(repStart, isReversed, partial) {
-      let entries;
-      if (isReversed) {
-        entries = [];
-        for (let i = template.length - 1; i >= 0; i--) {
-          entries.push({
-            relT: 1 - template[i].relT,
-            v: template[i].v,
-            // Easing for reversed transition: use reversed easing from the forward "from" keyframe
-            e: i > 0 ? reverseEasing(template[i - 1].e) : void 0
-          });
+    return void 0;
+  }
+  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;
         }
-      } else {
-        entries = template;
       }
-      const cutRelT = partial !== void 0 ? partial : 1;
-      for (let i = 0; i < entries.length; i++) {
-        const entry = entries[i];
-        if (entry.relT > cutRelT + 1e-9) {
-          const prev = entries[i - 1];
-          const intervalSpan = entry.relT - prev.relT;
-          const localFrac = (cutRelT - prev.relT) / intervalSpan;
-          const easedFrac = prev.e ? cubicBezier(prev.e)(localFrac) : localFrac;
-          const cutValue = interpolateValue(propName, prev.v, entry.v, easedFrac);
-          const { left: leftEasing } = splitEasing(prev.e, localFrac);
-          if (looped.length > 0 && prev.relT <= cutRelT) {
-            looped[looped.length - 1].e = leftEasing;
+      if (!r && n.children) {
+        for (const ch of n.children) {
+          if (hasAnim(ch, visiting)) {
+            r = true;
+            break;
           }
-          looped.push({ t: repStart + cutRelT * segDuration, v: cutValue, e: void 0 });
-          return;
         }
-        looped.push({
-          t: repStart + entry.relT * segDuration,
-          v: entry.v,
-          e: i < entries.length - 1 ? entry.e : void 0
-        });
       }
+      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);
     }
-    for (let rep = 0; rep < fullReps; rep++) {
-      const distFromBoundary = loop.before ? fullReps - 1 - rep : rep;
-      const isReversed = !!loop.alternate && distFromBoundary % 2 === 0;
-      const repStart = fillStart + rep * segDuration;
-      appendRep(repStart, isReversed);
-    }
-    if (partialFraction > 1e-9) {
-      const isReversed = !!loop.alternate && fullReps % 2 === 0;
-      const repStart = fillStart + fullReps * segDuration;
-      appendRep(repStart, isReversed, partialFraction);
-    }
-    if (loop.before) {
-      return [...looped, ...keyframes];
-    } else {
-      return [...keyframes, ...looped];
-    }
+    return result;
   }
-  function normalizeKeyframes(propName, propAnim, duration, defs) {
-    var _a, _b, _c, _d, _e;
-    const keyframes = propAnim.keyframes || propAnim.kfs || [];
-    const normalized = [];
-    for (const kf of keyframes) {
-      const timePct = (_b = (_a = kf.time) != null ? _a : kf.t) != null ? _b : 0;
-      let value = (_c = kf.value) != null ? _c : kf.v;
-      const easing = (_d = kf.easing) != null ? _d : kf.e;
-      if (propName === "d") {
-        value = normalizePathValue(value);
-      }
-      if (COLOUR_ATTR_NAMES.has(propName)) {
-        value = (_e = parseColor(value)) != null ? _e : value;
+  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, rootViewport) {
+    var _a, _b, _c, _d;
+    const clone2 = deepClonePxNode(target);
+    regenerateIdsAndRewriteRefs(clone2, genId3);
+    const symbolViewBox = clone2.type === "symbol" ? parseViewBox(clone2.viewBox) : void 0;
+    const useW = (_b = (_a = numericAttr(useNode.width)) != null ? _a : symbolViewBox == null ? void 0 : symbolViewBox[2]) != null ? _b : rootViewport[0];
+    const useH = (_d = (_c = numericAttr(useNode.height)) != null ? _c : symbolViewBox == null ? void 0 : symbolViewBox[3]) != null ? _d : rootViewport[1];
+    const rewrittenClone = clone2.type === "symbol" ? rewriteSymbolRootToGroup(clone2, genId3, defsCollector, useW, useH) : clone2;
+    const materialisedClone = walkAndMaterialise2(rewrittenClone, idMap, animatedIds, genId3, defsCollector, rootViewport);
+    const newNode = __spreadProps(__spreadValues({}, useNode), { type: "g", children: [materialisedClone] });
+    delete newNode.href;
+    delete newNode.width;
+    delete newNode.height;
+    return applyUseOffsetToG(newNode);
+  }
+  function rewriteSymbolRootToGroup(symbolNode, genId3, defsCollector, useW, useH) {
+    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;
+    const scale = vbW > 0 && vbH > 0 ? Math.min(useW / vbW, useH / vbH) : 1;
+    const xOff = (useW - vbW * scale) / 2;
+    const yOff = (useH - vbH * scale) / 2;
+    const parts = [];
+    if (xOff !== 0 || yOff !== 0) parts.push("translate(" + xOff + "," + yOff + ")");
+    if (scale !== 1) parts.push("scale(" + scale + ")");
+    if (vbX !== 0 || vbY !== 0) parts.push("translate(" + -vbX + "," + -vbY + ")");
+    if (parts.length) g.transform = parts.join("");
+    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, rootViewport) {
+    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, rootViewport);
       }
-      normalized.push({
-        t: timePct,
-        v: value,
-        e: resolveEasing(easing, defs)
-      });
     }
-    normalized.sort((a, b) => {
-      var _a2, _b2;
-      return ((_a2 = a.t) != null ? _a2 : 0) - ((_b2 = b.t) != null ? _b2 : 0);
+    if (!node.children) return node;
+    let changed = false;
+    const newChildren = node.children.map((ch) => {
+      const m = walkAndMaterialise2(ch, idMap, animatedIds, genId3, defsCollector, rootViewport);
+      if (m !== ch) changed = true;
+      return m;
     });
-    const loopRaw = propAnim.loop;
-    const loop = loopRaw === true ? {} : loopRaw || void 0;
-    if (loop && normalized.length >= 2) {
-      return expandLoopKeyframes(propName, normalized, loop, duration);
+    return changed ? __spreadProps(__spreadValues({}, node), { children: newChildren }) : node;
+  }
+  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);
+      root = pruneUnreferencedDefs(root);
     }
-    return normalized;
+    return root;
   }
-  function mergeAnimationDefinitions(animations) {
-    const merged = {};
-    for (const anim of animations) {
-      for (const [prop, propAnim] of Object.entries(anim)) {
-        merged[prop] = propAnim;
-      }
+  function pruneUnreferencedDefs(root) {
+    const stripHash3 = (h3) => h3.startsWith("#") ? h3.slice(1) : h3;
+    const walk = (n, fn) => {
+      var _a;
+      fn(n);
+      (_a = n.children) == null ? void 0 : _a.forEach((c) => walk(c, fn));
+    };
+    let changed = true;
+    while (changed) {
+      changed = false;
+      const referenced = /* @__PURE__ */ new Set();
+      walk(root, (n) => {
+        if (n.type === "use" && typeof n.href === "string") referenced.add(stripHash3(n.href));
+      });
+      walk(root, (n) => {
+        if (!n.children) return;
+        let kept = n.children;
+        if (n.type === "defs") {
+          kept = kept.filter((c) => !((c.type === "g" || c.type === "symbol") && typeof c.id === "string" && !referenced.has(c.id)));
+        }
+        kept = kept.filter((c) => !(c.type === "defs" && (!c.children || c.children.length === 0)));
+        if (kept.length !== n.children.length) {
+          n.children = kept;
+          changed = true;
+        }
+      });
     }
-    return merged;
+    return root;
   }
-  var _elementIdCounter = 0;
-  function generateElementId() {
-    return "_px_el_" + ++_elementIdCounter;
+  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;
+  var DATA_SVG_IMAGE_RE = /^data:image\/svg\+xml(?:;[^,]*)?,/i;
+  var DATA_IMAGE_BASE64_PAYLOAD_RE = /^data:image\/[^;,]*;base64,([A-Za-z0-9+/]{8})/i;
+  var BASE64_RASTER_MAGICS = ["iVBORw0K", "/9j/", "R0lGOD", "UklGR", "Qk"];
+  function isContentSniffedRasterImage(str) {
+    const m = DATA_IMAGE_BASE64_PAYLOAD_RE.exec(str);
+    return !!m && BASE64_RASTER_MAGICS.some((magic) => m[1].startsWith(magic));
   }
-  function normalizeAnimationDefinition(animDef, duration, defs) {
-    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 };
-      }
-    }
-    return normalized;
+  function isDangerousAttrName(nameLower) {
+    if (nameLower.startsWith("on")) return true;
+    return false;
   }
-  function getNormalisedBindings(doc) {
-    const animatorConfig = getAnimatorConfig(doc) || {};
-    const defs = getDefs(doc);
-    const duration = animatorConfig.duration || 1e3;
-    const bindings = [];
-    const processAnimation = (id, animate) => {
-      if (!animate) return null;
-      const animDefs = resolveElementAnimation(animate, defs);
-      if (animDefs.length === 0) return null;
-      const merged = mergeAnimationDefinitions(animDefs);
-      const normalizedAnim = normalizeAnimationDefinition(merged, duration, defs);
-      if (Object.keys(normalizedAnim).length === 0) return null;
-      return {
-        id,
-        animate: normalizedAnim
-      };
-    };
-    const docBindings = getBindings(doc);
-    if (docBindings) {
-      for (const binding of docBindings) {
-        const normalized = processAnimation(binding.id, binding.animate);
-        if (normalized) bindings.push(normalized);
-      }
+  function sanitiseAttributeValue(name, value) {
+    const nameLower = name.toLowerCase();
+    if (isDangerousAttrName(nameLower)) {
+      console.warn("Attribute blocked (event handler / dangerous): ", nameLower);
+      return void 0;
     }
-    const processNode = (node) => {
-      const inlineAnim = node.animate;
-      if (inlineAnim && Object.keys(inlineAnim).length > 0) {
-        const nodeId = node.id || generateElementId();
-        node.id = nodeId;
-        const normalized = processAnimation(nodeId, inlineAnim);
-        if (normalized) bindings.push(normalized);
-      }
-      if (node.children) {
-        for (let i = 0; i < node.children.length; i++) {
-          processNode(node.children[i]);
-        }
+    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;
       }
-    };
-    if (doc.children) {
-      for (let i = 0; i < doc.children.length; i++) {
-        processNode(doc.children[i]);
+      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) || DATA_SVG_IMAGE_RE.test(str) || isContentSniffedRasterImage(str))) return value;
+      console.warn('Attribute "' + nameLower + '" blocked: must be #id, url(#id), or data:image/\u2026 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]);
       }
     }
-    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;
+    if (children) {
+      for (const child of children) {
+        element.appendChild(child);
       }
     }
-    return { prevKf, nextKf };
+    if (textContent) element.textContent = textContent;
+    return element;
   }
-  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) {
-      }
+  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];
     }
-    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;
+    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);
       }
-      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;
+    }
+    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);
         }
       }
-      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 };
+    return createElement(
+      type || "g",
+      getNormalizedProps(props),
+      resolvedStyle,
+      childElements,
+      props[TEXT_ATTR] || props[TEXT_CONTENT_ATTR]
+    );
   }
-  function calcAnimationValues(animDef, progress) {
-    const result = {};
-    for (const [propName, propAnim] of Object.entries(animDef)) {
-      const computed3 = calcPropertyValue(propName, propAnim, progress);
-      if (computed3) {
-        result[computed3.k] = computed3.v;
+  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;
+      }
+      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;
+      }
+      case "programmatic":
+        break;
     }
-    return result;
+    return api;
   }
   function getSelector(id) {
     return "#" + 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;
@@ -59412,6 +60998,10 @@ ${codeFrame}` : message);
     };
     const startAnim = () => {
       if (playing) return;
+      if (Number.isFinite(totalDuration) && timeBeforeLastStartMs >= totalDuration) {
+        timeBeforeLastStartMs = 0;
+        finishCalled = false;
+      }
       playing = true;
       lastStartedTs = Date.now();
       loopAnim(true);
@@ -59642,7 +61232,6 @@ ${codeFrame}` : message);
   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);
@@ -59652,6 +61241,7 @@ ${codeFrame}` : message);
         console.warn("createFrameLoopAnimator: No root element provided");
       }
     }
+    const bindings = getNormalisedBindings(doc, PxAnimatorEngine.webapi);
     const animations = [];
     const _iterations = config.iterations;
     let iterations;
@@ -59781,15 +61371,15 @@ ${codeFrame}` : message);
   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) {
@@ -59911,9 +61501,10 @@ ${codeFrame}` : message);
   function createAnimatorImpl(doc, adapter, callbacks, containerElement) {
     const effectsWarnings = validateNodeEffects(doc);
     for (const w of effectsWarnings) console.warn("[PxAnimator] effects shape warning:", w);
-    doc = applyPlayerEffects(doc).root;
     const animatorConfig = getAnimatorConfig(doc) || {};
     animatorConfig.debug = true;
+    const engine = animatorConfig.mode === PxAnimatorMode.frames ? PxAnimatorEngine.frames : PxAnimatorEngine.webapi;
+    doc = materialiseAllInTree(doc, engine);
     let rootElement = null;
     if (containerElement && doc.children) {
       doc = generateNewIds(doc);