@anaralabs/lector 3.8.0 → 3.10.0

package/README.md

@@ -102,6 +102,8 @@ We welcome contributions! Key areas we're focusing on:
 3. Mobile/touch interactions
 4. Documentation and examples
 
+
+
 ## Thanks
 
 Special thanks to these open-source projects that provided inspiration:

package/dist/_tsup-dts-rollup.d.ts

@@ -4,11 +4,12 @@ import type { DocumentInitParameters } from 'pdfjs-dist/types/src/display/api';
 import { ForwardRefExoticComponent } from 'react';
 import { FunctionComponent } from 'react';
 import { HTMLProps } from 'react';
-import type { IPDFLinkService } from 'pdfjs-dist/types/web/interfaces';
 import { JSX } from 'react/jsx-runtime';
-import type { JSX as JSX_2 } from 'react';
+import { JSX as JSX_2 } from 'react';
+import { MemoExoticComponent } from 'react';
 import type { PageViewport } from 'pdfjs-dist';
-import { PDFDocumentProxy } from 'pdfjs-dist';
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+import { pdfjsDist } from 'pdfjs-dist';
 import type { PDFPageProxy } from 'pdfjs-dist';
 import type { default as React_2 } from 'react';
 import { ReactElement } from 'react';
@@ -68,7 +69,7 @@ declare interface AnnotationHighlightLayerProps {
  * @param jumpOptions - Options for page navigation behavior when clicking internal links.
  *                      See `usePdfJump` hook for available options.
  */
-export declare const AnnotationLayer: ({ renderForms, externalLinksEnabled, jumpOptions, className, style, ...props }: AnnotationLayerParams & HTMLProps<HTMLDivElement>) => JSX.Element;
+export declare const AnnotationLayer: MemoExoticComponent<({ renderForms, externalLinksEnabled, jumpOptions, className, style, ...props }: AnnotationLayerParams & HTMLProps<HTMLDivElement>) => JSX.Element>;
 
 declare interface AnnotationLayerParams {
     /**
@@ -142,9 +143,9 @@ export declare const cancellable: <T extends Promise<unknown>>(promise: T) => {
     cancel: () => void;
 };
 
-export declare const CanvasLayer: ({ style, background, ...props }: HTMLProps<HTMLCanvasElement> & {
-    background?: string;
-}) => JSX.Element;
+export declare const CanvasLayer: MemoExoticComponent<({ style, background, ...props }: HTMLProps<HTMLCanvasElement> & {
+background?: string;
+}) => JSX.Element>;
 
 export declare const clamp: (value: number, minimum: number, maximum: number) => number;
 
@@ -175,9 +176,11 @@ export declare const CurrentPage: ({ ...props }: HTMLProps<HTMLInputElement>) =>
 
 export declare const CurrentZoom: ({ ...props }: HTMLProps<HTMLInputElement>) => JSX.Element;
 
-export declare const CustomLayer: ({ children, }: {
-    children: (pageNumber: number) => JSX_2.Element;
-}) => JSX_2.Element;
+export declare const CustomLayer: MemoExoticComponent<({ children }: {
+children: (pageNumber: number) => JSX_2.Element;
+}) => JSX_2.Element>;
+
+export declare const ensureAnnotationLayerStyles: () => void;
 
 export declare const firstMemo: <T>(first: boolean, memo: unknown, initializer: () => T) => T;
 
@@ -225,7 +228,7 @@ export declare interface InitialPDFState {
     zoomOptions?: ZoomOptions;
 }
 
-export declare class LinkService implements IPDFLinkService {
+export declare class LinkService {
     _pdfDocumentProxy?: PDFDocumentProxy;
     externalLinkEnabled: boolean;
     isInPresentationMode: boolean;
@@ -252,6 +255,8 @@ export declare class LinkService implements IPDFLinkService {
     unregisterPageNavigationCallback(): void;
 }
 
+export declare const loadPdfJs: () => Promise<pdfjsDist>;
+
 export declare const NextPage: () => void;
 
 export declare const Outline: ({ children, ...props }: HTMLProps<HTMLUListElement> & {
@@ -273,10 +278,10 @@ declare interface OutlineItemProps extends HTMLProps<HTMLDivElement> {
 
 declare type OutlineItemType = NonNullable<ReturnType<typeof usePDFOutline>>[number];
 
-export declare const Page: ({ children, pageNumber, style, ...props }: HTMLProps<HTMLDivElement> & {
-    children: ReactNode;
-    pageNumber?: number;
-}) => JSX.Element;
+export declare const Page: MemoExoticComponent<({ children, pageNumber, style, ...props }: HTMLProps<HTMLDivElement> & {
+children: ReactNode;
+pageNumber?: number;
+}) => JSX.Element>;
 
 export declare const Pages: ({ children, gap, virtualizerOptions, initialOffset, onOffsetChange, ...props }: HTMLProps<HTMLDivElement> & {
     virtualizerOptions?: {
@@ -371,12 +376,14 @@ declare interface SelectionTooltipProps {
 
 export declare type Source = string | URL | TypedArray | ArrayBuffer | DocumentInitParameters;
 
+export declare const subscribeToViewportInvalidation: (viewport: HTMLDivElement, callback: ViewportCallback) => () => void;
+
 declare type TextContent = {
     pageNumber: number;
     text: string;
 };
 
-export declare const TextLayer: ({ className, style, ...props }: HTMLProps<HTMLDivElement>) => JSX.Element;
+export declare const TextLayer: MemoExoticComponent<({ className, style, ...props }: HTMLProps<HTMLDivElement>) => JSX.Element>;
 
 declare interface TextPosition {
     pageNumber: number;
@@ -494,6 +501,8 @@ export declare const useSelectionDimensions: () => {
     } | undefined;
 };
 
+declare type ViewportCallback = () => void;
+
 export declare const ZoomIn: ({ ...props }: HTMLProps<HTMLButtonElement>) => JSX.Element;
 
 export declare interface ZoomOptions {

package/dist/index.js

@@ -1,18 +1,15 @@
 'use client';
 
-import React, { createContext, forwardRef, useRef, useState, useCallback, useContext, useEffect, cloneElement, createRef, useMemo, useLayoutEffect } from 'react';
+import React, { createContext, memo, forwardRef, cloneElement, useRef, useState, useCallback, useContext, useEffect, useMemo, useLayoutEffect, createRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useFloating, autoUpdate, offset, shift, useDismiss, useInteractions, inline, flip } from '@floating-ui/react';
 import { create, useStore, createStore } from 'zustand';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { AnnotationLayer, TextLayer, getDocument } from 'pdfjs-dist';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useDebounce } from 'use-debounce';
 import { v4 } from 'uuid';
 import { Slot } from '@radix-ui/react-slot';
 import { useVirtualizer, elementScroll, debounce } from '@tanstack/react-virtual';
 
-// src/components/annotation-tooltip.tsx
-
 // src/lib/clamp.ts
 var clamp = (value, minimum, maximum) => {
   return Math.min(Math.max(value, minimum), maximum);
@@ -615,6 +612,56 @@ function clsx() {
 }
 var clsx_default = clsx;
 
+// src/lib/annotation-layer-styles.ts
+var ANNOTATION_LAYER_STYLE_ID = "lector-annotation-layer-styles";
+var annotationLayerStyles = `
+  .annotationLayer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    opacity: 1;
+    z-index: 3;
+  }
+
+  .annotationLayer section {
+    position: absolute;
+  }
+
+  .annotationLayer .linkAnnotation > a,
+  .annotationLayer .buttonWidgetAnnotation.pushButton > a {
+    position: absolute;
+    font-size: 1em;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat;
+    cursor: pointer;
+  }
+
+  .annotationLayer .linkAnnotation > a:hover,
+  .annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {
+    opacity: 0.2;
+    background: rgba(255, 255, 0, 1);
+    box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
+  }
+`;
+var ensureAnnotationLayerStyles = () => {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (document.getElementById(ANNOTATION_LAYER_STYLE_ID)) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = ANNOTATION_LAYER_STYLE_ID;
+  style.textContent = annotationLayerStyles;
+  document.head.appendChild(style);
+};
+
 // src/lib/cancellable.ts
 var cancellable = (promise) => {
   let isCancelled = false;
@@ -639,6 +686,15 @@ var cancellable = (promise) => {
     }
   };
 };
+
+// src/lib/pdfjs.ts
+var pdfJsPromise = null;
+var loadPdfJs = () => {
+  if (!pdfJsPromise) {
+    pdfJsPromise = import('pdfjs-dist');
+  }
+  return pdfJsPromise;
+};
 var usePdfJump = () => {
   const virtualizer = usePdf((state) => state.virtualizer);
   const setHighlight = usePdf((state) => state.setHighlight);
@@ -931,46 +987,7 @@ var useAnnotationLayer = (params) => {
     };
   }, [jumpToPage, linkService, mergedParams.jumpOptions]);
   useEffect(() => {
-    const style = document.createElement("style");
-    style.textContent = `
-      .annotationLayer {
-        position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        overflow: hidden;
-        opacity: 1;
-        z-index: 3;
-      }
-      
-      .annotationLayer section {
-        position: absolute;
-      }
-      
-      .annotationLayer .linkAnnotation > a,
-      .annotationLayer .buttonWidgetAnnotation.pushButton > a {
-        position: absolute;
-        font-size: 1em;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat;
-        cursor: pointer;
-      }
-      
-      .annotationLayer .linkAnnotation > a:hover,
-      .annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {
-        opacity: 0.2;
-        background: rgba(255, 255, 0, 1);
-        box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
-      }
-    `;
-    document.head.appendChild(style);
-    return () => {
-      document.head.removeChild(style);
-    };
+    ensureAnnotationLayerStyles();
   }, []);
   useEffect(() => {
     if (!annotationLayerRef.current) return;
@@ -1011,22 +1028,27 @@ var useAnnotationLayer = (params) => {
     }
     annotationLayerRef.current.innerHTML = "";
     annotationLayerRef.current.className = "annotationLayer";
-    const viewport = pdfPageProxy.getViewport({ scale: 1 });
+    const viewport = pdfPageProxy.getViewport({ scale: 1 }).clone({
+      dontFlip: true
+    });
     const annotationLayerConfig = {
       div: annotationLayerRef.current,
       viewport,
       page: pdfPageProxy,
       linkService,
+      annotationStorage: void 0,
       accessibilityManager: void 0,
       annotationCanvasMap: void 0,
       annotationEditorUIManager: void 0,
-      structTreeLayer: void 0
+      structTreeLayer: void 0,
+      commentManager: void 0
     };
-    const annotationLayer = new AnnotationLayer(annotationLayerConfig);
-    annotationLayerObjectRef.current = annotationLayer;
     const { cancel } = cancellable(
       (async () => {
         try {
+          const { AnnotationLayer: AnnotationLayer2 } = await loadPdfJs();
+          const annotationLayer = new AnnotationLayer2(annotationLayerConfig);
+          annotationLayerObjectRef.current = annotationLayer;
           const annotations = await pdfPageProxy.getAnnotations();
           await annotationLayer.render({
             ...annotationLayerConfig,
@@ -1046,44 +1068,47 @@ var useAnnotationLayer = (params) => {
     annotationLayerRef
   };
 };
-var AnnotationLayer2 = ({
-  renderForms = true,
-  externalLinksEnabled = true,
-  jumpOptions = { behavior: "smooth", align: "start" },
-  className,
-  style,
-  ...props
-}) => {
-  const { annotationLayerRef } = useAnnotationLayer({
-    renderForms,
-    externalLinksEnabled,
-    jumpOptions
-  });
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx_default("annotationLayer", className),
-      style: {
-        ...style,
-        position: "absolute",
-        top: 0,
-        left: 0
-      },
-      ...props,
-      ref: annotationLayerRef
-    }
-  );
-};
+var AnnotationLayer = memo(
+  ({
+    renderForms = true,
+    externalLinksEnabled = true,
+    jumpOptions = { behavior: "smooth", align: "start" },
+    className,
+    style,
+    ...props
+  }) => {
+    const { annotationLayerRef } = useAnnotationLayer({
+      renderForms,
+      externalLinksEnabled,
+      jumpOptions
+    });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx_default("annotationLayer", className),
+        style: {
+          ...style,
+          position: "absolute",
+          top: 0,
+          left: 0
+        },
+        ...props,
+        ref: annotationLayerRef
+      }
+    );
+  }
+);
+AnnotationLayer.displayName = "AnnotationLayer";
 var useDpr = () => {
   const [dpr, setDPR] = useState(
-    !window ? 1 : Math.min(window.devicePixelRatio, 2)
+    typeof window === "undefined" ? 1 : Math.min(window.devicePixelRatio, 2)
   );
   useEffect(() => {
-    if (!window) {
+    if (typeof window === "undefined") {
       return;
     }
     const handleDPRChange = () => {
-      setDPR(window.devicePixelRatio);
+      setDPR(Math.min(window.devicePixelRatio, 2));
     };
     const windowMatch = window.matchMedia(
       `screen and (min-resolution: ${dpr}dppx)`
@@ -1146,6 +1171,7 @@ var useCanvasLayer = ({ background }) => {
     baseCanvas.style.transform = "translate(0px, 0px)";
     baseCanvas.style.zIndex = "0";
     baseCanvas.style.pointerEvents = "none";
+    baseCanvas.style.backgroundColor = background ?? "white";
     const context = baseCanvas.getContext("2d");
     if (!context) {
       return;
@@ -1154,6 +1180,7 @@ var useCanvasLayer = ({ background }) => {
     context.clearRect(0, 0, baseCanvas.width, baseCanvas.height);
     const viewport = pdfPageProxy.getViewport({ scale: baseScale });
     const renderingTask = pdfPageProxy.render({
+      canvas: baseCanvas,
       canvasContext: context,
       viewport,
       background
@@ -1172,8 +1199,74 @@ var useCanvasLayer = ({ background }) => {
     canvasRef
   };
 };
+
+// src/lib/viewport-invalidation.ts
+var viewportInvalidationRegistry = /* @__PURE__ */ new WeakMap();
+var notifyCallbacks = (entry) => {
+  entry.rafId = null;
+  entry.callbacks.forEach((callback) => {
+    callback();
+  });
+};
+var scheduleInvalidation = (entry) => {
+  if (entry.rafId !== null) {
+    return;
+  }
+  entry.rafId = requestAnimationFrame(() => {
+    notifyCallbacks(entry);
+  });
+};
+var subscribeToViewportInvalidation = (viewport, callback) => {
+  let entry = viewportInvalidationRegistry.get(viewport);
+  if (!entry) {
+    const callbacks = /* @__PURE__ */ new Set();
+    const schedule = () => {
+      const currentEntry = viewportInvalidationRegistry.get(viewport);
+      if (!currentEntry) {
+        return;
+      }
+      scheduleInvalidation(currentEntry);
+    };
+    entry = {
+      callbacks,
+      scrollListener: schedule,
+      windowResizeListener: schedule,
+      resizeObserver: typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(schedule),
+      rafId: null
+    };
+    viewport.addEventListener("scroll", entry.scrollListener, {
+      passive: true
+    });
+    window.addEventListener("resize", entry.windowResizeListener, {
+      passive: true
+    });
+    entry.resizeObserver?.observe(viewport);
+    viewportInvalidationRegistry.set(viewport, entry);
+  }
+  entry.callbacks.add(callback);
+  return () => {
+    const currentEntry = viewportInvalidationRegistry.get(viewport);
+    if (!currentEntry) {
+      return;
+    }
+    currentEntry.callbacks.delete(callback);
+    if (currentEntry.callbacks.size > 0) {
+      return;
+    }
+    if (currentEntry.rafId !== null) {
+      cancelAnimationFrame(currentEntry.rafId);
+    }
+    viewport.removeEventListener("scroll", currentEntry.scrollListener);
+    window.removeEventListener("resize", currentEntry.windowResizeListener);
+    currentEntry.resizeObserver?.disconnect();
+    viewportInvalidationRegistry.delete(viewport);
+  };
+};
+
+// src/hooks/layers/useDetailCanvasLayer.tsx
 var MAX_CANVAS_PIXELS2 = 16777216;
 var MAX_CANVAS_DIMENSION2 = 32767;
+var DETAIL_RENDER_IDLE_MS = 80;
 var useDetailCanvasLayer = ({
   background,
   baseCanvasRef
@@ -1183,29 +1276,23 @@ var useDetailCanvasLayer = ({
   const pageNumber = usePDFPageNumber();
   const dpr = useDpr();
   const bouncyZoom = usePdf((state) => state.zoom);
+  const isPinching = usePdf((state) => state.isPinching);
   const pdfPageProxy = usePdf((state) => state.getPdfPageProxy(pageNumber));
   const viewportRef = usePdf((state) => state.viewportRef);
   const [zoom] = useDebounce(bouncyZoom, 200);
-  const [scrollTick, setScrollTick] = useState(0);
-  const [debouncedScrollTick] = useDebounce(scrollTick, 20);
-  const ensureDetailCanvas = useCallback(() => {
-    let detailCanvas = detailCanvasRef.current;
+  const getDetailCanvas = useCallback(() => {
+    const detailCanvas = detailCanvasRef.current;
     if (!detailCanvas) {
-      const parent = baseCanvasRef.current?.parentElement;
-      if (!parent) {
-        return null;
-      }
-      detailCanvas = document.createElement("canvas");
-      parent.appendChild(detailCanvas);
-      detailCanvasRef.current = detailCanvas;
+      return null;
     }
     detailCanvas.style.position = "absolute";
     detailCanvas.style.top = "0";
     detailCanvas.style.left = "0";
     detailCanvas.style.pointerEvents = "none";
-    detailCanvas.style.zIndex = "0";
+    detailCanvas.style.zIndex = "1";
+    detailCanvas.style.backgroundColor = background ?? "white";
     return detailCanvas;
-  }, [baseCanvasRef]);
+  }, [background]);
   const clampScaleForPage = useCallback(
     (targetScale, pageWidth, pageHeight) => {
       if (!targetScale) {
@@ -1228,151 +1315,183 @@ var useDetailCanvasLayer = ({
   );
   useLayoutEffect(() => {
     const scrollContainer = viewportRef?.current;
-    if (!scrollContainer) return;
-    const handleScroll = () => {
-      setScrollTick((prev) => prev + 1);
-    };
-    scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
-    return () => {
-      scrollContainer.removeEventListener("scroll", handleScroll);
-    };
-  }, [viewportRef?.current]);
-  useLayoutEffect(() => {
-    if (!viewportRef?.current) {
+    if (!scrollContainer) {
       return;
     }
-    const detailCanvas = ensureDetailCanvas();
+    const detailCanvas = getDetailCanvas();
     const container = containerRef.current;
     if (!detailCanvas || !container) {
       return;
     }
-    const scrollContainer = viewportRef.current;
-    const pageContainer = baseCanvasRef.current?.parentElement ?? null;
-    if (!pageContainer) {
-      detailCanvas.style.display = "none";
-      detailCanvas.width = 0;
-      detailCanvas.height = 0;
-      return;
-    }
-    const baseViewport = pdfPageProxy.getViewport({ scale: 1 });
-    const pageWidth = baseViewport.width;
-    const pageHeight = baseViewport.height;
-    const scrollX = scrollContainer.scrollLeft / zoom;
-    const scrollY = scrollContainer.scrollTop / zoom;
-    const viewportWidth = scrollContainer.clientWidth / zoom;
-    const viewportHeight = scrollContainer.clientHeight / zoom;
-    const pageRect = pageContainer.getBoundingClientRect();
-    const containerRect = scrollContainer.getBoundingClientRect();
-    const pageLeft = (pageRect.left - containerRect.left) / zoom + scrollX;
-    const pageTop = (pageRect.top - containerRect.top) / zoom + scrollY;
-    const visibleLeft = Math.max(0, scrollX - pageLeft);
-    const visibleTop = Math.max(0, scrollY - pageTop);
-    const visibleRight = Math.min(
-      pageWidth,
-      scrollX + viewportWidth - pageLeft
-    );
-    const visibleBottom = Math.min(
-      pageHeight,
-      scrollY + viewportHeight - pageTop
-    );
-    const visibleWidth = Math.max(0, visibleRight - visibleLeft);
-    const visibleHeight = Math.max(0, visibleBottom - visibleTop);
-    const targetDetailScale = dpr * zoom * 1.3;
-    const baseTargetScale = dpr * Math.min(zoom, 1);
-    const baseScale = clampScaleForPage(baseTargetScale, pageWidth, pageHeight);
-    const needsDetail = zoom > 1 && targetDetailScale - baseScale > 1e-3;
-    if (!needsDetail || visibleWidth <= 0 || visibleHeight <= 0) {
-      detailCanvas.style.display = "none";
-      detailCanvas.width = 0;
-      detailCanvas.height = 0;
-      return;
-    }
-    detailCanvas.style.display = "block";
-    const pdfOffsetX = visibleLeft;
-    const pdfOffsetY = visibleTop;
-    const pdfWidth = visibleWidth * targetDetailScale;
-    const pdfHeight = visibleHeight * targetDetailScale;
-    const effectiveScale = targetDetailScale;
-    const actualWidth = pdfWidth;
-    const actualHeight = pdfHeight;
-    detailCanvas.width = actualWidth;
-    detailCanvas.height = actualHeight;
-    const scaledWidth = visibleWidth * zoom;
-    const scaledHeight = visibleHeight * zoom;
-    detailCanvas.style.width = `${scaledWidth}px`;
-    detailCanvas.style.height = `${scaledHeight}px`;
-    detailCanvas.style.transformOrigin = "center center";
-    detailCanvas.style.transform = `translate(${visibleLeft * zoom}px, ${visibleTop * zoom}px) `;
-    container.style.transform = `scale3d(${1 / zoom}, ${1 / zoom}, 1)`;
-    container.style.transformOrigin = `0 0`;
-    const context = detailCanvas.getContext("2d");
-    if (!context) {
-      return;
-    }
-    context.setTransform(1, 0, 0, 1, 0, 0);
-    context.clearRect(0, 0, detailCanvas.width, detailCanvas.height);
-    const transform = [
-      1,
-      0,
-      0,
-      1,
-      -pdfOffsetX * effectiveScale,
-      -pdfOffsetY * effectiveScale
-    ];
-    const detailViewport = pdfPageProxy.getViewport({ scale: effectiveScale });
-    const renderingTask = pdfPageProxy.render({
-      canvasContext: context,
-      viewport: detailViewport,
-      background,
-      transform
-    });
-    renderingTask.promise.catch((error) => {
-      if (error.name === "RenderingCancelledException") {
+    let renderingTask = null;
+    let renderTimeoutId = null;
+    const hideDetailCanvas = () => {
+      renderingTask?.cancel();
+      detailCanvas.style.display = "block";
+      detailCanvas.style.opacity = "0";
+      container.style.transform = "";
+      container.style.transformOrigin = "";
+    };
+    const renderDetailCanvas = () => {
+      const pageContainer = baseCanvasRef.current?.parentElement ?? null;
+      if (!pageContainer) {
+        hideDetailCanvas();
         return;
       }
-      throw error;
-    });
+      const baseViewport = pdfPageProxy.getViewport({ scale: 1 });
+      const pageWidth = baseViewport.width;
+      const pageHeight = baseViewport.height;
+      const scrollX = scrollContainer.scrollLeft / zoom;
+      const scrollY = scrollContainer.scrollTop / zoom;
+      const viewportWidth = scrollContainer.clientWidth / zoom;
+      const viewportHeight = scrollContainer.clientHeight / zoom;
+      const pageRect = pageContainer.getBoundingClientRect();
+      const containerRect = scrollContainer.getBoundingClientRect();
+      const pageLeft = (pageRect.left - containerRect.left) / zoom + scrollX;
+      const pageTop = (pageRect.top - containerRect.top) / zoom + scrollY;
+      const visibleLeft = Math.max(0, scrollX - pageLeft);
+      const visibleTop = Math.max(0, scrollY - pageTop);
+      const visibleRight = Math.min(
+        pageWidth,
+        scrollX + viewportWidth - pageLeft
+      );
+      const visibleBottom = Math.min(
+        pageHeight,
+        scrollY + viewportHeight - pageTop
+      );
+      const visibleWidth = Math.max(0, visibleRight - visibleLeft);
+      const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+      const targetDetailScale = dpr * zoom * 1.3;
+      const baseTargetScale = dpr * Math.min(zoom, 1);
+      const baseScale = clampScaleForPage(
+        baseTargetScale,
+        pageWidth,
+        pageHeight
+      );
+      const needsDetail = zoom > 1 && targetDetailScale - baseScale > 1e-3;
+      if (isPinching || !needsDetail || visibleWidth <= 0 || visibleHeight <= 0) {
+        hideDetailCanvas();
+        return;
+      }
+      renderingTask?.cancel();
+      detailCanvas.style.display = "block";
+      detailCanvas.style.opacity = "0";
+      const pdfOffsetX = visibleLeft;
+      const pdfOffsetY = visibleTop;
+      const effectiveScale = targetDetailScale;
+      const actualWidth = visibleWidth * effectiveScale;
+      const actualHeight = visibleHeight * effectiveScale;
+      detailCanvas.width = actualWidth;
+      detailCanvas.height = actualHeight;
+      detailCanvas.style.width = `${visibleWidth * zoom}px`;
+      detailCanvas.style.height = `${visibleHeight * zoom}px`;
+      detailCanvas.style.transformOrigin = "center center";
+      detailCanvas.style.transform = `translate(${visibleLeft * zoom}px, ${visibleTop * zoom}px)`;
+      container.style.transform = `scale3d(${1 / zoom}, ${1 / zoom}, 1)`;
+      container.style.transformOrigin = "0 0";
+      const context = detailCanvas.getContext("2d");
+      if (!context) {
+        return;
+      }
+      context.setTransform(1, 0, 0, 1, 0, 0);
+      context.clearRect(0, 0, detailCanvas.width, detailCanvas.height);
+      const transform = [
+        1,
+        0,
+        0,
+        1,
+        -pdfOffsetX * effectiveScale,
+        -pdfOffsetY * effectiveScale
+      ];
+      const detailViewport = pdfPageProxy.getViewport({
+        scale: effectiveScale
+      });
+      const currentRenderingTask = pdfPageProxy.render({
+        canvas: detailCanvas,
+        canvasContext: context,
+        viewport: detailViewport,
+        background,
+        transform
+      });
+      renderingTask = currentRenderingTask;
+      currentRenderingTask.promise.then(() => {
+        if (renderingTask === currentRenderingTask) {
+          detailCanvas.style.opacity = "1";
+        }
+      }).catch((error) => {
+        if (error.name === "RenderingCancelledException") {
+          return;
+        }
+        throw error;
+      }).finally(() => {
+        if (renderingTask === currentRenderingTask) {
+          renderingTask = null;
+        }
+      });
+    };
+    const scheduleRender = (delay = DETAIL_RENDER_IDLE_MS) => {
+      if (renderTimeoutId !== null) {
+        clearTimeout(renderTimeoutId);
+      }
+      hideDetailCanvas();
+      renderTimeoutId = setTimeout(() => {
+        renderTimeoutId = null;
+        renderDetailCanvas();
+      }, delay);
+    };
+    const unsubscribe = subscribeToViewportInvalidation(
+      scrollContainer,
+      scheduleRender
+    );
+    scheduleRender(isPinching ? DETAIL_RENDER_IDLE_MS * 2 : 0);
     return () => {
-      void renderingTask.cancel();
+      unsubscribe();
+      if (renderTimeoutId !== null) {
+        clearTimeout(renderTimeoutId);
+      }
+      void renderingTask?.cancel();
     };
   }, [
     pdfPageProxy,
     zoom,
+    isPinching,
     background,
     dpr,
     viewportRef,
-    ensureDetailCanvas,
+    getDetailCanvas,
     clampScaleForPage,
-    baseCanvasRef,
-    debouncedScrollTick
+    baseCanvasRef
   ]);
   return {
     detailCanvasRef,
     containerRef
   };
 };
-var CanvasLayer = ({
-  style,
-  background,
-  ...props
-}) => {
-  const { canvasRef } = useCanvasLayer({ background });
-  const { detailCanvasRef, containerRef } = useDetailCanvasLayer({
+var CanvasLayer = memo(
+  ({
+    style,
     background,
-    baseCanvasRef: canvasRef
-  });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("canvas", { ...props, ref: canvasRef, style }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: containerRef,
-        className: "absolute top-0 left-0 w-full h-full flex items-center justify-center",
-        children: /* @__PURE__ */ jsx("canvas", { ref: detailCanvasRef })
-      }
-    )
-  ] });
-};
+    ...props
+  }) => {
+    const { canvasRef } = useCanvasLayer({ background });
+    const { detailCanvasRef, containerRef } = useDetailCanvasLayer({
+      background,
+      baseCanvasRef: canvasRef
+    });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("canvas", { ...props, ref: canvasRef, style }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          className: "absolute top-0 left-0 w-full h-full flex items-center justify-center",
+          children: /* @__PURE__ */ jsx("canvas", { ref: detailCanvasRef })
+        }
+      )
+    ] });
+  }
+);
+CanvasLayer.displayName = "CanvasLayer";
 
 // src/hooks/useSelectionDimensions.tsx
 var MERGE_THRESHOLD = 2;
@@ -2118,14 +2237,13 @@ var ColoredHighlightLayer = ({
     )
   ] });
 };
