@happyvertical/smrt-svelte 0.38.26 → 0.39.0

package/AGENTS.md

@@ -81,6 +81,7 @@ the top-of-stack, domain-aware pieces:
 | AI | `Provider`, `AILoadingOverlay`, `CapabilityGate`, `DownloadProgress`, `STTTest`, `VoiceInput` |
 | Forms (`/forms`) | `TextInput`, `Select`, `MoneyInput`, `DateTimeInput`, `Toggle`, `FileUpload`, `AddressInput`, + more (AI-wired inputs use the hooks/browser-ai here) |
 | Module | `ModulePanel` |
+| Settings (`/settings`) | `SettingsCatalog`, `paginateSettingsCatalog` |
 | Workspace (`/workspace`) | `WorkspaceShell`, `NavTree`, `Breadcrumbs`, `ToolsDock`, `RoleShell` |
 
 ### Gap primitives & S10 consolidation (L3 #1422)
@@ -120,6 +121,7 @@ library. Which barrel for what:
 | `Container`, `Grid`, `Header`, `Footer`, `PageHeader`, `EmptyState` | `@happyvertical/smrt-svelte/layout` |
 | Chat message bubble, reaction picker, typing indicator | `@happyvertical/smrt-svelte/chat` |
 | Admin shell, nav tree, breadcrumbs, tools dock | `@happyvertical/smrt-svelte/workspace` |
+| Server-paged settings search, selection, and list/detail layout | `@happyvertical/smrt-svelte/settings` |
 
 The package root re-exports `./ui`, `./forms`, etc., so `from
 '@happyvertical/smrt-svelte'` also works; prefer the specific subpath in domain
@@ -236,6 +238,26 @@ await expectNoA11yViolations(container); // axe; color-contrast off (jsdom has n
 - `@happyvertical/logger` (SDK) is a `dependency` — the console logger used for voice/AI error reporting in the form components. Consume it **only** through `src/internal/logger.ts`, never `createLogger()` at module scope: `createLogger()` reads `HAVE_LOGGER_LEVEL` from `process.env`, so a top-level call throws `ReferenceError: process is not defined` in the browser and kills client-side hydration under `vite dev` (prod builds tree-shake/define it away, so this only bites in dev). The `internal/logger` wrapper constructs the logger lazily and falls back to a bare `ConsoleLogger` when `process.env` is absent, keeping this browser-reachable module (imported by `Provider` + the form primitives) safe.
 - Peer (all optional): `svelte` >=5.18.2, plus the browser-AI engines (`@huggingface/transformers`, `@mlc-ai/web-llm`, `@remotion/whisper-web`, `@xenova/transformers`) and `chrono-node`.
 
+## Scalable settings catalog (`./settings`)
+
+`SettingsCatalog` is the shared search/browse/select/edit shell for large
+code-first or database-backed settings registries. Its interface accepts a
+server-produced `SettingsCatalogPage`: callers keep transport, authorization,
+and domain-specific editor forms, while the module owns compact result rows,
+GET search, query-preserving selection links, bounded pagination, result counts,
+empty states, and responsive list/detail layout.
+
+`paginateSettingsCatalog()` is the optional server helper for definitions that
+already live in memory (prompt and language registries). It searches before
+paging, clamps pages, caps rendered slices at 100 rows, and selects only one
+detail item. Database-backed callers should query their own page and construct
+the same `SettingsCatalogPage` interface directly rather than loading every row.
+
+The summary-row type and selected-detail type may differ: list pages can remain
+cheap while only the selected definition is fully resolved. This is the
+scalability contract; do not resolve every settings editor before passing data
+to the catalog.
+
 ## AdminShell workspace surface
 
 The `./workspace` subpath (`src/components/workspace/`) is the canonical

package/README.md

@@ -37,17 +37,17 @@ pnpm add @happyvertical/smrt-svelte
 <Toggle label="Active" bind:checked={active} />
 ```
 
-### UI Components
+### UI Foundation
 
 ```svelte
 <script>
