@uinstinct/svelte-wheel-picker 0.1.22 → 0.1.23

package/dist/WheelPicker.svelte

@@ -39,11 +39,14 @@
 	});
 
 	// Controlled/uncontrolled state management
-	const state = useControllableState({
-		value,
-		defaultValue,
-		onChange: onValueChange,
-	});
+	// untrack: constructor only needs initial values; effects below handle reactive updates
+	const state = untrack(() =>
+		useControllableState({
+			value,
+			defaultValue,
+			onChange: onValueChange,
+		}),
+	);
 
 	// Derive the currently selected index
 	const selectedIndex = $derived(options.findIndex((o) => o.value === state.current));
@@ -55,40 +58,51 @@
 		return first >= 0 ? first : 0;
 	});
 
-	// Instantiate the physics engine
-	const physics = new WheelPhysics({
-		itemHeight: optionItemHeight,
-		visibleCount: visibleCount,
-		dragSensitivity,
-		scrollSensitivity,
-		options,
-		initialIndex,
-		infinite,
-		onSnap: (index: number) => {
-			console.log('[onSnap] index=', index, 'infinite=', infinite, 'offset=', physics.offset);
-			if (infinite) {
-				// D-04: Normalize offset on snap settle
-				const wrappedIndex = wrapIndex(index, options.length);
-				physics.jumpTo(wrappedIndex);
-				const opt = options[wrappedIndex];
-				console.log(
-					'[onSnap] wrappedIndex=',
-					wrappedIndex,
-					'opt=',
-					opt?.value,
-					'jumpTo offset=',
-					physics.offset,
-				);
-				if (opt && !opt.disabled) {
-					state.current = opt.value;
-				}
-			} else {
-				const opt = options[index];
-				if (opt && !opt.disabled) {
-					state.current = opt.value;
-				}
+	// Named snap handler — extracted to allow $effect to reference it reactively
+	function handleSnap(index: number) {
+		if (infinite) {
+			// D-04: Normalize offset on snap settle
+			const wrappedIndex = wrapIndex(index, options.length);
+			physics.jumpTo(wrappedIndex);
+			const opt = options[wrappedIndex];
+			if (opt && !opt.disabled) {
+				state.current = opt.value;
 			}
-		},
+		} else {
+			const opt = options[index];
+			if (opt && !opt.disabled) {
+				state.current = opt.value;
+			}
+		}
+	}
+
+	// Instantiate the physics engine
+	// untrack: constructor only needs initial values; $effect below syncs all prop changes
+	const physics = untrack(
+		() =>
+			new WheelPhysics({
+				itemHeight: optionItemHeight,
+				visibleCount: visibleCount,
+				dragSensitivity,
+				scrollSensitivity,
+				options,
+				initialIndex,
+				infinite,
+				onSnap: handleSnap,
+			}),
+	);
+
+	// Sync prop changes to physics engine — fixes state_referenced_locally warnings
+	$effect(() => {
+		physics.update({
+			itemHeight: optionItemHeight,
+			visibleCount,
+			dragSensitivity,
+			scrollSensitivity,
+			infinite,
+			options,
+			onSnap: handleSnap,
+		});
 	});
 
 	// Typeahead search instance
@@ -196,20 +210,8 @@
 
 	// Pointer event handlers (Pattern 2: Pointer Capture for reliable drag tracking)
 	function onPointerDown(e: PointerEvent) {
-		console.log(
-			'[onPointerDown] type=',
-			e.type,
-			'currentTarget=',
-			e.currentTarget,
-			'target=',
-			e.target,
-		);
 		const el = e.currentTarget as HTMLElement;
 		el.setPointerCapture(e.pointerId);
-		console.log(
-			'[onPointerDown] setPointerCapture called, hasCapture=',
-			el.hasPointerCapture(e.pointerId),
-		);
 		physics.startDrag(e.clientY);
 	}
 
@@ -218,16 +220,6 @@
 	}
 
 	function onPointerUp(e: PointerEvent) {
-		console.log(
-			'[onPointerUp] type=',
-			e.type,
-			'currentTarget=',
-			e.currentTarget,
-			'target=',
-			e.target,
-			'clientY=',
-			e.clientY,
-		);
 		(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
 		physics.endDrag();
 	}

package/dist/use-wheel-physics.svelte.d.ts

@@ -52,19 +52,28 @@ export declare class WheelPhysics {
      */
     endDrag(): void;
     /**
-     * Called on wheel event. Debounced at 100ms to prevent rapid-fire scroll events.
+     * Called on wheel event. Moves proportionally to deltaY magnitude.
      *
-     * deltaY > 0: scroll down → move to next item (higher index)
-     * deltaY < 0: scroll up → move to previous item (lower index)
+     * deltaY > 0: scroll down → move to next item(s) (higher index)
+     * deltaY < 0: scroll up → move to previous item(s) (lower index)
+     *
+     * A typical mouse wheel notch sends deltaY ~100-150px. Dividing by itemHeight
+     * gives a proportional item count, so scrolling feels natural and fast.
+     * The in-flight animation is cancelled before computing the new target so
+     * rapid wheel events feel snappy (each event immediately updates the target).
      */
     handleWheel(deltaY: number): void;
     /**
      * Animates the offset to the position corresponding to targetIndex.
      * Uses easeOutCubic easing. Calls onSnap when complete.
      *
+     * When `velocity` is provided (inertia flick), duration is computed from
+     * velocity for natural deceleration proportional to flick speed. Without
+     * velocity (keyboard, wheel, slow release), duration is distance-based.
+     *
      * Cancels any currently running animation before starting.
      */
-    animateTo(targetIndex: number): void;
+    animateTo(targetIndex: number, velocity?: number): void;
     /**
      * Returns the option index that the current offset visually corresponds to.
      * Used to guard against redundant animations when the wheel is already positioned correctly.

package/dist/use-wheel-physics.svelte.js

@@ -41,8 +41,6 @@ export class WheelPhysics {
     #dragStartY = 0;
     /** Recent pointer positions for velocity calculation: [clientY, timestamp][] */
     #yList = [];
-    /** Timestamp of the last wheel event (100ms debounce guard) */
-    #lastWheelTime = -Infinity;
     /** True while a snap or inertia animation is running */
     #animating = false;
     // ---------------------------------------------------------------------------
@@ -148,7 +146,6 @@ export class WheelPhysics {
      * Called on pointerup. Computes velocity and kicks off inertia or direct snap.
      */
     endDrag() {
-        console.log('[endDrag] called, isDragging=', this.#isDragging, 'offset=', this.offset);
         if (!this.#isDragging)
             return;
         this.#isDragging = false;
@@ -158,11 +155,9 @@ export class WheelPhysics {
         const currentIndex = this.#infinite
             ? wrapIndex(rawIndex, N)
             : clampIndex(rawIndex, N);
-        console.log('[endDrag] velocity=', velocity, 'rawIndex=', rawIndex, 'currentIndex=', currentIndex, 'infinite=', this.#infinite);
         if (Math.abs(velocity) < 0.5) {
             // Slow release — snap directly to nearest enabled option
             const snapIndex = snapToNearestEnabled(currentIndex, this.#options);
-            console.log('[endDrag] slow path, snapIndex=', snapIndex);
             if (this.#infinite) {
                 // Preserve ghost-section context so the snap animation continues in the
                 // same direction as the drag rather than jumping backward to real-section.
@@ -191,13 +186,12 @@ export class WheelPhysics {
                 // loop, so the animation moves in the same direction as the drag.
                 // snapIndex is in [0,N-1]; loopOffset is -N, 0, or +N based on current section.
                 const loopOffset = rawIndex < 0 ? -N : rawIndex >= N ? N : 0;
-                console.log('[endDrag] inertia path, rawTarget=', rawTarget, 'wrapped=', wrapped, 'snapIndex=', snapIndex, 'loopOffset=', loopOffset);
-                this.animateTo(snapIndex + loopOffset);
+                this.animateTo(snapIndex + loopOffset, velocity);
             }
             else {
                 const clamped = clampIndex(rawTarget, N);
                 const snapIndex = snapToNearestEnabled(clamped, this.#options);
-                this.animateTo(snapIndex);
+                this.animateTo(snapIndex, velocity);
             }
         }
     }
@@ -205,30 +199,38 @@ export class WheelPhysics {
     // Wheel event handler
     // ---------------------------------------------------------------------------
     /**
-     * Called on wheel event. Debounced at 100ms to prevent rapid-fire scroll events.
+     * Called on wheel event. Moves proportionally to deltaY magnitude.
+     *
+     * deltaY > 0: scroll down → move to next item(s) (higher index)
+     * deltaY < 0: scroll up → move to previous item(s) (lower index)
      *
-     * deltaY > 0: scroll down → move to next item (higher index)
-     * deltaY < 0: scroll up → move to previous item (lower index)
+     * A typical mouse wheel notch sends deltaY ~100-150px. Dividing by itemHeight
+     * gives a proportional item count, so scrolling feels natural and fast.
+     * The in-flight animation is cancelled before computing the new target so
+     * rapid wheel events feel snappy (each event immediately updates the target).
      */
     handleWheel(deltaY) {
-        const now = performance.now();
-        if (now - this.#lastWheelTime < 100)
-            return;
-        this.#lastWheelTime = now;
-        const rawIndex = this.#offsetToIndex(this.offset);
-        const currentIndex = this.#infinite
-            ? wrapIndex(rawIndex, this.#options.length)
-            : clampIndex(rawIndex, this.#options.length);
-        // deltaY > 0 = scroll down = move to next item (increment index)
+        // Cancel any in-flight animation so rapid scrolling feels immediate
+        this.#cancelRaf();
+        // Calculate number of items to move based on deltaY magnitude and scroll sensitivity.
+        // A typical mouse wheel notch sends deltaY ~100-150px.
+        // Multiply by scrollSensitivity / DEFAULT to amplify or dampen the movement.
+        // sensitivity 1 → 0.2x (barely moves), sensitivity 5 → 1x (default), sensitivity 20 → 4x (fast)
+        const sensitivityMultiplier = this.#scrollSensitivity / DEFAULT_SCROLL_SENSITIVITY;
+        const itemsToMove = Math.max(1, Math.round((Math.abs(deltaY) * sensitivityMultiplier) / this.#itemHeight));
         const direction = deltaY > 0 ? 1 : -1;
+        const steps = itemsToMove * direction;
+        const rawIndex = this.#offsetToIndex(this.offset);
+        const N = this.#options.length;
+        const currentIndex = this.#infinite ? wrapIndex(rawIndex, N) : clampIndex(rawIndex, N);
         if (this.#infinite) {
-            const next = currentIndex + direction;
-            const wrapped = wrapIndex(next, this.#options.length);
+            const next = currentIndex + steps;
+            const wrapped = wrapIndex(next, N);
             const snapIndex = snapToNearestEnabled(wrapped, this.#options);
             this.animateTo(snapIndex);
         }
         else {
-            const targetIndex = clampIndex(currentIndex + direction, this.#options.length);
+            const targetIndex = clampIndex(currentIndex + steps, N);
             const snapIndex = snapToNearestEnabled(targetIndex, this.#options);
             this.animateTo(snapIndex);
         }
@@ -240,16 +242,19 @@ export class WheelPhysics {
      * Animates the offset to the position corresponding to targetIndex.
      * Uses easeOutCubic easing. Calls onSnap when complete.
      *
+     * When `velocity` is provided (inertia flick), duration is computed from
+     * velocity for natural deceleration proportional to flick speed. Without
+     * velocity (keyboard, wheel, slow release), duration is distance-based.
+     *
      * Cancels any currently running animation before starting.
      */
-    animateTo(targetIndex) {
-        console.log('[animateTo] targetIndex=', targetIndex, 'from offset=', this.offset);
+    animateTo(targetIndex, velocity) {
         this.#cancelRaf();
         this.#animating = true;
         const startOffset = this.offset;
         const targetOffset = this.#indexToOffset(targetIndex);
         const distance = Math.abs(targetIndex - this.#offsetToIndex(startOffset));
-        const durationSec = computeAnimationDuration(distance, this.#scrollSensitivity);
+        const durationSec = computeAnimationDuration(distance, this.#scrollSensitivity, velocity);
         const durationMs = durationSec * 1000;
         const startTime = performance.now();
         const tick = (now) => {

package/dist/wheel-physics-utils.d.ts

@@ -112,14 +112,21 @@ export declare function computeSnapTarget(currentIndexFromOffset: number, veloci
 /**
  * Computes the duration of a snap animation in seconds.
  *
- * Formula: `Math.sqrt(|distance| / scrollSensitivity)`
- * Clamped to [0.1, 0.6] seconds.
+ * When `velocity` is provided and |velocity| >= 0.5 (inertia flick), uses the
+ * kinematic formula: `|velocity| / (scrollSensitivity * 6)`, clamped to [0.1, 1.2].
+ * This matches the React reference's velocity-based duration model, producing
+ * natural deceleration where faster flicks get proportionally longer animations.
+ *
+ * When `velocity` is undefined or < 0.5 (keyboard, wheel, slow release), falls
+ * back to the distance-based formula: `Math.sqrt(|distance| / scrollSensitivity)`,
+ * clamped to [0.1, 0.6] — unchanged from the original implementation.
  *
  * @param distance - Distance in index steps to travel
  * @param scrollSensitivity - Scroll sensitivity (affects duration)
+ * @param velocity - Optional scroll velocity in items/second (from inertia flick)
  * @returns Animation duration in seconds
  */
-export declare function computeAnimationDuration(distance: number, scrollSensitivity: number): number;
+export declare function computeAnimationDuration(distance: number, scrollSensitivity: number, velocity?: number): number;
 /**
  * Computes per-item scaleY (and opacity) for cylindrical drum mode.
  *

package/dist/wheel-physics-utils.js

@@ -162,14 +162,30 @@ export function computeSnapTarget(currentIndexFromOffset, velocity, dragSensitiv
 /**
  * Computes the duration of a snap animation in seconds.
  *
- * Formula: `Math.sqrt(|distance| / scrollSensitivity)`
- * Clamped to [0.1, 0.6] seconds.
+ * When `velocity` is provided and |velocity| >= 0.5 (inertia flick), uses the
+ * kinematic formula: `|velocity| / (scrollSensitivity * 6)`, clamped to [0.1, 1.2].
+ * This matches the React reference's velocity-based duration model, producing
+ * natural deceleration where faster flicks get proportionally longer animations.
+ *
+ * When `velocity` is undefined or < 0.5 (keyboard, wheel, slow release), falls
+ * back to the distance-based formula: `Math.sqrt(|distance| / scrollSensitivity)`,
+ * clamped to [0.1, 0.6] — unchanged from the original implementation.
  *
  * @param distance - Distance in index steps to travel
  * @param scrollSensitivity - Scroll sensitivity (affects duration)
+ * @param velocity - Optional scroll velocity in items/second (from inertia flick)
  * @returns Animation duration in seconds
  */
-export function computeAnimationDuration(distance, scrollSensitivity) {
+export function computeAnimationDuration(distance, scrollSensitivity, velocity) {
+    if (velocity !== undefined && Math.abs(velocity) >= 0.5) {
+        // Velocity-based duration: time proportional to flick speed.
+        // deceleration = scrollSensitivity * 6 produces duration=1.0s at v=30
+        // (MAX_VELOCITY) with scrollSensitivity=5, a reasonable maximum.
+        const deceleration = scrollSensitivity * 6;
+        const raw = Math.abs(velocity) / deceleration;
+        return Math.max(0.1, Math.min(1.2, raw));
+    }
+    // Distance-based fallback (keyboard, wheel events, slow releases)
     const raw = Math.sqrt(Math.abs(distance) / scrollSensitivity);
     return Math.max(0.1, Math.min(0.6, raw));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uinstinct/svelte-wheel-picker",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "type": "module",
   "description": "iOS-style wheel picker for Svelte 5 with inertia scrolling, infinite loop, and keyboard navigation",
   "license": "MIT",