motion 12.27.0-alpha.5 → 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 = [];
@@ -9246,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();
@@ -9292,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));
@@ -9308,93 +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();
-        // 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);
-            }
-        }
-        return {
-            entering,
-            exiting,
-            persisting,
-            sharedEntering,
-            sharedExiting,
-        };
-    }
-    /**
-     * Check if an element is a "root" entering element (no entering ancestors)
-     */
-    function isRootEnteringElement(element, allEntering) {
-        let parent = element.parentElement;
-        while (parent) {
-            if (allEntering.has(parent))
-                return false;
-            parent = parent.parentElement;
-        }
-        return true;
-    }
-    /**
-     * Check if an element is a "root" exiting element (no exiting ancestors)
-     */
-    function isRootExitingElement(element, allExiting) {
-        let parent = element.parentElement;
-        while (parent) {
-            if (allExiting.has(parent))
-                return false;
-            parent = parent.parentElement;
-        }
-        return true;
-    }
 
     let scaleCorrectorAdded = false;
     /**
@@ -9468,6 +9381,11 @@
                 transition: nodeTransition,
                 ...options,
             });
+            // Re-mount the node if it was previously unmounted
+            // This re-adds it to root.nodes so didUpdate() will process it
+            if (!existingNode.instance) {
+                existingNode.mount(element);
+            }
             return { node: existingNode, visualElement };
         }
         // No existing node - create a new one
@@ -9559,10 +9477,16 @@
         return "both";
     }
     /**
-     * Clean up projection nodes
+     * Clean up projection nodes for specific elements.
+     * If elementsToCleanup is provided, only those elements are cleaned up.
+     * If not provided, all nodes are cleaned up.
+     *
+     * This allows persisting elements to keep their nodes between animations,
+     * matching React's behavior where nodes persist for elements that remain in the DOM.
      */
