@form-engine-ts/react 6.0.0 → 6.2.0

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");
@@ -3489,6 +3489,7 @@ function useTranslationWorkspace({
   sourceLocale = schema.defaultLocale ?? "en",
   targetLocale,
   translationAdapter,
+  signal,
   readOnly = false,
   policy,
   availableLocales,
@@ -3500,6 +3501,7 @@ function useTranslationWorkspace({
   slots: workspaceSlots,
   onTranslationStart,
   onTranslationSuccess,
+  onTranslationReport,
   onTranslationError,
   onTranslationChange,
   validateLocale
@@ -3507,8 +3509,10 @@ function useTranslationWorkspace({
   const [draftSchema, setDraftSchema] = (0, import_react5.useState)(schema);
   const [selectedLocale, setSelectedLocale] = (0, import_react5.useState)((0, import_core5.normalizeLocale)(targetLocale ?? "") ?? targetLocale ?? "");
   const [isTranslating, setIsTranslating] = (0, import_react5.useState)(false);
+  const [progress, setProgress] = (0, import_react5.useState)();
   const [error, setError] = (0, import_react5.useState)();
   const [pendingRemoval, setPendingRemoval] = (0, import_react5.useState)();
+  const activeAbortController = (0, import_react5.useRef)(void 0);
   const pendingRemovalResolver = (0, import_react5.useRef)(void 0);
   const currentSchema = onChange === void 0 ? draftSchema : schema;
   const confirmRemoveLocaleRenderer = confirmRemoveLocale ?? workspaceSlots?.confirmRemoveLocale;
@@ -3748,7 +3752,15 @@ function useTranslationWorkspace({
       }
       setIsTranslating(true);
       setError(void 0);
+      setProgress(void 0);
       onTranslationStart?.({ targetLocale: activeLocale, mode: "automatic" });
+      const controller = new AbortController();
+      activeAbortController.current = controller;
+      const operationSignal = options.signal ?? signal;
+      const abortListener = operationSignal === void 0 ? void 0 : () => controller.abort(operationSignal.reason);
+      if (operationSignal?.aborted) controller.abort(operationSignal.reason);
+      else if (operationSignal !== void 0 && abortListener !== void 0)
+        operationSignal.addEventListener("abort", abortListener, { once: true });
       try {
         const populated = await (0, import_core5.populateSchemaTranslations)(
           currentSchema,
@@ -3757,13 +3769,36 @@ function useTranslationWorkspace({
           {
             overwrite: "stale-and-missing",
             preserveManualTranslations: true,
-            ...options
+            ...options,
+            continueOnError: true,
+            signal: controller.signal,
+            onProgress: (nextProgress) => {
+              setProgress(nextProgress);
+              options.onProgress?.(nextProgress);
+            }
           }
         );
         commit(populated.schema);
+        onTranslationReport?.(populated.report);
         const missingSlotsCount = (0, import_core5.collectTranslationSlots)(populated.schema, activeLocale).filter(
           (slot) => slot.status === "missing"
         ).length;
+        if (populated.report.cancelled === true) {
+          const workspaceError = { type: "cancelled" };
+          setError(workspaceError);
+          onTranslationError?.({ targetLocale: activeLocale, error: workspaceError });
+          return { success: false, report: populated.report, error: workspaceError };
+        }
+        if ((populated.report.failed ?? 0) > 0) {
+          const workspaceError = {
+            type: "partial_failure",
+            succeeded: populated.report.succeeded ?? populated.report.updatedSlots.length,
+            failed: populated.report.failed ?? 0
+          };
+          setError(workspaceError);
+          onTranslationError?.({ targetLocale: activeLocale, error: workspaceError });
+          return { success: false, report: populated.report, error: workspaceError };
+        }
         onTranslationSuccess?.({
           sourceLocale,
           targetLocale: activeLocale,
@@ -3774,6 +3809,12 @@ function useTranslationWorkspace({
         });
         return { success: true, report: populated.report };
       } catch (cause) {
+        if (controller.signal.aborted || cause instanceof DOMException && cause.name === "AbortError") {
+          const workspaceError2 = { type: "cancelled" };
+          setError(workspaceError2);
+          onTranslationError?.({ targetLocale: activeLocale, error: workspaceError2 });
+          return { success: false, error: workspaceError2 };
+        }
         const workspaceError = {
           type: "translation_failed",
           message: cause instanceof Error ? cause.message : String(cause),
@@ -3783,6 +3824,11 @@ function useTranslationWorkspace({
         onTranslationError?.({ targetLocale: activeLocale, error: workspaceError });
         return { success: false, error: workspaceError };
       } finally {
+        if (operationSignal !== void 0 && abortListener !== void 0) {
+          const listener = abortListener;
+          operationSignal.removeEventListener("abort", listener);
+        }
+        if (activeAbortController.current === controller) activeAbortController.current = void 0;
         setIsTranslating(false);
       }
     },
@@ -3794,14 +3840,19 @@ function useTranslationWorkspace({
       onTranslationError,
       onTranslationStart,
       onTranslationSuccess,
+      onTranslationReport,
       readOnly,
       slots,
       sourceLocale,
-      translationAdapter
+      translationAdapter,
+      signal
     ]
   );
+  const cancelTranslation = (0, import_react5.useCallback)(() => {
+    activeAbortController.current?.abort(new DOMException("The translation was cancelled.", "AbortError"));
+  }, []);
   const translateSlot = (0, import_react5.useCallback)(
-    async (slot) => {
+    async (slot, options = {}) => {
       if (translationAdapter === void 0) {
         const workspaceError = { type: "adapter_not_configured" };
         setError(workspaceError);
@@ -3814,8 +3865,21 @@ function useTranslationWorkspace({
       }
       setIsTranslating(true);
       setError(void 0);
+      setProgress({ total: 1, completed: 0, succeeded: 0, failed: 0, percentage: 0 });
+      const controller = new AbortController();
+      activeAbortController.current = controller;
+      const operationSignal = options.signal ?? signal;
+      const abortListener = operationSignal === void 0 ? void 0 : () => controller.abort(operationSignal.reason);
+      if (operationSignal?.aborted) controller.abort(operationSignal.reason);
+      else if (operationSignal !== void 0 && abortListener !== void 0)
+        operationSignal.addEventListener("abort", abortListener, { once: true });
       try {
-        const text = await asAsyncAdapter(translationAdapter).translateText(slot.sourceText, slot.locale, sourceLocale);
+        const text = await asAsyncAdapter(translationAdapter).translateText(
+          slot.sourceText,
+          slot.locale,
+          sourceLocale,
+          controller.signal
+        );
         const metadata = translationMetadata(slot.sourceText, sourceLocale, "automatic");
         commit(updateSchemaTranslation(currentSchema, slot, text, sourceLocale, "automatic"));
         onTranslationChange?.({
@@ -3825,8 +3889,15 @@ function useTranslationWorkspace({
           mode: "automatic",
           metadata
         });
+        setProgress({ total: 1, completed: 1, succeeded: 1, failed: 0, percentage: 100 });
         return { success: true };
       } catch (cause) {
+        if (controller.signal.aborted || cause instanceof DOMException && cause.name === "AbortError") {
+          const workspaceError2 = { type: "cancelled" };
+          setError(workspaceError2);
+          onTranslationError?.({ targetLocale: slot.locale, error: workspaceError2 });
+          return { success: false, error: workspaceError2 };
+        }
         const workspaceError = {
           type: "translation_failed",
           message: cause instanceof Error ? cause.message : String(cause),
@@ -3835,10 +3906,15 @@ function useTranslationWorkspace({
         setError(workspaceError);
         return { success: false, error: workspaceError };
       } finally {
+        if (operationSignal !== void 0 && abortListener !== void 0) {
+          const listener = abortListener;
+          operationSignal.removeEventListener("abort", listener);
+        }
+        if (activeAbortController.current === controller) activeAbortController.current = void 0;
         setIsTranslating(false);
       }
     },
-    [commit, currentSchema, onTranslationChange, readOnly, sourceLocale, translationAdapter]
+    [commit, currentSchema, onTranslationChange, onTranslationError, readOnly, signal, sourceLocale, translationAdapter]
   );
   return {
     sourceLocale,
@@ -3859,13 +3935,159 @@ function useTranslationWorkspace({
     setTranslation,
     translateAll,
     translateSlot,
+    cancelTranslation,
     isTranslating,
+    ...progress === void 0 ? {} : { progress },
     ...error === void 0 ? {} : { error }
   };
 }
 
+// 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 {
+      ...metadata,
+      sourceLocale: metadata.sourceLocale,
+      sourceTextHash: metadata.sourceTextHash,
+      translationSource: metadata.translationSource,
+      ...typeof metadata.translatedAt === "string" ? { translatedAt: metadata.translatedAt } : {},
+      ...typeof metadata.editedAt === "string" ? { editedAt: metadata.editedAt } : {}
+    };
+  }
+  const canonicalKeys = /* @__PURE__ */ new Set(["sourceLocale", "sourceTextHash", "translationSource", "translatedAt", "editedAt"]);
+  const extensions = Object.fromEntries(Object.entries(metadata ?? {}).filter(([key]) => !canonicalKeys.has(key)));
+  return {
+    ...extensions,
+    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,
+  onTranslationReport,
+  onTranslationError,
+  signal
+}) {
+  const workspace = useTranslationWorkspace({
+    schema,
+    sourceLocale,
+    targetLocale,
+    ...translationAdapter === void 0 ? {} : { translationAdapter },
+    readOnly,
+    ...onChange === void 0 ? {} : { onChange },
+    ...onTranslationChange === void 0 ? {} : { onTranslationChange },
+    ...onTranslationReport === void 0 ? {} : { onTranslationReport },
+    ...onTranslationError === void 0 ? {} : { onTranslationError },
+    ...signal === void 0 ? {} : { signal }
+  });
+  const [report, setReport] = (0, import_react6.useState)();
+  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 (options) => {
+      const result = await workspace.translateAll(options);
+      if (result.report !== void 0) {
+        setReport(result.report);
+        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,
+    cancelTranslation: workspace.cancelTranslation,
+    ...workspace.progress === void 0 ? {} : { progress: workspace.progress },
+    ...workspace.error === void 0 ? {} : { error: workspace.error },
+    ...report === void 0 ? {} : { report }
+  };
+}
+
 // src/receipt.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 function submissionReceiptQueryKey(formId, formVersion) {
   return `${formId}:v${formVersion}`;
 }
@@ -3936,19 +4158,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 +4204,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 +4717,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 +4752,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 +4761,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 +4790,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 +4809,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 +4845,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 +4857,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 +4913,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 +4976,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 +4986,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 +5219,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 +5290,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 +5347,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 +5374,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 +5401,7 @@ function FormRenderer(props) {
   useFormBuilder,
   useFormEngineI18n,
   useSubmissionReceipts,
+  useTranslationComparison,
   useTranslationWorkspace,
   validateLocalePipeline
 });