pdfjs-reader-core 0.2.16 → 0.3.0

package/dist/index.cjs

@@ -200,6 +200,122 @@ function clearDocumentCache(url) {
     documentCache.clear();
   }
 }
+function loadDocumentWithCallbacks(options) {
+  const {
+    src,
+    workerSrc,
+    password,
+    onProgress,
+    onDocumentReady,
+    onFirstPageReady,
+    enableRangeRequests = true,
+    enableStreaming = true,
+    cacheDocument = true,
+    signal
+  } = options;
+  const abortController = new AbortController();
+  if (signal) {
+    signal.addEventListener("abort", () => abortController.abort());
+  }
+  const promise = (async () => {
+    if (abortController.signal.aborted) {
+      throw new DOMException("Aborted", "AbortError");
+    }
+    await initializePDFJS({ workerSrc });
+    if (abortController.signal.aborted) {
+      throw new DOMException("Aborted", "AbortError");
+    }
+    const cacheKey = typeof src === "string" ? src : null;
+    if (cacheKey && cacheDocument && documentCache.has(cacheKey)) {
+      const cachedDoc = documentCache.get(cacheKey);
+      try {
+        const numPages2 = cachedDoc.numPages;
+        const isDestroyed = cachedDoc._transport?.destroyed || cachedDoc.destroyed;
+        if (numPages2 > 0 && !isDestroyed) {
+          onDocumentReady?.(cachedDoc, numPages2);
+          if (onFirstPageReady && numPages2 > 0) {
+            try {
+              const firstPage = await cachedDoc.getPage(1);
+              if (!abortController.signal.aborted) {
+                onFirstPageReady(firstPage);
+              }
+            } catch {
+            }
+          }
+          return {
+            document: cachedDoc,
+            numPages: numPages2
+          };
+        }
+        documentCache.delete(cacheKey);
+      } catch {
+        documentCache.delete(cacheKey);
+      }
+    }
+    const loadingParams = {
+      password,
+      isEvalSupported: false,
+      useSystemFonts: true,
+      disableRange: !enableRangeRequests,
+      disableStream: !enableStreaming,
+      disableAutoFetch: true
+    };
+    if (typeof src === "string") {
+      loadingParams.url = src;
+    } else {
+      loadingParams.data = src;
+    }
+    const loadingTask = pdfjsLib.getDocument(loadingParams);
+    const abortHandler = () => {
+      loadingTask.destroy();
+    };
+    abortController.signal.addEventListener("abort", abortHandler);
+    if (onProgress) {
+      loadingTask.onProgress = ({ loaded, total }) => {
+        if (!abortController.signal.aborted) {
+          onProgress({ loaded, total });
+        }
+      };
+    }
+    let document2;
+    try {
+      document2 = await loadingTask.promise;
+    } catch (error) {
+      abortController.signal.removeEventListener("abort", abortHandler);
+      if (abortController.signal.aborted) {
+        throw new DOMException("Aborted", "AbortError");
+      }
+      throw error;
+    }
+    abortController.signal.removeEventListener("abort", abortHandler);
+    if (abortController.signal.aborted) {
+      document2.destroy();
+      throw new DOMException("Aborted", "AbortError");
+    }
+    const numPages = document2.numPages;
+    onDocumentReady?.(document2, numPages);
+    if (onFirstPageReady && numPages > 0) {
+      try {
+        const firstPage = await document2.getPage(1);
+        if (!abortController.signal.aborted) {
+          onFirstPageReady(firstPage);
+        }
+      } catch {
+      }
+    }
+    if (cacheKey && cacheDocument) {
+      documentCache.set(cacheKey, document2);
+    }
+    return {
+      document: document2,
+      numPages
+    };
+  })();
+  return {
+    promise,
+    cancel: () => abortController.abort()
+  };
+}
 var documentCache;
 var init_document_loader = __esm({
   "src/utils/document-loader.ts"() {
@@ -403,14 +519,18 @@ function createViewerStore(initialOverrides = {}) {
           isLoading: false,
           loadingProgress: null,
           error: null,
-          currentPage: 1
+          currentPage: 1,
+          documentLoadingState: "ready"
         });
       } else {
         set({
           document: null,
           numPages: 0,
           isLoading: false,
-          loadingProgress: null
+          loadingProgress: null,
+          documentLoadingState: "idle",
+          firstPageReady: false,
+          streamingProgress: null
         });
       }
     },
