@form-engine-ts/react 2.9.5 → 2.9.6

package/README.md

@@ -152,3 +152,11 @@ preserved. Pass an SSR-safe `createLocalStorageSubmissionAttemptStore()` as `att
 before submission. Renderer injects it as `attemptId` and `submissionId`, retains it after a failed request, promotes it
 to the receipt after success, and then clears the attempt. Custom receipt stores may omit `getBatch`; the hook falls back
 to concurrent `get` calls.
+
+After success, completion rendering receives a snapshot of `answers`, `schema`, the optional response, and
+`submittedItems`. Each summary item includes the field title, raw value, formatted display value, visibility, and field
+metadata. Use `renderSubmittedValues` for a typed summary slot; hidden fields are omitted by default and can be included
+with `showHiddenFieldsInSummary`. Server validation can be returned by throwing `FormSubmissionError` with `fieldErrors`
+and `formError`; field messages are mapped back to the form and the first invalid control is focused. Use
+`submissionConfirmationRenderMode="replace"` or `"dialog"` for alternate confirmation presentations, and
+`fieldsClassName` or `renderFields` to control the fields wrapper.

package/dist/index.cjs

@@ -23,6 +23,7 @@ __export(index_exports, {
   FormBuilder: () => FormBuilder,
   FormProvider: () => FormProvider,
   FormRenderer: () => FormRenderer,
+  FormSubmissionError: () => FormSubmissionError,
   createLocalStorageSubmissionAttemptStore: () => createLocalStorageSubmissionAttemptStore,
   createLocalStorageSubmissionReceiptStore: () => createLocalStorageSubmissionReceiptStore,
   resolveInitialFieldType: () => resolveInitialFieldType,
@@ -2657,6 +2658,17 @@ function FormProvider({
     },
     [validSchema, validationPageIndex]
   );
+  const setServerErrors = (0, import_react3.useCallback)((fieldErrors) => {
+    setErrors(
+      Object.fromEntries(
+        Object.entries(fieldErrors).map(([fieldId, message]) => [
+          fieldId,
+          { fieldId, code: "invalid_type", messageKey: message, params: {} }
+        ])
+      )
+    );
+    setValidationPageIndex(null);
+  }, []);
   const restoreValues = (0, import_react3.useCallback)(
     (restoredValues) => {
       const fieldIds = new Set(validSchema.fields.map((field) => field.id));
@@ -2741,6 +2753,7 @@ function FormProvider({
       submitError,
       isSubmitting: submitStatus === "submitting",
       setValue,
+      setServerErrors,
       restoreValues,
       validatePage,
       reset,
@@ -2754,6 +2767,7 @@ function FormProvider({
       reset,
       restoreValues,
       setValue,
+      setServerErrors,
       submit,
       submitError,
       submitStatus,
@@ -2900,6 +2914,18 @@ function useSubmissionReceipts(store, queries) {
 // src/renderer.tsx
 var import_core4 = require("@form-engine-ts/core");
 var import_react5 = require("react");
+
+// src/types.ts
+var FormSubmissionError = class extends Error {
+  payload;
+  constructor(message, payload) {
+    super(message);
+    this.name = "FormSubmissionError";
+    this.payload = payload ?? { formError: message };
+  }
+};
+
+// src/renderer.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function describedBy(field, error, helpId, errorId) {
   const ids = [field.description === void 0 ? void 0 : helpId, error === void 0 ? void 0 : errorId].filter(
@@ -3096,6 +3122,30 @@ function isRecord(value) {
 function isFormValue(value) {
   return value === void 0 || typeof value === "string" || typeof value === "boolean" || typeof value === "number" && Number.isFinite(value) || Array.isArray(value) && value.every((item) => typeof item === "string");
 }
+function displaySubmittedValue(field, value, translate) {
+  if (value === void 0 || value === null) return "";
+  if (field.type === "checkbox") return value === true ? translate("form.yes") : translate("form.no");
+  if (field.type === "multi-select" && Array.isArray(value)) {
+    const labels = new Map(field.options.map((option) => [option.id, option.label]));
+    return value.map((item) => labels.get(item) ?? item).join(", ");
+  }
+  if ((field.type === "radio" || field.type === "select") && typeof value === "string") {
+    return field.options.find((option) => option.id === value)?.label ?? value;
+  }
+  if (Array.isArray(value)) return value.join(", ");
+  return String(value);
+}
+function buildSubmittedItems(schema, answers, visibility, translate, showHiddenFields) {
+  return schema.fields.filter((field) => showHiddenFields || visibility[field.id] === true).map((field) => ({
+    fieldId: field.id,
+    title: field.title,
+    type: field.type,
+    rawValue: answers[field.id],
+    displayValue: displaySubmittedValue(field, answers[field.id], translate),
+    visible: visibility[field.id] === true,
+    ...field.metadata === void 0 ? {} : { metadata: field.metadata }
+  }));
+}
 function parseDraft(serialized) {
   try {
     const value = JSON.parse(serialized);
@@ -3123,6 +3173,9 @@ function ContextFormRenderer({
   beforeSubmit,
   onDraftSave,
   successRenderMode = "append",
+  submissionConfirmationRenderMode = "inline",
+  showHiddenFieldsInSummary = false,
+  fieldsClassName,
   hideFormOnSuccess = false,
   submissionGuards = [],
   receiptStore,
@@ -3141,9 +3194,11 @@ function ContextFormRenderer({
   const [guardMessage, setGuardMessage] = (0, import_react5.useState)(null);
   const [guardsPending, setGuardsPending] = (0, import_react5.useState)(false);
   const [receipt, setReceipt] = (0, import_react5.useState)(null);
+  const [completionData, setCompletionData] = (0, import_react5.useState)(null);
   const [receiptLoaded, setReceiptLoaded] = (0, import_react5.useState)(receiptStore === void 0);
   const rendererSubmissionInFlight = (0, import_react5.useRef)(false);
   const completionRef = (0, import_react5.useRef)(null);
+  const confirmationRef = (0, import_react5.useRef)(null);
   const pages = form.schema.pages;
   const visiblePageIndexes = (0, import_react5.useMemo)(
     () => pages === void 0 ? [] : pages.flatMap((page, index) => form.pageVisibility[page.id] === true ? [index] : []),
@@ -3156,6 +3211,10 @@ function ContextFormRenderer({
   const submitState = confirmation === null && !guardsPending ? form.submitStatus : "confirming";
   const interactionLocked = submitState === "confirming" || submitState === "submitting";
   const isReplaceMode = successRenderMode === "replace" || hideFormOnSuccess;
+  const focusSubmitButton = (0, import_react5.useCallback)(() => {
+    const button = formRef.current?.querySelector(".fe-submit, button[type='submit'], button");
+    button?.focus();
+  }, []);
   (0, import_react5.useEffect)(() => {
     let active = true;
     if (receiptStore === void 0) {
@@ -3199,6 +3258,21 @@ function ContextFormRenderer({
     if (!isReplaceMode || form.submitStatus !== "success") return;
     completionRef.current?.focus();
   }, [form.submitStatus, isReplaceMode]);
+  (0, import_react5.useEffect)(() => {
+    if (confirmation === null) return;
+    const confirmButton = confirmationRef.current?.querySelector("[data-fe-confirm], button");
+    confirmButton?.focus();
+    if (submissionConfirmationRenderMode !== "dialog") return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setConfirmation(null);
+        globalThis.setTimeout(focusSubmitButton, 0);
+      }
+    };
+    globalThis.addEventListener("keydown", onKeyDown);
+    return () => globalThis.removeEventListener("keydown", onKeyDown);
+  }, [confirmation, focusSubmitButton, submissionConfirmationRenderMode]);
   (0, import_react5.useEffect)(() => {
     if (autoSaveKey === void 0 || typeof globalThis.localStorage === "undefined") return;
     const loadIdentity = `${autoSaveKey}:${form.schema.id}:${form.schema.version}`;
@@ -3314,7 +3388,33 @@ function ContextFormRenderer({
         focusFirstIssue(firstInvalidFieldId);
         return result;
       }
+      if (result.status === "error") {
+        if (result.error instanceof FormSubmissionError) {
+          const fieldErrors = result.error.payload.fieldErrors ?? {};
+          form.setServerErrors?.(fieldErrors);
+          const firstServerFieldId = Object.keys(fieldErrors)[0];
+          if (firstServerFieldId !== void 0) {
+            const invalidPageIndex = pages?.findIndex((page) => page.questionIds.includes(firstServerFieldId));
+            if (invalidPageIndex !== void 0 && invalidPageIndex >= 0) setCurrentPageIndex(invalidPageIndex);
+            focusFirstIssue(firstServerFieldId);
+          }
+        }
+        return result;
+      }
       if (result.status !== "success") return result;
+      const submittedAnswers = { ...form.values };
+      const submittedItems = buildSubmittedItems(
+        form.schema,
+        submittedAnswers,
+        form.visibility,
+        (key) => form.translate(key),
+        showHiddenFieldsInSummary
+      );
+      setCompletionData({
+        answers: submittedAnswers,
+        submittedItems,
+        ...result.response === void 0 ? {} : { response: result.response }
+      });
       if (receiptStore !== void 0) {
         const response = result.response;
         const submissionId = response?.submissionId ?? submissionAttempt?.attemptId;
@@ -3361,6 +3461,7 @@ function ContextFormRenderer({
   };
   const cancelSubmission = () => {
     setConfirmation(null);
+    globalThis.setTimeout(focusSubmitButton, 0);
   };
   const resetReceipt = async () => {
     if (receiptStore === void 0) return;
@@ -3381,7 +3482,48 @@ function ContextFormRenderer({
     return slots.renderSubmitButton?.(submitButtonProps) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "fe-submit", type: "submit", disabled: submitButtonProps.disabled, children: form.translate(form.schema.submitLabelKey ?? "form.submit") });
   };
   const completionMessage = form.schema.completionMessage ?? (successMessageKey === void 0 ? "Submitted." : form.translate(successMessageKey));
-  const completionRegion = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: completionRef, className: "fe-completion", role: "status", "aria-live": "polite", tabIndex: -1, children: slots.renderCompletion?.({ message: completionMessage }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: completionMessage }) });
+  const activeCompletionData = completionData ?? {
+    answers: { ...form.values },
+    submittedItems: buildSubmittedItems(
+      form.schema,
+      form.values,
+      form.visibility,
+      (key) => form.translate(key),
+      showHiddenFieldsInSummary
+    )
+  };
+  const completionProps = {
+    message: completionMessage,
+    schema: form.schema,
+    answers: activeCompletionData.answers,
+    submittedItems: activeCompletionData.submittedItems,
+    ...activeCompletionData.response === void 0 ? {} : { response: activeCompletionData.response },
+    onReset: form.reset
+  };
+  const completionRegion = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: completionRef, className: "fe-completion", role: "status", "aria-live": "polite", tabIndex: -1, children: [
+    slots.renderCompletion?.(completionProps) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: completionMessage }),
+    slots.renderSubmittedValues?.({ items: activeCompletionData.submittedItems, schema: form.schema })
+  ] });
+  const confirmationContent = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ref: confirmationRef,
+      className: "fe-submission-confirmation",
+      role: submissionConfirmationRenderMode === "dialog" ? void 0 : "dialog",
+      children: slots.renderSubmissionConfirmation?.({
+        findings: confirmation?.findings ?? [],
+        message: confirmation?.message ?? form.translate("form.confirmSensitiveData"),
+        schema: form.schema,
+        visibleValues,
+        onConfirm: confirmSubmission,
+        onCancel: cancelSubmission
+      }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: confirmation?.message ?? form.translate("form.confirmSensitiveData") }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", "data-fe-confirm": "true", onClick: confirmSubmission, children: form.translate("form.confirmSubmission") }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: cancelSubmission, children: form.translate("form.cancelSubmission") })
+      ] })
+    }
+  );
   if (!receiptLoaded) return null;
   if (receipt !== null) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `fe-form fe-already-submitted ${className}`.trim(), children: slots.renderAlreadySubmitted?.({
@@ -3395,127 +3537,136 @@ function ContextFormRenderer({
   if (form.submitStatus === "success" && isReplaceMode) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `fe-form ${className}`.trim(), children: completionRegion });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { ref: formRef, className: `fe-form ${className}`.trim(), noValidate: true, onSubmit: handleSubmit, children: [
-    slots.renderHeader?.({
-      title: form.schema.title,
-      ...form.schema.description === void 0 ? {} : { description: form.schema.description }
-    }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("header", { className: "fe-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { children: form.schema.title }),
-      form.schema.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: form.schema.description }),
-      pages === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-progress", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "div",
-          {
-            className: "form-progress-bar",
-            role: "progressbar",
-            "aria-valuemin": 1,
-            "aria-valuemax": visiblePageIndexes.length,
-            "aria-valuenow": activeVisibleIndex + 1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "div",
-              {
-                className: "form-progress-fill",
-                style: { width: `${(activeVisibleIndex + 1) / visiblePageIndexes.length * 100}%` }
+  if (confirmation !== null && submissionConfirmationRenderMode === "replace") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `fe-form ${className}`.trim(), children: confirmationContent });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "form",
+      {
+        ref: formRef,
+        className: `fe-form ${className}`.trim(),
+        noValidate: true,
+        onSubmit: handleSubmit,
+        "aria-hidden": confirmation !== null && submissionConfirmationRenderMode === "dialog" ? true : void 0,
+        children: [
+          slots.renderHeader?.({
+            title: form.schema.title,
+            ...form.schema.description === void 0 ? {} : { description: form.schema.description }
+          }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("header", { className: "fe-header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { children: form.schema.title }),
+            form.schema.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: form.schema.description }),
+            pages === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-progress", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  className: "form-progress-bar",
+                  role: "progressbar",
+                  "aria-valuemin": 1,
+                  "aria-valuemax": visiblePageIndexes.length,
+                  "aria-valuenow": activeVisibleIndex + 1,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "div",
+                    {
+                      className: "form-progress-fill",
+                      style: { width: `${(activeVisibleIndex + 1) / visiblePageIndexes.length * 100}%` }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: form.translate("form.step", { current: activeVisibleIndex + 1, total: visiblePageIndexes.length }) })
+            ] }),
+            draftRestored ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "form-draft-badge", children: form.translate("form.draftRestored") }) : null
+          ] }),
+          activePage === void 0 ? null : slots.renderPageHeader?.({
+            page: activePage,
+            pageIndex: activeVisibleIndex,
+            totalPages: visiblePageIndexes.length
+          }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-page-header", children: [
+            activePage.title === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "fe-page-title", children: activePage.title }),
+            activePage.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "fe-page-description", children: activePage.description })
+          ] }),
+          (() => {
+            const fieldChildren = form.schema.fields.filter((field) => form.visibility[field.id] === true && (fieldIds === void 0 || fieldIds.has(field.id))).map((field) => {
+              const error = form.errors[field.id];
+              const props = {
+                field,
+                value: form.values[field.id],
+                error,
+                setValue: (value) => form.setValue(field.id, value),
+                translate: form.translate,
+                inputId: `${prefix}-${field.id}`,
+                errorId: `${prefix}-${field.id}-error`,
+                helpId: `${prefix}-${field.id}-help`,
+                ...slots.renderCharacterCount === void 0 ? {} : { renderCharacterCount: slots.renderCharacterCount }
+              };
+              if (slots.renderField !== void 0) {
+                return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Fragment, { children: slots.renderField({
+                  question: field,
+                  value: form.values[field.id],
+                  onChange: (value) => {
+                    if (isFormValue(value)) form.setValue(field.id, value);
+                  },
+                  ...error === void 0 ? {} : { error }
+                }) }, field.id);
               }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: form.translate("form.step", { current: activeVisibleIndex + 1, total: visiblePageIndexes.length }) })
-      ] }),
-      draftRestored ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "form-draft-badge", children: form.translate("form.draftRestored") }) : null
-    ] }),
-    activePage === void 0 ? null : slots.renderPageHeader?.({
-      page: activePage,
-      pageIndex: activeVisibleIndex,
-      totalPages: visiblePageIndexes.length
-    }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-page-header", children: [
-      activePage.title === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "fe-page-title", children: activePage.title }),
-      activePage.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "fe-page-description", children: activePage.description })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-fields", children: form.schema.fields.filter((field) => form.visibility[field.id] === true && (fieldIds === void 0 || fieldIds.has(field.id))).map((field) => {
-      const error = form.errors[field.id];
-      const props = {
-        field,
-        value: form.values[field.id],
-        error,
-        setValue: (value) => form.setValue(field.id, value),
-        translate: form.translate,
-        inputId: `${prefix}-${field.id}`,
-        errorId: `${prefix}-${field.id}-error`,
-        helpId: `${prefix}-${field.id}-help`,
-        ...slots.renderCharacterCount === void 0 ? {} : { renderCharacterCount: slots.renderCharacterCount }
-      };
-      if (slots.renderField !== void 0) {
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Fragment, { children: slots.renderField({
-          question: field,
-          value: form.values[field.id],
-          onChange: (value) => {
-            if (isFormValue(value)) form.setValue(field.id, value);
-          },
-          ...error === void 0 ? {} : { error }
-        }) }, field.id);
+              const Component = components[field.type];
+              return Component === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultField, { ...props }, field.id) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props }, field.id);
+            });
+            const fieldClassName = `fe-fields${fieldsClassName === void 0 ? "" : ` ${fieldsClassName}`}`;
+            return slots.renderFields?.({ children: fieldChildren, className: fieldClassName }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: fieldClassName, children: fieldChildren });
+          })(),
+          guardMessage === null ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "alert", children: guardMessage }),
+          confirmation !== null && submissionConfirmationRenderMode === "inline" ? confirmationContent : null,
+          validationIssues.length === 0 ? null : slots.renderValidationSummary?.({ issues: validationIssues }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-validation-summary", role: "alert", children: [
+            validationIssues.length,
+            " validation error",
+            validationIssues.length === 1 ? "" : "s",
+            "."
+          ] }),
+          pages === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+            slots.renderNavigation?.({
+              currentPage: 0,
+              totalPages: 1,
+              canPrev: false,
+              canNext: false,
+              onPrev: () => void 0,
+              onNext: () => void 0
+            }),
+            renderSubmitButton()
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "form-step-navigation", children: [
+            slots.renderNavigation?.({
+              currentPage: activeVisibleIndex,
+              totalPages: visiblePageIndexes.length,
+              canPrev,
+              canNext,
+              onPrev: () => {
+                if (!interactionLocked) setCurrentPageIndex(visiblePageIndexes[activeVisibleIndex - 1] ?? 0);
+              },
+              onNext: handleNext
+            }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+              canPrev ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  className: "btn-prev",
+                  type: "button",
+                  disabled: interactionLocked,
+                  onClick: () => setCurrentPageIndex(visiblePageIndexes[activeVisibleIndex - 1] ?? 0),
+                  children: form.translate("form.back")
+                }
+              ) : null,
+              canNext ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "btn-next", type: "button", disabled: interactionLocked, onClick: handleNext, children: form.translate("form.next") }) : null
+            ] }),
+            canNext ? null : renderSubmitButton()
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-status", "aria-live": "polite", children: [
+            form.submitStatus === "success" ? completionRegion : null,
+            form.submitStatus === "error" && form.submitError !== null ? slots.renderSubmitError?.({ error: form.submitError, onRetry: () => void submitValues() }) ?? (form.submitError instanceof FormSubmissionError && form.submitError.payload.formError !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "alert", children: form.submitError.payload.formError }) : errorMessageKey === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "alert", children: form.translate(errorMessageKey) })) : null
+          ] })
+        ]
       }
-      const Component = components[field.type];
-      return Component === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultField, { ...props }, field.id) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props }, field.id);
-    }) }),
-    guardMessage === null ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "alert", children: guardMessage }),
-    confirmation === null ? null : slots.renderSubmissionConfirmation?.({
-      findings: confirmation.findings,
-      message: confirmation.message ?? form.translate("form.confirmSensitiveData"),
-      schema: form.schema,
-      visibleValues,
-      onConfirm: confirmSubmission,
-      onCancel: cancelSubmission
-    }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-submission-confirmation", role: "dialog", "aria-modal": "true", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: confirmation.message ?? form.translate("form.confirmSensitiveData") }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: confirmSubmission, children: form.translate("form.confirmSubmission") }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: cancelSubmission, children: form.translate("form.cancelSubmission") })
-    ] }),
-    validationIssues.length === 0 ? null : slots.renderValidationSummary?.({ issues: validationIssues }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-validation-summary", role: "alert", children: [
-      validationIssues.length,
-      " validation error",
-      validationIssues.length === 1 ? "" : "s",
-      "."
-    ] }),
-    pages === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      slots.renderNavigation?.({
-        currentPage: 0,
-        totalPages: 1,
-        canPrev: false,
-        canNext: false,
-        onPrev: () => void 0,
-        onNext: () => void 0
-      }),
-      renderSubmitButton()
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "form-step-navigation", children: [
-      slots.renderNavigation?.({
-        currentPage: activeVisibleIndex,
-        totalPages: visiblePageIndexes.length,
-        canPrev,
-        canNext,
-        onPrev: () => {
-          if (!interactionLocked) setCurrentPageIndex(visiblePageIndexes[activeVisibleIndex - 1] ?? 0);
-        },
-        onNext: handleNext
-      }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-        canPrev ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "button",
-          {
-            className: "btn-prev",
-            type: "button",
-            disabled: interactionLocked,
-            onClick: () => setCurrentPageIndex(visiblePageIndexes[activeVisibleIndex - 1] ?? 0),
-            children: form.translate("form.back")
-          }
-        ) : null,
-        canNext ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "btn-next", type: "button", disabled: interactionLocked, onClick: handleNext, children: form.translate("form.next") }) : null
-      ] }),
-      canNext ? null : renderSubmitButton()
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-status", "aria-live": "polite", children: [
-      form.submitStatus === "success" ? completionRegion : null,
-      form.submitStatus === "error" && form.submitError !== null ? slots.renderSubmitError?.({ error: form.submitError, onRetry: () => void submitValues() }) ?? (errorMessageKey === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "alert", children: form.translate(errorMessageKey) })) : null
-    ] })
+    ),
+    confirmation !== null && submissionConfirmationRenderMode === "dialog" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-confirmation-dialog-backdrop", role: "dialog", "aria-modal": "true", children: confirmationContent }) : null
   ] });
 }
 var RENDERER_MESSAGES = {
@@ -3528,6 +3679,8 @@ var RENDERER_MESSAGES = {
   "form.confirmSensitiveData": "Sensitive data may be included. Confirm before submitting.",
   "form.confirmSubmission": "Confirm submission",
   "form.cancelSubmission": "Cancel",
+  "form.yes": "Yes",
+  "form.no": "No",
   "form.alreadySubmitted": "Already submitted.",
   "form.submitAnother": "Submit another response",
   "validation.required": "This field is required."
@@ -3569,6 +3722,7 @@ function FormRenderer(props) {
   FormBuilder,
   FormProvider,
   FormRenderer,
+  FormSubmissionError,
   createLocalStorageSubmissionAttemptStore,
   createLocalStorageSubmissionReceiptStore,
   resolveInitialFieldType,

package/dist/index.d.cts

@@ -338,6 +338,31 @@ interface SubmitResponse {
     readonly submissionId?: string;
     readonly submittedAt?: string;
 }
+interface FormSubmittedAnswerItem {
+    readonly fieldId: string;
+    readonly title: string;
+    readonly type: QuestionType;
+    readonly rawValue: unknown;
+    readonly displayValue: string;
+    readonly visible: boolean;
+    readonly metadata?: Readonly<Record<string, JsonValue>>;
+}
+interface FormCompletionSlotProps {
+    readonly message?: string;
+    readonly schema: FormSchema;
+    readonly answers: Record<string, unknown>;
+    readonly submittedItems: readonly FormSubmittedAnswerItem[];
+    readonly response?: SubmitResponse;
+    readonly onReset?: () => void;
+}
+interface FormServerErrorPayload {
+    readonly fieldErrors?: Readonly<Record<string, string>>;
+    readonly formError?: string;
+}
+declare class FormSubmissionError extends Error {
+    readonly payload: FormServerErrorPayload;
+    constructor(message: string, payload?: FormServerErrorPayload);
+}
 type FormSubmitHandler = (answers: FormValues) => SubmitResponse | void | Promise<SubmitResponse | undefined> | Promise<void>;
 type SubmissionGuardResult = {
     readonly status: "allow";
@@ -352,6 +377,7 @@ type SubmissionGuardResult = {
 };
 type SubmissionGuard = (schema: FormSchema, values: Record<string, unknown>) => SubmissionGuardResult | Promise<SubmissionGuardResult>;
 type FormSuccessRenderMode = "append" | "replace";
+type SubmissionConfirmationRenderMode = "inline" | "replace" | "dialog";
 type FormSubmitStatus = "idle" | "submitting" | "confirming" | "success" | "error";
 /** @deprecated Use FormSubmitStatus instead. */
 type FormSubmitState = "idle" | "submitting" | "confirming" | "success" | "error";
@@ -369,6 +395,10 @@ interface SubmissionConfirmationSlotProps {
     readonly onConfirm: () => void;
     readonly onCancel: () => void;
 }
+interface FormFieldsSlotProps {
+    readonly children: ReactNode;
+    readonly className?: string;
+}
 interface FormRendererSlots {
     readonly renderHeader?: (props: {
         readonly title: string;
@@ -397,9 +427,15 @@ interface FormRendererSlots {
     readonly renderValidationSummary?: (props: {
         readonly issues: readonly ValidationError[];
     }) => ReactNode;
+    /** Additional completion data is supplied at runtime; use renderSubmittedValues for typed summary rendering. */
     readonly renderCompletion?: (props: {
         readonly message: string;
     }) => ReactNode;
+    readonly renderSubmittedValues?: (props: {
+        readonly items: readonly FormSubmittedAnswerItem[];
+        readonly schema: FormSchema;
+    }) => ReactNode;
+    readonly renderFields?: (props: FormFieldsSlotProps) => ReactNode;
     readonly renderSubmitError?: (props: {
         readonly error: Error;
         readonly onRetry?: () => void;
@@ -467,6 +503,7 @@ interface FormContextValue {
     readonly submitError: Error | null;
     readonly isSubmitting: boolean;
     readonly setValue: (fieldId: string, value: FormValue) => void;
+    readonly setServerErrors?: (fieldErrors: Readonly<Record<string, string>>) => void;
     readonly restoreValues: (values: FormValues) => void;
     readonly validatePage: (pageIndex: number) => AnswerValidationResult;
     readonly reset: () => void;
@@ -512,6 +549,9 @@ interface FormRendererPresentationProps extends SubmissionProtectionProps {
      * Defaults to "append" for backwards compatibility.
      */
     readonly successRenderMode?: FormSuccessRenderMode;
+    readonly submissionConfirmationRenderMode?: SubmissionConfirmationRenderMode;
+    readonly showHiddenFieldsInSummary?: boolean;
+    readonly fieldsClassName?: string;
     /** @deprecated Use successRenderMode="replace" instead. */
     readonly hideFormOnSuccess?: boolean;
     readonly successMessageKey?: string;
@@ -532,4 +572,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
 type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
 declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
 
-export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionIconType, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderErrorMessageProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderSlotActions, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormContextValue, FormProvider, type FormProviderProps, FormRenderer, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationSlotProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptQuery, type SubmissionReceiptStore, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, resolveInitialFieldType, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };
+export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionIconType, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderErrorMessageProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderSlotActions, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormCompletionSlotProps, type FormContextValue, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationRenderMode, type SubmissionConfirmationSlotProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptQuery, type SubmissionReceiptStore, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, resolveInitialFieldType, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };

package/dist/index.d.ts

@@ -338,6 +338,31 @@ interface SubmitResponse {
     readonly submissionId?: string;
     readonly submittedAt?: string;
 }
+interface FormSubmittedAnswerItem {
+    readonly fieldId: string;
+    readonly title: string;
+    readonly type: QuestionType;
+    readonly rawValue: unknown;
+    readonly displayValue: string;
+    readonly visible: boolean;
+    readonly metadata?: Readonly<Record<string, JsonValue>>;
+}
+interface FormCompletionSlotProps {
+    readonly message?: string;
+    readonly schema: FormSchema;
+    readonly answers: Record<string, unknown>;
+    readonly submittedItems: readonly FormSubmittedAnswerItem[];
+    readonly response?: SubmitResponse;
+    readonly onReset?: () => void;
+}
+interface FormServerErrorPayload {
+    readonly fieldErrors?: Readonly<Record<string, string>>;
+    readonly formError?: string;
+}
+declare class FormSubmissionError extends Error {
+    readonly payload: FormServerErrorPayload;
+    constructor(message: string, payload?: FormServerErrorPayload);
+}
 type FormSubmitHandler = (answers: FormValues) => SubmitResponse | void | Promise<SubmitResponse | undefined> | Promise<void>;
 type SubmissionGuardResult = {
     readonly status: "allow";
@@ -352,6 +377,7 @@ type SubmissionGuardResult = {
 };
 type SubmissionGuard = (schema: FormSchema, values: Record<string, unknown>) => SubmissionGuardResult | Promise<SubmissionGuardResult>;
 type FormSuccessRenderMode = "append" | "replace";
+type SubmissionConfirmationRenderMode = "inline" | "replace" | "dialog";
 type FormSubmitStatus = "idle" | "submitting" | "confirming" | "success" | "error";
 /** @deprecated Use FormSubmitStatus instead. */
 type FormSubmitState = "idle" | "submitting" | "confirming" | "success" | "error";
@@ -369,6 +395,10 @@ interface SubmissionConfirmationSlotProps {
     readonly onConfirm: () => void;
     readonly onCancel: () => void;
 }
+interface FormFieldsSlotProps {
+    readonly children: ReactNode;
+    readonly className?: string;
+}
 interface FormRendererSlots {
     readonly renderHeader?: (props: {
         readonly title: string;
@@ -397,9 +427,15 @@ interface FormRendererSlots {
     readonly renderValidationSummary?: (props: {
         readonly issues: readonly ValidationError[];
     }) => ReactNode;
+    /** Additional completion data is supplied at runtime; use renderSubmittedValues for typed summary rendering. */
     readonly renderCompletion?: (props: {
         readonly message: string;
     }) => ReactNode;
+    readonly renderSubmittedValues?: (props: {
+        readonly items: readonly FormSubmittedAnswerItem[];
+        readonly schema: FormSchema;
+    }) => ReactNode;
+    readonly renderFields?: (props: FormFieldsSlotProps) => ReactNode;
     readonly renderSubmitError?: (props: {
         readonly error: Error;
         readonly onRetry?: () => void;
@@ -467,6 +503,7 @@ interface FormContextValue {
     readonly submitError: Error | null;
     readonly isSubmitting: boolean;
     readonly setValue: (fieldId: string, value: FormValue) => void;
+    readonly setServerErrors?: (fieldErrors: Readonly<Record<string, string>>) => void;
     readonly restoreValues: (values: FormValues) => void;
     readonly validatePage: (pageIndex: number) => AnswerValidationResult;
     readonly reset: () => void;
@@ -512,6 +549,9 @@ interface FormRendererPresentationProps extends SubmissionProtectionProps {
      * Defaults to "append" for backwards compatibility.
      */
     readonly successRenderMode?: FormSuccessRenderMode;
+    readonly submissionConfirmationRenderMode?: SubmissionConfirmationRenderMode;
+    readonly showHiddenFieldsInSummary?: boolean;
+    readonly fieldsClassName?: string;
     /** @deprecated Use successRenderMode="replace" instead. */
     readonly hideFormOnSuccess?: boolean;
     readonly successMessageKey?: string;
@@ -532,4 +572,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
 type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
 declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
 
-export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionIconType, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderErrorMessageProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderSlotActions, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormContextValue, FormProvider, type FormProviderProps, FormRenderer, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationSlotProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptQuery, type SubmissionReceiptStore, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, resolveInitialFieldType, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };
+export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionIconType, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderErrorMessageProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderSlotActions, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormCompletionSlotProps, type FormContextValue, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationRenderMode, type SubmissionConfirmationSlotProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptQuery, type SubmissionReceiptStore, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, resolveInitialFieldType, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };

package/dist/index.js

@@ -2635,6 +2635,17 @@ function FormProvider({
     },
     [validSchema, validationPageIndex]
   );
+  const setServerErrors = useCallback2((fieldErrors) => {
+    setErrors(
+      Object.fromEntries(
+        Object.entries(fieldErrors).map(([fieldId, message]) => [
+          fieldId,
+          { fieldId, code: "invalid_type", messageKey: message, params: {} }
+        ])
+      )
+    );
+    setValidationPageIndex(null);
+  }, []);
   const restoreValues = useCallback2(
     (restoredValues) => {
       const fieldIds = new Set(validSchema.fields.map((field) => field.id));
@@ -2719,6 +2730,7 @@ function FormProvider({
       submitError,
       isSubmitting: submitStatus === "submitting",
       setValue,
+      setServerErrors,
       restoreValues,
       validatePage,
       reset,
@@ -2732,6 +2744,7 @@ function FormProvider({
       reset,
       restoreValues,
       setValue,
+      setServerErrors,
       submit,
       submitError,
       submitStatus,
@@ -2882,12 +2895,25 @@ import {
 } from "@form-engine-ts/core";
 import {
   Fragment as Fragment2,
+  useCallback as useCallback3,
   useEffect as useEffect3,
   useId,
   useMemo as useMemo4,
   useRef as useRef2,
   useState as useState4
 } from "react";
+
+// src/types.ts
+var FormSubmissionError = class extends Error {
+  payload;
+  constructor(message, payload) {
+    super(message);
+    this.name = "FormSubmissionError";
+    this.payload = payload ?? { formError: message };
+  }
+};
+
+// src/renderer.tsx
 import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function describedBy(field, error, helpId, errorId) {
   const ids = [field.description === void 0 ? void 0 : helpId, error === void 0 ? void 0 : errorId].filter(
@@ -3084,6 +3110,30 @@ function isRecord(value) {
 function isFormValue(value) {
   return value === void 0 || typeof value === "string" || typeof value === "boolean" || typeof value === "number" && Number.isFinite(value) || Array.isArray(value) && value.every((item) => typeof item === "string");
 }
+function displaySubmittedValue(field, value, translate) {
+  if (value === void 0 || value === null) return "";
+  if (field.type === "checkbox") return value === true ? translate("form.yes") : translate("form.no");
+  if (field.type === "multi-select" && Array.isArray(value)) {
+    const labels = new Map(field.options.map((option) => [option.id, option.label]));
+    return value.map((item) => labels.get(item) ?? item).join(", ");
+  }
+  if ((field.type === "radio" || field.type === "select") && typeof value === "string") {
+    return field.options.find((option) => option.id === value)?.label ?? value;
+  }
+  if (Array.isArray(value)) return value.join(", ");
+  return String(value);
+}
+function buildSubmittedItems(schema, answers, visibility, translate, showHiddenFields) {
+  return schema.fields.filter((field) => showHiddenFields || visibility[field.id] === true).map((field) => ({
+    fieldId: field.id,
+    title: field.title,
+    type: field.type,
+    rawValue: answers[field.id],
+    displayValue: displaySubmittedValue(field, answers[field.id], translate),
+    visible: visibility[field.id] === true,
+    ...field.metadata === void 0 ? {} : { metadata: field.metadata }
+  }));
+}
 function parseDraft(serialized) {
   try {
     const value = JSON.parse(serialized);
@@ -3111,6 +3161,9 @@ function ContextFormRenderer({
   beforeSubmit,
   onDraftSave,
   successRenderMode = "append",
+  submissionConfirmationRenderMode = "inline",
+  showHiddenFieldsInSummary = false,
+  fieldsClassName,
   hideFormOnSuccess = false,
   submissionGuards = [],
   receiptStore,
@@ -3129,9 +3182,11 @@ function ContextFormRenderer({
   const [guardMessage, setGuardMessage] = useState4(null);
   const [guardsPending, setGuardsPending] = useState4(false);
   const [receipt, setReceipt] = useState4(null);
+  const [completionData, setCompletionData] = useState4(null);
   const [receiptLoaded, setReceiptLoaded] = useState4(receiptStore === void 0);
   const rendererSubmissionInFlight = useRef2(false);
   const completionRef = useRef2(null);
+  const confirmationRef = useRef2(null);
   const pages = form.schema.pages;
   const visiblePageIndexes = useMemo4(
     () => pages === void 0 ? [] : pages.flatMap((page, index) => form.pageVisibility[page.id] === true ? [index] : []),
@@ -3144,6 +3199,10 @@ function ContextFormRenderer({
   const submitState = confirmation === null && !guardsPending ? form.submitStatus : "confirming";
   const interactionLocked = submitState === "confirming" || submitState === "submitting";
   const isReplaceMode = successRenderMode === "replace" || hideFormOnSuccess;
+  const focusSubmitButton = useCallback3(() => {
+    const button = formRef.current?.querySelector(".fe-submit, button[type='submit'], button");
+    button?.focus();
+  }, []);
   useEffect3(() => {
     let active = true;
     if (receiptStore === void 0) {
@@ -3187,6 +3246,21 @@ function ContextFormRenderer({
     if (!isReplaceMode || form.submitStatus !== "success") return;
     completionRef.current?.focus();
   }, [form.submitStatus, isReplaceMode]);
+  useEffect3(() => {
+    if (confirmation === null) return;
+    const confirmButton = confirmationRef.current?.querySelector("[data-fe-confirm], button");
+    confirmButton?.focus();
+    if (submissionConfirmationRenderMode !== "dialog") return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setConfirmation(null);
+        globalThis.setTimeout(focusSubmitButton, 0);
+      }
+    };
+    globalThis.addEventListener("keydown", onKeyDown);
+    return () => globalThis.removeEventListener("keydown", onKeyDown);
+  }, [confirmation, focusSubmitButton, submissionConfirmationRenderMode]);
   useEffect3(() => {
     if (autoSaveKey === void 0 || typeof globalThis.localStorage === "undefined") return;
     const loadIdentity = `${autoSaveKey}:${form.schema.id}:${form.schema.version}`;
@@ -3302,7 +3376,33 @@ function ContextFormRenderer({
         focusFirstIssue(firstInvalidFieldId);
         return result;
       }
+      if (result.status === "error") {
+        if (result.error instanceof FormSubmissionError) {
+          const fieldErrors = result.error.payload.fieldErrors ?? {};
+          form.setServerErrors?.(fieldErrors);
+          const firstServerFieldId = Object.keys(fieldErrors)[0];
+          if (firstServerFieldId !== void 0) {
+            const invalidPageIndex = pages?.findIndex((page) => page.questionIds.includes(firstServerFieldId));
+            if (invalidPageIndex !== void 0 && invalidPageIndex >= 0) setCurrentPageIndex(invalidPageIndex);
+            focusFirstIssue(firstServerFieldId);
+          }
+        }
+        return result;
+      }
       if (result.status !== "success") return result;
+      const submittedAnswers = { ...form.values };
+      const submittedItems = buildSubmittedItems(
+        form.schema,
+        submittedAnswers,
+        form.visibility,
+        (key) => form.translate(key),
+        showHiddenFieldsInSummary
+      );
+      setCompletionData({
+        answers: submittedAnswers,
+        submittedItems,
+        ...result.response === void 0 ? {} : { response: result.response }
+      });
       if (receiptStore !== void 0) {
         const response = result.response;
         const submissionId = response?.submissionId ?? submissionAttempt?.attemptId;
@@ -3349,6 +3449,7 @@ function ContextFormRenderer({
   };
   const cancelSubmission = () => {
     setConfirmation(null);
+    globalThis.setTimeout(focusSubmitButton, 0);
   };
   const resetReceipt = async () => {
     if (receiptStore === void 0) return;
@@ -3369,7 +3470,48 @@ function ContextFormRenderer({
     return slots.renderSubmitButton?.(submitButtonProps) ?? /* @__PURE__ */ jsx3("button", { className: "fe-submit", type: "submit", disabled: submitButtonProps.disabled, children: form.translate(form.schema.submitLabelKey ?? "form.submit") });
   };
   const completionMessage = form.schema.completionMessage ?? (successMessageKey === void 0 ? "Submitted." : form.translate(successMessageKey));
-  const completionRegion = /* @__PURE__ */ jsx3("div", { ref: completionRef, className: "fe-completion", role: "status", "aria-live": "polite", tabIndex: -1, children: slots.renderCompletion?.({ message: completionMessage }) ?? /* @__PURE__ */ jsx3("div", { children: completionMessage }) });
+  const activeCompletionData = completionData ?? {
+    answers: { ...form.values },
+    submittedItems: buildSubmittedItems(
+      form.schema,
+      form.values,
+      form.visibility,
+      (key) => form.translate(key),
+      showHiddenFieldsInSummary
+    )
+  };
+  const completionProps = {
+    message: completionMessage,
+    schema: form.schema,
+    answers: activeCompletionData.answers,
+    submittedItems: activeCompletionData.submittedItems,
+    ...activeCompletionData.response === void 0 ? {} : { response: activeCompletionData.response },
+    onReset: form.reset
+  };
+  const completionRegion = /* @__PURE__ */ jsxs2("div", { ref: completionRef, className: "fe-completion", role: "status", "aria-live": "polite", tabIndex: -1, children: [
+    slots.renderCompletion?.(completionProps) ?? /* @__PURE__ */ jsx3("div", { children: completionMessage }),
+    slots.renderSubmittedValues?.({ items: activeCompletionData.submittedItems, schema: form.schema })
+  ] });
+  const confirmationContent = /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref: confirmationRef,
+      className: "fe-submission-confirmation",
+      role: submissionConfirmationRenderMode === "dialog" ? void 0 : "dialog",
+      children: slots.renderSubmissionConfirmation?.({
+        findings: confirmation?.findings ?? [],
+        message: confirmation?.message ?? form.translate("form.confirmSensitiveData"),
+        schema: form.schema,
+        visibleValues,
+        onConfirm: confirmSubmission,
+        onCancel: cancelSubmission
+      }) ?? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+        /* @__PURE__ */ jsx3("p", { children: confirmation?.message ?? form.translate("form.confirmSensitiveData") }),
+        /* @__PURE__ */ jsx3("button", { type: "button", "data-fe-confirm": "true", onClick: confirmSubmission, children: form.translate("form.confirmSubmission") }),
+        /* @__PURE__ */ jsx3("button", { type: "button", onClick: cancelSubmission, children: form.translate("form.cancelSubmission") })
+      ] })
+    }
+  );
   if (!receiptLoaded) return null;
   if (receipt !== null) {
     return /* @__PURE__ */ jsx3("div", { className: `fe-form fe-already-submitted ${className}`.trim(), children: slots.renderAlreadySubmitted?.({
@@ -3383,127 +3525,136 @@ function ContextFormRenderer({
   if (form.submitStatus === "success" && isReplaceMode) {
     return /* @__PURE__ */ jsx3("div", { className: `fe-form ${className}`.trim(), children: completionRegion });
   }
-  return /* @__PURE__ */ jsxs2("form", { ref: formRef, className: `fe-form ${className}`.trim(), noValidate: true, onSubmit: handleSubmit, children: [
-    slots.renderHeader?.({
-      title: form.schema.title,
-      ...form.schema.description === void 0 ? {} : { description: form.schema.description }
-    }) ?? /* @__PURE__ */ jsxs2("header", { className: "fe-header", children: [
-      /* @__PURE__ */ jsx3("h1", { children: form.schema.title }),
-      form.schema.description === void 0 ? null : /* @__PURE__ */ jsx3("p", { children: form.schema.description }),
-      pages === void 0 ? null : /* @__PURE__ */ jsxs2("div", { className: "fe-progress", children: [
-        /* @__PURE__ */ jsx3(
-          "div",
-          {
-            className: "form-progress-bar",
-            role: "progressbar",
-            "aria-valuemin": 1,
-            "aria-valuemax": visiblePageIndexes.length,
-            "aria-valuenow": activeVisibleIndex + 1,
-            children: /* @__PURE__ */ jsx3(
-              "div",
-              {
-                className: "form-progress-fill",
-                style: { width: `${(activeVisibleIndex + 1) / visiblePageIndexes.length * 100}%` }
+  if (confirmation !== null && submissionConfirmationRenderMode === "replace") {
+    return /* @__PURE__ */ jsx3("div", { className: `fe-form ${className}`.trim(), children: confirmationContent });
+  }
+  return /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    /* @__PURE__ */ jsxs2(
+      "form",
+      {
+        ref: formRef,
+        className: `fe-form ${className}`.trim(),
+        noValidate: true,
+        onSubmit: handleSubmit,
+        "aria-hidden": confirmation !== null && submissionConfirmationRenderMode === "dialog" ? true : void 0,
+        children: [
+          slots.renderHeader?.({
+            title: form.schema.title,
+            ...form.schema.description === void 0 ? {} : { description: form.schema.description }
+          }) ?? /* @__PURE__ */ jsxs2("header", { className: "fe-header", children: [
+            /* @__PURE__ */ jsx3("h1", { children: form.schema.title }),
+            form.schema.description === void 0 ? null : /* @__PURE__ */ jsx3("p", { children: form.schema.description }),
+            pages === void 0 ? null : /* @__PURE__ */ jsxs2("div", { className: "fe-progress", children: [
+              /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  className: "form-progress-bar",
+                  role: "progressbar",
+                  "aria-valuemin": 1,
+                  "aria-valuemax": visiblePageIndexes.length,
+                  "aria-valuenow": activeVisibleIndex + 1,
+                  children: /* @__PURE__ */ jsx3(
+                    "div",
+                    {
+                      className: "form-progress-fill",
+                      style: { width: `${(activeVisibleIndex + 1) / visiblePageIndexes.length * 100}%` }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx3("span", { children: form.translate("form.step", { current: activeVisibleIndex + 1, total: visiblePageIndexes.length }) })
+            ] }),
+            draftRestored ? /* @__PURE__ */ jsx3("span", { className: "form-draft-badge", children: form.translate("form.draftRestored") }) : null
+          ] }),
+          activePage === void 0 ? null : slots.renderPageHeader?.({
+            page: activePage,
+            pageIndex: activeVisibleIndex,
+            totalPages: visiblePageIndexes.length
+          }) ?? /* @__PURE__ */ jsxs2("div", { className: "fe-page-header", children: [
+            activePage.title === void 0 ? null : /* @__PURE__ */ jsx3("h2", { className: "fe-page-title", children: activePage.title }),
+            activePage.description === void 0 ? null : /* @__PURE__ */ jsx3("p", { className: "fe-page-description", children: activePage.description })
+          ] }),
+          (() => {
+            const fieldChildren = form.schema.fields.filter((field) => form.visibility[field.id] === true && (fieldIds === void 0 || fieldIds.has(field.id))).map((field) => {
+              const error = form.errors[field.id];
+              const props = {
+                field,
+                value: form.values[field.id],
+                error,
+                setValue: (value) => form.setValue(field.id, value),
+                translate: form.translate,
+                inputId: `${prefix}-${field.id}`,
+                errorId: `${prefix}-${field.id}-error`,
+                helpId: `${prefix}-${field.id}-help`,
+                ...slots.renderCharacterCount === void 0 ? {} : { renderCharacterCount: slots.renderCharacterCount }
+              };
+              if (slots.renderField !== void 0) {
+                return /* @__PURE__ */ jsx3(Fragment2, { children: slots.renderField({
+                  question: field,
+                  value: form.values[field.id],
+                  onChange: (value) => {
+                    if (isFormValue(value)) form.setValue(field.id, value);
+                  },
+                  ...error === void 0 ? {} : { error }
+                }) }, field.id);
               }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx3("span", { children: form.translate("form.step", { current: activeVisibleIndex + 1, total: visiblePageIndexes.length }) })
-      ] }),
-      draftRestored ? /* @__PURE__ */ jsx3("span", { className: "form-draft-badge", children: form.translate("form.draftRestored") }) : null
-    ] }),
-    activePage === void 0 ? null : slots.renderPageHeader?.({
-      page: activePage,
-      pageIndex: activeVisibleIndex,
-      totalPages: visiblePageIndexes.length
-    }) ?? /* @__PURE__ */ jsxs2("div", { className: "fe-page-header", children: [
-      activePage.title === void 0 ? null : /* @__PURE__ */ jsx3("h2", { className: "fe-page-title", children: activePage.title }),
-      activePage.description === void 0 ? null : /* @__PURE__ */ jsx3("p", { className: "fe-page-description", children: activePage.description })
-    ] }),
-    /* @__PURE__ */ jsx3("div", { className: "fe-fields", children: form.schema.fields.filter((field) => form.visibility[field.id] === true && (fieldIds === void 0 || fieldIds.has(field.id))).map((field) => {
-      const error = form.errors[field.id];
-      const props = {
-        field,
-        value: form.values[field.id],
-        error,
-        setValue: (value) => form.setValue(field.id, value),
-        translate: form.translate,
-        inputId: `${prefix}-${field.id}`,
-        errorId: `${prefix}-${field.id}-error`,
-        helpId: `${prefix}-${field.id}-help`,
-        ...slots.renderCharacterCount === void 0 ? {} : { renderCharacterCount: slots.renderCharacterCount }
-      };
-      if (slots.renderField !== void 0) {
-        return /* @__PURE__ */ jsx3(Fragment2, { children: slots.renderField({
-          question: field,
-          value: form.values[field.id],
-          onChange: (value) => {
-            if (isFormValue(value)) form.setValue(field.id, value);
-          },
-          ...error === void 0 ? {} : { error }
-        }) }, field.id);
+              const Component = components[field.type];
+              return Component === void 0 ? /* @__PURE__ */ jsx3(DefaultField, { ...props }, field.id) : /* @__PURE__ */ jsx3(Component, { ...props }, field.id);
+            });
+            const fieldClassName = `fe-fields${fieldsClassName === void 0 ? "" : ` ${fieldsClassName}`}`;
+            return slots.renderFields?.({ children: fieldChildren, className: fieldClassName }) ?? /* @__PURE__ */ jsx3("div", { className: fieldClassName, children: fieldChildren });
+          })(),
+          guardMessage === null ? null : /* @__PURE__ */ jsx3("div", { role: "alert", children: guardMessage }),
+          confirmation !== null && submissionConfirmationRenderMode === "inline" ? confirmationContent : null,
+          validationIssues.length === 0 ? null : slots.renderValidationSummary?.({ issues: validationIssues }) ?? /* @__PURE__ */ jsxs2("div", { className: "fe-validation-summary", role: "alert", children: [
+            validationIssues.length,
+            " validation error",
+            validationIssues.length === 1 ? "" : "s",
+            "."
+          ] }),
+          pages === void 0 ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+            slots.renderNavigation?.({
+              currentPage: 0,
+              totalPages: 1,
+              canPrev: false,
+              canNext: false,
+              onPrev: () => void 0,
+              onNext: () => void 0
+            }),
+            renderSubmitButton()
+          ] }) : /* @__PURE__ */ jsxs2("div", { className: "form-step-navigation", children: [
+            slots.renderNavigation?.({
+              currentPage: activeVisibleIndex,
+              totalPages: visiblePageIndexes.length,
+              canPrev,
+              canNext,
+              onPrev: () => {
+                if (!interactionLocked) setCurrentPageIndex(visiblePageIndexes[activeVisibleIndex - 1] ?? 0);
+              },
+              onNext: handleNext
+            }) ?? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+              canPrev ? /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  className: "btn-prev",
+                  type: "button",
+                  disabled: interactionLocked,
+                  onClick: () => setCurrentPageIndex(visiblePageIndexes[activeVisibleIndex - 1] ?? 0),
+                  children: form.translate("form.back")
+                }
+              ) : null,
+              canNext ? /* @__PURE__ */ jsx3("button", { className: "btn-next", type: "button", disabled: interactionLocked, onClick: handleNext, children: form.translate("form.next") }) : null
+            ] }),
+            canNext ? null : renderSubmitButton()
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "fe-status", "aria-live": "polite", children: [
+            form.submitStatus === "success" ? completionRegion : null,
+            form.submitStatus === "error" && form.submitError !== null ? slots.renderSubmitError?.({ error: form.submitError, onRetry: () => void submitValues() }) ?? (form.submitError instanceof FormSubmissionError && form.submitError.payload.formError !== void 0 ? /* @__PURE__ */ jsx3("div", { role: "alert", children: form.submitError.payload.formError }) : errorMessageKey === void 0 ? null : /* @__PURE__ */ jsx3("div", { role: "alert", children: form.translate(errorMessageKey) })) : null
+          ] })
+        ]
       }
-      const Component = components[field.type];
-      return Component === void 0 ? /* @__PURE__ */ jsx3(DefaultField, { ...props }, field.id) : /* @__PURE__ */ jsx3(Component, { ...props }, field.id);
-    }) }),
-    guardMessage === null ? null : /* @__PURE__ */ jsx3("div", { role: "alert", children: guardMessage }),
-    confirmation === null ? null : slots.renderSubmissionConfirmation?.({
-      findings: confirmation.findings,
-      message: confirmation.message ?? form.translate("form.confirmSensitiveData"),
-      schema: form.schema,
-      visibleValues,
-      onConfirm: confirmSubmission,
-      onCancel: cancelSubmission
-    }) ?? /* @__PURE__ */ jsxs2("div", { className: "fe-submission-confirmation", role: "dialog", "aria-modal": "true", children: [
-      /* @__PURE__ */ jsx3("p", { children: confirmation.message ?? form.translate("form.confirmSensitiveData") }),
-      /* @__PURE__ */ jsx3("button", { type: "button", onClick: confirmSubmission, children: form.translate("form.confirmSubmission") }),
-      /* @__PURE__ */ jsx3("button", { type: "button", onClick: cancelSubmission, children: form.translate("form.cancelSubmission") })
-    ] }),
-    validationIssues.length === 0 ? null : slots.renderValidationSummary?.({ issues: validationIssues }) ?? /* @__PURE__ */ jsxs2("div", { className: "fe-validation-summary", role: "alert", children: [
-      validationIssues.length,
-      " validation error",
-      validationIssues.length === 1 ? "" : "s",
-      "."
-    ] }),
-    pages === void 0 ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
-      slots.renderNavigation?.({
-        currentPage: 0,
-        totalPages: 1,
-        canPrev: false,
-        canNext: false,
-        onPrev: () => void 0,
-        onNext: () => void 0
-      }),
-      renderSubmitButton()
-    ] }) : /* @__PURE__ */ jsxs2("div", { className: "form-step-navigation", children: [
-      slots.renderNavigation?.({
-        currentPage: activeVisibleIndex,
-        totalPages: visiblePageIndexes.length,
-        canPrev,
-        canNext,
-        onPrev: () => {
-          if (!interactionLocked) setCurrentPageIndex(visiblePageIndexes[activeVisibleIndex - 1] ?? 0);
-        },
-        onNext: handleNext
-      }) ?? /* @__PURE__ */ jsxs2(Fragment3, { children: [
-        canPrev ? /* @__PURE__ */ jsx3(
-          "button",
-          {
-            className: "btn-prev",
-            type: "button",
-            disabled: interactionLocked,
-            onClick: () => setCurrentPageIndex(visiblePageIndexes[activeVisibleIndex - 1] ?? 0),
-            children: form.translate("form.back")
-          }
-        ) : null,
-        canNext ? /* @__PURE__ */ jsx3("button", { className: "btn-next", type: "button", disabled: interactionLocked, onClick: handleNext, children: form.translate("form.next") }) : null
-      ] }),
-      canNext ? null : renderSubmitButton()
-    ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "fe-status", "aria-live": "polite", children: [
-      form.submitStatus === "success" ? completionRegion : null,
-      form.submitStatus === "error" && form.submitError !== null ? slots.renderSubmitError?.({ error: form.submitError, onRetry: () => void submitValues() }) ?? (errorMessageKey === void 0 ? null : /* @__PURE__ */ jsx3("div", { role: "alert", children: form.translate(errorMessageKey) })) : null
-    ] })
+    ),
+    confirmation !== null && submissionConfirmationRenderMode === "dialog" ? /* @__PURE__ */ jsx3("div", { className: "fe-confirmation-dialog-backdrop", role: "dialog", "aria-modal": "true", children: confirmationContent }) : null
   ] });
 }
 var RENDERER_MESSAGES = {
@@ -3516,6 +3667,8 @@ var RENDERER_MESSAGES = {
   "form.confirmSensitiveData": "Sensitive data may be included. Confirm before submitting.",
   "form.confirmSubmission": "Confirm submission",
   "form.cancelSubmission": "Cancel",
+  "form.yes": "Yes",
+  "form.no": "No",
   "form.alreadySubmitted": "Already submitted.",
   "form.submitAnother": "Submit another response",
   "validation.required": "This field is required."
@@ -3556,6 +3709,7 @@ export {
   FormBuilder,
   FormProvider,
   FormRenderer,
+  FormSubmissionError,
   createLocalStorageSubmissionAttemptStore,
   createLocalStorageSubmissionReceiptStore,
   resolveInitialFieldType,

package/dist/styles.css

@@ -281,3 +281,20 @@
 .form-engine-builder__add {
   justify-self: start;
 }
+.fe-confirmation-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  background: rgb(0 0 0 / 45%);
+}
+.fe-confirmation-dialog-backdrop .fe-submission-confirmation {
+  max-width: 32rem;
+  padding: 1.5rem;
+  background: Canvas;
+  color: CanvasText;
+  border-radius: 0.5rem;
+  box-shadow: 0 1rem 3rem rgb(0 0 0 / 25%);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-engine-ts/react",
-  "version": "2.9.5",
+  "version": "2.9.6",
   "publishConfig": {
     "access": "public"
   },
@@ -42,8 +42,8 @@
     "typescript"
   ],
   "dependencies": {
-    "@form-engine-ts/core": "2.9.5",
-    "@form-engine-ts/privacy": "2.9.5"
+    "@form-engine-ts/core": "2.9.6",
+    "@form-engine-ts/privacy": "2.9.6"
   },
   "peerDependencies": {
     "react": ">=18.2 <20",