@papyrus-sdk/ui-react-native 0.2.16 → 0.2.17

package/dist/index.mjs

@@ -1,12 +1,13 @@
 import {
   DEFAULT_PINCH_ZOOM_BOUNDS,
   resolveAnchoredViewportOffset,
-  resolveClampedScrollOffset,
+  resolveDocumentSurfaceWidth,
+  resolveGlobalHorizontalOffset,
   resolvePinchGestureZoom,
   resolvePinchPreviewScale,
   sanitizePinchPreviewScale,
   shouldSuppressPressAfterPinch
-} from "./chunk-PE5U4ZWV.mjs";
+} from "./chunk-3IPQ5HO7.mjs";
 import {
   getSelectionEdgeAutoscroll,
   getToolDockDismissState,
@@ -21014,7 +21015,7 @@ import {
 } from "react";
 import {
   FlatList,
-  ScrollView as ScrollView2,
+  ScrollView,
   StyleSheet as StyleSheet3,
   View as View3,
   useWindowDimensions as useWindowDimensions2
@@ -21035,7 +21036,6 @@ import {
   View,
   StyleSheet,
   Pressable,
-  ScrollView,
   PanResponder,
   Platform,
   findNodeHandle,
@@ -21313,8 +21313,6 @@ var buildSquigglyPath = (segments = 16) => {
   return path;
 };
 var SQUIGGLY_PATH = buildSquigglyPath();
-var SELECTION_EDGE_THRESHOLD_PX = 48;
-var SELECTION_EDGE_MAX_STEP_PX = 24;
 var SELECTION_AUTOSCROLL_INTERVAL_MS = 16;
 var PageRenderer = ({
   engine,
@@ -21323,17 +21321,15 @@ var PageRenderer = ({
   pageAspectRatio,
   PageViewComponent = PapyrusPageView,
   availableWidth,
+  pageViewportWidth: providedPageViewportWidth,
   horizontalPadding = 16,
   spacing = 24,
   onSelectionDragActiveChange,
   gestureScrollLockActive = false,
   lastPinchEndedAt = null,
-  onHorizontalScrollOffsetChange,
-  horizontalScrollRestore = null,
   requestSelectionVerticalAutoscroll
 }) => {
   const viewRef = useRef(null);
-  const pageScrollRef = useRef(null);
   const [layout, setLayout] = useState({ width: 0, height: 0 });
   const [pageSize, setPageSize] = useState(null);
   const { width: windowWidth } = useWindowDimensions();
@@ -21341,10 +21337,8 @@ var PageRenderer = ({
   const perfEnabled = isMobilePerfEnabled();
   const renderCountRef = useRef(0);
   const inkDrawingActiveRef = useRef(false);
-  const horizontalScrollOffsetRef = useRef(0);
   const selectionDragActiveRef = useRef(false);
   const selectionDragPointRef = useRef(null);
-  const lastAppliedHorizontalRestoreRef = useRef(null);
   const selectionAutoscrollIntervalRef = useRef(null);
   const rawTouchMoveLoggedAtRef = useRef(0);
   const currentInkStyleRef = useRef({
@@ -21608,10 +21602,7 @@ var PageRenderer = ({
     setInkPoints([]);
     inkPointsRef.current = [];
   }, [resolvedActiveTool]);
-  const pageViewportWidth = Math.max(
-    0,
-    (availableWidth ?? windowWidth) - horizontalPadding * 2
-  );
+  const viewportWidth = providedPageViewportWidth ?? availableWidth ?? windowWidth;
   const selectionEnabled = Platform.OS === "web" || isNative && shouldEnableSelectionDrag({
     activeTool: resolvedActiveTool,
     interactionMode: resolvedInteractionMode
@@ -21759,35 +21750,12 @@ var PageRenderer = ({
       stopSelectionAutoscroll();
       return;
     }
-    const visibleX = point.x - horizontalScrollOffsetRef.current;
-    const { dx } = getSelectionEdgeAutoscroll({
-      x: visibleX,
-      y: SELECTION_EDGE_THRESHOLD_PX,
-      width: pageViewportWidth,
-      height: SELECTION_EDGE_THRESHOLD_PX * 2,
-      threshold: SELECTION_EDGE_THRESHOLD_PX,
-      maxStep: SELECTION_EDGE_MAX_STEP_PX
-    });
-    let appliedDx = 0;
-    if (dx !== 0 && pageViewportWidth > 0) {
-      const maxOffsetX = Math.max(0, layout.width - pageViewportWidth);
-      const nextOffsetX = clamp(
-        horizontalScrollOffsetRef.current + dx,
-        0,
-        maxOffsetX
-      );
-      appliedDx = nextOffsetX - horizontalScrollOffsetRef.current;
-      if (appliedDx !== 0) {
-        horizontalScrollOffsetRef.current = nextOffsetX;
-        pageScrollRef.current?.scrollTo({ x: nextOffsetX, animated: false });
-      }
-    }
     const appliedDy = requestSelectionVerticalAutoscroll?.(point.absoluteY) ?? 0;
-    if (appliedDx === 0 && appliedDy === 0) {
+    if (appliedDy === 0) {
       stopSelectionAutoscroll();
       return;
     }
-    const nextX = clamp(point.x + appliedDx, 0, layout.width);
+    const nextX = point.x;
     const nextY = clamp(point.y + appliedDy, 0, layout.height);
     selectionDragPointRef.current = {
       absoluteY: point.absoluteY,
@@ -21798,7 +21766,6 @@ var PageRenderer = ({
   }, [
     layout.height,
     layout.width,
-    pageViewportWidth,
     requestSelectionVerticalAutoscroll,
     stopSelectionAutoscroll,
     updateSelectionRectFromPoint
@@ -22248,56 +22215,19 @@ var PageRenderer = ({
   const baseWidth = containerWidth * 0.92;
   const pageWidth = isNative ? baseWidth * zoom : baseWidth;
   const pageHeight = pageWidth / aspectRatio;
-  const hasActiveSelection = selectionRects.length > 0 || !!selectionBounds || isSelecting;
-  const scrollEnabled = isNative && zoom > 1 && !hasActiveSelection && !isInkDrawing && !gestureScrollLockActive;
-  useEffect(() => {
-    if (!horizontalScrollRestore) return;
-    if (lastAppliedHorizontalRestoreRef.current === horizontalScrollRestore.requestId) {
-      return;
-    }
-    const nextOffsetX = resolveClampedScrollOffset(
-      horizontalScrollRestore.offsetX,
-      pageWidth,
-      pageViewportWidth
-    );
-    lastAppliedHorizontalRestoreRef.current = horizontalScrollRestore.requestId;
-    horizontalScrollOffsetRef.current = nextOffsetX;
-    pageScrollRef.current?.scrollTo({ x: nextOffsetX, animated: false });
-    onHorizontalScrollOffsetChange?.(pageIndex, nextOffsetX);
-  }, [
-    horizontalScrollRestore,
-    onHorizontalScrollOffsetChange,
-    pageIndex,
-    pageViewportWidth,
-    pageWidth
-  ]);
+  const pageFrameWidth = Math.max(
+    viewportWidth,
+    pageWidth + horizontalPadding * 2
+  );
   return /* @__PURE__ */ jsx(
-    ScrollView,
+    View,
     {
-      ref: pageScrollRef,
-      horizontal: true,
-      scrollEnabled,
-      showsHorizontalScrollIndicator: false,
-      onScroll: (event) => {
-        const nextOffsetX = event.nativeEvent.contentOffset?.x ?? 0;
-        horizontalScrollOffsetRef.current = nextOffsetX;
-      },
-      onScrollEndDrag: () => {
-        onHorizontalScrollOffsetChange?.(
-          pageIndex,
-          horizontalScrollOffsetRef.current
-        );
-      },
-      onMomentumScrollEnd: () => {
-        onHorizontalScrollOffsetChange?.(
-          pageIndex,
-          horizontalScrollOffsetRef.current
-        );
-      },
-      scrollEventThrottle: 16,
-      contentContainerStyle: [
+      style: [
         styles.scrollContent,
-        { paddingHorizontal: horizontalPadding }
+        {
+          width: pageFrameWidth,
+          paddingHorizontal: horizontalPadding
+        }
       ],
       children: /* @__PURE__ */ jsx(GestureDetector, { gesture: contentGesture, children: /* @__PURE__ */ jsxs(
         Pressable,
@@ -22998,7 +22928,7 @@ var styles = StyleSheet.create({
     borderRadius: 3
   }
 });
-var arePageRendererPropsEqual = (previous, next) => previous.engine === next.engine && previous.pageIndex === next.pageIndex && previous.scale === next.scale && previous.PageViewComponent === next.PageViewComponent && previous.availableWidth === next.availableWidth && previous.horizontalPadding === next.horizontalPadding && previous.spacing === next.spacing && previous.onSelectionDragActiveChange === next.onSelectionDragActiveChange && previous.gestureScrollLockActive === next.gestureScrollLockActive && previous.lastPinchEndedAt === next.lastPinchEndedAt && previous.onHorizontalScrollOffsetChange === next.onHorizontalScrollOffsetChange && previous.horizontalScrollRestore?.requestId === next.horizontalScrollRestore?.requestId && previous.horizontalScrollRestore?.offsetX === next.horizontalScrollRestore?.offsetX && previous.requestSelectionVerticalAutoscroll === next.requestSelectionVerticalAutoscroll;
+var arePageRendererPropsEqual = (previous, next) => previous.engine === next.engine && previous.pageIndex === next.pageIndex && previous.scale === next.scale && previous.PageViewComponent === next.PageViewComponent && previous.availableWidth === next.availableWidth && previous.pageViewportWidth === next.pageViewportWidth && previous.horizontalPadding === next.horizontalPadding && previous.spacing === next.spacing && previous.onSelectionDragActiveChange === next.onSelectionDragActiveChange && previous.gestureScrollLockActive === next.gestureScrollLockActive && previous.lastPinchEndedAt === next.lastPinchEndedAt && previous.requestSelectionVerticalAutoscroll === next.requestSelectionVerticalAutoscroll;
 var PageRenderer_default = memo(PageRenderer, arePageRendererPropsEqual);
 
 // components/WebViewViewer.tsx
@@ -23150,8 +23080,8 @@ var MOBILE_CHROME_HIDE_DELTA = 28;
 var MOBILE_CHROME_SHOW_DELTA = 22;
 var MOBILE_CHROME_SHOW_DELAY_MS = 180;
 var MOBILE_CHROME_TOP_RESET = 16;
-var SELECTION_EDGE_THRESHOLD_PX2 = 48;
-var SELECTION_EDGE_MAX_STEP_PX2 = 24;
+var SELECTION_EDGE_THRESHOLD_PX = 48;
+var SELECTION_EDGE_MAX_STEP_PX = 24;
 var resolvePositiveInt = (value, fallback, min, max) => {
   if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
   const rounded = Math.round(value);
@@ -23176,6 +23106,7 @@ var Viewer = ({
   const viewMode = useViewerStore3((state) => state.viewMode);
   const zoom = useViewerStore3((state) => state.zoom);
   const listRef = useRef3(null);
+  const horizontalScrollRef = useRef3(null);
   const isDark = uiTheme === "dark";
   const { width: windowWidth } = useWindowDimensions2();
   const isDouble = viewMode === "double";
@@ -23215,18 +23146,16 @@ var Viewer = ({
   const gestureScrollLockActiveRef = useRef3(false);
   const [pinchPreviewScale, setPinchPreviewScale] = useState2(1);
   const [lastPinchEndedAt, setLastPinchEndedAt] = useState2(null);
-  const [horizontalScrollRestore, setHorizontalScrollRestore] = useState2(null);
   const pinchGestureActiveRef = useRef3(false);
   const pinchStartZoomRef = useRef3(1);
   const pinchPreviewZoomRef = useRef3(1);
   const pinchFocalPointRef = useRef3({ x: 0, y: 0 });
   const pinchUpdateLoggedAtRef = useRef3(0);
-  const horizontalScrollOffsetsRef = useRef3(/* @__PURE__ */ new Map());
+  const horizontalScrollOffsetRef = useRef3(0);
   const pendingPinchAnchorRestoreRef = useRef3(
     null
   );
   const pinchAnchorRestoreFrameRef = useRef3(null);
-  const nextHorizontalRestoreRequestIdRef = useRef3(0);
   const viewerFrameRef = useRef3({ y: 0, height: 0 });
   const viewerContentHeightRef = useRef3(0);
   const resolvedWindowSize = useMemo3(
@@ -23526,6 +23455,30 @@ var Viewer = ({
     },
     [columnGap, columnWidth, horizontalPadding, isDouble, windowWidth]
   );
+  const documentSurfaceWidth = useMemo3(() => {
+    if (isDouble) {
+      const leftPageWidth = getPageWidthForZoom(0, zoom);
+      const doubleContentWidth = leftPageWidth * 2 + columnGap;
+      return resolveDocumentSurfaceWidth({
+        viewportWidth: windowWidth,
+        contentWidth: doubleContentWidth,
+        horizontalPadding
+      });
+    }
+    return resolveDocumentSurfaceWidth({
+      viewportWidth: windowWidth,
+      contentWidth: getPageWidthForZoom(currentPage - 1, zoom),
+      horizontalPadding
+    });
+  }, [
+    columnGap,
+    currentPage,
+    getPageWidthForZoom,
+    horizontalPadding,
+    isDouble,
+    windowWidth,
+    zoom
+  ]);
   const getPageLayoutForZoom = useCallback2(
     (pageIndex, zoomValue) => {
       if (isSingle) {
@@ -23760,7 +23713,7 @@ var Viewer = ({
         startPageOffsetY,
         startPageHeight,
         startPageWidth,
-        startPageScrollX: horizontalScrollOffsetsRef.current.get(anchorPageIndex) ?? 0,
+        startSurfaceScrollX: horizontalScrollOffsetRef.current,
         pageViewportWidth,
         pageHorizontalPadding,
         pageViewportContentOffsetX: Math.max(
@@ -23796,34 +23749,21 @@ var Viewer = ({
     setDocumentStateTracked,
     zoom
   ]);
-  const handlePageHorizontalScrollOffsetChange = useCallback2(
-    (pageIndex, offsetX) => {
-      horizontalScrollOffsetsRef.current.set(pageIndex, Math.max(0, offsetX));
-      const pageWidth = getPageWidthForZoom(pageIndex, zoom);
-      const { viewportWidth, horizontalPadding: horizontalPadding2 } = getPageViewportMetrics(pageIndex);
-      const pageViewportWidth = Math.max(
-        0,
-        viewportWidth - horizontalPadding2 * 2
-      );
-      const nextOffsetX = resolveClampedScrollOffset(
+  const scrollHorizontalSurfaceTo = useCallback2(
+    (offsetX) => {
+      const nextOffsetX = resolveGlobalHorizontalOffset({
         offsetX,
-        pageWidth,
-        pageViewportWidth
-      );
-      setHorizontalScrollRestore((current) => {
-        if (current && Math.abs(current.offsetX - nextOffsetX) < 0.5) {
-          return current;
-        }
-        const requestId = nextHorizontalRestoreRequestIdRef.current + 1;
-        nextHorizontalRestoreRequestIdRef.current = requestId;
-        return {
-          pageIndex,
-          requestId,
-          offsetX: nextOffsetX
-        };
+        surfaceWidth: documentSurfaceWidth,
+        viewportWidth: windowWidth
+      });
+      horizontalScrollOffsetRef.current = nextOffsetX;
+      horizontalScrollRef.current?.scrollTo({
+        x: nextOffsetX,
+        animated: false
       });
+      return nextOffsetX;
     },
-    [getPageViewportMetrics, getPageWidthForZoom, zoom]
+    [documentSurfaceWidth, windowWidth]
   );
   const viewerPinchGesture = useMemo3(
     () => Gesture2.Pinch().enabled(!isWebView && pageCount > 0).onTouchesDown((event) => {
@@ -23906,7 +23846,7 @@ var Viewer = ({
       );
       const nextOffsetX = resolveAnchoredViewportOffset({
         viewportOffset: pendingRestore.pageViewportContentOffsetX,
-        startScrollOffset: pendingRestore.startPageScrollX,
+        startScrollOffset: pendingRestore.startSurfaceScrollX,
         startItemOffset: 0,
         startItemLength: pendingRestore.startPageWidth,
         endItemOffset: 0,
@@ -23914,19 +23854,13 @@ var Viewer = ({
         viewportLength: pageViewportContentWidth,
         endContentLength: endPageWidth
       });
-      const requestId = nextHorizontalRestoreRequestIdRef.current + 1;
-      nextHorizontalRestoreRequestIdRef.current = requestId;
-      setHorizontalScrollRestore({
-        pageIndex: pendingRestore.pageIndex,
-        requestId,
-        offsetX: nextOffsetX
-      });
+      const appliedOffsetX = scrollHorizontalSurfaceTo(nextOffsetX);
       pendingPinchAnchorRestoreRef.current = null;
       if (perfEnabled) {
         logPerfEvent("Viewer", "pinch.anchorRestore", {
           page: pendingRestore.pageIndex + 1,
           scrollY: Math.round(nextScrollY * 100) / 100,
-          scrollX: Math.round(nextOffsetX * 100) / 100,
+          scrollX: Math.round(appliedOffsetX * 100) / 100,
           zoom: Math.round(zoom * 100) / 100
         });
       }
@@ -23937,22 +23871,18 @@ var Viewer = ({
         pinchAnchorRestoreFrameRef.current = null;
       }
     };
-  }, [getPageLayoutForZoom, getPageWidthForZoom, isSingle, perfEnabled, zoom]);
+  }, [
+    getPageLayoutForZoom,
+    getPageWidthForZoom,
+    isSingle,
+    perfEnabled,
+    scrollHorizontalSurfaceTo,
+    zoom
+  ]);
   useEffect3(() => {
-    if (zoom > 1) return;
-    setHorizontalScrollRestore((current) => {
-      if (!current || Math.abs(current.offsetX) < 0.5) {
-        return current;
-      }
-      const requestId = nextHorizontalRestoreRequestIdRef.current + 1;
-      nextHorizontalRestoreRequestIdRef.current = requestId;
-      return {
-        pageIndex: current.pageIndex,
-        requestId,
-        offsetX: 0
-      };
-    });
-  }, [zoom]);
+    if (zoom > 1 && documentSurfaceWidth > windowWidth) return;
+    scrollHorizontalSurfaceTo(0);
+  }, [documentSurfaceWidth, scrollHorizontalSurfaceTo, windowWidth, zoom]);
   const captureViewerFrame = useCallback2((node) => {
     const measurable = node;
     measurable?.measureInWindow?.((_, y, __, height) => {
@@ -23992,12 +23922,12 @@ var Viewer = ({
       if (!Number.isFinite(absoluteY) || frame.height <= 0) return 0;
       const relativeY = absoluteY - frame.y;
       const { dy } = getSelectionEdgeAutoscroll({
-        x: SELECTION_EDGE_THRESHOLD_PX2,
+        x: SELECTION_EDGE_THRESHOLD_PX,
         y: relativeY,
-        width: SELECTION_EDGE_THRESHOLD_PX2 * 2,
+        width: SELECTION_EDGE_THRESHOLD_PX * 2,
         height: frame.height,
-        threshold: SELECTION_EDGE_THRESHOLD_PX2,
-        maxStep: SELECTION_EDGE_MAX_STEP_PX2
+        threshold: SELECTION_EDGE_THRESHOLD_PX,
+        maxStep: SELECTION_EDGE_MAX_STEP_PX
       });
       return scrollViewerBy(dy);
     },
@@ -24235,42 +24165,49 @@ var Viewer = ({
     ({ item }) => {
       if (isDouble) {
         const row = item;
-        return /* @__PURE__ */ jsxs3(View3, { style: [styles3.row, { paddingHorizontal: horizontalPadding }], children: [
-          /* @__PURE__ */ jsx3(View3, { style: { width: columnWidth }, children: /* @__PURE__ */ jsx3(
-            PageRenderer_default,
-            {
-              engine,
-              pageIndex: row.left,
-              pageAspectRatio: getPageAspectRatio(row.left),
-              availableWidth: columnWidth,
-              horizontalPadding: 8,
-              spacing: DOUBLE_PAGE_SPACING,
-              onSelectionDragActiveChange: setSelectionDragActive,
-              gestureScrollLockActive,
-              lastPinchEndedAt,
-              onHorizontalScrollOffsetChange: handlePageHorizontalScrollOffsetChange,
-              horizontalScrollRestore,
-              requestSelectionVerticalAutoscroll: handleSelectionVerticalAutoscroll
-            }
-          ) }),
-          row.right !== null ? /* @__PURE__ */ jsx3(View3, { style: { width: columnWidth }, children: /* @__PURE__ */ jsx3(
-            PageRenderer_default,
-            {
-              engine,
-              pageIndex: row.right,
-              pageAspectRatio: getPageAspectRatio(row.right),
-              availableWidth: columnWidth,
-              horizontalPadding: 8,
-              spacing: DOUBLE_PAGE_SPACING,
-              onSelectionDragActiveChange: setSelectionDragActive,
-              gestureScrollLockActive,
-              lastPinchEndedAt,
-              onHorizontalScrollOffsetChange: handlePageHorizontalScrollOffsetChange,
-              horizontalScrollRestore,
-              requestSelectionVerticalAutoscroll: handleSelectionVerticalAutoscroll
-            }
-          ) }) : /* @__PURE__ */ jsx3(View3, { style: { width: columnWidth } })
-        ] });
+        return /* @__PURE__ */ jsxs3(
+          View3,
+          {
+            style: [
+              styles3.row,
+              { paddingHorizontal: horizontalPadding, width: documentSurfaceWidth }
+            ],
+            children: [
+              /* @__PURE__ */ jsx3(View3, { style: { width: columnWidth }, children: /* @__PURE__ */ jsx3(
+                PageRenderer_default,
+                {
+                  engine,
+                  pageIndex: row.left,
+                  pageAspectRatio: getPageAspectRatio(row.left),
+                  availableWidth: columnWidth,
+                  horizontalPadding: 8,
+                  pageViewportWidth: columnWidth,
+                  spacing: DOUBLE_PAGE_SPACING,
+                  onSelectionDragActiveChange: setSelectionDragActive,
+                  gestureScrollLockActive,
+                  lastPinchEndedAt,
+                  requestSelectionVerticalAutoscroll: handleSelectionVerticalAutoscroll
+                }
+              ) }),
+              row.right !== null ? /* @__PURE__ */ jsx3(View3, { style: { width: columnWidth }, children: /* @__PURE__ */ jsx3(
+                PageRenderer_default,
+                {
+                  engine,
+                  pageIndex: row.right,
+                  pageAspectRatio: getPageAspectRatio(row.right),
+                  availableWidth: columnWidth,
+                  horizontalPadding: 8,
+                  pageViewportWidth: columnWidth,
+                  spacing: DOUBLE_PAGE_SPACING,
+                  onSelectionDragActiveChange: setSelectionDragActive,
+                  gestureScrollLockActive,
+                  lastPinchEndedAt,
+                  requestSelectionVerticalAutoscroll: handleSelectionVerticalAutoscroll
+                }
+              ) }) : /* @__PURE__ */ jsx3(View3, { style: { width: columnWidth } })
+            ]
+          }
+        );
       }
       return /* @__PURE__ */ jsx3(
         PageRenderer_default,
@@ -24278,27 +24215,27 @@ var Viewer = ({
           engine,
           pageIndex: item,
           pageAspectRatio: getPageAspectRatio(item),
+          availableWidth: windowWidth,
+          pageViewportWidth: documentSurfaceWidth,
           spacing: CONTINUOUS_PAGE_SPACING,
           onSelectionDragActiveChange: setSelectionDragActive,
           gestureScrollLockActive,
           lastPinchEndedAt,
-          onHorizontalScrollOffsetChange: handlePageHorizontalScrollOffsetChange,
-          horizontalScrollRestore,
           requestSelectionVerticalAutoscroll: handleSelectionVerticalAutoscroll
         }
       );
     },
     [
       columnWidth,
+      documentSurfaceWidth,
       engine,
       getPageAspectRatio,
-      handlePageHorizontalScrollOffsetChange,
       handleSelectionVerticalAutoscroll,
       gestureScrollLockActive,
-      horizontalScrollRestore,
       horizontalPadding,
       isDouble,
-      lastPinchEndedAt
+      lastPinchEndedAt,
+      windowWidth
     ]
   );
   if (isWebView) {
@@ -24313,52 +24250,66 @@ var Viewer = ({
           { transform: [{ scale: pinchPreviewScale }] }
         ],
         children: /* @__PURE__ */ jsx3(
-          ScrollView2,
+          ScrollView,
           {
-            ref: (node) => {
-              captureViewerFrame(node);
-              listRef.current = node;
-            },
-            contentContainerStyle: styles3.singleContent,
-            showsVerticalScrollIndicator: false,
-            scrollEnabled: resolvedViewerScrollEnabled,
-            onLayout: () => captureViewerFrame(listRef.current),
-            onContentSizeChange: (_, height) => {
-              viewerContentHeightRef.current = height;
+            ref: horizontalScrollRef,
+            horizontal: true,
+            scrollEnabled: !gestureScrollLockActive && documentSurfaceWidth > windowWidth,
+            showsHorizontalScrollIndicator: false,
+            onScroll: (event) => {
+              horizontalScrollOffsetRef.current = event.nativeEvent.contentOffset?.x ?? 0;
             },
-            onScroll: (event) => handleViewerScroll(event, "single"),
-            onScrollBeginDrag: perfEnabled ? () => {
-              scrollMonitorRef.current.begin("single.beginDrag");
-            } : void 0,
-            onMomentumScrollBegin: perfEnabled ? () => {
-              scrollMonitorRef.current.begin("single.momentumBegin");
-            } : void 0,
-            onScrollEndDrag: perfEnabled ? () => {
-              scrollMonitorRef.current.end("single.endDrag");
-              sampleMemory("Viewer", "single.endDrag", { pageCount });
-            } : void 0,
-            onMomentumScrollEnd: perfEnabled ? () => {
-              scrollMonitorRef.current.end("single.momentumEnd");
-              sampleMemory("Viewer", "single.momentumEnd", {
-                pageCount
-              });
-            } : void 0,
             scrollEventThrottle: 16,
             children: /* @__PURE__ */ jsx3(
-              PageRenderer_default,
+              ScrollView,
               {
-                engine,
-                pageIndex: Math.max(0, currentPage - 1),
-                pageAspectRatio: getPageAspectRatio(
-                  Math.max(0, currentPage - 1)
-                ),
-                spacing: 32,
-                onSelectionDragActiveChange: setSelectionDragActive,
-                gestureScrollLockActive,
-                lastPinchEndedAt,
-                onHorizontalScrollOffsetChange: handlePageHorizontalScrollOffsetChange,
-                horizontalScrollRestore,
-                requestSelectionVerticalAutoscroll: handleSelectionVerticalAutoscroll
+                ref: (node) => {
+                  captureViewerFrame(node);
+                  listRef.current = node;
+                },
+                style: { width: documentSurfaceWidth },
+                contentContainerStyle: styles3.singleContent,
+                showsVerticalScrollIndicator: false,
+                scrollEnabled: resolvedViewerScrollEnabled,
+                onLayout: () => captureViewerFrame(listRef.current),
+                onContentSizeChange: (_, height) => {
+                  viewerContentHeightRef.current = height;
+                },
+                onScroll: (event) => handleViewerScroll(event, "single"),
+                onScrollBeginDrag: perfEnabled ? () => {
+                  scrollMonitorRef.current.begin("single.beginDrag");
+                } : void 0,
+                onMomentumScrollBegin: perfEnabled ? () => {
+                  scrollMonitorRef.current.begin("single.momentumBegin");
+                } : void 0,
+                onScrollEndDrag: perfEnabled ? () => {
+                  scrollMonitorRef.current.end("single.endDrag");
+                  sampleMemory("Viewer", "single.endDrag", { pageCount });
+                } : void 0,
+                onMomentumScrollEnd: perfEnabled ? () => {
+                  scrollMonitorRef.current.end("single.momentumEnd");
+                  sampleMemory("Viewer", "single.momentumEnd", {
+                    pageCount
+                  });
+                } : void 0,
+                scrollEventThrottle: 16,
+                children: /* @__PURE__ */ jsx3(
+                  PageRenderer_default,
+                  {
+                    engine,
+                    pageIndex: Math.max(0, currentPage - 1),
+                    pageAspectRatio: getPageAspectRatio(
+                      Math.max(0, currentPage - 1)
+                    ),
+                    availableWidth: windowWidth,
+                    pageViewportWidth: documentSurfaceWidth,
+                    spacing: 32,
+                    onSelectionDragActiveChange: setSelectionDragActive,
+                    gestureScrollLockActive,
+                    lastPinchEndedAt,
+                    requestSelectionVerticalAutoscroll: handleSelectionVerticalAutoscroll
+                  }
+                )
               }
             )
           }
@@ -24374,74 +24325,90 @@ var Viewer = ({
         { transform: [{ scale: pinchPreviewScale }] }
       ],
       children: /* @__PURE__ */ jsx3(
-        FlatList,
+        ScrollView,
         {
-          ref: listRef,
-          data: isDouble ? rows : pages,
-          initialNumToRender: FLATLIST_INITIAL_NUM_TO_RENDER,
-          windowSize: resolvedWindowSize,
-          maxToRenderPerBatch: resolvedMaxToRenderPerBatch,
-          updateCellsBatchingPeriod: FLATLIST_UPDATE_CELLS_BATCHING_PERIOD,
-          removeClippedSubviews: resolvedRemoveClippedSubviews,
-          getItemLayout,
-          keyExtractor,
-          contentContainerStyle: styles3.listContent,
-          renderItem,
-          onViewableItemsChanged,
-          viewabilityConfig: { itemVisiblePercentThreshold: 60 },
-          scrollEnabled: resolvedViewerScrollEnabled,
-          onLayout: () => captureViewerFrame(listRef.current),
-          onContentSizeChange: (_, height) => {
-            viewerContentHeightRef.current = height;
+          ref: horizontalScrollRef,
+          horizontal: true,
+          scrollEnabled: !gestureScrollLockActive && documentSurfaceWidth > windowWidth,
+          showsHorizontalScrollIndicator: false,
+          onScroll: (event) => {
+            horizontalScrollOffsetRef.current = event.nativeEvent.contentOffset?.x ?? 0;
           },
-          onScrollToIndexFailed: ({ index, averageItemLength }) => {
-            const dataLength = isDouble ? rows.length : pages.length;
-            if (index < 0 || index >= dataLength) return;
-            pendingScrollIndexRef.current = index;
-            const offset = Math.max(0, getFallbackOffsetForIndex(index));
-            listRef.current?.scrollToOffset({ offset, animated: false });
-            if (!isDouble) {
-              ensurePageDimensions(index);
-            } else {
-              const row = rows[index];
-              if (row) {
-                ensurePageDimensions(row.left);
-                if (row.right !== null) {
-                  ensurePageDimensions(row.right);
+          scrollEventThrottle: 16,
+          children: /* @__PURE__ */ jsx3(
+            FlatList,
+            {
+              ref: listRef,
+              data: isDouble ? rows : pages,
+              style: { width: documentSurfaceWidth },
+              initialNumToRender: FLATLIST_INITIAL_NUM_TO_RENDER,
+              windowSize: resolvedWindowSize,
+              maxToRenderPerBatch: resolvedMaxToRenderPerBatch,
+              updateCellsBatchingPeriod: FLATLIST_UPDATE_CELLS_BATCHING_PERIOD,
+              removeClippedSubviews: resolvedRemoveClippedSubviews,
+              getItemLayout,
+              keyExtractor,
+              contentContainerStyle: styles3.listContent,
+              renderItem,
+              onViewableItemsChanged,
+              viewabilityConfig: { itemVisiblePercentThreshold: 60 },
+              scrollEnabled: resolvedViewerScrollEnabled,
+              onLayout: () => captureViewerFrame(listRef.current),
+              onContentSizeChange: (_, height) => {
+                viewerContentHeightRef.current = height;
+              },
+              onScrollToIndexFailed: ({ index, averageItemLength }) => {
+                const dataLength = isDouble ? rows.length : pages.length;
+                if (index < 0 || index >= dataLength) return;
+                pendingScrollIndexRef.current = index;
+                const offset = Math.max(0, getFallbackOffsetForIndex(index));
+                listRef.current?.scrollToOffset({ offset, animated: false });
+                if (!isDouble) {
+                  ensurePageDimensions(index);
+                } else {
+                  const row = rows[index];
+                  if (row) {
+                    ensurePageDimensions(row.left);
+                    if (row.right !== null) {
+                      ensurePageDimensions(row.right);
+                    }
+                  }
                 }
-              }
-            }
-            scheduleScrollRetry("onScrollToIndexFailed");
-            if (perfEnabled) {
-              logPerfEvent("Viewer", "scrollToIndexFailed", {
-                index,
-                averageItemLength,
-                fallbackOffset: offset,
-                fallbackSource: "cached-item-layout",
-                itemCount: dataLength,
-                retryAttempt: pendingScrollAttemptsRef.current
-              });
+                scheduleScrollRetry("onScrollToIndexFailed");
+                if (perfEnabled) {
+                  logPerfEvent("Viewer", "scrollToIndexFailed", {
+                    index,
+                    averageItemLength,
+                    fallbackOffset: offset,
+                    fallbackSource: "cached-item-layout",
+                    itemCount: dataLength,
+                    retryAttempt: pendingScrollAttemptsRef.current
+                  });
+                }
+              },
+              onScroll: (event) => handleViewerScroll(event, "continuous"),
+              onScrollBeginDrag: perfEnabled ? () => {
+                scrollMonitorRef.current.begin("continuous.beginDrag");
+              } : void 0,
+              onMomentumScrollBegin: perfEnabled ? () => {
+                scrollMonitorRef.current.begin("continuous.momentumBegin");
+              } : void 0,
+              onScrollEndDrag: perfEnabled ? () => {
+                scrollMonitorRef.current.end("continuous.endDrag");
+                sampleMemory("Viewer", "continuous.endDrag", {
+                  pageCount
+                });
+              } : void 0,
+              onMomentumScrollEnd: perfEnabled ? () => {
+                scrollMonitorRef.current.end("continuous.momentumEnd");
+                sampleMemory("Viewer", "continuous.momentumEnd", {
+                  pageCount
+                });
+              } : void 0,
+              scrollEventThrottle: 16,
+              showsVerticalScrollIndicator: false
             }
-          },
-          onScroll: (event) => handleViewerScroll(event, "continuous"),
-          onScrollBeginDrag: perfEnabled ? () => {
-            scrollMonitorRef.current.begin("continuous.beginDrag");
-          } : void 0,
-          onMomentumScrollBegin: perfEnabled ? () => {
-            scrollMonitorRef.current.begin("continuous.momentumBegin");
-          } : void 0,
-          onScrollEndDrag: perfEnabled ? () => {
-            scrollMonitorRef.current.end("continuous.endDrag");
-            sampleMemory("Viewer", "continuous.endDrag", { pageCount });
-          } : void 0,
-          onMomentumScrollEnd: perfEnabled ? () => {
-            scrollMonitorRef.current.end("continuous.momentumEnd");
-            sampleMemory("Viewer", "continuous.momentumEnd", {
-              pageCount
-            });
-          } : void 0,
-          scrollEventThrottle: 16,
-          showsVerticalScrollIndicator: false
+          )
         }
       )
     }
@@ -25492,7 +25459,7 @@ import {
   Text as Text3,
   Pressable as Pressable4,
   StyleSheet as StyleSheet6,
-  ScrollView as ScrollView3,
+  ScrollView as ScrollView2,
   useWindowDimensions as useWindowDimensions3
 } from "react-native";
 import { useViewerStore as useViewerStore5 } from "@papyrus-sdk/core";
@@ -26072,7 +26039,7 @@ var ToolDock = () => {
           }
         ],
         children: primaryToolsRowIsScrollable ? /* @__PURE__ */ jsx7(
-          ScrollView3,
+          ScrollView2,
           {
             horizontal: true,
             bounces: false,
@@ -28790,7 +28757,7 @@ var styles12 = StyleSheet12.create({
 import {
   Modal as Modal4,
   Pressable as Pressable10,
-  ScrollView as ScrollView4,
+  ScrollView as ScrollView3,
   StyleSheet as StyleSheet13,
   Text as Text9,
   View as View13
@@ -28961,7 +28928,7 @@ function InfoSheet({
               /* @__PURE__ */ jsx14(View13, { style: styles13.topRowSpacer })
             ] }),
             /* @__PURE__ */ jsxs14(
-              ScrollView4,
+              ScrollView3,
               {
                 style: styles13.content,
                 contentContainerStyle: styles13.contentInner,
@@ -29621,7 +29588,7 @@ var styles16 = StyleSheet16.create({
 import {
   Modal as Modal6,
   Pressable as Pressable14,
-  ScrollView as ScrollView5,
+  ScrollView as ScrollView4,
   StyleSheet as StyleSheet17,
   Text as Text13,
   View as View17
@@ -29670,7 +29637,7 @@ function SearchResultsSheet({
               t.results
             ] })
           ] }),
-          /* @__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) => {
+          /* @__PURE__ */ jsx18(ScrollView4, { 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__ */ jsxs18(
               Pressable14,