@happyvertical/smrt-ui 0.55.0 → 0.55.10

package/dist/components/forms/DictationStatus.svelte

@@ -2,7 +2,13 @@
 /**
  * DictationStatus — what dictation is doing, in words (see `Dictation`).
  *
- * "Listening…" (with the words heard so far) while the microphone is on,
+ * "Listening…" (with the words heard so far) while the microphone is on.
+ * Hands-free is announced, not shown: the line is visually hidden and says
+ * "Listening", "Hearing you…" while someone is speaking and "Writing it down…"
+ * while sentences are being written down (the long help text is the
+ * microphone's tooltip) and "Paused while the assistant speaks" while
+ * listening is suspended. "Sending…" (`sending`) is the one short hands-free
+ * hint that stays visible, since a message is about to leave.
  * "Writing it down…" while a recording is turned into text, and
  * a plain explanation when it cannot listen: the browser cannot turn speech
  * into text, the microphone is blocked, or nothing was heard. Nothing while
@@ -15,20 +21,28 @@ import type { Dictation, DictationErrorKind } from './dictation.svelte.js';
 export interface Props {
   /** The dictation session whose listening state and messages this shows. */
   dictation: Dictation;
+  /** A message is about to be sent (hands-free send on pause): shows "Sending…". */
+  sending?: boolean;
   /** Extra class names. */
   class?: string;
 }
 
-let { dictation, class: className = '' }: Props = $props();
+let { dictation, sending = false, class: className = '' }: Props = $props();
 
 const { t } = useI18n();
 const showLine = $derived(
-  dictation.state === 'starting' ||
+  sending ||
+    dictation.state === 'starting' ||
     dictation.state === 'listening' ||
     dictation.state === 'stopping' ||
     dictation.state === 'transcribing',
 );
 
