@uinstinct/svelte-wheel-picker 0.1.0

package/dist/types.d.ts

@@ -0,0 +1,71 @@
+/**
+ * A single option in the wheel picker.
+ * @template T - The value type, constrained to string or number.
+ */
+export type WheelPickerOption<T extends string | number = string> = {
+    value: T;
+    label: string;
+    /** Fallback text for type-ahead search when label is not plain text. */
+    textValue?: string;
+    /** Whether this option is disabled (skipped in navigation). */
+    disabled?: boolean;
+};
+/**
+ * Per-element class name overrides for WheelPicker.
+ * All fields are optional — only provided classes are applied.
+ */
+export type WheelPickerClassNames = {
+    /** Outer container div */
+    wrapper?: string;
+    /** Each option row */
+    option?: string;
+    /** Text span inside each option */
+    optionText?: string;
+    /** Center selection highlight overlay */
+    selection?: string;
+};
+/**
+ * Props for the WheelPicker component.
+ * @template T - The option value type.
+ *
+ * Controlled mode: pass `value` + `onValueChange`.
+ * Uncontrolled mode: pass `defaultValue` (or nothing), omit `onValueChange`.
+ */
+export interface WheelPickerProps<T extends string | number = string> {
+    /** The list of selectable options. */
+    options: WheelPickerOption<T>[];
+    /** Current value (controlled mode). undefined means "no option selected". */
+    value?: T;
+    /** Initial value (uncontrolled mode). */
+    defaultValue?: T;
+    /** Callback when value changes. Presence signals controlled mode. */
+    onValueChange?: (value: T) => void;
+    /** Per-element CSS class overrides. */
+    classNames?: WheelPickerClassNames;
+    /** Number of visible option rows. Must be odd. Default: 5. */
+    visibleCount?: number;
+    /** Height in pixels of each option row. Default: 30. */
+    optionItemHeight?: number;
+    /** Pointer drag delta multiplier (affects inertia deceleration). Default: 3. */
+    dragSensitivity?: number;
+    /** Scroll wheel delta multiplier (affects snap animation duration). Default: 5. */
+    scrollSensitivity?: number;
+    /** Enable infinite loop scrolling (wraps at both ends). Default: false. */
+    infinite?: boolean;
+    /** Enable rotating drum/cylinder visual style with faux-3D scaleY compression. Default: false. */
+    cylindrical?: boolean;
+}
+/**
+ * Per-element class name overrides for WheelPickerWrapper.
+ */
+export type WheelPickerWrapperClassNames = {
+    /** Outer group container div */
+    group?: string;
+};
+/**
+ * Props for the WheelPickerWrapper component.
+ */
+export interface WheelPickerWrapperProps {
+    /** Per-element CSS class overrides for the wrapper group. */
+    classNames?: WheelPickerWrapperClassNames;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/use-controllable-state.svelte.d.ts

@@ -0,0 +1,21 @@
+declare class ControllableState<T extends string | number> {
+    #private;
+    constructor(opts: {
+        value?: T;
+        defaultValue?: T;
+        onChange?: (value: T | undefined) => void;
+    });
+    /**
+     * Update the tracked controlled value when the external `value` prop changes.
+     * Must be called from a $effect in the consuming component whenever `value` changes.
+     */
+    updateControlledValue(value: T | undefined): void;
+    get current(): T | undefined;
+    set current(next: T | undefined);
+}
+export declare function useControllableState<T extends string | number>(opts: {
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T | undefined) => void;
+}): ControllableState<T>;
+export {};

package/dist/use-controllable-state.svelte.js

