motion 12.27.0-alpha.6 → 12.27.0

package/dist/motion.dev.js

@@ -2963,6 +2963,20 @@
         return map;
     }
 
+    function calcChildStagger(children, child, delayChildren, staggerChildren = 0, staggerDirection = 1) {
+        const index = Array.from(children)
+            .sort((a, b) => a.sortNodePosition(b))
+            .indexOf(child);
+        const numChildren = children.size;
+        const maxStaggerDuration = (numChildren - 1) * staggerChildren;
+        const delayIsFunction = typeof delayChildren === "function";
+        return delayIsFunction
+            ? delayChildren(index, numChildren)
+            : staggerDirection === 1
+                ? index * staggerChildren
+                : maxStaggerDuration - index * staggerChildren;
+    }
+
     /**
      * Parse Framer's special CSS variable format into a CSS token and a fallback.
      *
@@ -3000,12 +3014,6 @@
             : fallback;
     }
 
-    function getValueTransition$1(transition, key) {
-        return (transition?.[key] ??
-            transition?.["default"] ??
-            transition);
-    }
-
     const underDampedSpring = {
         type: "spring",
         stiffness: 500,
@@ -3043,15 +3051,6 @@
         return ease;
     };
 
-    /**
-     * 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({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
-        return !!Object.keys(transition).length;
-    }
-
     const isNotNull = (value) => value !== null;
     function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
         const resolvedKeyframes = keyframes.filter(isNotNull);
@@ -3063,18 +3062,19 @@
             : finalKeyframe;
     }
 
-    function calcChildStagger(children, child, delayChildren, staggerChildren = 0, staggerDirection = 1) {
-        const index = Array.from(children)
-            .sort((a, b) => a.sortNodePosition(b))
-            .indexOf(child);
-        const numChildren = children.size;
-        const maxStaggerDuration = (numChildren - 1) * staggerChildren;
-        const delayIsFunction = typeof delayChildren === "function";
-        return delayIsFunction
-            ? delayChildren(index, numChildren)
-            : staggerDirection === 1
-                ? index * staggerChildren
-                : maxStaggerDuration - index * staggerChildren;
+    function getValueTransition$1(transition, key) {
+        return (transition?.[key] ??
+            transition?.["default"] ??
+            transition);
+    }
+
+    /**
+     * 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({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
+        return !!Object.keys(transition).length;
     }
 
     const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
@@ -3168,6 +3168,46 @@
             : 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",
@@ -3496,46 +3536,6 @@
         return new MotionValue(init, 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 isKeyframesTarget = (v) => {
         return Array.isArray(v);
     };
@@ -6066,19 +6066,6 @@
         }
     }
 
-    /**
-     * Feature base class for extending VisualElement functionality.
-     * Features are plugins that can be mounted/unmounted to add behavior
-     * like gestures, animations, or layout tracking.
-     */
-    class Feature {
-        constructor(node) {
-            this.isMounted = false;
-            this.node = node;
-        }
-        update() { }
-    }
-
     class DOMVisualElement extends VisualElement {
         constructor() {
             super(...arguments);
@@ -6116,6 +6103,19 @@
         }
     }
 
