@happyvertical/smrt-ui 0.43.4 → 0.43.6

package/dist/components/display/__tests__/CurrencyDisplayI18nHarness.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CurrencyDisplayI18nHarness.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/display/__tests__/CurrencyDisplayI18nHarness.svelte.ts"],"names":[],"mappings":"AA6BA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,0BAA0B;;kBAA+E,CAAC;AAC9F,KAAK,0BAA0B,GAAG,YAAY,CAAC,OAAO,0BAA0B,CAAC,CAAC;AACpF,eAAe,0BAA0B,CAAC"}

package/dist/components/display/__tests__/CurrencyDisplaySsrHarness.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import CurrencyDisplay from '../CurrencyDisplay.svelte';
+</script>
+
+<CurrencyDisplay amount={12345} currency="EUR" />
+<CurrencyDisplay amount={12345} currency="ZZZ" />
+<CurrencyDisplay amount={12345} currency="XAU" />

package/dist/components/display/__tests__/CurrencyDisplaySsrHarness.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CurrencyDisplaySsrHarness: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CurrencyDisplaySsrHarness = InstanceType<typeof CurrencyDisplaySsrHarness>;
+export default CurrencyDisplaySsrHarness;
+//# sourceMappingURL=CurrencyDisplaySsrHarness.svelte.d.ts.map

package/dist/components/display/__tests__/CurrencyDisplaySsrHarness.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CurrencyDisplaySsrHarness.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/display/__tests__/CurrencyDisplaySsrHarness.svelte.ts"],"names":[],"mappings":"AAeA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,yBAAyB;;kBAA+E,CAAC;AAC7F,KAAK,yBAAyB,GAAG,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAClF,eAAe,yBAAyB,CAAC"}

package/dist/components/display/currency-metadata.d.ts

@@ -0,0 +1,2 @@
+export declare const ISO_4217_MINOR_UNITS: Map<string, number | null>;
+//# sourceMappingURL=currency-metadata.d.ts.map

package/dist/components/display/currency-metadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency-metadata.d.ts","sourceRoot":"","sources":["../../../src/components/display/currency-metadata.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,oBAAoB,4BAe/B,CAAC"}

package/dist/components/display/currency-metadata.js

@@ -0,0 +1,14 @@
+function minorUnitEntries(codes, minorUnits) {
+    return codes.split(' ').map((code) => [code, minorUnits]);
+}
+// ISO 4217 List One, published by the ISO maintenance agency SIX on
+// 2026-01-01. Keeping both membership and minor-unit exponents here makes SSR
+// and browser rendering independent of their potentially different ICU data.
+// Source: https://www.six-group.com/dam/download/financial-information/data-center/iso-currrency/lists/list-one.xml
+export const ISO_4217_MINOR_UNITS = new Map([
+    ...minorUnitEntries('XOF BIF XAF CLP KMF DJF XPF GNF ISK JPY KRW PYG RWF UGX UYI VUV VND', 0),
+    ...minorUnitEntries('AFN EUR ALL DZD USD AOA XCD XAD ARS AMD AWG AUD AZN BSD BDT BBD BYN BZD BMD INR BTN BOB BOV BAM BWP NOK BRL BND CVE KHR CAD KYD CNY COP COU CDF NZD CRC CUP XCG CZK DKK DOP EGP SVC ERN SZL ETB FKP FJD GMD GEL GHS GIP GTQ GBP GYD HTG HNL HKD HUF IDR IRR ILS JMD KZT KES KPW KGS LAK LBP LSL ZAR LRD CHF MOP MKD MGA MWK MYR MVR MRU MUR MXN MXV MDL MNT MAD MZN MMK NAD NPR NIO NGN PKR PAB PGK PEN PHP PLN QAR RON RUB SHP WST STN SAR RSD SCR SLE SGD SBD SOS SSP LKR SDG SRD SEK CHE CHW SYP TWD TJS TZS THB TOP TTD TRY TMT UAH AED USN UYU UZS VES VED YER ZMW ZWG', 2),
+    ...minorUnitEntries('BHD IQD JOD KWD LYD OMR TND', 3),
+    ...minorUnitEntries('CLF UYW', 4),
+    ...minorUnitEntries('XDR XUA XSU XBA XBB XBC XBD XTS XXX XAU XPD XPT XAG', null),
+]);

package/dist/components/forms/Checkbox.svelte

