motion-v 0.5.1 → 0.6.0

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

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

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

@@ -1,10 +1,11 @@
-import { defineComponent, mergeDefaults, ref, useAttrs, getCurrentInstance, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onBeforeUpdate, onUpdated, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
+import { defineComponent, mergeDefaults, useAttrs, getCurrentInstance, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onBeforeUpdate, onUpdated, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from "vue";
 import { injectMotion, injectLayoutGroup, provideMotion } from "./context.mjs";
 import { convertSvgStyleToAttributes, createStyles } from "../state/style.mjs";
 import { Primitive } from "./Primitive.mjs";
 import { MotionState } from "../state/motion-state.mjs";
 import { injectAnimatePresence } from "./presence.mjs";
-import { getMotionElement } from "./utils.mjs";
+import { getMotionElement, checkMotionIsHidden } from "./utils.mjs";
+import { useMotionConfig } from "./motion-config/context.mjs";
 import { isMotionValue } from "../utils/motion-value.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -15,6 +16,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: /* @__PURE__ */ mergeDefaults({
     as: {},
     asChild: { type: Boolean },
+    whileDrag: {},
     custom: {},
     initial: { type: [String, Object, Boolean] },
     animate: {},
@@ -24,11 +26,15 @@ const _sfc_main = /* @__PURE__ */ 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 },
@@ -74,20 +80,35 @@ const _sfc_main = /* @__PURE__ */ 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: ref(void 0), safeUnmount: () => true });
+    const animatePresenceContext = injectAnimatePresence({});
     const parentState = injectMotion(null);
     const attrs = useAttrs();
     const layoutGroup = injectLayoutGroup({});
-    const state = 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 state = new MotionState(
+      getMotionProps(),
       parentState
     );
     provideMotion(state);
@@ -96,29 +117,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       state.beforeMount();
     });
     onMounted(() => {
-      state.mount(getMotionElement(instance.$el), {
-        ...attrs,
-        ...props,
-        layoutGroup,
-        initial: presenceInitial.value === false ? presenceInitial.value : props.initial === true ? void 0 : props.initial
-      });
-    });
-    onBeforeUnmount(() => {
-      state.beforeUnmount();
+      state.mount(getMotionElement(instance.$el), getMotionProps(), checkMotionIsHidden(instance));
     });