+// Hands-free states are announced to screen readers only.
+const announceOnly = $derived(
+  !sending && dictation.handsFree && dictation.state === 'listening',
+);
+
 function errorText(kind: DictationErrorKind | null): string {
   switch (kind) {
     case 'unsupported':
@@ -47,6 +61,8 @@ function errorText(kind: DictationErrorKind | null): string {
       return t(M['ui.dictation.not_transcribed']);
     case 'unavailable':
       return t(M['ui.dictation.unavailable']);
+    case 'model-missing':
+      return t(M['ui.dictation.model_missing']);
     case 'forbidden':
       return t(M['ui.dictation.forbidden']);
     default:
@@ -58,12 +74,24 @@ function errorText(kind: DictationErrorKind | null): string {
 <div class={`smrt-dictation-status ${className}`.trim()}>
   <p
     class="smrt-dictation-status-line"
-    class:smrt-dictation-status--empty={!showLine}
+    class:smrt-dictation-status--empty={!showLine || announceOnly}
     role="status"
     aria-live="polite"
   >
-    {#if dictation.state === 'starting'}
+    {#if sending}
+      {t(M['ui.dictation.sending'])}
+    {:else if dictation.state === 'starting'}
       {t(M['ui.dictation.starting'])}
+    {:else if dictation.handsFree && dictation.state === 'listening'}
+      {#if dictation.suspended}
+        {t(M['ui.dictation.paused_speaking'])}
+      {:else if dictation.queued > 0}
+        {t(M['ui.dictation.transcribing'])}
+      {:else if dictation.speaking}
+        {t(M['ui.dictation.hearing'])}
+      {:else}
+        {t(M['ui.dictation.listening_short'])}
+      {/if}
     {:else if dictation.state === 'listening' || dictation.state === 'stopping'}
       <span class="smrt-dictation-status-dot" aria-hidden="true"></span>
       {t(M['ui.dictation.listening'])}

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

@@ -2,6 +2,8 @@ import type { Dictation } from './dictation.svelte.js';
 export interface Props {
     /** The dictation session whose listening state and messages this shows. */
     dictation: Dictation;
+    /** A message is about to be sent (hands-free send on pause): shows "Sending…". */
+    sending?: boolean;
     /** Extra class names. */
     class?: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"DictationStatus.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/DictationStatus.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,SAAS,EAAsB,MAAM,uBAAuB,CAAC;AAG3E,MAAM,WAAW,KAAK;IACpB,2EAA2E;IAC3E,SAAS,EAAE,SAAS,CAAC;IACrB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwED,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DictationStatus.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/DictationStatus.svelte.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,SAAS,EAAsB,MAAM,uBAAuB,CAAC;AAG3E,MAAM,WAAW,KAAK;IACpB,2EAA2E;IAC3E,SAAS,EAAE,SAAS,CAAC;IACrB,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4FD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/forms/FieldLabel.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+/**
+ * The one label treatment for generated form fields: a plain label above its
+ * control. Every field component (text, money, date, select, relation, …) and
+ * every read-only field display renders this, so size, weight, colour and
+ * spacing cannot drift between field types.
+ */
+interface Props {
+  /** Label text. */
+  label: string;
+  /** Id of the labelled control (`for`). Omit for read-only displays. */
+  for?: string;
+  /** Id of the label element, for `aria-labelledby` on the control. */
+  id?: string;
+  /** Shows the required marker. */
+  required?: boolean;
+}
+let { label, for: forId, id, required = false }: Props = $props();
+</script>
+
+{#if forId}
+  <label {id} for={forId} class="smrt-field-label">{label}{#if required}<span class="required" aria-hidden="true">*</span>{/if}</label>
+{:else}
+  <span {id} class="smrt-field-label">{label}{#if required}<span class="required" aria-hidden="true">*</span>{/if}</span>
+{/if}
+
+<style>
+  .smrt-field-label {
+    display: block;
+    margin-bottom: var(--smrt-spacing-1, 4px);
+    font-size: var(--smrt-typography-label-large-size, 0.875rem);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    line-height: var(--smrt-typography-label-large-line-height, 1.4);
+    letter-spacing: normal;
+    text-transform: none;
+    font-family: inherit;
+    color: var(--smrt-color-on-surface, #374151);
+  }
+
+  .required {
+    color: var(--smrt-color-error, #ba1a1a);
+    margin-left: var(--smrt-spacing-1, 4px);
+  }
+</style>

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

@@ -0,0 +1,20 @@
+/**
+ * The one label treatment for generated form fields: a plain label above its
+ * control. Every field component (text, money, date, select, relation, …) and
+ * every read-only field display renders this, so size, weight, colour and
+ * spacing cannot drift between field types.
+ */
+interface Props {
+    /** Label text. */
+    label: string;
+    /** Id of the labelled control (`for`). Omit for read-only displays. */
+    for?: string;
+    /** Id of the label element, for `aria-labelledby` on the control. */
+    id?: string;
+    /** Shows the required marker. */
+    required?: boolean;
+}
+declare const FieldLabel: import("svelte").Component<Props, {}, "">;
+type FieldLabel = ReturnType<typeof FieldLabel>;
+export default FieldLabel;
+//# sourceMappingURL=FieldLabel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabel.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FieldLabel.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,UAAU,KAAK;IACb,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qEAAqE;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgBD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/forms/FormGroup.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { Snippet } from 'svelte';
 import type { ControlInteractionOptions } from './control-interaction.js';
+import FieldLabel from './FieldLabel.svelte';
 import {
   type FormGroupContextValue,
   nextFieldId,
@@ -62,12 +63,7 @@ setFormGroupContext(
 </script>
 
 <div class="form-group">
-	<label for={fieldId} class="form-label">
-		{label}
-		{#if required}
-			<span class="required" aria-hidden="true">*</span>
-		{/if}
-	</label>
+	<FieldLabel for={fieldId} {label} {required} />
 	{@render children()}
 	{#if hintId}
 		<p id={hintId} class="form-hint">{hint}</p>
@@ -82,18 +78,7 @@ setFormGroupContext(
 		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;

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

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAQ1E,MAAM,WAAW,KAAK;IACpB,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,6DAA6D;IAC7D,QAAQ,EAAE,OAAO,CAAC;CACnB;AAgED,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FormGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAS1E,MAAM,WAAW,KAAK;IACpB,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,6DAA6D;IAC7D,QAAQ,EAAE,OAAO,CAAC;CACnB;AA4DD,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

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/code-select-options.d.ts

@@ -1,5 +1,12 @@
 import type { CodeSelectOption } from './code-select-types.js';
-/** Build localized choices from the shared ISO currency metadata. */
+/**
+ * ISO 4217 codes that are not circulating currencies: funds codes, precious
+ * metals, the IMF unit and bond-market units, and the testing / "no currency"
+ * codes. They stay valid stored values (the select retains an unknown value)
+ * but are not offered as choices.
+ */
+export declare const NON_CIRCULATING_CURRENCY_CODES: ReadonlySet<string>;
+/** Build localized choices for circulating currencies from the shared ISO metadata. */
 export declare function currencyOptions(locale: string): CodeSelectOption[];
 /** Build localized ISO alpha-2 country choices. */
 export declare function countryOptions(locale: string): CodeSelectOption[];