@humanspeak/svelte-motion 0.5.1 → 0.5.3

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

@@ -0,0 +1,22 @@
+import type { ProjectionNode } from '../utils/projection';
+/**
+ * Publish a `ProjectionNode` as the projection parent for descendant
+ * motion components.
+ *
+ * @param node The current component's ProjectionNode, or `null` to
+ *   explicitly clear (rarely needed — Svelte context auto-clears on
+ *   component unmount).
+ */
+export declare const setProjectionParent: (node: ProjectionNode | null) => void;
+/**
+ * Read the ancestor `ProjectionNode` published by the nearest motion
+ * ancestor. Returns `null` when this component is at the root of the
+ * projection tree (or when no motion ancestor exists).
+ *
+ * Must be called BEFORE the current component publishes its own node
+ * via `setProjectionParent` — see the order-of-operations note in this
+ * file's header.
+ *
+ * @returns The parent ProjectionNode, or `null`.
+ */
+export declare const getProjectionParent: () => ProjectionNode | null;

package/dist/components/projection.context.js

@@ -0,0 +1,56 @@
+import { getContext, setContext } from 'svelte';
+/**
+ * Svelte context plumbing for the projection tree.
+ *
+ * Every `motion.*` element creates a `ProjectionNode` at setup time and
+ * publishes it via `setProjectionParent(node)` so descendant motion
+ * elements can pick it up via `getProjectionParent()` and wire themselves
+ * as `node.parent` + register in `node.parent.children`. The tree shape
+ * mirrors the Svelte component tree exactly because Svelte's
+ * `setContext` propagates down through descendants in component-init
+ * order.
+ *
+ * This is the closest analog we have to framer-motion's depth-sorted
+ * FlatTree (`projection/node/create-projection-node.ts`), but without
+ * the global `root` registry — parent/child pointers are sufficient
+ * for the workflows this PR enables (drag↔swap origin compensation,
+ * ancestor-zeroing measure). A global root would only be needed once we
+ * port shared-element `layoutId` morphing onto projection nodes; the
+ * current `layoutId.ts` registry continues to handle that case
+ * independently.
+ *
+ * Order of operations inside a single `motion.*` component (CRITICAL):
+ * 1. Read parent via `getProjectionParent()` BEFORE creating own node.
+ * 2. Construct own node, set `node.parent = parent`.
+ * 3. Publish own node via `setProjectionParent(node)`.
+ * If steps 1 and 3 are reversed, the component sees ITS OWN node as
+ * the parent (because `setContext` shadows from the call site down)
+ * and the tree collapses to a chain of self-references. Same trap
+ * `layoutScroll.context.ts` documents — don't repeat it.
+ */
+const PROJECTION_CONTEXT_KEY = Symbol('svelte-motion:projection-parent');
+/**
+ * Publish a `ProjectionNode` as the projection parent for descendant
+ * motion components.
+ *
+ * @param node The current component's ProjectionNode, or `null` to
+ *   explicitly clear (rarely needed — Svelte context auto-clears on
+ *   component unmount).
+ */
+export const setProjectionParent = (node) => {
+    setContext(PROJECTION_CONTEXT_KEY, node);
+};
+/**
+ * Read the ancestor `ProjectionNode` published by the nearest motion
+ * ancestor. Returns `null` when this component is at the root of the
+ * projection tree (or when no motion ancestor exists).
+ *
+ * Must be called BEFORE the current component publishes its own node
+ * via `setProjectionParent` — see the order-of-operations note in this
+ * file's header.
+ *
+ * @returns The parent ProjectionNode, or `null`.
+ */
+export const getProjectionParent = () => {
+    return getContext(PROJECTION_CONTEXT_KEY) ?? null;
+};

package/dist/html/_MotionContainer.svelte

@@ -17,17 +17,21 @@
         DragControls,
         DragTransition,
         MotionWhileDrag,
-        DragInfo
+        DragInfo,
+        MotionOnPan,
+        MotionOnPanEnd,
+        MotionOnPanSessionStart,
+        MotionOnPanStart
     } from '../types'
     import { isNotEmpty } from '../utils/objects'
     import { sleep } from '../utils/testing'
     import { animate, type AnimationOptions, type DOMKeyframesDefinition } from 'motion'
     import { isPlaywrightEnv, pwLog } from '../utils/log'
