From 3156a1a21c59654c316db0165538076eaafb15a9 Mon Sep 17 00:00:00 2001
From: Persephone Flores <34418758+hp0844182@users.noreply.github.com>
Date: Sun, 17 Nov 2024 23:13:27 +0800
Subject: [PATCH 1/4] feat(motion): drag init

---
 package.json                                  |   2 +-
 packages/motion/src/components/Motion.vue     |   4 +-
 packages/motion/src/state/features/feature.ts |   3 +-
 .../src/state/features/gestures/drag.ts       | 115 ++++++++++++++++++
 .../src/state/features/gestures/index.ts      |   1 +
 .../src/state/features/gestures/types.ts      |  22 ++++
 packages/motion/src/state/motion-state.ts     |   6 +-
 packages/motion/src/state/types.ts            |  13 ++
 packages/motion/src/state/utils.ts            |   6 +-
 packages/motion/src/types/index.ts            |  15 +--
 packages/motion/src/utils/events.ts           |   2 +-
 playground/nuxt/app.vue                       |  12 +-
 12 files changed, 173 insertions(+), 28 deletions(-)
 create mode 100644 packages/motion/src/state/features/gestures/drag.ts

diff --git a/package.json b/package.json
index 52d2e73..7210c00 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   "main": "index.js",
   "scripts": {
     "dev:play": "pnpm --filter './playground/nuxt' dev",
-    "dev": "pnpm --filter './packages/vue' dev",
+    "dev": "pnpm --filter './packages/motion' dev",
     "build": "pnpm --filter './packages/**' build",
     "test": "pnpm --filter './packages/motion' test",
     "prepare": "pnpm simple-git-hooks",
diff --git a/packages/motion/src/components/Motion.vue b/packages/motion/src/components/Motion.vue
index ed9765f..d63554a 100644
--- a/packages/motion/src/components/Motion.vue
+++ b/packages/motion/src/components/Motion.vue
@@ -2,13 +2,13 @@
 import type { CSSProperties, IntrinsicElementAttributes } from 'vue'
 import { Primitive } from './Primitive'
 import { isSvgTag } from './utils'
-import { MotionState, mountedStates } from '@/state/motion-state'
+import { MotionState } from '@/state/motion-state'
 
 type ElementType = keyof IntrinsicElementAttributes
 </script>
 
 <script setup lang="ts" generic="T extends ElementType = 'div'">
-import { nextTick, onMounted, onUnmounted, onUpdated, ref } from 'vue'
+import { onMounted, onUnmounted, onUpdated, ref } from 'vue'
 import type { Options } from '@/state/types'
 import { usePrimitiveElement } from './usePrimitiveElement'
 import { injectAnimatePresence, injectMotion, provideMotion } from './context'
diff --git a/packages/motion/src/state/features/feature.ts b/packages/motion/src/state/features/feature.ts
index 6c5c695..e40dc78 100644
--- a/packages/motion/src/state/features/feature.ts
+++ b/packages/motion/src/state/features/feature.ts
@@ -1,5 +1,5 @@
 import type { MotionState } from '@/state/motion-state'
-import { EventFeature, HoverGesture, InViewGesture, PressGesture } from './'
+import { DragGesture, EventFeature, HoverGesture, InViewGesture, PressGesture } from './'
 
 export abstract class Feature {
   state: MotionState
@@ -22,6 +22,7 @@ export class FeatureManager {
       new HoverGesture(state),
       new PressGesture(state),
       new InViewGesture(state),
+      new DragGesture(state),
       new EventFeature(state),
     ]
   }
diff --git a/packages/motion/src/state/features/gestures/drag.ts b/packages/motion/src/state/features/gestures/drag.ts
new file mode 100644
index 0000000..6adee7d
--- /dev/null
+++ b/packages/motion/src/state/features/gestures/drag.ts
@@ -0,0 +1,115 @@
+import { dispatchPointerEvent } from '@/utils/events'
+import type { MotionState } from '@/state/motion-state'
+import { BaseGesture } from '@/state/features/gestures'
+import { animate } from 'framer-motion/dom'
+import type { DragOptions } from '@/state/types'
+
+export class DragGesture extends BaseGesture {
+  private isDragging = false
+  private currentPosition = { x: 0, y: 0 }
+  private startPosition = { x: 0, y: 0 }
+  private constraints?: DragOptions['constraints']
+
+  isActive() {
+    return Boolean(this.state.getOptions().drag)
+  }
+
+  constructor(state: MotionState) {
+    super(state)
+    this.subscribeEvents = () => {
+      const element = this.state.getElement()
+      const options = this.state.getOptions().dragOptions || {}
+      this.constraints = options.constraints
+
+      const onPointerMove = (event: PointerEvent) => {
+        if (!this.isDragging)
+          return
+
+        const deltaX = event.clientX - this.startPosition.x
+        const deltaY = event.clientY - this.startPosition.y
+
+        let newX = this.currentPosition.x + deltaX
+        let newY = this.currentPosition.y + deltaY
+
+        // 应用约束
+        if (this.constraints) {
+          if (this.constraints.left !== undefined)
+            newX = Math.max(this.constraints.left, newX)
+          if (this.constraints.right !== undefined)
+            newX = Math.min(this.constraints.right, newX)
+          if (this.constraints.top !== undefined)
+            newY = Math.max(this.constraints.top, newY)
+          if (this.constraints.bottom !== undefined)
+            newY = Math.min(this.constraints.bottom, newY)
+        }
+
+        // 更新元素位置
+        element.style.transform = `translate(${newX}px, ${newY}px)`
+
+        dispatchPointerEvent(element, 'drag', {
+          ...event,
+          point: { x: newX, y: newY },
+        })
+      }
+
+      const onPointerUp = (event: PointerEvent) => {
+        if (!this.isDragging)
+          return
+
+        this.isDragging = false
+        this.currentPosition.x += event.clientX - this.startPosition.x
+        this.currentPosition.y += event.clientY - this.startPosition.y
+
+        this.state.setActive('drag', false)
+        dispatchPointerEvent(element, 'dragend', event)
+
+        window.removeEventListener('pointermove', onPointerMove)
+        window.removeEventListener('pointerup', onPointerUp)
+
+        // 处理拖拽结束后的动画
+        if (options.dragSnapToOrigin) {
+          animate(element, {
+            // eslint-disable-next-line ts/ban-ts-comment
+            // @ts-expect-error
+            x: 0,
+            y: 0,
+            transition: { type: 'spring', stiffness: 400, damping: 40 },
+          })
+          this.currentPosition = { x: 0, y: 0 }
+        }
+      }
+
+      const onPointerDown = (event: PointerEvent) => {
+        this.isDragging = true
+        this.startPosition = { x: event.clientX, y: event.clientY }
+
+        this.state.setActive('drag', true)
+        dispatchPointerEvent(element, 'dragstart', event)
+
+        window.addEventListener('pointermove', onPointerMove)
+        window.addEventListener('pointerup', onPointerUp)
+      }
+
+      // 设置初始样式
+      element.style.touchAction = 'none'
+      element.style.userSelect = 'none'
+      element.style.cursor = 'grab'
+
+      element.addEventListener('pointerdown', onPointerDown as EventListener)
+
+      return () => {
+        element.removeEventListener('pointerdown', onPointerDown as EventListener)
+        window.removeEventListener('pointermove', onPointerMove)
+        window.removeEventListener('pointerup', onPointerUp)
+      }
+    }
+  }
+
+  mount() {
+    this.updateGestureSubscriptions()
+  }
+
+  update() {
+    this.updateGestureSubscriptions()
+  }
+}
diff --git a/packages/motion/src/state/features/gestures/index.ts b/packages/motion/src/state/features/gestures/index.ts
index d45d533..bf39480 100644
--- a/packages/motion/src/state/features/gestures/index.ts
+++ b/packages/motion/src/state/features/gestures/index.ts
@@ -2,3 +2,4 @@ export * from './base'
 export * from './hover'
 export * from './press'
 export * from './in-view'
+export * from './drag'
diff --git a/packages/motion/src/state/features/gestures/types.ts b/packages/motion/src/state/features/gestures/types.ts
index c8f9d9a..743864d 100644
--- a/packages/motion/src/state/features/gestures/types.ts
+++ b/packages/motion/src/state/features/gestures/types.ts
@@ -13,3 +13,25 @@ export interface Gesture {
     options: Options
   ) => () => void
 }
