@form-engine-ts/react 2.9.6 → 3.1.0

package/dist/index.cjs

@@ -20,6 +20,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  BUILDER_TRANSLATION_ALIASES: () => BUILDER_TRANSLATION_ALIASES,
+  BUILDER_TRANSLATION_KEYS: () => BUILDER_TRANSLATION_KEYS,
   FormBuilder: () => FormBuilder,
   FormProvider: () => FormProvider,
   FormRenderer: () => FormRenderer,
@@ -774,6 +776,33 @@ function useFormBuilder({
   };
 }
 
+// src/i18n.ts
+var BUILDER_TRANSLATION_KEYS = {
+  ADD_FIELD: "builder.actions.addField",
+  SELECT_FIELD_TYPE: "builder.fields.selectType",
+  SELECT_LOCALE_TO_ADD: "builder.localization.selectLocaleToAdd",
+  FIELD_TYPE_TEXT: "builder.fields.typeText",
+  FIELD_TYPE_TEXTAREA: "builder.fields.typeTextarea",
+  FIELD_TYPE_NUMBER: "builder.fields.typeNumber",
+  FIELD_TYPE_RATING: "builder.fields.typeRating",
+  FIELD_TYPE_RADIO: "builder.fields.typeRadio",
+  FIELD_TYPE_CHECKBOX: "builder.fields.typeCheckbox",
+  FIELD_TYPE_SELECT: "builder.fields.typeSelect",
+  FIELD_TYPE_MULTI_SELECT: "builder.fields.typeMultiSelect"
+};
+var BUILDER_TRANSLATION_ALIASES = {
+  "builder.actions.addField": "builder.addQuestion",
+  "builder.localization.selectLocaleToAdd": "builder.selectLocaleToAdd",
+  "builder.fields.typeText": "builder.fieldType.text",
+  "builder.fields.typeTextarea": "builder.fieldType.textarea",
+  "builder.fields.typeNumber": "builder.fieldType.number",
+  "builder.fields.typeRating": "builder.fieldType.rating",
+  "builder.fields.typeRadio": "builder.fieldType.radio",
+  "builder.fields.typeCheckbox": "builder.fieldType.checkbox",
+  "builder.fields.typeSelect": "builder.fieldType.select",
+  "builder.fields.typeMultiSelect": "builder.fieldType.multi-select"
+};
+
 // src/builder.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function DefaultButton({
@@ -844,6 +873,26 @@ function defaultIconFor(actionType) {
       return "\u6587";
   }
 }
+function defaultFieldTypeIcon(type) {
+  switch (type) {
+    case "text":
+      return "T";
+    case "textarea":
+      return "\u2261";
+    case "number":
+      return "#";
+    case "rating":
+      return "\u2605";
+    case "select":
+      return "\u25BE";
+    case "multi-select":
+      return "\u2611";
+    case "checkbox":
+      return "\u25A1";
+    case "radio":
+      return "\u25C9";
+  }
+}
 function DefaultTextInput({
   id,
   className,
@@ -956,8 +1005,15 @@ function DefaultSelect({
   helperText,
   value,
   onChange,
-  options
+  onKeyDown,
+  options,
+  renderOption,
+  renderValue
 }) {
+  const normalizedOptions = options.map(
+    (option) => typeof option === "string" ? { value: option, label: option } : option
+  );
+  const selectedOption = normalizedOptions.find((option) => option.value === value);
   const labelElement = label === void 0 ? null : id === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, children: label });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     labelElement,
@@ -975,9 +1031,11 @@ function DefaultSelect({
         "aria-invalid": error === true ? true : void 0,
         value,
         onChange: (event) => onChange(event.currentTarget.value),
-        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+        onKeyDown,
+        children: normalizedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, disabled: option.disabled, children: renderOption === void 0 ? option.label : renderOption(option) }, option.value))
       }
     ),
+    renderValue === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("output", { children: renderValue(selectedOption) }),
     helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { id: ariaDescribedBy, children: helperText })
   ] });
 }
