@papyrus-sdk/ui-react-native 0.2.26 → 0.2.27

package/dist/index.mjs

@@ -25279,6 +25279,12 @@ var resolvePageTapChromeVisibility = ({
   return !chromeVisible;
 };
 
+// components/selectionContentInteraction.ts
+var shouldDismissSelectionOnContentInteraction = ({
+  selectionActive,
+  interaction
+}) => selectionActive && (interaction === "tap" || interaction === "scroll");
+
 // components/DedicatedAndroidPdfViewer.tsx
 import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var TEXT_MARKUP_TOOLS2 = /* @__PURE__ */ new Set(["highlight", "underline", "squiggly", "strikeout"]);
@@ -25459,6 +25465,13 @@ function DedicatedAndroidPdfViewer({
           setSelectedAnnotation(event.nativeEvent.id);
         },
         onTap: () => {
+          if (shouldDismissSelectionOnContentInteraction({
+            selectionActive: selectionRef.current !== null,
+            interaction: "tap"
+          })) {
+            setSelection(null);
+            selectionRef.current = null;
+          }
           const nextVisible = resolvePageTapChromeVisibility({
             chromeVisible: chromeVisibleRef.current,
             selectionActive: selectionRef.current !== null,
@@ -25485,66 +25498,61 @@ function DedicatedAndroidPdfViewer({
           }
         },
         onScroll: (event) => {
+          if (shouldDismissSelectionOnContentInteraction({
+            selectionActive: selectionRef.current !== null,
+            interaction: "scroll"
+          })) {
+            setSelection(null);
+            selectionRef.current = null;
+          }
           trackMobileChromeByOffset(event.nativeEvent.offsetY, "native.scroll");
         }
       }
     ),
-    selection && /* @__PURE__ */ jsxs4(Fragment, { children: [
+    selection && /* @__PURE__ */ jsx5(Fragment, { children: /* @__PURE__ */ jsx5(View3, { style: styles3.selectionToolbar, pointerEvents: "box-none", children: /* @__PURE__ */ jsxs4(View3, { style: styles3.toolbarContent, children: [
       /* @__PURE__ */ jsx5(
         Pressable2,
         {
-          style: styles3.overlay,
           onPress: () => {
-            setSelection(null);
-            selectionRef.current = null;
-          }
+            void copySelection();
+          },
+          style: styles3.toolbarButton,
+          accessibilityRole: "button",
+          accessibilityLabel: "Copy selected text",
+          children: /* @__PURE__ */ jsx5(IconCopy, { size: 20, color: "#fff", strokeWidth: 2 })
         }
       ),
-      /* @__PURE__ */ jsx5(View3, { style: styles3.selectionToolbar, pointerEvents: "box-none", children: /* @__PURE__ */ jsxs4(View3, { style: styles3.toolbarContent, children: [
-        /* @__PURE__ */ jsx5(
-          Pressable2,
-          {
-            onPress: () => {
-              void copySelection();
-            },
-            style: styles3.toolbarButton,
-            accessibilityRole: "button",
-            accessibilityLabel: "Copy selected text",
-            children: /* @__PURE__ */ jsx5(IconCopy, { size: 20, color: "#fff", strokeWidth: 2 })
-          }
-        ),
-        /* @__PURE__ */ jsx5(
-          Pressable2,
-          {
-            onPress: () => {
-              applySelection("highlight");
-            },
-            style: styles3.toolbarButton,
-            children: /* @__PURE__ */ jsx5(IconHighlight, { size: 22, color: "#fbbf24" })
-          }
-        ),
-        /* @__PURE__ */ jsx5(
-          Pressable2,
-          {
-            onPress: () => {
-              applySelection("underline");
-            },
-            style: styles3.toolbarButton,
-            children: /* @__PURE__ */ jsx5(IconUnderline, { size: 22, color: "#60a5fa" })
-          }
-        ),
-        /* @__PURE__ */ jsx5(
-          Pressable2,
-          {
-            onPress: () => {
-              applySelection("comment");
-            },
-            style: styles3.toolbarButton,
-            children: /* @__PURE__ */ jsx5(IconCommentBubble, { size: 22, color: "#fff" })
-          }
-        )
-      ] }) })
-    ] })
+      /* @__PURE__ */ jsx5(
+        Pressable2,
+        {
+          onPress: () => {
+            applySelection("highlight");
+          },
+          style: styles3.toolbarButton,
+          children: /* @__PURE__ */ jsx5(IconHighlight, { size: 22, color: "#fbbf24" })
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        Pressable2,
+        {
+          onPress: () => {
+            applySelection("underline");
+          },
+          style: styles3.toolbarButton,
+          children: /* @__PURE__ */ jsx5(IconUnderline, { size: 22, color: "#60a5fa" })
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        Pressable2,
+        {
+          onPress: () => {
+            applySelection("comment");
+          },
+          style: styles3.toolbarButton,
+          children: /* @__PURE__ */ jsx5(IconCommentBubble, { size: 22, color: "#fff" })
+        }
+      )
+    ] }) }) })
   ] });
 }
 var styles3 = StyleSheet3.create({
@@ -25584,10 +25592,6 @@ var styles3 = StyleSheet3.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  overlay: {
-    ...StyleSheet3.absoluteFillObject,
-    zIndex: 40
-  },
   toolbarButtonText: {
     color: "#fff",
     fontSize: 11,
@@ -25742,6 +25746,87 @@ function createScrollPerfSession({
   return { begin, track, end };
 }
 
+// components/pageScrubberModel.ts
+var shouldRenderPageScrubber = ({
+  mobileChromeVisible,
+  mobileProgressPillVisible,
+  isScrubbing
+}) => mobileProgressPillVisible && (mobileChromeVisible || isScrubbing);
+var shouldEnableViewerScrollForPageScrub = ({
+  viewerScrollEnabled,
+  isScrubbing
+}) => viewerScrollEnabled && !isScrubbing;
+var resolvePageScrubberTouchPolicy = () => ({
+  responderTarget: "pill",
+  claimOnStart: true,
+  captureOnStart: true,
+  captureOnMove: true,
+  childConsumesTouch: false
+});
+var resolvePageScrubberReleaseAction = ({
+  hasMoved,
+  pendingPage
+}) => hasMoved && pendingPage !== null ? { kind: "navigate", page: pendingPage } : { kind: "open" };
+var createPageScrubberNavigationController = (onRelease) => {
+  let active = false;
+  let pendingPage = null;
+  return {
+    begin: () => {
+      active = true;
+      pendingPage = null;
+    },
+    update: (page) => {
+      if (active) pendingPage = page;
+    },
+    release: () => {
+      active = false;
+      const page = pendingPage;
+      pendingPage = null;
+      if (page !== null) onRelease(page);
+      return page;
+    },
+    cancel: () => {
+      active = false;
+      pendingPage = null;
+    }
+  };
+};
+var resolvePageScrubberThumbTopFromPosition = ({
+  position,
+  trackHeight,
+  thumbHeight
+}) => Math.max(0, Math.min(trackHeight - thumbHeight, position - thumbHeight / 2));
+var resolvePageScrubberThumbTop = ({
+  currentPage,
+  trackHeight,
+  thumbHeight,
+  pageCount
+}) => {
+  if (pageCount <= 1) return 0;
+  const travel = Math.max(0, trackHeight - thumbHeight);
+  const ratio = Math.max(
+    0,
+    Math.min(1, (currentPage - 1) / Math.max(1, pageCount - 1))
+  );
+  return ratio * travel;
+};
+var resolvePageScrubberPage = ({
+  position,
+  trackHeight,
+  thumbHeight,
+  pageCount
+}) => {
+  if (!Number.isFinite(pageCount) || pageCount <= 0) return null;
+  if (pageCount === 1) return 1;
+  const travel = Math.max(0, trackHeight - thumbHeight);
+  const thumbTop = Math.max(0, Math.min(travel, position - thumbHeight / 2));
+  const ratio = travel === 0 ? 0 : thumbTop / travel;
+  return Math.max(
+    1,
+    Math.min(pageCount, Math.round(ratio * (pageCount - 1)) + 1)
+  );
+};
+
 // components/viewerNavigation.ts
 var resolveViewerScrollTarget = (pageIndex, isDouble) => ({
   pageIndex,
@@ -25801,7 +25886,8 @@ var Viewer = ({
   maxToRenderPerBatch,
   removeClippedSubviews,
   useDedicatedAndroidPdfViewer,
-  viewerMode
+  viewerMode,
+  pageScrubActive = false
 }) => {
   const pageCount = useViewerStore4((state) => state.pageCount);
   const currentPage = useViewerStore4((state) => state.currentPage);
@@ -25876,6 +25962,8 @@ var Viewer = ({
   const selectionDragActiveRef = useRef4(false);
   const [gestureScrollLockActive, setGestureScrollLockActive] = useState4(false);
   const gestureScrollLockActiveRef = useRef4(false);
+  const pageScrubActiveRef = useRef4(pageScrubActive);
+  pageScrubActiveRef.current = pageScrubActive;
   const pinchPreviewScale = useRef4(new Animated.Value(1)).current;
   const pinchPreviewFocalX = useRef4(new Animated.Value(0)).current;
   const pinchPreviewFocalY = useRef4(new Animated.Value(0)).current;
@@ -26390,16 +26478,20 @@ var Viewer = ({
     selectionDragActive,
     gestureScrollLockActive
   });
+  const pageScrubResolvedScrollEnabled = shouldEnableViewerScrollForPageScrub({
+    viewerScrollEnabled: resolvedViewerScrollEnabled,
+    isScrubbing: pageScrubActive
+  });
   const setViewerScrollEnabledNative = useCallback3((enabled) => {
     const scrollNode = listRef.current;
     scrollNode?.setNativeProps?.({ scrollEnabled: enabled });
   }, []);
   const syncViewerScrollEnabled = useCallback3(
-    (nextSelectionDragActive = selectionDragActiveRef.current, nextGestureScrollLockActive = gestureScrollLockActiveRef.current) => {
+    (nextSelectionDragActive = selectionDragActiveRef.current, nextGestureScrollLockActive = gestureScrollLockActiveRef.current, nextPageScrubActive = pageScrubActiveRef.current) => {
       setViewerScrollEnabledNative(
         shouldEnableViewerScroll({
           selectionDragActive: nextSelectionDragActive,
-          gestureScrollLockActive: nextGestureScrollLockActive
+          gestureScrollLockActive: nextGestureScrollLockActive || nextPageScrubActive
         })
       );
     },
@@ -26672,6 +26764,13 @@ var Viewer = ({
       gestureScrollLockActiveRef.current
     );
   }, [selectionDragActive, syncViewerScrollEnabled]);
+  useEffect4(() => {
+    syncViewerScrollEnabled(
+      selectionDragActiveRef.current,
+      gestureScrollLockActiveRef.current,
+      pageScrubActive
+    );
+  }, [pageScrubActive, syncViewerScrollEnabled]);
   useEffect4(() => {
     const pendingRestore = pendingPinchAnchorRestoreRef.current;
     if (!pendingRestore) return;
@@ -27241,7 +27340,7 @@ var Viewer = ({
           {
             ref: horizontalScrollRef,
             horizontal: true,
-            scrollEnabled: !gestureScrollLockActive && documentSurfaceWidth > windowWidth,
+            scrollEnabled: !gestureScrollLockActive && !pageScrubActive && documentSurfaceWidth > windowWidth,
             showsHorizontalScrollIndicator: false,
             onScroll: (event) => {
               horizontalScrollOffsetRef.current = event.nativeEvent.contentOffset?.x ?? 0;
@@ -27257,7 +27356,7 @@ var Viewer = ({
                 style: { width: documentSurfaceWidth },
                 contentContainerStyle: styles4.singleContent,
                 showsVerticalScrollIndicator: false,
-                scrollEnabled: resolvedViewerScrollEnabled,
+                scrollEnabled: pageScrubResolvedScrollEnabled,
                 onLayout: () => captureViewerFrame(listRef.current),
                 onContentSizeChange: (_, height) => {
                   viewerContentHeightRef.current = height;
@@ -27330,7 +27429,7 @@ var Viewer = ({
         {
           ref: horizontalScrollRef,
           horizontal: true,
-          scrollEnabled: !gestureScrollLockActive && documentSurfaceWidth > windowWidth,
+          scrollEnabled: !gestureScrollLockActive && !pageScrubActive && documentSurfaceWidth > windowWidth,
           showsHorizontalScrollIndicator: false,
           onScroll: (event) => {
             horizontalScrollOffsetRef.current = event.nativeEvent.contentOffset?.x ?? 0;
@@ -27353,7 +27452,7 @@ var Viewer = ({
               renderItem,
               onViewableItemsChanged,
               viewabilityConfig: { itemVisiblePercentThreshold: 60 },
-              scrollEnabled: resolvedViewerScrollEnabled,
+              scrollEnabled: pageScrubResolvedScrollEnabled,
               onLayout: () => {
                 captureViewerFrame(listRef.current);
                 restoreOrientationScrollOffset();
@@ -29281,6 +29380,11 @@ var resolveRightSheetHeight = ({
 }) => showingNotes ? Math.min(440, windowHeight * 0.56) : Math.min(640, windowHeight * 0.72);
 var supportsPageThumbnails = (documentType) => documentType !== "text" && documentType !== "epub";
 
+// components/thumbnailClipping.ts
+var shouldRemoveThumbnailClipping = ({
+  useNativePreview
+}) => !useNativePreview;
+
 // components/RightSheet.tsx
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var THUMBNAILS_INITIAL_NUM_TO_RENDER = 4;
@@ -29796,7 +29900,9 @@ var RightSheet = ({
               windowSize: THUMBNAILS_WINDOW_SIZE,
               maxToRenderPerBatch: THUMBNAILS_MAX_TO_RENDER_PER_BATCH,
               updateCellsBatchingPeriod: THUMBNAILS_UPDATE_CELLS_BATCHING_PERIOD,
-              removeClippedSubviews: true,
+              removeClippedSubviews: shouldRemoveThumbnailClipping({
+                useNativePreview
+              }),
               viewabilityConfig: { itemVisiblePercentThreshold: 20 },
               onViewableItemsChanged: onThumbnailsViewableItemsChanged,
               renderItem: renderThumbnailItem
@@ -31390,7 +31496,7 @@ var styles13 = StyleSheet13.create({
 var CoverPreview_default = CoverPreview;
 
 // components/ReadingShell.tsx
-import React16, { useState as useState12 } from "react";
+import React16, { useState as useState13 } from "react";
 import { Keyboard as Keyboard2, View as View19, StyleSheet as StyleSheet20 } from "react-native";
 import { useViewerStore as useViewerStore17 } from "@papyrus-sdk/core";
 
@@ -31754,25 +31860,24 @@ var styles16 = StyleSheet16.create({
 });
 
 // components/ProgressPill.tsx
-import { useMemo as useMemo7 } from "react";
-import { Pressable as Pressable12, StyleSheet as StyleSheet17, Text as Text12, View as View17 } from "react-native";
+import { useEffect as useEffect10, useMemo as useMemo7, useRef as useRef8, useState as useState11 } from "react";
+import {
+  Animated as Animated2,
+  PanResponder as PanResponder2,
+  StyleSheet as StyleSheet17,
+  Text as Text12,
+  View as View17,
+  useWindowDimensions as useWindowDimensions6
+} from "react-native";
 import { useViewerStore as useViewerStore14 } from "@papyrus-sdk/core";
-
-// components/progressPillInteraction.ts
-var getProgressPillInteraction = (onPress, onLongPress) => ({
-  onPress,
-  onLongPress,
-  accessibilityLabel: "Open document navigation",
-  accessibilityRole: "button"
-});
-
-// components/ProgressPill.tsx
 import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 var clampPercent = (value) => Math.max(0, Math.min(100, Math.round(value)));
 function ProgressPill({
   documentType,
   onPress,
-  onOpenPageJump
+  onOpenPageJump,
+  onNavigateToPage,
+  onScrubbingChange
 }) {
   const {
     currentPage,
@@ -31784,18 +31889,193 @@ function ProgressPill({
   } = useViewerStore14();
   const isDark = uiTheme === "dark";
   const offsets = resolveMobileChromeOffsets(usePapyrusSafeAreaInsets());
+  const { height: windowHeight } = useWindowDimensions6();
+  const trackHeight = Math.max(
+    180,
+    Math.min(520, windowHeight - offsets.progress - offsets.bottom - 132)
+  );
+  const thumbHeight = 44;
+  const trackYRef = useRef8(0);
+  const scrubberRef = useRef8(null);
+  const currentPageRef = useRef8(currentPage);
+  currentPageRef.current = currentPage;
+  const isScrubbingRef = useRef8(false);
+  const hasMovedRef = useRef8(false);
+  const longPressTriggeredRef = useRef8(false);
+  const longPressTimerRef = useRef8(null);
+  const pendingReleasedScrubPageRef = useRef8(null);
+  const [scrubPreviewPage, setScrubPreviewPage] = useState11(null);
+  const onNavigateToPageRef = useRef8(onNavigateToPage);
+  const onPressRef = useRef8(onPress);
+  const onOpenPageJumpRef = useRef8(onOpenPageJump);
+  const onScrubbingChangeRef = useRef8(onScrubbingChange);
+  onScrubbingChangeRef.current = onScrubbingChange;
+  const scrubToPositionRef = useRef8(() => {
+  });
+  const scrubNavigationControllerRef = useRef8(
+    createPageScrubberNavigationController((page) => {
+      onNavigateToPageRef.current?.(page);
+    })
+  );
+  const scrubberResponderRef = useRef8(null);
+  const touchPolicy = resolvePageScrubberTouchPolicy();
+  const displayedPage = scrubPreviewPage ?? currentPage;
   const label = useMemo7(() => {
     const total = Math.max(pageCount, 1);
-    const percent = clampPercent(currentPage / total * 100);
+    const percent = clampPercent(displayedPage / total * 100);
     if (documentType === "pdf") {
-      return `${currentPage}/${pageCount || 0}`;
+      return `${displayedPage}/${pageCount || 0}`;
     }
     if (documentType === "epub") {
-      return `Cap. ${currentPage} \xB7 ${percent}%`;
+      return `Cap. ${displayedPage} \xB7 ${percent}%`;
     }
     return `${percent}%`;
-  }, [currentPage, documentType, pageCount]);
-  if (!mobileChromeVisible || !mobileProgressPillVisible) return null;
+  }, [displayedPage, documentType, pageCount]);
+  const thumbTop = resolvePageScrubberThumbTop({
+    currentPage,
+    trackHeight,
+    thumbHeight,
+    pageCount
+  });
+  const thumbTopRef = useRef8(new Animated2.Value(thumbTop));
+  const thumbTopSnapshotRef = useRef8(thumbTop);
+  thumbTopSnapshotRef.current = thumbTop;
+  const scrubberMetricsRef = useRef8({ trackHeight, thumbHeight, pageCount });
+  scrubberMetricsRef.current = { trackHeight, thumbHeight, pageCount };
+  useEffect10(() => {
+    onNavigateToPageRef.current = onNavigateToPage;
+  }, [onNavigateToPage]);
+  useEffect10(() => {
+    onPressRef.current = onPress;
+    onOpenPageJumpRef.current = onOpenPageJump;
+  }, [onOpenPageJump, onPress]);
+  useEffect10(() => {
+    const pendingPage = pendingReleasedScrubPageRef.current;
+    if (pendingPage !== null && currentPage === pendingPage) {
+      pendingReleasedScrubPageRef.current = null;
+      setScrubPreviewPage(null);
+    }
+  }, [currentPage]);
+  useEffect10(() => {
+    if (!isScrubbingRef.current) {
+      thumbTopRef.current.setValue(thumbTop);
+    }
+  }, [thumbTop, thumbTopRef]);
+  useEffect10(
+    () => () => {
+      if (longPressTimerRef.current !== null) {
+        clearTimeout(longPressTimerRef.current);
+      }
+    },
+    []
+  );
+  if (!shouldRenderPageScrubber({
+    mobileChromeVisible,
+    mobileProgressPillVisible,
+    isScrubbing: isScrubbingRef.current
+  })) {
+    return null;
+  }
+  const scrubToPosition = (position) => {
+    const { trackHeight: trackHeight2, thumbHeight: thumbHeight2, pageCount: pageCount2 } = scrubberMetricsRef.current;
+    const visualPosition = resolvePageScrubberThumbTopFromPosition({
+      position,
+      trackHeight: trackHeight2,
+      thumbHeight: thumbHeight2
+    });
+    thumbTopRef.current.setValue(visualPosition);
+    const nextPage = resolvePageScrubberPage({
+      position,
+      trackHeight: trackHeight2,
+      thumbHeight: thumbHeight2,
+      pageCount: pageCount2
+    });
+    if (nextPage === null) return;
+    scrubNavigationControllerRef.current.update(nextPage);
+    setScrubPreviewPage(nextPage);
+  };
+  scrubToPositionRef.current = scrubToPosition;
+  if (scrubberResponderRef.current === null) {
+    scrubberResponderRef.current = PanResponder2.create({
+      onStartShouldSetPanResponder: () => touchPolicy.claimOnStart,
+      onStartShouldSetPanResponderCapture: () => touchPolicy.captureOnStart,
+      onMoveShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponderCapture: () => touchPolicy.captureOnMove,
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderGrant: () => {
+        isScrubbingRef.current = true;
+        onScrubbingChangeRef.current?.(true);
+        hasMovedRef.current = false;
+        longPressTriggeredRef.current = false;
+        scrubNavigationControllerRef.current.begin();
+        pendingReleasedScrubPageRef.current = null;
+        setScrubPreviewPage(currentPageRef.current);
+        if (longPressTimerRef.current !== null) {
+          clearTimeout(longPressTimerRef.current);
+        }
+        longPressTimerRef.current = onOpenPageJumpRef.current ? setTimeout(() => {
+          longPressTimerRef.current = null;
+          if (!hasMovedRef.current) {
+            longPressTriggeredRef.current = true;
+            onOpenPageJumpRef.current?.();
+          }
+        }, 500) : null;
+      },
+      onPanResponderMove: (_, gestureState) => {
+        if (Math.abs(gestureState.dy) <= 4) return;
+        hasMovedRef.current = true;
+        if (longPressTimerRef.current !== null) {
+          clearTimeout(longPressTimerRef.current);
+          longPressTimerRef.current = null;
+        }
+        scrubToPositionRef.current(gestureState.moveY - trackYRef.current);
+      },
+      onPanResponderRelease: () => {
+        if (longPressTimerRef.current !== null) {
+          clearTimeout(longPressTimerRef.current);
+          longPressTimerRef.current = null;
+        }
+        isScrubbingRef.current = false;
+        onScrubbingChangeRef.current?.(false);
+        const releasedPage = scrubNavigationControllerRef.current.release();
+        const releaseAction = resolvePageScrubberReleaseAction({
+          hasMoved: hasMovedRef.current,
+          pendingPage: releasedPage
+        });
+        if (releaseAction.kind === "navigate") {
+          pendingReleasedScrubPageRef.current = releaseAction.page;
+          if (!onNavigateToPageRef.current) {
+            setScrubPreviewPage(null);
+          }
+        } else {
+          scrubNavigationControllerRef.current.cancel();
+          pendingReleasedScrubPageRef.current = null;
+          setScrubPreviewPage(null);
+          if (!longPressTriggeredRef.current) onPressRef.current();
+        }
+        hasMovedRef.current = false;
+        longPressTriggeredRef.current = false;
+      },
+      onPanResponderTerminate: () => {
+        if (longPressTimerRef.current !== null) {
+          clearTimeout(longPressTimerRef.current);
+          longPressTimerRef.current = null;
+        }
+        isScrubbingRef.current = false;
+        onScrubbingChangeRef.current?.(false);
+        scrubNavigationControllerRef.current.cancel();
+        pendingReleasedScrubPageRef.current = null;
+        setScrubPreviewPage(null);
+        hasMovedRef.current = false;
+        longPressTriggeredRef.current = false;
+        thumbTopRef.current.setValue(thumbTopSnapshotRef.current);
+      }
+    });
+  }
+  const responderPanHandlers = scrubberResponderRef.current?.panHandlers ?? {};
+  const responderTarget = touchPolicy.responderTarget;
+  const scrubberPanHandlers = responderTarget === "track" ? responderPanHandlers : {};
+  const pillPanHandlers = responderTarget === "pill" ? responderPanHandlers : {};
   return /* @__PURE__ */ jsx20(
     View17,
     {
@@ -31804,32 +32084,45 @@ function ProgressPill({
         styles17.frame,
         {
           top: offsets.progress,
-          left: 0,
-          right: 0,
-          paddingLeft: offsets.left + MOBILE_CHROME_METRICS.progressHorizontalOffset,
-          paddingRight: offsets.right
+          right: offsets.right
         }
       ],
       children: /* @__PURE__ */ jsxs17(
-        Pressable12,
+        View17,
         {
-          ...getProgressPillInteraction(onPress, onOpenPageJump),
-          style: [
-            styles17.pill,
-            isDark && styles17.pillDark,
-            { borderColor: `${accentColor}33` }
-          ],
-          testID: "papyrus-progress-pill",
+          ref: scrubberRef,
+          style: [styles17.scrubber, { height: trackHeight }],
+          ...scrubberPanHandlers,
+          onLayout: () => {
+            scrubberRef.current?.measureInWindow((_x, y) => {
+              trackYRef.current = y;
+            });
+          },
           children: [
-            /* @__PURE__ */ jsx20(View17, { style: styles17.iconHit, children: /* @__PURE__ */ jsx20(
-              IconPageNav,
+            /* @__PURE__ */ jsx20(View17, { style: [styles17.track, isDark && styles17.trackDark] }),
+            /* @__PURE__ */ jsx20(Animated2.View, { style: [styles17.thumb, { top: thumbTopRef.current }], children: /* @__PURE__ */ jsxs17(
+              View17,
               {
-                size: 20,
-                color: isDark ? "#f8fafc" : "#111827",
-                strokeWidth: 1.8
+                style: [
+                  styles17.pill,
+                  isDark && styles17.pillDark,
+                  { borderColor: `${accentColor}33` }
+                ],
+                ...pillPanHandlers,
+                testID: "papyrus-progress-pill",
+                children: [
+                  /* @__PURE__ */ jsx20(View17, { style: styles17.labelHit, children: /* @__PURE__ */ jsx20(Text12, { style: [styles17.label, isDark && styles17.labelDark], children: label }) }),
+                  /* @__PURE__ */ jsx20(View17, { style: styles17.iconHit, children: /* @__PURE__ */ jsx20(
+                    IconPageNav,
+                    {
+                      size: 20,
+                      color: isDark ? "#f8fafc" : "#111827",
+                      strokeWidth: 1.8
+                    }
+                  ) })
+                ]
               }
-            ) }),
-            /* @__PURE__ */ jsx20(View17, { style: styles17.labelHit, children: /* @__PURE__ */ jsx20(Text12, { style: [styles17.label, isDark && styles17.labelDark], children: label }) })
+            ) })
           ]
         }
       )
@@ -31843,9 +32136,31 @@ var styles17 = StyleSheet17.create({
     left: 0,
     right: 0,
     bottom: "auto",
-    alignItems: "flex-start",
+    alignItems: "flex-end",
     zIndex: 18
   },
+  scrubber: {
+    width: 132,
+    position: "relative",
+    marginRight: 4
+  },
+  track: {
+    position: "absolute",
+    top: 0,
+    right: 30,
+    bottom: 0,
+    width: 3,
+    borderRadius: 2,
+    backgroundColor: "rgba(15,23,42,0.16)"
+  },
+  trackDark: {
+    backgroundColor: "rgba(248,250,252,0.22)"
+  },
+  thumb: {
+    position: "absolute",
+    right: 0,
+    height: 44
+  },
   pill: {
     minWidth: 92,
     borderRadius: 999,
@@ -31884,10 +32199,10 @@ var styles17 = StyleSheet17.create({
 });
 
 // components/SearchOverlay.tsx
-import React15, { useEffect as useEffect10, useMemo as useMemo8, useState as useState11 } from "react";
+import React15, { useEffect as useEffect11, useMemo as useMemo8, useState as useState12 } from "react";
 import {
   Keyboard,
-  Pressable as Pressable13,
+  Pressable as Pressable12,
   StyleSheet as StyleSheet18,
   Text as Text13,
   TextInput as TextInput3,
@@ -31915,19 +32230,19 @@ function SearchOverlay({
     uiTheme,
     accentColor
   } = useViewerStore15();
-  const [draft, setDraft] = useState11(searchQuery);
-  const [isSearching, setIsSearching] = useState11(false);
+  const [draft, setDraft] = useState12(searchQuery);
+  const [isSearching, setIsSearching] = useState12(false);
   const searchRequestIdRef = React15.useRef(0);
   const isDark = uiTheme === "dark";
   const offsets = resolveMobileChromeOffsets(usePapyrusSafeAreaInsets());
   const t = getStrings(locale);
   const searchService = useMemo8(() => new SearchService(engine), [engine]);
-  useEffect10(() => {
+  useEffect11(() => {
     searchService.clearCache();
   }, [isLoaded, pageCount, searchService]);
   const currentCount = searchResults.length > 0 && activeSearchIndex >= 0 ? activeSearchIndex + 1 : 0;
   const targetLabel = documentType === "pdf" ? t.page : documentType === "epub" ? t.contents : t.progress;
-  useEffect10(() => {
+  useEffect11(() => {
     if (!visible) return;
     setDraft(searchQuery);
   }, [searchQuery, visible]);
@@ -31980,7 +32295,7 @@ function SearchOverlay({
             )
           ] }),
           /* @__PURE__ */ jsx21(
-            Pressable13,
+            Pressable12,
             {
               onPress: handleClose,
               style: [styles18.closeButton, isDark && styles18.closeButtonDark],
@@ -31991,7 +32306,7 @@ function SearchOverlay({
         ] }),
         /* @__PURE__ */ jsxs18(View18, { style: styles18.metaRow, children: [
           /* @__PURE__ */ jsx21(
-            Pressable13,
+            Pressable12,
             {
               onPress: prevSearchResult,
               disabled: searchResults.length === 0,
@@ -32006,7 +32321,7 @@ function SearchOverlay({
           ),
           /* @__PURE__ */ jsx21(Text13, { style: [styles18.metaText, isDark && styles18.metaTextDark], children: isSearching ? t.searching : `${currentCount}/${searchResults.length} ${targetLabel}` }),
           /* @__PURE__ */ jsx21(
-            Pressable13,
+            Pressable12,
             {
               onPress: nextSearchResult,
               disabled: searchResults.length === 0,
@@ -32022,7 +32337,7 @@ function SearchOverlay({
         ] }),
         /* @__PURE__ */ jsxs18(View18, { style: styles18.actionsRow, children: [
           /* @__PURE__ */ jsx21(
-            Pressable13,
+            Pressable12,
             {
               onPress: handleSubmit,
               style: [styles18.primaryAction, { backgroundColor: accentColor }],
@@ -32032,7 +32347,7 @@ function SearchOverlay({
             }
           ),
           /* @__PURE__ */ jsx21(
-            Pressable13,
+            Pressable12,
             {
               onPress: onOpenResults,
               disabled: searchResults.length === 0,
@@ -32200,7 +32515,7 @@ var styles18 = StyleSheet18.create({
 });
 
 // components/SearchResultsSheet.tsx
-import { Pressable as Pressable14, StyleSheet as StyleSheet19, Text as Text14 } from "react-native";
+import { Pressable as Pressable13, StyleSheet as StyleSheet19, Text as Text14 } from "react-native";
 import { useViewerStore as useViewerStore16 } from "@papyrus-sdk/core";
 import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function SearchResultsSheet({
@@ -32251,7 +32566,7 @@ function SearchResultsSheet({
         /* @__PURE__ */ jsx22(NativeSheetScrollView, { contentContainerStyle: styles19.content, children: searchResults.length === 0 ? /* @__PURE__ */ jsx22(Text14, { style: [styles19.emptyText, { color: palette.mutedText }], children: t.noResults }) : searchResults.map((result, index) => {
           const isActive = index === activeSearchIndex;
           return /* @__PURE__ */ jsxs19(
-            Pressable14,
+            Pressable13,
             {
               onPress: () => {
                 setDocumentState({
@@ -32321,12 +32636,13 @@ function ReadingShell({
     uiTheme,
     accentColor
   } = useViewerStore17();
-  const [overflowOpen, setOverflowOpen] = useState12(false);
-  const [infoOpen, setInfoOpen] = useState12(false);
-  const [actionsOpen, setActionsOpen] = useState12(false);
-  const [settingsOpen, setSettingsOpen] = useState12(false);
-  const [searchResultsOpen, setSearchResultsOpen] = useState12(false);
-  const [pageJumpOpen, setPageJumpOpen] = useState12(false);
+  const [overflowOpen, setOverflowOpen] = useState13(false);
+  const [infoOpen, setInfoOpen] = useState13(false);
+  const [actionsOpen, setActionsOpen] = useState13(false);
+  const [settingsOpen, setSettingsOpen] = useState13(false);
+  const [searchResultsOpen, setSearchResultsOpen] = useState13(false);
+  const [pageJumpOpen, setPageJumpOpen] = useState13(false);
+  const [pageScrubActive, setPageScrubActive] = useState13(false);
   const isDark = uiTheme === "dark";
   React16.useEffect(() => {
     const showSubscription = Keyboard2.addListener("keyboardDidShow", () => {
@@ -32403,15 +32719,24 @@ function ReadingShell({
         showPageNavigationControls: false
       }
     ),
-    /* @__PURE__ */ jsx23(View19, { style: styles20.viewerStage, children: /* @__PURE__ */ jsx23(Viewer_default, { engine, ...viewerProps }) }),
+    /* @__PURE__ */ jsx23(View19, { style: styles20.viewerStage, children: /* @__PURE__ */ jsx23(
+      Viewer_default,
+      {
+        engine,
+        ...viewerProps,
+        pageScrubActive
+      }
+    ) }),
     /* @__PURE__ */ jsx23(
       ProgressPill,
       {
         documentType,
+        onNavigateToPage: navigateToPage,
         onPress: () => openDestination(
           documentType === "pdf" ? "pages" : documentType === "epub" ? "contents" : "progress"
         ),
-        onOpenPageJump: () => setPageJumpOpen(true)
+        onOpenPageJump: () => setPageJumpOpen(true),
+        onScrubbingChange: setPageScrubActive
       }
     ),
     /* @__PURE__ */ jsx23(