@braedonsaunders/appkit-mailbox 1.0.0

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAC7C,YAAY,EACV,UAAU,EACV,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,UAAU,GACX,MAAM,SAAS,CAAA"}

package/index.js

@@ -0,0 +1,3 @@
+export { syncMailbox, verifyImap } from './sync.js';
+export { sendMail, verifySmtp } from './send.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA","sourcesContent":["export { syncMailbox, verifyImap } from './sync'\nexport { sendMail, verifySmtp } from './send'\nexport type {\n  ImapCursor,\n  InboundMessage,\n  MailAddress,\n  MailboxConnection,\n  MailboxStore,\n  OutboundAttachment,\n  SendMailArgs,\n  SendMailResult,\n  SyncResult,\n} from './types'\n"]}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@braedonsaunders/appkit-mailbox",
+  "version": "1.0.0",
+  "description": "Mail engine: incremental IMAP sync + SMTP send with RFC-5322 threading, persistence-injected so the application owns the ledger, plus the three-pane operator inbox.",
+  "license": "AGPL-3.0-or-later",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "import": "./react.js",
+      "default": "./react.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "imapflow": "^1.0.191",
+    "mailparser": "^3.7.5",
+    "nodemailer": "^9.0.1"
+  },
+  "peerDependencies": {
+    "@braedonsaunders/appkit-ui": "^0.2.0",
+    "lucide-react": "^1.24.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@braedonsaunders/appkit-ui": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "author": "Braedon Saunders",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/braedonsaunders/appkit.git",
+    "directory": "packages/mailbox"
+  },
+  "homepage": "https://github.com/braedonsaunders/appkit/tree/main/packages/mailbox#readme",
+  "bugs": {
+    "url": "https://github.com/braedonsaunders/appkit/issues"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "keywords": [
+    "appkit",
+    "application-framework",
+    "email",
+    "imap",
+    "smtp",
+    "typescript"
+  ]
+}

package/react.d.ts

