@happyvertical/smrt-chat 0.34.5 → 0.34.7

package/dist/manifest.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
-  "timestamp": 1782261325121,
+  "timestamp": 1782290164480,
   "packageName": "@happyvertical/smrt-chat",
-  "packageVersion": "0.34.5",
+  "packageVersion": "0.34.7",
   "objects": {
     "@happyvertical/smrt-chat:AgentSessionCollection": {
       "name": "agentsessioncollection",

package/dist/smrt-knowledge.json

@@ -1,13 +1,13 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-06-24T00:35:25.555Z",
+  "generatedAt": "2026-06-24T08:36:04.806Z",
   "packageName": "@happyvertical/smrt-chat",
-  "packageVersion": "0.34.5",
+  "packageVersion": "0.34.7",
   "sourceManifestPath": "dist/manifest.json",
   "agentDocPath": "AGENTS.md",
   "sourceHashes": {
-    "manifest": "23d035b24c816ce18408fba96b31ffd2b3f9616b1fdee7fe3f15fa66047fe551",
-    "packageJson": "fc6d69f31fe2019af2204e062594b852fdf1164ba17538646acaa7c81191570f",
+    "manifest": "eb7dc5e132fb34b6c1588f1cec335f9f087d782e8762992c7dc7124023353fe3",
+    "packageJson": "ce14941c197b179f275a91e466bea275c71aa6cacb4aedd1d6f0b3a01ff53861",
     "agents": "e0a8c6788fbd48c2619a353295d4538e9ff6863d483bcd354af522fb7c6a31bc"
   },
   "exports": [

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

@@ -5,7 +5,9 @@
  * 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';
 import type {
   AgentSessionData,
@@ -91,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}
@@ -105,8 +107,9 @@ $effect(() => {
         rows={1}
         disabled={!isActive}
         aria-label={t(M['chat.agent_chat.message_input'])}
-      ></textarea>
-      <button
+      />
+      <Button
+        variant="ghost"
         class="agent-chat__send-btn"
         type="submit"
         disabled={!inputValue.trim() || !isActive}
@@ -115,9 +118,9 @@ $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>
     {/if}
-  </form>
+  </Form>
 
   <div
     class="agent-chat__messages"
@@ -151,19 +154,21 @@ $effect(() => {
                   {:else if block.type === 'fields'}
                     <div class="field-update-block">
                       <span class="applied-badge">{t(M['chat.agent_chat.updated_fields'], { count: Object.keys(block.fields).length, plural: Object.keys(block.fields).length !== 1 ? 's' : '' })}</span>
-                      <button class="diff-btn" type="button" onclick={() => showDiff(block.fields)}>Diff</button>
+                      <Button variant="ghost" size="sm" class="diff-btn" type="button" onclick={() => showDiff(block.fields)}>Diff</Button>
                     </div>
                   {:else if block.type === 'markdown'}
                     <div class="markdown-block">
                       <pre class="markdown-block__content"><code>{block.content}</code></pre>
                       {#if onapplychange}
-                        <button
+                        <Button
+                          variant="ghost"
+                          size="sm"
                           class="diff-btn"
                           type="button"
                           onclick={() => onapplychange(block.content)}
                         >
                           Apply
-                        </button>
+                        </Button>
                       {/if}
                     </div>
                   {/if}
@@ -198,7 +203,7 @@ $effect(() => {
 <dialog bind:this={diffDialog} class="diff-dialog">
   <div class="diff-dialog__header">
     <h4>{t(M['chat.agent_chat.field_changes'])}</h4>
-    <button class="diff-dialog__close" type="button" onclick={closeDiff}>✕</button>
+    <Button variant="ghost" size="sm" class="diff-dialog__close" type="button" onclick={closeDiff}>✕</Button>
   </div>
   {#if diffDialogFields}
     <div class="diff-dialog__body">
@@ -307,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);
@@ -325,51 +331,30 @@ $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);
-  }
-
-  .agent-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(.agent-chat__input-bar .agent-chat__send-btn) {
     width: 34px;
     height: 34px;
-    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 150ms;
   }
 
-  .agent-chat__send-btn:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  .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;
   }
 
@@ -411,7 +396,9 @@ $effect(() => {
     line-height: var(--smrt-typography-body-medium-line-height, 1.45);
   }
 
-  .diff-btn {
+  /* :global() pierces into each Button's rendered <button> (see #1589). */
+  .field-update-block :global(.diff-btn),
+  .markdown-block :global(.diff-btn) {
     padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
     font-size: var(--smrt-typography-label-small-size, 0.625rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
@@ -419,11 +406,10 @@ $effect(() => {
     border-radius: var(--smrt-radius-full, 9999px);
     background: none;
     color: var(--smrt-color-on-surface-variant, #43474e);
-    cursor: pointer;
-    transition: background 0.15s;
   }
 
-  .diff-btn:hover {
+  .field-update-block :global(.diff-btn:hover),
+  .markdown-block :global(.diff-btn:hover) {
     background: var(--smrt-color-surface-variant, #e1e2ec);
     color: var(--smrt-color-primary, #005ac1);
   }
@@ -457,17 +443,16 @@ $effect(() => {
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
-  .diff-dialog__close {
+  /* :global() pierces into the Button child's rendered <button> (see #1589). */
+  .diff-dialog__header :global(.diff-dialog__close) {
     background: none;
-    border: none;
     font-size: var(--smrt-typography-body-large-size, 1rem);
-    cursor: pointer;
     color: var(--smrt-color-outline, #74777f);
     padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
     border-radius: var(--smrt-radius-sm, 4px);
   }
 
-  .diff-dialog__close:hover {
+  .diff-dialog__header :global(.diff-dialog__close:hover) {
     background: var(--smrt-color-surface-variant, #e1e2ec);
   }
 

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":"AAUA,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;AAwKD,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/agent/AgentSelector.svelte

@@ -26,6 +26,7 @@ const { t } = useI18n();
 
   <div class="agent-selector__grid" role="listbox" aria-label={t(M['chat.agent_selector.available_agents'])}>
     {#each agents as agent (agent.id)}
+      <!-- raw-primitive-allow: large pressable selection card with role=option wrapping rich content (avatar, name, description, unavailable badge) inside a role=listbox; no Button primitive owns this structural listbox-option pattern -->
       <button
         class="agent-selector__card"
         class:agent-selector__card--unavailable={!agent.isAvailable}

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

@@ -1 +1 @@
-{"version":3,"file":"AgentSelector.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/agent/AgentSelector.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAItD,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,sBAAsB;IACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AA6CD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AgentSelector.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/agent/AgentSelector.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAItD,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,sBAAsB;IACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AA8CD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/agent/AgentSessionPanel.svelte

@@ -5,6 +5,7 @@
  * Allows selecting an existing session or creating a new one.
  */
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { M } from '../../i18n.js';
 import type { AgentSessionData } from '../../types.js';
 import Avatar from '../shared/Avatar.svelte';
@@ -49,7 +50,8 @@ const statusLabel: Record<string, string> = {
   <div class="session-panel__header">
     <h2 class="session-panel__title">Sessions</h2>
     {#if onnewsession}
-      <button
+      <Button
+        variant="ghost"
         class="session-panel__new-btn"
         type="button"
         onclick={onnewsession}
@@ -59,13 +61,14 @@ const statusLabel: Record<string, string> = {
         <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
           <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
         </svg>
-      </button>
+      </Button>
     {/if}
   </div>
 
   <div class="session-panel__list" role="listbox" aria-label={t(M['chat.agent_session_panel.session_list'])}>
     {#each sessions as session (session.id)}
       {@const isCurrent = session.id === currentSessionId}
+      <!-- raw-primitive-allow: large pressable selection card with role=option wrapping rich content (avatar, name, date, status, message count, tool chips) inside a role=listbox; no Button primitive owns this structural listbox-option pattern -->
       <button
         class="session-panel__item"
         class:session-panel__item--active={isCurrent}
@@ -152,29 +155,22 @@ const statusLabel: Record<string, string> = {
     margin: 0;
   }
 
-  .session-panel__new-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+  /* :global() pierces into the Button child's rendered <button> (see #1589). */
+  .session-panel__header :global(.session-panel__new-btn) {
     width: 36px;
     height: 36px;
-    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;
     transition: opacity var(--smrt-duration-short2, 150ms);
   }
 
-  .session-panel__new-btn:hover {
+  .session-panel__header :global(.session-panel__new-btn:hover) {
+    background: var(--smrt-color-primary, #005ac1);
     opacity: 0.85;
   }
 
-  .session-panel__new-btn:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
-    outline-offset: 2px;
-  }
-
   .session-panel__list {
     flex: 1;
     overflow-y: auto;
@@ -314,8 +310,11 @@ const statusLabel: Record<string, string> = {
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .session-panel__item,
-    .session-panel__new-btn {
+    .session-panel__item {
+      transition: none;
+    }
+
+    .session-panel__header :global(.session-panel__new-btn) {
       transition: none;
     }
   }

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

@@ -1 +1 @@
-{"version":3,"file":"AgentSessionPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/agent/AgentSessionPanel.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,MAAM,WAAW,KAAK;IACpB,yBAAyB;IACzB,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB;IACvB,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAiGD,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"AgentSessionPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/agent/AgentSessionPanel.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,MAAM,WAAW,KAAK;IACpB,yBAAyB;IACzB,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB;IACvB,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAmGD,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/components/agent/ToolCallDisplay.svelte

@@ -50,6 +50,7 @@ function formatDuration(ms: number | undefined): string {
 </script>
 
 <div class="tool-call tool-call--{toolCall.status}" aria-label={t(M['chat.tool_call_display.tool_call'], { toolName: toolCall.toolName })}>
+  <!-- raw-primitive-allow: full-width disclosure trigger with aria-expanded and aria-controls toggling an externally-rendered collapsible panel, wrapping rich content (status dot, name, duration, status label, rotating chevron); structural accordion header no Button primitive owns -->
   <button
     class="tool-call__header"
     type="button"

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

@@ -1 +1 @@
-{"version":3,"file":"ToolCallDisplay.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/agent/ToolCallDisplay.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAG1D,MAAM,WAAW,KAAK;IACpB,qBAAqB;IACrB,QAAQ,EAAE,mBAAmB,CAAC;CAC/B;AAkGD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ToolCallDisplay.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/agent/ToolCallDisplay.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAG1D,MAAM,WAAW,KAAK;IACpB,qBAAqB;IACrB,QAAQ,EAAE,mBAAmB,CAAC;CAC/B;AAmGD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

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

@@ -8,7 +8,9 @@
  * 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';
 
 const { t } = useI18n();
@@ -31,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);
 
@@ -80,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>
@@ -95,7 +101,7 @@ $effect(() => {
   size="md"
   ariaLabel={t(M['chat.room_create_dialog.title'])}
 >
-  <form
+  <Form
     class="dialog__form"
     onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}
   >
@@ -103,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>
@@ -123,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"
@@ -141,42 +146,43 @@ $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
+    <Button
+      variant="secondary"
       type="button"
-      class="btn btn--secondary"
       onclick={handleClose}
     >
       Cancel
-    </button>
-    <button
+    </Button>
+    <Button
+      variant="primary"
       type="button"
-      class="btn btn--primary"
       disabled={!canCreate}
       onclick={handleSubmit}
     >
       {t(M['chat.room_create_dialog.create_room'])}
-    </button>
+    </Button>
   {/snippet}
 </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;
@@ -212,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);
@@ -301,45 +273,8 @@ $effect(() => {
     color: var(--smrt-color-on-surface-variant, #43474e);
   }
 
-  .btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.625rem 1.5rem;
-    font: var(--smrt-typography-label-large-font, 500 0.875rem / 1.25 sans-serif);
-    letter-spacing: 0.1px;
-    border-radius: var(--smrt-radius-full, 9999px);
-    border: none;
-    cursor: pointer;
-    transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
-  }
-
-  .btn:disabled {
-    opacity: 0.38;
-    cursor: not-allowed;
-  }
-
-  .btn--primary {
-    background: var(--smrt-color-primary, #005ac1);
-    color: var(--smrt-color-on-primary, #fff);
-  }
-
-  .btn--primary:hover:not(:disabled) {
-    box-shadow: var(--smrt-elevation-1, 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15));
-  }
-
-  .btn--secondary {
-    background: transparent;
-    color: var(--smrt-color-primary, #005ac1);
-  }
-
-  .btn--secondary:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--smrt-color-primary, #005ac1) 8%, transparent);
-  }
-
   @media (prefers-reduced-motion: reduce) {
-    .type-option,
-    .btn {
+    .type-option {
       transition: none;
     }
   }

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":"AAgBA,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;AAwHD,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"}