mobx-formly 0.0.3 → 0.1.0

package/dist/form.js

@@ -1,7 +1,11 @@
-import { action, computed, makeObservable, observable, observe, runInAction } from 'mobx';
+import { action, computed, makeObservable, observable, runInAction } from 'mobx';
 import { createRef } from 'yummies/mobx';
 import { clone, deleteAtPath, extractValue, getAtPath, isEqual, setAtPath } from './utils.js';
-export class Form {
+import { collectChangedPaths, collectDirtyPaths, collectErrorPaths, findErrorAtPath } from './utils.js';
+import { PathStore } from './path-store.js';
+import { FormValidator } from './validation.js';
+const isPromiseLike = (value) => !!value && typeof value.then === 'function';
+export class BaseForm {
     /**
      * Current form values.
      *
@@ -9,21 +13,17 @@ export class Form {
      */
     values;
     /**
-     * Validation errors nested by field path.
+     * Cached default values used by reset, resetField, and dirty comparison.
+     * Updated by reset unless `keepDefaultValues` is passed.
      *
-     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#errors)
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#defaultvalues)
      */
-    errorsByPath = observable.map();
-    errorPathCounts = observable.map();
-    errorChildren = new Map();
-    errorProxyCache = new Map();
-    fieldStatesByPath = observable.map();
-    fieldStatePathCounts = observable.map();
-    fieldStateChildren = new Map();
-    fieldStateProxyCache = new Map();
+    defaultValues;
+    errorStore = new PathStore();
+    fieldStateStore = new PathStore();
     /** Validation errors nested by field path. */
     get errors() {
-        return this.createPathProxy('', this.errorsByPath, this.errorPathCounts, this.errorChildren, this.errorProxyCache);
+        return this.errorStore.proxy();
     }
     /**
      * Field paths whose values differ from their defaults.
@@ -44,13 +44,12 @@ export class Form {
      */
     validatingFields = {};
     /**
-     * Observable state for each registered field.
+     * Observable state for each registered field, nested by field path.
      *
      * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#fieldstate)
      */
-    /** Observable state for each registered field, nested by field path. */
     get fieldState() {
-        return this.createPathProxy('', this.fieldStatesByPath, this.fieldStatePathCounts, this.fieldStateChildren, this.fieldStateProxyCache);
+        return this.fieldStateStore.proxy();
     }
     /**
      * Whether a submission is currently running.
@@ -82,29 +81,38 @@ export class Form {
      * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#refs)
      */
     refs = new Map();
-    defaultValues;
     options;
     fieldOptions = new Map();
-    valueObservers;
-    observerTimer;
-    changedPaths = new Set();
-    isMutating = false;
-    observerTreeChanged = false;
+    touchedValidationFields = new Set();
+    validator;
     activeSubmissions = 0;
     resetVersion = 0;
+    isValidOverride = observable.box(undefined);
     validationVersion = 0;
     fieldValidationVersions = new Map();
+    /** Whether at least one validation pass has completed since construction or reset. */
+    hasValidationRun = false;
     constructor(options = {}) {
         this.options = {
             ...options,
             mode: options.mode ?? 'onSubmit',
             reValidateMode: options.reValidateMode ?? 'onChange',
             disabled: options.disabled ?? false,
+            shouldFocusError: options.shouldFocusError ?? true,
         };
         this.defaultValues = clone((options.defaultValues ?? {}));
         this.values = clone((options.values ?? options.defaultValues ?? {}));
+        this.validator = new FormValidator({
+            options: this.options,
+            fieldOptions: this.fieldOptions,
+            refs: this.refs,
+            valueAt: (path) => getAtPath(this.values, path),
+            snapshot: () => this.snapshot,
+            applyError: (path, error) => this.applyError(path, error),
+        });
         makeObservable(this, {
             values: observable.deep,
+            defaultValues: observable.deep,
             dirtyFields: observable.shallow,
             touchedFields: observable.shallow,
             validatingFields: observable.shallow,
@@ -114,6 +122,8 @@ export class Form {
             submitCount: observable,
             disabled: computed,
             isDirty: computed,
+            isTouched: computed,
+            isValidating: computed,
             isValid: computed,
             snapshot: computed,
             register: action,
@@ -142,11 +152,31 @@ export class Form {
      */
     get isDirty() { return Object.keys(this.dirtyFields).length > 0; }
     /**
-     * Whether the form has no errors.
+     * Whether any field has been touched.
+     *
+     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#istouched)
+     */
+    get isTouched() { return Object.keys(this.touchedFields).length > 0; }
+    /** Whether any field validation is currently running. */
+    get isValidating() { return Object.keys(this.validatingFields).length > 0; }
+    /**
+     * Whether the form has no errors. With a schema or resolver the first read
+     * schedules a full validation pass, so validity reflects the schema instead
+     * of defaulting to true until something validates.
      *
      * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#isvalid)
      */
-    get isValid() { return this.errorsByPath.size === 0; }
+    get isValid() {
+        const override = this.isValidOverride.get();
+        if (override !== undefined)
+            return override;
+        if (!this.hasValidationRun && (this.options.schema || this.options.resolver)) {
+            this.hasValidationRun = true;
+            // Deferred so this computed getter stays free of observable side effects.
+            queueMicrotask(() => { void this.runValidation(); });
+        }
+        return this.errorStore.size === 0;
+    }
     /**
      * Registers a field and returns its ref and event handlers.
      *
@@ -155,11 +185,7 @@ export class Form {
     register(name, options = {}) {
         const path = name;
         this.fieldOptions.set(path, options);
-        let ref = this.refs.get(path);
-        if (!ref) {
-            ref = createRef();
-            this.refs.set(path, ref);
-        }
+        const ref = this.ref(name);
         this.ensureFieldState(path);
         return {
             name: path,
@@ -169,19 +195,44 @@ export class Form {
                     return;
                 const value = this.transformValue(extractValue(eventOrValue), options);
                 const shouldValidate = this.shouldValidateOnChange(path);
+                const deps = this.dependentFields(options.deps);
                 this.setValue(path, value, { shouldDirty: true, shouldValidate: false });
-                if (shouldValidate)
+                if (shouldValidate && deps.length) {
+                    await Promise.all([this.trigger(path), this.trigger(deps)]);
+                }
+                else if (shouldValidate) {
                     await this.trigger(path);
+                }
+                else if (deps.length) {
+                    await this.trigger(deps);
+                }
             },
             onBlur: async () => {
                 if (this.disabled)
                     return;
                 this.markTouched(path);
-                if (this.options.mode === 'onBlur' || this.options.mode === 'all' || (this.hasError(path) && this.options.reValidateMode === 'onBlur'))
+                if (this.options.mode === 'onTouched')
+                    this.touchedValidationFields.add(path);
+                if (this.options.mode === 'onBlur' || this.options.mode === 'onTouched' || this.options.mode === 'all' || (this.hasError(path) && this.options.reValidateMode === 'onBlur')) {
+                    this.validator.flushDelayed(path);
                     await this.trigger(path);
+                }
             },
         };
     }
+    /**
+     * Returns the stable MobX-aware ref for a field path, creating it on demand.
+     * The ref can be used by a view adapter before the field is registered.
+     */
+    ref(name) {
+        const path = name;
+        let ref = this.refs.get(path);
+        if (!ref) {
+            ref = createRef();
+            this.refs.set(path, ref);
+        }
+        return ref;
+    }
     /**
      * Removes a field, its value, and its associated state.
      *
@@ -190,12 +241,14 @@ export class Form {
     unregister(name) {
         const path = name;
         this.fieldValidationVersions.set(path, (this.fieldValidationVersions.get(path) ?? 0) + 1);
+        this.validator.cancelDelayed(path);
+        this.touchedValidationFields.delete(path);
         deleteAtPath(this.values, path);
         this.applyError(path, undefined);
         delete this.dirtyFields[path];
         delete this.touchedFields[path];
         delete this.validatingFields[path];
-        this.deleteFieldState(path);
+        this.fieldStateStore.delete(path);
         this.fieldOptions.delete(path);
         this.refs.delete(path);
     }
@@ -209,98 +262,49 @@ export class Form {
         setAtPath(this.values, path, value);
         this.applyValueChange(path, config);
     }
-    /**
-     * Groups direct value changes and processes their changed paths together.
-     *
-     * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#mutatemutator-config)
-     */
     mutate(mutator, config = {}) {
-        this.ensureValueObservers();
-        this.changedPaths.clear();
-        this.isMutating = true;
-        try {
-            mutator();
-        }
-        finally {
-            this.isMutating = false;
-        }
-        this.scheduleObserverCleanup();
-        const paths = [...this.changedPaths];
-        for (const path of paths)
-            this.applyValueChange(path, { ...config, shouldValidate: false });
-        if (paths.length && (config.shouldValidate ?? true)) {
-            void this.trigger(paths);
-        }
-        if (this.observerTreeChanged) {
-            this.disposeValueObservers();
-            this.observerTreeChanged = false;
-            this.ensureValueObservers();
+        const before = clone(this.values);
+        const result = mutator();
+        if (isPromiseLike(result)) {
+            return result.then(() => runInAction(() => this.finishMutation(before, config)), (error) => {
+                runInAction(() => this.finishMutation(before, config));
+                throw error;
+            });
         }
+        this.finishMutation(before, config);
+    }
+    finishMutation(before, config) {
+        if (isEqual(before, this.values))
+            return;
+        const changedPaths = collectChangedPaths(before, this.values);
+        const dirtyPaths = collectDirtyPaths(this.values, this.defaultValues);
+        if (config.shouldDirty ?? true)
+            this.syncDirtyFields(dirtyPaths);
+        if (config.shouldTouch ?? true)
+            for (const path of changedPaths)
+                this.markTouched(path);
+        if (config.shouldValidate ?? true)
+            void this.trigger();
     }
     applyValueChange(path, config) {
         if (config.shouldDirty ?? true)
             this.updateDirty(path);
-        if (config.shouldTouch)
+        if (config.shouldTouch ?? true)
             this.markTouched(path);
         if (config.shouldValidate)
             void this.trigger(path);
     }
-    ensureValueObservers() {
-        if (!this.valueObservers || this.observerTreeChanged) {
-            this.disposeValueObservers();
-            this.valueObservers = [];
-            this.observeValueTree(this.values, '', this.valueObservers);
-            this.observerTreeChanged = false;
-        }
-        this.scheduleObserverCleanup();
-    }
-    scheduleObserverCleanup() {
-        if (this.observerTimer)
-            clearTimeout(this.observerTimer);
-        this.observerTimer = setTimeout(() => this.disposeValueObservers(), 10 * 60 * 1000);
-        const timer = this.observerTimer;
-        timer.unref?.();
-    }
-    disposeValueObservers() {
-        for (const dispose of this.valueObservers ?? [])
-            dispose();
-        this.valueObservers = undefined;
-        this.observerTimer = undefined;
-    }
-    observeValueTree(value, basePath, disposers) {
-        if (!value || typeof value !== 'object')
-            return;
-        if (Array.isArray(value)) {
-            disposers.push(observe(value, (change) => {
-                if (change.type === 'splice')
-                    this.observerTreeChanged = true;
-                if (this.isMutating && basePath)
-                    this.changedPaths.add(basePath);
-            }));
-        }
-        else {
-            disposers.push(observe(value, (change) => {
-                if (change.type === 'update' && (typeof change.newValue === 'object' || typeof change.oldValue === 'object')) {
-                    this.observerTreeChanged = true;
-                }
-                if (!this.isMutating)
-                    return;
-                const path = basePath ? `${basePath}.${String(change.name)}` : String(change.name);
-                if (path)
-                    this.changedPaths.add(path);
-            }));
-        }
-        for (const [key, child] of Object.entries(value)) {
-            this.observeValueTree(child, basePath ? `${basePath}.${key}` : key, disposers);
-        }
-    }
     /**
-     * Sets an error for a field.
+     * Sets an error for a field and can focus it.
      *
      * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#seterrorname-error)
      */
-    setError(name, error) {
-        this.applyError(name, error);
+    setError(name, error, config = {}) {
+        const path = name;
+        this.validator.cancelDelayed(path);
+        this.applyError(path, error);
+        if (config.shouldFocus)
+            this.refs.get(path)?.current?.focus();
     }
     /**
      * Clears one, several, or all field errors.
@@ -309,20 +313,34 @@ export class Form {
      */
     clearErrors(name) {
         if (!name) {
-            this.clearPathStore(this.errorsByPath, this.errorPathCounts, this.errorChildren);
-            for (const [, state] of this.fieldStates())
+            this.validator.cancelAllDelayed();
+            this.isValidOverride.set(undefined);
+            this.errorStore.clear();
+            for (const [, state] of this.fieldStateStore.entries())
                 this.applyFieldState(state, undefined);
             return;
         }
-        for (const path of Array.isArray(name) ? name : [name])
-            this.applyError(path, undefined);
+        for (const path of Array.isArray(name) ? name : [name]) {
+            this.clearErrorPath(path);
+        }
     }
     /**
      * Validates one field, several fields, or the complete form.
      *
      * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#triggername)
      */
-    async trigger(name) {
+    async trigger(name, config = {}) {
+        const paths = name ? (Array.isArray(name) ? name : [name]).map(String) : [...this.fieldOptions.keys()];
+        if (config.shouldTouch)
+            for (const path of paths)
+                this.markTouched(path);
+        const valid = (await this.runValidation(name)).valid;
+        if (!valid && config.shouldFocus)
+            this.focusFirstError(paths);
+        return valid;
+    }
+    async runValidation(name) {
+        this.hasValidationRun = true;
         const paths = name ? (Array.isArray(name) ? name : [name]).map(String) : undefined;
         const run = ++this.validationVersion;
         const fieldVersions = new Map();
@@ -334,31 +352,24 @@ export class Form {
             this.validatingFields[path] = true;
             this.ensureFieldState(path).isValidating = true;
         }
+        let valid = true;
         try {
-            const schemaErrors = await this.validateSchema();
-            const validationPaths = paths ?? [...new Set([...this.fieldOptions.keys(), ...this.errorsByPath.keys(), ...this.errorPaths(schemaErrors)])];
-            runInAction(() => {
-                for (const path of validationPaths) {
-                    const schemaError = this.getError(schemaErrors, path);
-                    if (schemaError && this.isValidationCurrent(path, run, fieldVersions)) {
-                        this.applyError(path, schemaError);
-                    }
-                }
-            });
+            const schemaResult = await this.validator.resolveSchemaErrors(paths);
+            const schemaErrors = schemaResult.errors;
+            const validationPaths = paths ?? [...new Set([...this.fieldOptions.keys(), ...this.errorStore.paths(), ...collectErrorPaths(schemaErrors)])];
             for (const path of validationPaths) {
-                const ruleError = await this.validateRules(path);
+                const ruleError = await this.validator.validateRules(path);
                 runInAction(() => {
                     if (this.isValidationCurrent(path, run, fieldVersions)) {
-                        if (ruleError)
-                            this.applyError(path, ruleError);
-                        else if (this.getError(schemaErrors, path))
-                            this.applyError(path, this.getError(schemaErrors, path));
-                        else
-                            this.applyError(path, undefined);
+                        const schemaError = findErrorAtPath(schemaErrors, path);
+                        const error = this.validator.mergeErrors(schemaError, ruleError);
+                        if (error)
+                            valid = false;
+                        this.validator.applyValidationError(path, error);
                     }
                 });
             }
-            return (paths ?? [...this.errorsByPath.keys()]).every((path) => !this.hasError(path));
+            return { valid, values: valid ? schemaResult.values : undefined };
         }
         finally {
             runInAction(() => {
@@ -386,15 +397,17 @@ export class Form {
             this.submitCount += 1;
             const submissionResetVersion = this.resetVersion;
             try {
-                const valid = await this.trigger();
+                const { valid, values } = await this.runValidation();
                 if (valid) {
-                    await onValid(this.snapshot, this);
+                    await onValid(values ?? this.snapshot, this);
                     runInAction(() => {
                         if (this.resetVersion === submissionResetVersion)
                             this.isSubmitSuccessful = true;
                     });
                 }
                 else {
+                    if (this.options.shouldFocusError)
+                        this.focusFirstError();
                     await onInvalid?.(this.errors, this);
                     runInAction(() => {
                         if (this.resetVersion === submissionResetVersion)
@@ -416,35 +429,52 @@ export class Form {
      * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#resetvalues-options)
      */
     reset(values, options = {}) {
-        this.disposeValueObservers();
+        this.validator.cancelAllDelayed();
+        this.touchedValidationFields.clear();
         this.resetVersion += 1;
         this.validationVersion += 1;
-        for (const path of Object.keys(this.validatingFields)) {
-            delete this.validatingFields[path];
-            const state = this.fieldStatesByPath.get(path);
-            if (state)
-                state.isValidating = false;
+        if (!options.keepIsValidating) {
+            for (const path of Object.keys(this.validatingFields)) {
+                delete this.validatingFields[path];
+                const state = this.fieldStateStore.get(path);
+                if (state)
+                    state.isValidating = false;
+            }
+        }
+        if (!options.keepValues) {
+            const next = clone((values ?? this.defaultValues));
+            if (options.keepDirtyValues) {
+                for (const path of Object.keys(this.dirtyFields)) {
+                    const value = getAtPath(this.values, path);
+                    if (value !== undefined)
+                        setAtPath(next, path, clone(value));
+                }
+            }
+            this.values = next;
+            // New values need a fresh validity check on the next isValid read.
+            this.hasValidationRun = false;
         }
-        const next = clone((values ?? this.defaultValues));
-        this.values = next;
         if (!options.keepDefaultValues && values)
             Object.assign(this.defaultValues, clone(values));
-        if (!options.keepDirty)
+        if (!options.keepDirty && !options.keepDirtyValues)
             this.dirtyFields = {};
         if (!options.keepTouched)
             this.touchedFields = {};
+        // Raw validity without the lazy warm-up: reset must never schedule validation.
+        const wasValid = this.isValidOverride.get() ?? this.errorStore.size === 0;
         if (!options.keepErrors) {
-            this.clearPathStore(this.errorsByPath, this.errorPathCounts, this.errorChildren);
-            for (const [, state] of this.fieldStates())
+            this.errorStore.clear();
+            for (const [, state] of this.fieldStateStore.entries())
                 this.applyFieldState(state, undefined);
         }
-        if (!options.keepIsSubmitted) {
+        this.isValidOverride.set(options.keepIsValid ? wasValid : undefined);
+        if (!options.keepIsSubmitted)
             this.isSubmitted = false;
+        if (!options.keepIsSubmitSuccessful)
             this.isSubmitSuccessful = false;
-        }
         if (!options.keepSubmitCount)
             this.submitCount = 0;
-        for (const [path, state] of this.fieldStates()) {
+        for (const [path, state] of this.fieldStateStore.entries()) {
             state.isDirty = !!this.dirtyFields[path];
             state.isTouched = !!this.touchedFields[path];
         }
@@ -454,18 +484,26 @@ export class Form {
      *
      * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#resetfieldname)
      */
-    resetField(name) {
+    resetField(name, options = {}) {
         const path = name;
+        this.validator.cancelDelayed(path);
+        this.touchedValidationFields.delete(path);
         this.fieldValidationVersions.set(path, (this.fieldValidationVersions.get(path) ?? 0) + 1);
-        setAtPath(this.values, path, clone(getAtPath(this.defaultValues, path)));
-        this.applyError(path, undefined);
-        delete this.dirtyFields[path];
-        delete this.touchedFields[path];
+        if ('defaultValue' in options)
+            setAtPath(this.defaultValues, path, clone(options.defaultValue));
+        setAtPath(this.values, path, clone('defaultValue' in options ? options.defaultValue : getAtPath(this.defaultValues, path)));
+        if (!options.keepError)
+            this.applyError(path, undefined);
+        if (!options.keepDirty)
+            delete this.dirtyFields[path];
+        if (!options.keepTouched)
+            delete this.touchedFields[path];
         delete this.validatingFields[path];
         const state = this.ensureFieldState(path);
-        this.applyFieldState(state, undefined);
-        state.isDirty = false;
-        state.isTouched = false;
+        if (!options.keepError)
+            this.applyFieldState(state, undefined);
+        state.isDirty = options.keepDirty ? !!this.dirtyFields[path] : false;
+        state.isTouched = options.keepTouched ? !!this.touchedFields[path] : false;
         state.isValidating = false;
     }
     /**
@@ -480,6 +518,46 @@ export class Form {
      * [**Documentation**](https://js2me.github.io/mobx-formly/api/form.html#snapshot)
      */
     get snapshot() { return clone(this.values); }
+    /** Reconciles dirty paths against the complete current value tree. */
+    syncDirtyFields(paths) {
+        const dirty = new Set(paths);
+        this.dirtyFields = Object.fromEntries(paths.map((path) => [path, true]));
+        for (const [path, state] of this.fieldStateStore.entries())
+            state.isDirty = dirty.has(path);
+        for (const path of paths)
+            this.ensureFieldState(path).isDirty = true;
+    }
+    /** Clears an exact error path and every nested error below it. */
+    clearErrorPath(path) {
+        const paths = this.errorStore.paths().filter((stored) => stored === path || stored.startsWith(`${path}.`));
+        if (!paths.length) {
+            this.validator.cancelDelayed(path);
+            this.applyError(path, undefined);
+            return;
+        }
+        for (const storedPath of paths) {
+            this.validator.cancelDelayed(storedPath);
+            this.applyError(storedPath, undefined);
+        }
+    }
+    /** Focuses the first errored registered field, skipping form-level errors. */
+    focusFirstError(paths) {
+        const candidates = paths ?? this.errorStore.paths();
+        for (const path of candidates) {
+            if (!this.hasError(path))
+                continue;
+            const ref = this.refs.get(path)?.current;
+            if (ref?.focus) {
+                ref.focus();
+                return;
+            }
+        }
+    }
+    dependentFields(deps) {
+        if (!deps)
+            return [];
+        return (Array.isArray(deps) ? deps : [deps]).map(String);
+    }
     markTouched(path) {
         this.touchedFields[path] = true;
         this.ensureFieldState(path).isTouched = true;
@@ -491,7 +569,12 @@ export class Form {
             this.dirtyFields[path] = true;
         this.ensureFieldState(path).isDirty = !!this.dirtyFields[path];
     }
-    shouldValidateOnChange(path) { return this.options.mode === 'onChange' || this.options.mode === 'all' || (this.hasError(path) && this.options.reValidateMode === 'onChange'); }
+    shouldValidateOnChange(path) {
+        return this.options.mode === 'onChange'
+            || this.options.mode === 'all'
+            || (this.options.mode === 'onTouched' && this.touchedValidationFields.has(path))
+            || (this.hasError(path) && this.options.reValidateMode === 'onChange');
+    }
     isValidationCurrent(path, run, fieldVersions) {
         if (this.validationVersion !== run)
             return false;
@@ -508,174 +591,22 @@ export class Form {
             return new Date(String(value));
         return value;
     }
-    async validateSchema() {
-        if (!this.options.schema)
-            return {};
-        const schema = this.options.schema;
-        if ('safeParseAsync' in schema) {
-            const result = await schema.safeParseAsync(this.snapshot);
-            if (result.success)
-                return {};
-            return this.normalizeSchemaErrors(result.error);
-        }
-        const result = await schema['~run']({ value: this.snapshot, typed: false }, {});
-        if (!result.issues?.length)
-            return {};
-        return this.normalizeSchemaErrors({ issues: result.issues });
-    }
-    normalizeSchemaErrors(error) {
-        return error.issues.reduce((errors, issue) => {
-            const path = (issue.path ?? []).map((part) => String(typeof part === 'object' ? part.key : part)).join('.') || 'root';
-            if (!this.getError(errors, path))
-                setAtPath(errors, path, { type: issue.code ?? issue.type ?? 'validation', message: issue.message });
-            return errors;
-        }, {});
-    }
-    async validateRules(path) {
-        const rules = this.fieldOptions.get(path);
-        if (!rules)
-            return undefined;
-        const value = getAtPath(this.values, path);
-        const fail = (type, rule) => typeof rule === 'string' ? { type, message: rule } : { type };
-        if (rules.required && (value === undefined || value === null || value === ''))
-            return fail('required', rules.required);
-        if (rules.minLength && String(value ?? '').length < rules.minLength.value)
-            return { type: 'minLength', message: rules.minLength.message };
-        if (rules.maxLength && String(value ?? '').length > rules.maxLength.value)
-            return { type: 'maxLength', message: rules.maxLength.message };
-        if (rules.min && Number(value) < rules.min.value)
-            return { type: 'min', message: rules.min.message };
-        if (rules.max && Number(value) > rules.max.value)
-            return { type: 'max', message: rules.max.message };
-        if (rules.pattern && !rules.pattern.value.test(String(value ?? '')))
-            return { type: 'pattern', message: rules.pattern.message };
-        if (rules.validate) {
-            let result;
-            try {
-                result = await rules.validate(value, this.snapshot);
-            }
-            catch {
-                return { type: 'validate', message: 'Validation failed' };
-            }
-            if (result !== true)
-                return { type: 'validate', message: typeof result === 'string' ? result : undefined };
-        }
-        return undefined;
-    }
     ensureFieldState(path) {
-        const existing = this.fieldStatesByPath.get(path);
-        if (existing)
-            return existing;
-        const state = { invalid: false, isDirty: false, isTouched: false, isValidating: false };
-        this.setPathStore(this.fieldStatesByPath, this.fieldStatePathCounts, this.fieldStateChildren, path, state);
-        return state;
+        return this.fieldStateStore.ensure(path, () => ({ invalid: false, isDirty: false, isTouched: false, isValidating: false, error: undefined }));
     }
     applyFieldState(state, error) {
         state.error = error;
         state.invalid = !!error;
     }
     applyError(path, error) {
+        this.isValidOverride.set(undefined);
         if (error)
-            this.setPathStore(this.errorsByPath, this.errorPathCounts, this.errorChildren, path, error);
+            this.errorStore.set(path, error);
         else
-            this.deletePathStore(this.errorsByPath, this.errorPathCounts, this.errorChildren, path);
-        this.applyFieldState(this.ensureFieldState(path), error);
-    }
-    getError(errors, path) {
-        const value = getAtPath(errors, path);
-        return value && typeof value === 'object' && 'type' in value ? value : undefined;
-    }
-    hasError(path) { return this.errorsByPath.has(path); }
-    errorPaths(errors, base = '') {
-        const paths = [];
-        for (const [key, value] of Object.entries(errors)) {
-            if (value === undefined)
-                continue;
-            const path = base ? `${base}.${key}` : key;
-            if (value && typeof value === 'object' && 'type' in value)
-                paths.push(path);
-            if (value && typeof value === 'object')
-                paths.push(...this.errorPaths(value, path));
-        }
-        return paths;
-    }
-    deleteFieldState(path) {
-        this.deletePathStore(this.fieldStatesByPath, this.fieldStatePathCounts, this.fieldStateChildren, path);
-    }
-    fieldStates() {
-        return [...this.fieldStatesByPath.entries()];
-    }
-    setPathStore(store, counts, children, path, value) {
-        if (!store.has(path))
-            this.addPathToIndex(counts, children, path);
-        store.set(path, value);
-    }
-    deletePathStore(store, counts, children, path) {
-        if (!store.delete(path))
-            return;
-        const parts = path.split('.');
-        for (let index = parts.length; index > 0; index -= 1) {
-            const current = parts.slice(0, index).join('.');
-            const count = (counts.get(current) ?? 1) - 1;
-            if (count > 0) {
-                counts.set(current, count);
-                continue;
-            }
-            counts.delete(current);
-            const parent = parts.slice(0, index - 1).join('.');
-            const siblings = children.get(parent);
-            siblings?.delete(parts[index - 1]);
-            if (siblings?.size === 0)
-                children.delete(parent);
-        }
-    }
-    clearPathStore(store, counts, children) {
-        store.clear();
-        counts.clear();
-        children.clear();
-    }
-    addPathToIndex(counts, children, path) {
-        const parts = path.split('.');
-        for (let index = 1; index <= parts.length; index += 1) {
-            const current = parts.slice(0, index).join('.');
-            counts.set(current, (counts.get(current) ?? 0) + 1);
-            const parent = parts.slice(0, index - 1).join('.');
-            let siblings = children.get(parent);
-            if (!siblings)
-                children.set(parent, siblings = new Set());
-            siblings.add(parts[index - 1]);
-        }
-    }
-    createPathProxy(path, store, counts, children, cache) {
-        const cached = cache.get(path);
-        if (cached)
-            return cached;
-        const proxy = new Proxy({}, {
-            get: (_, property) => {
-                if (typeof property !== 'string')
-                    return undefined;
-                const current = store.get(path);
-                if (current && property in current)
-                    return current[property];
-                const childPath = path ? `${path}.${property}` : property;
-                const value = store.get(childPath);
-                if (value && !children.has(childPath))
-                    return value;
-                return counts.has(childPath) ? this.createPathProxy(childPath, store, counts, children, cache) : undefined;
-            },
-            ownKeys: () => [...Object.keys(store.get(path) ?? {}), ...(children.get(path) ?? [])],
-            getOwnPropertyDescriptor: (_, property) => {
-                if (typeof property !== 'string')
-                    return undefined;
-                const value = store.get(path);
-                if (value && property in value)
-                    return { configurable: true, enumerable: true, value: value[property] };
-                return children.get(path)?.has(property) ? { configurable: true, enumerable: true } : undefined;
-            },
-            set: () => false,
-            deleteProperty: () => false,
-        });
-        cache.set(path, proxy);
-        return proxy;
+            this.errorStore.delete(path);
+        const state = this.ensureFieldState(path);
+        state.error = error;
+        state.invalid = !!error;
     }
+    hasError(path) { return this.errorStore.has(path); }
 }