@@ -0,0 +1,119 @@
+/**
+ * MailboxInbox — the operator surface for the mail engine.
+ *
+ * The engine in `./index` speaks IMAP/SMTP and owns no state; this component
+ * owns no data. Everything it renders arrives as props and every mutation
+ * leaves through a callback, so the application keeps the ledger, the folder
+ * counts, and the send/reply transport. Only the reply and compose drafts
+ * (with their busy/error state) live here, because a draft has no meaning
+ * outside the pane that is typing it.
+ *
+ * The three-pane layout, folder rail, row anatomy, reading pane, empty states,
+ * and skeleton follow `@braedonsaunders/appkit-notifications`' `NotificationInbox` so a mail
+ * screen and a notification screen read as the same product.
+ */
+import * as React from 'react';
+export type MailboxOption = {
+    id: string;
+    ownerName: string;
+    address: string;
+};
+export type MailFolderKey = 'inbox' | 'sent' | 'all';
+export type MailThreadListItem = {
+    id: string;
+    /** The other side of the conversation — one name, or a joined list. */
+    counterparty: string;
+    subject: string;
+    /** ISO 8601 timestamp of the most recent message in the thread. */
+    at: string;
+    /** The thread is still awaiting a resolution. */
+    open: boolean;
+    unread?: boolean;
+};
+export type MailAttachmentView = {
+    filename: string;
+    /** Pre-formatted by the application ("184 KB") — this component never guesses units. */
+    sizeLabel: string;
+    href: string;
+};
+export type MailMessageView = {
+    id: string;
+    direction: 'inbound' | 'outbound';
+    fromLabel: string;
+    toLabel: string;
+    /** ISO 8601 timestamp. */
+    at: string;
+    bodyText: string;
+    attachments: MailAttachmentView[];
+};
+export type MailboxInboxCopy = {
+    title: string;
+    mailbox: string;
+    searchMailboxes: string;
+    folders: string;
+    inbox: string;
+    sent: string;
+    all: string;
+    refresh: string;
+    newMessage: string;
+    back: string;
+    cancel: string;
+    open: string;
+    unread: string;
+    conversation: string;
+    conversations: string;
+    messageNoun: string;
+    messagesNoun: string;
+    emptyList: string;
+    emptyListDescription: string;
+    emptyPane: string;
+    emptyPaneDescription: string;
+    noBody: string;
+    attachments: string;
+    download: string;
+    reply: string;
+    replyPlaceholder: string;
+    send: string;
+    sending: string;
+    to: string;
+    toPlaceholder: string;
+    subject: string;
+    subjectPlaceholder: string;
+    message: string;
+    messagePlaceholder: string;
+};
+export type MailboxInboxProps = {
+    mailboxes: MailboxOption[];
+    activeMailboxId: string;
+    /**
+     * Where switching mailbox goes. Omit it — or pass a single mailbox — on a
+     * surface that is about one mailbox, and the switcher is not rendered.
+     */
+    onSwitchMailbox?: ((id: string) => void) | undefined;
+    folder: MailFolderKey;
+    folderCounts?: Partial<Record<MailFolderKey, number>>;
+    onSwitchFolder: (key: MailFolderKey) => void;
+    threads: MailThreadListItem[];
+    activeThreadId: string | null;
+    onSelectThread: (id: string | null) => void;
+    conversation: {
+        subject: string;
+        messages: MailMessageView[];
+    } | null;
+    onReply: (text: string) => Promise<void>;
+    onCompose: (draft: {
+        to: string;
+        subject: string;
+        text: string;
+    }) => Promise<void>;
+    onRefresh?: () => void;
+    /** Whose voice the reply is sent in — e.g. "Reply as Dana". */
+    replyLabel?: string;
+    className?: string;
+    copy?: Partial<MailboxInboxCopy>;
+};
+export declare function MailboxInbox({ mailboxes, activeMailboxId, onSwitchMailbox, folder, folderCounts, onSwitchFolder, threads, activeThreadId, onSelectThread, conversation, onReply, onCompose, onRefresh, replyLabel, className, copy: copyOverrides, }: MailboxInboxProps): React.JSX.Element;
+export declare function MailboxInboxSkeleton({ className }?: {
+    className?: string;
+}): React.JSX.Element;
+//# sourceMappingURL=react.d.ts.map

package/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"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"}

package/react.js

