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

package/dist/index.mjs

@@ -21576,7 +21576,7 @@ var PageRenderer = ({
         createdAt: Date.now()
       });
     },
-    [addAnnotation, annotationColor, pageIndex]
+    [addAnnotation, annotationColor, logSelectionPerf, pageIndex]
   );
   const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
   const getBoundsFromRects = (rects) => {
@@ -24474,15 +24474,8 @@ var styles3 = StyleSheet3.create({
 var Viewer_default = Viewer;
 
 // components/Topbar.tsx
-import { useEffect as useEffect4, useState as useState3 } from "react";
-import {
-  View as View4,
-  Text,
-  Pressable as Pressable2,
-  StyleSheet as StyleSheet4,
-  Modal,
-  TextInput
-} from "react-native";
+import { useState as useState4 } from "react";
+import { View as View5, Text as Text2, Pressable as Pressable3, StyleSheet as StyleSheet5 } from "react-native";
 import { useViewerStore as useViewerStore4 } from "@papyrus-sdk/core";
 
 // icons.tsx
@@ -24825,7 +24818,9 @@ var IconToolInk = ({
     }
   ),
   /* @__PURE__ */ jsx4(Rect, { x: "11", y: "52", width: "16", height: "2", fill: "url(#penBand)" }),
+  /* @__PURE__ */ jsx4(Rect, { x: "11", y: "52", width: "16", height: "2", fill: color, opacity: "0.78" }),
   /* @__PURE__ */ jsx4(Rect, { x: "15", y: "4", width: "8", height: "10", rx: "0.8", fill: "url(#penCap)" }),
+  /* @__PURE__ */ jsx4(Rect, { x: "15", y: "4", width: "8", height: "10", rx: "0.8", fill: color, opacity: "0.72" }),
   /* @__PURE__ */ jsx4(Path, { d: "M18.55 4.6h.9L26.2 40H11.8l6.75-35.4Z", fill: "rgba(255,255,255,0.05)" }),
   /* @__PURE__ */ jsx4(Rect, { x: "11", y: "52", width: "16", height: "2", fill: color, opacity: "0.35" })
 ] });
