@files-preview-app/preview-file 1.3.0 → 1.3.2

package/dist/vue.js

@@ -2,6 +2,7 @@ import { defineComponent, ref, onMounted, watch, onBeforeUnmount, h } from 'vue'
 import DOMPurify6 from 'dompurify';
 import * as pdfjsLib from 'pdfjs-dist';
 import * as docx from 'docx-preview';
+import * as fflate from 'fflate';
 import { unzipSync, strFromU8, unzip } from 'fflate';
 import * as XLSX from 'xlsx';
 import hljs from 'highlight.js';
@@ -493,8 +494,7 @@ var ICON_FULLSCREEN = `<svg width="24" height="24" viewBox="0 0 24 24" fill="non
 var ICON_COPY = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
 var ICON_FAST_FORWARD = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 19 22 12 13 5 13 19"></polygon><polygon points="2 19 11 12 2 5 2 19"></polygon></svg>`;
 var ICON_REWIND = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 19 2 12 11 5 11 19"></polygon><polygon points="22 19 13 12 22 5 22 19"></polygon></svg>`;
-var ICON_SPEED = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>`;
-var ICON_EXTERNAL_WINDOW = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>`;
+var ICON_EXTERNAL_WINDOW = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"></rect><line x1="3" y1="8" x2="21" y2="8"></line><circle cx="6" cy="5.5" r="0.75" fill="currentColor"></circle><circle cx="8.5" cy="5.5" r="0.75" fill="currentColor"></circle><polyline points="14 13 18 13 18 17"></polyline><line x1="11" y1="20" x2="18" y2="13"></line></svg>`;
 var ICON_MAP = {
   "zoom-in": ICON_ZOOM_IN,
   "zoom-out": ICON_ZOOM_OUT,
@@ -521,28 +521,177 @@ var ICON_MAP = {
   "forward-10": ICON_FAST_FORWARD,
   "rewind": ICON_REWIND,
   "replay-10": ICON_REWIND,
-  "speed": ICON_SPEED,
   "open-window": ICON_EXTERNAL_WINDOW,
-  "external-window": ICON_EXTERNAL_WINDOW
+  "external-window": ICON_EXTERNAL_WINDOW,
+  "openWindow": ICON_EXTERNAL_WINDOW,
+  "openSeparateWindow": ICON_EXTERNAL_WINDOW
 };
 var ToolbarController = class {
   el;
   toolbarEl;
   actions = [];
+  config = {};
   pageInputEl = null;
   pageLabelEl = null;
-  constructor(container) {
+  prevPageBtn = null;
+  nextPageBtn = null;
+  constructor(container, config) {
     this.el = container;
+    if (config) this.config = { ...config };
     this.toolbarEl = createElement("div", { className: "fp-toolbar" });
     this.el.appendChild(this.toolbarEl);
   }
+  setConfig(config) {
+    this.config = { ...config };
+    this.render();
+  }
+  getConfig() {
+    return { ...this.config };
+  }
+  hideAction(actionId) {
+    this.config[actionId] = false;
+    if (actionId === "zoom-in" || actionId === "zoomIn") this.config.zoomIn = false;
+    if (actionId === "zoom-out" || actionId === "zoomOut") this.config.zoomOut = false;
+    if (actionId === "fit-page" || actionId === "fitPage" || actionId === "fitToPage" || actionId === "fit-width") {
+      this.config.fitPage = false;
+      this.config.fitToPage = false;
+      this.config.fitWidth = false;
+    }
+    if (actionId === "rotate-cw" || actionId === "rotate" || actionId === "rotateCW") this.config.rotate = false;
+    if (actionId === "fullscreen") this.config.fullscreen = false;
+    if (actionId === "download") this.config.download = false;
+    if (actionId === "print") this.config.print = false;
+    if (actionId === "open-window" || actionId === "openWindow" || actionId === "openSeparateWindow") {
+      this.config.openWindow = false;
+      this.config.openSeparateWindow = false;
+    }
+    if (actionId === "copy") this.config.copy = false;
+    if (actionId === "page-nav" || actionId === "pageNav" || actionId === "pagination") {
+      this.config.pageNav = false;
+      this.config.pagination = false;
+    }
+    this.render();
+  }
+  showAction(actionId) {
+    this.config[actionId] = true;
+    if (actionId === "zoom-in" || actionId === "zoomIn") this.config.zoomIn = true;
+    if (actionId === "zoom-out" || actionId === "zoomOut") this.config.zoomOut = true;
+    if (actionId === "fit-page" || actionId === "fitPage" || actionId === "fitToPage" || actionId === "fit-width") {
+      this.config.fitPage = true;
+      this.config.fitToPage = true;
+      this.config.fitWidth = true;
+    }
+    if (actionId === "rotate-cw" || actionId === "rotate" || actionId === "rotateCW") this.config.rotate = true;
+    if (actionId === "fullscreen") this.config.fullscreen = true;
+    if (actionId === "download") this.config.download = true;
+    if (actionId === "print") this.config.print = true;
+    if (actionId === "open-window" || actionId === "openWindow" || actionId === "openSeparateWindow") {
+      this.config.openWindow = true;
+      this.config.openSeparateWindow = true;
+    }
+    if (actionId === "copy") this.config.copy = true;
+    if (actionId === "page-nav" || actionId === "pageNav" || actionId === "pagination") {
+      this.config.pageNav = true;
+      this.config.pagination = true;
+    }
+    this.render();
+  }
+  normalizeActionId(actionId) {
+    if (actionId === "zoomIn") return "zoom-in";
+    if (actionId === "zoomOut") return "zoom-out";
+    if (actionId === "fitPage" || actionId === "fitToPage" || actionId === "fitWidth") return "fit-page";
+    if (actionId === "rotateCW") return "rotate-cw";
+    if (actionId === "rotateCCW") return "rotate-ccw";
+    if (actionId === "openWindow" || actionId === "openSeparateWindow") return "open-window";
+    if (actionId === "pageNav") return "page-nav";
+    return actionId;
+  }
+  enableAction(actionId) {
+    const norm = this.normalizeActionId(actionId);
+    const btn = this.toolbarEl.querySelector(`button[data-action-id="${actionId}"], button[data-action-id="${norm}"]`);
+    if (btn) {
+      btn.disabled = false;
+      btn.classList.remove("disabled");
+    }
+  }
+  disableAction(actionId) {
+    const norm = this.normalizeActionId(actionId);
+    const btn = this.toolbarEl.querySelector(`button[data-action-id="${actionId}"], button[data-action-id="${norm}"]`);
+    if (btn) {
+      btn.disabled = true;
+      btn.classList.add("disabled");
+    }
+  }
+  setActionActive(actionId, active) {
+    const norm = this.normalizeActionId(actionId);
+    const btn = this.toolbarEl.querySelector(`button[data-action-id="${actionId}"], button[data-action-id="${norm}"]`);
+    if (btn) {
+      if (active) {
+        btn.classList.add("active");
+      } else {
+        btn.classList.remove("active");
+      }
+    }
+  }
+  isActionEnabled(action) {
+    const c = this.config;
+    const id = action.id;
+    if (c[id] === false) return false;
+    if (id === "zoom-in" && (c.zoomIn === false || c["zoom-in"] === false)) return false;
+    if (id === "zoom-out" && (c.zoomOut === false || c["zoom-out"] === false)) return false;
+    if ((id === "fit-page" || id === "fit-width" || id === "fit-slide") && (c.fitPage === false || c.fitToPage === false || c.fitWidth === false || c["fit-page"] === false || c["fit-width"] === false)) {
+      return false;
+    }
+    if ((id === "rotate-cw" || id === "rotate-ccw" || id === "rotate") && (c.rotate === false || c.rotateCW === false || c.rotateCCW === false || c["rotate-cw"] === false)) {
+      return false;
+    }
+    if (id === "fullscreen" && c.fullscreen === false) return false;
+    if (id === "download" && c.download === false) return false;
+    if (id === "print" && c.print === false) return false;
+    if ((id === "open-window" || id === "external-window") && (c.openWindow === false || c.openSeparateWindow === false || c["open-window"] === false)) {
+      return false;
+    }
+    if (id === "copy" && c.copy === false) return false;
+    if (id === "thumbnails" && c.thumbnails === false) return false;
+    if (id === "page-nav" && (c.pageNav === false || c.pagination === false || c["page-nav"] === false)) {
+      return false;
+    }
+    if ((id === "prev" || id === "page-prev") && (c.prevPage === false || c.prev === false || c["prev"] === false || c.pageNav === false || c.pagination === false)) {
+      return false;
+    }
+    if ((id === "next" || id === "page-next") && (c.nextPage === false || c.next === false || c["next"] === false || c.pageNav === false || c.pagination === false)) {
+      return false;
+    }
+    if (id === "play" && c.play === false) return false;
+    if (id === "pause" && c.pause === false) return false;
+    if ((id === "fast-forward" || id === "forward-10") && (c.fastForward === false || c["fast-forward"] === false)) {
+      return false;
+    }
+    if ((id === "rewind" || id === "replay-10") && (c.rewind === false || c["rewind"] === false)) {
+      return false;
+    }
+    if (id === "speed" && c.speed === false) return false;
+    return true;
+  }
   setPage(page, max) {
     if (this.pageInputEl) {
       this.pageInputEl.value = page.toString();
+      if (max !== void 0) {
+        this.pageInputEl.max = max.toString();
+      }
     }
     if (max !== void 0 && this.pageLabelEl) {
       this.pageLabelEl.textContent = ` / ${max}`;
     }
+    const currentMax = max !== void 0 ? max : parseInt(this.pageInputEl?.max || "1", 10) || 1;
+    if (this.prevPageBtn) {
+      this.prevPageBtn.disabled = page <= 1;
+      this.prevPageBtn.style.opacity = page <= 1 ? "0.4" : "1";
+    }
+    if (this.nextPageBtn) {
+      this.nextPageBtn.disabled = page >= currentMax;
+      this.nextPageBtn.style.opacity = page >= currentMax ? "0.4" : "1";
+    }
   }
   update(actions) {
     this.actions = actions;
@@ -565,8 +714,9 @@ var ToolbarController = class {
       view: [],
       actions: []
     };
-    const hasPageNav = this.actions.some((a) => a.type === "page-nav");
-    const effectiveActions = hasPageNav ? this.actions.filter((a) => a.id !== "page-prev" && a.id !== "page-next" && a.id !== "prev" && a.id !== "next") : this.actions;
+    const enabledActions = this.actions.filter((a) => this.isActionEnabled(a));
+    const hasPageNav = enabledActions.some((a) => a.type === "page-nav");
+    const effectiveActions = hasPageNav ? enabledActions.filter((a) => a.id !== "page-prev" && a.id !== "page-next" && a.id !== "prev" && a.id !== "next") : enabledActions;
     for (const action of effectiveActions) {
       if (groups[action.group]) {
         groups[action.group].push(action);
@@ -626,6 +776,13 @@ var ToolbarController = class {
             action.execute("go", val);
           });
           const label = createElement("span", { className: "fp-toolbar-label" }, ` / ${max}`);
+          const curVal = action.value ?? 1;
+          prevBtn.disabled = curVal <= 1;
+          prevBtn.style.opacity = curVal <= 1 ? "0.4" : "1";
+          nextBtn.disabled = curVal >= max;
+          nextBtn.style.opacity = curVal >= max ? "0.4" : "1";
+          this.prevPageBtn = prevBtn;
+          this.nextPageBtn = nextBtn;
           this.pageInputEl = input;
           this.pageLabelEl = label;
           groupEl.appendChild(prevBtn);
@@ -666,9 +823,11 @@ var ToolbarController = class {
       type: "button",
       "data-action-id": id
     });
-    const svg = ICON_MAP[iconHtml] || ICON_MAP[id] || (iconHtml && iconHtml.startsWith("<svg") ? iconHtml : null);
-    if (svg) {
-      btn.innerHTML = sanitizeSVG(svg);
+    const internalSvg = ICON_MAP[iconHtml] || ICON_MAP[id];
+    if (internalSvg) {
+      btn.innerHTML = internalSvg;
+    } else if (iconHtml && iconHtml.startsWith("<svg")) {
+      btn.innerHTML = sanitizeSVG(iconHtml);
     } else {
       btn.textContent = title || id;
     }
@@ -679,25 +838,63 @@ var ToolbarController = class {
 var ThumbnailPanel = class {
   el;
   panelEl;
+  listEl;
+  headerEl;
   thumbnails = [];
   onSelect;
+  onToggleCallback;
   activeIndex = 0;
-  constructor(container) {
+  observer;
+  renderedIndices = /* @__PURE__ */ new Set();
+  constructor(container, onToggle) {
     this.el = container;
+    this.onToggleCallback = onToggle;
     this.panelEl = createElement("div", { className: "fp-thumbnail-panel hidden" });
+    this.panelEl.style.width = "0px";
+    this.panelEl.style.minWidth = "0px";
+    this.panelEl.style.opacity = "0";
+    this.headerEl = createElement("div", { className: "fp-thumbnail-header" });
+    const title = createElement("span", { className: "fp-thumbnail-title" }, "Pages");
+    const closeBtn = createElement("button", {
+      className: "fp-thumbnail-close-btn",
+      title: "Close Thumbnails",
+      type: "button"
+    });
+    closeBtn.innerHTML = ICON_CLOSE;
+    closeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.hide();
+    });
+    this.headerEl.appendChild(title);
+    this.headerEl.appendChild(closeBtn);
+    this.listEl = createElement("div", { className: "fp-thumbnail-list" });
+    this.panelEl.appendChild(this.headerEl);
+    this.panelEl.appendChild(this.listEl);
     this.el.appendChild(this.panelEl);
   }
+  isOpen() {
+    return !this.panelEl.classList.contains("hidden") && this.panelEl.style.width !== "0px";
+  }
   update(thumbnails, onSelect) {
     this.thumbnails = thumbnails;
     this.onSelect = onSelect;
+    this.renderedIndices.clear();
+    const titleEl = this.headerEl.querySelector(".fp-thumbnail-title");
+    if (titleEl) {
+      titleEl.textContent = `Pages (${thumbnails.length})`;
+    }
     this.render();
+    if (this.isOpen()) {
+      this.renderAllVisible();
+    }
   }
   setActive(index) {
     this.activeIndex = index;
-    const items = this.panelEl.querySelectorAll(".fp-thumbnail-item");
+    const items = this.listEl.querySelectorAll(".fp-thumbnail-item");
     items.forEach((item, i) => {
       if (i === index) {
         item.classList.add("active");
+        item.scrollIntoView({ block: "nearest", behavior: "smooth" });
       } else {
         item.classList.remove("active");
       }
@@ -705,37 +902,102 @@ var ThumbnailPanel = class {
   }
   show() {
     this.panelEl.classList.remove("hidden");
+    this.panelEl.style.width = "200px";
+    this.panelEl.style.minWidth = "200px";
+    this.panelEl.style.opacity = "1";
+    this.panelEl.style.display = "flex";
+    this.onToggleCallback?.(true);
+    this.renderAllVisible();
   }
   hide() {
     this.panelEl.classList.add("hidden");
+    this.panelEl.style.width = "0px";
+    this.panelEl.style.minWidth = "0px";
+    this.panelEl.style.opacity = "0";
+    this.onToggleCallback?.(false);
   }
   toggle() {
-    this.panelEl.classList.toggle("hidden");
+    if (this.isOpen()) {
+      this.hide();
+    } else {
+      this.show();
+    }
   }
   destroy() {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = void 0;
+    }
+    this.renderedIndices.clear();
     this.el.innerHTML = "";
   }
-  async render() {
-    this.panelEl.innerHTML = "";
+  renderAllVisible() {
+    const items = this.listEl.querySelectorAll(".fp-thumbnail-item");
+    items.forEach((item) => {
+      const idx = parseInt(item.dataset.thumbIndex || "-1", 10);
+      if (idx >= 0 && !this.renderedIndices.has(idx)) {
+        this.renderThumbnailItem(idx, item);
+      }
+    });
+  }
+  renderThumbnailItem(idx, itemEl) {
+    if (this.renderedIndices.has(idx)) return;
+    this.renderedIndices.add(idx);
+    const canvas = itemEl.querySelector("canvas");
+    const thumb = this.thumbnails[idx];
+    if (canvas && thumb) {
+      Promise.resolve(thumb.render(canvas)).catch((err) => {
+        console.warn(`[FilePreview] Error rendering thumbnail ${idx}:`, err);
+      });
+    }
+  }
+  render() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    this.listEl.innerHTML = "";
+    const useObserver = typeof IntersectionObserver !== "undefined";
+    if (useObserver) {
+      this.observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting) {
+              const target = entry.target;
+              const idx = parseInt(target.dataset.thumbIndex || "-1", 10);
+              if (idx >= 0) {
+                this.renderThumbnailItem(idx, target);
+              }
+            }
+          }
+        },
+        {
+          root: this.listEl,
+          rootMargin: "120px 0px 120px 0px"
+        }
+      );
+    }
     for (let i = 0; i < this.thumbnails.length; i++) {
       const thumb = this.thumbnails[i];
-      const itemEl = createElement("div", { className: "fp-thumbnail-item" });
-      if (i === this.activeIndex) {
-        itemEl.classList.add("active");
-      }
+      const itemEl = createElement("div", {
+        className: "fp-thumbnail-item" + (i === this.activeIndex ? " active" : "")
+      });
+      itemEl.dataset.thumbIndex = i.toString();
       itemEl.addEventListener("click", () => {
         this.setActive(i);
         this.onSelect?.(i);
       });
-      const canvas = createElement("canvas", { width: "150", height: "200" });
-      const label = createElement("span", { className: "fp-thumbnail-label" }, thumb.label);
-      itemEl.appendChild(canvas);
+      const canvasWrapper = createElement("div", { className: "fp-thumbnail-canvas-wrapper" });
+      const canvas = createElement("canvas", { width: "130", height: "170" });
+      canvasWrapper.appendChild(canvas);
+      const label = createElement("span", { className: "fp-thumbnail-label" }, thumb.label || `Page ${i + 1}`);
+      itemEl.appendChild(canvasWrapper);
       itemEl.appendChild(label);
-      this.panelEl.appendChild(itemEl);
-      try {
-        await thumb.render(canvas);
-      } catch (err) {
-        console.error(`[FilePreview] Error rendering thumbnail ${i}:`, err);
+      this.listEl.appendChild(itemEl);
+      if (this.observer) {
+        this.observer.observe(itemEl);
+      }
+      if (i < 4) {
+        this.renderThumbnailItem(i, itemEl);
       }
     }
   }
@@ -756,6 +1018,7 @@ var FilePreviewViewer = class _FilePreviewViewer {
   currentOptions = {};
   resizeObserver = null;
   fullscreenHandler = null;
+  titleBarEl = null;
   /**
    * Register a preview plugin.
    */
@@ -792,6 +1055,7 @@ var FilePreviewViewer = class _FilePreviewViewer {
       }
       this.currentBuffer = buffer.slice(0);
       this.currentMetadata = metadata;
+      this.updateTitleBar(options, metadata);
       if (signal.aborted) throw new DOMException("Aborted", "AbortError");
       const fileInfo = { metadata, buffer };
       const matchedPlugin = await this.findPlugin(fileInfo);
@@ -815,15 +1079,21 @@ var FilePreviewViewer = class _FilePreviewViewer {
           if (event === "page-change" && payload && typeof payload.page === "number") {
             const total = payload.total ?? payload.totalPages;
             this.toolbar?.setPage(payload.page, total);
+            this.thumbnailPanel?.setActive(payload.page - 1);
           }
           this.eventEmitter.emit(event, payload);
-        }
+        },
+        toggleThumbnails: () => this.toggleThumbnails()
       });
       this.activeInstance = instance;
       instance.openInSeparateWindow = () => this.openInSeparateWindow();
+      instance.toggleThumbnails = () => this.toggleThumbnails();
       this.hideLoading();
       this.eventEmitter.emit("loaded", { metadata, plugin: matchedPlugin.id });
-      if (options.showToolbar !== false && this.toolbar) {
+      const isToolbarVisible = options.showToolbar !== false && options.toolbar !== false;
+      if (isToolbarVisible && this.toolbar) {
+        const toolbarConfig = this.extractToolbarConfig(options);
+        this.toolbar.setConfig(toolbarConfig);
         const actions = matchedPlugin.getToolbarActions(instance);
         const hasFullscreen = actions.some((a) => a.id === "fullscreen");
         if (!hasFullscreen && this.wrapperEl) {
@@ -873,6 +1143,12 @@ var FilePreviewViewer = class _FilePreviewViewer {
             }
           });
         }
+        const thumbAction = actions.find((a) => a.id === "thumbnails");
+        if (thumbAction) {
+          thumbAction.execute = () => {
+            this.toggleThumbnails();
+          };
+        }
         this.toolbar.update(actions);
         this.toolbar.show();
       }
@@ -957,7 +1233,7 @@ var FilePreviewViewer = class _FilePreviewViewer {
     if (targetUrl) {
       const newWin2 = window.open(targetUrl, "_blank");
       if (!newWin2) {
-        alert("Popup blocker prevented opening the preview in a separate window. Please allow popups for this site.");
+        console.warn("[FilePreviewViewer] Popup blocker prevented opening the preview in a separate window.");
         return null;
       }
       return newWin2;
@@ -965,7 +1241,7 @@ var FilePreviewViewer = class _FilePreviewViewer {
     const title = (this.currentMetadata?.name || "Document Preview") + " - Full Preview";
     const newWin = window.open("", "_blank");
     if (!newWin) {
-      alert("Popup blocker prevented opening the preview in a separate window. Please allow popups for this site.");
+      console.warn("[FilePreviewViewer] Popup blocker prevented opening the preview in a separate window.");
       return null;
     }
     newWin.document.title = title;
@@ -1042,6 +1318,7 @@ var FilePreviewViewer = class _FilePreviewViewer {
     this.currentBuffer = null;
     this.currentMetadata = null;
     this.currentContainer = null;
+    this.titleBarEl = null;
   }
   /**
    * Get the currently active preview instance.
@@ -1049,7 +1326,218 @@ var FilePreviewViewer = class _FilePreviewViewer {
   getInstance() {
     return this.activeInstance;
   }
+  // --- Toolbar Configuration & Feature Toggles ---
+  /**
+   * Configure toolbar features dynamically through options or methods.
+   * e.g. viewer.setToolbarConfig({ zoomIn: false, print: false })
+   */
+  setToolbarConfig(config) {
+    this.toolbar?.setConfig(config);
+  }
+  /**
+   * Get current toolbar configuration.
+   */
+  getToolbarConfig() {
+    return this.toolbar?.getConfig() ?? {};
+  }
+  /**
+   * Hide a specific toolbar action by ID or alias (e.g. 'zoom-in', 'print', 'download').
+   */
+  hideToolbarAction(actionId) {
+    this.toolbar?.hideAction(actionId);
+  }
+  /**
+   * Show a specific toolbar action by ID or alias.
+   */
+  showToolbarAction(actionId) {
+    this.toolbar?.showAction(actionId);
+  }
+  /**
+   * Enable a specific toolbar action button.
+   */
+  enableToolbarAction(actionId) {
+    this.toolbar?.enableAction(actionId);
+  }
+  /**
+   * Disable a specific toolbar action button.
+   */
+  disableToolbarAction(actionId) {
+    this.toolbar?.disableAction(actionId);
+  }
+  // --- Programmatic Toolbar Action Methods ---
+  /**
+   * Fit document to page so it fills the frame width with minimal margins.
+   */
+  fitToPage() {
+    this.activeInstance?.fitToPage?.();
+  }
+  /**
+   * Zoom in.
+   */
+  zoomIn() {
+    this.activeInstance?.zoomIn?.();
+  }
+  /**
+   * Zoom out.
+   */
+  zoomOut() {
+    this.activeInstance?.zoomOut?.();
+  }
+  /**
+   * Set specific zoom level.
+   */
+  setZoom(level) {
+    this.activeInstance?.setZoom?.(level);
+  }
+  /**
+   * Get current zoom level.
+   */
+  getZoom() {
+    return this.activeInstance?.getZoom?.() ?? 1;
+  }
+  /**
+   * Rotate 90 degrees clockwise.
+   */
+  rotateCW() {
+    this.activeInstance?.rotateCW?.();
+  }
+  /**
+   * Rotate 90 degrees counter-clockwise.
+   */
+  rotateCCW() {
+    this.activeInstance?.rotateCCW?.();
+  }
+  /**
+   * Navigate to a specific page number.
+   */
+  goToPage(page) {
+    this.activeInstance?.goToPage?.(page);
+    this.toolbar?.setPage(page);
+  }
+  /**
+   * Navigate to next page.
+   */
+  nextPage() {
+    const cur = this.getCurrentPage();
+    const max = this.getPageCount();
+    if (cur < max) {
+      this.goToPage(cur + 1);
+    }
+  }
+  /**
+   * Navigate to previous page.
+   */
+  prevPage() {
+    const cur = this.getCurrentPage();
+    if (cur > 1) {
+      this.goToPage(cur - 1);
+    }
+  }
+  /**
+   * Get total page count.
+   */
+  getPageCount() {
+    return this.activeInstance?.getPageCount?.() ?? 1;
+  }
+  /**
+   * Get current page number.
+   */
+  getCurrentPage() {
+    return this.activeInstance?.getCurrentPage?.() ?? 1;
+  }
+  /**
+   * Download the current document.
+   */
+  download() {
+    this.activeInstance?.download?.();
+  }
+  /**
+   * Print the current document.
+   */
+  print() {
+    this.activeInstance?.print?.();
+  }
+  /**
+   * Toggle fullscreen mode.
+   */
+  toggleFullscreen() {
+    try {
+      if (!document.fullscreenElement) {
+        this.wrapperEl?.requestFullscreen?.();
+        this.wrapperEl?.classList.add("fp-fullscreen-active");
+      } else {
+        document.exitFullscreen?.();
+        this.wrapperEl?.classList.remove("fp-fullscreen-active");
+      }
+    } catch {
+      this.wrapperEl?.classList.toggle("fp-fullscreen-active");
+    }
+    setTimeout(() => {
+      this.activeInstance?.fitToPage?.();
+    }, 120);
+  }
+  /**
+   * Toggle thumbnails sidebar panel.
+   */
+  toggleThumbnails() {
+    if (!this.thumbnailPanel) return;
+    this.thumbnailPanel.toggle();
+    const isOpen = this.thumbnailPanel.isOpen();
+    this.toolbar?.setActionActive("thumbnails", isOpen);
+    setTimeout(() => {
+      this.activeInstance?.fitToPage?.();
+    }, 260);
+  }
+  /**
+   * Set whether to display the file name / title bar above the toolbar.
+   */
+  setShowFileName(show) {
+    if (this.currentOptions) {
+      this.currentOptions.showFileName = show;
+    }
+    this.updateTitleBar(this.currentOptions, this.currentMetadata);
+  }
+  /**
+   * Set or override the displayed file name in the preview panel.
+   */
+  setFileName(name) {
+    if (this.currentOptions) {
+      this.currentOptions.fileName = name;
+    }
+    this.updateTitleBar(this.currentOptions, this.currentMetadata);
+  }
   // --- Private methods ---
+  updateTitleBar(options, metadata) {
+    if (!this.titleBarEl) return;
+    const show = options?.showFileName !== false;
+    if (!show) {
+      this.titleBarEl.style.display = "none";
+      return;
+    }
+    const name = options?.fileName || metadata?.name || this.currentMetadata?.name || "";
+    if (!name) {
+      this.titleBarEl.style.display = "none";
+      return;
+    }
+    this.titleBarEl.style.display = "flex";
+    const ext = metadata?.extension || (name.includes(".") ? "." + name.split(".").pop() : "");
+    const badge = ext ? ext.replace(".", "").toUpperCase() : "";
+    this.titleBarEl.innerHTML = `
+      <div class="fp-titlebar-info">
+        <span class="fp-titlebar-icon">\u{1F4C4}</span>
+        <span class="fp-titlebar-name" title="${name}">${name}</span>
+        ${badge ? `<span class="fp-titlebar-badge">${badge}</span>` : ""}
+      </div>
+    `;
+  }
+  extractToolbarConfig(options) {
+    if (!options) return {};
+    const nested = typeof options.toolbar === "object" ? options.toolbar : {};
+    return {
+      ...options,
+      ...nested
+    };
+  }
   abort() {
     if (this.abortController) {
       this.abortController.abort();
@@ -1092,17 +1580,29 @@ var FilePreviewViewer = class _FilePreviewViewer {
     bodyEl.className = "fp-body";
     bodyEl.appendChild(thumbnailEl);
     bodyEl.appendChild(this.contentEl);
+    const titleBarEl = document.createElement("div");
+    titleBarEl.className = "fp-titlebar";
+    this.titleBarEl = titleBarEl;
+    this.updateTitleBar(options, this.currentMetadata);
     if (toolbarPos === "top") {
+      this.wrapperEl.appendChild(titleBarEl);
       this.wrapperEl.appendChild(toolbarEl);
       this.wrapperEl.appendChild(bodyEl);
     } else {
+      this.wrapperEl.appendChild(titleBarEl);
       this.wrapperEl.appendChild(bodyEl);
       this.wrapperEl.appendChild(toolbarEl);
     }
     container.innerHTML = "";
     container.appendChild(this.wrapperEl);
-    this.toolbar = new ToolbarController(toolbarEl);
-    this.thumbnailPanel = new ThumbnailPanel(thumbnailEl);
+    const initialToolbarConfig = this.extractToolbarConfig(options);
+    this.toolbar = new ToolbarController(toolbarEl, initialToolbarConfig);
+    this.thumbnailPanel = new ThumbnailPanel(thumbnailEl, (isOpen) => {
+      this.toolbar?.setActionActive("thumbnails", isOpen);
+      setTimeout(() => {
+        this.activeInstance?.fitToPage?.();
+      }, 260);
+    });
     this.setupKeyboardShortcuts();
     this.setupDragAndDrop(container, options);
     this.setupResizeAndFullscreenListeners();
@@ -1492,6 +1992,14 @@ var PdfPlugin = class {
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "fit-width",
+        icon: "fit-width",
+        label: "Fit to Width",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToWidth?.()
+      },
       {
         id: "rotate-cw",
         icon: "rotate-cw",
@@ -1500,6 +2008,14 @@ var PdfPlugin = class {
         group: "view",
         execute: () => instance.rotateCW?.()
       },
+      {
+        id: "rotate-ccw",
+        icon: "rotate-ccw",
+        label: "Rotate Counter-Clockwise",
+        type: "button",
+        group: "view",
+        execute: () => instance.rotateCCW?.()
+      },
       {
         id: "download",
         icon: "download",
@@ -1531,12 +2047,13 @@ var PdfPlugin = class {
     container.className = "fp-pdf-container";
     container.style.width = "100%";
     container.style.height = "100%";
-    container.style.overflow = "auto";
+    container.style.overflowX = "hidden";
+    container.style.overflowY = "auto";
     container.style.display = "flex";
     container.style.flexDirection = "column";
     container.style.alignItems = "center";
     container.style.justifyContent = "flex-start";
-    container.style.padding = "20px 16px";
+    container.style.padding = "16px 8px";
     container.style.backgroundColor = "#0f172a";
     container.style.boxSizing = "border-box";
     container.style.position = "relative";
@@ -1547,30 +2064,12 @@ var PdfPlugin = class {
     pageCard.style.borderRadius = "4px";
     pageCard.style.overflow = "hidden";
     pageCard.style.lineHeight = "0";
-    pageCard.style.transition = "transform 0.15s ease";
     pageCard.style.position = "relative";
     pageCard.style.flexShrink = "0";
+    pageCard.style.transition = "box-shadow 0.2s ease";
     let 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 standardFontsUrl = typeof window !== "undefined" && window.__PDF_STANDARD_FONTS_URL__ || "./standard_fonts/";
     const cmapsUrl = typeof window !== "undefined" && window.__PDF_CMAPS_URL__ || "./cmaps/";
@@ -1586,8 +2085,9 @@ var PdfPlugin = class {
     let currentPage = 1;
     let zoomScale = 1;
     let rotation = 0;
-    let fitMode = "page";
+    let fitMode = ctx?.options?.fitMode || "width";
     let currentRenderTask = null;
+    let textLayerDiv = null;
     const renderPage = async (pageNum) => {
       if (currentRenderTask) {
         try {
@@ -1599,30 +2099,37 @@ var PdfPlugin = class {
       const newCanvas = document.createElement("canvas");
       pageCard.replaceChild(newCanvas, canvas);
       canvas = newCanvas;
+      if (textLayerDiv) {
+        textLayerDiv.remove();
+        textLayerDiv = 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 containerHeight = container.clientHeight || 700;
       const unscaledVp = page.getViewport({ scale: 1, rotation });
-      const availWidth = Math.max(320, containerWidth - 48);
-      const availHeight = Math.max(550, containerHeight - 88);
+      const availWidth = Math.max(280, containerWidth - 36);
+      const availHeight = Math.max(280, containerHeight - 32);
       const scaleW = availWidth / unscaledVp.width;
       const scaleH = availHeight / unscaledVp.height;
       let fitScale;
       if (fitMode === "page") {
-        fitScale = Math.max(0.4, Math.min(scaleW, scaleH));
+        fitScale = Math.max(0.2, Math.min(4, Math.min(scaleW, scaleH)));
       } else {
-        fitScale = Math.max(0.65, Math.min(1.25, scaleW));
+        fitScale = Math.max(0.2, Math.min(4, scaleW));
       }
       const effectiveScale = (fitScale > 0 ? fitScale : 1) * zoomScale;
       const pixelRatio = window.devicePixelRatio || 1;
       const viewport = page.getViewport({ scale: effectiveScale, rotation });
+      const displayWidth = Math.floor(viewport.width);
+      const displayHeight = Math.floor(viewport.height);
       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`;
+      canvas.style.width = `${displayWidth}px`;
+      canvas.style.height = `${displayHeight}px`;
+      pageCard.style.width = `${displayWidth}px`;
+      pageCard.style.height = `${displayHeight}px`;
       const canvasCtx = canvas.getContext("2d");
       if (!canvasCtx) return;
       canvasCtx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
@@ -1636,9 +2143,31 @@ var PdfPlugin = class {
         if (err?.name !== "RenderingCancelledException") {
           console.warn("[PdfPlugin] Page render warning:", err);
         }
+        return;
       } finally {
         currentRenderTask = null;
       }
+      try {
+        textLayerDiv = document.createElement("div");
+        textLayerDiv.className = "textLayer";
+        textLayerDiv.style.width = `${displayWidth}px`;
+        textLayerDiv.style.height = `${displayHeight}px`;
+        textLayerDiv.style.position = "absolute";
+        textLayerDiv.style.top = "0";
+        textLayerDiv.style.left = "0";
+        textLayerDiv.style.lineHeight = "1";
+        pageCard.appendChild(textLayerDiv);
+        if (pdfjsLib.TextLayer) {
+          const textLayer = new pdfjsLib.TextLayer({
+            textContentSource: page.streamTextContent(),
+            container: textLayerDiv,
+            viewport
+          });
+          await textLayer.render();
+        }
+      } catch (err) {
+        console.debug("[PdfPlugin] TextLayer notice:", err);
+      }
     };
     renderPage(1);
     let resizeTimer = null;
@@ -1648,11 +2177,48 @@ var PdfPlugin = class {
         if (Math.abs(zoomScale - 1) < 0.05) {
           renderPage(currentPage);
         }
-      }, 150);
+      }, 120);
     });
     resizeObserver.observe(container);
+    const onWheel = (e) => {
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+        const delta = e.deltaY > 0 ? -0.15 : 0.15;
+        zoomScale = Math.max(0.25, Math.min(4, Math.round((zoomScale + delta) * 100) / 100));
+        renderPage(currentPage);
+      }
+    };
+    container.addEventListener("wheel", onWheel, { passive: false });
+    const onKeyDown = (e) => {
+      const tag = e.target?.tagName?.toLowerCase();
+      if (tag === "input" || tag === "textarea" || tag === "select") return;
+      if (e.key === "ArrowRight" || e.key === "PageDown") {
+        if (currentPage < totalPages) {
+          e.preventDefault();
+          container.scrollTop = 0;
+          renderPage(currentPage + 1);
+        }
+      } else if (e.key === "ArrowLeft" || e.key === "PageUp") {
+        if (currentPage > 1) {
+          e.preventDefault();
+          container.scrollTop = 0;
+          renderPage(currentPage - 1);
+        }
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        container.scrollTop = 0;
+        renderPage(1);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        container.scrollTop = 0;
+        renderPage(totalPages);
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
     const cleanup = () => {
       resizeObserver.disconnect();
+      window.removeEventListener("keydown", onKeyDown);
+      container.removeEventListener("wheel", onWheel);
       if (resizeTimer) clearTimeout(resizeTimer);
       if (currentRenderTask) {
         try {
@@ -1671,22 +2237,26 @@ var PdfPlugin = class {
     const instance = {
       destroy: cleanup,
       zoomIn: () => {
-        zoomScale = Math.min(3.5, zoomScale + 0.2);
+        zoomScale = Math.min(4, Math.round((zoomScale + 0.2) * 10) / 10);
         renderPage(currentPage);
       },
       zoomOut: () => {
-        zoomScale = Math.max(0.3, zoomScale - 0.2);
+        zoomScale = Math.max(0.25, Math.round((zoomScale - 0.2) * 10) / 10);
         renderPage(currentPage);
       },
       getZoom: () => zoomScale,
       setZoom: (level) => {
-        zoomScale = Math.max(0.3, Math.min(3.5, level));
+        zoomScale = Math.max(0.25, Math.min(4, level));
         renderPage(currentPage);
       },
       fitToPage: () => {
-        fitMode = fitMode === "page" ? "width" : "page";
+        fitMode = "page";
+        zoomScale = 1;
+        renderPage(currentPage);
+      },
+      fitToWidth: () => {
+        fitMode = "width";
         zoomScale = 1;
-        rotation = 0;
         renderPage(currentPage);
       },
       rotateCW: () => {
@@ -1704,6 +2274,9 @@ var PdfPlugin = class {
         container.scrollTop = 0;
         renderPage(page);
       },
+      toggleThumbnails: () => {
+        ctx?.toggleThumbnails?.();
+      },
       download: () => {
         const blob = new Blob([ctx.buffer], { type: "application/pdf" });
         const url = URL.createObjectURL(blob);
@@ -1737,7 +2310,7 @@ var PdfPlugin = class {
       },
       getThumbnails: async () => {
         const thumbnails = [];
-        const count = Math.min(totalPages, 50);
+        const count = totalPages;
         for (let i = 1; i <= count; i++) {
           thumbnails.push({
             index: i,
@@ -1745,9 +2318,10 @@ var PdfPlugin = class {
             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 });
+                const baseVp = p.getViewport({ scale: 1, rotation });
+                const targetW = thumbCanvas.width || 130;
+                const thumbScale = targetW / baseVp.width;
+                const thumbVp = p.getViewport({ scale: thumbScale, rotation });
                 thumbCanvas.height = Math.floor(thumbVp.height);
                 const tCtx = thumbCanvas.getContext("2d");
                 if (tCtx) {
@@ -2091,28 +2665,26 @@ var DocxPlugin = class {
   getToolbarActions(instance) {
     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: "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",
@@ -2178,11 +2750,17 @@ var DocxPlugin = class {
     wrapper.className = "fp-docx-wrapper";
     wrapper.style.transformOrigin = "top center";
     wrapper.style.transition = "transform 0.2s ease";
-    wrapper.style.padding = "24px 16px";
-    wrapper.style.maxWidth = "950px";
+    wrapper.style.padding = "0";
+    wrapper.style.maxWidth = "none";
+    wrapper.style.width = "816px";
     wrapper.style.margin = "0 auto";
+    wrapper.style.display = "flex";
+    wrapper.style.flexDirection = "column";
+    wrapper.style.alignItems = "center";
     wrapper.style.boxSizing = "border-box";
-    ctx.container.style.overflow = "auto";
+    ctx.container.style.overflowX = "hidden";
+    ctx.container.style.overflowY = "auto";
+    ctx.container.style.padding = "16px 8px";
     ctx.container.style.backgroundColor = "#f1f5f9";
     ctx.container.appendChild(wrapper);
     const styleOverride = document.createElement("style");
@@ -2356,39 +2934,13 @@ var DocxPlugin = class {
     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";
+          sec.style.display = idx + 1 === currentPage ? "" : "none";
         });
       }
-      if (indicator) {
-        indicator.textContent = `Page ${currentPage} of ${totalPages}`;
-      }
       ctx.container.scrollTop = 0;
       ctx.emit("page-change", { page: currentPage, total: totalPages });
     };
@@ -2397,31 +2949,46 @@ var DocxPlugin = class {
     }
     scale = 1;
     let rotation = 0;
-    let fitMode = "width";
-    const calculateFitScale = (mode = fitMode) => {
-      const activeEl = pageElements[currentPage - 1] || wrapper.firstElementChild || wrapper;
+    let fitMode = "page";
+    let isUserZoomed = false;
+    const calculateFitScale = (_mode = fitMode) => {
+      const activeEl = pageElements[currentPage - 1] || wrapper.querySelector("section.docx") || wrapper;
       const elW = activeEl.offsetWidth || 816;
-      const singlePageH = Math.min(activeEl.offsetHeight || 1056, Math.round(elW * 1.32));
-      const availW = Math.max(280, ctx.container.clientWidth - 48);
-      const availH = Math.max(280, ctx.container.clientHeight - 80);
+      const availW = Math.max(280, ctx.container.clientWidth - 32);
       const sW = availW / elW;
-      const sH = availH / singlePageH;
-      if (mode === "page") {
-        return Math.max(0.55, Math.min(1.15, Math.min(sW, sH)));
-      }
-      return Math.max(0.65, Math.min(1.05, sW));
+      return Math.max(0.35, Math.min(3, sW));
     };
     const applyTransform = () => {
       wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
       wrapper.style.transformOrigin = "top center";
+      const activeEl = pageElements[currentPage - 1] || wrapper.querySelector("section.docx") || wrapper;
+      const elH = activeEl.offsetHeight || 1056;
+      if (scale > 1) {
+        wrapper.style.marginBottom = `${Math.round(elH * scale - elH + 32)}px`;
+      } else {
+        wrapper.style.marginBottom = "32px";
+      }
     };
+    let resizeObserver = null;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        if (!isUserZoomed) {
+          const newFit = calculateFitScale("page");
+          if (Math.abs(scale - newFit) > 0.015) {
+            scale = newFit;
+            applyTransform();
+          }
+        }
+      });
+      resizeObserver.observe(ctx.container);
+    }
     setTimeout(() => {
-      fitMode = "width";
-      scale = calculateFitScale("width");
+      scale = calculateFitScale("page");
       applyTransform();
-    }, 60);
+    }, 40);
     const cleanup = () => {
-      indicator?.remove();
+      resizeObserver?.disconnect();
+      resizeObserver = null;
       for (const url of createdBlobUrls) {
         URL.revokeObjectURL(url);
       }
@@ -2438,21 +3005,24 @@ var DocxPlugin = class {
         showPage(page);
       },
       zoomIn: () => {
-        scale += 0.15;
+        isUserZoomed = true;
+        scale = Math.min(3.5, scale + 0.15);
         applyTransform();
       },
       zoomOut: () => {
+        isUserZoomed = true;
         scale = Math.max(0.2, scale - 0.15);
         applyTransform();
       },
       getZoom: () => scale,
       setZoom: (level) => {
+        isUserZoomed = true;
         scale = level;
         applyTransform();
       },
       fitToPage: () => {
-        fitMode = fitMode === "width" ? "page" : "width";
-        scale = calculateFitScale(fitMode);
+        isUserZoomed = false;
+        scale = calculateFitScale("page");
         rotation = 0;
         applyTransform();
       },
@@ -2842,7 +3412,7 @@ var ExcelPlugin = class {
     "application/vnd.ms-excel.template.macroEnabled.12",
     "application/vnd.oasis.opendocument.spreadsheet"
   ];
-  weight = 80;
+  weight = 85;
   supports(file) {
     const ext = file.metadata.extension?.toLowerCase();
     const mime = file.metadata.mimeType?.toLowerCase();
@@ -2854,6 +3424,14 @@ var ExcelPlugin = class {
   getToolbarActions(instance) {
     const totalSheets = instance.getPageCount?.() ?? 1;
     const actions = [];
+    actions.push({
+      id: "thumbnails",
+      icon: "thumbnails",
+      label: "Sheet Thumbnails",
+      type: "button",
+      group: "navigation",
+      execute: () => instance.toggleThumbnails?.()
+    });
     if (totalSheets > 1) {
       actions.push({
         id: "page-nav",
@@ -2936,6 +3514,16 @@ var ExcelPlugin = class {
         execute: () => {
           instance.print?.();
         }
+      },
+      {
+        id: "open-window",
+        icon: "open-window",
+        label: "Open in Separate Full Window",
+        type: "button",
+        group: "actions",
+        execute: () => {
+          instance.openInSeparateWindow?.();
+        }
       }
     );
     return actions;
@@ -3101,6 +3689,63 @@ var ExcelPlugin = class {
       },
       getPageCount: () => sheetNames.length,
       getCurrentPage: () => currentSheetIndex,
+      getThumbnails: () => {
+        return sheetNames.map((name, idx) => ({
+          index: idx,
+          label: name,
+          render: async (canvas) => {
+            canvas.width = 140;
+            canvas.height = 100;
+            const c = canvas.getContext("2d");
+            if (!c) return;
+            c.fillStyle = "#ffffff";
+            c.fillRect(0, 0, canvas.width, canvas.height);
+            c.fillStyle = "#107c41";
+            c.fillRect(0, 0, canvas.width, 16);
+            c.fillStyle = "#ffffff";
+            c.font = 'bold 8px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+            c.fillText(`\u{1F4CA} ${name.slice(0, 16)}`, 6, 11);
+            const startY = 17;
+            const rowH = 13;
+            const colW = 30;
+            const colHeaders = ["A", "B", "C", "D"];
+            c.fillStyle = "#f1f5f9";
+            c.fillRect(0, startY, canvas.width, rowH);
+            c.strokeStyle = "#cbd5e1";
+            c.lineWidth = 0.8;
+            c.strokeRect(0, startY, canvas.width, rowH);
+            c.fillStyle = "#64748b";
+            c.font = "bold 7px sans-serif";
+            for (let ci = 0; ci < colHeaders.length; ci++) {
+              c.fillText(colHeaders[ci], 14 + ci * colW, startY + 9);
+            }
+            const ws = wb?.Sheets[name];
+            for (let ri = 1; ri <= 5; ri++) {
+              const y = startY + ri * rowH;
+              if (y > canvas.height - 2) break;
+              c.fillStyle = "#f8fafc";
+              c.fillRect(0, y, 12, rowH);
+              c.fillStyle = "#94a3b8";
+              c.font = "6px sans-serif";
+              c.fillText(String(ri), 3, y + 9);
+              c.strokeStyle = "#e2e8f0";
+              c.strokeRect(0, y, canvas.width, rowH);
+              c.fillStyle = "#334155";
+              c.font = "6px sans-serif";
+              for (let ci = 0; ci < colHeaders.length; ci++) {
+                const cellRef = `${colHeaders[ci]}${ri}`;
+                const cellVal = ws?.[cellRef]?.w || ws?.[cellRef]?.v;
+                if (cellVal !== void 0) {
+                  c.fillText(String(cellVal).slice(0, 6), 14 + ci * colW, y + 9);
+                }
+              }
+            }
+            c.strokeStyle = "#cbd5e1";
+            c.lineWidth = 1;
+            c.strokeRect(0.5, 0.5, canvas.width - 1, canvas.height - 1);
+          }
+        }));
+      },
       download: () => {
         const blob = new Blob([ctx.buffer], { type: this.mimeTypes[0] });
         const url = URL.createObjectURL(blob);
@@ -3133,7 +3778,39 @@ var CsvPlugin = class {
     return ext === ".csv" || ext === ".tsv" || mime === "text/csv" || mime === "text/tab-separated-values";
   }
   getToolbarActions(instance) {
-    return [
+    const totalPages = instance.getPageCount?.() ?? 1;
+    const actions = [];
+    actions.push({
+      id: "thumbnails",
+      icon: "thumbnails",
+      label: "Page Thumbnails",
+      type: "button",
+      group: "navigation",
+      execute: () => instance.toggleThumbnails?.()
+    });
+    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",
@@ -3154,6 +3831,16 @@ var CsvPlugin = class {
           instance.zoomIn?.();
         }
       },
+      {
+        id: "fit-page",
+        icon: "fit-page",
+        label: "Fit to View",
+        type: "button",
+        group: "zoom",
+        execute: () => {
+          instance.fitToPage?.();
+        }
+      },
       {
         id: "download",
         icon: "download",
@@ -3171,10 +3858,21 @@ var CsvPlugin = class {
         type: "button",
         group: "actions",
         execute: () => {
-          instance.print?.();
+          instance.print?.();
+        }
+      },
+      {
+        id: "open-window",
+        icon: "open-window",
+        label: "Open in Separate Full Window",
+        type: "button",
+        group: "actions",
+        execute: () => {
+          instance.openInSeparateWindow?.();
         }
       }
-    ];
+    );
+    return actions;
   }
   async render(ctx) {
     const decoder = new TextDecoder("utf-8");
@@ -3186,33 +3884,62 @@ var CsvPlugin = class {
     container.style.padding = "16px";
     container.style.boxSizing = "border-box";
     container.style.transformOrigin = "top left";
+    const delimiter = ctx.metadata.extension === ".tsv" ? "	" : ",";
+    const allLines = text.split(/\r?\n/).filter((r) => r.trim().length > 0);
+    const headerLine = allLines[0] || "";
+    const headerCells = headerLine.split(delimiter);
+    const dataLines = allLines.slice(1);
+    const ROWS_PER_PAGE = 100;
+    const totalPages = Math.max(1, Math.ceil(dataLines.length / ROWS_PER_PAGE));
+    let currentPage = 1;
     const table = document.createElement("table");
     table.style.borderCollapse = "collapse";
     table.style.width = "100%";
-    table.style.fontFamily = "monospace";
+    table.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace';
     table.style.fontSize = "13px";
-    const delimiter = ctx.metadata.extension === ".tsv" ? "	" : ",";
-    const rows = text.split(/\r?\n/).slice(0, 500);
-    rows.forEach((row, rowIndex) => {
-      if (!row.trim()) return;
-      const tr = document.createElement("tr");
-      const cells = row.split(delimiter);
-      cells.forEach((cell) => {
-        const td = document.createElement(rowIndex === 0 ? "th" : "td");
-        td.textContent = cell.trim();
-        td.style.border = "1px solid #d0d7de";
-        td.style.padding = "6px 12px";
-        if (rowIndex === 0) {
-          td.style.backgroundColor = "#f6f8fa";
-          td.style.fontWeight = "bold";
-        }
-        tr.appendChild(td);
+    const renderPage = (pageNum) => {
+      currentPage = Math.max(1, Math.min(totalPages, pageNum));
+      table.innerHTML = "";
+      const headerTr = document.createElement("tr");
+      headerCells.forEach((cell) => {
+        const th = document.createElement("th");
+        th.textContent = cell.trim();
+        th.style.border = "1px solid #d0d7de";
+        th.style.padding = "8px 12px";
+        th.style.backgroundColor = "#f6f8fa";
+        th.style.fontWeight = "600";
+        th.style.whiteSpace = "nowrap";
+        headerTr.appendChild(th);
       });
-      table.appendChild(tr);
-    });
+      table.appendChild(headerTr);
+      const start = (currentPage - 1) * ROWS_PER_PAGE;
+      const end = Math.min(dataLines.length, start + ROWS_PER_PAGE);
+      const pageRows = dataLines.slice(start, end);
+      pageRows.forEach((row, idx) => {
+        const tr = document.createElement("tr");
+        if (idx % 2 === 1) tr.style.backgroundColor = "#f8fafc";
+        const cells = row.split(delimiter);
+        cells.forEach((cell) => {
+          const td = document.createElement("td");
+          td.textContent = cell.trim();
+          td.style.border = "1px solid #d0d7de";
+          td.style.padding = "6px 12px";
+          td.style.whiteSpace = "nowrap";
+          tr.appendChild(td);
+        });
+        table.appendChild(tr);
+      });
+      container.scrollTop = 0;
+      ctx.emit("page-change", { page: currentPage, total: totalPages });
+    };
+    renderPage(1);
     container.appendChild(table);
     ctx.container.appendChild(container);
     let scale = 1;
+    const applyScale = () => {
+      container.style.transform = `scale(${scale})`;
+      container.style.transformOrigin = "top left";
+    };
     const cleanup = () => {
       container.remove();
       ctx.container.innerHTML = "";
@@ -3220,22 +3947,86 @@ var CsvPlugin = class {
     ctx.signal.addEventListener("abort", cleanup);
     return {
       destroy: cleanup,
+      getPageCount: () => totalPages,
+      getCurrentPage: () => currentPage,
+      goToPage: (page) => renderPage(page),
+      getThumbnails: () => {
+        const thumbnails = [];
+        for (let i = 0; i < totalPages; i++) {
+          const pageIdx = i;
+          const startRow = pageIdx * ROWS_PER_PAGE + 1;
+          const endRow = Math.min(dataLines.length, (pageIdx + 1) * ROWS_PER_PAGE);
+          const label = totalPages === 1 ? "Table" : `Page ${pageIdx + 1} (${startRow}-${endRow})`;
+          thumbnails.push({
+            index: pageIdx,
+            label,
+            render: async (canvas) => {
+              canvas.width = 140;
+              canvas.height = 100;
+              const c = canvas.getContext("2d");
+              if (!c) return;
+              c.fillStyle = "#ffffff";
+              c.fillRect(0, 0, canvas.width, canvas.height);
+              c.fillStyle = "#2563eb";
+              c.fillRect(0, 0, canvas.width, 16);
+              c.fillStyle = "#ffffff";
+              c.font = "bold 8px sans-serif";
+              c.fillText(`\u{1F4C8} ${label.slice(0, 18)}`, 6, 11);
+              const startY = 17;
+              const rowH = 13;
+              const colW = 28;
+              const cols = Math.min(4, headerCells.length || 4);
+              c.fillStyle = "#f1f5f9";
+              c.fillRect(0, startY, canvas.width, rowH);
+              c.strokeStyle = "#cbd5e1";
+              c.lineWidth = 0.8;
+              c.strokeRect(0, startY, canvas.width, rowH);
+              c.fillStyle = "#64748b";
+              c.font = "bold 7px sans-serif";
+              for (let ci = 0; ci < cols; ci++) {
+                const hName = headerCells[ci] || `Col ${ci + 1}`;
+                c.fillText(hName.slice(0, 5), 8 + ci * colW, startY + 9);
+              }
+              const rowsToPreview = dataLines.slice(pageIdx * ROWS_PER_PAGE, pageIdx * ROWS_PER_PAGE + 5);
+              for (let ri = 0; ri < rowsToPreview.length; ri++) {
+                const y = startY + (ri + 1) * rowH;
+                if (y > canvas.height - 2) break;
+                c.strokeStyle = "#e2e8f0";
+                c.strokeRect(0, y, canvas.width, rowH);
+                const cVals = rowsToPreview[ri].split(delimiter);
+                c.fillStyle = "#334155";
+                c.font = "6px sans-serif";
+                for (let ci = 0; ci < cols; ci++) {
+                  const val = cVals[ci] || "";
+                  c.fillText(val.trim().slice(0, 6), 8 + ci * colW, y + 9);
+                }
+              }
+              c.strokeStyle = "#cbd5e1";
+              c.lineWidth = 1;
+              c.strokeRect(0.5, 0.5, canvas.width - 1, canvas.height - 1);
+            }
+          });
+        }
+        return thumbnails;
+      },
       zoomIn: () => {
         scale += 0.1;
-        container.style.transform = `scale(${scale})`;
+        applyScale();
       },
       zoomOut: () => {
         scale = Math.max(0.2, scale - 0.1);
-        container.style.transform = `scale(${scale})`;
+        applyScale();
       },
       getZoom: () => scale,
       setZoom: (level) => {
         scale = level;
-        container.style.transform = `scale(${scale})`;
+        applyScale();
       },
       fitToPage: () => {
-        scale = 1;
-        container.style.transform = `scale(1)`;
+        const availW = Math.max(280, (ctx.container.clientWidth || window.innerWidth) - 48);
+        const tW = table.offsetWidth || 600;
+        scale = Math.max(0.35, Math.min(1, availW / tW));
+        applyScale();
       },
       download: () => {
         const blob = new Blob([ctx.buffer], { type: "text/csv" });
@@ -3299,28 +4090,34 @@ var CodePlugin = class {
   getToolbarActions(instance) {
     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: "thumbnails",
+      icon: "thumbnails",
+      label: "Page Thumbnails",
+      type: "button",
+      group: "navigation",
+      execute: () => instance.toggleThumbnails?.()
+    });
+    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",
@@ -3464,16 +4261,19 @@ var CodePlugin = class {
     let fontSize = 13;
     let rotation = 0;
     let zoomLevel = 1;
+    let isUserZoomed = false;
     const pre = document.createElement("pre");
     const code = document.createElement("code");
     if (isTxt) {
+      container.style.overflowX = "hidden";
+      container.style.overflowY = "auto";
       container.style.backgroundColor = "#f1f5f9";
-      container.style.padding = "32px";
+      container.style.padding = "16px 8px";
       container.style.boxSizing = "border-box";
       container.style.display = "flex";
       container.style.flexDirection = "column";
       container.style.alignItems = "center";
-      pre.style.margin = "0";
+      pre.style.margin = "0 auto";
       pre.style.fontFamily = "Consolas, 'Courier New', monospace";
       pre.style.fontSize = "13px";
       pre.style.color = "#1e293b";
@@ -3485,10 +4285,12 @@ var CodePlugin = class {
       pre.style.minHeight = "1056px";
       pre.style.padding = "72px 56px";
       pre.style.boxSizing = "border-box";
-      pre.style.boxShadow = "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+      pre.style.boxShadow = "0 4px 24px rgba(0, 0, 0, 0.08)";
       pre.style.borderRadius = "4px";
       pre.style.transformOrigin = "top center";
+      pre.style.transition = "transform 0.15s ease";
     } else {
+      container.style.overflow = "auto";
       container.style.backgroundColor = "#1e1e1e";
       container.style.color = "#d4d4d4";
       container.style.padding = "16px";
@@ -3520,42 +4322,9 @@ var CodePlugin = class {
     renderCodePage(rawPages[0] || (isTxt ? "" : 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";
-      if (isTxt) {
-        indicator.style.backgroundColor = "rgba(255, 255, 255, 0.9)";
-        indicator.style.color = "#334155";
-        indicator.style.border = "1px solid #e2e8f0";
-        indicator.style.boxShadow = "0 1px 3px rgba(0,0,0,0.1)";
-      } else {
-        indicator.style.backgroundColor = "rgba(15, 23, 42, 0.85)";
-        indicator.style.color = "#f8fafc";
-        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.backdropFilter = "blur(8px)";
-      }
-      indicator.style.fontSize = "12px";
-      indicator.style.fontWeight = "600";
-      indicator.style.padding = "5px 14px";
-      indicator.style.borderRadius = "20px";
-      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] || (isTxt ? "" : fullText));
-      if (indicator) {
-        indicator.textContent = `Page ${currentPage} of ${totalPages}`;
-      }
       container.scrollTop = 0;
       ctx.emit("page-change", { page: currentPage, total: totalPages });
     };
@@ -3563,36 +4332,90 @@ var CodePlugin = class {
       showPage(1);
     }
     ctx.container.appendChild(container);
-    const cleanup = () => {
-      indicator?.remove();
-      container.remove();
-      ctx.container.innerHTML = "";
+    const calculateTxtFit = () => {
+      const availW = Math.max(280, container.clientWidth - 32);
+      return Math.max(0.4, Math.min(3, availW / 816));
     };
-    ctx.signal.addEventListener("abort", cleanup);
     const updateTransform = () => {
       if (isTxt) {
         pre.style.transform = `scale(${zoomLevel}) rotate(${rotation}deg)`;
+        const scaledH = 1056 * zoomLevel;
+        const extraH = Math.max(0, scaledH - 1056);
+        pre.style.marginBottom = `${extraH + 32}px`;
       } else {
         pre.style.transform = `rotate(${rotation}deg)`;
         pre.style.fontSize = `${fontSize}px`;
       }
     };
+    let resizeObserver = null;
+    if (isTxt) {
+      setTimeout(() => {
+        zoomLevel = calculateTxtFit();
+        updateTransform();
+      }, 60);
+      resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+        if (!isUserZoomed) {
+          zoomLevel = calculateTxtFit();
+          updateTransform();
+        }
+      }) : null;
+      resizeObserver?.observe(container);
+    }
+    const cleanup = () => {
+      resizeObserver?.disconnect();
+      container.remove();
+      ctx.container.innerHTML = "";
+    };
+    ctx.signal.addEventListener("abort", cleanup);
     return {
       destroy: cleanup,
       getPageCount: () => totalPages,
       getCurrentPage: () => currentPage,
       goToPage: (page) => showPage(page),
+      getThumbnails: () => {
+        return rawPages.map((pageText, idx) => ({
+          index: idx,
+          label: `Page ${idx + 1}`,
+          render: async (canvas) => {
+            canvas.width = 140;
+            canvas.height = 180;
+            const c = canvas.getContext("2d");
+            if (!c) return;
+            c.fillStyle = "#ffffff";
+            c.fillRect(0, 0, canvas.width, canvas.height);
+            c.strokeStyle = "#cbd5e1";
+            c.lineWidth = 1;
+            c.strokeRect(0.5, 0.5, canvas.width - 1, canvas.height - 1);
+            c.fillStyle = "#64748b";
+            const lines = (pageText || "").split("\n").slice(0, 24);
+            const lineH = 6;
+            const startY = 14;
+            const startX = 12;
+            const maxW = canvas.width - 24;
+            c.font = "5px monospace";
+            for (let li = 0; li < lines.length; li++) {
+              const l = lines[li].trim();
+              if (!l) continue;
+              const y = startY + li * lineH;
+              if (y > canvas.height - 12) break;
+              c.fillText(l.slice(0, 30), startX, y, maxW);
+            }
+          }
+        }));
+      },
       zoomIn: () => {
+        isUserZoomed = true;
         if (isTxt) {
-          zoomLevel = Math.min(3, zoomLevel + 0.1);
+          zoomLevel = Math.min(3.5, zoomLevel + 0.15);
         } else {
           fontSize = Math.min(32, fontSize + 2);
         }
         updateTransform();
       },
       zoomOut: () => {
+        isUserZoomed = true;
         if (isTxt) {
-          zoomLevel = Math.max(0.1, zoomLevel - 0.1);
+          zoomLevel = Math.max(0.1, zoomLevel - 0.15);
         } else {
           fontSize = Math.max(8, fontSize - 2);
         }
@@ -3600,6 +4423,7 @@ var CodePlugin = class {
       },
       getZoom: () => isTxt ? zoomLevel : fontSize / 13,
       setZoom: (level) => {
+        isUserZoomed = true;
         if (isTxt) {
           zoomLevel = level;
         } else {
@@ -3608,9 +4432,10 @@ var CodePlugin = class {
         updateTransform();
       },
       fitToPage: () => {
+        isUserZoomed = false;
         fontSize = 13;
         rotation = 0;
-        zoomLevel = isTxt ? Math.max(0.65, Math.min(1.05, (container.clientWidth - 48) / 816)) : 1;
+        zoomLevel = isTxt ? calculateTxtFit() : 1;
         updateTransform();
       },
       rotateCW: () => {
@@ -4491,28 +5316,26 @@ var RtfPlugin = class {
   getToolbarActions(instance) {
     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: "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",
@@ -4584,43 +5407,57 @@ var RtfPlugin = class {
   async render(ctx) {
     const wrapper = document.createElement("div");
     wrapper.className = "fp-rtf-wrapper";
-    wrapper.style.padding = "32px";
-    wrapper.style.maxWidth = "850px";
+    wrapper.style.padding = "0";
+    wrapper.style.width = "816px";
     wrapper.style.margin = "0 auto";
-    wrapper.style.backgroundColor = "#fff";
-    wrapper.style.boxShadow = "0 2px 8px rgba(0,0,0,0.08)";
-    wrapper.style.borderRadius = "4px";
-    wrapper.style.minHeight = "100%";
+    wrapper.style.boxSizing = "border-box";
+    wrapper.style.display = "flex";
+    wrapper.style.flexDirection = "column";
+    wrapper.style.alignItems = "center";
+    wrapper.style.backgroundColor = "transparent";
     wrapper.style.transformOrigin = "top center";
-    wrapper.style.transition = "transform 0.2s ease";
-    ctx.container.style.overflow = "auto";
-    ctx.container.style.padding = "24px";
+    wrapper.style.transition = "transform 0.15s ease";
+    ctx.container.style.overflowX = "hidden";
+    ctx.container.style.overflowY = "auto";
+    ctx.container.style.padding = "16px 8px";
     ctx.container.style.backgroundColor = "#f1f5f9";
     ctx.container.appendChild(wrapper);
     let scale = 1;
     let rotation = 0;
     let pageElements = [];
-    let fitMode = "width";
+    let isUserZoomed = false;
+    let fitMode = ctx?.options?.fitMode || "width";
     const calculateFitScale = (mode = fitMode) => {
       const activeEl = pageElements[currentPage - 1] || wrapper;
-      const elW = activeEl.offsetWidth || 850;
-      const singlePageH = Math.min(activeEl.offsetHeight || 1056, Math.round(elW * 1.32));
-      const availW = Math.max(280, ctx.container.clientWidth - 48);
-      const availH = Math.max(280, ctx.container.clientHeight - 80);
+      const elW = 816;
+      const singlePageH = activeEl?.offsetHeight || 1056;
+      const availW = Math.max(280, ctx.container.clientWidth - 32);
+      const availH = Math.max(280, ctx.container.clientHeight - 32);
       const sW = availW / elW;
       const sH = availH / singlePageH;
       if (mode === "page") {
-        return Math.max(0.55, Math.min(1.15, Math.min(sW, sH)));
+        return Math.max(0.35, Math.min(3, Math.min(sW, sH)));
       }
-      return Math.max(0.65, Math.min(1.05, sW));
+      return Math.max(0.4, Math.min(3, sW));
     };
     const applyTransform = () => {
       wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
       wrapper.style.transformOrigin = "top center";
+      const activeEl = pageElements[currentPage - 1];
+      const baseH = activeEl?.offsetHeight || 1056;
+      const scaledH = baseH * scale;
+      const extraH = Math.max(0, scaledH - baseH);
+      wrapper.style.marginBottom = `${extraH + 32}px`;
     };
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      if (!isUserZoomed) {
+        scale = calculateFitScale(fitMode);
+        applyTransform();
+      }
+    }) : null;
+    resizeObserver?.observe(ctx.container);
     setTimeout(() => {
-      fitMode = "width";
-      scale = calculateFitScale("width");
+      scale = calculateFitScale(fitMode);
       applyTransform();
     }, 60);
     try {
@@ -4630,20 +5467,34 @@ var RtfPlugin = class {
       const doc = new RTFJS.Document(ctx.buffer, {});
       const htmlElements = await doc.render();
       const contentNodes = [];
-      for (const item of htmlElements) {
-        if (item.children && item.children.length > 0 && !item.tagName.toLowerCase().startsWith("table")) {
-          contentNodes.push(...Array.from(item.children));
-        } else {
-          contentNodes.push(item);
+      const extractBlocks = (nodes) => {
+        for (const item of nodes) {
+          if (!item || !(item instanceof HTMLElement)) continue;
+          const tag = item.tagName.toLowerCase();
+          const hasChildBlocks = Array.from(item.children).some((c) => {
+            const ct = c.tagName.toLowerCase();
+            return ["p", "div", "table", "h1", "h2", "h3", "h4", "h5", "h6", "section", "article", "ul", "ol"].includes(ct);
+          });
+          if (hasChildBlocks && !["table", "tr", "td", "th", "ul", "ol", "li"].includes(tag)) {
+            extractBlocks(Array.from(item.children));
+          } else {
+            if (tag === "p" || tag === "div") {
+              item.style.display = "block";
+              item.style.marginBottom = "12px";
+              item.style.lineHeight = "1.6";
+            }
+            contentNodes.push(item);
+          }
         }
-      }
+      };
+      extractBlocks(htmlElements);
       wrapper.innerHTML = "";
       contentNodes.forEach((node) => wrapper.appendChild(node));
       const childHeights = contentNodes.map((c) => {
         const rectH = c.getBoundingClientRect ? c.getBoundingClientRect().height : 0;
         const offH = c.offsetHeight || 0;
         const textLen = c.textContent?.trim().length || 0;
-        const estH = Math.max(24, Math.ceil(textLen / 75) * 22 + 14);
+        const estH = Math.max(28, Math.ceil(textLen / 75) * 24 + 16);
         return Math.max(rectH, offH, estH);
       });
       wrapper.innerHTML = "";
@@ -4660,6 +5511,7 @@ var RtfPlugin = class {
         card.style.marginBottom = "24px";
         card.style.fontFamily = 'Calibri, "Segoe UI", Arial, sans-serif';
         card.style.lineHeight = "1.6";
+        card.style.color = "#1e293b";
         return card;
       };
       let curCard = createRtfCard();
@@ -4695,9 +5547,8 @@ var RtfPlugin = class {
         pageCard.style.padding = "72px 56px";
         pageCard.style.width = "816px";
         pageCard.style.minHeight = "1056px";
-        pageCard.style.maxWidth = "100%";
         pageCard.style.boxSizing = "border-box";
-        pageCard.style.fontFamily = "serif";
+        pageCard.style.fontFamily = 'Calibri, "Segoe UI", Arial, sans-serif';
         pageCard.style.fontSize = "12pt";
         pageCard.style.lineHeight = "1.6";
         pageCard.style.color = "#1e293b";
@@ -4710,29 +5561,6 @@ var RtfPlugin = class {
     }
     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) {
@@ -4740,9 +5568,6 @@ var RtfPlugin = class {
           el.style.display = idx + 1 === currentPage ? "block" : "none";
         });
       }
-      if (indicator) {
-        indicator.textContent = `Page ${currentPage} of ${totalPages}`;
-      }
       ctx.container.scrollTop = 0;
       ctx.emit("page-change", { page: currentPage, total: totalPages });
     };
@@ -4750,7 +5575,7 @@ var RtfPlugin = class {
       showPage(1);
     }
     const cleanup = () => {
-      indicator?.remove();
+      resizeObserver?.disconnect();
       wrapper.remove();
       ctx.container.innerHTML = "";
     };
@@ -4761,21 +5586,25 @@ var RtfPlugin = class {
       getCurrentPage: () => currentPage,
       goToPage: (page) => showPage(page),
       zoomIn: () => {
+        isUserZoomed = true;
         scale += 0.15;
         applyTransform();
       },
       zoomOut: () => {
+        isUserZoomed = true;
         scale = Math.max(0.2, scale - 0.15);
         applyTransform();
       },
       getZoom: () => scale,
       setZoom: (level) => {
+        isUserZoomed = true;
         scale = level;
         applyTransform();
       },
       fitToPage: () => {
-        fitMode = fitMode === "width" ? "page" : "width";
-        scale = calculateFitScale(fitMode);
+        isUserZoomed = false;
+        fitMode = "width";
+        scale = calculateFitScale("width");
         rotation = 0;
         applyTransform();
       },
@@ -4963,40 +5792,36 @@ var OpenDocumentPlugin = class {
     const isPresentation = instance.isPresentation;
     const totalPages = instance.getPageCount?.() ?? 1;
     const actions = [];
-    if (isPresentation || totalPages > 1) {
-      if (isPresentation) {
-        actions.push({
-          id: "thumbnails",
-          icon: "thumbnails",
-          label: "Slide Thumbnails",
-          type: "button",
-          group: "navigation",
-          execute: () => instance.toggleThumbnails?.()
-        });
-      }
-      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({
+      id: "thumbnails",
+      icon: "thumbnails",
+      label: isPresentation ? "Slide Thumbnails" : "Page Thumbnails",
+      type: "button",
+      group: "navigation",
+      execute: () => instance.toggleThumbnails?.()
+    });
+    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(
       {
         id: "zoom-out",
@@ -5087,49 +5912,65 @@ var OpenDocumentPlugin = class {
     container.className = "fp-odf-container";
     container.style.width = "100%";
     container.style.height = "100%";
-    container.style.overflow = "auto";
-    container.style.padding = "24px";
+    container.style.overflowX = "hidden";
+    container.style.overflowY = "auto";
+    container.style.padding = "16px 8px";
     container.style.backgroundColor = "#f1f5f9";
     const wrapper = document.createElement("div");
     wrapper.className = "fp-odf-wrapper";
     wrapper.style.margin = "0 auto";
+    wrapper.style.width = isPresentation ? "960px" : "816px";
+    wrapper.style.boxSizing = "border-box";
     wrapper.style.backgroundColor = "#ffffff";
     wrapper.style.boxShadow = "0 2px 10px rgba(0,0,0,0.08)";
     wrapper.style.borderRadius = "4px";
     wrapper.style.transformOrigin = "top center";
-    wrapper.style.transition = "transform 0.2s ease";
+    wrapper.style.transition = "transform 0.15s ease";
     container.appendChild(wrapper);
     ctx.container.appendChild(container);
     let scale = 1;
     let rotation = 0;
-    let fitMode = "width";
+    let isUserZoomed = false;
+    let fitMode = ctx?.options?.fitMode || "width";
+    let currentPage = 1;
+    let totalPages = 1;
+    let slides = [];
     const calculateFitScale = (mode = fitMode) => {
-      const elW = wrapper.offsetWidth || 850;
-      const singlePageH = Math.min(wrapper.offsetHeight || 1056, Math.round(elW * 1.32));
-      const availW = Math.max(280, ctx.container.clientWidth - 48);
-      const availH = Math.max(280, ctx.container.clientHeight - 80);
+      const activeSlide = slides[currentPage - 1];
+      const elW = isPresentation ? 960 : 816;
+      const singlePageH = Math.min(activeSlide?.offsetHeight || wrapper.offsetHeight || 1056, Math.round(elW * 1.32));
+      const availW = Math.max(280, ctx.container.clientWidth - 32);
+      const availH = Math.max(280, ctx.container.clientHeight - 32);
       const sW = availW / elW;
       const sH = availH / (isPresentation ? 540 : singlePageH);
       if (isPresentation) {
-        return Math.min(1, Math.min(sW, sH));
+        return Math.min(2.5, Math.min(sW, sH));
       }
       if (mode === "page") {
-        return Math.max(0.55, Math.min(1.15, Math.min(sW, sH)));
+        return Math.max(0.35, Math.min(3, Math.min(sW, sH)));
       }
-      return Math.max(0.65, Math.min(1.05, sW));
+      return Math.max(0.4, Math.min(3, sW));
     };
     const applyTransform = () => {
       wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
       wrapper.style.transformOrigin = "top center";
+      const activeSlide = slides[currentPage - 1];
+      const baseH = activeSlide?.offsetHeight || wrapper.offsetHeight || 1056;
+      const scaledH = baseH * scale;
+      const extraH = Math.max(0, scaledH - baseH);
+      wrapper.style.marginBottom = `${extraH + 32}px`;
     };
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      if (!isUserZoomed) {
+        scale = calculateFitScale(fitMode);
+        applyTransform();
+      }
+    }) : null;
+    resizeObserver?.observe(ctx.container);
     setTimeout(() => {
-      fitMode = "width";
-      scale = calculateFitScale("width");
+      scale = calculateFitScale(fitMode);
       applyTransform();
     }, 60);
-    let currentPage = 1;
-    let totalPages = 1;
-    let slides = [];
     if (isPresentation) {
       wrapper.style.maxWidth = "960px";
       wrapper.style.aspectRatio = "16 / 9";
@@ -5230,24 +6071,9 @@ var OpenDocumentPlugin = class {
         wrapper.appendChild(page);
         slides.push(page);
       });
-      const pageIndicator = document.createElement("div");
-      pageIndicator.className = "fp-odt-page-indicator";
-      pageIndicator.style.position = "sticky";
-      pageIndicator.style.bottom = "16px";
-      pageIndicator.style.left = "50%";
-      pageIndicator.style.transform = "translateX(-50%)";
-      pageIndicator.style.backgroundColor = "rgba(0, 0, 0, 0.6)";
-      pageIndicator.style.color = "#fff";
-      pageIndicator.style.padding = "6px 12px";
-      pageIndicator.style.borderRadius = "16px";
-      pageIndicator.style.fontSize = "12px";
-      pageIndicator.style.zIndex = "100";
-      pageIndicator.style.display = "inline-block";
-      pageIndicator.style.width = "fit-content";
-      pageIndicator.textContent = `Page 1 of ${totalPages}`;
-      container.appendChild(pageIndicator);
     }
     const cleanup = () => {
+      resizeObserver?.disconnect();
       imageUrls.forEach((url) => URL.revokeObjectURL(url));
       container.remove();
       ctx.container.innerHTML = "";
@@ -5259,10 +6085,6 @@ var OpenDocumentPlugin = class {
       slides.forEach((s, idx) => {
         s.style.display = idx === page - 1 ? "block" : "none";
       });
-      const indicator = container.querySelector(".fp-odt-page-indicator");
-      if (indicator) {
-        indicator.textContent = `Page ${currentPage} of ${totalPages}`;
-      }
       container.scrollTop = 0;
       ctx.emit("page-change", { page: currentPage, total: totalPages });
     };
@@ -5270,21 +6092,25 @@ var OpenDocumentPlugin = class {
       destroy: cleanup,
       isPresentation,
       zoomIn: () => {
+        isUserZoomed = true;
         scale += 0.15;
         applyTransform();
       },
       zoomOut: () => {
+        isUserZoomed = true;
         scale = Math.max(0.2, scale - 0.15);
         applyTransform();
       },
       getZoom: () => scale,
       setZoom: (level) => {
+        isUserZoomed = true;
         scale = level;
         applyTransform();
       },
       fitToPage: () => {
-        fitMode = fitMode === "width" ? "page" : "width";
-        scale = calculateFitScale(fitMode);
+        isUserZoomed = false;
+        fitMode = "width";
+        scale = calculateFitScale("width");
         rotation = 0;
         applyTransform();
       },
@@ -5300,23 +6126,45 @@ var OpenDocumentPlugin = class {
       getPageCount: () => totalPages,
       getCurrentPage: () => currentPage,
       getThumbnails: async () => {
-        if (!isPresentation) return [];
-        return slides.map((_, idx) => ({
-          index: idx,
-          label: `Slide ${idx + 1}`,
-          render: async (canvas) => {
-            const ctx2d = canvas.getContext("2d");
-            if (!ctx2d) return;
-            canvas.width = 160;
-            canvas.height = 90;
-            ctx2d.fillStyle = "#f8fafc";
-            ctx2d.fillRect(0, 0, 160, 90);
-            ctx2d.fillStyle = "#334155";
-            ctx2d.font = "bold 12px sans-serif";
-            ctx2d.textAlign = "center";
-            ctx2d.fillText(`Slide ${idx + 1}`, 80, 50);
-          }
-        }));
+        const count = totalPages || slides.length || 1;
+        const items = [];
+        for (let idx = 0; idx < count; idx++) {
+          const itemIdx = idx;
+          items.push({
+            index: itemIdx,
+            label: isPresentation ? `Slide ${itemIdx + 1}` : `Page ${itemIdx + 1}`,
+            render: async (canvas) => {
+              const ctx2d = canvas.getContext("2d");
+              if (!ctx2d) return;
+              if (isPresentation) {
+                canvas.width = 160;
+                canvas.height = 90;
+                ctx2d.fillStyle = "#f8fafc";
+                ctx2d.fillRect(0, 0, 160, 90);
+                ctx2d.strokeStyle = "#cbd5e1";
+                ctx2d.lineWidth = 1;
+                ctx2d.strokeRect(0.5, 0.5, 159, 89);
+                ctx2d.fillStyle = "#334155";
+                ctx2d.font = "bold 11px sans-serif";
+                ctx2d.textAlign = "center";
+                ctx2d.fillText(`Slide ${itemIdx + 1}`, 80, 50);
+              } else {
+                canvas.width = 140;
+                canvas.height = 180;
+                ctx2d.fillStyle = "#ffffff";
+                ctx2d.fillRect(0, 0, 140, 180);
+                ctx2d.strokeStyle = "#cbd5e1";
+                ctx2d.lineWidth = 1;
+                ctx2d.strokeRect(0.5, 0.5, 139, 179);
+                ctx2d.fillStyle = "#64748b";
+                ctx2d.font = "bold 10px sans-serif";
+                ctx2d.textAlign = "center";
+                ctx2d.fillText(`Page ${itemIdx + 1}`, 70, 90);
+              }
+            }
+          });
+        }
+        return items;
       },
       download: () => {
         const mimeType = this.mimeTypes.find((m) => m.includes(ext.replace(".", ""))) || "application/octet-stream";
@@ -5421,23 +6269,24 @@ var OpenDocumentPlugin = class {
         case "h": {
           const level = Math.min(6, Math.max(1, Number(node.getAttribute("text:outline-level") || 1)));
           const style = styles.get(node.getAttribute("text:style-name") || "") || "";
-          html += `<h${level} style="${style}; font-family: -apple-system, BlinkMacSystemFont, sans-serif;">${node.textContent || ""}</h${level}>`;
+          html += `<h${level} style="${style}; margin: 18px 0 8px; color: #1e3a8a; font-family: Calibri, 'Segoe UI', Arial, sans-serif;">${node.textContent || ""}</h${level}>`;
           break;
         }
         case "p": {
           const style = styles.get(node.getAttribute("text:style-name") || "") || "";
           const inner = this.renderSpans(node, styles, images);
-          html += `<p style="${style}; line-height: 1.6; margin: 8px 0; font-family: -apple-system, BlinkMacSystemFont, sans-serif;">${inner}</p>`;
+          const isInsideLi = node.parentElement?.localName === "list-item" || node.parentElement?.tagName?.toLowerCase() === "list-item";
+          html += `<p style="${style}; line-height: 1.5; margin: ${isInsideLi ? "0" : "8px 0 12px"}; font-family: Calibri, 'Segoe UI', Arial, sans-serif;">${inner}</p>`;
           break;
         }
         case "list": {
-          html += '<ul style="margin: 8px 0; padding-left: 24px;">';
+          html += '<ul style="margin: 8px 0 12px; padding-left: 24px;">';
           Array.from(node.children).forEach((c) => walk(c));
           html += "</ul>";
           break;
         }
         case "list-item": {
-          html += "<li>";
+          html += '<li style="margin: 4px 0; font-size: 11pt; line-height: 1.5; color: #1e293b;">';
           Array.from(node.children).forEach((c) => walk(c));
           html += "</li>";
           break;
@@ -5563,28 +6412,26 @@ var DocPlugin = class {
   getToolbarActions(instance) {
     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: "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",
@@ -5658,8 +6505,9 @@ var DocPlugin = class {
     container.className = "fp-doc-container";
     container.style.width = "100%";
     container.style.height = "100%";
-    container.style.overflow = "auto";
-    container.style.padding = "32px 16px";
+    container.style.overflowX = "hidden";
+    container.style.overflowY = "auto";
+    container.style.padding = "16px 8px";
     container.style.backgroundColor = "#f1f5f9";
     container.style.display = "flex";
     container.style.justifyContent = "center";
@@ -5668,8 +6516,17 @@ var DocPlugin = class {
     let scale = 1;
     let extractedRawText = "";
     let isFallback = false;
+    let chartSvg = "";
     try {
       const cfbf = new CfbfReader(ctx.buffer);
+      try {
+        const pkg = cfbf.readStream("package_stream");
+        if (pkg && pkg.length > 100) {
+          chartSvg = this.parseOdfChartToSvg(pkg);
+        }
+      } catch (chartErr) {
+        console.warn("[DocPlugin] Chart stream parsing info:", chartErr);
+      }
       const wordDocStream = cfbf.readStream("WordDocument");
       if (!wordDocStream || wordDocStream.length < 512) {
         throw new Error("WordDocument stream not found or invalid in CFBF archive");
@@ -5687,7 +6544,7 @@ var DocPlugin = class {
       extractedRawText = fallback;
       isFallback = true;
     }
-    const rawPages = this.splitIntoPages(extractedRawText);
+    const rawPages = this.splitIntoPages(extractedRawText, chartSvg);
     const totalPages = Math.max(1, rawPages.length);
     let currentPage = 1;
     const pageCards = [];
@@ -5695,16 +6552,15 @@ var DocPlugin = class {
       const pageCard = document.createElement("div");
       pageCard.className = "fp-doc-page-card";
       pageCard.style.width = "816px";
-      pageCard.style.height = "1056px";
+      pageCard.style.minHeight = "1056px";
       pageCard.style.backgroundColor = "#ffffff";
-      pageCard.style.boxShadow = "0 2px 12px rgba(0,0,0,0.08)";
+      pageCard.style.boxShadow = "0 4px 24px rgba(0,0,0,0.08)";
       pageCard.style.borderRadius = "4px";
-      pageCard.style.padding = "96px 72px";
+      pageCard.style.padding = "72px 56px";
       pageCard.style.boxSizing = "border-box";
-      pageCard.style.overflow = "hidden";
       pageCard.style.display = i === 0 ? "block" : "none";
       pageCard.style.transformOrigin = "top center";
-      pageCard.style.transition = "transform 0.2s ease";
+      pageCard.style.transition = "transform 0.15s ease";
       pageCard.style.fontFamily = 'Calibri, "Segoe UI", Arial, sans-serif';
       pageCard.style.color = "#1e293b";
       if (isFallback && i === 0) {
@@ -5721,34 +6577,15 @@ var DocPlugin = class {
       container.appendChild(pageCard);
       pageCards.push(pageCard);
     }
-    let indicator = null;
-    if (totalPages > 1) {
-      indicator = document.createElement("div");
-      indicator.className = "fp-doc-page-indicator";
-      indicator.style.position = "fixed";
-      indicator.style.bottom = "16px";
-      indicator.style.left = "50%";
-      indicator.style.transform = "translateX(-50%)";
-      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";
-      container.appendChild(indicator);
-    }
     let rotation = 0;
     const applyTransform = () => {
       const activeCard = pageCards[currentPage - 1];
       if (activeCard) {
         activeCard.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+        const baseH = activeCard.offsetHeight || 1056;
+        const scaledH = baseH * scale;
+        const extraH = Math.max(0, scaledH - baseH);
+        activeCard.style.marginBottom = `${extraH + 32}px`;
       }
     };
     const showPage = (pageNum) => {
@@ -5761,35 +6598,39 @@ var DocPlugin = class {
           card.style.display = "none";
         }
       });
-      if (indicator) {
-        indicator.textContent = `Page ${currentPage} of ${totalPages}`;
-      }
       container.scrollTop = 0;
       ctx.emit("page-change", { page: currentPage, total: totalPages });
     };
     if (totalPages > 1) {
       showPage(1);
     }
-    let fitMode = "width";
+    let fitMode = ctx?.options?.fitMode || "width";
+    let isUserZoomed = false;
     const calculateFitScale = (mode = fitMode) => {
       const elW = 816;
       const elH = 1056;
-      const availW = Math.max(280, ctx.container.clientWidth - 48);
-      const availH = Math.max(280, ctx.container.clientHeight - 80);
+      const availW = Math.max(280, ctx.container.clientWidth - 32);
+      const availH = Math.max(280, ctx.container.clientHeight - 32);
       const sW = availW / elW;
       const sH = availH / elH;
       if (mode === "page") {
-        return Math.max(0.55, Math.min(1.15, Math.min(sW, sH)));
+        return Math.max(0.35, Math.min(3, Math.min(sW, sH)));
       }
-      return Math.max(0.65, Math.min(1.05, sW));
+      return Math.max(0.4, Math.min(3, sW));
     };
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      if (!isUserZoomed) {
+        scale = calculateFitScale(fitMode);
+        applyTransform();
+      }
+    }) : null;
+    resizeObserver?.observe(ctx.container);
     setTimeout(() => {
-      fitMode = "width";
-      scale = calculateFitScale("width");
+      scale = calculateFitScale(fitMode);
       applyTransform();
     }, 60);
     const cleanup = () => {
-      indicator?.remove();
+      resizeObserver?.disconnect();
       container.remove();
       ctx.container.innerHTML = "";
     };
@@ -5800,21 +6641,25 @@ var DocPlugin = class {
       getCurrentPage: () => currentPage,
       goToPage: (page) => showPage(page),
       zoomIn: () => {
+        isUserZoomed = true;
         scale += 0.15;
         applyTransform();
       },
       zoomOut: () => {
+        isUserZoomed = true;
         scale = Math.max(0.2, scale - 0.15);
         applyTransform();
       },
       getZoom: () => scale,
       setZoom: (level) => {
+        isUserZoomed = true;
         scale = level;
         applyTransform();
       },
       fitToPage: () => {
-        fitMode = fitMode === "width" ? "page" : "width";
-        scale = calculateFitScale(fitMode);
+        isUserZoomed = false;
+        fitMode = "width";
+        scale = calculateFitScale("width");
         rotation = 0;
         applyTransform();
       },
@@ -5929,7 +6774,7 @@ var DocPlugin = class {
     for (const run of [...ansiRuns, ...utf16Runs]) {
       const trimmed = run.trim();
       if (trimmed.length >= 4 && /[a-zA-Z]/.test(trimmed) && !seen.has(trimmed)) {
-        if (!trimmed.includes("Normal.dot") && !trimmed.includes("Microsoft Word") && !trimmed.includes("Times New Roman") && !trimmed.startsWith("\xD0\xCF\xE0\xA1\xB1\xE1") && !/^[\W_0-9]+$/.test(trimmed)) {
+        if (!trimmed.includes("Normal.dot") && !trimmed.includes("Microsoft Word") && !trimmed.includes("Times New Roman") && !trimmed.startsWith("\xD0\xCF\xE0\xA1\xB1\xE1") && !/^EMBED\b/i.test(trimmed) && !trimmed.includes("ChartDocument") && !/^[\W_0-9]+$/.test(trimmed)) {
           seen.add(trimmed);
           candidateLines.push(trimmed);
         }
@@ -5940,9 +6785,114 @@ var DocPlugin = class {
   heuristicTextExtraction(buffer) {
     return this.extractStringsFromBytes(new Uint8Array(buffer));
   }
-  cleanWordDocFields(text) {
+  /**
+   * Parses an embedded OpenDocument Chart package into a vector SVG bar/column chart
+   */
+  parseOdfChartToSvg(zipBytes) {
+    try {
+      const unzipped = fflate.unzipSync(zipBytes);
+      const contentXml = unzipped["content.xml"] ? new TextDecoder("utf-8").decode(unzipped["content.xml"]) : "";
+      if (!contentXml) return "";
+      const rowsMatch = contentXml.match(/<table:table-row[\s\S]*?<\/table:table-row>/g) || [];
+      if (rowsMatch.length < 2) return "";
+      const headers = [];
+      const firstRow = rowsMatch[0];
+      const headerCells = firstRow ? firstRow.match(/<text:p>([^<]+)<\/text:p>/g) || [] : [];
+      for (const h2 of headerCells) {
+        headers.push(h2.replace(/<\/?text:p>/g, "").trim());
+      }
+      const categories = [];
+      const seriesValues = headers.map(() => []);
+      for (let r = 1; r < rowsMatch.length; r++) {
+        const rowStr = rowsMatch[r];
+        if (!rowStr) continue;
+        const cells = rowStr.match(/<table:table-cell[\s\S]*?<\/table:table-cell>/g) || [];
+        if (cells.length > 0 && cells[0]) {
+          const catMatch = cells[0].match(/<text:p>([^<]+)<\/text:p>/);
+          categories.push(catMatch ? catMatch[1] : "Row " + r);
+          for (let c = 1; c < cells.length && c - 1 < headers.length; c++) {
+            const cellStr = cells[c];
+            if (!cellStr) continue;
+            const valMatch = cellStr.match(/office:value="([0-9.]+)"/) || cellStr.match(/<text:p>([0-9.]+)<\/text:p>/);
+            const series = seriesValues[c - 1];
+            if (series) {
+              series.push(valMatch ? parseFloat(valMatch[1]) : 0);
+            }
+          }
+        }
+      }
+      const colors = ["#004586", "#ff420e", "#ffd320", "#579d1c", "#7e0021"];
+      const colorMatches = contentXml.matchAll(/draw:fill-color="(#[0-9a-fA-F]{6})"/g);
+      let cIdx = 0;
+      for (const cm of colorMatches) {
+        if (cIdx < colors.length) colors[cIdx] = cm[1];
+        cIdx++;
+      }
+      let maxVal = 10;
+      for (const s of seriesValues) {
+        for (const v of s) {
+          if (v > maxVal) maxVal = v;
+        }
+      }
+      maxVal = Math.ceil(maxVal * 1.15);
+      const width = 560;
+      const height = 280;
+      const padLeft = 45;
+      const padRight = 100;
+      const padTop = 20;
+      const padBottom = 40;
+      const chartW = width - padLeft - padRight;
+      const chartH = height - padTop - padBottom;
+      let svg = `<svg viewBox="0 0 ${width} ${height}" width="100%" height="auto" style="max-width: 560px; height: 280px; margin: 16px auto; display: block; font-family: Calibri, sans-serif; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);">`;
+      for (let step = 0; step <= 4; step++) {
+        const yVal = (maxVal / 4 * step).toFixed(1);
+        const yPos = padTop + chartH - step / 4 * chartH;
+        svg += `<line x1="${padLeft}" y1="${yPos}" x2="${padLeft + chartW}" y2="${yPos}" stroke="#e2e8f0" stroke-dasharray="2,2" />`;
+        svg += `<text x="${padLeft - 8}" y="${yPos + 4}" font-size="11" fill="#64748b" text-anchor="end">${yVal}</text>`;
+      }
+      const numCats = categories.length;
+      const numSeries = headers.length;
+      const groupW = chartW / numCats;
+      const barW = Math.max(8, groupW * 0.7 / numSeries);
+      const groupPad = (groupW - barW * numSeries) / 2;
+      for (let catIdx = 0; catIdx < numCats; catIdx++) {
+        const groupX = padLeft + catIdx * groupW + groupPad;
+        for (let sIdx = 0; sIdx < numSeries; sIdx++) {
+          const val = seriesValues[sIdx][catIdx] || 0;
+          const barH = val / maxVal * chartH;
+          const barX = groupX + sIdx * barW;
+          const barY = padTop + chartH - barH;
+          const col = colors[sIdx % colors.length];
+          svg += `<rect x="${barX}" y="${barY}" width="${barW - 2}" height="${barH}" fill="${col}" rx="2"><title>${headers[sIdx]}: ${val}</title></rect>`;
+        }
+        const catX = padLeft + catIdx * groupW + groupW / 2;
+        svg += `<text x="${catX}" y="${padTop + chartH + 18}" font-size="11" fill="#475569" text-anchor="middle">${categories[catIdx]}</text>`;
+      }
+      let legendY = padTop + 20;
+      for (let sIdx = 0; sIdx < numSeries; sIdx++) {
+        const col = colors[sIdx % colors.length];
+        svg += `<rect x="${padLeft + chartW + 15}" y="${legendY}" width="12" height="12" fill="${col}" rx="2" />`;
+        svg += `<text x="${padLeft + chartW + 32}" y="${legendY + 10}" font-size="11" fill="#334155">${headers[sIdx]}</text>`;
+        legendY += 20;
+      }
+      svg += "</svg>";
+      return svg;
+    } catch (e) {
+      console.warn("[DocPlugin] Error generating chart SVG:", e);
+      return "";
+    }
+  }
+  cleanWordDocFields(text, chartSvg = "") {
     if (!text) return "";
     let cleaned = text.replace(
+      /\x13\s*EMBED\b[\s\S]*?\x15/gi,
+      () => chartSvg ? `
+
+${chartSvg}
+
+` : ""
+    );
+    cleaned = cleaned.replace(
       /\x13\s*HYPERLINK\s*"?([^"\x14]+)"?\s*\x14([\s\S]*?)\x15/gi,
       (_match, url, label) => {
         const cleanUrl = url.trim();
@@ -5950,18 +6900,23 @@ var DocPlugin = class {
         return `<a href="${cleanUrl}" target="_blank" rel="noopener noreferrer" style="color: #2563eb; text-decoration: underline;">${cleanLabel}</a>`;
       }
     );
-    cleaned = cleaned.replace(/\x13[^\x14\x15]*\x14([^\x15]*)\x15/g, "$1");
+    cleaned = cleaned.replace(/\x13[^\x14\x15]*\x14([^\x15]*)\x15/g, (_m, res) => {
+      if (/[\x00-\x1F]/.test(res)) return "";
+      return res.trim();
+    });
     cleaned = cleaned.replace(/\x13[^\x15]*\x15/g, "");
     cleaned = cleaned.replace(/[\x13\x14\x15]/g, "");
+    cleaned = cleaned.replace(/[\x00-\x08\x0B-\x0C\x0E-\x1F\x7F]/g, "");
+    cleaned = cleaned.replace(/EMBED\s+LibreOffice\.ChartDocument\.[0-9]+/gi, chartSvg || "");
     return cleaned;
   }
-  splitIntoPages(text) {
+  splitIntoPages(text, chartSvg = "") {
     if (!text) return [""];
-    const cleanedText = this.cleanWordDocFields(text);
+    const cleanedText = this.cleanWordDocFields(text, chartSvg);
     const normalized = cleanedText.replace(/\r\n/g, "\n").replace(/\r/g, "\n").replace(/\x0B/g, "\n").replace(/\x07\n/g, "\n").replace(/\x07/g, "	");
     const explicitParts = normalized.split(/[\x0C\f]|\n\s*[-=_]{3,}\s*(?:PAGE|Page|page break)[\s\d\w-]*[-=_]{3,}\s*\n/i).map((p) => p.trim()).filter((p) => p.length > 0);
     if (explicitParts.length === 0) explicitParts.push(normalized);
-    const maxLinesPerPage = 32;
+    const maxLinesPerPage = 34;
     const charsPerLine = 80;
     const finalPages = [];
     for (const part of explicitParts) {
@@ -5969,8 +6924,8 @@ var DocPlugin = class {
       let currentLines = [];
       let count = 0;
       for (const line of lines) {
-        const plainLine = line.replace(/<[^>]+>/g, "");
-        const vLines = Math.max(1, Math.ceil((plainLine.length || 1) / charsPerLine));
+        const isSvg = line.includes("<svg");
+        const vLines = isSvg ? 12 : Math.max(1, Math.ceil((line.replace(/<[^>]+>/g, "").length || 1) / charsPerLine));
         if (count + vLines > maxLinesPerPage && currentLines.length > 0) {
           finalPages.push(currentLines.join("\n"));
           currentLines = [];
@@ -6010,9 +6965,44 @@ var DocPlugin = class {
         tableLines = [];
       }
     };
+    const sanitizeOptions = {
+      ADD_TAGS: ["a", "svg", "g", "path", "line", "rect", "circle", "text", "title"],
+      ADD_ATTR: [
+        "href",
+        "target",
+        "rel",
+        "style",
+        "viewBox",
+        "width",
+        "height",
+        "x",
+        "y",
+        "x1",
+        "y1",
+        "x2",
+        "y2",
+        "fill",
+        "stroke",
+        "stroke-width",
+        "stroke-dasharray",
+        "rx",
+        "font-size",
+        "text-anchor"
+      ]
+    };
     let i = 0;
     while (i < lines.length) {
       let line = lines[i];
+      if (line.includes("<svg")) {
+        if (inList) {
+          html += "</ul>";
+          inList = false;
+        }
+        flushTable();
+        html += line;
+        i++;
+        continue;
+      }
       let tabCount = (line.match(/\t/g) || []).length;
       if (tabCount > 0) {
         let j = i;
@@ -6046,26 +7036,31 @@ var DocPlugin = class {
         i++;
         continue;
       }
-      const sanitizeOptions = { ADD_TAGS: ["a"], ADD_ATTR: ["href", "target", "rel", "style"] };
-      if (line.length < 60 && !line.endsWith(".") && (/^[A-Z0-9\s:_-]+$/.test(line) || line.startsWith("#"))) {
+      if (/^\d{1,2}$/.test(line.trim())) {
+        i++;
+        continue;
+      }
+      const isShortLine = line.length < 60 && !line.endsWith(".") && !line.endsWith(",");
+      const isTitleLike = isShortLine && (/^[A-Z0-9\s:_-]+$/.test(line) || line.startsWith("#") || /^(?:Chapter|Section|Part|\d+\.)\b/i.test(line) || /^[A-Z][a-zA-Z0-9\s#:-]{2,45}$/.test(line));
+      if (isTitleLike) {
         if (inList) {
           html += "</ul>";
           inList = false;
         }
-        html += `<h2 style="font-size: 16px; font-weight: 700; color: #1e3a8a; margin: 16px 0 8px; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px;">${DOMPurify6.sanitize(line, sanitizeOptions)}</h2>`;
+        html += `<h2 style="font-size: 18px; font-weight: 700; color: #1e3a8a; margin: 18px 0 10px; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px;">${DOMPurify6.sanitize(line, sanitizeOptions)}</h2>`;
       } else if (line.startsWith("\u2022") || line.startsWith("-") || line.startsWith("*")) {
         if (!inList) {
-          html += '<ul style="margin: 8px 0; padding-left: 24px;">';
+          html += '<ul style="margin: 8px 0 12px; padding-left: 24px;">';
           inList = true;
         }
         const bulletText = line.replace(/^[•\-\*]\s*/, "");
-        html += `<li style="margin: 4px 0; line-height: 1.15; font-size: 12pt;">${DOMPurify6.sanitize(bulletText, sanitizeOptions)}</li>`;
+        html += `<li style="margin: 4px 0; line-height: 1.5; font-size: 11pt; color: #1e293b;">${DOMPurify6.sanitize(bulletText, sanitizeOptions)}</li>`;
       } else {
         if (inList) {
           html += "</ul>";
           inList = false;
         }
-        html += `<p style="line-height: 1.15; margin: 0; font-size: 12pt; text-align: justify;">${DOMPurify6.sanitize(line, sanitizeOptions)}</p>`;
+        html += `<p style="line-height: 1.5; margin: 0 0 12px 0; font-size: 11pt; color: #1e293b; text-align: justify;">${DOMPurify6.sanitize(line, sanitizeOptions)}</p>`;
       }
       i++;
     }