@files-preview-app/preview-file 1.0.0 → 1.1.2

package/dist/angular.js

@@ -4,6 +4,13 @@ import DOMPurify from 'dompurify';
 import * as docx from 'docx-preview';
 import ExcelJS from 'exceljs';
 import hljs from 'highlight.js';
+import { unzip } from 'fflate';
+import { marked } from 'marked';
+import { PptxRenderer } from 'pptx-browser';
+import * as THREE from 'three';
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -341,6 +348,27 @@ function sanitizeSVG(svg) {
     USE_PROFILES: { svg: true, svgFilters: true }
   });
 }
+function downloadFile(buffer, filename, mimeType) {
+  const blob = new Blob([buffer], { type: mimeType ?? "application/octet-stream" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.style.display = "none";
+  document.body.appendChild(link);
+  link.click();
+  setTimeout(() => {
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }, 100);
+}
+function formatFileSize(bytes) {
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  const size = bytes / Math.pow(1024, i);
+  return `${size.toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
+}
 function createElement(tag, attrs, ...children) {
   const el = document.createElement(tag);
   if (attrs) {
@@ -1759,6 +1787,798 @@ var CodePlugin = class {
 function codePlugin() {
   return new CodePlugin();
 }
+var ArchivePlugin = class {
+  id = "archive";
+  name = "Archive Explorer";
+  extensions = [".zip"];
+  mimeTypes = ["application/zip", "application/x-zip-compressed"];
+  weight = 70;
+  supports(file) {
+    const ext = file.metadata.extension?.toLowerCase();
+    const mime = file.metadata.mimeType?.toLowerCase();
+    return ext === ".zip" || this.mimeTypes.includes(mime || "");
+  }
+  getToolbarActions(instance) {
+    return [
+      {
+        id: "zoom-out",
+        icon: "zoom-out",
+        label: "Zoom Out",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.zoomOut?.()
+      },
+      {
+        id: "zoom-in",
+        icon: "zoom-in",
+        label: "Zoom In",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.zoomIn?.()
+      },
+      {
+        id: "fit-page",
+        icon: "fit-page",
+        label: "Reset Zoom",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToPage?.()
+      },
+      {
+        id: "download",
+        icon: "download",
+        label: "Download Archive",
+        type: "button",
+        group: "actions",
+        execute: () => instance.download?.()
+      },
+      {
+        id: "print",
+        icon: "print",
+        label: "Print File List",
+        type: "button",
+        group: "actions",
+        execute: () => instance.print?.()
+      }
+    ];
+  }
+  async render(ctx) {
+    const wrapper = document.createElement("div");
+    wrapper.className = "fp-archive-wrapper";
+    wrapper.style.cssText = `
+      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;
+    `;
+    ctx.container.innerHTML = "";
+    ctx.container.style.overflow = "auto";
+    ctx.container.appendChild(wrapper);
+    let scale = 1;
+    const entries = await new Promise((resolve, reject) => {
+      unzip(new Uint8Array(ctx.buffer), (err, unzipped) => {
+        if (err) {
+          reject(err);
+          return;
+        }
+        const list = Object.entries(unzipped).map(([path, data]) => {
+          const isDir = path.endsWith("/");
+          const parts = path.split("/").filter(Boolean);
+          const name = parts[parts.length - 1] || path;
+          return {
+            path,
+            name,
+            isDir,
+            size: data.length,
+            data
+          };
+        });
+        resolve(list);
+      });
+    });
+    const totalUncompressedSize = entries.reduce((acc, e) => acc + e.size, 0);
+    const renderUI = (filteredEntries) => {
+      wrapper.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>
+              <h3 style="margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: var(--fp-text, #111827);">
+                \u{1F4E6} ${ctx.metadata.name || "Archive.zip"}
+              </h3>
+              <div style="font-size: 13px; color: var(--fp-text-muted, #6b7280);">
+                ${entries.length} items \xB7 Total size: ${formatFileSize(totalUncompressedSize)} (Compressed: ${formatFileSize(ctx.buffer.byteLength)})
+              </div>
+            </div>
+            <div>
+              <input type="text" id="fp-archive-search" placeholder="Search files in archive..." style="padding: 6px 12px; font-size: 13px; border: 1px solid var(--fp-border, #d1d5db); border-radius: 6px; outline: none; width: 220px;" />
+            </div>
+          </div>
+          <div style="max-height: 550px; overflow-y: auto;">
+            <table style="width: 100%; border-collapse: collapse; font-size: 13px; text-align: left;">
+              <thead>
+                <tr style="background: var(--fp-toolbar-bg, #f3f4f6); color: var(--fp-text-muted, #4b5563); border-bottom: 1px solid var(--fp-border, #e5e7eb);">
+                  <th style="padding: 10px 16px; font-weight: 600;">Name / Path</th>
+                  <th style="padding: 10px 16px; font-weight: 600; width: 120px;">Size</th>
+                  <th style="padding: 10px 16px; font-weight: 600; width: 100px; text-align: right;">Action</th>
+                </tr>
+              </thead>
+              <tbody id="fp-archive-body">
+              </tbody>
+            </table>
+          </div>
+        </div>
+      `;
+      const tbody = wrapper.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 {
+        tbody.innerHTML = filteredEntries.map((e, idx) => `
+          <tr style="border-bottom: 1px solid var(--fp-border, #f3f4f6); transition: background 0.15s ease;" onmouseover="this.style.background='var(--fp-hover, #f9fafb)'" onmouseout="this.style.background='transparent'">
+            <td style="padding: 10px 16px; color: var(--fp-text, #1f2937); word-break: break-all;">
+              <span style="margin-right: 8px;">${e.isDir ? "\u{1F4C1}" : "\u{1F4C4}"}</span>
+              ${e.path}
+            </td>
+            <td style="padding: 10px 16px; color: var(--fp-text-muted, #6b7280);">
+              ${e.isDir ? "-" : formatFileSize(e.size)}
+            </td>
+            <td style="padding: 10px 16px; text-align: right;">
+              ${!e.isDir ? `<button data-idx="${idx}" class="fp-entry-dl" style="padding: 4px 8px; font-size: 12px; background: transparent; border: 1px solid var(--fp-border, #d1d5db); border-radius: 4px; cursor: pointer; color: var(--fp-text, #374151);">\u2B07\uFE0F Save</button>` : ""}
+            </td>
+          </tr>
+        `).join("");
+      }
+      tbody.querySelectorAll(".fp-entry-dl").forEach((btn) => {
+        btn.addEventListener("click", (ev) => {
+          const target = ev.currentTarget;
+          const idx = Number(target.getAttribute("data-idx"));
+          const entry = filteredEntries[idx];
+          if (entry && entry.data) {
+            downloadFile(entry.data.buffer, entry.name);
+          }
+        });
+      });
+      const searchInput = wrapper.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");
+          if (newSearch) {
+            newSearch.value = q;
+            newSearch.focus();
+          }
+        });
+      }
+    };
+    renderUI(entries);
+    const cleanup = () => {
+      wrapper.remove();
+      ctx.container.innerHTML = "";
+    };
+    ctx.signal.addEventListener("abort", cleanup);
+    return {
+      destroy: cleanup,
+      zoomIn: () => {
+        scale += 0.1;
+        wrapper.style.transform = `scale(${scale})`;
+      },
+      zoomOut: () => {
+        scale = Math.max(0.3, scale - 0.1);
+        wrapper.style.transform = `scale(${scale})`;
+      },
+      getZoom: () => scale,
+      setZoom: (level) => {
+        scale = level;
+        wrapper.style.transform = `scale(${scale})`;
+      },
+      fitToPage: () => {
+        scale = 1;
+        wrapper.style.transform = `scale(1)`;
+      },
+      download: () => {
+        downloadFile(ctx.buffer, ctx.metadata.name || "archive.zip", "application/zip");
+      },
+      print: () => {
+        window.print();
+      }
+    };
+  }
+};
+function archivePlugin() {
+  return new ArchivePlugin();
+}
+var MarkdownPlugin = class {
+  id = "markdown";
+  name = "Markdown Preview";
+  extensions = [".md", ".markdown", ".mdown", ".mkd"];
+  mimeTypes = ["text/markdown", "text/x-markdown"];
+  weight = 90;
+  // Higher than generic text/code plugin
+  supports(file) {
+    const ext = file.metadata.extension?.toLowerCase();
+    const mime = file.metadata.mimeType?.toLowerCase();
+    return this.extensions.includes(ext || "") || this.mimeTypes.includes(mime || "");
+  }
+  getToolbarActions(instance) {
+    return [
+      {
+        id: "zoom-out",
+        icon: "zoom-out",
+        label: "Decrease Font",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.zoomOut?.()
+      },
+      {
+        id: "zoom-in",
+        icon: "zoom-in",
+        label: "Increase Font",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.zoomIn?.()
+      },
+      {
+        id: "fit-page",
+        icon: "fit-page",
+        label: "Default Size",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToPage?.()
+      },
+      {
+        id: "download",
+        icon: "download",
+        label: "Download Markdown",
+        type: "button",
+        group: "actions",
+        execute: () => instance.download?.()
+      },
+      {
+        id: "print",
+        icon: "print",
+        label: "Print Document",
+        type: "button",
+        group: "actions",
+        execute: () => instance.print?.()
+      }
+    ];
+  }
+  async render(ctx) {
+    const text = new TextDecoder("utf-8", { fatal: false }).decode(ctx.buffer);
+    const rawHtml = await marked.parse(text, {
+      gfm: true,
+      breaks: true
+    });
+    const cleanHtml = DOMPurify.sanitize(rawHtml, {
+      USE_PROFILES: { html: true }
+    });
+    const wrapper = document.createElement("div");
+    wrapper.className = "fp-markdown-wrapper";
+    wrapper.style.cssText = `
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      padding: 32px 40px;
+      box-sizing: border-box;
+      line-height: 1.6;
+      font-size: 15px;
+      color: var(--fp-text, #24292f);
+      background: var(--fp-bg, #ffffff);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+    `;
+    wrapper.innerHTML = `
+      <style>
+        .fp-markdown-wrapper h1, .fp-markdown-wrapper h2, .fp-markdown-wrapper h3,
+        .fp-markdown-wrapper h4, .fp-markdown-wrapper h5, .fp-markdown-wrapper h6 {
+          margin-top: 24px;
+          margin-bottom: 16px;
+          font-weight: 600;
+          line-height: 1.25;
+          color: var(--fp-text, #1f2328);
+        }
+        .fp-markdown-wrapper h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--fp-border, #d0d7de); }
+        .fp-markdown-wrapper h2 { font-size: 1.5em; padding-bottom: 0.3em; border-bottom: 1px solid var(--fp-border, #d0d7de); }
+        .fp-markdown-wrapper h3 { font-size: 1.25em; }
+        .fp-markdown-wrapper p { margin-top: 0; margin-bottom: 16px; }
+        .fp-markdown-wrapper table {
+          border-spacing: 0;
+          border-collapse: collapse;
+          margin-top: 0;
+          margin-bottom: 16px;
+          width: 100%;
+          overflow: auto;
+        }
+        .fp-markdown-wrapper table th, .fp-markdown-wrapper table td {
+          padding: 6px 13px;
+          border: 1px solid var(--fp-border, #d0d7de);
+        }
+        .fp-markdown-wrapper table tr:nth-child(2n) {
+          background-color: var(--fp-toolbar-bg, #f6f8fa);
+        }
+        .fp-markdown-wrapper blockquote {
+          margin: 0 0 16px 0;
+          padding: 0 1em;
+          color: var(--fp-text-muted, #59636e);
+          border-left: 0.25em solid var(--fp-border, #d0d7de);
+        }
+        .fp-markdown-wrapper pre {
+          padding: 16px;
+          overflow: auto;
+          font-size: 85%;
+          line-height: 1.45;
+          background-color: var(--fp-toolbar-bg, #f6f8fa);
+          border-radius: 6px;
+          border: 1px solid var(--fp-border, #d0d7de);
+        }
+        .fp-markdown-wrapper code {
+          padding: 0.2em 0.4em;
+          margin: 0;
+          font-size: 85%;
+          background-color: rgba(175, 184, 193, 0.2);
+          border-radius: 4px;
+          font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+        }
+        .fp-markdown-wrapper pre code {
+          padding: 0;
+          background: transparent;
+        }
+        .fp-markdown-wrapper ul, .fp-markdown-wrapper ol {
+          padding-left: 2em;
+          margin-top: 0;
+          margin-bottom: 16px;
+        }
+        .fp-markdown-wrapper hr {
+          height: 0.25em;
+          padding: 0;
+          margin: 24px 0;
+          background-color: var(--fp-border, #d0d7de);
+          border: 0;
+        }
+      </style>
+      <div class="fp-markdown-content" style="max-width: 860px; margin: 0 auto;">
+        ${cleanHtml}
+      </div>
+    `;
+    wrapper.querySelectorAll("pre code").forEach((block) => {
+      hljs.highlightElement(block);
+    });
+    ctx.container.innerHTML = "";
+    ctx.container.style.overflow = "auto";
+    ctx.container.appendChild(wrapper);
+    let fontSize = 15;
+    const cleanup = () => {
+      wrapper.remove();
+      ctx.container.innerHTML = "";
+    };
+    ctx.signal.addEventListener("abort", cleanup);
+    return {
+      destroy: cleanup,
+      zoomIn: () => {
+        fontSize = Math.min(28, fontSize + 2);
+        wrapper.style.fontSize = `${fontSize}px`;
+      },
+      zoomOut: () => {
+        fontSize = Math.max(10, fontSize - 2);
+        wrapper.style.fontSize = `${fontSize}px`;
+      },
+      getZoom: () => fontSize / 15,
+      setZoom: (level) => {
+        fontSize = Math.round(15 * level);
+        wrapper.style.fontSize = `${fontSize}px`;
+      },
+      fitToPage: () => {
+        fontSize = 15;
+        wrapper.style.fontSize = "15px";
+      },
+      download: () => {
+        downloadFile(ctx.buffer, ctx.metadata.name || "document.md", "text/markdown");
+      },
+      print: () => {
+        window.print();
+      }
+    };
+  }
+};
+function markdownPlugin() {
+  return new MarkdownPlugin();
+}
+var PptxPlugin = class {
+  id = "pptx";
+  name = "PowerPoint Presentation";
+  extensions = [".pptx", ".ppsx"];
+  mimeTypes = [
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    "application/vnd.openxmlformats-officedocument.presentationml.slideshow"
+  ];
+  weight = 80;
+  supports(file) {
+    const ext = file.metadata.extension?.toLowerCase();
+    const mime = file.metadata.mimeType?.toLowerCase();
+    return this.extensions.includes(ext || "") || this.mimeTypes.includes(mime || "");
+  }
+  getToolbarActions(instance) {
+    return [
+      {
+        id: "thumbnails",
+        icon: "thumbnails",
+        label: "Slide Thumbnails",
+        type: "button",
+        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",
+        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);
+        }
+      },
+      {
+        id: "zoom-out",
+        icon: "zoom-out",
+        label: "Zoom Out",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.zoomOut?.()
+      },
+      {
+        id: "zoom-in",
+        icon: "zoom-in",
+        label: "Zoom In",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.zoomIn?.()
+      },
+      {
+        id: "fit-page",
+        icon: "fit-page",
+        label: "Fit to Slide",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToPage?.()
+      },
+      {
+        id: "download",
+        icon: "download",
+        label: "Download PPTX",
+        type: "button",
+        group: "actions",
+        execute: () => instance.download?.()
+      },
+      {
+        id: "print",
+        icon: "print",
+        label: "Print Presentation",
+        type: "button",
+        group: "actions",
+        execute: () => instance.print?.()
+      }
+    ];
+  }
+  async render(ctx) {
+    const renderer = new PptxRenderer();
+    await renderer.load(ctx.buffer);
+    const slideCount = renderer.slidePaths?.length || 1;
+    let currentSlide = 1;
+    let scale = 1;
+    const wrapper = document.createElement("div");
+    wrapper.className = "fp-pptx-wrapper";
+    wrapper.style.cssText = `
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      padding: 24px;
+      box-sizing: border-box;
+      background: var(--fp-bg-canvas, #525659);
+    `;
+    const slideContainer = document.createElement("div");
+    slideContainer.className = "fp-slide-container";
+    slideContainer.style.cssText = `
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+      border-radius: 4px;
+      overflow: hidden;
+      background: #ffffff;
+      transform-origin: top center;
+      transition: transform 0.2s ease;
+    `;
+    const canvas = document.createElement("canvas");
+    slideContainer.appendChild(canvas);
+    wrapper.appendChild(slideContainer);
+    ctx.container.innerHTML = "";
+    ctx.container.style.overflow = "auto";
+    ctx.container.appendChild(wrapper);
+    const renderCurrentSlide = async () => {
+      try {
+        await renderer.renderSlide(currentSlide - 1, canvas, 1280);
+        ctx.emit("page-change", { page: currentSlide, totalPages: slideCount });
+      } catch (err) {
+        console.error("[PptxPlugin] Failed to render slide:", err);
+      }
+    };
+    await renderCurrentSlide();
+    const cleanup = () => {
+      renderer.destroy();
+      wrapper.remove();
+      ctx.container.innerHTML = "";
+    };
+    ctx.signal.addEventListener("abort", cleanup);
+    const instance = {
+      destroy: cleanup,
+      goToPage: (page) => {
+        if (page >= 1 && page <= slideCount) {
+          currentSlide = page;
+          renderCurrentSlide();
+        }
+      },
+      getPageCount: () => slideCount,
+      getCurrentPage: () => currentSlide,
+      zoomIn: () => {
+        scale += 0.1;
+        slideContainer.style.transform = `scale(${scale})`;
+      },
+      zoomOut: () => {
+        scale = Math.max(0.2, scale - 0.1);
+        slideContainer.style.transform = `scale(${scale})`;
+      },
+      getZoom: () => scale,
+      setZoom: (level) => {
+        scale = level;
+        slideContainer.style.transform = `scale(${scale})`;
+      },
+      fitToPage: () => {
+        scale = 1;
+        slideContainer.style.transform = "scale(1)";
+      },
+      getThumbnails: () => {
+        const list = [];
+        for (let i = 0; i < slideCount; i++) {
+          const slideIdx = i;
+          list.push({
+            index: slideIdx,
+            label: `Slide ${slideIdx + 1}`,
+            render: async (thumbCanvas) => {
+              await renderer.renderSlide(slideIdx, thumbCanvas, 240);
+            }
+          });
+        }
+        return list;
+      },
+      download: () => {
+        downloadFile(
+          ctx.buffer,
+          ctx.metadata.name || "presentation.pptx",
+          this.mimeTypes[0]
+        );
+      },
+      print: () => {
+        window.print();
+      }
+    };
+    return instance;
+  }
+};
+function pptxPlugin() {
+  return new PptxPlugin();
+}
+var ThreeDPlugin = class {
+  id = "3d";
+  name = "3D Model Preview";
+  extensions = [".stl", ".obj"];
+  mimeTypes = ["model/stl", "model/obj", "application/sla", "text/plain"];
+  weight = 75;
+  supports(file) {
+    const ext = file.metadata.extension?.toLowerCase();
+    return ext === ".stl" || ext === ".obj";
+  }
+  getToolbarActions(instance) {
+    return [
+      {
+        id: "zoom-out",
+        icon: "zoom-out",
+        label: "Zoom Out",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.zoomOut?.()
+      },
+      {
+        id: "zoom-in",
+        icon: "zoom-in",
+        label: "Zoom In",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.zoomIn?.()
+      },
+      {
+        id: "fit-page",
+        icon: "fit-page",
+        label: "Reset Camera View",
+        type: "button",
+        group: "zoom",
+        execute: () => instance.fitToPage?.()
+      },
+      {
+        id: "rotate-cw",
+        icon: "rotate-cw",
+        label: "Toggle Wireframe",
+        type: "button",
+        group: "view",
+        execute: () => instance.rotateCW?.()
+      },
+      {
+        id: "download",
+        icon: "download",
+        label: "Download 3D Model",
+        type: "button",
+        group: "actions",
+        execute: () => instance.download?.()
+      }
+    ];
+  }
+  async render(ctx) {
+    const container = ctx.container;
+    container.innerHTML = "";
+    container.style.overflow = "hidden";
+    container.style.position = "relative";
+    container.style.width = "100%";
+    container.style.height = "100%";
+    container.style.background = "#1a1a1a";
+    const width = container.clientWidth || 800;
+    const height = container.clientHeight || 600;
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(1973796);
+    const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 2e3);
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(width, height);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.shadowMap.enabled = true;
+    container.appendChild(renderer.domElement);
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.05;
+    const ambientLight = new THREE.AmbientLight(16777215, 0.8);
+    scene.add(ambientLight);
+    const dirLight1 = new THREE.DirectionalLight(16777215, 1.2);
+    dirLight1.position.set(100, 200, 100);
+    scene.add(dirLight1);
+    const dirLight2 = new THREE.DirectionalLight(16777215, 0.6);
+    dirLight2.position.set(-100, -100, -100);
+    scene.add(dirLight2);
+    const grid = new THREE.GridHelper(200, 20, 4473924, 2236962);
+    scene.add(grid);
+    let meshGroup = new THREE.Group();
+    let isWireframe = false;
+    const ext = ctx.metadata.extension?.toLowerCase();
+    const materials = [];
+    if (ext === ".stl") {
+      const loader = new STLLoader();
+      const geometry = loader.parse(ctx.buffer);
+      geometry.computeVertexNormals();
+      geometry.center();
+      const material = new THREE.MeshStandardMaterial({
+        color: 3900150,
+        roughness: 0.4,
+        metalness: 0.2
+      });
+      materials.push(material);
+      const mesh = new THREE.Mesh(geometry, material);
+      meshGroup.add(mesh);
+    } else if (ext === ".obj") {
+      const loader = new OBJLoader();
+      const text = new TextDecoder().decode(ctx.buffer);
+      const obj = loader.parse(text);
+      obj.traverse((child) => {
+        if (child.isMesh) {
+          const m = child;
+          m.geometry.computeVertexNormals();
+          const mat = new THREE.MeshStandardMaterial({
+            color: 1096065,
+            roughness: 0.5,
+            metalness: 0.1
+          });
+          materials.push(mat);
+          m.material = mat;
+        }
+      });
+      meshGroup.add(obj);
+    }
+    scene.add(meshGroup);
+    const box = new THREE.Box3().setFromObject(meshGroup);
+    const sphere = box.getBoundingSphere(new THREE.Sphere());
+    const radius = Math.max(sphere.radius, 10);
+    const fitCamera = () => {
+      camera.position.set(radius * 1.5, radius * 1.2, radius * 2);
+      camera.lookAt(0, 0, 0);
+      controls.target.set(0, 0, 0);
+      controls.update();
+    };
+    fitCamera();
+    let animId;
+    const animate = () => {
+      animId = requestAnimationFrame(animate);
+      controls.update();
+      renderer.render(scene, camera);
+    };
+    animate();
+    const resizeObserver = new ResizeObserver(() => {
+      const newWidth = container.clientWidth || 800;
+      const newHeight = container.clientHeight || 600;
+      camera.aspect = newWidth / newHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(newWidth, newHeight);
+    });
+    resizeObserver.observe(container);
+    const cleanup = () => {
+      cancelAnimationFrame(animId);
+      resizeObserver.disconnect();
+      controls.dispose();
+      renderer.dispose();
+      materials.forEach((m) => m.dispose());
+      meshGroup.traverse((child) => {
+        if (child.geometry) {
+          child.geometry.dispose();
+        }
+      });
+      container.innerHTML = "";
+    };
+    ctx.signal.addEventListener("abort", cleanup);
+    return {
+      destroy: cleanup,
+      zoomIn: () => {
+        camera.position.multiplyScalar(0.85);
+        controls.update();
+      },
+      zoomOut: () => {
+        camera.position.multiplyScalar(1.15);
+        controls.update();
+      },
+      fitToPage: fitCamera,
+      rotateCW: () => {
+        isWireframe = !isWireframe;
+        materials.forEach((m) => {
+          m.wireframe = isWireframe;
+        });
+      },
+      download: () => {
+        downloadFile(ctx.buffer, ctx.metadata.name || `model${ext || ".stl"}`);
+      }
+    };
+  }
+};
+function threeDPlugin() {
+  return new ThreeDPlugin();
+}
 
 // src/index.ts
 function getDefaultPlugins() {
@@ -1767,7 +2587,11 @@ function getDefaultPlugins() {
     mediaPlugin(),
     docxPlugin(),
     excelPlugin(),
+    pptxPlugin(),
     csvPlugin(),
+    archivePlugin(),
+    markdownPlugin(),
+    threeDPlugin(),
     codePlugin()
   ];
 }