motion 12.27.3-alpha.1 → 12.27.3

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;
@@ -5402,7 +5402,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;
             });
@@ -7457,7 +7457,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
@@ -7683,7 +7683,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?.()) {
                 /**
@@ -9221,7 +9221,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);
@@ -9240,7 +9240,7 @@
         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,
@@ -9275,7 +9275,7 @@
     const rootProjectionNode = {
         current: undefined,
     };
-    const HTMLProjectionNode = createProjectionNode({
+    const HTMLProjectionNode = createProjectionNode$1({
         measureScroll: (instance) => ({
             x: instance.scrollLeft,
             y: instance.scrollTop,
@@ -9295,113 +9295,315 @@
         checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"),
     });
 
-    const layoutSelector = "[data-layout], [data-layout-id]";
-    const noop = () => { };
+    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 {
+            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;
-            });
-            microtask.read(() => {
-                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 }) => {
-                seedProjectionSnapshot(projection);
-                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 }) => {
-                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") {
@@ -9415,135 +9617,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 seedProjectionSnapshot(projection) {
-        const projectionNode = projection;
-        if (!projectionNode.currentAnimation && !projectionNode.pendingAnimation) {
-            return;
-        }
-        const snapshot = projection.measure(false);
-        snapshot.latestValues =
-            projectionNode.animationValues || projection.latestValues;
-        projection.snapshot = snapshot;
-    }
-    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
@@ -10437,7 +10515,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.
@@ -10565,7 +10643,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)
@@ -10726,7 +10804,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;
@@ -10840,7 +10918,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;