@@ -0,0 +1,42 @@
+class ControllableState {
+    #internal = $state(undefined);
+    #onChange;
+    #isControlled;
+    // $state so that reactive consumers (selectedIndex $derived) re-evaluate when prop changes
+    #controlledValue = $state(undefined);
+    constructor(opts) {
+        this.#isControlled = typeof opts.onChange === 'function';
+        this.#onChange = opts.onChange;
+        this.#controlledValue = opts.value;
+        if (this.#isControlled) {
+            this.#internal = opts.value;
+        }
+        else {
+            this.#internal = opts.defaultValue;
+        }
+    }
+    /**
+     * Update the tracked controlled value when the external `value` prop changes.
+     * Must be called from a $effect in the consuming component whenever `value` changes.
+     */
+    updateControlledValue(value) {
+        this.#controlledValue = value;
+    }
+    get current() {
+        if (this.#isControlled) {
+            return this.#controlledValue;
+        }
+        return this.#internal;
+    }
+    set current(next) {
+        if (this.#isControlled) {
+            this.#onChange?.(next);
+        }
+        else {
+            this.#internal = next;
+        }
+    }
+}
+export function useControllableState(opts) {
+    return new ControllableState(opts);
+}

package/dist/use-typeahead-search.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { WheelPickerOption } from './types.js';
+declare class TypeaheadSearch {
+    #private;
+    search(key: string, options: WheelPickerOption[], currentIndex: number): number;
+    destroy(): void;
+}
+export declare function useTypeaheadSearch(): TypeaheadSearch;
+export {};

package/dist/use-typeahead-search.svelte.js

