motion 14.4.0 → 14.6.0

package/dist/motion.dev.js

@@ -247,8 +247,8 @@
             : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
 
     const circIn = (p) => 1 - Math.sin(Math.acos(p));
-    const circOut = reverseEasing(circIn);
-    const circInOut = mirrorEasing(circIn);
+    const circOut = /* @__PURE__ */ reverseEasing(circIn);
+    const circInOut = /* @__PURE__ */ mirrorEasing(circIn);
 
     const easeIn = /*@__PURE__*/ cubicBezier(0.42, 0, 1, 1);
     const easeOut = /*@__PURE__*/ cubicBezier(0, 0, 0.58, 1);
@@ -928,6 +928,11 @@
          */
         let isProcessing = false;
         let flushNextFrame = false;
+        /**
+         * The callback currently running. If it schedules itself with `immediate`
+         * it's left in place, so as before it doesn't run again this step.
+         */
+        let running;
         /**
          * A set of processes which were marked keepAlive when scheduled.
          * A keepAlive process is always also held by a frame queue until
@@ -945,7 +950,7 @@
                 nextFrame.add(callback);
                 runNextFrame();
             }
-            callback(latestFrameData);
+            (running = callback)(latestFrameData);
         }
         const step = {
             /**
@@ -956,6 +961,14 @@
                 const queue = addToCurrentFrame ? thisFrame : nextFrame;
                 if (keepAlive)
                     toKeepAlive.add(callback);
+                /**
+                 * A callback scheduled with `immediate` during processing may
+                 * already have run this step (for instance, a value it reads was
+                 * changed by a later callback). Re-adding moves it to the end of
+                 * the queue, so it runs again. The running callback is excluded,
+                 * so one that re-schedules itself can't loop forever.
+                 */
+                addToCurrentFrame && callback !== running && queue.delete(callback);
                 queue.add(callback);
                 return callback;
             },
@@ -990,6 +1003,7 @@
                 // Clear the frame so no callbacks remain. This is to avoid
                 // memory leaks should this render step not run for a while.
                 thisFrame.clear();
+                running = undefined;
                 isProcessing = false;
                 if (flushNextFrame) {
                     flushNextFrame = false;
@@ -1336,7 +1350,7 @@
         }
         return springOptions;
     }
