@files-preview-app/preview-file 1.2.1 → 1.2.3

package/dist/react.js

@@ -1,9 +1,9 @@
 import { memo, forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
-import DOMPurify5 from 'dompurify';
+import DOMPurify2 from 'dompurify';
 import * as docx from 'docx-preview';
+import { unzipSync, strFromU8, unzip } from 'fflate';
 import * as XLSX from 'xlsx';
 import hljs from 'highlight.js';
-import { unzipSync, strFromU8, unzip } from 'fflate';
 import { marked } from 'marked';
 import { PptxRenderer } from 'pptx-browser';
 import * as THREE from 'three';
@@ -341,7 +341,7 @@ async function sourceToArrayBuffer(source, signal) {
   return { buffer, metadata };
 }
 function sanitizeSVG(svg) {
-  return DOMPurify5.sanitize(svg, {
+  return DOMPurify2.sanitize(svg, {
     USE_PROFILES: { svg: true, svgFilters: true }
   });
 }
@@ -401,6 +401,9 @@ var ICON_THUMBNAILS = `<svg width="24" height="24" viewBox="0 0 24 24" fill="non
 var ICON_CLOSE = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`;
 var ICON_FULLSCREEN = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>`;
 var ICON_COPY = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
+var ICON_FAST_FORWARD = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 19 22 12 13 5 13 19"></polygon><polygon points="2 19 11 12 2 5 2 19"></polygon></svg>`;
+var ICON_REWIND = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 19 2 12 11 5 11 19"></polygon><polygon points="22 19 13 12 22 5 22 19"></polygon></svg>`;
+var ICON_SPEED = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>`;
 var ICON_MAP = {
   "zoom-in": ICON_ZOOM_IN,
   "zoom-out": ICON_ZOOM_OUT,
@@ -417,7 +420,16 @@ var ICON_MAP = {
   "close": ICON_CLOSE,
   "copy": ICON_COPY,
   "prev": ICON_PAGE_PREV,
-  "next": ICON_PAGE_NEXT
+  "next": ICON_PAGE_NEXT,
+  "page-prev": ICON_PAGE_PREV,
+  "page-next": ICON_PAGE_NEXT,
+  "chevron-left": ICON_PAGE_PREV,
+  "chevron-right": ICON_PAGE_NEXT,
+  "fast-forward": ICON_FAST_FORWARD,
+  "forward-10": ICON_FAST_FORWARD,
+  "rewind": ICON_REWIND,
+  "replay-10": ICON_REWIND,
+  "speed": ICON_SPEED
 };
 var ToolbarController = class {
   el;
@@ -449,7 +461,9 @@ var ToolbarController = class {
       view: [],
       actions: []
     };
-    for (const action of this.actions) {
+    const hasPageNav = this.actions.some((a) => a.type === "page-nav");
+    const effectiveActions = hasPageNav ? this.actions.filter((a) => a.id !== "page-prev" && a.id !== "page-next" && a.id !== "prev" && a.id !== "next") : this.actions;
+    for (const action of effectiveActions) {
       if (groups[action.group]) {
         groups[action.group].push(action);
       }
@@ -472,13 +486,26 @@ var ToolbarController = class {
             "prev",
             ICON_PAGE_PREV,
             "Previous Page",
-            () => action.execute("prev")
+            () => {
+              const cur = parseInt(input.value, 10) || 1;
+              if (cur > 1) {
+                input.value = (cur - 1).toString();
+                action.execute("prev", cur - 1);
+              }
+            }
           );
           const nextBtn = this.createButton(
             "next",
             ICON_PAGE_NEXT,
             "Next Page",
-            () => action.execute("next")
+            () => {
+              const cur = parseInt(input.value, 10) || 1;
+              const max = action.max ?? 1;
+              if (cur < max) {
+                input.value = (cur + 1).toString();
+                action.execute("next", cur + 1);
+              }
+            }
           );
           const input = createElement("input", {
             className: "fp-toolbar-input",
@@ -488,7 +515,10 @@ var ToolbarController = class {
             max: (action.max ?? 1).toString()
           });
           input.addEventListener("change", () => {
-            action.execute("go", parseInt(input.value, 10));
+            const val = parseInt(input.value, 10);
+            if (!isNaN(val)) {
+              action.execute("go", val);
+            }
           });
           const label = createElement("span", { className: "fp-toolbar-label" }, ` / ${action.max ?? 1}`);
           groupEl.appendChild(prevBtn);
@@ -529,11 +559,11 @@ var ToolbarController = class {
       type: "button",
       "data-action-id": id
     });
-    const svg = ICON_MAP[iconHtml] || iconHtml;
-    if (svg && svg.startsWith("<svg")) {
+    const svg = ICON_MAP[iconHtml] || ICON_MAP[id] || (iconHtml && iconHtml.startsWith("<svg") ? iconHtml : null);
+    if (svg) {
       btn.innerHTML = sanitizeSVG(svg);
     } else {
-      btn.textContent = svg || title;
+      btn.textContent = title || id;
     }
     btn.addEventListener("click", onClick);
     return btn;
@@ -1276,12 +1306,12 @@ function pdfPlugin() {
 }
 
 // ../plugins/media/dist/index.js
-var IMAGE_EXTS = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg"];
-var VIDEO_EXTS = [".mp4", ".webm", ".ogg"];
-var AUDIO_EXTS = [".mp3", ".wav", ".ogg"];
+var IMAGE_EXTS = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".bmp", ".ico", ".tiff", ".tif", ".avif"];
+var VIDEO_EXTS = [".mp4", ".m4v", ".webm", ".ogv", ".ogg", ".mov", ".avi", ".mkv", ".flv", ".wmv", ".3gp", ".mpg", ".mpeg"];
+var AUDIO_EXTS = [".mp3", ".wav", ".ogg", ".flac", ".aac", ".m4a", ".wma", ".opus", ".weba"];
 var MediaPlugin = class {
   id = "media";
-  name = "Media Preview";
+  name = "Media Preview (Image, Video, Audio)";
   extensions = [...IMAGE_EXTS, ...VIDEO_EXTS, ...AUDIO_EXTS];
   mimeTypes = [
     "image/jpeg",
@@ -1289,12 +1319,29 @@ var MediaPlugin = class {
     "image/gif",
     "image/webp",
     "image/svg+xml",
+    "image/bmp",
+    "image/x-icon",
+    "image/tiff",
+    "image/avif",
     "video/mp4",
     "video/webm",
     "video/ogg",
+    "video/quicktime",
+    "video/x-msvideo",
+    "video/x-matroska",
+    "video/x-flv",
+    "video/x-ms-wmv",
+    "video/3gpp",
+    "video/mpeg",
     "audio/mpeg",
     "audio/wav",
-    "audio/ogg"
+    "audio/ogg",
+    "audio/flac",
+    "audio/aac",
+    "audio/mp4",
+    "audio/x-ms-wma",
+    "audio/opus",
+    "audio/webm"
   ];
   weight = 90;
   supports(file) {
@@ -1350,6 +1397,16 @@ var MediaPlugin = class {
     }
     if (instance.play) {
       actions.push(
+        {
+          id: "replay-10",
+          icon: "replay-10",
+          label: "Rewind 10s",
+          type: "button",
+          group: "actions",
+          execute: () => {
+            instance.rewind?.(10);
+          }
+        },
         {
           id: "play",
           icon: "play",
@@ -1369,6 +1426,26 @@ var MediaPlugin = class {
           execute: () => {
             instance.pause?.();
           }
+        },
+        {
+          id: "forward-10",
+          icon: "forward-10",
+          label: "Fast Forward 10s",
+          type: "button",
+          group: "actions",
+          execute: () => {
+            instance.fastForward?.(10);
+          }
+        },
+        {
+          id: "speed",
+          icon: "speed",
+          label: "Playback Speed",
+          type: "button",
+          group: "actions",
+          execute: () => {
+            instance.cycleSpeed?.();
+          }
         }
       );
     }
@@ -1427,8 +1504,12 @@ var MediaPlugin = class {
       const video = document.createElement("video");
       video.src = url;
       video.controls = true;
-      video.style.maxWidth = "100%";
-      video.style.maxHeight = "100%";
+      video.playsInline = true;
+      video.style.maxWidth = "90%";
+      video.style.maxHeight = "90%";
+      video.style.borderRadius = "8px";
+      video.style.boxShadow = "0 8px 30px rgba(0,0,0,0.3)";
+      video.style.backgroundColor = "#000000";
       element = video;
       mediaElement = video;
     } else if (isAudio) {
@@ -1487,6 +1568,28 @@ var MediaPlugin = class {
       play: mediaElement ? () => mediaElement?.play() : void 0,
       pause: mediaElement ? () => mediaElement?.pause() : void 0,
       isPlaying: mediaElement ? () => !mediaElement?.paused : void 0,
+      fastForward: mediaElement ? (seconds = 10) => {
+        if (mediaElement) {
+          mediaElement.currentTime = Math.min(mediaElement.duration || Infinity, mediaElement.currentTime + seconds);
+        }
+      } : void 0,
+      rewind: mediaElement ? (seconds = 10) => {
+        if (mediaElement) {
+          mediaElement.currentTime = Math.max(0, mediaElement.currentTime - seconds);
+        }
+      } : void 0,
+      cycleSpeed: mediaElement ? () => {
+        if (mediaElement) {
+          const speeds = [1, 1.25, 1.5, 2, 0.5];
+          const curIndex = speeds.indexOf(mediaElement.playbackRate);
+          const nextIndex = curIndex === -1 ? 0 : (curIndex + 1) % speeds.length;
+          mediaElement.playbackRate = speeds[nextIndex];
+        }
+      } : void 0,
+      setPlaybackRate: mediaElement ? (rate) => {
+        if (mediaElement) mediaElement.playbackRate = rate;
+      } : void 0,
+      getPlaybackRate: mediaElement ? () => mediaElement?.playbackRate ?? 1 : void 0,
       download: () => {
         const a = document.createElement("a");
         a.href = url;
@@ -1504,7 +1607,7 @@ function mediaPlugin() {
 }
 var DocxPlugin = class {
   id = "docx";
-  name = "Word Document Preview";
+  name = "Word Document Preview (.docx, .docm, .dotx, .dotm)";
   extensions = [".docx", ".docm", ".dotx", ".dotm"];
   mimeTypes = [
     "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
@@ -1526,9 +1629,7 @@ var DocxPlugin = class {
         label: "Zoom Out",
         type: "button",
         group: "zoom",
-        execute: () => {
-          instance.zoomOut?.();
-        }
+        execute: () => instance.zoomOut?.()
       },
       {
         id: "zoom-in",
@@ -1536,9 +1637,7 @@ var DocxPlugin = class {
         label: "Zoom In",
         type: "button",
         group: "zoom",
-        execute: () => {
-          instance.zoomIn?.();
-        }
+        execute: () => instance.zoomIn?.()
       },
       {
         id: "fit-page",
@@ -1546,9 +1645,7 @@ var DocxPlugin = class {
         label: "Fit to Page",
         type: "button",
         group: "zoom",
-        execute: () => {
-          instance.fitToPage?.();
-        }
+        execute: () => instance.fitToPage?.()
       },
       {
         id: "download",
@@ -1556,9 +1653,7 @@ var DocxPlugin = class {
         label: "Download",
         type: "button",
         group: "actions",
-        execute: () => {
-          instance.download?.();
-        }
+        execute: () => instance.download?.()
       },
       {
         id: "print",
@@ -1566,9 +1661,7 @@ var DocxPlugin = class {
         label: "Print",
         type: "button",
         group: "actions",
-        execute: () => {
-          instance.print?.();
-        }
+        execute: () => instance.print?.()
       }
     ];
   }
@@ -1577,27 +1670,81 @@ var DocxPlugin = class {
     wrapper.className = "fp-docx-wrapper";
     wrapper.style.transformOrigin = "top center";
     wrapper.style.transition = "transform 0.2s ease";
-    wrapper.style.padding = "16px";
+    wrapper.style.padding = "24px 16px";
+    wrapper.style.maxWidth = "950px";
+    wrapper.style.margin = "0 auto";
+    wrapper.style.boxSizing = "border-box";
     ctx.container.style.overflow = "auto";
+    ctx.container.style.backgroundColor = "#f1f5f9";
     ctx.container.appendChild(wrapper);
+    const styleOverride = document.createElement("style");
+    styleOverride.textContent = `
+      .fp-docx-wrapper .docx-wrapper {
+        background: transparent !important;
+        padding: 0 !important;
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        box-sizing: border-box !important;
+      }
+      .fp-docx-wrapper section.docx {
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
+        border-radius: 4px !important;
+        margin-bottom: 24px !important;
+        background-color: #ffffff !important;
+      }
+    `;
+    ctx.container.appendChild(styleOverride);
     let scale = 1;
+    let renderedSuccessfully = false;
+    const createdBlobUrls = [];
     try {
-      await docx.renderAsync(ctx.buffer, wrapper, ctx.container, {
+      await docx.renderAsync(ctx.buffer, wrapper, wrapper, {
         inWrapper: true,
         ignoreWidth: false,
-        ignoreHeight: false
+        ignoreHeight: false,
+        ignoreFonts: true,
+        // Avoid crashes on embedded obfuscated fonts
+        breakPages: true,
+        experimental: true
       });
-    } catch {
-      wrapper.innerHTML = `
-        <div style="text-align:center; padding: 40px; color: #666;">
-          <div style="font-size:48px; margin-bottom: 16px;">\u{1F4C4}</div>
-          <h3>${ctx.metadata.name || "Word Document"}</h3>
-          <p>DOCX render preview</p>
-        </div>
-      `;
+      if (!ctx.container.contains(wrapper)) {
+        ctx.container.appendChild(wrapper);
+      }
+      if (wrapper.children.length > 0 && (wrapper.textContent?.trim().length ?? 0) > 0) {
+        renderedSuccessfully = true;
+      }
+    } catch (err) {
+      console.warn("[DocxPlugin] docx-preview failed, triggering native fallback:", err);
+    }
+    if (!renderedSuccessfully) {
+      try {
+        wrapper.innerHTML = "";
+        this.renderXmlFallback(ctx, wrapper, createdBlobUrls);
+        if (!ctx.container.contains(wrapper)) {
+          ctx.container.appendChild(wrapper);
+        }
+        renderedSuccessfully = true;
+      } catch (fallbackErr) {
+        console.error("[DocxPlugin] Native fallback failed:", fallbackErr);
+        wrapper.innerHTML = `
+          <div style="text-align:center; padding: 48px; background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
+            <div style="font-size:48px; margin-bottom: 16px;">\u{1F4C4}</div>
+            <h3 style="margin: 0 0 8px; color: #1e293b;">${ctx.metadata.name || "Word Document"}</h3>
+            <p style="color: #64748b; margin: 0;">Could not parse document content</p>
+          </div>
+        `;
+        if (!ctx.container.contains(wrapper)) {
+          ctx.container.appendChild(wrapper);
+        }
+      }
     }
     const cleanup = () => {
+      for (const url of createdBlobUrls) {
+        URL.revokeObjectURL(url);
+      }
       wrapper.remove();
+      styleOverride.remove();
       ctx.container.innerHTML = "";
     };
     ctx.signal.addEventListener("abort", cleanup);
@@ -1618,7 +1765,7 @@ var DocxPlugin = class {
       },
       fitToPage: () => {
         scale = 1;
-        wrapper.style.transform = `scale(1)`;
+        wrapper.style.transform = "scale(1)";
       },
       download: () => {
         const blob = new Blob([ctx.buffer], { type: this.mimeTypes[0] });
@@ -1634,6 +1781,212 @@ var DocxPlugin = class {
       }
     };
   }
+  renderXmlFallback(ctx, wrapper, createdBlobUrls) {
+    const magic = new Uint8Array(ctx.buffer.slice(0, 8));
+    if (magic[0] === 208 && magic[1] === 207 && magic[2] === 17 && magic[3] === 224) {
+      this.renderBinaryDocFallback(ctx, wrapper);
+      return;
+    }
+    const unzipped = unzipSync(new Uint8Array(ctx.buffer));
+    const docKey = Object.keys(unzipped).find((k) => k.replace(/^[./\\]+/, "").toLowerCase() === "word/document.xml");
+    const docXmlEntry = docKey ? unzipped[docKey] : void 0;
+    if (!docXmlEntry) throw new Error("Missing word/document.xml in DOCX package");
+    const xmlStr = strFromU8(docXmlEntry);
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xmlStr, "application/xml");
+    const imageMap = {};
+    const relsKey = Object.keys(unzipped).find((k) => k.replace(/^[./\\]+/, "").toLowerCase() === "word/_rels/document.xml.rels");
+    if (relsKey && unzipped[relsKey]) {
+      try {
+        const relsXml = strFromU8(unzipped[relsKey]);
+        const relsDoc = parser.parseFromString(relsXml, "application/xml");
+        const relEls = Array.from(relsDoc.getElementsByTagName("Relationship"));
+        for (const rel of relEls) {
+          const rId = rel.getAttribute("Id");
+          const target = rel.getAttribute("Target");
+          if (rId && target) {
+            const cleanTarget = target.replace(/^\.\.\//, "").replace(/^\//, "");
+            const fullTargetKey = Object.keys(unzipped).find((k) => {
+              const norm = k.replace(/^[./\\]+/, "").toLowerCase();
+              return norm === ("word/" + cleanTarget).toLowerCase() || norm === cleanTarget.toLowerCase();
+            });
+            if (fullTargetKey && unzipped[fullTargetKey]) {
+              const bytes = unzipped[fullTargetKey];
+              const ext = cleanTarget.split(".").pop()?.toLowerCase() || "png";
+              const mime = ext === "jpg" || ext === "jpeg" ? "image/jpeg" : ext === "gif" ? "image/gif" : ext === "svg" ? "image/svg+xml" : "image/png";
+              const blob = new Blob([bytes], { type: mime });
+              const blobUrl = URL.createObjectURL(blob);
+              imageMap[rId] = blobUrl;
+              createdBlobUrls.push(blobUrl);
+            }
+          }
+        }
+      } catch (relsErr) {
+        console.warn("[DocxPlugin] Error parsing relationships:", relsErr);
+      }
+    }
+    const card = document.createElement("div");
+    card.className = "fp-docx-page-card";
+    card.style.backgroundColor = "#ffffff";
+    card.style.borderRadius = "6px";
+    card.style.boxShadow = "0 4px 24px rgba(0,0,0,0.08)";
+    card.style.padding = "48px 56px";
+    card.style.fontFamily = 'Calibri, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+    card.style.color = "#1e293b";
+    card.style.lineHeight = "1.6";
+    const body = doc.getElementsByTagNameNS("*", "body")[0] || doc.documentElement;
+    let html = "";
+    for (const child of Array.from(body.children)) {
+      const tag = child.localName || child.nodeName.split(":").pop();
+      if (tag === "p") {
+        const pStyle = child.getElementsByTagNameNS("*", "pStyle")[0];
+        const styleVal = pStyle?.getAttribute("w:val") || pStyle?.getAttribute("val") || "";
+        const numPr = child.getElementsByTagNameNS("*", "numPr")[0];
+        const textContent = this.extractParagraphHtml(child, imageMap);
+        if (!textContent.trim()) {
+          html += '<div style="height: 10px;"></div>';
+          continue;
+        }
+        const lowerStyle = styleVal.toLowerCase();
+        if (lowerStyle.includes("title")) {
+          html += `<h1 style="font-size: 28px; font-weight: 700; color: #1e3a8a; margin: 24px 0 12px; border-bottom: 2px solid #e2e8f0; padding-bottom: 8px;">${textContent}</h1>`;
+        } else if (lowerStyle.includes("heading1") || styleVal === "1") {
+          html += `<h2 style="font-size: 22px; font-weight: 700; color: #1e40af; margin: 20px 0 10px;">${textContent}</h2>`;
+        } else if (lowerStyle.includes("heading2") || styleVal === "2") {
+          html += `<h3 style="font-size: 18px; font-weight: 600; color: #2563eb; margin: 16px 0 8px;">${textContent}</h3>`;
+        } else if (lowerStyle.includes("heading3") || styleVal === "3") {
+          html += `<h4 style="font-size: 15px; font-weight: 600; color: #334155; margin: 12px 0 6px;">${textContent}</h4>`;
+        } else if (numPr) {
+          html += `<div style="display: flex; gap: 8px; margin: 4px 0 4px 20px;"><span style="color: #2563eb; font-weight: bold;">\u2022</span><span>${textContent}</span></div>`;
+        } else {
+          html += `<p style="margin: 8px 0; font-size: 14px;">${textContent}</p>`;
+        }
+      } else if (tag === "tbl") {
+        html += '<table style="width: 100%; border-collapse: collapse; margin: 20px 0; border: 1px solid #cbd5e1;">';
+        const rows = Array.from(child.getElementsByTagNameNS("*", "tr"));
+        rows.forEach((tr, rIdx) => {
+          html += `<tr style="${rIdx === 0 ? "background-color: #f8fafc; font-weight: 600;" : ""}">`;
+          const cells = Array.from(tr.getElementsByTagNameNS("*", "tc"));
+          cells.forEach((tc) => {
+            const cellText = this.extractParagraphHtml(tc, imageMap);
+            html += `<td style="border: 1px solid #cbd5e1; padding: 8px 12px; font-size: 13px;">${cellText || "&nbsp;"}</td>`;
+          });
+          html += "</tr>";
+        });
+        html += "</table>";
+      }
+    }
+    card.innerHTML = DOMPurify2.sanitize(html, {
+      ADD_TAGS: ["h1", "h2", "h3", "h4", "p", "table", "tr", "td", "span", "b", "i", "u", "s", "strike", "img", "div", "br"],
+      ADD_ATTR: ["style", "src", "alt", "colspan", "rowspan"]
+    });
+    wrapper.appendChild(card);
+  }
+  extractParagraphHtml(pElement, imageMap = {}) {
+    let result = "";
+    const drawings = Array.from(pElement.getElementsByTagNameNS("*", "drawing"));
+    for (const drawing of drawings) {
+      const blip = drawing.getElementsByTagNameNS("*", "blip")[0];
+      const rId = blip?.getAttribute("r:embed") || blip?.getAttribute("r:id");
+      if (rId && imageMap[rId]) {
+        result += `<div style="text-align:center; margin: 12px 0;"><img src="${imageMap[rId]}" style="max-width: 100%; height: auto; border-radius: 4px;" /></div>`;
+      }
+    }
+    const runs = Array.from(pElement.getElementsByTagNameNS("*", "r"));
+    if (runs.length === 0 && !result) {
+      return DOMPurify2.sanitize(pElement.textContent || "");
+    }
+    for (const r of runs) {
+      const blip = r.getElementsByTagNameNS("*", "blip")[0] || r.getElementsByTagNameNS("*", "imagedata")[0];
+      const rId = blip?.getAttribute("r:embed") || blip?.getAttribute("r:id");
+      if (rId && imageMap[rId]) {
+        result += `<img src="${imageMap[rId]}" style="max-width: 100%; height: auto; display: inline-block; margin: 4px;" />`;
+      }
+      const brs = r.getElementsByTagNameNS("*", "br");
+      for (let i = 0; i < brs.length; i++) {
+        result += "<br/>";
+      }
+      const tabs = r.getElementsByTagNameNS("*", "tab");
+      if (tabs.length > 0) {
+        result += "&emsp;";
+      }
+      const rPr = r.getElementsByTagNameNS("*", "rPr")[0];
+      const isBold = !!rPr?.getElementsByTagNameNS("*", "b")[0];
+      const isItalic = !!rPr?.getElementsByTagNameNS("*", "i")[0];
+      const isUnderline = !!rPr?.getElementsByTagNameNS("*", "u")[0];
+      const isStrike = !!rPr?.getElementsByTagNameNS("*", "strike")[0];
+      const colorNode = rPr?.getElementsByTagNameNS("*", "color")[0];
+      const colorVal = colorNode?.getAttribute("w:val") || colorNode?.getAttribute("val");
+      const szNode = rPr?.getElementsByTagNameNS("*", "sz")[0];
+      const szVal = szNode?.getAttribute("w:val") || szNode?.getAttribute("val");
+      const texts = Array.from(r.getElementsByTagNameNS("*", "t"));
+      let text = texts.map((t) => t.textContent || "").join("");
+      if (!text) continue;
+      text = DOMPurify2.sanitize(text);
+      let styles = "";
+      if (isBold) styles += "font-weight: bold; ";
+      if (isItalic) styles += "font-style: italic; ";
+      if (isUnderline) styles += "text-decoration: underline; ";
+      if (isStrike) styles += "text-decoration: line-through; ";
+      if (colorVal && colorVal !== "auto") styles += `color: #${colorVal}; `;
+      if (szVal) {
+        const pt = parseInt(szVal, 10) / 2;
+        if (!isNaN(pt) && pt > 0) styles += `font-size: ${pt}pt; `;
+      }
+      if (styles) {
+        result += `<span style="${styles}">${text}</span>`;
+      } else {
+        result += text;
+      }
+    }
+    return result;
+  }
+  renderBinaryDocFallback(ctx, wrapper) {
+    const card = document.createElement("div");
+    card.className = "fp-docx-page-card";
+    card.style.backgroundColor = "#ffffff";
+    card.style.borderRadius = "6px";
+    card.style.boxShadow = "0 4px 24px rgba(0,0,0,0.08)";
+    card.style.padding = "48px 56px";
+    card.style.fontFamily = 'Calibri, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+    card.style.color = "#1e293b";
+    card.style.lineHeight = "1.6";
+    try {
+      const cfbf = new CfbfReader(ctx.buffer);
+      const wordDocStream = cfbf.readStream("WordDocument");
+      if (wordDocStream && wordDocStream.length >= 512) {
+        const text2 = this.extractReadableStrings(wordDocStream);
+        card.innerHTML = `<div style="white-space: pre-wrap;">${DOMPurify2.sanitize(text2)}</div>`;
+        wrapper.appendChild(card);
+        return;
+      }
+    } catch {
+    }
+    const text = this.extractReadableStrings(new Uint8Array(ctx.buffer));
+    card.innerHTML = `<div style="white-space: pre-wrap;">${DOMPurify2.sanitize(text)}</div>`;
+    wrapper.appendChild(card);
+  }
+  extractReadableStrings(bytes) {
+    let result = "";
+    let current = "";
+    for (let i = 0; i < bytes.length; i++) {
+      const b = bytes[i];
+      if (b >= 32 && b <= 126 || b === 10 || b === 13 || b === 9) {
+        current += String.fromCharCode(b);
+      } else if (b === 0 && i + 1 < bytes.length && bytes[i + 1] >= 32 && bytes[i + 1] <= 126) {
+        continue;
+      } else {
+        if (current.trim().length > 3) {
+          result += current.trim() + "\n\n";
+        }
+        current = "";
+      }
+    }
+    if (current.trim().length > 3) {
+      result += current.trim();
+    }
+    return result;
+  }
 };
 function docxPlugin() {
   return new DocxPlugin();
@@ -2445,7 +2798,7 @@ var MarkdownPlugin = class {
       gfm: true,
       breaks: true
     });
