@zeno-lib/forms 0.7.1 → 0.9.0

package/dist/create-zeno-form.d.mts

@@ -1,7 +1,7 @@
 import { FieldControlProps } from "./lib/use-field-control.mjs";
 import { ValidationMode } from "./lib/validation-modes.mjs";
-import { DeepKeys, DeepValue, FormAsyncValidateOrFn, FormOptions, FormValidateOrFn } from "@tanstack/react-form";
-import { ComponentProps, ReactNode } from "react";
+import { AppFieldExtendedReactFieldGroupApi, AppFieldExtendedReactFormApi, BaseFormOptions, DeepKeys, DeepValue, FieldsMap, FormAsyncValidateOrFn, FormOptions, FormValidateOrFn, WithFormProps } from "@tanstack/react-form";
+import { ComponentProps, PropsWithChildren, ReactNode } from "react";
 //#region src/create-zeno-form.d.ts
 type StandardSchema<T> = {
   readonly "~standard": {
@@ -122,17 +122,26 @@ type CreateZenoFormConfig<FC extends Record<string, AnyComponent>, FMC extends R
  */
 export declare function createZenoForm<FC extends Record<string, AnyComponent>, FMC extends Record<string, AnyComponent>>(config: CreateZenoFormConfig<FC, FMC>): {
   useAppFields: <TForm extends AnyAppForm>(form: TForm) => FieldWrappers<FC, FormDataOf<TForm>>;
-  useAppForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(props: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, FC, FMC>;
+  useAppForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(props: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, FC, FMC>;
   useForm: <TFormData, TOnMount extends SyncValidator<TFormData> = SyncValidator<TFormData>, TOnChange extends SyncValidator<TFormData> = SyncValidator<TFormData>, TOnChangeAsync extends AsyncValidator<TFormData> = AsyncValidator<TFormData>, TOnBlur extends SyncValidator<TFormData> = SyncValidator<TFormData>, TOnBlurAsync extends AsyncValidator<TFormData> = AsyncValidator<TFormData>, TOnSubmit extends SyncValidator<TFormData> = SyncValidator<TFormData>, TOnSubmitAsync extends AsyncValidator<TFormData> = AsyncValidator<TFormData>, TOnDynamic extends SyncValidator<TFormData> = SyncValidator<TFormData>, TOnDynamicAsync extends AsyncValidator<TFormData> = AsyncValidator<TFormData>, TOnServer extends AsyncValidator<TFormData> = AsyncValidator<TFormData>, TSubmitMeta = unknown>(options: UseFormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").FormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & import("@tanstack/react-form").ReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta> & NoInfer<FMC> & {
     AppField: import("@tanstack/react-form").FieldComponent<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, NoInfer<FC>>;
-    AppForm: import("react").ComponentType<import("react").PropsWithChildren<{}>>;
-  } & FieldWrappers<FC, FormDataOf<import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, FC, FMC>>> & FMC;
-  withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps extends object = {}>({ render, props, defaultValues }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, FC, FMC, TSubmitMeta, TRenderProps>) => <TFormData, TFields extends import("@tanstack/react-form").DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | import("@tanstack/react-form").FieldsMap<TFormData, TFieldGroupData>, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TFormSubmitMeta>(params: import("react").PropsWithChildren<NoInfer<TRenderProps> & {
-    form: import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import("@tanstack/react-form").FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, FC, FMC> | import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, FC, FMC>;
+    AppForm: import("react").ComponentType<PropsWithChildren<{}>>;
+  } & FieldWrappers<FC, FormDataOf<AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, FC, FMC>>> & FMC;
+  withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps extends object = {}>({ render, ...options }: BaseFormOptions<TFieldGroupData, TSubmitMeta> & {
+    props?: TRenderProps;
+    render: (props: PropsWithChildren<NoInfer<TRenderProps> & {
+      group: AppFieldExtendedReactFieldGroupApi<unknown, TFieldGroupData, string | FieldsMap<unknown, TFieldGroupData>, undefined | FormValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, undefined | FormAsyncValidateOrFn<unknown>, unknown extends TSubmitMeta ? never : TSubmitMeta, FC, FMC & FieldWrappers<FC, TFieldGroupData>>;
+    }>) => ReactNode;
+  }) => <TFormData, TFields extends import("@tanstack/react-form").DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | FieldsMap<TFormData, TFieldGroupData>, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TFormSubmitMeta>(params: PropsWithChildren<NoInfer<TRenderProps> & {
+    form: AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, FC, FMC> | AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, FC, FMC>;
     fields: TFields;
   }>) => ReturnType<import("react").FunctionComponent>;
-  withForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TRenderProps extends object = {}>({ render, props }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, FC, FMC, TRenderProps>) => import("react").FunctionComponent<import("react").PropsWithChildren<NoInfer<[unknown] extends [TRenderProps] ? any : TRenderProps> & {
-    form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, [unknown] extends [FC] ? any : FC, [unknown] extends [FMC] ? any : FMC>;
+  withForm: <TFormData, TOnMount extends SyncValidator<TFormData>, TOnChange extends SyncValidator<TFormData>, TOnChangeAsync extends AsyncValidator<TFormData>, TOnBlur extends SyncValidator<TFormData>, TOnBlurAsync extends AsyncValidator<TFormData>, TOnSubmit extends SyncValidator<TFormData>, TOnSubmitAsync extends AsyncValidator<TFormData>, TOnDynamic extends SyncValidator<TFormData>, TOnDynamicAsync extends AsyncValidator<TFormData>, TOnServer extends AsyncValidator<TFormData>, TSubmitMeta, TRenderProps extends object = {}>({ render, ...options }: Omit<WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, FC, FMC, TRenderProps>, "render"> & {
+    render: (props: PropsWithChildren<NoInfer<TRenderProps> & {
+      form: AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, FC, FMC & FieldWrappers<FC, TFormData>>;
+    }>) => ReactNode;
+  }) => import("react").FunctionComponent<PropsWithChildren<NoInfer<[unknown] extends [TRenderProps] ? any : TRenderProps> & {
+    form: AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, [unknown] extends [FC] ? any : FC, [unknown] extends [FMC] ? any : FMC>;
   }>>;
 };
 //#endregion

package/dist/create-zeno-form.mjs

@@ -2,7 +2,7 @@
 import { applyValidationError } from "./lib/apply-validation-error.mjs";
 import { fieldContext, formContext } from "./lib/contexts.mjs";
 import { withDefaultProps } from "./lib/default-props.mjs";
-import { deepMergeDefaults, extractZodDefaults } from "./lib/schema-defaults.mjs";
+import { deepMergeDefaults, extractZodDefaults, pickSchemaShape } from "./lib/schema-defaults.mjs";
 import { getRequiredPaths } from "./lib/schema-required.mjs";
 import { DEFAULT_VALIDATION_MODE, setFormZenoState } from "./lib/validation-modes.mjs";
 import { withEmptyStartValues } from "./lib/empty-value.mjs";
@@ -62,27 +62,63 @@ function withComponentDefaults(components, defaultProps) {
 function createZenoForm(config) {
 	const fieldComponents = withComponentDefaults(config.fieldComponents, config.defaultProps);
 	const formComponents = withComponentDefaults(config.formComponents, config.defaultProps);
-	const { useAppForm, withFieldGroup, withForm } = createFormHook({
+	const { useAppForm, withFieldGroup: withTanStackFieldGroup, withForm: withTanStackForm } = createFormHook({
 		fieldComponents,
 		fieldContext,
 		formComponents,
 		formContext
 	});
+	const fieldsByForm = /* @__PURE__ */ new WeakMap();
+	function getAppFields(form) {
+		const cached = fieldsByForm.get(form);
+		if (cached !== void 0) return cached;
+		const Field = form.AppField;
+		const wrappers = {};
+		for (const key of Object.keys(fieldComponents)) {
+			const Impl = fieldComponents[key];
+			wrappers[key] = ({ name, validators, listeners, ...props }) => /* @__PURE__ */ jsx(Field, {
+				listeners,
+				name,
+				validators,
+				children: () => /* @__PURE__ */ jsx(Impl, { ...props })
+			});
+		}
+		fieldsByForm.set(form, wrappers);
+		return wrappers;
+	}
 	function useAppFields(form) {
-		return useMemo(() => {
-			const Field = form.AppField;
-			const wrappers = {};
-			for (const key of Object.keys(fieldComponents)) {
-				const Impl = fieldComponents[key];
-				wrappers[key] = ({ name, validators, listeners, ...props }) => /* @__PURE__ */ jsx(Field, {
-					listeners,
-					name,
-					validators,
-					children: () => /* @__PURE__ */ jsx(Impl, { ...props })
-				});
-			}
-			return wrappers;
-		}, [form]);
+		return getAppFields(form);
+	}
+	function withNamedFields(target) {
+		for (const [name, field] of Object.entries(getAppFields(target))) if (!(name in target)) Object.assign(target, { [name]: field });
+		return target;
+	}
+	/**
+	* TanStack's `withForm`, whose `render` gets a `form` carrying the typed
+	* fields, as `useForm`'s does: `<form.InputField name="email" />`.
+	*/
+	function withForm({ render, ...options }) {
+		return withTanStackForm({
+			...options,
+			render: (props) => render({
+				...props,
+				form: withNamedFields(props.form)
+			})
+		});
+	}
+	/**
+	* TanStack's `withFieldGroup`, whose `render` gets a `group` carrying the
+	* typed fields of the group's own values, as `useForm`'s form does:
+	* `<group.InputField name="street" />`.
+	*/
+	function withFieldGroup({ render, ...options }) {
+		return withTanStackFieldGroup({
+			...options,
+			render: (props) => render({
+				...props,
+				group: withNamedFields(props.group)
+			})
+		});
 	}
 	function useForm(options) {
 		const { schema, validators: validatorsInput, validationLogic: userValidationLogic, disabled = false, hideFieldErrors = false, requiredIndicator = true, unsavedChangesWarning = false, defaultValues: userDefaultValues, onSubmit: userOnSubmit, ...rest } = options;
@@ -100,22 +136,32 @@ function createZenoForm(config) {
 			resolvedValidationLogic = mode === "blur-then-change" ? blurThenChangeLogic : void 0;
 		}
 		const wrappedOnSubmit = userOnSubmit ? (async (props) => {
-			const { submissionAttempts } = props.formApi.state;
+			const { formApi } = props;
+			const { submissionAttempts } = formApi.state;
+			let superseded = false;
+			const watch = formApi.store.subscribe(() => {
+				if (formApi.state.submissionAttempts !== submissionAttempts) superseded = true;
+			});
 			try {
 				await userOnSubmit(props);
 			} catch (error) {
 				if (error instanceof ValidationError) {
-					applyValidationError(props.formApi, error);
+					applyValidationError(formApi, error);
 					return;
 				}
-				const { state } = props.formApi;
-				if (state.values === props.value && state.submissionAttempts === submissionAttempts) setSubmitError(props.formApi, error);
+				if (!superseded) setSubmitError(formApi, error);
 				throw error;
+			} finally {
+				watch.unsubscribe();
 			}
 		}) : void 0;
 		const requiredFields = useMemo(() => schema ? getRequiredPaths(schema) : /* @__PURE__ */ new Set(), [schema]);
 		const schemaDefaults = useMemo(() => schema ? withEmptyStartValues(schema, extractZodDefaults(schema)) : void 0, [schema]);
-		const mergedDefaultValues = useMemo(() => schemaDefaults ? deepMergeDefaults(schemaDefaults, userDefaultValues) : userDefaultValues, [schemaDefaults, userDefaultValues]);
+		const mergedDefaultValues = useMemo(() => schemaDefaults ? deepMergeDefaults(schemaDefaults, pickSchemaShape(schema, userDefaultValues)) : userDefaultValues, [
+			schema,
+			schemaDefaults,
+			userDefaultValues
+		]);
 		const rebased = useRebasedDefaultValues(mergedDefaultValues);
 		const listeners = withMountListener(rest.listeners, rebased.onMount);
 		const form = useAppForm({
@@ -135,8 +181,7 @@ function createZenoForm(config) {
 		});
 		useDisabledOption(form, disabled);
 		useUnsavedChangesWarning(form, unsavedChangesWarning);
-		const fields = useAppFields(form);
-		return useMemo(() => Object.assign(form, fields, formComponents), [form, fields]);
+		return useMemo(() => Object.assign(form, getAppFields(form), formComponents), [form]);
 	}
 	return {
 		useAppFields,

package/dist/lib/schema-defaults.d.mts

@@ -8,6 +8,7 @@ type SchemaDef = {
   readonly type?: string;
   readonly innerType?: SchemaNode;
   readonly shape?: Record<string, SchemaNode>;
+  readonly catchall?: SchemaNode;
   readonly in?: SchemaNode;
   readonly element?: SchemaNode;
   readonly defaultValue?: unknown;
@@ -20,6 +21,7 @@ type ExtractResult = {
 };
 declare function extractZodDefaults(schema: SchemaNode): Record<string, unknown>;
 declare function extractZodDefaultAt(schema: SchemaNode, keys: readonly PropertyKey[]): ExtractResult;
+declare function pickSchemaShape<T>(schema: SchemaNode, value: T): T;
 declare function deepMergeDefaults(schemaDefaults: Record<string, unknown>, userDefaults: Record<string, unknown> | undefined): Record<string, unknown>;
 //#endregion
-export { deepMergeDefaults, extractZodDefaultAt, extractZodDefaults };
+export { deepMergeDefaults, extractZodDefaultAt, extractZodDefaults, pickSchemaShape };

package/dist/lib/schema-defaults.mjs

@@ -92,6 +92,48 @@ function extractZodDefaultAt(schema, keys) {
 function isPlainObject(value) {
 	return typeof value === "object" && value !== null && Object.getPrototypeOf(value) === Object.prototype;
 }
+function acceptsOnlyShape(def) {
+	return def.catchall === void 0 || getDef(def.catchall)?.type === "never";
+}
+function pickShape(node, value) {
+	let current = node;
+	for (let depth = 0; depth < MAX_WRAPPER_DEPTH; depth += 1) {
+		const def = getDef(current);
+		switch (def?.type) {
+			case "object": {
+				const { shape } = def;
+				if (!(shape && isPlainObject(value) && acceptsOnlyShape(def))) return value;
+				const result = {};
+				for (const [key, field] of Object.entries(shape)) if (Object.hasOwn(value, key)) result[key] = pickShape(field, value[key]);
+				return result;
+			}
+			case "array": {
+				const { element } = def;
+				return element && Array.isArray(value) ? value.map((item) => pickShape(element, item)) : value;
+			}
+			case "default":
+			case "nonoptional":
+			case "nullable":
+			case "optional":
+			case "prefault":
+			case "readonly":
+				current = def.innerType;
+				continue;
+			case "pipe":
+				current = def.in;
+				continue;
+			default: return value;
+		}
+	}
+	return value;
+}
+function pickSchemaShape(schema, value) {
+	try {
+		return pickShape(schema, value);
+	} catch {
+		return value;
+	}
+}
 function deepMergeDefaults(schemaDefaults, userDefaults) {
 	if (!userDefaults) return schemaDefaults;
 	const result = { ...schemaDefaults };
@@ -104,4 +146,4 @@ function deepMergeDefaults(schemaDefaults, userDefaults) {
 	return result;
 }
 //#endregion
-export { deepMergeDefaults, extractZodDefaultAt, extractZodDefaults };
+export { deepMergeDefaults, extractZodDefaultAt, extractZodDefaults, pickSchemaShape };

package/dist/lib/submit-action.mjs

@@ -1,5 +1,6 @@
 import { applyValidationError } from "./apply-validation-error.mjs";
 import { toActionError } from "./action-result.mjs";
+import { pickSchemaShape } from "./schema-defaults.mjs";
 import { getFormSchema } from "./validation-modes.mjs";
 import { ValidationError } from "./validation-error.mjs";
 //#region src/lib/submit-action.ts
@@ -36,10 +37,14 @@ async function submitAction(props, action, options = {}) {
 		return result;
 	}
 	const { reset } = options;
-	if (reset === true) formApi.reset(result.data);
+	if (reset === true) formApi.reset(toFormValues(formApi, result.data));
 	else if (reset === "values") formApi.reset(value);
-	else if (typeof reset === "function") formApi.reset(reset(result.data));
+	else if (typeof reset === "function") formApi.reset(toFormValues(formApi, reset(result.data)));
 	return result;
 }
+function toFormValues(formApi, data) {
+	const schema = getFormSchema(formApi);
+	return schema ? pickSchemaShape(schema, data) : data;
+}
 //#endregion
 export { applyActionError, submitAction };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeno-lib/forms",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "repository": {
     "url": "https://github.com/zeno-lib/zeno.git",
     "directory": "packages/forms"
@@ -37,7 +37,7 @@
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@zeno-lib/test": "^0.1.1",
-    "@zeno-lib/typescript": "^1.1.0",
+    "@zeno-lib/typescript": "^1.2.0",
     "@zeno-lib/ui": "^0.0.1",
     "lucide-react": "^1.52.0",
     "tsdown": "^0.23.0",

package/src/composition.test.tsx

@@ -0,0 +1,140 @@
+import { cleanup, render, screen, within } from "@zeno-lib/test/testing-library"
+import userEvent from "@zeno-lib/test/user-event"
+import { afterEach, describe, expect, test, vi } from "vitest"
+import { z } from "zod"
+import {
+  Form,
+  FormProvider,
+  useAppForm,
+  useForm,
+  withFieldGroup,
+  withForm,
+} from "./create-form"
+
+const STREET_LABEL = /Street/
+const CITY_LABEL = /City/
+const BILLING_STREET_LABEL = /Billing street/
+
+afterEach(() => {
+  cleanup()
+})
+
+const address = z.object({ city: z.string(), street: z.string() })
+const schema = z.object({ billing: address, shipping: address })
+type Values = z.infer<typeof schema>
+const VALUES: Values = {
+  billing: { city: "", street: "" },
+  shipping: { city: "", street: "" },
+}
+
+const AddressGroup = withFieldGroup({
+  defaultValues: VALUES.billing,
+  props: { title: "" },
+  render: ({ group, title }) => (
+    <fieldset aria-label={title}>
+      <group.InputField label="Street" name="street" />
+      <group.InputField label="City" name="city" />
+    </fieldset>
+  ),
+})
+
+describe("withFieldGroup", () => {
+  test("a group's named field binds under the group's path", async () => {
+    const user = userEvent.setup()
+    let current: { state: { values: Values } } | undefined
+    function H() {
+      const form = useForm({ onSubmit: vi.fn(), schema })
+      current = form
+      return (
+        <FormProvider form={form}>
+          <Form>
+            <AddressGroup fields="billing" form={form} title="Billing" />
+            <AddressGroup fields="shipping" form={form} title="Shipping" />
+          </Form>
+        </FormProvider>
+      )
+    }
+    render(<H />)
+    const shipping = within(screen.getByRole("group", { name: "Shipping" }))
+    const street = shipping.getByLabelText(STREET_LABEL) as HTMLInputElement
+    expect(street.name).toBe("shipping.street")
+    await user.type(street, "Main St")
+    expect(current?.state.values.shipping.street).toBe("Main St")
+    expect(current?.state.values.billing.street).toBe("")
+  })
+
+  test("a group nested in a group binds under both paths", async () => {
+    const user = userEvent.setup()
+    const Nested = withFieldGroup({
+      defaultValues: { billing: VALUES.billing },
+      render: ({ group }) => (
+        <AddressGroup fields="billing" form={group} title="Nested" />
+      ),
+    })
+    const nestedSchema = z.object({ order: z.object({ billing: address }) })
+    let current: { state: { values: z.infer<typeof nestedSchema> } } | undefined
+    function H() {
+      const form = useForm({ onSubmit: vi.fn(), schema: nestedSchema })
+      current = form
+      return (
+        <FormProvider form={form}>
+          <Form>
+            <Nested fields="order" form={form} />
+          </Form>
+        </FormProvider>
+      )
+    }
+    render(<H />)
+    const city = screen.getByLabelText(CITY_LABEL) as HTMLInputElement
+    expect(city.name).toBe("order.billing.city")
+    await user.type(city, "Bern")
+    expect(current?.state.values.order.billing.city).toBe("Bern")
+  })
+})
+
+describe("withForm", () => {
+  const BillingSection = withForm({
+    defaultValues: VALUES,
+    render: ({ form }) => (
+      <form.InputField label="Billing street" name="billing.street" />
+    ),
+  })
+
+  test("a section's form has the fields when useAppForm made it", async () => {
+    const user = userEvent.setup()
+    let current: { state: { values: Values } } | undefined
+    function H() {
+      const form = useAppForm({ defaultValues: VALUES, onSubmit: vi.fn() })
+      current = form
+      return (
+        <FormProvider form={form}>
+          <Form>
+            <BillingSection form={form} />
+          </Form>
+        </FormProvider>
+      )
+    }
+    render(<H />)
+    await user.type(screen.getByLabelText(BILLING_STREET_LABEL), "Main St")
+    expect(current?.state.values.billing.street).toBe("Main St")
+  })
+
+  test("a section keeps the fields of useForm's form as they are", () => {
+    const seen: unknown[] = []
+    function H() {
+      const form = useForm({ onSubmit: vi.fn(), schema })
+      seen.push(form.InputField)
+      return (
+        <FormProvider form={form}>
+          <Form>
+            <BillingSection form={form} />
+          </Form>
+        </FormProvider>
+      )
+    }
+    const { rerender } = render(<H />)
+    rerender(<H />)
+    expect(seen).toHaveLength(2)
+    expect(seen[1]).toBe(seen[0])
+  })
+})