@humanspeak/svelte-motion 0.1.20 → 0.1.22

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2024-2025 Humanspeak, Inc.
+Copyright (c) 2024-2026 Humanspeak, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/dist/html/_MotionContainer.svelte

@@ -19,7 +19,7 @@
     import { sleep } from '../utils/testing'
     import { animate, type AnimationOptions, type DOMKeyframesDefinition } from 'motion'
     import { isPlaywrightEnv, pwLog } from '../utils/log'
-    import { type Snippet } from 'svelte'
+    import { onDestroy, type Snippet } from 'svelte'
     import { VOID_TAGS } from '../utils/constants'
     import { mergeTransitions, animateWithLifecycle } from '../utils/animation'
     import { attachWhileTap } from '../utils/interaction'
@@ -37,7 +37,6 @@
     import { mergeInlineStyles } from '../utils/style'
     import { isNativelyFocusable } from '../utils/a11y'
     import {
-        usePresence,
         getAnimatePresenceContext,
         getPresenceDepth,
         setPresenceDepth
@@ -154,10 +153,20 @@
         )
     )
 
-    // Register with AnimatePresence so onDestroy triggers exit cloning
+    // Register onDestroy at component level (guaranteed to work in Svelte 5)
+    // usePresence() cannot be called inside $effect because it uses getContext() and onDestroy(),
+    // which must be called during component initialization.
+    if (context) {
+        onDestroy(() => {
+            pwLog('[presence] onDestroy triggered', { key: presenceKey })
+            context.unregisterChild(presenceKey)
+        })
+    }
+
+    // Reactively update registration when element/exit/transition props change
     $effect(() => {
-        if (element) {
-            usePresence(
+        if (element && context && resolvedExit) {
+            context.registerChild(
                 presenceKey,
                 element,
                 resolvedExit,
@@ -602,7 +611,7 @@
         }
     })
 
-    // whileTap handling without relying on motion.press (fallback compatible)
+    // whileTap handling via motion-dom's press()
     $effect(() => {
         if (!(element && isLoaded === 'ready' && isNotEmpty(whileTapProp))) return
         return attachWhileTap(

package/dist/utils/interaction.d.ts

@@ -15,14 +15,15 @@ export declare const buildTapResetRecord: (initial: Record<string, unknown>, ani
 /**
  * Attach whileTap interactions to an element.
  *
- * On `pointerdown`, animates to the whileTap definition. On `pointerup` or
- * `pointercancel`, restores overlapping keys back to the animate-or-initial
- * baseline.
+ * Uses motion-dom's `press()` for pointer and Enter-key handling (with
+ * primary-pointer filtering, drag interop, and global release listeners).
+ * Space-key support is added manually since `press()` only handles Enter.
  *
  * @param el Element to attach listeners to.
  * @param whileTap While-tap keyframe record.
  * @param initial Initial keyframe record.
  * @param animateDef Animate keyframe record.
+ * @param callbacks Optional lifecycle callbacks.
  * @return Cleanup function to remove listeners.
  */
 export declare const attachWhileTap: (el: HTMLElement, whileTap: Record<string, unknown> | undefined, initial?: Record<string, unknown>, animateDef?: Record<string, unknown>, callbacks?: {

package/dist/utils/interaction.js

@@ -1,7 +1,7 @@
 import { isHoverCapable, splitHoverDefinition } from './hover';
 import { pwLog } from './log';
-import { parseMatrixScale } from './transform';
 import { animate } from 'motion';
+import { press } from 'motion-dom';
 /**
  * Build a reset record for whileTap on pointerup.
  *
@@ -81,122 +81,60 @@ export const buildTapResetRecord = (initial, animateDef, whileTap) => {
 /**
  * Attach whileTap interactions to an element.
  *
- * On `pointerdown`, animates to the whileTap definition. On `pointerup` or
- * `pointercancel`, restores overlapping keys back to the animate-or-initial
- * baseline.
+ * Uses motion-dom's `press()` for pointer and Enter-key handling (with
+ * primary-pointer filtering, drag interop, and global release listeners).
+ * Space-key support is added manually since `press()` only handles Enter.
  *
  * @param el Element to attach listeners to.
  * @param whileTap While-tap keyframe record.
  * @param initial Initial keyframe record.
  * @param animateDef Animate keyframe record.
+ * @param callbacks Optional lifecycle callbacks.
  * @return Cleanup function to remove listeners.
  */
 export const attachWhileTap = (el, whileTap, initial, animateDef, callbacks) => {
     if (!whileTap)
         return () => { };
-    let keyboardActive = false;
-    let activePointerId = null;
-    let tapCtl = null;
-    let resetCtl = null;
-    let baselineTransform = null;
-    const safetyGuards = typeof window !== 'undefined' &&
-        window['SM_GESTURE_SAFE_GUARDS'] === true;
-    const computeCanonicalBaseline = () => {
-        // Prefer animateDef > initial for transform-relevant keys when present, else computed style
-        const scaleKeys = ['scale', 'scaleX', 'scaleY'];
-        const from = (def) => def && scaleKeys.some((k) => Object.prototype.hasOwnProperty.call(def, k));
-        if (from(animateDef)) {
-            // If animate has scale keys, prefer matrix from current style (already at animate) as baseline
-            const t = getComputedStyle(el).transform;
-            return t && t !== 'none' ? t : 'none';
+    pwLog('[tap] attached', { whileTap, initial, animateDef, hasHoverDef: !!callbacks?.hoverDef });
+    // Tween transitions prevent spring velocity accumulation during rapid
+    // press/release cycles. Cubic-bezier with slight overshoot mimics the
+    // reference spring feel (~275ms settle, ~7% overshoot).
+    const pressTransition = { duration: 0.25, ease: [0.22, 1.1, 0.36, 1] };
+    const releaseTransition = { duration: 0.3, ease: [0.22, 1.1, 0.36, 1] };
+    // Single control tracking whatever gesture animation is in-flight
+    // (tap, reset, or hover reapply). Every new gesture cancels the previous.
+    let gestureCtl = null;
+    const cancelGesture = () => {
+        if (gestureCtl) {
+            pwLog('[tap] cancel-gesture', {
+                currentTime: gestureCtl.currentTime,
+                transform: getComputedStyle(el).transform
+            });
         }
-        if (from(initial)) {
-            const t = getComputedStyle(el).transform;
-            return t && t !== 'none' ? t : 'none';
+        try {
+            // Use stop() instead of cancel(). cancel() reverts to the
+            // pre-animation state (causing a visual snap), while stop()
+            // holds the element at its current interpolated position.
+            gestureCtl?.stop();
         }
-        const t = getComputedStyle(el).transform;
-        return t || 'none';
-    };
-    const handlePointerDown = (event) => {
-        // Capture pointer so we receive up/cancel even if pointer leaves the element
-        if (typeof event.pointerId === 'number') {
-            try {
-                if ('setPointerCapture' in el) {
-                    el.setPointerCapture(event.pointerId);
-                }
-            }
-            catch {
-                // noop if not supported
-            }
-            activePointerId = event.pointerId;
-            // Attach global listeners to catch off-element releases (even if capture unsupported)
-            window.addEventListener('pointerup', handlePointerUp);
-            window.addEventListener('pointercancel', handlePointerCancel);
-            document.addEventListener('pointerup', handlePointerUp);
-            document.addEventListener('pointercancel', handlePointerCancel);
+        catch {
+            // ignore
         }
-        const incomingScale = parseMatrixScale(getComputedStyle(el).transform) ?? 1;
-        pwLog('[tap] pointerdown', {
+        gestureCtl = null;
+    };
+    const animateTap = () => {
+        pwLog('[tap] animate-tap', {
             w: el.getBoundingClientRect().width,
             h: el.getBoundingClientRect().height,
             transform: getComputedStyle(el).transform,
-            incomingScale,
-            resetCtlActive: resetCtl !== null
+            whileTap,
+            gestureActive: gestureCtl !== null
         });
-        // Cancel any in-flight reset and rebase to canonical baseline
-        try {
-            resetCtl?.cancel();
-        }
-        catch {
-            // ignore
-        }
-        resetCtl = null;
-        if (!baselineTransform)
-            baselineTransform = computeCanonicalBaseline();
-        // Apply baseline immediately before whileTap
-        if (baselineTransform && baselineTransform !== 'none')
-            el.style.transform = baselineTransform;
-        else
-            el.style.removeProperty('transform');
-        // Software limit: if incoming scale is runaway, skip whileTap this cycle and force settle
-        const baselineScale = parseMatrixScale(baselineTransform) ?? 1;
-        const scaleDiff = Math.abs(incomingScale - baselineScale);
-        const tolerance = 0.02; // 2% threshold
-        pwLog('[tap] scale-check', { incomingScale, baselineScale, scaleDiff, tolerance });
-        if (scaleDiff > tolerance) {
-            pwLog('[tap] runaway-detected-skip-whileTap', {
-                incomingScale,
-                baselineScale,
-                scaleDiff
-            });
-            callbacks?.onTapStart?.();
-            tapCtl = null;
-            return;
-        }
-        pwLog('[tap] whileTap-def', whileTap);
+        cancelGesture();
         callbacks?.onTapStart?.();
-        // Cancel any existing tap animation before starting a new one
-        try {
-            tapCtl?.cancel();
-        }
-        catch {
-            // ignore cancellation errors
-        }
-        tapCtl = animate(el, whileTap);
-        // Safety clamp for runaway scale
-        if (safetyGuards) {
-            const a = parseMatrixScale(getComputedStyle(el).transform) ??
-                parseMatrixScale(el.style.transform);
-            if (a !== null && Math.abs(a) > 8) {
-                if (baselineTransform && baselineTransform !== 'none')
-                    el.style.transform = baselineTransform;
-                else
-                    el.style.removeProperty('transform');
-                pwLog('[tap] clamp-on-down', { a, restored: getComputedStyle(el).transform });
-            }
-        }
-        Promise.resolve(tapCtl.finished)
-            .then(() => pwLog('[tap] applied', {
+        gestureCtl = animate(el, whileTap, pressTransition);
+        Promise.resolve(gestureCtl?.finished)
+            .then(() => pwLog('[tap] tap-applied', {
             w: el.getBoundingClientRect().width,
             h: el.getBoundingClientRect().height,
             transform: getComputedStyle(el).transform
@@ -204,210 +142,130 @@ export const attachWhileTap = (el, whileTap, initial, animateDef, callbacks) =>
             .catch(() => { });
     };
     const reapplyHoverIfActive = () => {
-        if (!callbacks?.hoverDef)
+        if (!callbacks?.hoverDef) {
+            pwLog('[tap] hover-reapply-skip', { reason: 'no hoverDef' });
             return false;
-        if (!isHoverCapable())
+        }
+        if (!isHoverCapable()) {
+            pwLog('[tap] hover-reapply-skip', { reason: 'not hover-capable' });
             return false;
+        }
         try {
-            if (!el.matches(':hover'))
+            if (!el.matches(':hover')) {
+                pwLog('[tap] hover-reapply-skip', { reason: 'not :hover' });
                 return false;
+            }
         }
         catch {
+            pwLog('[tap] hover-reapply-skip', { reason: 'matches threw' });
             return false;
         }
-        const { keyframes, transition } = splitHoverDefinition(callbacks.hoverDef);
-        animate(el, keyframes, (transition ?? callbacks.hoverFallbackTransition));
+        const { keyframes } = splitHoverDefinition(callbacks.hoverDef);
+        pwLog('[tap] hover-reapply', {
+            keyframes,
+            transform: getComputedStyle(el).transform,
+            w: el.getBoundingClientRect().width
+        });
+        gestureCtl = animate(el, keyframes, releaseTransition);
+        Promise.resolve(gestureCtl?.finished)
+            .then(() => pwLog('[tap] hover-reapply-done', {
+            w: el.getBoundingClientRect().width,
+            transform: getComputedStyle(el).transform
+        }))
+            .catch(() => { });
         return true;
     };
-    const handlePointerUp = (event) => {
-        if (typeof event.pointerId === 'number' && activePointerId !== null) {
-            if (event.pointerId !== activePointerId)
-                return;
-            try {
-                if ('releasePointerCapture' in el)
-                    el.releasePointerCapture(event.pointerId);
-            }
-            catch {
-                // noop
-            }
-            activePointerId = null;
-            window.removeEventListener('pointerup', handlePointerUp);
-            window.removeEventListener('pointercancel', handlePointerCancel);
-            document.removeEventListener('pointerup', handlePointerUp);
-            document.removeEventListener('pointercancel', handlePointerCancel);
-        }
-        callbacks?.onTap?.();
-        pwLog('[tap] pointerup', {
+    const animateReset = (success) => {
+        pwLog('[tap] animate-reset', {
+            success,
             w: el.getBoundingClientRect().width,
             h: el.getBoundingClientRect().height,
-            transform: getComputedStyle(el).transform
+            transform: getComputedStyle(el).transform,
+            gestureActive: gestureCtl !== null
         });
-        if (!whileTap)
-            return;
-        // Ensure the whileTap animation can't finish and overwrite our reset
-        try {
-            tapCtl?.cancel();
-        }
-        catch {
-            // ignore
-        }
-        tapCtl = null;
-        const style = el.style;
-        if (baselineTransform && baselineTransform !== 'none')
-            style.transform = baselineTransform;
+        if (success)
+            callbacks?.onTap?.();
         else
-            style.removeProperty('transform');
-        pwLog('[tap] transform-restored', {
-            baseline: baselineTransform,
-            now: getComputedStyle(el).transform
-        });
+            callbacks?.onTapCancel?.();
+        cancelGesture();
+        // If still hovering after a successful tap, animate to hover state
+        if (success && reapplyHoverIfActive())
+            return;
         const resetRecord = buildTapResetRecord(initial ?? {}, animateDef ?? {}, whileTap ?? {});
         pwLog('[tap] reset-record', resetRecord);
         if (Object.keys(resetRecord).length > 0) {
-            // Use a very fast transition to minimize overshoot window for re-entrancy
-            const resetTransition = {
-                duration: 0.08
-            };
-            resetCtl = animate(el, resetRecord, resetTransition);
-            Promise.resolve(resetCtl.finished)
-                .then(() => pwLog('[tap] reset-finished', {
+            gestureCtl = animate(el, resetRecord, releaseTransition);
+            Promise.resolve(gestureCtl?.finished)
+                .then(() => pwLog('[tap] reset-done', {
                 w: el.getBoundingClientRect().width,
                 h: el.getBoundingClientRect().height,
                 transform: getComputedStyle(el).transform
             }))
-                .catch(() => { })
-                .finally(() => {
-                resetCtl = null;
-            });
+                .catch(() => { });
         }
-        // After baseline and reset committed, optionally reapply hover on next frame
-        queueMicrotask(() => {
-            reapplyHoverIfActive();
-        });
     };
-    const handlePointerCancel = (event) => {
-        if (typeof event.pointerId === 'number' && activePointerId !== null) {
-            if (event.pointerId !== activePointerId)
-                return;
-            try {
-                if ('releasePointerCapture' in el)
-                    el.releasePointerCapture(event.pointerId);
-            }
-            catch {
-                // noop
-            }
-            activePointerId = null;
-            window.removeEventListener('pointerup', handlePointerUp);
-            window.removeEventListener('pointercancel', handlePointerCancel);
-            document.removeEventListener('pointerup', handlePointerUp);
-            document.removeEventListener('pointercancel', handlePointerCancel);
-        }
-        callbacks?.onTapCancel?.();
-        pwLog('[tap] cancel', {
+    // Use press() for pointer + Enter key handling
+    const cancelPress = press(el, () => {
+        pwLog('[tap] press-start', {
             w: el.getBoundingClientRect().width,
-            h: el.getBoundingClientRect().height
+            transform: getComputedStyle(el).transform
         });
-        // On cancel, also restore baseline if available
-        if (initial || animateDef) {
-            try {
-                tapCtl?.cancel();
-            }
-            catch {
-                // ignore
-            }
-            tapCtl = null;
-            const resetRecord = buildTapResetRecord(initial ?? {}, animateDef ?? {}, whileTap ?? {});
-            if (Object.keys(resetRecord).length > 0) {
-                animate(el, resetRecord);
-            }
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (!(e.key === 'Enter' || e.key === ' ' || e.key === 'Space'))
+        animateTap();
+        return (_endEvent, { success }) => {
+            pwLog('[tap] press-end', {
+                success,
+                w: el.getBoundingClientRect().width,
+                transform: getComputedStyle(el).transform
+            });
+            animateReset(success);
+        };
+    });
+    // Add Space key support (press() only handles Enter)
+    let spaceActive = false;
+    const onKeyDown = (e) => {
+        if (e.key !== ' ' && e.key !== 'Space')
             return;
-        // Prevent page scroll/activation for Space
-        if (e.key === ' ' || e.key === 'Space')
-            e.preventDefault?.();
-        if (keyboardActive)
+        e.preventDefault();
+        if (spaceActive)
             return;
-        keyboardActive = true;
-        callbacks?.onTapStart?.();
-        pwLog('[tap] keydown', {
-            key: e.key,
+        spaceActive = true;
+        pwLog('[tap] space-down', {
             w: el.getBoundingClientRect().width,
-            h: el.getBoundingClientRect().height
+            transform: getComputedStyle(el).transform
         });
-        try {
-            tapCtl?.cancel();
-        }
-        catch {
-            // ignore
-        }
-        tapCtl = animate(el, whileTap);
+        animateTap();
     };
-    const handleKeyUp = (e) => {
-        if (!(e.key === 'Enter' || e.key === ' ' || e.key === 'Space'))
+    const onKeyUp = (e) => {
+        if (e.key !== ' ' && e.key !== 'Space')
             return;
-        // Prevent page scroll/activation for Space
-        if (e.key === ' ' || e.key === 'Space')
-            e.preventDefault?.();
-        if (!keyboardActive)
+        e.preventDefault();
+        if (!spaceActive)
             return;
-        keyboardActive = false;
-        callbacks?.onTap?.();
-        pwLog('[tap] keyup', {
-            key: e.key,
+        spaceActive = false;
+        pwLog('[tap] space-up', {
             w: el.getBoundingClientRect().width,
-            h: el.getBoundingClientRect().height
+            transform: getComputedStyle(el).transform
         });
-        if (reapplyHoverIfActive())
-            return;
-        if (initial || animateDef) {
-            try {
-                tapCtl?.cancel();
-            }
-            catch {
-                // ignore
-            }
-            tapCtl = null;
-            const resetRecord = buildTapResetRecord(initial ?? {}, animateDef ?? {}, whileTap ?? {});
-            if (Object.keys(resetRecord).length > 0) {
-                animate(el, resetRecord);
-            }
-        }
+        animateReset(true);
     };
-    const handleBlur = () => {
-        if (!keyboardActive)
+    const onBlur = () => {
+        if (!spaceActive)
             return;
-        keyboardActive = false;
-        callbacks?.onTapCancel?.();
+        spaceActive = false;
         pwLog('[tap] blur', {
             w: el.getBoundingClientRect().width,
-            h: el.getBoundingClientRect().height
+            transform: getComputedStyle(el).transform
         });
-        if (initial || animateDef) {
-            const resetRecord = buildTapResetRecord(initial ?? {}, animateDef ?? {}, whileTap ?? {});
-            if (Object.keys(resetRecord).length > 0) {
-                animate(el, resetRecord);
-            }
-        }
+        animateReset(false);
     };
-    el.addEventListener('pointerdown', handlePointerDown);
-    el.addEventListener('pointerup', handlePointerUp);
-    el.addEventListener('pointercancel', handlePointerCancel);
-    el.addEventListener('keydown', handleKeyDown);
-    el.addEventListener('keyup', handleKeyUp);
-    el.addEventListener('blur', handleBlur);
+    el.addEventListener('keydown', onKeyDown);
+    el.addEventListener('keyup', onKeyUp);
+    el.addEventListener('blur', onBlur);
     return () => {
-        el.removeEventListener('pointerdown', handlePointerDown);
-        el.removeEventListener('pointerup', handlePointerUp);
-        el.removeEventListener('pointercancel', handlePointerCancel);
-        window.removeEventListener('pointerup', handlePointerUp);
-        window.removeEventListener('pointercancel', handlePointerCancel);
-        document.removeEventListener('pointerup', handlePointerUp);
-        document.removeEventListener('pointercancel', handlePointerCancel);
-        el.removeEventListener('keydown', handleKeyDown);
-        el.removeEventListener('keyup', handleKeyUp);
-        el.removeEventListener('blur', handleBlur);
+        pwLog('[tap] cleanup');
+        cancelPress();
+        el.removeEventListener('keydown', onKeyDown);
+        el.removeEventListener('keyup', onKeyUp);
+        el.removeEventListener('blur', onBlur);
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-motion",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "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,58 +53,58 @@
     }
   },
   "dependencies": {
-    "motion": "^12.33.2",
-    "motion-dom": "^12.33.2"
+    "motion": "^12.34.2",
+    "motion-dom": "^12.34.2"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
     "@eslint/compat": "^2.0.2",
     "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.58.2",
-    "@sveltejs/adapter-auto": "^7.0.0",
-    "@sveltejs/kit": "^2.50.2",
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/kit": "^2.52.2",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.11",
-    "@tailwindcss/postcss": "^4.1.18",
+    "@tailwindcss/postcss": "^4.2.0",
     "@tailwindcss/typography": "^0.5.19",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
-    "@types/node": "^25.2.2",
+    "@types/node": "^25.3.0",
     "@vitest/coverage-v8": "^4.0.18",
     "concurrently": "^9.2.1",
-    "eslint": "^9.39.2",
+    "eslint": "^10.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-svelte": "3.14.0",
+    "eslint-plugin-svelte": "3.15.0",
     "eslint-plugin-unused-imports": "4.4.1",
     "esm-env": "^1.2.2",
     "globals": "^17.3.0",
     "html-tags": "^5.1.0",
     "html-void-elements": "^3.0.0",
     "husky": "^9.1.7",
-    "jsdom": "^28.0.0",
+    "jsdom": "^28.1.0",
     "prettier": "^3.8.1",
     "prettier-plugin-organize-imports": "^4.3.0",
     "prettier-plugin-sort-json": "^4.2.0",
-    "prettier-plugin-svelte": "^3.4.1",
+    "prettier-plugin-svelte": "^3.5.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "publint": "^0.3.17",
     "runed": "0.37.1",
-    "svelte": "^5.50.0",
-    "svelte-check": "^4.3.6",
+    "svelte": "^5.53.0",
+    "svelte-check": "^4.4.1",
     "svg-tags": "^1.0.0",
-    "tailwind-merge": "^3.4.0",
+    "tailwind-merge": "^3.5.0",
     "tailwind-variants": "^3.2.2",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.0",
     "tailwindcss-animate": "^1.0.7",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.54.0",
+    "typescript-eslint": "^8.56.0",
     "vite": "^7.3.1",
-    "vite-tsconfig-paths": "^6.1.0",
+    "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.0.18"
   },
   "peerDependencies": {