@anaralabs/lector 3.9.1 → 3.10.1

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, 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';
-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);
@@ -127,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 });
+      }
     }));
   }
 );
@@ -465,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;
     });
@@ -615,6 +627,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 +701,15 @@ var cancellable = (promise) => {
     }
   };
 };
+
+// src/lib/pdfjs.ts
+var pdfJsPromise = null;
+var loadPdfJs = () => {
+  if (!pdfJsPromise) {
+    pdfJsPromise = import('pdfjs-dist/legacy/build/pdf.mjs');
+  }
+  return pdfJsPromise;
+};
 var usePdfJump = () => {
   const virtualizer = usePdf((state) => state.virtualizer);
   const setHighlight = usePdf((state) => state.setHighlight);
@@ -931,46 +1002,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 +1043,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,34 +1083,177 @@ 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";
+
+// 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 = 30) {
+    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)
@@ -1097,83 +1277,206 @@ 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);
   useLayoutEffect(() => {
     if (!canvasRef.current) {
       return;
     }
-    const baseCanvas = canvasRef.current;
+    if (lastPageProxyRef.current !== pdfPageProxy || lastBackgroundRef.current !== background) {
+      lastPageProxyRef.current = pdfPageProxy;
+      lastBackgroundRef.current = background;
+      lastRenderedScaleRef.current = 0;
+    }
     const baseViewport = pdfPageProxy.getViewport({ scale: 1 });
     const pageWidth = baseViewport.width;
     const pageHeight = baseViewport.height;
+    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";
-    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({
-      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, clampScaleForPage]);
+  }, [
+    pdfPageProxy,
+    background,
+    dpr,
+    zoom,
+    pageNumber,
+    documentId,
+    markPageRendered
+  ]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    return () => {
+      unmarkPageRendered(pageNumber);
+      if (canvas) {
+        canvas.width = 1;
+        canvas.height = 1;
+      }
+    };
+  }, [pageNumber, unmarkPageRendered]);
   return {
     canvasRef
   };
 };
-var MAX_CANVAS_PIXELS2 = 16777216;
-var MAX_CANVAS_DIMENSION2 = 32767;
+
+// 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 DETAIL_RENDER_IDLE_MS = 80;
 var useDetailCanvasLayer = ({
   background,
   baseCanvasRef
@@ -1183,196 +1486,200 @@ 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;
-    if (!detailCanvas) {
-      const parent = baseCanvasRef.current?.parentElement;
-      if (!parent) {
-        return null;
-      }
-      detailCanvas = document.createElement("canvas");
-      parent.appendChild(detailCanvas);
-      detailCanvasRef.current = detailCanvas;
-    }
-    detailCanvas.style.position = "absolute";
-    detailCanvas.style.top = "0";
-    detailCanvas.style.left = "0";
-    detailCanvas.style.pointerEvents = "none";
-    detailCanvas.style.zIndex = "0";
-    return detailCanvas;
-  }, [baseCanvasRef]);
-  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);
-    },
-    []
-  );
   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 = detailCanvasRef.current;
     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 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.cssText = `${detailBaseStyle};display:block;opacity:0`;
