pdfjs-reader-core 0.5.7 → 0.5.9

package/dist/index.cjs

@@ -9191,7 +9191,7 @@ var init_DocumentContainer = __esm({
       const containerRef = (0, import_react37.useRef)(null);
       const documentRef = (0, import_react37.useRef)(null);
       const baseScaleRef = (0, import_react37.useRef)(scale);
-      const isTouchDevice2 = useIsTouchDevice();
+      const isTouchDevice = useIsTouchDevice();
       const documentLoadingState = useViewerStore((s) => s.documentLoadingState);
       const { selection, clearSelection, copySelection } = useTextSelection();
       const handlePinchZoom = (0, import_react37.useCallback)(
@@ -9222,7 +9222,7 @@ var init_DocumentContainer = __esm({
         onSwipeLeft: handleSwipeLeft,
         onSwipeRight: handleSwipeRight,
         onDoubleTap: handleDoubleTap,
-        enabled: enableTouchGestures && isTouchDevice2,
+        enabled: enableTouchGestures && isTouchDevice,
         swipeThreshold: 50,
         doubleTapInterval: 300
       });
@@ -9466,7 +9466,7 @@ var init_VirtualizedDocumentContainer = __esm({
       const pageCache = (0, import_react38.useRef)(/* @__PURE__ */ new Map());
       const pageDimensionsCache = (0, import_react38.useRef)(/* @__PURE__ */ new Map());
       const baseScaleRef = (0, import_react38.useRef)(scale);
-      const isTouchDevice2 = useIsTouchDevice();
+      const isTouchDevice = useIsTouchDevice();
       const [visiblePages, setVisiblePages] = (0, import_react38.useState)([1]);
       const [pageObjects, setPageObjects] = (0, import_react38.useState)(/* @__PURE__ */ new Map());
       const [totalHeight, setTotalHeight] = (0, import_react38.useState)(0);
@@ -9669,7 +9669,7 @@ var init_VirtualizedDocumentContainer = __esm({
         onPinchZoom: handlePinchZoom,
         onSwipeLeft: nextPage,
         onSwipeRight: previousPage,
-        enabled: enableTouchGestures && isTouchDevice2
+        enabled: enableTouchGestures && isTouchDevice
       });
       const setContainerRef = (0, import_react38.useCallback)(
         (element) => {
@@ -9877,7 +9877,7 @@ var init_DualPageContainer = __esm({
       const containerRef = (0, import_react40.useRef)(null);
       const documentRef = (0, import_react40.useRef)(null);
       const baseScaleRef = (0, import_react40.useRef)(scale);
-      const isTouchDevice2 = useIsTouchDevice();
+      const isTouchDevice = useIsTouchDevice();
       const [leftPage, setLeftPage] = (0, import_react40.useState)(null);
       const [rightPage, setRightPage] = (0, import_react40.useState)(null);
       const [isLoading, setIsLoading] = (0, import_react40.useState)(false);
@@ -10020,7 +10020,7 @@ var init_DualPageContainer = __esm({
         onPinchZoom: handlePinchZoom,
         onSwipeLeft: goToNextSpread,
         onSwipeRight: goToPreviousSpread,
-        enabled: enableTouchGestures && isTouchDevice2
+        enabled: enableTouchGestures && isTouchDevice
       });
       const setContainerRef = (0, import_react40.useCallback)(
         (element) => {
@@ -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,13 +13559,13 @@ 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;
+  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",
     {
@@ -13640,7 +13640,12 @@ function AnimatedUnderline({ bbox, action }) {
 // src/components/TutorMode/AnimatedHighlight.tsx
 var import_framer_motion4 = require("framer-motion");
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var WASH = "rgba(195, 145, 10, 0.32)";
+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);
@@ -13649,7 +13654,7 @@ function AnimatedHighlight({ bbox, action }) {
   const yBot = y2 + bleed;
   const duration = action.draw_duration_ms / 1e3;
   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}
@@ -13662,11 +13667,11 @@ function AnimatedHighlight({ bbox, action }) {
     L ${x1 - 2} ${yBot - taper}
     Z
   `;
-  const pad = 8;
-  const svgX = x1 - pad;
-  const svgY = yTop - pad;
-  const svgW = x2 - x1 + 2 * pad;
-  const svgH = yBot - yTop + 2 * pad;
+  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",
     {
@@ -13686,6 +13691,7 @@ function AnimatedHighlight({ bbox, action }) {
         {
           d: pathD,
           fill,
+          fillOpacity: WASH_OPACITY,
           initial: { clipPath: `inset(0 100% 0 0)` },
           animate: { clipPath: `inset(0 0% 0 0)` },
           exit: { opacity: 0 },
@@ -13697,7 +13703,6 @@ function AnimatedHighlight({ bbox, action }) {
 }
 
 // src/components/TutorMode/PulseOverlay.tsx
-var import_react56 = require("react");
 var import_framer_motion5 = require("framer-motion");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var INTENSITY = {
@@ -13706,7 +13711,6 @@ var INTENSITY = {
   strong: { bracketLen: 26, strokeWeight: 3, coreOpacity: 1, ringScale: 1.22 }
 };
 function PulseOverlay({ bbox, action }) {
-  const pulseId = (0, import_react56.useId)();
   const [x1, y1, x2, y2] = bbox;
   const w = Math.max(1, x2 - x1);
   const h = Math.max(1, y2 - y1);
@@ -13715,13 +13719,13 @@ 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 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 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;
@@ -13741,22 +13745,18 @@ function PulseOverlay({ bbox, action }) {
       },
       "data-role": "pulse",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("radialGradient", { id: `${pulseId}-glow`, cx: "50%", cy: "50%", r: "50%", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("stop", { offset: "0%", stopColor: ACCENT_GLOW, stopOpacity: 1 }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("stop", { offset: "60%", stopColor: ACCENT_GLOW, stopOpacity: 0.45 }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("stop", { offset: "100%", stopColor: ACCENT_GLOW, stopOpacity: 0 })
-        ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           import_framer_motion5.motion.ellipse,
           {
             cx,
             cy,
-            rx: w / 2 + 24,
-            ry: h / 2 + 24,
-            fill: `url(#${pulseId}-glow)`,
+            rx: w / 2 + 10,
+            ry: h / 2 + 10,
+            fill: ACCENT_GLOW,
             style: {
               transformOrigin: `${cx}px ${cy}px`,
-              transformBox: "fill-box"
+              transformBox: "fill-box",
+              filter: "blur(16px)"
             },
             initial: { opacity: 0, scale: 0.95 },
             animate: {
@@ -13887,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) {
@@ -13925,7 +13925,7 @@ 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);
@@ -14098,9 +14098,8 @@ function CinemaLayer({
   page,
   index,
   overlays,
-  coordScale
+  scale
 }) {
-  if (overlays.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "div",
     {
@@ -14109,7 +14108,7 @@ function CinemaLayer({
         position: "absolute",
         inset: 0,
         transformOrigin: "0 0",
-        transform: `scale(${coordScale})`,
+        transform: `scale(${scale})`,
         width: page.page_dimensions.width,
         height: page.page_dimensions.height,
         pointerEvents: "none",
@@ -14594,10 +14593,14 @@ function StickyLabel({ screenAnchor, action }) {
               letterSpacing: 0.6,
               textTransform: "uppercase",
               fontWeight: 500,
-              whiteSpace: "nowrap",
+              // Wrap instead of truncating with an ellipsis. Short labels stay
+              // single-line naturally; longer ones grow in height rather than
+              // losing their tail. `overflowWrap: 'anywhere'` keeps a stray
+              // long word from pushing the pill past `maxWidth` (normal word
+              // breaking stops at whitespace and can't break inside words).
               maxWidth: PILL_MAX_W_BODY,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
+              whiteSpace: "normal",
+              overflowWrap: "anywhere",
               // Warm two-layer shadow (matches GhostReference's palette).
               boxShadow: "0 1px 2px rgba(42, 36, 32, 0.12), 0 8px 18px -6px rgba(42, 36, 32, 0.22)",
               // Internal left accent rule — a 2px terracotta stripe.
@@ -14699,8 +14702,7 @@ function LabelOverlay({
   index,
   currentPage,
   camera,
-  viewport,
-  coordScale
+  viewport
 }) {
   const labels = overlays.filter((o) => o.kind === "label");
   const page = index.byPage.get(currentPage);
@@ -14727,8 +14729,7 @@ function LabelOverlay({
           a.position,
           page,
           camera,
-          viewport,
-          coordScale
+          viewport
         );
         return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           StickyLabel,
@@ -14742,7 +14743,7 @@ function LabelOverlay({
     }
   );
 }
-function computeScreenAnchor(bbox, where, page, camera, viewport, coordScale) {
+function computeScreenAnchor(bbox, where, page, camera, viewport) {
   const [x1, y1, x2, y2] = bbox;
   const pageCX = page.page_dimensions.width / 2;
   const pageCY = page.page_dimensions.height / 2;
@@ -14768,8 +14769,8 @@ function computeScreenAnchor(bbox, where, page, camera, viewport, coordScale) {
       px = (x1 + x2) / 2;
       py = y1;
   }
-  const screenX = viewport.width / 2 + camera.x + (px - pageCX) * coordScale * camera.scale;
-  const screenY = viewport.height / 2 + camera.y + (py - pageCY) * coordScale * camera.scale;
+  const screenX = viewport.width / 2 + camera.x + (px - pageCX) * camera.scale;
+  const screenY = viewport.height / 2 + camera.y + (py - pageCY) * camera.scale;
   return { x: screenX, y: screenY };
 }
 
@@ -14781,8 +14782,7 @@ function CalloutLabelOverlay({
   index,
   currentPage,
   camera,
-  viewport,
-  coordScale
+  viewport
 }) {
   const callouts = overlays.filter(
     (o) => o.kind === "callout" && o.action.label
@@ -14811,8 +14811,7 @@ function CalloutLabelOverlay({
           toHit.block.bbox,
           page,
           camera,
-          viewport,
-          coordScale
+          viewport
         );
         return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           CalloutLabelPill,
@@ -14827,7 +14826,7 @@ function CalloutLabelOverlay({
     }
   );
 }
-function computePillAnchor(fromBbox, toBbox, page, camera, viewport, coordScale) {
+function computePillAnchor(fromBbox, toBbox, page, camera, viewport) {
   const aCX = (fromBbox[0] + fromBbox[2]) / 2;
   const aCY = (fromBbox[1] + fromBbox[3]) / 2;
   const bCX = (toBbox[0] + toBbox[2]) / 2;
@@ -14844,8 +14843,8 @@ function computePillAnchor(fromBbox, toBbox, page, camera, viewport, coordScale)
   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) * coordScale * camera.scale;
-  const tipScreenY = viewport.height / 2 + camera.y + (toY - pageCY) * coordScale * camera.scale;
+  const tipScreenX = viewport.width / 2 + camera.x + (toX - pageCX) * camera.scale;
+  const tipScreenY = viewport.height / 2 + camera.y + (toY - pageCY) * camera.scale;
   const isVertical = Math.abs(dy) >= Math.abs(dx);
   const OFFSET = resolvePillOffset(viewport.width);
   const MAX_PILL_W = resolveMaxPillW(viewport.width);
@@ -14898,10 +14897,13 @@ function CalloutLabelPill({
         letterSpacing: 0.6,
         textTransform: "uppercase",
         fontWeight: 500,
-        whiteSpace: "nowrap",
+        // Wrap instead of truncating. Short labels stay single-line;
+        // longer ones grow taller rather than losing their tail to an
+        // ellipsis. `overflowWrap: 'anywhere'` guards against a stray
+        // long word pushing the pill past `maxWidth`.
         maxWidth: PILL_MAX_W_CAPS,
-        overflow: "hidden",
-        textOverflow: "ellipsis",
+        whiteSpace: "normal",
+        overflowWrap: "anywhere",
         boxShadow: "0 1px 2px rgba(42, 36, 32, 0.12), 0 8px 18px -6px rgba(42, 36, 32, 0.22)",
         // Accent rule on the "inward" edge (the one closest to the arrow).
         backgroundImage: spec.accentGradient,
@@ -14988,41 +14990,6 @@ 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();
@@ -15119,14 +15086,18 @@ var StoryboardEngine = class {
     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
+   * 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. On iOS Safari with many engine recreations
-   * this causes cumulative memory pressure and eventual tab reload.
+   * 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();
@@ -16279,70 +16250,42 @@ function TutorModeContainer({
   loadingComponent,
   onPageChange,
   storyboardProvider,
-  renderScale,
   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);
-  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;
-  (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 = () => {
-      const w = el.clientWidth;
-      const h = el.clientHeight;
-      setViewport(
-        (prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h }
-      );
-    };
+    const update = () => setViewport({ width: el.clientWidth, height: el.clientHeight });
     update();
     const ro = new ResizeObserver(update);
     ro.observe(el);
     return () => ro.disconnect();
   }, []);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!document2) {
       setPageProxy(null);
       return;
@@ -16357,40 +16300,34 @@ 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;
-    if (baseW === 0 || baseH === 0) return;
     if (narrationStore.getState().activeOverlays.length > 0) return;
-    const fit = Math.min(viewport.width / baseW, viewport.height / baseH) * 0.95;
+    const fit = Math.min(
+      viewport.width / page2.page_dimensions.width,
+      viewport.height / page2.page_dimensions.height
+    ) * 0.95;
     narrationStore.getState().setCamera({ scale: fit, x: 0, y: 0 });
-  }, [pageNumber, viewport, index, narrationStore, baseW, baseH]);
-  const viewportRef = (0, import_react58.useRef)(viewport);
-  (0, import_react58.useEffect)(() => {
-    viewportRef.current = viewport;
-  }, [viewport]);
-  const engineRef = (0, import_react58.useRef)(null);
-  (0, import_react58.useEffect)(() => {
-    const engine = new StoryboardEngine({
+  }, [pageNumber, viewport, index, narrationStore]);
+  const engineRef = (0, import_react57.useRef)(null);
+  (0, import_react57.useEffect)(() => {
+    engineRef.current = new StoryboardEngine({
       narrationStore,
       bboxIndex: index,
-      getViewport: () => viewportRef.current,
+      getViewport: () => viewport,
       minOverlayDurationMs
     });
-    engineRef.current = engine;
-    return () => {
-      engine.destroy();
-      if (engineRef.current === engine) engineRef.current = null;
-    };
-  }, [narrationStore, index, 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)(() => {
+    return () => engineRef.current?.destroy();
+  }, [narrationStore, index, viewport, minOverlayDurationMs]);
+  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);
@@ -16555,7 +16492,7 @@ function TutorModeContainer({
     embeddingProvider,
     llmTimeoutMs
   ]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!currentChunk) return;
     const t = setTimeout(() => {
       if (!engineRef.current) return;
@@ -16567,6 +16504,11 @@ 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__ */ (0, import_jsx_runtime55.jsxs)(
     "div",
@@ -16645,7 +16587,7 @@ function TutorModeContainer({
                     page,
                     index,
                     overlays: activeOverlays,
-                    coordScale
+                    scale: scale || 1
                   }
                 )
               ]
@@ -16658,8 +16600,7 @@ function TutorModeContainer({
               index,
               currentPage: pageNumber,
               camera,
-              viewport,
-              coordScale
+              viewport
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
@@ -16669,8 +16610,7 @@ function TutorModeContainer({
               index,
               currentPage: pageNumber,
               camera,
-              viewport,
-              coordScale
+              viewport
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(GhostReferenceOverlay, { overlays: activeOverlays, index })