-    import { onDestroy, type Snippet } from 'svelte'
+    import { onDestroy, untrack, type Snippet } from 'svelte'
     import { VOID_TAGS } from '../utils/constants'
     import { mergeTransitions, animateWithLifecycle } from '../utils/animation'
     import { attachWhileTap } from '../utils/interaction'
-    import { attachWhileHover } from '../utils/hover'
+    import { attachWhileHover, computeHoverBaseline, splitHoverDefinition } from '../utils/hover'
     import { attachWhileFocus } from '../utils/focus'
     import { attachWhileInView } from '../utils/inView.svelte'
     import {
@@ -35,10 +39,11 @@
         computeFlipTransforms,
         runFlipAnimation,
         setCompositorHints,
-        observeLayoutChanges
+        observeLayoutChanges,
+        type RectLike
     } from '../utils/layout'
     import type { SvelteHTMLElements } from 'svelte/elements'
-    import { mergeInlineStyles } from '../utils/style'
+    import { mergeInlineStyles, extractTransform } from '../utils/style'
     import { isNativelyFocusable } from '../utils/a11y'
     import {
         getAnimatePresenceContext,
@@ -48,7 +53,16 @@
     } from '../utils/presence'
     import { getInitialKeyframes } from '../utils/initial'
     import { attachDrag } from '../utils/drag'
-    import { resolveInitial, resolveAnimate, resolveExit, resolveWhile } from '../utils/variants'
+    import { attachPan, type AttachPanCleanup } from '../utils/pan'
+    import { ProjectionNode } from '../utils/projection'
+    import { getProjectionParent, setProjectionParent } from '../components/projection.context'
+    import {
+        resolveInitial,
+        resolveAnimate,
+        resolveExit,
+        resolveWhile,
+        resolveRestingValues
+    } from '../utils/variants'
     import {
         setVariantContext,
         getVariantContext,
@@ -97,6 +111,11 @@
         whileInView: whileInViewProp,
         viewport: viewportProp,
         whileDrag: whileDragProp,
+        whilePan: whilePanProp,
+        onPanSessionStart: onPanSessionStartProp,
+        onPanStart: onPanStartProp,
+        onPan: onPanProp,
+        onPanEnd: onPanEndProp,
         onHoverStart: onHoverStartProp,
         onHoverEnd: onHoverEndProp,
         onFocusStart: onFocusStartProp,
@@ -124,10 +143,17 @@
         layout: layoutProp,
         layoutId: layoutIdProp,
         layoutScroll: layoutScrollProp,
+        onProjectionUpdate: onProjectionUpdateProp,
         ref: element = $bindable(null),
         ...rest
     }: Props = $props()
     let isLoaded = $state<'mounting' | 'initial' | 'ready' | 'animated'>('mounting')
+    // True once the enter/animate animation has COMPLETED. Until then the
+    // WAAPI animation owns the transform; flipping the inline baseline to
+    // the target mid-run causes a one-frame snap (the target shows through
+    // for the frame the inline changes). We therefore only apply the target
+    // as the inline style once settled — see the style derivation. (#377)
+    let enterAnimationSettled = $state(false)
     let dataPath = $state<number>(-1)
     const motionConfig = $derived(getMotionConfig())
     const reducedMotionState = useReducedMotionConfig()
@@ -181,6 +207,46 @@
         return refs.filter((el): el is HTMLElement => Boolean(el))
     }
 
+    // Projection tree wiring (#379). Capture the parent node BEFORE
+    // publishing our own — same shadowing trap as layoutScroll above.
+    // The node measures through `resolveLayoutScrollAncestors` so its
+    // boxes share the FLIP coordinate space, and zeros ancestor
+    // transforms during measure so nested layout-animated parents don't
+    // corrupt a child's delta.
+    // The user-authored transform, sourced from the `style` prop rather
+    // than the live inline transform — the latter already carries any
+    // transform-type `initial`/`animate` keyframe by the time the node
+    // measures, which would be mistaken for the user's base.
+    const userBaseTransform = $derived(extractTransform(styleProp))
+
+    const projectionParent = getProjectionParent()
+    const projection = new ProjectionNode({
+        parent: projectionParent,
+        getScrollContainers: resolveLayoutScrollAncestors,
+        getBaseTransform: () => userBaseTransform
+    })
+    setProjectionParent(projection)
+
+    // Convert a projection `Box` (ancestor chain reset to base, self
+    // transform stripped, scroll containers compensated) to the
+    // `RectLike` shape `computeFlipTransforms` consumes.
+    const boxToRectLike = (box: {
+        x: { min: number; max: number }
+        y: { min: number; max: number }
+    }): RectLike => ({
+        left: box.x.min,
+        top: box.y.min,
+        width: box.x.max - box.x.min,
+        height: box.y.max - box.y.min
+    })
+
+    // Ancestor-transform-invariant layout measurement for seeding the
+    // FLIP effect's first rect.
+    const measureLayoutRect = (): RectLike | null => {
+        const box = projection.measure()
+        return box ? boxToRectLike(box) : null
+    }
+
     // Get current presence depth (0 = direct child of AnimatePresence, undefined = not in AnimatePresence)
     const presenceDepth = getPresenceDepth()
 
