pdfjs-reader-core 0.5.7 → 0.5.9

package/dist/index.d.cts

@@ -1858,40 +1858,19 @@ interface TutorModeContainerProps {
      * Added in v0.4.2.
      */
     onPageChange?: (page: number) => void;
-    /**
-     * PDF-points → CSS-pixels scale factor. Direct override: when set, the
-     * tutor renders the PDF at exactly this scale regardless of source DPI.
-     * Takes precedence over `scale` when both are passed.
-     *
-     * If neither `renderScale` nor `scale` is passed:
-     *   - Desktop (`pointer: fine`): defaults to `page.dpi / 72` — identical
-     *     to pre-v0.6 behavior.
-     *   - Touch (`pointer: coarse`): defaults to fit-to-viewport — much
-     *     smaller canvas on mobile, sidesteps the iOS Safari crash root
-     *     cause even when bbox data ships at very high source DPI.
-     *
-     * Added in v0.6.0.
-     */
-    renderScale?: number;
     className?: string;
 }
 /** Build a cross-page/block index from the raw bbox list. */
 declare function buildBBoxIndex(bboxData: PageBBoxData[]): BBoxIndex;
-declare function TutorModeContainer({ pageNumber, bboxData, narrationStore, scale, rotation, currentChunk, llm, idleTimeoutMs, llmTimeoutMs, embeddingProvider, showSubtitles, showExitButton, onExitTutorMode, minOverlayDurationMs, backgroundColor, loadingComponent, onPageChange, storyboardProvider, renderScale, className, }: TutorModeContainerProps): react_jsx_runtime.JSX.Element;
+declare function TutorModeContainer({ pageNumber, bboxData, narrationStore, scale, rotation, currentChunk, llm, idleTimeoutMs, llmTimeoutMs, embeddingProvider, showSubtitles, showExitButton, onExitTutorMode, minOverlayDurationMs, backgroundColor, loadingComponent, onPageChange, storyboardProvider, className, }: TutorModeContainerProps): react_jsx_runtime.JSX.Element;
 
 interface CinemaLayerProps {
     page: PageBBoxData;
     index: BBoxIndex;
     overlays: ActiveOverlay[];
-    /**
-     * Factor converting source-DPI pixel coords (the bbox space every
-     * overlay primitive uses internally) into CSS-pixel coords. Applied
-     * as `transform: scale(coordScale)` on the outer element so individual
-     * overlay components don't need to know about CSS vs DPI space.
-     */
-    coordScale: number;
+    scale: number;
 }
