@happyvertical/smrt-ui 0.55.3 → 0.55.4

package/AGENTS.md

@@ -17,7 +17,7 @@ SMRT has one shared set of UI primitives, split across two packages by concern:
   `Tooltip`, `Skeleton`, `Tree`, `Pagination`, `DataTable`, `ContentList`, … — **plus the
   Provider-free base FORM primitives** under `./forms` (`Form`, `Input`,
   `Select`, `Textarea`, `Checkbox`, `Switch`, `RadioGroup`, `Slider`,
-  `RangeSlider`, `Combobox`, `MultiSelect`, `TagsInput`, `FilePicker`,
+  `RangeSlider`, `Combobox`, `RelationInput`, `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:

package/README.md

@@ -32,7 +32,7 @@ pnpm add @happyvertical/smrt-ui
 | Area | Components |
 | --- | --- |
 | Fields | `Form`, `Field`/`FormGroup`, `Fieldset`, `InputGroup`, `ErrorSummary`, `FormActionBar` |
-| Text and structured input | `Input`, `Textarea`, `Select`, `Combobox`, `Listbox`, `MultiSelect`, `TagsInput`, `SearchInput` |
+| Text and structured input | `Input`, `Textarea`, `Select`, `Combobox`, `RelationInput`, `Listbox`, `MultiSelect`, `TagsInput`, `SearchInput` |
 | Choices | `Checkbox`, `RadioGroup`/`Radio`, `Switch`, `Toggle`, `ToggleButton`, `SegmentedControl` |
 | Values and files | `Slider`, `RangeSlider`, `DatePicker`, `TimePicker`, `FilePicker` |
 | Capture | `CameraCapture`, `SignaturePad` |
@@ -130,6 +130,50 @@ controls with no name or an empty name are omitted. Disabled controls, including
 those inside disabled fieldsets, are omitted by native `FormData`. Native form
 reset restores the initial selection and its label, unless reset is canceled.
 
+### RelationInput
+
+`RelationInput` (`/forms`) moved here from `@happyvertical/smrt-svelte/forms` in #3637 (originally #3600); smrt-svelte keeps a deprecated re-export. Labels are props (`createLabel`, `clearLabel`, `loadingText`, ...); there is no message catalog.
+
+Searchable single-select for relation (foreign-key) fields, a thin wrapper over
+`Combobox`. It is presentation only: the caller supplies the data,
+so the same lookup an assistant uses to turn "Acme" into a record id backs the
+picker. Option shape is `RelationOption` — `{ id, label, detail? }`.
+
+- **Props.** `name`, `label`, `value` (bindable id, `''` = none), `required`,
+  `disabled`, `error`, `placeholder`, `description`, `search(query)`, optional
+  `resolve(id)` and `onCreate(query)`, plus `debounceMs` (250), `interaction`,
+  `onchange` and overridable text (`createLabel`, `clearLabel`, `loadingText`,
+  `emptyText`, `errorText`, `resultsText`).
+- **`search`** runs with `''` when the list opens and then debounced per
+  keystroke; a response for a superseded query is dropped. A rejected search
+  shows `errorText` and the next keystroke retries.
+- **`resolve`** supplies the label of a `value` that has not been searched yet
+  (initial value, parent rebind, form reset). Without it such a value shows an
+  empty field, never the raw id. A `null` result also leaves the field empty.
+- **`onCreate`** adds a "New ..." button; it receives the text most recently
+  searched for and may return the created `RelationOption`, which is selected.
+- **Form integration** is through `Combobox`'s control registration (`Form`
+  provides the registry), not a `FieldDefinition`: agents see a `combobox`
+  control whose value is the id. The form posts the id under `name`.
+- **Known limit.** An agent staging a value through the registered control can
+  only choose among the options last listed (the registry matches against
+  `options`; `allowCustom` is off), so it cannot write an id it has not
+  searched. It fails closed. Writing a resolved id needs an async hook on
+  `Combobox` and is tracked separately.
+- **Stale options.** Typing clears the listed options until the new search
+  answers, so Enter or a click can never pick a record for an older query.
+- **Clear button** shows only when not `required`, not `disabled`, and a value
+  is set; it returns focus to the field.
+- **Accessibility** is the combobox pattern (`role=combobox`, `aria-expanded`,
+  `aria-activedescendant`, listbox/option, Arrow/Enter/Escape) plus a polite
+  `role=status` live region announcing searching / "N results" / no matches,
+  `aria-busy` while fetching, and `aria-invalid` + `aria-describedby` for
+  `error` and `description`.
+- Options render `detail` under the label, so the option's accessible name
+  includes it. The `Combobox` additions that make this possible (`filter`,
+  `onquery`, `status`, `busy`, `invalid`, `describedby`, `optionContent`) are
+  generic and default to the previous behaviour.
+
 ### MultiSelect form submission
 
 A named `MultiSelect` submits one hidden native input per selected option value,

package/dist/components/forms/RelationInput.svelte

@@ -0,0 +1,378 @@
+<script lang="ts">
+import { untrack } from 'svelte';
+import Button from '../ui/Button.svelte';
+import Combobox from './Combobox.svelte';
+import { emitControlChange } from './control-dom.js';
+import type { ControlInteractionOptions } from './control-interaction.js';
+import {
+  recordControlUserEdit,
+  tryGetControlInteractionContext,
+} from './control-interaction-context.js';
+import type { RelationOption } from './types.js';
+
+/**
+ * RelationInput - searchable single-select for relation (foreign key) fields.
+ *
+ * Presentation only: the caller supplies `search` (and optionally `resolve`),
+ * so the same lookup an assistant uses to turn "Acme" into a record id backs
+ * the picker. Built on the smrt-ui `Combobox`, which supplies the ARIA 1.2
+ * combobox pattern (arrow keys, Enter, Escape, `aria-activedescendant`) and
+ * registers with the rich Form's control registry. The form posts the
+ * committed id under `name`, never the visible label.
+ *
+ * @example
+ * ```svelte
+ * <RelationInput
+ *   name="customerId"
+ *   label="Customer"
+ *   bind:value={customerId}
+ *   search={(q) => customers.search(q)}
+ *   resolve={(id) => customers.byId(id)}
+ * />
+ * ```
+ */
+export interface Props {
+  /** Field name; the selected id posts under it. */
+  name: string;
+  /** Visible label. */
+  label: string;
+  /** Selected record id (bindable). Empty string means no selection. */
+  value?: string;
+  /** Required field: hides the clear button and flags an empty value. */
+  required?: boolean;
+  /** Disabled state. */
+  disabled?: boolean;
+  /** Validation error message, shown below the field. */
+  error?: string;
+  /** Placeholder shown when nothing is selected. */
+  placeholder?: string;
+  /** Hint announced with the field. */
+  description?: string;
+  /** Look up records matching the text; called with '' when the list opens. */
+  search: (query: string) => Promise<RelationOption[]>;
+  /** Look up the current value's label when it has not been searched yet. */
+  resolve?: (id: string) => Promise<{ id: string; label: string } | null>;
+  /**
+   * "New ..." action. Receives the text most recently searched for. May
+   * return the created record, which is then selected.
+   */
+  onCreate?: (
+    query: string,
+  ) => void | RelationOption | Promise<void | RelationOption>;
+  /** Milliseconds to wait after typing before searching. */
+  debounceMs?: number;
+  /** Combobox interaction options (stable id, subject) for agents. */
+  interaction?: ControlInteractionOptions | false;
+  /** Text for the "New ..." button. */
+  createLabel?: string;
+  /** Accessible name for the clear button. */
+  clearLabel?: string;
+  /** Status text while searching. */
+  loadingText?: string;
+  /** Status text when nothing matches. */
+  emptyText?: string;
+  /** Status text when the search fails. */
+  errorText?: string;
+  /** Status text announcing how many results are listed. */
+  resultsText?: (count: number) => string;
+  /** Called when the selected id changes ('' when cleared). */
+  onchange?: (value: string) => void;
+}
+
+let {
+  name,
+  label,
+  value = $bindable(''),
+  required = false,
+  disabled = false,
+  error,
+  placeholder,
+  description,
+  search,
+  resolve,
+  onCreate,
+  debounceMs = 250,
+  interaction,
+  createLabel,
+  clearLabel,
+  loadingText = 'Searching…',
+  emptyText = 'No matches',
+  errorText = 'Search failed. Try again.',
+  resultsText = (count: number) =>
+    `${count} ${count === 1 ? 'result' : 'results'} available`,
+  onchange,
+}: Props = $props();
+
+const instanceId = $props.id();
+const errorId = `${instanceId}-error`;
+const hintId = `${instanceId}-hint`;
+const interactionContext = tryGetControlInteractionContext();
+
+let rootEl = $state<HTMLDivElement | null>(null);
+let results = $state<RelationOption[]>([]);
+let loading = $state(false);
+let failed = $state(false);
+let selectedLabel = $state('');
+let creating = $state(false);
+
+// Plain bookkeeping, deliberately not reactive.
+let labelledId = '';
+let resolvingId = '';
+let searchSeq = 0;
+let lastQuery = '';
+let timer: ReturnType<typeof setTimeout> | undefined;
+
+const options = $derived(
+  results.map((item) => ({ value: item.id, label: item.label })),
+);
+const detailById = $derived(
+  new Map(results.map((item) => [item.id, item.detail])),
+);
+const status = $derived(
+  loading
+    ? loadingText
+    : failed
+      ? errorText
+      : results.length === 0
+        ? emptyText
+        : resultsText(results.length),
+);
+const describedby = $derived(
+  [error ? errorId : '', description ? hintId : ''].filter(Boolean).join(' ') ||
+    undefined,
+);
+const controlId = $derived(
+  interaction === false ? undefined : (interaction?.id ?? name),
+);
+const canClear = $derived(!required && !disabled && value !== '');
+const newLabel = $derived(createLabel ?? `New ${label.toLowerCase()}`);
+
+async function runSearch(query: string) {
+  const seq = ++searchSeq;
+  loading = true;
+  failed = false;
+  try {
+    const found = await search(query);
+    if (seq !== searchSeq) return;
+    results = found;
+  } catch (err) {
+    if (seq !== searchSeq) return;
+    results = [];
+    failed = true;
+    console.warn('[smrt-ui] RelationInput search failed', {
+      error: String(err),
+    });
+  } finally {
+    if (seq === searchSeq) loading = false;
+  }
+}
+
+function handleQuery(query: string) {
+  clearTimeout(timer);
+  lastQuery = query;
+  if (query === '') {
+    // Opening the list: no typing to wait for.
+    void runSearch('');
+    return;
+  }
+  // Show "Searching" straight away and drop any in-flight older request. The
+  // listed options answered an older query, so none stay selectable (Enter or
+  // a click would otherwise pick a record that no longer matches the text).
+  searchSeq++;
+  loading = true;
+  failed = false;
+  results = [];
+  timer = setTimeout(() => void runSearch(query), debounceMs);
+}
+
+function handleValueChange(next: string) {
+  lastQuery = '';
+  const hit = results.find((item) => item.id === next);
+  if (hit) {
+    selectedLabel = hit.label;
+    labelledId = next;
+  }
+  onchange?.(next);
+}
+
+function focusInput() {
+  rootEl?.querySelector<HTMLInputElement>('input[role="combobox"]')?.focus();
+}
+
+function clear() {
+  if (!canClear) return;
+  value = '';
+  selectedLabel = '';
+  labelledId = '';
+  lastQuery = '';
+  onchange?.('');
+  recordControlUserEdit(
+    interactionContext,
+    controlId,
+    interaction === false ? undefined : interaction?.subject,
+  );
+  if (rootEl) emitControlChange(rootEl);
+  focusInput();
+}
+
+async function create() {
+  if (!onCreate || creating || disabled) return;
+  // The field has already lost focus (and reset its text) by now, so use the
+  // text most recently searched for.
+  const typed = lastQuery;
+  creating = true;
+  try {
+    const made = await onCreate(typed);
+    if (made && typeof made === 'object') {
+      results = [made, ...results.filter((item) => item.id !== made.id)];
+      selectedLabel = made.label;
+      labelledId = made.id;
+      value = made.id;
+      onchange?.(made.id);
+      recordControlUserEdit(
+        interactionContext,
+        controlId,
+        interaction === false ? undefined : interaction?.subject,
+      );
+      if (rootEl) emitControlChange(rootEl);
+    }
+  } catch (err) {
+    console.warn('[smrt-ui] RelationInput onCreate failed', {
+      error: String(err),
+    });
+  } finally {
+    creating = false;
+  }
+}
+
+// Keep the visible label in step with `value` however it changed (initial
+// value, parent rebind, form reset): known from a search, else resolved.
+$effect(() => {
+  const id = value;
+  const known = results.find((item) => item.id === id);
+  untrack(() => {
+    if (!id) {
+      selectedLabel = '';
+      labelledId = '';
+      return;
+    }
+    if (id === labelledId) return;
+    if (known) {
+      selectedLabel = known.label;
+      labelledId = id;
+      return;
+    }
+    // A different id than the one labelled: never keep the previous label.
+    selectedLabel = '';
+    labelledId = '';
+    if (!resolve || resolvingId === id) return;
+    resolvingId = id;
+    resolve(id)
+      .then((record) => {
+        if (value === id && record) {
+          selectedLabel = record.label;
+          labelledId = id;
+        }
+      })
+      .catch((err) => {
+        console.warn('[smrt-ui] RelationInput resolve failed', {
+          error: String(err),
+        });
+      })
+      .finally(() => {
+        if (resolvingId === id) resolvingId = '';
+      });
+  });
+});
+
+$effect(() => () => clearTimeout(timer));
+</script>
+
+<div class="relation-input" bind:this={rootEl}>
+  <div class="field">
+    <Combobox
+      {name}
+      {label}
+      {options}
+      {placeholder}
+      {disabled}
+      {required}
+      {interaction}
+      {status}
+      {describedby}
+      bind:value
+      valueLabel={selectedLabel}
+      filter={false}
+      busy={loading}
+      invalid={!!error}
+      onquery={handleQuery}
+      onvaluechange={handleValueChange}
+    >
+      {#snippet optionContent(option)}
+        <span class="option-label">{option.label}</span>
+        {#if detailById.get(String(option.value))}
+          <span class="option-detail">{detailById.get(String(option.value))}</span>
+        {/if}
+      {/snippet}
+    </Combobox>
+    {#if canClear}
+      <Button
+        variant="ghost"
+        size="sm"
+        class="clear"
+        aria-label={clearLabel ?? `Clear ${label}`}
+        onclick={clear}
+      >
+        &times;
+      </Button>
+    {/if}
+  </div>
+  {#if description}<p id={hintId} class="hint">{description}</p>{/if}
+  {#if onCreate}
+    <Button
+      variant="ghost"
+      size="sm"
+      class="create"
+      disabled={disabled || creating}
+      onclick={create}
+    >
+      + {newLabel}
+    </Button>
+  {/if}
+  {#if error}<p id={errorId} class="error" role="alert">{error}</p>{/if}
+</div>
+
+<style>
+  .relation-input {
+    display: grid;
+    gap: var(--smrt-spacing-1, 4px);
+    min-width: 0;
+  }
+  .field {
+    position: relative;
+  }
+  .field :global(.clear) {
+    position: absolute;
+    right: var(--smrt-spacing-1, 4px);
+    bottom: var(--smrt-spacing-1, 4px);
+  }
+  .option-label,
+  .option-detail {
+    display: block;
+  }
+  .option-detail {
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    color: var(--smrt-color-on-surface-variant);
+  }
+  .hint,
+  .error {
+    margin: 0;
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+  }
+  .hint {
+    color: var(--smrt-color-on-surface-variant);
+  }
+  .error {
+    color: var(--smrt-color-error);
+  }
+</style>

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

@@ -0,0 +1,75 @@
+import type { ControlInteractionOptions } from './control-interaction.js';
+import type { RelationOption } from './types.js';
+/**
+ * RelationInput - searchable single-select for relation (foreign key) fields.
+ *
+ * Presentation only: the caller supplies `search` (and optionally `resolve`),
+ * so the same lookup an assistant uses to turn "Acme" into a record id backs
+ * the picker. Built on the smrt-ui `Combobox`, which supplies the ARIA 1.2
+ * combobox pattern (arrow keys, Enter, Escape, `aria-activedescendant`) and
+ * registers with the rich Form's control registry. The form posts the
+ * committed id under `name`, never the visible label.
+ *
+ * @example
+ * ```svelte
+ * <RelationInput
+ *   name="customerId"
+ *   label="Customer"
+ *   bind:value={customerId}
+ *   search={(q) => customers.search(q)}
+ *   resolve={(id) => customers.byId(id)}
+ * />
+ * ```
+ */
+export interface Props {
+    /** Field name; the selected id posts under it. */
+    name: string;
+    /** Visible label. */
+    label: string;
+    /** Selected record id (bindable). Empty string means no selection. */
+    value?: string;
+    /** Required field: hides the clear button and flags an empty value. */
+    required?: boolean;
+    /** Disabled state. */
+    disabled?: boolean;
+    /** Validation error message, shown below the field. */
+    error?: string;
+    /** Placeholder shown when nothing is selected. */
+    placeholder?: string;
+    /** Hint announced with the field. */
+    description?: string;
+    /** Look up records matching the text; called with '' when the list opens. */
+    search: (query: string) => Promise<RelationOption[]>;
+    /** Look up the current value's label when it has not been searched yet. */
+    resolve?: (id: string) => Promise<{
+        id: string;
+        label: string;
+    } | null>;
+    /**
+     * "New ..." action. Receives the text most recently searched for. May
+     * return the created record, which is then selected.
+     */
+    onCreate?: (query: string) => void | RelationOption | Promise<void | RelationOption>;
+    /** Milliseconds to wait after typing before searching. */
+    debounceMs?: number;
+    /** Combobox interaction options (stable id, subject) for agents. */
+    interaction?: ControlInteractionOptions | false;
+    /** Text for the "New ..." button. */
+    createLabel?: string;
+    /** Accessible name for the clear button. */
+    clearLabel?: string;
+    /** Status text while searching. */
+    loadingText?: string;
+    /** Status text when nothing matches. */
+    emptyText?: string;
+    /** Status text when the search fails. */
+    errorText?: string;
+    /** Status text announcing how many results are listed. */
+    resultsText?: (count: number) => string;
+    /** Called when the selected id changes ('' when cleared). */
+    onchange?: (value: string) => void;
+}
+declare const RelationInput: import("svelte").Component<Props, {}, "value">;
+type RelationInput = ReturnType<typeof RelationInput>;
+export default RelationInput;
+//# sourceMappingURL=RelationInput.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RelationInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/RelationInput.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAK1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,KAAK;IACpB,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6EAA6E;IAC7E,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IACrD,2EAA2E;IAC3E,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,CAAC;IACxE;;;OAGG;IACH,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,KACV,IAAI,GAAG,cAAc,GAAG,OAAO,CAAC,IAAI,GAAG,cAAc,CAAC,CAAC;IAC5D,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oEAAoE;IACpE,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAyPD,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -47,6 +47,7 @@ export { default as ProvinceSelect } from './ProvinceSelect.svelte';
 export { default as Radio } from './Radio.svelte';
 export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as RangeSlider } from './RangeSlider.svelte';
+export { default as RelationInput } from './RelationInput.svelte';
 export { playReadyBeep, primeReadyBeep, type ReadyBeepOptions, } from './ready-beep.js';
 export { default as SearchInput } from './SearchInput.svelte';
 export { default as SegmentedControl } from './SegmentedControl.svelte';
@@ -62,6 +63,6 @@ export { default as Textarea } from './Textarea.svelte';
 export { default as TimePicker } from './TimePicker.svelte';
 export { default as Toggle } from './Toggle.svelte';
 export { default as ToggleButton } from './ToggleButton.svelte';
-export type { CameraCaptureLabels, CameraCaptureState, CaptureResult, FormError, RangeSliderValue, SegmentedControlOption, SignaturePadLabels, SignaturePadState, } from './types.js';
+export type { CameraCaptureLabels, CameraCaptureState, CaptureResult, FormError, RangeSliderValue, RelationOption, SegmentedControlOption, SignaturePadLabels, SignaturePadState, } from './types.js';
 export { type ControlRegistrationDescriptor, useControlRegistration, } from './use-control-registration.svelte.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":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"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"}

package/dist/components/forms/index.js

@@ -48,6 +48,7 @@ export { default as ProvinceSelect } from './ProvinceSelect.svelte';
 export { default as Radio } from './Radio.svelte';
 export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as RangeSlider } from './RangeSlider.svelte';
+export { default as RelationInput } from './RelationInput.svelte';
 export { playReadyBeep, primeReadyBeep, } from './ready-beep.js';
 export { default as SearchInput } from './SearchInput.svelte';
 export { default as SegmentedControl } from './SegmentedControl.svelte';

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

@@ -52,4 +52,13 @@ export interface SignaturePadLabels {
     useSignature: string;
     committed: string;
 }
+/** A searchable relation target for the RelationInput component */
+export interface RelationOption {
+    /** Record id; this is the value the form posts. */
+    id: string;
+    /** Human-readable name shown in the field and the list. */
+    label: string;
+    /** Secondary text shown under the label in the list. */
+    detail?: string;
+}
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/forms/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE9D,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,sBAAuB,SAAQ,aAAa;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,mEAAmE;AACnE,MAAM,WAAW,aAAa;IAC5B,wEAAwE;IACxE,IAAI,EAAE,IAAI,CAAC;IACX,yEAAyE;IACzE,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,iFAAiF;AACjF,MAAM,MAAM,kBAAkB,GAC1B,KAAK,GACL,UAAU,GACV,WAAW,GACX,WAAW,GACX,WAAW,GACX,mBAAmB,GACnB,WAAW,GACX,aAAa,GACb,OAAO,GACP,UAAU,CAAC;AAEf,oFAAoF;AACpF,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,gFAAgF;AAChF,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAC;AAEjE,mFAAmF;AACnF,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/forms/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE9D,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,sBAAuB,SAAQ,aAAa;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,mEAAmE;AACnE,MAAM,WAAW,aAAa;IAC5B,wEAAwE;IACxE,IAAI,EAAE,IAAI,CAAC;IACX,yEAAyE;IACzE,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,iFAAiF;AACjF,MAAM,MAAM,kBAAkB,GAC1B,KAAK,GACL,UAAU,GACV,WAAW,GACX,WAAW,GACX,WAAW,GACX,mBAAmB,GACnB,WAAW,GACX,aAAa,GACb,OAAO,GACP,UAAU,CAAC;AAEf,oFAAoF;AACpF,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,gFAAgF;AAChF,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAC;AAEjE,mFAAmF;AACnF,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,mEAAmE;AACnE,MAAM,WAAW,cAAc;IAC7B,mDAAmD;IACnD,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/svelte/playground/InteractiveControlsPreview.svelte

@@ -13,6 +13,7 @@ import MultiSelect from '../../components/forms/MultiSelect.svelte';
 import Radio from '../../components/forms/Radio.svelte';
 import RadioGroup from '../../components/forms/RadioGroup.svelte';
 import RangeSlider from '../../components/forms/RangeSlider.svelte';
+import RelationInput from '../../components/forms/RelationInput.svelte';
 import SegmentedControl from '../../components/forms/SegmentedControl.svelte';
 import Slider from '../../components/forms/Slider.svelte';
 import Switch from '../../components/forms/Switch.svelte';
@@ -27,6 +28,26 @@ const countries = [
   { value: 'us', label: 'United States' },
   { value: 'mx', label: 'Mexico' },
 ];
+// RelationInput demo: a caller-supplied lookup standing in for a REST search.
+const demoCustomers = [
+  { id: 'cus_001', label: 'Acme Corp', detail: 'acme@example.com' },
+  { id: 'cus_002', label: 'Globex', detail: 'billing@globex.example' },
+  { id: 'cus_003', label: 'Initech', detail: 'ap@initech.example' },
+  { id: 'cus_004', label: 'Umbrella Ltd' },
+];
+async function searchCustomers(query: string) {
+  await new Promise((resolve) => setTimeout(resolve, 300));
+  const q = query.toLowerCase();
+  return demoCustomers.filter(
+    (c) =>
+      c.label.toLowerCase().includes(q) ||
+      (c.detail ?? '').toLowerCase().includes(q),
+  );
+}
+async function resolveCustomer(id: string) {
+  return demoCustomers.find((c) => c.id === id) ?? null;
+}
+let customerId = $state('');
 let accepted = $state(true);
 let notifications = $state(true);
 let pinned = $state(false);
@@ -83,6 +104,7 @@ const identity = (controlId: string) => ({
 
     <section><h5>Structured input</h5><div class="grid">
       <Combobox name="country" label="Country" options={countries} bind:value={country} />
+      <RelationInput name="customerId" label="Customer" description="Search by name or email" search={searchCustomers} resolve={resolveCustomer} bind:value={customerId} />
       <MultiSelect name="channels" label="Channels" options={[{ value: 'email', label: 'Email' }, { value: 'sms', label: 'SMS' }, { value: 'push', label: 'Push' }]} bind:values={channels} />
       <TagsInput name="topics" label="Topics" bind:values={tags} />
       <DatePicker name="date" label="Publish date" />

package/dist/svelte/playground/InteractiveControlsPreview.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InteractiveControlsPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/InteractiveControlsPreview.svelte.ts"],"names":[],"mappings":"AAwHA,QAAA,MAAM,0BAA0B,2DAAwC,CAAC;AACzE,KAAK,0BAA0B,GAAG,UAAU,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAChF,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"InteractiveControlsPreview.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/playground/InteractiveControlsPreview.svelte.ts"],"names":[],"mappings":"AA+IA,QAAA,MAAM,0BAA0B,2DAAwC,CAAC;AACzE,KAAK,0BAA0B,GAAG,UAAU,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAChF,eAAe,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.55.3",
+  "version": "0.55.4",
   "smrtJsdoc": "strict",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
@@ -139,7 +139,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@happyvertical/smrt-types": "0.55.3",
+    "@happyvertical/smrt-types": "0.55.4",
     "esm-env": "^1.2.2"
   },
   "peerDependencies": {