@files-preview-app/preview-file 1.2.0 → 1.2.2

package/dist/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var DOMPurify5 = require('dompurify');
+var DOMPurify6 = require('dompurify');
 var docx = require('docx-preview');
+var fflate = require('fflate');
 var XLSX = require('xlsx');
 var hljs = require('highlight.js');
-var fflate = require('fflate');
 var marked = require('marked');
 var pptxBrowser = require('pptx-browser');
 var THREE = require('three');
@@ -33,7 +33,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var DOMPurify5__default = /*#__PURE__*/_interopDefault(DOMPurify5);
+var DOMPurify6__default = /*#__PURE__*/_interopDefault(DOMPurify6);
 var docx__namespace = /*#__PURE__*/_interopNamespace(docx);
 var XLSX__namespace = /*#__PURE__*/_interopNamespace(XLSX);
 var hljs__default = /*#__PURE__*/_interopDefault(hljs);
@@ -367,12 +367,12 @@ async function sourceToArrayBuffer(source, signal) {
   return { buffer, metadata };
 }
 function sanitizeHTML(html) {
-  return DOMPurify5__default.default.sanitize(html, {
+  return DOMPurify6__default.default.sanitize(html, {
     USE_PROFILES: { html: true }
   });
 }
 function sanitizeSVG(svg) {
-  return DOMPurify5__default.default.sanitize(svg, {
+  return DOMPurify6__default.default.sanitize(svg, {
     USE_PROFILES: { svg: true, svgFilters: true }
   });
 }
@@ -487,7 +487,11 @@ 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
 };
 var ToolbarController = class {
   el;
@@ -519,7 +523,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);
       }
@@ -542,13 +548,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",
@@ -558,7 +577,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);
@@ -599,11 +621,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;
@@ -1346,12 +1368,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",
@@ -1359,12 +1381,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) {
@@ -1497,8 +1536,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) {
@@ -1574,7 +1617,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",
@@ -1596,9 +1639,7 @@ var DocxPlugin = class {
         label: "Zoom Out",
         type: "button",
         group: "zoom",
-        execute: () => {
-          instance.zoomOut?.();
-        }
+        execute: () => instance.zoomOut?.()
       },
       {
         id: "zoom-in",
@@ -1606,9 +1647,7 @@ var DocxPlugin = class {
         label: "Zoom In",
         type: "button",
         group: "zoom",
-        execute: () => {
-          instance.zoomIn?.();
-        }
+        execute: () => instance.zoomIn?.()
       },
       {
         id: "fit-page",
@@ -1616,9 +1655,7 @@ var DocxPlugin = class {
         label: "Fit to Page",
         type: "button",
         group: "zoom",
-        execute: () => {
-          instance.fitToPage?.();
-        }
+        execute: () => instance.fitToPage?.()
       },
       {
         id: "download",
@@ -1626,9 +1663,7 @@ var DocxPlugin = class {
         label: "Download",
         type: "button",
         group: "actions",
-        execute: () => {
-          instance.download?.();
-        }
+        execute: () => instance.download?.()
       },
       {
         id: "print",
@@ -1636,9 +1671,7 @@ var DocxPlugin = class {
         label: "Print",
         type: "button",
         group: "actions",
-        execute: () => {
-          instance.print?.();
-        }
+        execute: () => instance.print?.()
       }
     ];
   }
@@ -1647,24 +1680,46 @@ 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 = "900px";
+    wrapper.style.margin = "0 auto";
+    wrapper.style.boxSizing = "border-box";
     ctx.container.style.overflow = "auto";
+    ctx.container.style.backgroundColor = "#f1f5f9";
     ctx.container.appendChild(wrapper);
     let scale = 1;
+    let renderedSuccessfully = false;
     try {
       await docx__namespace.renderAsync(ctx.buffer, wrapper, ctx.container, {
         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 (wrapper.children.length > 0 && (wrapper.textContent?.trim().length ?? 0) > 0) {
+        renderedSuccessfully = true;
+      }
+    } catch (err) {
+      console.warn("[DocxPlugin] docx-preview failed, triggering native XML fallback:", err);
+    }
+    if (!renderedSuccessfully) {
+      try {
+        wrapper.innerHTML = "";
+        this.renderXmlFallback(ctx, wrapper);
+        renderedSuccessfully = true;
+      } catch (fallbackErr) {
+        console.error("[DocxPlugin] XML 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>
+        `;
+      }
     }
     const cleanup = () => {
       wrapper.remove();
@@ -1688,7 +1743,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] });
@@ -1704,6 +1759,100 @@ var DocxPlugin = class {
       }
     };
   }
+  renderXmlFallback(ctx, wrapper) {
+    const unzipped = fflate.unzipSync(new Uint8Array(ctx.buffer));
+    const docXmlEntry = unzipped["word/document.xml"];
+    if (!docXmlEntry) throw new Error("Missing word/document.xml in DOCX package");
+    const xmlStr = fflate.strFromU8(docXmlEntry);
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xmlStr, "application/xml");
+    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);
+        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);
+            html += `<td style="border: 1px solid #cbd5e1; padding: 8px 12px; font-size: 13px;">${cellText || "&nbsp;"}</td>`;
+          });
+          html += "</tr>";
+        });
+        html += "</table>";
+      }
+    }
+    card.innerHTML = DOMPurify6__default.default.sanitize(html, {
+      ADD_TAGS: ["h1", "h2", "h3", "h4", "p", "table", "tr", "td", "span", "b", "i", "u", "img", "div"],
+      ADD_ATTR: ["style", "src", "alt", "colspan", "rowspan"]
+    });
+    wrapper.appendChild(card);
+  }
+  extractParagraphHtml(pElement) {
+    let result = "";
+    const runs = Array.from(pElement.getElementsByTagNameNS("*", "r"));
+    if (runs.length === 0) {
+      return DOMPurify6__default.default.sanitize(pElement.textContent || "");
+    }
+    for (const r of runs) {
+      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 colorNode = rPr?.getElementsByTagNameNS("*", "color")[0];
+      const colorVal = colorNode?.getAttribute("w:val") || colorNode?.getAttribute("val");
+      const texts = Array.from(r.getElementsByTagNameNS("*", "t"));
+      let text = texts.map((t) => t.textContent || "").join("");
+      if (!text) continue;
+      text = DOMPurify6__default.default.sanitize(text);
+      let styles = "";
+      if (isBold) styles += "font-weight: bold; ";
+      if (isItalic) styles += "font-style: italic; ";
+      if (isUnderline) styles += "text-decoration: underline; ";
+      if (colorVal && colorVal !== "auto") styles += `color: #${colorVal}; `;
+      if (styles) {
+        result += `<span style="${styles}">${text}</span>`;
+      } else {
+        result += text;
+      }
+    }
+    return result;
+  }
 };
 function docxPlugin() {
   return new DocxPlugin();
@@ -2515,7 +2664,7 @@ var MarkdownPlugin = class {
       gfm: true,
       breaks: true
     });
-    const cleanHtml = DOMPurify5__default.default.sanitize(rawHtml, {
+    const cleanHtml = DOMPurify6__default.default.sanitize(rawHtml, {
       USE_PROFILES: { html: true }
     });
     const wrapper = document.createElement("div");
@@ -2679,35 +2828,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);
+          }
         }
       },
       {
@@ -3238,7 +3379,7 @@ var HtmlPreviewPlugin = class {
   }
   async render(ctx) {
     const rawHtml = new TextDecoder("utf-8").decode(ctx.buffer);
-    const sanitized = DOMPurify5__default.default.sanitize(rawHtml, {
+    const sanitized = DOMPurify6__default.default.sanitize(rawHtml, {
       WHOLE_DOCUMENT: true,
       ADD_TAGS: ["style", "link"],
       ADD_ATTR: ["target", "rel"]
@@ -3333,35 +3474,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);
+            }
           }
         }
       );
@@ -3489,7 +3622,7 @@ var OpenDocumentPlugin = class {
       wrapper.style.padding = "48px";
       wrapper.style.minHeight = "100%";
       const bodyHtml = this.renderOdfBody(contentDoc, styleMap, imageUrls);
-      wrapper.innerHTML = DOMPurify5__default.default.sanitize(bodyHtml, {
+      wrapper.innerHTML = DOMPurify6__default.default.sanitize(bodyHtml, {
         ADD_TAGS: ["math", "semantics", "mrow", "mi", "mo", "mn", "msup", "msub"],
         ADD_ATTR: ["style", "colspan", "rowspan"]
       });
@@ -4009,24 +4142,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__default.default.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;">${DOMPurify6__default.default.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__default.default.sanitize(bulletText)}</li>`;
+        html += `<li style="margin: 4px 0; line-height: 1.6;">${DOMPurify6__default.default.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__default.default.sanitize(line)}</p>`;
+        html += `<p style="line-height: 1.7; margin: 10px 0; font-size: 14px; text-align: justify;">${DOMPurify6__default.default.sanitize(line)}</p>`;
       }
     }
     if (inList) html += "</ul>";
-    return html || `<p style="color: #64748b; font-style: italic;">(No readable text found in ${DOMPurify5__default.default.sanitize(filename)})</p>`;
+    return html || `<p style="color: #64748b; font-style: italic;">(No readable text found in ${DOMPurify6__default.default.sanitize(filename)})</p>`;
   }
 };
 function docPlugin() {
@@ -4053,35 +4186,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);
+          }
         }
       },
       {
@@ -4189,10 +4314,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__default.default.sanitize(s.title || `Slide ${idx}`)}
+            ${DOMPurify6__default.default.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__default.default.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;">${DOMPurify6__default.default.sanitize(t)}</div>`).join("")}
           </div>
         </div>
       `;