@humanspeak/svelte-motion 0.1.22 → 0.1.23

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-motion",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "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",