@happyvertical/smrt-chat 0.34.5 → 0.34.7

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

@@ -3,7 +3,9 @@
  * MessageInput - Chat message input bar
  * Text area with send button. Shows reply preview when replying.
  */
+import { Textarea } 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';
 
 const { t } = useI18n();
@@ -30,7 +32,9 @@ const {
 }: Props = $props();
 
 let content = $state('');
-let textareaEl: HTMLTextAreaElement | undefined = $state();
+// Captured from the textarea's input event so auto-resize works without binding
+// to the Textarea primitive's inner DOM node (the primitive doesn't expose it).
+let textareaEl: HTMLTextAreaElement | undefined;
 
 function handleSend() {
   const trimmed = content.trim();
@@ -49,10 +53,11 @@ function handleKeydown(event: KeyboardEvent) {
   }
 }
 
-function handleInput() {
-  if (!textareaEl) return;
-  textareaEl.style.height = 'auto';
-  textareaEl.style.height = `${Math.min(textareaEl.scrollHeight, 120)}px`;
+function handleInput(event: Event) {
+  const el = event.currentTarget as HTMLTextAreaElement;
+  textareaEl = el;
+  el.style.height = 'auto';
+  el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
 }
 </script>
 
@@ -64,31 +69,33 @@ 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}
 
   <div class="message-input__bar">
-    <textarea
-      bind:this={textareaEl}
+    <Textarea
       bind:value={content}
       class="message-input__textarea"
       {placeholder}
       {disabled}
-      rows="1"
+      rows={1}
       onkeydown={handleKeydown}
       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 +112,7 @@ function handleInput() {
           stroke-linejoin="round"
         />
       </svg>
-    </button>
+    </Button>
   </div>
 </div>
 
@@ -155,21 +162,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);
   }
 
@@ -180,53 +184,35 @@ function handleInput() {
     padding: var(--smrt-spacing-3, 0.75rem) var(--smrt-spacing-4, 1rem);
   }
 
