@samline/forms 1.0.3 → 2.1.0

package/dist/browser/global.global.js

@@ -1,9 +1,17 @@
 "use strict";
-var SamlineForms = (() => {
+var Forms = (() => {
+  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 __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+    get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+  }) : x)(function(x) {
+    if (typeof require !== "undefined") return require.apply(this, arguments);
+    throw Error('Dynamic require of "' + x + '" is not supported');
+  });
   var __export = (target, all) => {
     for (var name in all)
       __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,6 +24,14 @@ var SamlineForms = (() => {
     }
     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/browser/global.ts
@@ -24,6 +40,353 @@ var SamlineForms = (() => {
     default: () => global_default
   });
 
+  // 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;
+    const byNameOld = form2.querySelector(
+      `[name="${cssEscape(`${fieldName}Raw`)}"]`
+    );
+    if (byNameOld) return byNameOld;
+    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;
+      if (event.target !== field) 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, fieldName) ?? 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
+          });
+          const current = field.value;
+          if (current !== "") {
+            const { formatted, raw } = formatter.format(current, formatType, formatOptions);
+            applyFormattedValue(field, mirror, formatted, raw);
+          }
+          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 (mirrorIsOwned && 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) => {
@@ -39,19 +402,30 @@ var SamlineForms = (() => {
     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: {},
@@ -62,98 +436,47 @@ var SamlineForms = (() => {
     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;
@@ -164,14 +487,11 @@ var SamlineForms = (() => {
     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 !== "";
@@ -179,35 +499,35 @@ var SamlineForms = (() => {
   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 (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 (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 (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;
@@ -223,9 +543,7 @@ var SamlineForms = (() => {
           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;
@@ -236,9 +554,7 @@ var SamlineForms = (() => {
   };
   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) => {
@@ -256,26 +572,194 @@ var SamlineForms = (() => {
     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;
+  };
+
+  // src/core/controller.ts
   var DEFAULT_ATTRIBUTES = {
     filled: "css-filled",
     error: "css-error"
   };
   var DEFAULT_OPTIONS = {
     autoValidate: true,
-    clearManualErrorsOnChange: 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 };
@@ -284,47 +768,49 @@ var SamlineForms = (() => {
       ...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);
@@ -332,15 +818,13 @@ var SamlineForms = (() => {
     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) {
@@ -352,24 +836,23 @@ var SamlineForms = (() => {
         }
       }
     };
+    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,
@@ -377,45 +860,49 @@ var SamlineForms = (() => {
       };
     };
     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 manualErrors[name];
+        delete state2.manualErrors[name];
       }
       syncVisualState([name]);
-      if (isValidated && validators[name]) {
+      if (state2.isValidated && state2.validators[name]) {
         validateNames([name]);
       }
       emitFieldWatchers(name);
@@ -423,305 +910,132 @@ var SamlineForms = (() => {
       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;
+      get element() {
+        return state2.element;
       },
-      watch(field, callback) {
-        api.observe(field, callback);
-        return api;
+      get f() {
+        return state2.element;
       },
-      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;
+      get options() {
+        return state2.options;
       },
-      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;
-      },
-      disableAutoSubmit() {
-        autoSubmitEnabled = false;
-        if (autoSubmitTimer) {
-          clearTimeout(autoSubmitTimer);
-          autoSubmitTimer = null;
-        }
-        notifySubscribers();
-        return api;
-      },
-      getValue(name) {
-        return readFieldValue(getFieldsByName(name));
-      },
-      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);
 
   // src/browser/global.ts
-  var browserApi = {
-    createFormController,
+  var available = {};
+  var newForm = (input) => {
+    const { id, options } = input;
+    if (!id) {
+      console.error("Form ID is required");
+      return;
+    }
+    const controller = form(id, { ...options });
+    available[id] = controller;
+    return controller;
+  };
+  var destroyForm = (id) => {
+    if (!id) {
+      console.error("Form ID is required");
+      return;
+    }
+    const controller = available[id];
+    if (controller) {
+      controller.destroy();
+      delete available[id];
+    } else {
+      console.warn(`Form with ID ${id} not found`);
+    }
+  };
+  var Forms = {
     form,
-    parseFormData,
-    validateValues
+    newForm,
+    destroyForm,
+    available
   };
   if (typeof globalThis !== "undefined") {
     ;
-    globalThis.forms = browserApi;
+    globalThis.Forms = Forms;
   }
-  var global_default = browserApi;
+  var global_default = Forms;
   return __toCommonJS(global_exports);
 })();
 //# sourceMappingURL=global.global.js.map