@files-preview-app/preview-file 1.3.6 → 1.3.8

package/dist/index.cjs

@@ -1171,6 +1171,10 @@ var FilePreviewViewer = class _FilePreviewViewer {
    * Preview a file in the given container element.
    */
   async preview(container, source, options = {}) {
+    options = {
+      ...options,
+      fitMode: options.fitMode ?? "width"
+    };
     this.currentOptions = options;
     this.abort();
     this.abortController = new AbortController();
@@ -1219,8 +1223,8 @@ var FilePreviewViewer = class _FilePreviewViewer {
       this.activeInstance = instance;
       instance.openInSeparateWindow = () => this.openInSeparateWindow();
       instance.toggleThumbnails = () => this.toggleThumbnails();
-      if (!instance.resetZoom && instance.fitToPage) {
-        instance.resetZoom = () => instance.fitToPage?.();
+      if (!instance.resetZoom) {
+        instance.resetZoom = () => instance.fitToWidth ? instance.fitToWidth() : instance.fitToPage?.();
       }
       this.hideLoading();
       this.eventEmitter.emit("loaded", { metadata, plugin: matchedPlugin.id });
@@ -1617,7 +1621,7 @@ var FilePreviewViewer = class _FilePreviewViewer {
       this.wrapperEl?.classList.toggle("fp-fullscreen-active");
     }
     setTimeout(() => {
-      this.activeInstance?.fitToPage?.();
+      this.triggerAutoFit();
     }, 120);
   }
   /**
@@ -1744,18 +1748,29 @@ var FilePreviewViewer = class _FilePreviewViewer {
     this.thumbnailPanel = new ThumbnailPanel(thumbnailEl, (isOpen) => {
       this.toolbar?.setActionActive("thumbnails", isOpen);
       setTimeout(() => {
-        this.activeInstance?.fitToPage?.();
+        this.triggerAutoFit();
       }, 260);
     });
     this.setupKeyboardShortcuts();
     this.setupDragAndDrop(container, options);
     this.setupResizeAndFullscreenListeners();
   }
+  triggerAutoFit() {
+    if (!this.activeInstance) return;
+    const mode = this.currentOptions?.fitMode ?? "width";
+    if (mode === "width" && this.activeInstance.fitToWidth) {
+      this.activeInstance.fitToWidth();
+    } else if (this.activeInstance.fitToPage) {
+      this.activeInstance.fitToPage();
+    } else if (this.activeInstance.resetZoom) {
+      this.activeInstance.resetZoom();
+    }
+  }
   setupResizeAndFullscreenListeners() {
     if (this.fullscreenHandler) return;
     this.fullscreenHandler = () => {
       setTimeout(() => {
-        this.activeInstance?.fitToPage?.();
+        this.triggerAutoFit();
       }, 100);
     };
     document.addEventListener("fullscreenchange", this.fullscreenHandler);
@@ -1763,7 +1778,7 @@ var FilePreviewViewer = class _FilePreviewViewer {
     if (typeof ResizeObserver !== "undefined" && this.contentEl) {
       this.resizeObserver = new ResizeObserver(() => {
         if (this.activeInstance && (!this.activeInstance.getZoom || Math.abs((this.activeInstance.getZoom?.() ?? 1) - 1) < 0.05)) {
-          this.activeInstance.fitToPage?.();
+          this.triggerAutoFit();
         }
       });
       this.resizeObserver.observe(this.contentEl);
@@ -1791,7 +1806,7 @@ var FilePreviewViewer = class _FilePreviewViewer {
       } else if (e.key === "-" || e.key === "_") {
         this.activeInstance.zoomOut?.();
       } else if (e.key === "0") {
-        this.activeInstance.fitToPage?.();
+        this.resetZoom();
       } else if (e.key === "r" || e.key === "R") {
         this.activeInstance.rotateCW?.();
       } else if (e.key === "f" || e.key === "F") {
@@ -2199,16 +2214,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)";
@@ -2221,7 +2242,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/";
@@ -2407,7 +2429,7 @@ var PdfPlugin = class {
         renderPage(currentPage);
       },
       resetZoom: () => {
-        fitMode = "page";
+        fitMode = ctx?.options?.fitMode || "width";
         zoomScale = 1;
         rotation = 0;
         container.scrollTop = 0;
@@ -2591,6 +2613,16 @@ var MediaPlugin = class {
             instance.resetZoom?.();
           }
         },
+        {
+          id: "fit-width",
+          icon: "fit-width",
+          label: "Fit to Width",
+          type: "button",
+          group: "zoom",
+          execute: () => {
+            instance.fitToWidth?.();
+          }
+        },
         {
           id: "rotate-cw",
           icon: "rotate-cw",
@@ -2687,9 +2719,30 @@ var MediaPlugin = class {
     const isVideo = mimeType.startsWith("video/") || VIDEO_EXTS.includes(ctx.metadata.extension || "");
     const isAudio = mimeType.startsWith("audio/") || AUDIO_EXTS.includes(ctx.metadata.extension || "");
     let url = "";
+    let naturalW = 800;
+    let naturalH = 600;
     if (ctx.metadata.extension === ".svg" || mimeType === "image/svg+xml") {
       const decoder = new TextDecoder("utf-8");
       const svgText = decoder.decode(ctx.buffer);
+      try {
+        const vbMatch = svgText.match(/viewBox=["']\s*([0-9.-]+)\s+([0-9.-]+)\s+([0-9.-]+)\s+([0-9.-]+)\s*["']/i);
+        if (vbMatch) {
+          const vw = parseFloat(vbMatch[3]);
+          const vh = parseFloat(vbMatch[4]);
+          if (vw > 0 && vh > 0) {
+            naturalW = vw;
+            naturalH = vh;
+          }
+        } else {
+          const wMatch = svgText.match(/width=["']([0-9.]+)(?:px)?["']/i);
+          const hMatch = svgText.match(/height=["']([0-9.]+)(?:px)?["']/i);
+          if (wMatch && hMatch) {
+            naturalW = parseFloat(wMatch[1]) || naturalW;
+            naturalH = parseFloat(hMatch[1]) || naturalH;
+          }
+        }
+      } catch {
+      }
       const blob = new Blob([svgText], { type: "image/svg+xml" });
       url = URL.createObjectURL(blob);
     } else {
@@ -2730,45 +2783,150 @@ 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.flexDirection = "column";
+    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.style.margin = "auto 0";
+    sizer.appendChild(element);
+    scrollWrapper.appendChild(sizer);
+    ctx.container.style.overflow = "auto";
+    ctx.container.style.padding = "0";
+    ctx.container.innerHTML = "";
+    ctx.container.appendChild(scrollWrapper);
+    let baseW = naturalW;
+    let baseH = naturalH;
+    let fitMode = ctx?.options?.fitMode || "width";
+    let isUserZoomed = false;
+    const updateBaseDimensions = () => {
+      if (!isImage) return;
+      const img = element;
+      if (img.naturalWidth > 0 && img.naturalHeight > 0) {
+        naturalW = img.naturalWidth;
+        naturalH = img.naturalHeight;
+      }
+      const availW = Math.max(100, ctx.container.clientWidth - 32);
+      const availH = Math.max(100, ctx.container.clientHeight - 32);
+      let fitRatio;
+      if (fitMode === "page") {
+        fitRatio = Math.min(availW / naturalW, availH / naturalH);
+      } else {
+        fitRatio = availW / naturalW;
+      }
+      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) {
+        if (!isUserZoomed) {
+          updateBaseDimensions();
+        }
+        const availH = Math.max(100, ctx.container.clientHeight - 32);
+        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`;
+        sizer.style.margin = boxH < availH ? "auto 0" : "0";
+        const imgW = isRotated90 ? boxH : boxW;
+        const imgH = isRotated90 ? boxW : boxH;
+        element.style.width = `${imgW}px`;
+        element.style.height = `${imgH}px`;
+        element.style.maxWidth = "none";
+        element.style.maxHeight = "none";
+        element.style.transform = rotation ? `rotate(${rotation}deg)` : "none";
+        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 (!isUserZoomed && currentZoom === 1) {
+        updateBaseDimensions();
+        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);
     return {
       destroy: cleanup,
       zoomIn: isImage ? () => {
-        currentZoom += 0.1;
+        isUserZoomed = true;
+        currentZoom = Math.min(5, Math.round((currentZoom + 0.15) * 100) / 100);
         applyTransform();
       } : void 0,
       zoomOut: isImage ? () => {
-        currentZoom = Math.max(0.1, currentZoom - 0.1);
+        isUserZoomed = true;
+        currentZoom = Math.max(0.1, Math.round((currentZoom - 0.15) * 100) / 100);
         applyTransform();
       } : void 0,
       getZoom: isImage ? () => currentZoom : void 0,
       setZoom: isImage ? (level) => {
+        isUserZoomed = true;
         currentZoom = level;
         applyTransform();
       } : void 0,
       fitToPage: isImage ? () => {
+        isUserZoomed = false;
+        fitMode = "page";
+        currentZoom = 1;
+        rotation = 0;
+        ctx.container.scrollTop = 0;
+        ctx.container.scrollLeft = 0;
+        updateBaseDimensions();
+        applyTransform();
+      } : void 0,
+      fitToWidth: isImage ? () => {
+        isUserZoomed = false;
+        fitMode = "width";
         currentZoom = 1;
         rotation = 0;
+        ctx.container.scrollTop = 0;
+        ctx.container.scrollLeft = 0;
+        updateBaseDimensions();
         applyTransform();
       } : void 0,
       resetZoom: isImage ? () => {
+        isUserZoomed = false;
+        fitMode = ctx?.options?.fitMode || "width";
         currentZoom = 1;
         rotation = 0;
         ctx.container.scrollTop = 0;
         ctx.container.scrollLeft = 0;
+        updateBaseDimensions();
         applyTransform();
       } : void 0,
       rotateCW: isImage || isVideo ? () => {
@@ -2895,6 +3053,14 @@ var DocxPlugin = class {
         group: "zoom",
         execute: () => instance.resetZoom?.()
       },
+      {
+        id: "fit-width",
+        icon: "fit-width",
+        label: "Fit to Width",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToWidth?.()
+      },
       {
         id: "rotate-cw",
         icon: "rotate-cw",
@@ -2933,7 +3099,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";
@@ -2943,11 +3109,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 {
@@ -2986,8 +3172,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;
@@ -3024,8 +3210,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) {
@@ -3040,8 +3226,8 @@ var DocxPlugin = class {
             </p>
           </div>
         `;
-        if (!ctx.container.contains(wrapper)) {
-          ctx.container.appendChild(wrapper);
+        if (!sizer.contains(wrapper)) {
+          sizer.appendChild(wrapper);
         }
       }
     }
@@ -3134,31 +3320,40 @@ var DocxPlugin = class {
     }
     scale = 1;
     let rotation = 0;
-    let fitMode = "page";
+    let fitMode = ctx?.options?.fitMode || "width";
     let isUserZoomed = false;
-    const calculateFitScale = (_mode = fitMode) => {
+    const calculateFitScale = (mode = fitMode) => {
       const activeEl = pageElements[currentPage - 1] || wrapper.querySelector("section.docx") || wrapper;
       const elW = activeEl.offsetWidth || 816;
+      const elH = 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 / elH;
+      if (mode === "page") {
+        return Math.max(0.35, Math.min(3, Math.min(sW, sH)));
+      }
       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") {
       resizeObserver = new ResizeObserver(() => {
         if (!isUserZoomed) {
-          const newFit = calculateFitScale("page");
+          const newFit = calculateFitScale(fitMode);
           if (Math.abs(scale - newFit) > 0.015) {
             scale = newFit;
             applyTransform();
@@ -3168,7 +3363,7 @@ var DocxPlugin = class {
       resizeObserver.observe(ctx.container);
     }
     setTimeout(() => {
-      scale = calculateFitScale("page");
+      scale = calculateFitScale(fitMode);
       applyTransform();
     }, 40);
     const cleanup = () => {
@@ -3177,7 +3372,7 @@ var DocxPlugin = class {
       for (const url of createdBlobUrls) {
         URL.revokeObjectURL(url);
       }
-      wrapper.remove();
+      scrollWrapper.remove();
       styleOverride.remove();
       ctx.container.innerHTML = "";
     };
@@ -3207,13 +3402,22 @@ var DocxPlugin = class {
       },
       fitToPage: () => {
         isUserZoomed = false;
+        fitMode = "page";
         scale = calculateFitScale("page");
         rotation = 0;
         applyTransform();
       },
+      fitToWidth: () => {
+        isUserZoomed = false;
+        fitMode = "width";
+        scale = calculateFitScale("width");
+        rotation = 0;
+        applyTransform();
+      },
       resetZoom: () => {
         isUserZoomed = false;
-        scale = calculateFitScale("page");
+        fitMode = ctx?.options?.fitMode || "width";
+        scale = calculateFitScale(fitMode);
         rotation = 0;
         ctx.container.scrollTop = 0;
         ctx.container.scrollLeft = 0;
@@ -3678,6 +3882,16 @@ var ExcelPlugin = class {
           instance.resetZoom?.();
         }
       },
+      {
+        id: "fit-width",
+        icon: "fit-width",
+        label: "Fit to Width",
+        type: "button",
+        group: "zoom",
+        execute: () => {
+          instance.fitToWidth?.();
+        }
+      },
       {
         id: "download",
         icon: "download",
@@ -3724,7 +3938,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";
@@ -3738,18 +3952,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 {
@@ -3769,9 +4000,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';
@@ -3806,13 +4041,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) {
@@ -3849,23 +4088,33 @@ 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();
+      },
+      fitToWidth: () => {
+        isUserZoomed = false;
         scale = calculateFitScale();
         applyTransform();
       },
       resetZoom: () => {
+        isUserZoomed = false;
         scale = calculateFitScale();
         contentArea.scrollTop = 0;
         contentArea.scrollLeft = 0;
@@ -4011,6 +4260,16 @@ var CsvPlugin = class {
           instance.resetZoom?.();
         }
       },
+      {
+        id: "fit-width",
+        icon: "fit-width",
+        label: "Fit to Width",
+        type: "button",
+        group: "zoom",
+        execute: () => {
+          instance.fitToWidth?.();
+        }
+      },
       {
         id: "download",
         icon: "download",
@@ -4097,21 +4356,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 = () => {
@@ -4184,23 +4463,33 @@ 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();
+      },
+      fitToWidth: () => {
+        isUserZoomed = false;
         scale = calculateFitScale();
         applyScale();
       },
       resetZoom: () => {
+        isUserZoomed = false;
         scale = calculateFitScale();
         container.scrollTop = 0;
         container.scrollLeft = 0;
@@ -4331,6 +4620,16 @@ var CodePlugin = class {
           instance.resetZoom?.();
         }
       },
+      {
+        id: "fit-width",
+        icon: "fit-width",
+        label: "Fit to Width",
+        type: "button",
+        group: "zoom",
+        execute: () => {
+          instance.fitToWidth?.();
+        }
+      },
       {
         id: "copy",
         icon: "copy",
@@ -4436,15 +4735,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";
@@ -4459,8 +4770,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";
@@ -4493,7 +4805,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));
@@ -4510,10 +4828,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`;
@@ -4610,6 +4934,13 @@ var CodePlugin = class {
         zoomLevel = isTxt ? calculateTxtFit() : 1;
         updateTransform();
       },
+      fitToWidth: () => {
+        isUserZoomed = false;
+        fontSize = 13;
+        rotation = 0;
+        zoomLevel = isTxt ? calculateTxtFit() : 1;
+        updateTransform();
+      },
       resetZoom: () => {
         isUserZoomed = false;
         fontSize = 13;
@@ -4694,6 +5025,14 @@ var ArchivePlugin = class {
         group: "zoom",
         execute: () => instance.resetZoom?.()
       },
+      {
+        id: "fit-width",
+        icon: "fit-width",
+        label: "Fit to Width",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToWidth?.()
+      },
       {
         id: "download",
         icon: "download",
@@ -4719,16 +5058,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) {
@@ -4752,7 +5131,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>
@@ -4782,7 +5161,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 {
@@ -4811,19 +5190,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 = () => {
@@ -4835,26 +5215,30 @@ 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();
+      },
+      fitToWidth: () => {
+        scale = 1;
+        applyTransform();
       },
       resetZoom: () => {
         scale = 1;
-        wrapper.style.transform = "scale(1)";
-        ctx.container.scrollTop = 0;
-        ctx.container.scrollLeft = 0;
+        wrapper.scrollTop = 0;
+        wrapper.scrollLeft = 0;
+        applyTransform();
       },
       download: () => {
         downloadFile(ctx.buffer, ctx.metadata.name || "archive.zip", "application/zip");
@@ -4914,6 +5298,14 @@ var MarkdownPlugin = class {
         group: "zoom",
         execute: () => instance.resetZoom?.()
       },
+      {
+        id: "fit-width",
+        icon: "fit-width",
+        label: "Fit to Width",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToWidth?.()
+      },
       {
         id: "copy",
         icon: "copy",
@@ -5067,6 +5459,10 @@ var MarkdownPlugin = class {
         fontSize = 15;
         wrapper.style.fontSize = "15px";
       },
+      fitToWidth: () => {
+        fontSize = 15;
+        wrapper.style.fontSize = "15px";
+      },
       resetZoom: () => {
         fontSize = 15;
         wrapper.style.fontSize = "15px";
@@ -5174,6 +5570,14 @@ var PptxPlugin = class {
         group: "zoom",
         execute: () => instance.resetZoom?.()
       },
+      {
+        id: "fit-width",
+        icon: "fit-width",
+        label: "Fit to Width",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToWidth?.()
+      },
       {
         id: "rotate-cw",
         icon: "rotate-cw",
@@ -5213,12 +5617,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";
@@ -5227,39 +5649,65 @@ 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);
-    const calculateFitScale = () => {
-      const availW = Math.max(200, ctx.container.clientWidth - 48);
-      const availH = Math.max(200, ctx.container.clientHeight - 72);
+    let fitMode = ctx?.options?.fitMode || "width";
+    let isUserZoomed = false;
+    const calculateFitScale = (mode = fitMode) => {
+      const availW = Math.max(200, ctx.container.clientWidth - 32);
+      const availH = Math.max(200, ctx.container.clientHeight - 32);
       const cW = canvas.offsetWidth || 1280;
       const cH = canvas.offsetHeight || 720;
-      return Math.min(1, Math.min(availW / cW, availH / cH));
+      if (mode === "page") {
+        return Math.min(2.5, Math.min(availW / cW, availH / cH));
+      }
+      return Math.min(2.5, availW / cW);
     };
     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 {
         await renderer.renderSlide(currentSlide - 1, canvas, 1280);
         ctx.emit("page-change", { page: currentSlide, totalPages: slideCount });
-        scale = calculateFitScale();
+        if (!isUserZoomed) {
+          scale = calculateFitScale(fitMode);
+        }
         applyTransform();
       } catch (err) {
         console.error("[PptxPlugin] Failed to render slide:", err);
       }
     };
     await renderCurrentSlide();
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      if (!isUserZoomed) {
+        scale = calculateFitScale(fitMode);
+        applyTransform();
+      }
+    }) : null;
+    ro?.observe(ctx.container);
     const cleanup = () => {
+      ro?.disconnect();
       renderer.destroy();
       wrapper.remove();
       ctx.container.innerHTML = "";
@@ -5276,28 +5724,44 @@ var PptxPlugin = class {
       getPageCount: () => slideCount,
       getCurrentPage: () => currentSlide,
       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: () => {
-        scale = calculateFitScale();
+        isUserZoomed = false;
+        fitMode = "page";
+        scale = calculateFitScale("page");
+        rotation = 0;
+        applyTransform();
+      },
+      fitToWidth: () => {
+        isUserZoomed = false;
+        fitMode = "width";
+        scale = calculateFitScale("width");
         rotation = 0;
         applyTransform();
       },
       resetZoom: () => {
-        scale = calculateFitScale();
+        isUserZoomed = false;
+        fitMode = ctx?.options?.fitMode || "width";
+        scale = calculateFitScale(fitMode);
         rotation = 0;
         wrapper.scrollTop = 0;
         wrapper.scrollLeft = 0;
+        ctx.container.scrollTop = 0;
+        ctx.container.scrollLeft = 0;
         applyTransform();
       },
       rotateCW: () => {
@@ -5742,6 +6206,14 @@ var RtfPlugin = class {
         group: "zoom",
         execute: () => instance.resetZoom?.()
       },
+      {
+        id: "fit-width",
+        icon: "fit-width",
+        label: "Fit to Width",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToWidth?.()
+      },
       {
         id: "rotate-cw",
         icon: "rotate-cw",
@@ -5852,13 +6324,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 = [];
@@ -5877,12 +6369,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) {
@@ -6153,7 +6650,7 @@ var RtfPlugin = class {
     }
     const cleanup = () => {
       resizeObserver?.disconnect();
-      wrapper.remove();
+      scrollWrapper.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
@@ -6205,6 +6702,13 @@ var RtfPlugin = class {
         applyTransform();
       },
       fitToPage: () => {
+        isUserZoomed = false;
+        fitMode = "page";
+        scale = calculateFitScale("page");
+        rotation = 0;
+        applyTransform();
+      },
+      fitToWidth: () => {
         isUserZoomed = false;
         fitMode = "width";
         scale = calculateFitScale("width");
@@ -6213,8 +6717,8 @@ var RtfPlugin = class {
       },
       resetZoom: () => {
         isUserZoomed = false;
-        fitMode = "width";
-        scale = calculateFitScale("width");
+        fitMode = ctx?.options?.fitMode || "width";
+        scale = calculateFitScale(fitMode);
         rotation = 0;
         ctx.container.scrollTop = 0;
         ctx.container.scrollLeft = 0;
@@ -6295,6 +6799,14 @@ var HtmlPreviewPlugin = class {
         group: "zoom",
         execute: () => instance.resetZoom?.()
       },
+      {
+        id: "fit-width",
+        icon: "fit-width",
+        label: "Fit to Width",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToWidth?.()
+      },
       {
         id: "copy",
         icon: "copy",
@@ -6328,23 +6840,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);
@@ -6352,26 +6885,30 @@ 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();
+      },
+      fitToWidth: () => {
+        scale = 1;
+        applyTransform();
       },
       resetZoom: () => {
         scale = 1;
-        iframe.style.transform = "scale(1)";
         ctx.container.scrollTop = 0;
         ctx.container.scrollLeft = 0;
+        applyTransform();
       },
       copy: () => {
         navigator.clipboard.writeText(rawHtml);
@@ -6481,6 +7018,14 @@ var OpenDocumentPlugin = class {
         group: "zoom",
         execute: () => instance.resetZoom?.()
       },
+      {
+        id: "fit-width",
+        icon: "fit-width",
+        label: "Fit to Width",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToWidth?.()
+      },
       {
         id: "rotate-cw",
         icon: "rotate-cw",
@@ -6546,10 +7091,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";
@@ -6558,9 +7119,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;
@@ -6578,7 +7142,10 @@ var OpenDocumentPlugin = class {
       const sW = availW / elW;
       const sH = availH / (isPresentation ? 540 : singlePageH);
       if (isPresentation) {
-        return Math.min(2.5, Math.min(sW, sH));
+        if (mode === "page") {
+          return Math.min(2.5, Math.min(sW, sH));
+        }
+        return Math.min(2.5, sW);
       }
       if (mode === "page") {
         return Math.max(0.35, Math.min(3, Math.min(sW, sH)));
@@ -6586,13 +7153,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) {
@@ -6742,6 +7314,13 @@ var OpenDocumentPlugin = class {
         applyTransform();
       },
       fitToPage: () => {
+        isUserZoomed = false;
+        fitMode = "page";
+        scale = calculateFitScale("page");
+        rotation = 0;
+        applyTransform();
+      },
+      fitToWidth: () => {
         isUserZoomed = false;
         fitMode = "width";
         scale = calculateFitScale("width");
@@ -6750,8 +7329,8 @@ var OpenDocumentPlugin = class {
       },
       resetZoom: () => {
         isUserZoomed = false;
-        fitMode = "width";
-        scale = calculateFitScale("width");
+        fitMode = ctx?.options?.fitMode || "width";
+        scale = calculateFitScale(fitMode);
         rotation = 0;
         container.scrollTop = 0;
         container.scrollLeft = 0;
@@ -7108,6 +7687,14 @@ var DocPlugin = class {
         group: "zoom",
         execute: () => instance.resetZoom?.()
       },
+      {
+        id: "fit-width",
+        icon: "fit-width",
+        label: "Fit to Width",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToWidth?.()
+      },
       {
         id: "rotate-cw",
         icon: "rotate-cw",
@@ -7156,13 +7743,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 = "";
@@ -7210,10 +7812,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;">
@@ -7225,18 +7828,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) => {
@@ -7244,11 +7852,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 });
     };
@@ -7308,6 +7916,13 @@ var DocPlugin = class {
         applyTransform();
       },
       fitToPage: () => {
+        isUserZoomed = false;
+        fitMode = "page";
+        scale = calculateFitScale("page");
+        rotation = 0;
+        applyTransform();
+      },
+      fitToWidth: () => {
         isUserZoomed = false;
         fitMode = "width";
         scale = calculateFitScale("width");
@@ -7316,9 +7931,11 @@ var DocPlugin = class {
       },
       resetZoom: () => {
         isUserZoomed = false;
-        fitMode = "width";
-        scale = calculateFitScale("width");
+        fitMode = ctx?.options?.fitMode || "width";
+        scale = calculateFitScale(fitMode);
         rotation = 0;
+        container.scrollTop = 0;
+        container.scrollLeft = 0;
         ctx.container.scrollTop = 0;
         ctx.container.scrollLeft = 0;
         applyTransform();
@@ -7811,6 +8428,14 @@ var PptPlugin = class {
         group: "zoom",
         execute: () => instance.resetZoom?.()
       },
+      {
+        id: "fit-width",
+        icon: "fit-width",
+        label: "Fit to Width",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToWidth?.()
+      },
       {
         id: "rotate-cw",
         icon: "rotate-cw",
@@ -7843,17 +8468,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)";
@@ -7863,23 +8501,47 @@ 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;
     let currentSlide = 1;
     let slides = [];
     const createdBlobUrls = [];
-    const calculateFitScale = () => {
-      const availW = Math.max(200, container.clientWidth - 48);
-      const availH = Math.max(200, container.clientHeight - 72);
-      return Math.min(1, Math.min(availW / 960, availH / 540));
+    let fitMode = ctx?.options?.fitMode || "width";
+    let isUserZoomed = false;
+    const calculateFitScale = (mode = fitMode) => {
+      const availW = Math.max(200, container.clientWidth - 32);
+      const availH = Math.max(200, container.clientHeight - 32);
+      if (mode === "page") {
+        return Math.min(2.5, Math.min(availW / 960, availH / 540));
+      }
+      return Math.min(2.5, availW / 960);
     };
     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";
     };
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      if (!isUserZoomed) {
+        scale = calculateFitScale(fitMode);
+        applyTransform();
+      }
+    }) : null;
+    ro?.observe(container);
     setTimeout(() => {
-      scale = calculateFitScale();
+      scale = calculateFitScale(fitMode);
       applyTransform();
     }, 60);
     try {
@@ -7972,6 +8634,7 @@ var PptPlugin = class {
     };
     renderSlide(1);
     const cleanup = () => {
+      ro?.disconnect();
       for (const u of createdBlobUrls) {
         URL.revokeObjectURL(u);
       }
@@ -7982,28 +8645,44 @@ var PptPlugin = 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: () => {
-        scale = calculateFitScale();
+        isUserZoomed = false;
+        fitMode = "page";
+        scale = calculateFitScale("page");
+        rotation = 0;
+        applyTransform();
+      },
+      fitToWidth: () => {
+        isUserZoomed = false;
+        fitMode = "width";
+        scale = calculateFitScale("width");
         rotation = 0;
         applyTransform();
       },
       resetZoom: () => {
-        scale = calculateFitScale();
+        isUserZoomed = false;
+        fitMode = ctx?.options?.fitMode || "width";
+        scale = calculateFitScale(fitMode);
         rotation = 0;
         container.scrollTop = 0;
         container.scrollLeft = 0;
+        ctx.container.scrollTop = 0;
+        ctx.container.scrollLeft = 0;
         applyTransform();
       },
       rotateCW: () => {