@@ -0,0 +1,271 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * MailboxInbox — the operator surface for the mail engine.
+ *
+ * The engine in `./index` speaks IMAP/SMTP and owns no state; this component
+ * owns no data. Everything it renders arrives as props and every mutation
+ * leaves through a callback, so the application keeps the ledger, the folder
+ * counts, and the send/reply transport. Only the reply and compose drafts
+ * (with their busy/error state) live here, because a draft has no meaning
+ * outside the pane that is typing it.
+ *
+ * The three-pane layout, folder rail, row anatomy, reading pane, empty states,
+ * and skeleton follow `@braedonsaunders/appkit-notifications`' `NotificationInbox` so a mail
+ * screen and a notification screen read as the same product.
+ */
+import * as React from 'react';
+import { ArrowRight, ChevronLeft, Download, Inbox, Loader2, Mail, Mails, Menu, Paperclip, RotateCw, Send, SquarePen, TriangleAlert, X, } from 'lucide-react';
+import { Badge, Button, Drawer, Input, Select, Skeleton, Textarea, cn } from '@braedonsaunders/appkit-ui';
+const DEFAULT_COPY = {
+    title: 'Mail',
+    mailbox: 'Mailbox',
+    searchMailboxes: 'Search mailboxes',
+    folders: 'Folders',
+    inbox: 'Inbox',
+    sent: 'Sent',
+    all: 'All mail',
+    refresh: 'Refresh',
+    newMessage: 'New message',
+    back: 'Back to conversations',
+    cancel: 'Cancel',
+    open: 'Open thread',
+    unread: 'unread',
+    conversation: 'conversation',
+    conversations: 'conversations',
+    messageNoun: 'message',
+    messagesNoun: 'messages',
+    emptyList: 'No conversations',
+    emptyListDescription: 'Messages in this folder will appear here.',
+    emptyPane: 'Select a conversation',
+    emptyPaneDescription: 'Choose a conversation from the list to read it here.',
+    noBody: 'This message has no text body.',
+    attachments: 'Attachments',
+    download: 'Download',
+    reply: 'Reply',
+    replyPlaceholder: 'Write a reply…',
+    send: 'Send',
+    sending: 'Sending…',
+    to: 'To',
+    toPlaceholder: 'name@example.com',
+    subject: 'Subject',
+    subjectPlaceholder: 'What is this about?',
+    message: 'Message',
+    messagePlaceholder: 'Write your message…',
+};
+const FOLDER_ORDER = ['inbox', 'sent', 'all'];
+function useIsDesktop() {
+    const [isDesktop, setIsDesktop] = React.useState(true);
+    React.useEffect(() => {
+        const media = window.matchMedia('(min-width: 1024px)');
+        const sync = () => setIsDesktop(media.matches);
+        sync();
+        media.addEventListener('change', sync);
+        return () => media.removeEventListener('change', sync);
+    }, []);
+    return isDesktop;
+}
+function relativeTime(iso) {
+    const minutes = Math.floor((Date.now() - new Date(iso).getTime()) / 60_000);
+    if (minutes < 1)
+        return 'now';
+    if (minutes < 60)
+        return `${minutes}m`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24)
+        return `${hours}h`;
+    const days = Math.floor(hours / 24);
+    if (days < 7)
+        return `${days}d`;
+    return new Date(iso).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+}
+function fullDate(iso) {
+    return new Date(iso).toLocaleString(undefined, {
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+    });
+}
+function initials(name) {
+    const parts = name
+        .replace(/<[^>]*>/g, ' ')
+        .split(/[\s,]+/)
+        .map((part) => part.trim())
+        .filter(Boolean);
+    const first = parts[0];
+    if (!first)
+        return '?';
+    const last = parts.length > 1 ? parts[parts.length - 1] : undefined;
+    const letters = `${first[0] ?? ''}${last?.[0] ?? ''}`;
+    return letters.toUpperCase() || '?';
+}
+function errorMessage(cause) {
+    if (cause instanceof Error && cause.message)
+        return cause.message;
+    if (typeof cause === 'string' && cause)
+        return cause;
+    return 'The message could not be sent.';
+}
+function CountPill({ value, active }) {
+    if (value <= 0)
+        return null;
+    return (_jsx("span", { className: cn('ml-auto inline-flex min-w-5 items-center justify-center rounded-full px-1.5 text-[11px] font-semibold tabular-nums', active ? 'bg-primary text-primary-fg' : 'bg-bg-subtle text-fg-muted'), children: value > 99 ? '99+' : value }));
+}
+function FolderButton({ icon, label, count, active, onClick, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, "aria-current": active ? 'true' : undefined, className: cn('flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm transition-colors', active
+            ? 'bg-primary-subtle font-medium text-fg'
+            : 'text-fg-muted hover:bg-surface-hover hover:text-fg'), children: [_jsx("span", { className: cn('shrink-0', active ? 'text-primary' : 'text-fg-subtle'), children: icon }), _jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: label }), _jsx(CountPill, { value: count, active: active })] }));
+}
+function FolderIcon({ folder }) {
+    if (folder === 'inbox')
+        return _jsx(Inbox, { size: 16 });
+    if (folder === 'sent')
+        return _jsx(Send, { size: 16 });
+    return _jsx(Mails, { size: 16 });
+}
+function MailboxSwitcher({ mailboxes, activeMailboxId, onSwitchMailbox, copy, className, }) {
+    return (_jsxs("div", { className: cn('shrink-0 space-y-1.5', className), children: [_jsx("p", { className: "px-0.5 text-[11px] font-semibold uppercase tracking-wide text-fg-subtle", children: copy.mailbox }), _jsx(Select, { value: activeMailboxId, onChange: (event) => onSwitchMailbox(event.currentTarget.value), "aria-label": copy.mailbox, sheetTitle: copy.mailbox, searchPlaceholder: copy.searchMailboxes, triggerClassName: "h-9 text-sm", children: mailboxes.map((mailbox) => (_jsx("option", { value: mailbox.id, children: `${mailbox.ownerName} · ${mailbox.address}` }, mailbox.id))) })] }));
+}
+function FolderRail({ mailboxes, activeMailboxId, onSwitchMailbox, folder, folderCounts, onSwitchFolder, copy, variant, className, }) {
+    const nav = (_jsx("div", { className: "space-y-0.5", children: FOLDER_ORDER.map((key) => (_jsx(FolderButton, { icon: _jsx(FolderIcon, { folder: key }), label: copy[key], count: folderCounts?.[key] ?? 0, active: folder === key, onClick: () => onSwitchFolder(key) }, key))) }));
+    // A control that changes nothing is worse than no control: on a surface that
+    // is one mailbox — an inbox opened on the person it belongs to — a picker
+    // offering that same mailbox reads as an invitation to go somewhere else.
+    // So the switcher appears only where there is somewhere to switch to, which
+    // is both a second mailbox and a handler willing to go there.
+    const switcher = onSwitchMailbox && mailboxes.length > 1 ? (_jsx(MailboxSwitcher, { mailboxes: mailboxes, activeMailboxId: activeMailboxId, onSwitchMailbox: onSwitchMailbox, copy: copy, className: variant === 'flyout' ? 'border-b border-border pb-3' : 'border-b border-border px-3 pb-3' })) : null;
+    if (variant === 'flyout') {
+        return (_jsxs("div", { className: "flex h-full flex-col", children: [switcher, _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: nav })] }));
+    }
+    return (_jsxs("aside", { className: cn('flex-col border-r border-border bg-surface', className), children: [_jsxs("div", { className: "flex h-14 shrink-0 items-center gap-2 px-4", children: [_jsx(Mail, { size: 18, className: "text-primary" }), _jsx("span", { className: "text-base font-semibold text-fg", children: copy.title })] }), switcher, _jsx("nav", { className: "app-scroll min-h-0 flex-1 overflow-y-auto px-2 py-2", children: nav })] }));
+}
+function ThreadRow({ thread, copy, selected, onOpen, }) {
+    const unread = thread.unread === true;
+    return (_jsxs("div", { role: "button", tabIndex: 0, onClick: onOpen, onKeyDown: (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onOpen();
+            }
+        }, className: cn('group relative flex cursor-pointer gap-3 border-b border-border-subtle px-3 py-2.5 transition-colors sm:px-4', selected ? 'bg-primary-subtle/70' : 'hover:bg-surface-hover'), children: [unread ? _jsx("span", { className: "absolute inset-y-0 left-0 w-[3px] bg-primary", "aria-hidden": true }) : null, _jsx("span", { "aria-hidden": true, className: cn('flex size-9 shrink-0 items-center justify-center rounded-full text-xs font-semibold', unread ? 'bg-primary-subtle text-primary' : 'bg-bg-subtle text-fg-muted'), children: initials(thread.counterparty) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: cn('min-w-0 truncate text-sm', unread ? 'font-semibold text-fg' : 'text-fg'), children: thread.counterparty }), thread.open ? (_jsx("span", { title: copy.open, "aria-label": copy.open, role: "img", className: "size-1.5 shrink-0 rounded-full bg-success" })) : null, _jsx("time", { suppressHydrationWarning: true, dateTime: thread.at, className: "ml-auto shrink-0 text-[11px] whitespace-nowrap text-fg-subtle", children: relativeTime(thread.at) })] }), _jsx("p", { className: cn('truncate text-sm', unread ? 'font-medium text-fg' : 'text-fg-muted'), children: thread.subject })] })] }));
+}
+function AttachmentChip({ attachment, copy }) {
+    return (_jsxs("a", { href: attachment.href, download: attachment.filename, title: `${copy.download}: ${attachment.filename}`, className: "group/chip inline-flex max-w-full items-center gap-2 rounded-lg border border-border bg-surface px-2.5 py-1.5 text-xs transition-colors hover:border-primary/40 hover:bg-surface-hover", children: [_jsx(Paperclip, { size: 13, className: "shrink-0 text-fg-subtle", "aria-hidden": true }), _jsx("span", { className: "min-w-0 truncate font-medium text-fg", children: attachment.filename }), _jsx("span", { className: "shrink-0 tabular-nums text-fg-subtle", children: attachment.sizeLabel }), _jsx(Download, { size: 13, "aria-hidden": true, className: "shrink-0 text-fg-subtle transition-colors group-hover/chip:text-primary" })] }));
+}
+function MessageCard({ message, copy }) {
+    const outbound = message.direction === 'outbound';
+    return (_jsxs("article", { className: cn('max-w-[52rem] rounded-xl border px-4 py-3 shadow-sm', outbound ? 'ml-auto border-primary/25 bg-primary-subtle/50' : 'mr-auto border-border bg-bg-subtle'), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-xs", children: [_jsx("span", { className: "min-w-0 truncate font-semibold text-fg", children: message.fromLabel }), _jsx(ArrowRight, { size: 12, className: "shrink-0 text-fg-subtle", "aria-hidden": true }), _jsx("span", { className: "min-w-0 truncate text-fg-muted", children: message.toLabel }), _jsx("time", { suppressHydrationWarning: true, dateTime: message.at, className: "ml-auto shrink-0 text-[11px] whitespace-nowrap text-fg-subtle", children: fullDate(message.at) })] }), message.bodyText.trim() ? (_jsx("p", { className: "mt-2 text-sm leading-relaxed whitespace-pre-wrap text-fg", children: message.bodyText })) : (_jsx("p", { className: "mt-2 text-sm text-fg-subtle", children: copy.noBody })), message.attachments.length ? (_jsxs("div", { className: "mt-3 border-t border-border-subtle pt-2.5", children: [_jsx("p", { className: "mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-fg-subtle", children: copy.attachments }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: message.attachments.map((attachment) => (_jsx(AttachmentChip, { attachment: attachment, copy: copy }, `${attachment.filename}:${attachment.href}`))) })] })) : null] }));
+}
+function InlineError({ message }) {
+    return (_jsxs("p", { role: "alert", className: "flex items-start gap-1.5 text-xs text-danger", children: [_jsx(TriangleAlert, { size: 13, className: "mt-0.5 shrink-0", "aria-hidden": true }), _jsx("span", { className: "min-w-0", children: message })] }));
+}
+function ReplyComposer({ copy, replyLabel, onReply, }) {
+    const fieldId = React.useId();
+    const [text, setText] = React.useState('');
+    const [busy, setBusy] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const submit = async (event) => {
+        event.preventDefault();
+        const value = text.trim();
+        if (!value || busy)
+            return;
+        setBusy(true);
+        setError(null);
+        try {
+            await onReply(value);
+            setText('');
+        }
+        catch (cause) {
+            setError(errorMessage(cause));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs("form", { onSubmit: (event) => void submit(event), className: "shrink-0 space-y-2 border-t border-border bg-surface px-4 py-3 sm:px-6 sm:py-4", children: [_jsx("label", { htmlFor: fieldId, className: "sr-only", children: replyLabel ?? copy.reply }), _jsx(Textarea, { id: fieldId, value: text, onChange: (event) => setText(event.currentTarget.value), placeholder: copy.replyPlaceholder, rows: 3, disabled: busy, className: "min-h-20 resize-y" }), error ? _jsx(InlineError, { message: error }) : null, _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "min-w-0 flex-1 truncate text-xs text-fg-subtle", children: replyLabel ?? copy.reply }), _jsxs(Button, { type: "submit", size: "sm", disabled: busy || !text.trim(), children: [busy ? _jsx(Loader2, { size: 14, className: "animate-spin" }) : _jsx(Send, { size: 14 }), busy ? copy.sending : copy.send] })] })] }));
+}
+function ConversationPane({ conversation, copy, replyLabel, threadKey, onReply, onClose, }) {
+    if (!conversation) {
+        return (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 px-6 text-center", children: [_jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-bg-subtle", children: _jsx(Mail, { size: 28, className: "text-fg-subtle" }) }), _jsx("p", { className: "text-sm font-medium text-fg-muted", children: copy.emptyPane }), _jsx("p", { className: "max-w-xs text-xs text-fg-subtle", children: copy.emptyPaneDescription })] }));
+    }
+    const count = conversation.messages.length;
+    const latest = conversation.messages[count - 1];
+    const header = (_jsxs("div", { className: "flex items-start gap-3", children: [onClose ? (_jsx("button", { type: "button", onClick: onClose, "aria-label": copy.back, className: "-ml-1 rounded-md p-1.5 text-fg-muted hover:bg-surface-hover hover:text-fg lg:hidden", children: _jsx(ChevronLeft, { size: 20 }) })) : (_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-primary-subtle", children: _jsx(Mail, { size: 18, className: "text-primary" }) })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { className: "text-lg font-semibold leading-snug text-fg", children: conversation.subject }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-2 text-xs text-fg-muted", children: [_jsxs(Badge, { variant: "secondary", className: "font-normal", children: [count, " ", count === 1 ? copy.messageNoun : copy.messagesNoun] }), latest ? _jsx("span", { suppressHydrationWarning: true, children: fullDate(latest.at) }) : null] })] })] }));
+    const body = (_jsx("div", { className: "space-y-4", children: conversation.messages.map((message) => (_jsx(MessageCard, { message: message, copy: copy }, message.id))) }));
+    const composer = (_jsx(ReplyComposer, { copy: copy, replyLabel: replyLabel, onReply: onReply }, threadKey ?? 'thread'));
+    if (onClose) {
+        return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx("div", { className: "shrink-0 border-b border-border pb-4", children: header }), _jsx("div", { className: "app-scroll min-h-0 flex-1 overflow-y-auto py-4", children: body }), composer] }));
+    }
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx("div", { className: "shrink-0 border-b border-border px-6 py-4", children: header }), _jsx("div", { className: "app-scroll min-h-0 flex-1 overflow-y-auto px-6 py-5", children: body }), composer] }));
+}
+function ComposePanel({ copy, variant, onCompose, onClose, }) {
+    const toId = React.useId();
+    const subjectId = React.useId();
+    const messageId = React.useId();
+    const [to, setTo] = React.useState('');
+    const [subject, setSubject] = React.useState('');
+    const [text, setText] = React.useState('');
+    const [busy, setBusy] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const submit = async (event) => {
+        event.preventDefault();
+        if (busy)
+            return;
+        setBusy(true);
+        setError(null);
+        try {
+            await onCompose({ to: to.trim(), subject: subject.trim(), text });
+            onClose();
+        }
+        catch (cause) {
+            setError(errorMessage(cause));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const header = (_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-primary-subtle", children: _jsx(SquarePen, { size: 18, className: "text-primary" }) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx("h2", { className: "text-lg font-semibold leading-snug text-fg", children: copy.newMessage }) }), _jsx("button", { type: "button", onClick: onClose, "aria-label": copy.cancel, className: "-mr-1 rounded-md p-1.5 text-fg-muted hover:bg-surface-hover hover:text-fg", children: _jsx(X, { size: 18 }) })] }));
+    const fields = (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: toId, className: "block text-xs font-medium text-fg-muted", children: copy.to }), _jsx(Input, { id: toId, type: "email", required: true, value: to, onChange: (event) => setTo(event.currentTarget.value), placeholder: copy.toPlaceholder, disabled: busy, autoComplete: "email" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: subjectId, className: "block text-xs font-medium text-fg-muted", children: copy.subject }), _jsx(Input, { id: subjectId, required: true, value: subject, onChange: (event) => setSubject(event.currentTarget.value), placeholder: copy.subjectPlaceholder, disabled: busy })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: messageId, className: "block text-xs font-medium text-fg-muted", children: copy.message }), _jsx(Textarea, { id: messageId, required: true, value: text, onChange: (event) => setText(event.currentTarget.value), placeholder: copy.messagePlaceholder, disabled: busy, className: "min-h-40 resize-y" })] })] }));
+    const actions = (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [error ? (_jsx("div", { className: "min-w-0 flex-1", children: _jsx(InlineError, { message: error }) })) : (_jsx("span", { className: "flex-1" })), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onClose, disabled: busy, children: copy.cancel }), _jsxs(Button, { type: "submit", size: "sm", disabled: busy, children: [busy ? _jsx(Loader2, { size: 14, className: "animate-spin" }) : _jsx(Send, { size: 14 }), busy ? copy.sending : copy.send] })] }));
+    if (variant === 'drawer') {
+        return (_jsxs("form", { onSubmit: (event) => void submit(event), className: "space-y-4", children: [fields, actions] }));
+    }
+    return (_jsxs("form", { onSubmit: (event) => void submit(event), className: "flex h-full min-h-0 flex-col", children: [_jsx("div", { className: "shrink-0 border-b border-border px-6 py-4", children: header }), _jsx("div", { className: "app-scroll min-h-0 flex-1 overflow-y-auto px-6 py-5", children: fields }), _jsx("div", { className: "shrink-0 border-t border-border bg-surface px-6 py-4", children: actions })] }));
+}
+export function MailboxInbox({ mailboxes, activeMailboxId, onSwitchMailbox, folder, folderCounts, onSwitchFolder, threads, activeThreadId, onSelectThread, conversation, onReply, onCompose, onRefresh, replyLabel, className, copy: copyOverrides, }) {
+    const copy = React.useMemo(() => ({ ...DEFAULT_COPY, ...copyOverrides }), [copyOverrides]);
+    const isDesktop = useIsDesktop();
+    const [foldersOpen, setFoldersOpen] = React.useState(false);
+    const [composeOpen, setComposeOpen] = React.useState(false);
+    const total = folderCounts?.[folder] ?? threads.length;
+    const unread = threads.reduce((count, thread) => (thread.unread ? count + 1 : count), 0);
+    const openCompose = () => {
+        setFoldersOpen(false);
+        setComposeOpen(true);
+    };
+    const closeCompose = () => setComposeOpen(false);
+    const selectFolder = (key) => {
+        setFoldersOpen(false);
+        onSwitchFolder(key);
+    };
+    const selectThread = (id) => {
+        setComposeOpen(false);
+        onSelectThread(id);
+    };
+    const railProps = {
+        mailboxes,
+        activeMailboxId,
+        onSwitchMailbox,
+        folder,
+        folderCounts,
+        onSwitchFolder: selectFolder,
+        copy,
+    };
+    const listBody = threads.length ? (threads.map((thread) => (_jsx(ThreadRow, { thread: thread, copy: copy, selected: thread.id === activeThreadId, onOpen: () => selectThread(thread.id) }, thread.id)))) : (_jsxs("div", { className: "flex flex-col items-center justify-center px-6 py-20 text-center", children: [_jsx("div", { className: "flex size-14 items-center justify-center rounded-full bg-bg-subtle text-fg-subtle", children: _jsx(Inbox, { size: 26 }) }), _jsx("p", { className: "mt-3 text-sm font-medium text-fg-muted", children: copy.emptyList }), _jsx("p", { className: "mt-1 text-xs text-fg-subtle", children: copy.emptyListDescription })] }));
+    return (_jsxs("div", { className: cn('flex h-full min-h-0 bg-bg-subtle', className), children: [_jsx(FolderRail, { ...railProps, variant: "rail", className: "hidden w-64 shrink-0 lg:flex" }), _jsxs("section", { className: "flex min-w-0 flex-1 flex-col border-r border-border bg-surface lg:w-96 lg:flex-none xl:w-[28rem]", children: [_jsx("header", { className: "shrink-0 border-b border-border", children: _jsxs("div", { className: "flex h-14 items-center gap-2 px-3 sm:px-4", children: [_jsx("button", { type: "button", onClick: () => setFoldersOpen(true), "aria-label": copy.folders, className: "-ml-1 rounded-md p-1.5 text-fg-muted hover:bg-surface-hover hover:text-fg lg:hidden", children: _jsx(Menu, { size: 20 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "truncate text-sm font-semibold text-fg", children: copy[folder] }), _jsxs("p", { className: "text-[11px] text-fg-subtle", children: [total, " ", total === 1 ? copy.conversation : copy.conversations, unread ? ` · ${unread} ${copy.unread}` : ''] })] }), onRefresh ? (_jsx("button", { type: "button", onClick: onRefresh, title: copy.refresh, "aria-label": copy.refresh, className: "rounded-md p-1.5 text-fg-muted hover:bg-surface-hover hover:text-fg", children: _jsx(RotateCw, { size: 18 }) })) : null, _jsxs(Button, { size: "sm", onClick: openCompose, children: [_jsx(SquarePen, { size: 14 }), copy.newMessage] })] }) }), _jsx("div", { className: "app-scroll min-h-0 flex-1 overflow-y-auto", children: listBody })] }), _jsx("section", { className: "hidden min-w-0 flex-1 bg-surface lg:flex", children: _jsx("div", { className: "w-full", children: composeOpen ? (_jsx(ComposePanel, { copy: copy, variant: "pane", onCompose: onCompose, onClose: closeCompose })) : (_jsx(ConversationPane, { conversation: conversation, copy: copy, replyLabel: replyLabel, threadKey: activeThreadId, onReply: onReply })) }) }), !isDesktop ? (_jsxs(_Fragment, { children: [_jsx(Drawer, { open: foldersOpen, onClose: () => setFoldersOpen(false), side: "left", size: "sm", title: copy.folders, disableFullscreen: true, bodyClassName: "min-h-0 flex-1 overflow-hidden px-4 py-5", children: _jsx(FolderRail, { ...railProps, variant: "flyout" }) }), _jsx(Drawer, { open: Boolean(activeThreadId) && !composeOpen, onClose: () => onSelectThread(null), size: "lg", title: conversation?.subject, disableFullscreen: true, children: activeThreadId && !composeOpen ? (_jsx(ConversationPane, { conversation: conversation, copy: copy, replyLabel: replyLabel, threadKey: activeThreadId, onReply: onReply, onClose: () => onSelectThread(null) })) : null }), _jsx(Drawer, { open: composeOpen, onClose: closeCompose, size: "lg", title: copy.newMessage, disableFullscreen: true, children: composeOpen ? (_jsx(ComposePanel, { copy: copy, variant: "drawer", onCompose: onCompose, onClose: closeCompose })) : null })] })) : null] }));
+}
+export function MailboxInboxSkeleton({ className } = {}) {
+    return (_jsxs("div", { role: "status", "aria-label": "Loading mailbox", "aria-busy": "true", className: cn('flex h-full min-h-0 bg-bg-subtle', className), children: [_jsxs("div", { className: "hidden w-64 shrink-0 flex-col gap-2 border-r border-border p-3 lg:flex", children: [_jsx(Skeleton, { className: "h-9 w-full rounded-lg" }), _jsx(Skeleton, { className: "mt-2 h-9 w-full rounded-lg" }), Array.from({ length: 3 }).map((_, index) => (_jsx(Skeleton, { className: "h-9 w-full rounded-lg" }, index)))] }), _jsxs("section", { className: "flex min-w-0 flex-1 flex-col border-r border-border bg-surface lg:w-96 lg:flex-none xl:w-[28rem]", children: [_jsxs("div", { className: "flex h-14 shrink-0 items-center gap-2 border-b border-border px-3 sm:px-4", children: [_jsx(Skeleton, { className: "h-5 w-28" }), _jsx(Skeleton, { className: "ml-auto h-8 w-28 rounded-md" })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: Array.from({ length: 8 }).map((_, index) => (_jsxs("div", { className: "flex items-center gap-3 border-b border-border-subtle px-3 py-3 sm:px-4", children: [_jsx(Skeleton, { className: "size-9 shrink-0 rounded-full" }), _jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [_jsx(Skeleton, { className: "h-3.5 w-3/4" }), _jsx(Skeleton, { className: "h-3 w-1/2" })] })] }, index))) })] }), _jsx("div", { className: "hidden min-w-0 flex-1 items-center justify-center lg:flex", children: _jsx(Skeleton, { className: "size-10 rounded-full" }) })] }));
+}
+//# sourceMappingURL=react.js.map