motion 12.39.0 → 12.41.0

package/dist/motion.dev.js

@@ -79,7 +79,7 @@
     }
 
     /*#__NO_SIDE_EFFECTS__*/
-    const noop$1 = (any) => any;
+    const noop = (any) => any;
 
     /**
      * Pipe
@@ -216,7 +216,7 @@
     function cubicBezier(mX1, mY1, mX2, mY2) {
         // If this is a linear gradient, return linear easing
         if (mX1 === mY1 && mX2 === mY2)
-            return noop$1;
+            return noop;
         const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
         // If animation is at start/end, return t without easing
         return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
@@ -277,7 +277,7 @@
     const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
 
     const easingLookup = {
-        linear: noop$1,
+        linear: noop,
         easeIn,
         easeInOut,
         easeOut,
@@ -318,12 +318,7 @@
         "postRender", // Compute
     ];
 
-    const statsBuffer = {
-        value: null,
-        addProjectionMetrics: null,
-    };
-
-    function createRenderStep(runNextFrame, stepName) {
+    function createRenderStep(runNextFrame) {
         /**
          * We create and reuse two queues, one to queue jobs for the current frame
          * and one for the next. We reuse to avoid triggering GC after x frames.
@@ -345,13 +340,11 @@
             timestamp: 0.0,
             isProcessing: false,
         };
-        let numCalls = 0;
         function triggerCallback(callback) {
             if (toKeepAlive.has(callback)) {
                 step.schedule(callback);
                 runNextFrame();
             }
-            numCalls++;
             callback(latestFrameData);
         }
         const step = {
@@ -394,13 +387,6 @@
                 nextFrame = prevFrame;
                 // Execute this frame
                 thisFrame.forEach(triggerCallback);
-                /**
-                 * If we're recording stats then
-                 */
-                if (stepName && statsBuffer.value) {
-                    statsBuffer.value.frameloop[stepName].push(numCalls);
-                }
-                numCalls = 0;
                 // Clear the frame so no callbacks remain. This is to avoid
                 // memory leaks should this render step not run for a while.
                 thisFrame.clear();
@@ -425,7 +411,7 @@
         };
         const flagRunNextFrame = () => (runNextFrame = true);
         const steps = stepsOrder.reduce((acc, key) => {
-            acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
+            acc[key] = createRenderStep(flagRunNextFrame);
             return acc;
         }, {});
         const { setup, read, resolveKeyframes, preUpdate, update, preRender, render, postRender, } = steps;
@@ -481,7 +467,7 @@
         return { schedule, cancel, state, steps };
     }
 
-    const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop$1, true);
+    const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
 
     let now;
     function clearTime() {
@@ -510,12 +496,6 @@
         },
     };
 
-    const activeAnimations = {
-        layout: 0,
-        mainThread: 0,
-        waapi: 0,
-    };
-
     const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
     const isCSSVariableName = 
     /*@__PURE__*/ checkStringStartsWith("--");
@@ -1503,7 +1483,7 @@
         for (let i = 0; i < numMixers; i++) {
             let mixer = mixerFactory(output[i], output[i + 1]);
             if (ease) {
-                const easingFunction = Array.isArray(ease) ? ease[i] || noop$1 : ease;
+                const easingFunction = Array.isArray(ease) ? ease[i] || noop : ease;
                 mixer = pipe(easingFunction, mixer);
             }
             mixers.push(mixer);
@@ -1717,7 +1697,6 @@
                 this.teardown();
                 this.options.onStop?.();
             };
-            activeAnimations.mainThread++;
             this.options = options;
             this.initAnimation();
             this.play();
@@ -2022,7 +2001,6 @@
             this.state = "idle";
             this.stopDriver();
             this.startTime = this.holdTime = null;
-            activeAnimations.mainThread--;
         }
         stopDriver() {
             if (!this.driver)
@@ -2161,8 +2139,15 @@
     ];
     /**
      * A quick lookup for transform props.
+     *
+     * `pathRotation` is a transform for routing purposes (skipped from raw
+     * style application, wired to the transform composite, flags transform
+     * dirty) but is intentionally NOT in `transformPropOrder` — it is
+     * composed onto `rotate` at the build sites, not serialized in its own
+     * slot, and must stay out of the order-array consumers (parse-transform,
+     * unit-conversion, keys-position).
      */
-    const transformProps = /*@__PURE__*/ (() => new Set(transformPropOrder))();
+    const transformProps = /*@__PURE__*/ (() => new Set([...transformPropOrder, "pathRotation"]))();
 
     const isNumOrPxType = (v) => v === number || v === px;
     const transformKeys = new Set(["x", "y", "z"]);
@@ -2427,9 +2412,6 @@
          */
         if (Array.isArray(easing))
             keyframeOptions.easing = easing;
-        if (statsBuffer.value) {
-            activeAnimations.waapi++;
-        }
         const options = {
             delay,
             duration,
@@ -2440,13 +2422,7 @@
         };
         if (pseudoElement)
             options.pseudoElement = pseudoElement;
