motion 12.28.1-alpha.0 → 12.28.1

package/dist/motion.dev.js

@@ -81,7 +81,7 @@
     }
 
     /*#__NO_SIDE_EFFECTS__*/
-    const noop$1 = (any) => any;
+    const noop = (any) => any;
 
     /**
      * Pipe
@@ -227,7 +227,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);
@@ -278,7 +278,7 @@
     const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
 
     const easingLookup = {
-        linear: noop$1,
+        linear: noop,
         easeIn,
         easeInOut,
         easeOut,
@@ -479,7 +479,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() {
@@ -1429,7 +1429,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);
@@ -2491,7 +2491,7 @@
             this.animation.onfinish = null;
             if (timeline && supportsScrollTimeline()) {
                 this.animation.timeline = timeline;
-                return noop$1;
+                return noop;
             }
             else {
                 return observe(this);
@@ -2783,7 +2783,7 @@
                 : new JSAnimation(resolvedOptions);
             animation.finished.then(() => {
                 this.notifyFinished();
-            }).catch(noop$1);
+            }).catch(noop);
             if (this.pendingTimeline) {
                 this.stopTimeline = animation.attachTimeline(this.pendingTimeline);
                 this.pendingTimeline = undefined;
@@ -4370,7 +4370,8 @@
                 valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
             }
             else {
-                valueIsDefault = parseFloat(value) === 0;
+                const parsed = parseFloat(value);
+                valueIsDefault = key.startsWith("scale") ? parsed === 1 : parsed === 0;
             }
             if (!valueIsDefault) {
                 transformIsDefault = false;
@@ -4425,17 +4426,21 @@
     const styleEffect = /*@__PURE__*/ createSelectorEffect(
     /*@__PURE__*/ createEffect(addStyleValue));
 
