@happyvertical/smrt-svelte 0.34.4 → 0.34.6

package/AGENTS.md

@@ -6,19 +6,30 @@ Top-of-stack Svelte 5 integration layer for SMRT: the app `Provider`, auth / AI
 
 SMRT's shared UI primitives are split by concern: **`smrt-ui` owns the
 domain-agnostic VISUAL primitives** (`Button`, `Card`, `Modal`, `Badge`,
-`Avatar`, `Chip`, `Dropdown`, …) and **`smrt-svelte` (here) owns the FORM
-primitives** (`Input`, `Textarea`, `Select`, `Checkbox`/`Toggle`, `Form`, and the
-specialized date/measurement/address/file inputs — they carry i18n + spoken-input
-logic that keeps them above the leaf).
+`Avatar`, `Chip`, `Dropdown`, …) **plus the Provider-free base FORM primitives**
+(`Form`, `Input`, `Select`, `Textarea`, `Toggle`, `FormGroup` under
+`@happyvertical/smrt-ui/forms` — relocated there in #1589's deferred-forms phase
+so domain packages can adopt them without the Provider or a build-graph cycle),
+and **`smrt-svelte` (here) owns the Provider-REQUIRED form primitives**
+(`CheckboxInput`, the rich `Form`, `TextInput`, `MoneyInput`, and the specialized
+date/measurement/address/file inputs — they call `useAppState` / the AI hooks and
+carry i18n + spoken-input logic that keeps them above the leaf). This package
+re-exports the base **input** primitives (`Input`, `Select`, `Textarea`,
+`Toggle`, `FormGroup`) from smrt-ui so `@happyvertical/smrt-svelte/forms` stays
+the full barrel — but **not** `Form`: this barrel's `Form` is the rich
+Provider-backed one, so import the Provider-free `Form` from
+`@happyvertical/smrt-ui/forms` directly.
 
 Two consequences:
 
 - **This package is the canonical consumer.** smrt-svelte's own composites and
   workspace shell must adopt smrt-ui visual primitives — use `Button`, not a raw
-  `<button>`. Only `src/components/forms/` (the form primitives themselves)
-  legitimately holds raw `<input>`/`<select>`/`<textarea>`.
-- **Domain packages import visual primitives from `smrt-ui` and form primitives
-  from `smrt-svelte`**, and must not hand-roll raw interactive markup.
+  `<button>`. Only `src/components/forms/` (the Provider-required form primitives
+  themselves) legitimately holds raw `<input>`/`<select>`/`<textarea>`; the base
+  primitives now define those raw elements in `smrt-ui/src/components/forms/`.
+- **Domain packages import visual + base form primitives from `smrt-ui` and the
+  Provider-required form primitives from `smrt-svelte`**, and must not hand-roll
+  raw interactive markup.
 
 Enforced by `scripts/check-raw-primitives.mjs` (report-only during the #1589
 migration; flips strict per package as it adopts the primitives).
@@ -102,7 +113,9 @@ library. Which barrel for what:
 | Need | Import from |
 |------|-------------|
 | Buttons, cards, badges, avatars, chips, skeletons, tooltips, dropdowns, trees, pagination | `@happyvertical/smrt-svelte/ui` (or the package root) |
-| Text/select/number/date/money/address inputs, toggles, file upload, `Form`, `FormGroup` | `@happyvertical/smrt-svelte/forms` |
+| Provider-free base inputs — `Input`, `Select`, `Textarea`, `Toggle`, `FormGroup` | `@happyvertical/smrt-ui/forms` (also re-exported from `@happyvertical/smrt-svelte/forms`) |
+| Provider-free `Form` (plain `<form>` wrapper) | `@happyvertical/smrt-ui/forms` **only** — `@happyvertical/smrt-svelte/forms` exports the *rich* Provider-backed `Form` under that name, so import the plain one straight from smrt-ui |
+| Provider-backed inputs — `TextInput`, `NumberInput`, `MoneyInput`, date/measurement/address inputs, `CheckboxInput`, file upload, the rich `Form` | `@happyvertical/smrt-svelte/forms` |
 | `Modal`, `ConfirmDialog`, `LoadingOverlay`, `ProgressBar` | `@happyvertical/smrt-svelte/feedback` |
 | `Container`, `Grid`, `Header`, `Footer`, `PageHeader`, `EmptyState` | `@happyvertical/smrt-svelte/layout` |
 | Chat message bubble, reaction picker, typing indicator | `@happyvertical/smrt-svelte/chat` |

