@happyvertical/smrt-ui 0.38.25 → 0.39.0

package/AGENTS.md

@@ -14,9 +14,11 @@ SMRT has one shared set of UI primitives, split across two packages by concern:
 
 - **`smrt-ui` (here) owns the domain-agnostic VISUAL primitives** — `Button`,
   `Card`, `Modal`/`ConfirmDialog`, `Badge`, `Avatar`, `Chip`, `Dropdown`,
-  `Tooltip`, `Skeleton`, `Tree`, `Pagination`, `DataTable`, … — **plus the
+  `Tooltip`, `Skeleton`, `Tree`, `Pagination`, `DataTable`, `ContentList`, … — **plus the
   Provider-free base FORM primitives** under `./forms` (`Form`, `Input`,
-  `Select`, `Textarea`, `Toggle`, `FormGroup`), relocated here in #1589's
+  `Select`, `Textarea`, `Checkbox`, `Switch`, `RadioGroup`, `Slider`,
+  `RangeSlider`, `Combobox`, `MultiSelect`, `TagsInput`, `FilePicker`,
+  `FormGroup`), relocated here in #1589's
   deferred-forms phase so domain packages can adopt them without pulling in the
   smrt-svelte Provider or closing a build-graph cycle. These are dependency-free:
   no Provider, no i18n, no spoken-input logic.
@@ -42,16 +44,18 @@ components are exempt — they *are* the primitives.
 | Subpath | Contents |
 |---------|----------|
 | `.` | barrel re-exporting the primitives, registry, and theme system |
-| `./ui` | `Button`, `Card`, `Badge`, `Avatar`, `Chip`, `Skeleton`, `Tooltip`, `Dropdown`, `Tree`, `Pagination`, … |
-| `./feedback` | `Modal`, `ConfirmDialog`, `LoadingOverlay`, `ProgressBar` |
+| `./playground` | shared-host previews for the complete foundation catalog; rendered inside the active preset and color scheme |
+| `./ui` | `Button`, `Card`, `Badge`, `Avatar`, `Chip`, `Skeleton`, `Tooltip`, `Dropdown`/`Menu`, `Popover`, `Disclosure`, `Accordion`, `Tree`, `Pagination`, … |
+| `./feedback` | `Alert`, `ToastViewport`, `Modal`, `Drawer`/`Sheet`, `ConfirmDialog`, `LoadingOverlay`, `Progress`, `Meter`, `Spinner` |
+| `./data` | `CollectionToolbar`, `CollectionList`/`ContentList`, `DataTable` and their types |
 | `./layout` | `Container`, `Grid`, `Header`, `Footer`, `PageHeader`, `EmptyState`, … |
 | `./calendar` | `Calendar`, `DayView` |
 | `./chat` | `MessageBubble`, `ReactionPicker`, `TypingIndicator` |
-| `./forms` | Provider-free base form primitives: `Form`, `Input`, `Select`, `Textarea`, `Toggle`, `FormGroup` (+ the FormGroup a11y context helpers) |
+| `./forms` | Provider-free fields, choice controls, sliders/ranges, combobox/listbox/multiselect/tags, date/time/file controls, plus the transport-neutral control interaction registry |
 | `./i18n` | i18n **client**: `useI18n`, `<Trans>`, `defineMessages`, `renderTemplate` (no `smrt-languages` import — the server resolver stays in `smrt-svelte/i18n/server`) |
 | `./registry` | `ModuleUIRegistry` for cross-package component discovery |
-| `./theme` | simple `ThemeProvider` + context (`useTheme` consumes this from `smrt-svelte`) |
-| `./themes` | canonical preset token system (material/glass/studio/smrt), CSS generation |
+| `./theme` | deprecated compatibility path forwarding to the canonical theme system |
+| `./themes` | canonical `ThemeProvider`, context, preset token system (material/glass/studio/smrt), and CSS generation |
 | `./themes/styles/smrt.css` | static SMRT theme CSS (dark-first amber instrument-panel look) + signature `.smrt-*` flourish utilities |
 | `./themes/styles/fonts.css` | optional self-hosted `@font-face` for the SMRT type stack (Space Grotesk / Inter / JetBrains Mono) |
 | `./styles/tokens.css` | base token stylesheet |
