@form-engine-ts/mui 5.0.1 → 5.1.0

package/dist/index.cjs

@@ -1546,10 +1546,16 @@ function normalizeLocaleOptions(options, getLocaleLabel) {
   const seen = /* @__PURE__ */ new Set();
   const normalized = [];
   for (const item of options) {
-    const value = typeof item === "string" ? item : item.value;
+    const value = typeof item === "string" ? item : "value" in item ? item.value : item.locale;
     if (value.length === 0 || seen.has(value)) continue;
     seen.add(value);
-    normalized.push({ value, label: typeof item === "string" ? getLocaleLabel?.(value) ?? value : item.label });
+    normalized.push({
+      value,
+      label: typeof item === "string" ? getLocaleLabel?.(value) ?? value : item.label,
+      ...typeof item === "string" || item.translatable === void 0 ? {} : { translatable: item.translatable },
+      ...typeof item === "string" || item.removable === void 0 ? {} : { removable: item.removable },
+      ...typeof item === "string" || item.metadata === void 0 ? {} : { metadata: item.metadata }
+    });
   }
   return normalized;
 }
@@ -1592,6 +1598,8 @@ function createMuiLocalizationSlot(options) {
     const hasLocaleSelector = filteredAvailableLocales !== void 0;
     const localeLimitReached = policy?.maxLocales !== void 0 && registeredLocales.size >= policy.maxLocales;
     const normalizedLocale = newLocale.trim();
+    const currentLocaleOption = availableLocaleOptions?.find((locale) => locale.value === currentLocale);
+    const currentLocaleTranslatable = currentLocaleOption?.translatable !== false;
     const selectedLocaleAvailable = !hasLocaleSelector || filteredAvailableLocales.some((locale) => locale.value === normalizedLocale);
     const localeAllowed = policy?.allowedLocales === void 0 || policy.allowedLocales.includes(normalizedLocale);
     const canAddLocale = !readOnly && normalizedLocale.length > 0 && selectedLocaleAvailable && localeAllowed && !registeredLocales.has(normalizedLocale) && !localeLimitReached;
@@ -1757,7 +1765,7 @@ function createMuiLocalizationSlot(options) {
         {
           variant: "secondary",
           noWrap: localizationOptions.noWrapActions ?? true,
-          disabled: readOnly || !editingLocaleConfigured || isTranslating,
+          disabled: readOnly || !editingLocaleConfigured || isTranslating || !currentLocaleTranslatable,
           onClick: onAutoTranslate,
           children: isTranslating ? translate("builder.translating") : translate("builder.autoTranslate")
         }
@@ -1895,6 +1903,7 @@ function MuiFormBuilder({
   muiSlotProps,
   components: customComponents,
   slots: customSlots,
+  i18n,
   sectionOrder,
   ...props
 }) {
@@ -1906,7 +1915,14 @@ function MuiFormBuilder({
     }),
     [layoutOptions, localizationOptions, muiOptions, muiSlotProps]
   );
-  const contextValue = (0, import_react5.useMemo)(() => ({ options: contextOptions }), [contextOptions]);
+  const resolvedMuiOptions = (0, import_react5.useMemo)(
+    () => mergeMuiAdapterOptions(contextOptions, {
+      ...i18n?.getLocaleLabel === void 0 ? {} : { getLocaleLabel: i18n.getLocaleLabel },
+      ...i18n?.getActionLabel === void 0 ? {} : { getActionLabel: i18n.getActionLabel }
+    }),
+    [contextOptions, i18n?.getActionLabel, i18n?.getLocaleLabel]
+  );
+  const contextValue = (0, import_react5.useMemo)(() => ({ options: resolvedMuiOptions }), [resolvedMuiOptions]);
   const components = (0, import_react5.useMemo)(() => ({ ...muiBuilderComponents, ...customComponents }), [customComponents]);
   const slots = (0, import_react5.useMemo)(() => ({ ...muiBuilderSlots, ...customSlots }), [customSlots]);
   const placement = contextOptions.localizationOptions?.placement;
@@ -1927,7 +1943,7 @@ function MuiFormBuilder({
     );
     return order;
   })();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MuiFormBuilderContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MuiFormBuilderContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_react4.FormBuilder,
     {
       ...props,
@@ -1938,6 +1954,17 @@ function MuiFormBuilder({
       ...submissionSettingsOptions === void 0 ? {} : { submissionSettingsOptions }
     }
   ) });
+  if (i18n === void 0) return content;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_react4.FormEngineI18nProvider,
+    {
+      ...i18n.locale === void 0 ? {} : { locale: i18n.locale },
+      ...i18n.fallbackLocale === void 0 ? {} : { fallbackLocale: i18n.fallbackLocale },
+      ...i18n.messages === void 0 ? {} : { messages: i18n.messages },
+      ...i18n.translator === void 0 ? {} : { translator: i18n.translator },
+      children: content
+    }
+  );
 }
 
 // src/workspace/TranslationWorkspace.tsx
@@ -1945,28 +1972,31 @@ var import_react6 = require("@form-engine-ts/react");
 var import_material16 = require("@mui/material");
 var import_react7 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var statusLabel = {
-  missing: "Missing",
-  translated: "Translated",
-  stale: "Source changed",
-  manual: "Manual",
-  "manual-stale": "Manual / source changed"
+var statusKey = {
+  missing: "workspace.status.missing",
+  translated: "workspace.status.translated",
+  stale: "workspace.status.stale",
+  manual: "workspace.status.manual",
+  "manual-stale": "workspace.status.manualStale"
 };
 function SlotCard({
   slot,
   readOnly,
   onChange,
-  onTranslate
+  onTranslate,
+  translate,
+  renderStatusBadge
 }) {
+  const status = slot.status ?? "missing";
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Card, { variant: "outlined", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material16.Stack, { spacing: 1.5, children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material16.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Typography, { variant: "subtitle2", children: slot.path }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Chip, { size: "small", label: statusLabel[slot.status ?? "missing"] })
+      renderStatusBadge?.({ status }) ?? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Chip, { size: "small", label: translate(statusKey[status]) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       import_material16.TextField,
       {
-        label: "Source",
+        label: translate("workspace.slot.sourceText"),
         value: slot.sourceText,
         multiline: true,
         fullWidth: true,
@@ -1976,7 +2006,7 @@ function SlotCard({
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       import_material16.TextField,
       {
-        label: "Translation",
+        label: translate("workspace.slot.translatedText"),
         value: slot.existingText ?? "",
         multiline: true,
         fullWidth: true,
@@ -1984,28 +2014,28 @@ function SlotCard({
         onChange: (event) => onChange(event.target.value)
       }
     ),
-    slot.status === "stale" || slot.status === "manual-stale" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Typography, { color: "warning.main", variant: "body2", children: "The source text has changed since this translation was created." }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Button, { variant: "outlined", onClick: onTranslate, disabled: readOnly, children: "Translate this slot" })
+    slot.status === "stale" || slot.status === "manual-stale" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Typography, { color: "warning.main", variant: "body2", children: translate("workspace.status.stale") }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Button, { variant: "outlined", onClick: onTranslate, disabled: readOnly, children: translate("workspace.slot.translateSingle") })
   ] }) }) });
 }
