@pixodesk/svg-animator-core 1.0.26 → 1.0.28

package/dist/index.js

@@ -31,111 +31,583 @@ var __objRest = (source, exclude) => {
   return target;
 };
 
-// src/PxSchema.ts
-function pathStr(path) {
-  if (!path.length) return ".";
-  let result = "";
-  for (const seg of path) {
-    if (seg.startsWith("[")) result += seg;
-    else result += (result ? "." : "") + seg;
+// src/PxAnimatorUtil.ts
+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]);
+    }
   }
-  return result;
-}
-var Base = class {
-  _canSanitize(raw) {
-    return this.isValid(raw);
+  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");
   }
-  optional() {
-    return new Optional(this);
+  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);
   }
-};
-var Optional = class extends Base {
-  constructor(inner) {
-    super();
-    this.inner = inner;
-    this._default = 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));
   }
-  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 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));
   }
-  isValid(raw, ctx, path) {
-    if (raw === void 0 || raw === null) return true;
-    return this.inner.isValid(raw, ctx, path);
+  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;
   }
-  _canSanitize(raw) {
-    return raw === void 0 || raw === null || this.inner._canSanitize(raw);
+  function sampleDX(t) {
+    return (3 * ax * t + 2 * bx) * t + cx;
   }
-};
-var Str = class extends Base {
-  constructor(_default = "") {
-    super();
-    this._default = _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;
   }
-  sanitize(raw) {
-    return typeof raw === "string" ? raw : this._default;
+  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;
   }
-  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;
+  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;
   }
-};
-var Num = class extends Base {
-  constructor(_default = 0) {
-    super();
-    this._default = _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
+    ];
   }
-  sanitize(raw) {
-    return typeof raw === "number" && isFinite(raw) ? raw : this._default;
+  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
+    ];
   }
-  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 { 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);
   }
-};
-var Bool = class extends Base {
-  constructor(_default = false) {
-    super();
-    this._default = _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);
   }
-  sanitize(raw) {
-    return typeof raw === "boolean" ? raw : this._default;
+  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);
   }
-  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 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);
+}
+
+// src/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 _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";
+}
+
+// src/PxSchema.ts
+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 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;
   }
 };
@@ -698,6 +1170,28 @@ 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(),
+  // Free-form: the two keywords `parent`/`scroller` plus any CSS selector.
+  subject: px.string().optional(),
+  smoothing: px.number().optional(),
+  pin: px.boolean().optional(),
+  pinTop: px.number().optional(),
+  pinDistance: px.number().optional(),
+  range: PxScrollRangeSchema.optional()
+}));
 var PxAnimatorConfigSchema = implementsInterface()(px.object({
   mode: px.enum([PxAnimatorMode.auto, PxAnimatorMode.waapi, PxAnimatorMode.frames]).optional(),
   duration: px.number().optional(),
@@ -713,6 +1207,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({
@@ -905,422 +1400,6 @@ function isPxElementFileFormatDeep(fileJson) {
   return { valid, errors: valid ? [] : ["Document failed schema validation"] };
 }
 
-// src/PxAnimatorUtil.ts
-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]);
-}
-function invertEasing(easing) {
-  if (!easing) return (y) => y;
-  const flipped = [easing[1], easing[0], easing[3], easing[2]];
-  return cubicBezier(flipped);
-}
-
 // src/PxIdUtil.ts
 var _idCounter = 0;
 function generateUniqueId() {
@@ -5973,6 +6052,9 @@ export {
   PxPropertyAnimationSchema,
   PxRepeaterEffectSchema,
   PxRetimeEffectSchema,
+  PxScrollRangePointSchema,
+  PxScrollRangeSchema,
+  PxScrollSchema,
   PxStrokeGradientEffectSchema,
   PxSvgNodeExtra,
   PxTextEffectSchema,
@@ -6014,6 +6096,7 @@ export {
   interpolateValue,
   isPxElementFileFormat,
   isPxElementFileFormatDeep,
+  isScrollTimeline,
   jsonElementFactory,
   kebabToCamelCaseWord,
   layoutGlyphTextChars,
@@ -6032,6 +6115,11 @@ export {
   reverseEasing,
   sanitiseAttributeValue,
   schemaKeys,
+  scrollOffsetProgress,
+  scrollPhaseInterval,
+  scrollResolveAxis,
+  scrollTotalDurationMs,
+  scrollViewProgress,
   shiftAnimatable,
   splitEasing,
   subdivideCubicBezier,