@anaralabs/lector 3.5.14 → 3.7.0

package/dist/index.js

@@ -1,15 +1,15 @@
 'use client';
 
-import React, { createContext, forwardRef, useRef, useState, useCallback, useContext, useEffect, cloneElement, createRef, useLayoutEffect } from 'react';
+import React, { createContext, forwardRef, useRef, useState, useCallback, useContext, useEffect, cloneElement, createRef, useMemo, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { useFloating, autoUpdate, offset, shift, useDismiss, useInteractions, inline, flip } from '@floating-ui/react';
-import { useVirtualizer, elementScroll, debounce } from '@tanstack/react-virtual';
 import { create, useStore, createStore } from 'zustand';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { AnnotationLayer, TextLayer, getDocument } from 'pdfjs-dist';
 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
 
@@ -146,11 +146,7 @@ var useAnnotationTooltip = ({
   const viewportRef = usePdf((state) => state.viewportRef);
   const scale = usePdf((state) => state.zoom);
   const effectiveIsOpen = (isOpen && isPositionCalculated || controlledIsOpen) ?? false;
-  const {
-    refs,
-    floatingStyles,
-    context
-  } = useFloating({
+  const { refs, floatingStyles, context } = useFloating({
     placement: position,
     open: effectiveIsOpen,
     onOpenChange: (open) => {
@@ -185,7 +181,9 @@ var useAnnotationTooltip = ({
       setIsPositionCalculated(false);
       return;
     }
-    const pageElement = viewportElement.querySelector(`[data-page-number="${annotation.pageNumber}"]`);
+    const pageElement = viewportElement.querySelector(
+      `[data-page-number="${annotation.pageNumber}"]`
+    );
     if (!pageElement) {
       setIsPositionCalculated(false);
       return;
@@ -232,7 +230,14 @@ var useAnnotationTooltip = ({
     if (isNewAnnotation) {
       setIsOpen(true);
     }
-  }, [annotation.highlights, annotation.pageNumber, refs, viewportRef, scale, isNewAnnotation]);
+  }, [
+    annotation.highlights,
+    annotation.pageNumber,
+    refs,
+    viewportRef,
+    scale,
+    isNewAnnotation
+  ]);
   useEffect(() => {
     const viewport = viewportRef.current;
     setIsPositionCalculated(false);
@@ -257,7 +262,7 @@ var useAnnotationTooltip = ({
       }
       window.removeEventListener("resize", handleResize);
     };
-  }, [updateTooltipPosition, viewportRef, scale, controlledIsOpen]);
+  }, [updateTooltipPosition, viewportRef]);
   return {
     isOpen: effectiveIsOpen,
     setIsOpen,
@@ -326,7 +331,13 @@ var AnnotationTooltip = ({
       }
       setHoverIsOpen(true);
     }
-  }, [hoverTooltipContent, setHoverIsOpen]);
+  }, [
+    hoverTooltipContent,
+    setHoverIsOpen,
+    annotation.id,
+    focusedHoverOpenId,
+    focusedOpenId
+  ]);
   const closeTooltip = useCallback(() => {
     if (!isMouseInTooltipRef.current) {
       setHoverIsOpen(false);
@@ -344,7 +355,7 @@ var AnnotationTooltip = ({
       clearTimeout(closeTimeoutRef.current);
       closeTimeoutRef.current = null;
     }
-  }, []);
+  }, [annotation.id, focusedOpenId, focusedHoverOpenId]);
   const handleTooltipMouseLeave = useCallback(() => {
     isMouseInTooltipRef.current = false;
     setHoverIsOpen(false);
@@ -414,10 +425,7 @@ var AnnotationTooltip = ({
 var useAnnotations = create((set) => ({
   annotations: [],
   addAnnotation: (annotation) => set((state) => ({
-    annotations: [
-      ...state.annotations,
-      annotation
-    ]
+    annotations: [...state.annotations, annotation]
   })),
   updateAnnotation: (id, updates) => set((state) => ({
     annotations: state.annotations.map(
@@ -428,7 +436,9 @@ var useAnnotations = create((set) => ({
     )
   })),
   deleteAnnotation: (id) => set((state) => ({
-    annotations: state.annotations.filter((annotation) => annotation.id !== id)
+    annotations: state.annotations.filter(
+      (annotation) => annotation.id !== id
+    )
   })),
   setAnnotations: (annotations) => set({ annotations })
 }));
@@ -545,7 +555,8 @@ var AnnotationHighlightLayer = ({
                   },
                   "data-highlight-id": annotation.id
                 },
-                `highlight-${index}`
+                `highlight-${// biome-ignore lint/suspicious/noArrayIndexKey: <index>
+                index}`
               )),
               annotation.comment && annotation.underlines?.map((rect, index) => /* @__PURE__ */ jsx(
                 "div",
@@ -561,7 +572,8 @@ var AnnotationHighlightLayer = ({
                   },
                   "data-comment-id": annotation.id
                 },
-                `underline-${index}`
+                `underline-${// biome-ignore lint/suspicious/noArrayIndexKey: <index>
+                index}`
               )),
               annotation.comment && commmentIcon && /* @__PURE__ */ jsx(
                 "div",
@@ -627,71 +639,86 @@ var cancellable = (promise) => {
     }
   };
 };
-
-// src/hooks/pages/usePdfJump.tsx
 var usePdfJump = () => {
   const virtualizer = usePdf((state) => state.virtualizer);
   const setHighlight = usePdf((state) => state.setHighlight);
-  const jumpToPage = (pageIndex, options) => {
-    if (!virtualizer) return;
-    const defaultOptions = {
-      align: "start",
-      behavior: "smooth"
-    };
-    const finalOptions = { ...defaultOptions, ...options };
-    virtualizer.scrollToIndex(pageIndex - 1, finalOptions);
-  };
-  const jumpToOffset = (offset3) => {
-    if (!virtualizer) return;
-    virtualizer.scrollToOffset(offset3, {
-      align: "start",
-      behavior: "smooth"
-    });
-  };
-  const scrollToHighlightRects = (rects, type, align = "start", additionalOffset = 0) => {
-    if (!virtualizer) return;
-    const firstPage = Math.min(...rects.map((rect) => rect.pageNumber));
-    const pageOffset = virtualizer.getOffsetForIndex(firstPage - 1, "start");
-    if (pageOffset === null) return;
-    const targetRect = rects.find((rect) => rect.pageNumber === firstPage);
-    if (!targetRect) return;
-    const isNumber = pageOffset?.[0] != null;
-    if (!isNumber) return;
-    const pageStart = pageOffset[0] ?? 0;
-    let rectTop;
-    let rectHeight;
-    if (type === "percent") {
-      const estimatePageHeight = virtualizer.options.estimateSize(
-        firstPage - 1
-      );
-      rectTop = targetRect.top / 100 * estimatePageHeight;
-      rectHeight = targetRect.height / 100 * estimatePageHeight;
-    } else {
-      rectTop = targetRect.top;
-      rectHeight = targetRect.height;
-    }
-    let scrollOffset;
-    if (align === "center") {
-      const viewportHeight = virtualizer.scrollElement?.clientHeight || 0;
-      const rectCenter = pageStart + rectTop + rectHeight / 2;
-      scrollOffset = rectCenter - viewportHeight / 2;
-    } else {
-      scrollOffset = pageStart + rectTop;
-    }
-    scrollOffset += additionalOffset;
-    const adjustedOffset = Math.max(0, scrollOffset);
-    virtualizer.scrollToOffset(adjustedOffset, {
-      align: "start",
-      // Always use start when we've calculated our own centering
-      behavior: "smooth"
-    });
-  };
-  const jumpToHighlightRects = (rects, type, align = "start", additionalOffset = 0) => {
-    if (!virtualizer) return;
-    setHighlight(rects);
-    scrollToHighlightRects(rects, type, align, additionalOffset);
+  const jumpToPage = useCallback(
+    (pageIndex, options) => {
+      if (!virtualizer) return;
+      const defaultOptions = {
+        align: "start",
+        behavior: "smooth"
+      };
+      const finalOptions = { ...defaultOptions, ...options };
+      virtualizer.scrollToIndex(pageIndex - 1, finalOptions);
+    },
+    [virtualizer]
+  );
+  const jumpToOffset = useCallback(
+    (offset3) => {
+      if (!virtualizer) return;
+      virtualizer.scrollToOffset(offset3, {
+        align: "start",
+        behavior: "smooth"
+      });
+    },
+    [virtualizer]
+  );
+  const scrollToHighlightRects = useCallback(
+    (rects, type, align = "start", additionalOffset = 0) => {
+      if (!virtualizer) return;
+      const firstPage = Math.min(...rects.map((rect) => rect.pageNumber));
+      const pageOffset = virtualizer.getOffsetForIndex(firstPage - 1, "start");
+      if (pageOffset === null) return;
+      const targetRect = rects.find((rect) => rect.pageNumber === firstPage);
+      if (!targetRect) return;
+      const isNumber = pageOffset?.[0] != null;
+      if (!isNumber) return;
+      const pageStart = pageOffset[0] ?? 0;
+      let rectTop;
+      let rectHeight;
+      if (type === "percent") {
+        const estimatePageHeight = virtualizer.options.estimateSize(
+          firstPage - 1
+        );
+        rectTop = targetRect.top / 100 * estimatePageHeight;
+        rectHeight = targetRect.height / 100 * estimatePageHeight;
+      } else {
+        rectTop = targetRect.top;
+        rectHeight = targetRect.height;
+      }
+      let scrollOffset;
+      if (align === "center") {
+        const viewportHeight = virtualizer.scrollElement?.clientHeight || 0;
+        const rectCenter = pageStart + rectTop + rectHeight / 2;
+        scrollOffset = rectCenter - viewportHeight / 2;
+      } else {
+        scrollOffset = pageStart + rectTop;
+      }
+      scrollOffset += additionalOffset;
+      const adjustedOffset = Math.max(0, scrollOffset);
+      virtualizer.scrollToOffset(adjustedOffset, {
+        align: "start",
+        // Always use start when we've calculated our own centering
+        behavior: "smooth"
+      });
+    },
+    [virtualizer]
+  );
+  const jumpToHighlightRects = useCallback(
+    (rects, type, align = "start", additionalOffset = 0) => {
+      if (!virtualizer) return;
+      setHighlight(rects);
+      scrollToHighlightRects(rects, type, align, additionalOffset);
+    },
+    [virtualizer, setHighlight, scrollToHighlightRects]
+  );
+  return {
+    jumpToPage,
+    jumpToOffset,
+    jumpToHighlightRects,
+    scrollToHighlightRects
   };
-  return { jumpToPage, jumpToOffset, jumpToHighlightRects, scrollToHighlightRects };
 };
 var LinkService = class {
   _pdfDocumentProxy;
@@ -705,8 +732,6 @@ var LinkService = class {
     }
     return this._pdfDocumentProxy;
   }
-  constructor() {
-  }
   get pagesCount() {
     return this._pdfDocumentProxy?.numPages || 0;
   }
@@ -815,19 +840,14 @@ var LinkService = class {
   get rotation() {
     return 0;
   }
-  set rotation(value) {
+  set rotation(_value) {
   }
-  goToPage(pageNumber) {
-    if (pageNumber >= 1 && pageNumber <= this.pagesCount) {
-      if (this._pageNavigationCallback) {
-        this._pageNavigationCallback(pageNumber);
-      }
-    }
+  goToPage(_page_valuer) {
   }
   setHash(hash) {
     if (hash.startsWith("#page=")) {
       const pageNumber = parseInt(hash.substring(6), 10);
-      if (!isNaN(pageNumber)) {
+      if (!Number.isNaN(pageNumber)) {
         this.goToPage(pageNumber);
       }
     }
@@ -874,7 +894,9 @@ var defaultAnnotationLayerParams = {
   jumpOptions: { behavior: "smooth", align: "start" }
 };
 var useAnnotationLayer = (params) => {
-  const mergedParams = { ...defaultAnnotationLayerParams, ...params };
+  const mergedParams = useMemo(() => {
+    return { ...defaultAnnotationLayerParams, ...params };
+  }, [params]);
   const annotationLayerRef = useRef(null);
   const annotationLayerObjectRef = useRef(null);
   const linkService = usePDFLinkService();
@@ -950,7 +972,7 @@ var useAnnotationLayer = (params) => {
       if (href.startsWith("#page=")) {
         e.preventDefault();
         const pageNumber2 = parseInt(href.substring(6), 10);
-        if (!isNaN(pageNumber2)) {
+        if (!Number.isNaN(pageNumber2)) {
           linkService.goToPage(pageNumber2);
         }
       }
@@ -1060,11 +1082,13 @@ var useDpr = () => {
     return () => {
       windowMatch.removeEventListener("change", handleDPRChange);
     };
-  }, []);
+  }, [dpr]);
   return dpr;
 };
 
 // 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();
@@ -1072,21 +1096,55 @@ var useCanvasLayer = ({ background }) => {
   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);
+    },
+    []
+  );
   useLayoutEffect(() => {
     if (!canvasRef.current) {
       return;
     }
-    const viewport = pdfPageProxy.getViewport({ scale: 1 });
-    const canvas = canvasRef.current;
-    const scale = dpr * zoom;
-    canvas.height = viewport.height * scale;
-    canvas.width = viewport.width * scale;
-    canvas.style.height = `${viewport.height}px`;
-    canvas.style.width = `${viewport.width}px`;
-    const canvasContext = canvas.getContext("2d");
-    canvasContext.scale(scale, scale);
+    const baseCanvas = canvasRef.current;
+    const baseViewport = pdfPageProxy.getViewport({ scale: 1 });
+    const pageWidth = baseViewport.width;
+    const pageHeight = baseViewport.height;
+    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) {
+      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,
+      canvasContext: context,
       viewport,
       background
     });
@@ -1099,32 +1157,211 @@ var useCanvasLayer = ({ background }) => {
     return () => {
       void renderingTask.cancel();
     };
-  }, [pdfPageProxy, dpr, zoom]);
+  }, [pdfPageProxy, background, dpr, zoom, clampScaleForPage]);
   return {
     canvasRef
   };
 };
+var MAX_CANVAS_PIXELS2 = 16777216;
+var MAX_CANVAS_DIMENSION2 = 32767;
+var useDetailCanvasLayer = ({
+  background,
+  baseCanvasRef
+}) => {
+  const containerRef = useRef(null);
+  const detailCanvasRef = useRef(null);
+  const pageNumber = usePDFPageNumber();
+  const dpr = useDpr();
+  const bouncyZoom = usePdf((state) => state.zoom);
+  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) {
+      return;
+    }
+    const detailCanvas = ensureDetailCanvas();
+    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 / 2;
+    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") {
+        return;
+      }
+      throw error;
+    });
+    return () => {
+      void renderingTask.cancel();
+    };
+  }, [
+    pdfPageProxy,
+    zoom,
+    background,
+    dpr,
+    viewportRef,
+    ensureDetailCanvas,
+    clampScaleForPage,
+    baseCanvasRef,
+    debouncedScrollTick
+  ]);
+  return {
+    detailCanvasRef,
+    containerRef
+  };
+};
 var CanvasLayer = ({
   style,
   background,
   ...props
 }) => {
   const { canvasRef } = useCanvasLayer({ background });
-  return /* @__PURE__ */ jsx(
-    "canvas",
-    {
-      style: {
-        ...style,
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%"
-      },
-      ...props,
-      ref: canvasRef
-    }
-  );
+  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 })
+      }
+    )
+  ] });
 };
 
 // src/hooks/useSelectionDimensions.tsx
