@happyvertical/smrt-chat 0.34.4 → 0.34.6

package/dist/svelte/components/layout/RoomHeader.svelte

@@ -4,6 +4,7 @@
  * Displays room info and provides access to members and search
  */
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.messages.js';
 import type { ChatRoomData } from '../../types.js';
 
@@ -78,7 +79,9 @@ const roomTypeLabel = $derived.by(() => {
 
   <div class="room-header__actions">
     {#if onshowmembers}
-      <button
+      <Button
+        variant="ghost"
+        size="sm"
         class="header-btn"
         type="button"
         onclick={onshowmembers}
@@ -92,11 +95,13 @@ const roomTypeLabel = $derived.by(() => {
           <path d="M16 3.13a4 4 0 0 1 0 7.75" />
         </svg>
         <span class="header-btn__count">{participantCount}</span>
-      </button>
+      </Button>
     {/if}
 
     {#if onshowsearch}
-      <button
+      <Button
+        variant="ghost"
+        size="sm"
         class="header-btn"
         type="button"
         onclick={onshowsearch}
@@ -107,7 +112,7 @@ const roomTypeLabel = $derived.by(() => {
           <circle cx="11" cy="11" r="8" />
           <path d="m21 21-4.35-4.35" />
         </svg>
-      </button>
+      </Button>
     {/if}
   </div>
 </header>
@@ -201,28 +206,20 @@ const roomTypeLabel = $derived.by(() => {
     gap: 0.25rem;
   }
 
-  .header-btn {
-    display: inline-flex;
-    align-items: center;
+  /* :global() pierces into each Button's rendered <button> (see #1589). */
+  .room-header__actions :global(.header-btn) {
     gap: 0.25rem;
     padding: 0.375rem 0.5rem;
-    border: none;
     background: none;
     border-radius: var(--smrt-radius-medium, 0.5rem);
     color: var(--smrt-color-on-surface-variant, #43474e);
-    cursor: pointer;
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
-  .header-btn:hover {
+  .room-header__actions :global(.header-btn:hover) {
     background: var(--smrt-color-surface-variant, #e1e2ec);
   }
 
-  .header-btn:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
-    outline-offset: -2px;
-  }
-
   .header-btn__icon {
     width: 1.25rem;
     height: 1.25rem;
@@ -234,7 +231,7 @@ const roomTypeLabel = $derived.by(() => {
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .header-btn {
+    .room-header__actions :global(.header-btn) {
       transition: none;
     }
   }

package/dist/svelte/components/layout/RoomHeader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RoomHeader.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/layout/RoomHeader.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,MAAM,WAAW,KAAK;IACpB,wBAAwB;IACxB,IAAI,EAAE,YAAY,CAAC;IACnB,yCAAyC;IACzC,gBAAgB,EAAE,MAAM,CAAC;IACzB,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AA8FD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"RoomHeader.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/layout/RoomHeader.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,MAAM,WAAW,KAAK;IACpB,wBAAwB;IACxB,IAAI,EAAE,YAAY,CAAC;IACnB,yCAAyC;IACzC,gBAAgB,EAAE,MAAM,CAAC;IACzB,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AA+FD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/layout/RoomList.svelte

@@ -4,6 +4,7 @@
  * Groups rooms by type: channels, DMs, and agent conversations
  */
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.messages.js';
 import type { ChatRoomData } from '../../types.js';
 
@@ -71,19 +72,22 @@ function formatTimestamp(date?: string | Date | null): string {
 <nav class="room-list" aria-label={t(M['chat.room_list.rooms_label'])}>
   {#if oncreateroom}
     <div class="room-list__header">
-      <button
+      <Button
+        variant="ghost"
+        fullWidth
         class="create-room-btn"
         type="button"
         onclick={oncreateroom}
         aria-label={t(M['chat.room_list.create_new_room'])}
       >
         {t(M['chat.room_list.new_room'])}
-      </button>
+      </Button>
     </div>
   {/if}
 
   {#if channels.length > 0}
     <section class="room-group">
+      <!-- raw-primitive-allow: section disclosure trigger with aria-expanded toggling a collapsible room list, wrapping rich content (rotating chevron, group label, room count); structural accordion header no Button primitive owns -->
       <button
         class="room-group__header"
         type="button"
@@ -101,6 +105,7 @@ function formatTimestamp(date?: string | Date | null): string {
         <ul class="room-group__list" role="list">
           {#each channels as room (room.id)}
             <li>
+              <!-- raw-primitive-allow: pressable room-selection row with active and aria-current state, wrapping rich content (type icon, name, unread badge); no Button primitive owns this structural nav-selection pattern -->
               <button
                 class="room-item"
                 class:room-item--active={room.id === currentRoomId}
@@ -126,6 +131,7 @@ function formatTimestamp(date?: string | Date | null): string {
 
   {#if directMessages.length > 0}
     <section class="room-group">
+      <!-- raw-primitive-allow: section disclosure trigger with aria-expanded toggling a collapsible room list, wrapping rich content (rotating chevron, group label, room count); structural accordion header no Button primitive owns -->
       <button
         class="room-group__header"
         type="button"
@@ -143,6 +149,7 @@ function formatTimestamp(date?: string | Date | null): string {
         <ul class="room-group__list" role="list">
           {#each directMessages as room (room.id)}
             <li>
+              <!-- raw-primitive-allow: pressable room-selection row with active and aria-current state, wrapping rich content (avatar, name, last-message preview, timestamp, unread badge); no Button primitive owns this structural nav-selection pattern -->
               <button
                 class="room-item"
                 class:room-item--active={room.id === currentRoomId}
@@ -184,6 +191,7 @@ function formatTimestamp(date?: string | Date | null): string {
 
   {#if agentRooms.length > 0}
     <section class="room-group">
+      <!-- raw-primitive-allow: section disclosure trigger with aria-expanded toggling a collapsible room list, wrapping rich content (rotating chevron, group label, room count); structural accordion header no Button primitive owns -->
       <button
         class="room-group__header"
         type="button"
@@ -201,6 +209,7 @@ function formatTimestamp(date?: string | Date | null): string {
         <ul class="room-group__list" role="list">
           {#each agentRooms as room (room.id)}
             <li>
+              <!-- raw-primitive-allow: pressable room-selection row with active and aria-current state, wrapping rich content (agent icon, name, unread badge); no Button primitive owns this structural nav-selection pattern -->
               <button
                 class="room-item"
                 class:room-item--active={room.id === currentRoomId}
@@ -227,9 +236,9 @@ function formatTimestamp(date?: string | Date | null): string {
     <div class="room-list__empty">
       <p>{t(M['chat.room_list.no_rooms'])}</p>
       {#if oncreateroom}
-        <button class="create-link" type="button" onclick={oncreateroom}>
+        <Button variant="ghost" size="sm" class="create-link" type="button" onclick={oncreateroom}>
           {t(M['chat.room_list.create_first_room'])}
-        </button>
+        </Button>
       {/if}
     </div>
   {/if}
@@ -247,27 +256,21 @@ function formatTimestamp(date?: string | Date | null): string {
     padding: 0.5rem 0.75rem;
   }
 
-  .create-room-btn {
-    width: 100%;
+  /* :global() pierces into the Button child's rendered <button> (see #1589). */
+  .room-list__header :global(.create-room-btn) {
     padding: 0.5rem 0.75rem;
     border: 1px dashed var(--smrt-color-outline, #74777f);
     border-radius: var(--smrt-radius-medium, 0.5rem);
     background: transparent;
     color: var(--smrt-color-primary, #005ac1);
     font: var(--smrt-typography-label-large-font, 500 0.875rem / 1.25 sans-serif);
-    cursor: pointer;
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
-  .create-room-btn:hover {
+  .room-list__header :global(.create-room-btn:hover) {
     background: var(--smrt-color-primary-container, #d6e3ff);
   }
 
-  .create-room-btn:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
-    outline-offset: -2px;
-  }
-
   .room-group {
     margin-top: 0.25rem;
   }
@@ -452,20 +455,26 @@ function formatTimestamp(date?: string | Date | null): string {
     font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
   }
 
-  .create-link {
-    border: none;
+  /* :global() pierces into the Button child's rendered <button> (see #1589). */
+  .room-list__empty :global(.create-link) {
     background: none;
     color: var(--smrt-color-primary, #005ac1);
     font: var(--smrt-typography-label-large-font, 500 0.875rem / 1.25 sans-serif);
-    cursor: pointer;
     text-decoration: underline;
   }
 
+  .room-list__empty :global(.create-link:hover) {
+    background: none;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .room-item,
-    .create-room-btn,
     .room-group__chevron {
       transition: none;
     }
+
+    .room-list__header :global(.create-room-btn) {
+      transition: none;
+    }
   }
 </style>

package/dist/svelte/components/layout/RoomList.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RoomList.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/layout/RoomList.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,MAAM,WAAW,KAAK;IACpB,2BAA2B;IAC3B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,iCAAiC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AA6LD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"RoomList.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/layout/RoomList.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGnD,MAAM,WAAW,KAAK;IACpB,2BAA2B;IAC3B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,iCAAiC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAoMD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/svelte/components/messages/MessageInput.svelte

@@ -4,6 +4,7 @@
  * Text area with send button. Shows reply preview when replying.
  */
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.messages.js';
 
 const { t } = useI18n();
@@ -64,14 +65,16 @@ function handleInput() {
         <span class="message-input__reply-text">{replyTo.content}</span>
       </div>
       {#if oncancelreply}
-        <button
+        <Button
+          variant="ghost"
+          size="sm"
           class="message-input__reply-close"
           type="button"
           onclick={oncancelreply}
           aria-label={t(M['chat.message_input.cancel_reply'])}
         >
           <svg viewBox="0 0 16 16" width="14" height="14"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" /></svg>
-        </button>
+        </Button>
       {/if}
     </div>
   {/if}
@@ -88,7 +91,8 @@ function handleInput() {
       oninput={handleInput}
       aria-label={t(M['chat.message_input.input_label'])}
     ></textarea>
-    <button
+    <Button
+      variant="ghost"
       class="message-input__send"
       type="button"
       onclick={handleSend}
@@ -105,7 +109,7 @@ function handleInput() {
           stroke-linejoin="round"
         />
       </svg>
-    </button>
+    </Button>
   </div>
 </div>
 
@@ -155,21 +159,18 @@ function handleInput() {
     text-overflow: ellipsis;
   }
 
-  .message-input__reply-close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  /* :global() pierces into the Button child's rendered <button> (see #1589). */
+  .message-input__reply :global(.message-input__reply-close) {
     width: 24px;
     height: 24px;
-    border: none;
+    padding: 0;
     border-radius: var(--smrt-radius-small, 0.25rem);
     background: transparent;
     color: var(--smrt-color-on-surface-variant, #43474e);
-    cursor: pointer;
     flex-shrink: 0;
   }
 
-  .message-input__reply-close:hover {
+  .message-input__reply :global(.message-input__reply-close:hover) {
     background: var(--smrt-color-surface-container-high, #e1e3e8);
   }
 
@@ -205,28 +206,24 @@ function handleInput() {
     color: var(--smrt-color-outline, #74777f);
   }
 
-  .message-input__send {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  /* :global() pierces into the Button child's rendered <button> (see #1589). */
+  .message-input__bar :global(.message-input__send) {
     width: 36px;
     height: 36px;
-    border: none;
+    padding: 0;
     border-radius: var(--smrt-radius-full, 9999px);
     background: var(--smrt-color-primary, #005ac1);
     color: var(--smrt-color-on-primary, #ffffff);
-    cursor: pointer;
     flex-shrink: 0;
     transition: background var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
-  .message-input__send:hover:not(:disabled) {
+  .message-input__bar :global(.message-input__send:hover:not(:disabled)) {
     background: color-mix(in srgb, var(--smrt-color-primary, #005ac1) 85%, var(--smrt-color-shadow, #000));
   }
 
-  .message-input__send:disabled {
+  .message-input__bar :global(.message-input__send:disabled) {
     background: var(--smrt-color-surface-container-high, #e1e3e8);
     color: var(--smrt-color-outline, #74777f);
-    cursor: not-allowed;
   }
 </style>

package/dist/svelte/components/messages/MessageInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageInput.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/messages/MessageInput.svelte.ts"],"names":[],"mappings":"AAWA,MAAM,WAAW,KAAK;IACpB,sCAAsC;IACtC,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,OAAO,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACrE,4BAA4B;IAC5B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAyED,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"MessageInput.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/messages/MessageInput.svelte.ts"],"names":[],"mappings":"AAYA,MAAM,WAAW,KAAK;IACpB,sCAAsC;IACtC,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,OAAO,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACrE,4BAA4B;IAC5B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AA0ED,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/components/messages/MessageItem.svelte

@@ -5,6 +5,7 @@
  */
 
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.messages.js';
 import type { ChatMessageData } from '../../types.js';
 import Avatar from '../shared/Avatar.svelte';
@@ -172,16 +173,17 @@ function handleEscape(event: KeyboardEvent) {
       {#if message.reactions.length > 0}
         <div class="message-item__reactions">
           {#each message.reactions as reaction}
-            <button
-              class="message-item__reaction"
-              class:message-item__reaction--active={reaction.reacted}
+            <Button
+              variant="ghost"
+              size="sm"
+              class="message-item__reaction{reaction.reacted ? ' message-item__reaction--active' : ''}"
               type="button"
               onclick={() => onreact?.(message.id, reaction.emoji)}
               aria-label="{reaction.emoji} {reaction.count}"
             >
               <span class="message-item__reaction-emoji">{reaction.emoji}</span>
               <span class="message-item__reaction-count">{reaction.count}</span>
-            </button>
+            </Button>
           {/each}
         </div>
       {/if}
@@ -195,7 +197,9 @@ function handleEscape(event: KeyboardEvent) {
     </div>
 
     {#if hasActions}
-      <button
+      <Button
+        variant="ghost"
+        size="sm"
         class="message-item__more-btn"
         type="button"
         onclick={openActions}
@@ -205,7 +209,7 @@ function handleEscape(event: KeyboardEvent) {
         aria-controls={actionsId}
       >
         <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><circle cx="3" cy="8" r="1.3" fill="currentColor" /><circle cx="8" cy="8" r="1.3" fill="currentColor" /><circle cx="13" cy="8" r="1.3" fill="currentColor" /></svg>
-      </button>
+      </Button>
     {/if}
 
     {#if showActions}
@@ -216,44 +220,52 @@ function handleEscape(event: KeyboardEvent) {
         aria-label={t(M['chat.message_item.more_actions'])}
       >
         {#if onreact}
-          <button
+          <Button
+            variant="ghost"
+            size="sm"
             class="message-item__action-btn"
             type="button"
             onclick={toggleReactionPicker}
             aria-label={t(M['chat.message_item.add_reaction'])}
           >
             <svg viewBox="0 0 16 16" width="14" height="14"><circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.2" /><circle cx="5.5" cy="6.5" r="0.8" fill="currentColor" /><circle cx="10.5" cy="6.5" r="0.8" fill="currentColor" /><path d="M5.5 9.5c.5 1.2 1.5 1.8 2.5 1.8s2-.6 2.5-1.8" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" /></svg>
-          </button>
+          </Button>
         {/if}
         {#if onreply}
-          <button
+          <Button
+            variant="ghost"
+            size="sm"
             class="message-item__action-btn"
             type="button"
             onclick={() => onreply?.(message.id)}
             aria-label={t(M['chat.message_item.reply'])}
           >
             <svg viewBox="0 0 16 16" width="14" height="14"><path d="M6 3L2 7l4 4" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" /><path d="M2 7h8c2.2 0 4 1.8 4 4v1" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
-          </button>
+          </Button>
         {/if}
         {#if isOwn && onedit}
-          <button
+          <Button
+            variant="ghost"
+            size="sm"
             class="message-item__action-btn"
             type="button"
             onclick={() => onedit?.(message.id)}
             aria-label={t(M['chat.message_item.edit'])}
           >
             <svg viewBox="0 0 16 16" width="14" height="14"><path d="M11.5 1.5l3 3L5 14H2v-3z" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
-          </button>
+          </Button>
         {/if}
         {#if isOwn && ondelete}
-          <button
+          <Button
+            variant="ghost"
+            size="sm"
             class="message-item__action-btn"
             type="button"
             onclick={() => ondelete?.(message.id)}
             aria-label={t(M['chat.message_item.delete'])}
           >
             <svg viewBox="0 0 16 16" width="14" height="14"><path d="M2 4h12M5.3 4V2.7A.7.7 0 016 2h4a.7.7 0 01.7.7V4m1.6 0v9.3a1.4 1.4 0 01-1.4 1.4H5.1a1.4 1.4 0 01-1.4-1.4V4" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
-          </button>
+          </Button>
         {/if}
       </div>
 
@@ -391,24 +403,22 @@ function handleEscape(event: KeyboardEvent) {
     gap: var(--smrt-spacing-1, 0.25rem);
   }
 
-  .message-item__reaction {
-    display: inline-flex;
-    align-items: center;
+  /* :global() pierces into each Button's rendered <button> (see #1589). */
+  .message-item__reactions :global(.message-item__reaction) {
     gap: var(--smrt-spacing-1, 4px);
     padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
     border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
     border-radius: var(--smrt-radius-full, 9999px);
     background: var(--smrt-color-surface, #ffffff);
-    cursor: pointer;
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     transition: background var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
-  .message-item__reaction:hover {
+  .message-item__reactions :global(.message-item__reaction:hover) {
     background: var(--smrt-color-surface-container-high, #e1e3e8);
   }
 
-  .message-item__reaction--active {
+  .message-item__reactions :global(.message-item__reaction--active) {
     border-color: var(--smrt-color-primary, #005ac1);
     background: var(--smrt-color-primary-container, #d6e3ff);
   }
@@ -441,12 +451,11 @@ function handleEscape(event: KeyboardEvent) {
     font-style: italic;
   }
 
-  .message-item__more-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  /* :global() pierces into the Button child's rendered <button> (see #1589). */
+  .message-item :global(.message-item__more-btn) {
     width: 26px;
     height: 26px;
+    padding: 0;
     position: absolute;
     top: 0;
     right: var(--smrt-spacing-4, 1rem);
@@ -454,12 +463,11 @@ function handleEscape(event: KeyboardEvent) {
     border-radius: var(--smrt-radius-small, 0.25rem);
     background: var(--smrt-color-surface, #ffffff);
     color: var(--smrt-color-on-surface-variant, #43474e);
-    cursor: pointer;
     opacity: 0;
     transition: opacity var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
-  .message-item--own .message-item__more-btn {
+  .message-item--own :global(.message-item__more-btn) {
     right: auto;
     left: var(--smrt-spacing-4, 1rem);
   }
@@ -467,19 +475,19 @@ function handleEscape(event: KeyboardEvent) {
   /* Reveal the keyboard/touch affordance on hover OR when focus is inside the
      row, so it is never strictly hover-only (a11y blocker, T2 #1391). Always
      visible to coarse pointers (touch) which cannot hover. */
-  .message-item:hover .message-item__more-btn,
-  .message-item:focus-within .message-item__more-btn {
+  .message-item:hover :global(.message-item__more-btn),
+  .message-item:focus-within :global(.message-item__more-btn) {
     opacity: 1;
   }
 
-  .message-item__more-btn:focus-visible {
+  .message-item :global(.message-item__more-btn:focus-visible) {
     opacity: 1;
     outline: 2px solid var(--smrt-color-primary, #005ac1);
     outline-offset: 1px;
   }
 
   @media (hover: none) {
-    .message-item__more-btn {
+    .message-item :global(.message-item__more-btn) {
       opacity: 1;
     }
   }
@@ -504,21 +512,18 @@ function handleEscape(event: KeyboardEvent) {
     left: var(--smrt-spacing-4, 1rem);
   }
 
-  .message-item__action-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  /* :global() pierces into each Button's rendered <button> (see #1589). */
+  .message-item__actions :global(.message-item__action-btn) {
     width: 26px;
     height: 26px;
-    border: none;
+    padding: 0;
     border-radius: var(--smrt-radius-small, 0.25rem);
     background: transparent;
     color: var(--smrt-color-on-surface-variant, #43474e);
-    cursor: pointer;
     transition: background var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
-  .message-item__action-btn:hover {
+  .message-item__actions :global(.message-item__action-btn:hover) {
     background: var(--smrt-color-surface-container-high, #e1e3e8);
   }
 
@@ -536,9 +541,9 @@ function handleEscape(event: KeyboardEvent) {
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .message-item__more-btn,
-    .message-item__action-btn,
-    .message-item__reaction {
+    .message-item :global(.message-item__more-btn),
+    .message-item__actions :global(.message-item__action-btn),
+    .message-item__reactions :global(.message-item__reaction) {
       transition: none;
     }
   }

package/dist/svelte/components/messages/MessageItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageItem.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/messages/MessageItem.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAMtD,MAAM,WAAW,KAAK;IACpB,6BAA6B;IAC7B,OAAO,EAAE,eAAe,CAAC;IACzB,wDAAwD;IACxD,KAAK,EAAE,OAAO,CAAC;IACf,qBAAqB;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,qBAAqB;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,oBAAoB;IACpB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAuMD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageItem.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/messages/MessageItem.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAMtD,MAAM,WAAW,KAAK;IACpB,6BAA6B;IAC7B,OAAO,EAAE,eAAe,CAAC;IACzB,wDAAwD;IACxD,KAAK,EAAE,OAAO,CAAC;IACf,qBAAqB;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,qBAAqB;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,oBAAoB;IACpB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAwMD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/messages/ThreadPanel.svelte

@@ -5,6 +5,7 @@
  */
 
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.messages.js';
 import type { ChatMessageData, ChatThreadData } from '../../types.js';
 import MessageInput from './MessageInput.svelte';
@@ -47,7 +48,9 @@ const replyCount = $derived(
     {#if thread.isResolved}
       <span class="thread-panel__resolved">Resolved</span>
     {/if}
-    <button
+    <Button
+      variant="ghost"
+      size="sm"
       class="thread-panel__close"
       type="button"
       onclick={onclose}
@@ -56,7 +59,7 @@ const replyCount = $derived(
       <svg viewBox="0 0 16 16" width="16" height="16">
         <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
       </svg>
-    </button>
+    </Button>
   </header>
 
   <div class="thread-panel__messages">
@@ -124,22 +127,19 @@ const replyCount = $derived(
     flex-shrink: 0;
   }
 
-  .thread-panel__close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  /* :global() pierces into the Button child's rendered <button> (see #1589). */
+  .thread-panel__header :global(.thread-panel__close) {
     width: 32px;
     height: 32px;
-    border: none;
+    padding: 0;
     border-radius: var(--smrt-radius-small, 0.25rem);
     background: transparent;
     color: var(--smrt-color-on-surface-variant, #43474e);
-    cursor: pointer;
     flex-shrink: 0;
     transition: background var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
-  .thread-panel__close:hover {
+  .thread-panel__header :global(.thread-panel__close:hover) {
     background: var(--smrt-color-surface-container-high, #e1e3e8);
   }
 

package/dist/svelte/components/messages/ThreadPanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/messages/ThreadPanel.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAKtE,MAAM,WAAW,KAAK;IACpB,sBAAsB;IACtB,MAAM,EAAE,cAAc,CAAC;IACvB,6BAA6B;IAC7B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,gCAAgC;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,iCAAiC;IACjC,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,6BAA6B;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAsDD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ThreadPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/messages/ThreadPanel.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAKtE,MAAM,WAAW,KAAK;IACpB,sBAAsB;IACtB,MAAM,EAAE,cAAc,CAAC;IACvB,6BAA6B;IAC7B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,gCAAgC;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,iCAAiC;IACjC,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,6BAA6B;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAuDD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}