@pixodesk/svg-animator-web 1.0.21 → 1.0.24

package/dist/index.umd.js

@@ -8,6 +8,7 @@ var PixodeskAnimator = (() => {
   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
   var __hasOwnProp = Object.prototype.hasOwnProperty;
   var __propIsEnum = Object.prototype.propertyIsEnumerable;
+  var __pow = Math.pow;
   var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues = (a, b) => {
     for (var prop in b || (b = {}))
@@ -47,130 +48,22 @@ var PixodeskAnimator = (() => {
   };
   var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-  // src/index.ts
-  var index_exports = {};
-  __export(index_exports, {
-    COLOUR_ATTR_NAMES: () => COLOUR_ATTR_NAMES,
+  // src/index.player.ts
+  var index_player_exports = {};
+  __export(index_player_exports, {
     PX_ANIMATOR_DATA_KEY: () => PX_ANIMATOR_DATA_KEY,
     PX_ANIM_ATTR_NAME: () => PX_ANIM_ATTR_NAME,
     PX_ANIM_SRC_ATTR_NAME: () => PX_ANIM_SRC_ATTR_NAME,
-    PX_TRANSFORM_PART_KEYS: () => PX_TRANSFORM_PART_KEYS,
-    PxAnimatedSvgDocumentSchema: () => PxAnimatedSvgDocumentSchema,
-    PxAnimationDefinitionSchema: () => PxAnimationDefinitionSchema,
-    PxAnimatorConfigSchema: () => PxAnimatorConfigSchema,
     PxAnimatorEngine: () => PxAnimatorEngine,
     PxAnimatorMode: () => PxAnimatorMode,
-    PxAttrValueSchema: () => PxAttrValueSchema,
-    PxBezierPathSchema: () => PxBezierPathSchema,
-    PxBindingSchema: () => PxBindingSchema,
-    PxCloneEffectSchema: () => PxCloneEffectSchema,
-    PxDefsSchema: () => PxDefsSchema,
-    PxEasingOrRefSchema: () => PxEasingOrRefSchema,
-    PxEffectsSchema: () => PxEffectsSchema,
-    PxElementAnimationSchema: () => PxElementAnimationSchema,
-    PxFillGradientEffectSchema: () => PxFillGradientEffectSchema,
-    PxGradientSpreadMethod: () => PxGradientSpreadMethod,
-    PxGradientStopSchema: () => PxGradientStopSchema,
-    PxGradientType: () => PxGradientType,
-    PxGradientUnits: () => PxGradientUnits,
-    PxKeyframeSchema: () => PxKeyframeSchema,
-    PxLoopSchema: () => PxLoopSchema,
-    PxMaskedByEffectSchema: () => PxMaskedByEffectSchema,
-    PxNodeBase: () => PxNodeBase,
-    PxNodeSchema: () => PxNodeSchema,
-    PxPropertyAnimationSchema: () => PxPropertyAnimationSchema,
-    PxRepeaterEffectSchema: () => PxRepeaterEffectSchema,
-    PxRetimeEffectSchema: () => PxRetimeEffectSchema,
-    PxStrokeGradientEffectSchema: () => PxStrokeGradientEffectSchema,
-    PxSvgNodeExtra: () => PxSvgNodeExtra,
-    PxTextEffectSchema: () => PxTextEffectSchema,
-    PxTextPathEffectSchema: () => PxTextPathEffectSchema,
-    PxTransformPartsSchema: () => PxTransformPartsSchema,
-    PxTransformValueSchema: () => PxTransformValueSchema,
-    PxTransformationEffectSchema: () => PxTransformationEffectSchema,
-    PxTriggerSchema: () => PxTriggerSchema,
-    PxTrimPathEffectSchema: () => PxTrimPathEffectSchema,
-    STYLE_ATTR_NAMES: () => STYLE_ATTR_NAMES,
-    TRANSFORM_FN_NAMES: () => TRANSFORM_FN_NAMES,
-    applyPlayerEffects: () => applyPlayerEffects,
-    calcAnimationValues: () => calcAnimationValues,
-    camelCaseToKebabWordIfNeeded: () => camelCaseToKebabWordIfNeeded,
-    collectSampleTimes: () => collectSampleTimes,
     createAnimator: () => createAnimator,
     createAnimatorImpl: () => createAnimatorImpl,
-    createBasicFrameLoopAnimator: () => createBasicFrameLoopAnimator,
-    createFrameLoopAnimator: () => createFrameLoopAnimator,
-    createPathSampler: () => createPathSampler,
-    createWebApiAnimator: () => createWebApiAnimator,
-    describeSchema: () => describeSchema,
-    diffInEffect: () => diffInEffect,
-    evaluateMotionPathSegment: () => evaluateMotionPathSegment,
-    extendedPathForBrowser: () => extendedPathForBrowser,
     generateNewIds: () => generateNewIds,
-    getAnimatorConfig: () => getAnimatorConfig,
-    getBindings: () => getBindings,
-    getChildren: () => getChildren,
-    getDefs: () => getDefs,
-    getNormalizedProps: () => getNormalizedProps,
-    isPxElementFileFormat: () => isPxElementFileFormat,
-    isPxElementFileFormatDeep: () => isPxElementFileFormatDeep,
-    jsonElementFactory: () => jsonElementFactory,
-    layoutGlyphTextChars: () => layoutGlyphTextChars,
     loadTagAnimators: () => loadTagAnimators,
-    materialiseAllInTree: () => materialiseAllInTree,
-    materialiseAnimatedUseInstances: () => materialiseAnimatedUseInstances,
-    materialiseGlyphText: () => materialiseGlyphText,
-    materialiseGlyphTextAlongPath: () => materialiseGlyphTextAlongPath,
-    materialiseGlyphTextHorizontal: () => materialiseGlyphTextHorizontal,
-    materialiseInternalLoopsInPropAnim: () => materialiseInternalLoopsInPropAnim,
-    materialiseInternalLoopsInTree: () => materialiseInternalLoopsInTree,
-    materialiseMotionPathInPropAnim: () => materialiseMotionPathInPropAnim,
-    materialiseMotionPathsInTree: () => materialiseMotionPathsInTree,
-    normalizeDocument: () => getNormalisedBindings,
-    propAnimIsMotionPath: () => propAnimIsMotionPath,
-    px: () => px,
-    renderNode: () => renderNode,
-    schemaKeys: () => schemaKeys,
-    setupAnimationTriggers: () => setupAnimationTriggers,
-    shiftAnimatable: () => shiftAnimatable,
-    toRGBA: () => toRGBA,
-    validateNodeEffects: () => validateNodeEffects,
-    visualModelAt: () => visualModelAt
+    setupAnimationTriggers: () => setupAnimationTriggers
   });
 
-  // ../svg-animator-core/dist/index.js
-  var __defProp2 = Object.defineProperty;
-  var __defProps2 = Object.defineProperties;
-  var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
-  var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-  var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
-  var __pow = Math.pow;
-  var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues2 = (a, b) => {
-    for (var prop in b || (b = {}))
-      if (__hasOwnProp2.call(b, prop))
-        __defNormalProp2(a, prop, b[prop]);
-    if (__getOwnPropSymbols2)
-      for (var prop of __getOwnPropSymbols2(b)) {
-        if (__propIsEnum2.call(b, prop))
-          __defNormalProp2(a, prop, b[prop]);
-      }
-    return a;
-  };
-  var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
-  var __objRest2 = (source, exclude) => {
-    var target = {};
-    for (var prop in source)
-      if (__hasOwnProp2.call(source, prop) && exclude.indexOf(prop) < 0)
-        target[prop] = source[prop];
-    if (source != null && __getOwnPropSymbols2)
-      for (var prop of __getOwnPropSymbols2(source)) {
-        if (exclude.indexOf(prop) < 0 && __propIsEnum2.call(source, prop))
-          target[prop] = source[prop];
-      }
-    return target;
-  };
+  // ../svg-animator-core/src/PxSchema.ts
   function pathStr(path) {
     if (!path.length) return ".";
     let result = "";
@@ -292,8 +185,9 @@ var PixodeskAnimator = (() => {
     }
     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 +263,7 @@ var PixodeskAnimator = (() => {
       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();
@@ -392,7 +287,7 @@ var PixodeskAnimator = (() => {
     }
     sanitize(raw) {
       const src = raw && typeof raw === "object" && !Array.isArray(raw) ? raw : {};
-      const out = __spreadValues2({}, src);
+      const out = __spreadValues({}, src);
       for (const key of Object.keys(this._shape)) {
         out[key] = this._shape[key].sanitize(src[key]);
       }
@@ -509,6 +404,23 @@ var PixodeskAnimator = (() => {
       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();
@@ -562,20 +474,6 @@ var PixodeskAnimator = (() => {
   function implementsInterface() {
     return (schema) => schema;
   }
-  function schemaKeys(schema) {
-    return Object.fromEntries(
-      Object.keys(schema["_shape"]).map((k) => [k, k])
-    );
-  }
-  function describeSchema(schema) {
-    var _a;
-    const s = schema;
-    if ("_shape" in s) return { kind: "shape", shape: s._shape };
-    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() };
-    return { kind: "leaf" };
-  }
   var px = {
     /** Matches a string. Default: '' or provided value. */
     string: (defaultVal = "") => new Str(defaultVal),
@@ -613,29 +511,72 @@ var PixodeskAnimator = (() => {
      * @example
      * const PxSvgNodeSchema = px.extendedObject(PxNodeBase, { width: px.number().optional() });
      */
-    extendedObject: (base, extra) => new Obj(__spreadValues2(__spreadValues2({}, base._shape), extra)),
+    extendedObject: (base, extra) => new Obj(__spreadValues(__spreadValues({}, base._shape), extra)),
     /** Array whose unrecoverable items are filtered out. Default: []. */
     array: (item) => new Arr(item),
     /** String-keyed record whose unrecoverable values are dropped. Default: {}. */
     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. */
     lazy: (fn, defaultVal) => new Lazy(fn, defaultVal)
   };
+
+  // ../svg-animator-core/src/PxAnimatorConstants.ts
   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 +585,47 @@ var PixodeskAnimator = (() => {
     "animator",
     "meta",
     "animate",
+    "effects",
     TEXT_ATTR,
     TEXT_CONTENT_ATTR
   ]);
+  var PxGradientUnits = {
+    userSpaceOnUse: "userSpaceOnUse",
+    objectBoundingBox: "objectBoundingBox"
+  };
+  var PxGradientSpreadMethod = {
+    pad: "pad",
+    reflect: "reflect",
+    repeat: "repeat"
+  };
+  var PxGradientType = {
+    linear: "linear",
+    radial: "radial"
+  };
+  function isPxElementFileFormat(fileJson) {
+    if (!(fileJson && typeof fileJson === "object" && !Array.isArray(fileJson))) {
+      return false;
+    }
+    return fileJson["type"] === "svg";
+  }
+  function getAnimatorConfig(doc) {
+    var _a;
+    return (doc == null ? void 0 : doc.animator) || ((_a = doc == null ? void 0 : doc.meta) == null ? void 0 : _a.animator);
+  }
+  function getDefs(doc) {
+    var _a;
+    if (!doc) return void 0;
+    return (_a = getAnimatorConfig(doc)) == null ? void 0 : _a.definitions;
+  }
+  function getBindings(doc) {
+    var _a;
+    if (!doc) return void 0;
+    const animateById = (_a = getAnimatorConfig(doc)) == null ? void 0 : _a.animateById;
+    if (!animateById) return void 0;
+    return Object.entries(animateById).map(([id, anim]) => ({ id, animate: anim }));
+  }
+
+  // ../svg-animator-core/src/PxAnimatorTypes.ts
   var PxEasingOrRefSchema = px.union([
     px.string(),
     px.tuple([px.number(), px.number(), px.number(), px.number()])
@@ -658,13 +637,15 @@ var PixodeskAnimator = (() => {
     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 +659,16 @@ var PixodeskAnimator = (() => {
   }));
   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 +678,7 @@ var PixodeskAnimator = (() => {
   }));
   var PxTransformValueSchema = px.union([
     px.string(),
+    PxTransformPartsSchema,
     px.object({ value: PxTransformPartsSchema }),
     PxPropertyAnimationSchema
   ]);
@@ -731,9 +713,11 @@ var PixodeskAnimator = (() => {
     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,8 +725,8 @@ var PixodeskAnimator = (() => {
     trigger: PxTriggerSchema.optional(),
     resetOnFinish: px.boolean().optional(),
     definitions: PxDefsSchema.optional(),
-    animate: px.record(PxElementAnimationSchema).optional(),
-    debug: px.boolean().optional(),
+    animateById: px.record(PxElementAnimationSchema).optional(),
+    timelineSource: px.string().optional(),
     debugInstName: px.string().optional()
   }));
   var PxBindingSchema = implementsInterface()(px.object({
@@ -752,26 +736,29 @@ var PixodeskAnimator = (() => {
   var PxAttrValueSchema = px.union([
     px.string(),
     px.number(),
-    px.object({ value: px.any() }),
-    PxPropertyAnimationSchema
+    px.array(px.number()),
+    // Structured static — `{value: …}` (read-accepted transitional spelling, S1).
+    // `defined`, not `any`: the KEY's presence is what identifies this branch (V6).
+    px.object({ value: px.defined() }),
+    // Bare transform parts record — the canonical static `transform` on the wire (T2).
+    PxTransformPartsSchema
   ]);
   var PxAnimatableNumberSchema = px.union([
     px.number(),
     px.object({ value: px.number() }),
-    px.object({
-      keyframes: px.array(PxKeyframeSchema),
-      autoOrient: px.boolean().optional()
-    })
+    PxPropertyAnimationSchema
   ]);
   var PxAnimatableVec2Schema = px.union([
     px.tuple([px.number(), px.number()]),
     px.object({ value: px.tuple([px.number(), px.number()]) }),
-    px.object({
-      keyframes: px.array(PxKeyframeSchema),
-      autoOrient: px.boolean().optional()
-    })
+    PxPropertyAnimationSchema
+  ]);
+  var PxAnimatableStringSchema = px.union([
+    px.string(),
+    px.object({ value: px.string() }),
+    PxPropertyAnimationSchema
   ]);
-  var PxTransformationEffectSchema = implementsInterface()(px.object({
+  var PxTransformByEffectSchema = implementsInterface()(px.object({
     translate: PxAnimatableVec2Schema.optional(),
     rotate: PxAnimatableNumberSchema.optional(),
     scale: PxAnimatableVec2Schema.optional(),
@@ -779,51 +766,46 @@ var PixodeskAnimator = (() => {
     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()
@@ -831,27 +813,28 @@ var PixodeskAnimator = (() => {
   var PxAnimatableGradientStopsSchema = px.union([
     px.array(PxGradientStopSchema),
     px.object({ value: px.array(PxGradientStopSchema) }),
-    px.object({ keyframes: px.array(PxKeyframeSchema) })
+    PxPropertyAnimationSchema
   ]);
   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(),
+    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()
   }));
@@ -859,13 +842,12 @@ var PixodeskAnimator = (() => {
     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(),
@@ -889,6 +871,14 @@ var PixodeskAnimator = (() => {
     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(),
@@ -898,11 +888,11 @@ var PixodeskAnimator = (() => {
     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);
-  var PxNodeSchema = px.openObject(__spreadProps2(__spreadValues2({}, PxNodeBase._shape), {
+  var PxNodeSchema = px.openObject(__spreadProps(__spreadValues({}, PxNodeBase._shape), {
     children: px.lazy(() => px.array(PxNodeSchema), []).optional()
   }), PxAttrValueSchema);
   var PxSvgNodeExtra = px.object({
@@ -911,7 +901,7 @@ var PixodeskAnimator = (() => {
     viewBox: px.string().optional(),
     animator: PxAnimatorConfigSchema.optional()
   });
-  var PxAnimatedSvgDocumentSchema = px.openObject(__spreadProps2(__spreadValues2(__spreadValues2({}, PxNodeBase._shape), PxSvgNodeExtra._shape), {
+  var PxAnimatedSvgDocumentSchema = px.openObject(__spreadProps(__spreadValues(__spreadValues({}, PxNodeBase._shape), PxSvgNodeExtra._shape), {
     type: px.literal("svg"),
     // override string → literal to require 'svg'
     children: px.array(PxNodeSchema).optional()
@@ -922,35 +912,8 @@ var PixodeskAnimator = (() => {
     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;
-  }
+
+  // ../svg-animator-core/src/PxAnimatorUtil.ts
   function bezierToSvgPath(path, forceCurves = false) {
     var _a, _b, _c, _d;
     const v = path.v;
@@ -1365,6 +1328,8 @@ var PixodeskAnimator = (() => {
     const flipped = [easing[1], easing[0], easing[3], easing[2]];
     return cubicBezier(flipped);
   }
+
+  // ../svg-animator-core/src/PxIdUtil.ts
   var _idCounter = 0;
   function generateUniqueId() {
     const timestamp = Date.now().toString(36);
@@ -1401,7 +1366,7 @@ var PixodeskAnimator = (() => {
       "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") {
@@ -1439,9 +1404,10 @@ var PixodeskAnimator = (() => {
           } 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);
@@ -1459,14 +1425,14 @@ var PixodeskAnimator = (() => {
     }
     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 = __spreadProps(__spreadValues({}, cloned.animator), { animateById: updatedAnimate });
     }
     return cloned;
   }
@@ -1476,6 +1442,8 @@ var PixodeskAnimator = (() => {
       return newId ? "url(#" + newId + ")" : match;
     });
   }
+
+  // ../svg-animator-core/src/PxNodeProps.ts
   var DISALLOWED_SVG_TAGS_LOWER = /* @__PURE__ */ new Set([
     "script",
     "foreignobject"
@@ -1555,8 +1523,9 @@ var PixodeskAnimator = (() => {
       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");
@@ -1564,12 +1533,16 @@ var PixodeskAnimator = (() => {
         }
         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);
       }
     }
     return propsCopy;
   }
+
+  // ../svg-animator-core/src/PxMotionPath.ts
   function getKfTranslate(kf) {
     var _a;
     const v = (_a = kf.value) != null ? _a : kf.v;
@@ -1951,16 +1924,28 @@ var PixodeskAnimator = (() => {
       if (transformAnim && typeof transformAnim === "object" && propAnimIsMotionPath(transformAnim)) {
         const materialised = materialiseMotionPathInPropAnim(transformAnim, opts);
         if (materialised !== transformAnim) {
-          newAnimate = __spreadProps2(__spreadValues2({}, animDef), { transform: materialised });
+          newAnimate = __spreadProps(__spreadValues({}, animDef), { transform: materialised });
         }
       }
     }
     if (!newChildren && !newAnimate) return null;
-    const cloned = __spreadValues2({}, node);
+    const cloned = __spreadValues({}, node);
     if (newChildren) cloned.children = newChildren;
     if (newAnimate) cloned.animate = newAnimate;
     return cloned;
   }
+
+  // ../svg-animator-core/src/PxDefinitions.ts
+  var LOOP_JUMP_SHIFT_MS = 10;
+  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 = [];
@@ -2163,7 +2148,7 @@ var PixodeskAnimator = (() => {
     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);
@@ -2171,7 +2156,7 @@ var PixodeskAnimator = (() => {
     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 {
@@ -2198,7 +2183,10 @@ var PixodeskAnimator = (() => {
     const remainder = fillDuration - fullReps * segDuration;
     const partialFraction = remainder / segDuration;
     const looped = [];
+    const separateBoundary = loop.extend !== PxLoopExtend.before;
+    const originalTerminalKf = keyframes[keyframes.length - 1];
     function appendRep(repStart, isReversed, partial) {
+      var _a2;
       let entries;
       if (isReversed) {
         entries = [];
@@ -2234,8 +2222,17 @@ var PixodeskAnimator = (() => {
           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)) 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
         };
@@ -2283,7 +2280,7 @@ var PixodeskAnimator = (() => {
         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);
@@ -2306,7 +2303,7 @@ var PixodeskAnimator = (() => {
         appendRep(repStart, isReversed, partialFraction);
       }
     }
-    if (loop.before) {
+    if (loop.extend === PxLoopExtend.before) {
       return [...looped, ...keyframes];
     } else {
       return [...keyframes, ...looped];
@@ -2407,13 +2404,13 @@ var PixodeskAnimator = (() => {
         const propAnim = animDef[propName];
         const materialised = materialiseInternalLoopsInPropAnim(propName, propAnim, duration);
         if (materialised !== propAnim) {
-          if (!newAnimate) newAnimate = __spreadValues2({}, animDef);
+          if (!newAnimate) newAnimate = __spreadValues({}, animDef);
           newAnimate[propName] = materialised;
         }
       }
     }
     if (!newChildren && !newAnimate) return null;
-    const cloned = __spreadValues2({}, node);
+    const cloned = __spreadValues({}, node);
     if (newChildren) cloned.children = newChildren;
     if (newAnimate) cloned.animate = newAnimate;
     return cloned;
@@ -2422,7 +2419,7 @@ var PixodeskAnimator = (() => {
   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)) {
       const normalizedKfs = normalizeKeyframes(propName, propAnim, duration, defs);
@@ -2430,12 +2427,12 @@ var PixodeskAnimator = (() => {
         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;
@@ -2600,12 +2597,12 @@ var PixodeskAnimator = (() => {
       cssValue = "scale(" + v.join(",") + ")";
       cssAttrName = "transform";
     } else {
-      const num2 = interpolateNum(
+      const num = interpolateNum(
         +(prevV || 0),
         +(nextV || 0),
         localProgress
       );
-      cssValue = num2;
+      cssValue = num;
     }
     if (PCT_BASED_ATTR_NAMES.has(cssAttrName) && typeof cssValue === "number") {
       cssValue = cssValue * 100 + "%";
@@ -2622,6 +2619,8 @@ var PixodeskAnimator = (() => {
     }
     return result;
   }
+
+  // ../svg-animator-core/src/PxNodeCloneUtil.ts
   function deepClonePxNode(value) {
     if (value === null || typeof value !== "object") return value;
     if (Array.isArray(value)) return value.map(deepClonePxNode);
@@ -2684,6 +2683,8 @@ var PixodeskAnimator = (() => {
     }
     return gNode;
   }
+
+  // ../svg-animator-core/src/PxAnimatorUseMaterialiser.ts
   function materialiseAnimatedUseInstances(root) {
     var _a;
     const idMap = buildIdMap(root);
@@ -2697,7 +2698,7 @@ var PixodeskAnimator = (() => {
     if (defsCollector.length === 0) return walked;
     const defsNode = { type: "defs", children: defsCollector };
     const newChildren = [...(_a = walked.children) != null ? _a : [], defsNode];
-    return __spreadProps2(__spreadValues2({}, walked), { children: newChildren });
+    return __spreadProps(__spreadValues({}, walked), { children: newChildren });
   }
   function readRootViewport(root) {
     const vb = parseViewBox(root.viewBox);
@@ -2775,7 +2776,7 @@ var PixodeskAnimator = (() => {
     const useH = (_d = (_c = numericAttr(useNode.height)) != null ? _c : symbolViewBox == null ? void 0 : symbolViewBox[3]) != null ? _d : rootViewport[1];
     const rewrittenClone = clone2.type === "symbol" ? rewriteSymbolRootToGroup(clone2, genId3, defsCollector, useW, useH) : clone2;
     const materialisedClone = walkAndMaterialise2(rewrittenClone, idMap, animatedIds, genId3, defsCollector, rootViewport);
-    const newNode = __spreadProps2(__spreadValues2({}, useNode), { type: "g", children: [materialisedClone] });
+    const newNode = __spreadProps(__spreadValues({}, useNode), { type: "g", children: [materialisedClone] });
     delete newNode.href;
     delete newNode.width;
     delete newNode.height;
@@ -2783,7 +2784,7 @@ var PixodeskAnimator = (() => {
   }
   function rewriteSymbolRootToGroup(symbolNode, genId3, defsCollector, useW, useH) {
     const viewBox = parseViewBox(symbolNode.viewBox);
-    const g = __spreadProps2(__spreadValues2({}, symbolNode), { type: "g" });
+    const g = __spreadProps(__spreadValues({}, symbolNode), { type: "g" });
     delete g.viewBox;
     delete g.preserveAspectRatio;
     delete g.width;
@@ -2828,38 +2829,75 @@ var PixodeskAnimator = (() => {
       if (m !== ch) changed = true;
       return m;
     });
-    return changed ? __spreadProps2(__spreadValues2({}, node), { children: newChildren }) : node;
+    return changed ? __spreadProps(__spreadValues({}, node), { children: newChildren }) : node;
   }
+
+  // ../svg-animator-core/src/effects/transformParts.ts
   function partsRecord(part, value, origin) {
     const rec = {};
-    if (part === "translate") rec.translate = value;
-    else if (part === "rotate") rec.rotate = value;
-    else if (part === "skew") rec.skew = value;
+    if (part === "translate" /* Translate */) rec.translate = value;
+    else if (part === "rotate" /* Rotate */) rec.rotate = value;
+    else if (part === "skew" /* Skew */) rec.skew = value;
     else rec.scale = value;
-    if (origin && part !== "translate") rec.origin = origin;
+    if (origin && part !== "translate" /* Translate */) rec.origin = origin;
     return rec;
   }
   function readAnimatable(raw) {
-    if (raw === void 0) return {
-      kind: "absent"
-      /* Absent */
-    };
-    if (Array.isArray(raw)) return { kind: "static", value: raw };
+    var _a, _b, _c;
+    if (raw === void 0) return { kind: "absent" /* Absent */ };
+    if (Array.isArray(raw)) return { kind: "static" /* Static */, value: raw };
     if (typeof raw === "object") {
       const obj = raw;
-      if (obj.keyframes) {
-        return { kind: "animated", keyframes: obj.keyframes, autoOrient: obj.autoOrient, loop: obj.loop };
+      const kfs = (_a = obj.keyframes) != null ? _a : obj.kfs;
+      if (kfs) {
+        const out = { kind: "animated" /* 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" /* Animated */) out.base = base;
+        return out;
       }
-      if (obj.value !== void 0) return { kind: "static", value: obj.value };
+      const staticValue = (_c = obj.value) != null ? _c : obj.v;
+      if (staticValue !== void 0) return { kind: "static" /* Static */, value: staticValue };
+    }
+    return { kind: "static" /* 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" /* Absent */) return;
+    if (read.kind === "static" /* Static */) {
+      node[attrName] = toOut(read.value);
+      return;
     }
-    return { kind: "static", value: raw };
+    const prevAnimate = node.animate && typeof node.animate === "object" && !Array.isArray(node.animate) ? node.animate : void 0;
+    const animate = __spreadValues({}, 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;
+    if (k.t === void 0 && k.v === void 0 && k.e === void 0 && k.to === void 0 && k.ti === void 0) {
+      return kf;
+    }
+    const out = __spreadValues({}, k);
+    if (out.time === void 0 && k.t !== void 0) out.time = k.t;
+    if (out.value === void 0 && k.v !== void 0) out.value = k.v;
+    if (out.easing === void 0 && k.e !== void 0) out.easing = k.e;
+    if (out.tangentOut === void 0 && k.to !== void 0) out.tangentOut = k.to;
+    if (out.tangentIn === void 0 && k.ti !== void 0) out.tangentIn = k.ti;
+    return out;
   }
   function readStaticOrigin(raw, ctx) {
     var _a;
     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");
+    if (o.kind === "absent" /* Absent */) return void 0;
+    if (o.kind === "static" /* Static */) return o.value;
+    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) {
@@ -2870,7 +2908,9 @@ var PixodeskAnimator = (() => {
     if (kf.tangentIn !== void 0) out.tangentIn = kf.tangentIn;
     return out;
   }
-  function applyTransformationEffect(node, fx, ctx) {
+
+  // ../svg-animator-core/src/effects/transformationEffect.ts
+  function applyTransformByEffect(node, fx, ctx) {
     if (!fx) return node;
     delete node.transform;
     let n = node;
@@ -2880,9 +2920,9 @@ var PixodeskAnimator = (() => {
       /*invert=*/
       true
     );
-    n = wrapTransformPart(n, "scale", normalizeScale(fx.scale), ctx);
-    n = wrapTransformPart(n, "skew", fx.skew, ctx);
-    n = wrapTransformPart(n, "rotate", fx.rotate, ctx);
+    n = wrapTransformPart(n, "scale" /* Scale */, normalizeScale(fx.scale), ctx);
+    n = wrapTransformPart(n, "skew" /* Skew */, fx.skew, ctx);
+    n = wrapTransformPart(n, "rotate" /* Rotate */, fx.rotate, ctx);
     n = wrapOrigin(
       n,
       fx.origin,
@@ -2896,7 +2936,7 @@ var PixodeskAnimator = (() => {
         /*invert=*/
         true
       );
-      n = wrapTransformPart(n, "translate", fx.translate, ctx);
+      n = wrapTransformPart(n, "translate" /* Translate */, fx.translate, ctx);
       n = wrapOrigin(
         n,
         fx.origin,
@@ -2904,7 +2944,11 @@ var PixodeskAnimator = (() => {
         false
       );
     } else {
-      n = wrapTransformPart(n, "translate", fx.translate, ctx);
+      n = wrapTransformPart(n, "translate" /* Translate */, fx.translate, ctx);
+    }
+    if (n !== node && node.id) {
+      n.id = node.id;
+      delete node.id;
     }
     return n;
   }
@@ -2915,17 +2959,15 @@ var PixodeskAnimator = (() => {
     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) {
     if (raw === void 0) return inner;
     const v = readAnimatable(raw);
-    if (v.kind === "static") {
+    if (v.kind === "static" /* Static */) {
       return { type: "g", transform: { value: partsRecord(part, v.value, void 0) }, children: [inner] };
     }
-    if (v.kind === "animated") {
+    if (v.kind === "animated" /* Animated */) {
       const animTr = { keyframes: v.keyframes.map((kf) => keyframeWith(kf, partsRecord(part, kf.value, void 0))) };
       if (v.autoOrient) animTr.autoOrient = true;
       if (v.loop !== void 0) animTr.loop = v.loop;
@@ -2941,12 +2983,12 @@ var PixodeskAnimator = (() => {
     if (raw === void 0) return inner;
     const v = readAnimatable(raw);
     const sign = (value) => invert ? [-value[0], -value[1]] : value;
-    if (v.kind === "absent") return inner;
-    if (v.kind === "static") {
+    if (v.kind === "absent" /* Absent */) return inner;
+    if (v.kind === "static" /* Static */) {
       if (v.value[0] === 0 && v.value[1] === 0) return inner;
       return { type: "g", transform: { value: { translate: sign(v.value) } }, children: [inner] };
     }
-    if (v.kind === "animated") {
+    if (v.kind === "animated" /* Animated */) {
       const animTr = { keyframes: v.keyframes.map((kf) => keyframeWith(kf, { translate: sign(kf.value) })) };
       if (v.loop !== void 0) animTr.loop = v.loop;
       return {
@@ -2957,34 +2999,58 @@ var PixodeskAnimator = (() => {
     }
     return inner;
   }
+
+  // ../svg-animator-core/src/effects/util.ts
+  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"));
+  }
+
+  // ../svg-animator-core/src/effects/contentRefSplit.ts
   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;
@@ -3038,7 +3104,7 @@ var PixodeskAnimator = (() => {
         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") {
@@ -3057,6 +3123,24 @@ var PixodeskAnimator = (() => {
         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 = __spreadValues({}, 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;
   }
@@ -3126,7 +3210,7 @@ var PixodeskAnimator = (() => {
     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;
@@ -3152,26 +3236,8 @@ var PixodeskAnimator = (() => {
     }
     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"));
-  }
+
+  // ../svg-animator-core/src/effects/gradientEffect.ts
   function applyFillGradientEffect(node, fx, ctx) {
     return applyGradient(node, fx, ctx, "fill");
   }
@@ -3192,62 +3258,63 @@ var PixodeskAnimator = (() => {
       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" /* Absent */) return;
+    if (read.kind === "static" /* 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" /* 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" /* Absent */) return [];
+    if (read.kind === "static" /* 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;
@@ -3321,37 +3388,65 @@ var PixodeskAnimator = (() => {
     const pct = Math.round(o * 1e3) / 10;
     return pct + "%";
   }
+
+  // ../svg-animator-core/src/effects/clipPathEffect.ts
   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" /* Absent */) {
+      if (read.kind === "static" /* 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;
+  }
+
+  // ../svg-animator-core/src/effects/maskedByEffect.ts
+  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;
@@ -3360,22 +3455,22 @@ var PixodeskAnimator = (() => {
     if (!fx) return inner;
     const origin = readStaticOrigin(fx.origin, ctx);
     let n = inner;
-    n = wrapInversePart(n, "translate", fx.translate, void 0, ctx);
-    n = wrapInversePart(n, "rotate", fx.rotate, origin, ctx);
-    n = wrapInversePart(n, "scale", fx.scale, origin, ctx);
+    n = wrapInversePart(n, "translate" /* Translate */, fx.translate, void 0, ctx);
+    n = wrapInversePart(n, "rotate" /* Rotate */, fx.rotate, origin, ctx);
+    n = wrapInversePart(n, "scale" /* Scale */, fx.scale, origin, ctx);
     return n;
   }
   function wrapInversePart(inner, part, raw, origin, ctx) {
     if (raw === void 0) return inner;
-    const normalisedRaw = part === "scale" && Array.isArray(raw) ? [raw[0] / 100, raw[1] / 100] : raw;
+    const normalisedRaw = part === "scale" /* Scale */ && Array.isArray(raw) ? [raw[0] / 100, raw[1] / 100] : raw;
     const v = readAnimatable(normalisedRaw);
-    if (v.kind === "static") {
+    if (v.kind === "static" /* Static */) {
       return { type: "g", transform: { value: partsRecord(part, invertPartValue(part, v.value), origin) }, children: [inner] };
     }
-    if (v.kind === "animated") {
+    if (v.kind === "animated" /* Animated */) {
       const animTr = { keyframes: v.keyframes.map((kf) => {
         const out = keyframeWith(kf, partsRecord(part, invertPartValue(part, kf.value), origin));
-        return part === "translate" ? __spreadValues2(__spreadValues2({}, out), negatedSpatialTangents(kf)) : out;
+        return part === "translate" /* Translate */ ? __spreadValues(__spreadValues({}, out), negatedSpatialTangents(kf)) : out;
       }) };
       if (v.loop !== void 0) animTr.loop = v.loop;
       return {
@@ -3387,8 +3482,8 @@ var PixodeskAnimator = (() => {
     return inner;
   }
   function invertPartValue(part, value) {
-    if (part === "translate") return [-value[0], -value[1]];
-    if (part === "rotate") return -value;
+    if (part === "translate" /* Translate */) return [-value[0], -value[1]];
+    if (part === "rotate" /* Rotate */) return -value;
     return [1 / value[0], 1 / value[1]];
   }
   function negatedSpatialTangents(kf) {
@@ -3413,17 +3508,17 @@ var PixodeskAnimator = (() => {
       const v = ((_a = kf.value) != null ? _a : kf.v) || {};
       const baseKf = keyframeWith(kf, void 0);
       if (Array.isArray(v.translate)) {
-        translateKfs.push(__spreadProps2(__spreadValues2(__spreadValues2({}, baseKf), negatedSpatialTangents(kf)), { value: { translate: [-v.translate[0], -v.translate[1]] } }));
+        translateKfs.push(__spreadProps(__spreadValues(__spreadValues({}, baseKf), negatedSpatialTangents(kf)), { value: { translate: [-v.translate[0], -v.translate[1]] } }));
       }
       if (typeof v.rotate === "number") {
         const rec = { rotate: -v.rotate };
         if (Array.isArray(v.origin)) rec.origin = [v.origin[0], v.origin[1]];
-        rotateKfs.push(__spreadProps2(__spreadValues2({}, baseKf), { value: rec }));
+        rotateKfs.push(__spreadProps(__spreadValues({}, baseKf), { value: rec }));
       }
       if (Array.isArray(v.scale)) {
         const rec = { scale: [1 / v.scale[0], 1 / v.scale[1]] };
         if (Array.isArray(v.origin)) rec.origin = [v.origin[0], v.origin[1]];
-        scaleKfs.push(__spreadProps2(__spreadValues2({}, baseKf), { value: rec }));
+        scaleKfs.push(__spreadProps(__spreadValues({}, baseKf), { value: rec }));
       }
     }
     const srcLoop = animTr == null ? void 0 : animTr.loop;
@@ -3458,6 +3553,19 @@ var PixodeskAnimator = (() => {
       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) {
@@ -3591,10 +3699,10 @@ var PixodeskAnimator = (() => {
     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);
@@ -3620,8 +3728,9 @@ var PixodeskAnimator = (() => {
     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];
       }
@@ -3666,21 +3775,25 @@ var PixodeskAnimator = (() => {
     if (droppedNonTranslate) ctx.warnings.push("maskedBy ancestor: non-translate transform in string ignored: " + s);
     return seen ? [x, y] : void 0;
   }
+
+  // ../svg-animator-core/src/effects/refEffect.ts
   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);
   }
+
+  // ../svg-animator-core/src/effects/repeaterEffect.ts
   function applyRepeaterEffect(node, fx, ctx) {
     var _a, _b;
     if (!fx) return node;
@@ -3702,7 +3815,7 @@ var PixodeskAnimator = (() => {
     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 };
@@ -3714,10 +3827,13 @@ var PixodeskAnimator = (() => {
   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);
@@ -3727,63 +3843,52 @@ var PixodeskAnimator = (() => {
     }
     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" /* Absent */) return raw;
+    if (read.kind === "static" /* 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 ? __spreadProps(__spreadValues({}, 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);
   }
+
+  // ../svg-animator-core/src/effects/retimeEffect.ts
   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 = __spreadValues({}, 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,
@@ -3843,8 +3948,10 @@ var PixodeskAnimator = (() => {
     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) {
@@ -3939,6 +4046,8 @@ var PixodeskAnimator = (() => {
       }
     }
   }
+
+  // ../svg-animator-core/src/effects/pathSampler.ts
   var LUT_STEPS = 48;
   var CMD_RE = /[MmLlHhVvCcSsQqTtAaZz]/;
   function tokenize(d) {
@@ -3963,7 +4072,7 @@ var PixodeskAnimator = (() => {
     let pcx = 0, pcy = 0;
     let pqx = 0, pqy = 0;
     let prevCmd = "";
-    const num2 = () => parseFloat(tokens[i++]);
+    const num = () => parseFloat(tokens[i++]);
     const push = (P1, P2, P3) => {
       const P0 = [cx, cy];
       const lut = bezier2D_arcLengthLUT(P0, P1, P2, P3, LUT_STEPS);
@@ -3992,7 +4101,7 @@ var PixodeskAnimator = (() => {
         continue;
       }
       if (U === "M") {
-        const x = num2() + (rel ? cx : 0), y = num2() + (rel ? cy : 0);
+        const x = num() + (rel ? cx : 0), y = num() + (rel ? cy : 0);
         cx = x;
         cy = y;
         sx = x;
@@ -4001,29 +4110,29 @@ var PixodeskAnimator = (() => {
         continue;
       }
       if (U === "L") {
-        pushLine(num2() + (rel ? cx : 0), num2() + (rel ? cy : 0));
+        pushLine(num() + (rel ? cx : 0), num() + (rel ? cy : 0));
       } else if (U === "H") {
-        pushLine(num2() + (rel ? cx : 0), cy);
+        pushLine(num() + (rel ? cx : 0), cy);
       } else if (U === "V") {
-        pushLine(cx, num2() + (rel ? cy : 0));
+        pushLine(cx, num() + (rel ? cy : 0));
       } else if (U === "C") {
-        const p1 = [num2() + (rel ? cx : 0), num2() + (rel ? cy : 0)];
-        const p2 = [num2() + (rel ? cx : 0), num2() + (rel ? cy : 0)];
-        const p3 = [num2() + (rel ? cx : 0), num2() + (rel ? cy : 0)];
+        const p1 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
+        const p2 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
+        const p3 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
         pcx = p2[0];
         pcy = p2[1];
         push(p1, p2, p3);
       } else if (U === "S") {
         const smooth = prevCmd.toUpperCase() === "C" || prevCmd.toUpperCase() === "S";
         const p1 = smooth ? [2 * cx - pcx, 2 * cy - pcy] : [cx, cy];
-        const p2 = [num2() + (rel ? cx : 0), num2() + (rel ? cy : 0)];
-        const p3 = [num2() + (rel ? cx : 0), num2() + (rel ? cy : 0)];
+        const p2 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
+        const p3 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
         pcx = p2[0];
         pcy = p2[1];
         push(p1, p2, p3);
       } else if (U === "Q") {
-        const qc = [num2() + (rel ? cx : 0), num2() + (rel ? cy : 0)];
-        const p3 = [num2() + (rel ? cx : 0), num2() + (rel ? cy : 0)];
+        const qc = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
+        const p3 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
         pqx = qc[0];
         pqy = qc[1];
         const { P1, P2 } = quadToCubic([cx, cy], qc, p3);
@@ -4031,14 +4140,14 @@ var PixodeskAnimator = (() => {
       } else if (U === "T") {
         const smooth = prevCmd.toUpperCase() === "Q" || prevCmd.toUpperCase() === "T";
         const qc = smooth ? [2 * cx - pqx, 2 * cy - pqy] : [cx, cy];
-        const p3 = [num2() + (rel ? cx : 0), num2() + (rel ? cy : 0)];
+        const p3 = [num() + (rel ? cx : 0), num() + (rel ? cy : 0)];
         pqx = qc[0];
         pqy = qc[1];
         const { P1, P2 } = quadToCubic([cx, cy], qc, p3);
         push(P1, P2, p3);
       } else if (U === "A") {
         i += 5;
-        pushLine(num2() + (rel ? cx : 0), num2() + (rel ? cy : 0));
+        pushLine(num() + (rel ? cx : 0), num() + (rel ? cy : 0));
       } else {
         i++;
         continue;
@@ -4085,16 +4194,15 @@ var PixodeskAnimator = (() => {
       }
     };
   }
+
+  // ../svg-animator-core/src/effects/textPathEffect.ts
   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" /* Static */ && typeof read.value === "number") return { min: read.value, max: read.value };
+    if (read.kind === "animated" /* 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 };
   }
@@ -4114,11 +4222,16 @@ var PixodeskAnimator = (() => {
   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" /* Absent */) return v;
+    if (read.kind === "static" /* Static */) return typeof v === "number" ? read.value + by : { value: read.value + by };
+    const out = {
+      keyframes: read.keyframes.map((k) => __spreadProps(__spreadValues({}, 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;
@@ -4174,27 +4287,10 @@ var PixodeskAnimator = (() => {
   }
   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 });
   }
+
+  // ../svg-animator-core/src/effects/elementFactory.ts
   var jsonElementFactory = (type, props, children) => {
     const node = { type };
     for (const k in props) if (props[k] !== void 0) node[k] = props[k];
@@ -4202,6 +4298,8 @@ var PixodeskAnimator = (() => {
     if (arr.length) node.children = arr;
     return node;
   };
+
+  // ../svg-animator-core/src/effects/glyphPathBake.ts
   function fmt(v, decimals) {
     return Math.round(v) === v ? "" + Math.round(v) : v.toFixed(decimals);
   }
@@ -4225,20 +4323,20 @@ var PixodeskAnimator = (() => {
     while ((match = TOKEN_RE.exec(d)) !== null) tokens.push(match[0]);
     let out = "";
     let i = 0;
-    const num2 = () => parseFloat(tokens[i++]);
+    const num = () => parseFloat(tokens[i++]);
     while (i < tokens.length) {
       const cmd = tokens[i++];
       if (cmd === "M" || cmd === "L") {
-        const [x, y] = apply(m, num2(), num2());
+        const [x, y] = apply(m, num(), num());
         out += cmd + pack([x, y], decimals);
       } else if (cmd === "C") {
-        const [x1, y1] = apply(m, num2(), num2());
-        const [x2, y2] = apply(m, num2(), num2());
-        const [x, y] = apply(m, num2(), num2());
+        const [x1, y1] = apply(m, num(), num());
+        const [x2, y2] = apply(m, num(), num());
+        const [x, y] = apply(m, num(), num());
         out += "C" + pack([x1, y1, x2, y2, x, y], decimals);
       } else if (cmd === "Q") {
-        const [x1, y1] = apply(m, num2(), num2());
-        const [x, y] = apply(m, num2(), num2());
+        const [x1, y1] = apply(m, num(), num());
+        const [x, y] = apply(m, num(), num());
         out += "Q" + pack([x1, y1, x, y], decimals);
       } else if (cmd === "Z" || cmd === "z") {
         out += "Z";
@@ -4246,6 +4344,8 @@ var PixodeskAnimator = (() => {
     }
     return out;
   }
+
+  // ../svg-animator-core/src/effects/textGlyphsEffect.ts
   var DEFAULT_FONT_SIZE = 16;
   var TEXT_ATTR_KEYS = [
     "fontFamily",
@@ -4381,13 +4481,13 @@ var PixodeskAnimator = (() => {
       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") {
@@ -4399,141 +4499,13 @@ var PixodeskAnimator = (() => {
     }
     return toGroup(node, buildPaths(placements, create, warnings), create);
   }
-  function layoutGlyphTextChars(node, opts) {
-    var _a, _b, _c, _d, _e, _f;
-    if ((_a = opts.alongPath) == null ? void 0 : _a.pathD) return layoutGlyphTextCharsAlongPath(node, opts.alongPath.pathD, opts);
-    const { glyphs, warnings } = opts;
-    const soleFont = soleFontOf(glyphs);
-    const pen = { x: (_b = parseLen(node.x)) != null ? _b : 0, y: (_c = parseLen(node.y)) != null ? _c : 0 };
-    const boxes = [];
-    const lines = [{ start: pen.x, end: pen.x }];
-    let line = 0;
-    const renderChars = (content, s) => {
-      var _a2;
-      const gf = glyphFontFor(s, glyphs, soleFont, warnings);
-      const upm = (gf == null ? void 0 : gf.unitsPerEm) || 1e3;
-      const scale = s.fontSize / upm;
-      const ascent = ((_a2 = gf == null ? void 0 : gf.ascent) != null ? _a2 : 0.9 * upm) * scale;
-      for (let i = 0; i < content.length; i++) {
-        const ch = content.charAt(i);
-        const g = gf == null ? void 0 : gf.glyphs[ch];
-        const advance = (g ? g.width : 0) * scale + s.letterSpacing + (ch === " " ? s.wordSpacing : 0);
-        boxes.push({ x: pen.x, y: pen.y, width: advance, ascent, fontSize: s.fontSize, line });
-        pen.x += advance;
-        lines[line].end = pen.x;
-      }
-    };
-    const walk = (el, parentStyle) => {
-      var _a2, _b2, _c2, _d2;
-      const s = resolveStyle2(el, parentStyle);
-      const x = parseLen(el.x);
-      const y = parseLen(el.y);
-      if (x !== void 0) {
-        pen.x = x;
-        line = lines.length;
-        lines.push({ start: pen.x, end: pen.x });
-      }
-      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]);
-      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) {
-      const before = boxes.length;
-      walk(ch, rootStyle);
-      if (boxes.length === before) {
-        const s = resolveStyle2(ch, rootStyle);
-        const gf = glyphFontFor(s, glyphs, soleFont);
-        const upm = (gf == null ? void 0 : gf.unitsPerEm) || 1e3;
-        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]);
-    if (rootContent && !((_f = node.children) == null ? void 0 : _f.length)) renderChars(rootContent, rootStyle);
-    const anchor = str(node.textAnchor);
-    if (anchor === "middle" || anchor === "end") {
-      for (const b of boxes) {
-        const w = lines[b.line].end - lines[b.line].start;
-        b.x += anchor === "middle" ? -w / 2 : -w;
-      }
-    }
-    return boxes.map((_g) => {
-      var _h = _g, { line: _l } = _h, b = __objRest2(_h, ["line"]);
-      return b;
-    });
-  }
-  function layoutGlyphTextCharsAlongPath(node, pathD, opts) {
-    var _a, _b;
-    const { glyphs, warnings, alongPath } = opts;
-    const sampler = createPathSampler(pathD);
-    if (!sampler) {
-      warnings == null ? void 0 : warnings.push("textGlyphs: unparsable along-path geometry (caret)");
-      return [];
-    }
-    const soleFont = soleFontOf(glyphs);
-    const chars = [];
-    let adv = 0;
-    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]);
-      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;
-        const scale = s.fontSize / upm;
-        const ascent = ((_c = gf == null ? void 0 : gf.ascent) != null ? _c : 0.9 * upm) * scale;
-        for (let i = 0; i < content.length; i++) {
-          const ch = content.charAt(i);
-          const g = gf == null ? void 0 : gf.glyphs[ch];
-          const glyphW = (g ? g.width : 0) * scale;
-          const advance = glyphW + s.letterSpacing + (ch === " " ? s.wordSpacing : 0);
-          chars.push({ advStart: adv, advEnd: adv + advance, glyphW, ascent, fontSize: s.fontSize });
-          adv += advance;
-        }
-      }
-      if (el.children) for (const ch of el.children) walk(ch, s);
-    };
-    walk(node, rootStyleOf(node));
-    const width = adv;
-    const tlr = readAnimatable(alongPath == null ? void 0 : alongPath.textLength);
-    const tlv = tlr.kind === "animated" ? Number((_a = tlr.keyframes[0]) == null ? void 0 : _a.value) || 0 : tlr.kind === "static" ? Number(tlr.value) || 0 : 0;
-    const k = tlv > 0 && width > 0 ? tlv / width : 1;
-    const so = readAnimatable(alongPath == null ? void 0 : alongPath.startOffset);
-    const { along: alongOffset, perp } = alongPathNodeOffsets(node);
-    const base = alongOffset + (so.kind === "animated" ? Number((_b = so.keyframes[0]) == null ? void 0 : _b.value) || 0 : so.kind === "static" ? Number(so.value) || 0 : 0);
-    const withPerp = (p) => ({
-      x: p.x - perp * Math.sin(p.angle),
-      y: p.y + perp * Math.cos(p.angle),
-      angle: p.angle
-    });
-    return chars.map((c) => {
-      const dStart = base + c.advStart * k;
-      const dEnd = base + c.advEnd * k;
-      const p0 = withPerp(sampler.sampleAtDistance(dStart));
-      const p1 = withPerp(sampler.sampleAtDistance(dEnd));
-      const glyphMid = sampler.sampleAtDistance(base + (c.advStart + c.glyphW / 2) * k);
-      return {
-        x: p0.x,
-        y: p0.y,
-        width: c.advEnd - c.advStart,
-        ascent: c.ascent,
-        fontSize: c.fontSize,
-        endX: p1.x,
-        endY: p1.y,
-        rotation: glyphMid.angle * 180 / Math.PI
-      };
-    });
-  }
   function collectAlongPathCells(node, glyphs, soleFont, warnings) {
     const cells = [];
     let adv = 0;
     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) {
@@ -4613,7 +4585,7 @@ var PixodeskAnimator = (() => {
   function numTrackOf(raw) {
     var _a;
     const r = readAnimatable(raw);
-    if (r.kind === "animated" && r.keyframes.length >= 2) {
+    if (r.kind === "animated" /* Animated */ && r.keyframes.length >= 2) {
       const kfs = [...r.keyframes].sort((k1, k2) => (Number(k1.time) || 0) - (Number(k2.time) || 0));
       const times = kfs.map((kf) => Number(kf.time) || 0);
       const vals = kfs.map((kf) => Number(kf.value) || 0);
@@ -4634,7 +4606,7 @@ var PixodeskAnimator = (() => {
         }
       };
     }
-    const v = r.kind === "animated" ? Number((_a = r.keyframes[0]) == null ? void 0 : _a.value) || 0 : r.kind === "static" ? Number(r.value) || 0 : 0;
+    const v = r.kind === "animated" /* Animated */ ? Number((_a = r.keyframes[0]) == null ? void 0 : _a.value) || 0 : r.kind === "static" /* Static */ ? Number(r.value) || 0 : 0;
     return { animated: false, times: [], at: () => v };
   }
   function mergeTrackTimes(a, b) {
@@ -4662,14 +4634,8 @@ var PixodeskAnimator = (() => {
         return {
           time,
           value: {
-            [
-              "translate"
-              /* Translate */
-            ]: [roundN(x - perp * sin, 3), roundN(y + perp * cos, 3)],
-            [
-              "rotate"
-              /* Rotate */
-            ]: roundN(angle * 180 / Math.PI, 3)
+            ["translate" /* Translate */]: [roundN(x - perp * sin, 3), roundN(y + perp * cos, 3)],
+            ["rotate" /* Rotate */]: roundN(angle * 180 / Math.PI, 3)
           }
         };
       };
@@ -4699,7 +4665,7 @@ var PixodeskAnimator = (() => {
         if (loop !== void 0) op.loop = loop;
         animate.opacity = op;
       }
-      out.push(create("path", __spreadProps2(__spreadValues2({ d }, paintProps(c.paint)), { animate }), []));
+      out.push(create("path", __spreadProps(__spreadValues({ d }, paintProps(c.paint)), { animate }), []));
     }
     return out;
   }
@@ -4725,7 +4691,7 @@ var PixodeskAnimator = (() => {
       else byPaint.set(key, { paint: p.paint, d: baked });
     }
     const out = [];
-    for (const { paint, d } of byPaint.values()) out.push(create("path", __spreadValues2({ d }, paintProps(paint)), []));
+    for (const { paint, d } of byPaint.values()) out.push(create("path", __spreadValues({ d }, paintProps(paint)), []));
     return out;
   }
   function toGroup(node, children, create) {
@@ -4735,17 +4701,13 @@ var PixodeskAnimator = (() => {
       gProps[k] = node[k];
     }
     if (gProps.style && typeof gProps.style === "object") {
-      const style = __spreadValues2({}, gProps.style);
+      const style = __spreadValues({}, gProps.style);
       delete style["white-space"];
       if (Object.keys(style).length) gProps.style = style;
       else delete gProps.style;
     }
     return create("g", gProps, children);
   }
-  function materialiseGlyphText(node, opts) {
-    if (opts.alongPath) return materialiseGlyphTextAlongPath(node, opts.alongPath.pathD, opts.alongPath.startOffset, opts, opts.alongPath.textLength, opts.alongPath.pathOverflow);
-    return materialiseGlyphTextHorizontal(node, opts);
-  }
   function applyTextGlyphsEffect(node, fx, ctx) {
     if (!(fx == null ? void 0 : fx.useGlyphs)) return node;
     if (!ctx.glyphs) {
@@ -4761,9 +4723,11 @@ var PixodeskAnimator = (() => {
     }
     return materialiseGlyphTextAlongPath(node, pathD, startOffset, { glyphs: ctx.glyphs, warnings: ctx.warnings }, textLength, pathOverflow);
   }
-  function applyTrimPathEffect(node, trimPath, isCombinedShape, ctx) {
+
+  // ../svg-animator-core/src/effects/trimPathEffect.ts
+  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) {
@@ -4784,20 +4748,20 @@ var PixodeskAnimator = (() => {
     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 offsetRead = offsetReadRaw.kind === "absent" /* Absent */ ? { kind: "static" /* Static */, value: 0 } : offsetReadRaw;
     const rangeReadRaw = readRangeWithCrossings(trimPath.range);
-    const rangeRead = rangeReadRaw.kind === "absent" ? { kind: "static", value: [0, 1] } : rangeReadRaw;
+    const rangeRead = rangeReadRaw.kind === "absent" /* Absent */ ? { kind: "static" /* Static */, value: [0, 1] } : rangeReadRaw;
     const offsetValues = readScalarValues(offsetRead);
     const minOffset = offsetValues.length ? Math.min(...offsetValues) : 0;
     const maxOffset = offsetValues.length ? Math.max(...offsetValues) : 0;
@@ -4805,18 +4769,18 @@ var PixodeskAnimator = (() => {
     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));
@@ -4825,14 +4789,14 @@ var PixodeskAnimator = (() => {
       const r = replacements.get(n);
       if (r) return r;
       if (Array.isArray(n.children) && n.children.length > 0) {
-        return __spreadProps2(__spreadValues2({}, n), { children: n.children.map(swap) });
+        return __spreadProps(__spreadValues({}, n), { children: n.children.map(swap) });
       }
       return n;
     };
     return swap(node);
   }
   function wrapLeafAsGroup(leaf, children) {
-    const wrapper = __spreadProps2(__spreadValues2({}, leaf), { type: "g", children });
+    const wrapper = __spreadProps(__spreadValues({}, leaf), { type: "g", children });
     delete wrapper.d;
     delete wrapper.strokeDasharray;
     delete wrapper.strokeDashoffset;
@@ -4855,7 +4819,7 @@ var PixodeskAnimator = (() => {
   function collapseLeafWithTrim(leaf, pathLengthPx, startOffsetPct, minMaxOffset, offsetRead, rangeRead) {
     const offsetToDashOffset = makeOffsetToDashOffset(startOffsetPct, pathLengthPx, minMaxOffset);
     const rangeToDasharray = makeRangeToDasharray(pathLengthPx, minMaxOffset);
-    const node = __spreadValues2({}, leaf);
+    const node = __spreadValues({}, leaf);
     delete node.effects;
     applyAttr(node, "strokeDasharray", computeAnimAttr(rangeRead, rangeToDasharray));
     applyAttr(node, "strokeDashoffset", computeAnimAttr(offsetRead, offsetToDashOffset));
@@ -4897,8 +4861,8 @@ var PixodeskAnimator = (() => {
   }
   function readScalarValues(r) {
     var _a;
-    if (r.kind === "absent") return [];
-    if (r.kind === "static") return [r.value];
+    if (r.kind === "absent" /* Absent */) return [];
+    if (r.kind === "static" /* Static */) return [r.value];
     const out = [];
     for (const kf of r.keyframes) {
       const v = (_a = kf.value) != null ? _a : kf.v;
@@ -4907,10 +4871,10 @@ var PixodeskAnimator = (() => {
     return out;
   }
   function computeAnimAttr(read, map) {
-    if (read.kind === "absent") return void 0;
-    if (read.kind === "static") return { kind: "static", value: map(read.value) };
+    if (read.kind === "absent" /* Absent */) return void 0;
+    if (read.kind === "static" /* Static */) return { kind: "static" /* Static */, value: map(read.value) };
     return {
-      kind: "animated",
+      kind: "animated" /* Animated */,
       keyframes: read.keyframes.map((kf) => {
         var _a, _b, _c, _d;
         return {
@@ -4923,29 +4887,15 @@ var PixodeskAnimator = (() => {
     };
   }
   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) {
     var _a, _b, _c, _d, _e, _f;
     const hide = (v) => v[0] === v[1];
-    if (rangeRead.kind === "absent") return void 0;
-    if (rangeRead.kind === "static") return hide(rangeRead.value) ? { kind: "static", value: 0 } : void 0;
+    if (rangeRead.kind === "absent" /* Absent */) return void 0;
+    if (rangeRead.kind === "static" /* Static */) return hide(rangeRead.value) ? { kind: "static" /* Static */, value: 0 } : void 0;
     const kfs = rangeRead.keyframes;
     let anyHide = false;
     let allHide = true;
@@ -4954,7 +4904,7 @@ var PixodeskAnimator = (() => {
       else allHide = false;
     }
     if (!anyHide) return void 0;
-    if (allHide) return { kind: "static", value: 0 };
+    if (allHide) return { kind: "static" /* Static */, value: 0 };
     const out = [];
     for (let i = 0; i < kfs.length; i++) {
       const kf = kfs[i];
@@ -4973,11 +4923,11 @@ var PixodeskAnimator = (() => {
       }
     }
     if (out.length <= 1) return void 0;
-    return { kind: "animated", keyframes: out };
+    return { kind: "animated" /* Animated */, keyframes: out };
   }
   function readRangeWithCrossings(raw) {
     const r = readAnimatable(raw);
-    if (r.kind !== "animated") return r;
+    if (r.kind !== "animated" /* Animated */) return r;
     const kfs = r.keyframes.map((kf) => {
       var _a, _b, _c, _d;
       return {
@@ -4989,7 +4939,7 @@ var PixodeskAnimator = (() => {
     const hasReverse = kfs.some((kf) => kf.value[0] > kf.value[1]);
     if (!hasReverse) {
       return {
-        kind: "animated",
+        kind: "animated" /* Animated */,
         keyframes: kfs.map((kf) => ({ time: kf.time, value: kf.value, easing: kf.easing }))
       };
     }
@@ -5025,7 +4975,7 @@ var PixodeskAnimator = (() => {
       const m = (v[0] + v[1]) / 2;
       out.push({ time: t, value: [m, m] });
     }
-    return { kind: "animated", keyframes: out };
+    return { kind: "animated" /* Animated */, keyframes: out };
   }
   function bisectionForRangeCrossing(prev, cur) {
     const f = (t) => {
@@ -5110,6 +5060,8 @@ var PixodeskAnimator = (() => {
     }
     return void 0;
   }
+
+  // ../svg-animator-core/src/effects/PlayerEffectsUtil.ts
   function applyPlayerEffects(root) {
     var _a, _b;
     const ctx = {
@@ -5120,9 +5072,9 @@ var PixodeskAnimator = (() => {
       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);
@@ -5140,8 +5092,7 @@ var PixodeskAnimator = (() => {
     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;
@@ -5161,15 +5112,15 @@ var PixodeskAnimator = (() => {
     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);
@@ -5179,12 +5130,14 @@ var PixodeskAnimator = (() => {
     applyAllRetimeEffects(node, ctx);
     return node;
   }
+
+  // ../svg-animator-core/src/PxAnimatorMaterialiseAll.ts
   function materialiseAllInTree(doc, engine, opts) {
     var _a, _b;
     let root = applyPlayerEffects(doc).root;
     const duration = (_b = (_a = getAnimatorConfig(root)) == null ? void 0 : _a.duration) != null ? _b : DEFAULT_DURATION_MS;
     root = materialiseInternalLoopsInTree(root, duration);
-    if (engine === PxAnimatorEngine.webapi) {
+    if (engine === PxAnimatorEngine.waapi) {
       root = materialiseMotionPathsInTree(root, opts == null ? void 0 : opts.motionPath);
       root = materialiseAnimatedUseInstances(root);
       root = pruneUnreferencedDefs(root);
@@ -5220,6 +5173,8 @@ var PixodeskAnimator = (() => {
     }
     return root;
   }
+
+  // ../svg-animator-core/src/PxFrameLoop.ts
   function requestFrame(cb) {
     const g = globalThis;
     if (typeof g.requestAnimationFrame === "function") return g.requestAnimationFrame(cb);
@@ -5496,270 +5451,6 @@ var PixodeskAnimator = (() => {
     };
     return api;
   }
-  var IDENTITY = [1, 0, 0, 1, 0, 0];
-  function mul(m, n) {
-    return [
-      m[0] * n[0] + m[2] * n[1],
-      m[1] * n[0] + m[3] * n[1],
-      m[0] * n[2] + m[2] * n[3],
-      m[1] * n[2] + m[3] * n[3],
-      m[0] * n[4] + m[2] * n[5] + m[4],
-      m[1] * n[4] + m[3] * n[5] + m[5]
-    ];
-  }
-  var translateM = (x, y) => [1, 0, 0, 1, x, y];
-  var scaleM = (sx, sy) => [sx, 0, 0, sy, 0, 0];
-  function rotateM(deg) {
-    const r = deg * Math.PI / 180;
-    return [Math.cos(r), Math.sin(r), -Math.sin(r), Math.cos(r), 0, 0];
-  }
-  var skewXM = (deg) => [1, 0, Math.tan(deg * Math.PI / 180), 1, 0, 0];
-  var skewYM = (deg) => [1, Math.tan(deg * Math.PI / 180), 0, 1, 0, 0];
-  function parseTransformString(s) {
-    let m = IDENTITY;
-    const re = /(translate|rotate|scale|matrix|skewX|skewY)\(([^)]*)\)/g;
-    let hit;
-    while (hit = re.exec(s)) {
-      const fn = hit[1];
-      const a = hit[2].split(/[\s,]+/).filter(Boolean).map(Number);
-      if (fn === "translate") m = mul(m, translateM(a[0] || 0, a[1] || 0));
-      else if (fn === "scale") m = mul(m, scaleM(a[0], a.length > 1 ? a[1] : a[0]));
-      else if (fn === "rotate") m = mul(m, rotateM(a[0]));
-      else if (fn === "skewX") m = mul(m, skewXM(a[0]));
-      else if (fn === "skewY") m = mul(m, skewYM(a[0]));
-      else if (fn === "matrix") m = mul(m, [a[0], a[1], a[2], a[3], a[4], a[5]]);
-    }
-    return m;
-  }
-  function partsToMatrix(p) {
-    let m = IDENTITY;
-    if (p.translate) m = mul(m, translateM(p.translate[0], p.translate[1]));
-    const pivot = p.origin && (p.rotate !== void 0 || p.scale);
-    if (pivot) m = mul(m, translateM(p.origin[0], p.origin[1]));
-    if (p.rotate !== void 0) m = mul(m, rotateM(p.rotate));
-    if (p.scale) m = mul(m, scaleM(p.scale[0], p.scale[1]));
-    if (pivot) m = mul(m, translateM(-p.origin[0], -p.origin[1]));
-    return m;
-  }
-  function lerp(a, b, f) {
-    return a + (b - a) * f;
-  }
-  function interpParts(kfs, t) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    if (!kfs.length) return {};
-    if (t <= ((_a = kfs[0].time) != null ? _a : 0)) return kfs[0].value || {};
-    if (t >= ((_b = kfs[kfs.length - 1].time) != null ? _b : 0)) return kfs[kfs.length - 1].value || {};
-    let i = 0;
-    while (i < kfs.length - 1 && ((_c = kfs[i + 1].time) != null ? _c : 0) < t) i++;
-    const a = kfs[i], b = kfs[i + 1];
-    const f = (t - ((_d = a.time) != null ? _d : 0)) / (((_e = b.time) != null ? _e : 0) - ((_f = a.time) != null ? _f : 0) || 1);
-    const va = a.value || {}, vb = b.value || {};
-    const out = {};
-    if (va.translate && vb.translate) out.translate = [lerp(va.translate[0], vb.translate[0], f), lerp(va.translate[1], vb.translate[1], f)];
-    else out.translate = va.translate || vb.translate;
-    if (va.rotate !== void 0 && vb.rotate !== void 0) out.rotate = lerp(va.rotate, vb.rotate, f);
-    else out.rotate = (_g = va.rotate) != null ? _g : vb.rotate;
-    if (va.scale && vb.scale) out.scale = [lerp(va.scale[0], vb.scale[0], f), lerp(va.scale[1], vb.scale[1], f)];
-    else out.scale = va.scale || vb.scale;
-    out.origin = va.origin || vb.origin;
-    return out;
-  }
-  function evalTransformValue(v, t) {
-    if (v === void 0 || v === null) return IDENTITY;
-    if (typeof v === "string") return parseTransformString(v);
-    if (v.keyframes) return partsToMatrix(interpParts(v.keyframes, t));
-    if (v.value) return partsToMatrix(v.value);
-    return IDENTITY;
-  }
-  function nodeMatrix(node, t) {
-    if (node.animate && node.animate.transform) return evalTransformValue(node.animate.transform, t);
-    if (node.transform !== void 0) return evalTransformValue(node.transform, t);
-    return IDENTITY;
-  }
-  function evalScalar(animated, staticVal, fallback, t) {
-    var _a, _b, _c, _d, _e, _f;
-    if (animated && animated.keyframes && animated.keyframes.length) {
-      const kfs = animated.keyframes;
-      if (t <= ((_a = kfs[0].time) != null ? _a : 0)) return kfs[0].value;
-      if (t >= ((_b = kfs[kfs.length - 1].time) != null ? _b : 0)) return kfs[kfs.length - 1].value;
-      let i = 0;
-      while (i < kfs.length - 1 && ((_c = kfs[i + 1].time) != null ? _c : 0) < t) i++;
-      const a = kfs[i], b = kfs[i + 1];
-      const f = (t - ((_d = a.time) != null ? _d : 0)) / (((_e = b.time) != null ? _e : 0) - ((_f = a.time) != null ? _f : 0) || 1);
-      return lerp(a.value, b.value, f);
-    }
-    return staticVal !== void 0 ? Number(staticVal) : fallback;
-  }
-  var CONTAINER_TYPES = /* @__PURE__ */ new Set(["svg", "g", "symbol"]);
-  var SKIP_TYPES = /* @__PURE__ */ new Set(["defs", "mask", "clipPath", "title"]);
-  function buildIdMap2(node, map) {
-    var _a;
-    if (typeof node.id === "string") map.set(node.id, node);
-    (_a = node.children) == null ? void 0 : _a.forEach((c) => buildIdMap2(c, map));
-  }
-  function num(v) {
-    return v === void 0 || v === null ? 0 : Number(v);
-  }
-  function round(n) {
-    return Math.round(n * 100) / 100 + 0;
-  }
-  function geomKey(node) {
-    var _a;
-    switch (node.type) {
-      case "rect":
-        return num(node.width) + "," + num(node.height) + "," + num(node.x) + "," + num(node.y);
-      case "ellipse":
-        return num(node.rx) + "," + num(node.ry) + "," + num(node.cx) + "," + num(node.cy);
-      case "circle":
-        return num(node.r) + "," + num(node.cx) + "," + num(node.cy);
-      case "path":
-        return String((_a = node.d) != null ? _a : "");
-      default:
-        return "";
-    }
-  }
-  function describePrimitive(node, m, t) {
-    var _a, _b, _c, _d, _e;
-    const fill = (_a = node.fill) != null ? _a : "";
-    const stroke = (_b = node.stroke) != null ? _b : "";
-    const sw = (_d = (_c = node["stroke-width"]) != null ? _c : node.strokeWidth) != null ? _d : "";
-    const opacity = round(evalScalar((_e = node.animate) == null ? void 0 : _e.opacity, node.opacity, 1, t));
-    const masked = node.mask ? 1 : 0;
-    const mat = m.map(round).join(",");
-    return node.type + "|" + geomKey(node) + "|[" + mat + "]|f:" + fill + "|s:" + stroke + "|sw:" + (num(sw) || "") + "|o:" + opacity + "|m:" + masked;
-  }
-  function flatten(node, parent, t, idMap, out) {
-    var _a;
-    const type = node.type || "";
-    if (SKIP_TYPES.has(type)) return;
-    const m = mul(parent, nodeMatrix(node, t));
-    if (type === "use") {
-      const targetId = typeof node.href === "string" ? node.href.replace(/^#/, "") : "";
-      const target = idMap.get(targetId);
-      const useM = mul(m, translateM(num(node.x), num(node.y)));
-      if (target) flatten(target, useM, t, idMap, out);
-      else out.push("UNRESOLVED_USE:#" + targetId);
-      return;
-    }
-    if (CONTAINER_TYPES.has(type)) {
-      (_a = node.children) == null ? void 0 : _a.forEach((c) => flatten(c, m, t, idMap, out));
-      return;
-    }
-    out.push(describePrimitive(node, m, t));
-  }
-  function collectSampleTimes(node, into) {
-    var _a;
-    into.add(0);
-    const scanAnim = (anim) => {
-      var _a2;
-      if (!anim || typeof anim !== "object") return;
-      for (const key of Object.keys(anim)) {
-        const kfs = (_a2 = anim[key]) == null ? void 0 : _a2.keyframes;
-        if (Array.isArray(kfs)) kfs.forEach((kf) => {
-          var _a3;
-          return into.add((_a3 = kf.time) != null ? _a3 : 0);
-        });
-      }
-    };
-    scanAnim(node.animate);
-    if (node.transform && typeof node.transform === "object" && node.transform.keyframes) {
-      node.transform.keyframes.forEach((kf) => {
-        var _a2;
-        return into.add((_a2 = kf.time) != null ? _a2 : 0);
-      });
-    }
-    (_a = node.children) == null ? void 0 : _a.forEach((c) => collectSampleTimes(c, into));
-  }
-  function visualModelAt(root, t) {
-    const idMap = /* @__PURE__ */ new Map();
-    buildIdMap2(root, idMap);
-    const out = [];
-    flatten(root, IDENTITY, t, idMap, out);
-    return out.sort();
-  }
-  function diffInEffect(a, b) {
-    const times = /* @__PURE__ */ new Set();
-    collectSampleTimes(a, times);
-    collectSampleTimes(b, times);
-    const diffs = [];
-    for (const t of Array.from(times).sort((x, y) => x - y)) {
-      const ma = visualModelAt(a, t);
-      const mb = visualModelAt(b, t);
-      const onlyInA = subtractMultiset(ma, mb);
-      const onlyInB = subtractMultiset(mb, ma);
-      if (onlyInA.length || onlyInB.length) diffs.push({ time: t, onlyInA, onlyInB });
-    }
-    return diffs;
-  }
-  function subtractMultiset(a, b) {
-    const counts = /* @__PURE__ */ new Map();
-    for (const x of b) counts.set(x, (counts.get(x) || 0) + 1);
-    const extra = [];
-    for (const x of a) {
-      const c = counts.get(x) || 0;
-      if (c > 0) counts.set(x, c - 1);
-      else extra.push(x);
-    }
-    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) {
@@ -5806,8 +5497,14 @@ var PixodeskAnimator = (() => {
         break;
       }
       case "mouseOver": {
-        const mouseOverHandler = () => start();
-        const mouseOutHandler = () => handleEndAction();
+        let enteredOnce = false;
+        const mouseOverHandler = () => {
+          enteredOnce = true;
+          start();
+        };
+        const mouseOutHandler = () => {
+          if (enteredOnce) handleEndAction();
+        };
         root.addEventListener("mouseenter", mouseOverHandler);
         root.addEventListener("mouseleave", mouseOutHandler);
         break;
@@ -5824,17 +5521,32 @@ var PixodeskAnimator = (() => {
         break;
       }
       case "scrollIntoView": {
+        const effectiveRatio = (entry) => {
+          var _a, _b;
+          const target = entry.boundingClientRect;
+          const visible = entry.intersectionRect;
+          if (!(target == null ? void 0 : target.height) || !visible) return entry.intersectionRatio;
+          const live = typeof window !== "undefined" && window.innerHeight ? window.innerHeight : Infinity;
+          const declared = (_b = (_a = entry.rootBounds) == null ? void 0 : _a.height) != null ? _b : Infinity;
+          const viewport = Math.min(live, declared);
+          const denom = Math.min(target.height, Number.isFinite(viewport) ? viewport : target.height);
+          return denom > 0 ? visible.height / denom : entry.intersectionRatio;
+        };
+        const thresholdSteps = Array.from({ length: 21 }, (_, i) => i / 20);
+        let wasIntersecting = false;
         const observer = new IntersectionObserver(
           (entries) => {
             entries.forEach((entry) => {
-              if (entry.isIntersecting && entry.intersectionRatio >= scrollIntoViewThreshold) {
+              if (entry.isIntersecting && effectiveRatio(entry) >= scrollIntoViewThreshold) {
+                wasIntersecting = true;
                 start();
-              } else {
+              } else if (wasIntersecting) {
+                wasIntersecting = false;
                 handleEndAction();
               }
             });
           },
-          { threshold: scrollIntoViewThreshold }
+          { threshold: thresholdSteps }
         );
         observer.observe(root);
         break;
@@ -5929,7 +5641,7 @@ var PixodeskAnimator = (() => {
     } 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;
@@ -6006,7 +5718,7 @@ var PixodeskAnimator = (() => {
         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;
@@ -6152,9 +5864,8 @@ var PixodeskAnimator = (() => {
     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) {
@@ -6166,29 +5877,99 @@ var PixodeskAnimator = (() => {
         }
       });
     }
-    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) {
@@ -6203,7 +5984,6 @@ var PixodeskAnimator = (() => {
     }
     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) {
@@ -6286,6 +6066,6 @@ var PixodeskAnimator = (() => {
     window["createAnimator"] = createAnimator;
     window["setupAnimationTriggers"] = setupAnimationTriggers;
   }
-  return __toCommonJS(index_exports);
+  return __toCommonJS(index_player_exports);
 })();
 //# sourceMappingURL=index.umd.js.map