@happyvertical/smrt-ui 0.43.4 → 0.43.5

package/dist/components/forms/Switch.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';
 
@@ -57,10 +62,7 @@ const controlId = $derived(
     : (resolvedInteraction.id ?? name ?? resolvedId),
 );
 function setChecked(next: unknown) {
-  checked =
-    typeof next === 'string'
-      ? ['true', '1', 'yes', 'on'].includes(next.toLowerCase())
-      : Boolean(next);
+  checked = booleanControlValue(next);
   if (inputEl) emitControlChange(inputEl);
 }
 function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
@@ -84,15 +86,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'),
       valid: element.validity.valid,
       validationMessage: element.validationMessage || undefined,
     }),
@@ -100,7 +107,9 @@ useControlRegistration(() => {
 });
 </script>
 
-<label class="switch switch--{size} {className}" class:switch--disabled={disabled} data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}>
+<label class="switch switch--{size} {className}" class:switch--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}>
   {#if label && labelPosition === 'left'}<span>{label}</span>{/if}
   <span class="switch__control">
     <input bind:this={inputEl} id={resolvedId} type="checkbox" role="switch" {name} {value} {disabled} {required} checked={checked}

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Switch.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,CACV,mBAAmB,EACnB,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAC/C;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AAoGD,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Switch.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Switch.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,CACV,mBAAmB,EACnB,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAC/C;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AAuGD,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/forms/TagsInput.svelte

@@ -1,7 +1,15 @@
 <script lang="ts">
-import { highlightControl, revealControl } from './control-dom.js';
+import {
+  emitControlChange,
+  highlightControl,
+  revealControl,
+} from './control-dom.js';
 import type { ControlInteractionOptions } from './control-interaction.js';
-import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import {
+  recordControlUserEdit,
+  tryGetControlInteractionContext,
+} from './control-interaction-context.js';
+import { validatesStringArray } from './control-value-validation.js';
 import { useControlRegistration } from './use-control-registration.svelte.js';
 export interface Props {
   values?: string[];
@@ -48,17 +56,30 @@ function commit(raw: string) {
   values = [...values, tag];
   draft = '';
   onvalueschange?.(values);
+  recordControlUserEdit(
+    interactionContext,
+    controlId,
+    interaction === false ? undefined : interaction?.subject,
+  );
+  if (rootEl) emitControlChange(rootEl);
 }
 function remove(index: number) {
+  if (index < 0 || index >= values.length) return;
   values = values.filter((_, candidate) => candidate !== index);
   onvalueschange?.(values);
+  recordControlUserEdit(
+    interactionContext,
+    controlId,
+    interaction === false ? undefined : interaction?.subject,
+  );
+  if (rootEl) emitControlChange(rootEl);
 }
 function setValues(next: unknown) {
   if (!Array.isArray(next)) return;
-  values = next
+  const normalized = next
     .map(String)
-    .filter((tag, index, all) => allowDuplicates || all.indexOf(tag) === index)
-    .slice(0, maxTags);
+    .filter((tag, index, all) => allowDuplicates || all.indexOf(tag) === index);
+  values = maxTags === undefined ? normalized : normalized.slice(0, maxTags);
   onvalueschange?.(values);
 }
 function handleKeydown(event: KeyboardEvent) {
@@ -85,15 +106,22 @@ useControlRegistration(() => {
     },
     getValue: () => [...values],
     setValue: setValues,
-    clear: () => setValues([]),
+    clear: () => {
+      setValues([]);
+      return true;
+    },
     focus: () => input.focus(),
     reveal: () => revealControl(root),
     highlight: (durationMs) => highlightControl(root, durationMs),
-    getState: () => ({ disabled }),
+    validateValue: (next) =>
+      validatesStringArray(next, maxTags, allowDuplicates),
+    getState: () => ({ disabled: input.matches(':disabled') }),
   };
 });
 </script>
-<div class="tags-field {className}"><label for={inputId}>{label}</label><div bind:this={rootEl} class="tags" data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}>
+<div class="tags-field {className}"><label for={inputId}>{label}</label><div bind:this={rootEl} class="tags" 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 values as tag, index}<span class="tag">{tag}<button type="button" disabled={disabled} aria-label={`Remove ${tag}`} onclick={() => remove(index)}>×</button><input type="hidden" name={name ? `${name}[]` : undefined} value={tag} /></span>{/each}
   <input bind:this={inputEl} id={inputId} {placeholder} {disabled} bind:value={draft} onkeydown={handleKeydown} onblur={() => commit(draft)} />
 </div></div>

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

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/TagsInput.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAI1E,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6FD,QAAA,MAAM,SAAS,iDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TagsInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/TagsInput.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAQ1E,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgHD,QAAA,MAAM,SAAS,iDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/forms/Textarea.svelte