@@ -455,6 +521,7 @@
     const resolvedWhileHover = $derived(resolveWhile(whileHoverProp, variantsProp, effectiveCustom))
     const resolvedWhileFocus = $derived(resolveWhile(whileFocusProp, variantsProp, effectiveCustom))
     const resolvedWhileDrag = $derived(resolveWhile(whileDragProp, variantsProp, effectiveCustom))
+    const resolvedWhilePan = $derived(resolveWhile(whilePanProp, variantsProp, effectiveCustom))
     const resolvedWhileInView = $derived(
         resolveWhile(whileInViewProp, variantsProp, effectiveCustom)
     )
@@ -467,6 +534,17 @@
         )
     )
 
+    // Reduced-motion-filtered animate values used as the inline-style
+    // baseline so an animated value (transforms included) persists after
+    // the WAAPI animation completes (#377). Filtered exactly like
+    // `initialKeyframes` so transforms are stripped under reduced motion.
+    const animateKeyframes = $derived(
+        filterReducedMotionKeyframes(
+            resolvedAnimate as Record<string, unknown> | undefined,
+            reducedMotion
+        )
+    )
+
     // Derived attributes to keep both branches in sync (focusability, data flags, style, class)
     const derivedAttrs = $derived<Record<string, unknown>>({
         ...(rest as Record<string, unknown>),
@@ -505,20 +583,33 @@
             initialKeyframes && 'pathLength' in initialKeyframes && isLoaded === 'mounting'
                 ? `${styleProp || ''};visibility:hidden`
                 : styleProp,
-            // Apply initialKeyframes as inline styles during mounting and initial phases
-            // The animation starts in RAF after 'initial' phase, so we need styles until then
-            // When ready AND we have initialKeyframes: DON'T set any animated properties!
-            // WAAPI is controlling them and inline styles can override the animation
+            // The "from" slot: apply initialKeyframes as inline styles during
+            // the mounting/initial phases (before the WAAPI animation locks
+            // its from-value and we promote to 'ready' — see the lifecycle
+            // around the enter rAF). mergeInlineStyles prefers this slot when
+            // non-empty, so it wins over the animate slot below in these phases.
             isLoaded === 'mounting' || isLoaded === 'initial'
                 ? (initialKeyframes as unknown as Record<string, unknown>)
                 : undefined,
-            // Only use resolvedAnimate as fallback when we DON'T have initialKeyframes
-            // If we have initialKeyframes, the enter animation is running - setting
-            // inline styles to the target values will override the WAAPI animation
-            // Use isNotEmpty to handle empty initial objects (initial: {}) which should fallback
-            isNotEmpty(initialKeyframes)
-                ? undefined
-                : (resolvedAnimate as unknown as Record<string, unknown>)
+            // The "target" slot. Only AFTER the enter animation completes does
+            // the target become the inline baseline, so the element holds it
+            // once WAAPI surrenders the property (default fill:'none' would
+            // otherwise leave transform:none). It must NOT be applied during
+            // the run: flipping the inline value to the target mid-animation
+            // shows the target for the one frame the inline changes (a visible
+            // snap), since WAAPI's composite doesn't override that exact frame.
+            // While the animation runs we keep the original behavior — initial
+            // keyframes own the inline (via the slot above), or, with no
+            // initial, the animate values seed the inline as the from. Resting
+            // values collapse keyframe arrays to their last element
+            // (animate={{x:[0,100,50]}} rests at 50). (#377)
+            enterAnimationSettled
+                ? (resolveRestingValues(
+                      animateKeyframes as DOMKeyframesDefinition | undefined
+                  ) as unknown as Record<string, unknown>)
+                : isNotEmpty(initialKeyframes)
+                  ? undefined
+                  : (animateKeyframes as unknown as Record<string, unknown>)
         ),
         class: classProp
     })
