@happyvertical/smrt-svelte 0.43.4 → 0.43.6

package/dist/components/forms/SelectInput.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 import { Icon } from '@happyvertical/smrt-ui';
 import { matchOption } from '@happyvertical/smrt-ui/utils/forms/formatters.js';
-import { onDestroy, onMount } from 'svelte';
 import { useAppState } from '../../hooks/useAppState.svelte.js';
 import {
   type FieldDefinition,
   tryGetFormContext,
 } from '../../state/form-context.js';
+import { prepareTextFieldValue } from './prepare-field-value.js';
 import type { SelectOption } from './types.js';
 
 export interface Props {
@@ -55,18 +55,21 @@ function updateValue(newValue: string) {
 }
 
 // Register with form context
-onMount(() => {
+$effect(() => {
   if (formContext) {
-    const optionsDesc = options.map((o) => o.label).join(', ');
-    const fullDescription = description
-      ? `${description}. Options: ${optionsDesc}`
-      : `Options: ${optionsDesc}`;
-
+    const registeredName = name;
     const fieldDef: FieldDefinition = {
-      name,
+      name: registeredName,
       type: 'select',
-      label,
-      description: fullDescription,
+      get label() {
+        return label;
+      },
+      get description() {
+        const optionsDescription = options.map((o) => o.label).join(', ');
+        return description
+          ? `${description}. Options: ${optionsDescription}`
+          : `Options: ${optionsDescription}`;
+      },
       setValue: (v: unknown) => {
         const strVal = String(v ?? '');
         const matched = matchOption(strVal, options);
@@ -77,20 +80,33 @@ onMount(() => {
         }
       },
       getValue: () => value,
-      constraints: { required },
-      options: options.map((option) => ({
-        value: option.value,
-        label: option.label,
-      })),
+      prepareValue: (candidate) => {
+        const next = prepareTextFieldValue(candidate);
+        if (next.trim() === '') return next;
+        return matchOption(next, options) ?? next;
+      },
+      clear: () => {
+        updateValue('');
+        return true;
+      },
+      getState: () => ({ disabled }),
+      get constraints() {
+        return { required };
+      },
+      get options() {
+        return options.map((option) => ({
+          value: option.value,
+          label: option.label,
+        }));
+      },
+      validateValue: (candidate) => {
+        const next = String(candidate ?? '');
+        if (next === '') return !required;
+        return options.some((option) => option.value === next);
+      },
       validate: () => !required || value.trim().length > 0,
     };
-    formContext.registerField(fieldDef);
-  }
-});
-
-onDestroy(() => {
-  if (formContext) {
-    formContext.unregisterField(name);
+    return formContext.registerField(fieldDef);
   }
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/SelectInput.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAkHD,QAAA,MAAM,WAAW,gDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SelectInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/SelectInput.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAkID,QAAA,MAAM,WAAW,gDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/forms/TextInput.svelte

@@ -5,7 +5,6 @@ import {
   formatEmail,
   formatText,
 } from '@happyvertical/smrt-ui/utils/forms/formatters.js';
-import { onDestroy, onMount } from 'svelte';
 import { useAppState } from '../../hooks/useAppState.svelte.js';
 import { useSTT } from '../../hooks/useSTT.svelte.js';
 import { M } from '../../i18n/strings.forms.js';
@@ -14,6 +13,7 @@ import {
   type FieldDefinition,
   tryGetFormContext,
 } from '../../state/form-context.js';
+import { prepareTextFieldValue } from './prepare-field-value.js';
 
 const { t } = useI18n();
 
@@ -78,10 +78,12 @@ const isInitializing = $derived(stt.isInitializing);
 const downloadProgress = $derived(stt.downloadProgress);
 
 // Validation
-const isValidEmail = $derived.by(() => {
-  if (type !== 'email' || !value) return true;
-  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
-});
+function emailValueIsValid(candidate: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(candidate);
+}
+const isValidEmail = $derived(
+  type !== 'email' || !value || emailValueIsValid(value),
+);
 const showInvalid = $derived(type === 'email' && value && !isValidEmail);
 
 // Helper to update value (works with $bindable)
@@ -91,29 +93,41 @@ function updateValue(newValue: string) {
 }
 
 // Register with form context
-onMount(() => {
+$effect(() => {
   if (formContext) {
+    const registeredName = name;
     const fieldDef: FieldDefinition = {
-      name,
-      type: type === 'email' ? 'email' : 'text',
-      label,
-      description,
+      name: registeredName,
+      get type() {
+        return type === 'email' ? 'email' : 'text';
+      },
+      get label() {
+        return label;
+      },
+      get description() {
+        return description;
+      },
       setValue: (v: unknown) => {
         updateValue(String(v ?? ''));
       },
       getValue: () => value,
-      constraints: { required },
+      prepareValue: prepareTextFieldValue,
+      getState: () => ({ disabled }),
+      get constraints() {
+        return { required };
+      },
+      validateValue: (candidate) => {
+        const next = String(candidate ?? '');
+        return (
+          (!required || next.trim().length > 0) &&
+          (type !== 'email' || next.length === 0 || emailValueIsValid(next))
+        );
+      },
       validate: () =>
         (!required || value.trim().length > 0) &&
         (type !== 'email' || value.length === 0 || isValidEmail),
     };
-    formContext.registerField(fieldDef);
-  }
-});
-
-onDestroy(() => {
-  if (formContext) {
-    formContext.unregisterField(name);
+    return formContext.registerField(fieldDef);
   }
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/TextInput.svelte.ts"],"names":[],"mappings":"AAoBA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AA6PD,QAAA,MAAM,SAAS,gDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TextInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/TextInput.svelte.ts"],"names":[],"mappings":"AAoBA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AA2QD,QAAA,MAAM,SAAS,gDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/forms/TextareaInput.svelte

@@ -2,7 +2,6 @@
 import { Icon, ripple } from '@happyvertical/smrt-ui';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { formatText } from '@happyvertical/smrt-ui/utils/forms/formatters.js';
-import { onDestroy, onMount } from 'svelte';
 import { useAppState } from '../../hooks/useAppState.svelte.js';
 import { useSTT } from '../../hooks/useSTT.svelte.js';
 import { M } from '../../i18n/strings.forms.js';
@@ -11,6 +10,7 @@ import {
   type FieldDefinition,
   tryGetFormContext,
 } from '../../state/form-context.js';
+import { prepareTextFieldValue } from './prepare-field-value.js';
 
 const { t } = useI18n();
 
@@ -75,31 +75,38 @@ function updateValue(newValue: string) {
 }
 
 // Register with form context
-onMount(() => {
+$effect(() => {
   if (formContext) {
+    const registeredName = name;
     const fieldDef: FieldDefinition = {
-      name,
+      name: registeredName,
       type: 'textarea',
-      label,
-      description,
+      get label() {
+        return label;
+      },
+      get description() {
+        return description;
+      },
       setValue: (v: unknown) => {
-        if (appendMode && value) {
-          updateValue(`${value}\n${String(v ?? '')}`);
-        } else {
-          updateValue(String(v ?? ''));
-        }
+        updateValue(String(v ?? ''));
       },
       getValue: () => value,
-      constraints: { required },
+      prepareValue: (candidate) => {
+        const next = prepareTextFieldValue(candidate);
+        return appendMode && value ? `${value}\n${next}` : next;
+      },
+      // The review editor contains the complete displayed text, not a new
+      // append intent. Canonicalize its scalar shape without appending again.
+      prepareReviewedValue: prepareTextFieldValue,
+      getState: () => ({ disabled }),
+      get constraints() {
+        return { required };
+      },
+      validateValue: (candidate) =>
+        !required || String(candidate ?? '').trim().length > 0,
       validate: () => !required || value.trim().length > 0,
     };
-    formContext.registerField(fieldDef);
-  }
-});
-
-onDestroy(() => {
-  if (formContext) {
-    formContext.unregisterField(name);
+    return formContext.registerField(fieldDef);
   }
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"TextareaInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/TextareaInput.svelte.ts"],"names":[],"mappings":"AAiBA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAiOD,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TextareaInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/TextareaInput.svelte.ts"],"names":[],"mappings":"AAiBA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAwOD,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/forms/__tests__/AddressInput.behavior.test.js

@@ -11,10 +11,21 @@
 import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
 import { fireEvent, render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
+import { tick } from 'svelte';
 import { describe, expect, it, vi } from 'vitest';
+const formCapture = vi.hoisted(() => ({
+    field: undefined,
+}));
 vi.mock('../../../hooks/useAppState.svelte.js', () => ({
     useAppState: () => ({ state: { mode: 'default' }, setMode: vi.fn() }),
 }));
+vi.mock('../../../state/form-context.js', () => ({
+    tryGetFormContext: () => ({
+        registerField: (field) => {
+            formCapture.field = field;
+        },
+    }),
+}));
 import AddressInput from '../AddressInput.svelte';
 describe('AddressInput — behavior', () => {
     it('typing the street composes a value including the street', async () => {
@@ -102,6 +113,89 @@ describe('AddressInput — behavior', () => {
         const countries = screen.getByLabelText('Country');
         expect(countries.querySelector('option[value="US"]')?.textContent).toBe('United States');
     });
+    it('parses spoken countries only from the live configured options', async () => {
+        const onchange = vi.fn();
+        render(AddressInput, {
+            props: {
+                name: 'addr',
+                label: 'Address',
+                fields: ['country'],
+                countries: [{ value: 'FR', label: 'France' }],
+                onchange,
+            },
+        });
+        await tick();
+        const field = formCapture.field;
+        if (!field)
+            throw new Error('AddressInput did not register its field');
+        field.setValue('Canada');
+        expect(onchange).not.toHaveBeenCalled();
+        expect(field.getValue()).toEqual({ country: 'FR' });
+        field.setValue('France');
+        expect(onchange).toHaveBeenLastCalledWith({ country: 'FR' });
+        field.setValue('FR');
+        expect(onchange).toHaveBeenLastCalledWith({ country: 'FR' });
+    });
+    it('retains spoken Canada and United States defaults', async () => {
+        const onchange = vi.fn();
+        render(AddressInput, {
+            props: {
+                name: 'addr',
+                label: 'Address',
+                fields: ['country'],
+                onchange,
+            },
+        });
+        await tick();
+        const field = formCapture.field;
+        if (!field)
+            throw new Error('AddressInput did not register its field');
+        field.setValue('Canada');
+        expect(onchange).toHaveBeenLastCalledWith({ country: 'CA' });
+        field.setValue('United States');
+        expect(onchange).toHaveBeenLastCalledWith({ country: 'US' });
+    });
+    it('accepts valid incremental setters for a required address', async () => {
+        const onchange = vi.fn();
+        render(AddressInput, {
+            props: {
+                name: 'addr',
+                label: 'Address',
+                required: true,
+                countries: [{ value: 'FR', label: 'France' }],
+                onchange,
+            },
+        });
+        await tick();
+        const field = formCapture.field;
+        if (!field)
+            throw new Error('AddressInput did not register its field');
+        field.setValue({ city: 'Paris' });
+        expect(onchange).toHaveBeenLastCalledWith({
+            street: '',
+            city: 'Paris',
+            province: '',
+            postalCode: '',
+            country: 'FR',
+        });
+        expect(field.validateValue?.({ city: 'Paris' })).toBe(false);
+        expect(field.validate?.()).toBe(false);
+        expect(field.webMcpSchema).toMatchObject({
+            required: ['street', 'city', 'province', 'postalCode', 'country'],
+        });
+        field.setValue('France');
+        expect(onchange).toHaveBeenLastCalledWith(expect.objectContaining({ city: 'Paris', country: 'FR' }));
+        onchange.mockClear();
+        field.setValue({ country: 'CA' });
+        expect(onchange).not.toHaveBeenCalled();
+        expect(field.getValue()).toEqual({
+            street: '',
+            city: 'Paris',
+            province: '',
+            postalCode: '',
+            country: 'FR',
+        });
+    });
     it('marks every field invalid and links one alert when error is set', () => {
         render(AddressInput, {
             props: { name: 'addr', label: 'Address', error: 'Address required' },

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

@@ -94,7 +94,7 @@ describe('Form — submit value collection', () => {
         // Both fields registered → both collected.
         await userEvent.click(screen.getByRole('button', { name: 'Submit' }));
         expect(onsubmit).toHaveBeenLastCalledWith({ fullname: 'Keep', age: 7 });
-        // Unmount the age field; Form.unregisterField drops it from the next submit.
+        // Unmount the age field; its generation-bound disposer drops it from submit.
         await rerender({
             onsubmit,
             textValue: 'Keep',

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

@@ -0,0 +1,68 @@
+import { render, screen, waitFor } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const sttStub = {
+    isListening: false,
+    isInitializing: false,
+    isReady: true,
+    adapterType: 'browser-speech',
+    downloadProgress: 0,
+    lastResult: '',
+    initialize: vi.fn(async () => { }),
+    start: vi.fn(async () => { }),
+    stop: vi.fn(async () => { }),
+};
+vi.mock('../../../hooks/useAppState.svelte.js', () => ({
+    useAppState: () => ({ state: { mode: 'smrt' }, setMode: vi.fn() }),
+}));
+vi.mock('../../../hooks/useSTT.svelte.js', () => ({
+    useSTT: () => sttStub,
+}));
+import FormExtractionValues from './form-extraction-values.fixture.svelte';
+describe('Form voice extraction', () => {
+    beforeEach(() => {
+        sttStub.lastResult = '';
+        sttStub.start.mockClear();
+        sttStub.stop.mockClear();
+    });
+    it('skips an invalid earlier field and applies a later valid field', async () => {
+        const ageChanged = vi.fn();
+        const textChanged = vi.fn();
+        render(FormExtractionValues, {
+            props: { onagechange: ageChanged, ontextchange: textChanged },
+        });
+        const listen = screen.getByRole('button', { name: 'Speak all fields' });
+        await userEvent.click(listen);
+        sttStub.lastResult = 'age nonsense full name Ada Lovelace';
+        await userEvent.click(listen);
+        await waitFor(() => expect(screen.getByRole('textbox', { name: 'Full name' })).toHaveValue('Ada Lovelace'));
+        expect(ageChanged).not.toHaveBeenCalled();
+        expect(textChanged).toHaveBeenLastCalledWith('Ada Lovelace');
+        expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+        expect(screen.queryByText('staged_value_invalid')).not.toBeInTheDocument();
+    });
+    it('parses a spoken date range and continues to a later field', async () => {
+        const datesChanged = vi.fn();
+        const textChanged = vi.fn();
+        render(FormExtractionValues, {
+            props: {
+                showDateRange: true,
+                ondateschange: datesChanged,
+                ontextchange: textChanged,
+            },
+        });
+        const listen = screen.getByRole('button', { name: 'Speak all fields' });
+        await userEvent.click(listen);
+        sttStub.lastResult =
+            'dates from January 15 2026 to January 20 2026 full name Grace Hopper';
+        await userEvent.click(listen);
+        await waitFor(() => expect(datesChanged).toHaveBeenLastCalledWith({
+            startDate: '2026-01-15',
+            endDate: '2026-01-20',
+        }));
+        expect(screen.getByRole('textbox', { name: 'Full name' })).toHaveValue('Grace Hopper');
+        expect(textChanged).toHaveBeenLastCalledWith('Grace Hopper');
+        expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+        expect(screen.queryByText('staged_value_invalid')).not.toBeInTheDocument();
+    });
+});

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

@@ -7,6 +7,7 @@
  * The aria-live status region is L1's deliverable (#1420); here we cover the
  * form element, children rendering, the onsubmit contract, and axe.
  */
+import { createControlInteractionRegistry } from '@happyvertical/smrt-ui/forms';
 import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
@@ -55,4 +56,31 @@ describe('Form', () => {
         const { container } = render(Form, { props: { children: submitButton() } });
         await expectNoA11yViolations(container);
     });
+    it('uses the shared staged-edit review contract for local human apply', async () => {
+        let value = 'Ada';
+        const registry = createControlInteractionRegistry({
+            isLocalGesture: () => true,
+        });
+        const identity = { formId: 'profile', controlId: 'display-name' };
+        registry.register({
+            identity,
+            metadata: { kind: 'text', label: 'Display name' },
+            getValue: () => value,
+            setValue: (next) => {
+                value = String(next);
+            },
+        });
+        render(Form, {
+            props: {
+                children: submitButton(),
+                formId: 'profile',
+                interactionRegistry: registry,
+            },
+        });
+        await registry.execute({ action: 'stage', identity, value: 'Grace' }, { source: 'agent' });
+        expect(value).toBe('Ada');
+        expect(screen.getByRole('region', { name: 'Review proposed changes' })).toBeInTheDocument();
+        await userEvent.click(screen.getByRole('button', { name: 'Apply Display name' }));
+        expect(value).toBe('Grace');
+    });
 });