@voila.dev/motion 0.0.0-stage → 5.0.113

package/dist/view/resolve-elements.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/view/resolve-elements.ts"],
+  "sourcesContent": ["/** Elements named by a selector, a list or a single element. */\nexport function resolveElements(\n\ttarget: Element | string | readonly Element[],\n): readonly Element[] {\n\tif (typeof target === \"string\") {\n\t\treturn typeof document === \"undefined\"\n\t\t\t? []\n\t\t\t: Array.from(document.querySelectorAll(target));\n\t}\n\treturn \"length\" in target ? target : [target as Element];\n}\n"],
+  "mappings": "AACO,SAAS,gBACf,QACqB;AACrB,MAAI,OAAO,WAAW,UAAU;AAC/B,WAAO,OAAO,aAAa,cACxB,CAAC,IACD,MAAM,KAAK,SAAS,iBAAiB,MAAM,CAAC;AAAA,EAChD;AACA,SAAO,YAAY,SAAS,SAAS,CAAC,MAAiB;AACxD;",
+  "names": []
+}

package/dist/view/scroll-measure.d.ts

@@ -0,0 +1,16 @@
+import type { ScrollGeometry } from "./scroll-offset.js";
+export type ScrollAxis = "x" | "y";
+/** The page's own scroller, which reports its scroll events on `window`. */
+export declare function documentScroller(): Element;
+export interface ScrollMeasurement {
+    readonly scroll: number;
+    /** The furthest the container can scroll along the axis. */
+    readonly scrollLength: number;
+    readonly geometry: ScrollGeometry;
+}
+/**
+ * Reads layout, so it belongs in the frame's read phase only. Without a
+ * target, the target is the scrolled content itself.
+ */
+export declare function measureScroll(container: Element, axis: ScrollAxis, target: Element | undefined): ScrollMeasurement;
+//# sourceMappingURL=scroll-measure.d.ts.map

package/dist/view/scroll-measure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-measure.d.ts","sourceRoot":"","sources":["../../src/view/scroll-measure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,CAAC;AA8BnC,4EAA4E;AAC5E,wBAAgB,gBAAgB,IAAI,OAAO,CAE1C;AAED,MAAM,WAAW,iBAAiB;IACjC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,4DAA4D;IAC5D,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC;CAClC;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAC5B,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,OAAO,GAAG,SAAS,GACzB,iBAAiB,CA8BnB"}

package/dist/view/scroll-measure.js

@@ -0,0 +1,51 @@
+const AXES = {
+  y: {
+    scroll: "scrollTop",
+    scrollLength: "scrollHeight",
+    client: "clientHeight",
+    clientStart: "clientTop",
+    rectStart: "top",
+    rectLength: "height"
+  },
+  x: {
+    scroll: "scrollLeft",
+    scrollLength: "scrollWidth",
+    client: "clientWidth",
+    clientStart: "clientLeft",
+    rectStart: "left",
+    rectLength: "width"
+  }
+};
+function documentScroller() {
+  return document.scrollingElement ?? document.documentElement;
+}
+function measureScroll(container, axis, target) {
+  const keys = AXES[axis];
+  const scroll = container[keys.scroll];
+  const viewportLength = container[keys.client];
+  const contentLength = container[keys.scrollLength];
+  const scrollLength = Math.max(0, contentLength - viewportLength);
+  if (target === void 0) {
+    return {
+      scroll,
+      scrollLength,
+      geometry: { targetStart: 0, targetLength: contentLength, viewportLength }
+    };
+  }
+  const scrollportStart = container === documentScroller() ? 0 : container.getBoundingClientRect()[keys.rectStart] + container[keys.clientStart];
+  const targetRect = target.getBoundingClientRect();
+  return {
+    scroll,
+    scrollLength,
+    geometry: {
+      targetStart: targetRect[keys.rectStart] - scrollportStart + scroll,
+      targetLength: targetRect[keys.rectLength],
+      viewportLength
+    }
+  };
+}
+export {
+  documentScroller,
+  measureScroll
+};
+//# sourceMappingURL=scroll-measure.js.map

