@anaralabs/lector 3.10.0 → 3.10.2

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

@@ -38,7 +38,7 @@ declare interface Annotation {
 export { Annotation }
 export { Annotation as Annotation_alias_1 }
 
-export declare const AnnotationHighlightLayer: ({ className, style, renderTooltipContent, renderHoverTooltipContent, tooltipClassName, highlightClassName, underlineClassName, commentIconPosition, commmentIcon, commentIconClassName, focusedAnnotationId, focusedHoverAnnotationId, onAnnotationClick, onAnnotationTooltipClose, hoverTooltipClassName, }: AnnotationHighlightLayerProps) => JSX.Element;
+export declare const AnnotationHighlightLayer: ({ className, style, renderTooltipContent, renderHoverTooltipContent, tooltipClassName, highlightClassName, underlineClassName, commentIconPosition, commmentIcon, commentIconClassName, focusedAnnotationId, focusedHoverAnnotationId, onAnnotationClick, onAnnotationTooltipClose, hoverTooltipClassName, }: AnnotationHighlightLayerProps) => JSX.Element | null;
 
 declare interface AnnotationHighlightLayerProps {
     className?: string;
@@ -124,6 +124,12 @@ declare interface AnnotationTooltipProps {
     }) => React.ReactNode;
 }
 
+declare type CacheEntry = {
+    bitmap: ImageBitmap;
+    width: number;
+    height: number;
+};
+
 /**
  * Calculates the highlight rectangles for a given text match.
  *
@@ -149,6 +155,8 @@ background?: string;
 
 export declare const clamp: (value: number, minimum: number, maximum: number) => number;
 
+export declare function clampScaleForPage(targetScale: number, pageWidth: number, pageHeight: number): number;
+
 declare type CollapsibleSelection = {
     highlights: HighlightRect[];
     underlines?: HighlightRect[];
@@ -257,6 +265,10 @@ export declare class LinkService {
 
 export declare const loadPdfJs: () => Promise<pdfjsDist>;
 
+export declare const MAX_CANVAS_DIMENSION = 32767;
+
+export declare const MAX_CANVAS_PIXELS = 16777216;
+
 export declare const NextPage: () => void;
 
 export declare const Outline: ({ children, ...props }: HTMLProps<HTMLUListElement> & {
@@ -321,6 +333,9 @@ declare interface PDFState {
     coloredHighlights: ColoredHighlight[];
     addColoredHighlight: (value: ColoredHighlight) => void;
     deleteColoredHighlight: (uuid: string) => void;
+    renderedPages: Record<number, true>;
+    markPageRendered: (pageNumber: number) => void;
+    unmarkPageRendered: (pageNumber: number) => void;
 }
 
 export declare const PDFStore: {
@@ -336,6 +351,51 @@ export declare type PDFVirtualizer = Virtualizer<any, any>;
 
 export declare const PreviousPage: () => void;
 
+/**
+ * LRU cache for rendered page bitmaps. When scrolling back to a previously
+ * rendered page at the same scale, we can draw from cache instantly instead
+ * of re-rendering through PDF.js.
+ *
+ * Cache keys include a document ID to prevent collisions when multiple
+ * <Root> instances render different PDFs on the same page.
+ */
+declare class RenderCache {
+    private cache;
+    private maxEntries;
+    private invalidatedDocs;
+    constructor(maxEntries?: number);
+    private key;
+    get(documentId: string, pageNumber: number, scale: number, background?: string): CacheEntry | undefined;
+    set(documentId: string, pageNumber: number, scale: number, canvas: HTMLCanvasElement, background?: string): Promise<void>;
+    /** Remove all cached entries for a specific document (call on Root unmount). */
+    invalidateDocument(documentId: string): void;
+    clear(): void;
+}
+
+export declare const renderCache: RenderCache;
+
+/**
+ * Serializes PDF page render operations so only one runs at a time.
+ * This prevents multiple heavy pages from competing for CPU and blocking the UI.
+ */
+declare class RenderQueue {
+    private queue;
+    private running;
+    enqueue(execute: () => Promise<void>): {
+        promise: Promise<void>;
+        cancel: () => void;
+    };
+    private flush;
+}
+
+/**
+ * Global singleton — intentionally shared across all <Root> instances.
+ * Serializing renders across documents prevents overall GPU/CPU pressure
+ * on the main thread (CanvasGraphics is single-threaded). The trade-off
+ * is increased latency in multi-viewer setups.
+ */
+export declare const renderQueue: RenderQueue;
+
 export declare const Root: ForwardRefExoticComponent<Omit<HTMLProps<HTMLDivElement> & usePDFDocumentParams & {
 loader?: ReactNode;
 }, "ref"> & RefAttributes<unknown>>;
