@formisch/svelte 0.8.0 → 0.9.0

package/README.md

@@ -9,6 +9,7 @@ Formisch is also available for [Preact][formisch-preact], [Qwik][formisch-qwik],
 - Small bundle size starting at 2.5 kB
 - Schema-based validation with Valibot
 - Type safety with autocompletion in editor
+- Open source and fully tested with 100 % coverage
 - It's fast – DOM updates are fine-grained
 - Minimal, readable and well thought out API
 - Supports all native HTML form fields

package/dist/core/index.svelte.d.ts

@@ -78,6 +78,13 @@ interface InternalBaseStore {
   schema: Schema;
   /**
   * The initial elements of the field.
+  *
+  * Hint: This may look unused, but do not remove it. `copyItemState` and
+  * `swapItemState` move the `elements` reference between field stores when
+  * array items are inserted, moved, removed or swapped, and `reset` restores
+  * each field's original element via `elements = initialElements`. Without it,
+  * focus and file reset target the wrong element after a reorder followed by a
+  * reset.
   */
   initialElements: FieldElement[];
   /**
@@ -399,7 +406,10 @@ type ExactRequired<TValue> = TValue extends Record<PropertyKey, unknown> ? IsExa
 */
 type PathValue<TValue, TPath extends Path> = TPath extends readonly [infer TKey, ...infer TRest extends Path] ? TKey extends ExactKeysOf<ExactRequired<TValue>> ? PathValue<PropertiesOf<ExactRequired<TValue>>[TKey], TRest> : unknown : TValue;
 /**
-* Checks whether a value is an array or contains one anywhere in its shape.
+* Checks whether a value is a dynamic array or contains one anywhere in its
+* shape. A fixed-length tuple is not itself a dynamic array, but it counts when
+* it contains one, so paths can still navigate through tuples to reach nested
+* arrays.
 *
 * Hint: The inner conditionals (`TValue extends readonly unknown[]` and
 * `TValue extends Record<PropertyKey, unknown>`) distribute over union members,
@@ -410,7 +420,7 @@ type PathValue<TValue, TPath extends Path> = TPath extends readonly [infer TKey,
 * `true extends ...`, which is `true` whenever at least one union member
 * contributed `true`.
 */
-type IsOrHasArray<TValue> = true extends (IsAny<TValue> extends true ? false : TValue extends readonly unknown[] ? true : TValue extends Record<PropertyKey, unknown> ? { [TKey in keyof TValue]: IsOrHasArray<TValue[TKey]> }[keyof TValue] : false) ? true : false;
+type IsOrHasArray<TValue> = true extends (IsAny<TValue> extends true ? false : TValue extends readonly unknown[] ? number extends TValue["length"] ? true : IsOrHasArray<TValue[number]> : TValue extends Record<PropertyKey, unknown> ? { [TKey in keyof TValue]: IsOrHasArray<TValue[TKey]> }[keyof TValue] : false) ? true : false;
 /**
 * Extracts the exact keys of a tuple, array or object that contain arrays.
 */
@@ -425,7 +435,7 @@ type PropertiesOfArrayPath<TValue> = { [TKey in ExactKeysOfArrayPath<TValue>]: T
 /**
 * Lazily evaluates only the first valid array path segment based on the given value.
 */
-type LazyArrayPath<TValue, TPathToCheck extends Path, TValidPath extends Path = readonly []> = TPathToCheck extends readonly [] ? TValue extends readonly unknown[] ? TValidPath : readonly [...TValidPath, ExactKeysOfArrayPath<TValue>] : TPathToCheck extends readonly [infer TFirstKey extends ExactKeysOfArrayPath<TValue>, ...infer TPathRest extends Path] ? LazyArrayPath<Required<PropertiesOfArrayPath<TValue>[TFirstKey]>, TPathRest, readonly [...TValidPath, TFirstKey]> : IsNever<ExactKeysOfArrayPath<TValue>> extends false ? readonly [...TValidPath, ExactKeysOfArrayPath<TValue>] : never;
+type LazyArrayPath<TValue, TPathToCheck extends Path, TValidPath extends Path = readonly []> = TPathToCheck extends readonly [] ? TValue extends readonly unknown[] ? number extends TValue["length"] ? TValidPath : IsNever<ExactKeysOfArrayPath<TValue>> extends false ? readonly [...TValidPath, ExactKeysOfArrayPath<TValue>] : never : readonly [...TValidPath, ExactKeysOfArrayPath<TValue>] : TPathToCheck extends readonly [infer TFirstKey extends ExactKeysOfArrayPath<TValue>, ...infer TPathRest extends Path] ? LazyArrayPath<Required<PropertiesOfArrayPath<TValue>[TFirstKey]>, TPathRest, readonly [...TValidPath, TFirstKey]> : IsNever<ExactKeysOfArrayPath<TValue>> extends false ? readonly [...TValidPath, ExactKeysOfArrayPath<TValue>] : never;
 /**
 * Returns the path if valid, otherwise the first possible valid array path
 * based on the given value.
@@ -475,9 +485,12 @@ declare function copyItemState(fromInternalFieldStore: InternalFieldStore, toInt
 * form reset functionality.
 *
 * @param internalFieldStore The field store to reset.
-* @param initialInput The new input value (can be any type including array or object).
+* @param input The new input value (can be any type including array or object).
+* @param keepStart Whether to keep `startInput` and `startItems` as the dirty
+* baseline instead of resetting them to the new input. Used when a field store
+* is reused for an in-place edit so its dirty state is detected correctly.
 */
-declare function resetItemState(internalFieldStore: InternalFieldStore, initialInput: unknown): void;
+declare function resetItemState(internalFieldStore: InternalFieldStore, input: unknown, keepStart?: boolean): void;
 //#endregion
 //#region src/array/swapItemState/swapItemState.d.ts
 /**
@@ -491,6 +504,24 @@ declare function resetItemState(internalFieldStore: InternalFieldStore, initialI
 */
 declare function swapItemState(firstInternalFieldStore: InternalFieldStore, secondInternalFieldStore: InternalFieldStore): void;
 //#endregion
+//#region src/field/focusFieldElement/focusFieldElement.d.ts
+/**
+* Focuses the first focusable element of a field store. The elements are tried
+* in order and the first one that actually receives focus wins, so detached,
+* disabled or hidden elements are skipped. The browser decides focusability,
+* which is read back via the element's root `activeElement` so elements in a
+* shadow root or another document are handled correctly.
+*
+* Hint: A `display: none` or `hidden` element is correctly skipped in real
+* browsers, but jsdom has no layout and focuses it anyway, so that case cannot
+* be covered by unit tests.
+*
+* @param internalFieldStore The field store to focus.
+*
+* @returns Whether an element was focused.
+*/
+declare function focusFieldElement(internalFieldStore: InternalFieldStore): boolean;
+//#endregion
 //#region src/field/getDirtyFieldInput/getDirtyFieldInput.d.ts
 /**
 * Returns only the dirty input of the field store. Arrays are treated as
@@ -624,6 +655,23 @@ declare function walkFieldStore(internalFieldStore: InternalFieldStore, callback
 */
 declare function createFormStore(config: FormConfig, parse: (input: unknown) => Promise<v.SafeParseResult<FormSchema>>): InternalFormStore;
 //#endregion
+//#region src/form/decodeFormData/decodeFormData.d.ts
+/**
+* Decodes the entries of a form data object into nested form values using the
+* Valibot schema as the source of truth. Information that is lost during the
+* transfer via HTTP, like numbers, booleans, dates and unchecked checkboxes,
+* is restored based on the schema.
+*
+* The keys of the form data are expected to be the stringified field paths that
+* Formisch assigns to its field elements (for example `["todos",0,"label"]`).
+*
+* @param schema The form schema.
+* @param formData The form data object.
+*
+* @returns The decoded form values.
+*/
+declare function decodeFormData<TSchema extends FormSchema>(schema: TSchema, formData: FormData): unknown;
+//#endregion
 //#region src/form/validateFormInput/validateFormInput.d.ts
 /**
 * Validate form input config interface.
@@ -693,4 +741,4 @@ declare function createSignal<T>(initialValue: T): Signal<T>;
 */
 declare function batch<T>(fn: () => T): T;
 //#endregion
-export { BaseFormStore, Batch, DeepPartial, DirtyPath, FieldElement, FieldSchema, FormConfig, FormSchema, INTERNAL, InternalArrayStore, InternalBaseStore, InternalFieldStore, InternalFormStore, InternalObjectStore, InternalValueStore, IsAny, IsNever, MaybePromise, PartialValues, Path, PathKey, PathValue, RequiredPath, Schema, Signal, SubmitEventHandler, SubmitHandler, Untrack, ValidArrayPath, ValidPath, ValidateFormInputConfig, ValidationMode, batch, copyItemState, createFormStore, createId, createSignal, framework, getDirtyFieldInput, getElementInput, getFieldBool, getFieldInput, getFieldStore, initializeFieldStore, resetItemState, setFieldBool, setFieldInput, setInitialFieldInput, swapItemState, untrack, validateFormInput, validateIfRequired, walkFieldStore };
+export { BaseFormStore, Batch, DeepPartial, DirtyPath, FieldElement, FieldSchema, FormConfig, FormSchema, INTERNAL, InternalArrayStore, InternalBaseStore, InternalFieldStore, InternalFormStore, InternalObjectStore, InternalValueStore, IsAny, IsNever, MaybePromise, PartialValues, Path, PathKey, PathValue, RequiredPath, Schema, Signal, SubmitEventHandler, SubmitHandler, Untrack, ValidArrayPath, ValidPath, ValidateFormInputConfig, ValidationMode, batch, copyItemState, createFormStore, createId, createSignal, decodeFormData, focusFieldElement, framework, getDirtyFieldInput, getElementInput, getFieldBool, getFieldInput, getFieldStore, initializeFieldStore, resetItemState, setFieldBool, setFieldInput, setInitialFieldInput, swapItemState, untrack, validateFormInput, validateIfRequired, walkFieldStore };

package/dist/core/index.svelte.js

@@ -179,31 +179,45 @@ function copyItemState(fromInternalFieldStore, toInternalFieldStore) {
 * form reset functionality.
 *
 * @param internalFieldStore The field store to reset.
-* @param initialInput The new input value (can be any type including array or object).
+* @param input The new input value (can be any type including array or object).
+* @param keepStart Whether to keep `startInput` and `startItems` as the dirty
+* baseline instead of resetting them to the new input. Used when a field store
+* is reused for an in-place edit so its dirty state is detected correctly.
 */
-function resetItemState(internalFieldStore, initialInput) {
+function resetItemState(internalFieldStore, input, keepStart = false) {
 	batch(() => {
-		internalFieldStore.elements = [];
+		const elements = [];
+		if (internalFieldStore.elements === internalFieldStore.initialElements) internalFieldStore.initialElements = elements;
+		internalFieldStore.elements = elements;
 		internalFieldStore.errors.value = null;
 		internalFieldStore.isTouched.value = false;
 		internalFieldStore.isDirty.value = false;
 		if (internalFieldStore.kind === "array" || internalFieldStore.kind === "object") {
-			const objectInput = initialInput == null ? initialInput : true;
-			internalFieldStore.startInput.value = objectInput;
+			const objectInput = input == null ? input : true;
+			if (!keepStart) internalFieldStore.startInput.value = objectInput;
 			internalFieldStore.input.value = objectInput;
-			if (internalFieldStore.kind === "array") if (initialInput) {
-				const newItems = initialInput.map(createId);
-				internalFieldStore.startItems.value = newItems;
+			if (internalFieldStore.kind === "array") if (input) {
+				const length = internalFieldStore.schema.type === "array" ? input.length : internalFieldStore.children.length;
+				const newItems = Array.from({ length }, createId);
+				if (!keepStart) internalFieldStore.startItems.value = newItems;
 				internalFieldStore.items.value = newItems;
-				for (let index = 0; index < initialInput.length; index++) if (internalFieldStore.children[index]) resetItemState(internalFieldStore.children[index], initialInput[index]);
+				let path;
+				for (let index = 0; index < length; index++) if (internalFieldStore.children[index]) resetItemState(internalFieldStore.children[index], input[index], keepStart);
+				else {
+					path ??= JSON.parse(internalFieldStore.name);
+					internalFieldStore.children[index] = {};
+					path.push(index);
+					initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, input[index], path);
+					path.pop();
+				}
 			} else {
-				internalFieldStore.startItems.value = [];
+				if (!keepStart) internalFieldStore.startItems.value = [];
 				internalFieldStore.items.value = [];
 			}
-			else for (const key in internalFieldStore.children) resetItemState(internalFieldStore.children[key], initialInput?.[key]);
+			else for (const key in internalFieldStore.children) resetItemState(internalFieldStore.children[key], input?.[key], keepStart);
 		} else {
-			internalFieldStore.startInput.value = initialInput;
-			internalFieldStore.input.value = initialInput;
+			if (!keepStart) internalFieldStore.startInput.value = input;
+			internalFieldStore.input.value = input;
 		}
 	});
 }
@@ -273,6 +287,31 @@ function swapItemState(firstInternalFieldStore, secondInternalFieldStore) {
 	});
 }
 
+//#endregion
+//#region src/field/focusFieldElement/focusFieldElement.ts
+/**
+* Focuses the first focusable element of a field store. The elements are tried
+* in order and the first one that actually receives focus wins, so detached,
+* disabled or hidden elements are skipped. The browser decides focusability,
+* which is read back via the element's root `activeElement` so elements in a
+* shadow root or another document are handled correctly.
+*
+* Hint: A `display: none` or `hidden` element is correctly skipped in real
+* browsers, but jsdom has no layout and focuses it anyway, so that case cannot
+* be covered by unit tests.
+*
+* @param internalFieldStore The field store to focus.
+*
+* @returns Whether an element was focused.
+*/
+function focusFieldElement(internalFieldStore) {
+	for (const element of internalFieldStore.elements) {
+		element.focus();
+		if (element.getRootNode().activeElement === element) return true;
+	}
+	return false;
+}
+
 //#endregion
 //#region src/field/getFieldBool/getFieldBool.ts
 /**
@@ -428,11 +467,9 @@ function getFieldStore(internalFormStore, path) {
 */
 function setFieldBool(internalFieldStore, type, bool) {
 	batch(() => {
-		if (internalFieldStore.kind === "array") {
-			internalFieldStore[type].value = bool;
-			for (let index = 0; index < untrack(() => internalFieldStore.items.value).length; index++) setFieldBool(internalFieldStore.children[index], type, bool);
-		} else if (internalFieldStore.kind == "object") for (const key in internalFieldStore.children) setFieldBool(internalFieldStore.children[key], type, bool);
-		else internalFieldStore[type].value = bool;
+		internalFieldStore[type].value = bool;
+		if (internalFieldStore.kind === "array") for (let index = 0; index < untrack(() => internalFieldStore.items.value).length; index++) setFieldBool(internalFieldStore.children[index], type, bool);
+		else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) setFieldBool(internalFieldStore.children[key], type, bool);
 	});
 }
 
@@ -450,20 +487,20 @@ function setNestedInput(internalFieldStore, input) {
 	if (internalFieldStore.kind === "array") {
 		const arrayInput = input ?? [];
 		const items = internalFieldStore.items.value;
-		if (arrayInput.length < items.length) internalFieldStore.items.value = items.slice(0, arrayInput.length);
-		else if (arrayInput.length > items.length) {
-			if (arrayInput.length > internalFieldStore.children.length) {
-				const path = JSON.parse(internalFieldStore.name);
-				for (let index = internalFieldStore.children.length; index < arrayInput.length; index++) {
-					internalFieldStore.children[index] = {};
-					path.push(index);
-					initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, arrayInput[index], path);
-					path.pop();
-				}
+		const length = internalFieldStore.schema.type === "array" ? arrayInput.length : internalFieldStore.children.length;
+		if (length < items.length) internalFieldStore.items.value = items.slice(0, length);
+		else if (length > items.length) {
+			const path = JSON.parse(internalFieldStore.name);
+			for (let index = items.length; index < length; index++) if (internalFieldStore.children[index]) resetItemState(internalFieldStore.children[index], arrayInput[index], true);
+			else {
+				internalFieldStore.children[index] = {};
+				path.push(index);
+				initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, arrayInput[index], path);
+				path.pop();
 			}
-			internalFieldStore.items.value = [...items, ...arrayInput.slice(items.length).map(createId)];
+			internalFieldStore.items.value = [...items, ...Array.from({ length: length - items.length }, createId)];
 		}
-		for (let index = 0; index < arrayInput.length; index++) setNestedInput(internalFieldStore.children[index], arrayInput[index]);
+		for (let index = 0; index < length; index++) setNestedInput(internalFieldStore.children[index], arrayInput[index]);
 		internalFieldStore.input.value = input == null ? input : true;
 		internalFieldStore.isDirty.value = internalFieldStore.startInput.value !== internalFieldStore.input.value || internalFieldStore.startItems.value.length !== internalFieldStore.items.value.length;
 	} else if (internalFieldStore.kind === "object") {
@@ -510,21 +547,22 @@ function setFieldInput(internalFormStore, path, input) {
 function setInitialFieldInput(internalFieldStore, initialInput) {
 	batch(() => {
 		if (internalFieldStore.kind === "array") {
-			internalFieldStore.input.value = initialInput == null ? initialInput : true;
+			internalFieldStore.initialInput.value = initialInput == null ? initialInput : true;
 			const initialArrayInput = initialInput ?? [];
-			if (initialArrayInput.length > internalFieldStore.children.length) {
+			const length = internalFieldStore.schema.type === "array" ? initialArrayInput.length : internalFieldStore.children.length;
+			if (length > internalFieldStore.children.length) {
 				const path = JSON.parse(internalFieldStore.name);
-				for (let index = internalFieldStore.children.length; index < initialArrayInput.length; index++) {
+				for (let index = internalFieldStore.children.length; index < length; index++) {
 					internalFieldStore.children[index] = {};
 					path.push(index);
 					initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, initialArrayInput[index], path);
 					path.pop();
 				}
 			}
-			internalFieldStore.initialItems.value = initialArrayInput.map(createId);
+			internalFieldStore.initialItems.value = Array.from({ length }, createId);
 			for (let index = 0; index < internalFieldStore.children.length; index++) setInitialFieldInput(internalFieldStore.children[index], initialArrayInput[index]);
 		} else if (internalFieldStore.kind === "object") {
-			internalFieldStore.input.value = initialInput == null ? initialInput : true;
+			internalFieldStore.initialInput.value = initialInput == null ? initialInput : true;
 			for (const key in internalFieldStore.children) setInitialFieldInput(internalFieldStore.children[key], initialInput?.[key]);
 		} else internalFieldStore.initialInput.value = initialInput;
 	});
@@ -570,6 +608,203 @@ function createFormStore(config, parse) {
 	return store;
 }
 
+//#endregion
+//#region src/form/decodeFormData/decodeFormData.ts
+const NUMBER_REGEX = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/u;
+const ISO_DATE_TIME_REGEX = /^\d{4}-(?:0[1-9]|1[0-2])-(?:[12]\d|0[1-9]|3[01])T(?:0\d|1\d|2[0-3]):[0-5]\d(?::[0-5]\d(?:\.\d+)?)?$/u;
+const MAX_ARRAY_LENGTH = 5e3;
+/**
+* Unwraps wrapper and lazy schemas until a concrete schema is reached.
+*
+* @param schema The schema to unwrap.
+*
+* @returns The unwrapped schema.
+*/
+function unwrapSchema(schema) {
+	switch (schema.type) {
+		case "exact_optional":
+		case "nullable":
+		case "nullish":
+		case "optional":
+		case "undefinedable":
+		case "non_nullable":
+		case "non_nullish":
+		case "non_optional": return unwrapSchema(schema.wrapped);
+		case "lazy": return unwrapSchema(schema.getter(void 0));
+		default: return schema;
+	}
+}
+/**
+* Returns the child schema for the given key by traversing objects, arrays,
+* tuples and schema options. Returns `undefined` if no child schema is found.
+*
+* @param schema The parent schema.
+* @param key The path key.
+*
+* @returns The child schema or `undefined`.
+*/
+function getChildSchema(schema, key) {
+	if (schema) {
+		const unwrapped = unwrapSchema(schema);
+		if (unwrapped.type === "object" || unwrapped.type === "loose_object" || unwrapped.type === "strict_object") return unwrapped.entries[key];
+		if (unwrapped.type === "array") return unwrapped.item;
+		if (unwrapped.type === "tuple" || unwrapped.type === "loose_tuple" || unwrapped.type === "strict_tuple") return unwrapped.items[key];
+		if (unwrapped.type === "union" || unwrapped.type === "intersect" || unwrapped.type === "variant") for (const option of unwrapped.options) {
+			const childSchema = getChildSchema(option, key);
+			if (childSchema !== void 0) return childSchema;
+		}
+	}
+}
+/**
+* Decodes a stringified date based on its format. Empty strings become `null`.
+*
+* @param value The stringified value.
+*
+* @returns The decoded date.
+*/
+function decodeDate(value) {
+	if (!value || value === "null") return null;
+	if (value === "undefined") return;
+	if (ISO_DATE_TIME_REGEX.test(value)) return /* @__PURE__ */ new Date(`${value}Z`);
+	return new Date(value);
+}
+/**
+* Decodes a stringified boolean. Empty strings become `null`.
+*
+* @param value The stringified value.
+*
+* @returns The decoded boolean.
+*/
+function decodeBoolean(value) {
+	if (!value || value === "null") return null;
+	if (value === "undefined") return;
+	return !(value === "false" || value === "off" || value === "0");
+}
+/**
+* Decodes a stringified number. Empty strings become `null` and non-numeric
+* values become `NaN`.
+*
+* @param value The stringified value.
+*
+* @returns The decoded number.
+*/
+function decodeNumber(value) {
+	if (!value || value === "null") return null;
+	if (value === "undefined") return;
+	if (NUMBER_REGEX.test(value)) return Number(value);
+	return NaN;
+}
+/**
+* Decodes a stringified bigint. Empty strings become `null` and invalid values
+* are returned unchanged.
+*
+* @param value The stringified value.
+*
+* @returns The decoded bigint.
+*/
+function decodeBigint(value) {
+	if (!value || value === "null") return null;
+	if (value === "undefined") return;
+	try {
+		return BigInt(value);
+	} catch {
+		return value;
+	}
+}
+/**
+* Decodes a single form data value based on the concrete schema type. Files
+* and unknown types are returned unchanged.
+*
+* @param value The form data value.
+* @param schema The schema of the value.
+*
+* @returns The decoded value.
+*/
+function decodeValue(value, schema) {
+	if (typeof value !== "string" || !schema) return value;
+	switch (unwrapSchema(schema).type) {
+		case "number": return decodeNumber(value);
+		case "boolean": return decodeBoolean(value);
+		case "date": return decodeDate(value);
+		case "bigint": return decodeBigint(value);
+		default: return value;
+	}
+}
+/**
+* Fills in default values that are lost during the form data transfer. Booleans
+* of unchecked checkboxes become `false` and absent arrays become empty. Only
+* containers that are present in the decoded data are completed.
+*
+* @param schema The schema of the value.
+* @param parent The parent object or array holding the value.
+* @param key The key of the value within its parent.
+*/
+function fillDefaults(schema, parent, key) {
+	const unwrappedSchema = unwrapSchema(schema);
+	if (unwrappedSchema.type === "boolean") {
+		if (parent[key] === void 0) parent[key] = false;
+	} else if (unwrappedSchema.type === "array") if (Array.isArray(parent[key])) for (let index = 0; index < parent[key].length; index++) fillDefaults(unwrappedSchema.item, parent[key], index);
+	else parent[key] = [];
+	else if (unwrappedSchema.type === "tuple" || unwrappedSchema.type === "loose_tuple" || unwrappedSchema.type === "strict_tuple") {
+		if (Array.isArray(parent[key])) for (let index = 0; index < unwrappedSchema.items.length; index++) fillDefaults(unwrappedSchema.items[index], parent[key], index);
+	} else if (unwrappedSchema.type === "object" || unwrappedSchema.type === "loose_object" || unwrappedSchema.type === "strict_object") {
+		if (parent[key] && typeof parent[key] === "object") for (const entryKey in unwrappedSchema.entries) fillDefaults(unwrappedSchema.entries[entryKey], parent[key], entryKey);
+	} else if (unwrappedSchema.type === "union" || unwrappedSchema.type === "intersect" || unwrappedSchema.type === "variant") for (const option of unwrappedSchema.options) fillDefaults(option, parent, key);
+}
+/**
+* Decodes the entries of a form data object into nested form values using the
+* Valibot schema as the source of truth. Information that is lost during the
+* transfer via HTTP, like numbers, booleans, dates and unchecked checkboxes,
+* is restored based on the schema.
+*
+* The keys of the form data are expected to be the stringified field paths that
+* Formisch assigns to its field elements (for example `["todos",0,"label"]`).
+*
+* @param schema The form schema.
+* @param formData The form data object.
+*
+* @returns The decoded form values.
+*/
+/* @__NO_SIDE_EFFECTS__ */
+function decodeFormData(schema, formData) {
+	const values = {};
+	formData.forEach((value, key) => {
+		let path = null;
+		try {
+			path = JSON.parse(key);
+		} catch {}
+		if (Array.isArray(path) && path.length > 0 && (typeof value === "string" || value.size > 0 || value.name !== "")) {
+			let parentValue = values;
+			let parentSchema = schema;
+			for (let index = 0; index < path.length; index++) {
+				const segment = path[index];
+				if (typeof segment !== "string" && typeof segment !== "number" || segment === "" || segment === "__proto__" || segment === "prototype" || segment === "constructor") break;
+				if (Array.isArray(parentValue)) {
+					if (typeof segment === "string") break;
+					if (segment >= MAX_ARRAY_LENGTH) throw new Error(`Array exceeds the maximum length of ${MAX_ARRAY_LENGTH}`);
+				}
+				const childSchema = getChildSchema(parentSchema, segment);
+				if (index === path.length - 1) {
+					const unwrappedSchema = childSchema && unwrapSchema(childSchema);
+					if (unwrappedSchema && unwrappedSchema.type === "array") {
+						parentValue[segment] ??= [];
+						parentValue[segment].push(decodeValue(value, unwrappedSchema.item));
+					} else parentValue[segment] = decodeValue(value, childSchema);
+				} else {
+					if (parentValue[segment] == null) {
+						const schemaType = childSchema && unwrapSchema(childSchema).type;
+						parentValue[segment] = schemaType === "array" || schemaType === "tuple" || schemaType === "loose_tuple" || schemaType === "strict_tuple" ? [] : {};
+					} else if (typeof parentValue[segment] !== "object") break;
+					parentValue = parentValue[segment];
+					parentSchema = childSchema;
+				}
+			}
+		}
+	});
+	fillDefaults(schema, { values }, "values");
+	return values;
+}
+
 //#endregion
 //#region src/form/validateFormInput/validateFormInput.ts
 /**
@@ -585,44 +820,49 @@ function createFormStore(config, parse) {
 async function validateFormInput(internalFormStore, config) {
 	internalFormStore.validators++;
 	internalFormStore.isValidating.value = true;
-	const result = await internalFormStore.parse(untrack(() => /* @__PURE__ */ getFieldInput(internalFormStore)));
-	let rootErrors;
-	let nestedErrors;
-	if (result.issues) {
-		nestedErrors = {};
-		for (const issue of result.issues) if (issue.path) {
-			const path = [];
-			for (const pathItem of issue.path) {
-				const key = pathItem.key;
-				const keyType = typeof key;
-				const itemType = pathItem.type;
-				if (keyType !== "string" && keyType !== "number" || itemType === "map" || itemType === "set") break;
-				path.push(key);
-			}
-			const name = JSON.stringify(path);
-			const fieldErrors = nestedErrors[name];
-			if (fieldErrors) fieldErrors.push(issue.message);
-			else nestedErrors[name] = [issue.message];
-		} else if (rootErrors) rootErrors.push(issue.message);
-		else rootErrors = [issue.message];
-	}
-	let shouldFocus = config?.shouldFocus ?? false;
-	batch(() => {
-		walkFieldStore(internalFormStore, (internalFieldStore) => {
-			if (internalFieldStore.name === "[]") internalFieldStore.errors.value = rootErrors ?? null;
-			else {
-				const fieldErrors = nestedErrors?.[internalFieldStore.name] ?? null;
-				internalFieldStore.errors.value = fieldErrors;
-				if (shouldFocus && fieldErrors) {
-					internalFieldStore.elements[0]?.focus();
-					shouldFocus = false;
+	try {
+		const result = await internalFormStore.parse(untrack(() => /* @__PURE__ */ getFieldInput(internalFormStore)));
+		let rootErrors;
+		let nestedErrors;
+		if (result.issues) {
+			nestedErrors = {};
+			for (const issue of result.issues) if (issue.path) {
+				const path = [];
+				for (const pathItem of issue.path) {
+					const key = pathItem.key;
+					const keyType = typeof key;
+					const itemType = pathItem.type;
+					if (keyType !== "string" && keyType !== "number" || itemType === "map" || itemType === "set") break;
+					path.push(key);
 				}
-			}
+				const name = JSON.stringify(path);
+				const fieldErrors = nestedErrors[name];
+				if (fieldErrors) fieldErrors.push(issue.message);
+				else nestedErrors[name] = [issue.message];
+			} else if (rootErrors) rootErrors.push(issue.message);
+			else rootErrors = [issue.message];
+		}
+		let shouldFocus = config?.shouldFocus ?? false;
+		batch(() => {
+			walkFieldStore(internalFormStore, (internalFieldStore) => {
+				if (internalFieldStore.name === "[]") internalFieldStore.errors.value = rootErrors ?? null;
+				else {
+					const fieldErrors = nestedErrors?.[internalFieldStore.name] ?? null;
+					internalFieldStore.errors.value = fieldErrors;
+					if (shouldFocus && fieldErrors && focusFieldElement(internalFieldStore)) shouldFocus = false;
+				}
+			});
+			internalFormStore.validators--;
+			internalFormStore.isValidating.value = internalFormStore.validators > 0;
 		});
-		internalFormStore.validators--;
-		internalFormStore.isValidating.value = internalFormStore.validators > 0;
-	});
-	return result;
+		return result;
+	} catch (error) {
+		batch(() => {
+			internalFormStore.validators--;
+			internalFormStore.isValidating.value = internalFormStore.validators > 0;
+		});
+		throw error;
+	}
 }
 
 //#endregion
@@ -648,4 +888,4 @@ function validateIfRequired(internalFormStore, internalFieldStore, validationMod
 const INTERNAL = "~internal";
 
 //#endregion
-export { INTERNAL, batch, copyItemState, createFormStore, createId, createSignal, framework, getDirtyFieldInput, getElementInput, getFieldBool, getFieldInput, getFieldStore, initializeFieldStore, resetItemState, setFieldBool, setFieldInput, setInitialFieldInput, swapItemState, untrack, validateFormInput, validateIfRequired, walkFieldStore };
+export { INTERNAL, batch, copyItemState, createFormStore, createId, createSignal, decodeFormData, focusFieldElement, framework, getDirtyFieldInput, getElementInput, getFieldBool, getFieldInput, getFieldStore, initializeFieldStore, resetItemState, setFieldBool, setFieldInput, setInitialFieldInput, swapItemState, untrack, validateFormInput, validateIfRequired, walkFieldStore };

package/dist/methods/index.svelte.d.ts

@@ -13,7 +13,7 @@ interface FocusFieldConfig<TSchema extends FormSchema, TFieldPath extends Requir
   readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
 }
 /**
-* Focuses the first input element of a field. This is useful for
+* Focuses the first focusable input element of a field. This is useful for
 * programmatically setting focus to a specific field, such as after
 * validation errors or user interactions.
 *

package/dist/methods/index.svelte.js

@@ -1,8 +1,8 @@
-import { INTERNAL, batch, copyItemState, createId, getDirtyFieldInput, getFieldBool, getFieldInput, getFieldStore, initializeFieldStore, resetItemState, setFieldInput, setInitialFieldInput, swapItemState, untrack, validateFormInput, validateIfRequired, walkFieldStore } from "../core/index.svelte";
+import { INTERNAL, batch, copyItemState, createId, focusFieldElement, getDirtyFieldInput, getFieldBool, getFieldInput, getFieldStore, initializeFieldStore, resetItemState, setFieldInput, setInitialFieldInput, swapItemState, untrack, validateFormInput, validateIfRequired, walkFieldStore } from "../core/index.svelte";
 
 //#region src/focus/focus.ts
 /**
-* Focuses the first input element of a field. This is useful for
+* Focuses the first focusable input element of a field. This is useful for
 * programmatically setting focus to a specific field, such as after
 * validation errors or user interactions.
 *
@@ -10,7 +10,7 @@ import { INTERNAL, batch, copyItemState, createId, getDirtyFieldInput, getFieldB
 * @param config The focus field configuration.
 */
 function focus(form, config) {
-	getFieldStore(form[INTERNAL], config.path).elements[0]?.focus();
+	focusFieldElement(getFieldStore(form[INTERNAL], config.path));
 }
 
 //#endregion

package/dist/runes/useField/useField.svelte.js

@@ -41,7 +41,13 @@ export function useField(form, config) {
             [createAttachmentKey()](element) {
                 internalFieldStore.elements.push(element);
                 return () => {
-                    internalFieldStore.elements = internalFieldStore.elements.filter((el) => el !== element);
+                    const elements = internalFieldStore.elements.filter((el) => el !== element);
+                    // Keep `initialElements` in sync unless a reorder has moved the
+                    // elements, so resetting a remounted field restores its live element
+                    if (internalFieldStore.elements === internalFieldStore.initialElements) {
+                        internalFieldStore.initialElements = elements;
+                    }
+                    internalFieldStore.elements = elements;
                 };
             },
             onfocus() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formisch/svelte",
   "description": "The lightweight, schema-first, and fully type-safe form library for Svelte",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "license": "MIT",
   "author": "Fabian Hiller",
   "homepage": "https://formisch.dev",
@@ -58,7 +58,8 @@
     "@sveltejs/vite-plugin-svelte": "^6.2.0",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/svelte": "^5.2.4",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@types/node": "24.0.13",
+    "@vitest/coverage-v8": "^4.1.7",
     "eslint": "^9.35.0",
     "eslint-plugin-svelte": "^3.12.2",
     "globals": "^16.4.0",
@@ -69,7 +70,7 @@
     "typescript": "^5.9.2",
     "valibot": "^1.4.1",
     "vite": "^7.1.5",
-    "vitest": "^3.2.4"
+    "vitest": "^4.1.7"
   },
   "peerDependencies": {
     "svelte": "^5.29.0",