@arbidocs/react 0.3.185 → 0.4.0

package/dist/viewers/index.d.ts

@@ -24,6 +24,10 @@ interface PdfViewerProps {
     onLoadSuccess?: (numPages: number) => void;
     /** Incremented to trigger scroll to currentPage */
     scrollTrigger?: number;
+    /** Zoom as a multiplier of the fit-width size (1 = fit width). Default 1. */
+    zoom?: number;
+    /** Called by pinch and double-tap; the host owns the value (its buttons change it too). */
+    onZoomChange?: (zoom: number) => void;
     /**
      * Called as the user scrolls, with the page occupying most of the viewport.
      * This is the reusable form of the monolith's `setViewingDocumentPage`.
@@ -38,7 +42,7 @@ interface PdfViewerProps {
     /** Where the app serves the pdf.js worker, cmaps and standard fonts from. */
     assets?: PdfViewerAssets;
 }
-declare function PdfViewer({ file, currentPage, onLoadSuccess, scrollTrigger, onPageChange, disableFontFace, assets, }: PdfViewerProps): React.JSX.Element;
+declare function PdfViewer({ file, currentPage, onLoadSuccess, scrollTrigger, zoom, onZoomChange, onPageChange, disableFontFace, assets, }: PdfViewerProps): React.JSX.Element;
 
 type DocResponse = components['schemas']['DocResponse'];
 /** Which native renderer a file needs; `none` when there is no native view. */
