motion 12.27.2 → 12.27.3-alpha.0

package/dist/motion.dev.js

@@ -81,7 +81,7 @@
     }
 
     /*#__NO_SIDE_EFFECTS__*/
-    const noop = (any) => any;
+    const noop$1 = (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;
+            return noop$1;
         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,
+        linear: noop$1,
         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, true);
+    const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop$1, 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 : ease;
+                const easingFunction = Array.isArray(ease) ? ease[i] || noop$1 : 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;
+                return noop$1;
             }
             else {
                 return observe(this);
@@ -2783,7 +2783,7 @@
                 : new JSAnimation(resolvedOptions);
             animation.finished.then(() => {
                 this.notifyFinished();
-            }).catch(noop);
+            }).catch(noop$1);
             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;
+            this.notifyReady = noop$1;
             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);
+    const easeCrossfadeOut = /*@__PURE__*/ compress(0.5, 0.95, noop$1);
     function compress(min, max, easing) {
         return (p) => {
             // Could replace ifs with clamp
@@ -7683,7 +7683,7 @@
             cancelTreeOptimisedTransformAnimations(parent);
         }
     }
-    function createProjectionNode$1({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
+    function createProjectionNode({ 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;
+        : noop$1;
     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$1({
+    const DocumentProjectionNode = createProjectionNode({
         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$1({
+    const HTMLProjectionNode = createProjectionNode({
         measureScroll: (instance) => ({
             x: instance.scrollLeft,
             y: instance.scrollTop,
@@ -9295,315 +9295,112 @@
         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));
-        // 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);
-        }
-    }
-
+    const layoutSelector = "[data-layout], [data-layout-id]";
+    const noop = () => { };
     class LayoutAnimationBuilder {
         constructor(scope, updateDom, defaultOptions) {
             this.sharedTransitions = new Map();
             this.notifyReady = noop;
-            this.executed = false;
+            this.rejectReady = noop;
             this.scope = scope;
             this.updateDom = updateDom;
             this.defaultOptions = defaultOptions;
-            this.readyPromise = new Promise((resolve) => {
+            this.readyPromise = new Promise((resolve, reject) => {
                 this.notifyReady = resolve;
+                this.rejectReady = reject;
+            });
+            microtask.read((_frameData) => {
+                this.start().then(this.notifyReady).catch(this.rejectReady);
             });
-            // Queue execution on microtask to allow builder methods to be called
-            queueMicrotask(() => this.execute());
         }
-        shared(id, options) {
-            this.sharedTransitions.set(id, options);
+        shared(id, transition) {
+            this.sharedTransitions.set(id, transition);
             return this;
         }
-        then(onfulfilled, onrejected) {
-            return this.readyPromise.then(onfulfilled, onrejected);
+        then(resolve, reject) {
+            return this.readyPromise.then(resolve, reject);
         }
-        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;
-            }
-            // Handle shared elements
-            for (const element of exiting) {
-                const node = context.nodes.get(element);
-                node?.getStack()?.remove(node);
+        async start() {
+            const beforeElements = collectLayoutElements(this.scope);
+            const beforeRecords = this.buildRecords(beforeElements);
+            const exitCandidates = collectExitCandidates(beforeRecords);
+            beforeRecords.forEach(({ 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);
             }
-            for (const element of entering) {
-                context.nodes.get(element)?.promote();
+            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);
             }
-            // 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);
-                    }
+            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();
                 }
-                cleanupProjectionTree(context, elementsToCleanup);
+                exiting.push(record);
             });
-            this.notifyReady(groupAnimation);
-        }
-        getBuildOptions() {
-            return {
-                defaultTransition: this.defaultOptions || {
-                    duration: 0.3,
-                    ease: "easeOut",
-                },
-                sharedTransitions: this.sharedTransitions.size > 0
-                    ? this.sharedTransitions
-                    : undefined,
-            };
+            return exiting;
         }
     }
-    /**
-     * Parse arguments for animateLayout overloads
-     */
     function parseAnimateLayoutArgs(scopeOrUpdateDom, updateDomOrOptions, options) {
         // animateLayout(updateDom)
         if (typeof scopeOrUpdateDom === "function") {
@@ -9617,11 +9414,125 @@
         const elements = resolveElements(scopeOrUpdateDom);
         const scope = elements[0] || document;
         return {
-            scope: scope instanceof Document ? scope : 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
@@ -10515,7 +10426,7 @@
     const getEventTarget = (element) => element === document.scrollingElement ? window : element;
     function scrollInfo(onScroll, { container = document.scrollingElement, ...options } = {}) {
         if (!container)
-            return noop;
+            return noop$1;
         let containerHandlers = onScrollHandlers.get(container);
         /**
          * Get the onScroll handlers for this container.
@@ -10643,7 +10554,7 @@
 
     function scroll(onScroll, { axis = "y", container = document.scrollingElement, ...options } = {}) {
         if (!container)
-            return noop;
+            return noop$1;
         const optionsWithDefaults = { axis, container, ...options };
         return typeof onScroll === "function"
             ? attachToFunction(onScroll, optionsWithDefaults)
@@ -10804,7 +10715,7 @@
     exports.createBox = createBox;
     exports.createDelta = createDelta;
     exports.createGeneratorEasing = createGeneratorEasing;
-    exports.createProjectionNode = createProjectionNode$1;
+    exports.createProjectionNode = createProjectionNode;
     exports.createRenderBatcher = createRenderBatcher;
     exports.createScopedAnimate = createScopedAnimate;
     exports.cubicBezier = cubicBezier;
@@ -10918,7 +10829,7 @@
     exports.motionValue = motionValue;
     exports.moveItem = moveItem;
     exports.nodeGroup = nodeGroup;
-    exports.noop = noop;
+    exports.noop = noop$1;
     exports.number = number;
     exports.numberValueTypes = numberValueTypes;
     exports.observeTimeline = observeTimeline;