@pixodesk/svg-animator-react 1.0.30 → 1.0.34

package/dist/index.umd.js

@@ -1815,6 +1815,18 @@ var PixodeskAnimatorReact = (() => {
     return a;
   };
   var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
+  var __objRest2 = (source, exclude) => {
+    var target = {};
+    for (var prop in source)
+      if (__hasOwnProp22.call(source, prop) && exclude.indexOf(prop) < 0)
+        target[prop] = source[prop];
+    if (source != null && __getOwnPropSymbols2)
+      for (var prop of __getOwnPropSymbols2(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum2.call(source, prop))
+          target[prop] = source[prop];
+      }
+    return target;
+  };
   function bezierToSvgPath(path, forceCurves = false) {
     var _a, _b, _c, _d;
     const v = path.v;
@@ -2067,6 +2079,38 @@ var PixodeskAnimatorReact = (() => {
     if (o) segs.push("translate(" + -o[0] + tu + "," + -o[1] + tu + ")");
     return segs.join("");
   }
+  function parseTransformParts(str2) {
+    var _a, _b;
+    if (!str2 || typeof str2 !== "string") return void 0;
+    const out = {};
+    const re = /([a-zA-Z]+)\s*\(([^)]*)\)/g;
+    const order = ["translate", "rotate", "skewX", "scale"];
+    let lastIdx = -1;
+    let m;
+    while ((m = re.exec(str2)) !== null) {
+      const fn = m[1];
+      const idx = order.indexOf(fn);
+      if (idx < 0 || idx <= lastIdx) return void 0;
+      lastIdx = idx;
+      const nums = m[2].split(/[\s,]+/).filter(Boolean).map(Number);
+      if (nums.some((n) => Number.isNaN(n))) return void 0;
+      if (fn === "translate") {
+        if (nums.length < 1 || nums.length > 2) return void 0;
+        out.translate = [nums[0], (_a = nums[1]) != null ? _a : 0];
+      } else if (fn === "rotate") {
+        if (nums.length !== 1) return void 0;
+        out.rotate = nums[0];
+      } else if (fn === "skewX") {
+        if (nums.length !== 1) return void 0;
+        out.skew = nums[0];
+      } else {
+        if (nums.length < 1 || nums.length > 2) return void 0;
+        out.scale = [nums[0], (_b = nums[1]) != null ? _b : nums[0]];
+      }
+    }
+    if (str2.replace(/([a-zA-Z]+)\s*\(([^)]*)\)/g, "").replace(/[\s,]/g, "").length) return void 0;
+    return Object.keys(out).length ? out : void 0;
+  }
   var STYLE_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
   var DEFAULT_DURATION_MS = 1e3;
   function kebabToCamelCaseWord(kebab) {
@@ -2394,6 +2438,7 @@ var PixodeskAnimatorReact = (() => {
     constructor(schemas, defaultVal) {
       super();
       this.schemas = schemas;
+      this._kind = "union";
       this._default = defaultVal != null ? defaultVal : schemas[0]._default;
     }
     sanitize(raw) {
@@ -2418,6 +2463,7 @@ var PixodeskAnimatorReact = (() => {
       super();
       this._key = _key;
       this._schemas = _schemas;
+      this._kind = "discriminatedUnion";
       this._default = defaultVal != null ? defaultVal : _schemas[0]._default;
       this._map = /* @__PURE__ */ new Map();
       for (const s of _schemas) {
@@ -2580,6 +2626,7 @@ var PixodeskAnimatorReact = (() => {
     constructor(value) {
       super();
       this.value = value;
+      this._kind = "record";
       this._default = {};
     }
     sanitize(raw) {
@@ -2665,6 +2712,7 @@ var PixodeskAnimatorReact = (() => {
     constructor(schemas) {
       super();
       this.schemas = schemas;
+      this._kind = "tuple";
       this._default = schemas.map((s) => s._default);
     }
     sanitize(raw) {
@@ -2827,7 +2875,51 @@ var PixodeskAnimatorReact = (() => {
   }
   function getAnimatorConfig(doc) {
     var _a;
-    return (doc == null ? void 0 : doc.animator) || ((_a = doc == null ? void 0 : doc.meta) == null ? void 0 : _a.animator);
+    const cfg = (doc == null ? void 0 : doc.animator) || ((_a = doc == null ? void 0 : doc.meta) == null ? void 0 : _a.animator);
+    return cfg ? flattenAnimatorTimeline(cfg) : void 0;
+  }
+  var flattenMemo = /* @__PURE__ */ new WeakMap();
+  function flattenAnimatorTimeline(cfg) {
+    const timeline = cfg.timeline;
+    if (timeline === void 0 || timeline === null || typeof timeline !== "object") return cfg;
+    const memoised = flattenMemo.get(cfg);
+    if (memoised) return memoised;
+    const _a = cfg, { timeline: _dropped } = _a, flat = __objRest2(_a, ["timeline"]);
+    if (timeline.type === "scroll" || timeline.type === "view") {
+      flat.timelineSource = "scroll";
+      if (timeline.duration !== void 0) flat.duration = timeline.duration;
+      if (timeline.iterations !== void 0) flat.iterations = timeline.iterations;
+      const scroll = __spreadValues2({}, flat.scroll || {});
+      scroll.kind = timeline.type;
+      if (timeline.engine !== void 0) scroll.driver = timeline.engine;
+      if (timeline.axis !== void 0) scroll.axis = timeline.axis;
+      if (timeline.source !== void 0) scroll.source = timeline.source;
+      if (timeline.subject !== void 0) scroll.subject = timeline.subject;
+      if (timeline.smoothing !== void 0) scroll.smoothing = timeline.smoothing;
+      if (timeline.range !== void 0) scroll.range = timeline.range;
+      const pin = timeline.pin;
+      if (typeof pin === "boolean") scroll.pin = pin;
+      else if (pin && typeof pin === "object") {
+        scroll.pin = true;
+        if (pin.align !== void 0) scroll.pinAlign = pin.align;
+        if (pin.top !== void 0) scroll.pinTop = pin.top;
+        if (pin.distance !== void 0) scroll.pinDistance = pin.distance;
+      }
+      flat.scroll = scroll;
+    } else {
+      if (timeline.duration !== void 0) flat.duration = timeline.duration;
+      if (timeline.trigger !== void 0) {
+        const _b = timeline.trigger, { onFinish } = _b, restTrigger = __objRest2(_b, ["onFinish"]);
+        if (Object.keys(restTrigger).length) flat.trigger = restTrigger;
+        if (onFinish !== void 0) flat.resetOnFinish = onFinish === "reset";
+      }
+      if (timeline.delay !== void 0) flat.delay = timeline.delay;
+      if (timeline.iterations !== void 0) flat.iterations = timeline.iterations;
+      if (timeline.direction !== void 0) flat.direction = timeline.direction;
+      if (timeline.fill !== void 0) flat.fill = timeline.fill;
+    }
+    flattenMemo.set(cfg, flat);
+    return flat;
   }
   function getDefs(doc) {
     var _a;
@@ -2839,7 +2931,7 @@ var PixodeskAnimatorReact = (() => {
     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 }));
+    return Object.entries(animateById).map(([id, anim]) => ({ id: id.startsWith("#") ? id.slice(1) : id, animate: anim }));
   }
   var PxEasingOrRefSchema = px.union([
     px.string(),
@@ -2850,27 +2942,27 @@ var PixodeskAnimatorReact = (() => {
     // e.g. for colors
     px.number(),
     px.array(px.number()),
-    px.lazy(() => PxTransformPartsSchema, {}),
+    // ORDER LAW: the key-discriminated object shapes (`{path}`, `{paths}`) come BEFORE the
+    // all-optional transform-parts record. In default (non-strict) mode that record accepts
+    // ANY object (every key optional, unknown keys ignored), so listing it earlier made
+    // Union.sanitize route `{path}`/`{paths}` values into it and strip them to `{}` —
+    // silent morph-data loss (repro: the editor's keyframeValueSanitize spec). Validity is
+    // order-independent (`some()`); only sanitize routing depends on this order.
     px.object({ path: px.string() }),
     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), [])
+    px.lazy(() => px.array(PxGradientStopSchema), []),
+    px.lazy(() => PxTransformPartsSchema, {})
   ]));
   var PxKeyframeSchema = implementsInterface()(px.object({
     time: px.number().optional(),
-    t: px.number().optional(),
     value: PxKeyframeValueSchema.optional(),
-    v: PxKeyframeValueSchema.optional(),
     easing: PxEasingOrRefSchema.optional(),
-    e: PxEasingOrRefSchema.optional(),
     tangentOut: px.tuple([px.number(), px.number()]).optional(),
-    to: px.tuple([px.number(), px.number()]).optional(),
-    // short alias
-    tangentIn: px.tuple([px.number(), px.number()]).optional(),
-    ti: px.tuple([px.number(), px.number()]).optional(),
-    // short alias
-    selected: px.boolean().optional()
-    // editor-side UI state (Player ignores it)
+    tangentIn: px.tuple([px.number(), px.number()]).optional()
+    // (`selected` — editor timeline-selection UI state — was REMOVED from the wire
+    // (review §1.3): editor data lives under `meta`. The editor still carries it on
+    // its internal COPY-PASTE payload, which never validates against this schema.)
   }));
   var PxLoopSchema = implementsInterface()(px.object({
     segmentCount: px.number().optional(),
@@ -2880,7 +2972,6 @@ var PixodeskAnimatorReact = (() => {
   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(),
     autoOrient: px.boolean().optional()
   }));
@@ -2908,6 +2999,11 @@ var PixodeskAnimatorReact = (() => {
   var PxTriggerSchema = implementsInterface()(px.object({
     startOn: px.enum(["load", "mouseOver", "click", "scrollIntoView", "programmatic"]).optional(),
     outAction: px.enum(["continue", "pause", "reset", "reverse"]).optional(),
+    // What happens after a NATURAL finish — `'hold'` (default: keep the end state per
+    // `fill`) or `'reset'` (snap back to the start state). The trigger-vocabulary home of
+    // the old top-level `resetOnFinish: boolean` (read-legacy) — review §2.3: both
+    // "what happens at the end" knobs now sit side by side and share one style of value.
+    onFinish: px.enum(["hold", "reset"]).optional(),
     scrollIntoViewThreshold: px.number().optional()
   }));
   var PxGlyphSchema = implementsInterface()(px.object({
@@ -2915,8 +3011,8 @@ var PixodeskAnimatorReact = (() => {
     d: px.string()
   }));
   var PxGlyphFontSchema = implementsInterface()(px.object({
-    fFamily: px.string(),
-    style: px.string(),
+    fontFamily: px.string(),
+    fontStyle: px.string(),
     ascent: px.number(),
     unitsPerEm: px.number(),
     glyphs: px.record(PxGlyphSchema)
@@ -2924,7 +3020,9 @@ var PixodeskAnimatorReact = (() => {
   var PxDefsSchema = implementsInterface()(px.object({
     easings: px.record(px.tuple([px.number(), px.number(), px.number(), px.number()])).optional(),
     animations: px.record(PxAnimationDefinitionSchema).optional(),
-    styles: px.record(px.any()).optional(),
+    // Review §2.6: the schema now matches the declared type — a style preset is a flat
+    // record of string|number attribute values, nothing nested.
+    styles: px.record(px.record(px.union([px.string(), px.number()]))).optional(),
     glyphs: px.record(PxGlyphFontSchema).optional()
   }));
   var PX_SCROLL_PHASES = ["cover", "contain", "entry", "exit", "entry-crossing", "exit-crossing"];
@@ -2950,22 +3048,54 @@ var PixodeskAnimatorReact = (() => {
     pinDistance: px.number().optional(),
     range: PxScrollRangeSchema.optional()
   }));
-  var PxAnimatorConfigSchema = implementsInterface()(px.object({
-    mode: px.enum([PxAnimatorMode.auto, PxAnimatorMode.waapi, PxAnimatorMode.frames]).optional(),
+  var PxTimelinePinSchema = px.object({
+    align: px.enum(["top", "center", "bottom"]).optional(),
+    top: px.number().optional(),
+    distance: px.number().optional()
+  });
+  var PxClockTimelineSchema = px.object({
+    type: px.literal("clock"),
+    // §2.8: duration is a property of the TIMELINE — how long one pass takes.
     duration: px.number().optional(),
+    trigger: PxTriggerSchema.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(),
+    direction: px.enum(["normal", "reverse", "alternate", "alternate-reverse"]).optional()
+  });
+  var scrollishTimelineShape = {
+    // §2.8: duration is a property of the TIMELINE — under scrubbing it is the keyframe
+    // span the scroll range maps onto.
+    duration: px.number().optional(),
+    // Finite repeat count IS meaningful when scrubbing — the scroll range maps onto
+    // duration × iterations (rule D4; `'infinite'` cannot map to a range, so no literal here).
+    iterations: px.number().optional(),
+    engine: px.enum(["custom", "native"]).optional(),
+    axis: px.enum(["block", "inline", "x", "y"]).optional(),
+    source: px.enum(["nearest", "root"]).optional(),
+    subject: px.string().optional(),
+    // 'parent' | 'scroller' | any CSS selector
+    smoothing: px.number().optional(),
+    // ms
+    pin: px.union([px.boolean(), PxTimelinePinSchema]).optional(),
+    range: PxScrollRangeSchema.optional()
+  };
+  var PxScrollTimelineSchema = px.object(__spreadValues2({ type: px.literal("scroll") }, scrollishTimelineShape));
+  var PxViewTimelineSchema = px.object(__spreadValues2({ type: px.literal("view") }, scrollishTimelineShape));
+  var PxTimelineSchema = px.discriminatedUnion("type", [
+    PxClockTimelineSchema,
+    PxScrollTimelineSchema,
+    PxViewTimelineSchema
+  ]);
+  var PxAnimatorConfigSchema = implementsInterface()(px.object({
+    mode: px.enum([PxAnimatorMode.auto, PxAnimatorMode.waapi, PxAnimatorMode.frames]).optional(),
+    // (`duration` lives INSIDE `timeline` on the wire — §2.8; the flat field below
+    // exists only on the runtime view, like the rest of the playback dynamics.)
     frameRate: px.number().optional(),
-    trigger: PxTriggerSchema.optional(),
-    resetOnFinish: px.boolean().optional(),
+    // THE spelling of "what advances progress" — clock / scroll / view (review §2.1).
+    timeline: PxTimelineSchema.optional(),
     definitions: PxDefsSchema.optional(),
     animateById: px.record(PxElementAnimationSchema).optional(),
-    timelineSource: px.string().optional(),
-    scroll: PxScrollSchema.optional(),
     debugInstName: px.string().optional()
   }));
   var PxBindingSchema = implementsInterface()(px.object({
@@ -2984,18 +3114,18 @@ var PixodeskAnimatorReact = (() => {
   ]);
   var PxAnimatableNumberSchema = px.union([
     px.number(),
-    px.object({ value: px.number() }),
-    PxPropertyAnimationSchema
+    PxPropertyAnimationSchema,
+    px.object({ value: px.number() })
   ]);
   var PxAnimatableVec2Schema = px.union([
     px.tuple([px.number(), px.number()]),
-    px.object({ value: px.tuple([px.number(), px.number()]) }),
-    PxPropertyAnimationSchema
+    PxPropertyAnimationSchema,
+    px.object({ value: px.tuple([px.number(), px.number()]) })
   ]);
   var PxAnimatableStringSchema = px.union([
     px.string(),
-    px.object({ value: px.string() }),
-    PxPropertyAnimationSchema
+    PxPropertyAnimationSchema,
+    px.object({ value: px.string() })
   ]);
   var PxTransformByEffectSchema = implementsInterface()(px.object({
     translate: PxAnimatableVec2Schema.optional(),
@@ -3025,8 +3155,7 @@ var PixodeskAnimatorReact = (() => {
     height: px.number().optional()
   }));
   var PxClipPathEffectSchema = implementsInterface()(px.object({
-    d: PxAnimatableStringSchema.optional(),
-    animate: PxPropertyAnimationSchema.optional()
+    d: PxAnimatableStringSchema.optional()
   }));
   var PxStrokeTrimEffectSchema = implementsInterface()(px.object({
     offset: PxAnimatableNumberSchema.optional(),
@@ -3034,7 +3163,6 @@ var PixodeskAnimatorReact = (() => {
     subPaths: px.enum([PxStrokeTrimSubPaths.separate, PxStrokeTrimSubPaths.combined]).optional()
   }));
   var PxRetimeEffectSchema = implementsInterface()(px.object({
-    sourceId: px.string().optional(),
     start: px.number().optional(),
     stretch: px.number().optional(),
     timeCrop: px.tuple([px.number(), px.number()]).optional()
@@ -3057,11 +3185,11 @@ var PixodeskAnimatorReact = (() => {
   var PxFillGradientEffectSchema = implementsInterface()(px.object({
     // Contextual kind — the `type` convention, see `PxNodeBase.type`.
     type: px.enum([PxGradientType.linear, PxGradientType.radial]),
-    p1: PxAnimatableVec2Schema.optional(),
-    p2: PxAnimatableVec2Schema.optional(),
-    c: PxAnimatableVec2Schema.optional(),
-    r: PxAnimatableNumberSchema.optional(),
-    fp: PxAnimatableVec2Schema.optional(),
+    start: PxAnimatableVec2Schema.optional(),
+    end: PxAnimatableVec2Schema.optional(),
+    center: PxAnimatableVec2Schema.optional(),
+    radius: PxAnimatableNumberSchema.optional(),
+    focal: PxAnimatableVec2Schema.optional(),
     stops: PxAnimatableGradientStopsSchema.optional(),
     gradientUnits: px.enum([PxGradientUnits.userSpaceOnUse, PxGradientUnits.objectBoundingBox]).optional(),
     spreadMethod: px.enum([PxGradientSpreadMethod.pad, PxGradientSpreadMethod.reflect, PxGradientSpreadMethod.repeat]).optional(),
@@ -3251,9 +3379,11 @@ var PixodeskAnimatorReact = (() => {
     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)) {
+      for (const [key, anim] of Object.entries(docAnimate)) {
+        const hashed = key.startsWith("#");
+        const id = hashed ? key.slice(1) : key;
         const newId = (_b = idMap.get(id)) != null ? _b : id;
-        updatedAnimate[newId] = anim;
+        updatedAnimate[hashed ? "#" + newId : newId] = anim;
       }
       cloned.animator = __spreadProps2(__spreadValues2({}, cloned.animator), { animateById: updatedAnimate });
     }
@@ -3344,7 +3474,7 @@ 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.keyframes && !value.kfs) {
+      } else if (key === "transform" && value !== null && typeof value === "object" && !Array.isArray(value) && !value.keyframes) {
         const parts = value.value && typeof value.value === "object" ? value.value : value;
         propsCopy["transform"] = composeTransformParts(parts, { withUnits: false });
       } else if (TRANSFORM_FN_NAMES.has(key)) {
@@ -3382,12 +3512,12 @@ var PixodeskAnimatorReact = (() => {
     return (_a = kf.easing) != null ? _a : kf.e;
   }
   function propAnimIsMotionPath(anim) {
-    var _a, _b, _c;
-    const kfs = (_a = anim.keyframes) != null ? _a : anim.kfs;
+    var _a, _b;
+    const kfs = anim.keyframes;
     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;
+      if (((_a = kf.tangentIn) != null ? _a : kf.ti) || ((_b = kf.tangentOut) != null ? _b : kf.to)) return true;
     }
     return false;
   }
@@ -3448,14 +3578,14 @@ var PixodeskAnimatorReact = (() => {
   var DEFAULT_ROTATION_TOL = 5;
   var DEFAULT_MAX_SAMPLES = 32;
   function materialiseMotionPathInPropAnim(anim, opts) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     if (!propAnimIsMotionPath(anim)) return anim;
-    const kfs = (_a = anim.keyframes) != null ? _a : anim.kfs;
+    const kfs = anim.keyframes;
     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 flatnessTol = (_a = opts == null ? void 0 : opts.flatnessTolerance) != null ? _a : DEFAULT_FLATNESS_TOL;
+    const rotationTol = (_b = opts == null ? void 0 : opts.rotationTolerance) != null ? _b : DEFAULT_ROTATION_TOL;
+    const maxSamples = (_c = opts == null ? void 0 : opts.maxSamplesPerSegment) != null ? _c : DEFAULT_MAX_SAMPLES;
     const out = [];
     const firstPos = getKfTranslate(kfs[0]);
     if (!firstPos) return anim;
@@ -3484,7 +3614,7 @@ var PixodeskAnimatorReact = (() => {
     const lastInE = getKfEasing(kfs[kfs.length - 1]);
     if (lastInE) out[out.length - 1].e = lastInE;
     if (autoOrient) unwrapAutoOrientRotations(out);
-    const result = { kfs: out };
+    const result = { keyframes: out };
     if (anim.loop !== void 0) result.loop = anim.loop;
     return result;
   }
@@ -4144,7 +4274,7 @@ var PixodeskAnimatorReact = (() => {
   }
   function normalizeKeyframes(propName, propAnim, duration, defs) {
     var _a, _b, _c, _d, _e, _f, _g;
-    const keyframes = propAnim.keyframes || propAnim.kfs || [];
+    const keyframes = propAnim.keyframes || [];
     const normalized = [];
     for (const kf of keyframes) {
       const timePct = (_b = (_a = kf.time) != null ? _a : kf.t) != null ? _b : 0;
@@ -4189,17 +4319,16 @@ var PixodeskAnimatorReact = (() => {
     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;
+    const rawKfs = propAnim.keyframes;
     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;
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      const t = (_a = kf.t) != null ? _a : 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;
@@ -4210,7 +4339,7 @@ var PixodeskAnimatorReact = (() => {
       return out2;
     });
     const expanded = expandLoopKeyframes(propName, kfs, loop, duration);
-    const out = { kfs: expanded };
+    const out = { keyframes: expanded };
     if (propAnim.autoOrient !== void 0) out.autoOrient = propAnim.autoOrient;
     return out;
   }
@@ -4252,6 +4381,36 @@ var PixodeskAnimatorReact = (() => {
   function generateElementId() {
     return "_px_el_" + ++_elementIdCounter;
   }
+  function mergeStaticTransformIntoAnimDef(animDef, staticTransform) {
+    if (!animDef) return animDef;
+    const staticParts = staticTransform && typeof staticTransform === "object" && !Array.isArray(staticTransform) ? staticTransform : parseTransformParts(staticTransform);
+    if (!staticParts || !Object.keys(staticParts).length) return animDef;
+    const mergeKfValue = (v) => v && typeof v === "object" && !Array.isArray(v) ? __spreadValues2(__spreadValues2({}, staticParts), v) : v;
+    const transformAnim = animDef["transform"];
+    if (transformAnim && typeof transformAnim === "object") {
+      const anim = transformAnim;
+      if (Array.isArray(anim.keyframes)) {
+        const out = __spreadProps2(__spreadValues2({}, anim), {
+          keyframes: anim.keyframes.map((kf) => __spreadProps2(__spreadValues2({}, kf), { value: mergeKfValue(kf.value) }))
+        });
+        if (out.value !== void 0) out.value = mergeKfValue(out.value);
+        return __spreadProps2(__spreadValues2({}, animDef), { transform: out });
+      }
+      return animDef;
+    }
+    const channels = Object.keys(animDef).filter((k) => TRANSFORM_FN_NAMES.has(k));
+    if (channels.length !== 1) return animDef;
+    const ch = channels[0];
+    const chAnim = animDef[ch];
+    if (!chAnim || typeof chAnim !== "object" || !Array.isArray(chAnim.keyframes)) return animDef;
+    const lifted = __spreadProps2(__spreadValues2({}, chAnim), {
+      keyframes: chAnim.keyframes.map((kf) => __spreadProps2(__spreadValues2({}, kf), { value: __spreadProps2(__spreadValues2({}, staticParts), { [ch]: kf.value }) }))
+    });
+    if (lifted.value !== void 0) lifted.value = __spreadProps2(__spreadValues2({}, staticParts), { [ch]: lifted.value });
+    const rest = __spreadValues2({}, animDef);
+    delete rest[ch];
+    return __spreadProps2(__spreadValues2({}, rest), { transform: lifted });
+  }
   function normalizeAnimationDefinition(animDef, duration, defs, engine = PxAnimatorEngine.waapi) {
     const normalized = {};
     for (const [propName, propAnim] of Object.entries(animDef)) {
@@ -4260,7 +4419,7 @@ var PixodeskAnimatorReact = (() => {
       }
       const normalizedKfs = normalizeKeyframes(propName, propAnim, duration, defs);
       if (normalizedKfs.length > 0) {
-        const out = { kfs: normalizedKfs };
+        const out = { keyframes: normalizedKfs };
         if (propAnim.autoOrient !== void 0) out.autoOrient = propAnim.autoOrient;
         if (propAnim.loop !== void 0) out.loop = propAnim.loop;
         normalized[propName] = engine === PxAnimatorEngine.waapi && propName === "transform" ? materialiseMotionPathInPropAnim(out) : out;
@@ -4273,11 +4432,11 @@ var PixodeskAnimatorReact = (() => {
     const defs = getDefs(doc);
     const duration = animatorConfig.duration || 1e3;
     const bindings = [];
-    const processAnimation = (id, animate) => {
+    const processAnimation = (id, animate, staticTransform) => {
       if (!animate) return null;
       const animDefs = resolveElementAnimation(animate, defs);
       if (animDefs.length === 0) return null;
-      const merged = mergeAnimationDefinitions(animDefs);
+      const merged = mergeStaticTransformIntoAnimDef(mergeAnimationDefinitions(animDefs), staticTransform);
       const normalizedAnim = normalizeAnimationDefinition(merged, duration, defs, engine);
       if (Object.keys(normalizedAnim).length === 0) return null;
       return {
@@ -4297,7 +4456,7 @@ var PixodeskAnimatorReact = (() => {
       if (inlineAnim && Object.keys(inlineAnim).length > 0) {
         const nodeId = node.id || generateElementId();
         node.id = nodeId;
-        const normalized = processAnimation(nodeId, inlineAnim);
+        const normalized = processAnimation(nodeId, inlineAnim, node.transform);
         if (normalized) bindings.push(normalized);
       }
       if (node.children) {
@@ -4335,7 +4494,7 @@ var PixodeskAnimatorReact = (() => {
   }
   function calcPropertyValue(propName, propAnim, progress) {
     var _a, _b, _c, _d, _e, _f, _g;
-    const keyframes = propAnim.kfs || propAnim.keyframes || [];
+    const keyframes = 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);
@@ -4950,7 +5109,7 @@ 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) {
+    } else if (node.transform && typeof node.transform === "object" && !Array.isArray(node.transform) && !node.transform.keyframes) {
       const wrapped = node.transform.value;
       const isWrapped = !!(wrapped && typeof wrapped === "object");
       const value = isWrapped ? wrapped : node.transform;
@@ -5083,12 +5242,12 @@ var PixodeskAnimatorReact = (() => {
       id
     };
     if (fx.type === PxGradientType.linear) {
-      applyGeomVec(out, "x1", "y1", fx.p1);
-      applyGeomVec(out, "x2", "y2", fx.p2);
+      applyGeomVec(out, "x1", "y1", fx.start);
+      applyGeomVec(out, "x2", "y2", fx.end);
     } else {
-      applyGeomVec(out, "cx", "cy", fx.c);
-      applyGeomNumber(out, "r", fx.r);
-      applyGeomVec(out, "fx", "fy", fx.fp);
+      applyGeomVec(out, "cx", "cy", fx.center);
+      applyGeomNumber(out, "r", fx.radius);
+      applyGeomVec(out, "fx", "fy", fx.focal);
     }
     if (fx.gradientUnits) out.gradientUnits = fx.gradientUnits;
     if (fx.spreadMethod) out.spreadMethod = fx.spreadMethod;
@@ -5214,8 +5373,7 @@ var PixodeskAnimatorReact = (() => {
     return pct + "%";
   }
   function applyClipPathEffect(node, fx, ctx) {
-    var _a, _b;
-    if (!fx || !fx.d && !fx.animate) return node;
+    if (!(fx == null ? void 0 : fx.d)) return node;
     const clipId = genId(ctx, "clip");
     const pathChild = { type: "path" };
     const read = readAnimatable(fx.d);
@@ -5227,11 +5385,6 @@ var PixodeskAnimatorReact = (() => {
         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;
@@ -5374,7 +5527,7 @@ 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) {
+    if (node.transform && typeof node.transform === "object" && !node.transform.keyframes) {
       const wrapped = node.transform.value;
       const value = wrapped && typeof wrapped === "object" ? wrapped : node.transform;
       if (value && typeof value === "object") {
@@ -7033,9 +7186,9 @@ var PixodeskAnimatorReact = (() => {
     return Object.is(r, -0) ? "0" : String(r);
   };
   function buildOffsetPath(propAnim) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     if (propAnim.alongPathMode !== "offsetPath") return void 0;
-    const kfs = (_a = propAnim.keyframes) != null ? _a : propAnim.kfs;
+    const kfs = propAnim.keyframes;
     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];
@@ -7046,7 +7199,7 @@ var PixodeskAnimatorReact = (() => {
       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];
+      const o = (_a = v == null ? void 0 : v.origin) != null ? _a : [0, 0];
       if (o[0] !== anchor[0] || o[1] !== anchor[1]) return void 0;
       points.push([tr[0] + anchor[0], tr[1] + anchor[1]]);
     }
@@ -7055,8 +7208,8 @@ var PixodeskAnimatorReact = (() => {
     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 to = (_b = kfTangentOut(kfs[i])) != null ? _b : [0, 0];
+      const ti = (_c = kfTangentIn(kfs[i + 1])) != null ? _c : [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]);
@@ -7671,7 +7824,7 @@ var PixodeskAnimatorReact = (() => {
     const result = /* @__PURE__ */ new Map();
     for (const [propName, propAnim] of Object.entries(animDef)) {
       const duration = config.duration || 1;
-      const clippedKeyframes = clipKeyframesToDuration(propName, propAnim.kfs || propAnim.keyframes || [], duration);
+      const clippedKeyframes = clipKeyframesToDuration(propName, propAnim.keyframes || [], duration);
       const cssKeyframes = [];
       for (let i = 0; i < clippedKeyframes.length; i++) {
         const kf = clippedKeyframes[i];
@@ -8273,7 +8426,16 @@ var PixodeskAnimatorReact = (() => {
         }
       }
     }
-    return createAnimatorFromConfig(doc, adapter, callbacks, rootElement);
+    const api = createAnimatorFromConfig(doc, adapter, callbacks, rootElement);
+    if (containerElement && rootElement) {
+      const rendered = rootElement;
+      const destroyNative = api.destroy.bind(api);
+      api.destroy = () => {
+        destroyNative();
+        rendered.remove();
+      };
+    }
+    return api;
   }
   function createAnimator(options) {
     const { src, data, adapter, callbacks, container } = options;
@@ -8463,10 +8625,11 @@ var PixodeskAnimatorReact = (() => {
   }) => {
     doc = generateNewIds(doc);
     const elementRefs = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
-    const renderNode2 = (node, isRoot = false) => {
+    const renderNode2 = (node, isRoot = false, key) => {
       if (!node) return null;
       const { type, animate, meta, children, ...props } = node;
       const normProps = getNormalizedProps(props);
+      if (key !== void 0) normProps["key"] = key;
       normProps["ref"] = (domEl) => {
         if (node["id"]) elementRefs.current.set(node["id"], domEl);
       };
@@ -8476,7 +8639,7 @@ var PixodeskAnimatorReact = (() => {
         }
         if (style) normProps["style"] = style;
       }
-      return (0, import_react2.createElement)(type, normProps, children?.map((child) => renderNode2(child)));
+      return (0, import_react2.createElement)(type, normProps, children?.map((child, i) => renderNode2(child, false, child["id"] ?? i)));
     };
     const root = doc ? renderNode2(doc, true) : null;
     (0, import_react2.useEffect)(() => {
@@ -8512,8 +8675,8 @@ var PixodeskAnimatorReact = (() => {
     autoplay,
     play,
     pause,
+    progress,
     time,
-    timeMs,
     apiRef,
     // Overrides
     mode,
@@ -8538,7 +8701,7 @@ var PixodeskAnimatorReact = (() => {
       compMode = "imperativeApi" /* imperativeApi */;
     } else if (autoplay) {
       compMode = "autoplay" /* autoplay */;
-    } else if (time !== void 0 || timeMs !== void 0) {
+    } else if (progress !== void 0 || time !== void 0) {
       compMode = "fixedTime" /* fixedTime */;
     } else if (play !== void 0 || pause !== void 0) {
       compMode = "play" /* play */;
@@ -8593,13 +8756,13 @@ var PixodeskAnimatorReact = (() => {
     let seekMs;
     if (compMode === "fixedTime" /* fixedTime */) {
       const animator = doc.animator || {};
-      if (time !== void 0) {
+      if (progress !== void 0) {
         const iterationsValue = iterations ?? animator.iterations;
         const iterationsCount = typeof iterationsValue === "number" && iterationsValue >= 1 ? iterationsValue : 1;
         const singleDuration = duration ?? animator.duration ?? 1e3;
-        seekMs = time * singleDuration * iterationsCount;
+        seekMs = progress * singleDuration * iterationsCount;
       }
-      if (timeMs !== void 0) seekMs = timeMs;
+      if (time !== void 0) seekMs = time;
     }
     const apiHolderRef = (0, import_react2.useRef)(null);
     const callbacksRef = (0, import_react2.useRef)({});