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

package/dist/index.js

@@ -25460,6 +25460,12 @@ var resolvePageTapChromeVisibility = ({
   return !chromeVisible;
 };
 
+// components/selectionContentInteraction.ts
+var shouldDismissSelectionOnContentInteraction = ({
+  selectionActive,
+  interaction
+}) => selectionActive && (interaction === "tap" || interaction === "scroll");
+
 // components/DedicatedAndroidPdfViewer.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var TEXT_MARKUP_TOOLS2 = /* @__PURE__ */ new Set(["highlight", "underline", "squiggly", "strikeout"]);
@@ -25640,6 +25646,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,
@@ -25666,66 +25679,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__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    selection && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native3.View, { style: styles3.selectionToolbar, pointerEvents: "box-none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native3.View, { style: styles3.toolbarContent, children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_react_native3.Pressable,
         {
-          style: styles3.overlay,
           onPress: () => {
-            setSelection(null);
-            selectionRef.current = null;
-          }
+            void copySelection();
+          },
+          style: styles3.toolbarButton,
+          accessibilityRole: "button",
+          accessibilityLabel: "Copy selected text",
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconCopy, { size: 20, color: "#fff", strokeWidth: 2 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native3.View, { style: styles3.selectionToolbar, pointerEvents: "box-none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native3.View, { style: styles3.toolbarContent, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_react_native3.Pressable,
-          {
-            onPress: () => {
-              void copySelection();
-            },
-            style: styles3.toolbarButton,
-            accessibilityRole: "button",
-            accessibilityLabel: "Copy selected text",
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconCopy, { size: 20, color: "#fff", strokeWidth: 2 })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_react_native3.Pressable,
-          {
-            onPress: () => {
-              applySelection("highlight");
-            },
-            style: styles3.toolbarButton,
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconHighlight, { size: 22, color: "#fbbf24" })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_react_native3.Pressable,
-          {
-            onPress: () => {
-              applySelection("underline");
-            },
-            style: styles3.toolbarButton,
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconUnderline, { size: 22, color: "#60a5fa" })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_react_native3.Pressable,
-          {
-            onPress: () => {
-              applySelection("comment");
-            },
-            style: styles3.toolbarButton,
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconCommentBubble, { size: 22, color: "#fff" })
-          }
-        )
-      ] }) })
-    ] })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_react_native3.Pressable,
+        {
+          onPress: () => {
+            applySelection("highlight");
+          },
+          style: styles3.toolbarButton,
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconHighlight, { size: 22, color: "#fbbf24" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_react_native3.Pressable,
+        {
+          onPress: () => {
+            applySelection("underline");
+          },
+          style: styles3.toolbarButton,
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconUnderline, { size: 22, color: "#60a5fa" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_react_native3.Pressable,
+        {
+          onPress: () => {
+            applySelection("comment");
+          },
+          style: styles3.toolbarButton,
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconCommentBubble, { size: 22, color: "#fff" })
+        }
+      )
+    ] }) }) })
   ] });
 }
 var styles3 = import_react_native3.StyleSheet.create({
@@ -25765,10 +25773,6 @@ var styles3 = import_react_native3.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  overlay: {
-    ...import_react_native3.StyleSheet.absoluteFillObject,
-    zIndex: 40
-  },
   toolbarButtonText: {
     color: "#fff",
     fontSize: 11,
@@ -25923,6 +25927,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,
@@ -25982,7 +26067,8 @@ var Viewer = ({
   maxToRenderPerBatch,
   removeClippedSubviews,
   useDedicatedAndroidPdfViewer,
-  viewerMode
+  viewerMode,
+  pageScrubActive = false
 }) => {
   const pageCount = (0, import_core4.useViewerStore)((state) => state.pageCount);
   const currentPage = (0, import_core4.useViewerStore)((state) => state.currentPage);
@@ -26057,6 +26143,8 @@ var Viewer = ({
   const selectionDragActiveRef = (0, import_react5.useRef)(false);
   const [gestureScrollLockActive, setGestureScrollLockActive] = (0, import_react5.useState)(false);
   const gestureScrollLockActiveRef = (0, import_react5.useRef)(false);
+  const pageScrubActiveRef = (0, import_react5.useRef)(pageScrubActive);
+  pageScrubActiveRef.current = pageScrubActive;
   const pinchPreviewScale = (0, import_react5.useRef)(new import_react_native4.Animated.Value(1)).current;
   const pinchPreviewFocalX = (0, import_react5.useRef)(new import_react_native4.Animated.Value(0)).current;
   const pinchPreviewFocalY = (0, import_react5.useRef)(new import_react_native4.Animated.Value(0)).current;
@@ -26571,16 +26659,20 @@ var Viewer = ({
     selectionDragActive,
     gestureScrollLockActive
   });
+  const pageScrubResolvedScrollEnabled = shouldEnableViewerScrollForPageScrub({
+    viewerScrollEnabled: resolvedViewerScrollEnabled,
+    isScrubbing: pageScrubActive
+  });
   const setViewerScrollEnabledNative = (0, import_react5.useCallback)((enabled) => {
     const scrollNode = listRef.current;
     scrollNode?.setNativeProps?.({ scrollEnabled: enabled });
   }, []);
   const syncViewerScrollEnabled = (0, import_react5.useCallback)(
-    (nextSelectionDragActive = selectionDragActiveRef.current, nextGestureScrollLockActive = gestureScrollLockActiveRef.current) => {
+    (nextSelectionDragActive = selectionDragActiveRef.current, nextGestureScrollLockActive = gestureScrollLockActiveRef.current, nextPageScrubActive = pageScrubActiveRef.current) => {
       setViewerScrollEnabledNative(
         shouldEnableViewerScroll({
           selectionDragActive: nextSelectionDragActive,
-          gestureScrollLockActive: nextGestureScrollLockActive
+          gestureScrollLockActive: nextGestureScrollLockActive || nextPageScrubActive
         })
       );
     },
@@ -26853,6 +26945,13 @@ var Viewer = ({
       gestureScrollLockActiveRef.current
     );
   }, [selectionDragActive, syncViewerScrollEnabled]);
+  (0, import_react5.useEffect)(() => {
+    syncViewerScrollEnabled(
+      selectionDragActiveRef.current,
+      gestureScrollLockActiveRef.current,
+      pageScrubActive
+    );
+  }, [pageScrubActive, syncViewerScrollEnabled]);
   (0, import_react5.useEffect)(() => {
     const pendingRestore = pendingPinchAnchorRestoreRef.current;
     if (!pendingRestore) return;
@@ -27038,6 +27137,17 @@ var Viewer = ({
     },
     [scaledListLayoutMetrics]
   );
+  const scrollToPendingTarget = (0, import_react5.useCallback)(
+    (animated) => {
+      const target = pendingScrollTargetRef.current;
+      if (target === null || listRef.current === null) return;
+      listRef.current.scrollToOffset({
+        offset: Math.max(0, getFallbackOffsetForIndex(target.listIndex)),
+        animated
+      });
+    },
+    [getFallbackOffsetForIndex]
+  );
   const restoreOrientationScrollOffset = (0, import_react5.useCallback)(() => {
     if (pendingOrientationRestoreWidthRef.current !== windowWidth || pageCount <= 0 || isSingle || isWebView) {
       return;
@@ -27068,6 +27178,11 @@ var Viewer = ({
     }
     restoreOrientationScrollOffset();
   }, [restoreOrientationScrollOffset, windowWidth]);
+  (0, import_react5.useEffect)(() => {
+    if (pendingScrollTargetRef.current !== null) {
+      scrollToPendingTarget(false);
+    }
+  }, [layoutRevision, scrollToPendingTarget]);
   const getItemLayout = (0, import_react5.useCallback)(
     (_, index) => {
       if (scaledListLayoutMetrics.itemCount === 0) {
@@ -27138,15 +27253,12 @@ var Viewer = ({
       },
       "scrollToPageSignal.flatList"
     );
-    listRef.current?.scrollToIndex({
-      index: target.listIndex,
-      animated: true,
-      viewPosition: 0
-    });
+    scrollToPendingTarget(true);
   }, [
     clearPendingScrollRetry,
     clearPendingScrollTarget,
     ensurePageDimensions,
+    scrollToPendingTarget,
     scrollToPageSignal,
     pageCount,
     setDocumentStateTracked,
@@ -27422,7 +27534,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;
@@ -27438,7 +27550,7 @@ var Viewer = ({
                 style: { width: documentSurfaceWidth },
                 contentContainerStyle: styles4.singleContent,
                 showsVerticalScrollIndicator: false,
-                scrollEnabled: resolvedViewerScrollEnabled,
+                scrollEnabled: pageScrubResolvedScrollEnabled,
                 onLayout: () => captureViewerFrame(listRef.current),
                 onContentSizeChange: (_, height) => {
                   viewerContentHeightRef.current = height;
@@ -27511,7 +27623,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;
@@ -27534,13 +27646,15 @@ var Viewer = ({
               renderItem,
               onViewableItemsChanged,
               viewabilityConfig: { itemVisiblePercentThreshold: 60 },
-              scrollEnabled: resolvedViewerScrollEnabled,
+              scrollEnabled: pageScrubResolvedScrollEnabled,
               onLayout: () => {
                 captureViewerFrame(listRef.current);
                 restoreOrientationScrollOffset();
+                scrollToPendingTarget(false);
               },
               onContentSizeChange: (_, height) => {
                 viewerContentHeightRef.current = height;
+                scrollToPendingTarget(false);
               },
               onScrollToIndexFailed: ({ index, averageItemLength }) => {
                 const dataLength = isDouble ? rows.length : pages.length;
@@ -27762,25 +27876,73 @@ function NativeSheet({
 }) {
   const insets = usePapyrusSafeAreaInsets();
   const palette = getNativeSheetPalette(Boolean(isDark));
+  const { height: windowHeight } = (0, import_react_native5.useWindowDimensions)();
+  const [rendered, setRendered] = (0, import_react7.useState)(visible);
+  const renderedRef = (0, import_react7.useRef)(visible);
+  const motion = (0, import_react7.useRef)(new import_react_native5.Animated.Value(visible ? 0 : 1)).current;
+  const backdropOpacity = (0, import_react7.useRef)(new import_react_native5.Animated.Value(visible ? 1 : 0)).current;
+  (0, import_react7.useEffect)(() => {
+    motion.stopAnimation();
+    backdropOpacity.stopAnimation();
+    if (visible) {
+      renderedRef.current = true;
+      setRendered(true);
+      motion.setValue(1);
+      backdropOpacity.setValue(0);
+      import_react_native5.Animated.parallel([
+        import_react_native5.Animated.spring(motion, {
+          toValue: 0,
+          damping: 22,
+          stiffness: 220,
+          mass: 0.8,
+          useNativeDriver: true
+        }),
+        import_react_native5.Animated.timing(backdropOpacity, {
+          toValue: 1,
+          duration: 180,
+          useNativeDriver: true
+        })
+      ]).start();
+      return;
+    }
+    if (!renderedRef.current) return;
+    import_react_native5.Animated.parallel([
+      import_react_native5.Animated.timing(motion, {
+        toValue: 1,
+        duration: 180,
+        useNativeDriver: true
+      }),
+      import_react_native5.Animated.timing(backdropOpacity, {
+        toValue: 0,
+        duration: 140,
+        useNativeDriver: true
+      })
+    ]).start(({ finished }) => {
+      if (!finished) return;
+      renderedRef.current = false;
+      setRendered(false);
+    });
+  }, [backdropOpacity, motion, visible]);
+  if (!rendered) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_react_native5.Modal,
     {
-      animationType: "fade",
+      animationType: "none",
       transparent: true,
-      visible,
+      visible: rendered,
       onRequestClose: onClose,
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native5.View, { style: styles5.root, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native5.Animated.View, { style: [styles5.backdrop, { opacity: backdropOpacity }], children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           import_react_native5.Pressable,
           {
             accessibilityRole: "button",
             accessibilityLabel: closeAccessibilityLabel,
-            style: styles5.backdrop,
+            style: import_react_native5.StyleSheet.absoluteFill,
             onPress: onClose
           }
-        ),
+        ) }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-          import_react_native5.View,
+          import_react_native5.Animated.View,
           {
             style: [
               styles5.sheet,
@@ -27791,7 +27953,17 @@ function NativeSheet({
                 backgroundColor: palette.backgroundColor,
                 borderTopColor: palette.borderColor
               },
-              sheetStyle
+              sheetStyle,
+              {
+                transform: [
+                  {
+                    translateY: motion.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [0, windowHeight]
+                    })
+                  }
+                ]
+              }
             ],
             children: [
               showHeader ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native5.View, { style: styles5.header, children: [
@@ -29422,6 +29594,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
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var THUMBNAILS_INITIAL_NUM_TO_RENDER = 4;
@@ -29937,7 +30114,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
@@ -31884,22 +32063,14 @@ var styles16 = import_react_native16.StyleSheet.create({
 var import_react14 = require("react");
 var import_react_native17 = require("react-native");
 var import_core14 = require("@papyrus-sdk/core");
-
-// components/progressPillInteraction.ts
-var getProgressPillInteraction = (onPress, onLongPress) => ({
-  onPress,
-  onLongPress,
-  accessibilityLabel: "Open document navigation",
-  accessibilityRole: "button"
-});
-
-// components/ProgressPill.tsx
 var import_jsx_runtime20 = require("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,
@@ -31911,18 +32082,193 @@ function ProgressPill({
   } = (0, import_core14.useViewerStore)();
   const isDark = uiTheme === "dark";
   const offsets = resolveMobileChromeOffsets(usePapyrusSafeAreaInsets());
+  const { height: windowHeight } = (0, import_react_native17.useWindowDimensions)();
+  const trackHeight = Math.max(
+    180,
+    Math.min(520, windowHeight - offsets.progress - offsets.bottom - 132)
+  );
+  const thumbHeight = 44;
+  const trackYRef = (0, import_react14.useRef)(0);
+  const scrubberRef = (0, import_react14.useRef)(null);
+  const currentPageRef = (0, import_react14.useRef)(currentPage);
+  currentPageRef.current = currentPage;
+  const isScrubbingRef = (0, import_react14.useRef)(false);
+  const hasMovedRef = (0, import_react14.useRef)(false);
+  const longPressTriggeredRef = (0, import_react14.useRef)(false);
+  const longPressTimerRef = (0, import_react14.useRef)(null);
+  const pendingReleasedScrubPageRef = (0, import_react14.useRef)(null);
+  const [scrubPreviewPage, setScrubPreviewPage] = (0, import_react14.useState)(null);
+  const onNavigateToPageRef = (0, import_react14.useRef)(onNavigateToPage);
+  const onPressRef = (0, import_react14.useRef)(onPress);
+  const onOpenPageJumpRef = (0, import_react14.useRef)(onOpenPageJump);
+  const onScrubbingChangeRef = (0, import_react14.useRef)(onScrubbingChange);
+  onScrubbingChangeRef.current = onScrubbingChange;
+  const scrubToPositionRef = (0, import_react14.useRef)(() => {
+  });
+  const scrubNavigationControllerRef = (0, import_react14.useRef)(
+    createPageScrubberNavigationController((page) => {
+      onNavigateToPageRef.current?.(page);
+    })
+  );
+  const scrubberResponderRef = (0, import_react14.useRef)(null);
+  const touchPolicy = resolvePageScrubberTouchPolicy();
+  const displayedPage = scrubPreviewPage ?? currentPage;
   const label = (0, import_react14.useMemo)(() => {
     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 = (0, import_react14.useRef)(new import_react_native17.Animated.Value(thumbTop));
+  const thumbTopSnapshotRef = (0, import_react14.useRef)(thumbTop);
+  thumbTopSnapshotRef.current = thumbTop;
+  const scrubberMetricsRef = (0, import_react14.useRef)({ trackHeight, thumbHeight, pageCount });
+  scrubberMetricsRef.current = { trackHeight, thumbHeight, pageCount };
+  (0, import_react14.useEffect)(() => {
+    onNavigateToPageRef.current = onNavigateToPage;
+  }, [onNavigateToPage]);
+  (0, import_react14.useEffect)(() => {
+    onPressRef.current = onPress;
+    onOpenPageJumpRef.current = onOpenPageJump;
+  }, [onOpenPageJump, onPress]);
+  (0, import_react14.useEffect)(() => {
+    const pendingPage = pendingReleasedScrubPageRef.current;
+    if (pendingPage !== null && currentPage === pendingPage) {
+      pendingReleasedScrubPageRef.current = null;
+      setScrubPreviewPage(null);
+    }
+  }, [currentPage]);
+  (0, import_react14.useEffect)(() => {
+    if (!isScrubbingRef.current) {
+      thumbTopRef.current.setValue(thumbTop);
+    }
+  }, [thumbTop, thumbTopRef]);
+  (0, import_react14.useEffect)(
+    () => () => {
+      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 = import_react_native17.PanResponder.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__ */ (0, import_jsx_runtime20.jsx)(
     import_react_native17.View,
     {
@@ -31931,32 +32277,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__ */ (0, import_jsx_runtime20.jsxs)(
-        import_react_native17.Pressable,
+        import_react_native17.View,
         {
-          ...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__ */ (0, import_jsx_runtime20.jsx)(import_react_native17.View, { style: styles17.iconHit, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              IconPageNav,
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native17.View, { style: [styles17.track, isDark && styles17.trackDark] }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native17.Animated.View, { style: [styles17.thumb, { top: thumbTopRef.current }], children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              import_react_native17.View,
               {
-                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__ */ (0, import_jsx_runtime20.jsx)(import_react_native17.View, { style: styles17.labelHit, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native17.Text, { style: [styles17.label, isDark && styles17.labelDark], children: label }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native17.View, { style: styles17.iconHit, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    IconPageNav,
+                    {
+                      size: 20,
+                      color: isDark ? "#f8fafc" : "#111827",
+                      strokeWidth: 1.8
+                    }
+                  ) })
+                ]
               }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native17.View, { style: styles17.labelHit, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native17.Text, { style: [styles17.label, isDark && styles17.labelDark], children: label }) })
+            ) })
           ]
         }
       )
@@ -31970,9 +32329,31 @@ var styles17 = import_react_native17.StyleSheet.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,
@@ -32447,6 +32828,7 @@ function ReadingShell({
   const [settingsOpen, setSettingsOpen] = (0, import_react16.useState)(false);
   const [searchResultsOpen, setSearchResultsOpen] = (0, import_react16.useState)(false);
   const [pageJumpOpen, setPageJumpOpen] = (0, import_react16.useState)(false);
+  const [pageScrubActive, setPageScrubActive] = (0, import_react16.useState)(false);
   const isDark = uiTheme === "dark";
   import_react16.default.useEffect(() => {
     const showSubscription = import_react_native20.Keyboard.addListener("keyboardDidShow", () => {
@@ -32523,15 +32905,24 @@ function ReadingShell({
         showPageNavigationControls: false
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native20.View, { style: styles20.viewerStage, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Viewer_default, { engine, ...viewerProps }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native20.View, { style: styles20.viewerStage, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      Viewer_default,
+      {
+        engine,
+        ...viewerProps,
+        pageScrubActive
+      }
+    ) }),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       ProgressPill,
       {
         documentType,
+        onNavigateToPage: navigateToPage,
         onPress: () => openDestination(
           documentType === "pdf" ? "pages" : documentType === "epub" ? "contents" : "progress"
         ),
-        onOpenPageJump: () => setPageJumpOpen(true)
+        onOpenPageJump: () => setPageJumpOpen(true),
+        onScrubbingChange: setPageScrubActive
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -32553,7 +32944,11 @@ function ReadingShell({
           setSearchResultsOpen(false);
           closeMobileDestination();
         },
-        onOpenResults: () => setSearchResultsOpen(true)
+        onOpenResults: () => {
+          import_react_native20.Keyboard.dismiss();
+          setSearchResultsOpen(true);
+          closeMobileDestination();
+        }
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(