motion 12.7.4 → 12.7.5-alpha.0

package/dist/es/motion-dom/dist/es/animation/NativeAnimation.mjs

@@ -1,92 +1,88 @@
-import { style } from '../render/dom/style.mjs';
+import { setStyle } from '../render/dom/style-set.mjs';
+import { supportsScrollTimeline } from '../utils/supports/scroll-timeline.mjs';
 import { getFinalKeyframe } from './keyframes/get-final.mjs';
-import { hydrateKeyframes } from './keyframes/hydrate.mjs';
+import { WithPromise } from './utils/WithPromise.mjs';
 import { startWaapiAnimation } from './waapi/start-waapi-animation.mjs';
 import { applyGeneratorOptions } from './waapi/utils/apply-generator.mjs';
 import { invariant } from '../../../../motion-utils/dist/es/errors.mjs';
 import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../motion-utils/dist/es/time-conversion.mjs';
 import { noop } from '../../../../motion-utils/dist/es/noop.mjs';
 
-const animationMaps = new WeakMap();
-const animationMapKey = (name, pseudoElement) => `${name}:${pseudoElement}`;
-function getAnimationMap(element) {
-    const map = animationMaps.get(element) || new Map();
-    animationMaps.set(element, map);
-    return map;
-}
 /**
  * NativeAnimation implements AnimationPlaybackControls for the browser's Web Animations API.
  */
-class NativeAnimation {
+class NativeAnimation extends WithPromise {
     constructor(options) {
-        /**
-         * If we already have an animation, we don't need to instantiate one
-         * and can just use this as a controls interface.
-         */
-        if ("animation" in options) {
-            this.animation = options.animation;
+        super();
+        this.finishedTime = null;
+        this.isStopped = false;
+        if (!options)
             return;
-        }
-        const { element, name, keyframes: unresolvedKeyframes, pseudoElement, allowFlatten = false, } = options;
-        let { transition } = options;
+        const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, } = options;
         this.isPseudoElement = Boolean(pseudoElement);
         this.allowFlatten = allowFlatten;
-        /**
-         * Stop any existing animations on the element before reading existing keyframes.
-         *
-         * TODO: Check for VisualElement before using animation state. This is a fallback
-         * for mini animate(). Do this when implementing NativeAnimationExtended.
-         */
-        const animationMap = getAnimationMap(element);
-        const key = animationMapKey(name, pseudoElement || "");
-        const currentAnimation = animationMap.get(key);
-        currentAnimation && currentAnimation.stop();
-        /**
-         * TODO: If these keyframes aren't correctly hydrated then we want to throw
-         * run an instant animation.
-         */
-        const keyframes = hydrateKeyframes(element, name, unresolvedKeyframes, pseudoElement);
-        invariant(typeof transition.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "motion"?`);
-        transition = applyGeneratorOptions(transition);
+        this.options = options;
+        invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "motion"?`);
+        const transition = applyGeneratorOptions(options);
         this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);
         if (transition.autoplay === false) {
             this.animation.pause();
         }
-        this.removeAnimation = () => animationMap.delete(key);
         this.animation.onfinish = () => {
+            this.finishedTime = this.time;
             if (!pseudoElement) {
-                style.set(element, name, getFinalKeyframe(keyframes, transition));
-                this.cancel();
+                const keyframe = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
+                if (this.updateMotionValue) {
+                    this.updateMotionValue(keyframe);
+                }
+                else {
+                    /**
+                     * If we can, we want to commit the final style as set by the user,
+                     * rather than the computed keyframe value supplied by the animation.
+                     */
+                    setStyle(element, name, keyframe);
+                }
+                this.animation.cancel();
             }
+            this.notifyFinished();
         };
-        /**
-         * TODO: Check for VisualElement before using animation state.
-         */
-        animationMap.set(key, this);
     }
     play() {
+        if (this.isStopped)
+            return;
         this.animation.play();
+        if (this.state === "finished") {
+            this.updateFinished();
+        }
     }
     pause() {
         this.animation.pause();
     }
     complete() {
-        this.animation.finish();
+        this.animation.finish?.();
     }
     cancel() {
         try {
             this.animation.cancel();
         }
         catch (e) { }
-        this.removeAnimation();
     }
     stop() {
+        if (this.isStopped)
+            return;
+        this.isStopped = true;
         const { state } = this;
         if (state === "idle" || state === "finished") {
             return;
         }
-        this.commitStyles();
-        this.cancel();
+        if (this.updateMotionValue) {
+            this.updateMotionValue();
+        }
+        else {
+            this.commitStyles();
+        }
+        if (!this.isPseudoElement)
+            this.cancel();
     }
     /**
      * WAAPI doesn't natively have any interruption capabilities.
@@ -106,13 +102,14 @@ class NativeAnimation {
         }
     }
     get duration() {
-        const duration = this.animation.effect?.getComputedTiming().duration || 0;
+        const duration = this.animation.effect?.getComputedTiming?.().duration || 0;
         return millisecondsToSeconds(Number(duration));
     }
     get time() {
         return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
     }
     set time(newTime) {
+        this.finishedTime = null;
         this.animation.currentTime = secondsToMilliseconds(newTime);
     }
     /**
@@ -123,37 +120,37 @@ class NativeAnimation {
         return this.animation.playbackRate;
     }
     set speed(newSpeed) {
+        // Allow backwards playback after finishing
+        if (newSpeed < 0)
+            this.finishedTime = null;
         this.animation.playbackRate = newSpeed;
     }
     get state() {
-        return this.animation.playState;
+        return this.finishedTime !== null
+            ? "finished"
+            : this.animation.playState;
     }
     get startTime() {
         return Number(this.animation.startTime);
     }
-    get finished() {
-        return this.animation.finished;
-    }
-    flatten() {
-        if (this.allowFlatten) {
-            this.animation.effect?.updateTiming({ easing: "linear" });
-        }
+    set startTime(newStartTime) {
+        this.animation.startTime = newStartTime;
     }
     /**
      * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
      */
