coles-solid-library 0.3.6 → 0.3.8

package/dist/components/Form/formGroup.d.ts

@@ -1,4 +1,4 @@
-import { FormGroupData, ValidationDefault } from "./formHelp/models";
+import { FormGroupData, ValidationDefault, ValidatorResult, ControlMeta } from "./formHelp/models";
 export { FormArray } from "./formHelp/formArray";
 export { Validators } from "./formHelp/validators";
 /**
@@ -11,8 +11,14 @@ export declare class FormGroup<T extends object> {
     private internalDataSignal;
     private validators;
     private errors;
+    private meta;
     private keys;
     constructor(data: FormGroupData<T>);
+    /**
+     * INTERNAL: returns the reactive internal store reference (DO NOT MUTATE outside FormGroup).
+     * Used for bridging into FormContext without triggering cloning loops.
+     */
+    _unsafeRaw(): T;
     /**
      * Gets the current form data or the value of a specific control.
      *
@@ -70,6 +76,12 @@ export declare class FormGroup<T extends object> {
      * @param hasError - Whether the error should be set or cleared
      */
     setError(key: keyof T, errKey: string, hasError: boolean): void;
+    addValidator<K extends keyof T>(key: K, validator: ValidatorResult<T[K]>): void;
+    removeValidator<K extends keyof T>(key: K, errKey: string): void;
+    getMeta<K extends keyof T>(key: K): ControlMeta<T[K]>;
+    markTouched<K extends keyof T>(key: K): void;
+    markDirty<K extends keyof T>(key: K): void;
+    reset(): void;
     /**
      * Sets a new value for a specified form control.
      *
@@ -101,6 +113,7 @@ export declare class FormGroup<T extends object> {
      * @returns `true` if the control(s) pass all validations; otherwise, `false`.
      */
     validate<K extends keyof T>(key?: K): boolean;
+    validateAsync<K extends keyof T>(key?: K): Promise<boolean>;
 }
 /**
  * Utility type to extract the element type from an array type

package/dist/components/Form/formHelp/models.d.ts

@@ -1,8 +1,9 @@
 import { JSX } from "solid-js";
 import { FormArray } from "./formArray";
 export interface ValidatorResult<T> {
-    revalidate: (val: T) => boolean;
     errKey: string;
+    revalidate: (val: T) => boolean | Promise<boolean>;
+    hide?: (val: T) => boolean;
 }
 export interface Error {
     key: string;
@@ -14,18 +15,14 @@ export type ErrorObject<T> = {
     [P in keyof T]: Error[];
 };
 export type ArrayValidation<T> = [(ValidationDefault<T, keyof T>)[], ValidatorResult<T[]>[]];
-export interface ValidatorResult<T> {
-    revalidate: (val: T) => boolean;
-    errKey: string;
-    hide?: (val: T) => boolean;
-}
-export interface Error {
-    key: string;
-    hasError: boolean;
-}
 export type ValidatorObject<T> = {
     [P in keyof T]?: ValidatorResult<T[P]>[];
 };
 export type FormGroupData<T extends object> = {
-    [P in keyof T]: [T[P], ValidatorResult<T[P]>[]] | (T[P] extends object ? FormArray<T[P]> : any);
+    [P in keyof T]: [T[P], ValidatorResult<T[P]>[]] | (T[P] extends (infer U)[] ? FormArray<U & object> : T[P] extends object ? FormArray<T[P] & object> : any);
 };
+export interface ControlMeta<T = any> {
+    touched: boolean;
+    dirty: boolean;
+    initialValue: T;
+}

package/dist/components/Form/formHelp/validators.d.ts

@@ -67,6 +67,10 @@ export declare class Validators {
      * @returns A ValidatorResult that includes the error key and a revalidation function.
      */
     static custom<T>(errKey: string, validator: (value: T) => boolean, hide?: (val: T) => boolean): ValidatorResult<T>;
