pdfjs-reader-core 0.5.6 → 0.5.8

package/dist/index.d.cts

@@ -2062,8 +2062,28 @@ declare class StoryboardEngine {
      * `resetVisuals()` instead.
      */
     cancelPending(): void;
-    /** Cancel every removal timer (used by resetVisuals only). */
+    /** Cancel every removal timer (used by resetVisuals and destroy). */
     private cancelAllRemovalTimers;
+    /**
+     * 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(): void;
+    /** Test-only — exposes internal queue sizes for regression tests. */
+    _queueSizesForTest(): {
+        pending: number;
+        removals: number;
+    };
     /** Reset visuals: clear overlays, cancel every removal timer, fit camera. */
     resetVisuals(): void;
     /** Execute one step — dispatch to narrationStore. Returns true if applied. */

package/dist/index.d.ts

@@ -2062,8 +2062,28 @@ declare class StoryboardEngine {
      * `resetVisuals()` instead.
      */
     cancelPending(): void;
-    /** Cancel every removal timer (used by resetVisuals only). */
+    /** Cancel every removal timer (used by resetVisuals and destroy). */
     private cancelAllRemovalTimers;
+    /**
+     * 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(): void;
+    /** Test-only — exposes internal queue sizes for regression tests. */
+    _queueSizesForTest(): {
+        pending: number;
+        removals: number;
+    };
     /** Reset visuals: clear overlays, cancel every removal timer, fit camera. */
     resetVisuals(): void;
     /** Execute one step — dispatch to narrationStore. Returns true if applied. */

package/dist/index.js

@@ -13374,12 +13374,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__ */ jsxs36(
     "svg",
     {
+      width: svgW,
+      height: svgH,
+      viewBox: `${svgX} ${svgY} ${svgW} ${svgH}`,
       style: {
         position: "absolute",
-        inset: 0,
+        left: svgX,
+        top: svgY,
         pointerEvents: "none",
         overflow: "visible"
       },
@@ -13442,10 +13453,14 @@ function AnimatedUnderline({ bbox, action }) {
 }
 
 // src/components/TutorMode/AnimatedHighlight.tsx
-import { useId as useId2 } from "react";
 import { motion as motion4 } from "framer-motion";
-import { jsx as jsx44, jsxs as jsxs37 } from "react/jsx-runtime";
-var WASH = "rgba(230, 180, 34, 0.22)";
+import { jsx as jsx44 } from "react/jsx-runtime";
+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);
@@ -13453,9 +13468,8 @@ function AnimatedHighlight({ bbox, action }) {
   const yTop = y1 - bleed;
   const yBot = y2 + bleed;
   const duration = action.draw_duration_ms / 1e3;
-  const filterId = useId2();
   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}
@@ -13468,51 +13482,44 @@ function AnimatedHighlight({ bbox, action }) {
     L ${x1 - 2} ${yBot - taper}
     Z
   `;
-  return /* @__PURE__ */ jsxs37(
+  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__ */ jsx44(
     "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__ */ jsx44("defs", { children: /* @__PURE__ */ jsxs37("filter", { id: filterId, children: [
-          /* @__PURE__ */ jsx44(
-            "feTurbulence",
-            {
-              type: "fractalNoise",
-              baseFrequency: "1.8",
-              numOctaves: "1",
-              seed: 3,
-              result: "noise"
-            }
-          ),
-          /* @__PURE__ */ jsx44("feDisplacementMap", { in: "SourceGraphic", in2: "noise", scale: 1 })
-        ] }) }),
-        /* @__PURE__ */ jsx44(
-          motion4.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__ */ jsx44(
+        motion4.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 }
+        }
+      )
     }
   );
 }
 
 // src/components/TutorMode/PulseOverlay.tsx
 import { motion as motion5 } from "framer-motion";
-import { jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
 var INTENSITY = {
   subtle: { bracketLen: 14, strokeWeight: 2, coreOpacity: 0.5, ringScale: 1.08 },
   normal: { bracketLen: 20, strokeWeight: 2.5, coreOpacity: 0.75, ringScale: 1.14 },
@@ -13527,12 +13534,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;
-  return /* @__PURE__ */ jsxs38(
+  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__ */ jsxs37(
     "svg",
     {
+      width: svgW,
+      height: svgH,
+      viewBox: `${svgX} ${svgY} ${svgW} ${svgH}`,
       style: {
         position: "absolute",
-        inset: 0,
+        left: svgX,
+        top: svgY,
         pointerEvents: "none",
         overflow: "visible"
       },
@@ -13680,9 +13702,9 @@ function Bracket({
 }
 
 // src/components/TutorMode/CalloutArrow.tsx
-import { useId as useId3 } from "react";
+import { useId as useId2 } from "react";
 import { motion as motion6 } from "framer-motion";
-import { jsx as jsx46, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs38 } from "react/jsx-runtime";
 function centerOf(b) {
   return { x: (b[0] + b[2]) / 2, y: (b[1] + b[3]) / 2 };
 }
@@ -13718,22 +13740,37 @@ 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 = useId3();
+  const markerId = useId2();
   const glowId = `${markerId}-glow`;
   const { from, to } = edgePoints(fromBbox, toBbox);
   const d = arrowPath(from, to, action.curve);
-  return /* @__PURE__ */ jsxs39(
+  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__ */ jsxs38(
     "svg",
     {
+      width: svgW,
+      height: svgH,
+      viewBox: `${svgX} ${svgY} ${svgW} ${svgH}`,
       style: {
         position: "absolute",
-        inset: 0,
+        left: svgX,
+        top: svgY,
         pointerEvents: "none",
         overflow: "visible"
       },
       "data-role": "callout",
       children: [
-        /* @__PURE__ */ jsxs39("defs", { children: [
+        /* @__PURE__ */ jsxs38("defs", { children: [
           /* @__PURE__ */ jsx46(
             "marker",
             {
@@ -13971,7 +14008,7 @@ import { AnimatePresence as AnimatePresence2 } from "framer-motion";
 
 // src/components/TutorMode/GhostReference.tsx
 import { motion as motion8 } from "framer-motion";
-import { jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 var POSITIONS = {
   "top-right": {
     top: "clamp(12px, 4vw, 40px)",
@@ -14004,7 +14041,7 @@ function GhostReference({
 }) {
   const [x1, y1, x2, y2] = sourceBbox;
   const text = sourceBlockText ?? "(figure)";
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs39(
     motion8.div,
     {
       initial: { opacity: 0, y: 24, scale: 0.97 },
@@ -14067,7 +14104,7 @@ function GhostReference({
             }
           }
         ),
-        /* @__PURE__ */ jsxs40(
+        /* @__PURE__ */ jsxs39(
           "div",
           {
             style: {
@@ -14097,7 +14134,7 @@ function GhostReference({
                     overflow: "hidden",
                     boxShadow: "inset 0 0 0 1px rgba(42, 36, 32, 0.12), 0 1px 3px rgba(42, 36, 32, 0.10)"
                   },
-                  children: /* @__PURE__ */ jsxs40(
+                  children: /* @__PURE__ */ jsxs39(
                     "svg",
                     {
                       width: "100%",
@@ -14144,7 +14181,7 @@ function GhostReference({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxs40(
+              /* @__PURE__ */ jsxs39(
                 motion8.div,
                 {
                   initial: { opacity: 0, y: 6 },
@@ -14286,12 +14323,12 @@ import { AnimatePresence as AnimatePresence3 } from "framer-motion";
 
 // src/components/TutorMode/StickyLabel.tsx
 import { motion as motion9 } from "framer-motion";
-import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
 var STEM = 18;
 function StickyLabel({ screenAnchor, action }) {
   const { x, y } = screenAnchor;
   const layout = LAYOUTS[action.position] ?? LAYOUTS.top;
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs40(
     motion9.div,
     {
       initial: { opacity: 0, scale: 0.88 },
@@ -14851,11 +14888,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();
@@ -15956,7 +16018,7 @@ function storyboardFromMatch(match, page) {
 }
 
 // src/components/TutorMode/TutorModeContainer.tsx
-import { Fragment as Fragment4, jsx as jsx55, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx55, jsxs as jsxs41 } from "react/jsx-runtime";
 function buildBBoxIndex(bboxData) {
   const byPage = /* @__PURE__ */ new Map();
   const blockById = /* @__PURE__ */ new Map();
@@ -16068,7 +16130,7 @@ function TutorModeContainer({
       getViewport: () => viewport,
       minOverlayDurationMs
     });
-    return () => engineRef.current?.cancelPending();
+    return () => engineRef.current?.destroy();
   }, [narrationStore, index, viewport, minOverlayDurationMs]);
   const abortRef = useRef27(null);
   const debounceRef = useRef27(null);
@@ -16256,7 +16318,7 @@ function TutorModeContainer({
   const baseW = page ? page.page_dimensions.width * (scale || 1) : 0;
   const baseH = page ? page.page_dimensions.height * (scale || 1) : 0;
   const isReady = !!page && !!pageProxy;
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       ref: containerRef,
@@ -16302,8 +16364,8 @@ function TutorModeContainer({
             children: "Reset view"
           }
         ) : null,
-        isReady ? /* @__PURE__ */ jsxs42(Fragment4, { children: [
-          /* @__PURE__ */ jsx55(CameraView, { camera, children: /* @__PURE__ */ jsxs42(
+        isReady ? /* @__PURE__ */ jsxs41(Fragment4, { children: [
+          /* @__PURE__ */ jsx55(CameraView, { camera, children: /* @__PURE__ */ jsxs41(
             "div",
             {
               style: {
@@ -16385,7 +16447,7 @@ function TutorLoadingState({
       }
     );
   }
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       style: {