@parallelworks/ui 0.44.0 → 0.45.0

package/dist/form/Fields/TextAreaField.js

@@ -1,24 +1,19 @@
-import { FieldWrapper } from "../FieldWrapper.js";
+import { cx } from "../../cx.js";
+import { fieldBox } from "../../components/fieldBox.js";
+import { Field } from "../../components/Field.js";
+import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { getPlaceholder } from "../utils/getPlaceholder.js";
-import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/form/Fields/TextAreaField.tsx
 function TextAreaField(props) {
-	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact } = props;
+	const { field, disabled, onChange } = props;
 	const [value, change] = useFieldValue(field.name ?? "");
-	return /* @__PURE__ */ jsx(FieldWrapper, {
-		optional: field.optional,
-		label,
-		tooltipComponent,
-		description: field.description,
-		labelPosition,
-		spaceCompact,
-		children: ({ id, describedBy }) => /* @__PURE__ */ jsx("textarea", {
-			className: clsx("theme-input h-[82px] w-full rounded leading-4 overflow-y-scroll", disabled && "disabled", missing && "border-red-600 focus:border-red-600 focus:ring-red-500"),
-			id,
-			"aria-describedby": describedBy,
-			"aria-required": field.optional ? void 0 : true,
+	return /* @__PURE__ */ jsx(Field, {
+		...fieldFrame(props),
+		children: (control) => /* @__PURE__ */ jsx("textarea", {
+			...control,
+			className: cx(fieldBox({ multiline: true }), "h-20 resize-y"),
 			name: field.name,
 			value: value ?? "",
 			placeholder: getPlaceholder(field.placeholder, field.default),

package/dist/form/Form.d.ts

@@ -1,6 +1,7 @@
 import { type UseFormReturn } from 'react-hook-form';
 import type { WorkflowVariables } from '../engine.js';
 import { type FieldComponent } from './fieldRegistry.js';
+import { type ServerError } from './validation.js';
 interface FormMeta {
     labelPosition?: 'left' | 'top' | undefined;
     spaceCompact?: boolean | undefined;
@@ -66,8 +67,12 @@ export interface DynamicFormProps {
     /** Every change to the form's values, as it happens. */
     onValuesChange?: (values: FormValues) => void;
     labelPosition?: 'left' | 'top';
-    /** Fields to mark as missing a value, by name; the form sets them as `required` errors. */
-    missingFields?: string[] | undefined;
+    /**
+     * Fields the server rejected, each shown under its field until the person changes it. They never
+     * hold back Next or a submit, since the server checks again, and a wizard turns to the first page
+     * holding one. `useFieldMessages` from the problem package gives them from a problem response.
+     */
+    serverErrors?: readonly ServerError[] | undefined;
     spaceCompact?: boolean;
     organizationVariables?: WorkflowVariables | undefined;
     /** A remote workflow's repo/branch/yaml, so `${{ remote.* }}` resolves the same here as it does on the run. */

package/dist/form/Form.js

@@ -1,11 +1,15 @@
-import { useWorkflowEngine } from "../components/Provider.js";
+import { cx } from "../cx.js";
+import { Loader } from "../components/Loader.js";
+import { useStrings, useWorkflowEngine } from "../components/Provider.js";
+import { Button } from "../components/Button.js";
 import { InfoTip } from "../components/InfoTip.js";
-import Loader from "../components/Loader.js";
+import { FieldRowContext } from "../components/Field.js";
+import { Section } from "../components/Section.js";
 import { parseWizardConfig } from "./Wizard/utils.js";
 import { inputWidth, resolvedFlag } from "./lib.js";
-import { FieldGroup } from "./FieldGroup.js";
 import { resolveFormLayout } from "./layout.js";
 import { FormLayout, LayoutCSSContext } from "./FormLayout.js";
+import { FormChecksContext, RequiredFieldContext } from "./validation.js";
 import { FieldRegistryContext, Registry } from "./fieldRegistry.js";
 import { EditingScope, useFormEditing } from "./formEditing.js";
 import { shareEqual } from "./utils/shareEqual.js";
@@ -14,9 +18,8 @@ import { atIndex, fieldPath, rowIndexOf } from "./utils/fieldPath.js";
 import { getValueUsingPath } from "./utils/getValueUsingPath.js";
 import { getParentValue } from "./utils/getParentValue.js";
 import { WizardContainer } from "./Wizard/WizardContainer.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, memo, useContext, useEffect, useEffectEvent, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createContext, memo, useCallback, useContext, useEffect, useEffectEvent, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { dequal } from "dequal";
 import { FormProvider, get, useForm, useFormContext, useFormState, useWatch } from "react-hook-form";
 //#region src/form/Form.tsx
@@ -268,11 +271,13 @@ function readField(field, values, index, workflowForm) {
 }
 /**
 * One field of the schema. It renders again only when what it reads changes: an input its expressions
-* or conditions read, or whether the form marks it missing. Its own value is its input's business.
+* or conditions read, or the error the form shows under it. Its own value is its input's business.
 */
 var FormField = memo(function FormField({ fieldName, optionsField, nested, fieldNamePrefix, arrayIndex, computeOn, onRowChange, labelPosition, spaceCompact }) {
 	const { control, getValues, setValue, unregister } = useFormContext();
 	const { workflowForm } = useContext(FormOptionsContext);
+	const { form: strings } = useStrings();
+	const inRow = useContext(FieldRowContext);
 	const editing = useFormEditing();
 	const parse = useFieldParse(optionsField, nested ? arrayIndex : void 0);
 	const index = nested ? arrayIndex ?? rowIndexOf(fieldNamePrefix) : void 0;
@@ -336,18 +341,21 @@ var FormField = memo(function FormField({ fieldName, optionsField, nested, field
 	} : void 0;
 	if (field.type === "group") {
 		const meta = resolveMetaOverrides(field.options, labelPosition, spaceCompact);
-		const group = /* @__PURE__ */ jsx(FieldGroup, {
+		const group = /* @__PURE__ */ jsx(Section, {
 			title: field.label,
 			collapsible: !field.noCollapse,
 			defaultOpen: !field.collapsed,
 			children: /* @__PURE__ */ jsx(EditingScope, {
 				editing,
 				path,
-				children: /* @__PURE__ */ jsx(FieldsFromOptions, {
-					options: field.options ?? {},
-					parentInfo,
-					labelPosition: meta.labelPosition,
-					spaceCompact: meta.spaceCompact
+				children: /* @__PURE__ */ jsx(FieldRowContext, {
+					value: false,
+					children: /* @__PURE__ */ jsx(FieldsFromOptions, {
+						options: field.options ?? {},
+						parentInfo,
+						labelPosition: meta.labelPosition,
+						spaceCompact: meta.spaceCompact
+					})
 				})
 			})
 		});
@@ -383,18 +391,25 @@ var FormField = memo(function FormField({ fieldName, optionsField, nested, field
 		const fieldOptions = fieldObj.options;
 		onChange = (val) => onRowChange(fieldName, arrayIndex ?? 0, flagValue(fieldOptions?.["offOption"], false), flagValue(fieldOptions?.["onOption"], true), val);
 	}
+	const required = !fieldObj.optional && !fieldObj.disabled && fieldObj.type !== "boolean" && !editing;
 	const input = /* @__PURE__ */ jsx("div", {
-		className: clsx("flex w-full", labelPosition === "left" ? "mb-[15px]" : "mb-[5px]"),
-		children: /* @__PURE__ */ jsx(Registry, {
-			field: fieldObj,
-			label: fieldObj.label ?? "",
-			labelPosition,
-			missing: get(errors, name) !== void 0,
-			onChange,
-			disabled: Boolean(fieldObj.disabled),
-			computeOn: computeOn || fieldObj.computeOn,
-			spaceCompact,
-			tooltipComponent
+		className: inRow ? "grid grid-rows-subgrid [&>:not([data-field-row])]:row-span-2" : cx("flex w-full", labelPosition === "left" ? "mb-[15px]" : "mb-[5px]"),
+		children: /* @__PURE__ */ jsx(RequiredFieldContext, {
+			value: required ? {
+				name,
+				message: strings.required
+			} : null,
+			children: /* @__PURE__ */ jsx(Registry, {
+				field: fieldObj,
+				label: fieldObj.label ?? "",
+				labelPosition,
+				error: errorMessage(get(errors, name), strings),
+				onChange,
+				disabled: Boolean(fieldObj.disabled),
+				computeOn: computeOn || fieldObj.computeOn,
+				spaceCompact,
+				tooltipComponent
+			})
 		})
 	});
 	if (!editing || !path) return input;
@@ -409,6 +424,13 @@ var FormField = memo(function FormField({ fieldName, optionsField, nested, field
 		})
 	});
 });
+/** The message under a field for its error, if it has one of its own rather than errors in fields
+*  inside it. */
+function errorMessage(error, strings) {
+	if (typeof error?.type !== "string") return;
+	if (typeof error.message === "string" && error.message !== "") return error.message;
+	return error.type === "server" ? strings.checkValue : strings.required;
+}
 /** Renders a schema's fields. Inside another field, `parentInfo` says where their values sit. */
 function FieldsFromOptions({ options = {}, parentInfo, labelPosition = "left", spaceCompact = false }) {
 	const editing = useFormEditing();
@@ -543,16 +565,16 @@ function DynamicFormContent({ options, labelPosition, spaceCompact, organization
 			options: opts
 		}), onSubmit !== void 0 && !workflowForm && /* @__PURE__ */ jsx("div", {
 			className: "mt-4",
-			children: /* @__PURE__ */ jsx("input", {
+			children: /* @__PURE__ */ jsx(Button, {
 				type: "submit",
-				className: "btn btn-info",
-				value: submitLabel
+				variant: "primary",
+				children: submitLabel
 			})
 		})] })]
 	});
 }
 var NO_FIELDS = {};
-var NO_MISSING = [];
+var NO_SERVER_ERRORS = [];
 /** A form drawn from a workflow's schema. */
 function DynamicForm({ form, ...props }) {
 	return form ? /* @__PURE__ */ jsx(DynamicFormBody, {
@@ -567,7 +589,8 @@ function OwnForm(props) {
 		form
 	});
 }
-function DynamicFormBody({ form, formJSONs: options = {}, reinitialize = false, initialValues, onValuesChange, labelPosition = "left", missingFields = NO_MISSING, spaceCompact = false, organizationVariables, remoteVars, needsOrganizationVariables = false, onSubmit, submitLabel = "Submit", className = "w-full", workflowForm = false, contextKey, skipValueParse = false, fields = NO_FIELDS, allowLayoutCSS = false }) {
+function DynamicFormBody({ form, formJSONs: options = {}, reinitialize = false, initialValues, onValuesChange, labelPosition = "left", serverErrors = NO_SERVER_ERRORS, spaceCompact = false, organizationVariables, remoteVars, needsOrganizationVariables = false, onSubmit, submitLabel, className = "w-full", workflowForm = false, contextKey, skipValueParse = false, fields = NO_FIELDS, allowLayoutCSS = false }) {
+	const { common } = useStrings();
 	const engine = useWorkflowEngine();
 	const [parseReady, setParseReady] = useState(() => engine.isReady());
 	useEffect(() => {
@@ -610,17 +633,7 @@ function DynamicFormBody({ form, formJSONs: options = {}, reinitialize = false,
 		callback: ({ values }) => report(values)
 	}), [form]);
 	const formOptions = useMemo(() => ({ workflowForm }), [workflowForm]);
-	const missing = missingFields.join("\n");
-	useEffect(() => {
-		if (!missing || loaded === void 0) return;
-		const names = missing.split("\n").map(fieldPath);
-		for (const name of names) form.setError(name, { type: "required" });
-		return () => form.clearErrors(names);
-	}, [
-		form,
-		missing,
-		loaded
-	]);
+	const checks = useServerErrors(form, serverErrors, loaded !== void 0);
 	return /* @__PURE__ */ jsx(FieldRegistryContext.Provider, {
 		value: fields,
 		children: /* @__PURE__ */ jsx(LayoutCSSContext.Provider, {
@@ -633,16 +646,19 @@ function DynamicFormBody({ form, formJSONs: options = {}, reinitialize = false,
 						...form,
 						children: /* @__PURE__ */ jsx("form", {
 							className: "w-full text-[13px]",
-							onSubmit: form.handleSubmit((values) => onSubmit?.(values)),
-							children: /* @__PURE__ */ jsx(DynamicFormContent, {
-								options,
-								labelPosition,
-								spaceCompact,
-								organizationVariables,
-								remoteVars,
-								onSubmit,
-								submitLabel,
-								contextKey
+							onSubmit: (event) => checks.check(() => form.handleSubmit((values) => onSubmit?.(values))(event)),
+							children: /* @__PURE__ */ jsx(FormChecksContext, {
+								value: checks,
+								children: /* @__PURE__ */ jsx(DynamicFormContent, {
+									options,
+									labelPosition,
+									spaceCompact,
+									organizationVariables,
+									remoteVars,
+									onSubmit,
+									submitLabel: submitLabel ?? common.submit,
+									contextKey
+								})
 							})
 						})
 					})
@@ -651,5 +667,84 @@ function DynamicFormBody({ form, formJSONs: options = {}, reinitialize = false,
 		})
 	});
 }
+/**
+* The server's errors on the form: each is set on its field until the person changes the field's
+* value, and set again whenever the host reports a new set. A check of the form sets them aside while
+* it runs, so they never hold the person back.
+*/
+function useServerErrors(form, serverErrors, loaded) {
+	const key = JSON.stringify(serverErrors.map((error) => [fieldPath(error.path), error.message ?? ""]).filter(([path]) => path !== ""));
+	const [given, setGiven] = useState({
+		key,
+		open: openErrors(key)
+	});
+	let open = given.open;
+	if (given.key !== key) {
+		open = openErrors(key);
+		setGiven({
+			key,
+			open
+		});
+	}
+	const latest = useRef(open);
+	useEffect(() => {
+		latest.current = open;
+		if (!loaded || open.size === 0) return;
+		const paths = [...open.keys()];
+		const read = (values, path) => JSON.stringify(getValueUsingPath(values, path));
+		const before = new Map(paths.map((path) => [path, read(form.getValues(), path)]));
+		for (const [path, message] of open) setServerError(form, path, message);
+		const unsubscribe = form.subscribe({
+			formState: { values: true },
+			callback: ({ values }) => {
+				const changed = paths.filter((path) => read(values, path) !== before.get(path));
+				if (changed.length > 0) setGiven((current) => ({
+					key: current.key,
+					open: new Map([...current.open].filter(([path]) => !changed.includes(path)))
+				}));
+			}
+		});
+		return () => {
+			unsubscribe();
+			clearServerErrors(form, paths);
+		};
+	}, [
+		form,
+		open,
+		loaded
+	]);
+	const check = useCallback(async (run) => {
+		const kept = latest.current;
+		clearServerErrors(form, kept.keys());
+		try {
+			return await run();
+		} finally {
+			for (const [path, message] of kept) if (!form.getFieldState(path).error) setServerError(form, path, message);
+		}
+	}, [form]);
+	return useMemo(() => ({
+		serverErrors: new Set(open.keys()),
+		serverErrorsKey: key,
+		check
+	}), [
+		open,
+		key,
+		check
+	]);
+}
+/** The server's errors in a set, by store path, to the message each gives, if any. */
+function openErrors(key) {
+	return new Map(JSON.parse(key));
+}
+function setServerError(form, path, message) {
+	form.setError(path, message ? {
+		type: "server",
+		message
+	} : { type: "server" });
+}
+/** Clears the server's errors at these paths, leaving any error the form's own check set there. */
+function clearServerErrors(form, paths) {
+	for (const path of paths) if (form.getFieldState(path).error?.type === "server") form.clearErrors(path);
+}
 //#endregion
 export { DynamicDefaultsSync, DynamicForm, FieldsFromOptions, collectFieldsWithDefaults, defaultReferencesField, findSelfReferencingFieldNames, listLengthsSignature, resolveMetaOverrides, useDynamicDefaultsSync };

package/dist/form/FormLayout.js

@@ -1,6 +1,7 @@
+import { cx } from "../cx.js";
+import { FieldRowContext } from "../components/Field.js";
 import { layoutBreakpoints, responsiveLayoutValues } from "./layout.js";
 import { resolveLayoutCSS } from "./layoutCSS.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useId, useMemo } from "react";
 //#region src/form/FormLayout.tsx
@@ -20,26 +21,30 @@ function FormLayout({ layout, renderField }) {
 	const allowCSS = useContext(LayoutCSSContext);
 	return /* @__PURE__ */ jsx("div", {
 		"data-layout-boundary": true,
-		className: clsx("min-w-0 max-w-full", allowCSS && "isolate [contain:paint] p-0.5"),
+		className: cx("min-w-0 max-w-full", allowCSS && "isolate [contain:paint] p-0.5"),
 		children: /* @__PURE__ */ jsx(LayoutNode, {
 			node: layout,
 			renderField
 		})
 	});
 }
-function LayoutNode({ node, renderField, sharedRows }) {
+function LayoutNode({ node, renderField, sharedRows, inRow = false }) {
 	const labelId = useId();
 	const descriptionId = useId();
 	const allowCSS = useContext(LayoutCSSContext);
 	const customStyle = useMemo(() => allowCSS ? resolveLayoutCSS(node.css).style : {}, [allowCSS, node.css]);
 	if (node.type === "field") return /* @__PURE__ */ jsx("div", {
 		"data-layout-field": node.field,
-		className: "min-w-0 max-w-full empty:hidden [&>div]:mb-0",
+		className: cx("min-w-0 max-w-full empty:hidden [&>div]:mb-0", inRow && "contents [&>*]:row-span-2"),
 		style: customStyle,
-		children: renderField(node.field)
+		children: /* @__PURE__ */ jsx(FieldRowContext, {
+			value: inRow,
+			children: renderField(node.field)
+		})
 	});
 	const columns = responsiveLayoutValues(node.type === "grid" ? node.columns : 1, 1);
 	const alignRows = node.type === "grid" && node.align === "rows";
+	const alignFields = node.type === "grid" && !alignRows;
 	const childSharedRows = alignRows ? Object.fromEntries(layoutBreakpoints.map((key) => [key, trackCount(columns[key]) > 1])) : void 0;
 	const rowCount = alignRows ? Math.max(0, ...node.children.map((child) => child.type === "section" ? child.children.length : 0)) + 1 : 1;
 	const children = node.children.map((child, index) => {
@@ -47,12 +52,13 @@ function LayoutNode({ node, renderField, sharedRows }) {
 		const style = Object.fromEntries(layoutBreakpoints.flatMap((key) => [[`--layout-span-${key}`, Math.min(spans[key], trackCount(columns[key]))], [`--layout-slot-${key}`, sharedRows?.[key] ? index + 2 : "auto"]]));
 		return /* @__PURE__ */ jsx("div", {
 			"data-layout-item": true,
-			className: clsx("min-w-0 text-sm", visible, sharedRows && slotClass, alignRows && sharedRowsClass, node.type === "grid" && "col-span-(--layout-span-base) @min-[24rem]/layout:col-span-(--layout-span-sm) @min-[40rem]/layout:col-span-(--layout-span-md) @min-[64rem]/layout:col-span-(--layout-span-lg)"),
+			className: cx("min-w-0 text-sm", visible, sharedRows && slotClass, alignRows && sharedRowsClass, alignFields && (child.type === "field" ? "row-span-2 grid grid-rows-subgrid gap-y-1.5" : "row-span-2 self-start"), node.type === "grid" && "col-span-(--layout-span-base) @min-[24rem]/layout:col-span-(--layout-span-sm) @min-[40rem]/layout:col-span-(--layout-span-md) @min-[64rem]/layout:col-span-(--layout-span-lg)"),
 			style,
 			children: /* @__PURE__ */ jsx(LayoutNode, {
 				node: child,
 				renderField,
-				sharedRows: childSharedRows
+				sharedRows: childSharedRows,
+				inRow: alignFields
 			})
 		}, child.type === "field" ? `field:${child.field}` : `container:${index}`);
 	});
@@ -75,9 +81,9 @@ function LayoutNode({ node, renderField, sharedRows }) {
 		};
 		return /* @__PURE__ */ jsx("div", {
 			"data-layout-grid": true,
-			className: clsx("@container/layout min-w-0 max-w-full", visible),
+			className: cx("@container/layout min-w-0 max-w-full", visible),
 			children: /* @__PURE__ */ jsx("div", {
-				className: clsx("grid gap-(--layout-gap) grid-cols-(--layout-columns-base) @min-[24rem]/layout:grid-cols-(--layout-columns-sm) @min-[40rem]/layout:grid-cols-(--layout-columns-md) @min-[64rem]/layout:grid-cols-(--layout-columns-lg)", !alignRows && "items-start"),
+				className: cx("grid gap-(--layout-gap) grid-cols-(--layout-columns-base) @min-[24rem]/layout:grid-cols-(--layout-columns-sm) @min-[40rem]/layout:grid-cols-(--layout-columns-md) @min-[64rem]/layout:grid-cols-(--layout-columns-lg)"),
 				style,
 				children
 			})
@@ -88,7 +94,7 @@ function LayoutNode({ node, renderField, sharedRows }) {
 		"aria-labelledby": labelId,
 		"aria-describedby": node.description ? descriptionId : void 0,
 		"data-layout-section": true,
-		className: clsx("min-w-0 max-w-full text-sm gap-(--layout-gap)", sharedRowsClass, visible),
+		className: cx("min-w-0 max-w-full text-sm gap-(--layout-gap)", sharedRowsClass, visible),
 		style: customStyle,
 		children: [/* @__PURE__ */ jsxs("div", {
 			"data-layout-header": true,
@@ -118,7 +124,7 @@ function LayoutNode({ node, renderField, sharedRows }) {
 	});
 	if (node.type === "section") return /* @__PURE__ */ jsxs("fieldset", {
 		"data-layout-section": true,
-		className: clsx("min-w-0 max-w-full border-0 p-0", visible),
+		className: cx("min-w-0 max-w-full border-0 p-0", visible),
 		"aria-describedby": node.description ? descriptionId : void 0,
 		style: customStyle,
 		children: [/* @__PURE__ */ jsx("legend", {
@@ -136,7 +142,7 @@ function LayoutNode({ node, renderField, sharedRows }) {
 	});
 	return /* @__PURE__ */ jsx("div", {
 		"data-layout-stack": true,
-		className: clsx("min-w-0 max-w-full", visible),
+		className: cx("min-w-0 max-w-full", visible),
 		children: body
 	});
 }

package/dist/form/Wizard/WizardContainer.js

@@ -1,6 +1,8 @@
 import { useStrings, useWorkflowEngine } from "../../components/Provider.js";
+import { Button } from "../../components/Button.js";
 import { copyBounds, stepText } from "./utils.js";
 import { initializeValues } from "../lib.js";
+import { FormChecksContext } from "../validation.js";
 import { useFormEditing } from "../formEditing.js";
 import { fieldPath } from "../utils/fieldPath.js";
 import { getValueUsingPath } from "../utils/getValueUsingPath.js";
@@ -10,12 +12,13 @@ import { WizardStepContent } from "./WizardStepContent.js";
 import { WizardStepIndicator } from "./WizardStepIndicator.js";
 import { WizardPagesContext } from "./wizardPages.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 //#region src/form/Wizard/WizardContainer.tsx
 function WizardContainer({ wizardConfig, onSubmit, className = "", labelPosition = "left", spaceCompact = false, nested = false, fieldNamePrefix = "" }) {
 	const form = useFormContext();
-	const { control, getValues, getFieldState, subscribe } = form;
+	const { control, getValues, trigger, subscribe } = form;
+	const { check, serverErrors, serverErrorsKey } = useContext(FormChecksContext);
 	const editing = useFormEditing();
 	const pages = useContext(WizardPagesContext);
 	const [ownPage, setOwnPage] = useState(0);
@@ -162,35 +165,51 @@ function WizardContainer({ wizardConfig, onSubmit, className = "", labelPosition
 		setFieldValue
 	]);
 	const configs = useMemo(() => Object.fromEntries(Object.entries(shown.byKey).map(([key, page]) => [key, page.config])), [shown]);
-	const validateCurrentStep = useCallback(async (pageKey) => {
+	const pagePaths = useCallback((pageKey) => {
 		const page = shown.byKey[pageKey];
-		if (!page?.config.options) return true;
+		if (!page?.config.options) return [];
 		const stepPrefix = page.copy !== void 0 ? `${fieldNamePrefix}${page.step}[${page.copy}].` : config.flatten !== false ? fieldNamePrefix : `${fieldNamePrefix}${page.step}.`;
-		return !Object.keys(page.config.options).map((name) => `${stepPrefix}${name}`).some((path) => getFieldState(fieldPath(path)).invalid);
+		return fieldsOf(page.config.options).map((name) => fieldPath(`${stepPrefix}${name}`));
 	}, [
 		shown,
 		config,
-		fieldNamePrefix,
-		getFieldState
+		fieldNamePrefix
+	]);
+	const validateCurrentStep = useCallback(async (pageKey) => {
+		const paths = pagePaths(pageKey);
+		return paths.length === 0 || check(() => trigger(paths));
+	}, [
+		pagePaths,
+		check,
+		trigger
 	]);
 	const { currentStep, visitedSteps, invalidSteps, isLastStep, canGoBack, goToNext, goToPrevious, jumpToStep, showStep } = useWizardState({
 		stepOrder: shown.order,
 		steps: configs,
 		validateStep: validateCurrentStep
 	});
+	const turnToServerError = useEffectEvent(() => {
+		if (editing || serverErrors.size === 0) return;
+		const holds = (path) => [...serverErrors].some((error) => error === path || error.startsWith(`${path}.`));
+		const key = shown.order.find((pageKey) => pagePaths(pageKey).some(holds));
+		if (key !== void 0 && key !== currentStep) showStep(key);
+	});
+	useEffect(() => turnToServerError(), [serverErrorsKey]);
 	const navigation = config.navigation ?? {};
 	const handleSubmit = useCallback(async () => {
 		if (!isLastStep) return;
 		let submitted = false;
-		await form.handleSubmit(async (values) => {
+		await check(() => form.handleSubmit(async (values) => {
 			submitted = true;
 			await onSubmit?.(values);
-		})();
-		if (!submitted) throw new Error("Please fix errors before submitting");
+		})());
+		if (!submitted) throw new Error(strings.fixErrorsToContinue);
 	}, [
 		isLastStep,
 		form,
-		onSubmit
+		check,
+		onSubmit,
+		strings
 	]);
 	const last = Math.max(shown.order.length - 1, 0);
 	const wizardKey = editing ? JSON.stringify(editing.parent) : "";
@@ -251,15 +270,15 @@ function WizardContainer({ wizardConfig, onSubmit, className = "", labelPosition
 	const addTitle = titledPerCopy && page?.count !== void 0 ? perCopy(rawTitle, page.count, true) : stepText(rawTitle);
 	const copies = page?.count !== void 0 && (page.canAdd || page.canRemove) ? /* @__PURE__ */ jsxs("div", {
 		className: "mb-4 flex items-center justify-between gap-3",
-		children: [page.canRemove ? /* @__PURE__ */ jsx("button", {
-			type: "button",
+		children: [page.canRemove ? /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "ghost",
 			onClick: () => removeCopy(page),
-			className: "rounded-lg border theme-border px-4 py-2 text-sm theme-muted-text hover:text-(--theme-app)",
 			children: strings.removeCopy(removeTitle)
-		}) : /* @__PURE__ */ jsx("span", {}), page.canAdd && (page.copy === void 0 || page.copy === page.count - 1) && /* @__PURE__ */ jsx("button", {
-			type: "button",
+		}) : /* @__PURE__ */ jsx("span", {}), page.canAdd && (page.copy === void 0 || page.copy === page.count - 1) && /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "secondary",
 			onClick: () => addCopy(page),
-			className: "rounded-lg bg-(--theme-element) px-4 py-2 font-medium text-(--theme-element-text) text-sm",
 			children: strings.addCopy(addTitle)
 		})]
 	}) : null;
@@ -298,7 +317,7 @@ function WizardContainer({ wizardConfig, onSubmit, className = "", labelPosition
 				isCurrentStepValid: true,
 				nextLabel: page?.config.nextLabel,
 				prevLabel: page?.config.prevLabel,
-				submitLabel: config.submitLabel || "Execute",
+				submitLabel: config.submitLabel || strings.runWizard,
 				onNext: async () => {
 					turn(editIndex + 1);
 					return true;
@@ -356,5 +375,12 @@ function takeAside(aside, index) {
 	delete aside[index];
 	return row;
 }
+/** A page's fields by name, through its groups, whose fields keep their values beside the group's. */
+function fieldsOf(options) {
+	return Object.entries(options).flatMap(([name, field]) => {
+		const { type, options: inner } = field ?? {};
+		return type === "group" && inner && typeof inner === "object" ? fieldsOf(inner) : [name];
+	});
+}
 //#endregion
 export { WizardContainer };

package/dist/form/Wizard/WizardNavigation.d.ts

@@ -1,2 +1,2 @@
 import type { WizardNavigationProps } from './types.js';
-export declare function WizardNavigation({ isLastStep, canGoBack, isCurrentStepValid, nextLabel, prevLabel, submitLabel, onNext, onPrevious, onSubmit, }: WizardNavigationProps): import("react").JSX.Element;
+export declare function WizardNavigation({ isLastStep, canGoBack, isCurrentStepValid, nextLabel, prevLabel, submitLabel: submitLabelProp, onNext, onPrevious, onSubmit, }: WizardNavigationProps): import("react").JSX.Element;