@relevaince/document-viewer 0.1.1 → 0.2.0

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
@@ -18,6 +20,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/renderers/PdfRenderer.tsx
@@ -50,7 +60,7 @@ function bboxToHighlight(target) {
 }
 function CitationHighlightRenderer() {
   const { highlight, isScrolledTo } = (0, import_react_pdf_highlighter_extended.useHighlightContainerContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_react_pdf_highlighter_extended.AreaHighlight,
     {
       highlight,
@@ -72,28 +82,28 @@ function PdfRenderer({
   onLoadSuccess,
   onLoadError
 }) {
-  const highlighterRef = (0, import_react.useRef)(null);
-  const loadNotifiedRef = (0, import_react.useRef)(false);
-  const highlights = (0, import_react.useMemo)(() => {
+  const highlighterRef = (0, import_react3.useRef)(null);
+  const loadNotifiedRef = (0, import_react3.useRef)(false);
+  const highlights = (0, import_react3.useMemo)(() => {
     const h = bboxToHighlight(target);
     return h ? [h] : [];
   }, [target]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (highlights.length === 0) return;
     const timer = setTimeout(() => {
       highlighterRef.current?.scrollToHighlight(highlights[0]);
     }, 400);
     return () => clearTimeout(timer);
   }, [highlights]);
-  const handleUtilsRef = (0, import_react.useCallback)((utils) => {
+  const handleUtilsRef = (0, import_react3.useCallback)((utils) => {
     highlighterRef.current = utils;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { width: "100%", height: "100%", position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: "100%", height: "100%", position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_react_pdf_highlighter_extended.PdfLoader,
     {
       document: target.url,
       workerSrc: workerUrl ?? DEFAULT_WORKER_URL,
-      beforeLoad: () => loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      beforeLoad: () => loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "div",
         {
           style: {
@@ -111,7 +121,7 @@ function PdfRenderer({
       ),
       errorMessage: (error) => {
         onLoadError?.(error);
-        return errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        return errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {
             style: {
@@ -133,7 +143,7 @@ function PdfRenderer({
           loadNotifiedRef.current = true;
           onLoadSuccess?.();
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           import_react_pdf_highlighter_extended.PdfHighlighter,
           {
             pdfDocument,
@@ -143,25 +153,137 @@ function PdfRenderer({
               width: "100%",
               height: "100%"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CitationHighlightRenderer, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CitationHighlightRenderer, {})
           }
         );
       }
     }
   ) });
 }
-var import_react, import_react_pdf_highlighter_extended, import_jsx_runtime2, CITATION_ID, DEFAULT_WORKER_URL;
+var import_react3, import_react_pdf_highlighter_extended, import_jsx_runtime4, CITATION_ID, DEFAULT_WORKER_URL;
 var init_PdfRenderer = __esm({
   "src/components/renderers/PdfRenderer.tsx"() {
     "use strict";
-    import_react = require("react");
+    import_react3 = require("react");
     import_react_pdf_highlighter_extended = require("react-pdf-highlighter-extended");
-    import_jsx_runtime2 = require("react/jsx-runtime");
+    import_jsx_runtime4 = require("react/jsx-runtime");
     CITATION_ID = "citation-highlight";
     DEFAULT_WORKER_URL = "https://unpkg.com/pdfjs-dist@4.4.168/build/pdf.worker.min.mjs";
   }
 });
 
+// src/components/renderers/ImageRenderer.tsx
+var ImageRenderer_exports = {};
+__export(ImageRenderer_exports, {
+  ImageRenderer: () => ImageRenderer
+});
+function ImageRenderer({
+  target,
+  loadingComponent,
+  errorComponent,
+  onLoadSuccess,
+  onLoadError
+}) {
+  const [status, setStatus] = (0, import_react4.useState)("loading");
+  const [error, setError] = (0, import_react4.useState)(null);
+  const handleLoad = (0, import_react4.useCallback)(() => {
+    setStatus("success");
+    onLoadSuccess?.();
+  }, [onLoadSuccess]);
+  const handleError = (0, import_react4.useCallback)(() => {
+    const err = new Error("Failed to load image");
+    setError(err);
+    setStatus("error");
+    onLoadError?.(err);
+  }, [onLoadError]);
+  if (status === "error") {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: containerStyle3, children: errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        style: {
+          color: "#ef4444",
+          fontSize: 14,
+          fontFamily: 'system-ui, "Segoe UI", Roboto, sans-serif'
+        },
+        children: "Failed to load image"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: containerStyle3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_react_zoom_pan_pinch.TransformWrapper,
+      {
+        initialScale: 1,
+        minScale: 0.5,
+        maxScale: 8,
+        centerOnInit: true,
+        limitToBounds: false,
+        panning: { velocityDisabled: true },
+        doubleClick: { mode: "reset" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_react_zoom_pan_pinch.TransformComponent,
+          {
+            wrapperStyle: { width: "100%", height: "100%", cursor: "grab" },
+            contentStyle: containerStyle3,
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "img",
+              {
+                src: target.url,
+                alt: target.title ?? "Document",
+                style: imageStyle,
+                onLoad: handleLoad,
+                onError: handleError,
+                draggable: false
+              }
+            )
+          }
+        )
+      }
+    ),
+    status === "loading" && (loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#888",
+          fontSize: 14,
+          fontFamily: 'system-ui, "Segoe UI", Roboto, sans-serif'
+        },
+        children: "Loading image\u2026"
+      }
+    ))
+  ] });
+}
+var import_react4, import_react_zoom_pan_pinch, import_jsx_runtime5, containerStyle3, imageStyle;
+var init_ImageRenderer = __esm({
+  "src/components/renderers/ImageRenderer.tsx"() {
+    "use strict";
+    import_react4 = require("react");
+    import_react_zoom_pan_pinch = require("react-zoom-pan-pinch");
+    import_jsx_runtime5 = require("react/jsx-runtime");
+    containerStyle3 = {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      overflow: "hidden",
+      background: "#1a1a1a"
+    };
+    imageStyle = {
+      maxWidth: "100%",
+      maxHeight: "100%",
+      objectFit: "contain",
+      display: "block"
+    };
+  }
+});
+
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
@@ -171,13 +293,19 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/DocumentViewer.tsx
-var import_react2 = require("react");
+var import_react5 = require("react");
 
 // src/utils/getFileType.ts
+var IMAGE_EXT = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".bmp", ".avif", ".svg"];
+var JSON_EXT = [".json"];
+var EML_EXT = [".eml"];
 function getFileType(url) {
   const clean = url.split("?")[0].split("#")[0].toLowerCase();
   if (clean.endsWith(".pdf")) return "pdf";
   if (clean.endsWith(".docx") || clean.endsWith(".doc")) return "docx";
+  if (IMAGE_EXT.some((e) => clean.endsWith(e))) return "image";
+  if (JSON_EXT.some((e) => clean.endsWith(e))) return "json";
+  if (EML_EXT.some((e) => clean.endsWith(e))) return "eml";
   return "unknown";
 }
 
@@ -203,21 +331,397 @@ function DocxRenderer({ target }) {
   );
 }
 
-// src/components/DocumentViewer.tsx
+// src/components/renderers/JsonRenderer.tsx
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var containerStyle = {
+  width: "100%",
+  height: "100%",
+  overflow: "auto",
+  background: "#0d1117",
+  padding: 16,
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+  fontSize: 13,
+  lineHeight: 1.5
+};
+function formatKey(key) {
+  return JSON.stringify(key);
+}
+function JsonTree({ node, depth = 0 }) {
+  const [open, setOpen] = (0, import_react.useState)(
+    node.type === "array" || node.type === "object" ? node.open : true
+  );
+  const isOpen = node.type === "array" || node.type === "object" ? open : true;
+  const indent = depth * 18;
+  if (node.type === "string") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+      node.key != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#79c0ff" }, children: formatKey(node.key) }),
+      node.key != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#6e7681" }, children: ": " }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#a5d6ff" }, children: JSON.stringify(node.value) })
+    ] });
+  }
+  if (node.type === "number") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+      node.key != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#79c0ff" }, children: formatKey(node.key) }),
+      node.key != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#6e7681" }, children: ": " }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#79c0ff" }, children: node.value })
+    ] });
+  }
+  if (node.type === "boolean") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+      node.key != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#79c0ff" }, children: formatKey(node.key) }),
+      node.key != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#6e7681" }, children: ": " }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#ff7b72" }, children: String(node.value) })
+    ] });
+  }
+  if (node.type === "null") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+      node.key != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#79c0ff" }, children: formatKey(node.key) }),
+      node.key != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#6e7681" }, children: ": " }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#6e7681" }, children: "null" })
+    ] });
+  }
+  if (node.type === "array") {
+    const bracket = isOpen ? "[" : "[ \u2026 ]";
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginLeft: indent }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "span",
+        {
+          onClick: () => node.children.length > 0 ? setOpen(!open) : null,
+          style: {
+            cursor: node.children.length > 0 ? "pointer" : "default",
+            color: "#ffa657"
+          },
+          children: [
+            node.key != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#79c0ff" }, children: formatKey(node.key) }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#6e7681" }, children: ": " })
+            ] }),
+            bracket
+          ]
+        }
+      ),
+      isOpen && node.children.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(JsonTree, { node: child, depth: depth + 1 }),
+        i < node.children.length - 1 && ","
+      ] }, i)),
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#ffa657" }, children: "]" })
+    ] });
+  }
+  if (node.type === "object") {
+    const brace = isOpen ? "{" : "{ \u2026 }";
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginLeft: indent }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "span",
+        {
+          onClick: () => node.children.length > 0 ? setOpen(!open) : null,
+          style: {
+            cursor: node.children.length > 0 ? "pointer" : "default",
+            color: "#ffa657"
+          },
+          children: [
+            node.key != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#79c0ff" }, children: formatKey(node.key) }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#6e7681" }, children: ": " })
+            ] }),
+            brace
+          ]
+        }
+      ),
+      isOpen && node.children.map(({ key, value }, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(JsonTree, { node: { ...value, key }, depth: depth + 1 }),
+        i < node.children.length - 1 && ","
+      ] }, key)),
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "#ffa657" }, children: "}" })
+    ] });
+  }
+  return null;
+}
+function parseToTree(value) {
+  if (value === null) return { type: "null" };
+  if (typeof value === "string") return { type: "string", value };
+  if (typeof value === "number") return { type: "number", value };
+  if (typeof value === "boolean") return { type: "boolean", value };
+  if (Array.isArray(value)) {
+    return {
+      type: "array",
+      children: value.map((v) => parseToTree(v)),
+      open: value.length <= 3
+    };
+  }
+  if (typeof value === "object" && value !== null) {
+    const obj = value;
+    return {
+      type: "object",
+      children: Object.entries(obj).map(([k, v]) => ({ key: k, value: parseToTree(v) })),
+      open: Object.keys(obj).length <= 5
+    };
+  }
+  return { type: "null" };
+}
+function JsonRenderer({
+  target,
+  loadingComponent,
+  errorComponent,
+  onLoadSuccess,
+  onLoadError
+}) {
+  const [state, setState] = (0, import_react.useState)({ status: "loading" });
+  const load = (0, import_react.useCallback)(async () => {
+    try {
+      const res = await fetch(target.url, { credentials: "omit" });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const raw = await res.text();
+      const data = JSON.parse(raw);
+      setState({ status: "success", tree: parseToTree(data) });
+      onLoadSuccess?.();
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setState({ status: "error", error });
+      onLoadError?.(error);
+    }
+  }, [target.url, onLoadSuccess, onLoadError]);
+  (0, import_react.useEffect)(() => {
+    load();
+  }, [load]);
+  if (state.status === "loading") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: containerStyle, children: loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { color: "#8b949e" }, children: "Loading JSON\u2026" }) });
+  }
+  if (state.status === "error") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: containerStyle, children: errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { color: "#f85149" }, children: [
+      "Failed to load JSON: ",
+      state.error.message
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(JsonTree, { node: state.tree }) });
+}
+
+// src/components/renderers/EmlRenderer.tsx
+var import_react2 = require("react");
+var import_dompurify = __toESM(require("dompurify"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var LazyPdfRenderer = (0, import_react2.lazy)(
+var containerStyle2 = {
+  width: "100%",
+  height: "100%",
+  overflow: "auto",
+  background: "#fff",
+  fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+  fontSize: 14,
+  lineHeight: 1.5
+};
+function parseEml(raw) {
+  const lines = raw.split(/\r?\n/);
+  const headers = [];
+  let i = 0;
+  let currentKey = null;
+  let currentValue = [];
+  while (i < lines.length) {
+    const line = lines[i];
+    if (line === "") {
+      i++;
+      break;
+    }
+    const match = line.match(/^([\w-]+):\s*(.*)$/);
+    if (match) {
+      if (currentKey) {
+        headers.push({ key: currentKey, value: currentValue.join(" ").trim() });
+      }
+      currentKey = match[1];
+      currentValue = [match[2]];
+    } else if (currentKey && /^\s/.test(line)) {
+      currentValue.push(line.trim());
+    }
+    i++;
+  }
+  if (currentKey) {
+    headers.push({ key: currentKey, value: currentValue.join(" ").trim() });
+  }
+  const rest = lines.slice(i).join("\n");
+  const contentType = headers.find(
+    (h) => h.key.toLowerCase() === "content-type"
+  )?.value ?? "text/plain";
+  const isMultipart = contentType.toLowerCase().includes("multipart");
+  let bodyText = null;
+  let bodyHtml = null;
+  if (!isMultipart) {
+    bodyText = rest.trim() || null;
+    if (contentType.toLowerCase().includes("text/html")) {
+      bodyHtml = bodyText;
+      bodyText = null;
+    }
+    return { headers, bodyText, bodyHtml };
+  }
+  const boundaryMatch = contentType.match(/boundary\s*=\s*["']?([^"'\s;]+)["']?/i);
+  const boundary = boundaryMatch?.[1]?.trim();
+  if (!boundary) {
+    bodyText = rest.trim() || null;
+    return { headers, bodyText, bodyHtml: null };
+  }
+  const parts = rest.split(new RegExp(`\\r?\\n--${escapeRegExp(boundary)}(?:\\r?\\n|--)`));
+  for (const part of parts) {
+    if (!part.trim()) continue;
+    const [head, ...bodyLines] = part.split(/\r?\n\r?\n/);
+    const body = bodyLines.join("\n\n").trim();
+    const partType = (head.match(/Content-Type:\s*([^;\s]+)/i) ?? [])[1]?.toLowerCase();
+    if (partType?.includes("text/plain") && !bodyText) bodyText = body;
+    if (partType?.includes("text/html") && !bodyHtml) bodyHtml = body;
+  }
+  if (!bodyText && !bodyHtml && parts[1]) {
+    const [head, ...bodyLines] = parts[1].split(/\r?\n\r?\n/);
+    const body = bodyLines.join("\n\n").trim();
+    const partType = (head.match(/Content-Type:\s*([^;\s]+)/i) ?? [])[1]?.toLowerCase();
+    if (partType?.includes("text/html")) bodyHtml = body;
+    else bodyText = body;
+  }
+  return { headers, bodyText, bodyHtml };
+}
+function escapeRegExp(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+var HEADER_KEYS = ["from", "to", "cc", "bcc", "subject", "date", "reply-to"];
+function EmlRenderer({
+  target,
+  loadingComponent,
+  errorComponent,
+  onLoadSuccess,
+  onLoadError
+}) {
+  const [state, setState] = (0, import_react2.useState)({ status: "loading" });
+  const load = (0, import_react2.useCallback)(async () => {
+    try {
+      const res = await fetch(target.url, { credentials: "omit" });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const raw = await res.text();
+      const data = parseEml(raw);
+      setState({ status: "success", data });
+      onLoadSuccess?.();
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setState({ status: "error", error });
+      onLoadError?.(error);
+    }
+  }, [target.url, onLoadSuccess, onLoadError]);
+  (0, import_react2.useEffect)(() => {
+    load();
+  }, [load]);
+  if (state.status === "loading") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: containerStyle2, children: loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: 24, color: "#666" }, children: "Loading email\u2026" }) });
+  }
+  if (state.status === "error") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: containerStyle2, children: errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { padding: 24, color: "#dc2626" }, children: [
+      "Failed to load email: ",
+      state.error.message
+    ] }) });
+  }
+  const { headers, bodyText, bodyHtml } = state.data;
+  const preferredHeaders = HEADER_KEYS.filter(
+    (k) => headers.some((h) => h.key.toLowerCase() === k)
+  );
+  const otherHeaders = headers.filter(
+    (h) => !HEADER_KEYS.includes(h.key.toLowerCase())
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: containerStyle2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { padding: 24, borderBottom: "1px solid #e5e7eb" }, children: [
+      preferredHeaders.map((key) => {
+        const h = headers.find((x) => x.key.toLowerCase() === key);
+        if (!h) return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: 8 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { color: "#6b7280", fontWeight: 600, marginRight: 8 }, children: [
+            h.key,
+            ":"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: "#111" }, children: h.value })
+        ] }, h.key);
+      }),
+      otherHeaders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("details", { style: { marginTop: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("summary", { style: { color: "#6b7280", cursor: "pointer", fontSize: 13 }, children: "Other headers" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginTop: 8 }, children: otherHeaders.map((h) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: 4, fontSize: 13 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { color: "#6b7280" }, children: [
+            h.key,
+            ": "
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: "#374151" }, children: h.value })
+        ] }, h.key)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: 24 }, children: bodyHtml ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: "document-viewer-eml-body",
+        style: { maxWidth: 720, overflow: "auto" },
+        dangerouslySetInnerHTML: {
+          __html: import_dompurify.default.sanitize(bodyHtml, {
+            ALLOWED_TAGS: [
+              "p",
+              "br",
+              "div",
+              "span",
+              "a",
+              "strong",
+              "em",
+              "u",
+              "b",
+              "i",
+              "ul",
+              "ol",
+              "li",
+              "h1",
+              "h2",
+              "h3",
+              "h4",
+              "table",
+              "tr",
+              "td",
+              "th",
+              "tbody",
+              "thead",
+              "img",
+              "blockquote",
+              "hr",
+              "pre",
+              "code"
+            ],
+            ALLOWED_ATTR: ["href", "src", "alt", "title", "target"]
+          })
+        }
+      }
+    ) : bodyText ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "pre",
+      {
+        style: {
+          margin: 0,
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word",
+          color: "#374151",
+          fontFamily: "inherit",
+          fontSize: "inherit"
+        },
+        children: bodyText
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { color: "#6b7280" }, children: "No body content" }) })
+  ] });
+}
+
+// src/components/DocumentViewer.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var LazyPdfRenderer = (0, import_react5.lazy)(
   () => Promise.resolve().then(() => (init_PdfRenderer(), PdfRenderer_exports)).then((mod) => ({
     default: mod.PdfRenderer
   }))
 );
