@happyvertical/smrt-ui 0.43.3 → 0.43.5

package/AGENTS.md

@@ -112,6 +112,39 @@ other text pairing clears WCAG AA in both schemes.
   interaction registry. Keep chat/voice transports outside this package;
   mutations must retain sensitivity checks and the stage → confirmed apply
   policy.
+- Agent-originated form values remain proposals: the registry records their
+  provenance, timestamp, and revision, while `StagedControlReview` is the shared
+  review/apply surface mounted by both base and rich Forms. Agents can stage but
+  cannot self-confirm; only a local human handler submits confirmed apply,
+  discard, clear, or undo commands after the registry validates a trusted DOM
+  gesture while its event is actively dispatching. Retained events are rejected,
+  and the complete command or batch is snapshotted synchronously before gesture
+  consumption. Serialized or programmatic `source: 'user', confirmed: true`
+  input is not confirmation.
+  `StagedControlReview` marks its complete edited Apply value with
+  `reviewedValueIsCanonical: true`, but the marker grants no authority and is
+  honored only for a current staged entry under the registry's exact local
+  gesture proof. A control with proposal-relative preparation implements
+  `prepareReviewedValue` to validate/canonicalize the complete displayed value;
+  without that hook, marked edits still pass through ordinary `prepareValue`.
+  Only an unchanged value exactly equal to the stored staged canonical value can
+  reuse that trusted stored value without either hook.
+  Secret controls never accept staging, and sensitive/secret
+  values stay redacted in snapshots, events, policy callbacks, and review UI.
+  Batch execution is ordered best-effort and returns one result per command;
+  review-surface batch actions exclude stale and invalid proposals, which remain
+  visible with per-field feedback.
+  `executeBatch` is additive and optional for injected legacy registries; the
+  framework falls back to ordered `execute` calls without weakening the private
+  one-shot gesture proof on factory-created registries.
+  Rejecting async custom setters and clear handlers roll back by default;
+  controls that accept concurrent direct edits expose a monotonic revision and
+  user value from `getUserEditSnapshot()` so rollback restores newer human input;
+  fallible async setters expose an infallible `restoreValue()` path. Async hooks
+  issue nested commands through their optional final `ControlExtensionContext`;
+  same-control mutations are rejected there without timing out unrelated queued
+  commands. Context-aware setters implement the additive `setValueWithContext`
+  hook; legacy `setValue` is always invoked with exactly one argument.
 
 ## Gotchas
 

package/README.md

@@ -99,10 +99,56 @@ without coupling controls to a transport:
 ```
 
 Controls publish serializable metadata, constraints, options, sensitivity, and
-capabilities. Adapters can focus, reveal, highlight, explain, validate, stage,
-apply, clear, or undo. Agent mutations are denied for secret/read-only controls
-and require explicit confirmation before apply, clear, or undo. Staging is
-separate so the UI can show a proposal before it changes user state.
+capabilities. Adapters can focus, reveal, highlight, explain, validate, and
+stage reviewable proposals. Agents cannot apply, discard, clear, or undo;
+those value-changing actions require a trusted local gesture handled by the
+framework review surface. Secret/read-only controls reject agent mutations.
+Staging remains separate so proposals never change user state before review.
+Custom local review controls can call `executeLocalControlCommand` or
+`executeLocalControlBatch` synchronously from their DOM handlers; the registry
+requires the event to still be actively dispatching, snapshots the complete
+command, and consumes the gesture before authorizing a value-changing command.
+Retaining an event for later use is rejected even when it remains trusted.
+Serialized or programmatic `source: 'user', confirmed: true` input is never
+confirmation. Sensitive and secret values, validation details, failures, and
+events remain redacted from every public surface.
+The shared review surface marks its complete edited Apply value with
+`reviewedValueIsCanonical: true`. That marker carries no authority: the registry
+honors it only for a current staged entry after validating the exact command
+under an actively dispatching local gesture. Controls with non-idempotent
+proposal preparation can implement `prepareReviewedValue(value)` to validate or
+canonicalize the complete displayed value without re-applying proposal-relative
+behavior. Controls without that hook route marked edits through their ordinary
+`prepareValue`, so a generic marker never bypasses custom normalization or
+rejection. An unchanged value exactly equal to the stored staged canonical value
+uses that trusted stored value directly.
+Registries expose optional `refresh(formId)` notification for hosts whose live
+metadata or runtime-state getters change without a registration event; it
+updates subscribers without discarding an internal staged proposal.
+`executeBatch` is an additive optional registry method; Forms fall back to
+ordered `execute` calls for older injected registries. Factory-created
+registries retain the framework's private, one-shot gesture proof, while an
+older custom registry remains responsible for its pre-existing execution
+policy and accepts review actions only from a trusted browser event.
+Custom controls whose clear operation is intentionally idempotent should return
+`true` from `clear()` to affirm that the unchanged cleared value was accepted.
+Async custom setters and clear handlers are rolled back when they reject. A
+control that permits direct edits while an async mutation is pending can expose
+`getUserEditSnapshot()` and update its revision and value only for direct user
+edits so rollback restores newer human input even if the handler mutates again
+before rejecting. A fallible async setter should also expose `restoreValue()` as
+an infallible state restoration path that does not repeat the external workflow.
+Async policy, validation, setter, clear, and restoration hooks receive an
+optional final `ControlExtensionContext`. Hooks that need to issue another
+control command should use `extension.execute()`; it rejects a mutation of the
+same control immediately, while commands from independent callers remain in
+the normal ordered queue regardless of how long the hook takes. Existing hooks
+that omit the additional argument remain compatible. Setters retain their exact
+legacy `setValue(value)` invocation; a setter that needs this context implements
+the additive `setValueWithContext(value, extension)` hook instead. A hook must
+not await a same-control mutation through a captured registry reference: that
+call is indistinguishable from an independent caller in browser runtimes and,
+like any hook that never settles, can hold the ordered queue indefinitely.
 
 ## DataTable controller
 

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"}