@@ -594,6 +685,172 @@
         }
     })
 
+    /**
+     * Pan-gesture wiring. Active whenever any of `onPanSessionStart`,
+     * `onPanStart`, `onPan`, `onPanEnd`, or `whilePan` is set. Unlike
+     * `drag`, Pan has no constraints / momentum / origin-snap — it's a
+     * pure pointer offset+velocity reporter, useful for swipe-to-dismiss
+     * sheets, custom carousels, and any "tell me what the gesture is
+     * doing right now" interaction. Mirrors framer-motion's `PanGesture`
+     * (packages/framer-motion/src/gestures/pan/index.ts).
+     *
+     * Split into TWO effects:
+     *
+     * 1. `attach` — keyed on `element`, `isLoaded === 'ready'`, presence
+     *    of any pan handler/whilePan, and absence of `drag` (drag takes
+     *    precedence — upstream framer-motion routes drag THROUGH the pan
+     *    gesture internally, so co-attaching pan when drag is on would
+     *    fight transforms). Creates / tears down the underlying
+     *    `attachPan` lifetime once per element-bound interval.
+     *
+     * 2. `swap` — keyed on the user's handler/whilePan props. Calls
+     *    `teardownPan.update(next)` to hot-swap the live handler set
+     *    without destroying the in-flight `PanSession`. Without this
+     *    split, every parent re-render that produces a fresh inline
+     *    arrow handler would tear down the live gesture mid-pan —
+     *    pointer listeners removed, no `onPanEnd` ever fires, whilePan
+     *    keyframes leak.
+     */
+    let teardownPan: AttachPanCleanup | null = null
+    let activeWhilePanKeyframes: Record<string, unknown> | null = null
+    let whilePanBaseline: Record<string, unknown> | null = null
+
+    /**
+     * Boolean presence-check for "is any pan surface active?". Derived
+     * so the attach effect below tracks the *boolean value*, not the
+     * individual handler/whilePan reference identities. A consumer
+     * passing `onPan={(e, i) => ...}` (inline arrow — fresh ref every
+     * render) used to re-trigger the attach effect on every parent
+     * render; with this derived in place, the attach effect only
+     * re-runs when overall presence flips (none → some, some → none).
+     * Per-ref changes flow through the hot-swap effect instead.
+     */
+    const hasAnyPanHandler = $derived(
+        !!onPanProp ||
+            !!onPanStartProp ||
+            !!onPanEndProp ||
+            !!onPanSessionStartProp ||
+            !!resolvedWhilePan
+    )
+
+    const buildPanHandlers = (): {
+        onSessionStart?: MotionOnPanSessionStart
+        onStart: NonNullable<MotionOnPanStart>
+        onMove?: MotionOnPan
+        onEnd: NonNullable<MotionOnPanEnd>
+    } => ({
+        onSessionStart: onPanSessionStartProp,
+        onStart: (event, info) => {
+            if (resolvedWhilePan && element) {
+                // Snapshot the values we'll revert to BEFORE applying — same
+                // `computeHoverBaseline` path the other while-* gestures
+                // (whileHover/whileFocus/drag) use. Covers animatable transform
+                // shorthands (scale, rotate, x, y) AND restores non-animatable
+                // inline writes (cursor, pointer-events) since the baseline
+                // sniffs `animate` → `initial` → computed style → inline style.
+                whilePanBaseline = computeHoverBaseline(element, {
+                    initial: (initialKeyframes ?? {}) as Record<string, unknown>,
+                    animate: (resolvedAnimate ?? {}) as Record<string, unknown>,
+                    whileHover: (resolvedWhilePan ?? {}) as Record<string, unknown>
+                })
+                const { keyframes, transition } = splitHoverDefinition(
+                    resolvedWhilePan as Record<string, unknown>
+                )
+                activeWhilePanKeyframes = keyframes
+                animateWithLifecycle(
+                    element,
+                    keyframes as unknown as DOMKeyframesDefinition,
+                    (transition ?? mergedTransition ?? {}) as unknown as AnimationOptions
+                )
+            }
+            onPanStartProp?.(event, info)
+        },
+        onMove: onPanProp,
+        onEnd: (event, info) => {
+            if (activeWhilePanKeyframes && whilePanBaseline && element) {
+                animateWithLifecycle(
+                    element,
+                    whilePanBaseline as unknown as DOMKeyframesDefinition,
+                    (mergedTransition ?? {}) as unknown as AnimationOptions
+                )
+            }
+            activeWhilePanKeyframes = null
+            whilePanBaseline = null
+            onPanEndProp?.(event, info)
+        }
+    })
+
+    $effect(() => {
+        if (isPlaywright) {
+            pwLog('[motion] pan attach effect run', {
+                hasAnyPanHandler,
+                isLoaded
+            })
+        }
+        if (!element) return
+        // Defer attachment until the element has settled out of the enter
+        // animation phase — matches the gate every other gesture effect
+        // in this file uses (drag, whileTap, whileHover, whileFocus,
+        // whileInView). Without this, a pointerdown during the
+        // initial / mounting phase would attach pan listeners against an
+        // element whose enter animation hasn't committed its baseline.
+        if (isLoaded !== 'ready') return
+        // Drag takes precedence — upstream framer-motion's drag gesture is
+        // implemented ON TOP of Pan, not alongside it. Co-attaching here
+        // would create two competing pointer pipelines fighting for the
+        // same transforms.
+        if (dragProp) return
+        if (!hasAnyPanHandler) return
+
+        // `untrack` so the reactive reads inside `buildPanHandlers`
+        // (onPan*Prop, resolvedWhilePan, initialKeyframes, resolvedAnimate,
+        // mergedTransition) don't register as dependencies of this attach
+        // effect. Otherwise every parent re-render that passes a fresh
+        // inline arrow handler would re-run this effect and call
+        // `teardownPan?.()`, killing the live PanSession mid-gesture.
+        // Handler-ref changes flow exclusively through the hot-swap
+        // effect below, which calls `teardownPan.update(next)` — that's
+        // the path that keeps an in-flight gesture alive across re-renders.
+        teardownPan = attachPan(
+            element,
+            untrack(() => buildPanHandlers())
+        )
+
+        return () => {
+            // Synchronous revert of whilePan + lifecycle dispatch lives in
+            // attachPan.teardown() — the cleanup chain there calls
+            // session.dispatchTerminal(rawHandlers) BEFORE flipping isAlive,
+            // so onPanEnd fires (which runs the revert above) before the
+            // listeners go. dispatchTerminal is idempotent (PanSession's
+            // terminalDispatched flag) so a host that tears down after a
+            // natural release won't replay the lifecycle pair.
+            teardownPan?.()
+            teardownPan = null
+            activeWhilePanKeyframes = null
+            whilePanBaseline = null
+        }
+    })
+
+    /**
+     * Hot-swap effect — propagates handler / whilePan changes onto the
+     * existing PanSession via `teardownPan.update(next)`. Tracked
+     * separately from the attach effect so a fresh inline-arrow handler
+     * reference does NOT trigger teardown + re-attach. Without this
+     * split, every parent re-render mid-gesture would silently kill the
+     * live pan session.
+     */
+    $effect(() => {
+        // Track every prop the handler set depends on so this effect
+        // re-runs when any of them change.
+        void onPanSessionStartProp
+        void onPanStartProp
+        void onPanProp
+        void onPanEndProp
+        void resolvedWhilePan
+        if (!teardownPan) return
+        teardownPan.update(buildPanHandlers())
+    })
+
     /**
      * Execute the actual animation without wait mode checks.
      */