-  import { Button, Card, Badge, Pagination } from '@happyvertical/smrt-svelte/ui';
-  import { DataTable } from '@happyvertical/smrt-svelte';
+  import { Button, Card, Badge, Pagination } from '@happyvertical/smrt-ui/ui';
+  import { DataTable } from '@happyvertical/smrt-ui/data';
 </script>
 
 <Card>
-  <DataTable columns={cols} rows={data} />
-  <Pagination total={100} page={1} perPage={20} />
+  <DataTable columns={cols} data={rows} pageSize={20} />
+  <Pagination currentPage={1} totalPages={5} />
 </Card>
 ```
 
@@ -72,7 +72,7 @@ pnpm add @happyvertical/smrt-svelte
 
 ```svelte
 <script>
-  import { ThemeProvider } from '@happyvertical/smrt-svelte/themes';
+  import { ThemeProvider } from '@happyvertical/smrt-ui/themes';
 </script>
 
 <ThemeProvider preset="glass" colorScheme="system">
@@ -151,7 +151,9 @@ scaffold adopts AdminShell as its default chrome exactly this way; copy its
 | `@happyvertical/smrt-svelte/forms` | Form inputs (TextInput, Select, MoneyInput, etc.) |
 | `@happyvertical/smrt-svelte/layout` | Layout (Container, Grid, Header, Footer, Masthead, etc.) |
 | `@happyvertical/smrt-svelte/ui` | UI primitives (Button, Card, Badge, Pagination) |
-| `@happyvertical/smrt-svelte/themes` | ThemeProvider, presets (material/glass/studio), CSS generation |
+| `@happyvertical/smrt-ui/themes` | Canonical ThemeProvider, Material/Glass/Studio/SMRT presets, CSS generation |
+| `@happyvertical/smrt-ui/forms` | Provider-free foundational form controls and the agent interaction registry |
+| `@happyvertical/smrt-ui/data` | DataTable, CollectionList/ContentList, CollectionToolbar |
 | `@happyvertical/smrt-svelte/registry` | ModuleUIRegistry for agent admin panels |
 | `@happyvertical/smrt-svelte/workspace` | AdminShell, ShellState, tenant nav, focus tools, settings, activities, and system/app panels |
 | `@happyvertical/smrt-svelte/browser-ai` | Browser AI client (STT/TTS/LLM adapters, capability detection) |

package/dist/components/forms/Form.svelte

@@ -1,4 +1,11 @@
 <script lang="ts">
+import {
+  type ControlInteractionEvent,
+  type ControlInteractionRegistry,
+  type ControlKind,
+  createControlInteractionRegistry,
+  setControlInteractionContext,
+} from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import type { Snippet } from 'svelte';
 import { onDestroy } from 'svelte';
