@pixodesk/svg-animator-web 1.0.30 → 1.0.34

package/dist/index.js

@@ -315,6 +315,38 @@ function composeTransformParts(parts, opts) {
   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) {
@@ -642,6 +674,7 @@ var Union = class extends Base {
   constructor(schemas, defaultVal) {
     super();
     this.schemas = schemas;
+    this._kind = "union";
     this._default = defaultVal != null ? defaultVal : schemas[0]._default;
   }
   sanitize(raw) {
@@ -666,6 +699,7 @@ var DiscriminatedUnion = class extends Base {
     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) {
@@ -828,6 +862,7 @@ var Rec = class extends Base {
   constructor(value) {
     super();
     this.value = value;
+    this._kind = "record";
     this._default = {};
   }
   sanitize(raw) {
@@ -913,6 +948,7 @@ var Tuple = class extends Base {
   constructor(schemas) {
     super();
     this.schemas = schemas;
+    this._kind = "tuple";
     this._default = schemas.map((s) => s._default);
   }
   sanitize(raw) {
@@ -949,10 +985,20 @@ function schemaKeys(schema) {
 function describeSchema(schema) {
   var _a;
   const s = schema;
-  if ("_shape" in s) return { kind: "shape", shape: s._shape };
+  switch (s._kind) {
+    case "union":
+      return { kind: "union", members: s.schemas };
+    case "discriminatedUnion":
+      return { kind: "discriminatedUnion", key: s._key, members: s._schemas };
+    case "record":
+      return { kind: "record", value: s.value };
+    case "tuple":
+      return { kind: "tuple", items: s.schemas };
+  }
+  if ("_shape" in s) return { kind: "shape", shape: s._shape, openValue: s._openSchema };
   if ("item" in s) return { kind: "array", item: s.item };
   if ("inner" in s) return { kind: "optional", inner: s.inner };
-  if ("fn" in s) return { kind: "lazy", resolved: (_a = s.resolved) != null ? _a : s.fn() };
+  if ("fn" in s) return { kind: "lazy", resolved: (_a = s.resolved) != null ? _a : s.resolved = s.fn() };
   return { kind: "leaf" };
 }
 var px = {
@@ -1090,7 +1136,51 @@ function isPxElementFileFormat(fileJson) {
 }
 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;
@@ -1102,7 +1192,7 @@ function getBindings(doc) {
   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 }));
 }
 function getChildren(doc) {
   return doc == null ? void 0 : doc.children;
@@ -1116,27 +1206,27 @@ var PxKeyframeValueSchema = implementsInterface()(px.union([
   // 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(),
@@ -1146,7 +1236,6 @@ var PxLoopSchema = implementsInterface()(px.object({
 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()
 }));
@@ -1174,6 +1263,11 @@ var PxElementAnimationSchema = implementsInterface()(px.union([
 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({
@@ -1181,8 +1275,8 @@ var PxGlyphSchema = implementsInterface()(px.object({
   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)
@@ -1190,7 +1284,9 @@ var PxGlyphFontSchema = implementsInterface()(px.object({
 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"];
@@ -1216,22 +1312,54 @@ var PxScrollSchema = implementsInterface()(px.object({
   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({
@@ -1250,18 +1378,18 @@ var PxAttrValueSchema = px.union([
 ]);
 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(),
@@ -1291,8 +1419,7 @@ var PxMaskedByEffectSchema = implementsInterface()(px.object({
   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(),
@@ -1300,7 +1427,6 @@ var PxStrokeTrimEffectSchema = implementsInterface()(px.object({
   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()
@@ -1323,11 +1449,11 @@ var PxAnimatableGradientStopsSchema = px.union([
 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(),
@@ -1521,9 +1647,11 @@ function generateNewIds(doc) {
   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 });
   }
@@ -1614,7 +1742,7 @@ function getNormalizedProps(props) {
     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)) {
@@ -1652,12 +1780,12 @@ function getKfEasing(kf) {
   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;
 }
@@ -1718,14 +1846,14 @@ var DEFAULT_FLATNESS_TOL = 0.5;
 var DEFAULT_ROTATION_TOL = 5;
 var DEFAULT_MAX_SAMPLES = 32;
 function materialiseMotionPathInPropAnim(anim, opts) {
-  var _a, _b, _c, _d;
+  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;
@@ -1754,7 +1882,7 @@ function materialiseMotionPathInPropAnim(anim, opts) {
   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;
 }
@@ -2414,7 +2542,7 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
 }
 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;
@@ -2459,17 +2587,16 @@ function mergeAnimationDefinitions(animations) {
   return merged;
 }
 function materialiseInternalLoopsInPropAnim(propName, propAnim, duration) {
-  var _a;
   const loopRaw = propAnim.loop;
   if (loopRaw === void 0 || loopRaw === null || loopRaw === false) return propAnim;
   const loop = loopRaw === true ? {} : loopRaw;
-  const rawKfs = (_a = propAnim.keyframes) != null ? _a : propAnim.kfs;
+  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;
@@ -2480,7 +2607,7 @@ function materialiseInternalLoopsInPropAnim(propName, propAnim, duration) {
     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;
 }
@@ -2522,6 +2649,36 @@ var _elementIdCounter = 0;
 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)) {
@@ -2530,7 +2687,7 @@ function normalizeAnimationDefinition(animDef, duration, defs, engine = PxAnimat
     }
     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;
@@ -2543,11 +2700,11 @@ function getNormalisedBindings(doc, engine = PxAnimatorEngine.waapi) {
   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 {
@@ -2567,7 +2724,7 @@ function getNormalisedBindings(doc, engine = PxAnimatorEngine.waapi) {
     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) {
@@ -2605,7 +2762,7 @@ function getKeyframesPair(keyframes, progress) {
 }
 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);
@@ -3220,7 +3377,7 @@ function liftBodyTranslate(node, transformBy) {
       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;
@@ -3353,12 +3510,12 @@ function synthesiseGradientDef(fx, id, ctx) {
     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;
@@ -3484,8 +3641,7 @@ function formatOffset(o) {
   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);
@@ -3497,11 +3653,6 @@ function applyClipPathEffect(node, fx, ctx) {
       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;
@@ -3644,7 +3795,7 @@ function readTransformationFromBody(node) {
     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") {
@@ -5435,9 +5586,9 @@ var fmt2 = (n) => {
   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];
@@ -5448,7 +5599,7 @@ function buildOffsetPath(propAnim) {
     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]]);
   }
@@ -5457,8 +5608,8 @@ function buildOffsetPath(propAnim) {
   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]);
@@ -6286,7 +6437,7 @@ function convertToWebApiKeyframes(animDef, unsupportedSet, config) {
   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];
@@ -6899,7 +7050,16 @@ function createAnimatorImpl(doc, adapter, callbacks, containerElement) {
       }
     }
   }
-  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;