@cassandragargoyle/react-viewer 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 CassandraGargoyle Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,70 @@
-# Temporary Holding Version
+# React Viewer
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React viewers for document formats, shared across the CassandraGargoyle ecosystem.
+
+[![npm](https://img.shields.io/npm/v/@cassandragargoyle/react-viewer)](https://www.npmjs.com/package/@cassandragargoyle/react-viewer)
+[![license](https://img.shields.io/npm/l/@cassandragargoyle/react-viewer)](LICENSE)
+
+## Overview
+
+**Repository**: `react-viewer`
+**Language**: TypeScript (React 19, Node 24+)
+**Package**: [`@cassandragargoyle/react-viewer`](https://www.npmjs.com/package/@cassandragargoyle/react-viewer) on npmjs.com
+
+A viewer shows one kind of document — an e-mail message today — from data the host has
+already read. It never parses a file format and never calls a host API: the host reads the
+file, maps it to the viewer's own type, and passes it in as props. General UI building
+blocks live next door in [`react-components`](https://github.com/cassandragargoyle/react-components).
+
+Viewers came from `portunix-vscode`; the placement is decided in its
+[issue 132](https://github.com/cassandragargoyle/portunix-vscode/blob/main/docs/issues/done/132-shared-modules-and-group-b-components.md)
+and [ADR-012](https://github.com/cassandragargoyle/portunix-vscode/blob/main/docs/adr/012-react-components-shared-submodule.md).
+
+## Getting Started
+
+```bash
+npm install @cassandragargoyle/react-viewer dompurify
+```
+
+React 19 and `dompurify` are peer dependencies.
+
+```tsx
+import { EmailViewer, type EmailMessage } from '@cassandragargoyle/react-viewer';
+
+export function MailPane({ email }: { email: EmailMessage }): React.ReactElement {
+    return <EmailViewer email={email} />;
+}
+```
+
+Stylesheets are bundled into the JavaScript and injected on first use; there is no CSS file
+to import. Colours follow the Visual Studio Code theme variables when they are present.
+
+## Viewers
+
+| Viewer | What it shows |
+| ------ | ------------- |
+| [`EmailViewer`](https://github.com/cassandragargoyle/react-viewer/tree/main/src/EmailViewer) | An e-mail message: header, attachments and a sandboxed HTML / text / source / headers body |
+
+## Development
+
+```bash
+git clone https://github.com/cassandragargoyle/react-viewer.git
+cd react-viewer
+
+npm install
+npm run typecheck
+npm run build
+npm test
+```
+
+## Releasing
+
+Bump `version` in `package.json`, commit, and push a matching `vX.Y.Z` tag. The publish
+workflow refuses a tag that does not match `package.json` and publishes to npmjs.com through
+npm Trusted Publishing, so no npm token exists in the repository. The trusted publisher
+(this repository, `publish.yml`) has to be set in the package settings on npmjs.com before
+the first release.
+
+## License
+
+MIT — see [LICENSE](LICENSE).

package/dist/EmailViewer/AttachmentList.d.ts

@@ -0,0 +1,4 @@
+import { EmailAttachment } from './types';
+export declare function AttachmentList({ attachments }: {
+    attachments: EmailAttachment[];
+}): JSX.Element | null;

package/dist/EmailViewer/EmailBody.d.ts

@@ -0,0 +1,4 @@
+import { EmailMessage } from './types';
+export declare function EmailBody({ email }: {
+    email: EmailMessage;
+}): JSX.Element;

package/dist/EmailViewer/EmailHeader.d.ts

@@ -0,0 +1,5 @@
+import { EmailDateFormatter, EmailMessage } from './types';
+export declare function EmailHeader({ email, formatDate }: {
+    email: EmailMessage;
+    formatDate?: EmailDateFormatter;
+}): JSX.Element;

package/dist/EmailViewer/EmailToolbar.d.ts

@@ -0,0 +1 @@
+export declare function EmailToolbar(): JSX.Element;

package/dist/EmailViewer/EmailViewer.d.ts

@@ -0,0 +1,6 @@
+import { EmailDateFormatter, EmailMessage } from './types';
+export interface EmailViewerProps {
+    email: EmailMessage;
+    formatDate?: EmailDateFormatter;
+}
+export declare function EmailViewer({ email, formatDate }: EmailViewerProps): JSX.Element;

package/dist/EmailViewer/icons.d.ts

@@ -0,0 +1,7 @@
+export declare function ReplyIcon(): JSX.Element;
+export declare function ReplyAllIcon(): JSX.Element;
+export declare function ForwardIcon(): JSX.Element;
+export declare function DownloadIcon(): JSX.Element;
+export declare function AttachmentIcon(): JSX.Element;
+export declare function PriorityHighIcon(): JSX.Element;
+export declare function PriorityLowIcon(): JSX.Element;

package/dist/EmailViewer/index.d.ts

@@ -0,0 +1,4 @@
+export { EmailViewer } from './EmailViewer';
+export type { EmailViewerProps } from './EmailViewer';
+export { formatEmailDate } from './types';
+export type { EmailMessage, EmailAddress, EmailAttachment, EmailImportance, EmailDateFormatter } from './types';

package/dist/EmailViewer/inlineHtml.d.ts

@@ -0,0 +1,10 @@
+import { EmailAttachment } from './types';
+/**
+ * Build the sandboxed-iframe document for a mail's HTML body. Inline cid: references are
+ * rewritten to data: URIs built from the matching inline attachments — data: (not blob:)
+ * because a fully sandboxed iframe has an opaque origin and cannot load the parent's blob:
+ * URLs. Everything else is sanitized and wrapped in a restrictive CSP that permits only
+ * data: images and inline styles, so remote content (tracking pixels, external CSS) is
+ * blocked by default.
+ */
+export declare function buildInlineHtml(rawHtml: string, attachments: EmailAttachment[]): string;

package/dist/EmailViewer/types.d.ts

@@ -0,0 +1,47 @@
+/** A single mailbox: an address plus an optional display name */
+export interface EmailAddress {
+    name?: string;
+    address: string;
+}
+/** One attachment or inline part, carried as raw bytes so the viewer owns rendering */
+export interface EmailAttachment {
+    filename: string;
+    mimeType: string;
+    size: number;
+    /** Content-ID (angle brackets stripped) used to resolve inline cid: references */
+    contentId?: string;
+    disposition: 'attachment' | 'inline';
+    bytes: Uint8Array;
+}
+/** Message importance; 'normal' renders without a badge */
+export type EmailImportance = 'high' | 'normal' | 'low';
+/**
+ * Normalized message the viewer renders. `html` is the message's raw HTML — the viewer
+ * sanitizes it and resolves cid: references itself, so a reader can stay DOM-free.
+ */
+export interface EmailMessage {
+    subject: string;
+    from?: EmailAddress;
+    to: EmailAddress[];
+    cc: EmailAddress[];
+    date?: Date;
+    importance: EmailImportance;
+    html?: string;
+    text?: string;
+    attachments: EmailAttachment[];
+    headers: Array<{
+        key: string;
+        value: string;
+    }>;
+    /** Original source shown on the Source tab */
+    raw: string;
+}
+/** Turns the message date into the text of the Date row */
+export type EmailDateFormatter = (date: Date) => string;
+/**
+ * Default date format: local time as `YYYY-MM-DD HH:MM:SS`.
+ *
+ * Unambiguous in every region and never drops the seconds a mail Date: header carries.
+ * An invalid Date yields an empty string, so the row is omitted rather than showing `NaN`.
+ */
+export declare function formatEmailDate(date: Date): string;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { EmailViewer, formatEmailDate } from './EmailViewer';
+export type { EmailViewerProps, EmailMessage, EmailAddress, EmailAttachment, EmailImportance, EmailDateFormatter, } from './EmailViewer';

package/dist/index.js

@@ -0,0 +1,344 @@
+import { useEffect as e, useMemo as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import a from "dompurify";
+//#region src/EmailViewer/icons.tsx
+var o = {
+	width: 16,
+	height: 16,
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 1.3,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+function s() {
+	return /* @__PURE__ */ i("svg", {
+		...o,
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ r("path", { d: "M6 4 2 8l4 4" }), /* @__PURE__ */ r("path", { d: "M2 8h6a5 5 0 0 1 5 5" })]
+	});
+}
+function c() {
+	return /* @__PURE__ */ i("svg", {
+		...o,
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ r("path", { d: "M5 4 1 8l4 4" }),
+			/* @__PURE__ */ r("path", { d: "M9 4 5 8l4 4" }),
+			/* @__PURE__ */ r("path", { d: "M5 8h4a5 5 0 0 1 5 5" })
+		]
+	});
+}
+function l() {
+	return /* @__PURE__ */ i("svg", {
+		...o,
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ r("path", { d: "M10 4l4 4-4 4" }), /* @__PURE__ */ r("path", { d: "M14 8H8a5 5 0 0 0-5 5" })]
+	});
+}
+function u() {
+	return /* @__PURE__ */ i("svg", {
+		...o,
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ r("path", { d: "M8 2v8" }),
+			/* @__PURE__ */ r("path", { d: "M4.5 7 8 10.5 11.5 7" }),
+			/* @__PURE__ */ r("path", { d: "M3 13h10" })
+		]
+	});
+}
+function d() {
+	return /* @__PURE__ */ r("svg", {
+		...o,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ r("path", { d: "M12.5 6.5 7 12a3 3 0 0 1-4-4l5.5-5.5a2 2 0 0 1 3 3L6 11" })
+	});
+}
+function f() {
+	return /* @__PURE__ */ i("svg", {
+		...o,
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ r("path", { d: "M4 9l4-4 4 4" }), /* @__PURE__ */ r("path", { d: "M4 12l4-4 4 4" })]
+	});
+}
+function p() {
+	return /* @__PURE__ */ r("svg", {
+		...o,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ r("path", { d: "M4 6l4 4 4-4" })
+	});
+}
+//#endregion
+//#region src/EmailViewer/EmailToolbar.tsx
+function m() {
+	return /* @__PURE__ */ i("div", {
+		className: "email-toolbar",
+		role: "toolbar",
+		"aria-label": "Message actions",
+		children: [
+			/* @__PURE__ */ i("button", {
+				className: "email-toolbar-btn",
+				type: "button",
+				disabled: !0,
+				title: "Reply (coming soon)",
+				children: [/* @__PURE__ */ r(s, {}), /* @__PURE__ */ r("span", { children: "Reply" })]
+			}),
+			/* @__PURE__ */ i("button", {
+				className: "email-toolbar-btn",
+				type: "button",
+				disabled: !0,
+				title: "Reply all (coming soon)",
+				children: [/* @__PURE__ */ r(c, {}), /* @__PURE__ */ r("span", { children: "Reply all" })]
+			}),
+			/* @__PURE__ */ i("button", {
+				className: "email-toolbar-btn",
+				type: "button",
+				disabled: !0,
+				title: "Forward (coming soon)",
+				children: [/* @__PURE__ */ r(l, {}), /* @__PURE__ */ r("span", { children: "Forward" })]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/EmailViewer/types.ts
+function h(e, t = 2) {
+	return String(e).padStart(t, "0");
+}
+function g(e) {
+	return Number.isNaN(e.getTime()) ? "" : `${`${h(e.getFullYear(), 4)}-${h(e.getMonth() + 1)}-${h(e.getDate())}`} ${`${h(e.getHours())}:${h(e.getMinutes())}:${h(e.getSeconds())}`}`;
+}
+//#endregion
+//#region src/EmailViewer/EmailHeader.tsx
+function _(e) {
+	return e.name ? `${e.name} <${e.address}>` : e.address;
+}
+function v(e) {
+	return e.map(_).join(", ");
+}
+function y({ importance: e }) {
+	return e === "high" ? /* @__PURE__ */ i("span", {
+		className: "email-importance email-importance-high",
+		title: "High importance",
+		children: [/* @__PURE__ */ r(f, {}), "High priority"]
+	}) : e === "low" ? /* @__PURE__ */ i("span", {
+		className: "email-importance email-importance-low",
+		title: "Low importance",
+		children: [/* @__PURE__ */ r(p, {}), "Low priority"]
+	}) : null;
+}
+function b({ label: e, value: t }) {
+	return t ? /* @__PURE__ */ i("div", {
+		className: "email-header-row",
+		children: [/* @__PURE__ */ r("span", {
+			className: "email-header-label",
+			children: e
+		}), /* @__PURE__ */ r("span", {
+			className: "email-header-value",
+			children: t
+		})]
+	}) : null;
+}
+function x({ email: e, formatDate: t = g }) {
+	let n = e.date ? t(e.date) : "";
+	return /* @__PURE__ */ i("div", {
+		className: "email-header",
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "email-header-subject-row",
+				children: [/* @__PURE__ */ r("span", {
+					className: "email-header-subject",
+					children: e.subject
+				}), /* @__PURE__ */ r(y, { importance: e.importance })]
+			}),
+			/* @__PURE__ */ r(b, {
+				label: "From",
+				value: e.from ? _(e.from) : ""
+			}),
+			/* @__PURE__ */ r(b, {
+				label: "To",
+				value: v(e.to)
+			}),
+			/* @__PURE__ */ r(b, {
+				label: "Cc",
+				value: v(e.cc)
+			}),
+			/* @__PURE__ */ r(b, {
+				label: "Date",
+				value: n
+			})
+		]
+	});
+}
+//#endregion
+//#region src/EmailViewer/AttachmentList.tsx
+function S(e) {
+	return e < 1024 ? `${e} B` : e < 1048576 ? `${(e / 1024).toFixed(1)} KB` : `${(e / 1048576).toFixed(1)} MB`;
+}
+function C(e) {
+	let t = URL.createObjectURL(new Blob([e.bytes], { type: e.mimeType })), n = document.createElement("a");
+	n.href = t, n.download = e.filename, document.body.appendChild(n), n.click(), n.remove(), URL.revokeObjectURL(t);
+}
+function w({ attachments: e }) {
+	return e.length === 0 ? null : /* @__PURE__ */ r("div", {
+		className: "email-attachments",
+		"aria-label": "Attachments",
+		children: e.map((e, t) => /* @__PURE__ */ i("button", {
+			type: "button",
+			className: "email-attachment-chip",
+			onClick: () => C(e),
+			title: `Download ${e.filename} (${S(e.size)})`,
+			children: [
+				/* @__PURE__ */ r("span", {
+					className: "email-attachment-icon",
+					children: /* @__PURE__ */ r(d, {})
+				}),
+				/* @__PURE__ */ r("span", {
+					className: "email-attachment-name",
+					children: e.filename
+				}),
+				/* @__PURE__ */ r("span", {
+					className: "email-attachment-size",
+					children: S(e.size)
+				}),
+				/* @__PURE__ */ r("span", {
+					className: "email-attachment-download",
+					children: /* @__PURE__ */ r(u, {})
+				})
+			]
+		}, `${e.filename}-${t}`))
+	});
+}
+//#endregion
+//#region src/EmailViewer/inlineHtml.ts
+var T = [
+	"script",
+	"iframe",
+	"object",
+	"embed",
+	"form",
+	"base",
+	"meta",
+	"link"
+];
+function E(e) {
+	let t = "", n = 32768;
+	for (let r = 0; r < e.length; r += n) t += String.fromCharCode(...e.subarray(r, r + n));
+	return btoa(t);
+}
+function D(e, t) {
+	let n = /* @__PURE__ */ new Map();
+	for (let e of t) e.disposition === "inline" && e.contentId && n.set(e.contentId, `data:${e.mimeType};base64,${E(e.bytes)}`);
+	let r = new DOMParser().parseFromString(e, "text/html");
+	return r.querySelectorAll("[src]").forEach((e) => {
+		let t = e.getAttribute("src") ?? "";
+		if (t.toLowerCase().startsWith("cid:")) {
+			let r = t.slice(4).replace(/^<|>$/g, ""), i = n.get(r);
+			i ? e.setAttribute("src", i) : e.removeAttribute("src");
+		}
+	}), [
+		"<!doctype html><html><head><meta charset=\"utf-8\">",
+		"<meta http-equiv=\"Content-Security-Policy\" ",
+		"content=\"default-src 'none'; img-src data:; style-src 'unsafe-inline'; font-src data:;\">",
+		"<style>html,body{margin:0;padding:12px;background:#ffffff;color:#111111;",
+		"font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:13px;line-height:1.5;}",
+		"img{max-width:100%;height:auto;}a{color:#0645ad;}</style>",
+		"</head><body>",
+		a.sanitize(r.body.innerHTML, {
+			FORBID_TAGS: T,
+			FORBID_ATTR: ["ping"],
+			ALLOW_UNKNOWN_PROTOCOLS: !1
+		}),
+		"</body></html>"
+	].join("");
+}
+//#endregion
+//#region src/EmailViewer/EmailBody.tsx
+function O({ email: e }) {
+	let n = t(() => D(e.html ?? "", e.attachments), [e]);
+	return /* @__PURE__ */ r("iframe", {
+		className: "email-html-frame",
+		title: "Message body",
+		sandbox: "",
+		srcDoc: n
+	});
+}
+function k({ email: a }) {
+	let o = t(() => {
+		let e = [];
+		return a.html && e.push("html"), a.text && e.push("text"), e.push("source", "headers"), e;
+	}, [a]), [s, c] = n(o[0]);
+	e(() => c(o[0]), [o]);
+	let l = {
+		html: "HTML",
+		text: "Plain text",
+		source: "Source",
+		headers: "Headers"
+	};
+	return /* @__PURE__ */ i("div", {
+		className: "email-body",
+		children: [/* @__PURE__ */ r("div", {
+			className: "email-body-tabs",
+			role: "tablist",
+			children: o.map((e) => /* @__PURE__ */ r("button", {
+				type: "button",
+				role: "tab",
+				"aria-selected": s === e,
+				className: `email-body-tab${s === e ? " email-body-tab-active" : ""}`,
+				onClick: () => c(e),
+				children: l[e]
+			}, e))
+		}), /* @__PURE__ */ i("div", {
+			className: "email-body-content",
+			children: [
+				s === "html" && /* @__PURE__ */ r(O, { email: a }),
+				s === "text" && /* @__PURE__ */ r("pre", {
+					className: "email-body-text",
+					children: a.text
+				}),
+				s === "source" && /* @__PURE__ */ r("pre", {
+					className: "email-body-source",
+					children: a.raw
+				}),
+				s === "headers" && /* @__PURE__ */ r("table", {
+					className: "email-headers-table",
+					children: /* @__PURE__ */ r("tbody", { children: a.headers.map((e, t) => /* @__PURE__ */ i("tr", { children: [/* @__PURE__ */ r("td", {
+						className: "email-headers-key",
+						children: e.key
+					}), /* @__PURE__ */ r("td", {
+						className: "email-headers-value",
+						children: e.value
+					})] }, `${e.key}-${t}`)) })
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/EmailViewer/EmailViewer.css?inline
+var A = ".email-viewer{background:var(--vscode-editor-background,#1e1e1e);width:100%;height:100%;min-height:0;color:var(--vscode-foreground,#ccc);font-family:var(--vscode-font-family,\"Segoe UI\", sans-serif);flex-direction:column;font-size:13px;display:flex}.email-toolbar{border-bottom:1px solid var(--vscode-sideBar-border,#3c3c3c);flex-shrink:0;align-items:center;gap:4px;padding:8px 12px;display:flex}.email-toolbar-btn{color:var(--vscode-foreground,#ccc);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:4px;align-items:center;gap:6px;padding:4px 8px;font-size:12px;font-weight:500;display:inline-flex}.email-toolbar-btn:hover:not(:disabled){background:var(--vscode-toolbar-hoverBackground,#ffffff14)}.email-toolbar-btn:focus-visible{outline:2px solid var(--vscode-focusBorder,#75beff);outline-offset:2px}.email-toolbar-btn:disabled{opacity:.3;cursor:default}.email-toolbar-btn svg{flex-shrink:0}.email-header{border-bottom:1px solid var(--vscode-sideBar-border,#3c3c3c);flex-shrink:0;padding:12px}.email-header-subject-row{align-items:center;gap:8px;margin-bottom:8px;display:flex}.email-header-subject{color:var(--vscode-foreground,#ccc);font-size:16px;font-weight:600}.email-importance{white-space:nowrap;border-radius:4px;flex-shrink:0;align-items:center;gap:4px;padding:2px 6px;font-size:11px;font-weight:600;display:inline-flex}.email-importance svg{width:14px;height:14px}.email-importance-high{color:#febc2e;border:1px solid #febc2e80}.email-importance-low{color:var(--vscode-descriptionForeground,#858585);border:1px solid var(--vscode-sideBar-border,#3c3c3c)}.email-header-row{gap:8px;font-size:12px;line-height:1.6;display:flex}.email-header-label{width:44px;color:var(--vscode-descriptionForeground,#858585);flex-shrink:0}.email-header-value{color:var(--vscode-foreground,#ccc);word-break:break-word}.email-attachments{border-bottom:1px solid var(--vscode-sideBar-border,#3c3c3c);flex-wrap:wrap;flex-shrink:0;gap:8px;padding:8px 12px;display:flex}.email-attachment-chip{max-width:260px;color:var(--vscode-foreground,#ccc);background:var(--vscode-badge-background,#ffffff0f);border:1px solid var(--vscode-sideBar-border,#3c3c3c);cursor:pointer;border-radius:4px;align-items:center;gap:6px;padding:4px 8px;font-size:12px;display:inline-flex}.email-attachment-chip:hover{background:var(--vscode-list-hoverBackground,#ffffff0d)}.email-attachment-chip:focus-visible{outline:2px solid var(--vscode-focusBorder,#75beff);outline-offset:2px}.email-attachment-icon,.email-attachment-download{color:var(--vscode-descriptionForeground,#858585);flex-shrink:0;display:inline-flex}.email-attachment-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.email-attachment-size{color:var(--vscode-descriptionForeground,#858585);flex-shrink:0}.email-body{flex-direction:column;flex:1 1 0;min-height:0;display:flex}.email-body-tabs{border-bottom:1px solid var(--vscode-sideBar-border,#3c3c3c);flex-shrink:0;gap:2px;padding:0 12px;display:flex}.email-body-tab{color:var(--vscode-descriptionForeground,#858585);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;padding:6px 12px;font-size:12px}.email-body-tab:hover{color:var(--vscode-foreground,#ccc)}.email-body-tab:focus-visible{outline:2px solid var(--vscode-focusBorder,#75beff);outline-offset:-2px}.email-body-tab-active{color:var(--vscode-foreground,#ccc);border-bottom-color:var(--vscode-focusBorder,#75beff)}.email-body-content{flex:1 1 0;min-height:0;position:relative;overflow:auto}.email-html-frame{background:#fff;border:none;width:100%;height:100%}.email-body-text,.email-body-source{white-space:pre-wrap;word-break:break-word;font-family:var(--vscode-editor-font-family,\"Consolas\", monospace);color:var(--vscode-foreground,#ccc);margin:0;padding:12px;font-size:12px}.email-headers-table{border-collapse:collapse;width:100%;font-size:12px}.email-headers-table td{vertical-align:top;border-bottom:1px solid var(--vscode-sideBar-border,#3c3c3c);padding:4px 12px}.email-headers-key{width:180px;color:var(--vscode-descriptionForeground,#858585);word-break:break-word}.email-headers-value{color:var(--vscode-foreground,#ccc);word-break:break-word;font-family:var(--vscode-editor-font-family,\"Consolas\", monospace)}";
+//#endregion
+//#region src/EmailViewer/EmailViewer.tsx
+if (typeof document < "u" && !document.getElementById("email-viewer-styles")) {
+	let e = document.createElement("style");
+	e.id = "email-viewer-styles", e.textContent = A, document.head.appendChild(e);
+}
+function j({ email: e, formatDate: t }) {
+	return /* @__PURE__ */ i("div", {
+		className: "email-viewer",
+		children: [
+			/* @__PURE__ */ r(m, {}),
+			/* @__PURE__ */ r(x, {
+				email: e,
+				formatDate: t
+			}),
+			/* @__PURE__ */ r(w, { attachments: e.attachments }),
+			/* @__PURE__ */ r(k, { email: e })
+		]
+	});
+}
+//#endregion
+export { j as EmailViewer, g as formatEmailDate };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["emailViewerStyles","DOMPurify","base","ReplyIcon","ReplyAllIcon","ForwardIcon","DownloadIcon","AttachmentIcon","PriorityHighIcon","PriorityLowIcon","EmailToolbar","pad","value","width","formatEmailDate","date","formatAddress","a","formatAddresses","list","ImportanceBadge","importance","AddressRow","label","EmailHeader","email","formatDate","formatSize","bytes","downloadAttachment","url","att","AttachmentList","attachments","i","FORBID_TAGS","bytesToBase64","binary","chunk","buildInlineHtml","cidMap","doc","rawHtml","src","el","id","mapped","HtmlBody","srcDoc","useMemo","EmailBody","tabs","active","setActive","useState","labels","tab","h","EmailViewer_default","styleEl","EmailViewer"],"sources":["../src/EmailViewer/icons.tsx","../src/EmailViewer/EmailToolbar.tsx","../src/EmailViewer/types.ts","../src/EmailViewer/EmailHeader.tsx","../src/EmailViewer/AttachmentList.tsx","../src/EmailViewer/inlineHtml.ts","../src/EmailViewer/EmailBody.tsx","../src/EmailViewer/EmailViewer.css?inline","../src/EmailViewer/EmailViewer.tsx"],"sourcesContent":["/*\n *  This file is part of CassandraGargoyle Community Project\n *  Licensed under the MIT License - see LICENSE file for details\n */\n\n// Monochrome stroke icons for the EmailViewer (16px, stroke inherits currentColor)\n// Follows the GUI design principles: single-color, fill:none, rounded caps\n\nimport React from 'react';\n\nconst base = {\n    width: 16,\n    height: 16,\n    viewBox: '0 0 16 16',\n    fill: 'none',\n    stroke: 'currentColor',\n    strokeWidth: 1.3,\n    strokeLinecap: 'round' as const,\n    strokeLinejoin: 'round' as const,\n};\n\nexport function ReplyIcon(): JSX.Element {\n    return (\n        <svg {...base} aria-hidden=\"true\">\n            <path d=\"M6 4 2 8l4 4\" />\n            <path d=\"M2 8h6a5 5 0 0 1 5 5\" />\n        </svg>\n    );\n}\n\nexport function ReplyAllIcon(): JSX.Element {\n    return (\n        <svg {...base} aria-hidden=\"true\">\n            <path d=\"M5 4 1 8l4 4\" />\n            <path d=\"M9 4 5 8l4 4\" />\n            <path d=\"M5 8h4a5 5 0 0 1 5 5\" />\n        </svg>\n    );\n}\n\nexport function ForwardIcon(): JSX.Element {\n    return (\n        <svg {...base} aria-hidden=\"true\">\n            <path d=\"M10 4l4 4-4 4\" />\n            <path d=\"M14 8H8a5 5 0 0 0-5 5\" />\n        </svg>\n    );\n}\n\nexport function DownloadIcon(): JSX.Element {\n    return (\n        <svg {...base} aria-hidden=\"true\">\n            <path d=\"M8 2v8\" />\n            <path d=\"M4.5 7 8 10.5 11.5 7\" />\n            <path d=\"M3 13h10\" />\n        </svg>\n    );\n}\n\nexport function AttachmentIcon(): JSX.Element {\n    return (\n        <svg {...base} aria-hidden=\"true\">\n            <path d=\"M12.5 6.5 7 12a3 3 0 0 1-4-4l5.5-5.5a2 2 0 0 1 3 3L6 11\" />\n        </svg>\n    );\n}\n\n// High importance: double chevron up\nexport function PriorityHighIcon(): JSX.Element {\n    return (\n        <svg {...base} aria-hidden=\"true\">\n            <path d=\"M4 9l4-4 4 4\" />\n            <path d=\"M4 12l4-4 4 4\" />\n        </svg>\n    );\n}\n\n// Low importance: single chevron down\nexport function PriorityLowIcon(): JSX.Element {\n    return (\n        <svg {...base} aria-hidden=\"true\">\n            <path d=\"M4 6l4 4 4-4\" />\n        </svg>\n    );\n}\n","/*\n *  This file is part of CassandraGargoyle Community Project\n *  Licensed under the MIT License - see LICENSE file for details\n */\n\n// EmailViewer toolbar: Reply / Reply-All / Forward actions\n// Composing is out of scope for issue 075, so the buttons render disabled (future work)\n\nimport React from 'react';\nimport { ReplyIcon, ReplyAllIcon, ForwardIcon } from './icons';\n\nexport function EmailToolbar(): JSX.Element {\n    return (\n        <div className=\"email-toolbar\" role=\"toolbar\" aria-label=\"Message actions\">\n            <button className=\"email-toolbar-btn\" type=\"button\" disabled title=\"Reply (coming soon)\">\n                <ReplyIcon />\n                <span>Reply</span>\n            </button>\n            <button className=\"email-toolbar-btn\" type=\"button\" disabled title=\"Reply all (coming soon)\">\n                <ReplyAllIcon />\n                <span>Reply all</span>\n            </button>\n            <button className=\"email-toolbar-btn\" type=\"button\" disabled title=\"Forward (coming soon)\">\n                <ForwardIcon />\n                <span>Forward</span>\n            </button>\n        </div>\n    );\n}\n","/*\n *  This file is part of CassandraGargoyle Community Project\n *  Licensed under the MIT License - see LICENSE file for details\n */\n\n// The message shape EmailViewer renders, independent of the format it was read from\n// A reader (.eml, .msg, ...) produces it; the viewer never sees MIME or MAPI\n\n/** A single mailbox: an address plus an optional display name */\nexport interface EmailAddress {\n    name?: string;\n    address: string;\n}\n\n/** One attachment or inline part, carried as raw bytes so the viewer owns rendering */\nexport interface EmailAttachment {\n    filename: string;\n    mimeType: string;\n    size: number;\n    /** Content-ID (angle brackets stripped) used to resolve inline cid: references */\n    contentId?: string;\n    disposition: 'attachment' | 'inline';\n    bytes: Uint8Array;\n}\n\n/** Message importance; 'normal' renders without a badge */\nexport type EmailImportance = 'high' | 'normal' | 'low';\n\n/**\n * Normalized message the viewer renders. `html` is the message's raw HTML — the viewer\n * sanitizes it and resolves cid: references itself, so a reader can stay DOM-free.\n */\nexport interface EmailMessage {\n    subject: string;\n    from?: EmailAddress;\n    to: EmailAddress[];\n    cc: EmailAddress[];\n    date?: Date;\n    importance: EmailImportance;\n    html?: string;\n    text?: string;\n    attachments: EmailAttachment[];\n    headers: Array<{ key: string; value: string }>;\n    /** Original source shown on the Source tab */\n    raw: string;\n}\n\n/** Turns the message date into the text of the Date row */\nexport type EmailDateFormatter = (date: Date) => string;\n\n/** Zero-pad a positive integer to the given width */\nfunction pad(value: number, width = 2): string {\n    return String(value).padStart(width, '0');\n}\n\n/**\n * Default date format: local time as `YYYY-MM-DD HH:MM:SS`.\n *\n * Unambiguous in every region and never drops the seconds a mail Date: header carries.\n * An invalid Date yields an empty string, so the row is omitted rather than showing `NaN`.\n */\nexport function formatEmailDate(date: Date): string {\n    if (Number.isNaN(date.getTime())) return '';\n    const ymd = `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;\n    const hms = `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;\n    return `${ymd} ${hms}`;\n}\n","/*\n *  This file is part of CassandraGargoyle Community Project\n *  Licensed under the MIT License - see LICENSE file for details\n */\n\n// EmailViewer header block: subject plus From / To / Cc / Date rows\n// Renders the normalized EmailMessage fields; omits empty recipient rows\n\nimport React from 'react';\nimport { formatEmailDate, type EmailAddress, type EmailDateFormatter, type EmailMessage } from './types';\nimport { PriorityHighIcon, PriorityLowIcon } from './icons';\n\n// Render an address as \"Name <addr>\" or just the address when unnamed\nfunction formatAddress(a: EmailAddress): string {\n    return a.name ? `${a.name} <${a.address}>` : a.address;\n}\n\nfunction formatAddresses(list: EmailAddress[]): string {\n    return list.map(formatAddress).join(', ');\n}\n\n// Badge shown next to the subject for non-normal importance; normal renders nothing\nfunction ImportanceBadge({ importance }: { importance: EmailMessage['importance'] }): JSX.Element | null {\n    if (importance === 'high') {\n        return (\n            <span className=\"email-importance email-importance-high\" title=\"High importance\">\n                <PriorityHighIcon />\n                High priority\n            </span>\n        );\n    }\n    if (importance === 'low') {\n        return (\n            <span className=\"email-importance email-importance-low\" title=\"Low importance\">\n                <PriorityLowIcon />\n                Low priority\n            </span>\n        );\n    }\n    return null;\n}\n\nfunction AddressRow({ label, value }: { label: string; value: string }): JSX.Element | null {\n    if (!value) return null;\n    return (\n        <div className=\"email-header-row\">\n            <span className=\"email-header-label\">{label}</span>\n            <span className=\"email-header-value\">{value}</span>\n        </div>\n    );\n}\n\nexport function EmailHeader({ email, formatDate = formatEmailDate }: { email: EmailMessage; formatDate?: EmailDateFormatter }): JSX.Element {\n    const date = email.date ? formatDate(email.date) : '';\n    return (\n        <div className=\"email-header\">\n            <div className=\"email-header-subject-row\">\n                <span className=\"email-header-subject\">{email.subject}</span>\n                <ImportanceBadge importance={email.importance} />\n            </div>\n            <AddressRow label=\"From\" value={email.from ? formatAddress(email.from) : ''} />\n            <AddressRow label=\"To\" value={formatAddresses(email.to)} />\n            <AddressRow label=\"Cc\" value={formatAddresses(email.cc)} />\n            <AddressRow label=\"Date\" value={date} />\n        </div>\n    );\n}\n","/*\n *  This file is part of CassandraGargoyle Community Project\n *  Licensed under the MIT License - see LICENSE file for details\n */\n\n// EmailViewer attachment strip: one chip per attachment with a download action\n// Attachment bytes are never executed — download only, no auto-open (issue 075 security)\n\nimport React from 'react';\nimport type { EmailAttachment } from './types';\nimport { AttachmentIcon, DownloadIcon } from './icons';\n\n// Human-readable byte size (B / KB / MB) for the chip label\nfunction formatSize(bytes: number): string {\n    if (bytes < 1024) return `${bytes} B`;\n    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n}\n\n// Save an attachment's raw bytes via a transient object URL, revoked right after the click\nfunction downloadAttachment(att: EmailAttachment): void {\n    const url = URL.createObjectURL(new Blob([att.bytes as BlobPart], { type: att.mimeType }));\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = att.filename;\n    document.body.appendChild(a);\n    a.click();\n    a.remove();\n    URL.revokeObjectURL(url);\n}\n\nexport function AttachmentList({ attachments }: { attachments: EmailAttachment[] }): JSX.Element | null {\n    if (attachments.length === 0) return null;\n    return (\n        <div className=\"email-attachments\" aria-label=\"Attachments\">\n            {attachments.map((att, i) => (\n                <button\n                    key={`${att.filename}-${i}`}\n                    type=\"button\"\n                    className=\"email-attachment-chip\"\n                    onClick={() => downloadAttachment(att)}\n                    title={`Download ${att.filename} (${formatSize(att.size)})`}\n                >\n                    <span className=\"email-attachment-icon\">\n                        <AttachmentIcon />\n                    </span>\n                    <span className=\"email-attachment-name\">{att.filename}</span>\n                    <span className=\"email-attachment-size\">{formatSize(att.size)}</span>\n                    <span className=\"email-attachment-download\">\n                        <DownloadIcon />\n                    </span>\n                </button>\n            ))}\n        </div>\n    );\n}\n","/*\n *  This file is part of CassandraGargoyle Community Project\n *  Licensed under the MIT License - see LICENSE file for details\n */\n\n// Turns a message's raw HTML into a safe sandboxed-iframe document: resolves inline cid:\n// images to data: URIs, sanitizes with DOMPurify, and blocks remote content via CSP (issue 075)\n\nimport DOMPurify from 'dompurify';\nimport type { EmailAttachment } from './types';\n\n// Tags never useful in a mail body and risky to keep: scripts, framing, plugins, forms, and\n// resource-loading head elements (remote CSS/base). DOMPurify strips scripts/handlers anyway;\n// this is defense in depth alongside the iframe sandbox and CSP.\nconst FORBID_TAGS = ['script', 'iframe', 'object', 'embed', 'form', 'base', 'meta', 'link'];\n\n// Base64-encode raw bytes (chunked to avoid call-stack limits on large inputs)\nfunction bytesToBase64(bytes: Uint8Array): string {\n    let binary = '';\n    const chunk = 0x8000;\n    for (let i = 0; i < bytes.length; i += chunk) {\n        binary += String.fromCharCode(...bytes.subarray(i, i + chunk));\n    }\n    return btoa(binary);\n}\n\n/**\n * Build the sandboxed-iframe document for a mail's HTML body. Inline cid: references are\n * rewritten to data: URIs built from the matching inline attachments — data: (not blob:)\n * because a fully sandboxed iframe has an opaque origin and cannot load the parent's blob:\n * URLs. Everything else is sanitized and wrapped in a restrictive CSP that permits only\n * data: images and inline styles, so remote content (tracking pixels, external CSS) is\n * blocked by default.\n */\nexport function buildInlineHtml(rawHtml: string, attachments: EmailAttachment[]): string {\n    const cidMap = new Map<string, string>();\n    for (const att of attachments) {\n        if (att.disposition === 'inline' && att.contentId) {\n            cidMap.set(att.contentId, `data:${att.mimeType};base64,${bytesToBase64(att.bytes)}`);\n        }\n    }\n\n    // Rewrite cid: sources to their data: URI before sanitizing\n    const doc = new DOMParser().parseFromString(rawHtml, 'text/html');\n    doc.querySelectorAll('[src]').forEach((el) => {\n        const src = el.getAttribute('src') ?? '';\n        if (src.toLowerCase().startsWith('cid:')) {\n            const id = src.slice(4).replace(/^<|>$/g, '');\n            const mapped = cidMap.get(id);\n            if (mapped) el.setAttribute('src', mapped);\n            else el.removeAttribute('src');\n        }\n    });\n\n    const clean = DOMPurify.sanitize(doc.body.innerHTML, {\n        FORBID_TAGS,\n        FORBID_ATTR: ['ping'],\n        ALLOW_UNKNOWN_PROTOCOLS: false,\n    });\n\n    return [\n        '<!doctype html><html><head><meta charset=\"utf-8\">',\n        '<meta http-equiv=\"Content-Security-Policy\" ',\n        'content=\"default-src \\'none\\'; img-src data:; style-src \\'unsafe-inline\\'; font-src data:;\">',\n        '<style>html,body{margin:0;padding:12px;background:#ffffff;color:#111111;',\n        \"font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:13px;line-height:1.5;}\",\n        'img{max-width:100%;height:auto;}a{color:#0645ad;}</style>',\n        '</head><body>',\n        clean,\n        '</body></html>',\n    ].join('');\n}\n","/*\n *  This file is part of CassandraGargoyle Community Project\n *  Licensed under the MIT License - see LICENSE file for details\n */\n\n// EmailViewer tabbed body: HTML (sandboxed iframe) / Plain text / Source (raw MIME) / Headers\n// Only the tabs backed by content are shown; the HTML tab is preferred when present\n\nimport React, { useEffect, useMemo, useState } from 'react';\nimport type { EmailMessage } from './types';\nimport { buildInlineHtml } from './inlineHtml';\n\ntype BodyTab = 'html' | 'text' | 'source' | 'headers';\n\n// Renders the sanitized HTML body in a fully sandboxed iframe (no scripts, no same-origin).\n// Inline images are embedded as data: URIs, so nothing outside the srcDoc is loaded.\nfunction HtmlBody({ email }: { email: EmailMessage }): JSX.Element {\n    const srcDoc = useMemo(() => buildInlineHtml(email.html ?? '', email.attachments), [email]);\n    return <iframe className=\"email-html-frame\" title=\"Message body\" sandbox=\"\" srcDoc={srcDoc} />;\n}\n\nexport function EmailBody({ email }: { email: EmailMessage }): JSX.Element {\n    // Available tabs, in display order — HTML first when the message has an HTML part\n    const tabs = useMemo<BodyTab[]>(() => {\n        const list: BodyTab[] = [];\n        if (email.html) list.push('html');\n        if (email.text) list.push('text');\n        list.push('source', 'headers');\n        return list;\n    }, [email]);\n\n    const [active, setActive] = useState<BodyTab>(tabs[0]);\n\n    // Reset to the first available tab whenever a different message is shown\n    useEffect(() => setActive(tabs[0]), [tabs]);\n\n    const labels: Record<BodyTab, string> = {\n        html: 'HTML',\n        text: 'Plain text',\n        source: 'Source',\n        headers: 'Headers',\n    };\n\n    return (\n        <div className=\"email-body\">\n            <div className=\"email-body-tabs\" role=\"tablist\">\n                {tabs.map((tab) => (\n                    <button\n                        key={tab}\n                        type=\"button\"\n                        role=\"tab\"\n                        aria-selected={active === tab}\n                        className={`email-body-tab${active === tab ? ' email-body-tab-active' : ''}`}\n                        onClick={() => setActive(tab)}\n                    >\n                        {labels[tab]}\n                    </button>\n                ))}\n            </div>\n            <div className=\"email-body-content\">\n                {active === 'html' && <HtmlBody email={email} />}\n                {active === 'text' && <pre className=\"email-body-text\">{email.text}</pre>}\n                {active === 'source' && <pre className=\"email-body-source\">{email.raw}</pre>}\n                {active === 'headers' && (\n                    <table className=\"email-headers-table\">\n                        <tbody>\n                            {email.headers.map((h, i) => (\n                                <tr key={`${h.key}-${i}`}>\n                                    <td className=\"email-headers-key\">{h.key}</td>\n                                    <td className=\"email-headers-value\">{h.value}</td>\n                                </tr>\n                            ))}\n                        </tbody>\n                    </table>\n                )}\n            </div>\n        </div>\n    );\n}\n","/*\n *  This file is part of CassandraGargoyle Community Project\n *  Licensed under the MIT License - see LICENSE file for details\n */\n\n/*\n * EmailViewer styles: monochrome icons, theme CSS variables, 4px spacing grid\n * (per docs/architecture/GUI-DESIGN-PRINCIPLES.md). Fills its host container.\n */\n.email-viewer {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    min-height: 0;\n    background: var(--vscode-editor-background, #1e1e1e);\n    color: var(--vscode-foreground, #cccccc);\n    font-family: var(--vscode-font-family, 'Segoe UI', sans-serif);\n    font-size: 13px;\n}\n\n/* Toolbar */\n.email-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    flex-shrink: 0;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--vscode-sideBar-border, #3c3c3c);\n}\n\n.email-toolbar-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 8px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--vscode-foreground, #cccccc);\n    background: transparent;\n    border: 1px solid transparent;\n    border-radius: 4px;\n    cursor: pointer;\n}\n\n.email-toolbar-btn:hover:not(:disabled) {\n    background: var(--vscode-toolbar-hoverBackground, rgba(255, 255, 255, 0.08));\n}\n\n.email-toolbar-btn:focus-visible {\n    outline: 2px solid var(--vscode-focusBorder, #75beff);\n    outline-offset: 2px;\n}\n\n.email-toolbar-btn:disabled {\n    opacity: 0.3;\n    cursor: default;\n}\n\n.email-toolbar-btn svg {\n    flex-shrink: 0;\n}\n\n/* Header block */\n.email-header {\n    flex-shrink: 0;\n    padding: 12px;\n    border-bottom: 1px solid var(--vscode-sideBar-border, #3c3c3c);\n}\n\n.email-header-subject-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 8px;\n}\n\n.email-header-subject {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--vscode-foreground, #cccccc);\n}\n\n/* Importance badge — a small status indicator, so semantic color is allowed here */\n.email-importance {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    flex-shrink: 0;\n    padding: 2px 6px;\n    font-size: 11px;\n    font-weight: 600;\n    border-radius: 4px;\n    white-space: nowrap;\n}\n\n.email-importance svg {\n    width: 14px;\n    height: 14px;\n}\n\n.email-importance-high {\n    color: #febc2e;\n    border: 1px solid rgba(254, 188, 46, 0.5);\n}\n\n.email-importance-low {\n    color: var(--vscode-descriptionForeground, #858585);\n    border: 1px solid var(--vscode-sideBar-border, #3c3c3c);\n}\n\n.email-header-row {\n    display: flex;\n    gap: 8px;\n    font-size: 12px;\n    line-height: 1.6;\n}\n\n.email-header-label {\n    flex-shrink: 0;\n    width: 44px;\n    color: var(--vscode-descriptionForeground, #858585);\n}\n\n.email-header-value {\n    color: var(--vscode-foreground, #cccccc);\n    word-break: break-word;\n}\n\n/* Attachment chips */\n.email-attachments {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    flex-shrink: 0;\n    padding: 8px 12px;\n    border-bottom: 1px solid var(--vscode-sideBar-border, #3c3c3c);\n}\n\n.email-attachment-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    max-width: 260px;\n    padding: 4px 8px;\n    font-size: 12px;\n    color: var(--vscode-foreground, #cccccc);\n    background: var(--vscode-badge-background, rgba(255, 255, 255, 0.06));\n    border: 1px solid var(--vscode-sideBar-border, #3c3c3c);\n    border-radius: 4px;\n    cursor: pointer;\n}\n\n.email-attachment-chip:hover {\n    background: var(--vscode-list-hoverBackground, rgba(255, 255, 255, 0.05));\n}\n\n.email-attachment-chip:focus-visible {\n    outline: 2px solid var(--vscode-focusBorder, #75beff);\n    outline-offset: 2px;\n}\n\n.email-attachment-icon,\n.email-attachment-download {\n    display: inline-flex;\n    flex-shrink: 0;\n    color: var(--vscode-descriptionForeground, #858585);\n}\n\n.email-attachment-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.email-attachment-size {\n    flex-shrink: 0;\n    color: var(--vscode-descriptionForeground, #858585);\n}\n\n/* Tabbed body */\n.email-body {\n    flex: 1 1 0;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n.email-body-tabs {\n    display: flex;\n    gap: 2px;\n    flex-shrink: 0;\n    padding: 0 12px;\n    border-bottom: 1px solid var(--vscode-sideBar-border, #3c3c3c);\n}\n\n.email-body-tab {\n    padding: 6px 12px;\n    font-size: 12px;\n    color: var(--vscode-descriptionForeground, #858585);\n    background: transparent;\n    border: none;\n    border-bottom: 2px solid transparent;\n    cursor: pointer;\n}\n\n.email-body-tab:hover {\n    color: var(--vscode-foreground, #cccccc);\n}\n\n.email-body-tab:focus-visible {\n    outline: 2px solid var(--vscode-focusBorder, #75beff);\n    outline-offset: -2px;\n}\n\n.email-body-tab-active {\n    color: var(--vscode-foreground, #cccccc);\n    border-bottom-color: var(--vscode-focusBorder, #75beff);\n}\n\n.email-body-content {\n    flex: 1 1 0;\n    min-height: 0;\n    overflow: auto;\n    position: relative;\n}\n\n/* HTML body renders in an isolated, sandboxed iframe (its own document/styles) */\n.email-html-frame {\n    width: 100%;\n    height: 100%;\n    border: none;\n    background: #ffffff;\n}\n\n.email-body-text,\n.email-body-source {\n    margin: 0;\n    padding: 12px;\n    white-space: pre-wrap;\n    word-break: break-word;\n    font-family: var(--vscode-editor-font-family, 'Consolas', monospace);\n    font-size: 12px;\n    color: var(--vscode-foreground, #cccccc);\n}\n\n.email-headers-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 12px;\n}\n\n.email-headers-table td {\n    padding: 4px 12px;\n    vertical-align: top;\n    border-bottom: 1px solid var(--vscode-sideBar-border, #3c3c3c);\n}\n\n.email-headers-key {\n    width: 180px;\n    color: var(--vscode-descriptionForeground, #858585);\n    word-break: break-word;\n}\n\n.email-headers-value {\n    color: var(--vscode-foreground, #cccccc);\n    word-break: break-word;\n    font-family: var(--vscode-editor-font-family, 'Consolas', monospace);\n}\n","/*\n *  This file is part of CassandraGargoyle Community Project\n *  Licensed under the MIT License - see LICENSE file for details\n */\n\n// Read-only e-mail viewer: renders a format-agnostic EmailMessage (from .eml, .msg or any reader)\n// Layout: toolbar, header, attachment chips, tabbed body — fills its host container\n\nimport React from 'react';\nimport type { EmailDateFormatter, EmailMessage } from './types';\nimport { EmailToolbar } from './EmailToolbar';\nimport { EmailHeader } from './EmailHeader';\nimport { AttachmentList } from './AttachmentList';\nimport { EmailBody } from './EmailBody';\nimport emailViewerStyles from './EmailViewer.css';\n\n// Inject styles once when bundled with the 'text' loader (single-file bundle, the\n// published package). Under the 'css' loader the import resolves to a non-string and\n// a sibling stylesheet is emitted instead, so this injection is skipped.\nif (\n    typeof document !== 'undefined' &&\n    typeof emailViewerStyles === 'string' &&\n    emailViewerStyles &&\n    !document.getElementById('email-viewer-styles')\n) {\n    const styleEl = document.createElement('style');\n    styleEl.id = 'email-viewer-styles';\n    styleEl.textContent = emailViewerStyles;\n    document.head.appendChild(styleEl);\n}\n\nexport interface EmailViewerProps {\n    // Normalized message to display; produced by a reader independent of format\n    email: EmailMessage;\n    // Formats the Date row. The host decides how dates look — typically the operating\n    // system's own pattern, which a webview or an Electron window cannot read from its\n    // environment. Omitted means the fixed `YYYY-MM-DD HH:MM:SS` local-time pattern\n    formatDate?: EmailDateFormatter;\n}\n\nexport function EmailViewer({ email, formatDate }: EmailViewerProps): JSX.Element {\n    return (\n        <div className=\"email-viewer\">\n            <EmailToolbar />\n            <EmailHeader email={email} formatDate={formatDate} />\n            <AttachmentList attachments={email.attachments} />\n            <EmailBody email={email} />\n        </div>\n    );\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,67 @@
 {
   "name": "@cassandragargoyle/react-viewer",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "React viewers for document formats, shared across the CassandraGargoyle ecosystem",
+  "license": "MIT",
+  "type": "module",
+  "keywords": [
+    "react",
+    "viewer",
+    "email",
+    "typescript",
+    "vscode-webview",
+    "cassandragargoyle"
+  ],
+  "homepage": "https://github.com/cassandragargoyle/react-viewer#readme",
+  "bugs": {
+    "url": "https://github.com/cassandragargoyle/react-viewer/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cassandragargoyle/react-viewer.git"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "dompurify": "^3.2.7",
+    "jsdom": "^25.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.9.3",
+    "vite": "^8.1.4",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.10"
+  },
+  "peerDependencies": {
+    "dompurify": "^3.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}