@@ -1065,7 +1123,8 @@ var DEFAULT_COMPONENTS = {
   Section: DefaultSection,
   Fieldset: DefaultFieldset,
   ErrorMessage: DefaultErrorMessage,
-  renderIcon: defaultIconFor
+  renderIcon: defaultIconFor,
+  renderFieldTypeIcon: defaultFieldTypeIcon
 };
 var BuilderPrimitiveContext = (0, import_react2.createContext)({
   components: DEFAULT_COMPONENTS,
@@ -1245,6 +1304,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",
@@ -1261,6 +1325,16 @@ var BUILDER_DEFAULTS = {
   "builder.actions.close": "Close",
   "builder.actions.dragHandle": "Reorder",
   "builder.translationUnavailable": "Provide an async translation adapter to enable automatic translation.",
+  "builder.fields.selectType": "Select field type",
+  "builder.fields.typeText": "Text",
+  "builder.fields.typeTextarea": "Textarea",
+  "builder.fields.typeNumber": "Number",
+  "builder.fields.typeRating": "Rating",
+  "builder.fields.typeSelect": "Select",
+  "builder.fields.typeMultiSelect": "Multi-select",
+  "builder.fields.typeCheckbox": "Checkbox",
+  "builder.fields.typeRadio": "Radio",
+  "builder.actions.addField": "Add question",
   "builder.fieldType.text": "Text",
   "builder.fieldType.textarea": "Textarea",
   "builder.fieldType.number": "Number",
@@ -1297,7 +1371,7 @@ function OrderedBuilderSections({
   return groups.map((group, index) => ({ group, index, rank: ranks.get(sectionGroupName(group) ?? "questions") ?? order.length })).sort((left, right) => left.rank - right.rank || left.index - right.index).map(({ group }) => group);
 }
 function fieldTypeKey(type) {
-  return `builder.fieldType.${type}`;
+  return import_core2.DEFAULT_FIELD_TYPE_DEFINITIONS.find((definition) => definition.type === type)?.labelKey ?? `builder.fieldType.${type}`;
 }
 function operatorKey(operator) {
   return `builder.operator.${operator}`;
@@ -1458,7 +1532,8 @@ function FormBuilder({
   const resolvedComponents = { ...DEFAULT_COMPONENTS, ...componentOverrides };
   const components = {
     ...GUARDED_COMPONENTS,
-    renderIcon: resolvedComponents.renderIcon
+    renderIcon: resolvedComponents.renderIcon,
+    renderFieldTypeIcon: resolvedComponents.renderFieldTypeIcon
   };
   const defaultStylesDisabled = disableDefaultStyles || unstyled;
   const builderClass = (value) => defaultStylesDisabled ? void 0 : value;
@@ -1489,6 +1564,12 @@ function FormBuilder({
       if (typeof value === "string" || typeof value === "number") translatorParams[name] = value;
     }
     const translated = translator?.translate(key, locale, translatorParams);
+    if (translated !== void 0 && translated !== key) return translated;
+    const alias = BUILDER_TRANSLATION_ALIASES[key];
+    if (alias !== void 0) {
+      const aliased = translator?.translate(alias, locale, translatorParams);
+      if (aliased !== void 0 && aliased !== alias) return aliased;
+    }
     return translated === void 0 ? interpolate(BUILDER_DEFAULTS[key] ?? key, params) : translated;
   };
   const pagesEnabled = features?.pages ?? true;
@@ -2224,6 +2305,7 @@ function FormBuilder({
                     index,
                     currentLocale: editingLocale,
                     translate,
+                    ...slots === void 0 ? {} : { slots },
                     ...policy === void 0 ? {} : { policy },
                     ...features === void 0 ? {} : { features },
                     readOnly,
@@ -2595,7 +2677,7 @@ function FormBuilder({
                 action: "addField",
                 disabled: initialFieldType === null || maxFieldsReached,
                 onClick: addField,
-                children: translate("builder.addQuestion")
+                children: translate(BUILDER_TRANSLATION_KEYS.ADD_FIELD)
               }
             ) })
           ] }) })
@@ -2608,6 +2690,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 +2709,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 +2805,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 +2826,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 +2849,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 +3029,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 +3215,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 +3271,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 +3351,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 +3366,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 +3417,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 +3436,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 +3554,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 +3584,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 +3609,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 +3632,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 +3672,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 +3708,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 +3742,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 +3807,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 +3874,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 +3896,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 +3904,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
     );
@@ -3719,6 +3955,8 @@ function FormRenderer(props) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BUILDER_TRANSLATION_ALIASES,
+  BUILDER_TRANSLATION_KEYS,
   FormBuilder,
   FormProvider,
   FormRenderer,