@@ -7,6 +7,11 @@ import {
 } from './control-dom.js';
 import type { ControlInteractionOptions } from './control-interaction.js';
 import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import {
+  booleanControlValue,
+  prepareBooleanControlValue,
+  validateNativeCheckedValue,
+} from './control-value-validation.js';
 import { tryGetFormGroupContext } from './form-group-context.js';
 import { useControlRegistration } from './use-control-registration.svelte.js';
 
@@ -62,10 +67,7 @@ $effect(() => {
 });
 
 function setChecked(next: unknown) {
-  checked =
-    typeof next === 'string'
-      ? ['true', '1', 'yes', 'on'].includes(next.toLowerCase())
-      : Boolean(next);
+  checked = booleanControlValue(next);
   if (inputEl) emitControlChange(inputEl);
 }
 
@@ -91,15 +93,20 @@ useControlRegistration(() => {
       constraints: { required: required === true },
     },
     getValue: () => checked,
+    prepareValue: prepareBooleanControlValue,
     setValue: setChecked,
-    clear: () => setChecked(false),
+    clear: () => {
+      setChecked(false);
+      return true;
+    },
     focus: () => element.focus(),
     reveal: () => revealControl(element),
     highlight: (durationMs) =>
       highlightControl(element.closest('label') ?? element, durationMs),
     validate: () => element.reportValidity(),
+    validateValue: (next) => validateNativeCheckedValue(element, next),
     getState: () => ({
-      disabled: element.disabled,
+      disabled: element.matches(':disabled'),
       readonly: false,
       valid: element.validity.valid,
       validationMessage: element.validationMessage || undefined,
@@ -113,6 +120,8 @@ useControlRegistration(() => {
   class:checkbox--disabled={disabled}
   data-smrt-control={controlId}
   data-smrt-form={interactionContext?.formId}
+  data-smrt-subject-type={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.type}
+  data-smrt-subject-id={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.id}
 >
   <input
     bind:this={inputEl}

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Checkbox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAM1E,MAAM,WAAW,KACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AA+GD,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Checkbox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAW1E,MAAM,WAAW,KACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AAkHD,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/forms/Combobox.svelte

@@ -1,10 +1,21 @@
 <script lang="ts">
-import { highlightControl, revealControl } from './control-dom.js';
+import {
+  emitControlChange,
+  highlightControl,
+  revealControl,
+} from './control-dom.js';
 import type {
   ControlInteractionOptions,
   ControlOption,
 } from './control-interaction.js';
-import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import {
+  recordControlUserEdit,
+  tryGetControlInteractionContext,
+} from './control-interaction-context.js';
+import {
+  matchingOption,
+  prepareTextControlValue,
+} from './control-value-validation.js';
 import { useControlRegistration } from './use-control-registration.svelte.js';
 export interface Props {
   options: ControlOption[];
@@ -49,18 +60,25 @@ const filtered = $derived(
 const controlId = $derived(
   interaction === false ? undefined : (interaction?.id ?? name ?? inputId),
 );
-function commit(option: ControlOption) {
+function commit(option: ControlOption, userEdit = false) {
   if (option.disabled || disabled) return;
+  const changed = String(option.value) !== value;
   value = String(option.value);
   query = option.label;
   open = false;
   onvaluechange?.(value);
+  if (userEdit && changed) {
+    recordControlUserEdit(
+      interactionContext,
+      controlId,
+      interaction === false ? undefined : interaction?.subject,
+    );
+    if (rootEl) emitControlChange(rootEl);
+  }
 }
 function setValue(next: unknown) {
   const candidate = String(next ?? '');
-  const option = options.find(
-    (item) => String(item.value) === candidate || item.label === candidate,
-  );
+  const option = matchingOption(options, candidate, true);
   if (option) commit(option);
   else if (allowCustom) {
     value = candidate;
@@ -68,6 +86,13 @@ function setValue(next: unknown) {
     onvaluechange?.(candidate);
   }
 }
+function prepareValue(next: unknown) {
+  const candidate = prepareTextControlValue(next);
+  const option = matchingOption(options, candidate, true);
+  if (option) return String(option.value);
+  if (allowCustom) return candidate;
+  return candidate;
+}
 function handleInput(event: Event & { currentTarget: HTMLInputElement }) {
   query = event.currentTarget.value;
   open = true;
@@ -96,7 +121,7 @@ function handleKeydown(event: KeyboardEvent) {
       enabled[(position - 1 + enabled.length) % enabled.length] ?? 0;
   } else if (event.key === 'Enter' && open && filtered[activeIndex]) {
     event.preventDefault();
-    commit(filtered[activeIndex]);
+    commit(filtered[activeIndex], true);
   } else if (event.key === 'Escape') {
     open = false;
   }
@@ -138,30 +163,40 @@ useControlRegistration(() => {
       options,
     },
     getValue: () => value,
+    prepareValue,
     setValue,
     clear: () => {
       value = '';
       query = '';
       onvaluechange?.('');
+      return true;
     },
     focus: () => input.focus(),
     reveal: () => revealControl(root),
     highlight: (durationMs) => highlightControl(root, durationMs),
     validate: () => input.reportValidity(),
+    validateValue: (next) => {
+      const candidate = String(next ?? '');
+      const option = matchingOption(options, candidate, true);
+      if (option) return option.disabled !== true;
+      return allowCustom && (!required || candidate.length > 0);
+    },
     getState: () => ({
-      disabled,
+      disabled: input.matches(':disabled'),
       valid: input.validity.valid,
       validationMessage: input.validationMessage || undefined,
     }),
   };
 });
 </script>
-<div bind:this={rootEl} class="combobox {className}" data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}>
+<div bind:this={rootEl} class="combobox {className}" data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
+  data-smrt-subject-type={interaction === false ? undefined : interaction?.subject?.type}
+  data-smrt-subject-id={interaction === false ? undefined : interaction?.subject?.id}>
   <label for={inputId}>{label}</label><input bind:this={inputEl} id={inputId} {name} role="combobox" autocomplete="off" {placeholder} {disabled} {required} value={query}
     aria-expanded={open} aria-controls={listId} aria-autocomplete="list" aria-activedescendant={open && filtered[activeIndex] ? `${listId}-${activeIndex}` : undefined}
     onfocus={() => open = true} oninput={handleInput} onkeydown={handleKeydown} />
   {#if open && filtered.length}<div id={listId} class="options" role="listbox">{#each filtered as option, index (option.value)}<button id={`${listId}-${index}`} type="button" role="option"
-      aria-selected={String(option.value) === value} class:active={index === activeIndex} disabled={option.disabled} onpointerdown={(event) => event.preventDefault()} onclick={() => commit(option)}>{option.label}</button>{/each}</div>{/if}
+      aria-selected={String(option.value) === value} class:active={index === activeIndex} disabled={option.disabled} onpointerdown={(event) => event.preventDefault()} onclick={() => commit(option, true)}>{option.label}</button>{/each}</div>{/if}
 </div>
 <style>
   .combobox { position: relative; display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); }

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Combobox.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,yBAAyB,EACzB,aAAa,EACd,MAAM,0BAA0B,CAAC;AAIlC,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwJD,QAAA,MAAM,QAAQ,gDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Combobox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Combobox.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,yBAAyB,EACzB,aAAa,EACd,MAAM,0BAA0B,CAAC;AAWlC,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+KD,QAAA,MAAM,QAAQ,gDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/forms/FilePicker.svelte

@@ -92,7 +92,7 @@ useControlRegistration(() => {
     highlight: (durationMs) => highlightControl(root, durationMs),
     validate: () => input.reportValidity(),
     getState: () => ({
-      disabled: input.disabled,
+      disabled: input.matches(':disabled'),
       valid: input.validity.valid,
       validationMessage: input.validationMessage || undefined,
     }),
@@ -100,7 +100,10 @@ useControlRegistration(() => {
 });
 </script>
 <label bind:this={rootEl} for={resolvedId} class="file-picker {className}" class:dropzone class:dragging class:disabled
-  data-smrt-control={controlId} data-smrt-form={interactionContext?.formId} ondragenter={(event) => { event.preventDefault(); dragging = true; }}
+  data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
+  data-smrt-subject-type={interaction === false ? undefined : interaction?.subject?.type}
+  data-smrt-subject-id={interaction === false ? undefined : interaction?.subject?.id}
+  ondragenter={(event) => { event.preventDefault(); dragging = true; }}
   ondragover={(event) => event.preventDefault()} ondragleave={() => dragging = false} ondrop={handleDrop}>
   <input bind:this={inputEl} id={resolvedId} type="file" {name} {accept} {multiple} {disabled} {required} onchange={handleChange} {...rest} />
   <span class="label">{label}</span><span class="description">{files.length ? `${files.length} file${files.length === 1 ? '' : 's'} selected` : description}</span>

package/dist/components/forms/Form.svelte

@@ -25,6 +25,7 @@ import {
   createControlInteractionRegistry,
 } from './control-interaction.js';
 import { setControlInteractionContext } from './control-interaction-context.js';
+import StagedControlReview from './StagedControlReview.svelte';
 
 export interface Props extends Omit<HTMLFormAttributes, 'class'> {
   class?: string;
@@ -35,6 +36,8 @@ export interface Props extends Omit<HTMLFormAttributes, 'class'> {
   interactionRegistry?: ControlInteractionRegistry;
   /** Receives registry lifecycle and command events. */
   oninteraction?: (event: ControlInteractionEvent) => void;
+  /** Render the built-in human review surface for staged changes. */
+  stagedReview?: boolean;
   children: Snippet;
 }
 
@@ -44,9 +47,13 @@ let {
   formId,
   interactionRegistry,
   oninteraction,
+  stagedReview = true,
   id,
   name,
   onsubmit,
+  onclick,
+  oninput,
+  onchange,
   children,
   ...rest
 }: Props = $props();
@@ -58,6 +65,7 @@ const resolvedFormId = $derived(formId ?? id ?? name ?? generatedFormId);
 const resolvedInteractionRegistry = $derived(
   interactionRegistry ?? localInteractionRegistry,
 );
+let formElement = $state<HTMLFormElement | null>(null);
 
 setControlInteractionContext({
   get formId() {
@@ -85,17 +93,66 @@ function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
   if (preventDefault) event.preventDefault();
   onsubmit?.(event);
 }
+
+function recordDirectUserEdit(event: Event) {
+  if (!event.isTrusted) return;
+  const target = event.target;
+  if (!(target instanceof Element)) return;
+  const control = target.closest<HTMLElement>('[data-smrt-control]');
+  const controlId = control?.dataset.smrtControl;
+  if (!controlId) return;
+  resolvedInteractionRegistry.recordUserEdit?.({
+    formId: resolvedFormId,
+    controlId,
+    subject:
+      control.dataset.smrtSubjectType && control.dataset.smrtSubjectId
+        ? {
+            type: control.dataset.smrtSubjectType,
+            id: control.dataset.smrtSubjectId,
+          }
+        : undefined,
+  });
+}
+
+function handleInput(event: Event & { currentTarget: HTMLFormElement }) {
+  try {
+    oninput?.(event);
+  } finally {
+    // Consumer handlers may synchronously normalize the bound value. Capture
+    // that final human value even when the handler throws.
+    recordDirectUserEdit(event);
+  }
+}
+
+function handleChange(event: Event & { currentTarget: HTMLFormElement }) {
+  try {
+    onchange?.(event);
+  } finally {
+    // Match input semantics for controls that commit via change.
+    recordDirectUserEdit(event);
+  }
+}
 </script>
 
 <form
+  bind:this={formElement}
   id={id}
   name={name}
   class="form {className}"
   data-smrt-form={resolvedFormId}
   onsubmit={handleSubmit}
+  {onclick}
+  oninput={handleInput}
+  onchange={handleChange}
   {...rest}
 >
 	{@render children()}
+  <StagedControlReview
+    registry={resolvedInteractionRegistry}
+    formId={resolvedFormId}
+    {formElement}
+    summary={stagedReview}
+  />
 </form>
 
 <!--

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

@@ -28,6 +28,8 @@ export interface Props extends Omit<HTMLFormAttributes, 'class'> {
     interactionRegistry?: ControlInteractionRegistry;
     /** Receives registry lifecycle and command events. */
     oninteraction?: (event: ControlInteractionEvent) => void;
+    /** Render the built-in human review surface for staged changes. */
+    stagedReview?: boolean;
     children: Snippet;
 }
 declare const Form: import("svelte").Component<Props, {

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":"AAGA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAEhC,MAAM,0BAA0B,CAAC;AAIlC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,mBAAmB,CAAC,EAAE,0BAA0B,CAAC;IACjD,sDAAsD;IACtD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACzD,QAAQ,EAAE,OAAO,CAAC;CACnB;AAkED,QAAA,MAAM,IAAI;kCAtB0B,0BAA0B;qBAIvC,MAAM;MAkBqB,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;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAEhC,MAAM,0BAA0B,CAAC;AAKlC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,mBAAmB,CAAC,EAAE,0BAA0B,CAAC;IACjD,sDAAsD;IACtD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACzD,mEAAmE;IACnE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAgHD,QAAA,MAAM,IAAI;kCA9D0B,0BAA0B;qBAIvC,MAAM;MA0DqB,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/forms/Input.svelte

@@ -10,7 +10,12 @@ import type {
   ControlKind,
 } from './control-interaction.js';
 import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import {
+  prepareNumberControlValue,
+  prepareTextControlValue,
+} from './control-value-validation.js';
 import { tryGetFormGroupContext } from './form-group-context.js';
+import { useControlRegistration } from './use-control-registration.svelte.js';
 
 export interface Props extends Omit<HTMLInputAttributes, 'class' | 'value'> {
   value?: string | number;
@@ -83,23 +88,54 @@ function kindFromType(): ControlKind {
 
 function setControlValue(next: unknown) {
   value =
-    type === 'number' || type === 'range' ? Number(next) : String(next ?? '');
+    type === 'number' || type === 'range'
+      ? next === '' || next === null || next === undefined
+        ? ''
+        : Number(next)
+      : String(next ?? '');
   if (inputEl) emitControlChange(inputEl);
 }
 
-$effect(() => {
-  const context = controlInteraction;
+function validateControlValue(next: unknown) {
+  if (!inputEl) return true;
+  if (
+    (type === 'number' || type === 'range') &&
+    next !== '' &&
+    next !== null &&
+    next !== undefined &&
+    !Number.isFinite(typeof next === 'number' ? next : Number(next))
+  ) {
+    return { valid: false, message: 'invalid_number' };
+  }
+  const candidate = inputEl.cloneNode() as HTMLInputElement;
+  const proposedValue = String(next ?? '');
+  try {
+    candidate.value = proposedValue;
+  } catch {
+    return { valid: false, message: 'invalid_value' };
+  }
+  // Native inputs sanitize some assignments without making them invalid: an
+  // optional invalid date/time becomes empty and a range value can clamp to a
+  // bound. A staged proposal must never be marked applicable when the setter
+  // would apply a different value than the one reviewed.
+  if (candidate.value !== proposedValue) {
+    return { valid: false, message: 'invalid_value' };
+  }
+  return {
+    valid: candidate.checkValidity(),
+    message: candidate.validationMessage || undefined,
+  };
+}
+
+useControlRegistration(() => {
   const element = inputEl;
   const controlId = resolvedControlId;
   const options = resolvedInteraction;
-  if (!context || !element || !controlId || options === false) return;
+  if (!element || !controlId || options === false) return false;
 
-  return context.registry.register({
-    identity: {
-      formId: context.formId,
-      controlId,
-      subject: options.subject,
-    },
+  return {
+    controlId,
+    subject: options.subject,
     metadata: {
       kind: kindFromType(),
       label: formGroup?.().label ?? ariaLabel ?? undefined,
@@ -119,19 +155,27 @@ $effect(() => {
       },
     },
     getValue: () => value,
+    prepareValue: (next) =>
+      type === 'number' || type === 'range'
+        ? prepareNumberControlValue(next)
+        : prepareTextControlValue(next),
     setValue: setControlValue,
-    clear: () => setControlValue(''),
+    clear: () => {
+      setControlValue('');
+      return true;
+    },
     focus: () => element.focus(),
     reveal: () => revealControl(element),
     highlight: (durationMs) => highlightControl(element, durationMs),
     validate: () => element.reportValidity(),
+    validateValue: validateControlValue,
     getState: () => ({
-      disabled: element.disabled,
+      disabled: element.matches(':disabled'),
       readonly: element.readOnly,
       valid: element.validity.valid,
       validationMessage: element.validationMessage || undefined,
     }),
-  });
+  };
 });
 
 export function focus(): void {
@@ -167,6 +211,8 @@ export function getElement(): HTMLInputElement | null {
 	class="input {className}"
 	data-smrt-control={resolvedControlId}
 	data-smrt-form={controlInteraction?.formId}
+	data-smrt-subject-type={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.type}
+	data-smrt-subject-id={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.id}
 	{...rest}
 />
 

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

@@ -1 +1 @@
-{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM3D,OAAO,KAAK,EACV,yBAAyB,EAE1B,MAAM,0BAA0B,CAAC;AAKlC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AAmJD,QAAA,MAAM,KAAK;iBAvBQ,IAAI;kBAIH,IAAI;6BAIS,MAAM,KAAG,IAAI;sBAItB,gBAAgB,GAAG,IAAI;WAWI,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAM3D,OAAO,KAAK,EACV,yBAAyB,EAE1B,MAAM,0BAA0B,CAAC;AAUlC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AA4LD,QAAA,MAAM,KAAK;iBAvBQ,IAAI;kBAIH,IAAI;6BAIS,MAAM,KAAG,IAAI;sBAItB,gBAAgB,GAAG,IAAI;WAWI,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/forms/Listbox.svelte

@@ -1,10 +1,21 @@
 <script lang="ts">
-import { highlightControl, revealControl } from './control-dom.js';
+import {
+  emitControlChange,
+  highlightControl,
+  revealControl,
+} from './control-dom.js';
 import type {
   ControlInteractionOptions,
   ControlOption,
 } from './control-interaction.js';
-import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import {
+  recordControlUserEdit,
+  tryGetControlInteractionContext,
+} from './control-interaction-context.js';
+import {
+  prepareEnabledOptionValue,
+  validatesEnabledOption,
+} from './control-value-validation.js';
 import { useControlRegistration } from './use-control-registration.svelte.js';
 export interface Props {
   options: ControlOption[];
@@ -35,11 +46,20 @@ const controlId = $derived(
     ? undefined
     : (interaction?.id ?? name ?? `listbox-${instanceId}`),
 );
-function select(next: unknown) {
+function select(next: unknown, userEdit = false) {
   const option = options.find((item) => String(item.value) === String(next));
   if (!option || option.disabled || disabled) return;
+  const changed = !Object.is(value, option.value);
   value = option.value;
   onvaluechange?.(option.value);
+  if (userEdit && changed) {
+    recordControlUserEdit(
+      interactionContext,
+      controlId,
+      interaction === false ? undefined : interaction?.subject,
+    );
+    if (rootEl) emitControlChange(rootEl);
+  }
 }
 function move(event: KeyboardEvent, index: number) {
   let next = index;
@@ -73,21 +93,28 @@ useControlRegistration(() => {
       options,
     },
     getValue: () => value,
+    prepareValue: (next) => prepareEnabledOptionValue(options, next),
     setValue: select,
     clear: () => {
       value = undefined;
+      return true;
     },
     focus: () => optionEls.find((item) => item && !item.disabled)?.focus(),
     reveal: () => revealControl(root),
     highlight: (durationMs) => highlightControl(root, durationMs),
-    getState: () => ({ disabled }),
+    validateValue: (next) => validatesEnabledOption(options, next),
+    getState: () => ({
+      disabled: disabled || root.closest('fieldset:disabled') !== null,
+    }),
   };
 });
 </script>
-<div bind:this={rootEl} class="listbox {className}" role="listbox" aria-label={label} aria-disabled={disabled} data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}>
+<div bind:this={rootEl} class="listbox {className}" role="listbox" aria-label={label} aria-disabled={disabled} data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
+  data-smrt-subject-type={interaction === false ? undefined : interaction?.subject?.type}
+  data-smrt-subject-id={interaction === false ? undefined : interaction?.subject?.id}>
   {#each options as option, index (option.value)}<button bind:this={optionEls[index]} type="button" role="option" aria-selected={value === option.value}
     disabled={disabled || option.disabled} tabindex={value === option.value || (value === undefined && index === 0) ? 0 : -1}
-    onkeydown={(event) => move(event, index)} onclick={() => select(option.value)}>{option.label}</button>{/each}
+    onkeydown={(event) => move(event, index)} onclick={() => select(option.value, true)}>{option.label}</button>{/each}
 </div>
 <style>
   .listbox { display: grid; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); }

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

@@ -1 +1 @@
-{"version":3,"file":"Listbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Listbox.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,yBAAyB,EACzB,aAAa,EACd,MAAM,0BAA0B,CAAC;AAIlC,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkFD,QAAA,MAAM,OAAO,gDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Listbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Listbox.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,yBAAyB,EACzB,aAAa,EACd,MAAM,0BAA0B,CAAC;AAWlC,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiGD,QAAA,MAAM,OAAO,gDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}