@happyvertical/smrt-messages 0.30.0

package/dist/svelte/components/MessageList.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { AccountData, MessageData } from '../types.js';
+export interface Props {
+    messages: MessageData[];
+    selected?: Set<string>;
+    activeMessageId?: string;
+    accounts?: AccountData[];
+    loading?: boolean;
+    emptyMessage?: string;
+    onmessageclick?: (message: MessageData) => void;
+    onselect?: (message: MessageData) => void;
+    onflag?: (message: MessageData) => void;
+    showType?: boolean;
+    showAccount?: boolean;
+    compact?: boolean;
+    card?: Snippet<[{
+        message: MessageData;
+    }]>;
+}
+declare const MessageList: import("svelte").Component<Props, {}, "">;
+type MessageList = ReturnType<typeof MessageList>;
+export default MessageList;
+//# sourceMappingURL=MessageList.svelte.d.ts.map

package/dist/svelte/components/MessageList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/MessageList.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI5D,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,CAAC,CAAC,CAAC;CAC5C;AAyDD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/MessageStatusIndicator.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+/**
+ * MessageStatusIndicator - Read/flag/attachment indicators
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.messages.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  isRead: boolean;
+  isFlagged: boolean;
+  hasAttachments: boolean;
+  isAnswered?: boolean;
+  isDraft?: boolean;
+}
+
+const {
+  isRead,
+  isFlagged,
+  hasAttachments,
+  isAnswered = false,
+  isDraft = false,
+}: Props = $props();
+</script>
+
+<span class="status-indicators" role="group" aria-label={t(M['messages.message_status_indicator.status'])}>
+  {#if !isRead}
+    <span class="indicator unread" title={t(M['messages.message_status_indicator.unread'])} aria-label={t(M['messages.message_status_indicator.unread'])}>
+      <span class="dot"></span>
+    </span>
+  {/if}
+  {#if isFlagged}
+    <span class="indicator flagged" title={t(M['messages.message_status_indicator.flagged'])} aria-label={t(M['messages.message_status_indicator.flagged'])}>⚑</span>
+  {/if}
+  {#if hasAttachments}
+    <span class="indicator attachment" title={t(M['messages.message_status_indicator.has_attachments'])} aria-label={t(M['messages.message_status_indicator.has_attachments'])}>📎</span>
+  {/if}
+  {#if isAnswered}
+    <span class="indicator answered" title={t(M['messages.message_status_indicator.replied'])} aria-label={t(M['messages.message_status_indicator.replied'])}>↩</span>
+  {/if}
+  {#if isDraft}
+    <span class="indicator draft" title={t(M['messages.message_status_indicator.draft'])} aria-label={t(M['messages.message_status_indicator.draft'])}>✎</span>
+  {/if}
+</span>
+
+<style>
+  .status-indicators {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+  }
+
+  .indicator {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .unread .dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-primary, #005ac1);
+  }
+
+  .flagged {
+    color: var(--smrt-color-error, #ba1a1a);
+  }
+
+  .attachment {
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .answered {
+    color: var(--smrt-color-primary, #005ac1);
+  }
+
+  .draft {
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+</style>

package/dist/svelte/components/MessageStatusIndicator.svelte.d.ts

@@ -0,0 +1,11 @@
+export interface Props {
+    isRead: boolean;
+    isFlagged: boolean;
+    hasAttachments: boolean;
+    isAnswered?: boolean;
+    isDraft?: boolean;
+}
+declare const MessageStatusIndicator: import("svelte").Component<Props, {}, "">;
+type MessageStatusIndicator = ReturnType<typeof MessageStatusIndicator>;
+export default MessageStatusIndicator;
+//# sourceMappingURL=MessageStatusIndicator.svelte.d.ts.map

package/dist/svelte/components/MessageStatusIndicator.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageStatusIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/MessageStatusIndicator.svelte.ts"],"names":[],"mappings":"AAUA,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA0CD,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/MessageToolbar.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+/**
+ * MessageToolbar - Bulk action toolbar
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { Snippet } from 'svelte';
+import { M } from '../i18n.messages.js';
+import type { BulkAction } from '../types.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  selectedCount: number;
+  totalCount: number;
+  onaction?: (action: BulkAction) => void;
+  onselectall?: () => void;
+  onclearselection?: () => void;
+  extraActions?: Snippet;
+}
+
+const {
+  selectedCount,
+  totalCount,
+  onaction,
+  onselectall,
+  onclearselection,
+  extraActions,
+}: Props = $props();
+</script>
+
+<div class="toolbar" role="toolbar" aria-label={t(M['messages.message_toolbar.actions_label'])}>
+  <div class="selection-info">
+    {#if selectedCount > 0}
+      <span class="count">{t(M['messages.message_toolbar.count_selected'], { selectedCount, totalCount })}</span>
+      {#if onclearselection}
+        <button class="link-btn" type="button" onclick={onclearselection}>
+          Clear
+        </button>
+      {/if}
+    {:else}
+      <span class="count">{totalCount} messages</span>
+    {/if}
+    {#if onselectall && selectedCount < totalCount}
+      <button class="link-btn" type="button" onclick={onselectall}>
+        {t(M['messages.message_toolbar.select_all'])}
+      </button>
+    {/if}
+  </div>
+
+  {#if selectedCount > 0 && onaction}
+    <div class="actions">
+      <button class="action-btn" type="button" onclick={() => onaction?.('markRead')}>
+        {t(M['messages.message_toolbar.mark_read'])}
+      </button>
+      <button class="action-btn" type="button" onclick={() => onaction?.('markUnread')}>
+        {t(M['messages.message_toolbar.mark_unread'])}
+      </button>
+      <button class="action-btn" type="button" onclick={() => onaction?.('flag')}>
+        Flag
+      </button>
+      <button class="action-btn" type="button" onclick={() => onaction?.('unflag')}>
+        Unflag
+      </button>
+      <button class="action-btn action-btn--danger" type="button" onclick={() => onaction?.('delete')}>
+        Delete
+      </button>
+      {#if extraActions}
+        {@render extraActions()}
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0.75rem;
+    background: var(--smrt-color-surface-variant, #e1e2ec);
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  .selection-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .count {
+    font: var(--smrt-typography-body-small-font, 0.75rem / 1.33 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .link-btn {
+    border: none;
+    background: none;
+    font: var(--smrt-typography-label-medium-font, 500 0.75rem / 1.33 sans-serif);
+    color: var(--smrt-color-primary, #005ac1);
+    cursor: pointer;
+    text-decoration: underline;
+    padding: 0;
+  }
+
+  .actions {
+    display: flex;
+    gap: 0.375rem;
+    flex-wrap: wrap;
+  }
+
+  .action-btn {
+    padding: 0.25rem 0.625rem;
+    border: 1px solid var(--smrt-color-outline, #72787e);
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    background: var(--smrt-color-surface, #fefbff);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+    font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
+    cursor: pointer;
+  }
+
+  .action-btn:hover {
+    background: var(--smrt-color-surface-variant, #e1e2ec);
+  }
+
+  .action-btn--danger {
+    color: var(--smrt-color-error, #ba1a1a);
+    border-color: var(--smrt-color-error, #ba1a1a);
+  }
+</style>

package/dist/svelte/components/MessageToolbar.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { BulkAction } from '../types.js';
+export interface Props {
+    selectedCount: number;
+    totalCount: number;
+    onaction?: (action: BulkAction) => void;
+    onselectall?: () => void;
+    onclearselection?: () => void;
+    extraActions?: Snippet;
+}
+declare const MessageToolbar: import("svelte").Component<Props, {}, "">;
+type MessageToolbar = ReturnType<typeof MessageToolbar>;
+export default MessageToolbar;
+//# sourceMappingURL=MessageToolbar.svelte.d.ts.map

package/dist/svelte/components/MessageToolbar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageToolbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/MessageToolbar.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,MAAM,WAAW,KAAK;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAoED,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/MessageTypeBadge.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+/**
+ * MessageTypeBadge - Icon + label badge for message types
+ */
+import { Badge } from '@happyvertical/smrt-ui/ui';
+import type { MessageType } from '../types.js';
+
+export interface Props {
+  type: MessageType;
+  size?: 'sm' | 'md';
+}
+
+const { type, size = 'sm' }: Props = $props();
+
+const _label = $derived.by(() => {
+  switch (type) {
+    case 'email':
+      return 'Email';
+    case 'tweet':
+      return 'Tweet';
+    case 'slack':
+      return 'Slack';
+    default:
+      return type;
+  }
+});
+
+const _variant = $derived.by(() => {
+  switch (type) {
+    case 'email':
+      return 'primary' as const;
+    case 'tweet':
+      return 'info' as const;
+    case 'slack':
+      return 'success' as const;
+    default:
+      return 'default' as const;
+  }
+});
+</script>
+
+<Badge variant={_variant} {size}>
+  <span class="type-badge">
+    <span class="type-icon">{type === 'email' ? '✉' : type === 'tweet' ? '𝕏' : type === 'slack' ? '#' : '✉'}</span>
+    {_label}
+  </span>
+</Badge>
+
+<style>
+  .type-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .type-icon {
+    font-size: 0.85em;
+  }
+</style>

