motion 12.9.7 → 12.10.0

package/dist/motion.dev.js

@@ -3367,420 +3367,6 @@
         return Array.from(elementOrSelector);
     }
 
-    function styleEffect(subject, values) {
-        const elements = resolveElements(subject);
-        const subscriptions = [];
-        for (let i = 0; i < elements.length; i++) {
-            const element = elements[i];
-            for (const key in values) {
-                const value = values[key];
-                /**
-                 * TODO: Get specific setters for combined props (like x)
-                 * or values with default types (like color)
-                 *
-                 * TODO: CSS variable support
-                 */
-                const updateStyle = () => {
-                    element.style[key] = value.get();
-                };
-                const scheduleUpdate = () => frame.render(updateStyle);
-                const cancel = value.on("change", scheduleUpdate);
-                scheduleUpdate();
-                subscriptions.push(() => {
-                    cancel();
-                    cancelFrame(updateStyle);
-                });
-            }
-        }
-        return () => {
-            for (const cancel of subscriptions) {
-                cancel();
-            }
-        };
-    }
-
-    const { schedule: microtask, cancel: cancelMicrotask } = 
-    /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
-
-    const isDragging = {
-        x: false,
-        y: false,
-    };
-    function isDragActive() {
-        return isDragging.x || isDragging.y;
-    }
-
-    function setDragLock(axis) {
-        if (axis === "x" || axis === "y") {
-            if (isDragging[axis]) {
-                return null;
-            }
-            else {
-                isDragging[axis] = true;
-                return () => {
-                    isDragging[axis] = false;
-                };
-            }
-        }
-        else {
-            if (isDragging.x || isDragging.y) {
-                return null;
-            }
-            else {
-                isDragging.x = isDragging.y = true;
-                return () => {
-                    isDragging.x = isDragging.y = false;
-                };
-            }
-        }
-    }
-
-    function setupGesture(elementOrSelector, options) {
-        const elements = resolveElements(elementOrSelector);
-        const gestureAbortController = new AbortController();
-        const eventOptions = {
-            passive: true,
-            ...options,
-            signal: gestureAbortController.signal,
-        };
-        const cancel = () => gestureAbortController.abort();
-        return [elements, eventOptions, cancel];
-    }
-
-    function isValidHover(event) {
-        return !(event.pointerType === "touch" || isDragActive());
-    }
-    /**
-     * Create a hover gesture. hover() is different to .addEventListener("pointerenter")
-     * in that it has an easier syntax, filters out polyfilled touch events, interoperates
-     * with drag gestures, and automatically removes the "pointerennd" event listener when the hover ends.
-     *
-     * @public
-     */
-    function hover(elementOrSelector, onHoverStart, options = {}) {
-        const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
-        const onPointerEnter = (enterEvent) => {
-            if (!isValidHover(enterEvent))
-                return;
-            const { target } = enterEvent;
-            const onHoverEnd = onHoverStart(target, enterEvent);
-            if (typeof onHoverEnd !== "function" || !target)
-                return;
-            const onPointerLeave = (leaveEvent) => {
-                if (!isValidHover(leaveEvent))
-                    return;
-                onHoverEnd(leaveEvent);
-                target.removeEventListener("pointerleave", onPointerLeave);
-            };
-            target.addEventListener("pointerleave", onPointerLeave, eventOptions);
-        };
-        elements.forEach((element) => {
-            element.addEventListener("pointerenter", onPointerEnter, eventOptions);
-        });
-        return cancel;
-    }
-
-    /**
-     * Recursively traverse up the tree to check whether the provided child node
-     * is the parent or a descendant of it.
-     *
-     * @param parent - Element to find
-     * @param child - Element to test against parent
-     */
-    const isNodeOrChild = (parent, child) => {
-        if (!child) {
-            return false;
-        }
-        else if (parent === child) {
-            return true;
-        }
-        else {
-            return isNodeOrChild(parent, child.parentElement);
-        }
-    };
-
-    const isPrimaryPointer = (event) => {
-        if (event.pointerType === "mouse") {
-            return typeof event.button !== "number" || event.button <= 0;
-        }
-        else {
-            /**
-             * isPrimary is true for all mice buttons, whereas every touch point
-             * is regarded as its own input. So subsequent concurrent touch points
-             * will be false.
-             *
-             * Specifically match against false here as incomplete versions of
-             * PointerEvents in very old browser might have it set as undefined.
-             */
-            return event.isPrimary !== false;
-        }
-    };
-
-    const focusableElements = new Set([
-        "BUTTON",
-        "INPUT",
-        "SELECT",
-        "TEXTAREA",
-        "A",
-    ]);
-    function isElementKeyboardAccessible(element) {
-        return (focusableElements.has(element.tagName) ||
-            element.tabIndex !== -1);
-    }
-
-    const isPressing = new WeakSet();
-
-    /**
-     * Filter out events that are not "Enter" keys.
-     */
-    function filterEvents(callback) {
-        return (event) => {
-            if (event.key !== "Enter")
-                return;
-            callback(event);
-        };
-    }
-    function firePointerEvent(target, type) {
-        target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: true, bubbles: true }));
-    }
-    const enableKeyboardPress = (focusEvent, eventOptions) => {
-        const element = focusEvent.currentTarget;
-        if (!element)
-            return;
-        const handleKeydown = filterEvents(() => {
-            if (isPressing.has(element))
-                return;
-            firePointerEvent(element, "down");
-            const handleKeyup = filterEvents(() => {
-                firePointerEvent(element, "up");
-            });
-            const handleBlur = () => firePointerEvent(element, "cancel");
-            element.addEventListener("keyup", handleKeyup, eventOptions);
-            element.addEventListener("blur", handleBlur, eventOptions);
-        });
-        element.addEventListener("keydown", handleKeydown, eventOptions);
-        /**
-         * Add an event listener that fires on blur to remove the keydown events.
-         */
-        element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
-    };
-
-    /**
-     * Filter out events that are not primary pointer events, or are triggering
-     * while a Motion gesture is active.
-     */
-    function isValidPressEvent(event) {
-        return isPrimaryPointer(event) && !isDragActive();
-    }
-    /**
-     * Create a press gesture.
-     *
-     * Press is different to `"pointerdown"`, `"pointerup"` in that it
-     * automatically filters out secondary pointer events like right
-     * click and multitouch.
-     *
-     * It also adds accessibility support for keyboards, where
-     * an element with a press gesture will receive focus and
-     *  trigger on Enter `"keydown"` and `"keyup"` events.
-     *
-     * This is different to a browser's `"click"` event, which does
-     * respond to keyboards but only for the `"click"` itself, rather
-     * than the press start and end/cancel. The element also needs
-     * to be focusable for this to work, whereas a press gesture will
-     * make an element focusable by default.
-     *
-     * @public
-     */
-    function press(targetOrSelector, onPressStart, options = {}) {
-        const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
-        const startPress = (startEvent) => {
-            const target = startEvent.currentTarget;
-            if (!isValidPressEvent(startEvent) || isPressing.has(target))
-                return;
-            isPressing.add(target);
-            const onPressEnd = onPressStart(target, startEvent);
-            const onPointerEnd = (endEvent, success) => {
-                window.removeEventListener("pointerup", onPointerUp);
-                window.removeEventListener("pointercancel", onPointerCancel);
-                if (!isValidPressEvent(endEvent) || !isPressing.has(target)) {
-                    return;
-                }
-                isPressing.delete(target);
-                if (typeof onPressEnd === "function") {
-                    onPressEnd(endEvent, { success });
-                }
-            };
-            const onPointerUp = (upEvent) => {
-                onPointerEnd(upEvent, target === window ||
-                    target === document ||
-                    options.useGlobalTarget ||
-                    isNodeOrChild(target, upEvent.target));
-            };
-            const onPointerCancel = (cancelEvent) => {
-                onPointerEnd(cancelEvent, false);
-            };
-            window.addEventListener("pointerup", onPointerUp, eventOptions);
-            window.addEventListener("pointercancel", onPointerCancel, eventOptions);
-        };
-        targets.forEach((target) => {
-            const pointerDownTarget = options.useGlobalTarget ? window : target;
-            pointerDownTarget.addEventListener("pointerdown", startPress, eventOptions);
-            if (target instanceof HTMLElement) {
-                target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
-                if (!isElementKeyboardAccessible(target) &&
-                    !target.hasAttribute("tabindex")) {
-                    target.tabIndex = 0;
-                }
-            }
-        });
-        return cancelEvents;
-    }
-
-    function getComputedStyle$2(element, name) {
-        const computedStyle = window.getComputedStyle(element);
-        return isCSSVar(name)
-            ? computedStyle.getPropertyValue(name)
-            : computedStyle[name];
-    }
-
-    function observeTimeline(update, timeline) {
-        let prevProgress;
-        const onFrame = () => {
-            const { currentTime } = timeline;
-            const percentage = currentTime === null ? 0 : currentTime.value;
-            const progress = percentage / 100;
-            if (prevProgress !== progress) {
-                update(progress);
-            }
-            prevProgress = progress;
-        };
-        frame.preUpdate(onFrame, true);
-        return () => cancelFrame(onFrame);
-    }
-
-    function record() {
-        const { value } = statsBuffer;
-        if (value === null) {
-            cancelFrame(record);
-            return;
-        }
-        value.frameloop.rate.push(frameData.delta);
-        value.animations.mainThread.push(activeAnimations.mainThread);
-        value.animations.waapi.push(activeAnimations.waapi);
-        value.animations.layout.push(activeAnimations.layout);
-    }
-    function mean(values) {
-        return values.reduce((acc, value) => acc + value, 0) / values.length;
-    }
-    function summarise(values, calcAverage = mean) {
-        if (values.length === 0) {
-            return {
-                min: 0,
-                max: 0,
-                avg: 0,
-            };
-        }
-        return {
-            min: Math.min(...values),
-            max: Math.max(...values),
-            avg: calcAverage(values),
-        };
-    }
-    const msToFps = (ms) => Math.round(1000 / ms);
-    function clearStatsBuffer() {
-        statsBuffer.value = null;
-        statsBuffer.addProjectionMetrics = null;
-    }
-    function reportStats() {
-        const { value } = statsBuffer;
-        if (!value) {
-            throw new Error("Stats are not being measured");
-        }
-        clearStatsBuffer();
-        cancelFrame(record);
-        const summary = {
-            frameloop: {
-                setup: summarise(value.frameloop.setup),
-                rate: summarise(value.frameloop.rate),
-                read: summarise(value.frameloop.read),
-                resolveKeyframes: summarise(value.frameloop.resolveKeyframes),
-                preUpdate: summarise(value.frameloop.preUpdate),
-                update: summarise(value.frameloop.update),
-                preRender: summarise(value.frameloop.preRender),
-                render: summarise(value.frameloop.render),
-                postRender: summarise(value.frameloop.postRender),
-            },
-            animations: {
-                mainThread: summarise(value.animations.mainThread),
-                waapi: summarise(value.animations.waapi),
-                layout: summarise(value.animations.layout),
-            },
-            layoutProjection: {
-                nodes: summarise(value.layoutProjection.nodes),
-                calculatedTargetDeltas: summarise(value.layoutProjection.calculatedTargetDeltas),
-                calculatedProjections: summarise(value.layoutProjection.calculatedProjections),
-            },
-        };
-        /**
-         * Convert the rate to FPS
-         */
-        const { rate } = summary.frameloop;
-        rate.min = msToFps(rate.min);
-        rate.max = msToFps(rate.max);
-        rate.avg = msToFps(rate.avg);
-        [rate.min, rate.max] = [rate.max, rate.min];
-        return summary;
-    }
-    function recordStats() {
-        if (statsBuffer.value) {
-            clearStatsBuffer();
-            throw new Error("Stats are already being measured");
-        }
-        const newStatsBuffer = statsBuffer;
-        newStatsBuffer.value = {
-            frameloop: {
-                setup: [],
-                rate: [],
-                read: [],
-                resolveKeyframes: [],
-                preUpdate: [],
-                update: [],
-                preRender: [],
-                render: [],
-                postRender: [],
-            },
-            animations: {
-                mainThread: [],
-                waapi: [],
-                layout: [],
-            },
-            layoutProjection: {
-                nodes: [],
-                calculatedTargetDeltas: [],
-                calculatedProjections: [],
-            },
-        };
-        newStatsBuffer.addProjectionMetrics = (metrics) => {
-            const { layoutProjection } = newStatsBuffer.value;
-            layoutProjection.nodes.push(metrics.nodes);
-            layoutProjection.calculatedTargetDeltas.push(metrics.calculatedTargetDeltas);
-            layoutProjection.calculatedProjections.push(metrics.calculatedProjections);
-        };
-        frame.postRender(record, true);
-        return reportStats;
-    }
-
-    function transform(...args) {
-        const useImmediate = !Array.isArray(args[0]);
-        const argOffset = useImmediate ? 0 : -1;
-        const inputValue = args[0 + argOffset];
-        const inputRange = args[1 + argOffset];
-        const outputRange = args[2 + argOffset];
-        const options = args[3 + argOffset];
-        const interpolator = interpolate(inputRange, outputRange, options);
-        return useImmediate ? interpolator(inputValue) : interpolator;
-    }
-
     /**
      * Maximum time between the value of two frames, beyond which we
      * assume the velocity has since been 0.
@@ -3799,293 +3385,820 @@
      */
     class MotionValue {
         /**
-         * @param init - The initiating value
-         * @param config - Optional configuration options
+         * @param init - The initiating value
+         * @param config - Optional configuration options
+         *
+         * -  `transformer`: A function to transform incoming values with.
+         */
+        constructor(init, options = {}) {
+            /**
+             * This will be replaced by the build step with the latest version number.
+             * When MotionValues are provided to motion components, warn if versions are mixed.
+             */
+            this.version = "__VERSION__";
+            /**
+             * Tracks whether this value can output a velocity. Currently this is only true
+             * if the value is numerical, but we might be able to widen the scope here and support
+             * other value types.
+             *
+             * @internal
+             */
+            this.canTrackVelocity = null;
+            /**
+             * An object containing a SubscriptionManager for each active event.
+             */
+            this.events = {};
+            this.updateAndNotify = (v, render = true) => {
+                const currentTime = time.now();
+                /**
+                 * If we're updating the value during another frame or eventloop
+                 * than the previous frame, then the we set the previous frame value
+                 * to current.
+                 */
+                if (this.updatedAt !== currentTime) {
+                    this.setPrevFrameValue();
+                }
+                this.prev = this.current;
+                this.setCurrent(v);
+                // Update update subscribers
+                if (this.current !== this.prev) {
+                    this.events.change?.notify(this.current);
+                    if (this.dependents) {
+                        for (const dependent of this.dependents) {
+                            dependent.dirty();
+                        }
+                    }
+                }
+                // Update render subscribers
+                if (render) {
+                    this.events.renderRequest?.notify(this.current);
+                }
+            };
+            this.hasAnimated = false;
+            this.setCurrent(init);
+            this.owner = options.owner;
+        }
+        setCurrent(current) {
+            this.current = current;
+            this.updatedAt = time.now();
+            if (this.canTrackVelocity === null && current !== undefined) {
+                this.canTrackVelocity = isFloat(this.current);
+            }
+        }
+        setPrevFrameValue(prevFrameValue = this.current) {
+            this.prevFrameValue = prevFrameValue;
+            this.prevUpdatedAt = this.updatedAt;
+        }
+        /**
+         * Adds a function that will be notified when the `MotionValue` is updated.
+         *
+         * It returns a function that, when called, will cancel the subscription.
+         *
+         * When calling `onChange` inside a React component, it should be wrapped with the
+         * `useEffect` hook. As it returns an unsubscribe function, this should be returned
+         * from the `useEffect` function to ensure you don't add duplicate subscribers..
+         *
+         * ```jsx
+         * export const MyComponent = () => {
+         *   const x = useMotionValue(0)
+         *   const y = useMotionValue(0)
+         *   const opacity = useMotionValue(1)
+         *
+         *   useEffect(() => {
+         *     function updateOpacity() {
+         *       const maxXY = Math.max(x.get(), y.get())
+         *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
+         *       opacity.set(newOpacity)
+         *     }
+         *
+         *     const unsubscribeX = x.on("change", updateOpacity)
+         *     const unsubscribeY = y.on("change", updateOpacity)
+         *
+         *     return () => {
+         *       unsubscribeX()
+         *       unsubscribeY()
+         *     }
+         *   }, [])
+         *
+         *   return <motion.div style={{ x }} />
+         * }
+         * ```
+         *
+         * @param subscriber - A function that receives the latest value.
+         * @returns A function that, when called, will cancel this subscription.
+         *
+         * @deprecated
+         */
+        onChange(subscription) {
+            {
+                warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on("change", callback).`);
+            }
+            return this.on("change", subscription);
+        }
+        on(eventName, callback) {
+            if (!this.events[eventName]) {
+                this.events[eventName] = new SubscriptionManager();
+            }
+            const unsubscribe = this.events[eventName].add(callback);
+            if (eventName === "change") {
+                return () => {
+                    unsubscribe();
+                    /**
+                     * If we have no more change listeners by the start
+                     * of the next frame, stop active animations.
+                     */
+                    frame.read(() => {
+                        if (!this.events.change.getSize()) {
+                            this.stop();
+                        }
+                    });
+                };
+            }
+            return unsubscribe;
+        }
+        clearListeners() {
+            for (const eventManagers in this.events) {
+                this.events[eventManagers].clear();
+            }
+        }
+        /**
+         * Attaches a passive effect to the `MotionValue`.
+         */
+        attach(passiveEffect, stopPassiveEffect) {
+            this.passiveEffect = passiveEffect;
+            this.stopPassiveEffect = stopPassiveEffect;
+        }
+        /**
+         * Sets the state of the `MotionValue`.
+         *
+         * @remarks
+         *
+         * ```jsx
+         * const x = useMotionValue(0)
+         * x.set(10)
+         * ```
+         *
+         * @param latest - Latest value to set.
+         * @param render - Whether to notify render subscribers. Defaults to `true`
+         *
+         * @public
+         */
+        set(v, render = true) {
+            if (!render || !this.passiveEffect) {
+                this.updateAndNotify(v, render);
+            }
+            else {
+                this.passiveEffect(v, this.updateAndNotify);
+            }
+        }
+        setWithVelocity(prev, current, delta) {
+            this.set(current);
+            this.prev = undefined;
+            this.prevFrameValue = prev;
+            this.prevUpdatedAt = this.updatedAt - delta;
+        }
+        /**
+         * Set the state of the `MotionValue`, stopping any active animations,
+         * effects, and resets velocity to `0`.
+         */
+        jump(v, endAnimation = true) {
+            this.updateAndNotify(v);
+            this.prev = v;
+            this.prevUpdatedAt = this.prevFrameValue = undefined;
+            endAnimation && this.stop();
+            if (this.stopPassiveEffect)
+                this.stopPassiveEffect();
+        }
+        dirty() {
+            this.events.change?.notify(this.current);
+        }
+        addDependent(dependent) {
+            if (!this.dependents) {
+                this.dependents = new Set();
+            }
+            this.dependents.add(dependent);
+        }
+        removeDependent(dependent) {
+            if (this.dependents) {
+                this.dependents.delete(dependent);
+            }
+        }
+        /**
+         * Returns the latest state of `MotionValue`
          *
-         * -  `transformer`: A function to transform incoming values with.
+         * @returns - The latest state of `MotionValue`
+         *
+         * @public
          */
-        constructor(init, options = {}) {
-            /**
-             * This will be replaced by the build step with the latest version number.
-             * When MotionValues are provided to motion components, warn if versions are mixed.
-             */
-            this.version = "__VERSION__";
-            /**
-             * Tracks whether this value can output a velocity. Currently this is only true
-             * if the value is numerical, but we might be able to widen the scope here and support
-             * other value types.
-             *
-             * @internal
-             */
-            this.canTrackVelocity = null;
-            /**
-             * An object containing a SubscriptionManager for each active event.
-             */
-            this.events = {};
-            this.updateAndNotify = (v, render = true) => {
-                const currentTime = time.now();
-                /**
-                 * If we're updating the value during another frame or eventloop
-                 * than the previous frame, then the we set the previous frame value
-                 * to current.
-                 */
-                if (this.updatedAt !== currentTime) {
-                    this.setPrevFrameValue();
-                }
-                this.prev = this.current;
-                this.setCurrent(v);
-                // Update update subscribers
-                if (this.current !== this.prev) {
-                    this.events.change?.notify(this.current);
-                }
-                // Update render subscribers
-                if (render) {
-                    this.events.renderRequest?.notify(this.current);
-                }
-            };
-            this.hasAnimated = false;
-            this.setCurrent(init);
-            this.owner = options.owner;
-        }
-        setCurrent(current) {
-            this.current = current;
-            this.updatedAt = time.now();
-            if (this.canTrackVelocity === null && current !== undefined) {
-                this.canTrackVelocity = isFloat(this.current);
+        get() {
+            if (collectMotionValues.current) {
+                collectMotionValues.current.push(this);
             }
+            return this.current;
         }
-        setPrevFrameValue(prevFrameValue = this.current) {
-            this.prevFrameValue = prevFrameValue;
-            this.prevUpdatedAt = this.updatedAt;
+        /**
+         * @public
+         */
+        getPrevious() {
+            return this.prev;
         }
         /**
-         * Adds a function that will be notified when the `MotionValue` is updated.
+         * Returns the latest velocity of `MotionValue`
          *
-         * It returns a function that, when called, will cancel the subscription.
+         * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
          *
-         * When calling `onChange` inside a React component, it should be wrapped with the
-         * `useEffect` hook. As it returns an unsubscribe function, this should be returned
-         * from the `useEffect` function to ensure you don't add duplicate subscribers..
+         * @public
+         */
+        getVelocity() {
+            const currentTime = time.now();
+            if (!this.canTrackVelocity ||
+                this.prevFrameValue === undefined ||
+                currentTime - this.updatedAt > MAX_VELOCITY_DELTA) {
+                return 0;
+            }
+            const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA);
+            // Casts because of parseFloat's poor typing
+            return velocityPerSecond(parseFloat(this.current) -
+                parseFloat(this.prevFrameValue), delta);
+        }
+        /**
+         * Registers a new animation to control this `MotionValue`. Only one
+         * animation can drive a `MotionValue` at one time.
          *
          * ```jsx
-         * export const MyComponent = () => {
-         *   const x = useMotionValue(0)
-         *   const y = useMotionValue(0)
-         *   const opacity = useMotionValue(1)
-         *
-         *   useEffect(() => {
-         *     function updateOpacity() {
-         *       const maxXY = Math.max(x.get(), y.get())
-         *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
-         *       opacity.set(newOpacity)
-         *     }
+         * value.start()
+         * ```
          *
-         *     const unsubscribeX = x.on("change", updateOpacity)
-         *     const unsubscribeY = y.on("change", updateOpacity)
+         * @param animation - A function that starts the provided animation
+         */
+        start(startAnimation) {
+            this.stop();
+            return new Promise((resolve) => {
+                this.hasAnimated = true;
+                this.animation = startAnimation(resolve);
+                if (this.events.animationStart) {
+                    this.events.animationStart.notify();
+                }
+            }).then(() => {
+                if (this.events.animationComplete) {
+                    this.events.animationComplete.notify();
+                }
+                this.clearAnimation();
+            });
+        }
+        /**
+         * Stop the currently active animation.
          *
-         *     return () => {
-         *       unsubscribeX()
-         *       unsubscribeY()
-         *     }
-         *   }, [])
+         * @public
+         */
+        stop() {
+            if (this.animation) {
+                this.animation.stop();
+                if (this.events.animationCancel) {
+                    this.events.animationCancel.notify();
+                }
+            }
+            this.clearAnimation();
+        }
+        /**
+         * Returns `true` if this value is currently animating.
          *
-         *   return <motion.div style={{ x }} />
-         * }
-         * ```
+         * @public
+         */
+        isAnimating() {
+            return !!this.animation;
+        }
+        clearAnimation() {
+            delete this.animation;
+        }
+        /**
+         * Destroy and clean up subscribers to this `MotionValue`.
          *
-         * @param subscriber - A function that receives the latest value.
-         * @returns A function that, when called, will cancel this subscription.
+         * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
+         * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
+         * created a `MotionValue` via the `motionValue` function.
          *
-         * @deprecated
+         * @public
          */
-        onChange(subscription) {
-            {
-                warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on("change", callback).`);
+        destroy() {
+            this.dependents?.clear();
+            this.events.destroy?.notify();
+            this.clearListeners();
+            this.stop();
+            if (this.stopPassiveEffect) {
+                this.stopPassiveEffect();
             }
-            return this.on("change", subscription);
         }
-        on(eventName, callback) {
-            if (!this.events[eventName]) {
-                this.events[eventName] = new SubscriptionManager();
+    }
+    function motionValue(init, options) {
+        return new MotionValue(init, options);
+    }
+
+    /**
+     * Provided a value and a ValueType, returns the value as that value type.
+     */
+    const getValueAsType = (value, type) => {
+        return type && typeof value === "number"
+            ? type.transform(value)
+            : value;
+    };
+
+    class MotionValueState {
+        constructor() {
+            this.latest = {};
+            this.values = new Map();
+        }
+        set(name, value, render, computed) {
+            const existingValue = this.values.get(name);
+            if (existingValue) {
+                existingValue.onRemove();
+            }
+            const onChange = () => {
+                this.latest[name] = getValueAsType(value.get(), numberValueTypes[name]);
+                render && frame.render(render);
+            };
+            onChange();
+            const cancelOnChange = value.on("change", onChange);
+            computed && value.addDependent(computed);
+            const remove = () => {
+                cancelOnChange();
+                render && cancelFrame(render);
+                this.values.delete(name);
+                computed && value.removeDependent(computed);
+            };
+            this.values.set(name, { value, onRemove: remove });
+            return remove;
+        }
+        get(name) {
+            return this.values.get(name)?.value;
+        }
+        destroy() {
+            for (const value of this.values.values()) {
+                value.onRemove();
+            }
+        }
+    }
+
+    const translateAlias$1 = {
+        x: "translateX",
+        y: "translateY",
+        z: "translateZ",
+        transformPerspective: "perspective",
+    };
+    function buildTransform$1(state) {
+        let transform = "";
+        let transformIsDefault = true;
+        /**
+         * Loop over all possible transforms in order, adding the ones that
+         * are present to the transform string.
+         */
+        for (let i = 0; i < transformPropOrder.length; i++) {
+            const key = transformPropOrder[i];
+            const value = state.latest[key];
+            if (value === undefined)
+                continue;
+            let valueIsDefault = true;
+            if (typeof value === "number") {
+                valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
+            }
+            else {
+                valueIsDefault = parseFloat(value) === 0;
+            }
+            if (!valueIsDefault) {
+                transformIsDefault = false;
+                const transformName = translateAlias$1[key] || key;
+                const valueToRender = state.latest[key];
+                transform += `${transformName}(${valueToRender}) `;
+            }
+        }
+        return transformIsDefault ? "none" : transform.trim();
+    }
+
+    const stateMap = new WeakMap();
+    function styleEffect(subject, values) {
+        const elements = resolveElements(subject);
+        const subscriptions = [];
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            const state = stateMap.get(element) ?? new MotionValueState();
+            stateMap.set(element, state);
+            for (const key in values) {
+                const value = values[key];
+                const remove = addValue(element, state, key, value);
+                subscriptions.push(remove);
+            }
+        }
+        return () => {
+            for (const cancel of subscriptions)
+                cancel();
+        };
+    }
+    function addValue(element, state, key, value) {
+        let render = undefined;
+        let computed = undefined;
+        if (transformProps.has(key)) {
+            if (!state.get("transform")) {
+                state.set("transform", new MotionValue("none"), () => {
+                    element.style.transform = buildTransform$1(state);
+                });
+            }
+            computed = state.get("transform");
+        }
+        else if (isCSSVar(key)) {
+            render = () => {
+                element.style.setProperty(key, state.latest[key]);
+            };
+        }
+        else {
+            render = () => {
+                element.style[key] = state.latest[key];
+            };
+        }
+        return state.set(key, value, render, computed);
+    }
+
+    const { schedule: microtask, cancel: cancelMicrotask } = 
+    /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
+
+    const isDragging = {
+        x: false,
+        y: false,
+    };
+    function isDragActive() {
+        return isDragging.x || isDragging.y;
+    }
+
+    function setDragLock(axis) {
+        if (axis === "x" || axis === "y") {
+            if (isDragging[axis]) {
+                return null;
             }
-            const unsubscribe = this.events[eventName].add(callback);
-            if (eventName === "change") {
+            else {
+                isDragging[axis] = true;
                 return () => {
-                    unsubscribe();
-                    /**
-                     * If we have no more change listeners by the start
-                     * of the next frame, stop active animations.
-                     */
-                    frame.read(() => {
-                        if (!this.events.change.getSize()) {
-                            this.stop();
-                        }
-                    });
+                    isDragging[axis] = false;
                 };
             }
-            return unsubscribe;
-        }
-        clearListeners() {
-            for (const eventManagers in this.events) {
-                this.events[eventManagers].clear();
-            }
-        }
-        /**
-         * Attaches a passive effect to the `MotionValue`.
-         */
-        attach(passiveEffect, stopPassiveEffect) {
-            this.passiveEffect = passiveEffect;
-            this.stopPassiveEffect = stopPassiveEffect;
         }
-        /**
-         * Sets the state of the `MotionValue`.
-         *
-         * @remarks
-         *
-         * ```jsx
-         * const x = useMotionValue(0)
-         * x.set(10)
-         * ```
-         *
-         * @param latest - Latest value to set.
-         * @param render - Whether to notify render subscribers. Defaults to `true`
-         *
-         * @public
-         */
-        set(v, render = true) {
-            if (!render || !this.passiveEffect) {
-                this.updateAndNotify(v, render);
+        else {
+            if (isDragging.x || isDragging.y) {
+                return null;
             }
             else {
-                this.passiveEffect(v, this.updateAndNotify);
+                isDragging.x = isDragging.y = true;
+                return () => {
+                    isDragging.x = isDragging.y = false;
+                };
             }
         }
-        setWithVelocity(prev, current, delta) {
-            this.set(current);
-            this.prev = undefined;
-            this.prevFrameValue = prev;
-            this.prevUpdatedAt = this.updatedAt - delta;
+    }
+
+    function setupGesture(elementOrSelector, options) {
+        const elements = resolveElements(elementOrSelector);
+        const gestureAbortController = new AbortController();
+        const eventOptions = {
+            passive: true,
+            ...options,
+            signal: gestureAbortController.signal,
+        };
+        const cancel = () => gestureAbortController.abort();
+        return [elements, eventOptions, cancel];
+    }
+
+    function isValidHover(event) {
+        return !(event.pointerType === "touch" || isDragActive());
+    }
+    /**
+     * Create a hover gesture. hover() is different to .addEventListener("pointerenter")
+     * in that it has an easier syntax, filters out polyfilled touch events, interoperates
+     * with drag gestures, and automatically removes the "pointerennd" event listener when the hover ends.
+     *
+     * @public
+     */
+    function hover(elementOrSelector, onHoverStart, options = {}) {
+        const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
+        const onPointerEnter = (enterEvent) => {
+            if (!isValidHover(enterEvent))
+                return;
+            const { target } = enterEvent;
+            const onHoverEnd = onHoverStart(target, enterEvent);
+            if (typeof onHoverEnd !== "function" || !target)
+                return;
+            const onPointerLeave = (leaveEvent) => {
+                if (!isValidHover(leaveEvent))
+                    return;
+                onHoverEnd(leaveEvent);
+                target.removeEventListener("pointerleave", onPointerLeave);
+            };
+            target.addEventListener("pointerleave", onPointerLeave, eventOptions);
+        };
+        elements.forEach((element) => {
+            element.addEventListener("pointerenter", onPointerEnter, eventOptions);
+        });
+        return cancel;
+    }
+
+    /**
+     * Recursively traverse up the tree to check whether the provided child node
+     * is the parent or a descendant of it.
+     *
+     * @param parent - Element to find
+     * @param child - Element to test against parent
+     */
+    const isNodeOrChild = (parent, child) => {
+        if (!child) {
+            return false;
         }
-        /**
-         * Set the state of the `MotionValue`, stopping any active animations,
-         * effects, and resets velocity to `0`.
-         */
-        jump(v, endAnimation = true) {
-            this.updateAndNotify(v);
-            this.prev = v;
-            this.prevUpdatedAt = this.prevFrameValue = undefined;
-            endAnimation && this.stop();
-            if (this.stopPassiveEffect)
-                this.stopPassiveEffect();
+        else if (parent === child) {
+            return true;
         }
-        /**
-         * Returns the latest state of `MotionValue`
-         *
-         * @returns - The latest state of `MotionValue`
-         *
-         * @public
-         */
-        get() {
-            if (collectMotionValues.current) {
-                collectMotionValues.current.push(this);
-            }
-            return this.current;
+        else {
+            return isNodeOrChild(parent, child.parentElement);
         }
-        /**
-         * @public
-         */
-        getPrevious() {
-            return this.prev;
+    };
+
+    const isPrimaryPointer = (event) => {
+        if (event.pointerType === "mouse") {
+            return typeof event.button !== "number" || event.button <= 0;
         }
-        /**
-         * Returns the latest velocity of `MotionValue`
-         *
-         * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
-         *
-         * @public
-         */
-        getVelocity() {
-            const currentTime = time.now();
-            if (!this.canTrackVelocity ||
-                this.prevFrameValue === undefined ||
-                currentTime - this.updatedAt > MAX_VELOCITY_DELTA) {
-                return 0;
-            }
-            const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA);
-            // Casts because of parseFloat's poor typing
-            return velocityPerSecond(parseFloat(this.current) -
-                parseFloat(this.prevFrameValue), delta);
+        else {
+            /**
+             * isPrimary is true for all mice buttons, whereas every touch point
+             * is regarded as its own input. So subsequent concurrent touch points
+             * will be false.
+             *
+             * Specifically match against false here as incomplete versions of
+             * PointerEvents in very old browser might have it set as undefined.
+             */
+            return event.isPrimary !== false;
         }
-        /**
-         * Registers a new animation to control this `MotionValue`. Only one
-         * animation can drive a `MotionValue` at one time.
-         *
-         * ```jsx
-         * value.start()
-         * ```
-         *
-         * @param animation - A function that starts the provided animation
-         */
-        start(startAnimation) {
-            this.stop();
-            return new Promise((resolve) => {
-                this.hasAnimated = true;
-                this.animation = startAnimation(resolve);
-                if (this.events.animationStart) {
-                    this.events.animationStart.notify();
-                }
-            }).then(() => {
-                if (this.events.animationComplete) {
-                    this.events.animationComplete.notify();
-                }
-                this.clearAnimation();
+    };
+
+    const focusableElements = new Set([
+        "BUTTON",
+        "INPUT",
+        "SELECT",
+        "TEXTAREA",
+        "A",
+    ]);
+    function isElementKeyboardAccessible(element) {
+        return (focusableElements.has(element.tagName) ||
+            element.tabIndex !== -1);
+    }
+
+    const isPressing = new WeakSet();
+
+    /**
+     * Filter out events that are not "Enter" keys.
+     */
+    function filterEvents(callback) {
+        return (event) => {
+            if (event.key !== "Enter")
+                return;
+            callback(event);
+        };
+    }
+    function firePointerEvent(target, type) {
+        target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: true, bubbles: true }));
+    }
+    const enableKeyboardPress = (focusEvent, eventOptions) => {
+        const element = focusEvent.currentTarget;
+        if (!element)
+            return;
+        const handleKeydown = filterEvents(() => {
+            if (isPressing.has(element))
+                return;
+            firePointerEvent(element, "down");
+            const handleKeyup = filterEvents(() => {
+                firePointerEvent(element, "up");
             });
-        }
+            const handleBlur = () => firePointerEvent(element, "cancel");
+            element.addEventListener("keyup", handleKeyup, eventOptions);
+            element.addEventListener("blur", handleBlur, eventOptions);
+        });
+        element.addEventListener("keydown", handleKeydown, eventOptions);
         /**
-         * Stop the currently active animation.
-         *
-         * @public
+         * Add an event listener that fires on blur to remove the keydown events.
          */
-        stop() {
-            if (this.animation) {
-                this.animation.stop();
-                if (this.events.animationCancel) {
-                    this.events.animationCancel.notify();
+        element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
+    };
+
+    /**
+     * Filter out events that are not primary pointer events, or are triggering
+     * while a Motion gesture is active.
+     */
+    function isValidPressEvent(event) {
+        return isPrimaryPointer(event) && !isDragActive();
+    }
+    /**
+     * Create a press gesture.
+     *
+     * Press is different to `"pointerdown"`, `"pointerup"` in that it
+     * automatically filters out secondary pointer events like right
+     * click and multitouch.
+     *
+     * It also adds accessibility support for keyboards, where
+     * an element with a press gesture will receive focus and
+     *  trigger on Enter `"keydown"` and `"keyup"` events.
+     *
+     * This is different to a browser's `"click"` event, which does
+     * respond to keyboards but only for the `"click"` itself, rather
+     * than the press start and end/cancel. The element also needs
+     * to be focusable for this to work, whereas a press gesture will
+     * make an element focusable by default.
+     *
+     * @public
+     */
+    function press(targetOrSelector, onPressStart, options = {}) {
+        const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
+        const startPress = (startEvent) => {
+            const target = startEvent.currentTarget;
+            if (!isValidPressEvent(startEvent) || isPressing.has(target))
+                return;
+            isPressing.add(target);
+            const onPressEnd = onPressStart(target, startEvent);
+            const onPointerEnd = (endEvent, success) => {
+                window.removeEventListener("pointerup", onPointerUp);
+                window.removeEventListener("pointercancel", onPointerCancel);
+                if (isPressing.has(target)) {
+                    isPressing.delete(target);
+                }
+                if (!isValidPressEvent(endEvent)) {
+                    return;
+                }
+                if (typeof onPressEnd === "function") {
+                    onPressEnd(endEvent, { success });
+                }
+            };
+            const onPointerUp = (upEvent) => {
+                onPointerEnd(upEvent, target === window ||
+                    target === document ||
+                    options.useGlobalTarget ||
+                    isNodeOrChild(target, upEvent.target));
+            };
+            const onPointerCancel = (cancelEvent) => {
+                onPointerEnd(cancelEvent, false);
+            };
+            window.addEventListener("pointerup", onPointerUp, eventOptions);
+            window.addEventListener("pointercancel", onPointerCancel, eventOptions);
+        };
+        targets.forEach((target) => {
+            const pointerDownTarget = options.useGlobalTarget ? window : target;
+            pointerDownTarget.addEventListener("pointerdown", startPress, eventOptions);
+            if (target instanceof HTMLElement) {
+                target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
+                if (!isElementKeyboardAccessible(target) &&
+                    !target.hasAttribute("tabindex")) {
+                    target.tabIndex = 0;
                 }
             }
-            this.clearAnimation();
+        });
+        return cancelEvents;
+    }
+
+    function getComputedStyle$2(element, name) {
+        const computedStyle = window.getComputedStyle(element);
+        return isCSSVar(name)
+            ? computedStyle.getPropertyValue(name)
+            : computedStyle[name];
+    }
+
+    function observeTimeline(update, timeline) {
+        let prevProgress;
+        const onFrame = () => {
+            const { currentTime } = timeline;
+            const percentage = currentTime === null ? 0 : currentTime.value;
+            const progress = percentage / 100;
+            if (prevProgress !== progress) {
+                update(progress);
+            }
+            prevProgress = progress;
+        };
+        frame.preUpdate(onFrame, true);
+        return () => cancelFrame(onFrame);
+    }
+
+    function record() {
+        const { value } = statsBuffer;
+        if (value === null) {
+            cancelFrame(record);
+            return;
         }
-        /**
-         * Returns `true` if this value is currently animating.
-         *
-         * @public
-         */
-        isAnimating() {
-            return !!this.animation;
+        value.frameloop.rate.push(frameData.delta);
+        value.animations.mainThread.push(activeAnimations.mainThread);
+        value.animations.waapi.push(activeAnimations.waapi);
+        value.animations.layout.push(activeAnimations.layout);
+    }
+    function mean(values) {
+        return values.reduce((acc, value) => acc + value, 0) / values.length;
+    }
+    function summarise(values, calcAverage = mean) {
+        if (values.length === 0) {
+            return {
+                min: 0,
+                max: 0,
+                avg: 0,
+            };
         }
-        clearAnimation() {
-            delete this.animation;
+        return {
+            min: Math.min(...values),
+            max: Math.max(...values),
+            avg: calcAverage(values),
+        };
+    }
+    const msToFps = (ms) => Math.round(1000 / ms);
+    function clearStatsBuffer() {
+        statsBuffer.value = null;
+        statsBuffer.addProjectionMetrics = null;
+    }
+    function reportStats() {
+        const { value } = statsBuffer;
+        if (!value) {
+            throw new Error("Stats are not being measured");
         }
+        clearStatsBuffer();
+        cancelFrame(record);
+        const summary = {
+            frameloop: {
+                setup: summarise(value.frameloop.setup),
+                rate: summarise(value.frameloop.rate),
+                read: summarise(value.frameloop.read),
+                resolveKeyframes: summarise(value.frameloop.resolveKeyframes),
+                preUpdate: summarise(value.frameloop.preUpdate),
+                update: summarise(value.frameloop.update),
+                preRender: summarise(value.frameloop.preRender),
+                render: summarise(value.frameloop.render),
+                postRender: summarise(value.frameloop.postRender),
+            },
+            animations: {
+                mainThread: summarise(value.animations.mainThread),
+                waapi: summarise(value.animations.waapi),
+                layout: summarise(value.animations.layout),
+            },
+            layoutProjection: {
+                nodes: summarise(value.layoutProjection.nodes),
+                calculatedTargetDeltas: summarise(value.layoutProjection.calculatedTargetDeltas),
+                calculatedProjections: summarise(value.layoutProjection.calculatedProjections),
+            },
+        };
         /**
-         * Destroy and clean up subscribers to this `MotionValue`.
-         *
-         * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
-         * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
-         * created a `MotionValue` via the `motionValue` function.
-         *
-         * @public
+         * Convert the rate to FPS
          */
-        destroy() {
-            this.events.destroy?.notify();
-            this.clearListeners();
-            this.stop();
-            if (this.stopPassiveEffect) {
-                this.stopPassiveEffect();
-            }
+        const { rate } = summary.frameloop;
+        rate.min = msToFps(rate.min);
+        rate.max = msToFps(rate.max);
+        rate.avg = msToFps(rate.avg);
+        [rate.min, rate.max] = [rate.max, rate.min];
+        return summary;
+    }
+    function recordStats() {
+        if (statsBuffer.value) {
+            clearStatsBuffer();
+            throw new Error("Stats are already being measured");
         }
+        const newStatsBuffer = statsBuffer;
+        newStatsBuffer.value = {
+            frameloop: {
+                setup: [],
+                rate: [],
+                read: [],
+                resolveKeyframes: [],
+                preUpdate: [],
+                update: [],
+                preRender: [],
+                render: [],
+                postRender: [],
+            },
+            animations: {
+                mainThread: [],
+                waapi: [],
+                layout: [],
+            },
+            layoutProjection: {
+                nodes: [],
+                calculatedTargetDeltas: [],
+                calculatedProjections: [],
+            },
+        };
+        newStatsBuffer.addProjectionMetrics = (metrics) => {
+            const { layoutProjection } = newStatsBuffer.value;
+            layoutProjection.nodes.push(metrics.nodes);
+            layoutProjection.calculatedTargetDeltas.push(metrics.calculatedTargetDeltas);
+            layoutProjection.calculatedProjections.push(metrics.calculatedProjections);
+        };
+        frame.postRender(record, true);
+        return reportStats;
     }
-    function motionValue(init, options) {
-        return new MotionValue(init, options);
+
+    function transform(...args) {
+        const useImmediate = !Array.isArray(args[0]);
+        const argOffset = useImmediate ? 0 : -1;
+        const inputValue = args[0 + argOffset];
+        const inputRange = args[1 + argOffset];
+        const outputRange = args[2 + argOffset];
+        const options = args[3 + argOffset];
+        const interpolator = interpolate(inputRange, outputRange, options);
+        return useImmediate ? interpolator(inputValue) : interpolator;
     }
 
     function subscribeValue(inputValues, outputValue, getLatest) {
@@ -4180,15 +4293,6 @@
      */
     const findValueType = (v) => valueTypes.find(testValueType(v));
 
-    /**
-     * Provided a value and a ValueType, returns the value as that value type.
-     */
-    const getValueAsType = (value, type) => {
-        return type && typeof value === "number"
-            ? type.transform(value)
-            : value;
-    };
-
     function chooseLayerType(valueName) {
         if (valueName === "layout")
             return "group";