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

package/dist/react.cjs

@@ -2118,16 +2118,22 @@ var PdfPlugin = class {
     container.className = "fp-pdf-container";
     container.style.width = "100%";
     container.style.height = "100%";
-    container.style.overflowX = "hidden";
-    container.style.overflowY = "auto";
-    container.style.display = "flex";
-    container.style.flexDirection = "column";
-    container.style.alignItems = "center";
-    container.style.justifyContent = "flex-start";
-    container.style.padding = "16px 8px";
+    container.style.overflow = "auto";
     container.style.backgroundColor = "#0f172a";
     container.style.boxSizing = "border-box";
     container.style.position = "relative";
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-pdf-scroll-wrapper";
+    scrollWrapper.style.minWidth = "100%";
+    scrollWrapper.style.minHeight = "100%";
+    scrollWrapper.style.width = "max-content";
+    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.display = "flex";
+    scrollWrapper.style.flexDirection = "column";
+    scrollWrapper.style.alignItems = "center";
+    scrollWrapper.style.justifyContent = "flex-start";
+    scrollWrapper.style.padding = "16px 8px";
+    scrollWrapper.style.boxSizing = "border-box";
     const pageCard = document.createElement("div");
     pageCard.className = "fp-pdf-page-card";
     pageCard.style.boxShadow = "0 10px 35px rgba(0, 0, 0, 0.5)";
@@ -2140,7 +2146,8 @@ var PdfPlugin = class {
     pageCard.style.transition = "box-shadow 0.2s ease";
     let canvas = document.createElement("canvas");
     pageCard.appendChild(canvas);
-    container.appendChild(pageCard);
+    scrollWrapper.appendChild(pageCard);
+    container.appendChild(scrollWrapper);
     ctx.container.appendChild(container);
     const standardFontsUrl = typeof window !== "undefined" && window.__PDF_STANDARD_FONTS_URL__ || "./standard_fonts/";
     const cmapsUrl = typeof window !== "undefined" && window.__PDF_CMAPS_URL__ || "./cmaps/";
@@ -2649,17 +2656,86 @@ var MediaPlugin = class {
       element = document.createElement("div");
       element.textContent = "Unsupported media type";
     }
-    ctx.container.style.display = "flex";
-    ctx.container.style.alignItems = "center";
-    ctx.container.style.justifyContent = "center";
-    ctx.container.style.overflow = "hidden";
-    ctx.container.appendChild(element);
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-media-scroll-wrapper";
+    scrollWrapper.style.minWidth = "100%";
+    scrollWrapper.style.minHeight = "100%";
+    scrollWrapper.style.width = "max-content";
+    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.display = "flex";
+    scrollWrapper.style.justifyContent = "center";
+    scrollWrapper.style.alignItems = "center";
+    scrollWrapper.style.padding = "16px";
+    scrollWrapper.style.boxSizing = "border-box";
+    const sizer = document.createElement("div");
+    sizer.className = "fp-media-sizer";
+    sizer.style.position = "relative";
+    sizer.style.flexShrink = "0";
+    sizer.style.display = "flex";
+    sizer.style.justifyContent = "center";
+    sizer.style.alignItems = "center";
+    sizer.appendChild(element);
+    scrollWrapper.appendChild(sizer);
+    ctx.container.style.overflow = "auto";
+    ctx.container.style.padding = "0";
+    ctx.container.innerHTML = "";
+    ctx.container.appendChild(scrollWrapper);
+    let naturalW = 800;
+    let naturalH = 600;
+    let baseW = 800;
+    let baseH = 600;
+    const updateBaseDimensions = () => {
+      if (!isImage) return;
+      const img = element;
+      naturalW = img.naturalWidth || naturalW;
+      naturalH = img.naturalHeight || naturalH;
+      const availW = Math.max(100, ctx.container.clientWidth - 48);
+      const availH = Math.max(100, ctx.container.clientHeight - 48);
+      const fitRatio = Math.min(1, availW / naturalW, availH / naturalH);
+      baseW = Math.max(1, Math.round(naturalW * fitRatio));
+      baseH = Math.max(1, Math.round(naturalH * fitRatio));
+    };
     const applyTransform = () => {
-      element.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+      if (isImage) {
+        updateBaseDimensions();
+        const isRotated90 = rotation % 180 !== 0;
+        const boxW = Math.round((isRotated90 ? baseH : baseW) * currentZoom);
+        const boxH = Math.round((isRotated90 ? baseW : baseH) * currentZoom);
+        sizer.style.width = `${boxW}px`;
+        sizer.style.height = `${boxH}px`;
+        element.style.width = `${baseW}px`;
+        element.style.height = `${baseH}px`;
+        element.style.maxWidth = "none";
+        element.style.maxHeight = "none";
+        element.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+        element.style.transformOrigin = "center center";
+        element.style.flexShrink = "0";
+      } else {
+        element.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+      }
     };
+    if (isImage) {
+      const img = element;
+      if (img.complete && img.naturalWidth > 0) {
+        updateBaseDimensions();
+        applyTransform();
+      } else {
+        img.onload = () => {
+          updateBaseDimensions();
+          applyTransform();
+        };
+      }
+    }
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      if (currentZoom === 1) {
+        applyTransform();
+      }
+    }) : null;
+    ro?.observe(ctx.container);
     const cleanup = () => {
+      ro?.disconnect();
       if (url) URL.revokeObjectURL(url);
-      element.remove();
+      scrollWrapper.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
@@ -2852,7 +2928,7 @@ var DocxPlugin = class {
   async render(ctx) {
     const wrapper = document.createElement("div");
     wrapper.className = "fp-docx-wrapper";
-    wrapper.style.transformOrigin = "top center";
+    wrapper.style.transformOrigin = "center center";
     wrapper.style.transition = "transform 0.2s ease";
     wrapper.style.padding = "0";
     wrapper.style.maxWidth = "none";
@@ -2862,11 +2938,31 @@ var DocxPlugin = class {
     wrapper.style.flexDirection = "column";
     wrapper.style.alignItems = "center";
     wrapper.style.boxSizing = "border-box";
-    ctx.container.style.overflowX = "hidden";
-    ctx.container.style.overflowY = "auto";
-    ctx.container.style.padding = "16px 8px";
+    wrapper.style.flexShrink = "0";
+    const sizer = document.createElement("div");
+    sizer.className = "fp-docx-sizer";
+    sizer.style.position = "relative";
+    sizer.style.flexShrink = "0";
+    sizer.style.display = "flex";
+    sizer.style.justifyContent = "center";
+    sizer.style.alignItems = "center";
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-docx-scroll-wrapper";
+    scrollWrapper.style.minWidth = "100%";
+    scrollWrapper.style.minHeight = "100%";
+    scrollWrapper.style.width = "max-content";
+    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.display = "flex";
+    scrollWrapper.style.justifyContent = "center";
+    scrollWrapper.style.alignItems = "flex-start";
+    scrollWrapper.style.padding = "16px 8px";
+    scrollWrapper.style.boxSizing = "border-box";
+    sizer.appendChild(wrapper);
+    scrollWrapper.appendChild(sizer);
+    ctx.container.style.overflow = "auto";
+    ctx.container.style.padding = "0";
     ctx.container.style.backgroundColor = "#f1f5f9";
-    ctx.container.appendChild(wrapper);
+    ctx.container.appendChild(scrollWrapper);
     const styleOverride = document.createElement("style");
     styleOverride.textContent = `
       .fp-docx-wrapper .docx-wrapper {
@@ -2905,8 +3001,8 @@ var DocxPlugin = class {
         renderEndnotes: true,
         useBase64URL: true
       });
-      if (!ctx.container.contains(wrapper)) {
-        ctx.container.appendChild(wrapper);
+      if (!sizer.contains(wrapper)) {
+        sizer.appendChild(wrapper);
       }
       if (wrapper.children.length > 0 && (wrapper.textContent?.trim().length ?? 0) > 0) {
         renderedSuccessfully = true;
@@ -2943,8 +3039,8 @@ var DocxPlugin = class {
       try {
         wrapper.innerHTML = "";
         this.renderXmlFallback(ctx, wrapper, createdBlobUrls);
-        if (!ctx.container.contains(wrapper)) {
-          ctx.container.appendChild(wrapper);
+        if (!sizer.contains(wrapper)) {
+          sizer.appendChild(wrapper);
         }
         renderedSuccessfully = true;
       } catch (fallbackErr) {
@@ -2959,8 +3055,8 @@ var DocxPlugin = class {
             </p>
           </div>
         `;
-        if (!ctx.container.contains(wrapper)) {
-          ctx.container.appendChild(wrapper);
+        if (!sizer.contains(wrapper)) {
+          sizer.appendChild(wrapper);
         }
       }
     }
@@ -3063,15 +3159,18 @@ var DocxPlugin = class {
       return Math.max(0.35, Math.min(3, sW));
     };
     const applyTransform = () => {
-      wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
-      wrapper.style.transformOrigin = "top center";
       const activeEl = pageElements[currentPage - 1] || wrapper.querySelector("section.docx") || wrapper;
+      const elW = activeEl.offsetWidth || 816;
       const elH = activeEl.offsetHeight || 1056;
-      if (scale > 1) {
-        wrapper.style.marginBottom = `${Math.round(elH * scale - elH + 32)}px`;
-      } else {
-        wrapper.style.marginBottom = "32px";
-      }
+      const isRotated90 = rotation % 180 !== 0;
+      const boxW = Math.round((isRotated90 ? elH : elW) * scale);
+      const boxH = Math.round((isRotated90 ? elW : elH) * scale);
+      sizer.style.width = `${boxW}px`;
+      sizer.style.height = `${boxH}px`;
+      wrapper.style.width = `${elW}px`;
+      wrapper.style.height = `${elH}px`;
+      wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+      wrapper.style.transformOrigin = "center center";
     };
     let resizeObserver = null;
     if (typeof ResizeObserver !== "undefined") {
@@ -3096,7 +3195,7 @@ var DocxPlugin = class {
       for (const url of createdBlobUrls) {
         URL.revokeObjectURL(url);
       }
-      wrapper.remove();
+      scrollWrapper.remove();
       styleOverride.remove();
       ctx.container.innerHTML = "";
     };
@@ -3643,7 +3742,7 @@ var ExcelPlugin = class {
     contentArea.style.flex = "1";
     contentArea.style.overflow = "auto";
     contentArea.style.padding = "16px";
-    contentArea.style.transformOrigin = "top left";
+    contentArea.style.boxSizing = "border-box";
     const tabsArea = document.createElement("div");
     tabsArea.className = "fp-excel-tabs";
     tabsArea.style.display = "flex";
@@ -3657,18 +3756,35 @@ var ExcelPlugin = class {
     container.appendChild(tabsArea);
     ctx.container.appendChild(container);
     let scale = 1;
+    let isUserZoomed = false;
     let currentSheetIndex = 1;
     let sheetNames = [];
     let wb = null;
     const applyTransform = () => {
-      contentArea.style.transform = `scale(${scale})`;
-      contentArea.style.transformOrigin = "top left";
+      const sizer = contentArea.querySelector(".fp-excel-sizer");
+      const table = contentArea.querySelector("table");
+      if (!sizer || !table) return;
+      if (!table._baseWidth && table.offsetWidth > 0) {
+        table._baseWidth = table.offsetWidth;
+        table._baseHeight = table.offsetHeight;
+      }
+      const baseW = table._baseWidth || table.offsetWidth || 800;
+      const baseH = table._baseHeight || table.offsetHeight || 600;
+      const scaledW = Math.round(baseW * scale);
+      const scaledH = Math.round(baseH * scale);
+      sizer.style.width = `${scaledW}px`;
+      sizer.style.height = `${scaledH}px`;
+      table.style.position = "absolute";
+      table.style.top = "0";
+      table.style.left = "0";
+      table.style.transform = `scale(${scale})`;
+      table.style.transformOrigin = "top left";
     };
     const calculateFitScale = () => {
       const table = contentArea.querySelector("table");
       if (!table) return 1;
       const availW = Math.max(280, container.clientWidth - 48);
-      const tW = table.offsetWidth || 800;
+      const tW = table._baseWidth || table.offsetWidth || 800;
       return Math.max(0.4, Math.min(1, availW / tW));
     };
     try {
@@ -3688,9 +3804,13 @@ var ExcelPlugin = class {
         contentArea.innerHTML = '<div style="padding: 24px; color: #888;">Empty sheet</div>';
         return;
       }
+      const sizer = document.createElement("div");
+      sizer.className = "fp-excel-sizer";
+      sizer.style.position = "relative";
       const html = XLSX__namespace.utils.sheet_to_html(ws, { id: "fp-sheet-table", editable: false });
-      contentArea.innerHTML = html;
-      const table = contentArea.querySelector("table");
+      sizer.innerHTML = html;
+      contentArea.appendChild(sizer);
+      const table = sizer.querySelector("table");
       if (table) {
         table.style.borderCollapse = "collapse";
         table.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
@@ -3725,13 +3845,17 @@ var ExcelPlugin = class {
       });
       ctx.emit("page-change", { page: currentSheetIndex, total: sheetNames.length });
       requestAnimationFrame(() => {
-        scale = calculateFitScale();
+        if (!isUserZoomed) {
+          scale = calculateFitScale();
+        }
         applyTransform();
       });
     };
     const ro = new ResizeObserver(() => {
-      scale = calculateFitScale();
-      applyTransform();
+      if (!isUserZoomed) {
+        scale = calculateFitScale();
+        applyTransform();
+      }
     });
     ro.observe(container);
     if (sheetNames.length > 0) {
@@ -3768,23 +3892,28 @@ var ExcelPlugin = class {
     return {
       destroy: cleanup,
       zoomIn: () => {
+        isUserZoomed = true;
         scale += 0.15;
         applyTransform();
       },
       zoomOut: () => {
+        isUserZoomed = true;
         scale = Math.max(0.2, scale - 0.15);
         applyTransform();
       },
       getZoom: () => scale,
       setZoom: (level) => {
+        isUserZoomed = true;
         scale = level;
         applyTransform();
       },
       fitToPage: () => {
+        isUserZoomed = false;
         scale = calculateFitScale();
         applyTransform();
       },
       resetZoom: () => {
+        isUserZoomed = false;
         scale = calculateFitScale();
         contentArea.scrollTop = 0;
         contentArea.scrollLeft = 0;
@@ -4016,21 +4145,41 @@ var CsvPlugin = class {
     container.appendChild(tableWrapper);
     ctx.container.appendChild(container);
     let scale = 1;
+    let isUserZoomed = false;
     const calculateFitScale = () => {
       const availW = Math.max(280, container.clientWidth - 48);
-      const tW = table.offsetWidth || 800;
+      const tW = table._baseWidth || table.offsetWidth || 800;
       return Math.max(0.4, Math.min(1, availW / tW));
     };
     const applyScale = () => {
-      tableWrapper.style.transform = `scale(${scale})`;
+      if (!table._baseWidth && table.offsetWidth > 0) {
+        table._baseWidth = table.offsetWidth;
+        table._baseHeight = table.offsetHeight;
+      }
+      const baseW = table._baseWidth || table.offsetWidth || 800;
+      const baseH = table._baseHeight || table.offsetHeight || 600;
+      const scaledW = Math.round(baseW * scale);
+      const scaledH = Math.round(baseH * scale);
+      tableWrapper.style.position = "relative";
+      tableWrapper.style.width = `${scaledW}px`;
+      tableWrapper.style.height = `${scaledH}px`;
+      table.style.position = "absolute";
+      table.style.top = "0";
+      table.style.left = "0";
+      table.style.transform = `scale(${scale})`;
+      table.style.transformOrigin = "top left";
     };
     requestAnimationFrame(() => {
-      scale = calculateFitScale();
+      if (!isUserZoomed) {
+        scale = calculateFitScale();
+      }
       applyScale();
     });
     const ro = new ResizeObserver(() => {
-      scale = calculateFitScale();
-      applyScale();
+      if (!isUserZoomed) {
+        scale = calculateFitScale();
+        applyScale();
+      }
     });
     ro.observe(container);
     const cleanup = () => {
@@ -4103,23 +4252,28 @@ var CsvPlugin = class {
         }];
       },
       zoomIn: () => {
+        isUserZoomed = true;
         scale += 0.1;
         applyScale();
       },
       zoomOut: () => {
+        isUserZoomed = true;
         scale = Math.max(0.2, scale - 0.1);
         applyScale();
       },
       getZoom: () => scale,
       setZoom: (level) => {
+        isUserZoomed = true;
         scale = level;
         applyScale();
       },
       fitToPage: () => {
+        isUserZoomed = false;
         scale = calculateFitScale();
         applyScale();
       },
       resetZoom: () => {
+        isUserZoomed = false;
         scale = calculateFitScale();
         container.scrollTop = 0;
         container.scrollLeft = 0;
@@ -4355,15 +4509,27 @@ var CodePlugin = class {
     let isUserZoomed = false;
     const pre = document.createElement("pre");
     const code = document.createElement("code");
+    const sizer = document.createElement("div");
+    const scrollWrapper = document.createElement("div");
     if (isTxt) {
-      container.style.overflowX = "hidden";
-      container.style.overflowY = "auto";
+      container.style.overflow = "auto";
       container.style.backgroundColor = "#f1f5f9";
-      container.style.padding = "16px 8px";
-      container.style.boxSizing = "border-box";
-      container.style.display = "flex";
-      container.style.flexDirection = "column";
-      container.style.alignItems = "center";
+      scrollWrapper.className = "fp-code-scroll-wrapper";
+      scrollWrapper.style.minWidth = "100%";
+      scrollWrapper.style.minHeight = "100%";
+      scrollWrapper.style.width = "max-content";
+      scrollWrapper.style.height = "max-content";
+      scrollWrapper.style.display = "flex";
+      scrollWrapper.style.justifyContent = "center";
+      scrollWrapper.style.alignItems = "flex-start";
+      scrollWrapper.style.padding = "16px 8px";
+      scrollWrapper.style.boxSizing = "border-box";
+      sizer.className = "fp-code-sizer";
+      sizer.style.position = "relative";
+      sizer.style.flexShrink = "0";
+      sizer.style.display = "flex";
+      sizer.style.justifyContent = "center";
+      sizer.style.alignItems = "center";
       pre.style.margin = "0 auto";
       pre.style.fontFamily = "Consolas, 'Courier New', monospace";
       pre.style.fontSize = "13px";
@@ -4378,8 +4544,9 @@ var CodePlugin = class {
       pre.style.boxSizing = "border-box";
       pre.style.boxShadow = "0 4px 24px rgba(0, 0, 0, 0.08)";
       pre.style.borderRadius = "4px";
-      pre.style.transformOrigin = "top center";
+      pre.style.transformOrigin = "center center";
       pre.style.transition = "transform 0.15s ease";
+      pre.style.flexShrink = "0";
     } else {
       container.style.overflow = "auto";
       container.style.backgroundColor = "#1e1e1e";
@@ -4412,7 +4579,13 @@ var CodePlugin = class {
     };
     renderCodePage(rawPages[0] || (isTxt ? "" : fullText));
     pre.appendChild(code);
-    container.appendChild(pre);
+    if (isTxt) {
+      sizer.appendChild(pre);
+      scrollWrapper.appendChild(sizer);
+      container.appendChild(scrollWrapper);
+    } else {
+      container.appendChild(pre);
+    }
     const showPage = (pageNum) => {
       currentPage = Math.max(1, Math.min(totalPages, pageNum));
       renderCodePage(rawPages[currentPage - 1] || (isTxt ? "" : fullText));
@@ -4429,10 +4602,16 @@ var CodePlugin = class {
     };
     const updateTransform = () => {
       if (isTxt) {
+        const elW = 816;
+        const baseH = pre.offsetHeight || 1056;
+        const isRotated90 = rotation % 180 !== 0;
+        const boxW = Math.round((isRotated90 ? baseH : elW) * zoomLevel);
+        const boxH = Math.round((isRotated90 ? elW : baseH) * zoomLevel);
+        sizer.style.width = `${boxW}px`;
+        sizer.style.height = `${boxH}px`;
+        pre.style.width = `${elW}px`;
         pre.style.transform = `scale(${zoomLevel}) rotate(${rotation}deg)`;
-        const scaledH = 1056 * zoomLevel;
-        const extraH = Math.max(0, scaledH - 1056);
-        pre.style.marginBottom = `${extraH + 32}px`;
+        pre.style.transformOrigin = "center center";
       } else {
         pre.style.transform = `rotate(${rotation}deg)`;
         pre.style.fontSize = `${fontSize}px`;
@@ -4638,16 +4817,56 @@ var ArchivePlugin = class {
       width: 100%;
       height: 100%;
       overflow: auto;
-      padding: 24px;
       box-sizing: border-box;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      transform-origin: top left;
-      transition: transform 0.2s ease;
     `;
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-archive-scroll-wrapper";
+    scrollWrapper.style.cssText = `
+      min-width: 100%;
+      min-height: 100%;
+      width: max-content;
+      height: max-content;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      padding: 24px;
+      box-sizing: border-box;
+    `;
+    const sizer = document.createElement("div");
+    sizer.className = "fp-archive-sizer";
+    sizer.style.cssText = `
+      position: relative;
+      flex-shrink: 0;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+    `;
+    const card = document.createElement("div");
+    card.className = "fp-archive-card";
+    card.style.cssText = `
+      width: 900px;
+      box-sizing: border-box;
+      transform-origin: top center;
+      transition: transform 0.15s ease;
+      flex-shrink: 0;
+    `;
+    sizer.appendChild(card);
+    scrollWrapper.appendChild(sizer);
+    wrapper.appendChild(scrollWrapper);
     ctx.container.innerHTML = "";
     ctx.container.style.overflow = "auto";
     ctx.container.appendChild(wrapper);
     let scale = 1;
+    const applyTransform = () => {
+      const boxW = Math.round(900 * scale);
+      const cardH = card.offsetHeight || 600;
+      const boxH = Math.round(cardH * scale);
+      sizer.style.width = `${boxW}px`;
+      sizer.style.height = `${boxH}px`;
+      card.style.transform = `scale(${scale})`;
+      card.style.transformOrigin = "top center";
+    };
     const entries = await new Promise((resolve, reject) => {
       fflate.unzip(new Uint8Array(ctx.buffer), (err, unzipped) => {
         if (err) {
@@ -4671,7 +4890,7 @@ var ArchivePlugin = class {
     });
     const totalUncompressedSize = entries.reduce((acc, e) => acc + e.size, 0);
     const renderUI = (filteredEntries) => {
-      wrapper.innerHTML = `
+      card.innerHTML = `
         <div style="max-width: 900px; margin: 0 auto; background: var(--fp-bg, #ffffff); border: 1px solid var(--fp-border, #e5e7eb); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden;">
           <div style="padding: 16px 20px; background: var(--fp-toolbar-bg, #f9fafb); border-bottom: 1px solid var(--fp-border, #e5e7eb); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;">
             <div>
@@ -4701,7 +4920,7 @@ var ArchivePlugin = class {
           </div>
         </div>
       `;
-      const tbody = wrapper.querySelector("#fp-archive-body");
+      const tbody = card.querySelector("#fp-archive-body");
       if (filteredEntries.length === 0) {
         tbody.innerHTML = `<tr><td colspan="3" style="padding: 24px; text-align: center; color: #9ca3af;">No matching files found</td></tr>`;
       } else {
@@ -4730,19 +4949,20 @@ var ArchivePlugin = class {
           }
         });
       });
-      const searchInput = wrapper.querySelector("#fp-archive-search");
+      const searchInput = card.querySelector("#fp-archive-search");
       if (searchInput) {
         searchInput.addEventListener("input", () => {
           const q = searchInput.value.toLowerCase().trim();
           const filtered = q ? entries.filter((e) => e.path.toLowerCase().includes(q)) : entries;
           renderUI(filtered);
-          const newSearch = wrapper.querySelector("#fp-archive-search");
+          const newSearch = card.querySelector("#fp-archive-search");
           if (newSearch) {
             newSearch.value = q;
             newSearch.focus();
           }
         });
       }
+      applyTransform();
     };
     renderUI(entries);
     const cleanup = () => {
@@ -4754,26 +4974,26 @@ var ArchivePlugin = class {
       destroy: cleanup,
       zoomIn: () => {
         scale += 0.1;
-        wrapper.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       zoomOut: () => {
         scale = Math.max(0.3, scale - 0.1);
-        wrapper.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       getZoom: () => scale,
       setZoom: (level) => {
         scale = level;
-        wrapper.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       fitToPage: () => {
         scale = 1;
-        wrapper.style.transform = "scale(1)";
+        applyTransform();
       },
       resetZoom: () => {
         scale = 1;
-        wrapper.style.transform = "scale(1)";
-        ctx.container.scrollTop = 0;
-        ctx.container.scrollLeft = 0;
+        wrapper.scrollTop = 0;
+        wrapper.scrollLeft = 0;
+        applyTransform();
       },
       download: () => {
         downloadFile(ctx.buffer, ctx.metadata.name || "archive.zip", "application/zip");
@@ -5132,12 +5352,30 @@ var PptxPlugin = class {
       width: 100%;
       height: 100%;
       overflow: auto;
+      box-sizing: border-box;
+      background: var(--fp-bg-canvas, #525659);
+    `;
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-pptx-scroll-wrapper";
+    scrollWrapper.style.cssText = `
+      min-width: 100%;
+      min-height: 100%;
+      width: max-content;
+      height: max-content;
       display: flex;
       justify-content: center;
-      align-items: flex-start;
+      align-items: center;
       padding: 24px;
       box-sizing: border-box;
-      background: var(--fp-bg-canvas, #525659);
+    `;
+    const sizer = document.createElement("div");
+    sizer.className = "fp-pptx-sizer";
+    sizer.style.cssText = `
+      position: relative;
+      flex-shrink: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     `;
     const slideContainer = document.createElement("div");
     slideContainer.className = "fp-slide-container";
@@ -5146,14 +5384,15 @@ var PptxPlugin = class {
       border-radius: 4px;
       overflow: hidden;
       background: #ffffff;
-      transform-origin: top center;
+      transform-origin: center center;
       transition: transform 0.2s ease;
-      max-width: calc(100% - 32px);
-      max-height: calc(100% - 48px);
+      flex-shrink: 0;
     `;
     const canvas = document.createElement("canvas");
     slideContainer.appendChild(canvas);
-    wrapper.appendChild(slideContainer);
+    sizer.appendChild(slideContainer);
+    scrollWrapper.appendChild(sizer);
+    wrapper.appendChild(scrollWrapper);
     ctx.container.innerHTML = "";
     ctx.container.style.overflow = "auto";
     ctx.container.appendChild(wrapper);
@@ -5165,7 +5404,17 @@ var PptxPlugin = class {
       return Math.min(1, Math.min(availW / cW, availH / cH));
     };
     const applyTransform = () => {
+      const cW = canvas.offsetWidth || 1280;
+      const cH = canvas.offsetHeight || 720;
+      const isRotated90 = rotation % 180 !== 0;
+      const boxW = Math.round((isRotated90 ? cH : cW) * scale);
+      const boxH = Math.round((isRotated90 ? cW : cH) * scale);
+      sizer.style.width = `${boxW}px`;
+      sizer.style.height = `${boxH}px`;
+      slideContainer.style.width = `${cW}px`;
+      slideContainer.style.height = `${cH}px`;
       slideContainer.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+      slideContainer.style.transformOrigin = "center center";
     };
     const renderCurrentSlide = async () => {
       try {
@@ -5771,13 +6020,33 @@ var RtfPlugin = class {
     wrapper.style.flexDirection = "column";
     wrapper.style.alignItems = "center";
     wrapper.style.backgroundColor = "transparent";
-    wrapper.style.transformOrigin = "top center";
+    wrapper.style.transformOrigin = "center center";
     wrapper.style.transition = "transform 0.15s ease";
-    ctx.container.style.overflowX = "hidden";
-    ctx.container.style.overflowY = "auto";
-    ctx.container.style.padding = "16px 8px";
+    wrapper.style.flexShrink = "0";
+    const sizer = document.createElement("div");
+    sizer.className = "fp-rtf-sizer";
+    sizer.style.position = "relative";
+    sizer.style.flexShrink = "0";
+    sizer.style.display = "flex";
+    sizer.style.justifyContent = "center";
+    sizer.style.alignItems = "center";
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-rtf-scroll-wrapper";
+    scrollWrapper.style.minWidth = "100%";
+    scrollWrapper.style.minHeight = "100%";
+    scrollWrapper.style.width = "max-content";
+    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.display = "flex";
+    scrollWrapper.style.justifyContent = "center";
+    scrollWrapper.style.alignItems = "flex-start";
+    scrollWrapper.style.padding = "16px 8px";
+    scrollWrapper.style.boxSizing = "border-box";
+    sizer.appendChild(wrapper);
+    scrollWrapper.appendChild(sizer);
+    ctx.container.style.overflow = "auto";
+    ctx.container.style.padding = "0";
     ctx.container.style.backgroundColor = "#f1f5f9";
-    ctx.container.appendChild(wrapper);
+    ctx.container.appendChild(scrollWrapper);
     let scale = 1;
     let rotation = 0;
     let pageElements = [];
@@ -5796,12 +6065,17 @@ var RtfPlugin = class {
       return Math.max(0.4, Math.min(3, sW));
     };
     const applyTransform = () => {
-      wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
-      wrapper.style.transformOrigin = "top center";
+      const elW = pageWidth;
       const baseH = pageHeight;
-      const scaledH = baseH * scale;
-      const extraH = Math.max(0, scaledH - baseH);
-      wrapper.style.marginBottom = `${extraH + 32}px`;
+      const isRotated90 = rotation % 180 !== 0;
+      const boxW = Math.round((isRotated90 ? baseH : elW) * scale);
+      const boxH = Math.round((isRotated90 ? elW : baseH) * scale);
+      sizer.style.width = `${boxW}px`;
+      sizer.style.height = `${boxH}px`;
+      wrapper.style.width = `${elW}px`;
+      wrapper.style.height = `${baseH}px`;
+      wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+      wrapper.style.transformOrigin = "center center";
     };
     const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
       if (!isUserZoomed) {
@@ -6072,7 +6346,7 @@ var RtfPlugin = class {
     }
     const cleanup = () => {
       resizeObserver?.disconnect();
-      wrapper.remove();
+      scrollWrapper.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
@@ -6247,23 +6521,44 @@ var HtmlPreviewPlugin = class {
       ADD_TAGS: ["style", "link"],
       ADD_ATTR: ["target", "rel"]
     });
+    const sizer = document.createElement("div");
+    sizer.className = "fp-html-sizer";
+    sizer.style.position = "relative";
     const iframe = document.createElement("iframe");
     iframe.className = "fp-html-iframe";
-    iframe.style.width = "100%";
-    iframe.style.height = "100%";
     iframe.style.border = "none";
     iframe.style.backgroundColor = "#ffffff";
     iframe.style.transformOrigin = "top left";
     iframe.style.transition = "transform 0.2s ease";
     iframe.sandbox.add("allow-same-origin");
+    sizer.appendChild(iframe);
     ctx.container.style.overflow = "auto";
     ctx.container.style.width = "100%";
     ctx.container.style.height = "100%";
-    ctx.container.appendChild(iframe);
+    ctx.container.innerHTML = "";
+    ctx.container.appendChild(sizer);
     iframe.srcdoc = sanitized;
     let scale = 1;
+    const applyTransform = () => {
+      const baseW = Math.max(600, ctx.container.clientWidth || 800);
+      const baseH = Math.max(400, ctx.container.clientHeight || 600);
+      const scaledW = Math.round(baseW * scale);
+      const scaledH = Math.round(baseH * scale);
+      sizer.style.width = `${scaledW}px`;
+      sizer.style.height = `${scaledH}px`;
+      iframe.style.position = "absolute";
+      iframe.style.top = "0";
+      iframe.style.left = "0";
+      iframe.style.width = `${baseW}px`;
+      iframe.style.height = `${baseH}px`;
+      iframe.style.transform = `scale(${scale})`;
+      iframe.style.transformOrigin = "top left";
+    };
+    requestAnimationFrame(() => {
+      applyTransform();
+    });
     const cleanup = () => {
-      iframe.remove();
+      sizer.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
@@ -6271,26 +6566,26 @@ var HtmlPreviewPlugin = class {
       destroy: cleanup,
       zoomIn: () => {
         scale += 0.1;
-        iframe.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       zoomOut: () => {
         scale = Math.max(0.2, scale - 0.1);
-        iframe.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       getZoom: () => scale,
       setZoom: (level) => {
         scale = level;
-        iframe.style.transform = `scale(${scale})`;
+        applyTransform();
       },
       fitToPage: () => {
         scale = 1;
-        iframe.style.transform = "scale(1)";
+        applyTransform();
       },
       resetZoom: () => {
         scale = 1;
-        iframe.style.transform = "scale(1)";
         ctx.container.scrollTop = 0;
         ctx.container.scrollLeft = 0;
+        applyTransform();
       },
       copy: () => {
         navigator.clipboard.writeText(rawHtml);
@@ -6465,10 +6760,26 @@ var OpenDocumentPlugin = class {
     container.className = "fp-odf-container";
     container.style.width = "100%";
     container.style.height = "100%";
-    container.style.overflowX = "hidden";
-    container.style.overflowY = "auto";
-    container.style.padding = "16px 8px";
+    container.style.overflow = "auto";
     container.style.backgroundColor = "#f1f5f9";
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-odf-scroll-wrapper";
+    scrollWrapper.style.minWidth = "100%";
+    scrollWrapper.style.minHeight = "100%";
+    scrollWrapper.style.width = "max-content";
+    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.display = "flex";
+    scrollWrapper.style.justifyContent = "center";
+    scrollWrapper.style.alignItems = "flex-start";
+    scrollWrapper.style.padding = "16px 8px";
+    scrollWrapper.style.boxSizing = "border-box";
+    const sizer = document.createElement("div");
+    sizer.className = "fp-odf-sizer";
+    sizer.style.position = "relative";
+    sizer.style.flexShrink = "0";
+    sizer.style.display = "flex";
+    sizer.style.justifyContent = "center";
+    sizer.style.alignItems = "center";
     const wrapper = document.createElement("div");
     wrapper.className = "fp-odf-wrapper";
     wrapper.style.margin = "0 auto";
@@ -6477,9 +6788,12 @@ var OpenDocumentPlugin = class {
     wrapper.style.backgroundColor = "#ffffff";
     wrapper.style.boxShadow = "0 2px 10px rgba(0,0,0,0.08)";
     wrapper.style.borderRadius = "4px";
-    wrapper.style.transformOrigin = "top center";
+    wrapper.style.transformOrigin = "center center";
     wrapper.style.transition = "transform 0.15s ease";
-    container.appendChild(wrapper);
+    wrapper.style.flexShrink = "0";
+    sizer.appendChild(wrapper);
+    scrollWrapper.appendChild(sizer);
+    container.appendChild(scrollWrapper);
     ctx.container.appendChild(container);
     let scale = 1;
     let rotation = 0;
@@ -6505,13 +6819,18 @@ var OpenDocumentPlugin = class {
       return Math.max(0.4, Math.min(3, sW));
     };
     const applyTransform = () => {
-      wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
-      wrapper.style.transformOrigin = "top center";
       const activeSlide = slides[currentPage - 1];
+      const elW = isPresentation ? 960 : 816;
       const baseH = activeSlide?.offsetHeight || wrapper.offsetHeight || 1056;
-      const scaledH = baseH * scale;
-      const extraH = Math.max(0, scaledH - baseH);
-      wrapper.style.marginBottom = `${extraH + 32}px`;
+      const isRotated90 = rotation % 180 !== 0;
+      const boxW = Math.round((isRotated90 ? baseH : elW) * scale);
+      const boxH = Math.round((isRotated90 ? elW : baseH) * scale);
+      sizer.style.width = `${boxW}px`;
+      sizer.style.height = `${boxH}px`;
+      wrapper.style.width = `${elW}px`;
+      wrapper.style.height = `${baseH}px`;
+      wrapper.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+      wrapper.style.transformOrigin = "center center";
     };
     const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
       if (!isUserZoomed) {
@@ -7075,13 +7394,28 @@ var DocPlugin = class {
     container.className = "fp-doc-container";
     container.style.width = "100%";
     container.style.height = "100%";
-    container.style.overflowX = "hidden";
-    container.style.overflowY = "auto";
-    container.style.padding = "16px 8px";
+    container.style.overflow = "auto";
     container.style.backgroundColor = "#f1f5f9";
-    container.style.display = "flex";
-    container.style.justifyContent = "center";
-    container.style.alignItems = "flex-start";
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-doc-scroll-wrapper";
+    scrollWrapper.style.minWidth = "100%";
+    scrollWrapper.style.minHeight = "100%";
+    scrollWrapper.style.width = "max-content";
+    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.display = "flex";
+    scrollWrapper.style.justifyContent = "center";
+    scrollWrapper.style.alignItems = "flex-start";
+    scrollWrapper.style.padding = "16px 8px";
+    scrollWrapper.style.boxSizing = "border-box";
+    const sizer = document.createElement("div");
+    sizer.className = "fp-doc-sizer";
+    sizer.style.position = "relative";
+    sizer.style.flexShrink = "0";
+    sizer.style.display = "flex";
+    sizer.style.justifyContent = "center";
+    sizer.style.alignItems = "center";
+    scrollWrapper.appendChild(sizer);
+    container.appendChild(scrollWrapper);
     ctx.container.appendChild(container);
     let scale = 1;
     let extractedRawText = "";
@@ -7129,10 +7463,11 @@ var DocPlugin = class {
       pageCard.style.padding = "72px 56px";
       pageCard.style.boxSizing = "border-box";
       pageCard.style.display = i === 0 ? "block" : "none";
-      pageCard.style.transformOrigin = "top center";
+      pageCard.style.transformOrigin = "center center";
       pageCard.style.transition = "transform 0.15s ease";
       pageCard.style.fontFamily = 'Calibri, "Segoe UI", Arial, sans-serif';
       pageCard.style.color = "#1e293b";
+      pageCard.style.flexShrink = "0";
       if (isFallback && i === 0) {
         pageCard.innerHTML = `
           <div style="border-bottom: 1px solid #e2e8f0; padding-bottom: 12px; margin-bottom: 24px;">
@@ -7144,18 +7479,23 @@ var DocPlugin = class {
       } else {
         pageCard.innerHTML = this.formatDocToHtml(rawPages[i], ctx.metadata.name || "Document");
       }
-      container.appendChild(pageCard);
+      sizer.appendChild(pageCard);
       pageCards.push(pageCard);
     }
     let rotation = 0;
     const applyTransform = () => {
       const activeCard = pageCards[currentPage - 1];
       if (activeCard) {
-        activeCard.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+        const baseW = 816;
         const baseH = activeCard.offsetHeight || 1056;
-        const scaledH = baseH * scale;
-        const extraH = Math.max(0, scaledH - baseH);
-        activeCard.style.marginBottom = `${extraH + 32}px`;
+        const isRotated90 = rotation % 180 !== 0;
+        const boxW = Math.round((isRotated90 ? baseH : baseW) * scale);
+        const boxH = Math.round((isRotated90 ? baseW : baseH) * scale);
+        sizer.style.width = `${boxW}px`;
+        sizer.style.height = `${boxH}px`;
+        activeCard.style.width = `${baseW}px`;
+        activeCard.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+        activeCard.style.transformOrigin = "center center";
       }
     };
     const showPage = (pageNum) => {
@@ -7163,11 +7503,11 @@ var DocPlugin = class {
       pageCards.forEach((card, idx) => {
         if (idx + 1 === currentPage) {
           card.style.display = "block";
-          card.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
         } else {
           card.style.display = "none";
         }
       });
+      applyTransform();
       container.scrollTop = 0;
       ctx.emit("page-change", { page: currentPage, total: totalPages });
     };
@@ -7238,6 +7578,8 @@ var DocPlugin = class {
         fitMode = "width";
         scale = calculateFitScale("width");
         rotation = 0;
+        container.scrollTop = 0;
+        container.scrollLeft = 0;
         ctx.container.scrollTop = 0;
         ctx.container.scrollLeft = 0;
         applyTransform();
@@ -7762,17 +8104,30 @@ var PptPlugin = class {
     container.style.width = "100%";
     container.style.height = "100%";
     container.style.overflow = "auto";
-    container.style.display = "flex";
-    container.style.justifyContent = "center";
-    container.style.alignItems = "center";
-    container.style.padding = "32px 16px";
     container.style.backgroundColor = "#0f172a";
     container.style.boxSizing = "border-box";
+    const scrollWrapper = document.createElement("div");
+    scrollWrapper.className = "fp-ppt-scroll-wrapper";
+    scrollWrapper.style.minWidth = "100%";
+    scrollWrapper.style.minHeight = "100%";
+    scrollWrapper.style.width = "max-content";
+    scrollWrapper.style.height = "max-content";
+    scrollWrapper.style.display = "flex";
+    scrollWrapper.style.justifyContent = "center";
+    scrollWrapper.style.alignItems = "center";
+    scrollWrapper.style.padding = "32px 16px";
+    scrollWrapper.style.boxSizing = "border-box";
+    const sizer = document.createElement("div");
+    sizer.className = "fp-ppt-sizer";
+    sizer.style.position = "relative";
+    sizer.style.flexShrink = "0";
+    sizer.style.display = "flex";
+    sizer.style.justifyContent = "center";
+    sizer.style.alignItems = "center";
     const slideCard = document.createElement("div");
     slideCard.className = "fp-ppt-slide-card";
     slideCard.style.width = "960px";
-    slideCard.style.maxWidth = "calc(100% - 32px)";
-    slideCard.style.maxHeight = "calc(100% - 48px)";
+    slideCard.style.height = "540px";
     slideCard.style.aspectRatio = "16 / 9";
     slideCard.style.backgroundColor = "#ffffff";
     slideCard.style.boxShadow = "0 12px 40px rgba(0,0,0,0.35)";
@@ -7782,7 +8137,9 @@ var PptPlugin = class {
     slideCard.style.transition = "transform 0.2s ease";
     slideCard.style.transformOrigin = "center center";
     slideCard.style.flexShrink = "0";
-    container.appendChild(slideCard);
+    sizer.appendChild(slideCard);
+    scrollWrapper.appendChild(sizer);
+    container.appendChild(scrollWrapper);
     ctx.container.appendChild(container);
     let scale = 1;
     let rotation = 0;
@@ -7795,7 +8152,17 @@ var PptPlugin = class {
       return Math.min(1, Math.min(availW / 960, availH / 540));
     };
     const applyTransform = () => {
+      const cW = 960;
+      const cH = 540;
+      const isRotated90 = rotation % 180 !== 0;
+      const boxW = Math.round((isRotated90 ? cH : cW) * scale);
+      const boxH = Math.round((isRotated90 ? cW : cH) * scale);
+      sizer.style.width = `${boxW}px`;
+      sizer.style.height = `${boxH}px`;
+      slideCard.style.width = `${cW}px`;
+      slideCard.style.height = `${cH}px`;
       slideCard.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
+      slideCard.style.transformOrigin = "center center";
     };
     setTimeout(() => {
       scale = calculateFitScale();