@files-preview-app/preview-file 1.3.7 → 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") {
@@ -2414,7 +2429,7 @@ var PdfPlugin = class {
         renderPage(currentPage);
       },
       resetZoom: () => {
-        fitMode = "page";
+        fitMode = ctx?.options?.fitMode || "width";
         zoomScale = 1;
         rotation = 0;
         container.scrollTop = 0;
@@ -2598,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",
@@ -2694,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 {
@@ -2744,7 +2790,7 @@ var MediaPlugin = class {
     scrollWrapper.style.width = "max-content";
     scrollWrapper.style.height = "max-content";
     scrollWrapper.style.display = "flex";
-    scrollWrapper.style.justifyContent = "center";
+    scrollWrapper.style.flexDirection = "column";
     scrollWrapper.style.alignItems = "center";
     scrollWrapper.style.padding = "16px";
     scrollWrapper.style.boxSizing = "border-box";
@@ -2755,40 +2801,54 @@ var MediaPlugin = class {
     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 naturalW = 800;
-    let naturalH = 600;
-    let baseW = 800;
-    let baseH = 600;
+    let baseW = naturalW;
+    let baseH = naturalH;
+    let fitMode = ctx?.options?.fitMode || "width";
+    let isUserZoomed = false;
     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);
+      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 = () => {
       if (isImage) {
-        updateBaseDimensions();
+        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`;
-        element.style.width = `${baseW}px`;
-        element.style.height = `${baseH}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 = `scale(${currentZoom}) rotate(${rotation}deg)`;
+        element.style.transform = rotation ? `rotate(${rotation}deg)` : "none";
         element.style.transformOrigin = "center center";
         element.style.flexShrink = "0";
       } else {
@@ -2808,7 +2868,8 @@ var MediaPlugin = class {
       }
     }
     const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
-      if (currentZoom === 1) {
+      if (!isUserZoomed && currentZoom === 1) {
+        updateBaseDimensions();
         applyTransform();
       }
     }) : null;
@@ -2823,28 +2884,49 @@ var MediaPlugin = class {
     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 ? () => {
@@ -2971,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",
@@ -3230,13 +3320,19 @@ 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 = () => {
@@ -3257,7 +3353,7 @@ var DocxPlugin = class {
     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();
@@ -3267,7 +3363,7 @@ var DocxPlugin = class {
       resizeObserver.observe(ctx.container);
     }
     setTimeout(() => {
-      scale = calculateFitScale("page");
+      scale = calculateFitScale(fitMode);
       applyTransform();
     }, 40);
     const cleanup = () => {
@@ -3306,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;
@@ -3777,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",
@@ -3993,6 +4108,11 @@ var ExcelPlugin = class {
         scale = calculateFitScale();
         applyTransform();
       },
+      fitToWidth: () => {
+        isUserZoomed = false;
+        scale = calculateFitScale();
+        applyTransform();
+      },
       resetZoom: () => {
         isUserZoomed = false;
         scale = calculateFitScale();
@@ -4140,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",
@@ -4353,6 +4483,11 @@ var CsvPlugin = class {
         scale = calculateFitScale();
         applyScale();
       },
+      fitToWidth: () => {
+        isUserZoomed = false;
+        scale = calculateFitScale();
+        applyScale();
+      },
       resetZoom: () => {
         isUserZoomed = false;
         scale = calculateFitScale();
@@ -4485,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",
@@ -4789,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;
@@ -4873,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",
@@ -5070,6 +5230,10 @@ var ArchivePlugin = class {
         scale = 1;
         applyTransform();
       },
+      fitToWidth: () => {
+        scale = 1;
+        applyTransform();
+      },
       resetZoom: () => {
         scale = 1;
         wrapper.scrollTop = 0;
@@ -5134,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",
@@ -5287,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";
@@ -5394,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",
@@ -5477,12 +5661,17 @@ var PptxPlugin = class {
     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;
@@ -5501,14 +5690,24 @@ var PptxPlugin = class {
       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 = "";
@@ -5525,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: () => {
@@ -5991,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",
@@ -6479,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");
@@ -6487,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;
@@ -6569,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",
@@ -6662,6 +6900,10 @@ var HtmlPreviewPlugin = class {
         scale = 1;
         applyTransform();
       },
+      fitToWidth: () => {
+        scale = 1;
+        applyTransform();
+      },
       resetZoom: () => {
         scale = 1;
         ctx.container.scrollTop = 0;
@@ -6776,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",
@@ -6892,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)));
@@ -7061,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");
@@ -7069,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;
@@ -7427,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",
@@ -7648,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");
@@ -7656,8 +7931,8 @@ 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;
@@ -8153,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",
@@ -8227,10 +8510,15 @@ var PptPlugin = class {
     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;
@@ -8245,8 +8533,15 @@ var PptPlugin = class {
       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 {
@@ -8339,6 +8634,7 @@ var PptPlugin = class {
     };
     renderSlide(1);
     const cleanup = () => {
+      ro?.disconnect();
       for (const u of createdBlobUrls) {
         URL.revokeObjectURL(u);
       }
@@ -8349,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: () => {