@form-engine-ts/react 6.1.0 → 6.2.0

package/README.md

@@ -89,13 +89,16 @@ underscore-separated values such as `EN_us` are accepted as compatibility input.
 Use `isAddLocaleAllowed` to disable locale controls before submission. Removing a locale also clears its
 localized values and metadata; the default locale remains protected.
 
-`useTranslationWorkspace` can notify `onTranslationStart`, `onTranslationSuccess`, `onTranslationError`, and
-`onTranslationChange` with typed lifecycle payloads. The MUI workspace accepts a `confirmRemoveLocale` slot for an
-async confirmation UI; its `onConfirm` callback completes the locale removal.
+`useTranslationWorkspace` accepts either a synchronous or asynchronous translation adapter, forwards an optional
+`AbortSignal`, and exposes `cancelTranslation`, progress, and typed partial-failure/cancellation errors. It can notify
+`onTranslationStart`, `onTranslationSuccess`, `onTranslationReport`, `onTranslationError`, and `onTranslationChange`
+with typed lifecycle payloads. The MUI workspace accepts a `confirmRemoveLocale` slot for an async confirmation UI;
+its `onConfirm` callback completes the locale removal.
 
 `useTranslationComparison` provides a focused, controlled comparison model for form, page, field, and option text.
 Its items expose source text, target text, status, canonical metadata, and path-based `updateTranslation`,
-`translateSingle`, and `translateAll` actions.
+`translateSingle`, and `translateAll` actions. Comparison row slots receive locale labels, read-only state, field type,
+question and option indexes, plus async single-translation actions.
 
 Wrap a builder or renderer in `FormEngineI18nProvider` to supply a UI locale and typed Core translator independently
 from the schema's `defaultLocale` and `supportedLocales`:

package/dist/index.cjs

@@ -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,7 +3935,9 @@ function useTranslationWorkspace({
     setTranslation,
     translateAll,
     translateSlot,
+    cancelTranslation,
     isTranslating,
+    ...progress === void 0 ? {} : { progress },
     ...error === void 0 ? {} : { error }
   };
 }
