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

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;
@@ -27422,7 +27521,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 +27537,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 +27610,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,7 +27633,7 @@ var Viewer = ({
               renderItem,
               onViewableItemsChanged,
               viewabilityConfig: { itemVisiblePercentThreshold: 60 },
-              scrollEnabled: resolvedViewerScrollEnabled,
+              scrollEnabled: pageScrubResolvedScrollEnabled,
               onLayout: () => {
                 captureViewerFrame(listRef.current);
                 restoreOrientationScrollOffset();
@@ -29422,6 +29521,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 +30041,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 +31990,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 +32009,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 +32204,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 +32256,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 +32755,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 +32832,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)(