@@ -426,11 +486,15 @@ declare interface UseAnnotationTooltipReturn {
 
 export declare const useCreatePDFLinkService: (pdfDocumentProxy: PDFDocumentProxy | null) => LinkService;
 
+declare const usePageRendered: (pageNumber: number) => boolean;
+export { usePageRendered }
+export { usePageRendered as usePageRendered_alias_1 }
+
 declare const usePdf: <T>(selector: (state: PDFState) => T) => T;
 export { usePdf }
 export { usePdf as usePdf_alias_1 }
 
-export declare const usePDFDocumentContext: ({ onDocumentLoad, source, initialRotation, isZoomFitWidth, zoom, zoomOptions, }: usePDFDocumentParams) => {
+export declare const usePDFDocumentContext: ({ onDocumentLoad, source, initialRotation, isZoomFitWidth, zoom, zoomOptions, documentOptions, }: usePDFDocumentParams) => {
     initialState: InitialPDFState | null | undefined;
 };
 
@@ -447,6 +511,12 @@ export declare interface usePDFDocumentParams {
     isZoomFitWidth?: boolean;
     zoom?: number;
     zoomOptions?: ZoomOptions;
+    /**
+     * Override or extend the PDF.js DocumentInitParameters passed to getDocument().
+     * These take highest precedence over both the source object and lector's defaults.
+     * Must be a stable reference (module-level constant or useMemo) to avoid reloading the document.
+     */
+    documentOptions?: Partial<DocumentInitParameters>;
 }
 
 export declare const usePdfJump: () => {

package/dist/index.d.ts

@@ -31,6 +31,7 @@ export { useSearch } from './_tsup-dts-rollup.js';
 export { calculateHighlightRects } from './_tsup-dts-rollup.js';
 export { Annotation } from './_tsup-dts-rollup.js';
 export { useAnnotations } from './_tsup-dts-rollup.js';
+export { usePageRendered } from './_tsup-dts-rollup.js';
 export { LinkService } from './_tsup-dts-rollup.js';
 export { PDFLinkServiceContext } from './_tsup-dts-rollup.js';
 export { useCreatePDFLinkService } from './_tsup-dts-rollup.js';

package/dist/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, memo, forwardRef, cloneElement, useRef, useState, useCallback, useContext, useEffect, useMemo, useLayoutEffect, createRef } from 'react';
+import React, { createContext, memo, forwardRef, useMemo, cloneElement, useEffect, useRef, useState, useCallback, useContext, 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';
@@ -124,7 +124,19 @@ var PDFStore = createZustandContext(
         coloredHighlights: prevState.coloredHighlights.filter(
           (rect) => rect.uuid !== uuid
         )
-      }))
+      })),
+      renderedPages: {},
+      markPageRendered: (pageNumber) => {
+        const current = get().renderedPages;
+        if (current[pageNumber]) return;
+        set({ renderedPages: { ...current, [pageNumber]: true } });
+      },
+      unmarkPageRendered: (pageNumber) => {
+        const current = get().renderedPages;
+        if (!current[pageNumber]) return;
+        const { [pageNumber]: _, ...rest } = current;
+        set({ renderedPages: rest });
+      }
     }));
   }
 );