-    attachTimeline(timeline) {
-        this.animation.timeline = timeline;
+    attachTimeline({ timeline, observe }) {
+        if (this.allowFlatten) {
+            this.animation.effect?.updateTiming({ easing: "linear" });
+        }
         this.animation.onfinish = null;
-        return noop;
-    }
-    /**
-     * Allows the animation to be awaited.
-     *
-     * @deprecated Use `finished` instead.
-     */
-    then(onResolve, onReject) {
-        return this.finished.then(onResolve).catch(onReject);
+        if (supportsScrollTimeline()) {
+            this.animation.timeline = timeline;
+            return noop;
+        }
+        else {
+            return observe(this);
+        }
     }
 }
 

package/dist/es/motion-dom/dist/es/animation/NativeAnimationExtended.mjs

@@ -0,0 +1,65 @@
+import { JSAnimation } from './JSAnimation.mjs';
+import { NativeAnimation } from './NativeAnimation.mjs';
+import { replaceTransitionType } from './utils/replace-transition-type.mjs';
+import { replaceStringEasing } from './waapi/utils/unsupported-easing.mjs';
+import { secondsToMilliseconds } from '../../../../motion-utils/dist/es/time-conversion.mjs';
+
+/**
+ * 10ms is chosen here as it strikes a balance between smooth
+ * results (more than one keyframe per frame at 60fps) and
+ * keyframe quantity.
+ */
+const sampleDelta = 10; //ms
+class NativeAnimationExtended extends NativeAnimation {
+    constructor(options) {
+        /**
+         * The base NativeAnimation function only supports a subset
+         * of Motion easings, and WAAPI also only supports some
+         * easing functions via string/cubic-bezier definitions.
+         *
+         * This function replaces those unsupported easing functions
+         * with a JS easing function. This will later get compiled
+         * to a linear() easing function.
+         */
+        replaceStringEasing(options);
+        /**
+         * Ensure we replace the transition type with a generator function
+         * before passing to WAAPI.
+         *
+         * TODO: Does this have a better home? It could be shared with
+         * JSAnimation.
+         */
+        replaceTransitionType(options);
+        super(options);
+        if (options.startTime) {
+            this.startTime = options.startTime;
+        }
+        this.options = options;
+    }
+    /**
+     * WAAPI doesn't natively have any interruption capabilities.
+     *
+     * Rather than read commited styles back out of the DOM, we can
+     * create a renderless JS animation and sample it twice to calculate
+     * its current value, "previous" value, and therefore allow
+     * Motion to calculate velocity for any subsequent animation.
+     */
+    updateMotionValue(value) {
+        const { motionValue, onUpdate, onComplete, element, ...options } = this.options;
+        if (!motionValue)
+            return;
+        if (value !== undefined) {
+            motionValue.set(value);
+            return;
+        }
+        const sampleAnimation = new JSAnimation({
+            ...options,
+            autoplay: false,
+        });
+        const sampleTime = secondsToMilliseconds(this.finishedTime ?? this.time);
+        motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
+        sampleAnimation.stop();
+    }
+}
+
+export { NativeAnimationExtended };