package/dist/view/scroll-measure.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/view/scroll-measure.ts"],
+  "sourcesContent": ["import type { ScrollGeometry } from \"#/view/scroll-offset.ts\";\n\nexport type ScrollAxis = \"x\" | \"y\";\n\ninterface AxisKeys {\n\treadonly scroll: \"scrollTop\" | \"scrollLeft\";\n\treadonly scrollLength: \"scrollHeight\" | \"scrollWidth\";\n\treadonly client: \"clientHeight\" | \"clientWidth\";\n\treadonly clientStart: \"clientTop\" | \"clientLeft\";\n\treadonly rectStart: \"top\" | \"left\";\n\treadonly rectLength: \"height\" | \"width\";\n}\n\nconst AXES: Readonly<Record<ScrollAxis, AxisKeys>> = {\n\ty: {\n\t\tscroll: \"scrollTop\",\n\t\tscrollLength: \"scrollHeight\",\n\t\tclient: \"clientHeight\",\n\t\tclientStart: \"clientTop\",\n\t\trectStart: \"top\",\n\t\trectLength: \"height\",\n\t},\n\tx: {\n\t\tscroll: \"scrollLeft\",\n\t\tscrollLength: \"scrollWidth\",\n\t\tclient: \"clientWidth\",\n\t\tclientStart: \"clientLeft\",\n\t\trectStart: \"left\",\n\t\trectLength: \"width\",\n\t},\n};\n\n/** The page's own scroller, which reports its scroll events on `window`. */\nexport function documentScroller(): Element {\n\treturn document.scrollingElement ?? document.documentElement;\n}\n\nexport interface ScrollMeasurement {\n\treadonly scroll: number;\n\t/** The furthest the container can scroll along the axis. */\n\treadonly scrollLength: number;\n\treadonly geometry: ScrollGeometry;\n}\n\n/**\n * Reads layout, so it belongs in the frame's read phase only. Without a\n * target, the target is the scrolled content itself.\n */\nexport function measureScroll(\n\tcontainer: Element,\n\taxis: ScrollAxis,\n\ttarget: Element | undefined,\n): ScrollMeasurement {\n\tconst keys = AXES[axis];\n\tconst scroll = container[keys.scroll];\n\tconst viewportLength = container[keys.client];\n\tconst contentLength = container[keys.scrollLength];\n\tconst scrollLength = Math.max(0, contentLength - viewportLength);\n\tif (target === undefined) {\n\t\treturn {\n\t\t\tscroll,\n\t\t\tscrollLength,\n\t\t\tgeometry: { targetStart: 0, targetLength: contentLength, viewportLength },\n\t\t};\n\t}\n\t// The page scroller's own rect moves with its scroll; its scrollport is\n\t// the viewport, which starts at 0.\n\tconst scrollportStart =\n\t\tcontainer === documentScroller()\n\t\t\t? 0\n\t\t\t: container.getBoundingClientRect()[keys.rectStart] +\n\t\t\t\tcontainer[keys.clientStart];\n\tconst targetRect = target.getBoundingClientRect();\n\treturn {\n\t\tscroll,\n\t\tscrollLength,\n\t\tgeometry: {\n\t\t\ttargetStart: targetRect[keys.rectStart] - scrollportStart + scroll,\n\t\t\ttargetLength: targetRect[keys.rectLength],\n\t\t\tviewportLength,\n\t\t},\n\t};\n}\n"],
+  "mappings": "AAaA,MAAM,OAA+C;AAAA,EACpD,GAAG;AAAA,IACF,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,WAAW;AAAA,IACX,YAAY;AAAA,EACb;AAAA,EACA,GAAG;AAAA,IACF,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,WAAW;AAAA,IACX,YAAY;AAAA,EACb;AACD;AAGO,SAAS,mBAA4B;AAC3C,SAAO,SAAS,oBAAoB,SAAS;AAC9C;AAaO,SAAS,cACf,WACA,MACA,QACoB;AACpB,QAAM,OAAO,KAAK,IAAI;AACtB,QAAM,SAAS,UAAU,KAAK,MAAM;AACpC,QAAM,iBAAiB,UAAU,KAAK,MAAM;AAC5C,QAAM,gBAAgB,UAAU,KAAK,YAAY;AACjD,QAAM,eAAe,KAAK,IAAI,GAAG,gBAAgB,cAAc;AAC/D,MAAI,WAAW,QAAW;AACzB,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,UAAU,EAAE,aAAa,GAAG,cAAc,eAAe,eAAe;AAAA,IACzE;AAAA,EACD;AAGA,QAAM,kBACL,cAAc,iBAAiB,IAC5B,IACA,UAAU,sBAAsB,EAAE,KAAK,SAAS,IACjD,UAAU,KAAK,WAAW;AAC7B,QAAM,aAAa,OAAO,sBAAsB;AAChD,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA,UAAU;AAAA,MACT,aAAa,WAAW,KAAK,SAAS,IAAI,kBAAkB;AAAA,MAC5D,cAAc,WAAW,KAAK,UAAU;AAAA,MACxC;AAAA,IACD;AAAA,EACD;AACD;",
+  "names": []
+}

package/dist/view/scroll-offset.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Where a scroll animation starts and ends, as Motion writes it: each offset
+ * is "<target edge> <container edge>", the scroll position at which that
+ * point of the target meets that point of the scrollport. "start end" is the
+ * target's top touching the viewport's bottom.
+ */
+export type ScrollEdge = "start" | "center" | "end" | number | `${number}px` | `${number}%`;
+export type ScrollOffsetPoint = `${string} ${string}` | readonly [ScrollEdge, ScrollEdge];
+export type ScrollOffset = readonly [ScrollOffsetPoint, ScrollOffsetPoint];
+/** The target crossing the scrollport, from first pixel in to last pixel out. */
+export declare const ENTER_TO_EXIT: ScrollOffset;
+/** The whole scroll range, when there is no target. */
+export declare const FULL_RANGE: ScrollOffset;
+/** An edge as pixels along a length: named and bare numbers are fractions. */
+export declare function resolveEdge(edge: ScrollEdge, length: number): number;
+export declare function parseOffsetPoint(point: ScrollOffsetPoint): readonly [ScrollEdge, ScrollEdge];
+export interface ScrollGeometry {
+    /** The target's start along the axis, in the container's content coordinates. */
+    readonly targetStart: number;
+    readonly targetLength: number;
+    /** The scrollport's visible length. */
+    readonly viewportLength: number;
+}
+/** The scroll position at which one offset point is reached. */
+export declare function offsetPosition(point: ScrollOffsetPoint, geometry: ScrollGeometry): number;
+/** Progress 0..1 of `scroll` between the two offsets, clamped. */
+export declare function scrollProgress(scroll: number, offset: ScrollOffset, geometry: ScrollGeometry): number;
+//# sourceMappingURL=scroll-offset.d.ts.map

