@files-preview-app/preview-file 1.2.5 → 1.2.6

package/dist/index.cjs

@@ -778,6 +778,8 @@ var FilePreviewViewer = class {
   keyHandler = null;
   currentContainer = null;
   currentOptions = {};
+  resizeObserver = null;
+  fullscreenHandler = null;
   /**
    * Register a preview plugin.
    */
@@ -850,12 +852,31 @@ var FilePreviewViewer = class {
             label: "Toggle Fullscreen",
             type: "button",
             group: "view",
-            execute: () => {
-              if (!document.fullscreenElement) {
-                this.wrapperEl?.requestFullscreen?.();
-              } else {
-                document.exitFullscreen?.();
+            execute: async () => {
+              try {
+                const isNativeFs = !!document.fullscreenElement;
+                const isCssFs = this.wrapperEl?.classList.contains("fp-fullscreen-active");
+                if (!isNativeFs && !isCssFs) {
+                  if (this.wrapperEl?.requestFullscreen) {
+                    await this.wrapperEl.requestFullscreen().catch(() => {
+                      this.wrapperEl?.classList.add("fp-fullscreen-active");
+                    });
+                  } else {
+                    this.wrapperEl?.classList.add("fp-fullscreen-active");
+                  }
+                } else {
+                  if (document.fullscreenElement) {
+                    await document.exitFullscreen().catch(() => {
+                    });
+                  }
+                  this.wrapperEl?.classList.remove("fp-fullscreen-active");
+                }
+              } catch {
+                this.wrapperEl?.classList.toggle("fp-fullscreen-active");
               }
+              setTimeout(() => {
+                this.activeInstance?.fitToPage?.();
+              }, 120);
             }
           });
         }
@@ -905,6 +926,15 @@ var FilePreviewViewer = class {
       window.removeEventListener("keydown", this.keyHandler);
       this.keyHandler = null;
     }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    if (this.fullscreenHandler) {
+      document.removeEventListener("fullscreenchange", this.fullscreenHandler);
+      document.removeEventListener("webkitfullscreenchange", this.fullscreenHandler);
+      this.fullscreenHandler = null;
+    }
     this.abort();
     this.destroyInstance();
     this.toolbar?.destroy();
@@ -984,6 +1014,25 @@ var FilePreviewViewer = class {
     this.thumbnailPanel = new ThumbnailPanel(thumbnailEl);
     this.setupKeyboardShortcuts();
     this.setupDragAndDrop(container, options);
+    this.setupResizeAndFullscreenListeners();
+  }
+  setupResizeAndFullscreenListeners() {
+    if (this.fullscreenHandler) return;
+    this.fullscreenHandler = () => {
+      setTimeout(() => {
+        this.activeInstance?.fitToPage?.();
+      }, 100);
+    };
+    document.addEventListener("fullscreenchange", this.fullscreenHandler);
+    document.addEventListener("webkitfullscreenchange", this.fullscreenHandler);
+    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.resizeObserver.observe(this.contentEl);
+    }
   }
   setupKeyboardShortcuts() {
     if (this.keyHandler) return;
@@ -1375,7 +1424,8 @@ var PdfPlugin = class {
     container.style.display = "flex";
     container.style.flexDirection = "column";
     container.style.alignItems = "center";
-    container.style.padding = "24px 16px";
+    container.style.justifyContent = "flex-start";
+    container.style.padding = "20px 16px";
     container.style.backgroundColor = "#0f172a";
     container.style.boxSizing = "border-box";
     container.style.position = "relative";
@@ -1388,7 +1438,8 @@ var PdfPlugin = class {
     pageCard.style.lineHeight = "0";
     pageCard.style.transition = "transform 0.15s ease";
     pageCard.style.position = "relative";
-    const canvas = document.createElement("canvas");
+    pageCard.style.flexShrink = "0";
+    let canvas = document.createElement("canvas");
     pageCard.appendChild(canvas);
     container.appendChild(pageCard);
     const indicator = document.createElement("div");
@@ -1430,14 +1481,22 @@ var PdfPlugin = class {
         }
         currentRenderTask = null;
       }
+      const newCanvas = document.createElement("canvas");
+      pageCard.replaceChild(newCanvas, canvas);
+      canvas = newCanvas;
       currentPage = Math.max(1, Math.min(totalPages, pageNum));
       indicator.textContent = `Page ${currentPage} of ${totalPages}`;
       ctx.emit("page-change", { page: currentPage, total: totalPages });
       const page = await pdfDoc.getPage(currentPage);
       const containerWidth = container.clientWidth || 900;
+      const containerHeight = container.clientHeight || 700;
       const unscaledVp = page.getViewport({ scale: 1, rotation });
-      const baseScale = Math.min((containerWidth - 64) / unscaledVp.width, 1.6);
-      const effectiveScale = (baseScale > 0 ? baseScale : 1) * zoomScale;
+      const availWidth = Math.max(100, containerWidth - 48);
+      const availHeight = Math.max(100, containerHeight - 88);
+      const scaleW = availWidth / unscaledVp.width;
+      const scaleH = availHeight / unscaledVp.height;
+      const fitScale = Math.min(scaleW, scaleH);
+      const effectiveScale = (fitScale > 0 ? fitScale : 1) * zoomScale;
       const pixelRatio = window.devicePixelRatio || 1;
       const viewport = page.getViewport({ scale: effectiveScale, rotation });
       canvas.width = Math.floor(viewport.width * pixelRatio);
@@ -1494,6 +1553,7 @@ var PdfPlugin = class {
       },
       fitToPage: () => {
         zoomScale = 1;
+        rotation = 0;
         renderPage(currentPage);
       },
       rotateCW: () => {
@@ -1944,6 +2004,14 @@ var DocxPlugin = class {
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "rotate-cw",
+        icon: "rotate-cw",
+        label: "Rotate",
+        type: "button",
+        group: "view",
+        execute: () => instance.rotateCW?.()
+      },
       {
         id: "download",
         icon: "download",
@@ -2080,6 +2148,26 @@ var DocxPlugin = class {
     if (totalPages > 1) {
       showPage(1);
     }
+    scale = 1;
+    let rotation = 0;
+    const calculateFitScale = () => {
+      const activeEl = pageElements[currentPage - 1] || wrapper.firstElementChild || wrapper;
+      const elW = activeEl.offsetWidth || 816;
+      const elH = activeEl.offsetHeight || 1056;
+      const availW = Math.max(200, ctx.container.clientWidth - 48);
+      const availH = Math.max(200, ctx.container.clientHeight - 80);
+      const sW = availW / elW;
+      const sH = availH / elH;
+      return Math.min(1.1, Math.min(sW, sH));
+    };
+    const applyTransform = () => {
+      wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+      wrapper.style.transformOrigin = "top center";
+    };
+    setTimeout(() => {
+      scale = calculateFitScale();
+      applyTransform();
+    }, 60);
     const cleanup = () => {
       indicator?.remove();
       for (const url of createdBlobUrls) {
@@ -2098,21 +2186,30 @@ var DocxPlugin = class {
         showPage(page);
       },
       zoomIn: () => {
-        scale += 0.1;
-        wrapper.style.transform = `scale(${scale})`;
+        scale += 0.15;
+        applyTransform();
       },
       zoomOut: () => {
-        scale = Math.max(0.2, scale - 0.1);
-        wrapper.style.transform = `scale(${scale})`;
+        scale = Math.max(0.2, scale - 0.15);
+        applyTransform();
       },
       getZoom: () => scale,
       setZoom: (level) => {
         scale = level;
-        wrapper.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       fitToPage: () => {
-        scale = 1;
-        wrapper.style.transform = "scale(1)";
+        scale = calculateFitScale();
+        rotation = 0;
+        applyTransform();
+      },
+      rotateCW: () => {
+        rotation = (rotation + 90) % 360;
+        applyTransform();
+      },
+      rotateCCW: () => {
+        rotation = (rotation - 90 + 360) % 360;
+        applyTransform();
       },
       download: () => {
         const blob = new Blob([ctx.buffer], { type: this.mimeTypes[0] });
@@ -2406,6 +2503,26 @@ var ExcelPlugin = class {
           instance.zoomIn?.();
         }
       },
+      {
+        id: "fit-page",
+        icon: "fit-page",
+        label: "Fit to View",
+        type: "button",
+        group: "zoom",
+        execute: () => {
+          instance.fitToPage?.();
+        }
+      },
+      {
+        id: "rotate-cw",
+        icon: "rotate-cw",
+        label: "Rotate",
+        type: "button",
+        group: "view",
+        execute: () => {
+          instance.rotateCW?.();
+        }
+      },
       {
         id: "download",
         icon: "download",
@@ -2456,9 +2573,23 @@ var ExcelPlugin = class {
     container.appendChild(tabsArea);
     ctx.container.appendChild(container);
     let scale = 1;
+    let rotation = 0;
     let currentSheetIndex = 1;
     let sheetNames = [];
     let wb = null;
+    const applyTransform = () => {
+      contentArea.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+      contentArea.style.transformOrigin = "top left";
+    };
+    const calculateFitScale = () => {
+      const table = contentArea.querySelector("table");
+      if (!table) return 1;
+      const availW = Math.max(200, container.clientWidth - 48);
+      const availH = Math.max(200, container.clientHeight - 80);
+      const tW = table.offsetWidth || 800;
+      const tH = table.offsetHeight || 600;
+      return Math.min(1, Math.min(availW / tW, availH / tH));
+    };
     try {
       wb = XLSX__namespace.read(new Uint8Array(ctx.buffer), { type: "array", cellDates: true });
       sheetNames = wb.SheetNames || [];
@@ -2546,17 +2677,30 @@ var ExcelPlugin = class {
     return {
       destroy: cleanup,
       zoomIn: () => {
-        scale += 0.1;
-        contentArea.style.transform = `scale(${scale})`;
+        scale += 0.15;
+        applyTransform();
       },
       zoomOut: () => {
-        scale = Math.max(0.2, scale - 0.1);
-        contentArea.style.transform = `scale(${scale})`;
+        scale = Math.max(0.2, scale - 0.15);
+        applyTransform();
       },
       getZoom: () => scale,
       setZoom: (level) => {
         scale = level;
-        contentArea.style.transform = `scale(${scale})`;
+        applyTransform();
+      },
+      fitToPage: () => {
+        scale = calculateFitScale();
+        rotation = 0;
+        applyTransform();
+      },
+      rotateCW: () => {
+        rotation = (rotation + 90) % 360;
+        applyTransform();
+      },
+      rotateCCW: () => {
+        rotation = (rotation - 90 + 360) % 360;
+        applyTransform();
       },
       goToPage: (page) => {
         if (page > 0 && page <= sheetNames.length) {
@@ -2806,6 +2950,26 @@ var CodePlugin = class {
           instance.zoomIn?.();
         }
       },
+      {
+        id: "fit-page",
+        icon: "fit-page",
+        label: "Fit to View",
+        type: "button",
+        group: "zoom",
+        execute: () => {
+          instance.fitToPage?.();
+        }
+      },
+      {
+        id: "rotate-cw",
+        icon: "rotate-cw",
+        label: "Rotate",
+        type: "button",
+        group: "view",
+        execute: () => {
+          instance.rotateCW?.();
+        }
+      },
       {
         id: "copy",
         icon: "copy",
@@ -2855,6 +3019,7 @@ var CodePlugin = class {
     container.style.padding = "16px";
     container.style.boxSizing = "border-box";
     let fontSize = 13;
+    let rotation = 0;
     const pre = document.createElement("pre");
     pre.style.margin = "0";
     pre.style.fontFamily = "Consolas, Menlo, Monaco, monospace";
@@ -2937,6 +3102,22 @@ var CodePlugin = class {
         fontSize = Math.round(13 * level);
         pre.style.fontSize = `${fontSize}px`;
       },
+      fitToPage: () => {
+        fontSize = 13;
+        rotation = 0;
+        pre.style.fontSize = "13px";
+        pre.style.transform = "none";
+      },
+      rotateCW: () => {
+        rotation = (rotation + 90) % 360;
+        pre.style.transform = `rotate(${rotation}deg)`;
+        pre.style.transformOrigin = "top left";
+      },
+      rotateCCW: () => {
+        rotation = (rotation - 90 + 360) % 360;
+        pre.style.transform = `rotate(${rotation}deg)`;
+        pre.style.transformOrigin = "top left";
+      },
       download: () => {
         const mimeType = ctx.metadata.mimeType || "text/plain";
         const blob = new Blob([ctx.buffer], { type: mimeType });
@@ -3448,6 +3629,14 @@ var PptxPlugin = class {
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "rotate-cw",
+        icon: "rotate-cw",
+        label: "Rotate",
+        type: "button",
+        group: "view",
+        execute: () => instance.rotateCW?.()
+      },
       {
         id: "download",
         icon: "download",
@@ -3472,6 +3661,7 @@ var PptxPlugin = class {
     const slideCount = renderer.slidePaths?.length || 1;
     let currentSlide = 1;
     let scale = 1;
+    let rotation = 0;
     const wrapper = document.createElement("div");
     wrapper.className = "fp-pptx-wrapper";
     wrapper.style.cssText = `
@@ -3494,6 +3684,8 @@ var PptxPlugin = class {
       background: #ffffff;
       transform-origin: top center;
       transition: transform 0.2s ease;
+      max-width: calc(100% - 32px);
+      max-height: calc(100% - 48px);
     `;
     const canvas = document.createElement("canvas");
     slideContainer.appendChild(canvas);
@@ -3501,10 +3693,22 @@ 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);
+      const cW = canvas.offsetWidth || 1280;
+      const cH = canvas.offsetHeight || 720;
+      return Math.min(1, Math.min(availW / cW, availH / cH));
+    };
+    const applyTransform = () => {
+      slideContainer.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+    };
     const renderCurrentSlide = async () => {
       try {
         await renderer.renderSlide(currentSlide - 1, canvas, 1280);
         ctx.emit("page-change", { page: currentSlide, totalPages: slideCount });
+        scale = calculateFitScale();
+        applyTransform();
       } catch (err) {
         console.error("[PptxPlugin] Failed to render slide:", err);
       }
@@ -3527,21 +3731,30 @@ var PptxPlugin = class {
       getPageCount: () => slideCount,
       getCurrentPage: () => currentSlide,
       zoomIn: () => {
-        scale += 0.1;
-        slideContainer.style.transform = `scale(${scale})`;
+        scale += 0.15;
+        applyTransform();
       },
       zoomOut: () => {
-        scale = Math.max(0.2, scale - 0.1);
-        slideContainer.style.transform = `scale(${scale})`;
+        scale = Math.max(0.2, scale - 0.15);
+        applyTransform();
       },
       getZoom: () => scale,
       setZoom: (level) => {
         scale = level;
-        slideContainer.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       fitToPage: () => {
-        scale = 1;
-        slideContainer.style.transform = "scale(1)";
+        scale = calculateFitScale();
+        rotation = 0;
+        applyTransform();
+      },
+      rotateCW: () => {
+        rotation = (rotation + 90) % 360;
+        applyTransform();
+      },
+      rotateCCW: () => {
+        rotation = (rotation - 90 + 360) % 360;
+        applyTransform();
       },
       getThumbnails: () => {
         const list = [];
@@ -3822,6 +4035,14 @@ var RtfPlugin = class {
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "rotate-cw",
+        icon: "rotate-cw",
+        label: "Rotate",
+        type: "button",
+        group: "view",
+        execute: () => instance.rotateCW?.()
+      },
       {
         id: "download",
         icon: "download",
@@ -3858,7 +4079,24 @@ var RtfPlugin = class {
     ctx.container.style.backgroundColor = "#f1f5f9";
     ctx.container.appendChild(wrapper);
     let scale = 1;
+    let rotation = 0;
     let pageElements = [];
+    const calculateFitScale = () => {
+      const activeEl = pageElements[currentPage - 1] || wrapper;
+      const elW = activeEl.offsetWidth || 850;
+      const elH = activeEl.offsetHeight || 1e3;
+      const availW = Math.max(200, ctx.container.clientWidth - 48);
+      const availH = Math.max(200, ctx.container.clientHeight - 80);
+      return Math.min(1.1, Math.min(availW / elW, availH / elH));
+    };
+    const applyTransform = () => {
+      wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+      wrapper.style.transformOrigin = "top center";
+    };
+    setTimeout(() => {
+      scale = calculateFitScale();
+      applyTransform();
+    }, 60);
     try {
       if (typeof RTFJS__namespace.loggingEnabled === "function") {
         RTFJS__namespace.loggingEnabled(false);
@@ -3935,21 +4173,30 @@ var RtfPlugin = class {
       getCurrentPage: () => currentPage,
       goToPage: (page) => showPage(page),
       zoomIn: () => {
-        scale += 0.1;
-        wrapper.style.transform = `scale(${scale})`;
+        scale += 0.15;
+        applyTransform();
       },
       zoomOut: () => {
-        scale = Math.max(0.2, scale - 0.1);
-        wrapper.style.transform = `scale(${scale})`;
+        scale = Math.max(0.2, scale - 0.15);
+        applyTransform();
       },
       getZoom: () => scale,
       setZoom: (level) => {
         scale = level;
-        wrapper.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       fitToPage: () => {
-        scale = 1;
-        wrapper.style.transform = "scale(1)";
+        scale = calculateFitScale();
+        rotation = 0;
+        applyTransform();
+      },
+      rotateCW: () => {
+        rotation = (rotation + 90) % 360;
+        applyTransform();
+      },
+      rotateCCW: () => {
+        rotation = (rotation - 90 + 360) % 360;
+        applyTransform();
       },
       download: () => {
         const blob = new Blob([ctx.buffer], { type: "application/rtf" });
@@ -4177,11 +4424,19 @@ var OpenDocumentPlugin = class {
       {
         id: "fit-page",
         icon: "fit-page",
-        label: "Fit to Page",
+        label: isPresentation ? "Fit to Slide" : "Fit to Page",
         type: "button",
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "rotate-cw",
+        icon: "rotate-cw",
+        label: "Rotate",
+        type: "button",
+        group: "view",
+        execute: () => instance.rotateCW?.()
+      },
       {
         id: "download",
         icon: "download",
@@ -4245,6 +4500,22 @@ var OpenDocumentPlugin = class {
     container.appendChild(wrapper);
     ctx.container.appendChild(container);
     let scale = 1;
+    let rotation = 0;
+    const calculateFitScale = () => {
+      const elW = wrapper.offsetWidth || 850;
+      const elH = wrapper.offsetHeight || (isPresentation ? 540 : 1e3);
+      const availW = Math.max(200, ctx.container.clientWidth - 48);
+      const availH = Math.max(200, ctx.container.clientHeight - 80);
+      return Math.min(1, Math.min(availW / elW, availH / elH));
+    };
+    const applyTransform = () => {
+      wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+      wrapper.style.transformOrigin = "top center";
+    };
+    setTimeout(() => {
+      scale = calculateFitScale();
+      applyTransform();
+    }, 60);
     let currentPage = 1;
     let totalPages = 1;
     let slides = [];
@@ -4303,21 +4574,30 @@ var OpenDocumentPlugin = class {
       destroy: cleanup,
       isPresentation,
       zoomIn: () => {
-        scale += 0.1;
-        wrapper.style.transform = `scale(${scale})`;
+        scale += 0.15;
+        applyTransform();
       },
       zoomOut: () => {
-        scale = Math.max(0.2, scale - 0.1);
-        wrapper.style.transform = `scale(${scale})`;
+        scale = Math.max(0.2, scale - 0.15);
+        applyTransform();
       },
       getZoom: () => scale,
       setZoom: (level) => {
         scale = level;
-        wrapper.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       fitToPage: () => {
-        scale = 1;
-        wrapper.style.transform = "scale(1)";
+        scale = calculateFitScale();
+        rotation = 0;
+        applyTransform();
+      },
+      rotateCW: () => {
+        rotation = (rotation + 90) % 360;
+        applyTransform();
+      },
+      rotateCCW: () => {
+        rotation = (rotation - 90 + 360) % 360;
+        applyTransform();
       },
       goToPage,
       getPageCount: () => totalPages,
@@ -4587,6 +4867,14 @@ var DocPlugin = class {
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "rotate-cw",
+        icon: "rotate-cw",
+        label: "Rotate",
+        type: "button",
+        group: "view",
+        execute: () => instance.rotateCW?.()
+      },
       {
         id: "copy",
         icon: "copy",
@@ -4725,6 +5013,23 @@ var DocPlugin = class {
     if (totalPages > 1) {
       showPage(1);
     }
+    let rotation = 0;
+    const calculateFitScale = () => {
+      const activeCard = pageCards[currentPage - 1] || wrapper;
+      const elW = activeCard.offsetWidth || 850;
+      const elH = activeCard.offsetHeight || 1e3;
+      const availW = Math.max(200, ctx.container.clientWidth - 48);
+      const availH = Math.max(200, ctx.container.clientHeight - 80);
+      return Math.min(1.1, Math.min(availW / elW, availH / elH));
+    };
+    const applyTransform = () => {
+      wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+      wrapper.style.transformOrigin = "top center";
+    };
+    setTimeout(() => {
+      scale = calculateFitScale();
+      applyTransform();
+    }, 60);
     const cleanup = () => {
       indicator?.remove();
       container.remove();
@@ -4737,21 +5042,30 @@ var DocPlugin = class {
       getCurrentPage: () => currentPage,
       goToPage: (page) => showPage(page),
       zoomIn: () => {
-        scale += 0.1;
-        wrapper.style.transform = `scale(${scale})`;
+        scale += 0.15;
+        applyTransform();
       },
       zoomOut: () => {
-        scale = Math.max(0.2, scale - 0.1);
-        wrapper.style.transform = `scale(${scale})`;
+        scale = Math.max(0.2, scale - 0.15);
+        applyTransform();
       },
       getZoom: () => scale,
       setZoom: (level) => {
         scale = level;
-        wrapper.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       fitToPage: () => {
-        scale = 1;
-        wrapper.style.transform = "scale(1)";
+        scale = calculateFitScale();
+        rotation = 0;
+        applyTransform();
+      },
+      rotateCW: () => {
+        rotation = (rotation + 90) % 360;
+        applyTransform();
+      },
+      rotateCCW: () => {
+        rotation = (rotation - 90 + 360) % 360;
+        applyTransform();
       },
       copy: () => {
         navigator.clipboard.writeText(extractedRawText);
@@ -4991,6 +5305,14 @@ var PptPlugin = class {
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "rotate-cw",
+        icon: "rotate-cw",
+        label: "Rotate",
+        type: "button",
+        group: "view",
+        execute: () => instance.rotateCW?.()
+      },
       {
         id: "download",
         icon: "download",
@@ -5024,22 +5346,36 @@ var PptPlugin = class {
     const slideCard = document.createElement("div");
     slideCard.className = "fp-ppt-slide-card";
     slideCard.style.width = "960px";
-    slideCard.style.maxWidth = "92%";
+    slideCard.style.maxWidth = "calc(100% - 32px)";
+    slideCard.style.maxHeight = "calc(100% - 48px)";
     slideCard.style.aspectRatio = "16 / 9";
     slideCard.style.backgroundColor = "#ffffff";
     slideCard.style.boxShadow = "0 12px 40px rgba(0,0,0,0.35)";
     slideCard.style.borderRadius = "8px";
     slideCard.style.boxSizing = "border-box";
     slideCard.style.position = "relative";
-    slideCard.style.overflow = "hidden";
-    slideCard.style.transformOrigin = "center center";
     slideCard.style.transition = "transform 0.2s ease";
+    slideCard.style.transformOrigin = "center center";
+    slideCard.style.flexShrink = "0";
     container.appendChild(slideCard);
     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));
+    };
+    const applyTransform = () => {
+      slideCard.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+    };
+    setTimeout(() => {
+      scale = calculateFitScale();
+      applyTransform();
+    }, 60);
     try {
       const cfbf = new CfbfReader(ctx.buffer);
       const pptStream = cfbf.readStream("PowerPoint Document");
@@ -5140,21 +5476,30 @@ var PptPlugin = class {
     return {
       destroy: cleanup,
       zoomIn: () => {
-        scale += 0.1;
-        slideCard.style.transform = `scale(${scale})`;
+        scale += 0.15;
+        applyTransform();
       },
       zoomOut: () => {
-        scale = Math.max(0.3, scale - 0.1);
-        slideCard.style.transform = `scale(${scale})`;
+        scale = Math.max(0.2, scale - 0.15);
+        applyTransform();
       },
       getZoom: () => scale,
       setZoom: (level) => {
         scale = level;
-        slideCard.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       fitToPage: () => {
-        scale = 1;
-        slideCard.style.transform = "scale(1)";
+        scale = calculateFitScale();
+        rotation = 0;
+        applyTransform();
+      },
+      rotateCW: () => {
+        rotation = (rotation + 90) % 360;
+        applyTransform();
+      },
+      rotateCCW: () => {
+        rotation = (rotation - 90 + 360) % 360;
+        applyTransform();
       },
       goToPage: (page) => {
         if (page >= 1 && page <= totalSlides) {