-declare function CinemaLayer({ page, index, overlays, coordScale, }: CinemaLayerProps): react_jsx_runtime.JSX.Element | null;
+declare function CinemaLayer({ page, index, overlays, scale, }: CinemaLayerProps): react_jsx_runtime.JSX.Element;
 
 interface CameraViewProps {
     camera: CameraState;
@@ -2086,14 +2065,18 @@ declare class StoryboardEngine {
     /** 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 (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(): void;
     /** Test-only — exposes internal queue sizes for regression tests. */

package/dist/index.d.ts

@@ -1858,40 +1858,19 @@ interface TutorModeContainerProps {
      * Added in v0.4.2.
      */
     onPageChange?: (page: number) => void;
-    /**
-     * PDF-points → CSS-pixels scale factor. Direct override: when set, the
-     * tutor renders the PDF at exactly this scale regardless of source DPI.
-     * Takes precedence over `scale` when both are passed.
-     *
-     * If neither `renderScale` nor `scale` is passed:
-     *   - Desktop (`pointer: fine`): defaults to `page.dpi / 72` — identical
-     *     to pre-v0.6 behavior.
-     *   - Touch (`pointer: coarse`): defaults to fit-to-viewport — much
-     *     smaller canvas on mobile, sidesteps the iOS Safari crash root
-     *     cause even when bbox data ships at very high source DPI.
-     *
-     * Added in v0.6.0.
-     */
-    renderScale?: number;
     className?: string;
 }
 /** Build a cross-page/block index from the raw bbox list. */
 declare function buildBBoxIndex(bboxData: PageBBoxData[]): BBoxIndex;
-declare function TutorModeContainer({ pageNumber, bboxData, narrationStore, scale, rotation, currentChunk, llm, idleTimeoutMs, llmTimeoutMs, embeddingProvider, showSubtitles, showExitButton, onExitTutorMode, minOverlayDurationMs, backgroundColor, loadingComponent, onPageChange, storyboardProvider, renderScale, className, }: TutorModeContainerProps): react_jsx_runtime.JSX.Element;
+declare function TutorModeContainer({ pageNumber, bboxData, narrationStore, scale, rotation, currentChunk, llm, idleTimeoutMs, llmTimeoutMs, embeddingProvider, showSubtitles, showExitButton, onExitTutorMode, minOverlayDurationMs, backgroundColor, loadingComponent, onPageChange, storyboardProvider, className, }: TutorModeContainerProps): react_jsx_runtime.JSX.Element;
 
 interface CinemaLayerProps {
     page: PageBBoxData;
     index: BBoxIndex;
     overlays: ActiveOverlay[];
-    /**
-     * Factor converting source-DPI pixel coords (the bbox space every
-     * overlay primitive uses internally) into CSS-pixel coords. Applied
-     * as `transform: scale(coordScale)` on the outer element so individual
-     * overlay components don't need to know about CSS vs DPI space.
-     */
-    coordScale: number;
+    scale: number;
 }
-declare function CinemaLayer({ page, index, overlays, coordScale, }: CinemaLayerProps): react_jsx_runtime.JSX.Element | null;
+declare function CinemaLayer({ page, index, overlays, scale, }: CinemaLayerProps): react_jsx_runtime.JSX.Element;
 
 interface CameraViewProps {
     camera: CameraState;
@@ -2086,14 +2065,18 @@ declare class StoryboardEngine {
     /** 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 (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(): void;
     /** Test-only — exposes internal queue sizes for regression tests. */

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 isTouchDevice2 = useIsTouchDevice();
+      const isTouchDevice = 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 && isTouchDevice2,
+        enabled: enableTouchGestures && isTouchDevice,
         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 isTouchDevice2 = useIsTouchDevice();
+      const isTouchDevice = 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 && isTouchDevice2
+        enabled: enableTouchGestures && isTouchDevice
       });
       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 isTouchDevice2 = useIsTouchDevice();
+      const isTouchDevice = 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 && isTouchDevice2
+        enabled: enableTouchGestures && isTouchDevice
       });
       const setContainerRef = useCallback31(
         (element) => {
@@ -13374,13 +13374,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__ */ jsxs36(
     "svg",
     {
@@ -13455,7 +13455,12 @@ function AnimatedUnderline({ bbox, action }) {
 // src/components/TutorMode/AnimatedHighlight.tsx
 import { motion as motion4 } from "framer-motion";
 import { jsx as jsx44 } from "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);
@@ -13464,7 +13469,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}
@@ -13477,11 +13482,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__ */ jsx44(
     "svg",
     {
@@ -13501,6 +13506,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 },
@@ -13512,7 +13518,6 @@ function AnimatedHighlight({ bbox, action }) {
 }
 
 // src/components/TutorMode/PulseOverlay.tsx
-import { useId as useId2 } from "react";
 import { motion as motion5 } from "framer-motion";
 import { jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
 var INTENSITY = {
@@ -13521,7 +13526,6 @@ var INTENSITY = {
   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);
@@ -13530,13 +13534,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;
@@ -13556,22 +13560,18 @@ function PulseOverlay({ bbox, action }) {
       },
       "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 + 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: {
@@ -13702,7 +13702,7 @@ 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 jsxs38 } from "react/jsx-runtime";
 function centerOf(b) {
@@ -13740,7 +13740,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 = useId3();
+  const markerId = useId2();
   const glowId = `${markerId}-glow`;
   const { from, to } = edgePoints(fromBbox, toBbox);
   const d = arrowPath(from, to, action.curve);
@@ -13913,9 +13913,8 @@ function CinemaLayer({
   page,
   index,
   overlays,
-  coordScale
+  scale
 }) {
-  if (overlays.length === 0) return null;
   return /* @__PURE__ */ jsx48(
     "div",
     {
@@ -13924,7 +13923,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",
@@ -14409,10 +14408,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.
@@ -14514,8 +14517,7 @@ function LabelOverlay({
   index,
   currentPage,
   camera,
-  viewport,
-  coordScale
+  viewport
 }) {
   const labels = overlays.filter((o) => o.kind === "label");
   const page = index.byPage.get(currentPage);
@@ -14542,8 +14544,7 @@ function LabelOverlay({
           a.position,
           page,
           camera,
-          viewport,
-          coordScale
+          viewport
         );
         return /* @__PURE__ */ jsx52(
           StickyLabel,
@@ -14557,7 +14558,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;
@@ -14583,8 +14584,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 };
 }
 
@@ -14596,8 +14597,7 @@ function CalloutLabelOverlay({
   index,
   currentPage,
   camera,
-  viewport,
-  coordScale
+  viewport
 }) {
   const callouts = overlays.filter(
     (o) => o.kind === "callout" && o.action.label
@@ -14626,8 +14626,7 @@ function CalloutLabelOverlay({
           toHit.block.bbox,
           page,
           camera,
-          viewport,
-          coordScale
+          viewport
         );
         return /* @__PURE__ */ jsx53(
           CalloutLabelPill,
@@ -14642,7 +14641,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;
@@ -14659,8 +14658,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);
@@ -14713,10 +14712,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,
@@ -14803,41 +14805,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();
@@ -14934,14 +14901,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();
@@ -16094,7 +16065,6 @@ function TutorModeContainer({
   loadingComponent,
   onPageChange,
   storyboardProvider,
-  renderScale,
   className
 }) {
   const containerRef = useRef27(null);
@@ -16109,27 +16079,6 @@ 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;
@@ -16145,13 +16094,7 @@ function TutorModeContainer({
   useEffect28(() => {
     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);
@@ -16179,29 +16122,23 @@ 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 / 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 = useRef27(viewport);
-  useEffect28(() => {
-    viewportRef.current = viewport;
-  }, [viewport]);
+  }, [pageNumber, viewport, index, narrationStore]);
   const engineRef = useRef27(null);
   useEffect28(() => {
-    const engine = new StoryboardEngine({
+    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]);
+    return () => engineRef.current?.destroy();
+  }, [narrationStore, index, viewport, minOverlayDurationMs]);
   const abortRef = useRef27(null);
   const debounceRef = useRef27(null);
   const lastChunkRef = useRef27(null);
@@ -16382,6 +16319,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__ */ jsxs41(
     "div",
@@ -16460,7 +16402,7 @@ function TutorModeContainer({
                     page,
                     index,
                     overlays: activeOverlays,
-                    coordScale
+                    scale: scale || 1
                   }
                 )
               ]
@@ -16473,8 +16415,7 @@ function TutorModeContainer({
               index,
               currentPage: pageNumber,
               camera,
-              viewport,
-              coordScale
+              viewport
             }
           ),
           /* @__PURE__ */ jsx55(
@@ -16484,8 +16425,7 @@ function TutorModeContainer({
               index,
               currentPage: pageNumber,
               camera,
-              viewport,
-              coordScale
+              viewport
             }
           ),
           /* @__PURE__ */ jsx55(GhostReferenceOverlay, { overlays: activeOverlays, index })