@sectile/dom 0.7.0 → 0.9.0

package/dist/form.js

@@ -1,31 +1,52 @@
-import { applyFormEvent, createFormValues, encodeFormFieldPath, tryCreateFormState, } from '@sectile/core/form';
-import { unwrap } from '@sectile/core/result';
-export { appendFormFieldPath, createFormFieldPath, createFormRelativePath, encodeFormFieldPath, } from '@sectile/core/form';
+import { applyFormEvent, getFormField, getFormFieldIDsByIssueSource, tryCreateFormState, } from '@sectile/form/state';
+import { encodeFormFieldPath, tryCreateFormFieldPath, } from '@sectile/form/path';
+import { tryCreateFormValues } from '@sectile/form/values';
+import { FormResultError } from '@sectile/form/error';
+export { appendFormFieldPath, createFormFieldPath, createFormRelativePath, encodeFormFieldPath, } from '@sectile/form/path';
+export function defineFormSubmission(definition) {
+    return Object.freeze({ ...definition });
+}
 export function createForm(options) {
-    return unwrap(tryCreateForm(options));
+    const result = tryCreateForm(options);
+    if (!result.ok)
+        throw new FormResultError(result.error);
+    return result.value;
 }
 export function tryCreateForm(options) {
     const initial = tryCreateFormState({ issues: options.issues ?? [] });
     if (!initial.ok)
         return initial;
     const participants = new Map();
-    const subscribers = new Set();
+    const participantBaselines = new Map();
+    const participantValues = new Map();
+    const participantObservers = new Map();
+    const handledParticipantEvents = new WeakSet();
+    const pendingReinitializations = new Map();
+    const formSubscribers = new Set();
+    const fieldSubscribers = new Map();
+    const pendingNotifications = [];
     let state = initial.value;
     let revision = 0;
     let active = true;
+    let recoveringFocus = false;
     let invalidBatchPending = false;
     let validationSequence = 0;
     let validationController = null;
+    let nativeResume = null;
+    let nativeResumeToken = 0;
     let summary = options.summary;
     let schemaOption = options.schema;
     let validateOption = options.validate;
     let validateOn = new Set(options.validateOn ?? []);
     let revalidateOn = new Set(options.revalidateOn ?? ['input']);
     let submitHandler = options.onSubmit;
+    let submitErrorMapper = options.mapSubmitError;
     let resetHandler = options.onReset;
     let announceSummaryHandler = options.onAnnounceSummary;
     let stateChangeHandler = options.onStateChange;
     let updateHandler = options.onUpdate;
+    let subscriptionErrorHandler = options.onSubscriptionError;
+    let dispatchingNotifications = false;
     options.form.dataset['scope'] = 'form';
     options.form.dataset['part'] = 'root';
     const configureSummary = (element) => {
@@ -56,10 +77,12 @@ export function tryCreateForm(options) {
         validateOn = new Set(nextValidateOn);
         revalidateOn = new Set(nextRevalidateOn);
         submitHandler = next.onSubmit;
+        submitErrorMapper = next.mapSubmitError;
         resetHandler = next.onReset;
         announceSummaryHandler = next.onAnnounceSummary;
         stateChangeHandler = next.onStateChange;
         updateHandler = next.onUpdate;
+        subscriptionErrorHandler = next.onSubscriptionError;
         if (!validationChanged)
             return;
         validationController?.abort();
@@ -70,34 +93,165 @@ export function tryCreateForm(options) {
         transition({ type: 'replace-issues', source: 'schema', issues: [] });
     };
     const snapshot = () => Object.freeze({ revision, state });
-    const notify = () => {
+    const reportSubscriptionError = (error) => {
+        try {
+            subscriptionErrorHandler?.(error);
+        }
+        catch { /* subscriber failures stay isolated */ }
+    };
+    const dispatchSubscriptions = (subscriptions, value, notificationRevision) => {
+        if (subscriptions === undefined || subscriptions.size === 0)
+            return;
+        for (const subscription of [...subscriptions]) {
+            if (!subscription.active || subscription.createdRevision >= notificationRevision)
+                continue;
+            let selected;
+            try {
+                selected = subscription.select(value);
+            }
+            catch (error) {
+                reportSubscriptionError(error);
+                continue;
+            }
+            let equal;
+            try {
+                equal = subscription.equals(subscription.selected, selected);
+            }
+            catch (error) {
+                reportSubscriptionError(error);
+                continue;
+            }
+            if (equal)
+                continue;
+            const previous = subscription.selected;
+            subscription.selected = selected;
+            try {
+                subscription.listener(selected, previous);
+            }
+            catch (error) {
+                reportSubscriptionError(error);
+            }
+        }
+    };
+    const affectedFieldIDs = (event, previous, next) => {
+        if (event === 'reset' || (typeof event !== 'string' && event.type === 'reinitialize')) {
+            return null;
+        }
+        if (typeof event === 'string')
+            return [];
+        if (event.type === 'register-field'
+            || event.type === 'unregister-field'
+            || event.type === 'set-field-meta'
+            || event.type === 'replace-field-issues'
+            || event.type === 'upsert-field-issue'
+            || event.type === 'remove-field-issue'
+            || event.type === 'clear-field-issues')
+            return [event.type === 'register-field' ? event.field.id : event.id];
+        const source = event.type === 'replace-issues'
+            ? event.source
+            : event.type === 'submit-failed' || event.type === 'submit-succeeded'
+                || (event.type === 'validation-started' && event.intent === 'submission')
+                ? 'server'
+                : null;
+        if (source === null)
+            return [];
+        return [...new Set([
+                ...getFormFieldIDsByIssueSource(previous, source),
+                ...getFormFieldIDsByIssueSource(next, source),
+            ])];
+    };
+    const notify = (event, previous) => {
         revision += 1;
-        const next = snapshot();
-        stateChangeHandler?.(state);
-        updateHandler?.();
-        for (const subscriber of subscribers)
-            subscriber(next);
+        pendingNotifications.push({ event, previous, next: state, revision });
+        if (dispatchingNotifications)
+            return;
+        dispatchingNotifications = true;
+        try {
+            for (let index = 0; index < pendingNotifications.length; index += 1) {
+                const notification = pendingNotifications[index];
+                stateChangeHandler?.(notification.next);
+                updateHandler?.();
+                dispatchSubscriptions(formSubscribers, notification.next, notification.revision);
+                if (!active)
+                    break;
+                const affected = affectedFieldIDs(notification.event, notification.previous, notification.next);
+                if (affected === null) {
+                    for (const [id, subscriptions] of fieldSubscribers) {
+                        dispatchSubscriptions(subscriptions, getFormField(notification.next, id), notification.revision);
+                    }
+                    continue;
+                }
+                for (const id of affected) {
+                    dispatchSubscriptions(fieldSubscribers.get(id), getFormField(notification.next, id), notification.revision);
+                }
+            }
+        }
+        finally {
+            pendingNotifications.length = 0;
+            dispatchingNotifications = false;
+        }
     };
     const transition = (event) => {
+        if (!active)
+            return null;
         const result = applyFormEvent(state, event);
         if (!result.ok)
             return null;
+        const previous = state;
         state = result.value.state;
-        notify();
+        if (!Object.is(previous, state))
+            notify(event, previous);
         return result.value.commands;
     };
-    const field = (id) => (state.fields.find((candidate) => candidate.id === id));
+    const field = (id) => (getFormField(state, id) ?? undefined);
     const updateParticipant = (participant, flags = {}) => {
         const current = field(participant.id);
         if (current === undefined)
             return false;
+        const touched = flags.touched ?? current.touched;
+        const dirty = flags.dirty ?? current.dirty;
+        if (touched === current.touched && dirty === current.dirty)
+            return true;
         return transition({
-            type: 'update-field',
+            type: 'set-field-meta',
             id: participant.id,
-            touched: flags.touched ?? current.touched,
-            dirty: flags.dirty ?? current.dirty,
+            meta: { touched, dirty },
         }) !== null;
     };
+    const valuesEqual = (participant, current, baseline) => participant.isValueEqual?.(current, baseline)
+        ?? sameParticipantValue(current, baseline);
+    const readValue = (participant) => (participant.getValue === undefined
+        ? readParticipantValue(participant)
+        : participant.getValue());
+    const captureParticipant = (participant) => {
+        const value = readValue(participant);
+        participantValues.set(participant.id, value);
+        return value;
+    };
+    const captureAllCurrentValues = () => {
+        if (!active)
+            return;
+        for (const participant of participants.values()) {
+            const value = captureParticipant(participant);
+            participantBaselines.set(participant.id, value);
+        }
+    };
+    const reinitialize = (reinitializeOptions = {}) => {
+        if (!active)
+            return;
+        validationController?.abort();
+        validationController = null;
+        validationSequence += 1;
+        nativeResume = null;
+        pendingReinitializations.clear();
+        captureAllCurrentValues();
+        transition({ type: 'reinitialize', options: reinitializeOptions });
+        if (summary !== undefined) {
+            const remaining = orderedIssues(state);
+            summary.textContent = remaining.map((issue) => issue.message).join(' ');
+            summary.hidden = remaining.length === 0;
+        }
+    };
     const focusInvalid = (startId) => {
         const invalid = state.fields.filter((candidate) => !candidate.valid || candidate.issues.length > 0);
         const start = Math.max(0, invalid.findIndex((candidate) => candidate.id === startId));
@@ -108,7 +262,7 @@ export function tryCreateForm(options) {
                 continue;
             if (participant.focus !== undefined) {
                 if (participant.focus() !== false)
-                    return;
+                    return true;
                 continue;
             }
             const control = participant.focusTarget
@@ -118,8 +272,10 @@ export function tryCreateForm(options) {
             if (focusable.hidden || focusable.disabled === true)
                 continue;
             focusable.focus();
-            return;
+            if (focusable.ownerDocument.activeElement === focusable)
+                return true;
         }
+        return false;
     };
     const announce = (issueIds) => {
         const issues = orderedIssues(state).filter((issue) => issueIds.includes(issue.id));
@@ -130,11 +286,30 @@ export function tryCreateForm(options) {
         announceSummaryHandler?.(issues);
     };
     const execute = (commands) => {
+        let focused = false;
         for (const command of commands) {
-            if (command.type === 'focus-field')
-                focusInvalid(command.id);
-            if (command.type === 'announce-summary')
+            if (command.type === 'focus-field') {
+                recoveringFocus = true;
+                try {
+                    focused = focusInvalid(command.id) || focused;
+                }
+                finally {
+                    recoveringFocus = false;
+                }
+            }
+            if (command.type === 'announce-summary') {
                 announce(command.issueIds);
+                if (!focused && command.issueIds.length > 0 && summary !== undefined) {
+                    recoveringFocus = true;
+                    try {
+                        summary.focus();
+                        focused = summary.ownerDocument.activeElement === summary;
+                    }
+                    finally {
+                        recoveringFocus = false;
+                    }
+                }
+            }
             if (command.type === 'reset-field')
                 participants.get(command.id)?.reset?.();
         }
@@ -159,10 +334,8 @@ export function tryCreateForm(options) {
         return Object.freeze(issues);
     };
     const mapValidationIssues = (source, issues) => Object.freeze(issues.map((issue, index) => {
-        const name = issue.path === undefined ? null : encodeFormFieldPath(issue.path);
-        const owner = name === null
-            ? undefined
-            : state.fields.find((candidate) => candidate.name === name);
+        const name = issue.path === undefined ? null : safeEncodeFormFieldPath(issue.path);
+        const owner = name === null ? undefined : findIssueOwner(state, name);
         return Object.freeze({
             id: `${source}:${name ?? 'form'}:${index}`,
             message: issue.message,
@@ -170,7 +343,7 @@ export function tryCreateForm(options) {
             ...(owner === undefined ? {} : { fieldId: owner.id }),
         });
     }));
-    const finishValidation = (sequence, generation, trigger, intent, formData, input, submitter, event, custom, schema, includeNative) => {
+    const finishValidation = (sequence, generation, trigger, intent, formData, input, submitter, event, custom, schema, includeNative, resumeNative) => {
         if (!active || sequence !== validationSequence)
             return;
         if (intent === 'submission') {
@@ -213,14 +386,91 @@ export function tryCreateForm(options) {
         }
         if (event === null)
             return;
-        submitHandler?.({
+        if (submitHandler === undefined) {
+            if (resumeNative)
+                resumeNativeSubmission(submitter);
+            return;
+        }
+        event.preventDefault();
+        const submissionGeneration = state.submissionGeneration;
+        if (transition({ type: 'submit-started', generation: submissionGeneration }) === null)
+            return;
+        const payload = Object.freeze({
             event,
             formData,
             values: schema !== null && schema.issues === undefined ? schema.value : input,
             submitter,
             state,
+            reinitialize: (reinitializeOptions = {}) => {
+                if (!active || submissionGeneration !== state.submissionGeneration)
+                    return;
+                pendingReinitializations.set(submissionGeneration, reinitializeOptions);
+            },
         });
+        let result;
+        try {
+            result = submitHandler(payload);
+        }
+        catch (error) {
+            failManagedSubmission(submissionGeneration, error);
+            return;
+        }
+        if (isPromiseLike(result)) {
+            void Promise.resolve(result).then((resolved) => settleManagedSubmission(submissionGeneration, resolved), (error) => failManagedSubmission(submissionGeneration, error));
+            return;
+        }
+        settleManagedSubmission(submissionGeneration, result);
     };
+    const settleManagedSubmission = (generation, result) => {
+        if (!active || generation !== state.submissionGeneration)
+            return;
+        if (typeof result === 'object' && result !== null && result.ok === false) {
+            pendingReinitializations.delete(generation);
+            let commands = transition({
+                type: 'submit-failed',
+                generation,
+                issues: normalizeSubmissionIssues(result.issues ?? [defaultSubmissionIssue(generation)]),
+            });
+            if (commands === null && state.submissionStatus === 'submitting') {
+                commands = transition({
+                    type: 'submit-failed',
+                    generation,
+                    issues: [defaultSubmissionIssue(generation)],
+                });
+            }
+            if (commands !== null)
+                execute(commands);
+            return;
+        }
+        const succeeded = transition({ type: 'submit-succeeded', generation });
+        if (succeeded === null)
+            return;
+        const requested = pendingReinitializations.get(generation);
+        pendingReinitializations.delete(generation);
+        if (requested !== undefined)
+            reinitialize(requested);
+    };
+    const failManagedSubmission = (generation, reason) => {
+        if (!active || generation !== state.submissionGeneration)
+            return;
+        let issues;
+        try {
+            issues = submitErrorMapper?.(reason) ?? [defaultSubmissionIssue(generation)];
+        }
+        catch {
+            issues = [defaultSubmissionIssue(generation)];
+        }
+        settleManagedSubmission(generation, { ok: false, issues });
+    };
+    const normalizeSubmissionIssues = (issues) => Object.freeze(issues.map((issue) => Object.freeze({
+        ...issue,
+        source: 'server',
+    })));
+    const defaultSubmissionIssue = (generation) => Object.freeze({
+        id: `server:submission:${generation}`,
+        message: 'Form submission failed.',
+        source: 'server',
+    });
     const runValidation = (trigger, intent, changedFieldId, event = null, submitter = null) => {
         if (state.submissionStatus === 'submitting') {
             event?.preventDefault();
@@ -236,7 +486,36 @@ export function tryCreateForm(options) {
         execute(commands);
         const generation = state.validationGeneration;
         const formData = createNativeFormData(options.form, submitter);
-        const input = createFormValues([...formData.entries()].map(([path, value]) => ({ path, value })));
+        const values = tryCreateFormValues([...formData.entries()].map(([path, value]) => ({ path, value })));
+        if (!values.ok) {
+            if (intent === 'submission') {
+                transition({
+                    type: 'replace-issues',
+                    source: 'native',
+                    issues: includeNativeValidation(options.form, submitter) ? collectNativeIssues() : [],
+                    generation,
+                });
+            }
+            transition({
+                type: 'replace-issues',
+                source: 'validate',
+                issues: [Object.freeze({
+                        id: `validate:form-values:${generation}`,
+                        message: 'Form values could not be constructed safely.',
+                        source: 'validate',
+                    })],
+                generation,
+            });
+            if (intent === 'submission') {
+                transition({ type: 'replace-issues', source: 'schema', issues: [], generation });
+            }
+            const completed = transition({ type: 'validation-completed', trigger, intent, generation });
+            if (completed !== null)
+                execute(completed);
+            event?.preventDefault();
+            return;
+        }
+        const input = values.value;
         const context = Object.freeze({
             trigger,
             intent,
@@ -260,8 +539,7 @@ export function tryCreateForm(options) {
             }
         }
         const includeNative = intent === 'submission'
-            && !options.form.noValidate
-            && !isFormNoValidateSubmitter(submitter);
+            && includeNativeValidation(options.form, submitter);
         if (isPromiseLike(custom) || isPromiseLike(schema)) {
             event?.preventDefault();
             void Promise.all([
@@ -272,16 +550,49 @@ export function tryCreateForm(options) {
             ]).then(([customResult, schemaResult]) => {
                 if (controller.signal.aborted)
                     return;
-                finishValidation(sequence, generation, trigger, intent, formData, input, submitter, event, customResult, schemaResult, includeNative);
+                finishValidation(sequence, generation, trigger, intent, formData, input, submitter, event, customResult, schemaResult, includeNative, event !== null && submitHandler === undefined);
             });
             return;
         }
-        finishValidation(sequence, generation, trigger, intent, formData, input, submitter, event, custom, schema, includeNative);
+        finishValidation(sequence, generation, trigger, intent, formData, input, submitter, event, custom, schema, includeNative, false);
+    };
+    const resumeNativeSubmission = (submitter) => {
+        if (!active)
+            return;
+        const token = ++nativeResumeToken;
+        nativeResume = { token, submitter };
+        try {
+            const associatedForm = submitter === null
+                ? null
+                : submitter.form;
+            if (submitter !== null
+                && isNativeSubmitter(submitter)
+                && associatedForm === options.form) {
+                options.form.requestSubmit(submitter);
+            }
+            else {
+                options.form.requestSubmit();
+            }
+        }
+        finally {
+            queueMicrotask(() => {
+                if (nativeResume?.token === token)
+                    nativeResume = null;
+            });
+        }
     };
     const submit = (event) => {
         const submitter = event.submitter instanceof HTMLElement && isNativeSubmitter(event.submitter)
             ? event.submitter
             : null;
+        if (nativeResume !== null && nativeResume.submitter === submitter) {
+            nativeResume = null;
+            return;
+        }
+        if (state.validationStatus === 'validating' && state.validationIntent === 'submission') {
+            event.preventDefault();
+            return;
+        }
         runValidation('submit', 'submission', null, event, submitter);
     };
     const submitInvalidBatch = () => {
@@ -300,14 +611,10 @@ export function tryCreateForm(options) {
                 || participant.element.contains(target);
         });
     };
-    const interact = (event, trigger) => {
-        const participant = participantFor(event.target);
+    const invalidateAfterInteraction = (trigger, participant) => {
         const previousIntent = state.validationStatus === 'invalid'
             ? state.validationIntent
             : null;
-        if (participant !== undefined) {
-            updateParticipant(participant, trigger === 'input' ? { dirty: true } : { touched: true });
-        }
         if (previousIntent !== null && !revalidateOn.has(trigger))
             return;
         transition({ type: 'validation-invalidated' });
@@ -315,9 +622,45 @@ export function tryCreateForm(options) {
         if (intent !== null)
             runValidation(trigger, intent, participant?.id ?? null);
     };
-    const onInput = (event) => interact(event, 'input');
-    const onBlur = (event) => interact(event, 'blur');
+    const onValueInteraction = (event) => {
+        if (handledParticipantEvents.has(event))
+            return;
+        handledParticipantEvents.add(event);
+        const participant = participantFor(event.target);
+        if (participant === undefined)
+            return;
+        const updateValue = () => {
+            if (!active || participants.get(participant.id) !== participant)
+                return;
+            const previous = participantValues.get(participant.id);
+            const current = readValue(participant);
+            if (valuesEqual(participant, current, previous))
+                return;
+            participantValues.set(participant.id, current);
+            const baseline = participantBaselines.get(participant.id);
+            updateParticipant(participant, {
+                dirty: !valuesEqual(participant, current, baseline),
+            });
+            invalidateAfterInteraction('input', participant);
+        };
+        if (event.type === 'input' || event.type === 'change')
+            updateValue();
+        else
+            queueMicrotask(updateValue);
+    };
+    const onBlur = (event) => {
+        if (recoveringFocus || handledParticipantEvents.has(event))
+            return;
+        handledParticipantEvents.add(event);
+        const participant = participantFor(event.target);
+        if (participant !== undefined)
+            updateParticipant(participant, { touched: true });
+        invalidateAfterInteraction('blur', participant);
+    };
     const onInvalid = (event) => {
+        if (handledParticipantEvents.has(event))
+            return;
+        handledParticipantEvents.add(event);
         const participant = participantFor(event.target);
         if (participant !== undefined)
             updateParticipant(participant, { touched: true });
@@ -330,6 +673,8 @@ export function tryCreateForm(options) {
     const onReset = () => {
         validationController?.abort();
         validationSequence += 1;
+        nativeResume = null;
+        pendingReinitializations.clear();
         const commands = transition('reset');
         if (commands !== null)
             execute(commands);
@@ -338,34 +683,113 @@ export function tryCreateForm(options) {
             summary.hidden = true;
         }
         resetHandler?.();
+        queueMicrotask(captureAllCurrentValues);
     };
-    options.form.addEventListener('input', onInput, true);
-    options.form.addEventListener('change', onInput, true);
+    options.form.addEventListener('input', onValueInteraction);
+    options.form.addEventListener('change', onValueInteraction);
     options.form.addEventListener('blur', onBlur, true);
     options.form.addEventListener('invalid', onInvalid, true);
     options.form.addEventListener('submit', onSubmit);
     options.form.addEventListener('reset', onReset);
+    const observeParticipant = (participant) => {
+        participantObservers.get(participant.id)?.();
+        const externalTargets = participantTargets(participant).filter((target) => !options.form.contains(target));
+        const roots = externalTargets.filter((target) => !externalTargets.some((candidate) => candidate !== target && candidate.contains(target)));
+        for (const target of roots) {
+            target.addEventListener('input', onValueInteraction);
+            target.addEventListener('change', onValueInteraction);
+            target.addEventListener('blur', onBlur, true);
+            target.addEventListener('invalid', onInvalid, true);
+        }
+        participantObservers.set(participant.id, () => {
+            for (const target of roots) {
+                target.removeEventListener('input', onValueInteraction);
+                target.removeEventListener('change', onValueInteraction);
+                target.removeEventListener('blur', onBlur, true);
+                target.removeEventListener('invalid', onInvalid, true);
+            }
+        });
+    };
     const registerParticipant = (participant) => {
+        const replacing = participants.has(participant.id);
+        participantObservers.get(participant.id)?.();
         participants.set(participant.id, participant);
+        const currentValue = captureParticipant(participant);
+        if (!replacing || !participantBaselines.has(participant.id)) {
+            participantBaselines.set(participant.id, currentValue);
+        }
+        observeParticipant(participant);
         participant.element.dataset['scope'] = 'form';
         participant.element.dataset['part'] = 'field';
-        transition({
-            type: 'register-field',
-            field: {
+        if (replacing) {
+            transition({
+                type: 'set-field-meta',
                 id: participant.id,
-                name: readParticipantName(participant),
-            },
-        });
+                meta: { name: readParticipantName(participant) },
+            });
+        }
+        else {
+            transition({
+                type: 'register-field',
+                field: {
+                    id: participant.id,
+                    name: readParticipantName(participant),
+                },
+            });
+        }
         reorderParticipants(participants, state, transition);
         return () => {
             if (participants.get(participant.id) !== participant)
                 return;
+            participantObservers.get(participant.id)?.();
+            participantObservers.delete(participant.id);
             participants.delete(participant.id);
+            participantBaselines.delete(participant.id);
+            participantValues.delete(participant.id);
             transition({ type: 'unregister-field', id: participant.id });
         };
     };
     for (const participant of options.participants ?? [])
         registerParticipant(participant);
+    const createSelectorSubscription = (value, selector, listener, subscribeOptions = {}) => ({
+        select: selector,
+        listener: listener,
+        equals: (subscribeOptions.equals ?? Object.is),
+        selected: selector(value),
+        active: true,
+        createdRevision: revision,
+    });
+    const subscribeForm = (selector, listener, subscribeOptions) => {
+        if (!active)
+            return () => { };
+        const subscription = createSelectorSubscription(state, selector, listener, subscribeOptions);
+        formSubscribers.add(subscription);
+        return () => {
+            if (!subscription.active)
+                return;
+            subscription.active = false;
+            formSubscribers.delete(subscription);
+        };
+    };
+    const subscribeField = (id, selector, listener, subscribeOptions) => {
+        if (!active)
+            return () => { };
+        const subscription = createSelectorSubscription(getFormField(state, id), selector, listener, subscribeOptions);
+        let channel = fieldSubscribers.get(id);
+        if (channel === undefined) {
+            channel = new Set();
+            fieldSubscribers.set(id, channel);
+        }
+        channel.add(subscription);
+        return () => {
+            if (!subscription.active)
+                return;
+            subscription.active = false;
+            channel?.delete(subscription);
+            if (channel?.size === 0)
+                fieldSubscribers.delete(id);
+        };
+    };
     const connection = {
         get state() { return state; },
         getSnapshot: snapshot,
@@ -376,10 +800,45 @@ export function tryCreateForm(options) {
             const participant = participants.get(id);
             if (participant === undefined)
                 return false;
+            observeParticipant(participant);
+            const currentField = field(id);
+            const name = readParticipantName(participant);
+            if (currentField?.name !== name) {
+                transition({ type: 'set-field-meta', id, meta: { name } });
+            }
+            const previous = participantValues.get(id);
+            const current = captureParticipant(participant);
+            const baseline = participantBaselines.get(id);
+            const valueChanged = !valuesEqual(participant, current, previous);
+            if (valueChanged) {
+                updateParticipant(participant, { dirty: !valuesEqual(participant, current, baseline) });
+            }
+            reorderParticipants(participants, state, transition);
+            if (!valueChanged)
+                return true;
+            const previousIntent = state.validationStatus === 'invalid'
+                ? state.validationIntent
+                : null;
             transition({ type: 'validation-invalidated' });
-            runValidation('input', 'interaction', id);
+            if (previousIntent !== null)
+                runValidation('input', previousIntent, id);
             return true;
         },
+        getField: (id) => getFormField(state, id),
+        setFieldMeta: (id, meta) => transition({ type: 'set-field-meta', id, meta }) !== null,
+        replaceFieldIssues: (id, source, issues) => transition({
+            type: 'replace-field-issues',
+            id,
+            source,
+            issues,
+        }) !== null,
+        upsertFieldIssue: (id, issue) => transition({ type: 'upsert-field-issue', id, issue }) !== null,
+        removeFieldIssue: (id, issueId) => transition({ type: 'remove-field-issue', id, issueId }) !== null,
+        clearFieldIssues: (id, source) => transition({
+            type: 'clear-field-issues',
+            id,
+            ...(source === undefined ? {} : { source }),
+        }) !== null,
         replaceIssues: (source, issues) => transition({ type: 'replace-issues', source, issues }) !== null,
         submitStarted: () => {
             const generation = state.submissionGeneration;
@@ -393,35 +852,100 @@ export function tryCreateForm(options) {
             execute(commands);
             return true;
         },
+        reinitialize,
         reset: () => options.form.reset(),
-        subscribe: (listener) => {
-            subscribers.add(listener);
-            return () => { subscribers.delete(listener); };
-        },
+        subscribeForm,
+        subscribeField,
         destroy: () => {
             if (!active)
                 return;
             active = false;
+            pendingNotifications.length = 0;
             validationController?.abort();
-            options.form.removeEventListener('input', onInput, true);
-            options.form.removeEventListener('change', onInput, true);
+            nativeResume = null;
+            options.form.removeEventListener('input', onValueInteraction);
+            options.form.removeEventListener('change', onValueInteraction);
             options.form.removeEventListener('blur', onBlur, true);
             options.form.removeEventListener('invalid', onInvalid, true);
             options.form.removeEventListener('submit', onSubmit);
             options.form.removeEventListener('reset', onReset);
-            subscribers.clear();
+            for (const subscription of formSubscribers)
+                subscription.active = false;
+            formSubscribers.clear();
+            for (const channel of fieldSubscribers.values()) {
+                for (const subscription of channel)
+                    subscription.active = false;
+            }
+            fieldSubscribers.clear();
+            for (const disconnect of participantObservers.values())
+                disconnect();
+            participantObservers.clear();
             participants.clear();
+            participantBaselines.clear();
+            participantValues.clear();
+            pendingReinitializations.clear();
         },
     };
     return { ok: true, value: connection };
 }
+function readParticipantValue(participant) {
+    const explicit = participant.submissionElements ?? [];
+    const candidates = explicit.length > 0
+        ? explicit
+        : [participant.semanticControl ?? participant.element].filter(isSubmissionElement);
+    return Object.freeze(candidates.map(readSubmissionValue));
+}
+function isSubmissionElement(element) {
+    return element.tagName === 'BUTTON'
+        || element.tagName === 'INPUT'
+        || element.tagName === 'SELECT'
+        || element.tagName === 'TEXTAREA';
+}
+function readSubmissionValue(element) {
+    if (element.tagName === 'SELECT') {
+        const select = element;
+        return Object.freeze([
+            'select',
+            select.multiple,
+            Object.freeze([...select.options]
+                .filter((option) => option.selected)
+                .map((option) => option.value)),
+        ]);
+    }
+    if (element.tagName === 'INPUT') {
+        const input = element;
+        const type = input.type.toLowerCase();
+        if (type === 'checkbox' || type === 'radio') {
+            return Object.freeze(['checked', input.checked, input.value]);
+        }
+        if (type === 'file') {
+            return Object.freeze([
+                'files',
+                Object.freeze(Array.from(input.files ?? []).map((file) => Object.freeze([
+                    file.name,
+                    file.size,
+                    file.type,
+                    file.lastModified,
+                ]))),
+            ]);
+        }
+    }
+    return Object.freeze(['value', element.value]);
+}
+function sameParticipantValue(left, right) {
+    if (Object.is(left, right))
+        return true;
+    if (!Array.isArray(left) || !Array.isArray(right) || left.length !== right.length)
+        return false;
+    return left.every((value, index) => sameParticipantValue(value, right[index]));
+}
 function readControlName(element) {
     const name = element.name?.trim();
     return name === undefined || name.length === 0 ? null : name;
 }
 function readParticipantName(participant) {
     if (participant.name !== undefined && participant.name !== null) {
-        return encodeFormFieldPath(participant.name);
+        return safeEncodeFormFieldPath(participant.name);
     }
     for (const element of participant.submissionElements ?? []) {
         const name = readControlName(element);
@@ -435,13 +959,15 @@ function participantTargets(participant) {
             participant.element,
             participant.semanticControl,
             participant.focusTarget,
+            participant.validationTarget,
             ...(participant.submissionElements ?? []),
         ].filter((element) => element !== undefined))];
 }
 function validationTargets(participant) {
     const semantic = participant.semanticControl;
+    const validation = participant.validationTarget;
     const submissions = participant.submissionElements ?? [];
-    const targets = [...new Set([semantic, ...submissions].filter((element) => element !== undefined))];
+    const targets = [...new Set([validation, semantic, ...submissions].filter((element) => element !== undefined))];
     return targets.length > 0 ? targets : [participant.element];
 }
 function createNativeFormData(form, submitter) {
@@ -462,6 +988,29 @@ function isFormNoValidateSubmitter(element) {
         return false;
     return element.formNoValidate === true;
 }
+function includeNativeValidation(form, submitter) {
+    return !form.noValidate && !isFormNoValidateSubmitter(submitter);
+}
+function safeEncodeFormFieldPath(path) {
+    const result = tryCreateFormFieldPath(path);
+    return result.ok ? encodeFormFieldPath(result.value) : null;
+}
+function findIssueOwner(state, issueName) {
+    let owner;
+    for (const candidate of state.fields) {
+        if (candidate.name === null || !ownsIssuePath(candidate.name, issueName))
+            continue;
+        if (owner === undefined || candidate.name.length > (owner.name?.length ?? 0)) {
+            owner = candidate;
+        }
+    }
+    return owner;
+}
+function ownsIssuePath(fieldName, issueName) {
+    return issueName === fieldName
+        || issueName.startsWith(`${fieldName}.`)
+        || issueName.startsWith(`${fieldName}[`);
+}
 function isPromiseLike(value) {
     return value !== null
         && typeof value === 'object'
@@ -504,7 +1053,8 @@ function reorderParticipants(participants, state, transition) {
         return byRegistration.indexOf(left) - byRegistration.indexOf(right);
     });
     const ids = ordered.map((participant) => participant.id);
-    if (ids.length === state.fields.length)
+    if (ids.length === state.fields.length
+        && ids.some((id, index) => state.fields[index]?.id !== id))
         transition({ type: 'reorder-fields', ids });
 }
 //# sourceMappingURL=form.js.map