-    const cleanHtml = DOMPurify5.sanitize(rawHtml, {
+    const cleanHtml = DOMPurify2.sanitize(rawHtml, {
       USE_PROFILES: { html: true }
     });
     const wrapper = document.createElement("div");
@@ -2609,35 +2962,27 @@ var PptxPlugin = class {
         group: "navigation",
         execute: () => instance.toggleThumbnails?.()
       },
-      {
-        id: "page-prev",
-        icon: "page-prev",
-        label: "Previous Slide",
-        type: "button",
-        group: "navigation",
-        execute: () => {
-          const cur = instance.getCurrentPage?.() ?? 1;
-          if (cur > 1) instance.goToPage?.(cur - 1);
-        }
-      },
       {
         id: "page-nav",
         icon: "",
-        label: "Slide Number",
+        label: "Slide Navigation",
         type: "page-nav",
         group: "navigation",
-        execute: (page) => instance.goToPage?.(Number(page))
-      },
-      {
-        id: "page-next",
-        icon: "page-next",
-        label: "Next Slide",
-        type: "button",
-        group: "navigation",
-        execute: () => {
-          const cur = instance.getCurrentPage?.() ?? 1;
-          const total = instance.getPageCount?.() ?? 1;
-          if (cur < total) instance.goToPage?.(cur + 1);
+        value: instance.getCurrentPage?.() ?? 1,
+        max: instance.getPageCount?.() ?? 1,
+        execute: (action, page) => {
+          if (action === "prev") {
+            const cur = instance.getCurrentPage?.() ?? 1;
+            if (cur > 1) instance.goToPage?.(cur - 1);
+          } else if (action === "next") {
+            const cur = instance.getCurrentPage?.() ?? 1;
+            const total = instance.getPageCount?.() ?? 1;
+            if (cur < total) instance.goToPage?.(cur + 1);
+          } else if (typeof page === "number") {
+            instance.goToPage?.(page);
+          } else if (typeof action === "number") {
+            instance.goToPage?.(action);
+          }
         }
       },
       {
@@ -3168,7 +3513,7 @@ var HtmlPreviewPlugin = class {
   }
   async render(ctx) {
     const rawHtml = new TextDecoder("utf-8").decode(ctx.buffer);
-    const sanitized = DOMPurify5.sanitize(rawHtml, {
+    const sanitized = DOMPurify2.sanitize(rawHtml, {
       WHOLE_DOCUMENT: true,
       ADD_TAGS: ["style", "link"],
       ADD_ATTR: ["target", "rel"]
@@ -3263,35 +3608,27 @@ var OpenDocumentPlugin = class {
           group: "navigation",
           execute: () => instance.toggleThumbnails?.()
         },
-        {
-          id: "page-prev",
-          icon: "page-prev",
-          label: "Previous Slide",
-          type: "button",
-          group: "navigation",
-          execute: () => {
-            const cur = instance.getCurrentPage?.() ?? 1;
-            if (cur > 1) instance.goToPage?.(cur - 1);
-          }
-        },
         {
           id: "page-nav",
           icon: "",
-          label: "Slide Number",
+          label: "Slide Navigation",
           type: "page-nav",
           group: "navigation",
-          execute: (p) => instance.goToPage?.(Number(p))
-        },
-        {
-          id: "page-next",
-          icon: "page-next",
-          label: "Next Slide",
-          type: "button",
-          group: "navigation",
-          execute: () => {
-            const cur = instance.getCurrentPage?.() ?? 1;
-            const total = instance.getPageCount?.() ?? 1;
-            if (cur < total) instance.goToPage?.(cur + 1);
+          value: instance.getCurrentPage?.() ?? 1,
+          max: instance.getPageCount?.() ?? 1,
+          execute: (action, page) => {
+            if (action === "prev") {
+              const cur = instance.getCurrentPage?.() ?? 1;
+              if (cur > 1) instance.goToPage?.(cur - 1);
+            } else if (action === "next") {
+              const cur = instance.getCurrentPage?.() ?? 1;
+              const total = instance.getPageCount?.() ?? 1;
+              if (cur < total) instance.goToPage?.(cur + 1);
+            } else if (typeof page === "number") {
+              instance.goToPage?.(page);
+            } else if (typeof action === "number") {
+              instance.goToPage?.(action);
+            }
           }
         }
       );
@@ -3419,7 +3756,7 @@ var OpenDocumentPlugin = class {
       wrapper.style.padding = "48px";
       wrapper.style.minHeight = "100%";
       const bodyHtml = this.renderOdfBody(contentDoc, styleMap, imageUrls);
-      wrapper.innerHTML = DOMPurify5.sanitize(bodyHtml, {
+      wrapper.innerHTML = DOMPurify2.sanitize(bodyHtml, {
         ADD_TAGS: ["math", "semantics", "mrow", "mi", "mo", "mn", "msup", "msub"],
         ADD_ATTR: ["style", "colspan", "rowspan"]
       });
@@ -3939,24 +4276,24 @@ var DocPlugin = class {
           html += "</ul>";
           inList = false;
         }
-        html += `<h2 style="font-size: 18px; font-weight: 700; color: #1e3a8a; margin: 20px 0 8px; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px;">${DOMPurify5.sanitize(line)}</h2>`;
+        html += `<h2 style="font-size: 18px; font-weight: 700; color: #1e3a8a; margin: 20px 0 8px; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px;">${DOMPurify2.sanitize(line)}</h2>`;
       } else if (line.startsWith("\u2022") || line.startsWith("-") || line.startsWith("*")) {
         if (!inList) {
           html += '<ul style="margin: 8px 0; padding-left: 24px;">';
           inList = true;
         }
         const bulletText = line.replace(/^[•\-\*]\s*/, "");
-        html += `<li style="margin: 4px 0; line-height: 1.6;">${DOMPurify5.sanitize(bulletText)}</li>`;
+        html += `<li style="margin: 4px 0; line-height: 1.6;">${DOMPurify2.sanitize(bulletText)}</li>`;
       } else {
         if (inList) {
           html += "</ul>";
           inList = false;
         }
-        html += `<p style="line-height: 1.7; margin: 10px 0; font-size: 14px; text-align: justify;">${DOMPurify5.sanitize(line)}</p>`;
+        html += `<p style="line-height: 1.7; margin: 10px 0; font-size: 14px; text-align: justify;">${DOMPurify2.sanitize(line)}</p>`;
       }
     }
     if (inList) html += "</ul>";
-    return html || `<p style="color: #64748b; font-style: italic;">(No readable text found in ${DOMPurify5.sanitize(filename)})</p>`;
+    return html || `<p style="color: #64748b; font-style: italic;">(No readable text found in ${DOMPurify2.sanitize(filename)})</p>`;
   }
 };
 function docPlugin() {
@@ -3983,35 +4320,27 @@ var PptPlugin = class {
         group: "navigation",
         execute: () => instance.toggleThumbnails?.()
       },
-      {
-        id: "page-prev",
-        icon: "page-prev",
-        label: "Previous Slide",
-        type: "button",
-        group: "navigation",
-        execute: () => {
-          const cur = instance.getCurrentPage?.() ?? 1;
-          if (cur > 1) instance.goToPage?.(cur - 1);
-        }
-      },
       {
         id: "page-nav",
         icon: "",
-        label: "Slide Number",
+        label: "Slide Navigation",
         type: "page-nav",
         group: "navigation",
-        execute: (p) => instance.goToPage?.(Number(p))
-      },
-      {
-        id: "page-next",
-        icon: "page-next",
-        label: "Next Slide",
-        type: "button",
-        group: "navigation",
-        execute: () => {
-          const cur = instance.getCurrentPage?.() ?? 1;
-          const total = instance.getPageCount?.() ?? 1;
-          if (cur < total) instance.goToPage?.(cur + 1);
+        value: instance.getCurrentPage?.() ?? 1,
+        max: instance.getPageCount?.() ?? 1,
+        execute: (action, page) => {
+          if (action === "prev") {
+            const cur = instance.getCurrentPage?.() ?? 1;
+            if (cur > 1) instance.goToPage?.(cur - 1);
+          } else if (action === "next") {
+            const cur = instance.getCurrentPage?.() ?? 1;
+            const total = instance.getPageCount?.() ?? 1;
+            if (cur < total) instance.goToPage?.(cur + 1);
+          } else if (typeof page === "number") {
+            instance.goToPage?.(page);
+          } else if (typeof action === "number") {
+            instance.goToPage?.(action);
+          }
         }
       },
       {
@@ -4119,10 +4448,10 @@ var PptPlugin = class {
         </div>
         <div style="text-align: center; width: 100%;">
           <h1 style="font-size: ${idx === 1 ? "36px" : "28px"}; color: #1e3a8a; margin: 0 0 24px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700;">
-            ${DOMPurify5.sanitize(s.title || `Slide ${idx}`)}
+            ${DOMPurify2.sanitize(s.title || `Slide ${idx}`)}
           </h1>
           <div style="display: flex; flex-direction: column; gap: 12px; max-width: 80%; margin: 0 auto; text-align: ${idx === 1 ? "center" : "left"};">
-            ${s.texts.map((t) => `<div style="font-size: 18px; color: #334155; line-height: 1.5; font-family: -apple-system, BlinkMacSystemFont, sans-serif;">${DOMPurify5.sanitize(t)}</div>`).join("")}
+            ${s.texts.map((t) => `<div style="font-size: 18px; color: #334155; line-height: 1.5; font-family: -apple-system, BlinkMacSystemFont, sans-serif;">${DOMPurify2.sanitize(t)}</div>`).join("")}
           </div>
         </div>
       `;