react-f0rm 1.3.0 → 1.5.0

package/dist/index.umd.js

@@ -266,12 +266,31 @@
     delete copy[prop];
     return copy;
   }
+  function arraySlot(container, prop) {
+    if (typeof prop === "number") return prop;
+    if (Array.isArray(container) && typeof prop === "string" && isIndex(prop)) {
+      return Number(prop);
+    }
+    return void 0;
+  }
+  function copyForProp(container, prop) {
+    if (arraySlot(container, prop) !== void 0) {
+      return Array.isArray(container) ? container.slice() : [];
+    }
+    return { ...container };
+  }
+  function ensureOwned(container, prop, owned) {
+    if (owned.has(container)) return container;
+    const copy = copyForProp(container, prop);
+    owned.add(copy);
+    return copy;
+  }
   function set(values, path, value) {
     if (!path.length) return value;
     const [prop, ...props] = path;
-    const index = typeof prop === "number" ? prop : Array.isArray(values) && typeof prop === "string" && isIndex(prop) ? Number(prop) : void 0;
+    const index = arraySlot(values, prop);
     if (index !== void 0) {
-      const arr = Array.isArray(values) ? values.slice() : [];
+      const arr = copyForProp(values, prop);
       arr[index] = set(arr[index], props, value);
       return arr;
     }
@@ -284,14 +303,8 @@
     let parentProp = "";
     for (let i = 0; i < path.length; i++) {
       const prop = path[i];
-      if (!owned.has(container)) {
-        let copy;
-        if (typeof prop === "number" || Array.isArray(container) && typeof prop === "string" && isIndex(prop)) {
-          copy = Array.isArray(container) ? container.slice() : [];
-        } else {
-          copy = { ...container };
-        }
-        owned.add(copy);
+      const copy = ensureOwned(container, prop, owned);
+      if (copy !== container) {
         if (i === 0) root = copy;
         else parent[parentProp] = copy;
         container = copy;
@@ -309,6 +322,18 @@
   function isPromise(value) {
     return value && typeof value.then === "function";
   }
+  function extractEventValue(e, options) {
+    const target = e?.target;
+    if (!target) return e;
+    if (target.type === "file") return target.files;
+    if (target.type === "checkbox") return target.checked;
+    if (options?.valueAsNumber) return target.valueAsNumber;
+    if (options?.valueAsDate) return target.valueAsDate;
+    return target.value;
+  }
+  function eventToValueOrDefault(eventToValue, options) {
+    return eventToValue ?? ((e) => extractEventValue(e, options));
+  }
   function isEqual(a, b) {
     if (Object.is(a, b)) return true;
     if (a instanceof Date && b instanceof Date)
@@ -355,12 +380,28 @@
     const value = normalizePath(name);
     return { value, key: JSON.stringify(value) };
   }
+  function segmentsFromKey(key) {
+    return JSON.parse(key);
+  }
 
+  function getOrCreate(map, form, create) {
+    if (map.has(form)) return map.get(form);
+    const value = create();
+    map.set(form, value);
+    return value;
+  }
   const valuesCaches = /* @__PURE__ */ new WeakMap();
-  function bumpValuesVersion(form) {
-    const cache = valuesCaches.get(form);
+  function bumpVersion(map, form) {
+    const cache = map.get(form);
     if (cache) cache.version++;
   }
+  function bumpValuesVersion(form) {
+    bumpVersion(valuesCaches, form);
+  }
+  const errorsCaches = /* @__PURE__ */ new WeakMap();
+  function bumpErrorsVersion(form) {
+    bumpVersion(errorsCaches, form);
+  }
   const dirtyBaselines = /* @__PURE__ */ new WeakMap();
   function getDirtyBaseline(form, key, segments) {
     const baselines = dirtyBaselines.get(form);
@@ -368,12 +409,7 @@
     return get(form.initialValues, segments);
   }
   function setDirtyBaseline(form, { key }, value) {
-    let baselines = dirtyBaselines.get(form);
-    if (!baselines) {
-      baselines = /* @__PURE__ */ new Map();
-      dirtyBaselines.set(form, baselines);
-    }
-    baselines.set(key, value);
+    getOrCreate(dirtyBaselines, form, () => /* @__PURE__ */ new Map()).set(key, value);
   }
   function pruneDirtyBaselines(form, { key }) {
     const baselines = dirtyBaselines.get(form);
@@ -391,8 +427,7 @@
   }
   const dirtyFieldsCaches = /* @__PURE__ */ new WeakMap();
   function bumpDirtyVersion(form) {
-    const cache = dirtyFieldsCaches.get(form);
-    if (cache) cache.version++;
+    bumpVersion(dirtyFieldsCaches, form);
   }
   function isSegmentsPath(name) {
     return name.some((part) => typeof part === "number");
@@ -425,11 +460,55 @@
   function getErrors({ errors }) {
     const entries = [];
     for (const [key, list] of errors) {
-      const path = JSON.parse(key).join(".");
+      const path = segmentsFromKey(key).join(".");
       for (const { type, message } of list) entries.push({ path, type, message });
     }
     return entries;
   }
+  function computeErrorsViews(form) {
+    const cached = errorsCaches.get(form);
+    if (cached?.version === 0) return;
+    const result = {};
+    const tree = {};
+    for (const [key, list] of form.errors) {
+      const segments = segmentsFromKey(key);
+      result[segments.join(".")] = list;
+      let node = tree;
+      for (let i = 0; i < segments.length - 1; i++) {
+        const segment = segments[i];
+        const slot = node[segment];
+        const container = slot && !(Array.isArray(slot) && slot.length > 0 && isFieldError(slot[0])) ? slot : typeof segments[i + 1] === "number" ? [] : {};
+        node[segment] = container;
+        node = container;
+      }
+      node[segments[segments.length - 1]] = list;
+    }
+    if (cached) {
+      cached.result = result;
+      cached.tree = tree;
+      cached.version = 0;
+    } else {
+      errorsCaches.set(form, { version: 0, result, tree });
+    }
+  }
+  function getErrorsRecord(form) {
+    computeErrorsViews(form);
+    return errorsCaches.get(form).result;
+  }
+  function getErrorsTree(form) {
+    computeErrorsViews(form);
+    return errorsCaches.get(form).tree;
+  }
+  function fieldPathToDottedKey(name) {
+    return create$1(name).value.join(".");
+  }
+  function dottedKeyToFieldPath(key) {
+    const segments = key.split(".");
+    const numeric = (segment) => /^(0|[1-9]\d*)$/.test(segment);
+    return segments.map(
+      (segment, i) => i > 0 && numeric(segment) ? `[${segment}]` : `${i > 0 ? "." : ""}${segment}`
+    ).join("");
+  }
   function getFirstError({ errors }) {
     return errors.values().next().value?.[0]?.message;
   }
@@ -441,6 +520,7 @@
     const list = normalizeErrors(error);
     if (list) errors.set(path.key, list);
     else errors.delete(path.key);
+    bumpErrorsVersion(form);
     emit(emitter, "errors", path);
     if (options?.shouldFocus) emit(emitter, "focusError", path.key);
   }
@@ -464,11 +544,13 @@
     const { emitter, errors } = form;
     if (name === void 0) {
       errors.clear();
+      bumpErrorsVersion(form);
       emit(emitter, "errors");
       return;
     }
     const paths = typeof name === "string" || isSegmentsPath(name) ? [create$1(name)] : name.map((one) => create$1(one));
     for (const { key } of paths) errors.delete(key);
+    bumpErrorsVersion(form);
     for (const path of paths) emit(emitter, "errors", path);
   }
   function setServerErrors(form, errors, options) {
@@ -484,24 +566,110 @@
       );
     }
   }
+  function clearServerErrors(form) {
+    const affected = Array.from(form.errors).filter(
+      ([, list]) => list.some((error) => error.type === "server")
+    );
+    if (affected.length === 0) return;
+    for (const [key, list] of affected) {
+      const kept = list.filter((error) => error.type !== "server");
+      if (kept.length) form.errors.set(key, kept);
+      else form.errors.delete(key);
+    }
+    bumpErrorsVersion(form);
+    emit(form.emitter, "errors");
+  }
   function hasErrors({ errors }) {
     return errors.size > 0;
   }
 
+  function hasStandardProps(schema) {
+    return !!schema && typeof schema === "object" && typeof schema["~standard"]?.validate === "function";
+  }
+  function toFieldError(issue) {
+    return { type: "standard", message: issue?.message || "Validation failed" };
+  }
+  function schemaToFieldValidator(schema) {
+    return async (value) => {
+      const result = await schema["~standard"].validate(value);
+      if (!result.issues?.length) return void 0;
+      return result.issues.map(toFieldError);
+    };
+  }
+  function schemaToFormValidator(schema) {
+    return async (values) => {
+      const result = await schema["~standard"].validate(values);
+      const { issues } = result;
+      if (!issues?.length) {
+        return {
+          [VALIDATION_OUTCOME]: true,
+          values: "value" in result ? result.value : void 0
+        };
+      }
+      const errors = {};
+      for (const issue of issues) {
+        const segments = toPathSegments(issue);
+        if (segments.length) {
+          assignAtPath(errors, segments, toFieldError(issue));
+        } else {
+          const slot = errors[FORM_ERROR] ??= [];
+          if (Array.isArray(slot)) slot.push(toFieldError(issue));
+        }
+      }
+      return { [VALIDATION_OUTCOME]: true, errors: pruneEmpty(errors) || {} };
+    };
+  }
+  function toPathSegments(issue) {
+    return (issue.path || []).map(
+      (segment) => String(
+        typeof segment === "object" && segment !== null ? segment.key : segment
+      )
+    );
+  }
+  function assignAtPath(root, segments, error) {
+    let node = root;
+    for (let i = 0; i < segments.length - 1; i++) {
+      const segment = segments[i];
+      if (node[segment] === void 0) node[segment] = {};
+      const next = node[segment];
+      if (!isBranch(next)) return;
+      node = next;
+    }
+    const leaf = segments[segments.length - 1];
+    const slot = node[leaf];
+    if (slot === void 0) node[leaf] = [error];
+    else if (Array.isArray(slot)) slot.push(error);
+  }
+  function isBranch(value) {
+    return !!value && typeof value === "object" && !Array.isArray(value);
+  }
+  function pruneEmpty(node) {
+    const result = {};
+    for (const [key, value] of Object.entries(node)) {
+      if (isBranch(value)) {
+        const pruned = pruneEmpty(value);
+        if (pruned) result[key] = pruned;
+      } else {
+        result[key] = value;
+      }
+    }
+    return Object.keys(result).length ? result : void 0;
+  }
+
   function isFieldDirtyByPath(form, path) {
     const live = form.values.get(path.key);
     return form.values.has(path.key) && getDirtyBaseline(form, path.key, path.value) !== live;
   }
   function isDirty(form) {
-    let dirty = false;
-    forEachDirtyField(form, () => {
-      dirty = true;
-    });
-    return dirty;
+    for (const [key, value] of form.values) {
+      const path = segmentsFromKey(key);
+      if (getDirtyBaseline(form, key, path) !== value) return true;
+    }
+    return false;
   }
   function forEachDirtyField(form, fn) {
     for (const [key, value] of form.values) {
-      const path = JSON.parse(key);
+      const path = segmentsFromKey(key);
       if (getDirtyBaseline(form, key, path) !== value) fn(path.join("."));
     }
   }
@@ -518,11 +686,11 @@
     return aKeys.every((key) => b[key] === true);
   }
   function getDirtyFields(form) {
-    let cache = dirtyFieldsCaches.get(form);
-    if (!cache) {
-      cache = { version: 0, result: computeDirtyFields(form) };
-      dirtyFieldsCaches.set(form, cache);
-    } else if (cache.version > 0) {
+    const cache = getOrCreate(dirtyFieldsCaches, form, () => ({
+      version: 0,
+      result: computeDirtyFields(form)
+    }));
+    if (cache.version > 0) {
       const result = computeDirtyFields(form);
       if (!sameDirtyKeys(cache.result, result)) cache.result = result;
       cache.version = 0;
@@ -545,21 +713,18 @@
     return touched.has(path.key);
   }
   function getTouchedFields({ touched }) {
-    return Array.from(
-      touched,
-      (key) => JSON.parse(key).join(".")
-    );
+    return Array.from(touched, (key) => segmentsFromKey(key).join("."));
   }
   function isTouched({ touched }) {
     return touched.size > 0;
   }
 
   function getValues(form) {
-    let cache = valuesCaches.get(form);
-    if (!cache) {
-      cache = { version: 0, result: computeValues(form) };
-      valuesCaches.set(form, cache);
-    } else if (cache.version > 0) {
+    const cache = getOrCreate(valuesCaches, form, () => ({
+      version: 0,
+      result: computeValues(form)
+    }));
+    if (cache.version > 0) {
       cache.result = computeValues(form);
       cache.version = 0;
     }
@@ -570,10 +735,10 @@
     const owned = /* @__PURE__ */ new Set();
     let merged = parsedValues ?? initialValues;
     for (const [key, value] of values) {
-      merged = setOwned(merged, JSON.parse(key), value, owned);
+      merged = setOwned(merged, segmentsFromKey(key), value, owned);
     }
     for (const key of deleted) {
-      merged = unset(merged, JSON.parse(key));
+      merged = unset(merged, segmentsFromKey(key));
     }
     return merged;
   }
@@ -647,7 +812,7 @@
       if (!hasLiveBranch(values, segments)) deleted.add(key);
     }
     if (!options?.keepTouched) touched.delete(key);
-    if (!options?.keepError) errors.delete(key);
+    if (!options?.keepError && errors.delete(key)) bumpErrorsVersion(form);
     validating.delete(key);
     bumpDirtyVersion(form);
     bumpValuesVersion(form);
@@ -697,9 +862,9 @@
   function collectValueLeaves(node, segments, out) {
     if (node !== null && typeof node === "object") {
       if (Array.isArray(node)) {
-        for (let i = 0; i < node.length; i++) {
-          collectValueLeaves(node[i], [...segments, i], out);
-        }
+        node.forEach(
+          (item, i) => collectValueLeaves(item, [...segments, i], out)
+        );
         return;
       }
       const keys = Object.keys(node);
@@ -712,18 +877,22 @@
     }
     out.push({ segments, value: node });
   }
-  function reset(form, initialValues, options) {
-    const keptValues = [];
+  function collectKeptValues(form, options) {
+    const kept = [];
     if (options?.keepValues) {
-      collectValueLeaves(getValues(form), [], keptValues);
+      collectValueLeaves(getValues(form), [], kept);
     } else if (options?.keepDirtyValues) {
       for (const [key, value] of form.values) {
-        const segments = JSON.parse(key);
+        const segments = segmentsFromKey(key);
         if (getDirtyBaseline(form, key, segments) !== value) {
-          keptValues.push({ segments, value });
+          kept.push({ segments, value });
         }
       }
     }
+    return kept;
+  }
+  function reset(form, initialValues, options) {
+    const keptValues = collectKeptValues(form, options);
     form.initialValues = options?.keepDefaultValues ? form.initialValues : initialValues ?? form.initialValues;
     form.parsedValues = void 0;
     if (!options?.keepErrors) clearErrors(form);
@@ -769,6 +938,7 @@
       emit(emitter, "touched", path);
     }
     if (!options?.keepErrors && errors.delete(path.key)) {
+      bumpErrorsVersion(form);
       emit(emitter, "errors", path);
     }
     bumpDirtyVersion(form);
@@ -783,13 +953,17 @@
     validating.add(path.key);
     emit(emitter, "validating", path);
   }
+  function asErrorList(output) {
+    if (output === void 0) return null;
+    const list = Array.isArray(output) ? output : [output];
+    return list.length ? list : null;
+  }
   function registerValidatorByPath(form, path, registration) {
     let timer = null;
     let controller = null;
     let marked = false;
     let lock = null;
     let errorSource = null;
-    const hasErrors2 = (errors) => errors !== void 0 && !(Array.isArray(errors) && errors.length === 0);
     const mark = () => {
       if (marked) return;
       marked = true;
@@ -803,44 +977,42 @@
     const runSync = () => {
       const sync = registration.sync();
       if (!sync) return false;
-      const errors = sync(getValueByPath(form, path), { form, path });
-      if (!hasErrors2(errors)) {
+      const gate = asErrorList(sync(getValueByPath(form, path), { form, path }));
+      if (!gate) {
         if (!registration.validate() || errorSource === "sync") {
           setErrorByPath(form, path, void 0);
           errorSource = null;
         }
         return false;
       }
-      setErrorByPath(form, path, errors);
+      setErrorByPath(form, path, gate);
       errorSource = "sync";
       return true;
     };
     const collectSyncErrors = () => {
       const sync = registration.sync();
       if (!sync) return null;
-      const errors = sync(getValueByPath(form, path), { form, path });
-      if (errors === void 0) return null;
-      const list = Array.isArray(errors) ? errors : [errors];
-      return list.length ? list : null;
+      return asErrorList(sync(getValueByPath(form, path), { form, path }));
     };
     const land = (result) => {
       if (registration.asyncAlways?.()) {
         const gate = collectSyncErrors();
-        const own = result === void 0 ? [] : Array.isArray(result) ? result : [result];
+        const own = asErrorList(result) ?? [];
         setErrorByPath(form, path, [...gate ?? [], ...own]);
-        errorSource = hasErrors2(result) ? "validator" : gate ? "sync" : null;
+        errorSource = own.length ? "validator" : gate ? "sync" : null;
       } else {
         setErrorByPath(form, path, result);
-        errorSource = hasErrors2(result) ? "validator" : null;
+        errorSource = asErrorList(result) ? "validator" : null;
       }
     };
-    const supersede = () => {
+    const cancel = () => {
       if (timer !== null) {
         clearTimeout(timer);
         timer = null;
       }
       controller?.abort();
       lock = {};
+      unmark();
     };
     const runValidator = () => {
       const fn = registration.validate();
@@ -868,13 +1040,11 @@
         return;
       }
       mark();
-      result.then(
-        (error) => {
-          if (lock === round) {
-            land(error);
-          }
+      result.then((error) => {
+        if (lock === round) {
+          land(error);
         }
-      ).catch(() => {
+      }).catch(() => {
       }).finally(() => {
         if (lock === round) {
           unmark();
@@ -882,21 +1052,18 @@
         }
       });
     };
+    const gateOwnsKick = () => {
+      if (!(runSync() && !registration.asyncAlways?.())) return false;
+      cancel();
+      return true;
+    };
     const run = () => {
       timer = null;
-      if (runSync() && !registration.asyncAlways?.()) {
-        supersede();
-        unmark();
-        return;
-      }
+      if (gateOwnsKick()) return;
       runValidator();
     };
     const kick = () => {
-      if (runSync() && !registration.asyncAlways?.()) {
-        supersede();
-        unmark();
-        return;
-      }
+      if (gateOwnsKick()) return;
       if (!registration.validate()) return;
       const debounce = registration.debounce();
       if (debounce > 0) {
@@ -910,12 +1077,7 @@
     form.validators.set(path.key, kick);
     return () => {
       form.validators.delete(path.key);
-      if (timer !== null) {
-        clearTimeout(timer);
-        timer = null;
-      }
-      unmark();
-      controller?.abort();
+      cancel();
     };
   }
   async function trigger(form, name, options) {
@@ -925,29 +1087,27 @@
       () => keys2 === void 0 ? fieldsSettled(form) : keys2.every((key) => !form.validating.has(key)),
       () => false
     );
+    const focusFirstError = (keys2) => {
+      const firstKey = keys2 === void 0 ? form.errors.keys().next().value : keys2.find((key) => form.errors.has(key));
+      if (firstKey !== void 0) emit(form.emitter, "focusError", firstKey);
+    };
     if (name === void 0) {
       form.validators.forEach((validator) => validator());
       await settle();
       if (form.validate) await runFormValidate(form);
       if (options?.shouldTouch) touchKeys(form, [...form.validators.keys()]);
-      if (options?.shouldFocus) {
-        const firstKey = form.errors.keys().next().value;
-        if (firstKey !== void 0) emit(form.emitter, "focusError", firstKey);
-      }
+      if (options?.shouldFocus) focusFirstError();
       return !hasErrors(form);
     }
     const keys = typeof name === "string" || isSegmentsPath(name) ? [create$1(name).key] : name.map((one) => create$1(one).key);
     keys.forEach((key) => form.validators.get(key)?.());
     await settle(keys);
     if (options?.shouldTouch) touchKeys(form, keys);
-    if (options?.shouldFocus) {
-      const firstKey = keys.find((key) => form.errors.has(key));
-      if (firstKey !== void 0) emit(form.emitter, "focusError", firstKey);
-    }
+    if (options?.shouldFocus) focusFirstError(keys);
     return keys.every((key) => !form.errors.has(key));
   }
   function touchKeys(form, keys) {
-    keys.forEach((key) => setTouchedByPath(form, create$1(JSON.parse(key))));
+    keys.forEach((key) => setTouchedByPath(form, create$1(segmentsFromKey(key))));
   }
   function setFormErrors(form, result, segments = [], footprint) {
     Object.entries(result).forEach(([key, value]) => {
@@ -956,16 +1116,9 @@
         ...isIndex(key) ? [key] : normalizePath(key)
       ];
       if (typeof value === "string") {
-        if (value) {
-          setError(form, path, value);
-          recordFootprint(form, path, footprint);
-        }
-      } else if (Array.isArray(value)) {
-        setError(form, path, value);
-        recordFootprint(form, path, footprint);
-      } else if (isFieldError(value)) {
-        setError(form, path, value);
-        recordFootprint(form, path, footprint);
+        if (value) landLeafError(form, path, value, footprint);
+      } else if (Array.isArray(value) || isFieldError(value)) {
+        landLeafError(form, path, value, footprint);
       } else if (value && typeof value === "object") {
         setFormErrors(form, value, path, footprint);
       }
@@ -977,8 +1130,12 @@
     const stored = form.errors.get(path.key);
     if (stored) footprint.set(path.key, stored);
   }
+  function landLeafError(form, path, error, footprint) {
+    setError(form, path, error);
+    recordFootprint(form, path, footprint);
+  }
   function applyValidateResult(form, result) {
-    const footprint = form.validateDeps ? getFormErrorFootprint(form) : void 0;
+    const footprint = form.validateDeps || form.validateMode !== "onSubmit" ? getFormErrorFootprint(form) : void 0;
     if (footprint) {
       clearFormValidateErrors(form, footprint);
       footprint.clear();
@@ -994,12 +1151,7 @@
   }
   const formErrorFootprints = /* @__PURE__ */ new WeakMap();
   function getFormErrorFootprint(form) {
-    let footprint = formErrorFootprints.get(form);
-    if (!footprint) {
-      footprint = /* @__PURE__ */ new Map();
-      formErrorFootprints.set(form, footprint);
-    }
-    return footprint;
+    return getOrCreate(formErrorFootprints, form, () => /* @__PURE__ */ new Map());
   }
   function hasFormValidateErrors(form) {
     const footprint = formErrorFootprints.get(form);
@@ -1014,7 +1166,8 @@
       const stored = form.errors.get(key);
       if (stored !== written) continue;
       form.errors.delete(key);
-      emit(form.emitter, "errors", create$1(JSON.parse(key)));
+      bumpErrorsVersion(form);
+      emit(form.emitter, "errors", create$1(segmentsFromKey(key)));
     }
   }
   const FORM_VALIDATING_KEY = "__form_validate__";
@@ -1027,18 +1180,13 @@
   const SETTLED = /* @__PURE__ */ Symbol("form-validate-settled");
   const formValidateStates = /* @__PURE__ */ new WeakMap();
   function getFormValidateState(form) {
-    let state = formValidateStates.get(form);
-    if (!state) {
-      state = {
-        timer: null,
-        controller: null,
-        round: null,
-        marked: false,
-        waiters: []
-      };
-      formValidateStates.set(form, state);
-    }
-    return state;
+    return getOrCreate(formValidateStates, form, () => ({
+      timer: null,
+      controller: null,
+      round: null,
+      marked: false,
+      waiters: []
+    }));
   }
   function runFormValidate(form) {
     const validate2 = form.validate;
@@ -1076,14 +1224,9 @@
     if (!validate2) return Promise.resolve();
     state.controller?.abort();
     const controller = state.controller = new AbortController();
-    let outcome;
-    try {
-      outcome = Promise.resolve(
-        validate2(getValues(form), { form, signal: controller.signal })
-      );
-    } catch (error) {
-      outcome = Promise.reject(error);
-    }
+    const outcome = new Promise(
+      (resolve) => resolve(validate2(getValues(form), { form, signal: controller.signal }))
+    );
     return outcome.then(
       (result) => {
         if (state.round === round) applyValidateResult(form, result);
@@ -1109,27 +1252,29 @@
       else waiter.reject(outcome);
     }
   }
+  function shouldKick(mode, cadence, touched, hasError, reValidateMode) {
+    return mode === cadence || mode === "all" || mode === "onTouched" && touched || reValidateMode === cadence && hasError();
+  }
   function revalidateFormOnChange(form, path, mode) {
     if (!form.validateDeps?.has(path.key) || !form.validate) return;
-    if (mode === "onChange" || mode === "all" || mode === "onTouched" && hasTouchedByPath(form, path) || form.reValidateMode === "onChange" && hasFormValidateErrors(form)) {
+    if (shouldKick(
+      mode,
+      "onChange",
+      hasTouchedByPath(form, path),
+      () => hasFormValidateErrors(form),
+      form.reValidateMode
+    )) {
       runFormValidate(form).catch(() => {
       });
     }
   }
   const fieldValidateDeps = /* @__PURE__ */ new WeakMap();
   function registerFieldValidateDeps(form, key, depKeys) {
-    let deps = fieldValidateDeps.get(form);
-    if (!deps) {
-      deps = /* @__PURE__ */ new Map();
-      fieldValidateDeps.set(form, deps);
-    }
+    const deps = getOrCreate(fieldValidateDeps, form, () => /* @__PURE__ */ new Map());
     for (const depKey of depKeys) {
-      let dependents = deps.get(depKey);
-      if (!dependents) {
-        dependents = /* @__PURE__ */ new Set();
-        deps.set(depKey, dependents);
-      }
+      const dependents = deps.get(depKey) ?? /* @__PURE__ */ new Set();
       dependents.add(key);
+      deps.set(depKey, dependents);
     }
   }
   function unregisterFieldValidateDeps(form, key, depKeys) {
@@ -1146,7 +1291,13 @@
     if (!dependents?.size) return;
     for (const dependent of dependents) {
       if (dependent === path.key) continue;
-      if (mode === "onChange" || mode === "all" || mode === "onTouched" && hasTouchedByPath(form, path) || form.reValidateMode === "onChange" && form.errors.has(dependent)) {
+      if (shouldKick(
+        mode,
+        "onChange",
+        hasTouchedByPath(form, path),
+        () => form.errors.has(dependent),
+        form.reValidateMode
+      )) {
         form.validators.get(dependent)?.();
       }
     }
@@ -1188,11 +1339,7 @@
     }
   }
   function registerFieldMode(form, path, mode) {
-    let modes = fieldModes.get(form);
-    if (!modes) {
-      modes = /* @__PURE__ */ new Map();
-      fieldModes.set(form, modes);
-    }
+    const modes = getOrCreate(fieldModes, form, () => /* @__PURE__ */ new Map());
     const displaced = modes.has(path.key);
     const token = {};
     modes.set(path.key, { mode, token });
@@ -1203,10 +1350,38 @@
     const entry = modes?.get(path.key);
     if (modes && entry && entry.token === token) modes.delete(path.key);
   }
-  function runUserChangeGate(form, path, mode) {
-    if (mode === "onChange" || mode === "all" || mode === "onTouched" && hasTouchedByPath(form, path) || getFieldErrorsByPath(form, path).length > 0 && form.reValidateMode === "onChange")
+  function firstMountedDescendantKey(form, ancestor) {
+    const prefix = `${ancestor.key.slice(0, -1)},`;
+    for (const key of fieldModes.get(form)?.keys() ?? []) {
+      if (key.startsWith(prefix)) return key;
+    }
+    return void 0;
+  }
+  function fireFormValidate(form, cadence) {
+    if (form.validateMode !== cadence || !form.validate) return;
+    runFormValidate(form).catch(() => {
+    });
+  }
+  function kickFieldValidator(form, path, mode, cadence, touched) {
+    if (shouldKick(
+      mode,
+      cadence,
+      touched,
+      () => getFieldErrorsByPath(form, path).length > 0,
+      form.reValidateMode
+    ))
       form.validators.get(path.key)?.();
+  }
+  function runUserChangeGate(form, path, mode) {
+    kickFieldValidator(
+      form,
+      path,
+      mode,
+      "onChange",
+      hasTouchedByPath(form, path)
+    );
     revalidateFormOnChange(form, path, mode);
+    fireFormValidate(form, "onChange");
     revalidateDependentsOnChange(form, path, mode);
   }
   function userChangeByPath(form, path, value) {
@@ -1218,9 +1393,323 @@
     setTouchedByPath(form, path);
     const entry = fieldModes.get(form)?.get(path.key);
     if (!entry) return;
-    const mode = entry.mode ?? form.mode;
-    if (mode === "onBlur" || mode === "onTouched" || mode === "all" || getFieldErrorsByPath(form, path).length > 0 && form.reValidateMode === "onBlur")
-      form.validators.get(path.key)?.();
+    kickFieldValidator(form, path, entry.mode ?? form.mode, "onBlur", true);
+    fireFormValidate(form, "onBlur");
+  }
+
+  function removeFieldForUnmount(form, path) {
+    const { key } = path;
+    const snapshot = {
+      present: form.values.has(key),
+      value: form.values.get(key),
+      touched: form.touched.has(key),
+      errors: form.errors.get(key)
+    };
+    removeFieldByPath(form, path);
+    return snapshot;
+  }
+  function restoreRemovedField(form, path, snapshot) {
+    const { key } = path;
+    if (snapshot.present) {
+      setValueByPath(form, path, snapshot.value, { shouldDirty: false });
+    } else {
+      form.deleted.delete(key);
+      bumpValuesVersion(form);
+      emit(form.emitter, "change", path);
+    }
+    if (snapshot.touched) setTouchedByPath(form, path);
+    if (snapshot.errors) setErrorByPath(form, path, snapshot.errors);
+  }
+
+  function hasRuleConstraints(rules) {
+    return rules.required !== void 0 || rules.min !== void 0 || rules.max !== void 0 || rules.minLength !== void 0 || rules.maxLength !== void 0 || rules.pattern !== void 0 || rules.validate !== void 0;
+  }
+  function defaultMessage(type, bound) {
+    switch (type) {
+      case "required":
+        return "This field is required";
+      case "min":
+        return `Must be at least ${bound}`;
+      case "max":
+        return `Must be at most ${bound}`;
+      case "minLength":
+        return `Must be at least ${bound} characters`;
+      case "maxLength":
+        return `Must be at most ${bound} characters`;
+      case "pattern":
+        return "Invalid format";
+      default:
+        return "Invalid value";
+    }
+  }
+  function resolveMessage(entry, bound) {
+    return typeof entry === "function" ? entry(bound) : entry?.replace("{bound}", String(bound));
+  }
+  function numericMetric(value) {
+    const n = Number(value);
+    return Number.isNaN(n) ? void 0 : n;
+  }
+  function sizedMetric(value) {
+    return typeof value === "string" || Array.isArray(value) ? value.length : void 0;
+  }
+  const BOUND_CHECKS = [
+    ["min", numericMetric, (metric, bound) => metric < bound],
+    ["max", numericMetric, (metric, bound) => metric > bound],
+    ["minLength", sizedMetric, (metric, bound) => metric < bound],
+    ["maxLength", sizedMetric, (metric, bound) => metric > bound]
+  ];
+  function rulesToValidator(rules, formMessages) {
+    return (value, meta) => {
+      if (rules.required) {
+        if (value === "" || value === void 0 || value === null || Array.isArray(value) && value.length === 0) {
+          return [
+            {
+              type: "required",
+              message: typeof rules.required === "string" ? rules.required : resolveMessage(formMessages?.required) ?? defaultMessage("required")
+            }
+          ];
+        }
+      }
+      const errors = [];
+      const message = (type, bound) => rules.messages?.[type] ?? resolveMessage(formMessages?.[type], bound) ?? defaultMessage(type, bound);
+      for (const [type, measure, fails] of BOUND_CHECKS) {
+        const bound = rules[type];
+        if (bound === void 0) continue;
+        const metric = measure(value);
+        if (metric !== void 0 && fails(metric, bound)) {
+          errors.push({ type, message: message(type, bound) });
+        }
+      }
+      if (rules.pattern && !rules.pattern.value.test(value)) {
+        errors.push({
+          type: "pattern",
+          // pattern.message is type-required but JS consumers may omit it.
+          message: rules.messages?.pattern ?? rules.pattern.message ?? resolveMessage(formMessages?.pattern) ?? defaultMessage("pattern")
+        });
+      }
+      if (rules.validate !== void 0) {
+        const fns = typeof rules.validate === "function" ? { validate: rules.validate } : rules.validate;
+        for (const [type, fn] of Object.entries(fns)) {
+          const result = fn(value, meta);
+          if (result === void 0) continue;
+          for (const entry of Array.isArray(result) ? result : [result]) {
+            errors.push(
+              typeof entry === "string" ? { type, message: entry } : { ...entry, type }
+            );
+          }
+        }
+      }
+      return errors.length ? errors : void 0;
+    };
+  }
+  function rulesToConstraintAttrs(rules) {
+    const attrs = {};
+    if (rules.required) attrs.required = true;
+    for (const key of ["min", "max", "minLength", "maxLength"]) {
+      if (rules[key] !== void 0) attrs[key] = rules[key];
+    }
+    if (rules.pattern) attrs.pattern = rules.pattern.value.source;
+    return attrs;
+  }
+
+  function registerField(form, name, options) {
+    const path = create$1(name);
+    const {
+      mode,
+      shouldUnregister,
+      eventToValue,
+      valueAsNumber,
+      valueAsDate,
+      rules
+    } = options ?? {};
+    const toValue = eventToValue ?? ((e) => {
+      const target = e?.target;
+      if (!target) return e;
+      if (target.type === "file") return target.files;
+      if (target.type === "checkbox") return target.checked;
+      if (valueAsNumber) return target.valueAsNumber;
+      if (valueAsDate) return target.valueAsDate;
+      return target.value;
+    });
+    let el = null;
+    let modeToken = null;
+    let disposeValidator = null;
+    let snapshot = null;
+    let offFocus = null;
+    let offBulkSync = null;
+    const syncDom = () => {
+      if (!el || el.type === "file") return;
+      const next = getValueByPath(form, path);
+      const asString = next == null ? "" : String(next);
+      if (el.value !== asString) el.value = asString;
+    };
+    const attach = (node) => {
+      if (snapshot) {
+        restoreRemovedField(form, path, snapshot);
+        snapshot = null;
+      }
+      el = node;
+      if (node.type !== "file" && getValueByPath(form, path) === void 0) {
+        seedValueByPath(
+          form,
+          path,
+          node.type === "checkbox" ? node.checked : node.value
+        );
+        emitChangeByPath(form, path);
+      }
+      modeToken = registerFieldMode(form, path, mode).token;
+      if (rules && hasRuleConstraints(rules)) {
+        const { required, ...rest } = rules;
+        const requiredGate = required !== void 0 ? rulesToValidator({ required }, form.messages) : void 0;
+        disposeValidator = registerValidatorByPath(form, path, {
+          validate: () => hasRuleConstraints(rest) ? rulesToValidator(rest, form.messages) : void 0,
+          debounce: () => 0,
+          sync: () => requiredGate
+        });
+      }
+      offFocus = on(
+        form.emitter,
+        "focusError",
+        (key, options2) => {
+          if (key !== path.key || !el || typeof el.focus !== "function") return;
+          el.focus();
+          if (options2?.shouldSelect && typeof el.select === "function") {
+            el.select();
+          }
+        }
+      );
+      offBulkSync = on(form.emitter, "change", (changed) => {
+        if (changed) return;
+        syncDom();
+      });
+    };
+    const detach = () => {
+      if (modeToken) {
+        unregisterFieldMode(form, path, modeToken);
+        modeToken = null;
+      }
+      if (disposeValidator) {
+        disposeValidator();
+        disposeValidator = null;
+      }
+      if (offFocus) {
+        offFocus();
+        offFocus = null;
+      }
+      if (offBulkSync) {
+        offBulkSync();
+        offBulkSync = null;
+      }
+      el = null;
+      if ((shouldUnregister ?? form.shouldUnregister) !== false) {
+        snapshot = removeFieldForUnmount(form, path);
+      }
+    };
+    return {
+      name: path.key,
+      onChange: (e) => changeValueByPath(form, path, toValue(e)),
+      onBlur: () => userBlur(form, path),
+      ref: (node) => {
+        if (node) attach(node);
+        else detach();
+      }
+    };
+  }
+
+  function readArray(form, path) {
+    const value = getValueByPath(form, path);
+    return Array.isArray(value) ? value : [];
+  }
+  function appendValueByPath(form, path, value) {
+    const arr = readArray(form, path);
+    setValueByPath(form, path, [...arr, value]);
+  }
+  function prependValueByPath(form, path, value) {
+    const arr = readArray(form, path);
+    setValueByPath(form, path, [value, ...arr]);
+  }
+  function insertValueByPath(form, path, index, value) {
+    const arr = readArray(form, path);
+    if (index < 0 || index > arr.length) return false;
+    setValueByPath(form, path, [
+      ...arr.slice(0, index),
+      value,
+      ...arr.slice(index)
+    ]);
+    return true;
+  }
+  function removeValueByPath(form, path, indices) {
+    const arr = readArray(form, path);
+    const drop = /* @__PURE__ */ new Set();
+    for (const index of Array.isArray(indices) ? indices : [indices]) {
+      if (index >= 0 && index < arr.length) drop.add(index);
+    }
+    if (drop.size === 0) return [];
+    const dropped = [...drop].sort((a, b) => b - a);
+    setValueByPath(
+      form,
+      path,
+      arr.filter((_, i) => !drop.has(i))
+    );
+    return dropped;
+  }
+  function moveValueByPath(form, path, from, to) {
+    const arr = readArray(form, path);
+    if (from < 0 || from >= arr.length || to < 0 || to >= arr.length) {
+      return false;
+    }
+    if (from === to) return false;
+    const next = [...arr];
+    const [item] = next.splice(from, 1);
+    next.splice(to, 0, item);
+    setValueByPath(form, path, next);
+    return true;
+  }
+  function swapValuesByPath(form, path, from, to) {
+    const arr = readArray(form, path);
+    if (from < 0 || from >= arr.length || to < 0 || to >= arr.length) {
+      return false;
+    }
+    if (from === to) return false;
+    const next = [...arr];
+    [next[from], next[to]] = [next[to], next[from]];
+    setValueByPath(form, path, next);
+    return true;
+  }
+  function replaceValuesByPath(form, path, values) {
+    setValueByPath(form, path, [...values]);
+  }
+  function updateValueByPath(form, path, index, value) {
+    const arr = readArray(form, path);
+    if (index < 0 || index >= arr.length) return false;
+    const next = [...arr];
+    next[index] = value;
+    setValueByPath(form, path, next);
+    return true;
+  }
+  function appendValue(form, name, value) {
+    appendValueByPath(form, create$1(name), value);
+  }
+  function prependValue(form, name, value) {
+    prependValueByPath(form, create$1(name), value);
+  }
+  function insertValue(form, name, index, value) {
+    return insertValueByPath(form, create$1(name), index, value);
+  }
+  function removeValue(form, name, indices) {
+    return removeValueByPath(form, create$1(name), indices);
+  }
+  function moveValue(form, name, from, to) {
+    return moveValueByPath(form, create$1(name), from, to);
+  }
+  function swapValues(form, name, from, to) {
+    return swapValuesByPath(form, create$1(name), from, to);
+  }
+  function replaceValues(form, name, values) {
+    replaceValuesByPath(form, create$1(name), values);
+  }
+  function updateValue(form, name, index, value) {
+    return updateValueByPath(form, create$1(name), index, value);
   }
 
   function setIsSubmitting(form, value) {
@@ -1255,9 +1744,7 @@
   }
   function getNativeErrors(formEl) {
     const errors = [];
-    const { elements } = formEl;
-    for (let i = 0; i < elements.length; i++) {
-      const el = elements[i];
+    for (const el of formEl.elements) {
       if (el.name && typeof el.checkValidity === "function" && !el.checkValidity()) {
         errors.push({
           path: nameToPath(el.name),
@@ -1274,18 +1761,21 @@
       onValidSubmit,
       onInvalidSubmit,
       onAction,
-      shouldFocusError = true
+      shouldFocusError = true,
+      shouldUseNativeValidation = form.shouldUseNativeValidation
     } = options ?? {};
     return async (e) => {
       if (e && typeof e.preventDefault === "function") {
         e.preventDefault();
       }
       const formEl = e?.currentTarget;
+      if (form.isSubmitting) return;
+      clearServerErrors(form);
       form.isSubmitted = true;
       setIsSubmitting(form, true);
       incrementSubmitCount(form);
       const values = getValues(form);
-      if (formEl && typeof formEl.checkValidity === "function" && formEl.checkValidity() === false) {
+      if (shouldUseNativeValidation && formEl && typeof formEl.checkValidity === "function" && formEl.checkValidity() === false) {
         formEl.reportValidity();
         if (shouldFocusError && typeof formEl.querySelector === "function") {
           const invalid = formEl.querySelector(":invalid");
@@ -1311,7 +1801,14 @@
         const submitted = getValues(form);
         if (onSubmit) await onSubmit(submitted, e);
         if (onValidSubmit) await onValidSubmit(submitted, e);
-        if (onAction) await onAction(submitted, e);
+        if (onAction) {
+          const result = await onAction(submitted, e);
+          if (result && typeof result === "object" && result.errors !== void 0 && typeof result.errors === "object") {
+            setServerErrors(form, result.errors);
+            setSubmitSuccessful(form, false);
+            return;
+          }
+        }
         setSubmitSuccessful(form, true);
       } catch {
         setSubmitSuccessful(form, false);
@@ -1327,19 +1824,45 @@
     else emit(form.emitter, "focusError", key);
   }
 
+  function seedInitialValues(form, emitter, source) {
+    if (!isPromise(source)) {
+      form.initialValues = source;
+      return;
+    }
+    form.isLoading = true;
+    emit(emitter, "loading");
+    Promise.resolve(source).then(
+      (resolved) => {
+        setInitialValues(form, resolved ?? {});
+        form.isLoading = false;
+        emit(emitter, "loading");
+      },
+      (error) => {
+        form.isLoading = false;
+        emit(emitter, "loading");
+      }
+    );
+  }
   function create(options) {
     const emitter = create$2();
     _setMaxListeners(emitter, 0);
-    let source = options?.initialValues ?? {};
-    if (typeof source === "function") source = source();
+    const initialSource = options?.initialValues ?? {};
+    const source = typeof initialSource === "function" ? initialSource() : initialSource;
+    const validateOption = options?.validate;
+    const wrappedValidate = validateOption && hasStandardProps(validateOption) ? schemaToFormValidator(
+      validateOption
+    ) : validateOption;
     const form = {
       emitter,
       ...options,
+      validate: wrappedValidate,
       mode: options?.mode ?? "onSubmit",
       reValidateMode: options?.reValidateMode ?? "onChange",
+      validateMode: options?.validateMode ?? "onSubmit",
       disabled: options?.disabled ?? false,
       validateOnMount: options?.validateOnMount ?? false,
       asyncAlways: options?.asyncAlways ?? false,
+      shouldUseNativeValidation: options?.shouldUseNativeValidation ?? true,
       validateDeps: options?.validateDeps ? new Set(options.validateDeps.map((dep) => create$1(dep).key)) : void 0,
       initialValues: {},
       values: /* @__PURE__ */ new Map(),
@@ -1354,116 +1877,47 @@
       submitCount: 0,
       isSubmitSuccessful: void 0,
       isLoading: false,
-      status: void 0
+      status: void 0,
+      register: (name, registerOptions) => registerField(form, name, registerOptions)
     };
-    if (isPromise(source)) {
-      form.isLoading = true;
-      emit(emitter, "loading");
-      Promise.resolve(source).then(
-        (resolved) => {
-          setInitialValues(form, resolved ?? {});
-          form.isLoading = false;
-          emit(emitter, "loading");
-        },
-        (error) => {
-          form.isLoading = false;
-          emit(emitter, "loading");
-        }
-      );
-    } else {
-      form.initialValues = source;
-    }
+    seedInitialValues(form, emitter, source);
     return form;
   }
 
-  function defaultMessage(type, bound) {
-    switch (type) {
-      case "required":
-        return "This field is required";
-      case "min":
-        return `Must be at least ${bound}`;
-      case "max":
-        return `Must be at most ${bound}`;
-      case "minLength":
-        return `Must be at least ${bound} characters`;
-      case "maxLength":
-        return `Must be at most ${bound} characters`;
-      case "pattern":
-        return "Invalid format";
-      default:
-        return "Invalid value";
-    }
-  }
-  function rulesToValidator(rules) {
-    return (value, meta) => {
-      if (rules.required) {
-        if (value === "" || value === void 0 || value === null || Array.isArray(value) && value.length === 0) {
-          return [
-            {
-              type: "required",
-              message: typeof rules.required === "string" ? rules.required : defaultMessage("required")
-            }
-          ];
-        }
-      }
-      const errors = [];
-      const message = (type, bound) => rules.messages?.[type] ?? defaultMessage(type, bound);
-      if (rules.min !== void 0) {
-        const n = Number(value);
-        if (!Number.isNaN(n) && n < rules.min) {
-          errors.push({ type: "min", message: message("min", rules.min) });
-        }
-      }
-      if (rules.max !== void 0) {
-        const n = Number(value);
-        if (!Number.isNaN(n) && n > rules.max) {
-          errors.push({ type: "max", message: message("max", rules.max) });
-        }
-      }
-      const isSized = typeof value === "string" || Array.isArray(value);
-      if (rules.minLength !== void 0 && isSized && value.length < rules.minLength) {
-        errors.push({
-          type: "minLength",
-          message: message("minLength", rules.minLength)
-        });
-      }
-      if (rules.maxLength !== void 0 && isSized && value.length > rules.maxLength) {
-        errors.push({
-          type: "maxLength",
-          message: message("maxLength", rules.maxLength)
-        });
-      }
-      if (rules.pattern && !rules.pattern.value.test(value)) {
-        errors.push({
-          type: "pattern",
-          // pattern.message is type-required but JS consumers may omit it.
-          message: rules.messages?.pattern ?? rules.pattern.message ?? defaultMessage("pattern")
-        });
-      }
-      if (rules.validate !== void 0) {
-        const fns = typeof rules.validate === "function" ? { validate: rules.validate } : rules.validate;
-        for (const [type, fn] of Object.entries(fns)) {
-          const result = fn(value, meta);
-          if (result === void 0) continue;
-          for (const entry of Array.isArray(result) ? result : [result]) {
-            errors.push(
-              typeof entry === "string" ? { type, message: entry } : { ...entry, type }
-            );
-          }
-        }
-      }
-      return errors.length ? errors : void 0;
-    };
-  }
-  function rulesToConstraintAttrs(rules) {
-    const attrs = {};
-    if (rules.required) attrs.required = true;
-    if (rules.min !== void 0) attrs.min = rules.min;
-    if (rules.max !== void 0) attrs.max = rules.max;
-    if (rules.minLength !== void 0) attrs.minLength = rules.minLength;
-    if (rules.maxLength !== void 0) attrs.maxLength = rules.maxLength;
-    if (rules.pattern) attrs.pattern = rules.pattern.value.source;
-    return attrs;
+  function errorIdFromKey(key) {
+    const id = key.replace(/["'[\],\s]+/g, "-").replace(/^-+|-+$/g, "");
+    return id || "field";
+  }
+  function fieldErrorId(name) {
+    return errorIdFromKey(create$1(name).key);
+  }
+
+  const fieldDisabledRegistry = /* @__PURE__ */ new WeakMap();
+  function registerFieldDisabled(form, path, disabled) {
+    if (disabled === void 0) return null;
+    const registry = getOrCreate(fieldDisabledRegistry, form, () => /* @__PURE__ */ new Map());
+    const token = {};
+    registry.set(path.key, { disabled, token });
+    emit(form.emitter, "disabled", path);
+    return { token };
+  }
+  function unregisterFieldDisabled(form, path, token) {
+    const registry = fieldDisabledRegistry.get(form);
+    const entry = registry?.get(path.key);
+    if (registry && entry && entry.token === token) {
+      registry.delete(path.key);
+      emit(form.emitter, "disabled", path);
+    }
+  }
+  function hasDisabledAncestor(form, path) {
+    const registry = fieldDisabledRegistry.get(form);
+    if (!registry?.size) return false;
+    const segments = path.value;
+    for (let i = 1; i < segments.length; i++) {
+      const prefix = JSON.stringify(segments.slice(0, i));
+      if (registry.get(prefix)?.disabled) return true;
+    }
+    return false;
   }
 
   function isDescendant(key, ancestorKey) {
@@ -1495,7 +1949,62 @@
     });
     return unsubscribes.length === 1 ? unsubscribes[0] : () => unsubscribes.forEach((unsubscribe) => unsubscribe());
   }
+  function watch(form, event, getter, isEqual) {
+    const cache = { hasValue: false };
+    const consumers = /* @__PURE__ */ new Set();
+    const wake = () => {
+      if (isEqual && cache.hasValue) {
+        const next = getter();
+        if (isEqual(cache.value, next)) return;
+        cache.value = next;
+      } else {
+        cache.value = getter();
+        cache.hasValue = true;
+      }
+      consumers.forEach((invalidate) => invalidate());
+    };
+    const off = on(form.emitter, event, wake);
+    return {
+      getSnapshot: () => {
+        if (!cache.hasValue) {
+          cache.value = getter();
+          cache.hasValue = true;
+        }
+        return cache.value;
+      },
+      subscribe: (invalidate) => {
+        consumers.add(invalidate);
+        return () => {
+          consumers.delete(invalidate);
+        };
+      },
+      dispose: () => {
+        off();
+        consumers.clear();
+      }
+    };
+  }
+
+  function pathFromKey(key) {
+    return create$1(segmentsFromKey(key));
+  }
+  function usePath(name) {
+    const key = React.useMemo(() => create$1(normalizePath(name)).key, [name]);
+    return React.useMemo(() => pathFromKey(key), [key]);
+  }
 
+  function seedIfChanged(form, seeded, source, resetOptions) {
+    if (seeded.done && (seeded.source === source || isEqual(seeded.source, source))) {
+      return;
+    }
+    seeded.done = true;
+    seeded.source = source;
+    if (resetOptions !== void 0) {
+      reset(form, source, resetOptions);
+    } else {
+      setInitialValues(form, source);
+    }
+  }
   function useForm(options) {
     const [form] = React.useState(() => {
       const created = create(options);
@@ -1506,6 +2015,7 @@
     });
     const initialValues = options && options.initialValues;
     const values = options && options.values;
+    const resetOptions = options && options.resetOptions;
     const seededRef = React.useRef(null);
     if (seededRef.current === null)
       seededRef.current = { done: false, source: void 0 };
@@ -1514,28 +2024,15 @@
       if (typeof initialValues === "function" || isPromise(initialValues)) {
         return;
       }
-      const seeded = seededRef.current;
-      if (seeded.done && (seeded.source === initialValues || isEqual(seeded.source, initialValues))) {
-        return;
-      }
-      seeded.done = true;
-      seeded.source = initialValues;
-      setInitialValues(form, initialValues);
+      seedIfChanged(form, seededRef.current, initialValues);
     }, [form, initialValues]);
     const controlledRef = React.useRef(null);
-    if (controlledRef.current === null) {
+    if (controlledRef.current === null)
       controlledRef.current = { done: false, source: void 0 };
-    }
     React.useEffect(() => {
       if (values === void 0) return;
-      const seeded = controlledRef.current;
-      if (seeded.done && (seeded.source === values || isEqual(seeded.source, values))) {
-        return;
-      }
-      seeded.done = true;
-      seeded.source = values;
-      setInitialValues(form, values);
-    }, [form, values]);
+      seedIfChanged(form, controlledRef.current, values, resetOptions);
+    }, [form, values, resetOptions]);
     React.useEffect(() => {
       if (!form.validateOnMount || !form.validate) return;
       const run = () => {
@@ -1603,8 +2100,7 @@
     const { key } = path;
     const scope = options?.exact === false ? "branch" : "leaf";
     const subscribeFactory = React.useCallback(
-      (invalidate) => onPathEvent(emitter, "change", path, scope, invalidate),
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- deps are `key` on purpose: useValue creates a fresh Path per render, so the object must stay out of the deps while the key string pins the subscription
+      (invalidate) => onPathEvent(emitter, "change", pathFromKey(key), scope, invalidate),
       [emitter, key, scope]
     );
     return useWatchCore(subscribeFactory, () => {
@@ -1615,18 +2111,26 @@
       return value === void 0 ? options?.defaultValue : value;
     });
   }
+  function useValues(form) {
+    return useWatch(form, "change", () => getValues(form));
+  }
   function useTouched(form, name) {
     return useTouchedByPath(form, create$1(name));
   }
-  function useTouchedByPath(form, path) {
+  function useKeyWatch(form, path, event, getter) {
     const { emitter } = form;
     const { key } = path;
     const subscribeFactory = React.useCallback(
-      (invalidate) => onKeyEvent(emitter, "touched", key, invalidate),
-      [emitter, key]
+      (invalidate) => onKeyEvent(emitter, event, key, invalidate),
+      [emitter, event, key]
     );
-    return useWatchCore(
-      subscribeFactory,
+    return useWatchCore(subscribeFactory, getter);
+  }
+  function useTouchedByPath(form, path) {
+    return useKeyWatch(
+      form,
+      path,
+      "touched",
       hasTouchedByPath.bind(null, form, path)
     );
   }
@@ -1634,26 +2138,21 @@
     return useErrorByPath(form, create$1(name))?.message;
   }
   function useErrorByPath(form, path) {
-    const { emitter } = form;
-    const { key } = path;
-    const subscribeFactory = React.useCallback(
-      (invalidate) => onKeyEvent(emitter, "errors", key, invalidate),
-      [emitter, key]
+    return useKeyWatch(
+      form,
+      path,
+      "errors",
+      getErrorByPath.bind(null, form, path)
     );
-    return useWatchCore(subscribeFactory, getErrorByPath.bind(null, form, path));
   }
   function useFieldErrors(form, name) {
     return useFieldErrorsByPath(form, create$1(name));
   }
   function useFieldErrorsByPath(form, path) {
-    const { emitter } = form;
-    const { key } = path;
-    const subscribeFactory = React.useCallback(
-      (invalidate) => onKeyEvent(emitter, "errors", key, invalidate),
-      [emitter, key]
-    );
-    return useWatchCore(
-      subscribeFactory,
+    return useKeyWatch(
+      form,
+      path,
+      "errors",
       getFieldErrorsByPath.bind(null, form, path)
     );
   }
@@ -1667,8 +2166,7 @@
     const { emitter } = form;
     const { key } = path;
     const subscribeFactory = React.useCallback(
-      (invalidate) => onPathEvent(emitter, "change", path, "leaf", invalidate),
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- same key-pinning convention as useValueByPath
+      (invalidate) => onPathEvent(emitter, "change", pathFromKey(key), "leaf", invalidate),
       [emitter, key]
     );
     return useWatchCore(subscribeFactory, () => isFieldDirtyByPath(form, path));
@@ -1690,14 +2188,22 @@
     "disabled",
     "loading"
   ];
+  function subscribeFormStateEvents(emitter, invalidate) {
+    const offs = FORM_STATE_EVENTS.map((event) => on(emitter, event, invalidate));
+    return () => {
+      for (const off of offs) off();
+    };
+  }
   function getFormState(form) {
+    const anyErrors = hasErrors(form);
     return {
       isDirty: isDirty(form),
       dirtyFields: getDirtyFields(form),
       isTouched: form.touched.size > 0,
       touchedFields: getTouchedFields(form),
-      hasErrors: hasErrors(form),
-      isValid: !hasErrors(form),
+      hasErrors: anyErrors,
+      isValid: !anyErrors,
+      errors: getErrorsRecord(form),
       isSubmitting: form.isSubmitting,
       isSubmitted: form.isSubmitted,
       isValidating: form.validating.size > 0,
@@ -1709,26 +2215,32 @@
   }
   function isSameFormState(a, b) {
     const sameTouched = a.touchedFields.length === b.touchedFields.length && a.touchedFields.every((path, i) => path === b.touchedFields[i]);
-    return a.isDirty === b.isDirty && a.dirtyFields === b.dirtyFields && a.isTouched === b.isTouched && sameTouched && a.hasErrors === b.hasErrors && a.isValid === b.isValid && a.isSubmitting === b.isSubmitting && a.isSubmitted === b.isSubmitted && a.isValidating === b.isValidating && a.isSubmitSuccessful === b.isSubmitSuccessful && a.submitCount === b.submitCount && a.isLoading === b.isLoading && a.disabled === b.disabled;
+    return a.isDirty === b.isDirty && a.dirtyFields === b.dirtyFields && a.isTouched === b.isTouched && sameTouched && a.hasErrors === b.hasErrors && a.isValid === b.isValid && a.errors === b.errors && a.isSubmitting === b.isSubmitting && a.isSubmitted === b.isSubmitted && a.isValidating === b.isValidating && a.isSubmitSuccessful === b.isSubmitSuccessful && a.submitCount === b.submitCount && a.isLoading === b.isLoading && a.disabled === b.disabled;
   }
   function useFormState(form) {
     const getter = React.useCallback(() => getFormState(form), [form]);
     const subscribeFactory = React.useCallback(
-      (invalidate) => {
-        const offs = FORM_STATE_EVENTS.map(
-          (event) => on(form.emitter, event, invalidate)
-        );
-        return () => {
-          for (const off of offs) off();
-        };
-      },
+      (invalidate) => subscribeFormStateEvents(form.emitter, invalidate),
       [form.emitter]
     );
     return useWatchCore(subscribeFactory, getter, isSameFormState);
   }
+  function useStore(form, selector, isEqual2) {
+    const subscribeFactory = React.useCallback(
+      (invalidate) => subscribeFormStateEvents(form.emitter, invalidate),
+      [form.emitter]
+    );
+    return useWatchCore(subscribeFactory, selector, isEqual2);
+  }
   function useHasErrors(form) {
     return useWatch(form, "errors", hasErrors.bind(null, form));
   }
+  function useErrors(form) {
+    return useWatch(form, "errors", () => getErrorsRecord(form));
+  }
+  function useErrorsTree(form) {
+    return useWatch(form, "errors", () => getErrorsTree(form));
+  }
   function useIsValid(form) {
     return useWatch(form, "errors", () => !hasErrors(form));
   }
@@ -1779,11 +2291,6 @@
     return useFieldErrorsByPath(form, create$1(FORM_ERROR));
   }
 
-  function usePath(name) {
-    const path = React.useMemo(() => create$1(normalizePath(name)), [name]);
-    return React.useMemo(() => path, [path.key]);
-  }
-
   function useStage(value) {
     const ref = React.useRef(value);
     ref.current = value;
@@ -1798,38 +2305,56 @@
   }
   function useUnmountRestore(teardown, restore) {
     const removedRef = React.useRef(false);
+    const teardownRef = useStage(teardown);
+    const restoreRef = useStage(restore);
     React.useEffect(() => {
+      const teardownOnce = teardownRef.current;
+      const restoreOnce = restoreRef.current;
       if (removedRef.current) {
         removedRef.current = false;
-        restore();
+        restoreOnce();
       }
       return () => {
         removedRef.current = true;
-        teardown();
+        teardownOnce();
       };
-    }, []);
+    }, [removedRef, teardownRef, restoreRef]);
+  }
+  function useUnmountFieldRemoval(form, path, shouldUnregister) {
+    const removalSnapshotRef = React.useRef(null);
+    const teardownOnUnmount = useStageFn(() => {
+      if ((shouldUnregister ?? form.shouldUnregister) === false) return;
+      removalSnapshotRef.current = removeFieldForUnmount(form, path);
+    });
+    const restoreAfterStrictMode = useStageFn(() => {
+      const snapshot = removalSnapshotRef.current;
+      removalSnapshotRef.current = null;
+      if (snapshot) restoreRemovedField(form, path, snapshot);
+    });
+    useUnmountRestore(teardownOnUnmount, restoreAfterStrictMode);
   }
 
+  function schemaAsValidator(validate) {
+    return validate && hasStandardProps(validate) ? schemaToFieldValidator(validate) : validate;
+  }
   function useValidate(validate, path, formProp, options) {
     const contextForm = React.useContext(FormContext);
     const form = formProp || contextForm;
     if (!form) throw new Error("no form provided");
-    const validateRef = React.useRef(validate);
-    validateRef.current = validate;
-    const debounceRef = React.useRef(options?.debounce ?? 0);
-    debounceRef.current = options?.debounce ?? 0;
-    const syncRef = React.useRef(options?.sync);
-    syncRef.current = options?.sync;
-    const asyncAlwaysRef = React.useRef(options?.asyncAlways ?? false);
-    asyncAlwaysRef.current = options?.asyncAlways ?? false;
+    const validateRef = useStage(schemaAsValidator(validate));
+    const debounceRef = useStage(options?.debounce ?? 0);
+    const syncRef = useStage(options?.sync);
+    const asyncAlwaysRef = useStage(options?.asyncAlways ?? false);
+    const validateOnMountRef = useStage(options?.validateOnMount);
     React.useEffect(() => {
-      const dispose = registerValidatorByPath(form, path, {
+      const spath = pathFromKey(path.key);
+      const dispose = registerValidatorByPath(form, spath, {
         validate: () => validateRef.current,
         debounce: () => debounceRef.current,
         sync: () => syncRef.current,
         asyncAlways: () => asyncAlwaysRef.current
       });
-      const validateOnMount = options?.validateOnMount ?? form.validateOnMount;
+      const validateOnMount = validateOnMountRef.current ?? form.validateOnMount;
       if (!validateOnMount || !validateRef.current && !syncRef.current) {
         return dispose;
       }
@@ -1850,41 +2375,40 @@
         disposed = true;
         dispose();
       };
-    }, [form, path.key]);
+    }, [
+      form,
+      path.key,
+      debounceRef,
+      syncRef,
+      asyncAlwaysRef,
+      validateRef,
+      validateOnMountRef
+    ]);
     return useStageFn(() => form.validators.get(path.key)?.());
   }
 
-  function removeFieldForUnmount(form, path) {
-    const { key } = path;
-    const snapshot = {
-      present: form.values.has(key),
-      value: form.values.get(key),
-      touched: form.touched.has(key),
-      errors: form.errors.get(key)
-    };
-    removeFieldByPath(form, path);
-    return snapshot;
-  }
-  function restoreRemovedField(form, path, snapshot) {
-    const { key } = path;
-    if (snapshot.present) {
-      setValueByPath(form, path, snapshot.value, { shouldDirty: false });
-    } else {
-      form.deleted.delete(key);
-      bumpValuesVersion(form);
-      emit(form.emitter, "change", path);
-    }
-    if (snapshot.touched) setTouchedByPath(form, path);
-    if (snapshot.errors) setErrorByPath(form, path, snapshot.errors);
-  }
-
   const uncontrolledSyncRegistry = /* @__PURE__ */ new WeakMap();
-  function hasRuleConstraints(rules) {
-    return rules.required !== void 0 || rules.min !== void 0 || rules.max !== void 0 || rules.minLength !== void 0 || rules.maxLength !== void 0 || rules.pattern !== void 0 || rules.validate !== void 0;
+  function getUncontrolledSyncEntry(form) {
+    const existing = uncontrolledSyncRegistry.get(form);
+    if (existing) return existing;
+    const cells = /* @__PURE__ */ new Map();
+    const off = on(form.emitter, "change", (changed) => {
+      if (changed) return;
+      for (const read of cells.values()) {
+        const { el, path } = read();
+        if (!el || el.type === "file") continue;
+        const next = getValueByPath(form, path);
+        const asString = next == null ? "" : String(next);
+        if (el.value !== asString) el.value = asString;
+      }
+    });
+    const entry = { cells, off };
+    uncontrolledSyncRegistry.set(form, entry);
+    return entry;
   }
-  function combineRulesAndValidate(rules, validate) {
+  function combineRulesAndValidate(rules, validate, formMessages) {
     if (!rules || !hasRuleConstraints(rules)) return validate;
-    const ruleValidator = rulesToValidator(rules);
+    const ruleValidator = rulesToValidator(rules, formMessages);
     if (!validate) return ruleValidator;
     return (value, meta) => {
       const ruleErrors = ruleValidator(value, meta);
@@ -1898,22 +2422,59 @@
       return isPromise(result) ? result.then(merge) : merge(result);
     };
   }
-  function useDelayedErrors(errors, delay) {
-    const [shown, setShown] = React.useState(errors);
-    React.useEffect(() => {
-      if (delay === void 0) return;
-      if (errors.length === 0) {
-        setShown(errors);
-        return;
-      }
-      if (shown.length > 0) {
-        setShown(errors);
-        return;
-      }
-      const timer = setTimeout(() => setShown(errors), delay);
-      return () => clearTimeout(timer);
-    }, [errors, delay, shown]);
-    return delay === void 0 ? errors : shown;
+  const NO_DELAYED_ERRORS = [];
+  function useDelayedErrors(form, path, delay) {
+    const pendingRef = React.useRef(false);
+    const prevRef = React.useRef(false);
+    const timerRef = React.useRef(null);
+    const subscribeFactory = React.useCallback(
+      (invalidate) => {
+        const spath = pathFromKey(path.key);
+        const clearTimer = () => {
+          if (timerRef.current !== null) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+          }
+        };
+        pendingRef.current = false;
+        prevRef.current = false;
+        clearTimer();
+        const startWindow = () => {
+          clearTimer();
+          pendingRef.current = true;
+          timerRef.current = setTimeout(() => {
+            timerRef.current = null;
+            pendingRef.current = false;
+            invalidate();
+          }, delay);
+        };
+        const off = onKeyEvent(form.emitter, "errors", spath.key, () => {
+          const has = getFieldErrorsByPath(form, spath).length > 0;
+          const was = prevRef.current;
+          prevRef.current = has;
+          if (delay !== void 0) {
+            if (!has) {
+              if (pendingRef.current) {
+                clearTimer();
+                pendingRef.current = false;
+              }
+            } else if (!was || pendingRef.current) {
+              startWindow();
+            }
+          }
+          invalidate();
+        });
+        return () => {
+          off();
+          clearTimer();
+        };
+      },
+      [form, path.key, delay]
+    );
+    return useWatchCore(
+      subscribeFactory,
+      () => delay === void 0 || !pendingRef.current ? getFieldErrorsByPath(form, path) : NO_DELAYED_ERRORS
+    );
   }
   function useFieldValue(form, path, uncontrolled) {
     const snapshotRef = React.useRef({
@@ -1948,7 +2509,11 @@
     disabled,
     uncontrolled,
     asyncAlways,
-    mode: modeOption
+    mode: modeOption,
+    eventToValue,
+    valueAsNumber,
+    valueAsDate,
+    type
   }, Context) {
     const contextForm = React.useContext(Context);
     const form = f1 || contextForm;
@@ -1966,22 +2531,32 @@
       emitChangeByPath(form, path);
     });
     const restRules = rules ? { ...rules, required: void 0 } : void 0;
-    useValidate(combineRulesAndValidate(restRules, validate), path, form, {
-      debounce: validateDebounce,
-      validateOnMount,
-      asyncAlways: asyncAlways ?? form.asyncAlways,
-      sync: rules && rules.required !== void 0 ? rulesToValidator({ required: rules.required }) : void 0
-    });
-    const liveErrors = useFieldErrorsByPath(form, path);
-    const errors = useDelayedErrors(liveErrors, delayError);
+    const validateWrapped = schemaAsValidator(validate);
+    useValidate(
+      combineRulesAndValidate(restRules, validateWrapped, form.messages),
+      path,
+      form,
+      {
+        debounce: validateDebounce,
+        validateOnMount,
+        asyncAlways: asyncAlways ?? form.asyncAlways,
+        sync: rules && rules.required !== void 0 ? rulesToValidator({ required: rules.required }, form.messages) : void 0
+      }
+    );
+    const errors = useDelayedErrors(form, path, delayError);
     const errorObject = errors[0];
     const error = errorObject?.message;
     const value = useFieldValue(form, path, !!uncontrolled);
     const isDirty = useWatchCore(
       React.useCallback(
         (invalidate) => uncontrolled ? () => {
-        } : onPathEvent(form.emitter, "change", path, "leaf", invalidate),
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- usePath memoizes the Path per key, so key pins the subscription like every path-scoped hook
+        } : onPathEvent(
+          form.emitter,
+          "change",
+          pathFromKey(path.key),
+          "leaf",
+          invalidate
+        ),
         [form.emitter, path.key, uncontrolled]
       ),
       () => isFieldDirtyByPath(form, path)
@@ -1993,20 +2568,46 @@
       ),
       () => form.validating.has(path.key)
     );
-    const formDisabled = useWatch(form, "disabled", () => form.disabled);
+    const mergedDisabled = useWatchCore(
+      React.useCallback(
+        (invalidate) => onPathEvent(
+          form.emitter,
+          "disabled",
+          pathFromKey(path.key),
+          "branch",
+          invalidate
+        ),
+        [form.emitter, path.key]
+      ),
+      () => form.disabled || disabled === true || disabled !== false && hasDisabledAncestor(form, path)
+    );
+    const disabledTokenRef = React.useRef(null);
+    React.useEffect(() => {
+      const spath = pathFromKey(path.key);
+      const registration = registerFieldDisabled(form, spath, disabled);
+      if (registration) disabledTokenRef.current = registration.token;
+      return () => {
+        if (disabledTokenRef.current !== null) {
+          unregisterFieldDisabled(form, spath, disabledTokenRef.current);
+          disabledTokenRef.current = null;
+        }
+      };
+    }, [form, path.key, disabled]);
     const onChange = useStageFn((v) => userChangeByPath(form, path, v));
     const onBlur = useStageFn(() => userBlur(form, path));
     React.useEffect(() => {
-      const { token, displaced } = registerFieldMode(form, path, modeOption);
-      return () => unregisterFieldMode(form, path, token);
+      const spath = pathFromKey(path.key);
+      const { token, displaced } = registerFieldMode(form, spath, modeOption);
+      return () => unregisterFieldMode(form, spath, token);
     }, [form, path.key, modeOption]);
     const depsKey = validateDeps?.length ? validateDeps.join("\n") : void 0;
+    const validateDepsRef = useStage(validateDeps);
     React.useEffect(() => {
       if (!depsKey) return;
-      const depKeys = validateDeps.map((dep) => create$1(dep).key);
+      const depKeys = validateDepsRef.current.map((dep) => create$1(dep).key);
       registerFieldValidateDeps(form, path.key, depKeys);
       return () => unregisterFieldValidateDeps(form, path.key, depKeys);
-    }, [form, path.key, depsKey]);
+    }, [form, path.key, depsKey, validateDepsRef]);
     const elementRef = React.useRef(null);
     const focusRef = React.useCallback((el) => {
       elementRef.current = el;
@@ -2028,24 +2629,9 @@
       [form, path.key]
     );
     React.useEffect(() => {
-      if (!uncontrolled) return;
-      let entry = uncontrolledSyncRegistry.get(form);
-      if (!entry) {
-        const cells = /* @__PURE__ */ new Map();
-        const off = on(form.emitter, "change", (changed) => {
-          if (changed) return;
-          for (const read of cells.values()) {
-            const { el, path: path2 } = read();
-            if (!el || el.type === "file") continue;
-            const next = getValueByPath(form, path2);
-            const asString = next == null ? "" : String(next);
-            if (el.value !== asString) el.value = asString;
-          }
-        });
-        entry = { cells, off };
-        uncontrolledSyncRegistry.set(form, entry);
-      }
-      entry.cells.set(path.key, () => ({ el: elementRef.current, path }));
+      const spath = pathFromKey(path.key);
+      const entry = getUncontrolledSyncEntry(form);
+      entry.cells.set(path.key, () => ({ el: elementRef.current, path: spath }));
       return () => {
         entry.cells.delete(path.key);
         if (entry.cells.size === 0) {
@@ -2054,17 +2640,28 @@
         }
       };
     }, [form, path.key, uncontrolled]);
-    const removalSnapshotRef = React.useRef(null);
-    const teardownOnUnmount = useStageFn(() => {
-      if ((shouldUnregister ?? form.shouldUnregister) === false) return;
-      removalSnapshotRef.current = removeFieldForUnmount(form, path);
-    });
-    const restoreAfterStrictMode = useStageFn(() => {
-      const snapshot = removalSnapshotRef.current;
-      removalSnapshotRef.current = null;
-      if (snapshot) restoreRemovedField(form, path, snapshot);
+    useUnmountFieldRemoval(form, path, shouldUnregister);
+    const extract = eventToValueOrDefault(eventToValue, {
+      valueAsNumber,
+      valueAsDate
     });
-    useUnmountRestore(teardownOnUnmount, restoreAfterStrictMode);
+    const inputProps = {
+      name: path.key,
+      ref: focusRef,
+      onChange: (e) => onChange(extract(e)),
+      onBlur,
+      disabled: mergedDisabled
+    };
+    if (type === "checkbox") {
+      inputProps.checked = !!value;
+    } else if (type !== "file") {
+      if (uncontrolled) inputProps.defaultValue = value;
+      else inputProps.value = value ?? "";
+    }
+    if (error) {
+      inputProps["aria-invalid"] = true;
+      inputProps["aria-describedby"] = errorIdFromKey(path.key);
+    }
     return {
       form,
       value,
@@ -2076,8 +2673,9 @@
       onChange,
       onBlur,
       name: path.key,
-      disabled: formDisabled || !!disabled,
-      focusRef
+      disabled: mergedDisabled,
+      focusRef,
+      inputProps
     };
   }
   function useField(options) {
@@ -2095,12 +2693,18 @@
     return arrayIdsRegistry.get(form)?.get(key);
   }
   function registerArrayIds(form, key, ids) {
-    let registry = arrayIdsRegistry.get(form);
-    if (!registry) {
-      registry = /* @__PURE__ */ new Map();
-      arrayIdsRegistry.set(form, registry);
-    }
+    const registry = arrayIdsRegistry.get(form) ?? /* @__PURE__ */ new Map();
     registry.set(key, ids);
+    arrayIdsRegistry.set(form, registry);
+  }
+  function scheduleArrayRowFocus(form, path, index, options) {
+    const { focus } = options ?? {};
+    if (focus === void 0) return;
+    setTimeout(() => {
+      const segments = [...path.value, index];
+      const key = typeof focus === "string" ? create$1([...segments, focus]).key : firstMountedDescendantKey(form, create$1(segments));
+      if (key !== void 0) emit(form.emitter, "focusError", key);
+    }, 0);
   }
   function bumpReducer(count) {
     return count + 1;
@@ -2113,18 +2717,8 @@
     const { rules, shouldUnregister } = options;
     const path = usePath(options.name);
     const idsRef = React.useRef([]);
-    const getArray = React.useCallback(
-      () => getValueByPath(form, path) || [],
-      [form, path]
-    );
-    const setArray = React.useCallback(
-      (arr) => {
-        setValueByPath(form, path, arr);
-      },
-      [form, path]
-    );
     const computeFields = React.useCallback(() => {
-      const arr = getArray();
+      const arr = getValueByPath(form, path) || [];
       while (idsRef.current.length < arr.length) {
         idsRef.current.push(generateId(form));
       }
@@ -2136,7 +2730,7 @@
         index,
         [keyName]: id
       }));
-    }, [getArray, form, keyName]);
+    }, [form, path, keyName]);
     const [fields, syncFields] = React.useReducer(
       computeFields,
       void 0,
@@ -2148,82 +2742,65 @@
     );
     registerArrayIds(form, path.key, idsRef.current);
     React.useEffect(() => {
-      registerArrayIds(form, path.key, idsRef.current);
+      const ids = idsRef.current;
+      registerArrayIds(form, path.key, ids);
       return () => {
         const registry = arrayIdsRegistry.get(form);
-        if (registry?.get(path.key) === idsRef.current) registry.delete(path.key);
+        if (registry?.get(path.key) === ids) registry.delete(path.key);
       };
     }, [form, path.key]);
-    const removalSnapshotRef = React.useRef(null);
-    const teardownOnUnmount = useStageFn(() => {
-      if ((shouldUnregister ?? form.shouldUnregister) === false) return;
-      removalSnapshotRef.current = removeFieldForUnmount(form, path);
-    });
-    const restoreAfterStrictMode = useStageFn(() => {
-      const snapshot = removalSnapshotRef.current;
-      removalSnapshotRef.current = null;
-      if (snapshot) restoreRemovedField(form, path, snapshot);
-    });
-    useUnmountRestore(teardownOnUnmount, restoreAfterStrictMode);
+    useUnmountFieldRemoval(form, path, shouldUnregister);
     useValidate(
-      rules ? rulesToValidator({ ...rules, required: void 0 }) : void 0,
+      rules ? rulesToValidator({ ...rules, required: void 0 }, form.messages) : void 0,
       path,
       form,
       {
-        sync: rules && rules.required !== void 0 ? rulesToValidator({ required: rules.required }) : void 0
+        sync: rules?.required !== void 0 ? rulesToValidator({ required: rules.required }, form.messages) : void 0
       }
     );
-    const append = useStageFn((value) => {
-      const arr = getArray();
-      idsRef.current.push(generateId(form));
-      setArray([...arr, value]);
-    });
-    const prepend = useStageFn((value) => {
-      const arr = getArray();
-      idsRef.current.unshift(generateId(form));
-      setArray([value, ...arr]);
-    });
-    const insert = useStageFn((index, value) => {
-      const arr = getArray();
-      idsRef.current.splice(index, 0, generateId(form));
-      const newArr = [...arr.slice(0, index), value, ...arr.slice(index)];
-      setArray(newArr);
-    });
-    const remove = useStageFn((index) => {
-      const arr = getArray();
-      idsRef.current.splice(index, 1);
-      const newArr = arr.filter((_, i) => i !== index);
-      setArray(newArr);
+    const append = useStageFn(
+      (value, options2) => {
+        idsRef.current.push(generateId(form));
+        appendValueByPath(form, path, value);
+        scheduleArrayRowFocus(form, path, idsRef.current.length - 1, options2);
+      }
+    );
+    const prepend = useStageFn(
+      (value, options2) => {
+        idsRef.current.unshift(generateId(form));
+        prependValueByPath(form, path, value);
+        scheduleArrayRowFocus(form, path, 0, options2);
+      }
+    );
+    const insert = useStageFn(
+      (index, value, options2) => {
+        if (!insertValueByPath(form, path, index, value)) return;
+        idsRef.current.splice(index, 0, generateId(form));
+        scheduleArrayRowFocus(form, path, index, options2);
+      }
+    );
+    const remove = useStageFn((indices) => {
+      const dropped = removeValueByPath(form, path, indices);
+      for (const index of dropped) idsRef.current.splice(index, 1);
     });
     const swap = useStageFn((from, to) => {
-      const arr = getArray();
+      if (!swapValuesByPath(form, path, from, to)) return;
       [idsRef.current[from], idsRef.current[to]] = [
         idsRef.current[to],
         idsRef.current[from]
       ];
-      const newArr = [...arr];
-      [newArr[from], newArr[to]] = [newArr[to], newArr[from]];
-      setArray(newArr);
     });
     const move = useStageFn((from, to) => {
-      const arr = getArray();
+      if (!moveValueByPath(form, path, from, to)) return;
       const [id] = idsRef.current.splice(from, 1);
       idsRef.current.splice(to, 0, id);
-      const newArr = [...arr];
-      const [item] = newArr.splice(from, 1);
-      newArr.splice(to, 0, item);
-      setArray(newArr);
     });
     const replace = useStageFn((values) => {
       idsRef.current = values.map(() => generateId(form));
-      setArray([...values]);
+      replaceValuesByPath(form, path, values);
     });
     const update = useStageFn((index, value) => {
-      const arr = getArray();
-      if (index < 0 || index >= arr.length) return;
-      const newArr = [...arr];
-      newArr[index] = value;
-      setArray(newArr);
+      updateValueByPath(form, path, index, value);
     });
     return { fields, append, prepend, insert, remove, swap, move, replace, update };
   }
@@ -2309,7 +2886,10 @@
       return useFieldCore(options, Context);
     }
     function useFieldArray(options) {
-      return useFieldArrayCore(options, Context);
+      return useFieldArrayCore(
+        options,
+        Context
+      );
     }
     function useFieldArrayItem(options) {
       return useFieldArrayItemCore(options, Context);
@@ -2333,23 +2913,57 @@
 
   function useTransform(form, name, options = {}) {
     const path = usePath(name);
-    const { toDisplay, fromDisplay } = options;
+    const { toDisplay, fromDisplay, asyncDebounceMs } = options;
     const subscribeFactory = React.useCallback(
-      (invalidate) => onPathEvent(form.emitter, "change", path, "leaf", invalidate),
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- usePath memoizes the Path per key, so key pins the subscription like every path-scoped hook
+      (invalidate) => onPathEvent(
+        form.emitter,
+        "change",
+        pathFromKey(path.key),
+        "leaf",
+        invalidate
+      ),
       [form.emitter, path.key]
     );
     const raw = useWatchCore(subscribeFactory, () => getValueByPath(form, path));
     const value = toDisplay ? toDisplay(raw) : raw;
+    const timerRef = React.useRef(null);
+    const seqRef = React.useRef(0);
+    const fromDisplayRef = useStage(fromDisplay);
+    const debounceRef = useStage(asyncDebounceMs ?? 0);
+    React.useEffect(
+      () => () => {
+        if (timerRef.current !== null) clearTimeout(timerRef.current);
+      },
+      []
+    );
     const onChange = React.useCallback(
       (display) => {
-        userChangeByPath(
-          form,
-          path,
-          fromDisplay ? fromDisplay(display) : display
-        );
+        const run = () => {
+          const seq = ++seqRef.current;
+          const transform = fromDisplayRef.current;
+          const commit = (next) => userChangeByPath(form, path, next);
+          if (!transform) {
+            commit(display);
+            return;
+          }
+          const result = transform(display);
+          if (isPromise(result)) {
+            result.then((next) => {
+              if (seqRef.current === seq) commit(next);
+            });
+          } else if (seqRef.current === seq) {
+            commit(result);
+          }
+        };
+        if (timerRef.current !== null) clearTimeout(timerRef.current);
+        timerRef.current = null;
+        if (debounceRef.current > 0) {
+          timerRef.current = setTimeout(run, debounceRef.current);
+        } else {
+          run();
+        }
       },
-      [form, path, fromDisplay]
+      [form, path, fromDisplayRef, debounceRef]
     );
     return { value, onChange };
   }
@@ -2403,6 +3017,7 @@
     onInvalidSubmit,
     action,
     shouldFocusError,
+    shouldUseNativeValidation,
     ...props
   }) {
     const f2 = useForm({
@@ -2411,7 +3026,8 @@
       shouldUnregister,
       validateOnMount,
       disabled,
-      asyncAlways
+      asyncAlways,
+      shouldUseNativeValidation
     });
     const form = f1 || f2;
     React__namespace.useEffect(() => {
@@ -2422,10 +3038,12 @@
       onValidSubmit,
       onInvalidSubmit,
       shouldFocusError,
-      onAction: action ? (values2) => action(formDataFromValues(values2)) : void 0
+      shouldUseNativeValidation,
+      onAction: typeof action === "function" ? (values2) => action(formDataFromValues(values2)) : void 0
     });
     const { Provider } = context ?? FormContext;
-    return /* @__PURE__ */ React__namespace.createElement(Provider, { value: form }, /* @__PURE__ */ React__namespace.createElement("form", { ...props, noValidate: true, onSubmit: submit }));
+    const nativeAction = typeof action === "string" ? action : void 0;
+    return /* @__PURE__ */ React__namespace.createElement(Provider, { value: form }, /* @__PURE__ */ React__namespace.createElement("form", { ...props, action: nativeAction, noValidate: true, onSubmit: submit }));
   }
 
   function FormField({ children, ...options }) {
@@ -2440,18 +3058,14 @@
       ref.current = value;
     }
   }
-  function errorIdFromKey(key) {
-    const id = key.replace(/["'[\],\s]+/g, "-").replace(/^-+|-+$/g, "");
-    return id || "field";
-  }
   function ariaProps(error, fieldKey, props) {
     return {
       "aria-invalid": error ? true : props["aria-invalid"],
       "aria-describedby": error ? [props["aria-describedby"], errorIdFromKey(fieldKey)].filter(Boolean).join(" ") : props["aria-describedby"]
     };
   }
-  function fieldErrorId(name) {
-    return errorIdFromKey(create$1(name).key);
+  function toConstraintAttrs(rules) {
+    return rules ? rulesToConstraintAttrs(rules) : void 0;
   }
   const Field = React__namespace.forwardRef(
     ({
@@ -2479,6 +3093,10 @@
     }, ref) => {
       const innerRef = React__namespace.useRef(null);
       const [nativeInvalidCount, setNativeInvalidCount] = React__namespace.useState(0);
+      const contextForm = React__namespace.useContext(FormContext);
+      const resolvedForm = formProp ?? contextForm;
+      const isFile = props.type === "file";
+      const validateWrapped = validate && hasStandardProps(validate) ? schemaToFieldValidator(validate) : validate;
       const {
         value,
         onChange,
@@ -2486,7 +3104,8 @@
         error,
         name: fieldKey,
         disabled: isDisabled,
-        focusRef
+        focusRef,
+        validating
       } = useField({
         name,
         form: formProp,
@@ -2499,19 +3118,20 @@
         disabled,
         asyncAlways,
         mode,
-        // File inputs cannot be value-controlled at all — force the
-        // uncontrolled path so no `value` prop ever reaches the element.
-        uncontrolled: uncontrolled || props.type === "file",
+        // File inputs can't be value-controlled — force the uncontrolled path.
+        uncontrolled: uncontrolled || isFile,
         validate: (...params) => {
-          const el = innerRef.current;
-          if (el && typeof el.checkValidity === "function") {
-            el.setCustomValidity("");
-            if (el.checkValidity() === false) {
-              setNativeInvalidCount((count) => count + 1);
-              return void 0;
+          if (resolvedForm?.shouldUseNativeValidation !== false) {
+            const el = innerRef.current;
+            if (el && typeof el.checkValidity === "function") {
+              el.setCustomValidity("");
+              if (el.checkValidity() === false) {
+                setNativeInvalidCount((count) => count + 1);
+                return void 0;
+              }
             }
           }
-          if (validate) return validate(...params);
+          if (validateWrapped) return validateWrapped(...params);
         }
       });
       const mergedRef = React__namespace.useCallback(
@@ -2522,7 +3142,6 @@
         },
         [ref, focusRef]
       );
-      const Component = as || "input";
       React__namespace.useEffect(() => {
         const el = innerRef.current;
         if (!el || typeof el.setCustomValidity !== "function") return;
@@ -2536,11 +3155,14 @@
       React__namespace.useEffect(() => {
         if (nativeInvalidCount > 0) innerRef.current?.reportValidity();
       }, [nativeInvalidCount]);
-      const isFile = props.type === "file";
-      const toValue = eventToValue ?? (isFile ? (e) => e.target.files : valueAsNumber ? (e) => e.target.valueAsNumber : valueAsDate ? (e) => e.target.valueAsDate : (e) => e.target.value);
+      const Component = as || "input";
+      const toValue = eventToValueOrDefault(eventToValue, {
+        valueAsNumber,
+        valueAsDate
+      });
       const valueProps = valueToProps ? valueToProps(value) : isFile ? {} : uncontrolled ? { defaultValue: value } : { value };
       const errorId = errorIdFromKey(fieldKey);
-      const constraintAttrs = rules ? rulesToConstraintAttrs(rules) : void 0;
+      const constraintAttrs = toConstraintAttrs(rules);
       return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
         Component,
         {
@@ -2552,6 +3174,7 @@
           ...valueProps,
           ...ariaProps(error, fieldKey, props),
           disabled: isDisabled,
+          "aria-busy": validating || void 0,
           onChange: (e) => onChange(toValue(e)),
           ref: mergedRef
         }
@@ -2580,7 +3203,8 @@
         onBlur,
         error,
         name: fieldKey,
-        disabled: isDisabled
+        disabled: isDisabled,
+        validating
       } = useField({
         name,
         form,
@@ -2595,7 +3219,7 @@
         disabled,
         mode
       });
-      const constraintAttrs = rules ? rulesToConstraintAttrs(rules) : void 0;
+      const constraintAttrs = toConstraintAttrs(rules);
       return /* @__PURE__ */ React__namespace.createElement(
         "input",
         {
@@ -2607,6 +3231,7 @@
           checked: !!value,
           ...ariaProps(error, fieldKey, props),
           disabled: isDisabled,
+          "aria-busy": validating || void 0,
           onChange: (e) => onChange(e.target.checked),
           ref
         }
@@ -2641,7 +3266,8 @@
         onBlur,
         error,
         name: fieldKey,
-        disabled: isDisabled
+        disabled: isDisabled,
+        validating
       } = useField({
         name,
         form,
@@ -2656,7 +3282,7 @@
         disabled,
         mode
       });
-      const constraintAttrs = rules ? rulesToConstraintAttrs(rules) : void 0;
+      const constraintAttrs = toConstraintAttrs(rules);
       return /* @__PURE__ */ React__namespace.createElement(
         "select",
         {
@@ -2668,6 +3294,7 @@
           value: toSelectValue(multiple, value),
           ...ariaProps(error, fieldKey, props),
           disabled: isDisabled,
+          "aria-busy": validating || void 0,
           onChange: (e) => onChange(
             multiple ? Array.from(e.target.selectedOptions, (option) => option.value) : e.target.value
           ),
@@ -2678,9 +3305,74 @@
     }
   );
 
+  function ErrorSummary({
+    form: formProp,
+    context,
+    heading
+  }) {
+    const contextForm = React__namespace.useContext(context ?? FormContext);
+    const form = formProp ?? contextForm;
+    if (!form) throw new Error("no form provided");
+    const containerRef = React__namespace.useRef(null);
+    const wasSubmittingRef = React__namespace.useRef(false);
+    const headingId = React__namespace.useId();
+    const errors = useErrors(form);
+    const subscribeFactory = React__namespace.useCallback(
+      (invalidate) => {
+        const check = () => {
+          const wasSubmitting = wasSubmittingRef.current;
+          wasSubmittingRef.current = form.isSubmitting;
+          if (wasSubmitting && !form.isSubmitting && hasErrors(form)) {
+            containerRef.current?.focus();
+          }
+          invalidate();
+        };
+        const offErrors = on(form.emitter, "errors", check);
+        const offSubmitting = on(form.emitter, "submitting", check);
+        return () => {
+          offErrors();
+          offSubmitting();
+        };
+      },
+      [form]
+    );
+    useWatchCore(subscribeFactory, () => null);
+    const entries = Object.entries(errors);
+    if (entries.length === 0) return null;
+    return /* @__PURE__ */ React__namespace.createElement(
+      "div",
+      {
+        role: "alert",
+        tabIndex: -1,
+        ref: containerRef,
+        "aria-labelledby": headingId
+      },
+      /* @__PURE__ */ React__namespace.createElement("h2", { id: headingId }, heading ?? "There is a problem"),
+      /* @__PURE__ */ React__namespace.createElement("ul", null, entries.map(([dottedKey, list]) => {
+        const message = list[0]?.message;
+        if (dottedKey === FORM_ERROR) {
+          return /* @__PURE__ */ React__namespace.createElement("li", { key: dottedKey }, /* @__PURE__ */ React__namespace.createElement("p", null, message));
+        }
+        const path = dottedKeyToFieldPath(dottedKey);
+        return /* @__PURE__ */ React__namespace.createElement("li", { key: dottedKey }, /* @__PURE__ */ React__namespace.createElement(
+          "a",
+          {
+            href: `#${fieldErrorId(path)}`,
+            onClick: (e) => {
+              e.preventDefault();
+              setFocus(form, path);
+            }
+          },
+          message
+        ));
+      }))
+    );
+  }
+
   exports.Checkbox = Checkbox;
   exports.CheckboxGroupContext = CheckboxGroupContext;
   exports.CheckboxGroupProvider = CheckboxGroupProvider;
+  exports.ErrorSummary = ErrorSummary;
   exports.FORM_ERROR = FORM_ERROR;
   exports.Field = Field;
   exports.Form = Form;
@@ -2689,18 +3381,26 @@
   exports.FormProvider = FormProvider;
   exports.Select = Select;
   exports.VALIDATION_OUTCOME = VALIDATION_OUTCOME;
+  exports.appendValue = appendValue;
+  exports.appendValueByPath = appendValueByPath;
   exports.changeValue = changeValue;
   exports.changeValueByPath = changeValueByPath;
   exports.clearErrors = clearErrors;
+  exports.clearServerErrors = clearServerErrors;
   exports.createForm = create;
   exports.createFormContext = createFormContext;
+  exports.dottedKeyToFieldPath = dottedKeyToFieldPath;
   exports.emitChangeByPath = emitChangeByPath;
   exports.ensureValidate = ensureValidate;
   exports.fieldErrorId = fieldErrorId;
+  exports.fieldPathToDottedKey = fieldPathToDottedKey;
+  exports.firstMountedDescendantKey = firstMountedDescendantKey;
   exports.getDirtyFields = getDirtyFields;
   exports.getError = getError;
   exports.getErrorByPath = getErrorByPath;
   exports.getErrors = getErrors;
+  exports.getErrorsRecord = getErrorsRecord;
+  exports.getErrorsTree = getErrorsTree;
   exports.getFieldErrors = getFieldErrors;
   exports.getFieldErrorsByPath = getFieldErrorsByPath;
   exports.getFieldState = getFieldState;
@@ -2714,14 +3414,25 @@
   exports.hasTouched = hasTouched;
   exports.hasTouchedByPath = hasTouchedByPath;
   exports.incrementSubmitCount = incrementSubmitCount;
+  exports.insertValue = insertValue;
+  exports.insertValueByPath = insertValueByPath;
   exports.isDirty = isDirty;
   exports.isFieldDirtyByPath = isFieldDirtyByPath;
   exports.isTouched = isTouched;
+  exports.moveValue = moveValue;
+  exports.moveValueByPath = moveValueByPath;
+  exports.prependValue = prependValue;
+  exports.prependValueByPath = prependValueByPath;
+  exports.registerField = registerField;
   exports.registerFieldMode = registerFieldMode;
   exports.registerFieldValidateDeps = registerFieldValidateDeps;
   exports.registerValidatorByPath = registerValidatorByPath;
   exports.removeField = removeField;
   exports.removeFieldByPath = removeFieldByPath;
+  exports.removeValue = removeValue;
+  exports.removeValueByPath = removeValueByPath;
+  exports.replaceValues = replaceValues;
+  exports.replaceValuesByPath = replaceValuesByPath;
   exports.reset = reset;
   exports.resetField = resetField;
   exports.revalidateDependentsOnChange = revalidateDependentsOnChange;
@@ -2742,16 +3453,23 @@
   exports.setValidatingByPath = setValidatingByPath;
   exports.setValue = setValue;
   exports.setValueByPath = setValueByPath;
+  exports.shouldKick = shouldKick;
   exports.subscribe = subscribe;
+  exports.swapValues = swapValues;
+  exports.swapValuesByPath = swapValuesByPath;
   exports.trigger = trigger;
   exports.unregisterFieldMode = unregisterFieldMode;
   exports.unregisterFieldValidateDeps = unregisterFieldValidateDeps;
   exports.unsetValidatingByPath = unsetValidatingByPath;
+  exports.updateValue = updateValue;
+  exports.updateValueByPath = updateValueByPath;
   exports.useCanSubmit = useCanSubmit;
   exports.useCheckboxGroupContext = useCheckboxGroupContext;
   exports.useDirtyFields = useDirtyFields;
   exports.useError = useError;
   exports.useErrorByPath = useErrorByPath;
+  exports.useErrors = useErrors;
+  exports.useErrorsTree = useErrorsTree;
   exports.useField = useField;
   exports.useFieldArray = useFieldArray;
   exports.useFieldArrayItem = useFieldArrayItem;
@@ -2772,6 +3490,7 @@
   exports.useIsValid = useIsValid;
   exports.useIsValidating = useIsValidating;
   exports.useStatus = useStatus;
+  exports.useStore = useStore;
   exports.useSubmitCount = useSubmitCount;
   exports.useTouched = useTouched;
   exports.useTouchedByPath = useTouchedByPath;
@@ -2779,11 +3498,13 @@
   exports.useTransform = useTransform;
   exports.useValue = useValue;
   exports.useValueByPath = useValueByPath;
+  exports.useValues = useValues;
   exports.useWatch = useWatch;
   exports.useWatchCore = useWatchCore;
   exports.userBlur = userBlur;
   exports.userChangeByPath = userChangeByPath;
   exports.validate = validate;
+  exports.watch = watch;
 
 }));
 //# sourceMappingURL=index.umd.js.map