@echothink-ui/inbox 0.1.0

package/src/components/ApprovalToSendPanel.tsx

@@ -0,0 +1,118 @@
+import * as React from "react";
+import { Badge, Button, Panel, Textarea } from "@echothink-ui/core";
+import type { MessageDraft } from "../types";
+
+export interface ApprovalToSendPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  draft?: MessageDraft;
+  recipients?: string[];
+  riskLevel?: "low" | "medium" | "high" | "critical";
+  policyRef?: React.ReactNode;
+  onApprove?: (reason?: string) => void;
+  onReject?: (reason?: string) => void;
+}
+
+export function ApprovalToSendPanel({
+  draft,
+  recipients = [],
+  riskLevel = "low",
+  policyRef,
+  onApprove,
+  onReject,
+  className,
+  ...props
+}: ApprovalToSendPanelProps) {
+  const [reason, setReason] = React.useState("");
+  const toRecipients = recipients.length ? recipients : (draft?.to ?? []);
+  const ccRecipients = draft?.cc ?? [];
+  const bccRecipients = draft?.bcc ?? [];
+  const subject = draft?.subject?.trim() || "No subject";
+  const body = draft?.body?.trim() || "No message body provided.";
+  const riskSeverity =
+    riskLevel === "critical" || riskLevel === "high"
+      ? "danger"
+      : riskLevel === "medium"
+        ? "warning"
+        : "info";
+  const riskLabel = `${riskLevel.charAt(0).toUpperCase()}${riskLevel.slice(1)} risk`;
+  const recipientCount =
+    recipients.length || toRecipients.length + ccRecipients.length + bccRecipients.length;
+  const recipientKind = recipients.length ? "external recipient" : "recipient";
+  const recipientSummary =
+    recipientCount === 1 ? `1 ${recipientKind}` : `${recipientCount || "No"} ${recipientKind}s`;
+
+  const formatRecipients = (values: string[]) =>
+    values.length ? values.join(", ") : "Not specified";
+
+  return (
+    <Panel
+      {...props}
+      className={`eth-inbox-send-approval eth-inbox-send-approval--${riskLevel} ${className ?? ""}`}
+      title="Approval required"
+      subtitle="Review this outbound message before it is sent."
+      data-eth-component="ApprovalToSendPanel"
+    >
+      <div className="eth-inbox-send-approval__status">
+        <div className="eth-inbox-send-approval__summary">
+          <Badge severity={riskSeverity}>{riskLabel}</Badge>
+          {policyRef ? <span className="eth-inbox-send-approval__policy">{policyRef}</span> : null}
+        </div>
+        <span className="eth-inbox-send-approval__state">Awaiting approval</span>
+      </div>
+
+      <section
+        className="eth-inbox-send-approval__message"
+        aria-label="Outbound message for approval"
+      >
+        <header className="eth-inbox-send-approval__message-header">
+          <div>
+            <h4>Outbound message</h4>
+            <p>{recipientSummary}</p>
+          </div>
+        </header>
+        <dl className="eth-inbox-send-approval__meta">
+          <div>
+            <dt>To</dt>
+            <dd>{formatRecipients(toRecipients)}</dd>
+          </div>
+          {ccRecipients.length ? (
+            <div>
+              <dt>Cc</dt>
+              <dd>{formatRecipients(ccRecipients)}</dd>
+            </div>
+          ) : null}
+          {bccRecipients.length ? (
+            <div>
+              <dt>Bcc</dt>
+              <dd>{formatRecipients(bccRecipients)}</dd>
+            </div>
+          ) : null}
+          <div>
+            <dt>Subject</dt>
+            <dd>{subject}</dd>
+          </div>
+        </dl>
+        <div className="eth-inbox-send-approval__message-body">
+          <span>Message body</span>
+          <p>{body}</p>
+        </div>
+      </section>
+
+      <div className="eth-inbox-send-approval__decision">
+        <Textarea
+          value={reason}
+          labelText="Decision note"
+          helperText="Optional for approval. Include the policy reason when rejecting."
+          placeholder="Add an approval or rejection reason"
+          onChange={(event) => setReason(event.currentTarget.value)}
+        />
+      </div>
+
+      <div className="eth-inbox-send-approval__actions">
+        <Button intent="danger" onClick={() => onReject?.(reason || undefined)}>
+          Reject
+        </Button>
+        <Button onClick={() => onApprove?.(reason || undefined)}>Approve send</Button>
+      </div>
+    </Panel>
+  );
+}

