@samline/forms 1.0.2 → 2.0.0

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,12 +17,19 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  createEmptyFormState: () => createEmptyFormState,
   createFormController: () => createFormController,
   form: () => form,
   parseFormData: () => parseFormData,
@@ -29,6 +38,343 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// 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) => {
@@ -44,19 +390,30 @@ var appendValue = (data, key, value) => {
   data[key] = [current, value];
 };
 var parseFormData = (formElement) => {
-  const rawFormData = new FormData(formElement);
+  const raw = new FormData(formElement);
   const formData = new FormData();
   const data = {};
-  rawFormData.forEach((value, key) => {
-    if (isEmptyFile(value)) {
-      return;
-    }
+  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: {},
@@ -67,98 +424,47 @@ var createEmptyFormState = () => ({
   autoSubmit: false,
   submitCount: 0
 });
-
-// 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;
-  }
-  return typeof value === "string" ? value.trim().length > 0 : 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 customValidators = rules.validate ? Array.isArray(rules.validate) ? rules.validate : [rules.validate] : [];
-  for (const validator of customValidators) {
-    const result = validator(context);
-    if (typeof result === "string" && result.length > 0) {
-      errors.push(result);
-    }
-    if (result === false) {
-      errors.push("Validation failed.");
-    }
+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 errors;
+  return merged;
 };
-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;
-    }
-  }
+
+// 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,
-    errors
+    isValidated: state2.isValidated,
+    autoSubmit: state2.autoSubmitEnabled,
+    submitCount: state2.submitCount
   };
 };
 
