@happyvertical/smrt-messages 0.30.0

package/dist/svelte/components/AccountAvatar.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+/**
+ * AccountAvatar - Provider icon with fallback initials
+ */
+
+export interface Props {
+  providerType: string;
+  name: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const { providerType, name, size = 'md' }: Props = $props();
+
+const _initials = $derived(
+  name
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((w) => w[0]?.toUpperCase() || '')
+    .join(''),
+);
+
+const _icon = $derived.by(() => {
+  switch (providerType) {
+    case 'imap':
+    case 'smtp':
+    case 'pop3':
+    case 'gmail':
+      return '✉';
+    case 'slack':
+      return '#';
+    case 'twitter':
+      return '𝕏';
+    default:
+      return null;
+  }
+});
+</script>
+
+<span
+  class="avatar avatar--{size}"
+  class:avatar--email={['imap', 'smtp', 'pop3', 'gmail'].includes(providerType)}
+  class:avatar--slack={providerType === 'slack'}
+  class:avatar--twitter={providerType === 'twitter'}
+  title={name}
+  aria-label={`${name} (${providerType})`}
+>
+  {#if _icon}
+    <span class="icon">{_icon}</span>
+  {:else}
+    <span class="initials">{_initials}</span>
+  {/if}
+</span>
+
+<style>
+  .avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-secondary-container, #d7e3f7);
+    color: var(--smrt-color-on-secondary-container, #101c2b);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    flex-shrink: 0;
+  }
+
+  .avatar--sm {
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: var(--smrt-typography-label-small-size, 0.625rem);
+  }
+
+  .avatar--md {
+    width: 2rem;
+    height: 2rem;
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+  }
+
+  .avatar--lg {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+  }
+
+  .avatar--email {
+    background: var(--smrt-color-primary-container, #d6e2ff);
+    color: var(--smrt-color-on-primary-container, #001a41);
+  }
+
+  .avatar--slack {
+    background: #e8def8;
+    color: #4a1175;
+  }
+
+  .avatar--twitter {
+    background: #d3e8fd;
+    color: #0c4a6e;
+  }
+
+  .icon {
+    font-size: 1.1em;
+  }
+
+  .initials {
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+  }
+</style>

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

@@ -0,0 +1,12 @@
+/**
+ * AccountAvatar - Provider icon with fallback initials
+ */
+export interface Props {
+    providerType: string;
+    name: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const AccountAvatar: import("svelte").Component<Props, {}, "">;
+type AccountAvatar = ReturnType<typeof AccountAvatar>;
+export default AccountAvatar;
+//# sourceMappingURL=AccountAvatar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountAvatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountAvatar.svelte.ts"],"names":[],"mappings":"AAGA;;GAEG;AAEH,MAAM,WAAW,KAAK;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AA2CD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/AccountCard.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+/**
+ * AccountCard - Individual account card with status and actions
+ */
+import { Card } from '@happyvertical/smrt-ui/ui';
+import type { AccountData } from '../types.js';
+import AccountAvatar from './AccountAvatar.svelte';
+
+export interface Props {
+  account: AccountData;
+  onsync?: (account: AccountData) => void;
+  onactivate?: (account: AccountData) => void;
+  ondeactivate?: (account: AccountData) => void;
+  onremove?: (account: AccountData) => void;
+}
+
+const { account, onsync, onactivate, ondeactivate, onremove }: Props = $props();
+
+const _lastSyncFormatted = $derived.by(() => {
+  if (!account.lastSyncAt) return 'Never synced';
+  const d =
+    typeof account.lastSyncAt === 'string'
+      ? new Date(account.lastSyncAt)
+      : account.lastSyncAt;
+  return `Last sync: ${d.toLocaleString()}`;
+});
+</script>
+
+<Card>
+  <div class="account-card">
+    <div class="account-info">
+      <AccountAvatar providerType={account.providerType} name={account.name} size="lg" />
+      <div class="details">
+        <h3 class="name">{account.name}</h3>
+        {#if account.email}
+          <span class="email">{account.email}</span>
+        {/if}
+        <span class="provider">{account.providerType}</span>
+      </div>
+    </div>
+
+    <div class="status-row">
+      <span class="status" class:status--active={account.isActive} class:status--inactive={!account.isActive}>
+        {account.isActive ? 'Active' : 'Inactive'}
+      </span>
+      <span class="sync-time">{_lastSyncFormatted}</span>
+      {#if account.unreadCount !== undefined}
+        <span class="unread-count">{account.unreadCount} unread</span>
+      {/if}
+    </div>
+
+    <div class="actions">
+      {#if onsync && account.isActive}
+        <button class="action-btn" type="button" onclick={() => onsync?.(account)}>
+          Sync
+        </button>
+      {/if}
+      {#if account.isActive && ondeactivate}
+        <button class="action-btn" type="button" onclick={() => ondeactivate?.(account)}>
+          Deactivate
+        </button>
+      {/if}
+      {#if !account.isActive && onactivate}
+        <button class="action-btn" type="button" onclick={() => onactivate?.(account)}>
+          Activate
+        </button>
+      {/if}
+      {#if onremove}
+        <button class="action-btn action-btn--danger" type="button" onclick={() => onremove?.(account)}>
+          Remove
+        </button>
+      {/if}
+    </div>
+  </div>
+</Card>
+
+<style>
+  .account-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .account-info {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .details {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  .name {
+    margin: 0;
+    font: var(--smrt-typography-title-medium-font, 500 1rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+  }
+
+  .email {
+    font: var(--smrt-typography-body-small-font, 0.75rem / 1.33 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .provider {
+    font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .status-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font: var(--smrt-typography-body-small-font, 0.75rem / 1.33 sans-serif);
+  }
+
+  .status {
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+  }
+
+  .status--active {
+    background: var(--smrt-color-tertiary-container, #d7f8d7);
+    color: var(--smrt-color-on-tertiary-container, #0a3a0a);
+  }
+
+  .status--inactive {
+    background: var(--smrt-color-surface-variant, #e1e2ec);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .sync-time {
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .unread-count {
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-primary, #005ac1);
+  }
+
+  .actions {
+    display: flex;
+    gap: 0.375rem;
+  }
+
+  .action-btn {
+    padding: 0.375rem 0.75rem;
+    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-medium-font, 500 0.75rem / 1.33 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/AccountCard.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { AccountData } from '../types.js';
+export interface Props {
+    account: AccountData;
+    onsync?: (account: AccountData) => void;
+    onactivate?: (account: AccountData) => void;
+    ondeactivate?: (account: AccountData) => void;
+    onremove?: (account: AccountData) => void;
+}
+declare const AccountCard: import("svelte").Component<Props, {}, "">;
+type AccountCard = ReturnType<typeof AccountCard>;
+export default AccountCard;
+//# sourceMappingURL=AccountCard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountCard.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC3C;AAwED,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/AccountList.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+/**
+ * AccountList - Account management list
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Grid } from '@happyvertical/smrt-ui/layout';
+import { M } from '../i18n.js';
+import type { AccountData } from '../types.js';
+import AccountCard from './AccountCard.svelte';
+
+const { t } = useI18n();
+
+export interface Props {
+  accounts: AccountData[];
+  loading?: boolean;
+  onaccountclick?: (account: AccountData) => void;
+  onsync?: (account: AccountData) => void;
+  onremove?: (account: AccountData) => void;
+}
+
+const {
+  accounts,
+  loading = false,
+  onaccountclick,
+  onsync,
+  onremove,
+}: Props = $props();
+
+function handleAccountClick(account: AccountData) {
+  onaccountclick?.(account);
+}
+
+function handleAccountKeydown(event: KeyboardEvent, account: AccountData) {
+  if (event.target !== event.currentTarget) {
+    return;
+  }
+
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+    handleAccountClick(account);
+  }
+}
+</script>
+
+<div class="account-list" role="list" aria-label={t(M['messages.account_list.accounts'])}>
+  {#if loading}
+    <div class="loading" role="status" aria-live="polite">
+      <p>{t(M['messages.account_list.loading'])}</p>
+    </div>
+  {:else if accounts.length === 0}
+    <div class="empty" role="status" aria-live="polite">
+      <p>{t(M['messages.account_list.empty'])}</p>
+    </div>
+  {:else}
+    <Grid columns="auto" role="list" aria-label={t(M['messages.account_list.accounts'])}>
+      {#each accounts as account (account.id)}
+        <div role="listitem">
+          {#if onaccountclick}
+            <div
+              role="button"
+              tabindex="0"
+              onclick={() => handleAccountClick(account)}
+              onkeydown={(event) => handleAccountKeydown(event, account)}
+            >
+              <AccountCard {account} {onsync} {onremove} />
+            </div>
+          {:else}
+            <div>
+              <AccountCard {account} {onsync} {onremove} />
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </Grid>
+  {/if}
+</div>
+
+<style>
+  .loading,
+  .empty {
+    text-align: center;
+    padding: var(--smrt-spacing-3xl, 3rem);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .loading p,
+  .empty p {
+    font: var(--smrt-typography-body-large-font, 1.125rem / 1.5 sans-serif);
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import type { AccountData } from '../types.js';
+export interface Props {
+    accounts: AccountData[];
+    loading?: boolean;
+    onaccountclick?: (account: AccountData) => void;
+    onsync?: (account: AccountData) => void;
+    onremove?: (account: AccountData) => void;
+}
+declare const AccountList: import("svelte").Component<Props, {}, "">;
+type AccountList = ReturnType<typeof AccountList>;
+export default AccountList;
+//# sourceMappingURL=AccountList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountList.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC3C;AAoED,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/AttachmentChip.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+/**
+ * AttachmentChip - File chip with icon, name, and size
+ */
+import type { AttachmentData } from '../types.js';
+
+export interface Props {
+  attachment: AttachmentData;
+  onclick?: (attachment: AttachmentData) => void;
+}
+
+const { attachment, onclick }: Props = $props();
+
+const _icon = $derived.by(() => {
+  const ct = attachment.contentType;
+  if (ct.startsWith('image/')) return '🖼️';
+  if (ct === 'application/pdf') return '📄';
+  if (ct.startsWith('video/')) return '🎥';
+  if (ct.startsWith('audio/')) return '🎧';
+  return '📎';
+});
+
+const _formattedSize = $derived.by(() => {
+  const units = ['B', 'KB', 'MB', 'GB'];
+  let size = attachment.size;
+  let unitIndex = 0;
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+  return `${size.toFixed(1)} ${units[unitIndex]}`;
+});
+</script>
+
+{#if onclick}
+  <button
+    class="chip"
+    type="button"
+    onclick={() => onclick?.(attachment)}
+    title={`${attachment.filename} (${_formattedSize})`}
+  >
+    <span class="icon">{_icon}</span>
+    <span class="name">{attachment.filename}</span>
+    <span class="size">{_formattedSize}</span>
+  </button>
+{:else}
+  <span class="chip" title={`${attachment.filename} (${_formattedSize})`}>
+    <span class="icon">{_icon}</span>
+    <span class="name">{attachment.filename}</span>
+    <span class="size">{_formattedSize}</span>
+  </span>
+{/if}
+
+<style>
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.25rem 0.625rem;
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    background: var(--smrt-color-surface-variant, #e1e2ec);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    font: var(--smrt-typography-label-medium-font, 500 0.75rem / 1.33 sans-serif);
+    border: none;
+    cursor: default;
+    max-width: 200px;
+  }
+
+  button.chip {
+    cursor: pointer;
+    transition: background var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  button.chip:hover {
+    background: color-mix(in srgb, var(--smrt-color-surface-variant, #e1e2ec) 92%, var(--smrt-color-shadow, #000));
+  }
+
+  button.chip:focus-visible {
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: 1px;
+  }
+
+  .icon {
+    flex-shrink: 0;
+    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+  }
+
+  .name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .size {
+    flex-shrink: 0;
+    opacity: 0.7;
+    font-size: var(--smrt-typography-label-small-size, 0.6875rem);
+  }
+</style>

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

@@ -0,0 +1,12 @@
+/**
+ * AttachmentChip - File chip with icon, name, and size
+ */
+import type { AttachmentData } from '../types.js';
+export interface Props {
+    attachment: AttachmentData;
+    onclick?: (attachment: AttachmentData) => void;
+}
+declare const AttachmentChip: import("svelte").Component<Props, {}, "">;
+type AttachmentChip = ReturnType<typeof AttachmentChip>;
+export default AttachmentChip;
+//# sourceMappingURL=AttachmentChip.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentChip.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AttachmentChip.svelte.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,MAAM,WAAW,KAAK;IACpB,UAAU,EAAE,cAAc,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC;CAChD;AA+CD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/AttachmentUpload.svelte

@@ -0,0 +1,160 @@
+<script lang="ts" module>
+import type { AttachmentData } from '../types.js';
+
+export interface Props {
+  attachments: AttachmentData[];
+  onattach?: (files: File[]) => void;
+  onremove?: (index: number) => void;
+  maxSize?: number;
+}
+</script>
+
+<script lang="ts">
+  import { useI18n } from '@happyvertical/smrt-ui/i18n';
+  import { M } from '../i18n.js';
+
+  const { t } = useI18n();
+
+  let {
+    attachments = [],
+    onattach,
+    onremove,
+    maxSize = 25 * 1024 * 1024,
+  }: Props = $props();
+
+  let isDragOver = $state(false);
+
+  function handleFiles(files: FileList | null) {
+    if (!files) return;
+    const fileArray = Array.from(files).filter((f) => f.size <= maxSize);
+    onattach?.(fileArray);
+  }
+
+  function handleDrop(event: DragEvent) {
+    event.preventDefault();
+    isDragOver = false;
+    handleFiles(event.dataTransfer?.files ?? null);
+  }
+
+  function handleDragOver(event: DragEvent) {
+    event.preventDefault();
+    isDragOver = true;
+  }
+
+  function handleDragLeave() {
+    isDragOver = false;
+  }
+
+  function formatSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  }
+</script>
+
+<div class="attachment-upload">
+  {#if attachments.length > 0}
+    <div class="attachment-list">
+      {#each attachments as attachment, i}
+        <div class="attachment-item">
+          <span class="filename">{attachment.filename}</span>
+          <span class="size">{formatSize(attachment.size)}</span>
+          <button
+            class="remove"
+            onclick={() => onremove?.(i)}
+            type="button"
+          >×</button>
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="drop-zone"
+    class:drag-over={isDragOver}
+    ondrop={handleDrop}
+    ondragover={handleDragOver}
+    ondragleave={handleDragLeave}
+  >
+    <label class="upload-label">
+      <input
+        type="file"
+        multiple
+        class="file-input"
+        onchange={(e) => handleFiles((e.target as HTMLInputElement).files)}
+      />
+      <span class="upload-text">{t(M['messages.attachment_upload.drop_files'])}</span>
+    </label>
+  </div>
+</div>
+
+<style>
+  .attachment-upload {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-2, 8px);
+  }
+
+  .attachment-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-1, 4px);
+  }
+
+  .attachment-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
+    border-radius: var(--smrt-radius-sm, 8px);
+    background: var(--smrt-color-surface-variant, #e7e0ec);
+    font-size: var(--smrt-typography-body-medium-size, 13px);
+    font-family: var(--smrt-font-family, system-ui);
+  }
+
+  .filename {
+    color: var(--smrt-color-on-surface-variant, #49454f);
+  }
+
+  .size {
+    color: var(--smrt-color-outline, #79747e);
+    font-size: var(--smrt-typography-label-small-size, 11px);
+  }
+
+  .remove {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0 var(--smrt-spacing-1, 4px);
+    color: var(--smrt-color-error, #ba1a1a);
+    font-size: var(--smrt-typography-label-large-size, 14px);
+  }
+
+  .drop-zone {
+    border: 2px dashed var(--smrt-color-outline-variant, #cac4d0);
+    border-radius: var(--smrt-radius-md, 12px);
+    padding: var(--smrt-spacing-3, 12px);
+    text-align: center;
+    transition: border-color var(--smrt-duration-fast, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .drop-zone.drag-over {
+    border-color: var(--smrt-color-primary, #6750a4);
+    background: var(--smrt-color-primary-container, #eaddff);
+  }
+
+  .upload-label {
+    cursor: pointer;
+  }
+
+  .file-input {
+    display: none;
+  }
+
+  .upload-text {
+    color: var(--smrt-color-outline, #79747e);
+    font-size: var(--smrt-typography-body-medium-size, 13px);
+    font-family: var(--smrt-font-family, system-ui);
+  }
+</style>