motion-v 0.4.0 → 0.5.0-beta.1

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

@@ -1,5 +1,5 @@
-import { invariant } from "../node_modules/.pnpm/hey-listen@1.0.8/node_modules/hey-listen/dist/hey-listen.es.mjs";
-import { visualElementStore } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/store.mjs";
+import { invariant } from "../external/.pnpm/hey-listen@1.0.8/external/hey-listen/dist/hey-listen.es.mjs";
+import { visualElementStore } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/store.mjs";
 import { resolveVariant, getOptions, hasChanged, noop } from "./utils.mjs";
 import { FeatureManager } from "../features/feature-manager.mjs";
 import { style } from "./style.mjs";
@@ -7,10 +7,12 @@ import { transformResetValue } from "./transform.mjs";
 import { scheduleAnimation, unscheduleAnimation } from "./schedule.mjs";
 import { motionEvent } from "./event.mjs";
 import { createVisualElement } from "./create-visual-element.mjs";
-import { animate } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/animate/index.mjs";
-import { isDef } from "../node_modules/.pnpm/@vueuse_shared@12.0.0_typescript@5.5.4/node_modules/@vueuse/shared/index.mjs";
+import { animateVariantsChildren } from "./animate-variants-children.mjs";
+import { animate } from "../external/.pnpm/framer-motion@11.11.11/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", "exit", "drag"];
 const mountedStates = /* @__PURE__ */ new WeakMap();