@@ -34,6 +41,13 @@ export interface Props {
   method?: 'GET' | 'POST';
   /** Form action URL for native form submission */
   action?: string;
+  /** Stable identity used by control/agent interaction adapters. */
+  formId?: string;
+  interactionRegistry?: ControlInteractionRegistry;
+  oninteraction?: (event: ControlInteractionEvent) => void;
+  id?: string;
+  name?: string;
+  class?: string;
 }
 
 const {
@@ -46,10 +60,38 @@ const {
   onsubmit,
   method,
   action,
+  formId,
+  interactionRegistry,
+  oninteraction,
+  id,
+  name,
+  class: className = '',
 }: Props = $props();
 
 const app = useAppState();
 const stt = useSTT();
+const instanceId = $props.id();
+const generatedFormId = `smrt-form-${instanceId}`;
+const localInteractionRegistry = createControlInteractionRegistry();
+const resolvedFormId = $derived(formId ?? id ?? name ?? generatedFormId);
+const resolvedInteractionRegistry = $derived(
+  interactionRegistry ?? localInteractionRegistry,
+);
+const interactionDisposers = new Map<string, () => void>();
+
+setControlInteractionContext({
+  get formId() {
+    return resolvedFormId;
+  },
+  get registry() {
+    return resolvedInteractionRegistry;
+  },
+});
+
+$effect(() => {
+  if (!oninteraction) return;
+  return resolvedInteractionRegistry.subscribe(oninteraction);
+});
 
 // Internal state
 let fields = $state<Map<string, FieldDefinition>>(new Map());
@@ -66,16 +108,64 @@ let levelMonitorStream: MediaStream | null = null;
 
 const isSmrt = $derived(app.state.mode === 'smrt');
 
+function interactionKind(field: FieldDefinition): ControlKind {
+  if (field.interactionKind) return field.interactionKind;
+  switch (field.type) {
+    case 'text':
+    case 'email':
+    case 'number':
+    case 'checkbox':
+    case 'select':
+    case 'textarea':
+      return field.type;
+    case 'datetime':
+      return 'datetime';
+    default:
+      return 'custom';
+  }
+}
+
 // Create form context
 const formContext: SMRTFormContext = {
   get mode() {
     return app.state.mode === 'smrt' ? 'smrt' : 'default';
   },
   registerField(field: FieldDefinition) {
+    interactionDisposers.get(field.name)?.();
     fields.set(field.name, field);
     fields = new Map(fields); // Trigger reactivity
+    interactionDisposers.set(
+      field.name,
+      resolvedInteractionRegistry.register({
+        identity: {
+          formId: resolvedFormId,
+          controlId: field.controlId ?? field.name,
+        },
+        metadata: {
+          kind: interactionKind(field),
+          label: field.label,
+          description: field.description,
+          sensitivity: field.sensitivity ?? 'public',
+          readable: field.readable,
+          writable: field.writable,
+          constraints: field.constraints,
+          options: field.options,
+          unit: field.unit,
+        },
+        getValue: field.getValue,
+        setValue: field.setValue,
+        clear: field.clear ?? (() => field.setValue('')),
+        focus: field.focus,
+        reveal: field.reveal,
+        highlight: field.highlight,
+        validate: field.validate,
+        getState: field.getState,
+      }),
+    );
   },
   unregisterField(name: string) {
+    interactionDisposers.get(name)?.();
+    interactionDisposers.delete(name);
     fields.delete(name);
     fields = new Map(fields);
   },
@@ -89,6 +179,12 @@ const formContext: SMRTFormContext = {
     return isExtracting;
   },
   toggleListening: () => toggleFormListening(),
+  get interactionRegistry() {
+    return resolvedInteractionRegistry;
+  },
+  get formId() {
+    return resolvedFormId;
+  },
 };
 
 // Provide context to children
@@ -498,6 +594,8 @@ onDestroy(() => {
     clearTimeout(silenceTimer);
   }
   stopAudioLevelMonitoring();
+  for (const dispose of interactionDisposers.values()) dispose();
+  interactionDisposers.clear();
 });
 
 function handleModeToggle() {
@@ -519,16 +617,28 @@ function handleSubmit(e: Event) {
   // Otherwise, let native form submission happen (e.g., for SvelteKit use:enhance)
 }
 
-function getFormData(): Record<string, unknown> {
+export function getFormData(): Record<string, unknown> {
   const data: Record<string, unknown> = {};
   for (const [name, field] of fields) {
     data[name] = field.getValue();
   }
   return data;
 }
+
+export function getInteractionRegistry(): ControlInteractionRegistry {
+  return resolvedInteractionRegistry;
+}
 </script>
 
-<form class="smrt-form" onsubmit={handleSubmit} {method} {action}>
+<form
+  {id}
+  {name}
+  class="smrt-form {className}"
+  data-smrt-form={resolvedFormId}
+  onsubmit={handleSubmit}
+  {method}
+  {action}
+>
   <!--
     Screen-reader status region (L1 #1420): announces async STT / field-
     extraction state politely, since the visible cues live on a button whose

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

@@ -1,3 +1,4 @@
+import { type ControlInteractionEvent, type ControlInteractionRegistry } from '@happyvertical/smrt-ui/forms';
 import type { Snippet } from 'svelte';
 import type { LLMModelId, STTAdapterType } from './types.js';
 export interface Props {
@@ -19,8 +20,18 @@ export interface Props {
     method?: 'GET' | 'POST';
     /** Form action URL for native form submission */
     action?: string;
+    /** Stable identity used by control/agent interaction adapters. */
+    formId?: string;
+    interactionRegistry?: ControlInteractionRegistry;
+    oninteraction?: (event: ControlInteractionEvent) => void;
+    id?: string;
+    name?: string;
+    class?: string;
 }
-declare const Form: import("svelte").Component<Props, {}, "">;
+declare const Form: import("svelte").Component<Props, {
+    getFormData: () => Record<string, unknown>;
+    getInteractionRegistry: () => ControlInteractionRegistry;
+}, "">;
 type Form = ReturnType<typeof Form>;
 export default Form;
 //# sourceMappingURL=Form.svelte.d.ts.map

package/dist/components/forms/Form.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Form.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAWtC,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAG7D,MAAM,WAAW,KAAK;IACpB,oBAAoB;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oCAAoC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB;IACvB,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACnD,4DAA4D;IAC5D,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA8jBD,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Form.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Form.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAIhC,MAAM,8BAA8B,CAAC;AAEtC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAWtC,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAG7D,MAAM,WAAW,KAAK;IACpB,oBAAoB;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oCAAoC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB;IACvB,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACnD,4DAA4D;IAC5D,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,0BAA0B,CAAC;IACjD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACzD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAupBD,QAAA,MAAM,IAAI;uBAhFe,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;kCAQZ,0BAA0B;MAwEZ,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/settings/SettingsCatalog.svelte

@@ -0,0 +1,283 @@
+<script lang="ts" generics="T extends SettingsCatalogItem, D extends { id: string } = T">
+import { Form, Input } from '@happyvertical/smrt-ui/forms';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import type { Snippet } from 'svelte';
+import { M } from '../../i18n/strings.settings.js';
+import type { SettingsCatalogItem, SettingsCatalogPage } from './types.js';
+
+interface Props<T extends SettingsCatalogItem, D extends { id: string }> {
+  page: SettingsCatalogPage<T, D>;
+  baseUrl: string;
+  detail: Snippet<[{ item: D }]>;
+  searchPlaceholder?: string;
+  searchLabel?: string;
+  resultsLabel?: string;
+  emptyLabel?: string;
+  selectionLabel?: string;
+  preservedParams?: Record<string, string>;
+}
+
+let {
+  page,
+  baseUrl,
+  detail,
+  searchPlaceholder,
+  searchLabel,
+  resultsLabel,
+  emptyLabel,
+  selectionLabel,
+  preservedParams = {},
+}: Props<T, D> = $props();
+
+const { t } = useI18n();
+const totalPages = $derived(Math.max(1, Math.ceil(page.total / page.pageSize)));
+const rangeStart = $derived(
+  page.total === 0 ? 0 : (page.page - 1) * page.pageSize + 1,
+);
+const rangeEnd = $derived(Math.min(page.total, page.page * page.pageSize));
+
+function catalogHref(targetPage: number, selectedId?: string): string {
+  const params = new URLSearchParams(preservedParams);
+  if (page.query) params.set('q', page.query);
+  if (targetPage > 1) params.set('page', String(targetPage));
+  if (selectedId) params.set('selected', selectedId);
+  const query = params.toString();
+  return query ? `${baseUrl}?${query}` : baseUrl;
+}
+</script>
+
+<section class="smrt-settings-catalog">
+  <aside class="smrt-settings-catalog__browser">
+    <Form method="GET" action={baseUrl} preventDefault={false} class="smrt-settings-catalog__search" role="search">
+      {#each Object.entries(preservedParams) as [name, value] (name)}
+        <Input type="hidden" {name} {value} />
+      {/each}
+      <label for="smrt-settings-catalog-query" class="smrt-settings-catalog__sr-only">
+        {searchLabel ?? t(M['ui.settings_catalog.search'])}
+      </label>
+      <Input
+        id="smrt-settings-catalog-query"
+        type="search"
+        name="q"
+        value={page.query}
+        placeholder={searchPlaceholder ?? t(M['ui.settings_catalog.search'])}
+      />
+      <Button type="submit" size="sm">
+        {t(M['ui.settings_catalog.search_action'])}
+      </Button>
+    </Form>
+
+    <div class="smrt-settings-catalog__summary">
+      <span>
+        {t(M['ui.settings_catalog.result_range'], {
+          start: rangeStart,
+          end: rangeEnd,
+          total: page.total,
+        })}
+      </span>
+    </div>
+
+    <nav
+      class="smrt-settings-catalog__results"
+      aria-label={resultsLabel ?? t(M['ui.settings_catalog.results'])}
+    >
+      {#each page.items as item (item.id)}
+        <a
+          href={catalogHref(page.page, item.id)}
+          class:smrt-settings-catalog__result--active={page.selected?.id === item.id}
+          aria-current={page.selected?.id === item.id ? 'true' : undefined}
+        >
+          {#if item.eyebrow}
+            <small>{item.eyebrow}</small>
+          {/if}
+          <strong>{item.label}</strong>
+          {#if item.description}
+            <span>{item.description}</span>
+          {/if}
+          {#if item.status}
+            <span class="smrt-settings-catalog__status">{item.status}</span>
+          {/if}
+        </a>
+      {:else}
+        <p class="smrt-settings-catalog__empty">
+          {emptyLabel ?? t(M['ui.settings_catalog.no_results'])}
+        </p>
+      {/each}
+    </nav>
+
+    {#if totalPages > 1}
+      <nav
+        class="smrt-settings-catalog__pager"
+        aria-label={t(M['ui.settings_catalog.pagination'])}
+      >
+        {#if page.page > 1}
+          <Button href={catalogHref(page.page - 1)} variant="ghost" size="sm">
+            {t(M['ui.settings_catalog.previous'])}
+          </Button>
+        {:else}
+          <span></span>
+        {/if}
+        <span>{page.page} / {totalPages}</span>
+        {#if page.page < totalPages}
+          <Button href={catalogHref(page.page + 1)} variant="ghost" size="sm">
+            {t(M['ui.settings_catalog.next'])}
+          </Button>
+        {:else}
+          <span></span>
+        {/if}
+      </nav>
+    {/if}
+  </aside>
+
+  <div class="smrt-settings-catalog__detail">
+    {#if page.selected}
+      {@render detail({ item: page.selected })}
+    {:else}
+      <p>{selectionLabel ?? t(M['ui.settings_catalog.select_item'])}</p>
+    {/if}
+  </div>
+</section>
+
+<style>
+  .smrt-settings-catalog {
+    display: grid;
+    grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
+    gap: var(--smrt-spacing-5);
+    align-items: start;
+    min-width: 0;
+  }
+
+  :global(.smrt-settings-catalog__search) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: var(--smrt-spacing-2);
+    align-items: center;
+  }
+
+  .smrt-settings-catalog__browser,
+  .smrt-settings-catalog__detail {
+    min-width: 0;
+  }
+
+  .smrt-settings-catalog__browser {
+    position: sticky;
+    top: var(--smrt-spacing-4);
+    display: grid;
+    gap: var(--smrt-spacing-3);
+  }
+
+  .smrt-settings-catalog__summary {
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-typography-label-medium-size);
+  }
+
+  .smrt-settings-catalog__results {
+    display: grid;
+    max-block-size: min(42rem, calc(100vh - 19rem));
+    overflow-y: auto;
+    border-block: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .smrt-settings-catalog__results a {
+    position: relative;
+    display: grid;
+    gap: var(--smrt-spacing-1);
+    min-width: 0;
+    padding: var(--smrt-spacing-3);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .smrt-settings-catalog__results a:hover,
+  .smrt-settings-catalog__results a.smrt-settings-catalog__result--active {
+    background: var(--smrt-color-surface-container-high);
+  }
+
+  .smrt-settings-catalog__results a.smrt-settings-catalog__result--active::before {
+    position: absolute;
+    inset-block: var(--smrt-spacing-2);
+    inset-inline-start: 0;
+    inline-size: 3px;
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-primary);
+    content: '';
+  }
+
+  .smrt-settings-catalog__results small,
+  .smrt-settings-catalog__results span,
+  .smrt-settings-catalog__results .smrt-settings-catalog__status {
+    overflow: hidden;
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-typography-label-medium-size);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .smrt-settings-catalog__results strong {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .smrt-settings-catalog__results .smrt-settings-catalog__status {
+    color: var(--smrt-color-primary);
+  }
+
+  .smrt-settings-catalog__empty,
+  .smrt-settings-catalog__detail > p {
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .smrt-settings-catalog__empty {
+    padding: var(--smrt-spacing-4) var(--smrt-spacing-3);
+  }
+
+  .smrt-settings-catalog__pager {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    gap: var(--smrt-spacing-2);
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-typography-label-medium-size);
+  }
+
+  .smrt-settings-catalog__pager :global(a:last-child) {
+    justify-self: end;
+  }
+
+  .smrt-settings-catalog__detail {
+    border: 1px solid var(--smrt-color-outline);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-surface);
+    padding: var(--smrt-spacing-4);
+  }
+
+  .smrt-settings-catalog__sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (max-width: 760px) {
+    .smrt-settings-catalog {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .smrt-settings-catalog__browser {
+      position: static;
+    }
+
+    .smrt-settings-catalog__results {
+      max-block-size: 18rem;
+    }
+  }
+</style>

package/dist/components/settings/SettingsCatalog.svelte.d.ts

@@ -0,0 +1,52 @@
+import type { Snippet } from 'svelte';
+import type { SettingsCatalogItem, SettingsCatalogPage } from './types.js';
+interface Props<T extends SettingsCatalogItem, D extends {
+    id: string;
+}> {
+    page: SettingsCatalogPage<T, D>;
+    baseUrl: string;
+    detail: Snippet<[{
+        item: D;
+    }]>;
+    searchPlaceholder?: string;
+    searchLabel?: string;
+    resultsLabel?: string;
+    emptyLabel?: string;
+    selectionLabel?: string;
+    preservedParams?: Record<string, string>;
+}
+declare function $$render<T extends SettingsCatalogItem, D extends {
+    id: string;
+} = T>(): {
+    props: Props<T, D>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends SettingsCatalogItem, D extends {
+    id: string;
+} = T> {
+    props(): ReturnType<typeof $$render<T, D>>['props'];
+    events(): ReturnType<typeof $$render<T, D>>['events'];
+    slots(): ReturnType<typeof $$render<T, D>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends SettingsCatalogItem, D extends {
+        id: string;
+    } = T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, D>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, D>['props']>, ReturnType<__sveltets_Render<T, D>['events']>, ReturnType<__sveltets_Render<T, D>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, D>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, D>['exports']>;
+    <T extends SettingsCatalogItem, D extends {
+        id: string;
+    } = T>(internal: unknown, props: ReturnType<__sveltets_Render<T, D>['props']> & {}): ReturnType<__sveltets_Render<T, D>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const SettingsCatalog: $$IsomorphicComponent;
+type SettingsCatalog<T extends SettingsCatalogItem, D extends {
+    id: string;
+} = T> = InstanceType<typeof SettingsCatalog<T, D>>;
+export default SettingsCatalog;
+//# sourceMappingURL=SettingsCatalog.svelte.d.ts.map

package/dist/components/settings/SettingsCatalog.svelte.d.ts.map

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