@native-form/core 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -0,0 +1,2073 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FieldNode: () => FieldNode,
+  Runtime: () => Runtime,
+  Serializer: () => Serializer,
+  arrayItemPath: () => arrayItemPath,
+  createValidationPipeline: () => createValidationPipeline,
+  createValidator: () => createValidator,
+  formPath: () => formPath,
+  getByPath: () => getByPath,
+  isArrayItemPath: () => isArrayItemPath,
+  matchArrayItemPath: () => matchArrayItemPath,
+  normalizePath: () => normalizePath,
+  parseArrayItemPath: () => parseArrayItemPath,
+  remapArrayItemIndex: () => remapArrayItemIndex,
+  setByPath: () => setByPath,
+  shiftArrayItemIndex: () => shiftArrayItemIndex,
+  splitPath: () => splitPath,
+  toNestedValues: () => toNestedValues
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Path.ts
+var BLOCKED_PROPERTIES = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+function formPath(...segments) {
+  return segments.map((segment) => String(segment).trim()).filter(Boolean).join(".");
+}
+function arrayItemPath(arrayName, index, ...segments) {
+  if (!Number.isInteger(index) || index < 0) {
+    throw new Error("arrayItemPath index must be a non-negative integer.");
+  }
+  return formPath(arrayName, index, ...segments);
+}
+function splitPath(path) {
+  if (!path) return [];
+  return path.replace(/\[/g, ".").replace(/\]/g, "").split(".").map((segment) => segment.replace(/['"]/g, "").trim()).filter(Boolean);
+}
+function normalizePath(path) {
+  return splitPath(path).join(".");
+}
+function parseArrayItemPath(path) {
+  const parts = splitPath(path);
+  for (let i = 0; i < parts.length - 1; i++) {
+    const next = parts[i + 1];
+    if (/^\d+$/.test(next)) {
+      const arrayName = parts.slice(0, i + 1).join(".");
+      const index = Number(next);
+      const subPath = parts.slice(i + 2).join(".");
+      return { arrayName, index, subPath };
+    }
+  }
+  return null;
+}
+function isArrayItemPath(path, arrayName) {
+  const parsed = parseArrayItemPath(path);
+  if (!parsed) {
+    return false;
+  }
+  if (arrayName !== void 0 && parsed.arrayName !== arrayName) {
+    return false;
+  }
+  return true;
+}
+function matchArrayItemPath(path, arrayName) {
+  const parsed = parseArrayItemPath(path);
+  if (!parsed || parsed.arrayName !== arrayName) {
+    return null;
+  }
+  return { index: parsed.index, subPath: parsed.subPath };
+}
+function shiftArrayItemIndex(path, arrayName, fromIndex, delta) {
+  const parsed = parseArrayItemPath(path);
+  if (!parsed || parsed.arrayName !== arrayName || parsed.index < fromIndex) {
+    return path;
+  }
+  const nextIndex = parsed.index + delta;
+  if (nextIndex < 0) {
+    throw new Error("shiftArrayItemIndex resulted in a negative index.");
+  }
+  return parsed.subPath ? arrayItemPath(arrayName, nextIndex, parsed.subPath) : arrayItemPath(arrayName, nextIndex);
+}
+function remapArrayItemIndex(path, arrayName, oldIndex, newIndex) {
+  if (!Number.isInteger(newIndex) || newIndex < 0) {
+    throw new Error(
+      "remapArrayItemIndex newIndex must be a non-negative integer."
+    );
+  }
+  const parsed = parseArrayItemPath(path);
+  if (!parsed || parsed.arrayName !== arrayName || parsed.index !== oldIndex) {
+    return path;
+  }
+  return parsed.subPath ? arrayItemPath(arrayName, newIndex, parsed.subPath) : arrayItemPath(arrayName, newIndex);
+}
+function getByPath(target, path, defaultValue) {
+  const parts = typeof path === "string" ? splitPath(path) : path;
+  if (parts.length === 0) {
+    return target !== void 0 ? target : defaultValue;
+  }
+  let current = target;
+  for (const part of parts) {
+    if (current === null || current === void 0) {
+      return defaultValue;
+    }
+    if (BLOCKED_PROPERTIES.has(part)) {
+      return defaultValue;
+    }
+    if (Array.isArray(current)) {
+      const index = Number(part);
+      if (!Number.isInteger(index) || index < 0) {
+        return defaultValue;
+      }
+      current = current[index];
+    } else if (typeof current === "object") {
+      current = current[part];
+    } else {
+      return defaultValue;
+    }
+  }
+  return current !== void 0 ? current : defaultValue;
+}
+function setByPath(target, path, value) {
+  const parts = typeof path === "string" ? splitPath(path) : path;
+  if (parts.length === 0) {
+    return;
+  }
+  let current = target;
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    if (BLOCKED_PROPERTIES.has(part)) {
+      return;
+    }
+    const isLast = i === parts.length - 1;
+    const nextPart = parts[i + 1];
+    const nextIsIndex = nextPart !== void 0 && /^\d+$/.test(nextPart);
+    if (Array.isArray(current)) {
+      const index = Number(part);
+      if (!Number.isInteger(index) || index < 0) {
+        return;
+      }
+      if (isLast) {
+        current[index] = value;
+        return;
+      }
+      if (current[index] === void 0 || current[index] === null) {
+        current[index] = nextIsIndex ? [] : {};
+      }
+      current = current[index];
+      continue;
+    }
+    if (typeof current === "object" && current !== null) {
+      if (isLast) {
+        current[part] = value;
+        return;
+      }
+      if (current[part] === void 0 || current[part] === null) {
+        current[part] = nextIsIndex ? [] : {};
+      }
+      current = current[part];
+      continue;
+    }
+    return;
+  }
+}
+function toNestedValues(flatValues) {
+  const nested = {};
+  for (const [path, value] of Object.entries(flatValues)) {
+    const parts = splitPath(path);
+    if (parts.length === 0) {
+      continue;
+    }
+    setByPath(nested, parts, value);
+  }
+  return nested;
+}
+
+// src/serialization/Serializer.ts
+var Serializer = class {
+  /**
+   * Native FormData serialization baseline (100% backward compatible with browser form submission).
+   */
+  serialize(form) {
+    const formData = new FormData(form);
+    const values = {};
+    for (const key of new Set(formData.keys())) {
+      const entries = formData.getAll(key);
+      values[key] = entries.length === 1 ? entries[0] : entries;
+    }
+    return values;
+  }
+  /**
+   * Field-node-driven serialization supporting type preservation, unchecked checkbox coercion,
+   * disabled filtering, and custom element serializers.
+   */
+  serializeFields(fields, options = {}) {
+    const {
+      includeDisabled = false,
+      coerceUncheckedCheckboxes = true,
+      valueMode = "typed",
+      customSerializers = {},
+      nesting = "flat"
+    } = options;
+    const values = {};
+    const groupedArrays = /* @__PURE__ */ new Map();
+    for (const node of fields) {
+      const element = node.element;
+      const name = node.name;
+      if (!name) continue;
+      if (!includeDisabled && "disabled" in element && element.disabled) continue;
+      let value;
+      const tagName = element.tagName.toLowerCase();
+      const inputType = element instanceof HTMLInputElement ? element.type : void 0;
+      const customExtractor = customSerializers[tagName] ?? (inputType ? customSerializers[inputType] : void 0);
+      if (customExtractor) {
+        value = customExtractor(element, node);
+      } else if (valueMode === "raw") {
+        if (element instanceof HTMLSelectElement && element.multiple) {
+          value = Array.from(element.selectedOptions).map((o) => o.value);
+        } else {
+          value = element.value;
+        }
+      } else {
+        value = node.value;
+      }
+      if (!customExtractor && element instanceof HTMLInputElement && element.type === "radio") {
+        if (element.checked) {
+          values[name] = valueMode === "raw" ? element.value || "on" : node.value;
+        } else if (!(name in values)) {
+          values[name] = void 0;
+        }
+        continue;
+      }
+      if (!customExtractor && element instanceof HTMLInputElement && element.type === "checkbox") {
+        const hasExplicitValue = element.hasAttribute("value") && element.getAttribute("value") !== "on";
+        if (hasExplicitValue) {
+          if (!element.checked) {
+            if (!(name in values)) {
+              values[name] = [];
+            } else if (!Array.isArray(values[name])) {
+              const arr = [values[name]];
+              groupedArrays.set(name, arr);
+              values[name] = arr;
+            }
+            continue;
+          }
+          value = element.value;
+        } else {
+          if (element.checked) {
+            value = valueMode === "raw" ? element.value || "on" : true;
+          } else {
+            if (coerceUncheckedCheckboxes) {
+              values[name] = false;
+            }
+            continue;
+          }
+        }
+      }
+      if (name in values) {
+        if (!groupedArrays.has(name)) {
+          const initial = values[name];
+          const arr = Array.isArray(initial) ? [...initial] : [initial];
+          groupedArrays.set(name, arr);
+          values[name] = arr;
+        }
+        groupedArrays.get(name).push(value);
+      } else {
+        values[name] = value;
+      }
+    }
+    if (nesting === "nested") {
+      return toNestedValues(values);
+    }
+    return values;
+  }
+};
+
+// src/field/FieldNode.ts
+var FieldNode = class {
+  constructor(element) {
+    this.element = element;
+  }
+  element;
+  dirty = false;
+  touched = false;
+  mounted = true;
+  initialValue = void 0;
+  stateValue = void 0;
+  error;
+  validating = false;
+  get name() {
+    return this.element.name;
+  }
+  get tag() {
+    return this.element.tagName.toLowerCase();
+  }
+  get type() {
+    if (this.element instanceof HTMLInputElement) {
+      return this.element.type;
+    }
+    if (this.element instanceof HTMLSelectElement) {
+      return this.element.multiple ? "select-multiple" : "select";
+    }
+    return "textarea";
+  }
+  get value() {
+    if (this.element instanceof HTMLInputElement) {
+      switch (this.element.type) {
+        case "checkbox":
+          return this.element.checked;
+        case "radio":
+          return this.element.checked ? this.element.value : void 0;
+        case "number":
+          return this.element.value === "" ? void 0 : this.element.valueAsNumber;
+        case "file":
+          return this.element.files;
+        default:
+          return this.element.value;
+      }
+    }
+    if (this.element instanceof HTMLSelectElement) {
+      return this.element.multiple ? Array.from(this.element.selectedOptions).map((o) => o.value) : this.element.value;
+    }
+    return this.element.value;
+  }
+  focus() {
+    this.element.focus();
+  }
+  blur() {
+    this.element.blur();
+  }
+  get isDirty() {
+    return this.dirty;
+  }
+  get isTouched() {
+    return this.touched;
+  }
+  get isMounted() {
+    return this.mounted;
+  }
+  get isValidating() {
+    return this.validating;
+  }
+  setValidating(validating) {
+    this.validating = validating;
+  }
+  // --- New state API (replaces FieldStateStore) ---
+  register(initialValue) {
+    this.mounted = true;
+    this.initialValue = initialValue;
+    this.stateValue = initialValue;
+    this.dirty = false;
+    this.touched = false;
+    this.error = void 0;
+    this.validating = false;
+  }
+  unregister() {
+    this.mounted = false;
+  }
+  getState() {
+    return {
+      name: this.name,
+      dirty: this.dirty,
+      touched: this.touched,
+      mounted: this.mounted,
+      initialValue: this.initialValue,
+      value: this.stateValue,
+      error: this.error,
+      validating: this.validating
+    };
+  }
+  updateValue(value) {
+    const next = value === void 0 ? this.value : value;
+    this.stateValue = next;
+    this.dirty = !isEqualValue(this.initialValue, next);
+  }
+  markTouched() {
+    this.touched = true;
+  }
+  setError(message) {
+    this.error = message;
+  }
+  reset(value) {
+    this.initialValue = value;
+    this.stateValue = value;
+    this.dirty = false;
+    this.touched = false;
+    this.error = void 0;
+    this.validating = false;
+  }
+  // --- Lifecycle helpers ---
+  // Called when the browser emits input on the control
+  handleInput(value) {
+    this.updateValue(value);
+  }
+  // Called when the browser emits change on the control
+  handleChange(value) {
+    this.updateValue(value);
+  }
+  // Called when the control is blurred
+  handleBlur() {
+    this.markTouched();
+  }
+  // Called when the form is reset
+  handleReset(value) {
+    const initial = value ?? this.initialValue ?? this.value;
+    this.reset(initial);
+    this.setError(void 0);
+  }
+  // Called when the form is submitted (mark touched)
+  handleSubmit() {
+    this.markTouched();
+  }
+};
+function isEqualValue(left, right) {
+  if (Array.isArray(left) || Array.isArray(right)) {
+    if (!Array.isArray(left) || !Array.isArray(right)) {
+      return false;
+    }
+    if (left.length !== right.length) {
+      return false;
+    }
+    return left.every((value, index) => value === right[index]);
+  }
+  return left === right;
+}
+
+// src/discovery/Discovery.ts
+var Discovery = class {
+  discover(form, registry) {
+    const seen = /* @__PURE__ */ new Set();
+    for (const control of Array.from(form.elements)) {
+      if (control instanceof HTMLInputElement || control instanceof HTMLSelectElement || control instanceof HTMLTextAreaElement) {
+        if (!control.name) {
+          continue;
+        }
+        const name = control.name;
+        seen.add(name);
+        if (registry.has(name)) {
+          const existing = registry.get(name);
+          if (existing.element === control) {
+            continue;
+          }
+          if (control instanceof HTMLInputElement && control.type === "radio" && existing.element instanceof HTMLInputElement && existing.element.type === "radio") {
+            if (control.checked && !existing.element.checked) {
+              registry.unregister(name);
+              registry.register(new FieldNode(control));
+            }
+            continue;
+          }
+          if (control instanceof HTMLInputElement && control.type === "checkbox" && existing.element instanceof HTMLInputElement && existing.element.type === "checkbox" && existing.element.form === form) {
+            continue;
+          }
+          registry.unregister(name);
+          registry.register(new FieldNode(control));
+          continue;
+        }
+        registry.register(new FieldNode(control));
+      }
+    }
+    for (const [key, field] of registry.entries()) {
+      if (!seen.has(key) || field.element.name !== key) {
+        registry.unregister(key);
+      }
+    }
+  }
+};
+
+// src/errors/FieldErrorRenderer.ts
+var FieldErrorRenderer = class _FieldErrorRenderer {
+  static nextErrorId = 0;
+  errorIds = /* @__PURE__ */ new WeakMap();
+  errorElements = /* @__PURE__ */ new WeakMap();
+  applyErrors(fields, errors) {
+    for (const field of fields) {
+      this.applyFieldError(field, errors[field.name]);
+    }
+  }
+  normalizeFields(fields) {
+    for (const field of fields) {
+      this.normalizeField(field);
+    }
+  }
+  applyFieldError(field, message) {
+    const element = field.element;
+    try {
+      element.setCustomValidity(message ?? "");
+    } catch (_e) {
+    }
+    if (!message) {
+      this.removeErrorElements(this.findExistingErrorElements(element));
+      this.errorElements.delete(element);
+      return;
+    }
+    let errorElement = this.getPrimaryErrorElement(element);
+    if (!errorElement) {
+      errorElement = this.createErrorElement(field);
+      element.insertAdjacentElement("afterend", errorElement);
+    }
+    errorElement.textContent = message;
+    this.errorElements.set(element, errorElement);
+  }
+  normalizeField(field) {
+    const element = field.element;
+    const existing = this.findExistingErrorElements(element);
+    if (existing.length === 0) {
+      this.errorElements.delete(element);
+      return;
+    }
+    const keep = existing[0];
+    this.removeErrorElements(existing.slice(1));
+    this.decorateErrorElement(field, keep);
+    this.errorElements.set(element, keep);
+  }
+  getPrimaryErrorElement(element) {
+    const stored = this.errorElements.get(element);
+    if (stored?.isConnected) {
+      const existing2 = this.findExistingErrorElements(element);
+      if (existing2.length > 1) {
+        this.removeErrorElements(existing2.slice(1));
+      }
+      return existing2[0] ?? stored;
+    }
+    const existing = this.findExistingErrorElements(element);
+    if (existing.length === 0) {
+      return void 0;
+    }
+    const keep = existing[0];
+    this.removeErrorElements(existing.slice(1));
+    this.errorElements.set(element, keep);
+    return keep;
+  }
+  findExistingErrorElements(element) {
+    const results = [];
+    let node = element.nextElementSibling;
+    while (node) {
+      if (node instanceof HTMLElement) {
+        const id = node.id ?? "";
+        const aria = node.getAttribute("aria-live");
+        const isRuntimeLabel = node.dataset.nativeFormError === "true" || id.startsWith("native-form-error-") || aria === "polite";
+        if (isRuntimeLabel) {
+          results.push(node);
+          node = node.nextElementSibling;
+          continue;
+        }
+      }
+      break;
+    }
+    return results;
+  }
+  removeErrorElements(elements) {
+    for (const element of elements) {
+      element.remove();
+    }
+  }
+  createErrorElement(field) {
+    const error = document.createElement("div");
+    this.decorateErrorElement(field, error);
+    error.style.color = "red";
+    error.style.fontSize = "0.875rem";
+    error.style.marginTop = "0.25rem";
+    return error;
+  }
+  decorateErrorElement(field, element) {
+    element.id = this.getOrCreateErrorId(field.element);
+    element.dataset.nativeFormError = "true";
+    element.setAttribute("data-for", field.name);
+    element.setAttribute("aria-live", "polite");
+  }
+  getOrCreateErrorId(element) {
+    const existing = this.errorIds.get(element);
+    if (existing) {
+      return existing;
+    }
+    const created = `native-form-error-${_FieldErrorRenderer.nextErrorId++}`;
+    this.errorIds.set(element, created);
+    return created;
+  }
+};
+
+// src/field/FieldRegistry.ts
+var FieldRegistry = class {
+  fields = /* @__PURE__ */ new Map();
+  // Optional change callback used by Runtime to observe mount/unmount events.
+  onChange;
+  register(field) {
+    this.fields.set(field.name, field);
+    this.onChange?.({ type: "mount", field });
+  }
+  unregister(name) {
+    const field = this.fields.get(name);
+    if (field) {
+      field.unregister();
+      this.onChange?.({ type: "unmount", field });
+    }
+    this.fields.delete(name);
+  }
+  get(name) {
+    return this.fields.get(name);
+  }
+  has(name) {
+    return this.fields.has(name);
+  }
+  values() {
+    return [...this.fields.values()];
+  }
+  keys() {
+    return Array.from(this.fields.keys());
+  }
+  entries() {
+    return Array.from(this.fields.entries());
+  }
+  clear() {
+    for (const field of this.fields.values()) {
+      field.unregister();
+      this.onChange?.({ type: "unmount", field });
+    }
+    this.fields.clear();
+  }
+  get size() {
+    return this.fields.size;
+  }
+  getAll() {
+    return Array.from(this.fields.values());
+  }
+};
+
+// src/runtime/RuntimeMutationPolicy.ts
+var runtimeMutationObserverOptions = {
+  childList: true,
+  subtree: true,
+  attributes: true,
+  attributeFilter: ["name", "disabled"]
+};
+function isRuntimeMutationRelevant(mutation) {
+  if (mutation.type === "attributes") {
+    return isNativeFormControl(mutation.target);
+  }
+  if (mutation.type === "childList") {
+    const nodes = [...mutation.addedNodes, ...mutation.removedNodes];
+    return nodes.some((node) => {
+      if (isErrorLabel(node)) {
+        return false;
+      }
+      return isNativeFormControl(node) || containsNativeFormControl(node);
+    });
+  }
+  return false;
+}
+function isNativeFormControl(node) {
+  return node instanceof HTMLInputElement || node instanceof HTMLSelectElement || node instanceof HTMLTextAreaElement;
+}
+function containsNativeFormControl(node) {
+  return node instanceof HTMLElement && Boolean(node.querySelector("input[name], select[name], textarea[name]"));
+}
+function isErrorLabel(node) {
+  return node instanceof HTMLElement && node.dataset.nativeFormError === "true";
+}
+
+// src/validation/Validation.ts
+function createValidator(schema) {
+  if ("~standard" in schema) {
+    return {
+      async validate(values) {
+        const result = await schema["~standard"].validate(values);
+        if (result.issues) {
+          return {
+            success: false,
+            issues: result.issues.map((issue) => ({
+              name: schemaIssuePathToName(issue.path),
+              message: issue.message
+            }))
+          };
+        }
+        return {
+          success: true,
+          values: result.value
+        };
+      }
+    };
+  }
+  return schema;
+}
+function schemaIssuePathToName(path) {
+  if (!path || path.length === 0) {
+    return "";
+  }
+  return path.map(
+    (segment) => typeof segment === "object" && segment !== null ? segment.key : segment
+  ).map(String).join(".");
+}
+
+// src/validation/ValidationPipeline.ts
+function createValidationPipeline(options = {}) {
+  const schemaOrValidator = options.schema ?? options.validator;
+  const validator = schemaOrValidator ? createValidator(schemaOrValidator) : void 0;
+  return {
+    capabilities: {
+      supportsFieldScopedValidation: !validator
+    },
+    async validate(values, context) {
+      if (!validator) {
+        const nativeIssues = getNativeValidationIssues(context.fields);
+        if (nativeIssues.length > 0) {
+          return {
+            success: false,
+            issues: nativeIssues
+          };
+        }
+        return {
+          success: true,
+          values
+        };
+      }
+      return validator.validate(values, context);
+    },
+    async validateField(field, values, context) {
+      if (!validator) {
+        const issue = getNativeValidationIssue(field);
+        if (issue) {
+          return {
+            success: false,
+            issues: [issue]
+          };
+        }
+        return {
+          success: true,
+          values
+        };
+      }
+      return validator.validate(values, context);
+    }
+  };
+}
+function getNativeValidationIssue(field) {
+  const validationMessage = field.validationMessage;
+  if (!validationMessage) {
+    return void 0;
+  }
+  return {
+    name: field.name,
+    message: validationMessage
+  };
+}
+function getNativeValidationIssues(fields) {
+  const issues = [];
+  for (const field of fields) {
+    const validationMessage = field.validationMessage;
+    if (validationMessage) {
+      issues.push({
+        name: field.name,
+        message: validationMessage
+      });
+    }
+  }
+  return issues;
+}
+
+// src/runtime/Runtime.ts
+var Runtime = class {
+  constructor(options = {}) {
+    this.options = options;
+    this.pipeline = options.pipeline ?? createValidationPipeline({
+      schema: options.schema,
+      validator: options.validator
+    });
+    this.registry.onChange = (e) => {
+      if (e.type === "mount") {
+        this.emitFieldEvent({ type: "field:mount", field: e.field.name });
+      } else {
+        this.emitFieldEvent({ type: "field:unmount", field: e.field.name });
+      }
+    };
+  }
+  options;
+  registry = new FieldRegistry();
+  discovery = new Discovery();
+  serializer = new Serializer();
+  fieldErrorRenderer = new FieldErrorRenderer();
+  form;
+  listeners = /* @__PURE__ */ new Set();
+  // Field state is now managed on each FieldNode instance.
+  observer;
+  validationController;
+  debounceTimers = /* @__PURE__ */ new Map();
+  fieldValidationControllers = /* @__PURE__ */ new Map();
+  submitting = false;
+  validating = false;
+  errors = {};
+  preservedValuesStore = /* @__PURE__ */ Object.create(null);
+  isSyncingFields = false;
+  pipeline;
+  mount(form) {
+    this.form = form;
+    this.syncFields();
+    this.fieldErrorRenderer.normalizeFields(this.registry.values());
+    const values = this.extractCurrentValues();
+    for (const field of this.registry.getAll()) {
+      field.register(values[field.name]);
+    }
+    form.addEventListener("submit", this.handleSubmit);
+    form.addEventListener("input", this.handleFieldUpdate);
+    form.addEventListener("change", this.handleFieldUpdate);
+    form.addEventListener("blur", this.handleFieldBlur, true);
+    form.addEventListener("reset", this.handleReset);
+    this.observer = new MutationObserver(this.handleMutation);
+    this.observer.observe(form, runtimeMutationObserverOptions);
+    this.emitFormEvent({
+      type: "form:mount"
+    });
+  }
+  unmount() {
+    this.clearDebounceTimers();
+    this.abortAllValidations();
+    if (this.form) {
+      this.form.removeEventListener("submit", this.handleSubmit);
+      this.form.removeEventListener("input", this.handleFieldUpdate);
+      this.form.removeEventListener("change", this.handleFieldUpdate);
+      this.form.removeEventListener("blur", this.handleFieldBlur, true);
+      this.form.removeEventListener("reset", this.handleReset);
+    }
+    this.observer?.disconnect();
+    this.observer = void 0;
+    this.fieldErrorRenderer.applyErrors(this.registry.values(), {});
+    this.registry.clear();
+    this.form = void 0;
+    this.errors = {};
+    this.preservedValuesStore = /* @__PURE__ */ Object.create(null);
+    this.submitting = false;
+    this.validating = false;
+    this.emitFormEvent({
+      type: "form:unmount"
+    });
+    this.listeners.clear();
+  }
+  clearDebounceTimers() {
+    for (const timer of this.debounceTimers.values()) {
+      clearTimeout(timer);
+    }
+    this.debounceTimers.clear();
+  }
+  abortAllValidations() {
+    this.validationController?.abort();
+    this.validationController = void 0;
+    for (const controller of this.fieldValidationControllers.values()) {
+      controller.abort();
+    }
+    this.fieldValidationControllers.clear();
+    for (const field of this.registry.values()) {
+      field.setValidating(false);
+    }
+  }
+  getAsyncValidator(name) {
+    if (!this.options.asyncValidators) {
+      return void 0;
+    }
+    if (this.options.asyncValidators[name]) {
+      return this.options.asyncValidators[name];
+    }
+    const normalized = normalizePath(name);
+    if (this.options.asyncValidators[normalized]) {
+      return this.options.asyncValidators[normalized];
+    }
+    for (const [key, validator] of Object.entries(this.options.asyncValidators)) {
+      if (normalizePath(key) === normalized) {
+        return validator;
+      }
+    }
+    return void 0;
+  }
+  serialize() {
+    if (!this.form) {
+      if (this.options.preserveUnmountedValues) {
+        return { ...this.preservedValuesStore };
+      }
+      throw new Error("Runtime is not mounted.");
+    }
+    if (this.options.preserveUnmountedValues) {
+      if (!this.isSyncingFields) {
+        this.syncFields();
+      }
+      const live = this.serializer.serialize(this.form);
+      return {
+        ...this.preservedValuesStore,
+        ...live
+      };
+    }
+    return this.serializer.serialize(this.form);
+  }
+  serializeFields(options) {
+    if (this.options.preserveUnmountedValues && this.form && !this.isSyncingFields) {
+      this.syncFields();
+    }
+    const effectiveOptions = {
+      ...this.options.serializeFieldsOptions,
+      ...options
+    };
+    const nesting = effectiveOptions.nesting ?? this.options.nesting ?? "flat";
+    let nodes = this.registry.values();
+    if (this.form) {
+      const nodeList = [];
+      const nodeMap = new Map(this.registry.values().map((n) => [n.element, n]));
+      for (const control of Array.from(this.form.elements)) {
+        if ((control instanceof HTMLInputElement || control instanceof HTMLSelectElement || control instanceof HTMLTextAreaElement) && control.name) {
+          nodeList.push(nodeMap.get(control) ?? new FieldNode(control));
+        }
+      }
+      nodes = nodeList;
+    }
+    if (this.options.preserveUnmountedValues) {
+      const live = this.serializer.serializeFields(nodes, {
+        ...effectiveOptions,
+        nesting: "flat"
+      });
+      const merged = {
+        ...this.preservedValuesStore,
+        ...live
+      };
+      if (nesting === "nested") {
+        return toNestedValues(merged);
+      }
+      return merged;
+    }
+    return this.serializer.serializeFields(nodes, options);
+  }
+  get fields() {
+    return this.getFieldStates();
+  }
+  get serializationMode() {
+    return this.options.serializationMode ?? "native";
+  }
+  get preservedValues() {
+    if (this.options.preserveUnmountedValues && this.form && !this.isSyncingFields) {
+      this.syncFields();
+    }
+    return Object.assign(/* @__PURE__ */ Object.create(null), this.preservedValuesStore);
+  }
+  extractCurrentValues() {
+    if (!this.form) {
+      if (this.options.preserveUnmountedValues) {
+        let res = { ...this.preservedValuesStore };
+        if (this.options.nesting === "nested") {
+          res = toNestedValues(res);
+        }
+        return res;
+      }
+      return {};
+    }
+    const serializeOpts = {
+      ...this.options.serializeFieldsOptions,
+      ...this.options.nesting ? { nesting: this.options.nesting } : {}
+    };
+    let values;
+    if (this.serializationMode === "typed") {
+      values = this.serializeFields(serializeOpts);
+    } else {
+      values = this.serialize();
+      if (this.options.nesting === "nested") {
+        values = toNestedValues(values);
+      }
+    }
+    return values;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.unsubscribe(listener);
+    };
+  }
+  unsubscribe(listener) {
+    this.listeners.delete(listener);
+  }
+  notify(event) {
+    for (const listener of this.listeners) {
+      listener(event);
+    }
+  }
+  emitFieldEvent(event) {
+    this.notify(event);
+  }
+  emitValidationEvent(event) {
+    this.notify(event);
+  }
+  emitFormEvent(event) {
+    this.notify(event);
+  }
+  submit(event) {
+    return this.processSubmitFlow(event);
+  }
+  async validate() {
+    const validation = await this.runValidation(this.extractCurrentValues());
+    return validation.result;
+  }
+  async validateFields(fieldNames) {
+    if (!this.form) {
+      throw new Error("Runtime is not mounted.");
+    }
+    this.clearDebounceTimers();
+    this.abortAllValidations();
+    for (const name of fieldNames) {
+      delete this.errors[name];
+      const normalized = normalizePath(name);
+      if (this.errors[normalized]) {
+        delete this.errors[normalized];
+      }
+      const node = this.registry.get(name);
+      node?.setError(void 0);
+    }
+    this.applyNativeErrors();
+    const values = this.extractCurrentValues();
+    const normalizedTargetNames = new Set(fieldNames.map(normalizePath));
+    const controller = new AbortController();
+    this.validationController = controller;
+    this.validating = true;
+    this.emitValidationEvent({
+      type: "validation:start",
+      values
+    });
+    const context = {
+      form: this.form,
+      signal: controller.signal,
+      fields: this.getValidationFields()
+    };
+    const result = await this.pipeline.validate(values, context);
+    if (this.validationController === controller) {
+      this.validating = false;
+    }
+    if (controller.signal.aborted) {
+      return {
+        success: false,
+        issues: []
+      };
+    }
+    const filteredIssues = [];
+    if (!result.success && result.issues) {
+      for (const issue of result.issues) {
+        if (normalizedTargetNames.has(normalizePath(issue.name))) {
+          filteredIssues.push(issue);
+        }
+      }
+    }
+    for (const name of fieldNames) {
+      const issue = filteredIssues.find(
+        (iss) => normalizePath(iss.name) === normalizePath(name)
+      );
+      if (issue) {
+        this.errors[name] = issue.message;
+        const node = this.registry.get(name);
+        node?.setError(issue.message);
+      } else {
+        delete this.errors[name];
+        const normalized = normalizePath(name);
+        if (this.errors[normalized]) {
+          delete this.errors[normalized];
+        }
+        const node = this.registry.get(name);
+        node?.setError(void 0);
+      }
+    }
+    this.applyNativeErrors();
+    if (this.options.asyncValidators) {
+      const asyncPromises = [];
+      const flat = this.serializationMode === "typed" ? this.serialize() : values;
+      for (const name of fieldNames) {
+        const issue = filteredIssues.find(
+          (iss) => normalizePath(iss.name) === normalizePath(name)
+        );
+        if (issue) continue;
+        const asyncValidator = this.getAsyncValidator(name);
+        if (!asyncValidator) continue;
+        const node = this.registry.get(name);
+        node?.setValidating(true);
+        const rawValue = values[name] ?? flat[name];
+        asyncPromises.push(
+          (async () => {
+            try {
+              const err = await asyncValidator(rawValue, {
+                form: this.form,
+                signal: controller.signal
+              });
+              if (err) {
+                filteredIssues.push({ name, message: err });
+                this.errors[name] = err;
+                node?.setError(err);
+              }
+            } catch (error) {
+              const msg = error instanceof Error ? error.message : String(error);
+              filteredIssues.push({ name, message: msg });
+              this.errors[name] = msg;
+              node?.setError(msg);
+            } finally {
+              node?.setValidating(false);
+            }
+          })()
+        );
+      }
+      if (asyncPromises.length > 0) {
+        await Promise.all(asyncPromises);
+        this.applyNativeErrors();
+      }
+    }
+    this.emitValidationEvent({
+      type: "validation:end",
+      errors: { ...this.errors },
+      values
+    });
+    if (filteredIssues.length > 0) {
+      return {
+        success: false,
+        issues: filteredIssues
+      };
+    }
+    return {
+      success: true,
+      values
+    };
+  }
+  handleSubmit = (event) => {
+    event.preventDefault();
+    void this.processSubmitFlow(event);
+  };
+  async processSubmitFlow(event) {
+    if (!this.form) {
+      throw new Error("Runtime is not mounted.");
+    }
+    this.clearDebounceTimers();
+    this.abortAllValidations();
+    const values = this.extractCurrentValues();
+    for (const field of this.registry.values()) {
+      field.handleSubmit();
+      this.emitFieldEvent({
+        type: "field:submit",
+        field: field.name
+      });
+    }
+    const validation = await this.runValidation(values);
+    const isStaleValidation = this.validationController !== void 0 && validation.signal !== this.validationController.signal;
+    if (validation.aborted || isStaleValidation) {
+      return validation.result;
+    }
+    if (!validation.result.success) {
+      this.options.onInvalid?.(this.errors, values, event);
+      this.emitFormEvent({
+        type: "form:invalid",
+        errors: this.errors,
+        values
+      });
+      return validation.result;
+    }
+    if (this.options.asyncValidators && Object.keys(this.options.asyncValidators).length > 0) {
+      const asyncIssues = [];
+      const flat = this.serializationMode === "typed" ? this.serialize() : values;
+      const promises = [];
+      for (const [name, validator] of Object.entries(
+        this.options.asyncValidators
+      )) {
+        const rawValue = values[name] ?? flat[name];
+        const fieldNode = this.registry.get(name);
+        if (fieldNode) {
+          fieldNode.setValidating(true);
+        }
+        promises.push(
+          (async () => {
+            try {
+              const err = await validator(rawValue, {
+                form: this.form,
+                signal: validation.signal
+              });
+              if (err) {
+                asyncIssues.push({ name, message: err });
+              }
+            } catch (error) {
+              const msg = error instanceof Error ? error.message : String(error);
+              asyncIssues.push({ name, message: msg });
+            } finally {
+              fieldNode?.setValidating(false);
+            }
+          })()
+        );
+      }
+      await Promise.all(promises);
+      if (asyncIssues.length > 0) {
+        for (const issue of asyncIssues) {
+          this.errors[issue.name] = issue.message;
+          const node = this.registry.get(issue.name);
+          node?.setError(issue.message);
+        }
+        this.applyNativeErrors();
+        this.options.onInvalid?.(this.errors, values, event);
+        this.emitFormEvent({
+          type: "form:invalid",
+          errors: this.errors,
+          values
+        });
+        return {
+          success: false,
+          issues: asyncIssues
+        };
+      }
+    }
+    this.submitting = true;
+    this.emitFormEvent({
+      type: "form:submit",
+      values: validation.result.values
+    });
+    try {
+      await this.options.onSubmit?.(validation.result.values, event);
+    } finally {
+      this.submitting = false;
+    }
+    return validation.result;
+  }
+  async runValidation(values) {
+    if (!this.form) {
+      throw new Error("Runtime is not mounted.");
+    }
+    this.validationController?.abort();
+    const controller = new AbortController();
+    this.validationController = controller;
+    this.validating = true;
+    this.emitValidationEvent({
+      type: "validation:start",
+      values
+    });
+    this.errors = {};
+    for (const field of this.registry.values()) {
+      field.setError(this.errors[field.name]);
+    }
+    this.applyNativeErrors();
+    const result = await this.pipeline.validate(values, {
+      form: this.form,
+      signal: controller.signal,
+      fields: this.getValidationFields()
+    });
+    if (!controller.signal.aborted) {
+      this.applyValidationResult(result, values);
+      if (this.validationController === controller) {
+        this.validating = false;
+      }
+    }
+    return {
+      result,
+      signal: controller.signal,
+      aborted: controller.signal.aborted
+    };
+  }
+  handleFieldUpdate = (event) => {
+    const element = toNativeFormElement(event.target);
+    if (!element?.name || !this.form) return;
+    if (event.type === "input") {
+      this.processInputFlow(element);
+      return;
+    }
+    if (event.type === "change") {
+      this.processChangeFlow(element);
+      return;
+    }
+    this.processUpdateFlow(element);
+  };
+  processInputFlow(element) {
+    const snapshot = this.prepareFieldFlow(element);
+    if (!snapshot) {
+      return;
+    }
+    const { node, values, value } = snapshot;
+    node.handleInput(value);
+    const mode = this.options.mode ?? "onChange";
+    const shouldValidate = mode === "onChange" || mode === "all" || mode === "onTouched" && node.isTouched;
+    if (shouldValidate) {
+      this.triggerFieldValidation(node, values);
+    }
+    this.emitFieldEvent({
+      type: "field:input",
+      field: element.name,
+      value,
+      values
+    });
+    this.emitFieldEvent({
+      type: "field:update",
+      field: element.name,
+      value,
+      values
+    });
+  }
+  processChangeFlow(element) {
+    const snapshot = this.prepareFieldFlow(element);
+    if (!snapshot) {
+      return;
+    }
+    const { node, values, value } = snapshot;
+    node.handleChange(value);
+    const mode = this.options.mode ?? "onChange";
+    const shouldValidate = mode === "onChange" || mode === "all" || mode === "onTouched" && node.isTouched;
+    if (shouldValidate) {
+      this.triggerFieldValidation(node, values);
+    }
+    this.emitFieldEvent({
+      type: "field:change",
+      field: element.name,
+      value,
+      values
+    });
+    this.emitFieldEvent({
+      type: "field:update",
+      field: element.name,
+      value,
+      values
+    });
+  }
+  processUpdateFlow(element) {
+    const snapshot = this.prepareFieldFlow(element);
+    if (!snapshot) {
+      return;
+    }
+    const { node, values, value } = snapshot;
+    node.updateValue(value);
+    if (this.options.preserveUnmountedValues) {
+      if (element.name !== "__proto__" && element.name !== "constructor" && element.name !== "prototype") {
+        if (value !== void 0) {
+          this.preservedValuesStore[element.name] = value;
+        } else {
+          delete this.preservedValuesStore[element.name];
+        }
+      }
+    }
+    const mode = this.options.mode ?? "onChange";
+    const shouldValidate = mode === "onChange" || mode === "all" || mode === "onTouched" && node.isTouched;
+    if (shouldValidate) {
+      this.triggerFieldValidation(node, values);
+    }
+    this.emitFieldEvent({
+      type: "field:update",
+      field: element.name,
+      value,
+      values
+    });
+  }
+  prepareFieldFlow(element) {
+    this.ensureField(element);
+    const values = this.extractCurrentValues();
+    const value = values[element.name];
+    const node = this.registry.get(element.name);
+    if (!node) {
+      return void 0;
+    }
+    return { node, values, value };
+  }
+  triggerFieldValidation(node, values, immediate = false) {
+    const debounceMs = this.options.debounceMs ?? 0;
+    if (!immediate && debounceMs > 0) {
+      const existing = this.debounceTimers.get(node.name);
+      if (existing) {
+        clearTimeout(existing);
+      }
+      const timer = setTimeout(() => {
+        this.debounceTimers.delete(node.name);
+        void this.executeFieldValidation(node, values);
+      }, debounceMs);
+      this.debounceTimers.set(node.name, timer);
+    } else {
+      const existing = this.debounceTimers.get(node.name);
+      if (existing) {
+        clearTimeout(existing);
+        this.debounceTimers.delete(node.name);
+      }
+      void this.executeFieldValidation(node, values);
+    }
+  }
+  async executeFieldValidation(node, values) {
+    const fieldName = node.name;
+    const previousController = this.fieldValidationControllers.get(fieldName);
+    if (previousController) {
+      previousController.abort();
+      this.fieldValidationControllers.delete(fieldName);
+    }
+    const fieldController = new AbortController();
+    this.fieldValidationControllers.set(fieldName, fieldController);
+    try {
+      const validation = await this.runFieldValidation(node, values);
+      const isStaleValidation = this.validationController !== void 0 && validation.signal !== this.validationController.signal;
+      if (validation.aborted || fieldController.signal.aborted || isStaleValidation) {
+        return;
+      }
+      if (!validation.result.success) {
+        this.options.onInvalid?.(this.errors, values);
+        return;
+      }
+      const asyncValidator = this.getAsyncValidator(fieldName);
+      if (asyncValidator && !fieldController.signal.aborted) {
+        node.setValidating(true);
+        this.emitFieldEvent({
+          type: "field:update",
+          field: fieldName,
+          value: values[fieldName],
+          values
+        });
+        try {
+          const context = {
+            form: this.form,
+            signal: fieldController.signal
+          };
+          const rawValue = values[fieldName];
+          const asyncError = await asyncValidator(rawValue, context);
+          if (!fieldController.signal.aborted) {
+            if (asyncError) {
+              this.errors[fieldName] = asyncError;
+              node.setError(asyncError);
+              this.options.onInvalid?.(this.errors, values);
+            } else if (this.errors[fieldName]) {
+              delete this.errors[fieldName];
+              node.setError(void 0);
+            }
+            this.applyNativeErrors();
+          }
+        } catch (error) {
+          if (!fieldController.signal.aborted) {
+            const message = error instanceof Error ? error.message : String(error);
+            this.errors[fieldName] = message;
+            node.setError(message);
+            this.applyNativeErrors();
+            this.options.onInvalid?.(this.errors, values);
+          }
+        } finally {
+          if (!fieldController.signal.aborted) {
+            node.setValidating(false);
+            this.emitValidationEvent({
+              type: "validation:end",
+              errors: { ...this.errors },
+              values
+            });
+            this.emitFieldEvent({
+              type: "field:update",
+              field: fieldName,
+              value: values[fieldName],
+              values
+            });
+          }
+        }
+      }
+    } finally {
+      if (this.fieldValidationControllers.get(fieldName) === fieldController) {
+        this.fieldValidationControllers.delete(fieldName);
+      }
+    }
+  }
+  handleFieldBlur = (event) => {
+    const element = toNativeFormElement(event.target);
+    if (!element?.name || !this.form) return;
+    this.ensureField(element);
+    const values = this.extractCurrentValues();
+    const value = values[element.name];
+    const node = this.registry.get(element.name);
+    node?.handleBlur();
+    const mode = this.options.mode ?? "onChange";
+    const hasPendingDebounce = this.debounceTimers.has(element.name);
+    const shouldValidate = mode === "onBlur" || mode === "onTouched" || mode === "all" || hasPendingDebounce;
+    if (shouldValidate && node) {
+      this.triggerFieldValidation(node, values, true);
+    }
+    this.emitFieldEvent({
+      type: "field:blur",
+      field: element.name,
+      value,
+      values
+    });
+  };
+  async runFieldValidation(field, values) {
+    if (!this.form) {
+      throw new Error("Runtime is not mounted.");
+    }
+    this.validationController?.abort();
+    const controller = new AbortController();
+    this.validationController = controller;
+    this.validating = true;
+    this.emitValidationEvent({
+      type: "validation:start",
+      values
+    });
+    const context = {
+      form: this.form,
+      signal: controller.signal,
+      fields: this.getValidationFields()
+    };
+    const activeFieldMeta = this.toValidationField(field);
+    const supportsFieldScopedValidation = this.pipeline.capabilities?.supportsFieldScopedValidation ?? true;
+    const result = supportsFieldScopedValidation ? await this.pipeline.validateField(activeFieldMeta, values, context) : await this.pipeline.validate(values, context);
+    if (!controller.signal.aborted) {
+      this.applyFieldValidationResult(field, result, values);
+      if (this.validationController === controller) {
+        this.validating = false;
+      }
+    }
+    return {
+      result,
+      signal: controller.signal,
+      aborted: controller.signal.aborted
+    };
+  }
+  handleReset = () => {
+    this.clearDebounceTimers();
+    this.abortAllValidations();
+    queueMicrotask(() => {
+      if (!this.form) return;
+      const values = this.extractCurrentValues();
+      this.processResetFlow(values);
+    });
+  };
+  processResetFlow(values) {
+    for (const field of this.registry.values()) {
+      field.handleReset(values[field.name]);
+      this.emitFieldEvent({
+        type: "field:reset",
+        field: field.name,
+        value: values[field.name],
+        values
+      });
+    }
+    this.errors = {};
+    this.preservedValuesStore = /* @__PURE__ */ Object.create(null);
+    this.applyNativeErrors();
+    this.emitFormEvent({
+      type: "form:reset",
+      values
+    });
+  }
+  getFieldState(name) {
+    let node = this.registry.get(name);
+    if (!node) {
+      const normalized = normalizePath(name);
+      for (const field of this.registry.values()) {
+        if (normalizePath(field.name) === normalized) {
+          node = field;
+          break;
+        }
+      }
+    }
+    return node?.getState();
+  }
+  getFieldStates() {
+    return this.registry.values().map((f) => f.getState());
+  }
+  setOptions(options) {
+    Object.assign(this.options, options);
+    if (options.schema !== void 0 || options.validator !== void 0 || options.pipeline !== void 0) {
+      this.pipeline = options.pipeline ?? createValidationPipeline({
+        schema: options.schema,
+        validator: options.validator
+      });
+    }
+  }
+  removeArrayItem(arrayName, index) {
+    const nextErrors = {};
+    let changed = false;
+    for (const [path, error] of Object.entries(this.errors)) {
+      const match = matchArrayItemPath(path, arrayName);
+      if (!match) {
+        nextErrors[path] = error;
+        continue;
+      }
+      if (match.index === index) {
+        changed = true;
+        continue;
+      }
+      if (match.index > index) {
+        const shiftedPath = shiftArrayItemIndex(path, arrayName, index + 1, -1);
+        nextErrors[shiftedPath] = error;
+        changed = true;
+      } else {
+        nextErrors[path] = error;
+      }
+    }
+    if (changed) {
+      this.errors = nextErrors;
+      this.fieldErrorRenderer.applyErrors(this.registry.values(), this.errors);
+      this.emitValidationEvent({
+        type: "validation:end",
+        errors: { ...this.errors },
+        values: this.extractCurrentValues()
+      });
+    }
+    if (this.options.preserveUnmountedValues) {
+      const nextPreserved = {};
+      let pChanged = false;
+      for (const [path, val] of Object.entries(this.preservedValuesStore)) {
+        const match = matchArrayItemPath(path, arrayName);
+        if (!match) {
+          nextPreserved[path] = val;
+          continue;
+        }
+        if (match.index === index) {
+          pChanged = true;
+          continue;
+        }
+        if (match.index > index) {
+          const shiftedPath = shiftArrayItemIndex(path, arrayName, index + 1, -1);
+          nextPreserved[shiftedPath] = val;
+          pChanged = true;
+        } else {
+          nextPreserved[path] = val;
+        }
+      }
+      if (pChanged) {
+        this.preservedValuesStore = nextPreserved;
+      }
+    }
+  }
+  swapArrayItems(arrayName, indexA, indexB) {
+    if (indexA === indexB) return;
+    const nextErrors = {};
+    let changed = false;
+    for (const [path, error] of Object.entries(this.errors)) {
+      const match = matchArrayItemPath(path, arrayName);
+      if (!match) {
+        nextErrors[path] = error;
+        continue;
+      }
+      if (match.index === indexA) {
+        const newPath = remapArrayItemIndex(path, arrayName, indexA, indexB);
+        nextErrors[newPath] = error;
+        changed = true;
+      } else if (match.index === indexB) {
+        const newPath = remapArrayItemIndex(path, arrayName, indexB, indexA);
+        nextErrors[newPath] = error;
+        changed = true;
+      } else {
+        nextErrors[path] = error;
+      }
+    }
+    if (changed) {
+      this.errors = nextErrors;
+      this.fieldErrorRenderer.applyErrors(this.registry.values(), this.errors);
+      this.emitValidationEvent({
+        type: "validation:end",
+        errors: { ...this.errors },
+        values: this.extractCurrentValues()
+      });
+    }
+    if (this.options.preserveUnmountedValues) {
+      const nextPreserved = {};
+      let pChanged = false;
+      for (const [path, val] of Object.entries(this.preservedValuesStore)) {
+        const match = matchArrayItemPath(path, arrayName);
+        if (!match) {
+          nextPreserved[path] = val;
+          continue;
+        }
+        if (match.index === indexA) {
+          const newPath = remapArrayItemIndex(path, arrayName, indexA, indexB);
+          nextPreserved[newPath] = val;
+          pChanged = true;
+        } else if (match.index === indexB) {
+          const newPath = remapArrayItemIndex(path, arrayName, indexB, indexA);
+          nextPreserved[newPath] = val;
+          pChanged = true;
+        } else {
+          nextPreserved[path] = val;
+        }
+      }
+      if (pChanged) {
+        this.preservedValuesStore = nextPreserved;
+      }
+    }
+  }
+  moveArrayItem(arrayName, fromIndex, toIndex) {
+    if (fromIndex === toIndex) return;
+    const nextErrors = {};
+    let changed = false;
+    for (const [path, error] of Object.entries(this.errors)) {
+      const match = matchArrayItemPath(path, arrayName);
+      if (!match) {
+        nextErrors[path] = error;
+        continue;
+      }
+      const idx = match.index;
+      if (idx === fromIndex) {
+        const newPath = remapArrayItemIndex(path, arrayName, fromIndex, toIndex);
+        nextErrors[newPath] = error;
+        changed = true;
+      } else if (fromIndex < toIndex && idx > fromIndex && idx <= toIndex) {
+        const newPath = remapArrayItemIndex(path, arrayName, idx, idx - 1);
+        nextErrors[newPath] = error;
+        changed = true;
+      } else if (fromIndex > toIndex && idx >= toIndex && idx < fromIndex) {
+        const newPath = remapArrayItemIndex(path, arrayName, idx, idx + 1);
+        nextErrors[newPath] = error;
+        changed = true;
+      } else {
+        nextErrors[path] = error;
+      }
+    }
+    if (changed) {
+      this.errors = nextErrors;
+      this.fieldErrorRenderer.applyErrors(this.registry.values(), this.errors);
+      this.emitValidationEvent({
+        type: "validation:end",
+        errors: { ...this.errors },
+        values: this.extractCurrentValues()
+      });
+    }
+    if (this.options.preserveUnmountedValues) {
+      const nextPreserved = {};
+      let pChanged = false;
+      for (const [path, val] of Object.entries(this.preservedValuesStore)) {
+        const match = matchArrayItemPath(path, arrayName);
+        if (!match) {
+          nextPreserved[path] = val;
+          continue;
+        }
+        const idx = match.index;
+        if (idx === fromIndex) {
+          const newPath = remapArrayItemIndex(path, arrayName, fromIndex, toIndex);
+          nextPreserved[newPath] = val;
+          pChanged = true;
+        } else if (fromIndex < toIndex && idx > fromIndex && idx <= toIndex) {
+          const newPath = remapArrayItemIndex(path, arrayName, idx, idx - 1);
+          nextPreserved[newPath] = val;
+          pChanged = true;
+        } else if (fromIndex > toIndex && idx >= toIndex && idx < fromIndex) {
+          const newPath = remapArrayItemIndex(path, arrayName, idx, idx + 1);
+          nextPreserved[newPath] = val;
+          pChanged = true;
+        } else {
+          nextPreserved[path] = val;
+        }
+      }
+      if (pChanged) {
+        this.preservedValuesStore = nextPreserved;
+      }
+    }
+  }
+  insertArrayItem(arrayName, index) {
+    const nextErrors = {};
+    let changed = false;
+    for (const [path, error] of Object.entries(this.errors)) {
+      const match = matchArrayItemPath(path, arrayName);
+      if (!match) {
+        nextErrors[path] = error;
+        continue;
+      }
+      if (match.index >= index) {
+        const shiftedPath = shiftArrayItemIndex(path, arrayName, index, 1);
+        nextErrors[shiftedPath] = error;
+        changed = true;
+      } else {
+        nextErrors[path] = error;
+      }
+    }
+    if (changed) {
+      this.errors = nextErrors;
+      this.fieldErrorRenderer.applyErrors(this.registry.values(), this.errors);
+      this.emitValidationEvent({
+        type: "validation:end",
+        errors: { ...this.errors },
+        values: this.extractCurrentValues()
+      });
+    }
+    if (this.options.preserveUnmountedValues) {
+      const nextPreserved = {};
+      let pChanged = false;
+      for (const [path, val] of Object.entries(this.preservedValuesStore)) {
+        const match = matchArrayItemPath(path, arrayName);
+        if (!match) {
+          nextPreserved[path] = val;
+          continue;
+        }
+        if (match.index >= index) {
+          const shiftedPath = shiftArrayItemIndex(path, arrayName, index, 1);
+          nextPreserved[shiftedPath] = val;
+          pChanged = true;
+        } else {
+          nextPreserved[path] = val;
+        }
+      }
+      if (pChanged) {
+        this.preservedValuesStore = nextPreserved;
+      }
+    }
+  }
+  getFormState() {
+    const fields = this.getFieldStates();
+    return {
+      dirty: fields.some((field) => field.dirty),
+      touched: fields.some((field) => field.touched),
+      valid: Object.keys(this.errors).length === 0,
+      submitting: this.submitting,
+      validating: this.validating || fields.some((field) => field.validating),
+      errors: { ...this.errors },
+      fields,
+      values: this.extractCurrentValues()
+    };
+  }
+  ensureField(element) {
+    if (this.registry.has(element.name)) {
+      return;
+    }
+    this.registry.register(new FieldNode(element));
+    const node = this.registry.get(element.name);
+    node.register(this.getFieldValue(element.name));
+  }
+  getFieldValue(name) {
+    if (!this.form) {
+      if (this.options.preserveUnmountedValues) {
+        return this.preservedValuesStore[name];
+      }
+      return void 0;
+    }
+    if (this.options.preserveUnmountedValues && !this.isSyncingFields) {
+      this.syncFields();
+    }
+    let node = this.registry.get(name);
+    if (!node) {
+      const control = this.form.elements.namedItem(name);
+      if (control instanceof HTMLInputElement || control instanceof HTMLSelectElement || control instanceof HTMLTextAreaElement) {
+        this.ensureField(control);
+        node = this.registry.get(name);
+      }
+    }
+    if (!node) {
+      const normalizedTarget = normalizePath(name);
+      for (const field of this.registry.values()) {
+        if (normalizePath(field.name) === normalizedTarget) {
+          node = field;
+          break;
+        }
+      }
+    }
+    if (!node) {
+      if (this.options.preserveUnmountedValues) {
+        if (name in this.preservedValuesStore) {
+          return this.preservedValuesStore[name];
+        }
+        const normalizedTarget = normalizePath(name);
+        for (const [key, val] of Object.entries(this.preservedValuesStore)) {
+          if (normalizePath(key) === normalizedTarget) {
+            return val;
+          }
+        }
+      }
+      if (this.options.nesting === "nested") {
+        const nested = this.extractCurrentValues();
+        const resolved = getByPath(nested, name);
+        if (resolved !== void 0) {
+          return resolved;
+        }
+      }
+      return void 0;
+    }
+    if (node.element instanceof HTMLInputElement && node.element.type === "radio") {
+      const item = this.form.elements.namedItem(name);
+      if (item) {
+        if ("value" in item && typeof item.value === "string" && item.value !== "") {
+          return item.value;
+        }
+        if ("length" in item) {
+          for (const el of Array.from(item)) {
+            if (el instanceof HTMLInputElement && el.checked) {
+              return el.value;
+            }
+          }
+        }
+      }
+      return node.element.checked ? node.element.value : void 0;
+    }
+    if (node.element instanceof HTMLInputElement && node.element.type === "checkbox") {
+      const item = this.form.elements.namedItem(name);
+      if (item && ("length" in item || item instanceof RadioNodeList) && item.length > 1) {
+        const checkedValues = [];
+        for (const el of Array.from(item)) {
+          if (el instanceof HTMLInputElement && el.checked) {
+            checkedValues.push(el.value || "on");
+          }
+        }
+        return checkedValues;
+      }
+      return node.element.checked;
+    }
+    return node.value ?? void 0;
+  }
+  getValidationFields() {
+    return this.registry.values().map((field) => this.toValidationField(field));
+  }
+  toValidationField(field) {
+    return {
+      name: field.name,
+      validationMessage: field.element.validationMessage
+    };
+  }
+  syncFields() {
+    if (!this.form || this.isSyncingFields) {
+      return;
+    }
+    this.isSyncingFields = true;
+    try {
+      const previousFields = this.registry.values();
+      const previousFieldMap = new Map(
+        previousFields.map((field) => [field.name, field])
+      );
+      const activeControlNames = /* @__PURE__ */ new Set();
+      for (const control of Array.from(this.form.elements)) {
+        if ((control instanceof HTMLInputElement || control instanceof HTMLSelectElement || control instanceof HTMLTextAreaElement) && control.name) {
+          activeControlNames.add(control.name);
+        }
+      }
+      for (const field of previousFields) {
+        if (!activeControlNames.has(field.name)) {
+          if (this.options.preserveUnmountedValues) {
+            const val = field.value;
+            if (field.name !== "__proto__" && field.name !== "constructor" && field.name !== "prototype") {
+              if (val !== void 0) {
+                this.preservedValuesStore[field.name] = val;
+              } else {
+                delete this.preservedValuesStore[field.name];
+              }
+            }
+          }
+          this.fieldErrorRenderer.applyErrors([field], {});
+          delete this.errors[field.name];
+        }
+      }
+      this.discovery.discover(this.form, this.registry);
+      const values = this.extractCurrentValues();
+      for (const field of this.registry.values()) {
+        if (!previousFieldMap.has(field.name) || previousFieldMap.get(field.name) !== field) {
+          field.register(values[field.name]);
+        }
+      }
+    } finally {
+      this.isSyncingFields = false;
+    }
+  }
+  handleMutation = (mutations) => {
+    if (!mutations.some(isRuntimeMutationRelevant)) {
+      return;
+    }
+    this.syncFields();
+  };
+  applyFieldValidationResult(targetField, result, values) {
+    const issueMap = result.success ? {} : issuesToErrors(result.issues);
+    const targetName = targetField.name;
+    const targetIssue = resolveFieldError(issueMap, targetName);
+    if (targetIssue) {
+      this.errors[targetName] = targetIssue;
+      targetField.setError(targetIssue);
+    } else {
+      delete this.errors[targetName];
+      const normalizedTarget = normalizePath(targetName);
+      if (this.errors[normalizedTarget]) {
+        delete this.errors[normalizedTarget];
+      }
+      targetField.setError(void 0);
+    }
+    for (const otherField of this.registry.values()) {
+      if (otherField === targetField) continue;
+      const name = otherField.name;
+      const hadError = Boolean(resolveFieldError(this.errors, name));
+      const isTouched = otherField.isTouched;
+      if (hadError || isTouched) {
+        const issue = resolveFieldError(issueMap, name);
+        if (issue) {
+          this.errors[name] = issue;
+          otherField.setError(issue);
+        } else {
+          delete this.errors[name];
+          const normalizedOther = normalizePath(name);
+          if (this.errors[normalizedOther]) {
+            delete this.errors[normalizedOther];
+          }
+          otherField.setError(void 0);
+        }
+      }
+    }
+    this.fieldErrorRenderer.normalizeFields(this.registry.values());
+    this.applyNativeErrors();
+    this.emitValidationEvent({
+      type: "validation:end",
+      errors: { ...this.errors },
+      values
+    });
+  }
+  applyValidationResult(result, values) {
+    this.fieldErrorRenderer.normalizeFields(this.registry.values());
+    this.errors = result.success ? {} : issuesToErrors(result.issues);
+    for (const field of this.registry.values()) {
+      const error = resolveFieldError(this.errors, field.name);
+      if (error && this.errors[field.name] === void 0) {
+        this.errors[field.name] = error;
+      }
+      field.setError(error);
+    }
+    this.applyNativeErrors();
+    this.emitValidationEvent({
+      type: "validation:end",
+      errors: this.errors,
+      values
+    });
+  }
+  applyNativeErrors() {
+    const observer = this.observer;
+    if (observer) {
+      observer.disconnect();
+    }
+    this.fieldErrorRenderer.applyErrors(this.registry.values(), this.errors);
+    if (observer && this.form) {
+      observer.observe(this.form, runtimeMutationObserverOptions);
+    }
+  }
+};
+function issuesToErrors(issues) {
+  const errors = {};
+  for (const issue of issues) {
+    errors[issue.name] ??= issue.message;
+  }
+  return errors;
+}
+function resolveFieldError(errors, name) {
+  if (errors[name] !== void 0) {
+    return errors[name];
+  }
+  const normalized = normalizePath(name);
+  if (errors[normalized] !== void 0) {
+    return errors[normalized];
+  }
+  for (const [key, msg] of Object.entries(errors)) {
+    if (normalizePath(key) === normalized) {
+      return msg;
+    }
+  }
+  return void 0;
+}
+function toNativeFormElement(target) {
+  if (target instanceof HTMLInputElement || target instanceof HTMLSelectElement || target instanceof HTMLTextAreaElement) {
+    return target;
+  }
+  return null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FieldNode,
+  Runtime,
+  Serializer,
+  arrayItemPath,
+  createValidationPipeline,
+  createValidator,
+  formPath,
+  getByPath,
+  isArrayItemPath,
+  matchArrayItemPath,
+  normalizePath,
+  parseArrayItemPath,
+  remapArrayItemIndex,
+  setByPath,
+  shiftArrayItemIndex,
+  splitPath,
+  toNestedValues
+});