motion-v 0.5.2-beta.1 → 0.6.1

package/dist/es/animation/use-animate.mjs

@@ -1,5 +1,5 @@
 import { ref, onUnmounted } from "vue";
-import { createScopedAnimate } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/animation/animate/index.mjs";
+import { createScopedAnimate } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/animate/index.mjs";
 function useAnimate() {
   const dom = ref(null);
   const domProxy = new Proxy(dom, {

package/dist/es/components/LayoutGroup.vue.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, onUpdated, onBeforeUpdate, renderSlot, unref } from "vue";
+import { defineComponent, renderSlot, unref } from "vue";
 import { useLayoutGroupProvider } from "./use-layout-group.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LayoutGroup",
@@ -8,12 +8,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const { forceRender, key, group } = useLayoutGroupProvider(props);
-    onUpdated(() => {
-    });
-    onBeforeUpdate(() => {
-      group.dirty();
-    });
+    const { forceRender, key } = useLayoutGroupProvider(props);
     return (_ctx, _cache) => {
       return renderSlot(_ctx.$slots, "default", {
         renderKey: unref(key),

package/dist/es/components/Motion.vue.mjs

@@ -1,10 +1,10 @@
-import { defineComponent, mergeDefaults, ref, useAttrs, getCurrentInstance, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onBeforeUpdate, onUpdated, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
+import { defineComponent, mergeDefaults, useAttrs, getCurrentInstance, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onBeforeUpdate, onUpdated, ref, openBlock, createBlock, unref, withCtx, renderSlot } from "vue";
 import { injectMotion, injectLayoutGroup, provideMotion } from "./context.mjs";
 import { convertSvgStyleToAttributes, createStyles } from "../state/style.mjs";
 import { Primitive } from "./Primitive.mjs";
 import { MotionState } from "../state/motion-state.mjs";
 import { injectAnimatePresence } from "./presence.mjs";
-import { getMotionElement } from "./utils.mjs";
+import { getMotionElement, checkMotionIsHidden } from "./utils.mjs";
 import { useMotionConfig } from "./motion-config/context.mjs";
 import { isMotionValue } from "../utils/motion-value.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -27,6 +27,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     transition: {},
     layoutGroup: {},
     motionConfig: {},
+    onAnimationComplete: { type: Function },
+    onUpdate: { type: Function },
     layout: { type: [Boolean, String] },
     layoutId: {},
     layoutScroll: { type: Boolean },
@@ -80,22 +82,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     dragElastic: 0.2,
     dragMomentum: true,
     whileDrag: void 0,
-    crossfade: void 0
+    crossfade: true
   }),
   setup(__props) {
     const props = __props;
-    const { initial: presenceInitial, safeUnmount } = injectAnimatePresence({ initial: ref(void 0), safeUnmount: () => true });
+    const animatePresenceContext = injectAnimatePresence({});
     const parentState = injectMotion(null);
     const attrs = useAttrs();
     const layoutGroup = injectLayoutGroup({});
     const config = useMotionConfig();
-    const state = new MotionState(
-      {
+    function getLayoutId() {
+      if (layoutGroup.id && props.layoutId)
+        return `${layoutGroup.id}-${props.layoutId}`;
+      return props.layoutId || void 0;
+    }
+    function getMotionProps() {
+      return {
         ...attrs,
         ...props,
+        layoutId: getLayoutId(),
+        transition: props.transition ?? config.value.transition,
         layoutGroup,
-        motionConfig: config.value
-      },
+        motionConfig: config.value,
+        initial: animatePresenceContext.initial === false ? animatePresenceContext.initial : props.initial === true ? void 0 : props.initial
+      };
+    }
+    const state = new MotionState(
+      getMotionProps(),
       parentState
     );
     provideMotion(state);
@@ -104,29 +117,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       state.beforeMount();
     });
     onMounted(() => {
-      state.mount(getMotionElement(instance.$el), {
-        ...attrs,
-        ...props,
-        transition: props.transition ?? config.value.transition,
-        layoutGroup,
-        motionConfig: config.value,
-        initial: presenceInitial.value === false ? presenceInitial.value : props.initial === true ? void 0 : props.initial
-      });
+      state.mount(getMotionElement(instance.$el), getMotionProps(), checkMotionIsHidden(instance));
     });
     onBeforeUnmount(() => state.beforeUnmount());
     onUnmounted(() => {
-      if (safeUnmount(getMotionElement(instance.$el)))
+      const el = getMotionElement(instance.$el);
+      if (!(el == null ? void 0 : el.isConnected)) {
         state.unmount();
+      }
+    });
+    onBeforeUpdate(() => {
+      state.beforeUpdate();
     });
-    onBeforeUpdate(() => state.beforeUpdate());
     onUpdated(() => {
-      state.update({
-        ...attrs,
-        ...props,
-        transition: props.transition ?? config.value.transition,
-        motionConfig: config.value,
-        initial: presenceInitial.value === false ? presenceInitial.value : props.initial === true ? void 0 : props.initial
-      });
+      state.update(getMotionProps());
     });
     function getProps() {
       const isSVG = state.visualElement.type === "svg";
@@ -145,7 +149,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         Object.assign(styleProps, style);
       }
       if (!state.isMounted()) {
-        Object.assign(styleProps, state.target);
+        Object.assign(styleProps, state.baseTarget);
       }
       if (props.drag && props.dragListener !== false) {
         Object.assign(styleProps, {
@@ -162,16 +166,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       attrsProps.style = styleProps;
       return attrsProps;
     }
+    const PrimitiveRef = ref();
+    function onMotionComplete() {
+      var _a;
+      if (props.asChild) {
+        (_a = PrimitiveRef.value) == null ? void 0 : _a.$forceUpdate();
+      }
+    }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Primitive), mergeProps({
+      var _a;
+      return openBlock(), createBlock(unref(Primitive), {
+        ref_key: "PrimitiveRef",
+        ref: PrimitiveRef,
+        "get-props": getProps,
         as: _ctx.as,
-        "as-child": _ctx.asChild
-      }, getProps()), {
+        "as-child": _ctx.asChild,
+        "data-motion-group": ((_a = unref(layoutGroup).key) == null ? void 0 : _a.value) || void 0,
+        onMotioncomplete: onMotionComplete
+      }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16, ["as", "as-child"]);
+      }, 8, ["as", "as-child", "data-motion-group"]);
     };
   }
 });