package/dist/svelte/components/MessageTypeBadge.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { MessageType } from '../types.js';
+export interface Props {
+    type: MessageType;
+    size?: 'sm' | 'md';
+}
+declare const MessageTypeBadge: import("svelte").Component<Props, {}, "">;
+type MessageTypeBadge = ReturnType<typeof MessageTypeBadge>;
+export default MessageTypeBadge;
+//# sourceMappingURL=MessageTypeBadge.svelte.d.ts.map

package/dist/svelte/components/MessageTypeBadge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageTypeBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/MessageTypeBadge.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AA+CD,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/RecipientInput.svelte

@@ -0,0 +1,150 @@
+<script lang="ts" module>
+import type { RecipientEntry } from '../types.js';
+
+export interface Props {
+  label?: string;
+  recipients: RecipientEntry[];
+  onchange?: (recipients: RecipientEntry[]) => void;
+  placeholder?: string;
+}
+</script>
+
+<script lang="ts">
+  let {
+    label = 'To',
+    recipients = [],
+    onchange,
+    placeholder = 'Add recipient...',
+  }: Props = $props();
+
+  let inputValue = $state('');
+  const inputId = $derived(
+    `recipient-input-${label.toLowerCase().replace(/[^a-z0-9]+/gi, '-')}`,
+  );
+
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+  function addRecipient() {
+    const trimmed = inputValue.trim();
+    if (!trimmed) return;
+
+    const isValid = emailRegex.test(trimmed);
+    const entry: RecipientEntry = {
+      address: trimmed,
+      isValid,
+    };
+
+    const updated = [...recipients, entry];
+    onchange?.(updated);
+    inputValue = '';
+  }
+
+  function removeRecipient(index: number) {
+    const updated = recipients.filter((_, i) => i !== index);
+    onchange?.(updated);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ',') {
+      event.preventDefault();
+      addRecipient();
+    }
+    if (event.key === 'Backspace' && !inputValue && recipients.length > 0) {
+      removeRecipient(recipients.length - 1);
+    }
+  }
+</script>
+
+<div class="recipient-input">
+  <label class="label" for={inputId}>{label}</label>
+  <div class="chips-container">
+    {#each recipients as recipient, i}
+      <span class="chip" class:invalid={!recipient.isValid}>
+        <span class="chip-text">{recipient.name || recipient.address}</span>
+        <button
+          class="chip-remove"
+          onclick={() => removeRecipient(i)}
+          type="button"
+        >×</button>
+      </span>
+    {/each}
+    <input
+      id={inputId}
+      type="text"
+      class="input"
+      bind:value={inputValue}
+      {placeholder}
+      onkeydown={handleKeydown}
+      onblur={addRecipient}
+    />
+  </div>
+</div>
+
+<style>
+  .recipient-input {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-1, 4px) 0;
+    border-bottom: 1px solid var(--smrt-color-outline-variant, #cac4d0);
+  }
+
+  .label {
+    font-family: var(--smrt-font-family, system-ui);
+    font-size: var(--smrt-typography-label-large-size, 14px);
+    color: var(--smrt-color-on-surface-variant, #49454f);
+    padding-top: var(--smrt-spacing-2, 8px);
+    min-width: 32px;
+  }
+
+  .chips-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-1, 4px);
+    flex: 1;
+    align-items: center;
+  }
+
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1, 4px);
+    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-1, 4px) var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
+    border-radius: var(--smrt-radius-sm, 8px);
+    background: var(--smrt-color-secondary-container, #e8def8);
+    color: var(--smrt-color-on-secondary-container, #1d192b);
+    font-size: var(--smrt-typography-label-large-size, 13px);
+    font-family: var(--smrt-font-family, system-ui);
+  }
+
+  .chip.invalid {
+    background: var(--smrt-color-error-container, #ffdad6);
+    color: var(--smrt-color-on-error-container, #410002);
+  }
+
+  .chip-remove {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0 var(--smrt-spacing-1, 4px);
+    font-size: var(--smrt-typography-label-large-size, 14px);
+    color: inherit;
+    opacity: 0.7;
+  }
+
+  .chip-remove:hover {
+    opacity: 1;
+  }
+
+  .input {
+    flex: 1;
+    min-width: 120px;
+    border: none;
+    outline: none;
+    font-family: var(--smrt-font-family, system-ui);
+    font-size: var(--smrt-typography-body-medium-size, 14px);
+    padding: var(--smrt-spacing-1, 4px) 0;
+    background: transparent;
+    color: var(--smrt-color-on-surface, #1c1b1f);
+  }
+</style>

package/dist/svelte/components/RecipientInput.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { RecipientEntry } from '../types.js';
+export interface Props {
+    label?: string;
+    recipients: RecipientEntry[];
+    onchange?: (recipients: RecipientEntry[]) => void;
+    placeholder?: string;
+}
+declare const RecipientInput: import("svelte").Component<Props, {}, "">;
+type RecipientInput = ReturnType<typeof RecipientInput>;
+export default RecipientInput;
+//# sourceMappingURL=RecipientInput.svelte.d.ts.map

package/dist/svelte/components/RecipientInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecipientInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/RecipientInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAmED,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/ReplyForm.svelte

@@ -0,0 +1,159 @@
+<script lang="ts" module>
+import type { MessageData } from '../types.js';
+
+export interface Props {
+  originalMessage: MessageData;
+  replyAll?: boolean;
+  onsend?: (body: string) => void;
+  oncancel?: () => void;
+}
+</script>
+
+<script lang="ts">
+  import { useI18n } from '@happyvertical/smrt-ui/i18n';
+  import { M } from '../i18n.js';
+
+  const { t } = useI18n();
+
+  let {
+    originalMessage,
+    replyAll = false,
+    onsend,
+    oncancel,
+  }: Props = $props();
+
+  let body = $state('');
+  let isSending = $state(false);
+
+  const quotedBody = $derived.by(() => {
+    const dateStr = originalMessage.date
+      ? new Date(originalMessage.date).toLocaleString()
+      : 'unknown date';
+    const from = originalMessage.senderName || originalMessage.senderAddress;
+    const lines = (originalMessage.body || '')
+      .split('\n')
+      .map((l) => `> ${l}`)
+      .join('\n');
+    return `On ${dateStr}, ${from} wrote:\n${lines}`;
+  });
+
+  function handleSend() {
+    if (isSending) return;
+    isSending = true;
+    onsend?.(body);
+  }
+</script>
+
+<div class="reply-form">
+  <div class="reply-header">
+    {replyAll ? 'Reply All' : 'Reply'} to {originalMessage.senderName || originalMessage.senderAddress}
+  </div>
+
+  <textarea
+    class="reply-body"
+    bind:value={body}
+    placeholder={t(M['messages.reply_form.body_placeholder'])}
+    rows={5}
+  ></textarea>
+
+  <div class="quoted-original">
+    <pre class="quoted-text">{quotedBody}</pre>
+  </div>
+
+  <div class="actions">
+    <button
+      type="button"
+      class="btn-primary"
+      disabled={isSending || !body.trim()}
+      onclick={handleSend}
+    >
+      {isSending ? 'Sending...' : 'Send Reply'}
+    </button>
+    <button type="button" class="btn-text" onclick={() => oncancel?.()}>
+      Cancel
+    </button>
+  </div>
+</div>
+
+<style>
+  .reply-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-3, 12px);
+    border: 1px solid var(--smrt-color-outline-variant, #cac4d0);
+    border-radius: var(--smrt-radius-md, 12px);
+    background: var(--smrt-color-surface, #fffbfe);
+    font-family: var(--smrt-font-family, system-ui);
+  }
+
+  .reply-header {
+    font-size: var(--smrt-typography-title-small-size, 13px);
+    color: var(--smrt-color-on-surface-variant, #49454f);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+  }
+
+  .reply-body {
+    width: 100%;
+    border: 1px solid var(--smrt-color-outline-variant, #cac4d0);
+    border-radius: var(--smrt-radius-sm, 8px);
+    padding: var(--smrt-spacing-2, 8px);
+    font-family: var(--smrt-font-family, system-ui);
+    font-size: var(--smrt-typography-body-medium-size, 14px);
+    resize: vertical;
+    box-sizing: border-box;
+  }
+
+  .reply-body:focus {
+    outline: 2px solid var(--smrt-color-primary, #6750a4);
+    outline-offset: -1px;
+  }
+
+  .quoted-original {
+    padding: var(--smrt-spacing-2, 8px);
+    border-left: 3px solid var(--smrt-color-outline-variant, #cac4d0);
+    background: var(--smrt-color-surface-variant, #e7e0ec);
+    border-radius: 0 var(--smrt-radius-sm, 8px) var(--smrt-radius-sm, 8px) 0;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  .quoted-text {
+    margin: 0;
+    font-size: var(--smrt-typography-body-small-size, 12px);
+    color: var(--smrt-color-on-surface-variant, #49454f);
+    white-space: pre-wrap;
+    font-family: var(--smrt-font-family, system-ui);
+  }
+
+  .actions {
+    display: flex;
+    gap: var(--smrt-spacing-2, 8px);
+  }
+
+  .btn-primary {
+    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-6, 24px);
+    border-radius: var(--smrt-radius-full, 20px);
+    border: none;
+    background: var(--smrt-color-primary, #6750a4);
+    color: var(--smrt-color-on-primary, #fff);
+    font-family: var(--smrt-font-family, system-ui);
+    font-size: var(--smrt-typography-label-large-size, 14px);
+    cursor: pointer;
+  }
+
+  .btn-primary:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .btn-text {
+    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-4, 16px);
+    border: none;
+    background: transparent;
+    color: var(--smrt-color-on-surface-variant, #49454f);
+    font-family: var(--smrt-font-family, system-ui);
+    font-size: var(--smrt-typography-label-large-size, 14px);
+    cursor: pointer;
+  }
+</style>

package/dist/svelte/components/ReplyForm.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { MessageData } from '../types.js';
+export interface Props {
+    originalMessage: MessageData;
+    replyAll?: boolean;
+    onsend?: (body: string) => void;
+    oncancel?: () => void;
+}
+declare const ReplyForm: import("svelte").Component<Props, {}, "">;
+type ReplyForm = ReturnType<typeof ReplyForm>;
+export default ReplyForm;
+//# sourceMappingURL=ReplyForm.svelte.d.ts.map