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

package/dist/index.js

@@ -21293,6 +21293,24 @@ var resolveClampedScrollOffset = (offset, contentLength, viewportLength) => {
     Math.max(0, safeContentLength - safeViewportLength)
   );
 };
+var resolveDocumentSurfaceWidth = ({
+  viewportWidth,
+  contentWidth,
+  horizontalPadding
+}) => {
+  const safeViewportWidth = Number.isFinite(viewportWidth) && viewportWidth > 0 ? viewportWidth : 0;
+  const safeContentWidth = Number.isFinite(contentWidth) && contentWidth > 0 ? contentWidth : 0;
+  const safeHorizontalPadding = Number.isFinite(horizontalPadding) && horizontalPadding > 0 ? horizontalPadding : 0;
+  return Math.max(
+    safeViewportWidth,
+    safeContentWidth + safeHorizontalPadding * 2
+  );
+};
+var resolveGlobalHorizontalOffset = ({
+  offsetX,
+  surfaceWidth,
+  viewportWidth
+}) => resolveClampedScrollOffset(offsetX, surfaceWidth, viewportWidth);
 var shouldSuppressPressAfterPinch = (lastPinchEndedAt, now = Date.now(), windowMs = PINCH_PRESS_SUPPRESSION_MS) => {
   if (typeof lastPinchEndedAt !== "number") return false;
   const elapsedMs = now - lastPinchEndedAt;
@@ -21437,8 +21455,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,
@@ -21447,17 +21463,15 @@ var PageRenderer = ({
   pageAspectRatio,
   PageViewComponent = import_engine_native.PapyrusPageView,
   availableWidth,
+  pageViewportWidth: providedPageViewportWidth,
   horizontalPadding = 16,
   spacing = 24,
   onSelectionDragActiveChange,
   gestureScrollLockActive = false,
   lastPinchEndedAt = null,
-  onHorizontalScrollOffsetChange,
-  horizontalScrollRestore = null,
   requestSelectionVerticalAutoscroll
 }) => {
   const viewRef = (0, import_react.useRef)(null);
-  const pageScrollRef = (0, import_react.useRef)(null);
   const [layout, setLayout] = (0, import_react.useState)({ width: 0, height: 0 });
   const [pageSize, setPageSize] = (0, import_react.useState)(null);
   const { width: windowWidth } = (0, import_react_native.useWindowDimensions)();
@@ -21465,10 +21479,8 @@ var PageRenderer = ({
   const perfEnabled = isMobilePerfEnabled();
   const renderCountRef = (0, import_react.useRef)(0);
   const inkDrawingActiveRef = (0, import_react.useRef)(false);
-  const horizontalScrollOffsetRef = (0, import_react.useRef)(0);
   const selectionDragActiveRef = (0, import_react.useRef)(false);
   const selectionDragPointRef = (0, import_react.useRef)(null);
-  const lastAppliedHorizontalRestoreRef = (0, import_react.useRef)(null);
   const selectionAutoscrollIntervalRef = (0, import_react.useRef)(null);
   const rawTouchMoveLoggedAtRef = (0, import_react.useRef)(0);
   const currentInkStyleRef = (0, import_react.useRef)({
@@ -21732,10 +21744,7 @@ var PageRenderer = ({
     setInkPoints([]);
     inkPointsRef.current = [];
   }, [resolvedActiveTool]);
-  const pageViewportWidth = Math.max(
-    0,
-    (availableWidth ?? windowWidth) - horizontalPadding * 2
-  );
+  const viewportWidth = providedPageViewportWidth ?? availableWidth ?? windowWidth;
   const selectionEnabled = import_react_native.Platform.OS === "web" || isNative && shouldEnableSelectionDrag({
     activeTool: resolvedActiveTool,
     interactionMode: resolvedInteractionMode
@@ -21883,35 +21892,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 = clamp3(
-        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 = clamp3(point.x + appliedDx, 0, layout.width);
+    const nextX = point.x;
     const nextY = clamp3(point.y + appliedDy, 0, layout.height);
     selectionDragPointRef.current = {
       absoluteY: point.absoluteY,
@@ -21922,7 +21908,6 @@ var PageRenderer = ({
   }, [
     layout.height,
     layout.width,
-    pageViewportWidth,
     requestSelectionVerticalAutoscroll,
     stopSelectionAutoscroll,
     updateSelectionRectFromPoint
@@ -22372,56 +22357,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;
-  (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native.ScrollView,
+    import_react_native.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__ */ (0, import_jsx_runtime.jsx)(import_react_native_gesture_handler.GestureDetector, { gesture: contentGesture, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_react_native.Pressable,
@@ -23122,7 +23070,7 @@ var styles = import_react_native.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 = (0, import_react.memo)(PageRenderer, arePageRendererPropsEqual);
 
 // components/WebViewViewer.tsx
@@ -23274,8 +23222,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);
@@ -23300,6 +23248,7 @@ var Viewer = ({
   const viewMode = (0, import_core3.useViewerStore)((state) => state.viewMode);
   const zoom = (0, import_core3.useViewerStore)((state) => state.zoom);
   const listRef = (0, import_react3.useRef)(null);
+  const horizontalScrollRef = (0, import_react3.useRef)(null);
   const isDark = uiTheme === "dark";
   const { width: windowWidth } = (0, import_react_native3.useWindowDimensions)();
   const isDouble = viewMode === "double";
@@ -23339,18 +23288,16 @@ var Viewer = ({
   const gestureScrollLockActiveRef = (0, import_react3.useRef)(false);
   const [pinchPreviewScale, setPinchPreviewScale] = (0, import_react3.useState)(1);
   const [lastPinchEndedAt, setLastPinchEndedAt] = (0, import_react3.useState)(null);
-  const [horizontalScrollRestore, setHorizontalScrollRestore] = (0, import_react3.useState)(null);
   const pinchGestureActiveRef = (0, import_react3.useRef)(false);
   const pinchStartZoomRef = (0, import_react3.useRef)(1);
   const pinchPreviewZoomRef = (0, import_react3.useRef)(1);
   const pinchFocalPointRef = (0, import_react3.useRef)({ x: 0, y: 0 });
   const pinchUpdateLoggedAtRef = (0, import_react3.useRef)(0);
-  const horizontalScrollOffsetsRef = (0, import_react3.useRef)(/* @__PURE__ */ new Map());
+  const horizontalScrollOffsetRef = (0, import_react3.useRef)(0);
   const pendingPinchAnchorRestoreRef = (0, import_react3.useRef)(
     null
   );
   const pinchAnchorRestoreFrameRef = (0, import_react3.useRef)(null);
-  const nextHorizontalRestoreRequestIdRef = (0, import_react3.useRef)(0);
   const viewerFrameRef = (0, import_react3.useRef)({ y: 0, height: 0 });
   const viewerContentHeightRef = (0, import_react3.useRef)(0);
   const resolvedWindowSize = (0, import_react3.useMemo)(
@@ -23650,6 +23597,30 @@ var Viewer = ({
     },
     [columnGap, columnWidth, horizontalPadding, isDouble, windowWidth]
   );
+  const documentSurfaceWidth = (0, import_react3.useMemo)(() => {
+    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 = (0, import_react3.useCallback)(
     (pageIndex, zoomValue) => {
       if (isSingle) {
@@ -23884,7 +23855,7 @@ var Viewer = ({
         startPageOffsetY,
         startPageHeight,
         startPageWidth,
-        startPageScrollX: horizontalScrollOffsetsRef.current.get(anchorPageIndex) ?? 0,
+        startSurfaceScrollX: horizontalScrollOffsetRef.current,
         pageViewportWidth,
         pageHorizontalPadding,
         pageViewportContentOffsetX: Math.max(
@@ -23920,34 +23891,21 @@ var Viewer = ({
     setDocumentStateTracked,
     zoom
   ]);
-  const handlePageHorizontalScrollOffsetChange = (0, import_react3.useCallback)(
-    (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 = (0, import_react3.useCallback)(
+    (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 = (0, import_react3.useMemo)(
     () => import_react_native_gesture_handler2.Gesture.Pinch().enabled(!isWebView && pageCount > 0).onTouchesDown((event) => {
@@ -24030,7 +23988,7 @@ var Viewer = ({
       );
       const nextOffsetX = resolveAnchoredViewportOffset({
         viewportOffset: pendingRestore.pageViewportContentOffsetX,
-        startScrollOffset: pendingRestore.startPageScrollX,
+        startScrollOffset: pendingRestore.startSurfaceScrollX,
         startItemOffset: 0,
         startItemLength: pendingRestore.startPageWidth,
         endItemOffset: 0,
@@ -24038,19 +23996,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
         });
       }
@@ -24061,22 +24013,18 @@ var Viewer = ({
         pinchAnchorRestoreFrameRef.current = null;
       }
     };
-  }, [getPageLayoutForZoom, getPageWidthForZoom, isSingle, perfEnabled, zoom]);
+  }, [
+    getPageLayoutForZoom,
+    getPageWidthForZoom,
+    isSingle,
+    perfEnabled,
+    scrollHorizontalSurfaceTo,
+    zoom
+  ]);
   (0, import_react3.useEffect)(() => {
-    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 = (0, import_react3.useCallback)((node) => {
     const measurable = node;
     measurable?.measureInWindow?.((_, y, __, height) => {
@@ -24116,12 +24064,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);
     },
@@ -24359,42 +24307,49 @@ var Viewer = ({
     ({ item }) => {
       if (isDouble) {
         const row = item;
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: [styles3.row, { paddingHorizontal: horizontalPadding }], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: { width: columnWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            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__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: { width: columnWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            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__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: { width: columnWidth } })
-        ] });
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          import_react_native3.View,
+          {
+            style: [
+              styles3.row,
+              { paddingHorizontal: horizontalPadding, width: documentSurfaceWidth }
+            ],
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: { width: columnWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                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__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: { width: columnWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                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__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: { width: columnWidth } })
+            ]
+          }
+        );
       }
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         PageRenderer_default,
@@ -24402,27 +24357,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) {
@@ -24439,50 +24394,64 @@ var Viewer = ({
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           import_react_native3.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__ */ (0, import_jsx_runtime3.jsx)(
-              PageRenderer_default,
+              import_react_native3.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__ */ (0, import_jsx_runtime3.jsx)(
+                  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
+                  }
+                )
               }
             )
           }
@@ -24498,74 +24467,90 @@ var Viewer = ({
         { transform: [{ scale: pinchPreviewScale }] }
       ],
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_react_native3.FlatList,
+        import_react_native3.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__ */ (0, import_jsx_runtime3.jsx)(
+            import_react_native3.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
+          )
         }
       )
     }