@form-engine-ts/react 5.1.0 → 6.1.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");
@@ -3421,26 +3421,27 @@ function workspaceLocaleValidationError(validation, currentLocales, requestedLoc
   }
   return { type: "custom_validation_failed", message: error.message };
 }
-function manualMetadata(sourceText, sourceLocale) {
+function translationMetadata(sourceText, sourceLocale, mode) {
   return {
     sourceLocale,
     sourceTextHash: (0, import_core5.computeSourceTextHash)(sourceText),
-    translationSource: "manual",
-    editedAt: (/* @__PURE__ */ new Date()).toISOString()
+    translationSource: mode,
+    ...mode === "manual" ? { editedAt: (/* @__PURE__ */ new Date()).toISOString() } : { translatedAt: (/* @__PURE__ */ new Date()).toISOString() }
   };
 }
-function setNodeMetadata(node, slot, text, sourceLocale) {
+function setNodeMetadata(node, slot, text, sourceLocale, mode) {
   const localeMetadata = node.translationMetadata?.[slot.locale];
-  const nextMetadata = text.trim().length === 0 ? Object.fromEntries(Object.entries(localeMetadata ?? {}).filter(([key]) => key !== slot.property)) : { ...localeMetadata, [slot.property]: manualMetadata(slot.sourceText, sourceLocale) };
+  const nextMetadata = text.trim().length === 0 ? Object.fromEntries(Object.entries(localeMetadata ?? {}).filter(([key]) => key !== slot.property)) : { ...localeMetadata, [slot.property]: translationMetadata(slot.sourceText, sourceLocale, mode) };
   return { ...node, translationMetadata: { ...node.translationMetadata, [slot.locale]: nextMetadata } };
 }
-function updateSchemaTranslation(schema, slot, text, sourceLocale) {
+function updateSchemaTranslation(schema, slot, text, sourceLocale, mode = "manual") {
   if (slot.kind === "form") {
     return setNodeMetadata(
       { ...schema, translations: updateTranslationMap(schema.translations, slot.locale, slot.property, text) },
       slot,
       text,
-      sourceLocale
+      sourceLocale,
+      mode
     );
   }
   if (slot.kind === "field") {
@@ -3449,7 +3450,7 @@ function updateSchemaTranslation(schema, slot, text, sourceLocale) {
       fields: schema.fields.map((field) => {
         if (field.id !== slot.nodeId) return field;
         const translations = updateTranslationMap(field.translations, slot.locale, slot.property, text);
-        return setNodeMetadata({ ...field, translations }, slot, text, sourceLocale);
+        return setNodeMetadata({ ...field, translations }, slot, text, sourceLocale, mode);
       })
     };
   }
@@ -3465,7 +3466,7 @@ function updateSchemaTranslation(schema, slot, text, sourceLocale) {
             const translations = text.trim().length === 0 ? Object.fromEntries(
               Object.entries(option.translations ?? {}).filter(([locale]) => locale !== slot.locale)
             ) : { ...option.translations, [slot.locale]: text };
-            return setNodeMetadata({ ...option, translations }, slot, text, sourceLocale);
+            return setNodeMetadata({ ...option, translations }, slot, text, sourceLocale, mode);
           })
         };
       })
@@ -3477,7 +3478,7 @@ function updateSchemaTranslation(schema, slot, text, sourceLocale) {
       pages: schema.pages.map((page) => {
         if (page.id !== slot.nodeId) return page;
         const translations = updateTranslationMap(page.translations, slot.locale, slot.property, text);
-        return setNodeMetadata({ ...page, translations }, slot, text, sourceLocale);
+        return setNodeMetadata({ ...page, translations }, slot, text, sourceLocale, mode);
       })
     }
   };
