@pixodesk/svg-animator-web 1.0.24 → 1.0.27

package/dist/index.cjs

@@ -172,114 +172,582 @@ var __objRest2 = (source, exclude) => {
     }
   return target;
 };
-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);
+function bezierToSvgPath(path, forceCurves = false) {
+  var _a, _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 = (_a = o == null ? void 0 : o[idx - 1]) != null ? _a : 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]);
+    }
   }
-  optional() {
-    return new Optional(this);
+  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");
   }
-};
-var Optional = class extends Base {
-  constructor(inner) {
-    super();
-    this.inner = inner;
-    this._default = void 0;
+  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);
   }
-  sanitize(raw) {
-    if (raw === void 0 || raw === null) return void 0;
-    return this.inner._canSanitize(raw) ? this.inner.sanitize(raw) : void 0;
+  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));
   }
-  isValid(raw, ctx, path) {
-    if (raw === void 0 || raw === null) return true;
-    return this.inner.isValid(raw, ctx, path);
+  return res;
+}
+function interpolateBezier(path1, path2, progress) {
+  var _a, _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 = (_a = path1.i) == null ? void 0 : _a[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));
   }
-  _canSanitize(raw) {
-    return raw === void 0 || raw === null || this.inner._canSanitize(raw);
+  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;
   }
