@volter/twin-postmark 0.1.0

package/dist/client/postmark-mirror.css

@@ -0,0 +1,79 @@
+:root {
+  --bg: #09090b;
+  --panel: #131316;
+  --panel-2: #1b1b20;
+  --border: #2a2a30;
+  --text: #ededf0;
+  --muted: #9a9aa5;
+  --accent: #ffe01b; /* Postmark yellow */
+  --accent-2: #facc15;
+  --ok: #22c55e;
+  --warn: #f59e0b;
+  --bad: #ef4444;
+  --neutral: #6b6b7b;
+}
+* { box-sizing: border-box; }
+html, body, #root { height: 100%; margin: 0; }
+body {
+  background: var(--bg);
+  color: var(--text);
+  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.app { display: flex; flex-direction: column; height: 100%; }
+.topbar {
+  display: flex; align-items: baseline; gap: 12px;
+  padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--panel);
+}
+.brand { font-weight: 700; color: var(--accent); font-size: 16px; }
+.subtitle { color: var(--muted); font-size: 12px; }
+/* The pane a reader OPENED gets the width. Three near-fixed tracks left the detail with
+   whatever was left over — 325px inside an 865px mirror embedded in a Room — and its own
+   label column then took 220px of that, so a MessageID rendered four characters per line.
+   Both tracks answer to the width they are actually given now. */
+.body { display: grid; grid-template-columns: 200px minmax(220px, 0.8fr) minmax(0, 1.4fr); flex: 1; min-height: 0; }
+.nav { border-right: 1px solid var(--border); background: var(--panel); padding: 8px; overflow: auto; }
+.nav-item {
+  display: block; width: 100%; text-align: left; padding: 8px 10px; margin-bottom: 2px;
+  background: transparent; color: var(--text); border: 0; border-radius: 6px; cursor: pointer;
+}
+.nav-item:hover { background: var(--panel-2); }
+.nav-item.active { background: var(--panel-2); color: #fff; border-left: 3px solid var(--accent); }
+.list { border-right: 1px solid var(--border); overflow: auto; background: var(--bg); }
+.list-head { padding: 10px 14px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); }
+.row {
+  display: block; width: 100%; text-align: left; padding: 10px 14px; border: 0;
+  border-bottom: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer;
+}
+.row:hover { background: var(--panel-2); }
+.row.selected { background: var(--panel-2); border-left: 3px solid var(--accent-2); }
+.row-title { font-weight: 600; }
+.row-sub { color: var(--muted); font-size: 12px; }
+.detail { overflow: auto; padding: 16px 18px; }
+.detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
+.message-view { margin-bottom: 16px; }
+.message-meta { color: var(--muted); font-size: 12px; margin-bottom: 10px; display: grid; gap: 2px; }
+.timeline { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
+.timeline .event {
+  padding: 2px 8px; border-radius: 4px; font-size: 11px; text-transform: capitalize;
+  border: 1px solid var(--border); color: var(--muted);
+}
+.timeline .event.ok { color: var(--ok); border-color: var(--ok); }
+.timeline .event.warn { color: var(--warn); border-color: var(--warn); }
+.timeline .event.bad { color: var(--bad); border-color: var(--bad); }
+.message-html { width: 100%; height: 320px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
+.message-text { white-space: pre-wrap; word-break: break-word; background: var(--panel); padding: 12px; border-radius: 6px; border: 1px solid var(--border); }
+.detail-lines { margin: 12px 0 0; }
+.detail-line { display: grid; grid-template-columns: minmax(88px, min(220px, 38%)) minmax(0, 1fr); gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); }
+.detail-line dt { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
+.detail-line dd { margin: 0; word-break: break-word; }
+.empty { padding: 16px; color: var(--muted); }
+.empty.error { color: var(--bad); }
+.pill {
+  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px;
+  text-transform: capitalize; border: 1px solid var(--border);
+}
+.pill.ok { color: var(--ok); border-color: var(--ok); }
+.pill.warn { color: var(--warn); border-color: var(--warn); }
+.pill.bad { color: var(--bad); border-color: var(--bad); }
+.pill.neutral { color: var(--neutral); }

package/dist/client/postmark-mirror.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { type PostmarkRow, type FlatLine } from '../src/postmark-mirror-ui.js';
+export declare function StatusPill({ value }: {
+    value: any;
+}): React.JSX.Element;
+/** The rendered body preview — html in an isolated frame, text in a <pre>. */
+export declare function MessageBody({ message }: {
+    message: PostmarkRow;
+}): React.JSX.Element;
+/** The MessageEvents timeline the twin recorded for a sent message. */
+export declare function DeliveryTimeline({ message }: {
+    message: PostmarkRow;
+}): React.JSX.Element;
+/** Render the flattened nested-field lines for the detail panel. */
+export declare function NestedLines({ lines }: {
+    lines: FlatLine[];
+}): React.JSX.Element;
+export declare function App(): React.JSX.Element;

package/dist/client/postmark-mirror.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Postmark UI mirror — React/TSX client (Bun-bundled). A Postmark-dashboard-style console:
+// top bar + left nav + list/detail split, with Activity (the outbound message stream) as the
+// main screen, plus Bounces, Templates, Streams, Webhooks and Suppressions.
+//
+// It renders by consuming the twin's OWN REST API on the same origin, at POSTMARK'S REAL
+// PATHS (/messages/outbound, /messages/outbound/:id/details, /bounces, /templates,
+// /message-streams, /webhooks, /message-streams/outbound/suppressions/dump) — the exact
+// endpoints a real integration calls. One code path serves both, so API↔UI parity holds by
+// construction.
+//
+// The pure format helpers live in ../src/postmark-mirror-ui.ts so they can be unit-tested AND
+// shared here (Bun tree-shakes the server-only exports out of this browser bundle).
+import { useEffect, useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { recipientsOf, messageSubject, messageStatus, messagePreview, deliveryTimeline, formatPostmarkDate, statusTone, flattenPostmarkValue, POSTMARK_MIRROR_SECTIONS, } from "../src/postmark-mirror-ui.js";
+// WHERE THIS MIRROR LIVES. Served at a vendor root the base is '' (fetches are root-relative, as
+// before); served under a path prefix with a <base> tag every read and write resolves inside that
+// prefix instead of escaping it.
+const WIRE_BASE = typeof document === 'undefined' || document.querySelector('base[href]') === null ? '' : new URL('.', document.baseURI).pathname.replace(/\/$/, '');
+export function StatusPill({ value }) {
+    const v = String(value ?? '');
+    return _jsx("span", { className: `pill ${statusTone(v)}`, children: v || '—' });
+}
+/** The rendered body preview — html in an isolated frame, text in a <pre>. */
+export function MessageBody({ message }) {
+    const preview = messagePreview(message);
+    if (preview.kind === 'html') {
+        return _jsx("iframe", { className: "message-html", title: "message body", sandbox: "", srcDoc: preview.value });
+    }
+    if (preview.kind === 'text') {
+        return _jsx("pre", { className: "message-text", children: preview.value });
+    }
+    return _jsx("div", { className: "empty", children: "No body." });
+}
+/** The MessageEvents timeline the twin recorded for a sent message. */
+export function DeliveryTimeline({ message }) {
+    const events = deliveryTimeline(message);
+    return (_jsx("div", { className: "timeline", children: events.map((ev, i) => (_jsx("span", { className: `event ${statusTone(ev)}`, children: ev }, `${ev}-${i}`))) }));
+}
+/** Render the flattened nested-field lines for the detail panel. */
+export function NestedLines({ lines }) {
+    return (_jsx("dl", { className: "detail-lines", children: lines.map((ln, i) => (_jsxs("div", { className: "detail-line", children: [_jsx("dt", { className: "mono", children: ln.key }), _jsx("dd", { className: "mono", children: ln.value })] }, `${ln.key}-${i}`))) }));
+}
+/** The one-line summary each nav section shows for a row. */
+function rowTitle(section, r) {
+    if (section.key === 'messages')
+        return messageSubject(r);
+    if (section.key === 'bounces')
+        return `${r.Type ?? 'Bounce'} · ${r.Email ?? ''}`;
+    if (section.key === 'templates')
+        return String(r.Name ?? r.TemplateId ?? '');
+    if (section.key === 'streams')
+        return String(r.Name ?? r.ID ?? '');
+    if (section.key === 'webhooks')
+        return String(r.Url ?? r.ID ?? '');
+    if (section.key === 'suppressions')
+        return String(r.EmailAddress ?? '');
+    return String(r[section.idKey] ?? '');
+}
+function rowSubtitle(section, r) {
+    if (section.key === 'messages')
+        return `to ${recipientsOf(r)} · ${messageStatus(r)}`;
+    if (section.key === 'bounces')
+        return `${r.Subject ?? ''} · ${r.Inactive ? 'inactive' : 'active'}`;
+    if (section.key === 'templates')
+        return `${r.Alias ?? '(no alias)'} · ${r.TemplateType ?? ''}`;
+    if (section.key === 'streams')
+        return `${r.MessageStreamType ?? ''} · ${r.ID ?? ''}`;
+    if (section.key === 'webhooks')
+        return String(r.MessageStream ?? '');
+    if (section.key === 'suppressions')
+        return `${r.SuppressionReason ?? ''} · ${r.Origin ?? ''}`;
+    return '';
+}
+/** The status value each section pins to its pill. */
+function rowStatus(section, r) {
+    if (section.key === 'messages')
+        return messageStatus(r);
+    if (section.key === 'bounces')
+        return String(r.Type ?? '');
+    if (section.key === 'templates')
+        return r.Active ? 'Active' : 'Inactive';
+    if (section.key === 'streams')
+        return r.ArchivedAt ? 'Blocked' : 'Active';
+    if (section.key === 'suppressions')
+        return String(r.SuppressionReason ?? '');
+    return '';
+}
+function useCollection(section) {
+    const [rows, setRows] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    useEffect(() => {
+        let live = true;
+        setLoading(true);
+        setError('');
+        fetch(`${WIRE_BASE}${section.path}`)
+            .then((r) => r.json())
+            .then((body) => {
+            if (!live)
+                return;
+            const data = Array.isArray(body) ? body : Array.isArray(body?.[section.collection]) ? body[section.collection] : [];
+            setRows(data);
+            setLoading(false);
+        })
+            .catch((e) => { if (live) {
+            setError(String(e));
+            setLoading(false);
+        } });
+        return () => { live = false; };
+    }, [section.path, section.collection]);
+    return { rows, loading, error };
+}
+/** The Activity detail pane fetches the message's FULL record — Postmark's list endpoint
+ *  deliberately omits bodies + MessageEvents, exactly as the real API does. */
+function useMessageDetails(messageId) {
+    const [detail, setDetail] = useState(null);
+    useEffect(() => {
+        let live = true;
+        setDetail(null);
+        if (!messageId)
+            return;
+        fetch(`${WIRE_BASE}/messages/outbound/${encodeURIComponent(messageId)}/details`)
+            .then((r) => r.json())
+            .then((body) => { if (live && body && !body.ErrorCode)
+            setDetail(body); })
+            .catch(() => { });
+        return () => { live = false; };
+    }, [messageId]);
+    return detail;
+}
+export function App() {
+    const [sectionKey, setSectionKey] = useState(POSTMARK_MIRROR_SECTIONS[0].key);
+    const [selectedId, setSelectedId] = useState(null);
+    const section = POSTMARK_MIRROR_SECTIONS.find((s) => s.key === sectionKey);
+    const { rows, loading, error } = useCollection(section);
+    const selected = useMemo(() => rows.find((r) => String(r[section.idKey]) === selectedId) ?? rows[0] ?? null, [rows, selectedId, section.idKey]);
+    const isMessages = section.key === 'messages';
+    const details = useMessageDetails(isMessages && selected ? String(selected.MessageID) : null);
+    const shown = details ?? selected;
+    const lines = useMemo(() => (shown ? flattenPostmarkValue(shown) : []), [shown]);
+    return (_jsxs("div", { className: "app", children: [_jsxs("header", { className: "topbar", children: [_jsx("span", { className: "brand", children: "Postmark twin" }), _jsx("span", { className: "subtitle", children: "local transactional email mirror \u2014 activity \u00B7 bounces \u00B7 templates \u00B7 streams" })] }), _jsxs("div", { className: "body", children: [_jsx("nav", { className: "nav", children: POSTMARK_MIRROR_SECTIONS.map((s) => (_jsx("button", { className: `nav-item ${s.key === sectionKey ? 'active' : ''}`, onClick: () => { setSectionKey(s.key); setSelectedId(null); }, children: s.label }, s.key))) }), _jsxs("section", { className: "list", children: [_jsxs("div", { className: "list-head", children: [section.label, !loading ? ` (${rows.length})` : ''] }), loading && _jsx("div", { className: "empty", children: "Loading\u2026" }), error && _jsx("div", { className: "empty error", children: error }), !loading && !error && rows.length === 0 && _jsxs("div", { className: "empty", children: ["No ", section.label.toLowerCase(), " yet."] }), rows.map((r, i) => (_jsxs("button", { className: `row ${selected && String(selected[section.idKey]) === String(r[section.idKey]) ? 'selected' : ''}`, onClick: () => setSelectedId(String(r[section.idKey])), children: [_jsx("div", { className: "row-title", children: rowTitle(section, r) }), _jsx("div", { className: "row-sub mono", children: rowSubtitle(section, r) })] }, `${String(r[section.idKey])}-${i}`)))] }), _jsx("aside", { className: "detail", children: shown ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "detail-head", children: [_jsx("span", { className: "mono", children: String(shown[section.idKey] ?? '') }), _jsx(StatusPill, { value: rowStatus(section, shown) })] }), isMessages && (_jsxs("div", { className: "message-view", children: [_jsxs("div", { className: "message-meta mono", children: [_jsxs("div", { children: ["from ", String(shown.From ?? '—')] }), _jsxs("div", { children: ["to ", recipientsOf(shown)] }), _jsxs("div", { children: [formatPostmarkDate(shown.ReceivedAt), " \u00B7 stream ", String(shown.MessageStream ?? '—')] })] }), _jsx(DeliveryTimeline, { message: shown }), _jsx(MessageBody, { message: shown })] })), _jsx(NestedLines, { lines: lines })] })) : (_jsx("div", { className: "empty", children: "Select a record." })) })] })] }));
+}
+// Browser-only mount. Guarded so the exported presentational components (StatusPill,
+// MessageBody, DeliveryTimeline, NestedLines) can be imported and renderToStaticMarkup'd in a
+// DOM-less test/SSR environment (the data-coupled UI verifies) without this top-level
+// `document` access throwing. The browser bundle still mounts exactly as before.
+if (typeof document !== 'undefined') {
+    const rootEl = document.getElementById('root');
+    if (rootEl)
+        createRoot(rootEl).render(_jsx(App, {}));
+}

