motion 12.9.7 → 12.10.0

package/dist/cjs/index.js

@@ -3366,420 +3366,6 @@ function resolveElements(elementOrSelector, scope, selectorCache) {
     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.
@@ -3798,293 +3384,820 @@ const collectMotionValues = {
  */
 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) {
+        if (process.env.NODE_ENV !== "production") {
+            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) {
-        if (process.env.NODE_ENV !== "production") {
-            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) {
@@ -4179,15 +4292,6 @@ const valueTypes = [...dimensionValueTypes, color, complex];
  */
 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";