@@ -24863,7 +24858,15 @@ var IconToolHighlighter = ({
   ),
   /* @__PURE__ */ jsx4(Rect, { x: "7", y: "51.35", width: "24", height: "35", rx: "1.6", fill: "url(#markerBody)" }),
   /* @__PURE__ */ jsx4(Rect, { x: "7", y: "51.35", width: "24", height: "11", rx: "0.8", fill: "url(#markerMetal)" }),
-  /* @__PURE__ */ jsx4(Rect, { x: "7", y: "51.35", width: "24", height: "11", rx: "0.8", fill: color, opacity: "0.28" })
+  /* @__PURE__ */ jsx4(Rect, { x: "7", y: "51.35", width: "24", height: "11", rx: "0.8", fill: color, opacity: "0.78" }),
+  /* @__PURE__ */ jsx4(
+    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,
@@ -24898,6 +24901,7 @@ var IconToolUnderline = ({
   /* @__PURE__ */ jsx4(Path, { d: "M8 43.88v-1L15 16.88h8l7 26v1H8Z", fill: "url(#pencilBodyTop)" }),
   /* @__PURE__ */ jsx4(Path, { d: "M8 42.88h22v43H8v-43Z", fill: "url(#pencilBodyBottom)" }),
   /* @__PURE__ */ jsx4(Rect, { x: "8", y: "50.88", width: "22", height: "2", fill: "url(#pencilMetal)" }),
+  /* @__PURE__ */ jsx4(Rect, { x: "8", y: "50.88", width: "22", height: "2", fill: color, opacity: "0.78" }),
   /* @__PURE__ */ jsx4(
     Path,
     {
@@ -24905,6 +24909,14 @@ var IconToolUnderline = ({
       fill: "url(#pencilTip)"
     }
   ),
+  /* @__PURE__ */ jsx4(
+    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__ */ jsx4(Rect, { x: "8", y: "50.88", width: "22", height: "2", fill: color, opacity: "0.3" })
 ] });
 var IconToolSquiggly = ({
@@ -24975,8 +24987,188 @@ var IconToolNote = ({
   /* @__PURE__ */ jsx4(Line, { x1: "15", y1: "18.2", x2: "19.2", y2: "18.2", stroke: color, strokeWidth: "1.8", strokeLinecap: "round" })
 ] });
 
+// 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
+import { useEffect as useEffect4, useState as useState3 } from "react";
+import { Modal, Pressable as Pressable2, StyleSheet as StyleSheet4, Text, TextInput, View as View4 } from "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
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function PageJumpModal({
+  visible,
+  currentPage,
+  pageCount,
+  isDark,
+  accentColor,
+  onClose,
+  onConfirm
+}) {
+  const [value, setValue] = useState3(`${currentPage}`);
+  useEffect4(() => {
+    if (visible) setValue(`${currentPage}`);
+  }, [currentPage, visible]);
+  const confirmJump = () => {
+    const targetPage = resolvePageJumpTarget(value, pageCount);
+    if (targetPage) onConfirm(targetPage);
+    onClose();
+  };
+  return /* @__PURE__ */ jsx5(
+    Modal,
+    {
+      visible,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ jsx5(Pressable2, { style: styles4.backdrop, onPress: onClose, children: /* @__PURE__ */ jsxs5(
+        Pressable2,
+        {
+          style: [styles4.card, isDark && styles4.cardDark],
+          onPress: (event) => event.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx5(Text, { style: [styles4.title, isDark && styles4.titleDark], children: "Ir para pagina" }),
+            /* @__PURE__ */ jsx5(
+              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__ */ jsxs5(View4, { style: styles4.actions, children: [
+              /* @__PURE__ */ jsx5(
+                Pressable2,
+                {
+                  onPress: onClose,
+                  style: [
+                    styles4.actionButton,
+                    styles4.actionCancel,
+                    isDark && styles4.actionCancelDark
+                  ],
+                  children: /* @__PURE__ */ jsx5(Text, { style: [styles4.actionText, isDark && styles4.actionTextDark], children: "Cancelar" })
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                Pressable2,
+                {
+                  onPress: confirmJump,
+                  style: [styles4.actionButton, { backgroundColor: accentColor }],
+                  children: /* @__PURE__ */ jsx5(Text, { style: [styles4.actionText, styles4.actionTextPrimary], children: "Ir" })
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    }
+  );
+}
+var styles4 = StyleSheet4.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
-import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var Topbar = ({
   engine,
   onOpenSettings,
@@ -24985,7 +25177,8 @@ var Topbar = ({
   logo,
   onLogoPress,
   logoAccessibilityLabel = "Logo",
-  showPageNavigationControls = false
+  showPageNavigationControls = false,
+  onOpenPageJump
 }) => {
   const {
     currentPage,
@@ -24996,17 +25189,9 @@ var Topbar = ({
     accentColor,
     mobileChromeVisible
   } = useViewerStore4();
-  const [pageLabel, setPageLabel] = useState3(`${currentPage}`);
-  const [jumpModalOpen, setJumpModalOpen] = useState3(false);
-  const [jumpValue, setJumpValue] = useState3(`${currentPage}`);
+  const [jumpModalOpen, setJumpModalOpen] = useState4(false);
   const isDark = uiTheme === "dark";
   const navIconColor = isDark ? "#e5e7eb" : "#111827";
-  useEffect4(() => {
-    setPageLabel(`${currentPage}`);
-    if (!jumpModalOpen) {
-      setJumpValue(`${currentPage}`);
-    }
-  }, [currentPage, jumpModalOpen]);
   const navigateToPage = (targetPage) => {
     const next = Math.max(1, Math.min(pageCount, targetPage));
     engine.goToPage(next);
@@ -25017,73 +25202,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__ */ jsx5(View4, { style: [styles4.logoBadge, { backgroundColor: accentColor }], children: /* @__PURE__ */ jsx5(Text, { style: styles4.logoText, children: "P" }) });
+  const defaultLogo = /* @__PURE__ */ jsx6(View5, { style: [styles5.logoBadge, { backgroundColor: accentColor }], children: /* @__PURE__ */ jsx6(Text2, { style: styles5.logoText, children: "P" }) });
   const logoElement = logo ?? defaultLogo;
   if (!mobileChromeVisible) return null;
-  return /* @__PURE__ */ jsxs5(Fragment, { children: [
-    /* @__PURE__ */ jsx5(
-      View4,
+  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx6(
+      View5,
       {
-        style: [styles4.chromeFrame],
+        style: [styles5.chromeFrame],
         pointerEvents: "box-none",
         testID: "papyrus-floating-top-controls",
-        children: /* @__PURE__ */ jsxs5(View4, { style: [styles4.container, isDark && styles4.containerDark], children: [
-          /* @__PURE__ */ jsxs5(View4, { style: styles4.leftGroup, children: [
-            onLogoPress ? /* @__PURE__ */ jsx5(
-              Pressable2,
+        children: /* @__PURE__ */ jsxs6(View5, { style: [styles5.container, isDark && styles5.containerDark], children: [
+          /* @__PURE__ */ jsxs6(View5, { style: styles5.leftGroup, children: [
+            onLogoPress ? /* @__PURE__ */ jsx6(
+              Pressable3,
               {
                 onPress: onLogoPress,
                 accessibilityRole: "button",
                 accessibilityLabel: logoAccessibilityLabel,
-                style: styles4.logoSlot,
+                style: styles5.logoSlot,
                 children: logoElement
               }
-            ) : /* @__PURE__ */ jsx5(View4, { style: styles4.logoSlot, children: logoElement }),
-            /* @__PURE__ */ jsx5(
-              Text,
+            ) : /* @__PURE__ */ jsx6(View5, { style: styles5.logoSlot, children: logoElement }),
+            /* @__PURE__ */ jsx6(
+              Pressable3,
               {
-                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__ */ jsx6(
+                  Text2,
+                  {
+                    numberOfLines: 1,
+                    style: [styles5.brandText, isDark && styles5.brandTextDark],
+                    children: title ?? "Papyrus"
+                  }
+                )
               }
             )
           ] }),
-          showPageNavigationControls ? /* @__PURE__ */ jsx5(View4, { style: styles4.pageGroup, children: /* @__PURE__ */ jsxs5(Fragment, { children: [
-            /* @__PURE__ */ jsx5(
-              Pressable2,
+          showPageNavigationControls ? /* @__PURE__ */ jsx6(View5, { style: styles5.pageGroup, children: /* @__PURE__ */ jsxs6(Fragment, { children: [
+            /* @__PURE__ */ jsx6(
+              Pressable3,
               {
                 onPress: () => handlePageChange(-1),
-                style: [styles4.pageButton, isDark && styles4.pageButtonDark],
-                children: /* @__PURE__ */ jsx5(IconChevronLeft, { size: 16, color: navIconColor })
+                style: [styles5.pageButton, isDark && styles5.pageButtonDark],
+                children: /* @__PURE__ */ jsx6(
+                  IconChevronLeft,
+                  {
+                    size: MOBILE_CHROME_METRICS.iconSize,
+                    color: navIconColor
+                  }
+                )
               }
             ),
-            /* @__PURE__ */ jsx5(
-              Pressable2,
+            /* @__PURE__ */ jsx6(
+              Pressable3,
               {
                 onPress: openJumpModal,
-                style: styles4.pageIndicatorHit,
+                style: styles5.pageIndicatorHit,
                 accessibilityLabel: "Page jump",
-                children: /* @__PURE__ */ jsxs5(
-                  Text,
+                children: /* @__PURE__ */ jsxs6(
+                  Text2,
                   {
                     style: [
-                      styles4.pageIndicator,
-                      isDark && styles4.pageIndicatorDark
+                      styles5.pageIndicator,
+                      isDark && styles5.pageIndicatorDark
                     ],
                     children: [
-                      pageLabel,
+                      currentPage,
                       "/",
                       pageCount
                     ]
@@ -25091,123 +25285,57 @@ var Topbar = ({
                 )
               }
             ),
-            /* @__PURE__ */ jsx5(
-              Pressable2,
+            /* @__PURE__ */ jsx6(
+              Pressable3,
               {
                 onPress: () => handlePageChange(1),
-                style: [styles4.pageButton, isDark && styles4.pageButtonDark],
-                children: /* @__PURE__ */ jsx5(IconChevronRight, { size: 16, color: navIconColor })
+                style: [styles5.pageButton, isDark && styles5.pageButtonDark],
+                children: /* @__PURE__ */ jsx6(
+                  IconChevronRight,
+                  {
+                    size: MOBILE_CHROME_METRICS.iconSize,
+                    color: navIconColor
+                  }
+                )
               }
             )
           ] }) }) : null,
-          /* @__PURE__ */ jsx5(View4, { style: styles4.rightGroup, children: /* @__PURE__ */ jsx5(
-            Pressable2,
+          /* @__PURE__ */ jsx6(View5, { style: styles5.rightGroup, children: /* @__PURE__ */ jsx6(
+            Pressable3,
             {
               onPress: () => onOpenOverflow?.() ?? onOpenSettings?.(),
-              style: [styles4.iconButton, isDark && styles4.iconButtonDark],
+              style: [styles5.iconButton, isDark && styles5.iconButtonDark],
               accessibilityLabel: "Open overflow menu",
-              children: /* @__PURE__ */ jsx5(IconSettings, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
+              children: /* @__PURE__ */ jsx6(
+                IconSettings,
+                {
+                  size: MOBILE_CHROME_METRICS.iconSize,
+                  color: isDark ? "#e5e7eb" : "#111827"
+                }
+              )
             }
           ) })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx5(
-      Modal,
+    /* @__PURE__ */ jsx6(
+      PageJumpModal,
       {
         visible: jumpModalOpen,
-        transparent: true,
-        animationType: "fade",
-        onRequestClose: () => setJumpModalOpen(false),
-        children: /* @__PURE__ */ jsx5(
-          Pressable2,
-          {
-            style: styles4.jumpModalBackdrop,
-            onPress: () => setJumpModalOpen(false),
-            children: /* @__PURE__ */ jsxs5(
-              Pressable2,
-              {
-                style: [styles4.jumpModalCard, isDark && styles4.jumpModalCardDark],
-                onPress: (event) => event.stopPropagation(),
-                children: [
-                  /* @__PURE__ */ jsx5(
-                    Text,
-                    {
-                      style: [
-                        styles4.jumpModalTitle,
-                        isDark && styles4.jumpModalTitleDark
-                      ],
-                      children: "Ir para p\xE1gina"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx5(
-                    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__ */ jsxs5(View4, { style: styles4.jumpActions, children: [
-                    /* @__PURE__ */ jsx5(
-                      Pressable2,
-                      {
-                        onPress: () => setJumpModalOpen(false),
-                        style: [
-                          styles4.jumpActionButton,
-                          styles4.jumpActionCancel,
-                          isDark && styles4.jumpActionCancelDark
-                        ],
-                        children: /* @__PURE__ */ jsx5(
-                          Text,
-                          {
-                            style: [
-                              styles4.jumpActionText,
-                              isDark && styles4.jumpActionTextDark
-                            ],
-                            children: "Cancelar"
-                          }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsx5(
-                      Pressable2,
-                      {
-                        onPress: confirmJump,
-                        style: [
-                          styles4.jumpActionButton,
-                          { backgroundColor: accentColor }
-                        ],
-                        children: /* @__PURE__ */ jsx5(
-                          Text,
-                          {
-                            style: [styles4.jumpActionText, styles4.jumpActionTextPrimary],
-                            children: "Ir"
-                          }
-                        )
-                      }
-                    )
-                  ] })
-                ]
-              }
-            )
-          }
-        )
+        currentPage,
+        pageCount,
+        isDark,
+        accentColor,
+        onClose: () => setJumpModalOpen(false),
+        onConfirm: navigateToPage
       }
     )
   ] });
 };
-var styles4 = StyleSheet4.create({
+var styles5 = StyleSheet5.create({
   container: {
-    marginHorizontal: 12,
+    width: "100%",
+    maxWidth: MOBILE_CHROME_METRICS.maxFloatingWidth,
     marginTop: 10,
     paddingHorizontal: 14,
     paddingVertical: 10,
@@ -25232,7 +25360,9 @@ var styles4 = StyleSheet4.create({
     top: 0,
     left: 0,
     right: 0,
-    zIndex: 20
+    zIndex: 20,
+    paddingHorizontal: MOBILE_CHROME_METRICS.screenPadding,
+    alignItems: "center"
   },
   leftGroup: {
     flexDirection: "row",
@@ -25267,6 +25397,12 @@ var styles4 = StyleSheet4.create({
   brandTextDark: {
     color: "#f9fafb"
   },
+  titleHit: {
+    flexShrink: 1,
+    flexGrow: 1,
+    minWidth: 0,
+    borderRadius: 8
+  },
   pageGroup: {
     flexDirection: "row",
     alignItems: "center",
@@ -25274,8 +25410,8 @@ var styles4 = StyleSheet4.create({
     justifyContent: "center"
   },
   pageButton: {
-    width: 26,
-    height: 26,
+    width: MOBILE_CHROME_METRICS.topbarPageButtonSize,
+    height: MOBILE_CHROME_METRICS.topbarPageButtonSize,
     borderRadius: 10,
     alignItems: "center",
     justifyContent: "center",
@@ -25345,90 +25481,17 @@ var styles4 = StyleSheet4.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
-import React5, { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4, useState as useState4 } from "react";
+import React6, { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
 import {
-  View as View5,
-  Text as Text2,
-  Pressable as Pressable3,
-  StyleSheet as StyleSheet5,
+  View as View6,
+  Text as Text3,
+  Pressable as Pressable4,
+  StyleSheet as StyleSheet6,
   ScrollView as ScrollView3,
   useWindowDimensions as useWindowDimensions3
 } from "react-native";
@@ -25564,9 +25627,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
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var COLOR_SWATCHES = [
   "#fbbf24",
   "#f97316",
@@ -25616,10 +25697,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) {
@@ -25640,14 +25718,14 @@ var getToolVisual = (toolId) => {
       return { width: 24, iconSize: 28, offsetY: 6 };
   }
 };
-var OpacitySlider = React5.memo(function OpacitySlider2({
+var OpacitySlider = React6.memo(function OpacitySlider2({
   value,
   color,
   isDark,
   onCommit
 }) {
-  const [trackWidth, setTrackWidth] = useState4(0);
-  const [draftValue, setDraftValue] = useState4(value);
+  const [trackWidth, setTrackWidth] = useState5(0);
+  const [draftValue, setDraftValue] = useState5(value);
   const dragValueRef = useRef4(draftValue);
   const isDraggingRef = useRef4(false);
   const frameRef = useRef4(null);
@@ -25694,10 +25772,10 @@ var OpacitySlider = React5.memo(function OpacitySlider2({
     setDraftValue(next);
     onCommit(next);
   };
-  return /* @__PURE__ */ jsx6(View5, { style: styles5.opacitySliderWrap, children: /* @__PURE__ */ jsxs6(
-    View5,
+  return /* @__PURE__ */ jsx7(View6, { style: styles6.opacitySliderWrap, children: /* @__PURE__ */ jsxs7(
+    View6,
     {
-      style: styles5.opacityTouchSurface,
+      style: styles6.opacityTouchSurface,
       onLayout: (event) => setTrackWidth(event.nativeEvent.layout.width),
       onStartShouldSetResponder: () => true,
       onMoveShouldSetResponder: () => true,
@@ -25706,12 +25784,12 @@ var OpacitySlider = React5.memo(function OpacitySlider2({
       onResponderRelease: commitDraft,
       onResponderTerminate: () => commitDraft(),
       children: [
-        /* @__PURE__ */ jsx6(View5, { style: styles5.opacityTrack }),
-        /* @__PURE__ */ jsx6(
-          View5,
+        /* @__PURE__ */ jsx7(View6, { style: styles6.opacityTrack }),
+        /* @__PURE__ */ jsx7(
+          View6,
           {
             style: [
-              styles5.opacityTrackFill,
+              styles6.opacityTrackFill,
               {
                 width: fillWidth,
                 backgroundColor: withInkAlpha(color, 0.92)
@@ -25719,11 +25797,11 @@ var OpacitySlider = React5.memo(function OpacitySlider2({
             ]
           }
         ),
-        /* @__PURE__ */ jsx6(
-          View5,
+        /* @__PURE__ */ jsx7(
+          View6,
           {
             style: [
-              styles5.opacityThumb,
+              styles6.opacityThumb,
               {
                 left: thumbOffset,
                 borderColor: isDark ? "#0f172a" : "#ffffff"
@@ -25756,8 +25834,8 @@ var ToolDock = () => {
     undoAnnotations,
     redoAnnotations
   } = useViewerStore5();
-  const [paletteExpanded, setPaletteExpanded] = useState4(false);
-  const [extrasExpanded, setExtrasExpanded] = useState4(false);
+  const [paletteExpanded, setPaletteExpanded] = useState5(false);
+  const [extrasExpanded, setExtrasExpanded] = useState5(false);
   const isDark = uiTheme === "dark";
   const { width: windowWidth } = useWindowDimensions3();
   const t = getStrings(locale);
@@ -25835,22 +25913,29 @@ var ToolDock = () => {
     const Icon = tool.icon;
     const visual = getToolVisual(tool.id);
     const baseIconColor = getToolAccentColor(tool, isDark);
-    return /* @__PURE__ */ jsx6(
-      Pressable3,
+    const iconColor2 = resolveToolDockIconColor({
+      toolId: tool.id,
+      isSelected,
+      annotationColor,
+      accentColor,
+      baseIconColor
+    });
+    return /* @__PURE__ */ jsx7(
+      Pressable4,
       {
         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__ */ jsx6(
-          View5,
+        children: /* @__PURE__ */ jsx7(
+          View6,
           {
             style: [
-              compact ? styles5.compactToolIconWrap : styles5.toolIconWrap,
+              compact ? styles6.compactToolIconWrap : styles6.toolIconWrap,
               {
                 transform: [
                   { translateY: compact ? 4 : visual.offsetY },
@@ -25859,11 +25944,11 @@ var ToolDock = () => {
                 opacity: isSelected ? 1 : 0.92
               }
             ],
-            children: /* @__PURE__ */ jsx6(
+            children: /* @__PURE__ */ jsx7(
               Icon,
               {
                 size: compact ? 34 : visual.iconSize,
-                color: isSelected ? accentColor : baseIconColor
+                color: iconColor2
               }
             )
           }
@@ -25872,35 +25957,35 @@ var ToolDock = () => {
       tool.id
     );
   };
-  return /* @__PURE__ */ jsx6(View5, { pointerEvents: "box-none", style: styles5.root, children: toolDockOpen ? /* @__PURE__ */ jsxs6(View5, { style: styles5.stack, children: [
-    paletteExpanded ? /* @__PURE__ */ jsx6(
-      View5,
+  return /* @__PURE__ */ jsx7(View6, { pointerEvents: "box-none", style: styles6.root, children: toolDockOpen ? /* @__PURE__ */ jsxs7(View6, { style: styles6.stack, children: [
+    paletteExpanded ? /* @__PURE__ */ jsx7(
+      View6,
       {
         style: [
-          styles5.popup,
+          styles6.popup,
           {
             backgroundColor: panelColor,
             borderColor
           }
         ],
-        children: /* @__PURE__ */ jsx6(View5, { style: styles5.swatchRow, children: COLOR_SWATCHES.map((color) => {
+        children: /* @__PURE__ */ jsx7(View6, { style: styles6.swatchRow, children: COLOR_SWATCHES.map((color) => {
           const isSelected = annotationColor === color;
-          return /* @__PURE__ */ jsx6(
-            Pressable3,
+          return /* @__PURE__ */ jsx7(
+            Pressable4,
             {
               onPress: () => setAnnotationColor(color),
               style: [
-                styles5.swatchOuter,
+                styles6.swatchOuter,
                 {
                   borderColor: isSelected ? accentColor : "transparent",
                   backgroundColor: isSelected ? `${accentColor}12` : "transparent"
                 }
               ],
-              children: /* @__PURE__ */ jsx6(
-                View5,
+              children: /* @__PURE__ */ jsx7(
+                View6,
                 {
                   style: [
-                    styles5.swatch,
+                    styles6.swatch,
                     {
                       backgroundColor: color,
                       borderColor: color === "#f3f4f6" ? "#d1d5db" : "transparent"
@@ -25914,32 +25999,32 @@ var ToolDock = () => {
         }) })
       }
     ) : null,
-    inkSettingsExpanded ? /* @__PURE__ */ jsxs6(
-      View5,
+    inkSettingsExpanded ? /* @__PURE__ */ jsxs7(
+      View6,
       {
         style: [
-          styles5.popup,
-          styles5.inkPopup,
+          styles6.popup,
+          styles6.inkPopup,
           {
             backgroundColor: panelColor,
             borderColor
           }
         ],
         children: [
-          /* @__PURE__ */ jsx6(View5, { style: styles5.inkPreviewRow, children: INK_WIDTHS.map((width) => {
+          /* @__PURE__ */ jsx7(View6, { style: styles6.inkPreviewRow, children: INK_WIDTHS.map((width) => {
             const selected = Math.abs(inkStrokeWidth - width) < 5e-4;
-            return /* @__PURE__ */ jsx6(
-              Pressable3,
+            return /* @__PURE__ */ jsx7(
+              Pressable4,
               {
                 onPress: () => setInkStrokeWidth(width),
                 style: [
-                  styles5.inkWidthButton,
+                  styles6.inkWidthButton,
                   selected && {
                     backgroundColor: `${accentColor}12`,
                     borderColor: `${accentColor}30`
                   }
                 ],
-                children: /* @__PURE__ */ jsx6(View5, { style: styles5.inkNib, children: /* @__PURE__ */ jsx6(
+                children: /* @__PURE__ */ jsx7(View6, { style: styles6.inkNib, children: /* @__PURE__ */ jsx7(
                   IconToolInk,
                   {
                     size: Math.round(18 + width * 1200),
@@ -25950,7 +26035,7 @@ var ToolDock = () => {
               width
             );
           }) }),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             OpacitySlider,
             {
               value: annotationOpacity,
@@ -25962,106 +26047,106 @@ var ToolDock = () => {
         ]
       }
     ) : null,
-    extrasExpanded ? /* @__PURE__ */ jsx6(
-      View5,
+    extrasExpanded ? /* @__PURE__ */ jsx7(
+      View6,
       {
         style: [
-          styles5.popup,
-          styles5.extrasPopup,
+          styles6.popup,
+          styles6.extrasPopup,
           {
             backgroundColor: panelColor,
             borderColor
           }
         ],
-        children: /* @__PURE__ */ jsx6(View5, { style: styles5.compactToolsRow, children: EXTRA_TOOLS.map((tool) => renderToolButton(tool, true)) })
+        children: /* @__PURE__ */ jsx7(View6, { style: styles6.compactToolsRow, children: EXTRA_TOOLS.map((tool) => renderToolButton(tool, true)) })
       }
     ) : null,
-    /* @__PURE__ */ jsx6(
-      View5,
+    /* @__PURE__ */ jsx7(
+      View6,
       {
         style: [
-          styles5.container,
+          styles6.container,
           {
             backgroundColor: panelColor,
             borderColor
           }
         ],
-        children: primaryToolsRowIsScrollable ? /* @__PURE__ */ jsx6(
+        children: primaryToolsRowIsScrollable ? /* @__PURE__ */ jsx7(
           ScrollView3,
           {
             horizontal: true,
             bounces: false,
             showsHorizontalScrollIndicator: false,
-            style: styles5.primaryToolsScrollView,
+            style: styles6.primaryToolsScrollView,
             contentContainerStyle: [
-              styles5.primaryToolsRow,
-              styles5.primaryToolsRowScrollableContent
+              styles6.primaryToolsRow,
+              styles6.primaryToolsRowScrollableContent
             ],
-            children: /* @__PURE__ */ jsxs6(View5, { style: styles5.primaryToolsRowInner, children: [
-              /* @__PURE__ */ jsxs6(View5, { style: styles5.historyGroup, children: [
-                /* @__PURE__ */ jsx6(
-                  Pressable3,
+            children: /* @__PURE__ */ jsxs7(View6, { style: styles6.primaryToolsRowInner, children: [
+              /* @__PURE__ */ jsxs7(View6, { style: styles6.historyGroup, children: [
+                /* @__PURE__ */ jsx7(
+                  Pressable4,
                   {
                     onPress: undoAnnotations,
                     disabled: !canUndo,
                     style: [
-                      styles5.utilityButton,
-                      styles5.historyButton,
+                      styles6.utilityButton,
+                      styles6.historyButton,
                       { backgroundColor: buttonColor },
-                      !canUndo && styles5.disabledButton
+                      !canUndo && styles6.disabledButton
                     ],
-                    children: /* @__PURE__ */ jsx6(
+                    children: /* @__PURE__ */ jsx7(
                       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__ */ jsx6(
-                  Pressable3,
+                /* @__PURE__ */ jsx7(
+                  Pressable4,
                   {
                     onPress: redoAnnotations,
                     disabled: !canRedo,
                     style: [
-                      styles5.utilityButton,
-                      styles5.historyButton,
+                      styles6.utilityButton,
+                      styles6.historyButton,
                       { backgroundColor: buttonColor },
-                      !canRedo && styles5.disabledButton
+                      !canRedo && styles6.disabledButton
                     ],
-                    children: /* @__PURE__ */ jsx6(
+                    children: /* @__PURE__ */ jsx7(
                       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__ */ jsx6(View5, { style: styles5.toolsGroup, children: PRIMARY_TOOLS.map((tool) => renderToolButton(tool)) }),
-              /* @__PURE__ */ jsxs6(View5, { style: styles5.controlsGroup, children: [
-                /* @__PURE__ */ jsx6(
-                  Pressable3,
+              /* @__PURE__ */ jsx7(View6, { style: styles6.toolsGroup, children: PRIMARY_TOOLS.map((tool) => renderToolButton(tool)) }),
+              /* @__PURE__ */ jsxs7(View6, { style: styles6.controlsGroup, children: [
+                /* @__PURE__ */ jsx7(
+                  Pressable4,
                   {
                     onPress: () => {
                       setExtrasExpanded((value) => !value);
                       setPaletteExpanded(false);
                     },
                     style: [
-                      styles5.utilityButton,
+                      styles6.utilityButton,
                       {
                         backgroundColor: extrasExpanded ? `${accentColor}12` : buttonColor
                       }
                     ],
-                    children: /* @__PURE__ */ jsx6(
-                      Text2,
+                    children: /* @__PURE__ */ jsx7(
+                      Text3,
                       {
                         style: [
-                          styles5.utilityLabel,
+                          styles6.utilityLabel,
                           { color: extrasExpanded ? accentColor : utilityIconColor }
                         ],
                         children: "+"
@@ -26069,15 +26154,15 @@ var ToolDock = () => {
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx6(
-                  Pressable3,
+                /* @__PURE__ */ jsx7(
+                  Pressable4,
                   {
                     onPress: () => {
                       setPaletteExpanded((value) => !value);
                       setExtrasExpanded(false);
                     },
-                    style: styles5.colorButton,
-                    children: /* @__PURE__ */ jsx6(
+                    style: styles6.colorButton,
+                    children: /* @__PURE__ */ jsx7(
                       IconColorRing,
                       {
                         size: 30,
@@ -26087,8 +26172,8 @@ var ToolDock = () => {
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx6(
-                  Pressable3,
+                /* @__PURE__ */ jsx7(
+                  Pressable4,
                   {
                     onPress: () => setDocumentState(
                       getToolDockDismissState({
@@ -26097,10 +26182,10 @@ var ToolDock = () => {
                       })
                     ),
                     style: [
-                      styles5.utilityButton,
+                      styles6.utilityButton,
                       { backgroundColor: buttonColor }
                     ],
-                    children: /* @__PURE__ */ jsx6(
+                    children: /* @__PURE__ */ jsx7(
                       IconClose,
                       {
                         size: 15,
@@ -26113,71 +26198,71 @@ var ToolDock = () => {
               ] })
             ] })
           }
-        ) : /* @__PURE__ */ jsxs6(View5, { style: styles5.primaryToolsRow, children: [
-          /* @__PURE__ */ jsxs6(View5, { style: styles5.historyGroup, children: [
-            /* @__PURE__ */ jsx6(
-              Pressable3,
+        ) : /* @__PURE__ */ jsxs7(View6, { style: styles6.primaryToolsRow, children: [
+          /* @__PURE__ */ jsxs7(View6, { style: styles6.historyGroup, children: [
+            /* @__PURE__ */ jsx7(
+              Pressable4,
               {
                 onPress: undoAnnotations,
                 disabled: !canUndo,
                 style: [
-                  styles5.utilityButton,
-                  styles5.historyButton,
+                  styles6.utilityButton,
+                  styles6.historyButton,
                   { backgroundColor: buttonColor },
-                  !canUndo && styles5.disabledButton
+                  !canUndo && styles6.disabledButton
                 ],
-                children: /* @__PURE__ */ jsx6(
+                children: /* @__PURE__ */ jsx7(
                   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__ */ jsx6(
-              Pressable3,
+            /* @__PURE__ */ jsx7(
+              Pressable4,
               {
                 onPress: redoAnnotations,
                 disabled: !canRedo,
                 style: [
-                  styles5.utilityButton,
-                  styles5.historyButton,
+                  styles6.utilityButton,
+                  styles6.historyButton,
                   { backgroundColor: buttonColor },
-                  !canRedo && styles5.disabledButton
+                  !canRedo && styles6.disabledButton
                 ],
-                children: /* @__PURE__ */ jsx6(
+                children: /* @__PURE__ */ jsx7(
                   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__ */ jsx6(View5, { style: styles5.toolsGroup, children: PRIMARY_TOOLS.map((tool) => renderToolButton(tool)) }),
-          /* @__PURE__ */ jsxs6(View5, { style: styles5.controlsGroup, children: [
-            /* @__PURE__ */ jsx6(
-              Pressable3,
+          /* @__PURE__ */ jsx7(View6, { style: styles6.toolsGroup, children: PRIMARY_TOOLS.map((tool) => renderToolButton(tool)) }),
+          /* @__PURE__ */ jsxs7(View6, { style: styles6.controlsGroup, children: [
+            /* @__PURE__ */ jsx7(
+              Pressable4,
               {
                 onPress: () => {
                   setExtrasExpanded((value) => !value);
                   setPaletteExpanded(false);
                 },
                 style: [
-                  styles5.utilityButton,
+                  styles6.utilityButton,
                   {
                     backgroundColor: extrasExpanded ? `${accentColor}12` : buttonColor
                   }
                 ],
-                children: /* @__PURE__ */ jsx6(
-                  Text2,
+                children: /* @__PURE__ */ jsx7(
+                  Text3,
                   {
                     style: [
-                      styles5.utilityLabel,
+                      styles6.utilityLabel,
                       { color: extrasExpanded ? accentColor : utilityIconColor }
                     ],
                     children: "+"
@@ -26185,15 +26270,15 @@ var ToolDock = () => {
                 )
               }
             ),
-            /* @__PURE__ */ jsx6(
-              Pressable3,
+            /* @__PURE__ */ jsx7(
+              Pressable4,
               {
                 onPress: () => {
                   setPaletteExpanded((value) => !value);
                   setExtrasExpanded(false);
                 },
-                style: styles5.colorButton,
-                children: /* @__PURE__ */ jsx6(
+                style: styles6.colorButton,
+                children: /* @__PURE__ */ jsx7(
                   IconColorRing,
                   {
                     size: 30,
@@ -26203,8 +26288,8 @@ var ToolDock = () => {
                 )
               }
             ),
-            /* @__PURE__ */ jsx6(
-              Pressable3,
+            /* @__PURE__ */ jsx7(
+              Pressable4,
               {
                 onPress: () => setDocumentState(
                   getToolDockDismissState({
@@ -26212,8 +26297,8 @@ var ToolDock = () => {
                     interactionMode
                   })
                 ),
-                style: [styles5.utilityButton, { backgroundColor: buttonColor }],
-                children: /* @__PURE__ */ jsx6(
+                style: [styles6.utilityButton, { backgroundColor: buttonColor }],
+                children: /* @__PURE__ */ jsx7(
                   IconClose,
                   {
                     size: 15,
@@ -26229,17 +26314,17 @@ var ToolDock = () => {
     )
   ] }) : null });
 };
-var styles5 = StyleSheet5.create({
+var styles6 = StyleSheet6.create({
   root: {
-    ...StyleSheet5.absoluteFillObject,
+    ...StyleSheet6.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: {
@@ -26249,7 +26334,7 @@ var styles5 = StyleSheet5.create({
     borderWidth: 1,
     paddingLeft: 12,
     paddingRight: 12,
-    paddingTop: 8,
+    paddingTop: MOBILE_CHROME_METRICS.toolDockPaddingTop,
     paddingBottom: 2,
     justifyContent: "center",
     overflow: "hidden",
@@ -26302,7 +26387,7 @@ var styles5 = StyleSheet5.create({
   historyGroup: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
+    gap: MOBILE_CHROME_METRICS.toolDockHistoryGap,
     width: 82,
     height: 52
   },
@@ -26427,7 +26512,7 @@ var styles5 = StyleSheet5.create({
   },
   historyButton: {},
   disabledButton: {
-    opacity: 0.45
+    opacity: MOBILE_CHROME_METRICS.toolDockDisabledOpacity
   },
   utilityLabel: {
     fontSize: 28,
@@ -26473,23 +26558,33 @@ var withInkAlpha = (hex, alpha) => {
 var ToolDock_default = ToolDock;
 
 // components/RightSheet.tsx
-import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef5, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef5, useState as useState6 } from "react";
 import {
   Dimensions,
-  FlatList as FlatList2,
-  Modal as Modal2,
   Platform as Platform2,
-  Pressable as Pressable4,
-  ScrollView as ScrollView4,
-  StyleSheet as StyleSheet6,
-  Text as Text3,
+  Pressable as Pressable5,
+  StyleSheet as StyleSheet7,
+  Text as Text4,
   UIManager,
-  View as View6,
+  View as View7,
   findNodeHandle as findNodeHandle2
 } from "react-native";
+import BottomSheet, {
+  BottomSheetBackdrop,
+  BottomSheetFlatList,
+  BottomSheetScrollView
+} from "@gorhom/bottom-sheet";
 import { useViewerStore as useViewerStore6 } from "@papyrus-sdk/core";
 import { PapyrusPageView as PapyrusPageView2 } from "@papyrus-sdk/engine-native";
-import { jsx as jsx7, jsxs as jsxs7 } from "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
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var THUMBNAILS_INITIAL_NUM_TO_RENDER = 4;
 var THUMBNAILS_WINDOW_SIZE = 5;
 var THUMBNAILS_MAX_TO_RENDER_PER_BATCH = 6;
@@ -26523,7 +26618,7 @@ var PageThumbnail = ({
   onPress
 }) => {
   const viewRef = useRef5(null);
-  const [layoutReady, setLayoutReady] = useState5(false);
+  const [layoutReady, setLayoutReady] = useState6(false);
   useEffect6(() => {
     if (!layoutReady || !useNativePreview || !shouldRenderPreview) return;
     const viewTag = findNodeHandle2(viewRef.current);
@@ -26544,36 +26639,36 @@ var PageThumbnail = ({
       setLayoutReady(true);
     }
   };
-  return /* @__PURE__ */ jsxs7(
-    Pressable4,
+  return /* @__PURE__ */ jsxs8(
+    Pressable5,
     {
       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__ */ jsx7(
-          View6,
+        /* @__PURE__ */ jsx8(
+          View7,
           {
             onLayout: handleLayout,
-            style: [styles6.thumbFrame, { width: frameWidth, height: frameHeight }],
-            children: useNativePreview && shouldRenderPreview ? /* @__PURE__ */ jsx7(PapyrusPageView2, { ref: viewRef, style: styles6.thumbView }) : /* @__PURE__ */ jsx7(View6, { style: [styles6.thumbFallback, isDark && styles6.thumbFallbackDark], children: /* @__PURE__ */ jsx7(
-              Text3,
+            style: [styles7.thumbFrame, { width: frameWidth, height: frameHeight }],
+            children: useNativePreview && shouldRenderPreview ? /* @__PURE__ */ jsx8(PapyrusPageView2, { ref: viewRef, style: styles7.thumbView }) : /* @__PURE__ */ jsx8(View7, { style: [styles7.thumbFallback, isDark && styles7.thumbFallbackDark], children: /* @__PURE__ */ jsx8(
+              Text4,
               {
                 style: [
-                  styles6.thumbFallbackText,
-                  isDark && styles6.thumbFallbackTextDark
+                  styles7.thumbFallbackText,
+                  isDark && styles7.thumbFallbackTextDark
                 ],
                 children: pageIndex + 1
               }
             ) })
           }
         ),
-        /* @__PURE__ */ jsx7(Text3, { style: [styles6.thumbLabel, isDark && styles6.thumbLabelDark], children: pageIndex + 1 })
+        /* @__PURE__ */ jsx8(Text4, { style: [styles7.thumbLabel, isDark && styles7.thumbLabelDark], children: pageIndex + 1 })
       ]
     }
   );
@@ -26581,21 +26676,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__ */ jsxs7(View6, { children: [
-    /* @__PURE__ */ jsx7(
-      Pressable4,
+  return /* @__PURE__ */ jsxs8(View7, { children: [
+    /* @__PURE__ */ jsx8(
+      Pressable5,
       {
         onPress: () => {
           if (isClickable) onSelect(item.pageIndex);
         },
-        style: [styles6.outlineRow, { paddingLeft: 12 + depth * 12 }],
-        children: /* @__PURE__ */ jsx7(
-          Text3,
+        style: [styles7.outlineRow, { paddingLeft: 12 + depth * 12 }],
+        children: /* @__PURE__ */ jsx8(
+          Text4,
           {
             style: [
-              styles6.outlineText,
-              isDark && styles6.outlineTextDark,
-              !isClickable && styles6.outlineTextMuted
+              styles7.outlineText,
+              isDark && styles7.outlineTextDark,
+              !isClickable && styles7.outlineTextMuted
             ],
             numberOfLines: 2,
             children: item.title || untitledLabel
@@ -26603,7 +26698,7 @@ var OutlineNode = ({ item, depth = 0, isDark, onSelect, untitledLabel }) => {
         )
       }
     ),
-    hasChildren ? item.children.map((child, index) => /* @__PURE__ */ jsx7(
+    hasChildren ? item.children.map((child, index) => /* @__PURE__ */ jsx8(
       OutlineNode,
       {
         item: child,
@@ -26619,7 +26714,8 @@ var OutlineNode = ({ item, depth = 0, isDark, onSelect, untitledLabel }) => {
 var RightSheet = ({
   engine,
   documentType,
-  thumbsInitialCount
+  thumbsInitialCount,
+  onOpenPageJump
 }) => {
   const {
     activeMobileDestination,
@@ -26637,12 +26733,17 @@ var RightSheet = ({
     locale,
     accentColor
   } = useViewerStore6();
-  const [pagesMode, setPagesMode] = useState5(
+  const [pagesMode, setPagesMode] = useState6(
     documentType === "pdf" ? "thumbnails" : "summary"
   );
   const isDark = uiTheme === "dark";
   const t = getStrings(locale);
-  const sheetHeight = Math.min(640, Dimensions.get("window").height * 0.72);
+  const showingNotes = sidebarRightTab === "annotations";
+  const sheetHeight = resolveRightSheetHeight({
+    windowHeight: Dimensions.get("window").height,
+    showingNotes
+  });
+  const snapPoints = useMemo5(() => [sheetHeight], [sheetHeight]);
   const windowWidth = Dimensions.get("window").width;
   const gridGutter = 12;
   const gridPadding = 16;
@@ -26656,8 +26757,8 @@ var RightSheet = ({
   const thumbnailDimensionsCacheRef = useRef5(/* @__PURE__ */ new Map());
   const thumbnailDimensionsPendingRef = useRef5(/* @__PURE__ */ new Set());
   const thumbnailRefreshTimeoutRef = useRef5(null);
-  const [thumbnailLayoutRevision, setThumbnailLayoutRevision] = useState5(0);
-  const [visibleThumbnailPages, setVisibleThumbnailPages] = useState5(
+  const [thumbnailLayoutRevision, setThumbnailLayoutRevision] = useState6(0);
+  const [visibleThumbnailPages, setVisibleThumbnailPages] = useState6(
     () => /* @__PURE__ */ new Set()
   );
   const resolvedThumbsInitialCount = useMemo5(
@@ -26674,7 +26775,6 @@ 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;
@@ -26811,7 +26911,7 @@ var RightSheet = ({
   const renderThumbnailItem = useCallback3(
     ({ item }) => {
       const shouldRenderPreview = useNativePreview && (visibleThumbnailPages.has(item) || item < resolvedThumbsPrewarmCount || Math.abs(item + 1 - currentPage) <= 1);
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx8(
         PageThumbnail,
         {
           engine,
@@ -26844,267 +26944,275 @@ var RightSheet = ({
       zoom
     ]
   );
+  const renderBackdrop = useCallback3(
+    (props) => /* @__PURE__ */ jsx8(
+      BottomSheetBackdrop,
+      {
+        ...props,
+        appearsOnIndex: 0,
+        disappearsOnIndex: -1,
+        opacity: 0.4,
+        pressBehavior: "close"
+      }
+    ),
+    []
+  );
   if (!sidebarRightOpen) return null;
-  return /* @__PURE__ */ jsx7(
-    Modal2,
+  return /* @__PURE__ */ jsx8(View7, { style: styles7.modalRoot, pointerEvents: "box-none", children: /* @__PURE__ */ jsx8(
+    BottomSheet,
     {
-      visible: true,
-      transparent: true,
-      animationType: "slide",
-      onRequestClose: closeSheet,
-      children: /* @__PURE__ */ jsxs7(View6, { style: styles6.modalRoot, children: [
-        /* @__PURE__ */ jsx7(Pressable4, { style: styles6.backdrop, onPress: closeSheet }),
-        /* @__PURE__ */ jsxs7(
-          View6,
-          {
-            style: [
-              styles6.sheet,
-              { height: sheetHeight },
-              isDark && styles6.sheetDark
-            ],
-            children: [
-              /* @__PURE__ */ jsx7(View6, { style: [styles6.handle, isDark && styles6.handleDark] }),
-              /* @__PURE__ */ jsxs7(View6, { style: styles6.header, children: [
-                /* @__PURE__ */ jsx7(Text3, { style: [styles6.sheetTitle, isDark && styles6.sheetTitleDark], children: showingNotes ? t.notes : navigationTitle }),
-                !showingNotes ? /* @__PURE__ */ jsx7(Text3, { style: [styles6.pageStatus, isDark && styles6.pageStatusDark], children: showingProgress ? `${Math.round(currentPage / Math.max(pageCount, 1) * 100)}%` : `${t.page} ${currentPage} / ${pageCount}` }) : null
-              ] }),
-              !showingNotes ? /* @__PURE__ */ jsxs7(View6, { style: styles6.pagesContent, children: [
-                !showingProgress ? /* @__PURE__ */ jsx7(View6, { style: styles6.pageHeader, children: /* @__PURE__ */ jsxs7(View6, { style: [styles6.segmented, isDark && styles6.segmentedDark], children: [
-                  supportsThumbnails ? /* @__PURE__ */ jsx7(
-                    Pressable4,
-                    {
-                      onPress: () => setPagesMode("thumbnails"),
-                      style: [
-                        styles6.segmentButton,
-                        pagesMode === "thumbnails" && styles6.segmentButtonActive,
-                        pagesMode === "thumbnails" && {
-                          backgroundColor: accentColor
-                        }
-                      ],
-                      children: /* @__PURE__ */ jsx7(
-                        Text3,
-                        {
-                          style: [
-                            styles6.segmentText,
-                            isDark && styles6.segmentTextDark,
-                            pagesMode === "thumbnails" && styles6.segmentTextActive
-                          ],
-                          children: thumbnailLabel
-                        }
-                      )
-                    }
-                  ) : null,
-                  /* @__PURE__ */ jsx7(
-                    Pressable4,
-                    {
-                      onPress: () => setPagesMode("summary"),
-                      style: [
-                        styles6.segmentButton,
-                        pagesMode === "summary" && styles6.segmentButtonActive,
-                        pagesMode === "summary" && {
-                          backgroundColor: accentColor
-                        }
-                      ],
-                      children: /* @__PURE__ */ jsx7(
-                        Text3,
+      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__ */ jsxs8(View7, { style: styles7.sheet, children: [
+        /* @__PURE__ */ jsxs8(View7, { style: styles7.header, children: [
+          /* @__PURE__ */ jsx8(Text4, { style: [styles7.sheetTitle, isDark && styles7.sheetTitleDark], children: showingNotes ? t.notes : navigationTitle }),
+          !showingNotes ? /* @__PURE__ */ jsx8(
+            Pressable5,
+            {
+              onPress: showingProgress ? void 0 : onOpenPageJump,
+              disabled: showingProgress || pageCount <= 0,
+              style: styles7.pageStatusHit,
+              accessibilityLabel: "Open page jump",
+              children: /* @__PURE__ */ jsx8(Text4, { style: [styles7.pageStatus, isDark && styles7.pageStatusDark], children: showingProgress ? `${Math.round(currentPage / Math.max(pageCount, 1) * 100)}%` : `${currentPage}/${pageCount}` })
+            }
+          ) : null
+        ] }),
+        !showingNotes ? /* @__PURE__ */ jsxs8(View7, { style: styles7.pagesContent, children: [
+          !showingProgress ? /* @__PURE__ */ jsx8(View7, { style: styles7.pageHeader, children: /* @__PURE__ */ jsxs8(View7, { style: [styles7.segmented, isDark && styles7.segmentedDark], children: [
+            supportsThumbnails ? /* @__PURE__ */ jsx8(
+              Pressable5,
+              {
+                onPress: () => setPagesMode("thumbnails"),
+                style: [
+                  styles7.segmentButton,
+                  pagesMode === "thumbnails" && styles7.segmentButtonActive,
+                  pagesMode === "thumbnails" && {
+                    backgroundColor: accentColor
+                  }
+                ],
+                children: /* @__PURE__ */ jsx8(
+                  Text4,
+                  {
+                    style: [
+                      styles7.segmentText,
+                      isDark && styles7.segmentTextDark,
+                      pagesMode === "thumbnails" && styles7.segmentTextActive
+                    ],
+                    children: thumbnailLabel
+                  }
+                )
+              }
+            ) : null,
+            /* @__PURE__ */ jsx8(
+              Pressable5,
+              {
+                onPress: () => setPagesMode("summary"),
+                style: [
+                  styles7.segmentButton,
+                  pagesMode === "summary" && styles7.segmentButtonActive,
+                  pagesMode === "summary" && {
+                    backgroundColor: accentColor
+                  }
+                ],
+                children: /* @__PURE__ */ jsx8(
+                  Text4,
+                  {
+                    style: [
+                      styles7.segmentText,
+                      isDark && styles7.segmentTextDark,
+                      pagesMode === "summary" && styles7.segmentTextActive
+                    ],
+                    children: summaryLabel
+                  }
+                )
+              }
+            )
+          ] }) }) : null,
+          supportsThumbnails && !showingProgress && pagesMode === "thumbnails" ? /* @__PURE__ */ jsx8(
+            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__ */ jsx8(
+            BottomSheetScrollView,
+            {
+              contentContainerStyle: styles7.summaryContent,
+              showsVerticalScrollIndicator: false,
+              children: progressEntries.map((entry) => {
+                const isActive = entry.pageIndex + 1 === currentPage;
+                return /* @__PURE__ */ jsxs8(
+                  Pressable5,
+                  {
+                    onPress: () => jumpToPage(entry.pageIndex),
+                    style: [
+                      styles7.progressRow,
+                      isDark && styles7.progressRowDark,
+                      isActive && { borderColor: accentColor }
+                    ],
+                    children: [
+                      /* @__PURE__ */ jsxs8(
+                        Text4,
                         {
                           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__ */ jsx7(
-                  FlatList2,
-                  {
-                    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__ */ jsx7(
-                  ScrollView4,
-                  {
-                    contentContainerStyle: styles6.summaryContent,
-                    showsVerticalScrollIndicator: false,
-                    children: progressEntries.map((entry) => {
-                      const isActive = entry.pageIndex + 1 === currentPage;
-                      return /* @__PURE__ */ jsxs7(
-                        Pressable4,
+                      ),
+                      /* @__PURE__ */ jsxs8(
+                        Text4,
                         {
-                          onPress: () => jumpToPage(entry.pageIndex),
                           style: [
-                            styles6.progressRow,
-                            isDark && styles6.progressRowDark,
-                            isActive && { borderColor: accentColor }
+                            styles7.progressMeta,
+                            isDark && styles7.progressMetaDark
                           ],
                           children: [
-                            /* @__PURE__ */ jsxs7(
-                              Text3,
-                              {
-                                style: [
-                                  styles6.progressLabel,
-                                  isDark && styles6.progressLabelDark
-                                ],
-                                children: [
-                                  entry.percent,
-                                  "%"
-                                ]
-                              }
-                            ),
-                            /* @__PURE__ */ jsxs7(
-                              Text3,
-                              {
-                                style: [
-                                  styles6.progressMeta,
-                                  isDark && styles6.progressMetaDark
-                                ],
-                                children: [
-                                  t.page,
-                                  " ",
-                                  entry.pageIndex + 1
-                                ]
-                              }
-                            )
+                            t.page,
+                            " ",
+                            entry.pageIndex + 1
                           ]
-                        },
-                        `progress-${entry.pageIndex}`
-                      );
-                    })
-                  }
-                ) : /* @__PURE__ */ jsx7(
-                  ScrollView4,
-                  {
-                    contentContainerStyle: styles6.summaryContent,
-                    showsVerticalScrollIndicator: false,
-                    children: outline.length === 0 ? /* @__PURE__ */ jsx7(Text3, { style: [styles6.emptyText, isDark && styles6.emptyTextDark], children: t.noSummary }) : outline.map((item, index) => /* @__PURE__ */ jsx7(
-                      OutlineNode,
-                      {
-                        item,
-                        isDark,
-                        untitledLabel: t.untitled,
-                        onSelect: jumpToPage
-                      },
-                      `${item.title}-${index}`
-                    ))
-                  }
-                )
-              ] }) : /* @__PURE__ */ jsx7(
-                ScrollView4,
+                        }
+                      )
+                    ]
+                  },
+                  `progress-${entry.pageIndex}`
+                );
+              })
+            }
+          ) : /* @__PURE__ */ jsx8(
+            BottomSheetScrollView,
+            {
+              contentContainerStyle: styles7.summaryContent,
+              showsVerticalScrollIndicator: false,
+              children: outline.length === 0 ? /* @__PURE__ */ jsx8(Text4, { style: [styles7.emptyText, isDark && styles7.emptyTextDark], children: t.noSummary }) : outline.map((item, index) => /* @__PURE__ */ jsx8(
+                OutlineNode,
                 {
-                  contentContainerStyle: styles6.content,
-                  showsVerticalScrollIndicator: false,
-                  children: annotations.length === 0 ? /* @__PURE__ */ jsx7(Text3, { style: [styles6.emptyText, isDark && styles6.emptyTextDark], children: t.noAnnotations }) : /* @__PURE__ */ jsx7(View6, { children: annotations.map((ann) => /* @__PURE__ */ jsxs7(
-                    Pressable4,
+                  item,
+                  isDark,
+                  untitledLabel: t.untitled,
+                  onSelect: jumpToPage
+                },
+                `${item.title}-${index}`
+              ))
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx8(
+          BottomSheetScrollView,
+          {
+            contentContainerStyle: styles7.content,
+            showsVerticalScrollIndicator: false,
+            children: annotations.length === 0 ? /* @__PURE__ */ jsx8(Text4, { style: [styles7.emptyText, isDark && styles7.emptyTextDark], children: t.noAnnotations }) : /* @__PURE__ */ jsx8(View7, { children: annotations.map((ann) => /* @__PURE__ */ jsxs8(
+              Pressable5,
+              {
+                onPress: () => {
+                  setSelectedAnnotation(ann.id);
+                  triggerScrollToPage(ann.pageIndex);
+                  closeSheet();
+                },
+                style: [styles7.noteCard, isDark && styles7.noteCardDark],
+                children: [
+                  /* @__PURE__ */ jsxs8(View7, { style: styles7.noteHeader, children: [
+                    /* @__PURE__ */ jsx8(
+                      View7,
+                      {
+                        style: [styles7.noteDot, { backgroundColor: ann.color }]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs8(
+                      Text4,
+                      {
+                        style: [styles7.noteTitle, isDark && styles7.noteTitleDark],
+                        children: [
+                          t.page,
+                          " ",
+                          ann.pageIndex + 1
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx8(
+                    Text4,
                     {
-                      onPress: () => {
-                        setSelectedAnnotation(ann.id);
-                        triggerScrollToPage(ann.pageIndex);
-                        closeSheet();
-                      },
-                      style: [styles6.noteCard, isDark && styles6.noteCardDark],
-                      children: [
-                        /* @__PURE__ */ jsxs7(View6, { style: styles6.noteHeader, children: [
-                          /* @__PURE__ */ jsx7(
-                            View6,
-                            {
-                              style: [styles6.noteDot, { backgroundColor: ann.color }]
-                            }
-                          ),
-                          /* @__PURE__ */ jsxs7(
-                            Text3,
-                            {
-                              style: [styles6.noteTitle, isDark && styles6.noteTitleDark],
-                              children: [
-                                t.page,
-                                " ",
-                                ann.pageIndex + 1
-                              ]
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsx7(
-                          Text3,
-                          {
-                            style: [
-                              styles6.noteType,
-                              isDark && styles6.noteTypeDark,
-                              { color: accentColor }
-                            ],
-                            children: ann.type === "comment" || ann.type === "text" ? t.note.toUpperCase() : ann.type.toUpperCase()
-                          }
-                        ),
-                        ann.content ? /* @__PURE__ */ jsx7(
-                          Text3,
-                          {
-                            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__ */ jsx8(
+                    Text4,
+                    {
+                      style: [
+                        styles7.noteContent,
+                        isDark && styles7.noteContentDark
+                      ],
+                      children: ann.content
+                    }
+                  ) : null
+                ]
+              },
+              ann.id
+            )) })
           }
         )
       ] })
     }
-  );
+  ) });
 };
-var styles6 = StyleSheet6.create({
+var styles7 = StyleSheet7.create({
   modalRoot: {
-    flex: 1,
-    backgroundColor: "transparent"
-  },
-  backdrop: {
-    ...StyleSheet6.absoluteFillObject,
-    backgroundColor: "rgba(0, 0, 0, 0.4)"
+    ...StyleSheet7.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"
@@ -27112,12 +27220,16 @@ var styles6 = StyleSheet6.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"
@@ -27137,6 +27249,11 @@ var styles6 = StyleSheet6.create({
     fontWeight: "700",
     color: "#111827"
   },
+  pageStatusHit: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 8
+  },
   pageStatusDark: {
     color: "#e5e7eb"
   },
@@ -27339,17 +27456,17 @@ var styles6 = StyleSheet6.create({
 var RightSheet_default = RightSheet;
 
 // components/AnnotationEditor.tsx
-import { useEffect as useEffect7, useState as useState6 } from "react";
+import { useEffect as useEffect7, useState as useState7 } from "react";
 import {
-  Modal as Modal3,
-  View as View7,
-  Text as Text4,
+  Modal as Modal2,
+  View as View8,
+  Text as Text5,
   TextInput as TextInput2,
-  Pressable as Pressable5,
-  StyleSheet as StyleSheet7
+  Pressable as Pressable6,
+  StyleSheet as StyleSheet8
 } from "react-native";
 import { useViewerStore as useViewerStore7 } from "@papyrus-sdk/core";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var AnnotationEditor = () => {
   const {
     annotations,
@@ -27362,7 +27479,7 @@ var AnnotationEditor = () => {
   } = useViewerStore7();
   const annotation = annotations.find((ann) => ann.id === selectedAnnotationId);
   const isEditable = annotation && (annotation.type === "text" || annotation.type === "comment");
-  const [draft, setDraft] = useState6("");
+  const [draft, setDraft] = useState7("");
   const isDark = uiTheme === "dark";
   const t = getStrings(locale);
   useEffect7(() => {
@@ -27376,19 +27493,19 @@ var AnnotationEditor = () => {
     updateAnnotation(annotation.id, { content: draft });
     setSelectedAnnotation(null);
   };
-  return /* @__PURE__ */ jsx8(
-    Modal3,
+  return /* @__PURE__ */ jsx9(
+    Modal2,
     {
       visible: true,
       transparent: true,
       animationType: "fade",
       onRequestClose: handleClose,
-      children: /* @__PURE__ */ jsx8(View7, { style: styles7.overlay, children: /* @__PURE__ */ jsxs8(View7, { style: [styles7.card, isDark && styles7.cardDark], children: [
-        /* @__PURE__ */ jsx8(Text4, { style: [styles7.title, isDark && styles7.titleDark], children: t.editNote }),
-        /* @__PURE__ */ jsx8(
+      children: /* @__PURE__ */ jsx9(View8, { style: styles8.overlay, children: /* @__PURE__ */ jsxs9(View8, { style: [styles8.card, isDark && styles8.cardDark], children: [
+        /* @__PURE__ */ jsx9(Text5, { style: [styles8.title, isDark && styles8.titleDark], children: t.editNote }),
+        /* @__PURE__ */ jsx9(
           TextInput2,
           {
-            style: [styles7.input, isDark && styles7.inputDark],
+            style: [styles8.input, isDark && styles8.inputDark],
             value: draft,
             onChangeText: setDraft,
             placeholder: t.notePlaceholder,
@@ -27396,25 +27513,25 @@ var AnnotationEditor = () => {
             multiline: true
           }
         ),
-        /* @__PURE__ */ jsxs8(View7, { style: styles7.actions, children: [
-          /* @__PURE__ */ jsx8(
-            Pressable5,
+        /* @__PURE__ */ jsxs9(View8, { style: styles8.actions, children: [
+          /* @__PURE__ */ jsx9(
+            Pressable6,
             {
               onPress: handleClose,
-              style: [styles7.actionButton, styles7.actionCancel],
-              children: /* @__PURE__ */ jsx8(Text4, { style: styles7.actionText, children: t.cancel })
+              style: [styles8.actionButton, styles8.actionCancel],
+              children: /* @__PURE__ */ jsx9(Text5, { style: styles8.actionText, children: t.cancel })
             }
           ),
-          /* @__PURE__ */ jsx8(
-            Pressable5,
+          /* @__PURE__ */ jsx9(
+            Pressable6,
             {
               onPress: handleSave,
               style: [
-                styles7.actionButton,
-                styles7.actionSave,
+                styles8.actionButton,
+                styles8.actionSave,
                 { backgroundColor: accentColor }
               ],
-              children: /* @__PURE__ */ jsx8(Text4, { style: [styles7.actionText, styles7.actionTextLight], children: t.save })
+              children: /* @__PURE__ */ jsx9(Text5, { style: [styles8.actionText, styles8.actionTextLight], children: t.save })
             }
           )
         ] })
@@ -27422,7 +27539,7 @@ var AnnotationEditor = () => {
     }
   );
 };
-var styles7 = StyleSheet7.create({
+var styles8 = StyleSheet8.create({
   overlay: {
     flex: 1,
     alignItems: "center",
@@ -27492,7 +27609,7 @@ var styles7 = StyleSheet7.create({
 var AnnotationEditor_default = AnnotationEditor;
 
 // components/BottomBar.tsx
-import { View as View8, Pressable as Pressable6, StyleSheet as StyleSheet8 } from "react-native";
+import { View as View9, Pressable as Pressable7, StyleSheet as StyleSheet9 } from "react-native";
 import { useViewerStore as useViewerStore8 } from "@papyrus-sdk/core";
 
 // components/bottomBarModel.ts
@@ -27531,8 +27648,15 @@ function buildBottomBarLayout({
   };
 }
 
+// components/BottomBar.actions.ts
+function createOpenDestinationHandler(onOpenDestination, destination) {
+  return () => {
+    onOpenDestination?.(destination);
+  };
+}
+
 // components/BottomBar.tsx
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var BottomBar = ({
   documentType,
   onOpenInfo,
@@ -27577,19 +27701,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,
@@ -27603,37 +27727,43 @@ var BottomBar = ({
     }
   };
   if (!mobileChromeVisible || !mobileDockVisible) return null;
-  return /* @__PURE__ */ jsx9(View8, { pointerEvents: "box-none", style: styles8.frame, children: /* @__PURE__ */ jsxs9(View8, { style: styles8.row, children: [
-    layout.leftSlots.length > 0 ? /* @__PURE__ */ jsx9(
-      View8,
+  return /* @__PURE__ */ jsx10(View9, { pointerEvents: "box-none", style: styles9.frame, children: /* @__PURE__ */ jsxs10(View9, { style: styles9.row, children: [
+    layout.leftSlots.length > 0 ? /* @__PURE__ */ jsx10(
+      View9,
       {
         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__ */ jsx9(
-            Pressable6,
+          return /* @__PURE__ */ jsx10(
+            Pressable7,
             {
               onPress: meta.onPress,
               style: [
-                styles8.iconOnlyItem,
-                slot.active && styles8.itemActive
+                styles9.iconOnlyItem,
+                slot.active && styles9.itemActive
               ],
               accessibilityLabel: meta.label,
-              children: /* @__PURE__ */ jsx9(
-                View8,
+              children: /* @__PURE__ */ jsx10(
+                View9,
                 {
                   style: [
-                    styles8.itemIcon,
-                    isDark && styles8.itemIconDark,
-                    slot.active && styles8.itemIconActive
+                    styles9.itemIcon,
+                    isDark && styles9.itemIconDark,
+                    slot.active && styles9.itemIconActive
                   ],
-                  children: /* @__PURE__ */ jsx9(Icon, { size: 17, color: iconColor(slot.active) })
+                  children: /* @__PURE__ */ jsx10(
+                    Icon,
+                    {
+                      size: MOBILE_CHROME_METRICS.iconSize,
+                      color: iconColor(slot.active)
+                    }
+                  )
                 }
               )
             },
@@ -27642,33 +27772,39 @@ var BottomBar = ({
         })
       }
     ) : null,
-    /* @__PURE__ */ jsx9(
-      View8,
+    /* @__PURE__ */ jsx10(
+      View9,
       {
         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__ */ jsx9(
-            Pressable6,
+          return /* @__PURE__ */ jsx10(
+            Pressable7,
             {
               onPress: meta.onPress,
-              style: [styles8.iconOnlyItem, slot.active && styles8.itemActive],
+              style: [styles9.iconOnlyItem, slot.active && styles9.itemActive],
               accessibilityLabel: meta.label,
-              children: /* @__PURE__ */ jsx9(
-                View8,
+              children: /* @__PURE__ */ jsx10(
+                View9,
                 {
                   style: [
-                    styles8.itemIcon,
-                    isDark && styles8.itemIconDark,
-                    slot.active && styles8.itemIconActive
+                    styles9.itemIcon,
+                    isDark && styles9.itemIconDark,
+                    slot.active && styles9.itemIconActive
                   ],
-                  children: /* @__PURE__ */ jsx9(Icon, { size: 17, color: iconColor(slot.active) })
+                  children: /* @__PURE__ */ jsx10(
+                    Icon,
+                    {
+                      size: MOBILE_CHROME_METRICS.iconSize,
+                      color: iconColor(slot.active)
+                    }
+                  )
                 }
               )
             },
@@ -27679,20 +27815,20 @@ var BottomBar = ({
     )
   ] }) });
 };
-var styles8 = StyleSheet8.create({
+var styles9 = StyleSheet9.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",
@@ -27730,15 +27866,15 @@ var styles8 = StyleSheet8.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",
@@ -27756,9 +27892,14 @@ var styles8 = StyleSheet8.create({
 var BottomBar_default = BottomBar;
 
 // components/SettingsSheet.tsx
-import { Modal as Modal4, View as View9, Text as Text5, Pressable as Pressable7, StyleSheet as StyleSheet9 } from "react-native";
+import { useCallback as useCallback4, useMemo as useMemo6 } from "react";
+import { Dimensions as Dimensions2, View as View10, Text as Text6, Pressable as Pressable8, StyleSheet as StyleSheet10 } from "react-native";
+import BottomSheet2, {
+  BottomSheetBackdrop as BottomSheetBackdrop2,
+  BottomSheetScrollView as BottomSheetScrollView2
+} from "@gorhom/bottom-sheet";
 import { useViewerStore as useViewerStore9 } from "@papyrus-sdk/core";
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var PAGE_THEME_OPTIONS = [
   { value: "normal", labelKey: "themeOriginal" },
   { value: "sepia", labelKey: "themeSepia" },
@@ -27767,19 +27908,19 @@ var PAGE_THEME_OPTIONS = [
 ];
 var ThemeSwatch = ({ value }) => {
   if (value === "high-contrast") {
-    return /* @__PURE__ */ jsxs10(View9, { style: [styles9.themeSwatch, styles9.themeSwatchContrast], children: [
-      /* @__PURE__ */ jsx10(View9, { style: styles9.themeSwatchContrastHalfDark }),
-      /* @__PURE__ */ jsx10(View9, { style: styles9.themeSwatchContrastHalfLight })
+    return /* @__PURE__ */ jsxs11(View10, { style: [styles10.themeSwatch, styles10.themeSwatchContrast], children: [
+      /* @__PURE__ */ jsx11(View10, { style: styles10.themeSwatchContrastHalfDark }),
+      /* @__PURE__ */ jsx11(View10, { style: styles10.themeSwatchContrastHalfLight })
     ] });
   }
-  return /* @__PURE__ */ jsx10(
-    View9,
+  return /* @__PURE__ */ jsx11(
+    View10,
     {
       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
       ]
     }
   );
@@ -27802,6 +27943,23 @@ var SettingsSheet = ({
   const isPaged = viewMode === "single";
   const isDouble = viewMode === "double";
   const t = getStrings(locale);
+  const snapPoints = useMemo6(
+    () => [Math.min(640, Dimensions2.get("window").height * 0.72)],
+    []
+  );
+  const renderBackdrop = useCallback4(
+    (props) => /* @__PURE__ */ jsx11(
+      BottomSheetBackdrop2,
+      {
+        ...props,
+        appearsOnIndex: 0,
+        disappearsOnIndex: -1,
+        opacity: 0.4,
+        pressBehavior: "close"
+      }
+    ),
+    []
+  );
   const handleTransition = (mode) => {
     if (mode === "paged") {
       setDocumentState({ viewMode: "single" });
@@ -27828,366 +27986,380 @@ var SettingsSheet = ({
     setDocumentState({ zoom: next });
   };
   if (!visible) return null;
-  return /* @__PURE__ */ jsx10(Modal4, { visible: true, transparent: true, animationType: "slide", onRequestClose: onClose, children: /* @__PURE__ */ jsxs10(View9, { style: styles9.modalRoot, children: [
-    /* @__PURE__ */ jsx10(Pressable7, { style: styles9.backdrop, onPress: onClose }),
-    /* @__PURE__ */ jsxs10(View9, { style: [styles9.sheet, isDark && styles9.sheetDark], children: [
-      /* @__PURE__ */ jsx10(View9, { style: [styles9.handle, isDark && styles9.handleDark] }),
-      /* @__PURE__ */ jsxs10(View9, { style: styles9.section, children: [
-        /* @__PURE__ */ jsx10(
-          Text5,
-          {
-            style: [styles9.sectionTitle, isDark && styles9.sectionTitleDark],
-            children: t.appearance
-          }
-        ),
-        /* @__PURE__ */ jsxs10(View9, { style: styles9.optionRow, children: [
-          /* @__PURE__ */ jsx10(
-            Pressable7,
-            {
-              onPress: () => setDocumentState({ uiTheme: "light" }),
-              style: [
-                styles9.optionButton,
-                isDark && styles9.optionButtonDark,
-                uiTheme === "light" && styles9.optionButtonActive,
-                uiTheme === "light" && { backgroundColor: accentColor }
-              ],
-              children: /* @__PURE__ */ jsx10(
-                Text5,
-                {
-                  style: [
-                    styles9.optionText,
-                    isDark && styles9.optionTextDark,
-                    uiTheme === "light" && styles9.optionTextActive
-                  ],
-                  children: t.light
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx10(
-            Pressable7,
-            {
-              onPress: () => setDocumentState({ uiTheme: "dark" }),
-              style: [
-                styles9.optionButton,
-                isDark && styles9.optionButtonDark,
-                uiTheme === "dark" && styles9.optionButtonActive,
-                uiTheme === "dark" && { backgroundColor: accentColor }
-              ],
-              children: /* @__PURE__ */ jsx10(
-                Text5,
+  return /* @__PURE__ */ jsx11(View10, { style: styles10.modalRoot, pointerEvents: "box-none", children: /* @__PURE__ */ jsx11(
+    BottomSheet2,
+    {
+      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__ */ jsxs11(
+        BottomSheetScrollView2,
+        {
+          style: styles10.sheet,
+          contentContainerStyle: styles10.sheetContent,
+          showsVerticalScrollIndicator: false,
+          children: [
+            /* @__PURE__ */ jsxs11(View10, { style: styles10.section, children: [
+              /* @__PURE__ */ jsx11(
+                Text6,
                 {
-                  style: [
-                    styles9.optionText,
-                    isDark && styles9.optionTextDark,
-                    uiTheme === "dark" && styles9.optionTextActive
-                  ],
-                  children: t.dark
+                  style: [styles10.sectionTitle, isDark && styles10.sectionTitleDark],
+                  children: t.appearance
                 }
-              )
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs10(View9, { style: styles9.section, children: [
-        /* @__PURE__ */ jsx10(
-          Text5,
-          {
-            style: [styles9.sectionTitle, isDark && styles9.sectionTitleDark],
-            children: t.pageTheme
-          }
-        ),
-        /* @__PURE__ */ jsx10(View9, { style: styles9.themeOptionRow, children: PAGE_THEME_OPTIONS.map((option) => {
-          const active = pageTheme === option.value;
-          return /* @__PURE__ */ jsxs10(
-            Pressable7,
-            {
-              onPress: () => setDocumentState({ pageTheme: option.value }),
-              style: [
-                styles9.themeOptionButton,
-                isDark && styles9.themeOptionButtonDark,
-                active && styles9.themeOptionButtonActive,
-                active && { borderColor: accentColor }
-              ],
-              children: [
-                /* @__PURE__ */ jsx10(ThemeSwatch, { value: option.value }),
-                /* @__PURE__ */ jsx10(
-                  Text5,
+              ),
+              /* @__PURE__ */ jsxs11(View10, { style: styles10.optionRow, children: [
+                /* @__PURE__ */ jsx11(
+                  Pressable8,
                   {
+                    onPress: () => setDocumentState({ uiTheme: "light" }),
                     style: [
-                      styles9.themeOptionLabel,
-                      isDark && styles9.themeOptionLabelDark,
-                      active && { color: accentColor }
+                      styles10.optionButton,
+                      isDark && styles10.optionButtonDark,
+                      uiTheme === "light" && styles10.optionButtonActive,
+                      uiTheme === "light" && { backgroundColor: accentColor }
                     ],
-                    children: t[option.labelKey]
+                    children: /* @__PURE__ */ jsx11(
+                      Text6,
+                      {
+                        style: [
+                          styles10.optionText,
+                          isDark && styles10.optionTextDark,
+                          uiTheme === "light" && styles10.optionTextActive
+                        ],
+                        children: t.light
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx11(
+                  Pressable8,
+                  {
+                    onPress: () => setDocumentState({ uiTheme: "dark" }),
+                    style: [
+                      styles10.optionButton,
+                      isDark && styles10.optionButtonDark,
+                      uiTheme === "dark" && styles10.optionButtonActive,
+                      uiTheme === "dark" && { backgroundColor: accentColor }
+                    ],
+                    children: /* @__PURE__ */ jsx11(
+                      Text6,
+                      {
+                        style: [
+                          styles10.optionText,
+                          isDark && styles10.optionTextDark,
+                          uiTheme === "dark" && styles10.optionTextActive
+                        ],
+                        children: t.dark
+                      }
+                    )
                   }
                 )
-              ]
-            },
-            option.value
-          );
-        }) })
-      ] }),
-      /* @__PURE__ */ jsxs10(View9, { style: styles9.section, children: [
-        /* @__PURE__ */ jsx10(
-          Text5,
-          {
-            style: [styles9.sectionTitle, isDark && styles9.sectionTitleDark],
-            children: t.pageTransition
-          }
-        ),
-        /* @__PURE__ */ jsxs10(View9, { style: styles9.optionRow, children: [
-          /* @__PURE__ */ jsx10(
-            Pressable7,
-            {
-              onPress: () => handleTransition("continuous"),
-              style: [
-                styles9.optionButton,
-                isDark && styles9.optionButtonDark,
-                (!isPaged || isDouble) && styles9.optionButtonActive,
-                (!isPaged || isDouble) && { backgroundColor: accentColor }
-              ],
-              children: /* @__PURE__ */ jsx10(
-                Text5,
-                {
-                  style: [
-                    styles9.optionText,
-                    isDark && styles9.optionTextDark,
-                    (!isPaged || isDouble) && styles9.optionTextActive
-                  ],
-                  children: t.continuous
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx10(
-            Pressable7,
-            {
-              onPress: () => handleTransition("paged"),
-              style: [
-                styles9.optionButton,
-                isDark && styles9.optionButtonDark,
-                isPaged && styles9.optionButtonActive,
-                isPaged && { backgroundColor: accentColor }
-              ],
-              children: /* @__PURE__ */ jsx10(
-                Text5,
-                {
-                  style: [
-                    styles9.optionText,
-                    isDark && styles9.optionTextDark,
-                    isPaged && styles9.optionTextActive
-                  ],
-                  children: t.pageByPage
-                }
-              )
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs10(View9, { style: styles9.section, children: [
-        /* @__PURE__ */ jsx10(
-          Text5,
-          {
-            style: [styles9.sectionTitle, isDark && styles9.sectionTitleDark],
-            children: t.layout
-          }
-        ),
-        /* @__PURE__ */ jsxs10(View9, { style: styles9.optionRow, children: [
-          /* @__PURE__ */ jsx10(
-            Pressable7,
-            {
-              onPress: () => handleLayout("single"),
-              style: [
-                styles9.optionButton,
-                isDark && styles9.optionButtonDark,
-                !isDouble && styles9.optionButtonActive,
-                !isDouble && { backgroundColor: accentColor }
-              ],
-              children: /* @__PURE__ */ jsx10(
-                Text5,
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs11(View10, { style: styles10.section, children: [
+              /* @__PURE__ */ jsx11(
+                Text6,
                 {
-                  style: [
-                    styles9.optionText,
-                    isDark && styles9.optionTextDark,
-                    !isDouble && styles9.optionTextActive
-                  ],
-                  children: t.singlePage
+                  style: [styles10.sectionTitle, isDark && styles10.sectionTitleDark],
+                  children: t.pageTheme
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx10(
-            Pressable7,
-            {
-              onPress: () => handleLayout("double"),
-              style: [
-                styles9.optionButton,
-                isDark && styles9.optionButtonDark,
-                isDouble && styles9.optionButtonActive,
-                isDouble && { backgroundColor: accentColor }
-              ],
-              children: /* @__PURE__ */ jsx10(
-                Text5,
+              ),
+              /* @__PURE__ */ jsx11(View10, { style: styles10.themeOptionRow, children: PAGE_THEME_OPTIONS.map((option) => {
+                const active = pageTheme === option.value;
+                return /* @__PURE__ */ jsxs11(
+                  Pressable8,
+                  {
+                    onPress: () => setDocumentState({ pageTheme: option.value }),
+                    style: [
+                      styles10.themeOptionButton,
+                      isDark && styles10.themeOptionButtonDark,
+                      active && styles10.themeOptionButtonActive,
+                      active && { borderColor: accentColor }
+                    ],
+                    children: [
+                      /* @__PURE__ */ jsx11(ThemeSwatch, { value: option.value }),
+                      /* @__PURE__ */ jsx11(
+                        Text6,
+                        {
+                          style: [
+                            styles10.themeOptionLabel,
+                            isDark && styles10.themeOptionLabelDark,
+                            active && { color: accentColor }
+                          ],
+                          children: t[option.labelKey]
+                        }
+                      )
+                    ]
+                  },
+                  option.value
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxs11(View10, { style: styles10.section, children: [
+              /* @__PURE__ */ jsx11(
+                Text6,
                 {
-                  style: [
-                    styles9.optionText,
-                    isDark && styles9.optionTextDark,
-                    isDouble && styles9.optionTextActive
-                  ],
-                  children: t.doublePage
+                  style: [styles10.sectionTitle, isDark && styles10.sectionTitleDark],
+                  children: t.pageTransition
                 }
-              )
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs10(View9, { style: styles9.section, children: [
-        /* @__PURE__ */ jsx10(
-          Text5,
-          {
-            style: [styles9.sectionTitle, isDark && styles9.sectionTitleDark],
-            children: t.rotate
-          }
-        ),
-        /* @__PURE__ */ jsxs10(View9, { style: styles9.optionRow, children: [
-          /* @__PURE__ */ jsx10(
-            Pressable7,
-            {
-              onPress: () => handleRotate("counterclockwise"),
-              style: [styles9.optionButton, isDark && styles9.optionButtonDark],
-              children: /* @__PURE__ */ jsx10(
-                Text5,
+              ),
+              /* @__PURE__ */ jsxs11(View10, { style: styles10.optionRow, children: [
+                /* @__PURE__ */ jsx11(
+                  Pressable8,
+                  {
+                    onPress: () => handleTransition("continuous"),
+                    style: [
+                      styles10.optionButton,
+                      isDark && styles10.optionButtonDark,
+                      (!isPaged || isDouble) && styles10.optionButtonActive,
+                      (!isPaged || isDouble) && { backgroundColor: accentColor }
+                    ],
+                    children: /* @__PURE__ */ jsx11(
+                      Text6,
+                      {
+                        style: [
+                          styles10.optionText,
+                          isDark && styles10.optionTextDark,
+                          (!isPaged || isDouble) && styles10.optionTextActive
+                        ],
+                        children: t.continuous
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx11(
+                  Pressable8,
+                  {
+                    onPress: () => handleTransition("paged"),
+                    style: [
+                      styles10.optionButton,
+                      isDark && styles10.optionButtonDark,
+                      isPaged && styles10.optionButtonActive,
+                      isPaged && { backgroundColor: accentColor }
+                    ],
+                    children: /* @__PURE__ */ jsx11(
+                      Text6,
+                      {
+                        style: [
+                          styles10.optionText,
+                          isDark && styles10.optionTextDark,
+                          isPaged && styles10.optionTextActive
+                        ],
+                        children: t.pageByPage
+                      }
+                    )
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs11(View10, { style: styles10.section, children: [
+              /* @__PURE__ */ jsx11(
+                Text6,
                 {
-                  style: [styles9.optionText, isDark && styles9.optionTextDark],
-                  children: t.counterclockwise
+                  style: [styles10.sectionTitle, isDark && styles10.sectionTitleDark],
+                  children: t.layout
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx10(
-            Pressable7,
-            {
-              onPress: () => handleRotate("clockwise"),
-              style: [styles9.optionButton, isDark && styles9.optionButtonDark],
-              children: /* @__PURE__ */ jsx10(
-                Text5,
+              ),
+              /* @__PURE__ */ jsxs11(View10, { style: styles10.optionRow, children: [
+                /* @__PURE__ */ jsx11(
+                  Pressable8,
+                  {
+                    onPress: () => handleLayout("single"),
+                    style: [
+                      styles10.optionButton,
+                      isDark && styles10.optionButtonDark,
+                      !isDouble && styles10.optionButtonActive,
+                      !isDouble && { backgroundColor: accentColor }
+                    ],
+                    children: /* @__PURE__ */ jsx11(
+                      Text6,
+                      {
+                        style: [
+                          styles10.optionText,
+                          isDark && styles10.optionTextDark,
+                          !isDouble && styles10.optionTextActive
+                        ],
+                        children: t.singlePage
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx11(
+                  Pressable8,
+                  {
+                    onPress: () => handleLayout("double"),
+                    style: [
+                      styles10.optionButton,
+                      isDark && styles10.optionButtonDark,
+                      isDouble && styles10.optionButtonActive,
+                      isDouble && { backgroundColor: accentColor }
+                    ],
+                    children: /* @__PURE__ */ jsx11(
+                      Text6,
+                      {
+                        style: [
+                          styles10.optionText,
+                          isDark && styles10.optionTextDark,
+                          isDouble && styles10.optionTextActive
+                        ],
+                        children: t.doublePage
+                      }
+                    )
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs11(View10, { style: styles10.section, children: [
+              /* @__PURE__ */ jsx11(
+                Text6,
                 {
-                  style: [styles9.optionText, isDark && styles9.optionTextDark],
-                  children: t.clockwise
+                  style: [styles10.sectionTitle, isDark && styles10.sectionTitleDark],
+                  children: t.rotate
                 }
-              )
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs10(View9, { style: styles9.section, children: [
-        /* @__PURE__ */ jsx10(
-          Text5,
-          {
-            style: [styles9.sectionTitle, isDark && styles9.sectionTitleDark],
-            children: t.zoom
-          }
-        ),
-        /* @__PURE__ */ jsxs10(View9, { style: styles9.optionRow, children: [
-          /* @__PURE__ */ jsx10(
-            Pressable7,
-            {
-              onPress: () => handleZoom(-0.1),
-              style: [styles9.optionButton, isDark && styles9.optionButtonDark],
-              children: /* @__PURE__ */ jsx10(IconZoomOut, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
-            }
-          ),
-          /* @__PURE__ */ jsx10(View9, { style: styles9.zoomValue, children: /* @__PURE__ */ jsxs10(Text5, { style: [styles9.zoomText, isDark && styles9.zoomTextDark], children: [
-            Math.round(zoom * 100),
-            "%"
-          ] }) }),
-          /* @__PURE__ */ jsx10(
-            Pressable7,
-            {
-              onPress: () => handleZoom(0.1),
-              style: [styles9.optionButton, isDark && styles9.optionButtonDark],
-              children: /* @__PURE__ */ jsx10(IconZoomIn, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs10(View9, { style: styles9.section, children: [
-        /* @__PURE__ */ jsx10(
-          Text5,
-          {
-            style: [styles9.sectionTitle, isDark && styles9.sectionTitleDark],
-            children: t.language
-          }
-        ),
-        /* @__PURE__ */ jsxs10(View9, { style: styles9.optionRow, children: [
-          /* @__PURE__ */ jsx10(
-            Pressable7,
-            {
-              onPress: () => setDocumentState({ locale: "en" }),
-              style: [
-                styles9.optionButton,
-                isDark && styles9.optionButtonDark,
-                locale === "en" && styles9.optionButtonActive,
-                locale === "en" && { backgroundColor: accentColor }
-              ],
-              children: /* @__PURE__ */ jsx10(
-                Text5,
+              ),
+              /* @__PURE__ */ jsxs11(View10, { style: styles10.optionRow, children: [
+                /* @__PURE__ */ jsx11(
+                  Pressable8,
+                  {
+                    onPress: () => handleRotate("counterclockwise"),
+                    style: [styles10.optionButton, isDark && styles10.optionButtonDark],
+                    children: /* @__PURE__ */ jsx11(
+                      Text6,
+                      {
+                        style: [styles10.optionText, isDark && styles10.optionTextDark],
+                        children: t.counterclockwise
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx11(
+                  Pressable8,
+                  {
+                    onPress: () => handleRotate("clockwise"),
+                    style: [styles10.optionButton, isDark && styles10.optionButtonDark],
+                    children: /* @__PURE__ */ jsx11(
+                      Text6,
+                      {
+                        style: [styles10.optionText, isDark && styles10.optionTextDark],
+                        children: t.clockwise
+                      }
+                    )
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs11(View10, { style: styles10.section, children: [
+              /* @__PURE__ */ jsx11(
+                Text6,
                 {
-                  style: [
-                    styles9.optionText,
-                    isDark && styles9.optionTextDark,
-                    locale === "en" && styles9.optionTextActive
-                  ],
-                  children: t.english
+                  style: [styles10.sectionTitle, isDark && styles10.sectionTitleDark],
+                  children: t.zoom
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx10(
-            Pressable7,
-            {
-              onPress: () => setDocumentState({ locale: "pt-BR" }),
-              style: [
-                styles9.optionButton,
-                isDark && styles9.optionButtonDark,
-                locale === "pt-BR" && styles9.optionButtonActive,
-                locale === "pt-BR" && { backgroundColor: accentColor }
-              ],
-              children: /* @__PURE__ */ jsx10(
-                Text5,
+              ),
+              /* @__PURE__ */ jsxs11(View10, { style: styles10.optionRow, children: [
+                /* @__PURE__ */ jsx11(
+                  Pressable8,
+                  {
+                    onPress: () => handleZoom(-0.1),
+                    style: [styles10.optionButton, isDark && styles10.optionButtonDark],
+                    children: /* @__PURE__ */ jsx11(IconZoomOut, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
+                  }
+                ),
+                /* @__PURE__ */ jsx11(View10, { style: styles10.zoomValue, children: /* @__PURE__ */ jsxs11(Text6, { style: [styles10.zoomText, isDark && styles10.zoomTextDark], children: [
+                  Math.round(zoom * 100),
+                  "%"
+                ] }) }),
+                /* @__PURE__ */ jsx11(
+                  Pressable8,
+                  {
+                    onPress: () => handleZoom(0.1),
+                    style: [styles10.optionButton, isDark && styles10.optionButtonDark],
+                    children: /* @__PURE__ */ jsx11(IconZoomIn, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs11(View10, { style: styles10.section, children: [
+              /* @__PURE__ */ jsx11(
+                Text6,
                 {
-                  style: [
-                    styles9.optionText,
-                    isDark && styles9.optionTextDark,
-                    locale === "pt-BR" && styles9.optionTextActive
-                  ],
-                  children: t.portuguese
+                  style: [styles10.sectionTitle, isDark && styles10.sectionTitleDark],
+                  children: t.language
                 }
-              )
-            }
-          )
-        ] })
-      ] })
-    ] })
-  ] }) });
+              ),
+              /* @__PURE__ */ jsxs11(View10, { style: styles10.optionRow, children: [
+                /* @__PURE__ */ jsx11(
+                  Pressable8,
+                  {
+                    onPress: () => setDocumentState({ locale: "en" }),
+                    style: [
+                      styles10.optionButton,
+                      isDark && styles10.optionButtonDark,
+                      locale === "en" && styles10.optionButtonActive,
+                      locale === "en" && { backgroundColor: accentColor }
+                    ],
+                    children: /* @__PURE__ */ jsx11(
+                      Text6,
+                      {
+                        style: [
+                          styles10.optionText,
+                          isDark && styles10.optionTextDark,
+                          locale === "en" && styles10.optionTextActive
+                        ],
+                        children: t.english
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx11(
+                  Pressable8,
+                  {
+                    onPress: () => setDocumentState({ locale: "pt-BR" }),
+                    style: [
+                      styles10.optionButton,
+                      isDark && styles10.optionButtonDark,
+                      locale === "pt-BR" && styles10.optionButtonActive,
+                      locale === "pt-BR" && { backgroundColor: accentColor }
+                    ],
+                    children: /* @__PURE__ */ jsx11(
+                      Text6,
+                      {
+                        style: [
+                          styles10.optionText,
+                          isDark && styles10.optionTextDark,
+                          locale === "pt-BR" && styles10.optionTextActive
+                        ],
+                        children: t.portuguese
+                      }
+                    )
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  ) });
 };
-var styles9 = StyleSheet9.create({
+var styles10 = StyleSheet10.create({
   modalRoot: {
-    flex: 1,
-    backgroundColor: "transparent"
-  },
-  backdrop: {
-    ...StyleSheet9.absoluteFillObject,
-    backgroundColor: "rgba(0, 0, 0, 0.45)"
+    ...StyleSheet10.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,
@@ -28198,14 +28370,15 @@ var styles9 = StyleSheet9.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"
@@ -28335,17 +28508,17 @@ var styles9 = StyleSheet9.create({
 var SettingsSheet_default = SettingsSheet;
 
 // components/CoverPreview.tsx
-import { useEffect as useEffect8, useMemo as useMemo6, useRef as useRef6, useState as useState7 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo7, useRef as useRef6, useState as useState8 } from "react";
 import {
   ActivityIndicator,
-  StyleSheet as StyleSheet10,
-  Text as Text6,
+  StyleSheet as StyleSheet11,
+  Text as Text7,
   UIManager as UIManager2,
-  View as View10,
+  View as View11,
   findNodeHandle as findNodeHandle3
 } from "react-native";
 import { MobileDocumentEngine, PapyrusPageView as PapyrusPageView3 } from "@papyrus-sdk/engine-native";
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var parseDataUri = (value) => {
   const match = /^data:([^;,]+)?(;base64)?,/.exec(value);
   if (!match) return null;
@@ -28393,13 +28566,13 @@ var CoverPreview = ({
   onLoadEnd,
   onError
 }) => {
-  const [engine, setEngine] = useState7(null);
-  const [layoutReady, setLayoutReady] = useState7(false);
-  const [loaded, setLoaded] = useState7(false);
-  const [loading, setLoading] = useState7(false);
-  const [error, setError] = useState7(null);
+  const [engine, setEngine] = useState8(null);
+  const [layoutReady, setLayoutReady] = useState8(false);
+  const [loaded, setLoaded] = useState8(false);
+  const [loading, setLoading] = useState8(false);
+  const [error, setError] = useState8(null);
   const viewRef = useRef6(null);
-  const resolvedType = useMemo6(() => inferDocumentType(source, type), [source, type]);
+  const resolvedType = useMemo7(() => inferDocumentType(source, type), [source, type]);
   const isPdf = resolvedType === "pdf";
   const hasNativePageView = Boolean(UIManager2.getViewManagerConfig?.("PapyrusPageView"));
   const canRender = !isPdf || hasNativePageView;
@@ -28462,15 +28635,15 @@ var CoverPreview = ({
     }
   };
   if (!shouldRender || !canRender) {
-    return /* @__PURE__ */ jsx11(View10, { style: [styles10.container, style], children: placeholder ?? /* @__PURE__ */ jsx11(View10, { style: styles10.placeholder, children: /* @__PURE__ */ jsx11(Text6, { style: styles10.placeholderText, children: "Preview" }) }) });
+    return /* @__PURE__ */ jsx12(View11, { style: [styles11.container, style], children: placeholder ?? /* @__PURE__ */ jsx12(View11, { style: styles11.placeholder, children: /* @__PURE__ */ jsx12(Text7, { style: styles11.placeholderText, children: "Preview" }) }) });
   }
-  return /* @__PURE__ */ jsxs11(View10, { style: [styles10.container, style], onLayout: handleLayout, children: [
-    /* @__PURE__ */ jsx11(View10, { style: styles10.previewFrame, pointerEvents: allowInteraction ? "auto" : "none", children: isPdf ? /* @__PURE__ */ jsx11(PapyrusPageView3, { ref: viewRef, style: styles10.pageView }) : engine && /* @__PURE__ */ jsx11(WebViewViewer_default, { engine }) }),
-    showLoading && loading && /* @__PURE__ */ jsx11(View10, { pointerEvents: "none", style: styles10.loadingOverlay, children: loadingIndicator ?? /* @__PURE__ */ jsx11(ActivityIndicator, { size: "small", color: "#2563eb" }) }),
-    error && /* @__PURE__ */ jsx11(View10, { pointerEvents: "none", style: styles10.errorOverlay, children: /* @__PURE__ */ jsx11(Text6, { style: styles10.errorText, children: "Preview unavailable" }) })
+  return /* @__PURE__ */ jsxs12(View11, { style: [styles11.container, style], onLayout: handleLayout, children: [
+    /* @__PURE__ */ jsx12(View11, { style: styles11.previewFrame, pointerEvents: allowInteraction ? "auto" : "none", children: isPdf ? /* @__PURE__ */ jsx12(PapyrusPageView3, { ref: viewRef, style: styles11.pageView }) : engine && /* @__PURE__ */ jsx12(WebViewViewer_default, { engine }) }),
+    showLoading && loading && /* @__PURE__ */ jsx12(View11, { pointerEvents: "none", style: styles11.loadingOverlay, children: loadingIndicator ?? /* @__PURE__ */ jsx12(ActivityIndicator, { size: "small", color: "#2563eb" }) }),
+    error && /* @__PURE__ */ jsx12(View11, { pointerEvents: "none", style: styles11.errorOverlay, children: /* @__PURE__ */ jsx12(Text7, { style: styles11.errorText, children: "Preview unavailable" }) })
   ] });
 };
-var styles10 = StyleSheet10.create({
+var styles11 = StyleSheet11.create({
   container: {
     backgroundColor: "#f8fafc",
     borderRadius: 12,
@@ -28486,13 +28659,13 @@ var styles10 = StyleSheet10.create({
     backgroundColor: "transparent"
   },
   loadingOverlay: {
-    ...StyleSheet10.absoluteFillObject,
+    ...StyleSheet11.absoluteFillObject,
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "rgba(15, 23, 42, 0.15)"
   },
   errorOverlay: {
-    ...StyleSheet10.absoluteFillObject,
+    ...StyleSheet11.absoluteFillObject,
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "rgba(15, 23, 42, 0.4)"
@@ -28517,43 +28690,43 @@ var styles10 = StyleSheet10.create({
 var CoverPreview_default = CoverPreview;
 
 // components/ReadingShell.tsx
-import React11, { useState as useState9 } from "react";
-import { Keyboard as Keyboard2, View as View17, StyleSheet as StyleSheet17 } from "react-native";
+import React13, { useState as useState10 } from "react";
+import { Keyboard as Keyboard2, View as View18, StyleSheet as StyleSheet18 } from "react-native";
 import { useViewerStore as useViewerStore16 } from "@papyrus-sdk/core";
 
 // components/DocumentActionsSheet.tsx
 import {
-  Modal as Modal5,
-  Pressable as Pressable8,
-  StyleSheet as StyleSheet11,
-  Text as Text7,
-  View as View11
+  Modal as Modal3,
+  Pressable as Pressable9,
+  StyleSheet as StyleSheet12,
+  Text as Text8,
+  View as View12
 } from "react-native";
 import { useViewerStore as useViewerStore10 } from "@papyrus-sdk/core";
-import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function DocumentActionsSheet({
   visible,
   onClose
 }) {
   const { uiTheme } = useViewerStore10();
   const isDark = uiTheme === "dark";
-  return /* @__PURE__ */ jsx12(Modal5, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsx12(Pressable8, { style: styles11.backdrop, onPress: onClose, children: /* @__PURE__ */ jsxs12(
-    Pressable8,
+  return /* @__PURE__ */ jsx13(Modal3, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsx13(Pressable9, { style: styles12.backdrop, onPress: onClose, children: /* @__PURE__ */ jsxs13(
+    Pressable9,
     {
       onPress: (event) => event.stopPropagation(),
-      style: [styles11.card, isDark && styles11.cardDark],
+      style: [styles12.card, isDark && styles12.cardDark],
       children: [
-        /* @__PURE__ */ jsx12(Text7, { style: [styles11.eyebrow, isDark && styles11.eyebrowDark], children: "Document actions" }),
-        /* @__PURE__ */ jsxs12(View11, { style: styles11.actionList, children: [
-          /* @__PURE__ */ jsx12(View11, { style: [styles11.actionItem, isDark && styles11.actionItemDark], children: /* @__PURE__ */ jsx12(Text7, { style: [styles11.actionText, isDark && styles11.actionTextDark], children: "Share" }) }),
-          /* @__PURE__ */ jsx12(View11, { style: [styles11.actionItem, isDark && styles11.actionItemDark], children: /* @__PURE__ */ jsx12(Text7, { style: [styles11.actionText, isDark && styles11.actionTextDark], children: "Export" }) })
+        /* @__PURE__ */ jsx13(Text8, { style: [styles12.eyebrow, isDark && styles12.eyebrowDark], children: "Document actions" }),
+        /* @__PURE__ */ jsxs13(View12, { style: styles12.actionList, children: [
+          /* @__PURE__ */ jsx13(View12, { style: [styles12.actionItem, isDark && styles12.actionItemDark], children: /* @__PURE__ */ jsx13(Text8, { style: [styles12.actionText, isDark && styles12.actionTextDark], children: "Share" }) }),
+          /* @__PURE__ */ jsx13(View12, { style: [styles12.actionItem, isDark && styles12.actionItemDark], children: /* @__PURE__ */ jsx13(Text8, { style: [styles12.actionText, isDark && styles12.actionTextDark], children: "Export" }) })
         ] }),
-        /* @__PURE__ */ jsx12(Pressable8, { onPress: onClose, style: styles11.closeButton, accessibilityLabel: "Close actions sheet", children: /* @__PURE__ */ jsx12(Text7, { style: styles11.closeText, children: "Close" }) })
+        /* @__PURE__ */ jsx13(Pressable9, { onPress: onClose, style: styles12.closeButton, accessibilityLabel: "Close actions sheet", children: /* @__PURE__ */ jsx13(Text8, { style: styles12.closeText, children: "Close" }) })
       ]
     }
   ) }) });
 }
-var styles11 = StyleSheet11.create({
+var styles12 = StyleSheet12.create({
   backdrop: {
     flex: 1,
     backgroundColor: "rgba(15, 23, 42, 0.35)",
@@ -28615,12 +28788,12 @@ var styles11 = StyleSheet11.create({
 
 // components/InfoSheet.tsx
 import {
-  Modal as Modal6,
-  Pressable as Pressable9,
-  ScrollView as ScrollView5,
-  StyleSheet as StyleSheet12,
-  Text as Text8,
-  View as View12
+  Modal as Modal4,
+  Pressable as Pressable10,
+  ScrollView as ScrollView4,
+  StyleSheet as StyleSheet13,
+  Text as Text9,
+  View as View13
 } from "react-native";
 import { useViewerStore as useViewerStore11 } from "@papyrus-sdk/core";
 
@@ -28721,7 +28894,7 @@ var buildInfoRows = ({
 };
 
 // components/InfoSheet.tsx
-import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
 function InfoSheet({
   visible,
   title,
@@ -28751,66 +28924,66 @@ function InfoSheet({
     pageTheme,
     locale
   });
-  return /* @__PURE__ */ jsx13(
-    Modal6,
+  return /* @__PURE__ */ jsx14(
+    Modal4,
     {
       visible,
       transparent: true,
       animationType: "fade",
       onRequestClose: onClose,
-      children: /* @__PURE__ */ jsx13(Pressable9, { style: styles12.backdrop, onPress: onClose, children: /* @__PURE__ */ jsxs13(
-        Pressable9,
+      children: /* @__PURE__ */ jsx14(Pressable10, { style: styles13.backdrop, onPress: onClose, children: /* @__PURE__ */ jsxs14(
+        Pressable10,
         {
           onPress: (event) => event.stopPropagation(),
-          style: [styles12.card, isDark && styles12.cardDark],
+          style: [styles13.card, isDark && styles13.cardDark],
           children: [
-            /* @__PURE__ */ jsxs13(View12, { style: styles12.topRow, children: [
-              /* @__PURE__ */ jsx13(
-                Pressable9,
+            /* @__PURE__ */ jsxs14(View13, { style: styles13.topRow, children: [
+              /* @__PURE__ */ jsx14(
+                Pressable10,
                 {
                   onPress: onClose,
                   style: [
-                    styles12.iconCloseButton,
-                    isDark && styles12.iconCloseButtonDark
+                    styles13.iconCloseButton,
+                    isDark && styles13.iconCloseButtonDark
                   ],
                   accessibilityLabel: "Close info sheet",
-                  children: /* @__PURE__ */ jsx13(IconClose, { size: 18, color: isDark ? "#f8fafc" : "#111827" })
+                  children: /* @__PURE__ */ jsx14(IconClose, { size: 18, color: isDark ? "#f8fafc" : "#111827" })
                 }
               ),
-              /* @__PURE__ */ jsx13(
-                Text8,
+              /* @__PURE__ */ jsx14(
+                Text9,
                 {
-                  style: [styles12.headerTitle, isDark && styles12.headerTitleDark],
+                  style: [styles13.headerTitle, isDark && styles13.headerTitleDark],
                   numberOfLines: 1,
                   children: locale === "pt-BR" ? "Informa\xE7\xF5es" : "Information"
                 }
               ),
-              /* @__PURE__ */ jsx13(View12, { style: styles12.topRowSpacer })
+              /* @__PURE__ */ jsx14(View13, { style: styles13.topRowSpacer })
             ] }),
-            /* @__PURE__ */ jsxs13(
-              ScrollView5,
+            /* @__PURE__ */ jsxs14(
+              ScrollView4,
               {
-                style: styles12.content,
-                contentContainerStyle: styles12.contentInner,
+                style: styles13.content,
+                contentContainerStyle: styles13.contentInner,
                 showsVerticalScrollIndicator: false,
                 children: [
-                  /* @__PURE__ */ jsx13(
-                    Text8,
+                  /* @__PURE__ */ jsx14(
+                    Text9,
                     {
-                      style: [styles12.sectionTitle, isDark && styles12.sectionTitleDark],
+                      style: [styles13.sectionTitle, isDark && styles13.sectionTitleDark],
                       children: locale === "pt-BR" ? "Informa\xE7\xF5es" : "Information"
                     }
                   ),
-                  /* @__PURE__ */ jsx13(View12, { style: styles12.rows, children: rows.map((row) => /* @__PURE__ */ jsxs13(
-                    View12,
+                  /* @__PURE__ */ jsx14(View13, { style: styles13.rows, children: rows.map((row) => /* @__PURE__ */ jsxs14(
+                    View13,
                     {
-                      style: [styles12.row, isDark && styles12.rowDark],
+                      style: [styles13.row, isDark && styles13.rowDark],
                       children: [
-                        /* @__PURE__ */ jsx13(Text8, { style: [styles12.label, isDark && styles12.labelDark], children: row.label }),
-                        /* @__PURE__ */ jsx13(
-                          Text8,
+                        /* @__PURE__ */ jsx14(Text9, { style: [styles13.label, isDark && styles13.labelDark], children: row.label }),
+                        /* @__PURE__ */ jsx14(
+                          Text9,
                           {
-                            style: [styles12.value, isDark && styles12.valueDark],
+                            style: [styles13.value, isDark && styles13.valueDark],
                             selectable: true,
                             children: row.value
                           }
@@ -28828,15 +29001,15 @@ function InfoSheet({
     }
   );
 }
-var styles12 = StyleSheet12.create({
+var styles13 = StyleSheet13.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,
@@ -28845,7 +29018,7 @@ var styles12 = StyleSheet12.create({
     maxHeight: "88%"
   },
   cardDark: {
-    backgroundColor: "#1f1f22"
+    backgroundColor: "#0f1115"
   },
   topRow: {
     flexDirection: "row",
@@ -28866,7 +29039,7 @@ var styles12 = StyleSheet12.create({
     backgroundColor: "#f1f5f9"
   },
   iconCloseButtonDark: {
-    backgroundColor: "#2a2a2f"
+    backgroundColor: "#111827"
   },
   headerTitle: {
     fontSize: 18,
@@ -28931,9 +29104,9 @@ var styles12 = StyleSheet12.create({
 });
 
 // components/OverflowSheet.tsx
-import { Modal as Modal7, Pressable as Pressable10, StyleSheet as StyleSheet13, Text as Text9, View as View13 } from "react-native";
+import { Modal as Modal5, Pressable as Pressable11, StyleSheet as StyleSheet14, Text as Text10, View as View14 } from "react-native";
 import { useViewerStore as useViewerStore12 } from "@papyrus-sdk/core";
-import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 var actionLabels = [{ key: "actions", label: "Document actions" }];
 function OverflowSheet({
   visible,
@@ -28945,30 +29118,30 @@ function OverflowSheet({
   const handlers = {
     actions: onOpenActions
   };
-  return /* @__PURE__ */ jsx14(
-    Modal7,
+  return /* @__PURE__ */ jsx15(
+    Modal5,
     {
       visible,
       transparent: true,
       animationType: "fade",
       onRequestClose: onClose,
-      children: /* @__PURE__ */ jsx14(Pressable10, { style: styles13.backdrop, onPress: onClose, children: /* @__PURE__ */ jsxs14(
-        Pressable10,
+      children: /* @__PURE__ */ jsx15(Pressable11, { style: styles14.backdrop, onPress: onClose, children: /* @__PURE__ */ jsxs15(
+        Pressable11,
         {
           onPress: (event) => event.stopPropagation(),
-          style: [styles13.card, isDark && styles13.cardDark],
+          style: [styles14.card, isDark && styles14.cardDark],
           children: [
-            /* @__PURE__ */ jsx14(View13, { style: styles13.handle }),
-            actionLabels.map((action) => /* @__PURE__ */ jsx14(
-              Pressable10,
+            /* @__PURE__ */ jsx15(View14, { style: styles14.handle }),
+            actionLabels.map((action) => /* @__PURE__ */ jsx15(
+              Pressable11,
               {
                 onPress: handlers[action.key],
-                style: [styles13.actionButton, { borderColor: accentColor }],
+                style: [styles14.actionButton, { borderColor: accentColor }],
                 accessibilityLabel: action.label,
-                children: /* @__PURE__ */ jsx14(
-                  Text9,
+                children: /* @__PURE__ */ jsx15(
+                  Text10,
                   {
-                    style: [styles13.actionText, isDark && styles13.actionTextDark],
+                    style: [styles14.actionText, isDark && styles14.actionTextDark],
                     children: action.label
                   }
                 )
@@ -28981,7 +29154,7 @@ function OverflowSheet({
     }
   );
 }
-var styles13 = StyleSheet13.create({
+var styles14 = StyleSheet14.create({
   backdrop: {
     flex: 1,
     backgroundColor: "rgba(15, 23, 42, 0.35)",
@@ -29022,12 +29195,16 @@ var styles13 = StyleSheet13.create({
 });
 
 // components/ProgressPill.tsx
-import { useMemo as useMemo7 } from "react";
-import { Pressable as Pressable11, StyleSheet as StyleSheet14, Text as Text10, View as View14 } from "react-native";
+import { useMemo as useMemo8 } from "react";
+import { Pressable as Pressable12, StyleSheet as StyleSheet15, Text as Text11, View as View15 } from "react-native";
 import { useViewerStore as useViewerStore13 } from "@papyrus-sdk/core";
-import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs16 } from "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,
@@ -29037,7 +29214,7 @@ function ProgressPill({ documentType, onPress }) {
     mobileProgressPillVisible
   } = useViewerStore13();
   const isDark = uiTheme === "dark";
-  const label = useMemo7(() => {
+  const label = useMemo8(() => {
     const total = Math.max(pageCount, 1);
     const percent = clampPercent(currentPage / total * 100);
     if (documentType === "pdf") {
@@ -29049,37 +29226,53 @@ function ProgressPill({ documentType, onPress }) {
     return `${percent}%`;
   }, [currentPage, documentType, pageCount]);
   if (!mobileChromeVisible || !mobileProgressPillVisible) return null;
-  return /* @__PURE__ */ jsx15(View14, { pointerEvents: "box-none", style: styles14.frame, children: /* @__PURE__ */ jsxs15(
-    Pressable11,
+  return /* @__PURE__ */ jsx16(View15, { pointerEvents: "box-none", style: styles15.frame, children: /* @__PURE__ */ jsxs16(
+    View15,
     {
-      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__ */ jsx15(
-          IconPageNav,
+        /* @__PURE__ */ jsx16(
+          Pressable12,
           {
-            size: 20,
-            color: isDark ? "#f8fafc" : "#111827",
-            strokeWidth: 1.8
+            onPress,
+            style: styles15.iconHit,
+            accessibilityLabel: "Open document navigation",
+            children: /* @__PURE__ */ jsx16(
+              IconPageNav,
+              {
+                size: 20,
+                color: isDark ? "#f8fafc" : "#111827",
+                strokeWidth: 1.8
+              }
+            )
           }
         ),
-        /* @__PURE__ */ jsx15(Text10, { style: [styles14.label, isDark && styles14.labelDark], children: label })
+        /* @__PURE__ */ jsx16(
+          Pressable12,
+          {
+            onPress,
+            onLongPress: onOpenPageJump,
+            style: styles15.labelHit,
+            accessibilityLabel: "Open page jump",
+            children: /* @__PURE__ */ jsx16(Text11, { style: [styles15.label, isDark && styles15.labelDark], children: label })
+          }
+        )
       ]
     }
   ) });
 }
-var styles14 = StyleSheet14.create({
+var styles15 = StyleSheet15.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
@@ -29101,6 +29294,12 @@ var styles14 = StyleSheet14.create({
     shadowOffset: { width: 0, height: 8 },
     elevation: 6
   },
+  iconHit: {
+    borderRadius: 8
+  },
+  labelHit: {
+    borderRadius: 8
+  },
   pillDark: {
     backgroundColor: "rgba(15,17,21,0.88)"
   },
@@ -29116,17 +29315,17 @@ var styles14 = StyleSheet14.create({
 });
 
 // components/SearchOverlay.tsx
-import { useEffect as useEffect9, useMemo as useMemo8, useState as useState8 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo9, useState as useState9 } from "react";
 import {
   Keyboard,
-  Pressable as Pressable12,
-  StyleSheet as StyleSheet15,
-  Text as Text11,
+  Pressable as Pressable13,
+  StyleSheet as StyleSheet16,
+  Text as Text12,
   TextInput as TextInput3,
-  View as View15
+  View as View16
 } from "react-native";
 import { SearchService, useViewerStore as useViewerStore14 } from "@papyrus-sdk/core";
-import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
 function SearchOverlay({
   engine,
   documentType,
@@ -29145,11 +29344,11 @@ function SearchOverlay({
     uiTheme,
     accentColor
   } = useViewerStore14();
-  const [draft, setDraft] = useState8(searchQuery);
-  const [isSearching, setIsSearching] = useState8(false);
+  const [draft, setDraft] = useState9(searchQuery);
+  const [isSearching, setIsSearching] = useState9(false);
   const isDark = uiTheme === "dark";
   const t = getStrings(locale);
-  const searchService = useMemo8(() => new SearchService(engine), [engine]);
+  const searchService = useMemo9(() => new 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;
   useEffect9(() => {
@@ -29175,23 +29374,23 @@ function SearchOverlay({
     onClose();
   };
   if (!visible) return null;
-  return /* @__PURE__ */ jsx16(View15, { pointerEvents: "box-none", style: styles15.frame, children: /* @__PURE__ */ jsxs16(
-    View15,
+  return /* @__PURE__ */ jsx17(View16, { pointerEvents: "box-none", style: styles16.frame, children: /* @__PURE__ */ jsxs17(
+    View16,
     {
-      style: [styles15.card, isDark && styles15.cardDark],
+      style: [styles16.card, isDark && styles16.cardDark],
       testID: "papyrus-search-overlay",
       children: [
-        /* @__PURE__ */ jsxs16(View15, { style: styles15.inputRow, children: [
-          /* @__PURE__ */ jsxs16(View15, { style: [styles15.searchInputWrap, isDark && styles15.searchInputWrapDark], children: [
-            /* @__PURE__ */ jsx16(IconSearch, { size: 16, color: isDark ? "#cbd5e1" : "#64748b" }),
-            /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsxs17(View16, { style: styles16.inputRow, children: [
+          /* @__PURE__ */ jsxs17(View16, { style: [styles16.searchInputWrap, isDark && styles16.searchInputWrapDark], children: [
+            /* @__PURE__ */ jsx17(IconSearch, { size: 16, color: isDark ? "#cbd5e1" : "#64748b" }),
+            /* @__PURE__ */ jsx17(
               TextInput3,
               {
                 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,
@@ -29199,74 +29398,74 @@ function SearchOverlay({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx16(
-            Pressable12,
+          /* @__PURE__ */ jsx17(
+            Pressable13,
             {
               onPress: handleClose,
-              style: [styles15.closeButton, isDark && styles15.closeButtonDark],
+              style: [styles16.closeButton, isDark && styles16.closeButtonDark],
               accessibilityLabel: "Close search",
-              children: /* @__PURE__ */ jsx16(Text11, { style: [styles15.closeText, isDark && styles15.closeTextDark], children: t.cancel })
+              children: /* @__PURE__ */ jsx17(Text12, { style: [styles16.closeText, isDark && styles16.closeTextDark], children: t.cancel })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs16(View15, { style: styles15.metaRow, children: [
-          /* @__PURE__ */ jsx16(
-            Pressable12,
+        /* @__PURE__ */ jsxs17(View16, { style: styles16.metaRow, children: [
+          /* @__PURE__ */ jsx17(
+            Pressable13,
             {
               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__ */ jsx16(IconChevronLeft, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
+              children: /* @__PURE__ */ jsx17(IconChevronLeft, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
             }
           ),
-          /* @__PURE__ */ jsx16(Text11, { style: [styles15.metaText, isDark && styles15.metaTextDark], children: isSearching ? t.searching : `${currentCount}/${searchResults.length} ${targetLabel}` }),
-          /* @__PURE__ */ jsx16(
-            Pressable12,
+          /* @__PURE__ */ jsx17(Text12, { style: [styles16.metaText, isDark && styles16.metaTextDark], children: isSearching ? t.searching : `${currentCount}/${searchResults.length} ${targetLabel}` }),
+          /* @__PURE__ */ jsx17(
+            Pressable13,
             {
               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__ */ jsx16(IconChevronRight, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
+              children: /* @__PURE__ */ jsx17(IconChevronRight, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs16(View15, { style: styles15.actionsRow, children: [
-          /* @__PURE__ */ jsx16(
-            Pressable12,
+        /* @__PURE__ */ jsxs17(View16, { style: styles16.actionsRow, children: [
+          /* @__PURE__ */ jsx17(
+            Pressable13,
             {
               onPress: handleSubmit,
-              style: [styles15.primaryAction, { backgroundColor: accentColor }],
+              style: [styles16.primaryAction, { backgroundColor: accentColor }],
               accessibilityLabel: "Run search",
-              children: /* @__PURE__ */ jsx16(Text11, { style: styles15.primaryActionText, children: t.searchGo })
+              children: /* @__PURE__ */ jsx17(Text12, { style: styles16.primaryActionText, children: t.searchGo })
             }
           ),
-          /* @__PURE__ */ jsx16(
-            Pressable12,
+          /* @__PURE__ */ jsx17(
+            Pressable13,
             {
               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__ */ jsx16(
-                Text11,
+              children: /* @__PURE__ */ jsx17(
+                Text12,
                 {
                   style: [
-                    styles15.secondaryActionText,
-                    isDark && styles15.secondaryActionTextDark
+                    styles16.secondaryActionText,
+                    isDark && styles16.secondaryActionTextDark
                   ],
                   children: t.allResults
                 }
@@ -29278,7 +29477,7 @@ function SearchOverlay({
     }
   ) });
 }
-var styles15 = StyleSheet15.create({
+var styles16 = StyleSheet16.create({
   frame: {
     position: "absolute",
     left: 0,
@@ -29420,15 +29619,15 @@ var styles15 = StyleSheet15.create({
 
 // components/SearchResultsSheet.tsx
 import {
-  Modal as Modal8,
-  Pressable as Pressable13,
-  ScrollView as ScrollView6,
-  StyleSheet as StyleSheet16,
-  Text as Text12,
-  View as View16
+  Modal as Modal6,
+  Pressable as Pressable14,
+  ScrollView as ScrollView5,
+  StyleSheet as StyleSheet17,
+  Text as Text13,
+  View as View17
 } from "react-native";
 import { useViewerStore as useViewerStore15 } from "@papyrus-sdk/core";
-import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
 function SearchResultsSheet({
   documentType,
   visible,
@@ -29452,29 +29651,29 @@ function SearchResultsSheet({
     const percent = pageCount <= 1 ? 100 : Math.round((pageIndex + 1) / pageCount * 100);
     return `${t.progress} ${percent}%`;
   };
-  return /* @__PURE__ */ jsx17(
-    Modal8,
+  return /* @__PURE__ */ jsx18(
+    Modal6,
     {
       visible,
       transparent: true,
       animationType: "slide",
       onRequestClose: onClose,
-      children: /* @__PURE__ */ jsxs17(View16, { style: styles16.modalRoot, children: [
-        /* @__PURE__ */ jsx17(Pressable13, { style: styles16.backdrop, onPress: onClose }),
-        /* @__PURE__ */ jsxs17(View16, { style: [styles16.sheet, isDark && styles16.sheetDark], children: [
-          /* @__PURE__ */ jsx17(View16, { style: [styles16.handle, isDark && styles16.handleDark] }),
-          /* @__PURE__ */ jsxs17(View16, { style: styles16.header, children: [
-            /* @__PURE__ */ jsx17(Text12, { style: [styles16.title, isDark && styles16.titleDark], children: t.allResults }),
-            /* @__PURE__ */ jsxs17(Text12, { style: [styles16.meta, isDark && styles16.metaDark], children: [
+      children: /* @__PURE__ */ jsxs18(View17, { style: styles17.modalRoot, children: [
+        /* @__PURE__ */ jsx18(Pressable14, { style: styles17.backdrop, onPress: onClose }),
+        /* @__PURE__ */ jsxs18(View17, { style: [styles17.sheet, isDark && styles17.sheetDark], children: [
+          /* @__PURE__ */ jsx18(View17, { style: [styles17.handle, isDark && styles17.handleDark] }),
+          /* @__PURE__ */ jsxs18(View17, { style: styles17.header, children: [
+            /* @__PURE__ */ jsx18(Text13, { style: [styles17.title, isDark && styles17.titleDark], children: t.allResults }),
+            /* @__PURE__ */ jsxs18(Text13, { style: [styles17.meta, isDark && styles17.metaDark], children: [
               searchResults.length,
               " ",
               t.results
             ] })
           ] }),
-          /* @__PURE__ */ jsx17(ScrollView6, { contentContainerStyle: styles16.content, children: searchResults.length === 0 ? /* @__PURE__ */ jsx17(Text12, { style: [styles16.emptyText, isDark && styles16.emptyTextDark], children: t.noResults }) : searchResults.map((result, index) => {
+          /* @__PURE__ */ jsx18(ScrollView5, { contentContainerStyle: styles17.content, children: searchResults.length === 0 ? /* @__PURE__ */ jsx18(Text13, { style: [styles17.emptyText, isDark && styles17.emptyTextDark], children: t.noResults }) : searchResults.map((result, index) => {
             const isActive = index === activeSearchIndex;
-            return /* @__PURE__ */ jsxs17(
-              Pressable13,
+            return /* @__PURE__ */ jsxs18(
+              Pressable14,
               {
                 onPress: () => {
                   setDocumentState({
@@ -29485,21 +29684,21 @@ function SearchResultsSheet({
                   onClose();
                 },
                 style: [
-                  styles16.resultCard,
-                  isDark && styles16.resultCardDark,
+                  styles17.resultCard,
+                  isDark && styles17.resultCardDark,
                   isActive && {
                     borderColor: accentColor,
                     backgroundColor: `${accentColor}14`
                   }
                 ],
                 children: [
-                  /* @__PURE__ */ jsx17(Text12, { style: [styles16.resultLabel, { color: accentColor }], children: getResultLabel(result.pageIndex) }),
-                  /* @__PURE__ */ jsx17(
-                    Text12,
+                  /* @__PURE__ */ jsx18(Text13, { style: [styles17.resultLabel, { color: accentColor }], children: getResultLabel(result.pageIndex) }),
+                  /* @__PURE__ */ jsx18(
+                    Text13,
                     {
                       style: [
-                        styles16.resultText,
-                        isDark && styles16.resultTextDark
+                        styles17.resultText,
+                        isDark && styles17.resultTextDark
                       ],
                       children: result.text
                     }
@@ -29514,13 +29713,13 @@ function SearchResultsSheet({
     }
   );
 }
-var styles16 = StyleSheet16.create({
+var styles17 = StyleSheet17.create({
   modalRoot: {
     flex: 1,
     backgroundColor: "transparent"
   },
   backdrop: {
-    ...StyleSheet16.absoluteFillObject,
+    ...StyleSheet17.absoluteFillObject,
     backgroundColor: "rgba(0, 0, 0, 0.4)"
   },
   sheet: {
@@ -29615,7 +29814,7 @@ var styles16 = StyleSheet16.create({
 var isSidebarBoundDestination = (destination) => destination === "pages" || destination === "contents" || destination === "progress" || destination === "notes";
 
 // components/ReadingShell.tsx
-import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
 function ReadingShell({
   engine,
   title,
@@ -29629,14 +29828,21 @@ function ReadingShell({
     openMobileDestination,
     setDocumentState,
     setMobileKeyboardOpen,
-    sidebarRightOpen
+    triggerScrollToPage,
+    sidebarRightOpen,
+    currentPage,
+    pageCount,
+    uiTheme,
+    accentColor
   } = useViewerStore16();
-  const [overflowOpen, setOverflowOpen] = useState9(false);
-  const [infoOpen, setInfoOpen] = useState9(false);
-  const [actionsOpen, setActionsOpen] = useState9(false);
-  const [settingsOpen, setSettingsOpen] = useState9(false);
-  const [searchResultsOpen, setSearchResultsOpen] = useState9(false);
-  React11.useEffect(() => {
+  const [overflowOpen, setOverflowOpen] = useState10(false);
+  const [infoOpen, setInfoOpen] = useState10(false);
+  const [actionsOpen, setActionsOpen] = useState10(false);
+  const [settingsOpen, setSettingsOpen] = useState10(false);
+  const [searchResultsOpen, setSearchResultsOpen] = useState10(false);
+  const [pageJumpOpen, setPageJumpOpen] = useState10(false);
+  const isDark = uiTheme === "dark";
+  React13.useEffect(() => {
     const showSubscription = Keyboard2.addListener("keyboardDidShow", () => {
       setMobileKeyboardOpen(true);
     });
@@ -29648,7 +29854,7 @@ function ReadingShell({
       hideSubscription.remove();
     };
   }, [setMobileKeyboardOpen]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     if (sidebarRightOpen) return;
     if (isSidebarBoundDestination(activeMobileDestination)) {
       closeMobileDestination();
@@ -29689,8 +29895,13 @@ function ReadingShell({
       setActionsOpen(true);
     }
   };
-  return /* @__PURE__ */ jsxs18(View17, { style: styles17.container, testID: "papyrus-rn-reading-shell", children: [
-    /* @__PURE__ */ jsx18(
+  const navigateToPage = (page) => {
+    engine.goToPage(page);
+    setDocumentState({ currentPage: page });
+    triggerScrollToPage(page - 1);
+  };
+  return /* @__PURE__ */ jsxs19(View18, { style: styles18.container, testID: "papyrus-rn-reading-shell", children: [
+    /* @__PURE__ */ jsx19(
       Topbar_default,
       {
         engine,
@@ -29702,20 +29913,22 @@ function ReadingShell({
           setSettingsOpen(false);
           setOverflowOpen(true);
         },
+        onOpenPageJump: () => setPageJumpOpen(true),
         showPageNavigationControls: false
       }
     ),
-    /* @__PURE__ */ jsx18(View17, { style: styles17.viewerStage, children: /* @__PURE__ */ jsx18(Viewer_default, { engine, ...viewerProps }) }),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(View18, { style: styles18.viewerStage, children: /* @__PURE__ */ jsx19(Viewer_default, { engine, ...viewerProps }) }),
+    /* @__PURE__ */ jsx19(
       ProgressPill,
       {
         documentType,
         onPress: () => openDestination(
           documentType === "pdf" ? "pages" : documentType === "epub" ? "contents" : "progress"
-        )
+        ),
+        onOpenPageJump: () => setPageJumpOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       BottomBar_default,
       {
         documentType,
@@ -29724,7 +29937,7 @@ function ReadingShell({
         onOpenSettings: () => openDestination("display")
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       SearchOverlay,
       {
         engine,
@@ -29737,7 +29950,7 @@ function ReadingShell({
         onOpenResults: () => setSearchResultsOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       SearchResultsSheet,
       {
         documentType,
@@ -29745,15 +29958,16 @@ function ReadingShell({
         onClose: () => setSearchResultsOpen(false)
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       RightSheet_default,
       {
         engine,
         documentType,
-        thumbsInitialCount
+        thumbsInitialCount,
+        onOpenPageJump: () => setPageJumpOpen(true)
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       OverflowSheet,
       {
         visible: overflowOpen,
@@ -29767,7 +29981,7 @@ function ReadingShell({
         }
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       InfoSheet,
       {
         visible: infoOpen,
@@ -29779,7 +29993,7 @@ function ReadingShell({
         }
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       DocumentActionsSheet,
       {
         visible: actionsOpen,
@@ -29789,7 +30003,7 @@ function ReadingShell({
         }
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       SettingsSheet_default,
       {
         engine,
@@ -29799,10 +30013,22 @@ function ReadingShell({
           closeMobileDestination();
         }
       }
+    ),
+    /* @__PURE__ */ jsx19(
+      PageJumpModal,
+      {
+        visible: pageJumpOpen,
+        currentPage,
+        pageCount,
+        isDark,
+        accentColor,
+        onClose: () => setPageJumpOpen(false),
+        onConfirm: navigateToPage
+      }
     )
   ] });
 }
-var styles17 = StyleSheet17.create({
+var styles18 = StyleSheet18.create({
   container: {
     flex: 1
   },
@@ -29817,6 +30043,7 @@ export {
   CoverPreview_default as CoverPreview,
   DocumentActionsSheet,
   InfoSheet,
+  MOBILE_CHROME_METRICS,
   OverflowSheet,
   PageRenderer_default as PageRenderer,
   ProgressPill,