package/dist/client/postmark-mirror.tsx

@@ -0,0 +1,221 @@
+// Postmark UI mirror — React/TSX client (Bun-bundled). A Postmark-dashboard-style console:
+// top bar + left nav + list/detail split, with Activity (the outbound message stream) as the
+// main screen, plus Bounces, Templates, Streams, Webhooks and Suppressions.
+//
+// It renders by consuming the twin's OWN REST API on the same origin, at POSTMARK'S REAL
+// PATHS (/messages/outbound, /messages/outbound/:id/details, /bounces, /templates,
+// /message-streams, /webhooks, /message-streams/outbound/suppressions/dump) — the exact
+// endpoints a real integration calls. One code path serves both, so API↔UI parity holds by
+// construction.
+//
+// The pure format helpers live in ../src/postmark-mirror-ui.ts so they can be unit-tested AND
+// shared here (Bun tree-shakes the server-only exports out of this browser bundle).
+import React, { useEffect, useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import {
+  recipientsOf, messageSubject, messageStatus, messagePreview, deliveryTimeline,
+  formatPostmarkDate, statusTone, flattenPostmarkValue, POSTMARK_MIRROR_SECTIONS,
+  type PostmarkRow, type FlatLine, type MirrorSection,
+} from '../src/postmark-mirror-ui.ts';
+
+// WHERE THIS MIRROR LIVES. Served at a vendor root the base is '' (fetches are root-relative, as
+// before); served under a path prefix with a <base> tag every read and write resolves inside that
+// prefix instead of escaping it.
+const WIRE_BASE = typeof document === 'undefined' || document.querySelector('base[href]') === null ? '' : new URL('.', document.baseURI).pathname.replace(/\/$/, '');
+
+export function StatusPill({ value }: { value: any }) {
+  const v = String(value ?? '');
+  return <span className={`pill ${statusTone(v)}`}>{v || '—'}</span>;
+}
+
+/** The rendered body preview — html in an isolated frame, text in a <pre>. */
+export function MessageBody({ message }: { message: PostmarkRow }) {
+  const preview = messagePreview(message);
+  if (preview.kind === 'html') {
+    return <iframe className="message-html" title="message body" sandbox="" srcDoc={preview.value} />;
+  }
+  if (preview.kind === 'text') {
+    return <pre className="message-text">{preview.value}</pre>;
+  }
+  return <div className="empty">No body.</div>;
+}
+
+/** The MessageEvents timeline the twin recorded for a sent message. */
+export function DeliveryTimeline({ message }: { message: PostmarkRow }) {
+  const events = deliveryTimeline(message);
+  return (
+    <div className="timeline">
+      {events.map((ev, i) => (
+        <span key={`${ev}-${i}`} className={`event ${statusTone(ev)}`}>{ev}</span>
+      ))}
+    </div>
+  );
+}
+
+/** Render the flattened nested-field lines for the detail panel. */
+export function NestedLines({ lines }: { lines: FlatLine[] }) {
+  return (
+    <dl className="detail-lines">
+      {lines.map((ln, i) => (
+        <div className="detail-line" key={`${ln.key}-${i}`}>
+          <dt className="mono">{ln.key}</dt>
+          <dd className="mono">{ln.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+/** The one-line summary each nav section shows for a row. */
+function rowTitle(section: MirrorSection, r: PostmarkRow): string {
+  if (section.key === 'messages') return messageSubject(r);
+  if (section.key === 'bounces') return `${r.Type ?? 'Bounce'} · ${r.Email ?? ''}`;
+  if (section.key === 'templates') return String(r.Name ?? r.TemplateId ?? '');
+  if (section.key === 'streams') return String(r.Name ?? r.ID ?? '');
+  if (section.key === 'webhooks') return String(r.Url ?? r.ID ?? '');
+  if (section.key === 'suppressions') return String(r.EmailAddress ?? '');
+  return String(r[section.idKey] ?? '');
+}
+function rowSubtitle(section: MirrorSection, r: PostmarkRow): string {
+  if (section.key === 'messages') return `to ${recipientsOf(r)} · ${messageStatus(r)}`;
+  if (section.key === 'bounces') return `${r.Subject ?? ''} · ${r.Inactive ? 'inactive' : 'active'}`;
+  if (section.key === 'templates') return `${r.Alias ?? '(no alias)'} · ${r.TemplateType ?? ''}`;
+  if (section.key === 'streams') return `${r.MessageStreamType ?? ''} · ${r.ID ?? ''}`;
+  if (section.key === 'webhooks') return String(r.MessageStream ?? '');
+  if (section.key === 'suppressions') return `${r.SuppressionReason ?? ''} · ${r.Origin ?? ''}`;
+  return '';
+}
+/** The status value each section pins to its pill. */
+function rowStatus(section: MirrorSection, r: PostmarkRow): string {
+  if (section.key === 'messages') return messageStatus(r);
+  if (section.key === 'bounces') return String(r.Type ?? '');
+  if (section.key === 'templates') return r.Active ? 'Active' : 'Inactive';
+  if (section.key === 'streams') return r.ArchivedAt ? 'Blocked' : 'Active';
+  if (section.key === 'suppressions') return String(r.SuppressionReason ?? '');
+  return '';
+}
+
+function useCollection(section: MirrorSection): { rows: PostmarkRow[]; loading: boolean; error: string } {
+  const [rows, setRows] = useState<PostmarkRow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  useEffect(() => {
+    let live = true;
+    setLoading(true);
+    setError('');
+    fetch(`${WIRE_BASE}${section.path}`)
+      .then((r) => r.json())
+      .then((body) => {
+        if (!live) return;
+        const data = Array.isArray(body) ? body : Array.isArray(body?.[section.collection]) ? body[section.collection] : [];
+        setRows(data);
+        setLoading(false);
+      })
+      .catch((e) => { if (live) { setError(String(e)); setLoading(false); } });
+    return () => { live = false; };
+  }, [section.path, section.collection]);
+  return { rows, loading, error };
+}
+
+/** The Activity detail pane fetches the message's FULL record — Postmark's list endpoint
+ *  deliberately omits bodies + MessageEvents, exactly as the real API does. */
+function useMessageDetails(messageId: string | null): PostmarkRow | null {
+  const [detail, setDetail] = useState<PostmarkRow | null>(null);
+  useEffect(() => {
+    let live = true;
+    setDetail(null);
+    if (!messageId) return;
+    fetch(`${WIRE_BASE}/messages/outbound/${encodeURIComponent(messageId)}/details`)
+      .then((r) => r.json())
+      .then((body) => { if (live && body && !body.ErrorCode) setDetail(body); })
+      .catch(() => { /* the detail pane degrades to the list row */ });
+    return () => { live = false; };
+  }, [messageId]);
+  return detail;
+}
+
+export function App() {
+  const [sectionKey, setSectionKey] = useState<string>(POSTMARK_MIRROR_SECTIONS[0]!.key);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const section = POSTMARK_MIRROR_SECTIONS.find((s) => s.key === sectionKey)!;
+  const { rows, loading, error } = useCollection(section);
+  const selected = useMemo(
+    () => rows.find((r) => String(r[section.idKey]) === selectedId) ?? rows[0] ?? null,
+    [rows, selectedId, section.idKey],
+  );
+  const isMessages = section.key === 'messages';
+  const details = useMessageDetails(isMessages && selected ? String(selected.MessageID) : null);
+  const shown = details ?? selected;
+  const lines = useMemo(() => (shown ? flattenPostmarkValue(shown) : []), [shown]);
+
+  return (
+    <div className="app">
+      <header className="topbar">
+        <span className="brand">Postmark twin</span>
+        <span className="subtitle">local transactional email mirror — activity · bounces · templates · streams</span>
+      </header>
+      <div className="body">
+        <nav className="nav">
+          {POSTMARK_MIRROR_SECTIONS.map((s) => (
+            <button
+              key={s.key}
+              className={`nav-item ${s.key === sectionKey ? 'active' : ''}`}
+              onClick={() => { setSectionKey(s.key); setSelectedId(null); }}
+            >
+              {s.label}
+            </button>
+          ))}
+        </nav>
+        <section className="list">
+          <div className="list-head">{section.label}{!loading ? ` (${rows.length})` : ''}</div>
+          {loading && <div className="empty">Loading…</div>}
+          {error && <div className="empty error">{error}</div>}
+          {!loading && !error && rows.length === 0 && <div className="empty">No {section.label.toLowerCase()} yet.</div>}
+          {rows.map((r, i) => (
+            <button
+              key={`${String(r[section.idKey])}-${i}`}
+              className={`row ${selected && String(selected[section.idKey]) === String(r[section.idKey]) ? 'selected' : ''}`}
+              onClick={() => setSelectedId(String(r[section.idKey]))}
+            >
+              <div className="row-title">{rowTitle(section, r)}</div>
+              <div className="row-sub mono">{rowSubtitle(section, r)}</div>
+            </button>
+          ))}
+        </section>
+        <aside className="detail">
+          {shown ? (
+            <>
+              <div className="detail-head">
+                <span className="mono">{String(shown[section.idKey] ?? '')}</span>
+                <StatusPill value={rowStatus(section, shown)} />
+              </div>
+              {isMessages && (
+                <div className="message-view">
+                  <div className="message-meta mono">
+                    <div>from {String(shown.From ?? '—')}</div>
+                    <div>to {recipientsOf(shown)}</div>
+                    <div>{formatPostmarkDate(shown.ReceivedAt)} · stream {String(shown.MessageStream ?? '—')}</div>
+                  </div>
+                  <DeliveryTimeline message={shown} />
+                  <MessageBody message={shown} />
+                </div>
+              )}
+              <NestedLines lines={lines} />
+            </>
+          ) : (
+            <div className="empty">Select a record.</div>
+          )}
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+// Browser-only mount. Guarded so the exported presentational components (StatusPill,
+// MessageBody, DeliveryTimeline, NestedLines) can be imported and renderToStaticMarkup'd in a
+// DOM-less test/SSR environment (the data-coupled UI verifies) without this top-level
+// `document` access throwing. The browser bundle still mounts exactly as before.
+if (typeof document !== 'undefined') {
+  const rootEl = document.getElementById('root');
+  if (rootEl) createRoot(rootEl).render(<App />);
+}

package/dist/src/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/src/cli.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+import { keepProcessAlive } from '@volter/world-core/lifecycle';
+// world-postmark CLI: serve the Postmark API twin, the activity mirror UI, or run conformance.
+import { hasFlag, optionValue } from '@volter/world-core/args';
+import { createPostmarkTwinServer } from "./postmark-server.js";
+import { createPostmarkMirrorServer } from "./postmark-mirror-ui.js";
+const [cmd, ...rest] = process.argv.slice(2);
+const port = Number(optionValue(rest, '--port', '0')) || undefined;
+const root = optionValue(rest, '--root') || undefined;
+const readOnly = hasFlag(rest, '--read-only'); // a twin accepts writes unless started read-only
+if (cmd === 'serve') {
+    const s = await createPostmarkTwinServer({ readOnly, ...(root ? { root } : {}), ...(port ? { port } : {}) });
+    process.stdout.write(`postmark twin (transactional email API)${readOnly ? ' [read-only]' : ''} at http://127.0.0.1:${s.port}\n`);
+    await keepProcessAlive();
+}
+else if (cmd === 'mirror') {
+    const s = await createPostmarkMirrorServer({ ...(root ? { root } : {}), ...(port ? { port } : {}) });
+    process.stdout.write(`postmark mirror UI (activity) at http://127.0.0.1:${s.port}\n`);
+    await keepProcessAlive();
+}
+else if (cmd === 'conformance') {
+    // dev-only; lazy so the bin runs without @volter/world-tooling
+    const { checkPostmarkConformance, postmarkCoverage } = await import("./postmark-conformance.js");
+    const report = checkPostmarkConformance({ ...(root ? { root } : {}) });
+    process.stdout.write(`${JSON.stringify({ ...report, coverage: postmarkCoverage({ ...(root ? { root } : {}) }) }, null, 2)}\n`);
+    if (!report.ok)
+        process.exitCode = 1;
+}
+else {
+    process.stdout.write('Usage: world-postmark serve|mirror|conformance [--port N] [--root DIR] [--read-only]\n');
+}

package/dist/src/index.d.ts

@@ -0,0 +1,10 @@
+export { handlePostmarkTwinRequest, POSTMARK_ERRORS, POSTMARK_RESOURCE_TYPES } from './postmark-twin.js';
+export type { PostmarkRequest, PostmarkResponse } from './postmark-twin.js';
+export { createPostmarkTwinFetch, createPostmarkTwinServer, type PostmarkTwinFetchOptions } from './postmark-server.js';
+export { deliveryPlan, emitPostmarkWebhook, POSTMARK_RECORD_TYPES, terminalEvent, webhookHeaders, webhooksFor, } from './postmark-events.js';
+export type { PostmarkEventType, PostmarkRecordType, PostmarkWebhookDelivery, WebhookContext } from './postmark-events.js';
+export { mapBounce, mapMessage, mapMessageStream, mapServer, mapTemplate, mapWebhook, pullPostmarkBounces, pullPostmarkMessages, pullPostmarkMessageStreams, pullPostmarkServer, pullPostmarkTemplates, pullPostmarkWebhooks, pushPostmarkAction, syncPostmarkFromReal, } from './postmark-connector.js';
+export type { PostmarkBounce, PostmarkClient, PostmarkMessageStream, PostmarkOutboundMessage, PostmarkServer, PostmarkTemplate, PostmarkWebhookConfig, } from './postmark-connector.js';
+export { buildPostmarkMirrorClient, createPostmarkMirrorServer, POSTMARK_MIRROR_SECTIONS, postmarkMirrorHtml, } from './postmark-mirror-ui.js';
+import { type TwinPack } from '@volter/world-core';
+export declare const pack: TwinPack;

package/dist/src/index.js

@@ -0,0 +1,54 @@
+// @volter/twin-postmark — the Postmark transactional-email API twin (one vendor, one
+// package), built on the shared @volter/world-core kernel. REST transport over
+// api.postmarkapp.com shapes, `X-Postmark-Server-Token` / `X-Postmark-Account-Token` auth, a
+// deterministic OFFLINE delivery lifecycle that writes real `MessageEvents` and mints Bounce
+// records + suppressions, Postmark's real (unsigned, Basic-auth/custom-header) webhooks, and
+// a React activity-mirror UI. (Conformance/capability tooling lives in @volter/world-tooling,
+// a dev dependency — NOT shipped in the runtime API.)
+export { handlePostmarkTwinRequest, POSTMARK_ERRORS, POSTMARK_RESOURCE_TYPES } from "./postmark-twin.js";
+export { createPostmarkTwinFetch, createPostmarkTwinServer } from "./postmark-server.js";
+export { deliveryPlan, emitPostmarkWebhook, POSTMARK_RECORD_TYPES, terminalEvent, webhookHeaders, webhooksFor, } from "./postmark-events.js";
+export { mapBounce, mapMessage, mapMessageStream, mapServer, mapTemplate, mapWebhook, pullPostmarkBounces, pullPostmarkMessages, pullPostmarkMessageStreams, pullPostmarkServer, pullPostmarkTemplates, pullPostmarkWebhooks, pushPostmarkAction, syncPostmarkFromReal, } from "./postmark-connector.js";
+export { buildPostmarkMirrorClient, createPostmarkMirrorServer, POSTMARK_MIRROR_SECTIONS, postmarkMirrorHtml, } from "./postmark-mirror-ui.js";
+// Registry descriptor: the pack self-describes so tooling can discover it.
+import { registerPack } from '@volter/world-core';
+import { performPostmarkAction, syncPostmarkFromRemote } from "./postmark-connector.js";
+export const pack = {
+    // PROTOCOL 2 (docs/contributing/architecture.md#protocol-2-the-pack-is-a-plugin): the pack is a plugin — its wire, its tree, and its half of the real
+    // state system. Moved 2026-09-08.
+    protocol: '2',
+    refresh: { every: '5m', webhook: true, onDemand: { atMost: '30s' } },
+    stateSystem: { perform: performPostmarkAction, refresh: syncPostmarkFromRemote },
+    // the round trip: send a message — Postmark's own write, and a fresh id each time
+    roundTrip: { method: 'POST', path: '/email', body: { From: 'round@trip.test', To: 'round@trip.test', Subject: 'round trip', TextBody: 'round trip' }, headers: { 'x-postmark-server-token': 'round-trip' } },
+    parityOrigin: 'http://twin',
+    vendor: 'postmark',
+    transport: 'rest',
+    archetype: 'crud',
+    bin: 'world-postmark',
+    resources: ['message', 'bounce', 'template', 'message_stream', 'webhook', 'suppression', 'server', 'domain', 'sender_signature', 'inbound_rule'],
+    specSource: 'postmark-conformance.ts (inline per-object JSON Schemas derived from the official `postmark` SDK models + developer.postmarkapp.com)',
+    description: 'Postmark transactional email API twin — send/template/batch sends, outbound message activity, bounces + delivery stats, templates, message streams, suppressions, webhooks, domains and sender signatures, with an activity mirror UI.',
+    // Adoption + interception, moved off the central maps unchanged (descriptor-first back-migration, adding-a-twin.md §3,
+    // 2026-08-31): the official `postmark` npm client and the POSTMARK_* credential
+    // stem, and the one API host the SDK talks to.
+    adoption: {
+        // COMMUNITY: Postmark ships no official Python SDK; `postmarker` is the de-facto client of the
+        // same api.postmarkapp.com surface.
+        pypi: ['postmarker'],
+        sdks: ['postmark'], envStems: ['POSTMARK'],
+    },
+    hosts: [{ host: 'api.postmarkapp.com' }],
+    // No `browserRouting` — deliberately, for two independent reasons (the algolia precedent).
+    // 1. Postmark is a SERVER-SIDE API: the server/account tokens are secrets and there is no
+    //    browser SDK, so forwarding it from a browser dev proxy is not a flow that exists.
+    // 2. There is no single stripeable API path prefix to route on. Postmark's routes sit at
+    //    the ROOT — /email, /messages/*, /bounces, /templates, /message-streams, /webhooks,
+    //    /stats/*, /domains, /senders — so any prefix narrow enough to be meaningful (e.g.
+    //    '/messages/') would silently fail to forward the headline /email send, and the only
+    //    prefix that covers everything is '/', which would capture the app's own routes too.
+    // Node-side zero-edit injection is unaffected: POSTMARK_TWIN_URL + the control-plane
+    // injector's `api.postmarkapp.com` matcher redirect the real SDK with no code change.
+};
+// registered at import: the kernel learns the pack's state system (protocol 2)
+registerPack(pack);

package/dist/src/postmark-capabilities.d.ts

@@ -0,0 +1,12 @@
+import { type CapabilityReport, type CapabilitySpec } from '@volter/world-tooling';
+import { deliveryPlan, webhookHeaders, webhooksFor } from './postmark-events.js';
+export declare const POSTMARK_CAPABILITIES: CapabilitySpec[];
+/** The vendor's own docs-nav API groups, enumerated TOP-DOWN from developer.postmarkapp.com
+ *  (not derived from the manifest above — that would make any bijection a tautology). */
+export declare const POSTMARK_AREAS: readonly ["email", "messages", "bounces", "templates", "streams", "suppressions", "webhooks", "server", "servers", "stats", "inbound_rules", "domains", "senders", "data_removals", "auth", "honesty", "ui", "connector"];
+export declare function postmarkCapabilities(): Promise<CapabilityReport>;
+export declare const __postmarkInternals: {
+    deliveryPlan: typeof deliveryPlan;
+    webhookHeaders: typeof webhookHeaders;
+    webhooksFor: typeof webhooksFor;
+};