@@ -59,6 +63,14 @@ components are exempt — they *are* the primitives.
 Also internal: `actions/` (`ripple`, `permission`), `display/`, `data/`,
 `nav/`, `permissions/`, `utils/`, `test-support/`.
 
+## Playground
+
+The package publishes `./playground` and keeps its workspace source at
+`src/svelte/playground.ts`. Previews inherit the shared host's active
+Material/Glass/Studio/SMRT preset and light/dark color scheme; preview
+components must consume `--smrt-*` tokens rather than installing their own
+theme provider or static preset stylesheet.
+
 ## Rules
 
 - **No smrt domain imports.** A `@happyvertical/smrt-*` import other than
@@ -73,6 +85,10 @@ Also internal: `actions/` (`ripple`, `permission`), `display/`, `data/`,
   hooks / browser-ai — live in `@happyvertical/smrt-svelte`, which depends on
   this package.
 - Built with `svelte-package`; consumed via the `svelte` export condition.
+- Form controls expose stable `formId` + `controlId` identity through the
+  interaction registry. Keep chat/voice transports outside this package;
+  mutations must retain sensitivity checks and the stage → confirmed apply
+  policy.
 
 ## Gotchas
 

package/README.md

@@ -0,0 +1,132 @@
+# @happyvertical/smrt-ui
+
+The domain-agnostic Svelte 5 component foundation for SMRT. Components use the
+shared `--smrt-*` design tokens, render without a SMRT Provider, and can be used
+by any package or application without pulling domain dependencies into the UI
+layer.
+
+```bash
+pnpm add @happyvertical/smrt-ui
+```
+
+```svelte
+<script lang="ts">
+  import { ThemeProvider } from '@happyvertical/smrt-ui/themes';
+  import { Button } from '@happyvertical/smrt-ui/ui';
+  import { Form, FormGroup, Input, Switch } from '@happyvertical/smrt-ui/forms';
+</script>
+
+<ThemeProvider preset="material" colorScheme="system">
+  <Form formId="profile">
+    <FormGroup label="Display name"><Input name="displayName" /></FormGroup>
+    <Switch name="updates" label="Product updates" />
+    <Button type="submit">Save</Button>
+  </Form>
+</ThemeProvider>
+```
+
+## Foundation catalog
+
+| Area | Components |
+| --- | --- |
+| Fields | `Form`, `Field`/`FormGroup`, `Fieldset`, `InputGroup`, `ErrorSummary` |
+| Text and structured input | `Input`, `Textarea`, `Select`, `Combobox`, `Listbox`, `MultiSelect`, `TagsInput` |
+| Choices | `Checkbox`, `RadioGroup`/`Radio`, `Switch`, `Toggle`, `ToggleButton`, `SegmentedControl` |
+| Values and files | `Slider`, `RangeSlider`, `DatePicker`, `TimePicker`, `FilePicker` |
+| Actions and display | `Button`, `Dropdown`/`Menu`, `Badge`, `Chip`, `Avatar`, `Card`, `Skeleton`, `Tooltip`, `Tree` |
+| Disclosure and overlays | `Popover`, `Disclosure`, `Accordion`/`AccordionItem`, `Modal`, `Drawer`/`Sheet`, `ConfirmDialog` |
+| Feedback | `Alert`, `ToastViewport`, `Progress`, `Meter`, `Spinner`, `LoadingOverlay` |
+| Collections | `CollectionToolbar`, `CollectionList`/`ContentList`, `DataTable`, `Pagination` |
+| Layout and navigation | `Container`, `Grid`, `Header`, `Footer`, `PageHeader`, `EmptyState`, `Tabs`, `FilterChips` |
+
+Use the focused subpaths (`/forms`, `/ui`, `/feedback`, `/data`, `/layout`,
+`/themes`) to keep imports explicit. The package root remains a compatibility
+barrel.
+
+## Component standard
+
+Foundation components follow one contract:
+
+- Native HTML semantics first, with labelled controls, keyboard interaction,
+  focus-visible states, disabled/read-only handling, and reduced-motion rules.
+- Svelte 5 bindable state plus explicit change callbacks for controlled use.
+- SSR-safe IDs from `$props.id()` and stable `name`-based interaction identity.
+- Styling only through semantic `--smrt-*` tokens; no component owns a theme.
+- Loading, empty, invalid, indeterminate, and disabled states are visible and
+  announced where applicable.
+- Provider-free implementation and no domain imports.
+- Focused interaction tests and axe checks for composed controls.
+
+Application-specific editors, maps, charts, media workbenches, and domain
+records remain composites built from this foundation rather than generic base
+components.
+
+## Agent-addressable forms
+
+`Form` can expose its controls to a chat, voice, tutorial, or test adapter
+without coupling controls to a transport:
+
+```svelte
+<script lang="ts">
+  import {
+    Form,
+    FormGroup,
+    Input,
+    createControlInteractionRegistry,
+  } from '@happyvertical/smrt-ui/forms';
+
+  const registry = createControlInteractionRegistry();
+
+  async function proposeName() {
+    await registry.execute(
+      {
+        action: 'stage',
+        identity: { formId: 'profile', controlId: 'displayName' },
+        value: 'Ada Lovelace',
+      },
+      { source: 'agent' },
+    );
+  }
+</script>
+
+<Form formId="profile" interactionRegistry={registry}>
+  <FormGroup label="Display name">
+    <Input name="displayName" />
+  </FormGroup>
+</Form>
+```
+
+Controls publish serializable metadata, constraints, options, sensitivity, and
+capabilities. Adapters can focus, reveal, highlight, explain, validate, stage,
+apply, clear, or undo. Agent mutations are denied for secret/read-only controls
+and require explicit confirmation before apply, clear, or undo. Staging is
+separate so the UI can show a proposal before it changes user state.
+
+## Themes
+
+`@happyvertical/smrt-ui/themes` is the canonical theme API and includes the
+Material, Glass, Studio, and SMRT presets. The old `/theme` path forwards to the
+same provider and context for compatibility.
+
+```svelte
+<script>
+  import { ThemeProvider } from '@happyvertical/smrt-ui/themes';
+  import '@happyvertical/smrt-ui/themes/styles/fonts.css';
+</script>
+
+<ThemeProvider preset="smrt" colorScheme="dark">
+  {@render children()}
+</ThemeProvider>
+```
+
+Run the shared playground to inspect the full catalog under every preset and
+light/dark scheme.
+
+## Development
+
+```bash
+pnpm check
+pnpm test
+pnpm build
+pnpm verify:pack
+```

