@happyvertical/smrt-chat 0.34.6 → 0.34.8

package/dist/manifest.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
-  "timestamp": 1782278483770,
+  "timestamp": 1782318295117,
   "packageName": "@happyvertical/smrt-chat",
-  "packageVersion": "0.34.6",
+  "packageVersion": "0.34.8",
   "objects": {
     "@happyvertical/smrt-chat:AgentSessionCollection": {
       "name": "agentsessioncollection",

package/dist/smrt-knowledge.json

@@ -1,13 +1,13 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-06-24T05:21:24.161Z",
+  "generatedAt": "2026-06-24T16:24:55.462Z",
   "packageName": "@happyvertical/smrt-chat",
-  "packageVersion": "0.34.6",
+  "packageVersion": "0.34.8",
   "sourceManifestPath": "dist/manifest.json",
   "agentDocPath": "AGENTS.md",
   "sourceHashes": {
-    "manifest": "2975e8cc9d58e5960d1d59de3dc09523b44a85d6af43e7fbef3e9c03f695b2d9",
-    "packageJson": "5fbeb77ade984295729f043140c7db7b16609c4c5ef9333f04af4df283a14f15",
+    "manifest": "5544f0d5ac8ccff3abbeccbf63de82dc9b8fd9bf25e3b8336501144d08558e72",
+    "packageJson": "c3bb2f0cc08c04a4f72c9b60c13e9c7aa18ba3e49c116917c4c1e44452545227",
     "agents": "e0a8c6788fbd48c2619a353295d4538e9ff6863d483bcd354af522fb7c6a31bc"
   },
   "exports": [

package/dist/svelte/components/agent/AgentChat.svelte

@@ -5,6 +5,7 @@
  * Agent messages are styled differently from user messages.
  */
 
+import { Form, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.js';
@@ -92,13 +93,13 @@ $effect(() => {
 </script>
 
 <div class="agent-chat" aria-label={t(M['chat.agent_chat.conversation'])}>
-  <form class="agent-chat__input-bar" onsubmit={(e) => handleSubmit(e)}>
+  <Form class="agent-chat__input-bar" onsubmit={(e) => handleSubmit(e)}>
     {#if !isActive}
       <div class="agent-chat__inactive-notice">
         {t(M['chat.agent_chat.inactive_notice'], { status: session.status })}
       </div>
     {:else}
-      <textarea
+      <Textarea
         class="agent-chat__input"
         placeholder={t(M['chat.agent_chat.input_placeholder'])}
         bind:value={inputValue}
@@ -106,7 +107,7 @@ $effect(() => {
         rows={1}
         disabled={!isActive}
         aria-label={t(M['chat.agent_chat.message_input'])}
-      ></textarea>
+      />
       <Button
         variant="ghost"
         class="agent-chat__send-btn"
@@ -119,7 +120,7 @@ $effect(() => {
         </svg>
       </Button>
     {/if}
-  </form>
+  </Form>
 
   <div
     class="agent-chat__messages"
@@ -311,7 +312,8 @@ $effect(() => {
     color: var(--smrt-color-outline, #74777f);
   }
 
-  .agent-chat__input-bar {
+  /* :global() targets the Form primitive's rendered <form> (see #1589 scoping trap). */
+  :global(.agent-chat__input-bar) {
     display: flex;
     align-items: flex-end;
     gap: var(--smrt-spacing-2, 8px);
@@ -329,32 +331,18 @@ $effect(() => {
     font-style: italic;
   }
 
-  .agent-chat__input {
+  /* Layout for the Textarea primitive's rendered <textarea> (tokenised styling
+     comes from the primitive; this only sizes it within the input bar). */
+  :global(.agent-chat__input) {
     flex: 1;
-    border: none;
-    border-radius: var(--smrt-radius-md, 8px);
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
-    line-height: var(--smrt-typography-body-medium-line-height, 1.4);
-    color: var(--smrt-color-on-surface, #1a1c1e);
-    background: var(--smrt-color-surface-container-low, #f7f7fb);
     resize: none;
-    outline: none;
     min-height: 34px;
     max-height: 80px;
   }
 
-  .agent-chat__input:focus {
-    outline: none;
-    background: var(--smrt-color-surface-variant, #e1e2ec);
-  }
-
-  .agent-chat__input::placeholder {
-    color: var(--smrt-color-outline, #74777f);
-  }
-
-  /* :global() pierces into the Button child's rendered <button> (see #1589). */
-  .agent-chat__input-bar :global(.agent-chat__send-btn) {
+  /* :global() pierces into the Button child's rendered <button> (see #1589).
+     The ancestor is the Form primitive's <form>, also global. */
+  :global(.agent-chat__input-bar .agent-chat__send-btn) {
     width: 34px;
     height: 34px;
     padding: 0;
@@ -365,7 +353,7 @@ $effect(() => {
     transition: opacity 150ms;
   }
 
-  .agent-chat__input-bar :global(.agent-chat__send-btn:not(:disabled):hover) {
+  :global(.agent-chat__input-bar .agent-chat__send-btn:not(:disabled):hover) {
     background: var(--smrt-color-primary, #005ac1);
     opacity: 0.85;
   }

package/dist/svelte/components/agent/AgentChat.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AgentChat.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/agent/AgentChat.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EAEhB,MAAM,gBAAgB,CAAC;AAMxB,MAAM,WAAW,KAAK;IACpB,yBAAyB;IACzB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,oCAAoC;IACpC,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,gCAAgC;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAyKD,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AgentChat.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/agent/AgentChat.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EAEhB,MAAM,gBAAgB,CAAC;AAMxB,MAAM,WAAW,KAAK;IACpB,yBAAyB;IACzB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,oCAAoC;IACpC,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,gCAAgC;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA0KD,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/svelte/components/dialogs/RoomCreateDialog.svelte

@@ -8,6 +8,7 @@
  * hand-rolled backdrop it replaced had none of those.
  */
 import { Modal } from '@happyvertical/smrt-ui/feedback';
+import { Form, Input, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.js';
@@ -32,7 +33,6 @@ let { isOpen, onclose, oncreate }: Props = $props();
 let name = $state('');
 let roomType = $state('public');
 let description = $state('');
-let nameInput = $state<HTMLInputElement | null>(null);
 
 const canCreate = $derived(name.trim().length > 0);
 
@@ -81,10 +81,15 @@ function resetForm() {
 }
 
 // Modal traps focus and moves it to the dialog itself; nudge initial focus to
-// the name field once the dialog is open and the input is mounted.
+// the name field once the dialog is open and the input is mounted. The Input
+// primitive doesn't expose its inner element, so resolve it by id.
 $effect(() => {
-  if (isOpen && nameInput) {
-    nameInput.focus();
+  if (isOpen && typeof document !== 'undefined') {
+    // Defer a frame so the Modal body (and the name input) is mounted first.
+    const raf = requestAnimationFrame(() => {
+      document.getElementById('room-name')?.focus();
+    });
+    return () => cancelAnimationFrame(raf);
   }
 });
 </script>
@@ -96,7 +101,7 @@ $effect(() => {
   size="md"
   ariaLabel={t(M['chat.room_create_dialog.title'])}
 >
-  <form
+  <Form
     class="dialog__form"
     onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}
   >
@@ -104,14 +109,12 @@ $effect(() => {
       <label class="field__label" for="room-name">
         {t(M['chat.room_create_dialog.room_name'])} <span class="field__required" aria-label={t(M['chat.room_create_dialog.required'])}>*</span>
       </label>
-      <input
-        bind:this={nameInput}
+      <Input
         bind:value={name}
         id="room-name"
         type="text"
-        class="field__input"
         placeholder={t(M['chat.room_create_dialog.name_placeholder'])}
-        maxlength="100"
+        maxlength={100}
         autocomplete="off"
       />
     </div>
@@ -124,6 +127,7 @@ $effect(() => {
             class="type-option"
             class:type-option--selected={roomType === option.value}
           >
+            <!-- raw-primitive-allow: native radio for single-choice room-type selection; no Provider-free radio primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
             <input
               type="radio"
               name="roomType"
@@ -142,21 +146,20 @@ $effect(() => {
 
     <div class="field">
       <label class="field__label" for="room-description">Description</label>
-      <textarea
+      <Textarea
         bind:value={description}
         id="room-description"
-        class="field__textarea"
         placeholder={t(M['chat.room_create_dialog.description_placeholder'])}
-        rows="3"
-        maxlength="500"
-      ></textarea>
+        rows={3}
+        maxlength={500}
+      />
       <span class="field__hint">{description.length}/500</span>
     </div>
 
     <!-- Hidden submit keeps Enter-to-submit working inside the Modal body. -->
     <!-- raw-primitive-allow: off-screen aria-hidden type=submit element with tabindex=-1 used only to enable native Enter-to-submit inside the Modal body; intentionally non-interactive and not a visible action button -->
     <button type="submit" class="visually-hidden" tabindex="-1" disabled={!canCreate} aria-hidden="true"></button>
-  </form>
+  </Form>
 
   {#snippet footer()}
     <Button
@@ -178,7 +181,8 @@ $effect(() => {
 </Modal>
 
 <style>
-  .dialog__form {
+  /* :global() targets the Form primitive's rendered <form> (see #1589 scoping trap). */
+  :global(.dialog__form) {
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
@@ -214,40 +218,6 @@ $effect(() => {
     color: var(--smrt-color-error, #b3261e);
   }
 
-  .field__input {
-    padding: 0.75rem;
-    font: var(--smrt-typography-body-large-font, 1rem / 1.5 sans-serif);
-    font-family: inherit;
-    border: 1px solid var(--smrt-color-outline, #74777f);
-    border-radius: var(--smrt-radius-medium, 0.5rem);
-    background: var(--smrt-color-surface, #fefbff);
-    color: var(--smrt-color-on-surface, #1a1c1e);
-  }
-
-  .field__input:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #005ac1);
-    box-shadow: 0 0 0 1px var(--smrt-color-primary, #005ac1);
-  }
-
-  .field__textarea {
-    padding: 0.75rem;
-    font: var(--smrt-typography-body-large-font, 1rem / 1.5 sans-serif);
-    font-family: inherit;
-    border: 1px solid var(--smrt-color-outline, #74777f);
-    border-radius: var(--smrt-radius-medium, 0.5rem);
-    background: var(--smrt-color-surface, #fefbff);
-    color: var(--smrt-color-on-surface, #1a1c1e);
-    resize: vertical;
-    min-height: 80px;
-  }
-
-  .field__textarea:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary, #005ac1);
-    box-shadow: 0 0 0 1px var(--smrt-color-primary, #005ac1);
-  }
-
   .field__hint {
     font: var(--smrt-typography-body-small-font, 0.75rem / 1.25 sans-serif);
     color: var(--smrt-color-on-surface-variant, #43474e);

package/dist/svelte/components/dialogs/RoomCreateDialog.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RoomCreateDialog.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/dialogs/RoomCreateDialog.svelte.ts"],"names":[],"mappings":"AAiBA,MAAM,WAAW,KAAK;IACpB,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,mCAAmC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,QAAQ,EAAE,CAAC,MAAM,EAAE;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,WAAW,EAAE,MAAM,CAAC;KACrB,KAAK,IAAI,CAAC;CACZ;AA0HD,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"RoomCreateDialog.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/dialogs/RoomCreateDialog.svelte.ts"],"names":[],"mappings":"AAkBA,MAAM,WAAW,KAAK;IACpB,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,mCAAmC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,QAAQ,EAAE,CAAC,MAAM,EAAE;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,WAAW,EAAE,MAAM,CAAC;KACrB,KAAK,IAAI,CAAC;CACZ;AAgID,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/dialogs/SearchMessages.svelte

@@ -3,6 +3,7 @@
  * SearchMessages - Message search interface with results list
  * Provides a search input and displays matching messages
  */
+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.js';
@@ -26,11 +27,16 @@ export interface Props {
 let { isOpen, onclose, onsearch, results, onselectresult }: Props = $props();
 
 let query = $state('');
-let searchInput = $state<HTMLInputElement | null>(null);
 
 const hasResults = $derived(results.length > 0);
 const hasQuery = $derived(query.trim().length > 0);
 
+// The Input primitive doesn't expose its inner element, so resolve it by id.
+function focusSearchInput() {
+  if (typeof document === 'undefined') return;
+  document.getElementById('search-messages-input')?.focus();
+}
+
 function handleSubmit() {
   const trimmed = query.trim();
   if (trimmed.length > 0) {
@@ -95,8 +101,10 @@ $effect(() => {
 });
 
 $effect(() => {
-  if (isOpen && searchInput) {
-    searchInput.focus();
+  if (isOpen) {
+    // Defer a frame so the search input is mounted before focusing.
+    const raf = requestAnimationFrame(focusSearchInput);
+    return () => cancelAnimationFrame(raf);
   }
 });
 </script>
@@ -124,7 +132,7 @@ $effect(() => {
       </Button>
     </div>
 
-    <form
+    <Form
       class="search-form"
       onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}
     >
@@ -133,9 +141,9 @@ $effect(() => {
           <circle cx="11" cy="11" r="8" />
           <path d="m21 21-4.35-4.35" />
         </svg>
-        <input
-          bind:this={searchInput}
+        <Input
           bind:value={query}
+          id="search-messages-input"
           type="search"
           class="search-input"
           placeholder={t(M['chat.search_messages.input_placeholder'])}
@@ -148,7 +156,7 @@ $effect(() => {
             size="sm"
             class="clear-btn"
             type="button"
-            onclick={() => { query = ''; searchInput?.focus(); }}
+            onclick={() => { query = ''; focusSearchInput(); }}
             aria-label={t(M['chat.search_messages.clear'])}
           >
             <svg class="clear-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -158,7 +166,7 @@ $effect(() => {
           </Button>
         {/if}
       </div>
-    </form>
+    </Form>
 
     <div class="search-results" aria-label={t(M['chat.search_messages.results'])}>
       {#if hasResults}
@@ -257,7 +265,8 @@ $effect(() => {
     height: 1rem;
   }
 
-  .search-form {
+  /* :global() targets the Form primitive's rendered <form> (see #1589 scoping trap). */
+  :global(.search-form) {
     padding: 0.75rem 1rem;
     border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
   }
@@ -285,17 +294,24 @@ $effect(() => {
     color: var(--smrt-color-on-surface-variant, #43474e);
   }
 
-  .search-input {
+  /* The Input primitive sits inside the bordered .search-input-wrap, which owns
+     the border + focus-within ring — so neutralize the primitive's own chrome
+     (border/background/padding/box-shadow) and let it render borderless. */
+  :global(.search-input) {
     flex: 1;
     border: none;
     outline: none;
+    padding: 0;
     background: transparent;
+    box-shadow: none;
     font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
     color: var(--smrt-color-on-surface, #1a1c1e);
   }
 
-  .search-input::placeholder {
-    color: var(--smrt-color-on-surface-variant, #43474e);
+  :global(.search-input:focus) {
+    border: none;
+    outline: none;
+    box-shadow: none;
   }
 
   /* :global() pierces into the Button child's rendered <button> (see #1589). */

package/dist/svelte/components/dialogs/SearchMessages.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchMessages.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/dialogs/SearchMessages.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,MAAM,WAAW,KAAK;IACpB,uCAAuC;IACvC,MAAM,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gDAAgD;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qBAAqB;IACrB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,yCAAyC;IACzC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AA2KD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"SearchMessages.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/dialogs/SearchMessages.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,MAAM,WAAW,KAAK;IACpB,uCAAuC;IACvC,MAAM,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gDAAgD;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qBAAqB;IACrB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,yCAAyC;IACzC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAmLD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

@@ -3,6 +3,7 @@
  * 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';
@@ -31,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();
@@ -50,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>
 
@@ -80,17 +84,16 @@ function handleInput() {
   {/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
       variant="ghost"
       class="message-input__send"
@@ -181,31 +184,17 @@ 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);
-  }
-
   /* :global() pierces into the Button child's rendered <button> (see #1589). */
   .message-input__bar :global(.message-input__send) {
     width: 36px;

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":"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"}
+{"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,12 +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();
@@ -111,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
@@ -147,7 +147,7 @@ function handleEscape(event: KeyboardEvent) {
 
       <MessageBubble
         content={message.content}
-        {isOwn}
+        own={isOwn}
         variant={bubbleVariant}
       />
 
@@ -533,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 {

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":"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"}
+{"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/shared/FileUpload.svelte

@@ -169,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"

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":"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"}
+{"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"}

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

@@ -1,10 +1,15 @@
 <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 { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.js';
 
 const { t } = useI18n();
@@ -36,55 +41,12 @@ const emojis = [
   '\u{274C}',
   '\u{1F4AF}',
 ];
-
-function handleSelect(emoji: string) {
-  onreact(emoji);
-}
 </script>
 
-{#if isOpen}
-  <div class="reaction-picker" role="group" aria-label={t(M['chat.reaction_picker.reactions'])}>
-    {#each emojis as emoji}
-      <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>
-    {/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;
-  }
-
-  /* :global() pierces into each Button's rendered <button> (see #1589). */
-  .reaction-picker :global(.reaction-picker__item) {
-    width: 32px;
-    height: 32px;
-    border-radius: var(--smrt-radius-small, 0.25rem);
-    background: transparent;
-    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 :global(.reaction-picker__item:hover) {
-    background: var(--smrt-color-surface-container-high, #e1e3e8);
-  }
-</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":"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"}
+{"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/MiniChat.svelte

@@ -4,6 +4,7 @@
  * 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';
@@ -86,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'])}
@@ -106,7 +107,7 @@ $effect(() => {
         <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
       </svg>
     </Button>
-  </form>
+  </Form>
 </div>
 
 <style>
@@ -185,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);
@@ -194,28 +196,16 @@ $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);
   }
 
-  /* :global() pierces into the Button child's rendered <button> (see #1589). */
-  .mini-chat__input-bar :global(.mini-chat__send-btn) {
+  /* :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;
     padding: 0;
@@ -226,11 +216,11 @@ $effect(() => {
     transition: opacity var(--smrt-duration-short2, 150ms);
   }
 
-  .mini-chat__input-bar :global(.mini-chat__send-btn:disabled) {
+  :global(.mini-chat__input-bar .mini-chat__send-btn:disabled) {
     opacity: 0.4;
   }
 
-  .mini-chat__input-bar :global(.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;
   }
@@ -240,7 +230,7 @@ $effect(() => {
       scroll-behavior: auto;
     }
 
-    .mini-chat__input-bar :global(.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":"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"}
+{"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,9 +1,9 @@
 {
   "name": "@happyvertical/smrt-chat",
-  "version": "0.34.6",
+  "version": "0.34.8",
   "description": "Chat rooms, DMs, threads, and agent conversations for the SMRT framework",
   "type": "module",
-  "smrtRawPrimitives": "strict-buttons",
+  "smrtRawPrimitives": "strict",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -56,10 +56,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@happyvertical/smrt-core": "0.34.6",
-    "@happyvertical/smrt-tenancy": "0.34.6",
-    "@happyvertical/smrt-types": "0.34.6",
-    "@happyvertical/smrt-ui": "0.34.6"
+    "@happyvertical/smrt-core": "0.34.8",
+    "@happyvertical/smrt-tenancy": "0.34.8",
+    "@happyvertical/smrt-types": "0.34.8",
+    "@happyvertical/smrt-ui": "0.34.8"
   },
   "peerDependencies": {
     "svelte": "^5.18.0"
@@ -79,9 +79,9 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^4.0.17",
-    "@happyvertical/smrt-agents": "0.34.6",
-    "@happyvertical/smrt-profiles": "0.34.6",
-    "@happyvertical/smrt-vitest": "0.34.6"
+    "@happyvertical/smrt-agents": "0.34.8",
+    "@happyvertical/smrt-profiles": "0.34.8",
+    "@happyvertical/smrt-vitest": "0.34.8"
   },
   "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"}

package/dist/svelte/components/shared/TypingIndicator.svelte

@@ -1,90 +0,0 @@
-<script lang="ts">
-/**
- * TypingIndicator - Animated "typing..." display
- * Shows "Alice is typing..." or "Alice and Bob are typing..." with animated dots.
- */
-
-export interface Props {
-  /** Names of users currently typing */
-  names: string[];
-}
-
-const { names }: Props = $props();
-
-const label = $derived.by(() => {
-  if (names.length === 0) return '';
-  if (names.length === 1) return `${names[0]} is typing`;
-  if (names.length === 2) return `${names[0]} and ${names[1]} are typing`;
-  return `${names[0]} and ${names.length - 1} others are typing`;
-});
-</script>
-
-{#if names.length > 0}
-  <div class="typing" aria-live="polite" aria-label="{label}">
-    <span class="typing__text">{label}</span>
-    <span class="typing__dots" aria-hidden="true">
-      <span class="typing__dot"></span>
-      <span class="typing__dot"></span>
-      <span class="typing__dot"></span>
-    </span>
-  </div>
-{/if}
-
-<style>
-  .typing {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--smrt-spacing-1, 0.25rem);
-    padding: var(--smrt-spacing-1, 0.25rem) var(--smrt-spacing-3, 0.75rem);
-    font-size: var(--smrt-typography-body-small-size, 0.75rem);
-    color: var(--smrt-color-on-surface-variant, #43474e);
-  }
-
-  .typing__text {
-    white-space: nowrap;
-  }
-
-  .typing__dots {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--smrt-spacing-1, 4px);
-  }
-
-  .typing__dot {
-    width: 4px;
-    height: 4px;
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-on-surface-variant, #43474e);
-    animation: typing-bounce 1.4s infinite ease-in-out both;
-  }
-
-  .typing__dot:nth-child(1) {
-    animation-delay: 0s;
-  }
-
-  .typing__dot:nth-child(2) {
-    animation-delay: 0.2s;
-  }
-
-  .typing__dot:nth-child(3) {
-    animation-delay: 0.4s;
-  }
-
-  @keyframes typing-bounce {
-    0%, 80%, 100% {
-      opacity: 0.3;
-      transform: scale(0.8);
-    }
-    40% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .typing__dot {
-      animation: none;
-      opacity: 0.6;
-    }
-  }
-</style>

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

@@ -1,12 +0,0 @@
-/**
- * TypingIndicator - Animated "typing..." display
- * Shows "Alice is typing..." or "Alice and Bob are typing..." with animated dots.
- */
-export interface Props {
-    /** Names of users currently typing */
-    names: string[];
-}
-declare const TypingIndicator: import("svelte").Component<Props, {}, "">;
-type TypingIndicator = ReturnType<typeof TypingIndicator>;
-export default TypingIndicator;
-//# sourceMappingURL=TypingIndicator.svelte.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"TypingIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/shared/TypingIndicator.svelte.ts"],"names":[],"mappings":"AAGA;;;GAGG;AAEH,MAAM,WAAW,KAAK;IACpB,sCAAsC;IACtC,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AA6BD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/shared/__tests__/MessageBubble.test.js

@@ -1,21 +0,0 @@
-// @vitest-environment jsdom
-/**
- * Component coverage for MessageBubble via the shared S11 harness (#1416).
- */
-import { expectNoA11yViolations, render, screen, } from '@happyvertical/smrt-vitest/svelte';
-import { describe, expect, it } from 'vitest';
-import MessageBubble from '../MessageBubble.svelte';
-describe('MessageBubble', () => {
-    it('renders the message content', () => {
-        render(MessageBubble, {
-            props: { content: 'Hello there', isOwn: false },
-        });
-        expect(screen.getByText('Hello there')).toBeInTheDocument();
-    });
-    it('is axe-clean for an own message', async () => {
-        const { container } = render(MessageBubble, {
-            props: { content: 'Hi', isOwn: true },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/svelte/components/shared/__tests__/TypingIndicator.test.js

@@ -1,27 +0,0 @@
-// @vitest-environment jsdom
-/**
- * Component coverage for TypingIndicator via the shared S11 harness (#1416).
- */
-import { expectNoA11yViolations, render, screen, } from '@happyvertical/smrt-vitest/svelte';
-import { describe, expect, it } from 'vitest';
-import TypingIndicator from '../TypingIndicator.svelte';
-describe('TypingIndicator', () => {
-    it('names a single typist', () => {
-        render(TypingIndicator, { props: { names: ['Ada'] } });
-        expect(screen.getByText('Ada is typing')).toBeInTheDocument();
-    });
-    it('names two typists', () => {
-        render(TypingIndicator, { props: { names: ['Ada', 'Bob'] } });
-        expect(screen.getByText('Ada and Bob are typing')).toBeInTheDocument();
-    });
-    it('renders nothing when nobody is typing', () => {
-        const { container } = render(TypingIndicator, { props: { names: [] } });
-        expect(container.querySelector('.typing')).toBeNull();
-    });
-    it('is axe-clean', async () => {
-        const { container } = render(TypingIndicator, {
-            props: { names: ['Ada'] },
-        });
-        await expectNoA11yViolations(container);
-    });
-});