@papyrus-sdk/ui-react-native 0.2.13-beta.0 → 0.2.15

package/dist/index.js

@@ -21023,6 +21023,7 @@ __export(ui_react_native_exports, {
   CoverPreview: () => CoverPreview_default,
   DocumentActionsSheet: () => DocumentActionsSheet,
   InfoSheet: () => InfoSheet,
+  MOBILE_CHROME_METRICS: () => MOBILE_CHROME_METRICS,
   OverflowSheet: () => OverflowSheet,
   PageRenderer: () => PageRenderer_default,
   ProgressPill: () => ProgressPill,
@@ -21699,7 +21700,7 @@ var PageRenderer = ({
         createdAt: Date.now()
       });
     },
-    [addAnnotation, annotationColor, pageIndex]
+    [addAnnotation, annotationColor, logSelectionPerf, pageIndex]
   );
   const clamp3 = (value, min, max) => Math.min(max, Math.max(min, value));
   const getBoundsFromRects = (rects) => {
@@ -24597,8 +24598,8 @@ var styles3 = import_react_native3.StyleSheet.create({
 var Viewer_default = Viewer;
 
 // components/Topbar.tsx
-var import_react4 = require("react");
-var import_react_native4 = require("react-native");
+var import_react5 = require("react");
+var import_react_native5 = require("react-native");
 var import_core4 = require("@papyrus-sdk/core");
 
 // icons.tsx
@@ -24932,7 +24933,9 @@ var IconToolInk = ({
     }
   ),
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg2.Rect, { x: "11", y: "52", width: "16", height: "2", fill: "url(#penBand)" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg2.Rect, { x: "11", y: "52", width: "16", height: "2", fill: color, opacity: "0.78" }),
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg2.Rect, { x: "15", y: "4", width: "8", height: "10", rx: "0.8", fill: "url(#penCap)" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg2.Rect, { x: "15", y: "4", width: "8", height: "10", rx: "0.8", fill: color, opacity: "0.72" }),
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg2.Path, { d: "M18.55 4.6h.9L26.2 40H11.8l6.75-35.4Z", fill: "rgba(255,255,255,0.05)" }),
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg2.Rect, { x: "11", y: "52", width: "16", height: "2", fill: color, opacity: "0.35" })
 ] });
@@ -24970,7 +24973,15 @@ var IconToolHighlighter = ({
   ),
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg2.Rect, { x: "7", y: "51.35", width: "24", height: "35", rx: "1.6", fill: "url(#markerBody)" }),
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg2.Rect, { x: "7", y: "51.35", width: "24", height: "11", rx: "0.8", fill: "url(#markerMetal)" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg2.Rect, { x: "7", y: "51.35", width: "24", height: "11", rx: "0.8", fill: color, opacity: "0.28" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg2.Rect, { x: "7", y: "51.35", width: "24", height: "11", rx: "0.8", fill: color, opacity: "0.78" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_native_svg2.Path,
+    {
+      d: "M13 10.8v5.55h12V5c0-.75-.8-1.23-1.46-.89l-9.46 4.92c-.66.34-1.08 1.03-1.08 1.77Z",
+      fill: color,
+      opacity: "0.72"
+    }
+  )
 ] });
 var IconToolUnderline = ({
   size = 32,
@@ -25005,6 +25016,7 @@ var IconToolUnderline = ({
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg2.Path, { d: "M8 43.88v-1L15 16.88h8l7 26v1H8Z", fill: "url(#pencilBodyTop)" }),
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg2.Path, { d: "M8 42.88h22v43H8v-43Z", fill: "url(#pencilBodyBottom)" }),
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg2.Rect, { x: "8", y: "50.88", width: "22", height: "2", fill: "url(#pencilMetal)" }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg2.Rect, { x: "8", y: "50.88", width: "22", height: "2", fill: color, opacity: "0.78" }),
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_react_native_svg2.Path,
     {
@@ -25012,6 +25024,14 @@ var IconToolUnderline = ({
       fill: "url(#pencilTip)"
     }
   ),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_native_svg2.Path,
+    {
+      d: "M15 16.88 18.03 4.76c.25-1.01 1.69-1.01 1.94 0L23 16.88h-8Z",
+      fill: color,
+      opacity: "0.72"
+    }
+  ),
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg2.Rect, { x: "8", y: "50.88", width: "22", height: "2", fill: color, opacity: "0.3" })
 ] });
 var IconToolSquiggly = ({
@@ -25082,8 +25102,188 @@ var IconToolNote = ({
   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_svg2.Line, { x1: "15", y1: "18.2", x2: "19.2", y2: "18.2", stroke: color, strokeWidth: "1.8", strokeLinecap: "round" })
 ] });
 
-// components/Topbar.tsx
+// components/mobileChromeMetrics.ts
+var MOBILE_CHROME_METRICS = {
+  screenPadding: 16,
+  maxFloatingWidth: 360,
+  maxToolDockWidth: 420,
+  toolDockPaddingTop: 4,
+  toolDockHistoryIconSize: 18,
+  toolDockHistoryGap: 2,
+  toolDockDisabledIconColorDark: "#64748b",
+  toolDockDisabledIconColorLight: "#6b7280",
+  toolDockDisabledOpacity: 0.72,
+  iconSize: 20,
+  iconBoxSize: 28,
+  topbarPageButtonSize: 30,
+  bottomBarItemPaddingHorizontal: 5,
+  bottomBarItemPaddingVertical: 3
+};
+
+// components/PageJumpModal.tsx
+var import_react4 = require("react");
+var import_react_native4 = require("react-native");
+
+// components/pageJumpModel.ts
+var resolvePageJumpTarget = (value, pageCount) => {
+  if (pageCount <= 0) return null;
+  const parsed = Number.parseInt(value, 10);
+  if (Number.isNaN(parsed)) return null;
+  return Math.max(1, Math.min(pageCount, parsed));
+};
+
+// components/PageJumpModal.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function PageJumpModal({
+  visible,
+  currentPage,
+  pageCount,
+  isDark,
+  accentColor,
+  onClose,
+  onConfirm
+}) {
+  const [value, setValue] = (0, import_react4.useState)(`${currentPage}`);
+  (0, import_react4.useEffect)(() => {
+    if (visible) setValue(`${currentPage}`);
+  }, [currentPage, visible]);
+  const confirmJump = () => {
+    const targetPage = resolvePageJumpTarget(value, pageCount);
+    if (targetPage) onConfirm(targetPage);
+    onClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react_native4.Modal,
+    {
+      visible,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Pressable, { style: styles4.backdrop, onPress: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        import_react_native4.Pressable,
+        {
+          style: [styles4.card, isDark && styles4.cardDark],
+          onPress: (event) => event.stopPropagation(),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: [styles4.title, isDark && styles4.titleDark], children: "Ir para pagina" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_react_native4.TextInput,
+              {
+                value,
+                onChangeText: (text) => setValue(text.replace(/[^0-9]/g, "")),
+                keyboardType: "number-pad",
+                autoFocus: true,
+                selectTextOnFocus: true,
+                maxLength: 6,
+                placeholder: "1",
+                placeholderTextColor: isDark ? "#6b7280" : "#9ca3af",
+                style: [styles4.input, isDark && styles4.inputDark],
+                onSubmitEditing: confirmJump,
+                accessibilityLabel: "Page jump input"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { style: styles4.actions, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_react_native4.Pressable,
+                {
+                  onPress: onClose,
+                  style: [
+                    styles4.actionButton,
+                    styles4.actionCancel,
+                    isDark && styles4.actionCancelDark
+                  ],
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: [styles4.actionText, isDark && styles4.actionTextDark], children: "Cancelar" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_react_native4.Pressable,
+                {
+                  onPress: confirmJump,
+                  style: [styles4.actionButton, { backgroundColor: accentColor }],
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: [styles4.actionText, styles4.actionTextPrimary], children: "Ir" })
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    }
+  );
+}
+var styles4 = import_react_native4.StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: "rgba(15, 23, 42, 0.4)",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24
+  },
+  card: {
+    width: "100%",
+    maxWidth: 320,
+    borderRadius: 24,
+    backgroundColor: "#ffffff",
+    padding: 18,
+    gap: 12
+  },
+  cardDark: {
+    backgroundColor: "#0f1115"
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "800",
+    color: "#111827"
+  },
+  titleDark: {
+    color: "#f8fafc"
+  },
+  input: {
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: "#d1d5db",
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    fontSize: 18,
+    fontWeight: "800",
+    color: "#111827",
+    textAlign: "center"
+  },
+  inputDark: {
+    backgroundColor: "#111827",
+    borderColor: "#374151",
+    color: "#f8fafc"
+  },
+  actions: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: 10
+  },
+  actionButton: {
+    borderRadius: 999,
+    paddingHorizontal: 14,
+    paddingVertical: 9
+  },
+  actionCancel: {
+    backgroundColor: "#e5e7eb"
+  },
+  actionCancelDark: {
+    backgroundColor: "#111827"
+  },
+  actionText: {
+    fontSize: 12,
+    fontWeight: "800",
+    color: "#111827"
+  },
+  actionTextDark: {
+    color: "#e5e7eb"
+  },
+  actionTextPrimary: {
+    color: "#ffffff"
+  }
+});
+
+// components/Topbar.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Topbar = ({
   engine,
   onOpenSettings,
@@ -25092,7 +25292,8 @@ var Topbar = ({
   logo,
   onLogoPress,
   logoAccessibilityLabel = "Logo",
-  showPageNavigationControls = false
+  showPageNavigationControls = false,
+  onOpenPageJump
 }) => {
   const {
     currentPage,
@@ -25103,17 +25304,9 @@ var Topbar = ({
     accentColor,
     mobileChromeVisible
   } = (0, import_core4.useViewerStore)();
-  const [pageLabel, setPageLabel] = (0, import_react4.useState)(`${currentPage}`);
-  const [jumpModalOpen, setJumpModalOpen] = (0, import_react4.useState)(false);
-  const [jumpValue, setJumpValue] = (0, import_react4.useState)(`${currentPage}`);
+  const [jumpModalOpen, setJumpModalOpen] = (0, import_react5.useState)(false);
   const isDark = uiTheme === "dark";
   const navIconColor = isDark ? "#e5e7eb" : "#111827";
-  (0, import_react4.useEffect)(() => {
-    setPageLabel(`${currentPage}`);
-    if (!jumpModalOpen) {
-      setJumpValue(`${currentPage}`);
-    }
-  }, [currentPage, jumpModalOpen]);
   const navigateToPage = (targetPage) => {
     const next = Math.max(1, Math.min(pageCount, targetPage));
     engine.goToPage(next);
@@ -25124,73 +25317,82 @@ var Topbar = ({
     navigateToPage(currentPage + delta);
   };
   const openJumpModal = () => {
-    setJumpValue(`${currentPage}`);
-    setJumpModalOpen(true);
-  };
-  const confirmJump = () => {
-    const parsed = Number.parseInt(jumpValue, 10);
-    if (Number.isNaN(parsed)) {
-      setJumpModalOpen(false);
+    if (onOpenPageJump) {
+      onOpenPageJump();
       return;
     }
-    navigateToPage(parsed);
-    setJumpModalOpen(false);
+    setJumpModalOpen(true);
   };
-  const defaultLogo = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: [styles4.logoBadge, { backgroundColor: accentColor }], children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.Text, { style: styles4.logoText, children: "P" }) });
+  const defaultLogo = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: [styles5.logoBadge, { backgroundColor: accentColor }], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Text, { style: styles5.logoText, children: "P" }) });
   const logoElement = logo ?? defaultLogo;
   if (!mobileChromeVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_react_native4.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_native5.View,
       {
-        style: [styles4.chromeFrame],
+        style: [styles5.chromeFrame],
         pointerEvents: "box-none",
         testID: "papyrus-floating-top-controls",
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { style: [styles4.container, isDark && styles4.containerDark], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { style: styles4.leftGroup, children: [
-            onLogoPress ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              import_react_native4.Pressable,
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.View, { style: [styles5.container, isDark && styles5.containerDark], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.View, { style: styles5.leftGroup, children: [
+            onLogoPress ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              import_react_native5.Pressable,
               {
                 onPress: onLogoPress,
                 accessibilityRole: "button",
                 accessibilityLabel: logoAccessibilityLabel,
-                style: styles4.logoSlot,
+                style: styles5.logoSlot,
                 children: logoElement
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: styles4.logoSlot, children: logoElement }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              import_react_native4.Text,
+            ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles5.logoSlot, children: logoElement }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              import_react_native5.Pressable,
               {
-                numberOfLines: 1,
-                style: [styles4.brandText, isDark && styles4.brandTextDark],
-                children: title ?? "Papyrus"
+                onPress: openJumpModal,
+                disabled: pageCount <= 0,
+                style: styles5.titleHit,
+                accessibilityLabel: "Open page jump",
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  import_react_native5.Text,
+                  {
+                    numberOfLines: 1,
+                    style: [styles5.brandText, isDark && styles5.brandTextDark],
+                    children: title ?? "Papyrus"
+                  }
+                )
               }
             )
           ] }),
-          showPageNavigationControls ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: styles4.pageGroup, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              import_react_native4.Pressable,
+          showPageNavigationControls ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles5.pageGroup, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              import_react_native5.Pressable,
               {
                 onPress: () => handlePageChange(-1),
-                style: [styles4.pageButton, isDark && styles4.pageButtonDark],
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconChevronLeft, { size: 16, color: navIconColor })
+                style: [styles5.pageButton, isDark && styles5.pageButtonDark],
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  IconChevronLeft,
+                  {
+                    size: MOBILE_CHROME_METRICS.iconSize,
+                    color: navIconColor
+                  }
+                )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              import_react_native4.Pressable,
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              import_react_native5.Pressable,
               {
                 onPress: openJumpModal,
-                style: styles4.pageIndicatorHit,
+                style: styles5.pageIndicatorHit,
                 accessibilityLabel: "Page jump",
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-                  import_react_native4.Text,
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  import_react_native5.Text,
                   {
                     style: [
-                      styles4.pageIndicator,
-                      isDark && styles4.pageIndicatorDark
+                      styles5.pageIndicator,
+                      isDark && styles5.pageIndicatorDark
                     ],
                     children: [
-                      pageLabel,
+                      currentPage,
                       "/",
                       pageCount
                     ]
@@ -25198,123 +25400,57 @@ var Topbar = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              import_react_native4.Pressable,
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              import_react_native5.Pressable,
               {
                 onPress: () => handlePageChange(1),
-                style: [styles4.pageButton, isDark && styles4.pageButtonDark],
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconChevronRight, { size: 16, color: navIconColor })
+                style: [styles5.pageButton, isDark && styles5.pageButtonDark],
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  IconChevronRight,
+                  {
+                    size: MOBILE_CHROME_METRICS.iconSize,
+                    color: navIconColor
+                  }
+                )
               }
             )
           ] }) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: styles4.rightGroup, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_react_native4.Pressable,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles5.rightGroup, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_react_native5.Pressable,
             {
               onPress: () => onOpenOverflow?.() ?? onOpenSettings?.(),
-              style: [styles4.iconButton, isDark && styles4.iconButtonDark],
+              style: [styles5.iconButton, isDark && styles5.iconButtonDark],
               accessibilityLabel: "Open overflow menu",
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconSettings, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                IconSettings,
+                {
+                  size: MOBILE_CHROME_METRICS.iconSize,
+                  color: isDark ? "#e5e7eb" : "#111827"
+                }
+              )
             }
           ) })
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_react_native4.Modal,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      PageJumpModal,
       {
         visible: jumpModalOpen,
-        transparent: true,
-        animationType: "fade",
-        onRequestClose: () => setJumpModalOpen(false),
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_react_native4.Pressable,
-          {
-            style: styles4.jumpModalBackdrop,
-            onPress: () => setJumpModalOpen(false),
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-              import_react_native4.Pressable,
-              {
-                style: [styles4.jumpModalCard, isDark && styles4.jumpModalCardDark],
-                onPress: (event) => event.stopPropagation(),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                    import_react_native4.Text,
-                    {
-                      style: [
-                        styles4.jumpModalTitle,
-                        isDark && styles4.jumpModalTitleDark
-                      ],
-                      children: "Ir para p\xE1gina"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                    import_react_native4.TextInput,
-                    {
-                      value: jumpValue,
-                      onChangeText: (text) => setJumpValue(text.replace(/[^0-9]/g, "")),
-                      keyboardType: "number-pad",
-                      autoFocus: true,
-                      selectTextOnFocus: true,
-                      maxLength: 6,
-                      placeholder: "1",
-                      placeholderTextColor: isDark ? "#6b7280" : "#9ca3af",
-                      style: [styles4.jumpInput, isDark && styles4.jumpInputDark],
-                      onSubmitEditing: confirmJump,
-                      accessibilityLabel: "Page jump input"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { style: styles4.jumpActions, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                      import_react_native4.Pressable,
-                      {
-                        onPress: () => setJumpModalOpen(false),
-                        style: [
-                          styles4.jumpActionButton,
-                          styles4.jumpActionCancel,
-                          isDark && styles4.jumpActionCancelDark
-                        ],
-                        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                          import_react_native4.Text,
-                          {
-                            style: [
-                              styles4.jumpActionText,
-                              isDark && styles4.jumpActionTextDark
-                            ],
-                            children: "Cancelar"
-                          }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                      import_react_native4.Pressable,
-                      {
-                        onPress: confirmJump,
-                        style: [
-                          styles4.jumpActionButton,
-                          { backgroundColor: accentColor }
-                        ],
-                        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                          import_react_native4.Text,
-                          {
-                            style: [styles4.jumpActionText, styles4.jumpActionTextPrimary],
-                            children: "Ir"
-                          }
-                        )
-                      }
-                    )
-                  ] })
-                ]
-              }
-            )
-          }
-        )
+        currentPage,
+        pageCount,
+        isDark,
+        accentColor,
+        onClose: () => setJumpModalOpen(false),
+        onConfirm: navigateToPage
       }
     )
   ] });
 };