-function workspaceErrorMessage(error) {
+function workspaceErrorMessage(error, translate) {
   switch (error.type) {
     case "locale_not_allowed":
-      return `Locale "${error.locale}" is not allowed.`;
+      return translate("workspace.errors.localeNotAllowed", { locale: error.locale });
     case "locale_already_exists":
-      return `Locale "${error.locale}" is already registered.`;
+      return translate("workspace.errors.localeNotAllowed", { locale: error.locale });
     case "invalid_locale_format":
-      return `Invalid locale format: "${error.locale}"`;
+      return translate("workspace.errors.localeNotAllowed", { locale: error.locale });
     case "max_locales_exceeded":
-      return `At most ${error.max} locales are allowed.`;
+      return translate("workspace.errors.maxLocalesExceeded", { max: error.max });
     case "read_only_mode":
-      return "This workspace is read-only.";
+      return translate("workspace.errors.readOnly");
     case "adapter_not_configured":
-      return "A translation adapter is not configured.";
+      return translate("workspace.errors.adapterNotConfigured");
     case "target_locale_missing":
-      return "A target locale is required.";
+      return translate("workspace.empty.noTargetLocales");
     case "translation_failed":
-      return error.message;
+      return translate("workspace.errors.translationFailed");
     case "custom_validation_failed":
       return error.message;
   }
@@ -2016,81 +2046,123 @@ function TranslationWorkspace({
   sourceLocale,
   targetLocale,
   translationAdapter,
-  readOnly = false
+  readOnly = false,
+  availableLocales,
+  onLocaleAdded,
+  onLocaleRemoved,
+  onLocaleChange,
+  beforeRemoveLocale,
+  slots: workspaceSlots
 }) {
+  const { translator } = (0, import_react6.useFormEngineI18n)();
+  const translate = (key, params = {}) => translator(key, params);
   const workspace = (0, import_react6.useTranslationWorkspace)({
     schema,
     ...onChange === void 0 ? {} : { onChange },
     ...sourceLocale === void 0 ? {} : { sourceLocale },
     ...targetLocale === void 0 ? {} : { targetLocale },
     ...translationAdapter === void 0 ? {} : { translationAdapter },
-    readOnly
+    readOnly,
+    ...availableLocales === void 0 ? {} : { availableLocales },
+    ...onLocaleAdded === void 0 ? {} : { onLocaleAdded },
+    ...onLocaleRemoved === void 0 ? {} : { onLocaleRemoved },
+    ...onLocaleChange === void 0 ? {} : { onLocaleChange },
+    ...beforeRemoveLocale === void 0 ? {} : { beforeRemoveLocale }
   });
   const [newLocale, setNewLocale] = (0, import_react7.useState)("");
+  const headerProps = {
+    schema,
+    sourceLocale: workspace.sourceLocale,
+    targetLocale: workspace.targetLocale,
+    summary: workspace.summary,
+    onTranslateAll: () => void workspace.translateAll(),
+    isTranslating: workspace.isTranslating,
+    readOnly
+  };
+  const actionsProps = {
+    onTranslateAll: headerProps.onTranslateAll,
+    isTranslating: workspace.isTranslating,
+    readOnly
+  };
+  const localeSelectorProps = {
+    targetLocale: workspace.targetLocale,
+    targetLocales: workspace.targetLocales,
+    localeOptions: workspace.localeOptions,
+    newLocale,
+    readOnly,
+    onTargetLocaleChange: workspace.setTargetLocale,
+    onNewLocaleChange: setNewLocale,
+    onAddLocale: () => {
+      const result = workspace.addLocale(newLocale);
+      if (result.success) setNewLocale("");
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material16.Stack, { spacing: 2, "data-testid": "translation-workspace", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material16.Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, alignItems: { sm: "center" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Typography, { variant: "h6", children: "Translations" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material16.Typography, { variant: "body2", children: [
-        workspace.summary.completionPercentage,
-        "% complete (",
-        workspace.summary.translatedCount,
-        "/",
-        workspace.summary.totalSlots,
-        ")"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    workspaceSlots?.renderHeader?.(headerProps) ?? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material16.Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, alignItems: { sm: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Typography, { variant: "h6", children: translate("workspace.header.title") }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Typography, { variant: "body2", children: translate("workspace.header.progress", {
+        translated: workspace.summary.translatedCount,
+        total: workspace.summary.totalSlots,
+        percent: workspace.summary.completionPercentage
+      }) }),
+      workspaceSlots?.renderActions?.(actionsProps) ?? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         import_material16.Button,
         {
           variant: "contained",
-          onClick: () => void workspace.translateAll(),
+          onClick: headerProps.onTranslateAll,
           disabled: readOnly || workspace.isTranslating,
-          children: "Translate all"
+          children: translate("workspace.header.translateAll")
         }
       )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.LinearProgress, { variant: "determinate", value: workspace.summary.completionPercentage }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material16.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+    workspaceSlots?.renderLocaleSelector?.(localeSelectorProps) ?? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material16.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material16.Typography, { variant: "body2", children: [
+        translate("workspace.header.sourceLocale"),
+        ": ",
+        workspace.sourceLocale
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material16.Typography, { variant: "body2", children: [
+        translate("workspace.header.targetLocale"),
+        ":"
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         import_material16.Tabs,
         {
           value: workspace.targetLocale,
           onChange: (_event, value) => workspace.setTargetLocale(value),
-          "aria-label": "Translation locales",
-          children: workspace.targetLocales.map((locale) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Tab, { value: locale, label: locale }, locale))
+          "aria-label": translate("workspace.header.targetLocale"),
+          children: workspace.targetLocales.map((locale) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            import_material16.Tab,
+            {
+              value: locale,
+              label: workspace.localeOptions.find((option) => option.locale === locale)?.label ?? locale
+            },
+            locale
+          ))
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         import_material16.TextField,
         {
           size: "small",
-          label: "Add locale",
+          label: translate("workspace.header.targetLocale"),
           value: newLocale,
           onChange: (event) => setNewLocale(event.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        import_material16.Button,
-        {
-          onClick: () => {
-            workspace.addLocale(newLocale);
-            setNewLocale("");
-          },
-          disabled: readOnly,
-          children: "Add"
-        }
-      )
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Button, { onClick: localeSelectorProps.onAddLocale, disabled: readOnly, children: translate("builder.addLocale") })
     ] }),
-    workspace.error === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Typography, { color: "error", children: workspaceErrorMessage(workspace.error) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Stack, { spacing: 1.5, children: workspace.slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      SlotCard,
-      {
+    workspace.error === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Typography, { color: "error", children: workspaceErrorMessage(workspace.error, translate) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Stack, { spacing: 1.5, children: workspace.slots.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Typography, { color: "text.secondary", children: workspace.targetLocales.length === 0 ? translate("workspace.empty.noTargetLocales") : translate("workspace.empty.noSlotsToTranslate") }) : workspace.slots.map((slot) => {
+      const rowProps = {
         slot,
         readOnly,
         onChange: (text) => workspace.setTranslation(slot, text),
         onTranslate: () => void workspace.translateSlot(slot)
-      },
-      slot.path
-    )) })
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: workspaceSlots?.renderSlotRow?.(rowProps) ?? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SlotCard, { ...rowProps, translate, renderStatusBadge: workspaceSlots?.renderStatusBadge }) }, slot.path);
+    }) })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.d.cts

@@ -1,8 +1,8 @@
-import { BuilderActionIconType, FieldPropertyControlMode, QuestionType, FieldEditorControlsConfig, FieldTypeSelectOptionsConfig, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, ChoiceGroupSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
+import { BuilderActionIconType, FieldPropertyControlMode, QuestionType, FieldEditorControlsConfig, FieldTypeSelectOptionsConfig, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, ChoiceGroupSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps, TranslationWorkspaceSlots } from '@form-engine-ts/react';
 import * as react from 'react';
 import { ReactNode, ComponentType, ReactElement } from 'react';
+import { FormEngineMessages, FormEngineTranslator, LocaleOption, FormSchema, DisplayRule, TranslationAdapter, AsyncTranslationAdapter } from '@form-engine-ts/core';
 import { CardProps, PaperProps, AccordionProps, StackProps, TextFieldProps, SelectProps, MenuProps, CheckboxProps, ButtonProps, IconButtonProps } from '@mui/material';
-import { FormSchema, DisplayRule, TranslationAdapter, AsyncTranslationAdapter } from '@form-engine-ts/core';
 
 type BuilderSectionName = "basicSettings" | "completionMessage" | "questions" | "addQuestion" | "localization" | "submissionSettings";
 type MuiButtonVariant = "contained" | "outlined" | "text";
@@ -12,6 +12,18 @@ type MuiComponentSlotProps<T> = Partial<T> & {
 interface LocaleOptionItem {
     readonly value: string;
     readonly label: string;
+    readonly translatable?: boolean;
+    readonly removable?: boolean;
+    readonly metadata?: Readonly<Record<string, unknown>>;
+}
+type MuiLocaleOption = LocaleOption | LocaleOptionItem;
+interface MuiFormEngineI18nOptions {
+    readonly locale?: string;
+    readonly fallbackLocale?: string;
+    readonly messages?: FormEngineMessages;
+    readonly translator?: FormEngineTranslator;
+    readonly getLocaleLabel?: (locale: string) => string;
+    readonly getActionLabel?: (actionType: string) => string;
 }
 type LocalizationSectionPlacement = "top" | "beforeQuestions" | "afterQuestions" | "bottom";
 interface MuiLayoutOptions {
@@ -174,8 +186,9 @@ interface MuiFormBuilderProps extends Omit<FormBuilderProps, "components" | "dis
     readonly muiSlotProps?: MuiBuilderSlotProps;
     readonly components?: Partial<FormBuilderComponents>;
     readonly slots?: Partial<FormBuilderSlots>;
+    readonly i18n?: MuiFormEngineI18nOptions;
 }
-declare function MuiFormBuilder({ muiOptions, layoutOptions, localizationOptions, submissionSettingsOptions, muiSlotProps, components: customComponents, slots: customSlots, sectionOrder, ...props }: MuiFormBuilderProps): react.JSX.Element;
+declare function MuiFormBuilder({ muiOptions, layoutOptions, localizationOptions, submissionSettingsOptions, muiSlotProps, components: customComponents, slots: customSlots, i18n, sectionOrder, ...props }: MuiFormBuilderProps): react.JSX.Element;
 
 interface ConditionEditorProps {
     readonly schema: FormSchema;
@@ -210,7 +223,15 @@ interface TranslationWorkspaceProps {
     readonly targetLocale?: string;
     readonly translationAdapter?: TranslationAdapter | AsyncTranslationAdapter;
     readonly readOnly?: boolean;
+    readonly availableLocales?: readonly (string | LocaleOption)[];
+    readonly onLocaleAdded?: (locale: string) => void;
+    readonly onLocaleRemoved?: (locale: string) => void;
+    readonly onLocaleChange?: (locale: string) => void;
+    readonly beforeRemoveLocale?: (locale: string, context: {
+        readonly slotCount: number;
+    }) => Promise<boolean> | boolean;
+    readonly slots?: TranslationWorkspaceSlots;
 }
-declare function TranslationWorkspace({ schema, onChange, sourceLocale, targetLocale, translationAdapter, readOnly }: TranslationWorkspaceProps): react.JSX.Element;
+declare function TranslationWorkspace({ schema, onChange, sourceLocale, targetLocale, translationAdapter, readOnly, availableLocales, onLocaleAdded, onLocaleRemoved, onLocaleChange, beforeRemoveLocale, slots: workspaceSlots }: TranslationWorkspaceProps): react.JSX.Element;
 
-export { type BuilderSectionName, ConditionEditor, type ConditionEditorProps, DEFAULT_MUI_SECTION_ORDER, type LocaleOptionItem, type LocalizationSectionPlacement, MUI_LOCALIZATION_SECTION_ORDERS, type MuiAdapterOptions, type MuiBuilderOverrides, type MuiBuilderSlotProps, MuiButtonAdapter, type MuiButtonVariant, MuiCheckboxAdapter, MuiChoiceGroupSlot, MuiErrorMessageAdapter, type MuiFieldEditorOptions, MuiFieldEditorSlot, MuiFieldsetAdapter, MuiFormBuilder, MuiFormBuilderContext, type MuiFormBuilderContextValue, type MuiFormBuilderProps, MuiIconButtonAdapter, type MuiLayoutOptions, type MuiLocalizationOptions, MuiLocalizationSlot, MuiOptionEditorSlot, MuiSectionAdapter, MuiSelectAdapter, type MuiSlotProps, type MuiSubmissionSettingsOptions, MuiTextAreaAdapter, MuiTextInputAdapter, MuiToolbarSlot, type ResolvedMuiAdapterOptions, TranslationWorkspace, type TranslationWorkspaceProps, createMuiBuilderComponents, createMuiBuilderProps, createMuiBuilderSlots, createMuiButtonAdapter, createMuiCheckboxAdapter, createMuiErrorMessageAdapter, createMuiFieldEditorSlot, createMuiFieldsetAdapter, createMuiIconButtonAdapter, createMuiLocalizationSlot, createMuiOptionEditorSlot, createMuiSectionAdapter, createMuiSelectAdapter, createMuiTextAreaAdapter, createMuiTextInputAdapter, createMuiToolbarSlot, mergeMuiAdapterOptions, muiBuilderComponents, muiBuilderSlots, muiDefaultFieldTypeIcon, muiDefaultIconResolver, resolveMuiAdapterOptions, useResolvedMuiAdapterOptions };
+export { type BuilderSectionName, ConditionEditor, type ConditionEditorProps, DEFAULT_MUI_SECTION_ORDER, type LocaleOptionItem, type LocalizationSectionPlacement, MUI_LOCALIZATION_SECTION_ORDERS, type MuiAdapterOptions, type MuiBuilderOverrides, type MuiBuilderSlotProps, MuiButtonAdapter, type MuiButtonVariant, MuiCheckboxAdapter, MuiChoiceGroupSlot, MuiErrorMessageAdapter, type MuiFieldEditorOptions, MuiFieldEditorSlot, MuiFieldsetAdapter, MuiFormBuilder, MuiFormBuilderContext, type MuiFormBuilderContextValue, type MuiFormBuilderProps, type MuiFormEngineI18nOptions, MuiIconButtonAdapter, type MuiLayoutOptions, type MuiLocaleOption, type MuiLocalizationOptions, MuiLocalizationSlot, MuiOptionEditorSlot, MuiSectionAdapter, MuiSelectAdapter, type MuiSlotProps, type MuiSubmissionSettingsOptions, MuiTextAreaAdapter, MuiTextInputAdapter, MuiToolbarSlot, type ResolvedMuiAdapterOptions, TranslationWorkspace, type TranslationWorkspaceProps, createMuiBuilderComponents, createMuiBuilderProps, createMuiBuilderSlots, createMuiButtonAdapter, createMuiCheckboxAdapter, createMuiErrorMessageAdapter, createMuiFieldEditorSlot, createMuiFieldsetAdapter, createMuiIconButtonAdapter, createMuiLocalizationSlot, createMuiOptionEditorSlot, createMuiSectionAdapter, createMuiSelectAdapter, createMuiTextAreaAdapter, createMuiTextInputAdapter, createMuiToolbarSlot, mergeMuiAdapterOptions, muiBuilderComponents, muiBuilderSlots, muiDefaultFieldTypeIcon, muiDefaultIconResolver, resolveMuiAdapterOptions, useResolvedMuiAdapterOptions };

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-import { BuilderActionIconType, FieldPropertyControlMode, QuestionType, FieldEditorControlsConfig, FieldTypeSelectOptionsConfig, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, ChoiceGroupSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
+import { BuilderActionIconType, FieldPropertyControlMode, QuestionType, FieldEditorControlsConfig, FieldTypeSelectOptionsConfig, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, ChoiceGroupSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps, TranslationWorkspaceSlots } from '@form-engine-ts/react';
 import * as react from 'react';
 import { ReactNode, ComponentType, ReactElement } from 'react';
+import { FormEngineMessages, FormEngineTranslator, LocaleOption, FormSchema, DisplayRule, TranslationAdapter, AsyncTranslationAdapter } from '@form-engine-ts/core';
 import { CardProps, PaperProps, AccordionProps, StackProps, TextFieldProps, SelectProps, MenuProps, CheckboxProps, ButtonProps, IconButtonProps } from '@mui/material';
-import { FormSchema, DisplayRule, TranslationAdapter, AsyncTranslationAdapter } from '@form-engine-ts/core';
 
 type BuilderSectionName = "basicSettings" | "completionMessage" | "questions" | "addQuestion" | "localization" | "submissionSettings";
 type MuiButtonVariant = "contained" | "outlined" | "text";
@@ -12,6 +12,18 @@ type MuiComponentSlotProps<T> = Partial<T> & {
 interface LocaleOptionItem {
     readonly value: string;
     readonly label: string;
+    readonly translatable?: boolean;
+    readonly removable?: boolean;
+    readonly metadata?: Readonly<Record<string, unknown>>;
+}
+type MuiLocaleOption = LocaleOption | LocaleOptionItem;
+interface MuiFormEngineI18nOptions {
+    readonly locale?: string;
+    readonly fallbackLocale?: string;
+    readonly messages?: FormEngineMessages;
+    readonly translator?: FormEngineTranslator;
+    readonly getLocaleLabel?: (locale: string) => string;
+    readonly getActionLabel?: (actionType: string) => string;
 }
 type LocalizationSectionPlacement = "top" | "beforeQuestions" | "afterQuestions" | "bottom";
 interface MuiLayoutOptions {
@@ -174,8 +186,9 @@ interface MuiFormBuilderProps extends Omit<FormBuilderProps, "components" | "dis
     readonly muiSlotProps?: MuiBuilderSlotProps;
     readonly components?: Partial<FormBuilderComponents>;
     readonly slots?: Partial<FormBuilderSlots>;
+    readonly i18n?: MuiFormEngineI18nOptions;
 }
-declare function MuiFormBuilder({ muiOptions, layoutOptions, localizationOptions, submissionSettingsOptions, muiSlotProps, components: customComponents, slots: customSlots, sectionOrder, ...props }: MuiFormBuilderProps): react.JSX.Element;
+declare function MuiFormBuilder({ muiOptions, layoutOptions, localizationOptions, submissionSettingsOptions, muiSlotProps, components: customComponents, slots: customSlots, i18n, sectionOrder, ...props }: MuiFormBuilderProps): react.JSX.Element;
 
 interface ConditionEditorProps {
     readonly schema: FormSchema;
@@ -210,7 +223,15 @@ interface TranslationWorkspaceProps {
     readonly targetLocale?: string;
     readonly translationAdapter?: TranslationAdapter | AsyncTranslationAdapter;
     readonly readOnly?: boolean;
+    readonly availableLocales?: readonly (string | LocaleOption)[];
+    readonly onLocaleAdded?: (locale: string) => void;
+    readonly onLocaleRemoved?: (locale: string) => void;
+    readonly onLocaleChange?: (locale: string) => void;
+    readonly beforeRemoveLocale?: (locale: string, context: {
+        readonly slotCount: number;
+    }) => Promise<boolean> | boolean;
+    readonly slots?: TranslationWorkspaceSlots;
 }
-declare function TranslationWorkspace({ schema, onChange, sourceLocale, targetLocale, translationAdapter, readOnly }: TranslationWorkspaceProps): react.JSX.Element;
+declare function TranslationWorkspace({ schema, onChange, sourceLocale, targetLocale, translationAdapter, readOnly, availableLocales, onLocaleAdded, onLocaleRemoved, onLocaleChange, beforeRemoveLocale, slots: workspaceSlots }: TranslationWorkspaceProps): react.JSX.Element;
 
-export { type BuilderSectionName, ConditionEditor, type ConditionEditorProps, DEFAULT_MUI_SECTION_ORDER, type LocaleOptionItem, type LocalizationSectionPlacement, MUI_LOCALIZATION_SECTION_ORDERS, type MuiAdapterOptions, type MuiBuilderOverrides, type MuiBuilderSlotProps, MuiButtonAdapter, type MuiButtonVariant, MuiCheckboxAdapter, MuiChoiceGroupSlot, MuiErrorMessageAdapter, type MuiFieldEditorOptions, MuiFieldEditorSlot, MuiFieldsetAdapter, MuiFormBuilder, MuiFormBuilderContext, type MuiFormBuilderContextValue, type MuiFormBuilderProps, MuiIconButtonAdapter, type MuiLayoutOptions, type MuiLocalizationOptions, MuiLocalizationSlot, MuiOptionEditorSlot, MuiSectionAdapter, MuiSelectAdapter, type MuiSlotProps, type MuiSubmissionSettingsOptions, MuiTextAreaAdapter, MuiTextInputAdapter, MuiToolbarSlot, type ResolvedMuiAdapterOptions, TranslationWorkspace, type TranslationWorkspaceProps, createMuiBuilderComponents, createMuiBuilderProps, createMuiBuilderSlots, createMuiButtonAdapter, createMuiCheckboxAdapter, createMuiErrorMessageAdapter, createMuiFieldEditorSlot, createMuiFieldsetAdapter, createMuiIconButtonAdapter, createMuiLocalizationSlot, createMuiOptionEditorSlot, createMuiSectionAdapter, createMuiSelectAdapter, createMuiTextAreaAdapter, createMuiTextInputAdapter, createMuiToolbarSlot, mergeMuiAdapterOptions, muiBuilderComponents, muiBuilderSlots, muiDefaultFieldTypeIcon, muiDefaultIconResolver, resolveMuiAdapterOptions, useResolvedMuiAdapterOptions };
+export { type BuilderSectionName, ConditionEditor, type ConditionEditorProps, DEFAULT_MUI_SECTION_ORDER, type LocaleOptionItem, type LocalizationSectionPlacement, MUI_LOCALIZATION_SECTION_ORDERS, type MuiAdapterOptions, type MuiBuilderOverrides, type MuiBuilderSlotProps, MuiButtonAdapter, type MuiButtonVariant, MuiCheckboxAdapter, MuiChoiceGroupSlot, MuiErrorMessageAdapter, type MuiFieldEditorOptions, MuiFieldEditorSlot, MuiFieldsetAdapter, MuiFormBuilder, MuiFormBuilderContext, type MuiFormBuilderContextValue, type MuiFormBuilderProps, type MuiFormEngineI18nOptions, MuiIconButtonAdapter, type MuiLayoutOptions, type MuiLocaleOption, type MuiLocalizationOptions, MuiLocalizationSlot, MuiOptionEditorSlot, MuiSectionAdapter, MuiSelectAdapter, type MuiSlotProps, type MuiSubmissionSettingsOptions, MuiTextAreaAdapter, MuiTextInputAdapter, MuiToolbarSlot, type ResolvedMuiAdapterOptions, TranslationWorkspace, type TranslationWorkspaceProps, createMuiBuilderComponents, createMuiBuilderProps, createMuiBuilderSlots, createMuiButtonAdapter, createMuiCheckboxAdapter, createMuiErrorMessageAdapter, createMuiFieldEditorSlot, createMuiFieldsetAdapter, createMuiIconButtonAdapter, createMuiLocalizationSlot, createMuiOptionEditorSlot, createMuiSectionAdapter, createMuiSelectAdapter, createMuiTextAreaAdapter, createMuiTextInputAdapter, createMuiToolbarSlot, mergeMuiAdapterOptions, muiBuilderComponents, muiBuilderSlots, muiDefaultFieldTypeIcon, muiDefaultIconResolver, resolveMuiAdapterOptions, useResolvedMuiAdapterOptions };

package/dist/index.js

@@ -1526,10 +1526,16 @@ function normalizeLocaleOptions(options, getLocaleLabel) {
   const seen = /* @__PURE__ */ new Set();
   const normalized = [];
   for (const item of options) {
-    const value = typeof item === "string" ? item : item.value;
+    const value = typeof item === "string" ? item : "value" in item ? item.value : item.locale;
     if (value.length === 0 || seen.has(value)) continue;
     seen.add(value);
-    normalized.push({ value, label: typeof item === "string" ? getLocaleLabel?.(value) ?? value : item.label });
+    normalized.push({
+      value,
+      label: typeof item === "string" ? getLocaleLabel?.(value) ?? value : item.label,
+      ...typeof item === "string" || item.translatable === void 0 ? {} : { translatable: item.translatable },
+      ...typeof item === "string" || item.removable === void 0 ? {} : { removable: item.removable },
+      ...typeof item === "string" || item.metadata === void 0 ? {} : { metadata: item.metadata }
+    });
   }
   return normalized;
 }
@@ -1572,6 +1578,8 @@ function createMuiLocalizationSlot(options) {
     const hasLocaleSelector = filteredAvailableLocales !== void 0;
     const localeLimitReached = policy?.maxLocales !== void 0 && registeredLocales.size >= policy.maxLocales;
     const normalizedLocale = newLocale.trim();
+    const currentLocaleOption = availableLocaleOptions?.find((locale) => locale.value === currentLocale);
+    const currentLocaleTranslatable = currentLocaleOption?.translatable !== false;
     const selectedLocaleAvailable = !hasLocaleSelector || filteredAvailableLocales.some((locale) => locale.value === normalizedLocale);
     const localeAllowed = policy?.allowedLocales === void 0 || policy.allowedLocales.includes(normalizedLocale);
     const canAddLocale = !readOnly && normalizedLocale.length > 0 && selectedLocaleAvailable && localeAllowed && !registeredLocales.has(normalizedLocale) && !localeLimitReached;
@@ -1737,7 +1745,7 @@ function createMuiLocalizationSlot(options) {
         {
           variant: "secondary",
           noWrap: localizationOptions.noWrapActions ?? true,
-          disabled: readOnly || !editingLocaleConfigured || isTranslating,
+          disabled: readOnly || !editingLocaleConfigured || isTranslating || !currentLocaleTranslatable,
           onClick: onAutoTranslate,
           children: isTranslating ? translate("builder.translating") : translate("builder.autoTranslate")
         }
@@ -1865,7 +1873,8 @@ function createMuiBuilderProps(options, overrides = {}) {
 
 // src/MuiFormBuilder.tsx
 import {
-  FormBuilder
+  FormBuilder,
+  FormEngineI18nProvider
 } from "@form-engine-ts/react";
 import { useMemo } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
@@ -1877,6 +1886,7 @@ function MuiFormBuilder({
   muiSlotProps,
   components: customComponents,
   slots: customSlots,
+  i18n,
   sectionOrder,
   ...props
 }) {
@@ -1888,7 +1898,14 @@ function MuiFormBuilder({
     }),
     [layoutOptions, localizationOptions, muiOptions, muiSlotProps]
   );
-  const contextValue = useMemo(() => ({ options: contextOptions }), [contextOptions]);
+  const resolvedMuiOptions = useMemo(
+    () => mergeMuiAdapterOptions(contextOptions, {
+      ...i18n?.getLocaleLabel === void 0 ? {} : { getLocaleLabel: i18n.getLocaleLabel },
+      ...i18n?.getActionLabel === void 0 ? {} : { getActionLabel: i18n.getActionLabel }
+    }),
+    [contextOptions, i18n?.getActionLabel, i18n?.getLocaleLabel]
+  );
+  const contextValue = useMemo(() => ({ options: resolvedMuiOptions }), [resolvedMuiOptions]);
   const components = useMemo(() => ({ ...muiBuilderComponents, ...customComponents }), [customComponents]);
   const slots = useMemo(() => ({ ...muiBuilderSlots, ...customSlots }), [customSlots]);
   const placement = contextOptions.localizationOptions?.placement;
@@ -1909,7 +1926,7 @@ function MuiFormBuilder({
     );
     return order;
   })();
-  return /* @__PURE__ */ jsx17(MuiFormBuilderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx17(
+  const content = /* @__PURE__ */ jsx17(MuiFormBuilderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx17(
     FormBuilder,
     {
       ...props,
@@ -1920,10 +1937,24 @@ function MuiFormBuilder({
       ...submissionSettingsOptions === void 0 ? {} : { submissionSettingsOptions }
     }
   ) });
+  if (i18n === void 0) return content;
+  return /* @__PURE__ */ jsx17(
+    FormEngineI18nProvider,
+    {
+      ...i18n.locale === void 0 ? {} : { locale: i18n.locale },
+      ...i18n.fallbackLocale === void 0 ? {} : { fallbackLocale: i18n.fallbackLocale },
+      ...i18n.messages === void 0 ? {} : { messages: i18n.messages },
+      ...i18n.translator === void 0 ? {} : { translator: i18n.translator },
+      children: content
+    }
+  );
 }
 
 // src/workspace/TranslationWorkspace.tsx
-import { useTranslationWorkspace } from "@form-engine-ts/react";
+import {
+  useFormEngineI18n,
+  useTranslationWorkspace
+} from "@form-engine-ts/react";
 import {
   Button as Button3,
   Card as Card2,
@@ -1938,28 +1969,31 @@ import {
 } from "@mui/material";
 import { useState as useState2 } from "react";
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-var statusLabel = {
-  missing: "Missing",
-  translated: "Translated",
-  stale: "Source changed",
-  manual: "Manual",
-  "manual-stale": "Manual / source changed"
+var statusKey = {
+  missing: "workspace.status.missing",
+  translated: "workspace.status.translated",
+  stale: "workspace.status.stale",
+  manual: "workspace.status.manual",
+  "manual-stale": "workspace.status.manualStale"
 };
 function SlotCard({
   slot,
   readOnly,
   onChange,
-  onTranslate
+  onTranslate,
+  translate,
+  renderStatusBadge
 }) {
+  const status = slot.status ?? "missing";
   return /* @__PURE__ */ jsx18(Card2, { variant: "outlined", children: /* @__PURE__ */ jsx18(CardContent, { children: /* @__PURE__ */ jsxs11(Stack6, { spacing: 1.5, children: [
     /* @__PURE__ */ jsxs11(Stack6, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ jsx18(Typography5, { variant: "subtitle2", children: slot.path }),
-      /* @__PURE__ */ jsx18(Chip2, { size: "small", label: statusLabel[slot.status ?? "missing"] })
+      renderStatusBadge?.({ status }) ?? /* @__PURE__ */ jsx18(Chip2, { size: "small", label: translate(statusKey[status]) })
     ] }),
     /* @__PURE__ */ jsx18(
       TextField4,
       {
-        label: "Source",
+        label: translate("workspace.slot.sourceText"),
         value: slot.sourceText,
         multiline: true,
         fullWidth: true,
@@ -1969,7 +2003,7 @@ function SlotCard({
     /* @__PURE__ */ jsx18(
       TextField4,
       {
-        label: "Translation",
+        label: translate("workspace.slot.translatedText"),
         value: slot.existingText ?? "",
         multiline: true,
         fullWidth: true,
@@ -1977,28 +2011,28 @@ function SlotCard({
         onChange: (event) => onChange(event.target.value)
       }
     ),
-    slot.status === "stale" || slot.status === "manual-stale" ? /* @__PURE__ */ jsx18(Typography5, { color: "warning.main", variant: "body2", children: "The source text has changed since this translation was created." }) : null,
-    /* @__PURE__ */ jsx18(Button3, { variant: "outlined", onClick: onTranslate, disabled: readOnly, children: "Translate this slot" })
+    slot.status === "stale" || slot.status === "manual-stale" ? /* @__PURE__ */ jsx18(Typography5, { color: "warning.main", variant: "body2", children: translate("workspace.status.stale") }) : null,
+    /* @__PURE__ */ jsx18(Button3, { variant: "outlined", onClick: onTranslate, disabled: readOnly, children: translate("workspace.slot.translateSingle") })
   ] }) }) });
 }
-function workspaceErrorMessage(error) {
+function workspaceErrorMessage(error, translate) {
   switch (error.type) {
     case "locale_not_allowed":
-      return `Locale "${error.locale}" is not allowed.`;
+      return translate("workspace.errors.localeNotAllowed", { locale: error.locale });
     case "locale_already_exists":
-      return `Locale "${error.locale}" is already registered.`;
+      return translate("workspace.errors.localeNotAllowed", { locale: error.locale });
     case "invalid_locale_format":
-      return `Invalid locale format: "${error.locale}"`;
+      return translate("workspace.errors.localeNotAllowed", { locale: error.locale });
     case "max_locales_exceeded":
-      return `At most ${error.max} locales are allowed.`;
+      return translate("workspace.errors.maxLocalesExceeded", { max: error.max });
     case "read_only_mode":
-      return "This workspace is read-only.";
+      return translate("workspace.errors.readOnly");
     case "adapter_not_configured":
-      return "A translation adapter is not configured.";
+      return translate("workspace.errors.adapterNotConfigured");
     case "target_locale_missing":
-      return "A target locale is required.";
+      return translate("workspace.empty.noTargetLocales");
     case "translation_failed":
-      return error.message;
+      return translate("workspace.errors.translationFailed");
     case "custom_validation_failed":
       return error.message;
   }
@@ -2009,81 +2043,123 @@ function TranslationWorkspace({
   sourceLocale,
   targetLocale,
   translationAdapter,
-  readOnly = false
+  readOnly = false,
+  availableLocales,
+  onLocaleAdded,
+  onLocaleRemoved,
+  onLocaleChange,
+  beforeRemoveLocale,
+  slots: workspaceSlots
 }) {
+  const { translator } = useFormEngineI18n();
+  const translate = (key, params = {}) => translator(key, params);
   const workspace = useTranslationWorkspace({
     schema,
     ...onChange === void 0 ? {} : { onChange },
     ...sourceLocale === void 0 ? {} : { sourceLocale },
     ...targetLocale === void 0 ? {} : { targetLocale },
     ...translationAdapter === void 0 ? {} : { translationAdapter },
-    readOnly
+    readOnly,
+    ...availableLocales === void 0 ? {} : { availableLocales },
+    ...onLocaleAdded === void 0 ? {} : { onLocaleAdded },
+    ...onLocaleRemoved === void 0 ? {} : { onLocaleRemoved },
+    ...onLocaleChange === void 0 ? {} : { onLocaleChange },
+    ...beforeRemoveLocale === void 0 ? {} : { beforeRemoveLocale }
   });
   const [newLocale, setNewLocale] = useState2("");
+  const headerProps = {
+    schema,
+    sourceLocale: workspace.sourceLocale,
+    targetLocale: workspace.targetLocale,
+    summary: workspace.summary,
+    onTranslateAll: () => void workspace.translateAll(),
+    isTranslating: workspace.isTranslating,
+    readOnly
+  };
+  const actionsProps = {
+    onTranslateAll: headerProps.onTranslateAll,
+    isTranslating: workspace.isTranslating,
+    readOnly
+  };
+  const localeSelectorProps = {
+    targetLocale: workspace.targetLocale,
+    targetLocales: workspace.targetLocales,
+    localeOptions: workspace.localeOptions,
+    newLocale,
+    readOnly,
+    onTargetLocaleChange: workspace.setTargetLocale,
+    onNewLocaleChange: setNewLocale,
+    onAddLocale: () => {
+      const result = workspace.addLocale(newLocale);
+      if (result.success) setNewLocale("");
+    }
+  };
   return /* @__PURE__ */ jsxs11(Stack6, { spacing: 2, "data-testid": "translation-workspace", children: [
-    /* @__PURE__ */ jsxs11(Stack6, { direction: { xs: "column", sm: "row" }, spacing: 2, alignItems: { sm: "center" }, children: [
-      /* @__PURE__ */ jsx18(Typography5, { variant: "h6", children: "Translations" }),
-      /* @__PURE__ */ jsxs11(Typography5, { variant: "body2", children: [
-        workspace.summary.completionPercentage,
-        "% complete (",
-        workspace.summary.translatedCount,
-        "/",
-        workspace.summary.totalSlots,
-        ")"
-      ] }),
-      /* @__PURE__ */ jsx18(
+    workspaceSlots?.renderHeader?.(headerProps) ?? /* @__PURE__ */ jsxs11(Stack6, { direction: { xs: "column", sm: "row" }, spacing: 2, alignItems: { sm: "center" }, children: [
+      /* @__PURE__ */ jsx18(Typography5, { variant: "h6", children: translate("workspace.header.title") }),
+      /* @__PURE__ */ jsx18(Typography5, { variant: "body2", children: translate("workspace.header.progress", {
+        translated: workspace.summary.translatedCount,
+        total: workspace.summary.totalSlots,
+        percent: workspace.summary.completionPercentage
+      }) }),
+      workspaceSlots?.renderActions?.(actionsProps) ?? /* @__PURE__ */ jsx18(
         Button3,
         {
           variant: "contained",
-          onClick: () => void workspace.translateAll(),
+          onClick: headerProps.onTranslateAll,
           disabled: readOnly || workspace.isTranslating,
-          children: "Translate all"
+          children: translate("workspace.header.translateAll")
         }
       )
     ] }),
     /* @__PURE__ */ jsx18(LinearProgress, { variant: "determinate", value: workspace.summary.completionPercentage }),
-    /* @__PURE__ */ jsxs11(Stack6, { direction: "row", spacing: 1, alignItems: "center", children: [
+    workspaceSlots?.renderLocaleSelector?.(localeSelectorProps) ?? /* @__PURE__ */ jsxs11(Stack6, { direction: "row", spacing: 1, alignItems: "center", children: [
+      /* @__PURE__ */ jsxs11(Typography5, { variant: "body2", children: [
+        translate("workspace.header.sourceLocale"),
+        ": ",
+        workspace.sourceLocale
+      ] }),
+      /* @__PURE__ */ jsxs11(Typography5, { variant: "body2", children: [
+        translate("workspace.header.targetLocale"),
+        ":"
+      ] }),
       /* @__PURE__ */ jsx18(
         Tabs2,
         {
           value: workspace.targetLocale,
           onChange: (_event, value) => workspace.setTargetLocale(value),
-          "aria-label": "Translation locales",
-          children: workspace.targetLocales.map((locale) => /* @__PURE__ */ jsx18(Tab2, { value: locale, label: locale }, locale))
+          "aria-label": translate("workspace.header.targetLocale"),
+          children: workspace.targetLocales.map((locale) => /* @__PURE__ */ jsx18(
+            Tab2,
+            {
+              value: locale,
+              label: workspace.localeOptions.find((option) => option.locale === locale)?.label ?? locale
+            },
+            locale
+          ))
         }
       ),
       /* @__PURE__ */ jsx18(
         TextField4,
         {
           size: "small",
-          label: "Add locale",
+          label: translate("workspace.header.targetLocale"),
           value: newLocale,
           onChange: (event) => setNewLocale(event.target.value)
         }
       ),
-      /* @__PURE__ */ jsx18(
-        Button3,
-        {
-          onClick: () => {
-            workspace.addLocale(newLocale);
-            setNewLocale("");
-          },
-          disabled: readOnly,
-          children: "Add"
-        }
-      )
+      /* @__PURE__ */ jsx18(Button3, { onClick: localeSelectorProps.onAddLocale, disabled: readOnly, children: translate("builder.addLocale") })
     ] }),
-    workspace.error === void 0 ? null : /* @__PURE__ */ jsx18(Typography5, { color: "error", children: workspaceErrorMessage(workspace.error) }),
-    /* @__PURE__ */ jsx18(Stack6, { spacing: 1.5, children: workspace.slots.map((slot) => /* @__PURE__ */ jsx18(
-      SlotCard,
-      {
+    workspace.error === void 0 ? null : /* @__PURE__ */ jsx18(Typography5, { color: "error", children: workspaceErrorMessage(workspace.error, translate) }),
+    /* @__PURE__ */ jsx18(Stack6, { spacing: 1.5, children: workspace.slots.length === 0 ? /* @__PURE__ */ jsx18(Typography5, { color: "text.secondary", children: workspace.targetLocales.length === 0 ? translate("workspace.empty.noTargetLocales") : translate("workspace.empty.noSlotsToTranslate") }) : workspace.slots.map((slot) => {
+      const rowProps = {
         slot,
         readOnly,
         onChange: (text) => workspace.setTranslation(slot, text),
         onTranslate: () => void workspace.translateSlot(slot)
-      },
-      slot.path
-    )) })
+      };
+      return /* @__PURE__ */ jsx18("span", { children: workspaceSlots?.renderSlotRow?.(rowProps) ?? /* @__PURE__ */ jsx18(SlotCard, { ...rowProps, translate, renderStatusBadge: workspaceSlots?.renderStatusBadge }) }, slot.path);
+    }) })
   ] });
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-engine-ts/mui",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -46,8 +46,8 @@
     "@mui/material": "^6.0.0 || ^7.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@form-engine-ts/core": "5.0.1",
-    "@form-engine-ts/react": "5.0.1"
+    "@form-engine-ts/core": "5.1.0",
+    "@form-engine-ts/react": "5.1.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
@@ -58,8 +58,8 @@
     "@types/react-dom": "^19.2.4",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "@form-engine-ts/core": "5.0.1",
-    "@form-engine-ts/react": "5.0.1"
+    "@form-engine-ts/core": "5.1.0",
+    "@form-engine-ts/react": "5.1.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --clean --external @emotion/react --external @emotion/styled --external @form-engine-ts/core --external @form-engine-ts/react --external @mui/icons-material --external @mui/material --external react --external react-dom",