package/dist/view/scroll-offset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-offset.d.ts","sourceRoot":"","sources":["../../src/view/scroll-offset.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GACnB,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,GACN,GAAG,MAAM,IAAI,GACb,GAAG,MAAM,GAAG,CAAC;AAEhB,MAAM,MAAM,iBAAiB,GAC1B,GAAG,MAAM,IAAI,MAAM,EAAE,GACrB,SAAS,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AAErC,MAAM,MAAM,YAAY,GAAG,SAAS,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC;AAE3E,iFAAiF;AACjF,eAAO,MAAM,aAAa,EAAE,YAAyC,CAAC;AACtE,uDAAuD;AACvD,eAAO,MAAM,UAAU,EAAE,YAAyC,CAAC;AAQnE,8EAA8E;AAC9E,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAgBpE;AAED,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,iBAAiB,GACtB,SAAS,CAAC,UAAU,EAAE,UAAU,CAAC,CAMnC;AAQD,MAAM,WAAW,cAAc;IAC9B,iFAAiF;IACjF,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,uCAAuC;IACvC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;CAChC;AAED,gEAAgE;AAChE,wBAAgB,cAAc,CAC7B,KAAK,EAAE,iBAAiB,EACxB,QAAQ,EAAE,cAAc,GACtB,MAAM,CAOR;AAED,kEAAkE;AAClE,wBAAgB,cAAc,CAC7B,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,cAAc,GACtB,MAAM,CAOR"}

package/dist/view/scroll-offset.js

@@ -0,0 +1,55 @@
+const ENTER_TO_EXIT = ["start end", "end start"];
+const FULL_RANGE = ["start start", "end end"];
+const NAMED_EDGES = {
+  start: 0,
+  center: 0.5,
+  end: 1
+};
+function resolveEdge(edge, length) {
+  if (typeof edge === "number") {
+    return edge * length;
+  }
+  const named = NAMED_EDGES[edge];
+  if (named !== void 0) {
+    return named * length;
+  }
+  const value = Number.parseFloat(edge);
+  if (Number.isNaN(value)) {
+    throw new Error(`Unknown scroll edge: ${edge}`);
+  }
+  if (edge.endsWith("%")) {
+    return value / 100 * length;
+  }
+  return edge.endsWith("px") ? value : value * length;
+}
+function parseOffsetPoint(point) {
+  if (typeof point !== "string") {
+    return point;
+  }
+  const [target, container = target] = point.trim().split(/\s+/);
+  return [parseEdge(target), parseEdge(container)];
+}
+function parseEdge(text) {
+  return text in NAMED_EDGES || /[a-z%]$/.test(text) ? text : Number(text);
+}
+function offsetPosition(point, geometry) {
+  const [target, container] = parseOffsetPoint(point);
+  return geometry.targetStart + resolveEdge(target, geometry.targetLength) - resolveEdge(container, geometry.viewportLength);
+}
+function scrollProgress(scroll, offset, geometry) {
+  const from = offsetPosition(offset[0], geometry);
+  const to = offsetPosition(offset[1], geometry);
+  if (to === from) {
+    return scroll >= to ? 1 : 0;
+  }
+  return Math.min(1, Math.max(0, (scroll - from) / (to - from)));
+}
+export {
+  ENTER_TO_EXIT,
+  FULL_RANGE,
+  offsetPosition,
+  parseOffsetPoint,
+  resolveEdge,
+  scrollProgress
+};
+//# sourceMappingURL=scroll-offset.js.map