@@ -630,12 +887,20 @@
             transitionAnimate
         })
 
+        // A fresh run owns the transform again until it completes.
+        enterAnimationSettled = false
         animateWithLifecycle(
             element,
             payload as unknown as DOMKeyframesDefinition,
             transitionAnimate as unknown as AnimationOptions,
             (def) => onAnimationStartProp?.(def as unknown as DOMKeyframesDefinition | undefined),
-            (def) => onAnimationCompleteProp?.(def as unknown as DOMKeyframesDefinition | undefined)
+            (def) => {
+                // Now the target is the resting state — promote it to the
+                // inline baseline so it persists after WAAPI surrenders the
+                // property (default fill:'none'). (#377)
+                enterAnimationSettled = true
+                onAnimationCompleteProp?.(def as unknown as DOMKeyframesDefinition | undefined)
+            }
         )
     }
 
@@ -753,26 +1018,65 @@
               : undefined
     )
 
+    // Projection node lifecycle + the `onProjectionUpdate` listener.
+    // Mount once the element binds; seed the baseline layout; unmount on
+    // cleanup. Depends ONLY on `element` — the `onProjectionUpdate`
+    // subscription lives in its own effect below so a change to the
+    // callback's identity re-subscribes WITHOUT tearing the node down
+    // (an unmount would clear latestLayout/children and re-seed the
+    // first commit instead of emitting a real delta).
+    $effect(() => {
+        if (!element) return
+        projection.mount(element)
+        projection.measure() // seed latestLayout so the first commit can diff
+        return () => {
+            projection.unmount()
+        }
+    })
+
+    // Subscribe the consumer's `onProjectionUpdate` callback. Separate
+    // from the mount effect so re-subscribing on a callback-identity
+    // change never unmounts the node.
+    $effect(() => {
+        if (!(element && onProjectionUpdateProp)) return
+        const off = projection.addEventListener('didUpdate', (data) => onProjectionUpdateProp(data))
+        return () => {
+            off()
+        }
+    })
+
     // Minimal layout animation using FLIP when `layout` is enabled.
     // When layout === 'position' we only translate.
     // When layout === true we also scale to smoothly interpolate size changes.
