motion-v 0.5.1 → 0.5.2-beta.1

package/dist/cjs/index.js

@@ -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;
@@ -6212,9 +6206,8 @@ class LayoutFeature extends Feature {
     (_a = this.state.visualElement.projection) == null ? void 0 : _a.willUpdate();
   }
   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 +6225,15 @@ class LayoutFeature extends Feature {
     }
   }
   beforeUnmount() {
-    if (this.state.visualElement.projection) {
-      this.state.visualElement.projection.willUpdate();
-    }
   }
   unmount() {
-    if (this.state.visualElement.projection) {
-      this.state.visualElement.projection.unmount();
+    const projection = this.state.visualElement.projection;
+    if (projection) {
+      projection.root.didUpdate();
+      projection.finishAnimation();
       const layoutGroup = this.state.options.layoutGroup;
       if (layoutGroup == null ? void 0 : layoutGroup.group)
-        layoutGroup.group.remove(this.state.visualElement.projection);
+        layoutGroup.group.remove(projection);
     }
   }
 }
@@ -7730,12 +7722,28 @@ 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
     });
   }
   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);
@@ -7828,7 +7836,7 @@ function animateVariantsChildren(state2, activeState) {
     for (const name in activeState) {
       childState.activeStates[name] = true;
       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(
@@ -7910,7 +7918,8 @@ class MotionState {
           attrs: {}
         },
         latestValues: {}
-      }
+      },
+      reducedMotionConfig: options.motionConfig.reduceMotion
     });
     const initialVariantSource = options.initial === false ? "animate" : "initial";
     this.featureManager = new FeatureManager(this);
@@ -7940,7 +7949,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)
     });
@@ -8121,7 +8131,16 @@ function getMotionElement(el) {
     return getMotionElement(el.nextSibling);
   return el;
 }
-const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+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 +8149,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 +8159,13 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     transformTemplate: { type: Function },
     transition: {},
     layoutGroup: {},
+    motionConfig: {},
     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,7 +8211,9 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     layoutRoot: false,
     dragListener: true,
     dragElastic: 0.2,
-    dragMomentum: true
+    dragMomentum: true,
+    whileDrag: void 0,
+    crossfade: void 0
   }),
   setup(__props) {
     const props = __props;
@@ -8197,11 +8221,13 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     const parentState = injectMotion(null);
     const attrs = vue.useAttrs();
     const layoutGroup = injectLayoutGroup({});
+    const config = useMotionConfig();
     const state2 = new MotionState(
       {
         ...attrs,
         ...props,
-        layoutGroup
+        layoutGroup,
+        motionConfig: config.value
       },
       parentState
     );
@@ -8214,24 +8240,24 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       state2.mount(getMotionElement(instance.$el), {
         ...attrs,
         ...props,
+        transition: props.transition ?? config.value.transition,
         layoutGroup,
+        motionConfig: config.value,
         initial: presenceInitial.value === false ? presenceInitial.value : props.initial === true ? void 0 : props.initial
       });
     });
-    vue.onBeforeUnmount(() => {
-      state2.beforeUnmount();
-    });
+    vue.onBeforeUnmount(() => state2.beforeUnmount());
     vue.onUnmounted(() => {
       if (safeUnmount(getMotionElement(instance.$el)))
         state2.unmount();
     });
-    vue.onBeforeUpdate(() => {
-      state2.beforeUpdate();
-    });
+    vue.onBeforeUpdate(() => state2.beforeUpdate());
     vue.onUpdated(() => {
       state2.update({
         ...attrs,
         ...props,
+        transition: props.transition ?? config.value.transition,
+        motionConfig: config.value,
         initial: presenceInitial.value === false ? presenceInitial.value : props.initial === true ? void 0 : props.initial
       });
     });
@@ -8270,84 +8296,21 @@ 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({
         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
-      }), {
+      }, getProps()), {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16, ["as", "as-child", "data-layout-group-key"]);
+      }, 16, ["as", "as-child"]);
     };
   }
 });
-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 +8322,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 +8356,7 @@ function usePopLayout(props) {
     removePopStyle
   };
 }
-const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "AnimatePresence",
     inheritAttrs: true
