@files-preview-app/preview-file 1.3.1 → 1.3.3

package/dist/react.cjs

@@ -528,8 +528,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,
@@ -556,28 +555,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;
@@ -600,8 +748,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);
@@ -661,6 +810,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);
@@ -716,25 +872,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");
       }
@@ -742,37 +936,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);
       }
     }
   }
@@ -793,6 +1052,7 @@ var FilePreviewViewer = class _FilePreviewViewer {
   currentOptions = {};
   resizeObserver = null;
   fullscreenHandler = null;
+  titleBarEl = null;
   /**
    * Register a preview plugin.
    */
@@ -829,6 +1089,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);
@@ -852,15 +1113,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) {
@@ -910,6 +1177,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();
       }
@@ -994,7 +1267,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;
@@ -1002,7 +1275,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;
@@ -1079,6 +1352,7 @@ var FilePreviewViewer = class _FilePreviewViewer {
     this.currentBuffer = null;
     this.currentMetadata = null;
     this.currentContainer = null;
+    this.titleBarEl = null;
   }
   /**
    * Get the currently active preview instance.
@@ -1086,7 +1360,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();
@@ -1129,17 +1614,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();
@@ -1529,6 +2026,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",
@@ -1537,6 +2042,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",
@@ -1568,12 +2081,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";
@@ -1584,30 +2098,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/";
@@ -1623,8 +2119,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 {
@@ -1636,30 +2133,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);
@@ -1673,9 +2177,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__namespace.TextLayer) {
+          const textLayer = new pdfjsLib__namespace.TextLayer({
+            textContentSource: page.streamTextContent(),
+            container: textLayerDiv,
+            viewport
+          });
+          await textLayer.render();
+        }
+      } catch (err) {
+        console.debug("[PdfPlugin] TextLayer notice:", err);
+      }
     };
     renderPage(1);
     let resizeTimer = null;
@@ -1685,11 +2211,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 {
@@ -1708,22 +2271,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: () => {
@@ -1741,6 +2308,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);
@@ -1774,7 +2344,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,
@@ -1782,9 +2352,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) {
@@ -2128,28 +2699,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",
@@ -2215,11 +2784,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");
@@ -2393,39 +2968,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 });
     };
@@ -2434,31 +2983,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);
       }
@@ -2475,21 +3039,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();
       },
@@ -2879,7 +3446,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();
@@ -2891,6 +3458,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",
@@ -2934,26 +3509,6 @@ var ExcelPlugin = class {
           instance.zoomIn?.();
         }
       },
-      {
-        id: "fit-page",
-        icon: "fit-page",
-        label: "Fit to View",
-        type: "button",
-        group: "zoom",
-        execute: () => {
-          instance.fitToPage?.();
-        }
-      },
-      {
-        id: "rotate-cw",
-        icon: "rotate-cw",
-        label: "Rotate",
-        type: "button",
-        group: "view",
-        execute: () => {
-          instance.rotateCW?.();
-        }
-      },
       {
         id: "download",
         icon: "download",
@@ -2973,6 +3528,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;
@@ -3004,12 +3569,11 @@ var ExcelPlugin = class {
     container.appendChild(tabsArea);
     ctx.container.appendChild(container);
     let scale = 1;
-    let rotation = 0;
     let currentSheetIndex = 1;
     let sheetNames = [];
     let wb = null;
     const applyTransform = () => {
-      contentArea.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+      contentArea.style.transform = `scale(${scale})`;
       contentArea.style.transformOrigin = "top left";
     };
     const calculateFitScale = () => {
@@ -3017,7 +3581,7 @@ var ExcelPlugin = class {
       if (!table) return 1;
       const availW = Math.max(280, container.clientWidth - 48);
       const tW = table.offsetWidth || 800;
-      return Math.max(0.65, Math.min(1, availW / tW));
+      return Math.max(0.4, Math.min(1, availW / tW));
     };
     try {
       wb = XLSX__namespace.read(new Uint8Array(ctx.buffer), { type: "array", cellDates: true });
@@ -3072,7 +3636,16 @@ var ExcelPlugin = class {
         }
       });
       ctx.emit("page-change", { page: currentSheetIndex, total: sheetNames.length });
+      requestAnimationFrame(() => {
+        scale = calculateFitScale();
+        applyTransform();
+      });
     };
+    const ro = new ResizeObserver(() => {
+      scale = calculateFitScale();
+      applyTransform();
+    });
+    ro.observe(container);
     if (sheetNames.length > 0) {
       sheetNames.forEach((name, idx) => {
         const btn = document.createElement("button");
@@ -3099,6 +3672,7 @@ var ExcelPlugin = class {
       `;
     }
     const cleanup = () => {
+      ro.disconnect();
       container.remove();
       ctx.container.innerHTML = "";
     };
@@ -3120,16 +3694,11 @@ var ExcelPlugin = class {
       },
       fitToPage: () => {
         scale = calculateFitScale();
-        rotation = 0;
         applyTransform();
       },
       rotateCW: () => {
-        rotation = (rotation + 90) % 360;
-        applyTransform();
       },
       rotateCCW: () => {
-        rotation = (rotation - 90 + 360) % 360;
-        applyTransform();
       },
       goToPage: (page) => {
         if (page > 0 && page <= sheetNames.length) {
@@ -3138,6 +3707,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);
@@ -3170,7 +3796,16 @@ var CsvPlugin = class {
     return ext === ".csv" || ext === ".tsv" || mime === "text/csv" || mime === "text/tab-separated-values";
   }
   getToolbarActions(instance) {
-    return [
+    const actions = [];
+    actions.push({
+      id: "thumbnails",
+      icon: "thumbnails",
+      label: "Sheet Thumbnails",
+      type: "button",
+      group: "navigation",
+      execute: () => instance.toggleThumbnails?.()
+    });
+    actions.push(
       {
         id: "zoom-out",
         icon: "zoom-out",
@@ -3210,8 +3845,19 @@ var CsvPlugin = 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;
   }
   async render(ctx) {
     const decoder = new TextDecoder("utf-8");
@@ -3222,57 +3868,156 @@ var CsvPlugin = class {
     container.style.overflow = "auto";
     container.style.padding = "16px";
     container.style.boxSizing = "border-box";
-    container.style.transformOrigin = "top left";
+    const tableWrapper = document.createElement("div");
+    tableWrapper.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 table = document.createElement("table");
     table.style.borderCollapse = "collapse";
-    table.style.width = "100%";
-    table.style.fontFamily = "monospace";
+    table.style.minWidth = "100%";
+    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;
+    table.style.background = "#ffffff";
+    table.style.border = "1px solid #d0d7de";
+    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(headerTr);
+    dataLines.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(rowIndex === 0 ? "th" : "td");
+        const td = document.createElement("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";
-        }
+        td.style.whiteSpace = "nowrap";
         tr.appendChild(td);
       });
       table.appendChild(tr);
     });
-    container.appendChild(table);
+    tableWrapper.appendChild(table);
+    container.appendChild(tableWrapper);
     ctx.container.appendChild(container);
     let scale = 1;
+    const calculateFitScale = () => {
+      const availW = Math.max(280, container.clientWidth - 48);
+      const tW = table.offsetWidth || 800;
+      return Math.max(0.4, Math.min(1, availW / tW));
+    };
+    const applyScale = () => {
+      tableWrapper.style.transform = `scale(${scale})`;
+    };
+    requestAnimationFrame(() => {
+      scale = calculateFitScale();
+      applyScale();
+    });
+    const ro = new ResizeObserver(() => {
+      scale = calculateFitScale();
+      applyScale();
+    });
+    ro.observe(container);
     const cleanup = () => {
+      ro.disconnect();
       container.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
     return {
       destroy: cleanup,
+      getPageCount: () => 1,
+      getCurrentPage: () => 1,
+      goToPage: () => {
+      },
+      getThumbnails: () => {
+        const sheetName = ctx.metadata.name?.replace(/\.[^/.]+$/, "") || "Sheet1";
+        return [{
+          index: 0,
+          label: sheetName,
+          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} ${sheetName.slice(0, 16)}`, 6, 11);
+            const startY = 17;
+            const rowH = 13;
+            const colW = 30;
+            const cols = headerCells.slice(0, 4).map((h) => h.trim() || "Col");
+            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.length; ci++) {
+              c.fillText(cols[ci].slice(0, 5), 14 + ci * colW, startY + 9);
+            }
+            for (let ri = 0; ri < Math.min(5, dataLines.length); ri++) {
+              const y = startY + (ri + 1) * 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 + 1), 3, y + 9);
+              c.strokeStyle = "#e2e8f0";
+              c.strokeRect(0, y, canvas.width, rowH);
+              const rowCells = dataLines[ri].split(delimiter);
+              c.fillStyle = "#334155";
+              c.font = "6px sans-serif";
+              for (let ci = 0; ci < cols.length; ci++) {
+                const val = (rowCells[ci] || "").trim();
+                if (val) {
+                  c.fillText(val.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);
+          }
+        }];
+      },
       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)`;
+        scale = calculateFitScale();
+        applyScale();
+      },
+      rotateCW: () => {
+      },
+      rotateCCW: () => {
       },
       download: () => {
         const blob = new Blob([ctx.buffer], { type: "text/csv" });
@@ -3334,30 +4079,36 @@ var CodePlugin = class {
     return false;
   }
   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);
-          }
+    const totalPages = instance.getPageCount?.() ?? 1;
+    const actions = [];
+    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",
@@ -3379,26 +4130,6 @@ var CodePlugin = class {
           instance.zoomIn?.();
         }
       },
-      {
-        id: "fit-page",
-        icon: "fit-page",
-        label: "Fit to View",
-        type: "button",
-        group: "zoom",
-        execute: () => {
-          instance.fitToPage?.();
-        }
-      },
-      {
-        id: "rotate-cw",
-        icon: "rotate-cw",
-        label: "Rotate",
-        type: "button",
-        group: "view",
-        execute: () => {
-          instance.rotateCW?.();
-        }
-      },
       {
         id: "copy",
         icon: "copy",
@@ -3501,16 +4232,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";
@@ -3522,10 +4256,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";
@@ -3557,42 +4293,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 });
     };
@@ -3600,36 +4303,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);
         }
@@ -3637,6 +4394,7 @@ var CodePlugin = class {
       },
       getZoom: () => isTxt ? zoomLevel : fontSize / 13,
       setZoom: (level) => {
+        isUserZoomed = true;
         if (isTxt) {
           zoomLevel = level;
         } else {
@@ -3645,9 +4403,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: () => {
@@ -4514,6 +5273,148 @@ var ThreeDPlugin = class {
 function threeDPlugin() {
   return new ThreeDPlugin();
 }
+function cleanRtfText(raw) {
+  return raw.replace(/\\bin\d+\s/g, "").replace(/{\\\*[^}]+}/g, "").replace(/\\u(-?\d+)\??/g, (_, code) => {
+    let num = parseInt(code, 10);
+    if (num < 0) num += 65536;
+    return String.fromCharCode(num);
+  }).replace(/\\'([0-9a-fA-F]{2})/g, (_, hex) => {
+    return String.fromCharCode(parseInt(hex, 16));
+  }).replace(/\\tab\b/g, " ").replace(/\\emdash\b/g, "\u2014").replace(/\\endash\b/g, "\u2013").replace(/\\bullet\b/g, "\u2022").replace(/\\lquote\b/g, "\u2018").replace(/\\rquote\b/g, "\u2019").replace(/\\ldblquote\b/g, "\u201C").replace(/\\rdblquote\b/g, "\u201D").replace(/\\\w+(?:-?\d+)?\s?/g, " ").replace(/[{}\r\n]/g, " ").replace(/\s+/g, " ").trim();
+}
+function parseRtfTables(rtfText) {
+  const rowSegments = rtfText.split(/\\row\b/);
+  if (rowSegments.length <= 1) return [];
+  const rawTables = [];
+  let currentTable = null;
+  let charOffset = 0;
+  for (let i = 0; i < rowSegments.length - 1; i++) {
+    const segment = rowSegments[i];
+    const segmentStart = charOffset;
+    const segmentEnd = charOffset + segment.length + 4;
+    const cellParts = segment.split(/\\cell\b/);
+    if (cellParts.length > 1) {
+      const cellxMatches = [...segment.matchAll(/\\cellx(\d+)/g)].map((m) => parseInt(m[1], 10));
+      let cellWidths = [];
+      if (cellxMatches.length > 0) {
+        let seq = [cellxMatches[0]];
+        for (let k = 1; k < cellxMatches.length; k++) {
+          if (cellxMatches[k] > cellxMatches[k - 1]) seq.push(cellxMatches[k]);
+          else break;
+        }
+        let prev = 0;
+        cellWidths = seq.map((x) => {
+          const w = x - prev;
+          prev = x;
+          return w;
+        });
+      }
+      const cells = [];
+      for (let c = 0; c < cellParts.length - 1; c++) {
+        let rawCell = cellParts[c];
+        if (c === 0) {
+          const lastTrowd = rawCell.lastIndexOf("\\trowd");
+          if (lastTrowd !== -1) rawCell = rawCell.slice(lastTrowd);
+        }
+        cells.push(cleanRtfText(rawCell));
+      }
+      const isNewTable = !currentTable || segmentStart - currentTable.lastEnd > 2500;
+      if (isNewTable) {
+        const prevTextSlice = rtfText.slice(Math.max(0, segmentStart - 4e3), segmentStart);
+        const cleanPrev = cleanRtfText(prevTextSlice);
+        const anchorBefore = cleanPrev.slice(-80).trim();
+        currentTable = {
+          id: `RTF_TABLE_${rawTables.length}`,
+          startPos: segmentStart,
+          lastEnd: segmentEnd,
+          rows: [],
+          columnWidths: cellWidths,
+          anchorBefore,
+          anchorAfter: ""
+        };
+        rawTables.push(currentTable);
+      }
+      if (currentTable) {
+        currentTable.rows.push({
+          cells,
+          widths: cellWidths.length === cells.length ? cellWidths : currentTable.columnWidths
+        });
+        currentTable.lastEnd = segmentEnd;
+      }
+    }
+    charOffset += segment.length + 4;
+  }
+  rawTables.forEach((tbl) => {
+    const afterSlice = rtfText.slice(tbl.lastEnd, Math.min(rtfText.length, tbl.lastEnd + 2e3));
+    const cleanAfter = cleanRtfText(afterSlice);
+    tbl.anchorAfter = cleanAfter.slice(0, 80).trim();
+  });
+  return rawTables.map((tbl) => {
+    const totalW = (tbl.columnWidths || []).reduce((a, b) => a + b, 0);
+    const colPercents = totalW > 0 ? tbl.columnWidths.map((w) => Math.round(w / totalW * 100)) : [];
+    return {
+      id: tbl.id,
+      rows: tbl.rows.map((r) => r.cells),
+      colPercents,
+      anchorBefore: tbl.anchorBefore,
+      anchorAfter: tbl.anchorAfter
+    };
+  });
+}
+function renderRtfTableElement(table) {
+  const tableEl = document.createElement("table");
+  tableEl.className = "fp-rtf-table";
+  tableEl.style.width = "100%";
+  tableEl.style.borderCollapse = "collapse";
+  tableEl.style.margin = "16px 0 20px";
+  tableEl.style.fontSize = "10pt";
+  tableEl.style.lineHeight = "1.5";
+  tableEl.style.border = "1px solid #cbd5e1";
+  tableEl.style.borderRadius = "4px";
+  tableEl.style.boxSizing = "border-box";
+  tableEl.style.backgroundColor = "#ffffff";
+  const thead = document.createElement("thead");
+  const tbody = document.createElement("tbody");
+  table.rows.forEach((rowCells, rIdx) => {
+    const tr = document.createElement("tr");
+    const isHeader = rIdx === 0;
+    if (isHeader) {
+      tr.style.backgroundColor = "#f8fafc";
+      tr.style.borderBottom = "2px solid #cbd5e1";
+    } else {
+      tr.style.borderBottom = "1px solid #e2e8f0";
+      if (rIdx % 2 === 0) {
+        tr.style.backgroundColor = "#fcfdfe";
+      }
+    }
+    rowCells.forEach((cellText, cIdx) => {
+      const cellEl = document.createElement(isHeader ? "th" : "td");
+      cellEl.style.padding = "8px 12px";
+      cellEl.style.border = "1px solid #cbd5e1";
+      cellEl.style.verticalAlign = "top";
+      cellEl.style.color = isHeader ? "#0f172a" : "#1e293b";
+      cellEl.style.fontWeight = isHeader ? "600" : "normal";
+      if (table.colPercents && table.colPercents[cIdx]) {
+        cellEl.style.width = `${table.colPercents[cIdx]}%`;
+      }
+      if (/^\d+$/.test(cellText.trim()) || cellText.trim() === "#") {
+        cellEl.style.textAlign = "center";
+      } else {
+        cellEl.style.textAlign = "left";
+      }
+      cellEl.textContent = cellText;
+      tr.appendChild(cellEl);
+    });
+    if (isHeader) {
+      thead.appendChild(tr);
+    } else {
+      tbody.appendChild(tr);
+    }
+  });
+  tableEl.appendChild(thead);
+  tableEl.appendChild(tbody);
+  return tableEl;
+}
 var RtfPlugin = class {
   id = "rtf";
   name = "Rich Text Format (RTF)";
@@ -4528,29 +5429,35 @@ 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: "thumbnails",
+        icon: "thumbnails",
+        label: "Thumbnails",
+        type: "button",
+        group: "view",
+        execute: () => instance.toggleThumbnails?.()
+      },
       {
         id: "zoom-out",
         icon: "zoom-out",
@@ -4621,67 +5528,143 @@ 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 {
       if (typeof RTFJS__namespace.loggingEnabled === "function") {
         RTFJS__namespace.loggingEnabled(false);
       }
+      const rawText = new TextDecoder("latin1").decode(ctx.buffer);
+      const tables = parseRtfTables(rawText);
       const doc = new RTFJS__namespace.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 {
+            const svgs = item.querySelectorAll("svg, img");
+            svgs.forEach((s) => {
+              const el = s;
+              el.style.maxWidth = "100%";
+              el.style.maxHeight = "360px";
+              el.style.display = "block";
+              el.style.margin = "12px auto";
+              if (s.tagName.toLowerCase() === "svg") {
+                s.removeAttribute("width");
+                s.removeAttribute("height");
+                el.style.width = "100%";
+                el.style.maxHeight = "360px";
+              }
+            });
+            if (tag === "p" || tag === "div") {
+              item.style.display = "block";
+              item.style.marginBottom = "12px";
+              item.style.lineHeight = "1.6";
+            }
+            contentNodes.push(item);
+          }
         }
-      }
+      };
+      extractBlocks(htmlElements);
+      tables.forEach((table) => {
+        const tableEl = renderRtfTableElement(table);
+        let inserted = false;
+        if (table.anchorBefore && table.anchorBefore.length > 10) {
+          const keyword = table.anchorBefore.slice(-35).trim();
+          for (let i = 0; i < contentNodes.length; i++) {
+            if (contentNodes[i].textContent?.includes(keyword)) {
+              contentNodes.splice(i + 1, 0, tableEl);
+              inserted = true;
+              break;
+            }
+          }
+        }
+        if (!inserted && table.anchorAfter && table.anchorAfter.length > 10) {
+          const keyword = table.anchorAfter.slice(0, 35).trim();
+          for (let i = 0; i < contentNodes.length; i++) {
+            if (contentNodes[i].textContent?.includes(keyword)) {
+              contentNodes.splice(i, 0, tableEl);
+              inserted = true;
+              break;
+            }
+          }
+        }
+        if (!inserted) {
+          if (contentNodes.length > 2) {
+            contentNodes.splice(2, 0, tableEl);
+          } else {
+            contentNodes.push(tableEl);
+          }
+        }
+      });
       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 realH = Math.max(rectH, offH);
+        if (realH > 0) return realH;
         const textLen = c.textContent?.trim().length || 0;
-        const estH = Math.max(24, Math.ceil(textLen / 75) * 22 + 14);
-        return Math.max(rectH, offH, estH);
+        return Math.max(24, Math.ceil(textLen / 95) * 22 + 12);
       });
       wrapper.innerHTML = "";
       const createRtfCard = () => {
@@ -4690,35 +5673,49 @@ var RtfPlugin = class {
         card.style.backgroundColor = "#ffffff";
         card.style.boxShadow = "0 4px 24px rgba(0,0,0,0.08)";
         card.style.borderRadius = "4px";
-        card.style.padding = "72px 56px";
+        card.style.padding = "64px 56px";
         card.style.width = "816px";
         card.style.minHeight = "1056px";
         card.style.boxSizing = "border-box";
         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();
       wrapper.appendChild(curCard);
       pageElements = [curCard];
       let curH = 0;
-      const maxH = 912;
+      const maxH = 928;
       for (let i = 0; i < contentNodes.length; i++) {
         const child = contentNodes[i];
         const chH = childHeights[i];
-        curCard.appendChild(child);
-        curH += chH;
-        if (curH >= maxH && i < contentNodes.length - 1) {
+        const isChildEmpty = (child.textContent || "").trim().length === 0 && !child.querySelector("table, img, svg, canvas");
+        if (curH === 0 && isChildEmpty) {
+          continue;
+        }
+        if (curH + chH > maxH && curCard.childNodes.length > 0) {
           curCard = createRtfCard();
           wrapper.appendChild(curCard);
           pageElements.push(curCard);
           curH = 0;
         }
+        curCard.appendChild(child);
+        curH += chH;
+      }
+      pageElements = pageElements.filter((card) => {
+        const hasText = (card.textContent || "").trim().length > 0;
+        const hasMedia = card.querySelector("table, img, svg, canvas") !== null;
+        return hasText || hasMedia;
+      });
+      if (pageElements.length === 0) {
+        pageElements = [curCard];
       }
     } catch (err) {
       console.warn("[RtfPlugin] RTF render error, fallback text:", err);
       const text = new TextDecoder("latin1").decode(ctx.buffer);
+      const tables = parseRtfTables(text);
       const rawPages = text.split(/\\page\b/).map((segment) => {
         return segment.replace(/\\par[d]?/g, "\n").replace(/\\[a-zA-Z0-9\-]+/g, "").replace(/[{}]/g, "").trim();
       }).filter((p) => p.length > 0);
@@ -4729,47 +5726,26 @@ var RtfPlugin = class {
         pageCard.style.backgroundColor = "#ffffff";
         pageCard.style.boxShadow = "0 2px 12px rgba(0,0,0,0.08)";
         pageCard.style.borderRadius = "4px";
-        pageCard.style.padding = "72px 56px";
+        pageCard.style.padding = "64px 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";
         pageCard.style.whiteSpace = "pre-wrap";
         pageCard.style.display = i === 0 ? "block" : "none";
         pageCard.textContent = pages[i];
+        if (i === 1 && tables.length > 0) {
+          tables.forEach((tbl) => pageCard.appendChild(renderRtfTableElement(tbl)));
+        }
         wrapper.appendChild(pageCard);
         pageElements.push(pageCard);
       }
     }
     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) {
@@ -4777,9 +5753,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 });
     };
@@ -4787,7 +5760,7 @@ var RtfPlugin = class {
       showPage(1);
     }
     const cleanup = () => {
-      indicator?.remove();
+      resizeObserver?.disconnect();
       wrapper.remove();
       ctx.container.innerHTML = "";
     };
@@ -4797,22 +5770,52 @@ var RtfPlugin = class {
       getPageCount: () => totalPages,
       getCurrentPage: () => currentPage,
       goToPage: (page) => showPage(page),
+      getThumbnails: async () => {
+        const items = [];
+        for (let idx = 0; idx < totalPages; idx++) {
+          const pageIdx = idx;
+          items.push({
+            index: pageIdx,
+            label: `Page ${pageIdx + 1}`,
+            render: async (canvas) => {
+              const ctx2d = canvas.getContext("2d");
+              if (!ctx2d) return;
+              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 = "#334155";
+              ctx2d.font = 'bold 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+              ctx2d.textAlign = "center";
+              ctx2d.fillText(`Page ${pageIdx + 1}`, 70, 95);
+            }
+          });
+        }
+        return items;
+      },
       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();
       },
@@ -5000,40 +6003,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",
@@ -5124,49 +6123,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";
@@ -5267,24 +6282,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 = "";
@@ -5296,10 +6296,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 });
     };
@@ -5307,21 +6303,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();
       },
@@ -5337,23 +6337,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";
@@ -5458,23 +6480,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;
@@ -5600,28 +6623,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",
@@ -5695,8 +6716,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";
@@ -5741,16 +6763,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) {
@@ -5767,34 +6788,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) => {
@@ -5807,35 +6809,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 = "";
     };
@@ -5846,21 +6852,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();
       },
@@ -6237,25 +7247,31 @@ ${chartSvg}
         i++;
         continue;
       }
-      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__default.default.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__default.default.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__default.default.sanitize(bulletText, sanitizeOptions)}</li>`;
+        html += `<li style="margin: 4px 0; line-height: 1.5; font-size: 11pt; color: #1e293b;">${DOMPurify6__default.default.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__default.default.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__default.default.sanitize(line, sanitizeOptions)}</p>`;
       }
       i++;
     }
@@ -6817,6 +7833,8 @@ var FilePreview = react.memo(react.forwardRef(
     onError,
     onPageChange,
     onZoomChange,
+    onRotate,
+    onDestroy,
     className,
     style
   }, ref) => {
@@ -6839,6 +7857,8 @@ var FilePreview = react.memo(react.forwardRef(
       if (onError) unsubs.push(viewer.on("error", (e) => onError(e instanceof Error ? e : new Error(String(e)))));
       if (onPageChange) unsubs.push(viewer.on("page-change", onPageChange));
       if (onZoomChange) unsubs.push(viewer.on("zoom-change", onZoomChange));
+      if (onRotate) unsubs.push(viewer.on("rotate", onRotate));
+      if (onDestroy) unsubs.push(viewer.on("destroy", onDestroy));
       return () => {
         unsubs.forEach((fn) => fn());
         viewer.destroy();