@happyvertical/smrt-chat 0.34.5 → 0.34.6

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}
@@ -302,22 +307,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 +330,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 +339,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;AA0JD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/components/shared/MentionAutocomplete.svelte

@@ -84,6 +84,7 @@ function highlightMatch(
   >
     {#each suggestions as suggestion, i (suggestion.id)}
       {@const parts = highlightMatch(suggestion.name, query)}
+      <!-- raw-primitive-allow: role=option in a hand-rolled autocomplete listbox with roving active-index keyboard navigation (ArrowUp/Down/Enter/Tab) and onpointerenter active sync, wrapping rich content (avatar, highlighted name); no Button primitive owns this structural listbox-option pattern -->
       <button
         class="mention-autocomplete__item"
         class:mention-autocomplete__item--active={i === activeIndex}

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

@@ -1 +1 @@
-{"version":3,"file":"MentionAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/MentionAutocomplete.svelte.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrE,0BAA0B;IAC1B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAiFD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"MentionAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/MentionAutocomplete.svelte.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrE,0BAA0B;IAC1B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAkFD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/shared/ReactionPicker.svelte

@@ -4,6 +4,7 @@
  * Compact popup grid of common emojis.
  */
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.js';
 
 const { t } = useI18n();
@@ -39,26 +40,21 @@ const emojis = [
 function handleSelect(emoji: string) {
   onreact(emoji);
 }
-
-function handleKeydown(event: KeyboardEvent, emoji: string) {
-  if (event.key === 'Enter' || event.key === ' ') {
-    event.preventDefault();
-    handleSelect(emoji);
-  }
-}
 </script>
 
 {#if isOpen}
   <div class="reaction-picker" role="group" aria-label={t(M['chat.reaction_picker.reactions'])}>
     {#each emojis as emoji}
-      <button
+      <Button
+        variant="ghost"
+        size="sm"
         class="reaction-picker__item"
         type="button"
         onclick={() => handleSelect(emoji)}
         aria-label={t(M['chat.reaction_picker.react_with'], { emoji })}
       >
         {emoji}
-      </button>
+      </Button>
     {/each}
   </div>
 {/if}
@@ -76,28 +72,19 @@ function handleKeydown(event: KeyboardEvent, emoji: string) {
     width: max-content;
   }
 
-  .reaction-picker__item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  /* :global() pierces into each Button's rendered <button> (see #1589). */
+  .reaction-picker :global(.reaction-picker__item) {
     width: 32px;
     height: 32px;
-    border: none;
     border-radius: var(--smrt-radius-small, 0.25rem);
     background: transparent;
-    cursor: pointer;
     font-size: var(--smrt-typography-body-large-size, 1.125rem);
     line-height: 1;
     padding: 0;
     transition: background var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
   }
 
-  .reaction-picker__item:hover {
+  .reaction-picker :global(.reaction-picker__item:hover) {
     background: var(--smrt-color-surface-container-high, #e1e3e8);
   }
-
-  .reaction-picker__item:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
-    outline-offset: -2px;
-  }
 </style>

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

@@ -1 +1 @@
-{"version":3,"file":"ReactionPicker.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/ReactionPicker.svelte.ts"],"names":[],"mappings":"AAWA,MAAM,WAAW,KAAK;IACpB,yCAAyC;IACzC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oCAAoC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAwDD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ReactionPicker.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/ReactionPicker.svelte.ts"],"names":[],"mappings":"AAYA,MAAM,WAAW,KAAK;IACpB,yCAAyC;IACzC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oCAAoC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAkDD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/tabs/ChatTab.svelte

@@ -5,6 +5,7 @@
  * Expands upward from the bottom tab bar.
  */
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.messages.js';
 import type { ChatMessageData, ChatTabState } from '../../types.js';
 import Avatar from '../shared/Avatar.svelte';
@@ -43,6 +44,7 @@ const {
 {#if tab.isExpanded}
   <div class="chat-tab chat-tab--expanded" aria-label={t(M['chat.chat_tab.chat_with'], { name: tab.room.name })}>
     <div class="chat-tab__header">
+      <!-- raw-primitive-allow: pressable header title wrapping rich content (room avatar component and name) that collapses the chat window on click; no Button primitive owns this structural avatar-header pattern -->
       <button
         class="chat-tab__header-btn"
         type="button"
@@ -58,7 +60,9 @@ const {
       </button>
 
       <div class="chat-tab__actions">
-        <button
+        <Button
+          variant="ghost"
+          size="sm"
           class="chat-tab__icon-btn"
           type="button"
           onclick={oncollapse}
@@ -68,8 +72,10 @@ const {
           <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
             <rect x="3" y="12" width="10" height="2" rx="1" />
           </svg>
-        </button>
-        <button
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
           class="chat-tab__icon-btn"
           type="button"
           onclick={onclose}
@@ -79,7 +85,7 @@ const {
           <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
             <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
           </svg>
-        </button>
+        </Button>
       </div>
     </div>
 
@@ -93,6 +99,7 @@ const {
     </div>
   </div>
 {:else}
+  <!-- raw-primitive-allow: large pressable collapsed-tab card wrapping rich content (room avatar component, name, unread badge) that expands the chat window on click; no Button primitive owns this structural selection-card pattern -->
   <button
     class="chat-tab chat-tab--collapsed"
     type="button"
@@ -164,29 +171,21 @@ const {
     flex-shrink: 0;
   }
 
-  .chat-tab__icon-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+  /* :global() pierces into each Button's rendered <button> (see #1589). */
+  .chat-tab__actions :global(.chat-tab__icon-btn) {
     width: 28px;
     height: 28px;
-    border: none;
+    padding: 0;
     background: none;
     color: inherit;
-    cursor: pointer;
     border-radius: var(--smrt-radius-full, 9999px);
     transition: background var(--smrt-duration-short2, 150ms);
   }
 
-  .chat-tab__icon-btn:hover {
+  .chat-tab__actions :global(.chat-tab__icon-btn:hover) {
     background: color-mix(in srgb, var(--smrt-color-on-primary) 15%, transparent);
   }
 
-  .chat-tab__icon-btn:focus-visible {
-    outline: 2px solid var(--smrt-color-on-primary, #ffffff);
-    outline-offset: -2px;
-  }
-
   .chat-tab__body {
     flex: 1;
     min-height: 0;
@@ -232,8 +231,11 @@ const {
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .chat-tab--collapsed,
-    .chat-tab__icon-btn {
+    .chat-tab--collapsed {
+      transition: none;
+    }
+
+    .chat-tab__actions :global(.chat-tab__icon-btn) {
       transition: none;
     }
   }

package/dist/svelte/components/tabs/ChatTab.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatTab.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/tabs/ChatTab.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAKpE,MAAM,WAAW,KAAK;IACpB,gBAAgB;IAChB,GAAG,EAAE,YAAY,CAAC;IAClB,4BAA4B;IAC5B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,gCAAgC;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,qBAAqB;IACrB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,wBAAwB;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AA+DD,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"ChatTab.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/tabs/ChatTab.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAKpE,MAAM,WAAW,KAAK;IACpB,gBAAgB;IAChB,GAAG,EAAE,YAAY,CAAC;IAClB,4BAA4B;IAC5B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,gCAAgC;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,qBAAqB;IACrB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,wBAAwB;IACxB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAkED,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/svelte/components/tabs/ChatTabList.svelte

@@ -4,6 +4,7 @@
  * Horizontal bar of small avatars/names at bottom. Shows unread badges.
  */
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.messages.js';
 import type { ChatTabState } from '../../types.js';
 import Avatar from '../shared/Avatar.svelte';
@@ -26,6 +27,7 @@ const { tabs, onselect, onclose }: Props = $props();
   <nav class="tab-list" aria-label={t(M['chat.chat_tab_list.minimized_chats'])}>
     {#each tabs as tab (tab.roomId)}
       <div class="tab-list__item">
+        <!-- raw-primitive-allow: pressable circular avatar tab wrapping rich content (room avatar component and overlaid unread badge) that opens the chat on click; no Button primitive owns this structural avatar-tab pattern -->
         <button
           class="tab-list__btn"
           type="button"
@@ -44,7 +46,9 @@ const { tabs, onselect, onclose }: Props = $props();
             </span>
           {/if}
         </button>
-        <button
+        <Button
+          variant="ghost"
+          size="sm"
           class="tab-list__close"
           type="button"
           onclick={(e) => { e.stopPropagation(); onclose(tab.roomId); }}
@@ -54,7 +58,7 @@ const { tabs, onselect, onclose }: Props = $props();
           <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
             <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
           </svg>
-        </button>
+        </Button>
       </div>
     {/each}
   </nav>
@@ -119,33 +123,32 @@ const { tabs, onselect, onclose }: Props = $props();
     border: 2px solid var(--smrt-color-surface, #fefbff);
   }
 
-  .tab-list__close {
+  /* :global() pierces into the Button child's rendered <button> (see #1589). */
+  .tab-list__item :global(.tab-list__close) {
     display: none;
     position: absolute;
     top: -4px;
     right: -4px;
     width: 18px;
     height: 18px;
-    align-items: center;
-    justify-content: center;
-    border: none;
     background: var(--smrt-color-surface-variant, #e1e2ec);
     color: var(--smrt-color-on-surface-variant, #43474e);
     border-radius: var(--smrt-radius-full, 9999px);
-    cursor: pointer;
     padding: 0;
     font-size: 0;
   }
 
-  .tab-list__item:hover .tab-list__close {
+  .tab-list__item:hover :global(.tab-list__close),
+  .tab-list__item:focus-within :global(.tab-list__close) {
     display: inline-flex;
   }
 
-  .tab-list__item:hover .tab-list__badge {
+  .tab-list__item:hover .tab-list__badge,
+  .tab-list__item:focus-within .tab-list__badge {
     display: none;
   }
 
-  .tab-list__close:hover {
+  .tab-list__item :global(.tab-list__close:hover) {
     background: var(--smrt-color-error-container, #ffdad6);
     color: var(--smrt-color-on-error-container, #410002);
   }

package/dist/svelte/components/tabs/ChatTabList.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatTabList.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/tabs/ChatTabList.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD,MAAM,WAAW,KAAK;IACpB,+BAA+B;IAC/B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,4BAA4B;IAC5B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB;IAClB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAwCD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ChatTabList.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/tabs/ChatTabList.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD,MAAM,WAAW,KAAK;IACpB,+BAA+B;IAC/B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,4BAA4B;IAC5B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB;IAClB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AA0CD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/tabs/MiniChat.svelte

@@ -5,6 +5,7 @@
  * No thread panel, no reactions. Just messages and a send box.
  */
 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';
@@ -94,7 +95,8 @@ $effect(() => {
       onkeydown={handleKeydown}
       aria-label={t(M['chat.mini_chat.input_label'])}
     />
-    <button
+    <Button
+      variant="ghost"
       class="mini-chat__send-btn"
       type="submit"
       disabled={!inputValue.trim()}
@@ -103,7 +105,7 @@ $effect(() => {
       <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
         <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
       </svg>
-    </button>
+    </Button>
   </form>
 </div>
 
@@ -212,41 +214,33 @@ $effect(() => {
     color: var(--smrt-color-outline, #74777f);
   }
 
-  .mini-chat__send-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+  /* :global() pierces into the Button child's rendered <button> (see #1589). */
+  .mini-chat__input-bar :global(.mini-chat__send-btn) {
     width: 32px;
     height: 32px;
-    border: none;
+    padding: 0;
     background: var(--smrt-color-primary, #005ac1);
     color: var(--smrt-color-on-primary, #ffffff);
     border-radius: var(--smrt-radius-full, 9999px);
-    cursor: pointer;
     flex-shrink: 0;
     transition: opacity var(--smrt-duration-short2, 150ms);
   }
 
-  .mini-chat__send-btn:disabled {
+  .mini-chat__input-bar :global(.mini-chat__send-btn:disabled) {
     opacity: 0.4;
-    cursor: not-allowed;
   }
 
-  .mini-chat__send-btn:not(:disabled):hover {
+  .mini-chat__input-bar :global(.mini-chat__send-btn:not(:disabled):hover) {
+    background: var(--smrt-color-primary, #005ac1);
     opacity: 0.85;
   }
 
-  .mini-chat__send-btn:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
-    outline-offset: 2px;
-  }
-
   @media (prefers-reduced-motion: reduce) {
     .mini-chat__messages {
       scroll-behavior: auto;
     }
 
-    .mini-chat__send-btn {
+    .mini-chat__input-bar :global(.mini-chat__send-btn) {
       transition: none;
     }
   }

package/dist/svelte/components/tabs/MiniChat.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MiniChat.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/tabs/MiniChat.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAItD,MAAM,WAAW,KAAK;IACpB,0BAA0B;IAC1B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,gCAAgC;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,qBAAqB;IACrB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkFD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"MiniChat.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/tabs/MiniChat.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAItD,MAAM,WAAW,KAAK;IACpB,0BAA0B;IAC1B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,gCAAgC;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,qBAAqB;IACrB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmFD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@happyvertical/smrt-chat",
-  "version": "0.34.5",
+  "version": "0.34.6",
   "description": "Chat rooms, DMs, threads, and agent conversations for the SMRT framework",
   "type": "module",
+  "smrtRawPrimitives": "strict-buttons",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -55,10 +56,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@happyvertical/smrt-core": "0.34.5",
-    "@happyvertical/smrt-tenancy": "0.34.5",
-    "@happyvertical/smrt-types": "0.34.5",
-    "@happyvertical/smrt-ui": "0.34.5"
+    "@happyvertical/smrt-core": "0.34.6",
+    "@happyvertical/smrt-tenancy": "0.34.6",
+    "@happyvertical/smrt-types": "0.34.6",
+    "@happyvertical/smrt-ui": "0.34.6"
   },
   "peerDependencies": {
     "svelte": "^5.18.0"
@@ -78,9 +79,9 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^4.0.17",
-    "@happyvertical/smrt-agents": "0.34.5",
-    "@happyvertical/smrt-profiles": "0.34.5",
-    "@happyvertical/smrt-vitest": "0.34.5"
+    "@happyvertical/smrt-agents": "0.34.6",
+    "@happyvertical/smrt-profiles": "0.34.6",
+    "@happyvertical/smrt-vitest": "0.34.6"
   },
   "scripts": {
     "build": "vite build --mode library && svelte-package -i src/svelte -o dist/svelte --tsconfig tsconfig.svelte.json",