+    /**
+     * Feature base class for extending VisualElement functionality.
+     * Features are plugins that can be mounted/unmounted to add behavior
+     * like gestures, animations, or layout tracking.
+     */
+    class Feature {
+        constructor(node) {
+            this.isMounted = false;
+            this.node = node;
+        }
+        update() { }
+    }
+
     /**
      * Bounding boxes tend to be defined as top, left, right, bottom. For various operations
      * it's easier to consider each axis individually. This function returns a bounding box
@@ -6584,6 +6584,43 @@
         }
     }
 
+    function isObjectKey(key, object) {
+        return key in object;
+    }
+    class ObjectVisualElement extends VisualElement {
+        constructor() {
+            super(...arguments);
+            this.type = "object";
+        }
+        readValueFromInstance(instance, key) {
+            if (isObjectKey(key, instance)) {
+                const value = instance[key];
+                if (typeof value === "string" || typeof value === "number") {
+                    return value;
+                }
+            }
+            return undefined;
+        }
+        getBaseTargetFromProps() {
+            return undefined;
+        }
+        removeValueFromRenderState(key, renderState) {
+            delete renderState.output[key];
+        }
+        measureInstanceViewportBox() {
+            return createBox();
+        }
+        build(renderState, latestValues) {
+            Object.assign(renderState.output, latestValues);
+        }
+        renderInstance(instance, { output }) {
+            Object.assign(instance, output);
+        }
+        sortInstanceNodePosition() {
+            return 0;
+        }
+    }
+
     const dashKeys = {
         offset: "stroke-dashoffset",
         array: "stroke-dasharray",
@@ -6766,43 +6803,6 @@
         }
     }
 
-    function isObjectKey(key, object) {
-        return key in object;
-    }
-    class ObjectVisualElement extends VisualElement {
-        constructor() {
-            super(...arguments);
-            this.type = "object";
-        }
-        readValueFromInstance(instance, key) {
-            if (isObjectKey(key, instance)) {
-                const value = instance[key];
-                if (typeof value === "string" || typeof value === "number") {
-                    return value;
-                }
-            }
-            return undefined;
-        }
-        getBaseTargetFromProps() {
-            return undefined;
-        }
-        removeValueFromRenderState(key, renderState) {
-            delete renderState.output[key];
-        }
-        measureInstanceViewportBox() {
-            return createBox();
-        }
-        build(renderState, latestValues) {
-            Object.assign(renderState.output, latestValues);
-        }
-        renderInstance(instance, { output }) {
-            Object.assign(instance, output);
-        }
-        sortInstanceNodePosition() {
-            return 0;
-        }
-    }
-
     const numVariantProps = variantProps.length;
     /**
      * Get variant context from a visual element's parent chain.
@@ -7197,6 +7197,36 @@
         };
     }
 
+    /**
+     * Reset an axis to the provided origin box.
+     *
+     * This is a mutative operation.
+     */
+    function copyAxisInto(axis, originAxis) {
+        axis.min = originAxis.min;
+        axis.max = originAxis.max;
+    }
+    /**
+     * Reset a box to the provided origin box.
+     *
+     * This is a mutative operation.
+     */
+    function copyBoxInto(box, originBox) {
+        copyAxisInto(box.x, originBox.x);
+        copyAxisInto(box.y, originBox.y);
+    }
+    /**
+     * Reset a delta to the provided origin box.
+     *
+     * This is a mutative operation.
+     */
+    function copyAxisDeltaInto(delta, originDelta) {
+        delta.translate = originDelta.translate;
+        delta.scale = originDelta.scale;
+        delta.originPoint = originDelta.originPoint;
+        delta.origin = originDelta.origin;
+    }
+
     const SCALE_PRECISION = 0.0001;
     const SCALE_MIN = 1 - SCALE_PRECISION;
     const SCALE_MAX = 1 + SCALE_PRECISION;
@@ -7295,36 +7325,6 @@
         removeAxisTransforms(box.y, transforms, yKeys, originBox ? originBox.y : undefined, sourceBox ? sourceBox.y : undefined);
     }
 
-    /**
-     * Reset an axis to the provided origin box.
-     *
-     * This is a mutative operation.
-     */
-    function copyAxisInto(axis, originAxis) {
-        axis.min = originAxis.min;
-        axis.max = originAxis.max;
-    }
-    /**
-     * Reset a box to the provided origin box.
-     *
-     * This is a mutative operation.
-     */
-    function copyBoxInto(box, originBox) {
-        copyAxisInto(box.x, originBox.x);
-        copyAxisInto(box.y, originBox.y);
-    }
-    /**
-     * Reset a delta to the provided origin box.
-     *
-     * This is a mutative operation.
-     */
-    function copyAxisDeltaInto(delta, originDelta) {
-        delta.translate = originDelta.translate;
-        delta.scale = originDelta.scale;
-        delta.originPoint = originDelta.originPoint;
-        delta.origin = originDelta.origin;
-    }
-
     function isAxisDeltaZero(delta) {
         return delta.translate === 0 && delta.scale === 1;
     }