+var LazyImageRenderer = (0, import_react5.lazy)(
+  () => Promise.resolve().then(() => (init_ImageRenderer(), ImageRenderer_exports)).then((mod) => ({
+    default: mod.ImageRenderer
+  }))
+);
 function ClientOnly({
   children,
   fallback
 }) {
-  const [mounted, setMounted] = (0, import_react2.useState)(false);
-  (0, import_react2.useEffect)(() => setMounted(true), []);
-  if (!mounted) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: fallback ?? null });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
+  const [mounted, setMounted] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => setMounted(true), []);
+  if (!mounted) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: fallback ?? null });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children });
 }
 function DocumentViewer({
   target,
@@ -239,7 +743,7 @@ function DocumentViewer({
     borderRadius: 8,
     background: "#fafafa"
   };
-  const loadingFallback = loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const loadingFallback = loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       style: {
@@ -255,8 +759,8 @@ function DocumentViewer({
       children: "Loading\u2026"
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, style: wrapperStyle, children: [
-    type === "pdf" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ClientOnly, { fallback: loadingFallback, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.Suspense, { fallback: loadingFallback, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, style: wrapperStyle, children: [
+    type === "pdf" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ClientOnly, { fallback: loadingFallback, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.Suspense, { fallback: loadingFallback, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       LazyPdfRenderer,
       {
         target,
@@ -267,8 +771,38 @@ function DocumentViewer({
         onLoadError
       }
     ) }) }),
-    type === "docx" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DocxRenderer, { target }),
-    type === "unknown" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    type === "docx" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DocxRenderer, { target }),
+    type === "image" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ClientOnly, { fallback: loadingFallback, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.Suspense, { fallback: loadingFallback, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      LazyImageRenderer,
+      {
+        target,
+        loadingComponent,
+        errorComponent,
+        onLoadSuccess,
+        onLoadError
+      }
+    ) }) }),
+    type === "json" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      JsonRenderer,
+      {
+        target,
+        loadingComponent,
+        errorComponent,
+        onLoadSuccess,
+        onLoadError
+      }
+    ),
+    type === "eml" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      EmlRenderer,
+      {
+        target,
+        loadingComponent,
+        errorComponent,
+        onLoadSuccess,
+        onLoadError
+      }
+    ),
+    type === "unknown" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         style: {