scroll-system 1.0.1

package/dist/index.mjs

@@ -0,0 +1,1463 @@
+// components/ScrollContainer.tsx
+import { useEffect as useEffect7, useRef as useRef6, useMemo as useMemo2, useState as useState2 } from "react";
+
+// store/navigation.store.ts
+import { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
+
+// constants.ts
+var DEFAULT_TRANSITION_DURATION = 700;
+var DEFAULT_TRANSITION_EASING = "cubic-bezier(0.645, 0.045, 0.355, 1.000)";
+var DEFAULT_PROGRESS_DEBOUNCE = 16;
+var NAVIGATION_COOLDOWN = 500;
+var NAV_THRESHOLDS = {
+  WHEEL: 60,
+  // Acumulado de deltaY para disparar navegación
+  TOUCH: 50
+  // Píxeles de distancia para considerar swipe
+};
+
+// store/navigation.store.ts
+function evaluateStateMachine(capability, progress, viewType, explicitLock) {
+  if (explicitLock) return explicitLock;
+  if (capability === "none") return "unlocked";
+  if (viewType === "full") return "unlocked";
+  if (progress >= 0.99) return "unlocked";
+  return "locked";
+}
+function calculateCapability(metrics) {
+  if (metrics.scrollHeight - metrics.clientHeight <= 1) {
+    return "none";
+  }
+  return "internal";
+}
+function calculateProgress(metrics) {
+  const maxScroll = metrics.scrollHeight - metrics.clientHeight;
+  if (maxScroll <= 1) return 1;
+  return Math.max(0, Math.min(1, metrics.scrollTop / maxScroll));
+}
+var initialState = {
+  views: [],
+  activeIndex: 0,
+  activeId: null,
+  totalViews: 0,
+  isInitialized: false,
+  isTransitioning: false,
+  isGlobalLocked: false,
+  isDragging: false,
+  globalProgress: 0
+};
+var lastNavigationTime = 0;
+var useScrollStore = create()(
+  subscribeWithSelector((set, get) => ({
+    ...initialState,
+    initialize: () => {
+      const { views } = get();
+      if (views.length > 0) {
+        set({
+          isInitialized: true,
+          activeId: views[0]?.id ?? null,
+          activeIndex: 0
+        });
+      }
+    },
+    registerView: (config) => {
+      set((state) => {
+        if (state.views.some((v) => v.id === config.id)) return state;
+        const newIndex = state.views.length;
+        const newView = {
+          id: config.id,
+          index: newIndex,
+          type: config.type,
+          isActive: newIndex === 0,
+          capability: "none",
+          navigation: "unlocked",
+          explicitLock: null,
+          progress: 0,
+          metrics: { scrollHeight: 0, clientHeight: 0, scrollTop: 0 },
+          config
+        };
+        const newViews = [...state.views, newView];
+        return {
+          views: newViews,
+          totalViews: newViews.length,
+          activeId: state.activeId ?? newView.id
+        };
+      });
+    },
+    unregisterView: (id) => {
+      set((state) => {
+        const newViews = state.views.filter((v) => v.id !== id).map((v, idx) => ({ ...v, index: idx }));
+        const newActiveIndex = Math.min(state.activeIndex, newViews.length - 1);
+        return {
+          views: newViews,
+          totalViews: newViews.length,
+          activeIndex: Math.max(0, newActiveIndex),
+          activeId: newViews[newActiveIndex]?.id ?? null
+        };
+      });
+    },
+    updateViewMetrics: (id, metrics) => {
+      set((state) => {
+        const viewIndex = state.views.findIndex((v) => v.id === id);
+        if (viewIndex === -1) return state;
+        const view = state.views[viewIndex];
+        const capability = calculateCapability(metrics);
+        const progress = calculateProgress(metrics);
+        const navigation = evaluateStateMachine(capability, progress, view.type, view.explicitLock);
+        if (view.capability === capability && Math.abs(view.progress - progress) < 1e-4 && view.navigation === navigation) {
+          return state;
+        }
+        const newViews = [...state.views];
+        newViews[viewIndex] = {
+          ...view,
+          metrics,
+          capability,
+          progress,
+          navigation
+        };
+        return { views: newViews };
+      });
+    },
+    processIntention: (intention) => {
+      const state = get();
+      if (state.isTransitioning || state.isGlobalLocked) return false;
+      const activeView = state.views[state.activeIndex];
+      if (!activeView) return false;
+      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;
+          }
+        } else if (intention.direction === "up") {
+          const isAtTop = activeView.metrics.scrollTop <= 1;
+          if (activeView.capability === "internal" && !isAtTop) {
+            return false;
+          }
+          if (activeView.type === "controlled") {
+            const config = activeView.config;
+            if (config.allowGoBack === false) {
+              return false;
+            }
+          } else {
+            if (activeView.explicitLock === "locked") return false;
+          }
+          if (state.activeIndex > 0) {
+            get().goToView(state.activeIndex - 1);
+            return true;
+          }
+        }
+      }
+      return false;
+    },
+    goToNext: () => {
+      const state = get();
+      state.goToView(state.activeIndex + 1);
+    },
+    goToPrevious: () => {
+      const state = get();
+      state.goToView(state.activeIndex - 1);
+    },
+    goToView: (indexOrId) => {
+      const state = get();
+      const now = Date.now();
+      if (now - lastNavigationTime < NAVIGATION_COOLDOWN) return;
+      lastNavigationTime = now;
+      let targetIndex = typeof indexOrId === "string" ? state.views.findIndex((v) => v.id === indexOrId) : indexOrId;
+      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;
+        })
+      }));
+    },
+    setViewExplicitLock: (id, lock) => {
+      set((state) => {
+        const index = state.views.findIndex((v) => v.id === id);
+        if (index === -1) return state;
+        const view = state.views[index];
+        const navigation = evaluateStateMachine(view.capability, view.progress, view.type, lock);
+        const newViews = [...state.views];
+        newViews[index] = { ...view, explicitLock: lock, navigation };
+        return { views: newViews };
+      });
+    },
+    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 }),
+    resetNavigationCooldown: () => {
+      lastNavigationTime = 0;
+    }
+  }))
+);
+var selectActiveView = (state) => state.views[state.activeIndex];
+var selectActiveViewProgress = (state) => state.views[state.activeIndex]?.progress ?? 0;
+var selectCanNavigateNext = (state) => {
+  if (state.isTransitioning || state.isGlobalLocked) return false;
+  const activeView = state.views[state.activeIndex];
+  if (!activeView) return false;
+  return activeView.navigation === "unlocked";
+};
+var selectCanNavigatePrevious = (state) => {
+  if (state.isTransitioning || state.isGlobalLocked) return false;
+  return state.activeIndex > 0;
+};
+
+// hooks/useWheelHandler.ts
+import { useEffect, useRef } from "react";
+
+// utils/normalizeWheel.ts
+function normalizeWheel(event) {
+  let pixelX = 0;
+  let pixelY = 0;
+  let pixelZ = 0;
+  if ("detail" in event) {
+    pixelY = event.detail;
+  }
+  if ("wheelDelta" in event) {
+    pixelY = -event.wheelDelta / 120;
+  }
+  if ("wheelDeltaY" in event) {
+    pixelY = -event.wheelDeltaY / 120;
+  }
+  if ("wheelDeltaX" in event) {
+    pixelX = -event.wheelDeltaX / 120;
+  }
+  if ("deltaY" in event) {
+    pixelY = event.deltaY;
+  }
+  if ("deltaX" in event) {
+    pixelX = event.deltaX;
+  }
+  if ((event.deltaMode || 0) === 1) {
+    pixelY *= 40;
+    pixelX *= 40;
+  } else if ((event.deltaMode || 0) === 2) {
+    pixelY *= 800;
+    pixelX *= 800;
+  }
+  return { pixelX, pixelY, pixelZ };
+}
+
+// hooks/useWheelHandler.ts
+function useWheelHandler() {
+  const scrollAccumulator = useRef(0);
+  const lastScrollTime = useRef(0);
+  const isTransitioning = useScrollStore((s) => s.isTransitioning);
+  useEffect(() => {
+    const handleWheel = (event) => {
+      const state = useScrollStore.getState();
+      if (state.isTransitioning || state.isDragging) {
+        event.preventDefault();
+        return;
+      }
+      const normalized = normalizeWheel(event);
+      const delta = normalized.pixelY;
+      scrollAccumulator.current += delta;
+      const now = Date.now();
+      if (now - lastScrollTime.current > 200) {
+        scrollAccumulator.current = delta;
+      }
+      lastScrollTime.current = now;
+      if (Math.abs(scrollAccumulator.current) >= NAV_THRESHOLDS.WHEEL) {
+        const direction = scrollAccumulator.current > 0 ? "down" : "up";
+        const intention = {
+          type: "navigate",
+          direction,
+          strength: Math.min(Math.abs(scrollAccumulator.current) / NAV_THRESHOLDS.WHEEL, 1),
+          origin: "wheel"
+        };
+        const handled = useScrollStore.getState().processIntention(intention);
+        if (handled) {
+          scrollAccumulator.current = 0;
+          event.preventDefault();
+        } else {
+        }
+      }
+    };
+    window.addEventListener("wheel", handleWheel, { passive: false });
+    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(() => {
+    if (!enabled) return;
+    const handleTouchStart = (e) => {
+      touchStart.current = {
+        x: e.touches[0].clientX,
+        y: e.touches[0].clientY
+      };
+      touchStartTime.current = Date.now();
+    };
+    const handleTouchEnd = (e) => {
+      if (!touchStart.current) return;
+      const touchEnd = {
+        x: e.changedTouches[0].clientX,
+        y: e.changedTouches[0].clientY
+      };
+      const deltaY = touchStart.current.y - touchEnd.y;
+      const deltaX = touchStart.current.x - touchEnd.x;
+      const timeElapsed = Date.now() - touchStartTime.current;
+      if (Math.abs(deltaY) > Math.abs(deltaX) && // Vertical
+      Math.abs(deltaY) > NAV_THRESHOLDS.TOUCH && // Threshold distancia
+      timeElapsed < 800) {
+        const direction = deltaY > 0 ? "down" : "up";
+        const intention = {
+          type: "navigate",
+          direction,
+          strength: 1,
+          // Swipes son intenciones fuertes
+          origin: "touch"
+        };
+        useScrollStore.getState().processIntention(intention);
+      }
+      touchStart.current = null;
+    };
+    window.addEventListener("touchstart", handleTouchStart, { passive: true });
+    window.addEventListener("touchend", handleTouchEnd, { passive: true });
+    return () => {
+      window.removeEventListener("touchstart", handleTouchStart);
+      window.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [enabled]);
+}
+
+// hooks/useKeyboardHandler.ts
+import { useEffect as useEffect3 } from "react";
+function useKeyboardHandler(options = {}) {
+  const { enabled = true, preventDefault = true } = options;
+  useEffect3(() => {
+    if (!enabled) return;
+    const handleKeyDown = (e) => {
+      const target = e.target;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
+        return;
+      }
+      let intention = null;
+      switch (e.key) {
+        case "ArrowDown":
+        case "PageDown":
+          intention = {
+            type: "navigate",
+            direction: "down",
+            strength: 1,
+            origin: "keyboard"
+          };
+          break;
+        case "ArrowUp":
+        case "PageUp":
+          intention = {
+            type: "navigate",
+            direction: "up",
+            strength: 1,
+            origin: "keyboard"
+          };
+          break;
+        case " ":
+          intention = {
+            type: "navigate",
+            direction: e.shiftKey ? "up" : "down",
+            strength: 1,
+            origin: "keyboard"
+          };
+          break;
+        case "Home":
+          useScrollStore.getState().goToView(0);
+          if (preventDefault) e.preventDefault();
+          return;
+        case "End":
+          const totalViews = useScrollStore.getState().totalViews;
+          useScrollStore.getState().goToView(totalViews - 1);
+          if (preventDefault) e.preventDefault();
+          return;
+        default:
+          return;
+      }
+      if (intention) {
+        if (preventDefault) e.preventDefault();
+        useScrollStore.getState().processIntention(intention);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [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(() => {
+    if (!enabled) return;
+    const unsubscribe = useScrollStore.subscribe(
+      (state) => state.activeIndex,
+      (activeIndex, prevIndex) => {
+        if (!hasInitialized.current) return;
+        if (activeIndex === prevIndex) return;
+        const views = useScrollStore.getState().views;
+        const activeView = views[activeIndex];
+        if (activeView) {
+          const hash = `#${hashPrefix}${activeView.id}`;
+          if (pushHistory) {
+            window.history.pushState(null, "", hash);
+          } else {
+            window.history.replaceState(null, "", hash);
+          }
+        }
+      }
+    );
+    return () => unsubscribe();
+  }, [enabled, pushHistory, hashPrefix]);
+  useEffect4(() => {
+    if (!enabled) return;
+    const handlePopState = () => {
+      const hash = window.location.hash.slice(1);
+      if (!hash) return;
+      const viewId = hashPrefix ? hash.replace(hashPrefix, "") : hash;
+      const views = useScrollStore.getState().views;
+      const targetIndex = views.findIndex((v) => v.id === viewId);
+      if (targetIndex !== -1) {
+        useScrollStore.getState().goToView(targetIndex);
+      }
+    };
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, [enabled, hashPrefix]);
+  useEffect4(() => {
+    if (!enabled) return;
+    const checkAndNavigate = () => {
+      const state = useScrollStore.getState();
+      if (!state.isInitialized || state.views.length === 0) {
+        setTimeout(checkAndNavigate, 100);
+        return;
+      }
+      const hash = window.location.hash.slice(1);
+      if (!hash) {
+        hasInitialized.current = true;
+        return;
+      }
+      const viewId = hashPrefix ? hash.replace(hashPrefix, "") : hash;
+      const targetIndex = state.views.findIndex((v) => v.id === viewId);
+      if (targetIndex !== -1 && targetIndex !== state.activeIndex) {
+        state.goToView(targetIndex);
+      }
+      hasInitialized.current = true;
+    };
+    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;
+function useDragHandler(options = {}) {
+  const { enabled = true, onDragUpdate, onDragEnd } = options;
+  const [dragState, setDragState] = useState({
+    isDragging: false,
+    dragOffset: 0,
+    dragDirection: null
+  });
+  const touchStartRef = useRef4(null);
+  const lastMoveRef = useRef4(null);
+  const rafRef = useRef4(null);
+  const updateDragState = useCallback((newState) => {
+    setDragState((prev) => {
+      const updated = { ...prev, ...newState };
+      onDragUpdate?.(updated);
+      return updated;
+    });
+  }, [onDragUpdate]);
+  useEffect5(() => {
+    if (!enabled) return;
+    const handleTouchStart = (e) => {
+      const target = e.target;
+      if (target.closest('[data-scrollable="true"]')) return;
+      touchStartRef.current = {
+        y: e.touches[0].clientY,
+        time: Date.now()
+      };
+      lastMoveRef.current = touchStartRef.current;
+      useScrollStore.getState().setDragging(true);
+      updateDragState({ isDragging: true, dragOffset: 0, dragDirection: null });
+    };
+    const handleTouchMove = (e) => {
+      if (!touchStartRef.current) return;
+      const currentY = e.touches[0].clientY;
+      const deltaY = touchStartRef.current.y - currentY;
+      const viewportHeight = window.innerHeight;
+      let offset = deltaY / viewportHeight;
+      const store = useScrollStore.getState();
+      const atStart = store.activeIndex === 0 && deltaY < 0;
+      const atEnd = store.activeIndex === store.totalViews - 1 && deltaY > 0;
+      if (atStart || atEnd) {
+        offset = offset * RESISTANCE_FACTOR;
+      }
+      offset = Math.max(-1, Math.min(1, offset));
+      lastMoveRef.current = { y: currentY, time: Date.now() };
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(() => {
+        updateDragState({
+          dragOffset: offset,
+          dragDirection: deltaY > 0 ? "down" : deltaY < 0 ? "up" : null
+        });
+      });
+    };
+    const handleTouchEnd = (e) => {
+      if (!touchStartRef.current || !lastMoveRef.current) {
+        updateDragState({ isDragging: false, dragOffset: 0, dragDirection: null });
+        return;
+      }
+      const endY = e.changedTouches[0].clientY;
+      const deltaY = touchStartRef.current.y - endY;
+      const timeDelta = Date.now() - lastMoveRef.current.time;
+      const velocity = timeDelta > 0 ? Math.abs(deltaY) / timeDelta : 0;
+      const store = useScrollStore.getState();
+      const atStart = store.activeIndex === 0;
+      const atEnd = store.activeIndex === store.totalViews - 1;
+      const exceedsThreshold = Math.abs(deltaY) > DRAG_THRESHOLD;
+      const hasVelocity = velocity > VELOCITY_THRESHOLD;
+      const direction = deltaY > 0 ? "down" : "up";
+      const canNavigate = direction === "down" && !atEnd || direction === "up" && !atStart;
+      const shouldNavigate = canNavigate && (exceedsThreshold || hasVelocity);
+      onDragEnd?.(shouldNavigate, direction);
+      if (shouldNavigate) {
+        store.processIntention({
+          type: "navigate",
+          direction,
+          strength: Math.min(1, velocity / VELOCITY_THRESHOLD),
+          origin: "touch"
+        });
+      }
+      touchStartRef.current = null;
+      lastMoveRef.current = null;
+      useScrollStore.getState().setDragging(false);
+      updateDragState({ isDragging: false, dragOffset: 0, dragDirection: null });
+    };
+    const handleTouchCancel = () => {
+      touchStartRef.current = null;
+      lastMoveRef.current = null;
+      useScrollStore.getState().setDragging(false);
+      updateDragState({ isDragging: false, dragOffset: 0, dragDirection: null });
+    };
+    window.addEventListener("touchstart", handleTouchStart, { passive: true });
+    window.addEventListener("touchmove", handleTouchMove, { passive: true });
+    window.addEventListener("touchend", handleTouchEnd, { passive: true });
+    window.addEventListener("touchcancel", handleTouchCancel, { passive: true });
+    return () => {
+      window.removeEventListener("touchstart", handleTouchStart);
+      window.removeEventListener("touchmove", handleTouchMove);
+      window.removeEventListener("touchend", handleTouchEnd);
+      window.removeEventListener("touchcancel", handleTouchCancel);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [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(() => {
+    if (!enabled) return;
+    if (activeIndex !== prevIndexRef.current && !isTransitioning && activeId) {
+      const timer = setTimeout(() => {
+        const viewElement = document.getElementById(activeId);
+        if (viewElement) {
+          if (!viewElement.hasAttribute("tabindex")) {
+            viewElement.setAttribute("tabindex", "-1");
+          }
+          viewElement.focus({ preventScroll: true });
+        }
+        prevIndexRef.current = activeIndex;
+      }, focusDelay);
+      return () => clearTimeout(timer);
+    }
+  }, [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);
+  const isGlobalLocked = useScrollStore((s) => s.isGlobalLocked);
+  const isTransitioning = useScrollStore((s) => s.isTransitioning);
+  const isDragging = useScrollStore((s) => s.isDragging);
+  const activeId = useScrollStore((s) => s.activeId);
+  const totalViews = useScrollStore((s) => s.totalViews);
+  const views = useScrollStore((s) => s.views);
+  const {
+    goToNext: storeNext,
+    goToPrevious: storePrev,
+    goToView: storeGoTo
+  } = useScrollStore();
+  const activeView = views[activeIndex];
+  const activeViewType = activeView?.type ?? null;
+  const activeViewProgress = activeView?.progress ?? 0;
+  const canNavigateNext = useScrollStore(selectCanNavigateNext);
+  const canNavigatePrevious = useScrollStore(selectCanNavigatePrevious);
+  const goToNext = useCallback2(() => {
+    if (canNavigateNext) {
+      storeNext();
+      return true;
+    }
+    return false;
+  }, [canNavigateNext, storeNext]);
+  const goToPrev = useCallback2(() => {
+    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]);
+  return useMemo(() => ({
+    goToNext,
+    goToPrev,
+    goTo: storeGoTo,
+    getCurrentIndex,
+    getProgress,
+    getActiveViewProgress,
+    isLocked,
+    canGoNext: canNavigateNext,
+    canGoPrev: canNavigatePrevious,
+    // Extended Data for Nav/UI
+    activeIndex,
+    activeId,
+    activeViewType,
+    totalViews,
+    // State Flags (for advanced use)
+    isDragging,
+    isTransitioning
+  }), [
+    goToNext,
+    goToPrev,
+    storeGoTo,
+    getCurrentIndex,
+    getProgress,
+    getActiveViewProgress,
+    isLocked,
+    canNavigateNext,
+    canNavigatePrevious,
+    activeIndex,
+    activeId,
+    activeViewType,
+    totalViews,
+    isDragging,
+    isTransitioning
+  ]);
+}
+
+// utils/index.ts
+function throttle(fn, limit) {
+  let lastCall = 0;
+  let timeoutId = null;
+  return ((...args) => {
+    const now = Date.now();
+    const remaining = limit - (now - lastCall);
+    if (remaining <= 0) {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+      lastCall = now;
+      fn(...args);
+    } else if (!timeoutId) {
+      timeoutId = setTimeout(() => {
+        lastCall = Date.now();
+        timeoutId = null;
+        fn(...args);
+      }, remaining);
+    }
+  });
+}
+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 = "",
+  transitionDuration = DEFAULT_TRANSITION_DURATION,
+  transitionEasing = DEFAULT_TRANSITION_EASING,
+  onViewChange,
+  onInitialized,
+  // Deep Linking options
+  enableHashSync = false,
+  hashPushHistory = false,
+  hashPrefix = "",
+  // Accessibility
+  respectReducedMotion = true,
+  enableFocusManagement = true,
+  // Touch Physics
+  enableDragPhysics = false,
+  // Layout
+  orientation = "vertical"
+}) {
+  const containerRef = useRef6(null);
+  const isBrowser = typeof window !== "undefined";
+  const [reducedMotion, setReducedMotion] = useState2(false);
+  useEffect7(() => {
+    if (!isBrowser || !respectReducedMotion) return;
+    setReducedMotion(prefersReducedMotion());
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handler = (e) => setReducedMotion(e.matches);
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, [respectReducedMotion, isBrowser]);
+  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);
+  useWheelHandler();
+  useTouchHandler({ enabled: !enableDragPhysics });
+  useKeyboardHandler();
+  const dragState = useDragHandler({
+    enabled: enableDragPhysics && !reducedMotion
+  });
+  useHashSync({
+    enabled: enableHashSync,
+    pushHistory: hashPushHistory,
+    hashPrefix
+  });
+  useFocusManagement({ enabled: enableFocusManagement });
+  useEffect7(() => {
+    const timer = setTimeout(() => {
+      initialize();
+      onInitialized?.();
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [initialize, onInitialized]);
+  useEffect7(() => {
+    if (prevIndexRef.current !== activeIndex) {
+      onViewChange?.(prevIndexRef.current, activeIndex);
+      const timer = setTimeout(() => {
+        endTransition();
+      }, effectiveDuration);
+      prevIndexRef.current = activeIndex;
+      return () => clearTimeout(timer);
+    }
+  }, [activeIndex, effectiveDuration, onViewChange, endTransition]);
+  const wrapperStyle = useMemo2(() => {
+    const baseOffset = activeIndex * 100;
+    const dragOffset = dragState.isDragging ? dragState.dragOffset * 100 : 0;
+    const transformAxis = orientation === "horizontal" ? "X" : "Y";
+    const sizeUnit = orientation === "horizontal" ? "vw" : "vh";
+    return {
+      transform: `translate${transformAxis}(-${baseOffset + dragOffset}${sizeUnit})`,
+      transition: dragState.isDragging ? "none" : effectiveDuration > 0 ? `transform ${effectiveDuration}ms ${transitionEasing}` : "none",
+      height: "100%",
+      width: "100%",
+      display: orientation === "horizontal" ? "flex" : "block",
+      flexDirection: orientation === "horizontal" ? "row" : void 0
+    };
+  }, [activeIndex, effectiveDuration, transitionEasing, dragState, orientation]);
+  return /* @__PURE__ */ 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__ */ 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,
+  onDeactivate,
+  onEnterStart,
+  onEnterEnd,
+  onExitStart,
+  onExitEnd
+}) {
+  const registerView = useScrollStore((s) => s.registerView);
+  const unregisterView = useScrollStore((s) => s.unregisterView);
+  const activeId = useScrollStore((s) => s.activeId);
+  const isTransitioning = useScrollStore((s) => s.isTransitioning);
+  const callbacksRef = useRef7({
+    onActivate,
+    onDeactivate,
+    onEnterStart,
+    onEnterEnd,
+    onExitStart,
+    onExitEnd
+  });
+  callbacksRef.current = {
+    onActivate,
+    onDeactivate,
+    onEnterStart,
+    onEnterEnd,
+    onExitStart,
+    onExitEnd
+  };
+  const wasActiveRef = useRef7(false);
+  const wasTransitioningRef = useRef7(false);
+  const configRef = useRef7(config);
+  if (JSON.stringify(config) !== JSON.stringify(configRef.current)) {
+    configRef.current = config;
+  }
+  useEffect8(() => {
+    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(() => {
+    if (isActive && !wasActiveRef.current) {
+      callbacksRef.current.onActivate?.();
+    } else if (!isActive && wasActiveRef.current) {
+      callbacksRef.current.onDeactivate?.();
+    }
+    wasActiveRef.current = isActive;
+  }, [isActive]);
+  useEffect8(() => {
+    const callbacks = callbacksRef.current;
+    const wasActive = wasActiveRef.current;
+    const wasTransitioning = wasTransitioningRef.current;
+    if (isTransitioning && !wasTransitioning) {
+      if (isActive && !wasActive) {
+        callbacks.onEnterStart?.();
+      } else if (!isActive && wasActive) {
+        callbacks.onExitStart?.();
+      }
+    }
+    if (!isTransitioning && wasTransitioning) {
+      if (isActive) {
+        callbacks.onEnterEnd?.();
+      } else if (wasActive && !isActive) {
+        callbacks.onExitEnd?.();
+      }
+    }
+    wasTransitioningRef.current = isTransitioning;
+  }, [isTransitioning, isActive]);
+  return {
+    isActive,
+    viewState,
+    index: viewState?.index ?? -1,
+    scrollProgress: viewState?.progress ?? 0,
+    navigation: viewState?.navigation ?? "unlocked"
+  };
+}
+
+// components/FullView.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function FullView({
+  id,
+  children,
+  className = "",
+  meta,
+  onActivate,
+  onDeactivate,
+  onEnterStart,
+  onEnterEnd,
+  onExitStart,
+  onExitEnd
+}) {
+  const config = useMemo3(
+    () => ({
+      id,
+      type: "full",
+      meta
+    }),
+    [id, meta]
+  );
+  const { isActive, index } = useViewRegistration({
+    config,
+    onActivate,
+    onDeactivate,
+    onEnterStart,
+    onEnterEnd,
+    onExitStart,
+    onExitEnd
+  });
+  return /* @__PURE__ */ jsx2(
+    "section",
+    {
+      id,
+      className: `
+        full-view
+        relative
+        w-full h-screen
+        overflow-hidden
+        ${isActive ? "is-active" : ""}
+        ${className}
+      `,
+      "data-view-type": "full",
+      "data-view-index": index,
+      "data-view-active": isActive,
+      "aria-hidden": !isActive,
+      children
+    }
+  );
+}
+
+// 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,
+  isActive,
+  scrollDirection,
+  onScrollProgress,
+  throttleMs = SCROLL_THROTTLE_MS
+}) {
+  const scrollRef = useRef8(null);
+  const updateMetrics = useScrollStore((s) => s.updateViewMetrics);
+  const measureAndReport = useCallback3(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const metrics = {
+      scrollHeight: scrollDirection === "vertical" ? el.scrollHeight : el.scrollWidth,
+      clientHeight: scrollDirection === "vertical" ? el.clientHeight : el.clientWidth,
+      scrollTop: scrollDirection === "vertical" ? el.scrollTop : el.scrollLeft
+    };
+    updateMetrics(id, metrics);
+    if (onScrollProgress) {
+      const max = metrics.scrollHeight - metrics.clientHeight;
+      const progress = max > 0 ? metrics.scrollTop / max : 1;
+      onScrollProgress(progress);
+    }
+  }, [id, scrollDirection, updateMetrics, onScrollProgress]);
+  const throttledMeasure = useMemo4(
+    () => throttle(measureAndReport, throttleMs),
+    [measureAndReport, throttleMs]
+  );
+  useEffect9(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const resizeObserver = new ResizeObserver(() => {
+      window.requestAnimationFrame(measureAndReport);
+    });
+    resizeObserver.observe(el);
+    Array.from(el.children).forEach((child) => resizeObserver.observe(child));
+    el.addEventListener("scroll", throttledMeasure, { passive: true });
+    measureAndReport();
+    return () => {
+      resizeObserver.disconnect();
+      el.removeEventListener("scroll", throttledMeasure);
+    };
+  }, [measureAndReport, throttledMeasure]);
+  useEffect9(() => {
+    if (isActive) {
+      measureAndReport();
+    }
+  }, [isActive, measureAndReport]);
+  return { scrollRef, measureAndReport };
+}
+
+// components/ScrollLockedView.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ScrollLockedView({
+  id,
+  children,
+  className = "",
+  scrollDirection = "vertical",
+  scrollEndThreshold = 0.99,
+  onScrollProgress,
+  onActivate,
+  onDeactivate,
+  onEnterStart,
+  onEnterEnd,
+  onExitStart,
+  onExitEnd
+}) {
+  const { isActive, index } = useViewRegistration({
+    config: {
+      id,
+      type: "scroll-locked",
+      scrollDirection,
+      scrollEndThreshold
+    },
+    onActivate,
+    onDeactivate,
+    onEnterStart,
+    onEnterEnd,
+    onExitStart,
+    onExitEnd
+  });
+  const { scrollRef } = useMetricsReporter({
+    id,
+    isActive,
+    scrollDirection,
+    onScrollProgress
+  });
+  const scrollClasses = scrollDirection === "vertical" ? "overflow-y-auto overflow-x-hidden" : "overflow-x-auto overflow-y-hidden";
+  return /* @__PURE__ */ jsx3(
+    "section",
+    {
+      id,
+      className: `relative w-full h-screen ${className}`,
+      "data-view-type": "scroll-locked",
+      "data-active": isActive,
+      children: /* @__PURE__ */ jsx3(
+        "div",
+        {
+          ref: scrollRef,
+          className: `w-full h-full ${scrollClasses} no-scrollbar`,
+          style: { scrollbarWidth: "none" },
+          children
+        }
+      )
+    }
+  );
+}
+
+// components/ControlledView.tsx
+import { useMemo as useMemo5, useEffect as useEffect10 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ControlledView({
+  id,
+  children,
+  className = "",
+  scrollDirection = "none",
+  allowInternalScroll = false,
+  canProceed = false,
+  allowGoBack = true,
+  onActivate,
+  onDeactivate,
+  onEnterStart,
+  onEnterEnd,
+  onExitStart,
+  onExitEnd
+}) {
+  const setExplicitLock = useScrollStore((s) => s.setViewExplicitLock);
+  const config = useMemo5(
+    () => ({
+      id,
+      type: "controlled",
+      scrollDirection,
+      allowInternalScroll,
+      allowGoBack
+    }),
+    [id, scrollDirection, allowInternalScroll, allowGoBack]
+  );
+  const { isActive, index } = useViewRegistration({
+    config,
+    onActivate,
+    onDeactivate,
+    onEnterStart,
+    onEnterEnd,
+    onExitStart,
+    onExitEnd
+  });
+  const { scrollRef } = useMetricsReporter({
+    id,
+    isActive,
+    scrollDirection: allowInternalScroll ? scrollDirection : "none"
+  });
+  useEffect10(() => {
+    const lockState = canProceed ? "unlocked" : "locked";
+    setExplicitLock(id, lockState);
+  }, [id, canProceed, setExplicitLock]);
+  const overflowClasses = useMemo5(() => {
+    if (!allowInternalScroll) return "overflow-hidden";
+    switch (scrollDirection) {
+      case "vertical":
+        return "overflow-y-auto overflow-x-hidden";
+      case "horizontal":
+        return "overflow-x-auto overflow-y-hidden";
+      default:
+        return "overflow-auto";
+    }
+  }, [allowInternalScroll, scrollDirection]);
+  return /* @__PURE__ */ jsx4(
+    "section",
+    {
+      id,
+      className: `relative w-full h-screen ${isActive ? "z-10" : "z-0"} ${className}`,
+      "data-view-type": "controlled",
+      "data-active": isActive,
+      children: /* @__PURE__ */ jsx4(
+        "div",
+        {
+          ref: scrollRef,
+          className: `w-full h-full ${overflowClasses}`,
+          children
+        }
+      )
+    }
+  );
+}
+function useViewControl(viewId) {
+  const setExplicitLock = useScrollStore((s) => s.setViewExplicitLock);
+  const goToNext = useScrollStore((s) => s.goToNext);
+  const goToPrevious = useScrollStore((s) => s.goToPrevious);
+  const goToView = useScrollStore((s) => s.goToView);
+  return useMemo5(
+    () => ({
+      unlock: () => setExplicitLock(viewId, "unlocked"),
+      lock: () => setExplicitLock(viewId, "locked"),
+      // Navegación Programática (Forzada)
+      goNext: () => goToNext(),
+      goPrev: () => goToPrevious(),
+      goTo: (to) => goToView(to)
+    }),
+    [viewId, setExplicitLock, goToNext, goToPrevious, goToView]
+  );
+}
+
+// components/ScrollDebugOverlay.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+function ScrollDebugOverlay({
+  position = "bottom-left",
+  visible = true
+}) {
+  const activeIndex = useScrollStore((s) => s.activeIndex);
+  const totalViews = useScrollStore((s) => s.totalViews);
+  const isTransitioning = useScrollStore((s) => s.isTransitioning);
+  const isGlobalLocked = useScrollStore((s) => s.isGlobalLocked);
+  const isInitialized = useScrollStore((s) => s.isInitialized);
+  const views = useScrollStore((s) => s.views);
+  const activeView = views[activeIndex];
+  if (!visible) return null;
+  const positionClasses = {
+    "top-left": "top-4 left-4",
+    "top-right": "top-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "bottom-right": "bottom-4 right-4"
+  };
+  return /* @__PURE__ */ 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__ */ 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" }),
+          "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 })
+        ] }),
+        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 })
+        ] }),
+        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) })
+        ] })
+      ]
+    }
+  );
+}
+function Row({
+  label,
+  value,
+  highlight = false
+}) {
+  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__ */ jsxs("div", { className: "flex justify-between gap-4", children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-green-500/70", children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx5("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 activeIndex = useScrollStore((s) => s.activeIndex);
+  const activeId = useScrollStore((s) => s.activeId);
+  const totalViews = useScrollStore((s) => s.totalViews);
+  const isTransitioning = useScrollStore((s) => s.isTransitioning);
+  useEffect11(() => {
+    if (!isTransitioning && activeId) {
+      const message = template.replace("{viewIndex}", String(activeIndex + 1)).replace("{viewId}", activeId).replace("{totalViews}", String(totalViews));
+      const timer = setTimeout(() => {
+        setAnnouncement(message);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [activeIndex, activeId, totalViews, isTransitioning, template]);
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      role: "status",
+      "aria-live": politeness,
+      "aria-atomic": "true",
+      className: "sr-only",
+      style: {
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        padding: 0,
+        margin: "-1px",
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        border: 0
+      },
+      children: announcement
+    }
+  );
+}
+
+// components/LazyView.tsx
+import { useMemo as useMemo6 } from "react";
+import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
+function LazyView({
+  viewId,
+  buffer = 1,
+  children,
+  placeholder = null
+}) {
+  const activeIndex = useScrollStore((s) => s.activeIndex);
+  const views = useScrollStore((s) => s.views);
+  const shouldRender = useMemo6(() => {
+    const viewIndex = views.findIndex((v) => v.id === viewId);
+    if (viewIndex === -1) return false;
+    const minIndex = Math.max(0, activeIndex - buffer);
+    const maxIndex = Math.min(views.length - 1, activeIndex + buffer);
+    return viewIndex >= minIndex && viewIndex <= maxIndex;
+  }, [viewId, views, activeIndex, buffer]);
+  if (!shouldRender) {
+    return /* @__PURE__ */ jsx7(Fragment, { children: placeholder });
+  }
+  return /* @__PURE__ */ jsx7(Fragment, { 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 activeIndex = useScrollStore((s) => s.activeIndex);
+  const activeId = useScrollStore((s) => s.activeId);
+  const totalViews = useScrollStore((s) => s.totalViews);
+  const isTransitioning = useScrollStore((s) => s.isTransitioning);
+  const isScrollLocked = useScrollStore((s) => s.isGlobalLocked);
+  const canNavigateNext = useScrollStore(selectCanNavigateNext);
+  const canNavigatePrevious = useScrollStore(selectCanNavigatePrevious);
+  const goToNext = useCallback4(() => {
+    return goToNextAction();
+  }, [goToNextAction]);
+  const goToPrevious = useCallback4(() => {
+    return goToPreviousAction();
+  }, [goToPreviousAction]);
+  const isFirstView = activeIndex === 0;
+  const isLastView = activeIndex === totalViews - 1;
+  const progress = totalViews > 1 ? activeIndex / (totalViews - 1) : 0;
+  return useMemo7(
+    () => ({
+      // Acciones de navegación
+      goToView,
+      goToNext,
+      goToPrevious,
+      // Control de bloqueo
+      lockScroll,
+      unlockScroll,
+      // Estado actual
+      activeIndex,
+      activeId,
+      totalViews,
+      // Estados de UI
+      isTransitioning,
+      isScrollLocked,
+      canNavigateNext,
+      canNavigatePrevious,
+      // Utilidades
+      isFirstView,
+      isLastView,
+      progress
+    }),
+    [
+      goToView,
+      goToNext,
+      goToPrevious,
+      lockScroll,
+      unlockScroll,
+      activeIndex,
+      activeId,
+      totalViews,
+      isTransitioning,
+      isScrollLocked,
+      canNavigateNext,
+      canNavigatePrevious,
+      isFirstView,
+      isLastView,
+      progress
+    ]
+  );
+}
+
+// hooks/useViewProgress.ts
+function useViewProgress(viewId) {
+  const progress = useScrollStore(
+    (s) => s.views.find((v) => v.id === viewId)?.progress ?? 0
+  );
+  const navigation = useScrollStore(
+    (s) => s.views.find((v) => v.id === viewId)?.navigation ?? "unlocked"
+  );
+  const isAtStart = progress <= 0.02;
+  const isAtEnd = progress >= 0.99;
+  return {
+    progress,
+    isAtStart,
+    isAtEnd,
+    navigation
+  };
+}
+function useActiveViewProgress() {
+  const progress = useScrollStore(selectActiveViewProgress);
+  const activeView = useScrollStore((s) => s.views[s.activeIndex]);
+  const hasInternalScroll = activeView?.capability === "internal";
+  return {
+    progress,
+    hasInternalScroll,
+    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) => ({
+    viewId,
+    viewIndex,
+    enterTime,
+    exitTime,
+    duration: exitTime ? (exitTime - enterTime) / 1e3 : 0,
+    isActive
+  }), []);
+  useEffect12(() => {
+    if (!enabled) return;
+    if (!isTransitioning && (activeIndex !== prevIndexRef.current || activeId !== prevIdRef.current)) {
+      const now = Date.now();
+      if (prevIdRef.current) {
+        const exitAnalytics = createAnalytics(
+          prevIdRef.current,
+          prevIndexRef.current,
+          enterTimeRef.current,
+          false,
+          now
+        );
+        onViewExit?.(exitAnalytics);
+      }
+      if (activeId) {
+        enterTimeRef.current = now;
+        const enterAnalytics = createAnalytics(
+          activeId,
+          activeIndex,
+          now,
+          true
+        );
+        onViewEnter?.(enterAnalytics);
+      }
+      prevIndexRef.current = activeIndex;
+      prevIdRef.current = activeId;
+    }
+  }, [activeIndex, activeId, isTransitioning, enabled, onViewEnter, onViewExit, createAnalytics]);
+  return {
+    currentViewId: activeId,
+    currentViewIndex: activeIndex,
+    viewStartTime: enterTimeRef.current,
+    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
+};