@form-engine-ts/react 2.9.6 → 3.0.0

package/README.md

@@ -29,7 +29,7 @@ export function ContactForm() {
       schema={schema}
       locale="en"
       translator={mockTranslator}
-      onSubmit={async (values) => console.log(values)}
+      onSubmit={async (values, context) => console.log(values, context.attemptId)}
     >
       <FormRenderer />
     </FormProvider>
@@ -149,14 +149,15 @@ and `useSubmissionReceipts` loads multiple form/version receipts for list and da
 
 Receipt persistence is best-effort: `onReceiptError` observes storage failures while the successful completion screen is
 preserved. Pass an SSR-safe `createLocalStorageSubmissionAttemptStore()` as `attemptStore` to reserve an ID immediately
-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.
+before submission. `onSubmit(answers, context)` keeps `attemptId`, `formId`, `formVersion`, `locale`, and `submittedAt`
+outside the answers object, retains the same attempt 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 typed `FormCompletionSlotProps` 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`. Supply `messages` or `messageResolver` to localize standard buttons,
+validation, retry, already-submitted, server-error, and sensitive-data confirmation UI. Server validation can be returned
+by throwing `FormSubmissionError` or a payload with `fieldErrors` and `formError`; field messages are mapped back to the
+form, scrolled into view, and focused. Use `submissionConfirmationRenderMode="replace"` or `"dialog"` for alternate
+confirmation presentations, and `fieldsClassName` or `renderFields` to control the fields wrapper.

package/dist/index.cjs

@@ -1245,6 +1245,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",
@@ -2608,6 +2613,18 @@ function FormBuilder({
 // src/context.tsx
 var import_core3 = require("@form-engine-ts/core");
 var import_react3 = 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/context.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var FormContext = (0, import_react3.createContext)(null);
 function issuesByField(issues) {
@@ -2615,6 +2632,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,
@@ -2699,7 +2728,7 @@ function FormProvider({
     setSubmitError(null);
   }, [initialValues]);
   const submit = (0, import_react3.useCallback)(
-    async (beforeSubmit, prepareSubmission) => {
+    async (beforeSubmit, submitContext) => {
       if (submissionInFlight.current) return { status: "cancelled" };
       const validation = (0, import_core3.validateAnswers)(validSchema, values);
       if (!validation.valid) {
@@ -2720,13 +2749,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 };
@@ -2734,7 +2772,7 @@ function FormProvider({
         submissionInFlight.current = false;
       }
     },
-    [initialValues, onSubmit, resetOnSuccess, validSchema, values]
+    [initialValues, locale, onSubmit, resetOnSuccess, validSchema, values]
   );
   const translate = (0, import_react3.useCallback)(
     (key, params) => translator.translate(key, locale, params),
@@ -2914,18 +2952,6 @@ 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(
@@ -3112,7 +3138,11 @@ function DefaultField(props) {
       fieldId: field.id,
       current: typeof value === "string" ? value.length : 0,
       max: field.maxLength
-    }) : null,
+    }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-character-count", "aria-live": "polite", children: [
+      typeof value === "string" ? value.length : 0,
+      " / ",
+      field.maxLength
+    ] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldMessage, { props })
   ] });
 }
@@ -3164,11 +3194,58 @@ 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,
@@ -3197,6 +3274,7 @@ function ContextFormRenderer({
   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 fallbackAttemptId = (0, import_react5.useRef)(null);
   const completionRef = (0, import_react5.useRef)(null);
   const confirmationRef = (0, import_react5.useRef)(null);
   const pages = form.schema.pages;
@@ -3211,6 +3289,18 @@ function ContextFormRenderer({
   const submitState = confirmation === null && !guardsPending ? form.submitStatus : "confirming";
   const interactionLocked = submitState === "confirming" || submitState === "submitting";
   const isReplaceMode = successRenderMode === "replace" || hideFormOnSuccess;
+  const resolveMessage = (0, import_react5.useCallback)(
+    (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 = (0, import_react5.useCallback)(
+    (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 = (0, import_react5.useCallback)(() => {
     const button = formRef.current?.querySelector(".fe-submit, button[type='submit'], button");
     button?.focus();
@@ -3250,6 +3340,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);
     }
@@ -3268,6 +3359,23 @@ function ContextFormRenderer({
         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);
@@ -3369,17 +3477,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)
@@ -3392,7 +3507,7 @@ function ContextFormRenderer({
         if (result.error instanceof FormSubmissionError) {
           const fieldErrors = result.error.payload.fieldErrors ?? {};
           form.setServerErrors?.(fieldErrors);
-          const firstServerFieldId = Object.keys(fieldErrors)[0];
+          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);
@@ -3417,11 +3532,11 @@ function ContextFormRenderer({
       });
       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 {
@@ -3440,6 +3555,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);
@@ -3479,7 +3595,10 @@ function ContextFormRenderer({
       disabled: interactionLocked || submitState === "success",
       onSubmit: () => void submitValues()
     };
-    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") });
+    return slots.renderSubmitButton?.(submitButtonProps) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { className: "fe-submit", type: "submit", disabled: submitButtonProps.disabled, children: [
+      submitState === "submitting" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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 activeCompletionData = completionData ?? {
@@ -3512,15 +3631,31 @@ function ContextFormRenderer({
       role: submissionConfirmationRenderMode === "dialog" ? void 0 : "dialog",
       children: slots.renderSubmissionConfirmation?.({
         findings: confirmation?.findings ?? [],
-        message: confirmation?.message ?? form.translate("form.confirmSensitiveData"),
+        message: confirmation?.message ?? resolveMessage("confirmSensitiveDataMessage", 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") })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { children: resolveMessage("confirmSensitiveDataTitle") }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: confirmation?.message ?? resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData")) }),
+        (confirmation?.findings ?? []).length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsxs)("li", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: finding.fieldTitle ?? field?.title ?? finding.fieldId }),
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fe-sensitive-type", children: typeLabel }),
+            value === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fe-sensitive-value", children: [
+              " ",
+              value
+            ] })
+          ] }, `${finding.fieldId}-${finding.type}-${finding.start ?? index}`);
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", "data-fe-confirm": "true", onClick: confirmSubmission, children: resolveMessage("confirmButton", form.translate("form.confirmSubmission")) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: cancelSubmission, children: resolveMessage("cancelButton", form.translate("form.cancelSubmission")) })
       ] })
     }
   );
@@ -3530,8 +3665,9 @@ function ContextFormRenderer({
       receipt,
       ...receiptStore === void 0 ? {} : { onReset: () => void resetReceipt() }
     }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "status", children: [
-      form.translate("form.alreadySubmitted"),
-      receiptStore === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: () => void resetReceipt(), children: form.translate("form.submitAnother") })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { children: resolveMessage("alreadySubmittedTitle") }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: resolveMessage("alreadySubmittedMessage", form.translate("form.alreadySubmitted")) }),
+      receiptStore === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: () => void resetReceipt(), children: resolveMessage("submitButton", form.translate("form.submitAnother")) })
     ] }) });
   }
   if (form.submitStatus === "success" && isReplaceMode) {
@@ -3594,7 +3730,7 @@ function ContextFormRenderer({
                 value: form.values[field.id],
                 error,
                 setValue: (value) => form.setValue(field.id, value),
-                translate: form.translate,
+                translate: fieldTranslate,
                 inputId: `${prefix}-${field.id}`,
                 errorId: `${prefix}-${field.id}-error`,
                 helpId: `${prefix}-${field.id}-help`,
@@ -3661,7 +3797,13 @@ function ContextFormRenderer({
           ] }),
           /* @__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
+            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.jsxs)("div", { role: "alert", children: [
+              form.submitError.payload.formError,
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: () => void submitValues(), children: resolveMessage("retryButton") })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "alert", children: [
+              errorMessageKey === void 0 ? resolveMessage("serverErrorSummary") : form.translate(errorMessageKey),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: () => void submitValues(), children: resolveMessage("retryButton") })
+            ] })) : null
           ] })
         ]
       }
@@ -3677,7 +3819,7 @@ 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",
@@ -3685,9 +3827,26 @@ var RENDERER_MESSAGES = {
   "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
     );

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ComponentType, MouseEvent } from 'react';
+import { ReactNode, ComponentType, KeyboardEvent, MouseEvent } from 'react';
 import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, FieldOption, TranslationReport, ValidationError, FormValues, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, FormValue, ValidationIssue, AnswerValidationResult, FieldType } from '@form-engine-ts/core';
 import { SensitiveDataFinding } from '@form-engine-ts/privacy';
 
@@ -139,6 +139,7 @@ interface ComponentBaseProps {
 type BuilderActionIconType = "moveUp" | "moveDown" | "delete" | "add" | "edit" | "settings" | "translate" | "close" | "dragHandle";
 interface BuilderButtonProps extends ComponentBaseProps {
     readonly onClick?: () => void;
+    readonly noWrap?: boolean;
     readonly variant?: "primary" | "secondary" | "danger";
     readonly children: ReactNode;
     readonly title?: string;
@@ -165,6 +166,7 @@ interface InputComponentProps extends ComponentBaseProps {
     readonly helperText?: string;
     readonly value: string;
     readonly onChange: (value: string) => void;
+    readonly onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
     readonly placeholder?: string;
     readonly maxLength?: number;
 }
@@ -289,6 +291,11 @@ interface BuilderLocalizationSlotProps extends BuilderSlotBaseProps {
     readonly policy?: FormPolicy;
     readonly translationAdapterAvailable?: boolean;
 }
+interface LocalizationSummaryContext {
+    readonly defaultLocale: string;
+    readonly supportedLocales: readonly string[];
+    readonly totalLocales: number;
+}
 interface BuilderTranslationActionsSlotProps extends BuilderSlotBaseProps {
     readonly currentLocale: string;
     readonly onAutoTranslate: () => void;
@@ -338,6 +345,26 @@ interface SubmitResponse {
     readonly submissionId?: string;
     readonly submittedAt?: string;
 }
+interface SubmitContext {
+    readonly attemptId: string;
+    readonly formId: string;
+    readonly formVersion: number;
+    readonly locale?: string;
+    readonly submittedAt: string;
+}
+interface FormRendererMessages {
+    readonly submitButton?: string;
+    readonly submittingButton?: string;
+    readonly retryButton?: string;
+    readonly requiredField?: string;
+    readonly alreadySubmittedTitle?: string;
+    readonly alreadySubmittedMessage?: string;
+    readonly serverErrorSummary?: string;
+    readonly confirmSensitiveDataTitle?: string;
+    readonly confirmSensitiveDataMessage?: string;
+    readonly confirmButton?: string;
+    readonly cancelButton?: string;
+}
 interface FormSubmittedAnswerItem {
     readonly fieldId: string;
     readonly title: string;
@@ -350,7 +377,7 @@ interface FormSubmittedAnswerItem {
 interface FormCompletionSlotProps {
     readonly message?: string;
     readonly schema: FormSchema;
-    readonly answers: Record<string, unknown>;
+    readonly answers: Readonly<Record<string, unknown>>;
     readonly submittedItems: readonly FormSubmittedAnswerItem[];
     readonly response?: SubmitResponse;
     readonly onReset?: () => void;
@@ -363,7 +390,7 @@ 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 FormSubmitHandler = (answers: FormValues, context: SubmitContext) => SubmitResponse | void | Promise<SubmitResponse | undefined> | Promise<void>;
 type SubmissionGuardResult = {
     readonly status: "allow";
 } | {
@@ -427,8 +454,7 @@ 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 renderCompletion?: (props: FormCompletionSlotProps & {
         readonly message: string;
     }) => ReactNode;
     readonly renderSubmittedValues?: (props: {
@@ -507,7 +533,7 @@ interface FormContextValue {
     readonly restoreValues: (values: FormValues) => void;
     readonly validatePage: (pageIndex: number) => AnswerValidationResult;
     readonly reset: () => void;
-    readonly submit: (beforeSubmit?: BeforeSubmit, prepareSubmission?: (values: FormValues) => FormValues | Promise<FormValues>) => Promise<SubmitResult>;
+    readonly submit: (beforeSubmit?: BeforeSubmit, submitContext?: SubmitContext) => Promise<SubmitResult>;
     readonly translate: (key: string, params?: Readonly<Record<string, string | number>>) => string;
 }
 interface FormProviderProps {
@@ -556,6 +582,9 @@ interface FormRendererPresentationProps extends SubmissionProtectionProps {
     readonly hideFormOnSuccess?: boolean;
     readonly successMessageKey?: string;
     readonly errorMessageKey?: string;
+    readonly attemptIdFactory?: () => string;
+    readonly messages?: Partial<FormRendererMessages>;
+    readonly messageResolver?: (key: keyof FormRendererMessages, defaultText: string) => string;
     readonly autoSaveKey?: string;
     readonly beforeSubmit?: BeforeSubmit;
     readonly onDraftSave?: (draft: FormValues) => void;
@@ -572,4 +601,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 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 };
+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 FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocalizationSummaryContext, 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 SubmitContext, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, resolveInitialFieldType, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ComponentType, MouseEvent } from 'react';
+import { ReactNode, ComponentType, KeyboardEvent, MouseEvent } from 'react';
 import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, FieldOption, TranslationReport, ValidationError, FormValues, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, FormValue, ValidationIssue, AnswerValidationResult, FieldType } from '@form-engine-ts/core';
 import { SensitiveDataFinding } from '@form-engine-ts/privacy';
 
@@ -139,6 +139,7 @@ interface ComponentBaseProps {
 type BuilderActionIconType = "moveUp" | "moveDown" | "delete" | "add" | "edit" | "settings" | "translate" | "close" | "dragHandle";
 interface BuilderButtonProps extends ComponentBaseProps {
     readonly onClick?: () => void;
+    readonly noWrap?: boolean;
     readonly variant?: "primary" | "secondary" | "danger";
     readonly children: ReactNode;
     readonly title?: string;
@@ -165,6 +166,7 @@ interface InputComponentProps extends ComponentBaseProps {
     readonly helperText?: string;
     readonly value: string;
     readonly onChange: (value: string) => void;
+    readonly onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
     readonly placeholder?: string;
     readonly maxLength?: number;
 }
@@ -289,6 +291,11 @@ interface BuilderLocalizationSlotProps extends BuilderSlotBaseProps {
     readonly policy?: FormPolicy;
     readonly translationAdapterAvailable?: boolean;
 }
+interface LocalizationSummaryContext {
+    readonly defaultLocale: string;
+    readonly supportedLocales: readonly string[];
+    readonly totalLocales: number;
+}
 interface BuilderTranslationActionsSlotProps extends BuilderSlotBaseProps {
     readonly currentLocale: string;
     readonly onAutoTranslate: () => void;
@@ -338,6 +345,26 @@ interface SubmitResponse {
     readonly submissionId?: string;
     readonly submittedAt?: string;
 }
+interface SubmitContext {
+    readonly attemptId: string;
+    readonly formId: string;
+    readonly formVersion: number;
+    readonly locale?: string;
+    readonly submittedAt: string;
+}
+interface FormRendererMessages {
+    readonly submitButton?: string;
+    readonly submittingButton?: string;
+    readonly retryButton?: string;
+    readonly requiredField?: string;
+    readonly alreadySubmittedTitle?: string;
+    readonly alreadySubmittedMessage?: string;
+    readonly serverErrorSummary?: string;
+    readonly confirmSensitiveDataTitle?: string;
+    readonly confirmSensitiveDataMessage?: string;
+    readonly confirmButton?: string;
+    readonly cancelButton?: string;
+}
 interface FormSubmittedAnswerItem {
     readonly fieldId: string;
     readonly title: string;
@@ -350,7 +377,7 @@ interface FormSubmittedAnswerItem {
 interface FormCompletionSlotProps {
     readonly message?: string;
     readonly schema: FormSchema;
-    readonly answers: Record<string, unknown>;
+    readonly answers: Readonly<Record<string, unknown>>;
     readonly submittedItems: readonly FormSubmittedAnswerItem[];
     readonly response?: SubmitResponse;
     readonly onReset?: () => void;
@@ -363,7 +390,7 @@ 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 FormSubmitHandler = (answers: FormValues, context: SubmitContext) => SubmitResponse | void | Promise<SubmitResponse | undefined> | Promise<void>;
 type SubmissionGuardResult = {
     readonly status: "allow";
 } | {
@@ -427,8 +454,7 @@ 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 renderCompletion?: (props: FormCompletionSlotProps & {
         readonly message: string;
     }) => ReactNode;
     readonly renderSubmittedValues?: (props: {
@@ -507,7 +533,7 @@ interface FormContextValue {
     readonly restoreValues: (values: FormValues) => void;
     readonly validatePage: (pageIndex: number) => AnswerValidationResult;
     readonly reset: () => void;
-    readonly submit: (beforeSubmit?: BeforeSubmit, prepareSubmission?: (values: FormValues) => FormValues | Promise<FormValues>) => Promise<SubmitResult>;
+    readonly submit: (beforeSubmit?: BeforeSubmit, submitContext?: SubmitContext) => Promise<SubmitResult>;
     readonly translate: (key: string, params?: Readonly<Record<string, string | number>>) => string;
 }
 interface FormProviderProps {
@@ -556,6 +582,9 @@ interface FormRendererPresentationProps extends SubmissionProtectionProps {
     readonly hideFormOnSuccess?: boolean;
     readonly successMessageKey?: string;
     readonly errorMessageKey?: string;
+    readonly attemptIdFactory?: () => string;
+    readonly messages?: Partial<FormRendererMessages>;
+    readonly messageResolver?: (key: keyof FormRendererMessages, defaultText: string) => string;
     readonly autoSaveKey?: string;
     readonly beforeSubmit?: BeforeSubmit;
     readonly onDraftSave?: (draft: FormValues) => void;
@@ -572,4 +601,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 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 };
+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 FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocalizationSummaryContext, 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 SubmitContext, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, resolveInitialFieldType, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };

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,
@@ -2676,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) {
@@ -2697,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 };
@@ -2711,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),
@@ -2902,18 +2940,6 @@ import {
   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(
@@ -3100,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 })
   ] });
 }
@@ -3152,11 +3182,58 @@ 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,
@@ -3185,6 +3262,7 @@ function ContextFormRenderer({
   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;
@@ -3199,6 +3277,18 @@ 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();
@@ -3238,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);
     }
@@ -3256,6 +3347,23 @@ function ContextFormRenderer({
         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);
@@ -3357,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)
@@ -3380,7 +3495,7 @@ function ContextFormRenderer({
         if (result.error instanceof FormSubmissionError) {
           const fieldErrors = result.error.payload.fieldErrors ?? {};
           form.setServerErrors?.(fieldErrors);
-          const firstServerFieldId = Object.keys(fieldErrors)[0];
+          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);
@@ -3405,11 +3520,11 @@ function ContextFormRenderer({
       });
       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 {
@@ -3428,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);
@@ -3467,7 +3583,10 @@ 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 activeCompletionData = completionData ?? {
@@ -3500,15 +3619,31 @@ function ContextFormRenderer({
       role: submissionConfirmationRenderMode === "dialog" ? void 0 : "dialog",
       children: slots.renderSubmissionConfirmation?.({
         findings: confirmation?.findings ?? [],
-        message: confirmation?.message ?? form.translate("form.confirmSensitiveData"),
+        message: confirmation?.message ?? resolveMessage("confirmSensitiveDataMessage", 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") })
+        /* @__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")) })
       ] })
     }
   );
@@ -3518,8 +3653,9 @@ function ContextFormRenderer({
       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) {
@@ -3582,7 +3718,7 @@ function ContextFormRenderer({
                 value: form.values[field.id],
                 error,
                 setValue: (value) => form.setValue(field.id, value),
-                translate: form.translate,
+                translate: fieldTranslate,
                 inputId: `${prefix}-${field.id}`,
                 errorId: `${prefix}-${field.id}-error`,
                 helpId: `${prefix}-${field.id}-help`,
@@ -3649,7 +3785,13 @@ function ContextFormRenderer({
           ] }),
           /* @__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
+            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
           ] })
         ]
       }
@@ -3665,7 +3807,7 @@ 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",
@@ -3673,9 +3815,26 @@ var RENDERER_MESSAGES = {
   "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
     );

package/dist/styles.css

@@ -93,6 +93,27 @@
   font-size: 0.875rem;
   font-weight: 600;
 }
+.fe-character-count {
+  color: #667085;
+  font-size: 0.8rem;
+  text-align: right;
+}
+.fe-spinner {
+  display: inline-block;
+  width: 0.85em;
+  height: 0.85em;
+  margin-right: 0.4em;
+  border: 0.12em solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: fe-spin 0.8s linear infinite;
+  vertical-align: -0.1em;
+}
+@keyframes fe-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 .fe-check-label {
   align-items: flex-start;
   display: flex;
@@ -298,3 +319,16 @@
   border-radius: 0.5rem;
   box-shadow: 0 1rem 3rem rgb(0 0 0 / 25%);
 }
+.fe-sensitive-type {
+  border-radius: 999px;
+  background: #f2f4f7;
+  padding: 0.15rem 0.45rem;
+  font-size: 0.8rem;
+}
+.fe-sensitive-value {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}

package/package.json

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