-        const animation = element.animate(keyframeOptions, options);
-        if (statsBuffer.value) {
-            animation.finished.finally(() => {
-                activeAnimations.waapi--;
-            });
-        }
-        return animation;
+        return element.animate(keyframeOptions, options);
     }
 
     function isGenerator(type) {
@@ -2625,7 +2601,7 @@
                     this.animation.rangeStart = rangeStart;
                 if (rangeEnd)
                     this.animation.rangeEnd = rangeEnd;
-                return noop$1;
+                return noop;
             }
             else {
                 return observe(this);
@@ -2978,7 +2954,7 @@
             }
             animation.finished.then(() => {
                 this.notifyFinished();
-            }).catch(noop$1);
+            }).catch(noop);
             if (this.pendingTimeline) {
                 this.stopTimeline = animation.attachTimeline(this.pendingTimeline);
                 this.pendingTimeline = undefined;
@@ -3176,342 +3152,77 @@
     }
 
     /**
-     * Parse Framer's special CSS variable format into a CSS token and a fallback.
-     *
-     * ```
-     * `var(--foo, #fff)` => [`--foo`, '#fff']
-     * ```
-     *
-     * @param current
-     */
-    const splitCSSVariableRegex = 
-    // eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
-    /^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u;
-    function parseCSSVariable(current) {
-        const match = splitCSSVariableRegex.exec(current);
-        if (!match)
-            return [,];
-        const [, token1, token2, fallback] = match;
-        return [`--${token1 ?? token2}`, fallback];
-    }
-    const maxDepth = 4;
-    function getVariableValue(current, element, depth = 1) {
-        exports.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`, "max-css-var-depth");
-        const [token, fallback] = parseCSSVariable(current);
-        // No CSS variable detected
-        if (!token)
-            return;
-        // Attempt to read this CSS variable off the element
-        const resolved = window.getComputedStyle(element).getPropertyValue(token);
-        if (resolved) {
-            const trimmed = resolved.trim();
-            return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
-        }
-        return isCSSVariableToken(fallback)
-            ? getVariableValue(fallback, element, depth + 1)
-            : fallback;
-    }
-
-    const underDampedSpring = {
-        type: "spring",
-        stiffness: 500,
-        damping: 25,
-        restSpeed: 10,
-    };
-    const criticallyDampedSpring = (target) => ({
-        type: "spring",
-        stiffness: 550,
-        damping: target === 0 ? 2 * Math.sqrt(550) : 30,
-        restSpeed: 10,
-    });
-    const keyframesTransition = {
-        type: "keyframes",
-        duration: 0.8,
-    };
-    /**
-     * Default easing curve is a slightly shallower version of
-     * the default browser easing curve.
+     * Maximum time between the value of two frames, beyond which we
+     * assume the velocity has since been 0.
      */
-    const ease = {
-        type: "keyframes",
-        ease: [0.25, 0.1, 0.35, 1],
-        duration: 0.3,
+    const MAX_VELOCITY_DELTA = 30;
+    const isFloat = (value) => {
+        return !isNaN(parseFloat(value));
     };
-    const getDefaultTransition = (valueKey, { keyframes }) => {
-        if (keyframes.length > 2) {
-            return keyframesTransition;
-        }
-        else if (transformProps.has(valueKey)) {
-            return valueKey.startsWith("scale")
-                ? criticallyDampedSpring(keyframes[1])
-                : underDampedSpring;
-        }
-        return ease;
+    const collectMotionValues = {
+        current: undefined,
     };
-
-    /**
-     * If `transition` has `inherit: true`, shallow-merge it with
-     * `parentTransition` (child keys win) and strip the `inherit` key.
-     * Otherwise return `transition` unchanged.
-     */
-    function resolveTransition(transition, parentTransition) {
-        if (transition?.inherit && parentTransition) {
-            const { inherit: _, ...rest } = transition;
-            return { ...parentTransition, ...rest };
-        }
-        return transition;
-    }
-
-    function getValueTransition$1(transition, key) {
-        const valueTransition = transition?.[key] ??
-            transition?.["default"] ??
-            transition;
-        if (valueTransition !== transition) {
-            return resolveTransition(valueTransition, transition);
-        }
-        return valueTransition;
-    }
-
-    const orchestrationKeys = new Set([
-        "when",
-        "delay",
-        "delayChildren",
-        "staggerChildren",
-        "staggerDirection",
-        "repeat",
-        "repeatType",
-        "repeatDelay",
-        "from",
-        "elapsed",
-    ]);
     /**
-     * Decide whether a transition is defined on a given Transition.
-     * This filters out orchestration options and returns true
-     * if any options are left.
+     * `MotionValue` is used to track the state and velocity of motion values.
+     *
+     * @public
      */
-    function isTransitionDefined(transition) {
-        for (const key in transition) {
-            if (!orchestrationKeys.has(key))
-                return true;
-        }
-        return false;
-    }
-
-    const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
-        const valueTransition = getValueTransition$1(transition, name) || {};
-        /**
-         * Most transition values are currently completely overwritten by value-specific
-         * transitions. In the future it'd be nicer to blend these transitions. But for now
-         * delay actually does inherit from the root transition if not value-specific.
-         */
-        const delay = valueTransition.delay || transition.delay || 0;
-        /**
-         * Elapsed isn't a public transition option but can be passed through from
-         * optimized appear effects in milliseconds.
-         */
-        let { elapsed = 0 } = transition;
-        elapsed = elapsed - secondsToMilliseconds(delay);
-        const options = {
-            keyframes: Array.isArray(target) ? target : [null, target],
-            ease: "easeOut",
-            velocity: value.getVelocity(),
-            ...valueTransition,
-            delay: -elapsed,
-            onUpdate: (v) => {
-                value.set(v);
-                valueTransition.onUpdate && valueTransition.onUpdate(v);
-            },
-            onComplete: () => {
-                onComplete();
-                valueTransition.onComplete && valueTransition.onComplete();
-            },
-            name,
-            motionValue: value,
-            element: isHandoff ? undefined : element,
-        };
-        /**
-         * If there's no transition defined for this value, we can generate
-         * unique transition settings for this value.
-         */
-        if (!isTransitionDefined(valueTransition)) {
-            Object.assign(options, getDefaultTransition(name, options));
-        }
-        /**
-         * Both WAAPI and our internal animation functions use durations
-         * as defined by milliseconds, while our external API defines them
-         * as seconds.
-         */
-        options.duration && (options.duration = secondsToMilliseconds(options.duration));
-        options.repeatDelay && (options.repeatDelay = secondsToMilliseconds(options.repeatDelay));
+    class MotionValue {
         /**
-         * Support deprecated way to set initial value. Prefer keyframe syntax.
+         * @param init - The initiating value
+         * @param config - Optional configuration options
+         *
+         * -  `transformer`: A function to transform incoming values with.
          */
-        if (options.from !== undefined) {
-            options.keyframes[0] = options.from;
+        constructor(init, options = {}) {
+            /**
+             * 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) => {
+                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();
+                        }
+                    }
+                }
+            };
+            this.hasAnimated = false;
+            this.setCurrent(init);
+            this.owner = options.owner;
         }
-        let shouldSkip = false;
-        if (options.type === false ||
-            (options.duration === 0 && !options.repeatDelay)) {
-            makeAnimationInstant(options);
-            if (options.delay === 0) {
-                shouldSkip = true;
+        setCurrent(current) {
+            this.current = current;
+            this.updatedAt = time.now();
+            if (this.canTrackVelocity === null && current !== undefined) {
+                this.canTrackVelocity = isFloat(this.current);
             }
         }
-        if (MotionGlobalConfig.instantAnimations ||
-            MotionGlobalConfig.skipAnimations ||
-            element?.shouldSkipAnimations ||
-            valueTransition.skipAnimations) {
-            shouldSkip = true;
-            makeAnimationInstant(options);
-            options.delay = 0;
-        }
-        /**
-         * If the transition type or easing has been explicitly set by the user
-         * then we don't want to allow flattening the animation.
-         */
-        options.allowFlatten = !valueTransition.type && !valueTransition.ease;
-        /**
-         * If we can or must skip creating the animation, and apply only
-         * the final keyframe, do so. We also check once keyframes are resolved but
-         * this early check prevents the need to create an animation at all.
-         */
-        if (shouldSkip && !isHandoff && value.get() !== undefined) {
-            const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
-            if (finalKeyframe !== undefined) {
-                frame.update(() => {
-                    options.onUpdate(finalKeyframe);
-                    options.onComplete();
-                });
-                return;
-            }
-        }
-        return valueTransition.isSync
-            ? new JSAnimation(options)
-            : new AsyncMotionValueAnimation(options);
-    };
-
-    function getValueState(visualElement) {
-        const state = [{}, {}];
-        visualElement?.values.forEach((value, key) => {
-            state[0][key] = value.get();
-            state[1][key] = value.getVelocity();
-        });
-        return state;
-    }
-    function resolveVariantFromProps(props, definition, custom, visualElement) {
-        /**
-         * If the variant definition is a function, resolve.
-         */
-        if (typeof definition === "function") {
-            const [current, velocity] = getValueState(visualElement);
-            definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
-        }
-        /**
-         * If the variant definition is a variant label, or
-         * the function returned a variant label, resolve.
-         */
-        if (typeof definition === "string") {
-            definition = props.variants && props.variants[definition];
-        }
-        /**
-         * At this point we've resolved both functions and variant labels,
-         * but the resolved variant label might itself have been a function.
-         * If so, resolve. This can only have returned a valid target object.
-         */
-        if (typeof definition === "function") {
-            const [current, velocity] = getValueState(visualElement);
-            definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
-        }
-        return definition;
-    }
-
-    function resolveVariant(visualElement, definition, custom) {
-        const props = visualElement.getProps();
-        return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, visualElement);
-    }
-
-    const positionalKeys = new Set([
-        "width",
-        "height",
-        "top",
-        "left",
-        "right",
-        "bottom",
-        ...transformPropOrder,
-    ]);
-
-    /**
-     * Maximum time between the value of two frames, beyond which we
-     * assume the velocity has since been 0.
-     */
-    const MAX_VELOCITY_DELTA = 30;
-    const isFloat = (value) => {
-        return !isNaN(parseFloat(value));
-    };
-    const collectMotionValues = {
-        current: undefined,
-    };
-    /**
-     * `MotionValue` is used to track the state and velocity of motion values.
-     *
-     * @public
-     */
-    class MotionValue {
-        /**
-         * @param init - The initiating value
-         * @param config - Optional configuration options
-         *
-         * -  `transformer`: A function to transform incoming values with.
-         */
-        constructor(init, options = {}) {
-            /**
-             * 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) => {
-                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();
-                        }
-                    }
-                }
-            };
-            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;
+        setPrevFrameValue(prevFrameValue = this.current) {
+            this.prevFrameValue = prevFrameValue;
+            this.prevUpdatedAt = this.updatedAt;
         }
         /**
          * Adds a function that will be notified when the `MotionValue` is updated.
@@ -3685,79 +3396,525 @@
             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
-         * 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();
+        /**
+         * 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();
+            });
+        }
+        /**
+         * Stop the currently active animation.
+         *
+         * @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.
+         *
+         * @public
+         */
+        isAnimating() {
+            return !!this.animation;
+        }
+        clearAnimation() {
+            delete this.animation;
+        }
+        /**
+         * 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
+         */
+        destroy() {
+            this.dependents?.clear();
+            this.events.destroy?.notify();
+            this.clearListeners();
+            this.stop();
+            if (this.stopPassiveEffect) {
+                this.stopPassiveEffect();
+            }
+        }
+    }
+    function motionValue(init, options) {
+        return new MotionValue(init, options);
+    }
+
+    /**
+     * If `transition` has `inherit: true`, shallow-merge it with
+     * `parentTransition` (child keys win) and strip the `inherit` key.
+     * Otherwise return `transition` unchanged.
+     */
+    function resolveTransition(transition, parentTransition) {
+        if (transition?.inherit && parentTransition) {
+            const { inherit: _, ...rest } = transition;
+            return { ...parentTransition, ...rest };
+        }
+        return transition;
+    }
+
+    function getValueTransition$1(transition, key) {
+        const valueTransition = transition?.[key] ??
+            transition?.["default"] ??
+            transition;
+        if (valueTransition !== transition) {
+            return resolveTransition(valueTransition, transition);
+        }
+        return valueTransition;
+    }
+
+    const underDampedSpring = {
+        type: "spring",
+        stiffness: 500,
+        damping: 25,
+        restSpeed: 10,
+    };
+    const criticallyDampedSpring = (target) => ({
+        type: "spring",
+        stiffness: 550,
+        damping: target === 0 ? 2 * Math.sqrt(550) : 30,
+        restSpeed: 10,
+    });
+    const keyframesTransition = {
+        type: "keyframes",
+        duration: 0.8,
+    };
+    /**
+     * Default easing curve is a slightly shallower version of
+     * the default browser easing curve.
+     */
+    const ease = {
+        type: "keyframes",
+        ease: [0.25, 0.1, 0.35, 1],
+        duration: 0.3,
+    };
+    const getDefaultTransition = (valueKey, { keyframes }) => {
+        if (keyframes.length > 2) {
+            return keyframesTransition;
+        }
+        else if (transformProps.has(valueKey)) {
+            return valueKey.startsWith("scale")
+                ? criticallyDampedSpring(keyframes[1])
+                : underDampedSpring;
+        }
+        return ease;
+    };
+
+    const orchestrationKeys = new Set([
+        "when",
+        "delay",
+        "delayChildren",
+        "staggerChildren",
+        "staggerDirection",
+        "repeat",
+        "repeatType",
+        "repeatDelay",
+        "from",
+        "elapsed",
+    ]);
+    /**
+     * Decide whether a transition is defined on a given Transition.
+     * This filters out orchestration options and returns true
+     * if any options are left.
+     */
+    function isTransitionDefined(transition) {
+        for (const key in transition) {
+            if (!orchestrationKeys.has(key))
+                return true;
+        }
+        return false;
+    }
+
+    const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
+        const valueTransition = getValueTransition$1(transition, name) || {};
+        /**
+         * Most transition values are currently completely overwritten by value-specific
+         * transitions. In the future it'd be nicer to blend these transitions. But for now
+         * delay actually does inherit from the root transition if not value-specific.
+         */
+        const delay = valueTransition.delay || transition.delay || 0;
+        /**
+         * Elapsed isn't a public transition option but can be passed through from
+         * optimized appear effects in milliseconds.
+         */
+        let { elapsed = 0 } = transition;
+        elapsed = elapsed - secondsToMilliseconds(delay);
+        const options = {
+            keyframes: Array.isArray(target) ? target : [null, target],
+            ease: "easeOut",
+            velocity: value.getVelocity(),
+            ...valueTransition,
+            delay: -elapsed,
+            onUpdate: (v) => {
+                value.set(v);
+                valueTransition.onUpdate && valueTransition.onUpdate(v);
+            },
+            onComplete: () => {
+                onComplete();
+                valueTransition.onComplete && valueTransition.onComplete();
+            },
+            name,
+            motionValue: value,
+            element: isHandoff ? undefined : element,
+        };
+        /**
+         * If there's no transition defined for this value, we can generate
+         * unique transition settings for this value.
+         */
+        if (!isTransitionDefined(valueTransition)) {
+            Object.assign(options, getDefaultTransition(name, options));
+        }
+        /**
+         * Both WAAPI and our internal animation functions use durations
+         * as defined by milliseconds, while our external API defines them
+         * as seconds.
+         */
+        options.duration && (options.duration = secondsToMilliseconds(options.duration));
+        options.repeatDelay && (options.repeatDelay = secondsToMilliseconds(options.repeatDelay));
+        /**
+         * Support deprecated way to set initial value. Prefer keyframe syntax.
+         */
+        if (options.from !== undefined) {
+            options.keyframes[0] = options.from;
+        }
+        let shouldSkip = false;
+        if (options.type === false ||
+            (options.duration === 0 && !options.repeatDelay)) {
+            makeAnimationInstant(options);
+            if (options.delay === 0) {
+                shouldSkip = true;
+            }
+        }
+        if (MotionGlobalConfig.instantAnimations ||
+            MotionGlobalConfig.skipAnimations ||
+            element?.shouldSkipAnimations ||
+            valueTransition.skipAnimations) {
+            shouldSkip = true;
+            makeAnimationInstant(options);
+            options.delay = 0;
+        }
+        /**
+         * If the transition type or easing has been explicitly set by the user
+         * then we don't want to allow flattening the animation.
+         */
+        options.allowFlatten = !valueTransition.type && !valueTransition.ease;
+        /**
+         * If we can or must skip creating the animation, and apply only
+         * the final keyframe, do so. We also check once keyframes are resolved but
+         * this early check prevents the need to create an animation at all.
+         */
+        if (shouldSkip && !isHandoff && value.get() !== undefined) {
+            const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
+            if (finalKeyframe !== undefined) {
+                frame.update(() => {
+                    options.onUpdate(finalKeyframe);
+                    options.onComplete();
+                });
+                return;
+            }
+        }
+        return valueTransition.isSync
+            ? new JSAnimation(options)
+            : new AsyncMotionValueAnimation(options);
+    };
+
+    const MIN_LAYOUT_DISTANCE = 20;
+    function bezierPoint(t, origin, control, target) {
+        const inv = 1 - t;
+        return inv * inv * origin + 2 * inv * t * control + t * t * target;
+    }
+    function bezierTangentAngle(t, originX, controlX, targetX, originY, controlY, targetY) {
+        const dx = 2 * (1 - t) * (controlX - originX) + 2 * t * (targetX - controlX);
+        const dy = 2 * (1 - t) * (controlY - originY) + 2 * t * (targetY - controlY);
+        return Math.atan2(dy, dx) * (180 / Math.PI);
+    }
+    function computeArcControlPoint(fromX, fromY, toX, toY, strength, peak) {
+        const deltaX = toX - fromX;
+        const deltaY = toY - fromY;
+        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        if (distance > 0) {
+            const normalPerpX = -deltaY / distance;
+            const normalPerpY = deltaX / distance;
+            const desiredHeight = strength * distance;
+            return {
+                x: fromX + deltaX * peak + normalPerpX * desiredHeight,
+                y: fromY + deltaY * peak + normalPerpY * desiredHeight,
+            };
+        }
+        return { x: fromX, y: fromY };
+    }
+    /**
+     * The pure sampling factory: `(from, to) => (t) => point`. Internal —
+     * used by {@link arc} and the unit tests. Not part of the public surface.
+     */
+    function createArcPath({ strength = 0.5, peak = 0.5, direction, rotate = false, } = {}) {
+        const rotationScale = rotate === true ? 1 : typeof rotate === "number" ? rotate : 0;
+        // Auto-direction only: persists across calls to flip the bulge back
+        // onto the same screen side when the dominant axis changes between
+        // calls. Reuse the factory (module scope / useMemo) to keep this alive.
+        let prevBulgeSign;
+        const createInterpolator = (from, to) => {
+            const dx = to.x - from.x;
+            const dy = to.y - from.y;
+            let signed;
+            if (direction === "cw") {
+                signed = -strength;
+            }
+            else if (direction === "ccw") {
+                signed = strength;
+            }
+            else {
+                const dom = Math.abs(dx) >= Math.abs(dy) ? dx : dy;
+                signed = dom < 0 ? -strength : strength;
+            }
+            let control = computeArcControlPoint(from.x, from.y, to.x, to.y, signed, peak);
+            if (direction === undefined) {
+                const isVertical = Math.abs(dx) < Math.abs(dy);
+                const midX = from.x + dx * peak;
+                const midY = from.y + dy * peak;
+                const bulgeSign = isVertical
+                    ? Math.sign(control.x - midX)
+                    : Math.sign(control.y - midY);
+                if (prevBulgeSign !== undefined &&
+                    bulgeSign !== 0 &&
+                    bulgeSign !== prevBulgeSign) {
+                    signed = -signed;
+                    control = computeArcControlPoint(from.x, from.y, to.x, to.y, signed, peak);
+                }
+                else if (bulgeSign !== 0) {
+                    prevBulgeSign = bulgeSign;
+                }
+            }
+            const tangent0 = rotationScale
+                ? bezierTangentAngle(0, from.x, control.x, to.x, from.y, control.y, to.y)
+                : 0;
+            const tangent1 = rotationScale
+                ? bezierTangentAngle(1, from.x, control.x, to.x, from.y, control.y, to.y)
+                : 0;
+            const tangentDelta = rotationScale
+                ? wrap(-180, 180, tangent1 - tangent0)
+                : 0;
+            return (t) => {
+                const out = {
+                    x: bezierPoint(t, from.x, control.x, to.x),
+                    y: bezierPoint(t, from.y, control.y, to.y),
+                };
+                if (rotationScale) {
+                    const raw = bezierTangentAngle(t, from.x, control.x, to.x, from.y, control.y, to.y);
+                    const baseline = tangent0 + tangentDelta * t;
+                    out.rotate = wrap(-180, 180, raw - baseline) * rotationScale;
                 }
-            }).then(() => {
-                if (this.events.animationComplete) {
-                    this.events.animationComplete.notify();
+                return out;
+            };
+        };
+        return createInterpolator;
+    }
+    /**
+     * Creates a curved path for `transition.path`:
+     *
+     * ```ts
+     * <motion.div animate={{ x: 200, y: 100 }} transition={{ path: arc() }} />
+     * ```
+     *
+     * Reuse the returned value (module scope / useMemo / useRef) so its
+     * continuity closure survives re-renders — a fresh `arc()` has no memory.
+     */
+    function arc(options = {}) {
+        const sample = createArcPath(options);
+        const path = {
+            interpolateProjection(delta) {
+                // `from` is the current translate offset (carries any in-flight
+                // displacement when interrupted); `to` is the new layout origin.
+                // The distance floor avoids visible wobble on tiny shifts.
+                const tx = delta.x.translate;
+                const ty = delta.y.translate;
+                if (Math.sqrt(tx * tx + ty * ty) < MIN_LAYOUT_DISTANCE) {
+                    return undefined;
                 }
-                this.clearAnimation();
-            });
+                return sample({ x: tx, y: ty }, { x: 0, y: 0 });
+            },
+            animateVisualElement(visualElement, target, transition, delay, animations) {
+                if (!("x" in target || "y" in target))
+                    return;
+                const xValue = visualElement.getValue("x", visualElement.latestValues["x"] ?? 0);
+                const yValue = visualElement.getValue("y", visualElement.latestValues["y"] ?? 0);
+                const xRaw = target.x;
+                const yRaw = target.y;
+                const xFrom = (Array.isArray(xRaw) && xRaw[0] != null
+                    ? xRaw[0]
+                    : xValue?.get()) ?? 0;
+                const yFrom = (Array.isArray(yRaw) && yRaw[0] != null
+                    ? yRaw[0]
+                    : yValue?.get()) ?? 0;
+                const xTo = (Array.isArray(xRaw)
+                    ? xRaw[xRaw.length - 1]
+                    : xRaw ?? xFrom);
+                const yTo = (Array.isArray(yRaw)
+                    ? yRaw[yRaw.length - 1]
+                    : yRaw ?? yFrom);
+                // Interruption needs no flag: x/y already hold the displaced
+                // mid-arc position, so xFrom/yFrom carry the continuity geometry.
+                const interpolate = sample({ x: xFrom, y: yFrom }, { x: xTo, y: yTo });
+                // Drive a dedicated `pathRotation` value (composed onto `rotate`
+                // at the build sites) rather than `rotate` itself, so a
+                // concurrent rotate animation composes and nothing accumulates
+                // on interrupt.
+                const pathRotationValue = interpolate(0).rotate !== undefined
+                    ? visualElement.getValue("pathRotation", 0)
+                    : undefined;
+                const pathTransition = {
+                    delay,
+                    ...getValueTransition$1(transition || {}, "x"),
+                };
+                delete pathTransition.path;
+                const progress = motionValue(0);
+                progress.start(animateMotionValue("", progress, [0, 1000], {
+                    ...pathTransition,
+                    isSync: true,
+                    velocity: 0,
+                    onUpdate: (latest) => {
+                        const point = interpolate(latest / 1000);
+                        xValue?.set(point.x);
+                        yValue?.set(point.y);
+                        if (pathRotationValue && point.rotate !== undefined) {
+                            pathRotationValue.set(point.rotate);
+                        }
+                    },
+                    onComplete: () => {
+                        xValue?.set(xTo);
+                        yValue?.set(yTo);
+                        pathRotationValue?.set(0);
+                    },
+                    // Interrupt/cancel must clear our additive contribution
+                    // so it can't linger on top of the user's `rotate`.
+                    onStop: () => pathRotationValue?.set(0),
+                    onCancel: () => pathRotationValue?.set(0),
+                }));
+                if (progress.animation)
+                    animations.push(progress.animation);
+                delete target.x;
+                delete target.y;
+            },
+        };
+        return path;
+    }
+
+    /**
+     * Parse Framer's special CSS variable format into a CSS token and a fallback.
+     *
+     * ```
+     * `var(--foo, #fff)` => [`--foo`, '#fff']
+     * ```
+     *
+     * @param current
+     */
+    const splitCSSVariableRegex = 
+    // eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
+    /^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u;
+    function parseCSSVariable(current) {
+        const match = splitCSSVariableRegex.exec(current);
+        if (!match)
+            return [,];
+        const [, token1, token2, fallback] = match;
+        return [`--${token1 ?? token2}`, fallback];
+    }
+    const maxDepth = 4;
+    function getVariableValue(current, element, depth = 1) {
+        exports.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`, "max-css-var-depth");
+        const [token, fallback] = parseCSSVariable(current);
+        // No CSS variable detected
+        if (!token)
+            return;
+        // Attempt to read this CSS variable off the element
+        const resolved = window.getComputedStyle(element).getPropertyValue(token);
+        if (resolved) {
+            const trimmed = resolved.trim();
+            return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
         }
