@samline/forms 2.3.4 → 2.6.0

package/dist/chunk-L4GRKSQ5.js

@@ -0,0 +1,1270 @@
+// src/core/serialize.ts
+var isEmptyFile = (value) => value instanceof File && value.size === 0 && value.name === "";
+var appendValue = (data, key, value) => {
+  if (!Object.prototype.hasOwnProperty.call(data, key)) {
+    Object.defineProperty(data, key, {
+      value,
+      writable: true,
+      enumerable: true,
+      configurable: true
+    });
+    return;
+  }
+  const current = data[key];
+  if (Array.isArray(current)) {
+    current.push(value);
+    return;
+  }
+  data[key] = [current, value];
+};
+var parseFormData = (formElement, submitter) => {
+  const raw = submitter ? new FormData(formElement, submitter) : new FormData(formElement);
+  const formData = new FormData();
+  const data = {};
+  raw.forEach((value, key) => {
+    if (isEmptyFile(value)) return;
+    formData.append(key, value);
+    appendValue(data, key, value);
+  });
+  return { data, formData };
+};
+
+// src/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 valuesAreEqual = (left, right) => {
+  if (Array.isArray(left) && Array.isArray(right)) {
+    return left.length === right.length && left.every((entry, index) => entry === right[index]);
+  }
+  return left === right;
+};
+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);
+  const sameAs = resolveRule(rules.sameAs);
+  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.lastIndex = 0;
+    const matches = pattern.value.test(toPatternTarget(value));
+    pattern.value.lastIndex = 0;
+    if (!matches) {
+      errors.push(pattern.message ?? "Value does not match the required pattern.");
+    }
+  }
+  if (sameAs.value !== void 0) {
+    const otherValue = values[sameAs.value];
+    if (hasValue(value) && hasValue(otherValue) && !valuesAreEqual(value, otherValue)) {
+      errors.push(sameAs.message ?? `Value must match ${sameAs.value}.`);
+    }
+  }
+  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/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.getElementsByClassName(classSelector)[0] : 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;
+  if (!state2.autoSubmitEnabled && state2.autoSubmitTimer) {
+    clearTimeout(state2.autoSubmitTimer);
+    state2.autoSubmitTimer = null;
+  }
+  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 findVisibleField = (form2, displayName) => {
+  const node = form2.querySelector(
+    `[name="${cssEscape(displayName)}"]:not([type="hidden"])`
+  );
+  if (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement) {
+    return node;
+  }
+  return null;
+};
+var findHiddenMirror = (form2, fieldName) => {
+  const byAttr = form2.querySelector(
+    `[${FORMATTER_RAW_ATTRIBUTE}="${cssEscape(fieldName)}"]`
+  );
+  if (byAttr) return byAttr;
+  const byName = form2.querySelector(
+    `input[type="hidden"][name="${cssEscape(fieldName)}"]`
+  );
+  if (byName) return byName;
+  return null;
+};
+var ensureHiddenMirror = (form2, fieldName) => {
+  const existing = findHiddenMirror(form2, fieldName);
+  if (existing) return existing;
+  const input = document.createElement("input");
+  input.type = "hidden";
+  input.name = fieldName;
+  input.setAttribute("aria-hidden", "true");
+  input.tabIndex = -1;
+  input.setAttribute(FORMATTER_RAW_ATTRIBUTE, fieldName);
+  form2.appendChild(input);
+  return input;
+};
+var renameVisibleField = (visible, displayName) => {
+  if (visible.name === displayName) return;
+  visible.name = displayName;
+};
+var restoreVisibleName = (visible, originalName) => {
+  visible.name = originalName;
+};
+var applyFormattedValue = (visible, mirror, formatted, raw, inputType) => {
+  const rawInput = visible.value;
+  const caret = clamp(
+    visible.selectionStart ?? rawInput.length,
+    0,
+    rawInput.length
+  );
+  if (mirror && mirror.value !== raw) mirror.value = raw;
+  if (rawInput === formatted) {
+    const newCaret2 = pullCaretPastLeadingDelimiter(caret, formatted, inputType);
+    if (newCaret2 !== caret) restoreCursor(visible, newCaret2);
+    return newCaret2;
+  }
+  visible.value = formatted;
+  const newCaret = pullCaretPastLeadingDelimiter(
+    computeCursorPosition(caret, rawInput, formatted),
+    formatted,
+    inputType
+  );
+  restoreCursor(visible, newCaret);
+  return newCaret;
+};
+var pullCaretPastLeadingDelimiter = (caret, value, inputType) => {
+  if (!inputType || !inputType.startsWith("delete")) return caret;
+  let cursor = caret;
+  while (cursor > 0 && isFormatChar(value[cursor - 1])) {
+    cursor -= 1;
+  }
+  return cursor;
+};
+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("@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 UNBOUND = null;
+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, useCapture) => {
+  if (useCapture) {
+    target.addEventListener(type, handler, { capture: true });
+  } else {
+    target.addEventListener(type, handler);
+  }
+  const entry = { element: target, type, handler };
+  if (useCapture !== void 0) entry.capture = useCapture;
+  state2.listeners.push(entry);
+};
+var readInputType = (event) => {
+  const candidate = event;
+  return typeof candidate.inputType === "string" ? candidate.inputType : void 0;
+};
+var buildAutoInterpretedOptions = (formatOptions) => ({
+  ...formatOptions ?? {},
+  interpretInputAs: "auto"
+});
+var shouldForceAutoInterpretation = (formatOptions) => formatOptions?.interpretInputAs === void 0;
+var buildHandler = (visible, mirror, formatFn, formatType, formatOptions) => {
+  const handler = (event) => {
+    if (!visible.isConnected || !mirror.isConnected) return;
+    const isVisible = event.target === visible;
+    const isMirror = event.target === mirror;
+    if (!isVisible && !isMirror) return;
+    const rawInput = isMirror ? mirror.value : visible.value;
+    const inputType = readInputType(event);
+    const sourceOptions = isMirror && shouldForceAutoInterpretation(formatOptions) ? buildAutoInterpretedOptions(formatOptions) : formatOptions;
+    const { formatted, raw } = formatFn(rawInput, formatType, sourceOptions);
+    if (!formatted && !raw) {
+      visible.value = "";
+      if (mirror.value !== "") mirror.value = "";
+      return;
+    }
+    applyFormattedValue(visible, mirror, formatted, raw, inputType);
+  };
+  return handler;
+};
+var applyFormat = async (state2, helpers, config) => {
+  if (!state2.element || !state2.api) return;
+  if (Array.isArray(config.field) && config.displayField) {
+    console.error(
+      "[samline/forms] `displayField` can only be used when `field` is a string."
+    );
+    return;
+  }
+  const formatType = config.type;
+  const formatOptions = config.options;
+  const fieldNames = resolveFieldNames(config);
+  const bucket = getRegistry(state2);
+  const phase1Entries = [];
+  for (const fieldName of fieldNames) {
+    const displayName = config.displayField ?? `${fieldName}_displayed`;
+    const canonicalFields = helpers.getFieldsByName(fieldName);
+    const candidates = canonicalFields.filter(
+      (f) => f instanceof HTMLInputElement && f.type !== "hidden" || f instanceof HTMLTextAreaElement
+    );
+    let visible = candidates[0] ?? null;
+    if (!visible) {
+      visible = findVisibleField(state2.element, displayName);
+    }
+    if (!visible) continue;
+    const existing = bucket.get(fieldName);
+    let mirror = findHiddenMirror(state2.element, fieldName);
+    const mirrorIsOwned = !mirror;
+    if (!mirror) mirror = ensureHiddenMirror(state2.element, fieldName);
+    renameVisibleField(visible, displayName);
+    if (existing) {
+      existing.displayName = displayName;
+      existing.mirrorIsOwned = mirrorIsOwned;
+      state2.formattedFields.set(fieldName, {
+        config,
+        displayName,
+        mirrorIsOwned
+      });
+      phase1Entries.push(existing);
+    } else {
+      const entry = {
+        canonicalName: fieldName,
+        displayName,
+        visible,
+        mirror,
+        mirrorIsOwned,
+        defaultVisible: null,
+        defaultRaw: null,
+        handler: UNBOUND
+      };
+      bucket.set(fieldName, entry);
+      state2.formattedFields.set(fieldName, {
+        config,
+        displayName,
+        mirrorIsOwned
+      });
+      phase1Entries.push(entry);
+    }
+  }
+  const formatter = await loadFormatter();
+  if (state2.isDestroyed) {
+    rollbackPhase1(phase1Entries, bucket, state2.formattedFields);
+    return;
+  }
+  if (!formatter) {
+    rollbackPhase1(phase1Entries, bucket, state2.formattedFields);
+    return;
+  }
+  for (const entry of phase1Entries) {
+    if (entry.handler !== UNBOUND) {
+      const current = entry.visible.value;
+      if (current !== "") {
+        const { formatted, raw } = formatter.format(current, formatType, formatOptions);
+        applyFormattedValue(entry.visible, entry.mirror, formatted, raw);
+      }
+      continue;
+    }
+    const handler = buildHandler(
+      entry.visible,
+      entry.mirror,
+      formatter.format,
+      formatType,
+      formatOptions
+    );
+    addListener(state2, state2.element, "input", handler, true);
+    entry.handler = handler;
+    const initial = entry.visible.value;
+    if (initial !== "") {
+      const initialOptions = shouldForceAutoInterpretation(formatOptions) ? buildAutoInterpretedOptions(formatOptions) : formatOptions;
+      const { formatted, raw } = formatter.format(initial, formatType, initialOptions);
+      applyFormattedValue(entry.visible, entry.mirror, formatted, raw);
+    } else if (entry.mirrorIsOwned && entry.mirror.value !== "") {
+      entry.mirror.value = "";
+    }
+    entry.defaultVisible = entry.visible.value;
+    entry.defaultRaw = entry.mirror.value;
+  }
+};
+var resetFormattedFields = (state2) => {
+  const bucket = registry.get(state2);
+  if (!bucket) return;
+  for (const entry of bucket.values()) {
+    if (entry.defaultVisible !== null) entry.visible.value = entry.defaultVisible;
+    if (entry.defaultRaw !== null) entry.mirror.value = entry.defaultRaw;
+  }
+};
+var rollbackPhase1 = (entries, bucket, registry2) => {
+  for (const entry of entries) {
+    if (entry.visible.isConnected) {
+      restoreVisibleName(entry.visible, entry.canonicalName);
+    }
+    if (entry.mirrorIsOwned && entry.mirror.isConnected) {
+      entry.mirror.remove();
+    }
+    bucket.delete(entry.canonicalName);
+    registry2.delete(entry.canonicalName);
+  }
+};
+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 resolveCanonicalForName = (state2, name) => {
+  const bucket = registry.get(state2);
+  if (!bucket) return null;
+  for (const [canonical, entry] of bucket) {
+    if (canonical === name || entry.displayName === name) return canonical;
+  }
+  return null;
+};
+var resolveDisplayNameForName = (state2, name) => {
+  const bucket = registry.get(state2);
+  if (!bucket) return name;
+  for (const [canonical, entry] of bucket) {
+    if (canonical === name) return entry.displayName;
+    if (entry.displayName === name) return entry.displayName;
+  }
+  return name;
+};
+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) {
+    if (entry.handler !== UNBOUND) {
+      state2.element.removeEventListener("input", entry.handler, true);
+    }
+    if (entry.visible.isConnected) {
+      restoreVisibleName(entry.visible, fieldName);
+    }
+    if (entry.mirrorIsOwned && entry.mirror.isConnected) {
+      entry.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) {
+    const options = listener.capture ? { capture: true } : void 0;
+    if (options) {
+      listener.element.removeEventListener(listener.type, listener.handler, options);
+    } else {
+      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/api/get-data.ts
+var createGetData = (_state, _helpers) => () => {
+  if (!_state.element) return { data: {}, formData: new FormData() };
+  return parseFormData(_state.element);
+};
+
+// src/api/get-field.ts
+var createGetField = (state2, helpers) => (name) => {
+  const fields = helpers.getFieldsByName(name);
+  if (fields.length === 0) return null;
+  return fields.length === 1 ? fields[0] : fields;
+};
+
+// src/core/state.ts
+var createEmptyFormState = () => ({
+  values: {},
+  errors: {},
+  filledFields: [],
+  isValid: true,
+  isValidated: false,
+  autoSubmit: false,
+  submitCount: 0
+});
+var cloneErrors = (errors) => Object.fromEntries(
+  Object.entries(errors).map(([field, messages]) => [field, [...messages]])
+);
+var mergeErrors = (left, right) => {
+  const merged = { ...left };
+  for (const [field, messages] of Object.entries(right)) {
+    merged[field] = merged[field] ? [...merged[field], ...messages] : [...messages];
+  }
+  return merged;
+};
+
+// src/api/get-state.ts
+var createGetState = (state2, helpers) => () => {
+  const values = helpers.getValues();
+  const errors = cloneErrors(helpers.getMergedErrors());
+  const filledFields = helpers.getTrackedFieldNames().filter((name) => {
+    const value = values[name];
+    if (Array.isArray(value)) return value.length > 0;
+    if (typeof value === "string") return value.trim().length > 0;
+    return value !== void 0;
+  });
+  return {
+    ...createEmptyFormState(),
+    values,
+    errors,
+    filledFields,
+    isValid: Object.keys(errors).length === 0,
+    isValidated: state2.isValidated,
+    autoSubmit: state2.autoSubmitEnabled,
+    submitCount: state2.submitCount
+  };
+};
+
+// src/core/dom.ts
+var isFormFieldElement = (value) => value instanceof HTMLInputElement || value instanceof HTMLSelectElement || value instanceof HTMLTextAreaElement;
+var isArraySyntax = (field) => typeof field.name === "string" && field.name.endsWith("[]");
+var resolveFormElement = (target) => {
+  if (!target) return null;
+  if (target instanceof HTMLFormElement) return target;
+  if (typeof target === "string") {
+    const node = document.getElementById(target);
+    return node instanceof HTMLFormElement ? node : null;
+  }
+  if ("current" in target) {
+    return target.current instanceof HTMLFormElement ? target.current : null;
+  }
+  return null;
+};
+var getNamedFields = (form2) => Array.from(form2.elements).filter(
+  (element) => isFormFieldElement(element) && Boolean(element.name)
+);
+var queryNamedFields = (form2, name) => getNamedFields(form2).filter((field) => field.name === name);
+var isFieldElement = (value) => isFormFieldElement(value);
+var isFieldFilled = (field) => {
+  if (field instanceof HTMLInputElement) {
+    if (field.type === "checkbox" || field.type === "radio") return field.checked;
+    if (field.type === "file") return Boolean(field.files && field.files.length > 0);
+    return field.value.trim() !== "";
+  }
+  return field.value !== "";
+};
+var applyBooleanAttribute = (field, attribute, enabled) => {
+  if (enabled) {
+    field.setAttribute(attribute, "");
+  } else {
+    field.removeAttribute(attribute);
+  }
+};
+var readFieldValue = (fields) => {
+  if (fields.length === 0) return void 0;
+  const first = fields[0];
+  if (!first) return void 0;
+  if (isArraySyntax(first) && fields.length > 1) {
+    if (first instanceof HTMLSelectElement || first instanceof HTMLTextAreaElement) {
+      return fields.map((f) => f.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") {
+        return fields.filter(
+          (f) => f instanceof HTMLInputElement && f.checked
+        ).map((f) => f.value);
+      }
+      if (first.type === "file") {
+        return fields.flatMap(
+          (f) => f instanceof HTMLInputElement && f.files ? Array.from(f.files) : []
+        );
+      }
+    }
+    return fields.map((f) => f.value);
+  }
+  if (first instanceof HTMLSelectElement && first.multiple) {
+    return Array.from(first.selectedOptions, (option) => option.value);
+  }
+  if (first instanceof HTMLSelectElement || first instanceof HTMLTextAreaElement) {
+    return first.value;
+  }
+  if (first instanceof HTMLInputElement) {
+    if (first.type === "radio") {
+      const checked = fields.find(
+        (f) => f instanceof HTMLInputElement && f.checked
+      );
+      return checked?.value ?? "";
+    }
+    if (first.type === "checkbox") {
+      const values = fields.filter(
+        (f) => f instanceof HTMLInputElement && f.checked
+      ).map((f) => f.value);
+      return values.length > 1 ? values : values[0] ?? "";
+    }
+    if (first.type === "file") {
+      return first.files ? Array.from(first.files) : [];
+    }
+  }
+  return first.value;
+};
+var writeFieldValue = (fields, value) => {
+  const normalizedArray = Array.isArray(value) ? value.map((item) => String(item)) : null;
+  const normalizedValue = value === void 0 || value === null ? "" : String(value);
+  const distributeArray = fields.length > 0 && fields[0] !== void 0 && isArraySyntax(fields[0]) && normalizedArray !== null;
+  for (let index = 0; index < fields.length; index++) {
+    const field = fields[index];
+    if (!field) continue;
+    if (field instanceof HTMLInputElement) {
+      if (field.type === "checkbox") {
+        field.checked = normalizedArray ? normalizedArray.includes(field.value) : normalizedValue === field.value;
+        continue;
+      }
+      if (field.type === "radio") {
+        field.checked = field.value === normalizedValue;
+        continue;
+      }
+      if (field.type === "file") {
+        if (Array.isArray(value) && value.length === 0) field.value = "";
+        continue;
+      }
+      if (distributeArray && normalizedArray) {
+        field.value = normalizedArray[index] ?? "";
+        continue;
+      }
+      field.value = normalizedValue;
+      continue;
+    }
+    if (field instanceof HTMLSelectElement && field.multiple) {
+      const selectedValues = normalizedArray ?? [normalizedValue];
+      for (const option of field.options) {
+        option.selected = selectedValues.includes(option.value);
+      }
+      continue;
+    }
+    if (distributeArray && normalizedArray) {
+      field.value = normalizedArray[index] ?? "";
+      continue;
+    }
+    field.value = normalizedValue;
+  }
+};
+var clearAttributes = (form2, attributes) => {
+  for (const attribute of attributes) {
+    getNamedFields(form2).forEach((field) => field.removeAttribute(attribute));
+  }
+};
+var submitForm = (form2) => {
+  if (typeof form2.requestSubmit === "function") {
+    form2.requestSubmit();
+    return;
+  }
+  const submitButton = form2.querySelector(
+    'button[type="submit"], input[type="submit"]'
+  );
+  if (submitButton) {
+    submitButton.click();
+    return;
+  }
+  form2.submit();
+};
+
+// src/api/get-value.ts
+var createGetValue = (state2, helpers) => (name) => readFieldValue(helpers.getFieldsByName(name));
+
+// src/api/observe.ts
+var createObserve = (state2, helpers) => (field, callback) => {
+  const callbacks = state2.watchedFields.get(field) ?? /* @__PURE__ */ new Set();
+  callbacks.add(callback);
+  state2.watchedFields.set(field, callbacks);
+  if (state2.element) {
+    callback(state2.api.getValue(field), state2.api.getField(field), state2.element, state2.api.getState());
+  }
+  return () => {
+    const current = state2.watchedFields.get(field);
+    current?.delete(callback);
+    if (current && current.size === 0) {
+      state2.watchedFields.delete(field);
+    }
+  };
+};
+
+// src/api/on-submit.ts
+var createOnSubmit = (state2, _helpers) => (callback, preventDefault = true) => {
+  state2.submitHandlers.add({ callback, preventDefault });
+  return state2.api;
+};
+
+// src/api/prefill.ts
+var createPrefill = (state2, _helpers) => (fieldName) => {
+  if (!state2.element) return state2.api;
+  const params = new URLSearchParams(window.location.search);
+  params.forEach((value, key) => {
+    if (fieldName && fieldName !== key) return;
+    state2.api.setValue(key, value);
+  });
+  return state2.api;
+};
+
+// src/api/reset.ts
+var createReset = (state2, helpers) => () => {
+  if (!state2.element) return state2.api;
+  state2.element.reset();
+  resetFormattedFields(state2);
+  state2.manualErrors = {};
+  state2.validationErrors = {};
+  clearAttributes(state2.element, [
+    state2.attributes.error,
+    state2.attributes.filled,
+    "aria-invalid"
+  ]);
+  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;
+  firstField.dispatchEvent(new Event("input", { 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/controller.ts
+var DEFAULT_ATTRIBUTES = {
+  filled: "css-filled",
+  error: "css-error"
+};
+var DEFAULT_OPTIONS = {
+  autoValidate: true,
+  clearErrorsOnSubmit: true,
+  clearManualErrorsOnChange: true
+};
+var createFormController = (target, options = {}) => {
+  const element = resolveFormElement(target);
+  const attributes = { ...DEFAULT_ATTRIBUTES, ...options.attributes };
+  const normalizedOptions = {
+    ...DEFAULT_OPTIONS,
+    ...options,
+    attributes
+  };
+  const state2 = {
+    element,
+    options: normalizedOptions,
+    attributes,
+    validators: normalizedOptions.validators ?? {},
+    watchedFields: /* @__PURE__ */ new Map(),
+    subscribers: /* @__PURE__ */ new Set(),
+    submitHandlers: /* @__PURE__ */ new Set(),
+    fieldCache: /* @__PURE__ */ new Map(),
+    manualErrors: {},
+    validationErrors: {},
+    isValidated: Boolean(normalizedOptions.autoValidate),
+    autoSubmitEnabled: false,
+    autoSubmitDebounce: 0,
+    submitCount: 0,
+    autoSubmitTimer: null,
+    isDestroyed: false,
+    listeners: [],
+    mutationObserver: null,
+    formattedFields: /* @__PURE__ */ new Map(),
+    api: null
+  };
+  const validationDependents = /* @__PURE__ */ new Map();
+  for (const [field, rules] of Object.entries(state2.validators)) {
+    const sameAs = rules.sameAs;
+    if (sameAs === void 0) continue;
+    const source = typeof sameAs === "string" ? sameAs : sameAs.value;
+    const dependents = validationDependents.get(source) ?? /* @__PURE__ */ new Set();
+    dependents.add(field);
+    validationDependents.set(source, dependents);
+  }
+  const notifySubscribers = () => {
+    if (!state2.api) return;
+    const snapshot = state2.api.getState();
+    state2.subscribers.forEach((listener) => listener(snapshot));
+  };
+  const addListener2 = (node, type, handler, capture) => {
+    if (capture) {
+      node.addEventListener(type, handler, { capture: true });
+    } else {
+      node.addEventListener(type, handler);
+    }
+    const entry = { element: node, type, handler };
+    if (capture !== void 0) entry.capture = capture;
+    state2.listeners.push(entry);
+  };
+  const clearFieldCache = () => state2.fieldCache.clear();
+  const getFieldsByName = (name) => {
+    if (!state2.element) return [];
+    const fields = queryNamedFields(state2.element, name);
+    state2.fieldCache.set(name, fields);
+    return fields;
+  };
+  const getTrackedFieldNames = () => {
+    if (!state2.element) return Object.keys(state2.validators);
+    const names = new Set(Object.keys(state2.validators));
+    for (const field of getNamedFields(state2.element)) {
+      names.add(field.name);
+    }
+    for (const [canonical, entry] of state2.formattedFields) {
+      names.add(canonical);
+      if (entry.displayName && entry.displayName !== canonical) {
+        names.add(entry.displayName);
+      }
+    }
+    return Array.from(names);
+  };
+  const getValues = () => {
+    const values = {};
+    for (const name of getTrackedFieldNames()) {
+      values[name] = readFieldValue(getFieldsByName(name));
+    }
+    return values;
+  };
+  const getMergedErrors = () => mergeErrors(state2.validationErrors, state2.manualErrors);
+  const syncVisualState = (names) => {
+    if (!state2.element) return;
+    const sourceNames = names ?? getTrackedFieldNames();
+    const errors = getMergedErrors();
+    for (const name of sourceNames) {
+      const displayName = resolveDisplayNameForName(state2, name);
+      const canonical = resolveCanonicalForName(state2, name) ?? name;
+      const fields = getFieldsByName(displayName);
+      const hasError = Boolean(errors[canonical]?.length);
+      for (const field of fields) {
+        applyBooleanAttribute(field, attributes.filled, isFieldFilled(field));
+        applyBooleanAttribute(field, attributes.error, hasError);
+        if (hasError) field.setAttribute("aria-invalid", "true");
+        else field.removeAttribute("aria-invalid");
+      }
+    }
+  };
+  void readFieldValue;
+  void writeFieldValue;
+  const validateNames = (names) => {
+    const targetNames = names ?? Object.keys(state2.validators);
+    const values = getValues();
+    const nextValidationErrors = names ? cloneErrors(state2.validationErrors) : {};
+    for (const name of targetNames) {
+      const rules = state2.validators[name];
+      if (!rules) {
+        delete nextValidationErrors[name];
+        continue;
+      }
+      const messages = validateFieldValue(name, values[name], rules, values);
+      if (messages.length > 0) nextValidationErrors[name] = messages;
+      else delete nextValidationErrors[name];
+    }
+    state2.validationErrors = nextValidationErrors;
+    syncVisualState(names);
+    return {
+      isValid: Object.keys(getMergedErrors()).length === 0,
+      errors: cloneErrors(getMergedErrors())
+    };
+  };
+  const getAffectedValidationNames = (name) => {
+    const affected = [];
+    const pending = [name];
+    const visited = /* @__PURE__ */ new Set();
+    for (let index = 0; index < pending.length; index += 1) {
+      const current = pending[index];
+      if (visited.has(current)) continue;
+      visited.add(current);
+      affected.push(current);
+      for (const dependent of validationDependents.get(current) ?? []) {
+        if (!visited.has(dependent)) pending.push(dependent);
+      }
+    }
+    return affected;
+  };
+  const emitFieldWatchers = (name) => {
+    if (!state2.element || !state2.api) return;
+    const callbacks = state2.watchedFields.get(name);
+    if (!callbacks || callbacks.size === 0) return;
+    const value = state2.api.getValue(name);
+    const fieldElement = state2.api.getField(name);
+    const snapshot = state2.api.getState();
+    callbacks.forEach((callback) => callback(value, fieldElement, state2.element, snapshot));
+  };
+  const scheduleAutoSubmit = () => {
+    if (!state2.element || !state2.autoSubmitEnabled) return;
+    if (state2.autoSubmitTimer) clearTimeout(state2.autoSubmitTimer);
+    if (state2.autoSubmitDebounce > 0) {
+      state2.autoSubmitTimer = setTimeout(
+        () => submitForm(state2.element),
+        state2.autoSubmitDebounce
+      );
+      return;
+    }
+    submitForm(state2.element);
+  };
+  const helpers = {
+    notifySubscribers,
+    clearFieldCache,
+    getFieldsByName,
+    getTrackedFieldNames,
+    getValues,
+    getMergedErrors,
+    syncVisualState,
+    validateNames,
+    emitFieldWatchers,
+    scheduleAutoSubmit
+  };
+  const handleDelegatedEvent = (event) => {
+    const target2 = event.target;
+    if (!(target2 instanceof Element) || !isFieldElement(target2)) return;
+    const name = target2.name;
+    if (!name) return;
+    clearFieldCache();
+    const canonical = resolveCanonicalForName(state2, name) ?? name;
+    const displayName = resolveDisplayNameForName(state2, name);
+    if (normalizedOptions.clearManualErrorsOnChange) {
+      delete state2.manualErrors[canonical];
+    }
+    syncVisualState([displayName]);
+    const affectedValidationNames = getAffectedValidationNames(canonical);
+    if (state2.isValidated && affectedValidationNames.some((field) => state2.validators[field] !== void 0)) {
+      validateNames(affectedValidationNames);
+    }
+    emitFieldWatchers(canonical);
+    if (canonical !== name) emitFieldWatchers(name);
+    notifySubscribers();
+    scheduleAutoSubmit();
+  };
+  const handleExternalDelegatedEvent = (event) => {
+    const target2 = event.target;
+    if (!(target2 instanceof Element) || !isFieldElement(target2)) return;
+    if (target2.form !== state2.element || state2.element?.contains(target2)) return;
+    handleDelegatedEvent(event);
+  };
+  const handleSubmitEvent = (event) => {
+    if (!state2.element || state2.isDestroyed || !state2.api) return;
+    if (normalizedOptions.clearErrorsOnSubmit) state2.manualErrors = {};
+    const validation = state2.api.validate();
+    const handlers = Array.from(state2.submitHandlers);
+    const shouldPrevent = validation.isValid ? handlers.some((handler) => handler.preventDefault) : true;
+    if (shouldPrevent) event.preventDefault();
+    state2.submitCount += 1;
+    notifySubscribers();
+    if (!validation.isValid) {
+      for (const name of Object.keys(validation.errors)) {
+        const displayName = resolveDisplayNameForName(state2, name);
+        const field = getFieldsByName(displayName).find((candidate2) => {
+          if (!candidate2.isConnected || candidate2.disabled || candidate2.hidden) return false;
+          return !(candidate2 instanceof HTMLInputElement && candidate2.type === "hidden");
+        });
+        if (field) {
+          field.focus();
+          break;
+        }
+      }
+      return;
+    }
+    const candidate = event;
+    const submitter = candidate.submitter instanceof HTMLElement ? candidate.submitter : null;
+    const { data, formData } = parseFormData(state2.element, submitter);
+    const snapshot = state2.api.getState();
+    handlers.forEach(
+      (handler) => handler.callback(state2.element, data, formData, snapshot)
+    );
+  };
+  const startMutationObserver = () => {
+    if (!state2.element || typeof MutationObserver === "undefined") return;
+    state2.mutationObserver = new MutationObserver(() => {
+      clearFieldCache();
+      if (state2.isValidated) {
+        syncVisualState();
+        validateNames();
+      }
+      notifySubscribers();
+    });
+    state2.mutationObserver.observe(state2.element, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["name", "type"]
+    });
+  };
+  const api = {
+    get element() {
+      return state2.element;
+    },
+    get f() {
+      return state2.element;
+    },
+    get options() {
+      return state2.options;
+    },
+    onSubmit: createOnSubmit(state2, helpers),
+    watch: createWatch(state2, helpers),
+    observe: createObserve(state2, helpers),
+    unwatch: createUnwatch(state2, helpers),
+    subscribe: createSubscribe(state2, helpers),
+    prefill: createPrefill(state2, helpers),
+    append: createAppend(state2, helpers),
+    setErrors: createSetErrors(state2, helpers),
+    clearErrors: createClearErrors(state2, helpers),
+    setValue: createSetValue(state2, helpers),
+    getValue: createGetValue(state2, helpers),
+    getField: createGetField(state2, helpers),
+    validate: createValidate(state2, helpers),
+    revalidate: createRevalidate(state2, helpers),
+    reset: createReset(state2, helpers),
+    autoSubmit: createAutoSubmit(state2, helpers),
+    disableAutoSubmit: createDisableAutoSubmit(state2, helpers),
+    getData: createGetData(state2, helpers),
+    getState: createGetState(state2, helpers),
+    format: createFormat(state2, helpers),
+    formatAll: createFormatAll(state2, helpers),
+    destroy: createDestroy(state2, helpers)
+  };
+  state2.api = api;
+  if (state2.element) {
+    addListener2(state2.element, "input", handleDelegatedEvent);
+    addListener2(document, "input", handleExternalDelegatedEvent);
+    addListener2(state2.element, "submit", handleSubmitEvent);
+    startMutationObserver();
+  }
+  if (normalizedOptions.autoSubmit) {
+    api.autoSubmit(normalizedOptions.autoSubmit);
+  }
+  if (normalizedOptions.formats) {
+    for (const config of Object.values(normalizedOptions.formats)) {
+      api.format(config);
+    }
+  }
+  if (state2.isValidated) {
+    syncVisualState();
+    validateNames();
+  }
+  return api;
+};
+
+// src/api/form.ts
+var form = (target, options = {}) => createFormController(target, options);
+
+// src/browser/registry.ts
+var available = {};
+var newForm = (input) => {
+  const { id, options } = input;
+  if (!id) {
+    console.error("Form ID is required");
+    return;
+  }
+  available[id]?.destroy();
+  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 browser = {
+  form,
+  newForm,
+  destroyForm,
+  available
+};
+
+export {
+  parseFormData,
+  validateFieldValue,
+  validateValues,
+  createFormController,
+  form,
+  browser
+};
+//# sourceMappingURL=chunk-L4GRKSQ5.js.map