@form-engine-ts/react 2.9.4 → 2.9.6

package/dist/index.js

@@ -1058,7 +1058,7 @@ function BuilderButton(props) {
       ...props,
       className: primitiveClassName(props.className, "feb-button", context.unstyled),
       disabled: context.readOnly || props.disabled === true,
-      readOnly: context.readOnly
+      readOnly: context.readOnly || props.readOnly === true
     }
   );
 }
@@ -1073,7 +1073,7 @@ function BuilderIconButton(props) {
       icon,
       className: primitiveClassName(props.className, "feb-icon-button", context.unstyled),
       disabled: context.readOnly || props.disabled === true,
-      readOnly: context.readOnly
+      readOnly: context.readOnly || props.readOnly === true
     }
   );
 }
@@ -1086,7 +1086,7 @@ function BuilderTextInput(props) {
       ...props,
       className: primitiveClassName(props.className, "feb-input", context.unstyled),
       disabled: context.readOnly || props.disabled === true,
-      readOnly: context.readOnly
+      readOnly: context.readOnly || props.readOnly === true
     }
   );
 }
@@ -1099,7 +1099,7 @@ function BuilderTextArea(props) {
       ...props,
       className: primitiveClassName(props.className, "feb-textarea", context.unstyled),
       disabled: context.readOnly || props.disabled === true,
-      readOnly: context.readOnly
+      readOnly: context.readOnly || props.readOnly === true
     }
   );
 }
@@ -1112,7 +1112,7 @@ function BuilderSelect(props) {
       ...props,
       className: primitiveClassName(props.className, "feb-select", context.unstyled),
       disabled: context.readOnly || props.disabled === true,
-      readOnly: context.readOnly
+      readOnly: context.readOnly || props.readOnly === true
     }
   );
 }
@@ -1125,7 +1125,7 @@ function BuilderCheckbox(props) {
       ...props,
       className: primitiveClassName(props.className, "feb-checkbox", context.unstyled),
       disabled: context.readOnly || props.disabled === true,
-      readOnly: context.readOnly
+      readOnly: context.readOnly || props.readOnly === true
     }
   );
 }
