@nypl/web-reader 5.0.0-alpha.0 → 5.0.1

package/README.md

@@ -123,6 +123,18 @@ There are two different injectables props you can pass to the web reader.
 
 Your app can provide both props or only one. The reader will decide which one to load into the iframe based on the book format defined in the webpub manifest.
 
+## Required CSS for the PDF Reader (Text & Annotation Layers)
+
+When rendering PDFs the library relies on `react-pdf`'s text and annotation layer styles.
+
+To avoid importing global CSS from inside distributed JS in Next.js applications, you must import global CSS only from the app root (`pages/_app.js` / `pages/_app.tsx` or `app/layout.tsx`). After installing `@nypl/web-reader`, import the following CSS from your application root:
+
+```js
+// pages/_app.tsx or app/layout.tsx
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+import 'react-pdf/dist/esm/Page/TextLayer.css';
+```
+
 ## Other Injectables
 
 You can import and inject other files into the `<WebReader />` to customize behavior. For example, in Open eBooks, we import some [custom JavaScript](https://github.com/NYPL/ereading-clients/blob/staging/apps/oew/src/components/theme-ui/WebReader.tsx#L65) to disable right clicking & copying copywritten content.

package/dist/index.d.mts

@@ -35,9 +35,9 @@ interface Locations {
 
 declare const ReadiumWebpubContext = "http://readium.org/webpub/default.jsonld";
 declare const IS_DEV: boolean;
-declare const HEADER_HEIGHT = 48;
-declare const CHROME_HEIGHT = 48;
-declare const DEFAULT_HEIGHT = "calc(100vh - 48px)";
+declare const HEADER_HEIGHT = 49;
+declare const CHROME_HEIGHT = 49;
+declare const DEFAULT_HEIGHT = "calc(100vh - 49px)";
 declare const DEFAULT_SHOULD_GROW_WHEN_SCROLLING = true;
 declare const READER_MARGIN = 16;
 declare const DEFAULT_SETTINGS: ReaderSettings;
@@ -70,6 +70,7 @@ declare const FONT_DETAILS: {
         fontWeight: string;
     };
 };
+declare const IN_VIEW_DELAY_MS = 150;
 declare const LOCAL_STORAGE_SETTINGS_KEY = "web-reader-settings";
 declare const LOCAL_STORAGE_LOCATIONS_KEY = "web-reader-locations";
 declare const MAIN_CONTENT_ID = "mainContent";
@@ -546,4 +547,4 @@ type WebReaderProps = UseWebReaderArguments<string | Uint8Array>;
 declare const WebReaderWithoutBoundary: FC<WebReaderProps>;
 declare const WebReader: FC<WebReaderProps>;
 
-export { CHROME_HEIGHT, DEFAULT_FIT_MODE, DEFAULT_FONT_HEIGHT, DEFAULT_FONT_WIDTH, DEFAULT_HEIGHT, DEFAULT_SETTINGS, DEFAULT_SHOULD_GROW_WHEN_SCROLLING, FONT_DETAILS, HEADER_HEIGHT, IS_DEV, LOCAL_STORAGE_LOCATIONS_KEY, LOCAL_STORAGE_SETTINGS_KEY, MAIN_CONTENT_ID, READER_MARGIN, type ReadiumLink, ReadiumWebpubContext, type WebReaderProps, WebReaderWithoutBoundary, type WebpubManifest, addTocToManifest, clearWebReaderLocalStorage, WebReader as default, getTheme, useColorModeValue, useHtmlReader, usePdfReader, useWebReader };
+export { CHROME_HEIGHT, DEFAULT_FIT_MODE, DEFAULT_FONT_HEIGHT, DEFAULT_FONT_WIDTH, DEFAULT_HEIGHT, DEFAULT_SETTINGS, DEFAULT_SHOULD_GROW_WHEN_SCROLLING, FONT_DETAILS, HEADER_HEIGHT, IN_VIEW_DELAY_MS, IS_DEV, LOCAL_STORAGE_LOCATIONS_KEY, LOCAL_STORAGE_SETTINGS_KEY, MAIN_CONTENT_ID, READER_MARGIN, type ReadiumLink, ReadiumWebpubContext, type WebReaderProps, WebReaderWithoutBoundary, type WebpubManifest, addTocToManifest, clearWebReaderLocalStorage, WebReader as default, getTheme, useColorModeValue, useHtmlReader, usePdfReader, useWebReader };

package/dist/index.d.ts

@@ -35,9 +35,9 @@ interface Locations {
 
 declare const ReadiumWebpubContext = "http://readium.org/webpub/default.jsonld";
 declare const IS_DEV: boolean;
-declare const HEADER_HEIGHT = 48;
-declare const CHROME_HEIGHT = 48;
-declare const DEFAULT_HEIGHT = "calc(100vh - 48px)";
+declare const HEADER_HEIGHT = 49;
+declare const CHROME_HEIGHT = 49;
+declare const DEFAULT_HEIGHT = "calc(100vh - 49px)";
 declare const DEFAULT_SHOULD_GROW_WHEN_SCROLLING = true;
 declare const READER_MARGIN = 16;
 declare const DEFAULT_SETTINGS: ReaderSettings;
@@ -70,6 +70,7 @@ declare const FONT_DETAILS: {
         fontWeight: string;
     };
 };
+declare const IN_VIEW_DELAY_MS = 150;
 declare const LOCAL_STORAGE_SETTINGS_KEY = "web-reader-settings";
 declare const LOCAL_STORAGE_LOCATIONS_KEY = "web-reader-locations";
 declare const MAIN_CONTENT_ID = "mainContent";
@@ -546,4 +547,4 @@ type WebReaderProps = UseWebReaderArguments<string | Uint8Array>;
 declare const WebReaderWithoutBoundary: FC<WebReaderProps>;
 declare const WebReader: FC<WebReaderProps>;
 
-export { CHROME_HEIGHT, DEFAULT_FIT_MODE, DEFAULT_FONT_HEIGHT, DEFAULT_FONT_WIDTH, DEFAULT_HEIGHT, DEFAULT_SETTINGS, DEFAULT_SHOULD_GROW_WHEN_SCROLLING, FONT_DETAILS, HEADER_HEIGHT, IS_DEV, LOCAL_STORAGE_LOCATIONS_KEY, LOCAL_STORAGE_SETTINGS_KEY, MAIN_CONTENT_ID, READER_MARGIN, type ReadiumLink, ReadiumWebpubContext, type WebReaderProps, WebReaderWithoutBoundary, type WebpubManifest, addTocToManifest, clearWebReaderLocalStorage, WebReader as default, getTheme, useColorModeValue, useHtmlReader, usePdfReader, useWebReader };
+export { CHROME_HEIGHT, DEFAULT_FIT_MODE, DEFAULT_FONT_HEIGHT, DEFAULT_FONT_WIDTH, DEFAULT_HEIGHT, DEFAULT_SETTINGS, DEFAULT_SHOULD_GROW_WHEN_SCROLLING, FONT_DETAILS, HEADER_HEIGHT, IN_VIEW_DELAY_MS, IS_DEV, LOCAL_STORAGE_LOCATIONS_KEY, LOCAL_STORAGE_SETTINGS_KEY, MAIN_CONTENT_ID, READER_MARGIN, type ReadiumLink, ReadiumWebpubContext, type WebReaderProps, WebReaderWithoutBoundary, type WebpubManifest, addTocToManifest, clearWebReaderLocalStorage, WebReader as default, getTheme, useColorModeValue, useHtmlReader, usePdfReader, useWebReader };

package/dist/index.js

@@ -814,6 +814,7 @@ __export(src_exports, {
   DEFAULT_SHOULD_GROW_WHEN_SCROLLING: () => DEFAULT_SHOULD_GROW_WHEN_SCROLLING,
   FONT_DETAILS: () => FONT_DETAILS,
   HEADER_HEIGHT: () => HEADER_HEIGHT,
+  IN_VIEW_DELAY_MS: () => IN_VIEW_DELAY_MS,
   IS_DEV: () => IS_DEV,
   LOCAL_STORAGE_LOCATIONS_KEY: () => LOCAL_STORAGE_LOCATIONS_KEY,
   LOCAL_STORAGE_SETTINGS_KEY: () => LOCAL_STORAGE_SETTINGS_KEY,
@@ -1389,7 +1390,7 @@ var React29 = __toESM(require("react"));
 // src/constants.ts
 var ReadiumWebpubContext = "http://readium.org/webpub/default.jsonld";
 var IS_DEV = process.env.NODE_ENV === "development";
-var HEADER_HEIGHT = 48;
+var HEADER_HEIGHT = 49;
 var CHROME_HEIGHT = HEADER_HEIGHT;
 var DEFAULT_HEIGHT = `calc(100vh - ${CHROME_HEIGHT}px)`;
 var DEFAULT_SHOULD_GROW_WHEN_SCROLLING = true;
@@ -1429,6 +1430,7 @@ var FONT_DETAILS = {
     fontWeight: "regular"
   }
 };
+var IN_VIEW_DELAY_MS = 150;
 var LOCAL_STORAGE_SETTINGS_KEY = "web-reader-settings";
 var LOCAL_STORAGE_LOCATIONS_KEY = "web-reader-locations";
 var MAIN_CONTENT_ID = "mainContent";
@@ -3515,10 +3517,7 @@ function createMultiStyleConfigHelpers(parts) {
 }
 
 // src/ui/theme/components/tabs.ts
-var {
-  defineMultiStyleConfig,
-  definePartsStyle
-} = createMultiStyleConfigHelpers(["root", "tab", "tablist"]);
+var { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(["root", "tab", "tablist"]);
 var getTabsStyle = (getColor2) => defineMultiStyleConfig({
   variants: {
     custom: definePartsStyle({
@@ -6129,14 +6128,7 @@ function Header(props) {
   var _a, _b, _c, _d;
   const [, toggleFullscreenHook] = useFullscreen();
   const [isFullscreen, setIsFullScreen] = (0, import_react84.useState)(false);
-  const {
-    navigator,
-    manifest,
-    type,
-    containerRef,
-    currentPage,
-    totalPages
-  } = props;
+  const { navigator, manifest, type, containerRef, currentPage, totalPages } = props;
   const isAtStart = (_a = props.state) == null ? void 0 : _a.atStart;
   const isAtEnd = (_b = props.state) == null ? void 0 : _b.atEnd;
   const iconFill = useColorModeValue_default(
@@ -6756,12 +6748,8 @@ function setReflowableCss(iframeHtml, settings) {
 }
 function setFixedCss(iframeDocument, iframeContainer) {
   if (!iframeContainer) return;
-  let { contentWidth, contentHeight } = extractContentViewportSize(
-    iframeDocument
-  );
-  const { containerWidth, containerHeight } = extractContentContainerSize(
-    iframeContainer
-  );
+  let { contentWidth, contentHeight } = extractContentViewportSize(iframeDocument);
+  const { containerWidth, containerHeight } = extractContentContainerSize(iframeContainer);
   contentWidth = contentWidth != null ? contentWidth : containerWidth;
   contentHeight = contentHeight != null ? contentHeight : containerHeight;
   const scale = Math.min(
@@ -7328,9 +7316,7 @@ function useResource(manifest, state2, getContent, injectables, dispatch) {
             if (element) document2 == null ? void 0 : document2.head.appendChild(element);
           }
           injectJS(document2.body);
-          const iframeContainer = window.document.querySelector(
-            'main [role="progressbar"]'
-          );
+          const iframeContainer = window.document.querySelector('main [role="progressbar"]');
           const readerSettings = {
             colorMode: state2.settings.colorMode,
             fontSize: state2.settings.fontSize,
@@ -7695,129 +7681,6 @@ var ChakraPage = (0, import_react96.chakra)(
 );
 var ChakraPage_default = ChakraPage;
 
-// src/PdfReader/ScrollPage.tsx
-var import_react98 = __toESM(require("react"));
-var import_react_intersection_observer = require("react-intersection-observer");
-var Placeholder = ({ width, height, pageNumber }) => {
-  return /* @__PURE__ */ import_react98.default.createElement(
-    "div",
-    {
-      "data-page-number": pageNumber,
-      style: { width, height }
-    }
-  );
-};
-var ScrollPage = ({
-  scale,
-  pageNumber,
-  width,
-  height,
-  onLoadSuccess,
-  placeholderHeight,
-  placeholderWidth,
-  allowInView,
-  onInView,
-  fitMode,
-  rotate
-}) => {
-  const { ref: loadRef, inView: loadInView } = (0, import_react_intersection_observer.useInView)({
-    threshold: 0,
-    triggerOnce: true
-  });
-  const { ref: visibilityRef, entry } = (0, import_react_intersection_observer.useInView)({
-    threshold: Array.from({ length: 11 }, (_, i) => i * 0.1),
-    triggerOnce: false
-  });
-  const setRefs = import_react98.default.useCallback(
-    (el) => {
-      if (typeof loadRef === "function") loadRef(el);
-      if (typeof visibilityRef === "function") visibilityRef(el);
-    },
-    [loadRef, visibilityRef]
-  );
-  const handleLoadSuccess = import_react98.default.useCallback(
-    (page) => {
-      onLoadSuccess(page);
-    },
-    [onLoadSuccess]
-  );
-  import_react98.default.useEffect(() => {
-    if (onInView && entry) {
-      onInView(pageNumber, entry.intersectionRatio || 0);
-    }
-  }, [entry, onInView, pageNumber]);
-  return /* @__PURE__ */ import_react98.default.createElement("div", { ref: setRefs }, loadInView ? /* @__PURE__ */ import_react98.default.createElement(
-    ChakraPage_default,
-    {
-      "data-page-number": pageNumber,
-      pageNumber,
-      scale,
-      width,
-      height,
-      onLoadSuccess: handleLoadSuccess,
-      fitMode,
-      rotate
-    }
-  ) : /* @__PURE__ */ import_react98.default.createElement(
-    Placeholder,
-    {
-      width: placeholderWidth,
-      height: placeholderHeight,
-      pageNumber
-    }
-  ));
-};
-var ScrollPage_default = ScrollPage;
-
-// src/PdfReader/useMeasure.tsx
-var React49 = __toESM(require("react"));
-var DEFAULT_DIMENSION = {
-  x: 0,
-  y: 0,
-  width: 0,
-  height: 0,
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0
-};
-function useMeasure() {
-  const [element, ref] = React49.useState(null);
-  const [rect, setRect] = React49.useState(DEFAULT_DIMENSION);
-  const observer = React49.useMemo(
-    () => new window.ResizeObserver(
-      (entries) => {
-        if (entries[0]) {
-          const {
-            x,
-            y,
-            width,
-            height,
-            top,
-            left,
-            bottom,
-            right
-          } = entries[0].contentRect;
-          setRect({ x, y, width, height, top, left, bottom, right });
-        }
-      }
-    ),
-    []
-  );
-  React49.useLayoutEffect(() => {
-    if (!element) return;
-    observer.observe(element);
-    return () => {
-      observer.disconnect();
-    };
-  }, [element, observer]);
-  return [ref, rect];
-}
-
-// src/PdfReader/index.tsx
-var import_AnnotationLayer = require("react-pdf/dist/Page/AnnotationLayer.css");
-var import_TextLayer = require("react-pdf/dist/Page/TextLayer.css");
-
 // src/PdfReader/lib.ts
 var SCALE_STEP = 0.1;
 var START_QUERY = "start";
@@ -8049,6 +7912,118 @@ function isStartOfResource(pageNumber, resourceHref) {
   return pageNumber === (startPage != null ? startPage : 1);
 }
 
+// src/PdfReader/ScrollPage.tsx
+var import_react98 = __toESM(require("react"));
+var import_react_intersection_observer = require("react-intersection-observer");
+var Placeholder = ({ width, height, pageNumber }) => {
+  return /* @__PURE__ */ import_react98.default.createElement(
+    "div",
+    {
+      "data-page-number": pageNumber,
+      style: { width, height }
+    }
+  );
+};
+var ScrollPage = ({
+  scale,
+  pageNumber,
+  width,
+  height,
+  onLoadSuccess,
+  onPageRef,
+  placeholderHeight,
+  placeholderWidth,
+  allowInView,
+  onInView,
+  fitMode,
+  rotate
+}) => {
+  const { ref: loadRef, inView: loadInView } = (0, import_react_intersection_observer.useInView)({
+    threshold: 0,
+    triggerOnce: true
+  });
+  const { ref: visibilityRef, entry } = (0, import_react_intersection_observer.useInView)({
+    threshold: Array.from({ length: 11 }, (_, i) => i * 0.1),
+    triggerOnce: false
+  });
+  const setRefs = import_react98.default.useCallback(
+    (el) => {
+      if (typeof loadRef === "function") loadRef(el);
+      if (typeof visibilityRef === "function") visibilityRef(el);
+      if (onPageRef) onPageRef(pageNumber, el);
+    },
+    [loadRef, onPageRef, pageNumber, visibilityRef]
+  );
+  const handleLoadSuccess = import_react98.default.useCallback(
+    (page) => {
+      onLoadSuccess(page);
+    },
+    [onLoadSuccess]
+  );
+  import_react98.default.useEffect(() => {
+    if (allowInView && onInView && entry) {
+      onInView(pageNumber, entry.intersectionRatio || 0);
+    }
+  }, [allowInView, entry, onInView, pageNumber]);
+  return /* @__PURE__ */ import_react98.default.createElement("div", { ref: setRefs }, loadInView ? /* @__PURE__ */ import_react98.default.createElement(
+    ChakraPage_default,
+    {
+      "data-page-number": pageNumber,
+      pageNumber,
+      scale,
+      width,
+      height,
+      onLoadSuccess: handleLoadSuccess,
+      fitMode,
+      rotate
+    }
+  ) : /* @__PURE__ */ import_react98.default.createElement(
+    Placeholder,
+    {
+      width: placeholderWidth,
+      height: placeholderHeight,
+      pageNumber
+    }
+  ));
+};
+var ScrollPage_default = ScrollPage;
+
+// src/PdfReader/useMeasure.tsx
+var React49 = __toESM(require("react"));
+var DEFAULT_DIMENSION = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+};
+function useMeasure() {
+  const [element, ref] = React49.useState(null);
+  const [rect, setRect] = React49.useState(DEFAULT_DIMENSION);
+  const observer = React49.useMemo(
+    () => new window.ResizeObserver(
+      (entries) => {
+        if (entries[0]) {
+          const { x, y, width, height, top, left, bottom, right } = entries[0].contentRect;
+          setRect({ x, y, width, height, top, left, bottom, right });
+        }
+      }
+    ),
+    []
+  );
+  React49.useLayoutEffect(() => {
+    if (!element) return;
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [element, observer]);
+  return [ref, rect];
+}
+
 // src/PdfReader/index.tsx
 function usePdfReader(args) {
   var _a, _b, _c, _d, _e, _f;
@@ -8086,7 +8061,24 @@ function usePdfReader(args) {
   const isFetching = !state2.resource;
   const isParsed = typeof state2.numPages === "number";
   const [containerRef, containerSize] = useMeasure();
-  const [pageHeight, setPageHeight] = React50.useState(0);
+  const documentContainerRef = React50.useRef(null);
+  const pageRefs = React50.useRef(/* @__PURE__ */ new Map());
+  const setPageRef = React50.useCallback(
+    (pageNumber, element) => {
+      if (element) {
+        pageRefs.current.set(pageNumber, element);
+        return;
+      }
+      pageRefs.current.delete(pageNumber);
+    },
+    []
+  );
+  const scrollState = React50.useRef({
+    ratios: /* @__PURE__ */ new Map(),
+    lastVisiblePage: state2.pageNumber,
+    isInViewUpdate: false,
+    lastProgrammaticNavAt: 0
+  });
   React50.useEffect(() => {
     if (!webpubManifestUrl || !manifest) {
       return dispatch({ type: "ARGS_CHANGED", args: void 0 });
@@ -8159,13 +8151,6 @@ function usePdfReader(args) {
     var _a2;
     resizePage(containerSize, state2.fitMode, (_a2 = state2.rotation) != null ? _a2 : 0, state2.scale);
   }, [containerSize, resizePage, state2.fitMode, state2.rotation, state2.scale]);
-  React50.useEffect(() => {
-    if (pageHeight === 0 && state2.pdfWidth && state2.pdfHeight) {
-      const aspectRatio = state2.pdfHeight / state2.pdfWidth;
-      const initialPageHeight = (containerSize.width - READER_MARGIN) * aspectRatio;
-      setPageHeight(Math.round(initialPageHeight));
-    }
-  }, [state2.pdfWidth, state2.pdfHeight, containerSize.width, pageHeight]);
   React50.useEffect(() => {
     var _a2, _b2;
     const isFirstResource = state2.resourceIndex === 0;
@@ -8188,21 +8173,40 @@ function usePdfReader(args) {
   ]);
   React50.useEffect(() => {
     var _a2;
-    if (!((_a2 = state2.settings) == null ? void 0 : _a2.isScrolling)) return;
-    if (!state2.rendered) return;
-    process.nextTick(() => {
-      const page = document.querySelector(
-        `[data-page-number="${state2.pageNumber}"]`
-      );
-      page == null ? void 0 : page.scrollIntoView();
-    });
+    if (!((_a2 = state2.settings) == null ? void 0 : _a2.isScrolling) || !state2.rendered) return;
+    if (scrollState.current.isInViewUpdate) {
+      scrollState.current.isInViewUpdate = false;
+      return;
+    }
+    const documentContainer = documentContainerRef.current;
+    const pageRef = pageRefs.current.get(state2.pageNumber);
+    if (documentContainer && pageRef) {
+      const containerRect = documentContainer.getBoundingClientRect();
+      const pageRect = pageRef.getBoundingClientRect();
+      documentContainer.scrollTo({
+        top: documentContainer.scrollTop + (pageRect.top - containerRect.top)
+      });
+    }
   }, [state2.pageNumber, (_c = state2.settings) == null ? void 0 : _c.isScrolling, state2.rendered]);
+  const beginProgrammaticNavigation = React50.useCallback(
+    (pendingPage) => {
+      const currentScrollState = scrollState.current;
+      currentScrollState.lastVisiblePage = pendingPage;
+      currentScrollState.lastProgrammaticNavAt = Date.now();
+      currentScrollState.ratios.clear();
+    },
+    []
+  );
   const goForward = React50.useCallback(() => __async(null, null, function* () {
+    beginProgrammaticNavigation(
+      state2.numPages ? Math.min(state2.pageNumber + 1, state2.numPages) : state2.pageNumber + 1
+    );
     dispatch({ type: "GO_FORWARD" });
-  }), []);
+  }), [beginProgrammaticNavigation, state2.numPages, state2.pageNumber]);
   const goBackward = React50.useCallback(() => __async(null, null, function* () {
+    beginProgrammaticNavigation(Math.max(1, state2.pageNumber - 1));
     dispatch({ type: "GO_BACKWARD" });
-  }), []);
+  }), [beginProgrammaticNavigation, state2.pageNumber]);
   const setScroll = React50.useCallback(
     (val) => __async(null, null, function* () {
       const isScrolling = val === "scrolling";
@@ -8228,35 +8232,40 @@ function usePdfReader(args) {
   const goToPage = React50.useCallback((href) => __async(null, null, function* () {
     dispatch({ type: "GO_TO_HREF", href });
   }), []);
-  const goToPageNumber = React50.useCallback((page) => {
-    dispatch({ type: "GO_TO_PAGE", page });
-  }, []);
+  const goToPageNumber = React50.useCallback(
+    (page) => {
+      beginProgrammaticNavigation(page);
+      dispatch({ type: "GO_TO_PAGE", page });
+    },
+    [beginProgrammaticNavigation]
+  );
   const setFitMode = React50.useCallback((mode) => {
     dispatch({ type: "SET_FIT_MODE", fitMode: mode });
   }, []);
-  const intersectionRatios = React50.useRef({});
-  const lastMostVisiblePage = React50.useRef(state2.pageNumber);
   const onInView = React50.useCallback(
     (pageNum, ratio) => {
       var _a2;
-      if (!((_a2 = state2.settings) == null ? void 0 : _a2.isScrolling)) return;
-      intersectionRatios.current[pageNum] = ratio;
-      Object.keys(intersectionRatios.current).forEach((key) => {
-        if (intersectionRatios.current[Number(key)] === 0) {
-          delete intersectionRatios.current[Number(key)];
-        }
-      });
+      const currentScrollState = scrollState.current;
+      if (!((_a2 = state2.settings) == null ? void 0 : _a2.isScrolling) || Date.now() - currentScrollState.lastProgrammaticNavAt < IN_VIEW_DELAY_MS)
+        return;
+      if (ratio <= 0) {
+        currentScrollState.ratios.delete(pageNum);
+        return;
+      }
+      currentScrollState.ratios.set(pageNum, ratio);
+      let mostVisiblePage = currentScrollState.lastVisiblePage;
       let maxRatio = -1;
-      let mostVisiblePage = state2.pageNumber;
-      for (const [page, r] of Object.entries(intersectionRatios.current)) {
+      for (const [p, r] of currentScrollState.ratios) {
         if (r > maxRatio) {
           maxRatio = r;
-          mostVisiblePage = Number(page);
+          mostVisiblePage = p;
         }
+        if (r > 0.8) break;
       }
-      if (mostVisiblePage !== lastMostVisiblePage.current) {
-        lastMostVisiblePage.current = mostVisiblePage;
+      if (mostVisiblePage !== currentScrollState.lastVisiblePage) {
+        currentScrollState.lastVisiblePage = mostVisiblePage;
         if (state2.pageNumber !== mostVisiblePage) {
+          currentScrollState.isInViewUpdate = true;
           dispatch({ type: "PAGE_IN_VIEW", page: mostVisiblePage });
         }
       }
@@ -8321,7 +8330,7 @@ function usePdfReader(args) {
         tabIndex: -1,
         id: MAIN_CONTENT_ID,
         ref: containerRef,
-        height: pageHeight,
+        height,
         sx: {
           ".react-pdf__Document": {
             width: "100%",
@@ -8340,7 +8349,8 @@ function usePdfReader(args) {
         {
           file: state2.resource,
           onLoadSuccess: onDocumentLoadSuccess,
-          onLoadError: onDocumentLoadError
+          onLoadError: onDocumentLoadError,
+          inputRef: documentContainerRef
         },
         isParsed && state2.numPages && /* @__PURE__ */ React50.createElement(React50.Fragment, null, state2.settings.isScrolling && Array.from(new Array(state2.numPages), (_, index) => {
           var _a2;
@@ -8355,10 +8365,11 @@ function usePdfReader(args) {
               scale: state2.scale,
               pageNumber: index + 1,
               onLoadSuccess: onRenderSuccess,
-              allowInView: !isFetching,
+              allowInView: state2.rendered,
               onInView,
               fitMode: state2.fitMode,
-              rotate: (_a2 = state2.rotation) != null ? _a2 : 0
+              rotate: (_a2 = state2.rotation) != null ? _a2 : 0,
+              onPageRef: setPageRef
             }
           );
         }), !state2.settings.isScrolling && /* @__PURE__ */ React50.createElement(
@@ -8580,6 +8591,7 @@ var src_default = WebReader;
   DEFAULT_SHOULD_GROW_WHEN_SCROLLING,
   FONT_DETAILS,
   HEADER_HEIGHT,
+  IN_VIEW_DELAY_MS,
   IS_DEV,
   LOCAL_STORAGE_LOCATIONS_KEY,
   LOCAL_STORAGE_SETTINGS_KEY,