@form-engine-ts/react 2.9.6 → 3.1.0

package/dist/index.js

@@ -99,6 +99,7 @@ function createLocalStorageSubmissionAttemptStore(options = {}) {
 
 // src/builder.tsx
 import {
+  DEFAULT_FIELD_TYPE_DEFINITIONS,
   populateSchemaTranslations
 } from "@form-engine-ts/core";
 import { Children, createContext, isValidElement, useContext, useState } from "react";
@@ -743,6 +744,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
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function DefaultButton({
@@ -813,6 +841,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,
@@ -925,8 +973,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__ */ jsx("span", { children: label }) : /* @__PURE__ */ jsx("label", { htmlFor: id, children: label });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     labelElement,
@@ -944,9 +999,11 @@ function DefaultSelect({
         "aria-invalid": error === true ? true : void 0,
         value,
         onChange: (event) => onChange(event.currentTarget.value),
-        children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+        onKeyDown,
+        children: normalizedOptions.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: renderOption === void 0 ? option.label : renderOption(option) }, option.value))
       }
     ),
+    renderValue === void 0 ? null : /* @__PURE__ */ jsx("output", { children: renderValue(selectedOption) }),
     helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx("small", { id: ariaDescribedBy, children: helperText })
   ] });
 }
@@ -1034,7 +1091,8 @@ var DEFAULT_COMPONENTS = {
   Section: DefaultSection,
   Fieldset: DefaultFieldset,
   ErrorMessage: DefaultErrorMessage,
-  renderIcon: defaultIconFor
+  renderIcon: defaultIconFor,
+  renderFieldTypeIcon: defaultFieldTypeIcon
 };
 var BuilderPrimitiveContext = createContext({
   components: DEFAULT_COMPONENTS,
@@ -1214,6 +1272,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",
@@ -1230,6 +1293,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",
@@ -1266,7 +1339,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 DEFAULT_FIELD_TYPE_DEFINITIONS.find((definition) => definition.type === type)?.labelKey ?? `builder.fieldType.${type}`;
 }
 function operatorKey(operator) {
   return `builder.operator.${operator}`;
@@ -1427,7 +1500,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;
@@ -1458,6 +1532,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;
@@ -2193,6 +2273,7 @@ function FormBuilder({
                     index,
                     currentLocale: editingLocale,
                     translate,
+                    ...slots === void 0 ? {} : { slots },
                     ...policy === void 0 ? {} : { policy },
                     ...features === void 0 ? {} : { features },
                     readOnly,
@@ -2564,7 +2645,7 @@ function FormBuilder({
                 action: "addField",
                 disabled: initialFieldType === null || maxFieldsReached,
                 onClick: addField,
-                children: translate("builder.addQuestion")
+                children: translate(BUILDER_TRANSLATION_KEYS.ADD_FIELD)
               }
             ) })
           ] }) })
@@ -2585,6 +2666,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 +2685,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 +2781,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 +2802,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 +2825,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 +3016,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 +3202,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 +3258,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 +3338,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 +3353,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 +3404,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 +3423,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 +3541,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 +3571,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 +3596,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 +3619,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 +3659,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 +3695,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 +3729,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 +3794,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 +3861,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 +3883,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 +3891,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
     );
@@ -3706,6 +3941,8 @@ function FormRenderer(props) {
   );
 }
 export {
+  BUILDER_TRANSLATION_ALIASES,
+  BUILDER_TRANSLATION_KEYS,
   FormBuilder,
   FormProvider,
   FormRenderer,

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;
+}