@@ -7,7 +7,12 @@ import {
 } from './control-dom.js';
 import type { ControlInteractionOptions } from './control-interaction.js';
 import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import {
+  prepareTextControlValue,
+  validateNativeTextValue,
+} 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<HTMLTextareaAttributes, 'class' | 'value'> {
   value?: string;
@@ -60,14 +65,14 @@ function setControlValue(next: unknown) {
   if (textareaEl) emitControlChange(textareaEl);
 }
 
-$effect(() => {
-  const context = controlInteraction;
+useControlRegistration(() => {
   const element = textareaEl;
   const controlId = resolvedControlId;
   const options = resolvedInteraction;
-  if (!context || !element || !controlId || options === false) return;
-  return context.registry.register({
-    identity: { formId: context.formId, controlId, subject: options.subject },
+  if (!element || !controlId || options === false) return false;
+  return {
+    controlId,
+    subject: options.subject,
     metadata: {
       kind: 'textarea',
       label: formGroup?.().label ?? ariaLabel ?? undefined,
@@ -82,19 +87,24 @@ $effect(() => {
       },
     },
     getValue: () => value,
+    prepareValue: prepareTextControlValue,
     setValue: setControlValue,
-    clear: () => setControlValue(''),
+    clear: () => {
+      setControlValue('');
+      return true;
+    },
     focus: () => element.focus(),
     reveal: () => revealControl(element),
     highlight: (durationMs) => highlightControl(element, durationMs),
     validate: () => element.reportValidity(),
+    validateValue: (next) => validateNativeTextValue(element, next),
     getState: () => ({
-      disabled: element.disabled,
+      disabled: element.matches(':disabled'),
       readonly: element.readOnly,
       valid: element.validity.valid,
       validationMessage: element.validationMessage || undefined,
     }),
-  });
+  };
 });
 
 export function focus(): void {
@@ -122,6 +132,8 @@ export function getElement(): HTMLTextAreaElement | null {
 		class="textarea {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}
 ></textarea>
 

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Textarea.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAM9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAK1E,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AAyGD,QAAA,MAAM,QAAQ;iBAfK,IAAI;sBAIC,mBAAmB,GAAG,IAAI;WAWI,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Textarea.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAM9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAU1E,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;CACjD;AAgHD,QAAA,MAAM,QAAQ;iBAfK,IAAI;sBAIC,mBAAmB,GAAG,IAAI;WAWI,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/forms/ToggleButton.svelte

@@ -7,7 +7,11 @@ import {
   revealControl,
 } from './control-dom.js';
 import type { ControlInteractionOptions } from './control-interaction.js';
-import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import {
+  recordControlUserEdit,
+  tryGetControlInteractionContext,
+} from './control-interaction-context.js';
+import { prepareBooleanControlValue } from './control-value-validation.js';
 import { useControlRegistration } from './use-control-registration.svelte.js';
 
 export interface Props extends Omit<HTMLButtonAttributes, 'class'> {
@@ -41,6 +45,12 @@ function setPressed(next: unknown) {
 }
 function handleClick(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
   pressed = !pressed;
+  recordControlUserEdit(
+    interactionContext,
+    controlId,
+    interaction === false ? undefined : interaction?.subject,
+  );
+  if (buttonEl) emitControlChange(buttonEl);
   onclick?.(event);
 }
 useControlRegistration(() => {
@@ -58,17 +68,24 @@ useControlRegistration(() => {
       writable: interaction?.writable,
     },
     getValue: () => pressed,
+    prepareValue: prepareBooleanControlValue,
     setValue: setPressed,
-    clear: () => setPressed(false),
+    clear: () => {
+      setPressed(false);
+      return true;
+    },
     focus: () => element.focus(),
     reveal: () => revealControl(element),
     highlight: (durationMs) => highlightControl(element, durationMs),
-    getState: () => ({ disabled: element.disabled }),
+    validateValue: (next) => typeof next === 'boolean',
+    getState: () => ({ disabled: element.matches(':disabled') }),
   };
 });
 </script>
 <button bind:this={buttonEl} id={resolvedId} type="button" {name} {disabled} class="toggle-button {className}" class:pressed
   aria-pressed={pressed} aria-label={ariaLabel} 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}
   onclick={handleClick} {...rest}>{@render children?.()}</button>
 <style>
   .toggle-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0 var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); cursor: pointer; }

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/ToggleButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAM5D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAK1E,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiED,QAAA,MAAM,YAAY,kDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ToggleButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/ToggleButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAM5D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAS1E,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6ED,QAAA,MAAM,YAAY,kDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/forms/__tests__/Form.test.js

@@ -10,10 +10,36 @@ import userEvent from '@testing-library/user-event';
 import { createRawSnippet } from 'svelte';
 import { describe, expect, it, vi } from 'vitest';
 import { expectNoA11yViolations } from '../../../test-support/a11y';
+import { createControlInteractionRegistry, executeLocalControlCommand, } from '../control-interaction.js';
 import Form from '../Form.svelte';
 const children = createRawSnippet(() => ({
     render: () => '<button type="submit">Save</button>',
 }));
+const controlledInput = createRawSnippet(() => ({
+    render: () => '<input data-smrt-control="display-name" />',
+}));
+function dispatchTrusted(target, type) {
+    const event = new Event(type, { bubbles: true });
+    const implementationSymbol = Object.getOwnPropertySymbols(event).find((symbol) => symbol.description === 'impl');
+    if (!implementationSymbol)
+        throw new Error('missing JSDOM event internals');
+    target.addEventListener(type, (dispatched) => {
+        const implementation = dispatched[implementationSymbol];
+        implementation.isTrusted = true;
+    }, { capture: true, once: true });
+    target.dispatchEvent(event);
+}
+function dispatchLocalGesture(execute) {
+    const target = new EventTarget();
+    let pending;
+    target.addEventListener('click', (event) => {
+        pending = execute(event);
+    }, { once: true });
+    target.dispatchEvent(new Event('click'));
+    if (!pending)
+        throw new Error('local gesture handler did not run');
+    return pending;
+}
 describe('Form', () => {
     it('renders a <form> with forwarded attributes and its children', () => {
         const { container } = render(Form, {
@@ -40,6 +66,86 @@ describe('Form', () => {
         expect(onsubmit).toHaveBeenCalledTimes(1);
         expect(onsubmit.mock.calls[0][0].defaultPrevented).toBe(false);
     });
+    it('records trusted value edits but not focus-only clicks', () => {
+        const registry = createControlInteractionRegistry();
+        const recordUserEdit = vi.spyOn(registry, 'recordUserEdit');
+        const { container } = render(Form, {
+            props: {
+                formId: 'profile',
+                interactionRegistry: registry,
+                children: controlledInput,
+            },
+        });
+        const input = container.querySelector('input');
+        if (!input)
+            throw new Error('Expected controlled input');
+        // A click can focus a field without changing it. Direct-edit tracking is
+        // deliberately limited to input/change, while composite controls record
+        // their successful mutations explicitly.
+        dispatchTrusted(input, 'click');
+        expect(recordUserEdit).not.toHaveBeenCalled();
+        dispatchTrusted(input, 'input');
+        expect(recordUserEdit).toHaveBeenCalledOnce();
+        expect(recordUserEdit).toHaveBeenCalledWith({
+            formId: 'profile',
+            controlId: 'display-name',
+            subject: undefined,
+        });
+    });
+    it('preserves a consumer-normalized human edit while an async setter rolls back', async () => {
+        let releaseSetter;
+        let setterStarted;
+        const setterBlocked = new Promise((resolve) => {
+            releaseSetter = resolve;
+        });
+        const setterStartedPromise = new Promise((resolve) => {
+            setterStarted = resolve;
+        });
+        const registry = createControlInteractionRegistry({
+            isLocalGesture: () => true,
+        });
+        const { container } = render(Form, {
+            props: {
+                formId: 'profile',
+                interactionRegistry: registry,
+                children: controlledInput,
+                oninput: (event) => {
+                    const input = event.target;
+                    input.value = input.value.replace(/^./, (character) => character.toUpperCase());
+                },
+            },
+        });
+        const input = container.querySelector('input');
+        if (!input)
+            throw new Error('Expected controlled input');
+        const identity = { formId: 'profile', controlId: 'display-name' };
+        registry.register({
+            identity,
+            metadata: { kind: 'text' },
+            getValue: () => input.value,
+            setValue: async (next) => {
+                input.value = String(next);
+                setterStarted?.();
+                await setterBlocked;
+                throw new Error('setter_failed');
+            },
+            restoreValue: (next) => {
+                input.value = String(next);
+            },
+        });
+        await registry.execute({ action: 'stage', identity, value: 'Grace' }, { source: 'agent' });
+        const applying = dispatchLocalGesture((event) => executeLocalControlCommand(registry, { action: 'apply', identity, revision: 1 }, event));
+        await setterStartedPromise;
+        input.value = 'katherine';
+        dispatchTrusted(input, 'input');
+        expect(input.value).toBe('Katherine');
+        releaseSetter?.();
+        expect(await applying).toMatchObject({
+            ok: false,
+            reason: 'setter_failed',
+        });
+        expect(input.value).toBe('Katherine');
+    });
     it('is axe-clean', async () => {
         const { container } = render(Form, {
             props: { 'aria-label': 'Profile form', children },