-    const toPx = px.transform;
     function addSVGPathValue(element, state, key, value) {
         frame.render(() => element.setAttribute("pathLength", "1"));
         if (key === "pathOffset") {
-            return state.set(key, value, () => element.setAttribute("stroke-dashoffset", toPx(-state.latest[key])));
+            return state.set(key, value, () => {
+                // Use unitless value to avoid Safari zoom bug
+                const offset = state.latest[key];
+                element.setAttribute("stroke-dashoffset", `${-offset}`);
+            });
         }
         else {
             if (!state.get("stroke-dasharray")) {
                 state.set("stroke-dasharray", new MotionValue("1 1"), () => {
                     const { pathLength = 1, pathSpacing } = state.latest;
-                    element.setAttribute("stroke-dasharray", `${toPx(pathLength)} ${toPx(pathSpacing ?? 1 - Number(pathLength))}`);
+                    // Use unitless values to avoid Safari zoom bug
+                    element.setAttribute("stroke-dasharray", `${pathLength} ${pathSpacing ?? 1 - Number(pathLength)}`);
                 });
             }
             return state.set(key, value, undefined, state.get("stroke-dasharray"));
@@ -4981,6 +4986,101 @@
         return useImmediate ? interpolator(inputValue) : interpolator;
     }
 
+    /**
+     * Create a `MotionValue` that animates to its latest value using any transition type.
+     * Can either be a value or track another `MotionValue`.
+     *
+     * ```jsx
+     * const x = motionValue(0)
+     * const y = followValue(x, { type: "spring", stiffness: 300 })
+     * // or with tween
+     * const z = followValue(x, { type: "tween", duration: 0.5, ease: "easeOut" })
+     * ```
+     *
+     * @param source - Initial value or MotionValue to track
+     * @param options - Animation transition options
+     * @returns `MotionValue`
+     *
+     * @public
+     */
+    function followValue(source, options) {
+        const initialValue = isMotionValue(source) ? source.get() : source;
+        const value = motionValue(initialValue);
+        attachFollow(value, source, options);
+        return value;
+    }
+    /**
+     * Attach an animation to a MotionValue that will animate whenever the value changes.
+     * Similar to attachSpring but supports any transition type (spring, tween, inertia, etc.)
+     *
+     * @param value - The MotionValue to animate
+     * @param source - Initial value or MotionValue to track
+     * @param options - Animation transition options
+     * @returns Cleanup function
+     *
+     * @public
+     */
+    function attachFollow(value, source, options = {}) {
+        const initialValue = value.get();
+        let activeAnimation = null;
+        let latestValue = initialValue;
+        let latestSetter;
+        const unit = typeof initialValue === "string"
+            ? initialValue.replace(/[\d.-]/g, "")
+            : undefined;
+        const stopAnimation = () => {
+            if (activeAnimation) {
+                activeAnimation.stop();
+                activeAnimation = null;
+            }
+        };
+        const startAnimation = () => {
+            stopAnimation();
+            const currentValue = asNumber$1(value.get());
+            const targetValue = asNumber$1(latestValue);
+            // Don't animate if we're already at the target
+            if (currentValue === targetValue) {
+                return;
+            }
+            activeAnimation = new JSAnimation({
+                keyframes: [currentValue, targetValue],
+                velocity: value.getVelocity(),
+                // Default to spring if no type specified (matches useSpring behavior)
+                type: "spring",
+                restDelta: 0.001,
+                restSpeed: 0.01,
+                ...options,
+                onUpdate: latestSetter,
+            });
+        };
+        value.attach((v, set) => {
+            latestValue = v;
+            latestSetter = (latest) => set(parseValue(latest, unit));
+            frame.postRender(() => {
+                startAnimation();
+                value["events"].animationStart?.notify();
+                activeAnimation?.then(() => {
+                    value["events"].animationComplete?.notify();
+                });
+            });
+        }, stopAnimation);
+        if (isMotionValue(source)) {
+            const removeSourceOnChange = source.on("change", (v) => value.set(parseValue(v, unit)));
+            const removeValueOnDestroy = value.on("destroy", removeSourceOnChange);
+            return () => {
+                removeSourceOnChange();
+                removeValueOnDestroy();
+            };
+        }
+        return stopAnimation;
+    }
+    function parseValue(v, unit) {
+        return unit ? v + unit : v;
+    }
+    function asNumber$1(v) {
+        return typeof v === "number" ? v : parseFloat(v);
+    }
+
     function subscribeValue(inputValues, outputValue, getLatest) {
         const update = () => outputValue.set(getLatest());
         const scheduleUpdate = () => frame.preRender(update, false, true);
@@ -5070,72 +5170,30 @@
      *
      * ```jsx
      * const x = motionValue(0)
-     * const y = transformValue(() => x.get() * 2) // double x
+     * const y = springValue(x, { stiffness: 300 })
      * ```
      *
-     * @param transformer - A transform function. This function must be pure with no side-effects or conditional statements.
+     * @param source - Initial value or MotionValue to track
+     * @param options - Spring configuration options
      * @returns `MotionValue`
      *
      * @public
      */
     function springValue(source, options) {
-        const initialValue = isMotionValue(source) ? source.get() : source;
-        const value = motionValue(initialValue);
-        attachSpring(value, source, options);
-        return value;
+        return followValue(source, { type: "spring", ...options });
     }
+    /**
+     * Attach a spring animation to a MotionValue that will animate whenever the value changes.
+     *
+     * @param value - The MotionValue to animate
+     * @param source - Initial value or MotionValue to track
+     * @param options - Spring configuration options
+     * @returns Cleanup function
+     *
+     * @public
+     */
     function attachSpring(value, source, options) {
-        const initialValue = value.get();
-        let activeAnimation = null;
-        let latestValue = initialValue;
-        let latestSetter;
-        const unit = typeof initialValue === "string"
-            ? initialValue.replace(/[\d.-]/g, "")
-            : undefined;
-        const stopAnimation = () => {
-            if (activeAnimation) {
-                activeAnimation.stop();
-                activeAnimation = null;
-            }
-        };
-        const startAnimation = () => {
-            stopAnimation();
-            activeAnimation = new JSAnimation({
-                keyframes: [asNumber$1(value.get()), asNumber$1(latestValue)],
-                velocity: value.getVelocity(),
-                type: "spring",
-                restDelta: 0.001,
-                restSpeed: 0.01,
-                ...options,
-                onUpdate: latestSetter,
-            });
-        };
-        value.attach((v, set) => {
-            latestValue = v;
-            latestSetter = (latest) => set(parseValue(latest, unit));
-            frame.postRender(() => {
-                startAnimation();
-                value['events'].animationStart?.notify();
-                activeAnimation?.then(() => {
-                    value['events'].animationComplete?.notify();
-                });
-            });
-        }, stopAnimation);
-        if (isMotionValue(source)) {
-            const removeSourceOnChange = source.on("change", (v) => value.set(parseValue(v, unit)));
-            const removeValueOnDestroy = value.on("destroy", removeSourceOnChange);
-            return () => {
-                removeSourceOnChange();
-                removeValueOnDestroy();
-            };
-        }
-        return stopAnimation;
-    }
-    function parseValue(v, unit) {
-        return unit ? v + unit : v;
-    }
-    function asNumber$1(v) {
-        return typeof v === "number" ? v : parseFloat(v);
+        return attachFollow(value, source, { type: "spring", ...options });
     }
 
     /**
@@ -5402,7 +5460,7 @@
         constructor(update, options = {}) {
             this.currentSubject = "root";
             this.targets = new Map();
-            this.notifyReady = noop$1;
+            this.notifyReady = noop;
             this.readyPromise = new Promise((resolve) => {
                 this.notifyReady = resolve;
             });
@@ -6335,7 +6393,8 @@
                 valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
             }
             else {
-                valueIsDefault = parseFloat(value) === 0;
+                const parsed = parseFloat(value);
+                valueIsDefault = key.startsWith("scale") ? parsed === 1 : parsed === 0;
             }
             if (!valueIsDefault || transformTemplate) {
                 const valueAsType = getValueAsType(value, numberValueTypes[key]);
@@ -6638,6 +6697,9 @@
      * and stroke-dasharray attributes.
      *
      * This function is mutative to reduce per-frame GC.
+     *
+     * Note: We use unitless values for stroke-dasharray and stroke-dashoffset
+     * because Safari incorrectly scales px values when the page is zoomed.
      */
     function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
         // Normalise path length by setting SVG attribute pathLength to 1
@@ -6645,12 +6707,10 @@
         // We use dash case when setting attributes directly to the DOM node and camel case
         // when defining props on a React component.
         const keys = useDashCase ? dashKeys : camelKeys;
-        // Build the dash offset
-        attrs[keys.offset] = px.transform(-offset);
-        // Build the dash array
-        const pathLength = px.transform(length);
-        const pathSpacing = px.transform(spacing);
-        attrs[keys.array] = `${pathLength} ${pathSpacing}`;
+        // Build the dash offset (unitless to avoid Safari zoom bug)
+        attrs[keys.offset] = `${-offset}`;
+        // Build the dash array (unitless to avoid Safari zoom bug)
+        attrs[keys.array] = `${length} ${spacing}`;
     }
 
     /**
@@ -7457,7 +7517,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
@@ -7575,13 +7635,6 @@
             const prevLead = this.lead;
             if (node === prevLead)
                 return;
-            console.log("[projection] promote", {
-                layoutId: node.options.layoutId,
-                node: node.id,
-                prevLead: prevLead?.id,
-                prevLeadSnapshot: Boolean(prevLead?.snapshot),
-                prevLeadResumeFrom: Boolean(prevLead?.resumeFrom),
-            });
             this.prevLead = prevLead;
             this.lead = node;
             node.show();
@@ -7690,7 +7743,7 @@
             cancelTreeOptimisedTransformAnimations(parent);
         }
     }
-    function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
+    function createProjectionNode$1({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
         return class ProjectionNode {
             constructor(latestValues = {}, parent = defaultParent?.()) {
                 /**
@@ -9228,7 +9281,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);
@@ -9247,11 +9300,11 @@
         return node !== node.root && node.scroll?.wasRoot;
     }
 
-    const DocumentProjectionNode = createProjectionNode({
+    const DocumentProjectionNode = createProjectionNode$1({
         attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),
         measureScroll: () => ({
-            x: document.documentElement.scrollLeft || document.body.scrollLeft,
-            y: document.documentElement.scrollTop || document.body.scrollTop,
+            x: document.documentElement.scrollLeft || document.body?.scrollLeft || 0,
+            y: document.documentElement.scrollTop || document.body?.scrollTop || 0,
         }),
         checkIsScrollRoot: () => true,
     });
@@ -9282,7 +9335,7 @@
     const rootProjectionNode = {
         current: undefined,
     };
-    const HTMLProjectionNode = createProjectionNode({
+    const HTMLProjectionNode = createProjectionNode$1({
         measureScroll: (instance) => ({
             x: instance.scrollLeft,
             y: instance.scrollTop,
@@ -9302,160 +9355,315 @@
         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 LAYOUT_SELECTOR = "[data-layout], [data-layout-id]";
+    function getLayoutElements(scope) {
+        const elements = Array.from(scope.querySelectorAll(LAYOUT_SELECTOR));
+        // Include scope itself if it's an Element (not Document) and has layout attributes
+        if (scope instanceof Element && hasLayout(scope)) {
+            elements.unshift(scope);
+        }
+        return elements;
+    }
+    function getLayoutId(element) {
+        return element.getAttribute("data-layout-id");
+    }
+    function hasLayout(element) {
+        return (element.hasAttribute("data-layout") ||
+            element.hasAttribute("data-layout-id"));
+    }
+
+    let scaleCorrectorAdded = false;
+    /**
+     * Track active projection nodes per element to handle animation interruption.
+     * When a new animation starts on an element that already has an active animation,
+     * we need to stop the old animation so the new one can start from the current
+     * visual position.
+     */
+    const activeProjectionNodes = new WeakMap();
+    function ensureScaleCorrectors() {
+        if (scaleCorrectorAdded)
+            return;
+        scaleCorrectorAdded = true;
+        addScaleCorrector({
+            borderRadius: {
+                ...correctBorderRadius,
+                applyTo: [
+                    "borderTopLeftRadius",
+                    "borderTopRightRadius",
+                    "borderBottomLeftRadius",
+                    "borderBottomRightRadius",
+                ],
+            },
+            borderTopLeftRadius: correctBorderRadius,
+            borderTopRightRadius: correctBorderRadius,
+            borderBottomLeftRadius: correctBorderRadius,
+            borderBottomRightRadius: correctBorderRadius,
+            boxShadow: correctBoxShadow,
+        });
+    }
+    /**
+     * Get DOM depth of an element
+     */
+    function getDepth(element) {
+        let depth = 0;
+        let current = element.parentElement;
+        while (current) {
+            depth++;
+            current = current.parentElement;
+        }
+        return depth;
+    }
+    /**
+     * Find the closest projection parent for an element
+     */
+    function findProjectionParent(element, nodeCache) {
+        let parent = element.parentElement;
+        while (parent) {
+            const node = nodeCache.get(parent);
+            if (node)
+                return node;
+            parent = parent.parentElement;
+        }
+        return undefined;
+    }
+    /**
+     * Create or reuse a projection node for an element
+     */
+    function createProjectionNode(element, parent, options, transition) {
+        // Check for existing active node - reuse it to preserve animation state
+        const existingNode = activeProjectionNodes.get(element);
+        if (existingNode) {
+            const visualElement = existingNode.options.visualElement;
+            // Update transition options for the new animation
+            const nodeTransition = transition
+                ? { duration: transition.duration, ease: transition.ease }
+                : { duration: 0.3, ease: "easeOut" };
+            existingNode.setOptions({
+                ...existingNode.options,
+                animate: true,
+                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
+        const latestValues = {};
+        const visualElement = new HTMLVisualElement({
+            visualState: {
+                latestValues,
+                renderState: {
+                    transformOrigin: {},
+                    transform: {},
+                    style: {},
+                    vars: {},
+                },
+            },
+            presenceContext: null,
+            props: {},
+        });
+        const node = new HTMLProjectionNode(latestValues, parent);
+        // Convert AnimationOptions to transition format for the projection system
+        const nodeTransition = transition
+            ? { duration: transition.duration, ease: transition.ease }
+            : { duration: 0.3, ease: "easeOut" };
+        node.setOptions({
+            visualElement,
+            layout: true,
+            animate: true,
+            transition: nodeTransition,
+            ...options,
+        });
+        node.mount(element);
+        visualElement.projection = node;
+        // Track this node as the active one for this element
+        activeProjectionNodes.set(element, node);
+        return { node, visualElement };
+    }
+    /**
+     * Build a projection tree from a list of elements
+     */
+    function buildProjectionTree(elements, existingContext, options) {
+        ensureScaleCorrectors();
+        const nodes = existingContext?.nodes ?? new Map();
+        const visualElements = existingContext?.visualElements ?? new Map();
+        const group = existingContext?.group ?? nodeGroup();
+        const defaultTransition = options?.defaultTransition;
+        const sharedTransitions = options?.sharedTransitions;
+        // Sort elements by DOM depth (parents before children)
+        const sorted = [...elements].sort((a, b) => getDepth(a) - getDepth(b));
+        let root = existingContext?.root;
+        for (const element of sorted) {
+            // Skip if already has a node
+            if (nodes.has(element))
+                continue;
+            const parent = findProjectionParent(element, nodes);
+            const layoutId = getLayoutId(element);
+            const layoutMode = element.getAttribute("data-layout");
+            const nodeOptions = {
+                layoutId: layoutId ?? undefined,
+                animationType: parseLayoutMode(layoutMode),
+            };
+            // Use layoutId-specific transition if available, otherwise use default
+            const transition = layoutId && sharedTransitions?.get(layoutId)
+                ? sharedTransitions.get(layoutId)
+                : defaultTransition;
+            const { node, visualElement } = createProjectionNode(element, parent, nodeOptions, transition);
+            nodes.set(element, node);
+            visualElements.set(element, visualElement);
+            group.add(node);
+            if (!root) {
+                root = node.root;
+            }
+        }
         return {
-            animationId: projection.root?.animationId ?? 0,
-            measuredBox,
-            layoutBox,
-            latestValues: projection.animationValues || projection.latestValues || {},
-            source: projection.id,
+            nodes,
+            visualElements,
+            group,
+            root: root,
         };
     }
+    /**
+     * Parse the data-layout attribute value
+     */
+    function parseLayoutMode(value) {
+        if (value === "position")
+            return "position";
+        if (value === "size")
+            return "size";
+        if (value === "preserve-aspect")
+            return "preserve-aspect";
+        return "both";
+    }
+    /**
+     * 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, elementsToCleanup) {
+        const elementsToProcess = elementsToCleanup
+            ? [...context.nodes.entries()].filter(([el]) => elementsToCleanup.has(el))
+            : [...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.
+            // A newer animation might have already taken over.
+            if (activeProjectionNodes.get(element) === node) {
+                activeProjectionNodes.delete(element);
+            }
+            context.nodes.delete(element);
+            context.visualElements.delete(element);
+        }
+    }
+
     class LayoutAnimationBuilder {
         constructor(scope, updateDom, defaultOptions) {
             this.sharedTransitions = new Map();
             this.notifyReady = noop;
-            this.rejectReady = noop;
+            this.executed = false;
             this.scope = scope;
             this.updateDom = updateDom;
             this.defaultOptions = defaultOptions;
-            this.readyPromise = new Promise((resolve, reject) => {
+            this.readyPromise = new Promise((resolve) => {
                 this.notifyReady = resolve;
-                this.rejectReady = reject;
-            });
-            frame.postRender(() => {
-                this.start().then(this.notifyReady).catch(this.rejectReady);
             });
+            // Queue execution on microtask to allow builder methods to be called
+            queueMicrotask(() => this.execute());
         }
-        shared(id, transition) {
-            this.sharedTransitions.set(id, transition);
+        shared(id, options) {
+            this.sharedTransitions.set(id, options);
             return this;
         }
-        then(resolve, reject) {
-            return this.readyPromise.then(resolve, reject);
+        then(onfulfilled, onrejected) {
+            return this.readyPromise.then(onfulfilled, onrejected);
         }
-        async start() {
-            const beforeElements = collectLayoutElements(this.scope);
-            const beforeRecords = this.buildRecords(beforeElements);
-            const exitCandidates = collectExitCandidates(beforeRecords);
-            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();
-            });
-            await this.updateDom();
-            const afterElements = collectLayoutElements(this.scope);
-            const afterRecords = this.buildRecords(afterElements);
-            const exitRecords = this.handleExitingElements(beforeRecords, afterRecords, exitCandidates);
-            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 = "";
-                }
-            });
-            afterRecords.forEach(({ projection }) => {
-                projection.isPresent = true;
-            });
-            const root = getProjectionRoot(afterRecords, beforeRecords);
-            root?.didUpdate();
-            await new Promise((resolve) => {
-                frame.postRender(() => resolve());
-            });
-            const animations = collectAnimations(afterRecords, exitRecords);
-            const animation = new GroupAnimation(animations);
-            if (exitRecords.length) {
-                const cleanup = () => {
-                    exitRecords.forEach(({ element, visualElement }) => {
-                        if (element.isConnected) {
-                            element.remove();
-                        }
-                        visualElement.unmount();
-                        visualElementStore.delete(element);
-                    });
-                };
-                animation.finished.then(cleanup, cleanup);
+        async execute() {
+            if (this.executed)
+                return;
+            this.executed = true;
+            let context;
+            // 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;
             }
-            return animation;
-        }
-        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);
+            // Handle shared elements
+            for (const element of exiting) {
+                const node = context.nodes.get(element);
+                node?.getStack()?.remove(node);
             }
-            return records;
-        }
-        handleExitingElements(beforeRecords, afterRecords, exitCandidates) {
-            const afterElementsSet = new Set(afterRecords.map((record) => record.element));
-            const exiting = [];
-            beforeRecords.forEach((record) => {
-                if (afterElementsSet.has(record.element))
-                    return;
-                const exitRecord = exitCandidates.get(record.element);
-                if (!exitRecord) {
-                    record.visualElement.unmount();
-                    visualElementStore.delete(record.element);
-                    return;
-                }
-                if (!exitRecord.element.isConnected) {
-                    reinstateExitElement(exitRecord);
-                }
-                record.projection.isPresent = false;
-                if (record.projection.options.layoutId) {
-                    record.projection.relegate();
+            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);
+                }
+            }
+            const groupAnimation = new GroupAnimation(animations);
+            groupAnimation.finished.then(() => {
+                // Only clean up nodes for elements no longer in the document.
+                // Elements still in DOM keep their nodes so subsequent animations
+                // can use the stored position snapshots (A→B→A pattern).
+                const elementsToCleanup = new Set();
+                for (const element of context.nodes.keys()) {
+                    if (!document.contains(element)) {
+                        elementsToCleanup.add(element);
+                    }
                 }
-                exiting.push(record);
+                cleanupProjectionTree(context, elementsToCleanup);
             });
-            return exiting;
+            this.notifyReady(groupAnimation);
+        }
+        getBuildOptions() {
+            return {
+                defaultTransition: this.defaultOptions || {
+                    duration: 0.3,
+                    ease: "easeOut",
+                },
+                sharedTransitions: this.sharedTransitions.size > 0
+                    ? this.sharedTransitions
+                    : undefined,
+            };
         }
     }
+    /**
+     * Parse arguments for animateLayout overloads
+     */
     function parseAnimateLayoutArgs(scopeOrUpdateDom, updateDomOrOptions, options) {
         // animateLayout(updateDom)
         if (typeof scopeOrUpdateDom === "function") {
@@ -9469,125 +9677,11 @@
         const elements = resolveElements(scopeOrUpdateDom);
         const scope = elements[0] || document;
         return {
-            scope,
+            scope: scope instanceof Document ? scope : 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,
-            layoutExit: element.hasAttribute("data-layout-exit"),
-        };
-    }
-    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);
-        }
-        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 collectExitCandidates(records) {
-        const exitCandidates = new Map();
-        records.forEach((record) => {
-            const { layoutExit } = readLayoutAttributes(record.element);
-            if (!layoutExit)
-                return;
-            exitCandidates.set(record.element, {
-                ...record,
-                parent: record.element.parentNode,
-                nextSibling: record.element.nextSibling,
-            });
-        });
-        return exitCandidates;
-    }
-    function reinstateExitElement(record) {
-        if (!record.parent)
-            return;
-        if (record.nextSibling && record.nextSibling.parentNode === record.parent) {
-            record.parent.insertBefore(record.element, record.nextSibling);
-        }
-        else {
-            record.parent.appendChild(record.element);
-        }
-    }
-    function getProjectionRoot(afterRecords, beforeRecords) {
-        const record = afterRecords[0] || beforeRecords[0];
-        return record?.projection.root;
-    }
-    function collectAnimations(afterRecords, exitRecords) {
-        const animations = new Set();
-        const addAnimation = (record) => {
-            const animation = record.projection.currentAnimation;
-            if (animation)
-                animations.add(animation);
-        };
-        afterRecords.forEach(addAnimation);
-        exitRecords.forEach(addAnimation);
-        return Array.from(animations);
-    }
 
     /**
      * @deprecated
@@ -9748,7 +9842,7 @@
             let maxDuration = 0;
             const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
                 const valueKeyframesAsList = keyframesAsList(valueKeyframes);
-                const { delay = 0, times = defaultOffset$1(valueKeyframesAsList), type = "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
+                const { delay = 0, times = defaultOffset$1(valueKeyframesAsList), type = defaultTransition.type || "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
                 let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
                 /**
                  * Resolve stagger() if defined.
@@ -9776,7 +9870,10 @@
                         const delta = valueKeyframesAsList[1] - valueKeyframesAsList[0];
                         absoluteDelta = Math.abs(delta);
                     }
-                    const springTransition = { ...remainingTransition };
+                    const springTransition = {
+                        ...defaultTransition,
+                        ...remainingTransition,
+                    };
                     if (duration !== undefined) {
                         springTransition.duration = secondsToMilliseconds(duration);
                     }
@@ -9909,8 +10006,15 @@
                 }
                 const definition = animationDefinitions.get(element);
                 definition.keyframes[key] = keyframes;
+                /**
+                 * Exclude `type` from defaultTransition since springs have been
+                 * converted to duration-based easing functions in resolveValueSequence.
+                 * Including `type: "spring"` would cause JSAnimation to error when
+                 * the merged keyframes array has more than 2 keyframes.
+                 */
+                const { type: _type, ...remainingDefaultTransition } = defaultTransition;
                 definition.transition[key] = {
-                    ...defaultTransition,
+                    ...remainingDefaultTransition,
                     duration: totalDuration,
                     ease: valueEasing,
                     times: valueOffset,
@@ -10481,7 +10585,7 @@
     const getEventTarget = (element) => element === document.scrollingElement ? window : element;
     function scrollInfo(onScroll, { container = document.scrollingElement, ...options } = {}) {
         if (!container)
-            return noop$1;
+            return noop;
         let containerHandlers = onScrollHandlers.get(container);
         /**
          * Get the onScroll handlers for this container.
@@ -10609,7 +10713,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)
@@ -10716,6 +10820,7 @@
     exports.applyPxDefaults = applyPxDefaults;
     exports.applyTreeDeltas = applyTreeDeltas;
     exports.aspectRatio = aspectRatio;
+    exports.attachFollow = attachFollow;
     exports.attachSpring = attachSpring;
     exports.attrEffect = attrEffect;
     exports.axisDeltaEquals = axisDeltaEquals;
@@ -10770,7 +10875,7 @@
     exports.createBox = createBox;
     exports.createDelta = createDelta;
     exports.createGeneratorEasing = createGeneratorEasing;
-    exports.createProjectionNode = createProjectionNode;
+    exports.createProjectionNode = createProjectionNode$1;
     exports.createRenderBatcher = createRenderBatcher;
     exports.createScopedAnimate = createScopedAnimate;
     exports.cubicBezier = cubicBezier;
@@ -10795,6 +10900,7 @@
     exports.findDimensionValueType = findDimensionValueType;
     exports.findValueType = findValueType;
     exports.flushKeyframeResolvers = flushKeyframeResolvers;
+    exports.followValue = followValue;
     exports.frame = frame;
     exports.frameData = frameData;
     exports.frameSteps = frameSteps;
@@ -10884,7 +10990,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;