@@ -424,7 +544,17 @@ function createViewerStore(initialOverrides = {}) {
       set({ loadingProgress: progress });
     },
     setError: (error) => {
-      set({ error, isLoading: false, loadingProgress: null });
+      set({ error, isLoading: false, loadingProgress: null, documentLoadingState: error ? "error" : "idle" });
+    },
+    // Progressive loading actions
+    setDocumentLoadingState: (documentLoadingState) => {
+      set({ documentLoadingState });
+    },
+    setFirstPageReady: (firstPageReady) => {
+      set({ firstPageReady });
+    },
+    setStreamingProgress: (streamingProgress) => {
+      set({ streamingProgress });
     },
     // Navigation actions
     setCurrentPage: (page) => {
@@ -574,6 +704,10 @@ var init_viewer_store = __esm({
       isLoading: false,
       loadingProgress: null,
       error: null,
+      // Progressive loading state
+      documentLoadingState: "idle",
+      firstPageReady: false,
+      streamingProgress: null,
       // Navigation state
       currentPage: 1,
       scale: 1,
@@ -1650,6 +1784,85 @@ 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/index.ts
 var init_utils = __esm({
   "src/utils/index.ts"() {
@@ -1664,6 +1877,7 @@ var init_utils = __esm({
     init_agent_api();
     init_text_search();
     init_coordinates();
+    init_page_turn_sound();
   }
 });
 
@@ -7808,10 +8022,57 @@ var init_PDFLoadingScreen = __esm({
       totalBytes,
       phase = "fetching",
       documentName,
-      className
+      className,
+      compact = false,
+      showStreamingProgress = false
     }) {
       const hasProgress = progress !== void 0 && progress >= 0;
       const hasBytes = bytesLoaded !== void 0 && totalBytes !== void 0 && totalBytes > 0;
+      if (compact || showStreamingProgress) {
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          "div",
+          {
+            className: cn(
+              "pdf-loading-compact",
+              "flex items-center gap-3 px-4 py-3 bg-gray-800 text-white rounded-lg shadow-lg",
+              className
+            ),
+            role: "status",
+            "aria-live": "polite",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                "div",
+                {
+                  style: {
+                    width: 20,
+                    height: 20,
+                    border: "2px solid rgba(255,255,255,0.3)",
+                    borderTopColor: "#fff",
+                    borderRadius: "50%",
+                    animation: "spin 0.8s linear infinite"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-sm font-medium", children: phaseMessages[phase] }),
+              hasProgress && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "text-sm text-white/70", children: [
+                Math.round(progress),
+                "%"
+              ] }),
+              hasBytes && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "text-xs text-white/50 font-mono", children: [
+                formatBytes(bytesLoaded),
+                " / ",
+                formatBytes(totalBytes)
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("style", { children: `
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        ` })
+            ]
+          }
+        );
+      }
       return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "div",
         {
@@ -8044,6 +8305,114 @@ var init_PDFLoadingScreen2 = __esm({
   }
 });
 
+// src/components/PDFViewer/PageSkeleton.tsx
+var import_react34, import_jsx_runtime20, PageSkeleton, DEFAULT_PAGE_WIDTH, DEFAULT_PAGE_HEIGHT;
+var init_PageSkeleton = __esm({
+  "src/components/PDFViewer/PageSkeleton.tsx"() {
+    "use strict";
+    import_react34 = require("react");
+    init_utils();
+    import_jsx_runtime20 = require("react/jsx-runtime");
+    PageSkeleton = (0, import_react34.memo)(function PageSkeleton2({
+      pageNumber,
+      width,
+      height,
+      className,
+      isFirstPage = false
+    }) {
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        "div",
+        {
+          className: cn(
+            "pdf-page-skeleton",
+            "relative bg-white shadow-lg overflow-hidden",
+            "flex items-center justify-center",
+            className
+          ),
+          style: {
+            width,
+            height,
+            minWidth: width,
+            minHeight: height
+          },
+          "data-page-number": pageNumber,
+          role: "img",
+          "aria-label": `Loading page ${pageNumber}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "div",
+              {
+                className: "absolute inset-0 pdf-skeleton-shimmer",
+                style: {
+                  background: "linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%)",
+                  backgroundSize: "200% 100%",
+                  animation: "shimmer 1.5s infinite linear"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "absolute inset-0 p-6 flex flex-col", style: { opacity: 0.4 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                "div",
+                {
+                  className: "rounded",
+                  style: {
+                    width: "60%",
+                    height: 12,
+                    background: "#e0e0e0",
+                    marginBottom: 16
+                  }
+                }
+              ),
+              [...Array(Math.min(12, Math.floor(height / 40)))].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                "div",
+                {
+                  className: "rounded",
+                  style: {
+                    width: `${75 + Math.sin(i * 0.7) * 20}%`,
+                    height: 8,
+                    background: "#e0e0e0",
+                    marginBottom: 12
+                  }
+                },
+                i
+              ))
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative z-10 flex flex-col items-center gap-3 p-6 rounded-lg bg-white/90 shadow-sm", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                "div",
+                {
+                  className: "pdf-skeleton-spinner",
+                  style: {
+                    width: 32,
+                    height: 32,
+                    border: "3px solid #e5e7eb",
+                    borderTopColor: "#3b82f6",
+                    borderRadius: "50%",
+                    animation: "spin 0.8s linear infinite"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-sm text-gray-500 font-medium", children: isFirstPage ? "Loading document..." : `Loading page ${pageNumber}` })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("style", { children: `
+        @keyframes shimmer {
+          0% { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      ` })
+          ]
+        }
+      );
+    });
+    DEFAULT_PAGE_WIDTH = 612;
+    DEFAULT_PAGE_HEIGHT = 792;
+  }
+});
+
 // src/components/SelectionToolbar/SelectionToolbar.tsx
 function calculatePosition(selection) {
   if (!selection || selection.rects.length === 0) {
@@ -8059,13 +8428,13 @@ function calculatePosition(selection) {
   const left = firstRect.left + firstRect.width / 2;
   return { top, left, visible: true };
 }
-var import_react34, import_jsx_runtime20, HIGHLIGHT_COLOR_BUTTONS, SelectionToolbar;
+var import_react35, import_jsx_runtime21, HIGHLIGHT_COLOR_BUTTONS, SelectionToolbar;
 var init_SelectionToolbar = __esm({
   "src/components/SelectionToolbar/SelectionToolbar.tsx"() {
     "use strict";
-    import_react34 = require("react");
+    import_react35 = require("react");
     init_utils();
-    import_jsx_runtime20 = require("react/jsx-runtime");
+    import_jsx_runtime21 = require("react/jsx-runtime");
     HIGHLIGHT_COLOR_BUTTONS = [
       { color: "yellow", bg: "bg-yellow-300", hoverBg: "hover:bg-yellow-400", ringColor: "ring-yellow-400" },
       { color: "green", bg: "bg-green-300", hoverBg: "hover:bg-green-400", ringColor: "ring-green-400" },
@@ -8073,16 +8442,16 @@ var init_SelectionToolbar = __esm({
       { color: "pink", bg: "bg-pink-300", hoverBg: "hover:bg-pink-400", ringColor: "ring-pink-400" },
       { color: "orange", bg: "bg-orange-300", hoverBg: "hover:bg-orange-400", ringColor: "ring-orange-400" }
     ];
-    SelectionToolbar = (0, import_react34.memo)(function SelectionToolbar2({
+    SelectionToolbar = (0, import_react35.memo)(function SelectionToolbar2({
       selection,
       onCreateHighlight,
       onCopy,
       activeColor = "yellow",
       className
     }) {
-      const [position, setPosition] = (0, import_react34.useState)({ top: 0, left: 0, visible: false });
-      const toolbarRef = (0, import_react34.useRef)(null);
-      (0, import_react34.useEffect)(() => {
+      const [position, setPosition] = (0, import_react35.useState)({ top: 0, left: 0, visible: false });
+      const toolbarRef = (0, import_react35.useRef)(null);
+      (0, import_react35.useEffect)(() => {
         if (selection && selection.text && selection.rects.length > 0) {
           const newPosition = calculatePosition(selection);
           if (toolbarRef.current && newPosition.visible) {
@@ -8110,19 +8479,19 @@ var init_SelectionToolbar = __esm({
           setPosition({ top: 0, left: 0, visible: false });
         }
       }, [selection]);
-      const handleColorClick = (0, import_react34.useCallback)(
+      const handleColorClick = (0, import_react35.useCallback)(
         (color) => {
           onCreateHighlight(color);
         },
         [onCreateHighlight]
       );
-      const handleCopy = (0, import_react34.useCallback)(() => {
+      const handleCopy = (0, import_react35.useCallback)(() => {
         onCopy?.();
       }, [onCopy]);
       if (!position.visible || !selection?.text) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         "div",
         {
           ref: toolbarRef,
@@ -8146,7 +8515,7 @@ var init_SelectionToolbar = __esm({
             e.stopPropagation();
           },
           children: [
-            HIGHLIGHT_COLOR_BUTTONS.map((btn) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            HIGHLIGHT_COLOR_BUTTONS.map((btn) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 onClick: () => handleColorClick(btn.color),
@@ -8163,7 +8532,7 @@ var init_SelectionToolbar = __esm({
                 ),
                 title: `Highlight ${btn.color}`,
                 "aria-label": `Highlight with ${btn.color}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { className: "w-4 h-4 text-gray-700", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { className: "w-4 h-4 text-gray-700", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -8175,8 +8544,8 @@ var init_SelectionToolbar = __esm({
               },
               btn.color
             )),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "button",
               {
                 onClick: handleCopy,
@@ -8188,7 +8557,7 @@ var init_SelectionToolbar = __esm({
                 ),
                 title: "Copy text",
                 "aria-label": "Copy selected text",
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -8228,13 +8597,13 @@ function calculatePopoverPosition(highlight, scale, pageElement) {
   const left = scaledLeft + scaledWidth / 2;
   return { top, left, visible: true };
 }
-var import_react35, import_jsx_runtime21, HIGHLIGHT_COLOR_OPTIONS, HighlightPopover;
+var import_react36, import_jsx_runtime22, HIGHLIGHT_COLOR_OPTIONS, HighlightPopover;
 var init_HighlightPopover = __esm({
   "src/components/HighlightPopover/HighlightPopover.tsx"() {
     "use strict";
-    import_react35 = require("react");
+    import_react36 = require("react");
     init_utils();
-    import_jsx_runtime21 = require("react/jsx-runtime");
+    import_jsx_runtime22 = require("react/jsx-runtime");
     HIGHLIGHT_COLOR_OPTIONS = [
       { color: "yellow", bg: "bg-yellow-300", hoverBg: "hover:bg-yellow-400", borderColor: "border-yellow-400" },
       { color: "green", bg: "bg-green-300", hoverBg: "hover:bg-green-400", borderColor: "border-green-400" },
@@ -8242,7 +8611,7 @@ var init_HighlightPopover = __esm({
       { color: "pink", bg: "bg-pink-300", hoverBg: "hover:bg-pink-400", borderColor: "border-pink-400" },
       { color: "orange", bg: "bg-orange-300", hoverBg: "hover:bg-orange-400", borderColor: "border-orange-400" }
     ];
-    HighlightPopover = (0, import_react35.memo)(function HighlightPopover2({
+    HighlightPopover = (0, import_react36.memo)(function HighlightPopover2({
       highlight,
       scale,
       pageElement,
@@ -8253,16 +8622,16 @@ var init_HighlightPopover = __esm({
       onClose,
       className
     }) {
-      const [isEditingComment, setIsEditingComment] = (0, import_react35.useState)(false);
-      const [comment, setComment] = (0, import_react35.useState)(highlight?.comment ?? "");
-      const [position, setPosition] = (0, import_react35.useState)({ top: 0, left: 0, visible: false });
-      const popoverRef = (0, import_react35.useRef)(null);
-      const textareaRef = (0, import_react35.useRef)(null);
-      (0, import_react35.useEffect)(() => {
+      const [isEditingComment, setIsEditingComment] = (0, import_react36.useState)(false);
+      const [comment, setComment] = (0, import_react36.useState)(highlight?.comment ?? "");
+      const [position, setPosition] = (0, import_react36.useState)({ top: 0, left: 0, visible: false });
+      const popoverRef = (0, import_react36.useRef)(null);
+      const textareaRef = (0, import_react36.useRef)(null);
+      (0, import_react36.useEffect)(() => {
         setComment(highlight?.comment ?? "");
         setIsEditingComment(false);
       }, [highlight?.id, highlight?.comment]);
-      (0, import_react35.useEffect)(() => {
+      (0, import_react36.useEffect)(() => {
         if (highlight && pageElement) {
           const newPosition = calculatePopoverPosition(highlight, scale, pageElement);
           if (newPosition.visible && popoverRef.current) {
@@ -8292,12 +8661,12 @@ var init_HighlightPopover = __esm({
           setPosition({ top: 0, left: 0, visible: false });
         }
       }, [highlight, pageElement, scale, isEditingComment]);
-      (0, import_react35.useEffect)(() => {
+      (0, import_react36.useEffect)(() => {
         if (isEditingComment && textareaRef.current) {
           textareaRef.current.focus();
         }
       }, [isEditingComment]);
-      (0, import_react35.useEffect)(() => {
+      (0, import_react36.useEffect)(() => {
         function handleClickOutside(event) {
           if (popoverRef.current && !popoverRef.current.contains(event.target)) {
             onClose();
@@ -8308,7 +8677,7 @@ var init_HighlightPopover = __esm({
           return () => document.removeEventListener("mousedown", handleClickOutside);
         }
       }, [position.visible, onClose]);
-      (0, import_react35.useEffect)(() => {
+      (0, import_react36.useEffect)(() => {
         function handleKeyDown(event) {
           if (event.key === "Escape") {
             if (isEditingComment) {
@@ -8324,7 +8693,7 @@ var init_HighlightPopover = __esm({
           return () => document.removeEventListener("keydown", handleKeyDown);
         }
       }, [position.visible, isEditingComment, highlight?.comment, onClose]);
-      const handleColorClick = (0, import_react35.useCallback)(
+      const handleColorClick = (0, import_react36.useCallback)(
         (color) => {
           if (highlight) {
             onColorChange(highlight.id, color);
@@ -8332,19 +8701,19 @@ var init_HighlightPopover = __esm({
         },
         [highlight, onColorChange]
       );
-      const handleSaveComment = (0, import_react35.useCallback)(() => {
+      const handleSaveComment = (0, import_react36.useCallback)(() => {
         if (highlight) {
           onCommentChange(highlight.id, comment.trim());
           setIsEditingComment(false);
         }
       }, [highlight, comment, onCommentChange]);
-      const handleDeleteClick = (0, import_react35.useCallback)(() => {
+      const handleDeleteClick = (0, import_react36.useCallback)(() => {
         if (highlight) {
           onDelete(highlight.id);
           onClose();
         }
       }, [highlight, onDelete, onClose]);
-      const handleCopyClick = (0, import_react35.useCallback)(() => {
+      const handleCopyClick = (0, import_react36.useCallback)(() => {
         if (highlight?.text) {
           navigator.clipboard.writeText(highlight.text);
           onCopy?.(highlight.text);
@@ -8353,7 +8722,7 @@ var init_HighlightPopover = __esm({
       if (!highlight || !position.visible) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "div",
         {
           ref: popoverRef,
@@ -8373,8 +8742,8 @@ var init_HighlightPopover = __esm({
             width: 280
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between p-2 border-b border-gray-200 dark:border-gray-700", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center gap-1", children: HIGHLIGHT_COLOR_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-between p-2 border-b border-gray-200 dark:border-gray-700", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center gap-1", children: HIGHLIGHT_COLOR_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 "button",
                 {
                   onClick: () => handleColorClick(opt.color),
@@ -8392,7 +8761,7 @@ var init_HighlightPopover = __esm({
                 },
                 opt.color
               )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 "button",
                 {
                   onClick: handleDeleteClick,
@@ -8404,7 +8773,7 @@ var init_HighlightPopover = __esm({
                   ),
                   title: "Delete highlight",
                   "aria-label": "Delete highlight",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -8416,8 +8785,8 @@ var init_HighlightPopover = __esm({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "p-2", children: isEditingComment ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "p-2", children: isEditingComment ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 "textarea",
                 {
                   ref: textareaRef,
@@ -8436,8 +8805,8 @@ var init_HighlightPopover = __esm({
                   rows: 3
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex justify-end gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex justify-end gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "button",
                   {
                     onClick: () => {
@@ -8453,7 +8822,7 @@ var init_HighlightPopover = __esm({
                     children: "Cancel"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "button",
                   {
                     onClick: handleSaveComment,
@@ -8467,14 +8836,14 @@ var init_HighlightPopover = __esm({
                   }
                 )
               ] })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "text-xs text-gray-500 dark:text-gray-400 line-clamp-2", children: [
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "text-xs text-gray-500 dark:text-gray-400 line-clamp-2", children: [
                 "\u201C",
                 highlight.text.slice(0, 100),
                 highlight.text.length > 100 ? "..." : "",
                 "\u201D"
               ] }),
-              highlight.comment ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              highlight.comment ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 "button",
                 {
                   onClick: () => setIsEditingComment(true),
@@ -8487,7 +8856,7 @@ var init_HighlightPopover = __esm({
                   ),
                   children: highlight.comment
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 "button",
                 {
                   onClick: () => setIsEditingComment(true),
@@ -8500,7 +8869,7 @@ var init_HighlightPopover = __esm({
                   children: "+ Add a note..."
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                 "button",
                 {
                   onClick: handleCopyClick,
@@ -8511,7 +8880,7 @@ var init_HighlightPopover = __esm({
                     "focus:outline-none focus:ring-2 focus:ring-blue-500"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -8541,20 +8910,21 @@ var init_HighlightPopover2 = __esm({
 });
 
 // src/components/PDFViewer/DocumentContainer.tsx
-var import_react36, import_jsx_runtime22, DocumentContainer;
+var import_react37, import_jsx_runtime23, DocumentContainer;
 var init_DocumentContainer = __esm({
   "src/components/PDFViewer/DocumentContainer.tsx"() {
     "use strict";
-    import_react36 = require("react");
+    import_react37 = require("react");
     init_PDFPage2();
     init_PDFLoadingScreen2();
+    init_PageSkeleton();
     init_hooks();
     init_useHighlights();
     init_SelectionToolbar2();
     init_HighlightPopover2();
     init_utils();
-    import_jsx_runtime22 = require("react/jsx-runtime");
-    DocumentContainer = (0, import_react36.memo)(function DocumentContainer2({
+    import_jsx_runtime23 = require("react/jsx-runtime");
+    DocumentContainer = (0, import_react37.memo)(function DocumentContainer2({
       className,
       enableTouchGestures = true
     }) {
@@ -8571,34 +8941,36 @@ var init_DocumentContainer = __esm({
       } = usePDFViewer();
       const scrollToPageRequest = useViewerStore((s) => s.scrollToPageRequest);
       const { viewerStore } = usePDFViewerStores();
-      const [currentPageObj, setCurrentPageObj] = (0, import_react36.useState)(null);
-      const [isLoadingPage, setIsLoadingPage] = (0, import_react36.useState)(false);
-      const containerRef = (0, import_react36.useRef)(null);
-      const documentRef = (0, import_react36.useRef)(null);
-      const baseScaleRef = (0, import_react36.useRef)(scale);
+      const [currentPageObj, setCurrentPageObj] = (0, import_react37.useState)(null);
+      const [isLoadingPage, setIsLoadingPage] = (0, import_react37.useState)(false);
+      const [pageLoadError, setPageLoadError] = (0, import_react37.useState)(null);
+      const containerRef = (0, import_react37.useRef)(null);
+      const documentRef = (0, import_react37.useRef)(null);
+      const baseScaleRef = (0, import_react37.useRef)(scale);
       const isTouchDevice = useIsTouchDevice();
+      const documentLoadingState = useViewerStore((s) => s.documentLoadingState);
       const { selection, clearSelection, copySelection } = useTextSelection();
-      const handlePinchZoom = (0, import_react36.useCallback)(
+      const handlePinchZoom = (0, import_react37.useCallback)(
         (pinchScale) => {
           const newScale = Math.max(0.25, Math.min(4, baseScaleRef.current * pinchScale));
           setScale(newScale);
         },
         [setScale]
       );
-      const handleSwipeLeft = (0, import_react36.useCallback)(() => {
+      const handleSwipeLeft = (0, import_react37.useCallback)(() => {
         nextPage();
       }, [nextPage]);
-      const handleSwipeRight = (0, import_react36.useCallback)(() => {
+      const handleSwipeRight = (0, import_react37.useCallback)(() => {
         previousPage();
       }, [previousPage]);
-      const handleDoubleTap = (0, import_react36.useCallback)(
+      const handleDoubleTap = (0, import_react37.useCallback)(
         (_position) => {
           const newScale = scale < 1.5 ? 2 : 1;
           setScale(newScale);
         },
         [scale, setScale]
       );
-      (0, import_react36.useEffect)(() => {
+      (0, import_react37.useEffect)(() => {
         baseScaleRef.current = scale;
       }, [scale]);
       const { ref: touchRef } = useTouchGestures({
@@ -8618,20 +8990,23 @@ var init_DocumentContainer = __esm({
         selectHighlight,
         activeColor
       } = useHighlights();
-      (0, import_react36.useEffect)(() => {
+      (0, import_react37.useEffect)(() => {
         if (document2 !== documentRef.current) {
           documentRef.current = document2;
           setCurrentPageObj(null);
+          setPageLoadError(null);
         }
       }, [document2]);
-      (0, import_react36.useEffect)(() => {
+      (0, import_react37.useEffect)(() => {
         if (!document2) {
           setCurrentPageObj(null);
+          setPageLoadError(null);
           return;
         }
         let cancelled = false;
         const loadPage = async () => {
           setIsLoadingPage(true);
+          setPageLoadError(null);
           try {
             const page = await document2.getPage(currentPage);
             if (!cancelled && document2 === documentRef.current) {
@@ -8648,6 +9023,7 @@ var init_DocumentContainer = __esm({
               const isDocumentDestroyed = errorMessage.includes("destroyed") || errorMessage.includes("sendWithStream") || errorMessage.includes("sendWithPromise") || errorMessage.includes("Cannot read properties of null");
               if (!isDocumentDestroyed) {
                 console.error("Error loading page:", error);
+                setPageLoadError(error instanceof Error ? error : new Error(errorMessage));
               }
             }
           } finally {
@@ -8661,10 +9037,10 @@ var init_DocumentContainer = __esm({
           cancelled = true;
         };
       }, [document2, currentPage, scrollToPageRequest, viewerStore]);
-      const getPageElement = (0, import_react36.useCallback)(() => {
+      const getPageElement = (0, import_react37.useCallback)(() => {
         return containerRef.current?.querySelector(`[data-page-number="${currentPage}"]`);
       }, [currentPage]);
-      const handleCreateHighlight = (0, import_react36.useCallback)(
+      const handleCreateHighlight = (0, import_react37.useCallback)(
         (color) => {
           if (!selection) return;
           const pageElement = getPageElement();
@@ -8674,25 +9050,25 @@ var init_DocumentContainer = __esm({
         },
         [selection, getPageElement, createHighlightFromSelection, scale, clearSelection]
       );
-      const handleCopySelection = (0, import_react36.useCallback)(() => {
+      const handleCopySelection = (0, import_react37.useCallback)(() => {
         copySelection();
       }, [copySelection]);
-      const handleColorChange = (0, import_react36.useCallback)(
+      const handleColorChange = (0, import_react37.useCallback)(
         (id, color) => {
           updateHighlight(id, { color });
         },
         [updateHighlight]
       );
-      const handleCommentChange = (0, import_react36.useCallback)(
+      const handleCommentChange = (0, import_react37.useCallback)(
         (id, comment) => {
           updateHighlight(id, { comment: comment || void 0 });
         },
         [updateHighlight]
       );
-      const handleClosePopover = (0, import_react36.useCallback)(() => {
+      const handleClosePopover = (0, import_react37.useCallback)(() => {
         selectHighlight(null);
       }, [selectHighlight]);
-      const setContainerRef = (0, import_react36.useCallback)(
+      const setContainerRef = (0, import_react37.useCallback)(
         (element) => {
           containerRef.current = element;
           touchRef(element);
@@ -8705,7 +9081,7 @@ var init_DocumentContainer = __esm({
         sepia: "bg-amber-50"
       };
       if (!document2) {
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "div",
           {
             className: cn(
@@ -8714,11 +9090,53 @@ var init_DocumentContainer = __esm({
               themeStyles[theme],
               className
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PDFLoadingScreen, { phase: isLoading ? "fetching" : "initializing" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PDFLoadingScreen, { phase: isLoading ? "fetching" : "initializing" })
           }
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      const renderPageContent = () => {
+        if (pageLoadError && !currentPageObj) {
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            "div",
+            {
+              className: "relative bg-white shadow-lg flex flex-col items-center justify-center gap-2 text-gray-500",
+              style: {
+                width: DEFAULT_PAGE_WIDTH * scale,
+                height: DEFAULT_PAGE_HEIGHT * scale
+              },
+              "data-page-number": currentPage,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { className: "w-8 h-8 text-red-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "text-sm", children: [
+                  "Failed to load page ",
+                  currentPage
+                ] })
+              ]
+            }
+          );
+        }
+        if (isLoadingPage && !currentPageObj) {
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            PageSkeleton,
+            {
+              pageNumber: currentPage,
+              width: Math.floor(DEFAULT_PAGE_WIDTH * scale),
+              height: Math.floor(DEFAULT_PAGE_HEIGHT * scale),
+              isFirstPage: currentPage === 1 && documentLoadingState !== "ready"
+            }
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          PDFPage,
+          {
+            pageNumber: currentPage,
+            page: currentPageObj,
+            scale,
+            rotation
+          }
+        );
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
         "div",
         {
           ref: setContainerRef,
@@ -8731,16 +9149,8 @@ var init_DocumentContainer = __esm({
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-              PDFPage,
-              {
-                pageNumber: currentPage,
-                page: currentPageObj,
-                scale,
-                rotation
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            renderPageContent(),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               SelectionToolbar,
               {
                 selection,
@@ -8749,7 +9159,7 @@ var init_DocumentContainer = __esm({
                 activeColor
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               HighlightPopover,
               {
                 highlight: selectedHighlight,
@@ -8760,8 +9170,7 @@ var init_DocumentContainer = __esm({
                 onDelete: deleteHighlight,
                 onClose: handleClosePopover
               }
-            ),
-            isLoadingPage && !currentPageObj && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fixed bottom-4 right-4 px-3 py-2 bg-black/75 text-white text-sm rounded-lg", children: "Loading..." })
+            )
           ]
         }
       );
@@ -8770,22 +9179,23 @@ var init_DocumentContainer = __esm({
 });
 
 // src/components/PDFViewer/VirtualizedDocumentContainer.tsx
-var import_react37, import_jsx_runtime23, DEFAULT_PAGE_WIDTH, DEFAULT_PAGE_HEIGHT, VirtualizedDocumentContainer;
+var import_react38, import_jsx_runtime24, DEFAULT_PAGE_WIDTH2, DEFAULT_PAGE_HEIGHT2, VirtualizedDocumentContainer;
 var init_VirtualizedDocumentContainer = __esm({
   "src/components/PDFViewer/VirtualizedDocumentContainer.tsx"() {
     "use strict";
-    import_react37 = require("react");
+    import_react38 = require("react");
     init_PDFPage2();
     init_PDFLoadingScreen2();
+    init_PageSkeleton();
     init_hooks();
     init_useHighlights();
     init_SelectionToolbar2();
     init_HighlightPopover2();
     init_utils();
-    import_jsx_runtime23 = require("react/jsx-runtime");
-    DEFAULT_PAGE_WIDTH = 612;
-    DEFAULT_PAGE_HEIGHT = 792;
-    VirtualizedDocumentContainer = (0, import_react37.memo)(function VirtualizedDocumentContainer2({
+    import_jsx_runtime24 = require("react/jsx-runtime");
+    DEFAULT_PAGE_WIDTH2 = 612;
+    DEFAULT_PAGE_HEIGHT2 = 792;
+    VirtualizedDocumentContainer = (0, import_react38.memo)(function VirtualizedDocumentContainer2({
       overscan = 2,
       pageGap = 16,
       enableTouchGestures = true,
@@ -8806,17 +9216,17 @@ var init_VirtualizedDocumentContainer = __esm({
       } = usePDFViewer();
       const scrollToPageRequest = useViewerStore((s) => s.scrollToPageRequest);
       const { viewerStore } = usePDFViewerStores();
-      const containerRef = (0, import_react37.useRef)(null);
-      const scrollContainerRef = (0, import_react37.useRef)(null);
-      const documentRef = (0, import_react37.useRef)(null);
-      const pageCache = (0, import_react37.useRef)(/* @__PURE__ */ new Map());
-      const pageDimensionsCache = (0, import_react37.useRef)(/* @__PURE__ */ new Map());
-      const baseScaleRef = (0, import_react37.useRef)(scale);
+      const containerRef = (0, import_react38.useRef)(null);
+      const scrollContainerRef = (0, import_react38.useRef)(null);
+      const documentRef = (0, import_react38.useRef)(null);
+      const pageCache = (0, import_react38.useRef)(/* @__PURE__ */ new Map());
+      const pageDimensionsCache = (0, import_react38.useRef)(/* @__PURE__ */ new Map());
+      const baseScaleRef = (0, import_react38.useRef)(scale);
       const isTouchDevice = useIsTouchDevice();
-      const [visiblePages, setVisiblePages] = (0, import_react37.useState)([1]);
-      const [pageObjects, setPageObjects] = (0, import_react37.useState)(/* @__PURE__ */ new Map());
-      const [totalHeight, setTotalHeight] = (0, import_react37.useState)(0);
-      const [pageInfos, setPageInfos] = (0, import_react37.useState)([]);
+      const [visiblePages, setVisiblePages] = (0, import_react38.useState)([1]);
+      const [pageObjects, setPageObjects] = (0, import_react38.useState)(/* @__PURE__ */ new Map());
+      const [totalHeight, setTotalHeight] = (0, import_react38.useState)(0);
+      const [pageInfos, setPageInfos] = (0, import_react38.useState)([]);
       const { selection, clearSelection, copySelection } = useTextSelection();
       const {
         createHighlightFromSelection,
@@ -8826,7 +9236,7 @@ var init_VirtualizedDocumentContainer = __esm({
         selectHighlight,
         activeColor
       } = useHighlights();
-      (0, import_react37.useEffect)(() => {
+      (0, import_react38.useEffect)(() => {
         if (document2 !== documentRef.current) {
           documentRef.current = document2;
           pageCache.current.clear();
@@ -8834,7 +9244,7 @@ var init_VirtualizedDocumentContainer = __esm({
           setPageObjects(/* @__PURE__ */ new Map());
         }
       }, [document2]);
-      (0, import_react37.useEffect)(() => {
+      (0, import_react38.useEffect)(() => {
         if (!document2 || numPages === 0) return;
         const calculatePageInfos = async () => {
           const infos = [];
@@ -8851,7 +9261,7 @@ var init_VirtualizedDocumentContainer = __esm({
                 dimensions = { width: viewport.width, height: viewport.height };
                 pageDimensionsCache.current.set(i, dimensions);
               } catch {
-                dimensions = { width: DEFAULT_PAGE_WIDTH, height: DEFAULT_PAGE_HEIGHT };
+                dimensions = { width: DEFAULT_PAGE_WIDTH2, height: DEFAULT_PAGE_HEIGHT2 };
               }
             }
             const scaledHeight = Math.floor(dimensions.height * scale);
@@ -8867,7 +9277,7 @@ var init_VirtualizedDocumentContainer = __esm({
         };
         calculatePageInfos();
       }, [document2, numPages, scale, rotation, pageGap]);
-      const updateVisiblePages = (0, import_react37.useCallback)(() => {
+      const updateVisiblePages = (0, import_react38.useCallback)(() => {
         if (!scrollContainerRef.current || pageInfos.length === 0) return;
         const container = scrollContainerRef.current;
         const scrollTop = container.scrollTop;
@@ -8899,7 +9309,7 @@ var init_VirtualizedDocumentContainer = __esm({
           goToPage(firstVisiblePage);
         }
       }, [pageInfos, overscan, currentPage, goToPage]);
-      (0, import_react37.useEffect)(() => {
+      (0, import_react38.useEffect)(() => {
         const container = scrollContainerRef.current;
         if (!container) return;
         const handleScroll = () => {
@@ -8909,7 +9319,7 @@ var init_VirtualizedDocumentContainer = __esm({
         updateVisiblePages();
         return () => container.removeEventListener("scroll", handleScroll);
       }, [updateVisiblePages]);
-      (0, import_react37.useEffect)(() => {
+      (0, import_react38.useEffect)(() => {
         if (!document2) return;
         const loadPages = async () => {
           const newPageObjects = new Map(pageObjects);
@@ -8946,7 +9356,7 @@ var init_VirtualizedDocumentContainer = __esm({
         };
         loadPages();
       }, [document2, visiblePages, pageObjects]);
-      (0, import_react37.useEffect)(() => {
+      (0, import_react38.useEffect)(() => {
         if (!scrollToPageRequest || !scrollContainerRef.current || pageInfos.length === 0) return;
         const { page, requestId, behavior } = scrollToPageRequest;
         const pageInfo = pageInfos.find((p) => p.pageNumber === page);
@@ -8984,7 +9394,7 @@ var init_VirtualizedDocumentContainer = __esm({
           handleScrollEnd();
         }
       }, [scrollToPageRequest, pageInfos, pageGap, viewerStore]);
-      (0, import_react37.useEffect)(() => {
+      (0, import_react38.useEffect)(() => {
         if (scrollToPageRequest) return;
         if (!scrollContainerRef.current || pageInfos.length === 0) return;
         const pageInfo = pageInfos.find((p) => p.pageNumber === currentPage);
@@ -9001,14 +9411,14 @@ var init_VirtualizedDocumentContainer = __esm({
           }
         }
       }, [currentPage, pageInfos, pageGap, scrollToPageRequest]);
-      const handlePinchZoom = (0, import_react37.useCallback)(
+      const handlePinchZoom = (0, import_react38.useCallback)(
         (pinchScale) => {
           const newScale = Math.max(0.25, Math.min(4, baseScaleRef.current * pinchScale));
           setScale(newScale);
         },
         [setScale]
       );
-      (0, import_react37.useEffect)(() => {
+      (0, import_react38.useEffect)(() => {
         baseScaleRef.current = scale;
       }, [scale]);
       const { ref: touchRef } = useTouchGestures({
@@ -9017,20 +9427,20 @@ var init_VirtualizedDocumentContainer = __esm({
         onSwipeRight: previousPage,
         enabled: enableTouchGestures && isTouchDevice
       });
-      const setContainerRef = (0, import_react37.useCallback)(
+      const setContainerRef = (0, import_react38.useCallback)(
         (element) => {
           scrollContainerRef.current = element;
           touchRef(element);
         },
         [touchRef]
       );
-      const getPageElement = (0, import_react37.useCallback)(
+      const getPageElement = (0, import_react38.useCallback)(
         (pageNumber) => {
           return containerRef.current?.querySelector(`[data-page-number="${pageNumber}"]`);
         },
         []
       );
-      const handleCreateHighlight = (0, import_react37.useCallback)(
+      const handleCreateHighlight = (0, import_react38.useCallback)(
         (color) => {
           if (!selection) return;
           const pageElement = getPageElement(selection.pageNumber);
@@ -9040,13 +9450,13 @@ var init_VirtualizedDocumentContainer = __esm({
         },
         [selection, getPageElement, createHighlightFromSelection, scale, clearSelection]
       );
-      const handleColorChange = (0, import_react37.useCallback)(
+      const handleColorChange = (0, import_react38.useCallback)(
         (id, color) => {
           updateHighlight(id, { color });
         },
         [updateHighlight]
       );
-      const handleCommentChange = (0, import_react37.useCallback)(
+      const handleCommentChange = (0, import_react38.useCallback)(
         (id, comment) => {
           updateHighlight(id, { comment: comment || void 0 });
         },
@@ -9058,7 +9468,7 @@ var init_VirtualizedDocumentContainer = __esm({
         sepia: "bg-amber-50"
       };
       if (!document2) {
-        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "div",
           {
             className: cn(
@@ -9067,11 +9477,11 @@ var init_VirtualizedDocumentContainer = __esm({
               themeStyles[theme],
               className
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PDFLoadingScreen, { phase: isLoading ? "fetching" : "initializing" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PDFLoadingScreen, { phase: isLoading ? "fetching" : "initializing" })
           }
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         "div",
         {
           ref: containerRef,
@@ -9082,7 +9492,7 @@ var init_VirtualizedDocumentContainer = __esm({
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "div",
               {
                 ref: setContainerRef,
@@ -9091,7 +9501,7 @@ var init_VirtualizedDocumentContainer = __esm({
                   // Smooth scrolling on iOS
                   WebkitOverflowScrolling: "touch"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "div",
                   {
                     className: "relative mx-auto",
@@ -9102,8 +9512,9 @@ var init_VirtualizedDocumentContainer = __esm({
                     children: pageInfos.filter((info) => visiblePages.includes(info.pageNumber)).map((info) => {
                       const page = pageObjects.get(info.pageNumber);
                       const dimensions = pageDimensionsCache.current.get(info.pageNumber);
-                      const scaledWidth = dimensions ? Math.floor(dimensions.width * scale) : Math.floor(DEFAULT_PAGE_WIDTH * scale);
-                      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      const scaledWidth = dimensions ? Math.floor(dimensions.width * scale) : Math.floor(DEFAULT_PAGE_WIDTH2 * scale);
+                      const scaledHeight = dimensions ? Math.floor(dimensions.height * scale) : Math.floor(DEFAULT_PAGE_HEIGHT2 * scale);
+                      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                         "div",
                         {
                           className: "absolute left-1/2 -translate-x-1/2",
@@ -9111,14 +9522,22 @@ var init_VirtualizedDocumentContainer = __esm({
                             top: info.top,
                             width: scaledWidth
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                          children: page ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                             PDFPage,
                             {
                               pageNumber: info.pageNumber,
-                              page: page || null,
+                              page,
                               scale,
                               rotation
                             }
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                            PageSkeleton,
+                            {
+                              pageNumber: info.pageNumber,
+                              width: scaledWidth,
+                              height: scaledHeight,
+                              isFirstPage: info.pageNumber === 1
+                            }
                           )
                         },
                         info.pageNumber
@@ -9128,7 +9547,7 @@ var init_VirtualizedDocumentContainer = __esm({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               SelectionToolbar,
               {
                 selection,
@@ -9137,7 +9556,7 @@ var init_VirtualizedDocumentContainer = __esm({
                 activeColor
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               HighlightPopover,
               {
                 highlight: selectedHighlight,
@@ -9157,15 +9576,15 @@ var init_VirtualizedDocumentContainer = __esm({
 });
 
 // src/components/PDFViewer/ContinuousScrollContainer.tsx
-var import_react38, import_jsx_runtime24, ContinuousScrollContainer;
+var import_react39, import_jsx_runtime25, ContinuousScrollContainer;
 var init_ContinuousScrollContainer = __esm({
   "src/components/PDFViewer/ContinuousScrollContainer.tsx"() {
     "use strict";
-    import_react38 = require("react");
+    import_react39 = require("react");
     init_VirtualizedDocumentContainer();
-    import_jsx_runtime24 = require("react/jsx-runtime");
-    ContinuousScrollContainer = (0, import_react38.memo)(function ContinuousScrollContainer2(props) {
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_jsx_runtime25 = require("react/jsx-runtime");
+    ContinuousScrollContainer = (0, import_react39.memo)(function ContinuousScrollContainer2(props) {
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         VirtualizedDocumentContainer,
         {
           overscan: 3,
@@ -9178,11 +9597,11 @@ var init_ContinuousScrollContainer = __esm({
 });
 
 // src/components/PDFViewer/DualPageContainer.tsx
-var import_react39, import_jsx_runtime25, DualPageContainer;
+var import_react40, import_jsx_runtime26, DualPageContainer;
 var init_DualPageContainer = __esm({
   "src/components/PDFViewer/DualPageContainer.tsx"() {
     "use strict";
-    import_react39 = require("react");
+    import_react40 = require("react");
     init_PDFPage2();
     init_PDFLoadingScreen2();
     init_hooks();
@@ -9190,8 +9609,8 @@ var init_DualPageContainer = __esm({
     init_SelectionToolbar2();
     init_HighlightPopover2();
     init_utils();
-    import_jsx_runtime25 = require("react/jsx-runtime");
-    DualPageContainer = (0, import_react39.memo)(function DualPageContainer2({
+    import_jsx_runtime26 = require("react/jsx-runtime");
+    DualPageContainer = (0, import_react40.memo)(function DualPageContainer2({
       showCover = true,
       bookSpread = true,
       pageGap = 4,
@@ -9211,13 +9630,13 @@ var init_DualPageContainer = __esm({
       } = usePDFViewer();
       const scrollToPageRequest = useViewerStore((s) => s.scrollToPageRequest);
       const { viewerStore } = usePDFViewerStores();
-      const containerRef = (0, import_react39.useRef)(null);
-      const documentRef = (0, import_react39.useRef)(null);
-      const baseScaleRef = (0, import_react39.useRef)(scale);
+      const containerRef = (0, import_react40.useRef)(null);
+      const documentRef = (0, import_react40.useRef)(null);
+      const baseScaleRef = (0, import_react40.useRef)(scale);
       const isTouchDevice = useIsTouchDevice();
-      const [leftPage, setLeftPage] = (0, import_react39.useState)(null);
-      const [rightPage, setRightPage] = (0, import_react39.useState)(null);
-      const [isLoading, setIsLoading] = (0, import_react39.useState)(false);
+      const [leftPage, setLeftPage] = (0, import_react40.useState)(null);
+      const [rightPage, setRightPage] = (0, import_react40.useState)(null);
+      const [isLoading, setIsLoading] = (0, import_react40.useState)(false);
       const { selection, clearSelection, copySelection } = useTextSelection();
       const {
         createHighlightFromSelection,
@@ -9227,7 +9646,7 @@ var init_DualPageContainer = __esm({
         selectHighlight,
         activeColor
       } = useHighlights();
-      const getSpreadPages = (0, import_react39.useCallback)(
+      const getSpreadPages = (0, import_react40.useCallback)(
         (page) => {
           if (showCover && page === 1) {
             return { left: null, right: 1 };
@@ -9271,14 +9690,14 @@ var init_DualPageContainer = __esm({
         },
         [showCover, bookSpread, numPages]
       );
-      (0, import_react39.useEffect)(() => {
+      (0, import_react40.useEffect)(() => {
         if (document2 !== documentRef.current) {
           documentRef.current = document2;
           setLeftPage(null);
           setRightPage(null);
         }
       }, [document2]);
-      (0, import_react39.useEffect)(() => {
+      (0, import_react40.useEffect)(() => {
         if (!document2) {
           setLeftPage(null);
           setRightPage(null);
@@ -9324,7 +9743,7 @@ var init_DualPageContainer = __esm({
           cancelled = true;
         };
       }, [document2, currentPage, getSpreadPages, scrollToPageRequest, viewerStore]);
-      const goToPreviousSpread = (0, import_react39.useCallback)(() => {
+      const goToPreviousSpread = (0, import_react40.useCallback)(() => {
         const spread2 = getSpreadPages(currentPage);
         const leftmostPage = spread2.left || spread2.right || currentPage;
         if (showCover && leftmostPage === 2) {
@@ -9336,21 +9755,21 @@ var init_DualPageContainer = __esm({
           goToPage(newPage);
         }
       }, [currentPage, showCover, getSpreadPages, goToPage]);
-      const goToNextSpread = (0, import_react39.useCallback)(() => {
+      const goToNextSpread = (0, import_react40.useCallback)(() => {
         const spread2 = getSpreadPages(currentPage);
         const rightmostPage = spread2.right || spread2.left || currentPage;
         if (rightmostPage < numPages) {
           goToPage(Math.min(numPages, rightmostPage + 1));
         }
       }, [currentPage, numPages, getSpreadPages, goToPage]);
-      const handlePinchZoom = (0, import_react39.useCallback)(
+      const handlePinchZoom = (0, import_react40.useCallback)(
         (pinchScale) => {
           const newScale = Math.max(0.25, Math.min(4, baseScaleRef.current * pinchScale));
           setScale(newScale);
         },
         [setScale]
       );
-      (0, import_react39.useEffect)(() => {
+      (0, import_react40.useEffect)(() => {
         baseScaleRef.current = scale;
       }, [scale]);
       const { ref: touchRef } = useTouchGestures({
@@ -9359,20 +9778,20 @@ var init_DualPageContainer = __esm({
         onSwipeRight: goToPreviousSpread,
         enabled: enableTouchGestures && isTouchDevice
       });
-      const setContainerRef = (0, import_react39.useCallback)(
+      const setContainerRef = (0, import_react40.useCallback)(
         (element) => {
           containerRef.current = element;
           touchRef(element);
         },
         [touchRef]
       );
-      const getPageElement = (0, import_react39.useCallback)(
+      const getPageElement = (0, import_react40.useCallback)(
         (pageNumber) => {
           return containerRef.current?.querySelector(`[data-page-number="${pageNumber}"]`);
         },
         []
       );
-      const handleCreateHighlight = (0, import_react39.useCallback)(
+      const handleCreateHighlight = (0, import_react40.useCallback)(
         (color) => {
           if (!selection) return;
           const pageElement = getPageElement(selection.pageNumber);
@@ -9382,13 +9801,13 @@ var init_DualPageContainer = __esm({
         },
         [selection, getPageElement, createHighlightFromSelection, scale, clearSelection]
       );
-      const handleColorChange = (0, import_react39.useCallback)(
+      const handleColorChange = (0, import_react40.useCallback)(
         (id, color) => {
           updateHighlight(id, { color });
         },
         [updateHighlight]
       );
-      const handleCommentChange = (0, import_react39.useCallback)(
+      const handleCommentChange = (0, import_react40.useCallback)(
         (id, comment) => {
           updateHighlight(id, { comment: comment || void 0 });
         },
@@ -9401,7 +9820,7 @@ var init_DualPageContainer = __esm({
       };
       const spread = getSpreadPages(currentPage);
       if (!document2) {
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "div",
           {
             className: cn(
@@ -9410,11 +9829,11 @@ var init_DualPageContainer = __esm({
               themeStyles[theme],
               className
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PDFLoadingScreen, { phase: isDocumentLoading ? "fetching" : "initializing" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PDFLoadingScreen, { phase: isDocumentLoading ? "fetching" : "initializing" })
           }
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         "div",
         {
           ref: setContainerRef,
@@ -9427,13 +9846,13 @@ var init_DualPageContainer = __esm({
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
               "div",
               {
                 className: "flex items-center",
                 style: { gap: pageGap },
                 children: [
-                  spread.left && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  spread.left && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                     PDFPage,
                     {
                       pageNumber: spread.left,
@@ -9442,14 +9861,14 @@ var init_DualPageContainer = __esm({
                       rotation
                     }
                   ),
-                  spread.left && spread.right && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  spread.left && spread.right && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                     "div",
                     {
                       className: "w-px h-full bg-gray-300 dark:bg-gray-600 opacity-50",
                       style: { minHeight: "100%" }
                     }
                   ),
-                  spread.right && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  spread.right && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                     PDFPage,
                     {
                       pageNumber: spread.right,
@@ -9458,7 +9877,7 @@ var init_DualPageContainer = __esm({
                       rotation
                     }
                   ),
-                  (!spread.left || !spread.right) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  (!spread.left || !spread.right) && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                     "div",
                     {
                       className: "flex items-center justify-center",
@@ -9471,7 +9890,7 @@ var init_DualPageContainer = __esm({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               SelectionToolbar,
               {
                 selection,
@@ -9480,7 +9899,7 @@ var init_DualPageContainer = __esm({
                 activeColor
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               HighlightPopover,
               {
                 highlight: selectedHighlight,
@@ -9492,7 +9911,202 @@ var init_DualPageContainer = __esm({
                 onClose: () => selectHighlight(null)
               }
             ),
-            isLoading && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fixed bottom-4 right-4 px-3 py-2 bg-black/75 text-white text-sm rounded-lg", children: "Loading..." })
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "fixed bottom-4 right-4 px-3 py-2 bg-black/75 text-white text-sm rounded-lg", children: "Loading..." })
+          ]
+        }
+      );
+    });
+  }
+});
+
+// src/components/PDFViewer/BookModeContainer.tsx
+var import_react41, import_react_pageflip, import_jsx_runtime27, BookPage, BookModeContainer;
+var init_BookModeContainer = __esm({
+  "src/components/PDFViewer/BookModeContainer.tsx"() {
+    "use strict";
+    import_react41 = __toESM(require("react"), 1);
+    import_react_pageflip = __toESM(require("react-pageflip"), 1);
+    init_PDFPage2();
+    init_PDFLoadingScreen2();
+    init_hooks();
+    init_utils();
+    import_jsx_runtime27 = require("react/jsx-runtime");
+    BookPage = import_react41.default.forwardRef(function BookPage2({ pageNumber, page, scale, rotation, width, height }, ref) {
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, className: "book-page", "data-page-number": pageNumber, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: { width, height, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        PDFPage,
+        {
+          pageNumber,
+          page,
+          scale,
+          rotation,
+          showTextLayer: false,
+          showAnnotationLayer: false,
+          showHighlightLayer: false
+        }
+      ) }) });
+    });
+    BookModeContainer = (0, import_react41.memo)(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] = (0, import_react41.useState)([]);
+      const [pageDims, setPageDims] = (0, import_react41.useState)({ width: 612, height: 792 });
+      const [isLoadingPages, setIsLoadingPages] = (0, import_react41.useState)(false);
+      const flipBookRef = (0, import_react41.useRef)(null);
+      const isSyncingRef = (0, import_react41.useRef)(false);
+      (0, import_react41.useEffect)(() => {
+        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 loaded = results.map((r) => r.status === "fulfilled" ? r.value : null);
+              setPages(loaded);
+              const firstPage = loaded[0];
+              if (firstPage) {
+                const vp = firstPage.getViewport({ scale, rotation });
+                setPageDims({ width: Math.floor(vp.width), height: Math.floor(vp.height) });
+              }
+            }
+          } catch {
+          } finally {
+            if (!cancelled) setIsLoadingPages(false);
+          }
+        };
+        loadAllPages();
+        return () => {
+          cancelled = true;
+        };
+      }, [document2, numPages, scale, rotation]);
+      (0, import_react41.useEffect)(() => {
+        if (pages[0]) {
+          const vp = pages[0].getViewport({ scale, rotation });
+          setPageDims({ width: Math.floor(vp.width), height: Math.floor(vp.height) });
+        }
+      }, [pages, scale, rotation]);
+      (0, import_react41.useEffect)(() => {
+        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]);
+      (0, import_react41.useEffect)(() => {
+        if (scrollToPageRequest) {
+          requestAnimationFrame(() => {
+            viewerStore.getState().completeScrollRequest(scrollToPageRequest.requestId);
+          });
+        }
+      }, [scrollToPageRequest, viewerStore]);
+      const handleFlip = (0, import_react41.useCallback)((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" : "";
+      if (!document2) {
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("document-container", "flex-1", themeStyles[theme], className), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PDFLoadingScreen, { phase: isLoading ? "fetching" : "initializing" }) });
+      }
+      if (isLoadingPages || pages.length === 0) {
+        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("document-container", "flex-1", themeStyles[theme], className), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PDFLoadingScreen, { phase: "rendering" }) });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        "div",
+        {
+          className: cn(
+            "book-mode-container",
+            "flex-1 overflow-hidden",
+            "flex items-center justify-center",
+            themeStyles[theme],
+            themeClass,
+            className
+          ),
+          style: { userSelect: "none", WebkitUserSelect: "none" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              import_react_pageflip.default,
+              {
+                ref: flipBookRef,
+                width: pageDims.width,
+                height: pageDims.height,
+                size: "stretch",
+                minWidth: 300,
+                maxWidth: pageDims.width,
+                minHeight: 400,
+                maxHeight: pageDims.height,
+                drawShadow,
+                maxShadowOpacity,
+                flippingTime,
+                usePortrait: true,
+                startPage: currentPage - 1,
+                showCover: false,
+                mobileScrollSupport: false,
+                swipeDistance: 30,
+                showPageCorners: true,
+                useMouseEvents: true,
+                clickEventForward: false,
+                onFlip: handleFlip,
+                className: "book-flipbook",
+                style: {},
+                startZIndex: 0,
+                autoSize: true,
+                renderOnlyPageLengthChange: false,
+                disableFlipByClick: false,
+                children: pages.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  BookPage,
+                  {
+                    pageNumber: index + 1,
+                    page,
+                    scale,
+                    rotation,
+                    width: pageDims.width,
+                    height: pageDims.height
+                  },
+                  index
+                ))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "book-page-indicator", children: [
+              currentPage,
+              " / ",
+              numPages
+            ] })
           ]
         }
       );
@@ -9501,15 +10115,15 @@ var init_DualPageContainer = __esm({
 });
 
 // src/components/FloatingZoomControls/FloatingZoomControls.tsx
-var import_react40, import_jsx_runtime26, FloatingZoomControls;
+var import_react42, import_jsx_runtime28, FloatingZoomControls;
 var init_FloatingZoomControls = __esm({
   "src/components/FloatingZoomControls/FloatingZoomControls.tsx"() {
     "use strict";
-    import_react40 = require("react");
+    import_react42 = require("react");
     init_hooks();
     init_utils();
-    import_jsx_runtime26 = require("react/jsx-runtime");
-    FloatingZoomControls = (0, import_react40.memo)(function FloatingZoomControls2({
+    import_jsx_runtime28 = require("react/jsx-runtime");
+    FloatingZoomControls = (0, import_react42.memo)(function FloatingZoomControls2({
       position = "bottom-right",
       className,
       showFitToWidth = true,
@@ -9519,20 +10133,20 @@ var init_FloatingZoomControls = __esm({
       const { viewerStore } = usePDFViewerStores();
       const scale = useViewerStore((s) => s.scale);
       const document2 = useViewerStore((s) => s.document);
-      const handleZoomIn = (0, import_react40.useCallback)(() => {
+      const handleZoomIn = (0, import_react42.useCallback)(() => {
         const currentScale = viewerStore.getState().scale;
         const newScale = Math.min(4, currentScale + 0.05);
         viewerStore.getState().setScale(newScale);
       }, [viewerStore]);
-      const handleZoomOut = (0, import_react40.useCallback)(() => {
+      const handleZoomOut = (0, import_react42.useCallback)(() => {
         const currentScale = viewerStore.getState().scale;
         const newScale = Math.max(0.1, currentScale - 0.05);
         viewerStore.getState().setScale(newScale);
       }, [viewerStore]);
-      const handleFitToWidth = (0, import_react40.useCallback)(() => {
+      const handleFitToWidth = (0, import_react42.useCallback)(() => {
         viewerStore.getState().setScale(1);
       }, [viewerStore]);
-      const handleFitToPage = (0, import_react40.useCallback)(() => {
+      const handleFitToPage = (0, import_react42.useCallback)(() => {
         viewerStore.getState().setScale(0.75);
       }, [viewerStore]);
       if (!document2) return null;
@@ -9543,7 +10157,7 @@ var init_FloatingZoomControls = __esm({
         "top-left": "top-4 left-4"
       };
       const zoomPercentage = Math.round(scale * 100);
-      return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         "div",
         {
           className: cn(
@@ -9555,7 +10169,7 @@ var init_FloatingZoomControls = __esm({
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "button",
               {
                 onClick: handleZoomOut,
@@ -9569,14 +10183,14 @@ var init_FloatingZoomControls = __esm({
                 disabled: scale <= 0.25,
                 title: "Zoom Out",
                 "aria-label": "Zoom Out",
-                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
               }
             ),
-            showZoomLevel && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "min-w-[48px] text-center text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+            showZoomLevel && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "min-w-[48px] text-center text-sm font-medium text-gray-700 dark:text-gray-300", children: [
               zoomPercentage,
               "%"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "button",
               {
                 onClick: handleZoomIn,
@@ -9590,11 +10204,11 @@ var init_FloatingZoomControls = __esm({
                 disabled: scale >= 4,
                 title: "Zoom In",
                 "aria-label": "Zoom In",
-                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) })
               }
             ),
-            (showFitToWidth || showFitToPage) && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-px h-6 bg-gray-200 dark:bg-gray-700 mx-1" }),
-            showFitToWidth && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            (showFitToWidth || showFitToPage) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-px h-6 bg-gray-200 dark:bg-gray-700 mx-1" }),
+            showFitToWidth && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "button",
               {
                 onClick: handleFitToWidth,
@@ -9606,10 +10220,10 @@ var init_FloatingZoomControls = __esm({
                 ),
                 title: "Fit to Width",
                 "aria-label": "Fit to Width",
-                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("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__ */ (0, import_jsx_runtime28.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("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__ */ (0, import_jsx_runtime26.jsx)(
+            showFitToPage && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "button",
               {
                 onClick: handleFitToPage,
@@ -9621,7 +10235,7 @@ var init_FloatingZoomControls = __esm({
                 ),
                 title: "Fit to Page",
                 "aria-label": "Fit to Page",
-                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("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__ */ (0, import_jsx_runtime28.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("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" }) })
               }
             )
           ]
@@ -9683,11 +10297,11 @@ function calculateMatchRects3(textItems, startOffset, length, viewport) {
   }
   return rects;
 }
-var import_react41, import_jsx_runtime27, PDFViewerInner, PDFViewerInnerWithRef, PDFViewerClient;
+var import_react43, import_jsx_runtime29, PDFViewerInner, PDFViewerInnerWithRef, PDFViewerClient;
 var init_PDFViewerClient = __esm({
   "src/components/PDFViewer/PDFViewerClient.tsx"() {
     "use strict";
-    import_react41 = require("react");
+    import_react43 = require("react");
     init_hooks();
     init_utils();
     init_Toolbar2();
@@ -9696,11 +10310,12 @@ var init_PDFViewerClient = __esm({
     init_DocumentContainer();
     init_ContinuousScrollContainer();
     init_DualPageContainer();
+    init_BookModeContainer();
     init_FloatingZoomControls2();
     init_PDFLoadingScreen2();
     init_utils();
-    import_jsx_runtime27 = require("react/jsx-runtime");
-    PDFViewerInner = (0, import_react41.memo)(function PDFViewerInner2({
+    import_jsx_runtime29 = require("react/jsx-runtime");
+    PDFViewerInner = (0, import_react43.memo)(function PDFViewerInner2({
       src,
       initialPage = 1,
       page: controlledPage,
@@ -9727,19 +10342,19 @@ var init_PDFViewerClient = __esm({
       onReady
     }) {
       const { viewerStore, annotationStore, searchStore } = usePDFViewerStores();
-      const mountedRef = (0, import_react41.useRef)(true);
-      const [, setLoadState] = (0, import_react41.useState)("idle");
-      const onDocumentLoadRef = (0, import_react41.useRef)(onDocumentLoad);
-      const onErrorRef = (0, import_react41.useRef)(onError);
-      const onPageChangeRef = (0, import_react41.useRef)(onPageChange);
-      const onScaleChangeRef = (0, import_react41.useRef)(onScaleChange);
-      const onZoomChangeRef = (0, import_react41.useRef)(onZoomChange);
-      const onPageRenderStartRef = (0, import_react41.useRef)(onPageRenderStart);
-      const onPageRenderCompleteRef = (0, import_react41.useRef)(onPageRenderComplete);
-      const onHighlightAddedRef = (0, import_react41.useRef)(onHighlightAdded);
-      const onHighlightRemovedRef = (0, import_react41.useRef)(onHighlightRemoved);
-      const onAnnotationAddedRef = (0, import_react41.useRef)(onAnnotationAdded);
-      const onReadyRef = (0, import_react41.useRef)(onReady);
+      const mountedRef = (0, import_react43.useRef)(true);
+      const [, setLoadState] = (0, import_react43.useState)("idle");
+      const onDocumentLoadRef = (0, import_react43.useRef)(onDocumentLoad);
+      const onErrorRef = (0, import_react43.useRef)(onError);
+      const onPageChangeRef = (0, import_react43.useRef)(onPageChange);
+      const onScaleChangeRef = (0, import_react43.useRef)(onScaleChange);
+      const onZoomChangeRef = (0, import_react43.useRef)(onZoomChange);
+      const onPageRenderStartRef = (0, import_react43.useRef)(onPageRenderStart);
+      const onPageRenderCompleteRef = (0, import_react43.useRef)(onPageRenderComplete);
+      const onHighlightAddedRef = (0, import_react43.useRef)(onHighlightAdded);
+      const onHighlightRemovedRef = (0, import_react43.useRef)(onHighlightRemoved);
+      const onAnnotationAddedRef = (0, import_react43.useRef)(onAnnotationAdded);
+      const onReadyRef = (0, import_react43.useRef)(onReady);
       onDocumentLoadRef.current = onDocumentLoad;
       onErrorRef.current = onError;
       onPageChangeRef.current = onPageChange;
@@ -9752,8 +10367,8 @@ var init_PDFViewerClient = __esm({
       onAnnotationAddedRef.current = onAnnotationAdded;
       onReadyRef.current = onReady;
       const isControlled = controlledPage !== void 0;
-      const prevControlledPageRef = (0, import_react41.useRef)(controlledPage);
-      const srcIdRef = (0, import_react41.useRef)(null);
+      const prevControlledPageRef = (0, import_react43.useRef)(controlledPage);
+      const srcIdRef = (0, import_react43.useRef)(null);
       const currentPage = useViewerStore((s) => s.currentPage);
       const scale = useViewerStore((s) => s.scale);
       const theme = useViewerStore((s) => s.theme);
@@ -9761,9 +10376,10 @@ var init_PDFViewerClient = __esm({
       const loadingProgress = useViewerStore((s) => s.loadingProgress);
       const error = useViewerStore((s) => s.error);
       const sidebarOpen = useViewerStore((s) => s.sidebarOpen);
+      const streamingProgress = useViewerStore((s) => s.streamingProgress);
       const srcId = getSrcIdentifier(src);
-      const handleRef = (0, import_react41.useRef)(null);
-      (0, import_react41.useEffect)(() => {
+      const handleRef = (0, import_react43.useRef)(null);
+      (0, import_react43.useEffect)(() => {
         const handle = {
           // ==================== Text Highlighting ====================
           highlightText: async (text, options) => {
@@ -10181,14 +10797,14 @@ var init_PDFViewerClient = __esm({
         handleRef.current = handle;
         onReadyRef.current?.(handle);
       }, [viewerStore, annotationStore, searchStore]);
-      const handleRetry = (0, import_react41.useCallback)(() => {
+      const handleRetry = (0, import_react43.useCallback)(() => {
         srcIdRef.current = null;
         viewerStore.getState().setError(null);
         setLoadState("idle");
       }, [viewerStore]);
-      const abortControllerRef = (0, import_react41.useRef)(null);
-      const currentSrcRef = (0, import_react41.useRef)(null);
-      (0, import_react41.useEffect)(() => {
+      const abortControllerRef = (0, import_react43.useRef)(null);
+      const currentSrcRef = (0, import_react43.useRef)(null);
+      (0, import_react43.useEffect)(() => {
         mountedRef.current = true;
         return () => {
           mountedRef.current = false;
@@ -10213,7 +10829,8 @@ var init_PDFViewerClient = __esm({
           viewerStore.getState().setError(null);
         };
       }, [viewerStore]);
-      (0, import_react41.useEffect)(() => {
+      const cancelLoaderRef = (0, import_react43.useRef)(null);
+      (0, import_react43.useEffect)(() => {
         if (srcIdRef.current === srcId && viewerStore.getState().document) {
           return;
         }
@@ -10223,6 +10840,10 @@ var init_PDFViewerClient = __esm({
         if (abortControllerRef.current) {
           abortControllerRef.current.abort();
         }
+        if (cancelLoaderRef.current) {
+          cancelLoaderRef.current();
+          cancelLoaderRef.current = null;
+        }
         const abortController = new AbortController();
         abortControllerRef.current = abortController;
         const currentDoc = viewerStore.getState().document;
@@ -10235,100 +10856,130 @@ var init_PDFViewerClient = __esm({
         viewerStore.setState({
           document: null,
           isLoading: true,
-          loadingProgress: { phase: "fetching" },
-          error: null
+          loadingProgress: { phase: "initializing" },
+          error: null,
+          documentLoadingState: "initializing",
+          firstPageReady: false,
+          streamingProgress: null
         });
         setLoadState("loading");
         let lastProgressUpdate = 0;
         let lastPercent = -1;
         const PROGRESS_THROTTLE_MS = 100;
         const PROGRESS_MIN_CHANGE = 5;
-        const loadDoc = async () => {
-          if (!mountedRef.current || abortController.signal.aborted) return;
-          try {
-            const { document: document2, numPages } = await loadDocument({
-              src,
-              workerSrc,
-              signal: abortController.signal,
-              onProgress: ({ loaded, 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 timePassed = now - lastProgressUpdate >= PROGRESS_THROTTLE_MS;
-                const percentChanged = Math.abs(percent - lastPercent) >= PROGRESS_MIN_CHANGE;
-                const isComplete = percent >= 100;
-                if (timePassed && percentChanged || isComplete) {
-                  lastProgressUpdate = now;
-                  lastPercent = percent;
-                  viewerStore.getState().setLoadingProgress({
-                    phase: "fetching",
-                    percent,
-                    bytesLoaded: loaded,
-                    totalBytes: total
-                  });
-                }
-              }
-            });
-            if (mountedRef.current && srcIdRef.current === loadId && !abortController.signal.aborted) {
-              viewerStore.getState().setDocument(document2);
-              setLoadState("loaded");
-              if (initialPage !== 1 || typeof initialScale === "number" || initialScale === "page-fit") {
-                const updates = {};
-                if (initialPage !== 1) {
-                  updates.currentPage = Math.max(1, Math.min(initialPage, numPages));
-                }
-                if (typeof initialScale === "number") {
-                  updates.scale = initialScale;
-                } else if (initialScale === "page-fit") {
-                  updates.scale = 0.75;
-                }
-                if (Object.keys(updates).length > 0) {
-                  viewerStore.setState(updates);
-                }
-              }
-              onDocumentLoadRef.current?.({ document: document2, numPages });
-            } else {
-              document2.destroy();
+        const { promise, cancel } = loadDocumentWithCallbacks({
+          src,
+          workerSrc,
+          signal: abortController.signal,
+          onProgress: ({ loaded, total }) => {
+            if (!mountedRef.current || srcIdRef.current !== loadId || abortController.signal.aborted) {
+              return;
             }
-          } catch (err) {
-            if (err instanceof DOMException && err.name === "AbortError") {
+            const now = Date.now();
+            const percent = total > 0 ? Math.round(loaded / total * 100) : 0;
+            const timePassed = now - lastProgressUpdate >= PROGRESS_THROTTLE_MS;
+            const percentChanged = Math.abs(percent - lastPercent) >= PROGRESS_MIN_CHANGE;
+            const isComplete = percent >= 100;
+            if (timePassed && percentChanged || isComplete) {
+              lastProgressUpdate = now;
+              lastPercent = percent;
+              viewerStore.setState({
+                loadingProgress: {
+                  phase: "fetching",
+                  percent,
+                  bytesLoaded: loaded,
+                  totalBytes: total
+                },
+                streamingProgress: { loaded, total },
+                documentLoadingState: "loading"
+              });
+            }
+          },
+          onDocumentReady: (document2, numPages) => {
+            if (!mountedRef.current || srcIdRef.current !== loadId || abortController.signal.aborted) {
               return;
             }
-            const errorMessage = err instanceof Error ? err.message : String(err);
-            if (abortController.signal.aborted || errorMessage.includes("network error") || errorMessage.includes("aborted")) {
+            viewerStore.setState({
+              document: document2,
+              numPages,
+              loadingProgress: { phase: "parsing" },
+              documentLoadingState: "loading"
+            });
+          },
+          onFirstPageReady: () => {
+            if (!mountedRef.current || srcIdRef.current !== loadId || abortController.signal.aborted) {
               return;
             }
-            if (mountedRef.current && srcIdRef.current === loadId) {
-              const error2 = err instanceof Error ? err : new Error("Failed to load document");
-              viewerStore.getState().setError(error2);
-              setLoadState("error");
-              onErrorRef.current?.(error2);
+            viewerStore.setState({
+              isLoading: false,
+              firstPageReady: true,
+              loadingProgress: null,
+              documentLoadingState: "ready"
+            });
+            setLoadState("loaded");
+          }
+        });
+        cancelLoaderRef.current = cancel;
+        promise.then(({ document: document2, numPages }) => {
+          if (mountedRef.current && srcIdRef.current === loadId && !abortController.signal.aborted) {
+            if (!viewerStore.getState().document) {
+              viewerStore.getState().setDocument(document2);
+            }
+            if (initialPage !== 1 || typeof initialScale === "number" || initialScale === "page-fit") {
+              const updates = {};
+              if (initialPage !== 1) {
+                updates.currentPage = Math.max(1, Math.min(initialPage, numPages));
+              }
+              if (typeof initialScale === "number") {
+                updates.scale = initialScale;
+              } else if (initialScale === "page-fit") {
+                updates.scale = 0.75;
+              }
+              if (Object.keys(updates).length > 0) {
+                viewerStore.setState(updates);
+              }
             }
+            onDocumentLoadRef.current?.({ document: document2, numPages });
           }
-        };
-        loadDoc();
+        }).catch((err) => {
+          if (err instanceof DOMException && err.name === "AbortError") {
+            return;
+          }
+          const errorMessage = err instanceof Error ? err.message : String(err);
+          if (abortController.signal.aborted || errorMessage.includes("network error") || errorMessage.includes("aborted")) {
+            return;
+          }
+          if (mountedRef.current && srcIdRef.current === loadId) {
+            const error2 = err instanceof Error ? err : new Error("Failed to load document");
+            viewerStore.getState().setError(error2);
+            setLoadState("error");
+            onErrorRef.current?.(error2);
+          }
+        });
         return () => {
           abortController.abort();
+          if (cancelLoaderRef.current) {
+            cancelLoaderRef.current();
+            cancelLoaderRef.current = null;
+          }
         };
       }, [srcId, src, workerSrc, initialPage, initialScale, viewerStore]);
-      const prevPageRef = (0, import_react41.useRef)(currentPage);
-      (0, import_react41.useEffect)(() => {
+      const prevPageRef = (0, import_react43.useRef)(currentPage);
+      (0, import_react43.useEffect)(() => {
         if (prevPageRef.current !== currentPage) {
           prevPageRef.current = currentPage;
           onPageChangeRef.current?.(currentPage);
         }
       }, [currentPage]);
-      const prevScaleRef = (0, import_react41.useRef)(scale);
-      (0, import_react41.useEffect)(() => {
+      const prevScaleRef = (0, import_react43.useRef)(scale);
+      (0, import_react43.useEffect)(() => {
         if (prevScaleRef.current !== scale) {
           prevScaleRef.current = scale;
           onScaleChangeRef.current?.(scale);
           onZoomChangeRef.current?.(scale);
         }
       }, [scale]);
-      (0, import_react41.useEffect)(() => {
+      (0, import_react43.useEffect)(() => {
         if (!isControlled || controlledPage === void 0) return;
         if (prevControlledPageRef.current === controlledPage) return;
         prevControlledPageRef.current = controlledPage;
@@ -10341,7 +10992,7 @@ var init_PDFViewerClient = __esm({
       if (error) {
         if (errorComponent) {
           const errorContent = typeof errorComponent === "function" ? errorComponent(error, handleRetry) : errorComponent;
-          return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "div",
             {
               className: cn(
@@ -10355,7 +11006,7 @@ var init_PDFViewerClient = __esm({
             }
           );
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "div",
           {
             className: cn(
@@ -10365,10 +11016,10 @@ var init_PDFViewerClient = __esm({
               themeClass,
               className
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-center p-8", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-red-500 text-lg font-semibold mb-2", children: "Failed to load PDF" }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-gray-500 text-sm", children: error.message }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "text-center p-8", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-red-500 text-lg font-semibold mb-2", children: "Failed to load PDF" }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-gray-500 text-sm", children: error.message }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 "button",
                 {
                   onClick: handleRetry,
@@ -10383,15 +11034,17 @@ var init_PDFViewerClient = __esm({
       const renderContainer = () => {
         switch (viewMode) {
           case "continuous":
-            return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ContinuousScrollContainer, {});
+            return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ContinuousScrollContainer, {});
           case "dual":
-            return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DualPageContainer, {});
+            return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DualPageContainer, {});
+          case "book":
+            return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(BookModeContainer, {});
           case "single":
           default:
-            return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DocumentContainer, {});
+            return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DocumentContainer, {});
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         "div",
         {
           className: cn(
@@ -10403,14 +11056,14 @@ var init_PDFViewerClient = __esm({
             className
           ),
           children: [
-            showToolbar && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Toolbar, {}),
-            showAnnotationToolbar && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AnnotationToolbar, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-1 overflow-hidden", children: [
-              showSidebar && sidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Sidebar, {}),
+            showToolbar && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Toolbar, {}),
+            showAnnotationToolbar && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AnnotationToolbar, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-1 overflow-hidden", children: [
+              showSidebar && sidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Sidebar, {}),
               renderContainer()
             ] }),
-            showFloatingZoom && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FloatingZoomControls, { position: "bottom-right" }),
-            isLoading && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "absolute inset-0 z-50", children: loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            showFloatingZoom && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FloatingZoomControls, { position: "bottom-right" }),
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute inset-0 z-50", children: loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               PDFLoadingScreen,
               {
                 phase: loadingProgress?.phase ?? "fetching",
@@ -10418,15 +11071,23 @@ var init_PDFViewerClient = __esm({
                 bytesLoaded: loadingProgress?.bytesLoaded,
                 totalBytes: loadingProgress?.totalBytes
               }
-            ) })
+            ) }),
+            !isLoading && streamingProgress && streamingProgress.total > 0 && streamingProgress.loaded < streamingProgress.total && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("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__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-3 h-3 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: "Loading pages..." }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "text-white/60", children: [
+                Math.round(streamingProgress.loaded / streamingProgress.total * 100),
+                "%"
+              ] })
+            ] })
           ]
         }
       );
     });
-    PDFViewerInnerWithRef = (0, import_react41.forwardRef)(
+    PDFViewerInnerWithRef = (0, import_react43.forwardRef)(
       function PDFViewerInnerWithRef2(props, ref) {
-        const handleRef = (0, import_react41.useRef)(null);
-        const handleReady = (0, import_react41.useCallback)((handle) => {
+        const handleRef = (0, import_react43.useRef)(null);
+        const handleReady = (0, import_react43.useCallback)((handle) => {
           handleRef.current = handle;
           if (typeof ref === "function") {
             ref(handle);
@@ -10434,17 +11095,17 @@ var init_PDFViewerClient = __esm({
             ref.current = handle;
           }
         }, [ref]);
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PDFViewerInner, { ...props, onReady: handleReady });
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PDFViewerInner, { ...props, onReady: handleReady });
       }
     );
-    PDFViewerClient = (0, import_react41.memo)(
-      (0, import_react41.forwardRef)(function PDFViewerClient2(props, ref) {
-        return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    PDFViewerClient = (0, import_react43.memo)(
+      (0, import_react43.forwardRef)(function PDFViewerClient2(props, ref) {
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           PDFViewerProvider,
           {
             theme: props.theme,
             defaultSidebarPanel: props.defaultSidebarPanel,
-            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PDFViewerInnerWithRef, { ref, ...props })
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PDFViewerInnerWithRef, { ref, ...props })
           }
         );
       })
@@ -10453,20 +11114,20 @@ var init_PDFViewerClient = __esm({
 });
 
 // src/components/PDFViewer/PDFViewer.tsx
-var import_react42, import_jsx_runtime28, PDFViewerClient3, PDFViewerLoading, PDFViewer;
+var import_react44, import_jsx_runtime30, PDFViewerClient3, PDFViewerLoading, PDFViewer;
 var init_PDFViewer = __esm({
   "src/components/PDFViewer/PDFViewer.tsx"() {
     "use strict";
-    import_react42 = require("react");
+    import_react44 = require("react");
     init_utils();
-    import_jsx_runtime28 = require("react/jsx-runtime");
-    PDFViewerClient3 = (0, import_react42.lazy)(
+    import_jsx_runtime30 = require("react/jsx-runtime");
+    PDFViewerClient3 = (0, import_react44.lazy)(
       () => Promise.resolve().then(() => (init_PDFViewerClient(), PDFViewerClient_exports)).then((mod) => ({ default: mod.PDFViewerClient }))
     );
-    PDFViewerLoading = (0, import_react42.memo)(function PDFViewerLoading2({
+    PDFViewerLoading = (0, import_react44.memo)(function PDFViewerLoading2({
       className
     }) {
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "div",
         {
           className: cn(
@@ -10475,18 +11136,18 @@ var init_PDFViewer = __esm({
             "bg-white dark:bg-gray-900",
             className
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mt-2 text-sm text-gray-500", children: "Loading PDF viewer..." })
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mt-2 text-sm text-gray-500", children: "Loading PDF viewer..." })
           ] }) })
         }
       );
     });
-    PDFViewer = (0, import_react42.memo)(function PDFViewer2(props) {
+    PDFViewer = (0, import_react44.memo)(function PDFViewer2(props) {
       if (typeof window === "undefined") {
-        return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PDFViewerLoading, { className: props.className });
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PDFViewerLoading, { className: props.className });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react42.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PDFViewerLoading, { className: props.className }), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PDFViewerClient3, { ...props }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react44.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PDFViewerLoading, { className: props.className }), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PDFViewerClient3, { ...props }) });
     });
   }
 });
@@ -10501,6 +11162,7 @@ var init_PDFViewer2 = __esm({
     init_VirtualizedDocumentContainer();
     init_ContinuousScrollContainer();
     init_DualPageContainer();
+    init_BookModeContainer();
   }
 });
 
@@ -10511,6 +11173,7 @@ __export(index_exports, {
   AnnotationToolbar: () => AnnotationToolbar,
   AskAboutOverlay: () => AskAboutOverlay,
   AskAboutTrigger: () => AskAboutTrigger,
+  BookModeContainer: () => BookModeContainer,
   BookmarksPanel: () => BookmarksPanel,
   CanvasLayer: () => CanvasLayer,
   ContinuousScrollContainer: () => ContinuousScrollContainer,
@@ -10589,6 +11252,7 @@ __export(index_exports, {
   isPDFJSInitialized: () => isPDFJSInitialized,
   isPointInRect: () => isPointInRect,
   loadDocument: () => loadDocument,
+  loadDocumentWithCallbacks: () => loadDocumentWithCallbacks,
   loadHighlights: () => loadHighlights,
   loadStudentData: () => loadStudentData,
   mergeAdjacentRects: () => mergeAdjacentRects,
@@ -10597,6 +11261,7 @@ __export(index_exports, {
   pdfjsLib: () => pdfjsLib,
   percentToPDF: () => percentToPDF,
   percentToViewport: () => percentToViewport,
+  playPageTurnSound: () => playPageTurnSound,
   quickViewer: () => quickViewer,
   removeRotation: () => removeRotation,
   saveHighlights: () => saveHighlights,
@@ -10639,9 +11304,9 @@ init_HighlightPopover2();
 init_AnnotationToolbar2();
 
 // src/components/Annotations/StickyNote.tsx
-var import_react43 = require("react");
+var import_react45 = require("react");
 init_utils();
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var NOTE_COLORS = [
   "#fef08a",
   // yellow
@@ -10654,7 +11319,7 @@ var NOTE_COLORS = [
   "#fed7aa"
   // orange
 ];
-var StickyNote = (0, import_react43.memo)(function StickyNote2({
+var StickyNote = (0, import_react45.memo)(function StickyNote2({
   note,
   scale,
   isSelected,
@@ -10667,37 +11332,37 @@ var StickyNote = (0, import_react43.memo)(function StickyNote2({
   onDragStart,
   className
 }) {
-  const [isExpanded, setIsExpanded] = (0, import_react43.useState)(false);
-  const [localContent, setLocalContent] = (0, import_react43.useState)(note.content);
-  const textareaRef = (0, import_react43.useRef)(null);
-  const noteRef = (0, import_react43.useRef)(null);
-  (0, import_react43.useEffect)(() => {
+  const [isExpanded, setIsExpanded] = (0, import_react45.useState)(false);
+  const [localContent, setLocalContent] = (0, import_react45.useState)(note.content);
+  const textareaRef = (0, import_react45.useRef)(null);
+  const noteRef = (0, import_react45.useRef)(null);
+  (0, import_react45.useEffect)(() => {
     setLocalContent(note.content);
   }, [note.content]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (isEditing && textareaRef.current) {
       textareaRef.current.focus();
       textareaRef.current.select();
     }
   }, [isEditing]);
-  const handleClick = (0, import_react43.useCallback)((e) => {
+  const handleClick = (0, import_react45.useCallback)((e) => {
     e.stopPropagation();
     onSelect?.();
     if (!isExpanded) {
       setIsExpanded(true);
     }
   }, [isExpanded, onSelect]);
-  const handleDoubleClick = (0, import_react43.useCallback)((e) => {
+  const handleDoubleClick = (0, import_react45.useCallback)((e) => {
     e.stopPropagation();
     onStartEdit?.();
   }, [onStartEdit]);
-  const handleBlur = (0, import_react43.useCallback)(() => {
+  const handleBlur = (0, import_react45.useCallback)(() => {
     if (isEditing && localContent !== note.content) {
       onUpdate?.({ content: localContent });
     }
     onEndEdit?.();
   }, [isEditing, localContent, note.content, onUpdate, onEndEdit]);
-  const handleKeyDown = (0, import_react43.useCallback)((e) => {
+  const handleKeyDown = (0, import_react45.useCallback)((e) => {
     if (e.key === "Escape") {
       setLocalContent(note.content);
       onEndEdit?.();
@@ -10705,16 +11370,16 @@ var StickyNote = (0, import_react43.memo)(function StickyNote2({
       handleBlur();
     }
   }, [note.content, onEndEdit, handleBlur]);
-  const handleColorChange = (0, import_react43.useCallback)((color) => {
+  const handleColorChange = (0, import_react45.useCallback)((color) => {
     onUpdate?.({ color });
   }, [onUpdate]);
-  const handleCollapse = (0, import_react43.useCallback)((e) => {
+  const handleCollapse = (0, import_react45.useCallback)((e) => {
     e.stopPropagation();
     setIsExpanded(false);
     onEndEdit?.();
   }, [onEndEdit]);
   if (!isExpanded) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "div",
       {
         ref: noteRef,
@@ -10735,14 +11400,14 @@ var StickyNote = (0, import_react43.memo)(function StickyNote2({
         onMouseDown: onDragStart,
         onTouchStart: onDragStart,
         title: note.content || "Empty note",
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "svg",
           {
             className: "w-4 h-4 opacity-70",
             fill: "currentColor",
             viewBox: "0 0 20 20",
             style: { color: "#333" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               "path",
               {
                 fillRule: "evenodd",
@@ -10755,7 +11420,7 @@ var StickyNote = (0, import_react43.memo)(function StickyNote2({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
       ref: noteRef,
@@ -10773,14 +11438,14 @@ var StickyNote = (0, import_react43.memo)(function StickyNote2({
       },
       onClick: handleClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
           "div",
           {
             className: "flex items-center justify-between px-2 py-1 border-b border-black/10 cursor-move",
             onMouseDown: onDragStart,
             onTouchStart: onDragStart,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex gap-1", children: NOTE_COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex gap-1", children: NOTE_COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 "button",
                 {
                   className: cn(
@@ -10797,8 +11462,8 @@ var StickyNote = (0, import_react43.memo)(function StickyNote2({
                 },
                 color
               )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   "button",
                   {
                     className: "p-0.5 hover:bg-black/10 rounded",
@@ -10807,23 +11472,23 @@ var StickyNote = (0, import_react43.memo)(function StickyNote2({
                       onDelete?.();
                     },
                     title: "Delete note",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { className: "w-3.5 h-3.5 text-gray-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("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__ */ (0, import_jsx_runtime31.jsx)("svg", { className: "w-3.5 h-3.5 text-gray-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime29.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   "button",
                   {
                     className: "p-0.5 hover:bg-black/10 rounded",
                     onClick: handleCollapse,
                     title: "Collapse note",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { className: "w-3.5 h-3.5 text-gray-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { className: "w-3.5 h-3.5 text-gray-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                   }
                 )
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "p-2", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "p-2", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "textarea",
           {
             ref: textareaRef,
@@ -10838,7 +11503,7 @@ var StickyNote = (0, import_react43.memo)(function StickyNote2({
             onKeyDown: handleKeyDown,
             placeholder: "Enter note..."
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "div",
           {
             className: cn(
@@ -10849,16 +11514,16 @@ var StickyNote = (0, import_react43.memo)(function StickyNote2({
             children: note.content || "Double-click to edit..."
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "px-2 pb-1 text-[10px] text-gray-500", children: new Date(note.updatedAt).toLocaleDateString() })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "px-2 pb-1 text-[10px] text-gray-500", children: new Date(note.updatedAt).toLocaleDateString() })
       ]
     }
   );
 });
 
 // src/components/Annotations/DrawingCanvas.tsx
-var import_react44 = require("react");
+var import_react46 = require("react");
 init_utils();
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function pointsToSvgPath(points) {
   if (points.length === 0) return "";
   if (points.length === 1) {
@@ -10896,7 +11561,7 @@ function simplifyPath(points, tolerance = 1) {
   result.push(points[points.length - 1]);
   return result;
 }
-var DrawingCanvas = (0, import_react44.memo)(function DrawingCanvas2({
+var DrawingCanvas = (0, import_react46.memo)(function DrawingCanvas2({
   width,
   height,
   scale,
@@ -10906,10 +11571,10 @@ var DrawingCanvas = (0, import_react44.memo)(function DrawingCanvas2({
   onDrawingComplete,
   className
 }) {
-  const svgRef = (0, import_react44.useRef)(null);
-  const [isDrawing, setIsDrawing] = (0, import_react44.useState)(false);
-  const [currentPath, setCurrentPath] = (0, import_react44.useState)([]);
-  const getPoint = (0, import_react44.useCallback)((e) => {
+  const svgRef = (0, import_react46.useRef)(null);
+  const [isDrawing, setIsDrawing] = (0, import_react46.useState)(false);
+  const [currentPath, setCurrentPath] = (0, import_react46.useState)([]);
+  const getPoint = (0, import_react46.useCallback)((e) => {
     if (!svgRef.current) return null;
     const svg = svgRef.current;
     const rect = svg.getBoundingClientRect();
@@ -10929,7 +11594,7 @@ var DrawingCanvas = (0, import_react44.memo)(function DrawingCanvas2({
       y: (clientY - rect.top) / scale
     };
   }, [scale]);
-  const handleStart = (0, import_react44.useCallback)((e) => {
+  const handleStart = (0, import_react46.useCallback)((e) => {
     if (!isActive) return;
     const point = getPoint(e);
     if (point) {
@@ -10937,14 +11602,14 @@ var DrawingCanvas = (0, import_react44.memo)(function DrawingCanvas2({
       setCurrentPath([point]);
     }
   }, [isActive, getPoint]);
-  const handleMove = (0, import_react44.useCallback)((e) => {
+  const handleMove = (0, import_react46.useCallback)((e) => {
     if (!isDrawing || !isActive) return;
     const point = getPoint(e);
     if (point) {
       setCurrentPath((prev) => [...prev, point]);
     }
   }, [isDrawing, isActive, getPoint]);
-  const handleEnd = (0, import_react44.useCallback)(() => {
+  const handleEnd = (0, import_react46.useCallback)(() => {
     if (!isDrawing) return;
     setIsDrawing(false);
     if (currentPath.length >= 2) {
@@ -10953,7 +11618,7 @@ var DrawingCanvas = (0, import_react44.memo)(function DrawingCanvas2({
     }
     setCurrentPath([]);
   }, [isDrawing, currentPath, onDrawingComplete]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "svg",
     {
       ref: svgRef,
@@ -10973,7 +11638,7 @@ var DrawingCanvas = (0, import_react44.memo)(function DrawingCanvas2({
       onTouchStart: handleStart,
       onTouchMove: handleMove,
       onTouchEnd: handleEnd,
-      children: isDrawing && currentPath.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: isDrawing && currentPath.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "path",
         {
           d: pointsToSvgPath(currentPath),
@@ -10990,10 +11655,10 @@ var DrawingCanvas = (0, import_react44.memo)(function DrawingCanvas2({
 });
 
 // src/components/Annotations/ShapeRenderer.tsx
-var import_react45 = require("react");
+var import_react47 = require("react");
 init_utils();
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var ShapeRenderer = (0, import_react45.memo)(function ShapeRenderer2({
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var ShapeRenderer = (0, import_react47.memo)(function ShapeRenderer2({
   shape,
   scale,
   isSelected,
@@ -11003,18 +11668,18 @@ var ShapeRenderer = (0, import_react45.memo)(function ShapeRenderer2({
   onDelete: _onDelete,
   className
 }) {
-  const [_isDragging, setIsDragging] = (0, import_react45.useState)(false);
-  const [_isResizing, setIsResizing] = (0, import_react45.useState)(false);
-  const [activeHandle, setActiveHandle] = (0, import_react45.useState)(null);
-  const startPosRef = (0, import_react45.useRef)({ x: 0, y: 0 });
-  const startShapeRef = (0, import_react45.useRef)({ x: 0, y: 0, width: 0, height: 0 });
+  const [_isDragging, setIsDragging] = (0, import_react47.useState)(false);
+  const [_isResizing, setIsResizing] = (0, import_react47.useState)(false);
+  const [activeHandle, setActiveHandle] = (0, import_react47.useState)(null);
+  const startPosRef = (0, import_react47.useRef)({ x: 0, y: 0 });
+  const startShapeRef = (0, import_react47.useRef)({ 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 = (0, import_react45.useCallback)(() => {
+  const getResizeHandles = (0, import_react47.useCallback)(() => {
     const handleSize = 8;
     const half = handleSize / 2;
     return [
@@ -11028,7 +11693,7 @@ var ShapeRenderer = (0, import_react45.memo)(function ShapeRenderer2({
       { position: "w", cursor: "ew-resize", x: scaledX - half, y: scaledY + scaledHeight / 2 - half }
     ];
   }, [scaledX, scaledY, scaledWidth, scaledHeight]);
-  const handleMouseDown = (0, import_react45.useCallback)((e, handle) => {
+  const handleMouseDown = (0, import_react47.useCallback)((e, handle) => {
     e.stopPropagation();
     onSelect?.();
     if (!isEditing) return;
@@ -11104,7 +11769,7 @@ var ShapeRenderer = (0, import_react45.memo)(function ShapeRenderer2({
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
   }, [isEditing, x, y, width, height, scale, onSelect, onUpdate]);
-  const renderShape2 = (0, import_react45.useCallback)(() => {
+  const renderShape2 = (0, import_react47.useCallback)(() => {
     const commonProps = {
       stroke: color,
       strokeWidth: scaledStroke,
@@ -11116,7 +11781,7 @@ var ShapeRenderer = (0, import_react45.memo)(function ShapeRenderer2({
     };
     switch (shapeType) {
       case "rect":
-        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "rect",
           {
             x: scaledX,
@@ -11127,7 +11792,7 @@ var ShapeRenderer = (0, import_react45.memo)(function ShapeRenderer2({
           }
         );
       case "circle":
-        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "ellipse",
           {
             cx: scaledX + scaledWidth / 2,
@@ -11138,7 +11803,7 @@ var ShapeRenderer = (0, import_react45.memo)(function ShapeRenderer2({
           }
         );
       case "line":
-        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "line",
           {
             x1: scaledX,
@@ -11158,22 +11823,22 @@ var ShapeRenderer = (0, import_react45.memo)(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__ */ (0, import_jsx_runtime31.jsxs)("g", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("line", { x1: scaledX, y1: scaledY, x2: endX, y2: endY, ...commonProps }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("line", { x1: endX, y1: endY, x2: arrow1X, y2: arrow1Y, ...commonProps }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("line", { x1: endX, y1: endY, x2: arrow2X, y2: arrow2Y, ...commonProps })
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: scaledX, y1: scaledY, x2: endX, y2: endY, ...commonProps }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: endX, y1: endY, x2: arrow1X, y2: arrow1Y, ...commonProps }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: endX, y1: endY, x2: arrow2X, y2: arrow2Y, ...commonProps })
         ] });
       default:
         return null;
     }
   }, [shapeType, scaledX, scaledY, scaledWidth, scaledHeight, color, scaledStroke, isSelected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "g",
     {
       className: cn("shape-renderer", className),
       onMouseDown: (e) => handleMouseDown(e),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "rect",
           {
             x: scaledX - 5,
@@ -11186,7 +11851,7 @@ var ShapeRenderer = (0, import_react45.memo)(function ShapeRenderer2({
           }
         ),
         renderShape2(),
-        isSelected && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "rect",
           {
             x: scaledX - 2,
@@ -11199,7 +11864,7 @@ var ShapeRenderer = (0, import_react45.memo)(function ShapeRenderer2({
             strokeDasharray: "4 2"
           }
         ),
-        isSelected && isEditing && getResizeHandles().map((handle) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        isSelected && isEditing && getResizeHandles().map((handle) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "rect",
           {
             x: handle.x,
@@ -11219,7 +11884,7 @@ var ShapeRenderer = (0, import_react45.memo)(function ShapeRenderer2({
     }
   );
 });
-var ShapePreview = (0, import_react45.memo)(function ShapePreview2({
+var ShapePreview = (0, import_react47.memo)(function ShapePreview2({
   shapeType,
   startPoint,
   endPoint,
@@ -11240,9 +11905,9 @@ var ShapePreview = (0, import_react45.memo)(function ShapePreview2({
   };
   switch (shapeType) {
     case "rect":
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("rect", { x, y, width, height, ...commonProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x, y, width, height, ...commonProps });
     case "circle":
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "ellipse",
         {
           cx: x + width / 2,
@@ -11253,7 +11918,7 @@ var ShapePreview = (0, import_react45.memo)(function ShapePreview2({
         }
       );
     case "line":
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "line",
         {
           x1: startPoint.x * scale,
@@ -11275,8 +11940,8 @@ var ShapePreview = (0, import_react45.memo)(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__ */ (0, import_jsx_runtime31.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "line",
           {
             x1: startPoint.x * scale,
@@ -11286,8 +11951,8 @@ var ShapePreview = (0, import_react45.memo)(function ShapePreview2({
             ...commonProps
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("line", { x1: endX, y1: endY, x2: arrow1X, y2: arrow1Y, ...commonProps }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("line", { x1: endX, y1: endY, x2: arrow2X, y2: arrow2Y, ...commonProps })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: endX, y1: endY, x2: arrow1X, y2: arrow1Y, ...commonProps }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: endX, y1: endY, x2: arrow2X, y2: arrow2Y, ...commonProps })
       ] });
     default:
       return null;
@@ -11295,10 +11960,10 @@ var ShapePreview = (0, import_react45.memo)(function ShapePreview2({
 });
 
 // src/components/Annotations/QuickNoteButton.tsx
-var import_react46 = require("react");
+var import_react48 = require("react");
 init_utils();
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var QuickNoteButton = (0, import_react46.memo)(function QuickNoteButton2({
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var QuickNoteButton = (0, import_react48.memo)(function QuickNoteButton2({
   pageNumber,
   scale,
   position = "top-right",
@@ -11306,8 +11971,8 @@ var QuickNoteButton = (0, import_react46.memo)(function QuickNoteButton2({
   className,
   visible = true
 }) {
-  const [isHovered, setIsHovered] = (0, import_react46.useState)(false);
-  const handleClick = (0, import_react46.useCallback)(
+  const [isHovered, setIsHovered] = (0, import_react48.useState)(false);
+  const handleClick = (0, import_react48.useCallback)(
     (e) => {
       e.stopPropagation();
       const x = position === "top-right" ? 80 : 80;
@@ -11319,7 +11984,7 @@ var QuickNoteButton = (0, import_react46.memo)(function QuickNoteButton2({
   if (!visible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "button",
     {
       onClick: handleClick,
@@ -11341,7 +12006,7 @@ var QuickNoteButton = (0, import_react46.memo)(function QuickNoteButton2({
       ),
       title: "Add quick note",
       "aria-label": "Add quick note",
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "svg",
         {
           className: "w-4 h-4 text-yellow-900",
@@ -11349,7 +12014,7 @@ var QuickNoteButton = (0, import_react46.memo)(function QuickNoteButton2({
           viewBox: "0 0 24 24",
           stroke: "currentColor",
           strokeWidth: 2,
-          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4v16m8-8H4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4v16m8-8H4" })
         }
       )
     }
@@ -11357,10 +12022,10 @@ var QuickNoteButton = (0, import_react46.memo)(function QuickNoteButton2({
 });
 
 // src/components/Annotations/QuickNotePopover.tsx
-var import_react47 = require("react");
+var import_react49 = require("react");
 init_utils();
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var QuickNotePopover = (0, import_react47.memo)(function QuickNotePopover2({
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var QuickNotePopover = (0, import_react49.memo)(function QuickNotePopover2({
   visible,
   position,
   initialContent = "",
@@ -11369,21 +12034,21 @@ var QuickNotePopover = (0, import_react47.memo)(function QuickNotePopover2({
   onCancel,
   className
 }) {
-  const [content, setContent] = (0, import_react47.useState)(initialContent);
-  const textareaRef = (0, import_react47.useRef)(null);
-  const popoverRef = (0, import_react47.useRef)(null);
-  const [adjustedPosition, setAdjustedPosition] = (0, import_react47.useState)(position);
-  (0, import_react47.useEffect)(() => {
+  const [content, setContent] = (0, import_react49.useState)(initialContent);
+  const textareaRef = (0, import_react49.useRef)(null);
+  const popoverRef = (0, import_react49.useRef)(null);
+  const [adjustedPosition, setAdjustedPosition] = (0, import_react49.useState)(position);
+  (0, import_react49.useEffect)(() => {
     if (visible && textareaRef.current) {
       textareaRef.current.focus();
     }
   }, [visible]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (visible) {
       setContent(initialContent);
     }
   }, [visible, initialContent]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (!visible || !popoverRef.current) return;
     const rect = popoverRef.current.getBoundingClientRect();
     const padding = 10;
@@ -11402,14 +12067,14 @@ var QuickNotePopover = (0, import_react47.memo)(function QuickNotePopover2({
     }
     setAdjustedPosition({ x, y });
   }, [position, visible]);
-  const handleSave = (0, import_react47.useCallback)(() => {
+  const handleSave = (0, import_react49.useCallback)(() => {
     if (content.trim()) {
       onSave(content.trim());
     } else {
       onCancel();
     }
   }, [content, onSave, onCancel]);
-  const handleKeyDown = (0, import_react47.useCallback)(
+  const handleKeyDown = (0, import_react49.useCallback)(
     (e) => {
       if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
         e.preventDefault();
@@ -11424,7 +12089,7 @@ var QuickNotePopover = (0, import_react47.memo)(function QuickNotePopover2({
   if (!visible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
     {
       ref: popoverRef,
@@ -11443,15 +12108,15 @@ var QuickNotePopover = (0, import_react47.memo)(function QuickNotePopover2({
         top: adjustedPosition.y
       },
       children: [
-        agentLastStatement && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("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__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-start gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("svg", { className: "w-3 h-3 mt-0.5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("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__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "line-clamp-2", children: [
+        agentLastStatement && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("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__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-start gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { className: "w-3 h-3 mt-0.5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("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__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "line-clamp-2", children: [
             "AI discussed: \u201C",
             agentLastStatement,
             "\u201D"
           ] })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "textarea",
           {
             ref: textareaRef,
@@ -11470,13 +12135,13 @@ var QuickNotePopover = (0, import_react47.memo)(function QuickNotePopover2({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between mt-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center justify-between mt-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
             navigator.platform.includes("Mac") ? "\u2318" : "Ctrl",
             "+Enter to save"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               "button",
               {
                 onClick: onCancel,
@@ -11489,7 +12154,7 @@ var QuickNotePopover = (0, import_react47.memo)(function QuickNotePopover2({
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               "button",
               {
                 onClick: handleSave,
@@ -11512,10 +12177,10 @@ var QuickNotePopover = (0, import_react47.memo)(function QuickNotePopover2({
 });
 
 // src/components/AskAbout/AskAboutOverlay.tsx
-var import_react48 = require("react");
+var import_react50 = require("react");
 init_utils();
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var AskAboutOverlay = (0, import_react48.memo)(function AskAboutOverlay2({
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var AskAboutOverlay = (0, import_react50.memo)(function AskAboutOverlay2({
   visible,
   progress,
   position,
@@ -11529,7 +12194,7 @@ var AskAboutOverlay = (0, import_react48.memo)(function AskAboutOverlay2({
   const radius = (size - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
   const strokeDashoffset = circumference * (1 - progress);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
       className: cn(
@@ -11542,7 +12207,7 @@ var AskAboutOverlay = (0, import_react48.memo)(function AskAboutOverlay2({
         top: position.y - size / 2
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
           "svg",
           {
             width: size,
@@ -11550,7 +12215,7 @@ var AskAboutOverlay = (0, import_react48.memo)(function AskAboutOverlay2({
             viewBox: `0 0 ${size} ${size}`,
             className: "transform -rotate-90",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 "circle",
                 {
                   cx: size / 2,
@@ -11561,7 +12226,7 @@ var AskAboutOverlay = (0, import_react48.memo)(function AskAboutOverlay2({
                   strokeWidth
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 "circle",
                 {
                   cx: size / 2,
@@ -11579,12 +12244,12 @@ var AskAboutOverlay = (0, import_react48.memo)(function AskAboutOverlay2({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "div",
           {
             className: "absolute inset-0 flex items-center justify-center",
             style: { color: progress >= 1 ? "#22c55e" : "white" },
-            children: progress >= 1 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            children: progress >= 1 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               "svg",
               {
                 width: "24",
@@ -11595,9 +12260,9 @@ var AskAboutOverlay = (0, import_react48.memo)(function AskAboutOverlay2({
                 strokeWidth: "2",
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
-                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("polyline", { points: "20 6 9 17 4 12" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("polyline", { points: "20 6 9 17 4 12" })
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
               "svg",
               {
                 width: "20",
@@ -11609,9 +12274,9 @@ var AskAboutOverlay = (0, import_react48.memo)(function AskAboutOverlay2({
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
                 ]
               }
             )
@@ -11623,10 +12288,10 @@ var AskAboutOverlay = (0, import_react48.memo)(function AskAboutOverlay2({
 });
 
 // src/components/AskAbout/AskAboutTrigger.tsx
-var import_react49 = require("react");
+var import_react51 = require("react");
 init_utils();
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var AskAboutTrigger = (0, import_react49.memo)(function AskAboutTrigger2({
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var AskAboutTrigger = (0, import_react51.memo)(function AskAboutTrigger2({
   position,
   onConfirm,
   onCancel,
@@ -11634,9 +12299,9 @@ var AskAboutTrigger = (0, import_react49.memo)(function AskAboutTrigger2({
   autoHideDelay = 5e3,
   className
 }) {
-  const [adjustedPosition, setAdjustedPosition] = (0, import_react49.useState)(position);
-  const triggerRef = (0, import_react49.useRef)(null);
-  (0, import_react49.useEffect)(() => {
+  const [adjustedPosition, setAdjustedPosition] = (0, import_react51.useState)(position);
+  const triggerRef = (0, import_react51.useRef)(null);
+  (0, import_react51.useEffect)(() => {
     if (!visible || !triggerRef.current) return;
     const rect = triggerRef.current.getBoundingClientRect();
     const padding = 10;
@@ -11652,19 +12317,19 @@ var AskAboutTrigger = (0, import_react49.memo)(function AskAboutTrigger2({
     }
     setAdjustedPosition({ x, y });
   }, [position, visible]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!visible || autoHideDelay === 0) return;
     const timer = setTimeout(onCancel, autoHideDelay);
     return () => clearTimeout(timer);
   }, [visible, autoHideDelay, onCancel]);
-  const handleConfirm = (0, import_react49.useCallback)(
+  const handleConfirm = (0, import_react51.useCallback)(
     (e) => {
       e.stopPropagation();
       onConfirm();
     },
     [onConfirm]
   );
-  const handleCancel = (0, import_react49.useCallback)(
+  const handleCancel = (0, import_react51.useCallback)(
     (e) => {
       e.stopPropagation();
       onCancel();
@@ -11674,7 +12339,7 @@ var AskAboutTrigger = (0, import_react49.memo)(function AskAboutTrigger2({
   if (!visible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       ref: triggerRef,
@@ -11693,8 +12358,8 @@ var AskAboutTrigger = (0, import_react49.memo)(function AskAboutTrigger2({
         transform: "translate(-50%, 0)"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-sm text-gray-600 dark:text-gray-300 px-2", children: "Ask about this?" }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-sm text-gray-600 dark:text-gray-300 px-2", children: "Ask about this?" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "button",
           {
             onClick: handleConfirm,
@@ -11707,7 +12372,7 @@ var AskAboutTrigger = (0, import_react49.memo)(function AskAboutTrigger2({
             children: "Ask"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "button",
           {
             onClick: handleCancel,
@@ -11727,11 +12392,11 @@ var AskAboutTrigger = (0, import_react49.memo)(function AskAboutTrigger2({
 });
 
 // src/components/Minimap/Minimap.tsx
-var import_react50 = require("react");
+var import_react52 = require("react");
 init_hooks();
 init_utils();
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var PageIndicator = (0, import_react50.memo)(function PageIndicator2({
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var PageIndicator = (0, import_react52.memo)(function PageIndicator2({
   pageNumber,
   status,
   isBookmarked,
@@ -11745,7 +12410,7 @@ var PageIndicator = (0, import_react50.memo)(function PageIndicator2({
     if (status === "visited") return "bg-green-400";
     return "bg-gray-200 dark:bg-gray-700";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "button",
     {
       onClick,
@@ -11761,13 +12426,13 @@ var PageIndicator = (0, import_react50.memo)(function PageIndicator2({
       title: `Page ${pageNumber}${isBookmarked ? " (bookmarked)" : ""}`,
       "aria-label": `Go to page ${pageNumber}`,
       children: [
-        isBookmarked && !compact && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute -top-1 -right-1 w-2 h-2 bg-yellow-500 rounded-full border border-white" }),
-        showNumber && !compact && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "absolute inset-0 flex items-center justify-center text-[8px] font-medium text-white", children: pageNumber })
+        isBookmarked && !compact && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "absolute -top-1 -right-1 w-2 h-2 bg-yellow-500 rounded-full border border-white" }),
+        showNumber && !compact && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "absolute inset-0 flex items-center justify-center text-[8px] font-medium text-white", children: pageNumber })
       ]
     }
   );
 });
-var Minimap = (0, import_react50.memo)(function Minimap2({
+var Minimap = (0, import_react52.memo)(function Minimap2({
   variant = "sidebar",
   floatingPosition = "right",
   maxHeight = 300,
@@ -11780,18 +12445,18 @@ var Minimap = (0, import_react50.memo)(function Minimap2({
   const currentPage = useViewerStore((s) => s.currentPage);
   const numPages = useViewerStore((s) => s.numPages);
   const goToPage = useViewerStore((s) => s.goToPage);
-  const bookmarkedPages = (0, import_react50.useMemo)(() => {
+  const bookmarkedPages = (0, import_react52.useMemo)(() => {
     return new Set(bookmarks.map((b) => b.pageNumber));
   }, [bookmarks]);
   const compact = numPages > 50;
-  const handlePageClick = (0, import_react50.useCallback)(
+  const handlePageClick = (0, import_react52.useCallback)(
     (pageNumber) => {
       goToPage(pageNumber);
       onPageClick?.(pageNumber);
     },
     [goToPage, onPageClick]
   );
-  const getPageStatus = (0, import_react50.useCallback)(
+  const getPageStatus = (0, import_react52.useCallback)(
     (pageNumber) => {
       if (pageNumber === currentPage) return "current";
       if (bookmarkedPages.has(pageNumber)) return "bookmarked";
@@ -11800,11 +12465,11 @@ var Minimap = (0, import_react50.memo)(function Minimap2({
     },
     [currentPage, visitedPages, bookmarkedPages]
   );
-  const pageIndicators = (0, import_react50.useMemo)(() => {
+  const pageIndicators = (0, import_react52.useMemo)(() => {
     const pages = [];
     for (let i = 1; i <= numPages; i++) {
       pages.push(
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           PageIndicator,
           {
             pageNumber: i,
@@ -11825,16 +12490,16 @@ var Minimap = (0, import_react50.memo)(function Minimap2({
   if (numPages === 0) {
     return null;
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mb-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: "Progress" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { children: [
+  const content = /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mb-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: "Progress" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { children: [
           progressPercentage,
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "div",
         {
           className: "h-full bg-green-500 rounded-full transition-all duration-300",
@@ -11842,7 +12507,7 @@ var Minimap = (0, import_react50.memo)(function Minimap2({
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "div",
       {
         className: cn(
@@ -11853,21 +12518,21 @@ var Minimap = (0, import_react50.memo)(function Minimap2({
         children: pageIndicators
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mt-3 pt-2 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-wrap gap-3 text-xs text-gray-500 dark:text-gray-400", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "w-2 h-2 rounded-sm bg-blue-500" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: "Current" })
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "mt-3 pt-2 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-wrap gap-3 text-xs text-gray-500 dark:text-gray-400", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "w-2 h-2 rounded-sm bg-blue-500" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: "Current" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "w-2 h-2 rounded-sm bg-green-400" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: "Visited" })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "w-2 h-2 rounded-sm bg-green-400" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: "Visited" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "w-2 h-2 rounded-sm bg-yellow-400" }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: "Bookmarked" })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "w-2 h-2 rounded-sm bg-yellow-400" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: "Bookmarked" })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mt-2 text-xs text-gray-500 dark:text-gray-400", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mt-2 text-xs text-gray-500 dark:text-gray-400", children: [
       visitedCount,
       " of ",
       numPages,
@@ -11875,7 +12540,7 @@ var Minimap = (0, import_react50.memo)(function Minimap2({
     ] })
   ] });
   if (variant === "floating") {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       "div",
       {
         className: cn(
@@ -11891,13 +12556,13 @@ var Minimap = (0, import_react50.memo)(function Minimap2({
         ),
         style: { maxHeight },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h3", { className: "text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2", children: "Reading Progress" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: "text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2", children: "Reading Progress" }),
           content
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "div",
     {
       className: cn(
@@ -11915,13 +12580,13 @@ var Minimap = (0, import_react50.memo)(function Minimap2({
 init_FloatingZoomControls2();
 
 // src/components/PDFThumbnailNav/PDFThumbnailNav.tsx
-var import_react51 = require("react");
+var import_react53 = require("react");
 init_hooks();
 init_utils();
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var DEFAULT_WIDTH = 612;
 var DEFAULT_HEIGHT = 792;
-var PDFThumbnailNav = (0, import_react51.memo)(function PDFThumbnailNav2({
+var PDFThumbnailNav = (0, import_react53.memo)(function PDFThumbnailNav2({
   thumbnailScale = 0.15,
   orientation = "vertical",
   maxVisible = 10,
@@ -11932,14 +12597,14 @@ var PDFThumbnailNav = (0, import_react51.memo)(function PDFThumbnailNav2({
 }) {
   const { document: document2, numPages, currentPage } = usePDFViewer();
   const { viewerStore } = usePDFViewerStores();
-  const containerRef = (0, import_react51.useRef)(null);
-  const [thumbnails, setThumbnails] = (0, import_react51.useState)(/* @__PURE__ */ new Map());
-  const [visibleRange, setVisibleRange] = (0, import_react51.useState)({ start: 1, end: maxVisible });
-  const renderQueueRef = (0, import_react51.useRef)(/* @__PURE__ */ new Set());
-  const pageCache = (0, import_react51.useRef)(/* @__PURE__ */ new Map());
+  const containerRef = (0, import_react53.useRef)(null);
+  const [thumbnails, setThumbnails] = (0, import_react53.useState)(/* @__PURE__ */ new Map());
+  const [visibleRange, setVisibleRange] = (0, import_react53.useState)({ start: 1, end: maxVisible });
+  const renderQueueRef = (0, import_react53.useRef)(/* @__PURE__ */ new Set());
+  const pageCache = (0, import_react53.useRef)(/* @__PURE__ */ new Map());
   const thumbnailWidth = Math.floor(DEFAULT_WIDTH * thumbnailScale);
   const thumbnailHeight = Math.floor(DEFAULT_HEIGHT * thumbnailScale);
-  const updateVisibleRange = (0, import_react51.useCallback)(() => {
+  const updateVisibleRange = (0, import_react53.useCallback)(() => {
     if (!containerRef.current || numPages === 0) return;
     const container = containerRef.current;
     const isHorizontal2 = orientation === "horizontal";
@@ -11951,7 +12616,7 @@ var PDFThumbnailNav = (0, import_react51.memo)(function PDFThumbnailNav2({
     const lastVisible = Math.min(numPages, firstVisible + visibleCount);
     setVisibleRange({ start: firstVisible, end: lastVisible });
   }, [numPages, orientation, thumbnailWidth, thumbnailHeight, gap]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     const handleScroll = () => {
@@ -11961,7 +12626,7 @@ var PDFThumbnailNav = (0, import_react51.memo)(function PDFThumbnailNav2({
     updateVisibleRange();
     return () => container.removeEventListener("scroll", handleScroll);
   }, [updateVisibleRange]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (!document2) {
       setThumbnails(/* @__PURE__ */ new Map());
       pageCache.current.clear();
@@ -12016,7 +12681,7 @@ var PDFThumbnailNav = (0, import_react51.memo)(function PDFThumbnailNav2({
     };
     renderThumbnails();
   }, [document2, visibleRange, thumbnailScale, thumbnails]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (!containerRef.current || numPages === 0) return;
     const container = containerRef.current;
     const isHorizontal2 = orientation === "horizontal";
@@ -12032,12 +12697,12 @@ var PDFThumbnailNav = (0, import_react51.memo)(function PDFThumbnailNav2({
       });
     }
   }, [currentPage, numPages, orientation, thumbnailWidth, thumbnailHeight, gap]);
-  const handleThumbnailClick = (0, import_react51.useCallback)((pageNum) => {
+  const handleThumbnailClick = (0, import_react53.useCallback)((pageNum) => {
     onThumbnailClick?.(pageNum);
     viewerStore.getState().requestScrollToPage(pageNum, "smooth");
   }, [onThumbnailClick, viewerStore]);
   if (!document2 || numPages === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "div",
       {
         className: cn(
@@ -12058,7 +12723,7 @@ var PDFThumbnailNav = (0, import_react51.memo)(function PDFThumbnailNav2({
   }
   const isHorizontal = orientation === "horizontal";
   const totalSize = numPages * ((isHorizontal ? thumbnailWidth : thumbnailHeight) + gap) - gap;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       ref: containerRef,
@@ -12072,7 +12737,7 @@ var PDFThumbnailNav = (0, import_react51.memo)(function PDFThumbnailNav2({
       style: {
         ...isHorizontal ? { overflowX: "auto", overflowY: "hidden" } : { overflowX: "hidden", overflowY: "auto" }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "div",
         {
           className: cn(
@@ -12089,7 +12754,7 @@ var PDFThumbnailNav = (0, import_react51.memo)(function PDFThumbnailNav2({
             const thumbnail = thumbnails.get(pageNum);
             const isActive = pageNum === currentPage;
             const isVisible = pageNum >= visibleRange.start && pageNum <= visibleRange.end;
-            return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
               "div",
               {
                 className: cn(
@@ -12114,7 +12779,7 @@ var PDFThumbnailNav = (0, import_react51.memo)(function PDFThumbnailNav2({
                   }
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                     "div",
                     {
                       className: "relative bg-white dark:bg-gray-700",
@@ -12122,7 +12787,7 @@ var PDFThumbnailNav = (0, import_react51.memo)(function PDFThumbnailNav2({
                         width: thumbnailWidth,
                         height: thumbnailHeight
                       },
-                      children: isVisible && thumbnail?.canvas ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                      children: isVisible && thumbnail?.canvas ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                         "img",
                         {
                           src: thumbnail.canvas.toDataURL(),
@@ -12130,10 +12795,10 @@ var PDFThumbnailNav = (0, import_react51.memo)(function PDFThumbnailNav2({
                           className: "w-full h-full object-contain",
                           loading: "lazy"
                         }
-                      ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "absolute inset-0 flex items-center justify-center text-gray-400 dark:text-gray-500 text-xs", children: pageNum })
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "absolute inset-0 flex items-center justify-center text-gray-400 dark:text-gray-500 text-xs", children: pageNum })
                     }
                   ),
-                  showPageNumbers && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  showPageNumbers && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                     "div",
                     {
                       className: cn(
@@ -12156,10 +12821,10 @@ var PDFThumbnailNav = (0, import_react51.memo)(function PDFThumbnailNav2({
 });
 
 // src/components/ErrorBoundary/PDFErrorBoundary.tsx
-var import_react52 = require("react");
+var import_react54 = require("react");
 init_utils();
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var PDFErrorBoundary = class extends import_react52.Component {
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var PDFErrorBoundary = class extends import_react54.Component {
   constructor(props) {
     super(props);
     this.handleReset = () => {
@@ -12186,7 +12851,7 @@ var PDFErrorBoundary = class extends import_react52.Component {
         return fallback;
       }
       if (showDefaultUI) {
-        return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           DefaultErrorUI,
           {
             error,
@@ -12205,7 +12870,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__ */ (0, import_jsx_runtime38.jsx)("svg", { className: "w-12 h-12 text-red-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  let icon = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { className: "w-12 h-12 text-red-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "path",
     {
       strokeLinecap: "round",
@@ -12217,7 +12882,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__ */ (0, import_jsx_runtime38.jsx)("svg", { className: "w-12 h-12 text-red-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    icon = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { className: "w-12 h-12 text-red-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "path",
       {
         strokeLinecap: "round",
@@ -12229,7 +12894,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__ */ (0, import_jsx_runtime38.jsx)("svg", { className: "w-12 h-12 text-red-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    icon = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { className: "w-12 h-12 text-red-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "path",
       {
         strokeLinecap: "round",
@@ -12239,7 +12904,7 @@ function DefaultErrorUI({ error, onReset, className }) {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "div",
     {
       className: cn(
@@ -12252,14 +12917,14 @@ function DefaultErrorUI({ error, onReset, className }) {
       ),
       children: [
         icon,
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { className: "mt-4 text-xl font-semibold text-gray-900 dark:text-gray-100", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400 max-w-md", children: description }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("details", { className: "mt-4 text-left max-w-md w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("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__ */ (0, import_jsx_runtime38.jsx)("pre", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded text-xs overflow-auto", children: error.stack || error.message })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h2", { className: "mt-4 text-xl font-semibold text-gray-900 dark:text-gray-100", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400 max-w-md", children: description }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("details", { className: "mt-4 text-left max-w-md w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("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__ */ (0, import_jsx_runtime40.jsx)("pre", { className: "mt-2 p-2 bg-gray-100 dark:bg-gray-800 rounded text-xs overflow-auto", children: error.stack || error.message })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mt-6 flex gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "mt-6 flex gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "button",
             {
               onClick: onReset,
@@ -12273,7 +12938,7 @@ function DefaultErrorUI({ error, onReset, className }) {
               children: "Try again"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "button",
             {
               onClick: () => window.location.reload(),
@@ -12293,7 +12958,7 @@ function DefaultErrorUI({ error, onReset, className }) {
   );
 }
 function withErrorBoundary({ component, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PDFErrorBoundary, { ...props, children: component });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PDFErrorBoundary, { ...props, children: component });
 }
 
 // src/components/index.ts
@@ -12314,6 +12979,7 @@ init_utils();
   AnnotationToolbar,
   AskAboutOverlay,
   AskAboutTrigger,
+  BookModeContainer,
   BookmarksPanel,
   CanvasLayer,
   ContinuousScrollContainer,
@@ -12392,6 +13058,7 @@ init_utils();
   isPDFJSInitialized,
   isPointInRect,
   loadDocument,
+  loadDocumentWithCallbacks,
   loadHighlights,
   loadStudentData,
   mergeAdjacentRects,
@@ -12400,6 +13067,7 @@ init_utils();
   pdfjsLib,
   percentToPDF,
   percentToViewport,
+  playPageTurnSound,
   quickViewer,
   removeRotation,
   saveHighlights,