-
-// src/components/layers/custom-layer.tsx
-var CustomLayer = ({
-  children
-}) => {
-  const pageNumber = usePDFPageNumber();
-  return children(pageNumber);
-};
+var CustomLayer = memo(
+  ({ children }) => {
+    const pageNumber = usePDFPageNumber();
+    return children(pageNumber);
+  }
+);
+CustomLayer.displayName = "CustomLayer";
 var convertToPercentString = (rect) => {
   return {
     top: `${rect.top}%`,
@@ -2319,25 +2437,33 @@ var useTextLayer = () => {
     if (!textContainer || isRenderingRef.current) {
       return;
     }
+    let isCancelled = false;
     isRenderingRef.current = true;
     textContainer.innerHTML = "";
     if (textLayerRef.current) {
       textLayerRef.current.cancel();
       textLayerRef.current = null;
     }
-    const textLayer = new TextLayer({
-      textContentSource: pdfPageProxy.streamTextContent(),
-      container: textContainer,
-      viewport: pdfPageProxy.getViewport({ scale: 1 })
-    });
-    textLayerRef.current = textLayer;
-    textLayer.render().then(() => {
-      if (textLayerRef.current === textLayer && textContainer) {
-        const endOfContent = document.createElement("div");
-        endOfContent.className = "endOfContent";
-        textContainer.appendChild(endOfContent);
-        bindMouseEvents(textContainer, endOfContent);
+    void loadPdfJs().then(({ TextLayer: TextLayer2 }) => {
+      if (isCancelled || textContainerRef.current !== textContainer) {
+        return;
+      }
+      const textLayer = new TextLayer2({
+        textContentSource: pdfPageProxy.streamTextContent(),
+        container: textContainer,
+        viewport: pdfPageProxy.getViewport({ scale: 1 })
+      });
+      textLayerRef.current = textLayer;
+      return textLayer.render();
+    }).then(() => {
+      const textLayer = textLayerRef.current;
+      if (!textLayer || isCancelled || textContainerRef.current !== textContainer) {
+        return;
       }
+      const endOfContent = document.createElement("div");
+      endOfContent.className = "endOfContent";
+      textContainer.appendChild(endOfContent);
+      bindMouseEvents(textContainer, endOfContent);
     }).catch((error) => {
       if (error.name !== "AbortException") {
         console.error("TextLayer rendering error:", error);
@@ -2346,6 +2472,7 @@ var useTextLayer = () => {
       isRenderingRef.current = false;
     });
     return () => {
+      isCancelled = true;
       isRenderingRef.current = false;
       if (textLayerRef.current) {
         textLayerRef.current.cancel();
@@ -2362,30 +2489,29 @@ var useTextLayer = () => {
     pageNumber: pdfPageProxy.pageNumber
   };
 };
-var TextLayer2 = ({
-  className,
-  style,
-  ...props
-}) => {
-  const { textContainerRef, pageNumber } = useTextLayer();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx_default("textLayer", className),
-      style: {
-        ...style,
-        position: "absolute",
-        top: 0,
-        left: 0
-      },
-      ...props,
-      ...{
-        "data-page-number": pageNumber
-      },
-      ref: textContainerRef
-    }
-  );
-};
+var TextLayer = memo(
+  ({ className, style, ...props }) => {
+    const { textContainerRef, pageNumber } = useTextLayer();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx_default("textLayer", className),
+        style: {
+          ...style,
+          position: "absolute",
+          top: 0,
+          left: 0
+        },
+        ...props,
+        ...{
+          "data-page-number": pageNumber
+        },
+        ref: textContainerRef
+      }
+    );
+  }
+);
+TextLayer.displayName = "TextLayer";
 var usePDFOutline = () => {
   const pdfDocumentProxy = usePdf((state) => state.pdfDocumentProxy);
   const [outline, setOutline] = useState();
@@ -2523,39 +2649,44 @@ var Outline = ({
     });
   }) });
 };
-var Page = ({
-  children,
-  pageNumber = 1,
-  style,
-  ...props
-}) => {
-  const pdfPageProxy = usePdf((state) => state.getPdfPageProxy(pageNumber));
-  const width = (pdfPageProxy.view[2] ?? 0) - (pdfPageProxy.view[0] ?? 0);
-  const height = (pdfPageProxy.view[3] ?? 0) - (pdfPageProxy.view[1] ?? 0);
-  return /* @__PURE__ */ jsx(PDFPageNumberContext.Provider, { value: pdfPageProxy.pageNumber, children: /* @__PURE__ */ jsx(
-    Primitive.div,
-    {
-      style: {
-        display: "block"
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            ...style,
-            "--scale-factor": 1,
-            "--total-scale-factor": 1,
-            position: "relative",
-            width,
-            height
-          },
-          ...props,
-          children
-        }
-      )
-    }
-  ) });
-};
+var Page = memo(
+  ({
+    children,
+    pageNumber = 1,
+    style,
+    ...props
+  }) => {
+    const pdfPageProxy = usePdf((state) => state.getPdfPageProxy(pageNumber));
+    const viewport = usePdf((state) => state.viewports[pageNumber - 1]);
+    const width = viewport?.width ?? (pdfPageProxy.view[2] ?? 0) - (pdfPageProxy.view[0] ?? 0);
+    const height = viewport?.height ?? (pdfPageProxy.view[3] ?? 0) - (pdfPageProxy.view[1] ?? 0);
+    return /* @__PURE__ */ jsx(PDFPageNumberContext.Provider, { value: pdfPageProxy.pageNumber, children: /* @__PURE__ */ jsx(
+      Primitive.div,
+      {
+        style: {
+          display: "block"
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              "--scale-factor": 1,
+              "--total-scale-factor": 1,
+              backgroundColor: "white",
+              position: "relative",
+              width,
+              height,
+              ...style
+            },
+            ...props,
+            children
+          }
+        )
+      }
+    ) });
+  }
+);
+Page.displayName = "Page";
 var NextPage = () => {
 };
 var PreviousPage = () => {
@@ -3176,10 +3307,10 @@ var Engine = class {
     const config = this.config;
     if (!state._active) this.clean();
     if ((state._blocked || !state.intentional) && !state._force && !config.triggerAllEvents) return;
-    const memo = this.handler(_objectSpread2(_objectSpread2(_objectSpread2({}, shared), state), {}, {
+    const memo7 = this.handler(_objectSpread2(_objectSpread2(_objectSpread2({}, shared), state), {}, {
       [this.aliasKey]: state.values
     }));
-    if (memo !== void 0) state.memo = memo;
+    if (memo7 !== void 0) state.memo = memo7;
   }
   clean() {
     this.eventStore.clean();
@@ -4528,11 +4659,11 @@ Please add \`${key}Action\` when creating your handler.`);
   const startKey = handlerKey + "Start";
   const endKey = handlerKey + "End";
   const fn = (state) => {
-    let memo = void 0;
+    let memo7 = void 0;
     if (state.first && startKey in handlers) handlers[startKey](state);
-    if (handlerKey in handlers) memo = handlers[handlerKey](state);
+    if (handlerKey in handlers) memo7 = handlers[handlerKey](state);
     if (state.last && endKey in handlers) handlers[endKey](state);
-    return memo;
+    return memo7;
   };
   internalHandlers[key] = fn;
   config[key] = config[key] || {};
@@ -4584,8 +4715,8 @@ function useGesture(handlers, config) {
 }
 
 // src/lib/memo.ts
-var firstMemo = (first, memo, initializer) => {
-  if (!first && !memo) {
+var firstMemo = (first, memo7, initializer) => {
+  if (!first && !memo7) {
     throw new Error(
       "Missing memo initialization. You likely forgot to return the result of `firstMemo` in the event function"
     );
@@ -4593,7 +4724,7 @@ var firstMemo = (first, memo, initializer) => {
   if (first) {
     return initializer();
   }
-  return memo;
+  return memo7;
 };
 
 // src/hooks/viewport/useViewportContainer.tsx
@@ -4725,13 +4856,13 @@ var useViewportContainer = ({
   useGesture(
     {
       onPinch: (state) => {
-        const { origin: origin2, first, movement, delta, event, memo } = state;
+        const { origin: origin2, first, movement, delta, event, memo: memo7 } = state;
         const [ms] = movement;
         const [deltaScale] = delta;
         const currentElement = elementRef.current;
         const currentContainer = containerRef.current;
         if (!currentElement || !currentContainer) return;
-        const newMemo = firstMemo(first, memo, () => {
+        const newMemo = firstMemo(first, memo7, () => {
           const elementRect = currentElement.getBoundingClientRect();
           const containerRect = currentContainer.getBoundingClientRect();
           const currentZoom = transformations.current.zoom;
@@ -4800,10 +4931,39 @@ var useViewportContainer = ({
 };
 var DEFAULT_HEIGHT = 600;
 var EXTRA_HEIGHT = 0;
+var VirtualizedPageItem = memo(
+  ({ child, virtualItem, innerBoxWidth }) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: innerBoxWidth,
+          height: "0px"
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              height: `${virtualItem.size}px`,
+              transform: `translateY(${virtualItem.start}px)`
+            },
+            children: cloneElement(child, {
+              key: virtualItem.key,
+              //@ts-expect-error pageNumber is not a valid react key
+              pageNumber: virtualItem.index + 1
+            })
+          }
+        )
+      }
+    );
+  },
+  (prev, next) => prev.child === next.child && prev.innerBoxWidth === next.innerBoxWidth && prev.virtualItem.key === next.virtualItem.key && prev.virtualItem.index === next.virtualItem.index && prev.virtualItem.size === next.virtualItem.size && prev.virtualItem.start === next.virtualItem.start
+);
+VirtualizedPageItem.displayName = "VirtualizedPageItem";
 var Pages = ({
   children,
   gap = 10,
-  virtualizerOptions = { overscan: 2 },
+  virtualizerOptions = { overscan: 1 },
   initialOffset,
   onOffsetChange,
   ...props
@@ -4869,7 +5029,9 @@ var Pages = ({
   });
   useFitWidth({ viewportRef: containerRef });
   const largestPageWidth = usePdf(
-    (state) => Math.max(...state.viewports.map((v) => v.width))
+    (state) => state.viewports.reduce((largestWidth, viewport) => {
+      return Math.max(largestWidth, viewport.width);
+    }, 0)
   );
   useEffect(() => {
     virtualizer.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
@@ -4930,26 +5092,11 @@ var Pages = ({
                 const innerBoxWidth = viewports?.[virtualItem.index] ? viewports[virtualItem.index]?.width : 0;
                 if (!innerBoxWidth) return null;
                 return /* @__PURE__ */ jsx(
-                  "div",
+                  VirtualizedPageItem,
                   {
-                    style: {
-                      width: innerBoxWidth,
-                      height: `0px`
-                    },
-                    children: /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          height: `${virtualItem.size}px`,
-                          transform: `translateY(${virtualItem.start}px)`
-                        },
-                        children: cloneElement(children, {
-                          key: virtualItem.key,
-                          //@ts-expect-error pageNumber is not a valid react key
-                          pageNumber: virtualItem.index + 1
-                        })
-                      }
-                    )
+                    child: children,
+                    virtualItem,
+                    innerBoxWidth
                   },
                   virtualItem.key
                 );
@@ -5005,28 +5152,44 @@ var usePDFDocumentContext = ({
     const loadDocument = () => {
       setInitialState(null);
       setProgress(0);
-      const loadingTask = getDocument(source);
-      loadingTask.onProgress = (progressEvent) => {
-        if (progressEvent.loaded === progressEvent.total) {
+      let loadingTask = null;
+      let isDisposed = false;
+      void loadPdfJs().then(({ getDocument }) => {
+        if (isDisposed) {
           return;
         }
-        setProgress(progressEvent.loaded / progressEvent.total);
-      };
-      const loadingPromise = loadingTask.promise.then((proxy) => {
-        onDocumentLoad?.({ proxy, source });
-        setProgress(1);
-        generateViewports(proxy);
+        loadingTask = getDocument(source);
+        loadingTask.onProgress = (progressEvent) => {
+          if (progressEvent.loaded === progressEvent.total) {
+            return;
+          }
+          setProgress(progressEvent.loaded / progressEvent.total);
+        };
+        return loadingTask.promise.then((proxy) => {
+          if (isDisposed || loadingTask?.destroyed) {
+            return;
+          }
+          onDocumentLoad?.({ proxy, source });
+          setProgress(1);
+          return generateViewports(proxy);
+        }).catch((error) => {
+          if (isDisposed || loadingTask?.destroyed) {
+            return;
+          }
+          console.error("Error loading PDF document", error);
+        });
       }).catch((error) => {
-        if (loadingTask.destroyed) {
+        if (isDisposed) {
           return;
         }
-        console.error("Error loading PDF document", error);
+        console.error("Error loading PDF.js", error);
       });
       return () => {
-        loadingPromise.finally(() => loadingTask.destroy());
+        isDisposed = true;
+        void loadingTask?.destroy();
       };
     };
-    loadDocument();
+    return loadDocument();
   }, [source]);
   return {
     initialState
@@ -5117,6 +5280,7 @@ var useThumbnail = (pageNumber, config = {}) => {
         const context = canvas.getContext("2d");
         if (!context) return;
         const renderTask = pageProxy.render({
+          canvas,
           canvasContext: context,
           viewport: scaledViewport
         });
@@ -5467,4 +5631,4 @@ function mergeAdjacentRects(rects) {
   return merged;
 }
 
-export { AnnotationHighlightLayer, AnnotationLayer2 as AnnotationLayer, AnnotationTooltip, CanvasLayer, ColoredHighlightLayer, CurrentPage, CurrentZoom, CustomLayer, HighlightLayer, LinkService, NextPage, Outline, OutlineChildItems, OutlineItem, PDFLinkServiceContext, Page, Pages, PreviousPage, Root, Search, SelectionTooltip, TextLayer2 as TextLayer, Thumbnail, Thumbnails, TotalPages, ZoomIn, ZoomOut, calculateHighlightRects, useAnnotations, useCreatePDFLinkService, usePDFLinkService, usePDFPageNumber, usePdf, usePdfJump, useSearch, useSelectionDimensions };
+export { AnnotationHighlightLayer, AnnotationLayer, AnnotationTooltip, CanvasLayer, ColoredHighlightLayer, CurrentPage, CurrentZoom, CustomLayer, HighlightLayer, LinkService, NextPage, Outline, OutlineChildItems, OutlineItem, PDFLinkServiceContext, Page, Pages, PreviousPage, Root, Search, SelectionTooltip, TextLayer, Thumbnail, Thumbnails, TotalPages, ZoomIn, ZoomOut, calculateHighlightRects, useAnnotations, useCreatePDFLinkService, usePDFLinkService, usePDFPageNumber, usePdf, usePdfJump, useSearch, useSelectionDimensions };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@anaralabs/lector",
-	"version": "3.8.0",
+	"version": "3.10.0",
 	"description": "Headless PDF viewer for React",
 	"author": "andrewdr (https://github.com/andrewdoro)",
 	"license": "MIT",
@@ -44,7 +44,7 @@
 		"@vitejs/plugin-react": "^4.3.4",
 		"@vitest/browser": "^2.0.4",
 		"clsx": "^2.1.1",
-		"pdfjs-dist": "^4.10.38",
+		"pdfjs-dist": "^5.5.207",
 		"playwright": "^1.45.3",
 		"react": "^19.1.1",
 		"size-limit": "^11.1.6",
@@ -57,7 +57,7 @@
 		"webdriverio": "^8.39.1"
 	},
 	"peerDependencies": {
-		"pdfjs-dist": "^4.9",
+		"pdfjs-dist": "^5.5.207",
 		"react": ">=19"
 	},
 	"dependencies": {
@@ -84,7 +84,7 @@
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/anaralabs/lector.git",
-		"directory": "packages/nuqs"
+		"directory": "packages/lector"
 	},
 	"bugs": {
 		"url": "https://github.com/anaralabs/lector/issues"