@pixodesk/svg-animator-react 1.0.22 → 1.0.26

package/dist/index.umd.js

@@ -1936,8 +1936,9 @@ var PixodeskAnimatorReact = (() => {
     }
     isValid(raw, ctx, path) {
       var _a;
-      if (this.schemas.some((s) => s.isValid(raw))) return true;
-      ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": no union member matched for value " + ((_a = JSON.stringify(raw)) != null ? _a : "").slice(0, 60));
+      const probe = ctx && { errors: [], warnings: [], strict: ctx.strict };
+      if (this.schemas.some((s) => s.isValid(raw, probe, path ? [...path] : void 0))) return true;
+      ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": no union member matched for value " + ((_a = JSON.stringify(raw)) != null ? _a : "").slice(0, 240));
       return false;
     }
     _canSanitize(raw) {
@@ -2013,6 +2014,7 @@ var PixodeskAnimatorReact = (() => {
       if (ctx == null ? void 0 : ctx.strict) {
         for (const key of Object.keys(obj)) {
           if (key in this._shape) continue;
+          if (obj[key] === void 0) continue;
           p.push(key);
           ctx.errors.push(pathStr(p) + ": unexpected extra key");
           p.pop();
@@ -2153,6 +2155,23 @@ var PixodeskAnimatorReact = (() => {
       return true;
     }
   };
+  var Defined = class extends Base {
+    constructor() {
+      super(...arguments);
+      this._default = void 0;
+    }
+    sanitize(raw) {
+      return raw;
+    }
+    isValid(raw, ctx, path) {
+      if (raw !== void 0) return true;
+      ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": required value is missing");
+      return false;
+    }
+    _canSanitize(raw) {
+      return raw !== void 0;
+    }
+  };
   var Lazy = class extends Base {
     constructor(fn, _default) {
       super();
@@ -2250,6 +2269,8 @@ var PixodeskAnimatorReact = (() => {
     record: (value) => new Rec(value),
     /** Passes anything through unchanged — always valid. */
     any: () => new Any(),
+    /** Anything EXCEPT `undefined` — an open type whose presence is required (V6). */
+    defined: () => new Defined(),
     /** Fixed-length tuple — validates element count and each position individually. */
     tuple: (schemas) => new Tuple(schemas),
     /** Defers schema creation — required for recursive types. Must supply a default value. */
@@ -2259,13 +2280,52 @@ var PixodeskAnimatorReact = (() => {
   var PX_ANIM_ATTR_NAME = "_px_animator";
   var PxAnimatorMode = {
     auto: "auto",
-    webapi: "webapi",
+    waapi: "waapi",
     frames: "frames"
   };
   var PxAnimatorEngine = {
-    webapi: PxAnimatorMode.webapi,
+    waapi: PxAnimatorMode.waapi,
     frames: PxAnimatorMode.frames
   };
+  var PxLoopExtend = {
+    /** Segment from the START; the animation is extended BEFORE the first keyframe
+     *  (intro loops that run before the main timeline begins). */
+    before: "before",
+    /** DEFAULT — segment from the END; extended AFTER the last keyframe (idle/outro
+     *  loops that continue once the main timeline has finished). */
+    after: "after"
+  };
+  var PxMaskType = {
+    luminance: "luminance",
+    alpha: "alpha"
+  };
+  var PxUnits = {
+    userSpaceOnUse: "userSpaceOnUse",
+    objectBoundingBox: "objectBoundingBox"
+  };
+  var PxCloneType = {
+    content: "content"
+  };
+  var PxPathOverflow = {
+    clip: "clip",
+    extend: "extend"
+  };
+  var PxLengthAdjust = {
+    spacing: "spacing",
+    spacingAndGlyphs: "spacingAndGlyphs"
+  };
+  var PxTextPathMethod = {
+    align: "align",
+    stretch: "stretch"
+  };
+  var PxTextPathSpacing = {
+    auto: "auto",
+    exact: "exact"
+  };
+  var PxTrimSubPaths = {
+    separate: "separate",
+    combined: "combined"
+  };
   var TEXT_ATTR = "text";
   var TEXT_CONTENT_ATTR = "textContent";
   var INTERNAL_ATTRS = /* @__PURE__ */ new Set([
@@ -2274,9 +2334,45 @@ var PixodeskAnimatorReact = (() => {
     "animator",
     "meta",
     "animate",
+    "effects",
     TEXT_ATTR,
     TEXT_CONTENT_ATTR
   ]);
+  var PxGradientUnits = {
+    userSpaceOnUse: "userSpaceOnUse",
+    objectBoundingBox: "objectBoundingBox"
+  };
+  var PxGradientSpreadMethod = {
+    pad: "pad",
+    reflect: "reflect",
+    repeat: "repeat"
+  };
+  var PxGradientType = {
+    linear: "linear",
+    radial: "radial"
+  };
+  function isPxElementFileFormat(fileJson) {
+    if (!(fileJson && typeof fileJson === "object" && !Array.isArray(fileJson))) {
+      return false;
+    }
+    return fileJson["type"] === "svg";
+  }
+  function getAnimatorConfig(doc) {
+    var _a;
+    return (doc == null ? void 0 : doc.animator) || ((_a = doc == null ? void 0 : doc.meta) == null ? void 0 : _a.animator);
+  }
+  function getDefs(doc) {
+    var _a;
+    if (!doc) return void 0;
+    return (_a = getAnimatorConfig(doc)) == null ? void 0 : _a.definitions;
+  }
+  function getBindings(doc) {
+    var _a;
+    if (!doc) return void 0;
+    const animateById = (_a = getAnimatorConfig(doc)) == null ? void 0 : _a.animateById;
+    if (!animateById) return void 0;
+    return Object.entries(animateById).map(([id, anim]) => ({ id, animate: anim }));
+  }
   var PxEasingOrRefSchema = px.union([
     px.string(),
     px.tuple([px.number(), px.number(), px.number(), px.number()])
@@ -2288,13 +2384,15 @@ var PixodeskAnimatorReact = (() => {
     px.array(px.number()),
     px.lazy(() => PxTransformPartsSchema, {}),
     px.object({ path: px.string() }),
-    px.lazy(() => px.object({ paths: px.array(PxBezierPathSchema) }), { paths: [] })
+    px.lazy(() => px.object({ paths: px.array(PxBezierPathSchema) }), { paths: [] }),
+    // Gradient `stops` timeline — each kf value is the full stops-array snapshot.
+    px.lazy(() => px.array(PxGradientStopSchema), [])
   ]));
   var PxKeyframeSchema = implementsInterface()(px.object({
     time: px.number().optional(),
     t: px.number().optional(),
-    value: px.any().optional(),
-    v: px.any().optional(),
+    value: PxKeyframeValueSchema.optional(),
+    v: PxKeyframeValueSchema.optional(),
     easing: PxEasingOrRefSchema.optional(),
     e: PxEasingOrRefSchema.optional(),
     tangentOut: px.tuple([px.number(), px.number()]).optional(),
@@ -2308,10 +2406,11 @@ var PixodeskAnimatorReact = (() => {
   }));
   var PxLoopSchema = implementsInterface()(px.object({
     segmentCount: px.number().optional(),
-    before: px.boolean().optional(),
+    extend: px.enum([PxLoopExtend.before, PxLoopExtend.after]).optional(),
     alternate: px.boolean().optional()
   }));
   var PxPropertyAnimationSchema = implementsInterface()(px.object({
+    value: PxKeyframeValueSchema.optional(),
     keyframes: px.array(PxKeyframeSchema).optional(),
     kfs: px.array(PxKeyframeSchema).optional(),
     loop: px.union([PxLoopSchema, px.boolean()]).optional(),
@@ -2326,6 +2425,7 @@ var PixodeskAnimatorReact = (() => {
   }));
   var PxTransformValueSchema = px.union([
     px.string(),
+    PxTransformPartsSchema,
     px.object({ value: PxTransformPartsSchema }),
     PxPropertyAnimationSchema
   ]);
@@ -2360,9 +2460,11 @@ var PixodeskAnimatorReact = (() => {
     glyphs: px.record(PxGlyphFontSchema).optional()
   }));
   var PxAnimatorConfigSchema = implementsInterface()(px.object({
-    mode: px.enum([PxAnimatorMode.auto, PxAnimatorMode.webapi, PxAnimatorMode.frames]).optional(),
+    mode: px.enum([PxAnimatorMode.auto, PxAnimatorMode.waapi, PxAnimatorMode.frames]).optional(),
     duration: px.number().optional(),
     delay: px.number().optional(),
+    // LAW (SCHEMA-DESIGN R3, S10): the ONE sanctioned string-in-number union
+    // (CSS animation-iteration-count familiarity) — do not add more mixed unions.
     iterations: px.union([px.number(), px.literal("infinite")]).optional(),
     fill: px.enum(["forwards", "backwards", "both", "none"]).optional(),
     direction: px.enum(["normal", "reverse", "alternate", "alternate-reverse"]).optional(),
@@ -2370,9 +2472,8 @@ var PixodeskAnimatorReact = (() => {
     trigger: PxTriggerSchema.optional(),
     resetOnFinish: px.boolean().optional(),
     definitions: PxDefsSchema.optional(),
-    animate: px.record(PxElementAnimationSchema).optional(),
-    timeline: px.string().optional(),
-    debug: px.boolean().optional(),
+    animateById: px.record(PxElementAnimationSchema).optional(),
+    timelineSource: px.string().optional(),
     debugInstName: px.string().optional()
   }));
   var PxBindingSchema = implementsInterface()(px.object({
@@ -2382,26 +2483,29 @@ var PixodeskAnimatorReact = (() => {
   var PxAttrValueSchema = px.union([
     px.string(),
     px.number(),
-    px.object({ value: px.any() }),
-    PxPropertyAnimationSchema
+    px.array(px.number()),
+    // Structured static — `{value: …}` (read-accepted transitional spelling, S1).
+    // `defined`, not `any`: the KEY's presence is what identifies this branch (V6).
+    px.object({ value: px.defined() }),
+    // Bare transform parts record — the canonical static `transform` on the wire (T2).
+    PxTransformPartsSchema
   ]);
   var PxAnimatableNumberSchema = px.union([
     px.number(),
     px.object({ value: px.number() }),
-    px.object({
-      keyframes: px.array(PxKeyframeSchema),
-      autoOrient: px.boolean().optional()
-    })
+    PxPropertyAnimationSchema
   ]);
   var PxAnimatableVec2Schema = px.union([
     px.tuple([px.number(), px.number()]),
     px.object({ value: px.tuple([px.number(), px.number()]) }),
-    px.object({
-      keyframes: px.array(PxKeyframeSchema),
-      autoOrient: px.boolean().optional()
-    })
+    PxPropertyAnimationSchema
+  ]);
+  var PxAnimatableStringSchema = px.union([
+    px.string(),
+    px.object({ value: px.string() }),
+    PxPropertyAnimationSchema
   ]);
-  var PxTransformationEffectSchema = implementsInterface()(px.object({
+  var PxTransformByEffectSchema = implementsInterface()(px.object({
     translate: PxAnimatableVec2Schema.optional(),
     rotate: PxAnimatableNumberSchema.optional(),
     scale: PxAnimatableVec2Schema.optional(),
@@ -2409,42 +2513,46 @@ var PixodeskAnimatorReact = (() => {
     origin: PxAnimatableVec2Schema.optional()
   }));
   var PxRepeaterEffectSchema = implementsInterface()(px.object({
+    // STATIC config, not a channel (V2/SCHEMA-DESIGN R5): the copy COUNT is read
+    // once at expansion time and never sampled — plain number, no `keyframes`.
     copies: px.number().optional(),
     translate: PxAnimatableVec2Schema.optional(),
     rotate: PxAnimatableNumberSchema.optional(),
+    skew: 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()
+    sourceId: px.string().optional(),
+    maskType: px.enum([PxMaskType.luminance, PxMaskType.alpha]).optional(),
+    maskUnits: px.enum([PxUnits.userSpaceOnUse, PxUnits.objectBoundingBox]).optional(),
+    maskContentUnits: px.enum([PxUnits.userSpaceOnUse, PxUnits.objectBoundingBox]).optional(),
+    x: px.number().optional(),
+    y: px.number().optional(),
+    width: px.number().optional(),
+    height: px.number().optional()
   }));
   var PxClipPathEffectSchema = implementsInterface()(px.object({
-    d: px.string().optional(),
+    d: PxAnimatableStringSchema.optional(),
     animate: PxPropertyAnimationSchema.optional()
   }));
   var PxTrimPathEffectSchema = implementsInterface()(px.object({
     offset: PxAnimatableNumberSchema.optional(),
     range: PxAnimatableVec2Schema.optional(),
-    trimAllAsOne: px.boolean().optional()
+    subPaths: px.enum([PxTrimSubPaths.separate, PxTrimSubPaths.combined]).optional()
   }));
   var PxRetimeEffectSchema = implementsInterface()(px.object({
-    baseId: px.string().optional(),
+    sourceId: px.string().optional(),
     start: px.number().optional(),
     stretch: px.number().optional(),
     timeCrop: px.tuple([px.number(), px.number()]).optional()
   }));
   var PxCloneEffectSchema = implementsInterface()(px.object({
-    type: px.string().optional(),
-    baseId: px.string().optional(),
+    // Contextual kind — the `type` convention, see `PxNodeBase.type`.
+    type: px.enum([PxCloneType.content]).optional(),
+    sourceId: px.string().optional(),
     retime: PxRetimeEffectSchema.optional()
   }));
-  var PxGradientType = {
-    linear: "linear",
-    radial: "radial"
-  };
   var PxGradientStopSchema = implementsInterface()(px.object({
     offset: px.number(),
     color: px.string()
@@ -2452,39 +2560,28 @@ var PixodeskAnimatorReact = (() => {
   var PxAnimatableGradientStopsSchema = px.union([
     px.array(PxGradientStopSchema),
     px.object({ value: px.array(PxGradientStopSchema) }),
-    px.object({ keyframes: px.array(PxKeyframeSchema) })
+    PxPropertyAnimationSchema
   ]);
-  var PxGradientGeometryAnimationSchema = implementsInterface()(px.object({
-    gradientX1: PxPropertyAnimationSchema.optional(),
-    gradientY1: PxPropertyAnimationSchema.optional(),
-    gradientX2: PxPropertyAnimationSchema.optional(),
-    gradientY2: PxPropertyAnimationSchema.optional(),
-    gradientCx: PxPropertyAnimationSchema.optional(),
-    gradientCy: PxPropertyAnimationSchema.optional(),
-    gradientFx: PxPropertyAnimationSchema.optional(),
-    gradientFy: PxPropertyAnimationSchema.optional(),
-    gradientR: PxPropertyAnimationSchema.optional()
-  }));
   var PxFillGradientEffectSchema = implementsInterface()(px.object({
+    // Contextual kind — the `type` convention, see `PxNodeBase.type`.
     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(),
+    p1: PxAnimatableVec2Schema.optional(),
+    p2: PxAnimatableVec2Schema.optional(),
+    c: PxAnimatableVec2Schema.optional(),
+    r: PxAnimatableNumberSchema.optional(),
+    fp: PxAnimatableVec2Schema.optional(),
     stops: PxAnimatableGradientStopsSchema.optional(),
-    gradientUnits: px.string().optional(),
-    spreadMethod: px.string().optional(),
-    gradientTransform: px.string().optional(),
-    animate: PxGradientGeometryAnimationSchema.optional()
+    gradientUnits: px.enum([PxGradientUnits.userSpaceOnUse, PxGradientUnits.objectBoundingBox]).optional(),
+    spreadMethod: px.enum([PxGradientSpreadMethod.pad, PxGradientSpreadMethod.reflect, PxGradientSpreadMethod.repeat]).optional(),
+    gradientTransform: px.string().optional()
   }));
   var PxStrokeGradientEffectSchema = PxFillGradientEffectSchema;
   var PxTextPathEffectSchema = implementsInterface()(px.object({
     path: px.string(),
-    pathOverflow: px.string().optional(),
-    lengthAdjust: px.string().optional(),
-    method: px.string().optional(),
-    spacing: px.string().optional(),
+    pathOverflow: px.enum([PxPathOverflow.clip, PxPathOverflow.extend]).optional(),
+    lengthAdjust: px.enum([PxLengthAdjust.spacing, PxLengthAdjust.spacingAndGlyphs]).optional(),
+    method: px.enum([PxTextPathMethod.align, PxTextPathMethod.stretch]).optional(),
+    spacing: px.enum([PxTextPathSpacing.auto, PxTextPathSpacing.exact]).optional(),
     startOffset: PxAnimatableNumberSchema.optional(),
     textLength: PxAnimatableNumberSchema.optional()
   }));
@@ -2492,13 +2589,12 @@ var PixodeskAnimatorReact = (() => {
     useGlyphs: px.boolean().optional()
   }));
   var PxEffectsSchema = implementsInterface()(px.object({
-    transformation: PxTransformationEffectSchema.optional(),
+    transformBy: PxTransformByEffectSchema.optional(),
     repeater: PxRepeaterEffectSchema.optional(),
     maskedBy: PxMaskedByEffectSchema.optional(),
     clipPath: PxClipPathEffectSchema.optional(),
     trimPath: PxTrimPathEffectSchema.optional(),
     clone: PxCloneEffectSchema.optional(),
-    isCombinedShape: px.boolean().optional(),
     fillGradient: PxFillGradientEffectSchema.optional(),
     strokeGradient: PxStrokeGradientEffectSchema.optional(),
     textPath: PxTextPathEffectSchema.optional(),
@@ -2522,6 +2618,14 @@ var PixodeskAnimatorReact = (() => {
     return warnings;
   }
   var PxNodeBase = px.openObject({
+    // CONVENTION (SCHEMA-DESIGN R1 / issues N4): `type` is the ONE word for "what
+    // kind of thing is this", discriminated by its CARRIER — here the node TAG
+    // (`rect`, `text`), and inside a sub-object that object's kind (`clone.type`,
+    // `fillGradient.type`, editor `preset.type`). Each sits in its own object, so
+    // the carrier disambiguates completely; synonyms (`cloneKind`, `presetShape`)
+    // would add words that all mean "type" and still need the carrier to read.
+    // Guarding a `type` SLOT against a wrong VALUE is the job of strict enums
+    // (issues V3), never of distinct key names.
     type: px.string(),
     id: px.string().optional(),
     meta: px.any().optional(),
@@ -2531,7 +2635,7 @@ var PixodeskAnimatorReact = (() => {
     effects: PxEffectsSchema.optional(),
     // `PxElementAnimation` (not just `PxAnimationDefinition`) — accepts
     // string ref / array of refs / inline definition / mixed array; mirrors
-    // `animator.animate` map values and what `processNode` resolves at runtime.
+    // `animator.animateById` 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);
@@ -2539,8 +2643,10 @@ var PixodeskAnimatorReact = (() => {
     children: px.lazy(() => px.array(PxNodeSchema), []).optional()
   }), PxAttrValueSchema);
   var PxSvgNodeExtra = px.object({
-    width: px.number().optional(),
-    height: px.number().optional(),
+    // `"100%"` and other SVG length strings are legal here — a number-only slot rejected
+    // real documents (e.g. apple-store-look-14-main.json) at the root <svg>.
+    width: px.union([px.number(), px.string()]).optional(),
+    height: px.union([px.number(), px.string()]).optional(),
     viewBox: px.string().optional(),
     animator: PxAnimatorConfigSchema.optional()
   });
@@ -2555,28 +2661,6 @@ var PixodeskAnimatorReact = (() => {
     o: px.array(px.array(px.number())).optional(),
     c: px.boolean().optional()
   }));
-  function isPxElementFileFormat(fileJson) {
-    if (!(fileJson && typeof fileJson === "object" && !Array.isArray(fileJson))) {
-      return false;
-    }
-    return fileJson["type"] === "svg" || fileJson["tagName"] === "svg";
-  }
-  function getAnimatorConfig(doc) {
-    var _a, _b;
-    return (doc == null ? void 0 : doc.animator) || ((_a = doc == null ? void 0 : doc.meta) == null ? void 0 : _a.animator) || (doc == null ? void 0 : doc.animation) || ((_b = doc == null ? void 0 : doc.meta) == null ? void 0 : _b.animation);
-  }
-  function getDefs(doc) {
-    var _a;
-    if (!doc) return void 0;
-    return (_a = getAnimatorConfig(doc)) == null ? void 0 : _a.definitions;
-  }
-  function getBindings(doc) {
-    var _a;
-    if (!doc) return void 0;
-    const animate = (_a = getAnimatorConfig(doc)) == null ? void 0 : _a.animate;
-    if (!animate) return void 0;
-    return Object.entries(animate).map(([id, anim]) => ({ id, animate: anim }));
-  }
   function bezierToSvgPath(path, forceCurves = false) {
     var _a, _b, _c, _d;
     const v = path.v;
@@ -3027,7 +3111,7 @@ var PixodeskAnimatorReact = (() => {
       "flood-color",
       "lighting-color"
     ]);
-    const directIdRefAttrs = /* @__PURE__ */ new Set(["baseId", "targetId", "boundElementId"]);
+    const directIdRefAttrs = /* @__PURE__ */ new Set(["sourceId", "targetId", "boundElementId"]);
     function collectIds(node) {
       if (!node || typeof node !== "object") return;
       if (node.id && typeof node.id === "string") {
@@ -3065,9 +3149,10 @@ var PixodeskAnimatorReact = (() => {
           } else if (urlRefAttrs.has(key)) {
             node[key] = replaceUrlRefs(value, idMap);
           } else if (directIdRefAttrs.has(key)) {
-            const newId = idMap.get(value);
+            const hasHash = value.startsWith("#");
+            const newId = idMap.get(hasHash ? value.slice(1) : value);
             if (newId) {
-              node[key] = newId;
+              node[key] = hasHash ? "#" + newId : newId;
             }
           } else if (value.includes("url(#")) {
             node[key] = replaceUrlRefs(value, idMap);
@@ -3085,14 +3170,14 @@ var PixodeskAnimatorReact = (() => {
     }
     collectIds(cloned);
     updateRefs(cloned);
-    const docAnimate = (_a = cloned.animator) == null ? void 0 : _a.animate;
+    const docAnimate = (_a = cloned.animator) == null ? void 0 : _a.animateById;
     if (docAnimate && typeof docAnimate === "object") {
       const updatedAnimate = {};
       for (const [id, anim] of Object.entries(docAnimate)) {
         const newId = (_b = idMap.get(id)) != null ? _b : id;
         updatedAnimate[newId] = anim;
       }
-      cloned.animator = __spreadProps2(__spreadValues2({}, cloned.animator), { animate: updatedAnimate });
+      cloned.animator = __spreadProps2(__spreadValues2({}, cloned.animator), { animateById: updatedAnimate });
     }
     return cloned;
   }
@@ -3181,8 +3266,9 @@ var PixodeskAnimatorReact = (() => {
       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 (key === "transform" && value !== null && typeof value === "object" && !Array.isArray(value) && !value.keyframes && !value.kfs) {
+        const parts = value.value && typeof value.value === "object" ? value.value : value;
+        propsCopy["transform"] = composeTransformParts(parts, { withUnits: false });
       } else if (TRANSFORM_FN_NAMES.has(key)) {
         if (Array.isArray(value)) {
           if (key === "translate") value = value.map((v) => v + "px");
@@ -3190,6 +3276,8 @@ var PixodeskAnimatorReact = (() => {
         }
         if (key === "rotate") value = value + "deg";
         propsCopy["transform"] = key + "(" + value + ")";
+      } else if (Array.isArray(value)) {
+        propsCopy[key] = value.join(",");
       } else if (value !== void 0 && value !== null) {
         propsCopy[key] = String(value);
       }
@@ -3587,6 +3675,16 @@ var PixodeskAnimatorReact = (() => {
     if (newAnimate) cloned.animate = newAnimate;
     return cloned;
   }
+  var LOOP_JUMP_SHIFT_MS = 1;
+  function deepEqualValue(a, b) {
+    if (a === b) return true;
+    if (typeof a !== typeof b || a === null || b === null || typeof a !== "object") return false;
+    if (Array.isArray(a) !== Array.isArray(b)) return false;
+    const ka = Object.keys(a);
+    const kb = Object.keys(b);
+    if (ka.length !== kb.length) return false;
+    return ka.every((k) => deepEqualValue(a[k], b[k]));
+  }
   function parsePathCommands(d) {
     const tokens = d.split(/([MLCZmlcz]|[\s,]+)/).map((t) => t.trim()).filter((t) => t && t !== ",");
     const commands = [];
@@ -3789,7 +3887,7 @@ var PixodeskAnimatorReact = (() => {
     const totalIntervals = keyframes.length - 1;
     const segCount = clamp((_a = loop.segmentCount) != null ? _a : totalIntervals, 1, totalIntervals);
     let segKfs;
-    if (loop.before) {
+    if (loop.extend === PxLoopExtend.before) {
       segKfs = keyframes.slice(0, segCount + 1);
     } else {
       segKfs = keyframes.slice(totalIntervals - segCount);
@@ -3797,7 +3895,7 @@ var PixodeskAnimatorReact = (() => {
     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) {
+    if (loop.extend === PxLoopExtend.before) {
       fillStart = 0;
       fillEnd = firstT;
     } else {
@@ -3824,7 +3922,12 @@ var PixodeskAnimatorReact = (() => {
     const remainder = fillDuration - fullReps * segDuration;
     const partialFraction = remainder / segDuration;
     const looped = [];
+    const separateBoundary = loop.extend !== PxLoopExtend.before;
+    const originalTerminalKf = keyframes[keyframes.length - 1];
+    let terminalEasingOverride;
+    let hasTerminalEasingOverride = false;
     function appendRep(repStart, isReversed, partial) {
+      var _a2;
       let entries;
       if (isReversed) {
         entries = [];
@@ -3860,8 +3963,26 @@ var PixodeskAnimatorReact = (() => {
           looped.push({ t: repStart + cutRelT * segDuration, v: cutValue, e: void 0 });
           return;
         }
+        const prevKf = looped.length > 0 ? looped[looped.length - 1] : originalTerminalKf;
+        const isBoundary = separateBoundary && i === 0 && prevKf !== void 0 && Math.abs(((_a2 = prevKf.t) != null ? _a2 : 0) - (repStart + entry.relT * segDuration)) < 1e-9;
+        if (isBoundary) {
+          if (deepEqualValue(prevKf.v, entry.v)) {
+            if (looped.length > 0) {
+              prevKf.e = entry.e;
+              prevKf.tangentOut = entry.tangentOut;
+            } else {
+              terminalEasingOverride = entry.e;
+              hasTerminalEasingOverride = true;
+            }
+            continue;
+          }
+          if (looped.length > 0) {
+            delete prevKf.tangentIn;
+            delete prevKf.tangentOut;
+          }
+        }
         const pushed = {
-          t: repStart + entry.relT * segDuration,
+          t: repStart + entry.relT * segDuration + (isBoundary ? LOOP_JUMP_SHIFT_MS : 0),
           v: entry.v,
           e: i < entries.length - 1 ? entry.e : void 0
         };
@@ -3909,7 +4030,7 @@ var PixodeskAnimatorReact = (() => {
         looped.push(pushed);
       }
     }
-    if (loop.before) {
+    if (loop.extend === PxLoopExtend.before) {
       if (partialFraction > 1e-9) {
         const isReversed = !!loop.alternate && fullReps % 2 === 0;
         appendRepTail(fillStart, isReversed, partialFraction);
@@ -3932,9 +4053,14 @@ var PixodeskAnimatorReact = (() => {
         appendRep(repStart, isReversed, partialFraction);
       }
     }
-    if (loop.before) {
+    if (loop.extend === PxLoopExtend.before) {
       return [...looped, ...keyframes];
     } else {
+      if (hasTerminalEasingOverride && keyframes.length > 0) {
+        const head = keyframes.slice(0, -1);
+        const tail = __spreadProps2(__spreadValues2({}, keyframes[keyframes.length - 1]), { e: terminalEasingOverride });
+        return [...head, tail, ...looped];
+      }
       return [...keyframes, ...looped];
     }
   }
@@ -4048,20 +4174,23 @@ var PixodeskAnimatorReact = (() => {
   function generateElementId() {
     return "_px_el_" + ++_elementIdCounter;
   }
-  function normalizeAnimationDefinition(animDef, duration, defs, engine = PxAnimatorEngine.webapi) {
+  function normalizeAnimationDefinition(animDef, duration, defs, engine = PxAnimatorEngine.waapi) {
     const normalized = {};
     for (const [propName, propAnim] of Object.entries(animDef)) {
+      if (propName === "transform" && propAnim.alongPathMode === "offsetPath" && animDef["offsetDistance"] !== void 0) {
+        continue;
+      }
       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;
+        normalized[propName] = engine === PxAnimatorEngine.waapi && propName === "transform" ? materialiseMotionPathInPropAnim(out) : out;
       }
     }
     return normalized;
   }
-  function getNormalisedBindings(doc, engine = PxAnimatorEngine.webapi) {
+  function getNormalisedBindings(doc, engine = PxAnimatorEngine.waapi) {
     const animatorConfig = getAnimatorConfig(doc) || {};
     const defs = getDefs(doc);
     const duration = animatorConfig.duration || 1e3;
@@ -4466,7 +4595,7 @@ var PixodeskAnimatorReact = (() => {
     return rec;
   }
   function readAnimatable(raw) {
-    var _a, _b;
+    var _a, _b, _c;
     if (raw === void 0) return {
       kind: "absent"
       /* Absent */
@@ -4476,13 +4605,34 @@ var PixodeskAnimatorReact = (() => {
       const obj = raw;
       const kfs = (_a = obj.keyframes) != null ? _a : obj.kfs;
       if (kfs) {
-        return { kind: "animated", keyframes: kfs.map(normaliseKeyframe), autoOrient: obj.autoOrient, loop: obj.loop };
+        const out = { kind: "animated", keyframes: kfs.map(normaliseKeyframe), autoOrient: obj.autoOrient, loop: obj.loop };
+        const base = (_b = obj.value) != null ? _b : obj.v;
+        if (base !== void 0 && out.kind === "animated") out.base = base;
+        return out;
       }
-      const staticValue = (_b = obj.value) != null ? _b : obj.v;
+      const staticValue = (_c = obj.value) != null ? _c : obj.v;
       if (staticValue !== void 0) return { kind: "static", value: staticValue };
     }
     return { kind: "static", value: raw };
   }
+  function writeAnimatableChannel(node, attrName, read, opts) {
+    var _a, _b, _c, _d;
+    const toOut = (v) => (opts == null ? void 0 : opts.asString) && v !== void 0 && v !== null ? String(v) : v;
+    if (read.kind === "absent") return;
+    if (read.kind === "static") {
+      node[attrName] = toOut(read.value);
+      return;
+    }
+    const prevAnimate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
+    const animate = __spreadValues2({}, prevAnimate || {});
+    const block = { keyframes: read.keyframes };
+    if (read.loop !== void 0) block.loop = read.loop;
+    if (read.autoOrient !== void 0) block.autoOrient = read.autoOrient;
+    animate[attrName] = block;
+    node.animate = animate;
+    const baseline = (_d = (_b = read.base) != null ? _b : (_a = read.keyframes[0]) == null ? void 0 : _a.value) != null ? _d : (_c = read.keyframes[0]) == null ? void 0 : _c.v;
+    if (baseline !== void 0) node[attrName] = toOut(baseline);
+  }
   function normaliseKeyframe(kf) {
     if (!kf || typeof kf !== "object") return kf;
     const k = kf;
@@ -4502,7 +4652,7 @@ var PixodeskAnimatorReact = (() => {
     const o = readAnimatable(raw);
     if (o.kind === "absent") return void 0;
     if (o.kind === "static") return o.value;
-    ctx.warnings.push("transformation.origin: animated origin approximated by its first keyframe");
+    ctx.warnings.push("transformBy.origin: animated origin approximated by its first keyframe");
     return (_a = o.keyframes[0]) == null ? void 0 : _a.value;
   }
   function keyframeWith(kf, value) {
@@ -4513,7 +4663,7 @@ var PixodeskAnimatorReact = (() => {
     if (kf.tangentIn !== void 0) out.tangentIn = kf.tangentIn;
     return out;
   }
-  function applyTransformationEffect(node, fx, ctx) {
+  function applyTransformByEffect(node, fx, ctx) {
     if (!fx) return node;
     delete node.transform;
     let n = node;
@@ -4549,6 +4699,10 @@ var PixodeskAnimatorReact = (() => {
     } else {
       n = wrapTransformPart(n, "translate", fx.translate, ctx);
     }
+    if (n !== node && node.id) {
+      n.id = node.id;
+      delete node.id;
+    }
     return n;
   }
   function translateHasAutoOrient(translate) {
@@ -4558,8 +4712,6 @@ var PixodeskAnimatorReact = (() => {
     return Array.isArray(obj.keyframes) && obj.keyframes.some((kf) => kf.tangentOut || kf.tangentIn);
   }
   function normalizeScale(raw) {
-    if (raw === void 0) return void 0;
-    if (Array.isArray(raw)) return [raw[0] / 100, raw[1] / 100];
     return raw;
   }
   function wrapTransformPart(inner, part, raw, ctx) {
@@ -4600,34 +4752,54 @@ var PixodeskAnimatorReact = (() => {
     }
     return inner;
   }
+  function genId(ctx, prefix) {
+    return "_lw_" + prefix + "_" + ctx.nextId++;
+  }
+  function stripHash2(href) {
+    return typeof href === "string" ? href.replace(/^#/, "") : void 0;
+  }
+  function indexById(node, map) {
+    var _a;
+    if (typeof node.id === "string") map.set(node.id, node);
+    (_a = node.children) == null ? void 0 : _a.forEach((child) => indexById(child, map));
+  }
+  function spliceDefs(root, defs) {
+    if (!defs.length) return;
+    const existing = root.children || (root.children = []);
+    existing.unshift({ type: "defs", children: defs });
+  }
+  var clone = deepClonePxNode;
+  function regenerateIdsInClone(root, ctx) {
+    return regenerateIdsAndRewriteRefs(root, () => genId(ctx, "retimed"));
+  }
   function identifyContentRefTargets(node, ctx, allocator) {
     var _a, _b, _c;
     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));
+      const sourceId = stripHash2(node.effects.clone.sourceId);
+      if (typeof sourceId === "string" && sourceId && !ctx.contentRefInnerIds.has(sourceId)) {
+        ctx.contentRefInnerIds.set(sourceId, allocator(sourceId));
       }
     }
     (_c = node.children) == null ? void 0 : _c.forEach((c) => identifyContentRefTargets(c, ctx, allocator));
   }
-  function splitForContentRef(node, transformation, originalId, innerId, ctx) {
-    const outerBody = liftBodyTranslate(node, transformation);
+  function splitForContentRef(node, transformBy, originalId, innerId, ctx) {
+    const outerBody = liftBodyTranslate(node, transformBy);
     if (typeof node.id === "string") delete node.id;
-    const { outer: outerTr, inner: innerTr } = splitTransformationEffect(transformation);
+    const { outer: outerTr, inner: innerTr } = splitTransformByEffect(transformBy);
     let innerNode = node;
-    innerNode = applyTransformationEffect(innerNode, innerTr, ctx);
+    innerNode = applyTransformByEffect(innerNode, innerTr, ctx);
     const innerWrapper = { type: "g", id: innerId, children: [innerNode] };
     let outerWrapper = { type: "g", id: originalId, children: [innerWrapper] };
     if (outerBody.transform !== void 0) outerWrapper.transform = outerBody.transform;
     if (outerBody.animate !== void 0) outerWrapper.animate = outerBody.animate;
     if (outerTr) {
       delete outerWrapper.id;
-      outerWrapper = applyTransformationEffect(outerWrapper, outerTr, ctx);
+      outerWrapper = applyTransformByEffect(outerWrapper, outerTr, ctx);
       outerWrapper.id = originalId;
     }
     return outerWrapper;
   }
-  function liftBodyTranslate(node, transformation) {
+  function liftBodyTranslate(node, transformBy) {
     var _a, _b, _c;
     const out = {};
     let didLiftAnimate = false;
@@ -4681,7 +4853,7 @@ var PixodeskAnimatorReact = (() => {
         didLiftAnimate = true;
       }
     }
-    const transformationHasTranslate = (transformation == null ? void 0 : transformation.translate) !== void 0;
+    const transformationHasTranslate = (transformBy == null ? void 0 : transformBy.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") {
@@ -4700,6 +4872,24 @@ var PixodeskAnimatorReact = (() => {
         if (split.rest) node.transform = split.rest;
         else delete node.transform;
       }
+    } else if (node.transform && typeof node.transform === "object" && !Array.isArray(node.transform) && !node.transform.keyframes && !node.transform.kfs) {
+      const wrapped = node.transform.value;
+      const isWrapped = !!(wrapped && typeof wrapped === "object");
+      const value = isWrapped ? wrapped : node.transform;
+      const rewrap = (rec) => isWrapped ? { value: rec } : rec;
+      if (Array.isArray(value.translate)) {
+        const rest = __spreadValues2({}, value);
+        delete rest.translate;
+        const hasRest = Object.keys(rest).length > 0;
+        if (stripBodyTranslateOnly) {
+          if (hasRest) node.transform = rewrap(rest);
+          else delete node.transform;
+        } else {
+          out.transform = rewrap({ translate: value.translate });
+          if (hasRest) node.transform = rewrap(rest);
+          else delete node.transform;
+        }
+      }
     }
     return out;
   }
@@ -4769,7 +4959,7 @@ var PixodeskAnimatorReact = (() => {
     const nums = m[1].split(/[\s,]+/).filter(Boolean).map(Number);
     return [nums[0] || 0, nums[1] || 0];
   }
-  function splitTransformationEffect(fx) {
+  function splitTransformByEffect(fx) {
     if (!fx) return {};
     const originOnOuter = needsOriginOnOuter(fx.translate);
     const innerHasPivotedPart = fx.rotate !== void 0 || fx.scale !== void 0;
@@ -4795,26 +4985,6 @@ var PixodeskAnimatorReact = (() => {
     }
     return false;
   }
-  function genId(ctx, prefix) {
-    return "_lw_" + prefix + "_" + ctx.nextId++;
-  }
-  function stripHash2(href) {
-    return typeof href === "string" ? href.replace(/^#/, "") : void 0;
-  }
-  function indexById(node, map) {
-    var _a;
-    if (typeof node.id === "string") map.set(node.id, node);
-    (_a = node.children) == null ? void 0 : _a.forEach((child) => indexById(child, map));
-  }
-  function spliceDefs(root, defs) {
-    if (!defs.length) return;
-    const existing = root.children || (root.children = []);
-    existing.unshift({ type: "defs", children: defs });
-  }
-  var clone = deepClonePxNode;
-  function regenerateIdsInClone(root, ctx) {
-    return regenerateIdsAndRewriteRefs(root, () => genId(ctx, "retimed"));
-  }
   function applyFillGradientEffect(node, fx, ctx) {
     return applyGradient(node, fx, ctx, "fill");
   }
@@ -4835,62 +5005,63 @@ var PixodeskAnimatorReact = (() => {
       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]);
-      }
+      applyGeomVec(out, "x1", "y1", fx.p1);
+      applyGeomVec(out, "x2", "y2", fx.p2);
     } 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]);
-      }
+      applyGeomVec(out, "cx", "cy", fx.c);
+      applyGeomNumber(out, "r", fx.r);
+      applyGeomVec(out, "fx", "fy", fx.fp);
     }
     if (fx.gradientUnits) out.gradientUnits = fx.gradientUnits;
     if (fx.spreadMethod) out.spreadMethod = fx.spreadMethod;
     if (fx.gradientTransform) out.gradientTransform = fx.gradientTransform;
-    const animate = fx.animate;
-    if (animate) {
-      const mapped = {};
-      for (const wireKey of Object.keys(animate)) {
-        const attr = GRADIENT_ANIM_CHANNEL_TO_ATTR[wireKey];
-        if (attr) mapped[attr] = animate[wireKey];
-      }
-      if (Object.keys(mapped).length) out.animate = mapped;
-    }
     out.children = buildStopChildren(fx.stops, ctx);
     return out;
   }
-  var GRADIENT_ANIM_CHANNEL_TO_ATTR = {
-    gradientX1: "x1",
-    gradientY1: "y1",
-    gradientX2: "x2",
-    gradientY2: "y2",
-    gradientCx: "cx",
-    gradientCy: "cy",
-    gradientFx: "fx",
-    gradientFy: "fy",
-    gradientR: "r"
-  };
+  function applyGeomVec(out, xAttr, yAttr, raw) {
+    var _a, _b, _c;
+    const read = readAnimatable(raw);
+    if (read.kind === "absent") return;
+    if (read.kind === "static") {
+      out[xAttr] = String(read.value[0]);
+      out[yAttr] = String(read.value[1]);
+      return;
+    }
+    const axisChannel = (idx) => {
+      const block = {
+        keyframes: read.keyframes.map((kf) => {
+          const axisKf = { time: kf.time, value: Array.isArray(kf.value) ? kf.value[idx] : void 0 };
+          if (kf.easing !== void 0) axisKf.easing = kf.easing;
+          return axisKf;
+        })
+      };
+      if (read.loop !== void 0) block.loop = read.loop;
+      return block;
+    };
+    const animate = (_a = out.animate) != null ? _a : {};
+    animate[xAttr] = axisChannel(0);
+    animate[yAttr] = axisChannel(1);
+    out.animate = animate;
+    const baseline = (_c = read.base) != null ? _c : (_b = read.keyframes[0]) == null ? void 0 : _b.value;
+    if (Array.isArray(baseline)) {
+      out[xAttr] = String(baseline[0]);
+      out[yAttr] = String(baseline[1]);
+    }
+  }
+  function applyGeomNumber(out, attrName, raw) {
+    const read = readAnimatable(raw);
+    if (read.kind === "absent") return;
+    writeAnimatableChannel(out, attrName, read, { asString: true });
+  }
   function buildStopChildren(stops, ctx) {
     var _a, _b, _c, _d;
     if (!stops) return [];
-    if (Array.isArray(stops)) return stops.map(staticStopNode);
-    if (typeof stops === "object" && Array.isArray(stops.value)) {
-      return stops.value.map(staticStopNode);
-    }
-    const animBlock = stops;
-    const kfs = animBlock.keyframes;
-    if (!Array.isArray(kfs) || !kfs.length) return [];
-    const loopFromSource = animBlock.loop;
+    const read = readAnimatable(stops);
+    if (read.kind === "absent") return [];
+    if (read.kind === "static") return Array.isArray(read.value) ? read.value.map(staticStopNode) : [];
+    const kfs = read.keyframes;
+    if (!kfs.length) return [];
+    const loopFromSource = read.loop;
     let stopCount = 0;
     for (const kf of kfs) {
       const v = (_a = kf.value) != null ? _a : kf.v;
@@ -4965,36 +5136,60 @@ var PixodeskAnimatorReact = (() => {
     return pct + "%";
   }
   function applyClipPathEffect(node, fx, ctx) {
+    var _a, _b;
     if (!fx || !fx.d && !fx.animate) return node;
     const clipId = genId(ctx, "clip");
-    const pathChild = { type: "path", d: fx.d };
-    if (fx.animate) pathChild.animate = { d: fx.animate };
+    const pathChild = { type: "path" };
+    const read = readAnimatable(fx.d);
+    if (read.kind !== "absent") {
+      if (read.kind === "static") {
+        pathChild.d = pathString(read.value);
+      } else {
+        writeAnimatableChannel(pathChild, "d", read);
+        if (pathChild.d !== void 0) pathChild.d = pathString(pathChild.d);
+      }
+    }
+    if (fx.animate && !((_a = pathChild.animate) == null ? void 0 : _a.d)) {
+      const animate = (_b = pathChild.animate) != null ? _b : {};
+      animate.d = fx.animate;
+      pathChild.animate = animate;
+    }
     ctx.defs.push({ type: "clipPath", id: clipId, children: [pathChild] });
     node.clipPath = "url(#" + clipId + ")";
     return node;
   }
-  function applyMaskedByEffect(node, fx, transformation, ctx) {
+  function pathString(v) {
+    if (typeof v === "string") return v;
+    if (v && typeof v === "object" && typeof v.path === "string") return v.path;
+    return void 0;
+  }
+  function applyMaskedByEffect(node, fx, transformBy, ctx) {
     if (!fx) return node;
-    if (!fx.href) {
-      ctx.errors.push("maskedBy.href missing \u2014 cannot build mask");
+    const sourceId = stripHash2(fx.sourceId);
+    if (!sourceId) {
+      ctx.errors.push("maskedBy.sourceId missing \u2014 cannot build mask");
       return node;
     }
     const maskId = genId(ctx, "mask");
-    let content = { type: "use", href: "#" + fx.href };
-    if (transformation) {
-      content = wrapInverseTransform(content, transformation, ctx);
+    let content = { type: "use", href: "#" + sourceId };
+    if (transformBy) {
+      content = wrapInverseTransform(content, transformBy, ctx);
     } else if (hasAnimateTransform(node)) {
       content = wrapInverseAnimatedBodyTransform(content, node, ctx);
     } else {
       const bodyStatic = readTransformationFromBody(node);
       if (bodyStatic) content = wrapInverseTransform(content, bodyStatic, ctx);
     }
-    const includeTargetOwn = transformation === void 0 && !nodeHasBodyTransform(node);
-    content = wrapAncestorChainCompensation(content, node, fx.href, ctx, includeTargetOwn);
+    const includeTargetOwn = transformBy === void 0 && !nodeHasBodyTransform(node);
+    content = wrapAncestorChainCompensation(content, node, sourceId, 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;
+    if (fx.x !== void 0) mask.x = String(fx.x);
+    if (fx.y !== void 0) mask.y = String(fx.y);
+    if (fx.width !== void 0) mask.width = String(fx.width);
+    if (fx.height !== void 0) mask.height = String(fx.height);
     ctx.defs.push(mask);
     node.mask = "url(#" + maskId + ")";
     return node;
@@ -5101,6 +5296,19 @@ var PixodeskAnimatorReact = (() => {
       if (parts.origin) out.origin = parts.origin;
       return Object.keys(out).length ? out : void 0;
     }
+    if (node.transform && typeof node.transform === "object" && !node.transform.keyframes && !node.transform.kfs) {
+      const wrapped = node.transform.value;
+      const value = wrapped && typeof wrapped === "object" ? wrapped : node.transform;
+      if (value && typeof value === "object") {
+        const out = {};
+        if (Array.isArray(value.translate)) out.translate = value.translate;
+        if (typeof value.rotate === "number") out.rotate = value.rotate;
+        if (typeof value.skew === "number") out.skew = value.skew;
+        if (Array.isArray(value.scale)) out.scale = { value: value.scale };
+        if (Array.isArray(value.origin)) out.origin = value.origin;
+        return Object.keys(out).length ? out : void 0;
+      }
+    }
     return void 0;
   }
   function parseTransformStringToParts(s) {
@@ -5234,10 +5442,10 @@ var PixodeskAnimatorReact = (() => {
     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") {
+      const maskSourceId = stripHash2((_b = (_a = n.effects) == null ? void 0 : _a.maskedBy) == null ? void 0 : _b.sourceId);
+      if (typeof maskSourceId === "string") {
         interestingNodes.add(n);
-        const sourceNode = ctx.idMap.get(href);
+        const sourceNode = ctx.idMap.get(maskSourceId);
         if (sourceNode) interestingNodes.add(sourceNode);
       }
       if (Array.isArray(n.children)) for (const ch of n.children) collectInterestingNodes(ch);
@@ -5263,8 +5471,9 @@ var PixodeskAnimatorReact = (() => {
     if (typeof tr === "string") {
       const parts = parseTranslateOnlyFromString(tr, ctx);
       if (parts) out.translate = parts;
-    } else if (tr && typeof tr === "object") {
-      const value = tr.value;
+    } else if (tr && typeof tr === "object" && !tr.keyframes && !tr.kfs) {
+      const wrapped = tr.value;
+      const value = wrapped && typeof wrapped === "object" ? wrapped : tr;
       if (value && typeof value === "object" && Array.isArray(value.translate)) {
         out.translate = [value.translate[0] || 0, value.translate[1] || 0];
       }
@@ -5312,17 +5521,17 @@ var PixodeskAnimatorReact = (() => {
   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");
+    const sourceId = stripHash2(clone2.sourceId);
+    if (!sourceId) {
+      if (clone2.type === CONTENT_SUBREF) ctx.errors.push("clone: content ref missing sourceId");
       return;
     }
-    const targetId = clone2.type === CONTENT_SUBREF ? ctx.contentRefInnerIds.get(baseId) || baseId : baseId;
+    const targetId = clone2.type === CONTENT_SUBREF ? ctx.contentRefInnerIds.get(sourceId) || sourceId : sourceId;
     node.href = "#" + targetId;
   }
-  function applyRefAndTransformationEffect(node, clone2, transformation, ctx) {
+  function applyRefAndTransformationEffect(node, clone2, transformBy, ctx) {
     applyRefHref(node, clone2, ctx);
-    return applyTransformationEffect(node, transformation, ctx);
+    return applyTransformByEffect(node, transformBy, ctx);
   }
   function applyRepeaterEffect(node, fx, ctx) {
     var _a, _b;
@@ -5345,7 +5554,7 @@ var PixodeskAnimatorReact = (() => {
     for (let i = 1; i < copies; i++) {
       const baseClone = clone(base);
       const synthFx = synthesisePerCopyFx(fx, i);
-      const wrapped = synthFx ? applyTransformationEffect(baseClone, synthFx, ctx) : baseClone;
+      const wrapped = synthFx ? applyTransformByEffect(baseClone, synthFx, ctx) : baseClone;
       children.push(wrapped);
     }
     const wrapper = { type: "g", children };
@@ -5357,10 +5566,13 @@ var PixodeskAnimatorReact = (() => {
   function synthesisePerCopyFx(fx, i) {
     const out = {};
     if (fx.translate !== void 0) {
-      out.translate = mapAnimatableVec2(fx.translate, (v) => [v[0] * i, v[1] * i]);
+      out.translate = mapAnimatable(fx.translate, (v) => [v[0] * i, v[1] * i]);
     }
     if (fx.rotate !== void 0) {
-      out.rotate = mapAnimatableNumber(fx.rotate, (v) => v * i);
+      out.rotate = mapAnimatable(fx.rotate, (v) => v * i);
+    }
+    if (fx.skew !== void 0) {
+      out.skew = mapAnimatable(fx.skew, (v) => v * i);
     }
     if (fx.scale !== void 0) {
       out.scale = synthesiseScale(fx.scale, i);
@@ -5370,63 +5582,50 @@ var PixodeskAnimatorReact = (() => {
     }
     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 __spreadProps2(__spreadValues2({}, obj), {
-          keyframes: obj.keyframes.map((kf) => kf && kf.value !== void 0 ? __spreadProps2(__spreadValues2({}, kf), { value: fn(kf.value) }) : kf)
-        });
-      }
-      if (obj.value !== void 0) {
-        return __spreadProps2(__spreadValues2({}, obj), { value: fn(obj.value) });
-      }
+  function mapAnimatable(raw, fn, wrapStatic = false) {
+    const read = readAnimatable(raw);
+    if (read.kind === "absent") return raw;
+    if (read.kind === "static") {
+      const mapped = fn(read.value);
+      const wasRawStatic = typeof raw === "number" || Array.isArray(raw);
+      return wasRawStatic && !wrapStatic ? mapped : { value: mapped };
     }
-    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 __spreadProps2(__spreadValues2({}, obj), {
-          keyframes: obj.keyframes.map((kf) => kf && kf.value !== void 0 ? __spreadProps2(__spreadValues2({}, kf), { value: fn(kf.value) }) : kf)
-        });
-      }
-      if (obj.value !== void 0) {
-        return __spreadProps2(__spreadValues2({}, obj), { value: fn(obj.value) });
-      }
-    }
-    return raw;
+    const out = {
+      keyframes: read.keyframes.map((kf) => kf && kf.value !== void 0 ? __spreadProps2(__spreadValues2({}, kf), { value: fn(kf.value) }) : kf)
+    };
+    if (read.loop !== void 0) out.loop = read.loop;
+    if (read.autoOrient !== void 0) out.autoOrient = read.autoOrient;
+    if (read.base !== void 0) out.value = fn(read.base);
+    return out;
   }
   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 __spreadProps2(__spreadValues2({}, obj), {
-          keyframes: obj.keyframes.map((kf) => kf && kf.value !== void 0 ? __spreadProps2(__spreadValues2({}, kf), { value: scalePowerFromUnits(kf.value) }) : kf)
-        });
-      }
-      if (obj.value !== void 0) {
-        return __spreadProps2(__spreadValues2({}, obj), { value: scalePowerFromPercent(obj.value) });
-      }
-    }
-    return raw;
+    const scalePower = (v) => [Math.pow(v[0], i), Math.pow(v[1], i)];
+    return mapAnimatable(raw, scalePower, true);
   }
   var RETIME_MATERIALISATION_MODE_INLINE_G = false;
   function asRetime(r) {
     var _a, _b;
-    if (r.timeCrop) {
-      console.warn("retime: `timeCrop` is not supported yet and will be ignored");
-    }
     return { start: (_a = r.start) != null ? _a : 0, stretch: (_b = r.stretch) != null ? _b : 1 };
   }
+  var CROP_EDGE_MS = 1;
+  function applyTimeCrop(useNode, crop, ctx) {
+    const [start, end] = crop;
+    if (!Number.isFinite(start) || !Number.isFinite(end)) {
+      ctx.warnings.push("retime: timeCrop is not a pair of finite numbers \u2014 ignored");
+      return;
+    }
+    const keyframes = end <= start ? [{ time: 0, value: 0 }] : [
+      ...start > 0 ? [{ time: Math.max(0, start - CROP_EDGE_MS), value: 0 }] : [],
+      { time: Math.max(0, start), value: 1 },
+      { time: end, value: 1 },
+      { time: end + CROP_EDGE_MS, value: 0 }
+    ];
+    const inner = __spreadValues2({}, useNode);
+    for (const k of Object.keys(useNode)) delete useNode[k];
+    useNode.type = "g";
+    useNode.children = [inner];
+    useNode.animate = { opacity: { keyframes } };
+  }
   function concatRetime(child, parent) {
     return {
       start: parent.start + parent.stretch * child.start,
@@ -5486,8 +5685,10 @@ var PixodeskAnimatorReact = (() => {
     for (const useNode of sites) {
       const retime = readCloneRetime(useNode);
       if (!retime) continue;
+      const crop = retime.timeCrop;
       clearCloneRetime(useNode);
       materialiseRetime(useNode, asRetime(retime), ctx);
+      if (crop) applyTimeCrop(useNode, crop, ctx);
     }
   }
   function materialiseRetime(useNode, retime, ctx) {
@@ -5730,14 +5931,11 @@ var PixodeskAnimatorReact = (() => {
   }
   var EXTEND_MARGIN_FRAC = 0.15;
   function numRange(v) {
-    if (typeof v === "number") return { min: v, max: v };
-    if (v && typeof v === "object") {
-      const o = v;
-      if (typeof o.value === "number") return { min: o.value, max: o.value };
-      if (Array.isArray(o.keyframes) && o.keyframes.length) {
-        const vals = o.keyframes.map((k) => Number(k.value) || 0);
-        return { min: Math.min(...vals), max: Math.max(...vals) };
-      }
+    const read = readAnimatable(v);
+    if (read.kind === "static" && typeof read.value === "number") return { min: read.value, max: read.value };
+    if (read.kind === "animated" && read.keyframes.length) {
+      const vals = read.keyframes.map((k) => Number(k.value) || 0);
+      return { min: Math.min(...vals), max: Math.max(...vals) };
     }
     return { min: 0, max: 0 };
   }
@@ -5757,11 +5955,16 @@ var PixodeskAnimatorReact = (() => {
   var r3 = (n) => Math.round(n * 1e3) / 1e3;
   function shiftAnimatable(v, by) {
     if (!by || v === void 0 || v === null) return v;
-    if (typeof v === "number") return v + by;
-    const o = v;
-    if (typeof o.value === "number") return __spreadProps2(__spreadValues2({}, o), { value: o.value + by });
-    if (Array.isArray(o.keyframes)) return __spreadProps2(__spreadValues2({}, o), { keyframes: o.keyframes.map((k) => __spreadProps2(__spreadValues2({}, k), { value: (Number(k.value) || 0) + by })) });
-    return v;
+    const read = readAnimatable(v);
+    if (read.kind === "absent") return v;
+    if (read.kind === "static") return typeof v === "number" ? read.value + by : { value: read.value + by };
+    const out = {
+      keyframes: read.keyframes.map((k) => __spreadProps2(__spreadValues2({}, k), { value: (Number(k.value) || 0) + by }))
+    };
+    if (read.loop !== void 0) out.loop = read.loop;
+    if (read.autoOrient !== void 0) out.autoOrient = read.autoOrient;
+    if (read.base !== void 0) out.value = read.base + by;
+    return out;
   }
   function extendedPathForBrowser(pathD, opts) {
     var _a;
@@ -5817,26 +6020,7 @@ var PixodeskAnimatorReact = (() => {
   }
   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 = __spreadValues2({}, 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;
-      }
-    }
+    writeAnimatableChannel(node, attrName, readAnimatable(raw), { asString: true });
   }
   var jsonElementFactory = (type, props, children) => {
     const node = { type };
@@ -6024,13 +6208,13 @@ var PixodeskAnimatorReact = (() => {
       if (y !== void 0) pen.y = y;
       pen.x += (_a2 = parseLen(el.dx)) != null ? _a2 : 0;
       pen.y += (_b2 = parseLen(el.dy)) != null ? _b2 : 0;
-      const content = (_c2 = str(el[TEXT_ATTR])) != null ? _c2 : str(el[TEXT_CONTENT_ATTR]);
+      const content = (_c2 = str(el[TEXT_CONTENT_ATTR])) != null ? _c2 : str(el[TEXT_ATTR]);
       if (content && !((_d2 = el.children) == null ? void 0 : _d2.length)) renderChars(content, s);
       if (el.children) for (const ch of el.children) walk(ch, s);
     };
     const rootStyle = rootStyleOf(node);
     if (node.children) for (const ch of node.children) walk(ch, rootStyle);
-    const rootContent = (_c = str(node[TEXT_ATTR])) != null ? _c : str(node[TEXT_CONTENT_ATTR]);
+    const rootContent = (_c = str(node[TEXT_CONTENT_ATTR])) != null ? _c : str(node[TEXT_ATTR]);
     if (rootContent && !((_d = node.children) == null ? void 0 : _d.length)) renderChars(rootContent, rootStyle);
     const anchor = str(node.textAnchor);
     if (anchor === "middle" || anchor === "end") {
@@ -6048,7 +6232,7 @@ var PixodeskAnimatorReact = (() => {
     const walk = (el, parentStyle) => {
       var _a, _b, _c;
       const s = resolveStyle2(el, parentStyle);
-      const content = (_a = str(el[TEXT_ATTR])) != null ? _a : str(el[TEXT_CONTENT_ATTR]);
+      const content = (_a = str(el[TEXT_CONTENT_ATTR])) != null ? _a : str(el[TEXT_ATTR]);
       if (content && !((_b = el.children) == null ? void 0 : _b.length)) {
         const gf = glyphFontFor(s, glyphs, soleFont, warnings);
         if (gf) {
@@ -6272,9 +6456,9 @@ var PixodeskAnimatorReact = (() => {
     }
     return materialiseGlyphTextAlongPath(node, pathD, startOffset, { glyphs: ctx.glyphs, warnings: ctx.warnings }, textLength, pathOverflow);
   }
-  function applyTrimPathEffect(node, trimPath, isCombinedShape, ctx) {
+  function applyTrimPathEffect(node, trimPath, ctx) {
     if (!trimPath) return node;
-    const trimAllAsOne = !!trimPath.trimAllAsOne;
+    const combined = trimPath.subPaths === PxTrimSubPaths.combined;
     const leafEntries = [];
     const measure = (n) => {
       if (Array.isArray(n.children) && n.children.length > 0) {
@@ -6295,16 +6479,16 @@ var PixodeskAnimatorReact = (() => {
     measure(node);
     if (!leafEntries.length) return node;
     let acc = 0;
-    const iterOrder = trimAllAsOne ? [...leafEntries].reverse() : leafEntries;
+    const iterOrder = combined ? [...leafEntries].reverse() : leafEntries;
     for (const entry of iterOrder) {
       for (const sp of entry.subpaths) {
-        if (!trimAllAsOne) acc = 0;
+        if (!combined) acc = 0;
         sp.startOffsetPx = acc;
         acc += sp.lengthPx;
       }
     }
     const chainLengthPx = acc;
-    if (trimAllAsOne && chainLengthPx < 1e-3) return node;
+    if (combined && 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);
@@ -6316,18 +6500,18 @@ var PixodeskAnimatorReact = (() => {
     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;
+      const pathLengthPx = combined ? chainLengthPx : sp.lengthPx;
       if (pathLengthPx < 1e-3) return node;
-      const startOffsetPct = trimAllAsOne ? sp.startOffsetPx / pathLengthPx : 0;
+      const startOffsetPct = combined ? sp.startOffsetPx / pathLengthPx : 0;
       return collapseLeafWithTrim(entry.leaf, pathLengthPx, startOffsetPct, minMaxOffset, offsetRead, rangeRead);
     }
     const replacements = /* @__PURE__ */ new Map();
     for (const entry of leafEntries) {
       const newChildren = [];
       for (const sp of entry.subpaths) {
-        const pathLengthPx = trimAllAsOne ? chainLengthPx : sp.lengthPx;
+        const pathLengthPx = combined ? chainLengthPx : sp.lengthPx;
         if (pathLengthPx < 1e-3) continue;
-        const startOffsetPct = trimAllAsOne ? sp.startOffsetPx / pathLengthPx : 0;
+        const startOffsetPct = combined ? 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));
@@ -6434,22 +6618,8 @@ var PixodeskAnimatorReact = (() => {
     };
   }
   function applyAttr(node, attrName, attr) {
-    var _a, _b;
     if (!attr) return;
-    if (attr.kind === "static") {
-      node[attrName] = attr.value;
-      return;
-    }
-    const prevAnimate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
-    const animate = __spreadValues2({}, 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;
-    }
+    writeAnimatableChannel(node, attrName, attr);
   }
   var OPACITY_STEP_MS = 10;
   function computeOpacityFromRange(rangeRead) {
@@ -6631,9 +6801,9 @@ var PixodeskAnimatorReact = (() => {
       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,
+      // Resolved engine: `frames` ONLY when explicitly set; auto/waapi/unset →
+      // waapi (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.waapi,
       glyphs: (_b = getDefs(root)) == null ? void 0 : _b.glyphs
     };
     const working = clone(root);
@@ -6651,8 +6821,7 @@ var PixodeskAnimatorReact = (() => {
     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, clipPath, trimPath, clone: cloneFx, fillGradient, strokeGradient, textPath, text } = fx != null ? fx : {};
-    const isCombinedShape = fx == null ? void 0 : fx.isCombinedShape;
+    const { transformBy, repeater, maskedBy, clipPath, trimPath, clone: cloneFx, fillGradient, strokeGradient, textPath, text } = fx != null ? fx : {};
     if (fx) delete node.effects;
     let n = node;
     let consumedByGlyphs = false;
@@ -6672,15 +6841,15 @@ var PixodeskAnimatorReact = (() => {
     if (!consumedByGlyphs) n = applyTextPathEffect(n, textPath, ctx);
     n = applyFillGradientEffect(n, fillGradient, ctx);
     n = applyStrokeGradientEffect(n, strokeGradient, ctx);
-    n = applyTrimPathEffect(n, trimPath, isCombinedShape, ctx);
+    n = applyTrimPathEffect(n, trimPath, ctx);
     n = applyRepeaterEffect(n, repeater, ctx);
-    n = applyMaskedByEffect(n, maskedBy, transformation, ctx);
+    n = applyMaskedByEffect(n, maskedBy, transformBy, ctx);
     n = applyClipPathEffect(n, clipPath, ctx);
     if (innerIdForContentRef) {
       applyRefHref(n, cloneFx, ctx);
-      n = splitForContentRef(n, transformation, originalId, innerIdForContentRef, ctx);
+      n = splitForContentRef(n, transformBy, originalId, innerIdForContentRef, ctx);
     } else {
-      n = applyRefAndTransformationEffect(n, cloneFx, transformation, ctx);
+      n = applyRefAndTransformationEffect(n, cloneFx, transformBy, ctx);
     }
     if (cloneFx == null ? void 0 : cloneFx.retime) node.effects = { clone: { retime: cloneFx.retime } };
     if (originalId) ctx.idMap.set(originalId, n);
@@ -6690,12 +6859,141 @@ var PixodeskAnimatorReact = (() => {
     applyAllRetimeEffects(node, ctx);
     return node;
   }
+  var kfTime = (kf) => {
+    var _a, _b;
+    return (_b = (_a = kf.t) != null ? _a : kf.time) != null ? _b : 0;
+  };
+  var kfValue = (kf) => {
+    var _a;
+    return (_a = kf.v) != null ? _a : kf.value;
+  };
+  var kfEasing = (kf) => {
+    var _a;
+    return (_a = kf.e) != null ? _a : kf.easing;
+  };
+  var kfTangentIn = (kf) => {
+    var _a;
+    return (_a = kf.tangentIn) != null ? _a : kf.ti;
+  };
+  var kfTangentOut = (kf) => {
+    var _a;
+    return (_a = kf.tangentOut) != null ? _a : kf.to;
+  };
+  function cubicAt(p0, c1, c2, p1, t) {
+    const u = 1 - t;
+    const a = u * u * u, b = 3 * u * u * t, c = 3 * u * t * t, d = t * t * t;
+    return [
+      a * p0[0] + b * c1[0] + c * c2[0] + d * p1[0],
+      a * p0[1] + b * c1[1] + c * c2[1] + d * p1[1]
+    ];
+  }
+  function cubicLength(p0, c1, c2, p1, steps = 64) {
+    let len = 0;
+    let prev = p0;
+    for (let i = 1; i <= steps; i++) {
+      const pt = cubicAt(p0, c1, c2, p1, i / steps);
+      len += Math.hypot(pt[0] - prev[0], pt[1] - prev[1]);
+      prev = pt;
+    }
+    return len;
+  }
+  var fmt2 = (n) => {
+    const r = Math.round(n * 1e4) / 1e4;
+    return Object.is(r, -0) ? "0" : String(r);
+  };
+  function buildOffsetPath(propAnim) {
+    var _a, _b, _c, _d;
+    if (propAnim.alongPathMode !== "offsetPath") return void 0;
+    const kfs = (_a = propAnim.keyframes) != null ? _a : propAnim.kfs;
+    if (!kfs || kfs.length < 2) return void 0;
+    const first = kfValue(kfs[0]);
+    const anchor = (first == null ? void 0 : first.origin) && first.origin.length >= 2 ? [first.origin[0], first.origin[1]] : [0, 0];
+    const points = [];
+    for (const kf of kfs) {
+      const v = kfValue(kf);
+      const tr = v == null ? void 0 : v.translate;
+      if (!tr || tr.length < 2) return void 0;
+      const parts = Object.keys(v);
+      if (parts.some((p) => p !== "translate" && p !== "origin")) return void 0;
+      const o = (_b = v == null ? void 0 : v.origin) != null ? _b : [0, 0];
+      if (o[0] !== anchor[0] || o[1] !== anchor[1]) return void 0;
+      points.push([tr[0] + anchor[0], tr[1] + anchor[1]]);
+    }
+    if (!kfs.some((kf) => kfTangentIn(kf) || kfTangentOut(kf))) return void 0;
+    let d = "M" + fmt2(points[0][0]) + "," + fmt2(points[0][1]);
+    const segLens = [];
+    for (let i = 0; i < points.length - 1; i++) {
+      const p0 = points[i], p1 = points[i + 1];
+      const to = (_c = kfTangentOut(kfs[i])) != null ? _c : [0, 0];
+      const ti = (_d = kfTangentIn(kfs[i + 1])) != null ? _d : [0, 0];
+      const c1 = [p0[0] + to[0], p0[1] + to[1]];
+      const c2 = [p1[0] + ti[0], p1[1] + ti[1]];
+      d += "C" + fmt2(c1[0]) + "," + fmt2(c1[1]) + "," + fmt2(c2[0]) + "," + fmt2(c2[1]) + "," + fmt2(p1[0]) + "," + fmt2(p1[1]);
+      segLens.push(cubicLength(p0, c1, c2, p1));
+    }
+    const total = segLens.reduce((a, b) => a + b, 0);
+    if (!(total > 0)) return void 0;
+    const distanceKfs = [];
+    let cum = 0;
+    for (let i = 0; i < kfs.length; i++) {
+      if (i > 0) cum += segLens[i - 1];
+      const out = { t: kfTime(kfs[i]), v: cum / total };
+      const e = kfEasing(kfs[i]);
+      if (e !== void 0) out.e = e;
+      distanceKfs.push(out);
+    }
+    return { pathStr: d, distanceKfs, autoOrient: !!propAnim.autoOrient, anchor };
+  }
+  function materialiseOffsetPathsInTree(root) {
+    const walk = (node) => {
+      var _a;
+      let out = node;
+      const anim = node.animate;
+      const transform = anim == null ? void 0 : anim["transform"];
+      if (transform) {
+        const built = buildOffsetPath(transform);
+        if (built) {
+          const newAnimate = __spreadValues2({}, anim);
+          delete newAnimate["transform"];
+          const distance = { keyframes: built.distanceKfs };
+          if (transform.loop !== void 0) distance.loop = transform.loop;
+          newAnimate["offsetDistance"] = distance;
+          const staticTr = node.transform;
+          let newTransform = staticTr;
+          if (staticTr && typeof staticTr === "object") {
+            const t = __spreadValues2({}, staticTr);
+            delete t["translate"];
+            delete t["origin"];
+            newTransform = Object.keys(t).length ? t : void 0;
+          }
+          out = __spreadProps2(__spreadValues2({}, node), {
+            animate: newAnimate,
+            style: __spreadProps2(__spreadValues2({}, node.style), {
+              offsetPath: "path('" + built.pathStr + "')",
+              offsetAnchor: fmt2(built.anchor[0]) + "px " + fmt2(built.anchor[1]) + "px",
+              offsetRotate: built.autoOrient ? "auto" : "0deg",
+              offsetDistance: "0%"
+            })
+          });
+          if (newTransform !== void 0) out.transform = newTransform;
+          else delete out.transform;
+        }
+      }
+      if ((_a = out.children) == null ? void 0 : _a.length) {
+        const children = out.children.map(walk);
+        if (children.some((c, i) => c !== out.children[i])) out = __spreadProps2(__spreadValues2({}, out), { children });
+      }
+      return out;
+    };
+    return walk(root);
+  }
   function materialiseAllInTree(doc, engine, opts) {
     var _a, _b;
     let root = applyPlayerEffects(doc).root;
+    root = materialiseOffsetPathsInTree(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) {
+    if (engine === PxAnimatorEngine.waapi) {
       root = materialiseMotionPathsInTree(root, opts == null ? void 0 : opts.motionPath);
       root = materialiseAnimatedUseInstances(root);
       root = pruneUnreferencedDefs(root);
@@ -7007,62 +7305,6 @@ var PixodeskAnimatorReact = (() => {
     };
     return api;
   }
-  var SVG_NS = "http://www.w3.org/2000/svg";
-  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;
-      if (CSS_ONLY_STYLE_PROPS.has(propName)) {
-        element.style[propName] = String(sanitised);
-        continue;
-      }
-      element.setAttribute(camelCaseToKebabWordIfNeeded(propName), sanitised);
-    }
-    if (style) {
-      for (const styleProp in style) {
-        element.style[styleProp] = String(style[styleProp]);
-      }
-    }
-    if (children) {
-      for (const child of children) {
-        element.appendChild(child);
-      }
-    }
-    if (textContent) element.textContent = textContent;
-    return element;
-  }
-  function renderNode(node, defs) {
-    if (!node) return null;
-    const _a = node, { type, children, style } = _a, props = __objRest(_a, ["type", "children", "style"]);
-    const feFuncType = props.funcType;
-    if (feFuncType !== void 0) delete props.funcType;
-    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);
-        }
-      }
-    }
-    const element = createElement(
-      type || "g",
-      getNormalizedProps(props),
-      resolvedStyle,
-      childElements,
-      props[TEXT_ATTR] || props[TEXT_CONTENT_ATTR]
-    );
-    if (element && feFuncType !== void 0) element.setAttribute("type", feFuncType);
-    return element;
-  }
   function setupAnimationTriggers(api, config) {
     const { startOn, outAction = "continue", scrollIntoViewThreshold = 0 } = config;
     const root = api.getRootElement();
@@ -7244,10 +7486,12 @@ var PixodeskAnimatorReact = (() => {
     } else if (propName === "d") {
       const paths = value && typeof value === "object" && Array.isArray(value.paths) ? value.paths : [];
       cssValue = 'path("' + paths.map((bz) => bezierToSvgPath(bz, true)).join("") + '")';
+    } else if (PCT_BASED_ATTR_NAMES.has(propName) && typeof value === "number") {
+      cssValue = value * 100 + "%";
     } else {
       cssValue = "" + value;
     }
-    if (!CSS.supports(cssKey, cssValue)) unsupportedSet.add(cssKey);
+    if (!CSS.supports(camelCaseToKebabWordIfNeeded(cssKey), cssValue)) unsupportedSet.add(cssKey);
     cssKey = kebabToCamelCaseWord(cssKey);
     cssKf[cssKey] = cssValue;
     return cssKf;
@@ -7324,7 +7568,7 @@ var PixodeskAnimatorReact = (() => {
         console.warn("createFrameLoopAnimator: No root element provided");
       }
     }
-    const bindings = getNormalisedBindings(doc, PxAnimatorEngine.webapi);
+    const bindings = getNormalisedBindings(doc, PxAnimatorEngine.waapi);
     const animations = [];
     const _iterations = config.iterations;
     let iterations;
@@ -7469,8 +7713,7 @@ var PixodeskAnimatorReact = (() => {
     }
     return api;
   }
-  function createAnimatorFromConfig(doc, adapter, callbacks, rootElement) {
-    const animatorConfig = getAnimatorConfig(doc) || {};
+  function finaliseAnimator(animatorConfig, callbacks, make) {
     let apiRef;
     let effectiveCallbacks = callbacks;
     if (animatorConfig.resetOnFinish) {
@@ -7482,29 +7725,92 @@ var PixodeskAnimatorReact = (() => {
         }
       });
     }
-    let res;
-    if (animatorConfig.mode === PxAnimatorMode.frames) {
-      res = createFrameLoopAnimator(doc, adapter, effectiveCallbacks, rootElement);
-    } else {
-      res = createWebApiAnimator(
-        doc,
-        effectiveCallbacks,
-        rootElement,
-        animatorConfig.mode === PxAnimatorMode.webapi
-        // forcing webapi
-      ) || createFrameLoopAnimator(doc, adapter, effectiveCallbacks, rootElement);
-    }
+    const res = make(effectiveCallbacks);
     apiRef = res;
     if (animatorConfig.debugInstName) {
       window[animatorConfig.debugInstName] = res;
     }
     return res;
   }
+  function bindWithEngineChoice(doc, adapter, callbacks, rootElement) {
+    const animatorConfig = getAnimatorConfig(doc) || {};
+    return finaliseAnimator(animatorConfig, callbacks, (cb) => {
+      if (animatorConfig.mode === PxAnimatorMode.frames) {
+        return createFrameLoopAnimator(doc, adapter, cb, rootElement);
+      }
+      return createWebApiAnimator(
+        doc,
+        cb,
+        rootElement,
+        animatorConfig.mode === PxAnimatorMode.waapi
+        // forcing waapi
+      ) || createFrameLoopAnimator(doc, adapter, cb, rootElement);
+    });
+  }
+  var SVG_NS = "http://www.w3.org/2000/svg";
+  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;
+      if (CSS_ONLY_STYLE_PROPS.has(propName)) {
+        element.style[propName] = String(sanitised);
+        continue;
+      }
+      element.setAttribute(camelCaseToKebabWordIfNeeded(propName), sanitised);
+    }
+    if (style) {
+      for (const styleProp in style) {
+        element.style[styleProp] = String(style[styleProp]);
+      }
+    }
+    if (children) {
+      for (const child of children) {
+        element.appendChild(child);
+      }
+    }
+    if (textContent) element.textContent = textContent;
+    return element;
+  }
+  function renderNode(node, defs) {
+    if (!node) return null;
+    const _a = node, { type, children, style } = _a, props = __objRest(_a, ["type", "children", "style"]);
+    const domType = props.domType;
+    if (domType !== void 0) delete props.domType;
+    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);
+        }
+      }
+    }
+    const element = createElement(
+      type || "g",
+      getNormalizedProps(props),
+      resolvedStyle,
+      childElements,
+      props[TEXT_CONTENT_ATTR] || props[TEXT_ATTR]
+    );
+    if (element && domType !== void 0) element.setAttribute("type", domType);
+    return element;
+  }
+  function createAnimatorFromConfig(doc, adapter, callbacks, rootElement) {
+    return bindWithEngineChoice(doc, adapter, callbacks, rootElement);
+  }
   function createAnimatorImpl(doc, adapter, callbacks, containerElement) {
     const effectsWarnings = validateNodeEffects(doc);
     for (const w of effectsWarnings) console.warn("[PxAnimator] effects shape warning:", w);
     const animatorConfig = getAnimatorConfig(doc) || {};
-    const engine = animatorConfig.mode === PxAnimatorMode.frames ? PxAnimatorEngine.frames : PxAnimatorEngine.webapi;
+    const engine = animatorConfig.mode === PxAnimatorMode.frames ? PxAnimatorEngine.frames : PxAnimatorEngine.waapi;
     doc = materialiseAllInTree(doc, engine);
     let rootElement = null;
     if (containerElement) {