@@ -462,12 +474,15 @@ var AnnotationHighlightLayer = ({
 }) => {
   const { annotations } = useAnnotations();
   const pageNumber = usePDFPageNumber();
-  const pageAnnotations = annotations.filter(
-    (annotation) => annotation.pageNumber === pageNumber
+  const isPageRendered = usePdf((state) => !!state.renderedPages[pageNumber]);
+  const pageAnnotations = useMemo(
+    () => annotations.filter((a) => a.pageNumber === pageNumber),
+    [annotations, pageNumber]
   );
+  if (!isPageRendered) return null;
   const getCommentIconPosition = (highlights) => {
     if (!highlights.length) return { top: 0, right: 10 };
-    const sortedHighlights = [...highlights].sort((a, b) => {
+    const sortedHighlights = highlights.toSorted((a, b) => {
       const topDiff = a.top - b.top;
       return Math.abs(topDiff) < 3 ? a.left - b.left : topDiff;
     });
@@ -691,7 +706,7 @@ var cancellable = (promise) => {
 var pdfJsPromise = null;
 var loadPdfJs = () => {
   if (!pdfJsPromise) {
-    pdfJsPromise = import('pdfjs-dist');
+    pdfJsPromise = import('pdfjs-dist/legacy/build/pdf.mjs');
   }
   return pdfJsPromise;
 };
@@ -1099,6 +1114,146 @@ var AnnotationLayer = memo(
   }
 );
 AnnotationLayer.displayName = "AnnotationLayer";
+
+// src/lib/canvas-utils.ts
+var MAX_CANVAS_PIXELS = 16777216;
+var MAX_CANVAS_DIMENSION = 32767;
+function clampScaleForPage(targetScale, pageWidth, pageHeight) {
+  if (!targetScale) {
+    return 0;
+  }
+  const areaLimit = Math.sqrt(
+    MAX_CANVAS_PIXELS / Math.max(pageWidth * pageHeight, 1)
+  );
+  const widthLimit = MAX_CANVAS_DIMENSION / Math.max(pageWidth, 1);
+  const heightLimit = MAX_CANVAS_DIMENSION / Math.max(pageHeight, 1);
+  const safeScale = Math.min(
+    targetScale,
+    Number.isFinite(areaLimit) ? areaLimit : targetScale,
+    Number.isFinite(widthLimit) ? widthLimit : targetScale,
+    Number.isFinite(heightLimit) ? heightLimit : targetScale
+  );
+  return Math.max(safeScale, 0);
+}
+
+// src/lib/render-cache.ts
+var RenderCache = class {
+  cache = /* @__PURE__ */ new Map();
+  maxEntries;
+  // Tracks invalidated documents so in-flight createImageBitmap calls
+  // don't insert orphaned entries after invalidateDocument() runs.
+  invalidatedDocs = /* @__PURE__ */ new Set();
+  constructor(maxEntries = 60) {
+    this.maxEntries = maxEntries;
+  }
+  key(documentId, pageNumber, scale, background) {
+    return `${documentId}-${pageNumber}-${scale}-${background ?? "white"}`;
+  }
+  get(documentId, pageNumber, scale, background) {
+    const k = this.key(documentId, pageNumber, scale, background);
+    const entry = this.cache.get(k);
+    if (!entry) return void 0;
+    this.cache.delete(k);
+    this.cache.set(k, entry);
+    return entry;
+  }
+  async set(documentId, pageNumber, scale, canvas, background) {
+    const k = this.key(documentId, pageNumber, scale, background);
+    const w = canvas.width;
+    const h = canvas.height;
+    if (w === 0 || h === 0) return;
+    while (this.cache.size >= this.maxEntries) {
+      const oldest = this.cache.keys().next().value;
+      if (oldest !== void 0) {
+        const entry = this.cache.get(oldest);
+        entry?.bitmap.close();
+        this.cache.delete(oldest);
+      }
+    }
+    try {
+      const bitmap = await createImageBitmap(canvas);
+      if (this.invalidatedDocs.has(documentId)) {
+        bitmap.close();
+        return;
+      }
+      this.cache.set(k, {
+        bitmap,
+        width: w,
+        height: h
+      });
+    } catch {
+    }
+  }
+  /** Remove all cached entries for a specific document (call on Root unmount). */
+  invalidateDocument(documentId) {
+    this.invalidatedDocs.add(documentId);
+    for (const [k, entry] of this.cache) {
+      if (k.startsWith(`${documentId}-`)) {
+        entry.bitmap.close();
+        this.cache.delete(k);
+      }
+    }
+    setTimeout(() => {
+      this.invalidatedDocs.delete(documentId);
+    }, 1e3);
+  }
+  clear() {
+    for (const entry of this.cache.values()) {
+      entry.bitmap.close();
+    }
+    this.cache.clear();
+    this.invalidatedDocs.clear();
+  }
+};
+var renderCache = new RenderCache();
+
+// src/lib/render-queue.ts
+var RenderQueue = class {
+  queue = [];
+  running = false;
+  enqueue(execute) {
+    let resolve;
+    let reject;
+    const promise = new Promise((res, rej) => {
+      resolve = res;
+      reject = rej;
+    });
+    const job = {
+      execute,
+      resolve,
+      reject,
+      cancelled: false
+    };
+    this.queue.push(job);
+    this.flush();
+    return {
+      promise,
+      cancel: () => {
+        job.cancelled = true;
+        job.resolve();
+      }
+    };
+  }
+  async flush() {
+    if (this.running) return;
+    this.running = true;
+    while (this.queue.length > 0) {
+      const job = this.queue.shift();
+      if (job.cancelled) {
+        job.resolve();
+        continue;
+      }
+      try {
+        await job.execute();
+        job.resolve();
+      } catch (error) {
+        job.reject(error);
+      }
+    }
+    this.running = false;
+  }
+};
+var renderQueue = new RenderQueue();
 var useDpr = () => {
   const [dpr, setDPR] = useState(
     typeof window === "undefined" ? 1 : Math.min(window.devicePixelRatio, 2)
@@ -1122,79 +1277,143 @@ var useDpr = () => {
 };
 
 // src/hooks/layers/useCanvasLayer.tsx
-var MAX_CANVAS_PIXELS = 16777216;
-var MAX_CANVAS_DIMENSION = 32767;
 var useCanvasLayer = ({ background }) => {
   const canvasRef = useRef(null);
   const pageNumber = usePDFPageNumber();
   const dpr = useDpr();
   const bouncyZoom = usePdf((state) => state.zoom);
   const pdfPageProxy = usePdf((state) => state.getPdfPageProxy(pageNumber));
-  const [zoom] = useDebounce(bouncyZoom, 100);
-  const clampScaleForPage = useCallback(
-    (targetScale, pageWidth, pageHeight) => {
-      if (!targetScale) {
-        return 0;
-      }
-      const areaLimit = Math.sqrt(
-        MAX_CANVAS_PIXELS / Math.max(pageWidth * pageHeight, 1)
-      );
-      const widthLimit = MAX_CANVAS_DIMENSION / Math.max(pageWidth, 1);
-      const heightLimit = MAX_CANVAS_DIMENSION / Math.max(pageHeight, 1);
-      const safeScale = Math.min(
-        targetScale,
-        Number.isFinite(areaLimit) ? areaLimit : targetScale,
-        Number.isFinite(widthLimit) ? widthLimit : targetScale,
-        Number.isFinite(heightLimit) ? heightLimit : targetScale
-      );
-      return Math.max(safeScale, 0);
-    },
-    []
+  const markPageRendered = usePdf((state) => state.markPageRendered);
+  const unmarkPageRendered = usePdf((state) => state.unmarkPageRendered);
+  const documentId = usePdf(
+    (state) => state.pdfDocumentProxy.fingerprints[0] ?? "default"
   );
+  const [zoom] = useDebounce(bouncyZoom, 100);
+  const lastRenderedScaleRef = useRef(0);
+  const lastBackgroundRef = useRef(background);
+  const lastPageProxyRef = useRef(pdfPageProxy);
+  const pageDimsRef = useRef(null);
+  if (!pageDimsRef.current || pageDimsRef.current.proxy !== pdfPageProxy) {
+    const vp = pdfPageProxy.getViewport({ scale: 1 });
+    pageDimsRef.current = {
+      width: vp.width,
+      height: vp.height,
+      proxy: pdfPageProxy
+    };
+  }
   useLayoutEffect(() => {
     if (!canvasRef.current) {
       return;
     }
-    const baseCanvas = canvasRef.current;
-    const baseViewport = pdfPageProxy.getViewport({ scale: 1 });
-    const pageWidth = baseViewport.width;
-    const pageHeight = baseViewport.height;
+    if (lastPageProxyRef.current !== pdfPageProxy || lastBackgroundRef.current !== background) {
+      lastPageProxyRef.current = pdfPageProxy;
+      lastBackgroundRef.current = background;
+      lastRenderedScaleRef.current = 0;
+    }
+    const { width: pageWidth, height: pageHeight } = pageDimsRef.current;
+    const bgColor = background ?? "white";
     const targetBaseScale = dpr * Math.min(zoom, 1);
     const baseScale = clampScaleForPage(targetBaseScale, pageWidth, pageHeight);
-    baseCanvas.width = Math.floor(pageWidth * baseScale);
-    baseCanvas.height = Math.floor(pageHeight * baseScale);
-    baseCanvas.style.position = "absolute";
-    baseCanvas.style.top = "0";
-    baseCanvas.style.left = "0";
-    baseCanvas.style.width = `${pageWidth}px`;
-    baseCanvas.style.height = `${pageHeight}px`;
-    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) {
+    if (baseScale === lastRenderedScaleRef.current) {
       return;
     }
-    context.setTransform(1, 0, 0, 1, 0, 0);
-    context.clearRect(0, 0, baseCanvas.width, baseCanvas.height);
-    const viewport = pdfPageProxy.getViewport({ scale: baseScale });
-    const renderingTask = pdfPageProxy.render({
-      canvas: baseCanvas,
-      canvasContext: context,
-      viewport,
-      background
-    });
-    renderingTask.promise.catch((error) => {
-      if (error.name === "RenderingCancelledException") {
-        return;
+    const w = Math.floor(pageWidth * baseScale);
+    const h = Math.floor(pageHeight * baseScale);
+    const cssText = `position:absolute;top:0;left:0;width:${pageWidth}px;height:${pageHeight}px;transform:translate(0px,0px);z-index:0;pointer-events:none;background-color:${bgColor}`;
+    const swapToCanvas = (source, sw, sh) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      canvas.width = sw;
+      canvas.height = sh;
+      canvas.style.cssText = cssText;
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.drawImage(source, 0, 0);
       }
-      throw error;
+      lastRenderedScaleRef.current = baseScale;
+    };
+    const cached = renderCache.get(
+      documentId,
+      pageNumber,
+      baseScale,
+      background
+    );
+    if (cached) {
+      swapToCanvas(cached.bitmap, cached.width, cached.height);
+      markPageRendered(pageNumber);
+      return;
+    }
+    let cancelled = false;
+    let activeRenderingTask = null;
+    const job = renderQueue.enqueue(() => {
+      return new Promise((resolve, reject) => {
+        if (cancelled || !canvasRef.current) {
+          resolve();
+          return;
+        }
+        const buffer = document.createElement("canvas");
+        buffer.width = w;
+        buffer.height = h;
+        const bufferCtx = buffer.getContext("2d");
+        if (!bufferCtx) {
+          resolve();
+          return;
+        }
+        const viewport = pdfPageProxy.getViewport({ scale: baseScale });
+        const renderingTask = pdfPageProxy.render({
+          canvas: buffer,
+          canvasContext: bufferCtx,
+          viewport,
+          background
+        });
+        activeRenderingTask = renderingTask;
+        renderingTask.promise.then(() => {
+          activeRenderingTask = null;
+          if (cancelled || !canvasRef.current) {
+            resolve();
+            return;
+          }
+          swapToCanvas(buffer, w, h);
+          markPageRendered(pageNumber);
+          renderCache.set(documentId, pageNumber, baseScale, buffer, background).finally(() => {
+            buffer.width = 0;
+            buffer.height = 0;
+          });
+          resolve();
+        }).catch((error) => {
+          activeRenderingTask = null;
+          if (error.name === "RenderingCancelledException") {
+            resolve();
+            return;
+          }
+          reject(error);
+        });
+      });
     });
     return () => {
-      void renderingTask.cancel();
+      cancelled = true;
+      job.cancel();
+      void activeRenderingTask?.cancel();
+    };
+  }, [
+    pdfPageProxy,
+    background,
+    dpr,
+    zoom,
+    pageNumber,
+    documentId,
+    markPageRendered
+  ]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    return () => {
+      unmarkPageRendered(pageNumber);
+      if (canvas) {
+        canvas.width = 1;
+        canvas.height = 1;
+      }
     };
-  }, [pdfPageProxy, background, dpr, zoom, clampScaleForPage]);
+  }, [pageNumber, unmarkPageRendered]);
   return {
     canvasRef
   };
@@ -1264,8 +1483,6 @@ var subscribeToViewportInvalidation = (viewport, callback) => {
 };
 
 // src/hooks/layers/useDetailCanvasLayer.tsx
-var MAX_CANVAS_PIXELS2 = 16777216;
-var MAX_CANVAS_DIMENSION2 = 32767;
 var DETAIL_RENDER_IDLE_MS = 80;
 var useDetailCanvasLayer = ({
   background,
@@ -1280,57 +1497,33 @@ var useDetailCanvasLayer = ({
   const pdfPageProxy = usePdf((state) => state.getPdfPageProxy(pageNumber));
   const viewportRef = usePdf((state) => state.viewportRef);
   const [zoom] = useDebounce(bouncyZoom, 200);
-  const getDetailCanvas = useCallback(() => {
-    const detailCanvas = detailCanvasRef.current;
-    if (!detailCanvas) {
-      return null;
-    }
-    detailCanvas.style.position = "absolute";
-    detailCanvas.style.top = "0";
-    detailCanvas.style.left = "0";
-    detailCanvas.style.pointerEvents = "none";
-    detailCanvas.style.zIndex = "1";
-    detailCanvas.style.backgroundColor = background ?? "white";
-    return detailCanvas;
-  }, [background]);
-  const clampScaleForPage = useCallback(
-    (targetScale, pageWidth, pageHeight) => {
-      if (!targetScale) {
-        return 0;
-      }
-      const areaLimit = Math.sqrt(
-        MAX_CANVAS_PIXELS2 / Math.max(pageWidth * pageHeight, 1)
-      );
-      const widthLimit = MAX_CANVAS_DIMENSION2 / Math.max(pageWidth, 1);
-      const heightLimit = MAX_CANVAS_DIMENSION2 / Math.max(pageHeight, 1);
-      const safeScale = Math.min(
-        targetScale,
-        Number.isFinite(areaLimit) ? areaLimit : targetScale,
-        Number.isFinite(widthLimit) ? widthLimit : targetScale,
-        Number.isFinite(heightLimit) ? heightLimit : targetScale
-      );
-      return Math.max(safeScale, 0);
-    },
-    []
-  );
+  const pageDimsRef = useRef(null);
+  if (!pageDimsRef.current || pageDimsRef.current.proxy !== pdfPageProxy) {
+    const vp = pdfPageProxy.getViewport({ scale: 1 });
+    pageDimsRef.current = {
+      width: vp.width,
+      height: vp.height,
+      proxy: pdfPageProxy
+    };
+  }
   useLayoutEffect(() => {
     const scrollContainer = viewportRef?.current;
     if (!scrollContainer) {
       return;
     }
-    const detailCanvas = getDetailCanvas();
+    const detailCanvas = detailCanvasRef.current;
     const container = containerRef.current;
     if (!detailCanvas || !container) {
       return;
     }
     let renderingTask = null;
     let renderTimeoutId = null;
+    const bgColor = background ?? "white";
+    const detailBaseStyle = `position:absolute;top:0;left:0;pointer-events:none;z-index:1;background-color:${bgColor}`;
     const hideDetailCanvas = () => {
       renderingTask?.cancel();
-      detailCanvas.style.display = "block";
-      detailCanvas.style.opacity = "0";
-      container.style.transform = "";
-      container.style.transformOrigin = "";
+      detailCanvas.style.cssText = `${detailBaseStyle};display:block;opacity:0`;
+      container.style.cssText = "";
     };
     const renderDetailCanvas = () => {
       const pageContainer = baseCanvasRef.current?.parentElement ?? null;
@@ -1338,9 +1531,7 @@ var useDetailCanvasLayer = ({
         hideDetailCanvas();
         return;
       }
-      const baseViewport = pdfPageProxy.getViewport({ scale: 1 });
-      const pageWidth = baseViewport.width;
-      const pageHeight = baseViewport.height;
+      const { width: pageWidth, height: pageHeight } = pageDimsRef.current;
       const scrollX = scrollContainer.scrollLeft / zoom;
       const scrollY = scrollContainer.scrollTop / zoom;
       const viewportWidth = scrollContainer.clientWidth / zoom;
@@ -1374,27 +1565,19 @@ var useDetailCanvasLayer = ({
         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) {
+      const buffer = document.createElement("canvas");
+      buffer.width = actualWidth;
+      buffer.height = actualHeight;
+      const bufferCtx = buffer.getContext("2d");
+      if (!bufferCtx) {
         return;
       }
-      context.setTransform(1, 0, 0, 1, 0, 0);
-      context.clearRect(0, 0, detailCanvas.width, detailCanvas.height);
+      bufferCtx.setTransform(1, 0, 0, 1, 0, 0);
       const transform = [
         1,
         0,
@@ -1407,16 +1590,22 @@ var useDetailCanvasLayer = ({
         scale: effectiveScale
       });
       const currentRenderingTask = pdfPageProxy.render({
-        canvas: detailCanvas,
-        canvasContext: context,
+        canvas: buffer,
+        canvasContext: bufferCtx,
         viewport: detailViewport,
         background,
         transform
       });
       renderingTask = currentRenderingTask;
       currentRenderingTask.promise.then(() => {
-        if (renderingTask === currentRenderingTask) {
-          detailCanvas.style.opacity = "1";
+        if (renderingTask !== currentRenderingTask) return;
+        detailCanvas.width = actualWidth;
+        detailCanvas.height = actualHeight;
+        detailCanvas.style.cssText = `${detailBaseStyle};display:block;opacity:1;width:${visibleWidth * zoom}px;height:${visibleHeight * zoom}px;transform-origin:center center;transform:translate(${visibleLeft * zoom}px,${visibleTop * zoom}px)`;
+        container.style.cssText = `transform:scale3d(${1 / zoom},${1 / zoom},1);transform-origin:0 0`;
+        const ctx = detailCanvas.getContext("2d");
+        if (ctx) {
+          ctx.drawImage(buffer, 0, 0);
         }
       }).catch((error) => {
         if (error.name === "RenderingCancelledException") {
@@ -1427,13 +1616,15 @@ var useDetailCanvasLayer = ({
         if (renderingTask === currentRenderingTask) {
           renderingTask = null;
         }
+        buffer.width = 0;
+        buffer.height = 0;
       });
     };
     const scheduleRender = (delay = DETAIL_RENDER_IDLE_MS) => {
       if (renderTimeoutId !== null) {
         clearTimeout(renderTimeoutId);
       }
-      hideDetailCanvas();
+      renderingTask?.cancel();
       renderTimeoutId = setTimeout(() => {
         renderTimeoutId = null;
         renderDetailCanvas();
@@ -1443,7 +1634,11 @@ var useDetailCanvasLayer = ({
       scrollContainer,
       scheduleRender
     );
-    scheduleRender(isPinching ? DETAIL_RENDER_IDLE_MS * 2 : 0);
+    if (zoom <= 1 || isPinching) {
+      hideDetailCanvas();
+    } else {
+      scheduleRender(0);
+    }
     return () => {
       unsubscribe();
       if (renderTimeoutId !== null) {
@@ -1458,10 +1653,17 @@ var useDetailCanvasLayer = ({
     background,
     dpr,
     viewportRef,
-    getDetailCanvas,
-    clampScaleForPage,
     baseCanvasRef
   ]);
+  useEffect(() => {
+    const canvas = detailCanvasRef.current;
+    return () => {
+      if (canvas) {
+        canvas.width = 1;
+        canvas.height = 1;
+      }
+    };
+  }, []);
   return {
     detailCanvasRef,
     containerRef
@@ -2201,6 +2403,10 @@ var ColoredHighlightLayer = ({
     (state) => state.coloredHighlights
   );
   const addColoredHighlight = usePdf((state) => state.addColoredHighlight);
+  const pageHighlights = useMemo(
+    () => highlights.filter((s) => s.pageNumber === pageNumber),
+    [highlights, pageNumber]
+  );
   const handleHighlighting = useCallback(
     (color) => {
       const dimension = getDimension();
@@ -2222,13 +2428,7 @@ var ColoredHighlightLayer = ({
     [onHighlight, getDimension, addColoredHighlight]
   );
   return /* @__PURE__ */ jsxs("div", { className: "colored-highlights-layer", children: [
-    highlights.filter((selection) => selection.pageNumber === pageNumber).map((selection) => /* @__PURE__ */ jsx(
-      ColoredHighlightComponent,
-      {
-        selection
-      },
-      selection.uuid
-    )),
+    pageHighlights.map((selection) => /* @__PURE__ */ jsx(ColoredHighlightComponent, { selection }, selection.uuid)),
     /* @__PURE__ */ jsx(
       ColorSelectionTool,
       {
@@ -2256,7 +2456,10 @@ var HighlightLayer = forwardRef(({ asChild, className, style, ...props }, ref) =
   const pageNumber = usePDFPageNumber();
   const highlights = usePdf((state) => state.highlights);
   const Comp = asChild ? Slot : "div";
-  const rects = highlights.filter((area) => area.pageNumber === pageNumber);
+  const rects = useMemo(
+    () => highlights.filter((area) => area.pageNumber === pageNumber),
+    [highlights, pageNumber]
+  );
   if (!rects?.length) return null;
   return /* @__PURE__ */ jsx(Fragment, { children: rects.map((rect, index) => {
     const { pageNumber: pageNumber2, type, style: customStyle, ...coordinates } = rect;
@@ -2831,6 +3034,7 @@ var useVisiblePage = ({ items }) => {
   const isPinching = usePdf((state) => state.isPinching);
   const setCurrentPage = usePdf((state) => state.setCurrentPage);
   const scrollElement = usePdf((state) => state.viewportRef?.current);
+  const lastPageRef = useRef(0);
   const calculateVisiblePageIndex = useCallback(
     (virtualItems) => {
       if (!scrollElement || virtualItems.length === 0) return 0;
@@ -2854,7 +3058,11 @@ var useVisiblePage = ({ items }) => {
   useEffect(() => {
     if (!isPinching && items.length > 0) {
       const mostVisibleIndex = calculateVisiblePageIndex(items);
-      setCurrentPage?.(mostVisibleIndex + 1);
+      const page = mostVisibleIndex + 1;
+      if (page !== lastPageRef.current) {
+        lastPageRef.current = page;
+        setCurrentPage?.(page);
+      }
     }
   }, [items, isPinching, calculateVisiblePageIndex, setCurrentPage]);
   return null;
@@ -4736,7 +4944,7 @@ var useViewportContainer = ({
   elementWrapperRef,
   elementRef
 }) => {
-  const [origin, setOrigin] = useState([0, 0]);
+  const originRef = useRef([0, 0]);
   const wheelInertia = useRef({
     active: false,
     lastTime: 0,
@@ -4756,28 +4964,46 @@ var useViewportContainer = ({
     translateY: 0,
     zoom
   });
+  const zoomRafRef = useRef(null);
+  const lastPushedZoomRef = useRef(zoom);
   const updateTransform = useCallback(
     (zoomUpdate) => {
       if (!elementRef.current || !containerRef.current || !elementWrapperRef.current) {
         return;
       }
       const { zoom: zoom2, translateX, translateY } = transformations.current;
+      const naturalWidth = parseFloat(elementRef.current.style.width) || elementRef.current.offsetWidth;
+      const naturalHeight = parseFloat(elementRef.current.style.height) || elementRef.current.offsetHeight;
       elementRef.current.style.transform = `scale3d(${zoom2}, ${zoom2}, 1)`;
-      elementRef.current.style.willChange = "scale3d";
-      const elementBoundingBox = elementRef.current.getBoundingClientRect();
-      const width = elementBoundingBox.width;
-      elementWrapperRef.current.style.width = `${width}px`;
-      elementWrapperRef.current.style.height = `${elementBoundingBox.height}px`;
+      elementWrapperRef.current.style.width = `${naturalWidth * zoom2}px`;
+      elementWrapperRef.current.style.height = `${naturalHeight * zoom2}px`;
       containerRef.current.scrollTop = translateY;
       containerRef.current.scrollLeft = translateX;
-      if (zoomUpdate) updateZoom(() => transformations.current.zoom);
+      if (zoomUpdate && zoomRafRef.current === null) {
+        zoomRafRef.current = requestAnimationFrame(() => {
+          zoomRafRef.current = null;
+          const z = transformations.current.zoom;
+          lastPushedZoomRef.current = z;
+          updateZoom(() => z);
+        });
+      }
     },
     [containerRef, elementRef, elementWrapperRef, updateZoom]
   );
+  useEffect(() => {
+    return () => {
+      if (zoomRafRef.current !== null) {
+        cancelAnimationFrame(zoomRafRef.current);
+      }
+    };
+  }, []);
   useEffect(() => {
     if (transformations.current.zoom === zoom || !containerRef.current) {
       return;
     }
+    if (zoom === lastPushedZoomRef.current) {
+      return;
+    }
     const prevZoom = transformations.current.zoom;
     if (!prevZoom || !Number.isFinite(prevZoom)) {
       transformations.current = {
@@ -4856,7 +5082,7 @@ var useViewportContainer = ({
   useGesture(
     {
       onPinch: (state) => {
-        const { origin: origin2, first, movement, delta, event, memo: memo7 } = state;
+        const { origin, first, movement, delta, event, memo: memo7 } = state;
         const [ms] = movement;
         const [deltaScale] = delta;
         const currentElement = elementRef.current;
@@ -4867,17 +5093,17 @@ var useViewportContainer = ({
           const containerRect = currentContainer.getBoundingClientRect();
           const currentZoom = transformations.current.zoom;
           const contentPosition = [
-            origin2[0] - elementRect.left,
-            origin2[1] - elementRect.top
+            origin[0] - elementRect.left,
+            origin[1] - elementRect.top
           ];
           const containerPosition = [
-            origin2[0] - containerRect.left,
-            origin2[1] - containerRect.top
+            origin[0] - containerRect.left,
+            origin[1] - containerRect.top
           ];
-          setOrigin([
+          originRef.current = [
             contentPosition[0] / currentZoom,
             contentPosition[1] / currentZoom
-          ]);
+          ];
           return {
             contentPosition,
             containerPosition,
@@ -4926,11 +5152,13 @@ var useViewportContainer = ({
     }
   );
   return {
-    origin
+    origin: originRef.current
   };
 };
+var selectLargestPageWidth = (state) => state.viewports.reduce((max, vp) => Math.max(max, vp.width), 0);
 var DEFAULT_HEIGHT = 600;
 var EXTRA_HEIGHT = 0;
+var DEFAULT_VIRTUALIZER_OPTIONS = { overscan: 1 };
 var VirtualizedPageItem = memo(
   ({ child, virtualItem, innerBoxWidth }) => {
     return /* @__PURE__ */ jsx(
@@ -4963,7 +5191,7 @@ VirtualizedPageItem.displayName = "VirtualizedPageItem";
 var Pages = ({
   children,
   gap = 10,
-  virtualizerOptions = { overscan: 1 },
+  virtualizerOptions = DEFAULT_VIRTUALIZER_OPTIONS,
   initialOffset,
   onOffsetChange,
   ...props
@@ -4983,12 +5211,16 @@ var Pages = ({
   const setVirtualizer = usePdf((state) => state.setVirtualizer);
   const { scrollToFn } = useScrollFn();
   const { observeElementOffset } = useObserveElement();
+  const viewportsRef = useRef(viewports);
+  viewportsRef.current = viewports;
   const estimateSize = useCallback(
     (index) => {
-      if (!viewports || !viewports[index]) return DEFAULT_HEIGHT;
-      return viewports[index].height + EXTRA_HEIGHT;
+      const vp = viewportsRef.current;
+      if (!vp || !vp[index]) return DEFAULT_HEIGHT;
+      return vp[index].height + EXTRA_HEIGHT;
     },
-    [viewports]
+    []
+    // Stable — reads from ref
   );
   const virtualizer = useVirtualizer({
     count: numPages || 0,
@@ -5028,11 +5260,7 @@ var Pages = ({
     items
   });
   useFitWidth({ viewportRef: containerRef });
-  const largestPageWidth = usePdf(
-    (state) => state.viewports.reduce((largestWidth, viewport) => {
-      return Math.max(largestWidth, viewport.width);
-    }, 0)
-  );
+  const largestPageWidth = usePdf(selectLargestPageWidth);
   useEffect(() => {
     virtualizer.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
       const size = virtualizer.getSize();
@@ -5084,6 +5312,7 @@ var Pages = ({
                 alignItems: "center",
                 flexDirection: "column",
                 transformOrigin: "0 0",
+                willChange: "transform",
                 // width: "max-content",
                 width: largestPageWidth,
                 margin: "0 auto"
@@ -5108,17 +5337,44 @@ var Pages = ({
     }
   );
 };
+function buildDocumentInitParams(source, overrides) {
+  let params;
+  if (typeof source === "string" || source instanceof URL) {
+    params = { url: source };
+  } else if (source instanceof ArrayBuffer || ArrayBuffer.isView(source)) {
+    params = { data: source };
+  } else {
+    params = { ...source };
+  }
+  const defaults = {
+    // Skip the slow _guessMax binary-search auto-detection of max canvas area.
+    // 1 GiB = 256 megapixels at 4 bytes/pixel. If the device can't allocate
+    // this, pdfjs falls back gracefully via try/catch.
+    canvasMaxAreaInBytes: 1024 * 1024 * 1024,
+    // Enable GPU-backed canvases (willReadFrequently: false). PDF viewers are
+    // render-dominated — they don't call getImageData() — so GPU compositing
+    // is the correct path. This is the browser's default when no hint is given.
+    enableHWA: true,
+    // Explicitly opt-in to OffscreenCanvas in the worker for image processing.
+    // Already the browser default, but being explicit avoids edge cases.
+    isOffscreenCanvasSupported: true
+  };
+  return { ...defaults, ...params, ...overrides };
+}
 var usePDFDocumentContext = ({
   onDocumentLoad,
   source,
   initialRotation = 0,
   isZoomFitWidth,
   zoom = 1,
-  zoomOptions
+  zoomOptions,
+  documentOptions
 }) => {
   const [_, setProgress] = useState(0);
   const [initialState, setInitialState] = useState();
   const [rotation] = useState(initialRotation);
+  const documentOptionsRef = useRef(documentOptions);
+  documentOptionsRef.current = documentOptions;
   useEffect(() => {
     const generateViewports = async (pdf) => {
       const pageProxies = [];
@@ -5136,9 +5392,9 @@ var usePDFDocumentContext = ({
           return viewport;
         })
       );
-      const sortedPageProxies = pageProxies.sort((a, b) => {
-        return a.pageNumber - b.pageNumber;
-      });
+      const sortedPageProxies = pageProxies.toSorted(
+        (a, b) => a.pageNumber - b.pageNumber
+      );
       setInitialState((prev) => ({
         ...prev,
         isZoomFitWidth,
@@ -5158,7 +5414,9 @@ var usePDFDocumentContext = ({
         if (isDisposed) {
           return;
         }
-        loadingTask = getDocument(source);
+        loadingTask = getDocument(
+          buildDocumentInitParams(source, documentOptionsRef.current)
+        );
         loadingTask.onProgress = (progressEvent) => {
           if (progressEvent.loaded === progressEvent.total) {
             return;
@@ -5204,6 +5462,7 @@ var Root = forwardRef(
     isZoomFitWidth,
     zoom,
     zoomOptions,
+    documentOptions,
     ...props
   }, ref) => {
     const { initialState } = usePDFDocumentContext({
@@ -5211,12 +5470,20 @@ var Root = forwardRef(
       onDocumentLoad,
       isZoomFitWidth,
       zoom,
-      zoomOptions
+      zoomOptions,
+      documentOptions
     });
     const linkService = useCreatePDFLinkService(
       initialState?.pdfDocumentProxy ?? null
     );
-    return /* @__PURE__ */ jsx(Primitive.div, { ref, ...props, children: initialState ? /* @__PURE__ */ jsx(PDFStore.Provider, { initialValue: initialState, children: /* @__PURE__ */ jsx(PDFLinkServiceContext.Provider, { value: linkService, children }) }) : loader || "Loading..." });
+    const documentId = initialState?.pdfDocumentProxy.fingerprints[0];
+    useEffect(() => {
+      if (!documentId) return;
+      return () => {
+        renderCache.invalidateDocument(documentId);
+      };
+    }, [documentId]);
+    return /* @__PURE__ */ jsx(Primitive.div, { ref, ...props, children: initialState ? /* @__PURE__ */ jsx(PDFStore.Provider, { initialValue: initialState, children: /* @__PURE__ */ jsx(PDFLinkServiceContext.Provider, { value: linkService, children }) }) : loader ?? "Loading..." });
   }
 );
 Root.displayName = "Root";
@@ -5266,8 +5533,8 @@ var useThumbnail = (pageNumber, config = {}) => {
   const isVisible = isFirstPage || debouncedVisible;
   useEffect(() => {
     const renderThumbnail = async () => {
-      const canvas = canvasRef.current;
-      if (!canvas || !pageProxy) return;
+      const canvas2 = canvasRef.current;
+      if (!canvas2 || !pageProxy) return;
       try {
         if (renderTaskRef.current) {
           renderTaskRef.current.cancel();
@@ -5275,12 +5542,12 @@ var useThumbnail = (pageNumber, config = {}) => {
         const viewport = pageProxy.getViewport({ scale: 1 });
         const scale = Math.min(maxWidth / viewport.width, maxHeight / viewport.height) * (isVisible ? dpr : 0.5);
         const scaledViewport = pageProxy.getViewport({ scale });
-        canvas.width = scaledViewport.width;
-        canvas.height = scaledViewport.height;
-        const context = canvas.getContext("2d");
+        canvas2.width = scaledViewport.width;
+        canvas2.height = scaledViewport.height;
+        const context = canvas2.getContext("2d");
         if (!context) return;
         const renderTask = pageProxy.render({
-          canvas,
+          canvas: canvas2,
           canvasContext: context,
           viewport: scaledViewport
         });
@@ -5295,8 +5562,13 @@ var useThumbnail = (pageNumber, config = {}) => {
       }
     };
     renderThumbnail();
+    const canvas = canvasRef.current;
     return () => {
       renderTaskRef.current?.cancel();
+      if (canvas) {
+        canvas.width = 1;
+        canvas.height = 1;
+      }
     };
   }, [pageProxy, isVisible, dpr, maxHeight, maxWidth]);
   return {
@@ -5375,12 +5647,12 @@ var ZoomOut = ({ ...props }) => {
   );
 };
 var CurrentZoom = ({ ...props }) => {
-  const setRealZoom = usePdf((state) => state.updateZoom);
+  const updateZoom = usePdf((state) => state.updateZoom);
   const realZoom = usePdf((state) => state.zoom);
   const [zoom, setZoom] = useState((realZoom * 100).toFixed(0));
-  const isSelected = useRef(false);
+  const isInputFocused = useRef(false);
   useEffect(() => {
-    if (isSelected.current) {
+    if (isInputFocused.current) {
       return;
     }
     setZoom((realZoom * 100).toFixed(0));
@@ -5391,14 +5663,14 @@ var CurrentZoom = ({ ...props }) => {
       ...props,
       value: zoom,
       onClick: () => {
-        isSelected.current = true;
+        isInputFocused.current = true;
       },
       onChange: (e) => {
-        setRealZoom(Number(e.target.value) / 100);
+        updateZoom(Number(e.target.value) / 100);
         setZoom(e.target.value);
       },
       onBlur: () => {
-        isSelected.current = false;
+        isInputFocused.current = false;
         setZoom((realZoom * 100).toFixed(0));
       }
     }
@@ -5631,4 +5903,7 @@ function mergeAdjacentRects(rects) {
   return merged;
 }
 
-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 };
+// src/hooks/usePageRendered.ts
+var usePageRendered = (pageNumber) => usePdf((state) => !!state.renderedPages[pageNumber]);
+
+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, usePageRendered, usePdf, usePdfJump, useSearch, useSelectionDimensions };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@anaralabs/lector",
-	"version": "3.10.0",
-	"description": "Headless PDF viewer for React",
+	"version": "3.10.2",
+	"description": "A headless PDF viewer for React",
 	"author": "andrewdr (https://github.com/andrewdoro)",
 	"license": "MIT",
 	"type": "module",