+    onBeforeUnmount(() => state.beforeUnmount());
     onUnmounted(() => {
-      if (safeUnmount(getMotionElement(instance.$el)))
+      const el = getMotionElement(instance.$el);
+      if (!(el == null ? void 0 : el.isConnected)) {
         state.unmount();
+      }
     });
     onBeforeUpdate(() => {
       state.beforeUpdate();
     });
     onUpdated(() => {
-      state.update({
-        ...attrs,
-        ...props,
-        initial: presenceInitial.value === false ? presenceInitial.value : props.initial === true ? void 0 : props.initial
-      });
+      state.update(getMotionProps());
     });
     function getProps() {
       const isSVG = state.visualElement.type === "svg";
@@ -137,7 +149,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         Object.assign(styleProps, style);
       }
       if (!state.isMounted()) {
-        Object.assign(styleProps, state.target);
+        Object.assign(styleProps, state.baseTarget);
       }
       if (props.drag && props.dragListener !== false) {
         Object.assign(styleProps, {
@@ -155,18 +167,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return attrsProps;
     }
     return (_ctx, _cache) => {
-      var _a, _b;
-      return openBlock(), createBlock(unref(Primitive), mergeProps({
+      return openBlock(), createBlock(unref(Primitive), mergeProps(getProps(), {
         as: _ctx.as,
-        "as-child": _ctx.asChild
-      }, getProps(), {
-        "data-layout-group-key": (_b = (_a = unref(layoutGroup)) == null ? void 0 : _a.key) == null ? void 0 : _b.value
+        "as-child": _ctx.asChild,
+        "data-motion-id": unref(state).id
       }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16, ["as", "as-child", "data-layout-group-key"]);
+      }, 16, ["as", "as-child", "data-motion-id"]);
     };
   }
 });

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

@@ -1,8 +1,8 @@
-import { defineComponent, toRefs, openBlock, createBlock, resolveDynamicComponent, TransitionGroup, Transition, withCtx, renderSlot } from "vue";
-import { mountedStates } from "../state/motion-state.mjs";
-import { provideAnimatePresence, doneCallbacks, removeDoneCallback } from "./presence.mjs";
-import { useLayoutGroup } from "./use-layout-group.mjs";
+import { defineComponent, onMounted, onUnmounted, openBlock, createBlock, resolveDynamicComponent, TransitionGroup, Transition, withCtx, renderSlot } from "vue";
+import { mountedStates } from "../../state/motion-state.mjs";
+import { provideAnimatePresence, removeDoneCallback, doneCallbacks } from "../presence.mjs";
 import { usePopLayout } from "./use-pop-layout.mjs";
+import { createStyles } from "../../state/style.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "AnimatePresence",
@@ -13,44 +13,64 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     mode: { default: "sync" },
     initial: { type: Boolean, default: true },
     multiple: { type: Boolean, default: false },
-    as: {}
+    as: {},
+    custom: {},
+    onExitComplete: {}
   },
   setup(__props) {
     const props = __props;
-    const { initial } = toRefs(props);
-    provideAnimatePresence({
-      initial,
-      safeUnmount(el) {
-        return !doneCallbacks.has(el);
-      }
+    const presenceContext = {
+      initial: props.initial,
+      custom: props.custom
+    };
+    provideAnimatePresence(presenceContext);
+    onMounted(() => {
+      presenceContext.initial = void 0;
     });
     function enter(el) {
       const state = mountedStates.get(el);
+      const motionStateId = el.dataset.motionId;
+      const motionState = mountedStates.get(motionStateId);
+      if (motionState) {
+        const baseStyle = createStyles(motionState.baseTarget);
+        Object.assign(el.style, baseStyle);
+      }
       if (!state) {
         return;
       }
       removeDoneCallback(el);
       state.setActive("exit", false);
     }
-    const layoutGroup = useLayoutGroup(props);
     const { addPopStyle, removePopStyle } = usePopLayout(props);
+    const exitDom = /* @__PURE__ */ new Map();
+    onUnmounted(() => {
+      exitDom.clear();
+    });
     function exit(el, done) {
       const state = mountedStates.get(el);
       if (!state) {
         return done();
       }
+      exitDom.set(el, true);
       removeDoneCallback(el);
       addPopStyle(state);
       function doneCallback(e) {
-        var _a, _b, _c;
-        removePopStyle(state);
+        var _a, _b;
         if ((_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.isExit) {
+          const projection = state.visualElement.projection;
+          if ((projection == null ? void 0 : projection.animationProgress) > 0 && !state.isSafeToRemove) {
+            return;
+          }
+          state.willUpdate("done");
+          removePopStyle(state);
           removeDoneCallback(el);
-          (_b = state.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) {
-            state.unmount();
+          if (!(el == null ? void 0 : el.isConnected)) {
+            state.unmount(true);
           }
         }
       }

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

@@ -1,5 +1,7 @@
+import { useMotionConfig } from "../motion-config/context.mjs";
 function usePopLayout(props) {
   const styles = /* @__PURE__ */ new WeakMap();
+  const config = useMotionConfig();
   function addPopStyle(state) {
     if (props.mode !== "popLayout")
       return;
@@ -11,6 +13,9 @@ function usePopLayout(props) {
     };
     state.element.dataset.motionPopId = state.id;
     const style = document.createElement("style");
+    if (config.value.nonce) {
+      style.nonce = config.value.nonce;
+    }
     styles.set(state, style);
     document.head.appendChild(style);
     style.textContent = `

package/dist/es/components/context.mjs

@@ -1,17 +1,9 @@
 import { createContext } from "../utils/createContext.mjs";
 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";
-}
 export {
   injectLayoutGroup,
   injectMotion,
   provideLayoutGroup,
-  provideMotion,
-  shouldInheritGroup,
-  shouldInheritId
+  provideMotion
 };

package/dist/es/components/group.mjs

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

package/dist/es/components/motion-config/MotionConfig.vue.mjs

@@ -0,0 +1,30 @@
+import { defineComponent, computed, renderSlot } from "vue";
+import { defaultConfig, useMotionConfig, provideMotionConfig } from "./context.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MotionConfig",
+    inheritAttrs: false
+  },
+  __name: "MotionConfig",
+  props: {
+    transition: {},
+    reduceMotion: { default: defaultConfig.reduceMotion },
+    nonce: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const parentConfig = useMotionConfig();
+    const config = 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 renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/es/components/motion-config/MotionConfig.vue2.mjs

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

package/dist/es/components/motion-config/context.mjs

@@ -0,0 +1,17 @@
+import { computed } from "vue";
+import { createContext } from "../../utils/createContext.mjs";
+const defaultConfig = {
+  reduceMotion: "never",
+  transition: void 0,
+  nonce: void 0
+};
+const [injectMotionConfig, provideMotionConfig] = createContext("MotionConfig");
+function useMotionConfig() {
+  return injectMotionConfig(computed(() => defaultConfig));
+}
+export {
+  defaultConfig,
+  injectMotionConfig,
+  provideMotionConfig,
+  useMotionConfig
+};

package/dist/es/components/presence.mjs

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

package/dist/es/components/use-layout-group.mjs

@@ -1,8 +1,7 @@
-import { watch } from "vue";
 import { injectLayoutGroup, provideLayoutGroup } from "./context.mjs";
 import { useForceUpdate } from "./use-force-update.mjs";
 import { nodeGroup } from "./group.mjs";
-function useLayoutGroup(props) {
+function useLayoutGroupProvider(props) {
   const parentGroup = injectLayoutGroup(null);
   const [forceRender, key] = useForceUpdate();
   const context = {
@@ -11,12 +10,14 @@ function useLayoutGroup(props) {
     forceRender,
     key
   };
-  watch(key, () => {
-    context.id = getGroupId(props, parentGroup);
-  });
   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;
@@ -30,5 +31,6 @@ function getGroup(props, parentGroup) {
   return shouldInherit ? (parentGroup == null ? void 0 : parentGroup.group) || nodeGroup() : nodeGroup();
 }
 export {
-  useLayoutGroup
+  useLayoutGroup,
+  useLayoutGroupProvider
 };

package/dist/es/components/utils.mjs

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

package/dist/es/constants/index.mjs

@@ -2,7 +2,8 @@ const components = {
   motion: [
     "Motion",
     "AnimatePresence",
-    "LayoutGroup"
+    "LayoutGroup",
+    "MotionConfig"
   ]
 };
 const utilities = {
@@ -17,7 +18,8 @@ const utilities = {
     "useAnimate",
     "useInView",
     "useAnimationFrame",
-    "useMotionValueEvent"
+    "useMotionValueEvent",
+    "useLayoutGroup"
   ]
 };
 export {

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

@@ -8,13 +8,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() {
   }
@@ -32,16 +30,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();
     }
   }
 }

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

@@ -3,6 +3,7 @@ import { HTMLProjectionNode } from "../../external/.pnpm/framer-motion@11.15.0/e
 import { getClosestProjectingNode } from "./utils.mjs";
 import { addScaleCorrector } from "../../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/projection/styles/scale-correction.mjs";
 import { defaultScaleCorrector } from "./config.mjs";
+import { doneCallbacks } from "../../components/presence.mjs";
 class ProjectionFeature extends Feature {
   constructor(state) {
     super(state);
@@ -14,6 +15,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,
@@ -23,12 +25,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);

package/dist/es/index.mjs

@@ -1,8 +1,10 @@
 import { default as default2 } from "./components/Motion.vue.mjs";
-import { default as default3 } from "./components/AnimatePresence.vue.mjs";
-import { default as default4 } from "./components/LayoutGroup.vue.mjs";
-import { injectLayoutGroup, injectMotion, provideLayoutGroup, provideMotion, shouldInheritGroup, shouldInheritId } from "./components/context.mjs";
+import { default as default3 } from "./components/LayoutGroup.vue.mjs";
+import { useLayoutGroup } from "./components/use-layout-group.mjs";
+import { injectLayoutGroup, injectMotion, provideLayoutGroup, provideMotion } from "./components/context.mjs";
 import { components, utilities } from "./constants/index.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@11.15.0/external/framer-motion/dist/es/value/index.mjs";
 import { invariant } from "./external/.pnpm/motion-utils@11.14.3/external/motion-utils/dist/es/errors.mjs";
 import { noop } from "./external/.pnpm/motion-utils@11.14.3/external/motion-utils/dist/es/noop.mjs";
@@ -36,6 +38,7 @@ import { wrap } from "./external/.pnpm/framer-motion@11.15.0/external/framer-mot
 import { time } from "./external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/frameloop/sync-time.mjs";
 import { cancelSync, sync } from "./external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/frameloop/index-legacy.mjs";
 import { cancelFrame, frame, frameData, frameSteps } from "./external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { provideMotionConfig, useMotionConfig } from "./components/motion-config/context.mjs";
 import { useComputed } from "./value/use-computed.mjs";
 import { useCombineMotionValues } from "./value/use-combine-values.mjs";
 import { useTransform } from "./value/use-transform.mjs";
@@ -53,9 +56,10 @@ 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 {
-  default3 as AnimatePresence,
-  default4 as LayoutGroup,
+  default4 as AnimatePresence,
+  default3 as LayoutGroup,
   default2 as Motion,
+  default5 as MotionConfig,
   MotionValue,
   animate,
   animateMini,
@@ -101,12 +105,11 @@ export {
   progress,
   provideLayoutGroup,
   provideMotion,
+  provideMotionConfig,
   reverseEasing,
   scroll,
   scrollInfo,
   secondsToMilliseconds,
-  shouldInheritGroup,
-  shouldInheritId,
   spring,
   stagger,
   steps,
@@ -118,6 +121,8 @@ export {
   useCombineMotionValues,
   useComputed,
   useInView,
+  useLayoutGroup,
+  useMotionConfig,
   useMotionTemplate,
   motionValue2 as useMotionValue,
   useMotionValueEvent,

package/dist/es/state/animate-variants-children.mjs

@@ -2,7 +2,7 @@ import { style } from "./style.mjs";
 import { transformResetValue } from "./transform.mjs";
 import { resolveVariant, hasChanged, getOptions } from "./utils.mjs";
 import { animate } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/animation/animate/index.mjs";
-function animateVariantsChildren(state, activeState) {
+function animateVariantsChildren(state, activeState, isFirstAnimate = false) {
   const variantChildren = state.visualElement.variantChildren;
   if (!(variantChildren == null ? void 0 : variantChildren.size)) {
     return {
@@ -13,13 +13,15 @@ function animateVariantsChildren(state, 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(