@@ -3869,6 +3947,7 @@ 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,
@@ -3876,7 +3955,10 @@ function canonicalMetadata(metadata, sourceText, sourceLocale, translatedText) {
       ...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"
@@ -3938,7 +4020,10 @@ function useTranslationComparison({
   translationAdapter,
   readOnly = false,
   onChange,
-  onTranslationChange
+  onTranslationChange,
+  onTranslationReport,
+  onTranslationError,
+  signal
 }) {
   const workspace = useTranslationWorkspace({
     schema,
@@ -3947,8 +4032,12 @@ function useTranslationComparison({
     ...translationAdapter === void 0 ? {} : { translationAdapter },
     readOnly,
     ...onChange === void 0 ? {} : { onChange },
-    ...onTranslationChange === void 0 ? {} : { onTranslationChange }
+    ...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]
@@ -3970,11 +4059,17 @@ function useTranslationComparison({
     },
     [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]);
+  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,
@@ -3983,7 +4078,11 @@ function useTranslationComparison({
     isTranslating: workspace.isTranslating,
     updateTranslation,
     translateSingle,
-    translateAll
+    translateAll,
+    cancelTranslation: workspace.cancelTranslation,
+    ...workspace.progress === void 0 ? {} : { progress: workspace.progress },
+    ...workspace.error === void 0 ? {} : { error: workspace.error },
+    ...report === void 0 ? {} : { report }
   };
 }
 

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as _form_engine_ts_core from '@form-engine-ts/core';
-import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, Question, FieldOption, TranslationReport, ValidationIssue, ValidationError, FormValues, LocaleOption, TranslationStatus, CanonicalTranslationMetadata, TranslationSlot, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, FormValue, AnswerValidationResult, FormEngineTranslator, FormEngineMessages, TranslationMissingKeyEvent, FieldType } from '@form-engine-ts/core';
+import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, TranslationAdapter, AsyncTranslationAdapter, LocaleOption, TranslationReport, TranslationSlot, PopulateTranslationOptions, TranslationProgress, Question, FieldOption, ValidationIssue, ValidationError, FormValues, TranslationStatus, CanonicalTranslationMetadata, FormValue, AnswerValidationResult, FormEngineTranslator, FormEngineMessages, TranslationMissingKeyEvent, FieldType } from '@form-engine-ts/core';
 export { FormSubmissionError, FormSubmissionSerializedError, QuestionType } from '@form-engine-ts/core';
 import * as react from 'react';
 import { ReactNode, ComponentType, KeyboardEvent, MouseEvent, CSSProperties } from 'react';
@@ -125,6 +125,127 @@ interface UseFormBuilderResult extends FormBuilderResult {
 }
 declare function useFormBuilder({ schema, onChange, policy, idFactory, factories, fieldEditorMode, activeFieldId: controlledActiveFieldId, defaultActiveFieldId, onActiveFieldChange }: FormBuilderOptions): FormBuilderResult;
 
+interface UseTranslationWorkspaceOptions {
+    readonly schema: FormSchema;
+    readonly onChange?: (schema: FormSchema) => void;
+    readonly sourceLocale?: string;
+    readonly targetLocale?: string;
+    readonly translationAdapter?: TranslationAdapter | AsyncTranslationAdapter;
+    readonly signal?: AbortSignal;
+    readonly readOnly?: boolean;
+    readonly policy?: FormPolicy;
+    readonly availableLocales?: readonly (string | LocaleOption)[];
+    readonly onLocaleAdded?: (locale: string) => void;
+    readonly onLocaleRemoved?: (locale: string) => void;
+    readonly onLocaleChange?: (targetLocale: string) => void;
+    readonly beforeRemoveLocale?: (locale: string, context: {
+        readonly slotCount: number;
+    }) => Promise<boolean> | boolean;
+    readonly confirmRemoveLocale?: (props: ConfirmRemoveLocaleSlotProps) => ReactNode;
+    readonly slots?: Pick<TranslationWorkspaceSlots, "confirmRemoveLocale">;
+    readonly onTranslationStart?: (params: {
+        readonly targetLocale: string;
+        readonly mode: "manual" | "automatic";
+    }) => void;
+    readonly onTranslationSuccess?: (payload: TranslationEventPayload) => void;
+    readonly onTranslationReport?: (report: TranslationReport) => void;
+    readonly onTranslationError?: (params: {
+        readonly targetLocale: string;
+        readonly error: TranslationWorkspaceError;
+    }) => void;
+    readonly onTranslationChange?: (event: TranslationSlotChangeEvent) => void;
+    readonly validateLocale?: ((locale: string, currentLocales: readonly string[]) => LocaleValidationResult) | CustomLocaleValidator;
+}
+interface LocaleValidationContext {
+    readonly locale: string;
+    readonly defaultLocale: string;
+    readonly currentLocales: readonly string[];
+    readonly policy?: FormPolicy;
+}
+type CustomLocaleValidator = (locale: string, context: LocaleValidationContext) => LocaleValidationResult | boolean | string | undefined | void;
+interface LocaleValidationResult {
+    readonly valid: boolean;
+    readonly error?: {
+        readonly type: "locale_not_allowed" | "max_locales_exceeded" | "invalid_locale_format" | "locale_already_exists" | "custom_validation_failed";
+        readonly message: string;
+    };
+}
+interface TranslationSummary {
+    readonly totalSlots: number;
+    readonly translatedCount: number;
+    readonly missingCount: number;
+    readonly staleCount: number;
+    readonly manualCount: number;
+    readonly completionPercentage: number;
+}
+type TranslationWorkspaceError = {
+    readonly type: "locale_not_allowed";
+    readonly locale: string;
+} | {
+    readonly type: "locale_already_exists";
+    readonly locale: string;
+} | {
+    readonly type: "invalid_locale_format";
+    readonly locale: string;
+} | {
+    readonly type: "max_locales_exceeded";
+    readonly max: number;
+    readonly current: number;
+} | {
+    readonly type: "read_only_mode";
+} | {
+    readonly type: "adapter_not_configured";
+} | {
+    readonly type: "target_locale_missing";
+} | {
+    readonly type: "translation_failed";
+    readonly message: string;
+    readonly cause?: unknown;
+} | {
+    readonly type: "partial_failure";
+    readonly succeeded: number;
+    readonly failed: number;
+} | {
+    readonly type: "cancelled";
+} | {
+    readonly type: "custom_validation_failed";
+    readonly message: string;
+};
+interface UseTranslationWorkspaceResult {
+    readonly sourceLocale: string;
+    readonly targetLocale: string;
+    readonly targetLocales: readonly string[];
+    readonly localeOptions: readonly LocaleOption[];
+    readonly setTargetLocale: (locale: string) => void;
+    readonly slots: readonly TranslationSlot[];
+    readonly summary: TranslationSummary;
+    readonly addLocale: (locale: string) => {
+        readonly success: boolean;
+        readonly error?: TranslationWorkspaceError;
+    };
+    readonly isAddLocaleAllowed: (locale: string) => boolean;
+    readonly removeLocale: (locale: string) => boolean | Promise<boolean>;
+    readonly removeLocaleConfirmation?: ReactNode;
+    readonly setTranslation: (slot: TranslationSlot, text: string) => void;
+    readonly translateAll: (options?: PopulateTranslationOptions) => Promise<{
+        readonly success: boolean;
+        readonly report?: TranslationReport;
+        readonly error?: TranslationWorkspaceError;
+    }>;
+    readonly translateSlot: (slot: TranslationSlot, options?: {
+        readonly signal?: AbortSignal;
+    }) => Promise<{
+        readonly success: boolean;
+        readonly error?: TranslationWorkspaceError;
+    }>;
+    readonly cancelTranslation: () => void;
+    readonly isTranslating: boolean;
+    readonly progress?: TranslationProgress;
+    readonly error?: TranslationWorkspaceError;
+}
+declare const validateLocalePipeline: (locale: string, schema: FormSchema, policy?: FormPolicy, customValidator?: ((locale: string, currentLocales: readonly string[]) => LocaleValidationResult) | CustomLocaleValidator, availableLocales?: readonly (string | LocaleOption)[]) => LocaleValidationResult;
+declare function useTranslationWorkspace({ schema, onChange, sourceLocale, targetLocale, translationAdapter, signal, readOnly, policy, availableLocales, onLocaleAdded, onLocaleRemoved, onLocaleChange, beforeRemoveLocale, confirmRemoveLocale, slots: workspaceSlots, onTranslationStart, onTranslationSuccess, onTranslationReport, onTranslationError, onTranslationChange, validateLocale }: UseTranslationWorkspaceOptions): UseTranslationWorkspaceResult;
+
 interface SubmissionReceipt {
     readonly formId: string;
     readonly formVersion: number;
@@ -396,6 +517,8 @@ interface TranslationWorkspaceHeaderProps {
     readonly onTranslateAll: () => void;
     readonly isTranslating: boolean;
     readonly readOnly: boolean;
+    readonly progress?: TranslationProgress;
+    readonly onCancel?: () => void;
 }
 interface TranslationSlotRowProps {
     readonly slot: _form_engine_ts_core.TranslationSlot;
@@ -429,21 +552,35 @@ interface TranslationComparisonHeaderProps {
     readonly onTranslateAll: () => void;
     readonly isTranslating: boolean;
     readonly readOnly: boolean;
+    readonly report?: TranslationReport;
+    readonly progress?: TranslationProgress;
+    readonly onCancel?: () => void;
 }
 interface TranslationComparisonItemRowProps {
     readonly item: TranslationComparisonItem;
+    readonly questionIndex?: number;
+    readonly fieldType?: string;
+    readonly optionIndex?: number;
+    readonly sourceLocaleLabel?: string;
+    readonly targetLocaleLabel?: string;
     readonly readOnly: boolean;
     readonly onChange: (text: string) => void;
-    readonly onTranslate: () => void;
+    readonly onTranslate: () => Promise<void>;
 }
 interface UseTranslationComparisonOptions {
     readonly schema: FormSchema;
     readonly sourceLocale?: string;
     readonly targetLocale: string;
-    readonly translationAdapter?: TranslationAdapter;
+    readonly translationAdapter?: TranslationAdapter | AsyncTranslationAdapter;
+    readonly signal?: AbortSignal;
     readonly readOnly?: boolean;
     readonly onChange?: (nextSchema: FormSchema) => void;
     readonly onTranslationChange?: (event: TranslationSlotChangeEvent) => void;
+    readonly onTranslationReport?: (report: TranslationReport) => void;
+    readonly onTranslationError?: (params: {
+        readonly targetLocale: string;
+        readonly error: TranslationWorkspaceError;
+    }) => void;
 }
 interface UseTranslationComparisonResult {
     readonly sourceLocale: string;
@@ -453,7 +590,11 @@ interface UseTranslationComparisonResult {
     readonly isTranslating: boolean;
     readonly updateTranslation: (path: string, text: string) => void;
     readonly translateSingle: (path: string) => Promise<void>;
-    readonly translateAll: () => Promise<TranslationReport>;
+    readonly translateAll: (options?: PopulateTranslationOptions) => Promise<TranslationReport>;
+    readonly cancelTranslation: () => void;
+    readonly progress?: TranslationProgress;
+    readonly error?: TranslationWorkspaceError;
+    readonly report?: TranslationReport;
 }
 interface LocaleSelectorProps {
     readonly targetLocale: string;
@@ -496,6 +637,7 @@ interface ConfirmRemoveLocaleSlotProps {
 interface TranslationWorkspaceSlots {
     readonly renderHeader?: (props: TranslationWorkspaceHeaderProps) => ReactNode;
     readonly renderSlotRow?: (props: TranslationSlotRowProps) => ReactNode;
+    readonly renderItemRow?: (props: TranslationComparisonItemRowProps) => ReactNode;
     readonly renderLocaleSelector?: (props: LocaleSelectorProps) => ReactNode;
     readonly renderStatusBadge?: (props: {
         readonly status: _form_engine_ts_core.TranslationStatus;
@@ -820,116 +962,7 @@ interface FieldState {
 }
 declare function useField(fieldId: string): FieldState;
 
-declare function useTranslationComparison({ schema, sourceLocale, targetLocale, translationAdapter, readOnly, onChange, onTranslationChange }: UseTranslationComparisonOptions): UseTranslationComparisonResult;
-
-interface UseTranslationWorkspaceOptions {
-    readonly schema: FormSchema;
-    readonly onChange?: (schema: FormSchema) => void;
-    readonly sourceLocale?: string;
-    readonly targetLocale?: string;
-    readonly translationAdapter?: TranslationAdapter | AsyncTranslationAdapter;
-    readonly readOnly?: boolean;
-    readonly policy?: FormPolicy;
-    readonly availableLocales?: readonly (string | LocaleOption)[];
-    readonly onLocaleAdded?: (locale: string) => void;
-    readonly onLocaleRemoved?: (locale: string) => void;
-    readonly onLocaleChange?: (targetLocale: string) => void;
-    readonly beforeRemoveLocale?: (locale: string, context: {
-        readonly slotCount: number;
-    }) => Promise<boolean> | boolean;
-    readonly confirmRemoveLocale?: (props: ConfirmRemoveLocaleSlotProps) => ReactNode;
-    readonly slots?: Pick<TranslationWorkspaceSlots, "confirmRemoveLocale">;
-    readonly onTranslationStart?: (params: {
-        readonly targetLocale: string;
-        readonly mode: "manual" | "automatic";
-    }) => void;
-    readonly onTranslationSuccess?: (payload: TranslationEventPayload) => void;
-    readonly onTranslationError?: (params: {
-        readonly targetLocale: string;
-        readonly error: TranslationWorkspaceError;
-    }) => void;
-    readonly onTranslationChange?: (event: TranslationSlotChangeEvent) => void;
-    readonly validateLocale?: ((locale: string, currentLocales: readonly string[]) => LocaleValidationResult) | CustomLocaleValidator;
-}
-interface LocaleValidationContext {
-    readonly locale: string;
-    readonly defaultLocale: string;
-    readonly currentLocales: readonly string[];
-    readonly policy?: FormPolicy;
-}
-type CustomLocaleValidator = (locale: string, context: LocaleValidationContext) => LocaleValidationResult | boolean | string | undefined | void;
-interface LocaleValidationResult {
-    readonly valid: boolean;
-    readonly error?: {
-        readonly type: "locale_not_allowed" | "max_locales_exceeded" | "invalid_locale_format" | "locale_already_exists" | "custom_validation_failed";
-        readonly message: string;
-    };
-}
-interface TranslationSummary {
-    readonly totalSlots: number;
-    readonly translatedCount: number;
-    readonly missingCount: number;
-    readonly staleCount: number;
-    readonly manualCount: number;
-    readonly completionPercentage: number;
-}
-type TranslationWorkspaceError = {
-    readonly type: "locale_not_allowed";
-    readonly locale: string;
-} | {
-    readonly type: "locale_already_exists";
-    readonly locale: string;
-} | {
-    readonly type: "invalid_locale_format";
-    readonly locale: string;
-} | {
-    readonly type: "max_locales_exceeded";
-    readonly max: number;
-    readonly current: number;
-} | {
-    readonly type: "read_only_mode";
-} | {
-    readonly type: "adapter_not_configured";
-} | {
-    readonly type: "target_locale_missing";
-} | {
-    readonly type: "translation_failed";
-    readonly message: string;
-    readonly cause?: unknown;
-} | {
-    readonly type: "custom_validation_failed";
-    readonly message: string;
-};
-interface UseTranslationWorkspaceResult {
-    readonly sourceLocale: string;
-    readonly targetLocale: string;
-    readonly targetLocales: readonly string[];
-    readonly localeOptions: readonly LocaleOption[];
-    readonly setTargetLocale: (locale: string) => void;
-    readonly slots: readonly TranslationSlot[];
-    readonly summary: TranslationSummary;
-    readonly addLocale: (locale: string) => {
-        readonly success: boolean;
-        readonly error?: TranslationWorkspaceError;
-    };
-    readonly isAddLocaleAllowed: (locale: string) => boolean;
-    readonly removeLocale: (locale: string) => boolean | Promise<boolean>;
-    readonly removeLocaleConfirmation?: ReactNode;
-    readonly setTranslation: (slot: TranslationSlot, text: string) => void;
-    readonly translateAll: (options?: PopulateTranslationOptions) => Promise<{
-        readonly success: boolean;
-        readonly report?: TranslationReport;
-        readonly error?: TranslationWorkspaceError;
-    }>;
-    readonly translateSlot: (slot: TranslationSlot) => Promise<{
-        readonly success: boolean;
-        readonly error?: TranslationWorkspaceError;
-    }>;
-    readonly isTranslating: boolean;
-    readonly error?: TranslationWorkspaceError;
-}
-declare const validateLocalePipeline: (locale: string, schema: FormSchema, policy?: FormPolicy, customValidator?: ((locale: string, currentLocales: readonly string[]) => LocaleValidationResult) | CustomLocaleValidator, availableLocales?: readonly (string | LocaleOption)[]) => LocaleValidationResult;
-declare function useTranslationWorkspace({ schema, onChange, sourceLocale, targetLocale, translationAdapter, readOnly, policy, availableLocales, onLocaleAdded, onLocaleRemoved, onLocaleChange, beforeRemoveLocale, confirmRemoveLocale, slots: workspaceSlots, onTranslationStart, onTranslationSuccess, onTranslationError, onTranslationChange, validateLocale }: UseTranslationWorkspaceOptions): UseTranslationWorkspaceResult;
+declare function useTranslationComparison({ schema, sourceLocale, targetLocale, translationAdapter, readOnly, onChange, onTranslationChange, onTranslationReport, onTranslationError, signal }: UseTranslationComparisonOptions): UseTranslationComparisonResult;
 
 declare const BUILDER_TRANSLATION_KEYS: {
     readonly ADD_FIELD: "builder.actions.addField";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _form_engine_ts_core from '@form-engine-ts/core';
-import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, Question, FieldOption, TranslationReport, ValidationIssue, ValidationError, FormValues, LocaleOption, TranslationStatus, CanonicalTranslationMetadata, TranslationSlot, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, FormValue, AnswerValidationResult, FormEngineTranslator, FormEngineMessages, TranslationMissingKeyEvent, FieldType } from '@form-engine-ts/core';
+import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, TranslationAdapter, AsyncTranslationAdapter, LocaleOption, TranslationReport, TranslationSlot, PopulateTranslationOptions, TranslationProgress, Question, FieldOption, ValidationIssue, ValidationError, FormValues, TranslationStatus, CanonicalTranslationMetadata, FormValue, AnswerValidationResult, FormEngineTranslator, FormEngineMessages, TranslationMissingKeyEvent, FieldType } from '@form-engine-ts/core';
 export { FormSubmissionError, FormSubmissionSerializedError, QuestionType } from '@form-engine-ts/core';
 import * as react from 'react';
 import { ReactNode, ComponentType, KeyboardEvent, MouseEvent, CSSProperties } from 'react';
@@ -125,6 +125,127 @@ interface UseFormBuilderResult extends FormBuilderResult {
 }
 declare function useFormBuilder({ schema, onChange, policy, idFactory, factories, fieldEditorMode, activeFieldId: controlledActiveFieldId, defaultActiveFieldId, onActiveFieldChange }: FormBuilderOptions): FormBuilderResult;
 
+interface UseTranslationWorkspaceOptions {
+    readonly schema: FormSchema;
+    readonly onChange?: (schema: FormSchema) => void;
+    readonly sourceLocale?: string;
+    readonly targetLocale?: string;
+    readonly translationAdapter?: TranslationAdapter | AsyncTranslationAdapter;
+    readonly signal?: AbortSignal;
+    readonly readOnly?: boolean;
+    readonly policy?: FormPolicy;
+    readonly availableLocales?: readonly (string | LocaleOption)[];
+    readonly onLocaleAdded?: (locale: string) => void;
+    readonly onLocaleRemoved?: (locale: string) => void;
+    readonly onLocaleChange?: (targetLocale: string) => void;
+    readonly beforeRemoveLocale?: (locale: string, context: {
+        readonly slotCount: number;
+    }) => Promise<boolean> | boolean;
+    readonly confirmRemoveLocale?: (props: ConfirmRemoveLocaleSlotProps) => ReactNode;
+    readonly slots?: Pick<TranslationWorkspaceSlots, "confirmRemoveLocale">;
+    readonly onTranslationStart?: (params: {
+        readonly targetLocale: string;
+        readonly mode: "manual" | "automatic";
+    }) => void;
+    readonly onTranslationSuccess?: (payload: TranslationEventPayload) => void;
+    readonly onTranslationReport?: (report: TranslationReport) => void;
+    readonly onTranslationError?: (params: {
+        readonly targetLocale: string;
+        readonly error: TranslationWorkspaceError;
+    }) => void;
+    readonly onTranslationChange?: (event: TranslationSlotChangeEvent) => void;
+    readonly validateLocale?: ((locale: string, currentLocales: readonly string[]) => LocaleValidationResult) | CustomLocaleValidator;
+}
+interface LocaleValidationContext {
+    readonly locale: string;
+    readonly defaultLocale: string;
+    readonly currentLocales: readonly string[];
+    readonly policy?: FormPolicy;
+}
+type CustomLocaleValidator = (locale: string, context: LocaleValidationContext) => LocaleValidationResult | boolean | string | undefined | void;
+interface LocaleValidationResult {
+    readonly valid: boolean;
+    readonly error?: {
+        readonly type: "locale_not_allowed" | "max_locales_exceeded" | "invalid_locale_format" | "locale_already_exists" | "custom_validation_failed";
+        readonly message: string;
+    };
+}
+interface TranslationSummary {
+    readonly totalSlots: number;
+    readonly translatedCount: number;
+    readonly missingCount: number;
+    readonly staleCount: number;
+    readonly manualCount: number;
+    readonly completionPercentage: number;
+}
+type TranslationWorkspaceError = {
+    readonly type: "locale_not_allowed";
+    readonly locale: string;
+} | {
+    readonly type: "locale_already_exists";
+    readonly locale: string;
+} | {
+    readonly type: "invalid_locale_format";
+    readonly locale: string;
+} | {
+    readonly type: "max_locales_exceeded";
+    readonly max: number;
+    readonly current: number;
+} | {
+    readonly type: "read_only_mode";
+} | {
+    readonly type: "adapter_not_configured";
+} | {
+    readonly type: "target_locale_missing";
+} | {
+    readonly type: "translation_failed";
+    readonly message: string;
+    readonly cause?: unknown;
+} | {
+    readonly type: "partial_failure";
+    readonly succeeded: number;
+    readonly failed: number;
+} | {
+    readonly type: "cancelled";
+} | {
+    readonly type: "custom_validation_failed";
+    readonly message: string;
+};
+interface UseTranslationWorkspaceResult {
+    readonly sourceLocale: string;
+    readonly targetLocale: string;
+    readonly targetLocales: readonly string[];
+    readonly localeOptions: readonly LocaleOption[];
+    readonly setTargetLocale: (locale: string) => void;
+    readonly slots: readonly TranslationSlot[];
+    readonly summary: TranslationSummary;
+    readonly addLocale: (locale: string) => {
+        readonly success: boolean;
+        readonly error?: TranslationWorkspaceError;
+    };
+    readonly isAddLocaleAllowed: (locale: string) => boolean;
+    readonly removeLocale: (locale: string) => boolean | Promise<boolean>;
+    readonly removeLocaleConfirmation?: ReactNode;
+    readonly setTranslation: (slot: TranslationSlot, text: string) => void;
+    readonly translateAll: (options?: PopulateTranslationOptions) => Promise<{
+        readonly success: boolean;
+        readonly report?: TranslationReport;
+        readonly error?: TranslationWorkspaceError;
+    }>;
+    readonly translateSlot: (slot: TranslationSlot, options?: {
+        readonly signal?: AbortSignal;
+    }) => Promise<{
+        readonly success: boolean;
+        readonly error?: TranslationWorkspaceError;
+    }>;
+    readonly cancelTranslation: () => void;
+    readonly isTranslating: boolean;
+    readonly progress?: TranslationProgress;
+    readonly error?: TranslationWorkspaceError;
+}
+declare const validateLocalePipeline: (locale: string, schema: FormSchema, policy?: FormPolicy, customValidator?: ((locale: string, currentLocales: readonly string[]) => LocaleValidationResult) | CustomLocaleValidator, availableLocales?: readonly (string | LocaleOption)[]) => LocaleValidationResult;
+declare function useTranslationWorkspace({ schema, onChange, sourceLocale, targetLocale, translationAdapter, signal, readOnly, policy, availableLocales, onLocaleAdded, onLocaleRemoved, onLocaleChange, beforeRemoveLocale, confirmRemoveLocale, slots: workspaceSlots, onTranslationStart, onTranslationSuccess, onTranslationReport, onTranslationError, onTranslationChange, validateLocale }: UseTranslationWorkspaceOptions): UseTranslationWorkspaceResult;
+
 interface SubmissionReceipt {
     readonly formId: string;
     readonly formVersion: number;
@@ -396,6 +517,8 @@ interface TranslationWorkspaceHeaderProps {
     readonly onTranslateAll: () => void;
     readonly isTranslating: boolean;
     readonly readOnly: boolean;
+    readonly progress?: TranslationProgress;
+    readonly onCancel?: () => void;
 }
 interface TranslationSlotRowProps {
     readonly slot: _form_engine_ts_core.TranslationSlot;
@@ -429,21 +552,35 @@ interface TranslationComparisonHeaderProps {
     readonly onTranslateAll: () => void;
     readonly isTranslating: boolean;
     readonly readOnly: boolean;
+    readonly report?: TranslationReport;
+    readonly progress?: TranslationProgress;
+    readonly onCancel?: () => void;
 }
 interface TranslationComparisonItemRowProps {
     readonly item: TranslationComparisonItem;
+    readonly questionIndex?: number;
+    readonly fieldType?: string;
+    readonly optionIndex?: number;
+    readonly sourceLocaleLabel?: string;
+    readonly targetLocaleLabel?: string;
     readonly readOnly: boolean;
     readonly onChange: (text: string) => void;
-    readonly onTranslate: () => void;
+    readonly onTranslate: () => Promise<void>;
 }
 interface UseTranslationComparisonOptions {
     readonly schema: FormSchema;
     readonly sourceLocale?: string;
     readonly targetLocale: string;
-    readonly translationAdapter?: TranslationAdapter;
+    readonly translationAdapter?: TranslationAdapter | AsyncTranslationAdapter;
+    readonly signal?: AbortSignal;
     readonly readOnly?: boolean;
     readonly onChange?: (nextSchema: FormSchema) => void;
     readonly onTranslationChange?: (event: TranslationSlotChangeEvent) => void;
+    readonly onTranslationReport?: (report: TranslationReport) => void;
+    readonly onTranslationError?: (params: {
+        readonly targetLocale: string;
+        readonly error: TranslationWorkspaceError;
+    }) => void;
 }
 interface UseTranslationComparisonResult {
     readonly sourceLocale: string;
@@ -453,7 +590,11 @@ interface UseTranslationComparisonResult {
     readonly isTranslating: boolean;
     readonly updateTranslation: (path: string, text: string) => void;
     readonly translateSingle: (path: string) => Promise<void>;
-    readonly translateAll: () => Promise<TranslationReport>;
+    readonly translateAll: (options?: PopulateTranslationOptions) => Promise<TranslationReport>;
+    readonly cancelTranslation: () => void;
+    readonly progress?: TranslationProgress;
+    readonly error?: TranslationWorkspaceError;
+    readonly report?: TranslationReport;
 }
 interface LocaleSelectorProps {
     readonly targetLocale: string;
@@ -496,6 +637,7 @@ interface ConfirmRemoveLocaleSlotProps {
 interface TranslationWorkspaceSlots {
     readonly renderHeader?: (props: TranslationWorkspaceHeaderProps) => ReactNode;
     readonly renderSlotRow?: (props: TranslationSlotRowProps) => ReactNode;
+    readonly renderItemRow?: (props: TranslationComparisonItemRowProps) => ReactNode;
     readonly renderLocaleSelector?: (props: LocaleSelectorProps) => ReactNode;
     readonly renderStatusBadge?: (props: {
         readonly status: _form_engine_ts_core.TranslationStatus;
@@ -820,116 +962,7 @@ interface FieldState {
 }
 declare function useField(fieldId: string): FieldState;
 
-declare function useTranslationComparison({ schema, sourceLocale, targetLocale, translationAdapter, readOnly, onChange, onTranslationChange }: UseTranslationComparisonOptions): UseTranslationComparisonResult;
-
-interface UseTranslationWorkspaceOptions {
-    readonly schema: FormSchema;
-    readonly onChange?: (schema: FormSchema) => void;
-    readonly sourceLocale?: string;
-    readonly targetLocale?: string;
-    readonly translationAdapter?: TranslationAdapter | AsyncTranslationAdapter;
-    readonly readOnly?: boolean;
-    readonly policy?: FormPolicy;
-    readonly availableLocales?: readonly (string | LocaleOption)[];
-    readonly onLocaleAdded?: (locale: string) => void;
-    readonly onLocaleRemoved?: (locale: string) => void;
-    readonly onLocaleChange?: (targetLocale: string) => void;
-    readonly beforeRemoveLocale?: (locale: string, context: {
-        readonly slotCount: number;
-    }) => Promise<boolean> | boolean;
-    readonly confirmRemoveLocale?: (props: ConfirmRemoveLocaleSlotProps) => ReactNode;
-    readonly slots?: Pick<TranslationWorkspaceSlots, "confirmRemoveLocale">;
-    readonly onTranslationStart?: (params: {
-        readonly targetLocale: string;
-        readonly mode: "manual" | "automatic";
-    }) => void;
-    readonly onTranslationSuccess?: (payload: TranslationEventPayload) => void;
-    readonly onTranslationError?: (params: {
-        readonly targetLocale: string;
-        readonly error: TranslationWorkspaceError;
-    }) => void;
-    readonly onTranslationChange?: (event: TranslationSlotChangeEvent) => void;
-    readonly validateLocale?: ((locale: string, currentLocales: readonly string[]) => LocaleValidationResult) | CustomLocaleValidator;
-}
-interface LocaleValidationContext {
-    readonly locale: string;
-    readonly defaultLocale: string;
-    readonly currentLocales: readonly string[];
-    readonly policy?: FormPolicy;
-}
-type CustomLocaleValidator = (locale: string, context: LocaleValidationContext) => LocaleValidationResult | boolean | string | undefined | void;
-interface LocaleValidationResult {
-    readonly valid: boolean;
-    readonly error?: {
-        readonly type: "locale_not_allowed" | "max_locales_exceeded" | "invalid_locale_format" | "locale_already_exists" | "custom_validation_failed";
-        readonly message: string;
-    };
-}
-interface TranslationSummary {
-    readonly totalSlots: number;
-    readonly translatedCount: number;
-    readonly missingCount: number;
-    readonly staleCount: number;
-    readonly manualCount: number;
-    readonly completionPercentage: number;
-}
-type TranslationWorkspaceError = {
-    readonly type: "locale_not_allowed";
-    readonly locale: string;
-} | {
-    readonly type: "locale_already_exists";
-    readonly locale: string;
-} | {
-    readonly type: "invalid_locale_format";
-    readonly locale: string;
-} | {
-    readonly type: "max_locales_exceeded";
-    readonly max: number;
-    readonly current: number;
-} | {
-    readonly type: "read_only_mode";
-} | {
-    readonly type: "adapter_not_configured";
-} | {
-    readonly type: "target_locale_missing";
-} | {
-    readonly type: "translation_failed";
-    readonly message: string;
-    readonly cause?: unknown;
-} | {
-    readonly type: "custom_validation_failed";
-    readonly message: string;
-};
-interface UseTranslationWorkspaceResult {
-    readonly sourceLocale: string;
-    readonly targetLocale: string;
-    readonly targetLocales: readonly string[];
-    readonly localeOptions: readonly LocaleOption[];
-    readonly setTargetLocale: (locale: string) => void;
-    readonly slots: readonly TranslationSlot[];
-    readonly summary: TranslationSummary;
-    readonly addLocale: (locale: string) => {
-        readonly success: boolean;
-        readonly error?: TranslationWorkspaceError;
-    };
-    readonly isAddLocaleAllowed: (locale: string) => boolean;
-    readonly removeLocale: (locale: string) => boolean | Promise<boolean>;
-    readonly removeLocaleConfirmation?: ReactNode;
-    readonly setTranslation: (slot: TranslationSlot, text: string) => void;
-    readonly translateAll: (options?: PopulateTranslationOptions) => Promise<{
-        readonly success: boolean;
-        readonly report?: TranslationReport;
-        readonly error?: TranslationWorkspaceError;
-    }>;
-    readonly translateSlot: (slot: TranslationSlot) => Promise<{
-        readonly success: boolean;
-        readonly error?: TranslationWorkspaceError;
-    }>;
-    readonly isTranslating: boolean;
-    readonly error?: TranslationWorkspaceError;
-}
-declare const validateLocalePipeline: (locale: string, schema: FormSchema, policy?: FormPolicy, customValidator?: ((locale: string, currentLocales: readonly string[]) => LocaleValidationResult) | CustomLocaleValidator, availableLocales?: readonly (string | LocaleOption)[]) => LocaleValidationResult;
-declare function useTranslationWorkspace({ schema, onChange, sourceLocale, targetLocale, translationAdapter, readOnly, policy, availableLocales, onLocaleAdded, onLocaleRemoved, onLocaleChange, beforeRemoveLocale, confirmRemoveLocale, slots: workspaceSlots, onTranslationStart, onTranslationSuccess, onTranslationError, onTranslationChange, validateLocale }: UseTranslationWorkspaceOptions): UseTranslationWorkspaceResult;
+declare function useTranslationComparison({ schema, sourceLocale, targetLocale, translationAdapter, readOnly, onChange, onTranslationChange, onTranslationReport, onTranslationError, signal }: UseTranslationComparisonOptions): UseTranslationComparisonResult;
 
 declare const BUILDER_TRANSLATION_KEYS: {
     readonly ADD_FIELD: "builder.actions.addField";

package/dist/index.js

@@ -3274,7 +3274,7 @@ function useField(fieldId) {
 
 // src/hooks/useTranslationComparison.ts
 import { computeSourceTextHash as computeSourceTextHash2 } from "@form-engine-ts/core";
-import { useCallback as useCallback4, useMemo as useMemo5 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo5, useState as useState5 } from "react";
 
 // src/hooks/useTranslationWorkspace.ts
 import {
@@ -3465,6 +3465,7 @@ function useTranslationWorkspace({
   sourceLocale = schema.defaultLocale ?? "en",
   targetLocale,
   translationAdapter,
+  signal,
   readOnly = false,
   policy,
   availableLocales,
@@ -3476,6 +3477,7 @@ function useTranslationWorkspace({
   slots: workspaceSlots,
   onTranslationStart,
   onTranslationSuccess,
+  onTranslationReport,
   onTranslationError,
   onTranslationChange,
   validateLocale
@@ -3483,8 +3485,10 @@ function useTranslationWorkspace({
   const [draftSchema, setDraftSchema] = useState4(schema);
   const [selectedLocale, setSelectedLocale] = useState4(normalizeLocale(targetLocale ?? "") ?? targetLocale ?? "");
   const [isTranslating, setIsTranslating] = useState4(false);
+  const [progress, setProgress] = useState4();
   const [error, setError] = useState4();
   const [pendingRemoval, setPendingRemoval] = useState4();
+  const activeAbortController = useRef2(void 0);
   const pendingRemovalResolver = useRef2(void 0);
   const currentSchema = onChange === void 0 ? draftSchema : schema;
   const confirmRemoveLocaleRenderer = confirmRemoveLocale ?? workspaceSlots?.confirmRemoveLocale;
@@ -3724,7 +3728,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 populateSchemaTranslations2(
           currentSchema,
@@ -3733,13 +3745,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 = 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,
@@ -3750,6 +3785,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),
@@ -3759,6 +3800,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);
       }
     },
@@ -3770,14 +3816,19 @@ function useTranslationWorkspace({
       onTranslationError,
       onTranslationStart,
       onTranslationSuccess,
+      onTranslationReport,
       readOnly,
       slots,
       sourceLocale,
-      translationAdapter
+      translationAdapter,
+      signal
     ]
   );
+  const cancelTranslation = useCallback3(() => {
+    activeAbortController.current?.abort(new DOMException("The translation was cancelled.", "AbortError"));
+  }, []);
   const translateSlot = useCallback3(
-    async (slot) => {
+    async (slot, options = {}) => {
       if (translationAdapter === void 0) {
         const workspaceError = { type: "adapter_not_configured" };
         setError(workspaceError);
@@ -3790,8 +3841,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?.({
@@ -3801,8 +3865,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),
@@ -3811,10 +3882,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,
@@ -3835,7 +3911,9 @@ function useTranslationWorkspace({
     setTranslation,
     translateAll,
     translateSlot,
+    cancelTranslation,
     isTranslating,
+    ...progress === void 0 ? {} : { progress },
     ...error === void 0 ? {} : { error }
   };
 }
@@ -3845,6 +3923,7 @@ 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,
@@ -3852,7 +3931,10 @@ function canonicalMetadata(metadata, sourceText, sourceLocale, translatedText) {
       ...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: computeSourceTextHash2(sourceText),
     translationSource: metadata?.isManual === true || metadata?.isManuallyEdited === true || metadata?.translationSource === "manual" ? "manual" : "automatic"
@@ -3914,7 +3996,10 @@ function useTranslationComparison({
   translationAdapter,
   readOnly = false,
   onChange,
-  onTranslationChange
+  onTranslationChange,
+  onTranslationReport,
+  onTranslationError,
+  signal
 }) {
   const workspace = useTranslationWorkspace({
     schema,
@@ -3923,8 +4008,12 @@ function useTranslationComparison({
     ...translationAdapter === void 0 ? {} : { translationAdapter },
     readOnly,
     ...onChange === void 0 ? {} : { onChange },
-    ...onTranslationChange === void 0 ? {} : { onTranslationChange }
+    ...onTranslationChange === void 0 ? {} : { onTranslationChange },
+    ...onTranslationReport === void 0 ? {} : { onTranslationReport },
+    ...onTranslationError === void 0 ? {} : { onTranslationError },
+    ...signal === void 0 ? {} : { signal }
   });
+  const [report, setReport] = useState5();
   const items = useMemo5(
     () => workspace.slots.map((slot) => comparisonItem(schema, slot, sourceLocale, translationAdapter !== void 0)),
     [schema, sourceLocale, translationAdapter, workspace.slots]
@@ -3946,11 +4035,17 @@ function useTranslationComparison({
     },
     [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]);
+  const translateAll = useCallback4(
+    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,
@@ -3959,12 +4054,16 @@ function useTranslationComparison({
     isTranslating: workspace.isTranslating,
     updateTranslation,
     translateSingle,
-    translateAll
+    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
-import { useEffect as useEffect2, useMemo as useMemo6, useState as useState5 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo6, useState as useState6 } from "react";
 function submissionReceiptQueryKey(formId, formVersion) {
   return `${formId}:v${formVersion}`;
 }
@@ -4042,7 +4141,7 @@ function useSubmissionReceipts(store, queries) {
       (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] = useState5({
+  const [state, setState] = useState6({
     receipts: /* @__PURE__ */ new Map(),
     isLoading: stableQueries.length > 0,
     error: null
@@ -4095,7 +4194,7 @@ import {
   useId,
   useMemo as useMemo7,
   useRef as useRef3,
-  useState as useState6
+  useState as useState7
 } from "react";
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var isChoiceFieldType = (type) => type === "radio" || type === "checkbox" || type === "multi-select" || type === "select";
@@ -4612,15 +4711,15 @@ function ContextFormRenderer({
   const prefix = useId().replace(/:/g, "");
   const formRef = useRef3(null);
   const loadedDraftKey = useRef3(null);
-  const [draftRestored, setDraftRestored] = useState6(false);
-  const [currentPageIndex, setCurrentPageIndex] = useState6(0);
-  const [focusFieldId, setFocusFieldId] = useState6(null);
-  const [confirmation, setConfirmation] = useState6(null);
-  const [guardMessage, setGuardMessage] = useState6(null);
-  const [guardsPending, setGuardsPending] = useState6(false);
-  const [receipt, setReceipt] = useState6(null);
-  const [completionData, setCompletionData] = useState6(null);
-  const [receiptLoaded, setReceiptLoaded] = useState6(receiptStore === void 0);
+  const [draftRestored, setDraftRestored] = useState7(false);
+  const [currentPageIndex, setCurrentPageIndex] = useState7(0);
+  const [focusFieldId, setFocusFieldId] = useState7(null);
+  const [confirmation, setConfirmation] = useState7(null);
+  const [guardMessage, setGuardMessage] = useState7(null);
+  const [guardsPending, setGuardsPending] = useState7(false);
+  const [receipt, setReceipt] = useState7(null);
+  const [completionData, setCompletionData] = useState7(null);
+  const [receiptLoaded, setReceiptLoaded] = useState7(receiptStore === void 0);
   const rendererSubmissionInFlight = useRef3(false);
   const fallbackAttemptId = useRef3(null);
   const completionRef = useRef3(null);

package/package.json

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