motion-v 0.13.1 → 1.0.0-alpha.1

package/dist/es/features/animation/types.d.ts

@@ -0,0 +1,17 @@
+import { $Transition, Options } from '../../types';
+/**
+ * Core animation update function that handles all animation state changes and execution
+ * @param controlActiveState - Animation states that need to be updated
+ * @param controlDelay - Animation delay time
+ * @param directAnimate - Direct animation target value
+ * @param directTransition - Direct animation transition config
+ */
+export interface AnimateUpdatesOptions {
+    controlActiveState?: Partial<Record<string, boolean>>;
+    controlDelay?: number;
+    directAnimate?: Options['animate'];
+    directTransition?: $Transition;
+    isFallback?: boolean;
+    isExit?: boolean;
+}
+export type AnimateUpdates = (options?: AnimateUpdatesOptions) => Promise<any> | (() => Promise<any>);

package/dist/es/features/dom-animation.d.ts

@@ -0,0 +1,2 @@
+import { Feature } from './feature';
+export declare const domAnimation: Feature[];

package/dist/es/features/dom-animation.mjs

@@ -0,0 +1,19 @@
+import { AnimationFeature } from "./animation/animation.mjs";
+import { PressGesture } from "./gestures/press/index.mjs";
+import { HoverGesture } from "./gestures/hover/index.mjs";
+import { InViewGesture } from "./gestures/in-view/index.mjs";
+import { FocusGesture } from "./gestures/focus/index.mjs";
+const domAnimation = [
+  AnimationFeature,
+  PressGesture,
+  HoverGesture,
+  InViewGesture,
+  FocusGesture
+  // ProjectionFeature,
+  // DragGesture,
+  // LayoutFeature,
+  // PanGesture,
+];
+export {
+  domAnimation
+};

package/dist/es/features/dom-max.d.ts

@@ -0,0 +1,2 @@
+import { Feature } from './feature';
+export declare const domMax: Feature[];

package/dist/es/features/dom-max.mjs

@@ -0,0 +1,23 @@
+import { AnimationFeature } from "./animation/animation.mjs";
+import { PressGesture } from "./gestures/press/index.mjs";
+import { HoverGesture } from "./gestures/hover/index.mjs";
+import { InViewGesture } from "./gestures/in-view/index.mjs";
+import { FocusGesture } from "./gestures/focus/index.mjs";
+import { ProjectionFeature } from "./layout/projection.mjs";
+import { DragGesture } from "./gestures/drag/index.mjs";
+import { LayoutFeature } from "./layout/layout.mjs";
+import { PanGesture } from "./gestures/pan/index.mjs";
+const domMax = [
+  AnimationFeature,
+  PressGesture,
+  HoverGesture,
+  InViewGesture,
+  FocusGesture,
+  ProjectionFeature,
+  PanGesture,
+  DragGesture,
+  LayoutFeature
+];
+export {
+  domMax
+};

package/dist/es/features/feature-manager.mjs