package/src/components/AttachmentList.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { IconButton } from "@echothink-ui/core";
+import { DocumentIcon, DownloadIcon, ViewIcon } from "@echothink-ui/icons";
+import type { Attachment } from "../types";
+import { formatBytes } from "../utils";
+
+export interface AttachmentListProps extends React.HTMLAttributes<HTMLDivElement> {
+  attachments?: Attachment[];
+  onPreview?: (attachment: Attachment) => void;
+  onDownload?: (attachment: Attachment) => void;
+}
+
+export function AttachmentList({
+  attachments = [],
+  onPreview,
+  onDownload,
+  className,
+  role,
+  "aria-label": ariaLabel,
+  ...props
+}: AttachmentListProps) {
+  if (!attachments.length) return null;
+  return (
+    <div
+      {...props}
+      className={["eth-inbox-attachments", className].filter(Boolean).join(" ")}
+      data-eth-component="AttachmentList"
+      role={role ?? "list"}
+      aria-label={ariaLabel ?? "Message attachments"}
+    >
+      {attachments.map((attachment) => {
+        const typeLabel = attachmentTypeLabel(attachment);
+        const hasActions = Boolean(onPreview || onDownload);
+
+        return (
+          <div key={attachment.id} className="eth-inbox-attachments__tile" role="listitem">
+            <span className="eth-inbox-attachments__icon" aria-hidden="true">
+              <DocumentIcon size={18} />
+            </span>
+            <div className="eth-inbox-attachments__content">
+              <strong title={attachment.name}>{attachment.name}</strong>
+              <span className="eth-inbox-attachments__meta">
+                <span className="eth-inbox-attachments__type">{typeLabel}</span>
+                <span>{attachment.mimeType}</span>
+                <span>{formatBytes(attachment.size)}</span>
+              </span>
+            </div>
+            {hasActions ? (
+              <div
+                className="eth-inbox-attachments__actions"
+                aria-label={`Actions for ${attachment.name}`}
+              >
+                {onPreview ? (
+                  <IconButton
+                    intent="ghost"
+                    density="compact"
+                    label={`Preview ${attachment.name}`}
+                    icon={<ViewIcon size={16} />}
+                    onClick={() => onPreview(attachment)}
+                  />
+                ) : null}
+                {onDownload ? (
+                  <IconButton
+                    intent="ghost"
+                    density="compact"
+                    label={`Download ${attachment.name}`}
+                    icon={<DownloadIcon size={16} />}
+                    onClick={() => onDownload(attachment)}
+                  />
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function attachmentTypeLabel(attachment: Attachment) {
+  const extension = attachment.name.split(".").pop();
+  if (extension && extension !== attachment.name) return extension.slice(0, 4).toUpperCase();
+  const subtype = attachment.mimeType.split("/").pop();
+  return subtype ? subtype.slice(0, 4).toUpperCase() : "FILE";
+}

package/src/components/AttachmentPreview.tsx

@@ -0,0 +1,207 @@
+import * as React from "react";
+import type { Attachment } from "../types";
+import { formatBytes } from "../utils";
+
+export interface AttachmentPreviewProps extends React.HTMLAttributes<HTMLElement> {
+  attachment?: Attachment;
+  children?: React.ReactNode;
+}
+
+export function AttachmentPreview({
+  attachment,
+  children,
+  className,
+  ...props
+}: AttachmentPreviewProps) {
+  const kind = getPreviewKind(attachment);
+  const previewSource = attachment?.previewUrl ?? attachment?.src;
+  const hasCustomPreview = children !== undefined && children !== null;
+  const label = attachment ? `Attachment preview for ${attachment.name}` : "Attachment preview";
+
+  return (
+    <section
+      {...props}
+      aria-label={props["aria-label"] ?? label}
+      className={`eth-inbox-attachment-preview ${className ?? ""}`}
+      data-eth-component="AttachmentPreview"
+    >
+      {attachment ? (
+        <header className="eth-inbox-attachment-preview__header">
+          <div className="eth-inbox-attachment-preview__file">
+            <span
+              className="eth-inbox-attachment-preview__glyph"
+              data-kind={kind}
+              aria-hidden="true"
+            >
+              {kindToken(kind)}
+            </span>
+            <div className="eth-inbox-attachment-preview__summary">
+              <strong title={attachment.name}>{attachment.name}</strong>
+              <span>
+                {attachment.mimeType} - {formatBytes(attachment.size)}
+              </span>
+            </div>
+          </div>
+          <span className="eth-inbox-attachment-preview__state">{previewStateLabel(kind)}</span>
+        </header>
+      ) : null}
+      <div
+        className={`eth-inbox-attachment-preview__body eth-inbox-attachment-preview__body--${kind}`}
+      >
+        {hasCustomPreview ? children : renderDefaultPreview(attachment, kind, previewSource)}
+      </div>
+    </section>
+  );
+}
+
+type AttachmentPreviewKind =
+  | "empty"
+  | "pdf"
+  | "image"
+  | "text"
+  | "spreadsheet"
+  | "archive"
+  | "file";
+
+function getPreviewKind(attachment?: Attachment): AttachmentPreviewKind {
+  if (!attachment) return "empty";
+  const mimeType = attachment.mimeType.toLowerCase();
+  const name = attachment.name.toLowerCase();
+
+  if (mimeType === "application/pdf" || name.endsWith(".pdf")) return "pdf";
+  if (mimeType.startsWith("image/")) return "image";
+  if (
+    mimeType.includes("spreadsheet") ||
+    mimeType.includes("csv") ||
+    name.endsWith(".csv") ||
+    name.endsWith(".xls") ||
+    name.endsWith(".xlsx")
+  ) {
+    return "spreadsheet";
+  }
+  if (
+    mimeType.startsWith("text/") ||
+    ["application/json", "application/xml", "application/yaml"].includes(mimeType) ||
+    name.endsWith(".md")
+  ) {
+    return "text";
+  }
+  if (
+    mimeType.includes("zip") ||
+    mimeType.includes("compressed") ||
+    name.endsWith(".zip") ||
+    name.endsWith(".gz")
+  ) {
+    return "archive";
+  }
+
+  return "file";
+}
+
+function kindToken(kind: AttachmentPreviewKind) {
+  if (kind === "pdf") return "PDF";
+  if (kind === "image") return "IMG";
+  if (kind === "text") return "TXT";
+  if (kind === "spreadsheet") return "CSV";
+  if (kind === "archive") return "ZIP";
+  return "FILE";
+}
+
+function previewStateLabel(kind: AttachmentPreviewKind) {
+  if (kind === "archive" || kind === "file") return "Preview unavailable";
+  return "Inline preview";
+}
+
+function renderDefaultPreview(
+  attachment: Attachment | undefined,
+  kind: AttachmentPreviewKind,
+  previewSource?: string
+) {
+  if (!attachment) {
+    return (
+      <div className="eth-inbox-attachment-preview__empty">
+        <strong>No attachment selected</strong>
+        <span>PDF, image, text, and spreadsheet files can be previewed inline.</span>
+      </div>
+    );
+  }
+
+  if (kind === "image") {
+    return previewSource ? (
+      <img
+        className="eth-inbox-attachment-preview__image"
+        src={previewSource}
+        alt={`${attachment.name} preview`}
+      />
+    ) : (
+      <div
+        className="eth-inbox-attachment-preview__image-frame"
+        role="img"
+        aria-label={`${attachment.name} image preview`}
+      >
+        <span />
+        <span />
+      </div>
+    );
+  }
+
+  if (kind === "text") {
+    return (
+      <div
+        className="eth-inbox-attachment-preview__text"
+        role="img"
+        aria-label={`${attachment.name} text preview`}
+      >
+        {Array.from({ length: 9 }, (_, index) => (
+          <span key={index} />
+        ))}
+      </div>
+    );
+  }
+
+  if (kind === "spreadsheet") {
+    return (
+      <div
+        className="eth-inbox-attachment-preview__sheet"
+        role="img"
+        aria-label={`${attachment.name} spreadsheet preview`}
+      >
+        {Array.from({ length: 20 }, (_, index) => (
+          <span key={index} />
+        ))}
+      </div>
+    );
+  }
+
+  if (kind === "pdf") {
+    return (
+      <div
+        className="eth-inbox-attachment-preview__document"
+        role="img"
+        aria-label={`${attachment.name} PDF preview`}
+      >
+        <div className="eth-inbox-attachment-preview__document-bar">
+          <span>{attachment.mimeType}</span>
+          <span>Page 1</span>
+        </div>
+        <div className="eth-inbox-attachment-preview__page">
+          <strong>{attachment.name.replace(/\.[^.]+$/, "") || attachment.name}</strong>
+          <span />
+          <span />
+          <span />
+          <span />
+          <span />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="eth-inbox-attachment-preview__empty">
+      <strong>Preview unavailable</strong>
+      <span>
+        {attachment.mimeType} files are kept as attachments for download or external review.
+      </span>
+    </div>
+  );
+}

package/src/components/EmailAutomationRulePanel.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+import { Badge, Button, Panel, Toggle } from "@echothink-ui/core";
+import { EditIcon } from "@echothink-ui/icons";
+import type { AutomationRule } from "../types";
+
+export interface EmailAutomationRulePanelProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "onToggle"
+> {
+  rules?: AutomationRule[];
+  onToggle?: (id: string, enabled: boolean) => void;
+  onEdit?: (id: string) => void;
+}
+
+export function EmailAutomationRulePanel({
+  rules = [],
+  onToggle,
+  onEdit,
+  className,
+  ...props
+}: EmailAutomationRulePanelProps) {
+  const enabledCount = rules.reduce((count, rule) => count + (rule.enabled ? 1 : 0), 0);
+  const ruleCountLabel = `${rules.length} automation ${rules.length === 1 ? "rule" : "rules"}`;
+  const subtitle = rules.length
+    ? `${enabledCount} of ${ruleCountLabel} enabled`
+    : "Create routing, drafting, and mailbox automation rules.";
+
+  return (
+    <Panel
+      {...props}
+      className={`eth-inbox-rules ${className ?? ""}`}
+      title="Automation rules"
+      subtitle={subtitle}
+      data-eth-component="EmailAutomationRulePanel"
+    >
+      {rules.length ? (
+        <div className="eth-inbox-rules__list" role="list">
+          {rules.map((rule) => {
+            const headingId = `eth-inbox-rule-${rule.id.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+
+            return (
+              <article
+                key={rule.id}
+                aria-labelledby={headingId}
+                className={`eth-inbox-rules__item ${
+                  rule.enabled ? "eth-inbox-rules__item--enabled" : "eth-inbox-rules__item--paused"
+                }`}
+                role="listitem"
+              >
+                <div className="eth-inbox-rules__content">
+                  <header className="eth-inbox-rules__item-header">
+                    <h4 id={headingId}>{rule.name}</h4>
+                    <Badge severity={rule.enabled ? "success" : "neutral"}>
+                      {rule.enabled ? "Enabled" : "Paused"}
+                    </Badge>
+                  </header>
+                  <dl className="eth-inbox-rules__definition">
+                    <div>
+                      <dt>Trigger</dt>
+                      <dd>{rule.conditions}</dd>
+                    </div>
+                    <div>
+                      <dt>Action</dt>
+                      <dd>{rule.actions}</dd>
+                    </div>
+                  </dl>
+                </div>
+
+                <div className="eth-inbox-rules__controls">
+                  <Toggle
+                    checked={rule.enabled}
+                    className="eth-inbox-rules__toggle"
+                    disabled={!onToggle}
+                    hideLabel
+                    label={`Automation status for ${rule.name}`}
+                    offLabel="Paused"
+                    onChange={(event) => onToggle?.(rule.id, event.currentTarget.checked)}
+                    onLabel="Enabled"
+                  />
+                  <Button
+                    aria-label={`Edit ${rule.name}`}
+                    density="compact"
+                    disabled={!onEdit}
+                    icon={<EditIcon size={16} />}
+                    intent="secondary"
+                    onClick={() => onEdit?.(rule.id)}
+                  >
+                    Edit
+                  </Button>
+                </div>
+              </article>
+            );
+          })}
+        </div>
+      ) : (
+        <p className="eth-inbox-rules__empty">No automation rules configured.</p>
+      )}
+    </Panel>
+  );
+}

package/src/components/InboxShell.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import type { SurfaceComponentProps } from "@echothink-ui/core";
+
+export interface InboxShellProps extends SurfaceComponentProps {
+  folders?: React.ReactNode;
+  list?: React.ReactNode;
+  thread?: React.ReactNode;
+  inspector?: React.ReactNode;
+  toolbar?: React.ReactNode;
+}
+
+export function InboxShell({
+  folders,
+  list,
+  thread,
+  inspector,
+  toolbar,
+  className,
+  title,
+  description,
+  ...props
+}: InboxShellProps) {
+  const hasInspector = Boolean(inspector);
+
+  return (
+    <section
+      {...props}
+      className={`eth-inbox-shell ${className ?? ""}`}
+      data-eth-component="InboxShell"
+    >
+      {(title || description || toolbar) && (
+        <header className="eth-inbox-shell__header">
+          <div>
+            {title ? <h2>{title}</h2> : null}
+            {description ? <p>{description}</p> : null}
+          </div>
+          {toolbar ? <div className="eth-inbox-shell__toolbar">{toolbar}</div> : null}
+        </header>
+      )}
+      <div
+        className={`eth-inbox-shell__layout ${
+          hasInspector ? "eth-inbox-shell__layout--has-inspector" : ""
+        }`}
+      >
+        <aside className="eth-inbox-shell__folders" aria-label="Mailbox folders">
+          {folders}
+        </aside>
+        <aside className="eth-inbox-shell__list" aria-label="Message list">
+          {list}
+        </aside>
+        <main className="eth-inbox-shell__thread" aria-label="Selected conversation">
+          {thread}
+        </main>
+        {inspector ? (
+          <aside className="eth-inbox-shell__inspector" aria-label="Conversation inspector">
+            {inspector}
+          </aside>
+        ) : null}
+      </div>
+    </section>
+  );
+}