+        return isCSSVariableToken(fallback)
+            ? getVariableValue(fallback, element, depth + 1)
+            : fallback;
+    }
+
+    function getValueState(visualElement) {
+        const state = [{}, {}];
+        visualElement?.values.forEach((value, key) => {
+            state[0][key] = value.get();
+            state[1][key] = value.getVelocity();
+        });
+        return state;
+    }
+    function resolveVariantFromProps(props, definition, custom, visualElement) {
         /**
-         * Stop the currently active animation.
-         *
-         * @public
+         * If the variant definition is a function, resolve.
          */
-        stop() {
-            if (this.animation) {
-                this.animation.stop();
-                if (this.events.animationCancel) {
-                    this.events.animationCancel.notify();
-                }
-            }
-            this.clearAnimation();
+        if (typeof definition === "function") {
+            const [current, velocity] = getValueState(visualElement);
+            definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
         }
         /**
-         * Returns `true` if this value is currently animating.
-         *
-         * @public
+         * If the variant definition is a variant label, or
+         * the function returned a variant label, resolve.
          */
-        isAnimating() {
-            return !!this.animation;
-        }
-        clearAnimation() {
-            delete this.animation;
+        if (typeof definition === "string") {
+            definition = props.variants && props.variants[definition];
         }
         /**
-         * 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
+         * At this point we've resolved both functions and variant labels,
+         * but the resolved variant label might itself have been a function.
+         * If so, resolve. This can only have returned a valid target object.
          */
-        destroy() {
-            this.dependents?.clear();
-            this.events.destroy?.notify();
-            this.clearListeners();
-            this.stop();
-            if (this.stopPassiveEffect) {
-                this.stopPassiveEffect();
-            }
+        if (typeof definition === "function") {
+            const [current, velocity] = getValueState(visualElement);
+            definition = definition(custom !== undefined ? custom : props.custom, current, velocity);
         }
+        return definition;
     }
-    function motionValue(init, options) {
-        return new MotionValue(init, options);
+
+    function resolveVariant(visualElement, definition, custom) {
+        const props = visualElement.getProps();
+        return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, visualElement);
     }
 
+    const positionalKeys = new Set([
+        "width",
+        "height",
+        "top",
+        "left",
+        "right",
+        "bottom",
+        ...transformPropOrder,
+    ]);
+
     const isKeyframesTarget = (v) => {
         return Array.isArray(v);
     };
@@ -3846,6 +4003,11 @@
         const animationTypeState = type &&
             visualElement.animationState &&
             visualElement.animationState.getState()[type];
+        const path = transition?.path;
+        if (path) {
+            // path mutates `target` to claim x/y; loop below skips them.
+            path.animateVisualElement(visualElement, target, transition, delay, animations);
+        }
         for (const key in target) {
             const value = visualElement.getValue(key, visualElement.latestValues[key] ?? null);
             const valueTarget = target[key];
@@ -4064,6 +4226,12 @@
 
     const transformValueTypes = {
         rotate: degrees,
+        /**
+         * Internal channel for `transition.path` orientToPath. Composed onto
+         * `rotate` at the transform-build sites so the user's `rotate` is
+         * never read or overwritten. Not part of `transformPropOrder`.
+         */
+        pathRotation: degrees,
         rotateX: degrees,
         rotateY: degrees,
         rotateZ: degrees,
@@ -4615,6 +4783,15 @@
                 transform += `${transformName}(${value}) `;
             }
         }
+        // See build-transform.ts: additive `rotate()` so user `rotate` isn't
+        // clobbered. Not a `transformPropOrder` slot.
+        const pathRotation = state.latest.pathRotation;
+        if (pathRotation) {
+            transformIsDefault = false;
+            transform += `rotate(${typeof pathRotation === "number"
+            ? `${pathRotation}deg`
+            : pathRotation}) `;
+        }
         return transformIsDefault ? "none" : transform.trim();
     }
 
@@ -4955,9 +5132,16 @@
                 claimedPointerDownEvents.add(startEvent);
             }
             const onPressEnd = onPressStart(target, startEvent);
+            /**
+             * End listeners run in the capture phase so a descendant calling
+             * stopPropagation() in its own pointerup handler can't prevent the
+             * press gesture from ending. This also keeps the gesture-end
+             * ordering consistent with the drag gesture. See #2794.
+             */
+            const endEventOptions = { ...eventOptions, capture: true };
             const onPointerEnd = (endEvent, success) => {
-                window.removeEventListener("pointerup", onPointerUp);
-                window.removeEventListener("pointercancel", onPointerCancel);
+                window.removeEventListener("pointerup", onPointerUp, endEventOptions);
+                window.removeEventListener("pointercancel", onPointerCancel, endEventOptions);
                 if (isPressing.has(target)) {
                     isPressing.delete(target);
                 }
@@ -4977,8 +5161,8 @@
             const onPointerCancel = (cancelEvent) => {
                 onPointerEnd(cancelEvent, false);
             };
-            window.addEventListener("pointerup", onPointerUp, eventOptions);
-            window.addEventListener("pointercancel", onPointerCancel, eventOptions);
+            window.addEventListener("pointerup", onPointerUp, endEventOptions);
+            window.addEventListener("pointercancel", onPointerCancel, endEventOptions);
         };
         targets.forEach((target) => {
             const pointerDownTarget = options.useGlobalTarget ? window : target;
@@ -5117,116 +5301,34 @@
         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);
+    const statsBuffer = {
+        value: null,
+        addProjectionMetrics: null,
+    };
+
     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: [],
-            },
+        const buffer = statsBuffer;
+        buffer.value = {
             layoutProjection: {
                 nodes: [],
                 calculatedTargetDeltas: [],
                 calculatedProjections: [],
             },
         };
-        newStatsBuffer.addProjectionMetrics = (metrics) => {
-            const { layoutProjection } = newStatsBuffer.value;
+        buffer.addProjectionMetrics = (metrics) => {
+            const { layoutProjection } = buffer.value;
             layoutProjection.nodes.push(metrics.nodes);
             layoutProjection.calculatedTargetDeltas.push(metrics.calculatedTargetDeltas);
             layoutProjection.calculatedProjections.push(metrics.calculatedProjections);
         };
-        frame.postRender(record, true);
-        return reportStats;
     }
 
     /**
@@ -5512,14 +5614,126 @@
      */
     const findValueType = (v) => valueTypes.find(testValueType(v));
 
+    let nameCount = 0;
+    /**
+     * Generated names live in their own namespace so we can tell a name we own
+     * (and must clean up) from an author-defined one - and so a stale generated
+     * name left behind by an interrupted transition is re-owned, not mistaken for
+     * the author's and leaked.
+     */
+    const generatedName = () => `motion-view-${nameCount++}`;
+    const isGeneratedName = (name) => name.startsWith("motion-view-");
+    /**
+     * Tag a captured element with a `view-transition-class` so authors can target
+     * its generated layer from CSS (e.g. `::view-transition-group(.hero)`) without
+     * the opaque generated name. Tracked in `classed` - separate from the generated
+     * names in `assigned` - so cleanup removes the class without ever stripping an
+     * author's own inline `view-transition-name`.
+     */
+    function tagClass(element, className, classed) {
+        if (!className)
+            return;
+        element.style?.setProperty("view-transition-class", className);
+        classed.push(element);
+    }
+    /**
+     * Resolve a selector/Element to elements and ensure each one carries a
+     * `view-transition-name` we can target from script.
+     *
+     * Author-defined names are reused as-is. Elements that are unnamed (or use
+     * the browser's `auto`/`match-element`, whose generated name is not exposed
+     * to script) are given a unique generated name, set inline so it's captured,
+     * and tracked in `assigned` for later cleanup.
+     *
+     * `registry` maps each Element to its name so the same element keeps its name
+     * across both captures (before and after the update), which is what allows a
+     * persistent element to animate as a single `group` layer.
+     */
+    function assignViewTransitionNames(definition, registry, assigned, forcedNames, className, classed = []) {
+        const elements = resolveElements(definition);
+        /**
+         * The new end of a paired morph: give each element the matching name from
+         * the old end (by index) so the two share one layer and morph. If the new
+         * end resolves to *more* elements than the old end named, the extras have no
+         * counterpart - give them a fresh name so they animate as newcomers rather
+         * than being silently left unnamed. We return the names actually assigned
+         * (sized to the resolved elements), not the raw `forcedNames`, so stagger
+         * totals and the layer set stay in step with what's on the page.
+         */
+        if (forcedNames) {
+            return elements.map((element, i) => {
+                const existing = registry.get(element);
+                if (existing)
+                    return existing;
+                const name = forcedNames[i] ?? generatedName();
+                element.style?.setProperty("view-transition-name", name);
+                assigned.push(element);
+                registry.set(element, name);
+                tagClass(element, className, classed);
+                return name;
+            });
+        }
+        /**
+         * Read every current name up front, before assigning any. Interleaving the
+         * reads with the inline `setProperty` writes below would dirty styles
+         * between reads and force a style recalc per element; batching the reads
+         * keeps it to one. Elements already in the registry keep their name and
+         * need no read.
+         */
+        const currentNames = elements.map((element) => registry.has(element)
+            ? undefined
+            : getComputedStyle(element).getPropertyValue("view-transition-name"));
+        return elements.map((element, i) => {
+            const existing = registry.get(element);
+            if (existing)
+                return existing;
+            const current = currentNames[i];
+            let name;
+            if (current &&
+                current !== "none" &&
+                current !== "auto" &&
+                current !== "match-element" &&
+                !isGeneratedName(current)) {
+                /**
+                 * The author already named this layer - target it as-is and leave
+                 * it to them to clean up. `auto`/`match-element` are overridden
+                 * because their generated name is not exposed to script, and a
+                 * stale `motion-view-*` (e.g. left by an interrupted transition) is
+                 * re-owned rather than adopted as an author name and leaked.
+                 */
+                name = current;
+            }
+            else {
+                name = generatedName();
+                element.style?.setProperty("view-transition-name", name);
+                assigned.push(element);
+            }
+            registry.set(element, name);
+            tagClass(element, className, classed);
+            return name;
+        });
+    }
+    /**
+     * Remove the `view-transition-name`s we generated and the
+     * `view-transition-class`es we applied. Author-defined names are never touched
+     * (they're not in `assigned`). Safe to call more than once (e.g. on both a
+     * finished and an interrupted transition).
+     */
+    function releaseViewTransitionNames(assigned, classed = []) {
+        for (const element of assigned) {
+            element.style?.removeProperty("view-transition-name");
+        }
+        for (const element of classed) {
+            element.style?.removeProperty("view-transition-class");
+        }
+    }
+
     function chooseLayerType(valueName) {
         if (valueName === "layout")
             return "group";
         if (valueName === "enter" || valueName === "new")
             return "new";
-        if (valueName === "exit" || valueName === "old")
-            return "old";
-        return "group";
+        return "old";
     }
 
     let pendingRules = {};
@@ -5554,21 +5768,21 @@
     };
 
     function getViewAnimationLayerInfo(pseudoElement) {
-        const match = pseudoElement.match(/::view-transition-(old|new|group|image-pair)\((.*?)\)/);
+        const match = pseudoElement.match(
+        // `group-children` (nested transitions) before `group` so it wins.
+        /::view-transition-(old|new|group-children|group|image-pair)\((.*?)\)/);
         if (!match)
             return null;
         return { layer: match[2], type: match[1] };
     }
 