package/dist/es/motion-dom/dist/es/animation/NativeAnimationWrapper.mjs

@@ -0,0 +1,14 @@
+import { NativeAnimation } from './NativeAnimation.mjs';
+
+class NativeAnimationWrapper extends NativeAnimation {
+    constructor(animation) {
+        super();
+        this.animation = animation;
+        animation.onfinish = () => {
+            this.finishedTime = this.time;
+            this.notifyFinished();
+        };
+    }
+}
+
+export { NativeAnimationWrapper };

package/dist/es/{framer-motion/dist/es/animation/animators → motion-dom/dist/es/animation}/drivers/driver-frameloop.mjs

@@ -1,5 +1,5 @@
-import { frame, cancelFrame, frameData } from '../../../../../../motion-dom/dist/es/frameloop/frame.mjs';
-import { time } from '../../../../../../motion-dom/dist/es/frameloop/sync-time.mjs';
+import { time } from '../../frameloop/sync-time.mjs';
+import { frame, cancelFrame, frameData } from '../../frameloop/frame.mjs';
 
 const frameloopDriver = (update) => {
     const passTimestamp = ({ timestamp }) => update(timestamp);

package/dist/es/{framer-motion → motion-dom}/dist/es/animation/generators/keyframes.mjs

@@ -1,9 +1,9 @@
-import { easeInOut } from '../../easing/ease.mjs';
-import { isEasingArray } from '../../easing/utils/is-easing-array.mjs';
-import { easingDefinitionToFunction } from '../../easing/utils/map.mjs';
 import { interpolate } from '../../utils/interpolate.mjs';
-import { defaultOffset } from '../../utils/offsets/default.mjs';
-import { convertOffsetToTimes } from '../../utils/offsets/time.mjs';
+import { defaultOffset } from '../keyframes/offsets/default.mjs';
+import { convertOffsetToTimes } from '../keyframes/offsets/time.mjs';
+import { easeInOut } from '../../../../../motion-utils/dist/es/easing/ease.mjs';
+import { isEasingArray } from '../../../../../motion-utils/dist/es/easing/utils/is-easing-array.mjs';
+import { easingDefinitionToFunction } from '../../../../../motion-utils/dist/es/easing/utils/map.mjs';
 
 function defaultEasing(values, easing) {
     return values.map(() => easing || easeInOut).splice(0, values.length - 1);

package/dist/es/{framer-motion → motion-dom}/dist/es/animation/generators/spring/find.mjs

@@ -1,7 +1,7 @@
-import { clamp } from '../../../utils/clamp.mjs';
 import { springDefaults } from './defaults.mjs';
 import { warning } from '../../../../../../motion-utils/dist/es/errors.mjs';
 import { secondsToMilliseconds, millisecondsToSeconds } from '../../../../../../motion-utils/dist/es/time-conversion.mjs';
+import { clamp } from '../../../../../../motion-utils/dist/es/clamp.mjs';
 
 const safeMin = 0.001;
 function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) {

package/dist/es/{framer-motion → motion-dom}/dist/es/animation/generators/spring/index.mjs

@@ -1,12 +1,11 @@
-import { clamp } from '../../../utils/clamp.mjs';
+import { generateLinearEasing } from '../../waapi/utils/linear.mjs';
+import { calcGeneratorDuration, maxGeneratorDuration } from '../utils/calc-duration.mjs';
+import { createGeneratorEasing } from '../utils/create-generator-easing.mjs';
 import { calcGeneratorVelocity } from '../utils/velocity.mjs';
 import { springDefaults } from './defaults.mjs';
 import { findSpring, calcAngularFreq } from './find.mjs';
 import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../../../motion-utils/dist/es/time-conversion.mjs';
-import { createGeneratorEasing } from '../../../../../../motion-dom/dist/es/animation/generators/utils/create-generator-easing.mjs';
-import { supportsLinearEasing } from '../../../../../../motion-dom/dist/es/utils/supports/linear-easing.mjs';
-import { calcGeneratorDuration, maxGeneratorDuration } from '../../../../../../motion-dom/dist/es/animation/generators/utils/calc-duration.mjs';
-import { generateLinearEasing } from '../../../../../../motion-dom/dist/es/animation/waapi/utils/linear.mjs';
+import { clamp } from '../../../../../../motion-utils/dist/es/clamp.mjs';
 
 const durationKeys = ["duration", "bounce"];
 const physicsKeys = ["stiffness", "damping", "mass"];
@@ -168,7 +167,7 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
 }
 spring.applyToOptions = (options) => {
     const generatorOptions = createGeneratorEasing(options, 100, spring);
-    options.ease = supportsLinearEasing() ? generatorOptions.ease : "easeOut";
+    options.ease = generatorOptions.ease;
     options.duration = secondsToMilliseconds(generatorOptions.duration);
     options.type = "keyframes";
     return options;

package/dist/es/{framer-motion/dist/es/render/dom → motion-dom/dist/es/animation/keyframes}/DOMKeyframesResolver.mjs

@@ -1,11 +1,11 @@
-import { isNone } from '../../animation/utils/is-none.mjs';
-import { positionalKeys } from '../html/utils/keys-position.mjs';
-import { makeNoneKeyframesAnimatable } from '../html/utils/make-none-animatable.mjs';
-import { KeyframeResolver } from '../utils/KeyframesResolver.mjs';
-import { getVariableValue } from './utils/css-variables-conversion.mjs';
-import { isCSSVariableToken } from './utils/is-css-variable.mjs';
+import { positionalKeys } from '../../render/utils/keys-position.mjs';
+import { findDimensionValueType } from '../../value/types/dimensions.mjs';
+import { getVariableValue } from '../utils/css-variables-conversion.mjs';
+import { isCSSVariableToken } from '../utils/is-css-variable.mjs';
+import { KeyframeResolver } from './KeyframesResolver.mjs';
+import { isNone } from './utils/is-none.mjs';
+import { makeNoneKeyframesAnimatable } from './utils/make-none-animatable.mjs';
 import { isNumOrPxType, positionalValues } from './utils/unit-conversion.mjs';
-import { findDimensionValueType } from './value-types/dimensions.mjs';
 
 class DOMKeyframesResolver extends KeyframeResolver {
     constructor(unresolvedKeyframes, onComplete, name, motionValue, element) {
@@ -80,7 +80,8 @@ class DOMKeyframesResolver extends KeyframeResolver {
         const { unresolvedKeyframes, name } = this;
         const noneKeyframeIndexes = [];
         for (let i = 0; i < unresolvedKeyframes.length; i++) {
-            if (isNone(unresolvedKeyframes[i])) {
+            if (unresolvedKeyframes[i] === null ||
+                isNone(unresolvedKeyframes[i])) {
                 noneKeyframeIndexes.push(i);
             }
         }

package/dist/es/{framer-motion/dist/es/render/utils → motion-dom/dist/es/animation/keyframes}/KeyframesResolver.mjs

@@ -1,9 +1,11 @@
-import { removeNonTranslationalTransform } from '../dom/utils/unit-conversion.mjs';
-import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import { fillWildcards } from './utils/fill-wildcards.mjs';
+import { removeNonTranslationalTransform } from './utils/unit-conversion.mjs';
+import { frame } from '../../frameloop/frame.mjs';
 
 const toResolve = new Set();
 let isScheduled = false;
 let anyNeedsMeasurement = false;
+let isForced = false;
 function measureAllKeyframes() {
     if (anyNeedsMeasurement) {
         const resolversToMeasure = Array.from(toResolve).filter((resolver) => resolver.needsMeasurement);
@@ -43,7 +45,7 @@ function measureAllKeyframes() {
     }
     anyNeedsMeasurement = false;
     isScheduled = false;
-    toResolve.forEach((resolver) => resolver.complete());
+    toResolve.forEach((resolver) => resolver.complete(isForced));
     toResolve.clear();
 }
 function readAllKeyframes() {
@@ -55,8 +57,10 @@ function readAllKeyframes() {
     });
 }
 function flushKeyframeResolvers() {
+    isForced = true;
     readAllKeyframes();
     measureAllKeyframes();
+    isForced = false;
 }
 class KeyframeResolver {
     constructor(unresolvedKeyframes, onComplete, name, motionValue, element, isAsync = false) {
@@ -105,47 +109,36 @@ class KeyframeResolver {
     }
     readKeyframes() {
         const { unresolvedKeyframes, name, element, motionValue } = this;
-        /**
-         * If a keyframe is null, we hydrate it either by reading it from
-         * the instance, or propagating from previous keyframes.
-         */
-        for (let i = 0; i < unresolvedKeyframes.length; i++) {
-            if (unresolvedKeyframes[i] === null) {
-                /**
-                 * If the first keyframe is null, we need to find its value by sampling the element
-                 */
-                if (i === 0) {
-                    const currentValue = motionValue?.get();
-                    const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
-                    if (currentValue !== undefined) {
-                        unresolvedKeyframes[0] = currentValue;
-                    }
-                    else if (element && name) {
-                        const valueAsRead = element.readValue(name, finalKeyframe);
-                        if (valueAsRead !== undefined && valueAsRead !== null) {
-                            unresolvedKeyframes[0] = valueAsRead;
-                        }
-                    }
-                    if (unresolvedKeyframes[0] === undefined) {
-                        unresolvedKeyframes[0] = finalKeyframe;
-                    }
-                    if (motionValue && currentValue === undefined) {
-                        motionValue.set(unresolvedKeyframes[0]);
-                    }
-                }
-                else {
-                    unresolvedKeyframes[i] = unresolvedKeyframes[i - 1];
+        // If initial keyframe is null we need to read it from the DOM
+        if (unresolvedKeyframes[0] === null) {
+            const currentValue = motionValue?.get();
+            // TODO: This doesn't work if the final keyframe is a wildcard
+            const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
+            if (currentValue !== undefined) {
+                unresolvedKeyframes[0] = currentValue;
+            }
+            else if (element && name) {
+                const valueAsRead = element.readValue(name, finalKeyframe);
+                if (valueAsRead !== undefined && valueAsRead !== null) {
+                    unresolvedKeyframes[0] = valueAsRead;
                 }
             }
+            if (unresolvedKeyframes[0] === undefined) {
+                unresolvedKeyframes[0] = finalKeyframe;
+            }
+            if (motionValue && currentValue === undefined) {
+                motionValue.set(unresolvedKeyframes[0]);
+            }
         }
+        fillWildcards(unresolvedKeyframes);
     }
     setFinalKeyframe() { }
     measureInitialState() { }
     renderEndStyles() { }
     measureEndState() { }
-    complete() {
+    complete(isForced = false) {
         this.isComplete = true;
-        this.onComplete(this.unresolvedKeyframes, this.finalKeyframe);
+        this.onComplete(this.unresolvedKeyframes, this.finalKeyframe, isForced);
         toResolve.delete(this);
     }
     cancel() {

package/dist/es/motion-dom/dist/es/animation/keyframes/get-final.mjs

@@ -1,9 +1,8 @@
 const isNotNull = (value) => value !== null;
-function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
+function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe, speed = 1) {
     const resolvedKeyframes = keyframes.filter(isNotNull);
-    const index = repeat && repeatType !== "loop" && repeat % 2 === 1
-        ? 0
-        : resolvedKeyframes.length - 1;
+    const useFirstKeyframe = speed < 0 || (repeat && repeatType !== "loop" && repeat % 2 === 1);
+    const index = useFirstKeyframe ? 0 : resolvedKeyframes.length - 1;
     return !index || finalKeyframe === undefined
         ? resolvedKeyframes[index]
         : finalKeyframe;

package/dist/es/{framer-motion/dist/es/utils → motion-dom/dist/es/animation/keyframes}/offsets/fill.mjs

@@ -1,5 +1,5 @@
-import { mixNumber } from '../mix/number.mjs';
-import { progress } from '../../../../../motion-utils/dist/es/progress.mjs';
+import { mixNumber } from '../../../utils/mix/number.mjs';
+import { progress } from '../../../../../../motion-utils/dist/es/progress.mjs';
 
 function fillOffset(offset, remaining) {
     const min = offset[offset.length - 1];

package/dist/es/motion-dom/dist/es/animation/keyframes/utils/apply-px-defaults.mjs

@@ -0,0 +1,11 @@
+import { pxValues } from '../../waapi/utils/px-values.mjs';
+
+function applyPxDefaults(keyframes, name) {
+    for (let i = 0; i < keyframes.length; i++) {
+        if (typeof keyframes[i] === "number" && pxValues.has(name)) {
+            keyframes[i] = keyframes[i] + "px";
+        }
+    }
+}
+
+export { applyPxDefaults };

package/dist/es/motion-dom/dist/es/animation/keyframes/utils/fill-wildcards.mjs

@@ -0,0 +1,7 @@
+function fillWildcards(keyframes) {
+    for (let i = 1; i < keyframes.length; i++) {
+        keyframes[i] ?? (keyframes[i] = keyframes[i - 1]);
+    }
+}
+
+export { fillWildcards };

package/dist/es/{framer-motion/dist/es/animation → motion-dom/dist/es/animation/keyframes}/utils/is-none.mjs

@@ -1,4 +1,4 @@
-import { isZeroValueString } from '../../utils/is-zero-value-string.mjs';
+import { isZeroValueString } from '../../../../../../motion-utils/dist/es/is-zero-value-string.mjs';
 
 function isNone(value) {
     if (typeof value === "number") {

package/dist/es/{framer-motion/dist/es/render/html → motion-dom/dist/es/animation/keyframes}/utils/make-none-animatable.mjs

@@ -1,5 +1,5 @@
 import { analyseComplexValue } from '../../../value/types/complex/index.mjs';
-import { getAnimatableNone } from '../../dom/value-types/animatable-none.mjs';
+import { getAnimatableNone } from '../../../value/types/utils/animatable-none.mjs';
 
 /**
  * If we encounter keyframes like "none" or "0" and we also have keyframes like

package/dist/es/{framer-motion/dist/es/render/dom → motion-dom/dist/es/animation/keyframes}/utils/unit-conversion.mjs

@@ -1,7 +1,7 @@
+import { parseValueFromTransform } from '../../../render/dom/parse-transform.mjs';
+import { transformPropOrder } from '../../../render/utils/keys-transform.mjs';
 import { number } from '../../../value/types/numbers/index.mjs';
 import { px } from '../../../value/types/numbers/units.mjs';
-import { transformPropOrder } from '../../html/utils/keys-transform.mjs';
-import { parseValueFromTransform } from '../../html/utils/parse-transform.mjs';
 
 const isNumOrPxType = (v) => v === number || v === px;
 const transformKeys = new Set(["x", "y", "z"]);

package/dist/es/motion-dom/dist/es/animation/utils/WithPromise.mjs

@@ -0,0 +1,28 @@
+class WithPromise {
+    constructor() {
+        this.count = 0;
+        this.updateFinished();
+    }
+    get finished() {
+        return this._finished;
+    }
+    updateFinished() {
+        this.count++;
+        this._finished = new Promise((resolve) => {
+            this.resolve = resolve;
+        });
+    }
+    notifyFinished() {
+        this.resolve();
+    }
+    /**
+     * Allows the animation to be awaited.
+     *
+     * @deprecated Use `finished` instead.
+     */
+    then(onResolve, onReject) {
+        return this.finished.then(onResolve, onReject);
+    }
+}
+
+export { WithPromise };

package/dist/es/motion-dom/dist/es/animation/utils/active-animations.mjs

@@ -0,0 +1,9 @@
+const animationMaps = new WeakMap();
+const animationMapKey = (name, pseudoElement = "") => `${name}:${pseudoElement}`;
+function getAnimationMap(element) {
+    const map = animationMaps.get(element) || new Map();
+    animationMaps.set(element, map);
+    return map;
+}
+
+export { animationMapKey, getAnimationMap };

package/dist/es/{framer-motion/dist/es/animation/animators → motion-dom/dist/es/animation}/utils/can-animate.mjs

@@ -1,6 +1,6 @@
-import { isAnimatable } from '../../utils/is-animatable.mjs';
-import { warning } from '../../../../../../motion-utils/dist/es/errors.mjs';
-import { isGenerator } from '../../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
+import { isGenerator } from '../generators/utils/is-generator.mjs';
+import { isAnimatable } from './is-animatable.mjs';
+import { warning } from '../../../../../motion-utils/dist/es/errors.mjs';
 
 function hasKeyframesChanged(keyframes) {
     const current = keyframes[0];

package/dist/es/{framer-motion/dist/es/render/dom → motion-dom/dist/es/animation}/utils/css-variables-conversion.mjs

@@ -1,6 +1,6 @@
-import { isNumericalString } from '../../../utils/is-numerical-string.mjs';
 import { isCSSVariableToken } from './is-css-variable.mjs';
-import { invariant } from '../../../../../../motion-utils/dist/es/errors.mjs';
+import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
+import { isNumericalString } from '../../../../../motion-utils/dist/es/is-numerical-string.mjs';
 
 /**
  * Parse Framer's special CSS variable format into a CSS token and a fallback.

package/dist/es/motion-dom/dist/es/animation/utils/replace-transition-type.mjs

@@ -0,0 +1,18 @@
+import { inertia } from '../generators/inertia.mjs';
+import { keyframes } from '../generators/keyframes.mjs';
+import { spring } from '../generators/spring/index.mjs';
+
+const transitionTypeMap = {
+    decay: inertia,
+    inertia,
+    tween: keyframes,
+    keyframes: keyframes,
+    spring,
+};
+function replaceTransitionType(transition) {
+    if (typeof transition.type === "string") {
+        transition.type = transitionTypeMap[transition.type];
+    }
+}
+
+export { replaceTransitionType };

package/dist/es/motion-dom/dist/es/animation/waapi/easing/is-supported.mjs

@@ -1,6 +1,6 @@
-import { isBezierDefinition } from '../../../utils/is-bezier-definition.mjs';
 import { supportsLinearEasing } from '../../../utils/supports/linear-easing.mjs';
 import { supportedWaapiEasing } from './supported.mjs';
+import { isBezierDefinition } from '../../../../../../motion-utils/dist/es/easing/utils/is-bezier-definition.mjs';
 
 function isWaapiSupportedEasing(easing) {
     return Boolean((typeof easing === "function" && supportsLinearEasing()) ||