@@ -1,26 +1,26 @@
-import { LayoutFeature } from "./layout/layout.mjs";
-import { PanGesture } from "./gestures/pan/index.mjs";
-import { AnimationFeature } from "./animation/animation.mjs";
-import { ProjectionFeature } from "./layout/projection.mjs";
-import { FocusGesture } from "./gestures/focus/index.mjs";
-import { HoverGesture } from "./gestures/hover/index.mjs";
-import { PressGesture } from "./gestures/press/index.mjs";
-import { InViewGesture } from "./gestures/in-view/index.mjs";
-import { DragGesture } from "./gestures/drag/index.mjs";
+import { watch } from "vue";
 class FeatureManager {
   constructor(state) {
     this.features = [];
-    this.features = [
-      new HoverGesture(state),
-      new PressGesture(state),
-      new InViewGesture(state),
-      new LayoutFeature(state),
-      new ProjectionFeature(state),
-      new PanGesture(state),
-      new DragGesture(state),
-      new FocusGesture(state),
-      new AnimationFeature(state)
-    ];
+    const { features = [], lazyMotionContext } = state.options;
+    const allFeatures = features.concat(lazyMotionContext.features.value);
+    this.features = allFeatures.map((Feature) => new Feature(state));
+    const featureInstances = this.features;
+    watch(lazyMotionContext.features, (features2) => {
+      features2.forEach((feature) => {
+        if (!allFeatures.includes(feature)) {
+          allFeatures.push(feature);
+          const featureInstance = new feature(state);
+          featureInstances.push(featureInstance);
+          if (state.isMounted()) {
+            featureInstance.beforeMount();
+            featureInstance.mount();
+          }
+        }
+      });
+    }, {
+      flush: "pre"
+    });
   }
   mount() {
     this.features.forEach((feature) => feature.mount());

package/dist/es/features/gestures/drag/VisualElementDragControls.d.ts

@@ -1,6 +1,6 @@
-import { MotionProps } from '../../../components/motion/Motion';
 import { Options } from '../../../types';
 import { Point, VisualElement } from 'framer-motion';
+import { MotionProps } from '../../../components';
 export declare const elementDragControls: WeakMap<VisualElement<unknown, unknown, {}>, VisualElementDragControls>;
 export interface DragControlOptions {
     snapToCursor?: boolean;

package/dist/es/features/gestures/hover/index.d.ts

@@ -4,4 +4,6 @@ export declare class HoverGesture extends Feature {
     isActive(): boolean;
     constructor(state: MotionState);
     mount(): void;
+    update(): void;
+    register(): void;
 }

package/dist/es/features/gestures/hover/index.mjs

@@ -14,15 +14,26 @@ function handleHoverEvent(state, event, lifecycle) {
 }
 class HoverGesture extends Feature {
   isActive() {
-    return Boolean(this.state.getOptions().whileHover);
+    const { whileHover, onHoverStart, onHoverEnd } = this.state.options;
+    return Boolean(whileHover || onHoverStart || onHoverEnd);
   }
   constructor(state) {
     super(state);
   }
   mount() {
+    this.register();
+  }
+  update() {
+    const { whileHover, onHoverStart, onHoverEnd } = this.state.visualElement.prevProps;
+    if (!(whileHover || onHoverStart || onHoverEnd)) {
+      this.register();
+    }
+  }
+  register() {
     const element = this.state.element;
-    if (!element)
+    if (!element || !this.isActive())
       return;
+    this.unmount();
     this.unmount = hover(
       element,
       (el, startEvent) => {

package/dist/es/features/gestures/in-view/index.mjs

@@ -14,17 +14,17 @@ function handleHoverEvent(state, entry, lifecycle) {
 }
 class InViewGesture extends Feature {
   isActive() {
-    return Boolean(this.state.getOptions().whileInView);
+    return Boolean(this.state.options.whileInView);
   }
   constructor(state) {
     super(state);
   }
   startObserver() {
     const element = this.state.element;
-    if (!element)
+    if (!element || !this.isActive())
       return;
     this.unmount();
-    const { once, ...viewOptions } = this.state.getOptions().inViewOptions || {};
+    const { once, ...viewOptions } = this.state.options.inViewOptions || {};
     this.unmount = inView(
       element,
       (_, entry) => {

package/dist/es/features/gestures/index.d.ts

@@ -1,4 +1,3 @@
-export * from './base';
 export * from './hover';
 export * from './press';
 export * from './in-view';

package/dist/es/features/gestures/press/index.mjs

@@ -31,30 +31,28 @@ class PressGesture extends Feature {
     this.register();
   }
   update() {
-    const preProps = this.state.visualElement.prevProps;
-    if (preProps.whilePress !== this.state.options.whilePress) {
+    const { whilePress, onPress, onPressCancel, onPressStart } = this.state.options;
+    if (!(whilePress || onPress || onPressCancel || onPressStart)) {
       this.register();
     }
   }
   register() {
+    const element = this.state.element;
+    if (!element || !this.isActive())
+      return;
     this.unmount();
-    if (this.isActive()) {
-      const element = this.state.element;
-      if (!element)
-        return;
-      this.unmount = press(
-        element,
-        (el, startEvent) => {
-          handlePressEvent(this.state, startEvent, "Start");
-          return (endEvent, { success }) => handlePressEvent(
-            this.state,
-            endEvent,
-            success ? "End" : "Cancel"
-          );
-        },
-        { useGlobalTarget: this.state.options.globalPressTarget }
-      );
-    }
+    this.unmount = press(
+      element,
+      (el, startEvent) => {
+        handlePressEvent(this.state, startEvent, "Start");
+        return (endEvent, { success }) => handlePressEvent(
+          this.state,
+          endEvent,
+          success ? "End" : "Cancel"
+        );
+      },
+      { useGlobalTarget: this.state.options.globalPressTarget }
+    );
   }
 }
 export {

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

@@ -4,3 +4,5 @@ export * from './layout/layout';
 export * from './gestures/pan';
 export * from './feature-manager';
 export * from './animation/animation';
+export * from './dom-max';
+export * from './dom-animation';

package/dist/es/index.d.ts

@@ -12,3 +12,4 @@ export * from './animation';
 export * from './utils';
 export { useDragControls } from './features/gestures/drag/use-drag-controls';
 export type { PanInfo } from './features/gestures/pan/PanSession';
+export { domAnimation, domMax } from './features';

package/dist/es/index.mjs

@@ -3,10 +3,11 @@ import { default as default2 } from "./components/LayoutGroup.vue.mjs";
 import { useLayoutGroup } from "./components/use-layout-group.mjs";
 import { injectLayoutGroup, injectMotion, provideLayoutGroup, provideMotion } from "./components/context.mjs";
 import { useDragControls } from "./features/gestures/drag/use-drag-controls.mjs";
-import { default as default3 } from "./components/motion/Motion.vue.mjs";
-import { default as default4 } from "./components/RowValue.vue.mjs";
-import { default as default5 } from "./components/animate-presence/AnimatePresence.vue.mjs";
-import { default as default6 } from "./components/motion-config/MotionConfig.vue.mjs";
+import { domMax } from "./features/dom-max.mjs";
+import { domAnimation } from "./features/dom-animation.mjs";
+import { default as default3 } from "./components/RowValue.vue.mjs";
+import { default as default4 } from "./components/animate-presence/AnimatePresence.vue.mjs";
+import { default as default5 } from "./components/motion-config/MotionConfig.vue.mjs";
 import { MotionValue, cancelFrame, frame, frameData, hover, isDragActive, motionValue, press, time, motionValue as motionValue2 } from "motion-dom";
 import { invariant } from "./external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
 import { noop } from "./external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/noop.mjs";
@@ -36,10 +37,12 @@ import { mix } from "./external/.pnpm/framer-motion@12.5.0/external/framer-motio
 import { pipe } from "./external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/utils/pipe.mjs";
 import { transform } from "./external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/utils/transform.mjs";
 import { wrap } from "./external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/utils/wrap.mjs";
-import { motion } from "./components/motion/NameSpace.mjs";
+import { Motion, motion } from "./components/motion/index.mjs";
 import { mountedStates } from "./state/motion-state.mjs";
 import { provideMotionConfig, useMotionConfig } from "./components/motion-config/context.mjs";
 import { Reorder, ReorderGroup, ReorderItem } from "./components/reorder/index.mjs";
+import { LazyMotion } from "./components/lazy-motion/index.mjs";
+import { M, m } from "./components/motion/m.mjs";
 import { useComputed } from "./value/use-computed.mjs";
 import { useCombineMotionValues } from "./value/use-combine-values.mjs";
 import { useTransform } from "./value/use-transform.mjs";
@@ -60,15 +63,17 @@ import { millisecondsToSeconds, secondsToMilliseconds } from "./utils/time-conve
 import { getContextWindow } from "./utils/get-context-window.mjs";
 import { useDomRef } from "./utils/use-dom-ref.mjs";
 export {
-  default5 as AnimatePresence,
+  default4 as AnimatePresence,
   default2 as LayoutGroup,
-  default3 as Motion,
-  default6 as MotionConfig,
+  LazyMotion,
+  M,
+  Motion,
+  default5 as MotionConfig,
   MotionValue,
   Reorder,
   ReorderGroup,
   ReorderItem,
-  default4 as RowValue,
+  default3 as RowValue,
   addScaleCorrector,
   animate,
   animateMini,
@@ -87,6 +92,8 @@ export {
   delayInSeconds as delay,
   distance,
   distance2D,
+  domAnimation,
+  domMax,
   easeIn,
   easeInOut,
   easeOut,
@@ -103,6 +110,7 @@ export {
   isDragActive,
   isMotionValue,
   keyframes,
+  m,
   millisecondsToSeconds,
   mirrorEasing,
   mix,

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

@@ -1,8 +1,10 @@
 import { MotionStateContext, Options } from '../types';
 import { DOMKeyframesDefinition, VisualElement } from 'framer-motion';
 import { frame } from 'framer-motion/dom';
+import { Feature, StateType } from '../features';
 import { PresenceContext } from '../components/presence';
-import { StateType, animateUpdates } from './animate-updates';
+import { AnimateUpdates } from '../features/animation/types';
+import { LazyMotionContext } from '../components/lazy-motion/context';
 export declare const mountedStates: WeakMap<Element, MotionState>;
 /**
  * Core class that manages animation state and orchestrates animations.
@@ -10,10 +12,13 @@ export declare const mountedStates: WeakMap<Element, MotionState>;
  */
 export declare class MotionState {
     readonly id: string;
+    type: 'html' | 'svg';
     element: HTMLElement | null;
-    private parent?;
+    parent?: MotionState;
     options: Options & {
         animatePresenceContext?: PresenceContext;
+        features?: Feature[];
+        lazyMotionContext?: LazyMotionContext;
     };
     isSafeToRemove: boolean;
     isVShow: boolean;
@@ -46,10 +51,7 @@ export declare class MotionState {
     beforeUpdate(): void;
     update(options: Options): void;
     setActive(name: StateType, isActive: boolean, isAnimate?: boolean): void;
-    animateUpdates: typeof animateUpdates;
+    animateUpdates: AnimateUpdates;
     isMounted(): boolean;
-    getOptions(): Options<any> & {
-        animatePresenceContext?: PresenceContext;
-    };
     willUpdate(label: string): void;
 }

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

@@ -1,11 +1,10 @@
 import { invariant } from "hey-listen";
-import { visualElementStore } from "../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/render/store.mjs";
-import { resolveVariant, isAnimateChanged } from "./utils.mjs";
+import { isSVGElement, resolveVariant, isAnimateChanged } from "./utils.mjs";
 import { FeatureManager } from "../features/feature-manager.mjs";
-import { createVisualElement } from "./create-visual-element.mjs";
 import { doneCallbacks } from "../components/presence.mjs";
-import { animateUpdates } from "./animate-updates.mjs";
 import { isVariantLabels } from "./utils/is-variant-labels.mjs";
+import { noop } from "../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/noop.mjs";
+import "../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
 import { frame, cancelFrame } from "motion-dom";
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
@@ -23,7 +22,7 @@ class MotionState {
     };
     this.currentProcess = null;
     this._context = null;
-    this.animateUpdates = animateUpdates;
+    this.animateUpdates = noop;
     this.id = `motion-state-${id++}`;
     this.options = options;
     this.parent = parent;
@@ -31,30 +30,8 @@ class MotionState {
     this.depth = (parent == null ? void 0 : parent.depth) + 1 || 0;
     const initialVariantSource = this.context.initial === false ? ["initial", "animate"] : ["initial"];
     this.initTarget(initialVariantSource);
-    this.visualElement = createVisualElement(this.options.as, {
-      presenceContext: null,
-      parent: parent == null ? void 0 : parent.visualElement,
-      props: {
-        ...this.options,
-        whileHover: this.options.whileHover,
-        whileTap: this.options.whilePress,
-        whileInView: this.options.whileInView
-      },
-      visualState: {
-        renderState: {
-          transform: {},
-          transformOrigin: {},
-          style: {},
-          vars: {},
-          attrs: {}
-        },
-        latestValues: {
-          ...this.baseTarget
-        }
-      },
-      reducedMotionConfig: options.motionConfig.reduceMotion
-    });
     this.featureManager = new FeatureManager(this);
+    this.type = isSVGElement(this.options.as) ? "svg" : "html";
   }
   // Get animation context, falling back to parent context for inheritance
   get context() {
@@ -81,11 +58,10 @@ class MotionState {
   }
   // Update visual element with new options
   updateOptions() {
-    this.visualElement.update({
+    var _a;
+    (_a = this.visualElement) == null ? void 0 : _a.update({
       ...this.options,
-      whileHover: this.options.hover,
-      whileTap: this.options.press,
-      whileInView: this.options.inView,
+      whileTap: this.options.whilePress,
       reducedMotionConfig: this.options.motionConfig.reduceMotion
     }, {
       isPresent: !doneCallbacks.has(this.element)
@@ -97,25 +73,20 @@ class MotionState {
   }
   // Mount motion state to DOM element, handles parent-child relationships
   mount(element, options, notAnimate = false) {
+    var _a;
     invariant(
       Boolean(element),
       "Animation state must be mounted with valid Element"
     );
     this.element = element;
     this.options = options;
-    mountedStates.set(element, this);
-    if (!visualElementStore.get(element)) {
-      this.visualElement.mount(element);
-      visualElementStore.set(element, this.visualElement);
-    }
-    this.visualElement.state = this;
     this.updateOptions();
     this.featureManager.mount();
     if (!notAnimate && this.options.animate) {
-      if (this.visualElement.type === "svg") {
+      if (this.type === "svg") {
         this.visualElement.updateDimensions();
       }
-      this.startAnimation();
+      (_a = this.startAnimation) == null ? void 0 : _a.call(this);
     }
     if (this.options.layoutId) {
       mountedLayoutIds.add(this.options.layoutId);
@@ -125,10 +96,10 @@ class MotionState {
     }
   }
   clearAnimation() {
-    var _a;
+    var _a, _b;
     this.currentProcess && cancelFrame(this.currentProcess);
     this.currentProcess = null;
-    (_a = this.visualElement.variantChildren) == null ? void 0 : _a.forEach((child) => {
+    (_b = (_a = this.visualElement) == null ? void 0 : _a.variantChildren) == null ? void 0 : _b.forEach((child) => {
       child.state.clearAnimation();
     });
   }
@@ -203,9 +174,6 @@ class MotionState {
   isMounted() {
     return Boolean(this.element);
   }
-  getOptions() {
-    return this.options;
-  }
   // Called before layout updates to prepare for changes
   willUpdate(label) {
     var _a;

package/dist/es/state/style.mjs

@@ -1,5 +1,5 @@
-import { isNumber, isCssVar } from "./utils.mjs";
-import { isTransform, transformAlias, transformDefinitions, buildTransformTemplate } from "./transform.mjs";
+import { isCssVar, isNumber } from "./utils.mjs";
+import { transformDefinitions, isTransform, transformAlias, buildTransformTemplate } from "./transform.mjs";
 import { px } from "../value/types/numbers/units.mjs";
 import { isMotionValue } from "../utils/motion-value.mjs";
 const style = {

package/dist/es/state/transform.d.ts

@@ -13,7 +13,6 @@ export declare const transformAlias: {
 };
 export declare function compareTransformOrder([a]: [string, any], [b]: [string, any]): number;
 export declare function buildTransformTemplate(transforms: [string, any][]): string;
-export declare function getFirstAnimateTransform(initialFrame: any, animateFrame: any): any;
 export declare const transformResetValue: {
     translate: number[];
     rotate: number;

package/dist/es/state/transform.mjs

@@ -1,4 +1,3 @@
-import "@vueuse/core";
 import { noopReturn } from "./utils.mjs";
 const rotation = {
   syntax: "<angle>",

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

@@ -58,6 +58,7 @@ export interface Options<T = any> extends LayoutOptions, PressProps, HoverProps,
     motionConfig?: MotionConfigState;
     onAnimationComplete?: (definition: Options['animate']) => void;
     onUpdate?: (latest: ResolvedValues) => void;
+    onAnimationStart?: (definition: Options['animate']) => void;
 }
 export interface MotionStateContext {
     initial?: VariantLabels | boolean;

package/dist/nuxt/index.cjs

@@ -8,7 +8,9 @@ const components = [
   "LayoutGroup",
   "MotionConfig",
   "ReorderGroup",
-  "ReorderItem"
+  "ReorderItem",
+  "LazyMotion",
+  "M"
 ];
 const utilities = [
   "useTransform",

package/dist/nuxt/index.mjs

@@ -6,7 +6,9 @@ const components = [
   "LayoutGroup",
   "MotionConfig",
   "ReorderGroup",
-  "ReorderItem"
+  "ReorderItem",
+  "LazyMotion",
+  "M"
 ];
 const utilities = [
   "useTransform",

package/dist/resolver/index.cjs

@@ -6,7 +6,9 @@ const components = /* @__PURE__ */ new Set([
   "LayoutGroup",
   "MotionConfig",
   "ReorderGroup",
-  "ReorderItem"
+  "ReorderItem",
+  "LazyMotion",
+  "M"
 ]);
 function index() {
   return {

package/dist/resolver/index.mjs

@@ -4,7 +4,9 @@ const components = /* @__PURE__ */ new Set([
   "LayoutGroup",
   "MotionConfig",
   "ReorderGroup",
-  "ReorderItem"
+  "ReorderItem",
+  "LazyMotion",
+  "M"
 ]);
 function index() {
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.13.1",
+  "version": "1.0.0-alpha.1",
   "description": "",
   "author": "",
   "license": "MIT",