pdfjs-reader-core 0.5.5 → 0.5.7

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 isTouchDevice = useIsTouchDevice();
+      const isTouchDevice2 = 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 && isTouchDevice,
+        enabled: enableTouchGestures && isTouchDevice2,
         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 isTouchDevice = useIsTouchDevice();
+      const isTouchDevice2 = 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 && isTouchDevice
+        enabled: enableTouchGestures && isTouchDevice2
       });
       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 isTouchDevice = useIsTouchDevice();
+      const isTouchDevice2 = 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 && isTouchDevice
+        enabled: enableTouchGestures && isTouchDevice2
       });
       const setContainerRef = (0, import_react40.useCallback)(
         (element) => {
@@ -13559,12 +13559,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__ */ (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,9 @@ 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 WASH = "rgba(195, 145, 10, 0.32)";
 function AnimatedHighlight({ bbox, action }) {
   const [x1, y1, x2, y2] = bbox;
   const h = Math.max(1, y2 - y1);
@@ -13638,7 +13648,6 @@ 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 taper = Math.min(6, h * 0.2);
@@ -13653,49 +13662,42 @@ function AnimatedHighlight({ bbox, action }) {
     L ${x1 - 2} ${yBot - taper}
     Z
   `;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  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__ */ (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,
+          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
+var import_react56 = require("react");
 var import_framer_motion5 = require("framer-motion");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var INTENSITY = {
@@ -13704,6 +13706,7 @@ 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);
@@ -13712,29 +13715,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;
+  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__ */ (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"
       },
       "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 + 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: {
@@ -13907,12 +13929,27 @@ function CalloutArrow({ fromBbox, toBbox, action }) {
   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"
       },
@@ -14061,8 +14098,9 @@ function CinemaLayer({
   page,
   index,
   overlays,
-  scale
+  coordScale
 }) {
+  if (overlays.length === 0) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "div",
     {
@@ -14071,7 +14109,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",
@@ -14661,7 +14699,8 @@ function LabelOverlay({
   index,
   currentPage,
   camera,
-  viewport
+  viewport,
+  coordScale
 }) {
   const labels = overlays.filter((o) => o.kind === "label");
   const page = index.byPage.get(currentPage);
@@ -14688,7 +14727,8 @@ function LabelOverlay({
           a.position,
           page,
           camera,
-          viewport
+          viewport,
+          coordScale
         );
         return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           StickyLabel,
@@ -14702,7 +14742,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;
@@ -14728,8 +14768,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 };
 }
 
@@ -14741,7 +14781,8 @@ function CalloutLabelOverlay({
   index,
   currentPage,
   camera,
-  viewport
+  viewport,
+  coordScale
 }) {
   const callouts = overlays.filter(
     (o) => o.kind === "callout" && o.action.label
@@ -14770,7 +14811,8 @@ function CalloutLabelOverlay({
           toHit.block.bbox,
           page,
           camera,
-          viewport
+          viewport,
+          coordScale
         );
         return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           CalloutLabelPill,
@@ -14785,7 +14827,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;
@@ -14802,8 +14844,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);
@@ -14946,6 +14988,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();
@@ -15036,11 +15113,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();
@@ -16181,6 +16279,7 @@ function TutorModeContainer({
   loadingComponent,
   onPageChange,
   storyboardProvider,
+  renderScale,
   className
 }) {
   const containerRef = (0, import_react58.useRef)(null);
@@ -16195,6 +16294,27 @@ function TutorModeContainer({
   const [viewport, setViewport] = (0, import_react58.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)(() => {
     if (numPages <= 0) return;
     if (pageNumber < 1 || pageNumber > numPages) return;
@@ -16210,7 +16330,13 @@ function TutorModeContainer({
   (0, import_react58.useEffect)(() => {
     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);
@@ -16238,23 +16364,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 = (0, import_react58.useRef)(viewport);
+  (0, import_react58.useEffect)(() => {
+    viewportRef.current = viewport;
+  }, [viewport]);
   const engineRef = (0, import_react58.useRef)(null);
   (0, import_react58.useEffect)(() => {
-    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 = (0, import_react58.useRef)(null);
   const debounceRef = (0, import_react58.useRef)(null);
   const lastChunkRef = (0, import_react58.useRef)(null);
@@ -16435,11 +16567,6 @@ 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",
@@ -16518,7 +16645,7 @@ function TutorModeContainer({
                     page,
                     index,
                     overlays: activeOverlays,
-                    scale: scale || 1
+                    coordScale
                   }
                 )
               ]
@@ -16531,7 +16658,8 @@ function TutorModeContainer({
               index,
               currentPage: pageNumber,
               camera,
-              viewport
+              viewport,
+              coordScale
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
@@ -16541,7 +16669,8 @@ function TutorModeContainer({
               index,
               currentPage: pageNumber,
               camera,
-              viewport
+              viewport,
+              coordScale
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(GhostReferenceOverlay, { overlays: activeOverlays, index })