@form-engine-ts/react 2.9.5 → 3.0.0

package/dist/index.js

@@ -1214,6 +1214,11 @@ var BUILDER_DEFAULTS = {
   "builder.translating": "Translating\u2026",
   "builder.translationLocale": "Translation locale",
   "builder.selectLocale": "Select a locale to edit translations.",
+  "builder.localization.selectLocaleToAdd": "Select a locale to add",
+  "builder.localization.noLocalesConfigured": "Translations not configured",
+  "builder.localization.localesConfiguredSummary": "{{count}} locales configured",
+  "builder.localization.allLocalesAdded": "\u3059\u3079\u3066\u306E\u5019\u88DC\u8A00\u8A9E\u304C\u8FFD\u52A0\u6E08\u307F\u3067\u3059",
+  "builder.localization.maxLocalesReached": "\u767B\u9332\u53EF\u80FD\u306A\u6700\u5927\u8A00\u8A9E\u6570\uFF08{{max}}\uFF09\u306B\u9054\u3057\u307E\u3057\u305F",
   "builder.translation": "{{locale}} translation",
   "builder.translatedFormTitle": "Translated form title",
   "builder.translatedFormDescription": "Translated form description",
@@ -2585,6 +2590,18 @@ import {
   validatePageAnswers
 } from "@form-engine-ts/core";
 import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect, useMemo as useMemo2, useRef, useState as useState2 } 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/context.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var FormContext = createContext2(null);
 function issuesByField(issues) {
@@ -2592,6 +2609,18 @@ function issuesByField(issues) {
   for (const issue of issues) result[issue.fieldId] ??= issue;
   return result;
 }
+function defaultAttemptId2() {
+  const randomUuid = globalThis.crypto?.randomUUID;
+  if (typeof randomUuid === "function") return randomUuid.call(globalThis.crypto);
+  return `attempt-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+function isServerErrorPayload(value) {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+  const record = value;
+  const fieldErrors = record.fieldErrors;
+  const formError = record.formError;
+  return (Object.hasOwn(record, "fieldErrors") || Object.hasOwn(record, "formError")) && (fieldErrors === void 0 || typeof fieldErrors === "object" && fieldErrors !== null && !Array.isArray(fieldErrors) && Object.values(fieldErrors).every((message) => typeof message === "string")) && (formError === void 0 || typeof formError === "string");
+}
 function FormProvider({
   schema,
   locale,
@@ -2635,6 +2664,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));
@@ -2665,7 +2705,7 @@ function FormProvider({
     setSubmitError(null);
   }, [initialValues]);
   const submit = useCallback2(
-    async (beforeSubmit, prepareSubmission) => {
+    async (beforeSubmit, submitContext) => {
       if (submissionInFlight.current) return { status: "cancelled" };
       const validation = validateAnswers(validSchema, values);
       if (!validation.valid) {
@@ -2686,13 +2726,22 @@ function FormProvider({
           setSubmitStatus("idle");
           return { status: "cancelled" };
         }
-        const submissionValues = prepareSubmission === void 0 ? visibleValues : await prepareSubmission(visibleValues);
-        const response = await onSubmit(submissionValues);
+        const context = submitContext ?? {
+          attemptId: defaultAttemptId2(),
+          formId: validSchema.id,
+          formVersion: validSchema.version,
+          locale,
+          submittedAt: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        const response = await onSubmit({ ...visibleValues }, context);
         if (resetOnSuccess) setValues({ ...initialValues });
         setSubmitStatus("success");
         return response === void 0 ? { status: "success" } : { status: "success", response };
       } catch (cause) {
-        const error = cause instanceof Error ? cause : new Error(String(cause));
+        const error = isServerErrorPayload(cause) ? new FormSubmissionError(
+          cause.formError ?? (cause instanceof Error ? cause.message : "Form submission failed."),
+          cause
+        ) : cause instanceof Error ? cause : new Error(String(cause));
         setSubmitError(error);
         setSubmitStatus("error");
         return { status: "error", error };
@@ -2700,7 +2749,7 @@ function FormProvider({
         submissionInFlight.current = false;
       }
     },
-    [initialValues, onSubmit, resetOnSuccess, validSchema, values]
+    [initialValues, locale, onSubmit, resetOnSuccess, validSchema, values]
   );
   const translate = useCallback2(
     (key, params) => translator.translate(key, locale, params),
@@ -2719,6 +2768,7 @@ function FormProvider({
       submitError,
       isSubmitting: submitStatus === "submitting",
       setValue,
+      setServerErrors,
       restoreValues,
       validatePage,
       reset,
@@ -2732,6 +2782,7 @@ function FormProvider({
       reset,
       restoreValues,
       setValue,
+      setServerErrors,
       submit,
       submitError,
       submitStatus,
@@ -2882,6 +2933,7 @@ import {
 } from "@form-engine-ts/core";
 import {
   Fragment as Fragment2,
+  useCallback as useCallback3,
   useEffect as useEffect3,
   useId,
   useMemo as useMemo4,
@@ -3074,7 +3126,11 @@ function DefaultField(props) {
       fieldId: field.id,
       current: typeof value === "string" ? value.length : 0,
       max: field.maxLength
-    }) : null,
+    }) ?? /* @__PURE__ */ jsxs2("div", { className: "fe-character-count", "aria-live": "polite", children: [
+      typeof value === "string" ? value.length : 0,
+      " / ",
+      field.maxLength
+    ] }) : null,
     /* @__PURE__ */ jsx3(FieldMessage, { props })
   ] });
 }
@@ -3084,6 +3140,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);
@@ -3102,15 +3182,65 @@ function parseDraft(serialized) {
     return null;
   }
 }
+var DEFAULT_RENDERER_MESSAGES = {
+  en: {
+    submitButton: "Submit",
+    submittingButton: "Submitting...",
+    retryButton: "Retry",
+    requiredField: "This field is required.",
+    alreadySubmittedTitle: "Already Submitted",
+    alreadySubmittedMessage: "Already submitted.",
+    serverErrorSummary: "Submission failed. Please check your answers and try again.",
+    confirmSensitiveDataTitle: "Sensitive data may be included",
+    confirmSensitiveDataMessage: "The following answers may contain personal information. Continue submitting?",
+    confirmButton: "Proceed",
+    cancelButton: "Cancel"
+  },
+  ja: {
+    submitButton: "\u9001\u4FE1\u3059\u308B",
+    submittingButton: "\u9001\u4FE1\u4E2D...",
+    retryButton: "\u518D\u9001\u4FE1\u3059\u308B",
+    requiredField: "\u3053\u306E\u9805\u76EE\u306F\u5FC5\u9808\u3067\u3059",
+    alreadySubmittedTitle: "\u56DE\u7B54\u6E08\u307F\u3067\u3059",
+    alreadySubmittedMessage: "\u3053\u306E\u30A2\u30F3\u30B1\u30FC\u30C8\u306B\u306F\u3059\u3067\u306B\u56DE\u7B54\u3057\u3066\u3044\u307E\u3059\u3002",
+    serverErrorSummary: "\u9001\u4FE1\u306B\u5931\u6557\u3057\u307E\u3057\u305F\u3002\u5185\u5BB9\u3092\u3054\u78BA\u8A8D\u306E\u4E0A\u3001\u518D\u5EA6\u304A\u8A66\u3057\u304F\u3060\u3055\u3044\u3002",
+    confirmSensitiveDataTitle: "\u500B\u4EBA\u60C5\u5831\u304C\u542B\u307E\u308C\u3066\u3044\u308B\u53EF\u80FD\u6027\u304C\u3042\u308A\u307E\u3059",
+    confirmSensitiveDataMessage: "\u4EE5\u4E0B\u306E\u9805\u76EE\u306B\u500B\u4EBA\u60C5\u5831\u3068\u307F\u3089\u308C\u308B\u8A18\u8FF0\u304C\u3042\u308A\u307E\u3059\u3002\u3053\u306E\u307E\u307E\u9001\u4FE1\u3057\u3066\u3082\u3088\u308D\u3057\u3044\u3067\u3059\u304B\uFF1F",
+    confirmButton: "\u3053\u306E\u307E\u307E\u9001\u4FE1",
+    cancelButton: "\u4FEE\u6B63\u3059\u308B"
+  }
+};
+function createRendererAttemptId() {
+  const randomUuid = globalThis.crypto?.randomUUID;
+  if (typeof randomUuid === "function") return randomUuid.call(globalThis.crypto);
+  return `attempt-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+function maskSensitiveValue(finding) {
+  if (finding.maskedText !== void 0) return finding.maskedText;
+  const value = finding.matchedText;
+  if (value === void 0) return void 0;
+  if (finding.type === "email") {
+    const separator = value.indexOf("@");
+    if (separator > 0) return `${value.slice(0, Math.min(2, separator))}***${value.slice(separator)}`;
+  }
+  if (finding.type === "phone" || finding.type === "postal_code") return "***";
+  return value.length <= 2 ? "***" : `${value.slice(0, 2)}***`;
+}
 function ContextFormRenderer({
   components = {},
   className = "",
   successMessageKey,
   errorMessageKey,
+  attemptIdFactory,
+  messages = {},
+  messageResolver,
   autoSaveKey,
   beforeSubmit,
   onDraftSave,
   successRenderMode = "append",
+  submissionConfirmationRenderMode = "inline",
+  showHiddenFieldsInSummary = false,
+  fieldsClassName,
   hideFormOnSuccess = false,
   submissionGuards = [],
   receiptStore,
@@ -3129,9 +3259,12 @@ 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 fallbackAttemptId = useRef2(null);
   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 +3277,22 @@ function ContextFormRenderer({
   const submitState = confirmation === null && !guardsPending ? form.submitStatus : "confirming";
   const interactionLocked = submitState === "confirming" || submitState === "submitting";
   const isReplaceMode = successRenderMode === "replace" || hideFormOnSuccess;
+  const resolveMessage = useCallback3(
+    (key, fallback) => {
+      const defaultText = fallback ?? DEFAULT_RENDERER_MESSAGES[form.locale.toLowerCase().startsWith("ja") ? "ja" : "en"][key] ?? key;
+      const configured = messages[key];
+      return messageResolver?.(key, configured ?? defaultText) ?? configured ?? defaultText;
+    },
+    [form.locale, messageResolver, messages]
+  );
+  const fieldTranslate = useCallback3(
+    (key, params) => key === "validation.required" && (messages.requiredField !== void 0 || messageResolver !== void 0) ? resolveMessage("requiredField") : form.translate(key, params),
+    [form.translate, messageResolver, messages.requiredField, resolveMessage]
+  );
+  const focusSubmitButton = useCallback3(() => {
+    const button = formRef.current?.querySelector(".fe-submit, button[type='submit'], button");
+    button?.focus();
+  }, []);
   useEffect3(() => {
     let active = true;
     if (receiptStore === void 0) {
@@ -3179,6 +3328,7 @@ function ContextFormRenderer({
     );
     const control = fieldContainer?.querySelector("input, select, textarea");
     if (control !== void 0 && control !== null) {
+      control.scrollIntoView?.({ behavior: "smooth", block: "center" });
       control.focus();
       setFocusFieldId(null);
     }
@@ -3187,6 +3337,38 @@ 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);
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const focusable = [
+        ...confirmationRef.current?.querySelectorAll(
+          "button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])"
+        ) ?? []
+      ].filter((element) => !element.hasAttribute("disabled"));
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last?.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first?.focus();
+      }
+    };
+    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}`;
@@ -3283,17 +3465,24 @@ function ContextFormRenderer({
     rendererSubmissionInFlight.current = true;
     try {
       let submissionAttempt;
-      const result = await form.submit(
-        beforeSubmit,
-        attemptStore === void 0 ? void 0 : async (values) => {
-          submissionAttempt = await attemptStore.getOrCreate(form.schema.id, form.schema.version);
-          return {
-            ...values,
-            attemptId: submissionAttempt.attemptId,
-            submissionId: submissionAttempt.attemptId
-          };
-        }
-      );
+      let attemptId = fallbackAttemptId.current;
+      if (attemptStore !== void 0) {
+        submissionAttempt = await attemptStore.getOrCreate(form.schema.id, form.schema.version, attemptIdFactory);
+        attemptId = submissionAttempt.attemptId;
+      } else if (attemptId === null) {
+        attemptId = attemptIdFactory?.() ?? createRendererAttemptId();
+        fallbackAttemptId.current = attemptId;
+      }
+      if (attemptId === null) throw new Error("Unable to create a submission attempt id.");
+      const submittedAt = (/* @__PURE__ */ new Date()).toISOString();
+      const submitContext = {
+        attemptId,
+        formId: form.schema.id,
+        formVersion: form.schema.version,
+        locale: form.locale,
+        submittedAt
+      };
+      const result = await form.submit(beforeSubmit, submitContext);
       if (result.status === "invalid") {
         const invalidPageIndex = pages?.findIndex(
           (page) => firstInvalidFieldId === void 0 ? false : page.questionIds.includes(firstInvalidFieldId)
@@ -3302,14 +3491,40 @@ 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 = form.schema.fields.find((field) => Object.hasOwn(fieldErrors, field.id))?.id ?? 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;
+        const submissionId = response?.submissionId ?? submissionAttempt?.attemptId ?? attemptId;
         const storedReceipt = {
           formId: form.schema.id,
           formVersion: form.schema.version,
-          submittedAt: response?.submittedAt ?? (/* @__PURE__ */ new Date()).toISOString(),
+          submittedAt: response?.submittedAt ?? submittedAt,
           ...submissionId === void 0 ? {} : { submissionId }
         };
         try {
@@ -3328,6 +3543,7 @@ function ContextFormRenderer({
         } catch {
         }
       }
+      if (attemptStore === void 0) fallbackAttemptId.current = null;
       if (autoSaveKey !== void 0 && typeof globalThis.localStorage !== "undefined") {
         globalThis.localStorage.removeItem(autoSaveKey);
         setDraftRestored(false);
@@ -3349,6 +3565,7 @@ function ContextFormRenderer({
   };
   const cancelSubmission = () => {
     setConfirmation(null);
+    globalThis.setTimeout(focusSubmitButton, 0);
   };
   const resetReceipt = async () => {
     if (receiptStore === void 0) return;
@@ -3366,144 +3583,220 @@ function ContextFormRenderer({
       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") });
+    return slots.renderSubmitButton?.(submitButtonProps) ?? /* @__PURE__ */ jsxs2("button", { className: "fe-submit", type: "submit", disabled: submitButtonProps.disabled, children: [
+      submitState === "submitting" ? /* @__PURE__ */ jsx3("span", { className: "fe-spinner", "aria-hidden": "true" }) : null,
+      submitState === "submitting" ? resolveMessage("submittingButton") : resolveMessage("submitButton", 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 ?? resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData")),
+        schema: form.schema,
+        visibleValues,
+        onConfirm: confirmSubmission,
+        onCancel: cancelSubmission
+      }) ?? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+        /* @__PURE__ */ jsx3("h2", { children: resolveMessage("confirmSensitiveDataTitle") }),
+        /* @__PURE__ */ jsx3("p", { children: confirmation?.message ?? resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData")) }),
+        (confirmation?.findings ?? []).length === 0 ? null : /* @__PURE__ */ jsx3("ul", { children: (confirmation?.findings ?? []).map((finding, index) => {
+          const field = form.schema.fields.find((candidate) => candidate.id === finding.fieldId);
+          const typeLabels = form.locale.toLowerCase().startsWith("ja") ? { email: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9", phone: "\u96FB\u8A71\u756A\u53F7", url: "URL", postal_code: "\u90F5\u4FBF\u756A\u53F7" } : { email: "Email address", phone: "Phone number", url: "URL", postal_code: "Postal code" };
+          const typeLabel = finding.typeLabel ?? typeLabels[finding.type] ?? finding.type;
+          const value = maskSensitiveValue(finding);
+          return /* @__PURE__ */ jsxs2("li", { children: [
+            /* @__PURE__ */ jsx3("span", { children: finding.fieldTitle ?? field?.title ?? finding.fieldId }),
+            " ",
+            /* @__PURE__ */ jsx3("span", { className: "fe-sensitive-type", children: typeLabel }),
+            value === void 0 ? null : /* @__PURE__ */ jsxs2("span", { className: "fe-sensitive-value", children: [
+              " ",
+              value
+            ] })
+          ] }, `${finding.fieldId}-${finding.type}-${finding.start ?? index}`);
+        }) }),
+        /* @__PURE__ */ jsx3("button", { type: "button", "data-fe-confirm": "true", onClick: confirmSubmission, children: resolveMessage("confirmButton", form.translate("form.confirmSubmission")) }),
+        /* @__PURE__ */ jsx3("button", { type: "button", onClick: cancelSubmission, children: resolveMessage("cancelButton", 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?.({
       receipt,
       ...receiptStore === void 0 ? {} : { onReset: () => void resetReceipt() }
     }) ?? /* @__PURE__ */ jsxs2("div", { role: "status", children: [
-      form.translate("form.alreadySubmitted"),
-      receiptStore === void 0 ? null : /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => void resetReceipt(), children: form.translate("form.submitAnother") })
+      /* @__PURE__ */ jsx3("h2", { children: resolveMessage("alreadySubmittedTitle") }),
+      /* @__PURE__ */ jsx3("p", { children: resolveMessage("alreadySubmittedMessage", form.translate("form.alreadySubmitted")) }),
+      receiptStore === void 0 ? null : /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => void resetReceipt(), children: resolveMessage("submitButton", form.translate("form.submitAnother")) })
     ] }) });
   }
   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: fieldTranslate,
+                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__ */ jsxs2("div", { role: "alert", children: [
+              form.submitError.payload.formError,
+              /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => void submitValues(), children: resolveMessage("retryButton") })
+            ] }) : /* @__PURE__ */ jsxs2("div", { role: "alert", children: [
+              errorMessageKey === void 0 ? resolveMessage("serverErrorSummary") : form.translate(errorMessageKey),
+              /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => void submitValues(), children: resolveMessage("retryButton") })
+            ] })) : 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 = {
@@ -3514,15 +3807,34 @@ var RENDERER_MESSAGES = {
   "form.draftRestored": "Draft restored",
   "form.submissionBlocked": "Submission blocked because sensitive data was detected.",
   "form.confirmSensitiveData": "Sensitive data may be included. Confirm before submitting.",
-  "form.confirmSubmission": "Confirm submission",
+  "form.confirmSubmission": "Proceed",
   "form.cancelSubmission": "Cancel",
+  "form.yes": "Yes",
+  "form.no": "No",
   "form.alreadySubmitted": "Already submitted.",
   "form.submitAnother": "Submit another response",
   "validation.required": "This field is required."
 };
+var RENDERER_MESSAGES_JA = {
+  "form.submit": "\u9001\u4FE1\u3059\u308B",
+  "form.back": "\u623B\u308B",
+  "form.next": "\u6B21\u3078",
+  "form.step": "{{current}} / {{total}}",
+  "form.draftRestored": "\u4E0B\u66F8\u304D\u3092\u5FA9\u5143\u3057\u307E\u3057\u305F",
+  "form.submissionBlocked": "\u500B\u4EBA\u60C5\u5831\u304C\u691C\u51FA\u3055\u308C\u305F\u305F\u3081\u9001\u4FE1\u3067\u304D\u307E\u305B\u3093\u3002",
+  "form.confirmSensitiveData": "\u500B\u4EBA\u60C5\u5831\u304C\u542B\u307E\u308C\u3066\u3044\u308B\u53EF\u80FD\u6027\u304C\u3042\u308A\u307E\u3059\u3002\u9001\u4FE1\u524D\u306B\u78BA\u8A8D\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+  "form.confirmSubmission": "\u3053\u306E\u307E\u307E\u9001\u4FE1",
+  "form.cancelSubmission": "\u4FEE\u6B63\u3059\u308B",
+  "form.yes": "\u306F\u3044",
+  "form.no": "\u3044\u3044\u3048",
+  "form.alreadySubmitted": "\u56DE\u7B54\u6E08\u307F\u3067\u3059",
+  "form.submitAnother": "\u5225\u306E\u56DE\u7B54\u3092\u9001\u4FE1",
+  "validation.required": "\u3053\u306E\u9805\u76EE\u306F\u5FC5\u9808\u3067\u3059"
+};
 var defaultRendererTranslator = {
-  translate(key, _locale, params = {}) {
-    return (RENDERER_MESSAGES[key] ?? key).replace(
+  translate(key, locale, params = {}) {
+    const localizedMessages = locale.toLowerCase().startsWith("ja") ? RENDERER_MESSAGES_JA : RENDERER_MESSAGES;
+    return (localizedMessages[key] ?? key).replace(
       /\{\{(\w+)\}\}/g,
       (token, name) => Object.hasOwn(params, name) ? String(params[name]) : token
     );
@@ -3556,6 +3868,7 @@ export {
   FormBuilder,
   FormProvider,
   FormRenderer,
+  FormSubmissionError,
   createLocalStorageSubmissionAttemptStore,
   createLocalStorageSubmissionReceiptStore,
   resolveInitialFieldType,