-  .message-input__textarea {
+  /* Layout/sizing for the Textarea primitive's rendered <textarea>; tokenised
+     border/focus/placeholder styling comes from the primitive. The height is
+     JS-driven (auto-resize), so resize is disabled and capped at max-height. */
+  :global(.message-input__textarea) {
     flex: 1;
     resize: none;
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
-    border-radius: var(--smrt-radius-medium, 0.5rem);
-    padding: var(--smrt-spacing-2, 0.375rem) var(--smrt-spacing-3, 0.75rem);
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    font-family: inherit;
-    line-height: 1.4;
-    background: var(--smrt-color-surface-container-low, #f9fafb);
-    color: var(--smrt-color-on-surface, #1b1b1f);
+    min-height: auto;
     max-height: 120px;
     overflow-y: auto;
   }
 
-  .message-input__textarea:focus {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
-    outline-offset: -1px;
-    border-color: transparent;
-  }
-
-  .message-input__textarea::placeholder {
-    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":"AAaA,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;AA8ED,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

@@ -4,11 +4,12 @@
  * Displays avatar, message bubble, reactions, reply preview, and tool call data.
  */
 
+import { MessageBubble } from '@happyvertical/smrt-ui/chat';
 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';
-import MessageBubble from '../shared/MessageBubble.svelte';
 import ReactionPicker from '../shared/ReactionPicker.svelte';
 
 const { t } = useI18n();
@@ -110,7 +111,7 @@ function handleEscape(event: KeyboardEvent) {
 
 {#if message.messageType === 'system' || message.messageType === 'action'}
   <div class="message-item message-item--system">
-    <MessageBubble content={message.content} isOwn={false} variant="system" />
+    <MessageBubble content={message.content} own={false} variant="system" />
   </div>
 {:else}
   <div
@@ -146,7 +147,7 @@ function handleEscape(event: KeyboardEvent) {
 
       <MessageBubble
         content={message.content}
-        {isOwn}
+        own={isOwn}
         variant={bubbleVariant}
       />
 
@@ -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);
   }
 
@@ -528,6 +533,10 @@ function handleEscape(event: KeyboardEvent) {
     right: var(--smrt-spacing-4, 1rem);
     z-index: 10;
     transform: translateY(-100%);
+    /* The picker primitive supplies its own surface + radius; the popover
+       wrapper lifts it off the conversation with matching elevation. */
+    border-radius: var(--smrt-radius-large, 0.75rem);
+    box-shadow: var(--smrt-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.15));
   }
 
   .message-item--own .message-item__picker-popover {
@@ -536,9 +545,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":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKtD,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"}

package/dist/svelte/components/shared/FileUpload.svelte

@@ -5,6 +5,7 @@
  * Supports file type filtering and max size constraints.
  */
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.js';
 
 const { t } = useI18n();
@@ -116,7 +117,9 @@ function getFileIcon(type: string): string {
             <span class="file-upload__file-name">{file.name}</span>
             <span class="file-upload__file-size">{formatSize(file.size)}</span>
           </div>
-          <button
+          <Button
+            variant="ghost"
+            size="sm"
             class="file-upload__file-remove"
             type="button"
             onclick={() => removePending(i)}
@@ -125,25 +128,27 @@ function getFileIcon(type: string): string {
             <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
               <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
             </svg>
-          </button>
+          </Button>
         </div>
       {/each}
 
       <div class="file-upload__preview-actions">
-        <button
-          class="file-upload__confirm-btn"
+        <Button
+          variant="primary"
+          size="sm"
           type="button"
           onclick={confirmUpload}
         >
           {t(M['chat.file_upload.upload_files'], { count: pendingFiles.length, plural: pendingFiles.length !== 1 ? 's' : '' })}
-        </button>
-        <button
-          class="file-upload__clear-btn"
+        </Button>
+        <Button
+          variant="secondary"
+          size="sm"
           type="button"
           onclick={() => { pendingFiles = []; sizeError = ''; }}
         >
           Clear
-        </button>
+        </Button>
       </div>
     </div>
   {/if}
@@ -164,6 +169,7 @@ function getFileIcon(type: string): string {
     ondragleave={handleDragLeave}
   >
     <label class="file-upload__label">
+      <!-- raw-primitive-allow: visually-hidden native file input that backs a custom drag-and-drop zone; the base Input primitive renders a visible bordered control and cannot be the hidden picker behind this drop zone -->
       <input
         type="file"
         class="file-upload__input"
@@ -302,22 +308,19 @@ function getFileIcon(type: string): string {
     color: var(--smrt-color-outline, #74777f);
   }
 
-  .file-upload__file-remove {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+  /* :global() pierces into the Button child's rendered <button> (see #1589). */
+  .file-upload__file :global(.file-upload__file-remove) {
     width: 24px;
     height: 24px;
-    border: none;
+    padding: 0;
     background: none;
     color: var(--smrt-color-on-surface-variant, #43474e);
-    cursor: pointer;
     border-radius: var(--smrt-radius-full, 9999px);
     flex-shrink: 0;
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
-  .file-upload__file-remove:hover {
+  .file-upload__file :global(.file-upload__file-remove:hover) {
     background: var(--smrt-color-error-container, #ffdad6);
     color: var(--smrt-color-error, #ba1a1a);
   }
@@ -328,41 +331,6 @@ function getFileIcon(type: string): string {
     padding-top: var(--smrt-spacing-1, 4px);
   }
 
-  .file-upload__confirm-btn {
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-4, 16px);
-    border: none;
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-primary, #005ac1);
-    color: var(--smrt-color-on-primary, #ffffff);
-    font: var(--smrt-typography-label-large-font, 500 0.875rem/1.25 sans-serif);
-    cursor: pointer;
-    transition: opacity var(--smrt-duration-short2, 150ms);
-  }
-
-  .file-upload__confirm-btn:hover {
-    opacity: 0.85;
-  }
-
-  .file-upload__confirm-btn:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
-    outline-offset: 2px;
-  }
-
-  .file-upload__clear-btn {
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-4, 16px);
-    border: 1px solid var(--smrt-color-outline, #74777f);
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: transparent;
-    color: var(--smrt-color-on-surface-variant, #43474e);
-    font: var(--smrt-typography-label-large-font, 500 0.875rem/1.25 sans-serif);
-    cursor: pointer;
-    transition: background var(--smrt-duration-short2, 150ms);
-  }
-
-  .file-upload__clear-btn:hover {
-    background: var(--smrt-color-surface-variant, #e1e2ec);
-  }
-
   .file-upload__error {
     padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
     border-radius: var(--smrt-radius-small, 4px);
@@ -372,10 +340,11 @@ function getFileIcon(type: string): string {
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .file-upload__drop-zone,
-    .file-upload__file-remove,
-    .file-upload__confirm-btn,
-    .file-upload__clear-btn {
+    .file-upload__drop-zone {
+      transition: none;
+    }
+
+    .file-upload__file :global(.file-upload__file-remove) {
       transition: none;
     }
   }

package/dist/svelte/components/shared/FileUpload.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/FileUpload.svelte.ts"],"names":[],"mappings":"AAYA,MAAM,WAAW,KAAK;IACpB,uCAAuC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAyJD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FileUpload.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/FileUpload.svelte.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,KAAK;IACpB,uCAAuC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2JD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}