pdfjs-reader-core 0.4.0 → 0.4.1

package/README.md

@@ -1271,6 +1271,8 @@ default. Clicking it clears every overlay and returns the camera to fit-page.
 | `showSubtitles` | `boolean` | `false` | Render a subtitle bar with the current chunk text |
 | `showExitButton` | `boolean` | `true` | Render the top-right "Reset view" button |
 | `onExitTutorMode` | `() => void` | — | Optional callback fired AFTER the reset — use it to also leave tutor mode |
+| `backgroundColor` | `string` | `'#ffffff'` | Surround colour visible around the PDF when the viewport is larger than the page fit. v0.4.1+ |
+| `loadingComponent` | `ReactNode` | default spinner | Custom loading state shown while the PDF document/page is still fetching. v0.4.1+ |
 | `className` | `string` | — | Passes through to the root container for custom theming |
 
 ### LlmConfig

package/dist/index.cjs

@@ -13806,7 +13806,20 @@ init_camera_math();
 var DEFAULT_MIN_OVERLAY_MS = 3500;
 var StoryboardEngine = class {
   constructor(deps) {
-    this.pendingTimers = /* @__PURE__ */ new Set();
+    /**
+     * Timers that schedule the START of a step (via `setTimeout(runStep, at_ms)`).
+     * These are storyboard-scoped: when a new storyboard arrives, anything still
+     * pending should be abandoned.
+     */
+    this.pendingStepTimers = /* @__PURE__ */ new Set();
+    /**
+     * Timers that auto-REMOVE an already-placed overlay after its visible
+     * duration. Keyed by overlay id so we can cancel one specifically. These are
+     * NOT cancelled when a new storyboard starts — otherwise the still-visible
+     * overlay from the previous beat would get stranded in the store forever
+     * (the "stuck spotlight" bug).
+     */
+    this.overlayRemovalTimers = /* @__PURE__ */ new Map();
     this.currentStoryboardId = 0;
     this.deps = deps;
   }
@@ -13849,13 +13862,13 @@ var StoryboardEngine = class {
         if (storyboardId !== this.currentStoryboardId) return;
         this.runStep(step);
       }, step.at_ms);
-      this.pendingTimers.add(timer);
+      this.pendingStepTimers.add(timer);
     }
     const markExecuting = setTimeout(() => {
       if (storyboardId !== this.currentStoryboardId) return;
       narrationStore.getState().setEngineStatus("executing");
     }, 0);
-    this.pendingTimers.add(markExecuting);
+    this.pendingStepTimers.add(markExecuting);
     const last = steps[steps.length - 1];
     if (last) {
       const totalMs = last.at_ms + last.duration_ms;
@@ -13863,18 +13876,29 @@ var StoryboardEngine = class {
         if (storyboardId !== this.currentStoryboardId) return;
         narrationStore.getState().setEngineStatus("idle");
       }, totalMs + 50);
-      this.pendingTimers.add(markIdle);
+      this.pendingStepTimers.add(markIdle);
     }
   }
-  /** Abort all pending steps and set engine status to idle. */
+  /**
+   * Abort pending STEP dispatches from the current storyboard. Overlay
+   * removal timers are left alone so already-visible overlays still auto-
+   * expire on their own schedule. To force-clear every overlay, call
+   * `resetVisuals()` instead.
+   */
   cancelPending() {
-    for (const t of this.pendingTimers) clearTimeout(t);
-    this.pendingTimers.clear();
+    for (const t of this.pendingStepTimers) clearTimeout(t);
+    this.pendingStepTimers.clear();
     this.deps.narrationStore.getState().setEngineStatus("idle");
   }
-  /** Reset visuals: clear overlays, fit camera back to page. */
+  /** Cancel every removal timer (used by resetVisuals only). */
+  cancelAllRemovalTimers() {
+    for (const t of this.overlayRemovalTimers.values()) clearTimeout(t);
+    this.overlayRemovalTimers.clear();
+  }
+  /** Reset visuals: clear overlays, cancel every removal timer, fit camera. */
   resetVisuals() {
     this.cancelPending();
+    this.cancelAllRemovalTimers();
     const { narrationStore, bboxIndex, getViewport } = this.deps;
     narrationStore.getState().clearOverlays();
     const viewport = getViewport();
@@ -13945,8 +13969,9 @@ var StoryboardEngine = class {
     narrationStore.getState().addOverlay(overlay);
     const timer = setTimeout(() => {
       narrationStore.getState().removeOverlay(overlay.id);
+      this.overlayRemovalTimers.delete(overlay.id);
     }, visibleMs);
-    this.pendingTimers.add(timer);
+    this.overlayRemovalTimers.set(overlay.id, timer);
     return true;
   }
   applyCamera(action, durationMs) {
@@ -14997,6 +15022,8 @@ function TutorModeContainer({
   showExitButton = true,
   onExitTutorMode,
   minOverlayDurationMs,
+  backgroundColor = "#ffffff",
+  loadingComponent,
   className
 }) {
   const containerRef = (0, import_react56.useRef)(null);
@@ -15161,6 +15188,7 @@ function TutorModeContainer({
   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_runtime52.jsxs)(
     "div",
     {
@@ -15171,12 +15199,12 @@ function TutorModeContainer({
         width: "100%",
         height: "100%",
         overflow: "hidden",
-        background: "#111"
+        background: backgroundColor
       },
       "data-role": "tutor-mode-container",
-      "data-page-loaded": page ? "true" : "false",
+      "data-page-loaded": isReady ? "true" : "false",
       children: [
-        showExitButton ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        showExitButton && isReady ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           "button",
           {
             onClick: () => {
@@ -15193,7 +15221,9 @@ function TutorModeContainer({
               padding: "8px 14px",
               border: "none",
               borderRadius: 8,
-              background: "rgba(255,255,255,0.12)",
+              // Dark translucent pill with white text reads cleanly on both
+              // light and dark container backgrounds.
+              background: "rgba(17,24,39,0.72)",
               color: "white",
               cursor: "pointer",
               fontFamily: "system-ui, sans-serif",
@@ -15205,7 +15235,7 @@ function TutorModeContainer({
             children: "Reset view"
           }
         ) : null,
-        page ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(CameraView, { camera, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+        isReady ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(CameraView, { camera, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
           "div",
           {
             style: {
@@ -15240,12 +15270,73 @@ function TutorModeContainer({
               )
             ]
           }
-        ) }) : null,
+        ) }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TutorLoadingState, { custom: loadingComponent }),
         showSubtitles ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SubtitleBar, { text: currentChunk ?? null }) : null
       ]
     }
   );
 }
+function TutorLoadingState({
+  custom
+}) {
+  if (custom) {
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        "data-role": "tutor-loading",
+        children: custom
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 12,
+        color: "rgba(0,0,0,0.55)",
+        fontFamily: "system-ui, sans-serif",
+        fontSize: 13
+      },
+      "data-role": "tutor-loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          "div",
+          {
+            "aria-hidden": true,
+            style: {
+              width: 36,
+              height: 36,
+              borderRadius: "50%",
+              border: "3px solid rgba(0,0,0,0.1)",
+              borderTopColor: "rgba(0,0,0,0.45)",
+              animation: "pdf-tutor-spin 0.9s linear infinite"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { children: "Loading document\u2026" }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("style", { children: `
+        @keyframes pdf-tutor-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      ` })
+      ]
+    }
+  );
+}
 
 // src/director/transformers-embedding.ts
 var loaded = null;