@pixodesk/svg-animator-web 1.0.39 → 1.0.41

package/dist/pixodesk-svg-animator.umd.js

@@ -55,7 +55,7 @@ var PixodeskAnimator = (() => {
     PX_ANIM_ATTR_NAME: () => PX_ANIM_ATTR_NAME,
     PX_ANIM_SRC_ATTR_NAME: () => PX_ANIM_SRC_ATTR_NAME,
     PxTimelineEngine: () => PxTimelineEngine,
-    PxTimelineEngineExtra: () => PxTimelineEngineExtra,
+    PxTimelineEngineSetting: () => PxTimelineEngineSetting,
     createAnimator: () => createAnimator,
     generateNewIds: () => generateNewIds,
     loadTagAnimators: () => loadTagAnimators,
@@ -63,597 +63,93 @@ var PixodeskAnimator = (() => {
     validateDocument: () => validateDocument
   });
 
-  // ../svg-animator-core/src/util/PxAnimatorUtil.ts
-  function bezierToSvgPath(path, forceCurves = false) {
-    var _a2, _b, _c, _d;
-    const v = path.v;
-    const i = path.i;
-    const o = path.o;
-    const c = path.c;
-    if (!v.length) return "";
-    const d = [];
-    const len = v.length;
-    d.push("M" + v[0][0] + "," + v[0][1]);
-    for (let idx = 1; idx < len; idx++) {
-      const prevV = v[idx - 1];
-      const prevO = (_a2 = o == null ? void 0 : o[idx - 1]) != null ? _a2 : prevV;
-      const currI = (_b = i == null ? void 0 : i[idx]) != null ? _b : v[idx];
-      const currV = v[idx];
-      const isLine = !forceCurves && (prevO[0] === prevV[0] && prevO[1] === prevV[1]) && (currI[0] === currV[0] && currI[1] === currV[1]);
-      if (isLine) {
-        d.push("L" + currV[0] + "," + currV[1]);
-      } else {
-        d.push("C" + prevO[0] + "," + prevO[1] + "," + currI[0] + "," + currI[1] + "," + currV[0] + "," + currV[1]);
-      }
-    }
-    if (c && len > 0) {
-      const lastV = v[len - 1];
-      const lastO = (_c = o == null ? void 0 : o[len - 1]) != null ? _c : lastV;
-      const firstI = (_d = i == null ? void 0 : i[0]) != null ? _d : v[0];
-      const firstV = v[0];
-      const isLine = !forceCurves && (lastO[0] === lastV[0] && lastO[1] === lastV[1]) && (firstI[0] === firstV[0] && firstI[1] === firstV[1]);
-      if (!isLine) {
-        d.push("C" + lastO[0] + "," + lastO[1] + "," + firstI[0] + "," + firstI[1] + "," + firstV[0] + "," + firstV[1]);
-      }
-      d.push("z");
+  // ../svg-animator-core/src/schema/PxSchema.ts
+  var PX_UNKNOWN_KEY_ERROR = "unexpected extra key";
+  function pathStr(path) {
+    if (!path.length) return ".";
+    let result = "";
+    for (const seg of path) {
+      if (seg.startsWith("[")) result += seg;
+      else result += (result ? "." : "") + seg;
     }
-    return d.join("");
-  }
-  function interpolateNum(a, b, t) {
-    return a + (b - a) * t;
+    return result;
   }
-  function interpolateVec(a, b, t) {
-    const res = [];
-    const count = Math.max(a.length, b.length);
-    for (let i = 0; i < count; i++) {
-      res[i] = interpolateNum(a[i] || 0, b[i] || 0, t);
+  var Base = class {
+    _canSanitize(raw) {
+      return this.isValid(raw);
     }
-    return res;
-  }
-  function interpolateColor(a, b, t) {
-    return [
-      interpolateNum(a[0] || 0, b[0] || 0, t),
-      interpolateNum(a[1] || 0, b[1] || 0, t),
-      interpolateNum(a[2] || 0, b[2] || 0, t),
-      interpolateNum(a[3] === void 0 ? 1 : a[3], b[3] === void 0 ? 1 : b[3], t)
-    ];
-  }
-  function interpolateBeziers(paths1, paths2, progress) {
-    const count = Math.max(paths1.length, paths2.length);
-    const res = [];
-    for (let i = 0; i < count; i++) {
-      res.push(interpolateBezier(paths1[i], paths2[i], progress));
+    optional() {
+      return new Optional(this);
     }
-    return res;
-  }
-  function interpolateBezier(path1, path2, progress) {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
-    if (!path1 || !path2) return path1 || path2 || { v: [] };
-    const t = Math.min(Math.max(progress, 0), 1);
-    const len = Math.min(path1.v.length, path2.v.length);
-    const v = [];
-    const i = [];
-    const o = [];
-    for (let idx = 0; idx < len; idx++) {
-      const v1 = path1.v[idx];
-      const v2 = path2.v[idx];
-      v.push(interpolateVec(v1, v2, t));
-      const i1 = (_b = (_a2 = path1.i) == null ? void 0 : _a2[idx]) != null ? _b : v1;
-      const i2 = (_d = (_c = path2.i) == null ? void 0 : _c[idx]) != null ? _d : v2;
-      i.push(interpolateVec(i1, i2, t));
-      const o1 = (_f = (_e = path1.o) == null ? void 0 : _e[idx]) != null ? _f : v1;
-      const o2 = (_h = (_g = path2.o) == null ? void 0 : _g[idx]) != null ? _h : v2;
-      o.push(interpolateVec(o1, o2, t));
+  };
+  var Optional = class extends Base {
+    constructor(inner) {
+      super();
+      this.inner = inner;
+      this._default = void 0;
     }
-    return { v, i: i.length ? i : void 0, o: o.length ? o : void 0, c: (_i = path1.c) != null ? _i : path2.c };
-  }
-  function remap(value, inMin, inMax, outMin, outMax) {
-    if (inMax === inMin) return outMin;
-    const t = (value - inMin) / (inMax - inMin);
-    return outMin + t * (outMax - outMin);
-  }
-  function solveCubicBezierX(p1x, p2x, x) {
-    if (x <= 0) return 0;
-    if (x >= 1) return 1;
-    const cx = 3 * p1x;
-    const bx = 3 * (p2x - p1x) - cx;
-    const ax = 1 - cx - bx;
-    function sampleX(t) {
-      return ((ax * t + bx) * t + cx) * t;
+    sanitize(raw) {
+      if (raw === void 0 || raw === null) return void 0;
+      return this.inner._canSanitize(raw) ? this.inner.sanitize(raw) : void 0;
     }
-    function sampleDX(t) {
-      return (3 * ax * t + 2 * bx) * t + cx;
+    isValid(raw, ctx, path) {
+      if (raw === void 0 || raw === null) return true;
+      return this.inner.isValid(raw, ctx, path);
     }
-    let t2 = x;
-    let t0 = 0;
-    let t1 = 1;
-    for (let i = 0; i < 8; i++) {
-      const x2 = sampleX(t2) - x;
-      if (Math.abs(x2) < 1e-6) return t2;
-      const d2 = sampleDX(t2);
-      if (Math.abs(d2) < 1e-6) break;
-      t2 -= x2 / d2;
+    _canSanitize(raw) {
+      return raw === void 0 || raw === null || this.inner._canSanitize(raw);
     }
-    t2 = x;
-    while (t0 < t1) {
-      const x2 = sampleX(t2);
-      if (Math.abs(x2 - x) < 1e-6) return t2;
-      if (x > x2) t0 = t2;
-      else t1 = t2;
-      t2 = (t1 + t0) / 2;
+  };
+  var Str = class extends Base {
+    constructor(_default = "") {
+      super();
+      this._default = _default;
     }
-    return t2;
-  }
-  function cubicBezier(easing) {
-    const [p1x, p1y, p2x, p2y] = easing;
-    const cy = 3 * p1y;
-    const by = 3 * (p2y - p1y) - cy;
-    const ay = 1 - cy - by;
-    function sampleCurveY(t) {
-      return ((ay * t + by) * t + cy) * t;
+    sanitize(raw) {
+      return typeof raw === "string" ? raw : this._default;
     }
-    return function(x) {
-      return sampleCurveY(solveCubicBezierX(p1x, p2x, x));
-    };
-  }
-  function lerp2(a, b, t) {
-    return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
-  }
-  function subdivideCubicBezier(p0, p1, p2, p3, t) {
-    const q0 = lerp2(p0, p1, t);
-    const q1 = lerp2(p1, p2, t);
-    const q2 = lerp2(p2, p3, t);
-    const r0 = lerp2(q0, q1, t);
-    const r1 = lerp2(q1, q2, t);
-    const s = lerp2(r0, r1, t);
-    return {
-      left: [p0, q0, r0, s],
-      right: [s, r1, q2, p3]
-    };
-  }
-  function splitEasing(easing, xFraction) {
-    if (!easing) return { left: void 0, right: void 0 };
-    if (xFraction <= 0) return { left: void 0, right: easing };
-    if (xFraction >= 1) return { left: easing, right: void 0 };
-    const [x1, y1, x2, y2] = easing;
-    const t = solveCubicBezierX(x1, x2, xFraction);
-    const p0 = [0, 0];
-    const p1 = [x1, y1];
-    const p2 = [x2, y2];
-    const p3 = [1, 1];
-    const { left, right } = subdivideCubicBezier(p0, p1, p2, p3, t);
-    const sx = left[3][0];
-    const sy = left[3][1];
-    let leftEasing;
-    if (sx > 1e-9 && Math.abs(sy) > 1e-9) {
-      leftEasing = [
-        left[1][0] / sx,
-        left[1][1] / sy,
-        left[2][0] / sx,
-        left[2][1] / sy
-      ];
+    isValid(raw, ctx, path) {
+      if (typeof raw === "string") return true;
+      ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected string, got " + typeof raw);
+      return false;
     }
-    let rightEasing;
-    const rx = 1 - sx;
-    const ry = 1 - sy;
-    if (rx > 1e-9 && Math.abs(ry) > 1e-9) {
-      rightEasing = [
-        (right[1][0] - sx) / rx,
-        (right[1][1] - sy) / ry,
-        (right[2][0] - sx) / rx,
-        (right[2][1] - sy) / ry
-      ];
+  };
+  var Num = class extends Base {
+    constructor(_default = 0) {
+      super();
+      this._default = _default;
     }
-    return { left: leftEasing, right: rightEasing };
-  }
-  function reverseEasing(easing) {
-    if (!easing) return void 0;
-    return [1 - easing[2], 1 - easing[3], 1 - easing[0], 1 - easing[1]];
-  }
-  function toRGBA(color) {
-    const r = Math.round(color[0] * 255);
-    const g = Math.round(color[1] * 255);
-    const b = Math.round(color[2] * 255);
-    return color.length === 4 ? "rgba(" + r + "," + g + "," + b + "," + color[3] + ")" : "rgb(" + r + "," + g + "," + b + ")";
-  }
-  function parseRgba(s) {
-    var _a2;
-    const inner = (_a2 = s.match(/rgba?\((.*)\)/)) == null ? void 0 : _a2[1];
-    if (!inner) throw new Error("Invalid rgb/rgba format");
-    const parts = inner.split(",").map((v) => +v.trim());
-    return [parts[0] / 255, parts[1] / 255, parts[2] / 255, ...parts[3] !== void 0 ? [parts[3]] : []];
-  }
-  function parseHex(s) {
-    const hex = s.slice(1);
-    const isShort = hex.length <= 4;
-    const r = isShort ? hex[0] + hex[0] : hex.slice(0, 2);
-    const g = isShort ? hex[1] + hex[1] : hex.slice(2, 4);
-    const b = isShort ? hex[2] + hex[2] : hex.slice(4, 6);
-    const a = hex.length === 4 ? hex[3] + hex[3] : hex.length === 8 ? hex.slice(6, 8) : null;
-    const result = [
-      parseInt(r, 16) / 255,
-      parseInt(g, 16) / 255,
-      parseInt(b, 16) / 255
-    ];
-    if (a !== null) {
-      result.push(parseInt(a, 16) / 255);
+    sanitize(raw) {
+      return typeof raw === "number" && isFinite(raw) ? raw : this._default;
     }
-    return result;
-  }
-  function parseColor(s) {
-    if (!s) return void 0;
-    if (Array.isArray(s)) return s;
-    if (typeof s !== "string") return void 0;
-    if (s.startsWith("#")) {
-      return parseHex(s);
-    } else if (s.startsWith("rgb")) {
-      return parseRgba(s);
-    } else {
-      console.warn("Unsupported color format: " + s);
+    isValid(raw, ctx, path) {
+      if (typeof raw === "number" && isFinite(raw)) return true;
+      ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected finite number, got " + JSON.stringify(raw));
+      return false;
     }
-    return void 0;
-  }
-  var COLOR_ATTR_NAMES = /* @__PURE__ */ new Set(["color", "fill", "flood-color", "lighting-color", "stop-color", "stroke"]);
-  var TRANSFORM_FN_NAMES = /* @__PURE__ */ new Set(["translate", "rotate", "scale", "skew"]);
-  var PCT_BASED_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
-  function composeTransformParts(parts, opts) {
-    var _a2;
-    if (!parts) return "";
-    const withUnits = (_a2 = opts == null ? void 0 : opts.withUnits) != null ? _a2 : true;
-    const segs = [];
-    const t = parts.translate;
-    const o = parts.origin;
-    const r = parts.rotate;
-    const k = parts.skew;
-    const s = parts.scale;
-    const tu = withUnits ? "px" : "";
-    const ru = withUnits ? "deg" : "";
-    if (t) segs.push("translate(" + t[0] + tu + "," + t[1] + tu + ")");
-    if (o) segs.push("translate(" + o[0] + tu + "," + o[1] + tu + ")");
-    if (r !== void 0 && r !== null) segs.push("rotate(" + r + ru + ")");
-    if (k !== void 0 && k !== null) segs.push("skewX(" + k + ru + ")");
-    if (s) segs.push("scale(" + s[0] + "," + s[1] + ")");
-    if (o) segs.push("translate(" + -o[0] + tu + "," + -o[1] + tu + ")");
-    return segs.join("");
-  }
-  function parseTransformParts(str2) {
-    var _a2, _b;
-    if (!str2 || typeof str2 !== "string") return void 0;
-    const out = {};
-    const re = /([a-zA-Z]+)\s*\(([^)]*)\)/g;
-    const order = ["translate", "rotate", "skewX", "scale"];
-    let lastIdx = -1;
-    let m;
-    while ((m = re.exec(str2)) !== null) {
-      const fn = m[1];
-      const idx = order.indexOf(fn);
-      if (idx < 0 || idx <= lastIdx) return void 0;
-      lastIdx = idx;
-      const nums = m[2].split(/[\s,]+/).filter(Boolean).map(Number);
-      if (nums.some((n) => Number.isNaN(n))) return void 0;
-      if (fn === "translate") {
-        if (nums.length < 1 || nums.length > 2) return void 0;
-        out.translate = [nums[0], (_a2 = nums[1]) != null ? _a2 : 0];
-      } else if (fn === "rotate") {
-        if (nums.length !== 1) return void 0;
-        out.rotate = nums[0];
-      } else if (fn === "skewX") {
-        if (nums.length !== 1) return void 0;
-        out.skew = nums[0];
-      } else {
-        if (nums.length < 1 || nums.length > 2) return void 0;
-        out.scale = [nums[0], (_b = nums[1]) != null ? _b : nums[0]];
-      }
+  };
+  var Bool = class extends Base {
+    constructor(_default = false) {
+      super();
+      this._default = _default;
     }
-    if (str2.replace(/([a-zA-Z]+)\s*\(([^)]*)\)/g, "").replace(/[\s,]/g, "").length) return void 0;
-    return Object.keys(out).length ? out : void 0;
-  }
-  var STYLE_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
-  var DEFAULT_DURATION_MS = 1e3;
-  function kebabToCamelCaseWord(kebab) {
-    return kebab.includes("-") ? kebab.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()) : kebab;
-  }
-  function isCamelCaseWord(word) {
-    return !word.includes("-") && /[a-z][A-Z]/.test(word);
-  }
-  var SVG_CAMEL_CASE_ATTRS = /* @__PURE__ */ new Set([
-    // Transform/positioning
-    "viewBox",
-    "preserveAspectRatio",
-    // Gradient
-    "gradientUnits",
-    "gradientTransform",
-    "spreadMethod",
-    // Pattern
-    "patternUnits",
-    "patternContentUnits",
-    "patternTransform",
-    // Clipping/masking
-    "clipPathUnits",
-    "maskUnits",
-    "maskContentUnits",
-    // Marker  (SVG spec keeps these camelCase, like viewBox)
-    "markerUnits",
-    "markerWidth",
-    "markerHeight",
-    "refX",
-    "refY",
-    // Text
-    "textLength",
-    "lengthAdjust",
-    "startOffset",
-    // Filter
-    "filterUnits",
-    "primitiveUnits",
-    "tableValues",
-    // feFuncR/G/B/A transfer table (type="table")
-    "stdDeviation",
-    "baseFrequency",
-    "numOctaves",
-    "surfaceScale",
-    "diffuseConstant",
-    "specularConstant",
-    "specularExponent",
-    "kernelMatrix",
-    "kernelUnitLength",
-    "edgeMode",
-    "preserveAlpha",
-    "targetX",
-    "targetY"
-    // // Animation
-    // 'attributeName',
-    // 'attributeType',
-    // 'calcMode',
-    // 'keyTimes',
-    // 'keySplines',
-    // 'repeatCount',
-    // 'repeatDur'    
-  ]);
-  function camelCaseToKebabWordIfNeeded(camel) {
-    return SVG_CAMEL_CASE_ATTRS.has(camel) ? camel : camel.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-  }
-  function clamp(value, min, max) {
-    return Math.max(min, Math.min(value, max));
-  }
-  function bezier2D_pointAt(P0, P1, P2, P3, t) {
-    if (t <= 0) return [P0[0], P0[1]];
-    if (t >= 1) return [P3[0], P3[1]];
-    const u = 1 - t;
-    const u2 = u * u;
-    const u3 = u2 * u;
-    const t2 = t * t;
-    const t3 = t2 * t;
-    const w0 = u3;
-    const w1 = 3 * t * u2;
-    const w2 = 3 * t2 * u;
-    const w3 = t3;
-    return [
-      w0 * P0[0] + w1 * P1[0] + w2 * P2[0] + w3 * P3[0],
-      w0 * P0[1] + w1 * P1[1] + w2 * P2[1] + w3 * P3[1]
-    ];
-  }
-  var BEZIER_T_NUDGE = 1e-4;
-  function bezier2D_derivativeAt(P0, P1, P2, P3, t) {
-    const result = _bezier2D_derivativeAtRaw(P0, P1, P2, P3, t);
-    if (result[0] === 0 && result[1] === 0) {
-      const nudgedT = t < 0.5 ? t + BEZIER_T_NUDGE : t - BEZIER_T_NUDGE;
-      return _bezier2D_derivativeAtRaw(P0, P1, P2, P3, nudgedT);
+    sanitize(raw) {
+      return typeof raw === "boolean" ? raw : this._default;
     }
-    return result;
-  }
-  function _bezier2D_derivativeAtRaw(P0, P1, P2, P3, t) {
-    const u = 1 - t;
-    const a = 3 * u * u;
-    const b = 6 * t * u;
-    const c = 3 * t * t;
-    return [
-      a * (P1[0] - P0[0]) + b * (P2[0] - P1[0]) + c * (P3[0] - P2[0]),
-      a * (P1[1] - P0[1]) + b * (P2[1] - P1[1]) + c * (P3[1] - P2[1])
-    ];
-  }
-  function bezier2D_arcLengthLUT(P0, P1, P2, P3, steps = 100) {
-    const n = steps + 1;
-    const ts = new Float64Array(n);
-    const ds = new Float64Array(n);
-    let prev = bezier2D_pointAt(P0, P1, P2, P3, 0);
-    ts[0] = 0;
-    ds[0] = 0;
-    let cum = 0;
-    for (let i = 1; i < n; i++) {
-      const t = i / steps;
-      const cur = bezier2D_pointAt(P0, P1, P2, P3, t);
-      const dx = cur[0] - prev[0];
-      const dy = cur[1] - prev[1];
-      cum += Math.sqrt(dx * dx + dy * dy);
-      ts[i] = t;
-      ds[i] = cum;
-      prev = cur;
+    isValid(raw, ctx, path) {
+      if (typeof raw === "boolean") return true;
+      ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected boolean, got " + typeof raw);
+      return false;
     }
-    return { ts, ds };
-  }
-  function bezier2D_tForDistance(lut, distance) {
-    const { ts, ds } = lut;
-    const last = ds.length - 1;
-    if (distance <= 0) return ts[0];
-    if (distance >= ds[last]) return ts[last];
-    let lo = 1;
-    let hi = last;
-    while (lo < hi) {
-      const mid = lo + hi >>> 1;
-      if (ds[mid] < distance) lo = mid + 1;
-      else hi = mid;
+  };
+  var Literal = class extends Base {
+    constructor(value) {
+      super();
+      this.value = value;
+      this._default = value;
     }
-    const dPrev = ds[hi - 1];
-    const dCur = ds[hi];
-    const span = dCur - dPrev;
-    const frac = span > 0 ? (distance - dPrev) / span : 0;
-    return ts[hi - 1] + frac * (ts[hi] - ts[hi - 1]);
-  }
-  function bezier2D_arcAtT(lut, t) {
-    const { ts, ds } = lut;
-    const last = ts.length - 1;
-    if (t <= ts[0]) return ds[0];
-    if (t >= ts[last]) return ds[last];
-    let lo = 1, hi = last;
-    while (lo < hi) {
-      const mid = lo + hi >>> 1;
-      if (ts[mid] < t) lo = mid + 1;
-      else hi = mid;
-    }
-    const tPrev = ts[hi - 1];
-    const span = ts[hi] - tPrev;
-    const frac = span > 0 ? (t - tPrev) / span : 0;
-    return ds[hi - 1] + frac * (ds[hi] - ds[hi - 1]);
-  }
-  function invertEasing(easing) {
-    if (!easing) return (y) => y;
-    const flipped = [easing[1], easing[0], easing[3], easing[2]];
-    return cubicBezier(flipped);
-  }
-
-  // ../svg-animator-core/src/playback/PxScrollMath.ts
-  function isScrollTimeline(config) {
-    return (config == null ? void 0 : config.timelineSource) === "scroll";
-  }
-  function scrollTotalDurationMs(config) {
-    const duration = typeof (config == null ? void 0 : config.duration) === "number" && config.duration > 0 ? config.duration : DEFAULT_DURATION_MS;
-    const iterations = typeof (config == null ? void 0 : config.iterations) === "number" && config.iterations > 0 ? config.iterations : 1;
-    return duration * iterations;
-  }
-  function scrollPhaseInterval(phase, subjectSize, scrollportSize) {
-    const s = subjectSize, vp = scrollportSize;
-    switch (phase) {
-      case "cover":
-        return [0, s + vp];
-      case "entry":
-        return [0, Math.min(s, vp)];
-      case "contain":
-        return [Math.min(s, vp), Math.max(s, vp)];
-      case "exit":
-        return [Math.max(s, vp), s + vp];
-      case "entry-crossing":
-        return [0, s];
-      case "exit-crossing":
-        return [vp, s + vp];
-    }
-  }
-  var DEFAULT_PHASE = "cover";
-  function resolveRangePointU(point, defaultFraction, subjectSize, scrollportSize) {
-    var _a2;
-    const [u0, u1] = scrollPhaseInterval((_a2 = point == null ? void 0 : point.phase) != null ? _a2 : DEFAULT_PHASE, subjectSize, scrollportSize);
-    const fraction = typeof (point == null ? void 0 : point.fraction) === "number" ? point.fraction : defaultFraction;
-    return u0 + fraction * (u1 - u0);
-  }
-  function scrollViewProgress(subjectStart, subjectSize, scrollportSize, range) {
-    const u = scrollportSize - subjectStart;
-    const uStart = resolveRangePointU(range == null ? void 0 : range.start, 0, subjectSize, scrollportSize);
-    const uEnd = resolveRangePointU(range == null ? void 0 : range.end, 1, subjectSize, scrollportSize);
-    if (uEnd <= uStart) return u >= uEnd ? 1 : 0;
-    return clamp((u - uStart) / (uEnd - uStart), 0, 1);
-  }
-  function scrollOffsetProgress(offset, maxOffset, range) {
-    var _a2, _b;
-    const raw = maxOffset > 0 ? clamp(offset / maxOffset, 0, 1) : 1;
-    const start = typeof ((_a2 = range == null ? void 0 : range.start) == null ? void 0 : _a2.fraction) === "number" ? range.start.fraction : 0;
-    const end = typeof ((_b = range == null ? void 0 : range.end) == null ? void 0 : _b.fraction) === "number" ? range.end.fraction : 1;
-    if (end <= start) return raw >= end ? 1 : 0;
-    return clamp((raw - start) / (end - start), 0, 1);
-  }
-  function scrollResolveAxis(axis, writingMode) {
-    const a = axis != null ? axis : "block";
-    if (a === "x" || a === "y") return a;
-    const vertical = !!writingMode && writingMode.startsWith("vertical");
-    if (a === "inline") return vertical ? "y" : "x";
-    return vertical ? "x" : "y";
-  }
-
-  // ../svg-animator-core/src/schema/PxSchema.ts
-  var PX_UNKNOWN_KEY_ERROR = "unexpected extra key";
-  function pathStr(path) {
-    if (!path.length) return ".";
-    let result = "";
-    for (const seg of path) {
-      if (seg.startsWith("[")) result += seg;
-      else result += (result ? "." : "") + seg;
-    }
-    return result;
-  }
-  var Base = class {
-    _canSanitize(raw) {
-      return this.isValid(raw);
-    }
-    optional() {
-      return new Optional(this);
-    }
-  };
-  var Optional = class extends Base {
-    constructor(inner) {
-      super();
-      this.inner = inner;
-      this._default = void 0;
-    }
-    sanitize(raw) {
-      if (raw === void 0 || raw === null) return void 0;
-      return this.inner._canSanitize(raw) ? this.inner.sanitize(raw) : void 0;
-    }
-    isValid(raw, ctx, path) {
-      if (raw === void 0 || raw === null) return true;
-      return this.inner.isValid(raw, ctx, path);
-    }
-    _canSanitize(raw) {
-      return raw === void 0 || raw === null || this.inner._canSanitize(raw);
-    }
-  };
-  var Str = class extends Base {
-    constructor(_default = "") {
-      super();
-      this._default = _default;
-    }
-    sanitize(raw) {
-      return typeof raw === "string" ? raw : this._default;
-    }
-    isValid(raw, ctx, path) {
-      if (typeof raw === "string") return true;
-      ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected string, got " + typeof raw);
-      return false;
-    }
-  };
-  var Num = class extends Base {
-    constructor(_default = 0) {
-      super();
-      this._default = _default;
-    }
-    sanitize(raw) {
-      return typeof raw === "number" && isFinite(raw) ? raw : this._default;
-    }
-    isValid(raw, ctx, path) {
-      if (typeof raw === "number" && isFinite(raw)) return true;
-      ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected finite number, got " + JSON.stringify(raw));
-      return false;
-    }
-  };
-  var Bool = class extends Base {
-    constructor(_default = false) {
-      super();
-      this._default = _default;
-    }
-    sanitize(raw) {
-      return typeof raw === "boolean" ? raw : this._default;
-    }
-    isValid(raw, ctx, path) {
-      if (typeof raw === "boolean") return true;
-      ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected boolean, got " + typeof raw);
-      return false;
-    }
-  };
-  var Literal = class extends Base {
-    constructor(value) {
-      super();
-      this.value = value;
-      this._default = value;
-    }
-    sanitize(raw) {
-      return raw === this.value ? this.value : this._default;
+    sanitize(raw) {
+      return raw === this.value ? this.value : this._default;
     }
     isValid(raw, ctx, path) {
       if (raw === this.value) return true;
@@ -1057,7 +553,7 @@ var PixodeskAnimator = (() => {
      * The base can be the result of px.object() or px.openObject() — anything with a _shape property.
      *
      * @example
-     * const PxSvgNodeSchema = px.extendedObject(PxNodeBase, { width: px.number().optional() });
+     * const PxSvgNodeSchema = px.extendedObject(PxNodeBaseSchema, { width: px.number().optional() });
      */
     extendedObject: (base, extra) => new Obj(__spreadValues(__spreadValues({}, base._shape), extra)),
     /** Array whose unrecoverable items are filtered out. Default: []. */
@@ -1075,7 +571,7 @@ var PixodeskAnimator = (() => {
   };
 
   // ../svg-animator-core/src/version/PxSchemaVersion.ts
-  var PX_PLAYER_SCHEMA_VERSION = "1.1";
+  var PX_WIRE_SCHEMA_VERSION = "1.1";
 
   // ../svg-animator-core/src/version/PxWireVersion.ts
   var VERSION_RE = /^(\d+)\.(\d+)(?:\.(\d+))?$/;
@@ -1086,7 +582,7 @@ var PixodeskAnimator = (() => {
     return { a: Number(m[1]), b: Number(m[2]), c: m[3] === void 0 ? 0 : Number(m[3]) };
   }
   var _a;
-  var PLAYER_WIRE_VERSION = (_a = parseWireVersion(PX_PLAYER_SCHEMA_VERSION)) != null ? _a : { a: 1, b: 1, c: 0 };
+  var PX_WIRE_VERSION = (_a = parseWireVersion(PX_WIRE_SCHEMA_VERSION)) != null ? _a : { a: 1, b: 1, c: 0 };
 
   // ../svg-animator-core/src/format/PxAnimatorConstants.ts
   var PxFillMode = {
@@ -1165,17 +661,17 @@ var PixodeskAnimator = (() => {
     native: "native",
     js: "js"
   };
-  var PxTimelineEngineExtra = __spreadProps(__spreadValues({}, PxTimelineEngine), {
+  var PxTimelineEngineSetting = __spreadProps(__spreadValues({}, PxTimelineEngine), {
     auto: "auto"
   });
   function resolveTimelineEngine(engine) {
-    return engine === PxTimelineEngineExtra.js ? PxTimelineEngine.js : PxTimelineEngine.native;
+    return engine === PxTimelineEngineSetting.js ? PxTimelineEngine.js : PxTimelineEngine.native;
   }
   function isNativeForced(engine) {
-    return engine === PxTimelineEngineExtra.native;
+    return engine === PxTimelineEngineSetting.native;
   }
   function mayUseNativeScrollTimeline(engine) {
-    return engine !== PxTimelineEngineExtra.js;
+    return engine !== PxTimelineEngineSetting.js;
   }
   var PX_TRIGGER_DEFAULTS = {
     startOn: "load",
@@ -1236,7 +732,7 @@ var PixodeskAnimator = (() => {
     separate: "separate",
     combined: "combined"
   };
-  var TEXT_CONTENT_ATTR = "textContent";
+  var PX_TEXT_CONTENT_ATTR = "textContent";
   var CLASS_ATTR = "class";
   var TRANSFORM_ATTR = "transform";
   var OFFSET_DISTANCE_ATTR = "offsetDistance";
@@ -1247,7 +743,7 @@ var PixodeskAnimator = (() => {
     "meta",
     "animate",
     "effects",
-    TEXT_CONTENT_ATTR
+    PX_TEXT_CONTENT_ATTR
   ]);
   var TRANSFORM_PART = {
     translate: "translate",
@@ -1270,11 +766,11 @@ var PixodeskAnimator = (() => {
     linear: "linear",
     radial: "radial"
   };
-  function isPxElementFileFormat(fileJson) {
-    if (!(fileJson && typeof fileJson === "object" && !Array.isArray(fileJson))) {
+  function isPxDocument(doc) {
+    if (!(doc && typeof doc === "object" && !Array.isArray(doc))) {
       return false;
     }
-    return fileJson.type === "svg";
+    return doc.type === "svg";
   }
   function getAnimatorConfig(doc) {
     var _a2;
@@ -1335,7 +831,7 @@ var PixodeskAnimator = (() => {
     flattenMemo.set(cfg, flat);
     return flat;
   }
-  function getDefs(doc) {
+  function getDefinitions(doc) {
     var _a2;
     if (!doc) return void 0;
     return (_a2 = getAnimatorConfig(doc)) == null ? void 0 : _a2.definitions;
@@ -1343,9 +839,7 @@ var PixodeskAnimator = (() => {
   function getBindings(doc) {
     var _a2;
     if (!doc) return void 0;
-    const animateById = (_a2 = getAnimatorConfig(doc)) == null ? void 0 : _a2.animateById;
-    if (!animateById) return void 0;
-    return Object.entries(animateById).map(([id, anim]) => ({ id: id.startsWith("#") ? id.slice(1) : id, animate: anim }));
+    return (_a2 = getAnimatorConfig(doc)) == null ? void 0 : _a2.bindings;
   }
 
   // ../svg-animator-core/src/format/PxAnimatorTypes.ts
@@ -1380,20 +874,20 @@ var PixodeskAnimator = (() => {
     // its internal COPY-PASTE payload, which never validates against this schema.)
   }));
   var anyKf = (kf) => kf;
-  var kfTime = (kf) => {
+  var keyframeTime = (kf) => {
     var _a2, _b;
     return (_b = (_a2 = anyKf(kf).time) != null ? _a2 : anyKf(kf).t) != null ? _b : 0;
   };
-  var kfValue = (kf) => {
+  var keyframeValue = (kf) => {
     var _a2;
     return (_a2 = anyKf(kf).value) != null ? _a2 : anyKf(kf).v;
   };
-  var kfEasing = (kf) => {
+  var keyframeEasing = (kf) => {
     var _a2;
     return (_a2 = anyKf(kf).easing) != null ? _a2 : anyKf(kf).e;
   };
-  var kfTangentIn = (kf) => anyKf(kf).tangentIn;
-  var kfTangentOut = (kf) => anyKf(kf).tangentOut;
+  var keyframeTangentIn = (kf) => anyKf(kf).tangentIn;
+  var keyframeTangentOut = (kf) => anyKf(kf).tangentOut;
   var PxLoopSchema = implementsInterface()(px.object({
     segmentCount: px.number().optional(),
     repeatAt: px.enum([PxLoopRepeatAt.start, PxLoopRepeatAt.end]).optional(),
@@ -1447,12 +941,9 @@ var PixodeskAnimator = (() => {
     unitsPerEm: px.number(),
     glyphs: px.record(PxGlyphSchema)
   }));
-  var PxDefsSchema = implementsInterface()(px.object({
+  var PxDefinitionsSchema = implementsInterface()(px.object({
     easings: px.record(px.tuple([px.number(), px.number(), px.number(), px.number()])).optional(),
     animations: px.record(PxAnimationDefinitionSchema).optional(),
-    // Review §2.6: the schema now matches the declared type — a style preset is a flat
-    // record of string|number attribute values, nothing nested.
-    styles: px.record(px.record(px.union([px.string(), px.number()]))).optional(),
     fonts: px.record(PxGlyphFontSchema).optional()
   }));
   var PxScrollRangePointSchema = implementsInterface()(px.object({
@@ -1488,7 +979,7 @@ var PixodeskAnimator = (() => {
     offset: px.number().optional(),
     distance: px.number().optional()
   }));
-  var PxTimelineEngineSchema = px.enum([PxTimelineEngineExtra.auto, PxTimelineEngineExtra.native, PxTimelineEngineExtra.js]).optional();
+  var PxTimelineEngineSchema = px.enum([PxTimelineEngineSetting.auto, PxTimelineEngineSetting.native, PxTimelineEngineSetting.js]).optional();
   var PxTimeTimelineSchema = implementsInterface()(px.object({
     type: px.literal("time").optional(),
     engine: PxTimelineEngineSchema,
@@ -1533,22 +1024,22 @@ var PixodeskAnimator = (() => {
     PxScrollTimelineSchema,
     PxViewTimelineSchema
   ]);
+  var PxBindingSchema = implementsInterface()(px.object({
+    target: px.string(),
+    animateWith: px.array(px.string())
+  }));
   var PxAnimatorConfigSchema = implementsInterface()(px.object({
     // (`mode`, `duration` and `frameRate` live INSIDE `timeline` on the wire — §2.8; they exist
     // at this level only on the runtime view, like the rest of the playback dynamics.)
     // THE spelling of "what advances progress" — clock / scroll / view (review §2.1).
     timeline: PxTimelineSchema.optional(),
-    definitions: PxDefsSchema.optional(),
-    animateById: px.record(PxElementAnimationSchema).optional(),
+    definitions: PxDefinitionsSchema.optional(),
+    bindings: px.array(PxBindingSchema).optional(),
     debugGlobalName: px.string().optional(),
     // Declared HERE because this is a closed object: an undeclared key would be stripped by
     // `sanitize` and flagged by strict validation on our own files.
     version: px.string().optional()
   }));
-  var PxBindingSchema = implementsInterface()(px.object({
-    id: px.string(),
-    animate: PxElementAnimationSchema
-  }));
   var PxAttrValueSchema = px.union([
     px.string(),
     px.number(),
@@ -1631,7 +1122,7 @@ var PixodeskAnimator = (() => {
     PxPropertyAnimationSchema
   ]);
   var PxFillGradientEffectSchema = implementsInterface()(px.object({
-    // Contextual kind — the `type` convention, see `PxNodeBase.type`.
+    // Contextual kind — the `type` convention, see `PxNodeBaseSchema.type`.
     type: px.enum([PxGradientType.linear, PxGradientType.radial]),
     start: PxAnimatableVec2Schema.optional(),
     end: PxAnimatableVec2Schema.optional(),
@@ -1668,11 +1159,11 @@ var PixodeskAnimator = (() => {
     textPath: PxTextPathEffectSchema.optional(),
     text: PxTextEffectSchema.optional()
   }));
-  function validateNodeEffects(root, opts) {
+  function validateNodeEffects(root, options) {
     const warnings = [];
     const walk = (node, path) => {
       if (node && node.effects) {
-        const ctx = { errors: [], warnings: [], strict: !!(opts == null ? void 0 : opts.strict) };
+        const ctx = { errors: [], warnings: [], strict: !!(options == null ? void 0 : options.strict) };
         const ok = PxEffectsSchema.isValid(node.effects, ctx, [path + ".effects"]);
         if (!ok) {
           for (const err of ctx.errors) warnings.push(err);
@@ -1726,209 +1217,657 @@ var PixodeskAnimator = (() => {
     walk(root, "root");
     return problems;
   }
-  function validateVersionStamp(doc) {
-    var _a2;
-    const version = (_a2 = getAnimatorConfig(doc)) == null ? void 0 : _a2.version;
-    if (version === void 0) return [];
-    if (parseWireVersion(version) !== void 0) return [];
-    return ["root.animator.version: " + JSON.stringify(version) + ' is not a version stamp ("a.b" or "a.b.c") \u2014 it reads as unstamped'];
+  function validateVersionStamp(doc) {
+    var _a2;
+    const version = (_a2 = getAnimatorConfig(doc)) == null ? void 0 : _a2.version;
+    if (version === void 0) return [];
+    if (parseWireVersion(version) !== void 0) return [];
+    return ["root.animator.version: " + JSON.stringify(version) + ' is not a version stamp ("a.b" or "a.b.c") \u2014 it reads as unstamped'];
+  }
+  function validateDocument(doc, options) {
+    var _a2;
+    const strict = (options == null ? void 0 : options.strict) !== false;
+    const ctx = { errors: [], warnings: [], strict };
+    const problems = PxAnimatedSvgDocumentSchema.isValid(doc, ctx, ["root"]) ? [] : [...ctx.errors];
+    if (doc && typeof doc === "object") {
+      for (const w of validateNodeEffects(doc, { strict })) {
+        if (!problems.includes(w)) problems.push(w);
+      }
+      const defs = (_a2 = getAnimatorConfig(doc)) == null ? void 0 : _a2.definitions;
+      for (const w of validateGlyphFontRefs(doc, defs == null ? void 0 : defs.fonts)) {
+        if (!problems.includes(w)) problems.push(w);
+      }
+      for (const w of validateEasingRefs(doc, defs == null ? void 0 : defs.easings)) {
+        if (!problems.includes(w)) problems.push(w);
+      }
+      for (const w of validateVersionStamp(doc)) {
+        if (!problems.includes(w)) problems.push(w);
+      }
+    }
+    return problems;
+  }
+  var PxNodeBaseSchema = 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 (`fillGradient.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(),
+    // The escape hatch for elements that carry a REAL `type` attribute — `<feTurbulence
+    // type="fractalNoise">`, `<feFuncR type="table">`, `<feColorMatrix type="saturate">`.
+    // `type` is taken by the tag name, so the attribute travels here and the renderer puts
+    // it back (`PxAnimatorDOM.renderNode`, `PxRnRender`). Declared here — not merely
+    // documented — because a wire key that is not in a schema is invisible to the
+    // minifier's reserve list and gets renamed (dev-docs/plans/minification-boundary.md §1.1).
+    domType: px.string().optional(),
+    // Text content of a `<text>` / `<tspan>`. Declared, so a non-string value is a schema error
+    // and the minifier reserves the key; `text` is NOT an alias for it and is not read anywhere.
+    textContent: px.string().optional(),
+    id: px.string().optional(),
+    meta: px.any().optional(),
+    // Player-effects bucket emitted by the Editor's lightweight design format.
+    // Consumed and removed by `materializeNodeEffects` before any other normalization
+    // (see `createAnimatorImpl`), so downstream code never sees it.
+    effects: PxEffectsSchema.optional(),
+    // `PxElementAnimation` (not just `PxAnimationDefinition`) — accepts
+    // string ref / array of refs / inline definition / mixed array; mirrors
+    // `node.animate` values and what `processNode` resolves at runtime.
+    animate: PxElementAnimationSchema.optional(),
+    style: px.record(px.union([px.string(), px.number()])).optional()
+  }, PxAttrValueSchema);
+  var PxNodeSchema = px.openObject(__spreadProps(__spreadValues({}, PxNodeBaseSchema._shape), {
+    children: px.lazy(() => px.array(PxNodeSchema), []).optional()
+  }), PxAttrValueSchema);
+  var PxSvgNodeRootSchema = px.object({
+    // `"100%"` and other SVG length strings are legal here — a number-only slot rejected
+    // real documents (e.g. apple-store-look-14-main.json) at the root <svg>.
+    width: px.union([px.number(), px.string()]).optional(),
+    height: px.union([px.number(), px.string()]).optional(),
+    viewBox: px.string().optional(),
+    animator: PxAnimatorConfigSchema.optional()
+  });
+  var PxAnimatedSvgDocumentSchema = px.openObject(__spreadProps(__spreadValues(__spreadValues({}, PxNodeBaseSchema._shape), PxSvgNodeRootSchema._shape), {
+    type: px.literal("svg"),
+    // override string → literal to require 'svg'
+    children: px.array(PxNodeSchema).optional()
+  }), PxAttrValueSchema);
+  var PxBezierPathSchema = implementsInterface()(px.object({
+    v: px.array(px.array(px.number())),
+    i: px.array(px.array(px.number())).optional(),
+    o: px.array(px.array(px.number())).optional(),
+    c: px.boolean().optional()
+  }));
+
+  // ../svg-animator-core/src/util/PxIdUtil.ts
+  var _idCounter = 0;
+  function generateUniqueId() {
+    const timestamp = Date.now().toString(36);
+    const counter = (++_idCounter).toString(36);
+    const random = Math.random().toString(36).substring(2, 6);
+    return "_px_" + timestamp + counter + random;
+  }
+  function deepClone(value) {
+    if (value === null || typeof value !== "object") return value;
+    if (Array.isArray(value)) return value.map((item) => deepClone(item));
+    const obj = value;
+    const cloned = {};
+    for (const key of Object.keys(obj)) {
+      cloned[key] = deepClone(obj[key]);
+    }
+    return cloned;
+  }
+  function generateNewIds(doc) {
+    var _a2;
+    const cloned = deepClone(doc);
+    const idMap = /* @__PURE__ */ new Map();
+    const hashRefAttrs = /* @__PURE__ */ new Set(["href", "xlink:href"]);
+    const urlRefAttrs = /* @__PURE__ */ new Set([
+      "fill",
+      "stroke",
+      "clip-path",
+      "clipPath",
+      "mask",
+      "marker",
+      "marker-start",
+      "marker-mid",
+      "marker-end",
+      "filter",
+      "flood-color",
+      "lighting-color"
+    ]);
+    const directIdRefAttrs = /* @__PURE__ */ new Set(["targetId", "boundElementId"]);
+    const isEffectSourceRef = (key, parentKey) => key === "source" && (parentKey === "maskedBy" || parentKey === "clone");
+    function collectIds(node) {
+      if (!node || typeof node !== "object") return;
+      if (node.id && typeof node.id === "string") {
+        const oldId = node.id;
+        const newId = generateUniqueId();
+        idMap.set(oldId, newId);
+        node.id = newId;
+      } else if (node.animate) {
+        node.id = generateUniqueId();
+      }
+      if (Array.isArray(node.children)) {
+        for (const child of node.children) {
+          collectIds(child);
+        }
+      }
+    }
+    function updateRefs(node, parentKey) {
+      if (!node || typeof node !== "object") return;
+      for (const [key, value] of Object.entries(node)) {
+        if (key === "children") {
+          if (Array.isArray(value)) {
+            for (const child of value) {
+              updateRefs(child);
+            }
+          }
+          continue;
+        }
+        if (typeof value === "string") {
+          if (hashRefAttrs.has(key) && value.startsWith("#")) {
+            const oldId = value.slice(1);
+            const newId = idMap.get(oldId);
+            if (newId) {
+              node[key] = "#" + newId;
+            }
+          } else if (urlRefAttrs.has(key)) {
+            node[key] = replaceUrlRefs(value, idMap);
+          } else if (directIdRefAttrs.has(key) || isEffectSourceRef(key, parentKey)) {
+            const hasHash = value.startsWith("#");
+            const newId = idMap.get(hasHash ? value.slice(1) : value);
+            if (newId) {
+              node[key] = hasHash ? "#" + newId : newId;
+            }
+          } else if (value.includes("url(#")) {
+            node[key] = replaceUrlRefs(value, idMap);
+          }
+        } else if (key === "style" && typeof value === "object" && value !== null) {
+          for (const [styleProp, styleValue] of Object.entries(value)) {
+            if (typeof styleValue === "string") {
+              value[styleProp] = replaceUrlRefs(styleValue, idMap);
+            }
+          }
+        } else if (typeof value === "object" && value !== null) {
+          updateRefs(value, key);
+        }
+      }
+    }
+    collectIds(cloned);
+    updateRefs(cloned);
+    const docBindings = (_a2 = cloned.animator) == null ? void 0 : _a2.bindings;
+    if (Array.isArray(docBindings)) {
+      const updatedBindings = docBindings.map((binding) => {
+        var _a3;
+        const hashed = binding.target.startsWith("#");
+        const id = hashed ? binding.target.slice(1) : binding.target;
+        const newId = (_a3 = idMap.get(id)) != null ? _a3 : id;
+        return __spreadProps(__spreadValues({}, binding), { target: hashed ? "#" + newId : newId });
+      });
+      cloned.animator = __spreadProps(__spreadValues({}, cloned.animator), { bindings: updatedBindings });
+    }
+    return cloned;
+  }
+  function replaceUrlRefs(value, idMap) {
+    return value.replace(/url\(#([^)]+)\)/g, (match, oldId) => {
+      const newId = idMap.get(oldId);
+      return newId ? "url(#" + newId + ")" : match;
+    });
+  }
+
+  // ../svg-animator-core/src/util/PxAnimatorUtil.ts
+  function bezierToSvgPath(path, forceCurves = false) {
+    var _a2, _b, _c, _d;
+    const v = path.v;
+    const i = path.i;
+    const o = path.o;
+    const c = path.c;
+    if (!v.length) return "";
+    const d = [];
+    const len = v.length;
+    d.push("M" + v[0][0] + "," + v[0][1]);
+    for (let idx = 1; idx < len; idx++) {
+      const prevV = v[idx - 1];
+      const prevO = (_a2 = o == null ? void 0 : o[idx - 1]) != null ? _a2 : prevV;
+      const currI = (_b = i == null ? void 0 : i[idx]) != null ? _b : v[idx];
+      const currV = v[idx];
+      const isLine = !forceCurves && (prevO[0] === prevV[0] && prevO[1] === prevV[1]) && (currI[0] === currV[0] && currI[1] === currV[1]);
+      if (isLine) {
+        d.push("L" + currV[0] + "," + currV[1]);
+      } else {
+        d.push("C" + prevO[0] + "," + prevO[1] + "," + currI[0] + "," + currI[1] + "," + currV[0] + "," + currV[1]);
+      }
+    }
+    if (c && len > 0) {
+      const lastV = v[len - 1];
+      const lastO = (_c = o == null ? void 0 : o[len - 1]) != null ? _c : lastV;
+      const firstI = (_d = i == null ? void 0 : i[0]) != null ? _d : v[0];
+      const firstV = v[0];
+      const isLine = !forceCurves && (lastO[0] === lastV[0] && lastO[1] === lastV[1]) && (firstI[0] === firstV[0] && firstI[1] === firstV[1]);
+      if (!isLine) {
+        d.push("C" + lastO[0] + "," + lastO[1] + "," + firstI[0] + "," + firstI[1] + "," + firstV[0] + "," + firstV[1]);
+      }
+      d.push("z");
+    }
+    return d.join("");
+  }
+  function interpolateNum(a, b, t) {
+    return a + (b - a) * t;
+  }
+  function interpolateVec(a, b, t) {
+    const res = [];
+    const count = Math.max(a.length, b.length);
+    for (let i = 0; i < count; i++) {
+      res[i] = interpolateNum(a[i] || 0, b[i] || 0, t);
+    }
+    return res;
+  }
+  function interpolateColor(a, b, t) {
+    return [
+      interpolateNum(a[0] || 0, b[0] || 0, t),
+      interpolateNum(a[1] || 0, b[1] || 0, t),
+      interpolateNum(a[2] || 0, b[2] || 0, t),
+      interpolateNum(a[3] === void 0 ? 1 : a[3], b[3] === void 0 ? 1 : b[3], t)
+    ];
+  }
+  function interpolateBeziers(paths1, paths2, progress) {
+    const count = Math.max(paths1.length, paths2.length);
+    const res = [];
+    for (let i = 0; i < count; i++) {
+      res.push(interpolateBezier(paths1[i], paths2[i], progress));
+    }
+    return res;
+  }
+  function interpolateBezier(path1, path2, progress) {
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
+    if (!path1 || !path2) return path1 || path2 || { v: [] };
+    const t = Math.min(Math.max(progress, 0), 1);
+    const len = Math.min(path1.v.length, path2.v.length);
+    const v = [];
+    const i = [];
+    const o = [];
+    for (let idx = 0; idx < len; idx++) {
+      const v1 = path1.v[idx];
+      const v2 = path2.v[idx];
+      v.push(interpolateVec(v1, v2, t));
+      const i1 = (_b = (_a2 = path1.i) == null ? void 0 : _a2[idx]) != null ? _b : v1;
+      const i2 = (_d = (_c = path2.i) == null ? void 0 : _c[idx]) != null ? _d : v2;
+      i.push(interpolateVec(i1, i2, t));
+      const o1 = (_f = (_e = path1.o) == null ? void 0 : _e[idx]) != null ? _f : v1;
+      const o2 = (_h = (_g = path2.o) == null ? void 0 : _g[idx]) != null ? _h : v2;
+      o.push(interpolateVec(o1, o2, t));
+    }
+    return { v, i: i.length ? i : void 0, o: o.length ? o : void 0, c: (_i = path1.c) != null ? _i : path2.c };
+  }
+  function remap(value, inMin, inMax, outMin, outMax) {
+    if (inMax === inMin) return outMin;
+    const t = (value - inMin) / (inMax - inMin);
+    return outMin + t * (outMax - outMin);
+  }
+  function solveCubicBezierX(p1x, p2x, x) {
+    if (x <= 0) return 0;
+    if (x >= 1) return 1;
+    const cx = 3 * p1x;
+    const bx = 3 * (p2x - p1x) - cx;
+    const ax = 1 - cx - bx;
+    function sampleX(t) {
+      return ((ax * t + bx) * t + cx) * t;
+    }
+    function sampleDX(t) {
+      return (3 * ax * t + 2 * bx) * t + cx;
+    }
+    let t2 = x;
+    let t0 = 0;
+    let t1 = 1;
+    for (let i = 0; i < 8; i++) {
+      const x2 = sampleX(t2) - x;
+      if (Math.abs(x2) < 1e-6) return t2;
+      const d2 = sampleDX(t2);
+      if (Math.abs(d2) < 1e-6) break;
+      t2 -= x2 / d2;
+    }
+    t2 = x;
+    while (t0 < t1) {
+      const x2 = sampleX(t2);
+      if (Math.abs(x2 - x) < 1e-6) return t2;
+      if (x > x2) t0 = t2;
+      else t1 = t2;
+      t2 = (t1 + t0) / 2;
+    }
+    return t2;
+  }
+  function cubicBezier(easing) {
+    const [p1x, p1y, p2x, p2y] = easing;
+    const cy = 3 * p1y;
+    const by = 3 * (p2y - p1y) - cy;
+    const ay = 1 - cy - by;
+    function sampleCurveY(t) {
+      return ((ay * t + by) * t + cy) * t;
+    }
+    return function(x) {
+      return sampleCurveY(solveCubicBezierX(p1x, p2x, x));
+    };
+  }
+  function lerp2(a, b, t) {
+    return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+  }
+  function subdivideCubicBezier(p0, p1, p2, p3, t) {
+    const q0 = lerp2(p0, p1, t);
+    const q1 = lerp2(p1, p2, t);
+    const q2 = lerp2(p2, p3, t);
+    const r0 = lerp2(q0, q1, t);
+    const r1 = lerp2(q1, q2, t);
+    const s = lerp2(r0, r1, t);
+    return {
+      left: [p0, q0, r0, s],
+      right: [s, r1, q2, p3]
+    };
+  }
+  function splitEasing(easing, xFraction) {
+    if (!easing) return { left: void 0, right: void 0 };
+    if (xFraction <= 0) return { left: void 0, right: easing };
+    if (xFraction >= 1) return { left: easing, right: void 0 };
+    const [x1, y1, x2, y2] = easing;
+    const t = solveCubicBezierX(x1, x2, xFraction);
+    const p0 = [0, 0];
+    const p1 = [x1, y1];
+    const p2 = [x2, y2];
+    const p3 = [1, 1];
+    const { left, right } = subdivideCubicBezier(p0, p1, p2, p3, t);
+    const sx = left[3][0];
+    const sy = left[3][1];
+    let leftEasing;
+    if (sx > 1e-9 && Math.abs(sy) > 1e-9) {
+      leftEasing = [
+        left[1][0] / sx,
+        left[1][1] / sy,
+        left[2][0] / sx,
+        left[2][1] / sy
+      ];
+    }
+    let rightEasing;
+    const rx = 1 - sx;
+    const ry = 1 - sy;
+    if (rx > 1e-9 && Math.abs(ry) > 1e-9) {
+      rightEasing = [
+        (right[1][0] - sx) / rx,
+        (right[1][1] - sy) / ry,
+        (right[2][0] - sx) / rx,
+        (right[2][1] - sy) / ry
+      ];
+    }
+    return { left: leftEasing, right: rightEasing };
+  }
+  function reverseEasing(easing) {
+    if (!easing) return void 0;
+    return [1 - easing[2], 1 - easing[3], 1 - easing[0], 1 - easing[1]];
+  }
+  function toRGBA(color) {
+    const r = Math.round(color[0] * 255);
+    const g = Math.round(color[1] * 255);
+    const b = Math.round(color[2] * 255);
+    return color.length === 4 ? "rgba(" + r + "," + g + "," + b + "," + color[3] + ")" : "rgb(" + r + "," + g + "," + b + ")";
+  }
+  function parseRgba(s) {
+    var _a2;
+    const inner = (_a2 = s.match(/rgba?\((.*)\)/)) == null ? void 0 : _a2[1];
+    if (!inner) throw new Error("Invalid rgb/rgba format");
+    const parts = inner.split(",").map((v) => +v.trim());
+    return [parts[0] / 255, parts[1] / 255, parts[2] / 255, ...parts[3] !== void 0 ? [parts[3]] : []];
+  }
+  function parseHex(s) {
+    const hex = s.slice(1);
+    const isShort = hex.length <= 4;
+    const r = isShort ? hex[0] + hex[0] : hex.slice(0, 2);
+    const g = isShort ? hex[1] + hex[1] : hex.slice(2, 4);
+    const b = isShort ? hex[2] + hex[2] : hex.slice(4, 6);
+    const a = hex.length === 4 ? hex[3] + hex[3] : hex.length === 8 ? hex.slice(6, 8) : null;
+    const result = [
+      parseInt(r, 16) / 255,
+      parseInt(g, 16) / 255,
+      parseInt(b, 16) / 255
+    ];
+    if (a !== null) {
+      result.push(parseInt(a, 16) / 255);
+    }
+    return result;
+  }
+  function parseColor(s) {
+    if (!s) return void 0;
+    if (Array.isArray(s)) return s;
+    if (typeof s !== "string") return void 0;
+    if (s.startsWith("#")) {
+      return parseHex(s);
+    } else if (s.startsWith("rgb")) {
+      return parseRgba(s);
+    } else {
+      console.warn("Unsupported color format: " + s);
+    }
+    return void 0;
+  }
+  var PX_COLOR_ATTR_NAMES = /* @__PURE__ */ new Set(["color", "fill", "flood-color", "lighting-color", "stop-color", "stroke"]);
+  var PX_TRANSFORM_FN_NAMES = /* @__PURE__ */ new Set(["translate", "rotate", "scale", "skew"]);
+  var PX_PCT_BASED_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
+  function composeTransformParts(parts, opts) {
+    var _a2;
+    if (!parts) return "";
+    const withUnits = (_a2 = opts == null ? void 0 : opts.withUnits) != null ? _a2 : true;
+    const segs = [];
+    const t = parts.translate;
+    const o = parts.origin;
+    const r = parts.rotate;
+    const k = parts.skew;
+    const s = parts.scale;
+    const tu = withUnits ? "px" : "";
+    const ru = withUnits ? "deg" : "";
+    if (t) segs.push("translate(" + t[0] + tu + "," + t[1] + tu + ")");
+    if (o) segs.push("translate(" + o[0] + tu + "," + o[1] + tu + ")");
+    if (r !== void 0 && r !== null) segs.push("rotate(" + r + ru + ")");
+    if (k !== void 0 && k !== null) segs.push("skewX(" + k + ru + ")");
+    if (s) segs.push("scale(" + s[0] + "," + s[1] + ")");
+    if (o) segs.push("translate(" + -o[0] + tu + "," + -o[1] + tu + ")");
+    return segs.join("");
+  }
+  function parseTransformParts(str2) {
+    var _a2, _b;
+    if (!str2 || typeof str2 !== "string") return void 0;
+    const out = {};
+    const re = /([a-zA-Z]+)\s*\(([^)]*)\)/g;
+    const order = ["translate", "rotate", "skewX", "scale"];
+    let lastIdx = -1;
+    let m;
+    while ((m = re.exec(str2)) !== null) {
+      const fn = m[1];
+      const idx = order.indexOf(fn);
+      if (idx < 0 || idx <= lastIdx) return void 0;
+      lastIdx = idx;
+      const nums = m[2].split(/[\s,]+/).filter(Boolean).map(Number);
+      if (nums.some((n) => Number.isNaN(n))) return void 0;
+      if (fn === "translate") {
+        if (nums.length < 1 || nums.length > 2) return void 0;
+        out.translate = [nums[0], (_a2 = nums[1]) != null ? _a2 : 0];
+      } else if (fn === "rotate") {
+        if (nums.length !== 1) return void 0;
+        out.rotate = nums[0];
+      } else if (fn === "skewX") {
+        if (nums.length !== 1) return void 0;
+        out.skew = nums[0];
+      } else {
+        if (nums.length < 1 || nums.length > 2) return void 0;
+        out.scale = [nums[0], (_b = nums[1]) != null ? _b : nums[0]];
+      }
+    }
+    if (str2.replace(/([a-zA-Z]+)\s*\(([^)]*)\)/g, "").replace(/[\s,]/g, "").length) return void 0;
+    return Object.keys(out).length ? out : void 0;
+  }
+  var PX_STYLE_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
+  var PX_DEFAULT_DURATION_MS = 1e3;
+  function kebabToCamelCaseWord(kebab) {
+    return kebab.includes("-") ? kebab.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()) : kebab;
+  }
+  function isCamelCaseWord(word) {
+    return !word.includes("-") && /[a-z][A-Z]/.test(word);
+  }
+  var SVG_CAMEL_CASE_ATTRS = /* @__PURE__ */ new Set([
+    // Transform/positioning
+    "viewBox",
+    "preserveAspectRatio",
+    // Gradient
+    "gradientUnits",
+    "gradientTransform",
+    "spreadMethod",
+    // Pattern
+    "patternUnits",
+    "patternContentUnits",
+    "patternTransform",
+    // Clipping/masking
+    "clipPathUnits",
+    "maskUnits",
+    "maskContentUnits",
+    // Marker  (SVG spec keeps these camelCase, like viewBox)
+    "markerUnits",
+    "markerWidth",
+    "markerHeight",
+    "refX",
+    "refY",
+    // Text
+    "textLength",
+    "lengthAdjust",
+    "startOffset",
+    // Filter
+    "filterUnits",
+    "primitiveUnits",
+    "tableValues",
+    // feFuncR/G/B/A transfer table (type="table")
+    "stdDeviation",
+    "baseFrequency",
+    "numOctaves",
+    "surfaceScale",
+    "diffuseConstant",
+    "specularConstant",
+    "specularExponent",
+    "kernelMatrix",
+    "kernelUnitLength",
+    "edgeMode",
+    "preserveAlpha",
+    "targetX",
+    "targetY"
+    // // Animation
+    // 'attributeName',
+    // 'attributeType',
+    // 'calcMode',
+    // 'keyTimes',
+    // 'keySplines',
+    // 'repeatCount',
+    // 'repeatDur'    
+  ]);
+  function camelCaseToKebabWordIfNeeded(camel) {
+    return SVG_CAMEL_CASE_ATTRS.has(camel) ? camel : camel.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+  }
+  function clamp(value, min, max) {
+    return Math.max(min, Math.min(value, max));
   }
-  function validateDocument(doc, opts) {
-    var _a2;
-    const strict = (opts == null ? void 0 : opts.strict) !== false;
-    const ctx = { errors: [], warnings: [], strict };
-    const problems = PxAnimatedSvgDocumentSchema.isValid(doc, ctx, ["root"]) ? [] : [...ctx.errors];
-    if (doc && typeof doc === "object") {
-      for (const w of validateNodeEffects(doc, { strict })) {
-        if (!problems.includes(w)) problems.push(w);
-      }
-      const defs = (_a2 = getAnimatorConfig(doc)) == null ? void 0 : _a2.definitions;
-      for (const w of validateGlyphFontRefs(doc, defs == null ? void 0 : defs.fonts)) {
-        if (!problems.includes(w)) problems.push(w);
-      }
-      for (const w of validateEasingRefs(doc, defs == null ? void 0 : defs.easings)) {
-        if (!problems.includes(w)) problems.push(w);
-      }
-      for (const w of validateVersionStamp(doc)) {
-        if (!problems.includes(w)) problems.push(w);
-      }
+  function bezier2D_pointAt(P0, P1, P2, P3, t) {
+    if (t <= 0) return [P0[0], P0[1]];
+    if (t >= 1) return [P3[0], P3[1]];
+    const u = 1 - t;
+    const u2 = u * u;
+    const u3 = u2 * u;
+    const t2 = t * t;
+    const t3 = t2 * t;
+    const w0 = u3;
+    const w1 = 3 * t * u2;
+    const w2 = 3 * t2 * u;
+    const w3 = t3;
+    return [
+      w0 * P0[0] + w1 * P1[0] + w2 * P2[0] + w3 * P3[0],
+      w0 * P0[1] + w1 * P1[1] + w2 * P2[1] + w3 * P3[1]
+    ];
+  }
+  var BEZIER_T_NUDGE = 1e-4;
+  function bezier2D_derivativeAt(P0, P1, P2, P3, t) {
+    const result = _bezier2D_derivativeAtRaw(P0, P1, P2, P3, t);
+    if (result[0] === 0 && result[1] === 0) {
+      const nudgedT = t < 0.5 ? t + BEZIER_T_NUDGE : t - BEZIER_T_NUDGE;
+      return _bezier2D_derivativeAtRaw(P0, P1, P2, P3, nudgedT);
     }
-    return problems;
+    return result;
   }
-  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 (`fillGradient.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(),
-    // The escape hatch for elements that carry a REAL `type` attribute — `<feTurbulence
-    // type="fractalNoise">`, `<feFuncR type="table">`, `<feColorMatrix type="saturate">`.
-    // `type` is taken by the tag name, so the attribute travels here and the renderer puts
-    // it back (`PxAnimatorDOM.renderNode`, `PxRnRender`). Declared here — not merely
-    // documented — because a wire key that is not in a schema is invisible to the
-    // minifier's reserve list and gets renamed (MINIFICATION-BOUNDARY-PLAN.md §1.1).
-    domType: px.string().optional(),
-    // Text content of a `<text>` / `<tspan>`. Declared, so a non-string value is a schema error
-    // and the minifier reserves the key; `text` is NOT an alias for it and is not read anywhere.
-    textContent: px.string().optional(),
-    id: px.string().optional(),
-    meta: px.any().optional(),
-    // Player-effects bucket emitted by the Editor's lightweight design format.
-    // Consumed and removed by `applyPlayerEffects` before any other normalization
-    // (see `createAnimatorImpl`), so downstream code never sees it.
-    effects: PxEffectsSchema.optional(),
-    // `PxElementAnimation` (not just `PxAnimationDefinition`) — accepts
-    // string ref / array of refs / inline definition / mixed array; mirrors
-    // `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(__spreadProps(__spreadValues({}, PxNodeBase._shape), {
-    children: px.lazy(() => px.array(PxNodeSchema), []).optional()
-  }), PxAttrValueSchema);
-  var PxSvgNodeExtra = px.object({
-    // `"100%"` and other SVG length strings are legal here — a number-only slot rejected
-    // real documents (e.g. apple-store-look-14-main.json) at the root <svg>.
-    width: px.union([px.number(), px.string()]).optional(),
-    height: px.union([px.number(), px.string()]).optional(),
-    viewBox: px.string().optional(),
-    animator: PxAnimatorConfigSchema.optional()
-  });
-  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()
-  }), PxAttrValueSchema);
-  var PxBezierPathSchema = implementsInterface()(px.object({
-    v: px.array(px.array(px.number())),
-    i: px.array(px.array(px.number())).optional(),
-    o: px.array(px.array(px.number())).optional(),
-    c: px.boolean().optional()
-  }));
-
-  // ../svg-animator-core/src/util/PxIdUtil.ts
-  var _idCounter = 0;
-  function generateUniqueId() {
-    const timestamp = Date.now().toString(36);
-    const counter = (++_idCounter).toString(36);
-    const random = Math.random().toString(36).substring(2, 6);
-    return "_px_" + timestamp + counter + random;
+  function _bezier2D_derivativeAtRaw(P0, P1, P2, P3, t) {
+    const u = 1 - t;
+    const a = 3 * u * u;
+    const b = 6 * t * u;
+    const c = 3 * t * t;
+    return [
+      a * (P1[0] - P0[0]) + b * (P2[0] - P1[0]) + c * (P3[0] - P2[0]),
+      a * (P1[1] - P0[1]) + b * (P2[1] - P1[1]) + c * (P3[1] - P2[1])
+    ];
   }
-  function deepClone(value) {
-    if (value === null || typeof value !== "object") return value;
-    if (Array.isArray(value)) return value.map((item) => deepClone(item));
-    const obj = value;
-    const cloned = {};
-    for (const key of Object.keys(obj)) {
-      cloned[key] = deepClone(obj[key]);
+  function bezier2D_arcLengthLUT(P0, P1, P2, P3, steps = 100) {
+    const n = steps + 1;
+    const ts = new Float64Array(n);
+    const ds = new Float64Array(n);
+    let prev = bezier2D_pointAt(P0, P1, P2, P3, 0);
+    ts[0] = 0;
+    ds[0] = 0;
+    let cum = 0;
+    for (let i = 1; i < n; i++) {
+      const t = i / steps;
+      const cur = bezier2D_pointAt(P0, P1, P2, P3, t);
+      const dx = cur[0] - prev[0];
+      const dy = cur[1] - prev[1];
+      cum += Math.sqrt(dx * dx + dy * dy);
+      ts[i] = t;
+      ds[i] = cum;
+      prev = cur;
     }
-    return cloned;
+    return { ts, ds };
   }
-  function generateNewIds(doc) {
-    var _a2, _b;
-    const cloned = deepClone(doc);
-    const idMap = /* @__PURE__ */ new Map();
-    const hashRefAttrs = /* @__PURE__ */ new Set(["href", "xlink:href"]);
-    const urlRefAttrs = /* @__PURE__ */ new Set([
-      "fill",
-      "stroke",
-      "clip-path",
-      "clipPath",
-      "mask",
-      "marker",
-      "marker-start",
-      "marker-mid",
-      "marker-end",
-      "filter",
-      "flood-color",
-      "lighting-color"
-    ]);
-    const directIdRefAttrs = /* @__PURE__ */ new Set(["targetId", "boundElementId"]);
-    const isEffectSourceRef = (key, parentKey) => key === "source" && (parentKey === "maskedBy" || parentKey === "clone");
-    function collectIds(node) {
-      if (!node || typeof node !== "object") return;
-      if (node.id && typeof node.id === "string") {
-        const oldId = node.id;
-        const newId = generateUniqueId();
-        idMap.set(oldId, newId);
-        node.id = newId;
-      } else if (node.animate) {
-        node.id = generateUniqueId();
-      }
-      if (Array.isArray(node.children)) {
-        for (const child of node.children) {
-          collectIds(child);
-        }
-      }
-    }
-    function updateRefs(node, parentKey) {
-      if (!node || typeof node !== "object") return;
-      for (const [key, value] of Object.entries(node)) {
-        if (key === "children") {
-          if (Array.isArray(value)) {
-            for (const child of value) {
-              updateRefs(child);
-            }
-          }
-          continue;
-        }
-        if (typeof value === "string") {
-          if (hashRefAttrs.has(key) && value.startsWith("#")) {
-            const oldId = value.slice(1);
-            const newId = idMap.get(oldId);
-            if (newId) {
-              node[key] = "#" + newId;
-            }
-          } else if (urlRefAttrs.has(key)) {
-            node[key] = replaceUrlRefs(value, idMap);
-          } else if (directIdRefAttrs.has(key) || isEffectSourceRef(key, parentKey)) {
-            const hasHash = value.startsWith("#");
-            const newId = idMap.get(hasHash ? value.slice(1) : value);
-            if (newId) {
-              node[key] = hasHash ? "#" + newId : newId;
-            }
-          } else if (value.includes("url(#")) {
-            node[key] = replaceUrlRefs(value, idMap);
-          }
-        } else if (key === "style" && typeof value === "object" && value !== null) {
-          for (const [styleProp, styleValue] of Object.entries(value)) {
-            if (typeof styleValue === "string") {
-              value[styleProp] = replaceUrlRefs(styleValue, idMap);
-            }
-          }
-        } else if (typeof value === "object" && value !== null) {
-          updateRefs(value, key);
-        }
-      }
+  function bezier2D_tForDistance(lut, distance) {
+    const { ts, ds } = lut;
+    const last = ds.length - 1;
+    if (distance <= 0) return ts[0];
+    if (distance >= ds[last]) return ts[last];
+    let lo = 1;
+    let hi = last;
+    while (lo < hi) {
+      const mid = lo + hi >>> 1;
+      if (ds[mid] < distance) lo = mid + 1;
+      else hi = mid;
     }
-    collectIds(cloned);
-    updateRefs(cloned);
-    const docAnimate = (_a2 = cloned.animator) == null ? void 0 : _a2.animateById;
-    if (docAnimate && typeof docAnimate === "object") {
-      const updatedAnimate = {};
-      for (const [key, anim] of Object.entries(docAnimate)) {
-        const hashed = key.startsWith("#");
-        const id = hashed ? key.slice(1) : key;
-        const newId = (_b = idMap.get(id)) != null ? _b : id;
-        updatedAnimate[hashed ? "#" + newId : newId] = anim;
-      }
-      cloned.animator = __spreadProps(__spreadValues({}, cloned.animator), { animateById: updatedAnimate });
+    const dPrev = ds[hi - 1];
+    const dCur = ds[hi];
+    const span = dCur - dPrev;
+    const frac = span > 0 ? (distance - dPrev) / span : 0;
+    return ts[hi - 1] + frac * (ts[hi] - ts[hi - 1]);
+  }
+  function bezier2D_arcAtT(lut, t) {
+    const { ts, ds } = lut;
+    const last = ts.length - 1;
+    if (t <= ts[0]) return ds[0];
+    if (t >= ts[last]) return ds[last];
+    let lo = 1, hi = last;
+    while (lo < hi) {
+      const mid = lo + hi >>> 1;
+      if (ts[mid] < t) lo = mid + 1;
+      else hi = mid;
     }
-    return cloned;
+    const tPrev = ts[hi - 1];
+    const span = ts[hi] - tPrev;
+    const frac = span > 0 ? (t - tPrev) / span : 0;
+    return ds[hi - 1] + frac * (ds[hi] - ds[hi - 1]);
   }
-  function replaceUrlRefs(value, idMap) {
-    return value.replace(/url\(#([^)]+)\)/g, (match, oldId) => {
-      const newId = idMap.get(oldId);
-      return newId ? "url(#" + newId + ")" : match;
-    });
+  function invertEasing(easing) {
+    if (!easing) return (y) => y;
+    const flipped = [easing[1], easing[0], easing[3], easing[2]];
+    return cubicBezier(flipped);
   }
 
   // ../svg-animator-core/src/util/PxNodeProps.ts
-  var DISALLOWED_SVG_TAGS_LOWER = /* @__PURE__ */ new Set([
+  var PX_DISALLOWED_SVG_TAGS_LOWER = /* @__PURE__ */ new Set([
     "script",
     "foreignobject"
   ]);
@@ -1953,7 +1892,7 @@ var PixodeskAnimator = (() => {
     // marker-end="url(#…)"
   ]);
   var IMAGE_REF_ATTRS_LOWER = /* @__PURE__ */ new Set(["href", "xlink:href", "src"]);
-  var CSS_ONLY_STYLE_PROPS = /* @__PURE__ */ new Set(["mixBlendMode", "isolation"]);
+  var PX_CSS_ONLY_STYLE_PROPS = /* @__PURE__ */ new Set(["mixBlendMode", "isolation"]);
   var DATA_RASTER_IMAGE_RE = /^data:image\/(?:png|jpe?g|gif|webp|bmp);base64,/i;
   var DATA_SVG_IMAGE_RE = /^data:image\/svg\+xml(?:;[^,]*)?,/i;
   var DATA_IMAGE_BASE64_PAYLOAD_RE = /^data:image\/[^;,]*;base64,([A-Za-z0-9+/]{8})/i;
@@ -1990,27 +1929,19 @@ var PixodeskAnimator = (() => {
     }
     return value;
   }
-  function resolveStyle(style, defs) {
-    var _a2;
-    if (!style) return void 0;
-    if (typeof style === "string") {
-      return (_a2 = defs == null ? void 0 : defs.styles) == null ? void 0 : _a2[style];
-    }
-    return style;
-  }
-  function getNormalizedProps(props) {
+  function toDomProps(props) {
     const propsCopy = {};
     for (const rawKey of Object.keys(props)) {
       const key = kebabToCamelCaseWord(rawKey);
       if (INTERNAL_ATTRS.has(key)) continue;
       if (key === "style") continue;
       let value = props[rawKey];
-      if (COLOR_ATTR_NAMES.has(key) && Array.isArray(value)) {
+      if (PX_COLOR_ATTR_NAMES.has(key) && Array.isArray(value)) {
         propsCopy[key] = toRGBA(value);
       } else if (key === "transform" && value !== null && typeof value === "object" && !Array.isArray(value) && !value.keyframes) {
         const parts = value.value && typeof value.value === "object" ? value.value : value;
         propsCopy[TRANSFORM_ATTR] = composeTransformParts(parts, { withUnits: false });
-      } else if (TRANSFORM_FN_NAMES.has(key)) {
+      } else if (PX_TRANSFORM_FN_NAMES.has(key)) {
         if (Array.isArray(value)) {
           if (key === "translate") value = value.map((v) => v + "px");
           value = value.join(",");
@@ -2028,7 +1959,7 @@ var PixodeskAnimator = (() => {
 
   // ../svg-animator-core/src/materialize/PxMotionPath.ts
   function getKfTranslate(kf) {
-    const v = kfValue(kf);
+    const v = keyframeValue(kf);
     if (!v) return void 0;
     if (Array.isArray(v) && v.length >= 2 && typeof v[0] === "number" && typeof v[1] === "number") {
       return [v[0], v[1]];
@@ -2038,17 +1969,17 @@ var PixodeskAnimator = (() => {
     return void 0;
   }
   function getKfTime(kf) {
-    return kfTime(kf);
+    return keyframeTime(kf);
   }
   function getKfEasing(kf) {
-    return kfEasing(kf);
+    return keyframeEasing(kf);
   }
   function propAnimIsMotionPath(anim) {
     const kfs = anim.keyframes;
     if (!Array.isArray(kfs)) return false;
     if (anim.autoOrient) return true;
     for (const kf of kfs) {
-      if (kfTangentIn(kf) || kfTangentOut(kf)) return true;
+      if (keyframeTangentIn(kf) || keyframeTangentOut(kf)) return true;
     }
     return false;
   }
@@ -2057,8 +1988,8 @@ var PixodeskAnimator = (() => {
     let byNext = _segmentCache.get(prevKf);
     const existing = byNext == null ? void 0 : byNext.get(nextKf);
     if (existing) return existing;
-    const to = kfTangentOut(prevKf);
-    const ti = kfTangentIn(nextKf);
+    const to = keyframeTangentOut(prevKf);
+    const ti = keyframeTangentIn(nextKf);
     const P1 = [prevPos[0] + (to ? to[0] : 0), prevPos[1] + (to ? to[1] : 0)];
     const P2 = [nextPos[0] + (ti ? ti[0] : 0), nextPos[1] + (ti ? ti[1] : 0)];
     const lut = bezier2D_arcLengthLUT(prevPos, P1, P2, nextPos);
@@ -2151,7 +2082,7 @@ var PixodeskAnimator = (() => {
   function unwrapAutoOrientRotations(kfs) {
     let prev;
     for (const kf of kfs) {
-      const v = kfValue(kf);
+      const v = keyframeValue(kf);
       if (!v || typeof v.rotate !== "number") continue;
       if (prev === void 0) {
         prev = v.rotate;
@@ -2168,7 +2099,7 @@ var PixodeskAnimator = (() => {
     return { t: time, v: value };
   }
   function getKfValueParts(kf) {
-    const v = kfValue(kf);
+    const v = keyframeValue(kf);
     if (!v || typeof v !== "object" || Array.isArray(v)) return void 0;
     return v;
   }
@@ -2230,7 +2161,7 @@ var PixodeskAnimator = (() => {
   }
   function insertSharpCornerStepKfIfNeeded(out, prevKf, nextKf, prevPos, nextPos, rotationTol) {
     const lastKf = out[out.length - 1];
-    const lastV = kfValue(lastKf);
+    const lastV = keyframeValue(lastKf);
     const prevExit = lastV == null ? void 0 : lastV.rotate;
     if (typeof prevExit !== "number") return;
     const boundaryV = getKfValueParts(prevKf);
@@ -2412,7 +2343,7 @@ var PixodeskAnimator = (() => {
   }
 
   // ../svg-animator-core/src/animation/PxDefinitions.ts
-  var LOOP_JUMP_SHIFT_MS = 1;
+  var PX_LOOP_JUMP_SHIFT_MS = 1;
   function deepEqualValue(a, b) {
     if (a === b) return true;
     if (typeof a !== typeof b || a === null || b === null || typeof a !== "object") return false;
@@ -2588,7 +2519,7 @@ var PixodeskAnimator = (() => {
       const bPaths = (_b = b == null ? void 0 : b.paths) != null ? _b : Array.isArray(b) ? b : [];
       return { paths: interpolateBeziers(aPaths, bPaths, t) };
     }
-    if (COLOR_ATTR_NAMES.has(propName)) {
+    if (PX_COLOR_ATTR_NAMES.has(propName)) {
       return interpolateColor(a || [0, 0, 0, 1], b || [0, 0, 0, 1], t);
     }
     if (propName === "transform" && typeof a === "object" && a !== null && !Array.isArray(a) && typeof b === "object" && b !== null && !Array.isArray(b)) {
@@ -2597,7 +2528,7 @@ var PixodeskAnimator = (() => {
     if (propName === "rotate" && typeof a === "number" && typeof b === "number") {
       return interpolateNum(a, b, t);
     }
-    if (TRANSFORM_FN_NAMES.has(propName) || propName === "stroke-dasharray" || propName === "strokeDasharray") {
+    if (PX_TRANSFORM_FN_NAMES.has(propName) || propName === "stroke-dasharray" || propName === "strokeDasharray") {
       return interpolateVec(a || [], b || [], t);
     }
     return interpolateNum(+(a || 0), +(b || 0), t);
@@ -2649,8 +2580,8 @@ var PixodeskAnimator = (() => {
       relT: (kf.t - segStartT) / segDuration,
       v: kf.v,
       e: kf.e,
-      tangentIn: kfTangentIn(kf),
-      tangentOut: kfTangentOut(kf)
+      tangentIn: keyframeTangentIn(kf),
+      tangentOut: keyframeTangentOut(kf)
     }));
     const fullReps = Math.floor(fillDuration / segDuration);
     const remainder = fillDuration - fullReps * segDuration;
@@ -2716,7 +2647,7 @@ var PixodeskAnimator = (() => {
           }
         }
         const pushed = {
-          t: repStart + entry.relT * segDuration + (isBoundary ? LOOP_JUMP_SHIFT_MS : 0),
+          t: repStart + entry.relT * segDuration + (isBoundary ? PX_LOOP_JUMP_SHIFT_MS : 0),
           v: entry.v,
           e: i < entries.length - 1 ? entry.e : void 0
         };
@@ -2803,14 +2734,14 @@ var PixodeskAnimator = (() => {
     const keyframes = propAnim.keyframes || [];
     const normalized = [];
     for (const kf of keyframes) {
-      const timePct = kfTime(kf);
-      let value = kfValue(kf);
-      const easing = kfEasing(kf);
+      const timePct = keyframeTime(kf);
+      let value = keyframeValue(kf);
+      const easing = keyframeEasing(kf);
       if (propName === "d") {
         value = normalizePathValue(value);
       }
       const propNameKebab = isCamelCaseWord(propName) ? camelCaseToKebabWordIfNeeded(propName) : propName;
-      if (COLOR_ATTR_NAMES.has(propNameKebab)) {
+      if (PX_COLOR_ATTR_NAMES.has(propNameKebab)) {
         value = (_a2 = parseColor(value)) != null ? _a2 : value;
       }
       const normKf = {
@@ -2818,8 +2749,8 @@ var PixodeskAnimator = (() => {
         v: value,
         e: resolveEasing(easing, defs)
       };
-      const tIn = kfTangentIn(kf);
-      const tOut = kfTangentOut(kf);
+      const tIn = keyframeTangentIn(kf);
+      const tOut = keyframeTangentOut(kf);
       if (tIn) normKf.tangentIn = tIn;
       if (tOut) normKf.tangentOut = tOut;
       normalized.push(normKf);
@@ -2851,17 +2782,17 @@ var PixodeskAnimator = (() => {
     const rawKfs = propAnim.keyframes;
     if (!Array.isArray(rawKfs) || rawKfs.length < 2) return propAnim;
     const propNameKebab = isCamelCaseWord(propName) ? camelCaseToKebabWordIfNeeded(propName) : propName;
-    const isColor = COLOR_ATTR_NAMES.has(propNameKebab);
+    const isColor = PX_COLOR_ATTR_NAMES.has(propNameKebab);
     const kfs = rawKfs.map((kf) => {
       var _a2;
-      const t = kfTime(kf);
-      let v = kfValue(kf);
+      const t = keyframeTime(kf);
+      let v = keyframeValue(kf);
       if (propName === "d") v = normalizePathValue(v);
       if (isColor) v = (_a2 = parseColor(v)) != null ? _a2 : v;
-      const e = kfEasing(kf);
+      const e = keyframeEasing(kf);
       const out2 = { t, v, e };
-      const tIn = kfTangentIn(kf);
-      const tOut = kfTangentOut(kf);
+      const tIn = keyframeTangentIn(kf);
+      const tOut = keyframeTangentOut(kf);
       if (tIn) out2.tangentIn = tIn;
       if (tOut) out2.tangentOut = tOut;
       return out2;
@@ -2926,7 +2857,7 @@ var PixodeskAnimator = (() => {
       }
       return animDef;
     }
-    const channels = Object.keys(animDef).filter((k) => TRANSFORM_FN_NAMES.has(k));
+    const channels = Object.keys(animDef).filter((k) => PX_TRANSFORM_FN_NAMES.has(k));
     if (channels.length !== 1) return animDef;
     const ch = channels[0];
     const chAnim = animDef[ch];
@@ -2955,14 +2886,12 @@ var PixodeskAnimator = (() => {
     }
     return normalized;
   }
-  function getNormalizedBindings(doc, engine = PxTimelineEngine.native) {
+  function normalizeBindings(doc, engine = PxTimelineEngine.native) {
     const animatorConfig = getAnimatorConfig(doc) || {};
-    const defs = getDefs(doc);
+    const defs = getDefinitions(doc);
     const duration = animatorConfig.duration || 1e3;
     const bindings = [];
-    const processAnimation = (id, animate, staticTransform) => {
-      if (!animate) return null;
-      const animDefs = resolveElementAnimation(animate, defs);
+    const processAnimation = (id, animDefs, staticTransform) => {
       if (animDefs.length === 0) return null;
       const merged = mergeStaticTransformIntoAnimDef(mergeAnimationDefinitions(animDefs), staticTransform);
       const normalizedAnim = normalizeAnimationDefinition(merged, duration, defs, engine);
@@ -2975,7 +2904,9 @@ var PixodeskAnimator = (() => {
     const docBindings = getBindings(doc);
     if (docBindings) {
       for (const binding of docBindings) {
-        const normalized = processAnimation(binding.id, binding.animate);
+        const id = binding.target.startsWith("#") ? binding.target.slice(1) : binding.target;
+        const animDefs = binding.animateWith.map((name) => resolveAnimation(name, defs)).filter((d) => !!d);
+        const normalized = processAnimation(id, animDefs);
         if (normalized) bindings.push(normalized);
       }
     }
@@ -2984,7 +2915,7 @@ var PixodeskAnimator = (() => {
       if (inlineAnim && Object.keys(inlineAnim).length > 0) {
         const nodeId = node.id || generateElementId();
         node.id = nodeId;
-        const normalized = processAnimation(nodeId, inlineAnim, node.transform);
+        const normalized = processAnimation(nodeId, resolveElementAnimation(inlineAnim, defs), node.transform);
         if (normalized) bindings.push(normalized);
       }
       if (node.children) {
@@ -3027,7 +2958,7 @@ var PixodeskAnimator = (() => {
     const { prevKf, nextKf } = getKeyframesPair(keyframes, progress);
     let localProgress = prevKf === nextKf ? 0 : remap(progress, (_a2 = prevKf.t) != null ? _a2 : 0, (_b = nextKf.t) != null ? _b : 0, 0, 1);
     localProgress = clamp(localProgress, 0, 1);
-    const easing = kfEasing(prevKf);
+    const easing = keyframeEasing(prevKf);
     if (easing && Array.isArray(easing)) {
       try {
         localProgress = cubicBezier(easing)(localProgress);
@@ -3046,7 +2977,7 @@ var PixodeskAnimator = (() => {
         nextPaths,
         localProgress
       ).map((bz) => bezierToSvgPath(bz)).join("");
-    } else if (COLOR_ATTR_NAMES.has(cssAttrName)) {
+    } else if (PX_COLOR_ATTR_NAMES.has(cssAttrName)) {
       cssValue = toRGBA(interpolateColor(
         prevV || [0, 0, 0, 1],
         nextV || [0, 0, 0, 1],
@@ -3127,7 +3058,7 @@ var PixodeskAnimator = (() => {
       );
       cssValue = num;
     }
-    if (PCT_BASED_ATTR_NAMES.has(cssAttrName) && typeof cssValue === "number") {
+    if (PX_PCT_BASED_ATTR_NAMES.has(cssAttrName) && typeof cssValue === "number") {
       cssValue = cssValue * 100 + "%";
     }
     return { k: cssAttrName, v: cssValue === null ? "" : "" + cssValue };
@@ -3143,218 +3074,6 @@ var PixodeskAnimator = (() => {
     return result;
   }
 
-  // ../svg-animator-core/src/util/PxNodeCloneUtil.ts
-  function deepClonePxNode(value) {
-    if (value === null || typeof value !== "object") return value;
-    if (Array.isArray(value)) return value.map(deepClonePxNode);
-    const out = {};
-    for (const k of Object.keys(value)) out[k] = deepClonePxNode(value[k]);
-    return out;
-  }
-  function regenerateIdsAndRewriteRefs(root, genId3) {
-    const oldToNew = /* @__PURE__ */ new Map();
-    const walkAssign = (n) => {
-      var _a2;
-      if (typeof n.id === "string") {
-        const newId = genId3();
-        oldToNew.set(n.id, newId);
-        n.id = newId;
-      }
-      (_a2 = n.children) == null ? void 0 : _a2.forEach(walkAssign);
-    };
-    walkAssign(root);
-    const rewriteUrl = (s) => s.replace(/url\(#([^)]+)\)/g, (m, oldId) => {
-      const newId = oldToNew.get(oldId);
-      return newId ? "url(#" + newId + ")" : m;
-    });
-    const walkRewrite = (n) => {
-      var _a2;
-      if (typeof n.href === "string" && n.href.startsWith("#")) {
-        const newId = oldToNew.get(n.href.slice(1));
-        if (newId) n.href = "#" + newId;
-      }
-      for (const k of Object.keys(n)) {
-        if (k === "children" || k === "effects" || k === "meta" || k === "animate" || k === "href" || k === "id") continue;
-        const v = n[k];
-        if (typeof v === "string" && v.indexOf("url(#") !== -1) {
-          n[k] = rewriteUrl(v);
-        }
-      }
-      (_a2 = n.children) == null ? void 0 : _a2.forEach(walkRewrite);
-    };
-    walkRewrite(root);
-    return oldToNew;
-  }
-  function toFiniteNum(v) {
-    const n = typeof v === "number" ? v : typeof v === "string" ? parseFloat(v) : NaN;
-    return Number.isFinite(n) ? n : 0;
-  }
-  function applyUseOffsetToG(gNode) {
-    var _a2;
-    const x = toFiniteNum(gNode.x);
-    const y = toFiniteNum(gNode.y);
-    delete gNode.x;
-    delete gNode.y;
-    if (!x && !y) return gNode;
-    const offset = "translate(" + x + "," + y + ")";
-    const carriesTransform = gNode.transform !== void 0 || gNode.animate !== void 0;
-    if (carriesTransform) {
-      const inner = { type: "g", transform: offset, children: (_a2 = gNode.children) != null ? _a2 : [] };
-      gNode.children = [inner];
-    } else {
-      gNode.transform = offset;
-    }
-    return gNode;
-  }
-
-  // ../svg-animator-core/src/materialize/PxAnimatorUseMaterializer.ts
-  function materializeAnimatedUseInstances(root) {
-    var _a2;
-    const idMap = buildIdMap(root);
-    const animatedIds = computeAnimatedSubtreeIds(root, idMap);
-    if (animatedIds.size === 0) return root;
-    let idCounter = 0;
-    const genId3 = () => "_lw_use_mat_" + ++idCounter;
-    const rootViewport = readRootViewport(root);
-    const defsCollector = [];
-    const walked = walkAndMaterialize2(root, idMap, animatedIds, genId3, defsCollector, rootViewport);
-    if (defsCollector.length === 0) return walked;
-    const defsNode = { type: "defs", children: defsCollector };
-    const newChildren = [...(_a2 = walked.children) != null ? _a2 : [], defsNode];
-    return __spreadProps(__spreadValues({}, walked), { children: newChildren });
-  }
-  function readRootViewport(root) {
-    const vb = parseViewBox(root.viewBox);
-    if (vb) return [vb[2], vb[3]];
-    const w = numericAttr(root.width);
-    const h = numericAttr(root.height);
-    if (w !== void 0 && h !== void 0) return [w, h];
-    return [1, 1];
-  }
-  function numericAttr(v) {
-    if (typeof v === "number") return v;
-    if (typeof v === "string") {
-      const n = parseFloat(v);
-      return Number.isFinite(n) ? n : void 0;
-    }
-    return void 0;
-  }
-  function buildIdMap(root) {
-    const map = /* @__PURE__ */ new Map();
-    const visit = (n) => {
-      var _a2;
-      if (typeof n.id === "string") map.set(n.id, n);
-      (_a2 = n.children) == null ? void 0 : _a2.forEach(visit);
-    };
-    visit(root);
-    return map;
-  }
-  function computeAnimatedSubtreeIds(root, idMap) {
-    const cache = /* @__PURE__ */ new WeakMap();
-    const result = /* @__PURE__ */ new Set();
-    const hasAnim = (n, visiting) => {
-      const cached = cache.get(n);
-      if (cached !== void 0) return cached;
-      if (visiting.has(n)) return false;
-      visiting.add(n);
-      let r = false;
-      if (n.animate && typeof n.animate === "object" && !Array.isArray(n.animate)) {
-        for (const _ in n.animate) {
-          r = true;
-          break;
-        }
-      }
-      if (!r && n.children) {
-        for (const ch of n.children) {
-          if (hasAnim(ch, visiting)) {
-            r = true;
-            break;
-          }
-        }
-      }
-      if (!r && n.type === "use" && typeof n.href === "string") {
-        const targetId = stripHash(n.href);
-        const target = targetId ? idMap.get(targetId) : void 0;
-        if (target) r = hasAnim(target, visiting);
-      }
-      visiting.delete(n);
-      cache.set(n, r);
-      return r;
-    };
-    for (const [id, node] of idMap) {
-      if (hasAnim(node, /* @__PURE__ */ new Set())) result.add(id);
-    }
-    return result;
-  }
-  function stripHash(href) {
-    if (typeof href !== "string") return void 0;
-    return href.startsWith("#") ? href.slice(1) : href;
-  }
-  function materializeOneUse(useNode, target, idMap, animatedIds, genId3, defsCollector, rootViewport) {
-    var _a2, _b, _c, _d;
-    const clone2 = deepClonePxNode(target);
-    regenerateIdsAndRewriteRefs(clone2, genId3);
-    const symbolViewBox = clone2.type === "symbol" ? parseViewBox(clone2.viewBox) : void 0;
-    const useW = (_b = (_a2 = numericAttr(useNode.width)) != null ? _a2 : symbolViewBox == null ? void 0 : symbolViewBox[2]) != null ? _b : rootViewport[0];
-    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 materializedClone = walkAndMaterialize2(rewrittenClone, idMap, animatedIds, genId3, defsCollector, rootViewport);
-    const newNode = __spreadProps(__spreadValues({}, useNode), { type: "g", children: [materializedClone] });
-    delete newNode.href;
-    delete newNode.width;
-    delete newNode.height;
-    return applyUseOffsetToG(newNode);
-  }
-  function rewriteSymbolRootToGroup(symbolNode, genId3, defsCollector, useW, useH) {
-    const viewBox = parseViewBox(symbolNode.viewBox);
-    const g = __spreadProps(__spreadValues({}, symbolNode), { type: "g" });
-    delete g.viewBox;
-    delete g.preserveAspectRatio;
-    delete g.width;
-    delete g.height;
-    if (!viewBox) return g;
-    const [vbX, vbY, vbW, vbH] = viewBox;
-    const scale = vbW > 0 && vbH > 0 ? Math.min(useW / vbW, useH / vbH) : 1;
-    const xOff = (useW - vbW * scale) / 2;
-    const yOff = (useH - vbH * scale) / 2;
-    const parts = [];
-    if (xOff !== 0 || yOff !== 0) parts.push("translate(" + xOff + "," + yOff + ")");
-    if (scale !== 1) parts.push("scale(" + scale + ")");
-    if (vbX !== 0 || vbY !== 0) parts.push("translate(" + -vbX + "," + -vbY + ")");
-    if (parts.length) g.transform = parts.join("");
-    const clipId = genId3();
-    defsCollector.push({
-      type: "clipPath",
-      id: clipId,
-      children: [{ type: "rect", x: vbX, y: vbY, width: vbW, height: vbH }]
-    });
-    g.clipPath = "url(#" + clipId + ")";
-    return g;
-  }
-  function parseViewBox(v) {
-    if (typeof v !== "string") return void 0;
-    const parts = v.trim().split(/[\s,]+/).map(Number);
-    if (parts.length < 4 || parts.some((n) => !Number.isFinite(n))) return void 0;
-    return [parts[0], parts[1], parts[2], parts[3]];
-  }
-  function walkAndMaterialize2(node, idMap, animatedIds, genId3, defsCollector, rootViewport) {
-    if (node.type === "use" && typeof node.href === "string") {
-      const targetId = stripHash(node.href);
-      if (targetId && animatedIds.has(targetId)) {
-        const target = idMap.get(targetId);
-        if (target) return materializeOneUse(node, target, idMap, animatedIds, genId3, defsCollector, rootViewport);
-      }
-    }
-    if (!node.children) return node;
-    let changed = false;
-    const newChildren = node.children.map((ch) => {
-      const m = walkAndMaterialize2(ch, idMap, animatedIds, genId3, defsCollector, rootViewport);
-      if (m !== ch) changed = true;
-      return m;
-    });
-    return changed ? __spreadProps(__spreadValues({}, node), { children: newChildren }) : node;
-  }
-
   // ../svg-animator-core/src/effects/shared/transformParts.ts
   function partsRecord(part, value, origin) {
     const rec = {};
@@ -3520,14 +3239,78 @@ var PixodeskAnimator = (() => {
         children: [inner]
       };
     }
-    return inner;
+    return inner;
+  }
+
+  // ../svg-animator-core/src/util/PxNodeCloneUtil.ts
+  function deepClonePxNode(value) {
+    if (value === null || typeof value !== "object") return value;
+    if (Array.isArray(value)) return value.map(deepClonePxNode);
+    const out = {};
+    for (const k of Object.keys(value)) out[k] = deepClonePxNode(value[k]);
+    return out;
+  }
+  function regenerateIdsAndRewriteRefs(root, genId3) {
+    const oldToNew = /* @__PURE__ */ new Map();
+    const walkAssign = (n) => {
+      var _a2;
+      if (typeof n.id === "string") {
+        const newId = genId3();
+        oldToNew.set(n.id, newId);
+        n.id = newId;
+      }
+      (_a2 = n.children) == null ? void 0 : _a2.forEach(walkAssign);
+    };
+    walkAssign(root);
+    const rewriteUrl = (s) => s.replace(/url\(#([^)]+)\)/g, (m, oldId) => {
+      const newId = oldToNew.get(oldId);
+      return newId ? "url(#" + newId + ")" : m;
+    });
+    const walkRewrite = (n) => {
+      var _a2;
+      if (typeof n.href === "string" && n.href.startsWith("#")) {
+        const newId = oldToNew.get(n.href.slice(1));
+        if (newId) n.href = "#" + newId;
+      }
+      for (const k of Object.keys(n)) {
+        if (k === "children" || k === "effects" || k === "meta" || k === "animate" || k === "href" || k === "id") continue;
+        const v = n[k];
+        if (typeof v === "string" && v.indexOf("url(#") !== -1) {
+          n[k] = rewriteUrl(v);
+        }
+      }
+      (_a2 = n.children) == null ? void 0 : _a2.forEach(walkRewrite);
+    };
+    walkRewrite(root);
+    return oldToNew;
+  }
+  function toFiniteNum(v) {
+    const n = typeof v === "number" ? v : typeof v === "string" ? parseFloat(v) : NaN;
+    return Number.isFinite(n) ? n : 0;
+  }
+  function applyUseOffsetToG(gNode) {
+    var _a2;
+    const x = toFiniteNum(gNode.x);
+    const y = toFiniteNum(gNode.y);
+    delete gNode.x;
+    delete gNode.y;
+    if (!x && !y) return gNode;
+    const offset = "translate(" + x + "," + y + ")";
+    const carriesTransform = gNode.transform !== void 0 || gNode.animate !== void 0;
+    if (carriesTransform) {
+      const inner = { type: "g", transform: offset, children: (_a2 = gNode.children) != null ? _a2 : [] };
+      gNode.children = [inner];
+    } else {
+      gNode.transform = offset;
+    }
+    return gNode;
   }
 
   // ../svg-animator-core/src/effects/shared/util.ts
   function genId(ctx, prefix) {
     return "_lw_" + prefix + "_" + ctx.nextId++;
   }
-  function stripHash2(href) {
+  function stripHash(href) {
     return typeof href === "string" ? href.replace(/^#/, "") : void 0;
   }
   function indexById(node, map) {
@@ -3549,7 +3332,7 @@ var PixodeskAnimator = (() => {
   function identifyContentRefTargets(node, ctx, allocator) {
     var _a2, _b, _c;
     if (node.type === "use" && ((_b = (_a2 = node.effects) == null ? void 0 : _a2.clone) == null ? void 0 : _b.without) === "translate") {
-      const sourceId = stripHash2(node.effects.clone.source);
+      const sourceId = stripHash(node.effects.clone.source);
       if (typeof sourceId === "string" && sourceId && !ctx.contentRefInnerIds.has(sourceId)) {
         ctx.contentRefInnerIds.set(sourceId, allocator(sourceId));
       }
@@ -3840,11 +3623,11 @@ var PixodeskAnimator = (() => {
     const loopFromSource = read.loop;
     let stopCount = 0;
     for (const kf of kfs) {
-      const v = kfValue(kf);
+      const v = keyframeValue(kf);
       if (Array.isArray(v) && v.length > stopCount) stopCount = v.length;
     }
     if (!stopCount) return [];
-    const firstKfValue = kfValue(kfs[0]);
+    const firstKfValue = keyframeValue(kfs[0]);
     const baselineStops = [];
     for (let i = 0; i < stopCount; i++) {
       const s = (_b = (_a2 = firstKfValue == null ? void 0 : firstKfValue[i]) != null ? _a2 : prevDefinedStop(kfs, 0, i)) != null ? _b : { offset: i / Math.max(1, stopCount - 1), color: "#000000" };
@@ -3865,11 +3648,11 @@ var PixodeskAnimator = (() => {
     const offsetKfs = [];
     let offsetVaries = false;
     for (const kf of kfs) {
-      const t = kfTime(kf);
-      const arr = kfValue(kf);
+      const t = keyframeTime(kf);
+      const arr = keyframeValue(kf);
       const sliced = (_a2 = arr == null ? void 0 : arr[stopIdx]) != null ? _a2 : prevDefinedStop(kfs, kfs.indexOf(kf), stopIdx);
       if (!sliced) continue;
-      const easing = kfEasing(kf);
+      const easing = keyframeEasing(kf);
       const colorOut = { time: t, value: sliced.color };
       if (easing !== void 0) colorOut.easing = easing;
       colorKfs.push(colorOut);
@@ -3897,11 +3680,11 @@ var PixodeskAnimator = (() => {
   }
   function prevDefinedStop(kfs, fromIdx, stopIdx) {
     for (let i = fromIdx; i >= 0; i--) {
-      const arr = kfValue(kfs[i]);
+      const arr = keyframeValue(kfs[i]);
       if (arr == null ? void 0 : arr[stopIdx]) return arr[stopIdx];
     }
     for (let i = fromIdx + 1; i < kfs.length; i++) {
-      const arr = kfValue(kfs[i]);
+      const arr = keyframeValue(kfs[i]);
       if (arr == null ? void 0 : arr[stopIdx]) return arr[stopIdx];
     }
     return void 0;
@@ -3938,7 +3721,7 @@ var PixodeskAnimator = (() => {
   // ../svg-animator-core/src/effects/clipping/maskedByEffect.ts
   function applyMaskedByEffect(node, fx, transformBy, ctx) {
     if (!fx) return node;
-    const sourceId = stripHash2(fx.source);
+    const sourceId = stripHash(fx.source);
     if (!sourceId) {
       ctx.errors.push("maskedBy.source missing \u2014 cannot build mask");
       return node;
@@ -4215,7 +3998,7 @@ var PixodeskAnimator = (() => {
     const interestingNodes = /* @__PURE__ */ new Set();
     const collectInterestingNodes = (n) => {
       var _a2, _b;
-      const maskSourceId = stripHash2((_b = (_a2 = n.effects) == null ? void 0 : _a2.maskedBy) == null ? void 0 : _b.source);
+      const maskSourceId = stripHash((_b = (_a2 = n.effects) == null ? void 0 : _a2.maskedBy) == null ? void 0 : _b.source);
       if (typeof maskSourceId === "string") {
         interestingNodes.add(n);
         const sourceNode = ctx.idMap.get(maskSourceId);
@@ -4295,7 +4078,7 @@ var PixodeskAnimator = (() => {
   // ../svg-animator-core/src/effects/reference/refEffect.ts
   function applyRefHref(node, clone2, ctx) {
     if (!clone2) return;
-    const sourceId = stripHash2(clone2.source);
+    const sourceId = stripHash(clone2.source);
     if (!sourceId) {
       if (clone2.without === PxCloneWithout.translate) ctx.errors.push("clone: content ref missing `source`");
       return;
@@ -4441,7 +4224,7 @@ var PixodeskAnimator = (() => {
         if (!n) return;
         if (n !== site && readCloneRetime(n)) count++;
         if (n.type === "use" && n.href) {
-          const id = stripHash2(n.href);
+          const id = stripHash(n.href);
           if (id && !visited.has(id)) {
             visited.add(id);
             walk(ctx.idMap.get(id));
@@ -4449,7 +4232,7 @@ var PixodeskAnimator = (() => {
         }
         (_a2 = n.children) == null ? void 0 : _a2.forEach(walk);
       };
-      const rootId = stripHash2(site.href);
+      const rootId = stripHash(site.href);
       if (rootId) {
         visited.add(rootId);
         walk(ctx.idMap.get(rootId));
@@ -4470,7 +4253,7 @@ var PixodeskAnimator = (() => {
     }
   }
   function materializeRetime(useNode, retime, ctx) {
-    const targetId = stripHash2(useNode.href);
+    const targetId = stripHash(useNode.href);
     if (!targetId) {
       ctx.errors.push("retime: <use> has no href to follow");
       return;
@@ -4507,7 +4290,7 @@ var PixodeskAnimator = (() => {
     }
     clearCloneRetime(cloneNode);
     if (target.type === "use" && target.href) {
-      const subId = stripHash2(target.href);
+      const subId = stripHash(target.href);
       if (subId) {
         const innerRetime = readCloneRetime(target);
         const subAccum = innerRetime ? concatRetime(asRetime(innerRetime), accum) : accum;
@@ -4528,7 +4311,7 @@ var PixodeskAnimator = (() => {
       var _a2;
       const retime = readCloneRetime(n);
       if (n.type === "use" && retime && n.href) {
-        const subId = stripHash2(n.href);
+        const subId = stripHash(n.href);
         if (subId) {
           const subAccum = concatRetime(asRetime(retime), accum);
           const subChain = new Set(chain);
@@ -4882,7 +4665,7 @@ var PixodeskAnimator = (() => {
     "stroke",
     "strokeWidth",
     "effects",
-    TEXT_CONTENT_ATTR,
+    PX_TEXT_CONTENT_ATTR,
     "xml:space"
   ];
   var PAINT_STATIC_KEYS = [
@@ -4918,7 +4701,7 @@ var PixodeskAnimator = (() => {
     }
     return out;
   }
-  function resolveStyle2(node, parent) {
+  function resolveStyle(node, parent) {
     var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     const isTextRoot = node.type === "text";
     const nodeStyle = node.style;
@@ -5025,7 +4808,7 @@ var PixodeskAnimator = (() => {
     };
     const walk = (el, parentStyle) => {
       var _a3, _b2, _c2;
-      const s = resolveStyle2(el, parentStyle);
+      const s = resolveStyle(el, parentStyle);
       const x = parseLen(el.x);
       const y = parseLen(el.y);
       if (x !== void 0) {
@@ -5036,13 +4819,13 @@ var PixodeskAnimator = (() => {
       if (y !== void 0) pen.y = y;
       pen.x += (_a3 = parseLen(el.dx)) != null ? _a3 : 0;
       pen.y += (_b2 = parseLen(el.dy)) != null ? _b2 : 0;
-      const content = str(el[TEXT_CONTENT_ATTR]);
+      const content = str(el[PX_TEXT_CONTENT_ATTR]);
       if (content && !((_c2 = el.children) == null ? void 0 : _c2.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 = str(node[TEXT_CONTENT_ATTR]);
+    const rootContent = str(node[PX_TEXT_CONTENT_ATTR]);
     if (rootContent && !((_c = node.children) == null ? void 0 : _c.length)) renderChars(rootContent, rootStyle);
     const anchor = str(node.textAnchor);
     if (anchor === "middle" || anchor === "end") {
@@ -5059,8 +4842,8 @@ var PixodeskAnimator = (() => {
     let adv = 0;
     const walk = (el, parentStyle) => {
       var _a2, _b;
-      const s = resolveStyle2(el, parentStyle);
-      const content = str(el[TEXT_CONTENT_ATTR]);
+      const s = resolveStyle(el, parentStyle);
+      const content = str(el[PX_TEXT_CONTENT_ATTR]);
       if (content && !((_a2 = el.children) == null ? void 0 : _a2.length)) {
         const gf = glyphFontFor(s, glyphs, soleFont, warnings);
         if (gf) {
@@ -5431,7 +5214,7 @@ var PixodeskAnimator = (() => {
     if (r.kind === "static" /* Static */) return [r.value];
     const out = [];
     for (const kf of r.keyframes) {
-      const v = kfValue(kf);
+      const v = keyframeValue(kf);
       if (typeof v === "number") out.push(v);
     }
     return out;
@@ -5442,9 +5225,9 @@ var PixodeskAnimator = (() => {
     return {
       kind: "animated" /* Animated */,
       keyframes: read.keyframes.map((kf) => ({
-        time: kfTime(kf),
-        value: map(kfValue(kf)),
-        easing: kfEasing(kf)
+        time: keyframeTime(kf),
+        value: map(keyframeValue(kf)),
+        easing: keyframeEasing(kf)
       })),
       loop: read.loop
     };
@@ -5462,7 +5245,7 @@ var PixodeskAnimator = (() => {
     let anyHide = false;
     let allHide = true;
     for (const kf of kfs) {
-      if (hide(kfValue(kf))) anyHide = true;
+      if (hide(keyframeValue(kf))) anyHide = true;
       else allHide = false;
     }
     if (!anyHide) return void 0;
@@ -5472,10 +5255,10 @@ var PixodeskAnimator = (() => {
       const kf = kfs[i];
       const prevKf = i > 0 ? kfs[i - 1] : void 0;
       const nextKf = i < kfs.length - 1 ? kfs[i + 1] : void 0;
-      const t = kfTime(kf);
-      const thisHide = hide(kfValue(kf));
-      const prevHide = prevKf ? thisHide && hide(kfValue(prevKf)) : thisHide;
-      const nextHide = nextKf ? thisHide && hide(kfValue(nextKf)) : thisHide;
+      const t = keyframeTime(kf);
+      const thisHide = hide(keyframeValue(kf));
+      const prevHide = prevKf ? thisHide && hide(keyframeValue(prevKf)) : thisHide;
+      const nextHide = nextKf ? thisHide && hide(keyframeValue(nextKf)) : thisHide;
       if (prevHide && !nextHide) {
         out.push({ time: t, value: 0 });
         out.push({ time: t + OPACITY_STEP_MS, value: 1 });
@@ -5491,9 +5274,9 @@ var PixodeskAnimator = (() => {
     const r = readAnimatable(raw);
     if (r.kind !== "animated" /* Animated */) return r;
     const kfs = r.keyframes.map((kf) => ({
-      time: kfTime(kf),
-      value: kfValue(kf),
-      easing: kfEasing(kf)
+      time: keyframeTime(kf),
+      value: keyframeValue(kf),
+      easing: keyframeEasing(kf)
     }));
     const hasReverse = kfs.some((kf) => kf.value[0] > kf.value[1]);
     if (!hasReverse) {
@@ -5621,7 +5404,7 @@ var PixodeskAnimator = (() => {
   }
 
   // ../svg-animator-core/src/effects/PlayerEffectsUtil.ts
-  function applyPlayerEffects(root) {
+  function materializeNodeEffects(root) {
     var _a2, _b;
     const ctx = {
       defs: [],
@@ -5634,7 +5417,7 @@ var PixodeskAnimator = (() => {
       // 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: resolveTimelineEngine((_a2 = getAnimatorConfig(root)) == null ? void 0 : _a2.engine),
-      glyphs: (_b = getDefs(root)) == null ? void 0 : _b.fonts
+      glyphs: (_b = getDefinitions(root)) == null ? void 0 : _b.fonts
     };
     const working = clone(root);
     indexById(working, ctx.idMap);
@@ -5718,11 +5501,11 @@ var PixodeskAnimator = (() => {
     if (propAnim.alongPathMode !== "offsetPath") return void 0;
     const kfs = propAnim.keyframes;
     if (!kfs || kfs.length < 2) return void 0;
-    const first = kfValue(kfs[0]);
+    const first = keyframeValue(kfs[0]);
     const anchor = (first == null ? void 0 : first.origin) && first.origin.length >= 2 ? [first.origin[0], first.origin[1]] : [0, 0];
     const points = [];
     for (const kf of kfs) {
-      const v = kfValue(kf);
+      const v = keyframeValue(kf);
       const tr = v == null ? void 0 : v.translate;
       if (!tr || tr.length < 2) return void 0;
       const parts = Object.keys(v);
@@ -5731,13 +5514,13 @@ var PixodeskAnimator = (() => {
       if (o[0] !== anchor[0] || o[1] !== anchor[1]) return void 0;
       points.push([tr[0] + anchor[0], tr[1] + anchor[1]]);
     }
-    if (!kfs.some((kf) => kfTangentIn(kf) || kfTangentOut(kf))) return void 0;
+    if (!kfs.some((kf) => keyframeTangentIn(kf) || keyframeTangentOut(kf))) return void 0;
     let d = "M" + fmt2(points[0][0]) + "," + fmt2(points[0][1]);
     const segLens = [];
     for (let i = 0; i < points.length - 1; i++) {
       const p0 = points[i], p1 = points[i + 1];
-      const to = (_b = kfTangentOut(kfs[i])) != null ? _b : [0, 0];
-      const ti = (_c = kfTangentIn(kfs[i + 1])) != null ? _c : [0, 0];
+      const to = (_b = keyframeTangentOut(kfs[i])) != null ? _b : [0, 0];
+      const ti = (_c = keyframeTangentIn(kfs[i + 1])) != null ? _c : [0, 0];
       const c1 = [p0[0] + to[0], p0[1] + to[1]];
       const c2 = [p1[0] + ti[0], p1[1] + ti[1]];
       d += "C" + fmt2(c1[0]) + "," + fmt2(c1[1]) + "," + fmt2(c2[0]) + "," + fmt2(c2[1]) + "," + fmt2(p1[0]) + "," + fmt2(p1[1]);
@@ -5749,8 +5532,8 @@ var PixodeskAnimator = (() => {
     let cum = 0;
     for (let i = 0; i < kfs.length; i++) {
       if (i > 0) cum += segLens[i - 1];
-      const out = { t: kfTime(kfs[i]), v: cum / total };
-      const e = kfEasing(kfs[i]);
+      const out = { t: keyframeTime(kfs[i]), v: cum / total };
+      const e = keyframeEasing(kfs[i]);
       if (e !== void 0) out.e = e;
       distanceKfs.push(out);
     }
@@ -5800,15 +5583,163 @@ var PixodeskAnimator = (() => {
     return walk(root);
   }
 
+  // ../svg-animator-core/src/materialize/PxAnimatorUseMaterializer.ts
+  function materializeAnimatedUseInstances(root) {
+    var _a2;
+    const idMap = buildIdMap(root);
+    const animatedIds = computeAnimatedSubtreeIds(root, idMap);
+    if (animatedIds.size === 0) return root;
+    let idCounter = 0;
+    const genId3 = () => "_lw_use_mat_" + ++idCounter;
+    const rootViewport = readRootViewport(root);
+    const defsCollector = [];
+    const walked = walkAndMaterialize2(root, idMap, animatedIds, genId3, defsCollector, rootViewport);
+    if (defsCollector.length === 0) return walked;
+    const defsNode = { type: "defs", children: defsCollector };
+    const newChildren = [...(_a2 = walked.children) != null ? _a2 : [], defsNode];
+    return __spreadProps(__spreadValues({}, walked), { children: newChildren });
+  }
+  function readRootViewport(root) {
+    const vb = parseViewBox(root.viewBox);
+    if (vb) return [vb[2], vb[3]];
+    const w = numericAttr(root.width);
+    const h = numericAttr(root.height);
+    if (w !== void 0 && h !== void 0) return [w, h];
+    return [1, 1];
+  }
+  function numericAttr(v) {
+    if (typeof v === "number") return v;
+    if (typeof v === "string") {
+      const n = parseFloat(v);
+      return Number.isFinite(n) ? n : void 0;
+    }
+    return void 0;
+  }
+  function buildIdMap(root) {
+    const map = /* @__PURE__ */ new Map();
+    const visit = (n) => {
+      var _a2;
+      if (typeof n.id === "string") map.set(n.id, n);
+      (_a2 = n.children) == null ? void 0 : _a2.forEach(visit);
+    };
+    visit(root);
+    return map;
+  }
+  function computeAnimatedSubtreeIds(root, idMap) {
+    const cache = /* @__PURE__ */ new WeakMap();
+    const result = /* @__PURE__ */ new Set();
+    const hasAnim = (n, visiting) => {
+      const cached = cache.get(n);
+      if (cached !== void 0) return cached;
+      if (visiting.has(n)) return false;
+      visiting.add(n);
+      let r = false;
+      if (n.animate && typeof n.animate === "object" && !Array.isArray(n.animate)) {
+        for (const _ in n.animate) {
+          r = true;
+          break;
+        }
+      }
+      if (!r && n.children) {
+        for (const ch of n.children) {
+          if (hasAnim(ch, visiting)) {
+            r = true;
+            break;
+          }
+        }
+      }
+      if (!r && n.type === "use" && typeof n.href === "string") {
+        const targetId = stripHash2(n.href);
+        const target = targetId ? idMap.get(targetId) : void 0;
+        if (target) r = hasAnim(target, visiting);
+      }
+      visiting.delete(n);
+      cache.set(n, r);
+      return r;
+    };
+    for (const [id, node] of idMap) {
+      if (hasAnim(node, /* @__PURE__ */ new Set())) result.add(id);
+    }
+    return result;
+  }
+  function stripHash2(href) {
+    if (typeof href !== "string") return void 0;
+    return href.startsWith("#") ? href.slice(1) : href;
+  }
+  function materializeOneUse(useNode, target, idMap, animatedIds, genId3, defsCollector, rootViewport) {
+    var _a2, _b, _c, _d;
+    const clone2 = deepClonePxNode(target);
+    regenerateIdsAndRewriteRefs(clone2, genId3);
+    const symbolViewBox = clone2.type === "symbol" ? parseViewBox(clone2.viewBox) : void 0;
+    const useW = (_b = (_a2 = numericAttr(useNode.width)) != null ? _a2 : symbolViewBox == null ? void 0 : symbolViewBox[2]) != null ? _b : rootViewport[0];
+    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 materializedClone = walkAndMaterialize2(rewrittenClone, idMap, animatedIds, genId3, defsCollector, rootViewport);
+    const newNode = __spreadProps(__spreadValues({}, useNode), { type: "g", children: [materializedClone] });
+    delete newNode.href;
+    delete newNode.width;
+    delete newNode.height;
+    return applyUseOffsetToG(newNode);
+  }
+  function rewriteSymbolRootToGroup(symbolNode, genId3, defsCollector, useW, useH) {
+    const viewBox = parseViewBox(symbolNode.viewBox);
+    const g = __spreadProps(__spreadValues({}, symbolNode), { type: "g" });
+    delete g.viewBox;
+    delete g.preserveAspectRatio;
+    delete g.width;
+    delete g.height;
+    if (!viewBox) return g;
+    const [vbX, vbY, vbW, vbH] = viewBox;
+    const scale = vbW > 0 && vbH > 0 ? Math.min(useW / vbW, useH / vbH) : 1;
+    const xOff = (useW - vbW * scale) / 2;
+    const yOff = (useH - vbH * scale) / 2;
+    const parts = [];
+    if (xOff !== 0 || yOff !== 0) parts.push("translate(" + xOff + "," + yOff + ")");
+    if (scale !== 1) parts.push("scale(" + scale + ")");
+    if (vbX !== 0 || vbY !== 0) parts.push("translate(" + -vbX + "," + -vbY + ")");
+    if (parts.length) g.transform = parts.join("");
+    const clipId = genId3();
+    defsCollector.push({
+      type: "clipPath",
+      id: clipId,
+      children: [{ type: "rect", x: vbX, y: vbY, width: vbW, height: vbH }]
+    });
+    g.clipPath = "url(#" + clipId + ")";
+    return g;
+  }
+  function parseViewBox(v) {
+    if (typeof v !== "string") return void 0;
+    const parts = v.trim().split(/[\s,]+/).map(Number);
+    if (parts.length < 4 || parts.some((n) => !Number.isFinite(n))) return void 0;
+    return [parts[0], parts[1], parts[2], parts[3]];
+  }
+  function walkAndMaterialize2(node, idMap, animatedIds, genId3, defsCollector, rootViewport) {
+    if (node.type === "use" && typeof node.href === "string") {
+      const targetId = stripHash2(node.href);
+      if (targetId && animatedIds.has(targetId)) {
+        const target = idMap.get(targetId);
+        if (target) return materializeOneUse(node, target, idMap, animatedIds, genId3, defsCollector, rootViewport);
+      }
+    }
+    if (!node.children) return node;
+    let changed = false;
+    const newChildren = node.children.map((ch) => {
+      const m = walkAndMaterialize2(ch, idMap, animatedIds, genId3, defsCollector, rootViewport);
+      if (m !== ch) changed = true;
+      return m;
+    });
+    return changed ? __spreadProps(__spreadValues({}, node), { children: newChildren }) : node;
+  }
+
   // ../svg-animator-core/src/materialize/PxAnimatorMaterializeAll.ts
-  function materializeAllInTree(doc, engine, opts) {
+  function materializeAllInTree(doc, engine, options) {
     var _a2, _b;
-    let root = applyPlayerEffects(doc).root;
+    let root = materializeNodeEffects(doc).root;
     root = materializeOffsetPathsInTree(root);
-    const duration = (_b = (_a2 = getAnimatorConfig(root)) == null ? void 0 : _a2.duration) != null ? _b : DEFAULT_DURATION_MS;
+    const duration = (_b = (_a2 = getAnimatorConfig(root)) == null ? void 0 : _a2.duration) != null ? _b : PX_DEFAULT_DURATION_MS;
     root = materializeInternalLoopsInTree(root, duration);
     if (engine === PxTimelineEngine.native) {
-      root = materializeMotionPathsInTree(root, opts == null ? void 0 : opts.motionPath);
+      root = materializeMotionPathsInTree(root, options == null ? void 0 : options.motionPath);
       root = materializeAnimatedUseInstances(root);
       root = pruneUnreferencedDefs(root);
     }
@@ -5892,16 +5823,16 @@ var PixodeskAnimator = (() => {
     }
     g.clearTimeout(handle);
   }
-  function createBasicFrameLoopAnimator(doc, adapter, callbacks) {
+  function createAdapterAnimator(doc, adapter, callbacks) {
     var _a2;
     const config = getAnimatorConfig(doc) || {};
-    const bindings = getNormalizedBindings(doc, PxTimelineEngine.js);
+    const bindings = normalizeBindings(doc, PxTimelineEngine.js);
     const _iterations = config.iterations;
     let iterations = 1;
     if (typeof _iterations === "number") iterations = _iterations || 1;
     if (_iterations === "infinite") iterations = Infinity;
     if (iterations < 1) iterations = 1;
-    const duration = +(config.duration || DEFAULT_DURATION_MS);
+    const duration = +(config.duration || PX_DEFAULT_DURATION_MS);
     const totalDuration = duration && iterations ? duration * (iterations === Infinity ? Infinity : iterations) : duration ? (iterations != null ? iterations : 1) * duration : 0;
     const direction = config.direction || "normal";
     const fill = (_a2 = config.fill) != null ? _a2 : "forwards";
@@ -6175,10 +6106,6 @@ var PixodeskAnimator = (() => {
   function asError(error) {
     return typeof error === "string" ? new Error(error) : error;
   }
-  function isSilenced(silent, kind) {
-    if (!silent) return false;
-    return silent === true || silent.includes(kind);
-  }
   function createDiagnostics(config, prefix) {
     const tag = prefix ? prefix + " " : "";
     return {
@@ -6187,19 +6114,21 @@ var PixodeskAnimator = (() => {
           config.onWarn({ kind, message, detail });
           return;
         }
-        if (isSilenced(config == null ? void 0 : config.silent, kind)) return;
+        if (config == null ? void 0 : config.muteWarn) return;
         const line = tag + kind + ": " + message;
         if (detail === void 0) console.warn(line);
         else console.warn(line, detail);
       },
-      error: (kind, error) => {
+      error: (kind, error, detail) => {
         const err = asError(error);
         if (config == null ? void 0 : config.onError) {
-          config.onError({ kind, message: err.message, error: err });
+          config.onError({ kind, message: err.message, error: err, detail });
           return;
         }
-        if (isSilenced(config == null ? void 0 : config.silent, kind)) return;
-        console.error(tag + kind + ": " + err.message);
+        if (config == null ? void 0 : config.muteError) return;
+        const line = tag + kind + ": " + err.message;
+        if (detail === void 0) console.error(line);
+        else console.error(line, detail);
       }
     };
   }
@@ -6218,7 +6147,7 @@ var PixodeskAnimator = (() => {
     "mode",
     "frameRate"
   ];
-  var CONTENT_KEYS = ["definitions", "animateById"];
+  var CONTENT_KEYS = ["definitions", "bindings"];
   var isPlainObject = (v) => !!v && typeof v === "object" && !Array.isArray(v);
   var timelineTypeOf = (t) => isPlainObject(t) && typeof t.type === "string" ? t.type : "time";
   var isScrollish = (type) => type === "scroll" || type === "view";
@@ -6322,9 +6251,9 @@ var PixodeskAnimator = (() => {
     }
     return { config: out, warnings };
   }
-  function applyAnimatorConfig(doc, patch, opts) {
+  function applyAnimatorConfig(doc, patch, options) {
     var _a2, _b;
-    const reset = !!(opts == null ? void 0 : opts.resetDefaults);
+    const reset = !!(options == null ? void 0 : options.resetTimeline);
     if (!doc || (patch === void 0 || !reset && (patch === null || !isPlainObject(patch) || !Object.keys(patch).length))) {
       return { doc, warnings: [] };
     }
@@ -6375,9 +6304,65 @@ var PixodeskAnimator = (() => {
     );
   }
 
+  // ../svg-animator-core/src/playback/PxScrollMath.ts
+  function isScrollTimeline(config) {
+    return (config == null ? void 0 : config.timelineSource) === "scroll";
+  }
+  function scrollTotalDurationMs(config) {
+    const duration = typeof (config == null ? void 0 : config.duration) === "number" && config.duration > 0 ? config.duration : PX_DEFAULT_DURATION_MS;
+    const iterations = typeof (config == null ? void 0 : config.iterations) === "number" && config.iterations > 0 ? config.iterations : 1;
+    return duration * iterations;
+  }
+  function scrollPhaseInterval(phase, subjectSize, scrollportSize) {
+    const s = subjectSize, vp = scrollportSize;
+    switch (phase) {
+      case "cover":
+        return [0, s + vp];
+      case "entry":
+        return [0, Math.min(s, vp)];
+      case "contain":
+        return [Math.min(s, vp), Math.max(s, vp)];
+      case "exit":
+        return [Math.max(s, vp), s + vp];
+      case "entry-crossing":
+        return [0, s];
+      case "exit-crossing":
+        return [vp, s + vp];
+    }
+  }
+  var DEFAULT_PHASE = "cover";
+  function resolveRangePointU(point, defaultFraction, subjectSize, scrollportSize) {
+    var _a2;
+    const [u0, u1] = scrollPhaseInterval((_a2 = point == null ? void 0 : point.phase) != null ? _a2 : DEFAULT_PHASE, subjectSize, scrollportSize);
+    const fraction = typeof (point == null ? void 0 : point.fraction) === "number" ? point.fraction : defaultFraction;
+    return u0 + fraction * (u1 - u0);
+  }
+  function scrollViewProgress(subjectStart, subjectSize, scrollportSize, range) {
+    const u = scrollportSize - subjectStart;
+    const uStart = resolveRangePointU(range == null ? void 0 : range.start, 0, subjectSize, scrollportSize);
+    const uEnd = resolveRangePointU(range == null ? void 0 : range.end, 1, subjectSize, scrollportSize);
+    if (uEnd <= uStart) return u >= uEnd ? 1 : 0;
+    return clamp((u - uStart) / (uEnd - uStart), 0, 1);
+  }
+  function scrollOffsetProgress(offset, maxOffset, range) {
+    var _a2, _b;
+    const raw = maxOffset > 0 ? clamp(offset / maxOffset, 0, 1) : 1;
+    const start = typeof ((_a2 = range == null ? void 0 : range.start) == null ? void 0 : _a2.fraction) === "number" ? range.start.fraction : 0;
+    const end = typeof ((_b = range == null ? void 0 : range.end) == null ? void 0 : _b.fraction) === "number" ? range.end.fraction : 1;
+    if (end <= start) return raw >= end ? 1 : 0;
+    return clamp((raw - start) / (end - start), 0, 1);
+  }
+  function scrollResolveAxis(axis, writingMode) {
+    const a = axis != null ? axis : "block";
+    if (a === "x" || a === "y") return a;
+    const vertical = !!writingMode && writingMode.startsWith("vertical");
+    if (a === "inline") return vertical ? "y" : "x";
+    return vertical ? "x" : "y";
+  }
+
   // src/shared/PxAnimatorCallbacks.ts
   function toEngineCallbacks(inline) {
-    const { onPlay, onPause, onCancel, onFinish, onRemove, onStop, onWarn, onError, silent } = inline != null ? inline : {};
+    const { onPlay, onPause, onCancel, onFinish, onRemove, onStop, onWarn, onError, muteWarn, muteError } = inline != null ? inline : {};
     const withStop = (own) => own || onStop ? () => {
       own == null ? void 0 : own();
       onStop == null ? void 0 : onStop();
@@ -6390,18 +6375,22 @@ var PixodeskAnimator = (() => {
       onRemove: withStop(onRemove),
       onWarn,
       onError,
-      silent
+      muteWarn,
+      muteError
     };
   }
+  function asThrownError(e) {
+    return e instanceof Error ? e : new Error(String(e));
+  }
 
   // src/triggers/PxAnimatorTriggers.ts
-  function setupAnimationTriggers(api, config, diag) {
+  function setupAnimationTriggers(api, trigger, diag) {
     const report = diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]");
     const cleanups = [];
     const dispose = () => {
       for (const undo of cleanups.splice(0)) undo();
     };
-    const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(config);
+    const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(trigger);
     const root = api.getRootElement();
     if (!root) {
       report.warn(PxDiagnosticKind.host, "setupAnimationTriggers: No root element found for animation.");
@@ -6528,7 +6517,7 @@ var PixodeskAnimator = (() => {
         diag.warn(PxDiagnosticKind.host, "createFrameLoopAnimator: No root element provided");
       }
     }
-    const basicApi = createBasicFrameLoopAnimator(
+    const basicApi = createAdapterAnimator(
       doc,
       adapter || createDomAdapter(rootElement, diag),
       callbacks
@@ -6568,7 +6557,7 @@ var PixodeskAnimator = (() => {
           const element = elements[i];
           const effectiveAttrName = attrName === "transform" && element.tagName === "pattern" ? "patternTransform" : attrName;
           element.setAttribute(effectiveAttrName, value);
-          if (STYLE_ATTR_NAMES.has(attrName)) {
+          if (PX_STYLE_ATTR_NAMES.has(attrName)) {
             element.style[attrName] = value;
           }
         }
@@ -6579,20 +6568,20 @@ var PixodeskAnimator = (() => {
 
   // src/engines/PxAnimatorWebApi.ts
   function createCssKf(kf, t, propName, unsupportedSet) {
-    let value = kfValue(kf);
-    const e = kfEasing(kf);
+    let value = keyframeValue(kf);
+    const e = keyframeEasing(kf);
     const cssKf = {
       offset: t,
       easing: e && Array.isArray(e) ? "cubic-bezier(" + e.join(",") + ")" : void 0
     };
     let cssValue;
     let cssKey = propName;
-    if (COLOR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
+    if (PX_COLOR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
       cssValue = toRGBA(value);
     } else if (propName === "transform" && value !== null && typeof value === "object" && !Array.isArray(value)) {
       cssValue = composeTransformParts(value, { withUnits: true });
       cssKey = "transform";
-    } else if (TRANSFORM_FN_NAMES.has(propName)) {
+    } else if (PX_TRANSFORM_FN_NAMES.has(propName)) {
       if (Array.isArray(value)) {
         if (propName === "translate") value = value.map((v) => v + "px");
         value = value.join(",");
@@ -6603,7 +6592,7 @@ var PixodeskAnimator = (() => {
     } else if (propName === "d") {
       const paths = value && typeof value === "object" && Array.isArray(value.paths) ? value.paths : [];
       cssValue = 'path("' + paths.map((bz) => bezierToSvgPath(bz, true)).join("") + '")';
-    } else if (PCT_BASED_ATTR_NAMES.has(propName) && typeof value === "number") {
+    } else if (PX_PCT_BASED_ATTR_NAMES.has(propName) && typeof value === "number") {
       cssValue = value * 100 + "%";
     } else {
       cssValue = "" + value;
@@ -6686,7 +6675,7 @@ var PixodeskAnimator = (() => {
         diag.warn(PxDiagnosticKind.host, "createWebApiAnimator: No root element provided");
       }
     }
-    const bindings = getNormalizedBindings(doc, PxTimelineEngine.native);
+    const bindings = normalizeBindings(doc, PxTimelineEngine.native);
     const animations = [];
     const _iterations = config.iterations;
     let iterations;
@@ -7168,7 +7157,7 @@ var PixodeskAnimator = (() => {
           unpin = () => {
           };
         }
-        const api = (animatorConfig.engine !== PxTimelineEngineExtra.js ? createWebApiAnimator(doc, cb, rootElement, isNativeForced(animatorConfig.engine)) : null) || createFrameLoopAnimator(doc, adapter, cb, rootElement);
+        const api = (animatorConfig.engine !== PxTimelineEngineSetting.js ? createWebApiAnimator(doc, cb, rootElement, isNativeForced(animatorConfig.engine)) : null) || createFrameLoopAnimator(doc, adapter, cb, rootElement);
         const subject = ((_a2 = api.getRootElement) == null ? void 0 : _a2.call(api)) || rootElement;
         if (subject) {
           unpin = applyScrollPin(subject, animatorConfig.scroll);
@@ -7194,7 +7183,7 @@ var PixodeskAnimator = (() => {
       });
     }
     return finaliseAnimator(animatorConfig, callbacks, (cb) => {
-      if (animatorConfig.engine === PxTimelineEngineExtra.js) {
+      if (animatorConfig.engine === PxTimelineEngineSetting.js) {
         return createFrameLoopAnimator(doc, adapter, cb, rootElement);
       }
       return createWebApiAnimator(
@@ -7209,7 +7198,7 @@ var PixodeskAnimator = (() => {
   // src/dom/PxAnimatorDOM.ts
   var SVG_NS = "http://www.w3.org/2000/svg";
   function createElement(tagName, normalizedProps, style, children, textContent, diag) {
-    if (DISALLOWED_SVG_TAGS_LOWER.has(tagName.toLowerCase())) {
+    if (PX_DISALLOWED_SVG_TAGS_LOWER.has(tagName.toLowerCase())) {
       (diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]")).warn(PxDiagnosticKind.document, "SVG tag blocked (dangerous): " + tagName);
       return null;
     }
@@ -7217,7 +7206,7 @@ var PixodeskAnimator = (() => {
     for (const propName in normalizedProps) {
       const sanitized = sanitizeAttributeValue(propName, normalizedProps[propName]);
       if (sanitized === void 0) continue;
-      if (CSS_ONLY_STYLE_PROPS.has(propName)) {
+      if (PX_CSS_ONLY_STYLE_PROPS.has(propName)) {
         element.style[propName] = String(sanitized);
         continue;
       }
@@ -7242,8 +7231,8 @@ var PixodeskAnimator = (() => {
     const _a2 = node, { type, children, style } = _a2, props = __objRest(_a2, ["type", "children", "style"]);
     const domType = props.domType;
     if (domType !== void 0) delete props.domType;
-    const nodeDefs = getDefs(node) || defs;
-    const resolvedStyle = resolveStyle(style, nodeDefs);
+    const nodeDefs = getDefinitions(node) || defs;
+    const resolvedStyle = style;
     let childElements;
     if (children) {
       for (const ch of children) {
@@ -7256,10 +7245,10 @@ var PixodeskAnimator = (() => {
     }
     const element = createElement(
       type || "g",
-      getNormalizedProps(props),
+      toDomProps(props),
       resolvedStyle,
       childElements,
-      props[TEXT_CONTENT_ATTR],
+      props[PX_TEXT_CONTENT_ATTR],
       diag
     );
     if (element && domType !== void 0) element.setAttribute("type", domType);
@@ -7279,7 +7268,7 @@ var PixodeskAnimator = (() => {
     for (const w of effectsWarnings) diag.warn(PxDiagnosticKind.document, "effects shape: " + w);
     reportDocumentDiagnostics(doc, "[PxAnimator] createAnimator");
     if (patch !== void 0 || resetTimeline) {
-      const patched = applyAnimatorConfig(doc, patch != null ? patch : {}, { resetDefaults: !!resetTimeline });
+      const patched = applyAnimatorConfig(doc, patch != null ? patch : {}, { resetTimeline: !!resetTimeline });
       for (const w of patched.warnings) diag.warn(PxDiagnosticKind.usage, "timeline override: " + w);
       doc = patched.doc;
     }
@@ -7308,12 +7297,16 @@ var PixodeskAnimator = (() => {
     }
     return api;
   }
+  function isInternalOptions(options) {
+    return "adapter" in options;
+  }
   function resolveTimelineOption(options) {
     const { timeline, duration, delay, iterations, startOn } = options;
     return foldTimelineOverride(timeline, { duration, delay, iterations, startOn });
   }
   function createAnimator(options) {
-    const { src, doc, adapter, container, resetTimeline } = options;
+    const { src, doc, container, resetTimeline } = options;
+    const adapter = isInternalOptions(options) ? options.adapter : void 0;
     const patch = resolveTimelineOption(options);
     const callbacks = toEngineCallbacks(options);
     if (doc !== void 0 && src !== void 0) {
@@ -7322,9 +7315,6 @@ var PixodeskAnimator = (() => {
     if (doc === void 0 && src === void 0) {
       throw new Error("createAnimator: either `src` or `doc` is required");
     }
-    if (doc !== void 0) {
-      return createAnimatorImpl(doc, adapter, callbacks, container, patch, resetTimeline);
-    }
     let animator = null;
     let pending = [];
     let destroyed = false;
@@ -7335,28 +7325,37 @@ var PixodeskAnimator = (() => {
         pending.push(call);
       }
     };
-    const loadDiag = createDiagnostics(callbacks, "[PxAnimator]");
-    fetch(src).then((res) => res.json()).then((json) => {
-      if (destroyed) return;
-      if (isPxElementFileFormat(json)) {
-        animator = createAnimatorImpl(json, adapter, callbacks, container, patch, resetTimeline);
-        const queued = pending;
-        pending = null;
-        queued == null ? void 0 : queued.forEach((call) => call(animator));
-      } else {
-        loadDiag.error(
-          PxDiagnosticKind.document,
-          'createAnimator: invalid animation document format at "' + src + '"'
-        );
-      }
-    }).catch((err) => {
-      var _a2;
+    const diag = createDiagnostics(callbacks, "[PxAnimator]");
+    const ready = (api) => {
+      animator = api;
+      const queued = pending;
       pending = null;
-      loadDiag.error(
-        PxDiagnosticKind.host,
-        'createAnimator: failed to load "' + src + '" \u2014 ' + ((_a2 = err == null ? void 0 : err.message) != null ? _a2 : String(err))
-      );
-    });
+      queued == null ? void 0 : queued.forEach((call) => call(api));
+    };
+    const failed = (kind, message, detail) => {
+      pending = null;
+      diag.error(kind, message, detail);
+    };
+    const build = (document2) => {
+      try {
+        ready(createAnimatorImpl(document2, adapter, callbacks, container, patch, resetTimeline));
+      } catch (e) {
+        const err = asThrownError(e);
+        failed(PxDiagnosticKind.internal, "createAnimator: could not build the player \u2014 " + err.message, err);
+      }
+    };
+    if (doc !== void 0) {
+      build(doc);
+    } else {
+      fetch(src).then((res) => res.json()).then((json) => {
+        if (destroyed) return;
+        if (isPxDocument(json)) build(json);
+        else failed(PxDiagnosticKind.document, 'createAnimator: invalid animation document format at "' + src + '"');
+      }).catch((err) => {
+        var _a2;
+        failed(PxDiagnosticKind.host, 'createAnimator: failed to load "' + src + '" \u2014 ' + ((_a2 = err == null ? void 0 : err.message) != null ? _a2 : String(err)));
+      });
+    }
     return {
       "isReady": () => !!animator,
       "getRootElement": () => animator ? animator.getRootElement() : null,