motion-v 0.10.0-beta.1 → 0.10.0

package/dist/es/features/gestures/in-view/index.mjs

@@ -1,6 +1,6 @@
 import { Feature } from "../../feature.mjs";
-import { inView } from "../../../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
-import { frame } from "../../../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { inView } from "../../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
+import { frame } from "../../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 function handleHoverEvent(state, entry, lifecycle) {
   const props = state.options;
   if (props.inView) {
@@ -27,7 +27,7 @@ class InViewGesture extends Feature {
     const { once, ...viewOptions } = this.state.getOptions().inViewOptions || {};
     this.unmount = inView(
       element,
-      (_, entry) => {
+      (entry) => {
         handleHoverEvent(this.state, entry, "Enter");
         if (!once) {
           return (endEvent) => {

package/dist/es/features/gestures/pan/PanSession.mjs

@@ -1,8 +1,8 @@
 import { addPointerEvent } from "../../../events/add-pointer-event.mjs";
 import { extractEventInfo } from "../../../events/event-info.mjs";
-import { distance2D } from "../../../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/utils/distance.mjs";
-import { frame, cancelFrame, frameData } from "../../../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/frameloop/frame.mjs";
-import { pipe } from "../../../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/utils/pipe.mjs";
+import { distance2D } from "../../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/utils/distance.mjs";
+import { frame, cancelFrame, frameData } from "../../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { pipe } from "../../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/utils/pipe.mjs";
 import { secondsToMilliseconds, millisecondsToSeconds } from "../../../utils/time-conversion.mjs";
 import { isPrimaryPointer } from "../../../events/utils/is-primary-pointer.mjs";
 class PanSession {

package/dist/es/features/gestures/pan/index.mjs

@@ -1,9 +1,9 @@
 import { PanSession } from "./PanSession.mjs";
 import { addPointerEvent } from "../../../events/add-pointer-event.mjs";
 import { Feature } from "../../feature.mjs";
-import { noop } from "../../../external/.pnpm/motion-utils@12.0.0/external/motion-utils/dist/es/noop.mjs";
-import "../../../external/.pnpm/motion-utils@12.0.0/external/motion-utils/dist/es/errors.mjs";
-import { frame } from "../../../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { noop } from "../../../external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/noop.mjs";
+import "../../../external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
+import { frame } from "../../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 import { getContextWindow } from "../../../utils/get-context-window.mjs";
 function asyncHandler(handler) {
   return (event, info) => {

package/dist/es/features/gestures/press/index.mjs

@@ -1,7 +1,7 @@
 import { Feature } from "../../feature.mjs";
-import { press } from "../../../external/.pnpm/motion-dom@12.0.0/external/motion-dom/dist/es/gestures/press/index.mjs";
-import "../../../external/.pnpm/motion-utils@12.0.0/external/motion-utils/dist/es/errors.mjs";
-import { frame } from "../../../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/frameloop/frame.mjs";
+import "../../../external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
+import { press } from "../../../external/.pnpm/motion-dom@11.16.4/external/motion-dom/dist/es/gestures/press/index.mjs";
+import { frame } from "../../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 function extractEventInfo(event) {
   return {
     point: {
@@ -34,7 +34,7 @@ class PressGesture extends Feature {
       return;
     this.unmount = press(
       element,
-      (_, startEvent) => {
+      (startEvent) => {
         handlePressEvent(this.state, startEvent, "Start");
         return (endEvent, { success }) => handlePressEvent(
           this.state,

package/dist/es/features/layout/config.mjs

@@ -1,5 +1,5 @@
-import { correctBorderRadius } from "../../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/projection/styles/scale-border-radius.mjs";
-import { correctBoxShadow } from "../../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs";
+import { correctBorderRadius } from "../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/projection/styles/scale-border-radius.mjs";
+import { correctBoxShadow } from "../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs";
 const defaultScaleCorrector = {
   borderRadius: {
     ...correctBorderRadius,

package/dist/es/features/layout/layout.d.ts

@@ -5,7 +5,6 @@ export declare class LayoutFeature extends Feature {
     beforeUpdate(): void;
     update(): void;
     didUpdate(): void;
-    beforeMount(): void;
     mount(): void;
     beforeUnmount(): void;
     unmount(): void;

package/dist/es/features/layout/layout.mjs

@@ -1,7 +1,7 @@
 import { Feature } from "../feature.mjs";
-import { addScaleCorrector } from "../../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/projection/styles/scale-correction.mjs";
+import { addScaleCorrector } from "../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/projection/styles/scale-correction.mjs";
 import { defaultScaleCorrector } from "./config.mjs";
-import { globalProjectionState } from "../../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/projection/node/state.mjs";
+import { globalProjectionState } from "../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/projection/node/state.mjs";
 class LayoutFeature extends Feature {
   constructor(state) {
     super(state);
@@ -18,23 +18,22 @@ class LayoutFeature extends Feature {
     if (this.state.options.layout || this.state.options.layoutId)
       (_b = (_a = this.state.visualElement.projection) == null ? void 0 : _a.root) == null ? void 0 : _b.didUpdate();
   }
-  beforeMount() {
-  }
   mount() {
     var _a;
     const options = this.state.options;
     const layoutGroup = this.state.options.layoutGroup;
-    if (options.layout || options.layoutId) {
+    if (options.layout || options.layoutId || options.drag) {
       const projection = this.state.visualElement.projection;
       if (projection) {
+        projection.promote();
         (_a = layoutGroup == null ? void 0 : layoutGroup.group) == null ? void 0 : _a.add(projection);
       }
+      this.didUpdate();
       globalProjectionState.hasEverUpdated = true;
     }
   }
   beforeUnmount() {
-    var _a;
-    const projection = (_a = this.state.visualElement) == null ? void 0 : _a.projection;
+    const projection = this.state.visualElement.projection;
     if (projection) {
       this.state.willUpdate("beforeUnmount");
       if (this.state.options.layoutId) {
@@ -46,12 +45,13 @@ class LayoutFeature extends Feature {
     }
   }
   unmount() {
-    var _a;
     const layoutGroup = this.state.options.layoutGroup;
-    const projection = (_a = this.state.visualElement) == null ? void 0 : _a.projection;
-    if ((layoutGroup == null ? void 0 : layoutGroup.group) && projection)
+    const projection = this.state.visualElement.projection;
+    if ((layoutGroup == null ? void 0 : layoutGroup.group) && projection) {
       layoutGroup.group.remove(projection);
-    this.didUpdate();
+    } else {
+      this.didUpdate();
+    }
   }
 }
 export {

package/dist/es/features/layout/projection.mjs

@@ -1,7 +1,7 @@
 import { Feature } from "../feature.mjs";
-import { HTMLProjectionNode } from "../../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs";
+import { HTMLProjectionNode } from "../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs";
 import { getClosestProjectingNode } from "./utils.mjs";
-import { addScaleCorrector } from "../../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/projection/styles/scale-correction.mjs";
+import { addScaleCorrector } from "../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/projection/styles/scale-correction.mjs";
 import { defaultScaleCorrector } from "./config.mjs";
 import { isHTMLElement } from "../gestures/drag/utils/is.mjs";
 import { doneCallbacks } from "../../components/presence.mjs";

package/dist/es/features/svg.mjs

@@ -1,5 +1,5 @@
 import { Feature } from "./feature.mjs";
-import { frame } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { frame } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 function isSVGElement(element) {
   return element instanceof SVGElement && element.tagName !== "svg";
 }

package/dist/es/index.mjs

@@ -4,43 +4,42 @@ import { injectLayoutGroup, injectMotion, provideLayoutGroup, provideMotion } fr
 import { components, utilities } from "./constants/index.mjs";
 import { useDragControls } from "./features/gestures/drag/use-drag-controls.mjs";
 import { default as default3 } from "./components/motion/Motion.vue.mjs";
-import { default as default4 } from "./components/animate-presence/AnimatePresence.vue.mjs";
-import { default as default5 } from "./components/motion-config/MotionConfig.vue.mjs";
-import { MotionValue, motionValue, motionValue as motionValue2 } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/value/index.mjs";
-import { hover } from "./external/.pnpm/motion-dom@12.0.0/external/motion-dom/dist/es/gestures/hover.mjs";
-import { isDragActive } from "./external/.pnpm/motion-dom@12.0.0/external/motion-dom/dist/es/gestures/drag/state/is-active.mjs";
-import { press } from "./external/.pnpm/motion-dom@12.0.0/external/motion-dom/dist/es/gestures/press/index.mjs";
-import { invariant } from "./external/.pnpm/motion-utils@12.0.0/external/motion-utils/dist/es/errors.mjs";
-import { noop } from "./external/.pnpm/motion-utils@12.0.0/external/motion-utils/dist/es/noop.mjs";
-import { progress } from "./external/.pnpm/motion-utils@12.0.0/external/motion-utils/dist/es/progress.mjs";
-import { animate, createScopedAnimate } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/animation/animate/index.mjs";
-import { animateMini } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs";
-import { scroll } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
-import { scrollInfo } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/render/dom/scroll/track.mjs";
-import { inView } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
-import { anticipate } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/easing/anticipate.mjs";
-import { backIn, backInOut, backOut } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/easing/back.mjs";
-import { circIn, circInOut, circOut } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/easing/circ.mjs";
-import { cubicBezier } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/easing/cubic-bezier.mjs";
-import { easeIn, easeInOut, easeOut } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/easing/ease.mjs";
-import { mirrorEasing } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/easing/modifiers/mirror.mjs";
-import { reverseEasing } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/easing/modifiers/reverse.mjs";
-import { steps } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/easing/steps.mjs";
-import { inertia } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/animation/generators/inertia.mjs";
-import { keyframes } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/animation/generators/keyframes.mjs";
-import { spring } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/animation/generators/spring/index.mjs";
-import { stagger } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/animation/utils/stagger.mjs";
-import { time } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/frameloop/sync-time.mjs";
-import { clamp } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/utils/clamp.mjs";
-import { delayInSeconds } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/utils/delay.mjs";
-import { distance, distance2D } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/utils/distance.mjs";
-import { interpolate } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/utils/interpolate.mjs";
-import { mix } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/utils/mix/index.mjs";
-import { pipe } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/utils/pipe.mjs";
-import { transform } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/utils/transform.mjs";
-import { wrap } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/utils/wrap.mjs";
-import { cancelSync, sync } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/frameloop/index-legacy.mjs";
-import { cancelFrame, frame, frameData, frameSteps } from "./external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { default as default4 } from "./components/RowValue.vue.mjs";
+import { default as default5 } from "./components/animate-presence/AnimatePresence.vue.mjs";
+import { default as default6 } from "./components/motion-config/MotionConfig.vue.mjs";
+import { MotionValue, motionValue, motionValue as motionValue2 } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/value/index.mjs";
+import { isDragActive } from "./external/.pnpm/motion-dom@11.16.4/external/motion-dom/dist/es/gestures/drag/state/is-active.mjs";
+import { invariant } from "./external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
+import { noop } from "./external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/noop.mjs";
+import { progress } from "./external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/progress.mjs";
+import { animate, createScopedAnimate } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/animate/index.mjs";
+import { animateMini } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs";
+import { scroll } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
+import { scrollInfo } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/render/dom/scroll/track.mjs";
+import { inView } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
+import { anticipate } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/easing/anticipate.mjs";
+import { backIn, backInOut, backOut } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/easing/back.mjs";
+import { circIn, circInOut, circOut } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/easing/circ.mjs";
+import { cubicBezier } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/easing/cubic-bezier.mjs";
+import { easeIn, easeInOut, easeOut } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/easing/ease.mjs";
+import { mirrorEasing } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/easing/modifiers/mirror.mjs";
+import { reverseEasing } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/easing/modifiers/reverse.mjs";
+import { steps } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/easing/steps.mjs";
+import { inertia } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/generators/inertia.mjs";
+import { keyframes } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/generators/keyframes.mjs";
+import { spring } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/generators/spring/index.mjs";
+import { stagger } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/utils/stagger.mjs";
+import { time } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/sync-time.mjs";
+import { clamp } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/utils/clamp.mjs";
+import { delayInSeconds } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/utils/delay.mjs";
+import { distance, distance2D } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/utils/distance.mjs";
+import { interpolate } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/utils/interpolate.mjs";
+import { mix } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/utils/mix/index.mjs";
+import { pipe } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/utils/pipe.mjs";
+import { transform } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/utils/transform.mjs";
+import { wrap } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/utils/wrap.mjs";
+import { cancelSync, sync } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/index-legacy.mjs";
+import { cancelFrame, frame, frameData, frameSteps } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 import { motion } from "./components/motion/NameSpace.mjs";
 import { provideMotionConfig, useMotionConfig } from "./components/motion-config/context.mjs";
 import { Reorder, ReorderGroup, ReorderItem } from "./components/reorder/index.mjs";
@@ -62,14 +61,15 @@ import { useAnimationFrame } from "./utils/use-animation-frame.mjs";
 import { millisecondsToSeconds, secondsToMilliseconds } from "./utils/time-conversion.mjs";
 import { getContextWindow } from "./utils/get-context-window.mjs";
 export {
-  default4 as AnimatePresence,
+  default5 as AnimatePresence,
   default2 as LayoutGroup,
   default3 as Motion,
-  default5 as MotionConfig,
+  default6 as MotionConfig,
   MotionValue,
   Reorder,
   ReorderGroup,
   ReorderItem,
+  default4 as RowValue,
   animate,
   animateMini,
   anticipate,
@@ -96,7 +96,6 @@ export {
   frameData,
   frameSteps,
   getContextWindow,
-  hover,
   inView,
   inertia,
   injectLayoutGroup,
@@ -113,7 +112,6 @@ export {
   motionValue,
   noop,
   pipe,
-  press,
   progress,
   provideLayoutGroup,
   provideMotion,

package/dist/es/state/animate-updates.mjs

@@ -4,9 +4,9 @@ import { transformResetValue } from "./transform.mjs";
 import { motionEvent } from "./event.mjs";
 import { isDef } from "@vueuse/core";
 import { isAnimationControls } from "../animation/utils.mjs";
-import { animate } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/animation/animate/index.mjs";
-import { noop } from "../external/.pnpm/motion-utils@12.0.0/external/motion-utils/dist/es/noop.mjs";
-import "../external/.pnpm/motion-utils@12.0.0/external/motion-utils/dist/es/errors.mjs";
+import { animate } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/animate/index.mjs";
+import { noop } from "../external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/noop.mjs";
+import "../external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
 const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "whileDrag", "focus", "exit"];
 function animateUpdates({
   controlActiveState = void 0,

package/dist/es/state/create-visual-element.mjs

@@ -1,6 +1,6 @@
 import { isSVGElement } from "./utils.mjs";
-import { HTMLVisualElement } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/render/html/HTMLVisualElement.mjs";
-import { SVGVisualElement } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/render/svg/SVGVisualElement.mjs";
+import { HTMLVisualElement } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/render/html/HTMLVisualElement.mjs";
+import { SVGVisualElement } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/render/svg/SVGVisualElement.mjs";
 function createVisualElement(Component, options) {
   return isSVGElement(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
 }

package/dist/es/state/motion-state.d.ts

@@ -3,7 +3,8 @@ import { DOMKeyframesDefinition, VisualElement } from 'framer-motion';
 import { StateType, animateUpdates } from './animate-updates';
 export declare const mountedStates: WeakMap<Element, MotionState>;
 /**
- * Core class that manages animation state and orchestrates animations
+ * Core class that manages animation state and orchestrates animations.
+ * Handles component lifecycle methods in the correct order based on component tree position.
  */
 export declare class MotionState {
     readonly id: string;
@@ -23,14 +24,13 @@ export declare class MotionState {
     private _context;
     get context(): MotionStateContext;
     private initTarget;
-    get initial(): string | boolean | import('../types').Variant;
     updateOptions(): void;
     beforeMount(): void;
     mount(element: HTMLElement, options: Options, notAnimate?: boolean): void;
     beforeUnmount(): void;
     unmount(unMountChildren?: boolean): void;
     beforeUpdate(): void;
-    update(options: Options, notAnimate?: boolean): void;
+    update(options: Options): void;
     setActive(name: StateType, isActive: boolean, isAnimate?: boolean): void;
     animateUpdates: typeof animateUpdates;
     isMounted(): boolean;

package/dist/es/state/motion-state.mjs

@@ -1,14 +1,14 @@
 import { invariant } from "hey-listen";
-import { visualElementStore } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/render/store.mjs";
-import { isDef } from "@vueuse/core";
-import { resolveVariant } from "./utils.mjs";
+import { visualElementStore } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/render/store.mjs";
+import { resolveVariant, isAnimateChanged } from "./utils.mjs";
 import { FeatureManager } from "../features/feature-manager.mjs";
 import { createVisualElement } from "./create-visual-element.mjs";
 import { doneCallbacks } from "../components/presence.mjs";
 import { animateUpdates } from "./animate-updates.mjs";
-import { frame } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { frame } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
+const mountedLayoutIds = /* @__PURE__ */ new Set();
 class MotionState {
   constructor(options, parent) {
     var _a;
@@ -52,7 +52,7 @@ class MotionState {
     this.initTarget(initialVariantSource);
     this.featureManager = new FeatureManager(this);
   }
-  // Get animation context, falling back to parent context
+  // Get animation context, falling back to parent context for inheritance
   get context() {
     if (!this._context) {
       const handler = {
@@ -73,10 +73,6 @@ class MotionState {
     }
     this.target = {};
   }
-  // Get initial animation state
-  get initial() {
-    return isDef(this.options.initial) ? this.options.initial : this.context.initial;
-  }
   // Update visual element with new options
   updateOptions() {
     this.visualElement.update({
@@ -89,10 +85,11 @@ class MotionState {
       isPresent: !doneCallbacks.has(this.element)
     });
   }
+  // Called before mounting, executes in parent-to-child order
   beforeMount() {
     this.featureManager.beforeMount();
   }
-  // Mount motion state to DOM element
+  // Mount motion state to DOM element, handles parent-child relationships
   mount(element, options, notAnimate = false) {
     invariant(
       Boolean(element),
@@ -111,51 +108,66 @@ class MotionState {
     if (!notAnimate && this.options.animate) {
       this.animateUpdates();
     }
+    if (this.options.layoutId) {
+      mountedLayoutIds.add(this.options.layoutId);
+      frame.render(() => {
+        mountedLayoutIds.clear();
+      });
+    }
   }
+  // Called before unmounting, executes in child-to-parent order
   beforeUnmount() {
     this.featureManager.beforeUnmount();
   }
   // Unmount motion state and optionally unmount children
+  // Handles unmounting in the correct order based on component tree
   unmount(unMountChildren = false) {
-    var _a, _b, _c;
-    mountedStates.delete(this.element);
-    this.featureManager.unmount();
-    if (unMountChildren) {
-      frame.render(() => {
-        var _a2;
-        (_a2 = this.visualElement) == null ? void 0 : _a2.unmount();
+    const shouldDelay = this.options.layoutId && !mountedLayoutIds.has(this.options.layoutId);
+    const unmount = () => {
+      var _a, _b, _c;
+      mountedStates.delete(this.element);
+      this.featureManager.unmount();
+      if (unMountChildren && !shouldDelay) {
+        frame.render(() => {
+          var _a2;
+          (_a2 = this.visualElement) == null ? void 0 : _a2.unmount();
+        });
+      } else {
+        (_a = this.visualElement) == null ? void 0 : _a.unmount();
+      }
+      if (unMountChildren) {
+        const unmountChild = (child) => {
+          var _a2;
+          child.unmount(true);
+          (_a2 = child.children) == null ? void 0 : _a2.forEach(unmountChild);
+        };
+        Array.from(this.children).forEach(unmountChild);
+      }
+      (_c = (_b = this.parent) == null ? void 0 : _b.children) == null ? void 0 : _c.delete(this);
+    };
+    if (shouldDelay) {
+      Promise.resolve().then(() => {
+        unmount();
       });
     } else {
-      (_a = this.visualElement) == null ? void 0 : _a.unmount();
-    }
-    if (unMountChildren) {
-      const unmountChild = (child) => {
-        var _a2;
-        child.unmount(true);
-        (_a2 = child.children) == null ? void 0 : _a2.forEach(unmountChild);
-      };
-      Array.from(this.children).forEach(unmountChild);
+      unmount();
     }
-    (_c = (_b = this.parent) == null ? void 0 : _b.children) == null ? void 0 : _c.delete(this);
   }
+  // Called before updating, executes in parent-to-child order
   beforeUpdate() {
     this.featureManager.beforeUpdate();
   }
   // Update motion state with new options
-  update(options, notAnimate = false) {
-    const prevAnimate = JSON.stringify(this.options.animate);
+  update(options) {
+    const hasAnimateChange = isAnimateChanged(this.options, options);
     this.options = options;
-    let hasAnimateChange = false;
-    if (prevAnimate !== JSON.stringify(options.animate)) {
-      hasAnimateChange = true;
-    }
     this.updateOptions();
     this.featureManager.update();
-    if (hasAnimateChange && !notAnimate) {
+    if (hasAnimateChange) {
       this.animateUpdates();
     }
   }
-  // Set animation state active status
+  // Set animation state active status and propagate to children
   setActive(name, isActive, isAnimate = true) {
     var _a;
     if (!this.element || this.activeStates[name] === isActive)
@@ -176,10 +188,12 @@ class MotionState {
   getOptions() {
     return this.options;
   }
+  // Called before layout updates to prepare for changes
   willUpdate(label) {
     var _a;
-    if (this.options.layout || this.options.layoutId)
+    if (this.options.layout || this.options.layoutId) {
       (_a = this.visualElement.projection) == null ? void 0 : _a.willUpdate();
+    }
   }
 }
 export {

package/dist/es/state/utils.d.ts

@@ -15,4 +15,5 @@ export declare const svgElements: readonly ["animate", "circle", "defs", "desc",
 type UnionStringArray<T extends Readonly<string[]>> = T[number];
 export type SVGElements = UnionStringArray<typeof svgElements>;
 export declare function isSVGElement(as: ElementType): as is SVGElements;
+export declare function isAnimateChanged(oldOptions: Options, newOptions: Options): boolean;
 export {};

package/dist/es/state/utils.mjs

@@ -94,9 +94,30 @@ const svgElementSet = new Set(svgElements);
 function isSVGElement(as) {
   return svgElementSet.has(as);
 }
+function isAnimateChanged(oldOptions, newOptions) {
+  const oldAnimate = oldOptions.animate;
+  const newAnimate = newOptions.animate;
+  if (oldAnimate === newAnimate)
+    return false;
+  if (!oldAnimate || !newAnimate)
+    return true;
+  if (typeof oldAnimate === "object" || typeof newAnimate === "object") {
+    const oldKeys = Object.keys(oldAnimate);
+    const newKeys = Object.keys(newAnimate);
+    if (oldKeys.length !== newKeys.length)
+      return true;
+    return oldKeys.some((key) => {
+      const oldVal = oldAnimate[key];
+      const newVal = newAnimate[key];
+      return oldVal !== newVal;
+    });
+  }
+  return oldAnimate !== newAnimate;
+}
 export {
   getOptions,
   hasChanged,
+  isAnimateChanged,
   isCssVar,
   isNumber,
   isSVGElement,

package/dist/es/utils/use-animation-frame.mjs

@@ -1,5 +1,5 @@
 import { onBeforeUpdate, onUnmounted } from "vue";
-import { frame, cancelFrame } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { frame, cancelFrame } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 function useAnimationFrame(callback) {
   let initialTimestamp = 0;
   const provideTimeSinceStart = ({ timestamp, delta }) => {

package/dist/es/utils/use-in-view.mjs

@@ -1,5 +1,5 @@
 import { ref, watch, isRef, unref } from "vue";
-import { inView } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
+import { inView } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
 function useInView(domRef, options) {
   const isInView = ref(false);
   watch([domRef, () => isRef(options) ? options.value : options], (_v1, _v2) => {

package/dist/es/value/use-combine-values.mjs

@@ -1,6 +1,6 @@
 import { onUnmounted } from "vue";
-import { motionValue } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/value/index.mjs";
-import { cancelFrame, frame } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/value/index.mjs";
+import { cancelFrame, frame } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 function useCombineMotionValues(combineValues) {
   const value = motionValue(combineValues());
   const updateValue = () => value.set(combineValues());

package/dist/es/value/use-computed.mjs

@@ -1,5 +1,5 @@
 import { useCombineMotionValues } from "./use-combine-values.mjs";
-import { collectMotionValues } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/value/index.mjs";
+import { collectMotionValues } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/value/index.mjs";
 import { onBeforeUpdate } from "vue";
 function useComputed(computed) {
   collectMotionValues.current = [];

package/dist/es/value/use-scroll.mjs

@@ -1,7 +1,7 @@
 import { onMounted, onUnmounted, watch } from "vue";
 import { warning } from "hey-listen";
-import { motionValue } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/value/index.mjs";
-import { scroll } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/value/index.mjs";
+import { scroll } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
 function refWarning(name, ref) {
   warning(
     Boolean(!ref || ref.value),

package/dist/es/value/use-spring.mjs

@@ -1,7 +1,7 @@
 import { watch } from "vue";
-import { animateValue } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs";
-import { motionValue } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/value/index.mjs";
-import { frame, frameData } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { animateValue } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/value/index.mjs";
+import { frame, frameData } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 import { isMotionValue } from "../utils/motion-value.mjs";
 function toNumber(v) {
   if (typeof v === "number")

package/dist/es/value/use-time.mjs

@@ -1,5 +1,5 @@
 import { useAnimationFrame } from "../utils/use-animation-frame.mjs";
-import { motionValue } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/value/index.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/value/index.mjs";
 function useTime() {
   const time = motionValue(0);
   useAnimationFrame((t) => time.set(t));