-// src/internal/dom.ts
+// 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 (!target) return null;
+  if (target instanceof HTMLFormElement) return target;
   if (typeof target === "string") {
-    const element = document.getElementById(target);
-    return element instanceof HTMLFormElement ? element : null;
+    const node = document.getElementById(target);
+    return node instanceof HTMLFormElement ? node : null;
   }
   if ("current" in target) {
     return target.current instanceof HTMLFormElement ? target.current : null;
@@ -169,14 +475,11 @@ var getNamedFields = (form2) => Array.from(form2.querySelectorAll("input[name],
   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);
-    }
+    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 !== "";
@@ -184,35 +487,35 @@ var isFieldFilled = (field) => {
 var applyBooleanAttribute = (field, attribute, enabled) => {
   if (enabled) {
     field.setAttribute(attribute, "");
-    return;
+  } else {
+    field.removeAttribute(attribute);
   }
-  field.removeAttribute(attribute);
 };
 var readFieldValue = (fields) => {
-  if (fields.length === 0) {
-    return void 0;
-  }
-  const firstField = fields[0];
-  if (!firstField) {
-    return void 0;
-  }
-  if (firstField instanceof HTMLSelectElement || firstField instanceof HTMLTextAreaElement) {
-    return firstField.value;
-  }
-  if (firstField.type === "radio") {
-    const checked = fields.find(
-      (field) => field instanceof HTMLInputElement && field.checked
-    );
-    return checked?.value ?? "";
-  }
-  if (firstField.type === "checkbox") {
-    const values = fields.filter((field) => field instanceof HTMLInputElement && field.checked).map((field) => field.value);
-    return values.length > 1 ? values : values[0] ?? "";
-  }
-  if (firstField.type === "file") {
-    return firstField.files ? Array.from(firstField.files) : [];
+  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 firstField.value;
+  return first.value;
 };
 var writeFieldValue = (fields, value) => {
   const normalizedArray = Array.isArray(value) ? value.map((item) => String(item)) : null;
@@ -228,9 +531,7 @@ var writeFieldValue = (fields, value) => {
         continue;
       }
       if (field.type === "file") {
-        if (Array.isArray(value) && value.length === 0) {
-          field.value = "";
-        }
+        if (Array.isArray(value) && value.length === 0) field.value = "";
         continue;
       }
       field.value = normalizedValue;
@@ -241,9 +542,7 @@ var writeFieldValue = (fields, value) => {
 };
 var clearAttributes = (form2, attributes) => {
   for (const attribute of attributes) {
-    form2.querySelectorAll(`[${attribute}]`).forEach((element) => {
-      element.removeAttribute(attribute);
-    });
+    form2.querySelectorAll(`[${attribute}]`).forEach((node) => node.removeAttribute(attribute));
   }
 };
 var submitForm = (form2) => {
@@ -261,25 +560,205 @@ var submitForm = (form2) => {
   form2.submit();
 };
 
-// src/internal/controller.ts
+// 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
+  clearErrorsOnSubmit: true,
+  clearManualErrorsOnChange: true
 };
-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;
-};
-var cloneErrors = (errors) => Object.fromEntries(
-  Object.entries(errors).map(([field, messages]) => [field, [...messages]])
-);
 var createFormController = (target, options = {}) => {
   const element = resolveFormElement(target);
   const attributes = { ...DEFAULT_ATTRIBUTES, ...options.attributes };
@@ -288,47 +767,49 @@ var createFormController = (target, options = {}) => {
     ...options,
     attributes
   };
-  const validators = normalizedOptions.validators ?? {};
-  const watchedFields = /* @__PURE__ */ new Map();
-  const listeners = [];
-  const subscribers = /* @__PURE__ */ new Set();
-  const submitHandlers = /* @__PURE__ */ new Set();
-  const fieldCache = /* @__PURE__ */ new Map();
-  let manualErrors = {};
-  let validationErrors = {};
-  let isValidated = Boolean(normalizedOptions.autoValidate);
-  let autoSubmitEnabled = false;
-  let autoSubmitDebounce = 0;
-  let submitCount = 0;
-  let autoSubmitTimer = null;
-  let mutationObserver = null;
-  let isDestroyed = false;
-  const notifySubscribers = () => {
-    const state = api.getState();
-    subscribers.forEach((listener) => listener(state));
+  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 addListener = (listenerTarget, type, handler) => {
-    listenerTarget.addEventListener(type, handler);
-    listeners.push({ element: listenerTarget, type, handler });
+  const notifySubscribers = () => {
+    if (!state2.api) return;
+    const snapshot = state2.api.getState();
+    state2.subscribers.forEach((listener) => listener(snapshot));
   };
-  const clearFieldCache = () => {
-    fieldCache.clear();
+  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 (!element) {
-      return [];
+    if (!state2.element) return [];
+    if (!state2.fieldCache.has(name)) {
+      state2.fieldCache.set(name, queryNamedFields(state2.element, name));
     }
-    if (!fieldCache.has(name)) {
-      fieldCache.set(name, queryNamedFields(element, name));
-    }
-    return fieldCache.get(name) ?? [];
+    return state2.fieldCache.get(name) ?? [];
   };
   const getTrackedFieldNames = () => {
-    if (!element) {
-      return Object.keys(validators);
-    }
-    const names = new Set(Object.keys(validators));
-    for (const field of getNamedFields(element)) {
+    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);
@@ -336,15 +817,13 @@ var createFormController = (target, options = {}) => {
   const getValues = () => {
     const values = {};
     for (const name of getTrackedFieldNames()) {
-      values[name] = api.getValue(name);
+      values[name] = readFieldValue(getFieldsByName(name));
     }
     return values;
   };
-  const getMergedErrors = () => mergeErrors(validationErrors, manualErrors);
+  const getMergedErrors = () => mergeErrors(state2.validationErrors, state2.manualErrors);
   const syncVisualState = (names) => {
-    if (!element) {
-      return;
-    }
+    if (!state2.element) return;
     const targetNames = names ?? getTrackedFieldNames();
     const errors = getMergedErrors();
     for (const name of targetNames) {
@@ -356,24 +835,23 @@ var createFormController = (target, options = {}) => {
       }
     }
   };
+  void readFieldValue;
+  void writeFieldValue;
   const validateNames = (names) => {
-    const targetNames = names ?? Object.keys(validators);
+    const targetNames = names ?? Object.keys(state2.validators);
     const values = getValues();
-    const nextValidationErrors = names ? cloneErrors(validationErrors) : {};
+    const nextValidationErrors = names ? cloneErrors(state2.validationErrors) : {};
     for (const name of targetNames) {
-      const rules = validators[name];
+      const rules = state2.validators[name];
       if (!rules) {
         delete nextValidationErrors[name];
         continue;
       }
-      const errors = validateFieldValue(name, values[name], rules, values);
-      if (errors.length > 0) {
-        nextValidationErrors[name] = errors;
-      } else {
-        delete nextValidationErrors[name];
-      }
+      const messages = validateFieldValue(name, values[name], rules, values);
+      if (messages.length > 0) nextValidationErrors[name] = messages;
+      else delete nextValidationErrors[name];
     }
-    validationErrors = nextValidationErrors;
+    state2.validationErrors = nextValidationErrors;
     syncVisualState(names);
     return {
       isValid: Object.keys(getMergedErrors()).length === 0,
@@ -381,42 +859,49 @@ var createFormController = (target, options = {}) => {
     };
   };
   const emitFieldWatchers = (name) => {
-    if (!element) {
-      return;
-    }
-    const callbacks = watchedFields.get(name);
-    if (!callbacks || callbacks.size === 0) {
-      return;
-    }
-    const value = api.getValue(name);
-    const state = api.getState();
-    callbacks.forEach((callback) => callback(value, element, state));
+    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 (!element || !autoSubmitEnabled) {
-      return;
-    }
-    if (autoSubmitTimer) {
-      clearTimeout(autoSubmitTimer);
-    }
-    if (autoSubmitDebounce > 0) {
-      autoSubmitTimer = setTimeout(() => submitForm(element), autoSubmitDebounce);
+    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(element);
+    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;
-    }
+    if (!(target2 instanceof Element) || !isFieldElement(target2)) return;
     const name = target2.name;
-    if (!name) {
-      return;
-    }
+    if (!name) return;
     clearFieldCache();
+    if (normalizedOptions.clearManualErrorsOnChange) {
+      delete state2.manualErrors[name];
+    }
     syncVisualState([name]);
-    if (isValidated && validators[name]) {
+    if (state2.isValidated && state2.validators[name]) {
       validateNames([name]);
     }
     emitFieldWatchers(name);
@@ -424,295 +909,97 @@ var createFormController = (target, options = {}) => {
     scheduleAutoSubmit();
   };
   const handleSubmitEvent = (event) => {
-    if (!element || isDestroyed) {
-      return;
-    }
-    if (normalizedOptions.clearErrorsOnSubmit) {
-      manualErrors = {};
-    }
-    const validation = api.validate();
-    const handlers = Array.from(submitHandlers);
+    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();
-    }
-    submitCount += 1;
+    if (shouldPrevent) event.preventDefault();
+    state2.submitCount += 1;
     notifySubscribers();
-    if (!validation.isValid) {
-      return;
-    }
-    const { data, formData } = api.getData();
-    const state = api.getState();
-    handlers.forEach((handler) => handler.callback(element, data, formData, state));
+    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 (!element || typeof MutationObserver === "undefined") {
-      return;
-    }
-    mutationObserver = new MutationObserver(() => {
+    if (!state2.element || typeof MutationObserver === "undefined") return;
+    state2.mutationObserver = new MutationObserver(() => {
       clearFieldCache();
-      if (isValidated) {
+      if (state2.isValidated) {
         syncVisualState();
         validateNames();
       }
       notifySubscribers();
     });
-    mutationObserver.observe(element, {
+    state2.mutationObserver.observe(state2.element, {
       childList: true,
       subtree: true,
       attributes: true,
       attributeFilter: ["name", "type"]
     });
   };
-  const isFieldElement = (value) => value instanceof HTMLInputElement || value instanceof HTMLSelectElement || value instanceof HTMLTextAreaElement;
   const api = {
-    element,
-    f: element,
-    options: normalizedOptions,
-    onSubmit(callback, preventDefault = true) {
-      submitHandlers.add({ callback, preventDefault });
-      return api;
-    },
-    watch(field, callback) {
-      api.observe(field, callback);
-      return api;
-    },
-    observe(field, callback) {
-      const callbacks = watchedFields.get(field) ?? /* @__PURE__ */ new Set();
-      callbacks.add(callback);
-      watchedFields.set(field, callbacks);
-      if (element) {
-        callback(api.getValue(field), element, api.getState());
-      }
-      return () => {
-        const currentCallbacks = watchedFields.get(field);
-        currentCallbacks?.delete(callback);
-        if (currentCallbacks && currentCallbacks.size === 0) {
-          watchedFields.delete(field);
-        }
-      };
-    },
-    unwatch(field, callback) {
-      if (!field) {
-        watchedFields.clear();
-        return api;
-      }
-      if (!callback) {
-        watchedFields.delete(field);
-        return api;
-      }
-      const callbacks = watchedFields.get(field);
-      callbacks?.delete(callback);
-      if (callbacks && callbacks.size === 0) {
-        watchedFields.delete(field);
-      }
-      return api;
-    },
-    subscribe(listener) {
-      subscribers.add(listener);
-      listener(api.getState());
-      return () => {
-        subscribers.delete(listener);
-      };
-    },
-    prefill(fieldName) {
-      if (!element) {
-        return api;
-      }
-      const queryParams = new URLSearchParams(window.location.search);
-      queryParams.forEach((value, key) => {
-        if (fieldName && fieldName !== key) {
-          return;
-        }
-        api.setValue(key, value);
-      });
-      return api;
-    },
-    append({ tag, content, class: className, atStart = false }) {
-      if (!element) {
-        return null;
-      }
-      clearFieldCache();
-      if (className) {
-        const classSelector = className.trim().split(/\s+/)[0];
-        element.querySelector(`.${classSelector}`)?.remove();
-      }
-      const node = document.createElement(tag);
-      if (className) {
-        node.className = className;
-      }
-      node.innerHTML = content;
-      if (atStart && element.firstChild) {
-        element.insertBefore(node, element.firstChild);
-      } else {
-        element.appendChild(node);
-      }
-      return node;
-    },
-    setErrors(fields) {
-      if (Array.isArray(fields)) {
-        manualErrors = {
-          ...manualErrors,
-          ...Object.fromEntries(fields.map((field) => [field, ["Invalid value."]]))
-        };
-      } else {
-        manualErrors = {
-          ...manualErrors,
-          ...cloneErrors(fields)
-        };
-      }
-      syncVisualState(Array.isArray(fields) ? fields : Object.keys(fields));
-      notifySubscribers();
-      return api;
-    },
-    clearErrors(fields) {
-      if (!fields) {
-        manualErrors = {};
-        syncVisualState();
-        notifySubscribers();
-        return api;
-      }
-      for (const field of fields) {
-        delete manualErrors[field];
-      }
-      syncVisualState(fields);
-      notifySubscribers();
-      return api;
-    },
-    setValue(name, value) {
-      const fields = getFieldsByName(name);
-      if (fields.length === 0) {
-        return api;
-      }
-      writeFieldValue(fields, value);
-      const firstField = fields[0];
-      if (!firstField) {
-        return 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 api;
-    },
-    validate(fields) {
-      isValidated = true;
-      syncVisualState(fields);
-      return validateNames(fields);
-    },
-    revalidate(fields) {
-      return api.validate(fields);
-    },
-    reset() {
-      if (!element) {
-        return api;
-      }
-      element.reset();
-      manualErrors = {};
-      validationErrors = {};
-      clearAttributes(element, [attributes.error, attributes.filled]);
-      if (isValidated) {
-        syncVisualState();
-      }
-      notifySubscribers();
-      return api;
-    },
-    autoSubmit(nextOptions = true) {
-      autoSubmitEnabled = nextOptions !== false;
-      autoSubmitDebounce = typeof nextOptions === "object" && nextOptions ? nextOptions.debounce ?? 0 : 0;
-      notifySubscribers();
-      return api;
+    get element() {
+      return state2.element;
     },
-    disableAutoSubmit() {
-      autoSubmitEnabled = false;
-      if (autoSubmitTimer) {
-        clearTimeout(autoSubmitTimer);
-        autoSubmitTimer = null;
-      }
-      notifySubscribers();
-      return api;
+    get f() {
+      return state2.element;
     },
-    getValue(name) {
-      return readFieldValue(getFieldsByName(name));
+    get options() {
+      return state2.options;
     },
-    getField(name) {
-      const fields = getFieldsByName(name);
-      if (fields.length === 0) {
-        return null;
-      }
-      const [firstField] = fields;
-      if (!firstField) {
-        return null;
-      }
-      return fields.length === 1 ? firstField : fields;
-    },
-    getData() {
-      if (!element) {
-        return { data: {}, formData: new FormData() };
-      }
-      return parseFormData(element);
-    },
-    getState() {
-      const values = getValues();
-      const errors = cloneErrors(getMergedErrors());
-      const filledFields = getTrackedFieldNames().filter((name) => {
-        const value = values[name];
-        return Array.isArray(value) ? value.length > 0 : typeof value === "string" ? value.trim().length > 0 : value !== void 0;
-      });
-      return {
-        ...createEmptyFormState(),
-        values,
-        errors,
-        filledFields,
-        isValid: Object.keys(errors).length === 0,
-        isValidated,
-        autoSubmit: autoSubmitEnabled,
-        submitCount
-      };
-    },
-    destroy() {
-      if (isDestroyed) {
-        return;
-      }
-      isDestroyed = true;
-      for (const listener of listeners) {
-        listener.element.removeEventListener(listener.type, listener.handler);
-      }
-      listeners.length = 0;
-      if (autoSubmitTimer) {
-        clearTimeout(autoSubmitTimer);
-        autoSubmitTimer = null;
-      }
-      mutationObserver?.disconnect();
-      mutationObserver = null;
-      watchedFields.clear();
-      subscribers.clear();
-      submitHandlers.clear();
-      clearFieldCache();
-      manualErrors = {};
-      validationErrors = {};
-    }
+    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)
   };
-  if (element) {
-    addListener(element, "input", handleDelegatedEvent);
-    addListener(element, "change", handleDelegatedEvent);
-    addListener(element, "submit", handleSubmitEvent);
+  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) {
-    const autoSubmitOption = normalizedOptions.autoSubmit;
-    api.autoSubmit(autoSubmitOption);
+    api.autoSubmit(normalizedOptions.autoSubmit);
+  }
+  if (normalizedOptions.formats) {
+    for (const config of Object.values(normalizedOptions.formats)) {
+      api.format(config);
+    }
   }
-  if (isValidated) {
+  if (state2.isValidated) {
     syncVisualState();
     validateNames();
   }
   return api;
 };
 
-// src/vanilla/index.ts
-var form = (target, options) => createFormController(target, options);
+// src/api/form.ts
+var form = (target, options = {}) => createFormController(target, options);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  createEmptyFormState,
   createFormController,
   form,
   parseFormData,