@humanspeak/svelte-motion 0.1.22 → 0.1.24

package/README.md

@@ -231,9 +231,11 @@ Single-element FLIP layout animation:
 ## Utilities
 
 - `useAnimationFrame`
+- `useMotionTemplate`
 - `useSpring`
 - `useTime`
 - `useTransform`
+- `useVelocity`
 - `styleString`
 - `stringifyStyleObject` (deprecated)
 - `createDragControls`

package/dist/html/_MotionContainer.svelte

@@ -140,10 +140,10 @@
     const presenceKey = keyProp ?? `motion-${++keyCounter}`
 
     // Track previous key for key-change detection (simulates React's key-based remounting)
-    // Using $state for idiomatic Svelte 5 reactivity
-    let keyTrackerPrev = $state(keyProp)
-    let keyTrackerIsTransitioning = $state(false)
-    let keyTransitionStopped = $state(false)
+    // Plain variables (not $state) to avoid self-triggering the key-change $effect
+    let keyTrackerPrev = keyProp
+    let keyTrackerIsTransitioning = false
+    let keyTransitionStopped = false
 
     // Compute merged transition without mutating props to avoid effect write loops
     const mergedTransition = $derived<AnimationOptions>(
@@ -699,6 +699,14 @@
             currentKey === keyTrackerPrev ||
             keyTrackerPrev === undefined
         ) {
+            pwLog('[motion] key effect: early return', {
+                currentKey,
+                keyTrackerPrev,
+                isLoaded,
+                hasElement: !!element,
+                hasContext: !!context,
+                keyTrackerIsTransitioning
+            })
             // Update prev for next comparison
             if (currentKey !== keyTrackerPrev) {
                 keyTrackerPrev = currentKey
@@ -713,6 +721,7 @@
 
         // Mark as transitioning to prevent re-entry
         keyTrackerIsTransitioning = true
+        keyTransitionStopped = false
         keyTrackerPrev = currentKey
 
         // Run the key transition sequence
@@ -732,6 +741,11 @@
                     ).finished
                 }
 
+                pwLog('[motion] key transition: exit done', {
+                    keyTransitionStopped,
+                    hasElement: !!element
+                })
+
                 // Check if component was unmounted during exit animation
                 if (keyTransitionStopped || !element) return
 
@@ -752,6 +766,7 @@
                 pwLog('[motion] key transition: running enter animation')
                 runAnimation()
             } finally {
+                pwLog('[motion] key transition: finally', { keyTransitionStopped })
                 if (!keyTransitionStopped) {
                     keyTrackerIsTransitioning = false
                 }
@@ -762,6 +777,7 @@
 
         // Cleanup on unmount
         return () => {
+            pwLog('[motion] key effect: cleanup, stopping transition')
             keyTransitionStopped = true
         }
     })

package/dist/index.d.ts

@@ -8,7 +8,9 @@ export { clamp, distance, distance2D, interpolate, mix, pipe, progress, wrap } f
 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';
+export { useMotionTemplate } from './utils/motionTemplate';
 export { useSpring } from './utils/spring';
+export { useVelocity } from './utils/velocity';
 /**
  * @deprecated Use `styleString` instead for reactive styles with automatic unit handling.
  */

package/dist/index.js