-};
-var Str = class extends Base {
-  constructor(_default = "") {
-    super();
-    this._default = _default;
+  function sampleDX(t) {
+    return (3 * ax * t + 2 * bx) * t + cx;
   }
-  sanitize(raw) {
-    return typeof raw === "string" ? raw : this._default;
+  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;
   }
-  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;
+  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 Num = class extends Base {
-  constructor(_default = 0) {
-    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 === "number" && isFinite(raw) ? 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 === "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;
+  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 Bool = class extends Base {
-  constructor(_default = false) {
-    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 _a;
+  const inner = (_a = s.match(/rgba?\((.*)\)/)) == null ? void 0 : _a[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 === "boolean" ? 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 === "boolean") return true;
-    ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected boolean, got " + typeof raw);
-    return false;
+  return void 0;
+}
+var COLOUR_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 _a;
+  if (!parts) return "";
+  const withUnits = (_a = opts == null ? void 0 : opts.withUnits) != null ? _a : 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("");
+}
+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);
+  }
+  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;
+  }
+  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;
+  }
+  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);
+}
+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 _a;
+  const [u0, u1] = scrollPhaseInterval((_a = point == null ? void 0 : point.phase) != null ? _a : 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 _a, _b;
+  const raw = maxOffset > 0 ? clamp(offset / maxOffset, 0, 1) : 1;
+  const start = typeof ((_a = range == null ? void 0 : range.start) == null ? void 0 : _a.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";
+}
+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 Literal = class extends Base {
-  constructor(value) {
+var Optional = class extends Base {
+  constructor(inner) {
     super();
-    this.value = value;
-    this._default = value;
+    this.inner = inner;
+    this._default = void 0;
   }
   sanitize(raw) {
-    return raw === this.value ? this.value : this._default;
+    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 === this.value) return true;
-    ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected " + JSON.stringify(this.value) + ", got " + JSON.stringify(raw));
-    return false;
+    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 Enum = class extends Base {
-  constructor(values, defaultVal) {
+var Str = class extends Base {
+  constructor(_default = "") {
     super();
-    this.values = values;
-    this._default = defaultVal != null ? defaultVal : values[0];
+    this._default = _default;
   }
   sanitize(raw) {
-    return this.values.includes(raw) ? raw : this._default;
+    return typeof raw === "string" ? raw : this._default;
   }
   isValid(raw, ctx, path) {
-    if (this.values.includes(raw)) return true;
-    ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected one of " + this.values.map((v) => JSON.stringify(v)).join(" | ") + ", got " + JSON.stringify(raw));
+    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 Union = class extends Base {
+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;
+  }
+  isValid(raw, ctx, path) {
+    if (raw === this.value) return true;
+    ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected " + JSON.stringify(this.value) + ", got " + JSON.stringify(raw));
+    return false;
+  }
+};
+var Enum = class extends Base {
+  constructor(values, defaultVal) {
+    super();
+    this.values = values;
+    this._default = defaultVal != null ? defaultVal : values[0];
+  }
+  sanitize(raw) {
+    return this.values.includes(raw) ? raw : this._default;
+  }
+  isValid(raw, ctx, path) {
+    if (this.values.includes(raw)) return true;
+    ctx == null ? void 0 : ctx.errors.push(pathStr(path != null ? path : []) + ": expected one of " + this.values.map((v) => JSON.stringify(v)).join(" | ") + ", got " + JSON.stringify(raw));
+    return false;
+  }
+};
+var Union = class extends Base {
   constructor(schemas, defaultVal) {
     super();
     this.schemas = schemas;
@@ -834,6 +1302,22 @@ var PxDefsSchema = implementsInterface()(px.object({
   styles: px.record(px.any()).optional(),
   glyphs: px.record(PxGlyphFontSchema).optional()
 }));
+var PX_SCROLL_PHASES = ["cover", "contain", "entry", "exit", "entry-crossing", "exit-crossing"];
+var PxScrollRangePointSchema = implementsInterface()(px.object({
+  phase: px.enum(PX_SCROLL_PHASES).optional(),
+  fraction: px.number().optional()
+}));
+var PxScrollRangeSchema = px.object({
+  start: PxScrollRangePointSchema.optional(),
+  end: PxScrollRangePointSchema.optional()
+});
+var PxScrollSchema = implementsInterface()(px.object({
+  driver: px.enum(["custom", "native"]).optional(),
+  kind: px.enum(["view", "scroll"]).optional(),
+  axis: px.enum(["block", "inline", "x", "y"]).optional(),
+  source: px.enum(["nearest", "root"]).optional(),
+  range: PxScrollRangeSchema.optional()
+}));
 var PxAnimatorConfigSchema = implementsInterface()(px.object({
   mode: px.enum([PxAnimatorMode.auto, PxAnimatorMode.waapi, PxAnimatorMode.frames]).optional(),
   duration: px.number().optional(),
@@ -849,6 +1333,7 @@ var PxAnimatorConfigSchema = implementsInterface()(px.object({
   definitions: PxDefsSchema.optional(),
   animateById: px.record(PxElementAnimationSchema).optional(),
   timelineSource: px.string().optional(),
+  scroll: PxScrollSchema.optional(),
   debugInstName: px.string().optional()
 }));
 var PxBindingSchema = implementsInterface()(px.object({
@@ -868,589 +1353,177 @@ var PxAttrValueSchema = px.union([
 var PxAnimatableNumberSchema = px.union([
   px.number(),
   px.object({ value: px.number() }),
-  PxPropertyAnimationSchema
-]);
-var PxAnimatableVec2Schema = px.union([
-  px.tuple([px.number(), px.number()]),
-  px.object({ value: px.tuple([px.number(), px.number()]) }),
-  PxPropertyAnimationSchema
-]);
-var PxAnimatableStringSchema = px.union([
-  px.string(),
-  px.object({ value: px.string() }),
-  PxPropertyAnimationSchema
-]);
-var PxTransformByEffectSchema = implementsInterface()(px.object({
-  translate: PxAnimatableVec2Schema.optional(),
-  rotate: PxAnimatableNumberSchema.optional(),
-  scale: PxAnimatableVec2Schema.optional(),
-  skew: PxAnimatableNumberSchema.optional(),
-  origin: PxAnimatableVec2Schema.optional()
-}));
-var PxRepeaterEffectSchema = implementsInterface()(px.object({
-  // STATIC config, not a channel (V2/SCHEMA-DESIGN R5): the copy COUNT is read
-  // once at expansion time and never sampled — plain number, no `keyframes`.
-  copies: px.number().optional(),
-  translate: PxAnimatableVec2Schema.optional(),
-  rotate: PxAnimatableNumberSchema.optional(),
-  skew: PxAnimatableNumberSchema.optional(),
-  scale: PxAnimatableVec2Schema.optional(),
-  origin: PxAnimatableVec2Schema.optional()
-}));
-var PxMaskedByEffectSchema = implementsInterface()(px.object({
-  sourceId: px.string().optional(),
-  maskType: px.enum([PxMaskType.luminance, PxMaskType.alpha]).optional(),
-  maskUnits: px.enum([PxUnits.userSpaceOnUse, PxUnits.objectBoundingBox]).optional(),
-  maskContentUnits: px.enum([PxUnits.userSpaceOnUse, PxUnits.objectBoundingBox]).optional(),
-  x: px.number().optional(),
-  y: px.number().optional(),
-  width: px.number().optional(),
-  height: px.number().optional()
-}));
-var PxClipPathEffectSchema = implementsInterface()(px.object({
-  d: PxAnimatableStringSchema.optional(),
-  animate: PxPropertyAnimationSchema.optional()
-}));
-var PxTrimPathEffectSchema = implementsInterface()(px.object({
-  offset: PxAnimatableNumberSchema.optional(),
-  range: PxAnimatableVec2Schema.optional(),
-  subPaths: px.enum([PxTrimSubPaths.separate, PxTrimSubPaths.combined]).optional()
-}));
-var PxRetimeEffectSchema = implementsInterface()(px.object({
-  sourceId: px.string().optional(),
-  start: px.number().optional(),
-  stretch: px.number().optional(),
-  timeCrop: px.tuple([px.number(), px.number()]).optional()
-}));
-var PxCloneEffectSchema = implementsInterface()(px.object({
-  // Contextual kind — the `type` convention, see `PxNodeBase.type`.
-  type: px.enum([PxCloneType.content]).optional(),
-  sourceId: px.string().optional(),
-  retime: PxRetimeEffectSchema.optional()
-}));
-var PxGradientStopSchema = implementsInterface()(px.object({
-  offset: px.number(),
-  color: px.string()
-}));
-var PxAnimatableGradientStopsSchema = px.union([
-  px.array(PxGradientStopSchema),
-  px.object({ value: px.array(PxGradientStopSchema) }),
-  PxPropertyAnimationSchema
-]);
-var PxFillGradientEffectSchema = implementsInterface()(px.object({
-  // Contextual kind — the `type` convention, see `PxNodeBase.type`.
-  type: px.enum([PxGradientType.linear, PxGradientType.radial]),
-  p1: PxAnimatableVec2Schema.optional(),
-  p2: PxAnimatableVec2Schema.optional(),
-  c: PxAnimatableVec2Schema.optional(),
-  r: PxAnimatableNumberSchema.optional(),
-  fp: PxAnimatableVec2Schema.optional(),
-  stops: PxAnimatableGradientStopsSchema.optional(),
-  gradientUnits: px.enum([PxGradientUnits.userSpaceOnUse, PxGradientUnits.objectBoundingBox]).optional(),
-  spreadMethod: px.enum([PxGradientSpreadMethod.pad, PxGradientSpreadMethod.reflect, PxGradientSpreadMethod.repeat]).optional(),
-  gradientTransform: px.string().optional()
-}));
-var PxStrokeGradientEffectSchema = PxFillGradientEffectSchema;
-var PxTextPathEffectSchema = implementsInterface()(px.object({
-  path: px.string(),
-  pathOverflow: px.enum([PxPathOverflow.clip, PxPathOverflow.extend]).optional(),
-  lengthAdjust: px.enum([PxLengthAdjust.spacing, PxLengthAdjust.spacingAndGlyphs]).optional(),
-  method: px.enum([PxTextPathMethod.align, PxTextPathMethod.stretch]).optional(),
-  spacing: px.enum([PxTextPathSpacing.auto, PxTextPathSpacing.exact]).optional(),
-  startOffset: PxAnimatableNumberSchema.optional(),
-  textLength: PxAnimatableNumberSchema.optional()
-}));
-var PxTextEffectSchema = implementsInterface()(px.object({
-  useGlyphs: px.boolean().optional()
-}));
-var PxEffectsSchema = implementsInterface()(px.object({
-  transformBy: PxTransformByEffectSchema.optional(),
-  repeater: PxRepeaterEffectSchema.optional(),
-  maskedBy: PxMaskedByEffectSchema.optional(),
-  clipPath: PxClipPathEffectSchema.optional(),
-  trimPath: PxTrimPathEffectSchema.optional(),
-  clone: PxCloneEffectSchema.optional(),
-  fillGradient: PxFillGradientEffectSchema.optional(),
-  strokeGradient: PxStrokeGradientEffectSchema.optional(),
-  textPath: PxTextPathEffectSchema.optional(),
-  text: PxTextEffectSchema.optional()
-}));
-function validateNodeEffects(root, opts) {
-  const warnings = [];
-  const walk = (node, path) => {
-    if (node && node.effects) {
-      const ctx = { errors: [], warnings: [], strict: !!(opts == null ? void 0 : opts.strict) };
-      const ok = PxEffectsSchema.isValid(node.effects, ctx, [path + ".effects"]);
-      if (!ok) {
-        for (const err of ctx.errors) warnings.push(err);
-      }
-    }
-    if (node && Array.isArray(node.children)) {
-      node.children.forEach((c, i) => walk(c, path + ".children[" + i + "]"));
-    }
-  };
-  walk(root, "root");
-  return warnings;
-}
-var PxNodeBase = px.openObject({
-  // CONVENTION (SCHEMA-DESIGN R1 / issues N4): `type` is the ONE word for "what
-  // kind of thing is this", discriminated by its CARRIER — here the node TAG
-  // (`rect`, `text`), and inside a sub-object that object's kind (`clone.type`,
-  // `fillGradient.type`, editor `preset.type`). Each sits in its own object, so
-  // the carrier disambiguates completely; synonyms (`cloneKind`, `presetShape`)
-  // would add words that all mean "type" and still need the carrier to read.
-  // Guarding a `type` SLOT against a wrong VALUE is the job of strict enums
-  // (issues V3), never of distinct key names.
-  type: px.string(),
-  id: px.string().optional(),
-  meta: px.any().optional(),
-  // Player-effects bucket emitted by the Editor's lightweight design format.
-  // Consumed and removed by `applyPlayerEffects` before any other normalisation
-  // (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(__spreadProps2(__spreadValues2({}, PxNodeBase._shape), {
-  children: px.lazy(() => px.array(PxNodeSchema), []).optional()
-}), PxAttrValueSchema);
-var PxSvgNodeExtra = px.object({
-  width: px.number().optional(),
-  height: px.number().optional(),
-  viewBox: px.string().optional(),
-  animator: PxAnimatorConfigSchema.optional()
-});
-var PxAnimatedSvgDocumentSchema = px.openObject(__spreadProps2(__spreadValues2(__spreadValues2({}, 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()
-}));
-function isPxElementFileFormatDeep(fileJson) {
-  const valid = PxAnimatedSvgDocumentSchema.isValid(fileJson);
-  return { valid, errors: valid ? [] : ["Document failed schema validation"] };
-}
-function bezierToSvgPath(path, forceCurves = false) {
-  var _a, _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 = (_a = o == null ? void 0 : o[idx - 1]) != null ? _a : 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 _a, _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 = (_a = path1.i) == null ? void 0 : _a[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 _a;
-  const inner = (_a = s.match(/rgba?\((.*)\)/)) == null ? void 0 : _a[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 COLOUR_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 _a;
-  if (!parts) return "";
-  const withUnits = (_a = opts == null ? void 0 : opts.withUnits) != null ? _a : 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("");
-}
-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);
-  }
-  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;
-  }
-  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;
-  }
-  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]);
+  PxPropertyAnimationSchema
+]);
+var PxAnimatableVec2Schema = px.union([
+  px.tuple([px.number(), px.number()]),
+  px.object({ value: px.tuple([px.number(), px.number()]) }),
+  PxPropertyAnimationSchema
+]);
+var PxAnimatableStringSchema = px.union([
+  px.string(),
+  px.object({ value: px.string() }),
+  PxPropertyAnimationSchema
+]);
+var PxTransformByEffectSchema = implementsInterface()(px.object({
+  translate: PxAnimatableVec2Schema.optional(),
+  rotate: PxAnimatableNumberSchema.optional(),
+  scale: PxAnimatableVec2Schema.optional(),
+  skew: PxAnimatableNumberSchema.optional(),
+  origin: PxAnimatableVec2Schema.optional()
+}));
+var PxRepeaterEffectSchema = implementsInterface()(px.object({
+  // STATIC config, not a channel (V2/SCHEMA-DESIGN R5): the copy COUNT is read
+  // once at expansion time and never sampled — plain number, no `keyframes`.
+  copies: px.number().optional(),
+  translate: PxAnimatableVec2Schema.optional(),
+  rotate: PxAnimatableNumberSchema.optional(),
+  skew: PxAnimatableNumberSchema.optional(),
+  scale: PxAnimatableVec2Schema.optional(),
+  origin: PxAnimatableVec2Schema.optional()
+}));
+var PxMaskedByEffectSchema = implementsInterface()(px.object({
+  sourceId: px.string().optional(),
+  maskType: px.enum([PxMaskType.luminance, PxMaskType.alpha]).optional(),
+  maskUnits: px.enum([PxUnits.userSpaceOnUse, PxUnits.objectBoundingBox]).optional(),
+  maskContentUnits: px.enum([PxUnits.userSpaceOnUse, PxUnits.objectBoundingBox]).optional(),
+  x: px.number().optional(),
+  y: px.number().optional(),
+  width: px.number().optional(),
+  height: px.number().optional()
+}));
+var PxClipPathEffectSchema = implementsInterface()(px.object({
+  d: PxAnimatableStringSchema.optional(),
+  animate: PxPropertyAnimationSchema.optional()
+}));
+var PxTrimPathEffectSchema = implementsInterface()(px.object({
+  offset: PxAnimatableNumberSchema.optional(),
+  range: PxAnimatableVec2Schema.optional(),
+  subPaths: px.enum([PxTrimSubPaths.separate, PxTrimSubPaths.combined]).optional()
+}));
+var PxRetimeEffectSchema = implementsInterface()(px.object({
+  sourceId: px.string().optional(),
+  start: px.number().optional(),
+  stretch: px.number().optional(),
+  timeCrop: px.tuple([px.number(), px.number()]).optional()
+}));
+var PxCloneEffectSchema = implementsInterface()(px.object({
+  // Contextual kind — the `type` convention, see `PxNodeBase.type`.
+  type: px.enum([PxCloneType.content]).optional(),
+  sourceId: px.string().optional(),
+  retime: PxRetimeEffectSchema.optional()
+}));
+var PxGradientStopSchema = implementsInterface()(px.object({
+  offset: px.number(),
+  color: px.string()
+}));
+var PxAnimatableGradientStopsSchema = px.union([
+  px.array(PxGradientStopSchema),
+  px.object({ value: px.array(PxGradientStopSchema) }),
+  PxPropertyAnimationSchema
+]);
+var PxFillGradientEffectSchema = implementsInterface()(px.object({
+  // Contextual kind — the `type` convention, see `PxNodeBase.type`.
+  type: px.enum([PxGradientType.linear, PxGradientType.radial]),
+  p1: PxAnimatableVec2Schema.optional(),
+  p2: PxAnimatableVec2Schema.optional(),
+  c: PxAnimatableVec2Schema.optional(),
+  r: PxAnimatableNumberSchema.optional(),
+  fp: PxAnimatableVec2Schema.optional(),
+  stops: PxAnimatableGradientStopsSchema.optional(),
+  gradientUnits: px.enum([PxGradientUnits.userSpaceOnUse, PxGradientUnits.objectBoundingBox]).optional(),
+  spreadMethod: px.enum([PxGradientSpreadMethod.pad, PxGradientSpreadMethod.reflect, PxGradientSpreadMethod.repeat]).optional(),
+  gradientTransform: px.string().optional()
+}));
+var PxStrokeGradientEffectSchema = PxFillGradientEffectSchema;
+var PxTextPathEffectSchema = implementsInterface()(px.object({
+  path: px.string(),
+  pathOverflow: px.enum([PxPathOverflow.clip, PxPathOverflow.extend]).optional(),
+  lengthAdjust: px.enum([PxLengthAdjust.spacing, PxLengthAdjust.spacingAndGlyphs]).optional(),
+  method: px.enum([PxTextPathMethod.align, PxTextPathMethod.stretch]).optional(),
+  spacing: px.enum([PxTextPathSpacing.auto, PxTextPathSpacing.exact]).optional(),
+  startOffset: PxAnimatableNumberSchema.optional(),
+  textLength: PxAnimatableNumberSchema.optional()
+}));
+var PxTextEffectSchema = implementsInterface()(px.object({
+  useGlyphs: px.boolean().optional()
+}));
+var PxEffectsSchema = implementsInterface()(px.object({
+  transformBy: PxTransformByEffectSchema.optional(),
+  repeater: PxRepeaterEffectSchema.optional(),
+  maskedBy: PxMaskedByEffectSchema.optional(),
+  clipPath: PxClipPathEffectSchema.optional(),
+  trimPath: PxTrimPathEffectSchema.optional(),
+  clone: PxCloneEffectSchema.optional(),
+  fillGradient: PxFillGradientEffectSchema.optional(),
+  strokeGradient: PxStrokeGradientEffectSchema.optional(),
+  textPath: PxTextPathEffectSchema.optional(),
+  text: PxTextEffectSchema.optional()
+}));
+function validateNodeEffects(root, opts) {
+  const warnings = [];
+  const walk = (node, path) => {
+    if (node && node.effects) {
+      const ctx = { errors: [], warnings: [], strict: !!(opts == null ? void 0 : opts.strict) };
+      const ok = PxEffectsSchema.isValid(node.effects, ctx, [path + ".effects"]);
+      if (!ok) {
+        for (const err of ctx.errors) warnings.push(err);
+      }
+    }
+    if (node && Array.isArray(node.children)) {
+      node.children.forEach((c, i) => walk(c, path + ".children[" + i + "]"));
+    }
+  };
+  walk(root, "root");
+  return warnings;
 }
-function invertEasing(easing) {
-  if (!easing) return (y) => y;
-  const flipped = [easing[1], easing[0], easing[3], easing[2]];
-  return cubicBezier(flipped);
+var PxNodeBase = px.openObject({
+  // CONVENTION (SCHEMA-DESIGN R1 / issues N4): `type` is the ONE word for "what
+  // kind of thing is this", discriminated by its CARRIER — here the node TAG
+  // (`rect`, `text`), and inside a sub-object that object's kind (`clone.type`,
+  // `fillGradient.type`, editor `preset.type`). Each sits in its own object, so
+  // the carrier disambiguates completely; synonyms (`cloneKind`, `presetShape`)
+  // would add words that all mean "type" and still need the carrier to read.
+  // Guarding a `type` SLOT against a wrong VALUE is the job of strict enums
+  // (issues V3), never of distinct key names.
+  type: px.string(),
+  id: px.string().optional(),
+  meta: px.any().optional(),
+  // Player-effects bucket emitted by the Editor's lightweight design format.
+  // Consumed and removed by `applyPlayerEffects` before any other normalisation
+  // (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(__spreadProps2(__spreadValues2({}, 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(__spreadProps2(__spreadValues2(__spreadValues2({}, 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()
+}));
+function isPxElementFileFormatDeep(fileJson) {
+  const valid = PxAnimatedSvgDocumentSchema.isValid(fileJson);
+  return { valid, errors: valid ? [] : ["Document failed schema validation"] };
 }
 var _idCounter = 0;
 function generateUniqueId() {
@@ -2052,7 +2125,7 @@ function walkAndMaterialise(node, opts) {
   if (newAnimate) cloned.animate = newAnimate;
   return cloned;
 }
-var LOOP_JUMP_SHIFT_MS = 10;
+var LOOP_JUMP_SHIFT_MS = 1;
 function deepEqualValue(a, b) {
   if (a === b) return true;
   if (typeof a !== typeof b || a === null || b === null || typeof a !== "object") return false;
@@ -2301,6 +2374,8 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
   const looped = [];
   const separateBoundary = loop.extend !== PxLoopExtend.before;
   const originalTerminalKf = keyframes[keyframes.length - 1];
+  let terminalEasingOverride;
+  let hasTerminalEasingOverride = false;
   function appendRep(repStart, isReversed, partial) {
     var _a2;
     let entries;
@@ -2341,7 +2416,16 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
       const prevKf = looped.length > 0 ? looped[looped.length - 1] : originalTerminalKf;
       const isBoundary = separateBoundary && i === 0 && prevKf !== void 0 && Math.abs(((_a2 = prevKf.t) != null ? _a2 : 0) - (repStart + entry.relT * segDuration)) < 1e-9;
       if (isBoundary) {
-        if (deepEqualValue(prevKf.v, entry.v)) continue;
+        if (deepEqualValue(prevKf.v, entry.v)) {
+          if (looped.length > 0) {
+            prevKf.e = entry.e;
+            prevKf.tangentOut = entry.tangentOut;
+          } else {
+            terminalEasingOverride = entry.e;
+            hasTerminalEasingOverride = true;
+          }
+          continue;
+        }
         if (looped.length > 0) {
           delete prevKf.tangentIn;
           delete prevKf.tangentOut;
@@ -2422,6 +2506,11 @@ function expandLoopKeyframes(propName, keyframes, loop, duration) {
   if (loop.extend === PxLoopExtend.before) {
     return [...looped, ...keyframes];
   } else {
+    if (hasTerminalEasingOverride && keyframes.length > 0) {
+      const head = keyframes.slice(0, -1);
+      const tail = __spreadProps2(__spreadValues2({}, keyframes[keyframes.length - 1]), { e: terminalEasingOverride });
+      return [...head, tail, ...looped];
+    }
     return [...keyframes, ...looped];
   }
 }
@@ -2538,6 +2627,9 @@ function generateElementId() {
 function normalizeAnimationDefinition(animDef, duration, defs, engine = PxAnimatorEngine.waapi) {
   const normalized = {};
   for (const [propName, propAnim] of Object.entries(animDef)) {
+    if (propName === "transform" && propAnim.alongPathMode === "offsetPath" && animDef["offsetDistance"] !== void 0) {
+      continue;
+    }
     const normalizedKfs = normalizeKeyframes(propName, propAnim, duration, defs);
     if (normalizedKfs.length > 0) {
       const out = { kfs: normalizedKfs };
@@ -5349,9 +5441,138 @@ function applyPlayerEffects_retime(node, ctx) {
   applyAllRetimeEffects(node, ctx);
   return node;
 }
+var kfTime = (kf) => {
+  var _a, _b;
+  return (_b = (_a = kf.t) != null ? _a : kf.time) != null ? _b : 0;
+};
+var kfValue = (kf) => {
+  var _a;
+  return (_a = kf.v) != null ? _a : kf.value;
+};
+var kfEasing = (kf) => {
+  var _a;
+  return (_a = kf.e) != null ? _a : kf.easing;
+};
+var kfTangentIn = (kf) => {
+  var _a;
+  return (_a = kf.tangentIn) != null ? _a : kf.ti;
+};
+var kfTangentOut = (kf) => {
+  var _a;
+  return (_a = kf.tangentOut) != null ? _a : kf.to;
+};
+function cubicAt(p0, c1, c2, p1, t) {
+  const u = 1 - t;
+  const a = u * u * u, b = 3 * u * u * t, c = 3 * u * t * t, d = t * t * t;
+  return [
+    a * p0[0] + b * c1[0] + c * c2[0] + d * p1[0],
+    a * p0[1] + b * c1[1] + c * c2[1] + d * p1[1]
+  ];
+}
+function cubicLength(p0, c1, c2, p1, steps = 64) {
+  let len = 0;
+  let prev = p0;
+  for (let i = 1; i <= steps; i++) {
+    const pt = cubicAt(p0, c1, c2, p1, i / steps);
+    len += Math.hypot(pt[0] - prev[0], pt[1] - prev[1]);
+    prev = pt;
+  }
+  return len;
+}
+var fmt2 = (n) => {
+  const r = Math.round(n * 1e4) / 1e4;
+  return Object.is(r, -0) ? "0" : String(r);
+};
+function buildOffsetPath(propAnim) {
+  var _a, _b, _c, _d;
+  if (propAnim.alongPathMode !== "offsetPath") return void 0;
+  const kfs = (_a = propAnim.keyframes) != null ? _a : propAnim.kfs;
+  if (!kfs || kfs.length < 2) return void 0;
+  const first = kfValue(kfs[0]);
+  const anchor = (first == null ? void 0 : first.origin) && first.origin.length >= 2 ? [first.origin[0], first.origin[1]] : [0, 0];
+  const points = [];
+  for (const kf of kfs) {
+    const v = kfValue(kf);
+    const tr = v == null ? void 0 : v.translate;
+    if (!tr || tr.length < 2) return void 0;
+    const parts = Object.keys(v);
+    if (parts.some((p) => p !== "translate" && p !== "origin")) return void 0;
+    const o = (_b = v == null ? void 0 : v.origin) != null ? _b : [0, 0];
+    if (o[0] !== anchor[0] || o[1] !== anchor[1]) return void 0;
+    points.push([tr[0] + anchor[0], tr[1] + anchor[1]]);
+  }
+  if (!kfs.some((kf) => kfTangentIn(kf) || kfTangentOut(kf))) return void 0;
+  let d = "M" + fmt2(points[0][0]) + "," + fmt2(points[0][1]);
+  const segLens = [];
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[i], p1 = points[i + 1];
+    const to = (_c = kfTangentOut(kfs[i])) != null ? _c : [0, 0];
+    const ti = (_d = kfTangentIn(kfs[i + 1])) != null ? _d : [0, 0];
+    const c1 = [p0[0] + to[0], p0[1] + to[1]];
+    const c2 = [p1[0] + ti[0], p1[1] + ti[1]];
+    d += "C" + fmt2(c1[0]) + "," + fmt2(c1[1]) + "," + fmt2(c2[0]) + "," + fmt2(c2[1]) + "," + fmt2(p1[0]) + "," + fmt2(p1[1]);
+    segLens.push(cubicLength(p0, c1, c2, p1));
+  }
+  const total = segLens.reduce((a, b) => a + b, 0);
+  if (!(total > 0)) return void 0;
+  const distanceKfs = [];
+  let cum = 0;
+  for (let i = 0; i < kfs.length; i++) {
+    if (i > 0) cum += segLens[i - 1];
+    const out = { t: kfTime(kfs[i]), v: cum / total };
+    const e = kfEasing(kfs[i]);
+    if (e !== void 0) out.e = e;
+    distanceKfs.push(out);
+  }
+  return { pathStr: d, distanceKfs, autoOrient: !!propAnim.autoOrient, anchor };
+}
+function materialiseOffsetPathsInTree(root) {
+  const walk = (node) => {
+    var _a;
+    let out = node;
+    const anim = node.animate;
+    const transform = anim == null ? void 0 : anim["transform"];
+    if (transform) {
+      const built = buildOffsetPath(transform);
+      if (built) {
+        const newAnimate = __spreadValues2({}, anim);
+        delete newAnimate["transform"];
+        const distance = { keyframes: built.distanceKfs };
+        if (transform.loop !== void 0) distance.loop = transform.loop;
+        newAnimate["offsetDistance"] = distance;
+        const staticTr = node.transform;
+        let newTransform = staticTr;
+        if (staticTr && typeof staticTr === "object") {
+          const t = __spreadValues2({}, staticTr);
+          delete t["translate"];
+          delete t["origin"];
+          newTransform = Object.keys(t).length ? t : void 0;
+        }
+        out = __spreadProps2(__spreadValues2({}, node), {
+          animate: newAnimate,
+          style: __spreadProps2(__spreadValues2({}, node.style), {
+            offsetPath: "path('" + built.pathStr + "')",
+            offsetAnchor: fmt2(built.anchor[0]) + "px " + fmt2(built.anchor[1]) + "px",
+            offsetRotate: built.autoOrient ? "auto" : "0deg",
+            offsetDistance: "0%"
+          })
+        });
+        if (newTransform !== void 0) out.transform = newTransform;
+        else delete out.transform;
+      }
+    }
+    if ((_a = out.children) == null ? void 0 : _a.length) {
+      const children = out.children.map(walk);
+      if (children.some((c, i) => c !== out.children[i])) out = __spreadProps2(__spreadValues2({}, out), { children });
+    }
+    return out;
+  };
+  return walk(root);
+}
 function materialiseAllInTree(doc, engine, opts) {
   var _a, _b;
   let root = applyPlayerEffects(doc).root;
+  root = materialiseOffsetPathsInTree(root);
   const duration = (_b = (_a = getAnimatorConfig(root)) == null ? void 0 : _a.duration) != null ? _b : DEFAULT_DURATION_MS;
   root = materialiseInternalLoopsInTree(root, duration);
   if (engine === PxAnimatorEngine.waapi) {
@@ -6002,7 +6223,13 @@ function createFrameLoopAnimator(doc, adapter, callbacks, rootElement) {
   const api = __spreadProps(__spreadValues({}, basicApi), {
     "getRootElement": () => rootElement || null
   });
-  if (config.trigger) setupAnimationTriggers(api, config.trigger);
+  if (config.trigger) {
+    if (isScrollTimeline(config)) {
+      console.warn("scroll timeline: `animator.trigger` is ignored (triggers do not apply to scroll-driven playback)");
+    } else {
+      setupAnimationTriggers(api, config.trigger);
+    }
+  }
   return api;
 }
 function createDomAdapter(rootElement) {
@@ -6060,6 +6287,8 @@ function createCssKf(kf, t, propName, unsupportedSet) {
   } else if (propName === "d") {
     const paths = value && typeof value === "object" && Array.isArray(value.paths) ? value.paths : [];
     cssValue = 'path("' + paths.map((bz) => bezierToSvgPath(bz, true)).join("") + '")';
+  } else if (PCT_BASED_ATTR_NAMES.has(propName) && typeof value === "number") {
+    cssValue = value * 100 + "%";
   } else {
     cssValue = "" + value;
   }
@@ -6128,7 +6357,7 @@ function convertToWebApiKeyframes(animDef, unsupportedSet, config) {
   }
   return result;
 }
-function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsupportedAttrs) {
+function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsupportedAttrs, scrollTimeline) {
   var _a;
   const config = getAnimatorConfig(doc) || {};
   if (!rootElement) {
@@ -6187,7 +6416,12 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
         if (keyframes.length > 0) {
           try {
             const effect = new KeyframeEffect(element, keyframes, effectOptions);
-            const anim = new Animation(effect, document.timeline);
+            const anim = new Animation(effect, scrollTimeline ? scrollTimeline.timeline : document.timeline);
+            if (scrollTimeline) {
+              const a = anim;
+              if (scrollTimeline.rangeStart) a.rangeStart = scrollTimeline.rangeStart;
+              if (scrollTimeline.rangeEnd) a.rangeEnd = scrollTimeline.rangeEnd;
+            }
             if (callbacks == null ? void 0 : callbacks.onFinish) anim.onfinish = () => {
               var _a2;
               if (finishNotified) return;
@@ -6281,11 +6515,136 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
     }
   };
   if (config.trigger) {
-    setupAnimationTriggers(api, config.trigger);
+    if (config.timelineSource === "scroll") {
+      console.warn("scroll timeline: `animator.trigger` is ignored (triggers do not apply to scroll-driven playback)");
+    } else {
+      setupAnimationTriggers(api, config.trigger);
+    }
+  }
+  if (scrollTimeline) {
+    animations.forEach((a) => a.play());
   }
   return api;
 }
 
+// src/PxScrollDriver.ts
+function nativeRangeOffset(point, defaultFraction, view) {
+  var _a, _b, _c;
+  const fraction = typeof (point == null ? void 0 : point.fraction) === "number" ? point.fraction : defaultFraction;
+  const pct = (_b = (_a = globalThis.CSS) == null ? void 0 : _a.percent) == null ? void 0 : _b.call(_a, fraction * 100);
+  if (pct === void 0) return void 0;
+  return view ? { rangeName: (_c = point == null ? void 0 : point.phase) != null ? _c : "cover", offset: pct } : { offset: pct };
+}
+function createNativeScrollTimeline(subject, config) {
+  var _a, _b, _c, _d;
+  if (!config || !isScrollTimeline(config)) return null;
+  const scroll = config.scroll || {};
+  const kind = (_a = scroll.kind) != null ? _a : "view";
+  const g = globalThis;
+  const view = kind === "view";
+  const Ctor = view ? g.ViewTimeline : g.ScrollTimeline;
+  if (typeof Ctor !== "function") return null;
+  const axis = (_b = scroll.axis) != null ? _b : "block";
+  let timeline;
+  try {
+    if (view) {
+      timeline = new Ctor({ subject, axis });
+    } else {
+      const source = scroll.source === "root" ? documentScroller() : findNearestScroller(subject, "y") || findNearestScroller(subject, "x") || documentScroller();
+      timeline = new Ctor({ source, axis });
+    }
+  } catch (e) {
+    console.warn("scroll timeline: native timeline construction failed \u2014 falling back to the custom driver", e);
+    return null;
+  }
+  return {
+    timeline,
+    rangeStart: nativeRangeOffset((_c = scroll.range) == null ? void 0 : _c.start, 0, view),
+    rangeEnd: nativeRangeOffset((_d = scroll.range) == null ? void 0 : _d.end, 1, view)
+  };
+}
+function findNearestScroller(el, axis) {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const style = getComputedStyle(p);
+    const overflow = axis === "y" ? style.overflowY : style.overflowX;
+    if (overflow === "auto" || overflow === "scroll" || overflow === "hidden" || overflow === "overlay") {
+      return p;
+    }
+  }
+  return null;
+}
+function documentScroller() {
+  return document.scrollingElement || document.documentElement;
+}
+function createScrollDriver(subject, config, onProgress) {
+  var _a;
+  if (!config || !isScrollTimeline(config)) return null;
+  const scroll = config.scroll || {};
+  const kind = (_a = scroll.kind) != null ? _a : "view";
+  const nearest = findNearestScroller(subject, "y") || findNearestScroller(subject, "x");
+  const scroller = kind === "scroll" && scroll.source === "root" ? documentScroller() : nearest || documentScroller();
+  const isRootScroller = scroller === documentScroller();
+  const axis = scrollResolveAxis(scroll.axis, getComputedStyle(scroller).writingMode);
+  const compute = () => {
+    if (kind === "scroll") {
+      const offset = axis === "y" ? scroller.scrollTop : scroller.scrollLeft;
+      const maxOffset = axis === "y" ? scroller.scrollHeight - scroller.clientHeight : scroller.scrollWidth - scroller.clientWidth;
+      return scrollOffsetProgress(offset, maxOffset, scroll.range);
+    }
+    const subjectRect = subject.getBoundingClientRect();
+    let portStart, portSize;
+    if (isRootScroller) {
+      portStart = 0;
+      portSize = axis === "y" ? document.documentElement.clientHeight : document.documentElement.clientWidth;
+    } else {
+      const portRect = scroller.getBoundingClientRect();
+      portStart = axis === "y" ? portRect.top : portRect.left;
+      portSize = axis === "y" ? scroller.clientHeight : scroller.clientWidth;
+    }
+    const subjectStart = (axis === "y" ? subjectRect.top : subjectRect.left) - portStart;
+    const subjectSize = axis === "y" ? subjectRect.height : subjectRect.width;
+    return scrollViewProgress(subjectStart, subjectSize, portSize, scroll.range);
+  };
+  let rafId = null;
+  let destroyed = false;
+  const tick = () => {
+    rafId = null;
+    if (destroyed) return;
+    onProgress(compute());
+  };
+  const schedule = () => {
+    if (destroyed || rafId !== null) return;
+    rafId = requestAnimationFrame(tick);
+  };
+  const scrollTarget = isRootScroller ? window : scroller;
+  scrollTarget.addEventListener("scroll", schedule, { passive: true });
+  window.addEventListener("resize", schedule, { passive: true });
+  let resizeObserver;
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(schedule);
+    resizeObserver.observe(subject);
+    if (!isRootScroller) resizeObserver.observe(scroller);
+  }
+  const driver = {
+    destroy: () => {
+      if (destroyed) return;
+      destroyed = true;
+      scrollTarget.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+    },
+    refresh: () => {
+      if (!destroyed) onProgress(compute());
+    }
+  };
+  driver.refresh();
+  return driver;
+}
+
 // src/PxAnimatorBind.ts
 function finaliseAnimator(animatorConfig, callbacks, make) {
   let apiRef;
@@ -6308,6 +6667,44 @@ function finaliseAnimator(animatorConfig, callbacks, make) {
 }
 function bindWithEngineChoice(doc, adapter, callbacks, rootElement) {
   const animatorConfig = getAnimatorConfig(doc) || {};
+  if (isScrollTimeline(animatorConfig)) {
+    return finaliseAnimator(animatorConfig, callbacks, (cb) => {
+      var _a, _b;
+      if (animatorConfig.mode !== PxAnimatorMode.frames && ((_a = animatorConfig.scroll) == null ? void 0 : _a.driver) === "native" && rootElement) {
+        const native = createNativeScrollTimeline(rootElement, animatorConfig);
+        if (native) {
+          const api2 = createWebApiAnimator(
+            doc,
+            cb,
+            rootElement,
+            animatorConfig.mode === PxAnimatorMode.waapi,
+            native
+          );
+          if (api2) return api2;
+        }
+      }
+      const api = (animatorConfig.mode !== PxAnimatorMode.frames ? createWebApiAnimator(doc, cb, rootElement, animatorConfig.mode === PxAnimatorMode.waapi) : null) || createFrameLoopAnimator(doc, adapter, cb, rootElement);
+      const subject = ((_b = api.getRootElement) == null ? void 0 : _b.call(api)) || rootElement;
+      if (subject) {
+        const totalMs = scrollTotalDurationMs(animatorConfig);
+        const driver = createScrollDriver(
+          subject,
+          animatorConfig,
+          (progress) => api.setCurrentTime(progress * totalMs)
+        );
+        if (driver) {
+          const destroy = api.destroy.bind(api);
+          api.destroy = () => {
+            driver.destroy();
+            destroy();
+          };
+        }
+      } else {
+        console.warn("scroll timeline: no root element to observe \u2014 animation will stay at frame 0");
+      }
+      return api;
+    });
+  }
   return finaliseAnimator(animatorConfig, callbacks, (cb) => {
     if (animatorConfig.mode === PxAnimatorMode.frames) {
       return createFrameLoopAnimator(doc, adapter, cb, rootElement);