-    let lastRect: DOMRect | null = null
+    let lastRect: RectLike | null = null
     $effect(() => {
         if (!(element && layoutProp && isLoaded === 'ready')) return
 
-        // Initialize last rect on first ready frame
-        lastRect = measureRect(element!, resolveLayoutScrollAncestors())
+        // Initialize last rect on first ready frame. We measure through the
+        // projection node rather than `measureRect` directly so the rect is
+        // ancestor-transform-invariant: the node resets the whole ancestor
+        // chain to its mount-time base while reading, which strips any
+        // motion-applied (FLIP/drag) transform up the tree. Without this a
+        // child re-measures and FLIPs whenever an ancestor's transform
+        // animates, even though the child's own layout never moved. (#379)
+        lastRect = measureLayoutRect()
         // Hint compositor for smoother FLIP transforms
         setCompositorHints(element!, true)
 
         let rafId: number | null = null
         const runFlip = () => {
-            const scrollContainers = resolveLayoutScrollAncestors()
+            // commitLayoutChange does the ancestor-stripped measure, fans
+            // the delta out to `onProjectionUpdate` listeners, AND returns
+            // the freshly-measured box — so the FLIP reuses that single
+            // measurement as `next` instead of walking + transform-resetting
+            // the ancestor chain a second time per frame. (#379)
+            const nextBox = projection.commitLayoutChange()
+            if (!nextBox) return
+            const next = boxToRectLike(nextBox)
             if (!lastRect) {
-                lastRect = measureRect(element!, scrollContainers)
+                lastRect = next
                 return
             }
-            const next = measureRect(element!, scrollContainers)
             const transforms = computeFlipTransforms(lastRect, next, layoutProp ?? false)
             runFlipAnimation(element!, transforms, (mergedTransition ?? {}) as AnimationOptions)
             lastRect = next

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { motion } 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, ReducedMotionConfig, Variants } from './types';
+export type { DragAxis, DragConstraints, DragControls, DragInfo, DragTransition, MotionAnimate, MotionInitial, MotionOnDirectionLock, MotionOnDragTransitionEnd, MotionOnInViewEnd, MotionOnInViewStart, MotionOnProjectionUpdate, MotionTransition, MotionWhileDrag, MotionWhileFocus, MotionWhileHover, MotionWhileInView, MotionWhileTap, ProjectionUpdatePayload, ReducedMotionConfig, Variants } from './types';
 export { useAnimate } from './utils/animate.svelte';
 export type { AnimationScope } from './utils/animate.svelte';
 export { useAnimationFrame } from './utils/animationFrame';

package/dist/types.d.ts

@@ -246,6 +246,68 @@ export type MotionOnDrag = ((event: PointerEvent, info: DragInfo) => void) | und
 export type MotionOnDragEnd = ((event: PointerEvent, info: DragInfo) => void) | undefined;
 export type MotionOnDirectionLock = ((axis: 'x' | 'y') => void) | undefined;
 export type MotionOnDragTransitionEnd = (() => void) | undefined;
+/**
+ * Pan-gesture callbacks. PanInfo is structurally identical to DragInfo
+ * (`{ point, delta, offset, velocity }`), so we re-use the type rather
+ * than ship a parallel alias.
+ */
+export type MotionOnPanSessionStart = ((event: PointerEvent, info: DragInfo) => void) | undefined;
+export type MotionOnPanStart = ((event: PointerEvent, info: DragInfo) => void) | undefined;
+export type MotionOnPan = ((event: PointerEvent, info: DragInfo) => void) | undefined;
+export type MotionOnPanEnd = ((event: PointerEvent, info: DragInfo) => void) | undefined;
+/**
+ * Payload delivered to `onProjectionUpdate`. Re-declared structurally
+ * here (rather than imported from `projection.ts`) so `types.ts`
+ * stays dependency-free at the type layer. `delta.x/y.translate` is the
+ * px shift the element's layout box moved between the pre-change
+ * snapshot and the post-change measurement; `hasLayoutChanged` is false
+ * only when the delta is within a tight float epsilon (±0.01px
+ * translate), so even a sub-pixel real move is reported as a change.
+ */
+export type ProjectionUpdatePayload = {
+    layout: {
+        x: {
+            min: number;
+            max: number;
+        };
+        y: {
+            min: number;
+            max: number;
+        };
+    };
+    snapshot: {
+        x: {
+            min: number;
+            max: number;
+        };
+        y: {
+            min: number;
+            max: number;
+        };
+    };
+    delta: {
+        x: {
+            translate: number;
+            scale: number;
+            origin: number;
+            originPoint: number;
+        };
+        y: {
+            translate: number;
+            scale: number;
+            origin: number;
+            originPoint: number;
+        };
+    };
+    hasLayoutChanged: boolean;
+};
+/**
+ * Fires after each layout change to a `motion.*` element that has
+ * `layout` enabled, with the FLIP delta between the pre- and
+ * post-change layout boxes. Mirrors framer-motion's `onLayoutMeasure`
+ * surface. Wired through the element's internal `ProjectionNode`.
+ */
+export type MotionOnProjectionUpdate = ((data: ProjectionUpdatePayload) => void) | undefined;
 export type DragAxis = boolean | 'x' | 'y';
 export type DragConstraints = {
     top?: number;
@@ -319,6 +381,8 @@ export type MotionProps = {
     whileFocus?: MotionWhileFocus;
     /** Drag interaction animation */
     whileDrag?: MotionWhileDrag;
+    /** Pan interaction animation — applied while a pan gesture is active */
+    whilePan?: MotionWhileDrag;
     /** In-view interaction animation - animates when element enters viewport */
     whileInView?: MotionWhileInView;
     /** IntersectionObserver options for `whileInView` (once / root / margin / amount) */
@@ -355,12 +419,26 @@ export type MotionProps = {
     onDirectionLock?: MotionOnDirectionLock;
     /** Called when the post-drag transition finishes on all axes */
     onDragTransitionEnd?: MotionOnDragTransitionEnd;
+    /** Pan gesture: fires once per pointerdown, before threshold */
+    onPanSessionStart?: MotionOnPanSessionStart;
+    /** Pan gesture: fires the first frame after offset crosses threshold */
+    onPanStart?: MotionOnPanStart;
+    /** Pan gesture: fires once per frame while panning */
+    onPan?: MotionOnPan;
+    /** Pan gesture: fires on pointerup if onPanStart ever fired */
+    onPanEnd?: MotionOnPanEnd;
     /** Inline styles */
     style?: string;
     /** CSS classes */
     class?: string;
     /** Enable FLIP layout animations; "position" limits to translation only */
     layout?: boolean | 'position';
+    /**
+     * Fires after each `layout`-driven change with the FLIP delta from
+     * the element's internal projection node. Mirrors framer-motion's
+     * `onLayoutMeasure`. Requires `layout` to be enabled.
+     */
+    onProjectionUpdate?: MotionOnProjectionUpdate;
     /** Shared layout animation identifier. Elements with matching layoutId animate between positions. */
     layoutId?: string;
     /**