+    /**
+     * Creates an async validator; resolves promise to boolean.
+     */
+    static asyncCustom<T>(errKey: string, validator: (value: T) => Promise<boolean>, hide?: (val: T) => boolean): ValidatorResult<T>;
     /**
      * A helper function that creates a ValidatorResult object.
      *

package/dist/components/Form/useFormFieldBinding.d.ts

@@ -0,0 +1,14 @@
+import { Accessor } from 'solid-js';
+export interface FieldBinding<T, K extends keyof T> {
+    value: Accessor<T[K]>;
+    setValue: (v: T[K]) => void;
+    errors: () => {
+        key: string;
+        hasError: boolean;
+    }[];
+    hasError: () => boolean;
+    touched: () => boolean;
+    dirty: () => boolean;
+    validate: () => boolean;
+}
+export declare function useFormFieldBinding<T extends object, K extends keyof T>(key: K): FieldBinding<T, K>;

package/dist/components/TextArea/TextArea.d.ts

@@ -1,7 +1,9 @@
 import { Accessor, Component, JSX, Setter } from "solid-js";
 interface Props extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
-    text: Accessor<string>;
-    setText: Setter<string>;
+    /** Optional external accessor (legacy). If omitted and inside a FormField+Form, form data is used. */
+    text?: Accessor<string>;
+    /** Optional external setter (legacy). */
+    setText?: Setter<string>;
     class?: string;
     tooltip?: string;
     transparent?: boolean;

package/dist/index.esm.js

