motion-v 0.9.0 → 0.10.0

package/dist/cjs/index.js

@@ -5082,6 +5082,26 @@ const svgElementSet = new Set(svgElements);
 function isSVGElement$1(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;
+}
 const rotation = {
   syntax: "<angle>",
   initialValue: "0deg",
@@ -6405,19 +6425,18 @@ 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);
       }
-      globalProjectionState.hasEverUpdated = true;
       this.didUpdate();
+      globalProjectionState.hasEverUpdated = true;
     }
   }
   beforeUnmount() {
@@ -6435,9 +6454,11 @@ class LayoutFeature extends Feature {
   unmount() {
     const layoutGroup = this.state.options.layoutGroup;
     const projection = this.state.visualElement.projection;
-    if ((layoutGroup == null ? void 0 : layoutGroup.group) && projection)
+    if ((layoutGroup == null ? void 0 : layoutGroup.group) && projection) {
       layoutGroup.group.remove(projection);
-    this.didUpdate();
+    } else {
+      this.didUpdate();
+    }
   }
 }
 function asyncHandler(handler) {
@@ -8185,6 +8206,7 @@ function executeAnimations(factories, getChildAnimations, childAnimations, trans
 }
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
+const mountedLayoutIds = /* @__PURE__ */ new Set();
 class MotionState {
   constructor(options, parent) {
     var _a;
@@ -8228,7 +8250,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 = {
@@ -8249,10 +8271,6 @@ class MotionState {
     }
     this.target = {};
   }
-  // Get initial animation state
-  get initial() {
-    return core.isDef(this.options.initial) ? this.options.initial : this.context.initial;
-  }
   // Update visual element with new options
   updateOptions() {
     this.visualElement.update({
@@ -8265,10 +8283,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) {
     heyListen.invariant(
       Boolean(element),
@@ -8287,51 +8306,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)
@@ -8352,10 +8386,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();
+    }
   }
 }
 function getMotionElement(el) {
@@ -8378,7 +8414,7 @@ const [injectMotionConfig, provideMotionConfig] = createContext("MotionConfig");
 function useMotionConfig() {
   return injectMotionConfig(vue.computed(() => defaultConfig));
 }
-const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "Motion",
     inheritAttrs: false
@@ -8571,7 +8607,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const componentCache = /* @__PURE__ */ new Map();
-const motion = new Proxy(_sfc_main$5, {
+const motion = new Proxy(_sfc_main$6, {
   get(target, prop) {
     if (typeof prop === "symbol")
       return target[prop];
@@ -8583,7 +8619,7 @@ const motion = new Proxy(_sfc_main$5, {
           name: `motion.${component.$name}`,
           setup(_, { attrs, slots }) {
             return () => {
-              return vue.h(_sfc_main$5, {
+              return vue.h(_sfc_main$6, {
                 ...attrs,
                 as: component,
                 asChild: false
@@ -8599,7 +8635,7 @@ const motion = new Proxy(_sfc_main$5, {
         name: `motion.${prop}`,
         setup(_, { attrs, slots }) {
           return () => {
-            return vue.h(_sfc_main$5, {
+            return vue.h(_sfc_main$6, {
               ...attrs,
               as: prop,
               asChild: false
@@ -8663,7 +8699,7 @@ function usePopLayout(props) {
     styles
   };
 }
-const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "AnimatePresence",
     inheritAttrs: true
@@ -8675,7 +8711,8 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     multiple: { type: Boolean, default: false },
     as: {},
     custom: {},
-    onExitComplete: {}
+    onExitComplete: {},
+    unwrapElement: { type: Boolean, default: false }
   },
   setup(__props) {
     const props = __props;
@@ -8702,9 +8739,13 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
       exitDom.clear();
     });
     function exit(el, done) {
-      const state2 = mountedStates.get(el);
+      let state2 = mountedStates.get(el);
       if (!state2) {
-        return done();
+        if (!props.unwrapElement) {
+          return done();
+        }
+        el = el.firstElementChild;
+        state2 = mountedStates.get(el);
       }
       exitDom.set(el, true);
       removeDoneCallback(el);
@@ -8761,7 +8802,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "MotionConfig",
     inheritAttrs: false
@@ -8823,7 +8864,7 @@ function moveItem([...arr], fromIndex, toIndex) {
 function useDefaultMotionValue(value, defaultValue = 0) {
   return isMotionValue(value) ? value : motionValue(defaultValue);
 }
-const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "ReorderGroup",
     inheritAttrs: false
@@ -8917,12 +8958,14 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
         order2.sort(compareMin);
       },
       updateOrder: (item, offset, velocity) => {
+        var _a;
         if (isReordering)
           return;
         const newOrder = checkReorder(order2, item, offset, velocity);
         if (order2 !== newOrder) {
           isReordering = true;
-          props["onUpdate:values"](
+          (_a = props["onUpdate:values"]) == null ? void 0 : _a.call(
+            props,
             newOrder.map(getValue).filter((value) => props.values.includes(value))
           );
         }
@@ -8936,7 +8979,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       };
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$5), vue.normalizeProps(vue.guardReactiveProps(bindProps())), {
+      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$6), vue.normalizeProps(vue.guardReactiveProps(bindProps())), {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default"),
           vue.createTextVNode(" " + vue.toDisplayString(warning2()), 1)
@@ -9146,7 +9189,7 @@ function useVelocity(value) {
   });
   return velocity;
 }
-const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "ReorderItem",
     inheritAttrs: false
@@ -9249,7 +9292,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       return axis.value;
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$5), vue.mergeProps(bindProps(), {
+      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$6), vue.mergeProps(bindProps(), {
         drag: drag.value,
         "drag-snap-to-origin": true,
         onDrag: _cache[0] || (_cache[0] = (event, gesturePoint) => {
@@ -9268,12 +9311,33 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const ReorderGroup = _sfc_main$2;
-const ReorderItem = _sfc_main$1;
+const ReorderGroup = _sfc_main$3;
+const ReorderItem = _sfc_main$2;
 const Reorder = {
   Group: ReorderGroup,
   Item: ReorderItem
 };
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "RowValue",
+  props: {
+    value: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const instance = vue.getCurrentInstance().proxy;
+    vue.watchEffect((cleanup) => {
+      const unSub = props.value.on("change", (value) => {
+        if (instance.$el) {
+          instance.$el.textContent = value;
+        }
+      });
+      cleanup(unSub);
+    });
+    return (_ctx, _cache) => {
+      return vue.toDisplayString(_ctx.value.get());
+    };
+  }
+});
 function useForceUpdate() {
   const key = vue.ref(0);
   function forceUpdate() {
@@ -9303,6 +9367,7 @@ function nodeGroup() {
         unsubscribe();
         subscriptions.delete(node);
       }
+      dirtyAll();
     },
     dirty: dirtyAll
   };
@@ -9537,14 +9602,15 @@ class DragControls {
 }
 const createDragControls = () => new DragControls();
 const useDragControls = createDragControls;
-exports.AnimatePresence = _sfc_main$4;
+exports.AnimatePresence = _sfc_main$5;
 exports.LayoutGroup = _sfc_main;
-exports.Motion = _sfc_main$5;
-exports.MotionConfig = _sfc_main$3;
+exports.Motion = _sfc_main$6;
+exports.MotionConfig = _sfc_main$4;
 exports.MotionValue = MotionValue;
 exports.Reorder = Reorder;
 exports.ReorderGroup = ReorderGroup;
 exports.ReorderItem = ReorderItem;
+exports.RowValue = _sfc_main$1;
 exports.animate = animate;
 exports.animateMini = animateMini;
 exports.anticipate = anticipate;

package/dist/es/components/RowValue.d.ts

@@ -0,0 +1,16 @@
+import { MotionValue } from 'framer-motion/dom';
+declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>>, never>, never> & {
+        value: MotionValue<T>;
+    }> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -0,0 +1,25 @@
+import { defineComponent, getCurrentInstance, watchEffect, toDisplayString } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "RowValue",
+  props: {
+    value: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const instance = getCurrentInstance().proxy;
+    watchEffect((cleanup) => {
+      const unSub = props.value.on("change", (value) => {
+        if (instance.$el) {
+          instance.$el.textContent = value;
+        }
+      });
+      cleanup(unSub);
+    });
+    return (_ctx, _cache) => {
+      return toDisplayString(_ctx.value.get());
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/es/components/RowValue.vue2.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./RowValue.vue.mjs";
+export {
+  _sfc_main as default
+};

package/dist/es/components/animate-presence/AnimatePresence.d.ts

@@ -11,14 +11,17 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     mode: string;
     initial: boolean;
     multiple: boolean;
+    unwrapElement: boolean;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<AnimatePresenceProps>, {
     mode: string;
     initial: boolean;
     multiple: boolean;
+    unwrapElement: boolean;
 }>>>, {
     initial: boolean;
     mode: "wait" | "popLayout" | "sync";
     multiple: boolean;
+    unwrapElement: boolean;
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

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

@@ -15,7 +15,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     multiple: { type: Boolean, default: false },
     as: {},
     custom: {},
-    onExitComplete: {}
+    onExitComplete: {},
+    unwrapElement: { type: Boolean, default: false }
   },
   setup(__props) {
     const props = __props;
@@ -42,9 +43,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       exitDom.clear();
     });
     function exit(el, done) {
-      const state = mountedStates.get(el);
+      let state = mountedStates.get(el);
       if (!state) {
-        return done();
+        if (!props.unwrapElement) {
+          return done();
+        }
+        el = el.firstElementChild;
+        state = mountedStates.get(el);
       }
       exitDom.set(el, true);
       removeDoneCallback(el);

package/dist/es/components/animate-presence/types.d.ts

@@ -5,4 +5,5 @@ export interface AnimatePresenceProps {
     as?: string;
     custom?: any;
     onExitComplete?: VoidFunction;
+    unwrapElement?: boolean;
 }

package/dist/es/components/group.mjs

@@ -20,6 +20,7 @@ function nodeGroup() {
         unsubscribe();
         subscriptions.delete(node);
       }
+      dirtyAll();
     },
     dirty: dirtyAll
   };

package/dist/es/components/index.d.ts

@@ -2,3 +2,4 @@ export { Motion, motion, type MotionProps } from './motion';
 export * from './animate-presence';
 export * from './motion-config';
 export * from './reorder';
+export { default as RowValue } from './RowValue';

package/dist/es/components/reorder/Group.vue.mjs

@@ -97,12 +97,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         order.sort(compareMin);
       },
       updateOrder: (item, offset, velocity) => {
+        var _a;
         if (isReordering)
           return;
         const newOrder = checkReorder(order, item, offset, velocity);
         if (order !== newOrder) {
           isReordering = true;
-          props["onUpdate:values"](
+          (_a = props["onUpdate:values"]) == null ? void 0 : _a.call(
+            props,
             newOrder.map(getValue).filter((value) => props.values.includes(value))
           );
         }

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

@@ -18,19 +18,18 @@ 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);
       }
-      globalProjectionState.hasEverUpdated = true;
       this.didUpdate();
+      globalProjectionState.hasEverUpdated = true;
     }
   }
   beforeUnmount() {
@@ -48,9 +47,11 @@ class LayoutFeature extends Feature {
   unmount() {
     const layoutGroup = this.state.options.layoutGroup;
     const projection = this.state.visualElement.projection;
-    if ((layoutGroup == null ? void 0 : layoutGroup.group) && projection)
+    if ((layoutGroup == null ? void 0 : layoutGroup.group) && projection) {
       layoutGroup.group.remove(projection);
-    this.didUpdate();
+    } else {
+      this.didUpdate();
+    }
   }
 }
 export {

package/dist/es/index.mjs

@@ -4,8 +4,9 @@ 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 { 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";
@@ -60,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,

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,7 +1,6 @@
 import { invariant } from "hey-listen";
 import { visualElementStore } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/render/store.mjs";
-import { isDef } from "@vueuse/core";
-import { resolveVariant } from "./utils.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";
@@ -9,6 +8,7 @@ import { animateUpdates } from "./animate-updates.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "",
   "author": "",
   "license": "MIT",
@@ -71,7 +71,7 @@
     "rimraf": "^6.0.1",
     "vite": "^5.4.8",
     "vite-plugin-dts": "^4.2.4",
-    "vitest": "^1.4.0",
+    "vitest": "^1.6.1",
     "vue": "3.4.38"
   },
   "scripts": {