@happyvertical/smrt-messages 0.34.6 → 0.34.8

package/dist/manifest.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
-  "timestamp": 1782278435844,
+  "timestamp": 1782318242883,
   "packageName": "@happyvertical/smrt-messages",
-  "packageVersion": "0.34.6",
+  "packageVersion": "0.34.8",
   "objects": {
     "@happyvertical/smrt-messages:AccountCollection": {
       "name": "accountcollection",

package/dist/smrt-knowledge.json

@@ -1,13 +1,13 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-06-24T05:20:36.527Z",
+  "generatedAt": "2026-06-24T16:24:03.776Z",
   "packageName": "@happyvertical/smrt-messages",
-  "packageVersion": "0.34.6",
+  "packageVersion": "0.34.8",
   "sourceManifestPath": "dist/manifest.json",
   "agentDocPath": "AGENTS.md",
   "sourceHashes": {
-    "manifest": "74dd6bcd838fe3da57812b01b4e35eb63e6f61c12ff460a2ca6b75375598ffdb",
-    "packageJson": "c68a8210454fbeb5aec5c41dbf13319fbc5bba00cf9b089eebd2e47a0a3949c4",
+    "manifest": "d1f7a55a2b6449350258b42e86f07dbf4acb7318582c17b232bc49d4da269875",
+    "packageJson": "5c0336ed38066651d6b70528138429f497205e16db193a655912ee226c25f5f2",
     "agents": "32563a30ceeb21bd8732042f894e2a148fd83727caffc1eec7c97540005c6fdc"
   },
   "exports": [

package/dist/svelte/components/AttachmentUpload.svelte

@@ -80,11 +80,12 @@ export interface Props {
     ondragleave={handleDragLeave}
   >
     <label class="upload-label">
+      <!-- raw-primitive-allow: native file input — the Input primitive binds value, which is invalid for type=file (throws InvalidStateError on the bind write-back) and renders a visible control; this hidden picker behind the drop zone stays native -->
       <input
         type="file"
         multiple
         class="file-input"
-        onchange={(e) => handleFiles((e.target as HTMLInputElement).files)}
+        onchange={(e) => handleFiles((e.currentTarget as HTMLInputElement).files)}
       />
       <span class="upload-text">{t(M['messages.attachment_upload.drop_files'])}</span>
     </label>
@@ -155,7 +156,11 @@ export interface Props {
     cursor: pointer;
   }
 
-  .file-input {
+  /*
+   * The native file input stays visually hidden — the visible affordance is the
+   * `.upload-text` label inside the styled drop-zone (issue #1589).
+   */
+  .upload-label .file-input {
     display: none;
   }
 

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentUpload.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AttachmentUpload.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,KAAK;IACpB,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA+ED,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"AttachmentUpload.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AttachmentUpload.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,KAAK;IACpB,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAgFD,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/ComposeForm.svelte

@@ -18,6 +18,7 @@ export interface Props {
 
 <script lang="ts">
   import { useI18n } from '@happyvertical/smrt-ui/i18n';
+  import { Form, Input, Select, Textarea } from '@happyvertical/smrt-ui/forms';
   import { Button } from '@happyvertical/smrt-ui/ui';
   import { M } from '../i18n.js';
   import RecipientInput from './RecipientInput.svelte';
@@ -138,11 +139,12 @@ export interface Props {
   }
 </script>
 
-<form class="compose-form" onsubmit={(e) => { e.preventDefault(); handleSend(); }}>
+<div class="compose-form-shell">
+<Form class="compose-form" onsubmit={handleSend}>
   {#if accounts.length > 1}
     <div class="field">
       <label class="field-label" for="compose-account">From</label>
-      <select
+      <Select
         id="compose-account"
         class="select"
         bind:value={accountId}
@@ -153,7 +155,7 @@ export interface Props {
             {account.name}{account.email ? ` <${account.email}>` : ''}
           </option>
         {/each}
-      </select>
+      </Select>
     </div>
   {/if}
 
@@ -193,7 +195,7 @@ export interface Props {
 
     <div class="field">
       <label class="field-label" for="compose-subject">Subject</label>
-      <input
+      <Input
         id="compose-subject"
         type="text"
         class="text-input"
@@ -205,7 +207,7 @@ export interface Props {
   {:else if type === 'slack'}
     <div class="field">
       <label class="field-label" for="compose-channel">Channel</label>
-      <input
+      <Input
         id="compose-channel"
         type="text"
         class="text-input"
@@ -217,13 +219,12 @@ export interface Props {
   {/if}
 
   <div class="body-field">
-    <textarea
-      class="body-input"
+    <Textarea
       bind:value={body}
       oninput={markDirty}
       placeholder={type === 'tweet' ? "What's happening?" : 'Write your message...'}
       rows={type === 'tweet' ? 4 : 10}
-    ></textarea>
+    />
     {#if type === 'tweet'}
       <div class="char-count" class:over-limit={isOverLimit}>
         {charCount}/280
@@ -274,10 +275,17 @@ export interface Props {
       Discard
     </Button>
   </div>
-</form>
+</Form>
+</div>
 
 <style>
-  .compose-form {
+  /*
+   * The form now renders through smrt-ui's <Form> (Provider-free base `<form>`).
+   * `class="compose-form"` lands on the real `<form>` inside the Form child, so
+   * `.compose-form-shell :global(.compose-form)` anchors on the wrapper and
+   * pierces the child scope to keep the column layout / padding (issue #1589).
+   */
+  .compose-form-shell :global(.compose-form) {
     display: flex;
     flex-direction: column;
     gap: var(--smrt-spacing-2, 8px);
@@ -299,11 +307,22 @@ export interface Props {
     min-width: 56px;
   }
 
-  .select,
-  .text-input {
+  /*
+   * The From <Select> and Subject/Channel <Input>s now render through smrt-ui's
+   * form primitives. These are naked, borderless inline fields that sit on the
+   * `.field` row's bottom-border, so `.field :global(.select)` /
+   * `.field :global(.text-input)` pierce the child scopes to strip the
+   * primitives' border / background / focus box-shadow and restore the flush
+   * inline look. `appearance: auto` brings back the Select's native arrow (the
+   * primitive paints a chevron on its own background, which we've cleared) —
+   * issue #1589.
+   */
+  .field :global(.select),
+  .field :global(.text-input) {
     flex: 1;
     border: none;
     outline: none;
+    box-shadow: none;
     font-family: inherit;
     font-size: var(--smrt-typography-body-medium-size, 14px);
     padding: var(--smrt-spacing-2, 8px) 0;
@@ -311,6 +330,17 @@ export interface Props {
     color: var(--smrt-color-on-surface, #1c1b1f);
   }
 
+  .field :global(.select) {
+    appearance: auto;
+    cursor: pointer;
+  }
+
+  .field :global(.select):focus,
+  .field :global(.text-input):focus {
+    border: none;
+    box-shadow: none;
+  }
+
   .cc-toggles {
     display: flex;
     gap: var(--smrt-spacing-2, 8px);
@@ -335,24 +365,6 @@ export interface Props {
     position: relative;
   }
 
-  .body-input {
-    width: 100%;
-    border: 1px solid var(--smrt-color-outline-variant, #cac4d0);
-    border-radius: var(--smrt-radius-md, 12px);
-    padding: var(--smrt-spacing-3, 12px);
-    font-family: var(--smrt-font-family, system-ui);
-    font-size: var(--smrt-typography-body-medium-size, 14px);
-    resize: vertical;
-    background: var(--smrt-color-surface, #fffbfe);
-    color: var(--smrt-color-on-surface, #1c1b1f);
-    box-sizing: border-box;
-  }
-
-  .body-input:focus {
-    outline: 2px solid var(--smrt-color-primary, #6750a4);
-    outline-offset: -1px;
-  }
-
   .char-count {
     text-align: right;
     font-size: var(--smrt-typography-label-medium-size, 12px);

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

@@ -1 +1 @@
-{"version":3,"file":"ComposeForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ComposeForm.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,WAAW,EAEX,YAAY,EAEb,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,KAAK;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IACnC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAsOD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ComposeForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ComposeForm.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,WAAW,EAEX,YAAY,EAEb,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,KAAK;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IACnC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AA0OD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/EmailAccountManager.svelte

@@ -5,6 +5,7 @@
  * Reusable component for adding, editing, testing, and removing
  * email accounts. Works with any backend via callback props.
  */
+import { Input, Select } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../i18n.js';
@@ -188,20 +189,20 @@ function getProviderLabel(type: string): string {
       <div class="form-row">
         <div class="form-field" style="flex: 1;">
           <label class="form-label" for="ea-name">{t(M['messages.email_account_manager.account_name'])}</label>
-          <input id="ea-name" class="form-input" type="text" bind:value={maName} placeholder={t(M['messages.email_account_manager.account_name_placeholder'])} />
+          <Input id="ea-name" class="form-input" type="text" bind:value={maName} placeholder={t(M['messages.email_account_manager.account_name_placeholder'])} />
         </div>
         <div class="form-field" style="flex: 1;">
           <label class="form-label" for="ea-email">{t(M['messages.email_account_manager.email_address'])}</label>
-          <input id="ea-email" class="form-input" type="email" bind:value={maEmail} placeholder={t(M['messages.email_account_manager.email_placeholder'])} />
+          <Input id="ea-email" class="form-input" type="email" bind:value={maEmail} placeholder={t(M['messages.email_account_manager.email_placeholder'])} />
         </div>
         <div class="form-field" style="flex: 0 0 130px;">
           <label class="form-label" for="ea-provider">Provider</label>
-          <select id="ea-provider" class="form-select" bind:value={maProviderType}>
+          <Select id="ea-provider" class="form-select" bind:value={maProviderType}>
             <option value="imap">IMAP</option>
             <option value="gmail">Gmail</option>
             <option value="outlook">Outlook</option>
             <option value="exchange">Exchange</option>
-          </select>
+          </Select>
         </div>
       </div>
 
@@ -209,19 +210,19 @@ function getProviderLabel(type: string): string {
       <div class="form-row">
         <div class="form-field" style="flex: 2;">
           <label class="form-label" for="ea-imap-host">Host</label>
-          <input id="ea-imap-host" class="form-input" type="text" bind:value={maImapHost} placeholder={t(M['messages.email_account_manager.imap_host_placeholder'])} />
+          <Input id="ea-imap-host" class="form-input" type="text" bind:value={maImapHost} placeholder={t(M['messages.email_account_manager.imap_host_placeholder'])} />
         </div>
         <div class="form-field" style="flex: 0 0 90px;">
           <label class="form-label" for="ea-imap-port">Port</label>
-          <input id="ea-imap-port" class="form-input" type="number" bind:value={maImapPort} />
+          <Input id="ea-imap-port" class="form-input" type="number" bind:value={maImapPort} />
         </div>
         <div class="form-field" style="flex: 0 0 120px;">
           <label class="form-label" for="ea-imap-sec">Security</label>
-          <select id="ea-imap-sec" class="form-select" bind:value={maImapSecurity}>
+          <Select id="ea-imap-sec" class="form-select" bind:value={maImapSecurity}>
             <option value="ssl">SSL/TLS</option>
             <option value="starttls">STARTTLS</option>
             <option value="none">None</option>
-          </select>
+          </Select>
         </div>
       </div>
 
@@ -229,19 +230,19 @@ function getProviderLabel(type: string): string {
       <div class="form-row">
         <div class="form-field" style="flex: 2;">
           <label class="form-label" for="ea-smtp-host">Host</label>
-          <input id="ea-smtp-host" class="form-input" type="text" bind:value={maSmtpHost} placeholder={t(M['messages.email_account_manager.smtp_host_placeholder'])} />
+          <Input id="ea-smtp-host" class="form-input" type="text" bind:value={maSmtpHost} placeholder={t(M['messages.email_account_manager.smtp_host_placeholder'])} />
         </div>
         <div class="form-field" style="flex: 0 0 90px;">
           <label class="form-label" for="ea-smtp-port">Port</label>
-          <input id="ea-smtp-port" class="form-input" type="number" bind:value={maSmtpPort} />
+          <Input id="ea-smtp-port" class="form-input" type="number" bind:value={maSmtpPort} />
         </div>
         <div class="form-field" style="flex: 0 0 120px;">
           <label class="form-label" for="ea-smtp-sec">Security</label>
-          <select id="ea-smtp-sec" class="form-select" bind:value={maSmtpSecurity}>
+          <Select id="ea-smtp-sec" class="form-select" bind:value={maSmtpSecurity}>
             <option value="ssl">SSL/TLS</option>
             <option value="starttls">STARTTLS</option>
             <option value="none">None</option>
-          </select>
+          </Select>
         </div>
       </div>
 
@@ -249,14 +250,15 @@ function getProviderLabel(type: string): string {
       <div class="form-row">
         <div class="form-field" style="flex: 1;">
           <label class="form-label" for="ea-username">Username</label>
-          <input id="ea-username" class="form-input" type="text" bind:value={maUsername} placeholder={t(M['messages.email_account_manager.username_placeholder'])} />
+          <Input id="ea-username" class="form-input" type="text" bind:value={maUsername} placeholder={t(M['messages.email_account_manager.username_placeholder'])} />
         </div>
         <div class="form-field" style="flex: 1;">
           <label class="form-label" for="ea-password">Password</label>
-          <input id="ea-password" class="form-input" type="password" bind:value={maPassword} placeholder={editingId ? '(unchanged)' : ''} />
+          <Input id="ea-password" class="form-input" type="password" bind:value={maPassword} placeholder={editingId ? '(unchanged)' : ''} />
         </div>
         <div class="form-field checkbox-field">
           <label class="form-label checkbox-label">
+            <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
             <input type="checkbox" bind:checked={maIsActive} />
             Active
           </label>
@@ -432,29 +434,14 @@ function getProviderLabel(type: string): string {
     color: var(--smrt-color-on-surface-variant, #43474e);
   }
 
-  .form-input,
-  .form-select {
-    padding: 0.5rem 0.625rem;
-    border-radius: var(--smrt-radius-md, 8px);
-    border: 1px solid var(--smrt-color-outline-variant, #c2c7cf);
-    background: var(--smrt-color-surface, #fefbff);
-    color: var(--smrt-color-on-surface, #1a1c1e);
-    font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
-    font-family: inherit;
-    transition: border-color 150ms ease;
-  }
-
-  .form-input:focus,
-  .form-select:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #005ac1);
-  }
-
-  .form-input::placeholder {
-    color: var(--smrt-color-on-surface-variant, #43474e);
-    opacity: 0.5;
-  }
-
+  /*
+   * The account-form fields now render through smrt-ui's <Input> / <Select>,
+   * which bring their own tokenised border / background / focus / placeholder
+   * styling and honor prefers-reduced-motion themselves. The old `.form-input` /
+   * `.form-select` rules (and their :focus / ::placeholder overrides) are dropped
+   * as dead — they targeted the raw elements that now live inside the primitive
+   * child scopes (issue #1589).
+   */
   .checkbox-field {
     justify-content: flex-end;
     padding-bottom: 0.5rem;

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

@@ -1 +1 @@
-{"version":3,"file":"EmailAccountManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EmailAccountManager.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGpD,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,gBAAgB,CAAC,EAAE,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,EAAE,CACP,OAAO,EAAE,gBAAgB,KACtB,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpD;AAgUD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"EmailAccountManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EmailAccountManager.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGpD,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,gBAAgB,CAAC,EAAE,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,EAAE,CACP,OAAO,EAAE,gBAAgB,KACtB,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpD;AAkUD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/EmailFilterManager.svelte

@@ -5,6 +5,7 @@
  * Reusable component for managing email allow/block lists.
  * Works with any backend via callback props.
  */
+import { Input, Select } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../i18n.js';
@@ -215,15 +216,15 @@ function getPatternPlaceholder(type: string): string {
           <div class="form-row">
             <div class="form-field" style="flex: 0 0 120px;">
               <label class="form-label" for="wl-type">Type</label>
-              <select id="wl-type" class="form-select" bind:value={wlType}>
+              <Select id="wl-type" class="form-select" bind:value={wlType}>
                 <option value="email">Email</option>
                 <option value="domain">Domain</option>
                 <option value="regex">Regex</option>
-              </select>
+              </Select>
             </div>
             <div class="form-field" style="flex: 1;">
               <label class="form-label" for="wl-pattern">Pattern</label>
-              <input
+              <Input
                 id="wl-pattern"
                 class="form-input"
                 type="text"
@@ -235,7 +236,7 @@ function getPatternPlaceholder(type: string): string {
           <div class="form-row">
             <div class="form-field" style="flex: 1;">
               <label class="form-label" for="wl-category">Category <span class="optional">(optional)</span></label>
-              <input
+              <Input
                 id="wl-category"
                 class="form-input"
                 type="text"
@@ -245,7 +246,7 @@ function getPatternPlaceholder(type: string): string {
             </div>
             <div class="form-field" style="flex: 2;">
               <label class="form-label" for="wl-desc">Description</label>
-              <input
+              <Input
                 id="wl-desc"
                 class="form-input"
                 type="text"
@@ -319,15 +320,15 @@ function getPatternPlaceholder(type: string): string {
           <div class="form-row">
             <div class="form-field" style="flex: 0 0 120px;">
               <label class="form-label" for="bl-type">Type</label>
-              <select id="bl-type" class="form-select" bind:value={blType}>
+              <Select id="bl-type" class="form-select" bind:value={blType}>
                 <option value="email">Email</option>
                 <option value="domain">Domain</option>
                 <option value="regex">Regex</option>
-              </select>
+              </Select>
             </div>
             <div class="form-field" style="flex: 1;">
               <label class="form-label" for="bl-pattern">Pattern</label>
-              <input
+              <Input
                 id="bl-pattern"
                 class="form-input"
                 type="text"
@@ -339,7 +340,7 @@ function getPatternPlaceholder(type: string): string {
           <div class="form-row">
             <div class="form-field" style="flex: 1;">
               <label class="form-label" for="bl-reason">Reason</label>
-              <input
+              <Input
                 id="bl-reason"
                 class="form-input"
                 type="text"
@@ -349,6 +350,7 @@ function getPatternPlaceholder(type: string): string {
             </div>
             <div class="form-field checkbox-field">
               <label class="form-label checkbox-label">
+                <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
                 <input type="checkbox" bind:checked={blAutoArchive} />
                 Auto-archive
               </label>
@@ -502,29 +504,14 @@ function getPatternPlaceholder(type: string): string {
     opacity: 0.7;
   }
 
-  .form-input,
-  .form-select {
-    padding: 0.5rem 0.625rem;
-    border-radius: var(--smrt-radius-md, 8px);
-    border: 1px solid var(--smrt-color-outline-variant, #c2c7cf);
-    background: var(--smrt-color-surface, #fefbff);
-    color: var(--smrt-color-on-surface, #1a1c1e);
-    font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
-    font-family: inherit;
-    transition: border-color 150ms ease;
-  }
-
-  .form-input:focus,
-  .form-select:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #005ac1);
-  }
-
-  .form-input::placeholder {
-    color: var(--smrt-color-on-surface-variant, #43474e);
-    opacity: 0.5;
-  }
-
+  /*
+   * The form fields now render through smrt-ui's <Input> / <Select>, which bring
+   * their own tokenised border / background / focus / placeholder styling and
+   * honor prefers-reduced-motion themselves. The old `.form-input` / `.form-select`
+   * rules (and their :focus / ::placeholder overrides) are dropped as dead — they
+   * targeted the raw elements that now live inside the primitive child scopes
+   * (issue #1589).
+   */
   .checkbox-field {
     justify-content: flex-end;
     padding-bottom: 0.5rem;

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

@@ -1 +1 @@
-{"version":3,"file":"EmailFilterManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EmailFilterManager.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,KAAK;IACpB,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9D;AAoUD,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"EmailFilterManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/EmailFilterManager.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,KAAK;IACpB,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9D;AAsUD,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/svelte/components/ForwardForm.svelte

@@ -10,6 +10,7 @@ export interface Props {
 
 <script lang="ts">
   import { useI18n } from '@happyvertical/smrt-ui/i18n';
+  import { Textarea } from '@happyvertical/smrt-ui/forms';
   import { Button } from '@happyvertical/smrt-ui/ui';
   import { M } from '../i18n.js';
   import RecipientInput from './RecipientInput.svelte';
@@ -68,12 +69,11 @@ export interface Props {
     onchange={(r) => { to = r; }}
   />
 
-  <textarea
-    class="forward-body"
+  <Textarea
     bind:value={body}
     placeholder={t(M['messages.forward_form.note_placeholder'])}
     rows={3}
-  ></textarea>
+  />
 
   <div class="forwarded-original">
     <pre class="forwarded-text">{forwardedBlock}</pre>
@@ -117,22 +117,6 @@ export interface Props {
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
-  .forward-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;
-  }
-
-  .forward-body:focus {
-    outline: 2px solid var(--smrt-color-primary, #6750a4);
-    outline-offset: -1px;
-  }
-
   .forwarded-original {
     padding: var(--smrt-spacing-2, 8px);
     background: var(--smrt-color-surface-variant, #e7e0ec);

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

@@ -1 +1 @@
-{"version":3,"file":"ForwardForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ForwardForm.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE/D,MAAM,WAAW,KAAK;IACpB,eAAe,EAAE,WAAW,CAAC;IAC7B,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,EAAE,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA4FD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ForwardForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ForwardForm.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE/D,MAAM,WAAW,KAAK;IACpB,eAAe,EAAE,WAAW,CAAC;IAC7B,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,EAAE,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA8FD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/MessageCard.svelte

@@ -98,6 +98,7 @@ const _slackMeta = $derived.by(() => {
 >
   {#if onselect}
     <div class="select-col">
+      <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
       <input
         type="checkbox"
         checked={selected}

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

@@ -1 +1 @@
-{"version":3,"file":"MessageCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/MessageCard.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK5D,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,CAAC,CAAC,CAAC;CACnD;AA+ID,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/MessageCard.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK5D,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,CAAC,CAAC,CAAC;CACnD;AAgJD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/MessageFilters.svelte

@@ -2,6 +2,7 @@
 /**
  * MessageFilters - Filter/sort controls bar
  */
+import { Input, Select } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../i18n.messages.js';
@@ -78,7 +79,7 @@ const _hasActiveFilters = $derived(
 
 <div class="message-filters" role="search" aria-label={t(M['messages.message_filters.filters_label'])}>
   <div class="search-row">
-    <input
+    <Input
       type="search"
       class="search-input"
       placeholder={t(M['messages.message_filters.search_placeholder'])}
@@ -90,37 +91,37 @@ const _hasActiveFilters = $derived(
   </div>
 
   <div class="filter-row">
-    <select
+    <Select
       class="filter-select"
       value={filters.type || ''}
-      onchange={(e) => updateFilter('type', (e.target as HTMLSelectElement).value)}
+      onchange={(e) => updateFilter('type', (e.currentTarget as HTMLSelectElement).value)}
       aria-label={t(M['messages.message_filters.filter_by_type'])}
     >
       <option value="">{t(M['messages.message_filters.all_types'])}</option>
       {#each availableTypes as type}
         <option value={type}>{type === 'email' ? 'Email' : type === 'tweet' ? 'Tweet' : type === 'slack' ? 'Slack' : type}</option>
       {/each}
-    </select>
+    </Select>
 
     {#if accounts.length > 0}
-      <select
+      <Select
         class="filter-select"
         value={filters.accountId || ''}
-        onchange={(e) => updateFilter('accountId', (e.target as HTMLSelectElement).value)}
+        onchange={(e) => updateFilter('accountId', (e.currentTarget as HTMLSelectElement).value)}
         aria-label={t(M['messages.message_filters.filter_by_account'])}
       >
         <option value="">{t(M['messages.message_filters.all_accounts'])}</option>
         {#each accounts as account}
           <option value={account.id}>{account.name}</option>
         {/each}
-      </select>
+      </Select>
     {/if}
 
-    <select
+    <Select
       class="filter-select"
       value={filters.isRead === undefined ? '' : filters.isRead ? 'read' : 'unread'}
       onchange={(e) => {
-        const val = (e.target as HTMLSelectElement).value;
+        const val = (e.currentTarget as HTMLSelectElement).value;
         updateFilter('isRead', val === '' ? undefined : val === 'read');
       }}
       aria-label={t(M['messages.message_filters.filter_by_read_status'])}
@@ -128,13 +129,14 @@ const _hasActiveFilters = $derived(
       <option value="">Read & unread</option>
       <option value="unread">{t(M['messages.message_filters.unread_only'])}</option>
       <option value="read">{t(M['messages.message_filters.read_only'])}</option>
-    </select>
+    </Select>
 
     <label class="filter-checkbox">
+      <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
       <input
         type="checkbox"
         checked={filters.isFlagged === true}
-        onchange={(e) => updateFilter('isFlagged', (e.target as HTMLInputElement).checked ? true : undefined)}
+        onchange={(e) => updateFilter('isFlagged', (e.currentTarget as HTMLInputElement).checked ? true : undefined)}
       />
       Flagged
     </label>
@@ -163,19 +165,14 @@ const _hasActiveFilters = $derived(
     gap: 0.5rem;
   }
 
-  .search-input {
+  /*
+   * The search field now renders through smrt-ui's <Input>. The primitive owns
+   * border / background / focus; `.search-row :global(.search-input)` only
+   * re-asserts `flex: 1` so it shares the row with the Search button, piercing
+   * the Input child scope (issue #1589).
+   */
+  .search-row :global(.search-input) {
     flex: 1;
-    padding: 0.5rem 0.75rem;
-    border: 1px solid var(--smrt-color-outline, #72787e);
-    border-radius: var(--smrt-radius-small, 0.25rem);
-    font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
-    background: var(--smrt-color-surface, #fefbff);
-    color: var(--smrt-color-on-surface, #1a1c1e);
-  }
-
-  .search-input:focus {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
-    outline-offset: -1px;
   }
 
   /*
@@ -197,13 +194,16 @@ const _hasActiveFilters = $derived(
     gap: 0.5rem;
   }
 
-  .filter-select {
-    padding: 0.375rem 0.5rem;
-    border: 1px solid var(--smrt-color-outline, #72787e);
-    border-radius: var(--smrt-radius-small, 0.25rem);
+  /*
+   * The filter dropdowns now render through smrt-ui's <Select>. The primitive
+   * owns border / background / focus / chevron; `.filter-row :global(.filter-select)`
+   * re-asserts the compact filter-bar sizing (auto width, tighter padding, small
+   * font) by piercing the Select child scope (issue #1589).
+   */
+  .filter-row :global(.filter-select) {
+    width: auto;
+    padding: 0.375rem 2rem 0.375rem 0.5rem;
     font: var(--smrt-typography-body-small-font, 0.75rem / 1.33 sans-serif);
-    background: var(--smrt-color-surface, #fefbff);
-    color: var(--smrt-color-on-surface, #1a1c1e);
   }
 
   .filter-checkbox {

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

@@ -1 +1 @@
-{"version":3,"file":"MessageFilters.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/MessageFilters.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,WAAW,EACZ,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,cAAc,CAAC,EAAE,WAAW,EAAE,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAiHD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"MessageFilters.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/MessageFilters.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,WAAW,EACZ,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,cAAc,CAAC,EAAE,WAAW,EAAE,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAmHD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/RecipientInput.svelte

@@ -10,6 +10,7 @@ export interface Props {
 </script>
 
 <script lang="ts">
+  import { Input } from '@happyvertical/smrt-ui/forms';
   import { Button } from '@happyvertical/smrt-ui/ui';
 
   let {
@@ -71,10 +72,10 @@ export interface Props {
         >×</Button>
       </span>
     {/each}
-    <input
+    <Input
       id={inputId}
       type="text"
-      class="input"
+      class="recipient-field"
       bind:value={inputValue}
       {placeholder}
       onkeydown={handleKeydown}
@@ -145,15 +146,28 @@ export interface Props {
     opacity: 1;
   }
 
-  .input {
+  /*
+   * The chip-bar field now renders through smrt-ui's <Input>. This is a naked,
+   * borderless inline field that sits among the recipient chips, so
+   * `.chips-container :global(.recipient-field)` pierces the Input child scope to
+   * strip the primitive's border / background / block padding / focus box-shadow
+   * and restore the flush inline look (issue #1589).
+   */
+  .chips-container :global(.recipient-field) {
     flex: 1;
     min-width: 120px;
     border: none;
     outline: none;
+    box-shadow: 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);
   }
+
+  .chips-container :global(.recipient-field):focus {
+    border: none;
+    box-shadow: none;
+  }
 </style>

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

@@ -1 +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;AAwED,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"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;AA0ED,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

@@ -11,6 +11,7 @@ export interface Props {
 
 <script lang="ts">
   import { useI18n } from '@happyvertical/smrt-ui/i18n';
+  import { Textarea } from '@happyvertical/smrt-ui/forms';
   import { Button } from '@happyvertical/smrt-ui/ui';
   import { M } from '../i18n.js';
 
@@ -60,12 +61,11 @@ export interface Props {
     {replyAll ? 'Reply All' : 'Reply'} to {originalMessage.senderName || originalMessage.senderAddress}
   </div>
 
-  <textarea
-    class="reply-body"
+  <Textarea
     bind:value={body}
     placeholder={t(M['messages.reply_form.body_placeholder'])}
     rows={5}
-  ></textarea>
+  />
 
   <div class="quoted-original">
     <pre class="quoted-text">{quotedBody}</pre>
@@ -109,22 +109,6 @@ export interface Props {
     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);

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

@@ -1 +1 @@
-{"version":3,"file":"ReplyForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ReplyForm.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,KAAK;IACpB,eAAe,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAsFD,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ReplyForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ReplyForm.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,KAAK;IACpB,eAAe,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAwFD,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@happyvertical/smrt-messages",
-  "version": "0.34.6",
+  "version": "0.34.8",
   "description": "Unified multi-channel messaging with STI-based hierarchies",
   "type": "module",
-  "smrtRawPrimitives": "strict-buttons",
+  "smrtRawPrimitives": "strict",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -40,11 +40,11 @@
     "@happyvertical/messages": "^0.74.7",
     "@happyvertical/sql": "^0.74.7",
     "@happyvertical/utils": "^0.74.7",
-    "@happyvertical/smrt-types": "0.34.6",
-    "@happyvertical/smrt-secrets": "0.34.6",
-    "@happyvertical/smrt-tenancy": "0.34.6",
-    "@happyvertical/smrt-core": "0.34.6",
-    "@happyvertical/smrt-ui": "0.34.6"
+    "@happyvertical/smrt-types": "0.34.8",
+    "@happyvertical/smrt-core": "0.34.8",
+    "@happyvertical/smrt-secrets": "0.34.8",
+    "@happyvertical/smrt-tenancy": "0.34.8",
+    "@happyvertical/smrt-ui": "0.34.8"
   },
   "peerDependencies": {
     "@happyvertical/encryption": "*",
@@ -67,7 +67,7 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^4.0.17",
-    "@happyvertical/smrt-vitest": "0.34.6"
+    "@happyvertical/smrt-vitest": "0.34.8"
   },
   "keywords": [
     "email",