@10x-media/form-builder 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/react/Form.js

@@ -1,90 +1,95 @@
 "use client";
+import { keys } from "../translations/keys.js";
 import { interpolate } from "../recall/interpolate.js";
+import { serializeBody } from "../actions/body/serializeBody.js";
 import { noopEventSink } from "../events/noopSink.js";
-import { CAPTCHA_TOKEN_KEY } from "../spam/constants.js";
-import { defaultPresentationDescriptors } from "../presentations/defaults.js";
+import { CAPTCHA_TOKEN_KEY, CONTEXT_KEY, HONEYPOT_VALUE_KEY } from "../spam/constants.js";
+import { fieldKey, isNamedField } from "../fields/fieldKey.js";
 import { calcExpressionOf, computeCalcFields } from "../calc/computeCalcFields.js";
 import { evaluateCondition } from "../conditions/evaluate.js";
+import { resolveMessage } from "../validation/message.js";
 import { en } from "../translations/en.js";
-import { buildRecallResolver } from "../recall/resolver.js";
+import { defaultPresentationDescriptors } from "../presentations/defaults.js";
+import { buildRecallResolver, descriptorsFor } from "../recall/resolver.js";
 import { firstStepId, isTerminalStepId, resolveNextStepId, stepFieldNames } from "../flow/engine.js";
 import { cn } from "./cn.js";
 import { makeTranslate } from "../translations/makeTranslate.js";
 import { emitFormEvent } from "./events.js";
 import { FormContext } from "./FormContext.js";
-import { FormLayout, widthProps } from "./FormLayout.js";
+import { FormControls } from "./FormControls.js";
+import { DEFAULT_STEP_ID, formReducer, initialFormState, seedFieldValues } from "./state.js";
+import { FormFields } from "./FormFields.js";
 import { Honeypot } from "./Honeypot.js";
 import { defaultPresentations } from "./presentation/presentations.js";
 import { resolvePresentations } from "./presentation/registry.js";
-import { applyRecall } from "./recall.js";
 import { resolveRenderers } from "./registry.js";
 import { defaultRenderers } from "./renderers/index.js";
 import { buildFieldTypeRegistry, buildValidationRuleRegistry, visibleFields } from "./resolveForm.js";
-import { formReducer, initialFormState } from "./state.js";
 import { submitForm } from "./submitForm.js";
-import { useField } from "./useField.js";
 import { validateFieldValue } from "./validateField.js";