@@ -7466,23 +7466,10 @@
         };
     }
 
-    /**
-     * Timeout defined in ms
-     */
-    function delay(callback, timeout) {
-        const start = time.now();
-        const checkElapsed = ({ timestamp }) => {
-            const elapsed = timestamp - start;
-            if (elapsed >= timeout) {
-                cancelFrame(checkElapsed);
-                callback(elapsed - timeout);
-            }
-        };
-        frame.setup(checkElapsed, true);
-        return () => cancelFrame(checkElapsed);
-    }
-    function delayInSeconds(callback, timeout) {
-        return delay(callback, secondsToMilliseconds(timeout));
+    function animateSingleValue(value, keyframes, options) {
+        const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
+        motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options));
+        return motionValue$1.animation;
     }
 
     function addDomEvent(target, eventName, handler, options = { passive: true }) {
@@ -7490,19 +7477,6 @@
         return () => target.removeEventListener(eventName, handler);
     }
 
-    /**
-     * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
-     */
-    function resolveMotionValue(value) {
-        return isMotionValue(value) ? value.get() : value;
-    }
-
-    function animateSingleValue(value, keyframes, options) {
-        const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
-        motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options));
-        return motionValue$1.animation;
-    }
-
     const compareByDepth = (a, b) => a.depth - b.depth;
 
     class FlatTree {
@@ -7525,6 +7499,32 @@
         }
     }
 
