@happyvertical/smrt-messages 0.34.5 → 0.34.7

package/dist/svelte/components/MessageCard.svelte

@@ -4,6 +4,7 @@
  */
 
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type { Snippet } from 'svelte';
 import { M } from '../i18n.messages.js';
 import type { AccountData, MessageData } from '../types.js';
@@ -97,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}
@@ -106,6 +108,7 @@ const _slackMeta = $derived.by(() => {
     </div>
   {/if}
 
+  <!-- raw-primitive-allow: large pressable message row wrapping rich header/subject/preview content (a structural selection surface with descendant compact-mode layout rules), not a standard action button -->
   <button
     class="message-content"
     type="button"
@@ -162,15 +165,15 @@ const _slackMeta = $derived.by(() => {
   </button>
 
   {#if onflag}
-    <button
+    <Button
+      variant="ghost"
       class="flag-btn"
-      type="button"
       onclick={() => onflag?.(message)}
       title={message.isFlagged ? 'Unflag' : 'Flag'}
       aria-label={message.isFlagged ? 'Unflag' : 'Flag'}
     >
       {message.isFlagged ? '⚑' : '⚐'}
-    </button>
+    </Button>
   {/if}
 </div>
 
@@ -308,21 +311,26 @@ const _slackMeta = $derived.by(() => {
     color: var(--smrt-color-on-surface-variant, #43474e);
   }
 
-  .flag-btn {
+  /*
+   * The flag toggle now renders through smrt-ui's <Button variant="ghost">.
+   * `.message-card :global(.flag-btn)` anchors on the real `.message-card`
+   * element and pierces the Button child scope to keep the dimmed icon-toggle
+   * styling (issue #1589).
+   */
+  .message-card :global(.flag-btn) {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 2rem;
     border: none;
     background: none;
-    cursor: pointer;
     font-size: var(--smrt-typography-body-large-size, 1rem);
     color: var(--smrt-color-on-surface-variant, #43474e);
     opacity: 0.5;
     transition: opacity var(--smrt-duration-short2, 150ms);
   }
 
-  .flag-btn:hover {
+  .message-card :global(.flag-btn):hover {
     opacity: 1;
   }
 

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":"AAOA,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;AA6ID,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/MessageDetail.svelte

@@ -3,7 +3,7 @@
  * MessageDetail - Full message view with type-adaptive sections
  */
 
-import { Card } from '@happyvertical/smrt-ui/ui';
+import { Button, Card } from '@happyvertical/smrt-ui/ui';
 import type { Snippet } from 'svelte';
 import type { AccountData, AttachmentData, MessageData } from '../types.js';
 import AttachmentChip from './AttachmentChip.svelte';
@@ -162,19 +162,19 @@ const _displayBody = $derived.by(() => {
     {#if onreply || onforward || ondelete}
       <div class="actions">
         {#if onreply}
-          <button class="action-btn" type="button" onclick={() => onreply?.(message)}>
+          <Button variant="ghost" class="action-btn" onclick={() => onreply?.(message)}>
             ↩ Reply
-          </button>
+          </Button>
         {/if}
         {#if onforward}
-          <button class="action-btn" type="button" onclick={() => onforward?.(message)}>
+          <Button variant="ghost" class="action-btn" onclick={() => onforward?.(message)}>
             ↪ Forward
-          </button>
+          </Button>
         {/if}
         {#if ondelete}
-          <button class="action-btn action-btn--danger" type="button" onclick={() => ondelete?.(message)}>
+          <Button variant="ghost" class="action-btn action-btn--danger" onclick={() => ondelete?.(message)}>
             🗑 Delete
-          </button>
+          </Button>
         {/if}
       </div>
     {/if}
@@ -280,27 +280,34 @@ const _displayBody = $derived.by(() => {
     border-top: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
   }
 
-  .action-btn {
+  /*
+   * Action buttons now render through smrt-ui's <Button variant="ghost">. The
+   * <button> is emitted inside the Button child, so `.actions :global(.action-btn)`
+   * anchors on the real `.actions` element and pierces the child scope to keep
+   * the original outlined-surface styling (issue #1589). The destructive button's
+   * modifier is `action-btn--danger`, NOT `danger`, to avoid colliding with
+   * Button's own `.danger` variant class.
+   */
+  .actions :global(.action-btn) {
     padding: 0.5rem 1rem;
     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-large-font, 500 0.875rem / 1.25 sans-serif);
-    cursor: pointer;
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
-  .action-btn:hover {
+  .actions :global(.action-btn):hover {
     background: var(--smrt-color-surface-variant, #e1e2ec);
   }
 
-  .action-btn--danger {
+  .actions :global(.action-btn--danger) {
     color: var(--smrt-color-error, #ba1a1a);
     border-color: var(--smrt-color-error, #ba1a1a);
   }
 
-  .action-btn--danger:hover {
+  .actions :global(.action-btn--danger):hover {
     background: var(--smrt-color-error-container, #ffdad6);
   }
 </style>

package/dist/svelte/components/MessageFilters.svelte

@@ -2,7 +2,9 @@
 /**
  * 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';
 import type {
   AccountData,
@@ -77,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'])}
@@ -85,41 +87,41 @@ const _hasActiveFilters = $derived(
       onkeydown={(e) => { if (e.key === 'Enter') handleSearch(); }}
       aria-label={t(M['messages.message_filters.search_label'])}
     />
-    <button class="search-btn" type="button" onclick={handleSearch}>Search</button>
+    <Button variant="primary" class="search-btn" onclick={handleSearch}>Search</Button>
   </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'])}
@@ -127,21 +129,22 @@ 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>
 
     {#if _hasActiveFilters}
-      <button class="clear-btn" type="button" onclick={clearFilters}>
+      <Button variant="ghost" size="sm" class="clear-btn" onclick={clearFilters}>
         {t(M['messages.message_filters.clear_filters'])}
-      </button>
+      </Button>
     {/if}
   </div>
 </div>
@@ -162,33 +165,26 @@ 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;
-  }
-
-  .search-btn {
+  /*
+   * Search now renders through smrt-ui's <Button variant="primary">. The variant
+   * owns the filled-primary background + hover; `.search-row :global(.search-btn)`
+   * only re-asserts the original small radius and label font/padding by piercing
+   * the Button child scope (issue #1589).
+   */
+  .search-row :global(.search-btn) {
     padding: 0.5rem 1rem;
-    border: none;
     border-radius: var(--smrt-radius-small, 0.25rem);
-    background: var(--smrt-color-primary, #005ac1);
-    color: var(--smrt-color-on-primary, #fff);
     font: var(--smrt-typography-label-large-font, 500 0.875rem / 1.25 sans-serif);
-    cursor: pointer;
-  }
-
-  .search-btn:hover {
-    opacity: 0.9;
   }
 
   .filter-row {
@@ -198,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 {
@@ -216,13 +215,18 @@ const _hasActiveFilters = $derived(
     cursor: pointer;
   }
 
-  .clear-btn {
+  /*
+   * Clear filters now renders through smrt-ui's <Button variant="ghost">.
+   * `.filter-row :global(.clear-btn)` anchors on the real `.filter-row` element
+   * and pierces the Button child scope to keep the underlined text-link look
+   * (issue #1589).
+   */
+  .filter-row :global(.clear-btn) {
     padding: 0.25rem 0.5rem;
     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;
   }
 </style>

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":"AAQA,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;AAgHD,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/MessageToolbar.svelte

@@ -3,6 +3,7 @@
  * MessageToolbar - Bulk action toolbar
  */
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type { Snippet } from 'svelte';
 import { M } from '../i18n.messages.js';
 import type { BulkAction } from '../types.js';
@@ -33,37 +34,37 @@ const {
     {#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}>
+        <Button variant="ghost" size="sm" class="link-btn" onclick={onclearselection}>
           Clear
-        </button>
+        </Button>
       {/if}
     {:else}
       <span class="count">{totalCount} messages</span>
     {/if}
     {#if onselectall && selectedCount < totalCount}
-      <button class="link-btn" type="button" onclick={onselectall}>
+      <Button variant="ghost" size="sm" class="link-btn" onclick={onselectall}>
         {t(M['messages.message_toolbar.select_all'])}
-      </button>
+      </Button>
     {/if}
   </div>
 
   {#if selectedCount > 0 && onaction}
     <div class="actions">
-      <button class="action-btn" type="button" onclick={() => onaction?.('markRead')}>
+      <Button variant="ghost" size="sm" class="action-btn" onclick={() => onaction?.('markRead')}>
         {t(M['messages.message_toolbar.mark_read'])}
-      </button>
-      <button class="action-btn" type="button" onclick={() => onaction?.('markUnread')}>
+      </Button>
+      <Button variant="ghost" size="sm" class="action-btn" onclick={() => onaction?.('markUnread')}>
         {t(M['messages.message_toolbar.mark_unread'])}
-      </button>
-      <button class="action-btn" type="button" onclick={() => onaction?.('flag')}>
+      </Button>
+      <Button variant="ghost" size="sm" class="action-btn" onclick={() => onaction?.('flag')}>
         Flag
-      </button>
-      <button class="action-btn" type="button" onclick={() => onaction?.('unflag')}>
+      </Button>
+      <Button variant="ghost" size="sm" class="action-btn" onclick={() => onaction?.('unflag')}>
         Unflag
-      </button>
-      <button class="action-btn action-btn--danger" type="button" onclick={() => onaction?.('delete')}>
+      </Button>
+      <Button variant="ghost" size="sm" class="action-btn action-btn--danger" onclick={() => onaction?.('delete')}>
         Delete
-      </button>
+      </Button>
       {#if extraActions}
         {@render extraActions()}
       {/if}
@@ -94,12 +95,20 @@ const {
     color: var(--smrt-color-on-surface-variant, #43474e);
   }
 
-  .link-btn {
+  /*
+   * The link and action buttons now render through smrt-ui's <Button
+   * variant="ghost">. The <button> is emitted inside the Button child, so a
+   * plain scoped rule would not match — anchoring on the real `.selection-info`
+   * / `.actions` elements and piercing with `:global(...)` keeps the original
+   * text-link / outlined-surface styling (issue #1589). The destructive button's
+   * modifier is `action-btn--danger`, NOT `danger`, so it never collides with
+   * Button's own `.danger` variant class.
+   */
+  .selection-info :global(.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;
   }
@@ -110,21 +119,20 @@ const {
     flex-wrap: wrap;
   }
 
-  .action-btn {
+  .actions :global(.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 {
+  .actions :global(.action-btn):hover {
     background: var(--smrt-color-surface-variant, #e1e2ec);
   }
 
-  .action-btn--danger {
+  .actions :global(.action-btn--danger) {
     color: var(--smrt-color-error, #ba1a1a);
     border-color: var(--smrt-color-error, #ba1a1a);
   }

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

@@ -1 +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"}
+{"version":3,"file":"MessageToolbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/MessageToolbar.svelte.ts"],"names":[],"mappings":"AAQA,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;AAqED,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,9 @@ export interface Props {
 </script>
 
 <script lang="ts">
+  import { Input } from '@happyvertical/smrt-ui/forms';
+  import { Button } from '@happyvertical/smrt-ui/ui';
+
   let {
     label = 'To',
     recipients = [],
@@ -61,17 +64,18 @@ export interface Props {
     {#each recipients as recipient, i}
       <span class="chip" class:invalid={!recipient.isValid}>
         <span class="chip-text">{recipient.name || recipient.address}</span>
-        <button
+        <Button
+          variant="ghost"
+          size="sm"
           class="chip-remove"
           onclick={() => removeRecipient(i)}
-          type="button"
-        >×</button>
+        >×</Button>
       </span>
     {/each}
-    <input
+    <Input
       id={inputId}
       type="text"
-      class="input"
+      class="recipient-field"
       bind:value={inputValue}
       {placeholder}
       onkeydown={handleKeydown}
@@ -122,29 +126,48 @@ export interface Props {
     color: var(--smrt-color-on-error-container, #410002);
   }
 
-  .chip-remove {
+  /*
+   * The chip remove button now renders through smrt-ui's <Button variant="ghost">.
+   * `.chips-container :global(.chip-remove)` anchors on the real `.chips-container`
+   * element and pierces the Button child scope to keep the compact icon styling.
+   * `color: inherit` keeps it matching the chip text color (including the invalid
+   * chip's error color) — issue #1589.
+   */
+  .chips-container :global(.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 {
+  .chips-container :global(.chip-remove):hover {
     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;AAmED,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,8 @@ 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';
 
   const { t } = useI18n();
@@ -59,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>
@@ -77,17 +78,16 @@ export interface Props {
   {/if}
 
   <div class="actions">
-    <button
-      type="button"
-      class="btn-primary"
+    <Button
+      variant="primary"
       disabled={isSending || !body.trim()}
       onclick={handleSend}
     >
       {isSending ? 'Sending...' : 'Send Reply'}
-    </button>
-    <button type="button" class="btn-text" onclick={() => oncancel?.()}>
+    </Button>
+    <Button variant="ghost" class="btn-text" onclick={() => oncancel?.()}>
       Cancel
-    </button>
+    </Button>
   </div>
 </div>
 
@@ -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);
@@ -155,29 +139,13 @@ export interface Props {
     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;
+  /*
+   * Send Reply now uses Button's primary variant directly (dead .btn-primary CSS
+   * removed). The Cancel button keeps its neutral on-surface-variant text via
+   * `.actions :global(.btn-text)` (Button's ghost uses the primary color) —
+   * issue #1589.
+   */
+  .actions :global(.btn-text) {
     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>