@@ -1271,6 +1271,59 @@ function fieldTypeKey(type) {
 function operatorKey(operator) {
   return `builder.operator.${operator}`;
 }
+function manualTranslationContext(schema, locale, target, property, translatedText) {
+  if (target.kind === "form") {
+    if (property !== "title" && property !== "description" && property !== "completionMessage") return void 0;
+    return {
+      locale,
+      kind: "form",
+      nodeId: schema.id,
+      property,
+      sourceText: schema[property] ?? "",
+      translatedText,
+      ...schema.translationMetadata?.[locale]?.[property] === void 0 ? {} : { existingTranslationMetadata: schema.translationMetadata[locale]?.[property] }
+    };
+  }
+  if (target.id === void 0) return void 0;
+  if (target.kind === "field") {
+    const field = schema.fields.find((candidate) => candidate.id === target.id);
+    if (field === void 0 || property !== "title" && property !== "description") return void 0;
+    return {
+      locale,
+      kind: "field",
+      nodeId: field.id,
+      property,
+      sourceText: field[property] ?? "",
+      translatedText,
+      ...field.translationMetadata?.[locale]?.[property] === void 0 ? {} : { existingTranslationMetadata: field.translationMetadata[locale]?.[property] }
+    };
+  }
+  if (target.kind === "page") {
+    const page = schema.pages?.find((candidate) => candidate.id === target.id);
+    if (page === void 0 || property !== "title" && property !== "description") return void 0;
+    return {
+      locale,
+      kind: "page",
+      nodeId: page.id,
+      property,
+      sourceText: page[property] ?? "",
+      translatedText,
+      ...page.translationMetadata?.[locale]?.[property] === void 0 ? {} : { existingTranslationMetadata: page.translationMetadata[locale]?.[property] }
+    };
+  }
+  if (property !== "label") return void 0;
+  const option = schema.fields.filter((field) => "options" in field).flatMap((field) => field.options).find((candidate) => candidate.id === target.id);
+  if (option === void 0) return void 0;
+  return {
+    locale,
+    kind: "option",
+    nodeId: option.id,
+    property,
+    sourceText: option.label,
+    translatedText,
+    ...option.translationMetadata?.[locale]?.[property] === void 0 ? {} : { existingTranslationMetadata: option.translationMetadata[locale]?.[property] }
+  };
+}
 function defaultConditionValue(field) {
   if (field.type === "checkbox") return true;
   if (field.type === "number" || field.type === "rating") return field.min ?? 1;
@@ -1529,25 +1582,30 @@ function FormBuilder({
       setIsTranslating(false);
     }
   };
-  const updateManualTranslation = (context) => {
-    if (readOnly) return;
-    const metadata = createManualTranslationMetadata?.(context);
-    const target = context.kind === "form" ? { kind: "form" } : { kind: context.kind, id: context.nodeId };
-    executeAction(
+  const setManualTranslation = (targetLocale, target, property, text) => {
+    if (readOnly) return { success: true };
+    const normalizedLocale = targetLocale.trim();
+    const context = manualTranslationContext(schema, normalizedLocale, target, property, text);
+    const metadata = context === void 0 ? void 0 : createManualTranslationMetadata?.(context);
+    return executeAction(
       () => headless.setLocaleTranslation(
-        context.locale,
+        normalizedLocale,
         target,
-        context.property,
-        context.translatedText,
+        property,
+        text,
         metadata === void 0 ? void 0 : { metadata }
       ),
       {
-        action: "setLocaleTranslation",
-        targetId: context.nodeId,
-        params: { locale: context.locale, kind: context.kind, property: context.property }
+        action: "setManualTranslation",
+        ...target.id === void 0 ? {} : { targetId: target.id },
+        params: { locale: normalizedLocale, kind: target.kind, property }
       }
     );
   };
+  const updateManualTranslation = (context) => {
+    const target = context.kind === "form" ? { kind: "form" } : { kind: context.kind, id: context.nodeId };
+    setManualTranslation(context.locale, target, context.property, context.translatedText);
+  };
   const updateFormTranslation = (property, translatedText) => {
     if (editingLocale.length === 0) return;
     updateManualTranslation({
@@ -1656,6 +1714,7 @@ function FormBuilder({
       ...target.id === void 0 ? {} : { targetId: target.id },
       params: { locale: targetLocale, property }
     }),
+    setManualTranslation,
     addLocale: (targetLocale) => executeAction(() => headless.addLocale(targetLocale), {
       action: "addLocale",
       params: { locale: targetLocale }
@@ -2576,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));
@@ -2660,6 +2730,7 @@ function FormProvider({
       submitError,
       isSubmitting: submitStatus === "submitting",
       setValue,
+      setServerErrors,
       restoreValues,
       validatePage,
       reset,
@@ -2673,6 +2744,7 @@ function FormProvider({
       reset,
       restoreValues,
       setValue,
+      setServerErrors,
       submit,
       submitError,
       submitStatus,
@@ -2823,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(
@@ -3025,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);
@@ -3051,6 +3160,11 @@ function ContextFormRenderer({
   autoSaveKey,
   beforeSubmit,
   onDraftSave,
+  successRenderMode = "append",
+  submissionConfirmationRenderMode = "inline",
+  showHiddenFieldsInSummary = false,
+  fieldsClassName,
+  hideFormOnSuccess = false,
   submissionGuards = [],
   receiptStore,
   attemptStore,
@@ -3066,9 +3180,13 @@ function ContextFormRenderer({
   const [focusFieldId, setFocusFieldId] = useState4(null);
   const [confirmation, setConfirmation] = useState4(null);
   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] : []),
@@ -3078,8 +3196,13 @@ function ContextFormRenderer({
   const activeVisibleIndex = visiblePageIndexes.indexOf(currentPageIndex);
   const fieldIds = activePage === void 0 ? void 0 : new Set(activePage.questionIds);
   const visibleValues = useMemo4(() => selectVisibleAnswers2(form.schema, form.values), [form.schema, form.values]);
-  const submitState = confirmation === null ? form.submitStatus : "confirming";
+  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) {
@@ -3119,6 +3242,25 @@ function ContextFormRenderer({
       setFocusFieldId(null);
     }
   }, [focusFieldId]);
+  useEffect3(() => {
+    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}`;
@@ -3184,13 +3326,14 @@ function ContextFormRenderer({
     };
   };
   const submitValues = async (guardsConfirmed = false) => {
-    if (rendererSubmissionInFlight.current || confirmation !== null && !guardsConfirmed) {
+    if (rendererSubmissionInFlight.current || submitState === "submitting" || submitState === "success" || confirmation !== null && !guardsConfirmed) {
       return { status: "cancelled" };
     }
     const validation = validateAnswers2(form.schema, form.values);
     const firstInvalidFieldId = validation.issues[0]?.fieldId;
     if (validation.valid && !guardsConfirmed && submissionGuards.length > 0) {
       rendererSubmissionInFlight.current = true;
+      setGuardsPending(true);
       try {
         const guardResult = await runSubmissionGuards(submissionGuards);
         if (guardResult.status === "block") {
@@ -3207,6 +3350,7 @@ function ContextFormRenderer({
         }
       } finally {
         rendererSubmissionInFlight.current = false;
+        setGuardsPending(false);
       }
     }
     setGuardMessage(null);
@@ -3232,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;
@@ -3244,7 +3414,6 @@ function ContextFormRenderer({
         };
         try {
           await receiptStore.save(storedReceipt);
-          setReceipt(storedReceipt);
         } catch (cause) {
           const error = cause instanceof Error ? cause : new Error(String(cause));
           try {
@@ -3271,7 +3440,7 @@ function ContextFormRenderer({
   };
   const handleSubmit = (event) => {
     event.preventDefault();
-    if (interactionLocked) return;
+    if (submitState === "submitting" || submitState === "confirming" || submitState === "success") return;
     void submitValues();
   };
   const confirmSubmission = () => {
@@ -3280,6 +3449,7 @@ function ContextFormRenderer({
   };
   const cancelSubmission = () => {
     setConfirmation(null);
+    globalThis.setTimeout(focusSubmitButton, 0);
   };
   const resetReceipt = async () => {
     if (receiptStore === void 0) return;
@@ -3290,7 +3460,58 @@ function ContextFormRenderer({
   const validationIssues = Object.values(form.errors).filter((issue) => issue !== void 0);
   const canPrev = pages !== void 0 && activeVisibleIndex > 0;
   const canNext = pages !== void 0 && activeVisibleIndex < visiblePageIndexes.length - 1;
-  const renderSubmitButton = () => slots.renderSubmitButton?.({ isSubmitting: interactionLocked, onSubmit: () => void submitValues() }) ?? /* @__PURE__ */ jsx3("button", { className: "fe-submit", type: "submit", disabled: interactionLocked, children: form.translate(form.schema.submitLabelKey ?? "form.submit") });
+  const renderSubmitButton = () => {
+    const submitButtonProps = {
+      isSubmitting: submitState === "submitting",
+      submitStatus: submitState,
+      disabled: interactionLocked || submitState === "success",
+      onSubmit: () => void submitValues()
+    };
+    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 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?.({
@@ -3301,129 +3522,139 @@ function ContextFormRenderer({
       receiptStore === void 0 ? null : /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => void resetReceipt(), children: form.translate("form.submitAnother") })
     ] }) });
   }
-  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 (form.submitStatus === "success" && isReplaceMode) {
+    return /* @__PURE__ */ jsx3("div", { className: `fe-form ${className}`.trim(), children: completionRegion });
+  }
+  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" ? slots.renderCompletion?.({
-        message: form.schema.completionMessage ?? (successMessageKey === void 0 ? "Submitted." : form.translate(successMessageKey))
-      }) ?? /* @__PURE__ */ jsx3("div", { role: "status", children: form.schema.completionMessage ?? (successMessageKey === void 0 ? "Submitted." : form.translate(successMessageKey)) }) : 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 = {
@@ -3436,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."
@@ -3476,6 +3709,7 @@ export {
   FormBuilder,
   FormProvider,
   FormRenderer,
+  FormSubmissionError,
   createLocalStorageSubmissionAttemptStore,
   createLocalStorageSubmissionReceiptStore,
   resolveInitialFieldType,