# XWUIMailReader

The message-detail pane for a single email: it renders a header (`<h2>` subject plus an HTML-escaped From / To / optional Cc / Date meta block from `data.header`), an actions row, an optional attachments area, and the message body. The body is supplied one of three ways, in priority order - a host-mounted `bodySlot(host)` callback, a `bodyHtml` string (rendered through the same `sanitizeEmailHtml()` hardening as `XWUIMailHtmlBody` into a sandboxed iframe), or plain `bodyText`. Hosts inject custom chrome via the `actionsSlot` and `attachmentsSlot` callbacks; `setMessage()` swaps in new data and re-renders. It is the reading pane composed by the larger inbox/mail screens.

## Usage

```ts
import { XWUIMailReader } from '@exonware/xwui/industry/email';

new XWUIMailReader(
  document.getElementById('app')!,
  {
    header: {
      from: 'Alex Rivera <alex@example.com>',
      to: ['sarah@example.com'],
      cc: ['team@example.com'],
      subject: 'Q1 strategy review',
      date: '2026-06-24T09:30:00Z',
    },
    bodyHtml: '<p>Hi Sarah - can you review the timeline I added?</p>',
  },
  { className: 'reading-pane' },
);
```

## Basic Usage

A single email detail pane with header meta and a sanitized HTML body.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A single email detail pane with header meta and a sanitized HTML body.
```

## Plain text with custom actions

A plain-text message that mounts Reply / Archive buttons via actionsSlot.

```example
file: examples/PlainTextWithActions.ts
html: examples/PlainTextWithActions.html
title: Plain text with custom actions
description: A plain-text message that mounts Reply / Archive buttons via actionsSlot.
```

## With attachments

A message whose attachmentsSlot lists two downloadable files.

```example
file: examples/WithAttachments.ts
html: examples/WithAttachments.html
title: With attachments
description: A message whose attachmentsSlot lists two downloadable files.
```

```api
```