motion-v 0.5.1 → 0.6.0

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

@@ -4,7 +4,7 @@ import { resolveVariant, getOptions, hasChanged } from "./utils.mjs";
 import { FeatureManager } from "../features/feature-manager.mjs";
 import { style } from "./style.mjs";
 import { transformResetValue } from "./transform.mjs";
-import { scheduleAnimation, unscheduleAnimation } from "./schedule.mjs";
+import { scheduleAnimation } from "./schedule.mjs";
 import { motionEvent } from "./event.mjs";
 import { createVisualElement } from "./create-visual-element.mjs";
 import { animateVariantsChildren } from "./animate-variants-children.mjs";
@@ -14,20 +14,25 @@ import "../external/.pnpm/motion-utils@11.14.3/external/motion-utils/dist/es/err
 import { animate } from "../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/animation/animate/index.mjs";
 import { isDef } from "../external/.pnpm/@vueuse_shared@12.0.0_typescript@5.7.2/external/@vueuse/shared/index.mjs";
 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,
@@ -47,11 +52,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) {
@@ -67,7 +73,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;
@@ -77,7 +83,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)
     });
@@ -85,7 +92,7 @@ class MotionState {
   beforeMount() {
     this.featureManager.beforeMount();
   }
-  mount(element, options) {
+  mount(element, options, notAnimate = false) {
     invariant(
       Boolean(element),
       "Animation state must be mounted with valid Element"
@@ -109,38 +116,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 = {};
@@ -148,13 +174,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,
@@ -210,11 +236,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);
@@ -252,6 +277,10 @@ class MotionState {
   getOptions() {
     return this.options;
   }
+  willUpdate(label) {
+    var _a;
+    (_a = this.visualElement.projection) == null ? void 0 : _a.willUpdate();
+  }
 }
 export {
   MotionState,

package/dist/es/state/schedule.mjs

@@ -1,30 +1,6 @@
-import { addUniqueItem, removeItem } from "./utils.mjs";
-let scheduled;
-const fireNext = (iterator) => iterator.next();
-const fireAnimateUpdates = (state) => state.animateUpdates();
-function processScheduledAnimations() {
-  if (!scheduled)
-    return;
-  const generators = scheduled.sort(compareByDepth).map(fireAnimateUpdates);
-  generators.forEach(fireNext);
-  generators.forEach(fireNext);
-  scheduled = void 0;
-}
 function scheduleAnimation(state) {
-  if (!scheduled) {
-    scheduled = [state];
-    requestAnimationFrame(processScheduledAnimations);
-  } else {
-    addUniqueItem(scheduled, state);
-  }
-}
-function unscheduleAnimation(state) {
-  scheduled && removeItem(scheduled, state);
-}
-function compareByDepth(a, b) {
-  return a.depth - b.depth;
+  state.animateUpdates();
 }
 export {
-  scheduleAnimation,
-  unscheduleAnimation
+  scheduleAnimation
 };

package/dist/es/state/utils.mjs

@@ -23,13 +23,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 };
 }
@@ -102,14 +95,12 @@ function isSVGElement(as) {
   return svgElementSet.has(as);
 }
 export {
-  addUniqueItem,
   getOptions,
   hasChanged,
   isCssVar,
   isNumber,
   isSVGElement,
   noopReturn,
-  removeItem,
   resolveVariant,
   shallowCompare,
   svgElements

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/{AnimatePresence.d.ts → animate-presence/AnimatePresence.d.ts}

@@ -1,4 +1,4 @@
-import { AnimatePresenceProps } from './type';
+import { AnimatePresenceProps } from './types';
 declare function __VLS_template(): {
     slots: {
         default?(_: {}): any;

package/dist/src/components/animate-presence/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AnimatePresence } from './AnimatePresence';
+export type { AnimatePresenceProps } from './types';

package/dist/src/components/{type.d.ts → animate-presence/types.d.ts}

@@ -3,4 +3,6 @@ export interface AnimatePresenceProps {
     initial?: boolean;
     multiple?: boolean;
     as?: string;
+    custom?: any;
+    onExitComplete?: VoidFunction;
 }

package/dist/src/components/{use-pop-layout.d.ts → animate-presence/use-pop-layout.d.ts}

@@ -1,5 +1,5 @@
-import { AnimatePresenceProps } from './type';
-import { MotionState } from '../state';
+import { AnimatePresenceProps } from './types';
+import { MotionState } from '../../state';
 export declare function usePopLayout(props: AnimatePresenceProps): {
     addPopStyle: (state: MotionState) => void;
     removePopStyle: (state: MotionState) => void;

package/dist/src/components/animate-presence/use-presence.d.ts

@@ -0,0 +1,2 @@
+export declare const presenceMeasure: Map<HTMLElement, boolean>;
+export declare function usePresence(): void;

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

@@ -6,6 +6,7 @@ export interface NodeGroup {
     add: (node: IProjectionNode) => void;
     remove: (node: IProjectionNode) => void;
     dirty: VoidFunction;
+    didUpdate: VoidFunction;
 }
 export interface LayoutGroupState {
     id?: string;
@@ -14,6 +15,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/group.d.ts

@@ -3,5 +3,6 @@ export interface NodeGroup {
     add: (node: IProjectionNode) => void;
     remove: (node: IProjectionNode) => void;
     dirty: VoidFunction;
+    didUpdate: VoidFunction;
 }
 export declare function nodeGroup(): NodeGroup;

package/dist/src/components/hooks/use-motion-elm.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Get the actual motion element, skipping text and comment nodes
+ * @param el - The HTML element to check
+ * @returns The first non-text/comment element
+ */
+export declare function getMotionElement(el: HTMLElement): HTMLElement;
+/**
+ * Hook to get the motion element of current component instance
+ * @returns Function that returns the motion element
+ */
+export declare function useMotionElm(): {
+    value: HTMLElement | null;
+};

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

@@ -0,0 +1,2 @@
+export * from './animate-presence';
+export * from './motion-config';

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/presence.d.ts

@@ -1,9 +1,7 @@
-import { Ref } from 'vue';
-export declare const doneCallbacks: WeakMap<Element, VoidFunction>;
-export declare const unPresenceDom: Ref<WeakMap<Element, boolean> & Omit<WeakMap<Element, boolean>, keyof WeakMap<any, any>>>;
+export declare const doneCallbacks: WeakMap<Element, (v?: any, safeUnmount?: boolean) => void>;
 export declare function removeDoneCallback(element: Element): void;
 export interface PresenceContext {
-    initial: Ref<boolean>;
-    safeUnmount: (el: Element) => boolean;
+    initial?: boolean;
+    custom?: any;
 }
 export declare const injectAnimatePresence: <T extends PresenceContext = PresenceContext>(fallback?: T) => T extends null ? PresenceContext : PresenceContext, provideAnimatePresence: (contextValue: PresenceContext) => PresenceContext;

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/components/utils.d.ts

@@ -1 +1,8 @@
+import { ComponentPublicInstance } from 'vue';
 export declare function getMotionElement(el: HTMLElement): HTMLElement;
+/**
+ * 检查是否是隐藏的 motion 元素
+ * @param instance
+ * @returns
+ */
+export declare function checkMotionIsHidden(instance: ComponentPublicInstance): boolean;

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

@@ -1,9 +1,9 @@
 export * from 'framer-motion/dom';
 export { motionValue as useMotionValue } from 'framer-motion/dom';
 export { default as Motion, type MotionProps } from './components/Motion';
-export { default as AnimatePresence } from './components/AnimatePresence';
-export type { AnimatePresenceProps } from './components/type';
+export * from './components';
 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/context';
 export * from './value';

package/dist/src/state/animate-variants-children.d.ts

@@ -6,7 +6,7 @@ export type ActiveVariant = {
         transition: AnimateOptions;
     };
 };
-export declare function animateVariantsChildren(state: MotionState, activeState: ActiveVariant): {
+export declare function animateVariantsChildren(state: MotionState, activeState: ActiveVariant, isFirstAnimate?: boolean): {
     animations: any[];
     getAnimations: () => Promise<void>;
 } | {

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

@@ -1,5 +1,5 @@
 import { Variant } from '../types';
-export type MotionEventNames = 'motionstart' | 'motioncomplete' | 'hoverstart' | 'hoverend' | 'pressstart' | 'pressend' | 'viewenter' | 'viewleave';
+export type MotionEventNames = 'motionstart' | 'motioncomplete';
 export declare function motionEvent(name: MotionEventNames, target: Variant, isExit?: boolean): CustomEvent<{
     target: Variant;
     isExit: boolean;

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

@@ -2,13 +2,15 @@ import { MotionStateContext, Options } from '../types';
 import { DOMKeyframesDefinition, VisualElement } from 'framer-motion';
 declare const STATE_TYPES: readonly ["initial", "animate", "inView", "hover", "press", "whileDrag", "exit"];
 type StateType = typeof STATE_TYPES[number];
-export declare const mountedStates: WeakMap<Element, MotionState>;
+export declare const mountedStates: Map<string | Element, MotionState>;
 export declare class MotionState {
     readonly id: string;
     element: HTMLElement | null;
     private parent?;
     options: Options;
-    private isFirstAnimate;
+    isSafeToRemove: boolean;
+    isFirstAnimate: boolean;
+    private children?;
     activeStates: Partial<Record<StateType, boolean>>;
     depth: number;
     baseTarget: DOMKeyframesDefinition;
@@ -22,14 +24,15 @@ export declare class MotionState {
     get initial(): string | boolean | import('../types').Variant;
     updateOptions(): void;
     beforeMount(): void;
-    mount(element: HTMLElement, options: Options): void;
+    mount(element: HTMLElement, options: Options, notAnimate?: boolean): void;
     beforeUnmount(): void;
-    unmount(): void;
+    unmount(unMountChildren?: boolean): void;
     beforeUpdate(): void;
-    update(options: Options): void;
-    setActive(name: StateType, isActive: boolean): void;
-    animateUpdates(): Generator<any, void, unknown>;
+    update(options: Options, notAnimate?: boolean): void;
+    setActive(name: StateType, isActive: boolean, isAnimate?: boolean): void;
+    animateUpdates(isInitial?: boolean): void;
     isMounted(): boolean;
     getOptions(): Options<any>;
+    willUpdate(label: string): void;
 }
 export {};

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

@@ -1,4 +1,4 @@
-import { DOMKeyframesDefinition, DynamicAnimationOptions, Target, TargetAndTransition } from 'framer-motion';
+import { DOMKeyframesDefinition, DynamicAnimationOptions, ResolvedValues, Target, TargetAndTransition } from 'framer-motion';
 import { MotionValue, animate } from 'framer-motion/dom';
 import { IntrinsicElementAttributes } from 'vue';
 import { TransformProperties } from './transform';
@@ -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;
@@ -49,8 +50,13 @@ export interface Options<T = any> extends LayoutOptions, PressProps, HoverProps,
     };
     style?: MotionStyle;
     transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;
-    transition?: AnimateOptions;
+    transition?: AnimateOptions & {
+        layout?: DynamicAnimationOptions;
+    };
     layoutGroup?: LayoutGroupState;
+    motionConfig?: MotionConfigState;
+    onAnimationComplete?: (definition: AnimateOptions) => void;
+    onUpdate?: (latest: ResolvedValues) => void;
 }
 export interface MotionStateContext {
     initial?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "",
   "author": "",
   "license": "MIT",
@@ -63,6 +63,7 @@
     "@vitest/coverage-v8": "^1.4.0",
     "@vue/test-utils": "^2.4.5",
     "framer-motion": "^11.15.0",
+    "happy-dom": "^16.0.1",
     "jsdom": "^24.0.0",
     "vite": "^5.4.8",
     "vite-plugin-dts": "^4.2.4",
@@ -71,7 +72,7 @@
   "scripts": {
     "dev": "vite build --watch",
     "build": "rm -rf dist && vite build",
-    "test": "vitest",
+    "test": "vitest --dom",
     "coverage": "vitest run --coverage",
     "pub:release": "pnpm publish --access public"
   }