@@ -1400,10 +1400,13 @@ const useFormContext = () => {
 };
 const Form = props => {
   const startData = props.data.get() ?? {};
+  // Custom shallow clone preserving FormArray instances (already handled in FormGroup.get)
+  const initialValue = {};
+  Object.keys(startData).forEach(k => {
+    initialValue[k] = startData[k];
+  });
   return createComponent(Provider, {
-    get value() {
-      return CloneStore(startData);
-    },
+    value: initialValue,
     get formGroup() {
       return props.data;
     },
@@ -1438,6 +1441,17 @@ const FormInner = props => {
 const Provider = props => {
   const defaultData = props.value ?? {};
   const [data, setData] = createStore(defaultData);
+  // Bridge: keep FormContext store in sync with underlying FormGroup reactive store
+  // This allows programmatic calls to formGroup.set(...) to propagate into bound fields.
+  createEffect(() => {
+    const raw = props.formGroup._unsafeRaw(); // reactive read of underlying store
+    for (const k in raw) {
+      const nextVal = raw[k];
+      if (data[k] !== nextVal) {
+        setData(k, nextVal);
+      }
+    }
+  });
   return createComponent(FormContext.Provider, {
     get value() {
       return {
@@ -1498,21 +1512,21 @@ const Input = props => {
     }
     if (props.onChange) props.onChange(e);
   };
-  createEffect(() => {
-    if (isRequired()) {
-      context?.setName?.(old => `${old} *`);
-    } else {
-      context?.setName?.(old => old);
-    }
-  });
+  // Removed name mutation adding '*' to avoid duplicating required indicator; legend handles display.
   onMount(() => {
     if (!isNullish(context.getName)) {
       // Force a non-checkbox field type
       context.setFieldType(props.type === "checkbox" ? "text" : props.type ?? "text");
       if (!isNullish(formContext?.data)) {
-        const formValue = formContext.data[context.formName ?? ""]?.trim();
-        if (formValue) {
-          context.setValue(formValue);
+        const raw = formContext.data[context.formName ?? ""];
+        if (typeof raw === 'string') {
+          const formValue = raw.trim();
+          if (formValue) {
+            context.setValue(formValue);
+            context.setTextInside(true);
+          }
+        } else if (raw !== undefined && raw !== null) {
+          context.setValue(raw);
           context.setTextInside(true);
         }
       }
@@ -1585,23 +1599,52 @@ styleInject(css_248z$d);
 var _tmpl$$h = /*#__PURE__*/template(`<label><input type=checkbox><span>`),
   _tmpl$2$9 = /*#__PURE__*/template(`<span>`);
 function Checkbox(props) {
-  // Handle controlled vs. uncontrolled state
+  const field = useFormProvider();
+  const formCtx = useFormContext();
+  const formName = field?.formName;
+  // Internal state for uncontrolled usage outside form context
   const [internalChecked, setInternalChecked] = createSignal(props.defaultChecked ?? false);
-  const checkedState = createMemo(() => props.checked !== undefined ? props.checked : internalChecked());
+  // Derive current checked state with priority: controlled prop -> form context -> field local value -> internal state
+  const checkedState = createMemo(() => {
+    if (props.checked !== undefined) return !!props.checked;
+    if (formName && formCtx?.data) return !!formCtx.data[formName];
+    if (field?.getValue) return !!field.getValue();
+    return internalChecked();
+  });
+  // Keep field/form floating states in sync if programmatic changes occur
+  createEffect(() => {
+    const c = checkedState();
+    if (formName && formCtx?.data) {
+      field?.setTextInside?.(c);
+      field?.setValue?.(c);
+    }
+  });
+  const commitValue = next => {
+    if (props.checked === undefined) {
+      if (formName && formCtx?.formGroup) {
+        formCtx.formGroup.set(formName, next);
+        formCtx.setData?.(formName, next);
+      } else if (field?.setValue) {
+        field.setValue(next);
+      } else {
+        setInternalChecked(next);
+      }
+    }
+    field?.setTextInside?.(next);
+    props.onChange?.(next);
+  };
   const handleChange = e => {
     const target = e.currentTarget;
     const newChecked = target.checked;
-    if (props.checked === undefined) {
-      setInternalChecked(newChecked);
-      props.onChange?.(newChecked);
-    } else {
-      // Controlled: prevent native state flip from persisting
+    if (props.checked !== undefined) {
+      // controlled: revert DOM change and just emit
       e.preventDefault();
-      // Re-sync DOM to prop (in case browser already toggled visually before preventDefault took effect)
       queueMicrotask(() => {
         target.checked = !!props.checked;
       });
       props.onChange?.(newChecked);
+    } else {
+      commitValue(newChecked);
     }
   };
   const handleClick = e => {
@@ -2003,6 +2046,9 @@ function Select(props) {
     }
     // store orientation for class assignment
     setDropTop(placeAbove);
+    // Compute available vertical space for dropdown and clamp to a sensible minimum
+    const availableSpace = (placeAbove ? spaceAbove : spaceBelow) - VIEWPORT_MARGIN;
+    const maxHeight = Math.max(160, availableSpace); // ensure at least 160px so a few options are visible
     let newY;
     if (!placeAbove) {
       newY = baseRect.bottom + window.scrollY; // default below
@@ -2024,6 +2070,7 @@ function Select(props) {
     dropdown.style.left = `${newX}px`;
     dropdown.style.top = `${newY}px`;
     dropdown.style.width = `${baseRect.width}px`;
+    dropdown.style.maxHeight = `${maxHeight}px`;
   };
   // Update width of select to match option text width
   createEffect(() => {
@@ -2122,7 +2169,6 @@ function Select(props) {
     selectStyle: currStyle
   }));
   const [dropTop, setDropTop] = createSignal(false);
-  console.log("Select rendered with options:", options);
   return (() => {
     var _el$7 = _tmpl$5$1(),
       _el$8 = _el$7.firstChild,
@@ -2176,7 +2222,6 @@ function Select(props) {
           get children() {
             var _el$12 = _tmpl$4$1();
             use(setDropdownRef, _el$12);
-            _el$12.style.setProperty("max-height", "calc(100vh - 8px)");
             insert(_el$12, () => props.children);
             createRenderEffect(_p$ => {
               var _v$ = `${styles$7['solid_select__dropdown']} ${dropTop() ? styles$7.dropTop : styles$7.dropBottom} ${open() ? styles$7.open : ''} ${props.dropdownClass || ""}`,
@@ -2299,7 +2344,6 @@ function Option(props) {
     const contextSuccess = selectFormContextValue(props.value);
     !contextSuccess ? selectFormFieldValue(props.value) : true;
     if (!formField?.getName?.()) {
-      console.log('selected!', props.value, select);
       select.selectValue?.(props.value);
       formField?.setFocused?.(true);
     }
@@ -2344,76 +2388,101 @@ var _tmpl$$e = /*#__PURE__*/template(`<textarea>`);
 const TextArea = props => {
   let myElement;
   const [customProps, normalProps] = splitProps(props, ["minSize", "text", "setText", "class", "tooltip", "transparent"]);
-  const context = useFormProvider();
-  /**
-     * Function to set the height of the textarea based on the content
-     */
-  function OnInput() {
-    if (myElement) {
-      myElement.style.height = 'auto';
-      const minHeight = customProps.minSize?.height ?? 100;
-      const currentHeight = myElement.scrollHeight < minHeight ? minHeight : myElement.scrollHeight;
-      myElement.style.height = `${currentHeight}px`;
-      myElement.setAttribute("style", "height:" + currentHeight + "px;overflow-y:hidden;");
-    }
+  const fieldCtx = useFormProvider();
+  const formCtx = useFormContext();
+  const formName = fieldCtx?.formName;
+  // Internal state only used when not provided externally and not in form context.
+  const [internal, setInternal] = createSignal(customProps.text ? customProps.text() : "");
+  // Determine current value priority: FormGroup -> external accessor -> internal state
+  const areaValue = createMemo(() => {
+    if (formName && formCtx?.data && !isNullish(formCtx.data[formName])) {
+      return formCtx.data[formName];
+    }
+    if (customProps.text) return customProps.text();
+    return internal();
+  });
+  function resizeToContent() {
+    if (!myElement) return;
+    myElement.style.height = 'auto';
+    const minHeight = customProps.minSize?.height ?? 100;
+    const currentHeight = Math.max(minHeight, myElement.scrollHeight);
+    myElement.style.height = `${currentHeight}px`;
+    myElement.style.overflowY = 'hidden';
   }
-  // sets the field type on mount and sets the height of the textarea
+  // Set field type & initial floating state
   onMount(() => {
-    OnInput();
-    context?.setFieldType("textarea");
+    resizeToContent();
+    fieldCtx?.setFieldType?.('textarea');
+    if (formName && formCtx?.data) {
+      const v = formCtx.data[formName];
+      if (!isNullish(v) && String(v).trim() !== '') {
+        fieldCtx?.setValue?.(v);
+        fieldCtx?.setTextInside?.(true);
+      } else {
+        fieldCtx?.setTextInside?.(false);
+      }
+    } else if (customProps.text) {
+      const v = customProps.text();
+      fieldCtx?.setTextInside?.(!(v === undefined || v === null || v.trim() === ''));
+    }
   });
-  // updates height of textarea when text is changed
-  createRenderEffect(() => {
-    OnInput();
-    customProps.text();
+  // React to programmatic FormGroup.set changes
+  createEffect(() => {
+    if (formName && formCtx?.data) {
+      const v = formCtx.data[formName];
+      // keep internal state aligned if unmanaged
+      if (!customProps.text && internal() !== v) setInternal(String(v ?? ''));
+      if (fieldCtx) {
+        const has = !(v === undefined || v === null || typeof v === 'string' && v.trim() === '');
+        fieldCtx.setTextInside(has);
+        fieldCtx.setValue?.(v);
+      }
+    }
   });
+  // Resize whenever value changes (user or programmatic)
   createEffect(() => {
-    if (Object.keys(props).includes("required") || props?.required === true) {
-      context?.setName(old => `${old} *`);
+    areaValue();
+    queueMicrotask(resizeToContent);
+  });
+  const handleInput = e => {
+    const newVal = e.currentTarget.value;
+    // Update whichever source is active
+    if (formName && formCtx?.formGroup) {
+      formCtx.formGroup.set(formName, newVal);
+      formCtx.setData?.(formName, newVal);
+    } else if (customProps.setText) {
+      customProps.setText(newVal);
     } else {
-      context?.setName(old => old);
+      setInternal(newVal);
     }
-  });
+    if (fieldCtx) {
+      fieldCtx.setValue?.(newVal);
+      fieldCtx.setTextInside?.(newVal.trim().length > 0);
+    }
+    resizeToContent();
+  };
   return (() => {
     var _el$ = _tmpl$$e();
     use(el => {
       myElement = el;
-      OnInput();
+      resizeToContent();
     }, _el$);
     spread(_el$, mergeProps(normalProps, {
-      "onFocus": e => {
-        if (!isNullish(context?.getName)) {
-          context?.setFocused(true);
-        }
-      },
-      "onBlur": e => {
-        if (context?.setFocused) {
-          context?.setFocused(false);
-        }
-      },
-      get placeholder() {
-        return !!context?.getName && context?.getTextInside() && !context?.getFocused() ? "" : props.placeholder;
+      get value() {
+        return areaValue();
       },
       get ["class"]() {
-        return `${style$4.areaStyle} ${customProps.class ?? ""} ${customProps.transparent ? customProps.transparent : ""}`;
+        return `${style$4.areaStyle} ${customProps.class ?? ''} ${customProps.transparent ? customProps.transparent : ''}`;
       },
-      get value() {
-        return customProps.text();
-      },
-      "onInput": e => {
-        customProps.setText(e.currentTarget.value);
-        OnInput();
-        if (!!context?.getName && !!e.currentTarget.value.trim()) {
-          context?.setValue(e.currentTarget.value);
-          context?.setTextInside(true);
-        } else if (!!context.getName && !e.currentTarget.value.trim()) {
-          context?.setValue("");
-          context?.setTextInside(false);
-        }
+      get placeholder() {
+        return fieldCtx?.getTextInside?.() && !fieldCtx?.getFocused?.() ? '' : props.placeholder;
       },
       get title() {
         return customProps.tooltip;
-      }
+      },
+      "onInput": handleInput,
+      "onFocus": () => fieldCtx?.setFocused?.(true),
+      "onBlur": () => fieldCtx?.setFocused?.(false)
     }), false, false);
     return _el$;
   })();
@@ -3000,11 +3069,21 @@ function RadioGroup(props) {
   radioGroupCount++;
   const groupName = props.name ?? `radio-group-${radioGroupCount}`;
   const [internalValue, setInternalValue] = createSignal(props.defaultValue);
+  const formField = useFormProvider();
+  const formContext = useFormContext();
   const selectedValue = () => props.value !== undefined ? props.value : internalValue();
   const setSelectedValue = val => {
     if (props.value === undefined) {
       setInternalValue(val);
     }
+    // Bridge to FormGroup if inside a FormField with formName
+    if (formField?.formName && formContext?.formGroup?.set) {
+      formContext.formGroup.set(formField.formName, val);
+      formContext.setData(old => ({
+        ...old,
+        [formField.formName]: val
+      }));
+    }
     props.onChange?.(val);
   };
   const radioRefs = [];
@@ -3450,39 +3529,47 @@ class FormArray {
     }
     // Validate all controls in the form array.
     if (isNullish(index)) {
-      const cleanValue = val => {
-        if (isNullish(val)) {
-          return [];
-        } else if (Array.isArray(val)) {
-          return val;
-        } else {
-          return [val];
-        }
-      };
-      this.errors = cleanValue(values).map((value, i) => {
-        const errors = this.internalValidation.map(([_, validators]) => {
+      // Always evaluate array-level validators even if the array is empty
+      const arrayLevelErrors = this.internalArrayValidation.map(validator => ({
+        key: validator.errKey,
+        hasError: !validator.revalidate(values)
+      }));
+      if (values.length === 0) {
+        this.errors = [arrayLevelErrors]; // store array-level errors at index 0 placeholder
+        return this.errors.flat().every(error => !error.hasError);
+      }
+      this.errors = values.map((value, i) => {
+        const controlErrors = this.internalValidation.map(([propKey, validators]) => {
+          const currentVal = value[propKey];
           return validators.map(validator => ({
             key: validator.errKey,
-            hasError: !validator.revalidate(value)
+            hasError: !validator.revalidate(currentVal)
           }));
         });
         const arrayErrors = this.internalArrayValidation.map(validator => ({
           key: validator.errKey,
           hasError: !validator.revalidate(values)
         }));
-        this.errors[i] = [...errors.flat(), ...arrayErrors];
-        return [...errors.flat(), ...arrayErrors];
+        const merged = [...controlErrors.flat(), ...arrayErrors];
+        this.errors[i] = merged;
+        return merged;
       });
       return this.errors.flat().every(error => !error.hasError);
     }
     // Validate a specific control in the form array.
-    const errors = this.internalValidation.map(([_, validators]) => {
+    const value = values[index];
+    const controlErrors = this.internalValidation.map(([propKey, validators]) => {
+      const currentVal = value[propKey];
       return validators.map(validator => ({
         key: validator.errKey,
-        hasError: !validator.revalidate(values[index])
+        hasError: !validator.revalidate(currentVal)
       }));
     });
-    this.errors[index] = errors.flat();
+    const arrayErrors = this.internalArrayValidation.map(validator => ({
+      key: validator.errKey,
+      hasError: !validator.revalidate(values)
+    }));
+    this.errors[index] = [...controlErrors.flat(), ...arrayErrors];
     return this.errors[index].every(error => !error.hasError);
   }
 }
@@ -3529,15 +3616,16 @@ const FormField2 = props => {
   });
   const theChildren = children(() => props.children);
   const formErrors = () => {
-    const allErrors = (formContext?.formGroup.getErrors(local?.formName ?? '') ?? []).filter(error => error.hasError);
+    if (!local?.formName) return [];
+    const allErrors = (formContext?.formGroup.getErrors(local.formName) ?? []).filter(e => e.hasError);
     if (allErrors.length === 0) return [];
-    let errKeys = allErrors.map(error => error.key);
-    // test just require
+    let errKeys = allErrors.map(e => e.key);
     if (errKeys.includes('required')) {
-      errKeys = errKeys.filter(err => err !== 'minLength' && err !== 'maxLength');
+      errKeys = errKeys.filter(k => k !== 'minLength' && k !== 'maxLength');
     }
-    //---
-    return context?.getErrors?.().err.filter(err => errKeys.includes(err.key));
+    // Map to displays stored in context errors (ColeError registered displays) if available
+    const displayMap = context?.getErrors?.().err ?? [];
+    return displayMap.filter(e => errKeys.includes(e.key));
   };
   const hasRequired = createMemo(() => {
     if (isNullish(local?.formName)) return false;
@@ -3746,7 +3834,13 @@ class Validators {
    * @returns A ValidatorResult that includes the error key and a revalidation function.
    */
   static custom(errKey, validator, hide) {
-    return this.createValidatorResult(errKey, validator);
+    return this.createValidatorResult(errKey, validator, hide);
+  }
+  /**
+   * Creates an async validator; resolves promise to boolean.
+   */
+  static asyncCustom(errKey, validator, hide) {
+    return this.createValidatorResult(errKey, validator, hide);
   }
   /**
    * A helper function that creates a ValidatorResult object.
@@ -3777,6 +3871,7 @@ class FormGroup {
   internalDataSignal;
   validators = {};
   errors;
+  meta = {};
   keys = [];
   constructor(data) {
     this.data = data;
@@ -3787,11 +3882,8 @@ class FormGroup {
       const value = data[key];
       this.keys.push(key);
       if (value instanceof FormArray) {
-        // If the value is a FormArray, store it directly.
-        // We need to ensure that when T[key] is an array type, we store the array returned by FormArray
-        newData[key] = value.get();
+        newData[key] = value;
       } else {
-        // Otherwise, initialize the data, validators, and errors for the control.
         newData[key] = value[0];
         newValidators[key] = value[1];
         newErrors[key] = value[1].map(validator => ({
@@ -3799,13 +3891,38 @@ class FormGroup {
           hasError: false
         }));
       }
+      const initialVal = value instanceof FormArray ? value.get() : CloneStore(newData[key]);
+      this.meta[key] = {
+        touched: false,
+        dirty: false,
+        initialValue: initialVal
+      };
     }
     this.internalDataSignal = createStore(newData);
     this.validators = newValidators;
     this.errors = createSignal(newErrors);
   }
+  /**
+   * INTERNAL: returns the reactive internal store reference (DO NOT MUTATE outside FormGroup).
+   * Used for bridging into FormContext without triggering cloning loops.
+   */
+  _unsafeRaw() {
+    return this.internalDataSignal[0];
+  }
   get(key) {
-    if (!key) return CloneStore(this.internalDataSignal[0]);
+    if (!key) {
+      // Custom clone that preserves FormArray instances (structuredClone fails on functions inside)
+      const clone = {};
+      for (const k of this.keys) {
+        const val = this.internalDataSignal[0][k];
+        if (val instanceof FormArray) {
+          clone[k] = val; // keep reference; consumer methods operate on instance
+        } else {
+          clone[k] = CloneStore(val);
+        }
+      }
+      return clone;
+    }
     // If the control is a FormArray, use its get method
     if (this.internalDataSignal[0][key] instanceof FormArray) {
       // Return the array from FormArray.get() as the expected type T[K]
@@ -3885,16 +4002,56 @@ class FormGroup {
    * @param hasError - Whether the error should be set or cleared
    */
   setError(key, errKey, hasError) {
-    if (this.internalDataSignal[0][key] instanceof FormArray) {
-      // Not supported for FormArray - errors are managed internally
-      return;
-    }
-    const errorIndex = this.errors[0]()[key]?.findIndex(error => error.key === errKey);
-    if (errorIndex !== -1) {
-      this.errors[1](old => {
-        old[key][errorIndex].hasError = hasError;
-        return Clone(old);
+    if (this.internalDataSignal[0][key] instanceof FormArray) return;
+    const current = this.errors[0]();
+    const list = current[key] ?? [];
+    let index = list.findIndex(e => e.key === errKey);
+    if (index === -1) {
+      list.push({
+        key: errKey,
+        hasError
       });
+    } else {
+      list[index].hasError = hasError;
+    }
+    current[key] = list;
+    this.errors[1](() => Clone(current));
+  }
+  addValidator(key, validator) {
+    if (!this.validators[key]) this.validators[key] = [];
+    this.validators[key].push(validator);
+    this.setError(key, validator.errKey, false);
+  }
+  removeValidator(key, errKey) {
+    if (!this.validators[key]) return;
+    this.validators[key] = this.validators[key].filter(v => v.errKey !== errKey);
+    const current = this.errors[0]();
+    if (current[key]) {
+      current[key] = current[key].filter(e => e.key !== errKey);
+      this.errors[1](() => Clone(current));
+    }
+  }
+  getMeta(key) {
+    return this.meta[key];
+  }
+  markTouched(key) {
+    this.meta[key].touched = true;
+  }
+  markDirty(key) {
+    this.meta[key].dirty = true;
+  }
+  reset() {
+    for (const k of this.keys) {
+      const m = this.meta[k];
+      this.set(k, CloneStore(m.initialValue));
+      m.touched = false;
+      m.dirty = false;
+      const errs = this.errors[0]();
+      errs[k] = errs[k]?.map(e => ({
+        ...e,
+        hasError: false
+      }));
+      this.errors[1](() => Clone(errs));
     }
   }
   /**
@@ -3915,6 +4072,11 @@ class FormGroup {
       ...old,
       [key]: value
     }));
+    const m = this.meta[key];
+    if (m) {
+      if (!m.touched) m.touched = true;
+      if (!m.dirty && JSON.stringify(m.initialValue) !== JSON.stringify(value)) m.dirty = true;
+    }
   }
   /**
    * Adds an item to a FormArray control
@@ -3949,28 +4111,62 @@ class FormGroup {
    */
   validate(key) {
     if (isNullish(this.internalDataSignal?.[0])) {
-      console.error('Data is null');
+      if (process?.env?.NODE_ENV !== 'production') console.error('Data is null');
       return false;
     }
     if (!key) {
       const results = this.keys.map(k => this.validate(k));
-      return results.every(result => result);
+      return results.every(Boolean);
     }
     if (this.internalDataSignal?.[0]?.[key] instanceof FormArray) {
       return this.internalDataSignal[0][key].validateCurrent();
     }
     const validators = this.validators[key];
     if (!validators) return true;
-    return !validators.map(validator => {
-      const hasError = !validator.revalidate(this.internalDataSignal[0][key]);
-      const toHide = validator.hide?.(this.internalDataSignal[0][key]);
-      if (toHide) {
-        this.setError(key, validator.errKey, false);
-        return true;
+    let allValid = true;
+    for (const validator of validators) {
+      try {
+        const result = validator.revalidate(this.internalDataSignal[0][key]);
+        const isPromise = typeof result?.then === 'function';
+        const resolved = isPromise ? true : result; // optimistic until async handled via validateAsync
+        const toHide = validator.hide?.(this.internalDataSignal[0][key]);
+        if (toHide) {
+          this.setError(key, validator.errKey, false);
+        } else {
+          this.setError(key, validator.errKey, !resolved);
+          if (!resolved) allValid = false;
+        }
+      } catch (e) {
+        if (process?.env?.NODE_ENV !== 'production') console.warn('Validator threw', validator.errKey, e);
+        this.setError(key, validator.errKey, true);
+        allValid = false;
       }
-      this.setError(key, validator.errKey, hasError);
-      return !hasError;
-    }).includes(false);
+    }
+    return allValid;
+  }
+  async validateAsync(key) {
+    if (!key) {
+      const results = await Promise.all(this.keys.map(k => this.validateAsync(k)));
+      return results.every(Boolean);
+    }
+    if (this.internalDataSignal?.[0]?.[key] instanceof FormArray) {
+      return this.internalDataSignal[0][key].validateCurrent();
+    }
+    const validators = this.validators[key];
+    if (!validators) return true;
+    let allValid = true;
+    for (const validator of validators) {
+      try {
+        const res = await validator.revalidate(this.internalDataSignal[0][key]);
+        const toHide = validator.hide?.(this.internalDataSignal[0][key]);
+        if (toHide) this.setError(key, validator.errKey, false);else this.setError(key, validator.errKey, !res);
+        if (!res && !toHide) allValid = false;
+      } catch {
+        this.setError(key, validator.errKey, true);
+        allValid = false;
+      }
+    }
+    return allValid;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coles-solid-library",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "A SolidJS mostly UI library",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",