@files-preview-app/preview-file 1.3.5 → 1.3.7

package/dist/index.cjs

@@ -610,6 +610,7 @@ var ICON_COPY = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" str
 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_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_RESET_ZOOM = `<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="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><path d="M13 11a3 3 0 1 0-3 3"></path><path d="M10 11v3h3"></path></svg>`;
 var ICON_MAP = {
   "zoom-in": ICON_ZOOM_IN,
   "zoom-out": ICON_ZOOM_OUT,
@@ -639,7 +640,10 @@ var ICON_MAP = {
   "open-window": ICON_EXTERNAL_WINDOW,
   "external-window": ICON_EXTERNAL_WINDOW,
   "openWindow": ICON_EXTERNAL_WINDOW,
-  "openSeparateWindow": ICON_EXTERNAL_WINDOW
+  "openSeparateWindow": ICON_EXTERNAL_WINDOW,
+  "reset-zoom": ICON_RESET_ZOOM,
+  "zoom-reset": ICON_RESET_ZOOM,
+  "resetZoom": ICON_RESET_ZOOM
 };
 var ToolbarController = class {
   el;
@@ -672,6 +676,10 @@ var ToolbarController = class {
       this.config.fitToPage = false;
       this.config.fitWidth = false;
     }
+    if (actionId === "reset-zoom" || actionId === "zoom-reset" || actionId === "resetZoom") {
+      this.config.resetZoom = false;
+      this.config.zoomReset = 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;
@@ -696,6 +704,10 @@ var ToolbarController = class {
       this.config.fitToPage = true;
       this.config.fitWidth = true;
     }
+    if (actionId === "reset-zoom" || actionId === "zoom-reset" || actionId === "resetZoom") {
+      this.config.resetZoom = true;
+      this.config.zoomReset = 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;
@@ -715,6 +727,7 @@ var ToolbarController = class {
     if (actionId === "zoomIn") return "zoom-in";
     if (actionId === "zoomOut") return "zoom-out";
     if (actionId === "fitPage" || actionId === "fitToPage" || actionId === "fitWidth") return "fit-page";
+    if (actionId === "resetZoom" || actionId === "zoomReset") return "reset-zoom";
     if (actionId === "rotateCW") return "rotate-cw";
     if (actionId === "rotateCCW") return "rotate-ccw";
     if (actionId === "openWindow" || actionId === "openSeparateWindow") return "open-window";
@@ -757,6 +770,9 @@ var ToolbarController = class {
     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 === "reset-zoom" || id === "zoom-reset") && (c.resetZoom === false || c.zoomReset === false || c["reset-zoom"] === false || c["zoom-reset"] === 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;
     }
@@ -1203,6 +1219,9 @@ var FilePreviewViewer = class _FilePreviewViewer {
       this.activeInstance = instance;
       instance.openInSeparateWindow = () => this.openInSeparateWindow();
       instance.toggleThumbnails = () => this.toggleThumbnails();
+      if (!instance.resetZoom && instance.fitToPage) {
+        instance.resetZoom = () => instance.fitToPage?.();
+      }
       this.hideLoading();
       this.eventEmitter.emit("loaded", { metadata, plugin: matchedPlugin.id });
       const isToolbarVisible = options.showToolbar !== false && options.toolbar !== false;
@@ -1486,6 +1505,16 @@ var FilePreviewViewer = class _FilePreviewViewer {
   fitToPage() {
     this.activeInstance?.fitToPage?.();
   }
+  /**
+   * Reset zoom level to initial/default fit state.
+   */
+  resetZoom() {
+    if (this.activeInstance?.resetZoom) {
+      this.activeInstance.resetZoom();
+    } else if (this.activeInstance?.fitToPage) {
+      this.activeInstance.fitToPage();
+    }
+  }
   /**
    * Zoom in.
    */
@@ -2107,6 +2136,14 @@ var PdfPlugin = class {
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "reset-zoom",
+        icon: "reset-zoom",
+        label: "Reset Zoom",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.resetZoom?.()
+      },
       {
         id: "fit-width",
         icon: "fit-width",
@@ -2162,16 +2199,22 @@ var PdfPlugin = class {
     container.className = "fp-pdf-container";
     container.style.width = "100%";
     container.style.height = "100%";
-    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 = "16px 8px";
+    container.style.overflow = "auto";
     container.style.backgroundColor = "#0f172a";
     container.style.boxSizing = "border-box";
     container.style.position = "relative";
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-pdf-scroll-wrapper";
+    scrollWrapper.style.minWidth = "100%";
+    scrollWrapper.style.minHeight = "100%";
+    scrollWrapper.style.width = "max-content";
+    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.display = "flex";
+    scrollWrapper.style.flexDirection = "column";
+    scrollWrapper.style.alignItems = "center";
+    scrollWrapper.style.justifyContent = "flex-start";
+    scrollWrapper.style.padding = "16px 8px";
+    scrollWrapper.style.boxSizing = "border-box";
     const pageCard = document.createElement("div");
     pageCard.className = "fp-pdf-page-card";
     pageCard.style.boxShadow = "0 10px 35px rgba(0, 0, 0, 0.5)";
@@ -2184,7 +2227,8 @@ var PdfPlugin = class {
     pageCard.style.transition = "box-shadow 0.2s ease";
     let canvas = document.createElement("canvas");
     pageCard.appendChild(canvas);
-    container.appendChild(pageCard);
+    scrollWrapper.appendChild(pageCard);
+    container.appendChild(scrollWrapper);
     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/";
@@ -2369,6 +2413,14 @@ var PdfPlugin = class {
         zoomScale = 1;
         renderPage(currentPage);
       },
+      resetZoom: () => {
+        fitMode = "page";
+        zoomScale = 1;
+        rotation = 0;
+        container.scrollTop = 0;
+        container.scrollLeft = 0;
+        renderPage(currentPage);
+      },
       fitToWidth: () => {
         fitMode = "width";
         zoomScale = 1;
@@ -2536,6 +2588,16 @@ var MediaPlugin = class {
             instance.fitToPage?.();
           }
         },
+        {
+          id: "reset-zoom",
+          icon: "reset-zoom",
+          label: "Reset Zoom",
+          type: "button",
+          group: "zoom",
+          execute: () => {
+            instance.resetZoom?.();
+          }
+        },
         {
           id: "rotate-cw",
           icon: "rotate-cw",
@@ -2675,17 +2737,86 @@ var MediaPlugin = class {
       element = document.createElement("div");
       element.textContent = "Unsupported media type";
     }
-    ctx.container.style.display = "flex";
-    ctx.container.style.alignItems = "center";
-    ctx.container.style.justifyContent = "center";
-    ctx.container.style.overflow = "hidden";
-    ctx.container.appendChild(element);
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-media-scroll-wrapper";
+    scrollWrapper.style.minWidth = "100%";
+    scrollWrapper.style.minHeight = "100%";
+    scrollWrapper.style.width = "max-content";
+    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.display = "flex";
+    scrollWrapper.style.justifyContent = "center";
+    scrollWrapper.style.alignItems = "center";
+    scrollWrapper.style.padding = "16px";
+    scrollWrapper.style.boxSizing = "border-box";
+    const sizer = document.createElement("div");
+    sizer.className = "fp-media-sizer";
+    sizer.style.position = "relative";
+    sizer.style.flexShrink = "0";
+    sizer.style.display = "flex";
+    sizer.style.justifyContent = "center";
+    sizer.style.alignItems = "center";
+    sizer.appendChild(element);
+    scrollWrapper.appendChild(sizer);
+    ctx.container.style.overflow = "auto";
+    ctx.container.style.padding = "0";
+    ctx.container.innerHTML = "";
+    ctx.container.appendChild(scrollWrapper);
+    let naturalW = 800;
+    let naturalH = 600;
+    let baseW = 800;
+    let baseH = 600;
+    const updateBaseDimensions = () => {
+      if (!isImage) return;
+      const img = element;
+      naturalW = img.naturalWidth || naturalW;
+      naturalH = img.naturalHeight || naturalH;
+      const availW = Math.max(100, ctx.container.clientWidth - 48);
+      const availH = Math.max(100, ctx.container.clientHeight - 48);
+      const fitRatio = Math.min(1, availW / naturalW, availH / naturalH);
+      baseW = Math.max(1, Math.round(naturalW * fitRatio));
+      baseH = Math.max(1, Math.round(naturalH * fitRatio));
+    };
     const applyTransform = () => {
-      element.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+      if (isImage) {
+        updateBaseDimensions();
+        const isRotated90 = rotation % 180 !== 0;
+        const boxW = Math.round((isRotated90 ? baseH : baseW) * currentZoom);
+        const boxH = Math.round((isRotated90 ? baseW : baseH) * currentZoom);
+        sizer.style.width = `${boxW}px`;
+        sizer.style.height = `${boxH}px`;
+        element.style.width = `${baseW}px`;
+        element.style.height = `${baseH}px`;
+        element.style.maxWidth = "none";
+        element.style.maxHeight = "none";
+        element.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+        element.style.transformOrigin = "center center";
+        element.style.flexShrink = "0";
+      } else {
+        element.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+      }
     };
+    if (isImage) {
+      const img = element;
+      if (img.complete && img.naturalWidth > 0) {
+        updateBaseDimensions();
+        applyTransform();
+      } else {
+        img.onload = () => {
+          updateBaseDimensions();
+          applyTransform();
+        };
+      }
+    }
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      if (currentZoom === 1) {
+        applyTransform();
+      }
+    }) : null;
+    ro?.observe(ctx.container);
     const cleanup = () => {
+      ro?.disconnect();
       if (url) URL.revokeObjectURL(url);
-      element.remove();
+      scrollWrapper.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
@@ -2709,6 +2840,13 @@ var MediaPlugin = class {
         rotation = 0;
         applyTransform();
       } : void 0,
+      resetZoom: isImage ? () => {
+        currentZoom = 1;
+        rotation = 0;
+        ctx.container.scrollTop = 0;
+        ctx.container.scrollLeft = 0;
+        applyTransform();
+      } : void 0,
       rotateCW: isImage || isVideo ? () => {
         rotation = (rotation + 90) % 360;
         applyTransform();
@@ -2825,6 +2963,14 @@ var DocxPlugin = class {
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "reset-zoom",
+        icon: "reset-zoom",
+        label: "Reset Zoom",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.resetZoom?.()
+      },
       {
         id: "rotate-cw",
         icon: "rotate-cw",
@@ -2863,7 +3009,7 @@ var DocxPlugin = class {
   async render(ctx) {
     const wrapper = document.createElement("div");
     wrapper.className = "fp-docx-wrapper";
-    wrapper.style.transformOrigin = "top center";
+    wrapper.style.transformOrigin = "center center";
     wrapper.style.transition = "transform 0.2s ease";
     wrapper.style.padding = "0";
     wrapper.style.maxWidth = "none";
@@ -2873,11 +3019,31 @@ var DocxPlugin = class {
     wrapper.style.flexDirection = "column";
     wrapper.style.alignItems = "center";
     wrapper.style.boxSizing = "border-box";
-    ctx.container.style.overflowX = "hidden";
-    ctx.container.style.overflowY = "auto";
-    ctx.container.style.padding = "16px 8px";
+    wrapper.style.flexShrink = "0";
+    const sizer = document.createElement("div");
+    sizer.className = "fp-docx-sizer";
+    sizer.style.position = "relative";
+    sizer.style.flexShrink = "0";
+    sizer.style.display = "flex";
+    sizer.style.justifyContent = "center";
+    sizer.style.alignItems = "center";
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-docx-scroll-wrapper";
+    scrollWrapper.style.minWidth = "100%";
+    scrollWrapper.style.minHeight = "100%";
+    scrollWrapper.style.width = "max-content";
+    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.display = "flex";
+    scrollWrapper.style.justifyContent = "center";
+    scrollWrapper.style.alignItems = "flex-start";
+    scrollWrapper.style.padding = "16px 8px";
+    scrollWrapper.style.boxSizing = "border-box";
+    sizer.appendChild(wrapper);
+    scrollWrapper.appendChild(sizer);
+    ctx.container.style.overflow = "auto";
+    ctx.container.style.padding = "0";
     ctx.container.style.backgroundColor = "#f1f5f9";
-    ctx.container.appendChild(wrapper);
+    ctx.container.appendChild(scrollWrapper);
     const styleOverride = document.createElement("style");
     styleOverride.textContent = `
       .fp-docx-wrapper .docx-wrapper {
@@ -2916,8 +3082,8 @@ var DocxPlugin = class {
         renderEndnotes: true,
         useBase64URL: true
       });
-      if (!ctx.container.contains(wrapper)) {
-        ctx.container.appendChild(wrapper);
+      if (!sizer.contains(wrapper)) {
+        sizer.appendChild(wrapper);
       }
       if (wrapper.children.length > 0 && (wrapper.textContent?.trim().length ?? 0) > 0) {
         renderedSuccessfully = true;
@@ -2954,8 +3120,8 @@ var DocxPlugin = class {
       try {
         wrapper.innerHTML = "";
         this.renderXmlFallback(ctx, wrapper, createdBlobUrls);
-        if (!ctx.container.contains(wrapper)) {
-          ctx.container.appendChild(wrapper);
+        if (!sizer.contains(wrapper)) {
+          sizer.appendChild(wrapper);
         }
         renderedSuccessfully = true;
       } catch (fallbackErr) {
@@ -2970,8 +3136,8 @@ var DocxPlugin = class {
             </p>
           </div>
         `;
-        if (!ctx.container.contains(wrapper)) {
-          ctx.container.appendChild(wrapper);
+        if (!sizer.contains(wrapper)) {
+          sizer.appendChild(wrapper);
         }
       }
     }
@@ -3074,15 +3240,18 @@ var DocxPlugin = class {
       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 elW = activeEl.offsetWidth || 816;
       const elH = activeEl.offsetHeight || 1056;
-      if (scale > 1) {
-        wrapper.style.marginBottom = `${Math.round(elH * scale - elH + 32)}px`;
-      } else {
-        wrapper.style.marginBottom = "32px";
-      }
+      const isRotated90 = rotation % 180 !== 0;
+      const boxW = Math.round((isRotated90 ? elH : elW) * scale);
+      const boxH = Math.round((isRotated90 ? elW : elH) * scale);
+      sizer.style.width = `${boxW}px`;
+      sizer.style.height = `${boxH}px`;
+      wrapper.style.width = `${elW}px`;
+      wrapper.style.height = `${elH}px`;
+      wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+      wrapper.style.transformOrigin = "center center";
     };
     let resizeObserver = null;
     if (typeof ResizeObserver !== "undefined") {
@@ -3107,7 +3276,7 @@ var DocxPlugin = class {
       for (const url of createdBlobUrls) {
         URL.revokeObjectURL(url);
       }
-      wrapper.remove();
+      scrollWrapper.remove();
       styleOverride.remove();
       ctx.container.innerHTML = "";
     };
@@ -3141,6 +3310,14 @@ var DocxPlugin = class {
         rotation = 0;
         applyTransform();
       },
+      resetZoom: () => {
+        isUserZoomed = false;
+        scale = calculateFitScale("page");
+        rotation = 0;
+        ctx.container.scrollTop = 0;
+        ctx.container.scrollLeft = 0;
+        applyTransform();
+      },
       rotateCW: () => {
         rotation = (rotation + 90) % 360;
         applyTransform();
@@ -3590,6 +3767,16 @@ var ExcelPlugin = class {
           instance.zoomIn?.();
         }
       },
+      {
+        id: "reset-zoom",
+        icon: "reset-zoom",
+        label: "Reset Zoom",
+        type: "button",
+        group: "zoom",
+        execute: () => {
+          instance.resetZoom?.();
+        }
+      },
       {
         id: "download",
         icon: "download",
@@ -3636,7 +3823,7 @@ var ExcelPlugin = class {
     contentArea.style.flex = "1";
     contentArea.style.overflow = "auto";
     contentArea.style.padding = "16px";
-    contentArea.style.transformOrigin = "top left";
+    contentArea.style.boxSizing = "border-box";
     const tabsArea = document.createElement("div");
     tabsArea.className = "fp-excel-tabs";
     tabsArea.style.display = "flex";
@@ -3650,18 +3837,35 @@ var ExcelPlugin = class {
     container.appendChild(tabsArea);
     ctx.container.appendChild(container);
     let scale = 1;
+    let isUserZoomed = false;
     let currentSheetIndex = 1;
     let sheetNames = [];
     let wb = null;
     const applyTransform = () => {
-      contentArea.style.transform = `scale(${scale})`;
-      contentArea.style.transformOrigin = "top left";
+      const sizer = contentArea.querySelector(".fp-excel-sizer");
+      const table = contentArea.querySelector("table");
+      if (!sizer || !table) return;
+      if (!table._baseWidth && table.offsetWidth > 0) {
+        table._baseWidth = table.offsetWidth;
+        table._baseHeight = table.offsetHeight;
+      }
+      const baseW = table._baseWidth || table.offsetWidth || 800;
+      const baseH = table._baseHeight || table.offsetHeight || 600;
+      const scaledW = Math.round(baseW * scale);
+      const scaledH = Math.round(baseH * scale);
+      sizer.style.width = `${scaledW}px`;
+      sizer.style.height = `${scaledH}px`;
+      table.style.position = "absolute";
+      table.style.top = "0";
+      table.style.left = "0";
+      table.style.transform = `scale(${scale})`;
+      table.style.transformOrigin = "top left";
     };
     const calculateFitScale = () => {
       const table = contentArea.querySelector("table");
       if (!table) return 1;
       const availW = Math.max(280, container.clientWidth - 48);
-      const tW = table.offsetWidth || 800;
+      const tW = table._baseWidth || table.offsetWidth || 800;
       return Math.max(0.4, Math.min(1, availW / tW));
     };
     try {
@@ -3681,9 +3885,13 @@ var ExcelPlugin = class {
         contentArea.innerHTML = '<div style="padding: 24px; color: #888;">Empty sheet</div>';
         return;
       }
+      const sizer = document.createElement("div");
+      sizer.className = "fp-excel-sizer";
+      sizer.style.position = "relative";
       const html = XLSX__namespace.utils.sheet_to_html(ws, { id: "fp-sheet-table", editable: false });
-      contentArea.innerHTML = html;
-      const table = contentArea.querySelector("table");
+      sizer.innerHTML = html;
+      contentArea.appendChild(sizer);
+      const table = sizer.querySelector("table");
       if (table) {
         table.style.borderCollapse = "collapse";
         table.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
@@ -3718,13 +3926,17 @@ var ExcelPlugin = class {
       });
       ctx.emit("page-change", { page: currentSheetIndex, total: sheetNames.length });
       requestAnimationFrame(() => {
-        scale = calculateFitScale();
+        if (!isUserZoomed) {
+          scale = calculateFitScale();
+        }
         applyTransform();
       });
     };
     const ro = new ResizeObserver(() => {
-      scale = calculateFitScale();
-      applyTransform();
+      if (!isUserZoomed) {
+        scale = calculateFitScale();
+        applyTransform();
+      }
     });
     ro.observe(container);
     if (sheetNames.length > 0) {
@@ -3761,20 +3973,31 @@ var ExcelPlugin = class {
     return {
       destroy: cleanup,
       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: () => {
+        isUserZoomed = false;
+        scale = calculateFitScale();
+        applyTransform();
+      },
+      resetZoom: () => {
+        isUserZoomed = false;
         scale = calculateFitScale();
+        contentArea.scrollTop = 0;
+        contentArea.scrollLeft = 0;
         applyTransform();
       },
       rotateCW: () => {
@@ -3907,6 +4130,16 @@ var CsvPlugin = class {
           instance.zoomIn?.();
         }
       },
+      {
+        id: "reset-zoom",
+        icon: "reset-zoom",
+        label: "Reset Zoom",
+        type: "button",
+        group: "zoom",
+        execute: () => {
+          instance.resetZoom?.();
+        }
+      },
       {
         id: "download",
         icon: "download",
@@ -3993,21 +4226,41 @@ var CsvPlugin = class {
     container.appendChild(tableWrapper);
     ctx.container.appendChild(container);
     let scale = 1;
+    let isUserZoomed = false;
     const calculateFitScale = () => {
       const availW = Math.max(280, container.clientWidth - 48);
-      const tW = table.offsetWidth || 800;
+      const tW = table._baseWidth || table.offsetWidth || 800;
       return Math.max(0.4, Math.min(1, availW / tW));
     };
     const applyScale = () => {
-      tableWrapper.style.transform = `scale(${scale})`;
+      if (!table._baseWidth && table.offsetWidth > 0) {
+        table._baseWidth = table.offsetWidth;
+        table._baseHeight = table.offsetHeight;
+      }
+      const baseW = table._baseWidth || table.offsetWidth || 800;
+      const baseH = table._baseHeight || table.offsetHeight || 600;
+      const scaledW = Math.round(baseW * scale);
+      const scaledH = Math.round(baseH * scale);
+      tableWrapper.style.position = "relative";
+      tableWrapper.style.width = `${scaledW}px`;
+      tableWrapper.style.height = `${scaledH}px`;
+      table.style.position = "absolute";
+      table.style.top = "0";
+      table.style.left = "0";
+      table.style.transform = `scale(${scale})`;
+      table.style.transformOrigin = "top left";
     };
     requestAnimationFrame(() => {
-      scale = calculateFitScale();
+      if (!isUserZoomed) {
+        scale = calculateFitScale();
+      }
       applyScale();
     });
     const ro = new ResizeObserver(() => {
-      scale = calculateFitScale();
-      applyScale();
+      if (!isUserZoomed) {
+        scale = calculateFitScale();
+        applyScale();
+      }
     });
     ro.observe(container);
     const cleanup = () => {
@@ -4080,20 +4333,31 @@ var CsvPlugin = class {
         }];
       },
       zoomIn: () => {
+        isUserZoomed = true;
         scale += 0.1;
         applyScale();
       },
       zoomOut: () => {
+        isUserZoomed = true;
         scale = Math.max(0.2, scale - 0.1);
         applyScale();
       },
       getZoom: () => scale,
       setZoom: (level) => {
+        isUserZoomed = true;
         scale = level;
         applyScale();
       },
       fitToPage: () => {
+        isUserZoomed = false;
+        scale = calculateFitScale();
+        applyScale();
+      },
+      resetZoom: () => {
+        isUserZoomed = false;
         scale = calculateFitScale();
+        container.scrollTop = 0;
+        container.scrollLeft = 0;
         applyScale();
       },
       rotateCW: () => {
@@ -4211,6 +4475,16 @@ var CodePlugin = class {
           instance.zoomIn?.();
         }
       },
+      {
+        id: "reset-zoom",
+        icon: "reset-zoom",
+        label: "Reset Zoom",
+        type: "button",
+        group: "zoom",
+        execute: () => {
+          instance.resetZoom?.();
+        }
+      },
       {
         id: "copy",
         icon: "copy",
@@ -4316,15 +4590,27 @@ var CodePlugin = class {
     let isUserZoomed = false;
     const pre = document.createElement("pre");
     const code = document.createElement("code");
+    const sizer = document.createElement("div");
+    const scrollWrapper = document.createElement("div");
     if (isTxt) {
-      container.style.overflowX = "hidden";
-      container.style.overflowY = "auto";
+      container.style.overflow = "auto";
       container.style.backgroundColor = "#f1f5f9";
-      container.style.padding = "16px 8px";
-      container.style.boxSizing = "border-box";
-      container.style.display = "flex";
-      container.style.flexDirection = "column";
-      container.style.alignItems = "center";
+      scrollWrapper.className = "fp-code-scroll-wrapper";
+      scrollWrapper.style.minWidth = "100%";
+      scrollWrapper.style.minHeight = "100%";
+      scrollWrapper.style.width = "max-content";
+      scrollWrapper.style.height = "max-content";
+      scrollWrapper.style.display = "flex";
+      scrollWrapper.style.justifyContent = "center";
+      scrollWrapper.style.alignItems = "flex-start";
+      scrollWrapper.style.padding = "16px 8px";
+      scrollWrapper.style.boxSizing = "border-box";
+      sizer.className = "fp-code-sizer";
+      sizer.style.position = "relative";
+      sizer.style.flexShrink = "0";
+      sizer.style.display = "flex";
+      sizer.style.justifyContent = "center";
+      sizer.style.alignItems = "center";
       pre.style.margin = "0 auto";
       pre.style.fontFamily = "Consolas, 'Courier New', monospace";
       pre.style.fontSize = "13px";
@@ -4339,8 +4625,9 @@ var CodePlugin = class {
       pre.style.boxSizing = "border-box";
       pre.style.boxShadow = "0 4px 24px rgba(0, 0, 0, 0.08)";
       pre.style.borderRadius = "4px";
-      pre.style.transformOrigin = "top center";
+      pre.style.transformOrigin = "center center";
       pre.style.transition = "transform 0.15s ease";
+      pre.style.flexShrink = "0";
     } else {
       container.style.overflow = "auto";
       container.style.backgroundColor = "#1e1e1e";
@@ -4373,7 +4660,13 @@ var CodePlugin = class {
     };
     renderCodePage(rawPages[0] || (isTxt ? "" : fullText));
     pre.appendChild(code);
-    container.appendChild(pre);
+    if (isTxt) {
+      sizer.appendChild(pre);
+      scrollWrapper.appendChild(sizer);
+      container.appendChild(scrollWrapper);
+    } else {
+      container.appendChild(pre);
+    }
     const showPage = (pageNum) => {
       currentPage = Math.max(1, Math.min(totalPages, pageNum));
       renderCodePage(rawPages[currentPage - 1] || (isTxt ? "" : fullText));
@@ -4390,10 +4683,16 @@ var CodePlugin = class {
     };
     const updateTransform = () => {
       if (isTxt) {
+        const elW = 816;
+        const baseH = pre.offsetHeight || 1056;
+        const isRotated90 = rotation % 180 !== 0;
+        const boxW = Math.round((isRotated90 ? baseH : elW) * zoomLevel);
+        const boxH = Math.round((isRotated90 ? elW : baseH) * zoomLevel);
+        sizer.style.width = `${boxW}px`;
+        sizer.style.height = `${boxH}px`;
+        pre.style.width = `${elW}px`;
         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`;
+        pre.style.transformOrigin = "center center";
       } else {
         pre.style.transform = `rotate(${rotation}deg)`;
         pre.style.fontSize = `${fontSize}px`;
@@ -4490,6 +4789,15 @@ var CodePlugin = class {
         zoomLevel = isTxt ? calculateTxtFit() : 1;
         updateTransform();
       },
+      resetZoom: () => {
+        isUserZoomed = false;
+        fontSize = 13;
+        rotation = 0;
+        zoomLevel = isTxt ? calculateTxtFit() : 1;
+        container.scrollTop = 0;
+        container.scrollLeft = 0;
+        updateTransform();
+      },
       rotateCW: () => {
         rotation = (rotation + 90) % 360;
         updateTransform();
@@ -4552,11 +4860,19 @@ var ArchivePlugin = class {
       {
         id: "fit-page",
         icon: "fit-page",
-        label: "Reset Zoom",
+        label: "Fit to Page",
         type: "button",
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "reset-zoom",
+        icon: "reset-zoom",
+        label: "Reset Zoom",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.resetZoom?.()
+      },
       {
         id: "download",
         icon: "download",
@@ -4582,16 +4898,56 @@ var ArchivePlugin = class {
       width: 100%;
       height: 100%;
       overflow: auto;
-      padding: 24px;
       box-sizing: border-box;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      transform-origin: top left;
-      transition: transform 0.2s ease;
     `;
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-archive-scroll-wrapper";
+    scrollWrapper.style.cssText = `
+      min-width: 100%;
+      min-height: 100%;
+      width: max-content;
+      height: max-content;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      padding: 24px;
+      box-sizing: border-box;
+    `;
+    const sizer = document.createElement("div");
+    sizer.className = "fp-archive-sizer";
+    sizer.style.cssText = `
+      position: relative;
+      flex-shrink: 0;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+    `;
+    const card = document.createElement("div");
+    card.className = "fp-archive-card";
+    card.style.cssText = `
+      width: 900px;
+      box-sizing: border-box;
+      transform-origin: top center;
+      transition: transform 0.15s ease;
+      flex-shrink: 0;
+    `;
+    sizer.appendChild(card);
+    scrollWrapper.appendChild(sizer);
+    wrapper.appendChild(scrollWrapper);
     ctx.container.innerHTML = "";
     ctx.container.style.overflow = "auto";
     ctx.container.appendChild(wrapper);
     let scale = 1;
+    const applyTransform = () => {
+      const boxW = Math.round(900 * scale);
+      const cardH = card.offsetHeight || 600;
+      const boxH = Math.round(cardH * scale);
+      sizer.style.width = `${boxW}px`;
+      sizer.style.height = `${boxH}px`;
+      card.style.transform = `scale(${scale})`;
+      card.style.transformOrigin = "top center";
+    };
     const entries = await new Promise((resolve, reject) => {
       fflate.unzip(new Uint8Array(ctx.buffer), (err, unzipped) => {
         if (err) {
@@ -4615,7 +4971,7 @@ var ArchivePlugin = class {
     });
     const totalUncompressedSize = entries.reduce((acc, e) => acc + e.size, 0);
     const renderUI = (filteredEntries) => {
-      wrapper.innerHTML = `
+      card.innerHTML = `
         <div style="max-width: 900px; margin: 0 auto; background: var(--fp-bg, #ffffff); border: 1px solid var(--fp-border, #e5e7eb); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden;">
           <div style="padding: 16px 20px; background: var(--fp-toolbar-bg, #f9fafb); border-bottom: 1px solid var(--fp-border, #e5e7eb); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;">
             <div>
@@ -4645,7 +5001,7 @@ var ArchivePlugin = class {
           </div>
         </div>
       `;
-      const tbody = wrapper.querySelector("#fp-archive-body");
+      const tbody = card.querySelector("#fp-archive-body");
       if (filteredEntries.length === 0) {
         tbody.innerHTML = `<tr><td colspan="3" style="padding: 24px; text-align: center; color: #9ca3af;">No matching files found</td></tr>`;
       } else {
@@ -4674,19 +5030,20 @@ var ArchivePlugin = class {
           }
         });
       });
-      const searchInput = wrapper.querySelector("#fp-archive-search");
+      const searchInput = card.querySelector("#fp-archive-search");
       if (searchInput) {
         searchInput.addEventListener("input", () => {
           const q = searchInput.value.toLowerCase().trim();
           const filtered = q ? entries.filter((e) => e.path.toLowerCase().includes(q)) : entries;
           renderUI(filtered);
-          const newSearch = wrapper.querySelector("#fp-archive-search");
+          const newSearch = card.querySelector("#fp-archive-search");
           if (newSearch) {
             newSearch.value = q;
             newSearch.focus();
           }
         });
       }
+      applyTransform();
     };
     renderUI(entries);
     const cleanup = () => {
@@ -4698,20 +5055,26 @@ var ArchivePlugin = class {
       destroy: cleanup,
       zoomIn: () => {
         scale += 0.1;
-        wrapper.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       zoomOut: () => {
         scale = Math.max(0.3, scale - 0.1);
-        wrapper.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       getZoom: () => scale,
       setZoom: (level) => {
         scale = level;
-        wrapper.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       fitToPage: () => {
         scale = 1;
-        wrapper.style.transform = `scale(1)`;
+        applyTransform();
+      },
+      resetZoom: () => {
+        scale = 1;
+        wrapper.scrollTop = 0;
+        wrapper.scrollLeft = 0;
+        applyTransform();
       },
       download: () => {
         downloadFile(ctx.buffer, ctx.metadata.name || "archive.zip", "application/zip");
@@ -4763,6 +5126,14 @@ var MarkdownPlugin = class {
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "reset-zoom",
+        icon: "reset-zoom",
+        label: "Reset Zoom",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.resetZoom?.()
+      },
       {
         id: "copy",
         icon: "copy",
@@ -4916,6 +5287,12 @@ var MarkdownPlugin = class {
         fontSize = 15;
         wrapper.style.fontSize = "15px";
       },
+      resetZoom: () => {
+        fontSize = 15;
+        wrapper.style.fontSize = "15px";
+        ctx.container.scrollTop = 0;
+        ctx.container.scrollLeft = 0;
+      },
       download: () => {
         downloadFile(ctx.buffer, ctx.metadata.name || "document.md", "text/markdown");
       },
@@ -5009,6 +5386,14 @@ var PptxPlugin = class {
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "reset-zoom",
+        icon: "reset-zoom",
+        label: "Reset Zoom",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.resetZoom?.()
+      },
       {
         id: "rotate-cw",
         icon: "rotate-cw",
@@ -5048,12 +5433,30 @@ var PptxPlugin = class {
       width: 100%;
       height: 100%;
       overflow: auto;
+      box-sizing: border-box;
+      background: var(--fp-bg-canvas, #525659);
+    `;
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-pptx-scroll-wrapper";
+    scrollWrapper.style.cssText = `
+      min-width: 100%;
+      min-height: 100%;
+      width: max-content;
+      height: max-content;
       display: flex;
       justify-content: center;
-      align-items: flex-start;
+      align-items: center;
       padding: 24px;
       box-sizing: border-box;
-      background: var(--fp-bg-canvas, #525659);
+    `;
+    const sizer = document.createElement("div");
+    sizer.className = "fp-pptx-sizer";
+    sizer.style.cssText = `
+      position: relative;
+      flex-shrink: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     `;
     const slideContainer = document.createElement("div");
     slideContainer.className = "fp-slide-container";
@@ -5062,14 +5465,15 @@ var PptxPlugin = class {
       border-radius: 4px;
       overflow: hidden;
       background: #ffffff;
-      transform-origin: top center;
+      transform-origin: center center;
       transition: transform 0.2s ease;
-      max-width: calc(100% - 32px);
-      max-height: calc(100% - 48px);
+      flex-shrink: 0;
     `;
     const canvas = document.createElement("canvas");
     slideContainer.appendChild(canvas);
-    wrapper.appendChild(slideContainer);
+    sizer.appendChild(slideContainer);
+    scrollWrapper.appendChild(sizer);
+    wrapper.appendChild(scrollWrapper);
     ctx.container.innerHTML = "";
     ctx.container.style.overflow = "auto";
     ctx.container.appendChild(wrapper);
@@ -5081,7 +5485,17 @@ var PptxPlugin = class {
       return Math.min(1, Math.min(availW / cW, availH / cH));
     };
     const applyTransform = () => {
+      const cW = canvas.offsetWidth || 1280;
+      const cH = canvas.offsetHeight || 720;
+      const isRotated90 = rotation % 180 !== 0;
+      const boxW = Math.round((isRotated90 ? cH : cW) * scale);
+      const boxH = Math.round((isRotated90 ? cW : cH) * scale);
+      sizer.style.width = `${boxW}px`;
+      sizer.style.height = `${boxH}px`;
+      slideContainer.style.width = `${cW}px`;
+      slideContainer.style.height = `${cH}px`;
       slideContainer.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+      slideContainer.style.transformOrigin = "center center";
     };
     const renderCurrentSlide = async () => {
       try {
@@ -5128,6 +5542,13 @@ var PptxPlugin = class {
         rotation = 0;
         applyTransform();
       },
+      resetZoom: () => {
+        scale = calculateFitScale();
+        rotation = 0;
+        wrapper.scrollTop = 0;
+        wrapper.scrollLeft = 0;
+        applyTransform();
+      },
       rotateCW: () => {
         rotation = (rotation + 90) % 360;
         applyTransform();
@@ -5203,6 +5624,14 @@ var ThreeDPlugin = class {
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "reset-zoom",
+        icon: "reset-zoom",
+        label: "Reset Zoom",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.resetZoom?.()
+      },
       {
         id: "rotate-cw",
         icon: "rotate-cw",
@@ -5339,6 +5768,7 @@ var ThreeDPlugin = class {
         controls.update();
       },
       fitToPage: fitCamera,
+      resetZoom: fitCamera,
       rotateCW: () => {
         isWireframe = !isWireframe;
         materials.forEach((m) => {
@@ -5553,6 +5983,14 @@ var RtfPlugin = class {
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "reset-zoom",
+        icon: "reset-zoom",
+        label: "Reset Zoom",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.resetZoom?.()
+      },
       {
         id: "rotate-cw",
         icon: "rotate-cw",
@@ -5663,13 +6101,33 @@ var RtfPlugin = class {
     wrapper.style.flexDirection = "column";
     wrapper.style.alignItems = "center";
     wrapper.style.backgroundColor = "transparent";
-    wrapper.style.transformOrigin = "top center";
+    wrapper.style.transformOrigin = "center center";
     wrapper.style.transition = "transform 0.15s ease";
-    ctx.container.style.overflowX = "hidden";
-    ctx.container.style.overflowY = "auto";
-    ctx.container.style.padding = "16px 8px";
+    wrapper.style.flexShrink = "0";
+    const sizer = document.createElement("div");
+    sizer.className = "fp-rtf-sizer";
+    sizer.style.position = "relative";
+    sizer.style.flexShrink = "0";
+    sizer.style.display = "flex";
+    sizer.style.justifyContent = "center";
+    sizer.style.alignItems = "center";
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-rtf-scroll-wrapper";
+    scrollWrapper.style.minWidth = "100%";
+    scrollWrapper.style.minHeight = "100%";
+    scrollWrapper.style.width = "max-content";
+    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.display = "flex";
+    scrollWrapper.style.justifyContent = "center";
+    scrollWrapper.style.alignItems = "flex-start";
+    scrollWrapper.style.padding = "16px 8px";
+    scrollWrapper.style.boxSizing = "border-box";
+    sizer.appendChild(wrapper);
+    scrollWrapper.appendChild(sizer);
+    ctx.container.style.overflow = "auto";
+    ctx.container.style.padding = "0";
     ctx.container.style.backgroundColor = "#f1f5f9";
-    ctx.container.appendChild(wrapper);
+    ctx.container.appendChild(scrollWrapper);
     let scale = 1;
     let rotation = 0;
     let pageElements = [];
@@ -5688,12 +6146,17 @@ var RtfPlugin = class {
       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 elW = pageWidth;
       const baseH = pageHeight;
-      const scaledH = baseH * scale;
-      const extraH = Math.max(0, scaledH - baseH);
-      wrapper.style.marginBottom = `${extraH + 32}px`;
+      const isRotated90 = rotation % 180 !== 0;
+      const boxW = Math.round((isRotated90 ? baseH : elW) * scale);
+      const boxH = Math.round((isRotated90 ? elW : baseH) * scale);
+      sizer.style.width = `${boxW}px`;
+      sizer.style.height = `${boxH}px`;
+      wrapper.style.width = `${elW}px`;
+      wrapper.style.height = `${baseH}px`;
+      wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+      wrapper.style.transformOrigin = "center center";
     };
     const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
       if (!isUserZoomed) {
@@ -5964,7 +6427,7 @@ var RtfPlugin = class {
     }
     const cleanup = () => {
       resizeObserver?.disconnect();
-      wrapper.remove();
+      scrollWrapper.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
@@ -6022,6 +6485,15 @@ var RtfPlugin = class {
         rotation = 0;
         applyTransform();
       },
+      resetZoom: () => {
+        isUserZoomed = false;
+        fitMode = "width";
+        scale = calculateFitScale("width");
+        rotation = 0;
+        ctx.container.scrollTop = 0;
+        ctx.container.scrollLeft = 0;
+        applyTransform();
+      },
       rotateCW: () => {
         rotation = (rotation + 90) % 360;
         applyTransform();
@@ -6089,6 +6561,14 @@ var HtmlPreviewPlugin = class {
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "reset-zoom",
+        icon: "reset-zoom",
+        label: "Reset Zoom",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.resetZoom?.()
+      },
       {
         id: "copy",
         icon: "copy",
@@ -6122,23 +6602,44 @@ var HtmlPreviewPlugin = class {
       ADD_TAGS: ["style", "link"],
       ADD_ATTR: ["target", "rel"]
     });
+    const sizer = document.createElement("div");
+    sizer.className = "fp-html-sizer";
+    sizer.style.position = "relative";
     const iframe = document.createElement("iframe");
     iframe.className = "fp-html-iframe";
-    iframe.style.width = "100%";
-    iframe.style.height = "100%";
     iframe.style.border = "none";
     iframe.style.backgroundColor = "#ffffff";
     iframe.style.transformOrigin = "top left";
     iframe.style.transition = "transform 0.2s ease";
     iframe.sandbox.add("allow-same-origin");
+    sizer.appendChild(iframe);
     ctx.container.style.overflow = "auto";
     ctx.container.style.width = "100%";
     ctx.container.style.height = "100%";
-    ctx.container.appendChild(iframe);
+    ctx.container.innerHTML = "";
+    ctx.container.appendChild(sizer);
     iframe.srcdoc = sanitized;
     let scale = 1;
+    const applyTransform = () => {
+      const baseW = Math.max(600, ctx.container.clientWidth || 800);
+      const baseH = Math.max(400, ctx.container.clientHeight || 600);
+      const scaledW = Math.round(baseW * scale);
+      const scaledH = Math.round(baseH * scale);
+      sizer.style.width = `${scaledW}px`;
+      sizer.style.height = `${scaledH}px`;
+      iframe.style.position = "absolute";
+      iframe.style.top = "0";
+      iframe.style.left = "0";
+      iframe.style.width = `${baseW}px`;
+      iframe.style.height = `${baseH}px`;
+      iframe.style.transform = `scale(${scale})`;
+      iframe.style.transformOrigin = "top left";
+    };
+    requestAnimationFrame(() => {
+      applyTransform();
+    });
     const cleanup = () => {
-      iframe.remove();
+      sizer.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
@@ -6146,20 +6647,26 @@ var HtmlPreviewPlugin = class {
       destroy: cleanup,
       zoomIn: () => {
         scale += 0.1;
-        iframe.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       zoomOut: () => {
         scale = Math.max(0.2, scale - 0.1);
-        iframe.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       getZoom: () => scale,
       setZoom: (level) => {
         scale = level;
-        iframe.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       fitToPage: () => {
         scale = 1;
-        iframe.style.transform = "scale(1)";
+        applyTransform();
+      },
+      resetZoom: () => {
+        scale = 1;
+        ctx.container.scrollTop = 0;
+        ctx.container.scrollLeft = 0;
+        applyTransform();
       },
       copy: () => {
         navigator.clipboard.writeText(rawHtml);
@@ -6261,6 +6768,14 @@ var OpenDocumentPlugin = class {
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "reset-zoom",
+        icon: "reset-zoom",
+        label: "Reset Zoom",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.resetZoom?.()
+      },
       {
         id: "rotate-cw",
         icon: "rotate-cw",
@@ -6326,10 +6841,26 @@ var OpenDocumentPlugin = class {
     container.className = "fp-odf-container";
     container.style.width = "100%";
     container.style.height = "100%";
-    container.style.overflowX = "hidden";
-    container.style.overflowY = "auto";
-    container.style.padding = "16px 8px";
+    container.style.overflow = "auto";
     container.style.backgroundColor = "#f1f5f9";
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-odf-scroll-wrapper";
+    scrollWrapper.style.minWidth = "100%";
+    scrollWrapper.style.minHeight = "100%";
+    scrollWrapper.style.width = "max-content";
+    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.display = "flex";
+    scrollWrapper.style.justifyContent = "center";
+    scrollWrapper.style.alignItems = "flex-start";
+    scrollWrapper.style.padding = "16px 8px";
+    scrollWrapper.style.boxSizing = "border-box";
+    const sizer = document.createElement("div");
+    sizer.className = "fp-odf-sizer";
+    sizer.style.position = "relative";
+    sizer.style.flexShrink = "0";
+    sizer.style.display = "flex";
+    sizer.style.justifyContent = "center";
+    sizer.style.alignItems = "center";
     const wrapper = document.createElement("div");
     wrapper.className = "fp-odf-wrapper";
     wrapper.style.margin = "0 auto";
@@ -6338,9 +6869,12 @@ var OpenDocumentPlugin = class {
     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.transformOrigin = "center center";
     wrapper.style.transition = "transform 0.15s ease";
-    container.appendChild(wrapper);
+    wrapper.style.flexShrink = "0";
+    sizer.appendChild(wrapper);
+    scrollWrapper.appendChild(sizer);
+    container.appendChild(scrollWrapper);
     ctx.container.appendChild(container);
     let scale = 1;
     let rotation = 0;
@@ -6366,13 +6900,18 @@ var OpenDocumentPlugin = class {
       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 elW = isPresentation ? 960 : 816;
       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 isRotated90 = rotation % 180 !== 0;
+      const boxW = Math.round((isRotated90 ? baseH : elW) * scale);
+      const boxH = Math.round((isRotated90 ? elW : baseH) * scale);
+      sizer.style.width = `${boxW}px`;
+      sizer.style.height = `${boxH}px`;
+      wrapper.style.width = `${elW}px`;
+      wrapper.style.height = `${baseH}px`;
+      wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+      wrapper.style.transformOrigin = "center center";
     };
     const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
       if (!isUserZoomed) {
@@ -6528,6 +7067,15 @@ var OpenDocumentPlugin = class {
         rotation = 0;
         applyTransform();
       },
+      resetZoom: () => {
+        isUserZoomed = false;
+        fitMode = "width";
+        scale = calculateFitScale("width");
+        rotation = 0;
+        container.scrollTop = 0;
+        container.scrollLeft = 0;
+        applyTransform();
+      },
       rotateCW: () => {
         rotation = (rotation + 90) % 360;
         applyTransform();
@@ -6871,6 +7419,14 @@ var DocPlugin = class {
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "reset-zoom",
+        icon: "reset-zoom",
+        label: "Reset Zoom",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.resetZoom?.()
+      },
       {
         id: "rotate-cw",
         icon: "rotate-cw",
@@ -6919,13 +7475,28 @@ var DocPlugin = class {
     container.className = "fp-doc-container";
     container.style.width = "100%";
     container.style.height = "100%";
-    container.style.overflowX = "hidden";
-    container.style.overflowY = "auto";
-    container.style.padding = "16px 8px";
+    container.style.overflow = "auto";
     container.style.backgroundColor = "#f1f5f9";
-    container.style.display = "flex";
-    container.style.justifyContent = "center";
-    container.style.alignItems = "flex-start";
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-doc-scroll-wrapper";
+    scrollWrapper.style.minWidth = "100%";
+    scrollWrapper.style.minHeight = "100%";
+    scrollWrapper.style.width = "max-content";
+    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.display = "flex";
+    scrollWrapper.style.justifyContent = "center";
+    scrollWrapper.style.alignItems = "flex-start";
+    scrollWrapper.style.padding = "16px 8px";
+    scrollWrapper.style.boxSizing = "border-box";
+    const sizer = document.createElement("div");
+    sizer.className = "fp-doc-sizer";
+    sizer.style.position = "relative";
+    sizer.style.flexShrink = "0";
+    sizer.style.display = "flex";
+    sizer.style.justifyContent = "center";
+    sizer.style.alignItems = "center";
+    scrollWrapper.appendChild(sizer);
+    container.appendChild(scrollWrapper);
     ctx.container.appendChild(container);
     let scale = 1;
     let extractedRawText = "";
@@ -6973,10 +7544,11 @@ var DocPlugin = class {
       pageCard.style.padding = "72px 56px";
       pageCard.style.boxSizing = "border-box";
       pageCard.style.display = i === 0 ? "block" : "none";
-      pageCard.style.transformOrigin = "top center";
+      pageCard.style.transformOrigin = "center center";
       pageCard.style.transition = "transform 0.15s ease";
       pageCard.style.fontFamily = 'Calibri, "Segoe UI", Arial, sans-serif';
       pageCard.style.color = "#1e293b";
+      pageCard.style.flexShrink = "0";
       if (isFallback && i === 0) {
         pageCard.innerHTML = `
           <div style="border-bottom: 1px solid #e2e8f0; padding-bottom: 12px; margin-bottom: 24px;">
@@ -6988,18 +7560,23 @@ var DocPlugin = class {
       } else {
         pageCard.innerHTML = this.formatDocToHtml(rawPages[i], ctx.metadata.name || "Document");
       }
-      container.appendChild(pageCard);
+      sizer.appendChild(pageCard);
       pageCards.push(pageCard);
     }
     let rotation = 0;
     const applyTransform = () => {
       const activeCard = pageCards[currentPage - 1];
       if (activeCard) {
-        activeCard.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+        const baseW = 816;
         const baseH = activeCard.offsetHeight || 1056;
-        const scaledH = baseH * scale;
-        const extraH = Math.max(0, scaledH - baseH);
-        activeCard.style.marginBottom = `${extraH + 32}px`;
+        const isRotated90 = rotation % 180 !== 0;
+        const boxW = Math.round((isRotated90 ? baseH : baseW) * scale);
+        const boxH = Math.round((isRotated90 ? baseW : baseH) * scale);
+        sizer.style.width = `${boxW}px`;
+        sizer.style.height = `${boxH}px`;
+        activeCard.style.width = `${baseW}px`;
+        activeCard.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+        activeCard.style.transformOrigin = "center center";
       }
     };
     const showPage = (pageNum) => {
@@ -7007,11 +7584,11 @@ var DocPlugin = class {
       pageCards.forEach((card, idx) => {
         if (idx + 1 === currentPage) {
           card.style.display = "block";
-          card.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
         } else {
           card.style.display = "none";
         }
       });
+      applyTransform();
       container.scrollTop = 0;
       ctx.emit("page-change", { page: currentPage, total: totalPages });
     };
@@ -7077,6 +7654,17 @@ var DocPlugin = class {
         rotation = 0;
         applyTransform();
       },
+      resetZoom: () => {
+        isUserZoomed = false;
+        fitMode = "width";
+        scale = calculateFitScale("width");
+        rotation = 0;
+        container.scrollTop = 0;
+        container.scrollLeft = 0;
+        ctx.container.scrollTop = 0;
+        ctx.container.scrollLeft = 0;
+        applyTransform();
+      },
       rotateCW: () => {
         rotation = (rotation + 90) % 360;
         applyTransform();
@@ -7557,6 +8145,14 @@ var PptPlugin = class {
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "reset-zoom",
+        icon: "reset-zoom",
+        label: "Reset Zoom",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.resetZoom?.()
+      },
       {
         id: "rotate-cw",
         icon: "rotate-cw",
@@ -7589,17 +8185,30 @@ var PptPlugin = class {
     container.style.width = "100%";
     container.style.height = "100%";
     container.style.overflow = "auto";
-    container.style.display = "flex";
-    container.style.justifyContent = "center";
-    container.style.alignItems = "center";
-    container.style.padding = "32px 16px";
     container.style.backgroundColor = "#0f172a";
     container.style.boxSizing = "border-box";
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-ppt-scroll-wrapper";
+    scrollWrapper.style.minWidth = "100%";
+    scrollWrapper.style.minHeight = "100%";
+    scrollWrapper.style.width = "max-content";
+    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.display = "flex";
+    scrollWrapper.style.justifyContent = "center";
+    scrollWrapper.style.alignItems = "center";
+    scrollWrapper.style.padding = "32px 16px";
+    scrollWrapper.style.boxSizing = "border-box";
+    const sizer = document.createElement("div");
+    sizer.className = "fp-ppt-sizer";
+    sizer.style.position = "relative";
+    sizer.style.flexShrink = "0";
+    sizer.style.display = "flex";
+    sizer.style.justifyContent = "center";
+    sizer.style.alignItems = "center";
     const slideCard = document.createElement("div");
     slideCard.className = "fp-ppt-slide-card";
     slideCard.style.width = "960px";
-    slideCard.style.maxWidth = "calc(100% - 32px)";
-    slideCard.style.maxHeight = "calc(100% - 48px)";
+    slideCard.style.height = "540px";
     slideCard.style.aspectRatio = "16 / 9";
     slideCard.style.backgroundColor = "#ffffff";
     slideCard.style.boxShadow = "0 12px 40px rgba(0,0,0,0.35)";
@@ -7609,7 +8218,9 @@ var PptPlugin = class {
     slideCard.style.transition = "transform 0.2s ease";
     slideCard.style.transformOrigin = "center center";
     slideCard.style.flexShrink = "0";
-    container.appendChild(slideCard);
+    sizer.appendChild(slideCard);
+    scrollWrapper.appendChild(sizer);
+    container.appendChild(scrollWrapper);
     ctx.container.appendChild(container);
     let scale = 1;
     let rotation = 0;
@@ -7622,7 +8233,17 @@ var PptPlugin = class {
       return Math.min(1, Math.min(availW / 960, availH / 540));
     };
     const applyTransform = () => {
+      const cW = 960;
+      const cH = 540;
+      const isRotated90 = rotation % 180 !== 0;
+      const boxW = Math.round((isRotated90 ? cH : cW) * scale);
+      const boxH = Math.round((isRotated90 ? cW : cH) * scale);
+      sizer.style.width = `${boxW}px`;
+      sizer.style.height = `${boxH}px`;
+      slideCard.style.width = `${cW}px`;
+      slideCard.style.height = `${cH}px`;
       slideCard.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+      slideCard.style.transformOrigin = "center center";
     };
     setTimeout(() => {
       scale = calculateFitScale();
@@ -7745,6 +8366,13 @@ var PptPlugin = class {
         rotation = 0;
         applyTransform();
       },
+      resetZoom: () => {
+        scale = calculateFitScale();
+        rotation = 0;
+        container.scrollTop = 0;
+        container.scrollLeft = 0;
+        applyTransform();
+      },
       rotateCW: () => {
         rotation = (rotation + 90) % 360;
         applyTransform();