@form-engine-ts/react 6.0.0 → 6.1.0

package/README.md

@@ -93,6 +93,10 @@ localized values and metadata; the default locale remains protected.
 `onTranslationChange` with typed lifecycle payloads. The MUI workspace accepts a `confirmRemoveLocale` slot for an
 async confirmation UI; its `onConfirm` callback completes the locale removal.
 
+`useTranslationComparison` provides a focused, controlled comparison model for form, page, field, and option text.
+Its items expose source text, target text, status, canonical metadata, and path-based `updateTranslation`,
+`translateSingle`, and `translateAll` actions.
+
 Wrap a builder or renderer in `FormEngineI18nProvider` to supply a UI locale and typed Core translator independently
 from the schema's `defaultLocale` and `supportedLocales`:
 

package/dist/index.cjs

@@ -27,7 +27,7 @@ __export(index_exports, {
   FormEngineI18nProvider: () => FormEngineI18nProvider,
   FormProvider: () => FormProvider,
   FormRenderer: () => FormRenderer,
-  FormSubmissionError: () => FormSubmissionError,
+  FormSubmissionError: () => import_core8.FormSubmissionError,
   createLocalStorageSubmissionAttemptStore: () => createLocalStorageSubmissionAttemptStore,
   createLocalStorageSubmissionReceiptStore: () => createLocalStorageSubmissionReceiptStore,
   isTranslationUnresolved: () => isTranslationUnresolved,
@@ -42,6 +42,7 @@ __export(index_exports, {
   useFormBuilder: () => useFormBuilder,
   useFormEngineI18n: () => useFormEngineI18n,
   useSubmissionReceipts: () => useSubmissionReceipts,
+  useTranslationComparison: () => useTranslationComparison,
   useTranslationWorkspace: () => useTranslationWorkspace,
   validateLocalePipeline: () => validateLocalePipeline
 });
@@ -978,6 +979,8 @@ function FormEngineI18nProvider({
   fallbackLocale = "en",
   messages,
   customCatalogs,
+  onMissingKey,
+  strict,
   translator: customTranslator,
   children
 }) {
@@ -987,9 +990,11 @@ function FormEngineI18nProvider({
       locale,
       fallbackLocale,
       ...messages === void 0 ? {} : { messages },
-      ...customCatalogs === void 0 ? {} : { customCatalogs }
+      ...customCatalogs === void 0 ? {} : { customCatalogs },
+      ...onMissingKey === void 0 ? {} : { onMissingKey },
+      ...strict === void 0 ? {} : { strict }
     });
-  }, [customCatalogs, customTranslator, fallbackLocale, locale, messages]);
+  }, [customCatalogs, customTranslator, fallbackLocale, locale, messages, onMissingKey, strict]);
   const value = (0, import_react2.useMemo)(() => ({ uiLocale: locale, translator }), [locale, translator]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormEngineI18nProviderScopeContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormEngineI18nContext.Provider, { value, children }) });
 }