+      container.style.cssText = "";
+    };
+    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();
+      const pdfOffsetX = visibleLeft;
+      const pdfOffsetY = visibleTop;
+      const effectiveScale = targetDetailScale;
+      const actualWidth = visibleWidth * effectiveScale;
+      const actualHeight = visibleHeight * effectiveScale;
+      const buffer = document.createElement("canvas");
+      buffer.width = actualWidth;
+      buffer.height = actualHeight;
+      const bufferCtx = buffer.getContext("2d");
+      if (!bufferCtx) {
+        return;
+      }
+      bufferCtx.setTransform(1, 0, 0, 1, 0, 0);
+      const transform = [
+        1,
+        0,
+        0,
+        1,
+        -pdfOffsetX * effectiveScale,
+        -pdfOffsetY * effectiveScale
+      ];
+      const detailViewport = pdfPageProxy.getViewport({
+        scale: effectiveScale
+      });
+      const currentRenderingTask = pdfPageProxy.render({
+        canvas: buffer,
+        canvasContext: bufferCtx,
+        viewport: detailViewport,
+        background,
+        transform
+      });
+      renderingTask = currentRenderingTask;
+      currentRenderingTask.promise.then(() => {
+        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") {
+          return;
+        }
+        throw error;
+      }).finally(() => {
+        if (renderingTask === currentRenderingTask) {
+          renderingTask = null;
+        }
+        buffer.width = 0;
+        buffer.height = 0;
+      });
+    };
+    const scheduleRender = (delay = DETAIL_RENDER_IDLE_MS) => {
+      if (renderTimeoutId !== null) {
+        clearTimeout(renderTimeoutId);
+      }
+      renderingTask?.cancel();
+      renderTimeoutId = setTimeout(() => {
+        renderTimeoutId = null;
+        renderDetailCanvas();
+      }, delay);
+    };
+    const unsubscribe = subscribeToViewportInvalidation(
+      scrollContainer,
+      scheduleRender
+    );
+    if (zoom <= 1 || isPinching) {
+      hideDetailCanvas();
+    } else {
+      scheduleRender(0);
+    }
     return () => {
-      void renderingTask.cancel();
+      unsubscribe();
+      if (renderTimeoutId !== null) {
+        clearTimeout(renderTimeoutId);
+      }
+      void renderingTask?.cancel();
     };
   }, [
     pdfPageProxy,
     zoom,
+    isPinching,
     background,
     dpr,
     viewportRef,
-    ensureDetailCanvas,
-    clampScaleForPage,
-    baseCanvasRef,
-    debouncedScrollTick
+    baseCanvasRef
   ]);
+  useEffect(() => {
+    const canvas = detailCanvasRef.current;
+    return () => {
+      if (canvas) {
+        canvas.width = 1;
+        canvas.height = 1;
+      }
+    };
+  }, []);
   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;
@@ -2082,6 +2389,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();
@@ -2103,13 +2414,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,
       {
@@ -2118,14 +2423,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}%`,
@@ -2138,7 +2442,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;
@@ -2319,25 +2626,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 +2661,7 @@ var useTextLayer = () => {
       isRenderingRef.current = false;
     });
     return () => {
+      isCancelled = true;
       isRenderingRef.current = false;
       if (textLayerRef.current) {
         textLayerRef.current.cancel();
@@ -2362,30 +2678,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,40 +2838,44 @@ var Outline = ({
     });
   }) });
 };
-var Page = ({
-  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: {
-            ...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 = () => {
@@ -2701,6 +3020,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;
@@ -2724,7 +3044,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;
@@ -3177,10 +3501,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();
@@ -4529,11 +4853,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] || {};
@@ -4585,8 +4909,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"
     );
@@ -4594,7 +4918,7 @@ var firstMemo = (first, memo, initializer) => {
   if (first) {
     return initializer();
   }
-  return memo;
+  return memo7;
 };
 
 // src/hooks/viewport/useViewportContainer.tsx
@@ -4726,13 +5050,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;
@@ -4799,12 +5123,43 @@ var useViewportContainer = ({
     origin
   };
 };
+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(
+      "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 = DEFAULT_VIRTUALIZER_OPTIONS,
   initialOffset,
   onOffsetChange,
   ...props
@@ -4824,12 +5179,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,
@@ -4869,9 +5228,7 @@ var Pages = ({
     items
   });
   useFitWidth({ viewportRef: containerRef });
-  const largestPageWidth = usePdf(
-    (state) => Math.max(...state.viewports.map((v) => v.width))
-  );
+  const largestPageWidth = usePdf(selectLargestPageWidth);
   useEffect(() => {
     virtualizer.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
       const size = virtualizer.getSize();
@@ -4931,26 +5288,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
                 );
@@ -4962,17 +5304,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 = [];
@@ -4990,9 +5359,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,
@@ -5006,28 +5375,46 @@ 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(
+          buildDocumentInitParams(source, documentOptionsRef.current)
+        );
+        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
@@ -5042,6 +5429,7 @@ var Root = forwardRef(
     isZoomFitWidth,
     zoom,
     zoomOptions,
+    documentOptions,
     ...props
   }, ref) => {
     const { initialState } = usePDFDocumentContext({
@@ -5049,12 +5437,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";
@@ -5104,8 +5500,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();
@@ -5113,11 +5509,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: canvas2,
           canvasContext: context,
           viewport: scaledViewport
         });
@@ -5132,8 +5529,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 {
@@ -5212,12 +5614,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));
@@ -5228,14 +5630,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));
       }
     }
@@ -5468,4 +5870,7 @@ 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 };
+// 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 };