scroll-system 1.0.1 → 1.1.1

package/dist/index.js

@@ -1,65 +1,11 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// index.ts
-var index_exports = {};
-__export(index_exports, {
-  AriaLiveRegion: () => AriaLiveRegion,
-  ControlledView: () => ControlledView,
-  DEFAULT_PROGRESS_DEBOUNCE: () => DEFAULT_PROGRESS_DEBOUNCE,
-  DEFAULT_TRANSITION_DURATION: () => DEFAULT_TRANSITION_DURATION,
-  DEFAULT_TRANSITION_EASING: () => DEFAULT_TRANSITION_EASING,
-  FullView: () => FullView,
-  LazyView: () => LazyView,
-  NAVIGATION_COOLDOWN: () => NAVIGATION_COOLDOWN,
-  NAV_THRESHOLDS: () => NAV_THRESHOLDS,
-  ScrollContainer: () => ScrollContainer,
-  ScrollDebugOverlay: () => ScrollDebugOverlay,
-  ScrollLockedView: () => ScrollLockedView,
-  selectActiveView: () => selectActiveView,
-  selectActiveViewProgress: () => selectActiveViewProgress,
-  selectCanNavigateNext: () => selectCanNavigateNext,
-  selectCanNavigatePrevious: () => selectCanNavigatePrevious,
-  useActiveViewProgress: () => useActiveViewProgress,
-  useDragHandler: () => useDragHandler,
-  useFocusManagement: () => useFocusManagement,
-  useHashSync: () => useHashSync,
-  useKeyboardHandler: () => useKeyboardHandler,
-  useMetricsReporter: () => useMetricsReporter,
-  useNavigation: () => useNavigation,
-  useScrollAnalytics: () => useScrollAnalytics,
-  useScrollStore: () => useScrollStore,
-  useScrollSystem: () => useScrollSystem,
-  useTouchHandler: () => useTouchHandler,
-  useViewControl: () => useViewControl,
-  useViewProgress: () => useViewProgress,
-  useViewRegistration: () => useViewRegistration,
-  useWheelHandler: () => useWheelHandler
-});
-module.exports = __toCommonJS(index_exports);
+var react = require('react');
+var zustand = require('zustand');
+var middleware = require('zustand/middleware');
+var jsxRuntime = require('react/jsx-runtime');
 
 // components/ScrollContainer.tsx
-var import_react8 = require("react");
-
-// store/navigation.store.ts
-var import_zustand = require("zustand");
-var import_middleware = require("zustand/middleware");
 
 // constants.ts
 var DEFAULT_TRANSITION_DURATION = 700;
@@ -78,6 +24,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";
 }
