@files-preview-app/preview-file 1.2.4 → 1.2.5

package/dist/index.js

@@ -1,4 +1,5 @@
 import DOMPurify2 from 'dompurify';
+import * as pdfjsLib from 'pdfjs-dist';
 import * as docx from 'docx-preview';
 import { unzipSync, strFromU8, unzip } from 'fflate';
 import * as XLSX from 'xlsx';
@@ -522,11 +523,21 @@ var ToolbarController = class {
   el;
   toolbarEl;
   actions = [];
+  pageInputEl = null;
+  pageLabelEl = null;
   constructor(container) {
     this.el = container;
     this.toolbarEl = createElement("div", { className: "fp-toolbar" });
     this.el.appendChild(this.toolbarEl);
   }
+  setPage(page, max) {
+    if (this.pageInputEl) {
+      this.pageInputEl.value = page.toString();
+    }
+    if (max !== void 0 && this.pageLabelEl) {
+      this.pageLabelEl.textContent = ` / ${max}`;
+    }
+  }
   update(actions) {
     this.actions = actions;
     this.render();
@@ -569,6 +580,7 @@ var ToolbarController = class {
         if (action.type === "separator") {
           groupEl.appendChild(createElement("div", { className: "fp-toolbar-separator" }));
         } else if (action.type === "page-nav") {
+          const max = action.max ?? 1;
           const prevBtn = this.createButton(
             "prev",
             ICON_PAGE_PREV,
@@ -587,7 +599,6 @@ var ToolbarController = class {
             "Next Page",
             () => {
               const cur = parseInt(input.value, 10) || 1;
-              const max = action.max ?? 1;
               if (cur < max) {
                 input.value = (cur + 1).toString();
                 action.execute("next", cur + 1);
@@ -599,15 +610,18 @@ var ToolbarController = class {
             type: "number",
             value: (action.value ?? 1).toString(),
             min: "1",
-            max: (action.max ?? 1).toString()
+            max: max.toString()
           });
           input.addEventListener("change", () => {
-            const val = parseInt(input.value, 10);
-            if (!isNaN(val)) {
-              action.execute("go", val);
-            }
+            let val = parseInt(input.value, 10);
+            if (isNaN(val)) val = 1;
+            val = Math.max(1, Math.min(max, val));
+            input.value = val.toString();
+            action.execute("go", val);
           });
-          const label = createElement("span", { className: "fp-toolbar-label" }, ` / ${action.max ?? 1}`);
+          const label = createElement("span", { className: "fp-toolbar-label" }, ` / ${max}`);
+          this.pageInputEl = input;
+          this.pageLabelEl = label;
           groupEl.appendChild(prevBtn);
           groupEl.appendChild(input);
           groupEl.appendChild(label);
@@ -785,7 +799,13 @@ var FilePreviewViewer = class {
         buffer,
         options,
         signal,
-        emit: (event, payload) => this.eventEmitter.emit(event, payload)
+        emit: (event, payload) => {
+          if (event === "page-change" && payload && typeof payload.page === "number") {
+            const total = payload.total ?? payload.totalPages;
+            this.toolbar?.setPage(payload.page, total);
+          }
+          this.eventEmitter.emit(event, payload);
+        }
       });
       this.activeInstance = instance;
       this.hideLoading();
@@ -819,6 +839,7 @@ var FilePreviewViewer = class {
             if (thumbnails && thumbnails.length > 0 && this.thumbnailPanel) {
               this.thumbnailPanel.update(thumbnails, (index) => {
                 instance.goToPage?.(index + 1);
+                this.toolbar?.setPage(index + 1);
               });
               if (options.showThumbnails) {
                 this.thumbnailPanel.show();
@@ -944,9 +965,13 @@ var FilePreviewViewer = class {
       if (e.key === "ArrowRight" || e.key === "PageDown") {
         const cur = this.activeInstance.getCurrentPage?.() ?? 1;
         this.activeInstance.goToPage?.(cur + 1);
+        const nextCur = this.activeInstance.getCurrentPage?.() ?? cur + 1;
+        this.toolbar?.setPage(nextCur);
       } else if (e.key === "ArrowLeft" || e.key === "PageUp") {
         const cur = this.activeInstance.getCurrentPage?.() ?? 1;
         this.activeInstance.goToPage?.(Math.max(1, cur - 1));
+        const prevCur = this.activeInstance.getCurrentPage?.() ?? Math.max(1, cur - 1);
+        this.toolbar?.setPage(prevCur);
       } else if (e.key === "+" || e.key === "=") {
         this.activeInstance.zoomIn?.();
       } else if (e.key === "-" || e.key === "_") {
@@ -1212,30 +1237,62 @@ var CfbfReader = class {
     return result.subarray(0, targetSize);
   }
 };
-
-// ../plugins/pdf/dist/index.js
+if (typeof window !== "undefined" && pdfjsLib.GlobalWorkerOptions) {
+  if (!pdfjsLib.GlobalWorkerOptions.workerSrc) {
+    pdfjsLib.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjsLib.version || "4.10.38"}/build/pdf.worker.min.mjs`;
+  }
+}
 var PdfPlugin = class {
   id = "pdf";
-  name = "PDF Preview";
+  name = "PDF Document Preview";
   extensions = [".pdf"];
   mimeTypes = ["application/pdf"];
   weight = 100;
   supports(file) {
     const ext = file.metadata.extension?.toLowerCase();
     const mime = file.metadata.mimeType?.toLowerCase();
-    return ext === ".pdf" || mime === "application/pdf";
+    if (ext) return this.extensions.includes(ext);
+    return this.mimeTypes.includes(mime || "");
   }
   getToolbarActions(instance) {
+    const totalPages = instance.getPageCount?.() ?? 1;
+    const curPage = instance.getCurrentPage?.() ?? 1;
     return [
+      {
+        id: "thumbnails",
+        icon: "thumbnails",
+        label: "Page Thumbnails",
+        type: "button",
+        group: "navigation",
+        execute: () => instance.toggleThumbnails?.()
+      },
+      {
+        id: "page-nav",
+        icon: "",
+        label: "Page Navigation",
+        type: "page-nav",
+        group: "navigation",
+        value: curPage,
+        max: totalPages,
+        execute: (action, page) => {
+          const cur = instance.getCurrentPage?.() ?? 1;
+          const max = instance.getPageCount?.() ?? 1;
+          if (action === "prev") {
+            if (cur > 1) instance.goToPage?.(cur - 1);
+          } else if (action === "next") {
+            if (cur < max) instance.goToPage?.(cur + 1);
+          } else if (typeof page === "number") {
+            instance.goToPage?.(page);
+          }
+        }
+      },
       {
         id: "zoom-out",
         icon: "zoom-out",
         label: "Zoom Out",
         type: "button",
         group: "zoom",
-        execute: () => {
-          instance.zoomOut?.();
-        }
+        execute: () => instance.zoomOut?.()
       },
       {
         id: "zoom-in",
@@ -1243,9 +1300,7 @@ var PdfPlugin = class {
         label: "Zoom In",
         type: "button",
         group: "zoom",
-        execute: () => {
-          instance.zoomIn?.();
-        }
+        execute: () => instance.zoomIn?.()
       },
       {
         id: "fit-page",
@@ -1253,39 +1308,23 @@ var PdfPlugin = class {
         label: "Fit to Page",
         type: "button",
         group: "zoom",
-        execute: () => {
-          instance.fitToPage?.();
-        }
+        execute: () => instance.fitToPage?.()
       },
       {
         id: "rotate-cw",
         icon: "rotate-cw",
-        label: "Rotate",
+        label: "Rotate Clockwise",
         type: "button",
         group: "view",
-        execute: () => {
-          instance.rotateCW?.();
-        }
-      },
-      {
-        id: "page-nav",
-        icon: "page-nav",
-        label: "Page Navigation",
-        type: "page-nav",
-        group: "navigation",
-        execute: (page) => {
-          if (typeof page === "number") instance.goToPage?.(page);
-        }
+        execute: () => instance.rotateCW?.()
       },
       {
         id: "download",
         icon: "download",
-        label: "Download",
+        label: "Download PDF",
         type: "button",
         group: "actions",
-        execute: () => {
-          instance.download?.();
-        }
+        execute: () => instance.download?.()
       },
       {
         id: "print",
@@ -1293,99 +1332,213 @@ var PdfPlugin = class {
         label: "Print",
         type: "button",
         group: "actions",
-        execute: () => {
-          instance.print?.();
-        }
+        execute: () => instance.print?.()
       }
     ];
   }
   async render(ctx) {
-    const blob = new Blob([ctx.buffer], { type: "application/pdf" });
-    const url = URL.createObjectURL(blob);
-    const wrapper = document.createElement("div");
-    wrapper.style.width = "100%";
-    wrapper.style.height = "100%";
-    wrapper.style.overflow = "hidden";
-    wrapper.style.display = "flex";
-    wrapper.style.justifyContent = "center";
-    wrapper.style.alignItems = "center";
-    const iframe = document.createElement("iframe");
-    iframe.src = url;
-    iframe.style.width = "100%";
-    iframe.style.height = "100%";
-    iframe.style.border = "none";
-    wrapper.appendChild(iframe);
-    ctx.container.appendChild(wrapper);
+    const container = document.createElement("div");
+    container.className = "fp-pdf-container";
+    container.style.width = "100%";
+    container.style.height = "100%";
+    container.style.overflow = "auto";
+    container.style.display = "flex";
+    container.style.flexDirection = "column";
+    container.style.alignItems = "center";
+    container.style.padding = "24px 16px";
+    container.style.backgroundColor = "#0f172a";
+    container.style.boxSizing = "border-box";
+    container.style.position = "relative";
+    const pageCard = document.createElement("div");
+    pageCard.className = "fp-pdf-page-card";
+    pageCard.style.boxShadow = "0 10px 35px rgba(0, 0, 0, 0.5)";
+    pageCard.style.backgroundColor = "#ffffff";
+    pageCard.style.borderRadius = "4px";
+    pageCard.style.overflow = "hidden";
+    pageCard.style.lineHeight = "0";
+    pageCard.style.transition = "transform 0.15s ease";
+    pageCard.style.position = "relative";
+    const canvas = document.createElement("canvas");
+    pageCard.appendChild(canvas);
+    container.appendChild(pageCard);
+    const indicator = document.createElement("div");
+    indicator.className = "fp-pdf-page-indicator";
+    indicator.style.position = "sticky";
+    indicator.style.bottom = "16px";
+    indicator.style.marginTop = "16px";
+    indicator.style.backgroundColor = "rgba(15, 23, 42, 0.85)";
+    indicator.style.backdropFilter = "blur(8px)";
+    indicator.style.color = "#f8fafc";
+    indicator.style.fontSize = "12px";
+    indicator.style.fontWeight = "600";
+    indicator.style.padding = "5px 14px";
+    indicator.style.borderRadius = "20px";
+    indicator.style.border = "1px solid rgba(255, 255, 255, 0.15)";
+    indicator.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.3)";
+    indicator.style.zIndex = "10";
+    indicator.style.userSelect = "none";
+    indicator.style.pointerEvents = "none";
+    container.appendChild(indicator);
+    ctx.container.appendChild(container);
+    const loadingTask = pdfjsLib.getDocument({
+      data: new Uint8Array(ctx.buffer),
+      cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjsLib.version || "4.10.38"}/cmaps/`,
+      cMapPacked: true,
+      standardFontDataUrl: `https://unpkg.com/pdfjs-dist@${pdfjsLib.version || "4.10.38"}/standard_fonts/`
+    });
+    const pdfDoc = await loadingTask.promise;
+    const totalPages = Math.max(1, pdfDoc.numPages);
     let currentPage = 1;
-    let currentZoom = 1;
+    let zoomScale = 1;
     let rotation = 0;
+    let currentRenderTask = null;
+    const renderPage = async (pageNum) => {
+      if (currentRenderTask) {
+        try {
+          currentRenderTask.cancel();
+        } catch {
+        }
+        currentRenderTask = null;
+      }
+      currentPage = Math.max(1, Math.min(totalPages, pageNum));
+      indicator.textContent = `Page ${currentPage} of ${totalPages}`;
+      ctx.emit("page-change", { page: currentPage, total: totalPages });
+      const page = await pdfDoc.getPage(currentPage);
+      const containerWidth = container.clientWidth || 900;
+      const unscaledVp = page.getViewport({ scale: 1, rotation });
+      const baseScale = Math.min((containerWidth - 64) / unscaledVp.width, 1.6);
+      const effectiveScale = (baseScale > 0 ? baseScale : 1) * zoomScale;
+      const pixelRatio = window.devicePixelRatio || 1;
+      const viewport = page.getViewport({ scale: effectiveScale, rotation });
+      canvas.width = Math.floor(viewport.width * pixelRatio);
+      canvas.height = Math.floor(viewport.height * pixelRatio);
+      canvas.style.width = `${Math.floor(viewport.width)}px`;
+      canvas.style.height = `${Math.floor(viewport.height)}px`;
+      const canvasCtx = canvas.getContext("2d");
+      if (!canvasCtx) return;
+      canvasCtx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+      currentRenderTask = page.render({
+        canvasContext: canvasCtx,
+        viewport
+      });
+      try {
+        await currentRenderTask.promise;
+      } catch (err) {
+        if (err?.name !== "RenderingCancelledException") {
+          console.warn("[PdfPlugin] Page render warning:", err);
+        }
+      } finally {
+        currentRenderTask = null;
+      }
+    };
+    await renderPage(1);
     const cleanup = () => {
-      URL.revokeObjectURL(url);
-      wrapper.remove();
+      if (currentRenderTask) {
+        try {
+          currentRenderTask.cancel();
+        } catch {
+        }
+      }
+      try {
+        pdfDoc.destroy();
+      } catch {
+      }
+      container.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
-    return {
+    const instance = {
       destroy: cleanup,
       zoomIn: () => {
-        currentZoom += 0.1;
-        iframe.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+        zoomScale = Math.min(3.5, zoomScale + 0.2);
+        renderPage(currentPage);
       },
       zoomOut: () => {
-        currentZoom = Math.max(0.2, currentZoom - 0.1);
-        iframe.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+        zoomScale = Math.max(0.3, zoomScale - 0.2);
+        renderPage(currentPage);
       },
-      getZoom: () => currentZoom,
+      getZoom: () => zoomScale,
       setZoom: (level) => {
-        currentZoom = level;
-        iframe.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+        zoomScale = Math.max(0.3, Math.min(3.5, level));
+        renderPage(currentPage);
       },
       fitToPage: () => {
-        currentZoom = 1;
-        iframe.style.transform = `scale(1) rotate(${rotation}deg)`;
+        zoomScale = 1;
+        renderPage(currentPage);
       },
       rotateCW: () => {
         rotation = (rotation + 90) % 360;
-        iframe.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+        renderPage(currentPage);
       },
       rotateCCW: () => {
         rotation = (rotation - 90 + 360) % 360;
-        iframe.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+        renderPage(currentPage);
       },
       getRotation: () => rotation,
+      getPageCount: () => totalPages,
+      getCurrentPage: () => currentPage,
       goToPage: (page) => {
-        currentPage = page;
-        iframe.src = `${url}#page=${page}`;
+        renderPage(page);
       },
-      getCurrentPage: () => currentPage,
       download: () => {
+        const blob = new Blob([ctx.buffer], { type: "application/pdf" });
+        const url = URL.createObjectURL(blob);
         const a = document.createElement("a");
         a.href = url;
         a.download = ctx.metadata.name || "document.pdf";
         a.click();
+        URL.revokeObjectURL(url);
       },
       print: () => {
-        iframe.contentWindow?.print();
+        const blob = new Blob([ctx.buffer], { type: "application/pdf" });
+        const url = URL.createObjectURL(blob);
+        const hiddenIframe = document.createElement("iframe");
+        hiddenIframe.style.position = "fixed";
+        hiddenIframe.style.right = "0";
+        hiddenIframe.style.bottom = "0";
+        hiddenIframe.style.width = "0";
+        hiddenIframe.style.height = "0";
+        hiddenIframe.style.border = "0";
+        document.body.appendChild(hiddenIframe);
+        hiddenIframe.src = url;
+        hiddenIframe.onload = () => {
+          setTimeout(() => {
+            hiddenIframe.contentWindow?.print();
+            setTimeout(() => {
+              hiddenIframe.remove();
+              URL.revokeObjectURL(url);
+            }, 1e3);
+          }, 300);
+        };
       },
       getThumbnails: async () => {
-        return [
-          {
-            index: 1,
-            label: "Page 1",
-            render: async (canvas) => {
-              const context = canvas.getContext("2d");
-              if (context) {
-                context.fillStyle = "#fff";
-                context.fillRect(0, 0, canvas.width, canvas.height);
-                context.fillStyle = "#333";
-                context.font = "12px sans-serif";
-                context.fillText("PDF Preview", 10, 20);
+        const thumbnails = [];
+        const count = Math.min(totalPages, 50);
+        for (let i = 1; i <= count; i++) {
+          thumbnails.push({
+            index: i,
+            label: `Page ${i}`,
+            render: async (thumbCanvas) => {
+              try {
+                const p = await pdfDoc.getPage(i);
+                const baseVp = p.getViewport({ scale: 1 });
+                const thumbScale = (thumbCanvas.width || 120) / baseVp.width;
+                const thumbVp = p.getViewport({ scale: thumbScale });
+                thumbCanvas.height = Math.floor(thumbVp.height);
+                const tCtx = thumbCanvas.getContext("2d");
+                if (tCtx) {
+                  await p.render({ canvasContext: tCtx, viewport: thumbVp }).promise;
+                }
+              } catch (e) {
+                console.warn(`[PdfPlugin] Error generating thumbnail for page ${i}:`, e);
               }
             }
-          }
-        ];
+          });
+        }
+        return thumbnails;
       }
     };
+    return instance;
   }
 };
 function pdfPlugin() {
@@ -1712,7 +1865,31 @@ var DocxPlugin = class {
     return this.mimeTypes.includes(mime || "");
   }
   getToolbarActions(instance) {
-    return [
+    const totalPages = instance.getPageCount?.() ?? 1;
+    const actions = [];
+    if (totalPages > 1) {
+      actions.push({
+        id: "page-nav",
+        icon: "",
+        label: "Page Navigation",
+        type: "page-nav",
+        group: "navigation",
+        value: instance.getCurrentPage?.() ?? 1,
+        max: totalPages,
+        execute: (action, page) => {
+          const cur = instance.getCurrentPage?.() ?? 1;
+          const max = instance.getPageCount?.() ?? 1;
+          if (action === "prev") {
+            if (cur > 1) instance.goToPage?.(cur - 1);
+          } else if (action === "next") {
+            if (cur < max) instance.goToPage?.(cur + 1);
+          } else if (typeof page === "number") {
+            instance.goToPage?.(page);
+          }
+        }
+      });
+    }
+    actions.push(
       {
         id: "zoom-out",
         icon: "zoom-out",
@@ -1753,7 +1930,8 @@ var DocxPlugin = class {
         group: "actions",
         execute: () => instance.print?.()
       }
-    ];
+    );
+    return actions;
   }
   async render(ctx) {
     const wrapper = document.createElement("div");
@@ -1829,7 +2007,51 @@ var DocxPlugin = class {
         }
       }
     }
+    const sections = wrapper.querySelectorAll("section.docx");
+    const cards = wrapper.querySelectorAll(".fp-docx-page-card");
+    const pageElements = sections.length > 0 ? sections : cards;
+    const totalPages = Math.max(1, pageElements.length);
+    let currentPage = 1;
+    let indicator = null;
+    if (totalPages > 1) {
+      indicator = document.createElement("div");
+      indicator.className = "fp-docx-page-indicator";
+      indicator.style.position = "sticky";
+      indicator.style.bottom = "16px";
+      indicator.style.backgroundColor = "rgba(15, 23, 42, 0.85)";
+      indicator.style.backdropFilter = "blur(8px)";
+      indicator.style.color = "#f8fafc";
+      indicator.style.fontSize = "12px";
+      indicator.style.fontWeight = "600";
+      indicator.style.padding = "5px 14px";
+      indicator.style.borderRadius = "20px";
+      indicator.style.border = "1px solid rgba(255, 255, 255, 0.15)";
+      indicator.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.3)";
+      indicator.style.zIndex = "10";
+      indicator.style.userSelect = "none";
+      indicator.style.pointerEvents = "none";
+      indicator.style.textAlign = "center";
+      indicator.style.width = "fit-content";
+      indicator.style.margin = "16px auto 0";
+      ctx.container.appendChild(indicator);
+    }
+    const showPage = (pageNum) => {
+      currentPage = Math.max(1, Math.min(totalPages, pageNum));
+      if (pageElements.length > 1) {
+        pageElements.forEach((sec, idx) => {
+          sec.style.display = idx + 1 === currentPage ? "block" : "none";
+        });
+      }
+      if (indicator) {
+        indicator.textContent = `Page ${currentPage} of ${totalPages}`;
+      }
+      ctx.emit("page-change", { page: currentPage, total: totalPages });
+    };
+    if (totalPages > 1) {
+      showPage(1);
+    }
     const cleanup = () => {
+      indicator?.remove();
       for (const url of createdBlobUrls) {
         URL.revokeObjectURL(url);
       }
@@ -1840,6 +2062,11 @@ var DocxPlugin = class {
     ctx.signal.addEventListener("abort", cleanup);
     return {
       destroy: cleanup,
+      getPageCount: () => totalPages,
+      getCurrentPage: () => currentPage,
+      goToPage: (page) => {
+        showPage(page);
+      },
       zoomIn: () => {
         scale += 0.1;
         wrapper.style.transform = `scale(${scale})`;
@@ -2104,7 +2331,31 @@ var ExcelPlugin = class {
     return this.mimeTypes.includes(mime || "");
   }
   getToolbarActions(instance) {
-    return [
+    const totalSheets = instance.getPageCount?.() ?? 1;
+    const actions = [];
+    if (totalSheets > 1) {
+      actions.push({
+        id: "page-nav",
+        icon: "",
+        label: "Sheet Navigation",
+        type: "page-nav",
+        group: "navigation",
+        value: instance.getCurrentPage?.() ?? 1,
+        max: totalSheets,
+        execute: (action, sheet) => {
+          const cur = instance.getCurrentPage?.() ?? 1;
+          const max = instance.getPageCount?.() ?? 1;
+          if (action === "prev") {
+            if (cur > 1) instance.goToPage?.(cur - 1);
+          } else if (action === "next") {
+            if (cur < max) instance.goToPage?.(cur + 1);
+          } else if (typeof sheet === "number") {
+            instance.goToPage?.(sheet);
+          }
+        }
+      });
+    }
+    actions.push(
       {
         id: "zoom-out",
         icon: "zoom-out",
@@ -2125,16 +2376,6 @@ var ExcelPlugin = class {
           instance.zoomIn?.();
         }
       },
-      {
-        id: "page-nav",
-        icon: "page-nav",
-        label: "Sheet Navigation",
-        type: "page-nav",
-        group: "navigation",
-        execute: (sheet) => {
-          if (typeof sheet === "number") instance.goToPage?.(sheet);
-        }
-      },
       {
         id: "download",
         icon: "download",
@@ -2155,7 +2396,8 @@ var ExcelPlugin = class {
           instance.print?.();
         }
       }
-    ];
+    );
+    return actions;
   }
   async render(ctx) {
     const container = document.createElement("div");
@@ -2239,6 +2481,7 @@ var ExcelPlugin = class {
           b.style.fontWeight = "normal";
         }
       });
+      ctx.emit("page-change", { page: currentSheetIndex, total: sheetNames.length });
     };
     if (sheetNames.length > 0) {
       sheetNames.forEach((name, idx) => {
@@ -2488,7 +2731,31 @@ var CodePlugin = class {
     return false;
   }
   getToolbarActions(instance) {
-    return [
+    const totalPages = instance.getPageCount?.() ?? 1;
+    const actions = [];
+    if (totalPages > 1) {
+      actions.push({
+        id: "page-nav",
+        icon: "",
+        label: "Page Navigation",
+        type: "page-nav",
+        group: "navigation",
+        value: instance.getCurrentPage?.() ?? 1,
+        max: totalPages,
+        execute: (action, page) => {
+          const cur = instance.getCurrentPage?.() ?? 1;
+          const max = instance.getPageCount?.() ?? 1;
+          if (action === "prev") {
+            if (cur > 1) instance.goToPage?.(cur - 1);
+          } else if (action === "next") {
+            if (cur < max) instance.goToPage?.(cur + 1);
+          } else if (typeof page === "number") {
+            instance.goToPage?.(page);
+          }
+        }
+      });
+    }
+    actions.push(
       {
         id: "zoom-out",
         icon: "zoom-out",
@@ -2539,11 +2806,16 @@ var CodePlugin = class {
           instance.print?.();
         }
       }
-    ];
+    );
+    return actions;
   }
   async render(ctx) {
     const decoder = new TextDecoder("utf-8");
-    const text = decoder.decode(ctx.buffer);
+    const fullText = decoder.decode(ctx.buffer);
+    const pageSplitRegex = /(?:\f|\x0C|(?:\r?\n|^)\s*[-=_]{3,}\s*(?:PAGE|Page|page break|Page Break)[\s\d\w-]*[-=_]{3,}\s*(?:\r?\n|$))/i;
+    const rawPages = fullText.split(pageSplitRegex).map((p) => p.trim()).filter((p) => p.length > 0);
+    const totalPages = Math.max(1, rawPages.length);
+    let currentPage = 1;
     const container = document.createElement("div");
     container.style.width = "100%";
     container.style.height = "100%";
@@ -2562,25 +2834,66 @@ var CodePlugin = class {
     pre.style.wordBreak = "break-all";
     const code = document.createElement("code");
     const ext = (ctx.metadata.extension || "").replace(".", "");
-    try {
-      if (ext && hljs.getLanguage(ext)) {
-        code.innerHTML = hljs.highlight(text, { language: ext }).value;
-      } else {
-        code.innerHTML = hljs.highlightAuto(text).value;
+    const renderCodePage = (text) => {
+      try {
+        if (ext && hljs.getLanguage(ext)) {
+          code.innerHTML = hljs.highlight(text, { language: ext }).value;
+        } else {
+          code.innerHTML = hljs.highlightAuto(text).value;
+        }
+      } catch {
+        code.textContent = text;
       }
-    } catch {
-      code.textContent = text;
-    }
+    };
+    renderCodePage(rawPages[0] || fullText);
     pre.appendChild(code);
     container.appendChild(pre);
+    let indicator = null;
+    if (totalPages > 1) {
+      indicator = document.createElement("div");
+      indicator.className = "fp-code-page-indicator";
+      indicator.style.position = "sticky";
+      indicator.style.bottom = "16px";
+      indicator.style.backgroundColor = "rgba(15, 23, 42, 0.85)";
+      indicator.style.backdropFilter = "blur(8px)";
+      indicator.style.color = "#f8fafc";
+      indicator.style.fontSize = "12px";
+      indicator.style.fontWeight = "600";
+      indicator.style.padding = "5px 14px";
+      indicator.style.borderRadius = "20px";
+      indicator.style.border = "1px solid rgba(255, 255, 255, 0.15)";
+      indicator.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.3)";
+      indicator.style.zIndex = "10";
+      indicator.style.userSelect = "none";
+      indicator.style.pointerEvents = "none";
+      indicator.style.textAlign = "center";
+      indicator.style.width = "fit-content";
+      indicator.style.margin = "16px auto 0";
+      container.appendChild(indicator);
+    }
+    const showPage = (pageNum) => {
+      currentPage = Math.max(1, Math.min(totalPages, pageNum));
+      renderCodePage(rawPages[currentPage - 1] || fullText);
+      if (indicator) {
+        indicator.textContent = `Page ${currentPage} of ${totalPages}`;
+      }
+      ctx.emit("page-change", { page: currentPage, total: totalPages });
+    };
+    if (totalPages > 1) {
+      showPage(1);
+    }
     ctx.container.appendChild(container);
     const cleanup = () => {
+      indicator?.remove();
       container.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
     return {
       destroy: cleanup,
+      getPageCount: () => totalPages,
+      getCurrentPage: () => currentPage,
+      goToPage: (page) => showPage(page),
       zoomIn: () => {
         fontSize = Math.min(32, fontSize + 2);
         pre.style.fontSize = `${fontSize}px`;
@@ -2608,7 +2921,7 @@ var CodePlugin = class {
         window.print();
       },
       copy: () => {
-        navigator.clipboard?.writeText(text);
+        navigator.clipboard?.writeText(fullText);
       }
     };
   }
@@ -3430,7 +3743,31 @@ var RtfPlugin = class {
     return this.extensions.includes(ext || "") || this.mimeTypes.includes(mime || "");
   }
   getToolbarActions(instance) {
-    return [
+    const totalPages = instance.getPageCount?.() ?? 1;
+    const actions = [];
+    if (totalPages > 1) {
+      actions.push({
+        id: "page-nav",
+        icon: "",
+        label: "Page Navigation",
+        type: "page-nav",
+        group: "navigation",
+        value: instance.getCurrentPage?.() ?? 1,
+        max: totalPages,
+        execute: (action, page) => {
+          const cur = instance.getCurrentPage?.() ?? 1;
+          const max = instance.getPageCount?.() ?? 1;
+          if (action === "prev") {
+            if (cur > 1) instance.goToPage?.(cur - 1);
+          } else if (action === "next") {
+            if (cur < max) instance.goToPage?.(cur + 1);
+          } else if (typeof page === "number") {
+            instance.goToPage?.(page);
+          }
+        }
+      });
+    }
+    actions.push(
       {
         id: "zoom-out",
         icon: "zoom-out",
@@ -3471,7 +3808,8 @@ var RtfPlugin = class {
         group: "actions",
         execute: () => instance.print?.()
       }
-    ];
+    );
+    return actions;
   }
   async render(ctx) {
     const wrapper = document.createElement("div");
@@ -3490,28 +3828,82 @@ var RtfPlugin = class {
     ctx.container.style.backgroundColor = "#f1f5f9";
     ctx.container.appendChild(wrapper);
     let scale = 1;
+    let pageElements = [];
     try {
       if (typeof RTFJS.loggingEnabled === "function") {
         RTFJS.loggingEnabled(false);
       }
       const doc = new RTFJS.Document(ctx.buffer, {});
       const htmlElements = await doc.render();
-      for (const el of htmlElements) {
+      pageElements = htmlElements;
+      for (let i = 0; i < htmlElements.length; i++) {
+        const el = htmlElements[i];
+        el.style.display = i === 0 ? "block" : "none";
         wrapper.appendChild(el);
       }
     } catch (err) {
       console.warn("[RtfPlugin] RTF render error, fallback text:", err);
       const text = new TextDecoder("latin1").decode(ctx.buffer);
       const clean = text.replace(/\\par[d]?/g, "\n").replace(/\\[a-zA-Z0-9\-]+/g, "").replace(/[{}]/g, "");
-      wrapper.innerHTML = `<pre style="white-space: pre-wrap; font-family: serif; color: #333;">${clean}</pre>`;
+      const pre = document.createElement("pre");
+      pre.style.whiteSpace = "pre-wrap";
+      pre.style.fontFamily = "serif";
+      pre.style.color = "#333";
+      pre.textContent = clean;
+      wrapper.appendChild(pre);
+      pageElements = [pre];
+    }
+    const totalPages = Math.max(1, pageElements.length);
+    let currentPage = 1;
+    let indicator = null;
+    if (totalPages > 1) {
+      indicator = document.createElement("div");
+      indicator.className = "fp-rtf-page-indicator";
+      indicator.style.position = "sticky";
+      indicator.style.bottom = "16px";
+      indicator.style.backgroundColor = "rgba(15, 23, 42, 0.85)";
+      indicator.style.backdropFilter = "blur(8px)";
+      indicator.style.color = "#f8fafc";
+      indicator.style.fontSize = "12px";
+      indicator.style.fontWeight = "600";
+      indicator.style.padding = "5px 14px";
+      indicator.style.borderRadius = "20px";
+      indicator.style.border = "1px solid rgba(255, 255, 255, 0.15)";
+      indicator.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.3)";
+      indicator.style.zIndex = "10";
+      indicator.style.userSelect = "none";
+      indicator.style.pointerEvents = "none";
+      indicator.style.textAlign = "center";
+      indicator.style.width = "fit-content";
+      indicator.style.margin = "16px auto 0";
+      ctx.container.appendChild(indicator);
+    }
+    const showPage = (pageNum) => {
+      currentPage = Math.max(1, Math.min(totalPages, pageNum));
+      if (totalPages > 1) {
+        pageElements.forEach((el, idx) => {
+          el.style.display = idx + 1 === currentPage ? "block" : "none";
+        });
+      }
+      if (indicator) {
+        indicator.textContent = `Page ${currentPage} of ${totalPages}`;
+      }
+      ctx.emit("page-change", { page: currentPage, total: totalPages });
+    };
+    if (totalPages > 1) {
+      showPage(1);
     }
     const cleanup = () => {
+      indicator?.remove();
       wrapper.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
     return {
       destroy: cleanup,
+      getPageCount: () => totalPages,
+      getCurrentPage: () => currentPage,
+      goToPage: (page) => showPage(page),
       zoomIn: () => {
         scale += 0.1;
         wrapper.style.transform = `scale(${scale})`;
@@ -3699,41 +4091,41 @@ var OpenDocumentPlugin = class {
   }
   getToolbarActions(instance) {
     const isPresentation = instance.isPresentation;
+    const totalPages = instance.getPageCount?.() ?? 1;
     const actions = [];
-    if (isPresentation) {
-      actions.push(
-        {
+    if (isPresentation || totalPages > 1) {
+      if (isPresentation) {
+        actions.push({
           id: "thumbnails",
           icon: "thumbnails",
           label: "Slide Thumbnails",
           type: "button",
           group: "navigation",
           execute: () => instance.toggleThumbnails?.()
-        },
-        {
-          id: "page-nav",
-          icon: "",
-          label: "Slide Navigation",
-          type: "page-nav",
-          group: "navigation",
-          value: instance.getCurrentPage?.() ?? 1,
-          max: instance.getPageCount?.() ?? 1,
-          execute: (action, page) => {
-            if (action === "prev") {
-              const cur = instance.getCurrentPage?.() ?? 1;
-              if (cur > 1) instance.goToPage?.(cur - 1);
-            } else if (action === "next") {
-              const cur = instance.getCurrentPage?.() ?? 1;
-              const total = instance.getPageCount?.() ?? 1;
-              if (cur < total) instance.goToPage?.(cur + 1);
-            } else if (typeof page === "number") {
-              instance.goToPage?.(page);
-            } else if (typeof action === "number") {
-              instance.goToPage?.(action);
-            }
+        });
+      }
+      actions.push({
+        id: "page-nav",
+        icon: "",
+        label: isPresentation ? "Slide Navigation" : "Page Navigation",
+        type: "page-nav",
+        group: "navigation",
+        value: instance.getCurrentPage?.() ?? 1,
+        max: totalPages,
+        execute: (action, page) => {
+          const cur = instance.getCurrentPage?.() ?? 1;
+          const max = instance.getPageCount?.() ?? 1;
+          if (action === "prev") {
+            if (cur > 1) instance.goToPage?.(cur - 1);
+          } else if (action === "next") {
+            if (cur < max) instance.goToPage?.(cur + 1);
+          } else if (typeof page === "number") {
+            instance.goToPage?.(page);
+          } else if (typeof action === "number") {
+            instance.goToPage?.(action);
           }
         }
-      );
+      });
     }
     actions.push(
       {
@@ -4116,7 +4508,31 @@ var DocPlugin = class {
     return this.mimeTypes.includes(mime || "");
   }
   getToolbarActions(instance) {
-    return [
+    const totalPages = instance.getPageCount?.() ?? 1;
+    const actions = [];
+    if (totalPages > 1) {
+      actions.push({
+        id: "page-nav",
+        icon: "",
+        label: "Page Navigation",
+        type: "page-nav",
+        group: "navigation",
+        value: instance.getCurrentPage?.() ?? 1,
+        max: totalPages,
+        execute: (action, page) => {
+          const cur = instance.getCurrentPage?.() ?? 1;
+          const max = instance.getPageCount?.() ?? 1;
+          if (action === "prev") {
+            if (cur > 1) instance.goToPage?.(cur - 1);
+          } else if (action === "next") {
+            if (cur < max) instance.goToPage?.(cur + 1);
+          } else if (typeof page === "number") {
+            instance.goToPage?.(page);
+          }
+        }
+      });
+    }
+    actions.push(
       {
         id: "zoom-out",
         icon: "zoom-out",
@@ -4165,7 +4581,8 @@ var DocPlugin = class {
         group: "actions",
         execute: () => instance.print?.()
       }
-    ];
+    );
+    return actions;
   }
   async render(ctx) {
     const container = document.createElement("div");
@@ -4192,6 +4609,7 @@ var DocPlugin = class {
     ctx.container.appendChild(container);
     let scale = 1;
     let extractedRawText = "";
+    let isFallback = false;
     try {
       const cfbf = new CfbfReader(ctx.buffer);
       const wordDocStream = cfbf.readStream("WordDocument");
@@ -4205,26 +4623,89 @@ var DocPlugin = class {
       const tableStream = cfbf.readStream(tableName);
       const text = this.extractDocText(wordDocStream, tableStream);
       extractedRawText = text;
-      wrapper.innerHTML = this.formatDocToHtml(text, ctx.metadata.name || "Document");
     } catch (err) {
       console.warn("[DocPlugin] Binary parsing error, fallback text:", err);
       const fallback = this.heuristicTextExtraction(ctx.buffer);
       extractedRawText = fallback;
-      wrapper.innerHTML = `
-        <div style="border-bottom: 1px solid #e2e8f0; padding-bottom: 12px; margin-bottom: 24px;">
-          <h2 style="margin: 0 0 6px; font-size: 20px; color: #334155;">${ctx.metadata.name || "Word Document (.doc)"}</h2>
-          <span style="font-size: 12px; color: #64748b; background: #f1f5f9; padding: 2px 8px; border-radius: 4px;">Legacy Word 97-2003 Binary Preview</span>
-        </div>
-        ${this.formatDocToHtml(fallback, ctx.metadata.name || "Document")}
-      `;
+      isFallback = true;
+    }
+    const rawPages = this.splitIntoPages(extractedRawText);
+    const totalPages = Math.max(1, rawPages.length);
+    let currentPage = 1;
+    wrapper.innerHTML = "";
+    const pageCards = [];
+    for (let i = 0; i < totalPages; i++) {
+      const pageCard = document.createElement("div");
+      pageCard.className = "fp-doc-page-card";
+      pageCard.style.backgroundColor = "#ffffff";
+      pageCard.style.boxShadow = "0 2px 12px rgba(0,0,0,0.08)";
+      pageCard.style.borderRadius = "4px";
+      pageCard.style.padding = "56px 48px";
+      pageCard.style.minHeight = "100%";
+      pageCard.style.display = i === 0 ? "block" : "none";
+      if (isFallback && i === 0) {
+        pageCard.innerHTML = `
+          <div style="border-bottom: 1px solid #e2e8f0; padding-bottom: 12px; margin-bottom: 24px;">
+            <h2 style="margin: 0 0 6px; font-size: 20px; color: #334155;">${DOMPurify2.sanitize(ctx.metadata.name || "Word Document (.doc)")}</h2>
+            <span style="font-size: 12px; color: #64748b; background: #f1f5f9; padding: 2px 8px; border-radius: 4px;">Legacy Word 97-2003 Binary Preview</span>
+          </div>
+          ${this.formatDocToHtml(rawPages[i], ctx.metadata.name || "Document")}
+        `;
+      } else {
+        pageCard.innerHTML = this.formatDocToHtml(rawPages[i], ctx.metadata.name || "Document");
+      }
+      wrapper.appendChild(pageCard);
+      pageCards.push(pageCard);
+    }
+    let indicator = null;
+    if (totalPages > 1) {
+      indicator = document.createElement("div");
+      indicator.className = "fp-doc-page-indicator";
+      indicator.style.position = "sticky";
+      indicator.style.bottom = "16px";
+      indicator.style.backgroundColor = "rgba(15, 23, 42, 0.85)";
+      indicator.style.backdropFilter = "blur(8px)";
+      indicator.style.color = "#f8fafc";
+      indicator.style.fontSize = "12px";
+      indicator.style.fontWeight = "600";
+      indicator.style.padding = "5px 14px";
+      indicator.style.borderRadius = "20px";
+      indicator.style.border = "1px solid rgba(255, 255, 255, 0.15)";
+      indicator.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.3)";
+      indicator.style.zIndex = "10";
+      indicator.style.userSelect = "none";
+      indicator.style.pointerEvents = "none";
+      indicator.style.textAlign = "center";
+      indicator.style.width = "fit-content";
+      indicator.style.margin = "16px auto 0";
+      container.appendChild(indicator);
+    }
+    const showPage = (pageNum) => {
+      currentPage = Math.max(1, Math.min(totalPages, pageNum));
+      if (totalPages > 1) {
+        pageCards.forEach((card, idx) => {
+          card.style.display = idx + 1 === currentPage ? "block" : "none";
+        });
+      }
+      if (indicator) {
+        indicator.textContent = `Page ${currentPage} of ${totalPages}`;
+      }
+      ctx.emit("page-change", { page: currentPage, total: totalPages });
+    };
+    if (totalPages > 1) {
+      showPage(1);
     }
     const cleanup = () => {
+      indicator?.remove();
       container.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
     return {
       destroy: cleanup,
+      getPageCount: () => totalPages,
+      getCurrentPage: () => currentPage,
+      goToPage: (page) => showPage(page),
       zoomIn: () => {
         scale += 0.1;
         wrapper.style.transform = `scale(${scale})`;
@@ -4356,11 +4837,16 @@ var DocPlugin = class {
   heuristicTextExtraction(buffer) {
     return this.extractStringsFromBytes(new Uint8Array(buffer));
   }
+  splitIntoPages(text) {
+    if (!text) return [""];
+    const parts = text.split(/[\x0C\f]|\r?\n\s*[-=_]{3,}\s*(?:PAGE|Page|page break)[\s\d\w-]*[-=_]{3,}\s*\r?\n/i).map((p) => p.trim()).filter((p) => p.length > 0);
+    return parts.length > 0 ? parts : [text];
+  }
   /**
    * Format cleaned extracted text into attractive HTML paragraphs, headings, and lists
    */
   formatDocToHtml(text, filename) {
-    const lines = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").replace(/\x0B/g, "\n").replace(/\x0C/g, "\n\n").split("\n");
+    const lines = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").replace(/\x0B/g, "\n").split("\n");
     let html = "";
     let inList = false;
     for (const rawLine of lines) {