+let id = 0;
 class MotionState {
   constructor(options, parent) {
     this.element = null;
@@ -19,6 +21,7 @@ class MotionState {
       animate: true
     };
     this._context = null;
+    this.id = `motion-state-${id++}`;
     this.options = options;
     this.parent = parent;
     this.depth = (parent == null ? void 0 : parent.depth) + 1 || 0;
@@ -26,7 +29,10 @@ class MotionState {
       presenceContext: null,
       parent: parent == null ? void 0 : parent.visualElement,
       props: {
-        ...this.options
+        ...this.options,
+        whileHover: this.options.hover,
+        whileTap: this.options.press,
+        whileInView: this.options.inView
       },
       visualState: {
         renderState: {
@@ -62,19 +68,29 @@ class MotionState {
   get initial() {
     return isDef(this.options.initial) ? this.options.initial : this.context.initial;
   }
-  mount(element) {
+  updateOptions() {
     var _a;
+    this.visualElement.update({
+      ...this.options,
+      whileHover: this.options.hover,
+      whileTap: this.options.press,
+      whileInView: this.options.inView
+    }, (_a = this.parent) == null ? void 0 : _a.context);
+  }
+  mount(element, options) {
     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.update(this.options, (_a = this.parent) == null ? void 0 : _a.context);
+    this.visualElement.state = this;
+    this.updateOptions();
     if (typeof this.initial === "object") {
       for (const key in this.initial) {
         this.visualElement.setStaticValue(key, this.initial[key]);
@@ -85,6 +101,7 @@ class MotionState {
       }
     }
     this.featureManager.mount();
+    scheduleAnimation(this);
   }
   unmount() {
     var _a;
@@ -94,14 +111,13 @@ class MotionState {
     this.featureManager.unmount();
   }
   update(options) {
-    var _a;
     this.options = options;
-    this.visualElement.update(this.options, (_a = this.parent) == null ? void 0 : _a.context);
+    this.updateOptions();
     this.featureManager.update();
     scheduleAnimation(this);
   }
   setActive(name, isActive) {
-    if (!this.element)
+    if (!this.element || this.activeStates[name] === isActive)
       return;
     this.activeStates[name] = isActive;
     scheduleAnimation(this);
@@ -109,15 +125,25 @@ class MotionState {
   *animateUpdates() {
     const prevTarget = this.target;
     this.target = {};
+    const activeState = {};
     const animationOptions = {};
+    let transition;
     for (const name of STATE_TYPES) {
       if (!this.activeStates[name])
         continue;
+      const definition = isDef(this.options[name]) ? this.options[name] : this.context[name];
       const variant = resolveVariant(
-        isDef(this.options[name]) ? this.options[name] : this.context[name],
+        definition,
         this.options.variants,
         this.options.custom
       );
+      transition = Object.assign({}, this.options.transition, variant == null ? void 0 : variant.transition);
+      if (typeof definition === "string") {
+        activeState[name] = {
+          definition,
+          transition
+        };
+      }
       if (!variant)
         continue;
       const allTarget = { ...prevTarget, ...variant };
@@ -126,7 +152,7 @@ class MotionState {
           continue;
         this.target[key] = variant[key];
         animationOptions[key] = getOptions(
-          variant.transition ?? this.options.transition ?? {},
+          transition,
           key
         );
       }
@@ -143,12 +169,13 @@ class MotionState {
       }
       if (hasChanged(prevTarget[key], this.target[key])) {
         (_a = this.baseTarget)[key] ?? (_a[key] = style.get(this.element, key));
+        const keyValue = this.target[key] === "none" ? transformResetValue[key] : this.target[key];
         animationFactories.push(
           () => {
             return animate(
               this.element,
               {
-                [key]: this.target[key] === "none" ? transformResetValue[key] : this.target[key]
+                [key]: keyValue
               },
               animationOptions[key] || {}
             );
@@ -156,14 +183,40 @@ class MotionState {
         );
       }
     });
+    let getChildAnimations = () => Promise.resolve();
+    let childAnimations = [];
+    if (Object.keys(activeState).length) {
+      const { getAnimations, animations: animations2 } = animateVariantsChildren(this, activeState);
+      getChildAnimations = getAnimations;
+      childAnimations = animations2;
+    }
     yield;
-    const animations = animationFactories.map((factory) => factory()).filter(Boolean);
-    if (!animations.length)
+    let animations;
+    const getAnimation = () => {
+      animations = animationFactories.map((factory) => factory()).filter(Boolean);
+      return Promise.all(animations);
+    };
+    const { when } = transition;
+    let animationPromise;
+    if (when) {
+      const [first, last] = when === "beforeChildren" ? [getAnimation, getChildAnimations] : [getChildAnimations, getAnimation];
+      animationPromise = first().then(() => last());
+    } else {
+      animationPromise = Promise.all([getAnimation(), getChildAnimations()]);
+    }
+    const isExit = this.activeStates.exit;
+    if (!(animations == null ? void 0 : animations.length) && !childAnimations.length) {
+      if (isExit) {
+        this.element.dispatchEvent(motionEvent("motionstart", this.target));
+        this.element.dispatchEvent(motionEvent("motioncomplete", {
+          ...this.target
+        }, isExit));
+      }
       return;
+    }
     const animationTarget = this.target;
     this.element.dispatchEvent(motionEvent("motionstart", animationTarget));
-    const isExit = this.activeStates.exit;
-    Promise.all(animations).then(() => {
+    animationPromise.then(() => {
       this.element.dispatchEvent(motionEvent("motioncomplete", {
         ...animationTarget
       }, isExit));
@@ -172,15 +225,9 @@ class MotionState {
   isMounted() {
     return Boolean(this.element);
   }
-  getDepth() {
-    return this.depth;
-  }
   getOptions() {
     return this.options;
   }
-  getTarget() {
-    return this.target;
-  }
 }
 export {
   MotionState,

package/dist/es/state/schedule.mjs

@@ -22,7 +22,7 @@ function unscheduleAnimation(state) {
   scheduled && removeItem(scheduled, state);
 }
 function compareByDepth(a, b) {
-  return a.getDepth() - b.getDepth();
+  return a.depth - b.depth;
 }
 export {
   scheduleAnimation,

package/dist/es/utils/use-animation-frame.mjs

@@ -1,5 +1,5 @@
 import { onBeforeUpdate, onUnmounted } from "vue";
-import { frame, cancelFrame } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/frameloop/frame.mjs";
+import { frame, cancelFrame } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
 function useAnimationFrame(callback) {
   let initialTimestamp = 0;
   const provideTimeSinceStart = ({ timestamp, delta }) => {

package/dist/es/utils/use-in-view.mjs

@@ -1,5 +1,5 @@
 import { ref, watch, isRef, unref } from "vue";
-import { inView } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/dom/viewport/index.mjs";
+import { inView } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
 function useInView(domRef, options) {
   const isInView = ref(false);
   watch([domRef, () => isRef(options) ? options.value : options], (_v1, _v2) => {

package/dist/es/value/use-combine-values.mjs

@@ -1,6 +1,6 @@
 import { onUnmounted } from "vue";
-import { motionValue } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/value/index.mjs";
-import { cancelFrame, frame } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/frameloop/frame.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+import { cancelFrame, frame } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
 function useCombineMotionValues(combineValues) {
   const value = motionValue(combineValues());
   const updateValue = () => value.set(combineValues());

package/dist/es/value/use-computed.mjs

@@ -1,5 +1,5 @@
 import { useCombineMotionValues } from "./use-combine-values.mjs";
-import { collectMotionValues } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/value/index.mjs";
+import { collectMotionValues } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
 import { onBeforeUpdate } from "vue";
 function useComputed(computed) {
   collectMotionValues.current = [];

package/dist/es/value/use-scroll.mjs

@@ -1,7 +1,7 @@
 import { onMounted, onUnmounted, watch } from "vue";
-import { warning } from "../node_modules/.pnpm/hey-listen@1.0.8/node_modules/hey-listen/dist/hey-listen.es.mjs";
-import { motionValue } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/value/index.mjs";
-import { scroll } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/dom/scroll/index.mjs";
+import { warning } from "../external/.pnpm/hey-listen@1.0.8/external/hey-listen/dist/hey-listen.es.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+import { scroll } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
 function refWarning(name, ref) {
   warning(
     Boolean(!ref || ref.value),

package/dist/es/value/use-spring.mjs

@@ -1,7 +1,7 @@
 import { watch, onBeforeUnmount } from "vue";
-import { animateValue } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs";
-import { motionValue } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/value/index.mjs";
-import { frame, frameData } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/frameloop/frame.mjs";
+import { animateValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+import { frame, frameData } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
 import { isMotionValue } from "../utils/motion-value.mjs";
 function toNumber(v) {
   if (typeof v === "number")

package/dist/es/value/use-time.mjs

@@ -1,5 +1,5 @@
 import { useAnimationFrame } from "../utils/use-animation-frame.mjs";
-import { motionValue } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/value/index.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
 function useTime() {
   const time = motionValue(0);
   useAnimationFrame((t) => time.set(t));

package/dist/es/value/use-transform.mjs

@@ -1,6 +1,6 @@
 import { useComputed } from "./use-computed.mjs";
 import { useCombineMotionValues } from "./use-combine-values.mjs";
-import { transform } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/utils/transform.mjs";
+import { transform } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/transform.mjs";
 function useTransform(input, inputRangeOrTransformer, outputRange, options) {
   if (typeof input === "function") {
     return useComputed(input);

package/dist/es/value/use-velocity.mjs

@@ -1,6 +1,6 @@
 import { useMotionValueEvent } from "./use-motion-value-event.mjs";
-import { motionValue } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/value/index.mjs";
-import { frame } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/frameloop/frame.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+import { frame } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
 function useVelocity(value) {
   const velocity = motionValue(value.getVelocity());
   const updateVelocity = () => {

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

@@ -1,9 +1,4 @@
-export interface AnimatePresenceProps {
-    mode?: 'wait' | 'sync';
-    initial?: boolean;
-    multiple?: boolean;
-    as?: string;
-}
+import { AnimatePresenceProps } from './type';
 declare function __VLS_template(): {
     slots: {
         default?(_: {}): any;
@@ -21,7 +16,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     initial: boolean;
     multiple: boolean;
 }>>>, {
-    mode: "wait" | "sync";
+    mode: "wait" | "popLayout" | "sync";
     initial: boolean;
     multiple: boolean;
 }, {}>;

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

@@ -1,8 +1,4 @@
-import { InheritOption } from './context';
-export interface LayoutGroupProps {
-    id?: string;
-    inherit?: InheritOption;
-}
+import { LayoutGroupProps } from './use-layout-group';
 declare function __VLS_template(): {
     slots: {
         default?(_: {}): any;

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

@@ -12,9 +12,7 @@ declare const _default: <T extends ElementType = "div", K = unknown>(__VLS_props
         default?(_: {}): any;
     };
     emit: {};
-}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
-    [key: string]: any;
-}> & {
+}>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;

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

@@ -1,5 +1,6 @@
 import { Ref } from 'vue';
-export declare const doneCallbacks: Map<Element, VoidFunction>;
+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 function removeDoneCallback(element: Element): void;
 export interface PresenceContext {
     initial: Ref<boolean>;

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

@@ -1,25 +1,6 @@
-interface SVGRenderState {
-    style: Record<string, any>;
-    transform: Record<string, any>;
-    transformOrigin: {
-        originX?: string | number;
-        originY?: string | number;
-        originZ?: string | number;
-    };
-    attrs: Record<string, any>;
-    dimensions?: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-}
-interface SVGProps {
-    attrX?: number;
-    attrY?: number;
-    attrScale?: number;
-    pathLength?: number;
-    pathSpacing?: number;
-    pathOffset?: number;
-    [key: string]: any;
+export interface AnimatePresenceProps {
+    mode?: 'wait' | 'popLayout' | 'sync';
+    initial?: boolean;
+    multiple?: boolean;
+    as?: string;
 }

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

@@ -0,0 +1,20 @@
+import { LayoutGroupState } from './context';
+/**
+ * Props for configuring layout group behavior
+ */
+export interface LayoutGroupProps {
+    /** Optional ID for the layout group */
+    id?: string;
+    /**
+     * Controls inheritance of parent group properties:
+     * - true: Inherit both id and group
+     * - 'id': Only inherit id
+     * - 'group': Only inherit group
+     */
+    inherit?: boolean | 'id' | 'group';
+}
+/**
+ * Hook to create and manage a layout group
+ * Handles group inheritance, force updates, and context management
+ */
+export declare function useLayoutGroup(props: LayoutGroupProps): LayoutGroupState;

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

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

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

@@ -0,0 +1 @@
+export declare function getMotionElement(el: HTMLElement): HTMLElement;

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

@@ -1,5 +1,5 @@
 export interface LayoutOptions {
-    'layout'?: boolean;
+    'layout'?: boolean | 'position' | 'size' | 'preserve-aspect';
     'layoutId'?: string;
     'layoutScroll'?: boolean;
     'layoutRoot'?: boolean;

package/dist/src/index.d.ts

@@ -1,11 +1,13 @@
 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, type AnimatePresenceProps } from './components/AnimatePresence';
-export { default as LayoutGroup, type LayoutGroupProps } from './components/LayoutGroup';
+export { default as AnimatePresence } from './components/AnimatePresence';
+export type { AnimatePresenceProps } from './components/type';
+export { default as LayoutGroup } from './components/LayoutGroup';
+export type { LayoutGroupProps } from './components/use-layout-group';
 export * from './components/context';
 export * from './value';
 export * from './constants';
-export type { Variant, Options } from './types';
+export * from './types';
 export * from './animation';
 export * from './utils';

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

@@ -0,0 +1,15 @@
+import { MotionState } from './motion-state';
+import { AnimateOptions, AnimationFactory } from '../types';
+export type ActiveVariant = {
+    [key: string]: {
+        definition: string;
+        transition: AnimateOptions;
+    };
+};
+export declare function animateVariantsChildren(state: MotionState, activeState: ActiveVariant): {
+    animations: any[];
+    getAnimations: () => Promise<void>;
+} | {
+    animations: AnimationFactory[];
+    getAnimations: () => Promise<unknown[]>;
+};

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

@@ -4,13 +4,14 @@ declare const STATE_TYPES: readonly ["initial", "animate", "inView", "hover", "p
 type StateType = typeof STATE_TYPES[number];
 export declare const mountedStates: WeakMap<Element, MotionState>;
 export declare class MotionState {
+    readonly id: string;
     element: HTMLElement | null;
     private parent?;
     private options;
-    private activeStates;
-    private depth;
-    private baseTarget;
-    private target;
+    activeStates: Partial<Record<StateType, boolean>>;
+    depth: number;
+    baseTarget: DOMKeyframesDefinition;
+    target: DOMKeyframesDefinition;
     private featureManager;
     visualElement: VisualElement;
     constructor(options: Options, parent?: MotionState);
@@ -18,14 +19,13 @@ export declare class MotionState {
     get context(): MotionStateContext;
     private initTarget;
     get initial(): string | boolean | import('../types').Variant;
-    mount(element: HTMLElement): void;
+    updateOptions(): void;
+    mount(element: HTMLElement, options: Options): void;
     unmount(): void;
     update(options: Options): void;
     setActive(name: StateType, isActive: boolean): void;
     animateUpdates(): Generator<any, void, unknown>;
     isMounted(): boolean;
-    getDepth(): number;
     getOptions(): Options<any>;
-    getTarget(): DOMKeyframesDefinition;
 }
 export {};

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

@@ -4,8 +4,17 @@ import { IntrinsicElementAttributes } from 'vue';
 import { TransformProperties } from './transform';
 import { LayoutOptions } from '../features/layout/types';
 type AnimationPlaybackControls = ReturnType<typeof animate>;
+export interface Orchestration {
+    delay?: number;
+    when?: false | 'beforeChildren' | 'afterChildren' | string;
+    delayChildren?: number;
+    staggerChildren?: number;
+    staggerDirection?: number;
+}
+export interface AnimateOptions extends Omit<Orchestration, 'delay'>, DynamicAnimationOptions {
+}
 export interface Variant extends DOMKeyframesDefinition {
-    transition?: DynamicAnimationOptions;
+    transition?: AnimateOptions;
 }
 export type VariantLabels = string | Variant;
 type MarginValue = `${number}${'px' | '%'}`;
@@ -46,7 +55,7 @@ export interface Options<T = any> extends LayoutOptions {
     };
     style?: MotionStyle;
     transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;
-    transition?: DynamicAnimationOptions;
+    transition?: AnimateOptions;
     onMotionStart?: (target: DOMKeyframesDefinition) => void;
     onMotionComplete?: (target: DOMKeyframesDefinition) => void;
     onHoverStart?: (e: PointerEvent) => void;

package/package.json

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