-    function filterViewAnimations(animation) {
-        const { effect } = animation;
-        if (!effect)
-            return false;
-        return (effect.target === document.documentElement &&
-            effect.pseudoElement?.startsWith("::view-transition"));
-    }
     function getViewAnimations() {
-        return document.getAnimations().filter(filterViewAnimations);
+        return document.getAnimations().filter((animation) => {
+            const { effect } = animation;
+            return (!!effect &&
+                effect.target === document.documentElement &&
+                effect.pseudoElement?.startsWith("::view-transition"));
+        });
     }
 
     function hasTarget(target, targets) {
@@ -5576,87 +5790,370 @@
     }
 
     const definitionNames = ["layout", "enter", "exit", "new", "old"];
+    /**
+     * The `ViewTransitionTarget` buckets driving each generated layer type, in
+     * priority order - the inverse of `chooseLayerType`. The new view is driven by
+     * `new`/`enter`, the old by `old`/`exit`. `group-children`/`image-pair` have no
+     * bucket; they follow the default layout timing.
+     */
+    const typeBuckets = {
+        group: ["layout"],
+        new: ["new", "enter"],
+        old: ["old", "exit"],
+    };
+    /**
+     * Default "absent" origin for a single-value keyframe, by pseudo type, so e.g.
+     * `enter({ scale: 1 })` grows in from 0.85 and `exit({ opacity: 0 })` fades
+     * from 1. `enter` prefers the matching `exit` value over these (see below).
+     */
+    const ORIGIN_DEFAULTS = {
+        new: { opacity: 0, scale: 0.85 },
+        old: { opacity: 1, scale: 1 },
+    };
+    const cornerProps = [
+        "borderTopLeftRadius",
+        "borderTopRightRadius",
+        "borderBottomRightRadius",
+        "borderBottomLeftRadius",
+    ];
     function startViewAnimation(builder) {
-        const { update, targets, options: defaultOptions } = builder;
+        const { update, targets, resolveDefs, noCrop, pairs, classNames, options: defaultOptions, } = builder;
         if (!document.startViewTransition) {
-            return new Promise(async (resolve) => {
+            // An async IIFE (not `new Promise(async …)`) so a throwing/rejecting
+            // update rejects this promise rather than leaving it unsettled.
+            return (async () => {
                 await update();
-                resolve(new GroupAnimation([]));
+                return new GroupAnimation([]);
+            })();
+        }
+        /**
+         * Resolve any selector/Element targets to layer names, assigning a
+         * `view-transition-name` to each element as we go. We run this before the
+         * update (so the elements are captured in the old snapshot) and again
+         * after it (for the new snapshot). An element present in both keeps the
+         * same name and animates as a single `group` layer.
+         */
+        const nameRegistry = new Map();
+        const assigned = [];
+        /**
+         * Elements we tagged with a `view-transition-class` (via `.class()`),
+         * tracked separately from `assigned` so cleanup removes the class without
+         * ever stripping an author's own inline `view-transition-name`.
+         */
+        const classed = [];
+        const layerTargets = new Map();
+        const croppedNames = new Set();
+        /**
+         * Each layer's stagger position (index + total) within its subject, per
+         * snapshot. Resolving against the snapshot the layer belongs to keeps
+         * stagger correct when `update()` replaces the matched elements, and lets
+         * us skip a layer that's absent from a snapshot (e.g. an exited element
+         * has no `new` pseudo-element).
+         */
+        const layerStagger = new Map();
+        /**
+         * Names allocated for a paired subject in the old snapshot, replayed onto
+         * its new-snapshot target so both ends share a layer and morph.
+         */
+        const pairNames = new Map();
+        /**
+         * The old (`from`) elements of each paired subject, so their names can be
+         * transferred off before the new (`to`) elements inherit them.
+         */
+        const pairFrom = new Map();
+        const resolveLayers = (phase) => {
+            targets.forEach((target, definition) => {
+                const className = classNames.get(definition);
+                let names;
+                if (definition === "root" || !resolveDefs.has(definition)) {
+                    names = [definition];
+                }
+                else if (pairs.has(definition)) {
+                    /**
+                     * Paired morph: name the old target in the old snapshot, then
+                     * force the same name(s) onto the new target in the new one, so
+                     * two different elements morph as a single layer.
+                     */
+                    if (phase === "old") {
+                        pairFrom.set(definition, resolveElements(definition));
+                        names = assignViewTransitionNames(definition, nameRegistry, assigned, undefined, className, classed);
+                        pairNames.set(definition, names);
+                    }
+                    else {
+                        /**
+                         * Transfer the name(s) off the `from` elements before the
+                         * `to` elements inherit them. A `from` that survives into
+                         * the new snapshot (e.g. hidden with `visibility: hidden`
+                         * rather than removed) would otherwise keep the name and
+                         * collide - "duplicate view-transition-name".
+                         */
+                        for (const el of pairFrom.get(definition) ?? []) {
+                            el.style?.removeProperty("view-transition-name");
+                            /**
+                             * Drop the old end from the registry too, so the new
+                             * end alone supplies this name's `new` crop radii - we
+                             * neither re-measure nor get ordered by a stale element.
+                             */
+                            nameRegistry.delete(el);
+                        }
+                        names = assignViewTransitionNames(pairs.get(definition), nameRegistry, assigned, pairNames.get(definition), className, classed);
+                    }
+                }
+                else {
+                    names = assignViewTransitionNames(definition, nameRegistry, assigned, undefined, className, classed);
+                }
+                const cropped = definition !== "root" && !noCrop.has(definition);
+                names.forEach((name, index) => {
+                    /**
+                     * If two subjects resolve to the same element, merge their
+                     * definitions so neither subject's animations are dropped.
+                     */
+                    const existing = layerTargets.get(name);
+                    layerTargets.set(name, existing && existing !== target
+                        ? { ...existing, ...target }
+                        : target);
+                    if (cropped)
+                        croppedNames.add(name);
+                    const stagger = layerStagger.get(name) ?? {};
+                    stagger[phase] = [index, names.length];
+                    layerStagger.set(name, stagger);
+                });
             });
-        }
-        // TODO: Go over existing targets and ensure they all have ids
+        };
+        /**
+         * The stagger index/total for a layer, resolved against the snapshot it
+         * belongs to. Returns index -1 when the layer is absent from that snapshot
+         * so the caller can skip a pseudo-element that doesn't exist.
+         */
+        const staggerPosition = (name, type) => {
+            const stagger = layerStagger.get(name);
+            const position = type === "old"
+                ? stagger?.old
+                : type === "new"
+                    ? stagger?.new
+                    : // group / group-children / image-pair persist across both.
+                        stagger?.new ?? stagger?.old;
+            return position ?? [-1, 1];
+        };
+        /**
+         * Merge default + per-layer transition options for a generated layer and
+         * resolve any stagger/delay function against this element's position. Used
+         * by both the morph-retiming and crop corner-radius passes.
+         */
+        const resolveLayerTransition = (target, type, transitionName, index, total) => {
+            const transition = mergeTransition(getValueTransition$1(defaultOptions, transitionName), getValueTransition$1((layerOptions(target, type) ?? {}), transitionName));
+            if (typeof transition.delay === "function") {
+                transition.delay = transition.delay(index, total);
+            }
+            return transition;
+        };
+        /**
+         * Measured corner radii per cropped layer, so the clip can animate each
+         * corner between the old and new elements. Per-corner (rather than the
+         * shorthand) so mismatched/individual radii interpolate cleanly.
+         */
+        const cropRadii = new Map();
+        const recordRadii = (style, name, phase) => {
+            const corners = {};
+            for (const corner of cornerProps)
+                corners[corner] = style[corner];
+            const entry = cropRadii.get(name) ?? {};
+            entry[phase] = corners;
+            cropRadii.set(name, entry);
+        };
         /**
-         * If we don't have any animations defined for the root target,
-         * remove it from being captured.
+         * Cropped layers all come from `.add()`, so their elements are in the
+         * registry - read each one's corner radii directly. For a paired morph both
+         * ends share a name; the new-snapshot element is registered last, so it
+         * wins the `new` reading (and the old end the `old` reading).
          */
-        if (!hasTarget("root", targets)) {
-            css.set(":root", {
-                "view-transition-name": "none",
+        const measureCrop = (phase) => {
+            if (!croppedNames.size)
+                return;
+            nameRegistry.forEach((name, element) => {
+                if (croppedNames.has(name)) {
+                    recordRadii(getComputedStyle(element), name, phase);
+                }
             });
-        }
+        };
         /**
-         * Set the timing curve to linear for all view transition layers.
-         * This gets baked into the keyframes, which can't be changed
-         * without breaking the generated animation.
+         * Write the persistent view-transition CSS: suppress root capture when the
+         * root has no animations of its own; force linear timing (baked into the
+         * keyframes, so we can retime later via updateTiming); and clip +
+         * object-fit: cover every cropped morph (the UA default overflows on
+         * aspect-ratio change), with an animated border-radius added below.
          *
-         * This allows us to set easing via updateTiming - which can be changed.
+         * `css.commit` replaces rather than appends, so we re-set the full rule set
+         * each call - the second call (in the update callback) then picks up cropped
+         * layers that only exist in the new snapshot.
          */
-        css.set("::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*)", { "animation-timing-function": "linear !important" });
-        css.commit(); // Write
-        const transition = document.startViewTransition(async () => {
-            await update();
-            // TODO: Go over new targets and ensure they all have ids
-        });
-        transition.finished.finally(() => {
+        const commitViewCSS = () => {
+            if (!hasTarget("root", targets)) {
+                css.set(":root", { "view-transition-name": "none" });
+            }
+            css.set("::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*)", { "animation-timing-function": "linear !important" });
+            croppedNames.forEach((name) => {
+                css.set(`::view-transition-group(${name})`, { overflow: "clip" });
+                css.set(`::view-transition-old(${name}), ::view-transition-new(${name})`, { width: "100%", height: "100%", "object-fit": "cover" });
+            });
+            css.commit(); // Write
+        };
+        const cleanup = () => {
+            releaseViewTransitionNames(assigned, classed);
             css.remove(); // Write
-        });
-        return new Promise((resolve) => {
-            transition.ready.then(() => {
+        };
+        const callback = async () => {
+            await update();
+            /**
+             * Re-resolve so elements created by the update are named for the new
+             * snapshot, then measure the cropped layers' new border-radius.
+             */
+            const croppedBefore = croppedNames.size;
+            resolveLayers("new");
+            measureCrop("new");
+            /**
+             * Re-commit the crop CSS only if the new snapshot introduced cropped
+             * layers, so a layer that exists only in the new snapshot is clipped
+             * too - without forcing a redundant style write on the common path.
+             */
+            if (croppedNames.size > croppedBefore)
+                commitViewCSS();
+        };
+        let transition;
+        try {
+            resolveLayers("old");
+            measureCrop("old");
+            commitViewCSS();
+            transition = document.startViewTransition(callback);
+        }
+        catch (error) {
+            /**
+             * The prelude writes inline names before the transition exists. If it
+             * throws (e.g. startViewTransition rejects in a bad UA state), release
+             * them so we neither leak DOM state nor stall the queue on a promise
+             * that never settles - hand back a rejection it can advance past.
+             */
+            cleanup();
+            return Promise.reject(error);
+        }
+        transition.finished.finally(cleanup);
+        return new Promise((resolve, reject) => {
+            transition.ready
+                .then(() => {
                 const generatedViewAnimations = getViewAnimations();
                 const animations = [];
                 /**
                  * Create animations for each of our explicitly-defined subjects.
+                 * `opacityAnimated` additionally tracks which `${name}:${type}`
+                 * we faded, so we can keep the UA `plus-lighter` blend only for a
+                 * genuine opacity crossfade (both sides fading) and drop it for a
+                 * slide/transform, where additive compositing would flash bright.
                  */
-                targets.forEach((definition, target) => {
-                    // TODO: If target is not "root", resolve elements
-                    // and iterate over each
+                const explicitlyAnimated = new Set();
+                const opacityAnimated = new Set();
+                layerTargets.forEach((target, name) => {
+                    const stagger = layerStagger.get(name);
+                    /**
+                     * Presence: `enter` only fires for a pure newcomer (a new
+                     * view with no old), `exit` only for a pure leaver. A
+                     * survivor (both) gets neither - it just morphs.
+                     */
+                    const enterApplies = !!stagger?.new && !stagger?.old;
+                    const exitApplies = !!stagger?.old && !stagger?.new;
                     for (const key of definitionNames) {
-                        if (!definition[key])
+                        if (!target[key])
                             continue;
-                        const { keyframes, options } = definition[key];
+                        if (key === "enter" && !enterApplies)
+                            continue;
+                        if (key === "exit" && !exitApplies)
+                            continue;
+                        const type = chooseLayerType(key);
+                        const [index, total] = staggerPosition(name, type);
+                        // Skip a layer absent from its snapshot.
+                        if (index === -1)
+                            continue;
+                        const { keyframes, options } = target[key];
                         for (let [valueName, valueKeyframes] of Object.entries(keyframes)) {
-                            if (!valueKeyframes)
+                            // Skip only missing values - `0` (e.g. opacity: 0)
+                            // is valid and must reach the from-value inference.
+                            if (valueKeyframes == null)
                                 continue;
-                            const valueOptions = {
-                                ...getValueTransition$1(defaultOptions, valueName),
-                                ...getValueTransition$1(options, valueName),
-                            };
-                            const type = chooseLayerType(key);
                             /**
-                             * If this is an opacity animation, and keyframes are not an array,
-                             * we need to convert them into an array and set an initial value.
+                             * The view path hands keyframes straight to WAAPI,
+                             * so Motion's `x`/`y` shorthands (compiled to
+                             * `transform` only via the value pipeline) have no
+                             * effect. Warn and skip - use `transform`/`translate`.
                              */
-                            if (valueName === "opacity" &&
-                                !Array.isArray(valueKeyframes)) {
-                                const initialValue = type === "new" ? 0 : 1;
-                                valueKeyframes = [initialValue, valueKeyframes];
+                            if (valueName === "x" || valueName === "y") {
+                                warnOnce(false, `animateView() animates view-transition layers with CSS properties; the "${valueName}" shorthand has no effect - use transform, e.g. { transform: "translateX(40px)" }.`);
+                                continue;
+                            }
+                            /**
+                             * enter/exit win over new/old on a shared property -
+                             * skip it here when the gated bucket also defines it.
+                             */
+                            if (key === "new" &&
+                                enterApplies &&
+                                target.enter?.keyframes[valueName] != null) {
+                                continue;
+                            }
+                            if (key === "old" &&
+                                exitApplies &&
+                                target.exit?.keyframes[valueName] != null) {
+                                continue;
+                            }
+                            const valueOptions = mergeTransition(getValueTransition$1(defaultOptions, valueName), getValueTransition$1(options, valueName));
+                            /**
+                             * Infer an origin for a single-value keyframe. An
+                             * `enter` mirrors the matching `exit` value (a
+                             * defined exit reverses into the enter for free);
+                             * otherwise the per-type default (opacity 0/1, scale
+                             * 0.85). No default -> left as-is (animates from the
+                             * live value).
+                             *
+                             * `new`/`old` fire for survivors too, where only the
+                             * opacity crossfade default applies - a transform
+                             * default like scale 0.85 would pop a persisting
+                             * element, so gate it on the layer actually
+                             * entering/leaving.
+                             */
+                            if (!Array.isArray(valueKeyframes)) {
+                                const exitValue = key === "enter"
+                                    ? target.exit?.keyframes[valueName]
+                                    : undefined;
+                                const allowDefault = valueName === "opacity" ||
+                                    (type === "new" ? enterApplies : exitApplies);
+                                const from = exitValue != null
+                                    ? Array.isArray(exitValue)
+                                        ? exitValue[exitValue.length - 1]
+                                        : exitValue
+                                    : allowDefault
+                                        ? ORIGIN_DEFAULTS[type]?.[valueName]
+                                        : undefined;
+                                if (from !== undefined) {
+                                    valueKeyframes = [from, valueKeyframes];
+                                }
                             }
                             /**
-                             * Resolve stagger function if provided.
+                             * Resolve stagger function if provided, per element
+                             * across this subject's resolved layers.
                              */
                             if (typeof valueOptions.delay === "function") {
-                                valueOptions.delay = valueOptions.delay(0, 1);
+                                valueOptions.delay = valueOptions.delay(index, total);
                             }
                             valueOptions.duration && (valueOptions.duration = secondsToMilliseconds(valueOptions.duration));
                             valueOptions.delay && (valueOptions.delay = secondsToMilliseconds(valueOptions.delay));
-                            const animation = new NativeAnimation({
+                            animations.push(new NativeAnimation({
                                 ...valueOptions,
                                 element: document.documentElement,
                                 name: valueName,
-                                pseudoElement: `::view-transition-${type}(${target})`,
+                                pseudoElement: `::view-transition-${type}(${name})`,
                                 keyframes: valueKeyframes,
-                            });
-                            animations.push(animation);
+                            }));
+                            explicitlyAnimated.add(`${name}:${type}`);
+                            if (valueName === "opacity") {
+                                opacityAnimated.add(`${name}:${type}`);
+                            }
                         }
                     }
                 });
@@ -5675,45 +6172,161 @@
                     const name = getViewAnimationLayerInfo(pseudoElement);
                     if (!name)
                         continue;
-                    const targetDefinition = targets.get(name.layer);
-                    if (!targetDefinition) {
-                        /**
-                         * If transition name is group then update the timing of the animation
-                         * whereas if it's old or new then we could possibly replace it using
-                         * the above method.
-                         */
-                        const transitionName = name.type === "group" ? "layout" : "";
-                        let animationTransition = {
-                            ...getValueTransition$1(defaultOptions, transitionName),
-                        };
-                        animationTransition.duration && (animationTransition.duration = secondsToMilliseconds(animationTransition.duration));
-                        animationTransition =
-                            applyGeneratorOptions(animationTransition);
-                        const easing = mapEasingToNativeEasing(animationTransition.ease, animationTransition.duration);
-                        effect.updateTiming({
-                            delay: secondsToMilliseconds(animationTransition.delay ?? 0),
-                            duration: animationTransition.duration,
-                            easing,
-                        });
-                        animations.push(new NativeAnimationWrapper(animation));
-                    }
-                    else if (hasOpacity(targetDefinition, "enter") &&
-                        hasOpacity(targetDefinition, "exit") &&
-                        effect
-                            .getKeyframes()
-                            .some((keyframe) => keyframe.mixBlendMode)) {
-                        animations.push(new NativeAnimationWrapper(animation));
-                    }
-                    else {
-                        animation.cancel();
+                    const targetDefinition = layerTargets.get(name.layer);
+                    /**
+                     * We built our own animation for this layer, so drop the
+                     * browser-generated fade we're replacing. The UA
+                     * `plus-lighter` blend is a *separate* generated animation on
+                     * the same pseudo (it sets `mix-blend-mode` in its keyframes):
+                     * keep it *only* for a true opacity crossfade - both sides
+                     * fading - so a symmetric crossfade composites without
+                     * darkening, but a slide/transform (where both layers stay
+                     * opaque and overlap) doesn't flash bright from the addition.
+                     */
+                    if (explicitlyAnimated.has(`${name.layer}:${name.type}`)) {
+                        const isCrossfade = opacityAnimated.has(`${name.layer}:new`) &&
+                            opacityAnimated.has(`${name.layer}:old`);
+                        if (isCrossfade &&
+                            effect
+                                .getKeyframes()
+                                .some((keyframe) => keyframe.mixBlendMode)) {
+                            animations.push(new NativeAnimationWrapper(animation));
+                        }
+                        else {
+                            animation.cancel();
+                        }
+                        continue;
                     }
+                    /**
+                     * Otherwise retime the browser-generated animation to
+                     * Motion's timing. This auto-enables the layout (group)
+                     * morph for any resolved/named target, and applies the
+                     * default timing to old/new layers we haven't explicitly
+                     * overridden.
+                     *
+                     * group + group-children both follow the layout timing so
+                     * the nesting container stays in sync with the morph.
+                     */
+                    /**
+                     * A survivor's old + new are the two halves of one
+                     * `plus-lighter` crossfade. They must share identical timing
+                     * (so their opacities stay mirrored and sum to 1 - else the
+                     * additive blend flashes bright wherever both are partly
+                     * visible) and fade linearly (the bounce belongs on the
+                     * group's geometry, not the opacity). So time them as the
+                     * group, rather than via their own - potentially staggered,
+                     * or enter/exit-derived - old/new options.
+                     */
+                    const stagger = layerStagger.get(name.layer);
+                    const isMorphCrossfade = (name.type === "old" || name.type === "new") &&
+                        !!stagger?.old &&
+                        !!stagger?.new;
+                    const timingType = name.type.startsWith("group") || isMorphCrossfade
+                        ? "group"
+                        : name.type;
+                    const [index, total] = staggerPosition(name.layer, timingType);
+                    const transitionName = timingType === "group" ? "layout" : "";
+                    let animationTransition = resolveLayerTransition(targetDefinition, timingType, transitionName, index === -1 ? 0 : index, total);
+                    /**
+                     * The crossfade should resolve at the spring's *perceptual*
+                     * (visual) duration - the geometry can keep bouncing, but the
+                     * opacity shouldn't drag through the settle. So capture
+                     * `visualDuration` before `applyGeneratorOptions` replaces it
+                     * with the full overshoot duration, and use it for the fade.
+                     */
+                    const visualDuration = animationTransition.visualDuration;
+                    animationTransition.duration && (animationTransition.duration = secondsToMilliseconds(animationTransition.duration));
+                    animationTransition =
+                        applyGeneratorOptions(animationTransition);
+                    const duration = isMorphCrossfade && visualDuration !== undefined
+                        ? secondsToMilliseconds(visualDuration)
+                        : animationTransition.duration;
+                    const easing = isMorphCrossfade
+                        ? "linear"
+                        : mapEasingToNativeEasing(animationTransition.ease, animationTransition.duration);
+                    effect.updateTiming({
+                        delay: secondsToMilliseconds(animationTransition.delay ?? 0),
+                        duration,
+                        easing,
+                    });
+                    animations.push(new NativeAnimationWrapper(animation));
                 }
+                /**
+                 * Animate each cropped layer's clip corners between the old and
+                 * new elements, so a cropped morph keeps rounded corners
+                 * (handling individual per-corner radii).
+                 */
+                cropRadii.forEach((radii, name) => {
+                    if (!radii.old && !radii.new)
+                        return;
+                    const target = layerTargets.get(name);
+                    const [index, total] = staggerPosition(name, "group");
+                    const radiusOptions = resolveLayerTransition(target, "group", "layout", index === -1 ? 0 : index, total);
+                    radiusOptions.duration && (radiusOptions.duration = secondsToMilliseconds(radiusOptions.duration));
+                    radiusOptions.delay && (radiusOptions.delay = secondsToMilliseconds(radiusOptions.delay));
+                    for (const corner of cornerProps) {
+                        // `||` (not `??`) so an empty measurement (e.g. an
+                        // un-rendered element) falls back rather than producing
+                        // an invalid keyframe.
+                        const from = radii.old?.[corner] || radii.new?.[corner] || "0px";
+                        const to = radii.new?.[corner] || radii.old?.[corner] || "0px";
+                        // Skip square corners - nothing to round.
+                        if (parseFloat(from) === 0 && parseFloat(to) === 0) {
+                            continue;
+                        }
+                        animations.push(new NativeAnimation({
+                            ...radiusOptions,
+                            element: document.documentElement,
+                            name: corner,
+                            pseudoElement: `::view-transition-group(${name})`,
+                            keyframes: [from, to],
+                        }));
+                    }
+                });
                 resolve(new GroupAnimation(animations));
-            });
+            })
+                .catch(() => 
+            /**
+             * `ready` rejects when the transition is skipped - no visual
+             * change, or superseded by an interrupting transition. The DOM
+             * update still applied, so settle with no animations rather than
+             * surfacing it as an error to an awaiting caller. A genuine
+             * failure in `update()` rejects `updateCallbackDone` (already
+             * settled by now), so propagate that instead.
+             */
+            transition.updateCallbackDone.then(() => resolve(new GroupAnimation([])), reject));
         });
     }
-    function hasOpacity(target, key) {
-        return target?.[key]?.keyframes.opacity;
+    /**
+     * The options that should time a given generated layer type, so a retimed
+     * group/old/new picks up any per-target transition the user provided. Checks
+     * the type's buckets in priority order (e.g. `new` before `enter`).
+     */
+    function layerOptions(target, type) {
+        for (const bucket of typeBuckets[type] ?? []) {
+            const options = target?.[bucket]?.options;
+            if (options)
+                return options;
+        }
+    }
+    /**
+     * Merge a base transition (e.g. the default `options`) with a per-layer/value
+     * override. An explicit `duration` on the override must win over an inherited
+     * generator's own timing: a spring prefers `visualDuration`, and
+     * `spring.applyToOptions` overwrites `duration` with the computed settle time -
+     * so without this the override is silently discarded. Dropping the inherited
+     * `type`/`visualDuration` makes the layer a plain tween of that duration, unless
+     * it asked for its own generator `type`/`visualDuration`.
+     */
+    function mergeTransition(base, override) {
+        const merged = { ...base, ...override };
+        if (override.duration !== undefined) {
+            if (override.visualDuration === undefined)
+                delete merged.visualDuration;
+            if (override.type === undefined)
+                delete merged.type;
+        }
+        return merged;
     }
 
     let builders = [];
@@ -5727,10 +6340,16 @@
     function start(builder) {
         removeItem(builders, builder);
         current = builder;
-        startViewAnimation(builder).then((animation) => {
+        startViewAnimation(builder)
+            .then((animation) => {
             builder.notifyReady(animation);
-            animation.finished.finally(next);
-        });
+            return animation.finished;
+        })
+            // A genuinely failed transition (a throwing update) rejects the
+            // builder; a skipped/interrupted one resolves with no animations (see
+            // start.ts). Either way, advance the queue - else later transitions hang.
+            .catch((error) => builder.notifyReject(error))
+            .finally(next);
     }
     function processQueue() {
         /**
@@ -5767,31 +6386,96 @@
         constructor(update, options = {}) {
             this.currentSubject = "root";
             this.targets = new Map();
-            this.notifyReady = noop$1;
-            this.readyPromise = new Promise((resolve) => {
+            /**
+             * Definitions that must be resolved to elements (and assigned a
+             * `view-transition-name`) rather than treated as pre-named layers.
+             */
+            this.resolveDefs = new Set();
+            /**
+             * Subjects opted out of the default crop (clip + object-fit: cover +
+             * animated corner radii) via `.crop(false)`.
+             */
+            this.noCrop = new Set();
+            /**
+             * Subjects paired with a different new-snapshot target (the second `.add()`
+             * argument), so two distinct elements share one name and morph into each
+             * other - a shared-element transition.
+             */
+            this.pairs = new Map();
+            /**
+             * A `view-transition-class` to apply to each subject's resolved elements,
+             * so authors can target the generated layers from CSS by class rather than
+             * the opaque generated name.
+             */
+            this.classNames = new Map();
+            this.notifyReady = noop;
+            this.notifyReject = noop;
+            this.readyPromise = new Promise((resolve, reject) => {
                 this.notifyReady = resolve;
+                this.notifyReject = reject;
             });
             this.update = update;
             this.options = {
                 interrupt: "wait",
                 ...options,
             };
+            // Avoid an unhandled rejection when a failed transition has no
+            // `.then(_, reject)` handler attached (e.g. fire-and-forget).
+            this.readyPromise.catch(noop);
             addToQueue(this);
         }
-        get(subject) {
+        /**
+         * Target elements resolved from a selector or Element, each assigned a
+         * `view-transition-name` automatically.
+         *
+         * Passing a second target pairs them: the first is resolved in the old
+         * snapshot and the second in the new, sharing one name so two *different*
+         * elements morph into each other (e.g. `.add(card, ".modal")`). Symmetric -
+         * pass them the other way round to morph back.
+         */
+        add(subject, newSubject) {
             this.currentSubject = subject;
+            this.resolveDefs.add(subject);
+            if (newSubject !== undefined)
+                this.pairs.set(subject, newSubject);
+            // Register the subject so it participates (and gets an automatic
+            // layout/morph animation) even without an explicit enter/exit/layout.
+            if (!this.targets.has(subject))
+                this.targets.set(subject, {});
             return this;
         }
-        layout(keyframes, options) {
-            this.updateTarget("layout", keyframes, options);
+        /**
+         * Morphs are clipped + `object-fit: cover` (and their corners animate)
+         * by default. Call `.crop(false)` to opt this subject out and fall back
+         * to the browser default (which overflows on aspect-ratio change).
+         */
+        crop(enabled = true) {
+            enabled
+                ? this.noCrop.delete(this.currentSubject)
+                : this.noCrop.add(this.currentSubject);
             return this;
         }
-        new(keyframes, options) {
-            this.updateTarget("new", keyframes, options);
+        /**
+         * Tag this subject's generated layers with a `view-transition-class`, so
+         * they can be targeted from CSS - `::view-transition-group(.name)`,
+         * `::view-transition-old/new(.name)`, `::view-transition-image-pair(.name)`
+         * - without the opaque generated `view-transition-name`. Because `.add()`
+         * can match many elements, a shared class targets them all at once (and,
+         * for a pair, both ends). The escape hatch for z-index / custom keyframes
+         * on a morph layer.
+         */
+        class(name) {
+            this.classNames.set(this.currentSubject, name);
             return this;
         }
-        old(keyframes, options) {
-            this.updateTarget("old", keyframes, options);
+        /**
+         * Set the transition for this subject's morph. The morph is enabled
+         * automatically by `.add()`; this just customises its timing (duration,
+         * easing, a `delay`/`stagger`, …). On the implicit `root` subject it also
+         * opts the page into the transition (the root crossfade).
+         */
+        layout(options = {}) {
+            this.updateTarget("layout", {}, options);
             return this;
         }
         enter(keyframes, options) {
@@ -5802,9 +6486,21 @@
             this.updateTarget("exit", keyframes, options);
             return this;
         }
-        crossfade(options) {
-            this.updateTarget("enter", { opacity: 1 }, options);
-            this.updateTarget("exit", { opacity: 0 }, options);
+        /**
+         * Animate the new view directly, whether the element is appearing or
+         * persisting (unlike `.enter()`, which only fires for a pure newcomer).
+         * Pair with `.old()` for a crossfade or slide-through.
+         */
+        new(keyframes, options) {
+            this.updateTarget("new", keyframes, options);
+            return this;
+        }
+        /**
+         * Animate the old view directly, whether the element is leaving or
+         * persisting (unlike `.exit()`, which only fires for a pure leaver).
+         */
+        old(keyframes, options) {
+            this.updateTarget("old", keyframes, options);
             return this;
         }
         updateTarget(target, keyframes, options = {}) {
@@ -5819,8 +6515,8 @@
             return this.readyPromise.then(resolve, reject);
         }
     }
-    function animateView(update, defaultOptions = {}) {
-        return new ViewTransitionBuilder(update, defaultOptions);
+    function animateView(update, options = {}) {
+        return new ViewTransitionBuilder(update, options);
     }
 
     const createAxisDelta = () => ({
@@ -6767,6 +7463,14 @@
                 }
             }
         }
+        // `pathRotation` composes onto `rotate` as a separate additive term so
+        // the user's `rotate` is never clobbered. Deliberately not a slot in
+        // `transformPropOrder`.
+        const pathRotation = latestValues.pathRotation;
+        if (pathRotation) {
+            transformIsDefault = false;
+            transformString += `rotate(${getValueAsType(pathRotation, numberValueTypes.pathRotation)}) `;
+        }
         transformString = transformString.trim();
         // If we have a custom `transform` template, pass our transform values and
         // generated transformString to that before returning
@@ -7829,11 +8533,14 @@
             transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;
         }
         if (latestTransform) {
-            const { transformPerspective, rotate, rotateX, rotateY, skewX, skewY } = latestTransform;
+            const { transformPerspective, rotate, pathRotation, rotateX, rotateY, skewX, skewY, } = latestTransform;
             if (transformPerspective)
                 transform = `perspective(${transformPerspective}px) ${transform}`;
             if (rotate)
                 transform += `rotate(${rotate}deg) `;
+            // Additive `rotate()` so user `rotate` isn't clobbered.
+            if (pathRotation)
+                transform += `rotate(${pathRotation}deg) `;
             if (rotateX)
                 transform += `rotateX(${rotateX}deg) `;
             if (rotateY)
@@ -7909,7 +8616,7 @@
             : values.borderRadius;
     }
     const easeCrossfadeIn = /*@__PURE__*/ compress(0, 0.5, circOut);
-    const easeCrossfadeOut = /*@__PURE__*/ compress(0.5, 0.95, noop$1);
+    const easeCrossfadeOut = /*@__PURE__*/ compress(0.5, 0.95, noop);
     function compress(min, max, easing) {
         return (p) => {
             // Could replace ifs with clamp
@@ -7929,7 +8636,7 @@
 
     function addDomEvent(target, eventName, handler, options = { passive: true }) {
         target.addEventListener(eventName, handler, options);
-        return () => target.removeEventListener(eventName, handler);
+        return () => target.removeEventListener(eventName, handler, options);
     }
 
     const compareByDepth = (a, b) => a.depth - b.depth;
@@ -8388,7 +9095,8 @@
                              * Set animation origin after starting animation to avoid layout jump
                              * caused by stopping previous layout animation
                              */
-                            this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
+                            this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged, animationOptions
+                                .path);
                         }
                         else {
                             /**
@@ -9104,7 +9812,7 @@
                 this.projectionDelta = createDelta();
                 this.projectionDeltaWithTransform = createDelta();
             }
-            setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {
+            setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false, pathFn) {
                 const snapshot = this.snapshot;
                 const snapshotLatestValues = snapshot ? snapshot.latestValues : {};
                 const mixedValues = { ...this.latestValues };
@@ -9126,10 +9834,26 @@
                     !this.path.some(hasOpacityCrossfade));
                 this.animationProgress = 0;
                 let prevRelativeTarget;
+                // The path decides whether the layout shift is worth curving
+                // (distance floor) and resolves the interpolator from the delta.
+                const interpolate = pathFn?.interpolateProjection(delta);
                 this.mixTargetDelta = (latest) => {
                     const progress = latest / 1000;
-                    mixAxisDelta(targetDelta.x, delta.x, progress);
-                    mixAxisDelta(targetDelta.y, delta.y, progress);
+                    const point = interpolate?.(progress);
+                    if (point) {
+                        targetDelta.x.translate = point.x;
+                        targetDelta.x.scale = mixNumber$1(delta.x.scale, 1, progress);
+                        targetDelta.x.origin = delta.x.origin;
+                        targetDelta.x.originPoint = delta.x.originPoint;
+                        targetDelta.y.translate = point.y;
+                        targetDelta.y.scale = mixNumber$1(delta.y.scale, 1, progress);
+                        targetDelta.y.origin = delta.y.origin;
+                        targetDelta.y.originPoint = delta.y.originPoint;
+                    }
+                    else {
+                        mixAxisDeltaLinear(targetDelta.x, delta.x, progress);
+                        mixAxisDeltaLinear(targetDelta.y, delta.y, progress);
+                    }
                     this.setTargetDelta(targetDelta);
                     if (this.relativeTarget &&
                         this.relativeTargetOrigin &&
@@ -9154,6 +9878,13 @@
                         this.animationValues = mixedValues;
                         mixValues(mixedValues, snapshotLatestValues, this.latestValues, progress, shouldCrossfadeOpacity, isOnlyMember);
                     }
+                    if (point && point.rotate !== undefined) {
+                        // Dedicated `pathRotation` channel, not `rotate`, so an
+                        // animating `rotate` is composed with, never clobbered.
+                        if (!this.animationValues)
+                            this.animationValues = mixedValues;
+                        this.animationValues.pathRotation = point.rotate;
+                    }
                     this.root.scheduleUpdateProjection();
                     this.scheduleRender();
                     this.animationProgress = progress;
@@ -9175,7 +9906,6 @@
                  */
                 this.pendingAnimation = frame.update(() => {
                     globalProjectionState.hasAnimatedSinceResize = true;
-                    activeAnimations.layout++;
                     this.motionValue || (this.motionValue = motionValue(0));
                     this.motionValue.jump(0, false);
                     this.currentAnimation = animateSingleValue(this.motionValue, [0, 1000], {
@@ -9186,11 +9916,7 @@
                             this.mixTargetDelta(latest);
                             options.onUpdate && options.onUpdate(latest);
                         },
-                        onStop: () => {
-                            activeAnimations.layout--;
-                        },
                         onComplete: () => {
-                            activeAnimations.layout--;
                             options.onComplete && options.onComplete();
                             this.completeAnimation();
                         },
@@ -9674,7 +10400,7 @@
     function removeLeadSnapshots(stack) {
         stack.removeLeadSnapshot();
     }
-    function mixAxisDelta(output, delta, p) {
+    function mixAxisDeltaLinear(output, delta, p) {
         output.translate = mixNumber$1(delta.translate, 0, p);
         output.scale = mixNumber$1(delta.scale, 1, p);
         output.origin = delta.origin;
@@ -9705,7 +10431,7 @@
      */
     const roundPoint = userAgentContains("applewebkit/") && !userAgentContains("chrome/")
         ? Math.round
-        : noop$1;
+        : noop;
     function roundAxis(axis) {
         // Round to the nearest .5 pixels to support subpixel layouts
         axis.min = roundPoint(axis.min);
@@ -9779,39 +10505,221 @@
         checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"),
     });
 
-    const layoutSelector = "[data-layout], [data-layout-id]";
-    const noop = () => { };
-    function snapshotFromTarget(projection) {
-        const target = projection.targetWithTransforms || projection.target;
-        if (!target)
-            return undefined;
-        const measuredBox = createBox();
-        const layoutBox = createBox();
-        copyBoxInto(measuredBox, target);
-        copyBoxInto(layoutBox, target);
+    const layoutSelector = "[data-layout],[data-layout-id]";
+    /**
+     * All imperatively-created projection nodes live in one persistent tree,
+     * shared across animateLayout() calls (and with any React-created nodes,
+     * via the singleton document root). Keyed by element for reuse.
+     */
+    const layoutNodes = new WeakMap();
+    /**
+     * Builders created within the same synchronous tick are flushed together
+     * as a single "commit": every node is snapshotted before any updateDom
+     * runs, mirroring React batching renders from different parts of the tree.
+     */
+    let pendingBuilders;
+    function collectLayoutElements(scope) {
+        const elements = [];
+        if (scope instanceof HTMLElement && scope.matches(layoutSelector)) {
+            elements.push(scope);
+        }
+        scope.querySelectorAll(layoutSelector).forEach((element) => {
+            if (element instanceof HTMLElement)
+                elements.push(element);
+        });
+        return elements;
+    }
+    /**
+     * Process any work scheduled on the frameloop now. A previous animation
+     * may have been seeked while paused (controls.time = x) without a frame
+     * having rendered it - we must materialise that state into the DOM
+     * before taking snapshots.
+     */
+    function flushPendingFrame() {
+        if (frameData.isProcessing)
+            return;
+        const now = time.now();
+        frameData.delta = clamp(0, 1000 / 60, now - frameData.timestamp);
+        frameData.timestamp = now;
+        frameData.isProcessing = true;
+        frameSteps.update.process(frameData);
+        frameSteps.preRender.process(frameData);
+        frameSteps.render.process(frameData);
+        frameData.isProcessing = false;
+    }
+    function getProjectionParent(element) {
+        let ancestor = element.parentElement;
+        while (ancestor) {
+            const node = layoutNodes.get(ancestor);
+            if (node && node.instance)
+                return node;
+            ancestor = ancestor.parentElement;
+        }
+        return undefined;
+    }
+    function createVisualElement() {
+        return new HTMLVisualElement({
+            props: {},
+            presenceContext: null,
+            visualState: {
+                latestValues: {},
+                renderState: {
+                    transform: {},
+                    transformOrigin: {},
+                    style: {},
+                    vars: {},
+                },
+            },
+        }, { allowProjection: true });
+    }
+    function readNodeOptions(element, transition) {
+        const layoutAttr = element.getAttribute("data-layout");
+        const layoutId = element.getAttribute("data-layout-id") ?? undefined;
         return {
-            animationId: projection.root?.animationId ?? 0,
-            measuredBox,
-            layoutBox,
-            latestValues: projection.animationValues || projection.latestValues || {},
-            source: projection.id,
+            layoutId,
+            layout: layoutAttr !== null ? true : undefined,
+            animationType: (!layoutAttr || layoutAttr === "true"
+                ? "both"
+                : layoutAttr),
+            transition,
+        };
+    }
+    function prepareNode(element, transition) {
+        let node = layoutNodes.get(element);
+        if (!node) {
+            let visualElement = visualElementStore.get(element);
+            if (!visualElement)
+                visualElement = createVisualElement();
+            /**
+             * A first-time element may carry a projection transform in its
+             * inline style (e.g. it was cloned from an element mid-animation).
+             * That transform isn't tracked in latestValues so the engine can't
+             * reset it before measuring - clear it now so the first layout
+             * measurement isn't inflated.
+             */
+            if (element.style.transform &&
+                !hasTransform(visualElement.latestValues)) {
+                element.style.transform = "";
+            }
+            node = new HTMLProjectionNode(visualElement.latestValues, getProjectionParent(element));
+            visualElement.projection = node;
+            node.setOptions({
+                ...readNodeOptions(element, transition),
+                visualElement,
+            });
+            node.mount(element);
+            layoutNodes.set(element, node);
+        }
+        else {
+            node.setOptions(readNodeOptions(element, transition));
+        }
+        node.isPresent = true;
+        if (node.options.onExitComplete) {
+            node.setOptions({ onExitComplete: undefined });
+        }
+        return node;
+    }
+    function sortDocumentOrder(elements) {
+        return [...elements].sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+    }
+    function dropNode(element, node) {
+        node.setOptions({ onExitComplete: undefined });
+        /**
+         * Stop any lingering animation so it can't leak into future updates.
+         * A follow node can share its currentAnimation with a surviving lead
+         * (via resumingFrom), in which case it isn't ours to stop.
+         */
+        const stack = node.getStack();
+        if (!stack || node.isLead())
+            node.currentAnimation?.stop();
+        node.unmount();
+        layoutNodes.delete(element);
+    }
+    function flushPendingBuilders() {
+        const builders = pendingBuilders;
+        pendingBuilders = undefined;
+        flushPendingFrame();
+        /**
+         * Discover and mount every node across all builders before snapshotting
+         * any of them. Mounting during an active update flags isLayoutDirty,
+         * which would make that node's own willUpdate skip its snapshot.
+         * Document order guarantees ancestors mount before descendants, even
+         * when they're discovered by different builders.
+         */
+        const targets = new Map();
+        for (const builder of builders) {
+            for (const element of builder.collectTargets()) {
+                const owners = targets.get(element);
+                owners ? owners.push(builder) : targets.set(element, [builder]);
+            }
+        }
+        const union = new Map();
+        for (const element of sortDocumentOrder(targets.keys())) {
+            const owners = targets.get(element);
+            const node = prepareNode(element, owners[owners.length - 1].transitionFor(element));
+            for (const owner of owners)
+                owner.adopt(element, node);
+            union.set(element, node);
+        }
+        union.forEach((node) => {
+            node.isLayoutDirty = false;
+            node.willUpdate();
+        });
+        const updatePromises = [];
+        for (const builder of builders) {
+            const result = builder.runUpdate();
+            if (result)
+                updatePromises.push(result);
+        }
+        const commit = () => {
+            /**
+             * Process all additions before any removals so that, even across
+             * builders, a removed member knows whether a replacement with the
+             * same layoutId was added in this commit.
+             */
+            const newMemberIds = new Set();
+            for (const builder of builders) {
+                builder.reconcileAdditions(newMemberIds);
+            }
+            for (const builder of builders) {
+                builder.reconcileRemovals(newMemberIds);
+            }
+            let root;
+            union.forEach((node) => (root || (root = node.root)));
+            for (const builder of builders)
+                root || (root = builder.getRoot());
+            root?.didUpdate();
+            /**
+             * The root flushes the update on a microtask, synchronously
+             * processing the frame that creates the layout animations. Collect
+             * them in a later microtask step of the same pass.
+             */
+            microtask.render(() => {
+                for (const builder of builders)
+                    builder.finalize();
+            });
         };
+        updatePromises.length ? Promise.all(updatePromises).then(commit) : commit();
     }
     class LayoutAnimationBuilder {
         constructor(scope, updateDom, defaultOptions) {
-            this.sharedTransitions = new Map();
-            this.notifyReady = noop;
-            this.rejectReady = noop;
             this.scope = scope;
             this.updateDom = updateDom;
             this.defaultOptions = defaultOptions;
+            this.sharedTransitions = new Map();
+            this.notifyReady = () => { };
+            this.rejectReady = () => { };
+            this.tracked = new Map();
+            this.restorePoints = new Map();
             this.readyPromise = new Promise((resolve, reject) => {
                 this.notifyReady = resolve;
                 this.rejectReady = reject;
             });
-            frame.postRender(() => {
-                this.start().then(this.notifyReady).catch(this.rejectReady);
-            });
+            if (!pendingBuilders) {
+                pendingBuilders = [];
+                queueMicrotask(flushPendingBuilders);
+            }
+            pendingBuilders.push(this);
         }
         shared(id, transition) {
             this.sharedTransitions.set(id, transition);
@@ -9820,114 +10728,107 @@
         then(resolve, reject) {
             return this.readyPromise.then(resolve, reject);
         }
-        async start() {
-            const beforeElements = collectLayoutElements(this.scope);
-            const beforeRecords = this.buildRecords(beforeElements);
-            beforeRecords.forEach(({ projection }) => {
-                const hasCurrentAnimation = Boolean(projection.currentAnimation);
-                const isSharedLayout = Boolean(projection.options.layoutId);
-                if (hasCurrentAnimation && isSharedLayout) {
-                    const snapshot = snapshotFromTarget(projection);
-                    if (snapshot) {
-                        projection.snapshot = snapshot;
-                    }
-                    else if (projection.snapshot) {
-                        projection.snapshot = undefined;
-                    }
-                }
-                else if (projection.snapshot &&
-                    (projection.currentAnimation || projection.isProjecting())) {
-                    projection.snapshot = undefined;
-                }
-                projection.isPresent = true;
-                projection.willUpdate();
+        transitionFor(element) {
+            const layoutId = element.getAttribute("data-layout-id");
+            return ((layoutId && this.sharedTransitions.get(layoutId)) ||
+                this.defaultOptions);
+        }
+        adopt(element, node) {
+            this.tracked.set(element, node);
+            this.restorePoints.set(element, {
+                parent: element.parentElement,
+                next: element.nextSibling,
             });
-            await this.updateDom();
-            const afterElements = collectLayoutElements(this.scope);
-            const afterRecords = this.buildRecords(afterElements);
-            this.handleExitingElements(beforeRecords, afterRecords);
-            afterRecords.forEach(({ projection }) => {
-                const instance = projection.instance;
-                const resumeFromInstance = projection.resumeFrom
-                    ?.instance;
-                if (!instance || !resumeFromInstance)
-                    return;
-                if (!("style" in instance))
-                    return;
-                const currentTransform = instance.style.transform;
-                const resumeFromTransform = resumeFromInstance.style.transform;
-                if (currentTransform &&
-                    resumeFromTransform &&
-                    currentTransform === resumeFromTransform) {
-                    instance.style.transform = "";
-                    instance.style.transformOrigin = "";
+        }
+        collectTargets() {
+            return collectLayoutElements(this.scope);
+        }
+        runUpdate() {
+            try {
+                const result = this.updateDom();
+                if (result && typeof result.then === "function") {
+                    return result.then(undefined, (error) => {
+                        this.updateError = error;
+                    });
                 }
-            });
-            afterRecords.forEach(({ projection }) => {
-                projection.isPresent = true;
-            });
-            const root = getProjectionRoot(afterRecords, beforeRecords);
-            root?.didUpdate();
-            await new Promise((resolve) => {
-                frame.postRender(() => resolve());
-            });
-            const animations = collectAnimations(afterRecords);
-            const animation = new GroupAnimation(animations);
-            return animation;
+            }
+            catch (error) {
+                this.updateError = error;
+            }
+            return undefined;
         }
-        buildRecords(elements) {
-            const records = [];
-            const recordMap = new Map();
-            for (const element of elements) {
-                const parentRecord = findParentRecord(element, recordMap, this.scope);
-                const { layout, layoutId } = readLayoutAttributes(element);
-                const override = layoutId
-                    ? this.sharedTransitions.get(layoutId)
-                    : undefined;
-                const transition = override || this.defaultOptions;
-                const record = getOrCreateRecord(element, parentRecord?.projection, {
-                    layout,
-                    layoutId,
-                    animationType: typeof layout === "string" ? layout : "both",
-                    transition: transition,
-                });
-                recordMap.set(element, record);
-                records.push(record);
+        reconcileAdditions(newMemberIds) {
+            for (const element of collectLayoutElements(this.scope)) {
+                if (this.tracked.has(element))
+                    continue;
+                const node = prepareNode(element, this.transitionFor(element));
+                this.adopt(element, node);
+                node.options.layoutId && newMemberIds.add(node.options.layoutId);
             }
-            return records;
         }
-        handleExitingElements(beforeRecords, afterRecords) {
-            const afterElementsSet = new Set(afterRecords.map((record) => record.element));
-            beforeRecords.forEach((record) => {
-                if (afterElementsSet.has(record.element))
+        reconcileRemovals(newMemberIds) {
+            this.tracked.forEach((node, element) => {
+                if (element.isConnected)
                     return;
-                // For shared layout elements, relegate to set up resumeFrom
-                // so the remaining element animates from this position
-                if (record.projection.options.layoutId) {
-                    record.projection.isPresent = false;
-                    record.projection.relegate();
-                }
-                record.visualElement.unmount();
-                visualElementStore.delete(record.element);
+                const restore = this.restorePoints.get(element);
+                this.restorePoints.delete(element);
+                const { layoutId } = node.options;
+                const stack = node.getStack();
+                const hasSurvivor = stack &&
+                    stack.members.some((member) => member !== node &&
+                        member.instance
+                            ?.isConnected);
+                /**
+                 * A removed lead with a surviving stack member - and no
+                 * replacement member added this commit - runs an exit
+                 * crossfade: restore the element to its old position in the
+                 * DOM, relegate it and let the survivor take over. It's
+                 * removed again once the animation completes.
+                 */
+                if (layoutId &&
+                    node.isLead() &&
+                    hasSurvivor &&
+                    !newMemberIds.has(layoutId)) {
+                    if (restore && restore.parent.isConnected) {
+                        restore.parent.insertBefore(element, restore.next && restore.next.parentNode === restore.parent
+                            ? restore.next
+                            : null);
+                        node.isPresent = false;
+                        node.setOptions({
+                            onExitComplete: () => {
+                                element.remove();
+                                dropNode(element, node);
+                            },
+                        });
+                        if (node.relegate())
+                            return;
+                        element.remove();
+                    }
+                }
+                dropNode(element, node);
+                this.tracked.delete(element);
             });
-            // Clear resumeFrom on EXISTING nodes that point to unmounted projections
-            // This prevents crossfade animation when the source element was removed entirely
-            // But preserve resumeFrom for NEW nodes so they can animate from the old position
-            // Also preserve resumeFrom for lead nodes that were just promoted via relegate
-            const beforeElementsSet = new Set(beforeRecords.map((record) => record.element));
-            afterRecords.forEach(({ element, projection }) => {
-                if (beforeElementsSet.has(element) &&
-                    projection.resumeFrom &&
-                    !projection.resumeFrom.instance &&
-                    !projection.isLead()) {
-                    projection.resumeFrom = undefined;
-                    projection.snapshot = undefined;
+        }
+        getRoot() {
+            let root;
+            this.tracked.forEach((node) => (root || (root = node.root)));
+            return root;
+        }
+        finalize() {
+            if (this.updateError) {
+                this.rejectReady(this.updateError);
+                return;
+            }
+            const animations = new Set();
+            this.tracked.forEach((node) => {
+                if (node.instance && node.currentAnimation) {
+                    animations.add(node.currentAnimation);
                 }
             });
+            this.notifyReady(new GroupAnimation([...animations]));
         }
     }
     function parseAnimateLayoutArgs(scopeOrUpdateDom, updateDomOrOptions, options) {
-        // animateLayout(updateDom)
         if (typeof scopeOrUpdateDom === "function") {
             return {
                 scope: document,
@@ -9935,107 +10836,15 @@
                 defaultOptions: updateDomOrOptions,
             };
         }
-        // animateLayout(scope, updateDom, options?)
-        const elements = resolveElements(scopeOrUpdateDom);
-        const scope = elements[0] || document;
+        const scope = scopeOrUpdateDom instanceof Document
+            ? scopeOrUpdateDom
+            : resolveElements(scopeOrUpdateDom)[0] ?? document;
         return {
             scope,
             updateDom: updateDomOrOptions,
             defaultOptions: options,
         };
     }
-    function collectLayoutElements(scope) {
-        const elements = Array.from(scope.querySelectorAll(layoutSelector));
-        if (scope instanceof Element && scope.matches(layoutSelector)) {
-            if (!elements.includes(scope)) {
-                elements.unshift(scope);
-            }
-        }
-        return elements;
-    }
-    function readLayoutAttributes(element) {
-        const layoutId = element.getAttribute("data-layout-id") || undefined;
-        const rawLayout = element.getAttribute("data-layout");
-        let layout;
-        if (rawLayout === "" || rawLayout === "true") {
-            layout = true;
-        }
-        else if (rawLayout) {
-            layout = rawLayout;
-        }
-        return {
-            layout,
-            layoutId,
-        };
-    }
-    function createVisualState() {
-        return {
-            latestValues: {},
-            renderState: {
-                transform: {},
-                transformOrigin: {},
-                style: {},
-                vars: {},
-            },
-        };
-    }
-    function getOrCreateRecord(element, parentProjection, projectionOptions) {
-        const existing = visualElementStore.get(element);
-        const visualElement = existing ??
-            new HTMLVisualElement({
-                props: {},
-                presenceContext: null,
-                visualState: createVisualState(),
-            }, { allowProjection: true });
-        if (!existing || !visualElement.projection) {
-            visualElement.projection = new HTMLProjectionNode(visualElement.latestValues, parentProjection);
-        }
-        visualElement.projection.setOptions({
-            ...projectionOptions,
-            visualElement,
-        });
-        if (!visualElement.current) {
-            visualElement.mount(element);
-        }
-        else if (!visualElement.projection.instance) {
-            // Mount projection if VisualElement is already mounted but projection isn't
-            // This happens when animate() was called before animateLayout()
-            visualElement.projection.mount(element);
-        }
-        if (!existing) {
-            visualElementStore.set(element, visualElement);
-        }
-        return {
-            element,
-            visualElement,
-            projection: visualElement.projection,
-        };
-    }
-    function findParentRecord(element, recordMap, scope) {
-        let parent = element.parentElement;
-        while (parent) {
-            const record = recordMap.get(parent);
-            if (record)
-                return record;
-            if (parent === scope)
-                break;
-            parent = parent.parentElement;
-        }
-        return undefined;
-    }
-    function getProjectionRoot(afterRecords, beforeRecords) {
-        const record = afterRecords[0] || beforeRecords[0];
-        return record?.projection.root;
-    }
-    function collectAnimations(afterRecords) {
-        const animations = new Set();
-        afterRecords.forEach((record) => {
-            const animation = record.projection.currentAnimation;
-            if (animation)
-                animations.add(animation);
-        });
-        return Array.from(animations);
-    }
 
     /**
      * @deprecated
@@ -11036,7 +11845,7 @@
     const getEventTarget = (element) => element === document.scrollingElement ? window : element;
     function scrollInfo(onScroll, { container = document.scrollingElement, trackContentSize = false, ...options } = {}) {
         if (!container)
-            return noop$1;
+            return noop;
         let containerHandlers = onScrollHandlers.get(container);
         /**
          * Get the onScroll handlers for this container.
@@ -11320,7 +12129,7 @@
 
     function scroll(onScroll, { axis = "y", container = document.scrollingElement, ...options } = {}) {
         if (!container)
-            return noop$1;
+            return noop;
         const optionsWithDefaults = { axis, container, ...options };
         return typeof onScroll === "function"
             ? attachToFunction(onScroll, optionsWithDefaults)
@@ -11400,7 +12209,6 @@
     exports.ViewTransitionBuilder = ViewTransitionBuilder;
     exports.VisualElement = VisualElement;
     exports.acceleratedValues = acceleratedValues;
-    exports.activeAnimations = activeAnimations;
     exports.addAttrValue = addAttrValue;
     exports.addDomEvent = addDomEvent;
     exports.addScaleCorrector = addScaleCorrector;
@@ -11426,6 +12234,7 @@
     exports.applyPointDelta = applyPointDelta;
     exports.applyPxDefaults = applyPxDefaults;
     exports.applyTreeDeltas = applyTreeDeltas;
+    exports.arc = arc;
     exports.aspectRatio = aspectRatio;
     exports.attachFollow = attachFollow;
     exports.attachSpring = attachSpring;
@@ -11598,7 +12407,7 @@
     exports.motionValue = motionValue;
     exports.moveItem = moveItem;
     exports.nodeGroup = nodeGroup;
-    exports.noop = noop$1;
+    exports.noop = noop;
     exports.number = number;
     exports.numberValueTypes = numberValueTypes;
     exports.observeTimeline = observeTimeline;