package/dist/view/scroll-offset.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/view/scroll-offset.ts"],
+  "sourcesContent": ["/**\n * Where a scroll animation starts and ends, as Motion writes it: each offset\n * is \"<target edge> <container edge>\", the scroll position at which that\n * point of the target meets that point of the scrollport. \"start end\" is the\n * target's top touching the viewport's bottom.\n */\nexport type ScrollEdge =\n\t| \"start\"\n\t| \"center\"\n\t| \"end\"\n\t| number\n\t| `${number}px`\n\t| `${number}%`;\n\nexport type ScrollOffsetPoint =\n\t| `${string} ${string}`\n\t| readonly [ScrollEdge, ScrollEdge];\n\nexport type ScrollOffset = readonly [ScrollOffsetPoint, ScrollOffsetPoint];\n\n/** The target crossing the scrollport, from first pixel in to last pixel out. */\nexport const ENTER_TO_EXIT: ScrollOffset = [\"start end\", \"end start\"];\n/** The whole scroll range, when there is no target. */\nexport const FULL_RANGE: ScrollOffset = [\"start start\", \"end end\"];\n\nconst NAMED_EDGES: Readonly<Record<string, number>> = {\n\tstart: 0,\n\tcenter: 0.5,\n\tend: 1,\n};\n\n/** An edge as pixels along a length: named and bare numbers are fractions. */\nexport function resolveEdge(edge: ScrollEdge, length: number): number {\n\tif (typeof edge === \"number\") {\n\t\treturn edge * length;\n\t}\n\tconst named = NAMED_EDGES[edge];\n\tif (named !== undefined) {\n\t\treturn named * length;\n\t}\n\tconst value = Number.parseFloat(edge);\n\tif (Number.isNaN(value)) {\n\t\tthrow new Error(`Unknown scroll edge: ${edge}`);\n\t}\n\tif (edge.endsWith(\"%\")) {\n\t\treturn (value / 100) * length;\n\t}\n\treturn edge.endsWith(\"px\") ? value : value * length;\n}\n\nexport function parseOffsetPoint(\n\tpoint: ScrollOffsetPoint,\n): readonly [ScrollEdge, ScrollEdge] {\n\tif (typeof point !== \"string\") {\n\t\treturn point;\n\t}\n\tconst [target, container = target] = point.trim().split(/\\s+/);\n\treturn [parseEdge(target), parseEdge(container)];\n}\n\nfunction parseEdge(text: string): ScrollEdge {\n\treturn text in NAMED_EDGES || /[a-z%]$/.test(text)\n\t\t? (text as ScrollEdge)\n\t\t: Number(text);\n}\n\nexport interface ScrollGeometry {\n\t/** The target's start along the axis, in the container's content coordinates. */\n\treadonly targetStart: number;\n\treadonly targetLength: number;\n\t/** The scrollport's visible length. */\n\treadonly viewportLength: number;\n}\n\n/** The scroll position at which one offset point is reached. */\nexport function offsetPosition(\n\tpoint: ScrollOffsetPoint,\n\tgeometry: ScrollGeometry,\n): number {\n\tconst [target, container] = parseOffsetPoint(point);\n\treturn (\n\t\tgeometry.targetStart +\n\t\tresolveEdge(target, geometry.targetLength) -\n\t\tresolveEdge(container, geometry.viewportLength)\n\t);\n}\n\n/** Progress 0..1 of `scroll` between the two offsets, clamped. */\nexport function scrollProgress(\n\tscroll: number,\n\toffset: ScrollOffset,\n\tgeometry: ScrollGeometry,\n): number {\n\tconst from = offsetPosition(offset[0], geometry);\n\tconst to = offsetPosition(offset[1], geometry);\n\tif (to === from) {\n\t\treturn scroll >= to ? 1 : 0;\n\t}\n\treturn Math.min(1, Math.max(0, (scroll - from) / (to - from)));\n}\n"],
+  "mappings": "AAqBO,MAAM,gBAA8B,CAAC,aAAa,WAAW;AAE7D,MAAM,aAA2B,CAAC,eAAe,SAAS;AAEjE,MAAM,cAAgD;AAAA,EACrD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACN;AAGO,SAAS,YAAY,MAAkB,QAAwB;AACrE,MAAI,OAAO,SAAS,UAAU;AAC7B,WAAO,OAAO;AAAA,EACf;AACA,QAAM,QAAQ,YAAY,IAAI;AAC9B,MAAI,UAAU,QAAW;AACxB,WAAO,QAAQ;AAAA,EAChB;AACA,QAAM,QAAQ,OAAO,WAAW,IAAI;AACpC,MAAI,OAAO,MAAM,KAAK,GAAG;AACxB,UAAM,IAAI,MAAM,wBAAwB,IAAI,EAAE;AAAA,EAC/C;AACA,MAAI,KAAK,SAAS,GAAG,GAAG;AACvB,WAAQ,QAAQ,MAAO;AAAA,EACxB;AACA,SAAO,KAAK,SAAS,IAAI,IAAI,QAAQ,QAAQ;AAC9C;AAEO,SAAS,iBACf,OACoC;AACpC,MAAI,OAAO,UAAU,UAAU;AAC9B,WAAO;AAAA,EACR;AACA,QAAM,CAAC,QAAQ,YAAY,MAAM,IAAI,MAAM,KAAK,EAAE,MAAM,KAAK;AAC7D,SAAO,CAAC,UAAU,MAAM,GAAG,UAAU,SAAS,CAAC;AAChD;AAEA,SAAS,UAAU,MAA0B;AAC5C,SAAO,QAAQ,eAAe,UAAU,KAAK,IAAI,IAC7C,OACD,OAAO,IAAI;AACf;AAWO,SAAS,eACf,OACA,UACS;AACT,QAAM,CAAC,QAAQ,SAAS,IAAI,iBAAiB,KAAK;AAClD,SACC,SAAS,cACT,YAAY,QAAQ,SAAS,YAAY,IACzC,YAAY,WAAW,SAAS,cAAc;AAEhD;AAGO,SAAS,eACf,QACA,QACA,UACS;AACT,QAAM,OAAO,eAAe,OAAO,CAAC,GAAG,QAAQ;AAC/C,QAAM,KAAK,eAAe,OAAO,CAAC,GAAG,QAAQ;AAC7C,MAAI,OAAO,MAAM;AAChB,WAAO,UAAU,KAAK,IAAI;AAAA,EAC3B;AACA,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,SAAS,SAAS,KAAK,KAAK,CAAC;AAC9D;",
+  "names": []
+}

package/dist/view/scroll.d.ts

@@ -0,0 +1,34 @@
+import { type ScrollAxis } from "./scroll-measure.js";
+import { type ScrollOffset } from "./scroll-offset.js";
+/** What `animate()` returns, seen from the scroll side. */
+export interface ScrollDrivable {
+    time: number;
+    readonly duration: number;
+    /** Hands the native timeline to WAAPI animations; false when it can't (JS-driven). */
+    attachTimeline?(timeline: AnimationTimeline): boolean;
+    /** Scroll alone moves it once driven: its own clock must stop. */
+    pause?(): void;
+}
+export interface ScrollInfo {
+    readonly progress: number;
+    /** Pixels scrolled along the axis. */
+    readonly scroll: number;
+    /** The furthest the container can scroll along the axis. */
+    readonly scrollLength: number;
+    readonly axis: ScrollAxis;
+}
+export interface ScrollOptions {
+    /** The scrolling element; the page by default. */
+    readonly container?: Element;
+    /** Track this element crossing the container instead of the whole scroll range. */
+    readonly target?: Element;
+    readonly axis?: ScrollAxis;
+    readonly offset?: ScrollOffset;
+}
+export type OnScroll = (progress: number, info: ScrollInfo) => void;
+/**
+ * Drives a callback, or an animation's time, from scroll progress. Returns a
+ * function that stops listening.
+ */
+export declare function scroll(onScroll: OnScroll | ScrollDrivable, options?: ScrollOptions): () => void;
+//# sourceMappingURL=scroll.d.ts.map

