pdfjs-reader-core 0.5.10 → 0.5.12

package/dist/index.d.cts

@@ -2031,6 +2031,22 @@ interface EngineDeps {
      * visually in a narration context. Default: 3500ms.
      */
     minOverlayDurationMs?: number;
+    /**
+     * When true, only ONE annotation overlay is on-screen at any time: every
+     * new overlay-emitting step first clears all prior overlays and their
+     * auto-removal timers.
+     *
+     * Defaults to `isIOSMobile()` — on iOS Safari/WebKit, stacking 2-3 overlays
+     * (e.g. highlight + box + underline + callout) on the same anchor is the
+     * single biggest remaining crash vector we've measured. The GPU
+     * compositor rejects the layer combination long before the canvas cap
+     * kicks in. Dropping to one overlay at a time sacrifices overlay chaining
+     * on iOS for a hard stability guarantee.
+     *
+     * Pass `false` explicitly to force multi-overlay mode even on iOS (e.g.
+     * for tests or a deliberate opt-out in the consumer).
+     */
+    singleActiveOverlay?: boolean;
 }
 declare class StoryboardEngine {
     private deps;
@@ -2049,6 +2065,13 @@ declare class StoryboardEngine {
      */
     private overlayRemovalTimers;
     private currentStoryboardId;
+    /**
+     * Resolved value of `deps.singleActiveOverlay`. Cached at construction so
+     * each step dispatch is a single branch rather than a per-call
+     * userAgent sniff, and so the policy stays stable for the engine's
+     * lifetime (a viewport flip that recreates the engine will re-evaluate).
+     */
+    private readonly singleActiveOverlay;
     constructor(deps: EngineDeps);
     /**
      * Execute a new storyboard. Cancels in-flight steps from the previous storyboard

package/dist/index.d.ts

@@ -2031,6 +2031,22 @@ interface EngineDeps {
      * visually in a narration context. Default: 3500ms.
      */
     minOverlayDurationMs?: number;
+    /**
+     * When true, only ONE annotation overlay is on-screen at any time: every
+     * new overlay-emitting step first clears all prior overlays and their
+     * auto-removal timers.
+     *
+     * Defaults to `isIOSMobile()` — on iOS Safari/WebKit, stacking 2-3 overlays
+     * (e.g. highlight + box + underline + callout) on the same anchor is the
+     * single biggest remaining crash vector we've measured. The GPU
+     * compositor rejects the layer combination long before the canvas cap
+     * kicks in. Dropping to one overlay at a time sacrifices overlay chaining
+     * on iOS for a hard stability guarantee.
+     *
+     * Pass `false` explicitly to force multi-overlay mode even on iOS (e.g.
+     * for tests or a deliberate opt-out in the consumer).
+     */
+    singleActiveOverlay?: boolean;
 }
 declare class StoryboardEngine {
     private deps;
@@ -2049,6 +2065,13 @@ declare class StoryboardEngine {
      */
     private overlayRemovalTimers;
     private currentStoryboardId;
+    /**
+     * Resolved value of `deps.singleActiveOverlay`. Cached at construction so
+     * each step dispatch is a single branch rather than a per-call
+     * userAgent sniff, and so the policy stays stable for the engine's
+     * lifetime (a viewport flip that recreates the engine will re-evaluate).
+     */
+    private readonly singleActiveOverlay;
     constructor(deps: EngineDeps);
     /**
      * Execute a new storyboard. Cancels in-flight steps from the previous storyboard

package/dist/index.js

@@ -1879,6 +1879,15 @@ function detectDeviceCapabilities() {
     screenSize
   };
 }
+function isIOSMobile() {
+  if (typeof window === "undefined" || typeof navigator === "undefined") {
+    return false;
+  }
+  const ua = navigator.userAgent || "";
+  if (/iPhone|iPad|iPod/i.test(ua)) return true;
+  const isAppleTouch = /Mac/i.test(ua) && typeof navigator.maxTouchPoints === "number" && navigator.maxTouchPoints > 1;
+  return isAppleTouch;
+}
 function getRenderConfig(quality = "auto", capabilities) {
   const caps = capabilities ?? detectDeviceCapabilities();
   if (quality === "auto") {
@@ -1893,8 +1902,10 @@ function getRenderConfig(quality = "auto", capabilities) {
   switch (quality) {
     case "low":
       return {
-        canvasScaleFactor: Math.min(1, caps.devicePixelRatio * 0.5),
-        maxCanvasDimension: 2048,
+        canvasScaleFactor: caps.devicePixelRatio,
+        // 3072² ≈ 9 MP — fits a full-DPR US Letter (DPR=3 → 1836×2376) at
+        // default scale and caps at deep zoom on memory-constrained iPhones.
+        maxCanvasDimension: 3072,
         overscanPages: 1,
         maxPagesInMemory: 3,
         scrollDebounceMs: 100,
@@ -1907,7 +1918,8 @@ function getRenderConfig(quality = "auto", capabilities) {
       };
     case "medium":
       return {
-        canvasScaleFactor: Math.min(1.5, caps.devicePixelRatio * 0.75),
+        canvasScaleFactor: caps.devicePixelRatio,
+        // 4096² ≈ 16 MP — within iOS Safari per-canvas budget across versions.
         maxCanvasDimension: 4096,
         overscanPages: 2,
         maxPagesInMemory: 5,
@@ -5181,9 +5193,37 @@ var init_ThumbnailPanel = __esm({
       onClick,
       scale
     }) {
+      const buttonRef = useRef7(null);
       const canvasRef = useRef7(null);
       const [isRendered, setIsRendered] = useState6(false);
+      const [shouldRender, setShouldRender] = useState6(false);
       useEffect9(() => {
+        if (shouldRender) return;
+        const el = buttonRef.current;
+        if (!el) return;
+        if (typeof IntersectionObserver === "undefined") {
+          setShouldRender(true);
+          return;
+        }
+        const observer = new IntersectionObserver(
+          (entries) => {
+            for (const entry of entries) {
+              if (entry.isIntersecting) {
+                setShouldRender(true);
+                observer.disconnect();
+                break;
+              }
+            }
+          },
+          // 200px root margin so the page is fetched just before it scrolls
+          // into view, hiding the render latency.
+          { rootMargin: "200px" }
+        );
+        observer.observe(el);
+        return () => observer.disconnect();
+      }, [shouldRender]);
+      useEffect9(() => {
+        if (!shouldRender) return;
         let cancelled = false;
         const renderThumbnail = async () => {
           const canvas = canvasRef.current;
@@ -5217,10 +5257,11 @@ var init_ThumbnailPanel = __esm({
         return () => {
           cancelled = true;
         };
-      }, [document2, pageNumber, scale]);
+      }, [document2, pageNumber, scale, shouldRender]);
       return /* @__PURE__ */ jsxs3(
         "button",
         {
+          ref: buttonRef,
           onClick,
           className: cn(
             "thumbnail-item",
@@ -9443,6 +9484,11 @@ var init_VirtualizedDocumentContainer = __esm({
         selectHighlight,
         activeColor
       } = useHighlights();
+      const [defaultDims, setDefaultDims] = useState19({
+        width: DEFAULT_PAGE_WIDTH2,
+        height: DEFAULT_PAGE_HEIGHT2
+      });
+      const [dimsVersion, setDimsVersion] = useState19(0);
       useEffect20(() => {
         if (document2 !== documentRef.current) {
           documentRef.current = document2;
@@ -9451,39 +9497,47 @@ var init_VirtualizedDocumentContainer = __esm({
           setPageObjects(/* @__PURE__ */ new Map());
         }
       }, [document2]);
+      useEffect20(() => {
+        pageDimensionsCache.current.clear();
+        setDimsVersion((v) => v + 1);
+      }, [rotation]);
       useEffect20(() => {
         if (!document2 || numPages === 0) return;
-        const calculatePageInfos = async () => {
-          const infos = [];
-          let currentTop = 0;
-          for (let i = 1; i <= numPages; i++) {
-            let dimensions = pageDimensionsCache.current.get(i);
-            if (!dimensions) {
-              try {
-                const page = pageCache.current.get(i) || await document2.getPage(i);
-                if (!pageCache.current.has(i)) {
-                  pageCache.current.set(i, page);
-                }
-                const viewport = page.getViewport({ scale: 1, rotation });
-                dimensions = { width: viewport.width, height: viewport.height };
-                pageDimensionsCache.current.set(i, dimensions);
-              } catch {
-                dimensions = { width: DEFAULT_PAGE_WIDTH2, height: DEFAULT_PAGE_HEIGHT2 };
-              }
-            }
-            const scaledHeight = Math.floor(dimensions.height * scale);
-            infos.push({
-              pageNumber: i,
-              top: currentTop,
-              height: scaledHeight
-            });
-            currentTop += scaledHeight + pageGap;
+        let cancelled = false;
+        (async () => {
+          try {
+            const page = pageCache.current.get(1) ?? await document2.getPage(1);
+            if (cancelled) return;
+            pageCache.current.set(1, page);
+            const viewport = page.getViewport({ scale: 1, rotation });
+            const dims = { width: viewport.width, height: viewport.height };
+            pageDimensionsCache.current.set(1, dims);
+            setDefaultDims(dims);
+            setDimsVersion((v) => v + 1);
+          } catch {
           }
-          setPageInfos(infos);
-          setTotalHeight(currentTop - pageGap);
+        })();
+        return () => {
+          cancelled = true;
         };
-        calculatePageInfos();
-      }, [document2, numPages, scale, rotation, pageGap]);
+      }, [document2, numPages, rotation]);
+      useEffect20(() => {
+        if (!document2 || numPages === 0) {
+          setPageInfos([]);
+          setTotalHeight(0);
+          return;
+        }
+        const infos = [];
+        let currentTop = 0;
+        for (let i = 1; i <= numPages; i++) {
+          const dimensions = pageDimensionsCache.current.get(i) ?? defaultDims;
+          const scaledHeight = Math.floor(dimensions.height * scale);
+          infos.push({ pageNumber: i, top: currentTop, height: scaledHeight });
+          currentTop += scaledHeight + pageGap;
+        }
+        setPageInfos(infos);
+        setTotalHeight(Math.max(0, currentTop - pageGap));
+      }, [document2, numPages, scale, rotation, pageGap, defaultDims, dimsVersion]);
       const updateVisiblePages = useCallback30(() => {
         if (!scrollContainerRef.current || pageInfos.length === 0) return;
         const container = scrollContainerRef.current;
@@ -9531,6 +9585,7 @@ var init_VirtualizedDocumentContainer = __esm({
         const loadPages = async () => {
           const newPageObjects = new Map(pageObjects);
           let hasChanges = false;
+          let dimsChanged = false;
           for (const pageNum of visiblePages) {
             if (!newPageObjects.has(pageNum)) {
               try {
@@ -9541,6 +9596,14 @@ var init_VirtualizedDocumentContainer = __esm({
                 }
                 newPageObjects.set(pageNum, page);
                 hasChanges = true;
+                if (!pageDimensionsCache.current.has(pageNum)) {
+                  const vp = page.getViewport({ scale: 1, rotation });
+                  pageDimensionsCache.current.set(pageNum, {
+                    width: vp.width,
+                    height: vp.height
+                  });
+                  dimsChanged = true;
+                }
               } catch (error) {
                 const errorMessage = error instanceof Error ? error.message : String(error);
                 const isDocumentDestroyed = errorMessage.includes("destroyed") || errorMessage.includes("sendWithStream") || errorMessage.includes("sendWithPromise") || errorMessage.includes("Cannot read properties of null");
@@ -9560,9 +9623,12 @@ var init_VirtualizedDocumentContainer = __esm({
           if (hasChanges) {
             setPageObjects(newPageObjects);
           }
+          if (dimsChanged) {
+            setDimsVersion((v) => v + 1);
+          }
         };
         loadPages();
-      }, [document2, visiblePages, pageObjects]);
+      }, [document2, visiblePages, pageObjects, rotation]);
       useEffect20(() => {
         if (!scrollToPageRequest || !scrollContainerRef.current || pageInfos.length === 0) return;
         const { page, requestId, behavior } = scrollToPageRequest;
@@ -10127,10 +10193,10 @@ var init_DualPageContainer = __esm({
 });
 
 // src/components/PDFViewer/BookModeContainer.tsx
-import React, { memo as memo26, useEffect as useEffect22, useState as useState21, useRef as useRef19, useCallback as useCallback32 } from "react";
+import React, { memo as memo26, useEffect as useEffect22, useMemo as useMemo14, useState as useState21, useRef as useRef19, useCallback as useCallback32 } from "react";
 import HTMLFlipBook from "react-pageflip";
 import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
-var BookPage, BookModeContainer;
+var BOOK_MODE_OVERSCAN, BookPage, BookModeContainer;
 var init_BookModeContainer = __esm({
   "src/components/PDFViewer/BookModeContainer.tsx"() {
     "use strict";
@@ -10138,6 +10204,7 @@ var init_BookModeContainer = __esm({
     init_PDFLoadingScreen2();
     init_hooks();
     init_utils();
+    BOOK_MODE_OVERSCAN = 4;
     BookPage = React.forwardRef(function BookPage2({ pageNumber, page, scale, rotation, width, height }, ref) {
       return /* @__PURE__ */ jsx27("div", { ref, className: "book-page", "data-page-number": pageNumber, children: /* @__PURE__ */ jsx27("div", { style: { width, height, overflow: "hidden" }, children: /* @__PURE__ */ jsx27(
         PDFPage,
@@ -10170,9 +10237,10 @@ var init_BookModeContainer = __esm({
       } = usePDFViewer();
       const scrollToPageRequest = useViewerStore((s) => s.scrollToPageRequest);
       const { viewerStore } = usePDFViewerStores();
-      const [pages, setPages] = useState21([]);
+      const [pages, setPages] = useState21(/* @__PURE__ */ new Map());
       const [rawPageDims, setRawPageDims] = useState21({ width: 612, height: 792 });
-      const [isLoadingPages, setIsLoadingPages] = useState21(false);
+      const [hasFirstPage, setHasFirstPage] = useState21(false);
+      const pageRequestsRef = useRef19(/* @__PURE__ */ new Set());
       const containerRef = useRef19(null);
       const [containerSize, setContainerSize] = useState21({ width: 0, height: 0 });
       const flipBookRef = useRef19(null);
@@ -10189,41 +10257,67 @@ var init_BookModeContainer = __esm({
         return () => ro.disconnect();
       }, []);
       useEffect22(() => {
-        if (!document2) {
-          setPages([]);
-          return;
-        }
+        setPages(/* @__PURE__ */ new Map());
+        pageRequestsRef.current.clear();
+        setHasFirstPage(false);
+      }, [document2]);
+      useEffect22(() => {
+        if (!document2 || numPages === 0) return;
+        const start = Math.max(1, currentPage - BOOK_MODE_OVERSCAN);
+        const end = Math.min(numPages, currentPage + BOOK_MODE_OVERSCAN);
+        const isFirstLoad = !hasFirstPage;
         let cancelled = false;
-        const loadAllPages = async () => {
-          setIsLoadingPages(true);
-          try {
-            const pagePromises = [];
-            for (let i = 1; i <= numPages; i++) {
-              pagePromises.push(document2.getPage(i));
+        const wanted = [];
+        if (isFirstLoad && !pages.has(1) && !pageRequestsRef.current.has(1)) {
+          wanted.push(1);
+          pageRequestsRef.current.add(1);
+        }
+        for (let i = start; i <= end; i++) {
+          if (pages.has(i) || pageRequestsRef.current.has(i)) continue;
+          wanted.push(i);
+          pageRequestsRef.current.add(i);
+        }
+        if (wanted.length === 0) return;
+        (async () => {
+          const results = await Promise.allSettled(
+            wanted.map((i) => document2.getPage(i).then((p) => [i, p]))
+          );
+          if (cancelled) return;
+          const next = new Map(pages);
+          let firstPageJustLoaded = null;
+          for (const r of results) {
+            if (r.status === "fulfilled") {
+              const [i, page] = r.value;
+              next.set(i, page);
+              if (i === 1) firstPageJustLoaded = page;
             }
-            const results = await Promise.allSettled(pagePromises);
-            if (!cancelled) {
-              const loaded2 = results.map((r) => r.status === "fulfilled" ? r.value : null);
-              setPages(loaded2);
-              const firstPage = loaded2[0];
-              if (firstPage) {
-                const vp = firstPage.getViewport({ scale: 1, rotation });
-                setRawPageDims({ width: vp.width, height: vp.height });
-              }
+          }
+          for (const i of next.keys()) {
+            if (i !== 1 && (i < start || i > end)) {
+              next.delete(i);
             }
-          } catch {
-          } finally {
-            if (!cancelled) setIsLoadingPages(false);
           }
-        };
-        loadAllPages();
+          setPages(next);
+          if (firstPageJustLoaded) {
+            const vp = firstPageJustLoaded.getViewport({ scale: 1, rotation });
+            setRawPageDims({ width: vp.width, height: vp.height });
+            setHasFirstPage(true);
+          }
+          for (const i of wanted) {
+            pageRequestsRef.current.delete(i);
+          }
+        })();
         return () => {
           cancelled = true;
+          for (const i of wanted) {
+            pageRequestsRef.current.delete(i);
+          }
         };
-      }, [document2, numPages, rotation]);
+      }, [document2, numPages, currentPage, rotation, pages, hasFirstPage]);
       useEffect22(() => {
-        if (pages[0]) {
-          const vp = pages[0].getViewport({ scale: 1, rotation });
+        const firstPage = pages.get(1);
+        if (firstPage) {
+          const vp = firstPage.getViewport({ scale: 1, rotation });
           setRawPageDims({ width: vp.width, height: vp.height });
         }
       }, [pages, rotation]);
@@ -10274,8 +10368,28 @@ var init_BookModeContainer = __esm({
         sepia: "bg-amber-50"
       };
       const themeClass = theme === "dark" ? "dark" : theme === "sepia" ? "sepia" : "";
-      const ready = !!document2 && !isLoadingPages && pages.length > 0;
+      const ready = !!document2 && hasFirstPage;
       const hasContainer = containerSize.width > 0 && containerSize.height > 0;
+      const pageChildren = useMemo14(() => {
+        if (numPages === 0) return null;
+        const out = new Array(numPages);
+        for (let i = 0; i < numPages; i++) {
+          const pageNumber = i + 1;
+          out[i] = /* @__PURE__ */ jsx27(
+            BookPage,
+            {
+              pageNumber,
+              page: pages.get(pageNumber) ?? null,
+              scale: renderScale,
+              rotation,
+              width: displayWidth,
+              height: displayHeight
+            },
+            pageNumber
+          );
+        }
+        return out;
+      }, [numPages, pages, renderScale, rotation, displayWidth, displayHeight]);
       return /* @__PURE__ */ jsxs23(
         "div",
         {
@@ -10325,18 +10439,7 @@ var init_BookModeContainer = __esm({
                 autoSize: false,
                 renderOnlyPageLengthChange: false,
                 disableFlipByClick: false,
-                children: pages.map((page, index) => /* @__PURE__ */ jsx27(
-                  BookPage,
-                  {
-                    pageNumber: index + 1,
-                    page,
-                    scale: renderScale,
-                    rotation,
-                    width: displayWidth,
-                    height: displayHeight
-                  },
-                  index
-                ))
+                children: pageChildren
               }
             )
           ]
@@ -12512,7 +12615,7 @@ var AskAboutTrigger = memo36(function AskAboutTrigger2({
 // src/components/Minimap/Minimap.tsx
 init_hooks();
 init_utils();
-import { memo as memo37, useMemo as useMemo14, useCallback as useCallback41 } from "react";
+import { memo as memo37, useMemo as useMemo15, useCallback as useCallback41 } from "react";
 import { Fragment as Fragment3, jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
 var PageIndicator = memo37(function PageIndicator2({
   pageNumber,
@@ -12563,7 +12666,7 @@ var Minimap = memo37(function Minimap2({
   const currentPage = useViewerStore((s) => s.currentPage);
   const numPages = useViewerStore((s) => s.numPages);
   const goToPage = useViewerStore((s) => s.goToPage);
-  const bookmarkedPages = useMemo14(() => {
+  const bookmarkedPages = useMemo15(() => {
     return new Set(bookmarks.map((b) => b.pageNumber));
   }, [bookmarks]);
   const compact = numPages > 50;
@@ -12583,7 +12686,7 @@ var Minimap = memo37(function Minimap2({
     },
     [currentPage, visitedPages, bookmarkedPages]
   );
-  const pageIndicators = useMemo14(() => {
+  const pageIndicators = useMemo15(() => {
     const pages = [];
     for (let i = 1; i <= numPages; i++) {
       pages.push(
@@ -13085,7 +13188,7 @@ init_PDFLoadingScreen2();
 // src/components/TutorMode/TutorModeContainer.tsx
 init_PDFPage2();
 init_hooks();
-import { useEffect as useEffect28, useMemo as useMemo15, useRef as useRef27, useState as useState30 } from "react";
+import { useEffect as useEffect28, useMemo as useMemo16, useRef as useRef27, useState as useState30 } from "react";
 import { useStore as useStore2 } from "zustand";
 
 // src/components/TutorMode/CameraView.tsx
@@ -14811,6 +14914,7 @@ function SubtitleBar({ text }) {
 // src/director/storyboard-engine.ts
 init_narration_store();
 init_camera_math();
+init_mobile_config();
 var DEFAULT_MIN_OVERLAY_MS = 3500;
 var StoryboardEngine = class {
   constructor(deps) {
@@ -14830,6 +14934,7 @@ var StoryboardEngine = class {
     this.overlayRemovalTimers = /* @__PURE__ */ new Map();
     this.currentStoryboardId = 0;
     this.deps = deps;
+    this.singleActiveOverlay = deps.singleActiveOverlay ?? isIOSMobile();
   }
   /**
    * Execute a new storyboard. Cancels in-flight steps from the previous storyboard
@@ -14999,6 +15104,10 @@ var StoryboardEngine = class {
       createdAt: Date.now(),
       expiresAt: Date.now() + visibleMs
     };
+    if (this.singleActiveOverlay) {
+      this.cancelAllRemovalTimers();
+      narrationStore.getState().clearOverlays();
+    }
     narrationStore.getState().addOverlay(overlay);
     const timer = setTimeout(() => {
       narrationStore.getState().removeOverlay(overlay.id);
@@ -16071,7 +16180,7 @@ function TutorModeContainer({
   className
 }) {
   const containerRef = useRef27(null);
-  const index = useMemo15(() => buildBBoxIndex(bboxData), [bboxData]);
+  const index = useMemo16(() => buildBBoxIndex(bboxData), [bboxData]);
   const {
     document: document2,
     currentPage: viewerCurrentPage,