-import { createElement, useCallback, useEffect, useId, useMemo, useReducer, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
 //#region src/react/Form.tsx
 const isEmpty = (value) => value == null || value === "" || Array.isArray(value) && value.length === 0;
-const FIELD_WIDTHS = new Set([
-	"full",
-	"half",
-	"third",
-	"twoThirds"
-]);
-const FieldHost = ({ field, renderer, locale, t }) => {
-	const id = useId();
-	const { value, errors, warnings, setValue, onBlur } = useField(field.name);
-	return createElement(renderer, {
-		field,
-		id,
-		name: field.name,
-		value,
-		onChange: setValue,
-		onBlur,
-		errors,
-		warnings,
-		required: Boolean(field.required),
-		locale,
-		t
-	});
+/** Visually hidden but screen-reader-announced, for the "Step X of Y" live region (no host CSS required). */
+const SR_ONLY = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	whiteSpace: "nowrap",
+	border: 0
 };
-/** Hosts a derived (calc) field: read-only, value supplied from `effectiveValues`, never bound via `useField`. */
-const CalcFieldHost = ({ field, renderer, value, locale, t }) => {
-	return createElement(renderer, {
-		field,
-		id: useId(),
-		name: field.name,
-		value,
-		onChange: () => {},
-		onBlur: () => {},
-		errors: [],
-		warnings: [],
-		required: false,
-		disabled: true,
-		locale,
-		t
-	});
+/** The base field name of an error key: the part before a repeater composite suffix (`name[0].sub`). */
+const baseFieldKey = (key) => {
+	const bracket = key.indexOf("[");
+	return bracket === -1 ? key : key.slice(0, bracket);
+};
+/** The id of the first flow step (in order) that owns an errored field, or undefined when none does. */
+const firstStepWithError = (flow, errors) => {
+	const errored = new Set(Object.keys(errors).map(baseFieldKey));
+	return flow.steps.find((flowStep) => flowStep.fields.some((key) => errored.has(key)))?.id;
+};
+/** The first focusable element under `root` that a step transition should land on (skips hidden/honeypot). */
+const focusFirstIn = (root, selector) => {
+	(root?.querySelector(selector))?.focus();
 };
+/** A stored button label counts only when it is a non-empty string; anything else falls through. */
+const storedLabel = (value) => typeof value === "string" && value.length > 0 ? value : void 0;
 /** The headless form controller: state, progressive client validation, conditional visibility, submission, events. */
-const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSuccess, onError, events, t, locale = "en", layout, submitLabel = "Submit", nextLabel = "Next", backLabel = "Back", closeLabel = "Close", successMessage = "Thank you.", presentation, presentations, onClose, title, initialValues, honeypot, captchaToken, children, className }) => {
+const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSuccess, onError, converters, successBehavior = "replace", events, t, locale = "en", layout, submitLabel, nextLabel, prevLabel, closeLabel, successMessage, presentation, presentations, onClose, title, initialValues, honeypot, captchaToken, context, children, header, className, renderSubmit, renderNext, renderBack, submitButtonClassName, nextButtonClassName, backButtonClassName }) => {
 	const honeypotName = honeypot === false ? null : honeypot?.name ?? "website";
 	const honeypotRef = useRef(null);
 	const registry = useMemo(() => buildFieldTypeRegistry(fieldTypes), [fieldTypes]);
 	const ruleRegistry = useMemo(() => buildValidationRuleRegistry(rules), [rules]);
 	const rendererRegistry = useMemo(() => resolveRenderers(defaultRenderers, renderers), [renderers]);
 	const presentationRegistry = useMemo(() => resolvePresentations(defaultPresentations, presentations), [presentations]);
-	const activePresentation = typeof presentation === "object" ? presentation : presentationRegistry.get(presentation ?? form.defaultPresentation ?? "page") ?? presentationRegistry.get("page") ?? defaultPresentationDescriptors.page;
-	const fieldsByName = useMemo(() => new Map(form.fields.map((field) => [field.name, field])), [form.fields]);
+	const activePresentation = typeof presentation === "object" ? presentation : presentationRegistry.get(presentation ?? "page") ?? presentationRegistry.get("page") ?? defaultPresentationDescriptors.page;
+	const fieldsByName = useMemo(() => new Map(form.fields.filter(isNamedField).map((field) => [field.name, field])), [form.fields]);
 	const translate = useMemo(() => t ?? makeTranslate(en), [t]);
+	const resolvedCloseLabel = closeLabel ?? translate(keys.formClose);
+	const resolvedSuccessMessage = successMessage ?? translate(keys.formSuccess);
+	const docButtons = form.buttons;
+	const labels = useMemo(() => ({
+		prev: prevLabel ?? storedLabel(docButtons?.prevLabel) ?? translate(keys.formBack),
+		next: nextLabel ?? storedLabel(docButtons?.nextLabel) ?? translate(keys.formNext),
+		submit: submitLabel ?? storedLabel(docButtons?.submitLabel) ?? translate(keys.formSubmit)
+	}), [
+		prevLabel,
+		nextLabel,
+		submitLabel,
+		docButtons,
+		translate
+	]);
 	const sinkRef = useRef(noopEventSink);
 	sinkRef.current = events ?? noopEventSink;
 	const formIdRef = useRef("");
 	formIdRef.current = String(form.id);
 	const [state, rawDispatch] = useReducer(formReducer, form.fields, (fields) => initialFormState({
-		...Object.fromEntries(fields.map((field) => [field.name, void 0])),
+		...seedFieldValues(fields),
 		...initialValues ?? {}
 	}));
 	const effectiveValues = useMemo(() => computeCalcFields(form.fields, state.values), [form.fields, state.values]);
@@ -101,14 +106,28 @@ const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSucces
 		locale,
 		translate
 	]);
