scroll-system 1.0.1 → 1.1.1

package/dist/index.mjs

@@ -1,9 +1,9 @@
-// components/ScrollContainer.tsx
-import { useEffect as useEffect7, useRef as useRef6, useMemo as useMemo2, useState as useState2 } from "react";
+import { createContext, useRef, useEffect, useState, useCallback, useMemo, useContext } from 'react';
+import { create } from 'zustand';
+import { subscribeWithSelector } from 'zustand/middleware';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// store/navigation.store.ts
-import { create } from "zustand";
-import { subscribeWithSelector } from "zustand/middleware";
+// components/ScrollContainer.tsx
 
 // constants.ts
 var DEFAULT_TRANSITION_DURATION = 700;
@@ -22,6 +22,7 @@ function evaluateStateMachine(capability, progress, viewType, explicitLock) {
   if (explicitLock) return explicitLock;
   if (capability === "none") return "unlocked";
   if (viewType === "full") return "unlocked";
+  if (viewType === "nested") return "unlocked";
   if (progress >= 0.99) return "unlocked";
   return "locked";
 }
@@ -45,7 +46,12 @@ var initialState = {
   isTransitioning: false,
   isGlobalLocked: false,
   isDragging: false,
-  globalProgress: 0
+  globalProgress: 0,
+  // NEW: AutoScroll state
+  isAutoScrolling: false,
+  isAutoScrollPaused: false,
+  // NEW: Infinite scroll
+  infiniteScrollEnabled: false
 };
 var lastNavigationTime = 0;
 var useScrollStore = create()(
@@ -70,12 +76,15 @@ var useScrollStore = create()(
           index: newIndex,
           type: config.type,
           isActive: newIndex === 0,
+          isPreloaded: newIndex <= 1,
+          // Preload first 2 views by default
           capability: "none",
           navigation: "unlocked",
           explicitLock: null,
           progress: 0,
           metrics: { scrollHeight: 0, clientHeight: 0, scrollTop: 0 },
-          config
+          config,
+          activeSnapPointId: null
         };
         const newViews = [...state.views, newView];
         return {
@@ -116,7 +125,10 @@ var useScrollStore = create()(
           progress,
           navigation
         };
-        return { views: newViews };
+        const activeView = newViews[state.activeIndex];
+        const viewProgress = activeView?.progress ?? 0;
+        const globalProgress = (state.activeIndex + viewProgress) / state.totalViews;
+        return { views: newViews, globalProgress };
       });
     },
     processIntention: (intention) => {
@@ -127,10 +139,15 @@ var useScrollStore = create()(
       if (intention.type === "navigate") {
         if (intention.direction === "down") {
           if (activeView.navigation === "locked") return false;
-          if (state.activeIndex < state.totalViews - 1) {
-            get().goToView(state.activeIndex + 1);
-            return true;
+          if (state.activeIndex >= state.totalViews - 1) {
+            if (state.infiniteScrollEnabled) {
+              get().goToView(0);
+              return true;
+            }
+            return false;
           }
+          get().goToView(state.activeIndex + 1);
+          return true;
         } else if (intention.direction === "up") {
           const isAtTop = activeView.metrics.scrollTop <= 1;
           if (activeView.capability === "internal" && !isAtTop) {
@@ -144,21 +161,28 @@ var useScrollStore = create()(
           } else {
             if (activeView.explicitLock === "locked") return false;
           }
-          if (state.activeIndex > 0) {
-            get().goToView(state.activeIndex - 1);
-            return true;
+          if (state.activeIndex <= 0) {
+            if (state.infiniteScrollEnabled) {
+              get().goToView(state.totalViews - 1);
+              return true;
+            }
+            return false;
           }
+          get().goToView(state.activeIndex - 1);
+          return true;
         }
       }
       return false;
     },
     goToNext: () => {
       const state = get();
-      state.goToView(state.activeIndex + 1);
+      const nextIndex = state.infiniteScrollEnabled && state.activeIndex >= state.totalViews - 1 ? 0 : state.activeIndex + 1;
+      state.goToView(nextIndex);
     },
     goToPrevious: () => {
       const state = get();
-      state.goToView(state.activeIndex - 1);
+      const prevIndex = state.infiniteScrollEnabled && state.activeIndex <= 0 ? state.totalViews - 1 : state.activeIndex - 1;
+      state.goToView(prevIndex);
     },
     goToView: (indexOrId) => {
       const state = get();
@@ -166,19 +190,29 @@ var useScrollStore = create()(
       if (now - lastNavigationTime < NAVIGATION_COOLDOWN) return;
       lastNavigationTime = now;
       let targetIndex = typeof indexOrId === "string" ? state.views.findIndex((v) => v.id === indexOrId) : indexOrId;
+      if (state.infiniteScrollEnabled) {
+        if (targetIndex < 0) targetIndex = state.totalViews - 1;
+        if (targetIndex >= state.totalViews) targetIndex = 0;
+      }
       if (targetIndex < 0 || targetIndex >= state.totalViews) return;
       if (targetIndex === state.activeIndex) return;
-      set((s) => ({
-        ...s,
-        isTransitioning: true,
-        activeIndex: targetIndex,
-        activeId: s.views[targetIndex]?.id ?? null,
-        views: s.views.map((v) => {
-          if (v.index === targetIndex) return { ...v, isActive: true };
-          if (v.index === s.activeIndex) return { ...v, isActive: false };
-          return v;
-        })
-      }));
+      set((s) => {
+        const newViews = s.views.map((v, idx) => {
+          const isAdjacent = Math.abs(idx - targetIndex) <= 1 || s.infiniteScrollEnabled && (targetIndex === 0 && idx === s.totalViews - 1 || targetIndex === s.totalViews - 1 && idx === 0);
+          return {
+            ...v,
+            isActive: idx === targetIndex,
+            isPreloaded: isAdjacent || idx === targetIndex
+          };
+        });
+        return {
+          ...s,
+          isTransitioning: true,
+          activeIndex: targetIndex,
+          activeId: newViews[targetIndex]?.id ?? null,
+          views: newViews
+        };
+      });
     },
     setViewExplicitLock: (id, lock) => {
       set((state) => {
@@ -193,9 +227,33 @@ var useScrollStore = create()(
     },
     setGlobalLock: (locked) => set({ isGlobalLocked: locked }),
     setDragging: (dragging) => set({ isDragging: dragging }),
-    getViewById: (id) => get().views.find((v) => v.id === id),
     startTransition: () => set({ isTransitioning: true }),
     endTransition: () => set({ isTransitioning: false }),
+    // NEW: AutoScroll control
+    setAutoScrolling: (enabled) => set({ isAutoScrolling: enabled }),
+    setAutoScrollPaused: (paused) => set({ isAutoScrollPaused: paused }),
+    // NEW: Infinite scroll
+    setInfiniteScrollEnabled: (enabled) => set({ infiniteScrollEnabled: enabled }),
+    // NEW: Preload
+    setViewPreloaded: (id, preloaded) => {
+      set((state) => {
+        const index = state.views.findIndex((v) => v.id === id);
+        if (index === -1) return state;
+        const newViews = [...state.views];
+        newViews[index] = { ...newViews[index], isPreloaded: preloaded };
+        return { views: newViews };
+      });
+    },
+    // NEW: Snap points
+    setActiveSnapPoint: (viewId, snapPointId) => {
+      set((state) => {
+        const index = state.views.findIndex((v) => v.id === viewId);
+        if (index === -1) return state;
+        const newViews = [...state.views];
+        newViews[index] = { ...newViews[index], activeSnapPointId: snapPointId };
+        return { views: newViews };
+      });
+    },
     resetNavigationCooldown: () => {
       lastNavigationTime = 0;
     }
@@ -207,15 +265,16 @@ var selectCanNavigateNext = (state) => {
   if (state.isTransitioning || state.isGlobalLocked) return false;
   const activeView = state.views[state.activeIndex];
   if (!activeView) return false;
-  return activeView.navigation === "unlocked";
+  if (state.infiniteScrollEnabled) return activeView.navigation === "unlocked";
+  return activeView.navigation === "unlocked" && state.activeIndex < state.totalViews - 1;
 };
 var selectCanNavigatePrevious = (state) => {
   if (state.isTransitioning || state.isGlobalLocked) return false;
+  if (state.infiniteScrollEnabled) return state.activeIndex >= 0;
   return state.activeIndex > 0;
 };
-
-// hooks/useWheelHandler.ts
-import { useEffect, useRef } from "react";
+var selectGlobalProgress = (state) => state.globalProgress;
+var selectIsAutoScrolling = (state) => state.isAutoScrolling && !state.isAutoScrollPaused;
 
 // utils/normalizeWheel.ts
 function normalizeWheel(event) {
@@ -254,7 +313,7 @@ function normalizeWheel(event) {
 function useWheelHandler() {
   const scrollAccumulator = useRef(0);
   const lastScrollTime = useRef(0);
-  const isTransitioning = useScrollStore((s) => s.isTransitioning);
+  useScrollStore((s) => s.isTransitioning);
   useEffect(() => {
     const handleWheel = (event) => {
       const state = useScrollStore.getState();
@@ -263,6 +322,24 @@ function useWheelHandler() {
         return;
       }
       const normalized = normalizeWheel(event);
+      const activeView = state.views[state.activeIndex];
+      if (activeView?.capability === "internal") {
+        const scrollContainer = document.querySelector(
+          `[data-view-type="scroll-locked"][data-active="true"] > div`
+        );
+        if (scrollContainer) {
+          const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+          const maxScroll = scrollHeight - clientHeight;
+          const isScrollingDown = normalized.pixelY > 0;
+          const isScrollingUp = normalized.pixelY < 0;
+          const isAtBottom = scrollTop >= maxScroll - 1;
+          const isAtTop = scrollTop <= 1;
+          if (isScrollingDown && !isAtBottom || isScrollingUp && !isAtTop) {
+            scrollAccumulator.current = 0;
+            return;
+          }
+        }
+      }
       const delta = normalized.pixelY;
       scrollAccumulator.current += delta;
       const now = Date.now();
@@ -282,7 +359,6 @@ function useWheelHandler() {
         if (handled) {
           scrollAccumulator.current = 0;
           event.preventDefault();
-        } else {
         }
       }
     };
@@ -290,14 +366,11 @@ function useWheelHandler() {
     return () => window.removeEventListener("wheel", handleWheel);
   }, []);
 }
-
-// hooks/useTouchHandler.ts
-import { useRef as useRef2, useEffect as useEffect2 } from "react";
 function useTouchHandler(options = {}) {
   const { enabled = true } = options;
-  const touchStart = useRef2(null);
-  const touchStartTime = useRef2(0);
-  useEffect2(() => {
+  const touchStart = useRef(null);
+  const touchStartTime = useRef(0);
+  useEffect(() => {
     if (!enabled) return;
     const handleTouchStart = (e) => {
       touchStart.current = {
@@ -338,12 +411,9 @@ function useTouchHandler(options = {}) {
     };
   }, [enabled]);
 }
-
-// hooks/useKeyboardHandler.ts
-import { useEffect as useEffect3 } from "react";
 function useKeyboardHandler(options = {}) {
   const { enabled = true, preventDefault = true } = options;
-  useEffect3(() => {
+  useEffect(() => {
     if (!enabled) return;
     const handleKeyDown = (e) => {
       const target = e.target;
@@ -401,13 +471,10 @@ function useKeyboardHandler(options = {}) {
     };
   }, [enabled, preventDefault]);
 }
-
-// hooks/useHashSync.ts
-import { useEffect as useEffect4, useRef as useRef3 } from "react";
 function useHashSync(options = {}) {
   const { enabled = true, pushHistory = false, hashPrefix = "" } = options;
-  const hasInitialized = useRef3(false);
-  useEffect4(() => {
+  const hasInitialized = useRef(false);
+  useEffect(() => {
     if (!enabled) return;
     const unsubscribe = useScrollStore.subscribe(
       (state) => state.activeIndex,
@@ -428,7 +495,7 @@ function useHashSync(options = {}) {
     );
     return () => unsubscribe();
   }, [enabled, pushHistory, hashPrefix]);
-  useEffect4(() => {
+  useEffect(() => {
     if (!enabled) return;
     const handlePopState = () => {
       const hash = window.location.hash.slice(1);
@@ -443,7 +510,7 @@ function useHashSync(options = {}) {
     window.addEventListener("popstate", handlePopState);
     return () => window.removeEventListener("popstate", handlePopState);
   }, [enabled, hashPrefix]);
-  useEffect4(() => {
+  useEffect(() => {
     if (!enabled) return;
     const checkAndNavigate = () => {
       const state = useScrollStore.getState();
@@ -466,9 +533,6 @@ function useHashSync(options = {}) {
     checkAndNavigate();
   }, [enabled, hashPrefix]);
 }
-
-// hooks/useDragHandler.ts
-import { useRef as useRef4, useEffect as useEffect5, useCallback, useState } from "react";
 var DRAG_THRESHOLD = 50;
 var VELOCITY_THRESHOLD = 0.5;
 var RESISTANCE_FACTOR = 0.4;
@@ -479,9 +543,9 @@ function useDragHandler(options = {}) {
     dragOffset: 0,
     dragDirection: null
   });
-  const touchStartRef = useRef4(null);
-  const lastMoveRef = useRef4(null);
-  const rafRef = useRef4(null);
+  const touchStartRef = useRef(null);
+  const lastMoveRef = useRef(null);
+  const rafRef = useRef(null);
   const updateDragState = useCallback((newState) => {
     setDragState((prev) => {
       const updated = { ...prev, ...newState };
@@ -489,7 +553,7 @@ function useDragHandler(options = {}) {
       return updated;
     });
   }, [onDragUpdate]);
-  useEffect5(() => {
+  useEffect(() => {
     if (!enabled) return;
     const handleTouchStart = (e) => {
       const target = e.target;
@@ -575,16 +639,13 @@ function useDragHandler(options = {}) {
   }, [enabled, updateDragState, onDragEnd]);
   return dragState;
 }
-
-// hooks/useFocusManagement.ts
-import { useEffect as useEffect6, useRef as useRef5 } from "react";
 function useFocusManagement(options = {}) {
   const { enabled = true, focusDelay = 100 } = options;
   const activeIndex = useScrollStore((s) => s.activeIndex);
   const activeId = useScrollStore((s) => s.activeId);
   const isTransitioning = useScrollStore((s) => s.isTransitioning);
-  const prevIndexRef = useRef5(activeIndex);
-  useEffect6(() => {
+  const prevIndexRef = useRef(activeIndex);
+  useEffect(() => {
     if (!enabled) return;
     if (activeIndex !== prevIndexRef.current && !isTransitioning && activeId) {
       const timer = setTimeout(() => {
@@ -601,9 +662,6 @@ function useFocusManagement(options = {}) {
     }
   }, [activeIndex, activeId, isTransitioning, enabled, focusDelay]);
 }
-
-// hooks/useScrollSystem.ts
-import { useCallback as useCallback2, useMemo } from "react";
 function useScrollSystem() {
   const activeIndex = useScrollStore((s) => s.activeIndex);
   const globalProgress = useScrollStore((s) => s.globalProgress);
@@ -623,24 +681,24 @@ function useScrollSystem() {
   const activeViewProgress = activeView?.progress ?? 0;
   const canNavigateNext = useScrollStore(selectCanNavigateNext);
   const canNavigatePrevious = useScrollStore(selectCanNavigatePrevious);
-  const goToNext = useCallback2(() => {
+  const goToNext = useCallback(() => {
     if (canNavigateNext) {
       storeNext();
       return true;
     }
     return false;
   }, [canNavigateNext, storeNext]);
-  const goToPrev = useCallback2(() => {
+  const goToPrev = useCallback(() => {
     if (canNavigatePrevious) {
       storePrev();
       return true;
     }
     return false;
   }, [canNavigatePrevious, storePrev]);
-  const getCurrentIndex = useCallback2(() => activeIndex, [activeIndex]);
-  const getProgress = useCallback2(() => globalProgress, [globalProgress]);
-  const getActiveViewProgress = useCallback2(() => activeViewProgress, [activeViewProgress]);
-  const isLocked = useCallback2(() => isGlobalLocked || isTransitioning || !canNavigateNext, [isGlobalLocked, isTransitioning, canNavigateNext]);
+  const getCurrentIndex = useCallback(() => activeIndex, [activeIndex]);
+  const getProgress = useCallback(() => globalProgress, [globalProgress]);
+  const getActiveViewProgress = useCallback(() => activeViewProgress, [activeViewProgress]);
+  const isLocked = useCallback(() => isGlobalLocked || isTransitioning || !canNavigateNext, [isGlobalLocked, isTransitioning, canNavigateNext]);
   return useMemo(() => ({
     goToNext,
     goToPrev,
@@ -677,6 +735,255 @@ function useScrollSystem() {
     isTransitioning
   ]);
 }
+function useGlobalProgress(options = {}) {
+  const { onProgress, throttle: throttle2 = 16 } = options;
+  const progress = useScrollStore(selectGlobalProgress);
+  const activeIndex = useScrollStore((s) => s.activeIndex);
+  const totalViews = useScrollStore((s) => s.totalViews);
+  useEffect(() => {
+    if (!onProgress) return;
+    let lastCall = 0;
+    const now = Date.now();
+    if (now - lastCall >= throttle2) {
+      lastCall = now;
+      onProgress(progress);
+    }
+  }, [progress, onProgress, throttle2]);
+  return {
+    progress,
+    activeIndex,
+    totalViews,
+    percentage: Math.round(progress * 100)
+  };
+}
+var DEFAULT_CONFIG = {
+  enabled: false,
+  interval: 5e3,
+  pauseOnInteraction: true,
+  resumeDelay: 3e3,
+  direction: "forward",
+  stopAtEnd: false
+};
+function useAutoScroll(config) {
+  const mergedConfig = { ...DEFAULT_CONFIG, ...config };
+  const {
+    enabled,
+    interval,
+    pauseOnInteraction,
+    resumeDelay,
+    direction,
+    stopAtEnd
+  } = mergedConfig;
+  const intervalRef = useRef(null);
+  const resumeTimeoutRef = useRef(null);
+  const isAutoScrolling = useScrollStore((s) => s.isAutoScrolling);
+  const isAutoScrollPaused = useScrollStore((s) => s.isAutoScrollPaused);
+  const isTransitioning = useScrollStore((s) => s.isTransitioning);
+  const activeIndex = useScrollStore((s) => s.activeIndex);
+  const totalViews = useScrollStore((s) => s.totalViews);
+  const infiniteScrollEnabled = useScrollStore((s) => s.infiniteScrollEnabled);
+  const isDragging = useScrollStore((s) => s.isDragging);
+  const setAutoScrolling = useScrollStore((s) => s.setAutoScrolling);
+  const setAutoScrollPaused = useScrollStore((s) => s.setAutoScrollPaused);
+  const goToNext = useScrollStore((s) => s.goToNext);
+  const goToPrevious = useScrollStore((s) => s.goToPrevious);
+  const pause = useCallback(() => {
+    setAutoScrollPaused(true);
+    if (resumeTimeoutRef.current) {
+      clearTimeout(resumeTimeoutRef.current);
+      resumeTimeoutRef.current = null;
+    }
+  }, [setAutoScrollPaused]);
+  const resume = useCallback(() => {
+    setAutoScrollPaused(false);
+  }, [setAutoScrollPaused]);
+  const toggle = useCallback(() => {
+    if (isAutoScrollPaused) {
+      resume();
+    } else {
+      pause();
+    }
+  }, [isAutoScrollPaused, pause, resume]);
+  const reset = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+  useEffect(() => {
+    if (!enabled || !pauseOnInteraction) return;
+    if (isDragging || isTransitioning) {
+      pause();
+      if (resumeTimeoutRef.current) {
+        clearTimeout(resumeTimeoutRef.current);
+      }
+      resumeTimeoutRef.current = setTimeout(() => {
+        if (enabled) {
+          resume();
+        }
+      }, resumeDelay);
+    }
+    return () => {
+      if (resumeTimeoutRef.current) {
+        clearTimeout(resumeTimeoutRef.current);
+      }
+    };
+  }, [isDragging, isTransitioning, enabled, pauseOnInteraction, resumeDelay, pause, resume]);
+  useEffect(() => {
+    setAutoScrolling(enabled);
+    setAutoScrollPaused(false);
+    return () => {
+      setAutoScrolling(false);
+    };
+  }, [enabled, setAutoScrolling, setAutoScrollPaused]);
+  useEffect(() => {
+    if (!enabled || isAutoScrollPaused || isTransitioning) {
+      reset();
+      return;
+    }
+    if (stopAtEnd && !infiniteScrollEnabled) {
+      if (direction === "forward" && activeIndex >= totalViews - 1) {
+        return;
+      }
+      if (direction === "backward" && activeIndex <= 0) {
+        return;
+      }
+    }
+    intervalRef.current = setInterval(() => {
+      if (direction === "forward") {
+        goToNext();
+      } else {
+        goToPrevious();
+      }
+    }, interval);
+    return () => {
+      reset();
+    };
+  }, [
+    enabled,
+    isAutoScrollPaused,
+    isTransitioning,
+    interval,
+    direction,
+    stopAtEnd,
+    activeIndex,
+    totalViews,
+    infiniteScrollEnabled,
+    goToNext,
+    goToPrevious,
+    reset
+  ]);
+  return {
+    isPlaying: isAutoScrolling && !isAutoScrollPaused,
+    isPaused: isAutoScrollPaused,
+    pause,
+    resume,
+    toggle,
+    reset
+  };
+}
+var DEFAULT_CONFIG2 = {
+  enabled: false,
+  loopDirection: "both"
+};
+function useInfiniteScroll(config = false) {
+  const normalizedConfig = typeof config === "boolean" ? { ...DEFAULT_CONFIG2, enabled: config } : { ...DEFAULT_CONFIG2, ...config };
+  const { enabled, loopDirection } = normalizedConfig;
+  const infiniteScrollEnabled = useScrollStore((s) => s.infiniteScrollEnabled);
+  const setInfiniteScrollEnabled = useScrollStore((s) => s.setInfiniteScrollEnabled);
+  const activeIndex = useScrollStore((s) => s.activeIndex);
+  const totalViews = useScrollStore((s) => s.totalViews);
+  useEffect(() => {
+    setInfiniteScrollEnabled(enabled);
+    return () => {
+    };
+  }, [enabled, setInfiniteScrollEnabled]);
+  const enable = () => setInfiniteScrollEnabled(true);
+  const disable = () => setInfiniteScrollEnabled(false);
+  const toggle = () => setInfiniteScrollEnabled(!infiniteScrollEnabled);
+  const canLoopForward = infiniteScrollEnabled && (loopDirection === "forward" || loopDirection === "both") && activeIndex === totalViews - 1;
+  const canLoopBackward = infiniteScrollEnabled && (loopDirection === "backward" || loopDirection === "both") && activeIndex === 0;
+  return {
+    isEnabled: infiniteScrollEnabled,
+    enable,
+    disable,
+    toggle,
+    canLoopForward,
+    canLoopBackward
+  };
+}
+var DEFAULT_CONFIG3 = {
+  ahead: 1,
+  behind: 1,
+  delay: 100
+};
+function usePreload(config = {}) {
+  const mergedConfig = { ...DEFAULT_CONFIG3, ...config };
+  const { ahead, behind, delay } = mergedConfig;
+  const views = useScrollStore((s) => s.views);
+  const activeIndex = useScrollStore((s) => s.activeIndex);
+  const totalViews = useScrollStore((s) => s.totalViews);
+  const infiniteScrollEnabled = useScrollStore((s) => s.infiniteScrollEnabled);
+  const setViewPreloaded = useScrollStore((s) => s.setViewPreloaded);
+  const preloadedViewIds = useMemo(() => {
+    const ids = [];
+    for (let i = -behind; i <= ahead; i++) {
+      let targetIndex = activeIndex + i;
+      if (infiniteScrollEnabled) {
+        if (targetIndex < 0) targetIndex = totalViews + targetIndex;
+        if (targetIndex >= totalViews) targetIndex = targetIndex - totalViews;
+      }
+      if (targetIndex >= 0 && targetIndex < totalViews) {
+        const view = views[targetIndex];
+        if (view) {
+          ids.push(view.id);
+        }
+      }
+    }
+    return ids;
+  }, [activeIndex, ahead, behind, views, totalViews, infiniteScrollEnabled]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      views.forEach((view) => {
+        const shouldBePreloaded = preloadedViewIds.includes(view.id);
+        if (view.isPreloaded !== shouldBePreloaded) {
+          setViewPreloaded(view.id, shouldBePreloaded);
+        }
+      });
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [preloadedViewIds, views, setViewPreloaded, delay]);
+  const shouldPreload = (viewId) => {
+    return preloadedViewIds.includes(viewId);
+  };
+  const isPreloaded = (viewId) => {
+    const view = views.find((v) => v.id === viewId);
+    return view?.isPreloaded ?? false;
+  };
+  return {
+    shouldPreload,
+    preloadedViewIds,
+    isPreloaded
+  };
+}
+var DEFAULT_GESTURE_CONFIG = {
+  swipeThreshold: 50,
+  swipeVelocity: 0.5,
+  dragResistance: 0.3,
+  enableWheel: true,
+  enableTouch: true,
+  enableKeyboard: true
+};
+var GestureConfigContext = createContext(DEFAULT_GESTURE_CONFIG);
+function useGestureConfig() {
+  return useContext(GestureConfigContext);
+}
+function mergeGestureConfig(config) {
+  return useMemo(() => ({
+    ...DEFAULT_GESTURE_CONFIG,
+    ...config
+  }), [config]);
+}
 
 // utils/index.ts
 function throttle(fn, limit) {
@@ -705,9 +1012,6 @@ function prefersReducedMotion() {
   if (typeof window === "undefined") return false;
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-
-// components/ScrollContainer.tsx
-import { jsx } from "react/jsx-runtime";
 function ScrollContainer({
   children,
   className = "",
@@ -725,12 +1029,20 @@ function ScrollContainer({
   // Touch Physics
   enableDragPhysics = false,
   // Layout
-  orientation = "vertical"
+  orientation = "vertical",
+  // NEW: v1.1.0 Features
+  skipInitialAnimation = false,
+  onProgress,
+  gestureConfig,
+  autoScroll,
+  infiniteScroll = false,
+  preload = true
 }) {
-  const containerRef = useRef6(null);
+  const containerRef = useRef(null);
+  const isFirstRender = useRef(true);
   const isBrowser = typeof window !== "undefined";
-  const [reducedMotion, setReducedMotion] = useState2(false);
-  useEffect7(() => {
+  const [reducedMotion, setReducedMotion] = useState(false);
+  useEffect(() => {
     if (!isBrowser || !respectReducedMotion) return;
     setReducedMotion(prefersReducedMotion());
     const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
@@ -741,9 +1053,9 @@ function ScrollContainer({
   const effectiveDuration = reducedMotion ? 0 : transitionDuration;
   const { initialize, endTransition } = useScrollStore();
   const activeIndex = useScrollStore((s) => s.activeIndex);
-  const totalViews = useScrollStore((s) => s.totalViews);
-  const isInitialized = useScrollStore((s) => s.isInitialized);
-  const prevIndexRef = useRef6(activeIndex);
+  useScrollStore((s) => s.totalViews);
+  useScrollStore((s) => s.isInitialized);
+  const prevIndexRef = useRef(activeIndex);
   useWheelHandler();
   useTouchHandler({ enabled: !enableDragPhysics });
   useKeyboardHandler();
@@ -756,14 +1068,39 @@ function ScrollContainer({
     hashPrefix
   });
   useFocusManagement({ enabled: enableFocusManagement });
-  useEffect7(() => {
+  useGlobalProgress({ onProgress });
+  useInfiniteScroll(infiniteScroll);
+  const autoScrollState = useAutoScroll(
+    autoScroll ?? { enabled: false, interval: 5e3 }
+  );
+  const preloadConfig = typeof preload === "boolean" ? preload ? { ahead: 1, behind: 1 } : void 0 : preload;
+  usePreload(preloadConfig ?? {});
+  const mergedGestureConfig = mergeGestureConfig(gestureConfig);
+  useEffect(() => {
     const timer = setTimeout(() => {
       initialize();
       onInitialized?.();
+      isFirstRender.current = false;
     }, 50);
     return () => clearTimeout(timer);
   }, [initialize, onInitialized]);
-  useEffect7(() => {
+  useEffect(() => {
+    if (!isBrowser) return;
+    const html = document.documentElement;
+    const body = document.body;
+    const originalHtmlOverscroll = html.style.overscrollBehavior;
+    const originalBodyOverscroll = body.style.overscrollBehavior;
+    const originalTouchAction = body.style.touchAction;
+    html.style.overscrollBehavior = "none";
+    body.style.overscrollBehavior = "none";
+    body.style.touchAction = "pan-x pan-y";
+    return () => {
+      html.style.overscrollBehavior = originalHtmlOverscroll;
+      body.style.overscrollBehavior = originalBodyOverscroll;
+      body.style.touchAction = originalTouchAction;
+    };
+  }, [isBrowser]);
+  useEffect(() => {
     if (prevIndexRef.current !== activeIndex) {
       onViewChange?.(prevIndexRef.current, activeIndex);
       const timer = setTimeout(() => {
@@ -773,37 +1110,34 @@ function ScrollContainer({
       return () => clearTimeout(timer);
     }
   }, [activeIndex, effectiveDuration, onViewChange, endTransition]);
-  const wrapperStyle = useMemo2(() => {
+  const wrapperStyle = useMemo(() => {
     const baseOffset = activeIndex * 100;
     const dragOffset = dragState.isDragging ? dragState.dragOffset * 100 : 0;
     const transformAxis = orientation === "horizontal" ? "X" : "Y";
     const sizeUnit = orientation === "horizontal" ? "vw" : "vh";
+    const shouldAnimate = !skipInitialAnimation || !isFirstRender.current;
+    const transitionValue = dragState.isDragging ? "none" : shouldAnimate && effectiveDuration > 0 ? `transform ${effectiveDuration}ms ${transitionEasing}` : "none";
     return {
       transform: `translate${transformAxis}(-${baseOffset + dragOffset}${sizeUnit})`,
-      transition: dragState.isDragging ? "none" : effectiveDuration > 0 ? `transform ${effectiveDuration}ms ${transitionEasing}` : "none",
+      transition: transitionValue,
       height: "100%",
       width: "100%",
       display: orientation === "horizontal" ? "flex" : "block",
       flexDirection: orientation === "horizontal" ? "row" : void 0
     };
-  }, [activeIndex, effectiveDuration, transitionEasing, dragState, orientation]);
-  return /* @__PURE__ */ jsx(
+  }, [activeIndex, effectiveDuration, transitionEasing, dragState, orientation, skipInitialAnimation]);
+  return /* @__PURE__ */ jsx(GestureConfigContext.Provider, { value: mergedGestureConfig, children: /* @__PURE__ */ jsx(
     "div",
     {
       ref: containerRef,
       className: `scroll-container fixed inset-0 overflow-hidden w-screen h-screen ${className}`,
       role: "main",
       "aria-label": "Scroll container",
+      "data-auto-scrolling": autoScrollState.isPlaying,
       children: /* @__PURE__ */ jsx("div", { className: "scroll-wrapper", style: wrapperStyle, children })
     }
-  );
+  ) });
 }
-
-// components/FullView.tsx
-import { useMemo as useMemo3 } from "react";
-
-// hooks/useViewRegistration.ts
-import { useEffect as useEffect8, useRef as useRef7 } from "react";
 function useViewRegistration({
   config,
   onActivate,
@@ -817,7 +1151,7 @@ function useViewRegistration({
   const unregisterView = useScrollStore((s) => s.unregisterView);
   const activeId = useScrollStore((s) => s.activeId);
   const isTransitioning = useScrollStore((s) => s.isTransitioning);
-  const callbacksRef = useRef7({
+  const callbacksRef = useRef({
     onActivate,
     onDeactivate,
     onEnterStart,
@@ -833,20 +1167,20 @@ function useViewRegistration({
     onExitStart,
     onExitEnd
   };
-  const wasActiveRef = useRef7(false);
-  const wasTransitioningRef = useRef7(false);
-  const configRef = useRef7(config);
+  const wasActiveRef = useRef(false);
+  const wasTransitioningRef = useRef(false);
+  const configRef = useRef(config);
   if (JSON.stringify(config) !== JSON.stringify(configRef.current)) {
     configRef.current = config;
   }
-  useEffect8(() => {
+  useEffect(() => {
     const currentConfig = configRef.current;
     registerView(currentConfig);
     return () => unregisterView(currentConfig.id);
   }, [registerView, unregisterView, configRef.current]);
   const viewState = useScrollStore((s) => s.views.find((v) => v.id === config.id));
   const isActive = activeId === config.id;
-  useEffect8(() => {
+  useEffect(() => {
     if (isActive && !wasActiveRef.current) {
       callbacksRef.current.onActivate?.();
     } else if (!isActive && wasActiveRef.current) {
@@ -854,7 +1188,7 @@ function useViewRegistration({
     }
     wasActiveRef.current = isActive;
   }, [isActive]);
-  useEffect8(() => {
+  useEffect(() => {
     const callbacks = callbacksRef.current;
     const wasActive = wasActiveRef.current;
     const wasTransitioning = wasTransitioningRef.current;
@@ -882,9 +1216,6 @@ function useViewRegistration({
     navigation: viewState?.navigation ?? "unlocked"
   };
 }
-
-// components/FullView.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
 function FullView({
   id,
   children,
@@ -897,7 +1228,7 @@ function FullView({
   onExitStart,
   onExitEnd
 }) {
-  const config = useMemo3(
+  const config = useMemo(
     () => ({
       id,
       type: "full",
@@ -914,7 +1245,7 @@ function FullView({
     onExitStart,
     onExitEnd
   });
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "section",
     {
       id,
@@ -934,9 +1265,6 @@ function FullView({
     }
   );
 }
-
-// hooks/useMetricsReporter.ts
-import { useRef as useRef8, useCallback as useCallback3, useEffect as useEffect9, useMemo as useMemo4 } from "react";
 var SCROLL_THROTTLE_MS = 66;
 function useMetricsReporter({
   id,
@@ -945,9 +1273,9 @@ function useMetricsReporter({
   onScrollProgress,
   throttleMs = SCROLL_THROTTLE_MS
 }) {
-  const scrollRef = useRef8(null);
+  const scrollRef = useRef(null);
   const updateMetrics = useScrollStore((s) => s.updateViewMetrics);
-  const measureAndReport = useCallback3(() => {
+  const measureAndReport = useCallback(() => {
     const el = scrollRef.current;
     if (!el) return;
     const metrics = {
@@ -962,11 +1290,11 @@ function useMetricsReporter({
       onScrollProgress(progress);
     }
   }, [id, scrollDirection, updateMetrics, onScrollProgress]);
-  const throttledMeasure = useMemo4(
+  const throttledMeasure = useMemo(
     () => throttle(measureAndReport, throttleMs),
     [measureAndReport, throttleMs]
   );
-  useEffect9(() => {
+  useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
     const resizeObserver = new ResizeObserver(() => {
@@ -981,16 +1309,13 @@ function useMetricsReporter({
       el.removeEventListener("scroll", throttledMeasure);
     };
   }, [measureAndReport, throttledMeasure]);
-  useEffect9(() => {
+  useEffect(() => {
     if (isActive) {
       measureAndReport();
     }
   }, [isActive, measureAndReport]);
   return { scrollRef, measureAndReport };
 }
-
-// components/ScrollLockedView.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
 function ScrollLockedView({
   id,
   children,
@@ -1026,14 +1351,14 @@ function ScrollLockedView({
     onScrollProgress
   });
   const scrollClasses = scrollDirection === "vertical" ? "overflow-y-auto overflow-x-hidden" : "overflow-x-auto overflow-y-hidden";
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx(
     "section",
     {
       id,
       className: `relative w-full h-screen ${className}`,
       "data-view-type": "scroll-locked",
       "data-active": isActive,
-      children: /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsx(
         "div",
         {
           ref: scrollRef,
@@ -1045,10 +1370,6 @@ function ScrollLockedView({
     }
   );
 }
-
-// components/ControlledView.tsx
-import { useMemo as useMemo5, useEffect as useEffect10 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
 function ControlledView({
   id,
   children,
@@ -1065,7 +1386,7 @@ function ControlledView({
   onExitEnd
 }) {
   const setExplicitLock = useScrollStore((s) => s.setViewExplicitLock);
-  const config = useMemo5(
+  const config = useMemo(
     () => ({
       id,
       type: "controlled",
@@ -1089,11 +1410,11 @@ function ControlledView({
     isActive,
     scrollDirection: allowInternalScroll ? scrollDirection : "none"
   });
-  useEffect10(() => {
+  useEffect(() => {
     const lockState = canProceed ? "unlocked" : "locked";
     setExplicitLock(id, lockState);
   }, [id, canProceed, setExplicitLock]);
-  const overflowClasses = useMemo5(() => {
+  const overflowClasses = useMemo(() => {
     if (!allowInternalScroll) return "overflow-hidden";
     switch (scrollDirection) {
       case "vertical":
@@ -1104,14 +1425,14 @@ function ControlledView({
         return "overflow-auto";
     }
   }, [allowInternalScroll, scrollDirection]);
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx(
     "section",
     {
       id,
       className: `relative w-full h-screen ${isActive ? "z-10" : "z-0"} ${className}`,
       "data-view-type": "controlled",
       "data-active": isActive,
-      children: /* @__PURE__ */ jsx4(
+      children: /* @__PURE__ */ jsx(
         "div",
         {
           ref: scrollRef,
@@ -1127,7 +1448,7 @@ function useViewControl(viewId) {
   const goToNext = useScrollStore((s) => s.goToNext);
   const goToPrevious = useScrollStore((s) => s.goToPrevious);
   const goToView = useScrollStore((s) => s.goToView);
-  return useMemo5(
+  return useMemo(
     () => ({
       unlock: () => setExplicitLock(viewId, "unlocked"),
       lock: () => setExplicitLock(viewId, "locked"),
@@ -1139,9 +1460,6 @@ function useViewControl(viewId) {
     [viewId, setExplicitLock, goToNext, goToPrevious, goToView]
   );
 }
-
-// components/ScrollDebugOverlay.tsx
-import { jsx as jsx5, jsxs } from "react/jsx-runtime";
 function ScrollDebugOverlay({
   position = "bottom-left",
   visible = true
@@ -1167,29 +1485,29 @@ function ScrollDebugOverlay({
       style: { pointerEvents: "none" },
       children: [
         /* @__PURE__ */ jsxs("div", { className: "text-green-300 font-bold mb-2 flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx5("span", { className: "w-2 h-2 rounded-full bg-green-500 animate-pulse" }),
+          /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-green-500 animate-pulse" }),
           "ScrollSystem Debug"
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-1 mb-3", children: [
-          /* @__PURE__ */ jsx5(Row, { label: "initialized", value: isInitialized }),
-          /* @__PURE__ */ jsx5(Row, { label: "activeIndex", value: `${activeIndex} / ${totalViews - 1}` }),
-          /* @__PURE__ */ jsx5(Row, { label: "transitioning", value: isTransitioning }),
-          /* @__PURE__ */ jsx5(Row, { label: "globalLocked", value: isGlobalLocked })
+          /* @__PURE__ */ jsx(Row, { label: "initialized", value: isInitialized }),
+          /* @__PURE__ */ jsx(Row, { label: "activeIndex", value: `${activeIndex} / ${totalViews - 1}` }),
+          /* @__PURE__ */ jsx(Row, { label: "transitioning", value: isTransitioning }),
+          /* @__PURE__ */ jsx(Row, { label: "globalLocked", value: isGlobalLocked })
         ] }),
         activeView && /* @__PURE__ */ jsxs("div", { className: "border-t border-green-500/20 pt-2 mt-2", children: [
-          /* @__PURE__ */ jsx5("div", { className: "text-green-300/70 mb-1", children: "Active View" }),
-          /* @__PURE__ */ jsx5(Row, { label: "id", value: activeView.id }),
-          /* @__PURE__ */ jsx5(Row, { label: "type", value: activeView.type }),
-          /* @__PURE__ */ jsx5(Row, { label: "capability", value: activeView.capability }),
-          /* @__PURE__ */ jsx5(Row, { label: "navigation", value: activeView.navigation }),
-          /* @__PURE__ */ jsx5(Row, { label: "progress", value: `${(activeView.progress * 100).toFixed(0)}%` }),
-          activeView.explicitLock && /* @__PURE__ */ jsx5(Row, { label: "explicitLock", value: activeView.explicitLock, highlight: true })
+          /* @__PURE__ */ jsx("div", { className: "text-green-300/70 mb-1", children: "Active View" }),
+          /* @__PURE__ */ jsx(Row, { label: "id", value: activeView.id }),
+          /* @__PURE__ */ jsx(Row, { label: "type", value: activeView.type }),
+          /* @__PURE__ */ jsx(Row, { label: "capability", value: activeView.capability }),
+          /* @__PURE__ */ jsx(Row, { label: "navigation", value: activeView.navigation }),
+          /* @__PURE__ */ jsx(Row, { label: "progress", value: `${(activeView.progress * 100).toFixed(0)}%` }),
+          activeView.explicitLock && /* @__PURE__ */ jsx(Row, { label: "explicitLock", value: activeView.explicitLock, highlight: true })
         ] }),
         activeView?.metrics && /* @__PURE__ */ jsxs("div", { className: "border-t border-green-500/20 pt-2 mt-2", children: [
-          /* @__PURE__ */ jsx5("div", { className: "text-green-300/70 mb-1", children: "Metrics" }),
-          /* @__PURE__ */ jsx5(Row, { label: "scrollHeight", value: activeView.metrics.scrollHeight }),
-          /* @__PURE__ */ jsx5(Row, { label: "clientHeight", value: activeView.metrics.clientHeight }),
-          /* @__PURE__ */ jsx5(Row, { label: "scrollTop", value: Math.round(activeView.metrics.scrollTop) })
+          /* @__PURE__ */ jsx("div", { className: "text-green-300/70 mb-1", children: "Metrics" }),
+          /* @__PURE__ */ jsx(Row, { label: "scrollHeight", value: activeView.metrics.scrollHeight }),
+          /* @__PURE__ */ jsx(Row, { label: "clientHeight", value: activeView.metrics.clientHeight }),
+          /* @__PURE__ */ jsx(Row, { label: "scrollTop", value: Math.round(activeView.metrics.scrollTop) })
         ] })
       ]
     }
@@ -1207,23 +1525,19 @@ function Row({
       label,
       ":"
     ] }),
-    /* @__PURE__ */ jsx5("span", { className: valueColor, children: displayValue })
+    /* @__PURE__ */ jsx("span", { className: valueColor, children: displayValue })
   ] });
 }
-
-// components/AriaLiveRegion.tsx
-import { useEffect as useEffect11, useState as useState3 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
 function AriaLiveRegion({
   template = "Navigated to section {viewIndex} of {totalViews}",
   politeness = "polite"
 }) {
-  const [announcement, setAnnouncement] = useState3("");
+  const [announcement, setAnnouncement] = useState("");
   const activeIndex = useScrollStore((s) => s.activeIndex);
   const activeId = useScrollStore((s) => s.activeId);
   const totalViews = useScrollStore((s) => s.totalViews);
   const isTransitioning = useScrollStore((s) => s.isTransitioning);
-  useEffect11(() => {
+  useEffect(() => {
     if (!isTransitioning && activeId) {
       const message = template.replace("{viewIndex}", String(activeIndex + 1)).replace("{viewId}", activeId).replace("{totalViews}", String(totalViews));
       const timer = setTimeout(() => {
@@ -1232,7 +1546,7 @@ function AriaLiveRegion({
       return () => clearTimeout(timer);
     }
   }, [activeIndex, activeId, totalViews, isTransitioning, template]);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       role: "status",
@@ -1254,10 +1568,6 @@ function AriaLiveRegion({
     }
   );
 }
-
-// components/LazyView.tsx
-import { useMemo as useMemo6 } from "react";
-import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
 function LazyView({
   viewId,
   buffer = 1,
@@ -1266,7 +1576,7 @@ function LazyView({
 }) {
   const activeIndex = useScrollStore((s) => s.activeIndex);
   const views = useScrollStore((s) => s.views);
-  const shouldRender = useMemo6(() => {
+  const shouldRender = useMemo(() => {
     const viewIndex = views.findIndex((v) => v.id === viewId);
     if (viewIndex === -1) return false;
     const minIndex = Math.max(0, activeIndex - buffer);
@@ -1274,20 +1584,149 @@ function LazyView({
     return viewIndex >= minIndex && viewIndex <= maxIndex;
   }, [viewId, views, activeIndex, buffer]);
   if (!shouldRender) {
-    return /* @__PURE__ */ jsx7(Fragment, { children: placeholder });
+    return /* @__PURE__ */ jsx(Fragment, { children: placeholder });
   }
-  return /* @__PURE__ */ jsx7(Fragment, { children });
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function NestedScrollView({
+  id,
+  children,
+  className = "",
+  nestedDirection = "horizontal",
+  enableSnap = true,
+  onItemChange,
+  onActivate,
+  onDeactivate,
+  onEnterStart,
+  onEnterEnd,
+  onExitStart,
+  onExitEnd
+}) {
+  const containerRef = useRef(null);
+  const nestedContainerRef = useRef(null);
+  const [activeNestedIndex, setActiveNestedIndex] = useState(0);
+  const [isNestedScrolling, setIsNestedScrolling] = useState(false);
+  useScrollStore((s) => s.activeIndex);
+  const views = useScrollStore((s) => s.views);
+  const setGlobalLock = useScrollStore((s) => s.setGlobalLock);
+  const view = views.find((v) => v.id === id);
+  const isActive = view?.isActive ?? false;
+  useViewRegistration({
+    config: {
+      id,
+      type: "nested",
+      nestedConfig: {
+        direction: nestedDirection,
+        enableSnap,
+        onItemChange
+      }
+    },
+    onActivate,
+    onDeactivate,
+    onEnterStart,
+    onEnterEnd,
+    onExitStart,
+    onExitEnd
+  });
+  useEffect(() => {
+    if (isActive) {
+      onActivate?.();
+    } else {
+      onDeactivate?.();
+    }
+  }, [isActive, onActivate, onDeactivate]);
+  const handleNestedScroll = useCallback((e) => {
+    if (!nestedContainerRef.current) return;
+    const container = nestedContainerRef.current;
+    const scrollPos = nestedDirection === "horizontal" ? container.scrollLeft : container.scrollTop;
+    const itemSize = nestedDirection === "horizontal" ? container.clientWidth : container.clientHeight;
+    if (itemSize > 0) {
+      const newIndex = Math.round(scrollPos / itemSize);
+      if (newIndex !== activeNestedIndex) {
+        setActiveNestedIndex(newIndex);
+        onItemChange?.(newIndex);
+      }
+    }
+  }, [nestedDirection, activeNestedIndex, onItemChange]);
+  const handleTouchStart = useCallback((e) => {
+    setIsNestedScrolling(true);
+    setGlobalLock(true);
+  }, [setGlobalLock]);
+  const handleTouchEnd = useCallback(() => {
+    setTimeout(() => {
+      setIsNestedScrolling(false);
+      setGlobalLock(false);
+    }, 100);
+  }, [setGlobalLock]);
+  useCallback((index) => {
+    if (!nestedContainerRef.current) return;
+    const container = nestedContainerRef.current;
+    const itemSize = nestedDirection === "horizontal" ? container.clientWidth : container.clientHeight;
+    const scrollPos = index * itemSize;
+    container.scrollTo({
+      [nestedDirection === "horizontal" ? "left" : "top"]: scrollPos,
+      behavior: "smooth"
+    });
+  }, [nestedDirection]);
+  const nestedScrollStyle = {
+    display: "flex",
+    flexDirection: nestedDirection === "horizontal" ? "row" : "column",
+    overflow: nestedDirection === "horizontal" ? "auto hidden" : "hidden auto",
+    scrollSnapType: enableSnap ? `${nestedDirection === "horizontal" ? "x" : "y"} mandatory` : "none",
+    scrollBehavior: "smooth",
+    WebkitOverflowScrolling: "touch",
+    width: "100%",
+    height: "100%"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: `scroll-view nested-scroll-view h-screen w-screen flex-shrink-0 relative ${className}`,
+      "data-view-id": id,
+      "data-view-type": "nested",
+      "data-nested-direction": nestedDirection,
+      role: "region",
+      "aria-label": `Nested scroll view ${id}`,
+      tabIndex: 0,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: nestedContainerRef,
+          className: "nested-scroll-container",
+          style: nestedScrollStyle,
+          onScroll: handleNestedScroll,
+          onTouchStart: handleTouchStart,
+          onTouchEnd: handleTouchEnd,
+          children
+        }
+      )
+    }
+  );
+}
+function NestedScrollItem({
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `nested-scroll-item flex-shrink-0 w-full h-full ${className}`,
+      style: {
+        scrollSnapAlign: "start",
+        scrollSnapStop: "always"
+      },
+      children
+    }
+  );
 }
-
-// hooks/useNavigation.ts
-import { useCallback as useCallback4, useMemo as useMemo7 } from "react";
 function useNavigation() {
   const goToView = useScrollStore((s) => s.goToView);
   const goToNextAction = useScrollStore((s) => s.goToNext);
   const goToPreviousAction = useScrollStore((s) => s.goToPrevious);
   const setGlobalLock = useScrollStore((s) => s.setGlobalLock);
-  const lockScroll = useCallback4(() => setGlobalLock(true), [setGlobalLock]);
-  const unlockScroll = useCallback4(() => setGlobalLock(false), [setGlobalLock]);
+  const lockScroll = useCallback(() => setGlobalLock(true), [setGlobalLock]);
+  const unlockScroll = useCallback(() => setGlobalLock(false), [setGlobalLock]);
   const activeIndex = useScrollStore((s) => s.activeIndex);
   const activeId = useScrollStore((s) => s.activeId);
   const totalViews = useScrollStore((s) => s.totalViews);
@@ -1295,16 +1734,16 @@ function useNavigation() {
   const isScrollLocked = useScrollStore((s) => s.isGlobalLocked);
   const canNavigateNext = useScrollStore(selectCanNavigateNext);
   const canNavigatePrevious = useScrollStore(selectCanNavigatePrevious);
-  const goToNext = useCallback4(() => {
+  const goToNext = useCallback(() => {
     return goToNextAction();
   }, [goToNextAction]);
-  const goToPrevious = useCallback4(() => {
+  const goToPrevious = useCallback(() => {
     return goToPreviousAction();
   }, [goToPreviousAction]);
   const isFirstView = activeIndex === 0;
   const isLastView = activeIndex === totalViews - 1;
   const progress = totalViews > 1 ? activeIndex / (totalViews - 1) : 0;
-  return useMemo7(
+  return useMemo(
     () => ({
       // Acciones de navegación
       goToView,
@@ -1374,18 +1813,15 @@ function useActiveViewProgress() {
     viewType: activeView?.type
   };
 }
-
-// hooks/useScrollAnalytics.ts
-import { useEffect as useEffect12, useRef as useRef9, useCallback as useCallback5 } from "react";
 function useScrollAnalytics(options = {}) {
   const { onViewEnter, onViewExit, enabled = true } = options;
   const activeIndex = useScrollStore((s) => s.activeIndex);
   const activeId = useScrollStore((s) => s.activeId);
   const isTransitioning = useScrollStore((s) => s.isTransitioning);
-  const enterTimeRef = useRef9(Date.now());
-  const prevIndexRef = useRef9(activeIndex);
-  const prevIdRef = useRef9(activeId);
-  const createAnalytics = useCallback5((viewId, viewIndex, enterTime, isActive, exitTime = null) => ({
+  const enterTimeRef = useRef(Date.now());
+  const prevIndexRef = useRef(activeIndex);
+  const prevIdRef = useRef(activeId);
+  const createAnalytics = useCallback((viewId, viewIndex, enterTime, isActive, exitTime = null) => ({
     viewId,
     viewIndex,
     enterTime,
@@ -1393,7 +1829,7 @@ function useScrollAnalytics(options = {}) {
     duration: exitTime ? (exitTime - enterTime) / 1e3 : 0,
     isActive
   }), []);
-  useEffect12(() => {
+  useEffect(() => {
     if (!enabled) return;
     if (!isTransitioning && (activeIndex !== prevIndexRef.current || activeId !== prevIdRef.current)) {
       const now = Date.now();
@@ -1428,36 +1864,205 @@ function useScrollAnalytics(options = {}) {
     getTimeInView: () => (Date.now() - enterTimeRef.current) / 1e3
   };
 }
-export {
-  AriaLiveRegion,
-  ControlledView,
-  DEFAULT_PROGRESS_DEBOUNCE,
-  DEFAULT_TRANSITION_DURATION,
-  DEFAULT_TRANSITION_EASING,
-  FullView,
-  LazyView,
-  NAVIGATION_COOLDOWN,
-  NAV_THRESHOLDS,
-  ScrollContainer,
-  ScrollDebugOverlay,
-  ScrollLockedView,
-  selectActiveView,
-  selectActiveViewProgress,
-  selectCanNavigateNext,
-  selectCanNavigatePrevious,
-  useActiveViewProgress,
-  useDragHandler,
-  useFocusManagement,
-  useHashSync,
-  useKeyboardHandler,
-  useMetricsReporter,
-  useNavigation,
-  useScrollAnalytics,
-  useScrollStore,
-  useScrollSystem,
-  useTouchHandler,
-  useViewControl,
-  useViewProgress,
-  useViewRegistration,
-  useWheelHandler
+function useScrollLock() {
+  const isLocked = useScrollStore((s) => s.isGlobalLocked);
+  const setGlobalLock = useScrollStore((s) => s.setGlobalLock);
+  const setViewExplicitLock = useScrollStore((s) => s.setViewExplicitLock);
+  const lock = useCallback(() => {
+    setGlobalLock(true);
+  }, [setGlobalLock]);
+  const unlock = useCallback(() => {
+    setGlobalLock(false);
+  }, [setGlobalLock]);
+  const toggle = useCallback(() => {
+    setGlobalLock(!isLocked);
+  }, [setGlobalLock, isLocked]);
+  const lockView = useCallback((viewId) => {
+    setViewExplicitLock(viewId, "locked");
+  }, [setViewExplicitLock]);
+  const unlockView = useCallback((viewId) => {
+    setViewExplicitLock(viewId, "unlocked");
+  }, [setViewExplicitLock]);
+  return {
+    isLocked,
+    lock,
+    unlock,
+    toggle,
+    lockView,
+    unlockView
+  };
+}
+var DEFAULT_CONFIG4 = {
+  speed: 0.5,
+  direction: "vertical",
+  offset: 0,
+  easing: "linear"
+};
+var easingFunctions = {
+  linear: (t) => t,
+  easeOut: (t) => 1 - Math.pow(1 - t, 2),
+  easeInOut: (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2
 };
+function useParallax(viewId, config = {}) {
+  const mergedConfig = { ...DEFAULT_CONFIG4, ...config };
+  const { speed, direction, offset, easing } = mergedConfig;
+  const views = useScrollStore((s) => s.views);
+  const activeIndex = useScrollStore((s) => s.activeIndex);
+  useScrollStore((s) => s.globalProgress);
+  const result = useMemo(() => {
+    const view = views.find((v) => v.id === viewId);
+    if (!view) {
+      return {
+        transform: 0,
+        style: {},
+        progress: 0
+      };
+    }
+    const viewOffset = view.index - activeIndex;
+    const internalProgress = view.isActive ? view.progress : 0;
+    const combinedProgress = viewOffset + internalProgress;
+    const easingFn = easingFunctions[easing];
+    const easedProgress = easingFn(Math.abs(combinedProgress)) * Math.sign(combinedProgress);
+    const maxDistance = 100;
+    const transformValue = easedProgress * maxDistance * speed + offset;
+    const transformProperty = direction === "vertical" ? `translateY(${transformValue}px)` : `translateX(${transformValue}px)`;
+    const style = {
+      transform: transformProperty,
+      willChange: "transform"
+    };
+    return {
+      transform: transformValue,
+      style,
+      progress: combinedProgress
+    };
+  }, [viewId, views, activeIndex, speed, direction, offset, easing]);
+  return result;
+}
+function useActiveParallax(config = {}) {
+  const mergedConfig = { ...DEFAULT_CONFIG4, ...config };
+  const { speed, direction, offset, easing } = mergedConfig;
+  const globalProgress = useScrollStore((s) => s.globalProgress);
+  const activeIndex = useScrollStore((s) => s.activeIndex);
+  const views = useScrollStore((s) => s.views);
+  return useMemo(() => {
+    const activeView = views[activeIndex];
+    const viewProgress = activeView?.progress ?? 0;
+    const easingFn = easingFunctions[easing];
+    const easedProgress = easingFn(viewProgress);
+    const maxDistance = 100;
+    const transformValue = easedProgress * maxDistance * speed + offset;
+    const transformProperty = direction === "vertical" ? `translateY(${transformValue}px)` : `translateX(${transformValue}px)`;
+    const style = {
+      transform: transformProperty,
+      willChange: "transform"
+    };
+    return {
+      transform: transformValue,
+      style,
+      progress: viewProgress
+    };
+  }, [globalProgress, activeIndex, views, speed, direction, offset, easing]);
+}
+function useSnapPoints(options) {
+  const { viewId, points, snapThreshold = 0.1, smoothScroll = true } = options;
+  const scrollContainerRef = useRef(null);
+  const lastActivePointRef = useRef(null);
+  const views = useScrollStore((s) => s.views);
+  const setActiveSnapPoint = useScrollStore((s) => s.setActiveSnapPoint);
+  const view = useMemo(() => views.find((v) => v.id === viewId), [views, viewId]);
+  const viewProgress = view?.progress ?? 0;
+  view?.activeSnapPointId ?? null;
+  const sortedPoints = useMemo(
+    () => [...points].sort((a, b) => a.position - b.position),
+    [points]
+  );
+  const activePointData = useMemo(() => {
+    if (sortedPoints.length === 0) {
+      return { point: null, index: -1 };
+    }
+    let closestIndex = 0;
+    let closestDistance = Math.abs(viewProgress - sortedPoints[0].position);
+    for (let i = 1; i < sortedPoints.length; i++) {
+      const distance = Math.abs(viewProgress - sortedPoints[i].position);
+      if (distance < closestDistance) {
+        closestDistance = distance;
+        closestIndex = i;
+      }
+    }
+    if (closestDistance <= snapThreshold) {
+      return { point: sortedPoints[closestIndex], index: closestIndex };
+    }
+    for (let i = sortedPoints.length - 1; i >= 0; i--) {
+      if (viewProgress >= sortedPoints[i].position - snapThreshold) {
+        return { point: sortedPoints[i], index: i };
+      }
+    }
+    return { point: sortedPoints[0], index: 0 };
+  }, [viewProgress, sortedPoints, snapThreshold]);
+  useEffect(() => {
+    const newPointId = activePointData.point?.id ?? null;
+    if (newPointId !== lastActivePointRef.current) {
+      if (lastActivePointRef.current) {
+        const prevPoint = sortedPoints.find((p) => p.id === lastActivePointRef.current);
+        prevPoint?.onLeave?.();
+      }
+      setActiveSnapPoint(viewId, newPointId);
+      if (newPointId) {
+        const newPoint = sortedPoints.find((p) => p.id === newPointId);
+        newPoint?.onReach?.();
+      }
+      lastActivePointRef.current = newPointId;
+    }
+  }, [activePointData.point?.id, viewId, sortedPoints, setActiveSnapPoint]);
+  const goToPoint = useCallback((pointId) => {
+    const point = sortedPoints.find((p) => p.id === pointId);
+    if (!point || !scrollContainerRef.current) return;
+    const container = scrollContainerRef.current;
+    const maxScroll = container.scrollHeight - container.clientHeight;
+    const targetScroll = point.position * maxScroll;
+    container.scrollTo({
+      top: targetScroll,
+      behavior: smoothScroll ? "smooth" : "auto"
+    });
+  }, [sortedPoints, smoothScroll]);
+  const goToNextPoint = useCallback(() => {
+    const nextIndex = Math.min(activePointData.index + 1, sortedPoints.length - 1);
+    const nextPoint = sortedPoints[nextIndex];
+    if (nextPoint) {
+      goToPoint(nextPoint.id);
+    }
+  }, [activePointData.index, sortedPoints, goToPoint]);
+  const goToPrevPoint = useCallback(() => {
+    const prevIndex = Math.max(activePointData.index - 1, 0);
+    const prevPoint = sortedPoints[prevIndex];
+    if (prevPoint) {
+      goToPoint(prevPoint.id);
+    }
+  }, [activePointData.index, sortedPoints, goToPoint]);
+  const pointsWithState = useMemo(
+    () => sortedPoints.map((point) => ({
+      ...point,
+      isActive: point.id === activePointData.point?.id
+    })),
+    [sortedPoints, activePointData.point?.id]
+  );
+  return {
+    activePoint: activePointData.point,
+    activeIndex: activePointData.index,
+    goToPoint,
+    goToNextPoint,
+    goToPrevPoint,
+    points: pointsWithState,
+    progress: viewProgress
+  };
+}
+function createSnapPoints(positions, options) {
+  const { prefix = "snap", labels } = options ?? {};
+  return positions.map((position, index) => ({
+    id: `${prefix}-${index}`,
+    position,
+    label: labels?.[index] ?? `Section ${index + 1}`
+  }));
+}
+
+export { AriaLiveRegion, ControlledView, DEFAULT_PROGRESS_DEBOUNCE, DEFAULT_TRANSITION_DURATION, DEFAULT_TRANSITION_EASING, FullView, LazyView, NAVIGATION_COOLDOWN, NAV_THRESHOLDS, NestedScrollItem, NestedScrollView, ScrollContainer, ScrollDebugOverlay, ScrollLockedView, createSnapPoints, selectActiveView, selectActiveViewProgress, selectCanNavigateNext, selectCanNavigatePrevious, selectGlobalProgress, selectIsAutoScrolling, useActiveParallax, useActiveViewProgress, useAutoScroll, useDragHandler, useFocusManagement, useGestureConfig, useGlobalProgress, useHashSync, useInfiniteScroll, useKeyboardHandler, useMetricsReporter, useNavigation, useParallax, usePreload, useScrollAnalytics, useScrollLock, useScrollStore, useScrollSystem, useSnapPoints, useTouchHandler, useViewControl, useViewProgress, useViewRegistration, useWheelHandler };