@@ -1155,9 +1392,15 @@ var consolidateHighlightRects = (rects) => {
     Math.abs(current.left + current.width - next.left) <= current.height * 0.2);
     if (horizontallyConnected) {
       const newLeft = Math.min(current.left, next.left);
-      const newRight = Math.max(current.left + current.width, next.left + next.width);
+      const newRight = Math.max(
+        current.left + current.width,
+        next.left + next.width
+      );
       const newTop = Math.min(current.top, next.top);
-      const newBottom = Math.max(current.top + current.height, next.top + next.height);
+      const newBottom = Math.max(
+        current.top + current.height,
+        next.top + next.height
+      );
       current = {
         left: newLeft,
         top: newTop,
@@ -1375,7 +1618,10 @@ var useSelectionDimensions = () => {
               const nextRect = group[endIndex + 1];
               if (!currentRect || !nextRect) break;
               const gap = nextRect.left - (currentRect.left + currentRect.width);
-              const maxGapAllowed = Math.max(MERGE_THRESHOLD, currentRect.height * 0.3);
+              const maxGapAllowed = Math.max(
+                MERGE_THRESHOLD,
+                currentRect.height * 0.3
+              );
               if (gap <= maxGapAllowed) {
                 endIndex++;
               } else {
@@ -1416,7 +1662,9 @@ var useSelectionDimensions = () => {
     }
     return {
       highlights: highlightRects.sort((a, b) => a.pageNumber - b.pageNumber),
-      underlines: consolidateUnderlines(underlineRects).sort((a, b) => a.pageNumber - b.pageNumber),
+      underlines: consolidateUnderlines(underlineRects).sort(
+        (a, b) => a.pageNumber - b.pageNumber
+      ),
       text: range.toString().trim(),
       isCollapsed: false
     };
@@ -1612,7 +1860,7 @@ var SelectionTooltip = ({ children }) => {
         viewportRef.current.removeEventListener("scroll", handleScroll);
       }
     };
-  }, [refs, isOpen, viewportRef, updateTooltipPosition]);
+  }, [isOpen, viewportRef, updateTooltipPosition]);
   useEffect(() => {
     const handleFloatingClick = (e) => {
       if (refs.floating.current?.contains(e.target)) {
@@ -1824,23 +2072,26 @@ var ColoredHighlightLayer = ({
     (state) => state.coloredHighlights
   );
   const addColoredHighlight = usePdf((state) => state.addColoredHighlight);
-  const handleHighlighting = useCallback((color) => {
-    const dimension = getDimension();
-    if (!dimension) return;
-    const { highlights: highlights2, text } = dimension;
-    if (highlights2[0]) {
-      const highlight = {
-        uuid: v4(),
-        pageNumber: highlights2[0].pageNumber,
-        // usePDFPageNumber() doesn't return the correct page number, so i'm getting the number directly from the first highlight
-        color,
-        rectangles: highlights2,
-        text
-      };
-      addColoredHighlight(highlight);
-      if (onHighlight) onHighlight(highlight);
-    }
-  }, []);
+  const handleHighlighting = useCallback(
+    (color) => {
+      const dimension = getDimension();
+      if (!dimension) return;
+      const { highlights: highlights2, text } = dimension;
+      if (highlights2[0]) {
+        const highlight = {
+          uuid: v4(),
+          pageNumber: highlights2[0].pageNumber,
+          // usePDFPageNumber() doesn't return the correct page number, so i'm getting the number directly from the first highlight
+          color,
+          rectangles: highlights2,
+          text
+        };
+        addColoredHighlight(highlight);
+        if (onHighlight) onHighlight(highlight);
+      }
+    },
+    [onHighlight, getDimension, addColoredHighlight]
+  );
   return /* @__PURE__ */ jsxs("div", { className: "colored-highlights-layer", children: [
     highlights.filter((selection) => selection.pageNumber === pageNumber).map((selection) => /* @__PURE__ */ jsx(
       ColoredHighlightComponent,
@@ -1880,11 +2131,12 @@ var HighlightLayer = forwardRef(({ asChild, className, style, ...props }, ref) =
   const rects = highlights.filter((area) => area.pageNumber === pageNumber);
   if (!rects?.length) return null;
   return /* @__PURE__ */ jsx(Fragment, { children: rects.map((rect, index) => {
-    const { pageNumber: pageNumber2, type, ...coordinates } = rect;
+    const { pageNumber: pageNumber2, type, style: customStyle, ...coordinates } = rect;
     let dimensions = coordinates;
     if (type === "percent") {
       dimensions = convertToPercentString(rect);
     }
+    const customStyles = customStyle ? customStyle(rect) : {};
     return /* @__PURE__ */ jsx(
       Comp,
       {
@@ -1895,7 +2147,8 @@ var HighlightLayer = forwardRef(({ asChild, className, style, ...props }, ref) =
           ...dimensions,
           pointerEvents: "none",
           zIndex: 30,
-          ...style
+          ...style,
+          ...customStyles
         },
         ...props,
         children: props.children
@@ -1932,74 +2185,98 @@ var createTextSelectionManager = () => {
       endDiv.style.height = "";
       textLayer.classList.remove("selecting");
     };
-    document.addEventListener("pointerdown", () => {
-      isPointerDown = true;
-    }, { signal });
-    document.addEventListener("pointerup", () => {
-      isPointerDown = false;
-      textLayers.forEach(reset);
-    }, { signal });
-    window.addEventListener("blur", () => {
-      isPointerDown = false;
-      textLayers.forEach(reset);
-    }, { signal });
-    document.addEventListener("keyup", () => {
-      if (!isPointerDown) {
+    document.addEventListener(
+      "pointerdown",
+      () => {
+        isPointerDown = true;
+      },
+      { signal }
+    );
+    document.addEventListener(
+      "pointerup",
+      () => {
+        isPointerDown = false;
         textLayers.forEach(reset);
-      }
-    }, { signal });
-    document.addEventListener("selectionchange", () => {
-      const selection = document.getSelection();
-      if (!selection || selection.rangeCount === 0) {
+      },
+      { signal }
+    );
+    window.addEventListener(
+      "blur",
+      () => {
+        isPointerDown = false;
         textLayers.forEach(reset);
-        return;
-      }
-      const activeTextLayers = /* @__PURE__ */ new Set();
-      for (let i = 0; i < selection.rangeCount; i++) {
-        const range = selection.getRangeAt(i);
-        for (const textLayerDiv of textLayers.keys()) {
-          if (!activeTextLayers.has(textLayerDiv) && range.intersectsNode(textLayerDiv)) {
-            activeTextLayers.add(textLayerDiv);
+      },
+      { signal }
+    );
+    document.addEventListener(
+      "keyup",
+      () => {
+        if (!isPointerDown) {
+          textLayers.forEach(reset);
+        }
+      },
+      { signal }
+    );
+    document.addEventListener(
+      "selectionchange",
+      () => {
+        const selection = document.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+          textLayers.forEach(reset);
+          return;
+        }
+        const activeTextLayers = /* @__PURE__ */ new Set();
+        for (let i = 0; i < selection.rangeCount; i++) {
+          const range = selection.getRangeAt(i);
+          for (const textLayerDiv of textLayers.keys()) {
+            if (!activeTextLayers.has(textLayerDiv) && range.intersectsNode(textLayerDiv)) {
+              activeTextLayers.add(textLayerDiv);
+            }
           }
         }
-      }
-      for (const [textLayerDiv, endDiv] of textLayers) {
-        if (activeTextLayers.has(textLayerDiv)) {
-          textLayerDiv.classList.add("selecting");
-        } else {
-          reset(endDiv, textLayerDiv);
+        for (const [textLayerDiv, endDiv] of textLayers) {
+          if (activeTextLayers.has(textLayerDiv)) {
+            textLayerDiv.classList.add("selecting");
+          } else {
+            reset(endDiv, textLayerDiv);
+          }
         }
-      }
-      if (isFirefox === void 0) {
-        const firstTextLayer = textLayers.keys().next().value;
-        if (firstTextLayer) {
-          isFirefox = getComputedStyle(firstTextLayer).getPropertyValue("-moz-user-select") === "none";
+        if (isFirefox === void 0) {
+          const firstTextLayer = textLayers.keys().next().value;
+          if (firstTextLayer) {
+            isFirefox = getComputedStyle(firstTextLayer).getPropertyValue(
+              "-moz-user-select"
+            ) === "none";
+          }
         }
-      }
-      if (isFirefox) {
-        return;
-      }
-      try {
-        const range = selection.getRangeAt(0);
-        const modifyStart = prevRange && (range.compareBoundaryPoints(Range.END_TO_END, prevRange) === 0 || range.compareBoundaryPoints(Range.START_TO_END, prevRange) === 0);
-        let anchor = modifyStart ? range.startContainer : range.endContainer;
-        if (anchor.nodeType === Node.TEXT_NODE) {
-          anchor = anchor.parentNode;
+        if (isFirefox) {
+          return;
         }
-        const parentTextLayer = anchor.parentElement?.closest(".textLayer");
-        const endDiv = textLayers.get(parentTextLayer);
-        if (endDiv && parentTextLayer) {
-          endDiv.style.width = parentTextLayer.style.width;
-          endDiv.style.height = parentTextLayer.style.height;
-          const insertTarget = modifyStart ? anchor : anchor.nextSibling;
-          if (anchor.parentElement && insertTarget) {
-            anchor.parentElement.insertBefore(endDiv, insertTarget);
+        try {
+          const range = selection.getRangeAt(0);
+          const modifyStart = prevRange && (range.compareBoundaryPoints(Range.END_TO_END, prevRange) === 0 || range.compareBoundaryPoints(Range.START_TO_END, prevRange) === 0);
+          let anchor = modifyStart ? range.startContainer : range.endContainer;
+          if (anchor.nodeType === Node.TEXT_NODE) {
+            anchor = anchor.parentNode;
+          }
+          const parentTextLayer = anchor.parentElement?.closest(
+            ".textLayer"
+          );
+          const endDiv = textLayers.get(parentTextLayer);
+          if (endDiv && parentTextLayer) {
+            endDiv.style.width = parentTextLayer.style.width;
+            endDiv.style.height = parentTextLayer.style.height;
+            const insertTarget = modifyStart ? anchor : anchor.nextSibling;
+            if (anchor.parentElement && insertTarget) {
+              anchor.parentElement.insertBefore(endDiv, insertTarget);
+            }
           }
+          prevRange = range.cloneRange();
+        } catch {
         }
-        prevRange = range.cloneRange();
-      } catch {
-      }
-    }, { signal });
+      },
+      { signal }
+    );
   };
   const bindMouseEvents2 = (textLayerDiv, endOfContent) => {
     if (textLayerDiv._textSelectionBound) {
@@ -2069,7 +2346,7 @@ var useTextLayer = () => {
         delete textContainer._cleanupTextSelection;
       }
     };
-  }, [pdfPageProxy.pageNumber]);
+  }, [pdfPageProxy.streamTextContent, pdfPageProxy.getViewport]);
   return {
     textContainerRef,
     pageNumber: pdfPageProxy.pageNumber
@@ -2093,7 +2370,7 @@ var TextLayer2 = ({
       },
       ...props,
       ...{
-        ["data-page-number"]: pageNumber
+        "data-page-number": pageNumber
       },
       ref: textContainerRef
     }
@@ -2216,6 +2493,7 @@ var OutlineItem = ({
           level: level + 1,
           item: item2,
           outlineItem,
+          // biome-ignore lint/suspicious/noArrayIndexKey: <stuff>
           key: index
         })
       )
@@ -2227,7 +2505,7 @@ var Outline = ({
   ...props
 }) => {
   const outline = usePDFOutline();
-  return /* @__PURE__ */ jsx(Primitive.ul, { ...props, children: outline && outline.map((item, idx) => {
+  return /* @__PURE__ */ jsx(Primitive.ul, { ...props, children: outline?.map((item, idx) => {
     return cloneElement(children, {
       key: idx,
       item,
@@ -2299,7 +2577,9 @@ var CurrentPage = ({ ...props }) => {
       onChange: (e) => {
         setPageNumber(e.target.value);
       },
-      onClick: () => isSelected.current = true,
+      onClick: () => {
+        isSelected.current = true;
+      },
       onBlur: (e) => {
         if (currentPage !== Number(e.target.value)) {
           jumpToPage(Number(e.target.value), {
@@ -2348,7 +2628,7 @@ var useFitWidth = ({ viewportRef }) => {
   }, [store, updateZoom, viewportRef, viewports, zoomOptions]);
   return null;
 };
-var supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
+var supportsScrollend = typeof window === "undefined" ? true : "onscrollend" in window;
 var addEventListenerOptions = {
   passive: true
 };
@@ -2373,7 +2653,7 @@ var useObserveElement = () => {
     );
     const createHandler = (isScrolling) => () => {
       const { horizontal, isRtl } = instance.options;
-      offset3 = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
+      offset3 = horizontal ? element.scrollLeft * (isRtl && -1 || 1) : element.scrollTop;
       const zoom = store.getState().zoom;
       offset3 = offset3 / zoom;
       fallback();
@@ -4333,6 +4613,7 @@ var useViewportContainer = ({
       }
       const { zoom: zoom2, translateX, translateY } = transformations.current;
       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`;
@@ -4354,10 +4635,7 @@ var useViewportContainer = ({
       zoom
     };
     updateTransform();
-  }, [containerRef, zoom]);
-  useLayoutEffect(() => {
-    updateTransform();
-  }, []);
+  }, [containerRef, zoom, updateTransform]);
   useEffect(() => {
     const preventDefault = (e) => e.preventDefault();
     document.addEventListener("gesturestart", preventDefault);
@@ -4366,13 +4644,17 @@ var useViewportContainer = ({
       document.removeEventListener("gesturestart", preventDefault);
       document.removeEventListener("gesturechange", preventDefault);
     };
-  });
+  }, []);
   useGesture(
     {
       onPinch: ({ origin: origin2, first, movement: [ms], memo }) => {
+        const currentElement = elementRef.current;
+        const currentContainer = containerRef.current;
+        if (!currentElement || !currentContainer) return;
+        if (!elementRef.current || !containerRef.current) return;
         const newMemo = firstMemo(first, memo, () => {
-          const elementRect = elementRef.current.getBoundingClientRect();
-          const containerRect = containerRef.current.getBoundingClientRect();
+          const elementRect = currentElement.getBoundingClientRect();
+          const containerRect = currentContainer.getBoundingClientRect();
           const contentPosition = [
             origin2[0] - elementRect.left,
             origin2[1] - elementRect.top
@@ -4420,7 +4702,7 @@ var EXTRA_HEIGHT = 0;
 var Pages = ({
   children,
   gap = 10,
-  virtualizerOptions = { overscan: 3 },
+  virtualizerOptions = { overscan: 2 },
   initialOffset,
   onOffsetChange,
   ...props
@@ -4478,7 +4760,7 @@ var Pages = ({
     return () => {
       clearTimeout(timeout);
     };
-  }, [isPinching]);
+  }, [isPinching, virtualizer?.measure, virtualizer?.getVirtualItems]);
   const virtualizerItems = virtualizer?.getVirtualItems() ?? [];
   const items = tempItems.length ? tempItems : virtualizerItems;
   useVisiblePage({
@@ -4488,7 +4770,6 @@ var Pages = ({
   const largestPageWidth = usePdf(
     (state) => Math.max(...state.viewports.map((v) => v.width))
   );
-  const zoom = usePdf((state) => state.zoom);
   useEffect(() => {
     virtualizer.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
       const size = virtualizer.getSize();
@@ -4508,7 +4789,7 @@ var Pages = ({
       ) : virtualizer.scrollElement[scrollSizeProp] : 0;
       return Math.max(toOffset, 0);
     };
-  }, [zoom, virtualizer]);
+  }, [virtualizer]);
   return /* @__PURE__ */ jsx(
     Primitive.div,
     {
@@ -4545,7 +4826,7 @@ var Pages = ({
                 margin: "0 auto"
               },
               children: items.map((virtualItem) => {
-                const innerBoxWidth = viewports && viewports[virtualItem.index] ? viewports[virtualItem.index]?.width : 0;
+                const innerBoxWidth = viewports?.[virtualItem.index] ? viewports[virtualItem.index]?.width : 0;
                 if (!innerBoxWidth) return null;
                 return /* @__PURE__ */ jsx(
                   "div",
@@ -4749,7 +5030,7 @@ var useThumbnail = (pageNumber, config = {}) => {
     return () => {
       renderTaskRef.current?.cancel();
     };
-  }, [pageNumber, pageProxy, isVisible, dpr, maxHeight, maxWidth]);
+  }, [pageProxy, isVisible, dpr, maxHeight, maxWidth]);
   return {
     canvasRef,
     containerRef,
@@ -4806,7 +5087,7 @@ var ZoomIn = ({ ...props }) => {
     {
       ...props,
       onClick: (e) => {
-        props.onClick && props.onClick(e);
+        props.onClick?.(e);
         setZoom((zoom) => Number((zoom + 0.1).toFixed(1)));
       }
     }
@@ -4819,7 +5100,7 @@ var ZoomOut = ({ ...props }) => {
     {
       ...props,
       onClick: (e) => {
-        props.onClick && props.onClick(e);
+        props.onClick?.(e);
         setZoom((zoom) => Number((zoom - 0.1).toFixed(1)));
       }
     }
@@ -4841,7 +5122,9 @@ var CurrentZoom = ({ ...props }) => {
     {
       ...props,
       value: zoom,
-      onClick: () => isSelected.current = true,
+      onClick: () => {
+        isSelected.current = true;
+      },
       onChange: (e) => {
         setRealZoom(Number(e.target.value) / 100);
         setZoom(e.target.value);
@@ -4884,59 +5167,65 @@ var useSearch = () => {
     fuzzyMatches: [],
     hasMoreResults: false
   });
-  const findExactMatches = (searchText, text, pageNumber, textSize) => {
-    const results = [];
-    const textLower = text.toLowerCase();
-    const searchLower = searchText.toLowerCase();
-    let index = 0;
-    while (true) {
-      const matchIndex = textLower.indexOf(searchLower, index);
-      if (matchIndex === -1) break;
-      results.push({
-        pageNumber,
-        text: text.substr(matchIndex, searchText.length + textSize),
-        score: 1,
-        matchIndex,
-        isExactMatch: true,
-        searchText
-      });
-      index = matchIndex + searchText.length;
-    }
-    return results;
-  };
-  const findFuzzyMatches = (searchText, text, pageNumber, threshold, excludeIndices, textSize) => {
-    const results = [];
-    const textLower = text.toLowerCase();
-    const searchLower = searchText.toLowerCase();
-    let index = 0;
-    while (index < textLower.length) {
-      if (excludeIndices.has(index)) {
-        index++;
-        continue;
-      }
-      const chunk = textLower.substr(index, searchLower.length + 10);
-      const distance = levenshteinDistance(
-        searchLower,
-        chunk.substr(0, searchLower.length)
-      );
-      const maxDistance = Math.floor(searchLower.length * (1 - threshold));
-      if (distance <= maxDistance && distance > 0) {
-        const score = 1 - distance / searchLower.length;
+  const findExactMatches = useCallback(
+    (searchText, text, pageNumber, textSize) => {
+      const results = [];
+      const textLower = text.toLowerCase();
+      const searchLower = searchText.toLowerCase();
+      let index = 0;
+      while (true) {
+        const matchIndex = textLower.indexOf(searchLower, index);
+        if (matchIndex === -1) break;
         results.push({
           pageNumber,
-          text: text.substr(index, searchLower.length + textSize),
-          score,
-          matchIndex: index,
-          isExactMatch: false,
+          text: text.substr(matchIndex, searchText.length + textSize),
+          score: 1,
+          matchIndex,
+          isExactMatch: true,
           searchText
         });
-        index += searchLower.length;
-      } else {
-        index++;
+        index = matchIndex + searchText.length;
       }
-    }
-    return results;
-  };
+      return results;
+    },
+    []
+  );
+  const findFuzzyMatches = useCallback(
+    (searchText, text, pageNumber, threshold, excludeIndices, textSize) => {
+      const results = [];
+      const textLower = text.toLowerCase();
+      const searchLower = searchText.toLowerCase();
+      let index = 0;
+      while (index < textLower.length) {
+        if (excludeIndices.has(index)) {
+          index++;
+          continue;
+        }
+        const chunk = textLower.substr(index, searchLower.length + 10);
+        const distance = levenshteinDistance(
+          searchLower,
+          chunk.substr(0, searchLower.length)
+        );
+        const maxDistance = Math.floor(searchLower.length * (1 - threshold));
+        if (distance <= maxDistance && distance > 0) {
+          const score = 1 - distance / searchLower.length;
+          results.push({
+            pageNumber,
+            text: text.substr(index, searchLower.length + textSize),
+            score,
+            matchIndex: index,
+            isExactMatch: false,
+            searchText
+          });
+          index += searchLower.length;
+        } else {
+          index++;
+        }
+      }
+      return results;
+    },
+    []
+  );
   const search = useCallback(
     (searchText, options = {}) => {
       const { threshold = 0.7, limit = 10, textSize = 100 } = options;
@@ -4989,7 +5278,7 @@ var useSearch = () => {
       setSearchResults(limitedResults);
       return limitedResults;
     },
-    [textContent]
+    [textContent, findExactMatches, findFuzzyMatches]
   );
   return {
     textContent,