@rezi-ui/core 0.1.0-alpha.60 → 0.1.0-alpha.63

package/dist/forms/useForm.js

@@ -7,312 +7,27 @@
  *
  * @see docs/recipes/form-validation.md (GitHub issue #119)
  */
-import { ui } from "../widgets/ui.js";
-import { DEFAULT_ASYNC_DEBOUNCE_MS, createDebouncedAsyncValidator, isValidationClean, mergeValidationErrors, runAsyncValidation, runFieldValidation, runSyncValidation, } from "./validation.js";
-const NODE_ENV = globalThis.process?.env?.NODE_ENV ??
-    "development";
-const DEV_MODE = NODE_ENV !== "production";
-function warnDev(message) {
-    if (!DEV_MODE)
-        return;
-    const c = globalThis.console;
-    c?.warn?.(message);
-}
-function formatErrorForDev(error) {
-    if (error instanceof Error) {
-        return `${error.name}: ${error.message}`;
-    }
-    try {
-        return String(error);
-    }
-    catch {
-        return "[unstringifiable thrown value]";
-    }
-}
-function cloneInitialValues(values) {
-    return structuredClone(values);
-}
-/**
- * Clamp step index to available wizard range.
- */
-function clampStepIndex(stepIndex, stepCount) {
-    if (stepCount <= 0) {
-        return 0;
-    }
-    if (stepIndex < 0) {
-        return 0;
-    }
-    if (stepIndex >= stepCount) {
-        return stepCount - 1;
-    }
-    return stepIndex;
-}
-/**
- * Create initial form state from options.
- */
-function createInitialState(options) {
-    const stepCount = options.wizard?.steps.length ?? 0;
-    const initialStep = clampStepIndex(options.wizard?.initialStep ?? 0, stepCount);
-    if (DEV_MODE) {
-        const valueKeys = new Set(Object.keys(options.initialValues));
-        if (options.fieldDisabled) {
-            for (const key of Object.keys(options.fieldDisabled)) {
-                if (!valueKeys.has(key)) {
-                    warnDev(`[rezi] useForm: fieldDisabled key "${key}" does not exist in initialValues`);
-                }
-            }
-        }
-        if (options.fieldReadOnly) {
-            for (const key of Object.keys(options.fieldReadOnly)) {
-                if (!valueKeys.has(key)) {
-                    warnDev(`[rezi] useForm: fieldReadOnly key "${key}" does not exist in initialValues`);
-                }
-            }
-        }
-    }
-    return {
-        values: cloneInitialValues(options.initialValues),
-        errors: {},
-        touched: {},
-        dirty: {},
-        isSubmitting: false,
-        submitError: undefined,
-        submitCount: 0,
-        disabled: options.disabled ?? false,
-        readOnly: options.readOnly ?? false,
-        fieldDisabled: {
-            ...(options.fieldDisabled ?? {}),
-        },
-        fieldReadOnly: {
-            ...(options.fieldReadOnly ?? {}),
-        },
-        currentStep: initialStep,
-    };
-}
-/**
- * Compute dirty array flags by position.
- */
-function computeArrayFieldDirty(currentValue, initialValue) {
-    if (currentValue.length !== initialValue.length) {
-        return true;
-    }
-    const dirty = [];
-    for (let i = 0; i < currentValue.length; i++) {
-        dirty.push(!Object.is(currentValue[i], initialValue[i]));
-    }
-    return dirty;
-}
-/**
- * Compute dirty status for a field by comparing current value to initial.
- */
-function computeFieldDirty(field, currentValue, initialValues) {
-    const initialValue = initialValues[field];
-    if (Array.isArray(currentValue) && Array.isArray(initialValue)) {
-        return computeArrayFieldDirty(currentValue, initialValue);
-    }
-    return !Object.is(currentValue, initialValue);
-}
-/**
- * Check if a field-level dirty/touched flag contains any true value.
- */
-function hasTruthyBooleanValue(value) {
-    if (value === true) {
-        return true;
-    }
-    if (!Array.isArray(value)) {
-        return false;
-    }
-    for (const item of value) {
-        if (item === true) {
-            return true;
-        }
-    }
-    return false;
-}
-function toInputValue(value) {
-    if (value === null || value === undefined) {
-        return "";
-    }
-    return String(value);
-}
-function isTextBindableValue(value) {
-    return value === null || value === undefined || typeof value === "string";
-}
-function toFieldErrorString(value) {
-    if (typeof value === "string") {
-        return value.length > 0 ? value : undefined;
-    }
-    if (!Array.isArray(value)) {
-        return undefined;
-    }
-    for (const item of value) {
-        if (item !== undefined && item.length > 0) {
-            return item;
-        }
-    }
-    return undefined;
-}
-function isPromiseLike(value) {
-    return (typeof value === "object" &&
-        value !== null &&
-        "then" in value &&
-        typeof value.then === "function");
-}
-/**
- * Compute overall dirty status from dirty map.
- */
-function computeIsDirty(dirty) {
-    const keys = Object.keys(dirty);
-    for (const key of keys) {
-        if (hasTruthyBooleanValue(dirty[key])) {
-            return true;
-        }
-    }
-    return false;
-}
-/**
- * Normalize per-field boolean map value to an array.
- */
-function normalizeBooleanArray(value, size, defaultValue) {
-    if (Array.isArray(value)) {
-        const next = value.slice(0, size);
-        while (next.length < size) {
-            next.push(defaultValue);
-        }
-        return next;
-    }
-    if (value === true || value === false) {
-        return Array.from({ length: size }, () => value);
-    }
-    return Array.from({ length: size }, () => defaultValue);
-}
-/**
- * Normalize per-field error map value to an array.
- */
-function normalizeErrorArray(value, size) {
-    if (Array.isArray(value)) {
-        const next = value.slice(0, size);
-        while (next.length < size) {
-            next.push(undefined);
-        }
-        return next;
-    }
-    return Array.from({ length: size }, () => undefined);
-}
-function removeAtIndex(value, index) {
-    const next = [...value];
-    next.splice(index, 1);
-    return next;
-}
-function moveIndex(value, from, to) {
-    const next = [...value];
-    const [moved] = next.splice(from, 1);
-    if (moved === undefined) {
-        return next;
-    }
-    next.splice(to, 0, moved);
-    return next;
-}
-/**
- * Merge per-step errors into global error state.
- */
-function mergeStepErrors(prevErrors, stepFields, stepErrors) {
-    const nextErrors = { ...prevErrors };
-    for (const field of stepFields) {
-        nextErrors[field] = undefined;
-    }
-    const stepErrorKeys = Object.keys(stepErrors);
-    for (const field of stepErrorKeys) {
-        nextErrors[field] = stepErrors[field];
-    }
-    return nextErrors;
-}
-/**
- * Pick a subset of validation errors by field list.
- */
-function pickValidationFields(errors, fields) {
-    const selected = {};
-    for (const field of fields) {
-        const value = errors[field];
-        if (value !== undefined) {
-            selected[field] = value;
-        }
-    }
-    return selected;
-}
-function clearValidationFields(errors, fields) {
-    if (fields.length === 0) {
-        return errors;
-    }
-    const nextErrors = { ...errors };
-    for (const field of fields) {
-        nextErrors[field] = undefined;
-    }
-    return nextErrors;
-}
-function resolveFieldOverride(field, formFlag, fieldOverrides) {
-    const override = fieldOverrides[field];
-    if (override === undefined) {
-        return formFlag;
-    }
-    return override;
-}
-function setFieldOverride(fieldOverrides, field, value) {
-    const next = { ...fieldOverrides };
-    if (value === undefined) {
-        delete next[field];
-    }
-    else {
-        next[field] = value;
-    }
-    return next;
-}
-function markFieldsTouched(prevTouched, values, fields) {
-    const nextTouched = {
-        ...prevTouched,
-    };
-    for (const field of fields) {
-        const value = values[field];
-        if (Array.isArray(value)) {
-            nextTouched[field] = value.map(() => true);
-        }
-        else {
-            nextTouched[field] = true;
-        }
-    }
-    return nextTouched;
-}
-function getArrayFieldValues(values, field) {
-    const raw = values[field];
-    if (!Array.isArray(raw)) {
-        return [];
-    }
-    return [...raw];
-}
-function nextFieldArrayKey(field, counterRef) {
-    const next = counterRef.current;
-    counterRef.current += 1;
-    return `${field}_${next}`;
-}
+import { createFieldArrayApi } from "./internal/arrayState.js";
+import { createFieldBindings } from "./internal/bindings.js";
+import { cloneInitialValues, computeIsDirty, createFormFlagActions, createFormStateAccessors, createInitialState, } from "./internal/state.js";
+import { createResetAction, createSubmitAction } from "./internal/submit.js";
+import { clampStepIndex, createWizardActions, runWizardStepValidation } from "./internal/wizard.js";
+import { DEFAULT_ASYNC_DEBOUNCE_MS, createDebouncedAsyncValidator, isValidationClean, mergeValidationErrors, } from "./validation.js";
 /**
  * Form management hook for Rezi widgets.
  */
 export function useForm(ctx, options) {
-    // Store form state using widget's useState hook
     const [state, setState] = ctx.useState(() => createInitialState(options));
     const stateRef = ctx.useRef(state);
     stateRef.current = state;
-    // Store initial values in a ref for dirty comparison
     const initialValuesRef = ctx.useRef(cloneInitialValues(options.initialValues));
-    // Store async validator reference
     const asyncValidatorRef = ctx.useRef(undefined);
-    // Ref to safely pass values from setState callback to async validation
     const pendingAsyncValuesRef = ctx.useRef(null);
     const submittingRef = ctx.useRef(false);
+    const submitAttemptRef = ctx.useRef(0);
     const validateRef = ctx.useRef(options.validate);
     validateRef.current = options.validate;
     const nonTextBindingWarningsRef = ctx.useRef(new Set());
-    // Stable key tracking for array fields
     const fieldArrayKeysRef = ctx.useRef({});
     const fieldArrayKeyCounterRef = ctx.useRef(0);
     const updateFormState = (nextState) => {
@@ -330,128 +45,21 @@ export function useForm(ctx, options) {
     const currentStep = hasWizard ? clampStepIndex(state.currentStep, stepCount) : 0;
     const isFirstStep = !hasWizard || currentStep === 0;
     const isLastStep = !hasWizard || currentStep === stepCount - 1;
-    const isFieldDisabledInternal = (field, source = stateRef.current) => resolveFieldOverride(field, source.disabled, source.fieldDisabled);
-    const isFieldReadOnlyInternal = (field, source = stateRef.current) => resolveFieldOverride(field, source.readOnly, source.fieldReadOnly);
-    const isFieldEditableInternal = (field, source = stateRef.current) => !isFieldDisabledInternal(field, source) && !isFieldReadOnlyInternal(field, source);
-    const filterDisabledValidationErrors = (errors, source = stateRef.current) => {
-        const keys = Object.keys(errors);
-        if (keys.length === 0) {
-            return errors;
-        }
-        const nextErrors = { ...errors };
-        for (const key of keys) {
-            if (isFieldDisabledInternal(key, source)) {
-                nextErrors[key] = undefined;
-            }
-        }
-        return nextErrors;
-    };
-    const runSyncValidationFiltered = (values, source = stateRef.current) => filterDisabledValidationErrors(runSyncValidation(values, validateRef.current), source);
-    const runAsyncValidationFiltered = async (values, source = stateRef.current) => filterDisabledValidationErrors(await runAsyncValidation(values, options.validateAsync), source);
-    const getStep = (stepIndex) => {
-        if (!hasWizard) {
-            return undefined;
-        }
-        const resolvedStep = clampStepIndex(stepIndex, stepCount);
-        return wizardSteps[resolvedStep];
-    };
-    const getStepFields = (step, values) => {
-        if (step?.fields && step.fields.length > 0) {
-            return [...step.fields];
-        }
-        return Object.keys(values);
-    };
-    const getWizardTransitionSteps = (fromStep, toStepExclusive, values) => {
-        const steps = [];
-        for (let stepIndex = fromStep; stepIndex < toStepExclusive; stepIndex++) {
-            steps.push(Object.freeze({
-                stepIndex,
-                fields: getStepFields(getStep(stepIndex), values),
-            }));
-        }
-        return Object.freeze(steps);
-    };
-    const runWizardStepValidation = (values, stepIndex, source = stateRef.current) => {
-        const step = getStep(stepIndex);
-        if (!step) {
-            return {};
-        }
-        const stepFields = getStepFields(step, values);
-        const syncStepErrors = pickValidationFields(runSyncValidationFiltered(values, source), stepFields);
-        if (!step.validate) {
-            return mergeValidationErrors(syncStepErrors, pickValidationFields(filterDisabledValidationErrors(source.errors, source), stepFields));
-        }
-        const customStepErrors = filterDisabledValidationErrors(pickValidationFields(step.validate(values), stepFields), source);
-        return mergeValidationErrors(mergeValidationErrors(syncStepErrors, customStepErrors), pickValidationFields(filterDisabledValidationErrors(source.errors, source), stepFields));
-    };
-    const resolveWizardTransition = (values, transitionSteps, source, asyncErrors) => {
-        let mergedErrors = source.errors;
-        for (const transitionStep of transitionSteps) {
-            const baseStepErrors = runWizardStepValidation(values, transitionStep.stepIndex, {
-                ...source,
-                errors: mergedErrors,
-            });
-            const stepErrors = asyncErrors === undefined
-                ? baseStepErrors
-                : mergeValidationErrors(baseStepErrors, pickValidationFields(asyncErrors, transitionStep.fields));
-            if (!isValidationClean(stepErrors)) {
-                return Object.freeze({
-                    blockedFields: transitionStep.fields,
-                    mergedErrors: mergeStepErrors(mergedErrors, transitionStep.fields, stepErrors),
-                    touched: markFieldsTouched(source.touched, values, transitionStep.fields),
-                });
-            }
-            mergedErrors = clearValidationFields(mergedErrors, transitionStep.fields);
-        }
-        return null;
-    };
-    const warnUnsupportedTextBinding = (field) => {
-        if (!DEV_MODE)
-            return;
-        const fieldKey = String(field);
-        if (nonTextBindingWarningsRef.current.has(fieldKey))
-            return;
-        nonTextBindingWarningsRef.current.add(fieldKey);
-        warnDev(`[rezi] useForm: bind/field only support string-compatible fields; "${fieldKey}" is not safely bindable to ui.input().`);
-    };
-    const canBindFieldAsText = (field, values) => isTextBindableValue(values[field]) && isTextBindableValue(initialValuesRef.current[field]);
-    const ensureFieldArrayKeys = (field, length) => {
-        const existing = [...(fieldArrayKeysRef.current[field] ?? [])];
-        if (existing.length > length) {
-            existing.length = length;
-        }
-        while (existing.length < length) {
-            existing.push(nextFieldArrayKey(String(field), fieldArrayKeyCounterRef));
-        }
-        fieldArrayKeysRef.current[field] = existing;
-        return existing;
-    };
-    const appendFieldArrayKey = (field) => {
-        const existing = [...(fieldArrayKeysRef.current[field] ?? [])];
-        existing.push(nextFieldArrayKey(String(field), fieldArrayKeyCounterRef));
-        fieldArrayKeysRef.current[field] = existing;
-    };
-    const removeFieldArrayKey = (field, index) => {
-        const existing = [...(fieldArrayKeysRef.current[field] ?? [])];
-        if (index < 0 || index >= existing.length) {
-            return;
-        }
-        existing.splice(index, 1);
-        fieldArrayKeysRef.current[field] = existing;
-    };
-    const moveFieldArrayKey = (field, from, to) => {
-        const existing = [...(fieldArrayKeysRef.current[field] ?? [])];
-        if (from < 0 || to < 0 || from >= existing.length || to >= existing.length || from === to) {
-            return;
-        }
-        const [moved] = existing.splice(from, 1);
-        if (moved === undefined) {
-            return;
-        }
-        existing.splice(to, 0, moved);
-        fieldArrayKeysRef.current[field] = existing;
-    };
-    // Initialize or update async validator when options change
+    const { isFieldDisabledInternal, isFieldReadOnlyInternal, isFieldEditableInternal, filterDisabledValidationErrors, runSyncValidationFiltered, runAsyncValidationFiltered, warnUnsupportedTextBinding, canBindFieldAsText, } = createFormStateAccessors({
+        stateRef,
+        initialValuesRef,
+        validateRef,
+        validateAsync: options.validateAsync,
+        nonTextBindingWarningsRef,
+    });
+    const runWizardStepValidationForState = (values, stepIndex, source = stateRef.current) => runWizardStepValidation({
+        values,
+        stepIndex,
+        wizardSteps,
+        source,
+        runSyncValidationFiltered,
+        filterDisabledValidationErrors,
+    });
     ctx.useEffect(() => {
         if (options.validateAsync) {
             asyncValidatorRef.current = createDebouncedAsyncValidator(options.validateAsync, options.validateAsyncDebounce ?? DEFAULT_ASYNC_DEBOUNCE_MS, (asyncErrors) => {
@@ -466,709 +74,74 @@ export function useForm(ctx, options) {
         }
         return undefined;
     }, [options.validateAsync, options.validateAsyncDebounce]);
-    // Compute derived state
     const isValid = isValidationClean(state.errors);
     const isDirty = computeIsDirty(state.dirty);
-    /**
-     * Validate form and update errors.
-     */
-    const validateForm = () => {
-        const snapshot = stateRef.current;
-        const errors = runSyncValidationFiltered(snapshot.values, snapshot);
-        updateFormState((prev) => ({
-            ...prev,
-            errors,
-        }));
-        return errors;
-    };
-    /**
-     * Validate a single field.
-     */
-    const validateField = (field) => {
-        const snapshot = stateRef.current;
-        if (isFieldDisabledInternal(field, snapshot)) {
-            updateFormState((prev) => ({
-                ...prev,
-                errors: {
-                    ...prev.errors,
-                    [field]: undefined,
-                },
-            }));
-            return undefined;
-        }
-        const error = runFieldValidation(snapshot.values, field, options.validate);
-        updateFormState((prev) => ({
-            ...prev,
-            errors: {
-                ...prev.errors,
-                [field]: error,
-            },
-        }));
-        return error;
-    };
-    /**
-     * Set a specific field's value.
-     */
-    const setFieldValue = (field, value) => {
-        pendingAsyncValuesRef.current = null;
-        const newDirty = computeFieldDirty(field, value, initialValuesRef.current);
-        updateFormState((prev) => {
-            if (prev.isSubmitting || !isFieldEditableInternal(field, prev)) {
-                return prev;
-            }
-            const newValues = { ...prev.values, [field]: value };
-            // Store in ref for async validation (safe handoff from callback)
-            pendingAsyncValuesRef.current = newValues;
-            let newErrors = prev.errors;
-            // Run validation on change if enabled
-            if (options.validateOnChange) {
-                newErrors = runSyncValidationFiltered(newValues, prev);
-            }
-            return {
-                ...prev,
-                values: newValues,
-                errors: newErrors,
-                submitError: undefined,
-                dirty: {
-                    ...prev.dirty,
-                    [field]: newDirty,
-                },
-            };
-        });
-        // Trigger async validation if configured
-        const asyncValues = pendingAsyncValuesRef.current;
-        pendingAsyncValuesRef.current = null; // Clear to avoid stale data
-        if (options.validateOnChange && asyncValidatorRef.current && asyncValues) {
-            asyncValidatorRef.current.run(asyncValues);
-        }
-    };
-    /**
-     * Set a specific field's error.
-     */
-    const setFieldError = (field, error) => {
-        updateFormState((prev) => ({
-            ...prev,
-            errors: {
-                ...prev.errors,
-                [field]: error,
-            },
-        }));
-    };
-    /**
-     * Mark a field as touched.
-     */
-    const setFieldTouched = (field, touched) => {
-        updateFormState((prev) => ({
-            ...prev,
-            touched: {
-                ...prev.touched,
-                [field]: touched,
-            },
-        }));
-    };
-    /**
-     * Handle change for a specific field.
-     */
-    const handleChange = (field) => (value) => {
-        setFieldValue(field, value);
-    };
-    /**
-     * Handle blur for a specific field.
-     */
-    const handleBlur = (field) => () => {
-        const snapshot = stateRef.current;
-        if (isFieldDisabledInternal(field, snapshot)) {
-            return;
-        }
-        // Run validation on blur if enabled (default: true)
-        const validateOnBlur = options.validateOnBlur ?? true;
-        if (!validateOnBlur) {
-            setFieldTouched(field, true);
-            return;
-        }
-        const errors = runSyncValidationFiltered(snapshot.values, snapshot);
-        updateFormState((prev) => ({
-            ...prev,
-            touched: {
-                ...prev.touched,
-                [field]: true,
-            },
-            errors,
-        }));
-        if (asyncValidatorRef.current) {
-            asyncValidatorRef.current.run(snapshot.values);
-        }
-    };
-    const bind = (field, options) => {
-        const snapshot = stateRef.current;
-        const disabled = isFieldDisabledInternal(field, snapshot);
-        const readOnly = !disabled && isFieldReadOnlyInternal(field, snapshot);
-        const textBindable = canBindFieldAsText(field, snapshot.values);
-        if (!textBindable) {
-            warnUnsupportedTextBinding(field);
-        }
-        return {
-            id: options?.id ?? ctx.id(String(field)),
-            value: toInputValue(snapshot.values[field]),
-            disabled,
-            readOnly,
-            onInput: (value) => {
-                if (!textBindable)
-                    return;
-                setFieldValue(field, value);
-            },
-            onBlur: handleBlur(field),
-        };
-    };
-    const field = (fieldName, options) => {
-        const { key, label, required, hint, error, ...inputOverrides } = options ?? {};
-        const inputBinding = bind(fieldName, inputOverrides.id === undefined ? undefined : { id: inputOverrides.id });
-        const touched = hasTruthyBooleanValue(state.touched[fieldName]);
-        const derivedError = touched ? toFieldErrorString(state.errors[fieldName]) : undefined;
-        const resolvedError = error ?? derivedError;
-        return ui.field({
-            ...(key !== undefined ? { key } : {}),
-            label: label ?? String(fieldName),
-            ...(required !== undefined ? { required } : {}),
-            ...(hint !== undefined ? { hint } : {}),
-            ...(resolvedError !== undefined ? { error: resolvedError } : {}),
-            children: ui.input({
-                ...inputBinding,
-                ...inputOverrides,
-            }),
-        });
-    };
-    /**
-     * Set or clear form-level disabled state.
-     */
-    const setDisabled = (disabled) => {
-        updateFormState((prev) => {
-            const nextState = {
-                ...prev,
-                disabled,
-            };
-            return {
-                ...nextState,
-                errors: filterDisabledValidationErrors(prev.errors, nextState),
-            };
-        });
-    };
-    /**
-     * Set or clear form-level readOnly state.
-     */
-    const setReadOnly = (readOnly) => {
-        updateFormState((prev) => ({
-            ...prev,
-            readOnly,
-        }));
-    };
-    /**
-     * Set or clear field-level disabled override.
-     */
-    const setFieldDisabled = (field, disabled) => {
-        updateFormState((prev) => {
-            const nextState = {
-                ...prev,
-                fieldDisabled: setFieldOverride(prev.fieldDisabled, field, disabled),
-            };
-            return {
-                ...nextState,
-                errors: filterDisabledValidationErrors(prev.errors, nextState),
-            };
-        });
-    };
-    /**
-     * Set or clear field-level readOnly override.
-     */
-    const setFieldReadOnly = (field, readOnly) => {
-        updateFormState((prev) => ({
-            ...prev,
-            fieldReadOnly: setFieldOverride(prev.fieldReadOnly, field, readOnly),
-        }));
-    };
-    /**
-     * Dynamic array helper for array-valued fields.
-     */
-    const useFieldArray = (field) => {
-        const fieldKey = field;
-        const values = getArrayFieldValues(state.values, field);
-        const keys = ensureFieldArrayKeys(fieldKey, values.length);
-        const append = (item) => {
-            pendingAsyncValuesRef.current = null;
-            updateFormState((prev) => {
-                if (prev.isSubmitting || !isFieldEditableInternal(fieldKey, prev)) {
-                    return prev;
-                }
-                const currentValues = getArrayFieldValues(prev.values, field);
-                const nextValuesArray = [...currentValues, item];
-                const nextValues = {
-                    ...prev.values,
-                    [field]: nextValuesArray,
-                };
-                pendingAsyncValuesRef.current = nextValues;
-                const nextTouched = [
-                    ...normalizeBooleanArray(prev.touched[fieldKey], currentValues.length, false),
-                    false,
-                ];
-                const previousDirty = normalizeBooleanArray(prev.dirty[fieldKey], currentValues.length, false);
-                const initialArray = Array.isArray(initialValuesRef.current[fieldKey])
-                    ? initialValuesRef.current[fieldKey]
-                    : [];
-                const appendedDirty = !Object.is(item, initialArray[nextValuesArray.length - 1]);
-                const nextDirty = [...previousDirty, appendedDirty];
-                let nextErrors = prev.errors;
-                if (options.validateOnChange) {
-                    nextErrors = runSyncValidationFiltered(nextValues, prev);
-                }
-                else {
-                    const currentErrors = normalizeErrorArray(prev.errors[fieldKey], currentValues.length);
-                    nextErrors = {
-                        ...prev.errors,
-                        [fieldKey]: [...currentErrors, undefined],
-                    };
-                }
-                appendFieldArrayKey(fieldKey);
-                return {
-                    ...prev,
-                    values: nextValues,
-                    errors: nextErrors,
-                    submitError: undefined,
-                    touched: {
-                        ...prev.touched,
-                        [fieldKey]: nextTouched,
-                    },
-                    dirty: {
-                        ...prev.dirty,
-                        [fieldKey]: nextDirty,
-                    },
-                };
-            });
-            const asyncValues = pendingAsyncValuesRef.current;
-            pendingAsyncValuesRef.current = null;
-            if (options.validateOnChange && asyncValidatorRef.current && asyncValues) {
-                asyncValidatorRef.current.run(asyncValues);
-            }
-        };
-        const remove = (index) => {
-            pendingAsyncValuesRef.current = null;
-            updateFormState((prev) => {
-                if (prev.isSubmitting || !isFieldEditableInternal(fieldKey, prev)) {
-                    return prev;
-                }
-                const currentValues = getArrayFieldValues(prev.values, field);
-                if (index < 0 || index >= currentValues.length) {
-                    return prev;
-                }
-                const nextValuesArray = removeAtIndex(currentValues, index);
-                const nextValues = {
-                    ...prev.values,
-                    [field]: nextValuesArray,
-                };
-                pendingAsyncValuesRef.current = nextValues;
-                const nextTouched = removeAtIndex(normalizeBooleanArray(prev.touched[fieldKey], currentValues.length, false), index);
-                const nextDirty = removeAtIndex(normalizeBooleanArray(prev.dirty[fieldKey], currentValues.length, false), index);
-                let nextErrors = prev.errors;
-                if (options.validateOnChange) {
-                    nextErrors = runSyncValidationFiltered(nextValues, prev);
-                }
-                else {
-                    const nextErrorArray = removeAtIndex(normalizeErrorArray(prev.errors[fieldKey], currentValues.length), index);
-                    nextErrors = {
-                        ...prev.errors,
-                        [fieldKey]: nextErrorArray,
-                    };
-                }
-                removeFieldArrayKey(fieldKey, index);
-                return {
-                    ...prev,
-                    values: nextValues,
-                    errors: nextErrors,
-                    submitError: undefined,
-                    touched: {
-                        ...prev.touched,
-                        [fieldKey]: nextTouched,
-                    },
-                    dirty: {
-                        ...prev.dirty,
-                        [fieldKey]: nextDirty,
-                    },
-                };
-            });
-            const asyncValues = pendingAsyncValuesRef.current;
-            pendingAsyncValuesRef.current = null;
-            if (options.validateOnChange && asyncValidatorRef.current && asyncValues) {
-                asyncValidatorRef.current.run(asyncValues);
-            }
-        };
-        const move = (from, to) => {
-            pendingAsyncValuesRef.current = null;
-            updateFormState((prev) => {
-                if (prev.isSubmitting || !isFieldEditableInternal(fieldKey, prev)) {
-                    return prev;
-                }
-                const currentValues = getArrayFieldValues(prev.values, field);
-                if (from < 0 ||
-                    to < 0 ||
-                    from >= currentValues.length ||
-                    to >= currentValues.length ||
-                    from === to) {
-                    return prev;
-                }
-                const nextValuesArray = moveIndex(currentValues, from, to);
-                const nextValues = {
-                    ...prev.values,
-                    [field]: nextValuesArray,
-                };
-                pendingAsyncValuesRef.current = nextValues;
-                const nextTouched = moveIndex(normalizeBooleanArray(prev.touched[fieldKey], currentValues.length, false), from, to);
-                const nextDirty = moveIndex(normalizeBooleanArray(prev.dirty[fieldKey], currentValues.length, false), from, to);
-                const nextErrorArray = moveIndex(normalizeErrorArray(prev.errors[fieldKey], currentValues.length), from, to);
-                let nextErrors = {
-                    ...prev.errors,
-                    [fieldKey]: nextErrorArray,
-                };
-                if (options.validateOnChange) {
-                    nextErrors = runSyncValidationFiltered(nextValues, prev);
-                }
-                moveFieldArrayKey(fieldKey, from, to);
-                return {
-                    ...prev,
-                    values: nextValues,
-                    errors: nextErrors,
-                    submitError: undefined,
-                    touched: {
-                        ...prev.touched,
-                        [fieldKey]: nextTouched,
-                    },
-                    dirty: {
-                        ...prev.dirty,
-                        [fieldKey]: nextDirty,
-                    },
-                };
-            });
-            const asyncValues = pendingAsyncValuesRef.current;
-            pendingAsyncValuesRef.current = null;
-            if (options.validateOnChange && asyncValidatorRef.current && asyncValues) {
-                asyncValidatorRef.current.run(asyncValues);
-            }
-        };
-        return Object.freeze({
-            values,
-            keys,
-            append,
-            remove,
-            move,
-        });
-    };
-    /**
-     * Advance wizard by one step when current step validates cleanly.
-     */
-    const nextStep = () => {
-        if (!hasWizard) {
-            return true;
-        }
-        const snapshot = stateRef.current;
-        const currentStepIndex = clampStepIndex(snapshot.currentStep, stepCount);
-        if (currentStepIndex >= stepCount - 1) {
-            return true;
-        }
-        const targetStep = clampStepIndex(currentStepIndex + 1, stepCount);
-        const transitionSteps = getWizardTransitionSteps(currentStepIndex, targetStep, snapshot.values);
-        const blocked = resolveWizardTransition(snapshot.values, transitionSteps, snapshot);
-        if (blocked) {
-            updateFormState((prev) => ({
-                ...prev,
-                touched: blocked.touched,
-                errors: blocked.mergedErrors,
-            }));
-            return false;
-        }
-        if (!options.validateAsync) {
-            const traversedFields = transitionSteps.flatMap((step) => step.fields);
-            updateFormState((prev) => ({
-                ...prev,
-                currentStep: targetStep,
-                errors: clearValidationFields(prev.errors, traversedFields),
-            }));
-            return true;
-        }
-        void (async () => {
-            let asyncErrors;
-            try {
-                asyncErrors = await runAsyncValidationFiltered(snapshot.values, snapshot);
-            }
-            catch (error) {
-                if (stateRef.current.values !== snapshot.values ||
-                    clampStepIndex(stateRef.current.currentStep, stepCount) !== currentStepIndex) {
-                    return;
-                }
-                updateFormState((prev) => ({
-                    ...prev,
-                    submitError: error,
-                }));
-                return;
-            }
-            if (stateRef.current.values !== snapshot.values ||
-                clampStepIndex(stateRef.current.currentStep, stepCount) !== currentStepIndex) {
-                return;
-            }
-            const asyncBlocked = resolveWizardTransition(snapshot.values, transitionSteps, stateRef.current, asyncErrors);
-            if (asyncBlocked) {
-                updateFormState((prev) => ({
-                    ...prev,
-                    touched: asyncBlocked.touched,
-                    errors: asyncBlocked.mergedErrors,
-                    submitError: undefined,
-                }));
-                return;
-            }
-            const traversedFields = transitionSteps.flatMap((step) => step.fields);
-            updateFormState((prev) => ({
-                ...prev,
-                currentStep: targetStep,
-                errors: clearValidationFields(prev.errors, traversedFields),
-                submitError: undefined,
-            }));
-        })();
-        return false;
-    };
-    /**
-     * Navigate to previous wizard step without validation.
-     */
-    const previousStep = () => {
-        if (!hasWizard) {
-            return;
-        }
-        updateFormState((prev) => ({
-            ...prev,
-            currentStep: clampStepIndex(prev.currentStep - 1, stepCount),
-        }));
-    };
-    /**
-     * Navigate to a specific wizard step with validation gates on forward moves.
-     */
-    const goToStep = (stepIndex) => {
-        if (!hasWizard) {
-            return false;
-        }
-        const snapshot = stateRef.current;
-        const currentStepIndex = clampStepIndex(snapshot.currentStep, stepCount);
-        const targetStep = clampStepIndex(stepIndex, stepCount);
-        if (targetStep === currentStepIndex) {
-            return true;
-        }
-        if (targetStep < currentStepIndex) {
-            updateFormState((prev) => ({
-                ...prev,
-                currentStep: targetStep,
-            }));
-            return true;
-        }
-        const transitionSteps = getWizardTransitionSteps(currentStepIndex, targetStep, snapshot.values);
-        const blocked = resolveWizardTransition(snapshot.values, transitionSteps, snapshot);
-        if (blocked) {
-            updateFormState((prev) => ({
-                ...prev,
-                touched: blocked.touched,
-                errors: blocked.mergedErrors,
-            }));
-            return false;
-        }
-        if (!options.validateAsync) {
-            const traversedFields = transitionSteps.flatMap((step) => step.fields);
-            updateFormState((prev) => ({
-                ...prev,
-                currentStep: targetStep,
-                errors: clearValidationFields(prev.errors, traversedFields),
-            }));
-            return true;
-        }
-        void (async () => {
-            let asyncErrors;
-            try {
-                asyncErrors = await runAsyncValidationFiltered(snapshot.values, snapshot);
-            }
-            catch (error) {
-                if (stateRef.current.values !== snapshot.values ||
-                    clampStepIndex(stateRef.current.currentStep, stepCount) !== currentStepIndex) {
-                    return;
-                }
-                updateFormState((prev) => ({
-                    ...prev,
-                    submitError: error,
-                }));
-                return;
-            }
-            if (stateRef.current.values !== snapshot.values ||
-                clampStepIndex(stateRef.current.currentStep, stepCount) !== currentStepIndex) {
-                return;
-            }
-            const asyncBlocked = resolveWizardTransition(snapshot.values, transitionSteps, stateRef.current, asyncErrors);
-            if (asyncBlocked) {
-                updateFormState((prev) => ({
-                    ...prev,
-                    touched: asyncBlocked.touched,
-                    errors: asyncBlocked.mergedErrors,
-                    submitError: undefined,
-                }));
-                return;
-            }
-            const traversedFields = transitionSteps.flatMap((step) => step.fields);
-            updateFormState((prev) => ({
-                ...prev,
-                currentStep: targetStep,
-                errors: clearValidationFields(prev.errors, traversedFields),
-                submitError: undefined,
-            }));
-        })();
-        return false;
-    };
-    /**
-     * Reset form to initial state.
-     */
-    const reset = () => {
-        submittingRef.current = false;
-        asyncValidatorRef.current?.cancel();
-        fieldArrayKeysRef.current = {};
-        updateFormState(createInitialState(options));
-    };
-    /**
-     * Handle form submission.
-     */
-    const handleSubmit = () => {
-        const snapshot = stateRef.current;
-        // Don't submit if disabled or already submitting
-        if (snapshot.disabled || snapshot.isSubmitting || submittingRef.current) {
-            return;
-        }
-        // In wizard mode, submit action advances steps until the last step.
-        const submitStepIndex = hasWizard ? clampStepIndex(snapshot.currentStep, stepCount) : 0;
-        const submitIsLastStep = !hasWizard || submitStepIndex === stepCount - 1;
-        if (hasWizard && !submitIsLastStep) {
-            nextStep();
-            return;
-        }
-        asyncValidatorRef.current?.cancel();
-        // Mark all fields as touched
-        const allTouched = {};
-        const keys = Object.keys(snapshot.values);
-        for (const key of keys) {
-            const value = snapshot.values[key];
-            allTouched[key] = Array.isArray(value) ? value.map(() => true) : true;
-        }
-        // Run sync validation
-        const syncErrors = runSyncValidationFiltered(snapshot.values, snapshot);
-        // Update state with touched and sync errors
-        updateFormState((prev) => ({
-            ...prev,
-            touched: allTouched,
-            errors: syncErrors,
-            submitError: undefined,
-            submitCount: prev.submitCount + 1,
-        }));
-        // If sync validation fails, don't submit
-        if (!isValidationClean(syncErrors)) {
-            submittingRef.current = false;
-            return;
-        }
-        const submitValues = cloneInitialValues(snapshot.values);
-        const failSubmit = (error) => {
-            if (typeof options.onSubmitError === "function") {
-                try {
-                    options.onSubmitError(error);
-                }
-                catch (callbackError) {
-                    warnDev(`[rezi] useForm: onSubmitError callback threw: ${formatErrorForDev(callbackError)}`);
-                }
-            }
-            else {
-                warnDev(`[rezi] useForm: submit failed: ${formatErrorForDev(error)}`);
-            }
-            updateFormState((prev) => ({
-                ...prev,
-                isSubmitting: false,
-                submitError: error,
-            }));
-        };
-        const finishSuccessfulSubmit = () => {
-            if (options.resetOnSubmit) {
-                reset();
-                return;
-            }
-            updateFormState((prev) => ({
-                ...prev,
-                isSubmitting: false,
-                submitError: undefined,
-            }));
-        };
-        const runSubmitCallback = async () => {
-            let submitResult;
-            try {
-                submitResult = options.onSubmit(submitValues);
-            }
-            catch (error) {
-                submittingRef.current = false;
-                failSubmit(error);
-                return;
-            }
-            if (!isPromiseLike(submitResult)) {
-                submittingRef.current = false;
-                finishSuccessfulSubmit();
-                return;
-            }
-            submittingRef.current = true;
-            if (!stateRef.current.isSubmitting) {
-                updateFormState((prev) => ({
-                    ...prev,
-                    isSubmitting: true,
-                }));
-            }
-            try {
-                await submitResult;
-            }
-            catch (error) {
-                submittingRef.current = false;
-                failSubmit(error);
-                return;
-            }
-            submittingRef.current = false;
-            finishSuccessfulSubmit();
-        };
-        if (!options.validateAsync) {
-            void runSubmitCallback();
-            return;
-        }
-        submittingRef.current = true;
-        updateFormState((prev) => ({
-            ...prev,
-            isSubmitting: true,
-        }));
-        void (async () => {
-            try {
-                const asyncErrors = await runAsyncValidationFiltered(submitValues, snapshot);
-                const allErrors = mergeValidationErrors(syncErrors, asyncErrors);
-                if (!isValidationClean(allErrors)) {
-                    submittingRef.current = false;
-                    updateFormState((prev) => ({
-                        ...prev,
-                        isSubmitting: false,
-                        errors: allErrors,
-                        submitError: undefined,
-                    }));
-                    return;
-                }
-                await runSubmitCallback();
-            }
-            catch (error) {
-                submittingRef.current = false;
-                updateFormState((prev) => ({
-                    ...prev,
-                    isSubmitting: false,
-                    submitError: error,
-                }));
-            }
-        })();
-    };
+    const { validateForm, validateField, setFieldValue, setFieldError, setFieldTouched, handleChange, handleBlur, bind, field, } = createFieldBindings({
+        ctx,
+        state,
+        stateRef,
+        initialValuesRef,
+        pendingAsyncValuesRef,
+        asyncValidatorRef,
+        validate: options.validate,
+        validateOnBlur: options.validateOnBlur,
+        validateOnChange: options.validateOnChange,
+        updateFormState,
+        isFieldDisabledInternal,
+        isFieldReadOnlyInternal,
+        isFieldEditableInternal,
+        runSyncValidationFiltered,
+        canBindFieldAsText,
+        warnUnsupportedTextBinding,
+    });
+    const { setDisabled, setReadOnly, setFieldDisabled, setFieldReadOnly } = createFormFlagActions({
+        updateFormState,
+        filterDisabledValidationErrors,
+    });
+    const { useFieldArray } = createFieldArrayApi({
+        state,
+        validateOnChange: options.validateOnChange,
+        initialValuesRef,
+        fieldArrayKeysRef,
+        fieldArrayKeyCounterRef,
+        pendingAsyncValuesRef,
+        asyncValidatorRef,
+        updateFormState,
+        isFieldEditableInternal,
+        runSyncValidationFiltered,
+    });
+    const { nextStep, previousStep, goToStep } = createWizardActions({
+        hasWizard,
+        stepCount,
+        wizardSteps,
+        validateAsync: options.validateAsync,
+        stateRef,
+        updateFormState,
+        runAsyncValidationFiltered,
+        runWizardStepValidation: runWizardStepValidationForState,
+    });
+    const reset = createResetAction({
+        formOptions: options,
+        asyncValidatorRef,
+        attemptRef: submitAttemptRef,
+        submittingRef,
+        fieldArrayKeysRef,
+        updateFormState,
+    });
+    const handleSubmit = createSubmitAction({
+        formOptions: options,
+        hasWizard,
+        stepCount,
+        stateRef,
+        submittingRef,
+        asyncValidatorRef,
+        attemptRef: submitAttemptRef,
+        updateFormState,
+        runSyncValidationFiltered,
+        runAsyncValidationFiltered,
+        nextStep,
+        reset,
+    });
     return Object.freeze({
         values: state.values,
         errors: state.errors,
@@ -1201,8 +174,8 @@ export function useForm(ctx, options) {
         setReadOnly,
         setFieldDisabled,
         setFieldReadOnly,
-        isFieldDisabled: (field) => isFieldDisabledInternal(field, stateRef.current),
-        isFieldReadOnly: (field) => isFieldReadOnlyInternal(field, stateRef.current),
+        isFieldDisabled: (fieldName) => isFieldDisabledInternal(fieldName, stateRef.current),
+        isFieldReadOnly: (fieldName) => isFieldReadOnlyInternal(fieldName, stateRef.current),
         useFieldArray,
         nextStep,
         previousStep,