@@ -129,6 +133,78 @@ interface VideoViewerProps {
 /** Renders a video blob with the browser's native transport controls. */
 declare function VideoViewer({ blob, title }: VideoViewerProps): React.JSX.Element | null;
 
+/**
+ * Zoom for page-stacked viewers (PDF + parsed/HTML).
+ *
+ * Browser pinch-zoom only magnifies the bitmap the page already painted: a PDF canvas rendered at
+ * fit-width stays blurry however far you pinch. The viewers therefore own the zoom: `zoom` is a
+ * multiplier of the fit-width size (1 = fit width, 2 = twice as wide). The PDF viewer re-renders
+ * its canvases at the new scale; the parsed viewer reflows its text. This module holds the pure
+ * math and the touch gesture hook (pinch, double-tap) both use.
+ */
+
+declare const MIN_ZOOM = 0.5;
+declare const MAX_ZOOM = 4;
+declare function clampZoom(zoom: number): number;
+/** One zoom button step in (`1`) or out (`-1`). */
+declare function stepZoom(zoom: number, direction: 1 | -1): number;
+/** Double-tap toggles between fit width and a comfortable reading zoom. */
+declare function doubleTapZoom(zoom: number): number;
+declare function zoomLabel(zoom: number): string;
+/** The zoom a pinch has reached: the start zoom scaled by how far the fingers moved apart. */
+declare function pinchZoom(startZoom: number, startDistance: number, distance: number): number;
+/**
+ * New scroll offset that keeps the content point under `focal` (a viewport coordinate) still while
+ * the zoom changes from `oldZoom` to `newZoom`.
+ */
+declare function anchoredScroll(scroll: number, focal: number, oldZoom: number, newZoom: number): number;
+/**
+ * Device pixel ratio to rasterise a page of `cssWidth` x `cssHeight` at: the device's own, capped,
+ * and lowered further when the page would otherwise exceed the canvas pixel budget.
+ */
+declare function renderDpr(cssWidth: number, cssHeight: number, devicePixelRatio: number, maxPixels?: number): number;
+interface PinchZoomOptions {
+    containerRef: RefObject<HTMLElement | null>;
+    zoom: number;
+    onZoomChange?: (zoom: number) => void;
+}
+/**
+ * Pinch and double-tap zoom on a scroller, plus focal-point preservation for EVERY zoom change
+ * (gesture, buttons, props): after the new zoom has laid out, the scroll offset is moved so the
+ * content under the pinch centre (or the viewport centre) stays where it was.
+ *
+ * The scroller must carry `touch-action: pan-x pan-y` so the browser leaves two-finger gestures
+ * to this hook instead of zooming the whole app.
+ */
+declare function usePinchZoom({ containerRef, zoom, onZoomChange }: PinchZoomOptions): void;
+
+/**
+ * Scroll stability for page-stacked viewers (PDF + parsed/HTML).
+ *
+ * Pages are lazy: their height can change after the user is already looking at something further
+ * down (a placeholder replaced by the real page, a late canvas). Browsers that implement scroll
+ * anchoring (Chromium) hide that; Safari/WebKit does not, so the content visibly jumps under the
+ * finger and momentum scrolling is cut short. The viewers therefore do their own anchoring, the
+ * same way on every engine: native anchoring is switched off and a page that changes height
+ * entirely ABOVE the viewport shifts `scrollTop` by exactly that change.
+ */
+
+/** One page of a stacked viewer (both viewers mark pages like this). */
+declare const PAGE_SELECTOR = "[role=\"article\"][data-page-number]";
+/**
+ * How far to move `scrollTop` after a page changed height from `previousHeight` to `nextHeight`.
+ * Only a page that lay completely above the visible top edge (`containerTop`) pushes the content
+ * the user is reading; anything at or below it just grows or shrinks away from the viewport.
+ *
+ * @param pageTop viewport-relative top of the page (unchanged by its own resize)
+ */
+declare function anchorDelta(previousHeight: number, nextHeight: number, pageTop: number, containerTop: number): number;
+/**
+ * Keep the reading position when pages above it change height. `key` re-scans for pages when the
+ * page set changes (page count, first layout).
+ */
+declare function useScrollAnchor(containerRef: RefObject<HTMLElement | null>, key: unknown): void;
+
 interface UsePageIntersectionObserverOptions {
     /** Container element that scrolls */
     containerRef: RefObject<HTMLElement | null>;
@@ -144,12 +220,22 @@ interface UsePageIntersectionObserverOptions {
     onPageChange: (pageNumber: number) => void;
     /** Optional callback with visibility data for custom logic (e.g., lazy loading) */
     onVisibilityUpdate?: (visibilityMap: Map<number, number>) => void;
+    /**
+     * Re-subscribe when this changes (the set of page elements: page count, first layout). Callers
+     * may pass fresh inline callbacks every render: they are read through refs and never cause a
+     * re-subscribe (a re-subscribe re-delivers every page and, with a state-setting callback, loops).
+     */
+    observeKey?: unknown;
 }
 /**
- * Custom hook to track visible pages using IntersectionObserver.
+ * Custom hook to track the visible page of a page-stacked viewer.
  * Used for bidirectional page synchronization in document viewers.
+ *
+ * IntersectionObserver wakes it when pages enter or leave the viewport; a passive scroll listener
+ * (at most one measurement per frame) keeps it current in between. The page itself is chosen from
+ * live geometry (see `measureVisiblePages`).
  */
-declare function usePageIntersectionObserver({ containerRef, scrollCompleteRef, isEnabled, getPageElements, getPageNumber, onPageChange, onVisibilityUpdate, }: UsePageIntersectionObserverOptions): void;
+declare function usePageIntersectionObserver({ containerRef, scrollCompleteRef, isEnabled, getPageElements, getPageNumber, onPageChange, onVisibilityUpdate, observeKey, }: UsePageIntersectionObserverOptions): void;
 
 /** Pages to render before the visible area (canvas pre-load buffer) */
 declare const LAZY_LOAD_BUFFER_BEFORE = 2;
@@ -165,4 +251,4 @@ declare const INITIAL_LAZY_LOAD_BUFFER: {
     after: number;
 };
 
-export { AudioViewer, type AudioViewerProps, DocumentViewer, type DocumentViewerProps, DocxViewer, type DocxViewerProps, INITIAL_LAZY_LOAD_BUFFER, ImageViewer, type ImageViewerProps, LAZY_LOAD_BUFFER_AFTER, LAZY_LOAD_BUFFER_BEFORE, type NativeViewerKind, PdfViewer, type PdfViewerAssets, type PdfViewerProps, VideoViewer, type VideoViewerProps, XlsxViewer, type XlsxViewerProps, nativeViewerKind, usePageIntersectionObserver };
+export { AudioViewer, type AudioViewerProps, DocumentViewer, type DocumentViewerProps, DocxViewer, type DocxViewerProps, INITIAL_LAZY_LOAD_BUFFER, ImageViewer, type ImageViewerProps, LAZY_LOAD_BUFFER_AFTER, LAZY_LOAD_BUFFER_BEFORE, MAX_ZOOM, MIN_ZOOM, type NativeViewerKind, PAGE_SELECTOR, PdfViewer, type PdfViewerAssets, type PdfViewerProps, VideoViewer, type VideoViewerProps, XlsxViewer, type XlsxViewerProps, anchorDelta, anchoredScroll, clampZoom, doubleTapZoom, nativeViewerKind, pinchZoom, renderDpr, stepZoom, usePageIntersectionObserver, usePinchZoom, useScrollAnchor, zoomLabel };

package/dist/viewers/index.js

@@ -1,11 +1,64 @@
 import { useArbi, VideoViewer, AudioViewer, ImageViewer } from '../chunk-JKO3NR5L.js';
 export { AudioViewer, ImageViewer, VideoViewer } from '../chunk-JKO3NR5L.js';
-import { useEffect, useState, useRef, useCallback, useMemo, useLayoutEffect } from 'react';
+import { useEffect, useRef, useCallback, useLayoutEffect, useState, useMemo } from 'react';
 import { Document, Page, pdfjs } from 'react-pdf';
 import 'react-pdf/dist/Page/AnnotationLayer.css';
 import 'react-pdf/dist/Page/TextLayer.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+var PAGE_SELECTOR = '[role="article"][data-page-number]';
+function anchorDelta(previousHeight, nextHeight, pageTop, containerTop) {
+  const delta = nextHeight - previousHeight;
+  if (delta === 0) return 0;
+  return pageTop + previousHeight <= containerTop + 1 ? delta : 0;
+}
+function measureVisiblePages(pages, viewTop, viewBottom) {
+  const visibility = /* @__PURE__ */ new Map();
+  let page = null;
+  let bestPx = 0;
+  let score = 0;
+  const viewHeight = viewBottom - viewTop;
+  for (const p of pages) {
+    const height = p.bottom - p.top;
+    const px = Math.min(p.bottom, viewBottom) - Math.max(p.top, viewTop);
+    if (px <= 0 || height <= 0) continue;
+    visibility.set(p.n, px / height);
+    if (px > bestPx) {
+      bestPx = px;
+      page = p.n;
+      score = px / Math.min(height, viewHeight);
+    }
+  }
+  return { page, score, visibility };
+}
+function useScrollAnchor(containerRef, key) {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || typeof ResizeObserver === "undefined") return;
+    container.style.overflowAnchor = "none";
+    const heights = /* @__PURE__ */ new Map();
+    const observer = new ResizeObserver((entries) => {
+      let shift = 0;
+      const containerTop = container.getBoundingClientRect().top;
+      for (const entry of entries) {
+        const el = entry.target;
+        const height = el.getBoundingClientRect().height;
+        const previous = heights.get(el);
+        heights.set(el, height);
+        if (previous === void 0) continue;
+        shift += anchorDelta(previous, height, el.getBoundingClientRect().top, containerTop);
+      }
+      if (shift !== 0 && !container.dataset.zooming) container.scrollTop += shift;
+    });
+    container.querySelectorAll(PAGE_SELECTOR).forEach((el) => {
+      heights.set(el, el.getBoundingClientRect().height);
+      observer.observe(el);
+    });
+    return () => observer.disconnect();
+  }, [containerRef, key]);
+}
+
+// src/viewers/usePageIntersectionObserver.ts
 var PAGE_UPDATE_DEBOUNCE_MS = 10;
 var MIN_VISIBILITY_THRESHOLD = 0.15;
 var INTERSECTION_THRESHOLDS = [0, 0.25, 0.5, 0.75, 1];
