@pixodesk/svg-animator-web 1.0.22 → 1.0.26

package/dist/index.cjs

@@ -73,6 +73,7 @@ __export(index_exports, {
   PxGradientType: () => PxGradientType,
   PxGradientUnits: () => PxGradientUnits,
   PxKeyframeSchema: () => PxKeyframeSchema,
+  PxKeyframeValueSchema: () => PxKeyframeValueSchema,
   PxLoopSchema: () => PxLoopSchema,
   PxMaskedByEffectSchema: () => PxMaskedByEffectSchema,
   PxNodeBase: () => PxNodeBase,
@@ -84,9 +85,9 @@ __export(index_exports, {
   PxSvgNodeExtra: () => PxSvgNodeExtra,
   PxTextEffectSchema: () => PxTextEffectSchema,
   PxTextPathEffectSchema: () => PxTextPathEffectSchema,
+  PxTransformByEffectSchema: () => PxTransformByEffectSchema,
   PxTransformPartsSchema: () => PxTransformPartsSchema,
   PxTransformValueSchema: () => PxTransformValueSchema,
-  PxTransformationEffectSchema: () => PxTransformationEffectSchema,
   PxTriggerSchema: () => PxTriggerSchema,
   PxTrimPathEffectSchema: () => PxTrimPathEffectSchema,
   STYLE_ATTR_NAMES: () => STYLE_ATTR_NAMES,
@@ -292,8 +293,9 @@ var Union = class extends Base {
   }
   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) {
@@ -369,6 +371,7 @@ var Obj = class extends Base {
     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();
@@ -509,6 +512,23 @@ var Any = class extends Base {
     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();
@@ -620,6 +640,8 @@ var px = {
   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. */
@@ -629,13 +651,52 @@ var PX_ANIM_SRC_ATTR_NAME = "data-px-animation-src";
 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([
@@ -644,9 +705,49 @@ var INTERNAL_ATTRS = /* @__PURE__ */ new Set([
   "animator",
   "meta",
   "animate",
+  "effects",
   TEXT_ATTR,
   TEXT_CONTENT_ATTR
 ]);
+var PX_TRANSFORM_PART_KEYS = ["translate", "rotate", "scale", "origin"];
+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 }));
+}
+function getChildren(doc) {
+  return doc == null ? void 0 : doc.children;
+}
 var PxEasingOrRefSchema = px.union([
   px.string(),
   px.tuple([px.number(), px.number(), px.number(), px.number()])
@@ -658,13 +759,15 @@ var PxKeyframeValueSchema = implementsInterface()(px.union([
   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(),
@@ -678,16 +781,16 @@ var PxKeyframeSchema = implementsInterface()(px.object({
 }));
 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(),
   autoOrient: px.boolean().optional()
 }));
-var PX_TRANSFORM_PART_KEYS = ["translate", "rotate", "scale", "origin"];
 var PxTransformPartsSchema = implementsInterface()(px.object({
   translate: px.tuple([px.number(), px.number()]).optional(),
   rotate: px.number().optional(),
@@ -697,6 +800,7 @@ var PxTransformPartsSchema = implementsInterface()(px.object({
 }));
 var PxTransformValueSchema = px.union([
   px.string(),
+  PxTransformPartsSchema,
   px.object({ value: PxTransformPartsSchema }),
   PxPropertyAnimationSchema
 ]);
@@ -731,9 +835,11 @@ var PxDefsSchema = implementsInterface()(px.object({
   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(),
@@ -741,9 +847,8 @@ var PxAnimatorConfigSchema = implementsInterface()(px.object({
   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({
@@ -753,26 +858,29 @@ var PxBindingSchema = implementsInterface()(px.object({
 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 PxTransformationEffectSchema = implementsInterface()(px.object({
+var PxAnimatableStringSchema = px.union([
+  px.string(),
+  px.object({ value: px.string() }),
+  PxPropertyAnimationSchema
+]);
+var PxTransformByEffectSchema = implementsInterface()(px.object({
   translate: PxAnimatableVec2Schema.optional(),
   rotate: PxAnimatableNumberSchema.optional(),
   scale: PxAnimatableVec2Schema.optional(),
@@ -780,51 +888,46 @@ var PxTransformationEffectSchema = implementsInterface()(px.object({
   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 PxGradientUnits = {
-  userSpaceOnUse: "userSpaceOnUse",
-  objectBoundingBox: "objectBoundingBox"
-};
-var PxGradientSpreadMethod = {
-  pad: "pad",
-  reflect: "reflect",
-  repeat: "repeat"
-};
-var PxGradientType = {
-  linear: "linear",
-  radial: "radial"
-};
 var PxGradientStopSchema = implementsInterface()(px.object({
   offset: px.number(),
   color: px.string()
@@ -832,39 +935,28 @@ var PxGradientStopSchema = implementsInterface()(px.object({
 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()
 }));
@@ -872,13 +964,12 @@ var PxTextEffectSchema = implementsInterface()(px.object({
   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(),
@@ -902,6 +993,14 @@ function validateNodeEffects(root, opts) {
   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(),
@@ -911,7 +1010,7 @@ var PxNodeBase = px.openObject({
   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);
@@ -919,8 +1018,10 @@ var PxNodeSchema = px.openObject(__spreadProps2(__spreadValues2({}, PxNodeBase._
   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()
 });
@@ -935,35 +1036,10 @@ var PxBezierPathSchema = implementsInterface()(px.object({
   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 isPxElementFileFormatDeep(fileJson) {
   const valid = PxAnimatedSvgDocumentSchema.isValid(fileJson);
   return { valid, errors: valid ? [] : ["Document failed schema validation"] };
 }
-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 getChildren(doc) {
-  return doc == null ? void 0 : doc.children;
-}
 function bezierToSvgPath(path, forceCurves = false) {
   var _a, _b, _c, _d;
   const v = path.v;
@@ -1414,7 +1490,7 @@ function generateNewIds(doc) {
     "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") {
@@ -1452,9 +1528,10 @@ function generateNewIds(doc) {
         } 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);
@@ -1472,14 +1549,14 @@ function generateNewIds(doc) {
   }
   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;
 }
@@ -1568,8 +1645,9 @@ 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.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");
@@ -1577,6 +1655,8 @@ function getNormalizedProps(props) {
       }
       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);
     }
@@ -1974,6 +2054,16 @@ function walkAndMaterialise(node, opts) {
   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 = [];
@@ -2176,7 +2266,7 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
   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);
@@ -2184,7 +2274,7 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
   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 {
@@ -2211,7 +2301,12 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
   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 = [];
@@ -2247,8 +2342,26 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
         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
       };
@@ -2296,7 +2409,7 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
       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);
@@ -2319,9 +2432,14 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
       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];
   }
 }
@@ -2435,20 +2553,23 @@ var _elementIdCounter = 0;
 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;
@@ -2853,7 +2974,7 @@ function partsRecord(part, value, origin) {
   return rec;
 }
 function readAnimatable(raw) {
-  var _a, _b;
+  var _a, _b, _c;
   if (raw === void 0) return {
     kind: "absent"
     /* Absent */
@@ -2863,13 +2984,34 @@ function readAnimatable(raw) {
     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;
@@ -2889,7 +3031,7 @@ function readStaticOrigin(raw, ctx) {
   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) {
@@ -2900,7 +3042,7 @@ function keyframeWith(kf, value) {
   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;
@@ -2936,6 +3078,10 @@ function applyTransformationEffect(node, fx, ctx) {
   } 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) {
@@ -2945,8 +3091,6 @@ function translateHasAutoOrient(translate) {
   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) {
@@ -2987,34 +3131,54 @@ function wrapOrigin(inner, raw, invert) {
   }
   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;
@@ -3068,7 +3232,7 @@ function liftBodyTranslate(node, transformation) {
       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") {
@@ -3087,6 +3251,24 @@ function liftBodyTranslate(node, transformation) {
       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;
 }
@@ -3156,7 +3338,7 @@ function parseTranslateArgs(translateOp) {
   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;
@@ -3182,26 +3364,6 @@ function needsOriginOnOuter(translateAnim) {
   }
   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");
 }
@@ -3222,62 +3384,63 @@ function synthesiseGradientDef(fx, id, ctx) {
     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;
@@ -3352,36 +3515,60 @@ function formatOffset(o) {
   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;
@@ -3488,6 +3675,19 @@ 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) {
+    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) {
@@ -3621,10 +3821,10 @@ function collectMaskAncestorChains(root, ctx) {
   const interestingNodes = /* @__PURE__ */ new Set();
   const collectInterestingNodes = (n) => {
     var _a, _b;
-    const href = (_b = (_a = n.effects) == null ? void 0 : _a.maskedBy) == null ? void 0 : _b.href;
-    if (typeof href === "string") {
+    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);
@@ -3650,8 +3850,9 @@ function extractTranslateOnly(node, ctx) {
   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];
     }
@@ -3699,17 +3900,17 @@ function parseTranslateOnlyFromString(s, ctx) {
 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;
@@ -3732,7 +3933,7 @@ function applyRepeaterEffect(node, fx, ctx) {
   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 };
@@ -3744,10 +3945,13 @@ function applyRepeaterEffect(node, fx, ctx) {
 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);
@@ -3757,63 +3961,50 @@ function synthesisePerCopyFx(fx, i) {
   }
   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,
@@ -3873,8 +4064,10 @@ function applyAllRetimeEffects(root, ctx) {
   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) {
@@ -4117,14 +4310,11 @@ function createPathSampler(d) {
 }
 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 };
 }
@@ -4144,11 +4334,16 @@ function estimateTextAdvance(node) {
 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;
@@ -4204,26 +4399,7 @@ function applyTextPathEffect(node, fx, ctx) {
 }
 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 };
@@ -4411,13 +4587,13 @@ function materialiseGlyphTextHorizontal(node, opts) {
     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") {
@@ -4466,7 +4642,7 @@ function layoutGlyphTextChars(node, opts) {
     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);
   };
@@ -4481,7 +4657,7 @@ function layoutGlyphTextChars(node, opts) {
       boxes.push({ x: pen.x, y: pen.y, width: 0, ascent: ((_d = gf == null ? void 0 : gf.ascent) != null ? _d : 0.9 * upm) * (s.fontSize / upm), fontSize: s.fontSize, line });
     }
   }
-  const rootContent = (_e = str(node[TEXT_ATTR])) != null ? _e : str(node[TEXT_CONTENT_ATTR]);
+  const rootContent = (_e = str(node[TEXT_CONTENT_ATTR])) != null ? _e : str(node[TEXT_ATTR]);
   if (rootContent && !((_f = node.children) == null ? void 0 : _f.length)) renderChars(rootContent, rootStyle);
   const anchor = str(node.textAnchor);
   if (anchor === "middle" || anchor === "end") {
@@ -4509,7 +4685,7 @@ function layoutGlyphTextCharsAlongPath(node, pathD, opts) {
   const walk = (el, parentStyle) => {
     var _a2, _b2, _c;
     const s = resolveStyle2(el, parentStyle);
-    const content = (_a2 = str(el[TEXT_ATTR])) != null ? _a2 : str(el[TEXT_CONTENT_ATTR]);
+    const content = (_a2 = str(el[TEXT_CONTENT_ATTR])) != null ? _a2 : str(el[TEXT_ATTR]);
     if (content && !((_b2 = el.children) == null ? void 0 : _b2.length)) {
       const gf = glyphFontFor(s, glyphs, soleFont, warnings);
       const upm = (gf == null ? void 0 : gf.unitsPerEm) || 1e3;
@@ -4563,7 +4739,7 @@ function collectAlongPathCells(node, glyphs, soleFont, warnings) {
   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) {
@@ -4791,9 +4967,9 @@ function applyTextGlyphsAlongPath(node, ctx, pathD, startOffset, textLength, pat
   }
   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) {
@@ -4814,16 +4990,16 @@ function applyTrimPathEffect(node, trimPath, isCombinedShape, ctx) {
   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);
@@ -4835,18 +5011,18 @@ function applyTrimPathEffect(node, trimPath, isCombinedShape, ctx) {
   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));
@@ -4953,22 +5129,8 @@ function computeAnimAttr(read, map) {
   };
 }
 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) {
@@ -5150,9 +5312,9 @@ function applyPlayerEffects(root) {
     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);
@@ -5170,8 +5332,7 @@ function applyPlayerEffects_exceptRetime(node, ctx) {
   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;
@@ -5191,15 +5352,15 @@ function applyPlayerEffects_exceptRetime(node, ctx) {
   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);
@@ -5209,12 +5370,141 @@ function applyPlayerEffects_retime(node, ctx) {
   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);
@@ -5599,6 +5889,7 @@ function evalTransformValue(v, t) {
   if (typeof v === "string") return parseTransformString(v);
   if (v.keyframes) return partsToMatrix(interpParts(v.keyframes, t));
   if (v.value) return partsToMatrix(v.value);
+  if (typeof v === "object" && !Array.isArray(v)) return partsToMatrix(v);
   return IDENTITY;
 }
 function nodeMatrix(node, t) {
@@ -5733,64 +6024,6 @@ function subtractMultiset(a, b) {
   return extra;
 }
 
-// src/PxAnimatorDOM.ts
-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;
-}
-
 // src/PxAnimatorTriggers.ts
 function setupAnimationTriggers(api, config) {
   const { startOn, outAction = "continue", scrollIntoViewThreshold = 0 } = config;
@@ -5977,10 +6210,12 @@ function createCssKf(kf, t, propName, unsupportedSet) {
   } 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;
@@ -6057,7 +6292,7 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
       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;
@@ -6203,9 +6438,8 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
   return api;
 }
 
-// src/PxAnimator.ts
-function createAnimatorFromConfig(doc, adapter, callbacks, rootElement) {
-  const animatorConfig = getAnimatorConfig(doc) || {};
+// src/PxAnimatorBind.ts
+function finaliseAnimator(animatorConfig, callbacks, make) {
   let apiRef;
   let effectiveCallbacks = callbacks;
   if (animatorConfig.resetOnFinish) {
@@ -6217,29 +6451,99 @@ function createAnimatorFromConfig(doc, adapter, callbacks, rootElement) {
       }
     });
   }
-  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);
+  });
+}
+
+// src/PxAnimatorDOM.ts
+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;
+}
+
+// src/PxAnimatorKeys.ts
+var PX_ANIMATOR_DATA_KEY = "data";
+
+// src/PxAnimator.ts
+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) {
@@ -6254,7 +6558,6 @@ function createAnimatorImpl(doc, adapter, callbacks, containerElement) {
   }
   return createAnimatorFromConfig(doc, adapter, callbacks, rootElement);
 }
-var PX_ANIMATOR_DATA_KEY = "data";
 function createAnimator(options) {
   const { src, data, adapter, callbacks, container } = options;
   if (data !== void 0 && src !== void 0) {
@@ -6363,6 +6666,7 @@ if (typeof window !== "undefined") {
   PxGradientType,
   PxGradientUnits,
   PxKeyframeSchema,
+  PxKeyframeValueSchema,
   PxLoopSchema,
   PxMaskedByEffectSchema,
   PxNodeBase,
@@ -6374,9 +6678,9 @@ if (typeof window !== "undefined") {
   PxSvgNodeExtra,
   PxTextEffectSchema,
   PxTextPathEffectSchema,
+  PxTransformByEffectSchema,
   PxTransformPartsSchema,
   PxTransformValueSchema,
-  PxTransformationEffectSchema,
   PxTriggerSchema,
   PxTrimPathEffectSchema,
   STYLE_ATTR_NAMES,