pdfjs-reader-core 0.5.6 → 0.5.8

package/dist/index.cjs

@@ -13268,7 +13268,7 @@ function withErrorBoundary({ component, ...props }) {
 init_PDFLoadingScreen2();
 
 // src/components/TutorMode/TutorModeContainer.tsx
-var import_react58 = require("react");
+var import_react57 = require("react");
 var import_zustand2 = require("zustand");
 init_PDFPage2();
 init_hooks();
@@ -13559,12 +13559,23 @@ function AnimatedUnderline({ bbox, action }) {
   const blotX = x2 + 4;
   const blotY = y;
   const strokeWeight = action.style === "wavy" ? 3 : 4;
+  const uxPad = 8;
+  const uAbove = 8;
+  const uBelow = 24;
+  const svgX = x1 - uxPad;
+  const svgY = y - uAbove;
+  const svgW = x2 - x1 + 2 * uxPad;
+  const svgH = uAbove + uBelow;
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "svg",
     {
+      width: svgW,
+      height: svgH,
+      viewBox: `${svgX} ${svgY} ${svgW} ${svgH}`,
       style: {
         position: "absolute",
-        inset: 0,
+        left: svgX,
+        top: svgY,
         pointerEvents: "none",
         overflow: "visible"
       },
@@ -13627,10 +13638,14 @@ function AnimatedUnderline({ bbox, action }) {
 }
 
 // src/components/TutorMode/AnimatedHighlight.tsx
-var import_react56 = require("react");
 var import_framer_motion4 = require("framer-motion");
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var WASH = "rgba(230, 180, 34, 0.22)";
+var DEFAULT_HUE = "rgb(230, 180, 34)";
+var WASH_OPACITY = 0.28;
+function stripAlpha(color) {
+  const m = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
+  return m ? `rgb(${m[1]}, ${m[2]}, ${m[3]})` : color;
+}
 function AnimatedHighlight({ bbox, action }) {
   const [x1, y1, x2, y2] = bbox;
   const h = Math.max(1, y2 - y1);
@@ -13638,9 +13653,8 @@ function AnimatedHighlight({ bbox, action }) {
   const yTop = y1 - bleed;
   const yBot = y2 + bleed;
   const duration = action.draw_duration_ms / 1e3;
-  const filterId = (0, import_react56.useId)();
   const isDefaultColour = !action.color || action.color === "rgba(250, 204, 21, 0.35)" || action.color === "rgba(250,204,21,0.35)";
-  const fill = isDefaultColour ? WASH : action.color;
+  const fill = stripAlpha(isDefaultColour ? DEFAULT_HUE : action.color);
   const taper = Math.min(6, h * 0.2);
   const pathD = `
     M ${x1 - 2} ${yTop + taper}
@@ -13653,44 +13667,37 @@ function AnimatedHighlight({ bbox, action }) {
     L ${x1 - 2} ${yBot - taper}
     Z
   `;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  const svgPad = 8;
+  const svgX = x1 - svgPad;
+  const svgY = yTop - svgPad;
+  const svgW = x2 - x1 + 2 * svgPad;
+  const svgH = yBot - yTop + 2 * svgPad;
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "svg",
     {
+      width: svgW,
+      height: svgH,
+      viewBox: `${svgX} ${svgY} ${svgW} ${svgH}`,
       style: {
         position: "absolute",
-        inset: 0,
+        left: svgX,
+        top: svgY,
         pointerEvents: "none",
-        overflow: "visible",
-        mixBlendMode: "multiply"
+        overflow: "visible"
       },
       "data-role": "highlight",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("filter", { id: filterId, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-            "feTurbulence",
-            {
-              type: "fractalNoise",
-              baseFrequency: "1.8",
-              numOctaves: "1",
-              seed: 3,
-              result: "noise"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("feDisplacementMap", { in: "SourceGraphic", in2: "noise", scale: 1 })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-          import_framer_motion4.motion.path,
-          {
-            d: pathD,
-            fill,
-            initial: { clipPath: `inset(0 100% 0 0)` },
-            animate: { clipPath: `inset(0 0% 0 0)` },
-            exit: { opacity: 0 },
-            filter: `url(#${filterId})`,
-            transition: { duration, ease: EASE_OUT_EXPO }
-          }
-        )
-      ]
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        import_framer_motion4.motion.path,
+        {
+          d: pathD,
+          fill,
+          fillOpacity: WASH_OPACITY,
+          initial: { clipPath: `inset(0 100% 0 0)` },
+          animate: { clipPath: `inset(0 0% 0 0)` },
+          exit: { opacity: 0 },
+          transition: { duration, ease: EASE_OUT_EXPO }
+        }
+      )
     }
   );
 }
@@ -13712,12 +13719,27 @@ function PulseOverlay({ bbox, action }) {
   const spec = INTENSITY[action.intensity] ?? INTENSITY.normal;
   const L = Math.min(spec.bracketLen, Math.min(w, h) / 2.5);
   const PAD = 6;
+  const ringExtentX = (w / 2 + PAD) * spec.ringScale - w / 2;
+  const ringExtentY = (h / 2 + PAD) * spec.ringScale - h / 2;
+  const glowExtentX = (w / 2 + 10) * spec.ringScale - w / 2 + 24;
+  const glowExtentY = (h / 2 + 10) * spec.ringScale - h / 2 + 24;
+  const bracketExtent = PAD + L + 8;
+  const svgPadX = Math.ceil(Math.max(40, ringExtentX, glowExtentX, bracketExtent));
+  const svgPadY = Math.ceil(Math.max(40, ringExtentY, glowExtentY, bracketExtent));
+  const svgX = x1 - svgPadX;
+  const svgY = y1 - svgPadY;
+  const svgW = w + 2 * svgPadX;
+  const svgH = h + 2 * svgPadY;
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "svg",
     {
+      width: svgW,
+      height: svgH,
+      viewBox: `${svgX} ${svgY} ${svgW} ${svgH}`,
       style: {
         position: "absolute",
-        inset: 0,
+        left: svgX,
+        top: svgY,
         pointerEvents: "none",
         overflow: "visible"
       },
@@ -13865,7 +13887,7 @@ function Bracket({
 }
 
 // src/components/TutorMode/CalloutArrow.tsx
-var import_react57 = require("react");
+var import_react56 = require("react");
 var import_framer_motion6 = require("framer-motion");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function centerOf(b) {
@@ -13903,16 +13925,31 @@ function arrowPath(from, to, curve) {
   return `M ${from.x} ${from.y} Q ${cx} ${cy} ${to.x} ${to.y}`;
 }
 function CalloutArrow({ fromBbox, toBbox, action }) {
-  const markerId = (0, import_react57.useId)();
+  const markerId = (0, import_react56.useId)();
   const glowId = `${markerId}-glow`;
   const { from, to } = edgePoints(fromBbox, toBbox);
   const d = arrowPath(from, to, action.curve);
+  const rawMinX = Math.min(from.x, to.x);
+  const rawMinY = Math.min(from.y, to.y);
+  const rawMaxX = Math.max(from.x, to.x);
+  const rawMaxY = Math.max(from.y, to.y);
+  const dist = Math.hypot(to.x - from.x, to.y - from.y);
+  const arcDev = action.curve === "curved" ? dist * 0.12 : 0;
+  const basePad = 16;
+  const svgX = rawMinX - basePad - arcDev;
+  const svgY = rawMinY - basePad - arcDev;
+  const svgW = rawMaxX - rawMinX + 2 * (basePad + arcDev);
+  const svgH = rawMaxY - rawMinY + 2 * (basePad + arcDev);
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "svg",
     {
+      width: svgW,
+      height: svgH,
+      viewBox: `${svgX} ${svgY} ${svgW} ${svgH}`,
       style: {
         position: "absolute",
-        inset: 0,
+        left: svgX,
+        top: svgY,
         pointerEvents: "none",
         overflow: "visible"
       },
@@ -15036,11 +15073,36 @@ var StoryboardEngine = class {
     this.pendingStepTimers.clear();
     this.deps.narrationStore.getState().setEngineStatus("idle");
   }
-  /** Cancel every removal timer (used by resetVisuals only). */
+  /** Cancel every removal timer (used by resetVisuals and destroy). */
   cancelAllRemovalTimers() {
     for (const t of this.overlayRemovalTimers.values()) clearTimeout(t);
     this.overlayRemovalTimers.clear();
   }
+  /**
+   * Full destructor — cancels BOTH pending step timers AND overlay
+   * removal timers. Use this in component unmount / cleanup.
+   *
+   * The per-storyboard `cancelPending()` deliberately leaves overlay
+   * removal timers alone so a mid-flight overlay doesn't get stranded
+   * when a new storyboard arrives (see `overlayRemovalTimers` doc).
+   * That invariant is correct inside a session, but at teardown we
+   * must release every timer — otherwise their setTimeout closures
+   * keep `deps` (narrationStore, the full bboxIndex) alive beyond the
+   * lifetime of this engine. Over many component recreations on iOS
+   * Safari (viewport state churns during address-bar scroll
+   * animation), that cumulative retention contributes to tab reloads.
+   */
+  destroy() {
+    this.cancelPending();
+    this.cancelAllRemovalTimers();
+  }
+  /** Test-only — exposes internal queue sizes for regression tests. */
+  _queueSizesForTest() {
+    return {
+      pending: this.pendingStepTimers.size,
+      removals: this.overlayRemovalTimers.size
+    };
+  }
   /** Reset visuals: clear overlays, cancel every removal timer, fit camera. */
   resetVisuals() {
     this.cancelPending();
@@ -16183,31 +16245,31 @@ function TutorModeContainer({
   storyboardProvider,
   className
 }) {
-  const containerRef = (0, import_react58.useRef)(null);
-  const index = (0, import_react58.useMemo)(() => buildBBoxIndex(bboxData), [bboxData]);
+  const containerRef = (0, import_react57.useRef)(null);
+  const index = (0, import_react57.useMemo)(() => buildBBoxIndex(bboxData), [bboxData]);
   const {
     document: document2,
     currentPage: viewerCurrentPage,
     numPages,
     goToPage: viewerGoToPage
   } = usePDFViewer();
-  const [pageProxy, setPageProxy] = (0, import_react58.useState)(null);
-  const [viewport, setViewport] = (0, import_react58.useState)({ width: 800, height: 1e3 });
+  const [pageProxy, setPageProxy] = (0, import_react57.useState)(null);
+  const [viewport, setViewport] = (0, import_react57.useState)({ width: 800, height: 1e3 });
   const camera = (0, import_zustand2.useStore)(narrationStore, (s) => s.camera);
   const activeOverlays = (0, import_zustand2.useStore)(narrationStore, (s) => s.activeOverlays);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (numPages <= 0) return;
     if (pageNumber < 1 || pageNumber > numPages) return;
     if (viewerCurrentPage === pageNumber) return;
     viewerGoToPage(pageNumber);
   }, [pageNumber, numPages, viewerCurrentPage, viewerGoToPage]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!onPageChange) return;
     if (viewerCurrentPage === pageNumber) return;
     if (viewerCurrentPage < 1) return;
     onPageChange(viewerCurrentPage);
   }, [viewerCurrentPage, pageNumber, onPageChange]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!containerRef.current) return;
     const el = containerRef.current;
     const update = () => setViewport({ width: el.clientWidth, height: el.clientHeight });
@@ -16216,7 +16278,7 @@ function TutorModeContainer({
     ro.observe(el);
     return () => ro.disconnect();
   }, []);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!document2) {
       setPageProxy(null);
       return;
@@ -16231,10 +16293,10 @@ function TutorModeContainer({
       cancelled = true;
     };
   }, [document2, pageNumber]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     narrationStore.getState().setCurrentPage(pageNumber);
   }, [pageNumber, narrationStore]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     const page2 = index.byPage.get(pageNumber);
     if (!page2) return;
     if (viewport.width === 0 || viewport.height === 0) return;
@@ -16245,20 +16307,20 @@ function TutorModeContainer({
     ) * 0.95;
     narrationStore.getState().setCamera({ scale: fit, x: 0, y: 0 });
   }, [pageNumber, viewport, index, narrationStore]);
-  const engineRef = (0, import_react58.useRef)(null);
-  (0, import_react58.useEffect)(() => {
+  const engineRef = (0, import_react57.useRef)(null);
+  (0, import_react57.useEffect)(() => {
     engineRef.current = new StoryboardEngine({
       narrationStore,
       bboxIndex: index,
       getViewport: () => viewport,
       minOverlayDurationMs
     });
-    return () => engineRef.current?.cancelPending();
+    return () => engineRef.current?.destroy();
   }, [narrationStore, index, viewport, minOverlayDurationMs]);
-  const abortRef = (0, import_react58.useRef)(null);
-  const debounceRef = (0, import_react58.useRef)(null);
-  const lastChunkRef = (0, import_react58.useRef)(null);
-  (0, import_react58.useEffect)(() => {
+  const abortRef = (0, import_react57.useRef)(null);
+  const debounceRef = (0, import_react57.useRef)(null);
+  const lastChunkRef = (0, import_react57.useRef)(null);
+  (0, import_react57.useEffect)(() => {
     if (!storyboardProvider && !llm) return;
     if (!currentChunk || currentChunk === lastChunkRef.current) return;
     if (debounceRef.current) clearTimeout(debounceRef.current);
@@ -16423,7 +16485,7 @@ function TutorModeContainer({
     embeddingProvider,
     llmTimeoutMs
   ]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!currentChunk) return;
     const t = setTimeout(() => {
       if (!engineRef.current) return;