@@ -0,0 +1,59 @@
+class TypeaheadSearch {
+    #buffer = $state('');
+    #lastKey = $state('');
+    #lastTime = 0;
+    #timer = null;
+    search(key, options, currentIndex) {
+        const now = Date.now();
+        const withinWindow = now - this.#lastTime < 500;
+        const singleChar = key.length === 1;
+        if (!singleChar)
+            return -1;
+        const lowerKey = key.toLowerCase();
+        const isSameKey = withinWindow && lowerKey === this.#lastKey;
+        this.#lastKey = lowerKey;
+        this.#lastTime = now;
+        // Reset timer
+        if (this.#timer)
+            clearTimeout(this.#timer);
+        this.#timer = setTimeout(() => {
+            this.#buffer = '';
+            this.#lastKey = '';
+        }, 500);
+        if (isSameKey) {
+            // Same key cycling (D-02): find next match after currentIndex
+            return this.#cycleMatch(lowerKey, options, currentIndex);
+        }
+        else {
+            // Accumulate or start fresh
+            this.#buffer = withinWindow ? this.#buffer + lowerKey : lowerKey;
+            return this.#findFirst(this.#buffer, options);
+        }
+    }
+    #getSearchText(option) {
+        return (option.textValue ?? option.label).toLowerCase();
+    }
+    #findFirst(prefix, options) {
+        return options.findIndex((o) => !o.disabled && this.#getSearchText(o).startsWith(prefix));
+    }
+    #cycleMatch(key, options, fromIndex) {
+        const prefix = key.toLowerCase();
+        const matches = options
+            .map((o, i) => ({ i, matches: !o.disabled && this.#getSearchText(o).startsWith(prefix) }))
+            .filter((x) => x.matches)
+            .map((x) => x.i);
+        if (matches.length === 0)
+            return -1;
+        const afterCurrent = matches.find((i) => i > fromIndex);
+        return afterCurrent ?? matches[0]; // wrap around
+    }
+    destroy() {
+        if (this.#timer) {
+            clearTimeout(this.#timer);
+            this.#timer = null;
+        }
+    }
+}
+export function useTypeaheadSearch() {
+    return new TypeaheadSearch();
+}

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

@@ -0,0 +1,86 @@
+/**
+ * WheelPhysics — reactive physics class for the WheelPicker component.
+ *
+ * Manages a RAF-driven inertia loop and snap animation. The `offset` field is
+ * `$state` so any consumer that reads it will re-render when it changes.
+ *
+ * Design notes:
+ * - Only `offset` is $state — everything else is plain class fields (Pitfall 2).
+ * - The RAF loop sets `this.offset` imperatively; do NOT read it inside $effect.
+ * - Boundary resistance uses RESISTANCE constant from React v1.2.2 source.
+ * - Disabled options are always skipped when computing snap targets.
+ */
+import type { WheelPickerOption } from './types.js';
+import { DEFAULT_DRAG_SENSITIVITY, DEFAULT_SCROLL_SENSITIVITY, DEFAULT_ITEM_HEIGHT, DEFAULT_VISIBLE_COUNT } from './wheel-physics-utils.js';
+export { DEFAULT_DRAG_SENSITIVITY, DEFAULT_SCROLL_SENSITIVITY, DEFAULT_ITEM_HEIGHT, DEFAULT_VISIBLE_COUNT, };
+export declare class WheelPhysics {
+    #private;
+    offset: number;
+    constructor(opts: {
+        itemHeight?: number;
+        visibleCount?: number;
+        dragSensitivity?: number;
+        scrollSensitivity?: number;
+        infinite?: boolean;
+        options: WheelPickerOption[];
+        initialIndex: number;
+        onSnap: (index: number) => void;
+    });
+    /**
+     * Update configuration when parent props change.
+     * This does NOT re-trigger animation — it takes effect on the next interaction.
+     */
+    update(opts: {
+        itemHeight?: number;
+        visibleCount?: number;
+        dragSensitivity?: number;
+        scrollSensitivity?: number;
+        infinite?: boolean;
+        options?: WheelPickerOption[];
+        onSnap?: (index: number) => void;
+    }): void;
+    /**
+     * Called on pointerdown. Cancels any running animation and begins tracking.
+     */
+    startDrag(clientY: number): void;
+    /**
+     * Called on pointermove. Updates offset applying boundary resistance at ends.
+     */
+    moveDrag(clientY: number): void;
+    /**
+     * Called on pointerup. Computes velocity and kicks off inertia or direct snap.
+     */
+    endDrag(): void;
+    /**
+     * Called on wheel event. Debounced at 100ms to prevent rapid-fire scroll events.
+     *
+     * deltaY > 0: scroll down → move to next item (higher index)
+     * deltaY < 0: scroll up → move to previous item (lower index)
+     */
+    handleWheel(deltaY: number): void;
+    /**
+     * Animates the offset to the position corresponding to targetIndex.
+     * Uses easeOutCubic easing. Calls onSnap when complete.
+     *
+     * Cancels any currently running animation before starting.
+     */
+    animateTo(targetIndex: 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.
+     */
+    get currentIndex(): number;
+    /**
+     * Immediately sets the offset to the position for the given index, no animation.
+     * Used for initial render and controlled value updates.
+     */
+    jumpTo(index: number): void;
+    /**
+     * Cancels any in-progress animation.
+     */
+    cancelAnimation(): void;
+    /**
+     * Cleans up RAF on component destroy.
+     */
+    destroy(): void;
+}

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

@@ -0,0 +1,337 @@
+/**
+ * WheelPhysics — reactive physics class for the WheelPicker component.
+ *
+ * Manages a RAF-driven inertia loop and snap animation. The `offset` field is
+ * `$state` so any consumer that reads it will re-render when it changes.
+ *
+ * Design notes:
+ * - Only `offset` is $state — everything else is plain class fields (Pitfall 2).
+ * - The RAF loop sets `this.offset` imperatively; do NOT read it inside $effect.
+ * - Boundary resistance uses RESISTANCE constant from React v1.2.2 source.
+ * - Disabled options are always skipped when computing snap targets.
+ */
+import { easeOutCubic, indexToOffset, offsetToIndex, clampIndex, wrapIndex, snapToNearestEnabled, calculateVelocity, computeSnapTarget, computeAnimationDuration, RESISTANCE, DEFAULT_DRAG_SENSITIVITY, DEFAULT_SCROLL_SENSITIVITY, DEFAULT_ITEM_HEIGHT, DEFAULT_VISIBLE_COUNT, SNAP_BACK_DECELERATION, } from './wheel-physics-utils.js';
+// Re-export for convenience so consumers only need one import
+export { DEFAULT_DRAG_SENSITIVITY, DEFAULT_SCROLL_SENSITIVITY, DEFAULT_ITEM_HEIGHT, DEFAULT_VISIBLE_COUNT, };
+export class WheelPhysics {
+    // ---------------------------------------------------------------------------
+    // Public reactive state ($state) — the ONLY field bound to the DOM transform
+    // ---------------------------------------------------------------------------
+    offset = $state(0);
+    // ---------------------------------------------------------------------------
+    // Private configuration (set in constructor, may be updated by update())
+    // ---------------------------------------------------------------------------
+    #itemHeight;
+    #visibleCount;
+    #dragSensitivity;
+    #scrollSensitivity;
+    #options;
+    #onSnap;
+    #infinite;
+    // ---------------------------------------------------------------------------
+    // Private non-reactive animation/drag state (NOT $state — Pitfall 2)
+    // ---------------------------------------------------------------------------
+    /** Current RAF handle — null when no animation running */
+    #rafId = null;
+    /** True between pointerdown and pointerup */
+    #isDragging = false;
+    /** The offset value when the current drag began */
+    #dragStartOffset = 0;
+    /** clientY at the start of the current drag (used for direct delta) */
+    #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;
+    // ---------------------------------------------------------------------------
+    // Constructor
+    // ---------------------------------------------------------------------------
+    constructor(opts) {
+        this.#itemHeight = opts.itemHeight ?? DEFAULT_ITEM_HEIGHT;
+        this.#visibleCount = opts.visibleCount ?? DEFAULT_VISIBLE_COUNT;
+        this.#dragSensitivity = opts.dragSensitivity ?? DEFAULT_DRAG_SENSITIVITY;
+        this.#scrollSensitivity = opts.scrollSensitivity ?? DEFAULT_SCROLL_SENSITIVITY;
+        this.#infinite = opts.infinite ?? false;
+        this.#options = opts.options;
+        this.#onSnap = opts.onSnap;
+        this.offset = this.#indexToOffset(opts.initialIndex);
+    }
+    // ---------------------------------------------------------------------------
+    // Configuration update (called when props change in parent component)
+    // ---------------------------------------------------------------------------
+    /**
+     * Update configuration when parent props change.
+     * This does NOT re-trigger animation — it takes effect on the next interaction.
+     */
+    update(opts) {
+        if (opts.itemHeight !== undefined)
+            this.#itemHeight = opts.itemHeight;
+        if (opts.visibleCount !== undefined)
+            this.#visibleCount = opts.visibleCount;
+        if (opts.dragSensitivity !== undefined)
+            this.#dragSensitivity = opts.dragSensitivity;
+        if (opts.scrollSensitivity !== undefined)
+            this.#scrollSensitivity = opts.scrollSensitivity;
+        if (opts.infinite !== undefined)
+            this.#infinite = opts.infinite;
+        if (opts.options !== undefined)
+            this.#options = opts.options;
+        if (opts.onSnap !== undefined)
+            this.#onSnap = opts.onSnap;
+    }
+    // ---------------------------------------------------------------------------
+    // Drag handlers (pointer events)
+    // ---------------------------------------------------------------------------
+    /**
+     * Called on pointerdown. Cancels any running animation and begins tracking.
+     */
+    startDrag(clientY) {
+        this.#cancelRaf();
+        this.#isDragging = true;
+        this.#animating = false;
+        this.#dragStartOffset = this.offset;
+        this.#dragStartY = clientY;
+        this.#yList = [[clientY, performance.now()]];
+    }
+    /**
+     * Called on pointermove. Updates offset applying boundary resistance at ends.
+     */
+    moveDrag(clientY) {
+        if (!this.#isDragging)
+            return;
+        const delta = clientY - this.#dragStartY;
+        const maxOffset = this.#indexToOffset(0);
+        const minOffset = this.#indexToOffset(this.#options.length - 1);
+        let newOffset = this.#dragStartOffset + delta;
+        if (this.#infinite) {
+            // Infinite mode: normalize offset when the drag exceeds the ghost item bounds.
+            // The DOM has 3×N items (before-ghosts + real + after-ghosts), covering rawIndex
+            // -N..2N-1. When the pointer is captured outside the container, the user can drag
+            // past these bounds into empty space. Normalizing by ±N*itemHeight keeps the drag
+            // within the populated DOM region and ensures seamless infinite scroll.
+            //
+            // Applying the same shift to #dragStartOffset keeps future delta computations
+            // consistent so the drag feels continuous across the normalization boundary.
+            const loopDistance = this.#options.length * this.#itemHeight;
+            // After-ghost overflow: newOffset went past the last after-ghost (rawIndex >= 2N)
+            const afterGhostEnd = this.#indexToOffset(2 * this.#options.length);
+            // Before-ghost overflow: newOffset went past the first before-ghost (rawIndex < -N)
+            const beforeGhostEnd = this.#indexToOffset(-this.#options.length - 1);
+            while (newOffset < afterGhostEnd) {
+                newOffset += loopDistance;
+                this.#dragStartOffset += loopDistance;
+            }
+            while (newOffset > beforeGhostEnd) {
+                newOffset -= loopDistance;
+                this.#dragStartOffset -= loopDistance;
+            }
+        }
+        else {
+            // Apply rubber-band resistance at boundaries
+            if (newOffset > maxOffset) {
+                newOffset = maxOffset + (newOffset - maxOffset) * RESISTANCE;
+            }
+            else if (newOffset < minOffset) {
+                newOffset = minOffset + (newOffset - minOffset) * RESISTANCE;
+            }
+        }
+        this.offset = newOffset;
+        // Track last 5 pointer positions for velocity calculation
+        this.#yList.push([clientY, performance.now()]);
+        if (this.#yList.length > 5) {
+            this.#yList.shift();
+        }
+    }
+    /**
+     * 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;
+        const velocity = calculateVelocity(this.#yList, this.#itemHeight);
+        const rawIndex = this.#offsetToIndex(this.offset);
+        const N = this.#options.length;
+        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.
+                // rawIndex is in [-N, 2N-1] (guaranteed by moveDrag normalization).
+                // Determine which "loop offset" we are in and apply to snapIndex:
+                //   before-ghost (rawIndex < 0): animate to snapIndex - N
+                //   after-ghost  (rawIndex >= N): animate to snapIndex + N
+                //   real section (rawIndex in [0, N-1]): animate to snapIndex directly
+                const loopOffset = rawIndex < 0 ? -N : rawIndex >= N ? N : 0;
+                this.animateTo(snapIndex + loopOffset);
+            }
+            else {
+                this.animateTo(snapIndex);
+            }
+        }
+        else {
+            // Inertia — compute overshoot target
+            // Use rawIndex (not currentIndex) so the overshoot accounts for the current
+            // ghost-loop position, giving the correct item index after inertia deceleration.
+            const rawTarget = computeSnapTarget(rawIndex, velocity, this.#dragSensitivity);
+            if (this.#infinite) {
+                // snapIndex is the nearest enabled item to the overshoot target (in [0, N-1])
+                const wrapped = wrapIndex(rawTarget, N);
+                const snapIndex = snapToNearestEnabled(wrapped, this.#options);
+                // Animate to the ghost-section position of snapIndex matching the current
+                // 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);
+            }
+            else {
+                const clamped = clampIndex(rawTarget, N);
+                const snapIndex = snapToNearestEnabled(clamped, this.#options);
+                this.animateTo(snapIndex);
+            }
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Wheel event handler
+    // ---------------------------------------------------------------------------
+    /**
+     * Called on wheel event. Debounced at 100ms to prevent rapid-fire scroll events.
+     *
+     * deltaY > 0: scroll down → move to next item (higher index)
+     * deltaY < 0: scroll up → move to previous item (lower index)
+     */
+    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)
+        const direction = deltaY > 0 ? 1 : -1;
+        if (this.#infinite) {
+            const next = currentIndex + direction;
+            const wrapped = wrapIndex(next, this.#options.length);
+            const snapIndex = snapToNearestEnabled(wrapped, this.#options);
+            this.animateTo(snapIndex);
+        }
+        else {
+            const targetIndex = clampIndex(currentIndex + direction, this.#options.length);
+            const snapIndex = snapToNearestEnabled(targetIndex, this.#options);
+            this.animateTo(snapIndex);
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Animation
+    // ---------------------------------------------------------------------------
+    /**
+     * Animates the offset to the position corresponding to targetIndex.
+     * Uses easeOutCubic easing. Calls onSnap when complete.
+     *
+     * Cancels any currently running animation before starting.
+     */
+    animateTo(targetIndex) {
+        console.log('[animateTo] targetIndex=', targetIndex, 'from offset=', this.offset);
+        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 durationMs = durationSec * 1000;
+        const startTime = performance.now();
+        const tick = (now) => {
+            if (!this.#animating)
+                return;
+            const elapsed = now - startTime;
+            const progress = Math.min(elapsed / durationMs, 1);
+            const eased = easeOutCubic(progress);
+            this.offset = startOffset + (targetOffset - startOffset) * eased;
+            if (progress < 1) {
+                this.#rafId = requestAnimationFrame(tick);
+            }
+            else {
+                // Snap to exact target to avoid float accumulation
+                this.offset = targetOffset;
+                this.#rafId = null;
+                this.#animating = false;
+                this.#onSnap(targetIndex);
+            }
+        };
+        this.#rafId = requestAnimationFrame(tick);
+    }
+    /**
+     * Returns the option index that the current offset visually corresponds to.
+     * Used to guard against redundant animations when the wheel is already positioned correctly.
+     */
+    get currentIndex() {
+        const raw = this.#offsetToIndex(this.offset);
+        return this.#infinite
+            ? wrapIndex(raw, this.#options.length)
+            : clampIndex(raw, this.#options.length);
+    }
+    /**
+     * Immediately sets the offset to the position for the given index, no animation.
+     * Used for initial render and controlled value updates.
+     */
+    jumpTo(index) {
+        this.#cancelRaf();
+        this.offset = this.#indexToOffset(index);
+    }
+    /**
+     * Cancels any in-progress animation.
+     */
+    cancelAnimation() {
+        this.#cancelRaf();
+    }
+    /**
+     * Cleans up RAF on component destroy.
+     */
+    destroy() {
+        this.cancelAnimation();
+    }
+    // ---------------------------------------------------------------------------
+    // Private helpers
+    // ---------------------------------------------------------------------------
+    #cancelRaf() {
+        if (this.#rafId !== null) {
+            cancelAnimationFrame(this.#rafId);
+            this.#rafId = null;
+        }
+        this.#animating = false;
+    }
+    /**
+     * Converts an option index to a translateY offset, accounting for before-ghost
+     * rows prepended to the DOM container in infinite mode.
+     *
+     * In infinite mode the container begins with N = options.length ghost rows, so
+     * real item[i] sits at DOM position (N + i) * itemHeight. The offset must be
+     * shifted by -N * itemHeight relative to the non-infinite formula.
+     */
+    #indexToOffset(index) {
+        const ghostCount = this.#infinite ? this.#options.length : 0;
+        return indexToOffset(index + ghostCount, this.#itemHeight, this.#visibleCount);
+    }
+    /**
+     * Converts a translateY offset back to an option index, accounting for the
+     * before-ghost prefix in infinite mode (inverse of #indexToOffset).
+     */
+    #offsetToIndex(offset) {
+        const ghostCount = this.#infinite ? this.#options.length : 0;
+        return offsetToIndex(offset, this.#itemHeight, this.#visibleCount) - ghostCount;
+    }
+}
+// Unused export to prevent unused import warnings
+void SNAP_BACK_DECELERATION;