@@ -11,7 +11,9 @@ export { anticipate, backIn, backInOut, backOut, circIn, circInOut, circOut, cub
 export { clamp, distance, distance2D, interpolate, mix, pipe, progress, wrap } from 'motion';
 export { useAnimationFrame } from './utils/animationFrame';
 export { createDragControls } from './utils/dragControls';
+export { useMotionTemplate } from './utils/motionTemplate';
 export { useSpring } from './utils/spring';
+export { useVelocity } from './utils/velocity';
 /**
  * @deprecated Use `styleString` instead for reactive styles with automatic unit handling.
  */

package/dist/utils/motionTemplate.d.ts

@@ -0,0 +1,21 @@
+import { type Readable } from 'svelte/store';
+/**
+ * Tagged template literal that creates a derived store from interpolated
+ * readable stores. When any input store changes, the resulting store
+ * recomputes the template string.
+ *
+ * SSR-safe: `derived` from svelte/store works on the server.
+ *
+ * @example
+ * ```ts
+ * const blur = useSpring(0)
+ * const filter = useMotionTemplate`blur(${blur}px)`
+ * // $filter → "blur(0px)"
+ * ```
+ *
+ * @param strings Static template string parts.
+ * @param values Readable stores to interpolate.
+ * @returns A readable store of the composed string.
+ * @see https://motion.dev/docs/react-use-motion-template
+ */
+export declare const useMotionTemplate: (strings: TemplateStringsArray, ...values: Readable<number | string>[]) => Readable<string>;

package/dist/utils/motionTemplate.js

@@ -0,0 +1,33 @@
+import { derived } from 'svelte/store';
+/**
+ * Tagged template literal that creates a derived store from interpolated
+ * readable stores. When any input store changes, the resulting store
+ * recomputes the template string.
+ *
+ * SSR-safe: `derived` from svelte/store works on the server.
+ *
+ * @example
+ * ```ts
+ * const blur = useSpring(0)
+ * const filter = useMotionTemplate`blur(${blur}px)`
+ * // $filter → "blur(0px)"
+ * ```
+ *
+ * @param strings Static template string parts.
+ * @param values Readable stores to interpolate.
+ * @returns A readable store of the composed string.
+ * @see https://motion.dev/docs/react-use-motion-template
+ */
+export const useMotionTemplate = (strings, ...values) => {
+    if (values.length === 0)
+        return derived([], () => strings[0] ?? '');
+    return derived(values, (current) => {
+        let result = '';
+        for (let i = 0; i < strings.length; i++) {
+            result += strings[i] ?? '';
+            if (i < current.length)
+                result += String(current[i]);
+        }
+        return result;
+    });
+};

package/dist/utils/velocity.d.ts

@@ -0,0 +1,15 @@
+import { type Readable } from 'svelte/store';
+/**
+ * Creates a readable store that tracks the velocity of a source store's value.
+ *
+ * Uses `motionValue` from motion-dom for built-in velocity tracking with
+ * timestamps. Polls velocity via `requestAnimationFrame` and settles to 0
+ * when movement stops.
+ *
+ * SSR-safe: returns a static `readable(0)` on the server.
+ *
+ * @param source A readable store of numeric or unit-string values.
+ * @returns A readable store of the current velocity in units/second.
+ * @see https://motion.dev/docs/react-use-velocity
+ */
+export declare const useVelocity: (source: Readable<number | string>) => Readable<number>;

package/dist/utils/velocity.js

@@ -0,0 +1,62 @@
+import { motionValue } from 'motion-dom';
+import { readable, writable } from 'svelte/store';
+/**
+ * Parses a numeric value from a number or unit string (e.g. "100px" → 100).
+ */
+const parseNumeric = (v) => {
+    if (typeof v === 'number')
+        return v;
+    const parsed = Number.parseFloat(String(v));
+    return Number.isFinite(parsed) ? parsed : 0;
+};
+/**
+ * Creates a readable store that tracks the velocity of a source store's value.
+ *
+ * Uses `motionValue` from motion-dom for built-in velocity tracking with
+ * timestamps. Polls velocity via `requestAnimationFrame` and settles to 0
+ * when movement stops.
+ *
+ * SSR-safe: returns a static `readable(0)` on the server.
+ *
+ * @param source A readable store of numeric or unit-string values.
+ * @returns A readable store of the current velocity in units/second.
+ * @see https://motion.dev/docs/react-use-velocity
+ */
+export const useVelocity = (source) => {
+    if (typeof window === 'undefined')
+        return readable(0, () => { });
+    const mv = motionValue(0);
+    const store = writable(0);
+    let raf = 0;
+    let settled = true;
+    const poll = () => {
+        const v = mv.getVelocity();
+        store.set(v);
+        if (Math.abs(v) < 0.001) {
+            settled = true;
+            store.set(0);
+            raf = 0;
+            return;
+        }
+        raf = requestAnimationFrame(poll);
+    };
+    const startPolling = () => {
+        if (!settled)
+            return;
+        settled = false;
+        raf = requestAnimationFrame(poll);
+    };
+    return readable(0, (set) => {
+        const unsubStore = store.subscribe(set);
+        const unsubSource = source.subscribe((v) => {
+            mv.set(parseNumeric(v));
+            startPolling();
+        });
+        return () => {
+            unsubStore();
+            unsubSource();
+            if (raf)
+                cancelAnimationFrame(raf);
+        };
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-motion",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "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",
@@ -111,7 +111,7 @@
     "svelte": "^5.0.0"
   },
   "volta": {
-    "node": "24.12.0"
+    "node": "22.16.0"
   },
   "publishConfig": {
     "access": "public"