@@ -3495,13 +3496,22 @@ function useTranslationWorkspace({
   onLocaleRemoved,
   onLocaleChange,
   beforeRemoveLocale,
+  confirmRemoveLocale,
+  slots: workspaceSlots,
+  onTranslationStart,
+  onTranslationSuccess,
+  onTranslationError,
+  onTranslationChange,
   validateLocale
 }) {
   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 [error, setError] = (0, import_react5.useState)();
+  const [pendingRemoval, setPendingRemoval] = (0, import_react5.useState)();
+  const pendingRemovalResolver = (0, import_react5.useRef)(void 0);
   const currentSchema = onChange === void 0 ? draftSchema : schema;
+  const confirmRemoveLocaleRenderer = confirmRemoveLocale ?? workspaceSlots?.confirmRemoveLocale;
   const targetLocales = (0, import_react5.useMemo)(() => {
     const locales = (0, import_core5.collectSchemaLocales)(currentSchema).allUniqueLocales;
     return [.../* @__PURE__ */ new Set([...currentSchema.supportedLocales ?? [], ...locales])].filter(
@@ -3551,9 +3561,17 @@ function useTranslationWorkspace({
   const setTranslation = (0, import_react5.useCallback)(
     (slot, text) => {
       if (readOnly) return;
-      commit(updateSchemaTranslation(currentSchema, slot, text, sourceLocale));
+      const metadata = translationMetadata(slot.sourceText, sourceLocale, "manual");
+      commit(updateSchemaTranslation(currentSchema, slot, text, sourceLocale, "manual"));
+      onTranslationChange?.({
+        slot,
+        ...slot.existingText === void 0 ? {} : { previousText: slot.existingText },
+        nextText: text,
+        mode: "manual",
+        metadata
+      });
     },
-    [commit, currentSchema, readOnly, sourceLocale]
+    [commit, currentSchema, onTranslationChange, readOnly, sourceLocale]
   );
   const addLocale = (0, import_react5.useCallback)(
     (locale) => {
@@ -3614,21 +3632,36 @@ function useTranslationWorkspace({
         onLocaleRemoved?.(normalized);
       };
       const slotCount = (0, import_core5.collectTranslationSlots)(currentSchema, normalized).length;
+      const translatedSlotsCount = (0, import_core5.collectTranslationSlots)(currentSchema, normalized).filter(
+        (slot) => slot.existingText !== void 0 && slot.existingText.trim().length > 0
+      ).length;
+      const requestConfirmation = () => new Promise((resolve) => {
+        pendingRemovalResolver.current = resolve;
+        setPendingRemoval({
+          locale: normalized,
+          localeLabel: localeOptions.find((option) => option.locale === normalized)?.label ?? normalized,
+          translatedSlotsCount
+        });
+      });
+      const removeAfterApproval = () => {
+        if (confirmRemoveLocaleRenderer === void 0) {
+          remove();
+          return true;
+        }
+        return requestConfirmation();
+      };
       if (beforeRemoveLocale === void 0) {
-        remove();
-        return true;
+        return removeAfterApproval();
       }
       try {
         const decision = beforeRemoveLocale(normalized, { slotCount });
         if (typeof decision === "boolean") {
           if (!decision) return false;
-          remove();
-          return true;
+          return removeAfterApproval();
         }
         return decision.then((allowed) => {
           if (!allowed) return false;
-          remove();
-          return true;
+          return removeAfterApproval();
         });
       } catch (cause) {
         const workspaceError = {
@@ -3640,8 +3673,45 @@ function useTranslationWorkspace({
         return Promise.reject(cause);
       }
     },
-    [activeLocale, beforeRemoveLocale, commit, currentSchema, onLocaleRemoved, readOnly, sourceLocale]
+    [
+      activeLocale,
+      beforeRemoveLocale,
+      commit,
+      confirmRemoveLocaleRenderer,
+      currentSchema,
+      localeOptions,
+      onLocaleRemoved,
+      readOnly,
+      sourceLocale
+    ]
   );
+  const confirmPendingRemoval = (0, import_react5.useCallback)(() => {
+    const pending = pendingRemoval;
+    const resolve = pendingRemovalResolver.current;
+    if (pending === void 0 || resolve === void 0) return;
+    pendingRemovalResolver.current = void 0;
+    setPendingRemoval(void 0);
+    commit((0, import_core5.removeLocaleFromSchema)(currentSchema, pending.locale));
+    if (activeLocale === pending.locale) setSelectedLocale("");
+    onLocaleRemoved?.(pending.locale);
+    resolve(true);
+  }, [activeLocale, commit, currentSchema, onLocaleRemoved, pendingRemoval]);
+  const cancelPendingRemoval = (0, import_react5.useCallback)(() => {
+    const resolve = pendingRemovalResolver.current;
+    if (resolve === void 0) return;
+    pendingRemovalResolver.current = void 0;
+    setPendingRemoval(void 0);
+    resolve(false);
+  }, []);
+  const removeLocaleConfirmation = (0, import_react5.useMemo)(() => {
+    if (confirmRemoveLocaleRenderer === void 0 || pendingRemoval === void 0) return null;
+    return confirmRemoveLocaleRenderer({
+      ...pendingRemoval,
+      isOpen: true,
+      onConfirm: confirmPendingRemoval,
+      onCancel: cancelPendingRemoval
+    });
+  }, [cancelPendingRemoval, confirmPendingRemoval, confirmRemoveLocaleRenderer, pendingRemoval]);
   const translateAll = (0, import_react5.useCallback)(
     async (options = {}) => {
       if (readOnly) {
@@ -3678,6 +3748,7 @@ function useTranslationWorkspace({
       }
       setIsTranslating(true);
       setError(void 0);
+      onTranslationStart?.({ targetLocale: activeLocale, mode: "automatic" });
       try {
         const populated = await (0, import_core5.populateSchemaTranslations)(
           currentSchema,
@@ -3690,6 +3761,17 @@ function useTranslationWorkspace({
           }
         );
         commit(populated.schema);
+        const missingSlotsCount = (0, import_core5.collectTranslationSlots)(populated.schema, activeLocale).filter(
+          (slot) => slot.status === "missing"
+        ).length;
+        onTranslationSuccess?.({
+          sourceLocale,
+          targetLocale: activeLocale,
+          mode: "automatic",
+          updatedSlots: populated.report.updatedSlots,
+          skippedSlots: populated.report.skippedSlots,
+          missingSlotsCount
+        });
         return { success: true, report: populated.report };
       } catch (cause) {
         const workspaceError = {
@@ -3698,12 +3780,25 @@ function useTranslationWorkspace({
           cause
         };
         setError(workspaceError);
+        onTranslationError?.({ targetLocale: activeLocale, error: workspaceError });
         return { success: false, error: workspaceError };
       } finally {
         setIsTranslating(false);
       }
     },
-    [activeLocale, commit, currentSchema, localeOptions, readOnly, slots, translationAdapter]
+    [
+      activeLocale,
+      commit,
+      currentSchema,
+      localeOptions,
+      onTranslationError,
+      onTranslationStart,
+      onTranslationSuccess,
+      readOnly,
+      slots,
+      sourceLocale,
+      translationAdapter
+    ]
   );
   const translateSlot = (0, import_react5.useCallback)(
     async (slot) => {
@@ -3721,7 +3816,15 @@ function useTranslationWorkspace({
       setError(void 0);
       try {
         const text = await asAsyncAdapter(translationAdapter).translateText(slot.sourceText, slot.locale, sourceLocale);
-        commit(updateSchemaTranslation(currentSchema, slot, text, sourceLocale));
+        const metadata = translationMetadata(slot.sourceText, sourceLocale, "automatic");
+        commit(updateSchemaTranslation(currentSchema, slot, text, sourceLocale, "automatic"));
+        onTranslationChange?.({
+          slot,
+          ...slot.existingText === void 0 ? {} : { previousText: slot.existingText },
+          nextText: text,
+          mode: "automatic",
+          metadata
+        });
         return { success: true };
       } catch (cause) {
         const workspaceError = {
@@ -3735,7 +3838,7 @@ function useTranslationWorkspace({
         setIsTranslating(false);
       }
     },
-    [commit, currentSchema, readOnly, sourceLocale, translationAdapter]
+    [commit, currentSchema, onTranslationChange, readOnly, sourceLocale, translationAdapter]
   );
   return {
     sourceLocale,
@@ -3752,6 +3855,7 @@ function useTranslationWorkspace({
     addLocale,
     isAddLocaleAllowed,
     removeLocale,
+    ...removeLocaleConfirmation === null ? {} : { removeLocaleConfirmation },
     setTranslation,
     translateAll,
     translateSlot,
@@ -3760,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}`;
 }
@@ -3832,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 });
@@ -3878,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) {
@@ -4391,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]
   );
@@ -4426,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;
@@ -4435,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);
@@ -4464,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
@@ -4483,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();
@@ -4519,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;
@@ -4531,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);
@@ -4587,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;
@@ -4650,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) {
@@ -4659,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;
       }
@@ -4889,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) => {
@@ -4960,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),
@@ -5017,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,
@@ -5044,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,
@@ -5068,6 +5302,7 @@ function FormRenderer(props) {
   useFormBuilder,
   useFormEngineI18n,
   useSubmissionReceipts,
+  useTranslationComparison,
   useTranslationWorkspace,
   validateLocalePipeline
 });