package/dist/view/scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../src/view/scroll.ts"],"names":[],"mappings":"AAEA,OAAO,EAGN,KAAK,UAAU,EACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAGN,KAAK,YAAY,EAEjB,MAAM,yBAAyB,CAAC;AAEjC,2DAA2D;AAC3D,MAAM,WAAW,cAAc;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,sFAAsF;IACtF,cAAc,CAAC,CAAC,QAAQ,EAAE,iBAAiB,GAAG,OAAO,CAAC;IACtD,kEAAkE;IAClE,KAAK,CAAC,IAAI,IAAI,CAAC;CACf;AAED,MAAM,WAAW,UAAU;IAC1B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,sCAAsC;IACtC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,4DAA4D;IAC5D,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;CAC1B;AAED,MAAM,WAAW,aAAa;IAC7B,kDAAkD;IAClD,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,mFAAmF;IACnF,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC;CAC/B;AAED,MAAM,MAAM,QAAQ,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;AA8BpE;;;GAGG;AACH,wBAAgB,MAAM,CACrB,QAAQ,EAAE,QAAQ,GAAG,cAAc,EACnC,OAAO,GAAE,aAAkB,GACzB,MAAM,IAAI,CA+DZ"}

package/dist/view/scroll.js

@@ -0,0 +1,83 @@
+import { cancelFrame, frame } from "../frame/frame.js";
+import { resize } from "./resize.js";
+import {
+  documentScroller,
+  measureScroll
+} from "./scroll-measure.js";
+import {
+  ENTER_TO_EXIT,
+  FULL_RANGE,
+  scrollProgress
+} from "./scroll-offset.js";
+function sameOffset(a, b) {
+  return String(a[0]) === String(b[0]) && String(a[1]) === String(b[1]);
+}
+function nativeTimeline(container, axis, target, offset) {
+  const scope = globalThis;
+  const Timeline = target ? scope.ViewTimeline : scope.ScrollTimeline;
+  const expected = target ? ENTER_TO_EXIT : FULL_RANGE;
+  if (Timeline === void 0 || !sameOffset(offset, expected)) {
+    return void 0;
+  }
+  return target ? new Timeline({ subject: target, axis }) : new Timeline({ source: container, axis });
+}
+function scroll(onScroll, options = {}) {
+  const container = options.container ?? documentScroller();
+  const axis = options.axis ?? "y";
+  const target = options.target;
+  const offset = options.offset ?? (target ? ENTER_TO_EXIT : FULL_RANGE);
+  if (typeof onScroll !== "function" && onScroll.attachTimeline) {
+    const timeline = nativeTimeline(container, axis, target, offset);
+    if (timeline && onScroll.attachTimeline(timeline)) {
+      return () => {
+      };
+    }
+  }
+  if (typeof onScroll !== "function") onScroll.pause?.();
+  const apply = typeof onScroll === "function" ? onScroll : (progress) => {
+    onScroll.time = progress * onScroll.duration;
+  };
+  let info;
+  let scheduled = false;
+  function update() {
+    if (info) {
+      apply(info.progress, info);
+    }
+  }
+  function measure() {
+    scheduled = false;
+    const measured = measureScroll(container, axis, target);
+    info = {
+      progress: scrollProgress(measured.scroll, offset, measured.geometry),
+      scroll: measured.scroll,
+      scrollLength: measured.scrollLength,
+      axis
+    };
+    frame.update(update);
+  }
+  function schedule() {
+    if (!scheduled) {
+      scheduled = true;
+      frame.read(measure);
+    }
+  }
+  const eventSource = container === documentScroller() ? window : container;
+  eventSource.addEventListener("scroll", schedule, { passive: true });
+  const stopResize = [
+    resize(schedule),
+    resize(target ? [container, target] : [container], schedule)
+  ];
+  schedule();
+  return () => {
+    eventSource.removeEventListener("scroll", schedule);
+    for (const stop of stopResize) {
+      stop();
+    }
+    cancelFrame(measure);
+    cancelFrame(update);
+  };
+}
+export {
+  scroll
+};
+//# sourceMappingURL=scroll.js.map

