@happyvertical/smrt-chat 0.34.5 → 0.34.7

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

@@ -1,8 +1,14 @@
 <script lang="ts">
 /**
- * ReactionPicker - Emoji reaction selector
- * Compact popup grid of common emojis.
+ * ReactionPicker — chat's emoji reaction selector.
+ *
+ * A thin adapter over the canonical `@happyvertical/smrt-ui/chat`
+ * `ReactionPicker` (no duplicated markup/styles): it supplies chat's emoji
+ * palette and routes the group + per-emoji labels through chat's i18n catalog,
+ * and preserves the package's `onreact` / `isOpen` vocabulary + the
+ * `ModuleUIRegistry` registration.
  */
+import { ReactionPicker as UIReactionPicker } from '@happyvertical/smrt-ui/chat';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { M } from '../../i18n.js';
 
@@ -35,69 +41,12 @@ const emojis = [
   '\u{274C}',
   '\u{1F4AF}',
 ];
-
-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
-        class="reaction-picker__item"
-        type="button"
-        onclick={() => handleSelect(emoji)}
-        aria-label={t(M['chat.reaction_picker.react_with'], { emoji })}
-      >
-        {emoji}
-      </button>
-    {/each}
-  </div>
-{/if}
-
-<style>
-  .reaction-picker {
-    display: grid;
-    grid-template-columns: repeat(8, 1fr);
-    gap: var(--smrt-spacing-1, 0.25rem);
-    padding: var(--smrt-spacing-2, 0.375rem);
-    background: var(--smrt-color-surface, #ffffff);
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6cf);
-    border-radius: var(--smrt-radius-medium, 0.5rem);
-    box-shadow: var(--smrt-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.15));
-    width: max-content;
-  }
-
-  .reaction-picker__item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    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 {
-    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>
+<UIReactionPicker
+  {emojis}
+  {isOpen}
+  label={t(M['chat.reaction_picker.reactions'])}
+  emojiLabel={(emoji) => t(M['chat.reaction_picker.react_with'], { emoji })}
+  onpick={onreact}
+/>

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":"AAiBA,MAAM,WAAW,KAAK;IACpB,yCAAyC;IACzC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oCAAoC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAoCD,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

@@ -4,7 +4,9 @@
  * Simplified message list + input in minimal space.
  * No thread panel, no reactions. Just messages and a send box.
  */
+import { Form, Input } 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 { ChatMessageData } from '../../types.js';
 import Avatar from '../shared/Avatar.svelte';
@@ -85,8 +87,8 @@ $effect(() => {
     {/if}
   </div>
 
-  <form class="mini-chat__input-bar" onsubmit={handleSubmit}>
-    <input
+  <Form class="mini-chat__input-bar" onsubmit={handleSubmit}>
+    <Input
       class="mini-chat__input"
       type="text"
       placeholder={t(M['chat.mini_chat.placeholder'])}
@@ -94,7 +96,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,8 +106,8 @@ $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>
-  </form>
+    </Button>
+  </Form>
 </div>
 
 <style>
@@ -183,7 +186,8 @@ $effect(() => {
     color: var(--smrt-color-outline, #74777f);
   }
 
-  .mini-chat__input-bar {
+  /* :global() targets the Form primitive's rendered <form> (see #1589 scoping trap). */
+  :global(.mini-chat__input-bar) {
     display: flex;
     align-items: center;
     gap: var(--smrt-spacing-1, 4px);
@@ -192,61 +196,41 @@ $effect(() => {
     background: var(--smrt-color-surface, #fefbff);
   }
 
-  .mini-chat__input {
+  /* Layout for the Input primitive's rendered <input> (tokenised styling comes
+     from the primitive; this only sizes/shapes it within the input bar). */
+  :global(.mini-chat__input) {
     flex: 1;
-    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
     border-radius: var(--smrt-radius-full, 9999px);
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    font: var(--smrt-typography-body-small-font, 0.8125rem/1.4 sans-serif);
-    color: var(--smrt-color-on-surface, #1a1c1e);
-    background: var(--smrt-color-surface-container-low, #f7f7fb);
-    outline: none;
   }
 
-  .mini-chat__input:focus {
-    border-color: var(--smrt-color-primary, #005ac1);
-    box-shadow: 0 0 0 1px var(--smrt-color-primary, #005ac1);
-  }
-
-  .mini-chat__input::placeholder {
-    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).
+     The ancestor is the Form primitive's <form>, also global. */
+  :global(.mini-chat__input-bar .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 {
+  :global(.mini-chat__input-bar .mini-chat__send-btn:disabled) {
     opacity: 0.4;
-    cursor: not-allowed;
   }
 
-  .mini-chat__send-btn:not(:disabled):hover {
+  :global(.mini-chat__input-bar .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 {
+    :global(.mini-chat__input-bar .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":"AAYA,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;AAoFD,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/svelte/index.d.ts

@@ -17,6 +17,7 @@
  * const Component = ModuleUIRegistry.get('@happyvertical/smrt-chat', 'chat-layout');
  * ```
  */
+export { MessageBubble, TypingIndicator } from '@happyvertical/smrt-ui/chat';
 export { default as AgentChat } from './components/agent/AgentChat.svelte';
 export { default as AgentSelector } from './components/agent/AgentSelector.svelte';
 export { default as AgentSessionPanel } from './components/agent/AgentSessionPanel.svelte';
@@ -35,10 +36,8 @@ export { default as Avatar } from './components/shared/Avatar.svelte';
 export { default as FileUpload } from './components/shared/FileUpload.svelte';
 export { default as LinkPreview } from './components/shared/LinkPreview.svelte';
 export { default as MentionAutocomplete } from './components/shared/MentionAutocomplete.svelte';
-export { default as MessageBubble } from './components/shared/MessageBubble.svelte';
 export { default as ReactionPicker } from './components/shared/ReactionPicker.svelte';
 export { default as ReadReceipts } from './components/shared/ReadReceipts.svelte';
-export { default as TypingIndicator } from './components/shared/TypingIndicator.svelte';
 export { default as UserPresence } from './components/shared/UserPresence.svelte';
 export { default as ChatTab } from './components/tabs/ChatTab.svelte';
 export { default as ChatTabList } from './components/tabs/ChatTabList.svelte';

package/dist/svelte/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAsCH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAEvF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,gDAAgD,CAAC;AAChG,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,4CAA4C,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAGxE,YAAY,EACV,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,eAAe,EACf,mBAAmB,GACpB,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAwCH,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAC3F,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAEvF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,gDAAgD,CAAC;AAChG,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAGxE,YAAY,EACV,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,eAAe,EACf,mBAAmB,GACpB,MAAM,YAAY,CAAC"}

package/dist/svelte/index.js

@@ -17,6 +17,7 @@
  * const Component = ModuleUIRegistry.get('@happyvertical/smrt-chat', 'chat-layout');
  * ```
  */
+import { MessageBubble, TypingIndicator } from '@happyvertical/smrt-ui/chat';
 import { ModuleUIRegistry } from '@happyvertical/smrt-ui/registry';
 import { CHAT_MODULE_META } from '../ui.js';
 // Agent components
@@ -42,16 +43,18 @@ import Avatar from './components/shared/Avatar.svelte';
 import FileUpload from './components/shared/FileUpload.svelte';
 import LinkPreview from './components/shared/LinkPreview.svelte';
 import MentionAutocomplete from './components/shared/MentionAutocomplete.svelte';
-import MessageBubble from './components/shared/MessageBubble.svelte';
 import ReactionPicker from './components/shared/ReactionPicker.svelte';
 import ReadReceipts from './components/shared/ReadReceipts.svelte';
-import TypingIndicator from './components/shared/TypingIndicator.svelte';
 import UserPresence from './components/shared/UserPresence.svelte';
 // Tab components
 import ChatTab from './components/tabs/ChatTab.svelte';
 import ChatTabList from './components/tabs/ChatTabList.svelte';
 import ChatTabs from './components/tabs/ChatTabs.svelte';
 import MiniChat from './components/tabs/MiniChat.svelte';
+// MessageBubble + TypingIndicator are re-exported from the canonical
+// `@happyvertical/smrt-ui/chat` primitives (consolidated in #1589);
+// ReactionPicker keeps a thin chat-local adapter for the package's i18n + palette.
+export { MessageBubble, TypingIndicator } from '@happyvertical/smrt-ui/chat';
 export { default as AgentChat } from './components/agent/AgentChat.svelte';
 export { default as AgentSelector } from './components/agent/AgentSelector.svelte';
 export { default as AgentSessionPanel } from './components/agent/AgentSessionPanel.svelte';
@@ -71,10 +74,8 @@ export { default as Avatar } from './components/shared/Avatar.svelte';
 export { default as FileUpload } from './components/shared/FileUpload.svelte';
 export { default as LinkPreview } from './components/shared/LinkPreview.svelte';
 export { default as MentionAutocomplete } from './components/shared/MentionAutocomplete.svelte';
-export { default as MessageBubble } from './components/shared/MessageBubble.svelte';
 export { default as ReactionPicker } from './components/shared/ReactionPicker.svelte';
 export { default as ReadReceipts } from './components/shared/ReadReceipts.svelte';
-export { default as TypingIndicator } from './components/shared/TypingIndicator.svelte';
 export { default as UserPresence } from './components/shared/UserPresence.svelte';
 export { default as ChatTab } from './components/tabs/ChatTab.svelte';
 export { default as ChatTabList } from './components/tabs/ChatTabList.svelte';

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@happyvertical/smrt-chat",
-  "version": "0.34.5",
+  "version": "0.34.7",
   "description": "Chat rooms, DMs, threads, and agent conversations for the SMRT framework",
   "type": "module",
+  "smrtRawPrimitives": "strict",
   "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-tenancy": "0.34.7",
+    "@happyvertical/smrt-core": "0.34.7",
+    "@happyvertical/smrt-types": "0.34.7",
+    "@happyvertical/smrt-ui": "0.34.7"
   },
   "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.7",
+    "@happyvertical/smrt-profiles": "0.34.7",
+    "@happyvertical/smrt-vitest": "0.34.7"
   },
   "scripts": {
     "build": "vite build --mode library && svelte-package -i src/svelte -o dist/svelte --tsconfig tsconfig.svelte.json",

package/dist/svelte/components/shared/MessageBubble.svelte

@@ -1,81 +0,0 @@
-<script lang="ts">
-/**
- * MessageBubble - Styled message bubble
- * Different styling for own messages, others' messages, agent, and system.
- */
-
-export interface Props {
-  /** Message content text */
-  content: string;
-  /** Whether this message was sent by the current user */
-  isOwn: boolean;
-  /** Visual variant of the bubble */
-  variant?: 'default' | 'agent' | 'system';
-}
-
-const { content, isOwn, variant = 'default' }: Props = $props();
-</script>
-
-<div
-  class="bubble {variant}"
-  class:own={isOwn}
->
-  <p class="bubble__content">{content}</p>
-</div>
-
-<style>
-  .bubble {
-    max-width: 75%;
-    padding: var(--smrt-spacing-3, 0.75rem) var(--smrt-spacing-4, 1rem);
-    border-radius: var(--smrt-radius-large, 1rem);
-    word-break: break-word;
-    line-height: 1.4;
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-  }
-
-  .bubble__content {
-    margin: 0;
-    white-space: pre-wrap;
-  }
-
-  /* Default variant - received */
-  .default {
-    background: var(--smrt-color-surface-container, #f3f4f6);
-    color: var(--smrt-color-on-surface, #1b1b1f);
-    border-bottom-left-radius: var(--smrt-radius-small, 0.25rem);
-  }
-
-  /* Default variant - own message */
-  .default.own {
-    background: var(--smrt-color-primary, #005ac1);
-    color: var(--smrt-color-on-primary, #ffffff);
-    border-bottom-right-radius: var(--smrt-radius-small, 0.25rem);
-    border-bottom-left-radius: var(--smrt-radius-large, 1rem);
-  }
-
-  /* Agent variant */
-  .agent {
-    background: var(--smrt-color-tertiary-container, #ffd8e4);
-    color: var(--smrt-color-on-tertiary-container, #31111d);
-    border-bottom-left-radius: var(--smrt-radius-small, 0.25rem);
-    border-left: 3px solid var(--smrt-color-tertiary, #7d5260);
-  }
-
-  .agent.own {
-    border-left: none;
-    border-right: 3px solid var(--smrt-color-tertiary, #7d5260);
-    border-bottom-right-radius: var(--smrt-radius-small, 0.25rem);
-    border-bottom-left-radius: var(--smrt-radius-large, 1rem);
-  }
-
-  /* System variant */
-  .system {
-    max-width: 100%;
-    background: transparent;
-    color: var(--smrt-color-on-surface-variant, #43474e);
-    text-align: center;
-    font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    padding: var(--smrt-spacing-2, 0.375rem) var(--smrt-spacing-4, 1rem);
-    border-radius: 0;
-  }
-</style>

package/dist/svelte/components/shared/MessageBubble.svelte.d.ts

@@ -1,16 +0,0 @@
-/**
- * MessageBubble - Styled message bubble
- * Different styling for own messages, others' messages, agent, and system.
- */
-export interface Props {
-    /** Message content text */
-    content: string;
-    /** Whether this message was sent by the current user */
-    isOwn: boolean;
-    /** Visual variant of the bubble */
-    variant?: 'default' | 'agent' | 'system';
-}
-declare const MessageBubble: import("svelte").Component<Props, {}, "">;
-type MessageBubble = ReturnType<typeof MessageBubble>;
-export default MessageBubble;
-//# sourceMappingURL=MessageBubble.svelte.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"MessageBubble.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/MessageBubble.svelte.ts"],"names":[],"mappings":"AAGA;;;GAGG;AAEH,MAAM,WAAW,KAAK;IACpB,2BAA2B;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,KAAK,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C;AAeD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}