@humanspeak/svelte-motion 0.1.18 → 0.1.20

package/README.md

@@ -12,62 +12,97 @@
 [![Types](https://img.shields.io/npm/types/@humanspeak/svelte-motion.svg)](https://www.npmjs.com/package/@humanspeak/svelte-motion)
 [![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/humanspeak/svelte-motion/graphs/commit-activity)
 
-## Why are we here?
+Svelte Motion brings a Framer Motion-style API to Svelte 5 with `motion.<tag>` components, gestures, variants, exit animations, layout animation, and utility hooks.
 
-Motion vibes, Svelte runes. This brings Motion’s declarative animation goodness to Svelte with `motion.<tag>` components, interaction props, and composable config. If you spot a cool React example, drop it in an issue—we’ll port it. 😍
+For the latest documentation and examples, visit [motion.svelte.page](https://motion.svelte.page).
 
-Requests welcome: Have a feature/prop/example you want? Please open an issue (ideally include a working Motion/React snippet or example link) and we’ll prioritize it.
+## Install
 
-## Supported Elements
+```bash
+npm install @humanspeak/svelte-motion
+```
+
+```svelte
+<script lang="ts">
+    import { motion } from '@humanspeak/svelte-motion'
+</script>
+
+<motion.button initial={{ opacity: 0 }} animate={{ opacity: 1 }} whileTap={{ scale: 0.97 }}>
+    Hello motion
+</motion.button>
+```
 
-All standard HTML and SVG elements are supported as motion components (e.g., `motion.div`, `motion.button`, `motion.svg`, `motion.circle`). The full set is generated from canonical lists using `html-tags`, `html-void-elements`, and `svg-tags`, and exported from `src/lib/html/`.
+## API parity snapshot (current)
 
-- HTML components respect void elements for documentation and generation purposes.
-- SVG components are treated as non-void.
-- Dashed tag names are exported as PascalCase components (e.g., `color-profile` → `ColorProfile`).
+Goal: Framer Motion API parity for Svelte where common React examples can be translated with minimal changes.
 
-## Configuration
+| Capability                                                | Status                          |
+| --------------------------------------------------------- | ------------------------------- |
+| `initial` / `animate` / `transition`                      | Supported                       |
+| `variants` (string keys + inheritance)                    | Supported                       |
+| `whileHover` / `whileTap` / `whileFocus` / `whileInView`  | Supported                       |
+| Drag (`drag`, constraints, momentum, controls, callbacks) | Supported                       |
+| `AnimatePresence` (`initial`, `mode`, `onExitComplete`)   | Supported                       |
+| Layout (`layout`, `layout="position"`)                    | Supported (single-element FLIP) |
+| Shared layout (`layoutId`)                                | Not yet supported               |
+| Pan gesture API (`whilePan`, `onPan*`)                    | Not yet supported               |
+| `MotionConfig` parity beyond `transition`                 | Partial                         |
+| `reducedMotion`, `features`, `transformPagePoint`         | Not yet supported               |
 
-### MotionConfig
+## Supported elements
 
-This package includes support for `MotionConfig`, which allows you to set default motion settings for all child components. See the [React - Motion Config](https://motion.dev/docs/react-motion-config) for more details.
+Motion components are generated from canonical HTML/SVG tag lists and exported from `src/lib/html/`.
+
+- `motion.div`, `motion.button`, `motion.svg`, `motion.path`, etc.
+- Most standard tags are included.
+- Excluded by generation: `script`, `style`, `link`, `meta`, `title`, `head`, `html`, `body`.
+
+## Core components
+
+### `motion.<tag>`
+
+Use motion components the same way you use regular elements, with animation props:
 
 ```svelte
-<MotionConfig transition={{ duration: 0.5 }}>
-    <!-- All motion components inside will inherit these settings -->
-    <motion.div animate={{ scale: 1.2 }}>Inherits 0.5s duration</motion.div>
-</MotionConfig>
+<motion.div
+    initial={{ opacity: 0, y: 8 }}
+    animate={{ opacity: 1, y: 0 }}
+    transition={{ duration: 0.25 }}
+/>
 ```
 
-### Layout Animations (FLIP)
+### `MotionConfig`
 
-Svelte Motion supports minimal layout animations via FLIP using the `layout` prop:
+`MotionConfig` currently supports default `transition` values for descendants.
 
 ```svelte
-<motion.div layout transition={{ duration: 0.25 }} />
-```
+<script lang="ts">
+    import { MotionConfig, motion } from '@humanspeak/svelte-motion'
+</script>
 
-- **`layout`**: smoothly animates translation and scale between layout changes (size and position).
-- **`layout="position"`**: only animates translation (no scale).
+<MotionConfig transition={{ duration: 0.4 }}>
+    <motion.div animate={{ scale: 1.05 }} />
+</MotionConfig>
+```
 
-### Exit Animations (AnimatePresence)
+### `AnimatePresence`
 
-Animate elements as they leave the DOM using `AnimatePresence`. This mirrors Motion’s React API and docs for exit animations ([reference](https://motion.dev/docs/react)).
+Exit animations on unmount with support for `mode="sync" | "wait" | "popLayout"` and `onExitComplete`.
 
 ```svelte
 <script lang="ts">
-    import { motion, AnimatePresence } from '$lib'
+    import { AnimatePresence, motion } from '@humanspeak/svelte-motion'
+
     let show = $state(true)
 </script>
 
-<AnimatePresence>
+<AnimatePresence mode="wait" onExitComplete={() => console.log('done')}>
     {#if show}
         <motion.div
+            key="card"
             initial={{ opacity: 0, scale: 0.9 }}
             animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.9 }}
-            transition={{ duration: 0.5 }}
-            class="size-24 rounded-md bg-cyan-400"
+            exit={{ opacity: 0, scale: 0.9, transition: { duration: 0.2 } }}
         />
     {/if}
 </AnimatePresence>
@@ -75,328 +110,161 @@ Animate elements as they leave the DOM using `AnimatePresence`. This mirrors Mot
 <motion.button whileTap={{ scale: 0.97 }} onclick={() => (show = !show)}>Toggle</motion.button>
 ```
 
-- The exit animation is driven by `exit` and will play when the element unmounts.
-- Transition precedence (merged before running exit):
-    - `exit.transition` (highest precedence)
-    - component `transition` (merged with `MotionConfig`)
-    - fallback default `{ duration: 0.35 }`
-
-#### Current Limitations
-
-Some Motion features are not yet implemented:
-
-- `reducedMotion` settings
-- `features` configuration
-- Performance optimizations like `transformPagePoint`
-- Advanced transition controls
-- Shared layout / `layoutId` (planned)
-
-## External Dependencies
-
-This package carefully selects its dependencies to provide a robust and maintainable solution:
-
-### Core Dependencies
-
-- **motion**
-    - High-performance animation library for the web
-    - Provides smooth, hardware-accelerated animations
-    - Supports spring physics and custom easing
-    - Used for creating fluid motion and transitions
-
-### Examples
-
-| Motion                                                                                                   | Demo / Route                             | Live Demo                                                                                      |
-| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------- |
-| [React - Enter Animation](https://examples.motion.dev/react/enter-animation)                             | `/tests/motion/enter-animation`          | [View Example](https://svelte.dev/playground/7f60c347729f4ea48b1a4590c9dedc02?version=5.38.10) |
-| [HTML Content (0→100 counter)](https://examples.motion.dev/react/html-content)                           | `/tests/motion/html-content`             | [View Example](https://motion.svelte.page/examples/html-content)                               |
-| [Aspect Ratio](https://examples.motion.dev/react/aspect-ratio)                                           | `/tests/motion/aspect-ratio`             | [View Example](https://svelte.dev/playground/1bf60e745fae44f5becb4c830fde9b6e?version=5.38.10) |
-| [Hover + Tap (whileHover + whileTap)](https://examples.motion.dev/react/gestures)                        | `/tests/motion/hover-and-tap`            | [View Example](https://motion.svelte.page/examples/hover-and-tap)                              |
-| [Focus (whileFocus)](https://motion.dev/docs/react-motion-component#focus)                               | `/tests/motion/while-focus`              | [View Example](https://motion.svelte.page/examples/while-focus)                                |
-| [Rotate](https://examples.motion.dev/react/rotate)                                                       | `/tests/motion/rotate`                   | [View Example](https://motion.svelte.page/examples/rotate)                                     |
-| [Random - Shiny Button](https://www.youtube.com/watch?v=jcpLprT5F0I) by [@verse\_](https://x.com/verse_) | `/tests/random/shiny-button`             | [View Example](https://svelte.dev/playground/96f9e0bf624f4396adaf06c519147450?version=5.38.10) |
-| [Fancy Like Button](https://github.com/DRlFTER/fancyLikeButton)                                          | `/tests/random/fancy-like-button`        | [View Example](https://svelte.dev/playground/c34b7e53d41c48b0ab1eaf21ca120c6e?version=5.38.10) |
-| [Keyframes (square → circle → square; scale 1→2→1)](https://motion.dev/docs/react-animation#keyframes)   | `/tests/motion/keyframes`                | [View Example](https://svelte.dev/playground/05595ce0db124c1cbbe4e74fda68d717?version=5.38.10) |
-| [Animated Border Gradient (conic-gradient rotate)](https://www.youtube.com/watch?v=OgQI1-9T6ZA)          | `/tests/random/animated-border-gradient` | [View Example](https://svelte.dev/playground/6983a61b4c35441b8aa72a971de01a23?version=5.38.10) |
-| [Exit Animation](https://motion.dev/docs/react#exit-animations)                                          | `/tests/animate-presence/basic`          | [View Example](https://svelte.dev/playground/ef277e283d864653ace54e7453801601?version=5.38.10) |
+Notes:
 
-## Interactions
+- Direct children of `AnimatePresence` require `key`.
+- Exit transition precedence: base `{ duration: 0.35 }` < merged `transition` < `exit.transition`.
 
-### Hover
+## Interaction props
 
-Svelte Motion now supports hover interactions via the `whileHover` prop, similar to React Motion/Framer Motion.
+### `whileHover`
 
 ```svelte
-<motion.div whileHover={{ scale: 1.05 }} />
+<motion.button whileHover={{ scale: 1.05, transition: { duration: 0.12 } }} />
 ```
 
-- `whileHover` accepts a keyframes object. It also supports a nested `transition` to override the global transition for hover only:
+- Uses true-hover gating (`(hover: hover)` and `(pointer: fine)`).
+- Supports `onHoverStart` and `onHoverEnd`.
 
-```svelte
-<motion.button
-    whileHover={{ scale: 1.05, transition: { duration: 0.12 } }}
-    transition={{ duration: 0.25 }}
-/>
-```
-
-- Baseline restoration: when the pointer leaves, changed values are restored to their pre-hover baseline. Baseline is computed from `animate` values if present, otherwise `initial`, otherwise sensible defaults (e.g., `scale: 1`, `x/y: 0`) or current computed style where applicable.
-- True-hover gating: hover behavior runs only on devices that support real hover and fine pointers (media queries `(hover: hover)` and `(pointer: fine)`), avoiding sticky hover states on touch devices.
-
-### Tap
+### `whileTap`
 
 ```svelte
 <motion.button whileTap={{ scale: 0.95 }} />
 ```
 
-- Callbacks: `onTapStart`, `onTap`, `onTapCancel` are supported.
-- Accessibility: Elements with `whileTap` are keyboard-accessible (Enter and Space).
-    - Enter or Space down → fires `onTapStart` and applies `whileTap` (Space prevents default scrolling)
-    - Enter or Space up → fires `onTap`
-    - Blur while key is held → fires `onTapCancel`
-    - `MotionContainer` sets `tabindex="0"` automatically when `whileTap` is present and no `tabindex`/`tabIndex` is provided.
+- Supports `onTapStart`, `onTap`, `onTapCancel`.
+- Keyboard accessible (Enter/Space).
 
-### Focus
+### `whileFocus`
 
 ```svelte
 <motion.button whileFocus={{ scale: 1.05, outline: '2px solid blue' }} />
 ```
 
-- Animates when the element receives keyboard focus and restores baseline on blur.
-- Callbacks: `onFocusStart`, `onFocusEnd` are supported.
-- Perfect for keyboard navigation and accessibility enhancements.
+- Supports `onFocusStart` and `onFocusEnd`.
 
-### Animation lifecycle
+### `whileInView`
 
 ```svelte
 <motion.div
-    onAnimationStart={(def) => {
-        /* ... */
-    }}
-    onAnimationComplete={(def) => {
-        /* ... */
-    }}
+    initial={{ opacity: 0, y: 40 }}
+    whileInView={{ opacity: 1, y: 0 }}
+    onInViewStart={() => console.log('entered')}
+    onInViewEnd={() => console.log('left')}
 />
 ```
 
-## Variants
+- Uses `IntersectionObserver`.
+- Current implementation uses a fixed threshold behavior (no Framer-style `viewport` options yet).
 
-Variants allow you to define named animation states that can be referenced throughout your component tree. They're perfect for creating reusable animations and orchestrating complex sequences.
+## Drag
 
-### Basic usage
+Supported drag props:
 
-Instead of defining animation objects inline, create a `Variants` object with named states:
+- `drag`: `true | 'x' | 'y'`
+- `dragConstraints`: pixel object or element ref
+- `dragElastic`, `dragMomentum`, `dragTransition`
+- `dragDirectionLock`, `dragPropagation`, `dragSnapToOrigin`
+- `dragListener`, `dragControls`
+- `whileDrag`
+- Callbacks: `onDragStart`, `onDrag`, `onDragEnd`, `onDirectionLock`, `onDragTransitionEnd`
 
 ```svelte
 <script lang="ts">
-    import { motion, type Variants } from '@humanspeak/svelte-motion'
-
-    let isOpen = $state(false)
+    import { createDragControls, motion } from '@humanspeak/svelte-motion'
 
-    const variants: Variants = {
-        open: { opacity: 1, scale: 1 },
-        closed: { opacity: 0, scale: 0.8 }
-    }
+    const controls = createDragControls()
 </script>
 
-<motion.div {variants} initial="closed" animate={isOpen ? 'open' : 'closed'}>Click me</motion.div>
-```
-
-### Variant propagation
-
-One of the most powerful features is **automatic propagation** through component trees. When a parent changes its animation state, all children with `variants` defined automatically inherit that state:
-
-```svelte
-<script lang="ts">
-    let isVisible = $state(false)
+<button onpointerdown={(e) => controls.start(e)}>Start drag</button>
 
-    const containerVariants: Variants = {
-        visible: { opacity: 1 },
-        hidden: { opacity: 0 }
-    }
-
-    const itemVariants: Variants = {
-        visible: { opacity: 1, x: 0 },
-        hidden: { opacity: 0, x: -20 }
-    }
-</script>
-
-<motion.ul variants={containerVariants} initial="hidden" animate={isVisible ? 'visible' : 'hidden'}>
-    <!-- Children automatically inherit parent's variant state -->
-    <motion.li variants={itemVariants}>Item 1</motion.li>
-    <motion.li variants={itemVariants}>Item 2</motion.li>
-    <motion.li variants={itemVariants}>Item 3</motion.li>
-</motion.ul>
-```
-
-**How it works:**
-
-- Parent sets `animate="visible"`
-- Children with `variants` automatically inherit `"visible"` state
-- Each child resolves its own variant definition
-- No need to pass `animate` props to children!
-
-### Staggered animations
-
-Create staggered animations with transition delays:
-
-```svelte
-{#each items as item, i}
-    <motion.div variants={itemVariants} transition={{ delay: i * 0.1 }}>
-        {item}
-    </motion.div>
-{/each}
-```
-
-See the [Variants documentation](https://motion.svelte.page/docs/variants) for complete details and examples.
-
-## Server-side rendering
-
-Motion components render their initial state during SSR. The container merges inline `style` with the first values from `initial` (or the first keyframes from `animate` when `initial` is empty) so the server HTML matches the starting appearance. On hydration, components promote to a ready state and animate without flicker.
-
-```svelte
 <motion.div
-    initial={{ opacity: 0, borderRadius: '12px' }}
-    animate={{ opacity: 1 }}
-    style="width: 100px; height: 50px"
+    drag="x"
+    dragControls={controls}
+    dragListener={false}
+    dragConstraints={{ left: -120, right: 120 }}
+    whileDrag={{ scale: 1.03 }}
 />
 ```
 
-Notes:
-
-- Transform properties like `scale`/`rotate` are composed into a single `transform` style during SSR.
-- When `initial` is empty, the first keyframe from `animate` is used to seed SSR styles.
-- `initial` can be `false` to not run on initial
-
-## Utilities
-
-### useTime(id?)
-
-- Returns a Svelte readable store that updates once per animation frame with elapsed milliseconds since creation.
-- If you pass an `id`, calls with the same id return a shared timeline (kept in sync across components).
-- SSR-safe: Returns a static `0` store when `window` is not available.
-
-```svelte
-<script lang="ts">
-    import { motion, useTime } from '$lib'
-    import { derived } from 'svelte/store'
-
-    const time = useTime('global') // shared
-    const rotate = derived(time, (t) => ((t % 4000) / 4000) * 360)
-</script>
-
-<motion.div style={`rotate: ${$rotate}deg`} />
-```
-
-### useAnimationFrame(callback)
-
-- Runs a callback on every animation frame with the current timestamp.
-- The callback receives a `DOMHighResTimeStamp` representing the time elapsed since the time origin.
-- Returns a cleanup function that stops the animation loop.
-- Best used inside a `$effect` to ensure proper cleanup when the component unmounts.
-- SSR-safe: Does nothing and returns a no-op cleanup function when `window` is unavailable.
+## Variants
 
 ```svelte
 <script lang="ts">
-    import { useAnimationFrame } from '$lib'
+    import { motion, type Variants } from '@humanspeak/svelte-motion'
 
-    let cubeRef: HTMLDivElement
+    let open = $state(false)
 
-    $effect(() => {
-        return useAnimationFrame((t) => {
-            if (!cubeRef) return
+    const parent: Variants = {
+        open: { opacity: 1 },
+        closed: { opacity: 0 }
+    }
 
-            const rotate = Math.sin(t / 10000) * 200
-            const y = (1 + Math.sin(t / 1000)) * -50
-            cubeRef.style.transform = `translateY(${y}px) rotateX(${rotate}deg) rotateY(${rotate}deg)`
-        })
-    })
+    const child: Variants = {
+        open: { x: 0, opacity: 1 },
+        closed: { x: -16, opacity: 0 }
+    }
 </script>
 
-<div bind:this={cubeRef}>Animated content</div>
+<motion.ul variants={parent} initial="closed" animate={open ? 'open' : 'closed'}>
+    <motion.li variants={child}>Item A</motion.li>
+    <motion.li variants={child}>Item B</motion.li>
+</motion.ul>
 ```
 
-- Reference: Motion useAnimationFrame docs [motion.dev](https://motion.dev/docs/react-use-animation-frame).
+- String variant keys are resolved from `variants`.
+- Variant state inherits through context.
 
-### useSpring
+## Layout animation
 
-`useSpring` creates a readable store that animates to its latest target with a spring. You can either control it directly with `set`/`jump`, or have it follow another readable (like a time-derived value).
+Single-element FLIP layout animation:
 
 ```svelte
-<script lang="ts">
-    import { useTime, useTransform, useSpring } from '$lib'
-
-    // Track another readable
-    const time = useTime()
-    const blurTarget = useTransform(() => {
-        const phase = ($time % 2000) / 2000
-        return 4 * (0.5 + 0.5 * Math.sin(phase * Math.PI * 2)) // 0..4
-    }, [time])
-    const blur = useSpring(blurTarget, { stiffness: 300 })
-
-    // Or direct control
-    const x = useSpring(0, { stiffness: 300 })
-    // x.set(100) // animates to 100
-    // x.jump(0)  // jumps without animation
-</script>
-
-<div style={`filter: blur(${$blur}px)`} />
+<motion.div layout />
+<motion.div layout="position" />
 ```
 
-- Accepts number or unit string (e.g., `"100vh"`) or a readable source.
-- Returns a readable with `{ set, jump }` methods when used in the browser; SSR-safe on the server.
-- Reference: Motion useSpring docs [motion.dev](https://motion.dev/docs/react-use-spring?platform=react).
-
-### useTransform
-
-`useTransform` creates a derived readable. It supports:
-
-- Range mapping: map a numeric source across input/output ranges with optional `{ clamp, ease, mixer }`.
-- Function form: compute from one or more dependencies.
+- `layout`: translate + scale.
+- `layout="position"`: translate only.
+- Shared layout (`layoutId`) is not implemented yet.
 
-Range mapping example:
+## Utilities
 
-```svelte
-<script lang="ts">
-    import { useTime, useTransform } from '$lib'
-    const time = useTime()
-    // Map 0..4000ms to 0..360deg, unclamped to allow wrap-around
-    const rotate = useTransform(time, [0, 4000], [0, 360], { clamp: false })
-</script>
+- `useAnimationFrame`
+- `useSpring`
+- `useTime`
+- `useTransform`
+- `styleString`
+- `stringifyStyleObject` (deprecated)
+- `createDragControls`
 
-<div style={`rotate: ${$rotate}deg`} />
-```
+The package also re-exports core helpers from `motion` (for example `animate`, `stagger`, `transform`, easings, and utility functions).
 
-Function form example:
+## SSR behavior
 
-```svelte
-<script lang="ts">
-    import { useTransform } from '$lib'
-    // Given stores a and b, compute their sum
-    const add = (a: number, b: number) => a + b
-    // deps are stores; body can access them via $ syntax
-    const total = useTransform(() => add($a, $b), [a, b])
-</script>
+- Initial visual state is rendered server-side from `initial` (or first `animate` keyframe when `initial` is empty).
+- `initial={false}` skips initial enter animation.
+- Hydration path is designed to avoid flicker.
 
-<span>{$total}</span>
-```
+## Verification snapshot
 
-- Reference: Motion useTransform docs [motion.dev](https://motion.dev/docs/react-use-transform?platform=react).
+Validated against current source and test suite (local run):
 
-## Access the underlying element (bind:ref)
+- Unit/component tests: `259 passed`
+- E2E tests: `78 passed`, `1 skipped`
 
-You can bind a ref to access the underlying DOM element rendered by a motion component:
+## Known gaps vs Framer Motion
 
-```svelte
-<script lang="ts">
-    import { motion } from '$lib'
-    let el: HTMLDivElement | null = null
-</script>
+- No shared layout API (`layoutId`, `LayoutGroup`).
+- No pan gesture API (`whilePan`, `onPan*`).
+- `whileInView` does not yet expose Framer-style viewport options.
+- `MotionConfig` currently only provides `transition` defaults.
+- `reducedMotion`, `features`, and `transformPagePoint` are not implemented.
 
-<motion.div bind:ref={el} animate={{ scale: 1.1 }} />
+## External dependencies
 
-{#if el}
-    <!-- use el for measurements, focus, etc. -->
-{/if}
-```
+- `motion`
+- `motion-dom`
 
 ## License
 

package/dist/html/_MotionContainer.svelte

@@ -137,6 +137,7 @@
 
     // Use the provided key for presence tracking
     // When not inside AnimatePresence, use a stable identifier based on component instance
+    // trunk-ignore(eslint/no-useless-assignment): false positive — presenceKey is used throughout the component
     const presenceKey = keyProp ?? `motion-${++keyCounter}`
 
     // Track previous key for key-change detection (simulates React's key-based remounting)

package/dist/index.d.ts

@@ -2,7 +2,9 @@ import AnimatePresence from './components/AnimatePresence.svelte';
 import MotionConfig from './components/MotionConfig.svelte';
 import type { MotionComponents } from './html/index';
 export declare const motion: MotionComponents;
-export { animate, hover } from 'motion';
+export { animate, delay, hover, inView, press, resize, scroll, stagger, transform } from 'motion';
+export { anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, cubicBezier, easeIn, easeInOut, easeOut } from 'motion';
+export { clamp, distance, distance2D, interpolate, mix, pipe, progress, wrap } from 'motion';
 export type { DragAxis, DragConstraints, DragControls, DragInfo, DragTransition, MotionAnimate, MotionInitial, MotionOnDirectionLock, MotionOnDragTransitionEnd, MotionOnInViewEnd, MotionOnInViewStart, MotionTransition, MotionWhileDrag, MotionWhileFocus, MotionWhileHover, MotionWhileInView, MotionWhileTap, Variants } from './types';
 export { useAnimationFrame } from './utils/animationFrame';
 export { createDragControls } from './utils/dragControls';

package/dist/index.js

@@ -3,8 +3,12 @@ import MotionConfig from './components/MotionConfig.svelte';
 import * as html from './html/index';
 // Create the motion object with all components
 export const motion = Object.fromEntries(Object.entries(html).map(([key, component]) => [key.toLowerCase(), component]));
-// Export all types
-export { animate, hover } from 'motion';
+// Re-export core animation functions from motion
+export { animate, delay, hover, inView, press, resize, scroll, stagger, transform } from 'motion';
+// Re-export easing functions
+export { anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, cubicBezier, easeIn, easeInOut, easeOut } from 'motion';
+// Re-export utility functions
+export { clamp, distance, distance2D, interpolate, mix, pipe, progress, wrap } from 'motion';
 export { useAnimationFrame } from './utils/animationFrame';
 export { createDragControls } from './utils/dragControls';
 export { useSpring } from './utils/spring';

package/dist/utils/dragControls.d.ts

@@ -1,5 +1,31 @@
 import type { DragControls } from '../types';
 /**
- * Create imperative controls to start/cancel/stop a drag on a target element.
+ * Creates imperative drag controls for programmatically starting and stopping drags.
+ *
+ * Use this factory to create a controls object that can trigger a drag from external
+ * events (e.g., a button press or keyboard shortcut). Pass the controls to a motion
+ * element via the `dragControls` prop, then call `controls.start(event)` to initiate
+ * the drag as if the user had pressed down on the element.
+ *
+ * @returns {DragControls} An object with `start`, `cancel`, `stop`, and `subscribe` methods.
+ * @see https://motion.dev/docs/react-motion-component#dragging
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { motion, createDragControls } from '@humanspeak/svelte-motion'
+ *
+ *   const controls = createDragControls()
+ *
+ *   function startDrag(event) {
+ *     controls.start(event, { snapToCursor: true })
+ *   }
+ * </script>
+ *
+ * <button onpointerdown={startDrag}>Drag handle</button>
+ * <motion.div drag="x" dragControls={controls}>
+ *   Draggable content
+ * </motion.div>
+ * ```
  */
-export declare function createDragControls(): DragControls;
+export declare const createDragControls: () => DragControls;

package/dist/utils/dragControls.js

@@ -1,7 +1,33 @@
 /**
- * Create imperative controls to start/cancel/stop a drag on a target element.
+ * Creates imperative drag controls for programmatically starting and stopping drags.
+ *
+ * Use this factory to create a controls object that can trigger a drag from external
+ * events (e.g., a button press or keyboard shortcut). Pass the controls to a motion
+ * element via the `dragControls` prop, then call `controls.start(event)` to initiate
+ * the drag as if the user had pressed down on the element.
+ *
+ * @returns {DragControls} An object with `start`, `cancel`, `stop`, and `subscribe` methods.
+ * @see https://motion.dev/docs/react-motion-component#dragging
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { motion, createDragControls } from '@humanspeak/svelte-motion'
+ *
+ *   const controls = createDragControls()
+ *
+ *   function startDrag(event) {
+ *     controls.start(event, { snapToCursor: true })
+ *   }
+ * </script>
+ *
+ * <button onpointerdown={startDrag}>Drag handle</button>
+ * <motion.div drag="x" dragControls={controls}>
+ *   Draggable content
+ * </motion.div>
+ * ```
  */
-export function createDragControls() {
+export const createDragControls = () => {
     let target = null;
     let starter = null;
     let cancelInertia = null;
@@ -28,4 +54,4 @@ export function createDragControls() {
         cancelInertia = c ?? null;
     };
     return controls;
-}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-motion",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "A lightweight animation library for Svelte 5 that provides smooth, hardware-accelerated animations. Features include spring physics, custom easing, and fluid transitions. Built on top of the motion library, it offers a simple API for creating complex animations with minimal code. Perfect for interactive UIs, micro-interactions, and engaging user experiences.",
   "keywords": [
     "svelte",
@@ -53,14 +53,14 @@
     }
   },
   "dependencies": {
-    "motion": "^12.33.0",
-    "motion-dom": "^12.33.0"
+    "motion": "^12.33.2",
+    "motion-dom": "^12.33.2"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
     "@eslint/compat": "^2.0.2",
-    "@eslint/js": "^9.39.2",
-    "@playwright/test": "^1.58.1",
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.58.2",
     "@sveltejs/adapter-auto": "^7.0.0",
     "@sveltejs/kit": "^2.50.2",
     "@sveltejs/package": "^2.5.7",
@@ -72,14 +72,14 @@
     "@tailwindcss/typography": "^0.5.19",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
-    "@types/node": "^25.2.1",
+    "@types/node": "^25.2.2",
     "@vitest/coverage-v8": "^4.0.18",
     "concurrently": "^9.2.1",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-svelte": "3.14.0",
-    "eslint-plugin-unused-imports": "4.3.0",
+    "eslint-plugin-unused-imports": "4.4.1",
     "esm-env": "^1.2.2",
     "globals": "^17.3.0",
     "html-tags": "^5.1.0",
@@ -93,7 +93,7 @@
     "prettier-plugin-tailwindcss": "^0.7.2",
     "publint": "^0.3.17",
     "runed": "0.37.1",
-    "svelte": "^5.49.2",
+    "svelte": "^5.50.0",
     "svelte-check": "^4.3.6",
     "svg-tags": "^1.0.0",
     "tailwind-merge": "^3.4.0",
@@ -104,7 +104,7 @@
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.54.0",
     "vite": "^7.3.1",
-    "vite-tsconfig-paths": "^6.0.5",
+    "vite-tsconfig-paths": "^6.1.0",
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
@@ -135,7 +135,7 @@
     "cs:publish": "pnpm run build && changeset publish",
     "cs:version": "changeset version && pnpm i --lockfile-only",
     "dev": "vite dev",
-    "dev:all": "concurrently -k -n pkg,docs,sitemap -c green,cyan,magenta \"pnpm -w -r --filter @humanspeak/svelte-motion run dev\" \"pnpm --filter docs run dev\" \"pnpm --filter docs run sitemap:watch\"",
+    "dev:all": "concurrently -k -n pkg,docs,sitemap,registry -c green,cyan,magenta,yellow \"pnpm -w -r --filter @humanspeak/svelte-motion run dev\" \"pnpm --filter docs run dev\" \"pnpm --filter docs run sitemap:watch\" \"pnpm --filter docs run registry:watch\"",
     "dev:pkg": "svelte-kit sync && svelte-package --watch",
     "format": "prettier --write .",
     "generate": "tsx scripts/generate-html.ts",