@@ -2566,6 +2571,7 @@ function FormBuilder({
               LocalizationSlot,
               {
                 schema,
+                onChange,
                 translate,
                 currentLocale: editingLocale,
                 onCurrentLocaleChange: setEditingLocale,
@@ -3088,18 +3094,6 @@ function FormBuilder({
 // src/context.tsx
 var import_core4 = require("@form-engine-ts/core");
 var import_react4 = 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_runtime3 = require("react/jsx-runtime");
 var FormContext = (0, import_react4.createContext)(null);
 function issuesByField(issues) {
@@ -3236,10 +3230,12 @@ function FormProvider({
         setSubmitStatus("success");
         return response === void 0 ? { status: "success" } : { status: "success", response };
       } catch (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));
+        const error = (0, import_core4.isFormSubmissionSerializedError)(cause) ? new import_core4.FormSubmissionError(cause) : isServerErrorPayload(cause) ? new import_core4.FormSubmissionError({
+          code: "VALIDATION_FAILED",
+          messageKey: cause.formError ?? "Submission failed",
+          fieldErrors: cause.fieldErrors ?? {},
+          formErrors: cause.formError === void 0 ? [] : [cause.formError]
+        }) : cause instanceof Error ? cause : new Error(String(cause));
         setSubmitError(error);
         setSubmitStatus("error");
         return { status: "error", error };
@@ -3307,6 +3303,10 @@ function useField(fieldId) {
   return { field, value: form.values[fieldId], error: form.errors[fieldId], setValue };
 }
 
+// src/hooks/useTranslationComparison.ts
+var import_core6 = require("@form-engine-ts/core");
+var import_react6 = require("react");
+
 // src/hooks/useTranslationWorkspace.ts
 var import_core5 = require("@form-engine-ts/core");
 var import_react5 = require("react");
@@ -3864,8 +3864,131 @@ function useTranslationWorkspace({
   };
 }
 
+// src/hooks/useTranslationComparison.ts
+function canonicalMetadata(metadata, sourceText, sourceLocale, translatedText) {
+  if (translatedText === void 0 || translatedText.trim().length === 0) return void 0;
+  if (metadata !== void 0 && typeof metadata.sourceLocale === "string" && typeof metadata.sourceTextHash === "string" && (metadata.translationSource === "automatic" || metadata.translationSource === "manual")) {
+    return {
+      sourceLocale: metadata.sourceLocale,
+      sourceTextHash: metadata.sourceTextHash,
+      translationSource: metadata.translationSource,
+      ...typeof metadata.translatedAt === "string" ? { translatedAt: metadata.translatedAt } : {},
+      ...typeof metadata.editedAt === "string" ? { editedAt: metadata.editedAt } : {}
+    };
+  }
+  return {
+    sourceLocale: typeof metadata?.sourceLocale === "string" ? metadata.sourceLocale : sourceLocale,
+    sourceTextHash: (0, import_core6.computeSourceTextHash)(sourceText),
+    translationSource: metadata?.isManual === true || metadata?.isManuallyEdited === true || metadata?.translationSource === "manual" ? "manual" : "automatic"
+  };
+}
+function optionParentId(slot) {
+  if (slot.kind !== "option" || slot.path === void 0) return void 0;
+  return /^fields\.([^.]+)\.options\./u.exec(slot.path)?.[1];
+}
+function getNodeTitle(schema, slot) {
+  if (slot.kind === "field") return schema.fields.find((field) => field.id === slot.nodeId)?.title;
+  if (slot.kind === "page") return schema.pages?.find((page) => page.id === slot.nodeId)?.title;
+  if (slot.kind === "option") return schema.fields.find((field) => field.id === optionParentId(slot))?.title;
+  return void 0;
+}
+function comparisonItem(schema, slot, sourceLocale, hasAdapter) {
+  const path = slot.path ?? `${slot.kind}.${slot.nodeId}.${slot.property}`;
+  const nodeTitle = getNodeTitle(schema, slot);
+  const metadata = canonicalMetadata(
+    slot.existingTranslationMetadata,
+    slot.sourceText,
+    sourceLocale,
+    slot.existingText
+  );
+  return {
+    id: path,
+    path,
+    targetKind: slot.kind,
+    targetProperty: slot.property,
+    ...nodeTitle === void 0 ? {} : { nodeTitle },
+    sourceText: slot.sourceText,
+    translatedText: slot.existingText ?? "",
+    status: slot.status ?? "missing",
+    ...metadata === void 0 ? {} : { metadata },
+    translatable: hasAdapter && slot.sourceText.trim().length > 0
+  };
+}
+function summaryFor(items) {
+  const counts = {
+    missing: 0,
+    translated: 0,
+    stale: 0,
+    manual: 0,
+    "manual-stale": 0
+  };
+  for (const item of items) counts[item.status] += 1;
+  return {
+    total: items.length,
+    translated: counts.translated + counts.manual,
+    missing: counts.missing,
+    stale: counts.stale + counts["manual-stale"],
+    manual: counts.manual + counts["manual-stale"]
+  };
+}
+function useTranslationComparison({
+  schema,
+  sourceLocale = schema.defaultLocale ?? "en",
+  targetLocale,
+  translationAdapter,
+  readOnly = false,
+  onChange,
+  onTranslationChange
+}) {
+  const workspace = useTranslationWorkspace({
+    schema,
+    sourceLocale,
+    targetLocale,
+    ...translationAdapter === void 0 ? {} : { translationAdapter },
+    readOnly,
+    ...onChange === void 0 ? {} : { onChange },
+    ...onTranslationChange === void 0 ? {} : { onTranslationChange }
+  });
+  const items = (0, import_react6.useMemo)(
+    () => workspace.slots.map((slot) => comparisonItem(schema, slot, sourceLocale, translationAdapter !== void 0)),
+    [schema, sourceLocale, translationAdapter, workspace.slots]
+  );
+  const itemByPath = (0, import_react6.useMemo)(() => new Map(workspace.slots.map((slot) => [slot.path, slot])), [workspace.slots]);
+  const updateTranslation = (0, import_react6.useCallback)(
+    (path, text) => {
+      const slot = itemByPath.get(path);
+      if (slot !== void 0) workspace.setTranslation(slot, text);
+    },
+    [itemByPath, workspace]
+  );
+  const translateSingle = (0, import_react6.useCallback)(
+    async (path) => {
+      const slot = itemByPath.get(path);
+      if (slot === void 0) return;
+      const result = await workspace.translateSlot(slot);
+      if (!result.success) throw new Error(result.error?.type ?? "Translation failed.");
+    },
+    [itemByPath, workspace]
+  );
+  const translateAll = (0, import_react6.useCallback)(async () => {
+    const result = await workspace.translateAll();
+    if (result.report !== void 0) return result.report;
+    throw new Error(result.error?.type ?? "Translation failed.");
+  }, [workspace]);
+  return {
+    sourceLocale: workspace.sourceLocale,
+    targetLocale: workspace.targetLocale,
+    items,
+    summary: summaryFor(items),
+    isTranslating: workspace.isTranslating,
+    updateTranslation,
+    translateSingle,
+    translateAll
+  };
+}
+
 // src/receipt.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 function submissionReceiptQueryKey(formId, formVersion) {
   return `${formId}:v${formVersion}`;
 }
@@ -3936,19 +4059,19 @@ function createLocalStorageSubmissionReceiptStore(options = {}) {
 }
 function useSubmissionReceipts(store, queries) {
   const querySignature = JSON.stringify(queries.map(({ formId, formVersion }) => [formId, formVersion]));
-  const stableQueries = (0, import_react6.useMemo)(() => {
+  const stableQueries = (0, import_react7.useMemo)(() => {
     const parsed = JSON.parse(querySignature);
     if (!Array.isArray(parsed)) return [];
     return parsed.flatMap(
       (entry) => Array.isArray(entry) && typeof entry[0] === "string" && typeof entry[1] === "number" && Number.isSafeInteger(entry[1]) ? [{ formId: entry[0], formVersion: entry[1] }] : []
     );
   }, [querySignature]);
-  const [state, setState] = (0, import_react6.useState)({
+  const [state, setState] = (0, import_react7.useState)({
     receipts: /* @__PURE__ */ new Map(),
     isLoading: stableQueries.length > 0,
     error: null
   });
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     let active = true;
     if (stableQueries.length === 0) {
       setState({ receipts: /* @__PURE__ */ new Map(), isLoading: false, error: null });
@@ -3982,8 +4105,8 @@ function useSubmissionReceipts(store, queries) {
 }
 
 // src/renderer.tsx
-var import_core6 = require("@form-engine-ts/core");
-var import_react7 = require("react");
+var import_core7 = require("@form-engine-ts/core");
+var import_react8 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var isChoiceFieldType = (type) => type === "radio" || type === "checkbox" || type === "multi-select" || type === "select";
 function resolveChoiceFieldLayout(type, appearance, groupedChoiceFieldsLegacy = false) {
@@ -4495,33 +4618,33 @@ function ContextFormRenderer({
 }) {
   const form = useForm();
   const i18n = useFormEngineI18n();
-  const isProviderValue = (0, import_react7.useContext)(FormEngineI18nProviderScopeContext);
-  const prefix = (0, import_react7.useId)().replace(/:/g, "");
-  const formRef = (0, import_react7.useRef)(null);
-  const loadedDraftKey = (0, import_react7.useRef)(null);
-  const [draftRestored, setDraftRestored] = (0, import_react7.useState)(false);
-  const [currentPageIndex, setCurrentPageIndex] = (0, import_react7.useState)(0);
-  const [focusFieldId, setFocusFieldId] = (0, import_react7.useState)(null);
-  const [confirmation, setConfirmation] = (0, import_react7.useState)(null);
-  const [guardMessage, setGuardMessage] = (0, import_react7.useState)(null);
-  const [guardsPending, setGuardsPending] = (0, import_react7.useState)(false);
-  const [receipt, setReceipt] = (0, import_react7.useState)(null);
-  const [completionData, setCompletionData] = (0, import_react7.useState)(null);
-  const [receiptLoaded, setReceiptLoaded] = (0, import_react7.useState)(receiptStore === void 0);
-  const rendererSubmissionInFlight = (0, import_react7.useRef)(false);
-  const fallbackAttemptId = (0, import_react7.useRef)(null);
-  const completionRef = (0, import_react7.useRef)(null);
-  const confirmationRef = (0, import_react7.useRef)(null);
+  const isProviderValue = (0, import_react8.useContext)(FormEngineI18nProviderScopeContext);
+  const prefix = (0, import_react8.useId)().replace(/:/g, "");
+  const formRef = (0, import_react8.useRef)(null);
+  const loadedDraftKey = (0, import_react8.useRef)(null);
+  const [draftRestored, setDraftRestored] = (0, import_react8.useState)(false);
+  const [currentPageIndex, setCurrentPageIndex] = (0, import_react8.useState)(0);
+  const [focusFieldId, setFocusFieldId] = (0, import_react8.useState)(null);
+  const [confirmation, setConfirmation] = (0, import_react8.useState)(null);
+  const [guardMessage, setGuardMessage] = (0, import_react8.useState)(null);
+  const [guardsPending, setGuardsPending] = (0, import_react8.useState)(false);
+  const [receipt, setReceipt] = (0, import_react8.useState)(null);
+  const [completionData, setCompletionData] = (0, import_react8.useState)(null);
+  const [receiptLoaded, setReceiptLoaded] = (0, import_react8.useState)(receiptStore === void 0);
+  const rendererSubmissionInFlight = (0, import_react8.useRef)(false);
+  const fallbackAttemptId = (0, import_react8.useRef)(null);
+  const completionRef = (0, import_react8.useRef)(null);
+  const confirmationRef = (0, import_react8.useRef)(null);
   const pages = form.schema.pages;
-  const visiblePageIndexes = (0, import_react7.useMemo)(
+  const visiblePageIndexes = (0, import_react8.useMemo)(
     () => pages === void 0 ? [] : pages.flatMap((page, index) => form.pageVisibility[page.id] === true ? [index] : []),
     [form.pageVisibility, pages]
   );
   const activePage = pages?.[currentPageIndex];
   const activeVisibleIndex = visiblePageIndexes.indexOf(currentPageIndex);
   const fieldIds = activePage === void 0 ? void 0 : new Set(activePage.questionIds);
-  const visibleValues = (0, import_react7.useMemo)(() => (0, import_core6.selectVisibleAnswers)(form.schema, form.values), [form.schema, form.values]);
-  const visibleItems = (0, import_react7.useMemo)(
+  const visibleValues = (0, import_react8.useMemo)(() => (0, import_core7.selectVisibleAnswers)(form.schema, form.values), [form.schema, form.values]);
+  const visibleItems = (0, import_react8.useMemo)(
     () => buildSubmittedItems(form.schema, form.values, form.visibility, (key) => form.translate(key), false),
     [form.schema, form.translate, form.values, form.visibility]
   );
@@ -4530,7 +4653,7 @@ 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_react7.useCallback)(
+  const resolveMessage = (0, import_react8.useCallback)(
     (key, fallback) => {
       const providerDefault = isProviderValue ? i18n.translator(`renderer.${key}`) : void 0;
       const defaultText = fallback ?? (providerDefault === "" ? void 0 : providerDefault) ?? DEFAULT_RENDERER_MESSAGES[form.locale.toLowerCase().startsWith("ja") ? "ja" : "en"][key] ?? key;
@@ -4539,15 +4662,15 @@ function ContextFormRenderer({
     },
     [form.locale, i18n, isProviderValue, messageResolver, messages]
   );
-  const fieldTranslate = (0, import_react7.useCallback)(
+  const fieldTranslate = (0, import_react8.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_react7.useCallback)(() => {
+  const focusSubmitButton = (0, import_react8.useCallback)(() => {
     const button = formRef.current?.querySelector(".fe-submit, button[type='submit'], button");
     button?.focus();
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     let active = true;
     if (receiptStore === void 0) {
       setReceipt(null);
@@ -4568,14 +4691,14 @@ function ContextFormRenderer({
       active = false;
     };
   }, [form.schema.id, form.schema.version, receiptStore]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (pages === void 0 || visiblePageIndexes.length === 0) {
       setCurrentPageIndex(0);
       return;
     }
     if (!visiblePageIndexes.includes(currentPageIndex)) setCurrentPageIndex(visiblePageIndexes[0] ?? 0);
   }, [currentPageIndex, pages, visiblePageIndexes]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (focusFieldId === null) return;
     const fieldContainer = [...formRef.current?.querySelectorAll("[data-field-id]") ?? []].find(
       (element) => element.dataset.fieldId === focusFieldId
@@ -4587,11 +4710,11 @@ function ContextFormRenderer({
       setFocusFieldId(null);
     }
   }, [focusFieldId]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!isReplaceMode || form.submitStatus !== "success") return;
     completionRef.current?.focus();
   }, [form.submitStatus, isReplaceMode]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (confirmation === null) return;
     const confirmButton = confirmationRef.current?.querySelector("[data-fe-confirm], button");
     confirmButton?.focus();
@@ -4623,7 +4746,7 @@ function ContextFormRenderer({
     globalThis.addEventListener("keydown", onKeyDown);
     return () => globalThis.removeEventListener("keydown", onKeyDown);
   }, [confirmation, confirmationRenderMode, focusSubmitButton]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (autoSaveKey === void 0 || typeof globalThis.localStorage === "undefined") return;
     const loadIdentity = `${autoSaveKey}:${form.schema.id}:${form.schema.version}`;
     if (loadedDraftKey.current === loadIdentity) return;
@@ -4635,7 +4758,7 @@ function ContextFormRenderer({
     form.restoreValues(draft.values);
     setDraftRestored(true);
   }, [autoSaveKey, form.restoreValues, form.schema.id, form.schema.version]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (form.submitStatus === "success") return;
     const timeout = globalThis.setTimeout(() => {
       onDraftSave?.(form.values);
@@ -4691,7 +4814,7 @@ function ContextFormRenderer({
     if (rendererSubmissionInFlight.current || submitState === "submitting" || submitState === "success" || confirmation !== null && !guardsConfirmed) {
       return { status: "cancelled" };
     }
-    const validation = (0, import_core6.validateAnswers)(form.schema, form.values);
+    const validation = (0, import_core7.validateAnswers)(form.schema, form.values);
     const firstInvalidFieldId = validation.issues[0]?.fieldId;
     if (validation.valid && !guardsConfirmed) {
       rendererSubmissionInFlight.current = true;
@@ -4754,8 +4877,9 @@ function ContextFormRenderer({
         return result;
       }
       if (result.status === "error") {
-        if (result.error instanceof FormSubmissionError) {
-          const fieldErrors = result.error.payload.fieldErrors ?? {};
+        const payload = result.error instanceof import_core7.FormSubmissionError ? result.error.payload : (0, import_core7.isFormSubmissionSerializedError)(result.error) ? result.error : void 0;
+        if (payload !== void 0) {
+          const fieldErrors = payload.fieldErrors ?? {};
           form.setServerErrors?.(fieldErrors);
           const firstServerFieldId = form.schema.fields.find((field) => Object.hasOwn(fieldErrors, field.id))?.id ?? Object.keys(fieldErrors)[0];
           if (firstServerFieldId !== void 0) {
@@ -4763,6 +4887,9 @@ function ContextFormRenderer({
             if (invalidPageIndex !== void 0 && invalidPageIndex >= 0) setCurrentPageIndex(invalidPageIndex);
             focusFirstIssue(firstServerFieldId);
           }
+          if (payload.piiFindings !== void 0 && payload.piiFindings.length > 0) {
+            setConfirmation({ findings: payload.piiFindings, generic: false });
+          }
         }
         return result;
       }
@@ -4993,7 +5120,7 @@ function ContextFormRenderer({
                 ...slots.renderCharacterCount === void 0 ? {} : { renderCharacterCount: slots.renderCharacterCount }
               };
               if (slots.renderField !== void 0) {
-                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.Fragment, { children: slots.renderField({
+                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react8.Fragment, { children: slots.renderField({
                   question: field,
                   value: form.values[field.id],
                   onChange: (value) => {
@@ -5064,8 +5191,8 @@ function ContextFormRenderer({
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsxs)("div", { role: "alert", children: [
-              form.submitError.payload.formError,
+            form.submitStatus === "error" && form.submitError !== null ? slots.renderSubmitError?.({ error: form.submitError, onRetry: () => void submitValues() }) ?? (form.submitError instanceof import_core7.FormSubmissionError && (form.submitError.payload.formErrors?.length ?? 0) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { role: "alert", children: [
+              form.submitError.payload.formErrors?.map((message) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: message }, message)),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", onClick: () => void submitValues(), children: resolveMessage("retryButton") })
             ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { role: "alert", children: [
               errorMessageKey === void 0 ? resolveMessage("serverErrorSummary") : form.translate(errorMessageKey),
@@ -5121,7 +5248,7 @@ var defaultRendererTranslator = {
 };
 function FormRenderer(props) {
   const i18n = useFormEngineI18n();
-  const isProviderValue = (0, import_react7.useContext)(FormEngineI18nProviderScopeContext);
+  const isProviderValue = (0, import_react8.useContext)(FormEngineI18nProviderScopeContext);
   if (!("schema" in props)) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ContextFormRenderer, { ...props });
   const {
     schema,
@@ -5148,6 +5275,9 @@ function FormRenderer(props) {
     }
   );
 }
+
+// src/types.ts
+var import_core8 = require("@form-engine-ts/core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BUILDER_TRANSLATION_ALIASES,
@@ -5172,6 +5302,7 @@ function FormRenderer(props) {
   useFormBuilder,
   useFormEngineI18n,
   useSubmissionReceipts,
+  useTranslationComparison,
   useTranslationWorkspace,
   validateLocalePipeline
 });

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as _form_engine_ts_core from '@form-engine-ts/core';
-import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, Question, FieldOption, TranslationReport, ValidationIssue, ValidationError, FormValues, LocaleOption, TranslationSlot, CanonicalTranslationMetadata, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, FormValue, AnswerValidationResult, FormEngineTranslator, FormEngineMessages, FieldType } from '@form-engine-ts/core';
-export { QuestionType } from '@form-engine-ts/core';
+import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, Question, FieldOption, TranslationReport, ValidationIssue, ValidationError, FormValues, LocaleOption, TranslationStatus, CanonicalTranslationMetadata, TranslationSlot, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, FormValue, AnswerValidationResult, FormEngineTranslator, FormEngineMessages, TranslationMissingKeyEvent, FieldType } from '@form-engine-ts/core';
+export { FormSubmissionError, FormSubmissionSerializedError, QuestionType } from '@form-engine-ts/core';
 import * as react from 'react';
 import { ReactNode, ComponentType, KeyboardEvent, MouseEvent, CSSProperties } from 'react';
 import { SensitiveDataFinding } from '@form-engine-ts/privacy';
@@ -307,6 +307,7 @@ interface BuilderSlotBaseProps {
     readonly actions: BuilderSlotActions;
     readonly components: Required<FormBuilderComponents>;
     readonly translate: (key: string, params?: Record<string, unknown>) => string;
+    readonly onChange?: (schema: FormSchema) => void;
 }
 interface BuilderToolbarSlotProps extends BuilderSlotBaseProps {
     readonly kind: "page" | "field" | "option";
@@ -402,6 +403,58 @@ interface TranslationSlotRowProps {
     readonly onChange: (text: string) => void;
     readonly onTranslate: () => void;
 }
+interface TranslationComparisonItem {
+    readonly id: string;
+    readonly path: string;
+    readonly targetKind: "form" | "page" | "field" | "option";
+    readonly targetProperty: "title" | "description" | "label" | "completionMessage";
+    readonly nodeTitle?: string;
+    readonly sourceText: string;
+    readonly translatedText: string;
+    readonly status: TranslationStatus;
+    readonly metadata?: CanonicalTranslationMetadata;
+    readonly translatable: boolean;
+}
+interface TranslationComparisonSummary {
+    readonly total: number;
+    readonly translated: number;
+    readonly missing: number;
+    readonly stale: number;
+    readonly manual: number;
+}
+interface TranslationComparisonHeaderProps {
+    readonly sourceLocale: string;
+    readonly targetLocale: string;
+    readonly summary: TranslationComparisonSummary;
+    readonly onTranslateAll: () => void;
+    readonly isTranslating: boolean;
+    readonly readOnly: boolean;
+}
+interface TranslationComparisonItemRowProps {
+    readonly item: TranslationComparisonItem;
+    readonly readOnly: boolean;
+    readonly onChange: (text: string) => void;
+    readonly onTranslate: () => void;
+}
+interface UseTranslationComparisonOptions {
+    readonly schema: FormSchema;
+    readonly sourceLocale?: string;
+    readonly targetLocale: string;
+    readonly translationAdapter?: TranslationAdapter;
+    readonly readOnly?: boolean;
+    readonly onChange?: (nextSchema: FormSchema) => void;
+    readonly onTranslationChange?: (event: TranslationSlotChangeEvent) => void;
+}
+interface UseTranslationComparisonResult {
+    readonly sourceLocale: string;
+    readonly targetLocale: string;
+    readonly items: readonly TranslationComparisonItem[];
+    readonly summary: TranslationComparisonSummary;
+    readonly isTranslating: boolean;
+    readonly updateTranslation: (path: string, text: string) => void;
+    readonly translateSingle: (path: string) => Promise<void>;
+    readonly translateAll: () => Promise<TranslationReport>;
+}
 interface LocaleSelectorProps {
     readonly targetLocale: string;
     readonly targetLocales: readonly string[];
@@ -551,10 +604,6 @@ interface FormServerErrorPayload {
     readonly fieldErrors?: Readonly<Record<string, string>>;
     readonly formError?: string;
 }
-declare class FormSubmissionError extends Error {
-    readonly payload: FormServerErrorPayload;
-    constructor(message: string, payload?: FormServerErrorPayload);
-}
 type FormSubmitHandler = (answers: FormValues, context: SubmitContext) => SubmitResponse | void | Promise<SubmitResponse | undefined> | Promise<void>;
 type SubmissionGuardResult = {
     readonly status: "allow";
@@ -771,6 +820,8 @@ interface FieldState {
 }
 declare function useField(fieldId: string): FieldState;
 
+declare function useTranslationComparison({ schema, sourceLocale, targetLocale, translationAdapter, readOnly, onChange, onTranslationChange }: UseTranslationComparisonOptions): UseTranslationComparisonResult;
+
 interface UseTranslationWorkspaceOptions {
     readonly schema: FormSchema;
     readonly onChange?: (schema: FormSchema) => void;
@@ -909,10 +960,12 @@ interface FormEngineI18nProviderProps {
     readonly fallbackLocale?: string;
     readonly messages?: FormEngineMessages;
     readonly customCatalogs?: Record<string, FormEngineMessages>;
+    readonly onMissingKey?: (event: TranslationMissingKeyEvent) => void;
+    readonly strict?: boolean;
     readonly translator?: FormEngineTranslator;
     readonly children: ReactNode;
 }
-declare function FormEngineI18nProvider({ locale, fallbackLocale, messages, customCatalogs, translator: customTranslator, children }: FormEngineI18nProviderProps): react.JSX.Element;
+declare function FormEngineI18nProvider({ locale, fallbackLocale, messages, customCatalogs, onMissingKey, strict, translator: customTranslator, children }: FormEngineI18nProviderProps): react.JSX.Element;
 declare function useFormEngineI18n(): FormEngineI18nContextValue;
 
 declare function resolveChoiceFieldLayout(type: FieldType, appearance?: FormRendererAppearance, groupedChoiceFieldsLegacy?: boolean): "default" | "grouped";
@@ -968,4 +1021,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
 type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
 declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
 
-export { BUILDER_TRANSLATION_ALIASES, BUILDER_TRANSLATION_KEYS, 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 BuilderTranslationKey, type ChoiceFieldLayoutMode, type ChoiceFieldTypeLayoutMap, type ChoiceGroupSlotProps, type ComponentBaseProps, type ConfirmRemoveLocaleSlotProps, type CustomLocaleValidator, type FieldComponentProps, type FieldComponents, type FieldEditorControlsConfig, type FieldEditorHeaderSlotProps, type FieldEditorMode, type FieldError, type FieldPropertyControlMode, type FieldState, type FieldTypeSelectOptionsConfig, type FieldTypeSelectOptionsContext, type FieldTypeSelectOptionsSorter, type FieldTypeSelectOptionsTransformer, type FieldTypeSelectSlotProps, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormBuilderSubmissionSettingsOptions, type FormCompletionSlotProps, type FormContextValue, FormEngineI18nContext, type FormEngineI18nContextValue, FormEngineI18nProvider, type FormEngineI18nProviderProps, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererAppearance, type FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlotProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocaleSelectorProps, type LocaleValidationContext, type LocaleValidationResult, type LocalizationSummaryContext, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type SelectComponentProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationOptions, 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 TranslationEventPayload, type TranslationSlotChangeEvent, type TranslationSlotRowProps, type TranslationSummary, type TranslationWorkspaceActionsProps, type TranslationWorkspaceError, type TranslationWorkspaceHeaderProps, type TranslationWorkspaceSlots, type UseFormBuilderOptions, type UseFormBuilderResult, type UseSubmissionReceiptsResult, type UseTranslationWorkspaceOptions, type UseTranslationWorkspaceResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, isTranslationUnresolved, resolveChoiceFieldLayout, resolveFieldEditorControls, resolveFieldTypeSelectOptions, resolveInitialFieldType, resolveTranslation, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useFormEngineI18n, useSubmissionReceipts, useTranslationWorkspace, validateLocalePipeline };
+export { BUILDER_TRANSLATION_ALIASES, BUILDER_TRANSLATION_KEYS, 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 BuilderTranslationKey, type ChoiceFieldLayoutMode, type ChoiceFieldTypeLayoutMap, type ChoiceGroupSlotProps, type ComponentBaseProps, type ConfirmRemoveLocaleSlotProps, type CustomLocaleValidator, type FieldComponentProps, type FieldComponents, type FieldEditorControlsConfig, type FieldEditorHeaderSlotProps, type FieldEditorMode, type FieldError, type FieldPropertyControlMode, type FieldState, type FieldTypeSelectOptionsConfig, type FieldTypeSelectOptionsContext, type FieldTypeSelectOptionsSorter, type FieldTypeSelectOptionsTransformer, type FieldTypeSelectSlotProps, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormBuilderSubmissionSettingsOptions, type FormCompletionSlotProps, type FormContextValue, FormEngineI18nContext, type FormEngineI18nContextValue, FormEngineI18nProvider, type FormEngineI18nProviderProps, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererAppearance, type FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlotProps, type FormRendererSlots, type FormServerErrorPayload, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocaleSelectorProps, type LocaleValidationContext, type LocaleValidationResult, type LocalizationSummaryContext, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type SelectComponentProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationOptions, 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 TranslationComparisonHeaderProps, type TranslationComparisonItem, type TranslationComparisonItemRowProps, type TranslationComparisonSummary, type TranslationEventPayload, type TranslationSlotChangeEvent, type TranslationSlotRowProps, type TranslationSummary, type TranslationWorkspaceActionsProps, type TranslationWorkspaceError, type TranslationWorkspaceHeaderProps, type TranslationWorkspaceSlots, type UseFormBuilderOptions, type UseFormBuilderResult, type UseSubmissionReceiptsResult, type UseTranslationComparisonOptions, type UseTranslationComparisonResult, type UseTranslationWorkspaceOptions, type UseTranslationWorkspaceResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, isTranslationUnresolved, resolveChoiceFieldLayout, resolveFieldEditorControls, resolveFieldTypeSelectOptions, resolveInitialFieldType, resolveTranslation, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useFormEngineI18n, useSubmissionReceipts, useTranslationComparison, useTranslationWorkspace, validateLocalePipeline };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _form_engine_ts_core from '@form-engine-ts/core';
-import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, Question, FieldOption, TranslationReport, ValidationIssue, ValidationError, FormValues, LocaleOption, TranslationSlot, CanonicalTranslationMetadata, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, FormValue, AnswerValidationResult, FormEngineTranslator, FormEngineMessages, FieldType } from '@form-engine-ts/core';
-export { QuestionType } from '@form-engine-ts/core';
+import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, Question, FieldOption, TranslationReport, ValidationIssue, ValidationError, FormValues, LocaleOption, TranslationStatus, CanonicalTranslationMetadata, TranslationSlot, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, FormValue, AnswerValidationResult, FormEngineTranslator, FormEngineMessages, TranslationMissingKeyEvent, FieldType } from '@form-engine-ts/core';
+export { FormSubmissionError, FormSubmissionSerializedError, QuestionType } from '@form-engine-ts/core';
 import * as react from 'react';
 import { ReactNode, ComponentType, KeyboardEvent, MouseEvent, CSSProperties } from 'react';
 import { SensitiveDataFinding } from '@form-engine-ts/privacy';
@@ -307,6 +307,7 @@ interface BuilderSlotBaseProps {
     readonly actions: BuilderSlotActions;
     readonly components: Required<FormBuilderComponents>;
     readonly translate: (key: string, params?: Record<string, unknown>) => string;
+    readonly onChange?: (schema: FormSchema) => void;
 }
 interface BuilderToolbarSlotProps extends BuilderSlotBaseProps {
     readonly kind: "page" | "field" | "option";
@@ -402,6 +403,58 @@ interface TranslationSlotRowProps {
     readonly onChange: (text: string) => void;
     readonly onTranslate: () => void;
 }
+interface TranslationComparisonItem {
+    readonly id: string;
+    readonly path: string;
+    readonly targetKind: "form" | "page" | "field" | "option";
+    readonly targetProperty: "title" | "description" | "label" | "completionMessage";
+    readonly nodeTitle?: string;
+    readonly sourceText: string;
+    readonly translatedText: string;
+    readonly status: TranslationStatus;
+    readonly metadata?: CanonicalTranslationMetadata;
+    readonly translatable: boolean;
+}
+interface TranslationComparisonSummary {
+    readonly total: number;
+    readonly translated: number;
+    readonly missing: number;
+    readonly stale: number;
+    readonly manual: number;
+}
+interface TranslationComparisonHeaderProps {
+    readonly sourceLocale: string;
+    readonly targetLocale: string;
+    readonly summary: TranslationComparisonSummary;
+    readonly onTranslateAll: () => void;
+    readonly isTranslating: boolean;
+    readonly readOnly: boolean;
+}
+interface TranslationComparisonItemRowProps {
+    readonly item: TranslationComparisonItem;
+    readonly readOnly: boolean;
+    readonly onChange: (text: string) => void;
+    readonly onTranslate: () => void;
+}
+interface UseTranslationComparisonOptions {
+    readonly schema: FormSchema;
+    readonly sourceLocale?: string;
+    readonly targetLocale: string;
+    readonly translationAdapter?: TranslationAdapter;
+    readonly readOnly?: boolean;
+    readonly onChange?: (nextSchema: FormSchema) => void;
+    readonly onTranslationChange?: (event: TranslationSlotChangeEvent) => void;
+}
+interface UseTranslationComparisonResult {
+    readonly sourceLocale: string;
+    readonly targetLocale: string;
+    readonly items: readonly TranslationComparisonItem[];
+    readonly summary: TranslationComparisonSummary;
+    readonly isTranslating: boolean;
+    readonly updateTranslation: (path: string, text: string) => void;
+    readonly translateSingle: (path: string) => Promise<void>;
+    readonly translateAll: () => Promise<TranslationReport>;
+}
 interface LocaleSelectorProps {
     readonly targetLocale: string;
     readonly targetLocales: readonly string[];
@@ -551,10 +604,6 @@ interface FormServerErrorPayload {
     readonly fieldErrors?: Readonly<Record<string, string>>;
     readonly formError?: string;
 }
-declare class FormSubmissionError extends Error {
-    readonly payload: FormServerErrorPayload;
-    constructor(message: string, payload?: FormServerErrorPayload);
-}
 type FormSubmitHandler = (answers: FormValues, context: SubmitContext) => SubmitResponse | void | Promise<SubmitResponse | undefined> | Promise<void>;
 type SubmissionGuardResult = {
     readonly status: "allow";
@@ -771,6 +820,8 @@ interface FieldState {
 }
 declare function useField(fieldId: string): FieldState;
 
+declare function useTranslationComparison({ schema, sourceLocale, targetLocale, translationAdapter, readOnly, onChange, onTranslationChange }: UseTranslationComparisonOptions): UseTranslationComparisonResult;
+
 interface UseTranslationWorkspaceOptions {
     readonly schema: FormSchema;
     readonly onChange?: (schema: FormSchema) => void;
@@ -909,10 +960,12 @@ interface FormEngineI18nProviderProps {
     readonly fallbackLocale?: string;
     readonly messages?: FormEngineMessages;
     readonly customCatalogs?: Record<string, FormEngineMessages>;
+    readonly onMissingKey?: (event: TranslationMissingKeyEvent) => void;
+    readonly strict?: boolean;
     readonly translator?: FormEngineTranslator;
     readonly children: ReactNode;
 }
-declare function FormEngineI18nProvider({ locale, fallbackLocale, messages, customCatalogs, translator: customTranslator, children }: FormEngineI18nProviderProps): react.JSX.Element;
+declare function FormEngineI18nProvider({ locale, fallbackLocale, messages, customCatalogs, onMissingKey, strict, translator: customTranslator, children }: FormEngineI18nProviderProps): react.JSX.Element;
 declare function useFormEngineI18n(): FormEngineI18nContextValue;
 
 declare function resolveChoiceFieldLayout(type: FieldType, appearance?: FormRendererAppearance, groupedChoiceFieldsLegacy?: boolean): "default" | "grouped";
@@ -968,4 +1021,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
 type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
 declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
 
-export { BUILDER_TRANSLATION_ALIASES, BUILDER_TRANSLATION_KEYS, 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 BuilderTranslationKey, type ChoiceFieldLayoutMode, type ChoiceFieldTypeLayoutMap, type ChoiceGroupSlotProps, type ComponentBaseProps, type ConfirmRemoveLocaleSlotProps, type CustomLocaleValidator, type FieldComponentProps, type FieldComponents, type FieldEditorControlsConfig, type FieldEditorHeaderSlotProps, type FieldEditorMode, type FieldError, type FieldPropertyControlMode, type FieldState, type FieldTypeSelectOptionsConfig, type FieldTypeSelectOptionsContext, type FieldTypeSelectOptionsSorter, type FieldTypeSelectOptionsTransformer, type FieldTypeSelectSlotProps, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormBuilderSubmissionSettingsOptions, type FormCompletionSlotProps, type FormContextValue, FormEngineI18nContext, type FormEngineI18nContextValue, FormEngineI18nProvider, type FormEngineI18nProviderProps, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererAppearance, type FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlotProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocaleSelectorProps, type LocaleValidationContext, type LocaleValidationResult, type LocalizationSummaryContext, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type SelectComponentProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationOptions, 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 TranslationEventPayload, type TranslationSlotChangeEvent, type TranslationSlotRowProps, type TranslationSummary, type TranslationWorkspaceActionsProps, type TranslationWorkspaceError, type TranslationWorkspaceHeaderProps, type TranslationWorkspaceSlots, type UseFormBuilderOptions, type UseFormBuilderResult, type UseSubmissionReceiptsResult, type UseTranslationWorkspaceOptions, type UseTranslationWorkspaceResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, isTranslationUnresolved, resolveChoiceFieldLayout, resolveFieldEditorControls, resolveFieldTypeSelectOptions, resolveInitialFieldType, resolveTranslation, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useFormEngineI18n, useSubmissionReceipts, useTranslationWorkspace, validateLocalePipeline };
+export { BUILDER_TRANSLATION_ALIASES, BUILDER_TRANSLATION_KEYS, 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 BuilderTranslationKey, type ChoiceFieldLayoutMode, type ChoiceFieldTypeLayoutMap, type ChoiceGroupSlotProps, type ComponentBaseProps, type ConfirmRemoveLocaleSlotProps, type CustomLocaleValidator, type FieldComponentProps, type FieldComponents, type FieldEditorControlsConfig, type FieldEditorHeaderSlotProps, type FieldEditorMode, type FieldError, type FieldPropertyControlMode, type FieldState, type FieldTypeSelectOptionsConfig, type FieldTypeSelectOptionsContext, type FieldTypeSelectOptionsSorter, type FieldTypeSelectOptionsTransformer, type FieldTypeSelectSlotProps, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormBuilderSubmissionSettingsOptions, type FormCompletionSlotProps, type FormContextValue, FormEngineI18nContext, type FormEngineI18nContextValue, FormEngineI18nProvider, type FormEngineI18nProviderProps, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererAppearance, type FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlotProps, type FormRendererSlots, type FormServerErrorPayload, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocaleSelectorProps, type LocaleValidationContext, type LocaleValidationResult, type LocalizationSummaryContext, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type SelectComponentProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationOptions, 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 TranslationComparisonHeaderProps, type TranslationComparisonItem, type TranslationComparisonItemRowProps, type TranslationComparisonSummary, type TranslationEventPayload, type TranslationSlotChangeEvent, type TranslationSlotRowProps, type TranslationSummary, type TranslationWorkspaceActionsProps, type TranslationWorkspaceError, type TranslationWorkspaceHeaderProps, type TranslationWorkspaceSlots, type UseFormBuilderOptions, type UseFormBuilderResult, type UseSubmissionReceiptsResult, type UseTranslationComparisonOptions, type UseTranslationComparisonResult, type UseTranslationWorkspaceOptions, type UseTranslationWorkspaceResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, isTranslationUnresolved, resolveChoiceFieldLayout, resolveFieldEditorControls, resolveFieldTypeSelectOptions, resolveInitialFieldType, resolveTranslation, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useFormEngineI18n, useSubmissionReceipts, useTranslationComparison, useTranslationWorkspace, validateLocalePipeline };

package/dist/index.js

@@ -922,7 +922,9 @@ function resolveTranslation(key, aliases, adapter, defaultCatalog, params = {},
 }
 
 // src/i18n/provider.tsx
-import { createFormEngineTranslator } from "@form-engine-ts/core";
+import {
+  createFormEngineTranslator
+} from "@form-engine-ts/core";
 import { createContext, useContext, useMemo as useMemo2 } from "react";
 import { jsx } from "react/jsx-runtime";
 var defaultTranslator = createFormEngineTranslator({ locale: "ja" });
@@ -936,6 +938,8 @@ function FormEngineI18nProvider({
   fallbackLocale = "en",
   messages,
   customCatalogs,
+  onMissingKey,
+  strict,
   translator: customTranslator,
   children
 }) {
@@ -945,9 +949,11 @@ function FormEngineI18nProvider({
       locale,
       fallbackLocale,
       ...messages === void 0 ? {} : { messages },
-      ...customCatalogs === void 0 ? {} : { customCatalogs }
+      ...customCatalogs === void 0 ? {} : { customCatalogs },
+      ...onMissingKey === void 0 ? {} : { onMissingKey },
+      ...strict === void 0 ? {} : { strict }
     });
-  }, [customCatalogs, customTranslator, fallbackLocale, locale, messages]);
+  }, [customCatalogs, customTranslator, fallbackLocale, locale, messages, onMissingKey, strict]);
   const value = useMemo2(() => ({ uiLocale: locale, translator }), [locale, translator]);
   return /* @__PURE__ */ jsx(FormEngineI18nProviderScopeContext.Provider, { value: true, children: /* @__PURE__ */ jsx(FormEngineI18nContext.Provider, { value, children }) });
 }
@@ -2524,6 +2530,7 @@ function FormBuilder({
               LocalizationSlot,
               {
                 schema,
+                onChange,
                 translate,
                 currentLocale: editingLocale,
                 onCurrentLocaleChange: setEditingLocale,
@@ -3048,24 +3055,14 @@ import {
   assertValidFormSchema,
   calculateFieldVisibility,
   calculatePageVisibility,
+  FormSubmissionError,
+  isFormSubmissionSerializedError,
   resolveLocalizedSchema,
   selectVisibleAnswers,
   validateAnswers,
   validatePageAnswers
 } from "@form-engine-ts/core";
 import { createContext as createContext3, useCallback as useCallback2, useContext as useContext3, useEffect, useMemo as useMemo3, useRef, useState as useState3 } 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 jsx3 } from "react/jsx-runtime";
 var FormContext = createContext3(null);
 function issuesByField(issues) {
@@ -3202,10 +3199,12 @@ function FormProvider({
         setSubmitStatus("success");
         return response === void 0 ? { status: "success" } : { status: "success", response };
       } catch (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));
+        const error = isFormSubmissionSerializedError(cause) ? new FormSubmissionError(cause) : isServerErrorPayload(cause) ? new FormSubmissionError({
+          code: "VALIDATION_FAILED",
+          messageKey: cause.formError ?? "Submission failed",
+          fieldErrors: cause.fieldErrors ?? {},
+          formErrors: cause.formError === void 0 ? [] : [cause.formError]
+        }) : cause instanceof Error ? cause : new Error(String(cause));
         setSubmitError(error);
         setSubmitStatus("error");
         return { status: "error", error };
@@ -3273,6 +3272,10 @@ function useField(fieldId) {
   return { field, value: form.values[fieldId], error: form.errors[fieldId], setValue };
 }
 
+// src/hooks/useTranslationComparison.ts
+import { computeSourceTextHash as computeSourceTextHash2 } from "@form-engine-ts/core";
+import { useCallback as useCallback4, useMemo as useMemo5 } from "react";
+
 // src/hooks/useTranslationWorkspace.ts
 import {
   collectSchemaLocales as collectSchemaLocales2,
@@ -3837,8 +3840,131 @@ function useTranslationWorkspace({
   };
 }
 
+// src/hooks/useTranslationComparison.ts
+function canonicalMetadata(metadata, sourceText, sourceLocale, translatedText) {
+  if (translatedText === void 0 || translatedText.trim().length === 0) return void 0;
+  if (metadata !== void 0 && typeof metadata.sourceLocale === "string" && typeof metadata.sourceTextHash === "string" && (metadata.translationSource === "automatic" || metadata.translationSource === "manual")) {
+    return {
+      sourceLocale: metadata.sourceLocale,
+      sourceTextHash: metadata.sourceTextHash,
+      translationSource: metadata.translationSource,
+      ...typeof metadata.translatedAt === "string" ? { translatedAt: metadata.translatedAt } : {},
+      ...typeof metadata.editedAt === "string" ? { editedAt: metadata.editedAt } : {}
+    };
+  }
+  return {
+    sourceLocale: typeof metadata?.sourceLocale === "string" ? metadata.sourceLocale : sourceLocale,
+    sourceTextHash: computeSourceTextHash2(sourceText),
+    translationSource: metadata?.isManual === true || metadata?.isManuallyEdited === true || metadata?.translationSource === "manual" ? "manual" : "automatic"
+  };
+}
+function optionParentId(slot) {
+  if (slot.kind !== "option" || slot.path === void 0) return void 0;
+  return /^fields\.([^.]+)\.options\./u.exec(slot.path)?.[1];
+}
+function getNodeTitle(schema, slot) {
+  if (slot.kind === "field") return schema.fields.find((field) => field.id === slot.nodeId)?.title;
+  if (slot.kind === "page") return schema.pages?.find((page) => page.id === slot.nodeId)?.title;
+  if (slot.kind === "option") return schema.fields.find((field) => field.id === optionParentId(slot))?.title;
+  return void 0;
+}
+function comparisonItem(schema, slot, sourceLocale, hasAdapter) {
+  const path = slot.path ?? `${slot.kind}.${slot.nodeId}.${slot.property}`;
+  const nodeTitle = getNodeTitle(schema, slot);
+  const metadata = canonicalMetadata(
+    slot.existingTranslationMetadata,
+    slot.sourceText,
+    sourceLocale,
+    slot.existingText
+  );
+  return {
+    id: path,
+    path,
+    targetKind: slot.kind,
+    targetProperty: slot.property,
+    ...nodeTitle === void 0 ? {} : { nodeTitle },
+    sourceText: slot.sourceText,
+    translatedText: slot.existingText ?? "",
+    status: slot.status ?? "missing",
+    ...metadata === void 0 ? {} : { metadata },
+    translatable: hasAdapter && slot.sourceText.trim().length > 0
+  };
+}
+function summaryFor(items) {
+  const counts = {
+    missing: 0,
+    translated: 0,
+    stale: 0,
+    manual: 0,
+    "manual-stale": 0
+  };
+  for (const item of items) counts[item.status] += 1;
+  return {
+    total: items.length,
+    translated: counts.translated + counts.manual,
+    missing: counts.missing,
+    stale: counts.stale + counts["manual-stale"],
+    manual: counts.manual + counts["manual-stale"]
+  };
+}
+function useTranslationComparison({
+  schema,
+  sourceLocale = schema.defaultLocale ?? "en",
+  targetLocale,
+  translationAdapter,
+  readOnly = false,
+  onChange,
+  onTranslationChange
+}) {
+  const workspace = useTranslationWorkspace({
+    schema,
+    sourceLocale,
+    targetLocale,
+    ...translationAdapter === void 0 ? {} : { translationAdapter },
+    readOnly,
+    ...onChange === void 0 ? {} : { onChange },
+    ...onTranslationChange === void 0 ? {} : { onTranslationChange }
+  });
+  const items = useMemo5(
+    () => workspace.slots.map((slot) => comparisonItem(schema, slot, sourceLocale, translationAdapter !== void 0)),
+    [schema, sourceLocale, translationAdapter, workspace.slots]
+  );
+  const itemByPath = useMemo5(() => new Map(workspace.slots.map((slot) => [slot.path, slot])), [workspace.slots]);
+  const updateTranslation = useCallback4(
+    (path, text) => {
+      const slot = itemByPath.get(path);
+      if (slot !== void 0) workspace.setTranslation(slot, text);
+    },
+    [itemByPath, workspace]
+  );
+  const translateSingle = useCallback4(
+    async (path) => {
+      const slot = itemByPath.get(path);
+      if (slot === void 0) return;
+      const result = await workspace.translateSlot(slot);
+      if (!result.success) throw new Error(result.error?.type ?? "Translation failed.");
+    },
+    [itemByPath, workspace]
+  );
+  const translateAll = useCallback4(async () => {
+    const result = await workspace.translateAll();
+    if (result.report !== void 0) return result.report;
+    throw new Error(result.error?.type ?? "Translation failed.");
+  }, [workspace]);
+  return {
+    sourceLocale: workspace.sourceLocale,
+    targetLocale: workspace.targetLocale,
+    items,
+    summary: summaryFor(items),
+    isTranslating: workspace.isTranslating,
+    updateTranslation,
+    translateSingle,
+    translateAll
+  };
+}
+
 // src/receipt.ts
-import { useEffect as useEffect2, useMemo as useMemo5, useState as useState5 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo6, useState as useState5 } from "react";
 function submissionReceiptQueryKey(formId, formVersion) {
   return `${formId}:v${formVersion}`;
 }
@@ -3909,7 +4035,7 @@ function createLocalStorageSubmissionReceiptStore(options = {}) {
 }
 function useSubmissionReceipts(store, queries) {
   const querySignature = JSON.stringify(queries.map(({ formId, formVersion }) => [formId, formVersion]));
-  const stableQueries = useMemo5(() => {
+  const stableQueries = useMemo6(() => {
     const parsed = JSON.parse(querySignature);
     if (!Array.isArray(parsed)) return [];
     return parsed.flatMap(
@@ -3956,16 +4082,18 @@ function useSubmissionReceipts(store, queries) {
 
 // src/renderer.tsx
 import {
+  FormSubmissionError as FormSubmissionError2,
+  isFormSubmissionSerializedError as isFormSubmissionSerializedError2,
   selectVisibleAnswers as selectVisibleAnswers2,
   validateAnswers as validateAnswers2
 } from "@form-engine-ts/core";
 import {
   Fragment as Fragment2,
-  useCallback as useCallback4,
+  useCallback as useCallback5,
   useContext as useContext4,
   useEffect as useEffect3,
   useId,
-  useMemo as useMemo6,
+  useMemo as useMemo7,
   useRef as useRef3,
   useState as useState6
 } from "react";
@@ -4498,15 +4626,15 @@ function ContextFormRenderer({
   const completionRef = useRef3(null);
   const confirmationRef = useRef3(null);
   const pages = form.schema.pages;
-  const visiblePageIndexes = useMemo6(
+  const visiblePageIndexes = useMemo7(
     () => pages === void 0 ? [] : pages.flatMap((page, index) => form.pageVisibility[page.id] === true ? [index] : []),
     [form.pageVisibility, pages]
   );
   const activePage = pages?.[currentPageIndex];
   const activeVisibleIndex = visiblePageIndexes.indexOf(currentPageIndex);
   const fieldIds = activePage === void 0 ? void 0 : new Set(activePage.questionIds);
-  const visibleValues = useMemo6(() => selectVisibleAnswers2(form.schema, form.values), [form.schema, form.values]);
-  const visibleItems = useMemo6(
+  const visibleValues = useMemo7(() => selectVisibleAnswers2(form.schema, form.values), [form.schema, form.values]);
+  const visibleItems = useMemo7(
     () => buildSubmittedItems(form.schema, form.values, form.visibility, (key) => form.translate(key), false),
     [form.schema, form.translate, form.values, form.visibility]
   );
@@ -4515,7 +4643,7 @@ function ContextFormRenderer({
   const submitState = confirmation === null && !guardsPending ? form.submitStatus : "confirming";
   const interactionLocked = submitState === "confirming" || submitState === "submitting";
   const isReplaceMode = successRenderMode === "replace" || hideFormOnSuccess;
-  const resolveMessage = useCallback4(
+  const resolveMessage = useCallback5(
     (key, fallback) => {
       const providerDefault = isProviderValue ? i18n.translator(`renderer.${key}`) : void 0;
       const defaultText = fallback ?? (providerDefault === "" ? void 0 : providerDefault) ?? DEFAULT_RENDERER_MESSAGES[form.locale.toLowerCase().startsWith("ja") ? "ja" : "en"][key] ?? key;
@@ -4524,11 +4652,11 @@ function ContextFormRenderer({
     },
     [form.locale, i18n, isProviderValue, messageResolver, messages]
   );
-  const fieldTranslate = useCallback4(
+  const fieldTranslate = useCallback5(
     (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 = useCallback4(() => {
+  const focusSubmitButton = useCallback5(() => {
     const button = formRef.current?.querySelector(".fe-submit, button[type='submit'], button");
     button?.focus();
   }, []);
@@ -4739,8 +4867,9 @@ function ContextFormRenderer({
         return result;
       }
       if (result.status === "error") {
-        if (result.error instanceof FormSubmissionError) {
-          const fieldErrors = result.error.payload.fieldErrors ?? {};
+        const payload = result.error instanceof FormSubmissionError2 ? result.error.payload : isFormSubmissionSerializedError2(result.error) ? result.error : void 0;
+        if (payload !== void 0) {
+          const fieldErrors = payload.fieldErrors ?? {};
           form.setServerErrors?.(fieldErrors);
           const firstServerFieldId = form.schema.fields.find((field) => Object.hasOwn(fieldErrors, field.id))?.id ?? Object.keys(fieldErrors)[0];
           if (firstServerFieldId !== void 0) {
@@ -4748,6 +4877,9 @@ function ContextFormRenderer({
             if (invalidPageIndex !== void 0 && invalidPageIndex >= 0) setCurrentPageIndex(invalidPageIndex);
             focusFirstIssue(firstServerFieldId);
           }
+          if (payload.piiFindings !== void 0 && payload.piiFindings.length > 0) {
+            setConfirmation({ findings: payload.piiFindings, generic: false });
+          }
         }
         return result;
       }
@@ -5049,8 +5181,8 @@ 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__ */ jsxs2("div", { role: "alert", children: [
-              form.submitError.payload.formError,
+            form.submitStatus === "error" && form.submitError !== null ? slots.renderSubmitError?.({ error: form.submitError, onRetry: () => void submitValues() }) ?? (form.submitError instanceof FormSubmissionError2 && (form.submitError.payload.formErrors?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs2("div", { role: "alert", children: [
+              form.submitError.payload.formErrors?.map((message) => /* @__PURE__ */ jsx4("div", { children: message }, message)),
               /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => void submitValues(), children: resolveMessage("retryButton") })
             ] }) : /* @__PURE__ */ jsxs2("div", { role: "alert", children: [
               errorMessageKey === void 0 ? resolveMessage("serverErrorSummary") : form.translate(errorMessageKey),
@@ -5133,6 +5265,9 @@ function FormRenderer(props) {
     }
   );
 }
+
+// src/types.ts
+import { FormSubmissionError as FormSubmissionError3 } from "@form-engine-ts/core";
 export {
   BUILDER_TRANSLATION_ALIASES,
   BUILDER_TRANSLATION_KEYS,
@@ -5141,7 +5276,7 @@ export {
   FormEngineI18nProvider,
   FormProvider,
   FormRenderer,
-  FormSubmissionError,
+  FormSubmissionError3 as FormSubmissionError,
   createLocalStorageSubmissionAttemptStore,
   createLocalStorageSubmissionReceiptStore,
   isTranslationUnresolved,
@@ -5156,6 +5291,7 @@ export {
   useFormBuilder,
   useFormEngineI18n,
   useSubmissionReceipts,
+  useTranslationComparison,
   useTranslationWorkspace,
   validateLocalePipeline
 };

package/package.json

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