-var styles4 = import_react_native4.StyleSheet.create({
+var styles5 = import_react_native5.StyleSheet.create({
   container: {
-    marginHorizontal: 12,
+    width: "100%",
+    maxWidth: MOBILE_CHROME_METRICS.maxFloatingWidth,
     marginTop: 10,
     paddingHorizontal: 14,
     paddingVertical: 10,
@@ -25339,7 +25475,9 @@ var styles4 = import_react_native4.StyleSheet.create({
     top: 0,
     left: 0,
     right: 0,
-    zIndex: 20
+    zIndex: 20,
+    paddingHorizontal: MOBILE_CHROME_METRICS.screenPadding,
+    alignItems: "center"
   },
   leftGroup: {
     flexDirection: "row",
@@ -25374,6 +25512,12 @@ var styles4 = import_react_native4.StyleSheet.create({
   brandTextDark: {
     color: "#f9fafb"
   },
+  titleHit: {
+    flexShrink: 1,
+    flexGrow: 1,
+    minWidth: 0,
+    borderRadius: 8
+  },
   pageGroup: {
     flexDirection: "row",
     alignItems: "center",
@@ -25381,8 +25525,8 @@ var styles4 = import_react_native4.StyleSheet.create({
     justifyContent: "center"
   },
   pageButton: {
-    width: 26,
-    height: 26,
+    width: MOBILE_CHROME_METRICS.topbarPageButtonSize,
+    height: MOBILE_CHROME_METRICS.topbarPageButtonSize,
     borderRadius: 10,
     alignItems: "center",
     justifyContent: "center",
@@ -25452,86 +25596,13 @@ var styles4 = import_react_native4.StyleSheet.create({
   },
   iconRowSpacer: {
     width: 6
-  },
-  jumpModalBackdrop: {
-    flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.35)",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: 24
-  },
-  jumpModalCard: {
-    width: "100%",
-    maxWidth: 280,
-    backgroundColor: "#ffffff",
-    borderRadius: 14,
-    borderWidth: 1,
-    borderColor: "#e5e7eb",
-    padding: 14
-  },
-  jumpModalCardDark: {
-    backgroundColor: "#0f1115",
-    borderColor: "#1f2937"
-  },
-  jumpModalTitle: {
-    fontSize: 13,
-    fontWeight: "700",
-    color: "#111827",
-    marginBottom: 10
-  },
-  jumpModalTitleDark: {
-    color: "#f3f4f6"
-  },
-  jumpInput: {
-    borderWidth: 1,
-    borderColor: "#d1d5db",
-    borderRadius: 10,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    fontSize: 15,
-    color: "#111827",
-    marginBottom: 12
-  },
-  jumpInputDark: {
-    borderColor: "#374151",
-    color: "#f3f4f6",
-    backgroundColor: "#111827"
-  },
-  jumpActions: {
-    flexDirection: "row",
-    justifyContent: "flex-end"
-  },
-  jumpActionButton: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 8,
-    marginLeft: 8,
-    minWidth: 64,
-    alignItems: "center"
-  },
-  jumpActionCancel: {
-    backgroundColor: "#f3f4f6"
-  },
-  jumpActionCancelDark: {
-    backgroundColor: "#111827"
-  },
-  jumpActionText: {
-    fontSize: 12,
-    fontWeight: "700",
-    color: "#111827"
-  },
-  jumpActionTextDark: {
-    color: "#e5e7eb"
-  },
-  jumpActionTextPrimary: {
-    color: "#ffffff"
   }
 });
 var Topbar_default = Topbar;
 
 // components/ToolDock.tsx
-var import_react5 = __toESM(require("react"));
-var import_react_native5 = require("react-native");
+var import_react6 = __toESM(require("react"));
+var import_react_native6 = require("react-native");
 var import_core5 = require("@papyrus-sdk/core");
 
 // mobileStrings.ts
@@ -25664,9 +25735,27 @@ var getStrings = (locale) => STRINGS[locale ?? "en"] ?? STRINGS.en;
 // components/ToolDock.layout.ts
 var TOOL_DOCK_SCROLL_THRESHOLD = 420;
 var shouldUseScrollablePrimaryToolsRow = (windowWidth) => windowWidth < TOOL_DOCK_SCROLL_THRESHOLD;
+var DRAWING_TOOL_IDS = /* @__PURE__ */ new Set(["ink", "highlight", "underline"]);
+var resolveToolDockBaseIconColor = ({
+  label,
+  isDark
+}) => {
+  if (label === "note") return "#f4c430";
+  return isDark ? "#f8fafc" : "#111827";
+};
+var resolveToolDockIconColor = ({
+  toolId,
+  isSelected,
+  annotationColor,
+  accentColor,
+  baseIconColor
+}) => {
+  if (!isSelected) return baseIconColor;
+  return DRAWING_TOOL_IDS.has(toolId) ? annotationColor : accentColor;
+};
 
 // components/ToolDock.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var COLOR_SWATCHES = [
   "#fbbf24",
   "#f97316",
@@ -25716,10 +25805,7 @@ var OPACITY_TRACK_PADDING = 6;
 var OPACITY_THUMB_SIZE = 22;
 var OPACITY_RAIL_HEIGHT = 10;
 var getToolAccentColor = (tool, isDark) => {
-  if (tool.label === "highlight" || tool.label === "note") {
-    return "#f4c430";
-  }
-  return isDark ? "#f8fafc" : "#111827";
+  return resolveToolDockBaseIconColor({ label: tool.label, isDark });
 };
 var getToolVisual = (toolId) => {
   switch (toolId) {
@@ -25740,24 +25826,24 @@ var getToolVisual = (toolId) => {
       return { width: 24, iconSize: 28, offsetY: 6 };
   }
 };
-var OpacitySlider = import_react5.default.memo(function OpacitySlider2({
+var OpacitySlider = import_react6.default.memo(function OpacitySlider2({
   value,
   color,
   isDark,
   onCommit
 }) {
-  const [trackWidth, setTrackWidth] = (0, import_react5.useState)(0);
-  const [draftValue, setDraftValue] = (0, import_react5.useState)(value);
-  const dragValueRef = (0, import_react5.useRef)(draftValue);
-  const isDraggingRef = (0, import_react5.useRef)(false);
-  const frameRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const [trackWidth, setTrackWidth] = (0, import_react6.useState)(0);
+  const [draftValue, setDraftValue] = (0, import_react6.useState)(value);
+  const dragValueRef = (0, import_react6.useRef)(draftValue);
+  const isDraggingRef = (0, import_react6.useRef)(false);
+  const frameRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     if (!isDraggingRef.current) {
       dragValueRef.current = value;
       setDraftValue(value);
     }
   }, [value]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     return () => {
       if (frameRef.current !== null) {
         cancelAnimationFrame(frameRef.current);
@@ -25794,10 +25880,10 @@ var OpacitySlider = import_react5.default.memo(function OpacitySlider2({
     setDraftValue(next);
     onCommit(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles5.opacitySliderWrap, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    import_react_native5.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: styles6.opacitySliderWrap, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    import_react_native6.View,
     {
-      style: styles5.opacityTouchSurface,
+      style: styles6.opacityTouchSurface,
       onLayout: (event) => setTrackWidth(event.nativeEvent.layout.width),
       onStartShouldSetResponder: () => true,
       onMoveShouldSetResponder: () => true,
@@ -25806,12 +25892,12 @@ var OpacitySlider = import_react5.default.memo(function OpacitySlider2({
       onResponderRelease: commitDraft,
       onResponderTerminate: () => commitDraft(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles5.opacityTrack }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_react_native5.View,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: styles6.opacityTrack }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_react_native6.View,
           {
             style: [
-              styles5.opacityTrackFill,
+              styles6.opacityTrackFill,
               {
                 width: fillWidth,
                 backgroundColor: withInkAlpha(color, 0.92)
@@ -25819,11 +25905,11 @@ var OpacitySlider = import_react5.default.memo(function OpacitySlider2({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_react_native5.View,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_react_native6.View,
           {
             style: [
-              styles5.opacityThumb,
+              styles6.opacityThumb,
               {
                 left: thumbOffset,
                 borderColor: isDark ? "#0f172a" : "#ffffff"
@@ -25856,10 +25942,10 @@ var ToolDock = () => {
     undoAnnotations,
     redoAnnotations
   } = (0, import_core5.useViewerStore)();
-  const [paletteExpanded, setPaletteExpanded] = (0, import_react5.useState)(false);
-  const [extrasExpanded, setExtrasExpanded] = (0, import_react5.useState)(false);
+  const [paletteExpanded, setPaletteExpanded] = (0, import_react6.useState)(false);
+  const [extrasExpanded, setExtrasExpanded] = (0, import_react6.useState)(false);
   const isDark = uiTheme === "dark";
-  const { width: windowWidth } = (0, import_react_native5.useWindowDimensions)();
+  const { width: windowWidth } = (0, import_react_native6.useWindowDimensions)();
   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)";
@@ -25867,7 +25953,7 @@ var ToolDock = () => {
   const iconColor = isDark ? "#e5e7eb" : "#111827";
   const labelColor = isDark ? "#e5e7eb" : "#374151";
   const utilityIconColor = isDark ? "#f8fafc" : "#111827";
-  const selectedTool = (0, import_react5.useMemo)(
+  const selectedTool = (0, import_react6.useMemo)(
     () => ALL_TOOLS.find(
       (tool) => tool.id === "ink" || tool.id === "highlight" || tool.id === "underline" ? activeTool === "ink" && activeDrawToolPreset === tool.id : isToolDockToolSelected({
         toolId: tool.id,
@@ -25935,22 +26021,29 @@ var ToolDock = () => {
     const Icon = tool.icon;
     const visual = getToolVisual(tool.id);
     const baseIconColor = getToolAccentColor(tool, isDark);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native5.Pressable,
+    const iconColor2 = resolveToolDockIconColor({
+      toolId: tool.id,
+      isSelected,
+      annotationColor,
+      accentColor,
+      baseIconColor
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react_native6.Pressable,
       {
         onPress: () => {
           applyTool(tool.id);
           if (compact) setExtrasExpanded(false);
         },
         style: [
-          compact ? styles5.compactToolButton : styles5.toolButton,
+          compact ? styles6.compactToolButton : styles6.toolButton,
           { width: compact ? void 0 : visual.width }
         ],
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_react_native5.View,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_react_native6.View,
           {
             style: [
-              compact ? styles5.compactToolIconWrap : styles5.toolIconWrap,
+              compact ? styles6.compactToolIconWrap : styles6.toolIconWrap,
               {
                 transform: [
                   { translateY: compact ? 4 : visual.offsetY },
@@ -25959,11 +26052,11 @@ var ToolDock = () => {
                 opacity: isSelected ? 1 : 0.92
               }
             ],
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               Icon,
               {
                 size: compact ? 34 : visual.iconSize,
-                color: isSelected ? accentColor : baseIconColor
+                color: iconColor2
               }
             )
           }
@@ -25972,35 +26065,35 @@ var ToolDock = () => {
       tool.id
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { pointerEvents: "box-none", style: styles5.root, children: toolDockOpen ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.View, { style: styles5.stack, children: [
-    paletteExpanded ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native5.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { pointerEvents: "box-none", style: styles6.root, children: toolDockOpen ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.stack, children: [
+    paletteExpanded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react_native6.View,
       {
         style: [
-          styles5.popup,
+          styles6.popup,
           {
             backgroundColor: panelColor,
             borderColor
           }
         ],
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles5.swatchRow, children: COLOR_SWATCHES.map((color) => {
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: styles6.swatchRow, children: COLOR_SWATCHES.map((color) => {
           const isSelected = annotationColor === color;
-          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_react_native5.Pressable,
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            import_react_native6.Pressable,
             {
               onPress: () => setAnnotationColor(color),
               style: [
-                styles5.swatchOuter,
+                styles6.swatchOuter,
                 {
                   borderColor: isSelected ? accentColor : "transparent",
                   backgroundColor: isSelected ? `${accentColor}12` : "transparent"
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                import_react_native5.View,
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                import_react_native6.View,
                 {
                   style: [
-                    styles5.swatch,
+                    styles6.swatch,
                     {
                       backgroundColor: color,
                       borderColor: color === "#f3f4f6" ? "#d1d5db" : "transparent"
@@ -26014,32 +26107,32 @@ var ToolDock = () => {
         }) })
       }
     ) : null,
-    inkSettingsExpanded ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-      import_react_native5.View,
+    inkSettingsExpanded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      import_react_native6.View,
       {
         style: [
-          styles5.popup,
-          styles5.inkPopup,
+          styles6.popup,
+          styles6.inkPopup,
           {
             backgroundColor: panelColor,
             borderColor
           }
         ],
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles5.inkPreviewRow, children: INK_WIDTHS.map((width) => {
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: styles6.inkPreviewRow, children: INK_WIDTHS.map((width) => {
             const selected = Math.abs(inkStrokeWidth - width) < 5e-4;
-            return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              import_react_native5.Pressable,
+            return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_react_native6.Pressable,
               {
                 onPress: () => setInkStrokeWidth(width),
                 style: [
-                  styles5.inkWidthButton,
+                  styles6.inkWidthButton,
                   selected && {
                     backgroundColor: `${accentColor}12`,
                     borderColor: `${accentColor}30`
                   }
                 ],
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles5.inkNib, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: styles6.inkNib, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   IconToolInk,
                   {
                     size: Math.round(18 + width * 1200),
@@ -26050,7 +26143,7 @@ var ToolDock = () => {
               width
             );
           }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             OpacitySlider,
             {
               value: annotationOpacity,
@@ -26062,106 +26155,106 @@ var ToolDock = () => {
         ]
       }
     ) : null,
-    extrasExpanded ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native5.View,
+    extrasExpanded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react_native6.View,
       {
         style: [
-          styles5.popup,
-          styles5.extrasPopup,
+          styles6.popup,
+          styles6.extrasPopup,
           {
             backgroundColor: panelColor,
             borderColor
           }
         ],
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles5.compactToolsRow, children: EXTRA_TOOLS.map((tool) => renderToolButton(tool, true)) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: styles6.compactToolsRow, children: EXTRA_TOOLS.map((tool) => renderToolButton(tool, true)) })
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native5.View,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react_native6.View,
       {
         style: [
-          styles5.container,
+          styles6.container,
           {
             backgroundColor: panelColor,
             borderColor
           }
         ],
-        children: primaryToolsRowIsScrollable ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_react_native5.ScrollView,
+        children: primaryToolsRowIsScrollable ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_react_native6.ScrollView,
           {
             horizontal: true,
             bounces: false,
             showsHorizontalScrollIndicator: false,
-            style: styles5.primaryToolsScrollView,
+            style: styles6.primaryToolsScrollView,
             contentContainerStyle: [
-              styles5.primaryToolsRow,
-              styles5.primaryToolsRowScrollableContent
+              styles6.primaryToolsRow,
+              styles6.primaryToolsRowScrollableContent
             ],
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.View, { style: styles5.primaryToolsRowInner, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.View, { style: styles5.historyGroup, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                  import_react_native5.Pressable,
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.primaryToolsRowInner, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.historyGroup, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_react_native6.Pressable,
                   {
                     onPress: undoAnnotations,
                     disabled: !canUndo,
                     style: [
-                      styles5.utilityButton,
-                      styles5.historyButton,
+                      styles6.utilityButton,
+                      styles6.historyButton,
                       { backgroundColor: buttonColor },
-                      !canUndo && styles5.disabledButton
+                      !canUndo && styles6.disabledButton
                     ],
-                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       IconUndo,
                       {
-                        size: 16,
-                        color: canUndo ? utilityIconColor : isDark ? "#4b5563" : "#9ca3af",
+                        size: MOBILE_CHROME_METRICS.toolDockHistoryIconSize,
+                        color: canUndo ? utilityIconColor : isDark ? MOBILE_CHROME_METRICS.toolDockDisabledIconColorDark : MOBILE_CHROME_METRICS.toolDockDisabledIconColorLight,
                         strokeWidth: 2.2
                       }
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                  import_react_native5.Pressable,
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_react_native6.Pressable,
                   {
                     onPress: redoAnnotations,
                     disabled: !canRedo,
                     style: [
-                      styles5.utilityButton,
-                      styles5.historyButton,
+                      styles6.utilityButton,
+                      styles6.historyButton,
                       { backgroundColor: buttonColor },
-                      !canRedo && styles5.disabledButton
+                      !canRedo && styles6.disabledButton
                     ],
-                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       IconRedo,
                       {
-                        size: 16,
-                        color: canRedo ? utilityIconColor : isDark ? "#4b5563" : "#9ca3af",
+                        size: MOBILE_CHROME_METRICS.toolDockHistoryIconSize,
+                        color: canRedo ? utilityIconColor : isDark ? MOBILE_CHROME_METRICS.toolDockDisabledIconColorDark : MOBILE_CHROME_METRICS.toolDockDisabledIconColorLight,
                         strokeWidth: 2.2
                       }
                     )
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles5.toolsGroup, children: PRIMARY_TOOLS.map((tool) => renderToolButton(tool)) }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.View, { style: styles5.controlsGroup, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                  import_react_native5.Pressable,
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: styles6.toolsGroup, children: PRIMARY_TOOLS.map((tool) => renderToolButton(tool)) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.controlsGroup, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_react_native6.Pressable,
                   {
                     onPress: () => {
                       setExtrasExpanded((value) => !value);
                       setPaletteExpanded(false);
                     },
                     style: [
-                      styles5.utilityButton,
+                      styles6.utilityButton,
                       {
                         backgroundColor: extrasExpanded ? `${accentColor}12` : buttonColor
                       }
                     ],
-                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                      import_react_native5.Text,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      import_react_native6.Text,
                       {
                         style: [
-                          styles5.utilityLabel,
+                          styles6.utilityLabel,
                           { color: extrasExpanded ? accentColor : utilityIconColor }
                         ],
                         children: "+"
@@ -26169,15 +26262,15 @@ var ToolDock = () => {
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                  import_react_native5.Pressable,
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_react_native6.Pressable,
                   {
                     onPress: () => {
                       setPaletteExpanded((value) => !value);
                       setExtrasExpanded(false);
                     },
-                    style: styles5.colorButton,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    style: styles6.colorButton,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       IconColorRing,
                       {
                         size: 30,
@@ -26187,8 +26280,8 @@ var ToolDock = () => {
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                  import_react_native5.Pressable,
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_react_native6.Pressable,
                   {
                     onPress: () => setDocumentState(
                       getToolDockDismissState({
@@ -26197,10 +26290,10 @@ var ToolDock = () => {
                       })
                     ),
                     style: [
-                      styles5.utilityButton,
+                      styles6.utilityButton,
                       { backgroundColor: buttonColor }
                     ],
-                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       IconClose,
                       {
                         size: 15,
@@ -26213,71 +26306,71 @@ var ToolDock = () => {
               ] })
             ] })
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.View, { style: styles5.primaryToolsRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.View, { style: styles5.historyGroup, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              import_react_native5.Pressable,
+        ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.primaryToolsRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.historyGroup, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_react_native6.Pressable,
               {
                 onPress: undoAnnotations,
                 disabled: !canUndo,
                 style: [
-                  styles5.utilityButton,
-                  styles5.historyButton,
+                  styles6.utilityButton,
+                  styles6.historyButton,
                   { backgroundColor: buttonColor },
-                  !canUndo && styles5.disabledButton
+                  !canUndo && styles6.disabledButton
                 ],
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   IconUndo,
                   {
-                    size: 16,
-                    color: canUndo ? utilityIconColor : isDark ? "#4b5563" : "#9ca3af",
+                    size: MOBILE_CHROME_METRICS.toolDockHistoryIconSize,
+                    color: canUndo ? utilityIconColor : isDark ? MOBILE_CHROME_METRICS.toolDockDisabledIconColorDark : MOBILE_CHROME_METRICS.toolDockDisabledIconColorLight,
                     strokeWidth: 2.2
                   }
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              import_react_native5.Pressable,
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_react_native6.Pressable,
               {
                 onPress: redoAnnotations,
                 disabled: !canRedo,
                 style: [
-                  styles5.utilityButton,
-                  styles5.historyButton,
+                  styles6.utilityButton,
+                  styles6.historyButton,
                   { backgroundColor: buttonColor },
-                  !canRedo && styles5.disabledButton
+                  !canRedo && styles6.disabledButton
                 ],
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   IconRedo,
                   {
-                    size: 16,
-                    color: canRedo ? utilityIconColor : isDark ? "#4b5563" : "#9ca3af",
+                    size: MOBILE_CHROME_METRICS.toolDockHistoryIconSize,
+                    color: canRedo ? utilityIconColor : isDark ? MOBILE_CHROME_METRICS.toolDockDisabledIconColorDark : MOBILE_CHROME_METRICS.toolDockDisabledIconColorLight,
                     strokeWidth: 2.2
                   }
                 )
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles5.toolsGroup, children: PRIMARY_TOOLS.map((tool) => renderToolButton(tool)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.View, { style: styles5.controlsGroup, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              import_react_native5.Pressable,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: styles6.toolsGroup, children: PRIMARY_TOOLS.map((tool) => renderToolButton(tool)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.controlsGroup, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_react_native6.Pressable,
               {
                 onPress: () => {
                   setExtrasExpanded((value) => !value);
                   setPaletteExpanded(false);
                 },
                 style: [
-                  styles5.utilityButton,
+                  styles6.utilityButton,
                   {
                     backgroundColor: extrasExpanded ? `${accentColor}12` : buttonColor
                   }
                 ],
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                  import_react_native5.Text,
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_react_native6.Text,
                   {
                     style: [
-                      styles5.utilityLabel,
+                      styles6.utilityLabel,
                       { color: extrasExpanded ? accentColor : utilityIconColor }
                     ],
                     children: "+"
@@ -26285,15 +26378,15 @@ var ToolDock = () => {
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              import_react_native5.Pressable,
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_react_native6.Pressable,
               {
                 onPress: () => {
                   setPaletteExpanded((value) => !value);
                   setExtrasExpanded(false);
                 },
-                style: styles5.colorButton,
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                style: styles6.colorButton,
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   IconColorRing,
                   {
                     size: 30,
@@ -26303,8 +26396,8 @@ var ToolDock = () => {
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              import_react_native5.Pressable,
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_react_native6.Pressable,
               {
                 onPress: () => setDocumentState(
                   getToolDockDismissState({
@@ -26312,8 +26405,8 @@ var ToolDock = () => {
                     interactionMode
                   })
                 ),
-                style: [styles5.utilityButton, { backgroundColor: buttonColor }],
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                style: [styles6.utilityButton, { backgroundColor: buttonColor }],
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   IconClose,
                   {
                     size: 15,
@@ -26329,17 +26422,17 @@ var ToolDock = () => {
     )
   ] }) : null });
 };
-var styles5 = import_react_native5.StyleSheet.create({
+var styles6 = import_react_native6.StyleSheet.create({
   root: {
-    ...import_react_native5.StyleSheet.absoluteFillObject,
+    ...import_react_native6.StyleSheet.absoluteFillObject,
     alignItems: "center",
     justifyContent: "flex-end",
-    paddingHorizontal: 0,
+    paddingHorizontal: MOBILE_CHROME_METRICS.screenPadding,
     paddingBottom: 72
   },
   stack: {
     width: "100%",
-    maxWidth: 520,
+    maxWidth: MOBILE_CHROME_METRICS.maxToolDockWidth,
     alignItems: "center"
   },
   container: {
@@ -26349,7 +26442,7 @@ var styles5 = import_react_native5.StyleSheet.create({
     borderWidth: 1,
     paddingLeft: 12,
     paddingRight: 12,
-    paddingTop: 8,
+    paddingTop: MOBILE_CHROME_METRICS.toolDockPaddingTop,
     paddingBottom: 2,
     justifyContent: "center",
     overflow: "hidden",
@@ -26402,7 +26495,7 @@ var styles5 = import_react_native5.StyleSheet.create({
   historyGroup: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
+    gap: MOBILE_CHROME_METRICS.toolDockHistoryGap,
     width: 82,
     height: 52
   },
@@ -26527,7 +26620,7 @@ var styles5 = import_react_native5.StyleSheet.create({
   },
   historyButton: {},
   disabledButton: {
-    opacity: 0.45
+    opacity: MOBILE_CHROME_METRICS.toolDockDisabledOpacity
   },
   utilityLabel: {
     fontSize: 28,
@@ -26573,11 +26666,20 @@ var withInkAlpha = (hex, alpha) => {
 var ToolDock_default = ToolDock;
 
 // components/RightSheet.tsx
-var import_react6 = require("react");
-var import_react_native6 = require("react-native");
+var import_react7 = require("react");
+var import_react_native7 = require("react-native");
+var import_bottom_sheet = __toESM(require("@gorhom/bottom-sheet"));
 var import_core6 = require("@papyrus-sdk/core");
 var import_engine_native2 = require("@papyrus-sdk/engine-native");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+
+// components/rightSheetLayout.ts
+var resolveRightSheetHeight = ({
+  windowHeight,
+  showingNotes
+}) => showingNotes ? Math.min(440, windowHeight * 0.56) : Math.min(640, windowHeight * 0.72);
+
+// components/RightSheet.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var THUMBNAILS_INITIAL_NUM_TO_RENDER = 4;
 var THUMBNAILS_WINDOW_SIZE = 5;
 var THUMBNAILS_MAX_TO_RENDER_PER_BATCH = 6;
@@ -26610,13 +26712,13 @@ var PageThumbnail = ({
   shouldRenderPreview,
   onPress
 }) => {
-  const viewRef = (0, import_react6.useRef)(null);
-  const [layoutReady, setLayoutReady] = (0, import_react6.useState)(false);
-  (0, import_react6.useEffect)(() => {
+  const viewRef = (0, import_react7.useRef)(null);
+  const [layoutReady, setLayoutReady] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
     if (!layoutReady || !useNativePreview || !shouldRenderPreview) return;
-    const viewTag = (0, import_react_native6.findNodeHandle)(viewRef.current);
+    const viewTag = (0, import_react_native7.findNodeHandle)(viewRef.current);
     if (!viewTag) return;
-    const isNative = import_react_native6.Platform.OS === "android" || import_react_native6.Platform.OS === "ios";
+    const isNative = import_react_native7.Platform.OS === "android" || import_react_native7.Platform.OS === "ios";
     const renderScale = isNative ? 2 / Math.max(zoom, 0.5) : 2;
     void engine.renderPage(pageIndex, viewTag, renderScale);
   }, [
@@ -26632,36 +26734,36 @@ var PageThumbnail = ({
       setLayoutReady(true);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    import_react_native6.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    import_react_native7.Pressable,
     {
       onPress,
       style: [
-        styles6.thumbCard,
+        styles7.thumbCard,
         { width: cardWidth },
-        isDark && styles6.thumbCardDark,
-        isActive && styles6.thumbCardActive,
+        isDark && styles7.thumbCardDark,
+        isActive && styles7.thumbCardActive,
         isActive && { borderColor: accentColor }
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_react_native6.View,
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_react_native7.View,
           {
             onLayout: handleLayout,
-            style: [styles6.thumbFrame, { width: frameWidth, height: frameHeight }],
-            children: useNativePreview && shouldRenderPreview ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_engine_native2.PapyrusPageView, { ref: viewRef, style: styles6.thumbView }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: [styles6.thumbFallback, isDark && styles6.thumbFallbackDark], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              import_react_native6.Text,
+            style: [styles7.thumbFrame, { width: frameWidth, height: frameHeight }],
+            children: useNativePreview && shouldRenderPreview ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_engine_native2.PapyrusPageView, { ref: viewRef, style: styles7.thumbView }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.View, { style: [styles7.thumbFallback, isDark && styles7.thumbFallbackDark], children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              import_react_native7.Text,
               {
                 style: [
-                  styles6.thumbFallbackText,
-                  isDark && styles6.thumbFallbackTextDark
+                  styles7.thumbFallbackText,
+                  isDark && styles7.thumbFallbackTextDark
                 ],
                 children: pageIndex + 1
               }
             ) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Text, { style: [styles6.thumbLabel, isDark && styles6.thumbLabelDark], children: pageIndex + 1 })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Text, { style: [styles7.thumbLabel, isDark && styles7.thumbLabelDark], children: pageIndex + 1 })
       ]
     }
   );
@@ -26669,21 +26771,21 @@ var PageThumbnail = ({
 var OutlineNode = ({ item, depth = 0, isDark, onSelect, untitledLabel }) => {
   const hasChildren = item.children && item.children.length > 0;
   const isClickable = item.pageIndex >= 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react_native6.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_react_native7.Pressable,
       {
         onPress: () => {
           if (isClickable) onSelect(item.pageIndex);
         },
-        style: [styles6.outlineRow, { paddingLeft: 12 + depth * 12 }],
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_react_native6.Text,
+        style: [styles7.outlineRow, { paddingLeft: 12 + depth * 12 }],
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_react_native7.Text,
           {
             style: [
-              styles6.outlineText,
-              isDark && styles6.outlineTextDark,
-              !isClickable && styles6.outlineTextMuted
+              styles7.outlineText,
+              isDark && styles7.outlineTextDark,
+              !isClickable && styles7.outlineTextMuted
             ],
             numberOfLines: 2,
             children: item.title || untitledLabel
@@ -26691,7 +26793,7 @@ var OutlineNode = ({ item, depth = 0, isDark, onSelect, untitledLabel }) => {
         )
       }
     ),
-    hasChildren ? item.children.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    hasChildren ? item.children.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       OutlineNode,
       {
         item: child,
@@ -26707,7 +26809,8 @@ var OutlineNode = ({ item, depth = 0, isDark, onSelect, untitledLabel }) => {
 var RightSheet = ({
   engine,
   documentType,
-  thumbsInitialCount
+  thumbsInitialCount,
+  onOpenPageJump
 }) => {
   const {
     activeMobileDestination,
@@ -26725,30 +26828,35 @@ var RightSheet = ({
     locale,
     accentColor
   } = (0, import_core6.useViewerStore)();
-  const [pagesMode, setPagesMode] = (0, import_react6.useState)(
+  const [pagesMode, setPagesMode] = (0, import_react7.useState)(
     documentType === "pdf" ? "thumbnails" : "summary"
   );
   const isDark = uiTheme === "dark";
   const t = getStrings(locale);
-  const sheetHeight = Math.min(640, import_react_native6.Dimensions.get("window").height * 0.72);
-  const windowWidth = import_react_native6.Dimensions.get("window").width;
+  const showingNotes = sidebarRightTab === "annotations";
+  const sheetHeight = resolveRightSheetHeight({
+    windowHeight: import_react_native7.Dimensions.get("window").height,
+    showingNotes
+  });
+  const snapPoints = (0, import_react7.useMemo)(() => [sheetHeight], [sheetHeight]);
+  const windowWidth = import_react_native7.Dimensions.get("window").width;
   const gridGutter = 12;
   const gridPadding = 16;
   const cardWidth = (windowWidth - gridPadding * 2 - gridGutter) / 2;
   const frameWidth = cardWidth - 16;
   const renderTarget = engine.getRenderTargetType?.();
   const hasNativePageView = Boolean(
-    import_react_native6.UIManager.getViewManagerConfig?.("PapyrusPageView")
+    import_react_native7.UIManager.getViewManagerConfig?.("PapyrusPageView")
   );
   const useNativePreview = renderTarget !== "webview" && hasNativePageView;
-  const thumbnailDimensionsCacheRef = (0, import_react6.useRef)(/* @__PURE__ */ new Map());
-  const thumbnailDimensionsPendingRef = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
-  const thumbnailRefreshTimeoutRef = (0, import_react6.useRef)(null);
-  const [thumbnailLayoutRevision, setThumbnailLayoutRevision] = (0, import_react6.useState)(0);
-  const [visibleThumbnailPages, setVisibleThumbnailPages] = (0, import_react6.useState)(
+  const thumbnailDimensionsCacheRef = (0, import_react7.useRef)(/* @__PURE__ */ new Map());
+  const thumbnailDimensionsPendingRef = (0, import_react7.useRef)(/* @__PURE__ */ new Set());
+  const thumbnailRefreshTimeoutRef = (0, import_react7.useRef)(null);
+  const [thumbnailLayoutRevision, setThumbnailLayoutRevision] = (0, import_react7.useState)(0);
+  const [visibleThumbnailPages, setVisibleThumbnailPages] = (0, import_react7.useState)(
     () => /* @__PURE__ */ new Set()
   );
-  const resolvedThumbsInitialCount = (0, import_react6.useMemo)(
+  const resolvedThumbsInitialCount = (0, import_react7.useMemo)(
     () => resolvePositiveInt2(
       thumbsInitialCount,
       THUMBNAILS_INITIAL_NUM_TO_RENDER,
@@ -26762,16 +26870,15 @@ var RightSheet = ({
     resolvedThumbsInitialCount,
     resolvedThumbsPrewarmCount
   );
-  const showingNotes = sidebarRightTab === "annotations";
   const showingProgress = documentType === "text" || activeMobileDestination === "progress";
   const supportsThumbnails = documentType !== "text";
   const navigationTitle = showingProgress ? t.progress : documentType === "epub" || activeMobileDestination === "contents" ? t.contents : t.pages;
   const summaryLabel = documentType === "epub" ? t.contents : t.summaryTab;
   const thumbnailLabel = documentType === "epub" ? t.pages : t.pagesTab;
-  const closeSheet = (0, import_react6.useCallback)(() => {
+  const closeSheet = (0, import_react7.useCallback)(() => {
     setDocumentState({ sidebarRightOpen: false });
   }, [setDocumentState]);
-  const jumpToPage = (0, import_react6.useCallback)(
+  const jumpToPage = (0, import_react7.useCallback)(
     (pageIndex) => {
       engine.goToPage(pageIndex + 1);
       setDocumentState({ currentPage: pageIndex + 1 });
@@ -26780,14 +26887,14 @@ var RightSheet = ({
     },
     [closeSheet, engine, setDocumentState, triggerScrollToPage]
   );
-  const scheduleThumbnailLayoutRefresh = (0, import_react6.useCallback)(() => {
+  const scheduleThumbnailLayoutRefresh = (0, import_react7.useCallback)(() => {
     if (thumbnailRefreshTimeoutRef.current) return;
     thumbnailRefreshTimeoutRef.current = setTimeout(() => {
       thumbnailRefreshTimeoutRef.current = null;
       setThumbnailLayoutRevision((value) => value + 1);
     }, 80);
   }, []);
-  const ensureThumbnailDimensions = (0, import_react6.useCallback)(
+  const ensureThumbnailDimensions = (0, import_react7.useCallback)(
     (pageIndex) => {
       if (pageIndex < 0 || pageIndex >= pageCount) return;
       if (thumbnailDimensionsCacheRef.current.has(pageIndex)) return;
@@ -26806,7 +26913,7 @@ var RightSheet = ({
     },
     [engine, pageCount, scheduleThumbnailLayoutRefresh]
   );
-  const getThumbnailFrameHeight = (0, import_react6.useCallback)(
+  const getThumbnailFrameHeight = (0, import_react7.useCallback)(
     (pageIndex) => {
       const dims = thumbnailDimensionsCacheRef.current.get(pageIndex);
       const ratio = !dims || dims.width <= 0 || dims.height <= 0 ? THUMBNAILS_DEFAULT_ASPECT_RATIO : dims.height / dims.width;
@@ -26818,7 +26925,7 @@ var RightSheet = ({
     },
     [frameWidth, thumbnailLayoutRevision]
   );
-  (0, import_react6.useEffect)(
+  (0, import_react7.useEffect)(
     () => () => {
       if (thumbnailRefreshTimeoutRef.current) {
         clearTimeout(thumbnailRefreshTimeoutRef.current);
@@ -26826,11 +26933,11 @@ var RightSheet = ({
     },
     []
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (sidebarRightOpen) return;
     setVisibleThumbnailPages(/* @__PURE__ */ new Set());
   }, [sidebarRightOpen]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!sidebarRightOpen || sidebarRightTab !== "pages") return;
     if (activeMobileDestination === "pages") {
       setPagesMode("thumbnails");
@@ -26838,7 +26945,7 @@ var RightSheet = ({
     }
     setPagesMode("summary");
   }, [activeMobileDestination, sidebarRightOpen, sidebarRightTab]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!sidebarRightOpen || sidebarRightTab !== "pages") return;
     if (pagesMode !== "thumbnails" || !supportsThumbnails) return;
     if (pageCount <= 0) return;
@@ -26868,18 +26975,18 @@ var RightSheet = ({
     sidebarRightTab,
     supportsThumbnails
   ]);
-  const pages = (0, import_react6.useMemo)(
+  const pages = (0, import_react7.useMemo)(
     () => Array.from({ length: pageCount }, (_, i) => i),
     [pageCount]
   );
-  const progressEntries = (0, import_react6.useMemo)(
+  const progressEntries = (0, import_react7.useMemo)(
     () => pages.map((pageIndex) => ({
       pageIndex,
       percent: pageCount <= 1 ? 100 : Math.round((pageIndex + 1) / pageCount * 100)
     })),
     [pageCount, pages]
   );
-  const onThumbnailsViewableItemsChanged = (0, import_react6.useCallback)(
+  const onThumbnailsViewableItemsChanged = (0, import_react7.useCallback)(
     ({ viewableItems }) => {
       const nextVisible = /* @__PURE__ */ new Set();
       viewableItems.forEach((token) => {
@@ -26896,10 +27003,10 @@ var RightSheet = ({
     },
     [ensureThumbnailDimensions]
   );
-  const renderThumbnailItem = (0, import_react6.useCallback)(
+  const renderThumbnailItem = (0, import_react7.useCallback)(
     ({ item }) => {
       const shouldRenderPreview = useNativePreview && (visibleThumbnailPages.has(item) || item < resolvedThumbsPrewarmCount || Math.abs(item + 1 - currentPage) <= 1);
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         PageThumbnail,
         {
           engine,
@@ -26932,267 +27039,275 @@ var RightSheet = ({
       zoom
     ]
   );
+  const renderBackdrop = (0, import_react7.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_bottom_sheet.BottomSheetBackdrop,
+      {
+        ...props,
+        appearsOnIndex: 0,
+        disappearsOnIndex: -1,
+        opacity: 0.4,
+        pressBehavior: "close"
+      }
+    ),
+    []
+  );
   if (!sidebarRightOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_react_native6.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.View, { style: styles7.modalRoot, pointerEvents: "box-none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_bottom_sheet.default,
     {
-      visible: true,
-      transparent: true,
-      animationType: "slide",
-      onRequestClose: closeSheet,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.modalRoot, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Pressable, { style: styles6.backdrop, onPress: closeSheet }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-          import_react_native6.View,
-          {
-            style: [
-              styles6.sheet,
-              { height: sheetHeight },
-              isDark && styles6.sheetDark
-            ],
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: [styles6.handle, isDark && styles6.handleDark] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.header, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Text, { style: [styles6.sheetTitle, isDark && styles6.sheetTitleDark], children: showingNotes ? t.notes : navigationTitle }),
-                !showingNotes ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Text, { style: [styles6.pageStatus, isDark && styles6.pageStatusDark], children: showingProgress ? `${Math.round(currentPage / Math.max(pageCount, 1) * 100)}%` : `${t.page} ${currentPage} / ${pageCount}` }) : null
-              ] }),
-              !showingNotes ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.pagesContent, children: [
-                !showingProgress ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: styles6.pageHeader, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: [styles6.segmented, isDark && styles6.segmentedDark], children: [
-                  supportsThumbnails ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                    import_react_native6.Pressable,
-                    {
-                      onPress: () => setPagesMode("thumbnails"),
-                      style: [
-                        styles6.segmentButton,
-                        pagesMode === "thumbnails" && styles6.segmentButtonActive,
-                        pagesMode === "thumbnails" && {
-                          backgroundColor: accentColor
-                        }
-                      ],
-                      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                        import_react_native6.Text,
-                        {
-                          style: [
-                            styles6.segmentText,
-                            isDark && styles6.segmentTextDark,
-                            pagesMode === "thumbnails" && styles6.segmentTextActive
-                          ],
-                          children: thumbnailLabel
-                        }
-                      )
-                    }
-                  ) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                    import_react_native6.Pressable,
-                    {
-                      onPress: () => setPagesMode("summary"),
-                      style: [
-                        styles6.segmentButton,
-                        pagesMode === "summary" && styles6.segmentButtonActive,
-                        pagesMode === "summary" && {
-                          backgroundColor: accentColor
-                        }
-                      ],
-                      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                        import_react_native6.Text,
+      index: 0,
+      snapPoints,
+      enablePanDownToClose: true,
+      onClose: closeSheet,
+      backdropComponent: renderBackdrop,
+      backgroundStyle: [styles7.sheetBackground, isDark && styles7.sheetDark],
+      handleIndicatorStyle: [styles7.handle, isDark && styles7.handleDark],
+      handleStyle: styles7.handleContainer,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: styles7.sheet, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: styles7.header, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Text, { style: [styles7.sheetTitle, isDark && styles7.sheetTitleDark], children: showingNotes ? t.notes : navigationTitle }),
+          !showingNotes ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_react_native7.Pressable,
+            {
+              onPress: showingProgress ? void 0 : onOpenPageJump,
+              disabled: showingProgress || pageCount <= 0,
+              style: styles7.pageStatusHit,
+              accessibilityLabel: "Open page jump",
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Text, { style: [styles7.pageStatus, isDark && styles7.pageStatusDark], children: showingProgress ? `${Math.round(currentPage / Math.max(pageCount, 1) * 100)}%` : `${currentPage}/${pageCount}` })
+            }
+          ) : null
+        ] }),
+        !showingNotes ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: styles7.pagesContent, children: [
+          !showingProgress ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.View, { style: styles7.pageHeader, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: [styles7.segmented, isDark && styles7.segmentedDark], children: [
+            supportsThumbnails ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              import_react_native7.Pressable,
+              {
+                onPress: () => setPagesMode("thumbnails"),
+                style: [
+                  styles7.segmentButton,
+                  pagesMode === "thumbnails" && styles7.segmentButtonActive,
+                  pagesMode === "thumbnails" && {
+                    backgroundColor: accentColor
+                  }
+                ],
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_react_native7.Text,
+                  {
+                    style: [
+                      styles7.segmentText,
+                      isDark && styles7.segmentTextDark,
+                      pagesMode === "thumbnails" && styles7.segmentTextActive
+                    ],
+                    children: thumbnailLabel
+                  }
+                )
+              }
+            ) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              import_react_native7.Pressable,
+              {
+                onPress: () => setPagesMode("summary"),
+                style: [
+                  styles7.segmentButton,
+                  pagesMode === "summary" && styles7.segmentButtonActive,
+                  pagesMode === "summary" && {
+                    backgroundColor: accentColor
+                  }
+                ],
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_react_native7.Text,
+                  {
+                    style: [
+                      styles7.segmentText,
+                      isDark && styles7.segmentTextDark,
+                      pagesMode === "summary" && styles7.segmentTextActive
+                    ],
+                    children: summaryLabel
+                  }
+                )
+              }
+            )
+          ] }) }) : null,
+          supportsThumbnails && !showingProgress && pagesMode === "thumbnails" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_bottom_sheet.BottomSheetFlatList,
+            {
+              data: pages,
+              keyExtractor: (item) => `thumb-${item}`,
+              numColumns: 2,
+              contentContainerStyle: styles7.thumbGrid,
+              columnWrapperStyle: styles7.thumbRow,
+              showsVerticalScrollIndicator: false,
+              initialNumToRender: normalizedThumbsInitialCount,
+              windowSize: THUMBNAILS_WINDOW_SIZE,
+              maxToRenderPerBatch: THUMBNAILS_MAX_TO_RENDER_PER_BATCH,
+              updateCellsBatchingPeriod: THUMBNAILS_UPDATE_CELLS_BATCHING_PERIOD,
+              removeClippedSubviews: true,
+              viewabilityConfig: { itemVisiblePercentThreshold: 20 },
+              onViewableItemsChanged: onThumbnailsViewableItemsChanged,
+              renderItem: renderThumbnailItem
+            }
+          ) : showingProgress ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_bottom_sheet.BottomSheetScrollView,
+            {
+              contentContainerStyle: styles7.summaryContent,
+              showsVerticalScrollIndicator: false,
+              children: progressEntries.map((entry) => {
+                const isActive = entry.pageIndex + 1 === currentPage;
+                return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  import_react_native7.Pressable,
+                  {
+                    onPress: () => jumpToPage(entry.pageIndex),
+                    style: [
+                      styles7.progressRow,
+                      isDark && styles7.progressRowDark,
+                      isActive && { borderColor: accentColor }
+                    ],
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                        import_react_native7.Text,
                         {
                           style: [
-                            styles6.segmentText,
-                            isDark && styles6.segmentTextDark,
-                            pagesMode === "summary" && styles6.segmentTextActive
+                            styles7.progressLabel,
+                            isDark && styles7.progressLabelDark
                           ],
-                          children: summaryLabel
+                          children: [
+                            entry.percent,
+                            "%"
+                          ]
                         }
-                      )
-                    }
-                  )
-                ] }) }) : null,
-                supportsThumbnails && !showingProgress && pagesMode === "thumbnails" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  import_react_native6.FlatList,
-                  {
-                    data: pages,
-                    keyExtractor: (item) => `thumb-${item}`,
-                    numColumns: 2,
-                    contentContainerStyle: styles6.thumbGrid,
-                    columnWrapperStyle: styles6.thumbRow,
-                    showsVerticalScrollIndicator: false,
-                    initialNumToRender: normalizedThumbsInitialCount,
-                    windowSize: THUMBNAILS_WINDOW_SIZE,
-                    maxToRenderPerBatch: THUMBNAILS_MAX_TO_RENDER_PER_BATCH,
-                    updateCellsBatchingPeriod: THUMBNAILS_UPDATE_CELLS_BATCHING_PERIOD,
-                    removeClippedSubviews: true,
-                    viewabilityConfig: { itemVisiblePercentThreshold: 20 },
-                    onViewableItemsChanged: onThumbnailsViewableItemsChanged,
-                    renderItem: renderThumbnailItem
-                  }
-                ) : showingProgress ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  import_react_native6.ScrollView,
-                  {
-                    contentContainerStyle: styles6.summaryContent,
-                    showsVerticalScrollIndicator: false,
-                    children: progressEntries.map((entry) => {
-                      const isActive = entry.pageIndex + 1 === currentPage;
-                      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-                        import_react_native6.Pressable,
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                        import_react_native7.Text,
                         {
-                          onPress: () => jumpToPage(entry.pageIndex),
                           style: [
-                            styles6.progressRow,
-                            isDark && styles6.progressRowDark,
-                            isActive && { borderColor: accentColor }
+                            styles7.progressMeta,
+                            isDark && styles7.progressMetaDark
                           ],
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-                              import_react_native6.Text,
-                              {
-                                style: [
-                                  styles6.progressLabel,
-                                  isDark && styles6.progressLabelDark
-                                ],
-                                children: [
-                                  entry.percent,
-                                  "%"
-                                ]
-                              }
-                            ),
-                            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-                              import_react_native6.Text,
-                              {
-                                style: [
-                                  styles6.progressMeta,
-                                  isDark && styles6.progressMetaDark
-                                ],
-                                children: [
-                                  t.page,
-                                  " ",
-                                  entry.pageIndex + 1
-                                ]
-                              }
-                            )
+                            t.page,
+                            " ",
+                            entry.pageIndex + 1
                           ]
-                        },
-                        `progress-${entry.pageIndex}`
-                      );
-                    })
-                  }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  import_react_native6.ScrollView,
-                  {
-                    contentContainerStyle: styles6.summaryContent,
-                    showsVerticalScrollIndicator: false,
-                    children: outline.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Text, { style: [styles6.emptyText, isDark && styles6.emptyTextDark], children: t.noSummary }) : outline.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                      OutlineNode,
-                      {
-                        item,
-                        isDark,
-                        untitledLabel: t.untitled,
-                        onSelect: jumpToPage
-                      },
-                      `${item.title}-${index}`
-                    ))
-                  }
-                )
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                import_react_native6.ScrollView,
+                        }
+                      )
+                    ]
+                  },
+                  `progress-${entry.pageIndex}`
+                );
+              })
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_bottom_sheet.BottomSheetScrollView,
+            {
+              contentContainerStyle: styles7.summaryContent,
+              showsVerticalScrollIndicator: false,
+              children: outline.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Text, { style: [styles7.emptyText, isDark && styles7.emptyTextDark], children: t.noSummary }) : outline.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                OutlineNode,
                 {
-                  contentContainerStyle: styles6.content,
-                  showsVerticalScrollIndicator: false,
-                  children: annotations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Text, { style: [styles6.emptyText, isDark && styles6.emptyTextDark], children: t.noAnnotations }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { children: annotations.map((ann) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-                    import_react_native6.Pressable,
+                  item,
+                  isDark,
+                  untitledLabel: t.untitled,
+                  onSelect: jumpToPage
+                },
+                `${item.title}-${index}`
+              ))
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_bottom_sheet.BottomSheetScrollView,
+          {
+            contentContainerStyle: styles7.content,
+            showsVerticalScrollIndicator: false,
+            children: annotations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Text, { style: [styles7.emptyText, isDark && styles7.emptyTextDark], children: t.noAnnotations }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.View, { children: annotations.map((ann) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              import_react_native7.Pressable,
+              {
+                onPress: () => {
+                  setSelectedAnnotation(ann.id);
+                  triggerScrollToPage(ann.pageIndex);
+                  closeSheet();
+                },
+                style: [styles7.noteCard, isDark && styles7.noteCardDark],
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: styles7.noteHeader, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      import_react_native7.View,
+                      {
+                        style: [styles7.noteDot, { backgroundColor: ann.color }]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                      import_react_native7.Text,
+                      {
+                        style: [styles7.noteTitle, isDark && styles7.noteTitleDark],
+                        children: [
+                          t.page,
+                          " ",
+                          ann.pageIndex + 1
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    import_react_native7.Text,
                     {
-                      onPress: () => {
-                        setSelectedAnnotation(ann.id);
-                        triggerScrollToPage(ann.pageIndex);
-                        closeSheet();
-                      },
-                      style: [styles6.noteCard, isDark && styles6.noteCardDark],
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.noteHeader, children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                            import_react_native6.View,
-                            {
-                              style: [styles6.noteDot, { backgroundColor: ann.color }]
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-                            import_react_native6.Text,
-                            {
-                              style: [styles6.noteTitle, isDark && styles6.noteTitleDark],
-                              children: [
-                                t.page,
-                                " ",
-                                ann.pageIndex + 1
-                              ]
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                          import_react_native6.Text,
-                          {
-                            style: [
-                              styles6.noteType,
-                              isDark && styles6.noteTypeDark,
-                              { color: accentColor }
-                            ],
-                            children: ann.type === "comment" || ann.type === "text" ? t.note.toUpperCase() : ann.type.toUpperCase()
-                          }
-                        ),
-                        ann.content ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                          import_react_native6.Text,
-                          {
-                            style: [
-                              styles6.noteContent,
-                              isDark && styles6.noteContentDark
-                            ],
-                            children: ann.content
-                          }
-                        ) : null
-                      ]
-                    },
-                    ann.id
-                  )) })
-                }
-              )
-            ]
+                      style: [
+                        styles7.noteType,
+                        isDark && styles7.noteTypeDark,
+                        { color: accentColor }
+                      ],
+                      children: ann.type === "comment" || ann.type === "text" ? t.note.toUpperCase() : ann.type.toUpperCase()
+                    }
+                  ),
+                  ann.content ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    import_react_native7.Text,
+                    {
+                      style: [
+                        styles7.noteContent,
+                        isDark && styles7.noteContentDark
+                      ],
+                      children: ann.content
+                    }
+                  ) : null
+                ]
+              },
+              ann.id
+            )) })
           }
         )
       ] })
     }
-  );
+  ) });
 };
-var styles6 = import_react_native6.StyleSheet.create({
+var styles7 = import_react_native7.StyleSheet.create({
   modalRoot: {
-    flex: 1,
-    backgroundColor: "transparent"
-  },
-  backdrop: {
-    ...import_react_native6.StyleSheet.absoluteFillObject,
-    backgroundColor: "rgba(0, 0, 0, 0.4)"
+    ...import_react_native7.StyleSheet.absoluteFillObject,
+    zIndex: 30
   },
   sheet: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    bottom: 0,
+    flex: 1,
+    paddingBottom: 16
+  },
+  sheetBackground: {
     backgroundColor: "#ffffff",
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     borderTopWidth: 1,
-    borderTopColor: "#e5e7eb",
-    paddingBottom: 16
+    borderTopColor: "#e5e7eb"
   },
   sheetDark: {
     backgroundColor: "#0f1115",
     borderTopColor: "#1f2937"
   },
+  handleContainer: {
+    paddingTop: 10,
+    paddingBottom: 12
+  },
   handle: {
     width: 44,
     height: 4,
     borderRadius: 999,
-    backgroundColor: "#cbd5f5",
-    alignSelf: "center",
-    marginTop: 10,
-    marginBottom: 12
+    backgroundColor: "#cbd5f5"
   },
   handleDark: {
     backgroundColor: "#374151"
@@ -27200,12 +27315,16 @@ var styles6 = import_react_native6.StyleSheet.create({
   header: {
     paddingHorizontal: 16,
     marginBottom: 10,
-    gap: 4
+    gap: 4,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
   },
   sheetTitle: {
     fontSize: 16,
     fontWeight: "800",
-    color: "#111827"
+    color: "#111827",
+    flex: 1
   },
   sheetTitleDark: {
     color: "#f8fafc"
@@ -27225,6 +27344,11 @@ var styles6 = import_react_native6.StyleSheet.create({
     fontWeight: "700",
     color: "#111827"
   },
+  pageStatusHit: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 8
+  },
   pageStatusDark: {
     color: "#e5e7eb"
   },
@@ -27427,10 +27551,10 @@ var styles6 = import_react_native6.StyleSheet.create({
 var RightSheet_default = RightSheet;
 
 // components/AnnotationEditor.tsx
-var import_react7 = require("react");
-var import_react_native7 = require("react-native");
+var import_react8 = require("react");
+var import_react_native8 = require("react-native");
 var import_core7 = require("@papyrus-sdk/core");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var AnnotationEditor = () => {
   const {
     annotations,
@@ -27443,10 +27567,10 @@ var AnnotationEditor = () => {
   } = (0, import_core7.useViewerStore)();
   const annotation = annotations.find((ann) => ann.id === selectedAnnotationId);
   const isEditable = annotation && (annotation.type === "text" || annotation.type === "comment");
-  const [draft, setDraft] = (0, import_react7.useState)("");
+  const [draft, setDraft] = (0, import_react8.useState)("");
   const isDark = uiTheme === "dark";
   const t = getStrings(locale);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (isEditable) {
       setDraft(annotation?.content ?? "");
     }
@@ -27457,19 +27581,19 @@ var AnnotationEditor = () => {
     updateAnnotation(annotation.id, { content: draft });
     setSelectedAnnotation(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_react_native7.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_react_native8.Modal,
     {
       visible: true,
       transparent: true,
       animationType: "fade",
       onRequestClose: handleClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.View, { style: styles7.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: [styles7.card, isDark && styles7.cardDark], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Text, { style: [styles7.title, isDark && styles7.titleDark], children: t.editNote }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          import_react_native7.TextInput,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.View, { style: styles8.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native8.View, { style: [styles8.card, isDark && styles8.cardDark], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.Text, { style: [styles8.title, isDark && styles8.titleDark], children: t.editNote }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_react_native8.TextInput,
           {
-            style: [styles7.input, isDark && styles7.inputDark],
+            style: [styles8.input, isDark && styles8.inputDark],
             value: draft,
             onChangeText: setDraft,
             placeholder: t.notePlaceholder,
@@ -27477,25 +27601,25 @@ var AnnotationEditor = () => {
             multiline: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native7.View, { style: styles7.actions, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            import_react_native7.Pressable,
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native8.View, { style: styles8.actions, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_react_native8.Pressable,
             {
               onPress: handleClose,
-              style: [styles7.actionButton, styles7.actionCancel],
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Text, { style: styles7.actionText, children: t.cancel })
+              style: [styles8.actionButton, styles8.actionCancel],
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.Text, { style: styles8.actionText, children: t.cancel })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            import_react_native7.Pressable,
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_react_native8.Pressable,
             {
               onPress: handleSave,
               style: [
-                styles7.actionButton,
-                styles7.actionSave,
+                styles8.actionButton,
+                styles8.actionSave,
                 { backgroundColor: accentColor }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native7.Text, { style: [styles7.actionText, styles7.actionTextLight], children: t.save })
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.Text, { style: [styles8.actionText, styles8.actionTextLight], children: t.save })
             }
           )
         ] })
@@ -27503,7 +27627,7 @@ var AnnotationEditor = () => {
     }
   );
 };
-var styles7 = import_react_native7.StyleSheet.create({
+var styles8 = import_react_native8.StyleSheet.create({
   overlay: {
     flex: 1,
     alignItems: "center",
@@ -27573,7 +27697,7 @@ var styles7 = import_react_native7.StyleSheet.create({
 var AnnotationEditor_default = AnnotationEditor;
 
 // components/BottomBar.tsx
-var import_react_native8 = require("react-native");
+var import_react_native9 = require("react-native");
 var import_core8 = require("@papyrus-sdk/core");
 
 // components/bottomBarModel.ts
@@ -27612,8 +27736,15 @@ function buildBottomBarLayout({
   };
 }
 
+// components/BottomBar.actions.ts
+function createOpenDestinationHandler(onOpenDestination, destination) {
+  return () => {
+    onOpenDestination?.(destination);
+  };
+}
+
 // components/BottomBar.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var BottomBar = ({
   documentType,
   onOpenInfo,
@@ -27658,19 +27789,19 @@ var BottomBar = ({
           });
           return;
         }
-        onOpenDestination("annotate");
+        onOpenDestination?.("annotate");
         setDocumentState({ toolDockOpen: true });
       }
     },
     notes: {
       label: t.notes,
       icon: IconComment,
-      onPress: () => onOpenDestination("notes")
+      onPress: createOpenDestinationHandler(onOpenDestination, "notes")
     },
     search: {
       label: t.search,
       icon: IconSearch,
-      onPress: () => onOpenDestination("search")
+      onPress: createOpenDestinationHandler(onOpenDestination, "search")
     },
     info: {
       label: t.info,
@@ -27684,37 +27815,43 @@ var BottomBar = ({
     }
   };
   if (!mobileChromeVisible || !mobileDockVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native8.View, { pointerEvents: "box-none", style: styles8.frame, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native8.View, { style: styles8.row, children: [
-    layout.leftSlots.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_native8.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.View, { pointerEvents: "box-none", style: styles9.frame, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: styles9.row, children: [
+    layout.leftSlots.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react_native9.View,
       {
         style: [
-          styles8.island,
-          styles8.editIsland,
-          isDark && styles8.islandDark
+          styles9.island,
+          styles9.editIsland,
+          isDark && styles9.islandDark
         ],
         testID: "papyrus-floating-bottom-dock-edit",
         children: layout.leftSlots.map((slot) => {
           const meta = slotMeta[slot.key];
           const Icon = meta.icon;
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            import_react_native8.Pressable,
+          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_react_native9.Pressable,
             {
               onPress: meta.onPress,
               style: [
-                styles8.iconOnlyItem,
-                slot.active && styles8.itemActive
+                styles9.iconOnlyItem,
+                slot.active && styles9.itemActive
               ],
               accessibilityLabel: meta.label,
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                import_react_native8.View,
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                import_react_native9.View,
                 {
                   style: [
-                    styles8.itemIcon,
-                    isDark && styles8.itemIconDark,
-                    slot.active && styles8.itemIconActive
+                    styles9.itemIcon,
+                    isDark && styles9.itemIconDark,
+                    slot.active && styles9.itemIconActive
                   ],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { size: 17, color: iconColor(slot.active) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    Icon,
+                    {
+                      size: MOBILE_CHROME_METRICS.iconSize,
+                      color: iconColor(slot.active)
+                    }
+                  )
                 }
               )
             },
@@ -27723,33 +27860,39 @@ var BottomBar = ({
         })
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_native8.View,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react_native9.View,
       {
         style: [
-          styles8.island,
-          styles8.utilityIsland,
-          isDark && styles8.islandDark
+          styles9.island,
+          styles9.utilityIsland,
+          isDark && styles9.islandDark
         ],
         testID: "papyrus-floating-bottom-dock",
         children: layout.rightSlots.map((slot) => {
           const meta = slotMeta[slot.key];
           const Icon = meta.icon;
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            import_react_native8.Pressable,
+          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_react_native9.Pressable,
             {
               onPress: meta.onPress,
-              style: [styles8.iconOnlyItem, slot.active && styles8.itemActive],
+              style: [styles9.iconOnlyItem, slot.active && styles9.itemActive],
               accessibilityLabel: meta.label,
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                import_react_native8.View,
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                import_react_native9.View,
                 {
                   style: [
-                    styles8.itemIcon,
-                    isDark && styles8.itemIconDark,
-                    slot.active && styles8.itemIconActive
+                    styles9.itemIcon,
+                    isDark && styles9.itemIconDark,
+                    slot.active && styles9.itemIconActive
                   ],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { size: 17, color: iconColor(slot.active) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    Icon,
+                    {
+                      size: MOBILE_CHROME_METRICS.iconSize,
+                      color: iconColor(slot.active)
+                    }
+                  )
                 }
               )
             },
@@ -27760,20 +27903,20 @@ var BottomBar = ({
     )
   ] }) });
 };
-var styles8 = import_react_native8.StyleSheet.create({
+var styles9 = import_react_native9.StyleSheet.create({
   frame: {
     position: "absolute",
     left: 0,
     right: 0,
     bottom: 0,
     zIndex: 20,
-    paddingHorizontal: 12,
+    paddingHorizontal: MOBILE_CHROME_METRICS.screenPadding,
     paddingBottom: 14,
     alignItems: "center"
   },
   row: {
     width: "100%",
-    maxWidth: 360,
+    maxWidth: MOBILE_CHROME_METRICS.maxFloatingWidth,
     flexDirection: "row",
     justifyContent: "flex-start",
     alignItems: "center",
@@ -27811,15 +27954,15 @@ var styles8 = import_react_native8.StyleSheet.create({
   iconOnlyItem: {
     alignItems: "center",
     justifyContent: "center",
-    paddingHorizontal: 4,
-    paddingVertical: 2
+    paddingHorizontal: MOBILE_CHROME_METRICS.bottomBarItemPaddingHorizontal,
+    paddingVertical: MOBILE_CHROME_METRICS.bottomBarItemPaddingVertical
   },
   itemActive: {
     transform: [{ translateY: -2 }]
   },
   itemIcon: {
-    width: 22,
-    height: 22,
+    width: MOBILE_CHROME_METRICS.iconBoxSize,
+    height: MOBILE_CHROME_METRICS.iconBoxSize,
     borderRadius: 0,
     backgroundColor: "transparent",
     alignItems: "center",
@@ -27837,9 +27980,11 @@ var styles8 = import_react_native8.StyleSheet.create({
 var BottomBar_default = BottomBar;
 
 // components/SettingsSheet.tsx
-var import_react_native9 = require("react-native");
+var import_react9 = require("react");
+var import_react_native10 = require("react-native");
+var import_bottom_sheet2 = __toESM(require("@gorhom/bottom-sheet"));
 var import_core9 = require("@papyrus-sdk/core");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var PAGE_THEME_OPTIONS = [
   { value: "normal", labelKey: "themeOriginal" },
   { value: "sepia", labelKey: "themeSepia" },
@@ -27848,19 +27993,19 @@ var PAGE_THEME_OPTIONS = [
 ];
 var ThemeSwatch = ({ value }) => {
   if (value === "high-contrast") {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: [styles9.themeSwatch, styles9.themeSwatchContrast], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.View, { style: styles9.themeSwatchContrastHalfDark }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.View, { style: styles9.themeSwatchContrastHalfLight })
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: [styles10.themeSwatch, styles10.themeSwatchContrast], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: styles10.themeSwatchContrastHalfDark }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: styles10.themeSwatchContrastHalfLight })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_react_native9.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_react_native10.View,
     {
       style: [
-        styles9.themeSwatch,
-        value === "normal" && styles9.themeSwatchNormal,
-        value === "sepia" && styles9.themeSwatchSepia,
-        value === "dark" && styles9.themeSwatchDark
+        styles10.themeSwatch,
+        value === "normal" && styles10.themeSwatchNormal,
+        value === "sepia" && styles10.themeSwatchSepia,
+        value === "dark" && styles10.themeSwatchDark
       ]
     }
   );
@@ -27883,6 +28028,23 @@ var SettingsSheet = ({
   const isPaged = viewMode === "single";
   const isDouble = viewMode === "double";
   const t = getStrings(locale);
+  const snapPoints = (0, import_react9.useMemo)(
+    () => [Math.min(640, import_react_native10.Dimensions.get("window").height * 0.72)],
+    []
+  );
+  const renderBackdrop = (0, import_react9.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_bottom_sheet2.BottomSheetBackdrop,
+      {
+        ...props,
+        appearsOnIndex: 0,
+        disappearsOnIndex: -1,
+        opacity: 0.4,
+        pressBehavior: "close"
+      }
+    ),
+    []
+  );
   const handleTransition = (mode) => {
     if (mode === "paged") {
       setDocumentState({ viewMode: "single" });
@@ -27909,366 +28071,380 @@ var SettingsSheet = ({
     setDocumentState({ zoom: next });
   };
   if (!visible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.Modal, { visible: true, transparent: true, animationType: "slide", onRequestClose: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: styles9.modalRoot, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.Pressable, { style: styles9.backdrop, onPress: onClose }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: [styles9.sheet, isDark && styles9.sheetDark], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.View, { style: [styles9.handle, isDark && styles9.handleDark] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: styles9.section, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react_native9.Text,
-          {
-            style: [styles9.sectionTitle, isDark && styles9.sectionTitleDark],
-            children: t.appearance
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: styles9.optionRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_react_native9.Pressable,
-            {
-              onPress: () => setDocumentState({ uiTheme: "light" }),
-              style: [
-                styles9.optionButton,
-                isDark && styles9.optionButtonDark,
-                uiTheme === "light" && styles9.optionButtonActive,
-                uiTheme === "light" && { backgroundColor: accentColor }
-              ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                import_react_native9.Text,
-                {
-                  style: [
-                    styles9.optionText,
-                    isDark && styles9.optionTextDark,
-                    uiTheme === "light" && styles9.optionTextActive
-                  ],
-                  children: t.light
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_react_native9.Pressable,
-            {
-              onPress: () => setDocumentState({ uiTheme: "dark" }),
-              style: [
-                styles9.optionButton,
-                isDark && styles9.optionButtonDark,
-                uiTheme === "dark" && styles9.optionButtonActive,
-                uiTheme === "dark" && { backgroundColor: accentColor }
-              ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                import_react_native9.Text,
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: styles10.modalRoot, pointerEvents: "box-none", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_bottom_sheet2.default,
+    {
+      index: 0,
+      snapPoints,
+      enablePanDownToClose: true,
+      onClose,
+      backdropComponent: renderBackdrop,
+      backgroundStyle: [styles10.sheetBackground, isDark && styles10.sheetDark],
+      handleIndicatorStyle: [styles10.handle, isDark && styles10.handleDark],
+      handleStyle: styles10.handleContainer,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        import_bottom_sheet2.BottomSheetScrollView,
+        {
+          style: styles10.sheet,
+          contentContainerStyle: styles10.sheetContent,
+          showsVerticalScrollIndicator: false,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: styles10.section, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_react_native10.Text,
                 {
-                  style: [
-                    styles9.optionText,
-                    isDark && styles9.optionTextDark,
-                    uiTheme === "dark" && styles9.optionTextActive
-                  ],
-                  children: t.dark
+                  style: [styles10.sectionTitle, isDark && styles10.sectionTitleDark],
+                  children: t.appearance
                 }
-              )
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: styles9.section, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react_native9.Text,
-          {
-            style: [styles9.sectionTitle, isDark && styles9.sectionTitleDark],
-            children: t.pageTheme
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.View, { style: styles9.themeOptionRow, children: PAGE_THEME_OPTIONS.map((option) => {
-          const active = pageTheme === option.value;
-          return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-            import_react_native9.Pressable,
-            {
-              onPress: () => setDocumentState({ pageTheme: option.value }),
-              style: [
-                styles9.themeOptionButton,
-                isDark && styles9.themeOptionButtonDark,
-                active && styles9.themeOptionButtonActive,
-                active && { borderColor: accentColor }
-              ],
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ThemeSwatch, { value: option.value }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  import_react_native9.Text,
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: styles10.optionRow, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_react_native10.Pressable,
+                  {
+                    onPress: () => setDocumentState({ uiTheme: "light" }),
+                    style: [
+                      styles10.optionButton,
+                      isDark && styles10.optionButtonDark,
+                      uiTheme === "light" && styles10.optionButtonActive,
+                      uiTheme === "light" && { backgroundColor: accentColor }
+                    ],
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      import_react_native10.Text,
+                      {
+                        style: [
+                          styles10.optionText,
+                          isDark && styles10.optionTextDark,
+                          uiTheme === "light" && styles10.optionTextActive
+                        ],
+                        children: t.light
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_react_native10.Pressable,
                   {
+                    onPress: () => setDocumentState({ uiTheme: "dark" }),
                     style: [
-                      styles9.themeOptionLabel,
-                      isDark && styles9.themeOptionLabelDark,
-                      active && { color: accentColor }
+                      styles10.optionButton,
+                      isDark && styles10.optionButtonDark,
+                      uiTheme === "dark" && styles10.optionButtonActive,
+                      uiTheme === "dark" && { backgroundColor: accentColor }
                     ],
-                    children: t[option.labelKey]
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      import_react_native10.Text,
+                      {
+                        style: [
+                          styles10.optionText,
+                          isDark && styles10.optionTextDark,
+                          uiTheme === "dark" && styles10.optionTextActive
+                        ],
+                        children: t.dark
+                      }
+                    )
                   }
                 )
-              ]
-            },
-            option.value
-          );
-        }) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: styles9.section, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react_native9.Text,
-          {
-            style: [styles9.sectionTitle, isDark && styles9.sectionTitleDark],
-            children: t.pageTransition
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: styles9.optionRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_react_native9.Pressable,
-            {
-              onPress: () => handleTransition("continuous"),
-              style: [
-                styles9.optionButton,
-                isDark && styles9.optionButtonDark,
-                (!isPaged || isDouble) && styles9.optionButtonActive,
-                (!isPaged || isDouble) && { backgroundColor: accentColor }
-              ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                import_react_native9.Text,
-                {
-                  style: [
-                    styles9.optionText,
-                    isDark && styles9.optionTextDark,
-                    (!isPaged || isDouble) && styles9.optionTextActive
-                  ],
-                  children: t.continuous
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_react_native9.Pressable,
-            {
-              onPress: () => handleTransition("paged"),
-              style: [
-                styles9.optionButton,
-                isDark && styles9.optionButtonDark,
-                isPaged && styles9.optionButtonActive,
-                isPaged && { backgroundColor: accentColor }
-              ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                import_react_native9.Text,
-                {
-                  style: [
-                    styles9.optionText,
-                    isDark && styles9.optionTextDark,
-                    isPaged && styles9.optionTextActive
-                  ],
-                  children: t.pageByPage
-                }
-              )
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: styles9.section, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react_native9.Text,
-          {
-            style: [styles9.sectionTitle, isDark && styles9.sectionTitleDark],
-            children: t.layout
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: styles9.optionRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_react_native9.Pressable,
-            {
-              onPress: () => handleLayout("single"),
-              style: [
-                styles9.optionButton,
-                isDark && styles9.optionButtonDark,
-                !isDouble && styles9.optionButtonActive,
-                !isDouble && { backgroundColor: accentColor }
-              ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                import_react_native9.Text,
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: styles10.section, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_react_native10.Text,
                 {
-                  style: [
-                    styles9.optionText,
-                    isDark && styles9.optionTextDark,
-                    !isDouble && styles9.optionTextActive
-                  ],
-                  children: t.singlePage
+                  style: [styles10.sectionTitle, isDark && styles10.sectionTitleDark],
+                  children: t.pageTheme
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_react_native9.Pressable,
-            {
-              onPress: () => handleLayout("double"),
-              style: [
-                styles9.optionButton,
-                isDark && styles9.optionButtonDark,
-                isDouble && styles9.optionButtonActive,
-                isDouble && { backgroundColor: accentColor }
-              ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                import_react_native9.Text,
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: styles10.themeOptionRow, children: PAGE_THEME_OPTIONS.map((option) => {
+                const active = pageTheme === option.value;
+                return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                  import_react_native10.Pressable,
+                  {
+                    onPress: () => setDocumentState({ pageTheme: option.value }),
+                    style: [
+                      styles10.themeOptionButton,
+                      isDark && styles10.themeOptionButtonDark,
+                      active && styles10.themeOptionButtonActive,
+                      active && { borderColor: accentColor }
+                    ],
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ThemeSwatch, { value: option.value }),
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                        import_react_native10.Text,
+                        {
+                          style: [
+                            styles10.themeOptionLabel,
+                            isDark && styles10.themeOptionLabelDark,
+                            active && { color: accentColor }
+                          ],
+                          children: t[option.labelKey]
+                        }
+                      )
+                    ]
+                  },
+                  option.value
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: styles10.section, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_react_native10.Text,
                 {
-                  style: [
-                    styles9.optionText,
-                    isDark && styles9.optionTextDark,
-                    isDouble && styles9.optionTextActive
-                  ],
-                  children: t.doublePage
+                  style: [styles10.sectionTitle, isDark && styles10.sectionTitleDark],
+                  children: t.pageTransition
                 }
-              )
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: styles9.section, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react_native9.Text,
-          {
-            style: [styles9.sectionTitle, isDark && styles9.sectionTitleDark],
-            children: t.rotate
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: styles9.optionRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_react_native9.Pressable,
-            {
-              onPress: () => handleRotate("counterclockwise"),
-              style: [styles9.optionButton, isDark && styles9.optionButtonDark],
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                import_react_native9.Text,
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: styles10.optionRow, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_react_native10.Pressable,
+                  {
+                    onPress: () => handleTransition("continuous"),
+                    style: [
+                      styles10.optionButton,
+                      isDark && styles10.optionButtonDark,
+                      (!isPaged || isDouble) && styles10.optionButtonActive,
+                      (!isPaged || isDouble) && { backgroundColor: accentColor }
+                    ],
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      import_react_native10.Text,
+                      {
+                        style: [
+                          styles10.optionText,
+                          isDark && styles10.optionTextDark,
+                          (!isPaged || isDouble) && styles10.optionTextActive
+                        ],
+                        children: t.continuous
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_react_native10.Pressable,
+                  {
+                    onPress: () => handleTransition("paged"),
+                    style: [
+                      styles10.optionButton,
+                      isDark && styles10.optionButtonDark,
+                      isPaged && styles10.optionButtonActive,
+                      isPaged && { backgroundColor: accentColor }
+                    ],
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      import_react_native10.Text,
+                      {
+                        style: [
+                          styles10.optionText,
+                          isDark && styles10.optionTextDark,
+                          isPaged && styles10.optionTextActive
+                        ],
+                        children: t.pageByPage
+                      }
+                    )
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: styles10.section, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_react_native10.Text,
                 {
-                  style: [styles9.optionText, isDark && styles9.optionTextDark],
-                  children: t.counterclockwise
+                  style: [styles10.sectionTitle, isDark && styles10.sectionTitleDark],
+                  children: t.layout
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_react_native9.Pressable,
-            {
-              onPress: () => handleRotate("clockwise"),
-              style: [styles9.optionButton, isDark && styles9.optionButtonDark],
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                import_react_native9.Text,
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: styles10.optionRow, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_react_native10.Pressable,
+                  {
+                    onPress: () => handleLayout("single"),
+                    style: [
+                      styles10.optionButton,
+                      isDark && styles10.optionButtonDark,
+                      !isDouble && styles10.optionButtonActive,
+                      !isDouble && { backgroundColor: accentColor }
+                    ],
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      import_react_native10.Text,
+                      {
+                        style: [
+                          styles10.optionText,
+                          isDark && styles10.optionTextDark,
+                          !isDouble && styles10.optionTextActive
+                        ],
+                        children: t.singlePage
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_react_native10.Pressable,
+                  {
+                    onPress: () => handleLayout("double"),
+                    style: [
+                      styles10.optionButton,
+                      isDark && styles10.optionButtonDark,
+                      isDouble && styles10.optionButtonActive,
+                      isDouble && { backgroundColor: accentColor }
+                    ],
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      import_react_native10.Text,
+                      {
+                        style: [
+                          styles10.optionText,
+                          isDark && styles10.optionTextDark,
+                          isDouble && styles10.optionTextActive
+                        ],
+                        children: t.doublePage
+                      }
+                    )
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: styles10.section, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_react_native10.Text,
                 {
-                  style: [styles9.optionText, isDark && styles9.optionTextDark],
-                  children: t.clockwise
+                  style: [styles10.sectionTitle, isDark && styles10.sectionTitleDark],
+                  children: t.rotate
                 }
-              )
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: styles9.section, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react_native9.Text,
-          {
-            style: [styles9.sectionTitle, isDark && styles9.sectionTitleDark],
-            children: t.zoom
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: styles9.optionRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_react_native9.Pressable,
-            {
-              onPress: () => handleZoom(-0.1),
-              style: [styles9.optionButton, isDark && styles9.optionButtonDark],
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconZoomOut, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native9.View, { style: styles9.zoomValue, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.Text, { style: [styles9.zoomText, isDark && styles9.zoomTextDark], children: [
-            Math.round(zoom * 100),
-            "%"
-          ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_react_native9.Pressable,
-            {
-              onPress: () => handleZoom(0.1),
-              style: [styles9.optionButton, isDark && styles9.optionButtonDark],
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconZoomIn, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: styles9.section, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react_native9.Text,
-          {
-            style: [styles9.sectionTitle, isDark && styles9.sectionTitleDark],
-            children: t.language
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native9.View, { style: styles9.optionRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_react_native9.Pressable,
-            {
-              onPress: () => setDocumentState({ locale: "en" }),
-              style: [
-                styles9.optionButton,
-                isDark && styles9.optionButtonDark,
-                locale === "en" && styles9.optionButtonActive,
-                locale === "en" && { backgroundColor: accentColor }
-              ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                import_react_native9.Text,
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: styles10.optionRow, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_react_native10.Pressable,
+                  {
+                    onPress: () => handleRotate("counterclockwise"),
+                    style: [styles10.optionButton, isDark && styles10.optionButtonDark],
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      import_react_native10.Text,
+                      {
+                        style: [styles10.optionText, isDark && styles10.optionTextDark],
+                        children: t.counterclockwise
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_react_native10.Pressable,
+                  {
+                    onPress: () => handleRotate("clockwise"),
+                    style: [styles10.optionButton, isDark && styles10.optionButtonDark],
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      import_react_native10.Text,
+                      {
+                        style: [styles10.optionText, isDark && styles10.optionTextDark],
+                        children: t.clockwise
+                      }
+                    )
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: styles10.section, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_react_native10.Text,
                 {
-                  style: [
-                    styles9.optionText,
-                    isDark && styles9.optionTextDark,
-                    locale === "en" && styles9.optionTextActive
-                  ],
-                  children: t.english
+                  style: [styles10.sectionTitle, isDark && styles10.sectionTitleDark],
+                  children: t.zoom
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_react_native9.Pressable,
-            {
-              onPress: () => setDocumentState({ locale: "pt-BR" }),
-              style: [
-                styles9.optionButton,
-                isDark && styles9.optionButtonDark,
-                locale === "pt-BR" && styles9.optionButtonActive,
-                locale === "pt-BR" && { backgroundColor: accentColor }
-              ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                import_react_native9.Text,
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: styles10.optionRow, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_react_native10.Pressable,
+                  {
+                    onPress: () => handleZoom(-0.1),
+                    style: [styles10.optionButton, isDark && styles10.optionButtonDark],
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconZoomOut, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: styles10.zoomValue, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.Text, { style: [styles10.zoomText, isDark && styles10.zoomTextDark], children: [
+                  Math.round(zoom * 100),
+                  "%"
+                ] }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_react_native10.Pressable,
+                  {
+                    onPress: () => handleZoom(0.1),
+                    style: [styles10.optionButton, isDark && styles10.optionButtonDark],
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconZoomIn, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: styles10.section, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_react_native10.Text,
                 {
-                  style: [
-                    styles9.optionText,
-                    isDark && styles9.optionTextDark,
-                    locale === "pt-BR" && styles9.optionTextActive
-                  ],
-                  children: t.portuguese
+                  style: [styles10.sectionTitle, isDark && styles10.sectionTitleDark],
+                  children: t.language
                 }
-              )
-            }
-          )
-        ] })
-      ] })
-    ] })
-  ] }) });
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: styles10.optionRow, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_react_native10.Pressable,
+                  {
+                    onPress: () => setDocumentState({ locale: "en" }),
+                    style: [
+                      styles10.optionButton,
+                      isDark && styles10.optionButtonDark,
+                      locale === "en" && styles10.optionButtonActive,
+                      locale === "en" && { backgroundColor: accentColor }
+                    ],
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      import_react_native10.Text,
+                      {
+                        style: [
+                          styles10.optionText,
+                          isDark && styles10.optionTextDark,
+                          locale === "en" && styles10.optionTextActive
+                        ],
+                        children: t.english
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_react_native10.Pressable,
+                  {
+                    onPress: () => setDocumentState({ locale: "pt-BR" }),
+                    style: [
+                      styles10.optionButton,
+                      isDark && styles10.optionButtonDark,
+                      locale === "pt-BR" && styles10.optionButtonActive,
+                      locale === "pt-BR" && { backgroundColor: accentColor }
+                    ],
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      import_react_native10.Text,
+                      {
+                        style: [
+                          styles10.optionText,
+                          isDark && styles10.optionTextDark,
+                          locale === "pt-BR" && styles10.optionTextActive
+                        ],
+                        children: t.portuguese
+                      }
+                    )
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  ) });
 };
-var styles9 = import_react_native9.StyleSheet.create({
+var styles10 = import_react_native10.StyleSheet.create({
   modalRoot: {
-    flex: 1,
-    backgroundColor: "transparent"
-  },
-  backdrop: {
-    ...import_react_native9.StyleSheet.absoluteFillObject,
-    backgroundColor: "rgba(0, 0, 0, 0.45)"
+    ...import_react_native10.StyleSheet.absoluteFillObject,
+    zIndex: 30
   },
   sheet: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    bottom: 0,
+    flex: 1
+  },
+  sheetContent: {
     paddingHorizontal: 18,
-    paddingBottom: 24,
+    paddingBottom: 24
+  },
+  sheetBackground: {
     backgroundColor: "#ffffff",
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
@@ -28279,14 +28455,15 @@ var styles9 = import_react_native9.StyleSheet.create({
     backgroundColor: "#0f1115",
     borderTopColor: "#1f2937"
   },
+  handleContainer: {
+    paddingTop: 10,
+    paddingBottom: 12
+  },
   handle: {
     width: 44,
     height: 4,
     borderRadius: 999,
-    backgroundColor: "#cbd5f5",
-    alignSelf: "center",
-    marginTop: 10,
-    marginBottom: 12
+    backgroundColor: "#cbd5f5"
   },
   handleDark: {
     backgroundColor: "#374151"
@@ -28416,10 +28593,10 @@ var styles9 = import_react_native9.StyleSheet.create({
 var SettingsSheet_default = SettingsSheet;
 
 // components/CoverPreview.tsx
-var import_react8 = require("react");
-var import_react_native10 = require("react-native");
+var import_react10 = require("react");
+var import_react_native11 = require("react-native");
 var import_engine_native3 = require("@papyrus-sdk/engine-native");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var parseDataUri = (value) => {
   const match = /^data:([^;,]+)?(;base64)?,/.exec(value);
   if (!match) return null;
@@ -28467,18 +28644,18 @@ var CoverPreview = ({
   onLoadEnd,
   onError
 }) => {
-  const [engine, setEngine] = (0, import_react8.useState)(null);
-  const [layoutReady, setLayoutReady] = (0, import_react8.useState)(false);
-  const [loaded, setLoaded] = (0, import_react8.useState)(false);
-  const [loading, setLoading] = (0, import_react8.useState)(false);
-  const [error, setError] = (0, import_react8.useState)(null);
-  const viewRef = (0, import_react8.useRef)(null);
-  const resolvedType = (0, import_react8.useMemo)(() => inferDocumentType(source, type), [source, type]);
+  const [engine, setEngine] = (0, import_react10.useState)(null);
+  const [layoutReady, setLayoutReady] = (0, import_react10.useState)(false);
+  const [loaded, setLoaded] = (0, import_react10.useState)(false);
+  const [loading, setLoading] = (0, import_react10.useState)(false);
+  const [error, setError] = (0, import_react10.useState)(null);
+  const viewRef = (0, import_react10.useRef)(null);
+  const resolvedType = (0, import_react10.useMemo)(() => inferDocumentType(source, type), [source, type]);
   const isPdf = resolvedType === "pdf";
-  const hasNativePageView = Boolean(import_react_native10.UIManager.getViewManagerConfig?.("PapyrusPageView"));
+  const hasNativePageView = Boolean(import_react_native11.UIManager.getViewManagerConfig?.("PapyrusPageView"));
   const canRender = !isPdf || hasNativePageView;
   const shouldRender = Boolean(visible);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!shouldRender) {
       if (!keepAlive) {
         setEngine(null);
@@ -28491,7 +28668,7 @@ var CoverPreview = ({
       setEngine(new import_engine_native3.MobileDocumentEngine());
     }
   }, [shouldRender, keepAlive, engine, canRender]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!engine || !shouldRender || !canRender) return;
     let active = true;
     setLoading(true);
@@ -28518,13 +28695,13 @@ var CoverPreview = ({
       active = false;
     };
   }, [engine, shouldRender, canRender, source, type, pageIndex, isPdf, onLoadStart, onLoadEnd, onError]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!engine || !isPdf || !loaded || !layoutReady || !shouldRender || !canRender) return;
-    const viewTag = (0, import_react_native10.findNodeHandle)(viewRef.current);
+    const viewTag = (0, import_react_native11.findNodeHandle)(viewRef.current);
     if (!viewTag) return;
     engine.renderPage(pageIndex, viewTag, renderScale);
   }, [engine, isPdf, loaded, layoutReady, shouldRender, canRender, pageIndex, renderScale]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     return () => {
       engine?.destroy();
     };
@@ -28536,15 +28713,15 @@ var CoverPreview = ({
     }
   };
   if (!shouldRender || !canRender) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: [styles10.container, style], children: placeholder ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: styles10.placeholder, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.Text, { style: styles10.placeholderText, children: "Preview" }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.View, { style: [styles11.container, style], children: placeholder ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.View, { style: styles11.placeholder, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.Text, { style: styles11.placeholderText, children: "Preview" }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: [styles10.container, style], onLayout: handleLayout, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: styles10.previewFrame, pointerEvents: allowInteraction ? "auto" : "none", children: isPdf ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_engine_native3.PapyrusPageView, { ref: viewRef, style: styles10.pageView }) : engine && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(WebViewViewer_default, { engine }) }),
-    showLoading && loading && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { pointerEvents: "none", style: styles10.loadingOverlay, children: loadingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.ActivityIndicator, { size: "small", color: "#2563eb" }) }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { pointerEvents: "none", style: styles10.errorOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.Text, { style: styles10.errorText, children: "Preview unavailable" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native11.View, { style: [styles11.container, style], onLayout: handleLayout, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.View, { style: styles11.previewFrame, pointerEvents: allowInteraction ? "auto" : "none", children: isPdf ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_engine_native3.PapyrusPageView, { ref: viewRef, style: styles11.pageView }) : engine && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(WebViewViewer_default, { engine }) }),
+    showLoading && loading && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.View, { pointerEvents: "none", style: styles11.loadingOverlay, children: loadingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.ActivityIndicator, { size: "small", color: "#2563eb" }) }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.View, { pointerEvents: "none", style: styles11.errorOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.Text, { style: styles11.errorText, children: "Preview unavailable" }) })
   ] });
 };
-var styles10 = import_react_native10.StyleSheet.create({
+var styles11 = import_react_native11.StyleSheet.create({
   container: {
     backgroundColor: "#f8fafc",
     borderRadius: 12,
@@ -28560,13 +28737,13 @@ var styles10 = import_react_native10.StyleSheet.create({
     backgroundColor: "transparent"
   },
   loadingOverlay: {
-    ...import_react_native10.StyleSheet.absoluteFillObject,
+    ...import_react_native11.StyleSheet.absoluteFillObject,
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "rgba(15, 23, 42, 0.15)"
   },
   errorOverlay: {
-    ...import_react_native10.StyleSheet.absoluteFillObject,
+    ...import_react_native11.StyleSheet.absoluteFillObject,
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "rgba(15, 23, 42, 0.4)"
@@ -28591,37 +28768,37 @@ var styles10 = import_react_native10.StyleSheet.create({
 var CoverPreview_default = CoverPreview;
 
 // components/ReadingShell.tsx
-var import_react11 = __toESM(require("react"));
-var import_react_native17 = require("react-native");
+var import_react13 = __toESM(require("react"));
+var import_react_native18 = require("react-native");
 var import_core16 = require("@papyrus-sdk/core");
 
 // components/DocumentActionsSheet.tsx
-var import_react_native11 = require("react-native");
+var import_react_native12 = require("react-native");
 var import_core10 = require("@papyrus-sdk/core");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function DocumentActionsSheet({
   visible,
   onClose
 }) {
   const { uiTheme } = (0, import_core10.useViewerStore)();
   const isDark = uiTheme === "dark";
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.Pressable, { style: styles11.backdrop, onPress: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    import_react_native11.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.Pressable, { style: styles12.backdrop, onPress: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    import_react_native12.Pressable,
     {
       onPress: (event) => event.stopPropagation(),
-      style: [styles11.card, isDark && styles11.cardDark],
+      style: [styles12.card, isDark && styles12.cardDark],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.Text, { style: [styles11.eyebrow, isDark && styles11.eyebrowDark], children: "Document actions" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native11.View, { style: styles11.actionList, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.View, { style: [styles11.actionItem, isDark && styles11.actionItemDark], children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.Text, { style: [styles11.actionText, isDark && styles11.actionTextDark], children: "Share" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.View, { style: [styles11.actionItem, isDark && styles11.actionItemDark], children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.Text, { style: [styles11.actionText, isDark && styles11.actionTextDark], children: "Export" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.Text, { style: [styles12.eyebrow, isDark && styles12.eyebrowDark], children: "Document actions" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native12.View, { style: styles12.actionList, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { style: [styles12.actionItem, isDark && styles12.actionItemDark], children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.Text, { style: [styles12.actionText, isDark && styles12.actionTextDark], children: "Share" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { style: [styles12.actionItem, isDark && styles12.actionItemDark], children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.Text, { style: [styles12.actionText, isDark && styles12.actionTextDark], children: "Export" }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.Pressable, { onPress: onClose, style: styles11.closeButton, accessibilityLabel: "Close actions sheet", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native11.Text, { style: styles11.closeText, children: "Close" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.Pressable, { onPress: onClose, style: styles12.closeButton, accessibilityLabel: "Close actions sheet", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.Text, { style: styles12.closeText, children: "Close" }) })
       ]
     }
   ) }) });
 }
-var styles11 = import_react_native11.StyleSheet.create({
+var styles12 = import_react_native12.StyleSheet.create({
   backdrop: {
     flex: 1,
     backgroundColor: "rgba(15, 23, 42, 0.35)",
@@ -28682,7 +28859,7 @@ var styles11 = import_react_native11.StyleSheet.create({
 });
 
 // components/InfoSheet.tsx
-var import_react_native12 = require("react-native");
+var import_react_native13 = require("react-native");
 var import_core11 = require("@papyrus-sdk/core");
 
 // components/infoSheetModel.ts
@@ -28782,7 +28959,7 @@ var buildInfoRows = ({
 };
 
 // components/InfoSheet.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function InfoSheet({
   visible,
   title,
@@ -28812,66 +28989,66 @@ function InfoSheet({
     pageTheme,
     locale
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_react_native12.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_react_native13.Modal,
     {
       visible,
       transparent: true,
       animationType: "fade",
       onRequestClose: onClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.Pressable, { style: styles12.backdrop, onPress: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-        import_react_native12.Pressable,
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.Pressable, { style: styles13.backdrop, onPress: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        import_react_native13.Pressable,
         {
           onPress: (event) => event.stopPropagation(),
-          style: [styles12.card, isDark && styles12.cardDark],
+          style: [styles13.card, isDark && styles13.cardDark],
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native12.View, { style: styles12.topRow, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                import_react_native12.Pressable,
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native13.View, { style: styles13.topRow, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                import_react_native13.Pressable,
                 {
                   onPress: onClose,
                   style: [
-                    styles12.iconCloseButton,
-                    isDark && styles12.iconCloseButtonDark
+                    styles13.iconCloseButton,
+                    isDark && styles13.iconCloseButtonDark
                   ],
                   accessibilityLabel: "Close info sheet",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconClose, { size: 18, color: isDark ? "#f8fafc" : "#111827" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconClose, { size: 18, color: isDark ? "#f8fafc" : "#111827" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                import_react_native12.Text,
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                import_react_native13.Text,
                 {
-                  style: [styles12.headerTitle, isDark && styles12.headerTitleDark],
+                  style: [styles13.headerTitle, isDark && styles13.headerTitleDark],
                   numberOfLines: 1,
                   children: locale === "pt-BR" ? "Informa\xE7\xF5es" : "Information"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { style: styles12.topRowSpacer })
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: styles13.topRowSpacer })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-              import_react_native12.ScrollView,
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+              import_react_native13.ScrollView,
               {
-                style: styles12.content,
-                contentContainerStyle: styles12.contentInner,
+                style: styles13.content,
+                contentContainerStyle: styles13.contentInner,
                 showsVerticalScrollIndicator: false,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                    import_react_native12.Text,
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    import_react_native13.Text,
                     {
-                      style: [styles12.sectionTitle, isDark && styles12.sectionTitleDark],
+                      style: [styles13.sectionTitle, isDark && styles13.sectionTitleDark],
                       children: locale === "pt-BR" ? "Informa\xE7\xF5es" : "Information"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.View, { style: styles12.rows, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                    import_react_native12.View,
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: styles13.rows, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                    import_react_native13.View,
                     {
-                      style: [styles12.row, isDark && styles12.rowDark],
+                      style: [styles13.row, isDark && styles13.rowDark],
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native12.Text, { style: [styles12.label, isDark && styles12.labelDark], children: row.label }),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                          import_react_native12.Text,
+                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.Text, { style: [styles13.label, isDark && styles13.labelDark], children: row.label }),
+                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                          import_react_native13.Text,
                           {
-                            style: [styles12.value, isDark && styles12.valueDark],
+                            style: [styles13.value, isDark && styles13.valueDark],
                             selectable: true,
                             children: row.value
                           }
@@ -28889,15 +29066,15 @@ function InfoSheet({
     }
   );
 }
-var styles12 = import_react_native12.StyleSheet.create({
+var styles13 = import_react_native13.StyleSheet.create({
   backdrop: {
     flex: 1,
-    backgroundColor: "rgba(15, 23, 42, 0.42)",
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
     justifyContent: "flex-end",
     padding: 16
   },
   card: {
-    borderRadius: 34,
+    borderRadius: 24,
     backgroundColor: "#ffffff",
     paddingHorizontal: 16,
     paddingTop: 16,
@@ -28906,7 +29083,7 @@ var styles12 = import_react_native12.StyleSheet.create({
     maxHeight: "88%"
   },
   cardDark: {
-    backgroundColor: "#1f1f22"
+    backgroundColor: "#0f1115"
   },
   topRow: {
     flexDirection: "row",
@@ -28927,7 +29104,7 @@ var styles12 = import_react_native12.StyleSheet.create({
     backgroundColor: "#f1f5f9"
   },
   iconCloseButtonDark: {
-    backgroundColor: "#2a2a2f"
+    backgroundColor: "#111827"
   },
   headerTitle: {
     fontSize: 18,
@@ -28992,9 +29169,9 @@ var styles12 = import_react_native12.StyleSheet.create({
 });
 
 // components/OverflowSheet.tsx
-var import_react_native13 = require("react-native");
+var import_react_native14 = require("react-native");
 var import_core12 = require("@papyrus-sdk/core");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var actionLabels = [{ key: "actions", label: "Document actions" }];
 function OverflowSheet({
   visible,
@@ -29006,30 +29183,30 @@ function OverflowSheet({
   const handlers = {
     actions: onOpenActions
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_react_native13.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_react_native14.Modal,
     {
       visible,
       transparent: true,
       animationType: "fade",
       onRequestClose: onClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.Pressable, { style: styles13.backdrop, onPress: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-        import_react_native13.Pressable,
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native14.Pressable, { style: styles14.backdrop, onPress: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        import_react_native14.Pressable,
         {
           onPress: (event) => event.stopPropagation(),
-          style: [styles13.card, isDark && styles13.cardDark],
+          style: [styles14.card, isDark && styles14.cardDark],
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native13.View, { style: styles13.handle }),
-            actionLabels.map((action) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              import_react_native13.Pressable,
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native14.View, { style: styles14.handle }),
+            actionLabels.map((action) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_react_native14.Pressable,
               {
                 onPress: handlers[action.key],
-                style: [styles13.actionButton, { borderColor: accentColor }],
+                style: [styles14.actionButton, { borderColor: accentColor }],
                 accessibilityLabel: action.label,
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  import_react_native13.Text,
+                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  import_react_native14.Text,
                   {
-                    style: [styles13.actionText, isDark && styles13.actionTextDark],
+                    style: [styles14.actionText, isDark && styles14.actionTextDark],
                     children: action.label
                   }
                 )
@@ -29042,7 +29219,7 @@ function OverflowSheet({
     }
   );
 }
-var styles13 = import_react_native13.StyleSheet.create({
+var styles14 = import_react_native14.StyleSheet.create({
   backdrop: {
     flex: 1,
     backgroundColor: "rgba(15, 23, 42, 0.35)",
@@ -29083,12 +29260,16 @@ var styles13 = import_react_native13.StyleSheet.create({
 });
 
 // components/ProgressPill.tsx
-var import_react9 = require("react");
-var import_react_native14 = require("react-native");
+var import_react11 = require("react");
+var import_react_native15 = require("react-native");
 var import_core13 = require("@papyrus-sdk/core");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var clampPercent = (value) => Math.max(0, Math.min(100, Math.round(value)));
-function ProgressPill({ documentType, onPress }) {
+function ProgressPill({
+  documentType,
+  onPress,
+  onOpenPageJump
+}) {
   const {
     currentPage,
     pageCount,
@@ -29098,7 +29279,7 @@ function ProgressPill({ documentType, onPress }) {
     mobileProgressPillVisible
   } = (0, import_core13.useViewerStore)();
   const isDark = uiTheme === "dark";
-  const label = (0, import_react9.useMemo)(() => {
+  const label = (0, import_react11.useMemo)(() => {
     const total = Math.max(pageCount, 1);
     const percent = clampPercent(currentPage / total * 100);
     if (documentType === "pdf") {
@@ -29110,37 +29291,53 @@ function ProgressPill({ documentType, onPress }) {
     return `${percent}%`;
   }, [currentPage, documentType, pageCount]);
   if (!mobileChromeVisible || !mobileProgressPillVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native14.View, { pointerEvents: "box-none", style: styles14.frame, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-    import_react_native14.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native15.View, { pointerEvents: "box-none", style: styles15.frame, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    import_react_native15.View,
     {
-      onPress,
       accessibilityLabel: "Open document navigation",
       style: [
-        styles14.pill,
-        isDark && styles14.pillDark,
+        styles15.pill,
+        isDark && styles15.pillDark,
         { borderColor: `${accentColor}33` }
       ],
       testID: "papyrus-progress-pill",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          IconPageNav,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_react_native15.Pressable,
           {
-            size: 20,
-            color: isDark ? "#f8fafc" : "#111827",
-            strokeWidth: 1.8
+            onPress,
+            style: styles15.iconHit,
+            accessibilityLabel: "Open document navigation",
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              IconPageNav,
+              {
+                size: 20,
+                color: isDark ? "#f8fafc" : "#111827",
+                strokeWidth: 1.8
+              }
+            )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native14.Text, { style: [styles14.label, isDark && styles14.labelDark], children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_react_native15.Pressable,
+          {
+            onPress,
+            onLongPress: onOpenPageJump,
+            style: styles15.labelHit,
+            accessibilityLabel: "Open page jump",
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native15.Text, { style: [styles15.label, isDark && styles15.labelDark], children: label })
+          }
+        )
       ]
     }
   ) });
 }
-var styles14 = import_react_native14.StyleSheet.create({
+var styles15 = import_react_native15.StyleSheet.create({
   frame: {
     position: "absolute",
     top: 72,
-    left: 12,
-    right: 12,
+    left: MOBILE_CHROME_METRICS.screenPadding,
+    right: MOBILE_CHROME_METRICS.screenPadding,
     bottom: "auto",
     alignItems: "flex-start",
     zIndex: 18
@@ -29162,6 +29359,12 @@ var styles14 = import_react_native14.StyleSheet.create({
     shadowOffset: { width: 0, height: 8 },
     elevation: 6
   },
+  iconHit: {
+    borderRadius: 8
+  },
+  labelHit: {
+    borderRadius: 8
+  },
   pillDark: {
     backgroundColor: "rgba(15,17,21,0.88)"
   },
@@ -29177,10 +29380,10 @@ var styles14 = import_react_native14.StyleSheet.create({
 });
 
 // components/SearchOverlay.tsx
-var import_react10 = require("react");
-var import_react_native15 = require("react-native");
+var import_react12 = require("react");
+var import_react_native16 = require("react-native");
 var import_core14 = require("@papyrus-sdk/core");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function SearchOverlay({
   engine,
   documentType,
@@ -29199,14 +29402,14 @@ function SearchOverlay({
     uiTheme,
     accentColor
   } = (0, import_core14.useViewerStore)();
-  const [draft, setDraft] = (0, import_react10.useState)(searchQuery);
-  const [isSearching, setIsSearching] = (0, import_react10.useState)(false);
+  const [draft, setDraft] = (0, import_react12.useState)(searchQuery);
+  const [isSearching, setIsSearching] = (0, import_react12.useState)(false);
   const isDark = uiTheme === "dark";
   const t = getStrings(locale);
-  const searchService = (0, import_react10.useMemo)(() => new import_core14.SearchService(engine), [engine]);
+  const searchService = (0, import_react12.useMemo)(() => new import_core14.SearchService(engine), [engine]);
   const currentCount = searchResults.length > 0 && activeSearchIndex >= 0 ? activeSearchIndex + 1 : 0;
   const targetLabel = documentType === "pdf" ? t.page : documentType === "epub" ? t.contents : t.progress;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!visible) return;
     setDraft(searchQuery);
   }, [searchQuery, visible]);
@@ -29225,27 +29428,27 @@ function SearchOverlay({
     }
   };
   const handleClose = () => {
-    import_react_native15.Keyboard.dismiss();
+    import_react_native16.Keyboard.dismiss();
     onClose();
   };
   if (!visible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native15.View, { pointerEvents: "box-none", style: styles15.frame, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-    import_react_native15.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native16.View, { pointerEvents: "box-none", style: styles16.frame, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    import_react_native16.View,
     {
-      style: [styles15.card, isDark && styles15.cardDark],
+      style: [styles16.card, isDark && styles16.cardDark],
       testID: "papyrus-search-overlay",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native15.View, { style: styles15.inputRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native15.View, { style: [styles15.searchInputWrap, isDark && styles15.searchInputWrapDark], children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconSearch, { size: 16, color: isDark ? "#cbd5e1" : "#64748b" }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              import_react_native15.TextInput,
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native16.View, { style: styles16.inputRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native16.View, { style: [styles16.searchInputWrap, isDark && styles16.searchInputWrapDark], children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconSearch, { size: 16, color: isDark ? "#cbd5e1" : "#64748b" }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              import_react_native16.TextInput,
               {
                 value: draft,
                 onChangeText: setDraft,
                 placeholder: t.searchPlaceholder,
                 placeholderTextColor: isDark ? "#94a3b8" : "#6b7280",
-                style: [styles15.input, isDark && styles15.inputDark],
+                style: [styles16.input, isDark && styles16.inputDark],
                 autoFocus: true,
                 returnKeyType: "search",
                 onSubmitEditing: handleSubmit,
@@ -29253,74 +29456,74 @@ function SearchOverlay({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            import_react_native15.Pressable,
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            import_react_native16.Pressable,
             {
               onPress: handleClose,
-              style: [styles15.closeButton, isDark && styles15.closeButtonDark],
+              style: [styles16.closeButton, isDark && styles16.closeButtonDark],
               accessibilityLabel: "Close search",
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native15.Text, { style: [styles15.closeText, isDark && styles15.closeTextDark], children: t.cancel })
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native16.Text, { style: [styles16.closeText, isDark && styles16.closeTextDark], children: t.cancel })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native15.View, { style: styles15.metaRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            import_react_native15.Pressable,
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native16.View, { style: styles16.metaRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            import_react_native16.Pressable,
             {
               onPress: prevSearchResult,
               disabled: searchResults.length === 0,
               style: [
-                styles15.navButton,
-                isDark && styles15.navButtonDark,
-                searchResults.length === 0 && styles15.navButtonDisabled
+                styles16.navButton,
+                isDark && styles16.navButtonDark,
+                searchResults.length === 0 && styles16.navButtonDisabled
               ],
               accessibilityLabel: "Previous result",
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconChevronLeft, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconChevronLeft, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native15.Text, { style: [styles15.metaText, isDark && styles15.metaTextDark], children: isSearching ? t.searching : `${currentCount}/${searchResults.length} ${targetLabel}` }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            import_react_native15.Pressable,
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native16.Text, { style: [styles16.metaText, isDark && styles16.metaTextDark], children: isSearching ? t.searching : `${currentCount}/${searchResults.length} ${targetLabel}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            import_react_native16.Pressable,
             {
               onPress: nextSearchResult,
               disabled: searchResults.length === 0,
               style: [
-                styles15.navButton,
-                isDark && styles15.navButtonDark,
-                searchResults.length === 0 && styles15.navButtonDisabled
+                styles16.navButton,
+                isDark && styles16.navButtonDark,
+                searchResults.length === 0 && styles16.navButtonDisabled
               ],
               accessibilityLabel: "Next result",
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconChevronRight, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconChevronRight, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native15.View, { style: styles15.actionsRow, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            import_react_native15.Pressable,
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native16.View, { style: styles16.actionsRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            import_react_native16.Pressable,
             {
               onPress: handleSubmit,
-              style: [styles15.primaryAction, { backgroundColor: accentColor }],
+              style: [styles16.primaryAction, { backgroundColor: accentColor }],
               accessibilityLabel: "Run search",
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native15.Text, { style: styles15.primaryActionText, children: t.searchGo })
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native16.Text, { style: styles16.primaryActionText, children: t.searchGo })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            import_react_native15.Pressable,
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            import_react_native16.Pressable,
             {
               onPress: onOpenResults,
               disabled: searchResults.length === 0,
               style: [
-                styles15.secondaryAction,
-                isDark && styles15.secondaryActionDark,
-                searchResults.length === 0 && styles15.navButtonDisabled
+                styles16.secondaryAction,
+                isDark && styles16.secondaryActionDark,
+                searchResults.length === 0 && styles16.navButtonDisabled
               ],
               accessibilityLabel: "Open all results",
-              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                import_react_native15.Text,
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                import_react_native16.Text,
                 {
                   style: [
-                    styles15.secondaryActionText,
-                    isDark && styles15.secondaryActionTextDark
+                    styles16.secondaryActionText,
+                    isDark && styles16.secondaryActionTextDark
                   ],
                   children: t.allResults
                 }
@@ -29332,7 +29535,7 @@ function SearchOverlay({
     }
   ) });
 }
-var styles15 = import_react_native15.StyleSheet.create({
+var styles16 = import_react_native16.StyleSheet.create({
   frame: {
     position: "absolute",
     left: 0,
@@ -29473,9 +29676,9 @@ var styles15 = import_react_native15.StyleSheet.create({
 });
 
 // components/SearchResultsSheet.tsx
-var import_react_native16 = require("react-native");
+var import_react_native17 = require("react-native");
 var import_core15 = require("@papyrus-sdk/core");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function SearchResultsSheet({
   documentType,
   visible,
@@ -29499,29 +29702,29 @@ function SearchResultsSheet({
     const percent = pageCount <= 1 ? 100 : Math.round((pageIndex + 1) / pageCount * 100);
     return `${t.progress} ${percent}%`;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_react_native16.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_react_native17.Modal,
     {
       visible,
       transparent: true,
       animationType: "slide",
       onRequestClose: onClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native16.View, { style: styles16.modalRoot, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native16.Pressable, { style: styles16.backdrop, onPress: onClose }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native16.View, { style: [styles16.sheet, isDark && styles16.sheetDark], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native16.View, { style: [styles16.handle, isDark && styles16.handleDark] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native16.View, { style: styles16.header, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native16.Text, { style: [styles16.title, isDark && styles16.titleDark], children: t.allResults }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native16.Text, { style: [styles16.meta, isDark && styles16.metaDark], children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native17.View, { style: styles17.modalRoot, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native17.Pressable, { style: styles17.backdrop, onPress: onClose }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native17.View, { style: [styles17.sheet, isDark && styles17.sheetDark], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native17.View, { style: [styles17.handle, isDark && styles17.handleDark] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native17.View, { style: styles17.header, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native17.Text, { style: [styles17.title, isDark && styles17.titleDark], children: t.allResults }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native17.Text, { style: [styles17.meta, isDark && styles17.metaDark], children: [
               searchResults.length,
               " ",
               t.results
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native16.ScrollView, { contentContainerStyle: styles16.content, children: searchResults.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native16.Text, { style: [styles16.emptyText, isDark && styles16.emptyTextDark], children: t.noResults }) : searchResults.map((result, index) => {
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native17.ScrollView, { contentContainerStyle: styles17.content, children: searchResults.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native17.Text, { style: [styles17.emptyText, isDark && styles17.emptyTextDark], children: t.noResults }) : searchResults.map((result, index) => {
             const isActive = index === activeSearchIndex;
-            return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-              import_react_native16.Pressable,
+            return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+              import_react_native17.Pressable,
               {
                 onPress: () => {
                   setDocumentState({
@@ -29532,21 +29735,21 @@ function SearchResultsSheet({
                   onClose();
                 },
                 style: [
-                  styles16.resultCard,
-                  isDark && styles16.resultCardDark,
+                  styles17.resultCard,
+                  isDark && styles17.resultCardDark,
                   isActive && {
                     borderColor: accentColor,
                     backgroundColor: `${accentColor}14`
                   }
                 ],
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native16.Text, { style: [styles16.resultLabel, { color: accentColor }], children: getResultLabel(result.pageIndex) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                    import_react_native16.Text,
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native17.Text, { style: [styles17.resultLabel, { color: accentColor }], children: getResultLabel(result.pageIndex) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    import_react_native17.Text,
                     {
                       style: [
-                        styles16.resultText,
-                        isDark && styles16.resultTextDark
+                        styles17.resultText,
+                        isDark && styles17.resultTextDark
                       ],
                       children: result.text
                     }
@@ -29561,13 +29764,13 @@ function SearchResultsSheet({
     }
   );
 }
-var styles16 = import_react_native16.StyleSheet.create({
+var styles17 = import_react_native17.StyleSheet.create({
   modalRoot: {
     flex: 1,
     backgroundColor: "transparent"
   },
   backdrop: {
-    ...import_react_native16.StyleSheet.absoluteFillObject,
+    ...import_react_native17.StyleSheet.absoluteFillObject,
     backgroundColor: "rgba(0, 0, 0, 0.4)"
   },
   sheet: {
@@ -29662,7 +29865,7 @@ var styles16 = import_react_native16.StyleSheet.create({
 var isSidebarBoundDestination = (destination) => destination === "pages" || destination === "contents" || destination === "progress" || destination === "notes";
 
 // components/ReadingShell.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function ReadingShell({
   engine,
   title,
@@ -29676,18 +29879,25 @@ function ReadingShell({
     openMobileDestination,
     setDocumentState,
     setMobileKeyboardOpen,
-    sidebarRightOpen
+    triggerScrollToPage,
+    sidebarRightOpen,
+    currentPage,
+    pageCount,
+    uiTheme,
+    accentColor
   } = (0, import_core16.useViewerStore)();
-  const [overflowOpen, setOverflowOpen] = (0, import_react11.useState)(false);
-  const [infoOpen, setInfoOpen] = (0, import_react11.useState)(false);
-  const [actionsOpen, setActionsOpen] = (0, import_react11.useState)(false);
-  const [settingsOpen, setSettingsOpen] = (0, import_react11.useState)(false);
-  const [searchResultsOpen, setSearchResultsOpen] = (0, import_react11.useState)(false);
-  import_react11.default.useEffect(() => {
-    const showSubscription = import_react_native17.Keyboard.addListener("keyboardDidShow", () => {
+  const [overflowOpen, setOverflowOpen] = (0, import_react13.useState)(false);
+  const [infoOpen, setInfoOpen] = (0, import_react13.useState)(false);
+  const [actionsOpen, setActionsOpen] = (0, import_react13.useState)(false);
+  const [settingsOpen, setSettingsOpen] = (0, import_react13.useState)(false);
+  const [searchResultsOpen, setSearchResultsOpen] = (0, import_react13.useState)(false);
+  const [pageJumpOpen, setPageJumpOpen] = (0, import_react13.useState)(false);
+  const isDark = uiTheme === "dark";
+  import_react13.default.useEffect(() => {
+    const showSubscription = import_react_native18.Keyboard.addListener("keyboardDidShow", () => {
       setMobileKeyboardOpen(true);
     });
-    const hideSubscription = import_react_native17.Keyboard.addListener("keyboardDidHide", () => {
+    const hideSubscription = import_react_native18.Keyboard.addListener("keyboardDidHide", () => {
       setMobileKeyboardOpen(false);
     });
     return () => {
@@ -29695,7 +29905,7 @@ function ReadingShell({
       hideSubscription.remove();
     };
   }, [setMobileKeyboardOpen]);
-  import_react11.default.useEffect(() => {
+  import_react13.default.useEffect(() => {
     if (sidebarRightOpen) return;
     if (isSidebarBoundDestination(activeMobileDestination)) {
       closeMobileDestination();
@@ -29736,8 +29946,13 @@ function ReadingShell({
       setActionsOpen(true);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native17.View, { style: styles17.container, testID: "papyrus-rn-reading-shell", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  const navigateToPage = (page) => {
+    engine.goToPage(page);
+    setDocumentState({ currentPage: page });
+    triggerScrollToPage(page - 1);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native18.View, { style: styles18.container, testID: "papyrus-rn-reading-shell", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       Topbar_default,
       {
         engine,
@@ -29749,20 +29964,22 @@ function ReadingShell({
           setSettingsOpen(false);
           setOverflowOpen(true);
         },
+        onOpenPageJump: () => setPageJumpOpen(true),
         showPageNavigationControls: false
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native17.View, { style: styles17.viewerStage, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Viewer_default, { engine, ...viewerProps }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native18.View, { style: styles18.viewerStage, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Viewer_default, { engine, ...viewerProps }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       ProgressPill,
       {
         documentType,
         onPress: () => openDestination(
           documentType === "pdf" ? "pages" : documentType === "epub" ? "contents" : "progress"
-        )
+        ),
+        onOpenPageJump: () => setPageJumpOpen(true)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       BottomBar_default,
       {
         documentType,
@@ -29771,7 +29988,7 @@ function ReadingShell({
         onOpenSettings: () => openDestination("display")
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       SearchOverlay,
       {
         engine,
@@ -29784,7 +30001,7 @@ function ReadingShell({
         onOpenResults: () => setSearchResultsOpen(true)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       SearchResultsSheet,
       {
         documentType,
@@ -29792,15 +30009,16 @@ function ReadingShell({
         onClose: () => setSearchResultsOpen(false)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       RightSheet_default,
       {
         engine,
         documentType,
-        thumbsInitialCount
+        thumbsInitialCount,
+        onOpenPageJump: () => setPageJumpOpen(true)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       OverflowSheet,
       {
         visible: overflowOpen,
@@ -29814,7 +30032,7 @@ function ReadingShell({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       InfoSheet,
       {
         visible: infoOpen,
@@ -29826,7 +30044,7 @@ function ReadingShell({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       DocumentActionsSheet,
       {
         visible: actionsOpen,
@@ -29836,7 +30054,7 @@ function ReadingShell({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       SettingsSheet_default,
       {
         engine,
@@ -29846,10 +30064,22 @@ function ReadingShell({
           closeMobileDestination();
         }
       }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      PageJumpModal,
+      {
+        visible: pageJumpOpen,
+        currentPage,
+        pageCount,
+        isDark,
+        accentColor,
+        onClose: () => setPageJumpOpen(false),
+        onConfirm: navigateToPage
+      }
     )
   ] });
 }
-var styles17 = import_react_native17.StyleSheet.create({
+var styles18 = import_react_native18.StyleSheet.create({
   container: {
     flex: 1
   },
@@ -29865,6 +30095,7 @@ var styles17 = import_react_native17.StyleSheet.create({
   CoverPreview,
   DocumentActionsSheet,
   InfoSheet,
+  MOBILE_CHROME_METRICS,
   OverflowSheet,
   PageRenderer,
   ProgressPill,