@papyrus-sdk/ui-react-native 0.2.11 → 0.2.12

package/dist/index.js

@@ -21033,11 +21033,13 @@ module.exports = __toCommonJS(ui_react_native_exports);
 // components/Viewer.tsx
 var import_react3 = require("react");
 var import_react_native3 = require("react-native");
+var import_react_native_gesture_handler2 = require("react-native-gesture-handler");
 var import_core3 = require("@papyrus-sdk/core");
 
 // components/PageRenderer.tsx
 var import_react = require("react");
 var import_react_native = require("react-native");
+var import_react_native_gesture_handler = require("react-native-gesture-handler");
 var import_react_native_svg = __toESM(require("react-native-svg"));
 var import_core = require("@papyrus-sdk/core");
 var import_engine_native = require("@papyrus-sdk/engine-native");
@@ -21224,6 +21226,126 @@ var createScrollPerfMonitor = (scope, label = "scroll") => {
 };
 var logPerfEvent = logPerf;
 
+// gesture/pinchZoom.ts
+var DEFAULT_PINCH_ZOOM_BOUNDS = {
+  minZoom: 0.5,
+  maxZoom: 4
+};
+var PINCH_PRESS_SUPPRESSION_MS = 120;
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+var resolvePinchPreviewScale = (startZoom, previewZoom) => {
+  const safeStartZoom = Math.max(1e-4, Math.abs(startZoom));
+  return previewZoom / safeStartZoom;
+};
+var sanitizePinchPreviewScale = (value) => {
+  if (!Number.isFinite(value) || value <= 0) {
+    return 1;
+  }
+  return value;
+};
+var resolvePinchGestureZoom = (startZoom, scaleFactor, bounds = DEFAULT_PINCH_ZOOM_BOUNDS) => clamp(
+  (Number.isFinite(startZoom) && startZoom > 0 ? startZoom : 1) * (Number.isFinite(scaleFactor) && scaleFactor > 0 ? scaleFactor : 1),
+  bounds.minZoom,
+  bounds.maxZoom
+);
+var resolveAnchoredViewportOffset = ({
+  viewportOffset,
+  startScrollOffset,
+  startItemOffset,
+  startItemLength,
+  endItemOffset,
+  endItemLength,
+  viewportLength,
+  endContentLength
+}) => {
+  const safeViewportOffset = Number.isFinite(viewportOffset) ? viewportOffset : 0;
+  const safeStartScrollOffset = Number.isFinite(startScrollOffset) ? startScrollOffset : 0;
+  const safeStartItemOffset = Number.isFinite(startItemOffset) ? startItemOffset : 0;
+  const safeStartItemLength = Number.isFinite(startItemLength) && startItemLength > 0 ? startItemLength : 1;
+  const safeEndItemOffset = Number.isFinite(endItemOffset) ? endItemOffset : 0;
+  const safeEndItemLength = Number.isFinite(endItemLength) && endItemLength > 0 ? endItemLength : 1;
+  const safeViewportLength = Number.isFinite(viewportLength) && viewportLength > 0 ? viewportLength : 0;
+  const safeEndContentLength = Number.isFinite(endContentLength) && endContentLength > 0 ? endContentLength : safeEndItemOffset + safeEndItemLength;
+  const contentPoint = safeStartScrollOffset + safeViewportOffset - safeStartItemOffset;
+  const normalizedPoint = clamp(contentPoint / safeStartItemLength, 0, 1);
+  const anchoredContentPoint = safeEndItemOffset + normalizedPoint * safeEndItemLength;
+  return clamp(
+    anchoredContentPoint - safeViewportOffset,
+    0,
+    Math.max(0, safeEndContentLength - safeViewportLength)
+  );
+};
+var resolveClampedScrollOffset = (offset, contentLength, viewportLength) => {
+  const safeOffset = Number.isFinite(offset) ? offset : 0;
+  const safeContentLength = Number.isFinite(contentLength) && contentLength > 0 ? contentLength : 0;
+  const safeViewportLength = Number.isFinite(viewportLength) && viewportLength > 0 ? viewportLength : 0;
+  return clamp(
+    safeOffset,
+    0,
+    Math.max(0, safeContentLength - safeViewportLength)
+  );
+};
+var shouldSuppressPressAfterPinch = (lastPinchEndedAt, now = Date.now(), windowMs = PINCH_PRESS_SUPPRESSION_MS) => {
+  if (typeof lastPinchEndedAt !== "number") return false;
+  const elapsedMs = now - lastPinchEndedAt;
+  return elapsedMs >= 0 && elapsedMs < windowMs;
+};
+
+// gesture/selectionInteraction.ts
+var clamp2 = (value, min, max) => Math.min(max, Math.max(min, value));
+var DRAG_SELECTION_TOOLS = /* @__PURE__ */ new Set([
+  "highlight",
+  "underline",
+  "squiggly",
+  "strikeout"
+]);
+var resolveAxisAutoscroll = (coordinate, size, threshold, maxStep) => {
+  if (size <= 0 || threshold <= 0 || maxStep <= 0) return 0;
+  const startDistance = clamp2(coordinate, 0, size);
+  if (startDistance < threshold) {
+    const intensity = 1 - startDistance / threshold;
+    return -Math.round(maxStep * intensity);
+  }
+  const endDistance = clamp2(size - coordinate, 0, size);
+  if (endDistance < threshold) {
+    const intensity = 1 - endDistance / threshold;
+    return Math.round(maxStep * intensity);
+  }
+  return 0;
+};
+var shouldEnableViewerScroll = ({
+  selectionDragActive,
+  gestureScrollLockActive = false
+}) => !selectionDragActive && !gestureScrollLockActive;
+var shouldEnableSelectionDrag = ({
+  activeTool,
+  interactionMode
+}) => DRAG_SELECTION_TOOLS.has(activeTool) || activeTool === "select" && interactionMode === "select";
+var isToolDockToolSelected = ({
+  activeTool,
+  interactionMode,
+  toolId
+}) => toolId === "select" ? activeTool === "select" && interactionMode === "select" : activeTool === toolId;
+var getToolDockDismissState = ({
+  activeTool,
+  interactionMode
+}) => ({
+  toolDockOpen: false,
+  activeTool,
+  interactionMode: activeTool === "select" && interactionMode === "select" ? "pan" : interactionMode
+});
+var getSelectionEdgeAutoscroll = ({
+  x,
+  y,
+  width,
+  height,
+  threshold,
+  maxStep
+}) => ({
+  dx: resolveAxisAutoscroll(x, width, threshold, maxStep),
+  dy: resolveAxisAutoscroll(y, height, threshold, maxStep)
+});
+
 // components/PageRenderer.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var TEXT_MARKUP_TOOLS = /* @__PURE__ */ new Set([
@@ -21286,6 +21408,9 @@ 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,
   pageIndex,