+    /**
+     * Timeout defined in ms
+     */
+    function delay(callback, timeout) {
+        const start = time.now();
+        const checkElapsed = ({ timestamp }) => {
+            const elapsed = timestamp - start;
+            if (elapsed >= timeout) {
+                cancelFrame(checkElapsed);
+                callback(elapsed - timeout);
+            }
+        };
+        frame.setup(checkElapsed, true);
+        return () => cancelFrame(checkElapsed);
+    }
+    function delayInSeconds(callback, timeout) {
+        return delay(callback, secondsToMilliseconds(timeout));
+    }
+
+    /**
+     * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
+     */
+    function resolveMotionValue(value) {
+        return isMotionValue(value) ? value.get() : value;
+    }
+
     class NodeStack {
         constructor() {
             this.members = [];
@@ -7902,13 +7902,6 @@
                             this.relativeTarget = undefined;
                             return;
                         }
-                        /**
-                         * Check if this is a follow element in a crossfade (exiting element
-                         * whose lead has resumeFrom pointing to it). These elements should
-                         * NOT create their own animation - they get the lead's animation via
-                         * resumingFrom.currentAnimation in startAnimation().
-                         */
-                        const isFollowInCrossfade = this.isPresent === false && !this.isLead();
                         // TODO: Check here if an animation exists
                         const layoutTransition = this.options.transition ||
                             visualElement.getDefaultTransition() ||
@@ -7932,51 +7925,43 @@
                          * relative to its parent has indeed changed. So here we check for that.
                          */
                         const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeLayoutChanged;
-                        /**
-                         * Skip animation handling for follow elements in a crossfade.
-                         * These elements get the lead's animation via resumingFrom.currentAnimation
-                         * in startAnimation(), so they shouldn't create their own animation.
-                         * They also shouldn't call finishAnimation(), which would reset their state.
-                         */
-                        if (!isFollowInCrossfade) {
-                            if (this.options.layoutRoot ||
-                                this.resumeFrom ||
-                                hasOnlyRelativeTargetChanged ||
-                                (hasLayoutChanged &&
-                                    (hasTargetChanged || !this.currentAnimation))) {
-                                if (this.resumeFrom) {
-                                    this.resumingFrom = this.resumeFrom;
-                                    this.resumingFrom.resumingFrom = undefined;
-                                }
-                                const animationOptions = {
-                                    ...getValueTransition$1(layoutTransition, "layout"),
-                                    onPlay: onLayoutAnimationStart,
-                                    onComplete: onLayoutAnimationComplete,
-                                };
-                                if (visualElement.shouldReduceMotion ||
-                                    this.options.layoutRoot) {
-                                    animationOptions.delay = 0;
-                                    animationOptions.type = false;
-                                }
-                                this.startAnimation(animationOptions);
-                                /**
-                                 * Set animation origin after starting animation to avoid layout jump
-                                 * caused by stopping previous layout animation
-                                 */
-                                this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
+                        if (this.options.layoutRoot ||
+                            this.resumeFrom ||
+                            hasOnlyRelativeTargetChanged ||
+                            (hasLayoutChanged &&
+                                (hasTargetChanged || !this.currentAnimation))) {
+                            if (this.resumeFrom) {
+                                this.resumingFrom = this.resumeFrom;
+                                this.resumingFrom.resumingFrom = undefined;
                             }
-                            else {
-                                /**
-                                 * If the layout hasn't changed and we have an animation that hasn't started yet,
-                                 * finish it immediately. Otherwise it will be animating from a location
-                                 * that was probably never committed to screen and look like a jumpy box.
-                                 */
-                                if (!hasLayoutChanged) {
-                                    finishAnimation(this);
-                                }
-                                if (this.isLead() && this.options.onExitComplete) {
-                                    this.options.onExitComplete();
-                                }
+                            const animationOptions = {
+                                ...getValueTransition$1(layoutTransition, "layout"),
+                                onPlay: onLayoutAnimationStart,
+                                onComplete: onLayoutAnimationComplete,
+                            };
+                            if (visualElement.shouldReduceMotion ||
+                                this.options.layoutRoot) {
+                                animationOptions.delay = 0;
+                                animationOptions.type = false;
+                            }
+                            this.startAnimation(animationOptions);
+                            /**
+                             * Set animation origin after starting animation to avoid layout jump
+                             * caused by stopping previous layout animation
+                             */
+                            this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
+                        }
+                        else {
+                            /**
+                             * If the layout hasn't changed and we have an animation that hasn't started yet,
+                             * finish it immediately. Otherwise it will be animating from a location
+                             * that was probably never committed to screen and look like a jumpy box.
+                             */
+                            if (!hasLayoutChanged) {
+                                finishAnimation(this);
+                            }
+                            if (this.isLead() && this.options.onExitComplete) {
+                                this.options.onExitComplete();
                             }
                         }
                         this.targetLayout = newLayout;
@@ -9261,29 +9246,6 @@
         checkIsScrollRoot: () => true,
     });
 
-    const rootProjectionNode = {
-        current: undefined,
-    };
-    const HTMLProjectionNode = createProjectionNode$1({
-        measureScroll: (instance) => ({
-            x: instance.scrollLeft,
-            y: instance.scrollTop,
-        }),
-        defaultParent: () => {
-            if (!rootProjectionNode.current) {
-                const documentNode = new DocumentProjectionNode({});
-                documentNode.mount(window);
-                documentNode.setOptions({ layoutScroll: true });
-                rootProjectionNode.current = documentNode;
-            }
-            return rootProjectionNode.current;
-        },
-        resetTransform: (instance, value) => {
-            instance.style.transform = value !== undefined ? value : "none";
-        },
-        checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"),
-    });
-
     const notify = (node) => !node.isLayoutDirty && node.willUpdate(false);
     function nodeGroup() {
         const nodes = new Set();
@@ -9307,6 +9269,29 @@
         };
     }
 
+    const rootProjectionNode = {
+        current: undefined,
+    };
+    const HTMLProjectionNode = createProjectionNode$1({
+        measureScroll: (instance) => ({
+            x: instance.scrollLeft,
+            y: instance.scrollTop,
+        }),
+        defaultParent: () => {
+            if (!rootProjectionNode.current) {
+                const documentNode = new DocumentProjectionNode({});
+                documentNode.mount(window);
+                documentNode.setOptions({ layoutScroll: true });
+                rootProjectionNode.current = documentNode;
+            }
+            return rootProjectionNode.current;
+        },
+        resetTransform: (instance, value) => {
+            instance.style.transform = value !== undefined ? value : "none";
+        },
+        checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"),
+    });
+
     const LAYOUT_SELECTOR = "[data-layout], [data-layout-id]";
     function getLayoutElements(scope) {
         const elements = Array.from(scope.querySelectorAll(LAYOUT_SELECTOR));
@@ -9323,79 +9308,6 @@
         return (element.hasAttribute("data-layout") ||
             element.hasAttribute("data-layout-id"));
     }
-    /**
-     * Track layout elements before mutation.
-     * Does NOT measure bounds - that's handled by the projection system via willUpdate().
-     */
-    function trackLayoutElements(scope) {
-        const elements = getLayoutElements(scope);
-        const records = new Map();
-        for (const element of elements) {
-            records.set(element, {
-                element,
-                parentElement: element.parentElement,
-                nextSibling: element.nextSibling,
-                layoutId: getLayoutId(element),
-            });
-        }
-        return records;
-    }
-    /**
-     * Compare before/after records to detect entering/exiting/persisting elements
-     */
-    function detectMutations(beforeRecords, scope) {
-        const afterElements = new Set(getLayoutElements(scope));
-        const beforeElements = new Set(beforeRecords.keys());
-        const entering = [];
-        const exiting = [];
-        const persisting = [];
-        const sharedEntering = new Map();
-        const sharedExiting = new Map();
-        const sharedPersisting = new Map();
-        // Find exiting elements (were in before, not in after)
-        for (const element of beforeElements) {
-            if (!afterElements.has(element)) {
-                const record = beforeRecords.get(element);
-                exiting.push({
-                    element,
-                    parentElement: record.parentElement,
-                    nextSibling: record.nextSibling,
-                });
-                if (record.layoutId) {
-                    sharedExiting.set(record.layoutId, element);
-                }
-            }
-        }
-        // Find entering and persisting elements
-        for (const element of afterElements) {
-            if (!beforeElements.has(element)) {
-                entering.push(element);
-                const layoutId = getLayoutId(element);
-                if (layoutId) {
-                    sharedEntering.set(layoutId, element);
-                }
-            }
-            else {
-                persisting.push(element);
-            }
-        }
-        // Find persisting elements that share a layoutId with exiting elements
-        // This handles the A -> AB -> A pattern where A persists and B exits
-        for (const element of persisting) {
-            const layoutId = getLayoutId(element);
-            if (layoutId && sharedExiting.has(layoutId)) {
-                sharedPersisting.set(layoutId, element);
-            }
-        }
-        return {
-            entering,
-            exiting,
-            persisting,
-            sharedEntering,
-            sharedExiting,
-            sharedPersisting,
-        };
-    }
 
     let scaleCorrectorAdded = false;
     /**
@@ -9573,9 +9485,7 @@
      * matching React's behavior where nodes persist for elements that remain in the DOM.
      */
     function cleanupProjectionTree(context, elementsToCleanup) {
-        const elementsToProcess = elementsToCleanup
-            ? [...context.nodes.entries()].filter(([el]) => elementsToCleanup.has(el))
-            : [...context.nodes.entries()];
+        const elementsToProcess = [...context.nodes.entries()];
         for (const [element, node] of elementsToProcess) {
             context.group.remove(node);
             node.unmount();
@@ -9603,12 +9513,8 @@
             // Queue execution on microtask to allow builder methods to be called
             queueMicrotask(() => this.execute());
         }
-        shared(layoutIdOrOptions, options) {
-            if (typeof layoutIdOrOptions === "string") {
-                this.sharedTransitions.set(layoutIdOrOptions, options);
-            }
-            // For now, we ignore default shared options as the projection system
-            // handles shared transitions automatically
+        shared(id, options) {
+            this.sharedTransitions.set(id, options);
             return this;
         }
         then(onfulfilled, onrejected) {
@@ -9618,132 +9524,56 @@
             if (this.executed)
                 return;
             this.executed = true;
-            const animations = [];
             let context;
-            try {
-                // Phase 1: Pre-mutation - Build projection tree and take snapshots
-                const existingElements = getLayoutElements(this.scope);
-                // Build projection tree for existing elements FIRST
-                // This allows the projection system to handle measurements correctly
-                if (existingElements.length > 0) {
-                    context = buildProjectionTree(existingElements, undefined, this.getBuildOptions());
-                    // Start update cycle
-                    context.root.startUpdate();
-                    // Call willUpdate on all nodes to capture snapshots via projection system
-                    // This handles transforms, scroll, etc. correctly
-                    for (const node of context.nodes.values()) {
-                        // Reset isLayoutDirty so willUpdate can take a snapshot.
-                        // When hasTreeAnimated is true on the global root, newly mounted nodes
-                        // get isLayoutDirty=true, which causes willUpdate to skip snapshot capture.
-                        node.isLayoutDirty = false;
-                        node.willUpdate();
-                    }
-                }
-                // Track DOM structure (parent, sibling) for detecting removals
-                // No bounds measurement here - projection system already handled that
-                const beforeRecords = trackLayoutElements(this.scope);
-                // Phase 2: Execute DOM update
-                this.updateDom();
-                // Phase 3: Post-mutation (Detect & Prepare)
-                const mutationResult = detectMutations(beforeRecords, this.scope);
-                // Determine which exiting elements should be reattached:
-                // Non-shared exiting elements (no layoutId or no matching entering/persisting element)
-                const exitingToReattach = mutationResult.exiting.filter(({ element }) => {
-                    const layoutId = element.getAttribute("data-layout-id");
-                    const isSharedWithEntering = layoutId && mutationResult.sharedEntering.has(layoutId);
-                    const isSharedWithPersisting = layoutId && mutationResult.sharedPersisting.has(layoutId);
-                    // Reattach if not a shared element
-                    return !isSharedWithEntering && !isSharedWithPersisting;
-                });
-                this.reattachExitingElements(exitingToReattach, context);
-                // Build projection nodes for entering elements
-                if (mutationResult.entering.length > 0) {
-                    context = buildProjectionTree(mutationResult.entering, context, this.getBuildOptions());
-                }
-                // Also ensure persisting elements have nodes if context didn't exist
-                if (!context && mutationResult.persisting.length > 0) {
-                    context = buildProjectionTree(mutationResult.persisting, undefined, this.getBuildOptions());
-                }
-                // Build set of shared exiting elements (they don't animate separately)
-                const sharedExitingElements = new Set();
-                for (const [layoutId, enteringElement] of mutationResult.sharedEntering) {
-                    const exitingElement = mutationResult.sharedExiting.get(layoutId);
-                    if (exitingElement) {
-                        sharedExitingElements.add(exitingElement);
-                        const exitingNode = context?.nodes.get(exitingElement);
-                        const enteringNode = context?.nodes.get(enteringElement);
-                        if (exitingNode && enteringNode) {
-                            // Remove exiting node from stack, no crossfade
-                            const stack = exitingNode.getStack();
-                            if (stack) {
-                                stack.remove(exitingNode);
-                            }
-                        }
-                        else if (exitingNode && !enteringNode) {
-                            // Fallback: If entering node doesn't exist yet, just handle exiting
-                            const stack = exitingNode.getStack();
-                            if (stack) {
-                                stack.remove(exitingNode);
-                            }
-                        }
-                    }
-                }
-                // Handle A -> AB -> A pattern: persisting element should become lead again
-                // when exiting element with same layoutId is removed
-                for (const [layoutId, persistingElement] of mutationResult.sharedPersisting) {
-                    const exitingElement = mutationResult.sharedExiting.get(layoutId);
-                    if (!exitingElement)
-                        continue;
-                    sharedExitingElements.add(exitingElement);
-                    const exitingNode = context?.nodes.get(exitingElement);
-                    const persistingNode = context?.nodes.get(persistingElement);
-                    if (exitingNode && persistingNode) {
-                        // Remove exiting node from stack, no crossfade
-                        const stack = exitingNode.getStack();
-                        if (stack) {
-                            stack.remove(exitingNode);
-                        }
-                    }
-                }
-                // Phase 4: Animate
-                if (context) {
-                    // Trigger layout animations via didUpdate
-                    context.root.didUpdate();
-                    // Wait for animations to be created (they're scheduled via frame.update)
-                    await new Promise((resolve) => frame.postRender(() => resolve()));
-                    // Collect layout animations from projection nodes
-                    // Skip shared exiting elements (they don't animate)
-                    for (const [element, node] of context.nodes.entries()) {
-                        if (sharedExitingElements.has(element))
-                            continue;
-                        if (node.currentAnimation) {
-                            animations.push(node.currentAnimation);
-                        }
-                    }
-                }
-                // Create and return group animation
-                const groupAnimation = new GroupAnimation(animations);
-                // Phase 5: Setup cleanup on complete
-                // Only cleanup exiting elements - persisting elements keep their nodes
-                // This matches React's behavior where nodes persist for elements in the DOM
-                const exitingElements = new Set(mutationResult.exiting.map(({ element }) => element));
-                groupAnimation.finished.then(() => {
-                    // Clean up all reattached exiting elements (remove from DOM)
-                    this.cleanupExitingElements(exitingToReattach);
-                    if (context) {
-                        // Only cleanup projection nodes for exiting elements
-                        cleanupProjectionTree(context, exitingElements);
-                    }
-                });
-                this.notifyReady(groupAnimation);
+            // Phase 1: Pre-mutation - Build projection tree and take snapshots
+            const beforeElements = getLayoutElements(this.scope);
+            if (beforeElements.length > 0) {
+                context = buildProjectionTree(beforeElements, undefined, this.getBuildOptions());
+                context.root.startUpdate();
+                for (const node of context.nodes.values()) {
+                    node.isLayoutDirty = false;
+                    node.willUpdate();
+                }
+            }
+            // Phase 2: Execute DOM update
+            this.updateDom();
+            // Phase 3: Post-mutation - Compare before/after elements
+            const afterElements = getLayoutElements(this.scope);
+            const beforeSet = new Set(beforeElements);
+            const afterSet = new Set(afterElements);
+            const entering = afterElements.filter((el) => !beforeSet.has(el));
+            const exiting = beforeElements.filter((el) => !afterSet.has(el));
+            // Build projection nodes for entering elements
+            if (entering.length > 0) {
+                context = buildProjectionTree(entering, context, this.getBuildOptions());
+            }
+            // No layout elements - return empty animation
+            if (!context) {
+                this.notifyReady(new GroupAnimation([]));
+                return;
+            }
+            // Handle shared elements
+            for (const element of exiting) {
+                const node = context.nodes.get(element);
+                node?.getStack()?.remove(node);
             }
-            catch (error) {
-                // Cleanup on error - cleanup all nodes since animation failed
-                if (context) {
-                    cleanupProjectionTree(context);
+            for (const element of entering) {
+                context.nodes.get(element)?.promote();
+            }
+            // Phase 4: Animate
+            context.root.didUpdate();
+            await new Promise((resolve) => frame.postRender(() => resolve()));
+            const animations = [];
+            for (const node of context.nodes.values()) {
+                if (node.currentAnimation) {
+                    animations.push(node.currentAnimation);
                 }
-                throw error;
             }
+            const groupAnimation = new GroupAnimation(animations);
+            groupAnimation.finished.then(() => {
+                cleanupProjectionTree(context);
+            });
+            this.notifyReady(groupAnimation);
         }
         getBuildOptions() {
             return {
@@ -9756,43 +9586,6 @@
                     : undefined,
             };
         }
-        reattachExitingElements(exiting, context) {
-            for (const { element, parentElement, nextSibling } of exiting) {
-                // Check if parent still exists in DOM
-                if (!parentElement.isConnected)
-                    continue;
-                // Get bounds from projection node snapshot (measured correctly via projection system)
-                const node = context?.nodes.get(element);
-                const snapshot = node?.snapshot;
-                if (!snapshot)
-                    continue;
-                const { layoutBox } = snapshot;
-                // Reattach element
-                if (nextSibling && nextSibling.parentNode === parentElement) {
-                    parentElement.insertBefore(element, nextSibling);
-                }
-                else {
-                    parentElement.appendChild(element);
-                }
-                // Apply absolute positioning to prevent layout shift
-                // Use layoutBox from projection system which has transform-free measurements
-                const htmlElement = element;
-                htmlElement.style.position = "absolute";
-                htmlElement.style.top = `${layoutBox.y.min}px`;
-                htmlElement.style.left = `${layoutBox.x.min}px`;
-                htmlElement.style.width = `${layoutBox.x.max - layoutBox.x.min}px`;
-                htmlElement.style.height = `${layoutBox.y.max - layoutBox.y.min}px`;
-                htmlElement.style.margin = "0";
-                htmlElement.style.pointerEvents = "none";
-            }
-        }
-        cleanupExitingElements(exiting) {
-            for (const { element } of exiting) {
-                if (element.parentElement) {
-                    element.parentElement.removeChild(element);
-                }
-            }
-        }
     }
     /**
      * Parse arguments for animateLayout overloads
@@ -9816,45 +9609,6 @@
         };
     }
 
-    /**
-     * Animate layout changes within a DOM tree.
-     *
-     * @example
-     * ```typescript
-     * // Basic usage - animates all elements with data-layout or data-layout-id
-     * await animateLayout(() => {
-     *     container.innerHTML = newContent
-     * })
-     *
-     * // With scope - only animates within the container
-     * await animateLayout(".container", () => {
-     *     updateContent()
-     * })
-     *
-     * // With options
-     * await animateLayout(() => update(), { duration: 0.5 })
-     *
-     * // Configure shared element transitions
-     * animateLayout(".cards", () => {
-     *     container.innerHTML = newCards
-     * }, { duration: 0.3 })
-     *     .shared("hero", { type: "spring" })
-     * ```
-     *
-     * Elements are animated if they have:
-     * - `data-layout` attribute (layout animation only)
-     * - `data-layout-id` attribute (shared element transitions)
-     *
-     * @param scopeOrUpdateDom - Either a scope selector/element, or the DOM update function
-     * @param updateDomOrOptions - Either the DOM update function or animation options
-     * @param options - Animation options (when scope is provided)
-     * @returns A builder that resolves to animation controls
-     */
-    function unstable_animateLayout(scopeOrUpdateDom, updateDomOrOptions, options) {
-        const { scope, updateDom, defaultOptions } = parseAnimateLayoutArgs(scopeOrUpdateDom, updateDomOrOptions, options);
-        return new LayoutAnimationBuilder(scope, updateDom, defaultOptions);
-    }
-
     /**
      * @deprecated
      *
@@ -11146,6 +10900,7 @@
     exports.observeTimeline = observeTimeline;
     exports.optimizedAppearDataAttribute = optimizedAppearDataAttribute;
     exports.optimizedAppearDataId = optimizedAppearDataId;
+    exports.parseAnimateLayoutArgs = parseAnimateLayoutArgs;
     exports.parseCSSVariable = parseCSSVariable;
     exports.parseValueFromTransform = parseValueFromTransform;
     exports.percent = percent;
@@ -11215,7 +10970,6 @@
     exports.transformValue = transformValue;
     exports.transformValueTypes = transformValueTypes;
     exports.translateAxis = translateAxis;
-    exports.unstable_animateLayout = unstable_animateLayout;
     exports.updateMotionValuesFromProps = updateMotionValuesFromProps;
     exports.variantPriorityOrder = variantPriorityOrder;
     exports.variantProps = variantProps;