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

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);
   }
   /**
@@ -1709,19 +1713,85 @@ var FilePreviewViewer = class _FilePreviewViewer {
     if (this.wrapperEl?.parentNode) {
       this.wrapperEl.parentNode.removeChild(this.wrapperEl);
     }
+    if (typeof document !== "undefined" && !document.getElementById("fp-core-injected-styles")) {
+      const styleEl = document.createElement("style");
+      styleEl.id = "fp-core-injected-styles";
+      styleEl.textContent = `
+        .fp-viewer {
+          display: flex !important;
+          flex-direction: column !important;
+          width: 100% !important;
+          height: 100% !important;
+          overflow: hidden !important;
+          position: relative !important;
+          box-sizing: border-box !important;
+        }
+        .fp-body {
+          display: flex !important;
+          flex: 1 1 0% !important;
+          min-height: 0 !important;
+          min-width: 0 !important;
+          width: 100% !important;
+          height: 100% !important;
+          overflow: hidden !important;
+          position: relative !important;
+          box-sizing: border-box !important;
+        }
+        .fp-content {
+          flex: 1 1 0% !important;
+          position: relative !important;
+          overflow: auto !important;
+          display: flex !important;
+          flex-direction: column !important;
+          align-items: stretch !important;
+          justify-content: flex-start !important;
+          width: 100% !important;
+          height: 100% !important;
+          min-width: 0 !important;
+          min-height: 0 !important;
+          box-sizing: border-box !important;
+        }
+      `;
+      document.head.appendChild(styleEl);
+    }
     const themeClass = options.theme === "dark" ? "fp-theme-dark" : "";
     const toolbarPos = options.toolbarPosition ?? "top";
     this.wrapperEl = document.createElement("div");
     this.wrapperEl.className = `fp-viewer ${themeClass} ${options.className ?? ""}`.trim();
     this.wrapperEl.tabIndex = 0;
+    this.wrapperEl.style.display = "flex";
+    this.wrapperEl.style.flexDirection = "column";
+    this.wrapperEl.style.width = "100%";
+    this.wrapperEl.style.height = "100%";
+    this.wrapperEl.style.overflow = "hidden";
+    this.wrapperEl.style.position = "relative";
     const toolbarEl = document.createElement("div");
     toolbarEl.className = "fp-toolbar-container";
     this.contentEl = document.createElement("div");
     this.contentEl.className = "fp-content";
+    this.contentEl.style.flex = "1 1 0%";
+    this.contentEl.style.position = "relative";
+    this.contentEl.style.overflow = "auto";
+    this.contentEl.style.display = "flex";
+    this.contentEl.style.flexDirection = "column";
+    this.contentEl.style.alignItems = "stretch";
+    this.contentEl.style.justifyContent = "flex-start";
+    this.contentEl.style.width = "100%";
+    this.contentEl.style.height = "100%";
+    this.contentEl.style.minWidth = "0";
+    this.contentEl.style.minHeight = "0";
+    this.contentEl.style.boxSizing = "border-box";
     const thumbnailEl = document.createElement("div");
     thumbnailEl.className = "fp-thumbnail-container";
     const bodyEl = document.createElement("div");
     bodyEl.className = "fp-body";
+    bodyEl.style.display = "flex";
+    bodyEl.style.flex = "1 1 0%";
+    bodyEl.style.minHeight = "0";
+    bodyEl.style.minWidth = "0";
+    bodyEl.style.width = "100%";
+    bodyEl.style.overflow = "hidden";
+    bodyEl.style.position = "relative";
     bodyEl.appendChild(thumbnailEl);
     bodyEl.appendChild(this.contentEl);
     const titleBarEl = document.createElement("div");
@@ -1744,18 +1814,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 +1844,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 +1872,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 +2495,7 @@ var PdfPlugin = class {
         renderPage(currentPage);
       },
       resetZoom: () => {
-        fitMode = "page";
+        fitMode = ctx?.options?.fitMode || "width";
         zoomScale = 1;
         rotation = 0;
         container.scrollTop = 0;
@@ -2598,6 +2679,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 +2785,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 +2856,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 +2867,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 +2934,8 @@ var MediaPlugin = class {
       }
     }
     const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
-      if (currentZoom === 1) {
+      if (!isUserZoomed && currentZoom === 1) {
+        updateBaseDimensions();
         applyTransform();
       }
     }) : null;
@@ -2823,28 +2950,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 +3119,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 +3386,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 +3419,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 +3429,7 @@ var DocxPlugin = class {
       resizeObserver.observe(ctx.container);
     }
     setTimeout(() => {
-      scale = calculateFitScale("page");
+      scale = calculateFitScale(fitMode);
       applyTransform();
     }, 40);
     const cleanup = () => {
@@ -3306,13 +3468,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 +3948,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 +4174,11 @@ var ExcelPlugin = class {
         scale = calculateFitScale();
         applyTransform();
       },
+      fitToWidth: () => {
+        isUserZoomed = false;
+        scale = calculateFitScale();
+        applyTransform();
+      },
       resetZoom: () => {
         isUserZoomed = false;
         scale = calculateFitScale();
@@ -4140,6 +4326,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 +4549,11 @@ var CsvPlugin = class {
         scale = calculateFitScale();
         applyScale();
       },
+      fitToWidth: () => {
+        isUserZoomed = false;
+        scale = calculateFitScale();
+        applyScale();
+      },
       resetZoom: () => {
         isUserZoomed = false;
         scale = calculateFitScale();
@@ -4384,31 +4585,80 @@ function csvPlugin() {
 }
 var CODE_EXTENSIONS = [
   ".txt",
+  ".log",
+  ".ini",
+  ".cfg",
+  ".conf",
+  ".env",
   ".json",
+  ".jsonc",
+  ".json5",
   ".js",
-  ".ts",
+  ".mjs",
+  ".cjs",
   ".jsx",
+  ".ts",
+  ".mts",
+  ".cts",
   ".tsx",
   ".html",
+  ".htm",
+  ".xhtml",
   ".css",
   ".scss",
+  ".sass",
   ".less",
   ".md",
+  ".markdown",
   ".xml",
+  ".svg",
+  ".xaml",
   ".yml",
   ".yaml",
+  ".toml",
   ".sh",
   ".bash",
+  ".zsh",
+  ".fish",
+  ".bat",
+  ".cmd",
+  ".ps1",
   ".py",
+  ".pyw",
   ".java",
+  ".class",
   ".c",
   ".cpp",
+  ".cc",
+  ".cxx",
   ".h",
+  ".hpp",
+  ".hxx",
   ".cs",
+  ".csx",
   ".go",
   ".rs",
   ".sql",
-  ".php"
+  ".php",
+  ".phtml",
+  ".rb",
+  ".swift",
+  ".kt",
+  ".kts",
+  ".scala",
+  ".r",
+  ".lua",
+  ".pl",
+  ".pm",
+  ".dart",
+  ".graphql",
+  ".gql",
+  ".proto",
+  ".diff",
+  ".patch",
+  ".dockerfile",
+  ".properties",
+  ".gradle"
 ];
 var CodePlugin = class {
   id = "code";
@@ -4426,34 +4676,36 @@ var CodePlugin = class {
   getToolbarActions(instance) {
     const totalPages = instance.getPageCount?.() ?? 1;
     const actions = [];
-    actions.push({
-      id: "thumbnails",
-      icon: "thumbnails",
-      label: "Page Thumbnails",
-      type: "button",
-      group: "navigation",
-      execute: () => instance.toggleThumbnails?.()
-    });
-    actions.push({
-      id: "page-nav",
-      icon: "",
-      label: "Page Navigation",
-      type: "page-nav",
-      group: "navigation",
-      value: instance.getCurrentPage?.() ?? 1,
-      max: totalPages,
-      execute: (action, page) => {
-        const cur = instance.getCurrentPage?.() ?? 1;
-        const max = instance.getPageCount?.() ?? 1;
-        if (action === "prev") {
-          if (cur > 1) instance.goToPage?.(cur - 1);
-        } else if (action === "next") {
-          if (cur < max) instance.goToPage?.(cur + 1);
-        } else if (typeof page === "number") {
-          instance.goToPage?.(page);
+    if (totalPages > 1) {
+      actions.push({
+        id: "thumbnails",
+        icon: "thumbnails",
+        label: "Page Thumbnails",
+        type: "button",
+        group: "navigation",
+        execute: () => instance.toggleThumbnails?.()
+      });
+      actions.push({
+        id: "page-nav",
+        icon: "",
+        label: "Page Navigation",
+        type: "page-nav",
+        group: "navigation",
+        value: instance.getCurrentPage?.() ?? 1,
+        max: totalPages,
+        execute: (action, page) => {
+          const cur = instance.getCurrentPage?.() ?? 1;
+          const max = instance.getPageCount?.() ?? 1;
+          if (action === "prev") {
+            if (cur > 1) instance.goToPage?.(cur - 1);
+          } else if (action === "next") {
+            if (cur < max) instance.goToPage?.(cur + 1);
+          } else if (typeof page === "number") {
+            instance.goToPage?.(page);
+          }
         }
-      }
-    });
+      });
+    }
     actions.push(
       {
         id: "zoom-out",
@@ -4485,6 +4737,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",
@@ -4580,10 +4842,6 @@ var CodePlugin = class {
     }
     const totalPages = Math.max(1, rawPages.length);
     let currentPage = 1;
-    const container = document.createElement("div");
-    container.style.width = "100%";
-    container.style.height = "100%";
-    container.style.overflow = "auto";
     let fontSize = 13;
     let rotation = 0;
     let zoomLevel = 1;
@@ -4592,9 +4850,10 @@ var CodePlugin = class {
     const code = document.createElement("code");
     const sizer = document.createElement("div");
     const scrollWrapper = document.createElement("div");
+    const lineGutter = document.createElement("div");
+    ctx.container.style.overflow = "auto";
     if (isTxt) {
-      container.style.overflow = "auto";
-      container.style.backgroundColor = "#f1f5f9";
+      ctx.container.style.backgroundColor = "#f1f5f9";
       scrollWrapper.className = "fp-code-scroll-wrapper";
       scrollWrapper.style.minWidth = "100%";
       scrollWrapper.style.minHeight = "100%";
@@ -4629,18 +4888,42 @@ var CodePlugin = class {
       pre.style.transition = "transform 0.15s ease";
       pre.style.flexShrink = "0";
     } else {
-      container.style.overflow = "auto";
-      container.style.backgroundColor = "#1e1e1e";
-      container.style.color = "#d4d4d4";
-      container.style.padding = "16px";
-      container.style.boxSizing = "border-box";
+      ctx.container.style.backgroundColor = "#1e1e1e";
+      ctx.container.style.color = "#d4d4d4";
+      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.alignItems = "flex-start";
+      scrollWrapper.style.padding = "16px";
+      scrollWrapper.style.boxSizing = "border-box";
+      const lineCount = fullText.split(/\r?\n/).length || 1;
+      const gutterLines = [];
+      for (let i = 1; i <= lineCount; i++) {
+        gutterLines.push(String(i));
+      }
+      lineGutter.className = "fp-code-gutter";
+      lineGutter.style.userSelect = "none";
+      lineGutter.style.textAlign = "right";
+      lineGutter.style.paddingRight = "16px";
+      lineGutter.style.marginRight = "16px";
+      lineGutter.style.borderRight = "1px solid #333333";
+      lineGutter.style.color = "#858585";
+      lineGutter.style.fontFamily = "Consolas, Menlo, Monaco, 'Courier New', monospace";
+      lineGutter.style.fontSize = `${fontSize}px`;
+      lineGutter.style.lineHeight = "1.6";
+      lineGutter.style.flexShrink = "0";
+      lineGutter.textContent = gutterLines.join("\n");
       pre.style.margin = "0";
-      pre.style.fontFamily = "Consolas, Menlo, Monaco, monospace";
+      pre.style.fontFamily = "Consolas, Menlo, Monaco, 'Courier New', monospace";
       pre.style.fontSize = `${fontSize}px`;
-      pre.style.lineHeight = "1.5";
-      pre.style.whiteSpace = "pre-wrap";
-      pre.style.wordBreak = "break-all";
-      pre.style.transformOrigin = "top left";
+      pre.style.lineHeight = "1.6";
+      pre.style.whiteSpace = "pre";
+      pre.style.wordBreak = "normal";
+      pre.style.overflowWrap = "normal";
+      pre.style.flex = "1";
     }
     const ext = (ctx.metadata.extension || "").replace(".", "");
     const renderCodePage = (text) => {
@@ -4660,25 +4943,27 @@ var CodePlugin = class {
     };
     renderCodePage(rawPages[0] || (isTxt ? "" : fullText));
     pre.appendChild(code);
+    ctx.container.innerHTML = "";
     if (isTxt) {
       sizer.appendChild(pre);
       scrollWrapper.appendChild(sizer);
-      container.appendChild(scrollWrapper);
+      ctx.container.appendChild(scrollWrapper);
     } else {
-      container.appendChild(pre);
+      scrollWrapper.appendChild(lineGutter);
+      scrollWrapper.appendChild(pre);
+      ctx.container.appendChild(scrollWrapper);
     }
     const showPage = (pageNum) => {
       currentPage = Math.max(1, Math.min(totalPages, pageNum));
       renderCodePage(rawPages[currentPage - 1] || (isTxt ? "" : fullText));
-      container.scrollTop = 0;
+      ctx.container.scrollTop = 0;
       ctx.emit("page-change", { page: currentPage, total: totalPages });
     };
     if (totalPages > 1) {
       showPage(1);
     }
-    ctx.container.appendChild(container);
     const calculateTxtFit = () => {
-      const availW = Math.max(280, container.clientWidth - 32);
+      const availW = Math.max(280, ctx.container.clientWidth - 32);
       return Math.max(0.4, Math.min(3, availW / 816));
     };
     const updateTransform = () => {
@@ -4696,6 +4981,7 @@ var CodePlugin = class {
       } else {
         pre.style.transform = `rotate(${rotation}deg)`;
         pre.style.fontSize = `${fontSize}px`;
+        lineGutter.style.fontSize = `${fontSize}px`;
       }
     };
     let resizeObserver = null;
@@ -4710,11 +4996,11 @@ var CodePlugin = class {
           updateTransform();
         }
       }) : null;
-      resizeObserver?.observe(container);
+      resizeObserver?.observe(ctx.container);
     }
     const cleanup = () => {
       resizeObserver?.disconnect();
-      container.remove();
+      scrollWrapper.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
@@ -4759,7 +5045,7 @@ var CodePlugin = class {
         if (isTxt) {
           zoomLevel = Math.min(3.5, zoomLevel + 0.15);
         } else {
-          fontSize = Math.min(32, fontSize + 2);
+          fontSize = Math.min(48, fontSize + 2);
         }
         updateTransform();
       },
@@ -4768,7 +5054,7 @@ var CodePlugin = class {
         if (isTxt) {
           zoomLevel = Math.max(0.1, zoomLevel - 0.15);
         } else {
-          fontSize = Math.max(8, fontSize - 2);
+          fontSize = Math.max(9, fontSize - 2);
         }
         updateTransform();
       },
@@ -4789,13 +5075,20 @@ 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;
         rotation = 0;
         zoomLevel = isTxt ? calculateTxtFit() : 1;
-        container.scrollTop = 0;
-        container.scrollLeft = 0;
+        ctx.container.scrollTop = 0;
+        ctx.container.scrollLeft = 0;
         updateTransform();
       },
       rotateCW: () => {
@@ -4873,6 +5166,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 +5371,10 @@ var ArchivePlugin = class {
         scale = 1;
         applyTransform();
       },
+      fitToWidth: () => {
+        scale = 1;
+        applyTransform();
+      },
       resetZoom: () => {
         scale = 1;
         wrapper.scrollTop = 0;
@@ -5105,7 +5410,7 @@ var MarkdownPlugin = class {
       {
         id: "zoom-out",
         icon: "zoom-out",
-        label: "Decrease Font",
+        label: "Zoom Out",
         type: "button",
         group: "zoom",
         execute: () => instance.zoomOut?.()
@@ -5113,19 +5418,11 @@ var MarkdownPlugin = class {
       {
         id: "zoom-in",
         icon: "zoom-in",
-        label: "Increase Font",
+        label: "Zoom In",
         type: "button",
         group: "zoom",
         execute: () => instance.zoomIn?.()
       },
-      {
-        id: "fit-page",
-        icon: "fit-page",
-        label: "Default Size",
-        type: "button",
-        group: "zoom",
-        execute: () => instance.fitToPage?.()
-      },
       {
         id: "reset-zoom",
         icon: "reset-zoom",
@@ -5134,6 +5431,22 @@ 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: "fit-page",
+        icon: "fit-page",
+        label: "Fit to Page",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToPage?.()
+      },
       {
         id: "copy",
         icon: "copy",
@@ -5157,10 +5470,18 @@ var MarkdownPlugin = class {
         type: "button",
         group: "actions",
         execute: () => instance.print?.()
-      }
-    ];
-  }
-  async render(ctx) {
+      },
+      {
+        id: "open-window",
+        icon: "open-window",
+        label: "Open in Separate Full Window",
+        type: "button",
+        group: "actions",
+        execute: () => instance.openInSeparateWindow?.()
+      }
+    ];
+  }
+  async render(ctx) {
     const text = new TextDecoder("utf-8", { fatal: false }).decode(ctx.buffer);
     const rawHtml = await marked.marked.parse(text, {
       gfm: true,
@@ -5169,35 +5490,57 @@ var MarkdownPlugin = class {
     const cleanHtml = DOMPurify6__default.default.sanitize(rawHtml, {
       USE_PROFILES: { html: true }
     });
-    const wrapper = document.createElement("div");
-    wrapper.className = "fp-markdown-wrapper";
-    wrapper.style.cssText = `
-      width: 100%;
-      height: 100%;
-      overflow: auto;
-      padding: 32px 40px;
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-markdown-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 = "24px 16px";
+    scrollWrapper.style.boxSizing = "border-box";
+    const sizer = document.createElement("div");
+    sizer.className = "fp-markdown-sizer";
+    sizer.style.position = "relative";
+    sizer.style.flexShrink = "0";
+    sizer.style.display = "flex";
+    sizer.style.justifyContent = "center";
+    sizer.style.alignItems = "flex-start";
+    const docCard = document.createElement("div");
+    docCard.className = "fp-markdown-doc-card";
+    docCard.style.cssText = `
+      width: 860px;
+      min-height: 600px;
+      padding: 40px 48px;
       box-sizing: border-box;
       line-height: 1.6;
       font-size: 15px;
       color: var(--fp-text, #24292f);
       background: var(--fp-bg, #ffffff);
+      border-radius: 6px;
+      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+      transform-origin: top center;
+      transition: transform 0.15s ease;
+      flex-shrink: 0;
     `;
-    wrapper.innerHTML = `
+    docCard.innerHTML = `
       <style>
-        .fp-markdown-wrapper h1, .fp-markdown-wrapper h2, .fp-markdown-wrapper h3,
-        .fp-markdown-wrapper h4, .fp-markdown-wrapper h5, .fp-markdown-wrapper h6 {
+        .fp-markdown-doc-card h1, .fp-markdown-doc-card h2, .fp-markdown-doc-card h3,
+        .fp-markdown-doc-card h4, .fp-markdown-doc-card h5, .fp-markdown-doc-card h6 {
           margin-top: 24px;
           margin-bottom: 16px;
           font-weight: 600;
           line-height: 1.25;
           color: var(--fp-text, #1f2328);
         }
-        .fp-markdown-wrapper h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--fp-border, #d0d7de); }
-        .fp-markdown-wrapper h2 { font-size: 1.5em; padding-bottom: 0.3em; border-bottom: 1px solid var(--fp-border, #d0d7de); }
-        .fp-markdown-wrapper h3 { font-size: 1.25em; }
-        .fp-markdown-wrapper p { margin-top: 0; margin-bottom: 16px; }
-        .fp-markdown-wrapper table {
+        .fp-markdown-doc-card h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--fp-border, #d0d7de); }
+        .fp-markdown-doc-card h2 { font-size: 1.5em; padding-bottom: 0.3em; border-bottom: 1px solid var(--fp-border, #d0d7de); }
+        .fp-markdown-doc-card h3 { font-size: 1.25em; }
+        .fp-markdown-doc-card p { margin-top: 0; margin-bottom: 16px; }
+        .fp-markdown-doc-card table {
           border-spacing: 0;
           border-collapse: collapse;
           margin-top: 0;
@@ -5205,20 +5548,20 @@ var MarkdownPlugin = class {
           width: 100%;
           overflow: auto;
         }
-        .fp-markdown-wrapper table th, .fp-markdown-wrapper table td {
+        .fp-markdown-doc-card table th, .fp-markdown-doc-card table td {
           padding: 6px 13px;
           border: 1px solid var(--fp-border, #d0d7de);
         }
-        .fp-markdown-wrapper table tr:nth-child(2n) {
+        .fp-markdown-doc-card table tr:nth-child(2n) {
           background-color: var(--fp-toolbar-bg, #f6f8fa);
         }
-        .fp-markdown-wrapper blockquote {
+        .fp-markdown-doc-card blockquote {
           margin: 0 0 16px 0;
           padding: 0 1em;
           color: var(--fp-text-muted, #59636e);
           border-left: 0.25em solid var(--fp-border, #d0d7de);
         }
-        .fp-markdown-wrapper pre {
+        .fp-markdown-doc-card pre {
           padding: 16px;
           overflow: auto;
           font-size: 85%;
@@ -5227,7 +5570,7 @@ var MarkdownPlugin = class {
           border-radius: 6px;
           border: 1px solid var(--fp-border, #d0d7de);
         }
-        .fp-markdown-wrapper code {
+        .fp-markdown-doc-card code {
           padding: 0.2em 0.4em;
           margin: 0;
           font-size: 85%;
@@ -5235,16 +5578,16 @@ var MarkdownPlugin = class {
           border-radius: 4px;
           font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
         }
-        .fp-markdown-wrapper pre code {
+        .fp-markdown-doc-card pre code {
           padding: 0;
           background: transparent;
         }
-        .fp-markdown-wrapper ul, .fp-markdown-wrapper ol {
+        .fp-markdown-doc-card ul, .fp-markdown-doc-card ol {
           padding-left: 2em;
           margin-top: 0;
           margin-bottom: 16px;
         }
-        .fp-markdown-wrapper hr {
+        .fp-markdown-doc-card hr {
           height: 0.25em;
           padding: 0;
           margin: 24px 0;
@@ -5252,46 +5595,95 @@ var MarkdownPlugin = class {
           border: 0;
         }
       </style>
-      <div class="fp-markdown-content" style="max-width: 860px; margin: 0 auto;">
+      <div class="fp-markdown-body">
         ${cleanHtml}
       </div>
     `;
-    wrapper.querySelectorAll("pre code").forEach((block) => {
+    docCard.querySelectorAll("pre code").forEach((block) => {
       hljs__default.default.highlightElement(block);
     });
+    sizer.appendChild(docCard);
+    scrollWrapper.appendChild(sizer);
     ctx.container.innerHTML = "";
     ctx.container.style.overflow = "auto";
-    ctx.container.appendChild(wrapper);
-    let fontSize = 15;
+    ctx.container.style.backgroundColor = "#f1f5f9";
+    ctx.container.appendChild(scrollWrapper);
+    let scale = 1;
+    let isUserZoomed = false;
+    const calculateFitScale = () => {
+      const availW = Math.max(280, ctx.container.clientWidth - 48);
+      if (availW < 860) {
+        return Math.max(0.35, availW / 860);
+      }
+      return 1;
+    };
+    const applyTransform = () => {
+      const baseW = 860;
+      const baseH = docCard.offsetHeight || 600;
+      const scaledW = Math.round(baseW * scale);
+      const scaledH = Math.round(baseH * scale);
+      sizer.style.width = `${scaledW}px`;
+      sizer.style.height = `${scaledH}px`;
+      docCard.style.width = `${baseW}px`;
+      docCard.style.transform = `scale(${scale})`;
+      docCard.style.transformOrigin = scaledW > ctx.container.clientWidth - 32 ? "top left" : "top center";
+    };
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      if (!isUserZoomed) {
+        scale = calculateFitScale();
+        applyTransform();
+      }
+    }) : null;
+    ro?.observe(ctx.container);
+    requestAnimationFrame(() => {
+      if (!isUserZoomed) {
+        scale = calculateFitScale();
+      }
+      applyTransform();
+    });
     const cleanup = () => {
-      wrapper.remove();
+      ro?.disconnect();
+      scrollWrapper.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
     return {
       destroy: cleanup,
       zoomIn: () => {
-        fontSize = Math.min(28, fontSize + 2);
-        wrapper.style.fontSize = `${fontSize}px`;
+        isUserZoomed = true;
+        scale = Math.min(3.5, scale + 0.15);
+        applyTransform();
       },
       zoomOut: () => {
-        fontSize = Math.max(10, fontSize - 2);
-        wrapper.style.fontSize = `${fontSize}px`;
+        isUserZoomed = true;
+        scale = Math.max(0.25, scale - 0.15);
+        applyTransform();
       },
-      getZoom: () => fontSize / 15,
+      getZoom: () => scale,
       setZoom: (level) => {
-        fontSize = Math.round(15 * level);
-        wrapper.style.fontSize = `${fontSize}px`;
+        isUserZoomed = true;
+        scale = level;
+        applyTransform();
       },
       fitToPage: () => {
-        fontSize = 15;
-        wrapper.style.fontSize = "15px";
+        isUserZoomed = false;
+        scale = calculateFitScale();
+        applyTransform();
+      },
+      fitToWidth: () => {
+        isUserZoomed = false;
+        scale = calculateFitScale();
+        applyTransform();
       },
       resetZoom: () => {
-        fontSize = 15;
-        wrapper.style.fontSize = "15px";
+        isUserZoomed = false;
+        scale = calculateFitScale();
         ctx.container.scrollTop = 0;
         ctx.container.scrollLeft = 0;
+        applyTransform();
+      },
+      openInSeparateWindow: () => {
+        ctx?.openInSeparateWindow?.();
       },
       download: () => {
         downloadFile(ctx.buffer, ctx.metadata.name || "document.md", "text/markdown");
@@ -5394,6 +5786,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 +5877,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 +5906,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 +5940,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 +6422,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 +6918,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 +6933,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;
@@ -6553,14 +6999,6 @@ var HtmlPreviewPlugin = class {
         group: "zoom",
         execute: () => instance.zoomIn?.()
       },
-      {
-        id: "fit-page",
-        icon: "fit-page",
-        label: "Fit to Page",
-        type: "button",
-        group: "zoom",
-        execute: () => instance.fitToPage?.()
-      },
       {
         id: "reset-zoom",
         icon: "reset-zoom",
@@ -6569,6 +7007,22 @@ 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: "fit-page",
+        icon: "fit-page",
+        label: "Fit to Page",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToPage?.()
+      },
       {
         id: "copy",
         icon: "copy",
@@ -6592,6 +7046,14 @@ var HtmlPreviewPlugin = class {
         type: "button",
         group: "actions",
         execute: () => instance.print?.()
+      },
+      {
+        id: "open-window",
+        icon: "open-window",
+        label: "Open in Separate Full Window",
+        type: "button",
+        group: "actions",
+        execute: () => instance.openInSeparateWindow?.()
       }
     ];
   }
@@ -6602,27 +7064,39 @@ var HtmlPreviewPlugin = class {
       ADD_TAGS: ["style", "link"],
       ADD_ATTR: ["target", "rel"]
     });
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-html-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 = "flex-start";
+    scrollWrapper.style.alignItems = "flex-start";
+    scrollWrapper.style.boxSizing = "border-box";
     const sizer = document.createElement("div");
     sizer.className = "fp-html-sizer";
     sizer.style.position = "relative";
+    sizer.style.flexShrink = "0";
     const iframe = document.createElement("iframe");
     iframe.className = "fp-html-iframe";
     iframe.style.border = "none";
     iframe.style.backgroundColor = "#ffffff";
     iframe.style.transformOrigin = "top left";
-    iframe.style.transition = "transform 0.2s ease";
+    iframe.style.transition = "transform 0.15s ease";
     iframe.sandbox.add("allow-same-origin");
     sizer.appendChild(iframe);
+    scrollWrapper.appendChild(sizer);
     ctx.container.style.overflow = "auto";
     ctx.container.style.width = "100%";
     ctx.container.style.height = "100%";
     ctx.container.innerHTML = "";
-    ctx.container.appendChild(sizer);
+    ctx.container.appendChild(scrollWrapper);
     iframe.srcdoc = sanitized;
     let scale = 1;
+    let baseW = Math.max(600, ctx.container.clientWidth || 800);
+    let baseH = Math.max(400, ctx.container.clientHeight || 600);
     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`;
@@ -6635,22 +7109,33 @@ var HtmlPreviewPlugin = class {
       iframe.style.transform = `scale(${scale})`;
       iframe.style.transformOrigin = "top left";
     };
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      if (Math.abs(scale - 1) < 0.05) {
+        baseW = Math.max(600, ctx.container.clientWidth || 800);
+        baseH = Math.max(400, ctx.container.clientHeight || 600);
+        applyTransform();
+      }
+    }) : null;
+    ro?.observe(ctx.container);
     requestAnimationFrame(() => {
+      baseW = Math.max(600, ctx.container.clientWidth || 800);
+      baseH = Math.max(400, ctx.container.clientHeight || 600);
       applyTransform();
     });
     const cleanup = () => {
-      sizer.remove();
+      ro?.disconnect();
+      scrollWrapper.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
     return {
       destroy: cleanup,
       zoomIn: () => {
-        scale += 0.1;
+        scale = Math.min(3.5, scale + 0.15);
         applyTransform();
       },
       zoomOut: () => {
-        scale = Math.max(0.2, scale - 0.1);
+        scale = Math.max(0.25, scale - 0.15);
         applyTransform();
       },
       getZoom: () => scale,
@@ -6662,14 +7147,21 @@ var HtmlPreviewPlugin = class {
         scale = 1;
         applyTransform();
       },
+      fitToWidth: () => {
+        scale = 1;
+        applyTransform();
+      },
       resetZoom: () => {
         scale = 1;
         ctx.container.scrollTop = 0;
         ctx.container.scrollLeft = 0;
         applyTransform();
       },
+      openInSeparateWindow: () => {
+        ctx?.openInSeparateWindow?.();
+      },
       copy: () => {
-        navigator.clipboard.writeText(rawHtml);
+        navigator.clipboard?.writeText(rawHtml);
       },
       download: () => {
         const blob = new Blob([ctx.buffer], { type: "text/html" });
@@ -6776,6 +7268,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 +7392,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 +7564,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 +7579,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 +7937,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 +8166,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 +8181,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 +8678,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 +8760,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 +8783,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 +8884,7 @@ var PptPlugin = class {
     };
     renderSlide(1);
     const cleanup = () => {
+      ro?.disconnect();
       for (const u of createdBlobUrls) {
         URL.revokeObjectURL(u);
       }
@@ -8349,28 +8895,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: () => {