@@ -8419,7 +8385,6 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       removeDoneCallback(el);
       state2.setActive("exit", false);
     }
-    const layoutGroup = useLayoutGroup(props);
     const { addPopStyle, removePopStyle } = usePopLayout(props);
     function exit(el, done) {
       const state2 = mountedStates.get(el);
@@ -8429,12 +8394,11 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       removeDoneCallback(el);
       addPopStyle(state2);
       function doneCallback(e) {
-        var _a, _b, _c;
+        var _a, _b;
         removePopStyle(state2);
         if ((_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.isExit) {
           removeDoneCallback(el);
           (_b = state2.visualElement.projection) == null ? void 0 : _b.willUpdate();
-          (_c = layoutGroup.forceRender) == null ? void 0 : _c.call(layoutGroup);
           done();
           if (!el.isConnected) {
             state2.unmount();
@@ -8461,7 +8425,70 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+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 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$1 = /* @__PURE__ */ vue.defineComponent({
   __name: "LayoutGroup",
   props: {
     id: {},
@@ -8469,7 +8496,40 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     const props = __props;
-    useLayoutGroup(props);
+    const { forceRender, key, group } = useLayoutGroupProvider(props);
+    vue.onUpdated(() => {
+    });
+    vue.onBeforeUpdate(() => {
+      group.dirty();
+    });
+    return (_ctx, _cache) => {
+      return vue.renderSlot(_ctx.$slots, "default", {
+        renderKey: vue.unref(key),
+        forceRender: vue.unref(forceRender)
+      });
+    };
+  }
+});
+const _sfc_main = /* @__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");
     };
@@ -8694,7 +8754,8 @@ const utilities = {
     "useAnimate",
     "useInView",
     "useAnimationFrame",
-    "useMotionValueEvent"
+    "useMotionValueEvent",
+    "useLayoutGroup"
   ]
 };
 function useAnimate() {
@@ -8727,9 +8788,10 @@ Object.defineProperty(exports, "isDragActive", {
   enumerable: true,
   get: () => motionDom.isDragActive
 });
-exports.AnimatePresence = _sfc_main$1;
-exports.LayoutGroup = _sfc_main;
-exports.Motion = _sfc_main$2;
+exports.AnimatePresence = _sfc_main$2;
+exports.LayoutGroup = _sfc_main$1;
+exports.Motion = _sfc_main$3;
+exports.MotionConfig = _sfc_main;
 exports.MotionValue = MotionValue;
 exports.animate = animate;
 exports.animateMini = animateMini;
@@ -8773,12 +8835,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 +8851,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;

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

@@ -1,7 +1,6 @@
 import { defineComponent, toRefs, openBlock, createBlock, resolveDynamicComponent, TransitionGroup, Transition, withCtx, renderSlot } from "vue";
 import { mountedStates } from "../state/motion-state.mjs";
 import { provideAnimatePresence, doneCallbacks, removeDoneCallback } from "./presence.mjs";
-import { useLayoutGroup } from "./use-layout-group.mjs";
 import { usePopLayout } from "./use-pop-layout.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -32,7 +31,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       removeDoneCallback(el);
       state.setActive("exit", false);
     }
-    const layoutGroup = useLayoutGroup(props);
     const { addPopStyle, removePopStyle } = usePopLayout(props);
     function exit(el, done) {
       const state = mountedStates.get(el);
@@ -42,12 +40,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       removeDoneCallback(el);
       addPopStyle(state);
       function doneCallback(e) {
-        var _a, _b, _c;
+        var _a, _b;
         removePopStyle(state);
         if ((_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.isExit) {
           removeDoneCallback(el);
           (_b = state.visualElement.projection) == null ? void 0 : _b.willUpdate();
-          (_c = layoutGroup.forceRender) == null ? void 0 : _c.call(layoutGroup);
           done();
           if (!el.isConnected) {
             state.unmount();

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, onUpdated, onBeforeUpdate, renderSlot, unref } from "vue";
+import { useLayoutGroupProvider } from "./use-layout-group.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LayoutGroup",
   props: {
@@ -8,9 +8,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    useLayoutGroup(props);
+    const { forceRender, key, group } = useLayoutGroupProvider(props);
+    onUpdated(() => {
+    });
+    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

@@ -5,6 +5,7 @@ import { Primitive } from "./Primitive.mjs";
 import { MotionState } from "../state/motion-state.mjs";
 import { injectAnimatePresence } from "./presence.mjs";
 import { getMotionElement } 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,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     transformTemplate: { type: Function },
     transition: {},
     layoutGroup: {},
+    motionConfig: {},
     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,7 +78,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     layoutRoot: false,
     dragListener: true,
     dragElastic: 0.2,
-    dragMomentum: true
+    dragMomentum: true,
+    whileDrag: void 0,
+    crossfade: void 0
   }),
   setup(__props) {
     const props = __props;
@@ -82,11 +88,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const parentState = injectMotion(null);
     const attrs = useAttrs();
     const layoutGroup = injectLayoutGroup({});
+    const config = useMotionConfig();
     const state = new MotionState(
       {
         ...attrs,
         ...props,
-        layoutGroup
+        layoutGroup,
+        motionConfig: config.value
       },
       parentState
     );
@@ -99,24 +107,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       state.mount(getMotionElement(instance.$el), {
         ...attrs,
         ...props,
+        transition: props.transition ?? config.value.transition,
         layoutGroup,
+        motionConfig: config.value,
         initial: presenceInitial.value === false ? presenceInitial.value : props.initial === true ? void 0 : props.initial
       });
     });
-    onBeforeUnmount(() => {
-      state.beforeUnmount();
-    });
+    onBeforeUnmount(() => state.beforeUnmount());
     onUnmounted(() => {
       if (safeUnmount(getMotionElement(instance.$el)))
         state.unmount();
     });
-    onBeforeUpdate(() => {
-      state.beforeUpdate();
-    });
+    onBeforeUpdate(() => state.beforeUpdate());
     onUpdated(() => {
       state.update({
         ...attrs,
         ...props,
+        transition: props.transition ?? config.value.transition,
+        motionConfig: config.value,
         initial: presenceInitial.value === false ? presenceInitial.value : props.initial === true ? void 0 : props.initial
       });
     });
@@ -155,18 +163,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return attrsProps;
     }
     return (_ctx, _cache) => {
-      var _a, _b;
       return openBlock(), createBlock(unref(Primitive), mergeProps({
         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
-      }), {
+      }, getProps()), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16, ["as", "as-child", "data-layout-group-key"]);
+      }, 16, ["as", "as-child"]);
     };
   }
 });

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/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/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/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/constants/index.mjs

@@ -17,7 +17,8 @@ const utilities = {
     "useAnimate",
     "useInView",
     "useAnimationFrame",
-    "useMotionValueEvent"
+    "useMotionValueEvent",
+    "useLayoutGroup"
   ]
 };
 export {

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

@@ -12,9 +12,8 @@ class LayoutFeature extends Feature {
     (_a = this.state.visualElement.projection) == null ? void 0 : _a.willUpdate();
   }
   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 +31,15 @@ class LayoutFeature extends Feature {
     }
   }
   beforeUnmount() {
-    if (this.state.visualElement.projection) {
-      this.state.visualElement.projection.willUpdate();
-    }
   }
   unmount() {
-    if (this.state.visualElement.projection) {
-      this.state.visualElement.projection.unmount();
+    const projection = this.state.visualElement.projection;
+    if (projection) {
+      projection.root.didUpdate();
+      projection.finishAnimation();
       const layoutGroup = this.state.options.layoutGroup;
       if (layoutGroup == null ? void 0 : layoutGroup.group)
-        layoutGroup.group.remove(this.state.visualElement.projection);
+        layoutGroup.group.remove(projection);
     }
   }
 }

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

@@ -23,12 +23,28 @@ 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
     });
   }
   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 { 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 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";
@@ -56,6 +59,7 @@ export {
   default3 as AnimatePresence,
   default4 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

@@ -19,7 +19,7 @@ function animateVariantsChildren(state, activeState) {
     for (const name in activeState) {
       childState.activeStates[name] = true;
       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(

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

@@ -47,7 +47,8 @@ class MotionState {
           attrs: {}
         },
         latestValues: {}
-      }
+      },
+      reducedMotionConfig: options.motionConfig.reduceMotion
     });
     const initialVariantSource = options.initial === false ? "animate" : "initial";
     this.featureManager = new FeatureManager(this);
@@ -77,7 +78,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)
     });

package/dist/src/components/LayoutGroup.d.ts

@@ -1,7 +1,10 @@
 import { LayoutGroupProps } from './use-layout-group';
 declare function __VLS_template(): {
     slots: {
-        default?(_: {}): any;
+        default?(_: {
+            renderKey: number;
+            forceRender: VoidFunction;
+        }): any;
     };
     refs: {};
     attrs: Partial<{}>;

package/dist/src/components/Motion.d.ts

@@ -3,6 +3,7 @@ import { ElementType, Options, SVGAttributesWithMotionValues, SetMotionValueType
 export interface MotionProps<T extends ElementType = 'div', K = unknown> extends Options<K> {
     as?: T;
     asChild?: boolean;
+    whileDrag?: Options['whileDrag'];
 }
 declare const _default: <T extends ElementType = "div", K = unknown>(__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> & (Omit<SetMotionValueType<IntrinsicElementAttributes, keyof SVGAttributesWithMotionValues>[T], "asChild" | keyof Options<any>> & MotionProps<T, K>)> & import('vue').PublicProps;

package/dist/src/components/context.d.ts

@@ -14,6 +14,3 @@ export interface LayoutGroupState {
     key?: Ref<number>;
 }
 export declare const injectLayoutGroup: <T extends LayoutGroupState = LayoutGroupState>(fallback?: T) => T extends null ? LayoutGroupState : LayoutGroupState, provideLayoutGroup: (contextValue: LayoutGroupState) => LayoutGroupState;
-export type InheritOption = boolean | 'id';
-export declare function shouldInheritGroup(inherit: InheritOption): inherit is true;
-export declare function shouldInheritId(inherit: InheritOption): boolean;

package/dist/src/components/motion-config/MotionConfig.d.ts

@@ -0,0 +1,39 @@
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<import('./types').MotionConfigState>, {
+    reduceMotion: "user" | "never" | "always";
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<import('./types').MotionConfigState>, {
+    reduceMotion: "user" | "never" | "always";
+}>>>, {
+    reduceMotion: "user" | "never" | "always";
+}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/src/components/motion-config/context.d.ts

@@ -0,0 +1,11 @@
+import { MotionConfigState } from './types';
+import { ComputedRef } from 'vue';
+/**
+ * Default motion configuration
+ */
+export declare const defaultConfig: MotionConfigState;
+/**
+ * Context for sharing motion configuration with child components
+ */
+export declare const injectMotionConfig: <T extends ComputedRef<MotionConfigState> = ComputedRef<MotionConfigState>>(fallback?: T) => T extends null ? ComputedRef<MotionConfigState> : ComputedRef<MotionConfigState>, provideMotionConfig: (contextValue: ComputedRef<MotionConfigState>) => ComputedRef<MotionConfigState>;
+export declare function useMotionConfig(): ComputedRef<MotionConfigState>;

package/dist/src/components/motion-config/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MotionConfig } from './MotionConfig';
+export { provideMotionConfig, useMotionConfig } from './context';

package/dist/src/components/motion-config/types.d.ts

@@ -0,0 +1,14 @@
+import { Options } from '../../types';
+/**
+ * Motion configuration state shared through context
+ */
+export interface MotionConfigState {
+    /** Default transition settings for animations */
+    transition?: Options['transition'];
+    /** Controls motion reduction based on user preference or explicit setting */
+    reduceMotion?: 'user' | 'never' | 'always';
+    /** Custom nonce for CSP compliance with inline styles */
+    nonce?: string;
+}
+/** Props interface matching the config state */
+export type MotionConfigProps = MotionConfigState;

package/dist/src/components/use-layout-group.d.ts

@@ -17,4 +17,7 @@ export interface LayoutGroupProps {
  * Hook to create and manage a layout group
  * Handles group inheritance, force updates, and context management
  */
-export declare function useLayoutGroup(props: LayoutGroupProps): LayoutGroupState;
+export declare function useLayoutGroupProvider(props: LayoutGroupProps): LayoutGroupState;
+export declare function useLayoutGroup(): {
+    forceRender: VoidFunction;
+};

package/dist/src/components/use-slot-change-index.d.ts

@@ -0,0 +1 @@
+export declare function useSlotChangeIndex(): import('vue').ComputedRef<number>;

package/dist/src/features/gestures/drag/types.d.ts

@@ -1,4 +1,5 @@
 import { DragControls } from './use-drag-controls';
+import { Variant } from '../../../types';
 import { Axis, BoundingBox, DragElastic, InertiaOptions, PanInfo } from 'framer-motion';
 export interface ResolvedConstraints {
     x: Partial<Axis>;
@@ -22,7 +23,7 @@ export interface DragHandlers {
      *
      * @public
      */
-    onDragStart?: (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => void;
+    onDragStart?: (event: PointerEvent, info: PanInfo) => void;
     /**
      * Callback function that fires when dragging ends.
      *
@@ -37,7 +38,7 @@ export interface DragHandlers {
      *
      * @public
      */
-    onDragEnd?: (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => void;
+    onDragEnd?: (event: PointerEvent, info: PanInfo) => void;
     /**
      * Callback function that fires when the component is dragged.
      *
@@ -52,7 +53,7 @@ export interface DragHandlers {
      *
      * @public
      */
-    onDrag?: (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => void;
+    onDrag?: (event: PointerEvent, info: PanInfo) => void;
     /**
      * Callback function that fires a drag direction is determined.
      *
@@ -220,4 +221,5 @@ export interface DragProps extends DragHandlers {
      * ```
      */
     dragControls?: DragControls;
+    whileDrag?: string | Variant;
 }

package/dist/src/features/gestures/types.d.ts

@@ -22,8 +22,3 @@ export interface DragOptions {
         timeConstant?: number;
     };
 }
-export interface DragHandlers {
-    onDragStart?: (event: PointerEvent) => void;
-    onDrag?: (event: PointerEvent) => void;
-    onDragEnd?: (event: PointerEvent) => void;
-}

package/dist/src/features/layout/projection.d.ts

@@ -3,5 +3,6 @@ export declare class ProjectionFeature extends Feature {
     constructor(state: any);
     initProjection(): void;
     beforeMount(): void;
+    update(): void;
     mount(): void;
 }

package/dist/src/features/layout/types.d.ts

@@ -4,4 +4,5 @@ export interface LayoutOptions {
     'layoutScroll'?: boolean;
     'layoutRoot'?: boolean;
     'data-framer-portal-id'?: string;
+    'crossfade'?: boolean;
 }

package/dist/src/index.d.ts

@@ -4,7 +4,9 @@ export { default as Motion, type MotionProps } from './components/Motion';
 export { default as AnimatePresence } from './components/AnimatePresence';
 export type { AnimatePresenceProps } from './components/type';
 export { default as LayoutGroup } from './components/LayoutGroup';
+export { useLayoutGroup } from './components/use-layout-group';
 export type { LayoutGroupProps } from './components/use-layout-group';
+export * from './components/motion-config';
 export * from './components/context';
 export * from './value';
 export * from './constants';

package/dist/src/types/state.d.ts

@@ -9,6 +9,7 @@ import { HoverProps } from '../features/gestures/hover/types';
 import { InViewProps } from '../features/gestures/in-view/types';
 import { LayoutGroupState } from '../components/context';
 import { PanProps } from '../features/gestures/pan/types';
+import { MotionConfigState } from '../components/motion-config/types';
 type AnimationPlaybackControls = ReturnType<typeof animate>;
 export interface Orchestration {
     delay?: number;
@@ -51,6 +52,7 @@ export interface Options<T = any> extends LayoutOptions, PressProps, HoverProps,
     transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;
     transition?: AnimateOptions;
     layoutGroup?: LayoutGroupState;
+    motionConfig?: MotionConfigState;
 }
 export interface MotionStateContext {
     initial?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.5.1",
+  "version": "0.5.2-beta.1",
   "description": "",
   "author": "",
   "license": "MIT",