package/dist/components/data/CollectionList.svelte

@@ -0,0 +1,106 @@
+<script lang="ts" generics="T">
+import type { Snippet } from 'svelte';
+
+export interface Props<T> {
+  items: T[];
+  itemKey?: keyof T | ((item: T) => string | number);
+  title?: keyof T | ((item: T) => string);
+  description?: keyof T | ((item: T) => string | undefined);
+  layout?: 'list' | 'grid';
+  selectable?: boolean;
+  selected?: Set<string | number>;
+  loading?: boolean;
+  item?: Snippet<[{ item: T; index: number; selected: boolean }]>;
+  actions?: Snippet<[{ item: T; index: number }]>;
+  empty?: Snippet;
+  onselectionchange?: (selected: Set<string | number>) => void;
+  onitemclick?: (item: T, index: number) => void;
+  class?: string;
+}
+
+let {
+  items,
+  itemKey,
+  title,
+  description,
+  layout = 'list',
+  selectable = false,
+  selected = $bindable(new Set<string | number>()),
+  loading = false,
+  item,
+  actions,
+  empty,
+  onselectionchange,
+  onitemclick,
+  class: className = '',
+}: Props<T> = $props();
+
+function keyOf(entry: T, index: number): string | number {
+  if (!itemKey) return index;
+  return typeof itemKey === 'function'
+    ? itemKey(entry)
+    : (entry[itemKey] as string | number);
+}
+
+function textOf(
+  entry: T,
+  accessor: keyof T | ((item: T) => string | undefined) | undefined,
+): string | undefined {
+  if (!accessor) return undefined;
+  return typeof accessor === 'function'
+    ? accessor(entry)
+    : String(entry[accessor] ?? '');
+}
+
+function toggle(key: string | number) {
+  const next = new Set(selected);
+  next.has(key) ? next.delete(key) : next.add(key);
+  selected = next;
+  onselectionchange?.(next);
+}
+</script>
+
+{#if loading}
+  <div class="loading" role="status"><span class="spinner" aria-hidden="true"></span>Loading…</div>
+{:else if items.length === 0}
+  <div class="empty">{#if empty}{@render empty()}{:else}No items available{/if}</div>
+{:else}
+  <ul class="collection collection--{layout} {className}">
+    {#each items as entry, index (keyOf(entry, index))}
+      {@const key = keyOf(entry, index)}
+      {@const isSelected = selected.has(key)}
+      {@const itemTitle = textOf(entry, title) ?? `Item ${index + 1}`}
+      <li class:selected={isSelected}>
+        {#if selectable}<input type="checkbox" checked={isSelected} aria-label={`Select ${itemTitle}`} onchange={() => toggle(key)} />{/if}
+        {#if onitemclick}
+          <button type="button" class="main" onclick={() => onitemclick?.(entry, index)}>
+            {#if item}{@render item({ item: entry, index, selected: isSelected })}{:else}<strong>{itemTitle}</strong>{#if description}<span>{textOf(entry, description)}</span>{/if}{/if}
+          </button>
+        {:else}
+          <div class="main">
+            {#if item}{@render item({ item: entry, index, selected: isSelected })}{:else}<strong>{itemTitle}</strong>{#if description}<span>{textOf(entry, description)}</span>{/if}{/if}
+          </div>
+        {/if}
+        {#if actions}<div class="actions">{@render actions({ item: entry, index })}</div>{/if}
+      </li>
+    {/each}
+  </ul>
+{/if}
+
+<style>
+  .collection { display: grid; gap: var(--smrt-spacing-2); margin: 0; padding: 0; list-style: none; }
+  .collection--grid { grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
+  li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--smrt-spacing-3); min-width: 0; padding: var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); }
+  li.selected { border-color: var(--smrt-color-primary); background: var(--smrt-color-primary-container); }
+  input { width: 1.125rem; height: 1.125rem; accent-color: var(--smrt-color-primary); }
+  .main { display: grid; min-width: 0; gap: var(--smrt-spacing-1); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
+  button.main { width: 100%; cursor: pointer; }
+  button.main:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 3px; }
+  .main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--smrt-typography-title-small-font); }
+  .main span { color: var(--smrt-color-on-surface-variant); }
+  .actions { display: flex; gap: var(--smrt-spacing-1); }
+  .loading, .empty { display: flex; min-height: 8rem; align-items: center; justify-content: center; gap: var(--smrt-spacing-2); color: var(--smrt-color-on-surface-variant); }
+  .spinner { width: 1rem; height: 1rem; border: 2px solid var(--smrt-color-outline-variant); border-top-color: var(--smrt-color-primary); border-radius: 50%; animation: spin .8s linear infinite; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } }
+</style>

package/dist/components/data/CollectionList.svelte.d.ts

@@ -0,0 +1,49 @@
+import type { Snippet } from 'svelte';
+export interface Props<T> {
+    items: T[];
+    itemKey?: keyof T | ((item: T) => string | number);
+    title?: keyof T | ((item: T) => string);
+    description?: keyof T | ((item: T) => string | undefined);
+    layout?: 'list' | 'grid';
+    selectable?: boolean;
+    selected?: Set<string | number>;
+    loading?: boolean;
+    item?: Snippet<[{
+        item: T;
+        index: number;
+        selected: boolean;
+    }]>;
+    actions?: Snippet<[{
+        item: T;
+        index: number;
+    }]>;
+    empty?: Snippet;
+    onselectionchange?: (selected: Set<string | number>) => void;
+    onitemclick?: (item: T, index: number) => void;
+    class?: string;
+}
+declare function $$render<T>(): {
+    props: Props<T>;
+    exports: {};
+    bindings: "selected";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "selected";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const CollectionList: $$IsomorphicComponent;
+type CollectionList<T> = InstanceType<typeof CollectionList<T>>;
+export default CollectionList;
+//# sourceMappingURL=CollectionList.svelte.d.ts.map

package/dist/components/data/CollectionList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionList.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/data/CollectionList.svelte.ts"],"names":[],"mappings":"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"}

package/dist/components/data/CollectionToolbar.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import Input from '../forms/Input.svelte';
+import SegmentedControl from '../forms/SegmentedControl.svelte';
+
+export interface Props {
+  search?: string;
+  searchLabel?: string;
+  searchPlaceholder?: string;
+  view?: 'list' | 'grid' | 'table';
+  views?: Array<'list' | 'grid' | 'table'>;
+  resultCount?: number;
+  selectedCount?: number;
+  filters?: Snippet;
+  actions?: Snippet;
+  bulkActions?: Snippet;
+  onsearchchange?: (value: string) => void;
+  onviewchange?: (view: 'list' | 'grid' | 'table') => void;
+  class?: string;
+}
+
+let {
+  search = $bindable(''),
+  searchLabel = 'Search',
+  searchPlaceholder = 'Search…',
+  view = $bindable('list'),
+  views = ['list', 'grid'],
+  resultCount,
+  selectedCount = 0,
+  filters,
+  actions,
+  bulkActions,
+  onsearchchange,
+  onviewchange,
+  class: className = '',
+}: Props = $props();
+
+const viewOptions = $derived(
+  views.map((value) => ({
+    value,
+    label: value[0].toUpperCase() + value.slice(1),
+  })),
+);
+
+function changeView(next: string | number) {
+  view = String(next) as typeof view;
+  onviewchange?.(view);
+}
+</script>
+
+<div class="toolbar {className}" role="search">
+  <div class="search">
+    <Input type="search" name="collection-search" aria-label={searchLabel} placeholder={searchPlaceholder} bind:value={search} oninput={(event) => onsearchchange?.(event.currentTarget.value)} />
+  </div>
+  {#if filters}<div class="filters">{@render filters()}</div>{/if}
+  {#if resultCount !== undefined}<span class="count" aria-live="polite">{resultCount} {resultCount === 1 ? 'result' : 'results'}</span>{/if}
+  <span class="spacer"></span>
+  {#if selectedCount > 0 && bulkActions}<div class="bulk"><span>{selectedCount} selected</span>{@render bulkActions()}</div>{/if}
+  {#if actions}<div class="actions">{@render actions()}</div>{/if}
+  {#if viewOptions.length > 1}
+    <SegmentedControl label="View" options={viewOptions} value={view} interaction={false} onvaluechange={changeView} />
+  {/if}
+</div>
+
+<style>
+  .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-2) 0; color: var(--smrt-color-on-surface); }
+  .search { flex: 1 1 14rem; max-width: 24rem; }
+  .filters, .actions, .bulk { display: flex; align-items: center; gap: var(--smrt-spacing-2); }
+  .bulk { padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border-radius: var(--smrt-radius-small); background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); }
+  .count { color: var(--smrt-color-on-surface-variant); font: var(--smrt-typography-label-medium-font); }
+  .spacer { flex: 1; }
+</style>

package/dist/components/data/CollectionToolbar.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    search?: string;
+    searchLabel?: string;
+    searchPlaceholder?: string;
+    view?: 'list' | 'grid' | 'table';
+    views?: Array<'list' | 'grid' | 'table'>;
+    resultCount?: number;
+    selectedCount?: number;
+    filters?: Snippet;
+    actions?: Snippet;
+    bulkActions?: Snippet;
+    onsearchchange?: (value: string) => void;
+    onviewchange?: (view: 'list' | 'grid' | 'table') => void;
+    class?: string;
+}
+declare const CollectionToolbar: import("svelte").Component<Props, {}, "view" | "search">;
+type CollectionToolbar = ReturnType<typeof CollectionToolbar>;
+export default CollectionToolbar;
+//# sourceMappingURL=CollectionToolbar.svelte.d.ts.map

package/dist/components/data/CollectionToolbar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionToolbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/data/CollectionToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACjC,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsDD,QAAA,MAAM,iBAAiB,0DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}