-	const flow = form.flow && form.flow.steps.length >= 2 ? form.flow : void 0;
+	const flow = form.multistep === true && form.flow && form.flow.steps.length >= 2 ? form.flow : void 0;
 	const [currentStepId, setCurrentStepId] = useState(() => flow ? firstStepId(flow) : void 0);
 	const [history, setHistory] = useState([]);
 	const startedRef = useRef(false);
 	const submittedRef = useRef(false);
 	const submittingRef = useRef(false);
+	const advancingRef = useRef(false);
 	const flowRef = useRef(flow);
 	flowRef.current = flow;
+	const stepIdOfField = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		if (flow) for (const flowStep of flow.steps) for (const key of flowStep.fields) map.set(key, flowStep.id);
+		return (fieldKey) => map.get(fieldKey) ?? "__form__";
+	}, [flow]);
+	const allStepIds = useMemo(() => flow ? flow.steps.map((flowStep) => flowStep.id) : [DEFAULT_STEP_ID], [flow]);
+	const formRef = useRef(null);
+	const pendingFocusRef = useRef(null);
+	const [focusNonce, setFocusNonce] = useState(0);
+	const requestFocus = (intent) => {
+		pendingFocusRef.current = intent;
+		setFocusNonce((nonce) => nonce + 1);
+	};
 	const dispatch = useCallback((action) => {
 		if (action.type === "SET_VALUE" && !startedRef.current) {
 			startedRef.current = true;
@@ -127,8 +146,7 @@ const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSucces
 			rawDispatch({
 				type: "SET_FIELD_ISSUES",
 				name,
-				errors: [],
-				warnings: []
+				errors: []
 			});
 			return;
 		}
@@ -140,12 +158,11 @@ const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSucces
 			answers,
 			locale,
 			t: translate
-		}).then(({ errors, warnings }) => {
+		}).then(({ errors }) => {
 			rawDispatch({
 				type: "SET_FIELD_ISSUES",
 				name,
-				errors,
-				warnings
+				errors
 			});
 			const [firstError] = errors;
 			if (firstError !== void 0) emitFormEvent(sinkRef.current, formIdRef.current, {
@@ -163,59 +180,169 @@ const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSucces
 		translate
 	]);
 	const visible = visibleFields(form.fields, effectiveValues);
-	const stepVisible = (flow && currentStepId ? stepFieldNames(flow, currentStepId) : []).map((name) => visible.find((field) => field.name === name)).filter((field) => Boolean(field));
+	/** Visible, answered named fields. Display-only ('none' kind) and nameless (bare) fields never contribute. */
+	const answerableFields = () => visibleFields(form.fields, effectiveValues).filter((field) => registry.get(field.blockType)?.value !== "none").filter(isNamedField).filter((field) => !isEmpty(effectiveValues[field.name]));
+	/** Answered visible fields as raw submission values, sent to the server on submit. */
+	const answeredValues = () => answerableFields().map((field) => ({
+		field: field.name,
+		value: effectiveValues[field.name]
+	}));
+	/**
+	* Same fields, formatted via `recall` (option labels, Yes/No, localized dates): recall-fidelity
+	* values for client-rendered templates, matching what the server gives email-team's body.
+	*/
+	const formattedValues = () => answerableFields().map((field) => ({
+		field: field.name,
+		value: recall(field.name)
+	}));
+	/**
+	* The recall-resolved success response: a redirect's url, or the response message serialized with
+	* the active `converters` (so host blocks survive). Shared by the success screen and the value
+	* handed to `onSuccess`, so both stay identical.
+	*/
+	const resolveSuccessResponse = () => {
+		const response = form.response;
+		if (response?.type === "redirect") return {
+			type: "redirect",
+			url: response.redirect?.url ?? void 0
+		};
+		const message = response?.type === "message" || response?.type == null ? response?.message : void 0;
+		if (!message) return;
+		return {
+			type: "message",
+			html: serializeBody(message, {
+				values: formattedValues(),
+				descriptors: descriptorsFor(answerableFields()),
+				converters
+			})
+		};
+	};
+	const stepKeys = flow && currentStepId ? stepFieldNames(flow, currentStepId) : [];
+	const stepKeySet = new Set(stepKeys);
+	const stepVisible = visible.filter((field) => stepKeySet.has(fieldKey(field)));
+	const validateRepeaterSubFields = async (repeaters) => {
+		const errors = {};
+		for (const field of repeaters.filter((f) => f.blockType === "repeater" && isNamedField(f))) {
+			const rows = Array.isArray(effectiveValues[field.name]) ? effectiveValues[field.name] : [];
+			const subFields = (Array.isArray(field.subFields) ? field.subFields : []).filter(isNamedField);
+			for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+				const row = rows[rowIndex] ?? {};
+				for (const subField of subFields) {
+					if (!evaluateCondition(subField.visibleWhen, row)) continue;
+					if (!evaluateCondition(subField.validateWhen, row)) continue;
+					const subResult = await validateFieldValue({
+						field: subField,
+						value: row[subField.name],
+						registry,
+						ruleRegistry,
+						answers: row,
+						locale,
+						t: translate
+					});
+					const compositeKey = `${field.name}[${rowIndex}].${subField.name}`;
+					if (subResult.errors.length > 0) errors[compositeKey] = subResult.errors;
+				}
+			}
+		}
+		return errors;
+	};
 	const goNext = async () => {
-		if (!flow || !currentStepId) return;
-		const results = await Promise.all(stepVisible.filter((field) => !calcExpressionOf(field)).filter((field) => evaluateCondition(field.validateWhen, effectiveValues)).map(async (field) => ({
-			field,
-			...await validateFieldValue({
+		if (!flow || !currentStepId || advancingRef.current) return;
+		advancingRef.current = true;
+		try {
+			const results = await Promise.all(stepVisible.filter((field) => !calcExpressionOf(field)).filter((field) => registry.get(field.blockType)?.value !== "none").filter(isNamedField).filter((field) => evaluateCondition(field.validateWhen, effectiveValues)).map(async (field) => ({
 				field,
-				value: effectiveValues[field.name],
-				registry,
-				ruleRegistry,
-				answers: effectiveValues,
-				locale,
-				t: translate
-			})
-		})));
-		let hasError = false;
-		for (const result of results) {
-			rawDispatch({
-				type: "TOUCH",
-				name: result.field.name
+				...await validateFieldValue({
+					field,
+					value: effectiveValues[field.name],
+					registry,
+					ruleRegistry,
+					answers: effectiveValues,
+					locale,
+					t: translate
+				})
+			})));
+			let hasError = false;
+			for (const result of results) {
+				rawDispatch({
+					type: "TOUCH",
+					name: result.field.name
+				});
+				rawDispatch({
+					type: "SET_FIELD_ISSUES",
+					name: result.field.name,
+					errors: result.errors
+				});
+				if (result.errors.length > 0) hasError = true;
+			}
+			const repeaterErrors = await validateRepeaterSubFields(stepVisible);
+			for (const [compositeKey, errs] of Object.entries(repeaterErrors)) {
+				rawDispatch({
+					type: "SET_FIELD_ISSUES",
+					name: compositeKey,
+					errors: errs
+				});
+				hasError = true;
+			}
+			if (hasError) {
+				rawDispatch({
+					type: "MARK_STEP_ATTEMPTED",
+					stepId: currentStepId
+				});
+				requestFocus("firstInvalid");
+				return;
+			}
+			const next = resolveNextStepId(flow, currentStepId, effectiveValues);
+			if (!next) return;
+			emitFormEvent(sinkRef.current, formIdRef.current, {
+				type: "step.completed",
+				stepId: currentStepId
 			});
-			rawDispatch({
-				type: "SET_FIELD_ISSUES",
-				name: result.field.name,
-				errors: result.errors,
-				warnings: result.warnings
+			setHistory((prev) => [...prev, currentStepId]);
+			setCurrentStepId(next);
+			requestFocus("stepStart");
+			emitFormEvent(sinkRef.current, formIdRef.current, {
+				type: "step.viewed",
+				stepId: next
 			});
-			if (result.errors.length > 0) hasError = true;
+		} finally {
+			advancingRef.current = false;
 		}
-		if (hasError) return;
-		const next = resolveNextStepId(flow, currentStepId, state.values);
-		if (!next) return;
-		emitFormEvent(sinkRef.current, formIdRef.current, {
-			type: "step.completed",
-			stepId: currentStepId
-		});
-		setHistory((prev) => [...prev, currentStepId]);
-		setCurrentStepId(next);
-		emitFormEvent(sinkRef.current, formIdRef.current, {
-			type: "step.viewed",
-			stepId: next
-		});
 	};
 	const goBack = () => {
 		const prev = history[history.length - 1];
 		if (prev === void 0) return;
 		setHistory((entries) => entries.slice(0, -1));
 		setCurrentStepId(prev);
+		requestFocus("stepStart");
 		emitFormEvent(sinkRef.current, formIdRef.current, {
 			type: "step.viewed",
 			stepId: prev
 		});
 	};
+	const navigateToStep = (stepId) => {
+		if (!flow || stepId === currentStepId) return;
+		const idx = flow.steps.findIndex((flowStep) => flowStep.id === stepId);
+		if (idx < 0) return;
+		setHistory(flow.steps.slice(0, idx).map((flowStep) => flowStep.id));
+		setCurrentStepId(stepId);
+		emitFormEvent(sinkRef.current, formIdRef.current, {
+			type: "step.viewed",
+			stepId
+		});
+	};
+	useEffect(() => {
+		const intent = pendingFocusRef.current;
+		if (!intent) return;
+		pendingFocusRef.current = null;
+		if (intent === "firstInvalid") {
+			focusFirstIn(formRef.current, "[aria-invalid=\"true\"]");
+			return;
+		}
+		const region = formRef.current?.querySelector("[data-fb-step-region]");
+		if (region) region.focus();
+		else focusFirstIn(formRef.current, "input:not([type=\"hidden\"]), select, textarea");
+	}, [currentStepId, focusNonce]);
 	useEffect(() => {
 		emitFormEvent(sinkRef.current, formIdRef.current, { type: "form.viewed" });
 		const mountFlow = flowRef.current;
@@ -238,7 +365,7 @@ const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSucces
 		if (submittingRef.current) return;
 		submittingRef.current = true;
 		const visible = visibleFields(form.fields, effectiveValues);
-		const results = await Promise.all(visible.filter((field) => !calcExpressionOf(field)).filter((field) => evaluateCondition(field.validateWhen, effectiveValues)).map(async (field) => ({
+		const results = await Promise.all(visible.filter((field) => !calcExpressionOf(field)).filter((field) => registry.get(field.blockType)?.value !== "none").filter(isNamedField).filter((field) => evaluateCondition(field.validateWhen, effectiveValues)).map(async (field) => ({
 			field,
 			...await validateFieldValue({
 				field,
@@ -251,37 +378,37 @@ const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSucces
 			})
 		})));
 		const errors = {};
-		const warnings = {};
-		for (const result of results) {
-			if (result.errors.length > 0) {
-				errors[result.field.name] = result.errors;
-				const [firstError] = result.errors;
-				if (firstError !== void 0) emitFormEvent(sinkRef.current, formIdRef.current, {
-					type: "field.errored",
-					field: result.field.name,
-					message: firstError
-				});
-			}
-			if (result.warnings.length > 0) warnings[result.field.name] = result.warnings;
+		for (const result of results) if (result.errors.length > 0) {
+			errors[result.field.name] = result.errors;
+			const [firstError] = result.errors;
+			if (firstError !== void 0) emitFormEvent(sinkRef.current, formIdRef.current, {
+				type: "field.errored",
+				field: result.field.name,
+				message: firstError
+			});
 		}
+		Object.assign(errors, await validateRepeaterSubFields(visible));
+		const hasErrors = Object.keys(errors).length > 0;
 		rawDispatch({
 			type: "SET_ALL_ISSUES",
 			errors,
-			warnings
+			steps: hasErrors ? allStepIds : []
 		});
-		if (Object.keys(errors).length > 0) {
+		if (hasErrors) {
 			submittingRef.current = false;
+			if (flow && currentStepId) {
+				const target = firstStepWithError(flow, errors);
+				if (target) navigateToStep(target);
+			}
+			requestFocus("firstInvalid");
 			return;
 		}
 		rawDispatch({ type: "SUBMIT_START" });
-		const values = visible.filter((field) => !isEmpty(effectiveValues[field.name])).map((field) => ({
-			field: field.name,
-			value: effectiveValues[field.name]
-		}));
+		const values = answeredValues();
 		if (honeypotName) {
 			const decoy = honeypotRef.current?.value ?? "";
 			if (decoy !== "") values.push({
-				field: honeypotName,
+				field: HONEYPOT_VALUE_KEY,
 				value: decoy
 			});
 		}
@@ -289,6 +416,10 @@ const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSucces
 			field: CAPTCHA_TOKEN_KEY,
 			value: captchaToken
 		});
+		if (context) values.push({
+			field: CONTEXT_KEY,
+			value: context
+		});
 		const result = onSubmit ? await onSubmit({
 			formId: form.id,
 			values
@@ -300,20 +431,37 @@ const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSucces
 		submittingRef.current = false;
 		if (result.ok) {
 			submittedRef.current = true;
-			rawDispatch({ type: "SUBMIT_SUCCESS" });
 			emitFormEvent(sinkRef.current, formIdRef.current, {
 				type: "submission.created",
 				submissionId: result.submissionId
 			});
-			onSuccess?.(result.submissionId);
-			if (activePresentation.dismissOnSuccess) handleClose();
+			onSuccess?.(result.submissionId, { response: resolveSuccessResponse() });
+			if (successBehavior === "reset") {
+				rawDispatch({
+					type: "RESET",
+					values: {
+						...seedFieldValues(form.fields),
+						...initialValues ?? {}
+					}
+				});
+				if (flow) {
+					setCurrentStepId(firstStepId(flow));
+					setHistory([]);
+				}
+				startedRef.current = false;
+			} else {
+				rawDispatch({ type: "SUBMIT_SUCCESS" });
+				if (activePresentation.dismissOnSuccess) handleClose();
+			}
+			const redirectUrl = form.response?.type === "redirect" ? form.response.redirect?.url : void 0;
+			if (typeof redirectUrl === "string" && redirectUrl.length > 0 && typeof window !== "undefined") window.location.assign(redirectUrl);
 		} else {
 			if (result.fieldErrors) rawDispatch({
 				type: "SET_ALL_ISSUES",
 				errors: result.fieldErrors,
-				warnings: {}
+				steps: allStepIds
 			});
-			const message = result.message ?? "Submission failed";
+			const message = result.message ?? translate(keys.formSubmitFailed);
 			rawDispatch({
 				type: "SUBMIT_ERROR",
 				message
@@ -321,13 +469,24 @@ const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSucces
 			onError?.(message);
 		}
 	};
+	const isTerminalStep = flow && currentStepId ? isTerminalStepId(flow, currentStepId, effectiveValues) : true;
+	const handleKeyDown = (event) => {
+		if (!flow || event.key !== "Enter") return;
+		const target = event.target;
+		if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || target instanceof HTMLButtonElement) return;
+		if (target instanceof HTMLInputElement && (target.type === "submit" || target.type === "button")) return;
+		if (!isTerminalStep) {
+			event.preventDefault();
+			goNext();
+		}
+	};
 	const step = flow ? {
 		flow,
 		currentStepId,
 		stepIndex: flow.steps.findIndex((s) => s.id === currentStepId),
 		stepCount: flow.steps.length,
 		isFirst: history.length === 0,
-		isTerminal: currentStepId ? isTerminalStepId(flow, currentStepId, state.values) : true,
+		isTerminal: isTerminalStep,
 		goNext: () => {
 			goNext();
 		},
@@ -340,12 +499,26 @@ const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSucces
 		goNext: () => {},
 		goBack: () => {}
 	};
+	const stepStatusText = flow ? resolveMessage(translate(keys.formStepStatus), {
+		current: String(step.stepIndex + 1),
+		total: String(step.stepCount)
+	}) : "";
+	const currentStepHasError = flow != null && currentStepId != null && state.attemptedSteps.has(currentStepId) && Object.entries(state.errors).some(([key, errs]) => errs.length > 0 && stepIdOfField(baseFieldKey(key)) === currentStepId);
 	const contextValue = {
+		form,
 		state,
 		dispatch,
 		validateField,
 		locale,
-		step
+		step,
+		rendererRegistry,
+		labels,
+		t: translate,
+		effectiveValues,
+		recall,
+		renderedFields: (flow ? stepVisible : visible).filter((field) => field.hidden !== true && field.calcDisplay !== false),
+		converters,
+		stepIdOfField
 	};
 	const PresentationWrapper = activePresentation.Wrapper;
 	const wrap = (content) => PresentationWrapper ? /* @__PURE__ */ jsx(PresentationWrapper, {
@@ -353,15 +526,17 @@ const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSucces
 		open: true,
 		onClose: handleClose,
 		title,
-		closeLabel,
+		closeLabel: resolvedCloseLabel,
 		children: content
 	}) : content;
 	if (children !== void 0) return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: contextValue,
 		children: wrap(/* @__PURE__ */ jsxs("form", {
+			ref: formRef,
 			className: cn("fb-form-root", className),
 			noValidate: true,
 			onSubmit: handleSubmit,
+			onKeyDown: handleKeyDown,
 			"data-fb-presentation": activePresentation.name,
 			"data-fb-density": activePresentation.density,
 			children: [honeypotName ? /* @__PURE__ */ jsx(Honeypot, {
@@ -370,23 +545,34 @@ const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSucces
 			}) : null, children]
 		}))
 	});
-	if (state.submitted) return /* @__PURE__ */ jsx(FormContext.Provider, {
-		value: contextValue,
-		children: wrap(/* @__PURE__ */ jsx("p", {
-			role: "status",
-			className: cn("fb-form__success", className),
-			"data-fb-presentation": activePresentation.name,
-			"data-fb-density": activePresentation.density,
-			children: interpolate(successMessage, recall)
-		}))
-	});
-	const rendered = (flow ? stepVisible : visible).filter((field) => field.hidden !== true && field.calcDisplay !== false);
+	if (state.submitted) {
+		const successResponse = resolveSuccessResponse();
+		const responseHtml = successResponse?.type === "message" ? successResponse.html : void 0;
+		return /* @__PURE__ */ jsx(FormContext.Provider, {
+			value: contextValue,
+			children: wrap(responseHtml ? /* @__PURE__ */ jsx("div", {
+				role: "status",
+				className: cn("fb-form__success", className),
+				"data-fb-presentation": activePresentation.name,
+				"data-fb-density": activePresentation.density,
+				dangerouslySetInnerHTML: { __html: responseHtml }
+			}) : /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: cn("fb-form__success", className),
+				"data-fb-presentation": activePresentation.name,
+				"data-fb-density": activePresentation.density,
+				children: interpolate(resolvedSuccessMessage, recall)
+			}))
+		});
+	}
 	return /* @__PURE__ */ jsx(FormContext.Provider, {
 		value: contextValue,
 		children: wrap(/* @__PURE__ */ jsxs("form", {
+			ref: formRef,
 			className: cn("fb-form-root", className),
 			noValidate: true,
 			onSubmit: handleSubmit,
+			onKeyDown: handleKeyDown,
 			"data-fb-presentation": activePresentation.name,
 			"data-fb-density": activePresentation.density,
 			children: [
@@ -394,58 +580,38 @@ const Form = ({ form, fieldTypes, rules, renderers, apiRoute, onSubmit, onSucces
 					name: honeypotName,
 					inputRef: honeypotRef
 				}) : null,
-				/* @__PURE__ */ jsx(FormLayout, {
-					enabled: layout !== false,
-					children: rendered.map((field) => {
-						const renderer = rendererRegistry.get(field.blockType);
-						if (!renderer) return null;
-						const width = typeof field.width === "string" && FIELD_WIDTHS.has(field.width) ? field.width : void 0;
-						const recalledField = applyRecall(field, recall);
-						return /* @__PURE__ */ jsx("div", {
-							...widthProps(width),
-							children: calcExpressionOf(field) ? /* @__PURE__ */ jsx(CalcFieldHost, {
-								field: recalledField,
-								renderer,
-								value: effectiveValues[field.name],
-								locale,
-								t: translate
-							}) : /* @__PURE__ */ jsx(FieldHost, {
-								field: recalledField,
-								renderer,
-								locale,
-								t: translate
-							})
-						}, field.name);
-					})
-				}),
+				header,
+				flow ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("div", {
+						"aria-live": "polite",
+						"aria-atomic": "true",
+						style: SR_ONLY,
+						children: stepStatusText
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"data-fb-step-region": true,
+						tabIndex: -1,
+						className: "fb-form__step",
+						children: /* @__PURE__ */ jsx(FormFields, { layout })
+					}),
+					currentStepHasError ? /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: "fb-form__step-error",
+						children: translate(keys.formStepInvalid)
+					}) : null
+				] }) : /* @__PURE__ */ jsx(FormFields, { layout }),
 				state.submitError ? /* @__PURE__ */ jsx("p", {
 					role: "alert",
 					className: "fb-form__submit-error",
 					children: state.submitError
 				}) : null,
-				flow ? /* @__PURE__ */ jsxs("div", {
-					className: "fb-form__controls",
-					children: [!step.isFirst ? /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: goBack,
-						disabled: state.submitting,
-						children: backLabel
-					}) : null, step.isTerminal ? /* @__PURE__ */ jsx("button", {
-						type: "submit",
-						disabled: state.submitting,
-						children: submitLabel
-					}) : /* @__PURE__ */ jsx("button", {
-						type: "button",
-						disabled: state.submitting,
-						onClick: () => {
-							goNext();
-						},
-						children: nextLabel
-					})]
-				}) : /* @__PURE__ */ jsx("button", {
-					type: "submit",
-					disabled: state.submitting,
-					children: submitLabel
+				/* @__PURE__ */ jsx(FormControls, {
+					backButtonClassName,
+					nextButtonClassName,
+					submitButtonClassName,
+					renderBack,
+					renderNext,
+					renderSubmit
 				})
 			]
 		}))