@@ -21293,26 +21418,37 @@ var PageRenderer = ({
   PageViewComponent = import_engine_native.PapyrusPageView,
   availableWidth,
   horizontalPadding = 16,
-  spacing = 24
+  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)();
   const isNative = import_react_native.Platform.OS === "android" || import_react_native.Platform.OS === "ios";
   const perfEnabled = isMobilePerfEnabled();
   const renderCountRef = (0, import_react.useRef)(0);
-  const setStateBurstRef = (0, import_react.useRef)(
-    createBurstMonitor("PageRenderer", "setDocumentState", 18, 700)
-  );
+  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 zoom = (0, import_core.useViewerStore)((state) => state.zoom);
   const rotation = (0, import_core.useViewerStore)((state) => state.rotation);
   const pageTheme = (0, import_core.useViewerStore)((state) => state.pageTheme);
   const annotations = (0, import_core.useViewerStore)((state) => state.annotations);
   const annotationColor = (0, import_core.useViewerStore)((state) => state.annotationColor);
   const addAnnotation = (0, import_core.useViewerStore)((state) => state.addAnnotation);
-  const setDocumentState = (0, import_core.useViewerStore)((state) => state.setDocumentState);
   const activeTool = (0, import_core.useViewerStore)((state) => state.activeTool);
+  const interactionMode = (0, import_core.useViewerStore)((state) => state.interactionMode);
   const accentColor = (0, import_core.useViewerStore)((state) => state.accentColor);
   const selectedAnnotationId = (0, import_core.useViewerStore)(
     (state) => state.selectedAnnotationId
@@ -21326,19 +21462,6 @@ var PageRenderer = ({
   const setSelectionActive = (0, import_core.useViewerStore)(
     (state) => state.setSelectionActive
   );
-  const setDocumentStateTracked = (0, import_react.useCallback)(
-    (state, reason) => {
-      if (perfEnabled) {
-        setStateBurstRef.current({
-          reason,
-          page: pageIndex + 1,
-          keys: Object.keys(state).join(",")
-        });
-      }
-      setDocumentState(state);
-    },
-    [pageIndex, perfEnabled, setDocumentState]
-  );
   const logSelectionPerf = (0, import_react.useCallback)(
     (event, payload) => {
       if (!perfEnabled) return;
@@ -21349,6 +21472,56 @@ var PageRenderer = ({
     },
     [pageIndex, perfEnabled]
   );
+  const logGestureDebug = (0, import_react.useCallback)(
+    (event, payload) => {
+      if (!perfEnabled || !isNative) return;
+      logPerfEvent("PageRenderer", `gesture.${event}`, {
+        page: pageIndex + 1,
+        activeTool,
+        interactionMode,
+        pinchActive: gestureScrollLockActive,
+        gestureLockActive: gestureScrollLockActive,
+        selectionEnabled: import_react_native.Platform.OS === "web" || isNative && shouldEnableSelectionDrag({
+          activeTool,
+          interactionMode
+        }),
+        zoom: Math.round(zoom * 100) / 100,
+        ...payload
+      });
+    },
+    [activeTool, interactionMode, isNative, pageIndex, perfEnabled, zoom]
+  );
+  const logRawTouchDebug = (0, import_react.useCallback)(
+    (phase, event) => {
+      if (!perfEnabled || !isNative) return;
+      const touches = Array.isArray(event?.nativeEvent?.touches) ? event.nativeEvent.touches.length : 0;
+      const changedTouches = Array.isArray(event?.nativeEvent?.changedTouches) ? event.nativeEvent.changedTouches.length : 0;
+      if (phase === "move") {
+        if (touches < 2 && !gestureScrollLockActive) return;
+        const now = Date.now();
+        if (now - rawTouchMoveLoggedAtRef.current < 120) return;
+        rawTouchMoveLoggedAtRef.current = now;
+      }
+      logGestureDebug(`touch.${phase}`, {
+        touches,
+        changedTouches,
+        target: event?.nativeEvent?.target ?? null,
+        locationX: Math.round((event?.nativeEvent?.locationX ?? 0) * 100) / 100,
+        locationY: Math.round((event?.nativeEvent?.locationY ?? 0) * 100) / 100,
+        pageX: Math.round((event?.nativeEvent?.pageX ?? 0) * 100) / 100,
+        pageY: Math.round((event?.nativeEvent?.pageY ?? 0) * 100) / 100
+      });
+    },
+    [isNative, logGestureDebug, perfEnabled]
+  );
+  const setSelectionDragState = (0, import_react.useCallback)(
+    (active) => {
+      if (selectionDragActiveRef.current === active) return;
+      selectionDragActiveRef.current = active;
+      onSelectionDragActiveChange?.(active);
+    },
+    [onSelectionDragActiveChange]
+  );
   const pageAnnotations = (0, import_react.useMemo)(
     () => annotations.filter((ann) => ann.pageIndex === pageIndex),
     [annotations, pageIndex]
@@ -21377,12 +21550,6 @@ var PageRenderer = ({
   const selectionRectRef = (0, import_react.useRef)(null);
   const selectionBoundsRef = (0, import_react.useRef)(null);
   const selectionBoundsStart = (0, import_react.useRef)(null);
-  const lastTapRef = (0, import_react.useRef)(
-    null
-  );
-  const pinchRef = (0, import_react.useRef)(null);
-  const isPinchingRef = (0, import_react.useRef)(false);
-  const pinchLogZoomRef = (0, import_react.useRef)(zoom);
   const [isInkDrawing, setIsInkDrawing] = (0, import_react.useState)(false);
   const [inkPoints, setInkPoints] = (0, import_react.useState)(
     []
@@ -21480,7 +21647,7 @@ var PageRenderer = ({
       createdAt: Date.now()
     });
   };
-  const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+  const clamp3 = (value, min, max) => Math.min(max, Math.max(min, value));
   const getBoundsFromRects = (rects) => {
     let minX = 1;
     let minY = 1;
@@ -21494,10 +21661,10 @@ var PageRenderer = ({
     });
     if (maxX <= minX || maxY <= minY) return null;
     return {
-      x: clamp(minX, 0, 1),
-      y: clamp(minY, 0, 1),
-      width: clamp(maxX - minX, 0, 1),
-      height: clamp(maxY - minY, 0, 1)
+      x: clamp3(minX, 0, 1),
+      y: clamp3(minY, 0, 1),
+      width: clamp3(maxX - minX, 0, 1),
+      height: clamp3(maxY - minY, 0, 1)
     };
   };
   (0, import_react.useEffect)(() => {
@@ -21505,11 +21672,30 @@ var PageRenderer = ({
   }, [inkPoints]);
   (0, import_react.useEffect)(() => {
     if (activeTool === "ink") return;
+    inkDrawingActiveRef.current = false;
     setIsInkDrawing(false);
     setInkPoints([]);
     inkPointsRef.current = [];
   }, [activeTool]);
-  const clearSelection = () => {
+  const pageViewportWidth = Math.max(
+    0,
+    (availableWidth ?? windowWidth) - horizontalPadding * 2
+  );
+  const selectionEnabled = import_react_native.Platform.OS === "web" || isNative && shouldEnableSelectionDrag({
+    activeTool,
+    interactionMode
+  });
+  const inkEnabled = isNative && activeTool === "ink";
+  const stopSelectionAutoscroll = (0, import_react.useCallback)(() => {
+    if (selectionAutoscrollIntervalRef.current) {
+      clearInterval(selectionAutoscrollIntervalRef.current);
+      selectionAutoscrollIntervalRef.current = null;
+    }
+  }, []);
+  const clearSelection = (0, import_react.useCallback)(() => {
+    stopSelectionAutoscroll();
+    selectionDragPointRef.current = null;
+    setSelectionDragState(false);
     setSelectionRect(null);
     selectionRectRef.current = null;
     setSelectionRects([]);
@@ -21519,13 +21705,19 @@ var PageRenderer = ({
     setIsSelecting(false);
     selectionStart.current = null;
     selectionBoundsStart.current = null;
-    lastTapRef.current = null;
     setSelectionActive(false);
-  };
+  }, [setSelectionActive, setSelectionDragState, stopSelectionAutoscroll]);
   (0, import_react.useEffect)(() => {
     if (activeTool === "select") return;
     clearSelection();
   }, [activeTool]);
+  (0, import_react.useEffect)(
+    () => () => {
+      stopSelectionAutoscroll();
+      setSelectionDragState(false);
+    },
+    [setSelectionDragState, stopSelectionAutoscroll]
+  );
   const stopPressPropagation = (event) => {
     event.stopPropagation?.();
   };
@@ -21592,8 +21784,8 @@ var PageRenderer = ({
     if (!layout.width || !layout.height) return;
     const size = 26;
     const half = size / 2;
-    const left = clamp(x - half, 0, Math.max(0, layout.width - size));
-    const top = clamp(y - half, 0, Math.max(0, layout.height - size));
+    const left = clamp3(x - half, 0, Math.max(0, layout.width - size));
+    const top = clamp3(y - half, 0, Math.max(0, layout.height - size));
     const bounds = {
       x: left / layout.width,
       y: top / layout.height,
@@ -21602,50 +21794,193 @@ var PageRenderer = ({
     };
     await selectFromBounds(bounds);
   };
-  const getTouchDistance = (touches) => {
-    if (touches.length < 2) return 0;
-    const [a, b] = touches;
-    return Math.hypot(b.pageX - a.pageX, b.pageY - a.pageY);
-  };
-  const shouldHandlePinch = (touches) => isNative && touches.length === 2;
-  const handlePinchStart = (touches) => {
-    if (!shouldHandlePinch(touches)) return;
-    const distance = getTouchDistance(touches);
-    pinchRef.current = { distance, zoom };
-    pinchLogZoomRef.current = zoom;
-    logSelectionPerf("pinch.start", {
-      tool: activeTool,
-      distance: Math.round(distance * 100) / 100,
-      zoom: Math.round(zoom * 100) / 100
+  const cancelSelectionDrag = (0, import_react.useCallback)(() => {
+    stopSelectionAutoscroll();
+    selectionDragPointRef.current = null;
+    setSelectionDragState(false);
+    setIsSelecting(false);
+    selectionStart.current = null;
+    selectionRectRef.current = null;
+    setSelectionRect(null);
+  }, [setSelectionDragState, stopSelectionAutoscroll]);
+  const updateSelectionRectFromPoint = (0, import_react.useCallback)(
+    (x, y) => {
+      const start = selectionStart.current;
+      if (!start || !layout.width || !layout.height) return;
+      const left = Math.max(0, Math.min(start.x, x));
+      const top = Math.max(0, Math.min(start.y, y));
+      const right = Math.min(layout.width, Math.max(start.x, x));
+      const bottom = Math.min(layout.height, Math.max(start.y, y));
+      const rect = {
+        x: left,
+        y: top,
+        width: right - left,
+        height: bottom - top
+      };
+      selectionRectRef.current = rect;
+      setSelectionRect(rect);
+    },
+    [layout.height, layout.width]
+  );
+  const applySelectionEdgeAutoscroll = (0, import_react.useCallback)(() => {
+    const point = selectionDragPointRef.current;
+    if (!point || !selectionStart.current || !layout.width || !layout.height) {
+      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
     });
-  };
-  const handlePinchMove = (touches) => {
-    if (!shouldHandlePinch(touches) || !pinchRef.current) return;
-    const distance = getTouchDistance(touches);
-    if (!distance) return;
-    const scale2 = distance / pinchRef.current.distance;
-    const nextZoom = clamp(pinchRef.current.zoom * scale2, 0.5, 4);
-    setDocumentStateTracked({ zoom: nextZoom }, "pinchMove");
-    engine.setZoom(nextZoom);
-    if (Math.abs(nextZoom - pinchLogZoomRef.current) >= 0.12) {
-      pinchLogZoomRef.current = nextZoom;
-      logSelectionPerf("pinch.move", {
-        tool: activeTool,
-        distance: Math.round(distance * 100) / 100,
-        zoom: Math.round(nextZoom * 100) / 100
-      });
+    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 handlePinchEnd = () => {
-    if (isPinchingRef.current || pinchRef.current) {
-      logSelectionPerf("pinch.end", {
-        tool: activeTool,
-        zoom: Math.round(zoom * 100) / 100
-      });
+    const appliedDy = requestSelectionVerticalAutoscroll?.(point.absoluteY) ?? 0;
+    if (appliedDx === 0 && appliedDy === 0) {
+      stopSelectionAutoscroll();
+      return;
     }
-    pinchRef.current = null;
-  };
+    const nextX = clamp3(point.x + appliedDx, 0, layout.width);
+    const nextY = clamp3(point.y + appliedDy, 0, layout.height);
+    selectionDragPointRef.current = {
+      absoluteY: point.absoluteY,
+      x: nextX,
+      y: nextY
+    };
+    updateSelectionRectFromPoint(nextX, nextY);
+  }, [
+    layout.height,
+    layout.width,
+    pageViewportWidth,
+    requestSelectionVerticalAutoscroll,
+    stopSelectionAutoscroll,
+    updateSelectionRectFromPoint
+  ]);
+  const ensureSelectionAutoscroll = (0, import_react.useCallback)(() => {
+    if (selectionAutoscrollIntervalRef.current) return;
+    selectionAutoscrollIntervalRef.current = setInterval(
+      applySelectionEdgeAutoscroll,
+      SELECTION_AUTOSCROLL_INTERVAL_MS
+    );
+  }, [applySelectionEdgeAutoscroll]);
+  const beginSelectionDrag = (0, import_react.useCallback)(
+    (x, y, absoluteY) => {
+      if (!selectionEnabled || !layout.width || !layout.height || selectionRects.length > 0 || selectionBounds) {
+        return;
+      }
+      const start = {
+        x: clamp3(x, 0, layout.width),
+        y: clamp3(y, 0, layout.height)
+      };
+      selectionStart.current = start;
+      selectionDragPointRef.current = { absoluteY, ...start };
+      setSelectionDragState(true);
+      setIsSelecting(true);
+      const rect = { x: start.x, y: start.y, width: 0, height: 0 };
+      selectionRectRef.current = rect;
+      setSelectionRect(rect);
+    },
+    [
+      layout.height,
+      layout.width,
+      selectionBounds,
+      selectionEnabled,
+      selectionRects.length,
+      setSelectionDragState
+    ]
+  );
+  const updateSelectionDrag = (0, import_react.useCallback)(
+    (x, y, absoluteY) => {
+      if (!selectionEnabled || !selectionStart.current) return;
+      const nextX = clamp3(x, 0, layout.width);
+      const nextY = clamp3(y, 0, layout.height);
+      selectionDragPointRef.current = {
+        absoluteY,
+        x: nextX,
+        y: nextY
+      };
+      updateSelectionRectFromPoint(nextX, nextY);
+      ensureSelectionAutoscroll();
+    },
+    [
+      ensureSelectionAutoscroll,
+      layout.height,
+      layout.width,
+      selectionEnabled,
+      updateSelectionRectFromPoint
+    ]
+  );
+  const finishSelectionDrag = (0, import_react.useCallback)(async () => {
+    stopSelectionAutoscroll();
+    selectionDragPointRef.current = null;
+    setSelectionDragState(false);
+    const rect = selectionRectRef.current;
+    if (!selectionEnabled || !rect || !layout.width || !layout.height) {
+      setIsSelecting(false);
+      selectionStart.current = null;
+      return;
+    }
+    setIsSelecting(false);
+    selectionStart.current = null;
+    const minSize = 6;
+    if (rect.width < minSize || rect.height < minSize) {
+      clearSelection();
+      return;
+    }
+    const normalized = {
+      x: rect.x / layout.width,
+      y: rect.y / layout.height,
+      width: rect.width / layout.width,
+      height: rect.height / layout.height
+    };
+    await selectFromBounds(normalized);
+    setSelectionRect(null);
+  }, [
+    clearSelection,
+    layout.height,
+    layout.width,
+    selectionEnabled,
+    setSelectionDragState,
+    stopSelectionAutoscroll
+  ]);
+  const handleDoubleTap = (0, import_react.useCallback)(
+    (x, y) => {
+      if (shouldSuppressPressAfterPinch(lastPinchEndedAt)) {
+        return;
+      }
+      if (!isNative || activeTool !== "select" || selectionRects.length > 0 || selectionBounds) {
+        return;
+      }
+      void selectAtPoint(x, y);
+    },
+    [
+      activeTool,
+      isNative,
+      lastPinchEndedAt,
+      selectionBounds,
+      selectionRects.length
+    ]
+  );
   const handlePress = (event) => {
+    if (shouldSuppressPressAfterPinch(lastPinchEndedAt)) {
+      return;
+    }
     if (!layout.width || !layout.height) return;
     const { locationX, locationY } = event.nativeEvent;
     if (selectionRects.length > 0 || selectionBounds) {
@@ -21666,20 +22001,7 @@ var PageRenderer = ({
       return;
     }
     setSelectedAnnotation(null);
-    if (!isNative || activeTool === "ink") return;
-    const now = Date.now();
-    const lastTap = lastTapRef.current;
-    lastTapRef.current = { time: now, x: locationX, y: locationY };
-    if (!lastTap) return;
-    const timeDelta = now - lastTap.time;
-    const distance = Math.hypot(locationX - lastTap.x, locationY - lastTap.y);
-    if (timeDelta < 280 && distance < 24 && activeTool === "select") {
-      void selectAtPoint(locationX, locationY);
-    }
   };
-  const selectionEnabled = import_react_native.Platform.OS === "web" || isNative && (activeTool === "select" || TEXT_MARKUP_TOOLS.has(activeTool));
-  const inkEnabled = isNative && activeTool === "ink";
-  const pinchEnabled = isNative;
   const toNormalizedPoint = (x, y) => {
     if (!layout.width || !layout.height) return null;
     return {
@@ -21691,6 +22013,7 @@ var PageRenderer = ({
     const point = toNormalizedPoint(x, y);
     if (!point) return;
     clearSelection();
+    inkDrawingActiveRef.current = true;
     setIsInkDrawing(true);
     setInkPoints([point]);
     inkPointsRef.current = [point];
@@ -21709,6 +22032,7 @@ var PageRenderer = ({
   const finishInkDrawing = () => {
     const points = inkPointsRef.current;
     if (points.length === 0) return;
+    inkDrawingActiveRef.current = false;
     setIsInkDrawing(false);
     setInkPoints([]);
     inkPointsRef.current = [];
@@ -21731,31 +22055,18 @@ var PageRenderer = ({
   const panResponder = (0, import_react.useMemo)(
     () => import_react_native.PanResponder.create({
       onStartShouldSetPanResponder: (event) => {
+        if (isNative) return false;
         const touches = event.nativeEvent.touches ?? [];
-        return pinchEnabled && shouldHandlePinch(touches) || selectionEnabled || inkEnabled;
+        if (touches.length !== 1) return false;
+        return inkEnabled;
       },
       onMoveShouldSetPanResponder: (event) => {
+        if (isNative) return false;
         const touches = event.nativeEvent.touches ?? [];
-        return pinchEnabled && shouldHandlePinch(touches) || selectionEnabled || inkEnabled;
-      },
-      onStartShouldSetPanResponderCapture: (event) => {
-        const touches = event.nativeEvent.touches ?? [];
-        return pinchEnabled && shouldHandlePinch(touches);
-      },
-      onMoveShouldSetPanResponderCapture: (event) => {
-        const touches = event.nativeEvent.touches ?? [];
-        return pinchEnabled && shouldHandlePinch(touches);
+        if (touches.length !== 1) return false;
+        return selectionEnabled || inkEnabled;
       },
       onPanResponderGrant: (event) => {
-        const touches = event.nativeEvent.touches ?? [];
-        if (pinchEnabled && shouldHandlePinch(touches)) {
-          isPinchingRef.current = true;
-          setIsSelecting(false);
-          selectionStart.current = null;
-          handlePinchStart(touches);
-          return;
-        }
-        isPinchingRef.current = false;
         if (inkEnabled) {
           beginInkDrawing(
             event.nativeEvent.locationX,
@@ -21763,26 +22074,13 @@ var PageRenderer = ({
           );
           return;
         }
-        if (!selectionEnabled || !layout.width || !layout.height) return;
-        const { locationX, locationY } = event.nativeEvent;
-        selectionStart.current = { x: locationX, y: locationY };
-        setIsSelecting(true);
-        const rect = { x: locationX, y: locationY, width: 0, height: 0 };
-        selectionRectRef.current = rect;
-        setSelectionRect(rect);
+        beginSelectionDrag(
+          event.nativeEvent.locationX,
+          event.nativeEvent.locationY,
+          event.nativeEvent.pageY ?? event.nativeEvent.locationY
+        );
       },
-      onPanResponderMove: (event, gestureState) => {
-        const touches = event.nativeEvent.touches ?? [];
-        if (pinchEnabled && (shouldHandlePinch(touches) || isPinchingRef.current)) {
-          if (shouldHandlePinch(touches)) {
-            if (!isPinchingRef.current) {
-              isPinchingRef.current = true;
-              handlePinchStart(touches);
-            }
-            handlePinchMove(touches);
-          }
-          return;
-        }
+      onPanResponderMove: (event) => {
         if (inkEnabled) {
           pushInkPoint(
             event.nativeEvent.locationX,
@@ -21790,79 +22088,90 @@ var PageRenderer = ({
           );
           return;
         }
-        if (!selectionEnabled || !selectionStart.current) return;
-        const start = selectionStart.current;
-        const currentX = start.x + gestureState.dx;
-        const currentY = start.y + gestureState.dy;
-        const left = Math.max(0, Math.min(start.x, currentX));
-        const top = Math.max(0, Math.min(start.y, currentY));
-        const right = Math.min(layout.width, Math.max(start.x, currentX));
-        const bottom = Math.min(layout.height, Math.max(start.y, currentY));
-        const rect = {
-          x: left,
-          y: top,
-          width: right - left,
-          height: bottom - top
-        };
-        selectionRectRef.current = rect;
-        setSelectionRect(rect);
+        updateSelectionDrag(
+          event.nativeEvent.locationX,
+          event.nativeEvent.locationY,
+          event.nativeEvent.pageY ?? event.nativeEvent.locationY
+        );
       },
       onPanResponderRelease: async () => {
-        if (isPinchingRef.current) {
-          isPinchingRef.current = false;
-          handlePinchEnd();
-          return;
-        }
         if (inkEnabled) {
           finishInkDrawing();
           return;
         }
-        const rect = selectionRectRef.current;
-        if (!selectionEnabled || !rect || !layout.width || !layout.height) {
-          setIsSelecting(false);
-          selectionStart.current = null;
-          return;
-        }
-        setIsSelecting(false);
-        selectionStart.current = null;
-        const minSize = 6;
-        if (rect.width < minSize || rect.height < minSize) {
-          clearSelection();
-          return;
-        }
-        const normalized = {
-          x: rect.x / layout.width,
-          y: rect.y / layout.height,
-          width: rect.width / layout.width,
-          height: rect.height / layout.height
-        };
-        await selectFromBounds(normalized);
-        setSelectionRect(null);
+        await finishSelectionDrag();
       },
       onPanResponderTerminate: () => {
-        if (isPinchingRef.current) {
-          isPinchingRef.current = false;
-          handlePinchEnd();
-          return;
-        }
         if (inkEnabled) {
           finishInkDrawing();
           return;
         }
-        setIsSelecting(false);
-        selectionStart.current = null;
+        cancelSelectionDrag();
       }
     }),
     [
-      selectionEnabled,
+      beginSelectionDrag,
+      cancelSelectionDrag,
+      finishSelectionDrag,
+      isNative,
       inkEnabled,
-      pinchEnabled,
-      layout.width,
-      layout.height,
-      annotationColor,
-      zoom
+      beginInkDrawing,
+      finishInkDrawing,
+      pushInkPoint,
+      selectionEnabled,
+      updateSelectionDrag
+    ]
+  );
+  const selectionGesture = (0, import_react.useMemo)(
+    () => import_react_native_gesture_handler.Gesture.Pan().enabled(
+      isNative && selectionEnabled && selectionRects.length === 0 && !selectionBounds
+    ).maxPointers(1).minDistance(4).runOnJS(true).onStart((event) => {
+      beginSelectionDrag(event.x, event.y, event.absoluteY);
+    }).onUpdate((event) => {
+      updateSelectionDrag(event.x, event.y, event.absoluteY);
+    }).onEnd(() => {
+      void finishSelectionDrag();
+    }).onFinalize(() => {
+      if (selectionDragActiveRef.current) {
+        cancelSelectionDrag();
+      }
+    }),
+    [
+      beginSelectionDrag,
+      cancelSelectionDrag,
+      finishSelectionDrag,
+      isNative,
+      selectionBounds,
+      selectionEnabled,
+      selectionRects.length,
+      updateSelectionDrag
     ]
   );
+  const inkGesture = (0, import_react.useMemo)(
+    () => import_react_native_gesture_handler.Gesture.Pan().enabled(isNative && inkEnabled).maxPointers(1).minDistance(0).runOnJS(true).onStart((event) => {
+      beginInkDrawing(event.x, event.y);
+    }).onUpdate((event) => {
+      pushInkPoint(event.x, event.y);
+    }).onEnd(() => {
+      finishInkDrawing();
+    }).onFinalize(() => {
+      if (inkDrawingActiveRef.current) {
+        finishInkDrawing();
+      }
+    }),
+    [beginInkDrawing, finishInkDrawing, inkEnabled, isNative, pushInkPoint]
+  );
+  const doubleTapGesture = (0, import_react.useMemo)(
+    () => import_react_native_gesture_handler.Gesture.Tap().enabled(isNative && activeTool === "select").numberOfTaps(2).maxDistance(24).maxDelay(280).maxDuration(250).runOnJS(true).onEnd((event, success) => {
+      if (!success) return;
+      handleDoubleTap(event.x, event.y);
+    }),
+    [activeTool, handleDoubleTap, isNative]
+  );
+  const contentGesture = (0, import_react.useMemo)(
+    () => import_react_native_gesture_handler.Gesture.Simultaneous(selectionGesture, inkGesture, doubleTapGesture),
+    [doubleTapGesture, inkGesture, selectionGesture]
+  );
   const selectionBoundsPx = (0, import_react.useMemo)(() => {
     if (!selectionBounds || !layout.width || !layout.height) return null;
     return {
@@ -21886,8 +22195,8 @@ var PageRenderer = ({
       const minSize = 0.01;
       let next = { ...start };
       if (handle === "start") {
-        const newX = clamp(start.x + dx, 0, start.x + start.width - minSize);
-        const newY = clamp(start.y + dy, 0, start.y + start.height - minSize);
+        const newX = clamp3(start.x + dx, 0, start.x + start.width - minSize);
+        const newY = clamp3(start.y + dy, 0, start.y + start.height - minSize);
         next = {
           x: newX,
           y: newY,
@@ -21895,8 +22204,8 @@ var PageRenderer = ({
           height: start.y + start.height - newY
         };
       } else {
-        const maxX = clamp(start.x + start.width + dx, start.x + minSize, 1);
-        const maxY = clamp(start.y + start.height + dy, start.y + minSize, 1);
+        const maxX = clamp3(start.x + start.width + dx, start.x + minSize, 1);
+        const maxY = clamp3(start.y + start.height + dy, start.y + minSize, 1);
         next = {
           x: start.x,
           y: start.y,
@@ -21970,29 +22279,83 @@ var PageRenderer = ({
   const pageWidth = isNative ? baseWidth * zoom : baseWidth;
   const pageHeight = pageWidth / aspectRatio;
   const hasActiveSelection = selectionRects.length > 0 || !!selectionBounds || isSelecting;
-  const scrollEnabled = isNative && zoom > 1 && !hasActiveSelection && !isInkDrawing;
+  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
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_native.ScrollView,
     {
+      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: [
         styles.scrollContent,
         { paddingHorizontal: horizontalPadding }
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      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,
         {
           ...panResponder.panHandlers,
           style: [
             styles.container,
-            { width: pageWidth, height: pageHeight, marginBottom: spacing }
+            {
+              width: pageWidth,
+              height: pageHeight,
+              marginBottom: spacing
+            }
           ],
           onLayout: handleLayout,
+          onTouchStart: (event) => logRawTouchDebug("start", event),
+          onTouchMove: (event) => logRawTouchDebug("move", event),
+          onTouchEnd: (event) => logRawTouchDebug("end", event),
+          onTouchCancel: (event) => logRawTouchDebug("cancel", event),
           onPress: handlePress,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageViewComponent, { ref: viewRef, style: styles.page }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              PageViewComponent,
+              {
+                ref: viewRef,
+                pointerEvents: "none",
+                style: styles.page
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_react_native.View,
               {
@@ -22129,7 +22492,9 @@ var PageRenderer = ({
               const isSelected = selectedAnnotationId === ann.id;
               const isText = ann.type === "comment" || ann.type === "text";
               const isInk = ann.type === "ink" && Array.isArray(ann.path) && ann.path.length > 1;
-              const isMarkup = TEXT_MARKUP_TOOLS.has(ann.type);
+              const isMarkup = TEXT_MARKUP_TOOLS.has(
+                ann.type
+              );
               const rects = ann.rects && ann.rects.length > 0 ? ann.rects : [ann.rect];
               const hitTargetStyle = {
                 left: `${ann.rect.x * 100}%`,
@@ -22169,7 +22534,10 @@ var PageRenderer = ({
                           import_react_native.View,
                           {
                             pointerEvents: "none",
-                            style: [styles.annotationLineContainer, rectStyle],
+                            style: [
+                              styles.annotationLineContainer,
+                              rectStyle
+                            ],
                             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                               import_react_native.View,
                               {
@@ -22188,7 +22556,10 @@ var PageRenderer = ({
                           import_react_native.View,
                           {
                             pointerEvents: "none",
-                            style: [styles.annotationLineContainer, rectStyle],
+                            style: [
+                              styles.annotationLineContainer,
+                              rectStyle
+                            ],
                             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                               import_react_native.View,
                               {
@@ -22421,7 +22792,7 @@ var PageRenderer = ({
             ) : null
           ]
         }
-      )
+      ) })
     }
   );
 };
@@ -22648,7 +23019,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;
+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 PageRenderer_default = (0, import_react.memo)(PageRenderer, arePageRendererPropsEqual);
 
 // components/WebViewViewer.tsx
@@ -22800,6 +23171,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 resolvePositiveInt = (value, fallback, min, max) => {
   if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
   const rounded = Math.round(value);
@@ -22857,6 +23230,26 @@ var Viewer = ({
   const scrollDownAccumRef = (0, import_react3.useRef)(0);
   const scrollUpAccumRef = (0, import_react3.useRef)(0);
   const [layoutRevision, setLayoutRevision] = (0, import_react3.useState)(0);
+  const [selectionDragActive, setSelectionDragActive] = (0, import_react3.useState)(false);
+  const selectionDragActiveRef = (0, import_react3.useRef)(false);
+  const [gestureScrollLockActive, setGestureScrollLockActive] = (0, import_react3.useState)(false);
+  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 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)(
     () => resolvePositiveInt(virtualWindowSize, FLATLIST_WINDOW_SIZE, 2, 30),
     [virtualWindowSize]
@@ -22955,6 +23348,9 @@ var Viewer = ({
       if (layoutRefreshTimeoutRef.current) {
         clearTimeout(layoutRefreshTimeoutRef.current);
       }
+      if (pinchAnchorRestoreFrameRef.current !== null) {
+        cancelAnimationFrame(pinchAnchorRestoreFrameRef.current);
+      }
       clearPendingScrollRetry();
       clearPendingChromeShow();
     },
@@ -23121,6 +23517,513 @@ var Viewer = ({
   const columnGap = 12;
   const horizontalPadding = 16;
   const columnWidth = isDouble ? (windowWidth - horizontalPadding * 2 - columnGap) / 2 : windowWidth;
+  const getPageWidthForZoom = (0, import_react3.useCallback)(
+    (pageIndex, zoomValue) => {
+      const safeZoom = Math.max(zoomValue, 0.25);
+      const baseWidth = isDouble ? columnWidth * 0.92 : windowWidth * 0.92;
+      return baseWidth * safeZoom;
+    },
+    [columnWidth, isDouble, windowWidth]
+  );
+  const getPageHeightForZoom = (0, import_react3.useCallback)(
+    (pageIndex, zoomValue) => getPageWidthForZoom(pageIndex, zoomValue) / getPageAspectRatio(pageIndex),
+    [getPageAspectRatio, getPageWidthForZoom]
+  );
+  const getPageViewportMetrics = (0, import_react3.useCallback)(
+    (pageIndex) => {
+      if (isDouble) {
+        const isRight = pageIndex % 2 === 1;
+        return {
+          viewportWidth: columnWidth,
+          horizontalPadding: 8,
+          viewportOffsetX: horizontalPadding + (isRight ? columnWidth + columnGap : 0)
+        };
+      }
+      return {
+        viewportWidth: windowWidth,
+        horizontalPadding: 16,
+        viewportOffsetX: 0
+      };
+    },
+    [columnGap, columnWidth, horizontalPadding, isDouble, windowWidth]
+  );
+  const getPageLayoutForZoom = (0, import_react3.useCallback)(
+    (pageIndex, zoomValue) => {
+      if (isSingle) {
+        const pageHeight = getPageHeightForZoom(pageIndex, zoomValue);
+        return {
+          pageOffsetY: 18,
+          pageHeight,
+          totalContentHeight: 18 + pageHeight + 140
+        };
+      }
+      if (isDouble) {
+        let offsetY2 = LIST_TOP_PADDING;
+        for (let rowIndex = 0; rowIndex < rows.length; rowIndex += 1) {
+          const row = rows[rowIndex];
+          const leftHeight = getPageHeightForZoom(row.left, zoomValue);
+          const rightHeight = row.right === null ? leftHeight : getPageHeightForZoom(row.right, zoomValue);
+          const rowLength = Math.max(leftHeight, rightHeight) + DOUBLE_PAGE_SPACING;
+          if (row.left === pageIndex || row.right === pageIndex) {
+            let totalContentHeight = LIST_TOP_PADDING;
+            for (let totalRowIndex = 0; totalRowIndex < rows.length; totalRowIndex += 1) {
+              const totalRow = rows[totalRowIndex];
+              const totalLeftHeight = getPageHeightForZoom(
+                totalRow.left,
+                zoomValue
+              );
+              const totalRightHeight = totalRow.right === null ? totalLeftHeight : getPageHeightForZoom(totalRow.right, zoomValue);
+              totalContentHeight += Math.max(totalLeftHeight, totalRightHeight) + DOUBLE_PAGE_SPACING;
+            }
+            totalContentHeight += LIST_BOTTOM_PADDING;
+            return {
+              pageOffsetY: offsetY2,
+              pageHeight: getPageHeightForZoom(pageIndex, zoomValue),
+              totalContentHeight
+            };
+          }
+          offsetY2 += rowLength;
+        }
+      }
+      let offsetY = LIST_TOP_PADDING;
+      for (let currentPageIndex = 0; currentPageIndex < pageCount; currentPageIndex += 1) {
+        const currentPageHeight = getPageHeightForZoom(
+          currentPageIndex,
+          zoomValue
+        );
+        if (currentPageIndex === pageIndex) {
+          let totalContentHeight = LIST_TOP_PADDING;
+          for (let totalPageIndex = 0; totalPageIndex < pageCount; totalPageIndex += 1) {
+            totalContentHeight += getPageHeightForZoom(totalPageIndex, zoomValue) + CONTINUOUS_PAGE_SPACING;
+          }
+          totalContentHeight += LIST_BOTTOM_PADDING;
+          return {
+            pageOffsetY: offsetY,
+            pageHeight: currentPageHeight,
+            totalContentHeight
+          };
+        }
+        offsetY += currentPageHeight + CONTINUOUS_PAGE_SPACING;
+      }
+      return {
+        pageOffsetY: LIST_TOP_PADDING,
+        pageHeight: getPageHeightForZoom(pageIndex, zoomValue),
+        totalContentHeight: LIST_TOP_PADDING + getPageHeightForZoom(pageIndex, zoomValue) + CONTINUOUS_PAGE_SPACING + LIST_BOTTOM_PADDING
+      };
+    },
+    [getPageHeightForZoom, isDouble, isSingle, pageCount, rows]
+  );
+  const resolvePinchAnchorPageIndex = (0, import_react3.useCallback)(
+    (focalX, focalY, zoomValue, scrollOffsetY = lastScrollOffsetYRef.current) => {
+      if (isSingle) {
+        return Math.max(0, currentPage - 1);
+      }
+      const contentY = Math.max(0, scrollOffsetY + focalY);
+      if (isDouble) {
+        let offsetY2 = LIST_TOP_PADDING;
+        for (let rowIndex = 0; rowIndex < rows.length; rowIndex += 1) {
+          const row = rows[rowIndex];
+          const leftHeight = getPageHeightForZoom(row.left, zoomValue);
+          const rightHeight = row.right === null ? leftHeight : getPageHeightForZoom(row.right, zoomValue);
+          const rowLength = Math.max(leftHeight, rightHeight) + DOUBLE_PAGE_SPACING;
+          if (contentY <= offsetY2 + rowLength || rowIndex === rows.length - 1) {
+            const isRight = row.right !== null && focalX > horizontalPadding + columnWidth + columnGap / 2;
+            return isRight ? row.right : row.left;
+          }
+          offsetY2 += rowLength;
+        }
+        return rows[rows.length - 1]?.left ?? 0;
+      }
+      let offsetY = LIST_TOP_PADDING;
+      for (let pageIndex = 0; pageIndex < pageCount; pageIndex += 1) {
+        const pageLength = getPageHeightForZoom(pageIndex, zoomValue) + CONTINUOUS_PAGE_SPACING;
+        if (contentY <= offsetY + pageLength || pageIndex === pageCount - 1) {
+          return pageIndex;
+        }
+        offsetY += pageLength;
+      }
+      return Math.max(0, pageCount - 1);
+    },
+    [
+      columnGap,
+      columnWidth,
+      currentPage,
+      getPageHeightForZoom,
+      horizontalPadding,
+      isDouble,
+      isSingle,
+      pageCount,
+      rows
+    ]
+  );
+  const resolvedViewerScrollEnabled = shouldEnableViewerScroll({
+    selectionDragActive,
+    gestureScrollLockActive
+  });
+  const setViewerScrollEnabledNative = (0, import_react3.useCallback)((enabled) => {
+    const scrollNode = listRef.current;
+    scrollNode?.setNativeProps?.({ scrollEnabled: enabled });
+  }, []);
+  const syncViewerScrollEnabled = (0, import_react3.useCallback)(
+    (nextSelectionDragActive = selectionDragActiveRef.current, nextGestureScrollLockActive = gestureScrollLockActiveRef.current) => {
+      setViewerScrollEnabledNative(
+        shouldEnableViewerScroll({
+          selectionDragActive: nextSelectionDragActive,
+          gestureScrollLockActive: nextGestureScrollLockActive
+        })
+      );
+    },
+    [setViewerScrollEnabledNative]
+  );
+  const handleGestureScrollLockChange = (0, import_react3.useCallback)(
+    (active) => {
+      if (gestureScrollLockActiveRef.current === active) return;
+      gestureScrollLockActiveRef.current = active;
+      setGestureScrollLockActive(active);
+      syncViewerScrollEnabled(selectionDragActiveRef.current, active);
+    },
+    [syncViewerScrollEnabled]
+  );
+  const handlePinchPreviewScaleChange = (0, import_react3.useCallback)((scale) => {
+    const nextScale = sanitizePinchPreviewScale(scale);
+    setPinchPreviewScale((current) => {
+      if (Math.abs(current - nextScale) < 5e-4) {
+        return current;
+      }
+      return nextScale;
+    });
+  }, []);
+  const resetViewerPinchPreview = (0, import_react3.useCallback)(() => {
+    pinchPreviewZoomRef.current = pinchStartZoomRef.current;
+    handlePinchPreviewScaleChange(1);
+  }, [handlePinchPreviewScaleChange]);
+  const beginViewerPinch = (0, import_react3.useCallback)(
+    (focalX, focalY) => {
+      pinchGestureActiveRef.current = true;
+      pinchStartZoomRef.current = zoom;
+      pinchPreviewZoomRef.current = zoom;
+      pinchFocalPointRef.current = { x: focalX, y: focalY };
+      pinchUpdateLoggedAtRef.current = 0;
+      setLastPinchEndedAt(null);
+      handlePinchPreviewScaleChange(1);
+      handleGestureScrollLockChange(true);
+      if (perfEnabled) {
+        logPerfEvent("Viewer", "pinch.start", {
+          zoom: Math.round(zoom * 100) / 100
+        });
+      }
+    },
+    [
+      handleGestureScrollLockChange,
+      handlePinchPreviewScaleChange,
+      perfEnabled,
+      zoom
+    ]
+  );
+  const updateViewerPinch = (0, import_react3.useCallback)(
+    (scaleFactor, focalX, focalY) => {
+      if (!pinchGestureActiveRef.current) return;
+      pinchFocalPointRef.current = { x: focalX, y: focalY };
+      const nextZoom = resolvePinchGestureZoom(
+        pinchStartZoomRef.current,
+        scaleFactor
+      );
+      pinchPreviewZoomRef.current = nextZoom;
+      handlePinchPreviewScaleChange(
+        resolvePinchPreviewScale(pinchStartZoomRef.current, nextZoom)
+      );
+      if (!perfEnabled) return;
+      const now = Date.now();
+      if (now - pinchUpdateLoggedAtRef.current < 120) return;
+      pinchUpdateLoggedAtRef.current = now;
+      logPerfEvent("Viewer", "pinch.update", {
+        scale: Math.round(scaleFactor * 1e3) / 1e3,
+        nextZoom: Math.round(nextZoom * 100) / 100
+      });
+    },
+    [handlePinchPreviewScaleChange, perfEnabled]
+  );
+  const finishViewerPinch = (0, import_react3.useCallback)(() => {
+    if (!pinchGestureActiveRef.current) return;
+    pinchGestureActiveRef.current = false;
+    const focalX = pinchFocalPointRef.current.x;
+    const focalY = pinchFocalPointRef.current.y;
+    const viewerScrollOffsetY = lastScrollOffsetYRef.current;
+    const finalZoom = resolvePinchGestureZoom(
+      pinchPreviewZoomRef.current || pinchStartZoomRef.current,
+      1,
+      DEFAULT_PINCH_ZOOM_BOUNDS
+    );
+    setLastPinchEndedAt(Date.now());
+    if (Math.abs(finalZoom - zoom) >= 1e-3) {
+      const anchorPageIndex = resolvePinchAnchorPageIndex(
+        focalX,
+        focalY,
+        zoom,
+        viewerScrollOffsetY
+      );
+      const { pageOffsetY: startPageOffsetY, pageHeight: startPageHeight } = getPageLayoutForZoom(anchorPageIndex, zoom);
+      const startPageWidth = getPageWidthForZoom(anchorPageIndex, zoom);
+      const {
+        viewportWidth: pageViewportWidth,
+        horizontalPadding: pageHorizontalPadding,
+        viewportOffsetX
+      } = getPageViewportMetrics(anchorPageIndex);
+      const pageViewportContentWidth = Math.max(
+        0,
+        pageViewportWidth - pageHorizontalPadding * 2
+      );
+      pendingPinchAnchorRestoreRef.current = {
+        finalZoom,
+        focalY,
+        viewerScrollOffsetY,
+        pageIndex: anchorPageIndex,
+        startPageOffsetY,
+        startPageHeight,
+        startPageWidth,
+        startPageScrollX: horizontalScrollOffsetsRef.current.get(anchorPageIndex) ?? 0,
+        pageViewportWidth,
+        pageHorizontalPadding,
+        pageViewportContentOffsetX: Math.max(
+          0,
+          Math.min(
+            pageViewportContentWidth,
+            focalX - viewportOffsetX - pageHorizontalPadding
+          )
+        )
+      };
+      setDocumentStateTracked({ zoom: finalZoom }, "pinch.viewerEnd");
+      engine.setZoom(finalZoom);
+    } else {
+      pendingPinchAnchorRestoreRef.current = null;
+    }
+    resetViewerPinchPreview();
+    handleGestureScrollLockChange(false);
+    if (perfEnabled) {
+      logPerfEvent("Viewer", "pinch.end", {
+        finalZoom: Math.round(finalZoom * 100) / 100,
+        page: pendingPinchAnchorRestoreRef.current?.pageIndex ?? null
+      });
+    }
+  }, [
+    engine,
+    getPageLayoutForZoom,
+    getPageViewportMetrics,
+    getPageWidthForZoom,
+    handleGestureScrollLockChange,
+    perfEnabled,
+    resetViewerPinchPreview,
+    resolvePinchAnchorPageIndex,
+    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(
+        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
+        };
+      });
+    },
+    [getPageViewportMetrics, getPageWidthForZoom, zoom]
+  );
+  const viewerPinchGesture = (0, import_react3.useMemo)(
+    () => import_react_native_gesture_handler2.Gesture.Pinch().enabled(!isWebView && pageCount > 0).onTouchesDown((event) => {
+      if ((event.allTouches?.length ?? 0) >= 2) {
+        handleGestureScrollLockChange(true);
+      }
+    }).onTouchesUp((event) => {
+      if ((event.allTouches?.length ?? 0) < 2 && !pinchGestureActiveRef.current) {
+        handleGestureScrollLockChange(false);
+      }
+    }).runOnJS(true).onStart((event) => {
+      beginViewerPinch(event.focalX, event.focalY);
+    }).onUpdate((event) => {
+      updateViewerPinch(event.scale, event.focalX, event.focalY);
+    }).onEnd(() => {
+      finishViewerPinch();
+    }).onFinalize(() => {
+      finishViewerPinch();
+      resetViewerPinchPreview();
+      handleGestureScrollLockChange(false);
+    }),
+    [
+      beginViewerPinch,
+      finishViewerPinch,
+      handleGestureScrollLockChange,
+      isWebView,
+      pageCount,
+      resetViewerPinchPreview,
+      updateViewerPinch
+    ]
+  );
+  (0, import_react3.useEffect)(() => {
+    selectionDragActiveRef.current = selectionDragActive;
+    syncViewerScrollEnabled(
+      selectionDragActive,
+      gestureScrollLockActiveRef.current
+    );
+  }, [selectionDragActive, syncViewerScrollEnabled]);
+  (0, import_react3.useEffect)(() => {
+    const pendingRestore = pendingPinchAnchorRestoreRef.current;
+    if (!pendingRestore) return;
+    if (Math.abs(pendingRestore.finalZoom - zoom) >= 1e-3) return;
+    if (pinchAnchorRestoreFrameRef.current !== null) {
+      cancelAnimationFrame(pinchAnchorRestoreFrameRef.current);
+    }
+    pinchAnchorRestoreFrameRef.current = requestAnimationFrame(() => {
+      pinchAnchorRestoreFrameRef.current = null;
+      const {
+        pageOffsetY: endPageOffsetY,
+        pageHeight: endPageHeight,
+        totalContentHeight: endContentHeight
+      } = getPageLayoutForZoom(pendingRestore.pageIndex, zoom);
+      const viewerViewportHeight = viewerFrameRef.current.height;
+      const nextScrollY = resolveAnchoredViewportOffset({
+        viewportOffset: pendingRestore.focalY,
+        startScrollOffset: pendingRestore.viewerScrollOffsetY,
+        startItemOffset: pendingRestore.startPageOffsetY,
+        startItemLength: pendingRestore.startPageHeight,
+        endItemOffset: endPageOffsetY,
+        endItemLength: endPageHeight,
+        viewportLength: viewerViewportHeight,
+        endContentLength: endContentHeight
+      });
+      if (isSingle) {
+        listRef.current?.scrollTo?.({
+          y: nextScrollY,
+          animated: false
+        });
+      } else {
+        listRef.current?.scrollToOffset({
+          offset: nextScrollY,
+          animated: false
+        });
+      }
+      lastScrollOffsetYRef.current = nextScrollY;
+      const endPageWidth = getPageWidthForZoom(pendingRestore.pageIndex, zoom);
+      const pageViewportContentWidth = Math.max(
+        0,
+        pendingRestore.pageViewportWidth - pendingRestore.pageHorizontalPadding * 2
+      );
+      const nextOffsetX = resolveAnchoredViewportOffset({
+        viewportOffset: pendingRestore.pageViewportContentOffsetX,
+        startScrollOffset: pendingRestore.startPageScrollX,
+        startItemOffset: 0,
+        startItemLength: pendingRestore.startPageWidth,
+        endItemOffset: 0,
+        endItemLength: endPageWidth,
+        viewportLength: pageViewportContentWidth,
+        endContentLength: endPageWidth
+      });
+      const requestId = nextHorizontalRestoreRequestIdRef.current + 1;
+      nextHorizontalRestoreRequestIdRef.current = requestId;
+      setHorizontalScrollRestore({
+        pageIndex: pendingRestore.pageIndex,
+        requestId,
+        offsetX: 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,
+          zoom: Math.round(zoom * 100) / 100
+        });
+      }
+    });
+    return () => {
+      if (pinchAnchorRestoreFrameRef.current !== null) {
+        cancelAnimationFrame(pinchAnchorRestoreFrameRef.current);
+        pinchAnchorRestoreFrameRef.current = null;
+      }
+    };
+  }, [getPageLayoutForZoom, getPageWidthForZoom, isSingle, perfEnabled, 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]);
+  const captureViewerFrame = (0, import_react3.useCallback)((node) => {
+    const measurable = node;
+    measurable?.measureInWindow?.((_, y, __, height) => {
+      viewerFrameRef.current = { y, height };
+    });
+  }, []);
+  const scrollViewerBy = (0, import_react3.useCallback)(
+    (deltaY) => {
+      if (!Number.isFinite(deltaY) || deltaY === 0) return 0;
+      const viewportHeight = viewerFrameRef.current.height;
+      const maxOffset = Math.max(
+        0,
+        viewerContentHeightRef.current - viewportHeight
+      );
+      const nextOffset = Math.max(
+        0,
+        Math.min(maxOffset, lastScrollOffsetYRef.current + deltaY)
+      );
+      const appliedDelta = nextOffset - lastScrollOffsetYRef.current;
+      if (appliedDelta === 0) return 0;
+      lastScrollOffsetYRef.current = nextOffset;
+      if (isSingle) {
+        listRef.current?.scrollTo?.({
+          y: nextOffset,
+          animated: false
+        });
+        return appliedDelta;
+      }
+      listRef.current?.scrollToOffset({ offset: nextOffset, animated: false });
+      return appliedDelta;
+    },
+    [isSingle]
+  );
+  const handleSelectionVerticalAutoscroll = (0, import_react3.useCallback)(
+    (absoluteY) => {
+      const frame = viewerFrameRef.current;
+      if (!Number.isFinite(absoluteY) || frame.height <= 0) return 0;
+      const relativeY = absoluteY - frame.y;
+      const { dy } = getSelectionEdgeAutoscroll({
+        x: SELECTION_EDGE_THRESHOLD_PX2,
+        y: relativeY,
+        width: SELECTION_EDGE_THRESHOLD_PX2 * 2,
+        height: frame.height,
+        threshold: SELECTION_EDGE_THRESHOLD_PX2,
+        maxStep: SELECTION_EDGE_MAX_STEP_PX2
+      });
+      return scrollViewerBy(dy);
+    },
+    [scrollViewerBy]
+  );
   const listLayoutMetrics = (0, import_react3.useMemo)(() => {
     const offsets = [];
     const lengths = [];
@@ -23361,7 +24264,13 @@ var Viewer = ({
               pageIndex: row.left,
               availableWidth: columnWidth,
               horizontalPadding: 8,
-              spacing: DOUBLE_PAGE_SPACING
+              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)(
@@ -23371,7 +24280,13 @@ var Viewer = ({
               pageIndex: row.right,
               availableWidth: columnWidth,
               horizontalPadding: 8,
-              spacing: DOUBLE_PAGE_SPACING
+              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 } })
         ] });
@@ -23381,114 +24296,170 @@ var Viewer = ({
         {
           engine,
           pageIndex: item,
-          spacing: CONTINUOUS_PAGE_SPACING
+          spacing: CONTINUOUS_PAGE_SPACING,
+          onSelectionDragActiveChange: setSelectionDragActive,
+          gestureScrollLockActive,
+          lastPinchEndedAt,
+          onHorizontalScrollOffsetChange: handlePageHorizontalScrollOffsetChange,
+          horizontalScrollRestore,
+          requestSelectionVerticalAutoscroll: handleSelectionVerticalAutoscroll
         }
       );
     },
-    [columnWidth, engine, horizontalPadding, isDouble]
+    [
+      columnWidth,
+      engine,
+      handlePageHorizontalScrollOffsetChange,
+      handleSelectionVerticalAutoscroll,
+      gestureScrollLockActive,
+      horizontalScrollRestore,
+      horizontalPadding,
+      isDouble,
+      lastPinchEndedAt
+    ]
   );
   if (isWebView) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles3.container, isDark && styles3.containerDark], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(WebViewViewer_default, { engine }) });
   }
   if (isSingle) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles3.container, isDark && styles3.containerDark], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_react_native3.ScrollView,
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles3.container, isDark && styles3.containerDark], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_gesture_handler2.GestureDetector, { gesture: viewerPinchGesture, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_native3.View,
       {
-        contentContainerStyle: styles3.singleContent,
-        showsVerticalScrollIndicator: false,
-        scrollEnabled: true,
-        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,
+        style: [
+          styles3.gestureSurface,
+          { transform: [{ scale: pinchPreviewScale }] }
+        ],
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          PageRenderer_default,
+          import_react_native3.ScrollView,
           {
-            engine,
-            pageIndex: Math.max(0, currentPage - 1),
-            spacing: 32
+            ref: (node) => {
+              captureViewerFrame(node);
+              listRef.current = node;
+            },
+            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),
+                spacing: 32,
+                onSelectionDragActiveChange: setSelectionDragActive,
+                gestureScrollLockActive,
+                lastPinchEndedAt,
+                onHorizontalScrollOffsetChange: handlePageHorizontalScrollOffsetChange,
+                horizontalScrollRestore,
+                requestSelectionVerticalAutoscroll: handleSelectionVerticalAutoscroll
+              }
+            )
           }
         )
       }
-    ) });
+    ) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles3.container, isDark && styles3.containerDark], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react_native3.FlatList,
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles3.container, isDark && styles3.containerDark], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_gesture_handler2.GestureDetector, { gesture: viewerPinchGesture, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_native3.View,
     {
-      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: true,
-      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);
+      style: [
+        styles3.gestureSurface,
+        { transform: [{ scale: pinchPreviewScale }] }
+      ],
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react_native3.FlatList,
+        {
+          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;
+          },
+          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
+      )
     }
-  ) });
+  ) }) });
 };
 var styles3 = import_react_native3.StyleSheet.create({
   container: {
@@ -23498,6 +24469,9 @@ var styles3 = import_react_native3.StyleSheet.create({
   containerDark: {
     backgroundColor: "#0f1115"
   },
+  gestureSurface: {
+    flex: 1
+  },
   listContent: {
     paddingTop: LIST_TOP_PADDING,
     paddingBottom: LIST_BOTTOM_PADDING
@@ -24170,6 +25144,7 @@ var ToolDock = () => {
     setAnnotationColor,
     accentColor,
     activeTool,
+    interactionMode,
     toolDockOpen,
     setDocumentState
   } = (0, import_core5.useViewerStore)();
@@ -24181,7 +25156,12 @@ var ToolDock = () => {
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_react_native5.Pressable,
         {
-          onPress: () => setDocumentState({ toolDockOpen: false }),
+          onPress: () => setDocumentState(
+            getToolDockDismissState({
+              activeTool,
+              interactionMode
+            })
+          ),
           style: [styles5.closeButton, isDark && styles5.closeButtonDark],
           children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             import_react_native5.Text,
@@ -24194,12 +25174,29 @@ var ToolDock = () => {
       )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { style: styles5.toolsRow, children: TOOL_OPTIONS.map((tool) => {
-      const isSelected = activeTool === tool.id;
+      const isSelected = isToolDockToolSelected({
+        toolId: tool.id,
+        activeTool,
+        interactionMode
+      });
       const label = tool.label === "note" ? t.note : tool.label === "select" ? t.select : tool.label === "underline" ? t.underline : tool.label === "squiggly" ? t.squiggly : tool.label === "strikeout" ? t.strikeout : tool.label === "ink" ? t.ink : t.highlight;
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_react_native5.Pressable,
         {
-          onPress: () => setDocumentState({ activeTool: tool.id }),
+          onPress: () => {
+            if (tool.id === "select") {
+              const shouldArmSelection = activeTool !== "select" || interactionMode !== "select";
+              setDocumentState({
+                activeTool: "select",
+                interactionMode: shouldArmSelection ? "select" : "pan"
+              });
+              return;
+            }
+            setDocumentState({
+              activeTool: tool.id,
+              interactionMode: "pan"
+            });
+          },
           style: [
             styles5.toolButton,
             isDark && styles5.toolButtonDark,