@files-preview-app/preview-file 1.0.0

package/dist/vue.cjs

@@ -0,0 +1,1832 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var DOMPurify = require('dompurify');
+var docx = require('docx-preview');
+var ExcelJS = require('exceljs');
+var hljs = require('highlight.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
+var docx__namespace = /*#__PURE__*/_interopNamespace(docx);
+var ExcelJS__default = /*#__PURE__*/_interopDefault(ExcelJS);
+var hljs__default = /*#__PURE__*/_interopDefault(hljs);
+
+// src/vue.ts
+var EventEmitter = class {
+  listeners = /* @__PURE__ */ new Map();
+  /**
+   * Subscribe to an event.
+   * @returns An unsubscribe function.
+   */
+  on(event, handler) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(event).add(handler);
+    return () => this.off(event, handler);
+  }
+  /**
+   * Unsubscribe from an event.
+   */
+  off(event, handler) {
+    const handlers = this.listeners.get(event);
+    if (handlers) {
+      handlers.delete(handler);
+      if (handlers.size === 0) {
+        this.listeners.delete(event);
+      }
+    }
+  }
+  /**
+   * Emit an event with optional payload.
+   */
+  emit(event, data) {
+    const handlers = this.listeners.get(event);
+    if (handlers) {
+      for (const handler of handlers) {
+        try {
+          handler(data);
+        } catch (error) {
+          console.error(`[FilePreview] Error in '${event}' handler:`, error);
+        }
+      }
+    }
+  }
+  /**
+   * Remove all listeners, optionally for a specific event.
+   */
+  removeAll(event) {
+    if (event) {
+      this.listeners.delete(event);
+    } else {
+      this.listeners.clear();
+    }
+  }
+  /**
+   * Get the count of listeners for a specific event.
+   */
+  listenerCount(event) {
+    return this.listeners.get(event)?.size ?? 0;
+  }
+};
+var MAGIC_NUMBERS = [
+  { bytes: [37, 80, 68, 70], mime: "application/pdf" },
+  // %PDF
+  { bytes: [80, 75, 3, 4], mime: "application/zip" },
+  // PK.. (ZIP/DOCX/XLSX/PPTX)
+  { bytes: [137, 80, 78, 71, 13, 10, 26, 10], mime: "image/png" },
+  // PNG
+  { bytes: [255, 216, 255], mime: "image/jpeg" },
+  // JPEG
+  { bytes: [71, 73, 70, 56], mime: "image/gif" },
+  // GIF87a/GIF89a
+  { bytes: [66, 77], mime: "image/bmp" },
+  // BMP
+  { bytes: [0, 0, 1, 0], mime: "image/x-icon" },
+  // ICO
+  { bytes: [73, 73, 42, 0], mime: "image/tiff" },
+  // TIFF (LE)
+  { bytes: [77, 77, 0, 42], mime: "image/tiff" },
+  // TIFF (BE)
+  { bytes: [26, 69, 223, 163], mime: "video/webm" },
+  // WebM/MKV
+  { bytes: [102, 116, 121, 112], mime: "video/mp4", offset: 4 },
+  // MP4 (ftyp)
+  { bytes: [73, 68, 51], mime: "audio/mpeg" },
+  // MP3 (ID3)
+  { bytes: [255, 251], mime: "audio/mpeg" },
+  // MP3 (sync)
+  { bytes: [255, 243], mime: "audio/mpeg" },
+  // MP3 (sync)
+  { bytes: [79, 103, 103, 83], mime: "audio/ogg" },
+  // OGG
+  { bytes: [82, 73, 70, 70], mime: "audio/wav" },
+  // WAV/RIFF (also WebP)
+  { bytes: [102, 76, 97, 67], mime: "audio/flac" },
+  // FLAC
+  { bytes: [123, 92, 114, 116, 102], mime: "text/rtf" }
+  // RTF
+];
+var EXTENSION_MIME_MAP = {
+  // Documents
+  ".pdf": "application/pdf",
+  ".docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  ".xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  ".xls": "application/vnd.ms-excel",
+  ".pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  ".csv": "text/csv",
+  ".tsv": "text/tab-separated-values",
+  // Images
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+  ".bmp": "image/bmp",
+  ".svg": "image/svg+xml",
+  ".ico": "image/x-icon",
+  ".tiff": "image/tiff",
+  ".tif": "image/tiff",
+  // Media
+  ".mp4": "video/mp4",
+  ".webm": "video/webm",
+  ".ogg": "audio/ogg",
+  ".ogv": "video/ogg",
+  ".mov": "video/quicktime",
+  ".mp3": "audio/mpeg",
+  ".wav": "audio/wav",
+  ".aac": "audio/aac",
+  ".flac": "audio/flac",
+  // Code/Text
+  ".txt": "text/plain",
+  ".log": "text/plain",
+  ".json": "application/json",
+  ".xml": "application/xml",
+  ".html": "text/html",
+  ".htm": "text/html",
+  ".css": "text/css",
+  ".js": "text/javascript",
+  ".ts": "text/typescript",
+  ".jsx": "text/jsx",
+  ".tsx": "text/tsx",
+  ".py": "text/x-python",
+  ".java": "text/x-java",
+  ".c": "text/x-c",
+  ".cpp": "text/x-c++",
+  ".h": "text/x-c",
+  ".go": "text/x-go",
+  ".rs": "text/x-rust",
+  ".rb": "text/x-ruby",
+  ".php": "text/x-php",
+  ".sh": "text/x-shellscript",
+  ".bash": "text/x-shellscript",
+  ".sql": "text/x-sql",
+  ".yaml": "text/yaml",
+  ".yml": "text/yaml",
+  ".toml": "text/toml",
+  ".ini": "text/ini",
+  ".conf": "text/plain",
+  ".env": "text/plain",
+  ".md": "text/markdown",
+  ".scss": "text/x-scss",
+  ".less": "text/x-less",
+  ".vue": "text/x-vue",
+  ".svelte": "text/x-svelte",
+  ".dart": "text/x-dart",
+  ".kt": "text/x-kotlin",
+  ".swift": "text/x-swift",
+  ".r": "text/x-r",
+  ".scala": "text/x-scala",
+  ".lua": "text/x-lua",
+  ".perl": "text/x-perl",
+  ".pl": "text/x-perl"
+};
+function detectMagicBytes(buffer) {
+  const bytes = new Uint8Array(buffer.slice(0, 16));
+  for (const sig of MAGIC_NUMBERS) {
+    const offset = sig.offset ?? 0;
+    let match = true;
+    for (let i = 0; i < sig.bytes.length; i++) {
+      const actual = bytes[offset + i];
+      const expected = sig.bytes[i];
+      const mask = sig.mask?.[i] ?? 255;
+      if ((actual & mask) !== expected) {
+        match = false;
+        break;
+      }
+    }
+    if (match) {
+      if (sig.mime === "audio/wav" && bytes.length >= 12) {
+        const format = String.fromCharCode(bytes[8], bytes[9], bytes[10], bytes[11]);
+        if (format === "WEBP") return "image/webp";
+        if (format === "AVI ") return "video/x-msvideo";
+        return "audio/wav";
+      }
+      return sig.mime;
+    }
+  }
+  return null;
+}
+function detectOoxmlType(buffer) {
+  const text = new TextDecoder("ascii", { fatal: false }).decode(
+    new Uint8Array(buffer.slice(0, 4e3))
+  );
+  if (text.includes("word/")) {
+    return "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+  }
+  if (text.includes("xl/")) {
+    return "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+  }
+  if (text.includes("ppt/")) {
+    return "application/vnd.openxmlformats-officedocument.presentationml.presentation";
+  }
+  return "application/zip";
+}
+function extractExtension(nameOrUrl) {
+  try {
+    const url = new URL(nameOrUrl);
+    const pathname = url.pathname;
+    const dotIndex = pathname.lastIndexOf(".");
+    if (dotIndex !== -1) {
+      return pathname.slice(dotIndex).toLowerCase().split("?")[0];
+    }
+  } catch {
+    const dotIndex = nameOrUrl.lastIndexOf(".");
+    if (dotIndex !== -1) {
+      return nameOrUrl.slice(dotIndex).toLowerCase();
+    }
+  }
+  return void 0;
+}
+function mimeFromExtension(extension) {
+  return EXTENSION_MIME_MAP[extension.toLowerCase()];
+}
+async function sourceToArrayBuffer(source, signal) {
+  let buffer;
+  const metadata = {};
+  if (typeof source === "string") {
+    metadata.name = source.split("/").pop()?.split("?")[0];
+    metadata.extension = extractExtension(source);
+    const response = await fetch(source, { signal });
+    if (!response.ok) {
+      throw new Error(`Failed to fetch file: ${response.status} ${response.statusText}`);
+    }
+    metadata.mimeType = response.headers.get("content-type") ?? void 0;
+    buffer = await response.arrayBuffer();
+  } else if (source instanceof File) {
+    metadata.name = source.name;
+    metadata.size = source.size;
+    metadata.mimeType = source.type || void 0;
+    metadata.extension = extractExtension(source.name);
+    buffer = await source.arrayBuffer();
+  } else if (source instanceof Blob) {
+    metadata.size = source.size;
+    metadata.mimeType = source.type || void 0;
+    buffer = await source.arrayBuffer();
+  } else if (source instanceof ArrayBuffer) {
+    buffer = source;
+  } else if (source instanceof Uint8Array) {
+    buffer = source.buffer.slice(
+      source.byteOffset,
+      source.byteOffset + source.byteLength
+    );
+  } else {
+    throw new Error("Unsupported file source type");
+  }
+  metadata.size = metadata.size ?? buffer.byteLength;
+  const magicMime = detectMagicBytes(buffer);
+  if (magicMime) {
+    if (magicMime === "application/zip") {
+      const ooxmlMime = detectOoxmlType(buffer);
+      if (ooxmlMime && ooxmlMime !== "application/zip") {
+        metadata.mimeType = ooxmlMime;
+        if (ooxmlMime.includes("wordprocessing")) metadata.extension = metadata.extension ?? ".docx";
+        else if (ooxmlMime.includes("spreadsheet")) metadata.extension = metadata.extension ?? ".xlsx";
+        else if (ooxmlMime.includes("presentation")) metadata.extension = metadata.extension ?? ".pptx";
+      } else {
+        metadata.mimeType = metadata.mimeType ?? magicMime;
+      }
+    } else {
+      metadata.mimeType = magicMime;
+    }
+  }
+  if (!metadata.mimeType && metadata.extension) {
+    metadata.mimeType = mimeFromExtension(metadata.extension);
+  }
+  return { buffer, metadata };
+}
+function sanitizeSVG(svg) {
+  return DOMPurify__default.default.sanitize(svg, {
+    USE_PROFILES: { svg: true, svgFilters: true }
+  });
+}
+function createElement(tag, attrs, ...children) {
+  const el = document.createElement(tag);
+  if (attrs) {
+    for (const [key, value] of Object.entries(attrs)) {
+      if (key === "className") {
+        el.className = value;
+      } else {
+        el.setAttribute(key, value);
+      }
+    }
+  }
+  for (const child of children) {
+    if (typeof child === "string") {
+      el.appendChild(document.createTextNode(child));
+    } else {
+      el.appendChild(child);
+    }
+  }
+  return el;
+}
+var ICON_PAGE_PREV = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>`;
+var ICON_PAGE_NEXT = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>`;
+var ToolbarController = class {
+  el;
+  toolbarEl;
+  actions = [];
+  constructor(container) {
+    this.el = container;
+    this.toolbarEl = createElement("div", { className: "fp-toolbar" });
+    this.el.appendChild(this.toolbarEl);
+  }
+  update(actions) {
+    this.actions = actions;
+    this.render();
+  }
+  show() {
+    this.el.style.display = "block";
+  }
+  hide() {
+    this.el.style.display = "none";
+  }
+  destroy() {
+    this.el.innerHTML = "";
+  }
+  render() {
+    this.toolbarEl.innerHTML = "";
+    const groups = {
+      navigation: [],
+      zoom: [],
+      view: [],
+      actions: []
+    };
+    for (const action of this.actions) {
+      if (groups[action.group]) {
+        groups[action.group].push(action);
+      }
+    }
+    const order = ["navigation", "zoom", "view", "actions"];
+    let isFirstGroup = true;
+    for (const group of order) {
+      const groupActions = groups[group];
+      if (groupActions.length === 0) continue;
+      if (!isFirstGroup) {
+        this.toolbarEl.appendChild(createElement("div", { className: "fp-toolbar-separator" }));
+      }
+      isFirstGroup = false;
+      const groupEl = createElement("div", { className: "fp-toolbar-group" });
+      for (const action of groupActions) {
+        if (action.type === "separator") {
+          groupEl.appendChild(createElement("div", { className: "fp-toolbar-separator" }));
+        } else if (action.type === "page-nav") {
+          const prevBtn = this.createButton(
+            "prev",
+            ICON_PAGE_PREV,
+            "Previous Page",
+            () => action.execute("prev")
+          );
+          const nextBtn = this.createButton(
+            "next",
+            ICON_PAGE_NEXT,
+            "Next Page",
+            () => action.execute("next")
+          );
+          const input = createElement("input", {
+            className: "fp-toolbar-input",
+            type: "number",
+            value: (action.value ?? 1).toString(),
+            min: "1",
+            max: (action.max ?? 1).toString()
+          });
+          input.addEventListener("change", () => {
+            action.execute("go", parseInt(input.value, 10));
+          });
+          const label = createElement("span", { className: "fp-toolbar-label" }, ` / ${action.max ?? 1}`);
+          groupEl.appendChild(prevBtn);
+          groupEl.appendChild(input);
+          groupEl.appendChild(label);
+          groupEl.appendChild(nextBtn);
+        } else if (action.type === "range") {
+          const input = createElement("input", {
+            type: "range",
+            min: (action.min ?? 0).toString(),
+            max: (action.max ?? 100).toString(),
+            step: (action.step ?? 1).toString(),
+            value: (action.value ?? 50).toString()
+          });
+          input.addEventListener("input", () => {
+            action.execute(parseFloat(input.value));
+          });
+          groupEl.appendChild(input);
+        } else {
+          const btn = this.createButton(
+            action.id,
+            action.icon,
+            action.label,
+            () => action.execute()
+          );
+          if (action.enabled === false) btn.disabled = true;
+          if (action.active) btn.classList.add("active");
+          groupEl.appendChild(btn);
+        }
+      }
+      this.toolbarEl.appendChild(groupEl);
+    }
+  }
+  createButton(id, iconHtml, title, onClick) {
+    const btn = createElement("button", {
+      className: "fp-toolbar-btn",
+      title,
+      type: "button",
+      "data-action-id": id
+    });
+    if (iconHtml.startsWith("<svg")) {
+      btn.innerHTML = sanitizeSVG(iconHtml);
+    } else {
+      btn.textContent = iconHtml;
+    }
+    btn.addEventListener("click", onClick);
+    return btn;
+  }
+};
+var ThumbnailPanel = class {
+  el;
+  panelEl;
+  thumbnails = [];
+  onSelect;
+  activeIndex = 0;
+  constructor(container) {
+    this.el = container;
+    this.panelEl = createElement("div", { className: "fp-thumbnail-panel hidden" });
+    this.el.appendChild(this.panelEl);
+  }
+  update(thumbnails, onSelect) {
+    this.thumbnails = thumbnails;
+    this.onSelect = onSelect;
+    this.render();
+  }
+  setActive(index) {
+    this.activeIndex = index;
+    const items = this.panelEl.querySelectorAll(".fp-thumbnail-item");
+    items.forEach((item, i) => {
+      if (i === index) {
+        item.classList.add("active");
+      } else {
+        item.classList.remove("active");
+      }
+    });
+  }
+  show() {
+    this.panelEl.classList.remove("hidden");
+  }
+  hide() {
+    this.panelEl.classList.add("hidden");
+  }
+  toggle() {
+    this.panelEl.classList.toggle("hidden");
+  }
+  destroy() {
+    this.el.innerHTML = "";
+  }
+  async render() {
+    this.panelEl.innerHTML = "";
+    for (let i = 0; i < this.thumbnails.length; i++) {
+      const thumb = this.thumbnails[i];
+      const itemEl = createElement("div", { className: "fp-thumbnail-item" });
+      if (i === this.activeIndex) {
+        itemEl.classList.add("active");
+      }
+      itemEl.addEventListener("click", () => {
+        this.setActive(i);
+        this.onSelect?.(i);
+      });
+      const canvas = createElement("canvas", { width: "150", height: "200" });
+      const label = createElement("span", { className: "fp-thumbnail-label" }, thumb.label);
+      itemEl.appendChild(canvas);
+      itemEl.appendChild(label);
+      this.panelEl.appendChild(itemEl);
+      try {
+        await thumb.render(canvas);
+      } catch (err) {
+        console.error(`[FilePreview] Error rendering thumbnail ${i}:`, err);
+      }
+    }
+  }
+};
+var FilePreviewViewer = class {
+  plugins = [];
+  activeInstance = null;
+  abortController = null;
+  eventEmitter = new EventEmitter();
+  toolbar = null;
+  thumbnailPanel = null;
+  wrapperEl = null;
+  contentEl = null;
+  currentBuffer = null;
+  currentMetadata = null;
+  /**
+   * Register a preview plugin.
+   */
+  registerPlugin(plugin) {
+    this.plugins.push(plugin);
+    this.plugins.sort((a, b) => (b.weight ?? 0) - (a.weight ?? 0));
+    return this;
+  }
+  /**
+   * Register multiple plugins at once.
+   */
+  registerPlugins(plugins) {
+    for (const plugin of plugins) {
+      this.registerPlugin(plugin);
+    }
+    return this;
+  }
+  /**
+   * Preview a file in the given container element.
+   */
+  async preview(container, source, options = {}) {
+    this.abort();
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
+    this.destroyInstance();
+    this.setupDOM(container, options);
+    this.eventEmitter.emit("loading", { source });
+    this.showLoading();
+    try {
+      const { buffer, metadata } = await sourceToArrayBuffer(source, signal);
+      this.currentBuffer = buffer;
+      this.currentMetadata = metadata;
+      if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+      const fileInfo = { metadata, buffer };
+      const matchedPlugin = await this.findPlugin(fileInfo);
+      if (!matchedPlugin) {
+        throw new Error(
+          `Unsupported file type: ${metadata.extension ?? metadata.mimeType ?? "unknown"}`
+        );
+      }
+      if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+      if (this.contentEl) {
+        this.contentEl.innerHTML = "";
+      }
+      const instance = await matchedPlugin.render({
+        container: this.contentEl,
+        source,
+        metadata,
+        buffer,
+        options,
+        signal,
+        emit: (event, payload) => this.eventEmitter.emit(event, payload)
+      });
+      this.activeInstance = instance;
+      if (options.showToolbar !== false && this.toolbar) {
+        const actions = matchedPlugin.getToolbarActions(instance);
+        this.toolbar.update(actions);
+        this.toolbar.show();
+      }
+      if (instance.getThumbnails && this.thumbnailPanel) {
+        const thumbnails = await Promise.resolve(instance.getThumbnails());
+        if (thumbnails && thumbnails.length > 0) {
+          this.thumbnailPanel.update(thumbnails, (index) => {
+            instance.goToPage?.(index + 1);
+          });
+          if (options.showThumbnails) {
+            this.thumbnailPanel.show();
+          }
+        }
+      }
+      this.hideLoading();
+      this.eventEmitter.emit("loaded", { metadata, plugin: matchedPlugin.id });
+      return instance;
+    } catch (error) {
+      this.hideLoading();
+      if (error instanceof DOMException && error.name === "AbortError") {
+        throw error;
+      }
+      this.showError(error instanceof Error ? error.message : "Failed to preview file");
+      this.eventEmitter.emit("error", error);
+      throw error;
+    }
+  }
+  /**
+   * Subscribe to viewer events.
+   */
+  on(event, handler) {
+    return this.eventEmitter.on(event, handler);
+  }
+  /**
+   * Destroy the viewer and clean up all resources.
+   */
+  destroy() {
+    this.abort();
+    this.destroyInstance();
+    this.toolbar?.destroy();
+    this.thumbnailPanel?.destroy();
+    this.eventEmitter.emit("destroy", null);
+    this.eventEmitter.removeAll();
+    if (this.wrapperEl?.parentNode) {
+      this.wrapperEl.parentNode.removeChild(this.wrapperEl);
+    }
+    this.wrapperEl = null;
+    this.contentEl = null;
+    this.toolbar = null;
+    this.thumbnailPanel = null;
+    this.currentBuffer = null;
+    this.currentMetadata = null;
+  }
+  /**
+   * Get the currently active preview instance.
+   */
+  getInstance() {
+    return this.activeInstance;
+  }
+  // --- Private methods ---
+  abort() {
+    if (this.abortController) {
+      this.abortController.abort();
+      this.abortController = null;
+    }
+  }
+  destroyInstance() {
+    if (this.activeInstance) {
+      this.activeInstance.destroy();
+      this.activeInstance = null;
+    }
+  }
+  async findPlugin(fileInfo) {
+    for (const plugin of this.plugins) {
+      const result = plugin.supports(fileInfo);
+      const supports = result instanceof Promise ? await result : result;
+      if (supports) return plugin;
+    }
+    return null;
+  }
+  setupDOM(container, options) {
+    if (this.wrapperEl?.parentNode === container) return;
+    if (this.wrapperEl?.parentNode) {
+      this.wrapperEl.parentNode.removeChild(this.wrapperEl);
+    }
+    const themeClass = options.theme === "dark" ? "fp-theme-dark" : "";
+    const toolbarPos = options.toolbarPosition ?? "top";
+    this.wrapperEl = document.createElement("div");
+    this.wrapperEl.className = `fp-viewer ${themeClass} ${options.className ?? ""}`.trim();
+    const toolbarEl = document.createElement("div");
+    toolbarEl.className = "fp-toolbar-container";
+    this.contentEl = document.createElement("div");
+    this.contentEl.className = "fp-content";
+    const thumbnailEl = document.createElement("div");
+    thumbnailEl.className = "fp-thumbnail-container";
+    const bodyEl = document.createElement("div");
+    bodyEl.className = "fp-body";
+    bodyEl.appendChild(thumbnailEl);
+    bodyEl.appendChild(this.contentEl);
+    if (toolbarPos === "top") {
+      this.wrapperEl.appendChild(toolbarEl);
+      this.wrapperEl.appendChild(bodyEl);
+    } else {
+      this.wrapperEl.appendChild(bodyEl);
+      this.wrapperEl.appendChild(toolbarEl);
+    }
+    container.innerHTML = "";
+    container.appendChild(this.wrapperEl);
+    this.toolbar = new ToolbarController(toolbarEl);
+    this.thumbnailPanel = new ThumbnailPanel(thumbnailEl);
+  }
+  showLoading() {
+    if (!this.contentEl) return;
+    const loader = document.createElement("div");
+    loader.className = "fp-loading";
+    loader.innerHTML = '<div class="fp-spinner"></div><span>Loading preview...</span>';
+    this.contentEl.appendChild(loader);
+  }
+  hideLoading() {
+    if (!this.contentEl) return;
+    const loader = this.contentEl.querySelector(".fp-loading");
+    if (loader) loader.remove();
+  }
+  showError(message) {
+    if (!this.contentEl) return;
+    this.contentEl.innerHTML = "";
+    const errorEl = document.createElement("div");
+    errorEl.className = "fp-error";
+    errorEl.innerHTML = `
+      <div class="fp-error-icon">\u26A0\uFE0F</div>
+      <div class="fp-error-message">${message}</div>
+    `;
+    this.contentEl.appendChild(errorEl);
+  }
+};
+
+// ../plugins/pdf/dist/index.js
+var PdfPlugin = class {
+  id = "pdf";
+  name = "PDF Preview";
+  extensions = [".pdf"];
+  mimeTypes = ["application/pdf"];
+  weight = 100;
+  supports(file) {
+    const ext = file.metadata.extension?.toLowerCase();
+    const mime = file.metadata.mimeType?.toLowerCase();
+    return ext === ".pdf" || mime === "application/pdf";
+  }
+  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: "Fit to Page",
+        type: "button",
+        group: "zoom",
+        execute: () => {
+          instance.fitToPage?.();
+        }
+      },
+      {
+        id: "rotate-cw",
+        icon: "rotate-cw",
+        label: "Rotate",
+        type: "button",
+        group: "view",
+        execute: () => {
+          instance.rotateCW?.();
+        }
+      },
+      {
+        id: "page-nav",
+        icon: "page-nav",
+        label: "Page Navigation",
+        type: "page-nav",
+        group: "navigation",
+        execute: (page) => {
+          if (typeof page === "number") instance.goToPage?.(page);
+        }
+      },
+      {
+        id: "download",
+        icon: "download",
+        label: "Download",
+        type: "button",
+        group: "actions",
+        execute: () => {
+          instance.download?.();
+        }
+      },
+      {
+        id: "print",
+        icon: "print",
+        label: "Print",
+        type: "button",
+        group: "actions",
+        execute: () => {
+          instance.print?.();
+        }
+      }
+    ];
+  }
+  async render(ctx) {
+    const blob = new Blob([ctx.buffer], { type: "application/pdf" });
+    const url = URL.createObjectURL(blob);
+    const wrapper = document.createElement("div");
+    wrapper.style.width = "100%";
+    wrapper.style.height = "100%";
+    wrapper.style.overflow = "hidden";
+    wrapper.style.display = "flex";
+    wrapper.style.justifyContent = "center";
+    wrapper.style.alignItems = "center";
+    const iframe = document.createElement("iframe");
+    iframe.src = url;
+    iframe.style.width = "100%";
+    iframe.style.height = "100%";
+    iframe.style.border = "none";
+    wrapper.appendChild(iframe);
+    ctx.container.appendChild(wrapper);
+    let currentPage = 1;
+    let currentZoom = 1;
+    let rotation = 0;
+    const cleanup = () => {
+      URL.revokeObjectURL(url);
+      wrapper.remove();
+      ctx.container.innerHTML = "";
+    };
+    ctx.signal.addEventListener("abort", cleanup);
+    return {
+      destroy: cleanup,
+      zoomIn: () => {
+        currentZoom += 0.1;
+        iframe.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+      },
+      zoomOut: () => {
+        currentZoom = Math.max(0.2, currentZoom - 0.1);
+        iframe.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+      },
+      getZoom: () => currentZoom,
+      setZoom: (level) => {
+        currentZoom = level;
+        iframe.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+      },
+      fitToPage: () => {
+        currentZoom = 1;
+        iframe.style.transform = `scale(1) rotate(${rotation}deg)`;
+      },
+      rotateCW: () => {
+        rotation = (rotation + 90) % 360;
+        iframe.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+      },
+      rotateCCW: () => {
+        rotation = (rotation - 90 + 360) % 360;
+        iframe.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+      },
+      getRotation: () => rotation,
+      goToPage: (page) => {
+        currentPage = page;
+        iframe.src = `${url}#page=${page}`;
+      },
+      getCurrentPage: () => currentPage,
+      download: () => {
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = ctx.metadata.name || "document.pdf";
+        a.click();
+      },
+      print: () => {
+        iframe.contentWindow?.print();
+      },
+      getThumbnails: async () => {
+        return [
+          {
+            index: 1,
+            label: "Page 1",
+            render: async (canvas) => {
+              const context = canvas.getContext("2d");
+              if (context) {
+                context.fillStyle = "#fff";
+                context.fillRect(0, 0, canvas.width, canvas.height);
+                context.fillStyle = "#333";
+                context.font = "12px sans-serif";
+                context.fillText("PDF Preview", 10, 20);
+              }
+            }
+          }
+        ];
+      }
+    };
+  }
+};
+function pdfPlugin() {
+  return new 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 MediaPlugin = class {
+  id = "media";
+  name = "Media Preview";
+  extensions = [...IMAGE_EXTS, ...VIDEO_EXTS, ...AUDIO_EXTS];
+  mimeTypes = [
+    "image/jpeg",
+    "image/png",
+    "image/gif",
+    "image/webp",
+    "image/svg+xml",
+    "video/mp4",
+    "video/webm",
+    "video/ogg",
+    "audio/mpeg",
+    "audio/wav",
+    "audio/ogg"
+  ];
+  weight = 90;
+  supports(file) {
+    const ext = file.metadata.extension?.toLowerCase() || "";
+    const mime = file.metadata.mimeType?.toLowerCase() || "";
+    return this.extensions.includes(ext) || this.mimeTypes.some((m) => mime.startsWith(m.split("/")[0]));
+  }
+  getToolbarActions(instance) {
+    const actions = [];
+    if (instance.zoomIn) {
+      actions.push(
+        {
+          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 Page",
+          type: "button",
+          group: "zoom",
+          execute: () => {
+            instance.fitToPage?.();
+          }
+        },
+        {
+          id: "rotate-cw",
+          icon: "rotate-cw",
+          label: "Rotate",
+          type: "button",
+          group: "view",
+          execute: () => {
+            instance.rotateCW?.();
+          }
+        }
+      );
+    }
+    if (instance.play) {
+      actions.push(
+        {
+          id: "play",
+          icon: "play",
+          label: "Play",
+          type: "button",
+          group: "actions",
+          execute: () => {
+            instance.play?.();
+          }
+        },
+        {
+          id: "pause",
+          icon: "pause",
+          label: "Pause",
+          type: "button",
+          group: "actions",
+          execute: () => {
+            instance.pause?.();
+          }
+        }
+      );
+    }
+    actions.push({
+      id: "download",
+      icon: "download",
+      label: "Download",
+      type: "button",
+      group: "actions",
+      execute: () => {
+        instance.download?.();
+      }
+    });
+    if (instance.print) {
+      actions.push({
+        id: "print",
+        icon: "print",
+        label: "Print",
+        type: "button",
+        group: "actions",
+        execute: () => {
+          instance.print?.();
+        }
+      });
+    }
+    return actions;
+  }
+  async render(ctx) {
+    const mimeType = ctx.metadata.mimeType || "application/octet-stream";
+    const isImage = mimeType.startsWith("image/") || IMAGE_EXTS.includes(ctx.metadata.extension || "");
+    const isVideo = mimeType.startsWith("video/") || VIDEO_EXTS.includes(ctx.metadata.extension || "");
+    const isAudio = mimeType.startsWith("audio/") || AUDIO_EXTS.includes(ctx.metadata.extension || "");
+    let url = "";
+    if (ctx.metadata.extension === ".svg" || mimeType === "image/svg+xml") {
+      const decoder = new TextDecoder("utf-8");
+      const svgText = decoder.decode(ctx.buffer);
+      const blob = new Blob([svgText], { type: "image/svg+xml" });
+      url = URL.createObjectURL(blob);
+    } else {
+      const blob = new Blob([ctx.buffer], { type: mimeType });
+      url = URL.createObjectURL(blob);
+    }
+    let element;
+    let currentZoom = 1;
+    let rotation = 0;
+    let mediaElement = null;
+    if (isImage) {
+      const img = document.createElement("img");
+      img.src = url;
+      img.style.maxWidth = "100%";
+      img.style.maxHeight = "100%";
+      img.style.objectFit = "contain";
+      img.style.transition = "transform 0.2s ease";
+      element = img;
+    } else if (isVideo) {
+      const video = document.createElement("video");
+      video.src = url;
+      video.controls = true;
+      video.style.maxWidth = "100%";
+      video.style.maxHeight = "100%";
+      element = video;
+      mediaElement = video;
+    } else if (isAudio) {
+      const audio = document.createElement("audio");
+      audio.src = url;
+      audio.controls = true;
+      element = audio;
+      mediaElement = audio;
+    } else {
+      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 applyTransform = () => {
+      element.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
+    };
+    const cleanup = () => {
+      if (url) URL.revokeObjectURL(url);
+      element.remove();
+      ctx.container.innerHTML = "";
+    };
+    ctx.signal.addEventListener("abort", cleanup);
+    return {
+      destroy: cleanup,
+      zoomIn: isImage ? () => {
+        currentZoom += 0.1;
+        applyTransform();
+      } : void 0,
+      zoomOut: isImage ? () => {
+        currentZoom = Math.max(0.1, currentZoom - 0.1);
+        applyTransform();
+      } : void 0,
+      getZoom: isImage ? () => currentZoom : void 0,
+      setZoom: isImage ? (level) => {
+        currentZoom = level;
+        applyTransform();
+      } : void 0,
+      fitToPage: isImage ? () => {
+        currentZoom = 1;
+        rotation = 0;
+        applyTransform();
+      } : void 0,
+      rotateCW: isImage || isVideo ? () => {
+        rotation = (rotation + 90) % 360;
+        applyTransform();
+      } : void 0,
+      rotateCCW: isImage || isVideo ? () => {
+        rotation = (rotation - 90 + 360) % 360;
+        applyTransform();
+      } : void 0,
+      getRotation: () => rotation,
+      play: mediaElement ? () => mediaElement?.play() : void 0,
+      pause: mediaElement ? () => mediaElement?.pause() : void 0,
+      isPlaying: mediaElement ? () => !mediaElement?.paused : void 0,
+      download: () => {
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = ctx.metadata.name || "media";
+        a.click();
+      },
+      print: isImage ? () => {
+        window.print();
+      } : void 0
+    };
+  }
+};
+function mediaPlugin() {
+  return new MediaPlugin();
+}
+var DocxPlugin = class {
+  id = "docx";
+  name = "Word Document Preview";
+  extensions = [".docx"];
+  mimeTypes = ["application/vnd.openxmlformats-officedocument.wordprocessingml.document"];
+  weight = 80;
+  supports(file) {
+    const ext = file.metadata.extension?.toLowerCase();
+    const mime = file.metadata.mimeType?.toLowerCase();
+    return ext === ".docx" || 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: "Fit to Page",
+        type: "button",
+        group: "zoom",
+        execute: () => {
+          instance.fitToPage?.();
+        }
+      },
+      {
+        id: "download",
+        icon: "download",
+        label: "Download",
+        type: "button",
+        group: "actions",
+        execute: () => {
+          instance.download?.();
+        }
+      },
+      {
+        id: "print",
+        icon: "print",
+        label: "Print",
+        type: "button",
+        group: "actions",
+        execute: () => {
+          instance.print?.();
+        }
+      }
+    ];
+  }
+  async render(ctx) {
+    const wrapper = document.createElement("div");
+    wrapper.className = "fp-docx-wrapper";
+    wrapper.style.transformOrigin = "top center";
+    wrapper.style.transition = "transform 0.2s ease";
+    wrapper.style.padding = "16px";
+    ctx.container.style.overflow = "auto";
+    ctx.container.appendChild(wrapper);
+    let scale = 1;
+    try {
+      await docx__namespace.renderAsync(ctx.buffer, wrapper, ctx.container, {
+        inWrapper: true,
+        ignoreWidth: false,
+        ignoreHeight: false
+      });
+    } 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>
+      `;
+    }
+    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.2, 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: () => {
+        const blob = new Blob([ctx.buffer], { type: this.mimeTypes[0] });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = ctx.metadata.name || "document.docx";
+        a.click();
+        URL.revokeObjectURL(url);
+      },
+      print: () => {
+        window.print();
+      }
+    };
+  }
+};
+function docxPlugin() {
+  return new DocxPlugin();
+}
+var ExcelPlugin = class {
+  id = "excel";
+  name = "Excel Spreadsheet Preview";
+  extensions = [".xlsx", ".xls"];
+  mimeTypes = [
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    "application/vnd.ms-excel"
+  ];
+  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: "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: "page-nav",
+        icon: "page-nav",
+        label: "Sheet Navigation",
+        type: "page-nav",
+        group: "navigation",
+        execute: (sheet) => {
+          if (typeof sheet === "number") instance.goToPage?.(sheet);
+        }
+      },
+      {
+        id: "download",
+        icon: "download",
+        label: "Download",
+        type: "button",
+        group: "actions",
+        execute: () => {
+          instance.download?.();
+        }
+      },
+      {
+        id: "print",
+        icon: "print",
+        label: "Print",
+        type: "button",
+        group: "actions",
+        execute: () => {
+          instance.print?.();
+        }
+      }
+    ];
+  }
+  async render(ctx) {
+    const container = document.createElement("div");
+    container.style.display = "flex";
+    container.style.flexDirection = "column";
+    container.style.width = "100%";
+    container.style.height = "100%";
+    container.style.overflow = "hidden";
+    const contentArea = document.createElement("div");
+    contentArea.style.flex = "1";
+    contentArea.style.overflow = "auto";
+    contentArea.style.padding = "16px";
+    contentArea.style.transformOrigin = "top left";
+    const tabsArea = document.createElement("div");
+    tabsArea.style.display = "flex";
+    tabsArea.style.gap = "8px";
+    tabsArea.style.padding = "8px 16px";
+    tabsArea.style.borderTop = "1px solid #e0e0e0";
+    tabsArea.style.backgroundColor = "#fafafa";
+    tabsArea.style.overflowX = "auto";
+    container.appendChild(contentArea);
+    container.appendChild(tabsArea);
+    ctx.container.appendChild(container);
+    let scale = 1;
+    let currentSheetIndex = 1;
+    const workbook = new ExcelJS__default.default.Workbook();
+    try {
+      await workbook.xlsx.load(ctx.buffer);
+    } catch {
+    }
+    const renderSheet = (index) => {
+      contentArea.innerHTML = "";
+      const sheet = workbook.getWorksheet(index);
+      if (!sheet) return;
+      const table = document.createElement("table");
+      table.style.borderCollapse = "collapse";
+      table.style.fontFamily = "sans-serif";
+      table.style.fontSize = "13px";
+      table.style.minWidth = "100%";
+      sheet.eachRow({ includeEmpty: false }, (row) => {
+        const tr = document.createElement("tr");
+        row.eachCell({ includeEmpty: true }, (cell) => {
+          const td = document.createElement("td");
+          td.style.border = "1px solid #d0d7de";
+          td.style.padding = "6px 12px";
+          td.textContent = cell.text || "";
+          tr.appendChild(td);
+        });
+        table.appendChild(tr);
+      });
+      contentArea.appendChild(table);
+      currentSheetIndex = index;
+    };
+    workbook.worksheets.forEach((sheet, idx) => {
+      const btn = document.createElement("button");
+      btn.textContent = sheet.name;
+      btn.style.padding = "4px 12px";
+      btn.style.fontSize = "12px";
+      btn.style.cursor = "pointer";
+      btn.style.border = "1px solid #ccc";
+      btn.style.borderRadius = "4px";
+      btn.style.backgroundColor = "#fff";
+      btn.onclick = () => renderSheet(idx + 1);
+      tabsArea.appendChild(btn);
+    });
+    if (workbook.worksheets.length > 0) {
+      renderSheet(1);
+    }
+    const cleanup = () => {
+      container.remove();
+      ctx.container.innerHTML = "";
+    };
+    ctx.signal.addEventListener("abort", cleanup);
+    return {
+      destroy: cleanup,
+      zoomIn: () => {
+        scale += 0.1;
+        contentArea.style.transform = `scale(${scale})`;
+      },
+      zoomOut: () => {
+        scale = Math.max(0.2, scale - 0.1);
+        contentArea.style.transform = `scale(${scale})`;
+      },
+      getZoom: () => scale,
+      setZoom: (level) => {
+        scale = level;
+        contentArea.style.transform = `scale(${scale})`;
+      },
+      goToPage: (page) => {
+        if (page > 0 && page <= workbook.worksheets.length) {
+          renderSheet(page);
+        }
+      },
+      getPageCount: () => workbook.worksheets.length,
+      getCurrentPage: () => currentSheetIndex,
+      download: () => {
+        const blob = new Blob([ctx.buffer], { type: this.mimeTypes[0] });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = ctx.metadata.name || "spreadsheet.xlsx";
+        a.click();
+        URL.revokeObjectURL(url);
+      },
+      print: () => {
+        window.print();
+      }
+    };
+  }
+};
+function excelPlugin() {
+  return new ExcelPlugin();
+}
+
+// ../plugins/csv/dist/index.js
+var CsvPlugin = class {
+  id = "csv";
+  name = "CSV Preview";
+  extensions = [".csv", ".tsv"];
+  mimeTypes = ["text/csv", "text/tab-separated-values"];
+  weight = 80;
+  supports(file) {
+    const ext = file.metadata.extension?.toLowerCase();
+    const mime = file.metadata.mimeType?.toLowerCase();
+    return ext === ".csv" || ext === ".tsv" || mime === "text/csv" || mime === "text/tab-separated-values";
+  }
+  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: "download",
+        icon: "download",
+        label: "Download",
+        type: "button",
+        group: "actions",
+        execute: () => {
+          instance.download?.();
+        }
+      },
+      {
+        id: "print",
+        icon: "print",
+        label: "Print",
+        type: "button",
+        group: "actions",
+        execute: () => {
+          instance.print?.();
+        }
+      }
+    ];
+  }
+  async render(ctx) {
+    const decoder = new TextDecoder("utf-8");
+    const text = decoder.decode(ctx.buffer);
+    const container = document.createElement("div");
+    container.style.width = "100%";
+    container.style.height = "100%";
+    container.style.overflow = "auto";
+    container.style.padding = "16px";
+    container.style.boxSizing = "border-box";
+    container.style.transformOrigin = "top left";
+    const table = document.createElement("table");
+    table.style.borderCollapse = "collapse";
+    table.style.width = "100%";
+    table.style.fontFamily = "monospace";
+    table.style.fontSize = "13px";
+    const delimiter = ctx.metadata.extension === ".tsv" ? "	" : ",";
+    const rows = text.split(/\r?\n/).slice(0, 500);
+    rows.forEach((row, rowIndex) => {
+      if (!row.trim()) return;
+      const tr = document.createElement("tr");
+      const cells = row.split(delimiter);
+      cells.forEach((cell) => {
+        const td = document.createElement(rowIndex === 0 ? "th" : "td");
+        td.textContent = cell.trim();
+        td.style.border = "1px solid #d0d7de";
+        td.style.padding = "6px 12px";
+        if (rowIndex === 0) {
+          td.style.backgroundColor = "#f6f8fa";
+          td.style.fontWeight = "bold";
+        }
+        tr.appendChild(td);
+      });
+      table.appendChild(tr);
+    });
+    container.appendChild(table);
+    ctx.container.appendChild(container);
+    let scale = 1;
+    const cleanup = () => {
+      container.remove();
+      ctx.container.innerHTML = "";
+    };
+    ctx.signal.addEventListener("abort", cleanup);
+    return {
+      destroy: cleanup,
+      zoomIn: () => {
+        scale += 0.1;
+        container.style.transform = `scale(${scale})`;
+      },
+      zoomOut: () => {
+        scale = Math.max(0.2, scale - 0.1);
+        container.style.transform = `scale(${scale})`;
+      },
+      getZoom: () => scale,
+      setZoom: (level) => {
+        scale = level;
+        container.style.transform = `scale(${scale})`;
+      },
+      fitToPage: () => {
+        scale = 1;
+        container.style.transform = `scale(1)`;
+      },
+      download: () => {
+        const blob = new Blob([ctx.buffer], { type: "text/csv" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = ctx.metadata.name || "data.csv";
+        a.click();
+        URL.revokeObjectURL(url);
+      },
+      print: () => {
+        window.print();
+      }
+    };
+  }
+};
+function csvPlugin() {
+  return new CsvPlugin();
+}
+var CODE_EXTENSIONS = [
+  ".txt",
+  ".json",
+  ".js",
+  ".ts",
+  ".jsx",
+  ".tsx",
+  ".html",
+  ".css",
+  ".scss",
+  ".less",
+  ".md",
+  ".xml",
+  ".yml",
+  ".yaml",
+  ".sh",
+  ".bash",
+  ".py",
+  ".java",
+  ".c",
+  ".cpp",
+  ".h",
+  ".cs",
+  ".go",
+  ".rs",
+  ".sql",
+  ".php"
+];
+var CodePlugin = class {
+  id = "code";
+  name = "Code/Text Preview";
+  extensions = CODE_EXTENSIONS;
+  mimeTypes = ["text/plain", "application/json", "text/javascript", "text/html", "text/css"];
+  weight = 50;
+  supports(file) {
+    const ext = file.metadata.extension?.toLowerCase();
+    const mime = file.metadata.mimeType?.toLowerCase();
+    if (ext && this.extensions.includes(ext)) return true;
+    if (mime && (mime.startsWith("text/") || this.mimeTypes.includes(mime))) return true;
+    return false;
+  }
+  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: "download",
+        icon: "download",
+        label: "Download",
+        type: "button",
+        group: "actions",
+        execute: () => {
+          instance.download?.();
+        }
+      },
+      {
+        id: "print",
+        icon: "print",
+        label: "Print",
+        type: "button",
+        group: "actions",
+        execute: () => {
+          instance.print?.();
+        }
+      }
+    ];
+  }
+  async render(ctx) {
+    const decoder = new TextDecoder("utf-8");
+    const text = decoder.decode(ctx.buffer);
+    const container = document.createElement("div");
+    container.style.width = "100%";
+    container.style.height = "100%";
+    container.style.overflow = "auto";
+    container.style.backgroundColor = "#1e1e1e";
+    container.style.color = "#d4d4d4";
+    container.style.padding = "16px";
+    container.style.boxSizing = "border-box";
+    let fontSize = 13;
+    const pre = document.createElement("pre");
+    pre.style.margin = "0";
+    pre.style.fontFamily = "Consolas, Menlo, Monaco, monospace";
+    pre.style.fontSize = `${fontSize}px`;
+    pre.style.lineHeight = "1.5";
+    pre.style.whiteSpace = "pre-wrap";
+    pre.style.wordBreak = "break-all";
+    const code = document.createElement("code");
+    const ext = (ctx.metadata.extension || "").replace(".", "");
+    try {
+      if (ext && hljs__default.default.getLanguage(ext)) {
+        code.innerHTML = hljs__default.default.highlight(text, { language: ext }).value;
+      } else {
+        code.innerHTML = hljs__default.default.highlightAuto(text).value;
+      }
+    } catch {
+      code.textContent = text;
+    }
+    pre.appendChild(code);
+    container.appendChild(pre);
+    ctx.container.appendChild(container);
+    const cleanup = () => {
+      container.remove();
+      ctx.container.innerHTML = "";
+    };
+    ctx.signal.addEventListener("abort", cleanup);
+    return {
+      destroy: cleanup,
+      zoomIn: () => {
+        fontSize = Math.min(32, fontSize + 2);
+        pre.style.fontSize = `${fontSize}px`;
+      },
+      zoomOut: () => {
+        fontSize = Math.max(8, fontSize - 2);
+        pre.style.fontSize = `${fontSize}px`;
+      },
+      getZoom: () => fontSize / 13,
+      setZoom: (level) => {
+        fontSize = Math.round(13 * level);
+        pre.style.fontSize = `${fontSize}px`;
+      },
+      download: () => {
+        const mimeType = ctx.metadata.mimeType || "text/plain";
+        const blob = new Blob([ctx.buffer], { type: mimeType });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = ctx.metadata.name || "code.txt";
+        a.click();
+        URL.revokeObjectURL(url);
+      },
+      print: () => {
+        window.print();
+      }
+    };
+  }
+};
+function codePlugin() {
+  return new CodePlugin();
+}
+
+// src/index.ts
+function getDefaultPlugins() {
+  return [
+    pdfPlugin(),
+    mediaPlugin(),
+    docxPlugin(),
+    excelPlugin(),
+    csvPlugin(),
+    codePlugin()
+  ];
+}
+var FilePreviewViewer2 = class extends FilePreviewViewer {
+  constructor(options) {
+    super();
+    if (options?.autoRegisterDefaults !== false) {
+      this.registerPlugins(getDefaultPlugins());
+    }
+  }
+};
+
+// src/vue.ts
+var FilePreview = vue.defineComponent({
+  name: "FilePreview",
+  props: {
+    src: {
+      type: [String, Object],
+      required: true
+    },
+    plugins: {
+      type: Array,
+      default: void 0
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["loading", "loaded", "error", "page-change", "zoom-change"],
+  setup(props, { emit, expose }) {
+    const containerRef = vue.ref(null);
+    let viewer = null;
+    let instance = null;
+    const renderPreview = async () => {
+      const el = containerRef.value;
+      if (!viewer || !el || !props.src) return;
+      try {
+        instance = await viewer.preview(el, props.src, props.options);
+      } catch (error) {
+        if (error instanceof DOMException && error.name === "AbortError") return;
+        emit("error", error);
+      }
+    };
+    vue.onMounted(() => {
+      viewer = new FilePreviewViewer2({ autoRegisterDefaults: false });
+      const activePlugins = props.plugins && props.plugins.length > 0 ? props.plugins : getDefaultPlugins();
+      viewer.registerPlugins(activePlugins);
+      viewer.on("loading", (data) => emit("loading", data));
+      viewer.on("loaded", (data) => emit("loaded", data));
+      viewer.on("error", (data) => emit("error", data));
+      viewer.on("page-change", (data) => emit("page-change", data));
+      viewer.on("zoom-change", (data) => emit("zoom-change", data));
+      renderPreview();
+    });
+    vue.watch(() => props.src, renderPreview);
+    vue.watch(() => props.options, renderPreview, { deep: true });
+    vue.onBeforeUnmount(() => {
+      viewer?.destroy();
+      viewer = null;
+      instance = null;
+    });
+    expose({
+      getInstance: () => instance,
+      getViewer: () => viewer,
+      destroy: () => viewer?.destroy()
+    });
+    return () => {
+      return vue.h("div", {
+        ref: containerRef,
+        style: { width: "100%", height: "100%", position: "relative" }
+      });
+    };
+  }
+});
+var vue_default = FilePreview;
+
+exports.FilePreview = FilePreview;
+exports.default = vue_default;
+//# sourceMappingURL=vue.cjs.map
+//# sourceMappingURL=vue.cjs.map