@@ -101,11 +48,16 @@ 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 = (0, import_zustand.create)()(
-  (0, import_middleware.subscribeWithSelector)((set, get) => ({
+var useScrollStore = zustand.create()(
+  middleware.subscribeWithSelector((set, get) => ({
     ...initialState,
     initialize: () => {
       const { views } = get();
@@ -126,12 +78,15 @@ var useScrollStore = (0, import_zustand.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 {
@@ -172,7 +127,10 @@ var useScrollStore = (0, import_zustand.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) => {
@@ -183,10 +141,15 @@ var useScrollStore = (0, import_zustand.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) {
@@ -200,21 +163,28 @@ var useScrollStore = (0, import_zustand.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();
@@ -222,19 +192,29 @@ var useScrollStore = (0, import_zustand.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) => {
@@ -249,9 +229,33 @@ var useScrollStore = (0, import_zustand.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;
     }
@@ -263,15 +267,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
-var import_react = require("react");
+var selectGlobalProgress = (state) => state.globalProgress;
+var selectIsAutoScrolling = (state) => state.isAutoScrolling && !state.isAutoScrollPaused;
 
 // utils/normalizeWheel.ts
 function normalizeWheel(event) {
@@ -308,10 +313,10 @@ function normalizeWheel(event) {
 
 // hooks/useWheelHandler.ts
 function useWheelHandler() {
-  const scrollAccumulator = (0, import_react.useRef)(0);
-  const lastScrollTime = (0, import_react.useRef)(0);
-  const isTransitioning = useScrollStore((s) => s.isTransitioning);
-  (0, import_react.useEffect)(() => {
+  const scrollAccumulator = react.useRef(0);
+  const lastScrollTime = react.useRef(0);
+  useScrollStore((s) => s.isTransitioning);
+  react.useEffect(() => {
     const handleWheel = (event) => {
       const state = useScrollStore.getState();
       if (state.isTransitioning || state.isDragging) {
@@ -319,6 +324,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();
@@ -338,7 +361,6 @@ function useWheelHandler() {
         if (handled) {
           scrollAccumulator.current = 0;
           event.preventDefault();
-        } else {
         }
       }
     };
@@ -346,14 +368,11 @@ function useWheelHandler() {
     return () => window.removeEventListener("wheel", handleWheel);
   }, []);
 }
-
-// hooks/useTouchHandler.ts
-var import_react2 = require("react");
 function useTouchHandler(options = {}) {
   const { enabled = true } = options;
-  const touchStart = (0, import_react2.useRef)(null);
-  const touchStartTime = (0, import_react2.useRef)(0);
-  (0, import_react2.useEffect)(() => {
+  const touchStart = react.useRef(null);
+  const touchStartTime = react.useRef(0);
+  react.useEffect(() => {
     if (!enabled) return;
     const handleTouchStart = (e) => {
       touchStart.current = {
@@ -394,12 +413,9 @@ function useTouchHandler(options = {}) {
     };
   }, [enabled]);
 }
-
-// hooks/useKeyboardHandler.ts
-var import_react3 = require("react");
 function useKeyboardHandler(options = {}) {
   const { enabled = true, preventDefault = true } = options;
-  (0, import_react3.useEffect)(() => {
+  react.useEffect(() => {
     if (!enabled) return;
     const handleKeyDown = (e) => {
       const target = e.target;
@@ -457,13 +473,10 @@ function useKeyboardHandler(options = {}) {
     };
   }, [enabled, preventDefault]);
 }
-
-// hooks/useHashSync.ts
-var import_react4 = require("react");
 function useHashSync(options = {}) {
   const { enabled = true, pushHistory = false, hashPrefix = "" } = options;
-  const hasInitialized = (0, import_react4.useRef)(false);
-  (0, import_react4.useEffect)(() => {
+  const hasInitialized = react.useRef(false);
+  react.useEffect(() => {
     if (!enabled) return;
     const unsubscribe = useScrollStore.subscribe(
       (state) => state.activeIndex,
@@ -484,7 +497,7 @@ function useHashSync(options = {}) {
     );
     return () => unsubscribe();
   }, [enabled, pushHistory, hashPrefix]);
-  (0, import_react4.useEffect)(() => {
+  react.useEffect(() => {
     if (!enabled) return;
     const handlePopState = () => {
       const hash = window.location.hash.slice(1);
@@ -499,7 +512,7 @@ function useHashSync(options = {}) {
     window.addEventListener("popstate", handlePopState);
     return () => window.removeEventListener("popstate", handlePopState);
   }, [enabled, hashPrefix]);
-  (0, import_react4.useEffect)(() => {
+  react.useEffect(() => {
     if (!enabled) return;
     const checkAndNavigate = () => {
       const state = useScrollStore.getState();
@@ -522,30 +535,27 @@ function useHashSync(options = {}) {
     checkAndNavigate();
   }, [enabled, hashPrefix]);
 }
-
-// hooks/useDragHandler.ts
-var import_react5 = require("react");
 var DRAG_THRESHOLD = 50;
 var VELOCITY_THRESHOLD = 0.5;
 var RESISTANCE_FACTOR = 0.4;
 function useDragHandler(options = {}) {
   const { enabled = true, onDragUpdate, onDragEnd } = options;
-  const [dragState, setDragState] = (0, import_react5.useState)({
+  const [dragState, setDragState] = react.useState({
     isDragging: false,
     dragOffset: 0,
     dragDirection: null
   });
-  const touchStartRef = (0, import_react5.useRef)(null);
-  const lastMoveRef = (0, import_react5.useRef)(null);
-  const rafRef = (0, import_react5.useRef)(null);
-  const updateDragState = (0, import_react5.useCallback)((newState) => {
+  const touchStartRef = react.useRef(null);
+  const lastMoveRef = react.useRef(null);
+  const rafRef = react.useRef(null);
+  const updateDragState = react.useCallback((newState) => {
     setDragState((prev) => {
       const updated = { ...prev, ...newState };
       onDragUpdate?.(updated);
       return updated;
     });
   }, [onDragUpdate]);
-  (0, import_react5.useEffect)(() => {
+  react.useEffect(() => {
     if (!enabled) return;
     const handleTouchStart = (e) => {
       const target = e.target;
@@ -631,16 +641,13 @@ function useDragHandler(options = {}) {
   }, [enabled, updateDragState, onDragEnd]);
   return dragState;
 }
-
-// hooks/useFocusManagement.ts
-var import_react6 = require("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 = (0, import_react6.useRef)(activeIndex);
-  (0, import_react6.useEffect)(() => {
+  const prevIndexRef = react.useRef(activeIndex);
+  react.useEffect(() => {
     if (!enabled) return;
     if (activeIndex !== prevIndexRef.current && !isTransitioning && activeId) {
       const timer = setTimeout(() => {
@@ -657,9 +664,6 @@ function useFocusManagement(options = {}) {
     }
   }, [activeIndex, activeId, isTransitioning, enabled, focusDelay]);
 }
-
-// hooks/useScrollSystem.ts
-var import_react7 = require("react");
 function useScrollSystem() {
   const activeIndex = useScrollStore((s) => s.activeIndex);
   const globalProgress = useScrollStore((s) => s.globalProgress);
@@ -679,25 +683,25 @@ function useScrollSystem() {
   const activeViewProgress = activeView?.progress ?? 0;
   const canNavigateNext = useScrollStore(selectCanNavigateNext);
   const canNavigatePrevious = useScrollStore(selectCanNavigatePrevious);
-  const goToNext = (0, import_react7.useCallback)(() => {
+  const goToNext = react.useCallback(() => {
     if (canNavigateNext) {
       storeNext();
       return true;
     }
     return false;
   }, [canNavigateNext, storeNext]);
-  const goToPrev = (0, import_react7.useCallback)(() => {
+  const goToPrev = react.useCallback(() => {
     if (canNavigatePrevious) {
       storePrev();
       return true;
     }
     return false;
   }, [canNavigatePrevious, storePrev]);
-  const getCurrentIndex = (0, import_react7.useCallback)(() => activeIndex, [activeIndex]);
-  const getProgress = (0, import_react7.useCallback)(() => globalProgress, [globalProgress]);
-  const getActiveViewProgress = (0, import_react7.useCallback)(() => activeViewProgress, [activeViewProgress]);
-  const isLocked = (0, import_react7.useCallback)(() => isGlobalLocked || isTransitioning || !canNavigateNext, [isGlobalLocked, isTransitioning, canNavigateNext]);
-  return (0, import_react7.useMemo)(() => ({
+  const getCurrentIndex = react.useCallback(() => activeIndex, [activeIndex]);
+  const getProgress = react.useCallback(() => globalProgress, [globalProgress]);
+  const getActiveViewProgress = react.useCallback(() => activeViewProgress, [activeViewProgress]);
+  const isLocked = react.useCallback(() => isGlobalLocked || isTransitioning || !canNavigateNext, [isGlobalLocked, isTransitioning, canNavigateNext]);
+  return react.useMemo(() => ({
     goToNext,
     goToPrev,
     goTo: storeGoTo,
@@ -733,6 +737,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);
+  react.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 = react.useRef(null);
+  const resumeTimeoutRef = react.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 = react.useCallback(() => {
+    setAutoScrollPaused(true);
+    if (resumeTimeoutRef.current) {
+      clearTimeout(resumeTimeoutRef.current);
+      resumeTimeoutRef.current = null;
+    }
+  }, [setAutoScrollPaused]);
+  const resume = react.useCallback(() => {
+    setAutoScrollPaused(false);
+  }, [setAutoScrollPaused]);
+  const toggle = react.useCallback(() => {
+    if (isAutoScrollPaused) {
+      resume();
+    } else {
+      pause();
+    }
+  }, [isAutoScrollPaused, pause, resume]);
+  const reset = react.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+  react.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]);
+  react.useEffect(() => {
+    setAutoScrolling(enabled);
+    setAutoScrollPaused(false);
+    return () => {
+      setAutoScrolling(false);
+    };
+  }, [enabled, setAutoScrolling, setAutoScrollPaused]);
+  react.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);
+  react.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 = react.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]);
+  react.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 = react.createContext(DEFAULT_GESTURE_CONFIG);
+function useGestureConfig() {
+  return react.useContext(GestureConfigContext);
+}
+function mergeGestureConfig(config) {
+  return react.useMemo(() => ({
+    ...DEFAULT_GESTURE_CONFIG,
+    ...config
+  }), [config]);
+}
 
 // utils/index.ts
 function throttle(fn, limit) {
@@ -761,9 +1014,6 @@ function prefersReducedMotion() {
   if (typeof window === "undefined") return false;
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-
-// components/ScrollContainer.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
 function ScrollContainer({
   children,
   className = "",
@@ -781,12 +1031,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 = (0, import_react8.useRef)(null);
+  const containerRef = react.useRef(null);
+  const isFirstRender = react.useRef(true);
   const isBrowser = typeof window !== "undefined";
-  const [reducedMotion, setReducedMotion] = (0, import_react8.useState)(false);
-  (0, import_react8.useEffect)(() => {
+  const [reducedMotion, setReducedMotion] = react.useState(false);
+  react.useEffect(() => {
     if (!isBrowser || !respectReducedMotion) return;
     setReducedMotion(prefersReducedMotion());
     const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
@@ -797,9 +1055,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 = (0, import_react8.useRef)(activeIndex);
+  useScrollStore((s) => s.totalViews);
+  useScrollStore((s) => s.isInitialized);
+  const prevIndexRef = react.useRef(activeIndex);
   useWheelHandler();
   useTouchHandler({ enabled: !enableDragPhysics });
   useKeyboardHandler();
@@ -812,14 +1070,39 @@ function ScrollContainer({
     hashPrefix
   });
   useFocusManagement({ enabled: enableFocusManagement });
-  (0, import_react8.useEffect)(() => {
+  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);
+  react.useEffect(() => {
     const timer = setTimeout(() => {
       initialize();
       onInitialized?.();
+      isFirstRender.current = false;
     }, 50);
     return () => clearTimeout(timer);
   }, [initialize, onInitialized]);
-  (0, import_react8.useEffect)(() => {
+  react.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]);
+  react.useEffect(() => {
     if (prevIndexRef.current !== activeIndex) {
       onViewChange?.(prevIndexRef.current, activeIndex);
       const timer = setTimeout(() => {
@@ -829,37 +1112,34 @@ function ScrollContainer({
       return () => clearTimeout(timer);
     }
   }, [activeIndex, effectiveDuration, onViewChange, endTransition]);
-  const wrapperStyle = (0, import_react8.useMemo)(() => {
+  const wrapperStyle = react.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__ */ (0, import_jsx_runtime.jsx)(
+  }, [activeIndex, effectiveDuration, transitionEasing, dragState, orientation, skipInitialAnimation]);
+  return /* @__PURE__ */ jsxRuntime.jsx(GestureConfigContext.Provider, { value: mergedGestureConfig, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref: containerRef,
       className: `scroll-container fixed inset-0 overflow-hidden w-screen h-screen ${className}`,
       role: "main",
       "aria-label": "Scroll container",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "scroll-wrapper", style: wrapperStyle, children })
+      "data-auto-scrolling": autoScrollState.isPlaying,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "scroll-wrapper", style: wrapperStyle, children })
     }
-  );
+  ) });
 }
-
-// components/FullView.tsx
-var import_react10 = require("react");
-
-// hooks/useViewRegistration.ts
-var import_react9 = require("react");
 function useViewRegistration({
   config,
   onActivate,
@@ -873,7 +1153,7 @@ function useViewRegistration({
   const unregisterView = useScrollStore((s) => s.unregisterView);
   const activeId = useScrollStore((s) => s.activeId);
   const isTransitioning = useScrollStore((s) => s.isTransitioning);
-  const callbacksRef = (0, import_react9.useRef)({
+  const callbacksRef = react.useRef({
     onActivate,
     onDeactivate,
     onEnterStart,
@@ -889,20 +1169,20 @@ function useViewRegistration({
     onExitStart,
     onExitEnd
   };
-  const wasActiveRef = (0, import_react9.useRef)(false);
-  const wasTransitioningRef = (0, import_react9.useRef)(false);
-  const configRef = (0, import_react9.useRef)(config);
+  const wasActiveRef = react.useRef(false);
+  const wasTransitioningRef = react.useRef(false);
+  const configRef = react.useRef(config);
   if (JSON.stringify(config) !== JSON.stringify(configRef.current)) {
     configRef.current = config;
   }
-  (0, import_react9.useEffect)(() => {
+  react.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;
-  (0, import_react9.useEffect)(() => {
+  react.useEffect(() => {
     if (isActive && !wasActiveRef.current) {
       callbacksRef.current.onActivate?.();
     } else if (!isActive && wasActiveRef.current) {
@@ -910,7 +1190,7 @@ function useViewRegistration({
     }
     wasActiveRef.current = isActive;
   }, [isActive]);
-  (0, import_react9.useEffect)(() => {
+  react.useEffect(() => {
     const callbacks = callbacksRef.current;
     const wasActive = wasActiveRef.current;
     const wasTransitioning = wasTransitioningRef.current;
@@ -938,9 +1218,6 @@ function useViewRegistration({
     navigation: viewState?.navigation ?? "unlocked"
   };
 }
-
-// components/FullView.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
 function FullView({
   id,
   children,
@@ -953,7 +1230,7 @@ function FullView({
   onExitStart,
   onExitEnd
 }) {
-  const config = (0, import_react10.useMemo)(
+  const config = react.useMemo(
     () => ({
       id,
       type: "full",
@@ -970,7 +1247,7 @@ function FullView({
     onExitStart,
     onExitEnd
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "section",
     {
       id,
@@ -990,9 +1267,6 @@ function FullView({
     }
   );
 }
-
-// hooks/useMetricsReporter.ts
-var import_react11 = require("react");
 var SCROLL_THROTTLE_MS = 66;
 function useMetricsReporter({
   id,
@@ -1001,9 +1275,9 @@ function useMetricsReporter({
   onScrollProgress,
   throttleMs = SCROLL_THROTTLE_MS
 }) {
-  const scrollRef = (0, import_react11.useRef)(null);
+  const scrollRef = react.useRef(null);
   const updateMetrics = useScrollStore((s) => s.updateViewMetrics);
-  const measureAndReport = (0, import_react11.useCallback)(() => {
+  const measureAndReport = react.useCallback(() => {
     const el = scrollRef.current;
     if (!el) return;
     const metrics = {
@@ -1018,11 +1292,11 @@ function useMetricsReporter({
       onScrollProgress(progress);
     }
   }, [id, scrollDirection, updateMetrics, onScrollProgress]);
-  const throttledMeasure = (0, import_react11.useMemo)(
+  const throttledMeasure = react.useMemo(
     () => throttle(measureAndReport, throttleMs),
     [measureAndReport, throttleMs]
   );
-  (0, import_react11.useEffect)(() => {
+  react.useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
     const resizeObserver = new ResizeObserver(() => {
@@ -1037,16 +1311,13 @@ function useMetricsReporter({
       el.removeEventListener("scroll", throttledMeasure);
     };
   }, [measureAndReport, throttledMeasure]);
-  (0, import_react11.useEffect)(() => {
+  react.useEffect(() => {
     if (isActive) {
       measureAndReport();
     }
   }, [isActive, measureAndReport]);
   return { scrollRef, measureAndReport };
 }
-
-// components/ScrollLockedView.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
 function ScrollLockedView({
   id,
   children,
@@ -1082,14 +1353,14 @@ function ScrollLockedView({
     onScrollProgress
   });
   const scrollClasses = scrollDirection === "vertical" ? "overflow-y-auto overflow-x-hidden" : "overflow-x-auto overflow-y-hidden";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "section",
     {
       id,
       className: `relative w-full h-screen ${className}`,
       "data-view-type": "scroll-locked",
       "data-active": isActive,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           ref: scrollRef,
@@ -1101,10 +1372,6 @@ function ScrollLockedView({
     }
   );
 }
-
-// components/ControlledView.tsx
-var import_react12 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
 function ControlledView({
   id,
   children,
@@ -1121,7 +1388,7 @@ function ControlledView({
   onExitEnd
 }) {
   const setExplicitLock = useScrollStore((s) => s.setViewExplicitLock);
-  const config = (0, import_react12.useMemo)(
+  const config = react.useMemo(
     () => ({
       id,
       type: "controlled",
@@ -1145,11 +1412,11 @@ function ControlledView({
     isActive,
     scrollDirection: allowInternalScroll ? scrollDirection : "none"
   });
-  (0, import_react12.useEffect)(() => {
+  react.useEffect(() => {
     const lockState = canProceed ? "unlocked" : "locked";
     setExplicitLock(id, lockState);
   }, [id, canProceed, setExplicitLock]);
-  const overflowClasses = (0, import_react12.useMemo)(() => {
+  const overflowClasses = react.useMemo(() => {
     if (!allowInternalScroll) return "overflow-hidden";
     switch (scrollDirection) {
       case "vertical":
@@ -1160,14 +1427,14 @@ function ControlledView({
         return "overflow-auto";
     }
   }, [allowInternalScroll, scrollDirection]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "section",
     {
       id,
       className: `relative w-full h-screen ${isActive ? "z-10" : "z-0"} ${className}`,
       "data-view-type": "controlled",
       "data-active": isActive,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           ref: scrollRef,
@@ -1183,7 +1450,7 @@ function useViewControl(viewId) {
   const goToNext = useScrollStore((s) => s.goToNext);
   const goToPrevious = useScrollStore((s) => s.goToPrevious);
   const goToView = useScrollStore((s) => s.goToView);
-  return (0, import_react12.useMemo)(
+  return react.useMemo(
     () => ({
       unlock: () => setExplicitLock(viewId, "unlocked"),
       lock: () => setExplicitLock(viewId, "locked"),
@@ -1195,9 +1462,6 @@ function useViewControl(viewId) {
     [viewId, setExplicitLock, goToNext, goToPrevious, goToView]
   );
 }
-
-// components/ScrollDebugOverlay.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
 function ScrollDebugOverlay({
   position = "bottom-left",
   visible = true
@@ -1216,36 +1480,36 @@ function ScrollDebugOverlay({
     "bottom-left": "bottom-4 left-4",
     "bottom-right": "bottom-4 right-4"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: `fixed ${positionClasses[position]} z-9999 font-mono text-xs bg-black/90 text-green-400 p-3 rounded-lg border border-green-500/30 backdrop-blur-sm max-w-xs`,
       style: { pointerEvents: "none" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-green-300 font-bold mb-2 flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-2 h-2 rounded-full bg-green-500 animate-pulse" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-green-300 font-bold mb-2 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2 h-2 rounded-full bg-green-500 animate-pulse" }),
           "ScrollSystem Debug"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1 mb-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "initialized", value: isInitialized }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "activeIndex", value: `${activeIndex} / ${totalViews - 1}` }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "transitioning", value: isTransitioning }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "globalLocked", value: isGlobalLocked })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 mb-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "initialized", value: isInitialized }),
+          /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "activeIndex", value: `${activeIndex} / ${totalViews - 1}` }),
+          /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "transitioning", value: isTransitioning }),
+          /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "globalLocked", value: isGlobalLocked })
         ] }),
-        activeView && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "border-t border-green-500/20 pt-2 mt-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-green-300/70 mb-1", children: "Active View" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "id", value: activeView.id }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "type", value: activeView.type }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "capability", value: activeView.capability }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "navigation", value: activeView.navigation }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "progress", value: `${(activeView.progress * 100).toFixed(0)}%` }),
-          activeView.explicitLock && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "explicitLock", value: activeView.explicitLock, highlight: true })
+        activeView && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-green-500/20 pt-2 mt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-green-300/70 mb-1", children: "Active View" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "id", value: activeView.id }),
+          /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "type", value: activeView.type }),
+          /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "capability", value: activeView.capability }),
+          /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "navigation", value: activeView.navigation }),
+          /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "progress", value: `${(activeView.progress * 100).toFixed(0)}%` }),
+          activeView.explicitLock && /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "explicitLock", value: activeView.explicitLock, highlight: true })
         ] }),
-        activeView?.metrics && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "border-t border-green-500/20 pt-2 mt-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-green-300/70 mb-1", children: "Metrics" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "scrollHeight", value: activeView.metrics.scrollHeight }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "clientHeight", value: activeView.metrics.clientHeight }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "scrollTop", value: Math.round(activeView.metrics.scrollTop) })
+        activeView?.metrics && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-green-500/20 pt-2 mt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-green-300/70 mb-1", children: "Metrics" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "scrollHeight", value: activeView.metrics.scrollHeight }),
+          /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "clientHeight", value: activeView.metrics.clientHeight }),
+          /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "scrollTop", value: Math.round(activeView.metrics.scrollTop) })
         ] })
       ]
     }
@@ -1258,28 +1522,24 @@ function Row({
 }) {
   const displayValue = typeof value === "boolean" ? value ? "\u2713" : "\u2717" : String(value);
   const valueColor = typeof value === "boolean" ? value ? "text-green-400" : "text-red-400" : highlight ? "text-yellow-400" : "text-white";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-green-500/70", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-green-500/70", children: [
       label,
       ":"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: valueColor, children: displayValue })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: valueColor, children: displayValue })
   ] });
 }
-
-// components/AriaLiveRegion.tsx
-var import_react13 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
 function AriaLiveRegion({
   template = "Navigated to section {viewIndex} of {totalViews}",
   politeness = "polite"
 }) {
-  const [announcement, setAnnouncement] = (0, import_react13.useState)("");
+  const [announcement, setAnnouncement] = react.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);
-  (0, import_react13.useEffect)(() => {
+  react.useEffect(() => {
     if (!isTransitioning && activeId) {
       const message = template.replace("{viewIndex}", String(activeIndex + 1)).replace("{viewId}", activeId).replace("{totalViews}", String(totalViews));
       const timer = setTimeout(() => {
@@ -1288,7 +1548,7 @@ function AriaLiveRegion({
       return () => clearTimeout(timer);
     }
   }, [activeIndex, activeId, totalViews, isTransitioning, template]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       role: "status",
@@ -1310,10 +1570,6 @@ function AriaLiveRegion({
     }
   );
 }
-
-// components/LazyView.tsx
-var import_react14 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
 function LazyView({
   viewId,
   buffer = 1,
@@ -1322,7 +1578,7 @@ function LazyView({
 }) {
   const activeIndex = useScrollStore((s) => s.activeIndex);
   const views = useScrollStore((s) => s.views);
-  const shouldRender = (0, import_react14.useMemo)(() => {
+  const shouldRender = react.useMemo(() => {
     const viewIndex = views.findIndex((v) => v.id === viewId);
     if (viewIndex === -1) return false;
     const minIndex = Math.max(0, activeIndex - buffer);
@@ -1330,20 +1586,149 @@ function LazyView({
     return viewIndex >= minIndex && viewIndex <= maxIndex;
   }, [viewId, views, activeIndex, buffer]);
   if (!shouldRender) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: placeholder });
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: placeholder });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+}
+function NestedScrollView({
+  id,
+  children,
+  className = "",
+  nestedDirection = "horizontal",
+  enableSnap = true,
+  onItemChange,
+  onActivate,
+  onDeactivate,
+  onEnterStart,
+  onEnterEnd,
+  onExitStart,
+  onExitEnd
+}) {
+  const containerRef = react.useRef(null);
+  const nestedContainerRef = react.useRef(null);
+  const [activeNestedIndex, setActiveNestedIndex] = react.useState(0);
+  const [isNestedScrolling, setIsNestedScrolling] = react.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
+  });
+  react.useEffect(() => {
+    if (isActive) {
+      onActivate?.();
+    } else {
+      onDeactivate?.();
+    }
+  }, [isActive, onActivate, onDeactivate]);
+  const handleNestedScroll = react.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 = react.useCallback((e) => {
+    setIsNestedScrolling(true);
+    setGlobalLock(true);
+  }, [setGlobalLock]);
+  const handleTouchEnd = react.useCallback(() => {
+    setTimeout(() => {
+      setIsNestedScrolling(false);
+      setGlobalLock(false);
+    }, 100);
+  }, [setGlobalLock]);
+  react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: nestedContainerRef,
+          className: "nested-scroll-container",
+          style: nestedScrollStyle,
+          onScroll: handleNestedScroll,
+          onTouchStart: handleTouchStart,
+          onTouchEnd: handleTouchEnd,
+          children
+        }
+      )
+    }
+  );
+}
+function NestedScrollItem({
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `nested-scroll-item flex-shrink-0 w-full h-full ${className}`,
+      style: {
+        scrollSnapAlign: "start",
+        scrollSnapStop: "always"
+      },
+      children
+    }
+  );
 }
-
-// hooks/useNavigation.ts
-var import_react15 = require("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 = (0, import_react15.useCallback)(() => setGlobalLock(true), [setGlobalLock]);
-  const unlockScroll = (0, import_react15.useCallback)(() => setGlobalLock(false), [setGlobalLock]);
+  const lockScroll = react.useCallback(() => setGlobalLock(true), [setGlobalLock]);
+  const unlockScroll = react.useCallback(() => setGlobalLock(false), [setGlobalLock]);
   const activeIndex = useScrollStore((s) => s.activeIndex);
   const activeId = useScrollStore((s) => s.activeId);
   const totalViews = useScrollStore((s) => s.totalViews);
@@ -1351,16 +1736,16 @@ function useNavigation() {
   const isScrollLocked = useScrollStore((s) => s.isGlobalLocked);
   const canNavigateNext = useScrollStore(selectCanNavigateNext);
   const canNavigatePrevious = useScrollStore(selectCanNavigatePrevious);
-  const goToNext = (0, import_react15.useCallback)(() => {
+  const goToNext = react.useCallback(() => {
     return goToNextAction();
   }, [goToNextAction]);
-  const goToPrevious = (0, import_react15.useCallback)(() => {
+  const goToPrevious = react.useCallback(() => {
     return goToPreviousAction();
   }, [goToPreviousAction]);
   const isFirstView = activeIndex === 0;
   const isLastView = activeIndex === totalViews - 1;
   const progress = totalViews > 1 ? activeIndex / (totalViews - 1) : 0;
-  return (0, import_react15.useMemo)(
+  return react.useMemo(
     () => ({
       // Acciones de navegación
       goToView,
@@ -1430,18 +1815,15 @@ function useActiveViewProgress() {
     viewType: activeView?.type
   };
 }
-
-// hooks/useScrollAnalytics.ts
-var import_react16 = require("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 = (0, import_react16.useRef)(Date.now());
-  const prevIndexRef = (0, import_react16.useRef)(activeIndex);
-  const prevIdRef = (0, import_react16.useRef)(activeId);
-  const createAnalytics = (0, import_react16.useCallback)((viewId, viewIndex, enterTime, isActive, exitTime = null) => ({
+  const enterTimeRef = react.useRef(Date.now());
+  const prevIndexRef = react.useRef(activeIndex);
+  const prevIdRef = react.useRef(activeId);
+  const createAnalytics = react.useCallback((viewId, viewIndex, enterTime, isActive, exitTime = null) => ({
     viewId,
     viewIndex,
     enterTime,
@@ -1449,7 +1831,7 @@ function useScrollAnalytics(options = {}) {
     duration: exitTime ? (exitTime - enterTime) / 1e3 : 0,
     isActive
   }), []);
-  (0, import_react16.useEffect)(() => {
+  react.useEffect(() => {
     if (!enabled) return;
     if (!isTransitioning && (activeIndex !== prevIndexRef.current || activeId !== prevIdRef.current)) {
       const now = Date.now();
@@ -1484,37 +1866,249 @@ function useScrollAnalytics(options = {}) {
     getTimeInView: () => (Date.now() - enterTimeRef.current) / 1e3
   };
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  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 = react.useCallback(() => {
+    setGlobalLock(true);
+  }, [setGlobalLock]);
+  const unlock = react.useCallback(() => {
+    setGlobalLock(false);
+  }, [setGlobalLock]);
+  const toggle = react.useCallback(() => {
+    setGlobalLock(!isLocked);
+  }, [setGlobalLock, isLocked]);
+  const lockView = react.useCallback((viewId) => {
+    setViewExplicitLock(viewId, "locked");
+  }, [setViewExplicitLock]);
+  const unlockView = react.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 = react.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 react.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 = react.useRef(null);
+  const lastActivePointRef = react.useRef(null);
+  const views = useScrollStore((s) => s.views);
+  const setActiveSnapPoint = useScrollStore((s) => s.setActiveSnapPoint);
+  const view = react.useMemo(() => views.find((v) => v.id === viewId), [views, viewId]);
+  const viewProgress = view?.progress ?? 0;
+  view?.activeSnapPointId ?? null;
+  const sortedPoints = react.useMemo(
+    () => [...points].sort((a, b) => a.position - b.position),
+    [points]
+  );
+  const activePointData = react.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]);
+  react.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 = react.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 = react.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 = react.useCallback(() => {
+    const prevIndex = Math.max(activePointData.index - 1, 0);
+    const prevPoint = sortedPoints[prevIndex];
+    if (prevPoint) {
+      goToPoint(prevPoint.id);
+    }
+  }, [activePointData.index, sortedPoints, goToPoint]);
+  const pointsWithState = react.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}`
+  }));
+}
+
+exports.AriaLiveRegion = AriaLiveRegion;
+exports.ControlledView = ControlledView;
+exports.DEFAULT_PROGRESS_DEBOUNCE = DEFAULT_PROGRESS_DEBOUNCE;
+exports.DEFAULT_TRANSITION_DURATION = DEFAULT_TRANSITION_DURATION;
+exports.DEFAULT_TRANSITION_EASING = DEFAULT_TRANSITION_EASING;
+exports.FullView = FullView;
+exports.LazyView = LazyView;
+exports.NAVIGATION_COOLDOWN = NAVIGATION_COOLDOWN;
+exports.NAV_THRESHOLDS = NAV_THRESHOLDS;
+exports.NestedScrollItem = NestedScrollItem;
+exports.NestedScrollView = NestedScrollView;
+exports.ScrollContainer = ScrollContainer;
+exports.ScrollDebugOverlay = ScrollDebugOverlay;
+exports.ScrollLockedView = ScrollLockedView;
+exports.createSnapPoints = createSnapPoints;
+exports.selectActiveView = selectActiveView;
+exports.selectActiveViewProgress = selectActiveViewProgress;
+exports.selectCanNavigateNext = selectCanNavigateNext;
+exports.selectCanNavigatePrevious = selectCanNavigatePrevious;
+exports.selectGlobalProgress = selectGlobalProgress;
+exports.selectIsAutoScrolling = selectIsAutoScrolling;
+exports.useActiveParallax = useActiveParallax;
+exports.useActiveViewProgress = useActiveViewProgress;
+exports.useAutoScroll = useAutoScroll;
+exports.useDragHandler = useDragHandler;
+exports.useFocusManagement = useFocusManagement;
+exports.useGestureConfig = useGestureConfig;
+exports.useGlobalProgress = useGlobalProgress;
+exports.useHashSync = useHashSync;
+exports.useInfiniteScroll = useInfiniteScroll;
+exports.useKeyboardHandler = useKeyboardHandler;
+exports.useMetricsReporter = useMetricsReporter;
+exports.useNavigation = useNavigation;
+exports.useParallax = useParallax;
+exports.usePreload = usePreload;
+exports.useScrollAnalytics = useScrollAnalytics;
+exports.useScrollLock = useScrollLock;
+exports.useScrollStore = useScrollStore;
+exports.useScrollSystem = useScrollSystem;
+exports.useSnapPoints = useSnapPoints;
+exports.useTouchHandler = useTouchHandler;
+exports.useViewControl = useViewControl;
+exports.useViewProgress = useViewProgress;
+exports.useViewRegistration = useViewRegistration;
+exports.useWheelHandler = useWheelHandler;