pdfjs-reader-core 0.2.7 → 0.2.9

package/dist/index.cjs

@@ -4777,7 +4777,7 @@ var init_ThumbnailPanel = __esm({
       className,
       thumbnailScale = 0.2
     }) {
-      const { document: document2, currentPage, numPages, goToPage, isLoading } = usePDFViewer();
+      const { document: document2, currentPage, numPages, goToPage } = usePDFViewer();
       const containerRef = (0, import_react18.useRef)(null);
       (0, import_react18.useEffect)(() => {
         const container = containerRef.current;
@@ -4794,10 +4794,7 @@ var init_ThumbnailPanel = __esm({
         [goToPage]
       );
       if (!document2) {
-        if (isLoading) {
-          return null;
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("thumbnail-panel p-4", className), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-sm text-gray-500", children: "No document loaded" }) });
+        return null;
       }
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "div",
@@ -5128,7 +5125,7 @@ var init_OutlinePanel = __esm({
     OutlinePanel = (0, import_react20.memo)(function OutlinePanel2({
       className
     }) {
-      const { document: document2, goToPage, isLoading: isDocumentLoading } = usePDFViewer();
+      const { document: document2, goToPage } = usePDFViewer();
       const [outline, setOutline] = (0, import_react20.useState)(null);
       const [isLoading, setIsLoading] = (0, import_react20.useState)(false);
       const [error, setError] = (0, import_react20.useState)(null);
@@ -5207,10 +5204,7 @@ var init_OutlinePanel = __esm({
         [goToPage]
       );
       if (!document2) {
-        if (isDocumentLoading) {
-          return null;
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("flex items-center justify-center p-4", className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "No document loaded" }) });
+        return null;
       }
       if (isLoading) {
         return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("flex items-center justify-center p-4", className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -7730,6 +7724,138 @@ var init_PDFPage2 = __esm({
   }
 });
 
+// src/components/PDFLoadingScreen/PDFLoadingScreen.tsx
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+var import_react33, import_jsx_runtime19, phaseMessages, PDFLoadingScreen;
+var init_PDFLoadingScreen = __esm({
+  "src/components/PDFLoadingScreen/PDFLoadingScreen.tsx"() {
+    "use strict";
+    import_react33 = require("react");
+    init_utils();
+    import_jsx_runtime19 = require("react/jsx-runtime");
+    phaseMessages = {
+      initializing: "Initializing...",
+      fetching: "Loading document...",
+      parsing: "Processing pages...",
+      rendering: "Preparing view..."
+    };
+    PDFLoadingScreen = (0, import_react33.memo)(function PDFLoadingScreen2({
+      progress,
+      bytesLoaded,
+      totalBytes,
+      phase = "fetching",
+      documentName,
+      className
+    }) {
+      const hasProgress = progress !== void 0 && progress >= 0;
+      const hasBytes = bytesLoaded !== void 0 && totalBytes !== void 0 && totalBytes > 0;
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        "div",
+        {
+          className: cn(
+            "pdf-loading-screen",
+            "flex flex-col items-center justify-center",
+            "w-full h-full min-h-[400px]",
+            "bg-slate-50 dark:bg-slate-800",
+            className
+          ),
+          role: "status",
+          "aria-live": "polite",
+          "aria-label": phaseMessages[phase],
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "pdf-loading-skeleton", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pdf-loading-icon", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                "svg",
+                {
+                  width: "48",
+                  height: "56",
+                  viewBox: "0 0 48 56",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: "pdf-document-icon",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      "path",
+                      {
+                        d: "M4 4C4 1.79086 5.79086 0 8 0H30L44 14V52C44 54.2091 42.2091 56 40 56H8C5.79086 56 4 54.2091 4 52V4Z",
+                        className: "fill-white dark:fill-slate-700"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      "path",
+                      {
+                        d: "M30 0L44 14H34C31.7909 14 30 12.2091 30 10V0Z",
+                        className: "fill-slate-200 dark:fill-slate-600"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "10", y: "22", width: "24", height: "3", rx: "1.5", className: "fill-slate-200 dark:fill-slate-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "10", y: "28", width: "20", height: "3", rx: "1.5", className: "fill-slate-200 dark:fill-slate-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "10", y: "34", width: "22", height: "3", rx: "1.5", className: "fill-slate-200 dark:fill-slate-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "10", y: "40", width: "16", height: "3", rx: "1.5", className: "fill-slate-200 dark:fill-slate-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      "path",
+                      {
+                        d: "M4 4C4 1.79086 5.79086 0 8 0H30L44 14V52C44 54.2091 42.2091 56 40 56H8C5.79086 56 4 54.2091 4 52V4Z",
+                        className: "stroke-slate-300 dark:stroke-slate-500",
+                        strokeWidth: "1",
+                        fill: "none"
+                      }
+                    )
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "pdf-skeleton-lines", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pdf-skeleton-line pdf-skeleton-line-1" }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pdf-skeleton-line pdf-skeleton-line-2" }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pdf-skeleton-line pdf-skeleton-line-3" })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "pdf-loading-info", children: [
+              documentName && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "pdf-loading-document-name", children: documentName }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "pdf-loading-message", children: phaseMessages[phase] }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "pdf-loading-progress-container", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pdf-loading-progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "pdf-loading-progress-fill",
+                      !hasProgress && "pdf-loading-progress-indeterminate"
+                    ),
+                    style: hasProgress ? { width: `${Math.min(100, progress)}%` } : void 0
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "pdf-loading-progress-details", children: [
+                  hasProgress && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "pdf-loading-progress-percent", children: [
+                    Math.round(progress),
+                    "%"
+                  ] }),
+                  hasBytes && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "pdf-loading-progress-bytes", children: [
+                    formatBytes(bytesLoaded),
+                    " / ",
+                    formatBytes(totalBytes)
+                  ] })
+                ] })
+              ] })
+            ] })
+          ]
+        }
+      );
+    });
+  }
+});
+
+// src/components/PDFLoadingScreen/index.ts
+var init_PDFLoadingScreen2 = __esm({
+  "src/components/PDFLoadingScreen/index.ts"() {
+    "use strict";
+    init_PDFLoadingScreen();
+  }
+});
+
 // src/components/SelectionToolbar/SelectionToolbar.tsx
 function calculatePosition(selection) {
   if (!selection || selection.rects.length === 0) {
@@ -7745,13 +7871,13 @@ function calculatePosition(selection) {
   const left = firstRect.left + firstRect.width / 2;
   return { top, left, visible: true };
 }
-var import_react33, import_jsx_runtime19, HIGHLIGHT_COLOR_BUTTONS, SelectionToolbar;
+var import_react34, import_jsx_runtime20, HIGHLIGHT_COLOR_BUTTONS, SelectionToolbar;
 var init_SelectionToolbar = __esm({
   "src/components/SelectionToolbar/SelectionToolbar.tsx"() {
     "use strict";
-    import_react33 = require("react");
+    import_react34 = require("react");
     init_utils();
-    import_jsx_runtime19 = require("react/jsx-runtime");
+    import_jsx_runtime20 = 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" },
@@ -7759,16 +7885,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_react33.memo)(function SelectionToolbar2({
+    SelectionToolbar = (0, import_react34.memo)(function SelectionToolbar2({
       selection,
       onCreateHighlight,
       onCopy,
       activeColor = "yellow",
       className
     }) {
-      const [position, setPosition] = (0, import_react33.useState)({ top: 0, left: 0, visible: false });
-      const toolbarRef = (0, import_react33.useRef)(null);
-      (0, import_react33.useEffect)(() => {
+      const [position, setPosition] = (0, import_react34.useState)({ top: 0, left: 0, visible: false });
+      const toolbarRef = (0, import_react34.useRef)(null);
+      (0, import_react34.useEffect)(() => {
         if (selection && selection.text && selection.rects.length > 0) {
           const newPosition = calculatePosition(selection);
           if (toolbarRef.current && newPosition.visible) {
@@ -7796,19 +7922,19 @@ var init_SelectionToolbar = __esm({
           setPosition({ top: 0, left: 0, visible: false });
         }
       }, [selection]);
-      const handleColorClick = (0, import_react33.useCallback)(
+      const handleColorClick = (0, import_react34.useCallback)(
         (color) => {
           onCreateHighlight(color);
         },
         [onCreateHighlight]
       );
-      const handleCopy = (0, import_react33.useCallback)(() => {
+      const handleCopy = (0, import_react34.useCallback)(() => {
         onCopy?.();
       }, [onCopy]);
       if (!position.visible || !selection?.text) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         "div",
         {
           ref: toolbarRef,
@@ -7832,7 +7958,7 @@ var init_SelectionToolbar = __esm({
             e.stopPropagation();
           },
           children: [
-            HIGHLIGHT_COLOR_BUTTONS.map((btn) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            HIGHLIGHT_COLOR_BUTTONS.map((btn) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "button",
               {
                 onClick: () => handleColorClick(btn.color),
@@ -7849,7 +7975,7 @@ var init_SelectionToolbar = __esm({
                 ),
                 title: `Highlight ${btn.color}`,
                 "aria-label": `Highlight with ${btn.color}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-4 h-4 text-gray-700", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                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)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -7861,8 +7987,8 @@ var init_SelectionToolbar = __esm({
               },
               btn.color
             )),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__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)(
               "button",
               {
                 onClick: handleCopy,
@@ -7874,7 +8000,7 @@ var init_SelectionToolbar = __esm({
                 ),
                 title: "Copy text",
                 "aria-label": "Copy selected text",
-                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                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)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -7914,13 +8040,13 @@ function calculatePopoverPosition(highlight, scale, pageElement) {
   const left = scaledLeft + scaledWidth / 2;
   return { top, left, visible: true };
 }
-var import_react34, import_jsx_runtime20, HIGHLIGHT_COLOR_OPTIONS, HighlightPopover;
+var import_react35, import_jsx_runtime21, HIGHLIGHT_COLOR_OPTIONS, HighlightPopover;
 var init_HighlightPopover = __esm({
   "src/components/HighlightPopover/HighlightPopover.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_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" },
@@ -7928,7 +8054,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_react34.memo)(function HighlightPopover2({
+    HighlightPopover = (0, import_react35.memo)(function HighlightPopover2({
       highlight,
       scale,
       pageElement,
@@ -7939,16 +8065,16 @@ var init_HighlightPopover = __esm({
       onClose,
       className
     }) {
-      const [isEditingComment, setIsEditingComment] = (0, import_react34.useState)(false);
-      const [comment, setComment] = (0, import_react34.useState)(highlight?.comment ?? "");
-      const [position, setPosition] = (0, import_react34.useState)({ top: 0, left: 0, visible: false });
-      const popoverRef = (0, import_react34.useRef)(null);
-      const textareaRef = (0, import_react34.useRef)(null);
-      (0, import_react34.useEffect)(() => {
+      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)(() => {
         setComment(highlight?.comment ?? "");
         setIsEditingComment(false);
       }, [highlight?.id, highlight?.comment]);
-      (0, import_react34.useEffect)(() => {
+      (0, import_react35.useEffect)(() => {
         if (highlight && pageElement) {
           const newPosition = calculatePopoverPosition(highlight, scale, pageElement);
           if (newPosition.visible && popoverRef.current) {
@@ -7978,12 +8104,12 @@ var init_HighlightPopover = __esm({
           setPosition({ top: 0, left: 0, visible: false });
         }
       }, [highlight, pageElement, scale, isEditingComment]);
-      (0, import_react34.useEffect)(() => {
+      (0, import_react35.useEffect)(() => {
         if (isEditingComment && textareaRef.current) {
           textareaRef.current.focus();
         }
       }, [isEditingComment]);
-      (0, import_react34.useEffect)(() => {
+      (0, import_react35.useEffect)(() => {
         function handleClickOutside(event) {
           if (popoverRef.current && !popoverRef.current.contains(event.target)) {
             onClose();
@@ -7994,7 +8120,7 @@ var init_HighlightPopover = __esm({
           return () => document.removeEventListener("mousedown", handleClickOutside);
         }
       }, [position.visible, onClose]);
-      (0, import_react34.useEffect)(() => {
+      (0, import_react35.useEffect)(() => {
         function handleKeyDown(event) {
           if (event.key === "Escape") {
             if (isEditingComment) {
@@ -8010,7 +8136,7 @@ var init_HighlightPopover = __esm({
           return () => document.removeEventListener("keydown", handleKeyDown);
         }
       }, [position.visible, isEditingComment, highlight?.comment, onClose]);
-      const handleColorClick = (0, import_react34.useCallback)(
+      const handleColorClick = (0, import_react35.useCallback)(
         (color) => {
           if (highlight) {
             onColorChange(highlight.id, color);
@@ -8018,19 +8144,19 @@ var init_HighlightPopover = __esm({
         },
         [highlight, onColorChange]
       );
-      const handleSaveComment = (0, import_react34.useCallback)(() => {
+      const handleSaveComment = (0, import_react35.useCallback)(() => {
         if (highlight) {
           onCommentChange(highlight.id, comment.trim());
           setIsEditingComment(false);
         }
       }, [highlight, comment, onCommentChange]);
-      const handleDeleteClick = (0, import_react34.useCallback)(() => {
+      const handleDeleteClick = (0, import_react35.useCallback)(() => {
         if (highlight) {
           onDelete(highlight.id);
           onClose();
         }
       }, [highlight, onDelete, onClose]);
-      const handleCopyClick = (0, import_react34.useCallback)(() => {
+      const handleCopyClick = (0, import_react35.useCallback)(() => {
         if (highlight?.text) {
           navigator.clipboard.writeText(highlight.text);
           onCopy?.(highlight.text);
@@ -8039,7 +8165,7 @@ var init_HighlightPopover = __esm({
       if (!highlight || !position.visible) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         "div",
         {
           ref: popoverRef,
@@ -8059,8 +8185,8 @@ var init_HighlightPopover = __esm({
             width: 280
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between p-2 border-b border-gray-200 dark:border-gray-700", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center gap-1", children: HIGHLIGHT_COLOR_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__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)(
                 "button",
                 {
                   onClick: () => handleColorClick(opt.color),
@@ -8078,7 +8204,7 @@ var init_HighlightPopover = __esm({
                 },
                 opt.color
               )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "button",
                 {
                   onClick: handleDeleteClick,
@@ -8090,7 +8216,7 @@ var init_HighlightPopover = __esm({
                   ),
                   title: "Delete highlight",
                   "aria-label": "Delete highlight",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { className: "w-4 h-4", 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", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -8102,8 +8228,8 @@ var init_HighlightPopover = __esm({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "p-2", children: isEditingComment ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__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)(
                 "textarea",
                 {
                   ref: textareaRef,
@@ -8122,8 +8248,8 @@ var init_HighlightPopover = __esm({
                   rows: 3
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex justify-end gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex justify-end gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     onClick: () => {
@@ -8139,7 +8265,7 @@ var init_HighlightPopover = __esm({
                     children: "Cancel"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "button",
                   {
                     onClick: handleSaveComment,
@@ -8153,14 +8279,14 @@ var init_HighlightPopover = __esm({
                   }
                 )
               ] })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "text-xs text-gray-500 dark:text-gray-400 line-clamp-2", children: [
+            ] }) : /* @__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: [
                 "\u201C",
                 highlight.text.slice(0, 100),
                 highlight.text.length > 100 ? "..." : "",
                 "\u201D"
               ] }),
-              highlight.comment ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              highlight.comment ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "button",
                 {
                   onClick: () => setIsEditingComment(true),
@@ -8173,7 +8299,7 @@ var init_HighlightPopover = __esm({
                   ),
                   children: highlight.comment
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "button",
                 {
                   onClick: () => setIsEditingComment(true),
@@ -8186,7 +8312,7 @@ var init_HighlightPopover = __esm({
                   children: "+ Add a note..."
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                 "button",
                 {
                   onClick: handleCopyClick,
@@ -8197,7 +8323,7 @@ var init_HighlightPopover = __esm({
                     "focus:outline-none focus:ring-2 focus:ring-blue-500"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    /* @__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)(
                       "path",
                       {
                         strokeLinecap: "round",
@@ -8227,19 +8353,20 @@ var init_HighlightPopover2 = __esm({
 });
 
 // src/components/PDFViewer/DocumentContainer.tsx
-var import_react35, import_jsx_runtime21, DocumentContainer;
+var import_react36, import_jsx_runtime22, DocumentContainer;
 var init_DocumentContainer = __esm({
   "src/components/PDFViewer/DocumentContainer.tsx"() {
     "use strict";
-    import_react35 = require("react");
+    import_react36 = require("react");
     init_PDFPage2();
+    init_PDFLoadingScreen2();
     init_hooks();
     init_useHighlights();
     init_SelectionToolbar2();
     init_HighlightPopover2();
     init_utils();
-    import_jsx_runtime21 = require("react/jsx-runtime");
-    DocumentContainer = (0, import_react35.memo)(function DocumentContainer2({
+    import_jsx_runtime22 = require("react/jsx-runtime");
+    DocumentContainer = (0, import_react36.memo)(function DocumentContainer2({
       className,
       enableTouchGestures = true
     }) {
@@ -8256,34 +8383,34 @@ var init_DocumentContainer = __esm({
       } = usePDFViewer();
       const scrollToPageRequest = useViewerStore((s) => s.scrollToPageRequest);
       const { viewerStore } = usePDFViewerStores();
-      const [currentPageObj, setCurrentPageObj] = (0, import_react35.useState)(null);
-      const [isLoadingPage, setIsLoadingPage] = (0, import_react35.useState)(false);
-      const containerRef = (0, import_react35.useRef)(null);
-      const documentRef = (0, import_react35.useRef)(null);
-      const baseScaleRef = (0, import_react35.useRef)(scale);
+      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 isTouchDevice = useIsTouchDevice();
       const { selection, clearSelection, copySelection } = useTextSelection();
-      const handlePinchZoom = (0, import_react35.useCallback)(
+      const handlePinchZoom = (0, import_react36.useCallback)(
         (pinchScale) => {
           const newScale = Math.max(0.25, Math.min(4, baseScaleRef.current * pinchScale));
           setScale(newScale);
         },
         [setScale]
       );
-      const handleSwipeLeft = (0, import_react35.useCallback)(() => {
+      const handleSwipeLeft = (0, import_react36.useCallback)(() => {
         nextPage();
       }, [nextPage]);
-      const handleSwipeRight = (0, import_react35.useCallback)(() => {
+      const handleSwipeRight = (0, import_react36.useCallback)(() => {
         previousPage();
       }, [previousPage]);
-      const handleDoubleTap = (0, import_react35.useCallback)(
+      const handleDoubleTap = (0, import_react36.useCallback)(
         (_position) => {
           const newScale = scale < 1.5 ? 2 : 1;
           setScale(newScale);
         },
         [scale, setScale]
       );
-      (0, import_react35.useEffect)(() => {
+      (0, import_react36.useEffect)(() => {
         baseScaleRef.current = scale;
       }, [scale]);
       const { ref: touchRef } = useTouchGestures({
@@ -8303,13 +8430,13 @@ var init_DocumentContainer = __esm({
         selectHighlight,
         activeColor
       } = useHighlights();
-      (0, import_react35.useEffect)(() => {
+      (0, import_react36.useEffect)(() => {
         if (document2 !== documentRef.current) {
           documentRef.current = document2;
           setCurrentPageObj(null);
         }
       }, [document2]);
-      (0, import_react35.useEffect)(() => {
+      (0, import_react36.useEffect)(() => {
         if (!document2) {
           setCurrentPageObj(null);
           return;
@@ -8345,10 +8472,10 @@ var init_DocumentContainer = __esm({
           cancelled = true;
         };
       }, [document2, currentPage, scrollToPageRequest, viewerStore]);
-      const getPageElement = (0, import_react35.useCallback)(() => {
+      const getPageElement = (0, import_react36.useCallback)(() => {
         return containerRef.current?.querySelector(`[data-page-number="${currentPage}"]`);
       }, [currentPage]);
-      const handleCreateHighlight = (0, import_react35.useCallback)(
+      const handleCreateHighlight = (0, import_react36.useCallback)(
         (color) => {
           if (!selection) return;
           const pageElement = getPageElement();
@@ -8358,25 +8485,25 @@ var init_DocumentContainer = __esm({
         },
         [selection, getPageElement, createHighlightFromSelection, scale, clearSelection]
       );
-      const handleCopySelection = (0, import_react35.useCallback)(() => {
+      const handleCopySelection = (0, import_react36.useCallback)(() => {
         copySelection();
       }, [copySelection]);
-      const handleColorChange = (0, import_react35.useCallback)(
+      const handleColorChange = (0, import_react36.useCallback)(
         (id, color) => {
           updateHighlight(id, { color });
         },
         [updateHighlight]
       );
-      const handleCommentChange = (0, import_react35.useCallback)(
+      const handleCommentChange = (0, import_react36.useCallback)(
         (id, comment) => {
           updateHighlight(id, { comment: comment || void 0 });
         },
         [updateHighlight]
       );
-      const handleClosePopover = (0, import_react35.useCallback)(() => {
+      const handleClosePopover = (0, import_react36.useCallback)(() => {
         selectHighlight(null);
       }, [selectHighlight]);
-      const setContainerRef = (0, import_react35.useCallback)(
+      const setContainerRef = (0, import_react36.useCallback)(
         (element) => {
           containerRef.current = element;
           touchRef(element);
@@ -8389,23 +8516,20 @@ var init_DocumentContainer = __esm({
         sepia: "bg-amber-50"
       };
       if (!document2) {
-        if (isLoading) {
-          return null;
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
             className: cn(
               "document-container",
-              "flex-1 flex items-center justify-center",
+              "flex-1",
               themeStyles[theme],
               className
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-gray-500 dark:text-gray-400", children: "No document loaded" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PDFLoadingScreen, { phase: isLoading ? "fetching" : "initializing" })
           }
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "div",
         {
           ref: setContainerRef,
@@ -8418,7 +8542,7 @@ var init_DocumentContainer = __esm({
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               PDFPage,
               {
                 pageNumber: currentPage,
@@ -8427,7 +8551,7 @@ var init_DocumentContainer = __esm({
                 rotation
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               SelectionToolbar,
               {
                 selection,
@@ -8436,7 +8560,7 @@ var init_DocumentContainer = __esm({
                 activeColor
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               HighlightPopover,
               {
                 highlight: selectedHighlight,
@@ -8448,7 +8572,7 @@ var init_DocumentContainer = __esm({
                 onClose: handleClosePopover
               }
             ),
-            isLoadingPage && !currentPageObj && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fixed bottom-4 right-4 px-3 py-2 bg-black/75 text-white text-sm rounded-lg", children: "Loading..." })
+            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..." })
           ]
         }
       );
@@ -8457,21 +8581,22 @@ var init_DocumentContainer = __esm({
 });
 
 // src/components/PDFViewer/VirtualizedDocumentContainer.tsx
-var import_react36, import_jsx_runtime22, DEFAULT_PAGE_WIDTH, DEFAULT_PAGE_HEIGHT, VirtualizedDocumentContainer;
+var import_react37, import_jsx_runtime23, DEFAULT_PAGE_WIDTH, DEFAULT_PAGE_HEIGHT, VirtualizedDocumentContainer;
 var init_VirtualizedDocumentContainer = __esm({
   "src/components/PDFViewer/VirtualizedDocumentContainer.tsx"() {
     "use strict";
-    import_react36 = require("react");
+    import_react37 = require("react");
     init_PDFPage2();
+    init_PDFLoadingScreen2();
     init_hooks();
     init_useHighlights();
     init_SelectionToolbar2();
     init_HighlightPopover2();
     init_utils();
-    import_jsx_runtime22 = require("react/jsx-runtime");
+    import_jsx_runtime23 = require("react/jsx-runtime");
     DEFAULT_PAGE_WIDTH = 612;
     DEFAULT_PAGE_HEIGHT = 792;
-    VirtualizedDocumentContainer = (0, import_react36.memo)(function VirtualizedDocumentContainer2({
+    VirtualizedDocumentContainer = (0, import_react37.memo)(function VirtualizedDocumentContainer2({
       overscan = 2,
       pageGap = 16,
       enableTouchGestures = true,
@@ -8492,17 +8617,17 @@ var init_VirtualizedDocumentContainer = __esm({
       } = usePDFViewer();
       const scrollToPageRequest = useViewerStore((s) => s.scrollToPageRequest);
       const { viewerStore } = usePDFViewerStores();
-      const containerRef = (0, import_react36.useRef)(null);
-      const scrollContainerRef = (0, import_react36.useRef)(null);
-      const documentRef = (0, import_react36.useRef)(null);
-      const pageCache = (0, import_react36.useRef)(/* @__PURE__ */ new Map());
-      const pageDimensionsCache = (0, import_react36.useRef)(/* @__PURE__ */ new Map());
-      const baseScaleRef = (0, import_react36.useRef)(scale);
+      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 isTouchDevice = useIsTouchDevice();
-      const [visiblePages, setVisiblePages] = (0, import_react36.useState)([1]);
-      const [pageObjects, setPageObjects] = (0, import_react36.useState)(/* @__PURE__ */ new Map());
-      const [totalHeight, setTotalHeight] = (0, import_react36.useState)(0);
-      const [pageInfos, setPageInfos] = (0, import_react36.useState)([]);
+      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 { selection, clearSelection, copySelection } = useTextSelection();
       const {
         createHighlightFromSelection,
@@ -8512,7 +8637,7 @@ var init_VirtualizedDocumentContainer = __esm({
         selectHighlight,
         activeColor
       } = useHighlights();
-      (0, import_react36.useEffect)(() => {
+      (0, import_react37.useEffect)(() => {
         if (document2 !== documentRef.current) {
           documentRef.current = document2;
           pageCache.current.clear();
@@ -8520,7 +8645,7 @@ var init_VirtualizedDocumentContainer = __esm({
           setPageObjects(/* @__PURE__ */ new Map());
         }
       }, [document2]);
-      (0, import_react36.useEffect)(() => {
+      (0, import_react37.useEffect)(() => {
         if (!document2 || numPages === 0) return;
         const calculatePageInfos = async () => {
           const infos = [];
@@ -8553,7 +8678,7 @@ var init_VirtualizedDocumentContainer = __esm({
         };
         calculatePageInfos();
       }, [document2, numPages, scale, rotation, pageGap]);
-      const updateVisiblePages = (0, import_react36.useCallback)(() => {
+      const updateVisiblePages = (0, import_react37.useCallback)(() => {
         if (!scrollContainerRef.current || pageInfos.length === 0) return;
         const container = scrollContainerRef.current;
         const scrollTop = container.scrollTop;
@@ -8585,7 +8710,7 @@ var init_VirtualizedDocumentContainer = __esm({
           goToPage(firstVisiblePage);
         }
       }, [pageInfos, overscan, currentPage, goToPage]);
-      (0, import_react36.useEffect)(() => {
+      (0, import_react37.useEffect)(() => {
         const container = scrollContainerRef.current;
         if (!container) return;
         const handleScroll = () => {
@@ -8595,7 +8720,7 @@ var init_VirtualizedDocumentContainer = __esm({
         updateVisiblePages();
         return () => container.removeEventListener("scroll", handleScroll);
       }, [updateVisiblePages]);
-      (0, import_react36.useEffect)(() => {
+      (0, import_react37.useEffect)(() => {
         if (!document2) return;
         const loadPages = async () => {
           const newPageObjects = new Map(pageObjects);
@@ -8628,7 +8753,7 @@ var init_VirtualizedDocumentContainer = __esm({
         };
         loadPages();
       }, [document2, visiblePages, pageObjects]);
-      (0, import_react36.useEffect)(() => {
+      (0, import_react37.useEffect)(() => {
         if (!scrollToPageRequest || !scrollContainerRef.current || pageInfos.length === 0) return;
         const { page, requestId, behavior } = scrollToPageRequest;
         const pageInfo = pageInfos.find((p) => p.pageNumber === page);
@@ -8666,7 +8791,7 @@ var init_VirtualizedDocumentContainer = __esm({
           handleScrollEnd();
         }
       }, [scrollToPageRequest, pageInfos, pageGap, viewerStore]);
-      (0, import_react36.useEffect)(() => {
+      (0, import_react37.useEffect)(() => {
         if (scrollToPageRequest) return;
         if (!scrollContainerRef.current || pageInfos.length === 0) return;
         const pageInfo = pageInfos.find((p) => p.pageNumber === currentPage);
@@ -8683,14 +8808,14 @@ var init_VirtualizedDocumentContainer = __esm({
           }
         }
       }, [currentPage, pageInfos, pageGap, scrollToPageRequest]);
-      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]
       );
-      (0, import_react36.useEffect)(() => {
+      (0, import_react37.useEffect)(() => {
         baseScaleRef.current = scale;
       }, [scale]);
       const { ref: touchRef } = useTouchGestures({
@@ -8699,20 +8824,20 @@ var init_VirtualizedDocumentContainer = __esm({
         onSwipeRight: previousPage,
         enabled: enableTouchGestures && isTouchDevice
       });
-      const setContainerRef = (0, import_react36.useCallback)(
+      const setContainerRef = (0, import_react37.useCallback)(
         (element) => {
           scrollContainerRef.current = element;
           touchRef(element);
         },
         [touchRef]
       );
-      const getPageElement = (0, import_react36.useCallback)(
+      const getPageElement = (0, import_react37.useCallback)(
         (pageNumber) => {
           return containerRef.current?.querySelector(`[data-page-number="${pageNumber}"]`);
         },
         []
       );
-      const handleCreateHighlight = (0, import_react36.useCallback)(
+      const handleCreateHighlight = (0, import_react37.useCallback)(
         (color) => {
           if (!selection) return;
           const pageElement = getPageElement(selection.pageNumber);
@@ -8722,13 +8847,13 @@ var init_VirtualizedDocumentContainer = __esm({
         },
         [selection, getPageElement, createHighlightFromSelection, scale, clearSelection]
       );
-      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 });
         },
@@ -8740,23 +8865,20 @@ var init_VirtualizedDocumentContainer = __esm({
         sepia: "bg-amber-50"
       };
       if (!document2) {
-        if (isLoading) {
-          return null;
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "div",
           {
             className: cn(
               "virtualized-document-container",
-              "flex-1 flex items-center justify-center",
+              "flex-1",
               themeStyles[theme],
               className
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-gray-500 dark:text-gray-400", children: "No document loaded" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PDFLoadingScreen, { phase: isLoading ? "fetching" : "initializing" })
           }
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
         "div",
         {
           ref: containerRef,
@@ -8767,7 +8889,7 @@ var init_VirtualizedDocumentContainer = __esm({
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               "div",
               {
                 ref: setContainerRef,
@@ -8776,7 +8898,7 @@ var init_VirtualizedDocumentContainer = __esm({
                   // Smooth scrolling on iOS
                   WebkitOverflowScrolling: "touch"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "div",
                   {
                     className: "relative mx-auto",
@@ -8788,7 +8910,7 @@ var init_VirtualizedDocumentContainer = __esm({
                       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_runtime22.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                         "div",
                         {
                           className: "absolute left-1/2 -translate-x-1/2",
@@ -8796,7 +8918,7 @@ var init_VirtualizedDocumentContainer = __esm({
                             top: info.top,
                             width: scaledWidth
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                             PDFPage,
                             {
                               pageNumber: info.pageNumber,
@@ -8813,7 +8935,7 @@ var init_VirtualizedDocumentContainer = __esm({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               SelectionToolbar,
               {
                 selection,
@@ -8822,7 +8944,7 @@ var init_VirtualizedDocumentContainer = __esm({
                 activeColor
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               HighlightPopover,
               {
                 highlight: selectedHighlight,
@@ -8842,15 +8964,15 @@ var init_VirtualizedDocumentContainer = __esm({
 });
 
 // src/components/PDFViewer/ContinuousScrollContainer.tsx
-var import_react37, import_jsx_runtime23, ContinuousScrollContainer;
+var import_react38, import_jsx_runtime24, ContinuousScrollContainer;
 var init_ContinuousScrollContainer = __esm({
   "src/components/PDFViewer/ContinuousScrollContainer.tsx"() {
     "use strict";
-    import_react37 = require("react");
+    import_react38 = require("react");
     init_VirtualizedDocumentContainer();
-    import_jsx_runtime23 = require("react/jsx-runtime");
-    ContinuousScrollContainer = (0, import_react37.memo)(function ContinuousScrollContainer2(props) {
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_jsx_runtime24 = require("react/jsx-runtime");
+    ContinuousScrollContainer = (0, import_react38.memo)(function ContinuousScrollContainer2(props) {
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         VirtualizedDocumentContainer,
         {
           overscan: 3,
@@ -8863,19 +8985,20 @@ var init_ContinuousScrollContainer = __esm({
 });
 
 // src/components/PDFViewer/DualPageContainer.tsx
-var import_react38, import_jsx_runtime24, DualPageContainer;
+var import_react39, import_jsx_runtime25, DualPageContainer;
 var init_DualPageContainer = __esm({
   "src/components/PDFViewer/DualPageContainer.tsx"() {
     "use strict";
-    import_react38 = require("react");
+    import_react39 = require("react");
     init_PDFPage2();
+    init_PDFLoadingScreen2();
     init_hooks();
     init_useHighlights();
     init_SelectionToolbar2();
     init_HighlightPopover2();
     init_utils();
-    import_jsx_runtime24 = require("react/jsx-runtime");
-    DualPageContainer = (0, import_react38.memo)(function DualPageContainer2({
+    import_jsx_runtime25 = require("react/jsx-runtime");
+    DualPageContainer = (0, import_react39.memo)(function DualPageContainer2({
       showCover = true,
       bookSpread = true,
       pageGap = 4,
@@ -8895,13 +9018,13 @@ var init_DualPageContainer = __esm({
       } = usePDFViewer();
       const scrollToPageRequest = useViewerStore((s) => s.scrollToPageRequest);
       const { viewerStore } = usePDFViewerStores();
-      const containerRef = (0, import_react38.useRef)(null);
-      const documentRef = (0, import_react38.useRef)(null);
-      const baseScaleRef = (0, import_react38.useRef)(scale);
+      const containerRef = (0, import_react39.useRef)(null);
+      const documentRef = (0, import_react39.useRef)(null);
+      const baseScaleRef = (0, import_react39.useRef)(scale);
       const isTouchDevice = useIsTouchDevice();
-      const [leftPage, setLeftPage] = (0, import_react38.useState)(null);
-      const [rightPage, setRightPage] = (0, import_react38.useState)(null);
-      const [isLoading, setIsLoading] = (0, import_react38.useState)(false);
+      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 { selection, clearSelection, copySelection } = useTextSelection();
       const {
         createHighlightFromSelection,
@@ -8911,7 +9034,7 @@ var init_DualPageContainer = __esm({
         selectHighlight,
         activeColor
       } = useHighlights();
-      const getSpreadPages = (0, import_react38.useCallback)(
+      const getSpreadPages = (0, import_react39.useCallback)(
         (page) => {
           if (showCover && page === 1) {
             return { left: null, right: 1 };
@@ -8955,14 +9078,14 @@ var init_DualPageContainer = __esm({
         },
         [showCover, bookSpread, numPages]
       );
-      (0, import_react38.useEffect)(() => {
+      (0, import_react39.useEffect)(() => {
         if (document2 !== documentRef.current) {
           documentRef.current = document2;
           setLeftPage(null);
           setRightPage(null);
         }
       }, [document2]);
-      (0, import_react38.useEffect)(() => {
+      (0, import_react39.useEffect)(() => {
         if (!document2) {
           setLeftPage(null);
           setRightPage(null);
@@ -9004,7 +9127,7 @@ var init_DualPageContainer = __esm({
           cancelled = true;
         };
       }, [document2, currentPage, getSpreadPages, scrollToPageRequest, viewerStore]);
-      const goToPreviousSpread = (0, import_react38.useCallback)(() => {
+      const goToPreviousSpread = (0, import_react39.useCallback)(() => {
         const spread2 = getSpreadPages(currentPage);
         const leftmostPage = spread2.left || spread2.right || currentPage;
         if (showCover && leftmostPage === 2) {
@@ -9016,21 +9139,21 @@ var init_DualPageContainer = __esm({
           goToPage(newPage);
         }
       }, [currentPage, showCover, getSpreadPages, goToPage]);
-      const goToNextSpread = (0, import_react38.useCallback)(() => {
+      const goToNextSpread = (0, import_react39.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_react38.useCallback)(
+      const handlePinchZoom = (0, import_react39.useCallback)(
         (pinchScale) => {
           const newScale = Math.max(0.25, Math.min(4, baseScaleRef.current * pinchScale));
           setScale(newScale);
         },
         [setScale]
       );
-      (0, import_react38.useEffect)(() => {
+      (0, import_react39.useEffect)(() => {
         baseScaleRef.current = scale;
       }, [scale]);
       const { ref: touchRef } = useTouchGestures({
@@ -9039,20 +9162,20 @@ var init_DualPageContainer = __esm({
         onSwipeRight: goToPreviousSpread,
         enabled: enableTouchGestures && isTouchDevice
       });
-      const setContainerRef = (0, import_react38.useCallback)(
+      const setContainerRef = (0, import_react39.useCallback)(
         (element) => {
           containerRef.current = element;
           touchRef(element);
         },
         [touchRef]
       );
-      const getPageElement = (0, import_react38.useCallback)(
+      const getPageElement = (0, import_react39.useCallback)(
         (pageNumber) => {
           return containerRef.current?.querySelector(`[data-page-number="${pageNumber}"]`);
         },
         []
       );
-      const handleCreateHighlight = (0, import_react38.useCallback)(
+      const handleCreateHighlight = (0, import_react39.useCallback)(
         (color) => {
           if (!selection) return;
           const pageElement = getPageElement(selection.pageNumber);
@@ -9062,13 +9185,13 @@ var init_DualPageContainer = __esm({
         },
         [selection, getPageElement, createHighlightFromSelection, scale, clearSelection]
       );
-      const handleColorChange = (0, import_react38.useCallback)(
+      const handleColorChange = (0, import_react39.useCallback)(
         (id, color) => {
           updateHighlight(id, { color });
         },
         [updateHighlight]
       );
-      const handleCommentChange = (0, import_react38.useCallback)(
+      const handleCommentChange = (0, import_react39.useCallback)(
         (id, comment) => {
           updateHighlight(id, { comment: comment || void 0 });
         },
@@ -9081,23 +9204,20 @@ var init_DualPageContainer = __esm({
       };
       const spread = getSpreadPages(currentPage);
       if (!document2) {
-        if (isDocumentLoading) {
-          return null;
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "div",
           {
             className: cn(
               "dual-page-container",
-              "flex-1 flex items-center justify-center",
+              "flex-1",
               themeStyles[theme],
               className
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-gray-500 dark:text-gray-400", children: "No document loaded" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PDFLoadingScreen, { phase: isDocumentLoading ? "fetching" : "initializing" })
           }
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
         "div",
         {
           ref: setContainerRef,
@@ -9110,13 +9230,13 @@ var init_DualPageContainer = __esm({
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
               "div",
               {
                 className: "flex items-center",
                 style: { gap: pageGap },
                 children: [
-                  spread.left && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  spread.left && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                     PDFPage,
                     {
                       pageNumber: spread.left,
@@ -9125,14 +9245,14 @@ var init_DualPageContainer = __esm({
                       rotation
                     }
                   ),
-                  spread.left && spread.right && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  spread.left && spread.right && /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime24.jsx)(
+                  spread.right && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                     PDFPage,
                     {
                       pageNumber: spread.right,
@@ -9141,7 +9261,7 @@ var init_DualPageContainer = __esm({
                       rotation
                     }
                   ),
-                  (!spread.left || !spread.right) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  (!spread.left || !spread.right) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                     "div",
                     {
                       className: "flex items-center justify-center",
@@ -9154,7 +9274,7 @@ var init_DualPageContainer = __esm({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               SelectionToolbar,
               {
                 selection,
@@ -9163,7 +9283,7 @@ var init_DualPageContainer = __esm({
                 activeColor
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               HighlightPopover,
               {
                 highlight: selectedHighlight,
@@ -9175,7 +9295,7 @@ var init_DualPageContainer = __esm({
                 onClose: () => selectHighlight(null)
               }
             ),
-            isLoading && /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime25.jsx)("div", { className: "fixed bottom-4 right-4 px-3 py-2 bg-black/75 text-white text-sm rounded-lg", children: "Loading..." })
           ]
         }
       );
@@ -9184,15 +9304,15 @@ var init_DualPageContainer = __esm({
 });
 
 // src/components/FloatingZoomControls/FloatingZoomControls.tsx
-var import_react39, import_jsx_runtime25, FloatingZoomControls;
+var import_react40, import_jsx_runtime26, FloatingZoomControls;
 var init_FloatingZoomControls = __esm({
   "src/components/FloatingZoomControls/FloatingZoomControls.tsx"() {
     "use strict";
-    import_react39 = require("react");
+    import_react40 = require("react");
     init_hooks();
     init_utils();
-    import_jsx_runtime25 = require("react/jsx-runtime");
-    FloatingZoomControls = (0, import_react39.memo)(function FloatingZoomControls2({
+    import_jsx_runtime26 = require("react/jsx-runtime");
+    FloatingZoomControls = (0, import_react40.memo)(function FloatingZoomControls2({
       position = "bottom-right",
       className,
       showFitToWidth = true,
@@ -9202,20 +9322,20 @@ var init_FloatingZoomControls = __esm({
       const { viewerStore } = usePDFViewerStores();
       const scale = useViewerStore((s) => s.scale);
       const document2 = useViewerStore((s) => s.document);
-      const handleZoomIn = (0, import_react39.useCallback)(() => {
+      const handleZoomIn = (0, import_react40.useCallback)(() => {
         const currentScale = viewerStore.getState().scale;
         const newScale = Math.min(4, currentScale + 0.05);
         viewerStore.getState().setScale(newScale);
       }, [viewerStore]);
-      const handleZoomOut = (0, import_react39.useCallback)(() => {
+      const handleZoomOut = (0, import_react40.useCallback)(() => {
         const currentScale = viewerStore.getState().scale;
         const newScale = Math.max(0.1, currentScale - 0.05);
         viewerStore.getState().setScale(newScale);
       }, [viewerStore]);
-      const handleFitToWidth = (0, import_react39.useCallback)(() => {
+      const handleFitToWidth = (0, import_react40.useCallback)(() => {
         viewerStore.getState().setScale(1);
       }, [viewerStore]);
-      const handleFitToPage = (0, import_react39.useCallback)(() => {
+      const handleFitToPage = (0, import_react40.useCallback)(() => {
         viewerStore.getState().setScale(0.75);
       }, [viewerStore]);
       if (!document2) return null;
@@ -9226,7 +9346,7 @@ var init_FloatingZoomControls = __esm({
         "top-left": "top-4 left-4"
       };
       const zoomPercentage = Math.round(scale * 100);
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         "div",
         {
           className: cn(
@@ -9238,7 +9358,7 @@ var init_FloatingZoomControls = __esm({
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "button",
               {
                 onClick: handleZoomOut,
@@ -9252,14 +9372,14 @@ var init_FloatingZoomControls = __esm({
                 disabled: scale <= 0.25,
                 title: "Zoom Out",
                 "aria-label": "Zoom Out",
-                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
+                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" }) })
               }
             ),
-            showZoomLevel && /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime26.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_runtime25.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "button",
               {
                 onClick: handleZoomIn,
@@ -9273,11 +9393,11 @@ var init_FloatingZoomControls = __esm({
                 disabled: scale >= 4,
                 title: "Zoom In",
                 "aria-label": "Zoom In",
-                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) })
+                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" }) })
               }
             ),
-            (showFitToWidth || showFitToPage) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-px h-6 bg-gray-200 dark:bg-gray-700 mx-1" }),
-            showFitToWidth && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            (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)(
               "button",
               {
                 onClick: handleFitToWidth,
@@ -9289,10 +9409,10 @@ var init_FloatingZoomControls = __esm({
                 ),
                 title: "Fit to Width",
                 "aria-label": "Fit to Width",
-                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime25.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_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" }) })
               }
             ),
-            showFitToPage && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            showFitToPage && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "button",
               {
                 onClick: handleFitToPage,
@@ -9304,7 +9424,7 @@ var init_FloatingZoomControls = __esm({
                 ),
                 title: "Fit to Page",
                 "aria-label": "Fit to Page",
-                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime25.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_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" }) })
               }
             )
           ]
@@ -9322,138 +9442,6 @@ var init_FloatingZoomControls2 = __esm({
   }
 });
 
-// src/components/PDFLoadingScreen/PDFLoadingScreen.tsx
-function formatBytes(bytes) {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-var import_react40, import_jsx_runtime26, phaseMessages, PDFLoadingScreen;
-var init_PDFLoadingScreen = __esm({
-  "src/components/PDFLoadingScreen/PDFLoadingScreen.tsx"() {
-    "use strict";
-    import_react40 = require("react");
-    init_utils();
-    import_jsx_runtime26 = require("react/jsx-runtime");
-    phaseMessages = {
-      initializing: "Initializing...",
-      fetching: "Loading document...",
-      parsing: "Processing pages...",
-      rendering: "Preparing view..."
-    };
-    PDFLoadingScreen = (0, import_react40.memo)(function PDFLoadingScreen2({
-      progress,
-      bytesLoaded,
-      totalBytes,
-      phase = "fetching",
-      documentName,
-      className
-    }) {
-      const hasProgress = progress !== void 0 && progress >= 0;
-      const hasBytes = bytesLoaded !== void 0 && totalBytes !== void 0 && totalBytes > 0;
-      return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-        "div",
-        {
-          className: cn(
-            "pdf-loading-screen",
-            "flex flex-col items-center justify-center",
-            "w-full h-full min-h-[400px]",
-            "bg-slate-50 dark:bg-slate-800",
-            className
-          ),
-          role: "status",
-          "aria-live": "polite",
-          "aria-label": phaseMessages[phase],
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "pdf-loading-skeleton", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pdf-loading-icon", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-                "svg",
-                {
-                  width: "48",
-                  height: "56",
-                  viewBox: "0 0 48 56",
-                  fill: "none",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  className: "pdf-document-icon",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                      "path",
-                      {
-                        d: "M4 4C4 1.79086 5.79086 0 8 0H30L44 14V52C44 54.2091 42.2091 56 40 56H8C5.79086 56 4 54.2091 4 52V4Z",
-                        className: "fill-white dark:fill-slate-700"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                      "path",
-                      {
-                        d: "M30 0L44 14H34C31.7909 14 30 12.2091 30 10V0Z",
-                        className: "fill-slate-200 dark:fill-slate-600"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("rect", { x: "10", y: "22", width: "24", height: "3", rx: "1.5", className: "fill-slate-200 dark:fill-slate-600" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("rect", { x: "10", y: "28", width: "20", height: "3", rx: "1.5", className: "fill-slate-200 dark:fill-slate-600" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("rect", { x: "10", y: "34", width: "22", height: "3", rx: "1.5", className: "fill-slate-200 dark:fill-slate-600" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("rect", { x: "10", y: "40", width: "16", height: "3", rx: "1.5", className: "fill-slate-200 dark:fill-slate-600" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                      "path",
-                      {
-                        d: "M4 4C4 1.79086 5.79086 0 8 0H30L44 14V52C44 54.2091 42.2091 56 40 56H8C5.79086 56 4 54.2091 4 52V4Z",
-                        className: "stroke-slate-300 dark:stroke-slate-500",
-                        strokeWidth: "1",
-                        fill: "none"
-                      }
-                    )
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "pdf-skeleton-lines", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pdf-skeleton-line pdf-skeleton-line-1" }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pdf-skeleton-line pdf-skeleton-line-2" }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pdf-skeleton-line pdf-skeleton-line-3" })
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "pdf-loading-info", children: [
-              documentName && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "pdf-loading-document-name", children: documentName }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "pdf-loading-message", children: phaseMessages[phase] }),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "pdf-loading-progress-container", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pdf-loading-progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                  "div",
-                  {
-                    className: cn(
-                      "pdf-loading-progress-fill",
-                      !hasProgress && "pdf-loading-progress-indeterminate"
-                    ),
-                    style: hasProgress ? { width: `${Math.min(100, progress)}%` } : void 0
-                  }
-                ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "pdf-loading-progress-details", children: [
-                  hasProgress && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "pdf-loading-progress-percent", children: [
-                    Math.round(progress),
-                    "%"
-                  ] }),
-                  hasBytes && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "pdf-loading-progress-bytes", children: [
-                    formatBytes(bytesLoaded),
-                    " / ",
-                    formatBytes(totalBytes)
-                  ] })
-                ] })
-              ] })
-            ] })
-          ]
-        }
-      );
-    });
-  }
-});
-
-// src/components/PDFLoadingScreen/index.ts
-var init_PDFLoadingScreen2 = __esm({
-  "src/components/PDFLoadingScreen/index.ts"() {
-    "use strict";
-    init_PDFLoadingScreen();
-  }
-});
-
 // src/components/PDFViewer/PDFViewerClient.tsx
 var PDFViewerClient_exports = {};
 __export(PDFViewerClient_exports, {
@@ -10018,12 +10006,13 @@ var init_PDFViewerClient = __esm({
           currentDoc.destroy();
           viewerStore.getState().setDocument(null);
         }
+        viewerStore.getState().setLoading(true, { phase: "initializing" });
+        viewerStore.getState().setError(null);
+        setLoadState("loading");
         const loadDoc = async () => {
           if (!mountedRef.current) return;
           try {
-            viewerStore.getState().setLoading(true, { phase: "fetching" });
-            viewerStore.getState().setError(null);
-            setLoadState("loading");
+            viewerStore.getState().setLoadingProgress({ phase: "fetching" });
             const { document: document2, numPages } = await loadDocument({
               src,
               workerSrc,