package/dist/es/components/Primitive.mjs

@@ -11,17 +11,25 @@ const Primitive = defineComponent({
     as: {
       type: [String, Object],
       default: "div"
+    },
+    getProps: {
+      type: Function,
+      default: () => ({})
     }
   },
   setup(props, { attrs, slots }) {
     const asTag = props.asChild ? "template" : props.as;
     const SELF_CLOSING_TAGS = ["area", "img", "input"];
-    if (typeof asTag === "string" && SELF_CLOSING_TAGS.includes(asTag))
-      return () => h(asTag, attrs);
-    if (asTag !== "template") {
-      return () => h(props.as, attrs, { default: slots.default });
-    }
-    return () => h(Slot, attrs, { default: slots.default });
+    return () => {
+      const motionProps = props.getProps();
+      const allAttrs = { ...attrs, ...motionProps };
+      if (typeof asTag === "string" && SELF_CLOSING_TAGS.includes(asTag))
+        return h(asTag, allAttrs);
+      if (asTag !== "template") {
+        return h(props.as, allAttrs, { default: slots.default });
+      }
+      return h(Slot, allAttrs, { default: slots.default });
+    };
   }
 });
 export {

package/dist/es/components/{AnimatePresence.vue.mjs → animate-presence/AnimatePresence.vue.mjs}

@@ -1,6 +1,6 @@
-import { defineComponent, toRefs, openBlock, createBlock, resolveDynamicComponent, TransitionGroup, Transition, withCtx, renderSlot } from "vue";
-import { mountedStates } from "../state/motion-state.mjs";
-import { provideAnimatePresence, doneCallbacks, removeDoneCallback } from "./presence.mjs";
+import { defineComponent, onMounted, onUnmounted, openBlock, createBlock, resolveDynamicComponent, TransitionGroup, Transition, withCtx, renderSlot } from "vue";
+import { mountedStates } from "../../state/motion-state.mjs";
+import { provideAnimatePresence, removeDoneCallback, doneCallbacks } from "../presence.mjs";
 import { usePopLayout } from "./use-pop-layout.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -12,42 +12,61 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     mode: { default: "sync" },
     initial: { type: Boolean, default: true },
     multiple: { type: Boolean, default: false },
-    as: {}
+    as: {},
+    custom: {},
+    onExitComplete: {}
   },
   setup(__props) {
     const props = __props;
-    const { initial } = toRefs(props);
-    provideAnimatePresence({
-      initial,
-      safeUnmount(el) {
-        return !doneCallbacks.has(el);
-      }
+    const presenceContext = {
+      initial: props.initial,
+      custom: props.custom
+    };
+    provideAnimatePresence(presenceContext);
+    onMounted(() => {
+      presenceContext.initial = void 0;
     });
     function enter(el) {
       const state = mountedStates.get(el);
       if (!state) {
         return;
       }
+      state.isVShow = true;
       removeDoneCallback(el);
       state.setActive("exit", false);
     }
-    const { addPopStyle, removePopStyle } = usePopLayout(props);
+    const { addPopStyle, removePopStyle, styles } = usePopLayout(props);
+    const exitDom = /* @__PURE__ */ new Map();
+    onUnmounted(() => {
+      exitDom.clear();
+    });
     function exit(el, done) {
       const state = mountedStates.get(el);
       if (!state) {
         return done();
       }
+      exitDom.set(el, true);
       removeDoneCallback(el);
       addPopStyle(state);
       function doneCallback(e) {
         var _a, _b;
-        removePopStyle(state);
         if ((_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.isExit) {
+          const projection = state.visualElement.projection;
+          if ((projection == null ? void 0 : projection.animationProgress) > 0 && !state.isSafeToRemove && !state.isVShow) {
+            return;
+          }
           removeDoneCallback(el);
-          (_b = state.visualElement.projection) == null ? void 0 : _b.willUpdate();
+          exitDom.delete(el);
+          if (exitDom.size === 0) {
+            (_b = props.onExitComplete) == null ? void 0 : _b.call(props);
+          }
+          if (!styles.has(state)) {
+            state.willUpdate("done");
+          }
           done();
-          if (!el.isConnected) {
-            state.unmount();
+          removePopStyle(state);
+          if (!(el == null ? void 0 : el.isConnected)) {
+            state.unmount(true);
           }
         }
       }

package/dist/es/components/{use-pop-layout.mjs → animate-presence/use-pop-layout.mjs}

@@ -1,4 +1,4 @@
-import { useMotionConfig } from "./motion-config/context.mjs";
+import { useMotionConfig } from "../motion-config/context.mjs";
 function usePopLayout(props) {
   const styles = /* @__PURE__ */ new WeakMap();
   const config = useMotionConfig();
@@ -37,14 +37,17 @@ function usePopLayout(props) {
   }
   function removePopStyle(state) {
     const style = styles.get(state);
-    if (style) {
-      styles.delete(state);
+    if (!style)
+      return;
+    styles.delete(state);
+    requestIdleCallback(() => {
       document.head.removeChild(style);
-    }
+    });
   }
   return {
     addPopStyle,
-    removePopStyle
+    removePopStyle,
+    styles
   };
 }
 export {

package/dist/es/components/group.mjs

@@ -20,9 +20,12 @@ function nodeGroup() {
         unsubscribe();
         subscriptions.delete(node);
       }
-      dirtyAll();
     },
-    dirty: dirtyAll
+    dirty: dirtyAll,
+    didUpdate: () => {
+      var _a;
+      (_a = nodes[0]) == null ? void 0 : _a.didUpdate();
+    }
   };
 }
 export {

package/dist/es/components/presence.mjs

@@ -1,7 +1,5 @@
-import { ref } from "vue";
 import { createContext } from "../utils/createContext.mjs";
 const doneCallbacks = /* @__PURE__ */ new WeakMap();
-ref(/* @__PURE__ */ new WeakMap());
 function removeDoneCallback(element) {
   const prevDoneCallback = doneCallbacks.get(element);
   if (prevDoneCallback) {

package/dist/es/components/utils.mjs

@@ -3,6 +3,13 @@ function getMotionElement(el) {
     return getMotionElement(el.nextSibling);
   return el;
 }
+function checkMotionIsHidden(instance) {
+  var _a;
+  const isHidden = ((_a = getMotionElement(instance.$el)) == null ? void 0 : _a.style.display) === "none";
+  const hasTransition = instance.$.vnode.transition;
+  return hasTransition && isHidden;
+}
 export {
+  checkMotionIsHidden,
   getMotionElement
 };

package/dist/es/constants/index.mjs

@@ -2,7 +2,8 @@ const components = {
   motion: [
     "Motion",
     "AnimatePresence",
-    "LayoutGroup"
+    "LayoutGroup",
+    "MotionConfig"
   ]
 };
 const utilities = {

package/dist/es/external/.pnpm/{framer-motion@11.15.0 → framer-motion@11.16.6}/external/framer-motion/dist/es/animation/animate/index.mjs

@@ -1,4 +1,5 @@
-import { GroupPlaybackControls } from "../GroupPlaybackControls.mjs";
+import { GroupPlaybackControls } from "../../../../../../../motion-dom@11.16.4/external/motion-dom/dist/es/animation/controls/Group.mjs";
+import "../../../../../../../motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
 import { animateSequence } from "./sequence.mjs";
 import { animateSubject } from "./subject.mjs";
 function isSequence(value) {

package/dist/es/external/.pnpm/{framer-motion@11.15.0 → framer-motion@11.16.6}/external/framer-motion/dist/es/animation/animate/resolve-subjects.mjs

@@ -1,4 +1,5 @@
-import { resolveElements } from "motion-dom";
+import "../../../../../../../motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
+import { resolveElements } from "../../../../../../../motion-dom@11.16.4/external/motion-dom/dist/es/utils/resolve-elements.mjs";
 import { isDOMKeyframes } from "../utils/is-dom-keyframes.mjs";
 function resolveSubjects(subject, keyframes, scope, selectorCache) {
   if (typeof subject === "string" && isDOMKeyframes(keyframes)) {

package/dist/es/external/.pnpm/{framer-motion@11.15.0 → framer-motion@11.16.6}/external/framer-motion/dist/es/animation/animate/subject.mjs

@@ -1,4 +1,4 @@
-import { invariant } from "../../../../../../../motion-utils@11.14.3/external/motion-utils/dist/es/errors.mjs";
+import { invariant } from "../../../../../../../motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
 import { visualElementStore } from "../../render/store.mjs";
 import { isMotionValue } from "../../value/utils/is-motion-value.mjs";
 import { animateTarget } from "../interfaces/visual-element-target.mjs";

package/dist/es/external/.pnpm/{framer-motion@11.15.0 → framer-motion@11.16.6}/external/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs

@@ -1,19 +1,19 @@
+import "../../../../../../../motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
+import { noop } from "../../../../../../../motion-utils@11.16.0/external/motion-utils/dist/es/noop.mjs";
+import { millisecondsToSeconds, secondsToMilliseconds } from "../../../../../../../motion-utils@11.16.0/external/motion-utils/dist/es/time-conversion.mjs";
+import { isGenerator } from "../../../../../../../motion-dom@11.16.4/external/motion-dom/dist/es/animation/generators/utils/is-generator.mjs";
+import { attachTimeline } from "../../../../../../../motion-dom@11.16.4/external/motion-dom/dist/es/animation/waapi/utils/attach-timeline.mjs";
+import { isWaapiSupportedEasing } from "../../../../../../../motion-dom@11.16.4/external/motion-dom/dist/es/animation/waapi/utils/easing.mjs";
+import { supportsLinearEasing } from "../../../../../../../motion-dom@11.16.4/external/motion-dom/dist/es/utils/supports/linear-easing.mjs";
 import { anticipate } from "../../easing/anticipate.mjs";
 import { backInOut } from "../../easing/back.mjs";
 import { circInOut } from "../../easing/circ.mjs";
 import { DOMKeyframesResolver } from "../../render/dom/DOMKeyframesResolver.mjs";
-import "../../../../../../../motion-utils@11.14.3/external/motion-utils/dist/es/errors.mjs";
-import { noop } from "../../../../../../../motion-utils@11.14.3/external/motion-utils/dist/es/noop.mjs";
-import { millisecondsToSeconds, secondsToMilliseconds } from "../../utils/time-conversion.mjs";
-import { isGenerator } from "../generators/utils/is-generator.mjs";
 import { BaseAnimation } from "./BaseAnimation.mjs";
 import { MainThreadAnimation } from "./MainThreadAnimation.mjs";
 import { acceleratedValues } from "./utils/accelerated-values.mjs";
 import { startWaapiAnimation } from "./waapi/index.mjs";
-import { isWaapiSupportedEasing } from "./waapi/easing.mjs";
-import { attachTimeline } from "./waapi/utils/attach-timeline.mjs";
 import { getFinalKeyframe } from "./waapi/utils/get-final-keyframe.mjs";
-import { supportsLinearEasing } from "./waapi/utils/supports-linear-easing.mjs";
 import { supportsWaapi } from "./waapi/utils/supports-waapi.mjs";
 const sampleDelta = 10;
 const maxDuration = 2e4;

package/dist/es/external/.pnpm/{framer-motion@11.15.0 → framer-motion@11.16.6}/external/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs

@@ -1,17 +1,17 @@
+import { invariant } from "../../../../../../../motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
+import { millisecondsToSeconds, secondsToMilliseconds } from "../../../../../../../motion-utils@11.16.0/external/motion-utils/dist/es/time-conversion.mjs";
+import { calcGeneratorDuration } from "../../../../../../../motion-dom@11.16.4/external/motion-dom/dist/es/animation/generators/utils/calc-duration.mjs";
+import { isGenerator } from "../../../../../../../motion-dom@11.16.4/external/motion-dom/dist/es/animation/generators/utils/is-generator.mjs";
 import { KeyframeResolver } from "../../render/utils/KeyframesResolver.mjs";
-import { spring } from "../generators/spring/index.mjs";
+import { clamp } from "../../utils/clamp.mjs";
+import { mix } from "../../utils/mix/index.mjs";
+import { pipe } from "../../utils/pipe.mjs";
 import { inertia } from "../generators/inertia.mjs";
 import { keyframes } from "../generators/keyframes.mjs";
+import { spring } from "../generators/spring/index.mjs";
 import { BaseAnimation } from "./BaseAnimation.mjs";
-import { pipe } from "../../utils/pipe.mjs";
-import { mix } from "../../utils/mix/index.mjs";
-import { calcGeneratorDuration } from "../generators/utils/calc-duration.mjs";
-import { millisecondsToSeconds, secondsToMilliseconds } from "../../utils/time-conversion.mjs";
-import { clamp } from "../../utils/clamp.mjs";
-import { invariant } from "../../../../../../../motion-utils@11.14.3/external/motion-utils/dist/es/errors.mjs";
 import { frameloopDriver } from "./drivers/driver-frameloop.mjs";
 import { getFinalKeyframe } from "./waapi/utils/get-final-keyframe.mjs";
-import { isGenerator } from "../generators/utils/is-generator.mjs";
 const generators = {
   decay: inertia,
   inertia,

package/dist/es/external/.pnpm/{framer-motion@11.15.0 → framer-motion@11.16.6}/external/framer-motion/dist/es/animation/animators/utils/can-animate.mjs

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

package/dist/es/external/.pnpm/{framer-motion@11.15.0 → framer-motion@11.16.6}/external/framer-motion/dist/es/animation/animators/waapi/NativeAnimation.mjs

@@ -1,14 +1,13 @@
+import { invariant } from "../../../../../../../../motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
+import { secondsToMilliseconds } from "../../../../../../../../motion-utils@11.16.0/external/motion-utils/dist/es/time-conversion.mjs";
+import { createGeneratorEasing } from "../../../../../../../../motion-dom@11.16.4/external/motion-dom/dist/es/animation/generators/utils/create-generator-easing.mjs";
+import { isGenerator } from "../../../../../../../../motion-dom@11.16.4/external/motion-dom/dist/es/animation/generators/utils/is-generator.mjs";
+import { NativeAnimationControls } from "../../../../../../../../motion-dom@11.16.4/external/motion-dom/dist/es/animation/waapi/NativeAnimationControls.mjs";
+import { supportsLinearEasing } from "../../../../../../../../motion-dom@11.16.4/external/motion-dom/dist/es/utils/supports/linear-easing.mjs";
 import { startWaapiAnimation } from "./index.mjs";
-import { createGeneratorEasing } from "../../../easing/utils/create-generator-easing.mjs";
 import { browserNumberValueTypes } from "../../../render/dom/value-types/number-browser.mjs";
-import { invariant } from "../../../../../../../../motion-utils@11.14.3/external/motion-utils/dist/es/errors.mjs";
-import { noop } from "../../../../../../../../motion-utils@11.14.3/external/motion-utils/dist/es/noop.mjs";
-import { secondsToMilliseconds, millisecondsToSeconds } from "../../../utils/time-conversion.mjs";
-import { isGenerator } from "../../generators/utils/is-generator.mjs";
-import { attachTimeline } from "./utils/attach-timeline.mjs";
 import { getFinalKeyframe } from "./utils/get-final-keyframe.mjs";
 import { setCSSVar, setStyle } from "./utils/style.mjs";
-import { supportsLinearEasing } from "./utils/supports-linear-easing.mjs";
 import { supportsPartialKeyframes } from "./utils/supports-partial-keyframes.mjs";
 import { supportsWaapi } from "./utils/supports-waapi.mjs";
 const state = /* @__PURE__ */ new WeakMap();
@@ -31,12 +30,9 @@ function getElementAnimationState(element) {
   state.set(element, animationState);
   return state.get(element);
 }
-class NativeAnimation {
+class NativeAnimation extends NativeAnimationControls {
   constructor(element, valueName, valueKeyframes, options) {
     const isCSSVar = valueName.startsWith("--");
-    this.setValue = isCSSVar ? setCSSVar : setStyle;
-    this.options = options;
-    this.updateFinishedPromise();
     invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
     const existingAnimation = getElementAnimationState(element).get(valueName);
     existingAnimation && existingAnimation.stop();
@@ -55,92 +51,34 @@ class NativeAnimation {
     } else {
       options.ease = options.ease || defaultEasing;
     }
-    this.removeAnimation = () => {
-      var _a;
-      return (_a = state.get(element)) === null || _a === void 0 ? void 0 : _a.delete(valueName);
-    };
     const onFinish = () => {
-      this.setValue(element, valueName, getFinalKeyframe(valueKeyframes, this.options));
+      this.setValue(element, valueName, getFinalKeyframe(valueKeyframes, options));
       this.cancel();
       this.resolveFinishedPromise();
     };
+    const init = () => {
+      this.setValue = isCSSVar ? setCSSVar : setStyle;
+      this.options = options;
+      this.updateFinishedPromise();
+      this.removeAnimation = () => {
+        var _a;
+        return (_a = state.get(element)) === null || _a === void 0 ? void 0 : _a.delete(valueName);
+      };
+    };
     if (!supportsWaapi()) {
+      super();
+      init();
       onFinish();
     } else {
-      this.animation = startWaapiAnimation(element, valueName, valueKeyframes, options);
+      super(startWaapiAnimation(element, valueName, valueKeyframes, options));
+      init();
       if (options.autoplay === false) {
         this.animation.pause();
       }
       this.animation.onfinish = onFinish;
-      if (this.pendingTimeline) {
-        attachTimeline(this.animation, this.pendingTimeline);
-      }
       getElementAnimationState(element).set(valueName, this);
     }
   }
-  get duration() {
-    return millisecondsToSeconds(this.options.duration || 300);
-  }
-  get time() {
-    var _a;
-    if (this.animation) {
-      return millisecondsToSeconds(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
-    }
-    return 0;
-  }
-  set time(newTime) {
-    if (this.animation) {
-      this.animation.currentTime = secondsToMilliseconds(newTime);
-    }
-  }
-  get speed() {
-    return this.animation ? this.animation.playbackRate : 1;
-  }
-  set speed(newSpeed) {
-    if (this.animation) {
-      this.animation.playbackRate = newSpeed;
-    }
-  }
-  get state() {
-    return this.animation ? this.animation.playState : "finished";
-  }
-  get startTime() {
-    return this.animation ? this.animation.startTime : null;
-  }
-  flatten() {
-    var _a;
-    if (!this.animation)
-      return;
-    (_a = this.animation.effect) === null || _a === void 0 ? void 0 : _a.updateTiming({ easing: "linear" });
-  }
-  play() {
-    if (this.state === "finished") {
-      this.updateFinishedPromise();
-    }
-    this.animation && this.animation.play();
-  }
-  pause() {
-    this.animation && this.animation.pause();
-  }
-  stop() {
-    if (!this.animation || this.state === "idle" || this.state === "finished") {
-      return;
-    }
-    if (this.animation.commitStyles) {
-      this.animation.commitStyles();
-    }
-    this.cancel();
-  }
-  complete() {
-    this.animation && this.animation.finish();
-  }
-  cancel() {
-    this.removeAnimation();
-    try {
-      this.animation && this.animation.cancel();
-    } catch (e) {
-    }
-  }
   /**
    * Allows the returned animation to be awaited or promise-chained. Currently
    * resolves when the animation finishes at all but in a future update could/should
@@ -154,13 +92,15 @@ class NativeAnimation {
       this.resolveFinishedPromise = resolve;
     });
   }
-  attachTimeline(timeline) {
-    if (!this.animation) {
-      this.pendingTimeline = timeline;
-    } else {
-      attachTimeline(this.animation, timeline);
+  play() {
+    if (this.state === "finished") {
+      this.updateFinishedPromise();
     }
-    return noop;
+    super.play();
+  }
+  cancel() {
+    this.removeAnimation();
+    super.cancel();
   }
 }
 export {

package/dist/es/external/.pnpm/{framer-motion@11.15.0 → framer-motion@11.16.6}/external/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs

@@ -1,7 +1,7 @@
-import { resolveElements } from "motion-dom";
-import { invariant } from "../../../../../../../../motion-utils@11.14.3/external/motion-utils/dist/es/errors.mjs";
-import { secondsToMilliseconds } from "../../../utils/time-conversion.mjs";
-import { getValueTransition } from "../../utils/get-value-transition.mjs";
+import { invariant } from "../../../../../../../../motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
+import { secondsToMilliseconds } from "../../../../../../../../motion-utils@11.16.0/external/motion-utils/dist/es/time-conversion.mjs";
+import { getValueTransition } from "../../../../../../../../motion-dom@11.16.4/external/motion-dom/dist/es/animation/utils/get-value-transition.mjs";
+import { resolveElements } from "../../../../../../../../motion-dom@11.16.4/external/motion-dom/dist/es/utils/resolve-elements.mjs";
 import { NativeAnimation } from "./NativeAnimation.mjs";
 function animateElements(elementOrSelector, keyframes, options, scope) {
   const elements = resolveElements(elementOrSelector, scope);

package/dist/es/external/.pnpm/{framer-motion@11.15.0 → framer-motion@11.16.6}/external/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs

@@ -1,4 +1,5 @@
-import { GroupPlaybackControls } from "../../GroupPlaybackControls.mjs";
+import { GroupPlaybackControls } from "../../../../../../../../motion-dom@11.16.4/external/motion-dom/dist/es/animation/controls/Group.mjs";
+import "../../../../../../../../motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
 import { animateElements } from "./animate-elements.mjs";
 const createScopedWaapiAnimate = (scope) => {
   function scopedAnimate(elementOrSelector, keyframes, options) {

package/dist/es/external/.pnpm/{framer-motion@11.15.0 → framer-motion@11.16.6}/external/framer-motion/dist/es/animation/animators/waapi/index.mjs

@@ -1,4 +1,5 @@
-import { mapEasingToNativeEasing } from "./easing.mjs";
+import "../../../../../../../../motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
+import { mapEasingToNativeEasing } from "../../../../../../../../motion-dom@11.16.4/external/motion-dom/dist/es/animation/waapi/utils/easing.mjs";
 function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times } = {}) {
   const keyframeOptions = { [valueName]: keyframes };
   if (times)