@form-engine-ts/react 5.1.0 → 6.1.0

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,
@@ -3282,7 +3285,7 @@ import {
   populateSchemaTranslations as populateSchemaTranslations2,
   removeLocaleFromSchema
 } from "@form-engine-ts/core";
-import { useCallback as useCallback3, useMemo as useMemo4, useState as useState4 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo4, useRef as useRef2, useState as useState4 } from "react";
 function updateTranslationMap(translations, locale, property, text) {
   if (property === "label") return translations ?? {};
   const current = translations?.[locale];
@@ -3394,26 +3397,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: 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") {
@@ -3422,7 +3426,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);
       })
     };
   }
@@ -3438,7 +3442,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);
           })
         };
       })
@@ -3450,7 +3454,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);
       })
     }
   };
@@ -3468,13 +3472,22 @@ function useTranslationWorkspace({
   onLocaleRemoved,
   onLocaleChange,
   beforeRemoveLocale,
+  confirmRemoveLocale,
+  slots: workspaceSlots,
+  onTranslationStart,
+  onTranslationSuccess,
+  onTranslationError,
+  onTranslationChange,
   validateLocale
 }) {
   const [draftSchema, setDraftSchema] = useState4(schema);
   const [selectedLocale, setSelectedLocale] = useState4(normalizeLocale(targetLocale ?? "") ?? targetLocale ?? "");
   const [isTranslating, setIsTranslating] = useState4(false);
   const [error, setError] = useState4();
+  const [pendingRemoval, setPendingRemoval] = useState4();
+  const pendingRemovalResolver = useRef2(void 0);
   const currentSchema = onChange === void 0 ? draftSchema : schema;
+  const confirmRemoveLocaleRenderer = confirmRemoveLocale ?? workspaceSlots?.confirmRemoveLocale;
   const targetLocales = useMemo4(() => {
     const locales = collectSchemaLocales2(currentSchema).allUniqueLocales;
     return [.../* @__PURE__ */ new Set([...currentSchema.supportedLocales ?? [], ...locales])].filter(
@@ -3524,9 +3537,17 @@ function useTranslationWorkspace({
   const setTranslation = useCallback3(
     (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 = useCallback3(
     (locale) => {
@@ -3587,21 +3608,36 @@ function useTranslationWorkspace({
         onLocaleRemoved?.(normalized);
       };
       const slotCount = collectTranslationSlots(currentSchema, normalized).length;
+      const translatedSlotsCount = 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 = {
@@ -3613,8 +3649,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 = useCallback3(() => {
+    const pending = pendingRemoval;
+    const resolve = pendingRemovalResolver.current;
+    if (pending === void 0 || resolve === void 0) return;
+    pendingRemovalResolver.current = void 0;
+    setPendingRemoval(void 0);
+    commit(removeLocaleFromSchema(currentSchema, pending.locale));
+    if (activeLocale === pending.locale) setSelectedLocale("");
+    onLocaleRemoved?.(pending.locale);
+    resolve(true);
+  }, [activeLocale, commit, currentSchema, onLocaleRemoved, pendingRemoval]);
+  const cancelPendingRemoval = useCallback3(() => {
+    const resolve = pendingRemovalResolver.current;
+    if (resolve === void 0) return;
+    pendingRemovalResolver.current = void 0;
+    setPendingRemoval(void 0);
+    resolve(false);
+  }, []);
+  const removeLocaleConfirmation = useMemo4(() => {
+    if (confirmRemoveLocaleRenderer === void 0 || pendingRemoval === void 0) return null;
+    return confirmRemoveLocaleRenderer({
+      ...pendingRemoval,
+      isOpen: true,
+      onConfirm: confirmPendingRemoval,
+      onCancel: cancelPendingRemoval
+    });
+  }, [cancelPendingRemoval, confirmPendingRemoval, confirmRemoveLocaleRenderer, pendingRemoval]);
   const translateAll = useCallback3(
     async (options = {}) => {
       if (readOnly) {
@@ -3651,6 +3724,7 @@ function useTranslationWorkspace({
       }
       setIsTranslating(true);
       setError(void 0);
+      onTranslationStart?.({ targetLocale: activeLocale, mode: "automatic" });
       try {
         const populated = await populateSchemaTranslations2(
           currentSchema,
@@ -3663,6 +3737,17 @@ function useTranslationWorkspace({
           }
         );
         commit(populated.schema);
+        const missingSlotsCount = 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 = {
@@ -3671,12 +3756,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 = useCallback3(
     async (slot) => {
@@ -3694,7 +3792,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 = {
@@ -3708,7 +3814,7 @@ function useTranslationWorkspace({
         setIsTranslating(false);
       }
     },
-    [commit, currentSchema, readOnly, sourceLocale, translationAdapter]
+    [commit, currentSchema, onTranslationChange, readOnly, sourceLocale, translationAdapter]
   );
   return {
     sourceLocale,
@@ -3725,6 +3831,7 @@ function useTranslationWorkspace({
     addLocale,
     isAddLocaleAllowed,
     removeLocale,
+    ...removeLocaleConfirmation === null ? {} : { removeLocaleConfirmation },
     setTranslation,
     translateAll,
     translateSlot,
@@ -3733,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}`;
 }
@@ -3805,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(
@@ -3852,17 +4082,19 @@ 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,
-  useRef as useRef2,
+  useMemo as useMemo7,
+  useRef as useRef3,
   useState as useState6
 } from "react";
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -4378,8 +4610,8 @@ function ContextFormRenderer({
   const i18n = useFormEngineI18n();
   const isProviderValue = useContext4(FormEngineI18nProviderScopeContext);
   const prefix = useId().replace(/:/g, "");
-  const formRef = useRef2(null);
-  const loadedDraftKey = useRef2(null);
+  const formRef = useRef3(null);
+  const loadedDraftKey = useRef3(null);
   const [draftRestored, setDraftRestored] = useState6(false);
   const [currentPageIndex, setCurrentPageIndex] = useState6(0);
   const [focusFieldId, setFocusFieldId] = useState6(null);
@@ -4389,20 +4621,20 @@ function ContextFormRenderer({
   const [receipt, setReceipt] = useState6(null);
   const [completionData, setCompletionData] = useState6(null);
   const [receiptLoaded, setReceiptLoaded] = useState6(receiptStore === void 0);
-  const rendererSubmissionInFlight = useRef2(false);
-  const fallbackAttemptId = useRef2(null);
-  const completionRef = useRef2(null);
-  const confirmationRef = useRef2(null);
+  const rendererSubmissionInFlight = useRef3(false);
+  const fallbackAttemptId = useRef3(null);
+  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]
   );
@@ -4411,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;
@@ -4420,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();
   }, []);
@@ -4635,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) {
@@ -4644,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;
       }
@@ -4945,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),
@@ -5029,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,
@@ -5037,7 +5276,7 @@ export {
   FormEngineI18nProvider,
   FormProvider,
   FormRenderer,
-  FormSubmissionError,
+  FormSubmissionError3 as FormSubmissionError,
   createLocalStorageSubmissionAttemptStore,
   createLocalStorageSubmissionReceiptStore,
   isTranslationUnresolved,
@@ -5052,6 +5291,7 @@ export {
   useFormBuilder,
   useFormEngineI18n,
   useSubmissionReceipts,
+  useTranslationComparison,
   useTranslationWorkspace,
   validateLocalePipeline
 };

package/package.json

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