package/dist/view/scroll.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/view/scroll.ts"],
+  "sourcesContent": ["import { cancelFrame, frame } from \"#/frame/frame.ts\";\nimport { resize } from \"#/view/resize.ts\";\nimport {\n\tdocumentScroller,\n\tmeasureScroll,\n\ttype ScrollAxis,\n} from \"#/view/scroll-measure.ts\";\nimport {\n\tENTER_TO_EXIT,\n\tFULL_RANGE,\n\ttype ScrollOffset,\n\tscrollProgress,\n} from \"#/view/scroll-offset.ts\";\n\n/** What `animate()` returns, seen from the scroll side. */\nexport interface ScrollDrivable {\n\ttime: number;\n\treadonly duration: number;\n\t/** Hands the native timeline to WAAPI animations; false when it can't (JS-driven). */\n\tattachTimeline?(timeline: AnimationTimeline): boolean;\n\t/** Scroll alone moves it once driven: its own clock must stop. */\n\tpause?(): void;\n}\n\nexport interface ScrollInfo {\n\treadonly progress: number;\n\t/** Pixels scrolled along the axis. */\n\treadonly scroll: number;\n\t/** The furthest the container can scroll along the axis. */\n\treadonly scrollLength: number;\n\treadonly axis: ScrollAxis;\n}\n\nexport interface ScrollOptions {\n\t/** The scrolling element; the page by default. */\n\treadonly container?: Element;\n\t/** Track this element crossing the container instead of the whole scroll range. */\n\treadonly target?: Element;\n\treadonly axis?: ScrollAxis;\n\treadonly offset?: ScrollOffset;\n}\n\nexport type OnScroll = (progress: number, info: ScrollInfo) => void;\n\ntype TimelineConstructor = new (options: object) => AnimationTimeline;\n\nfunction sameOffset(a: ScrollOffset, b: ScrollOffset): boolean {\n\treturn String(a[0]) === String(b[0]) && String(a[1]) === String(b[1]);\n}\n\n/**\n * The browser's own timeline, which runs the animation off the main thread.\n * Only for the offsets a bare timeline means by itself: the full range for\n * a ScrollTimeline, enter-to-exit (\"cover\") for a ViewTimeline.\n */\nfunction nativeTimeline(\n\tcontainer: Element,\n\taxis: ScrollAxis,\n\ttarget: Element | undefined,\n\toffset: ScrollOffset,\n): AnimationTimeline | undefined {\n\tconst scope = globalThis as unknown as Record<string, TimelineConstructor>;\n\tconst Timeline = target ? scope.ViewTimeline : scope.ScrollTimeline;\n\tconst expected = target ? ENTER_TO_EXIT : FULL_RANGE;\n\tif (Timeline === undefined || !sameOffset(offset, expected)) {\n\t\treturn undefined;\n\t}\n\treturn target\n\t\t? new Timeline({ subject: target, axis })\n\t\t: new Timeline({ source: container, axis });\n}\n\n/**\n * Drives a callback, or an animation's time, from scroll progress. Returns a\n * function that stops listening.\n */\nexport function scroll(\n\tonScroll: OnScroll | ScrollDrivable,\n\toptions: ScrollOptions = {},\n): () => void {\n\tconst container = options.container ?? documentScroller();\n\tconst axis = options.axis ?? \"y\";\n\tconst target = options.target;\n\tconst offset = options.offset ?? (target ? ENTER_TO_EXIT : FULL_RANGE);\n\n\tif (typeof onScroll !== \"function\" && onScroll.attachTimeline) {\n\t\tconst timeline = nativeTimeline(container, axis, target, offset);\n\t\tif (timeline && onScroll.attachTimeline(timeline)) {\n\t\t\treturn () => {};\n\t\t}\n\t}\n\n\tif (typeof onScroll !== \"function\") onScroll.pause?.();\n\tconst apply: OnScroll =\n\t\ttypeof onScroll === \"function\"\n\t\t\t? onScroll\n\t\t\t: (progress) => {\n\t\t\t\t\tonScroll.time = progress * onScroll.duration;\n\t\t\t\t};\n\tlet info: ScrollInfo | undefined;\n\tlet scheduled = false;\n\n\tfunction update() {\n\t\tif (info) {\n\t\t\tapply(info.progress, info);\n\t\t}\n\t}\n\tfunction measure() {\n\t\tscheduled = false;\n\t\tconst measured = measureScroll(container, axis, target);\n\t\tinfo = {\n\t\t\tprogress: scrollProgress(measured.scroll, offset, measured.geometry),\n\t\t\tscroll: measured.scroll,\n\t\t\tscrollLength: measured.scrollLength,\n\t\t\taxis,\n\t\t};\n\t\tframe.update(update);\n\t}\n\tfunction schedule() {\n\t\tif (!scheduled) {\n\t\t\tscheduled = true;\n\t\t\tframe.read(measure);\n\t\t}\n\t}\n\n\t// The page scroller fires its scroll events on window, not on itself.\n\tconst eventSource: EventTarget =\n\t\tcontainer === documentScroller() ? window : container;\n\teventSource.addEventListener(\"scroll\", schedule, { passive: true });\n\tconst stopResize = [\n\t\tresize(schedule),\n\t\tresize(target ? [container, target] : [container], schedule),\n\t];\n\tschedule();\n\treturn () => {\n\t\teventSource.removeEventListener(\"scroll\", schedule);\n\t\tfor (const stop of stopResize) {\n\t\t\tstop();\n\t\t}\n\t\tcancelFrame(measure);\n\t\tcancelFrame(update);\n\t};\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa,aAAa;AACnC,SAAS,cAAc;AACvB;AAAA,EACC;AAAA,EACA;AAAA,OAEM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EAEA;AAAA,OACM;AAkCP,SAAS,WAAW,GAAiB,GAA0B;AAC9D,SAAO,OAAO,EAAE,CAAC,CAAC,MAAM,OAAO,EAAE,CAAC,CAAC,KAAK,OAAO,EAAE,CAAC,CAAC,MAAM,OAAO,EAAE,CAAC,CAAC;AACrE;AAOA,SAAS,eACR,WACA,MACA,QACA,QACgC;AAChC,QAAM,QAAQ;AACd,QAAM,WAAW,SAAS,MAAM,eAAe,MAAM;AACrD,QAAM,WAAW,SAAS,gBAAgB;AAC1C,MAAI,aAAa,UAAa,CAAC,WAAW,QAAQ,QAAQ,GAAG;AAC5D,WAAO;AAAA,EACR;AACA,SAAO,SACJ,IAAI,SAAS,EAAE,SAAS,QAAQ,KAAK,CAAC,IACtC,IAAI,SAAS,EAAE,QAAQ,WAAW,KAAK,CAAC;AAC5C;AAMO,SAAS,OACf,UACA,UAAyB,CAAC,GACb;AACb,QAAM,YAAY,QAAQ,aAAa,iBAAiB;AACxD,QAAM,OAAO,QAAQ,QAAQ;AAC7B,QAAM,SAAS,QAAQ;AACvB,QAAM,SAAS,QAAQ,WAAW,SAAS,gBAAgB;AAE3D,MAAI,OAAO,aAAa,cAAc,SAAS,gBAAgB;AAC9D,UAAM,WAAW,eAAe,WAAW,MAAM,QAAQ,MAAM;AAC/D,QAAI,YAAY,SAAS,eAAe,QAAQ,GAAG;AAClD,aAAO,MAAM;AAAA,MAAC;AAAA,IACf;AAAA,EACD;AAEA,MAAI,OAAO,aAAa,WAAY,UAAS,QAAQ;AACrD,QAAM,QACL,OAAO,aAAa,aACjB,WACA,CAAC,aAAa;AACd,aAAS,OAAO,WAAW,SAAS;AAAA,EACrC;AACH,MAAI;AACJ,MAAI,YAAY;AAEhB,WAAS,SAAS;AACjB,QAAI,MAAM;AACT,YAAM,KAAK,UAAU,IAAI;AAAA,IAC1B;AAAA,EACD;AACA,WAAS,UAAU;AAClB,gBAAY;AACZ,UAAM,WAAW,cAAc,WAAW,MAAM,MAAM;AACtD,WAAO;AAAA,MACN,UAAU,eAAe,SAAS,QAAQ,QAAQ,SAAS,QAAQ;AAAA,MACnE,QAAQ,SAAS;AAAA,MACjB,cAAc,SAAS;AAAA,MACvB;AAAA,IACD;AACA,UAAM,OAAO,MAAM;AAAA,EACpB;AACA,WAAS,WAAW;AACnB,QAAI,CAAC,WAAW;AACf,kBAAY;AACZ,YAAM,KAAK,OAAO;AAAA,IACnB;AAAA,EACD;AAGA,QAAM,cACL,cAAc,iBAAiB,IAAI,SAAS;AAC7C,cAAY,iBAAiB,UAAU,UAAU,EAAE,SAAS,KAAK,CAAC;AAClE,QAAM,aAAa;AAAA,IAClB,OAAO,QAAQ;AAAA,IACf,OAAO,SAAS,CAAC,WAAW,MAAM,IAAI,CAAC,SAAS,GAAG,QAAQ;AAAA,EAC5D;AACA,WAAS;AACT,SAAO,MAAM;AACZ,gBAAY,oBAAoB,UAAU,QAAQ;AAClD,eAAW,QAAQ,YAAY;AAC9B,WAAK;AAAA,IACN;AACA,gBAAY,OAAO;AACnB,gBAAY,MAAM;AAAA,EACnB;AACD;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,58 @@
 {
-  "name": "@voila.dev/motion",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@voila.dev/motion",
+	"version": "5.0.113",
+	"type": "module",
+	"description": "Springs played by the browser, values on one frame loop, exits React waits for.",
+	"license": "MIT",
+	"homepage": "https://ui.voila.dev",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/voila-voila-dev/ui.git",
+		"directory": "packages/motion"
+	},
+	"keywords": [
+		"animation",
+		"spring",
+		"web-animations",
+		"motion",
+		"react"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"files": [
+		"src",
+		"dist",
+		"!src/**/*.test.ts",
+		"!src/**/*.test.tsx"
+	],
+	"exports": {
+		".": "./dist/index.js",
+		"./dom": "./dist/dom.js",
+		"./react": "./dist/react/index.js"
+	},
+	"imports": {
+		"#/*": "./src/*"
+	},
+	"scripts": {
+		"check": "biome check",
+		"check-types": "tsc --noEmit",
+		"check-bundle": "bun scripts/check-bundle.mjs",
+		"format": "biome format",
+		"lint": "biome lint",
+		"test": "vitest run && bun scripts/check-bundle.mjs"
+	},
+	"peerDependencies": {
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0"
+	},
+	"peerDependenciesMeta": {
+		"react": {
+			"optional": true
+		},
+		"react-dom": {
+			"optional": true
+		}
+	},
+	"sideEffects": false
+}

package/src/accessibility/reduced-motion.ts

@@ -0,0 +1,75 @@
+/**
+ * "user" follows `prefers-reduced-motion`; "always" and "never" override it
+ * for the whole page, for an app with its own setting.
+ */
+export type ReducedMotionPolicy = "user" | "always" | "never";
+
+const QUERY = "(prefers-reduced-motion: reduce)";
+
+let policy: ReducedMotionPolicy = "user";
+const listeners = new Set<(reduced: boolean) => void>();
+let unwatch: (() => void) | undefined;
+
+/** Read on every call, never at import: the server has no `matchMedia`. */
+function mediaQuery(): MediaQueryList | undefined {
+	return typeof window === "undefined" ||
+		typeof window.matchMedia !== "function"
+		? undefined
+		: window.matchMedia(QUERY);
+}
+
+export function prefersReducedMotion(): boolean {
+	return mediaQuery()?.matches ?? false;
+}
+
+export function reducedMotionPolicy(): ReducedMotionPolicy {
+	return policy;
+}
+
+const DECIDE: Record<ReducedMotionPolicy, () => boolean> = {
+	user: prefersReducedMotion,
+	always: () => true,
+	never: () => false,
+};
+
+/** `true`/`false` force it for one animation; a policy overrides the global one. */
+export function shouldReduceMotion(
+	override?: ReducedMotionPolicy | boolean,
+): boolean {
+	if (typeof override === "boolean") return override;
+	return DECIDE[override ?? policy]();
+}
+
+function notify(): void {
+	const reduced = shouldReduceMotion();
+	for (const listener of listeners) listener(reduced);
+}
+
+/** Under "always" or "never" the user's setting changes nothing. */
+function onMediaChange(): void {
+	if (policy === "user") notify();
+}
+
+export function setReducedMotion(next: ReducedMotionPolicy): void {
+	const before = shouldReduceMotion();
+	policy = next;
+	if (shouldReduceMotion() !== before) notify();
+}
+
+/** Fires with the effective answer when the user's setting or the policy changes it. */
+export function onReducedMotionChange(
+	listener: (reduced: boolean) => void,
+): () => void {
+	listeners.add(listener);
+	if (!unwatch) {
+		const query = mediaQuery();
+		query?.addEventListener("change", onMediaChange);
+		unwatch = () => query?.removeEventListener("change", onMediaChange);
+	}
+	return () => {
+		listeners.delete(listener);
+		if (listeners.size > 0) return;
+		unwatch?.();
+		unwatch = undefined;
+	};
+}

package/src/animate/animate.ts

@@ -0,0 +1,155 @@
+import { animateElements } from "#/animate/dom.ts";
+import { jsAnimation } from "#/animate/js-animation.ts";
+import type {
+	AnimationControls,
+	AnimationOptions,
+	DOMKeyframes,
+	ElementTarget,
+	Keyframes,
+	ValueAnimationOptions,
+} from "#/animate/types.ts";
+import { animateMotionValue, animateObject } from "#/animate/value.ts";
+import { animateSequence, type Segment } from "#/sequence/sequence.ts";
+import {
+	isMotionValue,
+	type MotionValue,
+	motionValue,
+} from "#/value/motion-value.ts";
+
+export interface Animate {
+	/** Elements: a selector, an element or a list. Played by the browser where it can. */
+	(
+		target: ElementTarget,
+		keyframes: DOMKeyframes,
+		options?: AnimationOptions,
+	): AnimationControls;
+	/** A motion value, from wherever it is now. */
+	<T>(
+		value: MotionValue<T>,
+		target: Keyframes<T>,
+		options?: ValueAnimationOptions<T>,
+	): AnimationControls;
+	/** A number, a colour, a path… from one value to another, read in `onUpdate`. */
+	<T extends number | string>(
+		from: T,
+		to: Keyframes<T>,
+		options: ValueAnimationOptions<T>,
+	): AnimationControls;
+	/** The keys of a plain object, written back into it. */
+	<T extends object>(
+		object: T,
+		keyframes: { readonly [K in keyof T]?: Keyframes<T[K]> },
+		options?: ValueAnimationOptions<T>,
+	): AnimationControls;
+	/** A timeline of segments. */
+	(sequence: readonly Segment[], options?: AnimationOptions): AnimationControls;
+}
+
+function isElementList(target: unknown): target is ArrayLike<Element> {
+	return (
+		typeof target === "object" &&
+		target !== null &&
+		"length" in target &&
+		(Array.from(target as ArrayLike<unknown>).every(
+			(item) => typeof Element !== "undefined" && item instanceof Element,
+		) as boolean)
+	);
+}
+
+/** A label object is a plain `{ name }`: a form element also has a `name`. */
+function isSegment(item: unknown): boolean {
+	return (
+		typeof item === "string" ||
+		Array.isArray(item) ||
+		(typeof item === "object" &&
+			item !== null &&
+			Object.getPrototypeOf(item) === Object.prototype &&
+			"name" in item)
+	);
+}
+
+function isSequence(target: unknown, second: unknown): target is Segment[] {
+	return (
+		Array.isArray(target) &&
+		(second === undefined || !Array.isArray(second)) &&
+		target.length > 0 &&
+		target.every(isSegment)
+	);
+}
+
+/** `animate`, with selectors looked up inside `scope` (the whole document by default). */
+export function createAnimate(scope?: () => ParentNode | null): Animate {
+	function elementsOf(target: unknown): readonly Element[] {
+		if (typeof target === "string") {
+			const root =
+				scope?.() ?? (typeof document === "undefined" ? null : document);
+			return root ? Array.from(root.querySelectorAll(target)) : [];
+		}
+		if (typeof Element !== "undefined" && target instanceof Element)
+			return [target];
+		return Array.from(target as ArrayLike<Element>);
+	}
+
+	function animateOne(
+		target: unknown,
+		keyframes: unknown,
+		options: AnimationOptions = {},
+	): AnimationControls {
+		if (isMotionValue(target)) {
+			return animateMotionValue(
+				target,
+				keyframes as Keyframes<unknown>,
+				options,
+			);
+		}
+		const domKeyframes =
+			typeof keyframes === "object" &&
+			keyframes !== null &&
+			!Array.isArray(keyframes);
+		if (
+			domKeyframes &&
+			(typeof target === "string" ||
+				(typeof Element !== "undefined" && target instanceof Element) ||
+				isElementList(target))
+		) {
+			return animateElements(
+				elementsOf(target),
+				keyframes as DOMKeyframes,
+				options,
+				jsAnimation,
+			);
+		}
+		if (typeof target === "number" || typeof target === "string") {
+			return animateMotionValue(
+				motionValue(target),
+				keyframes as Keyframes<unknown>,
+				options,
+			);
+		}
+		return animateObject(
+			target as object,
+			keyframes as Record<string, Keyframes<unknown>>,
+			options,
+		);
+	}
+
+	function targetsOf(target: unknown): readonly object[] {
+		const isDom =
+			typeof target === "string" ||
+			(typeof Element !== "undefined" && target instanceof Element) ||
+			isElementList(target);
+		return isDom ? elementsOf(target) : [target as object];
+	}
+
+	return ((target: unknown, second?: unknown, options?: AnimationOptions) =>
+		isSequence(target, second)
+			? animateSequence(
+					target,
+					(second as AnimationOptions) ?? {},
+					animateOne,
+					targetsOf,
+				)
+			: animateOne(target, second, options)) as Animate;
+}
+
+export const animate: Animate = createAnimate();