pdfjs-reader-core 0.5.5 → 0.5.7

package/dist/index.js

@@ -9154,7 +9154,7 @@ var init_DocumentContainer = __esm({
       const containerRef = useRef16(null);
       const documentRef = useRef16(null);
       const baseScaleRef = useRef16(scale);
-      const isTouchDevice = useIsTouchDevice();
+      const isTouchDevice2 = useIsTouchDevice();
       const documentLoadingState = useViewerStore((s) => s.documentLoadingState);
       const { selection, clearSelection, copySelection } = useTextSelection();
       const handlePinchZoom = useCallback29(
@@ -9185,7 +9185,7 @@ var init_DocumentContainer = __esm({
         onSwipeLeft: handleSwipeLeft,
         onSwipeRight: handleSwipeRight,
         onDoubleTap: handleDoubleTap,
-        enabled: enableTouchGestures && isTouchDevice,
+        enabled: enableTouchGestures && isTouchDevice2,
         swipeThreshold: 50,
         doubleTapInterval: 300
       });
@@ -9429,7 +9429,7 @@ var init_VirtualizedDocumentContainer = __esm({
       const pageCache = useRef17(/* @__PURE__ */ new Map());
       const pageDimensionsCache = useRef17(/* @__PURE__ */ new Map());
       const baseScaleRef = useRef17(scale);
-      const isTouchDevice = useIsTouchDevice();
+      const isTouchDevice2 = useIsTouchDevice();
       const [visiblePages, setVisiblePages] = useState19([1]);
       const [pageObjects, setPageObjects] = useState19(/* @__PURE__ */ new Map());
       const [totalHeight, setTotalHeight] = useState19(0);
@@ -9632,7 +9632,7 @@ var init_VirtualizedDocumentContainer = __esm({
         onPinchZoom: handlePinchZoom,
         onSwipeLeft: nextPage,
         onSwipeRight: previousPage,
-        enabled: enableTouchGestures && isTouchDevice
+        enabled: enableTouchGestures && isTouchDevice2
       });
       const setContainerRef = useCallback30(
         (element) => {
@@ -9840,7 +9840,7 @@ var init_DualPageContainer = __esm({
       const containerRef = useRef18(null);
       const documentRef = useRef18(null);
       const baseScaleRef = useRef18(scale);
-      const isTouchDevice = useIsTouchDevice();
+      const isTouchDevice2 = useIsTouchDevice();
       const [leftPage, setLeftPage] = useState20(null);
       const [rightPage, setRightPage] = useState20(null);
       const [isLoading, setIsLoading] = useState20(false);
@@ -9983,7 +9983,7 @@ var init_DualPageContainer = __esm({
         onPinchZoom: handlePinchZoom,
         onSwipeLeft: goToNextSpread,
         onSwipeRight: goToPreviousSpread,
-        enabled: enableTouchGestures && isTouchDevice
+        enabled: enableTouchGestures && isTouchDevice2
       });
       const setContainerRef = useCallback31(
         (element) => {
@@ -13374,12 +13374,23 @@ function AnimatedUnderline({ bbox, action }) {
   const blotX = x2 + 4;
   const blotY = y;
   const strokeWeight = action.style === "wavy" ? 3 : 4;
+  const xPad = 8;
+  const yAbove = 8;
+  const yBelow = 24;
+  const svgX = x1 - xPad;
+  const svgY = y - yAbove;
+  const svgW = x2 - x1 + 2 * xPad;
+  const svgH = yAbove + yBelow;
   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,9 @@ 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 WASH = "rgba(195, 145, 10, 0.32)";
 function AnimatedHighlight({ bbox, action }) {
   const [x1, y1, x2, y2] = bbox;
   const h = Math.max(1, y2 - y1);
@@ -13453,7 +13463,6 @@ 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 taper = Math.min(6, h * 0.2);
@@ -13468,57 +13477,51 @@ function AnimatedHighlight({ bbox, action }) {
     L ${x1 - 2} ${yBot - taper}
     Z
   `;
-  return /* @__PURE__ */ jsxs37(
+  const pad = 8;
+  const svgX = x1 - pad;
+  const svgY = yTop - pad;
+  const svgW = x2 - x1 + 2 * pad;
+  const svgH = yBot - yTop + 2 * pad;
+  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,
+          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 { useId as useId2 } from "react";
 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 },
   strong: { bracketLen: 26, strokeWeight: 3, coreOpacity: 1, ringScale: 1.22 }
 };
 function PulseOverlay({ bbox, action }) {
+  const pulseId = useId2();
   const [x1, y1, x2, y2] = bbox;
   const w = Math.max(1, x2 - x1);
   const h = Math.max(1, y2 - y1);
@@ -13527,29 +13530,48 @@ 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 bracketExtent = PAD + L + 8;
+  const glowExtent = (w / 2 + 24) * spec.ringScale - w / 2;
+  const ringExtent = (w / 2 + PAD) * spec.ringScale - w / 2;
+  const glowExtentV = (h / 2 + 24) * spec.ringScale - h / 2;
+  const ringExtentV = (h / 2 + PAD) * spec.ringScale - h / 2;
+  const svgPadX = Math.ceil(Math.max(bracketExtent, glowExtent, ringExtent) + 4);
+  const svgPadY = Math.ceil(Math.max(bracketExtent, glowExtentV, ringExtentV) + 4);
+  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"
       },
       "data-role": "pulse",
       children: [
+        /* @__PURE__ */ jsx45("defs", { children: /* @__PURE__ */ jsxs37("radialGradient", { id: `${pulseId}-glow`, cx: "50%", cy: "50%", r: "50%", children: [
+          /* @__PURE__ */ jsx45("stop", { offset: "0%", stopColor: ACCENT_GLOW, stopOpacity: 1 }),
+          /* @__PURE__ */ jsx45("stop", { offset: "60%", stopColor: ACCENT_GLOW, stopOpacity: 0.45 }),
+          /* @__PURE__ */ jsx45("stop", { offset: "100%", stopColor: ACCENT_GLOW, stopOpacity: 0 })
+        ] }) }),
         /* @__PURE__ */ jsx45(
           motion5.ellipse,
           {
             cx,
             cy,
-            rx: w / 2 + 10,
-            ry: h / 2 + 10,
-            fill: ACCENT_GLOW,
+            rx: w / 2 + 24,
+            ry: h / 2 + 24,
+            fill: `url(#${pulseId}-glow)`,
             style: {
               transformOrigin: `${cx}px ${cy}px`,
-              transformBox: "fill-box",
-              filter: "blur(16px)"
+              transformBox: "fill-box"
             },
             initial: { opacity: 0, scale: 0.95 },
             animate: {
@@ -13682,7 +13704,7 @@ function Bracket({
 // src/components/TutorMode/CalloutArrow.tsx
 import { useId as useId3 } 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 };
 }
@@ -13722,18 +13744,33 @@ function CalloutArrow({ fromBbox, toBbox, action }) {
   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",
             {
@@ -13876,8 +13913,9 @@ function CinemaLayer({
   page,
   index,
   overlays,
-  scale
+  coordScale
 }) {
+  if (overlays.length === 0) return null;
   return /* @__PURE__ */ jsx48(
     "div",
     {
@@ -13886,7 +13924,7 @@ function CinemaLayer({
         position: "absolute",
         inset: 0,
         transformOrigin: "0 0",
-        transform: `scale(${scale})`,
+        transform: `scale(${coordScale})`,
         width: page.page_dimensions.width,
         height: page.page_dimensions.height,
         pointerEvents: "none",
@@ -13971,7 +14009,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 +14042,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 +14105,7 @@ function GhostReference({
             }
           }
         ),
-        /* @__PURE__ */ jsxs40(
+        /* @__PURE__ */ jsxs39(
           "div",
           {
             style: {
@@ -14097,7 +14135,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 +14182,7 @@ function GhostReference({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxs40(
+              /* @__PURE__ */ jsxs39(
                 motion8.div,
                 {
                   initial: { opacity: 0, y: 6 },
@@ -14286,12 +14324,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 },
@@ -14476,7 +14514,8 @@ function LabelOverlay({
   index,
   currentPage,
   camera,
-  viewport
+  viewport,
+  coordScale
 }) {
   const labels = overlays.filter((o) => o.kind === "label");
   const page = index.byPage.get(currentPage);
@@ -14503,7 +14542,8 @@ function LabelOverlay({
           a.position,
           page,
           camera,
-          viewport
+          viewport,
+          coordScale
         );
         return /* @__PURE__ */ jsx52(
           StickyLabel,
@@ -14517,7 +14557,7 @@ function LabelOverlay({
     }
   );
 }
-function computeScreenAnchor(bbox, where, page, camera, viewport) {
+function computeScreenAnchor(bbox, where, page, camera, viewport, coordScale) {
   const [x1, y1, x2, y2] = bbox;
   const pageCX = page.page_dimensions.width / 2;
   const pageCY = page.page_dimensions.height / 2;
@@ -14543,8 +14583,8 @@ function computeScreenAnchor(bbox, where, page, camera, viewport) {
       px = (x1 + x2) / 2;
       py = y1;
   }
-  const screenX = viewport.width / 2 + camera.x + (px - pageCX) * camera.scale;
-  const screenY = viewport.height / 2 + camera.y + (py - pageCY) * camera.scale;
+  const screenX = viewport.width / 2 + camera.x + (px - pageCX) * coordScale * camera.scale;
+  const screenY = viewport.height / 2 + camera.y + (py - pageCY) * coordScale * camera.scale;
   return { x: screenX, y: screenY };
 }
 
@@ -14556,7 +14596,8 @@ function CalloutLabelOverlay({
   index,
   currentPage,
   camera,
-  viewport
+  viewport,
+  coordScale
 }) {
   const callouts = overlays.filter(
     (o) => o.kind === "callout" && o.action.label
@@ -14585,7 +14626,8 @@ function CalloutLabelOverlay({
           toHit.block.bbox,
           page,
           camera,
-          viewport
+          viewport,
+          coordScale
         );
         return /* @__PURE__ */ jsx53(
           CalloutLabelPill,
@@ -14600,7 +14642,7 @@ function CalloutLabelOverlay({
     }
   );
 }
-function computePillAnchor(fromBbox, toBbox, page, camera, viewport) {
+function computePillAnchor(fromBbox, toBbox, page, camera, viewport, coordScale) {
   const aCX = (fromBbox[0] + fromBbox[2]) / 2;
   const aCY = (fromBbox[1] + fromBbox[3]) / 2;
   const bCX = (toBbox[0] + toBbox[2]) / 2;
@@ -14617,8 +14659,8 @@ function computePillAnchor(fromBbox, toBbox, page, camera, viewport) {
   const toY = bCY - uy * bOff;
   const pageCX = page.page_dimensions.width / 2;
   const pageCY = page.page_dimensions.height / 2;
-  const tipScreenX = viewport.width / 2 + camera.x + (toX - pageCX) * camera.scale;
-  const tipScreenY = viewport.height / 2 + camera.y + (toY - pageCY) * camera.scale;
+  const tipScreenX = viewport.width / 2 + camera.x + (toX - pageCX) * coordScale * camera.scale;
+  const tipScreenY = viewport.height / 2 + camera.y + (toY - pageCY) * coordScale * camera.scale;
   const isVertical = Math.abs(dy) >= Math.abs(dx);
   const OFFSET = resolvePillOffset(viewport.width);
   const MAX_PILL_W = resolveMaxPillW(viewport.width);
@@ -14761,6 +14803,41 @@ function SubtitleBar({ text }) {
   ) : null });
 }
 
+// src/utils/render-scale.ts
+function computeFitScale(input) {
+  const { pageWidthPt, pageHeightPt, viewport, paddingFactor = 0.95 } = input;
+  if (!Number.isFinite(pageWidthPt) || !Number.isFinite(pageHeightPt) || pageWidthPt <= 0 || pageHeightPt <= 0) {
+    return 1;
+  }
+  const w = Math.max(1, viewport.width);
+  const h = Math.max(1, viewport.height);
+  const fit = Math.min(w / pageWidthPt, h / pageHeightPt) * paddingFactor;
+  return Number.isFinite(fit) && fit > 0 ? fit : 1;
+}
+function computeCoordScale(input) {
+  const { renderScale, dpi } = input;
+  if (!Number.isFinite(renderScale) || renderScale <= 0) return 0;
+  if (!Number.isFinite(dpi) || dpi <= 0) return 1;
+  return renderScale * 72 / dpi;
+}
+function isTouchDevice() {
+  if (typeof window === "undefined") return false;
+  if (typeof window.matchMedia !== "function") return false;
+  try {
+    return window.matchMedia("(pointer: coarse)").matches;
+  } catch {
+    return false;
+  }
+}
+function resolveRenderScale(input) {
+  const { renderScaleProp, scaleProp, defaultRenderScale } = input;
+  if (Number.isFinite(renderScaleProp) && renderScaleProp > 0) {
+    return renderScaleProp;
+  }
+  const multiplier = Number.isFinite(scaleProp) && scaleProp > 0 ? scaleProp : 1;
+  return defaultRenderScale * multiplier;
+}
+
 // src/director/storyboard-engine.ts
 init_narration_store();
 init_camera_math();
@@ -14851,11 +14928,32 @@ 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 (see `overlayRemovalTimers` doc),
+   * but at destruction time we must release every timer or their closures
+   * keep `deps` (narrationStore, the full bboxIndex) alive beyond the
+   * lifetime of this engine. On iOS Safari with many engine recreations
+   * this causes cumulative memory pressure and eventual tab reload.
+   */
+  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 +16054,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();
@@ -15996,6 +16094,7 @@ function TutorModeContainer({
   loadingComponent,
   onPageChange,
   storyboardProvider,
+  renderScale,
   className
 }) {
   const containerRef = useRef27(null);
@@ -16010,6 +16109,27 @@ function TutorModeContainer({
   const [viewport, setViewport] = useState30({ width: 800, height: 1e3 });
   const camera = useStore2(narrationStore, (s) => s.camera);
   const activeOverlays = useStore2(narrationStore, (s) => s.activeOverlays);
+  const page = index.byPage.get(pageNumber);
+  const pagePointsW = page ? page.page_dimensions.width * 72 / page.page_dimensions.dpi : 0;
+  const pagePointsH = page ? page.page_dimensions.height * 72 / page.page_dimensions.dpi : 0;
+  const touch = isTouchDevice();
+  const defaultRenderScale = page ? touch ? computeFitScale({
+    pageWidthPt: pagePointsW,
+    pageHeightPt: pagePointsH,
+    viewport
+  }) : page.page_dimensions.dpi / 72 : 1;
+  const effectiveRenderScale = resolveRenderScale({
+    renderScaleProp: renderScale,
+    scaleProp: scale,
+    defaultRenderScale
+  });
+  const coordScale = page ? computeCoordScale({
+    renderScale: effectiveRenderScale,
+    dpi: page.page_dimensions.dpi
+  }) : 1;
+  const rasterScale = effectiveRenderScale;
+  const baseW = pagePointsW * effectiveRenderScale;
+  const baseH = pagePointsH * effectiveRenderScale;
   useEffect28(() => {
     if (numPages <= 0) return;
     if (pageNumber < 1 || pageNumber > numPages) return;
@@ -16025,7 +16145,13 @@ function TutorModeContainer({
   useEffect28(() => {
     if (!containerRef.current) return;
     const el = containerRef.current;
-    const update = () => setViewport({ width: el.clientWidth, height: el.clientHeight });
+    const update = () => {
+      const w = el.clientWidth;
+      const h = el.clientHeight;
+      setViewport(
+        (prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h }
+      );
+    };
     update();
     const ro = new ResizeObserver(update);
     ro.observe(el);
@@ -16053,23 +16179,29 @@ function TutorModeContainer({
     const page2 = index.byPage.get(pageNumber);
     if (!page2) return;
     if (viewport.width === 0 || viewport.height === 0) return;
+    if (baseW === 0 || baseH === 0) return;
     if (narrationStore.getState().activeOverlays.length > 0) return;
-    const fit = Math.min(
-      viewport.width / page2.page_dimensions.width,
-      viewport.height / page2.page_dimensions.height
-    ) * 0.95;
+    const fit = Math.min(viewport.width / baseW, viewport.height / baseH) * 0.95;
     narrationStore.getState().setCamera({ scale: fit, x: 0, y: 0 });
-  }, [pageNumber, viewport, index, narrationStore]);
+  }, [pageNumber, viewport, index, narrationStore, baseW, baseH]);
+  const viewportRef = useRef27(viewport);
+  useEffect28(() => {
+    viewportRef.current = viewport;
+  }, [viewport]);
   const engineRef = useRef27(null);
   useEffect28(() => {
-    engineRef.current = new StoryboardEngine({
+    const engine = new StoryboardEngine({
       narrationStore,
       bboxIndex: index,
-      getViewport: () => viewport,
+      getViewport: () => viewportRef.current,
       minOverlayDurationMs
     });
-    return () => engineRef.current?.cancelPending();
-  }, [narrationStore, index, viewport, minOverlayDurationMs]);
+    engineRef.current = engine;
+    return () => {
+      engine.destroy();
+      if (engineRef.current === engine) engineRef.current = null;
+    };
+  }, [narrationStore, index, minOverlayDurationMs]);
   const abortRef = useRef27(null);
   const debounceRef = useRef27(null);
   const lastChunkRef = useRef27(null);
@@ -16250,13 +16382,8 @@ function TutorModeContainer({
     }, idleTimeoutMs + 100);
     return () => clearTimeout(t);
   }, [currentChunk, idleTimeoutMs, narrationStore]);
-  const page = index.byPage.get(pageNumber);
-  const dpiScale = page ? page.page_dimensions.dpi / 72 : 1;
-  const rasterScale = dpiScale * (scale || 1);
-  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 +16429,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: {
@@ -16333,7 +16460,7 @@ function TutorModeContainer({
                     page,
                     index,
                     overlays: activeOverlays,
-                    scale: scale || 1
+                    coordScale
                   }
                 )
               ]
@@ -16346,7 +16473,8 @@ function TutorModeContainer({
               index,
               currentPage: pageNumber,
               camera,
-              viewport
+              viewport,
+              coordScale
             }
           ),
           /* @__PURE__ */ jsx55(
@@ -16356,7 +16484,8 @@ function TutorModeContainer({
               index,
               currentPage: pageNumber,
               camera,
-              viewport
+              viewport,
+              coordScale
             }
           ),
           /* @__PURE__ */ jsx55(GhostReferenceOverlay, { overlays: activeOverlays, index })
@@ -16385,7 +16514,7 @@ function TutorLoadingState({
       }
     );
   }
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       style: {