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

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;
@@ -26857,6 +26956,17 @@ var Viewer = ({
     },
     [scaledListLayoutMetrics]
   );
+  const scrollToPendingTarget = useCallback3(
+    (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 = useCallback3(() => {
     if (pendingOrientationRestoreWidthRef.current !== windowWidth || pageCount <= 0 || isSingle || isWebView) {
       return;
@@ -26887,6 +26997,11 @@ var Viewer = ({
     }
     restoreOrientationScrollOffset();
   }, [restoreOrientationScrollOffset, windowWidth]);
+  useEffect4(() => {
+    if (pendingScrollTargetRef.current !== null) {
+      scrollToPendingTarget(false);
+    }
+  }, [layoutRevision, scrollToPendingTarget]);
   const getItemLayout = useCallback3(
     (_, index) => {
       if (scaledListLayoutMetrics.itemCount === 0) {
@@ -26957,15 +27072,12 @@ var Viewer = ({
       },
       "scrollToPageSignal.flatList"
     );
-    listRef.current?.scrollToIndex({
-      index: target.listIndex,
-      animated: true,
-      viewPosition: 0
-    });
+    scrollToPendingTarget(true);
   }, [
     clearPendingScrollRetry,
     clearPendingScrollTarget,
     ensurePageDimensions,
+    scrollToPendingTarget,
     scrollToPageSignal,
     pageCount,
     setDocumentStateTracked,
@@ -27241,7 +27353,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 +27369,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 +27442,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,13 +27465,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;
@@ -27448,13 +27562,13 @@ var styles4 = StyleSheet4.create({
 var Viewer_default = Viewer;
 
 // components/Topbar.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import {
   View as View7,
   Text as Text3,
   Pressable as Pressable5,
   StyleSheet as StyleSheet7,
-  useWindowDimensions as useWindowDimensions3
+  useWindowDimensions as useWindowDimensions4
 } from "react-native";
 import { useViewerStore as useViewerStore5 } from "@papyrus-sdk/core";
 
@@ -27488,7 +27602,7 @@ var resolveMobileChromeOffsets = (insets) => ({
 });
 
 // components/PageJumpModal.tsx
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import { useEffect as useEffect6, useState as useState6 } from "react";
 import { Pressable as Pressable4, StyleSheet as StyleSheet6, Text as Text2, TextInput, View as View6 } from "react-native";
 
 // components/pageJumpModel.ts
@@ -27500,15 +27614,17 @@ var resolvePageJumpTarget = (value, pageCount) => {
 };
 
 // components/NativeSheet.tsx
-import React7 from "react";
+import React7, { useEffect as useEffect5, useRef as useRef5, useState as useState5 } from "react";
 import {
+  Animated as Animated2,
   FlatList as FlatList2,
   Modal,
   Pressable as Pressable3,
   ScrollView as ScrollView2,
   StyleSheet as StyleSheet5,
   Text,
-  View as View5
+  View as View5,
+  useWindowDimensions as useWindowDimensions3
 } from "react-native";
 
 // components/nativeSheetLayout.ts
@@ -27598,25 +27714,73 @@ function NativeSheet({
 }) {
   const insets = usePapyrusSafeAreaInsets();
   const palette = getNativeSheetPalette(Boolean(isDark));
+  const { height: windowHeight } = useWindowDimensions3();
+  const [rendered, setRendered] = useState5(visible);
+  const renderedRef = useRef5(visible);
+  const motion = useRef5(new Animated2.Value(visible ? 0 : 1)).current;
+  const backdropOpacity = useRef5(new Animated2.Value(visible ? 1 : 0)).current;
+  useEffect5(() => {
+    motion.stopAnimation();
+    backdropOpacity.stopAnimation();
+    if (visible) {
+      renderedRef.current = true;
+      setRendered(true);
+      motion.setValue(1);
+      backdropOpacity.setValue(0);
+      Animated2.parallel([
+        Animated2.spring(motion, {
+          toValue: 0,
+          damping: 22,
+          stiffness: 220,
+          mass: 0.8,
+          useNativeDriver: true
+        }),
+        Animated2.timing(backdropOpacity, {
+          toValue: 1,
+          duration: 180,
+          useNativeDriver: true
+        })
+      ]).start();
+      return;
+    }
+    if (!renderedRef.current) return;
+    Animated2.parallel([
+      Animated2.timing(motion, {
+        toValue: 1,
+        duration: 180,
+        useNativeDriver: true
+      }),
+      Animated2.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__ */ jsx8(
     Modal,
     {
-      animationType: "fade",
+      animationType: "none",
       transparent: true,
-      visible,
+      visible: rendered,
       onRequestClose: onClose,
       children: /* @__PURE__ */ jsxs6(View5, { style: styles5.root, children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx8(Animated2.View, { style: [styles5.backdrop, { opacity: backdropOpacity }], children: /* @__PURE__ */ jsx8(
           Pressable3,
           {
             accessibilityRole: "button",
             accessibilityLabel: closeAccessibilityLabel,
-            style: styles5.backdrop,
+            style: StyleSheet5.absoluteFill,
             onPress: onClose
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsxs6(
-          View5,
+          Animated2.View,
           {
             style: [
               styles5.sheet,
@@ -27627,7 +27791,17 @@ function NativeSheet({
                 backgroundColor: palette.backgroundColor,
                 borderTopColor: palette.borderColor
               },
-              sheetStyle
+              sheetStyle,
+              {
+                transform: [
+                  {
+                    translateY: motion.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [0, windowHeight]
+                    })
+                  }
+                ]
+              }
             ],
             children: [
               showHeader ? /* @__PURE__ */ jsxs6(View5, { style: styles5.header, children: [
@@ -27735,9 +27909,9 @@ function PageJumpModal({
   onClose,
   onConfirm
 }) {
-  const [value, setValue] = useState5(`${currentPage}`);
+  const [value, setValue] = useState6(`${currentPage}`);
   const palette = getReaderSheetPalette(isDark);
-  useEffect5(() => {
+  useEffect6(() => {
     if (visible) setValue(`${currentPage}`);
   }, [currentPage, visible]);
   const confirmJump = () => {
@@ -27855,10 +28029,10 @@ var Topbar = ({
     accentColor,
     mobileChromeVisible
   } = useViewerStore5();
-  const [jumpModalOpen, setJumpModalOpen] = useState6(false);
+  const [jumpModalOpen, setJumpModalOpen] = useState7(false);
   const isDark = uiTheme === "dark";
   const navIconColor = isDark ? "#e5e7eb" : "#111827";
-  const { width, height } = useWindowDimensions3();
+  const { width, height } = useWindowDimensions4();
   const isLandscape = width > height;
   const insets = usePapyrusSafeAreaInsets();
   const navigateToPage = (targetPage) => {
@@ -28179,14 +28353,14 @@ var styles7 = StyleSheet7.create({
 var Topbar_default = Topbar;
 
 // components/ToolDock.tsx
-import React10, { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef5, useState as useState7 } from "react";
+import React10, { useEffect as useEffect7, useMemo as useMemo4, useRef as useRef6, useState as useState8 } from "react";
 import {
   View as View8,
   Text as Text4,
   Pressable as Pressable6,
   StyleSheet as StyleSheet8,
   ScrollView as ScrollView3,
-  useWindowDimensions as useWindowDimensions4
+  useWindowDimensions as useWindowDimensions5
 } from "react-native";
 import { useViewerStore as useViewerStore6 } from "@papyrus-sdk/core";
 
@@ -28419,18 +28593,18 @@ var OpacitySlider = React10.memo(function OpacitySlider2({
   isDark,
   onCommit
 }) {
-  const [trackWidth, setTrackWidth] = useState7(0);
-  const [draftValue, setDraftValue] = useState7(value);
-  const dragValueRef = useRef5(draftValue);
-  const isDraggingRef = useRef5(false);
-  const frameRef = useRef5(null);
-  useEffect6(() => {
+  const [trackWidth, setTrackWidth] = useState8(0);
+  const [draftValue, setDraftValue] = useState8(value);
+  const dragValueRef = useRef6(draftValue);
+  const isDraggingRef = useRef6(false);
+  const frameRef = useRef6(null);
+  useEffect7(() => {
     if (!isDraggingRef.current) {
       dragValueRef.current = value;
       setDraftValue(value);
     }
   }, [value]);
-  useEffect6(() => {
+  useEffect7(() => {
     return () => {
       if (frameRef.current !== null) {
         cancelAnimationFrame(frameRef.current);
@@ -28529,10 +28703,10 @@ var ToolDock = () => {
     undoAnnotations,
     redoAnnotations
   } = useViewerStore6();
-  const [paletteExpanded, setPaletteExpanded] = useState7(false);
-  const [extrasExpanded, setExtrasExpanded] = useState7(false);
+  const [paletteExpanded, setPaletteExpanded] = useState8(false);
+  const [extrasExpanded, setExtrasExpanded] = useState8(false);
   const isDark = uiTheme === "dark";
-  const { width: windowWidth } = useWindowDimensions4();
+  const { width: windowWidth } = useWindowDimensions5();
   const t = getStrings(locale);
   const panelColor = isDark ? "rgba(24,24,27,0.92)" : "rgba(255,255,255,0.96)";
   const borderColor = isDark ? "rgba(71,85,105,0.48)" : "rgba(229,231,235,0.88)";
@@ -29255,10 +29429,10 @@ var ToolDock_default = ToolDock;
 // components/RightSheet.tsx
 import {
   useCallback as useCallback4,
-  useEffect as useEffect7,
+  useEffect as useEffect8,
   useMemo as useMemo5,
-  useRef as useRef6,
-  useState as useState8
+  useRef as useRef7,
+  useState as useState9
 } from "react";
 import {
   Dimensions,
@@ -29281,6 +29455,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;
@@ -29316,10 +29495,10 @@ var PageThumbnail = ({
   shouldRenderPreview,
   onPress
 }) => {
-  const viewRef = useRef6(null);
-  const [layoutReady, setLayoutReady] = useState8(false);
-  const [previewUri, setPreviewUri] = useState8(null);
-  useEffect7(() => {
+  const viewRef = useRef7(null);
+  const [layoutReady, setLayoutReady] = useState9(false);
+  const [previewUri, setPreviewUri] = useState9(null);
+  useEffect8(() => {
     if (!layoutReady || !useNativePreview || !shouldRenderPreview) return;
     const viewTag = findNodeHandle2(viewRef.current);
     if (!viewTag) return;
@@ -29334,7 +29513,7 @@ var PageThumbnail = ({
     useNativePreview,
     zoom
   ]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!useImagePreview || !shouldRenderPreview) {
       setPreviewUri(null);
       return;
@@ -29464,10 +29643,10 @@ var RightSheet = ({
     locale,
     accentColor
   } = useViewerStore7();
-  const [pagesMode, setPagesMode] = useState8(
+  const [pagesMode, setPagesMode] = useState9(
     documentType === "pdf" || documentType === "comic" ? "thumbnails" : "summary"
   );
-  useEffect7(() => {
+  useEffect8(() => {
     setPagesMode(
       documentType === "pdf" || documentType === "comic" ? "thumbnails" : "summary"
     );
@@ -29491,11 +29670,11 @@ var RightSheet = ({
   );
   const useNativePreview = renderTarget !== "webview" && hasNativePageView;
   const useImagePreview = documentType === "comic" && renderTarget === "webview" && typeof engine.getPagePreview === "function";
-  const thumbnailDimensionsCacheRef = useRef6(/* @__PURE__ */ new Map());
-  const thumbnailDimensionsPendingRef = useRef6(/* @__PURE__ */ new Set());
-  const thumbnailRefreshTimeoutRef = useRef6(null);
-  const [thumbnailLayoutRevision, setThumbnailLayoutRevision] = useState8(0);
-  const [visibleThumbnailPages, setVisibleThumbnailPages] = useState8(() => /* @__PURE__ */ new Set());
+  const thumbnailDimensionsCacheRef = useRef7(/* @__PURE__ */ new Map());
+  const thumbnailDimensionsPendingRef = useRef7(/* @__PURE__ */ new Set());
+  const thumbnailRefreshTimeoutRef = useRef7(null);
+  const [thumbnailLayoutRevision, setThumbnailLayoutRevision] = useState9(0);
+  const [visibleThumbnailPages, setVisibleThumbnailPages] = useState9(() => /* @__PURE__ */ new Set());
   const resolvedThumbsInitialCount = useMemo5(
     () => resolvePositiveInt2(
       thumbsInitialCount,
@@ -29565,7 +29744,7 @@ var RightSheet = ({
     },
     [frameWidth, thumbnailLayoutRevision]
   );
-  useEffect7(
+  useEffect8(
     () => () => {
       if (thumbnailRefreshTimeoutRef.current) {
         clearTimeout(thumbnailRefreshTimeoutRef.current);
@@ -29573,11 +29752,11 @@ var RightSheet = ({
     },
     []
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (sidebarRightOpen) return;
     setVisibleThumbnailPages(/* @__PURE__ */ new Set());
   }, [sidebarRightOpen]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!sidebarRightOpen || sidebarRightTab !== "pages") return;
     if (activeMobileDestination === "pages") {
       setPagesMode("thumbnails");
@@ -29585,7 +29764,7 @@ var RightSheet = ({
     }
     setPagesMode("summary");
   }, [activeMobileDestination, sidebarRightOpen, sidebarRightTab]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!sidebarRightOpen || sidebarRightTab !== "pages") return;
     if (pagesMode !== "thumbnails" || !supportsThumbnails) return;
     if (pageCount <= 0) return;
@@ -29796,7 +29975,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
@@ -30199,7 +30380,7 @@ var styles9 = StyleSheet9.create({
 var RightSheet_default = RightSheet;
 
 // components/AnnotationEditor.tsx
-import { useEffect as useEffect8, useState as useState9 } from "react";
+import { useEffect as useEffect9, useState as useState10 } from "react";
 import {
   Modal as Modal2,
   View as View10,
@@ -30222,10 +30403,10 @@ var AnnotationEditor = () => {
   } = useViewerStore8();
   const annotation = annotations.find((ann) => ann.id === selectedAnnotationId);
   const isEditable = annotation && (annotation.type === "text" || annotation.type === "comment");
-  const [draft, setDraft] = useState9("");
+  const [draft, setDraft] = useState10("");
   const isDark = uiTheme === "dark";
   const t = getStrings(locale);
-  useEffect8(() => {
+  useEffect9(() => {
     if (isEditable) {
       setDraft(annotation?.content ?? "");
     }
@@ -30352,7 +30533,7 @@ var styles10 = StyleSheet10.create({
 var AnnotationEditor_default = AnnotationEditor;
 
 // components/BottomBar.tsx
-import { View as View11, Pressable as Pressable9, StyleSheet as StyleSheet11, useWindowDimensions as useWindowDimensions5 } from "react-native";
+import { View as View11, Pressable as Pressable9, StyleSheet as StyleSheet11, useWindowDimensions as useWindowDimensions6 } from "react-native";
 import { useViewerStore as useViewerStore9 } from "@papyrus-sdk/core";
 
 // components/bottomBarModel.ts
@@ -30420,7 +30601,7 @@ var BottomBar = ({
   } = useViewerStore9();
   const isDark = uiTheme === "dark";
   const t = getStrings(locale);
-  const { width, height } = useWindowDimensions5();
+  const { width, height } = useWindowDimensions6();
   const isLandscape = width > height;
   const offsets = resolveMobileChromeOffsets(usePapyrusSafeAreaInsets());
   const iconColor = (active) => {
@@ -31208,7 +31389,7 @@ var styles12 = StyleSheet12.create({
 var SettingsSheet_default = SettingsSheet;
 
 // components/CoverPreview.tsx
-import { useEffect as useEffect9, useMemo as useMemo6, useRef as useRef7, useState as useState10 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo6, useRef as useRef8, useState as useState11 } from "react";
 import {
   ActivityIndicator,
   StyleSheet as StyleSheet13,
@@ -31266,18 +31447,18 @@ var CoverPreview = ({
   onLoadEnd,
   onError
 }) => {
-  const [engine, setEngine] = useState10(null);
-  const [layoutReady, setLayoutReady] = useState10(false);
-  const [loaded, setLoaded] = useState10(false);
-  const [loading, setLoading] = useState10(false);
-  const [error, setError] = useState10(null);
-  const viewRef = useRef7(null);
+  const [engine, setEngine] = useState11(null);
+  const [layoutReady, setLayoutReady] = useState11(false);
+  const [loaded, setLoaded] = useState11(false);
+  const [loading, setLoading] = useState11(false);
+  const [error, setError] = useState11(null);
+  const viewRef = useRef8(null);
   const resolvedType = useMemo6(() => inferDocumentType(source, type), [source, type]);
   const isPdf = resolvedType === "pdf";
   const hasNativePageView = Boolean(UIManager2.getViewManagerConfig?.("PapyrusPageView"));
   const canRender = !isPdf || hasNativePageView;
   const shouldRender = Boolean(visible);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!shouldRender) {
       if (!keepAlive) {
         setEngine(null);
@@ -31290,7 +31471,7 @@ var CoverPreview = ({
       setEngine(new MobileDocumentEngine());
     }
   }, [shouldRender, keepAlive, engine, canRender]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!engine || !shouldRender || !canRender) return;
     let active = true;
     setLoading(true);
@@ -31317,13 +31498,13 @@ var CoverPreview = ({
       active = false;
     };
   }, [engine, shouldRender, canRender, source, type, pageIndex, isPdf, onLoadStart, onLoadEnd, onError]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!engine || !isPdf || !loaded || !layoutReady || !shouldRender || !canRender) return;
     const viewTag = findNodeHandle3(viewRef.current);
     if (!viewTag) return;
     engine.renderPage(pageIndex, viewTag, renderScale);
   }, [engine, isPdf, loaded, layoutReady, shouldRender, canRender, pageIndex, renderScale]);
-  useEffect9(() => {
+  useEffect10(() => {
     return () => {
       engine?.destroy();
     };
@@ -31390,7 +31571,7 @@ var styles13 = StyleSheet13.create({
 var CoverPreview_default = CoverPreview;
 
 // components/ReadingShell.tsx
-import React16, { useState as useState12 } from "react";
+import React16, { useState as useState14 } 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 +31935,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 useEffect11, useMemo as useMemo7, useRef as useRef9, useState as useState12 } from "react";
+import {
+  Animated as Animated3,
+  PanResponder as PanResponder2,
+  StyleSheet as StyleSheet17,
+  Text as Text12,
+  View as View17,
+  useWindowDimensions as useWindowDimensions7
+} 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 +31964,193 @@ function ProgressPill({
   } = useViewerStore14();
   const isDark = uiTheme === "dark";
   const offsets = resolveMobileChromeOffsets(usePapyrusSafeAreaInsets());
+  const { height: windowHeight } = useWindowDimensions7();
+  const trackHeight = Math.max(
+    180,
+    Math.min(520, windowHeight - offsets.progress - offsets.bottom - 132)
+  );
+  const thumbHeight = 44;
+  const trackYRef = useRef9(0);
+  const scrubberRef = useRef9(null);
+  const currentPageRef = useRef9(currentPage);
+  currentPageRef.current = currentPage;
+  const isScrubbingRef = useRef9(false);
+  const hasMovedRef = useRef9(false);
+  const longPressTriggeredRef = useRef9(false);
+  const longPressTimerRef = useRef9(null);
+  const pendingReleasedScrubPageRef = useRef9(null);
+  const [scrubPreviewPage, setScrubPreviewPage] = useState12(null);
+  const onNavigateToPageRef = useRef9(onNavigateToPage);
+  const onPressRef = useRef9(onPress);
+  const onOpenPageJumpRef = useRef9(onOpenPageJump);
+  const onScrubbingChangeRef = useRef9(onScrubbingChange);
+  onScrubbingChangeRef.current = onScrubbingChange;
+  const scrubToPositionRef = useRef9(() => {
+  });
+  const scrubNavigationControllerRef = useRef9(
+    createPageScrubberNavigationController((page) => {
+      onNavigateToPageRef.current?.(page);
+    })
+  );
+  const scrubberResponderRef = useRef9(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 = useRef9(new Animated3.Value(thumbTop));
+  const thumbTopSnapshotRef = useRef9(thumbTop);
+  thumbTopSnapshotRef.current = thumbTop;
+  const scrubberMetricsRef = useRef9({ trackHeight, thumbHeight, pageCount });
+  scrubberMetricsRef.current = { trackHeight, thumbHeight, pageCount };
+  useEffect11(() => {
+    onNavigateToPageRef.current = onNavigateToPage;
+  }, [onNavigateToPage]);
+  useEffect11(() => {
+    onPressRef.current = onPress;
+    onOpenPageJumpRef.current = onOpenPageJump;
+  }, [onOpenPageJump, onPress]);
+  useEffect11(() => {
+    const pendingPage = pendingReleasedScrubPageRef.current;
+    if (pendingPage !== null && currentPage === pendingPage) {
+      pendingReleasedScrubPageRef.current = null;
+      setScrubPreviewPage(null);
+    }
+  }, [currentPage]);
+  useEffect11(() => {
+    if (!isScrubbingRef.current) {
+      thumbTopRef.current.setValue(thumbTop);
+    }
+  }, [thumbTop, thumbTopRef]);
+  useEffect11(
+    () => () => {
+      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 +32159,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(Animated3.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 +32211,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 +32274,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 useEffect12, useMemo as useMemo8, useState as useState13 } from "react";
 import {
   Keyboard,
-  Pressable as Pressable13,
+  Pressable as Pressable12,
   StyleSheet as StyleSheet18,
   Text as Text13,
   TextInput as TextInput3,
@@ -31915,19 +32305,19 @@ function SearchOverlay({
     uiTheme,
     accentColor
   } = useViewerStore15();
-  const [draft, setDraft] = useState11(searchQuery);
-  const [isSearching, setIsSearching] = useState11(false);
+  const [draft, setDraft] = useState13(searchQuery);
+  const [isSearching, setIsSearching] = useState13(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(() => {
+  useEffect12(() => {
     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(() => {
+  useEffect12(() => {
     if (!visible) return;
     setDraft(searchQuery);
   }, [searchQuery, visible]);
@@ -31980,7 +32370,7 @@ function SearchOverlay({
             )
           ] }),
           /* @__PURE__ */ jsx21(
-            Pressable13,
+            Pressable12,
             {
               onPress: handleClose,
               style: [styles18.closeButton, isDark && styles18.closeButtonDark],
@@ -31991,7 +32381,7 @@ function SearchOverlay({
         ] }),
         /* @__PURE__ */ jsxs18(View18, { style: styles18.metaRow, children: [
           /* @__PURE__ */ jsx21(
-            Pressable13,
+            Pressable12,
             {
               onPress: prevSearchResult,
               disabled: searchResults.length === 0,
@@ -32006,7 +32396,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 +32412,7 @@ function SearchOverlay({
         ] }),
         /* @__PURE__ */ jsxs18(View18, { style: styles18.actionsRow, children: [
           /* @__PURE__ */ jsx21(
-            Pressable13,
+            Pressable12,
             {
               onPress: handleSubmit,
               style: [styles18.primaryAction, { backgroundColor: accentColor }],
@@ -32032,7 +32422,7 @@ function SearchOverlay({
             }
           ),
           /* @__PURE__ */ jsx21(
-            Pressable13,
+            Pressable12,
             {
               onPress: onOpenResults,
               disabled: searchResults.length === 0,
@@ -32200,7 +32590,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 +32641,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 +32711,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] = useState14(false);
+  const [infoOpen, setInfoOpen] = useState14(false);
+  const [actionsOpen, setActionsOpen] = useState14(false);
+  const [settingsOpen, setSettingsOpen] = useState14(false);
+  const [searchResultsOpen, setSearchResultsOpen] = useState14(false);
+  const [pageJumpOpen, setPageJumpOpen] = useState14(false);
+  const [pageScrubActive, setPageScrubActive] = useState14(false);
   const isDark = uiTheme === "dark";
   React16.useEffect(() => {
     const showSubscription = Keyboard2.addListener("keyboardDidShow", () => {
@@ -32403,15 +32794,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(
@@ -32433,7 +32833,11 @@ function ReadingShell({
           setSearchResultsOpen(false);
           closeMobileDestination();
         },
-        onOpenResults: () => setSearchResultsOpen(true)
+        onOpenResults: () => {
+          Keyboard2.dismiss();
+          setSearchResultsOpen(true);
+          closeMobileDestination();
+        }
       }
     ),
     /* @__PURE__ */ jsx23(