motion-v 0.5.1 → 0.6.0

package/dist/cjs/index.js

@@ -18,11 +18,11 @@ if (process.env.NODE_ENV !== "production") {
     }
   };
 }
-function addUniqueItem$1(arr, item) {
+function addUniqueItem(arr, item) {
   if (arr.indexOf(item) === -1)
     arr.push(item);
 }
-function removeItem$1(arr, item) {
+function removeItem(arr, item) {
   const index = arr.indexOf(item);
   if (index > -1)
     arr.splice(index, 1);
@@ -32,8 +32,8 @@ class SubscriptionManager {
     this.subscriptions = [];
   }
   add(handler) {
-    addUniqueItem$1(this.subscriptions, handler);
-    return () => removeItem$1(this.subscriptions, handler);
+    addUniqueItem(this.subscriptions, handler);
+    return () => removeItem(this.subscriptions, handler);
   }
   notify(a, b, c) {
     const numSubscriptions = this.subscriptions.length;
@@ -876,7 +876,7 @@ function eraseKeyframes(sequence, startTime, endTime) {
   for (let i = 0; i < sequence.length; i++) {
     const keyframe = sequence[i];
     if (keyframe.at > startTime && keyframe.at < endTime) {
-      removeItem$1(sequence, keyframe);
+      removeItem(sequence, keyframe);
       i--;
     }
   }
@@ -4811,12 +4811,6 @@ function getContextWindow({ current }) {
 }
 const [injectMotion, provideMotion] = createContext("Motion");
 const [injectLayoutGroup, provideLayoutGroup] = createContext("LayoutGroup");
-function shouldInheritGroup(inherit) {
-  return inherit === true;
-}
-function shouldInheritId(inherit) {
-  return shouldInheritGroup(inherit === true) || inherit === "id";
-}
 function resolveVariant(definition, variants, custom) {
   if (typeof definition === "object") {
     return definition;
@@ -4842,13 +4836,6 @@ function shallowCompare(next, prev) {
   }
   return true;
 }
-function addUniqueItem(array, item) {
-  !array.includes(item) && array.push(item);
-}
-function removeItem(array, item) {
-  const index = array.indexOf(item);
-  index !== -1 && array.splice(index, 1);
-}
 function getOptions(options, key) {
   return options[key] ? { ...options, ...options[key] } : { ...options };
 }
@@ -5650,7 +5637,6 @@ function measurePageBox(element, rootProjectionNode2, transformPagePoint) {
   return viewportBox;
 }
 const doneCallbacks = /* @__PURE__ */ new WeakMap();
-vue.ref(/* @__PURE__ */ new WeakMap());
 function removeDoneCallback(element) {
   const prevDoneCallback = doneCallbacks.get(element);
   if (prevDoneCallback) {
@@ -6208,13 +6194,11 @@ class LayoutFeature extends Feature {
     addScaleCorrector(defaultScaleCorrector);
   }
   beforeUpdate() {
-    var _a;
-    (_a = this.state.visualElement.projection) == null ? void 0 : _a.willUpdate();
+    this.state.willUpdate("beforeUpdate");
   }
   update() {
-    var _a, _b;
-    (_a = this.state.visualElement.projection) == null ? void 0 : _a.setOptions(this.state.options);
-    (_b = this.state.visualElement.projection) == null ? void 0 : _b.root.didUpdate();
+    var _a;
+    (_a = this.state.visualElement.projection) == null ? void 0 : _a.root.didUpdate();
   }
   beforeMount() {
   }
@@ -6232,16 +6216,25 @@ class LayoutFeature extends Feature {
     }
   }
   beforeUnmount() {
-    if (this.state.visualElement.projection) {
-      this.state.visualElement.projection.willUpdate();
+    const projection = this.state.visualElement.projection;
+    if (projection) {
+      this.state.willUpdate("beforeUnmount");
+      if (this.state.options.layoutId) {
+        projection.isPresent = false;
+        projection.relegate();
+      } else if (this.state.options.layout) {
+        this.state.isSafeToRemove = true;
+      }
     }
   }
   unmount() {
-    if (this.state.visualElement.projection) {
-      this.state.visualElement.projection.unmount();
-      const layoutGroup = this.state.options.layoutGroup;
-      if (layoutGroup == null ? void 0 : layoutGroup.group)
-        layoutGroup.group.remove(this.state.visualElement.projection);
+    var _a, _b;
+    const layoutGroup = this.state.options.layoutGroup;
+    const projection = this.state.visualElement.projection;
+    if ((layoutGroup == null ? void 0 : layoutGroup.group) && projection)
+      layoutGroup.group.remove(projection);
+    if (this.state.options.layoutId || this.state.options.layout) {
+      (_b = (_a = this.state.visualElement.projection) == null ? void 0 : _a.root) == null ? void 0 : _b.didUpdate();
     }
   }
 }
@@ -6474,11 +6467,11 @@ class NodeStack {
     this.members = [];
   }
   add(node) {
-    addUniqueItem$1(this.members, node);
+    addUniqueItem(this.members, node);
     node.scheduleRender();
   }
   remove(node) {
-    removeItem$1(this.members, node);
+    removeItem(this.members, node);
     if (node === this.prevLead) {
       this.prevLead = void 0;
     }
@@ -6595,22 +6588,22 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
 function eachAxis(callback) {
   return [callback("x"), callback("y")];
 }
-const compareByDepth$1 = (a, b) => a.depth - b.depth;
+const compareByDepth = (a, b) => a.depth - b.depth;
 class FlatTree {
   constructor() {
     this.children = [];
     this.isDirty = false;
   }
   add(child) {
-    addUniqueItem$1(this.children, child);
+    addUniqueItem(this.children, child);
     this.isDirty = true;
   }
   remove(child) {
-    removeItem$1(this.children, child);
+    removeItem(this.children, child);
     this.isDirty = true;
   }
   forEach(callback) {
-    this.isDirty && this.children.sort(compareByDepth$1);
+    this.isDirty && this.children.sort(compareByDepth);
     this.isDirty = false;
     this.children.forEach(callback);
   }
@@ -7721,6 +7714,7 @@ class ProjectionFeature extends Feature {
       this.state.visualElement.latestValues,
       options["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(this.state.visualElement.parent)
     );
+    this.state.visualElement.projection.isPresent = true;
     this.state.visualElement.projection.setOptions({
       layout: options.layout,
       layoutId: options.layoutId,
@@ -7730,12 +7724,42 @@ class ProjectionFeature extends Feature {
       animationType: typeof options.layout === "string" ? options.layout : "both",
       // initialPromotionConfig
       layoutRoot: options.layoutRoot,
-      layoutScroll: options.layoutScroll
+      layoutScroll: options.layoutScroll,
+      crossfade: options.crossfade,
+      onExitComplete: () => {
+        var _a;
+        if (!((_a = this.state.visualElement.projection) == null ? void 0 : _a.isPresent)) {
+          const done = doneCallbacks.get(this.state.element);
+          this.state.isSafeToRemove = true;
+          if (done) {
+            done({
+              detail: {
+                isExit: true
+              }
+            }, true);
+          }
+        }
+      }
     });
   }
   beforeMount() {
     this.initProjection();
   }
+  update() {
+    const options = this.state.options;
+    this.state.visualElement.projection.setOptions({
+      layout: options.layout,
+      layoutId: options.layoutId,
+      // TODO: drag
+      alwaysMeasureLayout: false,
+      visualElement: this.state.visualElement,
+      animationType: typeof options.layout === "string" ? options.layout : "both",
+      // initialPromotionConfig
+      layoutRoot: options.layoutRoot,
+      layoutScroll: options.layoutScroll,
+      crossfade: options.crossfade
+    });
+  }
   mount() {
     var _a;
     (_a = this.state.visualElement.projection) == null ? void 0 : _a.mount(this.state.element);
@@ -7780,30 +7804,8 @@ class FeatureManager {
     this.features.forEach((feature) => feature.beforeUnmount());
   }
 }
-let scheduled;
-const fireNext = (iterator) => iterator.next();
-const fireAnimateUpdates = (state2) => state2.animateUpdates();
-function processScheduledAnimations() {
-  if (!scheduled)
-    return;
-  const generators2 = scheduled.sort(compareByDepth).map(fireAnimateUpdates);
-  generators2.forEach(fireNext);
-  generators2.forEach(fireNext);
-  scheduled = void 0;
-}
 function scheduleAnimation(state2) {
-  if (!scheduled) {
-    scheduled = [state2];
-    requestAnimationFrame(processScheduledAnimations);
-  } else {
-    addUniqueItem(scheduled, state2);
-  }
-}
-function unscheduleAnimation(state2) {
-  scheduled && removeItem(scheduled, state2);
-}
-function compareByDepth(a, b) {
-  return a.depth - b.depth;
+  state2.animateUpdates();
 }
 function motionEvent(name, target, isExit) {
   return new CustomEvent(name, { detail: { target, isExit } });
@@ -7811,7 +7813,7 @@ function motionEvent(name, target, isExit) {
 function createVisualElement(Component, options) {
   return isSVGElement$1(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
 }
-function animateVariantsChildren(state2, activeState) {
+function animateVariantsChildren(state2, activeState, isFirstAnimate = false) {
   const variantChildren = state2.visualElement.variantChildren;
   if (!(variantChildren == null ? void 0 : variantChildren.size)) {
     return {
@@ -7822,13 +7824,15 @@ function animateVariantsChildren(state2, activeState) {
   const animationFactories = [];
   Array.from(variantChildren).forEach((child, index) => {
     var _a;
-    const prevTarget = child.state.target;
+    const prevTarget = isFirstAnimate ? child.state.baseTarget : child.state.target;
     const childState = child.state;
     childState.target = {};
     for (const name in activeState) {
-      childState.activeStates[name] = true;
+      if (name === "initial" && !isFirstAnimate) {
+        continue;
+      }
       const { definition, transition } = activeState[name];
-      const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition;
+      const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
       const maxStaggerDuration = (variantChildren.size - 1) * staggerChildren;
       const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
       const variant = resolveVariant(
@@ -7877,20 +7881,25 @@ function animateVariantsChildren(state2, activeState) {
   };
 }
 const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "whileDrag", "exit"];
-const mountedStates = /* @__PURE__ */ new WeakMap();
+const mountedStates = /* @__PURE__ */ new Map();
 let id = 0;
 class MotionState {
   constructor(options, parent) {
+    var _a;
     this.element = null;
+    this.isSafeToRemove = false;
     this.isFirstAnimate = true;
+    this.children = /* @__PURE__ */ new Set();
     this.activeStates = {
-      initial: true,
+      // initial: true,
       animate: true
     };
     this._context = null;
     this.id = `motion-state-${id++}`;
+    mountedStates.set(this.id, this);
     this.options = options;
     this.parent = parent;
+    (_a = parent == null ? void 0 : parent.children) == null ? void 0 : _a.add(this);
     this.depth = (parent == null ? void 0 : parent.depth) + 1 || 0;
     this.visualElement = createVisualElement(this.options.as, {
       presenceContext: null,
@@ -7910,11 +7919,12 @@ class MotionState {
           attrs: {}
         },
         latestValues: {}
-      }
+      },
+      reducedMotionConfig: options.motionConfig.reduceMotion
     });
     const initialVariantSource = options.initial === false ? "animate" : "initial";
-    this.featureManager = new FeatureManager(this);
     this.initTarget(initialVariantSource);
+    this.featureManager = new FeatureManager(this);
   }
   get context() {
     if (!this._context) {
@@ -7930,7 +7940,7 @@ class MotionState {
   }
   initTarget(initialVariantSource) {
     this.baseTarget = resolveVariant(this.options[initialVariantSource] || this.context[initialVariantSource], this.options.variants) || {};
-    this.target = { ...this.baseTarget };
+    this.target = {};
   }
   get initial() {
     return isDef(this.options.initial) ? this.options.initial : this.context.initial;
@@ -7940,7 +7950,8 @@ class MotionState {
       ...this.options,
       whileHover: this.options.hover,
       whileTap: this.options.press,
-      whileInView: this.options.inView
+      whileInView: this.options.inView,
+      reducedMotionConfig: this.options.motionConfig.reduceMotion
     }, {
       isPresent: !doneCallbacks.has(this.element)
     });
@@ -7948,7 +7959,7 @@ class MotionState {
   beforeMount() {
     this.featureManager.beforeMount();
   }
-  mount(element, options) {
+  mount(element, options, notAnimate = false) {
     heyListen.invariant(
       Boolean(element),
       "Animation state must be mounted with valid Element"
@@ -7972,38 +7983,57 @@ class MotionState {
       }
     }
     this.featureManager.mount();
-    scheduleAnimation(this);
+    if (!notAnimate) {
+      this.animateUpdates(true);
+    }
   }
   beforeUnmount() {
     this.featureManager.beforeUnmount();
   }
-  unmount() {
-    var _a;
+  unmount(unMountChildren = false) {
+    var _a, _b;
     mountedStates.delete(this.element);
-    unscheduleAnimation(this);
-    (_a = visualElementStore.get(this.element)) == null ? void 0 : _a.unmount();
+    mountedStates.delete(this.id);
     this.featureManager.unmount();
+    (_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);
+      };
+      (_b = this.children) == null ? void 0 : _b.forEach(unmountChild);
+    }
   }
   beforeUpdate() {
     this.featureManager.beforeUpdate();
   }
-  update(options) {
+  update(options, notAnimate = false) {
+    const prevAnimate = JSON.stringify(this.options.animate);
     this.options = options;
+    let hasAnimateChange = false;
+    if (prevAnimate !== JSON.stringify(options.animate)) {
+      hasAnimateChange = true;
+    }
     this.updateOptions();
     this.featureManager.update();
-    scheduleAnimation(this);
+    if (hasAnimateChange && !notAnimate) {
+      scheduleAnimation(this);
+    }
   }
-  setActive(name, isActive) {
+  setActive(name, isActive, isAnimate = true) {
     var _a;
     if (!this.element || this.activeStates[name] === isActive)
       return;
     this.activeStates[name] = isActive;
     (_a = this.visualElement.variantChildren) == null ? void 0 : _a.forEach((child) => {
-      child.state.setActive(name, isActive);
+      child.state.setActive(name, isActive, false);
     });
-    scheduleAnimation(this);
+    if (isAnimate) {
+      scheduleAnimation(this);
+    }
   }
-  *animateUpdates() {
+  animateUpdates(isInitial = false) {
     const prevTarget = this.target;
     this.target = {};
     const activeState = {};
@@ -8011,13 +8041,13 @@ class MotionState {
     let transition;
     for (const name of STATE_TYPES) {
       if (name === "initial") {
-        if (!this.isFirstAnimate) {
+        if (!isInitial) {
           continue;
         }
-        this.isFirstAnimate = false;
       }
-      if (!this.activeStates[name])
+      if (!this.activeStates[name] && name !== "initial") {
         continue;
+      }
       const definition = isDef(this.options[name]) ? this.options[name] : this.context[name];
       const variant = resolveVariant(
         definition,
@@ -8073,11 +8103,10 @@ class MotionState {
     let getChildAnimations = () => Promise.resolve();
     let childAnimations = [];
     if (Object.keys(activeState).length) {
-      const { getAnimations, animations: animations2 } = animateVariantsChildren(this, activeState);
+      const { getAnimations, animations: animations2 } = animateVariantsChildren(this, activeState, isInitial);
       getChildAnimations = getAnimations;
       childAnimations = animations2;
     }
-    yield;
     let animations;
     const getAnimation = () => {
       animations = animationFactories.map((factory) => factory()).filter(Boolean);
@@ -8115,13 +8144,32 @@ class MotionState {
   getOptions() {
     return this.options;
   }
+  willUpdate(label) {
+    var _a;
+    (_a = this.visualElement.projection) == null ? void 0 : _a.willUpdate();
+  }
 }
 function getMotionElement(el) {
   if ((el == null ? void 0 : el.nodeType) === 3 || (el == null ? void 0 : el.nodeType) === 8)
     return getMotionElement(el.nextSibling);
   return el;
 }
-const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+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;
+}
+const defaultConfig = {
+  reduceMotion: "never",
+  transition: void 0,
+  nonce: void 0
+};
+const [injectMotionConfig, provideMotionConfig] = createContext("MotionConfig");
+function useMotionConfig() {
+  return injectMotionConfig(vue.computed(() => defaultConfig));
+}
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "Motion",
     inheritAttrs: false
@@ -8130,6 +8178,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   props: /* @__PURE__ */ vue.mergeDefaults({
     as: {},
     asChild: { type: Boolean },
+    whileDrag: {},
     custom: {},
     initial: { type: [String, Object, Boolean] },
     animate: {},
@@ -8139,11 +8188,15 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     transformTemplate: { type: Function },
     transition: {},
     layoutGroup: {},
+    motionConfig: {},
+    onAnimationComplete: { type: Function },
+    onUpdate: { type: Function },
     layout: { type: [Boolean, String] },
     layoutId: {},
     layoutScroll: { type: Boolean },
     layoutRoot: { type: Boolean },
     "data-framer-portal-id": {},
+    crossfade: { type: Boolean },
     globalPressTarget: { type: Boolean },
     press: {},
     onPressStart: { type: Function },
@@ -8189,20 +8242,35 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     layoutRoot: false,
     dragListener: true,
     dragElastic: 0.2,
-    dragMomentum: true
+    dragMomentum: true,
+    whileDrag: void 0,
+    crossfade: true
   }),
   setup(__props) {
     const props = __props;
-    const { initial: presenceInitial, safeUnmount } = injectAnimatePresence({ initial: vue.ref(void 0), safeUnmount: () => true });
+    const animatePresenceContext = injectAnimatePresence({});
     const parentState = injectMotion(null);
     const attrs = vue.useAttrs();
     const layoutGroup = injectLayoutGroup({});
-    const state2 = new MotionState(
-      {
+    const config = useMotionConfig();
+    function getLayoutId() {
+      if (layoutGroup.id && props.layoutId)
+        return `${layoutGroup.id}-${props.layoutId}`;
+      return props.layoutId || void 0;
+    }
+    function getMotionProps() {
+      return {
         ...attrs,
         ...props,
-        layoutGroup
-      },
+        layoutId: getLayoutId(),
+        transition: props.transition ?? config.value.transition,
+        layoutGroup,
+        motionConfig: config.value,
+        initial: animatePresenceContext.initial === false ? animatePresenceContext.initial : props.initial === true ? void 0 : props.initial
+      };
+    }
+    const state2 = new MotionState(
+      getMotionProps(),
       parentState
     );
     provideMotion(state2);
@@ -8211,29 +8279,20 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       state2.beforeMount();
     });
     vue.onMounted(() => {
-      state2.mount(getMotionElement(instance.$el), {
-        ...attrs,
-        ...props,
-        layoutGroup,
-        initial: presenceInitial.value === false ? presenceInitial.value : props.initial === true ? void 0 : props.initial
-      });
-    });
-    vue.onBeforeUnmount(() => {
-      state2.beforeUnmount();
+      state2.mount(getMotionElement(instance.$el), getMotionProps(), checkMotionIsHidden(instance));
     });
+    vue.onBeforeUnmount(() => state2.beforeUnmount());
     vue.onUnmounted(() => {
-      if (safeUnmount(getMotionElement(instance.$el)))
+      const el = getMotionElement(instance.$el);
+      if (!(el == null ? void 0 : el.isConnected)) {
         state2.unmount();
+      }
     });
     vue.onBeforeUpdate(() => {
       state2.beforeUpdate();
     });
     vue.onUpdated(() => {
-      state2.update({
-        ...attrs,
-        ...props,
-        initial: presenceInitial.value === false ? presenceInitial.value : props.initial === true ? void 0 : props.initial
-      });
+      state2.update(getMotionProps());
     });
     function getProps() {
       const isSVG = state2.visualElement.type === "svg";
@@ -8252,7 +8311,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
         Object.assign(styleProps, style2);
       }
       if (!state2.isMounted()) {
-        Object.assign(styleProps, state2.target);
+        Object.assign(styleProps, state2.baseTarget);
       }
       if (props.drag && props.dragListener !== false) {
         Object.assign(styleProps, {
@@ -8270,84 +8329,22 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       return attrsProps;
     }
     return (_ctx, _cache) => {
-      var _a, _b;
-      return vue.openBlock(), vue.createBlock(vue.unref(Primitive), vue.mergeProps({
+      return vue.openBlock(), vue.createBlock(vue.unref(Primitive), vue.mergeProps(getProps(), {
         as: _ctx.as,
-        "as-child": _ctx.asChild
-      }, getProps(), {
-        "data-layout-group-key": (_b = (_a = vue.unref(layoutGroup)) == null ? void 0 : _a.key) == null ? void 0 : _b.value
+        "as-child": _ctx.asChild,
+        "data-motion-id": vue.unref(state2).id
       }), {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16, ["as", "as-child", "data-layout-group-key"]);
+      }, 16, ["as", "as-child", "data-motion-id"]);
     };
   }
 });
-function useForceUpdate() {
-  const key = vue.ref(0);
-  function forceUpdate() {
-    key.value++;
-  }
-  return [forceUpdate, key];
-}
-function notify(node) {
-  return !node.isLayoutDirty && node.willUpdate(false);
-}
-function nodeGroup() {
-  const nodes = /* @__PURE__ */ new Set();
-  const subscriptions = /* @__PURE__ */ new WeakMap();
-  const dirtyAll = () => nodes.forEach(notify);
-  return {
-    add: (node) => {
-      nodes.add(node);
-      subscriptions.set(
-        node,
-        node.addEventListener("willUpdate", dirtyAll)
-      );
-    },
-    remove: (node) => {
-      nodes.delete(node);
-      const unsubscribe = subscriptions.get(node);
-      if (unsubscribe) {
-        unsubscribe();
-        subscriptions.delete(node);
-      }
-      dirtyAll();
-    },
-    dirty: dirtyAll
-  };
-}
-function useLayoutGroup(props) {
-  const parentGroup = injectLayoutGroup(null);
-  const [forceRender, key] = useForceUpdate();
-  const context = {
-    id: getGroupId(props, parentGroup),
-    group: getGroup(props, parentGroup),
-    forceRender,
-    key
-  };
-  vue.watch(key, () => {
-    context.id = getGroupId(props, parentGroup);
-  });
-  provideLayoutGroup(context);
-  return context;
-}
-function getGroupId(props, parentGroup) {
-  const shouldInherit = props.inherit === true || props.inherit === "id";
-  const parentId = parentGroup == null ? void 0 : parentGroup.id;
-  if (shouldInherit && parentId) {
-    return props.id ? `${parentId}-${props.id}` : parentId;
-  }
-  return props.id;
-}
-function getGroup(props, parentGroup) {
-  const shouldInherit = props.inherit === true || props.inherit === "group";
-  return shouldInherit ? (parentGroup == null ? void 0 : parentGroup.group) || nodeGroup() : nodeGroup();
-}
 function usePopLayout(props) {
   const styles = /* @__PURE__ */ new WeakMap();
+  const config = useMotionConfig();
   function addPopStyle(state2) {
     if (props.mode !== "popLayout")
       return;
@@ -8359,6 +8356,9 @@ function usePopLayout(props) {
     };
     state2.element.dataset.motionPopId = state2.id;
     const style2 = document.createElement("style");
+    if (config.value.nonce) {
+      style2.nonce = config.value.nonce;
+    }
     styles.set(state2, style2);
     document.head.appendChild(style2);
     style2.textContent = `
@@ -8390,7 +8390,7 @@ function usePopLayout(props) {
     removePopStyle
   };
 }
-const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "AnimatePresence",
     inheritAttrs: true
@@ -8400,44 +8400,64 @@ const _sfc_main$1 = /* @__PURE__ */ vue.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 } = vue.toRefs(props);
-    provideAnimatePresence({
-      initial,
-      safeUnmount(el) {
-        return !doneCallbacks.has(el);
-      }
+    const presenceContext = {
+      initial: props.initial,
+      custom: props.custom
+    };
+    provideAnimatePresence(presenceContext);
+    vue.onMounted(() => {
+      presenceContext.initial = void 0;
     });
     function enter(el) {
       const state2 = mountedStates.get(el);
+      const motionStateId = el.dataset.motionId;
+      const motionState = mountedStates.get(motionStateId);
+      if (motionState) {
+        const baseStyle = createStyles(motionState.baseTarget);
+        Object.assign(el.style, baseStyle);
+      }
       if (!state2) {
         return;
       }
       removeDoneCallback(el);
       state2.setActive("exit", false);
     }
-    const layoutGroup = useLayoutGroup(props);
     const { addPopStyle, removePopStyle } = usePopLayout(props);
+    const exitDom = /* @__PURE__ */ new Map();
+    vue.onUnmounted(() => {
+      exitDom.clear();
+    });
     function exit(el, done) {
       const state2 = mountedStates.get(el);
       if (!state2) {
         return done();
       }
+      exitDom.set(el, true);
       removeDoneCallback(el);
       addPopStyle(state2);
       function doneCallback(e) {
-        var _a, _b, _c;
-        removePopStyle(state2);
+        var _a, _b;
         if ((_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.isExit) {
+          const projection = state2.visualElement.projection;
+          if ((projection == null ? void 0 : projection.animationProgress) > 0 && !state2.isSafeToRemove) {
+            return;
+          }
+          state2.willUpdate("done");
+          removePopStyle(state2);
           removeDoneCallback(el);
-          (_b = state2.visualElement.projection) == null ? void 0 : _b.willUpdate();
-          (_c = layoutGroup.forceRender) == null ? void 0 : _c.call(layoutGroup);
+          exitDom.delete(el);
+          if (exitDom.size === 0) {
+            (_b = props.onExitComplete) == null ? void 0 : _b.call(props);
+          }
           done();
-          if (!el.isConnected) {
-            state2.unmount();
+          if (!(el == null ? void 0 : el.isConnected)) {
+            state2.unmount(true);
           }
         }
       }
@@ -8461,6 +8481,97 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "MotionConfig",
+    inheritAttrs: false
+  },
+  __name: "MotionConfig",
+  props: {
+    transition: {},
+    reduceMotion: { default: defaultConfig.reduceMotion },
+    nonce: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const parentConfig = useMotionConfig();
+    const config = vue.computed(() => ({
+      transition: props.transition ?? parentConfig.value.transition,
+      reduceMotion: props.reduceMotion ?? parentConfig.value.reduceMotion,
+      nonce: props.nonce ?? parentConfig.value.nonce
+    }));
+    provideMotionConfig(config);
+    return (_ctx, _cache) => {
+      return vue.renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+function useForceUpdate() {
+  const key = vue.ref(0);
+  function forceUpdate() {
+    key.value++;
+  }
+  return [forceUpdate, key];
+}
+function notify(node) {
+  return !node.isLayoutDirty && node.willUpdate(false);
+}
+function nodeGroup() {
+  const nodes = /* @__PURE__ */ new Set();
+  const subscriptions = /* @__PURE__ */ new WeakMap();
+  const dirtyAll = () => nodes.forEach(notify);
+  return {
+    add: (node) => {
+      nodes.add(node);
+      subscriptions.set(
+        node,
+        node.addEventListener("willUpdate", dirtyAll)
+      );
+    },
+    remove: (node) => {
+      nodes.delete(node);
+      const unsubscribe = subscriptions.get(node);
+      if (unsubscribe) {
+        unsubscribe();
+        subscriptions.delete(node);
+      }
+    },
+    dirty: dirtyAll,
+    didUpdate: () => {
+      var _a;
+      (_a = nodes[0]) == null ? void 0 : _a.didUpdate();
+    }
+  };
+}
+function useLayoutGroupProvider(props) {
+  const parentGroup = injectLayoutGroup(null);
+  const [forceRender, key] = useForceUpdate();
+  const context = {
+    id: getGroupId(props, parentGroup),
+    group: getGroup(props, parentGroup),
+    forceRender,
+    key
+  };
+  provideLayoutGroup(context);
+  return context;
+}
+function useLayoutGroup() {
+  const { forceRender } = injectLayoutGroup({ forceRender: () => {
+  } });
+  return { forceRender };
+}
+function getGroupId(props, parentGroup) {
+  const shouldInherit = props.inherit === true || props.inherit === "id";
+  const parentId = parentGroup == null ? void 0 : parentGroup.id;
+  if (shouldInherit && parentId) {
+    return props.id ? `${parentId}-${props.id}` : parentId;
+  }
+  return props.id;
+}
+function getGroup(props, parentGroup) {
+  const shouldInherit = props.inherit === true || props.inherit === "group";
+  return shouldInherit ? (parentGroup == null ? void 0 : parentGroup.group) || nodeGroup() : nodeGroup();
+}
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "LayoutGroup",
   props: {
@@ -8469,9 +8580,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     const props = __props;
-    useLayoutGroup(props);
+    const { forceRender, key, group } = useLayoutGroupProvider(props);
+    vue.onBeforeUpdate(() => {
+      group.dirty();
+    });
     return (_ctx, _cache) => {
-      return vue.renderSlot(_ctx.$slots, "default");
+      return vue.renderSlot(_ctx.$slots, "default", {
+        renderKey: vue.unref(key),
+        forceRender: vue.unref(forceRender)
+      });
     };
   }
 });
@@ -8679,7 +8796,8 @@ const components = {
   motion: [
     "Motion",
     "AnimatePresence",
-    "LayoutGroup"
+    "LayoutGroup",
+    "MotionConfig"
   ]
 };
 const utilities = {
@@ -8694,7 +8812,8 @@ const utilities = {
     "useAnimate",
     "useInView",
     "useAnimationFrame",
-    "useMotionValueEvent"
+    "useMotionValueEvent",
+    "useLayoutGroup"
   ]
 };
 function useAnimate() {
@@ -8727,9 +8846,10 @@ Object.defineProperty(exports, "isDragActive", {
   enumerable: true,
   get: () => motionDom.isDragActive
 });
-exports.AnimatePresence = _sfc_main$1;
+exports.AnimatePresence = _sfc_main$2;
 exports.LayoutGroup = _sfc_main;
-exports.Motion = _sfc_main$2;
+exports.Motion = _sfc_main$3;
+exports.MotionConfig = _sfc_main$1;
 exports.MotionValue = MotionValue;
 exports.animate = animate;
 exports.animateMini = animateMini;
@@ -8773,12 +8893,11 @@ exports.pipe = pipe;
 exports.progress = progress$1;
 exports.provideLayoutGroup = provideLayoutGroup;
 exports.provideMotion = provideMotion;
+exports.provideMotionConfig = provideMotionConfig;
 exports.reverseEasing = reverseEasing;
 exports.scroll = scroll;
 exports.scrollInfo = scrollInfo;
 exports.secondsToMilliseconds = secondsToMilliseconds;
-exports.shouldInheritGroup = shouldInheritGroup;
-exports.shouldInheritId = shouldInheritId;
 exports.spring = spring;
 exports.stagger = stagger;
 exports.steps = steps;
@@ -8790,6 +8909,8 @@ exports.useAnimationFrame = useAnimationFrame;
 exports.useCombineMotionValues = useCombineMotionValues;
 exports.useComputed = useComputed;
 exports.useInView = useInView;
+exports.useLayoutGroup = useLayoutGroup;
+exports.useMotionConfig = useMotionConfig;
 exports.useMotionTemplate = useMotionTemplate;
 exports.useMotionValue = motionValue;
 exports.useMotionValueEvent = useMotionValueEvent;