@@ -16,66 +69,194 @@ function usePageIntersectionObserver({
   getPageElements,
   getPageNumber,
   onPageChange,
-  onVisibilityUpdate
+  onVisibilityUpdate,
+  observeKey
 }) {
+  const latest = useRef({ getPageElements, getPageNumber, onPageChange, onVisibilityUpdate });
+  latest.current = { getPageElements, getPageNumber, onPageChange, onVisibilityUpdate };
   useEffect(() => {
     if (!isEnabled || !containerRef.current) return;
     const container = containerRef.current;
-    const visibilityMap = /* @__PURE__ */ new Map();
     let lastReportedPage = null;
     let updateTimeout = null;
-    const updatePageNumber = () => {
-      let mostVisiblePage = 1;
-      let maxVisibility = 0;
-      visibilityMap.forEach((ratio, pageNum) => {
-        if (ratio > maxVisibility) {
-          maxVisibility = ratio;
-          mostVisiblePage = pageNum;
-        }
-      });
-      if (scrollCompleteRef.current && mostVisiblePage !== lastReportedPage && maxVisibility > MIN_VISIBILITY_THRESHOLD) {
-        lastReportedPage = mostVisiblePage;
-        onPageChange(mostVisiblePage);
+    let frame = 0;
+    const evaluate = () => {
+      const root = container.getBoundingClientRect();
+      const pages = [];
+      for (const el of latest.current.getPageElements()) {
+        const n = latest.current.getPageNumber(el);
+        if (n <= 0) continue;
+        const r = el.getBoundingClientRect();
+        pages.push({ n, top: r.top, bottom: r.bottom });
       }
-      if (onVisibilityUpdate) {
-        onVisibilityUpdate(new Map(visibilityMap));
+      const { page, score, visibility } = measureVisiblePages(pages, root.top, root.bottom);
+      if (scrollCompleteRef.current && page !== null && page !== lastReportedPage && score > MIN_VISIBILITY_THRESHOLD) {
+        lastReportedPage = page;
+        latest.current.onPageChange(page);
       }
+      latest.current.onVisibilityUpdate?.(visibility);
     };
     const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          const pageNum = getPageNumber(entry.target);
-          if (pageNum > 0) {
-            visibilityMap.set(pageNum, entry.intersectionRatio);
-          }
-        });
-        if (updateTimeout) {
-          clearTimeout(updateTimeout);
-        }
-        updateTimeout = setTimeout(updatePageNumber, PAGE_UPDATE_DEBOUNCE_MS);
+      () => {
+        if (updateTimeout) clearTimeout(updateTimeout);
+        updateTimeout = setTimeout(evaluate, PAGE_UPDATE_DEBOUNCE_MS);
       },
-      {
-        root: container,
-        threshold: INTERSECTION_THRESHOLDS
-      }
+      { root: container, threshold: INTERSECTION_THRESHOLDS }
     );
-    const elements = getPageElements();
-    elements.forEach((element) => observer.observe(element));
+    const onScroll = () => {
+      if (!frame) {
+        frame = requestAnimationFrame(() => {
+          frame = 0;
+          evaluate();
+        });
+      }
+    };
+    container.addEventListener("scroll", onScroll, { passive: true });
+    latest.current.getPageElements().forEach((element) => observer.observe(element));
     return () => {
       observer.disconnect();
-      if (updateTimeout) {
-        clearTimeout(updateTimeout);
+      container.removeEventListener("scroll", onScroll);
+      if (updateTimeout) clearTimeout(updateTimeout);
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [containerRef, scrollCompleteRef, isEnabled, observeKey]);
+}
+var MIN_ZOOM = 0.5;
+var MAX_ZOOM = 4;
+var ZOOM_STEP = 1.25;
+var DOUBLE_TAP_ZOOM = 2;
+var MAX_CANVAS_PIXELS = 8e6;
+var MAX_RENDER_DPR = 2;
+function clampZoom(zoom) {
+  if (!Number.isFinite(zoom)) return 1;
+  return Math.round(Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom)) * 100) / 100;
+}
+function stepZoom(zoom, direction) {
+  return clampZoom(direction === 1 ? zoom * ZOOM_STEP : zoom / ZOOM_STEP);
+}
+function doubleTapZoom(zoom) {
+  return zoom > 1.05 ? 1 : DOUBLE_TAP_ZOOM;
+}
+function zoomLabel(zoom) {
+  return `${Math.round(zoom * 100)}%`;
+}
+function pinchZoom(startZoom, startDistance, distance2) {
+  if (startDistance <= 0) return startZoom;
+  return clampZoom(startZoom * distance2 / startDistance);
+}
+function anchoredScroll(scroll, focal, oldZoom, newZoom) {
+  if (oldZoom <= 0) return scroll;
+  return (scroll + focal) * newZoom / oldZoom - focal;
+}
+function renderDpr(cssWidth, cssHeight, devicePixelRatio, maxPixels = MAX_CANVAS_PIXELS) {
+  const wanted = Math.min(Math.max(devicePixelRatio || 1, 1), MAX_RENDER_DPR);
+  const area = cssWidth * cssHeight;
+  if (area <= 0) return wanted;
+  const fits = Math.sqrt(maxPixels / area);
+  return Math.max(1, Math.min(wanted, fits));
+}
+var distance = (a, b) => Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+var INTERACTIVE = 'button, a, input, textarea, select, [role="button"]';
+var DOUBLE_TAP_MS = 300;
+var DOUBLE_TAP_SLOP_PX = 30;
+function usePinchZoom({ containerRef, zoom, onZoomChange }) {
+  const zoomRef = useRef(zoom);
+  const onChangeRef = useRef(onZoomChange);
+  onChangeRef.current = onZoomChange;
+  const focalRef = useRef(null);
+  const appliedZoomRef = useRef(zoom);
+  const request = useCallback((next, focal) => {
+    const clamped = clampZoom(next);
+    if (clamped === zoomRef.current) return;
+    focalRef.current = focal;
+    zoomRef.current = clamped;
+    onChangeRef.current?.(clamped);
+  }, []);
+  useLayoutEffect(() => {
+    zoomRef.current = zoom;
+    const container = containerRef.current;
+    const previous = appliedZoomRef.current;
+    appliedZoomRef.current = zoom;
+    if (!container || previous === zoom) return;
+    const rect = container.getBoundingClientRect();
+    const focal = focalRef.current ?? { x: rect.width / 2, y: rect.height / 2 };
+    focalRef.current = null;
+    container.dataset.zooming = "true";
+    container.scrollLeft = anchoredScroll(container.scrollLeft, focal.x, previous, zoom);
+    container.scrollTop = anchoredScroll(container.scrollTop, focal.y, previous, zoom);
+    requestAnimationFrame(
+      () => requestAnimationFrame(() => {
+        delete container.dataset.zooming;
+      })
+    );
+  }, [zoom, containerRef]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    let pinch = null;
+    let lastTap = null;
+    let frame = 0;
+    let pending = null;
+    const focalOf = (a, b) => {
+      const rect = el.getBoundingClientRect();
+      return {
+        x: (a.clientX + b.clientX) / 2 - rect.left,
+        y: (a.clientY + b.clientY) / 2 - rect.top
+      };
+    };
+    const flush = () => {
+      frame = 0;
+      if (pending) request(pending.zoom, pending.focal);
+      pending = null;
+    };
+    const onStart = (e) => {
+      if (e.touches.length === 2) {
+        pinch = { startDistance: distance(e.touches[0], e.touches[1]), startZoom: zoomRef.current };
+        lastTap = null;
       }
     };
-  }, [
-    containerRef,
-    scrollCompleteRef,
-    isEnabled,
-    getPageElements,
-    getPageNumber,
-    onPageChange,
-    onVisibilityUpdate
-  ]);
+    const onMove = (e) => {
+      if (!pinch || e.touches.length !== 2) return;
+      e.preventDefault();
+      pending = {
+        zoom: pinchZoom(pinch.startZoom, pinch.startDistance, distance(e.touches[0], e.touches[1])),
+        focal: focalOf(e.touches[0], e.touches[1])
+      };
+      if (!frame) frame = requestAnimationFrame(flush);
+    };
+    const onEnd = (e) => {
+      if (pinch && e.touches.length < 2) {
+        pinch = null;
+        return;
+      }
+      if (e.touches.length !== 0 || e.changedTouches.length !== 1) return;
+      const t = e.changedTouches[0];
+      if (e.target?.closest?.(INTERACTIVE)) return;
+      const now = e.timeStamp;
+      if (lastTap && now - lastTap.time < DOUBLE_TAP_MS && Math.hypot(t.clientX - lastTap.x, t.clientY - lastTap.y) < DOUBLE_TAP_SLOP_PX) {
+        e.preventDefault();
+        const rect = el.getBoundingClientRect();
+        request(doubleTapZoom(zoomRef.current), {
+          x: t.clientX - rect.left,
+          y: t.clientY - rect.top
+        });
+        lastTap = null;
+      } else {
+        lastTap = { time: now, x: t.clientX, y: t.clientY };
+      }
+    };
+    el.addEventListener("touchstart", onStart, { passive: true });
+    el.addEventListener("touchmove", onMove, { passive: false });
+    el.addEventListener("touchend", onEnd, { passive: false });
+    el.addEventListener("touchcancel", onEnd, { passive: false });
+    return () => {
+      el.removeEventListener("touchstart", onStart);
+      el.removeEventListener("touchmove", onMove);
+      el.removeEventListener("touchend", onEnd);
+      el.removeEventListener("touchcancel", onEnd);
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [containerRef, request]);
 }
 
 // src/viewers/pdf-viewer-constants.ts
