@samline/forms 1.0.2 → 2.0.0

package/dist/index.js

@@ -1,17 +1,964 @@
-import {
-  form
-} from "./chunk-KKQD25KI.js";
-import {
-  createFormController
-} from "./chunk-KIJEFIHP.js";
-import {
-  createEmptyFormState,
-  parseFormData,
-  validateFieldValue,
-  validateValues
-} from "./chunk-4NEGCRY2.js";
+// src/api/append.ts
+var createAppend = (state2, helpers) => ({ tag, content, class: className, atStart = false }) => {
+  if (!state2.element) return null;
+  helpers.clearFieldCache();
+  if (className) {
+    const classSelector = className.trim().split(/\s+/)[0];
+    const existing = classSelector ? state2.element.querySelector(`.${classSelector}`) : null;
+    existing?.remove();
+  }
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  node.innerHTML = content;
+  if (atStart && state2.element.firstChild) {
+    state2.element.insertBefore(node, state2.element.firstChild);
+  } else {
+    state2.element.appendChild(node);
+  }
+  return node;
+};
+
+// src/api/auto-submit.ts
+var createAutoSubmit = (state2, helpers) => (next = true) => {
+  state2.autoSubmitEnabled = next !== false;
+  state2.autoSubmitDebounce = typeof next === "object" && next ? next.debounce ?? 0 : 0;
+  helpers.notifySubscribers();
+  return state2.api;
+};
+
+// src/api/clear-errors.ts
+var createClearErrors = (state2, helpers) => (fields) => {
+  if (!fields) {
+    state2.manualErrors = {};
+    helpers.syncVisualState();
+    helpers.notifySubscribers();
+    return state2.api;
+  }
+  for (const field of fields) {
+    delete state2.manualErrors[field];
+  }
+  helpers.syncVisualState(fields);
+  helpers.notifySubscribers();
+  return state2.api;
+};
+
+// src/core/format-helpers.ts
+var FORMATTER_RAW_ATTRIBUTE = "data-formatter-raw-for";
+var cssEscape = (value) => {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return CSS.escape(value);
+  }
+  return value.replace(/([!"#$%&'()*+,./:;<=>?@\[\\\]^`{|}~])/g, "\\$1");
+};
+var findRawMirror = (form2, fieldName) => {
+  const byAttr = form2.querySelector(
+    `[${FORMATTER_RAW_ATTRIBUTE}="${cssEscape(fieldName)}"]`
+  );
+  if (byAttr) return byAttr;
+  const byName = form2.querySelector(
+    `[name="${cssEscape(`${fieldName}_raw`)}"]`
+  );
+  if (byName) return byName;
+  return null;
+};
+var ensureRawMirror = (form2, fieldName) => {
+  const existing = findRawMirror(form2, fieldName);
+  if (existing) return existing;
+  const input = document.createElement("input");
+  input.type = "hidden";
+  input.name = `${fieldName}Raw`;
+  input.setAttribute("aria-hidden", "true");
+  input.tabIndex = -1;
+  input.setAttribute(FORMATTER_RAW_ATTRIBUTE, fieldName);
+  form2.appendChild(input);
+  return input;
+};
+var applyFormattedValue = (visible, mirror, formatted, raw) => {
+  const rawInput = visible.value;
+  const caret = clamp(
+    visible.selectionStart ?? rawInput.length,
+    0,
+    rawInput.length
+  );
+  if (rawInput === formatted) {
+    if (mirror && mirror.value !== raw) mirror.value = raw;
+    return caret;
+  }
+  visible.value = formatted;
+  if (mirror) mirror.value = raw;
+  const newCaret = computeCursorPosition(caret, rawInput, formatted);
+  restoreCursor(visible, newCaret);
+  return newCaret;
+};
+var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+var computeCursorPosition = (caretPos, rawInput, newValue) => {
+  if (newValue.length === 0) return 0;
+  if (caretPos >= rawInput.length) return newValue.length;
+  const targetNonFormat = countNonFormat(rawInput.slice(0, caretPos));
+  if (targetNonFormat === 0) {
+    let i = 0;
+    while (i < newValue.length && isFormatChar(newValue[i])) i += 1;
+    return i;
+  }
+  let seen = 0;
+  for (let i = 0; i < newValue.length; i += 1) {
+    if (!isFormatChar(newValue[i])) {
+      seen += 1;
+      if (seen === targetNonFormat) {
+        return Math.min(i + 1, newValue.length);
+      }
+    }
+  }
+  return newValue.length;
+};
+var countNonFormat = (value) => {
+  let count = 0;
+  for (const char of value) {
+    if (!isFormatChar(char)) count += 1;
+  }
+  return count;
+};
+var isFormatChar = (char) => {
+  if (!char) return false;
+  if (char >= "0" && char <= "9") return false;
+  if (char >= "a" && char <= "z" || char >= "A" && char <= "Z") return false;
+  return true;
+};
+var restoreCursor = (field, position) => {
+  const max = field.value.length;
+  const safe = clamp(position, 0, max);
+  const apply = () => {
+    try {
+      field.setSelectionRange(safe, safe);
+    } catch {
+    }
+  };
+  if (typeof navigator !== "undefined" && /Android/i.test(navigator.userAgent)) {
+    if (typeof requestAnimationFrame === "function") {
+      requestAnimationFrame(apply);
+    } else {
+      setTimeout(apply, 1);
+    }
+    return;
+  }
+  apply();
+};
+
+// src/core/formatter-loader.ts
+var state = null;
+var MISSING_MESSAGE = "[samline/forms] The `format()` and `formatAll()` methods require the @samline/formatter package. Install it with: npm i @samline/formatter (or pnpm/bun/yarn equivalent).";
+var warned = false;
+var warnOnce = () => {
+  if (warned) return;
+  warned = true;
+  console.error(MISSING_MESSAGE);
+};
+var loadFormatter = () => {
+  if (state && state.status === "resolved") {
+    if (!state.module) warnOnce();
+    return Promise.resolve(state.module);
+  }
+  if (state && state.status === "pending") {
+    return state.promise;
+  }
+  const promise = (async () => {
+    try {
+      const mod = await import(
+        /* @vite-ignore */
+        "@samline/formatter"
+      );
+      state = { status: "resolved", module: mod };
+      return mod;
+    } catch {
+      warnOnce();
+      state = { status: "resolved", module: null };
+      return null;
+    }
+  })();
+  state = { status: "pending", promise };
+  return promise;
+};
+
+// src/api/format.ts
+var registry = /* @__PURE__ */ new WeakMap();
+var getRegistry = (state2) => {
+  let bucket = registry.get(state2);
+  if (!bucket) {
+    bucket = /* @__PURE__ */ new Map();
+    registry.set(state2, bucket);
+  }
+  return bucket;
+};
+var resolveFieldNames = (config) => Array.isArray(config.field) ? config.field : [config.field];
+var addListener = (state2, target, type, handler) => {
+  target.addEventListener(type, handler);
+  state2.listeners.push({ element: target, type, handler });
+};
+var buildHandler = (field, mirror, formatFn, formatType, formatOptions, mirrorFieldName) => {
+  const handler = (event) => {
+    if (!field.isConnected) return;
+    const rawInput = event.target.value;
+    const { formatted, raw } = formatFn(rawInput, formatType, formatOptions);
+    if (!formatted && !raw) {
+      field.value = "";
+      if (mirror && mirror.value !== "") mirror.value = "";
+      return;
+    }
+    applyFormattedValue(field, mirror, formatted, raw);
+    void mirrorFieldName;
+  };
+  return handler;
+};
+var applyFormat = async (state2, helpers, config) => {
+  if (!state2.element || !state2.api) return;
+  const formatter = await loadFormatter();
+  if (!formatter) return;
+  const formatType = config.type;
+  const formatOptions = config.options;
+  const fieldNames = resolveFieldNames(config);
+  const bucket = getRegistry(state2);
+  for (const fieldName of fieldNames) {
+    const fields = helpers.getFieldsByName(fieldName);
+    if (fields.length === 0) continue;
+    const writable = fields.filter(
+      (f) => f instanceof HTMLInputElement && f.type !== "checkbox" && f.type !== "radio" && f.type !== "file" && f.type !== "submit" && f.type !== "button" || f instanceof HTMLTextAreaElement
+    );
+    if (writable.length === 0) continue;
+    for (const field of writable) {
+      const existing = bucket.get(fieldName);
+      const mirrorName = config.rawField ?? `${fieldName}Raw`;
+      let mirror = findRawMirror(state2.element, mirrorName) ?? null;
+      const mirrorIsOwned = !mirror;
+      if (!mirror) mirror = ensureRawMirror(state2.element, fieldName);
+      if (mirror && mirror.name !== mirrorName) mirror.name = mirrorName;
+      const trackerMirrorName = mirror?.name ?? mirrorName;
+      if (existing) {
+        existing.mirrorName = trackerMirrorName;
+        existing.mirrorIsOwned = mirrorIsOwned;
+        state2.formattedFields.set(fieldName, {
+          config,
+          mirrorName: trackerMirrorName,
+          mirrorIsOwned
+        });
+        continue;
+      }
+      const handler = buildHandler(
+        field,
+        mirror,
+        formatter.format,
+        formatType,
+        formatOptions,
+        trackerMirrorName
+      );
+      addListener(state2, state2.element, "input", handler);
+      bucket.set(fieldName, {
+        fields: /* @__PURE__ */ new Set([field]),
+        mirrorName: trackerMirrorName,
+        handler,
+        mirrorIsOwned
+      });
+      state2.formattedFields.set(fieldName, {
+        config,
+        mirrorName: trackerMirrorName,
+        mirrorIsOwned
+      });
+      const initial = field.value;
+      if (initial !== "") {
+        const { formatted, raw } = formatter.format(initial, formatType, formatOptions);
+        applyFormattedValue(field, mirror, formatted, raw);
+      } else if (mirror && mirror.value !== "") {
+        mirror.value = "";
+      }
+    }
+  }
+};
+var createFormat = (state2, helpers) => (config) => {
+  if (state2.isDestroyed) return state2.api;
+  if (!state2.element) return state2.api;
+  void applyFormat(state2, helpers, config);
+  return state2.api;
+};
+var createFormatAll = createFormat;
+var cleanupFormatRegistry = (state2) => {
+  if (!state2.element) {
+    registry.delete(state2);
+    return;
+  }
+  const bucket = registry.get(state2);
+  if (!bucket) {
+    state2.element.querySelectorAll(`[${FORMATTER_RAW_ATTRIBUTE}]`).forEach((node) => node.remove());
+    return;
+  }
+  for (const [fieldName, entry] of bucket) {
+    state2.element.removeEventListener("input", entry.handler);
+    if (entry.mirrorIsOwned) {
+      const mirror = findRawMirror(state2.element, entry.mirrorName);
+      mirror?.remove();
+    }
+    bucket.delete(fieldName);
+    state2.formattedFields.delete(fieldName);
+  }
+  state2.element.querySelectorAll(`[${FORMATTER_RAW_ATTRIBUTE}]`).forEach((node) => node.remove());
+};
+
+// src/api/destroy.ts
+var createDestroy = (state2, _helpers) => () => {
+  if (state2.isDestroyed) return;
+  state2.isDestroyed = true;
+  for (const listener of state2.listeners) {
+    listener.element.removeEventListener(listener.type, listener.handler);
+  }
+  state2.listeners.length = 0;
+  if (state2.autoSubmitTimer) {
+    clearTimeout(state2.autoSubmitTimer);
+    state2.autoSubmitTimer = null;
+  }
+  state2.mutationObserver?.disconnect();
+  state2.mutationObserver = null;
+  state2.watchedFields.clear();
+  state2.subscribers.clear();
+  state2.submitHandlers.clear();
+  state2.fieldCache.clear();
+  state2.manualErrors = {};
+  state2.validationErrors = {};
+  cleanupFormatRegistry(state2);
+};
+
+// src/api/disable-auto-submit.ts
+var createDisableAutoSubmit = (state2, helpers) => () => {
+  state2.autoSubmitEnabled = false;
+  if (state2.autoSubmitTimer) {
+    clearTimeout(state2.autoSubmitTimer);
+    state2.autoSubmitTimer = null;
+  }
+  helpers.notifySubscribers();
+  return state2.api;
+};
+
+// src/core/serialize.ts
+var isEmptyFile = (value) => value instanceof File && value.size === 0 && value.name === "";
+var appendValue = (data, key, value) => {
+  const current = data[key];
+  if (current === void 0) {
+    data[key] = value;
+    return;
+  }
+  if (Array.isArray(current)) {
+    current.push(value);
+    return;
+  }
+  data[key] = [current, value];
+};
+var parseFormData = (formElement) => {
+  const raw = new FormData(formElement);
+  const formData = new FormData();
+  const data = {};
+  raw.forEach((value, key) => {
+    if (isEmptyFile(value)) return;
+    formData.append(key, value);
+    appendValue(data, key, value);
+  });
+  return { data, formData };
+};
+
+// src/api/get-data.ts
+var createGetData = (_state, _helpers) => () => {
+  if (!_state.element) return { data: {}, formData: new FormData() };
+  return parseFormData(_state.element);
+};
+
+// src/api/get-field.ts
+var createGetField = (state2, helpers) => (name) => {
+  const fields = helpers.getFieldsByName(name);
+  if (fields.length === 0) return null;
+  return fields.length === 1 ? fields[0] : fields;
+};
+
+// src/core/state.ts
+var createEmptyFormState = () => ({
+  values: {},
+  errors: {},
+  filledFields: [],
+  isValid: true,
+  isValidated: false,
+  autoSubmit: false,
+  submitCount: 0
+});
+var cloneErrors = (errors) => Object.fromEntries(
+  Object.entries(errors).map(([field, messages]) => [field, [...messages]])
+);
+var mergeErrors = (left, right) => {
+  const merged = { ...left };
+  for (const [field, messages] of Object.entries(right)) {
+    merged[field] = merged[field] ? [...merged[field], ...messages] : [...messages];
+  }
+  return merged;
+};
+
+// src/api/get-state.ts
+var createGetState = (state2, helpers) => () => {
+  const values = helpers.getValues();
+  const errors = cloneErrors(helpers.getMergedErrors());
+  const filledFields = helpers.getTrackedFieldNames().filter((name) => {
+    const value = values[name];
+    if (Array.isArray(value)) return value.length > 0;
+    if (typeof value === "string") return value.trim().length > 0;
+    return value !== void 0;
+  });
+  return {
+    ...createEmptyFormState(),
+    values,
+    errors,
+    filledFields,
+    isValid: Object.keys(errors).length === 0,
+    isValidated: state2.isValidated,
+    autoSubmit: state2.autoSubmitEnabled,
+    submitCount: state2.submitCount
+  };
+};
+
+// src/core/dom.ts
+var isFormFieldElement = (value) => value instanceof HTMLInputElement || value instanceof HTMLSelectElement || value instanceof HTMLTextAreaElement;
+var resolveFormElement = (target) => {
+  if (!target) return null;
+  if (target instanceof HTMLFormElement) return target;
+  if (typeof target === "string") {
+    const node = document.getElementById(target);
+    return node instanceof HTMLFormElement ? node : null;
+  }
+  if ("current" in target) {
+    return target.current instanceof HTMLFormElement ? target.current : null;
+  }
+  return null;
+};
+var getNamedFields = (form2) => Array.from(form2.querySelectorAll("input[name], select[name], textarea[name]")).filter(
+  isFormFieldElement
+);
+var queryNamedFields = (form2, name) => getNamedFields(form2).filter((field) => field.name === name);
+var isFieldElement = (value) => isFormFieldElement(value);
+var isFieldFilled = (field) => {
+  if (field instanceof HTMLInputElement) {
+    if (field.type === "checkbox" || field.type === "radio") return field.checked;
+    if (field.type === "file") return Boolean(field.files && field.files.length > 0);
+    return field.value.trim() !== "";
+  }
+  return field.value !== "";
+};
+var applyBooleanAttribute = (field, attribute, enabled) => {
+  if (enabled) {
+    field.setAttribute(attribute, "");
+  } else {
+    field.removeAttribute(attribute);
+  }
+};
+var readFieldValue = (fields) => {
+  if (fields.length === 0) return void 0;
+  const first = fields[0];
+  if (!first) return void 0;
+  if (first instanceof HTMLSelectElement || first instanceof HTMLTextAreaElement) {
+    return first.value;
+  }
+  if (first instanceof HTMLInputElement) {
+    if (first.type === "radio") {
+      const checked = fields.find(
+        (f) => f instanceof HTMLInputElement && f.checked
+      );
+      return checked?.value ?? "";
+    }
+    if (first.type === "checkbox") {
+      const values = fields.filter(
+        (f) => f instanceof HTMLInputElement && f.checked
+      ).map((f) => f.value);
+      return values.length > 1 ? values : values[0] ?? "";
+    }
+    if (first.type === "file") {
+      return first.files ? Array.from(first.files) : [];
+    }
+  }
+  return first.value;
+};
+var writeFieldValue = (fields, value) => {
+  const normalizedArray = Array.isArray(value) ? value.map((item) => String(item)) : null;
+  const normalizedValue = value === void 0 || value === null ? "" : String(value);
+  for (const field of fields) {
+    if (field instanceof HTMLInputElement) {
+      if (field.type === "checkbox") {
+        field.checked = normalizedArray ? normalizedArray.includes(field.value) : normalizedValue === field.value;
+        continue;
+      }
+      if (field.type === "radio") {
+        field.checked = field.value === normalizedValue;
+        continue;
+      }
+      if (field.type === "file") {
+        if (Array.isArray(value) && value.length === 0) field.value = "";
+        continue;
+      }
+      field.value = normalizedValue;
+      continue;
+    }
+    field.value = normalizedValue;
+  }
+};
+var clearAttributes = (form2, attributes) => {
+  for (const attribute of attributes) {
+    form2.querySelectorAll(`[${attribute}]`).forEach((node) => node.removeAttribute(attribute));
+  }
+};
+var submitForm = (form2) => {
+  if (typeof form2.requestSubmit === "function") {
+    form2.requestSubmit();
+    return;
+  }
+  const submitButton = form2.querySelector(
+    'button[type="submit"], input[type="submit"]'
+  );
+  if (submitButton) {
+    submitButton.click();
+    return;
+  }
+  form2.submit();
+};
+
+// src/api/get-value.ts
+var createGetValue = (state2, helpers) => (name) => readFieldValue(helpers.getFieldsByName(name));
+
+// src/api/observe.ts
+var createObserve = (state2, helpers) => (field, callback) => {
+  const callbacks = state2.watchedFields.get(field) ?? /* @__PURE__ */ new Set();
+  callbacks.add(callback);
+  state2.watchedFields.set(field, callbacks);
+  if (state2.element) {
+    callback(state2.api.getValue(field), state2.api.getField(field), state2.element, state2.api.getState());
+  }
+  return () => {
+    const current = state2.watchedFields.get(field);
+    current?.delete(callback);
+    if (current && current.size === 0) {
+      state2.watchedFields.delete(field);
+    }
+  };
+};
+
+// src/api/on-submit.ts
+var createOnSubmit = (state2, _helpers) => (callback, preventDefault = true) => {
+  state2.submitHandlers.add({ callback, preventDefault });
+  return state2.api;
+};
+
+// src/api/prefill.ts
+var createPrefill = (state2, _helpers) => (fieldName) => {
+  if (!state2.element) return state2.api;
+  const params = new URLSearchParams(window.location.search);
+  params.forEach((value, key) => {
+    if (fieldName && fieldName !== key) return;
+    state2.api.setValue(key, value);
+  });
+  return state2.api;
+};
+
+// src/api/reset.ts
+var createReset = (state2, helpers) => () => {
+  if (!state2.element) return state2.api;
+  state2.element.reset();
+  state2.manualErrors = {};
+  state2.validationErrors = {};
+  clearAttributes(state2.element, [state2.attributes.error, state2.attributes.filled]);
+  if (state2.isValidated) helpers.syncVisualState();
+  helpers.notifySubscribers();
+  return state2.api;
+};
+
+// src/api/validate.ts
+var createValidate = (state2, helpers) => (fields) => {
+  state2.isValidated = true;
+  helpers.syncVisualState(fields);
+  return helpers.validateNames(fields);
+};
+
+// src/api/revalidate.ts
+var createRevalidate = createValidate;
+
+// src/api/set-errors.ts
+var createSetErrors = (state2, helpers) => (fields) => {
+  if (Array.isArray(fields)) {
+    state2.manualErrors = {
+      ...state2.manualErrors,
+      ...Object.fromEntries(fields.map((field) => [field, ["Invalid value."]]))
+    };
+  } else {
+    state2.manualErrors = {
+      ...state2.manualErrors,
+      ...cloneErrors(fields)
+    };
+  }
+  helpers.syncVisualState(Array.isArray(fields) ? fields : Object.keys(fields));
+  helpers.notifySubscribers();
+  return state2.api;
+};
+
+// src/api/set-value.ts
+var createSetValue = (state2, helpers) => (name, value) => {
+  const fields = helpers.getFieldsByName(name);
+  if (fields.length === 0) return state2.api;
+  writeFieldValue(fields, value);
+  const firstField = fields[0];
+  if (!firstField) return state2.api;
+  const eventType = firstField instanceof HTMLSelectElement || firstField instanceof HTMLInputElement && (firstField.type === "checkbox" || firstField.type === "radio") ? "change" : "input";
+  firstField.dispatchEvent(new Event(eventType, { bubbles: true }));
+  return state2.api;
+};
+
+// src/api/subscribe.ts
+var createSubscribe = (state2, _helpers) => (listener) => {
+  state2.subscribers.add(listener);
+  listener(state2.api.getState());
+  return () => {
+    state2.subscribers.delete(listener);
+  };
+};
+
+// src/api/unwatch.ts
+var createUnwatch = (state2, _helpers) => (field, callback) => {
+  if (!field) {
+    state2.watchedFields.clear();
+    return state2.api;
+  }
+  if (!callback) {
+    state2.watchedFields.delete(field);
+    return state2.api;
+  }
+  const callbacks = state2.watchedFields.get(field);
+  callbacks?.delete(callback);
+  if (callbacks && callbacks.size === 0) {
+    state2.watchedFields.delete(field);
+  }
+  return state2.api;
+};
+
+// src/api/watch.ts
+var createWatch = (state2, helpers) => (field, callback) => {
+  const observe = createObserve(state2, helpers);
+  observe(field, callback);
+  return state2.api;
+};
+
+// src/core/validation.ts
+var resolveRule = (rule) => {
+  if (rule === void 0) {
+    return { value: void 0, message: void 0 };
+  }
+  if (typeof rule === "object" && rule !== null && "value" in rule) {
+    return { value: rule.value, message: rule.message };
+  }
+  return { value: rule, message: void 0 };
+};
+var hasValue = (value) => {
+  if (Array.isArray(value)) return value.length > 0;
+  if (typeof value === "string") return value.trim().length > 0;
+  return value !== void 0;
+};
+var getValueLength = (value) => {
+  if (Array.isArray(value)) return value.length;
+  if (typeof value === "string") return value.length;
+  return 0;
+};
+var toPatternTarget = (value) => {
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) {
+    return value.map((entry) => typeof entry === "string" ? entry : entry.name).join(",");
+  }
+  return "";
+};
+var validateFieldValue = (field, value, rules, values) => {
+  const errors = [];
+  const context = { field, value, values };
+  const required = resolveRule(rules.required);
+  const minLength = resolveRule(rules.minLength);
+  const maxLength = resolveRule(rules.maxLength);
+  const pattern = resolveRule(rules.pattern);
+  if (required.value && !hasValue(value)) {
+    errors.push(required.message ?? "This field is required.");
+  }
+  if (minLength.value !== void 0 && getValueLength(value) < minLength.value) {
+    errors.push(minLength.message ?? `Minimum length is ${minLength.value}.`);
+  }
+  if (maxLength.value !== void 0 && getValueLength(value) > maxLength.value) {
+    errors.push(maxLength.message ?? `Maximum length is ${maxLength.value}.`);
+  }
+  if (pattern.value && hasValue(value) && !pattern.value.test(toPatternTarget(value))) {
+    errors.push(pattern.message ?? "Value does not match the required pattern.");
+  }
+  const custom = rules.validate ? Array.isArray(rules.validate) ? rules.validate : [rules.validate] : [];
+  for (const validator of custom) {
+    const result = validator(context);
+    if (typeof result === "string" && result.length > 0) errors.push(result);
+    if (result === false) errors.push("Validation failed.");
+  }
+  return errors;
+};
+var validateValues = (values, schema) => {
+  const errors = {};
+  for (const [field, rules] of Object.entries(schema)) {
+    const messages = validateFieldValue(field, values[field], rules, values);
+    if (messages.length > 0) errors[field] = messages;
+  }
+  return {
+    isValid: Object.keys(errors).length === 0,
+    errors
+  };
+};
+
+// src/core/controller.ts
+var DEFAULT_ATTRIBUTES = {
+  filled: "css-filled",
+  error: "css-error"
+};
+var DEFAULT_OPTIONS = {
+  autoValidate: true,
+  clearErrorsOnSubmit: true,
+  clearManualErrorsOnChange: true
+};
+var createFormController = (target, options = {}) => {
+  const element = resolveFormElement(target);
+  const attributes = { ...DEFAULT_ATTRIBUTES, ...options.attributes };
+  const normalizedOptions = {
+    ...DEFAULT_OPTIONS,
+    ...options,
+    attributes
+  };
+  const state2 = {
+    element,
+    options: normalizedOptions,
+    attributes,
+    validators: normalizedOptions.validators ?? {},
+    watchedFields: /* @__PURE__ */ new Map(),
+    subscribers: /* @__PURE__ */ new Set(),
+    submitHandlers: /* @__PURE__ */ new Set(),
+    fieldCache: /* @__PURE__ */ new Map(),
+    manualErrors: {},
+    validationErrors: {},
+    isValidated: Boolean(normalizedOptions.autoValidate),
+    autoSubmitEnabled: false,
+    autoSubmitDebounce: 0,
+    submitCount: 0,
+    autoSubmitTimer: null,
+    isDestroyed: false,
+    listeners: [],
+    mutationObserver: null,
+    formattedFields: /* @__PURE__ */ new Map(),
+    api: null
+  };
+  const notifySubscribers = () => {
+    if (!state2.api) return;
+    const snapshot = state2.api.getState();
+    state2.subscribers.forEach((listener) => listener(snapshot));
+  };
+  const addListener2 = (node, type, handler) => {
+    node.addEventListener(type, handler);
+    state2.listeners.push({ element: node, type, handler });
+  };
+  const clearFieldCache = () => state2.fieldCache.clear();
+  const getFieldsByName = (name) => {
+    if (!state2.element) return [];
+    if (!state2.fieldCache.has(name)) {
+      state2.fieldCache.set(name, queryNamedFields(state2.element, name));
+    }
+    return state2.fieldCache.get(name) ?? [];
+  };
+  const getTrackedFieldNames = () => {
+    if (!state2.element) return Object.keys(state2.validators);
+    const names = new Set(Object.keys(state2.validators));
+    for (const field of getNamedFields(state2.element)) {
+      names.add(field.name);
+    }
+    return Array.from(names);
+  };
+  const getValues = () => {
+    const values = {};
+    for (const name of getTrackedFieldNames()) {
+      values[name] = readFieldValue(getFieldsByName(name));
+    }
+    return values;
+  };
+  const getMergedErrors = () => mergeErrors(state2.validationErrors, state2.manualErrors);
+  const syncVisualState = (names) => {
+    if (!state2.element) return;
+    const targetNames = names ?? getTrackedFieldNames();
+    const errors = getMergedErrors();
+    for (const name of targetNames) {
+      const fields = getFieldsByName(name);
+      const hasError = Boolean(errors[name]?.length);
+      for (const field of fields) {
+        applyBooleanAttribute(field, attributes.filled, isFieldFilled(field));
+        applyBooleanAttribute(field, attributes.error, hasError);
+      }
+    }
+  };
+  void readFieldValue;
+  void writeFieldValue;
+  const validateNames = (names) => {
+    const targetNames = names ?? Object.keys(state2.validators);
+    const values = getValues();
+    const nextValidationErrors = names ? cloneErrors(state2.validationErrors) : {};
+    for (const name of targetNames) {
+      const rules = state2.validators[name];
+      if (!rules) {
+        delete nextValidationErrors[name];
+        continue;
+      }
+      const messages = validateFieldValue(name, values[name], rules, values);
+      if (messages.length > 0) nextValidationErrors[name] = messages;
+      else delete nextValidationErrors[name];
+    }
+    state2.validationErrors = nextValidationErrors;
+    syncVisualState(names);
+    return {
+      isValid: Object.keys(getMergedErrors()).length === 0,
+      errors: cloneErrors(getMergedErrors())
+    };
+  };
+  const emitFieldWatchers = (name) => {
+    if (!state2.element || !state2.api) return;
+    const callbacks = state2.watchedFields.get(name);
+    if (!callbacks || callbacks.size === 0) return;
+    const value = state2.api.getValue(name);
+    const fieldElement = state2.api.getField(name);
+    const snapshot = state2.api.getState();
+    callbacks.forEach((callback) => callback(value, fieldElement, state2.element, snapshot));
+  };
+  const scheduleAutoSubmit = () => {
+    if (!state2.element || !state2.autoSubmitEnabled) return;
+    if (state2.autoSubmitTimer) clearTimeout(state2.autoSubmitTimer);
+    if (state2.autoSubmitDebounce > 0) {
+      state2.autoSubmitTimer = setTimeout(
+        () => submitForm(state2.element),
+        state2.autoSubmitDebounce
+      );
+      return;
+    }
+    submitForm(state2.element);
+  };
+  const helpers = {
+    notifySubscribers,
+    clearFieldCache,
+    getFieldsByName,
+    getTrackedFieldNames,
+    getValues,
+    getMergedErrors,
+    syncVisualState,
+    validateNames,
+    emitFieldWatchers,
+    scheduleAutoSubmit
+  };
+  const handleDelegatedEvent = (event) => {
+    const target2 = event.target;
+    if (!(target2 instanceof Element) || !isFieldElement(target2)) return;
+    const name = target2.name;
+    if (!name) return;
+    clearFieldCache();
+    if (normalizedOptions.clearManualErrorsOnChange) {
+      delete state2.manualErrors[name];
+    }
+    syncVisualState([name]);
+    if (state2.isValidated && state2.validators[name]) {
+      validateNames([name]);
+    }
+    emitFieldWatchers(name);
+    notifySubscribers();
+    scheduleAutoSubmit();
+  };
+  const handleSubmitEvent = (event) => {
+    if (!state2.element || state2.isDestroyed || !state2.api) return;
+    if (normalizedOptions.clearErrorsOnSubmit) state2.manualErrors = {};
+    const validation = state2.api.validate();
+    const handlers = Array.from(state2.submitHandlers);
+    const shouldPrevent = validation.isValid ? handlers.some((handler) => handler.preventDefault) : true;
+    if (shouldPrevent) event.preventDefault();
+    state2.submitCount += 1;
+    notifySubscribers();
+    if (!validation.isValid) return;
+    const { data, formData } = state2.api.getData();
+    const snapshot = state2.api.getState();
+    handlers.forEach(
+      (handler) => handler.callback(state2.element, data, formData, snapshot)
+    );
+  };
+  const startMutationObserver = () => {
+    if (!state2.element || typeof MutationObserver === "undefined") return;
+    state2.mutationObserver = new MutationObserver(() => {
+      clearFieldCache();
+      if (state2.isValidated) {
+        syncVisualState();
+        validateNames();
+      }
+      notifySubscribers();
+    });
+    state2.mutationObserver.observe(state2.element, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["name", "type"]
+    });
+  };
+  const api = {
+    get element() {
+      return state2.element;
+    },
+    get f() {
+      return state2.element;
+    },
+    get options() {
+      return state2.options;
+    },
+    onSubmit: createOnSubmit(state2, helpers),
+    watch: createWatch(state2, helpers),
+    observe: createObserve(state2, helpers),
+    unwatch: createUnwatch(state2, helpers),
+    subscribe: createSubscribe(state2, helpers),
+    prefill: createPrefill(state2, helpers),
+    append: createAppend(state2, helpers),
+    setErrors: createSetErrors(state2, helpers),
+    clearErrors: createClearErrors(state2, helpers),
+    setValue: createSetValue(state2, helpers),
+    getValue: createGetValue(state2, helpers),
+    getField: createGetField(state2, helpers),
+    validate: createValidate(state2, helpers),
+    revalidate: createRevalidate(state2, helpers),
+    reset: createReset(state2, helpers),
+    autoSubmit: createAutoSubmit(state2, helpers),
+    disableAutoSubmit: createDisableAutoSubmit(state2, helpers),
+    getData: createGetData(state2, helpers),
+    getState: createGetState(state2, helpers),
+    format: createFormat(state2, helpers),
+    formatAll: createFormatAll(state2, helpers),
+    destroy: createDestroy(state2, helpers)
+  };
+  state2.api = api;
+  if (state2.element) {
+    addListener2(state2.element, "input", handleDelegatedEvent);
+    addListener2(state2.element, "change", handleDelegatedEvent);
+    addListener2(state2.element, "submit", handleSubmitEvent);
+    startMutationObserver();
+  }
+  if (normalizedOptions.autoSubmit) {
+    api.autoSubmit(normalizedOptions.autoSubmit);
+  }
+  if (normalizedOptions.formats) {
+    for (const config of Object.values(normalizedOptions.formats)) {
+      api.format(config);
+    }
+  }
+  if (state2.isValidated) {
+    syncVisualState();
+    validateNames();
+  }
+  return api;
+};
+
+// src/api/form.ts
+var form = (target, options = {}) => createFormController(target, options);
 export {
-  createEmptyFormState,
   createFormController,
   form,
   parseFormData,