package/dist/browser-ai/svelte/components/STTTest.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import { useAppState } from '../../../hooks/useAppState.svelte.js';
 import { M } from '../../../i18n/strings.workspace.js';
 import type { GetSTTOptions } from '../../index.js';
@@ -117,13 +118,13 @@ function clearLogs() {
       </select>
     </div>
 
-    <button
-      type="button"
+    <Button
+      variant="primary"
       onclick={initializeAdapter}
       disabled={isRecording || isInitializing}
     >
       Initialize
-    </button>
+    </Button>
   </div>
 
   <div class="status">
@@ -153,6 +154,7 @@ function clearLogs() {
   {/if}
 
   <div class="record-controls">
+    <!-- raw-primitive-allow: press-and-hold record control driven by mousedown/up/leave + touchstart/end (push-to-talk), not a click action; Button has no press-and-hold model so this stays a native button -->
     <button
       type="button"
       class="record-btn"
@@ -180,7 +182,7 @@ function clearLogs() {
   <div class="logs">
     <div class="logs-header">
       <strong>Logs:</strong>
-      <button type="button" onclick={clearLogs}>Clear</button>
+      <Button variant="ghost" size="sm" onclick={clearLogs}>Clear</Button>
     </div>
     <div class="log-list">
       {#each logs as logEntry}
@@ -229,27 +231,6 @@ function clearLogs() {
     font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
   }
 
-  .controls button {
-    padding: var(--smrt-spacing-sm, 8px) var(--smrt-spacing-md, 16px);
-    background: var(--smrt-color-primary, #005ac1);
-    color: var(--smrt-color-on-primary, #ffffff);
-    border: none;
-    border-radius: var(--smrt-radius-small, 6px);
-    cursor: pointer;
-    font: var(--smrt-typography-label-large-font, 0.875rem / 1.25 sans-serif);
-    transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
-  }
-
-  .controls button:hover:not(:disabled) {
-    background: var(--smrt-color-primary-container, #005ac1);
-    opacity: 0.9;
-  }
-
-  .controls button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
   .status {
     display: flex;
     gap: var(--smrt-spacing-md, 16px);
@@ -337,20 +318,6 @@ function clearLogs() {
     margin-bottom: var(--smrt-spacing-sm, 8px);
   }
 
-  .logs-header button {
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-sm, 8px);
-    font: var(--smrt-typography-label-small-font, 0.75rem / 1 sans-serif);
-    background: var(--smrt-color-surface-container, #e5e7eb);
-    border: none;
-    border-radius: var(--smrt-radius-small, 4px);
-    cursor: pointer;
-    transition: background-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
-  }
-
-  .logs-header button:hover {
-    background: var(--smrt-color-surface-container-high, #d1d5db);
-  }
-
   .log-list {
     background: var(--smrt-color-inverse-surface, #1f2937);
     color: var(--smrt-color-inverse-on-surface, #d1d5db);
@@ -366,9 +333,7 @@ function clearLogs() {
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .controls button,
-    .record-btn,
-    .logs-header button {
+    .record-btn {
       transition: none;
     }
     

package/dist/browser-ai/svelte/components/STTTest.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"STTTest.svelte.d.ts","sourceRoot":"","sources":["../../../../src/browser-ai/svelte/components/STTTest.svelte.ts"],"names":[],"mappings":"AAUA,kCAAkC;AAClC,MAAM,WAAW,KAAK;IACpB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgLD,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"STTTest.svelte.d.ts","sourceRoot":"","sources":["../../../../src/browser-ai/svelte/components/STTTest.svelte.ts"],"names":[],"mappings":"AAWA,kCAAkC;AAClC,MAAM,WAAW,KAAK;IACpB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkLD,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/browser-ai/svelte/components/VoiceInput.svelte

@@ -66,6 +66,7 @@ async function handleToggle() {
       <span>{stt.error.message}</span>
     </div>
   {:else}
+    <!-- raw-primitive-allow: bespoke circular mic toggle with a listening-state pulse animation, the core voice-input control; not a standard action button -->
     <button
       type="button"
       class="mic-button"

package/dist/browser-ai/svelte/components/VoiceInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceInput.svelte.d.ts","sourceRoot":"","sources":["../../../../src/browser-ai/svelte/components/VoiceInput.svelte.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,KAAK;IACpB,qCAAqC;IACrC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmED,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"VoiceInput.svelte.d.ts","sourceRoot":"","sources":["../../../../src/browser-ai/svelte/components/VoiceInput.svelte.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,KAAK;IACpB,qCAAqC;IACrC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoED,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/forms/index.d.ts

@@ -1,25 +1,28 @@
 /**
- * SMRT Form components with voice input capabilities
+ * SMRT Form components with voice input capabilities.
+ *
+ * The Provider-FREE base primitives (`Input`, `Select`, `Textarea`, `Toggle`,
+ * `FormGroup`) were relocated to `@happyvertical/smrt-ui/forms` (#1589
+ * deferred-forms phase) so domain packages can adopt them without the Provider
+ * or a build-graph cycle. They are re-exported here so this subpath stays the
+ * one-stop barrel for form primitives. The Provider-REQUIRED inputs (the rich
+ * `Form`, `CheckboxInput`, `TextInput`, …) still live in this package.
  */
+export { FormGroup, Input, Select, Textarea, Toggle, } from '@happyvertical/smrt-ui/forms';
 export { default as AddressInput } from './AddressInput.svelte';
 export { default as CheckboxInput } from './CheckboxInput.svelte';
 export { default as DateRangeInput } from './DateRangeInput.svelte';
 export { default as DateTimeInput } from './DateTimeInput.svelte';
 export { default as FileUpload } from './FileUpload.svelte';
 export { default as Form } from './Form.svelte';
-export { default as FormGroup } from './FormGroup.svelte';
 export { default as FormMicButton } from './FormMicButton.svelte';
-export { default as Input } from './Input.svelte';
 export { default as MeasurementInput } from './MeasurementInput.svelte';
 export { default as MoneyInput } from './MoneyInput.svelte';
 export { default as NumberInput } from './NumberInput.svelte';
 export { default as PhoneInput } from './PhoneInput.svelte';
 export { default as SearchInput } from './SearchInput.svelte';
-export { default as Select } from './Select.svelte';
 export { default as SelectInput } from './SelectInput.svelte';
-export { default as Textarea } from './Textarea.svelte';
 export { default as TextareaInput } from './TextareaInput.svelte';
 export { default as TextInput } from './TextInput.svelte';
-export { default as Toggle } from './Toggle.svelte';
 export type { AddressValue, DateRangeValue, LLMModelId, MeasurementUnit, MeasurementValue, SelectOption, STTAdapterType, } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/forms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAGpD,YAAY,EACV,YAAY,EACZ,cAAc,EACd,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,cAAc,GACf,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EACL,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,MAAM,GACP,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG1D,YAAY,EACV,YAAY,EACZ,cAAc,EACd,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,cAAc,GACf,MAAM,YAAY,CAAC"}

package/dist/components/forms/index.js

@@ -1,6 +1,15 @@
 /**
- * SMRT Form components with voice input capabilities
+ * SMRT Form components with voice input capabilities.
+ *
+ * The Provider-FREE base primitives (`Input`, `Select`, `Textarea`, `Toggle`,
+ * `FormGroup`) were relocated to `@happyvertical/smrt-ui/forms` (#1589
+ * deferred-forms phase) so domain packages can adopt them without the Provider
+ * or a build-graph cycle. They are re-exported here so this subpath stays the
+ * one-stop barrel for form primitives. The Provider-REQUIRED inputs (the rich
+ * `Form`, `CheckboxInput`, `TextInput`, …) still live in this package.
  */
+// Provider-free base primitives — relocated to the smrt-ui leaf (#1589).
+export { FormGroup, Input, Select, Textarea, Toggle, } from '@happyvertical/smrt-ui/forms';
 // SMRT-enhanced form components with voice support (v2.0 naming)
 export { default as AddressInput } from './AddressInput.svelte';
 export { default as CheckboxInput } from './CheckboxInput.svelte';
@@ -8,18 +17,12 @@ export { default as DateRangeInput } from './DateRangeInput.svelte';
 export { default as DateTimeInput } from './DateTimeInput.svelte';
 export { default as FileUpload } from './FileUpload.svelte';
 export { default as Form } from './Form.svelte';
-// Generic form components (migrated from @happyvertical/svelte)
-export { default as FormGroup } from './FormGroup.svelte';
 export { default as FormMicButton } from './FormMicButton.svelte';
-export { default as Input } from './Input.svelte';
 export { default as MeasurementInput } from './MeasurementInput.svelte';
 export { default as MoneyInput } from './MoneyInput.svelte';
 export { default as NumberInput } from './NumberInput.svelte';
 export { default as PhoneInput } from './PhoneInput.svelte';
 export { default as SearchInput } from './SearchInput.svelte';
-export { default as Select } from './Select.svelte';
 export { default as SelectInput } from './SelectInput.svelte';
-export { default as Textarea } from './Textarea.svelte';
 export { default as TextareaInput } from './TextareaInput.svelte';
 export { default as TextInput } from './TextInput.svelte';
-export { default as Toggle } from './Toggle.svelte';

package/dist/components/workspace/WorkspaceShell.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type { Snippet } from 'svelte';
 import { M } from '../../i18n/strings.workspace.js';
 
@@ -261,6 +262,7 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
   class:has-inspector-rail={hasInspectorRail}
 >
   <!-- Mobile sidebar backdrop -->
+  <!-- raw-primitive-allow: full-bleed click-catching navigation backdrop/scrim; a structural overlay surface, not a styled action button -->
   <button
     class="mobile-backdrop"
     type="button"
@@ -277,6 +279,7 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
   -->
   {#if hasInspector}
     {#if onCloseInspector}
+      <!-- raw-primitive-allow: full-bleed click-catching inspector backdrop/scrim; a structural overlay surface, not a styled action button -->
       <button
         class="inspector-backdrop"
         type="button"
@@ -311,9 +314,10 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
       </div>
 
       {#if collapsible && onToggleCollapsed}
-        <button
+        <Button
+          variant="ghost"
+          size="sm"
           class="shell-toggle"
-          type="button"
           onclick={handleCollapseToggle}
           aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
           aria-expanded={!collapsed}
@@ -321,7 +325,7 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
           <span class="shell-toggle-glyph" aria-hidden="true">
             {collapsed ? '›' : '‹'}
           </span>
-        </button>
+        </Button>
       {/if}
     </div>
 
@@ -341,15 +345,16 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
   <div class="smrt-workspace-main">
     <header class="smrt-workspace-topbar">
       <div class="topbar-left">
-        <button
+        <Button
+          variant="ghost"
+          size="sm"
           class="mobile-menu"
-          type="button"
           onclick={toggleMobileNav}
           aria-label={mobileNavOpen ? 'Close navigation' : 'Open navigation'}
           aria-expanded={mobileNavOpen}
         >
           <span aria-hidden="true">≡</span>
-        </button>
+        </Button>
         <div class="topbar-brand">
           {#if eyebrow}
             <div class="eyebrow topbar-eyebrow">{eyebrow}</div>
@@ -396,14 +401,15 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
           <div class="inspector-header">
             <span class="inspector-title">{inspectorTitle}</span>
             {#if onCloseInspector}
-              <button
+              <Button
+                variant="ghost"
+                size="sm"
                 class="inspector-close"
-                type="button"
                 onclick={handleInspectorClose}
                 aria-label={t(M['ui.workspace_shell.close_inspector'])}
               >
                 <span aria-hidden="true">×</span>
-              </button>
+              </Button>
             {/if}
           </div>
           <div class="inspector-body">
@@ -518,8 +524,11 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
     color: var(--smrt-color-on-surface-variant, #6b7280);
   }
 
-  .shell-toggle {
-    appearance: none;
+  /* These shell-chrome controls now render through smrt-ui <Button>; pierce
+     Svelte scoping into the child <button> with `.smrt-workspace-shell
+     :global(.class)` (#1589). Button owns focus-visible, so those rules are
+     dropped. The responsive `display` toggles below are preserved. */
+  .smrt-workspace-shell :global(.shell-toggle) {
     border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
     background: var(--smrt-color-surface-container, #f3f4f6);
     color: var(--smrt-color-on-surface, #111827);
@@ -529,22 +538,16 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    cursor: pointer;
     flex-shrink: 0;
     transition:
       background-color 150ms ease,
       color 150ms ease;
   }
 
-  .shell-toggle:hover {
+  .smrt-workspace-shell :global(.shell-toggle):hover {
     background: var(--smrt-color-surface-container-high, #e5e7eb);
   }
 
-  .shell-toggle:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #2563eb);
-    outline-offset: 2px;
-  }
-
   .shell-toggle-glyph {
     font-size: var(--smrt-typography-body-large-size, 1rem);
     line-height: 1;
@@ -680,9 +683,8 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
     background: var(--smrt-color-warning, #f59e0b);
   }
 
-  .mobile-menu {
+  .smrt-workspace-shell :global(.mobile-menu) {
     display: none;
-    appearance: none;
     border: 1px solid var(--smrt-color-outline-variant, #e5e7eb);
     background: var(--smrt-color-surface, #ffffff);
     color: var(--smrt-color-on-surface, #111827);
@@ -691,17 +693,10 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
     height: 2.35rem;
     align-items: center;
     justify-content: center;
-    cursor: pointer;
     font-size: var(--smrt-typography-body-large-size, 1.1rem);
     line-height: 1;
   }
 
-  .mobile-menu:focus-visible,
-  .inspector-close:focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #2563eb);
-    outline-offset: 2px;
-  }
-
   /* ─── Stage / content / inspector ─────────────────────── */
 
   .smrt-workspace-stage {
@@ -743,8 +738,7 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
     font-size: var(--smrt-typography-title-medium-size, 0.95rem);
   }
 
-  .inspector-close {
-    appearance: none;
+  .smrt-workspace-shell :global(.inspector-close) {
     border: 1px solid transparent;
     background: transparent;
     color: var(--smrt-color-on-surface-variant, #6b7280);
@@ -756,13 +750,12 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
     justify-content: center;
     font-size: var(--smrt-typography-title-large-size, 1.25rem);
     line-height: 1;
-    cursor: pointer;
     transition:
       background-color 150ms ease,
       color 150ms ease;
   }
 
-  .inspector-close:hover {
+  .smrt-workspace-shell :global(.inspector-close):hover {
     background: var(--smrt-color-surface-container-high, #e5e7eb);
     color: var(--smrt-color-on-surface, #111827);
   }
@@ -851,7 +844,7 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
       justify-content: center;
     }
 
-    .smrt-workspace-shell .shell-toggle {
+    .smrt-workspace-shell :global(.shell-toggle) {
       display: none;
     }
 
@@ -869,11 +862,11 @@ const sidebarInert = $derived(isMobileViewport && !mobileNavOpen);
       grid-template-columns: 1fr;
     }
 
-    .mobile-menu {
+    .smrt-workspace-shell :global(.mobile-menu) {
       display: inline-flex;
     }
 
-    .shell-toggle {
+    .smrt-workspace-shell :global(.shell-toggle) {
       display: none;
     }
 

package/dist/components/workspace/WorkspaceShell.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WorkspaceShell.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/workspace/WorkspaceShell.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,MAAM,WAAW,KAAK;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,UAAU,CAAC,EACP,QAAQ,GACR,SAAS,GACT,YAAY,GACZ,WAAW,GACX,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAClB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;;;;;;OAYG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sCAAsC;IACtC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,+DAA+D;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iCAAiC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;;;;;;;;;OAeG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAwQD,QAAA,MAAM,cAAc,wDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"WorkspaceShell.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/workspace/WorkspaceShell.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,MAAM,WAAW,KAAK;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,UAAU,CAAC,EACP,QAAQ,GACR,SAAS,GACT,YAAY,GACZ,WAAW,GACX,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAClB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;;;;;;OAYG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sCAAsC;IACtC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,+DAA+D;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iCAAiC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;;;;;;;;;OAeG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA2QD,QAAA,MAAM,cAAc,wDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/workspace/tools-dock/ToolsDock.svelte

@@ -31,6 +31,7 @@
   import { onDestroy, onMount, tick } from 'svelte';
   import { M } from '../../../i18n/strings.workspace.js';
   import { useI18n } from '@happyvertical/smrt-ui/i18n';
+  import { Button } from '@happyvertical/smrt-ui/ui';
   import type { ToolsDockContext } from '../types.js';
   import type { ToolsDockInstance } from './define-tools-dock.svelte.js';
 
@@ -159,6 +160,7 @@
   {@const def = toolDefById(tool.id)}
   {@const IconComponent = def?.iconComponent}
   {@const iconString = def?.icon}
+  <!-- raw-primitive-allow: dock tool-selector toggle (aria-pressed) with variant-dependent rail/topbar styling, part of the ToolsDock segmented control; not a standard action button -->
   <button
     type="button"
     class:active={isActive}
@@ -209,15 +211,16 @@
   >
     <header class="tools-dock__panel-header">
       <h3>{dock.activeTool ? labelFor(dock.activeTool) : 'Tools'}</h3>
-      <button
-        type="button"
+      <Button
+        variant="ghost"
+        size="sm"
         class="tools-dock__close"
         onclick={handleClose}
         aria-label={closeLabel}
         title={closeLabel}
       >
         ×
-      </button>
+      </Button>
     </header>
 
     <div class="tools-dock__panel-body">
@@ -254,6 +257,7 @@
 {:else}
   <aside class="tools-dock tools-dock--rail" class:tools-dock--open={dock.isOpen}>
     {#if dock.isOpen}
+      <!-- raw-primitive-allow: click-catching overlay/backdrop that closes the dock; a structural full-bleed surface, not a styled action button -->
       <button
         type="button"
         class="tools-dock__overlay"
@@ -326,8 +330,7 @@
   }
 
   .tools-dock__rail-button:focus-visible,
-  .tools-dock__topbar-button:focus-visible,
-  .tools-dock__close:focus-visible {
+  .tools-dock__topbar-button:focus-visible {
     outline: 2px solid var(--smrt-color-primary, #7dd3fc);
     outline-offset: 2px;
   }
@@ -411,7 +414,9 @@
     overflow-y: auto;
   }
 
-  .tools-dock__close {
+  /* The close control now renders through smrt-ui <Button>; pierce Svelte
+     scoping into the child-rendered <button> with `:global` (#1589). */
+  .tools-dock__panel-header :global(.tools-dock__close) {
     width: 2rem;
     height: 2rem;
     display: inline-grid;
@@ -420,7 +425,6 @@
     border-radius: 0.5rem;
     background: var(--smrt-color-surface-container-high, #1d2228);
     color: inherit;
-    cursor: pointer;
     font-size: var(--smrt-typography-title-large-size, 1.2rem);
     line-height: 1;
   }

package/dist/components/workspace/tools-dock/ToolsDock.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolsDock.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/tools-dock/ToolsDock.svelte.ts"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAGrE,UAAU,KAAK;IACb,mDAAmD;IACnD,IAAI,EAAE,iBAAiB,CAAC;IACxB,qFAAqF;IACrF,OAAO,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAClC,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAuNH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ToolsDock.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/workspace/tools-dock/ToolsDock.svelte.ts"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAGrE,UAAU,KAAK;IACb,mDAAmD;IACnD,IAAI,EAAE,iBAAiB,CAAC;IACxB,qFAAqF;IACrF,OAAO,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAClC,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA0NH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@happyvertical/smrt-svelte",
-  "version": "0.34.4",
+  "version": "0.34.6",
   "description": "Svelte 5 components for SMRT user management - auth, users, tenants, roles, permissions, groups",
   "type": "module",
+  "smrtRawPrimitives": "strict-buttons",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "svelte": "./dist/index.js",
@@ -77,9 +78,9 @@
   "dependencies": {
     "@happyvertical/logger": "^0.74.7",
     "esm-env": "^1.2.2",
-    "@happyvertical/smrt-languages": "0.34.4",
-    "@happyvertical/smrt-types": "0.34.4",
-    "@happyvertical/smrt-ui": "0.34.4"
+    "@happyvertical/smrt-languages": "0.34.6",
+    "@happyvertical/smrt-types": "0.34.6",
+    "@happyvertical/smrt-ui": "0.34.6"
   },
   "peerDependencies": {
     "@huggingface/transformers": ">=3.0.0",

package/dist/components/forms/FormGroup.svelte

@@ -1,86 +0,0 @@
-<script lang="ts">
-import type { Snippet } from 'svelte';
-import {
-  type FormGroupContextValue,
-  nextFieldId,
-  setFormGroupContext,
-} from '../../state/form-group-context.js';
-
-export interface Props {
-  label: string;
-  id?: string;
-  error?: string;
-  hint?: string;
-  required?: boolean;
-  children: Snippet;
-}
-
-const { label, id, error, hint, required = false, children }: Props = $props();
-
-// Stable id so the label's `for` and the wrapped input's `id` agree even when
-// the consumer doesn't pass one.
-const fallbackId = nextFieldId();
-const fieldId = $derived(id ?? fallbackId);
-const hintId = $derived(hint && !error ? `${fieldId}-hint` : undefined);
-const errorId = $derived(error ? `${fieldId}-error` : undefined);
-const describedBy = $derived(
-  [hintId, errorId].filter(Boolean).join(' ') || undefined,
-);
-
-// Publish the wiring a base input auto-applies (getter stays reactive as
-// hint/error change).
-setFormGroupContext(
-  (): FormGroupContextValue => ({
-    inputId: fieldId,
-    describedBy,
-    invalid: !!error,
-  }),
-);
-</script>
-
-<div class="form-group">
-	<label for={fieldId} class="form-label">
-		{label}
-		{#if required}
-			<span class="required" aria-hidden="true">*</span>
-		{/if}
-	</label>
-	{@render children()}
-	{#if hintId}
-		<p id={hintId} class="form-hint">{hint}</p>
-	{/if}
-	{#if errorId}
-		<p id={errorId} class="form-error" role="alert">{error}</p>
-	{/if}
-</div>
-
-<style>
-	.form-group {
-		margin-bottom: 1rem;
-	}
-
-	.form-label {
-		display: block;
-		font-size: var(--smrt-typography-label-large-size, 0.875rem);
-		font-weight: var(--smrt-typography-weight-medium, 500);
-		color: var(--smrt-color-on-surface, #374151);
-		margin-bottom: 0.375rem;
-	}
-
-	.required {
-		color: var(--smrt-color-error, #ba1a1a);
-		margin-left: 0.125rem;
-	}
-
-	.form-hint {
-		margin: 0.25rem 0 0;
-		font-size: var(--smrt-typography-body-small-size, 0.75rem);
-		color: var(--smrt-color-on-surface-variant, #6b7280);
-	}
-
-	.form-error {
-		margin: 0.25rem 0 0;
-		font-size: var(--smrt-typography-body-small-size, 0.75rem);
-		color: var(--smrt-color-error, #ba1a1a);
-	}
-</style>

package/dist/components/forms/FormGroup.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { Snippet } from 'svelte';
-export interface Props {
-    label: string;
-    id?: string;
-    error?: string;
-    hint?: string;
-    required?: boolean;
-    children: Snippet;
-}
-declare const FormGroup: import("svelte").Component<Props, {}, "">;
-type FormGroup = ReturnType<typeof FormGroup>;
-export default FormGroup;
-//# sourceMappingURL=FormGroup.svelte.d.ts.map