-    function cleanupProjectionTree(context) {
-        for (const [element, node] of context.nodes.entries()) {
+    function cleanupProjectionTree(context, elementsToCleanup) {
+        const elementsToProcess = [...context.nodes.entries()];
+        for (const [element, node] of elementsToProcess) {
             context.group.remove(node);
             node.unmount();
             // Only clear from activeProjectionNodes if this is still the active node.
@@ -9570,9 +9494,9 @@
             if (activeProjectionNodes.get(element) === node) {
                 activeProjectionNodes.delete(element);
             }
+            context.nodes.delete(element);
+            context.visualElements.delete(element);
         }
-        context.nodes.clear();
-        context.visualElements.clear();
     }
 
     class LayoutAnimationBuilder {
@@ -9589,22 +9513,8 @@
             // Queue execution on microtask to allow builder methods to be called
             queueMicrotask(() => this.execute());
         }
-        enter(keyframes, options) {
-            this.enterKeyframes = keyframes;
-            this.enterOptions = options;
-            return this;
-        }
-        exit(keyframes, options) {
-            this.exitKeyframes = keyframes;
-            this.exitOptions = options;
-            return this;
-        }
-        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) {
@@ -9614,200 +9524,67 @@
             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);
-                // Reattach exiting elements that are NOT part of shared transitions
-                // Shared elements are handled by the projection system via resumeFrom
-                const nonSharedExiting = mutationResult.exiting.filter(({ element }) => {
-                    const layoutId = element.getAttribute("data-layout-id");
-                    return !layoutId || !mutationResult.sharedEntering.has(layoutId);
-                });
-                this.reattachExitingElements(nonSharedExiting, 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 to exclude from animation collection
-                // Their nodes are still in the tree for resumeFrom relationship, but we don't animate them
-                const sharedExitingElements = new Set();
-                for (const [layoutId] of mutationResult.sharedEntering) {
-                    const exitingElement = mutationResult.sharedExiting.get(layoutId);
-                    if (exitingElement) {
-                        sharedExitingElements.add(exitingElement);
-                        // Remove the exiting node from the shared stack so that crossfade
-                        // doesn't trigger. When an element is removed from the DOM, it can't
-                        // participate in crossfade (no element to fade out). The entering
-                        // element still has resumeFrom set for position morphing.
-                        const exitingNode = context?.nodes.get(exitingElement);
-                        if (exitingNode) {
-                            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 (excluding shared exiting elements)
-                    for (const [element, node] of context.nodes.entries()) {
-                        if (sharedExitingElements.has(element))
-                            continue;
-                        if (node.currentAnimation) {
-                            animations.push(node.currentAnimation);
-                        }
-                    }
-                    // Apply enter keyframes to root entering elements
-                    if (this.enterKeyframes) {
-                        const enterAnimations = this.animateEntering(mutationResult, context);
-                        animations.push(...enterAnimations);
-                    }
-                    // Apply exit keyframes to root exiting elements
-                    if (this.exitKeyframes) {
-                        const exitAnimations = this.animateExiting(mutationResult, context);
-                        animations.push(...exitAnimations);
-                    }
-                }
-                // Create and return group animation
-                const groupAnimation = new GroupAnimation(animations);
-                // Phase 5: Setup cleanup on complete
-                groupAnimation.finished.then(() => {
-                    // Only clean up non-shared exiting elements (those we reattached)
-                    this.cleanupExitingElements(nonSharedExiting);
-                    if (context) {
-                        cleanupProjectionTree(context);
-                    }
-                });
-                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;
             }
-            catch (error) {
-                // Cleanup on error
-                if (context) {
-                    cleanupProjectionTree(context);
-                }
-                throw error;
+            // Handle shared elements
+            for (const element of exiting) {
+                const node = context.nodes.get(element);
+                node?.getStack()?.remove(node);
             }
-        }
-        getBuildOptions() {
-            return {
-                defaultTransition: this.defaultOptions || { duration: 0.3, ease: "easeOut" },
-                sharedTransitions: this.sharedTransitions.size > 0 ? this.sharedTransitions : 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";
+            for (const element of entering) {
+                context.nodes.get(element)?.promote();
             }
-        }
-        cleanupExitingElements(exiting) {
-            for (const { element } of exiting) {
-                if (element.parentElement) {
-                    element.parentElement.removeChild(element);
-                }
-            }
-        }
-        animateEntering(mutationResult, context) {
-            const enteringSet = new Set(mutationResult.entering);
-            // Find root entering elements
-            const rootEntering = mutationResult.entering.filter((el) => isRootEnteringElement(el, enteringSet));
+            // Phase 4: Animate
+            context.root.didUpdate();
+            await new Promise((resolve) => frame.postRender(() => resolve()));
             const animations = [];
-            for (const element of rootEntering) {
-                const visualElement = context.visualElements.get(element);
-                if (!visualElement)
-                    continue;
-                // If entering with opacity: 1, start from opacity: 0
-                const keyframes = { ...this.enterKeyframes };
-                if (keyframes.opacity !== undefined) {
-                    const targetOpacity = Array.isArray(keyframes.opacity)
-                        ? keyframes.opacity[keyframes.opacity.length - 1]
-                        : keyframes.opacity;
-                    if (targetOpacity === 1) {
-                        element.style.opacity = "0";
-                    }
+            for (const node of context.nodes.values()) {
+                if (node.currentAnimation) {
+                    animations.push(node.currentAnimation);
                 }
-                const options = this.enterOptions || this.defaultOptions || {};
-                const enterAnims = animateTarget(visualElement, keyframes, {
-                    transitionOverride: options,
-                });
-                animations.push(...enterAnims);
             }
-            return animations;
+            const groupAnimation = new GroupAnimation(animations);
+            groupAnimation.finished.then(() => {
+                cleanupProjectionTree(context);
+            });
+            this.notifyReady(groupAnimation);
         }
-        animateExiting(mutationResult, context) {
-            const exitingSet = new Set(mutationResult.exiting.map((r) => r.element));
-            // Find root exiting elements
-            const rootExiting = mutationResult.exiting.filter((r) => isRootExitingElement(r.element, exitingSet));
-            const animations = [];
-            for (const { element } of rootExiting) {
-                const visualElement = context.visualElements.get(element);
-                if (!visualElement)
-                    continue;
-                const options = this.exitOptions || this.defaultOptions || {};
-                const exitAnims = animateTarget(visualElement, this.exitKeyframes, {
-                    transitionOverride: options,
-                });
-                animations.push(...exitAnims);
-            }
-            return animations;
+        getBuildOptions() {
+            return {
+                defaultTransition: this.defaultOptions || {
+                    duration: 0.3,
+                    ease: "easeOut",
+                },
+                sharedTransitions: this.sharedTransitions.size > 0
+                    ? this.sharedTransitions
+                    : undefined,
+            };
         }
     }
     /**
@@ -9832,47 +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 })
-     *
-     * // Builder pattern for enter/exit animations
-     * animateLayout(".cards", () => {
-     *     container.innerHTML = newCards
-     * }, { duration: 0.3 })
-     *     .enter({ opacity: 1, scale: 1 }, { duration: 0.2 })
-     *     .exit({ opacity: 0, scale: 0.8 })
-     *     .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
      *
@@ -11164,6 +10900,7 @@
     exports.observeTimeline = observeTimeline;
     exports.optimizedAppearDataAttribute = optimizedAppearDataAttribute;
     exports.optimizedAppearDataId = optimizedAppearDataId;
+    exports.parseAnimateLayoutArgs = parseAnimateLayoutArgs;
     exports.parseCSSVariable = parseCSSVariable;
     exports.parseValueFromTransform = parseValueFromTransform;
     exports.percent = percent;
@@ -11233,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;