@@ -93,14 +274,28 @@ function ensurePdfWorker(workerSrc) {
     pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
   }
 }
-var CONTAINER_PADDING_PX = 32;
-var PAGE_ASPECT_RATIO = 1.414;
+var CONTAINER_PADDING_PX = 34;
+var DEFAULT_PAGE_ASPECT_RATIO = 1.414;
+var PAGE_BORDER_PX = 2;
+var RERENDER_DEBOUNCE_MS = 250;
+var ZOOMED_BUFFER_THRESHOLD = 1.5;
+function sameSet(a, b) {
+  if (a.size !== b.size) return false;
+  for (const v of a) if (!b.has(v)) return false;
+  return true;
+}
 var TEXT_LAYER_BUFFER = 1;
+var ratioOf = (page) => {
+  const { width, height } = page.getViewport({ scale: 1 });
+  return width > 0 && height > 0 ? height / width : DEFAULT_PAGE_ASPECT_RATIO;
+};
 function PdfViewer({
   file,
   currentPage,
   onLoadSuccess,
   scrollTrigger,
+  zoom = 1,
+  onZoomChange,
   onPageChange,
   disableFontFace = false,
   assets
@@ -112,6 +307,8 @@ function PdfViewer({
   ensurePdfWorker(workerSrc);
   const [numPages, setNumPages] = useState(0);
   const [containerWidth, setContainerWidth] = useState(0);
+  const [defaultRatio, setDefaultRatio] = useState(DEFAULT_PAGE_ASPECT_RATIO);
+  const [pageRatios, setPageRatios] = useState(/* @__PURE__ */ new Map());
   const [loadError, setLoadError] = useState(null);
   const [documentKey, setDocumentKey] = useState(() => `pdf-${Date.now()}`);
   const initialPage = currentPage || 1;
@@ -131,7 +328,10 @@ function PdfViewer({
   const containerRef = useRef(null);
   const pageRefs = useRef(/* @__PURE__ */ new Map());
   const onDocumentLoadSuccess = useCallback(
-    ({ numPages: n }) => {
+    (pdf) => {
+      const n = pdf.numPages;
+      void pdf.getPage?.(1).then((page) => setDefaultRatio(ratioOf(page))).catch(() => {
+      });
       setNumPages(n);
       setLoadError(null);
       const expand = () => {
@@ -210,45 +410,51 @@ function PdfViewer({
       });
     }
   }, [numPages]);
+  const currentPageRef = useRef(currentPage);
+  currentPageRef.current = currentPage;
   useEffect(() => {
-    if (!scrollTrigger || numPages === 0 || !currentPage) return;
+    const currentPage2 = currentPageRef.current;
+    if (!scrollTrigger || numPages === 0 || !currentPage2) return;
     scrollCompleteRef.current = false;
     setRenderedPages((prev) => {
       const newSet = new Set(prev);
-      for (let i = Math.max(1, currentPage - LAZY_LOAD_BUFFER_BEFORE); i <= Math.min(numPages, currentPage + LAZY_LOAD_BUFFER_AFTER); i++) {
+      for (let i = Math.max(1, currentPage2 - LAZY_LOAD_BUFFER_BEFORE); i <= Math.min(numPages, currentPage2 + LAZY_LOAD_BUFFER_AFTER); i++) {
         newSet.add(i);
       }
       return newSet;
     });
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        const pageElement = pageRefs.current.get(currentPage);
+        const pageElement = pageRefs.current.get(currentPage2);
         if (pageElement) {
           pageElement.scrollIntoView({ behavior: "instant", block: "start" });
         }
         scrollCompleteRef.current = true;
       });
     });
-  }, [scrollTrigger, currentPage, numPages]);
+  }, [scrollTrigger, numPages]);
   const handleVisibilityUpdate = useCallback(
     (visibilityMap) => {
       const visiblePageNums = Array.from(visibilityMap.entries()).filter(([, ratio]) => ratio > 0).map(([pageNum]) => pageNum);
       if (visiblePageNums.length > 0) {
         const minVisible = Math.min(...visiblePageNums);
         const maxVisible = Math.max(...visiblePageNums);
+        const zoomed = zoom > ZOOMED_BUFFER_THRESHOLD;
+        const before = zoomed ? 1 : LAZY_LOAD_BUFFER_BEFORE;
+        const after = zoomed ? 2 : LAZY_LOAD_BUFFER_AFTER;
         const pagesToRender = /* @__PURE__ */ new Set();
-        for (let i = Math.max(1, minVisible - LAZY_LOAD_BUFFER_BEFORE); i <= Math.min(numPages, maxVisible + LAZY_LOAD_BUFFER_AFTER); i++) {
+        for (let i = Math.max(1, minVisible - before); i <= Math.min(numPages, maxVisible + after); i++) {
           pagesToRender.add(i);
         }
-        setRenderedPages(pagesToRender);
+        setRenderedPages((prev) => sameSet(prev, pagesToRender) ? prev : pagesToRender);
         const nearViewport = /* @__PURE__ */ new Set();
         for (let i = Math.max(1, minVisible - TEXT_LAYER_BUFFER); i <= Math.min(numPages, maxVisible + TEXT_LAYER_BUFFER); i++) {
           nearViewport.add(i);
         }
-        setVisiblePages(nearViewport);
+        setVisiblePages((prev) => sameSet(prev, nearViewport) ? prev : nearViewport);
       }
     },
-    [numPages]
+    [numPages, zoom]
   );
   const documentOptions = useMemo(
     () => ({
@@ -271,19 +477,30 @@ function PdfViewer({
     getPageElements: () => Array.from(pageRefs.current.values()),
     getPageNumber: (element) => parseInt(element.getAttribute("data-page-number") ?? "0"),
     onPageChange: handlePageChange,
-    onVisibilityUpdate: handleVisibilityUpdate
+    onVisibilityUpdate: handleVisibilityUpdate,
+    observeKey: `${numPages}:${containerWidth > 0}`
   });
+  useScrollAnchor(containerRef, `${numPages}:${containerWidth > 0}`);
+  usePinchZoom({ containerRef, zoom, onZoomChange });
+  const [renderZoom, setRenderZoom] = useState(zoom);
+  useEffect(() => {
+    if (zoom === renderZoom) return;
+    const timer = setTimeout(() => setRenderZoom(zoom), RERENDER_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [zoom, renderZoom]);
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref: containerRef,
-      className: "w-full h-full overflow-y-auto overflow-x-hidden bg-muted flex flex-col items-center p-4",
+      className: "w-full h-full overflow-auto bg-muted flex flex-col items-start p-4 pb-20",
+      style: { touchAction: "pan-x pan-y" },
       role: "region",
       "aria-label": "PDF document viewer",
       "data-testid": "pdf-viewer",
       children: /* @__PURE__ */ jsx(
         Document,
         {
+          className: "flex w-max min-w-full flex-col",
           file,
           onLoadSuccess: onDocumentLoadSuccess,
           onLoadError: onDocumentLoadError,
@@ -300,7 +517,11 @@ function PdfViewer({
           children: containerWidth > 0 && Array.from(new Array(numPages), (_, index) => {
             const pageNumber = index + 1;
             const shouldRender = renderedPages.has(pageNumber);
-            const pageHeight = containerWidth * PAGE_ASPECT_RATIO;
+            const ratio = pageRatios.get(pageNumber) ?? defaultRatio;
+            const pageWidth = containerWidth * zoom;
+            const pageHeight = pageWidth * ratio;
+            const renderWidth = containerWidth * renderZoom;
+            const scale = zoom / renderZoom;
             const shouldRenderTextLayer = visiblePages.has(pageNumber);
             return /* @__PURE__ */ jsx(
               "div",
@@ -313,28 +534,45 @@ function PdfViewer({
                   }
                 },
                 "data-page-number": pageNumber,
-                className: "mb-6 shadow-xl bg-white border border-border",
-                style: !shouldRender ? { minHeight: pageHeight } : void 0,
+                className: "mx-auto mb-6 shrink-0 shadow-xl bg-white border border-border",
+                style: { width: pageWidth + PAGE_BORDER_PX, height: pageHeight + PAGE_BORDER_PX },
                 role: "article",
                 "aria-label": `Page ${pageNumber} of ${numPages}`,
                 children: shouldRender ? /* @__PURE__ */ jsx(
-                  Page,
+                  "div",
                   {
-                    pageNumber,
-                    width: containerWidth,
-                    renderTextLayer: shouldRenderTextLayer,
-                    renderAnnotationLayer: false,
-                    devicePixelRatio: Math.min(window.devicePixelRatio || 1, 2),
-                    loading: /* @__PURE__ */ jsx(
-                      "div",
+                    "data-testid": `pdf-page-scaler-${pageNumber}`,
+                    style: scale === 1 ? void 0 : { transform: `scale(${scale})`, transformOrigin: "0 0" },
+                    children: /* @__PURE__ */ jsx(
+                      Page,
                       {
-                        className: "flex items-center justify-center bg-muted",
-                        style: { width: containerWidth, height: pageHeight },
-                        children: /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
-                          "Loading page ",
-                          pageNumber,
-                          "..."
-                        ] })
+                        pageNumber,
+                        width: renderWidth,
+                        renderTextLayer: shouldRenderTextLayer,
+                        renderAnnotationLayer: false,
+                        onLoadSuccess: (page) => {
+                          const ratio2 = page.originalHeight / page.originalWidth;
+                          setPageRatios(
+                            (prev) => Math.abs((prev.get(pageNumber) ?? defaultRatio) - ratio2) < 1e-3 ? prev : new Map(prev).set(pageNumber, ratio2)
+                          );
+                        },
+                        devicePixelRatio: renderDpr(
+                          renderWidth,
+                          renderWidth * ratio,
+                          window.devicePixelRatio || 1
+                        ),
+                        loading: /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "flex items-center justify-center bg-muted",
+                            style: { width: renderWidth, height: renderWidth * ratio },
+                            children: /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
+                              "Loading page ",
+                              pageNumber,
+                              "..."
+                            ] })
+                          }
+                        )
                       }
                     )
                   }
@@ -342,7 +580,7 @@ function PdfViewer({
                   "div",
                   {
                     className: "flex items-center justify-center bg-muted",
-                    style: { width: containerWidth, height: pageHeight },
+                    style: { width: pageWidth, height: pageHeight },
                     children: /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
                       "Page ",
                       pageNumber
@@ -647,6 +885,6 @@ function DocumentViewer({
   return className ? /* @__PURE__ */ jsx("div", { className, "data-testid": "document-viewer", children: body }) : body;
 }
 
-export { DocumentViewer, DocxViewer, INITIAL_LAZY_LOAD_BUFFER, LAZY_LOAD_BUFFER_AFTER, LAZY_LOAD_BUFFER_BEFORE, PdfViewer, XlsxViewer, nativeViewerKind, usePageIntersectionObserver };
+export { DocumentViewer, DocxViewer, INITIAL_LAZY_LOAD_BUFFER, LAZY_LOAD_BUFFER_AFTER, LAZY_LOAD_BUFFER_BEFORE, MAX_ZOOM, MIN_ZOOM, PAGE_SELECTOR, PdfViewer, XlsxViewer, anchorDelta, anchoredScroll, clampZoom, doubleTapZoom, nativeViewerKind, pinchZoom, renderDpr, stepZoom, usePageIntersectionObserver, usePinchZoom, useScrollAnchor, zoomLabel };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map