-    function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) {
+    function springGenerator(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) {
         const options = typeof optionsOrVisualDuration !== "object"
             ? {
                 visualDuration: optionsOrVisualDuration,
@@ -1521,13 +1535,15 @@
         };
         return generator;
     }
-    spring.applyToOptions = (options) => {
-        const generatorOptions = createGeneratorEasing(options, 100, spring);
-        options.ease = generatorOptions.ease;
-        options.duration = secondsToMilliseconds(generatorOptions.duration);
-        options.type = "keyframes";
-        return options;
-    };
+    const spring = /* @__PURE__ */ Object.assign(springGenerator, {
+        applyToOptions: (options) => {
+            const generatorOptions = createGeneratorEasing(options, 100, springGenerator);
+            options.ease = generatorOptions.ease;
+            options.duration = secondsToMilliseconds(generatorOptions.duration);
+            options.type = "keyframes";
+            return options;
+        },
+    });
 
     function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {
         const origin = keyframes[0];
@@ -2609,7 +2625,7 @@
 
     const isNumOrPxType = (v) => v === number || v === px;
     const transformKeys = new Set(["x", "y", "z"]);
-    const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
+    const nonTranslationalTransformKeys = /* @__PURE__ */ transformPropOrder.filter((key) => !transformKeys.has(key));
     /**
      * Reset any bounding box-changing transforms so the element can be
      * measured. Returns the values to restore. Values already at their
@@ -2651,6 +2667,8 @@
             ? size
             : size - parseFloat(paddingStart) - parseFloat(paddingEnd);
     }
+    const transformX = ({ transform }) => parseValueFromTransform(transform, "x");
+    const transformY = ({ transform }) => parseValueFromTransform(transform, "y");
     const positionalValues = {
         // Dimensions
         width: ({ width, paddingLeft = "0", paddingRight = "0", boxSizing }, measureBox) => measureDimension(width, measureBox, "x", paddingLeft, paddingRight, boxSizing),
@@ -2665,13 +2683,12 @@
             const { x } = measureBox();
             return parseFloat(left) + (x.max - x.min);
         },
-        // Transform
-        x: ({ transform }) => parseValueFromTransform(transform, "x"),
-        y: ({ transform }) => parseValueFromTransform(transform, "y"),
+        // Transform, including translate longform names
+        x: transformX,
+        y: transformY,
+        translateX: transformX,
+        translateY: transformY,
     };
-    // Alias translate longform names
-    positionalValues.translateX = positionalValues.x;
-    positionalValues.translateY = positionalValues.y;
 
     const toResolve = new Set();
     let isScheduled = false;
@@ -3025,18 +3042,24 @@
             if (this.isStopped)
                 return;
             this.isStopped = true;
-            const { state } = this;
-            if (state === "idle" || state === "finished") {
+            /**
+             * Before its finish event, a finished animation (an instant one is
+             * as soon as it starts) is still showing its end, so it's stopped
+             * like a running one. Otherwise that event would apply its end
+             * over whatever animates the value next.
+             */
+            if (this.state === "idle" || this.finishedTime !== null)
                 return;
-            }
             if (this.updateMotionValue) {
                 this.updateMotionValue();
             }
             else {
                 this.commitStyles();
             }
-            if (!this.isPseudoElement)
+            if (!this.isPseudoElement) {
+                this.animation.onfinish = null;
                 this.cancel();
+            }
         }
         /**
          * WAAPI doesn't natively have any interruption capabilities.
@@ -3345,7 +3368,13 @@
         "borderBottomColor",
         "borderLeftColor",
     ]);
-    const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
+    /**
+     * WAAPI runs on the browser's clock, so on a manual clock every animation
+     * runs in JS where processFrame can drive it. Set the flag before starting
+     * animations: running WAAPI animations stay on the browser's clock.
+     */
+    const supportsWaapi = () => !MotionGlobalConfig.useManualTiming &&
+        Object.hasOwnProperty.call(Element.prototype, "animate");
     function supportsBrowserAnimation(options) {
         const { motionValue, name, repeatDelay, repeatType, damping, type, keyframes, } = options;
         /**
@@ -5536,12 +5565,8 @@
         }
     }
 
-    function camelToDash(str) {
-        return str.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
-    }
-
     const optimizedAppearDataId = "framerAppearId";
-    const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
+    const optimizedAppearDataAttribute = "data-framer-appear-id";
 
     function getOptimisedAppearId(visualElement) {
         return visualElement.props[optimizedAppearDataAttribute];
@@ -6136,6 +6161,43 @@
         return isObject(element) && "ownerSVGElement" in element;
     }
 
+    const activeScope = {};
+    /**
+     * Register `cleanup` with the active scope, if there is one, so stopping
+     * the scope also runs it.
+     */
+    function addToScope(cleanup) {
+        activeScope.current?.add(cleanup);
+        return cleanup;
+    }
+    /**
+     * Collect the animation a builder like `animateLayout()` or
+     * `animateView()` resolves with. If the scope stops first, the animation
+     * is stopped as soon as it starts.
+     */
+    function addBuilderToScope(builder) {
+        const scope = activeScope.current;
+        if (!scope)
+            return;
+        let isStopped = false;
+        let stop;
+        const remove = scope.add(() => {
+            isStopped = true;
+            stop?.();
+        });
+        builder.then((animation) => {
+            if (!animation)
+                return;
+            stop = () => animation.stop();
+            isStopped ? stop() : animation.finished.then(remove);
+        }, remove);
+    }
+    /**
+     * Bind `callback` to the active scope, so anything it starts later (for
+     * instance an animation in an `inView()` callback) is collected too.
+     */
+    const bindToScope = (callback) => activeScope.current ? activeScope.current.bind(callback) : callback;
+
     function resolveElements(elementOrSelector, scope, selectorCache) {
         if (elementOrSelector == null) {
             return [];
@@ -6144,10 +6206,9 @@
             return [elementOrSelector];
         }
         else if (typeof elementOrSelector === "string") {
-            let root = document;
-            if (scope) {
-                root = scope.current;
-            }
+            const root = scope
+                ? scope.current
+                : activeScope.current?.root || document;
             const elements = selectorCache?.[elementOrSelector] ??
                 root.querySelectorAll(elementOrSelector);
             return elements ? Array.from(elements) : [];
@@ -6433,6 +6494,10 @@
     const styleEffect = 
     /*@__PURE__*/ createSelectorEffect(styleSubjectEffect);
 
+    function camelToDash(str) {
+        return str.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
+    }
+
     function buildHTMLStyles(state, latestValues, transformTemplate) {
         const { style, vars, transformOrigin } = state;
         // Track whether we encounter any transform or transformOrigin values.
@@ -6937,12 +7002,20 @@
      * sharing values and a renderer.
      */
     function animateElement(element, keyframes, transition, visualElement) {
+        activeScope.current?.track(element);
         if (visualElement) {
             return animateValues((key) => visualElement.getValue(key, null), keyframes, transition, visualElement);
         }
         const effect = getElementEffect(element);
         return animateEffectSubject(effect, element, keyframes, transition, new EffectSubject(effect, element));
     }
+    /**
+     * Detach the values styleEffect/svgEffect bound to `element`, so the
+     * next animation reads its starting values from the DOM again.
+     */
+    const releaseElement = (element) => getElementEffect(element)
+        .state(element)
+        ?.release();
     /**
      * Hand the values styleEffect/svgEffect are rendering on `element`,
      * whether bound by animate() or directly, to a VisualElement that now
@@ -7000,6 +7073,41 @@
     const { schedule: microtask, cancel: cancelMicrotask } = 
     /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
 
+    /**
+     * Process a frame now, for driving Motion from a loop other than
+     * window.requestAnimationFrame, like an XRSession's during an immersive
+     * WebXR session. Wherever window.requestAnimationFrame does fire, Motion
+     * keeps processing frames from it too.
+     *
+     * `timestamp` defaults to now. For a timeline you control, set
+     * `MotionGlobalConfig.useManualTiming = true` and pass each frame's time in
+     * milliseconds.
+     *
+     * Animations Motion hands to the browser (WAAPI), like `opacity` or
+     * `transform` on an HTML or SVG element, follow the browser's clock. With
+     * `useManualTiming` on, Motion runs those in JS instead, except for
+     * `motion/mini`, view transitions and optimized appear animations, and
+     * colours only the browser can mix, like `oklch()`, which jump to their end.
+     *
+     * Ignored when called inside a frame.
+     */
+    const processFrame = (timestamp = time.now()) => {
+        if (frameData.isProcessing)
+            return;
+        const delta = timestamp - frameData.timestamp;
+        // Clamp like the requestAnimationFrame loop, unless the timeline is ours
+        frameData.delta = MotionGlobalConfig.useManualTiming
+            ? delta
+            : Math.max(Math.min(delta, 40), 1);
+        time.set((frameData.timestamp = timestamp));
+        frameData.isProcessing = true;
+        // frameSteps' keys are in stepsOrder
+        for (const step in frameSteps) {
+            frameSteps[step].process(frameData);
+        }
+        frameData.isProcessing = false;
+    };
+
     function animateSingleValue(value, keyframes, options) {
         const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
         motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options));
@@ -7026,6 +7134,7 @@
      */
     function delay(callback, timeout) {
         const start = time.now();
+        callback = bindToScope(callback);
         const checkElapsed = ({ timestamp }) => {
             const elapsed = timestamp - start;
             if (elapsed >= timeout) {
@@ -7034,7 +7143,7 @@
             }
         };
         frame.setup(checkElapsed, true);
-        return () => cancelFrame(checkElapsed);
+        return addToScope(() => cancelFrame(checkElapsed));
     }
     function delayInSeconds(callback, timeout) {
         return delay(callback, secondsToMilliseconds(timeout));
@@ -7458,10 +7567,9 @@
     };
 
     const defaultScaleCorrectors = {
-        borderRadius: {
-            ...correctBorderRadius,
-            applyTo: [...cornerRadiusProps],
-        },
+        borderRadius: /* @__PURE__ */ Object.assign({}, correctBorderRadius, {
+            applyTo: /* @__PURE__ */ cornerRadiusProps.slice(),
+        }),
         borderTopLeftRadius: correctBorderRadius,
         borderTopRightRadius: correctBorderRadius,
         borderBottomLeftRadius: correctBorderRadius,
@@ -7566,14 +7674,6 @@
         hasEverUpdated: false,
     };
 
-    /**
-     * Correctors registered via addScaleCorrector before projection loaded
-     * (e.g. with an async LazyMotion bundle) take precedence over the defaults.
-     */
-    Object.assign(scaleCorrectors, {
-        ...defaultScaleCorrectors,
-        ...scaleCorrectors,
-    });
     const metrics = {
         nodes: 0,
         calculatedTargetDeltas: 0,
@@ -7616,6 +7716,16 @@
         }
     }
     function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
+        /**
+         * Correctors registered via addScaleCorrector before projection loaded
+         * (e.g. with an async LazyMotion bundle) take precedence over the defaults.
+         * Applied here rather than at module scope so bundlers can drop projection
+         * when it's unused.
+         */
+        Object.assign(scaleCorrectors, {
+            ...defaultScaleCorrectors,
+            ...scaleCorrectors,
+        });
         return class ProjectionNode {
             constructor(latestValues = {}, parent = defaultParent?.()) {
                 /**
@@ -8272,7 +8382,7 @@
                 }
                 return boxWithoutScroll;
             }
-            applyTransform(box, transformOnly = false, output) {
+            applyTransform(box, transformOnly = false, output, skipOwnTransform) {
                 const withTransforms = output || createBox();
                 copyBoxInto(withTransforms, box);
                 for (let i = 0; i < this.path.length; i++) {
@@ -8288,7 +8398,7 @@
                         continue;
                     transformBox(withTransforms, node.latestValues, node.layout?.layoutBox);
                 }
-                if (hasTransform(this.latestValues)) {
+                if (!skipOwnTransform && hasTransform(this.latestValues)) {
                     transformBox(withTransforms, this.latestValues, this.layout?.layoutBox);
                 }
                 return withTransforms;
@@ -8423,7 +8533,11 @@
                 }
                 else if (this.targetDelta) {
                     if (Boolean(this.resumingFrom)) {
-                        this.applyTransform(this.layout.layoutBox, false, this.target);
+                        /**
+                         * Own transforms are applied later, in applyTransformsToTarget,
+                         * so only apply ancestor transforms here or they'd be doubled.
+                         */
+                        this.applyTransform(this.layout.layoutBox, false, this.target, true);
                     }
                     else {
                         copyBoxInto(this.target, this.layout.layoutBox);
@@ -9192,10 +9306,13 @@
      * A dragged node doesn't layout animate, so it jumps to its new layout. Shift
      * its descendants' snapshots by the same amount, so they only animate layout
      * changes relative to it, rather than lagging behind.
+     *
+     * If its drag ended since the snapshot (e.g. drag disabled from onDrag), it
+     * layout animates again, so its descendants mustn't follow its jump.
      */
     function followDraggedAncestor(node) {
         const { snapshot, dragAncestor } = node;
-        const to = dragAncestor?.layout;
+        const to = dragAncestor?.isAnimationBlocked && dragAncestor.layout;
         if (!snapshot || !to || node.resumeFrom || node.isAnimationBlocked)
             return;
         const from = dragAncestor.dragSnapshot;
@@ -9309,11 +9426,16 @@
         return () => target.removeEventListener(eventName, handler, options);
     }
 
-    const DocumentProjectionNode = createProjectionNode({
+    const DocumentProjectionNode = 
+    /* @__PURE__ */ createProjectionNode({
         attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),
         measureScroll: () => ({
-            x: document.documentElement.scrollLeft || document.body?.scrollLeft || 0,
-            y: document.documentElement.scrollTop || document.body?.scrollTop || 0,
+            x: document.documentElement.scrollLeft ||
+                document.body?.scrollLeft ||
+                0,
+            y: document.documentElement.scrollTop ||
+                document.body?.scrollTop ||
+                0,
         }),
         checkIsScrollRoot: () => true,
     });
@@ -9321,7 +9443,9 @@
     const rootProjectionNode = {
         current: undefined,
     };
-    const HTMLProjectionNode = createProjectionNode({
+
+    const HTMLProjectionNode = 
+    /* @__PURE__ */ createProjectionNode({
         measureScroll: (instance) => ({
             x: instance.scrollLeft,
             y: instance.scrollTop,
@@ -9365,7 +9489,7 @@
         "whileDrag",
         "exit",
     ];
-    const variantProps = ["initial", ...variantPriorityOrder];
+    const variantProps = /* @__PURE__ */ ["initial"].concat(variantPriorityOrder);
 
     function isControllingVariants(props) {
         if (isAnimationControls(props.animate))
@@ -10455,7 +10579,7 @@
     function parseAnimateLayoutArgs(scopeOrUpdateDom, updateDomOrOptions, options) {
         if (typeof scopeOrUpdateDom === "function") {
             return {
-                scope: document,
+                scope: activeScope.current?.root || document,
                 updateDom: scopeOrUpdateDom,
                 defaultOptions: updateDomOrOptions,
             };
@@ -10591,7 +10715,7 @@
     }
 
     function resize(a, b) {
-        return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
+        return addToScope(typeof a === "function" ? resizeWindow(a) : resizeElement(a, b));
     }
 
     const distance = (a, b) => Math.abs(a - b);
@@ -10656,6 +10780,12 @@
                 onMove && onMove(this.lastMoveEvent, info);
             };
             this.handlePointerMove = (event, info) => {
+                /**
+                 * This event's pageX/pageY already include any window scroll that
+                 * hasn't fired its scroll event yet. Settle it now, so that scroll
+                 * event doesn't add it to the new point a second time.
+                 */
+                this.handleScroll(window);
                 this.lastMoveEvent = event;
                 this.lastRawMoveEventInfo = info;
                 this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
@@ -11212,7 +11342,11 @@
                 element: this.visualElement.current,
             });
         }
-        stop(event, panInfo) {
+        /**
+         * @param dragAxes - The axes to animate on release, if not the `drag`
+         * prop's, e.g. when drag was disabled mid-gesture.
+         */
+        stop(event, panInfo, dragAxes) {
             const finalEvent = event || this.latestPointerEvent;
             const finalPanInfo = panInfo || this.latestPanInfo;
             const isDragging = this.isDragging;
@@ -11220,7 +11354,7 @@
             if (!isDragging || !finalPanInfo || !finalEvent)
                 return;
             const { velocity } = finalPanInfo;
-            this.startAnimation(velocity);
+            this.startAnimation(velocity, dragAxes);
             const { onDragEnd } = this.getProps();
             if (onDragEnd) {
                 frame.postRender(() => onDragEnd(finalEvent, finalPanInfo));
@@ -11341,11 +11475,11 @@
             }
             return measuredConstraints;
         }
-        startAnimation(velocity) {
+        startAnimation(velocity, dragAxes) {
             const { drag, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd, } = this.getProps();
             const constraints = this.constraints || {};
             const momentumAnimations = eachAxis((axis) => {
-                if (!shouldDrag(axis, drag, this.currentDirection)) {
+                if (!shouldDrag(axis, dragAxes || drag, this.currentDirection)) {
                     return;
                 }
                 let transition = (constraints && constraints[axis]) || {};
@@ -11548,9 +11682,15 @@
             const stopLayoutUpdateListener = projection.addEventListener("didUpdate", (({ delta, hasLayoutChanged }) => {
                 if (this.isDragging && hasLayoutChanged) {
                     eachAxis((axis) => {
-                        const motionValue = this.getAxisMotionValue(axis);
-                        if (!motionValue)
+                        /**
+                         * Only compensate axes this gesture drags. A
+                         * non-drag axis follows its layout instead, as
+                         * nothing would ever move it back (e.g. snapping
+                         * to origin only animates drag axes).
+                         */
+                        if (!shouldDrag(axis, this.getProps().drag, this.currentDirection))
                             return;
+                        const motionValue = this.getAxisMotionValue(axis);
                         this.originPoint[axis] += delta[axis].translate;
                         motionValue.set(motionValue.get() + delta[axis].translate);
                     });
@@ -11687,7 +11827,20 @@
      */
     function drag(elementOrSelector, options = {}) {
         const props = toProps(options);
+        const scope = activeScope.current;
+        /**
+         * Run callbacks in the active scope, so work they start is collected.
+         */
+        if (scope) {
+            for (const key in props) {
+                const value = props[key];
+                if (typeof value === "function") {
+                    props[key] = scope.bind(value);
+                }
+            }
+        }
         const cleanups = resolveElements(elementOrSelector).map((element) => {
+            scope?.track(element);
             const [node, release] = acquireProjectionNode(element);
             /**
              * Measure layout even when not animating it, as constraints and
@@ -11701,10 +11854,11 @@
                 removeStyles();
                 removeListeners?.();
                 controls.cancel();
+                controls.stopAnimation();
                 release();
             };
         });
-        return () => cleanups.forEach((cleanup) => cleanup());
+        return addToScope(() => cleanups.forEach((cleanup) => cleanup()));
     }
 
     function setupGesture(elementOrSelector, options) {
@@ -11715,7 +11869,7 @@
             ...options,
             signal: gestureAbortController.signal,
         };
-        const cancel = () => gestureAbortController.abort();
+        const cancel = addToScope(() => gestureAbortController.abort());
         return [elements, eventOptions, cancel];
     }
 
@@ -11730,6 +11884,7 @@
      * @public
      */
     function hover(elementOrSelector, onHoverStart, options = {}) {
+        onHoverStart = bindToScope(onHoverStart);
         const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
         elements.forEach((element) => {
             let isPressed = false;
@@ -11818,26 +11973,36 @@
     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 enableKeyboardPress = (element, eventOptions) => {
+        /**
+         * Listeners are scoped to this focus and all released on blur, rather
+         * than added per Enter press, so they can't accumulate and fire
+         * duplicate pointerup/pointercancel events. See #3935.
+         */
+        let isKeyPressing = false;
         const handleKeydown = filterEvents(() => {
             if (isPressing.has(element))
                 return;
+            isKeyPressing = true;
             firePointerEvent(element, "down");
-            const handleKeyup = filterEvents(() => {
-                firePointerEvent(element, "up");
-            });
-            const handleBlur = () => firePointerEvent(element, "cancel");
-            element.addEventListener("keyup", handleKeyup, eventOptions);
-            element.addEventListener("blur", handleBlur, eventOptions);
+        });
+        const handleKeyup = filterEvents(() => {
+            if (!isKeyPressing)
+                return;
+            isKeyPressing = false;
+            firePointerEvent(element, "up");
         });
         element.addEventListener("keydown", handleKeydown, eventOptions);
+        element.addEventListener("keyup", handleKeyup, eventOptions);
         /**
-         * Add an event listener that fires on blur to remove the keydown events.
+         * On blur, remove the key listeners and cancel any keyboard press.
          */
-        element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
+        element.addEventListener("blur", () => {
+            element.removeEventListener("keydown", handleKeydown);
+            element.removeEventListener("keyup", handleKeyup);
+            if (isKeyPressing)
+                firePointerEvent(element, "cancel");
+        }, { ...eventOptions, once: true });
     };
 
     /**
@@ -11868,6 +12033,7 @@
      * @public
      */
     function press(targetOrSelector, onPressStart, options = {}) {
+        onPressStart = bindToScope(onPressStart);
         const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
         const startPress = (startEvent) => {
             const target = startEvent.currentTarget;
@@ -11916,7 +12082,7 @@
             const pointerDownTarget = options.useGlobalTarget ? window : target;
             pointerDownTarget.addEventListener("pointerdown", startPress, eventOptions);
             if (isHTMLElement(target)) {
-                target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
+                target.addEventListener("focus", () => enableKeyboardPress(target, eventOptions), eventOptions);
                 if (!isElementKeyboardAccessible(target) &&
                     !target.hasAttribute("tabindex")) {
                     target.tabIndex = 0;
@@ -11933,6 +12099,160 @@
             : computedStyle[name];
     }
 
+    const keywords = {
+        reducedMotion: "(prefers-reduced-motion: reduce)",
+        motion: "(prefers-reduced-motion: no-preference)",
+        dark: "(prefers-color-scheme: dark)",
+        light: "(prefers-color-scheme: light)",
+        hover: "(hover: hover) and (pointer: fine)",
+        touch: "(pointer: coarse)",
+        portrait: "(orientation: portrait)",
+        landscape: "(orientation: landscape)",
+    };
+    /**
+     * Turn a condition into a media query. Full media queries pass through
+     * unchanged. Otherwise each space-separated token must match:
+     *
+     * - A width comparison: `">=800"`, `"<1200px"`, `"> 40em"`
+     * - A keyword: `reducedMotion`, `motion`, `dark`, `light`, `hover`,
+     *   `touch`, `portrait`, `landscape`
+     *
+     * Prefix a token with `!` to negate it, for instance `">=800 !touch"`.
+     */
+    function toMediaQuery(condition) {
+        if (condition.includes("("))
+            return condition;
+        return condition
+            .replace(/([<>!]=?)\s+/g, "$1")
+            .trim()
+            .split(/\s+/)
+            .map((token) => {
+            const isNot = token[0] === "!";
+            if (isNot)
+                token = token.slice(1);
+            const width = /^([<>]=?)([\d.]+)([a-z]*)$/.exec(token);
+            const query = width
+                ? `(width ${width[1]} ${width[2]}${width[3] || "px"})`
+                : keywords[token] || token;
+            return isNot ? `(not (${query}))` : query;
+        })
+            .join(" and ");
+    }
+
+    function scopeMotion(...args) {
+        const root = typeof args[0] === "function" ? undefined : args.shift();
+        const [setup, options = {}] = args;
+        const { transition, matchMedia } = options;
+        const queries = [];
+        const styles = new Map();
+        let cleanups = [];
+        let isPending = false;
+        const active = {
+            root: resolveElements(root)[0],
+            transition,
+            add(cleanup) {
+                cleanups.push(cleanup);
+                return () => removeItem(cleanups, cleanup);
+            },
+            bind: (callback) => ((...args) => {
+                const result = scope.run(() => callback(...args));
+                return typeof result === "function"
+                    ? active.bind(result)
+                    : result;
+            }),
+            track(element) {
+                styles.has(element) ||
+                    styles.set(element, element.getAttribute("style"));
+            },
+        };
+        const clear = (restore) => {
+            const current = cleanups;
+            cleanups = [];
+            for (let i = current.length - 1; i >= 0; i--)
+                current[i]();
+            restore &&
+                styles.forEach((style, element) => {
+                    releaseElement(element);
+                    style === null
+                        ? element.removeAttribute("style")
+                        : element.setAttribute("style", style);
+                });
+            styles.clear();
+        };
+        const start = () => {
+            scope.state = "active";
+            let matches = !queries.length;
+            scope.media = {};
+            for (const [name, query] of queries) {
+                matches = (scope.media[name] = query.matches) || matches;
+            }
+            if (matches && setup) {
+                const cleanup = scope.run(() => setup(scope));
+                typeof cleanup === "function" && active.add(cleanup);
+            }
+        };
+        const onChange = () => {
+            if (isPending)
+                return;
+            isPending = true;
+            /**
+             * Several conditions can change together, for instance two
+             * breakpoints crossed by one resize. Refresh once.
+             */
+            queueMicrotask(() => {
+                isPending = false;
+                queries.length && scope.refresh();
+            });
+        };
+        const kill = (restore) => {
+            scope.state = restore ? "cancelled" : "stopped";
+            for (const [, query] of queries) {
+                query.removeEventListener("change", onChange);
+            }
+            queries.length = 0;
+            clear(restore);
+        };
+        const runIn = (target, callback) => {
+            const prev = activeScope.current;
+            activeScope.current = target;
+            try {
+                return callback();
+            }
+            finally {
+                activeScope.current = prev;
+            }
+        };
+        const scope = {
+            state: "active",
+            media: {},
+            run: (callback) => runIn(active, callback),
+            ignore: (callback) => runIn(undefined, callback),
+            bind: active.bind,
+            stop: () => kill(),
+            cancel: () => kill(true),
+            refresh() {
+                clear(true);
+                start();
+            },
+        };
+        if (matchMedia && typeof window !== "undefined") {
+            const conditions = typeof matchMedia === "string"
+                ? { matches: matchMedia }
+                : matchMedia;
+            for (const name in conditions) {
+                const query = window.matchMedia(toMediaQuery(conditions[name]));
+                query.addEventListener("change", onChange);
+                queries.push([name, query]);
+            }
+        }
+        /**
+         * A scope created inside another is cancelled with it.
+         */
+        addToScope(scope.cancel);
+        start();
+        return scope;
+    }
+
     function clearStatsBuffer() {
         statsBuffer.value = null;
         statsBuffer.addProjectionMetrics = null;
@@ -13549,7 +13869,9 @@
         }
     }
     function animateView(update, options = {}) {
-        return new ViewTransitionBuilder(update, options);
+        const builder = new ViewTransitionBuilder(update, options);
+        addBuilderToScope(builder);
+        return builder;
     }
 
     /**
@@ -13843,8 +14165,7 @@
                     const valueHasChanged = Array.isArray(next) && Array.isArray(prev)
                         ? !shallowCompare(next, prev) || variantDidChange
                         : next !== prev;
-                    if (valueHasChanged &&
-                        (next === undefined || next === null)) {
+                    if (valueHasChanged && (next === undefined || next === null)) {
                         removedKeys.add(key);
                     }
                     else if (valueHasChanged ||
@@ -14058,7 +14379,12 @@
      */
     function animateLayout(scopeOrUpdateDom, updateDomOrOptions, options) {
         const { scope, updateDom, defaultOptions } = parseAnimateLayoutArgs(scopeOrUpdateDom, updateDomOrOptions, options);
-        return new LayoutAnimationBuilder(scope, updateDom, defaultOptions);
+        const builder = new LayoutAnimationBuilder(scope, updateDom, {
+            ...activeScope.current?.transition,
+            ...defaultOptions,
+        });
+        addBuilderToScope(builder);
+        return builder;
     }
 
     /**
@@ -14577,6 +14903,8 @@
         function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
             let animations = [];
             let animationOnComplete;
+            const motionScope = activeScope.current;
+            const scopeTransition = motionScope?.transition;
             const inherited = {};
             if (reduceMotion !== undefined)
                 inherited.reduceMotion = reduceMotion;
@@ -14587,6 +14915,12 @@
                 if (typeof onComplete === "function") {
                     animationOnComplete = onComplete;
                 }
+                if (scopeTransition) {
+                    sequenceOptions.defaultTransition = {
+                        ...scopeTransition,
+                        ...sequenceOptions.defaultTransition,
+                    };
+                }
                 animations = animateSequence(subjectOrSequence, { ...inherited, ...sequenceOptions }, scope);
             }
             else {
@@ -14595,12 +14929,19 @@
                 if (typeof onComplete === "function") {
                     animationOnComplete = onComplete;
                 }
-                animations = animateSubject(subjectOrSequence, optionsOrKeyframes, { ...inherited, ...rest }, scope);
+                animations = animateSubject(subjectOrSequence, optionsOrKeyframes, {
+                    ...inherited,
+                    ...scopeTransition,
+                    ...rest,
+                }, scope);
             }
             const animation = new GroupAnimationWithThen(animations);
             if (animationOnComplete) {
                 animation.finished.then(animationOnComplete);
             }
+            if (motionScope) {
+                animation.finished.then(motionScope.add(() => animation.stop()));
+            }
             if (scope) {
                 scope.animations.push(animation);
                 animation.finished.then(() => {
@@ -14611,7 +14952,8 @@
         }
         return scopedAnimate;
     }
-    const animate = Object.assign(createScopedAnimate(), {
+    const animate = /* @__PURE__ */ Object.assign(
+    /* @__PURE__ */ createScopedAnimate(), {
         /**
          * Register an effect so `animate()` can animate the subjects it
          * claims, for instance `animate.addEffect(threeEffect)`. The most
@@ -15328,9 +15670,11 @@
             container: source || container,
             ...options,
         };
-        return typeof onScroll === "function"
-            ? scrollInfo((info) => onScroll(info[axis].progress, info), optionsWithDefaults)
-            : attachToAnimation(onScroll, optionsWithDefaults);
+        if (typeof onScroll === "function") {
+            const callback = bindToScope(onScroll);
+            return addToScope(scrollInfo((info) => callback(info[axis].progress, info), optionsWithDefaults));
+        }
+        return addToScope(attachToAnimation(onScroll, optionsWithDefaults));
     }
 
     const thresholds = {
@@ -15339,6 +15683,7 @@
     };
     function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "some" } = {}) {
         const elements = resolveElements(elementOrSelector);
+        onStart = bindToScope(onStart);
         const activeIntersections = new WeakMap();
         const onIntersectionChange = (entries) => {
             entries.forEach((entry) => {
@@ -15370,7 +15715,7 @@
             threshold: typeof amount === "number" ? amount : thresholds[amount],
         });
         elements.forEach((element) => observer.observe(element));
-        return () => observer.disconnect();
+        return addToScope(() => observer.disconnect());
     }
 
     exports.AsyncMotionValueAnimation = AsyncMotionValueAnimation;
@@ -15401,7 +15746,9 @@
     exports.VisualElement = VisualElement;
     exports.VisualElementDragControls = VisualElementDragControls;
     exports.acceleratedValues = acceleratedValues;
+    exports.activeScope = activeScope;
     exports.addAttrValue = addAttrValue;
+    exports.addBuilderToScope = addBuilderToScope;
     exports.addDomEvent = addDomEvent;
     exports.addEffect = addEffect;
     exports.addPointerEvent = addPointerEvent;
@@ -15409,6 +15756,7 @@
     exports.addSVGValue = addSVGValue;
     exports.addScaleCorrector = addScaleCorrector;
     exports.addStyleValue = addStyleValue;
+    exports.addToScope = addToScope;
     exports.addUniqueItem = addUniqueItem;
     exports.addValueToWillChange = addValueToWillChange;
     exports.alpha = alpha;
@@ -15445,6 +15793,7 @@
     exports.backIn = backIn;
     exports.backInOut = backInOut;
     exports.backOut = backOut;
+    exports.bindToScope = bindToScope;
     exports.boxEquals = boxEquals;
     exports.boxEqualsRounded = boxEqualsRounded;
     exports.buildHTMLStyles = buildHTMLStyles;
@@ -15630,6 +15979,7 @@
     exports.positionalKeys = positionalKeys;
     exports.prefersReducedMotion = prefersReducedMotion;
     exports.press = press;
+    exports.processFrame = processFrame;
     exports.progress = progress;
     exports.progressPercentage = progressPercentage;
     exports.propEffect = propEffect;
@@ -15639,6 +15989,7 @@
     exports.readStyleValue = readStyleValue;
     exports.readTransformValue = readTransformValue;
     exports.recordStats = recordStats;
+    exports.releaseElement = releaseElement;
     exports.removeAxisDelta = removeAxisDelta;
     exports.removeAxisTransforms = removeAxisTransforms;
     exports.removeBoxTransforms = removeBoxTransforms;
@@ -15662,6 +16013,7 @@
     exports.scale = scale;
     exports.scaleCorrectors = scaleCorrectors;
     exports.scalePoint = scalePoint;
+    exports.scopeMotion = scopeMotion;
     exports.scrapeHTMLMotionValuesFromProps = scrapeMotionValuesFromProps$1;
     exports.scrapeSVGMotionValuesFromProps = scrapeMotionValuesFromProps;
     exports.scroll = scroll;
@@ -15692,6 +16044,7 @@
     exports.sync = sync;
     exports.testValueType = testValueType;
     exports.time = time;
+    exports.toMediaQuery = toMediaQuery;
     exports.transform = transform;
     exports.transformAxis = transformAxis;
     exports.transformBox = transformBox;