+
+export interface DragOptions {
+  constraints?: {
+    top?: number
+    right?: number
+    bottom?: number
+    left?: number
+  }
+  dragSnapToOrigin?: boolean
+  dragElastic?: number
+  dragMomentum?: boolean
+  dragTransition?: {
+    power?: number
+    timeConstant?: number
+  }
+}
+
+export interface DragHandlers {
+  onDragStart?: (event: PointerEvent) => void
+  onDrag?: (event: PointerEvent) => void
+  onDragEnd?: (event: PointerEvent) => void
+}
diff --git a/packages/motion/src/state/motion-state.ts b/packages/motion/src/state/motion-state.ts
index 3dc4a7b..480b7db 100644
--- a/packages/motion/src/state/motion-state.ts
+++ b/packages/motion/src/state/motion-state.ts
@@ -12,12 +12,12 @@ import { transformResetValue } from '@/state/transform'
 import { scheduleAnimation, unscheduleAnimation } from '@/state/schedule'
 import { motionEvent } from '@/state/event'
 
-const STATE_TYPES = ['initial', 'animate', 'inView', 'hover', 'press', 'exit'] as const
+const STATE_TYPES = ['initial', 'animate', 'inView', 'hover', 'press', 'exit', 'drag'] as const
 type StateType = typeof STATE_TYPES[number]
 export const mountedStates = new WeakMap<Element, MotionState>()
 
 export class MotionState {
-  private element: Element | null = null
+  private element: HTMLElement | null = null
   private context: MotionStateContext = {}
 
   private parent?: MotionState
@@ -67,7 +67,7 @@ export class MotionState {
     return isDef(this.options.initial) ? this.options.initial : this.context.initial
   }
 
-  mount(element: Element) {
+  mount(element: HTMLElement) {
     invariant(
       Boolean(element),
       'Animation state must be mounted with valid Element',
diff --git a/packages/motion/src/state/types.ts b/packages/motion/src/state/types.ts
index 07fef83..6e54bfb 100644
--- a/packages/motion/src/state/types.ts
+++ b/packages/motion/src/state/types.ts
@@ -14,10 +14,23 @@ export interface InViewOptions {
   margin?: MarginType
   amount?: 'some' | 'all' | number
 }
+interface BoundingBox {
+  top: number
+  right: number
+  bottom: number
+  left: number
+}
+export interface DragOptions {
+  constraints?: false | Partial<BoundingBox>
+  dragSnapToOrigin?: boolean
+}
 export interface Options {
   inViewOptions?: InViewOptions & { once?: boolean }
   inView?: string | Variant
   press?: string | Variant
+  drag?: boolean | 'x' | 'y'
+  dragOptions?: DragOptions
+  whileDrag?: string | Variant
   hover?: string | Variant
   initial?: string | Variant | boolean
   animate?: string | Variant
diff --git a/packages/motion/src/state/utils.ts b/packages/motion/src/state/utils.ts
index ad66203..0d6f5b6 100644
--- a/packages/motion/src/state/utils.ts
+++ b/packages/motion/src/state/utils.ts
@@ -1,10 +1,10 @@
-import type { AnimateOptions } from '@/types'
+import type { Options } from '@/state/types'
 import type { DynamicAnimationOptions, Variant } from 'framer-motion'
 import type { VNode } from 'vue'
 
 export function resolveVariant(
-  definition?: AnimateOptions['initial'],
-  variants?: AnimateOptions['variants'],
+  definition?: Options['initial'],
+  variants?: Options['variants'],
 ): Variant | undefined {
   if (typeof definition === 'object') {
     return definition
diff --git a/packages/motion/src/types/index.ts b/packages/motion/src/types/index.ts
index f878f9d..76a2b53 100644
--- a/packages/motion/src/types/index.ts
+++ b/packages/motion/src/types/index.ts
@@ -4,16 +4,6 @@ export interface Variant extends DOMKeyframesDefinition {
   transition?: DynamicAnimationOptions
 }
 
-export interface AnimateOptions {
-  initial?: string | Variant | boolean
-  animate?: string | Variant
-  exit?: string | Variant
-  variants?: {
-    [k: string]: Variant
-  }
-  transition?: DynamicAnimationOptions
-}
-
 export type MotionEventNames =
   | 'motionstart'
   | 'motioncomplete'
@@ -23,3 +13,8 @@ export type MotionEventNames =
   | 'pressend'
   | 'viewenter'
   | 'viewleave'
+  | 'dragstart'
+  | 'dragend'
+  | 'dragcancel'
+  | 'dragmove'
+  | 'drag'
diff --git a/packages/motion/src/utils/events.ts b/packages/motion/src/utils/events.ts
index 528dc47..395cf2f 100644
--- a/packages/motion/src/utils/events.ts
+++ b/packages/motion/src/utils/events.ts
@@ -5,7 +5,7 @@ import type { MotionEventNames } from '../types'
 // }
 
 export function dispatchPointerEvent(
-  element: Element,
+  element: HTMLElement,
   name: MotionEventNames,
   event: any,
 ) {
diff --git a/playground/nuxt/app.vue b/playground/nuxt/app.vue
index 2d862b2..6538041 100644
--- a/playground/nuxt/app.vue
+++ b/playground/nuxt/app.vue
@@ -17,14 +17,12 @@ const show = ref(true)
       <Motion
         v-show="show"
         class="w-20 h-20 bg-purple-500 rounded-md"
-        :initial="{ scale: 0 }"
-        :animate="{ scale: 1 }"
-        :exit="{ scale: 0,
-                 transition: {
-                   duration: 5,
-                 },
+        drag
+        :animate="{ scale: 2,
+                    transition: {
+                      duration: 10,
+                    },
         }"
-        :transition="{ duration: 5 }"
       >
         content
       </Motion>

From 7c64354e18116c7f903ebf1eda5e560f719f1639 Mon Sep 17 00:00:00 2001
From: Persephone Flores <34418758+hp0844182@users.noreply.github.com>
Date: Thu, 21 Nov 2024 19:42:13 +0800
Subject: [PATCH 2/4] chore: file structure fix

---
 .../motion/src/{state => }/features/events.ts |   4 +-
 .../src/{state => }/features/feature.ts       |  10 +-
 .../src/{state => }/features/gestures/base.ts |   2 +-
 .../gestures/drag/index.ts}                   |   4 +-
 .../src/features/gestures/drag/types.ts       | 150 ++++++++++++++++++
 .../{state => }/features/gestures/hover.ts    |   4 +-
 .../{state => }/features/gestures/in-view.ts  |   2 +-
 .../{state => }/features/gestures/index.ts    |   0
 .../{state => }/features/gestures/press.ts    |   2 +-
 .../{state => }/features/gestures/types.ts    |   0
 .../motion/src/{state => }/features/index.ts  |   0
 packages/motion/src/state/motion-state.ts     |   2 +-
 packages/motion/src/state/types.ts            |   4 +-
 13 files changed, 168 insertions(+), 16 deletions(-)
 rename packages/motion/src/{state => }/features/events.ts (93%)
 rename packages/motion/src/{state => }/features/feature.ts (84%)
 rename packages/motion/src/{state => }/features/gestures/base.ts (94%)
 rename packages/motion/src/{state/features/gestures/drag.ts => features/gestures/drag/index.ts} (97%)
 create mode 100644 packages/motion/src/features/gestures/drag/types.ts
 rename packages/motion/src/{state => }/features/gestures/hover.ts (92%)
 rename packages/motion/src/{state => }/features/gestures/in-view.ts (94%)
 rename packages/motion/src/{state => }/features/gestures/index.ts (100%)
 rename packages/motion/src/{state => }/features/gestures/press.ts (95%)
 rename packages/motion/src/{state => }/features/gestures/types.ts (100%)
 rename packages/motion/src/{state => }/features/index.ts (100%)

diff --git a/packages/motion/src/state/features/events.ts b/packages/motion/src/features/events.ts
similarity index 93%
rename from packages/motion/src/state/features/events.ts
rename to packages/motion/src/features/events.ts
index 8000cb4..0dc668b 100644
--- a/packages/motion/src/state/features/events.ts
+++ b/packages/motion/src/features/events.ts
@@ -1,7 +1,5 @@
-import type { MotionState } from '../motion-state'
+import type { MotionEventNames } from '@/types'
 import { Feature } from './feature'
-import type { MotionEventNames } from '../event'
-import { motionEvent } from '../event'
 
 export class EventFeature extends Feature {
   private handlers: Partial<Record<MotionEventNames, (event: Event) => void>> = {}
diff --git a/packages/motion/src/state/features/feature.ts b/packages/motion/src/features/feature.ts
similarity index 84%
rename from packages/motion/src/state/features/feature.ts
rename to packages/motion/src/features/feature.ts
index e40dc78..9750b52 100644
--- a/packages/motion/src/state/features/feature.ts
+++ b/packages/motion/src/features/feature.ts
@@ -1,5 +1,11 @@
 import type { MotionState } from '@/state/motion-state'
-import { DragGesture, EventFeature, HoverGesture, InViewGesture, PressGesture } from './'
+import {
+  // DragGesture,
+  EventFeature,
+  HoverGesture,
+  InViewGesture,
+  PressGesture,
+} from './'
 
 export abstract class Feature {
   state: MotionState
@@ -22,7 +28,7 @@ export class FeatureManager {
       new HoverGesture(state),
       new PressGesture(state),
       new InViewGesture(state),
-      new DragGesture(state),
+      // new DragGesture(state),
       new EventFeature(state),
     ]
   }
diff --git a/packages/motion/src/state/features/gestures/base.ts b/packages/motion/src/features/gestures/base.ts
similarity index 94%
rename from packages/motion/src/state/features/gestures/base.ts
rename to packages/motion/src/features/gestures/base.ts
index 310153e..0d5a8c2 100644
--- a/packages/motion/src/state/features/gestures/base.ts
+++ b/packages/motion/src/features/gestures/base.ts
@@ -1,5 +1,5 @@
 import { dispatchPointerEvent } from '@/utils/events'
-import { Feature } from '@/state/features/feature'
+import { Feature } from '@/features/feature'
 import type { MotionEventNames } from '@/types'
 
 export abstract class BaseGesture extends Feature {
diff --git a/packages/motion/src/state/features/gestures/drag.ts b/packages/motion/src/features/gestures/drag/index.ts
similarity index 97%
rename from packages/motion/src/state/features/gestures/drag.ts
rename to packages/motion/src/features/gestures/drag/index.ts
index 6adee7d..ee33fb4 100644
--- a/packages/motion/src/state/features/gestures/drag.ts
+++ b/packages/motion/src/features/gestures/drag/index.ts
@@ -1,6 +1,6 @@
 import { dispatchPointerEvent } from '@/utils/events'
 import type { MotionState } from '@/state/motion-state'
-import { BaseGesture } from '@/state/features/gestures'
+import { BaseGesture } from '@/features/gestures'
 import { animate } from 'framer-motion/dom'
 import type { DragOptions } from '@/state/types'
 
@@ -11,7 +11,7 @@ export class DragGesture extends BaseGesture {
   private constraints?: DragOptions['constraints']
 
   isActive() {
-    return Boolean(this.state.getOptions().drag)
+    return Boolean(this.state.getOptions())
   }
 
   constructor(state: MotionState) {
diff --git a/packages/motion/src/features/gestures/drag/types.ts b/packages/motion/src/features/gestures/drag/types.ts
new file mode 100644
index 0000000..33392f8
--- /dev/null
+++ b/packages/motion/src/features/gestures/drag/types.ts
@@ -0,0 +1,150 @@
+import type { VariantLabels } from '@/state/types'
+
+export interface BoundingBox {
+  top: number
+  right: number
+  bottom: number
+  left: number
+}
+type DragElastic = boolean | number | Partial<BoundingBox>
+
+export interface DragOptions {
+  /**
+   * Enable dragging for this element. Set to `false` by default.
+   * Set `true` to drag in both directions.
+   * Set `"x"` or `"y"` to only drag in a specific direction.
+   *
+   * ```template
+   * <Motion drag="x" />
+   * ```
+   */
+  drag?: boolean | 'x' | 'y'
+  /**
+   * If `true`, the drag direction will be locked to the initial drag direction.
+   * Set to `false` by default.
+   *
+   * ```template
+   * <Motion dragOptions="{ directionLock: true, drag: 'x' }" />
+   * ```
+   */
+  directionLock?: boolean
+
+  /**
+   * Allows drag gesture propagation to child components. Set to `false` by
+   * default.
+   *
+   * ```template
+   * <Motion dragOptions="{ propagation: true, drag: 'x' }" />
+   * ```
+   */
+  propagation?: boolean
+  /**
+   * Applies constraints on the permitted draggable area.
+   *
+   * It can accept an object of optional `top`, `left`, `right`, and `bottom` values, measured in pixels.
+   * This will define a distance the named edge of the draggable component.
+   *
+   * Alternatively, it can accept a `ref` to another component created with React's `useRef` hook.
+   * This `ref` should be passed both to the draggable component's `dragConstraints` prop, and the `ref`
+   * of the component you want to use as constraints.
+   *
+   * ```template
+   * // In pixels
+   * <Motion dragOptions="{ constraints: { left: 0, right: 300 }, drag: 'x' }" />
+   *
+   * // As a ref to another component
+   * const MyComponent = () => {
+   *   const constraintsRef = ref()
+   *
+   *   return (
+   *     <div ref={constraintsRef}>
+   *       <Motion dragOptions="{ constraints: constraintsRef, drag: 'x' }" />
+   *     </div>
+   *   )
+   * }
+   * ```
+   */
+  constraints?: false | Partial<BoundingBox> | HTMLElement
+
+  /**
+   * The degree of movement allowed outside constraints. 0 = no movement, 1 =
+   * full movement.
+   *
+   * Set to `0.5` by default. Can also be set as `false` to disable movement.
+   *
+   * By passing an object of `top`/`right`/`bottom`/`left`, individual values can be set
+   * per constraint. Any missing values will be set to `0`.
+   *
+   * ```template
+   * <Motion dragOptions="{ dragElastic: 0.2, constraints: { left: 0, right: 300 }, drag: 'x' }" />
+   * ```
+   */
+  elastic?: DragElastic
+  /**
+   * Apply momentum from the pan gesture to the component when dragging
+   * finishes. Set to `true` by default.
+   *
+   * ```template
+   * <Motion dragOptions="{ dragMomentum: false, constraints: { left: 0, right: 300 }, drag: 'x' }" />
+   * ```
+   */
+  momentum?: boolean
+  /**
+   * Allows you to change dragging inertia parameters.
+   * When releasing a draggable Frame, an animation with type `inertia` starts. The animation is based on your dragging velocity. This property allows you to customize it.
+   *
+   * ```jsx
+   * <motion.div
+   *   drag
+   *   dragTransition={{ bounceStiffness: 600, bounceDamping: 10 }}
+   * />
+   * ```
+   */
+  // dragTransition?: InertiaOptions
+  /**
+   * Usually, dragging is initiated by pressing down on a component and moving it. For some
+   * use-cases, for instance clicking at an arbitrary point on a video scrubber, we
+   * might want to initiate dragging from a different component than the draggable one.
+   *
+   * By creating a `dragControls` using the `useDragControls` hook, we can pass this into
+   * the draggable component's `dragControls` prop. It exposes a `start` method
+   * that can start dragging from pointer events on other components.
+   *
+   * ```jsx
+   * const dragControls = useDragControls()
+   *
+   * function startDrag(event) {
+   *   dragControls.start(event, { snapToCursor: true })
+   * }
+   *
+   * return (
+   *   <>
+   *     <div onPointerDown={startDrag} />
+   *     <motion.div drag="x" dragControls={dragControls} />
+   *   </>
+   * )
+   * ```
+   */
+  // dragControls?: DragControls
+  /**
+   * If true, element will snap back to its origin when dragging ends.
+   *
+   * Enabling this is the equivalent of setting all `dragConstraints` axes to `0`
+   * with `dragElastic={1}`, but when used together `dragConstraints` can define
+   * a wider draggable area and `dragSnapToOrigin` will ensure the element
+   * animates back to its origin on release.
+   */
+  snapToOrigin?: boolean
+}
+
+export interface DragProps {
+  /**
+   * Properties or variant label to animate to while the drag gesture is recognised.
+   *
+   * ```jsx
+   * <motion.div whileDrag={{ scale: 1.2 }} />
+   * ```
+   */
+  drag?: VariantLabels
+  dragOptions?: DragOptions
+}
diff --git a/packages/motion/src/state/features/gestures/hover.ts b/packages/motion/src/features/gestures/hover.ts
similarity index 92%
rename from packages/motion/src/state/features/gestures/hover.ts
rename to packages/motion/src/features/gestures/hover.ts
index 5b3af4d..784ff29 100644
--- a/packages/motion/src/state/features/gestures/hover.ts
+++ b/packages/motion/src/features/gestures/hover.ts
@@ -1,9 +1,9 @@
 import { dispatchPointerEvent } from '@/utils/events'
 import type { Gesture } from './types'
 import type { MotionState } from '@/state/motion-state'
-import { BaseGesture } from '@/state/features/gestures'
+import { BaseGesture } from '@/features'
 
-function mouseEvent(element: Element, name: 'hoverstart' | 'hoverend', action: VoidFunction) {
+function mouseEvent(element: HTMLElement, name: 'hoverstart' | 'hoverend', action: VoidFunction) {
   return (event: PointerEvent) => {
     if (event.pointerType && event.pointerType !== 'mouse')
       return
diff --git a/packages/motion/src/state/features/gestures/in-view.ts b/packages/motion/src/features/gestures/in-view.ts
similarity index 94%
rename from packages/motion/src/state/features/gestures/in-view.ts
rename to packages/motion/src/features/gestures/in-view.ts
index e55966b..4aa8f7c 100644
--- a/packages/motion/src/state/features/gestures/in-view.ts
+++ b/packages/motion/src/features/gestures/in-view.ts
@@ -1,6 +1,6 @@
 import { dispatchPointerEvent } from '@/utils/events'
 import type { MotionState } from '@/state/motion-state'
-import { BaseGesture } from '@/state/features/gestures'
+import { BaseGesture } from '@/features'
 import { inView } from 'framer-motion/dom'
 
 export class InViewGesture extends BaseGesture {
diff --git a/packages/motion/src/state/features/gestures/index.ts b/packages/motion/src/features/gestures/index.ts
similarity index 100%
rename from packages/motion/src/state/features/gestures/index.ts
rename to packages/motion/src/features/gestures/index.ts
diff --git a/packages/motion/src/state/features/gestures/press.ts b/packages/motion/src/features/gestures/press.ts
similarity index 95%
rename from packages/motion/src/state/features/gestures/press.ts
rename to packages/motion/src/features/gestures/press.ts
index eabde60..21a3d77 100644
--- a/packages/motion/src/state/features/gestures/press.ts
+++ b/packages/motion/src/features/gestures/press.ts
@@ -1,6 +1,6 @@
 import { dispatchPointerEvent } from '@/utils/events'
 import type { MotionState } from '@/state/motion-state'
-import { BaseGesture } from '@/state/features/gestures'
+import { BaseGesture } from '@/features'
 
 export class PressGesture extends BaseGesture {
   isActive() {
diff --git a/packages/motion/src/state/features/gestures/types.ts b/packages/motion/src/features/gestures/types.ts
similarity index 100%
rename from packages/motion/src/state/features/gestures/types.ts
rename to packages/motion/src/features/gestures/types.ts
diff --git a/packages/motion/src/state/features/index.ts b/packages/motion/src/features/index.ts
similarity index 100%
rename from packages/motion/src/state/features/index.ts
rename to packages/motion/src/features/index.ts
diff --git a/packages/motion/src/state/motion-state.ts b/packages/motion/src/state/motion-state.ts
index 480b7db..ae72368 100644
--- a/packages/motion/src/state/motion-state.ts
+++ b/packages/motion/src/state/motion-state.ts
@@ -6,7 +6,7 @@ import { isDef } from '@vueuse/core'
 import type { DOMKeyframesDefinition, DynamicAnimationOptions } from 'framer-motion'
 import { animate } from 'framer-motion/dom'
 import { getOptions, hasChanged, noop, resolveVariant } from '@/state/utils'
-import { FeatureManager } from '@/state/features'
+import { FeatureManager } from '@/features'
 import { style } from '@/state/style'
 import { transformResetValue } from '@/state/transform'
 import { scheduleAnimation, unscheduleAnimation } from '@/state/schedule'
diff --git a/packages/motion/src/state/types.ts b/packages/motion/src/state/types.ts
index 6e54bfb..d8c222c 100644
--- a/packages/motion/src/state/types.ts
+++ b/packages/motion/src/state/types.ts
@@ -7,6 +7,7 @@ type AnimationPlaybackControls = ReturnType<typeof animate>
 export interface Variant extends DOMKeyframesDefinition {
   transition?: DynamicAnimationOptions
 }
+export type VariantLabels = string | Variant
 type MarginValue = `${number}${'px' | '%'}`
 type MarginType = MarginValue | `${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`
 export interface InViewOptions {
@@ -28,9 +29,6 @@ export interface Options {
   inViewOptions?: InViewOptions & { once?: boolean }
   inView?: string | Variant
   press?: string | Variant
-  drag?: boolean | 'x' | 'y'
-  dragOptions?: DragOptions
-  whileDrag?: string | Variant
   hover?: string | Variant
   initial?: string | Variant | boolean
   animate?: string | Variant

From 5b166ec1b508d9bd3c4063a11cc6fb9ae9c0aee7 Mon Sep 17 00:00:00 2001
From: Persephone Flores <34418758+hp0844182@users.noreply.github.com>
Date: Thu, 21 Nov 2024 20:38:49 +0800
Subject: [PATCH 3/4] chore: file structure fix

---
 docs/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/package.json b/docs/package.json
index 4bf7b2a..2d716f7 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -53,9 +53,9 @@
     "@vue/compiler-core": "^3.4.14",
     "@vue/compiler-dom": "^3.4.14",
     "@vue/tsconfig": "^0.5.1",
-    "motion-v": "workspace:*",
     "autoprefixer": "^10.4.16",
     "lodash.template": "^4.5.0",
+    "motion-v": "0.1.0",
     "pathe": "^1.1.2",
     "rimraf": "^5.0.5",
     "shikiji": "^0.10.0-beta.9",

From 117e4fafc73ec16aa4bb643c92c6aba4f9e09aef Mon Sep 17 00:00:00 2001
From: Persephone Flores <34418758+hp0844182@users.noreply.github.com>
Date: Thu, 21 Nov 2024 21:05:46 +0800
Subject: [PATCH 4/4] chore: build update

---
 .github/workflows/publish.yaml                 |  2 --
 packages/motion/package.json                   |  6 +++---
 packages/motion/src/features/gestures/types.ts |  2 +-
 packages/motion/vite.config.ts                 | 10 +++-------
 pnpm-lock.yaml                                 | 15 +++++++++++++--
 5 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/.github/workflows/publish.yaml b/.github/workflows/publish.yaml
index 282e7dc..fc8278c 100644
--- a/.github/workflows/publish.yaml
+++ b/.github/workflows/publish.yaml
@@ -47,8 +47,6 @@ jobs:
       - name: Install dependencies
         run: pnpm i
 
-      - name: PNPM build
-        run: pnpm run build
         
       - name: Build Docs
         run: pnpm docs:build
diff --git a/packages/motion/package.json b/packages/motion/package.json
index 38fd5a1..0209a1f 100644
--- a/packages/motion/package.json
+++ b/packages/motion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
   "author": "",
   "license": "MIT",
@@ -10,10 +10,10 @@
     ".": {
       "types": "./dist/src/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
+      "require": "./dist/index.cjs"
     }
   },
-  "main": "./dist/index.umd.cjs",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/src/index.d.ts",
   "files": [
diff --git a/packages/motion/src/features/gestures/types.ts b/packages/motion/src/features/gestures/types.ts
index 743864d..5421c40 100644
--- a/packages/motion/src/features/gestures/types.ts
+++ b/packages/motion/src/features/gestures/types.ts
@@ -8,7 +8,7 @@ export interface StateHandlers {
 export interface Gesture {
   isActive: (options: Options) => void
   subscribe: (
-    element: Element,
+    element: HTMLElement,
     stateHandlers: StateHandlers,
     options: Options
   ) => () => void
diff --git a/packages/motion/vite.config.ts b/packages/motion/vite.config.ts
index 84a1873..9cbf7eb 100644
--- a/packages/motion/vite.config.ts
+++ b/packages/motion/vite.config.ts
@@ -26,18 +26,14 @@ export default defineConfig({
   build: {
     lib: {
       name: 'motion-v',
-      fileName: (format, name) => {
-        return `${name}.${format === 'es' ? 'js' : 'umd.cjs'}`
-      },
-      entry: {
-        index: path.resolve(__dirname, 'src/index.ts'),
-      },
+      formats: ['es', 'cjs'],
+      fileName: format => `index.${format === 'es' ? 'mjs' : 'cjs'}`,
+      entry: path.resolve(__dirname, 'src/index.ts'),
     },
     rollupOptions: {
       external: [
         'vue',
         // 'framer-motion',
-        'radix-vue',
       ],
     },
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ebf4aad..0f0db0b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -167,8 +167,8 @@ importers:
         specifier: ^4.5.0
         version: 4.5.0
       motion-v:
-        specifier: workspace:*
-        version: link:../packages/motion
+        specifier: 0.1.0
+        version: 0.1.0
       pathe:
         specifier: ^1.1.2
         version: 1.1.2
@@ -5222,6 +5222,9 @@ packages:
   mlly@1.7.1:
     resolution: {integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==}
 
+  motion-v@0.1.0:
+    resolution: {integrity: sha512-19JzkpKSeSdbsnX6rtg1QzNQ32AegUPO6PkA7hUEk5kdfkv7oGqH9zh/h5jqkPNWIF/tTfqtCmdp7j4S0QsVrw==}
+
   move-concurrently@1.0.1:
     resolution: {integrity: sha512-hdrFxZOycD/g6A6SoI2bB5NA/5NEqD0569+S47WZhPvm46sD50ZHdYaFmnua5lndde9rCHGjmfK7Z8BuCt/PcQ==}
     deprecated: This package is no longer supported.
@@ -13247,6 +13250,14 @@ snapshots:
       pkg-types: 1.2.0
       ufo: 1.5.4
 
+  motion-v@0.1.0:
+    dependencies:
+      framer-motion: 11.11.11
+    transitivePeerDependencies:
+      - '@emotion/is-prop-valid'
+      - react
+      - react-dom
+
   move-concurrently@1.0.1:
     dependencies:
       aproba: 1.2.0