pdfjs-reader-core 0.2.17 → 0.4.0

package/dist/index.js

@@ -117,8 +117,8 @@ async function loadDocument(options) {
     signal.addEventListener("abort", abortHandler);
   }
   if (onProgress) {
-    loadingTask.onProgress = ({ loaded, total }) => {
-      onProgress({ loaded, total });
+    loadingTask.onProgress = ({ loaded: loaded2, total }) => {
+      onProgress({ loaded: loaded2, total });
     };
   }
   let document2;
@@ -248,9 +248,9 @@ function loadDocumentWithCallbacks(options) {
     };
     abortController.signal.addEventListener("abort", abortHandler);
     if (onProgress) {
-      loadingTask.onProgress = ({ loaded, total }) => {
+      loadingTask.onProgress = ({ loaded: loaded2, total }) => {
         if (!abortController.signal.aborted) {
-          onProgress({ loaded, total });
+          onProgress({ loaded: loaded2, total });
         }
       };
     }
@@ -605,13 +605,13 @@ function createViewerStore(initialOverrides = {}) {
     },
     zoomIn: () => {
       const { scale } = get();
-      const currentIndex = ZOOM_LEVELS.findIndex((z) => z >= scale);
+      const currentIndex = ZOOM_LEVELS.findIndex((z2) => z2 >= scale);
       const nextIndex = Math.min(currentIndex + 1, ZOOM_LEVELS.length - 1);
       set({ scale: ZOOM_LEVELS[nextIndex] ?? MAX_SCALE });
     },
     zoomOut: () => {
       const { scale } = get();
-      const currentIndex = ZOOM_LEVELS.findIndex((z) => z >= scale);
+      const currentIndex = ZOOM_LEVELS.findIndex((z2) => z2 >= scale);
       const prevIndex = Math.max(currentIndex - 1, 0);
       set({ scale: ZOOM_LEVELS[prevIndex] ?? MIN_SCALE });
     },
@@ -1760,6 +1760,113 @@ var init_coordinates = __esm({
   }
 });
 
+// src/utils/page-turn-sound.ts
+function getAudioContext() {
+  if (typeof window === "undefined") return null;
+  if (!audioContext) {
+    try {
+      audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    } catch {
+      return null;
+    }
+  }
+  return audioContext;
+}
+function playPageTurnSound(volume = 0.3) {
+  const ctx = getAudioContext();
+  if (!ctx) return;
+  if (ctx.state === "suspended") {
+    ctx.resume();
+  }
+  const now = ctx.currentTime;
+  const duration = 0.35;
+  const bufferSize = Math.floor(ctx.sampleRate * duration);
+  const noiseBuffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
+  const data = noiseBuffer.getChannelData(0);
+  for (let i = 0; i < bufferSize; i++) {
+    data[i] = Math.random() * 2 - 1;
+  }
+  const noiseSource = ctx.createBufferSource();
+  noiseSource.buffer = noiseBuffer;
+  const bandpass = ctx.createBiquadFilter();
+  bandpass.type = "bandpass";
+  bandpass.frequency.setValueAtTime(3e3, now);
+  bandpass.frequency.exponentialRampToValueAtTime(800, now + duration * 0.6);
+  bandpass.Q.setValueAtTime(0.8, now);
+  const highpass = ctx.createBiquadFilter();
+  highpass.type = "highpass";
+  highpass.frequency.setValueAtTime(400, now);
+  highpass.frequency.linearRampToValueAtTime(200, now + duration);
+  const envelope = ctx.createGain();
+  envelope.gain.setValueAtTime(0, now);
+  envelope.gain.linearRampToValueAtTime(volume * 0.6, now + 0.02);
+  envelope.gain.setValueAtTime(volume * 0.6, now + 0.05);
+  envelope.gain.linearRampToValueAtTime(volume, now + duration * 0.3);
+  envelope.gain.exponentialRampToValueAtTime(1e-3, now + duration);
+  const snapBuffer = ctx.createBuffer(1, Math.floor(ctx.sampleRate * 0.08), ctx.sampleRate);
+  const snapData = snapBuffer.getChannelData(0);
+  for (let i = 0; i < snapData.length; i++) {
+    snapData[i] = Math.random() * 2 - 1;
+  }
+  const snapSource = ctx.createBufferSource();
+  snapSource.buffer = snapBuffer;
+  const snapFilter = ctx.createBiquadFilter();
+  snapFilter.type = "bandpass";
+  snapFilter.frequency.setValueAtTime(2e3, now);
+  snapFilter.Q.setValueAtTime(1.5, now);
+  const snapEnvelope = ctx.createGain();
+  snapEnvelope.gain.setValueAtTime(0, now);
+  snapEnvelope.gain.setValueAtTime(0, now + duration * 0.7);
+  snapEnvelope.gain.linearRampToValueAtTime(volume * 0.8, now + duration * 0.75);
+  snapEnvelope.gain.exponentialRampToValueAtTime(1e-3, now + duration);
+  noiseSource.connect(bandpass);
+  bandpass.connect(highpass);
+  highpass.connect(envelope);
+  envelope.connect(ctx.destination);
+  snapSource.connect(snapFilter);
+  snapFilter.connect(snapEnvelope);
+  snapEnvelope.connect(ctx.destination);
+  noiseSource.start(now);
+  noiseSource.stop(now + duration);
+  snapSource.start(now);
+  snapSource.stop(now + duration);
+}
+var audioContext;
+var init_page_turn_sound = __esm({
+  "src/utils/page-turn-sound.ts"() {
+    "use strict";
+    audioContext = null;
+  }
+});
+
+// src/utils/camera-math.ts
+function fitPageScale(page, viewport) {
+  const sx = viewport.width / page.width;
+  const sy = viewport.height / page.height;
+  return Math.min(sx, sy);
+}
+function computeCameraForBlock(bbox, page, viewport, opts = {}) {
+  const targetScale = opts.targetScale ?? 1.5;
+  const paddingPdf = opts.paddingPdf ?? 80;
+  const [x1, y1, x2, y2] = bbox;
+  const blockW = Math.max(1, x2 - x1 + paddingPdf * 2);
+  const blockH = Math.max(1, y2 - y1 + paddingPdf * 2);
+  const blockCX = (x1 + x2) / 2;
+  const blockCY = (y1 + y2) / 2;
+  const fitBlock = Math.min(viewport.width / blockW, viewport.height / blockH);
+  const scale = fitBlock * targetScale;
+  const pageCX = page.width / 2;
+  const pageCY = page.height / 2;
+  const x = (pageCX - blockCX) * scale;
+  const y = (pageCY - blockCY) * scale;
+  return { scale, x, y };
+}
+var init_camera_math = __esm({
+  "src/utils/camera-math.ts"() {
+    "use strict";
+  }
+});
+
 // src/utils/index.ts
 var init_utils = __esm({
   "src/utils/index.ts"() {
@@ -1774,6 +1881,7 @@ var init_utils = __esm({
     init_agent_api();
     init_text_search();
     init_coordinates();
+    init_page_turn_sound();
   }
 });
 
@@ -2177,6 +2285,78 @@ var init_student_store = __esm({
   }
 });
 
+// src/store/narration-store.ts
+import { createStore as createStore6 } from "zustand/vanilla";
+function createNarrationStore(overrides = {}) {
+  return createStore6()((set) => ({
+    ...initialState6,
+    ...overrides,
+    setCurrentChunk: (chunk) => set({ currentChunk: chunk }),
+    setCurrentPage: (page) => set({ currentPage: page }),
+    pushChunkHistory: (entry) => set((state) => ({
+      chunkHistory: [
+        ...state.chunkHistory.slice(-(MAX_HISTORY - 1)),
+        entry
+      ]
+    })),
+    setCamera: (camera) => set((state) => ({ camera: { ...state.camera, ...camera } })),
+    addOverlay: (overlay) => set((state) => ({ activeOverlays: [...state.activeOverlays, overlay] })),
+    removeOverlay: (id) => set((state) => ({
+      activeOverlays: state.activeOverlays.filter((o) => o.id !== id)
+    })),
+    clearOverlays: (predicate) => set((state) => ({
+      activeOverlays: predicate ? state.activeOverlays.filter((o) => !predicate(o)) : []
+    })),
+    setEngineStatus: (s) => set({ engineStatus: s }),
+    setLlmStatus: (s, error = null) => set({ llmStatus: s, lastError: error }),
+    setLastStoryboard: (sb) => set({ lastStoryboard: sb }),
+    setPaused: (paused) => set({ isPaused: paused }),
+    appendDebugEvent: (event) => set((state) => {
+      debugEventCounter += 1;
+      const next = {
+        ...event,
+        id: `dbg-${debugEventCounter}`,
+        timestamp: Date.now()
+      };
+      return {
+        debugEvents: [
+          ...state.debugEvents.slice(-(MAX_DEBUG_EVENTS - 1)),
+          next
+        ]
+      };
+    }),
+    clearDebugEvents: () => set({ debugEvents: [] }),
+    reset: () => set(initialState6)
+  }));
+}
+function makeOverlayId(action) {
+  overlayIdCounter += 1;
+  return `ov-${action.type}-${overlayIdCounter}-${Date.now()}`;
+}
+var MAX_HISTORY, initialState6, MAX_DEBUG_EVENTS, debugEventCounter, overlayIdCounter;
+var init_narration_store = __esm({
+  "src/store/narration-store.ts"() {
+    "use strict";
+    MAX_HISTORY = 5;
+    initialState6 = {
+      currentChunk: null,
+      currentPage: 1,
+      chunkHistory: [],
+      camera: { scale: 1, x: 0, y: 0, easing: "ease-in-out" },
+      activeOverlays: [],
+      engineStatus: "idle",
+      llmStatus: "idle",
+      lastStoryboard: null,
+      lastError: null,
+      isPaused: false,
+      debugEvents: []
+    };
+    MAX_DEBUG_EVENTS = 50;
+    debugEventCounter = 0;
+    overlayIdCounter = 0;
+  }
+});
+
 // src/store/index.ts
 var init_store = __esm({
   "src/store/index.ts"() {
@@ -2186,6 +2366,7 @@ var init_store = __esm({
     init_search_store();
     init_agent_store();
     init_student_store();
+    init_narration_store();
   }
 });
 
@@ -2195,7 +2376,7 @@ import { useStore } from "zustand";
 import { jsx } from "react/jsx-runtime";
 function PDFViewerProvider({
   children,
-  initialState: initialState6,
+  initialState: initialState7,
   theme = "light",
   defaultSidebarPanel = "thumbnails",
   studentMode: _studentMode = false
@@ -2207,22 +2388,22 @@ function PDFViewerProvider({
   const studentStoreRef = useRef(null);
   if (!viewerStoreRef.current) {
     viewerStoreRef.current = createViewerStore({
-      ...initialState6?.viewer,
+      ...initialState7?.viewer,
       theme,
       sidebarPanel: defaultSidebarPanel
     });
   }
   if (!annotationStoreRef.current) {
-    annotationStoreRef.current = createAnnotationStore(initialState6?.annotation);
+    annotationStoreRef.current = createAnnotationStore(initialState7?.annotation);
   }
   if (!searchStoreRef.current) {
-    searchStoreRef.current = createSearchStore(initialState6?.search);
+    searchStoreRef.current = createSearchStore(initialState7?.search);
   }
   if (!agentStoreRef.current) {
-    agentStoreRef.current = createAgentStore(initialState6?.agent);
+    agentStoreRef.current = createAgentStore(initialState7?.agent);
   }
   if (!studentStoreRef.current) {
-    studentStoreRef.current = createStudentStore(initialState6?.student);
+    studentStoreRef.current = createStudentStore(initialState7?.student);
   }
   useEffect(() => {
     return () => {
@@ -3536,8 +3717,8 @@ var init_PluginManager = __esm({
       /**
        * Get toolbar items by position
        */
-      getToolbarItemsByPosition(position) {
-        return this.getToolbarItems().filter((item) => item.position === position);
+      getToolbarItemsByPosition(position2) {
+        return this.getToolbarItems().filter((item) => item.position === position2);
       }
       /**
        * Get all sidebar panels from all plugins
@@ -4644,7 +4825,7 @@ var init_MobileToolbar = __esm({
       sidebarOpen,
       theme,
       onThemeChange,
-      position = "bottom",
+      position: position2 = "bottom",
       className
     }) {
       const [showMoreMenu, setShowMoreMenu] = useState5(false);
@@ -4678,8 +4859,8 @@ var init_MobileToolbar = __esm({
             "bg-white dark:bg-gray-800",
             "border-gray-200 dark:border-gray-700",
             "px-2 py-1 safe-area-inset",
-            position === "top" && "top-0 border-b",
-            position === "bottom" && "bottom-0 border-t",
+            position2 === "top" && "top-0 border-b",
+            position2 === "bottom" && "bottom-0 border-t",
             className
           ),
           children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-1", children: [
@@ -4805,7 +4986,7 @@ var init_MobileToolbar = __esm({
                       "bg-white dark:bg-gray-800",
                       "rounded-lg shadow-lg",
                       "border border-gray-200 dark:border-gray-700",
-                      position === "bottom" ? "bottom-full mb-2" : "top-full mt-2"
+                      position2 === "bottom" ? "bottom-full mb-2" : "top-full mt-2"
                     ),
                     children: [
                       /* @__PURE__ */ jsx3("div", { className: "px-2 py-1 text-xs text-gray-500 dark:text-gray-400 font-medium", children: "Theme" }),
@@ -6631,7 +6812,7 @@ var init_AnnotationToolbar = __esm({
       onShapeTypeChange: onShapeTypeChangeProp,
       onColorChange: onColorChangeProp,
       onStrokeWidthChange: onStrokeWidthChangeProp,
-      position = "top",
+      position: position2 = "top",
       className
     }) {
       const storeActiveTool = useAnnotationStore((s) => s.activeAnnotationTool);
@@ -6681,9 +6862,9 @@ var init_AnnotationToolbar = __esm({
         {
           className: cn(
             "annotation-toolbar flex items-center gap-1 p-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700",
-            position === "floating" && "fixed bottom-20 left-1/2 -translate-x-1/2 z-50",
-            position === "top" && "sticky top-0 z-40",
-            position === "bottom" && "sticky bottom-0 z-40",
+            position2 === "floating" && "fixed bottom-20 left-1/2 -translate-x-1/2 z-50",
+            position2 === "top" && "sticky top-0 z-40",
+            position2 === "bottom" && "sticky bottom-0 z-40",
             !isActive && "opacity-90",
             className
           ),
@@ -8332,7 +8513,7 @@ var init_SelectionToolbar = __esm({
       activeColor = "yellow",
       className
     }) {
-      const [position, setPosition] = useState16({ top: 0, left: 0, visible: false });
+      const [position2, setPosition] = useState16({ top: 0, left: 0, visible: false });
       const toolbarRef = useRef14(null);
       useEffect17(() => {
         if (selection && selection.text && selection.rects.length > 0) {
@@ -8371,7 +8552,7 @@ var init_SelectionToolbar = __esm({
       const handleCopy = useCallback27(() => {
         onCopy?.();
       }, [onCopy]);
-      if (!position.visible || !selection?.text) {
+      if (!position2.visible || !selection?.text) {
         return null;
       }
       return /* @__PURE__ */ jsxs18(
@@ -8389,8 +8570,8 @@ var init_SelectionToolbar = __esm({
             className
           ),
           style: {
-            top: position.top,
-            left: position.left,
+            top: position2.top,
+            left: position2.left,
             transform: "translateX(-50%)"
           },
           onMouseDown: (e) => {
@@ -8507,7 +8688,7 @@ var init_HighlightPopover = __esm({
     }) {
       const [isEditingComment, setIsEditingComment] = useState17(false);
       const [comment, setComment] = useState17(highlight?.comment ?? "");
-      const [position, setPosition] = useState17({ top: 0, left: 0, visible: false });
+      const [position2, setPosition] = useState17({ top: 0, left: 0, visible: false });
       const popoverRef = useRef15(null);
       const textareaRef = useRef15(null);
       useEffect18(() => {
@@ -8555,11 +8736,11 @@ var init_HighlightPopover = __esm({
             onClose();
           }
         }
-        if (position.visible) {
+        if (position2.visible) {
           document.addEventListener("mousedown", handleClickOutside);
           return () => document.removeEventListener("mousedown", handleClickOutside);
         }
-      }, [position.visible, onClose]);
+      }, [position2.visible, onClose]);
       useEffect18(() => {
         function handleKeyDown(event) {
           if (event.key === "Escape") {
@@ -8571,11 +8752,11 @@ var init_HighlightPopover = __esm({
             }
           }
         }
-        if (position.visible) {
+        if (position2.visible) {
           document.addEventListener("keydown", handleKeyDown);
           return () => document.removeEventListener("keydown", handleKeyDown);
         }
-      }, [position.visible, isEditingComment, highlight?.comment, onClose]);
+      }, [position2.visible, isEditingComment, highlight?.comment, onClose]);
       const handleColorClick = useCallback28(
         (color) => {
           if (highlight) {
@@ -8602,7 +8783,7 @@ var init_HighlightPopover = __esm({
           onCopy?.(highlight.text);
         }
       }, [highlight, onCopy]);
-      if (!highlight || !position.visible) {
+      if (!highlight || !position2.visible) {
         return null;
       }
       return /* @__PURE__ */ jsxs19(
@@ -8619,8 +8800,8 @@ var init_HighlightPopover = __esm({
             className
           ),
           style: {
-            top: position.top,
-            left: position.left,
+            top: position2.top,
+            left: position2.left,
             transform: "translate(-50%, -100%)",
             width: 280
           },
@@ -9802,17 +9983,237 @@ var init_DualPageContainer = __esm({
   }
 });
 
-// src/components/FloatingZoomControls/FloatingZoomControls.tsx
-import { memo as memo26, useCallback as useCallback32 } from "react";
+// src/components/PDFViewer/BookModeContainer.tsx
+import React, { memo as memo26, useEffect as useEffect22, useState as useState21, useRef as useRef19, useCallback as useCallback32 } from "react";
+import HTMLFlipBook from "react-pageflip";
 import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+var BookPage, BookModeContainer;
+var init_BookModeContainer = __esm({
+  "src/components/PDFViewer/BookModeContainer.tsx"() {
+    "use strict";
+    init_PDFPage2();
+    init_PDFLoadingScreen2();
+    init_hooks();
+    init_utils();
+    BookPage = React.forwardRef(function BookPage2({ pageNumber, page, scale, rotation, width, height }, ref) {
+      return /* @__PURE__ */ jsx27("div", { ref, className: "book-page", "data-page-number": pageNumber, children: /* @__PURE__ */ jsx27("div", { style: { width, height, overflow: "hidden" }, children: /* @__PURE__ */ jsx27(
+        PDFPage,
+        {
+          pageNumber,
+          page,
+          scale,
+          rotation,
+          showTextLayer: false,
+          showAnnotationLayer: false,
+          showHighlightLayer: false
+        }
+      ) }) });
+    });
+    BookModeContainer = memo26(function BookModeContainer2({
+      className,
+      flippingTime = 800,
+      drawShadow = true,
+      maxShadowOpacity = 0.7
+    }) {
+      const {
+        document: document2,
+        currentPage,
+        numPages,
+        scale,
+        rotation,
+        theme,
+        isLoading,
+        goToPage
+      } = usePDFViewer();
+      const scrollToPageRequest = useViewerStore((s) => s.scrollToPageRequest);
+      const { viewerStore } = usePDFViewerStores();
+      const [pages, setPages] = useState21([]);
+      const [rawPageDims, setRawPageDims] = useState21({ width: 612, height: 792 });
+      const [isLoadingPages, setIsLoadingPages] = useState21(false);
+      const containerRef = useRef19(null);
+      const [containerSize, setContainerSize] = useState21({ width: 0, height: 0 });
+      const flipBookRef = useRef19(null);
+      const isSyncingRef = useRef19(false);
+      useEffect22(() => {
+        const el = containerRef.current;
+        if (!el) return;
+        const measure = () => {
+          setContainerSize({ width: el.clientWidth, height: el.clientHeight });
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return () => ro.disconnect();
+      }, []);
+      useEffect22(() => {
+        if (!document2) {
+          setPages([]);
+          return;
+        }
+        let cancelled = false;
+        const loadAllPages = async () => {
+          setIsLoadingPages(true);
+          try {
+            const pagePromises = [];
+            for (let i = 1; i <= numPages; i++) {
+              pagePromises.push(document2.getPage(i));
+            }
+            const results = await Promise.allSettled(pagePromises);
+            if (!cancelled) {
+              const loaded2 = results.map((r) => r.status === "fulfilled" ? r.value : null);
+              setPages(loaded2);
+              const firstPage = loaded2[0];
+              if (firstPage) {
+                const vp = firstPage.getViewport({ scale: 1, rotation });
+                setRawPageDims({ width: vp.width, height: vp.height });
+              }
+            }
+          } catch {
+          } finally {
+            if (!cancelled) setIsLoadingPages(false);
+          }
+        };
+        loadAllPages();
+        return () => {
+          cancelled = true;
+        };
+      }, [document2, numPages, rotation]);
+      useEffect22(() => {
+        if (pages[0]) {
+          const vp = pages[0].getViewport({ scale: 1, rotation });
+          setRawPageDims({ width: vp.width, height: vp.height });
+        }
+      }, [pages, rotation]);
+      const padding = 8;
+      const fitWidth = Math.max(containerSize.width - padding * 2, 200);
+      const fitHeight = Math.max(containerSize.height - padding * 2, 300);
+      const pageAspect = rawPageDims.width / rawPageDims.height;
+      let displayWidth;
+      let displayHeight;
+      if (fitWidth / fitHeight > pageAspect) {
+        displayHeight = fitHeight;
+        displayWidth = Math.floor(fitHeight * pageAspect);
+      } else {
+        displayWidth = fitWidth;
+        displayHeight = Math.floor(fitWidth / pageAspect);
+      }
+      const renderScale = displayWidth / rawPageDims.width;
+      useEffect22(() => {
+        const pageFlip = flipBookRef.current?.pageFlip();
+        if (!pageFlip) return;
+        const flipBookPage = pageFlip.getCurrentPageIndex();
+        const targetIndex = currentPage - 1;
+        if (flipBookPage !== targetIndex) {
+          isSyncingRef.current = true;
+          pageFlip.turnToPage(targetIndex);
+          setTimeout(() => {
+            isSyncingRef.current = false;
+          }, 100);
+        }
+      }, [currentPage]);
+      useEffect22(() => {
+        if (scrollToPageRequest) {
+          requestAnimationFrame(() => {
+            viewerStore.getState().completeScrollRequest(scrollToPageRequest.requestId);
+          });
+        }
+      }, [scrollToPageRequest, viewerStore]);
+      const handleFlip = useCallback32((e) => {
+        if (isSyncingRef.current) return;
+        const newPage = e.data + 1;
+        if (newPage !== currentPage && newPage >= 1 && newPage <= numPages) {
+          goToPage(newPage);
+        }
+      }, [currentPage, numPages, goToPage]);
+      const themeStyles = {
+        light: "bg-gray-100",
+        dark: "bg-gray-900",
+        sepia: "bg-amber-50"
+      };
+      const themeClass = theme === "dark" ? "dark" : theme === "sepia" ? "sepia" : "";
+      const ready = !!document2 && !isLoadingPages && pages.length > 0;
+      const hasContainer = containerSize.width > 0 && containerSize.height > 0;
+      return /* @__PURE__ */ jsxs23(
+        "div",
+        {
+          ref: containerRef,
+          className: cn(
+            "book-mode-container",
+            "flex-1 h-full w-full overflow-hidden",
+            "flex items-center justify-center",
+            themeStyles[theme],
+            themeClass,
+            className
+          ),
+          style: { userSelect: "none", WebkitUserSelect: "none" },
+          children: [
+            !ready && /* @__PURE__ */ jsx27(
+              PDFLoadingScreen,
+              {
+                phase: !document2 ? isLoading ? "fetching" : "initializing" : "rendering"
+              }
+            ),
+            ready && hasContainer && /* @__PURE__ */ jsx27(
+              HTMLFlipBook,
+              {
+                ref: flipBookRef,
+                width: displayWidth,
+                height: displayHeight,
+                size: "fixed",
+                minWidth: displayWidth,
+                maxWidth: displayWidth,
+                minHeight: displayHeight,
+                maxHeight: displayHeight,
+                drawShadow,
+                maxShadowOpacity,
+                flippingTime,
+                usePortrait: true,
+                startPage: currentPage - 1,
+                showCover: false,
+                mobileScrollSupport: true,
+                swipeDistance: 30,
+                showPageCorners: true,
+                useMouseEvents: true,
+                clickEventForward: false,
+                onFlip: handleFlip,
+                className: "book-flipbook",
+                style: {},
+                startZIndex: 0,
+                autoSize: false,
+                renderOnlyPageLengthChange: false,
+                disableFlipByClick: false,
+                children: pages.map((page, index) => /* @__PURE__ */ jsx27(
+                  BookPage,
+                  {
+                    pageNumber: index + 1,
+                    page,
+                    scale: renderScale,
+                    rotation,
+                    width: displayWidth,
+                    height: displayHeight
+                  },
+                  index
+                ))
+              }
+            )
+          ]
+        }
+      );
+    });
+  }
+});
+
+// src/components/FloatingZoomControls/FloatingZoomControls.tsx
+import { memo as memo27, useCallback as useCallback33 } from "react";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 var FloatingZoomControls;
 var init_FloatingZoomControls = __esm({
   "src/components/FloatingZoomControls/FloatingZoomControls.tsx"() {
     "use strict";
     init_hooks();
     init_utils();
-    FloatingZoomControls = memo26(function FloatingZoomControls2({
-      position = "bottom-right",
+    FloatingZoomControls = memo27(function FloatingZoomControls2({
+      position: position2 = "bottom-right",
       className,
       showFitToWidth = true,
       showFitToPage = false,
@@ -9821,20 +10222,20 @@ var init_FloatingZoomControls = __esm({
       const { viewerStore } = usePDFViewerStores();
       const scale = useViewerStore((s) => s.scale);
       const document2 = useViewerStore((s) => s.document);
-      const handleZoomIn = useCallback32(() => {
+      const handleZoomIn = useCallback33(() => {
         const currentScale = viewerStore.getState().scale;
         const newScale = Math.min(4, currentScale + 0.05);
         viewerStore.getState().setScale(newScale);
       }, [viewerStore]);
-      const handleZoomOut = useCallback32(() => {
+      const handleZoomOut = useCallback33(() => {
         const currentScale = viewerStore.getState().scale;
         const newScale = Math.max(0.1, currentScale - 0.05);
         viewerStore.getState().setScale(newScale);
       }, [viewerStore]);
-      const handleFitToWidth = useCallback32(() => {
+      const handleFitToWidth = useCallback33(() => {
         viewerStore.getState().setScale(1);
       }, [viewerStore]);
-      const handleFitToPage = useCallback32(() => {
+      const handleFitToPage = useCallback33(() => {
         viewerStore.getState().setScale(0.75);
       }, [viewerStore]);
       if (!document2) return null;
@@ -9845,7 +10246,7 @@ var init_FloatingZoomControls = __esm({
         "top-left": "top-4 left-4"
       };
       const zoomPercentage = Math.round(scale * 100);
-      return /* @__PURE__ */ jsxs23(
+      return /* @__PURE__ */ jsxs24(
         "div",
         {
           className: cn(
@@ -9853,11 +10254,11 @@ var init_FloatingZoomControls = __esm({
             "bg-white dark:bg-gray-800 rounded-lg shadow-lg",
             "border border-gray-200 dark:border-gray-700",
             "p-1",
-            positionClasses[position],
+            positionClasses[position2],
             className
           ),
           children: [
-            /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx28(
               "button",
               {
                 onClick: handleZoomOut,
@@ -9871,14 +10272,14 @@ var init_FloatingZoomControls = __esm({
                 disabled: scale <= 0.25,
                 title: "Zoom Out",
                 "aria-label": "Zoom Out",
-                children: /* @__PURE__ */ jsx27("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx27("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
+                children: /* @__PURE__ */ jsx28("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
               }
             ),
-            showZoomLevel && /* @__PURE__ */ jsxs23("span", { className: "min-w-[48px] text-center text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+            showZoomLevel && /* @__PURE__ */ jsxs24("span", { className: "min-w-[48px] text-center text-sm font-medium text-gray-700 dark:text-gray-300", children: [
               zoomPercentage,
               "%"
             ] }),
-            /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx28(
               "button",
               {
                 onClick: handleZoomIn,
@@ -9892,11 +10293,11 @@ var init_FloatingZoomControls = __esm({
                 disabled: scale >= 4,
                 title: "Zoom In",
                 "aria-label": "Zoom In",
-                children: /* @__PURE__ */ jsx27("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx27("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) })
+                children: /* @__PURE__ */ jsx28("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) })
               }
             ),
-            (showFitToWidth || showFitToPage) && /* @__PURE__ */ jsx27("div", { className: "w-px h-6 bg-gray-200 dark:bg-gray-700 mx-1" }),
-            showFitToWidth && /* @__PURE__ */ jsx27(
+            (showFitToWidth || showFitToPage) && /* @__PURE__ */ jsx28("div", { className: "w-px h-6 bg-gray-200 dark:bg-gray-700 mx-1" }),
+            showFitToWidth && /* @__PURE__ */ jsx28(
               "button",
               {
                 onClick: handleFitToWidth,
@@ -9908,10 +10309,10 @@ var init_FloatingZoomControls = __esm({
                 ),
                 title: "Fit to Width",
                 "aria-label": "Fit to Width",
-                children: /* @__PURE__ */ jsx27("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx27("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" }) })
+                children: /* @__PURE__ */ jsx28("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" }) })
               }
             ),
-            showFitToPage && /* @__PURE__ */ jsx27(
+            showFitToPage && /* @__PURE__ */ jsx28(
               "button",
               {
                 onClick: handleFitToPage,
@@ -9923,7 +10324,7 @@ var init_FloatingZoomControls = __esm({
                 ),
                 title: "Fit to Page",
                 "aria-label": "Fit to Page",
-                children: /* @__PURE__ */ jsx27("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx27("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) })
+                children: /* @__PURE__ */ jsx28("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) })
               }
             )
           ]
@@ -9947,14 +10348,14 @@ __export(PDFViewerClient_exports, {
   PDFViewerClient: () => PDFViewerClient
 });
 import {
-  useEffect as useEffect22,
-  useCallback as useCallback33,
-  memo as memo27,
-  useRef as useRef19,
-  useState as useState21,
+  useEffect as useEffect23,
+  useCallback as useCallback34,
+  memo as memo28,
+  useRef as useRef20,
+  useState as useState22,
   forwardRef
 } from "react";
-import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
 function getSrcIdentifier(src) {
   if (typeof src === "string") {
     return src;
@@ -10006,10 +10407,11 @@ var init_PDFViewerClient = __esm({
     init_DocumentContainer();
     init_ContinuousScrollContainer();
     init_DualPageContainer();
+    init_BookModeContainer();
     init_FloatingZoomControls2();
     init_PDFLoadingScreen2();
     init_utils();
-    PDFViewerInner = memo27(function PDFViewerInner2({
+    PDFViewerInner = memo28(function PDFViewerInner2({
       src,
       initialPage = 1,
       page: controlledPage,
@@ -10036,19 +10438,19 @@ var init_PDFViewerClient = __esm({
       onReady
     }) {
       const { viewerStore, annotationStore, searchStore } = usePDFViewerStores();
-      const mountedRef = useRef19(true);
-      const [, setLoadState] = useState21("idle");
-      const onDocumentLoadRef = useRef19(onDocumentLoad);
-      const onErrorRef = useRef19(onError);
-      const onPageChangeRef = useRef19(onPageChange);
-      const onScaleChangeRef = useRef19(onScaleChange);
-      const onZoomChangeRef = useRef19(onZoomChange);
-      const onPageRenderStartRef = useRef19(onPageRenderStart);
-      const onPageRenderCompleteRef = useRef19(onPageRenderComplete);
-      const onHighlightAddedRef = useRef19(onHighlightAdded);
-      const onHighlightRemovedRef = useRef19(onHighlightRemoved);
-      const onAnnotationAddedRef = useRef19(onAnnotationAdded);
-      const onReadyRef = useRef19(onReady);
+      const mountedRef = useRef20(true);
+      const [, setLoadState] = useState22("idle");
+      const onDocumentLoadRef = useRef20(onDocumentLoad);
+      const onErrorRef = useRef20(onError);
+      const onPageChangeRef = useRef20(onPageChange);
+      const onScaleChangeRef = useRef20(onScaleChange);
+      const onZoomChangeRef = useRef20(onZoomChange);
+      const onPageRenderStartRef = useRef20(onPageRenderStart);
+      const onPageRenderCompleteRef = useRef20(onPageRenderComplete);
+      const onHighlightAddedRef = useRef20(onHighlightAdded);
+      const onHighlightRemovedRef = useRef20(onHighlightRemoved);
+      const onAnnotationAddedRef = useRef20(onAnnotationAdded);
+      const onReadyRef = useRef20(onReady);
       onDocumentLoadRef.current = onDocumentLoad;
       onErrorRef.current = onError;
       onPageChangeRef.current = onPageChange;
@@ -10061,8 +10463,8 @@ var init_PDFViewerClient = __esm({
       onAnnotationAddedRef.current = onAnnotationAdded;
       onReadyRef.current = onReady;
       const isControlled = controlledPage !== void 0;
-      const prevControlledPageRef = useRef19(controlledPage);
-      const srcIdRef = useRef19(null);
+      const prevControlledPageRef = useRef20(controlledPage);
+      const srcIdRef = useRef20(null);
       const currentPage = useViewerStore((s) => s.currentPage);
       const scale = useViewerStore((s) => s.scale);
       const theme = useViewerStore((s) => s.theme);
@@ -10072,8 +10474,8 @@ var init_PDFViewerClient = __esm({
       const sidebarOpen = useViewerStore((s) => s.sidebarOpen);
       const streamingProgress = useViewerStore((s) => s.streamingProgress);
       const srcId = getSrcIdentifier(src);
-      const handleRef = useRef19(null);
-      useEffect22(() => {
+      const handleRef = useRef20(null);
+      useEffect23(() => {
         const handle = {
           // ==================== Text Highlighting ====================
           highlightText: async (text, options) => {
@@ -10491,14 +10893,14 @@ var init_PDFViewerClient = __esm({
         handleRef.current = handle;
         onReadyRef.current?.(handle);
       }, [viewerStore, annotationStore, searchStore]);
-      const handleRetry = useCallback33(() => {
+      const handleRetry = useCallback34(() => {
         srcIdRef.current = null;
         viewerStore.getState().setError(null);
         setLoadState("idle");
       }, [viewerStore]);
-      const abortControllerRef = useRef19(null);
-      const currentSrcRef = useRef19(null);
-      useEffect22(() => {
+      const abortControllerRef = useRef20(null);
+      const currentSrcRef = useRef20(null);
+      useEffect23(() => {
         mountedRef.current = true;
         return () => {
           mountedRef.current = false;
@@ -10523,8 +10925,8 @@ var init_PDFViewerClient = __esm({
           viewerStore.getState().setError(null);
         };
       }, [viewerStore]);
-      const cancelLoaderRef = useRef19(null);
-      useEffect22(() => {
+      const cancelLoaderRef = useRef20(null);
+      useEffect23(() => {
         if (srcIdRef.current === srcId && viewerStore.getState().document) {
           return;
         }
@@ -10565,12 +10967,12 @@ var init_PDFViewerClient = __esm({
           src,
           workerSrc,
           signal: abortController.signal,
-          onProgress: ({ loaded, total }) => {
+          onProgress: ({ loaded: loaded2, total }) => {
             if (!mountedRef.current || srcIdRef.current !== loadId || abortController.signal.aborted) {
               return;
             }
             const now = Date.now();
-            const percent = total > 0 ? Math.round(loaded / total * 100) : 0;
+            const percent = total > 0 ? Math.round(loaded2 / total * 100) : 0;
             const timePassed = now - lastProgressUpdate >= PROGRESS_THROTTLE_MS;
             const percentChanged = Math.abs(percent - lastPercent) >= PROGRESS_MIN_CHANGE;
             const isComplete = percent >= 100;
@@ -10581,10 +10983,10 @@ var init_PDFViewerClient = __esm({
                 loadingProgress: {
                   phase: "fetching",
                   percent,
-                  bytesLoaded: loaded,
+                  bytesLoaded: loaded2,
                   totalBytes: total
                 },
-                streamingProgress: { loaded, total },
+                streamingProgress: { loaded: loaded2, total },
                 documentLoadingState: "loading"
               });
             }
@@ -10658,22 +11060,22 @@ var init_PDFViewerClient = __esm({
           }
         };
       }, [srcId, src, workerSrc, initialPage, initialScale, viewerStore]);
-      const prevPageRef = useRef19(currentPage);
-      useEffect22(() => {
+      const prevPageRef = useRef20(currentPage);
+      useEffect23(() => {
         if (prevPageRef.current !== currentPage) {
           prevPageRef.current = currentPage;
           onPageChangeRef.current?.(currentPage);
         }
       }, [currentPage]);
-      const prevScaleRef = useRef19(scale);
-      useEffect22(() => {
+      const prevScaleRef = useRef20(scale);
+      useEffect23(() => {
         if (prevScaleRef.current !== scale) {
           prevScaleRef.current = scale;
           onScaleChangeRef.current?.(scale);
           onZoomChangeRef.current?.(scale);
         }
       }, [scale]);
-      useEffect22(() => {
+      useEffect23(() => {
         if (!isControlled || controlledPage === void 0) return;
         if (prevControlledPageRef.current === controlledPage) return;
         prevControlledPageRef.current = controlledPage;
@@ -10686,7 +11088,7 @@ var init_PDFViewerClient = __esm({
       if (error) {
         if (errorComponent) {
           const errorContent = typeof errorComponent === "function" ? errorComponent(error, handleRetry) : errorComponent;
-          return /* @__PURE__ */ jsx28(
+          return /* @__PURE__ */ jsx29(
             "div",
             {
               className: cn(
@@ -10700,7 +11102,7 @@ var init_PDFViewerClient = __esm({
             }
           );
         }
-        return /* @__PURE__ */ jsx28(
+        return /* @__PURE__ */ jsx29(
           "div",
           {
             className: cn(
@@ -10710,10 +11112,10 @@ var init_PDFViewerClient = __esm({
               themeClass,
               className
             ),
-            children: /* @__PURE__ */ jsx28("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs24("div", { className: "text-center p-8", children: [
-              /* @__PURE__ */ jsx28("div", { className: "text-red-500 text-lg font-semibold mb-2", children: "Failed to load PDF" }),
-              /* @__PURE__ */ jsx28("div", { className: "text-gray-500 text-sm", children: error.message }),
-              /* @__PURE__ */ jsx28(
+            children: /* @__PURE__ */ jsx29("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs25("div", { className: "text-center p-8", children: [
+              /* @__PURE__ */ jsx29("div", { className: "text-red-500 text-lg font-semibold mb-2", children: "Failed to load PDF" }),
+              /* @__PURE__ */ jsx29("div", { className: "text-gray-500 text-sm", children: error.message }),
+              /* @__PURE__ */ jsx29(
                 "button",
                 {
                   onClick: handleRetry,
@@ -10728,15 +11130,17 @@ var init_PDFViewerClient = __esm({
       const renderContainer = () => {
         switch (viewMode) {
           case "continuous":
-            return /* @__PURE__ */ jsx28(ContinuousScrollContainer, {});
+            return /* @__PURE__ */ jsx29(ContinuousScrollContainer, {});
           case "dual":
-            return /* @__PURE__ */ jsx28(DualPageContainer, {});
+            return /* @__PURE__ */ jsx29(DualPageContainer, {});
+          case "book":
+            return /* @__PURE__ */ jsx29(BookModeContainer, {});
           case "single":
           default:
-            return /* @__PURE__ */ jsx28(DocumentContainer, {});
+            return /* @__PURE__ */ jsx29(DocumentContainer, {});
         }
       };
-      return /* @__PURE__ */ jsxs24(
+      return /* @__PURE__ */ jsxs25(
         "div",
         {
           className: cn(
@@ -10748,14 +11152,14 @@ var init_PDFViewerClient = __esm({
             className
           ),
           children: [
-            showToolbar && /* @__PURE__ */ jsx28(Toolbar, {}),
-            showAnnotationToolbar && /* @__PURE__ */ jsx28(AnnotationToolbar, {}),
-            /* @__PURE__ */ jsxs24("div", { className: "flex flex-1 overflow-hidden", children: [
-              showSidebar && sidebarOpen && /* @__PURE__ */ jsx28(Sidebar, {}),
+            showToolbar && /* @__PURE__ */ jsx29(Toolbar, {}),
+            showAnnotationToolbar && /* @__PURE__ */ jsx29(AnnotationToolbar, {}),
+            /* @__PURE__ */ jsxs25("div", { className: "flex flex-1 overflow-hidden", children: [
+              showSidebar && sidebarOpen && /* @__PURE__ */ jsx29(Sidebar, {}),
               renderContainer()
             ] }),
-            showFloatingZoom && /* @__PURE__ */ jsx28(FloatingZoomControls, { position: "bottom-right" }),
-            isLoading && /* @__PURE__ */ jsx28("div", { className: "absolute inset-0 z-50", children: loadingComponent ?? /* @__PURE__ */ jsx28(
+            showFloatingZoom && /* @__PURE__ */ jsx29(FloatingZoomControls, { position: "bottom-right" }),
+            isLoading && /* @__PURE__ */ jsx29("div", { className: "absolute inset-0 z-50", children: loadingComponent ?? /* @__PURE__ */ jsx29(
               PDFLoadingScreen,
               {
                 phase: loadingProgress?.phase ?? "fetching",
@@ -10764,10 +11168,10 @@ var init_PDFViewerClient = __esm({
                 totalBytes: loadingProgress?.totalBytes
               }
             ) }),
-            !isLoading && streamingProgress && streamingProgress.total > 0 && streamingProgress.loaded < streamingProgress.total && /* @__PURE__ */ jsxs24("div", { className: "absolute bottom-20 right-4 z-40 px-3 py-2 bg-gray-900/80 text-white text-xs rounded-lg shadow-lg flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx28("div", { className: "w-3 h-3 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
-              /* @__PURE__ */ jsx28("span", { children: "Loading pages..." }),
-              /* @__PURE__ */ jsxs24("span", { className: "text-white/60", children: [
+            !isLoading && streamingProgress && streamingProgress.total > 0 && streamingProgress.loaded < streamingProgress.total && /* @__PURE__ */ jsxs25("div", { className: "absolute bottom-20 right-4 z-40 px-3 py-2 bg-gray-900/80 text-white text-xs rounded-lg shadow-lg flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx29("div", { className: "w-3 h-3 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+              /* @__PURE__ */ jsx29("span", { children: "Loading pages..." }),
+              /* @__PURE__ */ jsxs25("span", { className: "text-white/60", children: [
                 Math.round(streamingProgress.loaded / streamingProgress.total * 100),
                 "%"
               ] })
@@ -10778,8 +11182,8 @@ var init_PDFViewerClient = __esm({
     });
     PDFViewerInnerWithRef = forwardRef(
       function PDFViewerInnerWithRef2(props, ref) {
-        const handleRef = useRef19(null);
-        const handleReady = useCallback33((handle) => {
+        const handleRef = useRef20(null);
+        const handleReady = useCallback34((handle) => {
           handleRef.current = handle;
           if (typeof ref === "function") {
             ref(handle);
@@ -10787,17 +11191,17 @@ var init_PDFViewerClient = __esm({
             ref.current = handle;
           }
         }, [ref]);
-        return /* @__PURE__ */ jsx28(PDFViewerInner, { ...props, onReady: handleReady });
+        return /* @__PURE__ */ jsx29(PDFViewerInner, { ...props, onReady: handleReady });
       }
     );
-    PDFViewerClient = memo27(
+    PDFViewerClient = memo28(
       forwardRef(function PDFViewerClient2(props, ref) {
-        return /* @__PURE__ */ jsx28(
+        return /* @__PURE__ */ jsx29(
           PDFViewerProvider,
           {
             theme: props.theme,
             defaultSidebarPanel: props.defaultSidebarPanel,
-            children: /* @__PURE__ */ jsx28(PDFViewerInnerWithRef, { ref, ...props })
+            children: /* @__PURE__ */ jsx29(PDFViewerInnerWithRef, { ref, ...props })
           }
         );
       })
@@ -10806,8 +11210,8 @@ var init_PDFViewerClient = __esm({
 });
 
 // src/components/PDFViewer/PDFViewer.tsx
-import { lazy, Suspense, memo as memo28 } from "react";
-import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
+import { lazy, Suspense, memo as memo29 } from "react";
+import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
 var PDFViewerClient3, PDFViewerLoading, PDFViewer;
 var init_PDFViewer = __esm({
   "src/components/PDFViewer/PDFViewer.tsx"() {
@@ -10816,10 +11220,10 @@ var init_PDFViewer = __esm({
     PDFViewerClient3 = lazy(
       () => Promise.resolve().then(() => (init_PDFViewerClient(), PDFViewerClient_exports)).then((mod) => ({ default: mod.PDFViewerClient }))
     );
-    PDFViewerLoading = memo28(function PDFViewerLoading2({
+    PDFViewerLoading = memo29(function PDFViewerLoading2({
       className
     }) {
-      return /* @__PURE__ */ jsx29(
+      return /* @__PURE__ */ jsx30(
         "div",
         {
           className: cn(
@@ -10828,18 +11232,18 @@ var init_PDFViewer = __esm({
             "bg-white dark:bg-gray-900",
             className
           ),
-          children: /* @__PURE__ */ jsx29("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs25("div", { className: "flex flex-col items-center", children: [
-            /* @__PURE__ */ jsx29("div", { className: "w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" }),
-            /* @__PURE__ */ jsx29("div", { className: "mt-2 text-sm text-gray-500", children: "Loading PDF viewer..." })
+          children: /* @__PURE__ */ jsx30("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs26("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx30("div", { className: "w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx30("div", { className: "mt-2 text-sm text-gray-500", children: "Loading PDF viewer..." })
           ] }) })
         }
       );
     });
-    PDFViewer = memo28(function PDFViewer2(props) {
+    PDFViewer = memo29(function PDFViewer2(props) {
       if (typeof window === "undefined") {
-        return /* @__PURE__ */ jsx29(PDFViewerLoading, { className: props.className });
+        return /* @__PURE__ */ jsx30(PDFViewerLoading, { className: props.className });
       }
-      return /* @__PURE__ */ jsx29(Suspense, { fallback: /* @__PURE__ */ jsx29(PDFViewerLoading, { className: props.className }), children: /* @__PURE__ */ jsx29(PDFViewerClient3, { ...props }) });
+      return /* @__PURE__ */ jsx30(Suspense, { fallback: /* @__PURE__ */ jsx30(PDFViewerLoading, { className: props.className }), children: /* @__PURE__ */ jsx30(PDFViewerClient3, { ...props }) });
     });
   }
 });
@@ -10854,6 +11258,7 @@ var init_PDFViewer2 = __esm({
     init_VirtualizedDocumentContainer();
     init_ContinuousScrollContainer();
     init_DualPageContainer();
+    init_BookModeContainer();
   }
 });
 
@@ -10868,8 +11273,8 @@ init_AnnotationToolbar2();
 
 // src/components/Annotations/StickyNote.tsx
 init_utils();
-import { memo as memo29, useState as useState22, useRef as useRef20, useEffect as useEffect23, useCallback as useCallback34 } from "react";
-import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
+import { memo as memo30, useState as useState23, useRef as useRef21, useEffect as useEffect24, useCallback as useCallback35 } from "react";
+import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
 var NOTE_COLORS = [
   "#fef08a",
   // yellow
@@ -10882,7 +11287,7 @@ var NOTE_COLORS = [
   "#fed7aa"
   // orange
 ];
-var StickyNote = memo29(function StickyNote2({
+var StickyNote = memo30(function StickyNote2({
   note,
   scale,
   isSelected,
@@ -10895,37 +11300,37 @@ var StickyNote = memo29(function StickyNote2({
   onDragStart,
   className
 }) {
-  const [isExpanded, setIsExpanded] = useState22(false);
-  const [localContent, setLocalContent] = useState22(note.content);
-  const textareaRef = useRef20(null);
-  const noteRef = useRef20(null);
-  useEffect23(() => {
+  const [isExpanded, setIsExpanded] = useState23(false);
+  const [localContent, setLocalContent] = useState23(note.content);
+  const textareaRef = useRef21(null);
+  const noteRef = useRef21(null);
+  useEffect24(() => {
     setLocalContent(note.content);
   }, [note.content]);
-  useEffect23(() => {
+  useEffect24(() => {
     if (isEditing && textareaRef.current) {
       textareaRef.current.focus();
       textareaRef.current.select();
     }
   }, [isEditing]);
-  const handleClick = useCallback34((e) => {
+  const handleClick = useCallback35((e) => {
     e.stopPropagation();
     onSelect?.();
     if (!isExpanded) {
       setIsExpanded(true);
     }
   }, [isExpanded, onSelect]);
-  const handleDoubleClick = useCallback34((e) => {
+  const handleDoubleClick = useCallback35((e) => {
     e.stopPropagation();
     onStartEdit?.();
   }, [onStartEdit]);
-  const handleBlur = useCallback34(() => {
+  const handleBlur = useCallback35(() => {
     if (isEditing && localContent !== note.content) {
       onUpdate?.({ content: localContent });
     }
     onEndEdit?.();
   }, [isEditing, localContent, note.content, onUpdate, onEndEdit]);
-  const handleKeyDown = useCallback34((e) => {
+  const handleKeyDown = useCallback35((e) => {
     if (e.key === "Escape") {
       setLocalContent(note.content);
       onEndEdit?.();
@@ -10933,16 +11338,16 @@ var StickyNote = memo29(function StickyNote2({
       handleBlur();
     }
   }, [note.content, onEndEdit, handleBlur]);
-  const handleColorChange = useCallback34((color) => {
+  const handleColorChange = useCallback35((color) => {
     onUpdate?.({ color });
   }, [onUpdate]);
-  const handleCollapse = useCallback34((e) => {
+  const handleCollapse = useCallback35((e) => {
     e.stopPropagation();
     setIsExpanded(false);
     onEndEdit?.();
   }, [onEndEdit]);
   if (!isExpanded) {
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       "div",
       {
         ref: noteRef,
@@ -10963,14 +11368,14 @@ var StickyNote = memo29(function StickyNote2({
         onMouseDown: onDragStart,
         onTouchStart: onDragStart,
         title: note.content || "Empty note",
-        children: /* @__PURE__ */ jsx30(
+        children: /* @__PURE__ */ jsx31(
           "svg",
           {
             className: "w-4 h-4 opacity-70",
             fill: "currentColor",
             viewBox: "0 0 20 20",
             style: { color: "#333" },
-            children: /* @__PURE__ */ jsx30(
+            children: /* @__PURE__ */ jsx31(
               "path",
               {
                 fillRule: "evenodd",
@@ -10983,7 +11388,7 @@ var StickyNote = memo29(function StickyNote2({
       }
     );
   }
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       ref: noteRef,
@@ -11001,14 +11406,14 @@ var StickyNote = memo29(function StickyNote2({
       },
       onClick: handleClick,
       children: [
-        /* @__PURE__ */ jsxs26(
+        /* @__PURE__ */ jsxs27(
           "div",
           {
             className: "flex items-center justify-between px-2 py-1 border-b border-black/10 cursor-move",
             onMouseDown: onDragStart,
             onTouchStart: onDragStart,
             children: [
-              /* @__PURE__ */ jsx30("div", { className: "flex gap-1", children: NOTE_COLORS.map((color) => /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsx31("div", { className: "flex gap-1", children: NOTE_COLORS.map((color) => /* @__PURE__ */ jsx31(
                 "button",
                 {
                   className: cn(
@@ -11025,8 +11430,8 @@ var StickyNote = memo29(function StickyNote2({
                 },
                 color
               )) }),
-              /* @__PURE__ */ jsxs26("div", { className: "flex gap-1", children: [
-                /* @__PURE__ */ jsx30(
+              /* @__PURE__ */ jsxs27("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ jsx31(
                   "button",
                   {
                     className: "p-0.5 hover:bg-black/10 rounded",
@@ -11035,23 +11440,23 @@ var StickyNote = memo29(function StickyNote2({
                       onDelete?.();
                     },
                     title: "Delete note",
-                    children: /* @__PURE__ */ jsx30("svg", { className: "w-3.5 h-3.5 text-gray-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx30("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) })
+                    children: /* @__PURE__ */ jsx31("svg", { className: "w-3.5 h-3.5 text-gray-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx31("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) })
                   }
                 ),
-                /* @__PURE__ */ jsx30(
+                /* @__PURE__ */ jsx31(
                   "button",
                   {
                     className: "p-0.5 hover:bg-black/10 rounded",
                     onClick: handleCollapse,
                     title: "Collapse note",
-                    children: /* @__PURE__ */ jsx30("svg", { className: "w-3.5 h-3.5 text-gray-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx30("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                    children: /* @__PURE__ */ jsx31("svg", { className: "w-3.5 h-3.5 text-gray-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx31("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                   }
                 )
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsx30("div", { className: "p-2", children: isEditing ? /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx31("div", { className: "p-2", children: isEditing ? /* @__PURE__ */ jsx31(
           "textarea",
           {
             ref: textareaRef,
@@ -11066,7 +11471,7 @@ var StickyNote = memo29(function StickyNote2({
             onKeyDown: handleKeyDown,
             placeholder: "Enter note..."
           }
-        ) : /* @__PURE__ */ jsx30(
+        ) : /* @__PURE__ */ jsx31(
           "div",
           {
             className: cn(
@@ -11077,7 +11482,7 @@ var StickyNote = memo29(function StickyNote2({
             children: note.content || "Double-click to edit..."
           }
         ) }),
-        /* @__PURE__ */ jsx30("div", { className: "px-2 pb-1 text-[10px] text-gray-500", children: new Date(note.updatedAt).toLocaleDateString() })
+        /* @__PURE__ */ jsx31("div", { className: "px-2 pb-1 text-[10px] text-gray-500", children: new Date(note.updatedAt).toLocaleDateString() })
       ]
     }
   );
@@ -11085,8 +11490,8 @@ var StickyNote = memo29(function StickyNote2({
 
 // src/components/Annotations/DrawingCanvas.tsx
 init_utils();
-import { memo as memo30, useRef as useRef21, useCallback as useCallback35, useState as useState23 } from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { memo as memo31, useRef as useRef22, useCallback as useCallback36, useState as useState24 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function pointsToSvgPath(points) {
   if (points.length === 0) return "";
   if (points.length === 1) {
@@ -11124,7 +11529,7 @@ function simplifyPath(points, tolerance = 1) {
   result.push(points[points.length - 1]);
   return result;
 }
-var DrawingCanvas = memo30(function DrawingCanvas2({
+var DrawingCanvas = memo31(function DrawingCanvas2({
   width,
   height,
   scale,
@@ -11134,10 +11539,10 @@ var DrawingCanvas = memo30(function DrawingCanvas2({
   onDrawingComplete,
   className
 }) {
-  const svgRef = useRef21(null);
-  const [isDrawing, setIsDrawing] = useState23(false);
-  const [currentPath, setCurrentPath] = useState23([]);
-  const getPoint = useCallback35((e) => {
+  const svgRef = useRef22(null);
+  const [isDrawing, setIsDrawing] = useState24(false);
+  const [currentPath, setCurrentPath] = useState24([]);
+  const getPoint = useCallback36((e) => {
     if (!svgRef.current) return null;
     const svg = svgRef.current;
     const rect = svg.getBoundingClientRect();
@@ -11157,7 +11562,7 @@ var DrawingCanvas = memo30(function DrawingCanvas2({
       y: (clientY - rect.top) / scale
     };
   }, [scale]);
-  const handleStart = useCallback35((e) => {
+  const handleStart = useCallback36((e) => {
     if (!isActive) return;
     const point = getPoint(e);
     if (point) {
@@ -11165,14 +11570,14 @@ var DrawingCanvas = memo30(function DrawingCanvas2({
       setCurrentPath([point]);
     }
   }, [isActive, getPoint]);
-  const handleMove = useCallback35((e) => {
+  const handleMove = useCallback36((e) => {
     if (!isDrawing || !isActive) return;
     const point = getPoint(e);
     if (point) {
       setCurrentPath((prev) => [...prev, point]);
     }
   }, [isDrawing, isActive, getPoint]);
-  const handleEnd = useCallback35(() => {
+  const handleEnd = useCallback36(() => {
     if (!isDrawing) return;
     setIsDrawing(false);
     if (currentPath.length >= 2) {
@@ -11181,7 +11586,7 @@ var DrawingCanvas = memo30(function DrawingCanvas2({
     }
     setCurrentPath([]);
   }, [isDrawing, currentPath, onDrawingComplete]);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     "svg",
     {
       ref: svgRef,
@@ -11201,7 +11606,7 @@ var DrawingCanvas = memo30(function DrawingCanvas2({
       onTouchStart: handleStart,
       onTouchMove: handleMove,
       onTouchEnd: handleEnd,
-      children: isDrawing && currentPath.length > 0 && /* @__PURE__ */ jsx31(
+      children: isDrawing && currentPath.length > 0 && /* @__PURE__ */ jsx32(
         "path",
         {
           d: pointsToSvgPath(currentPath),
@@ -11219,9 +11624,9 @@ var DrawingCanvas = memo30(function DrawingCanvas2({
 
 // src/components/Annotations/ShapeRenderer.tsx
 init_utils();
-import { memo as memo31, useCallback as useCallback36, useState as useState24, useRef as useRef22 } from "react";
-import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
-var ShapeRenderer = memo31(function ShapeRenderer2({
+import { memo as memo32, useCallback as useCallback37, useState as useState25, useRef as useRef23 } from "react";
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+var ShapeRenderer = memo32(function ShapeRenderer2({
   shape,
   scale,
   isSelected,
@@ -11231,18 +11636,18 @@ var ShapeRenderer = memo31(function ShapeRenderer2({
   onDelete: _onDelete,
   className
 }) {
-  const [_isDragging, setIsDragging] = useState24(false);
-  const [_isResizing, setIsResizing] = useState24(false);
-  const [activeHandle, setActiveHandle] = useState24(null);
-  const startPosRef = useRef22({ x: 0, y: 0 });
-  const startShapeRef = useRef22({ x: 0, y: 0, width: 0, height: 0 });
+  const [_isDragging, setIsDragging] = useState25(false);
+  const [_isResizing, setIsResizing] = useState25(false);
+  const [activeHandle, setActiveHandle] = useState25(null);
+  const startPosRef = useRef23({ x: 0, y: 0 });
+  const startShapeRef = useRef23({ x: 0, y: 0, width: 0, height: 0 });
   const { shapeType, x, y, width, height, color, strokeWidth, id: _id } = shape;
   const scaledX = x * scale;
   const scaledY = y * scale;
   const scaledWidth = width * scale;
   const scaledHeight = height * scale;
   const scaledStroke = strokeWidth * scale;
-  const getResizeHandles = useCallback36(() => {
+  const getResizeHandles = useCallback37(() => {
     const handleSize = 8;
     const half = handleSize / 2;
     return [
@@ -11256,7 +11661,7 @@ var ShapeRenderer = memo31(function ShapeRenderer2({
       { position: "w", cursor: "ew-resize", x: scaledX - half, y: scaledY + scaledHeight / 2 - half }
     ];
   }, [scaledX, scaledY, scaledWidth, scaledHeight]);
-  const handleMouseDown = useCallback36((e, handle) => {
+  const handleMouseDown = useCallback37((e, handle) => {
     e.stopPropagation();
     onSelect?.();
     if (!isEditing) return;
@@ -11332,7 +11737,7 @@ var ShapeRenderer = memo31(function ShapeRenderer2({
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
   }, [isEditing, x, y, width, height, scale, onSelect, onUpdate]);
-  const renderShape2 = useCallback36(() => {
+  const renderShape2 = useCallback37(() => {
     const commonProps = {
       stroke: color,
       strokeWidth: scaledStroke,
@@ -11344,7 +11749,7 @@ var ShapeRenderer = memo31(function ShapeRenderer2({
     };
     switch (shapeType) {
       case "rect":
-        return /* @__PURE__ */ jsx32(
+        return /* @__PURE__ */ jsx33(
           "rect",
           {
             x: scaledX,
@@ -11355,7 +11760,7 @@ var ShapeRenderer = memo31(function ShapeRenderer2({
           }
         );
       case "circle":
-        return /* @__PURE__ */ jsx32(
+        return /* @__PURE__ */ jsx33(
           "ellipse",
           {
             cx: scaledX + scaledWidth / 2,
@@ -11366,7 +11771,7 @@ var ShapeRenderer = memo31(function ShapeRenderer2({
           }
         );
       case "line":
-        return /* @__PURE__ */ jsx32(
+        return /* @__PURE__ */ jsx33(
           "line",
           {
             x1: scaledX,
@@ -11386,22 +11791,22 @@ var ShapeRenderer = memo31(function ShapeRenderer2({
         const arrow1Y = endY - arrowLength * Math.sin(angle - arrowAngle);
         const arrow2X = endX - arrowLength * Math.cos(angle + arrowAngle);
         const arrow2Y = endY - arrowLength * Math.sin(angle + arrowAngle);
-        return /* @__PURE__ */ jsxs27("g", { children: [
-          /* @__PURE__ */ jsx32("line", { x1: scaledX, y1: scaledY, x2: endX, y2: endY, ...commonProps }),
-          /* @__PURE__ */ jsx32("line", { x1: endX, y1: endY, x2: arrow1X, y2: arrow1Y, ...commonProps }),
-          /* @__PURE__ */ jsx32("line", { x1: endX, y1: endY, x2: arrow2X, y2: arrow2Y, ...commonProps })
+        return /* @__PURE__ */ jsxs28("g", { children: [
+          /* @__PURE__ */ jsx33("line", { x1: scaledX, y1: scaledY, x2: endX, y2: endY, ...commonProps }),
+          /* @__PURE__ */ jsx33("line", { x1: endX, y1: endY, x2: arrow1X, y2: arrow1Y, ...commonProps }),
+          /* @__PURE__ */ jsx33("line", { x1: endX, y1: endY, x2: arrow2X, y2: arrow2Y, ...commonProps })
         ] });
       default:
         return null;
     }
   }, [shapeType, scaledX, scaledY, scaledWidth, scaledHeight, color, scaledStroke, isSelected]);
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "g",
     {
       className: cn("shape-renderer", className),
       onMouseDown: (e) => handleMouseDown(e),
       children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33(
           "rect",
           {
             x: scaledX - 5,
@@ -11414,7 +11819,7 @@ var ShapeRenderer = memo31(function ShapeRenderer2({
           }
         ),
         renderShape2(),
-        isSelected && /* @__PURE__ */ jsx32(
+        isSelected && /* @__PURE__ */ jsx33(
           "rect",
           {
             x: scaledX - 2,
@@ -11427,7 +11832,7 @@ var ShapeRenderer = memo31(function ShapeRenderer2({
             strokeDasharray: "4 2"
           }
         ),
-        isSelected && isEditing && getResizeHandles().map((handle) => /* @__PURE__ */ jsx32(
+        isSelected && isEditing && getResizeHandles().map((handle) => /* @__PURE__ */ jsx33(
           "rect",
           {
             x: handle.x,
@@ -11447,7 +11852,7 @@ var ShapeRenderer = memo31(function ShapeRenderer2({
     }
   );
 });
-var ShapePreview = memo31(function ShapePreview2({
+var ShapePreview = memo32(function ShapePreview2({
   shapeType,
   startPoint,
   endPoint,
@@ -11468,9 +11873,9 @@ var ShapePreview = memo31(function ShapePreview2({
   };
   switch (shapeType) {
     case "rect":
-      return /* @__PURE__ */ jsx32("rect", { x, y, width, height, ...commonProps });
+      return /* @__PURE__ */ jsx33("rect", { x, y, width, height, ...commonProps });
     case "circle":
-      return /* @__PURE__ */ jsx32(
+      return /* @__PURE__ */ jsx33(
         "ellipse",
         {
           cx: x + width / 2,
@@ -11481,7 +11886,7 @@ var ShapePreview = memo31(function ShapePreview2({
         }
       );
     case "line":
-      return /* @__PURE__ */ jsx32(
+      return /* @__PURE__ */ jsx33(
         "line",
         {
           x1: startPoint.x * scale,
@@ -11503,8 +11908,8 @@ var ShapePreview = memo31(function ShapePreview2({
       const arrow1Y = endY - arrowLength * Math.sin(angle - arrowAngle);
       const arrow2X = endX - arrowLength * Math.cos(angle + arrowAngle);
       const arrow2Y = endY - arrowLength * Math.sin(angle + arrowAngle);
-      return /* @__PURE__ */ jsxs27("g", { children: [
-        /* @__PURE__ */ jsx32(
+      return /* @__PURE__ */ jsxs28("g", { children: [
+        /* @__PURE__ */ jsx33(
           "line",
           {
             x1: startPoint.x * scale,
@@ -11514,8 +11919,8 @@ var ShapePreview = memo31(function ShapePreview2({
             ...commonProps
           }
         ),
-        /* @__PURE__ */ jsx32("line", { x1: endX, y1: endY, x2: arrow1X, y2: arrow1Y, ...commonProps }),
-        /* @__PURE__ */ jsx32("line", { x1: endX, y1: endY, x2: arrow2X, y2: arrow2Y, ...commonProps })
+        /* @__PURE__ */ jsx33("line", { x1: endX, y1: endY, x2: arrow1X, y2: arrow1Y, ...commonProps }),
+        /* @__PURE__ */ jsx33("line", { x1: endX, y1: endY, x2: arrow2X, y2: arrow2Y, ...commonProps })
       ] });
     default:
       return null;
@@ -11524,30 +11929,30 @@ var ShapePreview = memo31(function ShapePreview2({
 
 // src/components/Annotations/QuickNoteButton.tsx
 init_utils();
-import { memo as memo32, useCallback as useCallback37, useState as useState25 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var QuickNoteButton = memo32(function QuickNoteButton2({
+import { memo as memo33, useCallback as useCallback38, useState as useState26 } from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var QuickNoteButton = memo33(function QuickNoteButton2({
   pageNumber,
   scale,
-  position = "top-right",
+  position: position2 = "top-right",
   onClick,
   className,
   visible = true
 }) {
-  const [isHovered, setIsHovered] = useState25(false);
-  const handleClick = useCallback37(
+  const [isHovered, setIsHovered] = useState26(false);
+  const handleClick = useCallback38(
     (e) => {
       e.stopPropagation();
-      const x = position === "top-right" ? 80 : 80;
-      const y = position === "top-right" ? 20 : 80;
+      const x = position2 === "top-right" ? 80 : 80;
+      const y = position2 === "top-right" ? 20 : 80;
       onClick(pageNumber, x / scale, y / scale);
     },
-    [pageNumber, onClick, position, scale]
+    [pageNumber, onClick, position2, scale]
   );
   if (!visible) {
     return null;
   }
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "button",
     {
       onClick: handleClick,
@@ -11563,13 +11968,13 @@ var QuickNoteButton = memo32(function QuickNoteButton2({
         "transition-all duration-200",
         "focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2",
         isHovered && "scale-110",
-        position === "top-right" && "top-3 right-3",
-        position === "bottom-right" && "bottom-3 right-3",
+        position2 === "top-right" && "top-3 right-3",
+        position2 === "bottom-right" && "bottom-3 right-3",
         className
       ),
       title: "Add quick note",
       "aria-label": "Add quick note",
-      children: /* @__PURE__ */ jsx33(
+      children: /* @__PURE__ */ jsx34(
         "svg",
         {
           className: "w-4 h-4 text-yellow-900",
@@ -11577,7 +11982,7 @@ var QuickNoteButton = memo32(function QuickNoteButton2({
           viewBox: "0 0 24 24",
           stroke: "currentColor",
           strokeWidth: 2,
-          children: /* @__PURE__ */ jsx33("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4v16m8-8H4" })
+          children: /* @__PURE__ */ jsx34("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4v16m8-8H4" })
         }
       )
     }
@@ -11586,36 +11991,36 @@ var QuickNoteButton = memo32(function QuickNoteButton2({
 
 // src/components/Annotations/QuickNotePopover.tsx
 init_utils();
-import { memo as memo33, useCallback as useCallback38, useState as useState26, useRef as useRef23, useEffect as useEffect24 } from "react";
-import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
-var QuickNotePopover = memo33(function QuickNotePopover2({
+import { memo as memo34, useCallback as useCallback39, useState as useState27, useRef as useRef24, useEffect as useEffect25 } from "react";
+import { jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
+var QuickNotePopover = memo34(function QuickNotePopover2({
   visible,
-  position,
+  position: position2,
   initialContent = "",
   agentLastStatement,
   onSave,
   onCancel,
   className
 }) {
-  const [content, setContent] = useState26(initialContent);
-  const textareaRef = useRef23(null);
-  const popoverRef = useRef23(null);
-  const [adjustedPosition, setAdjustedPosition] = useState26(position);
-  useEffect24(() => {
+  const [content, setContent] = useState27(initialContent);
+  const textareaRef = useRef24(null);
+  const popoverRef = useRef24(null);
+  const [adjustedPosition, setAdjustedPosition] = useState27(position2);
+  useEffect25(() => {
     if (visible && textareaRef.current) {
       textareaRef.current.focus();
     }
   }, [visible]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (visible) {
       setContent(initialContent);
     }
   }, [visible, initialContent]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!visible || !popoverRef.current) return;
     const rect = popoverRef.current.getBoundingClientRect();
     const padding = 10;
-    let { x, y } = position;
+    let { x, y } = position2;
     if (x + rect.width > window.innerWidth - padding) {
       x = window.innerWidth - rect.width - padding;
     }
@@ -11629,15 +12034,15 @@ var QuickNotePopover = memo33(function QuickNotePopover2({
       y = padding;
     }
     setAdjustedPosition({ x, y });
-  }, [position, visible]);
-  const handleSave = useCallback38(() => {
+  }, [position2, visible]);
+  const handleSave = useCallback39(() => {
     if (content.trim()) {
       onSave(content.trim());
     } else {
       onCancel();
     }
   }, [content, onSave, onCancel]);
-  const handleKeyDown = useCallback38(
+  const handleKeyDown = useCallback39(
     (e) => {
       if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
         e.preventDefault();
@@ -11652,7 +12057,7 @@ var QuickNotePopover = memo33(function QuickNotePopover2({
   if (!visible) {
     return null;
   }
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       ref: popoverRef,
@@ -11671,15 +12076,15 @@ var QuickNotePopover = memo33(function QuickNotePopover2({
         top: adjustedPosition.y
       },
       children: [
-        agentLastStatement && /* @__PURE__ */ jsx34("div", { className: "mb-2 p-2 bg-blue-50 dark:bg-blue-900/50 rounded text-xs text-blue-600 dark:text-blue-300 border border-blue-100 dark:border-blue-800", children: /* @__PURE__ */ jsxs28("div", { className: "flex items-start gap-1", children: [
-          /* @__PURE__ */ jsx34("svg", { className: "w-3 h-3 mt-0.5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx34("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }),
-          /* @__PURE__ */ jsxs28("span", { className: "line-clamp-2", children: [
+        agentLastStatement && /* @__PURE__ */ jsx35("div", { className: "mb-2 p-2 bg-blue-50 dark:bg-blue-900/50 rounded text-xs text-blue-600 dark:text-blue-300 border border-blue-100 dark:border-blue-800", children: /* @__PURE__ */ jsxs29("div", { className: "flex items-start gap-1", children: [
+          /* @__PURE__ */ jsx35("svg", { className: "w-3 h-3 mt-0.5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx35("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }),
+          /* @__PURE__ */ jsxs29("span", { className: "line-clamp-2", children: [
             "AI discussed: \u201C",
             agentLastStatement,
             "\u201D"
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           "textarea",
           {
             ref: textareaRef,
@@ -11698,13 +12103,13 @@ var QuickNotePopover = memo33(function QuickNotePopover2({
             )
           }
         ),
-        /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between mt-2", children: [
-          /* @__PURE__ */ jsxs28("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between mt-2", children: [
+          /* @__PURE__ */ jsxs29("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
             navigator.platform.includes("Mac") ? "\u2318" : "Ctrl",
             "+Enter to save"
           ] }),
-          /* @__PURE__ */ jsxs28("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsxs29("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx35(
               "button",
               {
                 onClick: onCancel,
@@ -11717,7 +12122,7 @@ var QuickNotePopover = memo33(function QuickNotePopover2({
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ jsx34(
+            /* @__PURE__ */ jsx35(
               "button",
               {
                 onClick: handleSave,
@@ -11741,23 +12146,23 @@ var QuickNotePopover = memo33(function QuickNotePopover2({
 
 // src/components/AskAbout/AskAboutOverlay.tsx
 init_utils();
-import { memo as memo34 } from "react";
-import { jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
-var AskAboutOverlay = memo34(function AskAboutOverlay2({
+import { memo as memo35 } from "react";
+import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
+var AskAboutOverlay = memo35(function AskAboutOverlay2({
   visible,
   progress,
-  position,
+  position: position2,
   size = 60,
   className
 }) {
-  if (!visible || !position) {
+  if (!visible || !position2) {
     return null;
   }
   const strokeWidth = 4;
   const radius = (size - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
   const strokeDashoffset = circumference * (1 - progress);
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: cn(
@@ -11766,11 +12171,11 @@ var AskAboutOverlay = memo34(function AskAboutOverlay2({
         className
       ),
       style: {
-        left: position.x - size / 2,
-        top: position.y - size / 2
+        left: position2.x - size / 2,
+        top: position2.y - size / 2
       },
       children: [
-        /* @__PURE__ */ jsxs29(
+        /* @__PURE__ */ jsxs30(
           "svg",
           {
             width: size,
@@ -11778,7 +12183,7 @@ var AskAboutOverlay = memo34(function AskAboutOverlay2({
             viewBox: `0 0 ${size} ${size}`,
             className: "transform -rotate-90",
             children: [
-              /* @__PURE__ */ jsx35(
+              /* @__PURE__ */ jsx36(
                 "circle",
                 {
                   cx: size / 2,
@@ -11789,7 +12194,7 @@ var AskAboutOverlay = memo34(function AskAboutOverlay2({
                   strokeWidth
                 }
               ),
-              /* @__PURE__ */ jsx35(
+              /* @__PURE__ */ jsx36(
                 "circle",
                 {
                   cx: size / 2,
@@ -11807,12 +12212,12 @@ var AskAboutOverlay = memo34(function AskAboutOverlay2({
             ]
           }
         ),
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36(
           "div",
           {
             className: "absolute inset-0 flex items-center justify-center",
             style: { color: progress >= 1 ? "#22c55e" : "white" },
-            children: progress >= 1 ? /* @__PURE__ */ jsx35(
+            children: progress >= 1 ? /* @__PURE__ */ jsx36(
               "svg",
               {
                 width: "24",
@@ -11823,9 +12228,9 @@ var AskAboutOverlay = memo34(function AskAboutOverlay2({
                 strokeWidth: "2",
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
-                children: /* @__PURE__ */ jsx35("polyline", { points: "20 6 9 17 4 12" })
+                children: /* @__PURE__ */ jsx36("polyline", { points: "20 6 9 17 4 12" })
               }
-            ) : /* @__PURE__ */ jsxs29(
+            ) : /* @__PURE__ */ jsxs30(
               "svg",
               {
                 width: "20",
@@ -11837,9 +12242,9 @@ var AskAboutOverlay = memo34(function AskAboutOverlay2({
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 children: [
-                  /* @__PURE__ */ jsx35("circle", { cx: "12", cy: "12", r: "10" }),
-                  /* @__PURE__ */ jsx35("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
-                  /* @__PURE__ */ jsx35("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+                  /* @__PURE__ */ jsx36("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ jsx36("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+                  /* @__PURE__ */ jsx36("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
                 ]
               }
             )
@@ -11852,23 +12257,23 @@ var AskAboutOverlay = memo34(function AskAboutOverlay2({
 
 // src/components/AskAbout/AskAboutTrigger.tsx
 init_utils();
-import { memo as memo35, useCallback as useCallback39, useState as useState27, useRef as useRef24, useEffect as useEffect25 } from "react";
-import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
-var AskAboutTrigger = memo35(function AskAboutTrigger2({
-  position,
+import { memo as memo36, useCallback as useCallback40, useState as useState28, useRef as useRef25, useEffect as useEffect26 } from "react";
+import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
+var AskAboutTrigger = memo36(function AskAboutTrigger2({
+  position: position2,
   onConfirm,
   onCancel,
   visible,
   autoHideDelay = 5e3,
   className
 }) {
-  const [adjustedPosition, setAdjustedPosition] = useState27(position);
-  const triggerRef = useRef24(null);
-  useEffect25(() => {
+  const [adjustedPosition, setAdjustedPosition] = useState28(position2);
+  const triggerRef = useRef25(null);
+  useEffect26(() => {
     if (!visible || !triggerRef.current) return;
     const rect = triggerRef.current.getBoundingClientRect();
     const padding = 10;
-    let { x, y } = position;
+    let { x, y } = position2;
     if (x + rect.width / 2 > window.innerWidth - padding) {
       x = window.innerWidth - rect.width / 2 - padding;
     }
@@ -11876,23 +12281,23 @@ var AskAboutTrigger = memo35(function AskAboutTrigger2({
       x = rect.width / 2 + padding;
     }
     if (y + rect.height > window.innerHeight - padding) {
-      y = position.y - rect.height - 20;
+      y = position2.y - rect.height - 20;
     }
     setAdjustedPosition({ x, y });
-  }, [position, visible]);
-  useEffect25(() => {
+  }, [position2, visible]);
+  useEffect26(() => {
     if (!visible || autoHideDelay === 0) return;
     const timer = setTimeout(onCancel, autoHideDelay);
     return () => clearTimeout(timer);
   }, [visible, autoHideDelay, onCancel]);
-  const handleConfirm = useCallback39(
+  const handleConfirm = useCallback40(
     (e) => {
       e.stopPropagation();
       onConfirm();
     },
     [onConfirm]
   );
-  const handleCancel = useCallback39(
+  const handleCancel = useCallback40(
     (e) => {
       e.stopPropagation();
       onCancel();
@@ -11902,7 +12307,7 @@ var AskAboutTrigger = memo35(function AskAboutTrigger2({
   if (!visible) {
     return null;
   }
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       ref: triggerRef,
@@ -11921,8 +12326,8 @@ var AskAboutTrigger = memo35(function AskAboutTrigger2({
         transform: "translate(-50%, 0)"
       },
       children: [
-        /* @__PURE__ */ jsx36("span", { className: "text-sm text-gray-600 dark:text-gray-300 px-2", children: "Ask about this?" }),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37("span", { className: "text-sm text-gray-600 dark:text-gray-300 px-2", children: "Ask about this?" }),
+        /* @__PURE__ */ jsx37(
           "button",
           {
             onClick: handleConfirm,
@@ -11935,7 +12340,7 @@ var AskAboutTrigger = memo35(function AskAboutTrigger2({
             children: "Ask"
           }
         ),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "button",
           {
             onClick: handleCancel,
@@ -11957,9 +12362,9 @@ var AskAboutTrigger = memo35(function AskAboutTrigger2({
 // src/components/Minimap/Minimap.tsx
 init_hooks();
 init_utils();
-import { memo as memo36, useMemo as useMemo14, useCallback as useCallback40 } from "react";
-import { Fragment as Fragment3, jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
-var PageIndicator = memo36(function PageIndicator2({
+import { memo as memo37, useMemo as useMemo14, useCallback as useCallback41 } from "react";
+import { Fragment as Fragment3, jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
+var PageIndicator = memo37(function PageIndicator2({
   pageNumber,
   status,
   isBookmarked,
@@ -11973,7 +12378,7 @@ var PageIndicator = memo36(function PageIndicator2({
     if (status === "visited") return "bg-green-400";
     return "bg-gray-200 dark:bg-gray-700";
   };
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "button",
     {
       onClick,
@@ -11989,13 +12394,13 @@ var PageIndicator = memo36(function PageIndicator2({
       title: `Page ${pageNumber}${isBookmarked ? " (bookmarked)" : ""}`,
       "aria-label": `Go to page ${pageNumber}`,
       children: [
-        isBookmarked && !compact && /* @__PURE__ */ jsx37("div", { className: "absolute -top-1 -right-1 w-2 h-2 bg-yellow-500 rounded-full border border-white" }),
-        showNumber && !compact && /* @__PURE__ */ jsx37("span", { className: "absolute inset-0 flex items-center justify-center text-[8px] font-medium text-white", children: pageNumber })
+        isBookmarked && !compact && /* @__PURE__ */ jsx38("div", { className: "absolute -top-1 -right-1 w-2 h-2 bg-yellow-500 rounded-full border border-white" }),
+        showNumber && !compact && /* @__PURE__ */ jsx38("span", { className: "absolute inset-0 flex items-center justify-center text-[8px] font-medium text-white", children: pageNumber })
       ]
     }
   );
 });
-var Minimap = memo36(function Minimap2({
+var Minimap = memo37(function Minimap2({
   variant = "sidebar",
   floatingPosition = "right",
   maxHeight = 300,
@@ -12012,14 +12417,14 @@ var Minimap = memo36(function Minimap2({
     return new Set(bookmarks.map((b) => b.pageNumber));
   }, [bookmarks]);
   const compact = numPages > 50;
-  const handlePageClick = useCallback40(
+  const handlePageClick = useCallback41(
     (pageNumber) => {
       goToPage(pageNumber);
       onPageClick?.(pageNumber);
     },
     [goToPage, onPageClick]
   );
-  const getPageStatus = useCallback40(
+  const getPageStatus = useCallback41(
     (pageNumber) => {
       if (pageNumber === currentPage) return "current";
       if (bookmarkedPages.has(pageNumber)) return "bookmarked";
@@ -12032,7 +12437,7 @@ var Minimap = memo36(function Minimap2({
     const pages = [];
     for (let i = 1; i <= numPages; i++) {
       pages.push(
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           PageIndicator,
           {
             pageNumber: i,
@@ -12053,16 +12458,16 @@ var Minimap = memo36(function Minimap2({
   if (numPages === 0) {
     return null;
   }
-  const content = /* @__PURE__ */ jsxs31(Fragment3, { children: [
-    /* @__PURE__ */ jsxs31("div", { className: "mb-3", children: [
-      /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-1", children: [
-        /* @__PURE__ */ jsx37("span", { children: "Progress" }),
-        /* @__PURE__ */ jsxs31("span", { children: [
+  const content = /* @__PURE__ */ jsxs32(Fragment3, { children: [
+    /* @__PURE__ */ jsxs32("div", { className: "mb-3", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-1", children: [
+        /* @__PURE__ */ jsx38("span", { children: "Progress" }),
+        /* @__PURE__ */ jsxs32("span", { children: [
           progressPercentage,
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ jsx37("div", { className: "h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx38("div", { className: "h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx38(
         "div",
         {
           className: "h-full bg-green-500 rounded-full transition-all duration-300",
@@ -12070,7 +12475,7 @@ var Minimap = memo36(function Minimap2({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38(
       "div",
       {
         className: cn(
@@ -12081,21 +12486,21 @@ var Minimap = memo36(function Minimap2({
         children: pageIndicators
       }
     ),
-    /* @__PURE__ */ jsx37("div", { className: "mt-3 pt-2 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxs31("div", { className: "flex flex-wrap gap-3 text-xs text-gray-500 dark:text-gray-400", children: [
-      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx37("div", { className: "w-2 h-2 rounded-sm bg-blue-500" }),
-        /* @__PURE__ */ jsx37("span", { children: "Current" })
+    /* @__PURE__ */ jsx38("div", { className: "mt-3 pt-2 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-wrap gap-3 text-xs text-gray-500 dark:text-gray-400", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx38("div", { className: "w-2 h-2 rounded-sm bg-blue-500" }),
+        /* @__PURE__ */ jsx38("span", { children: "Current" })
       ] }),
-      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx37("div", { className: "w-2 h-2 rounded-sm bg-green-400" }),
-        /* @__PURE__ */ jsx37("span", { children: "Visited" })
+      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx38("div", { className: "w-2 h-2 rounded-sm bg-green-400" }),
+        /* @__PURE__ */ jsx38("span", { children: "Visited" })
       ] }),
-      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx37("div", { className: "w-2 h-2 rounded-sm bg-yellow-400" }),
-        /* @__PURE__ */ jsx37("span", { children: "Bookmarked" })
+      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx38("div", { className: "w-2 h-2 rounded-sm bg-yellow-400" }),
+        /* @__PURE__ */ jsx38("span", { children: "Bookmarked" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs31("div", { className: "mt-2 text-xs text-gray-500 dark:text-gray-400", children: [
+    /* @__PURE__ */ jsxs32("div", { className: "mt-2 text-xs text-gray-500 dark:text-gray-400", children: [
       visitedCount,
       " of ",
       numPages,
@@ -12103,7 +12508,7 @@ var Minimap = memo36(function Minimap2({
     ] })
   ] });
   if (variant === "floating") {
-    return /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsxs32(
       "div",
       {
         className: cn(
@@ -12119,13 +12524,13 @@ var Minimap = memo36(function Minimap2({
         ),
         style: { maxHeight },
         children: [
-          /* @__PURE__ */ jsx37("h3", { className: "text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2", children: "Reading Progress" }),
+          /* @__PURE__ */ jsx38("h3", { className: "text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2", children: "Reading Progress" }),
           content
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
       className: cn(
@@ -12145,11 +12550,11 @@ init_FloatingZoomControls2();
 // src/components/PDFThumbnailNav/PDFThumbnailNav.tsx
 init_hooks();
 init_utils();
-import { memo as memo37, useEffect as useEffect26, useState as useState28, useRef as useRef25, useCallback as useCallback41 } from "react";
-import { jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
+import { memo as memo38, useEffect as useEffect27, useState as useState29, useRef as useRef26, useCallback as useCallback42 } from "react";
+import { jsx as jsx39, jsxs as jsxs33 } from "react/jsx-runtime";
 var DEFAULT_WIDTH = 612;
 var DEFAULT_HEIGHT = 792;
-var PDFThumbnailNav = memo37(function PDFThumbnailNav2({
+var PDFThumbnailNav = memo38(function PDFThumbnailNav2({
   thumbnailScale = 0.15,
   orientation = "vertical",
   maxVisible = 10,
@@ -12160,14 +12565,14 @@ var PDFThumbnailNav = memo37(function PDFThumbnailNav2({
 }) {
   const { document: document2, numPages, currentPage } = usePDFViewer();
   const { viewerStore } = usePDFViewerStores();
-  const containerRef = useRef25(null);
-  const [thumbnails, setThumbnails] = useState28(/* @__PURE__ */ new Map());
-  const [visibleRange, setVisibleRange] = useState28({ start: 1, end: maxVisible });
-  const renderQueueRef = useRef25(/* @__PURE__ */ new Set());
-  const pageCache = useRef25(/* @__PURE__ */ new Map());
+  const containerRef = useRef26(null);
+  const [thumbnails, setThumbnails] = useState29(/* @__PURE__ */ new Map());
+  const [visibleRange, setVisibleRange] = useState29({ start: 1, end: maxVisible });
+  const renderQueueRef = useRef26(/* @__PURE__ */ new Set());
+  const pageCache = useRef26(/* @__PURE__ */ new Map());
   const thumbnailWidth = Math.floor(DEFAULT_WIDTH * thumbnailScale);
   const thumbnailHeight = Math.floor(DEFAULT_HEIGHT * thumbnailScale);
-  const updateVisibleRange = useCallback41(() => {
+  const updateVisibleRange = useCallback42(() => {
     if (!containerRef.current || numPages === 0) return;
     const container = containerRef.current;
     const isHorizontal2 = orientation === "horizontal";
@@ -12179,7 +12584,7 @@ var PDFThumbnailNav = memo37(function PDFThumbnailNav2({
     const lastVisible = Math.min(numPages, firstVisible + visibleCount);
     setVisibleRange({ start: firstVisible, end: lastVisible });
   }, [numPages, orientation, thumbnailWidth, thumbnailHeight, gap]);
-  useEffect26(() => {
+  useEffect27(() => {
     const container = containerRef.current;
     if (!container) return;
     const handleScroll = () => {
@@ -12189,7 +12594,7 @@ var PDFThumbnailNav = memo37(function PDFThumbnailNav2({
     updateVisibleRange();
     return () => container.removeEventListener("scroll", handleScroll);
   }, [updateVisibleRange]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (!document2) {
       setThumbnails(/* @__PURE__ */ new Map());
       pageCache.current.clear();
@@ -12244,7 +12649,7 @@ var PDFThumbnailNav = memo37(function PDFThumbnailNav2({
     };
     renderThumbnails();
   }, [document2, visibleRange, thumbnailScale, thumbnails]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (!containerRef.current || numPages === 0) return;
     const container = containerRef.current;
     const isHorizontal2 = orientation === "horizontal";
@@ -12260,12 +12665,12 @@ var PDFThumbnailNav = memo37(function PDFThumbnailNav2({
       });
     }
   }, [currentPage, numPages, orientation, thumbnailWidth, thumbnailHeight, gap]);
-  const handleThumbnailClick = useCallback41((pageNum) => {
+  const handleThumbnailClick = useCallback42((pageNum) => {
     onThumbnailClick?.(pageNum);
     viewerStore.getState().requestScrollToPage(pageNum, "smooth");
   }, [onThumbnailClick, viewerStore]);
   if (!document2 || numPages === 0) {
-    return /* @__PURE__ */ jsx38(
+    return /* @__PURE__ */ jsx39(
       "div",
       {
         className: cn(
@@ -12286,7 +12691,7 @@ var PDFThumbnailNav = memo37(function PDFThumbnailNav2({
   }
   const isHorizontal = orientation === "horizontal";
   const totalSize = numPages * ((isHorizontal ? thumbnailWidth : thumbnailHeight) + gap) - gap;
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "div",
     {
       ref: containerRef,
@@ -12300,7 +12705,7 @@ var PDFThumbnailNav = memo37(function PDFThumbnailNav2({
       style: {
         ...isHorizontal ? { overflowX: "auto", overflowY: "hidden" } : { overflowX: "hidden", overflowY: "auto" }
       },
-      children: /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsx39(
         "div",
         {
           className: cn(
@@ -12317,7 +12722,7 @@ var PDFThumbnailNav = memo37(function PDFThumbnailNav2({
             const thumbnail = thumbnails.get(pageNum);
             const isActive = pageNum === currentPage;
             const isVisible = pageNum >= visibleRange.start && pageNum <= visibleRange.end;
-            return /* @__PURE__ */ jsxs32(
+            return /* @__PURE__ */ jsxs33(
               "div",
               {
                 className: cn(
@@ -12342,7 +12747,7 @@ var PDFThumbnailNav = memo37(function PDFThumbnailNav2({
                   }
                 },
                 children: [
-                  /* @__PURE__ */ jsx38(
+                  /* @__PURE__ */ jsx39(
                     "div",
                     {
                       className: "relative bg-white dark:bg-gray-700",
@@ -12350,7 +12755,7 @@ var PDFThumbnailNav = memo37(function PDFThumbnailNav2({
                         width: thumbnailWidth,
                         height: thumbnailHeight
                       },
-                      children: isVisible && thumbnail?.canvas ? /* @__PURE__ */ jsx38(
+                      children: isVisible && thumbnail?.canvas ? /* @__PURE__ */ jsx39(
                         "img",
                         {
                           src: thumbnail.canvas.toDataURL(),
@@ -12358,10 +12763,10 @@ var PDFThumbnailNav = memo37(function PDFThumbnailNav2({
                           className: "w-full h-full object-contain",
                           loading: "lazy"
                         }
-                      ) : /* @__PURE__ */ jsx38("div", { className: "absolute inset-0 flex items-center justify-center text-gray-400 dark:text-gray-500 text-xs", children: pageNum })
+                      ) : /* @__PURE__ */ jsx39("div", { className: "absolute inset-0 flex items-center justify-center text-gray-400 dark:text-gray-500 text-xs", children: pageNum })
                     }
                   ),
-                  showPageNumbers && /* @__PURE__ */ jsx38(
+                  showPageNumbers && /* @__PURE__ */ jsx39(
                     "div",
                     {
                       className: cn(
@@ -12386,7 +12791,7 @@ var PDFThumbnailNav = memo37(function PDFThumbnailNav2({
 // src/components/ErrorBoundary/PDFErrorBoundary.tsx
 init_utils();
 import { Component } from "react";
-import { jsx as jsx39, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs34 } from "react/jsx-runtime";
 var PDFErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
@@ -12414,7 +12819,7 @@ var PDFErrorBoundary = class extends Component {
         return fallback;
       }
       if (showDefaultUI) {
-        return /* @__PURE__ */ jsx39(
+        return /* @__PURE__ */ jsx40(
           DefaultErrorUI,
           {
             error,
@@ -12433,7 +12838,7 @@ function DefaultErrorUI({ error, onReset, className }) {
   const isNetworkError = error.message.includes("fetch") || error.message.includes("network") || error.message.includes("Failed to load");
   let title = "Something went wrong";
   let description = error.message;
-  let icon = /* @__PURE__ */ jsx39("svg", { className: "w-12 h-12 text-red-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx39(
+  let icon = /* @__PURE__ */ jsx40("svg", { className: "w-12 h-12 text-red-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx40(
     "path",
     {
       strokeLinecap: "round",
@@ -12445,7 +12850,7 @@ function DefaultErrorUI({ error, onReset, className }) {
   if (isPDFError) {
     title = "Unable to load PDF";
     description = "The PDF file could not be loaded. It may be corrupted or in an unsupported format.";
-    icon = /* @__PURE__ */ jsx39("svg", { className: "w-12 h-12 text-red-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx39(
+    icon = /* @__PURE__ */ jsx40("svg", { className: "w-12 h-12 text-red-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx40(
       "path",
       {
         strokeLinecap: "round",
@@ -12457,7 +12862,7 @@ function DefaultErrorUI({ error, onReset, className }) {
   } else if (isNetworkError) {
     title = "Network error";
     description = "Unable to fetch the PDF file. Please check your internet connection and try again.";
-    icon = /* @__PURE__ */ jsx39("svg", { className: "w-12 h-12 text-red-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx39(
+    icon = /* @__PURE__ */ jsx40("svg", { className: "w-12 h-12 text-red-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx40(
       "path",
       {
         strokeLinecap: "round",
@@ -12467,7 +12872,7 @@ function DefaultErrorUI({ error, onReset, className }) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "div",
     {
       className: cn(
@@ -12480,14 +12885,14 @@ function DefaultErrorUI({ error, onReset, className }) {
       ),
       children: [
         icon,
-        /* @__PURE__ */ jsx39("h2", { className: "mt-4 text-xl font-semibold text-gray-900 dark:text-gray-100", children: title }),
-        /* @__PURE__ */ jsx39("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400 max-w-md", children: description }),
-        /* @__PURE__ */ jsxs33("details", { className: "mt-4 text-left max-w-md w-full", children: [
-          /* @__PURE__ */ jsx39("summary", { className: "cursor-pointer text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: "Technical details" }),
-          /* @__PURE__ */ jsx39("pre", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded text-xs overflow-auto", children: error.stack || error.message })
+        /* @__PURE__ */ jsx40("h2", { className: "mt-4 text-xl font-semibold text-gray-900 dark:text-gray-100", children: title }),
+        /* @__PURE__ */ jsx40("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400 max-w-md", children: description }),
+        /* @__PURE__ */ jsxs34("details", { className: "mt-4 text-left max-w-md w-full", children: [
+          /* @__PURE__ */ jsx40("summary", { className: "cursor-pointer text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: "Technical details" }),
+          /* @__PURE__ */ jsx40("pre", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded text-xs overflow-auto", children: error.stack || error.message })
         ] }),
-        /* @__PURE__ */ jsxs33("div", { className: "mt-6 flex gap-3", children: [
-          /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsxs34("div", { className: "mt-6 flex gap-3", children: [
+          /* @__PURE__ */ jsx40(
             "button",
             {
               onClick: onReset,
@@ -12501,7 +12906,7 @@ function DefaultErrorUI({ error, onReset, className }) {
               children: "Try again"
             }
           ),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             "button",
             {
               onClick: () => window.location.reload(),
@@ -12521,12 +12926,2173 @@ function DefaultErrorUI({ error, onReset, className }) {
   );
 }
 function withErrorBoundary({ component, ...props }) {
-  return /* @__PURE__ */ jsx39(PDFErrorBoundary, { ...props, children: component });
+  return /* @__PURE__ */ jsx40(PDFErrorBoundary, { ...props, children: component });
 }
 
 // src/components/index.ts
 init_PDFLoadingScreen2();
 
+// src/components/TutorMode/TutorModeContainer.tsx
+init_PDFPage2();
+init_hooks();
+import { useEffect as useEffect28, useMemo as useMemo15, useRef as useRef27, useState as useState30 } from "react";
+import { useStore as useStore2 } from "zustand";
+
+// src/components/TutorMode/CameraView.tsx
+import { motion } from "framer-motion";
+import { jsx as jsx41 } from "react/jsx-runtime";
+function CameraView({
+  camera,
+  children,
+  durationMs = 700,
+  className
+}) {
+  return /* @__PURE__ */ jsx41(
+    motion.div,
+    {
+      className,
+      style: {
+        transformOrigin: "50% 50%",
+        willChange: "transform",
+        width: "100%",
+        height: "100%",
+        position: "relative"
+      },
+      animate: {
+        scale: camera.scale,
+        x: camera.x,
+        y: camera.y
+      },
+      transition: {
+        duration: durationMs / 1e3,
+        ease: camera.easing === "linear" ? "linear" : camera.easing === "ease-in" ? [0.42, 0, 1, 1] : camera.easing === "ease-out" ? [0, 0, 0.58, 1] : [0.42, 0, 0.58, 1]
+      },
+      children
+    }
+  );
+}
+
+// src/components/TutorMode/CinemaLayer.tsx
+import { AnimatePresence } from "framer-motion";
+
+// src/components/TutorMode/SpotlightMask.tsx
+import { useId } from "react";
+import { motion as motion2 } from "framer-motion";
+import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
+function SpotlightMask({
+  page,
+  bbox,
+  action,
+  durationMs = 400
+}) {
+  const maskId = useId();
+  const filterId = `${maskId}-blur`;
+  const [x1, y1, x2, y2] = bbox;
+  const w = Math.max(0, x2 - x1);
+  const h = Math.max(0, y2 - y1);
+  const rx = action.shape === "rounded" ? 12 : action.shape === "ellipse" ? w / 2 : 0;
+  const ry = action.shape === "rounded" ? 12 : action.shape === "ellipse" ? h / 2 : 0;
+  const feather = action.feather_px;
+  return /* @__PURE__ */ jsxs35(
+    "svg",
+    {
+      viewBox: `0 0 ${page.width} ${page.height}`,
+      width: page.width,
+      height: page.height,
+      preserveAspectRatio: "none",
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        width: page.width,
+        height: page.height
+      },
+      "data-role": "spotlight-mask",
+      children: [
+        /* @__PURE__ */ jsxs35("defs", { children: [
+          /* @__PURE__ */ jsx42("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx42("feGaussianBlur", { in: "SourceGraphic", stdDeviation: feather / 4 }) }),
+          /* @__PURE__ */ jsxs35("mask", { id: maskId, children: [
+            /* @__PURE__ */ jsx42("rect", { x: 0, y: 0, width: page.width, height: page.height, fill: "white" }),
+            action.shape === "ellipse" ? /* @__PURE__ */ jsx42(
+              "ellipse",
+              {
+                cx: (x1 + x2) / 2,
+                cy: (y1 + y2) / 2,
+                rx: w / 2,
+                ry: h / 2,
+                fill: "black",
+                filter: `url(#${filterId})`
+              }
+            ) : /* @__PURE__ */ jsx42(
+              "rect",
+              {
+                x: x1,
+                y: y1,
+                width: w,
+                height: h,
+                rx,
+                ry,
+                fill: "black",
+                filter: `url(#${filterId})`
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx42(
+          motion2.rect,
+          {
+            x: 0,
+            y: 0,
+            width: page.width,
+            height: page.height,
+            fill: "black",
+            mask: `url(#${maskId})`,
+            initial: { fillOpacity: 0 },
+            animate: { fillOpacity: action.dim_opacity },
+            exit: { fillOpacity: 0 },
+            transition: { duration: durationMs / 1e3, ease: "easeOut" }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/TutorMode/AnimatedUnderline.tsx
+import { motion as motion3 } from "framer-motion";
+import { jsx as jsx43 } from "react/jsx-runtime";
+function pathForStyle(x1, x2, y, style) {
+  if (style === "straight") return `M ${x1} ${y} L ${x2} ${y}`;
+  if (style === "double")
+    return `M ${x1} ${y - 3} L ${x2} ${y - 3} M ${x1} ${y + 3} L ${x2} ${y + 3}`;
+  if (style === "wavy") {
+    const steps = Math.max(8, Math.floor((x2 - x1) / 18));
+    let d2 = `M ${x1} ${y}`;
+    for (let i = 1; i <= steps; i++) {
+      const px = x1 + (x2 - x1) * i / steps;
+      const dy = i % 2 === 0 ? 4 : -4;
+      d2 += ` Q ${px - (x2 - x1) / (2 * steps)} ${y + dy} ${px} ${y}`;
+    }
+    return d2;
+  }
+  const segs = 6;
+  let d = `M ${x1} ${y}`;
+  for (let i = 1; i <= segs; i++) {
+    const px = x1 + (x2 - x1) * i / segs;
+    const jitter = (Math.random() - 0.5) * 4;
+    d += ` L ${px} ${y + jitter}`;
+  }
+  return d;
+}
+function AnimatedUnderline({ bbox, action }) {
+  const [x1, , x2, y2] = bbox;
+  const y = y2 + 6;
+  const d = pathForStyle(x1, x2, y, action.style);
+  const duration = action.draw_duration_ms / 1e3;
+  return /* @__PURE__ */ jsx43(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "visible"
+      },
+      "data-role": "underline",
+      children: /* @__PURE__ */ jsx43(
+        motion3.path,
+        {
+          d,
+          fill: "none",
+          stroke: action.color,
+          strokeWidth: 4,
+          strokeLinecap: "round",
+          initial: { pathLength: 0, opacity: 0 },
+          animate: { pathLength: 1, opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration, ease: "easeOut" }
+        }
+      )
+    }
+  );
+}
+
+// src/components/TutorMode/AnimatedHighlight.tsx
+import { motion as motion4 } from "framer-motion";
+import { jsx as jsx44 } from "react/jsx-runtime";
+function AnimatedHighlight({ bbox, action }) {
+  const [x1, y1, x2, y2] = bbox;
+  const w = x2 - x1;
+  const h = y2 - y1;
+  return /* @__PURE__ */ jsx44(
+    motion4.div,
+    {
+      style: {
+        position: "absolute",
+        left: x1,
+        top: y1,
+        height: h,
+        background: action.color,
+        borderRadius: 4,
+        mixBlendMode: "multiply",
+        transformOrigin: "0% 50%",
+        pointerEvents: "none"
+      },
+      initial: { width: 0, opacity: 0.9 },
+      animate: { width: w, opacity: 0.9 },
+      exit: { opacity: 0 },
+      transition: { duration: action.draw_duration_ms / 1e3, ease: "easeOut" },
+      "data-role": "highlight"
+    }
+  );
+}
+
+// src/components/TutorMode/PulseOverlay.tsx
+import { motion as motion5 } from "framer-motion";
+import { jsx as jsx45 } from "react/jsx-runtime";
+var INTENSITY = {
+  subtle: { scale: 1.02, border: "2px solid rgba(59,130,246,0.6)" },
+  normal: { scale: 1.05, border: "3px solid rgba(59,130,246,0.8)" },
+  strong: { scale: 1.1, border: "4px solid rgba(59,130,246,1.0)" }
+};
+function PulseOverlay({ bbox, action }) {
+  const [x1, y1, x2, y2] = bbox;
+  const { scale, border } = INTENSITY[action.intensity];
+  const repeat = action.count === 1 ? 0 : action.count - 1;
+  return /* @__PURE__ */ jsx45(
+    motion5.div,
+    {
+      style: {
+        position: "absolute",
+        left: x1,
+        top: y1,
+        width: x2 - x1,
+        height: y2 - y1,
+        border,
+        borderRadius: 8,
+        pointerEvents: "none",
+        boxSizing: "border-box"
+      },
+      animate: { scale: [1, scale, 1] },
+      transition: {
+        duration: 1.2,
+        times: [0, 0.5, 1],
+        ease: "easeInOut",
+        repeat,
+        repeatType: "loop"
+      },
+      exit: { opacity: 0 },
+      "data-role": "pulse"
+    }
+  );
+}
+
+// src/components/TutorMode/CalloutArrow.tsx
+import { motion as motion6 } from "framer-motion";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+function centerOf(b) {
+  return { x: (b[0] + b[2]) / 2, y: (b[1] + b[3]) / 2 };
+}
+function arrowPath(fromBbox, toBbox, curve) {
+  const a = centerOf(fromBbox);
+  const b = centerOf(toBbox);
+  if (curve === "straight") return `M ${a.x} ${a.y} L ${b.x} ${b.y}`;
+  if (curve === "zigzag") {
+    const mx = (a.x + b.x) / 2;
+    return `M ${a.x} ${a.y} L ${mx} ${a.y} L ${mx} ${b.y} L ${b.x} ${b.y}`;
+  }
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const cx = (a.x + b.x) / 2 - dy * 0.25;
+  const cy = (a.y + b.y) / 2 + dx * 0.25;
+  return `M ${a.x} ${a.y} Q ${cx} ${cy} ${b.x} ${b.y}`;
+}
+function CalloutArrow({ fromBbox, toBbox, action }) {
+  const d = arrowPath(fromBbox, toBbox, action.curve);
+  const label = action.label;
+  const target = centerOf(toBbox);
+  return /* @__PURE__ */ jsxs36(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "visible"
+      },
+      "data-role": "callout",
+      children: [
+        /* @__PURE__ */ jsx46("defs", { children: /* @__PURE__ */ jsx46(
+          "marker",
+          {
+            id: "arrowhead",
+            viewBox: "0 0 10 10",
+            refX: "8",
+            refY: "5",
+            markerWidth: "8",
+            markerHeight: "8",
+            orient: "auto",
+            children: /* @__PURE__ */ jsx46("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "#3B82F6" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx46(
+          motion6.path,
+          {
+            d,
+            fill: "none",
+            stroke: "#3B82F6",
+            strokeWidth: 3,
+            strokeLinecap: "round",
+            markerEnd: "url(#arrowhead)",
+            initial: { pathLength: 0, opacity: 0 },
+            animate: { pathLength: 1, opacity: 1 },
+            exit: { opacity: 0 },
+            transition: { duration: 0.6, ease: "easeOut" }
+          }
+        ),
+        label ? /* @__PURE__ */ jsxs36(
+          motion6.g,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: { delay: 0.3, duration: 0.3 },
+            children: [
+              /* @__PURE__ */ jsx46(
+                "rect",
+                {
+                  x: target.x - 4,
+                  y: target.y - 28,
+                  width: label.length * 9 + 12,
+                  height: 22,
+                  rx: 4,
+                  fill: "#1F2937"
+                }
+              ),
+              /* @__PURE__ */ jsx46(
+                "text",
+                {
+                  x: target.x + 2,
+                  y: target.y - 12,
+                  fill: "white",
+                  fontSize: 14,
+                  fontFamily: "system-ui, sans-serif",
+                  children: label
+                }
+              )
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/TutorMode/GhostReference.tsx
+import { motion as motion7 } from "framer-motion";
+import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
+var POSITIONS = {
+  "top-right": { top: 40, right: 40 },
+  "top-left": { top: 40, left: 40 },
+  "bottom-right": { bottom: 40, right: 40 },
+  "bottom-left": { bottom: 40, left: 40 }
+};
+function GhostReference({
+  page,
+  sourceBbox,
+  sourceBlockText,
+  sourcePageNumber,
+  action
+}) {
+  const width = 360;
+  const [x1, y1, x2, y2] = sourceBbox;
+  return /* @__PURE__ */ jsxs37(
+    motion7.div,
+    {
+      initial: { opacity: 0, y: 20, scale: 0.95 },
+      animate: { opacity: 1, y: 0, scale: 1 },
+      exit: { opacity: 0, y: 20, scale: 0.95 },
+      transition: { duration: 0.4, ease: "easeOut" },
+      style: {
+        position: "absolute",
+        width,
+        background: "#111",
+        color: "white",
+        borderRadius: 12,
+        padding: 12,
+        boxShadow: "0 10px 40px rgba(0,0,0,0.5)",
+        pointerEvents: "none",
+        fontFamily: "system-ui, sans-serif",
+        fontSize: 13,
+        ...POSITIONS[action.position]
+      },
+      "data-role": "ghost-reference",
+      children: [
+        /* @__PURE__ */ jsxs37("div", { style: { opacity: 0.7, fontSize: 11, marginBottom: 6 }, children: [
+          "Page ",
+          sourcePageNumber,
+          " \u2014 ",
+          action.target_block
+        ] }),
+        /* @__PURE__ */ jsxs37(
+          "svg",
+          {
+            width: width - 24,
+            height: 160,
+            viewBox: `0 0 ${page.width} ${page.height}`,
+            style: { background: "#1F2937", borderRadius: 6, display: "block" },
+            preserveAspectRatio: "xMidYMid meet",
+            children: [
+              /* @__PURE__ */ jsx47(
+                "rect",
+                {
+                  x: 0,
+                  y: 0,
+                  width: page.width,
+                  height: page.height,
+                  fill: "#1F2937"
+                }
+              ),
+              /* @__PURE__ */ jsx47(
+                "rect",
+                {
+                  x: x1,
+                  y: y1,
+                  width: x2 - x1,
+                  height: y2 - y1,
+                  fill: "rgba(250,204,21,0.45)",
+                  stroke: "#FBBF24",
+                  strokeWidth: 8
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx47(
+          "div",
+          {
+            style: {
+              marginTop: 8,
+              fontSize: 12,
+              lineHeight: 1.4,
+              opacity: 0.9
+            },
+            children: sourceBlockText ?? "(figure)"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/TutorMode/BoxOverlay.tsx
+import { motion as motion8 } from "framer-motion";
+import { jsx as jsx48 } from "react/jsx-runtime";
+function BoxOverlay({ bbox, action }) {
+  const [x1, y1, x2, y2] = bbox;
+  return /* @__PURE__ */ jsx48(
+    motion8.div,
+    {
+      initial: { opacity: 0, scale: 0.97 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.35, ease: "easeOut" },
+      style: {
+        position: "absolute",
+        left: x1,
+        top: y1,
+        width: x2 - x1,
+        height: y2 - y1,
+        border: `${action.style === "dashed" ? "3px dashed" : "3px solid"} ${action.color}`,
+        borderRadius: 6,
+        pointerEvents: "none",
+        boxSizing: "border-box"
+      },
+      "data-role": "box"
+    }
+  );
+}
+
+// src/components/TutorMode/StickyLabel.tsx
+import { motion as motion9 } from "framer-motion";
+import { jsx as jsx49 } from "react/jsx-runtime";
+function position(bbox, where) {
+  const [x1, y1, x2, y2] = bbox;
+  const cx = (x1 + x2) / 2;
+  const cy = (y1 + y2) / 2;
+  const PAD = 16;
+  switch (where) {
+    case "top":
+      return { left: cx, top: y1 - PAD, transform: "translate(-50%, -100%)" };
+    case "bottom":
+      return { left: cx, top: y2 + PAD, transform: "translate(-50%, 0)" };
+    case "left":
+      return { left: x1 - PAD, top: cy, transform: "translate(-100%, -50%)" };
+    case "right":
+      return { left: x2 + PAD, top: cy, transform: "translate(0, -50%)" };
+    default:
+      return { left: cx, top: y1, transform: "translate(-50%, -100%)" };
+  }
+}
+function StickyLabel({ bbox, action }) {
+  return /* @__PURE__ */ jsx49(
+    motion9.div,
+    {
+      initial: { opacity: 0, scale: 0.9 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.35, ease: "easeOut" },
+      style: {
+        position: "absolute",
+        padding: "6px 10px",
+        background: "#FEF3C7",
+        color: "#78350F",
+        borderRadius: 6,
+        boxShadow: "0 3px 10px rgba(0,0,0,0.2)",
+        fontSize: 14,
+        fontFamily: "system-ui, sans-serif",
+        maxWidth: 280,
+        pointerEvents: "none",
+        ...position(bbox, action.position)
+      },
+      "data-role": "label",
+      children: action.text
+    }
+  );
+}
+
+// src/components/TutorMode/CinemaLayer.tsx
+import { jsx as jsx50 } from "react/jsx-runtime";
+function blockBbox(index, block_id) {
+  return index.blockById.get(block_id)?.block.bbox;
+}
+function CinemaLayer({
+  page,
+  index,
+  overlays,
+  scale
+}) {
+  return /* @__PURE__ */ jsx50(
+    "div",
+    {
+      "data-role": "cinema-layer",
+      style: {
+        position: "absolute",
+        inset: 0,
+        transformOrigin: "0 0",
+        transform: `scale(${scale})`,
+        width: page.page_dimensions.width,
+        height: page.page_dimensions.height,
+        pointerEvents: "none",
+        // PDFPage renders internal layers at z-index 10/20/40/45/50
+        // (canvas / text / highlight / focus / annotation). Without an
+        // explicit z-index here, every tutor overlay stacks UNDER the
+        // AnnotationLayer and becomes invisible. 100 puts us above all of
+        // them while still letting the Exit button (z-index 60) remain
+        // reachable because it sits OUTSIDE this stacking context.
+        zIndex: 100
+      },
+      children: /* @__PURE__ */ jsx50(AnimatePresence, { children: overlays.map((overlay) => {
+        switch (overlay.kind) {
+          case "spotlight": {
+            const a = overlay.action;
+            const b = blockBbox(index, a.target_block);
+            if (!b) return null;
+            return /* @__PURE__ */ jsx50(
+              SpotlightMask,
+              {
+                page: page.page_dimensions,
+                bbox: b,
+                action: a
+              },
+              overlay.id
+            );
+          }
+          case "underline": {
+            const a = overlay.action;
+            const b = blockBbox(index, a.target_block);
+            if (!b) return null;
+            return /* @__PURE__ */ jsx50(AnimatedUnderline, { bbox: b, action: a }, overlay.id);
+          }
+          case "highlight": {
+            const a = overlay.action;
+            const b = blockBbox(index, a.target_block);
+            if (!b) return null;
+            return /* @__PURE__ */ jsx50(AnimatedHighlight, { bbox: b, action: a }, overlay.id);
+          }
+          case "pulse": {
+            const a = overlay.action;
+            const b = blockBbox(index, a.target_block);
+            if (!b) return null;
+            return /* @__PURE__ */ jsx50(PulseOverlay, { bbox: b, action: a }, overlay.id);
+          }
+          case "callout": {
+            const a = overlay.action;
+            const from = blockBbox(index, a.from_block);
+            const to = blockBbox(index, a.to_block);
+            if (!from || !to) return null;
+            return /* @__PURE__ */ jsx50(
+              CalloutArrow,
+              {
+                fromBbox: from,
+                toBbox: to,
+                action: a
+              },
+              overlay.id
+            );
+          }
+          case "ghost_reference": {
+            const a = overlay.action;
+            const hit = index.blockById.get(a.target_block);
+            if (!hit) return null;
+            const targetPage = index.byPage.get(a.target_page);
+            if (!targetPage) return null;
+            return /* @__PURE__ */ jsx50(
+              GhostReference,
+              {
+                page: targetPage.page_dimensions,
+                sourceBbox: hit.block.bbox,
+                sourceBlockText: hit.block.text,
+                sourcePageNumber: hit.pageNumber,
+                action: a
+              },
+              overlay.id
+            );
+          }
+          case "box": {
+            const a = overlay.action;
+            const b = blockBbox(index, a.target_block);
+            if (!b) return null;
+            return /* @__PURE__ */ jsx50(BoxOverlay, { bbox: b, action: a }, overlay.id);
+          }
+          case "label": {
+            const a = overlay.action;
+            const b = blockBbox(index, a.target_block);
+            if (!b) return null;
+            return /* @__PURE__ */ jsx50(StickyLabel, { bbox: b, action: a }, overlay.id);
+          }
+          case "clear":
+          case "camera":
+            return null;
+        }
+      }) })
+    }
+  );
+}
+
+// src/components/TutorMode/SubtitleBar.tsx
+import { AnimatePresence as AnimatePresence2, motion as motion10 } from "framer-motion";
+import { jsx as jsx51 } from "react/jsx-runtime";
+function SubtitleBar({ text }) {
+  return /* @__PURE__ */ jsx51(AnimatePresence2, { children: text ? /* @__PURE__ */ jsx51(
+    motion10.div,
+    {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 20 },
+      transition: { duration: 0.3 },
+      style: {
+        position: "absolute",
+        left: "50%",
+        bottom: 32,
+        transform: "translateX(-50%)",
+        background: "rgba(0,0,0,0.75)",
+        color: "white",
+        padding: "10px 18px",
+        borderRadius: 8,
+        maxWidth: "80%",
+        fontSize: 16,
+        lineHeight: 1.4,
+        fontFamily: "system-ui, sans-serif",
+        pointerEvents: "none",
+        zIndex: 50,
+        textAlign: "center"
+      },
+      "data-role": "subtitle-bar",
+      children: text
+    },
+    text
+  ) : null });
+}
+
+// src/director/storyboard-engine.ts
+init_narration_store();
+init_camera_math();
+var DEFAULT_MIN_OVERLAY_MS = 3500;
+var StoryboardEngine = class {
+  constructor(deps) {
+    this.pendingTimers = /* @__PURE__ */ new Set();
+    this.currentStoryboardId = 0;
+    this.deps = deps;
+  }
+  /**
+   * Execute a new storyboard. Cancels in-flight steps from the previous storyboard
+   * and smoothly transitions the camera/overlays from the current state.
+   */
+  execute(storyboard) {
+    this.cancelPending();
+    this.currentStoryboardId += 1;
+    const storyboardId = this.currentStoryboardId;
+    const { narrationStore } = this.deps;
+    narrationStore.getState().setEngineStatus("transitioning");
+    narrationStore.getState().setLastStoryboard(storyboard);
+    let steps = [...storyboard.steps].sort((a, b) => a.at_ms - b.at_ms);
+    const hasCamera = steps.some((s) => s.action.type === "camera");
+    if (!hasCamera) {
+      const focus = steps.find(
+        (s) => s.action.type !== "clear" && "target_block" in s.action && s.action.target_block
+      );
+      if (focus && focus.action.type !== "clear" && "target_block" in focus.action) {
+        steps = [
+          {
+            at_ms: 0,
+            duration_ms: 700,
+            action: {
+              type: "camera",
+              target_block: focus.action.target_block,
+              scale: 1,
+              padding: 60,
+              easing: "ease-out"
+            }
+          },
+          ...steps
+        ];
+      }
+    }
+    for (const step of steps) {
+      const timer = setTimeout(() => {
+        if (storyboardId !== this.currentStoryboardId) return;
+        this.runStep(step);
+      }, step.at_ms);
+      this.pendingTimers.add(timer);
+    }
+    const markExecuting = setTimeout(() => {
+      if (storyboardId !== this.currentStoryboardId) return;
+      narrationStore.getState().setEngineStatus("executing");
+    }, 0);
+    this.pendingTimers.add(markExecuting);
+    const last = steps[steps.length - 1];
+    if (last) {
+      const totalMs = last.at_ms + last.duration_ms;
+      const markIdle = setTimeout(() => {
+        if (storyboardId !== this.currentStoryboardId) return;
+        narrationStore.getState().setEngineStatus("idle");
+      }, totalMs + 50);
+      this.pendingTimers.add(markIdle);
+    }
+  }
+  /** Abort all pending steps and set engine status to idle. */
+  cancelPending() {
+    for (const t of this.pendingTimers) clearTimeout(t);
+    this.pendingTimers.clear();
+    this.deps.narrationStore.getState().setEngineStatus("idle");
+  }
+  /** Reset visuals: clear overlays, fit camera back to page. */
+  resetVisuals() {
+    this.cancelPending();
+    const { narrationStore, bboxIndex, getViewport } = this.deps;
+    narrationStore.getState().clearOverlays();
+    const viewport = getViewport();
+    const currentPage = narrationStore.getState().currentPage;
+    const pageDims = bboxIndex.byPage.get(currentPage);
+    const fit = pageDims && viewport.width > 0 && viewport.height > 0 ? fitPageScale(pageDims.page_dimensions, viewport) * 0.95 : 1;
+    narrationStore.getState().setCamera({ scale: fit, x: 0, y: 0, easing: "ease-in-out" });
+  }
+  /** Execute one step — dispatch to narrationStore. Returns true if applied. */
+  runStep(step) {
+    const action = step.action;
+    const { narrationStore, bboxIndex } = this.deps;
+    if ("target_block" in action && action.target_block) {
+      if (!bboxIndex.blockById.has(action.target_block)) {
+        narrationStore.getState().appendDebugEvent({
+          kind: "llm-error",
+          summary: `dropped ${action.type} step \u2192 unknown target_block "${action.target_block}"`,
+          payload: { action, validIds: [...bboxIndex.blockById.keys()] }
+        });
+        return false;
+      }
+    }
+    if ("from_block" in action && action.from_block) {
+      if (!bboxIndex.blockById.has(action.from_block)) {
+        narrationStore.getState().appendDebugEvent({
+          kind: "llm-error",
+          summary: `dropped ${action.type} step \u2192 unknown from_block "${action.from_block}"`,
+          payload: { action }
+        });
+        return false;
+      }
+    }
+    if ("to_block" in action && action.to_block) {
+      if (!bboxIndex.blockById.has(action.to_block)) {
+        narrationStore.getState().appendDebugEvent({
+          kind: "llm-error",
+          summary: `dropped ${action.type} step \u2192 unknown to_block "${action.to_block}"`,
+          payload: { action }
+        });
+        return false;
+      }
+    }
+    if (action.type === "camera") {
+      this.applyCamera(action, step.duration_ms);
+      return true;
+    }
+    if (action.type === "clear") {
+      const targets = action.targets;
+      if (targets === "all" || targets === "overlays") {
+        narrationStore.getState().clearOverlays();
+      } else if (targets === "spotlights") {
+        narrationStore.getState().clearOverlays((o) => o.kind === "spotlight");
+      } else if (Array.isArray(targets)) {
+        const ids = new Set(targets);
+        narrationStore.getState().clearOverlays((o) => ids.has(o.id));
+      }
+      return true;
+    }
+    const minMs = this.deps.minOverlayDurationMs ?? DEFAULT_MIN_OVERLAY_MS;
+    const visibleMs = Math.max(step.duration_ms, minMs);
+    const overlay = {
+      id: makeOverlayId(action),
+      kind: action.type,
+      action,
+      createdAt: Date.now(),
+      expiresAt: Date.now() + visibleMs
+    };
+    narrationStore.getState().addOverlay(overlay);
+    const timer = setTimeout(() => {
+      narrationStore.getState().removeOverlay(overlay.id);
+    }, visibleMs);
+    this.pendingTimers.add(timer);
+    return true;
+  }
+  applyCamera(action, durationMs) {
+    const { narrationStore, bboxIndex, getViewport } = this.deps;
+    const viewport = getViewport();
+    let bbox = action.target_bbox;
+    let pageDims = void 0;
+    if (!bbox && action.target_block) {
+      const hit = bboxIndex.blockById.get(action.target_block);
+      if (!hit) return;
+      bbox = hit.block.bbox;
+      pageDims = bboxIndex.byPage.get(hit.pageNumber);
+    } else if (bbox) {
+      pageDims = bboxIndex.byPage.get(narrationStore.getState().currentPage);
+    }
+    if (!bbox || !pageDims) return;
+    const fit = fitPageScale(pageDims.page_dimensions, viewport);
+    const requested = Math.max(0.5, Math.min(3, action.scale ?? 1));
+    const finalScale = fit * requested;
+    const [x1, y1, x2, y2] = bbox;
+    const blockCX = (x1 + x2) / 2;
+    const blockCY = (y1 + y2) / 2;
+    const pageCX = pageDims.page_dimensions.width / 2;
+    const pageCY = pageDims.page_dimensions.height / 2;
+    const x = (pageCX - blockCX) * finalScale;
+    const y = (pageCY - blockCY) * finalScale;
+    const camera = {
+      scale: finalScale,
+      x,
+      y,
+      easing: action.easing
+    };
+    narrationStore.getState().setCamera(camera);
+    void durationMs;
+    void computeCameraForBlock;
+  }
+};
+
+// src/director/storyboard-schema.ts
+import { z } from "zod";
+var BBoxCoordsSchema = z.tuple([z.number(), z.number(), z.number(), z.number()]);
+var CameraSchema = z.object({
+  type: z.literal("camera"),
+  target_block: z.string().optional(),
+  target_bbox: BBoxCoordsSchema.optional(),
+  scale: z.number().min(0.5).max(4).default(1),
+  padding: z.number().min(0).max(400).default(80),
+  easing: z.enum(["linear", "ease-in", "ease-out", "ease-in-out"]).default("ease-in-out")
+}).refine((a) => !!a.target_block || !!a.target_bbox, {
+  message: "camera requires target_block or target_bbox"
+});
+var SpotlightSchema = z.object({
+  type: z.literal("spotlight"),
+  target_block: z.string(),
+  dim_opacity: z.number().min(0).max(1).default(0.65),
+  feather_px: z.number().min(0).max(200).default(40),
+  shape: z.enum(["rect", "rounded", "ellipse"]).default("rounded")
+});
+var UnderlineSchema = z.object({
+  type: z.literal("underline"),
+  target_block: z.string(),
+  color: z.string().default("#FBBF24"),
+  style: z.enum(["straight", "sketch", "double", "wavy"]).default("sketch"),
+  draw_duration_ms: z.number().min(100).max(3e3).default(600)
+});
+var HighlightSchema = z.object({
+  type: z.literal("highlight"),
+  target_block: z.string(),
+  color: z.string().default("rgba(250, 204, 21, 0.35)"),
+  draw_duration_ms: z.number().min(100).max(3e3).default(500)
+});
+var PulseSchema = z.object({
+  type: z.literal("pulse"),
+  target_block: z.string(),
+  count: z.number().int().min(1).max(5).default(2),
+  intensity: z.enum(["subtle", "normal", "strong"]).default("normal")
+});
+var CalloutSchema = z.object({
+  type: z.literal("callout"),
+  from_block: z.string(),
+  to_block: z.string(),
+  label: z.string().max(120).optional(),
+  curve: z.enum(["straight", "curved", "zigzag"]).default("curved")
+});
+var GhostReferenceSchema = z.object({
+  type: z.literal("ghost_reference"),
+  target_page: z.number().int().min(1),
+  target_block: z.string(),
+  position: z.enum(["top-right", "top-left", "bottom-right", "bottom-left"]).default("top-right")
+});
+var BoxSchema = z.object({
+  type: z.literal("box"),
+  target_block: z.string(),
+  color: z.string().default("#3B82F6"),
+  style: z.enum(["solid", "dashed"]).default("solid")
+});
+var LabelSchema = z.object({
+  type: z.literal("label"),
+  target_block: z.string(),
+  text: z.string().min(1).max(120),
+  position: z.enum(["top", "bottom", "left", "right"]).default("top")
+});
+var ClearSchema = z.object({
+  type: z.literal("clear"),
+  targets: z.union([z.enum(["all", "spotlights", "overlays"]), z.array(z.string())]).default("overlays")
+});
+var StoryboardActionSchema = z.union([
+  CameraSchema,
+  SpotlightSchema,
+  UnderlineSchema,
+  HighlightSchema,
+  PulseSchema,
+  CalloutSchema,
+  GhostReferenceSchema,
+  BoxSchema,
+  LabelSchema,
+  ClearSchema
+]);
+var StoryboardStepSchema = z.object({
+  at_ms: z.number().min(0).max(5e3).default(0),
+  duration_ms: z.number().min(100).max(5e3).default(800),
+  action: StoryboardActionSchema
+});
+var StoryboardSchema = z.object({
+  version: z.literal(1),
+  reasoning: z.string().max(500).default(""),
+  steps: z.array(StoryboardStepSchema).min(1).max(4)
+});
+function storyboardJsonSchema(opts = {}) {
+  const { validBlockIds, validCrossPageBlockIds } = opts;
+  const blockIdSchema = validBlockIds && validBlockIds.length > 0 ? { type: ["string", "null"], enum: [...validBlockIds, null] } : { type: ["string", "null"] };
+  const crossPageBlockIdSchema = validCrossPageBlockIds && validCrossPageBlockIds.length > 0 ? {
+    type: ["string", "null"],
+    enum: [...validCrossPageBlockIds, ...validBlockIds ?? [], null]
+  } : blockIdSchema;
+  const actionSchema = {
+    type: "object",
+    additionalProperties: false,
+    required: [
+      "type",
+      "target_block",
+      "target_bbox",
+      "scale",
+      "padding",
+      "easing",
+      "dim_opacity",
+      "feather_px",
+      "shape",
+      "color",
+      "style",
+      "draw_duration_ms",
+      "count",
+      "intensity",
+      "from_block",
+      "to_block",
+      "label",
+      "curve",
+      "target_page",
+      "position",
+      "text",
+      "targets"
+    ],
+    properties: {
+      type: {
+        type: "string",
+        enum: [
+          "camera",
+          "spotlight",
+          "underline",
+          "highlight",
+          "pulse",
+          "callout",
+          "ghost_reference",
+          "box",
+          "label",
+          "clear"
+        ]
+      },
+      target_block: blockIdSchema,
+      target_bbox: {
+        type: ["array", "null"],
+        items: { type: "number" },
+        minItems: 4,
+        maxItems: 4
+      },
+      scale: { type: ["number", "null"] },
+      padding: { type: ["number", "null"] },
+      easing: {
+        type: ["string", "null"],
+        enum: ["linear", "ease-in", "ease-out", "ease-in-out", null]
+      },
+      dim_opacity: { type: ["number", "null"] },
+      feather_px: { type: ["number", "null"] },
+      shape: {
+        type: ["string", "null"],
+        enum: ["rect", "rounded", "ellipse", null]
+      },
+      color: { type: ["string", "null"] },
+      style: {
+        type: ["string", "null"],
+        enum: ["straight", "sketch", "double", "wavy", "solid", "dashed", null]
+      },
+      draw_duration_ms: { type: ["number", "null"] },
+      count: { type: ["integer", "null"] },
+      intensity: {
+        type: ["string", "null"],
+        enum: ["subtle", "normal", "strong", null]
+      },
+      from_block: blockIdSchema,
+      to_block: crossPageBlockIdSchema,
+      label: { type: ["string", "null"] },
+      curve: {
+        type: ["string", "null"],
+        enum: ["straight", "curved", "zigzag", null]
+      },
+      target_page: { type: ["integer", "null"] },
+      position: {
+        type: ["string", "null"],
+        enum: [
+          "top",
+          "bottom",
+          "left",
+          "right",
+          "top-right",
+          "top-left",
+          "bottom-right",
+          "bottom-left",
+          null
+        ]
+      },
+      text: { type: ["string", "null"] },
+      targets: {
+        type: ["string", "null"],
+        enum: ["all", "spotlights", "overlays", null]
+      }
+    }
+  };
+  return {
+    type: "object",
+    additionalProperties: false,
+    required: ["version", "reasoning", "steps"],
+    properties: {
+      version: { type: "integer", enum: [1] },
+      reasoning: { type: "string" },
+      steps: {
+        type: "array",
+        minItems: 1,
+        maxItems: 4,
+        items: {
+          type: "object",
+          additionalProperties: false,
+          required: ["at_ms", "duration_ms", "action"],
+          properties: {
+            at_ms: { type: "number" },
+            duration_ms: { type: "number" },
+            action: actionSchema
+          }
+        }
+      }
+    }
+  };
+}
+
+// src/director/prompts.ts
+var SYSTEM_PROMPT = `You are the cinematic director of an AI tutor's PDF visualization. The tutor speaks one "chunk" at a time; for each chunk you anchor the visuals onto the EXACT blocks on the page the tutor is talking about, so the reader sees the page react like a produced teaching video. Think of yourself as a motion designer layering effects on top of a document \u2014 zoom is only one tool in the kit, and often not the right one.
+
+# Your primary task
+You are given a list of blocks for the current page under "Page blocks", each with a \`block_id\`, \`text\`, \`type\`, \`bbox\`, and \`default_action\`. Your #1 job is to decide WHICH block(s) the current chunk is referring to, and then pick the right visual action(s) to anchor there.
+
+Anchoring rules:
+- EVERY action that references a block MUST set \`target_block\` (or \`from_block\`/\`to_block\` for callouts) to an EXISTING \`block_id\` from "Page blocks" (or "Cross-page figures index" for cross-page refs). Never invent an id. Never emit a step whose target can't be found in the provided lists.
+- Match the chunk to blocks by semantic overlap with the block's \`text\`: quoted phrases, named entities, keywords, figure references ("Fig 3.2", "the suture"), list enumerations.
+- If no block clearly matches, emit a single \`camera\` step that fits the page (no overlays) and explain in \`reasoning\`. Do NOT spray overlays onto random blocks.
+- If multiple blocks match, pick the most specific one, or use a \`callout\` from one to the other.
+
+# Output shape
+Output ONLY this JSON, nothing else:
+{
+  "version": 1,
+  "reasoning": "<which block(s) you picked, which intent you used, and why \u2014 name the block_id>",
+  "steps": [ { "at_ms": <int>, "duration_ms": <int>, "action": <action> }, ... ]
+}
+
+# Action shapes \u2014 ALL fields shown are REQUIRED per action type
+- camera:          { "type":"camera", "target_block":"<id>", "scale":1.1, "padding":80, "easing":"ease-out" }
+- spotlight:       { "type":"spotlight", "target_block":"<id>", "dim_opacity":0.65, "feather_px":40, "shape":"rounded" }
+- underline:       { "type":"underline", "target_block":"<id>", "color":"#FBBF24", "style":"sketch", "draw_duration_ms":600 }
+- highlight:       { "type":"highlight", "target_block":"<id>", "color":"rgba(250,204,21,0.35)", "draw_duration_ms":500 }
+- pulse:           { "type":"pulse", "target_block":"<id>", "count":2, "intensity":"normal" }
+- callout:         { "type":"callout", "from_block":"<id>", "to_block":"<id>", "label":"<text>", "curve":"curved" }
+- ghost_reference: { "type":"ghost_reference", "target_page":<int>, "target_block":"<id>", "position":"top-right" }
+- box:             { "type":"box", "target_block":"<id>", "color":"#3B82F6", "style":"solid" }
+- label:           { "type":"label", "target_block":"<id>", "text":"<text>", "position":"top" }
+- clear:           { "type":"clear", "targets":"overlays" }
+
+# When to use each action (match the effect to the narration's intent, not just the block type)
+- camera          \u2014 when focus SHIFTS to a new region. If the primary block is already on-screen and roughly centered, you may skip camera entirely and start with an overlay. When you do use camera, prefer scale 1.1\u20131.4 for gentle re-centering; reserve 1.5+ for dense figures you need to inspect closely.
+- spotlight       \u2014 when narration ISOLATES one idea, term, or sentence. Great for definitions, principles, and "the key insight is\u2026" moments.
+- underline       \u2014 when narration QUOTES a phrase or reads a line word-by-word. Use style "sketch" for handwritten feel, "straight" for formal, "wavy" for emphasis. Pairs well with spotlight.
+- highlight       \u2014 when narration FLAGS a keyword inline without full focus. Cheap, fast, great for list items, definitions-in-context, callback references.
+- pulse           \u2014 when narration says "notice this" / "see here" / "look at the diagram". Use with figures, icons, and anchor blocks that should catch the eye without blocking surrounding content.
+- callout         \u2014 when narration CONNECTS two things on the page: a caption to its figure, a label to a region, one list item to another. Arrow implies directional meaning.
+- ghost_reference \u2014 when narration REFERS to a block on a DIFFERENT page ("as we saw on page 2\u2026"). Never use for same-page references.
+- box             \u2014 when narration FRAMES a structural region: a table, a sidebar, a group of related items, a diagram subpart. Use dashed style for "in-progress" / "under discussion" regions.
+- label           \u2014 when narration attaches a NAMED TAG to a block: "this is the definition", "this is an example", "step 3". Keep text \u226440 chars for readability.
+- clear           \u2014 rarely needed; the engine auto-expires overlays. Use only when you explicitly want to wipe prior state before a new beat.
+
+Respect each block's \`default_action\` as a soft hint, but override it freely when narration intent calls for a different effect. A paragraph labeled \`default_action: spotlight\` can absolutely take a highlight or underline if that's what the narration asks for.
+
+# Intent Taxonomy \u2014 canonical "recipes" you should use as your default vocabulary
+When narration fits one of these patterns, emit the corresponding storyboard shape (fill in real block_ids from the page). You may also COMPOSE freely beyond these \u2014 they are a floor, not a ceiling.
+
+## define \u2014 the narration introduces or defines a term
+Shape: spotlight the term + underline it + drop a label tag. No camera move if the block is already on-screen.
+{
+  "version": 1,
+  "reasoning": "define recipe: spotlighting and underlining the term, labeling as 'definition'",
+  "steps": [
+    { "at_ms":0,   "duration_ms":700, "action": { "type":"spotlight", "target_block":"p1_para0", "dim_opacity":0.6, "feather_px":40, "shape":"rounded" } },
+    { "at_ms":200, "duration_ms":800, "action": { "type":"underline", "target_block":"p1_para0", "color":"#FBBF24", "style":"sketch", "draw_duration_ms":700 } },
+    { "at_ms":900, "duration_ms":1200, "action": { "type":"label", "target_block":"p1_para0", "text":"definition", "position":"top" } }
+  ]
+}
+
+## point_out \u2014 the narration directs the viewer's eye to a figure, diagram, or specific region
+Shape: gentle camera move + callout arrow from caption to figure + pulse the figure.
+{
+  "version": 1,
+  "reasoning": "point_out recipe: drawing attention from caption p1_cap1 to figure p1_fig0",
+  "steps": [
+    { "at_ms":0,   "duration_ms":600, "action": { "type":"camera", "target_block":"p1_fig0", "scale":1.3, "padding":80, "easing":"ease-out" } },
+    { "at_ms":400, "duration_ms":900, "action": { "type":"callout", "from_block":"p1_cap1", "to_block":"p1_fig0", "label":"see here", "curve":"curved" } },
+    { "at_ms":900, "duration_ms":1200, "action": { "type":"pulse", "target_block":"p1_fig0", "count":2, "intensity":"normal" } }
+  ]
+}
+
+## compare \u2014 the narration contrasts two things on the page
+Shape: box A + box B + callout between them with a relational label.
+{
+  "version": 1,
+  "reasoning": "compare recipe: framing fibrous vs synovial joints",
+  "steps": [
+    { "at_ms":0,   "duration_ms":600, "action": { "type":"box", "target_block":"p1_list5", "color":"#3B82F6", "style":"solid" } },
+    { "at_ms":300, "duration_ms":600, "action": { "type":"box", "target_block":"p1_list12", "color":"#F472B6", "style":"solid" } },
+    { "at_ms":800, "duration_ms":1000, "action": { "type":"callout", "from_block":"p1_list5", "to_block":"p1_list12", "label":"vs", "curve":"curved" } }
+  ]
+}
+
+## emphasize \u2014 the narration stresses a keyword, warning, or takeaway
+Shape: highlight + pulse. Fast, punchy, no camera.
+{
+  "version": 1,
+  "reasoning": "emphasize recipe: highlighting key keyword and pulsing for stress",
+  "steps": [
+    { "at_ms":0,   "duration_ms":500, "action": { "type":"highlight", "target_block":"p1_list0", "color":"rgba(250,204,21,0.35)", "draw_duration_ms":450 } },
+    { "at_ms":350, "duration_ms":800, "action": { "type":"pulse", "target_block":"p1_list0", "count":2, "intensity":"strong" } }
+  ]
+}
+
+# Choreography rules
+- HARD REQUIREMENT: every storyboard MUST contain at least ONE non-camera step. A lone camera step is NEVER a valid output \u2014 the viewer needs an overlay to know WHY the camera moved. If you cannot find a good overlay target, emit a \`highlight\` or \`pulse\` on your primary block as the second step.
+- Favor VARIETY that matches narration texture \u2014 a definition earns different visuals than a comparison. Don't send every chunk through the same zoom+box motion.
+- Include a camera step only when focus genuinely shifts to a new region. If the primary target is already on-screen and roughly centred, SKIP the camera entirely and start directly with an overlay.
+- Camera scale: default to **1.1** (gentle re-centre). Use **1.2\u20131.3** for normal reading distance. Use **1.4\u20131.6** ONLY for dense figures or small inline details. NEVER use a scale below 0.5 or above 4.0 \u2014 the engine rejects those. When in doubt, use 1.1.
+- Prefer overlays that OVERLAP the camera move. A camera that takes 700ms to finish while overlays fire at 200ms feels cinematic; overlays waiting until after the camera settles feel sluggish. Stagger \`at_ms\`: camera at 0, first overlay at 150\u2013300ms, second overlay at 600\u2013900ms.
+- 2\u20134 steps is typical; single-step overlays (no camera) are PREFERRED when the target is already visible.
+- When narration compares two things, USE the compare recipe (box + box + callout), not a single camera step. When narration says "key takeaway", USE emphasize (highlight + pulse).
+- Never target a block_id not present in the provided lists. If no block matches, emit a single camera step at scale 1.0 + a subtle pulse on the nearest heading; explain in \`reasoning\`.
+- Output ONLY valid JSON. No markdown, no code fences, no commentary, no trailing whitespace inside property values.
+
+# Forbidden outputs \u2014 these will be rejected:
+- A storyboard with only a camera step.
+- A camera step with scale < 0.5 or > 4.0.
+- target_block values not listed in "Page blocks" or "Cross-page figures index".
+- Tab characters, newlines, or explanatory text inside JSON string values.`;
+function truncate(text, max = 200) {
+  if (!text) return "";
+  if (text.length <= max) return text;
+  const slice = text.slice(0, max);
+  const last = slice.lastIndexOf(" ");
+  return (last > 40 ? slice.slice(0, last) : slice) + "\u2026";
+}
+function buildUserPrompt(input) {
+  const {
+    chunk,
+    pageNumber,
+    page,
+    index,
+    history,
+    camera,
+    activeOverlays,
+    maxSteps = 4
+  } = input;
+  const pageBlocks = page.blocks.map((b) => ({
+    block_id: b.block_id,
+    type: b.type,
+    text: truncate(b.text, 200),
+    bbox: b.bbox,
+    default_action: b.default_action
+  }));
+  const xPageFigures = index.crossPageFigures.filter((f) => f.page !== pageNumber).slice(0, 20).map((f) => ({
+    block_id: f.block_id,
+    page: f.page,
+    type: f.type,
+    text: truncate(f.text, 200)
+  }));
+  const recent = history.slice(-3).map((h) => h.text);
+  const overlaySummary = activeOverlays.map((o) => ({ id: o.id, kind: o.kind }));
+  const blockIdList = pageBlocks.map((b) => b.block_id);
+  return [
+    `Current page: ${pageNumber}`,
+    `Page blocks (${pageBlocks.length}) \u2014 you MUST pick target_block from this list:`,
+    JSON.stringify(pageBlocks),
+    "",
+    `Valid block_ids for this page: ${JSON.stringify(blockIdList)}`,
+    "",
+    `Cross-page figures index: ${JSON.stringify(xPageFigures)}`,
+    "",
+    `Current chunk (what the tutor just said): ${JSON.stringify(chunk)}`,
+    `Recent chunks: ${JSON.stringify(recent)}`,
+    `Current camera: ${JSON.stringify(camera)}`,
+    `Active overlays: ${JSON.stringify(overlaySummary)}`,
+    "",
+    `Max steps: ${maxSteps}`,
+    `Output JSON storyboard. Every target_block MUST be one of the ids above.`
+  ].join("\n");
+}
+
+// src/director/sse-parser.ts
+async function* parseSse(body) {
+  const reader = body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  try {
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      let idx;
+      while ((idx = buffer.indexOf("\n")) !== -1) {
+        const rawLine = buffer.slice(0, idx).trim();
+        buffer = buffer.slice(idx + 1);
+        if (!rawLine.startsWith("data:")) continue;
+        const payload = rawLine.slice(5).trim();
+        if (!payload || payload === "[DONE]") continue;
+        try {
+          yield JSON.parse(payload);
+        } catch {
+        }
+      }
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+function extractDelta(chunk) {
+  if (!chunk || typeof chunk !== "object") return null;
+  const choices = chunk.choices;
+  if (!choices || !choices.length) return null;
+  return choices[0].delta?.content ?? null;
+}
+
+// src/director/llm-director.ts
+async function directStoryboard(config, input) {
+  const {
+    endpointUrl,
+    model,
+    authToken,
+    extraBody,
+    maxTokens = 1024,
+    temperature = 0.3,
+    useJsonSchema = true,
+    stream = false
+  } = config;
+  const userContent = buildUserPrompt(input);
+  const body = {
+    model,
+    stream,
+    temperature,
+    max_tokens: maxTokens,
+    messages: [
+      { role: "system", content: SYSTEM_PROMPT },
+      { role: "user", content: userContent }
+    ],
+    ...extraBody ?? {}
+  };
+  if (useJsonSchema) {
+    const validBlockIds = input.page.blocks.map((b) => b.block_id);
+    const validCrossPageBlockIds = input.index.crossPageFigures.filter((f) => f.page !== input.pageNumber).map((f) => f.block_id);
+    body.response_format = {
+      type: "json_schema",
+      json_schema: {
+        name: "storyboard",
+        strict: true,
+        schema: storyboardJsonSchema({
+          validBlockIds,
+          validCrossPageBlockIds
+        })
+      }
+    };
+  }
+  const headers = {
+    "Content-Type": "application/json",
+    Accept: stream ? "text/event-stream" : "application/json"
+  };
+  if (authToken) headers.Authorization = `Bearer ${authToken}`;
+  const timeoutController = new AbortController();
+  const timer = setTimeout(
+    () => timeoutController.abort(),
+    input.timeoutMs ?? 2500
+  );
+  const signal = mergeSignals(input.signal, timeoutController.signal);
+  try {
+    const response = await fetch(endpointUrl, {
+      method: "POST",
+      headers,
+      body: JSON.stringify(body),
+      signal
+    });
+    if (!response.ok || !response.body) {
+      return {
+        storyboard: null,
+        raw: "",
+        error: `HTTP ${response.status}`
+      };
+    }
+    let raw = "";
+    if (stream && response.body) {
+      for await (const chunk of parseSse(response.body)) {
+        const delta = extractDelta(chunk);
+        if (delta) raw += delta;
+      }
+    } else {
+      const json = await response.json();
+      raw = json.choices?.[0]?.message?.content ?? "";
+    }
+    const stripped = collapseWhitespaceRuns(stripCodeFences(raw).trim());
+    let parsed;
+    try {
+      parsed = JSON.parse(stripped);
+    } catch (e) {
+      return {
+        storyboard: null,
+        raw,
+        error: `parse error: ${e.message}`
+      };
+    }
+    const cleaned = clampNumericRanges(stripNullsDeep(parsed));
+    const validation = StoryboardSchema.safeParse(cleaned);
+    if (validation.success) {
+      return {
+        storyboard: enforceOverlayPresence(validation.data),
+        raw
+      };
+    }
+    const salvaged = salvageStoryboard(cleaned);
+    if (salvaged) {
+      return { storyboard: enforceOverlayPresence(salvaged), raw };
+    }
+    return {
+      storyboard: null,
+      raw,
+      error: `validation failed: ${validation.error.message}`
+    };
+  } catch (e) {
+    const name = e.name;
+    const msg = name === "AbortError" ? "aborted" : e.message;
+    return { storyboard: null, raw: "", error: msg };
+  } finally {
+    clearTimeout(timer);
+  }
+}
+function stripCodeFences(s) {
+  const m = s.match(/```(?:json)?\s*([\s\S]*?)```/);
+  return m ? m[1] : s;
+}
+function collapseWhitespaceRuns(src) {
+  let out = "";
+  let inString = false;
+  let escape = false;
+  let run = 0;
+  for (let i = 0; i < src.length; i++) {
+    const c = src[i];
+    if (inString) {
+      out += c;
+      if (escape) {
+        escape = false;
+      } else if (c === "\\") {
+        escape = true;
+      } else if (c === '"') {
+        inString = false;
+      }
+      continue;
+    }
+    if (c === '"') {
+      out += c;
+      inString = true;
+      run = 0;
+      continue;
+    }
+    if (c === " " || c === "	" || c === "\n" || c === "\r") {
+      run++;
+      if (run <= 1) out += " ";
+      continue;
+    }
+    run = 0;
+    out += c;
+  }
+  return out;
+}
+function clampNumericRanges(input) {
+  if (input === null || input === void 0) return input;
+  if (Array.isArray(input)) return input.map(clampNumericRanges);
+  if (typeof input !== "object") return input;
+  const obj = input;
+  const out = {};
+  for (const [k, v] of Object.entries(obj)) {
+    out[k] = clampNumericRanges(v);
+  }
+  const type = typeof out.type === "string" ? out.type : void 0;
+  if (type === "camera") {
+    if (typeof out.scale === "number") out.scale = clamp(out.scale, 0.5, 4);
+    if (typeof out.padding === "number") {
+      out.padding = clamp(out.padding, 0, 400);
+    }
+  }
+  if (typeof out.dim_opacity === "number") {
+    out.dim_opacity = clamp(out.dim_opacity, 0, 1);
+  }
+  if (typeof out.feather_px === "number") {
+    out.feather_px = clamp(out.feather_px, 0, 200);
+  }
+  if (typeof out.draw_duration_ms === "number") {
+    out.draw_duration_ms = clamp(out.draw_duration_ms, 100, 3e3);
+  }
+  if (typeof out.count === "number") {
+    out.count = Math.round(clamp(out.count, 1, 5));
+  }
+  if (typeof out.at_ms === "number") {
+    out.at_ms = clamp(out.at_ms, 0, 5e3);
+  }
+  if (typeof out.duration_ms === "number" && type === void 0) {
+    out.duration_ms = clamp(out.duration_ms, 100, 5e3);
+  }
+  return out;
+}
+function clamp(v, lo, hi) {
+  return Math.min(hi, Math.max(lo, v));
+}
+function enforceOverlayPresence(sb) {
+  if (sb.steps.length === 0) return sb;
+  const hasOverlay = sb.steps.some(
+    (s) => s.action.type !== "camera" && s.action.type !== "clear"
+  );
+  if (hasOverlay) return sb;
+  const cameraStep = sb.steps.find((s) => s.action.type === "camera");
+  if (!cameraStep || cameraStep.action.type !== "camera") return sb;
+  const target = cameraStep.action.target_block;
+  if (!target) return sb;
+  return {
+    ...sb,
+    reasoning: `${sb.reasoning} [auto-appended pulse: camera-only storyboards are forbidden]`,
+    steps: [
+      ...sb.steps,
+      {
+        at_ms: Math.min(4800, (cameraStep.at_ms ?? 0) + 200),
+        duration_ms: 900,
+        action: {
+          type: "pulse",
+          target_block: target,
+          count: 2,
+          intensity: "normal"
+        }
+      }
+    ]
+  };
+}
+function stripNullsDeep(input) {
+  if (input === null) return void 0;
+  if (Array.isArray(input)) {
+    return input.map(stripNullsDeep).filter((v) => v !== void 0);
+  }
+  if (input && typeof input === "object") {
+    const out = {};
+    for (const [k, v] of Object.entries(input)) {
+      const cleaned = stripNullsDeep(v);
+      if (cleaned !== void 0) out[k] = cleaned;
+    }
+    return out;
+  }
+  return input;
+}
+function salvageStoryboard(parsed) {
+  if (!parsed || typeof parsed !== "object") return null;
+  const obj = parsed;
+  if (!Array.isArray(obj.steps)) return null;
+  const goodSteps = [];
+  for (const step of obj.steps) {
+    const r = StoryboardStepSchema.safeParse(step);
+    if (r.success) goodSteps.push(r.data);
+    if (goodSteps.length >= 4) break;
+  }
+  if (goodSteps.length === 0) return null;
+  return {
+    version: 1,
+    reasoning: typeof obj.reasoning === "string" ? obj.reasoning + " (salvaged)" : "salvaged",
+    steps: goodSteps
+  };
+}
+function mergeSignals(a, b) {
+  if (!a) return b;
+  if (!b) return a;
+  const ctrl = new AbortController();
+  const onAbort = () => ctrl.abort();
+  a.addEventListener("abort", onAbort);
+  b.addEventListener("abort", onAbort);
+  return ctrl.signal;
+}
+
+// src/director/embedding-fallback.ts
+function cosineSimilarity(a, b) {
+  let dot = 0;
+  let na = 0;
+  let nb = 0;
+  const n = Math.min(a.length, b.length);
+  for (let i = 0; i < n; i++) {
+    dot += a[i] * b[i];
+    na += a[i] * a[i];
+    nb += b[i] * b[i];
+  }
+  const denom = Math.sqrt(na) * Math.sqrt(nb);
+  return denom === 0 ? 0 : dot / denom;
+}
+async function matchChunkToBlock(chunk, page, provider) {
+  const textBlocks = page.blocks.filter(
+    (b) => typeof b.text === "string" && b.text.trim().length > 0
+  );
+  if (textBlocks.length === 0) return null;
+  const inputs = [chunk, ...textBlocks.map((b) => b.text)];
+  const embeds = await provider.embed(inputs);
+  if (embeds.length < 2) return null;
+  const chunkEmbed = embeds[0];
+  let best = null;
+  for (let i = 0; i < textBlocks.length; i++) {
+    const score = cosineSimilarity(chunkEmbed, embeds[i + 1]);
+    if (!best || score > best.score) best = { block: textBlocks[i], score };
+  }
+  return best;
+}
+function nearestFigureOnPage(caption, page) {
+  if (!page) return null;
+  const [cx1, cy1, cx2, cy2] = caption.bbox;
+  const ccx = (cx1 + cx2) / 2;
+  const ccy = (cy1 + cy2) / 2;
+  let best = null;
+  for (const b of page.blocks) {
+    if (b.block_id === caption.block_id) continue;
+    if (b.type !== "figure" && b.type !== "figure_region") continue;
+    const [x1, y1, x2, y2] = b.bbox;
+    const fx = (x1 + x2) / 2;
+    const fy = (y1 + y2) / 2;
+    const dist = Math.hypot(fx - ccx, fy - ccy);
+    if (!best || dist < best.dist) best = { block: b, dist };
+  }
+  return best?.block ?? null;
+}
+function truncateLabel(text, max) {
+  if (!text) return "";
+  const clean = text.replace(/\s+/g, " ").trim();
+  if (clean.length <= max) return clean;
+  return clean.slice(0, max - 1) + "\u2026";
+}
+function storyboardFromMatch(match, page) {
+  if (!match) {
+    return {
+      version: 1,
+      reasoning: "fallback: no match \u2014 clearing overlays",
+      steps: [
+        {
+          at_ms: 0,
+          duration_ms: 800,
+          action: { type: "clear", targets: "overlays" }
+        }
+      ]
+    };
+  }
+  const { block } = match;
+  const id = block.block_id;
+  const reason = `fallback (block.type=${block.type}): matched ${id} (${match.score.toFixed(2)})`;
+  switch (block.type) {
+    case "heading": {
+      return {
+        version: 1,
+        reasoning: reason,
+        steps: [
+          {
+            at_ms: 0,
+            duration_ms: 700,
+            action: {
+              type: "spotlight",
+              target_block: id,
+              dim_opacity: 0.6,
+              feather_px: 40,
+              shape: "rounded"
+            }
+          },
+          {
+            at_ms: 300,
+            duration_ms: 1200,
+            action: {
+              type: "label",
+              target_block: id,
+              text: truncateLabel(block.text, 32) || "section",
+              position: "top"
+            }
+          }
+        ]
+      };
+    }
+    case "paragraph": {
+      return {
+        version: 1,
+        reasoning: reason,
+        steps: [
+          {
+            at_ms: 0,
+            duration_ms: 600,
+            action: {
+              type: "camera",
+              target_block: id,
+              scale: 1.1,
+              padding: 80,
+              easing: "ease-out"
+            }
+          },
+          {
+            at_ms: 300,
+            duration_ms: 900,
+            action: {
+              type: "underline",
+              target_block: id,
+              color: "#FBBF24",
+              style: "sketch",
+              draw_duration_ms: 800
+            }
+          }
+        ]
+      };
+    }
+    case "list_item":
+    case "mcq_option": {
+      return {
+        version: 1,
+        reasoning: reason,
+        steps: [
+          {
+            at_ms: 0,
+            duration_ms: 500,
+            action: {
+              type: "highlight",
+              target_block: id,
+              color: "rgba(250, 204, 21, 0.35)",
+              draw_duration_ms: 450
+            }
+          }
+        ]
+      };
+    }
+    case "caption": {
+      const figure = nearestFigureOnPage(block, page);
+      if (figure) {
+        return {
+          version: 1,
+          reasoning: `${reason}; caption \u2192 figure ${figure.block_id}`,
+          steps: [
+            {
+              at_ms: 0,
+              duration_ms: 900,
+              action: {
+                type: "callout",
+                from_block: id,
+                to_block: figure.block_id,
+                label: "see",
+                curve: "curved"
+              }
+            },
+            {
+              at_ms: 600,
+              duration_ms: 1e3,
+              action: {
+                type: "pulse",
+                target_block: figure.block_id,
+                count: 2,
+                intensity: "normal"
+              }
+            }
+          ]
+        };
+      }
+      return {
+        version: 1,
+        reasoning: `${reason}; no figure on page, underlining caption`,
+        steps: [
+          {
+            at_ms: 0,
+            duration_ms: 800,
+            action: {
+              type: "underline",
+              target_block: id,
+              color: "#FBBF24",
+              style: "sketch",
+              draw_duration_ms: 700
+            }
+          }
+        ]
+      };
+    }
+    case "figure": {
+      return {
+        version: 1,
+        reasoning: reason,
+        steps: [
+          {
+            at_ms: 0,
+            duration_ms: 900,
+            action: {
+              type: "pulse",
+              target_block: id,
+              count: 2,
+              intensity: "strong"
+            }
+          },
+          {
+            at_ms: 400,
+            duration_ms: 1200,
+            action: {
+              type: "box",
+              target_block: id,
+              color: "#3B82F6",
+              style: "solid"
+            }
+          }
+        ]
+      };
+    }
+    case "figure_region": {
+      return {
+        version: 1,
+        reasoning: reason,
+        steps: [
+          {
+            at_ms: 0,
+            duration_ms: 900,
+            action: {
+              type: "pulse",
+              target_block: id,
+              count: 2,
+              intensity: "normal"
+            }
+          }
+        ]
+      };
+    }
+    case "table": {
+      return {
+        version: 1,
+        reasoning: reason,
+        steps: [
+          {
+            at_ms: 0,
+            duration_ms: 700,
+            action: {
+              type: "camera",
+              target_block: id,
+              scale: 1.2,
+              padding: 60,
+              easing: "ease-out"
+            }
+          },
+          {
+            at_ms: 300,
+            duration_ms: 1e3,
+            action: {
+              type: "box",
+              target_block: id,
+              color: "#3B82F6",
+              style: "dashed"
+            }
+          }
+        ]
+      };
+    }
+    default: {
+      return {
+        version: 1,
+        reasoning: `${reason}; unknown block.type, using highlight`,
+        steps: [
+          {
+            at_ms: 0,
+            duration_ms: 600,
+            action: {
+              type: "highlight",
+              target_block: id,
+              color: "rgba(250, 204, 21, 0.35)",
+              draw_duration_ms: 500
+            }
+          }
+        ]
+      };
+    }
+  }
+}
+
+// src/components/TutorMode/TutorModeContainer.tsx
+import { jsx as jsx52, jsxs as jsxs38 } from "react/jsx-runtime";
+function buildBBoxIndex(bboxData) {
+  const byPage = /* @__PURE__ */ new Map();
+  const blockById = /* @__PURE__ */ new Map();
+  const crossPageFigures = [];
+  for (const page of bboxData) {
+    byPage.set(page.page_number, page);
+    for (const block of page.blocks) {
+      blockById.set(block.block_id, { block, pageNumber: page.page_number });
+      if ((block.type === "figure" || block.type === "figure_region" || block.type === "caption") && typeof block.text === "string" && block.text.length > 0) {
+        crossPageFigures.push({
+          block_id: block.block_id,
+          page: page.page_number,
+          type: block.type,
+          text: block.text
+        });
+      }
+    }
+  }
+  return { byPage, blockById, crossPageFigures };
+}
+function TutorModeContainer({
+  pageNumber,
+  bboxData,
+  narrationStore,
+  scale,
+  rotation = 0,
+  currentChunk,
+  llm,
+  idleTimeoutMs = 5e3,
+  llmTimeoutMs = 3e4,
+  embeddingProvider,
+  showSubtitles = false,
+  showExitButton = true,
+  onExitTutorMode,
+  minOverlayDurationMs,
+  className
+}) {
+  const containerRef = useRef27(null);
+  const index = useMemo15(() => buildBBoxIndex(bboxData), [bboxData]);
+  const { document: document2 } = usePDFViewer();
+  const [pageProxy, setPageProxy] = useState30(null);
+  const [viewport, setViewport] = useState30({ width: 800, height: 1e3 });
+  const camera = useStore2(narrationStore, (s) => s.camera);
+  const activeOverlays = useStore2(narrationStore, (s) => s.activeOverlays);
+  useEffect28(() => {
+    if (!containerRef.current) return;
+    const el = containerRef.current;
+    const update = () => setViewport({ width: el.clientWidth, height: el.clientHeight });
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  useEffect28(() => {
+    if (!document2) {
+      setPageProxy(null);
+      return;
+    }
+    let cancelled = false;
+    document2.getPage(pageNumber).then((p) => {
+      if (!cancelled) setPageProxy(p);
+    }).catch(() => {
+      if (!cancelled) setPageProxy(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [document2, pageNumber]);
+  useEffect28(() => {
+    narrationStore.getState().setCurrentPage(pageNumber);
+  }, [pageNumber, narrationStore]);
+  useEffect28(() => {
+    const page2 = index.byPage.get(pageNumber);
+    if (!page2) return;
+    if (viewport.width === 0 || viewport.height === 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;
+    narrationStore.getState().setCamera({ scale: fit, x: 0, y: 0 });
+  }, [pageNumber, viewport, index, narrationStore]);
+  const engineRef = useRef27(null);
+  useEffect28(() => {
+    engineRef.current = new StoryboardEngine({
+      narrationStore,
+      bboxIndex: index,
+      getViewport: () => viewport,
+      minOverlayDurationMs
+    });
+    return () => engineRef.current?.cancelPending();
+  }, [narrationStore, index, viewport, minOverlayDurationMs]);
+  const abortRef = useRef27(null);
+  const debounceRef = useRef27(null);
+  const lastChunkRef = useRef27(null);
+  useEffect28(() => {
+    if (!llm) return;
+    if (!currentChunk || currentChunk === lastChunkRef.current) return;
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(async () => {
+      const chunk = currentChunk;
+      if (chunk === lastChunkRef.current) return;
+      lastChunkRef.current = chunk;
+      const page2 = index.byPage.get(pageNumber);
+      if (!page2) return;
+      narrationStore.getState().pushChunkHistory({
+        text: chunk,
+        pageNumber,
+        timestamp: Date.now()
+      });
+      narrationStore.getState().appendDebugEvent({
+        kind: "chunk",
+        summary: `chunk \u2192 ${chunk.slice(0, 80)}${chunk.length > 80 ? "\u2026" : ""}`,
+        payload: { chunk, pageNumber }
+      });
+      abortRef.current?.abort();
+      abortRef.current = new AbortController();
+      narrationStore.getState().setLlmStatus("in-flight");
+      narrationStore.getState().appendDebugEvent({
+        kind: "llm-request",
+        summary: `LLM ${llm.model} (page ${pageNumber}, ${page2.blocks.length} blocks)`,
+        payload: { model: llm.model, pageNumber, blockCount: page2.blocks.length }
+      });
+      const result = await directStoryboard(llm, {
+        chunk,
+        pageNumber,
+        page: page2,
+        index,
+        history: narrationStore.getState().chunkHistory,
+        camera: narrationStore.getState().camera,
+        activeOverlays: narrationStore.getState().activeOverlays,
+        signal: abortRef.current.signal,
+        timeoutMs: llmTimeoutMs
+      });
+      if (result.storyboard) {
+        narrationStore.getState().setLlmStatus("idle");
+        narrationStore.getState().appendDebugEvent({
+          kind: "llm-response",
+          summary: `storyboard \u2713 ${result.storyboard.steps.length} steps \u2014 ${result.storyboard.reasoning.slice(0, 60)}`,
+          payload: { raw: result.raw, storyboard: result.storyboard }
+        });
+        engineRef.current?.execute(result.storyboard);
+        narrationStore.getState().appendDebugEvent({
+          kind: "storyboard-execute",
+          summary: `engine executing ${result.storyboard.steps.length} steps`,
+          payload: result.storyboard.steps.map((s) => ({
+            at_ms: s.at_ms,
+            type: s.action.type,
+            target: "target_block" in s.action ? s.action.target_block : "target" in s.action ? s.action.target : void 0
+          }))
+        });
+      } else {
+        narrationStore.getState().setLlmStatus("failed", result.error ?? "unknown");
+        narrationStore.getState().appendDebugEvent({
+          kind: "llm-error",
+          summary: `LLM failed: ${(result.error ?? "unknown").slice(0, 80)}`,
+          payload: { error: result.error, raw: result.raw }
+        });
+        if (embeddingProvider) {
+          try {
+            const match = await matchChunkToBlock(chunk, page2, embeddingProvider);
+            const fallbackSb = storyboardFromMatch(match, page2);
+            narrationStore.getState().appendDebugEvent({
+              kind: "fallback-fired",
+              summary: `embedding fallback \u2192 ${match?.block.block_id ?? "no match"}`,
+              payload: { match, storyboard: fallbackSb }
+            });
+            engineRef.current?.execute(fallbackSb);
+          } catch (e) {
+            narrationStore.getState().appendDebugEvent({
+              kind: "llm-error",
+              summary: `fallback also failed: ${e.message}`,
+              payload: e
+            });
+          }
+        }
+      }
+    }, 200);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [currentChunk, llm, index, pageNumber, narrationStore, embeddingProvider, llmTimeoutMs]);
+  useEffect28(() => {
+    if (!currentChunk) return;
+    const t = setTimeout(() => {
+      if (!engineRef.current) return;
+      const hist = narrationStore.getState().chunkHistory;
+      const latest = hist.length > 0 ? hist[hist.length - 1] : null;
+      if (!latest) return;
+      if (Date.now() - latest.timestamp < idleTimeoutMs) return;
+      engineRef.current.resetVisuals();
+    }, 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;
+  return /* @__PURE__ */ jsxs38(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        background: "#111"
+      },
+      "data-role": "tutor-mode-container",
+      "data-page-loaded": page ? "true" : "false",
+      children: [
+        showExitButton ? /* @__PURE__ */ jsx52(
+          "button",
+          {
+            onClick: () => {
+              engineRef.current?.resetVisuals();
+              onExitTutorMode?.();
+            },
+            style: {
+              position: "absolute",
+              top: 12,
+              right: 12,
+              zIndex: 60,
+              minHeight: 40,
+              minWidth: 40,
+              padding: "8px 14px",
+              border: "none",
+              borderRadius: 8,
+              background: "rgba(255,255,255,0.12)",
+              color: "white",
+              cursor: "pointer",
+              fontFamily: "system-ui, sans-serif",
+              fontSize: 14,
+              touchAction: "manipulation"
+            },
+            "aria-label": "Reset view \u2014 clear overlays and fit the page",
+            "data-role": "exit-tutor",
+            children: "Reset view"
+          }
+        ) : null,
+        page ? /* @__PURE__ */ jsx52(CameraView, { camera, children: /* @__PURE__ */ jsxs38(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              width: baseW,
+              height: baseH,
+              transform: "translate(-50%, -50%)"
+            },
+            children: [
+              /* @__PURE__ */ jsx52(
+                PDFPage,
+                {
+                  pageNumber,
+                  page: pageProxy,
+                  scale: rasterScale,
+                  rotation,
+                  showTextLayer: false,
+                  showHighlightLayer: false,
+                  showAnnotationLayer: false
+                }
+              ),
+              /* @__PURE__ */ jsx52(
+                CinemaLayer,
+                {
+                  page,
+                  index,
+                  overlays: activeOverlays,
+                  scale: scale || 1
+                }
+              )
+            ]
+          }
+        ) }) : null,
+        showSubtitles ? /* @__PURE__ */ jsx52(SubtitleBar, { text: currentChunk ?? null }) : null
+      ]
+    }
+  );
+}
+
+// src/director/transformers-embedding.ts
+var loaded = null;
+function getLocalMiniLM() {
+  if (loaded) return loaded;
+  loaded = (async () => {
+    const mod = await import(
+      /* webpackIgnore: true */
+      "@xenova/transformers"
+    );
+    const { pipeline } = mod;
+    const extractor = await pipeline(
+      "feature-extraction",
+      "Xenova/all-MiniLM-L6-v2"
+    );
+    return {
+      async embed(texts) {
+        const out = [];
+        for (const t of texts) {
+          const result = await extractor(t, {
+            pooling: "mean",
+            normalize: true
+          });
+          out.push(new Float32Array(result.data.slice()));
+        }
+        return out;
+      }
+    };
+  })();
+  return loaded;
+}
+
 // src/index.ts
 init_hooks();
 init_store();
@@ -12537,18 +15103,26 @@ init_PluginManager();
 // src/index.ts
 init_utils();
 export {
+  AnimatedHighlight,
+  AnimatedUnderline,
   AnnotationLayer,
   AnnotationToolbar,
   AskAboutOverlay,
   AskAboutTrigger,
+  BookModeContainer,
   BookmarksPanel,
+  BoxOverlay,
+  CalloutArrow,
+  CameraView,
   CanvasLayer,
+  CinemaLayer,
   ContinuousScrollContainer,
   DocumentContainer,
   DrawingCanvas,
   DualPageContainer,
   FloatingZoomControls,
   FocusRegionLayer,
+  GhostReference,
   HighlightLayer,
   HighlightPopover,
   HighlightsPanel,
@@ -12565,32 +15139,46 @@ export {
   PDFViewerContext,
   PDFViewerProvider,
   PluginManager,
+  PulseOverlay,
   QuickNoteButton,
   QuickNotePopover,
+  SYSTEM_PROMPT,
   SearchPanel,
   SelectionToolbar,
   ShapePreview,
   ShapeRenderer,
   Sidebar,
+  SpotlightMask,
+  StickyLabel,
   StickyNote,
+  StoryboardActionSchema,
+  StoryboardEngine,
+  StoryboardSchema,
+  SubtitleBar,
   TakeawaysPanel,
   TextLayer,
   ThumbnailPanel,
   Toolbar,
+  TutorModeContainer,
   VirtualizedDocumentContainer,
   applyRotation,
+  buildBBoxIndex,
+  buildUserPrompt,
   clearHighlights,
   clearStudentData,
   cn,
+  cosineSimilarity,
   countTextOnPage,
   createAgentAPI,
   createAgentStore,
   createAnnotationStore,
+  createNarrationStore,
   createPDFViewer,
   createPluginManager,
   createSearchStore,
   createStudentStore,
   createViewerStore,
+  directStoryboard,
   doRectsIntersect,
   downloadAnnotationsAsJSON,
   downloadAnnotationsAsMarkdown,
@@ -12605,6 +15193,7 @@ export {
   generateDocumentId,
   getAllDocumentIds,
   getAllStudentDataDocumentIds,
+  getLocalMiniLM,
   getMetadata,
   getOutline,
   getPage,
@@ -12622,17 +15211,23 @@ export {
   loadDocumentWithCallbacks,
   loadHighlights,
   loadStudentData,
+  makeOverlayId,
+  matchChunkToBlock,
   mergeAdjacentRects,
   pdfToPercent,
   pdfToViewport,
   pdfjsLib,
   percentToPDF,
   percentToViewport,
+  playPageTurnSound,
   quickViewer,
   removeRotation,
   saveHighlights,
   saveStudentData,
   scaleRect,
+  storyboardFromMatch,
+  storyboardJsonSchema,
+  truncate,
   useAgentContext,
   useAgentStore,
   useAnnotationStore,