@form-engine-ts/mui 2.9.6 → 3.1.0

package/dist/index.js

@@ -9,8 +9,15 @@ var DEFAULT_MUI_SECTION_ORDER = [
   "basicSettings",
   "questions",
   "addQuestion",
-  "localization"
+  "localization",
+  "completionMessage"
 ];
+var MUI_LOCALIZATION_SECTION_ORDERS = {
+  top: ["localization", "basicSettings", "completionMessage", "questions", "addQuestion"],
+  beforeQuestions: ["basicSettings", "localization", "completionMessage", "questions", "addQuestion"],
+  afterQuestions: ["basicSettings", "questions", "addQuestion", "localization", "completionMessage"],
+  bottom: ["basicSettings", "completionMessage", "questions", "addQuestion", "localization"]
+};
 function resolveMuiAdapterOptions(options = {}) {
   const buttonVariant = options.buttonVariant ?? "contained";
   return {
@@ -36,8 +43,13 @@ function resolveMuiAdapterOptions(options = {}) {
       collapsible: options.localizationOptions?.collapsible ?? false,
       defaultExpanded: options.localizationOptions?.defaultExpanded ?? false,
       showSummary: options.localizationOptions?.showSummary ?? false,
+      ...options.localizationOptions?.availableLocales === void 0 ? {} : { availableLocales: options.localizationOptions.availableLocales },
+      ...options.localizationOptions?.placement === void 0 ? {} : { placement: options.localizationOptions.placement },
+      ...options.localizationOptions?.renderSummary === void 0 ? {} : { renderSummary: options.localizationOptions.renderSummary },
       ...options.localizationOptions?.emptyStateMessage === void 0 ? {} : { emptyStateMessage: options.localizationOptions.emptyStateMessage },
-      defaultLocaleControl: options.localizationOptions?.defaultLocaleControl ?? "editable"
+      defaultLocaleControl: options.localizationOptions?.defaultLocaleControl ?? "editable",
+      noWrapActions: options.localizationOptions?.noWrapActions ?? true,
+      autoFocusNewTab: options.localizationOptions?.autoFocusNewTab ?? true
     },
     muiSlotProps: options.muiSlotProps ?? {}
   };
@@ -75,6 +87,7 @@ function createMuiButtonAdapter(options) {
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
     onClick,
+    noWrap,
     children,
     title,
     variant,
@@ -82,9 +95,11 @@ function createMuiButtonAdapter(options) {
     targetId
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const buttonSlotProps = resolved.muiSlotProps?.button;
     return /* @__PURE__ */ jsx(
       Button,
       {
+        ...buttonSlotProps,
         id,
         className,
         type: "button",
@@ -98,9 +113,9 @@ function createMuiButtonAdapter(options) {
         "data-target-id": targetId,
         onClick,
         color: variant === "danger" ? "error" : "primary",
-        variant: resolved.buttonVariants?.[variant ?? "primary"] ?? resolved.buttonVariant,
+        variant: buttonSlotProps?.variant ?? resolved.buttonVariants?.[variant ?? "primary"] ?? resolved.buttonVariant,
         fullWidth: resolved.buttonFullWidth ?? false,
-        sx: { whiteSpace: "nowrap" },
+        sx: { whiteSpace: noWrap === false ? "normal" : "nowrap" },
         children
       }
     );
@@ -129,6 +144,7 @@ function createMuiCheckboxAdapter(options) {
     label
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const checkboxSlotProps = resolved.muiSlotProps?.checkbox;
     const helperId = id === void 0 ? void 0 : ariaDescribedBy?.split(/\s+/u)[0] ?? `${id}-helper-text`;
     const describedBy = ariaDescribedBy ?? (helperText === void 0 || helperText.length === 0 ? void 0 : helperId);
     return /* @__PURE__ */ jsxs(FormControl, { className, error: Boolean(error), required, disabled: disabled || readOnly, children: [
@@ -139,9 +155,10 @@ function createMuiCheckboxAdapter(options) {
           control: /* @__PURE__ */ jsx2(
             Checkbox,
             {
+              ...checkboxSlotProps,
               id,
               name,
-              size: resolved.size,
+              size: checkboxSlotProps?.size ?? resolved.size,
               checked,
               required,
               disabled: disabled || readOnly,
@@ -253,16 +270,18 @@ function createMuiIconButtonAdapter(options) {
     title
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const iconButtonSlotProps = resolved.muiSlotProps?.iconButton;
     const actionLabel = actionType === void 0 ? "Action" : resolved.getActionLabel?.(actionType) ?? FALLBACK_ACTION_LABELS[actionType];
     const tooltip = title ?? actionLabel;
     const color = actionType === "delete" ? "error" : actionType === "add" ? "primary" : "default";
     return /* @__PURE__ */ jsx5(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx5("span", { children: /* @__PURE__ */ jsx5(
       IconButton,
       {
+        ...iconButtonSlotProps,
         id,
         className,
         type: "button",
-        size: resolved.size,
+        size: iconButtonSlotProps?.size ?? resolved.size,
         color,
         disabled: disabled || readOnly,
         "aria-label": ariaLabel ?? tooltip,
@@ -326,8 +345,20 @@ function createMuiSectionAdapter(options) {
 var MuiSectionAdapter = createMuiSectionAdapter();
 
 // src/adapters/Select.tsx
-import { FormControl as FormControl2, FormHelperText as FormHelperText2, InputLabel, MenuItem, Select } from "@mui/material";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import {
+  Box as Box2,
+  FormControl as FormControl2,
+  FormHelperText as FormHelperText2,
+  InputLabel,
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  Select
+} from "@mui/material";
+import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function normalizeOptions(options) {
+  return options.map((option) => typeof option === "string" ? { value: option, label: option } : option);
+}
 function createMuiSelectAdapter(options) {
   return function MuiSelect({
     id,
@@ -344,13 +375,19 @@ function createMuiSelectAdapter(options) {
     helperText,
     value,
     onChange,
-    options: selectOptions
+    onKeyDown,
+    options: selectOptions,
+    renderOption,
+    renderValue
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const normalizedOptions = normalizeOptions(selectOptions);
+    const selectSlotProps = resolved.muiSlotProps?.select;
+    const menuProps = { ...selectSlotProps?.MenuProps, ...resolved.muiSlotProps?.selectMenu };
     const labelId = id === void 0 || label === void 0 ? void 0 : `${id}-label`;
     const helperId = id === void 0 ? void 0 : ariaDescribedBy?.split(/\s+/u)[0] ?? `${id}-helper-text`;
     const describedBy = ariaDescribedBy ?? (helperText === void 0 || helperText.length === 0 ? void 0 : helperId);
-    const handleChange = (event) => onChange(event.target.value);
+    const handleChange = (event) => onChange(String(event.target.value));
     return /* @__PURE__ */ jsxs4(
       FormControl2,
       {
@@ -366,20 +403,39 @@ function createMuiSelectAdapter(options) {
           /* @__PURE__ */ jsx7(
             Select,
             {
+              ...selectSlotProps,
               id,
               labelId,
               name,
               label,
               value,
+              disabled,
               onChange: handleChange,
+              onKeyDown,
               required,
               readOnly,
+              variant: selectSlotProps?.variant ?? resolved.variant,
+              ...Object.keys(menuProps).length === 0 ? {} : { MenuProps: menuProps },
+              renderValue: (selected) => {
+                const selectedValue = typeof selected === "string" ? selected : String(selected ?? "");
+                const option = normalizedOptions.find((candidate) => candidate.value === selectedValue);
+                if (renderValue !== void 0) return renderValue(option);
+                if (option === void 0) return selectedValue;
+                return /* @__PURE__ */ jsxs4(Box2, { display: "flex", alignItems: "center", gap: 0.75, children: [
+                  option.icon,
+                  /* @__PURE__ */ jsx7("span", { children: option.label })
+                ] });
+              },
               inputProps: {
+                ...selectSlotProps?.inputProps,
                 "aria-label": ariaLabel,
                 "aria-describedby": describedBy,
                 "aria-labelledby": ariaLabelledBy
               },
-              children: selectOptions.map((option) => /* @__PURE__ */ jsx7(MenuItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+              children: normalizedOptions.map((option) => /* @__PURE__ */ jsx7(MenuItem, { value: option.value, disabled: option.disabled, children: renderOption === void 0 ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+                option.icon === void 0 ? null : /* @__PURE__ */ jsx7(ListItemIcon, { sx: { minWidth: 32 }, children: option.icon }),
+                /* @__PURE__ */ jsx7(ListItemText, { primary: option.label, secondary: option.description })
+              ] }) : renderOption(option) }, option.value))
             }
           ),
           helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx7(FormHelperText2, { id: helperId, children: helperText })
@@ -414,9 +470,11 @@ function createMuiTextAreaAdapter(options) {
     rows
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const textFieldSlotProps = resolved.muiSlotProps?.textField;
     return /* @__PURE__ */ jsx8(
       TextField,
       {
+        ...textFieldSlotProps,
         id,
         className,
         name,
@@ -442,7 +500,7 @@ function createMuiTextAreaAdapter(options) {
         placeholder,
         fullWidth: resolved.inputFullWidth ?? resolved.fullWidth,
         size: resolved.size,
-        variant: resolved.variant,
+        variant: textFieldSlotProps?.variant ?? resolved.variant,
         onChange: (event) => onChange(event.currentTarget.value)
       }
     );
@@ -469,6 +527,7 @@ function createMuiTextInputAdapter(options) {
     helperText,
     value,
     onChange,
+    onKeyDown,
     placeholder,
     maxLength,
     inputMode,
@@ -478,9 +537,11 @@ function createMuiTextInputAdapter(options) {
     step
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const textFieldSlotProps = resolved.muiSlotProps?.textField;
     return /* @__PURE__ */ jsx9(
       TextField2,
       {
+        ...textFieldSlotProps,
         id,
         className,
         name,
@@ -509,8 +570,9 @@ function createMuiTextInputAdapter(options) {
         placeholder,
         fullWidth: resolved.inputFullWidth ?? resolved.fullWidth,
         size: resolved.size,
-        variant: resolved.variant,
-        onChange: (event) => onChange(event.currentTarget.value)
+        variant: textFieldSlotProps?.variant ?? resolved.variant,
+        onChange: (event) => onChange(event.currentTarget.value),
+        onKeyDown
       }
     );
   };
@@ -521,12 +583,19 @@ var MuiTextInputAdapter = createMuiTextInputAdapter();
 import {
   Add,
   ArrowDownward,
+  ArrowDropDown,
   ArrowUpward,
+  CheckBox,
   Close,
   Delete,
   DragHandle,
   Edit,
+  Numbers,
+  RadioButtonChecked,
   Settings,
+  Star,
+  Subject,
+  TextFields,
   Translate
 } from "@mui/icons-material";
 import { jsx as jsx10 } from "react/jsx-runtime";
@@ -552,6 +621,26 @@ function muiDefaultIconResolver(actionType) {
       return /* @__PURE__ */ jsx10(DragHandle, { fontSize: "small" });
   }
 }
+function muiDefaultFieldTypeIcon(type) {
+  switch (type) {
+    case "text":
+      return /* @__PURE__ */ jsx10(TextFields, { fontSize: "small" });
+    case "textarea":
+      return /* @__PURE__ */ jsx10(Subject, { fontSize: "small" });
+    case "number":
+      return /* @__PURE__ */ jsx10(Numbers, { fontSize: "small" });
+    case "rating":
+      return /* @__PURE__ */ jsx10(Star, { fontSize: "small" });
+    case "select":
+      return /* @__PURE__ */ jsx10(ArrowDropDown, { fontSize: "small" });
+    case "multi-select":
+      return /* @__PURE__ */ jsx10(CheckBox, { fontSize: "small" });
+    case "checkbox":
+      return /* @__PURE__ */ jsx10(CheckBox, { fontSize: "small" });
+    case "radio":
+      return /* @__PURE__ */ jsx10(RadioButtonChecked, { fontSize: "small" });
+  }
+}
 
 // src/components.ts
 function isAdapterOptions(value) {
@@ -568,7 +657,8 @@ function buildMuiBuilderComponents(options) {
     Section: createMuiSectionAdapter(options),
     Fieldset: createMuiFieldsetAdapter(options),
     ErrorMessage: createMuiErrorMessageAdapter(options),
-    renderIcon: muiDefaultIconResolver
+    renderIcon: muiDefaultIconResolver,
+    renderFieldTypeIcon: muiDefaultFieldTypeIcon
   };
 }
 var muiBuilderComponents = {
@@ -581,7 +671,8 @@ var muiBuilderComponents = {
   Section: MuiSectionAdapter,
   Fieldset: MuiFieldsetAdapter,
   ErrorMessage: MuiErrorMessageAdapter,
-  renderIcon: muiDefaultIconResolver
+  renderIcon: muiDefaultIconResolver,
+  renderFieldTypeIcon: muiDefaultFieldTypeIcon
 };
 function createMuiBuilderComponents(optionsOrOverrides = {}, customOverrides) {
   const options = isAdapterOptions(optionsOrOverrides) ? optionsOrOverrides : void 0;
@@ -590,6 +681,7 @@ function createMuiBuilderComponents(optionsOrOverrides = {}, customOverrides) {
 }
 
 // src/slots/FieldEditor.tsx
+import { DEFAULT_FIELD_TYPE_DEFINITIONS } from "@form-engine-ts/core";
 import { Card, Stack as Stack3, Typography as Typography3 } from "@mui/material";
 
 // src/slots/OptionEditor.tsx
@@ -735,17 +827,8 @@ function createMuiToolbarSlot(options) {
 var MuiToolbarSlot = createMuiToolbarSlot();
 
 // src/slots/FieldEditor.tsx
-import { Fragment, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-var FIELD_TYPES = [
-  "text",
-  "textarea",
-  "number",
-  "rating",
-  "select",
-  "multi-select",
-  "checkbox",
-  "radio"
-];
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var FIELD_TYPES = DEFAULT_FIELD_TYPE_DEFINITIONS.map((definition) => definition.type);
 function isFieldType(value) {
   return FIELD_TYPES.some((type) => type === value);
 }
@@ -784,7 +867,8 @@ function createMuiFieldEditorSlot(options) {
     readOnly,
     actions,
     components,
-    translate
+    translate,
+    slots
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const { Button: Button2, Checkbox: Checkbox2, Select: Select2, TextArea, TextInput } = components;
@@ -795,6 +879,11 @@ function createMuiFieldEditorSlot(options) {
     const conditionSource = conditionSources.find((source) => source.id === condition?.questionId);
     const descriptionMode = resolved.fieldEditorOptions?.description ?? "editable";
     const titleErrorId = field.title.trim().length === 0 ? `mui-field-${field.id}-title-error` : void 0;
+    const FieldTypeSelect = slots?.fieldTypeSelect;
+    const FieldEditorHeader = slots?.fieldEditorHeader;
+    const changeFieldType = (nextType) => {
+      if (allowedTypes.includes(nextType)) actions.changeFieldType(field.id, nextType);
+    };
     return /* @__PURE__ */ jsxs7(
       Card,
       {
@@ -803,26 +892,28 @@ function createMuiFieldEditorSlot(options) {
         variant: "outlined",
         sx: resolved.muiSlotProps?.card?.sx ?? { mb: resolved.dense ? 1 : 2, p: resolved.dense ? 1.5 : 2 },
         children: [
-          /* @__PURE__ */ jsx13(
-            Toolbar,
-            {
-              schema,
-              translate,
-              kind: "field",
-              targetId: field.id,
-              index,
-              total: schema.fields.length,
-              title: field.title,
-              onMoveUp: () => actions.moveField(field.id, index - 1),
-              onMoveDown: () => actions.moveField(field.id, index + 1),
-              onRemove: () => actions.removeField(field.id),
-              readOnly,
-              actions,
-              components
-            }
-          ),
+          FieldEditorHeader === void 0 ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+            /* @__PURE__ */ jsx13(
+              Toolbar,
+              {
+                schema,
+                translate,
+                kind: "field",
+                targetId: field.id,
+                index,
+                total: schema.fields.length,
+                title: field.title,
+                onMoveUp: () => actions.moveField(field.id, index - 1),
+                onMoveDown: () => actions.moveField(field.id, index + 1),
+                onRemove: () => actions.removeField(field.id),
+                readOnly,
+                actions,
+                components
+              }
+            ),
+            /* @__PURE__ */ jsx13(Typography3, { variant: "subtitle1", fontWeight: "bold", children: field.title })
+          ] }) : /* @__PURE__ */ jsx13(FieldEditorHeader, { field, index, totalFields: schema.fields.length, actions }),
           /* @__PURE__ */ jsxs7(Stack3, { ...resolved.muiSlotProps?.stack, spacing: resolved.dense ? 1 : 2, children: [
-            /* @__PURE__ */ jsx13(Typography3, { variant: "subtitle1", fontWeight: "bold", children: field.title }),
             /* @__PURE__ */ jsxs7(Stack3, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
               /* @__PURE__ */ jsx13(
                 TextInput,
@@ -839,22 +930,37 @@ function createMuiFieldEditorSlot(options) {
                   onChange: (value) => actions.setSourceText({ kind: "field", id: field.id }, "title", value)
                 }
               ),
-              /* @__PURE__ */ jsx13(
+              FieldTypeSelect === void 0 ? /* @__PURE__ */ jsx13(
                 Select2,
                 {
                   id: `mui-field-${field.id}-type`,
                   name: `fields.${field.id}.type`,
                   label: translate("builder.type"),
                   value: allowedTypes.includes(field.type) ? field.type : "",
-                  options: FIELD_TYPES.filter((type) => allowedTypes.includes(type)).map((type) => ({
-                    value: type,
-                    label: translate(`builder.fieldType.${type}`)
-                  })),
+                  options: FIELD_TYPES.filter((type) => allowedTypes.includes(type)).map((type) => {
+                    const definition = DEFAULT_FIELD_TYPE_DEFINITIONS.find((candidate) => candidate.type === type);
+                    return {
+                      value: type,
+                      label: translate(definition?.labelKey ?? `builder.fieldType.${type}`),
+                      icon: components.renderFieldTypeIcon(type),
+                      ...definition?.category === void 0 ? {} : { kind: definition.category }
+                    };
+                  }),
                   disabled: readOnly,
                   onChange: (value) => {
-                    if (isFieldType(value)) actions.changeFieldType(field.id, value);
+                    if (isFieldType(value)) changeFieldType(value);
                   }
                 }
+              ) : /* @__PURE__ */ jsx13(
+                FieldTypeSelect,
+                {
+                  currentType: field.type,
+                  allowedTypes,
+                  onChangeType: changeFieldType,
+                  disabled: readOnly,
+                  readOnly,
+                  renderIcon: components.renderFieldTypeIcon
+                }
               )
             ] }),
             descriptionMode === "hidden" ? null : /* @__PURE__ */ jsx13(
@@ -937,7 +1043,7 @@ function createMuiFieldEditorSlot(options) {
                   )
                 }
               ),
-              condition === void 0 ? null : /* @__PURE__ */ jsxs7(Fragment, { children: [
+              condition === void 0 ? null : /* @__PURE__ */ jsxs7(Fragment2, { children: [
                 /* @__PURE__ */ jsx13(
                   Select2,
                   {
@@ -1033,10 +1139,32 @@ var MuiFieldEditorSlot = createMuiFieldEditorSlot();
 
 // src/slots/Localization.tsx
 import { ExpandMore } from "@mui/icons-material";
-import { Accordion, AccordionDetails, AccordionSummary, Box as Box2, Chip, Stack as Stack4, Tab, Tabs, Typography as Typography4 } from "@mui/material";
-import { useState } from "react";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Alert as Alert2,
+  Box as Box3,
+  Chip,
+  Stack as Stack4,
+  Tab,
+  Tabs,
+  Typography as Typography4
+} from "@mui/material";
+import { useEffect, useState } from "react";
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_EMPTY_STATE_MESSAGE = "No translation locales have been added yet. Select a language from the dropdown above to add one.";
+function normalizeLocaleOptions(options, getLocaleLabel) {
+  const seen = /* @__PURE__ */ new Set();
+  const normalized = [];
+  for (const item of options) {
+    const value = typeof item === "string" ? item : item.value;
+    if (value.length === 0 || seen.has(value)) continue;
+    seen.add(value);
+    normalized.push({ value, label: typeof item === "string" ? getLocaleLabel?.(value) ?? value : item.label });
+  }
+  return normalized;
+}
 function createMuiLocalizationSlot(options) {
   return function MuiLocalization({
     schema,
@@ -1055,6 +1183,7 @@ function createMuiLocalizationSlot(options) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const { Button: Button2, ErrorMessage, Select: Select2, TextArea, TextInput } = components;
     const [newLocale, setNewLocale] = useState("");
+    const [pendingFocusLocale, setPendingFocusLocale] = useState(null);
     const locales = Array.from(
       new Set((schema.supportedLocales ?? []).filter((locale) => locale !== schema.defaultLocale))
     );
@@ -1063,21 +1192,44 @@ function createMuiLocalizationSlot(options) {
       ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
       ...schema.supportedLocales ?? []
     ]);
-    const availableAllowedLocales = policy?.allowedLocales?.filter((locale) => !registeredLocales.has(locale));
+    const localizationOptions = resolved.localizationOptions ?? {};
+    const availableLocaleSource = localizationOptions.availableLocales;
+    const availableLocaleOptions = availableLocaleSource === void 0 ? policy?.allowedLocales?.map((value) => ({
+      value,
+      label: resolved.getLocaleLabel?.(value) ?? value
+    })) : normalizeLocaleOptions(availableLocaleSource, resolved.getLocaleLabel);
+    const filteredAvailableLocales = availableLocaleOptions?.filter(
+      (locale) => !registeredLocales.has(locale.value) && (policy?.allowedLocales === void 0 || policy.allowedLocales.includes(locale.value))
+    );
+    const hasLocaleSelector = filteredAvailableLocales !== void 0;
     const localeLimitReached = policy?.maxLocales !== void 0 && registeredLocales.size >= policy.maxLocales;
     const normalizedLocale = newLocale.trim();
+    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 && localeAllowed && !registeredLocales.has(normalizedLocale) && !localeLimitReached;
+    const canAddLocale = !readOnly && normalizedLocale.length > 0 && selectedLocaleAvailable && localeAllowed && !registeredLocales.has(normalizedLocale) && !localeLimitReached;
     const handleTabChange = (_event, value) => onCurrentLocaleChange(value);
     const addLocale = () => {
       if (!canAddLocale) return;
       const result = actions.addLocale(normalizedLocale);
       if (!result.success) return;
       onCurrentLocaleChange(normalizedLocale);
+      if (localizationOptions.autoFocusNewTab ?? true) setPendingFocusLocale(normalizedLocale);
       setNewLocale("");
     };
+    const handleAddKeyDown = (event) => {
+      if (event.key !== "Enter" || !canAddLocale) return;
+      event.preventDefault();
+      event.stopPropagation();
+      addLocale();
+    };
+    useEffect(() => {
+      if (pendingFocusLocale === null || currentLocale !== pendingFocusLocale) return;
+      const tab = document.getElementById(`mui-builder-locale-tab-${pendingFocusLocale}`);
+      if (tab === null) return;
+      tab.focus();
+      setPendingFocusLocale(null);
+    }, [currentLocale, pendingFocusLocale]);
     const stackProps = resolved.muiSlotProps?.stack;
-    const localizationOptions = resolved.localizationOptions ?? {};
     const collapsible = localizationOptions.collapsible ?? false;
     const defaultLocaleControl = localizationOptions.defaultLocaleControl ?? "editable";
     const configuredTranslationLocales = locales.filter((locale) => locale !== schema.defaultLocale);
@@ -1085,24 +1237,35 @@ function createMuiLocalizationSlot(options) {
       ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
       ...configuredTranslationLocales
     ];
-    const summaryLabel = configuredTranslationLocales.length === 0 ? "Translations not configured" : `${configuredLocales.length} ${configuredLocales.length === 1 ? "language" : "languages"} configured: ${configuredLocales.map(
+    const legacySummaryLabel = configuredTranslationLocales.length === 0 ? "Translations not configured" : `${configuredLocales.length} ${configuredLocales.length === 1 ? "language" : "languages"} configured: ${configuredLocales.map(
       (locale) => locale === schema.defaultLocale ? `${resolved.getLocaleLabel?.(locale) ?? locale} (default)` : resolved.getLocaleLabel?.(locale) ?? locale
     ).join(", ")}`;
     const emptyStateMessage = localizationOptions.emptyStateMessage === void 0 ? DEFAULT_EMPTY_STATE_MESSAGE : translate(localizationOptions.emptyStateMessage);
+    const summaryContext = {
+      defaultLocale: schema.defaultLocale ?? "",
+      supportedLocales: schema.supportedLocales ?? [],
+      totalLocales: registeredLocales.size
+    };
+    const summary = localizationOptions.renderSummary === void 0 ? localizationOptions.showSummary ? configuredTranslationLocales.length > 0 ? /* @__PURE__ */ jsx14(Alert2, { severity: "success", sx: { mb: 2 }, children: translate("builder.localization.localesConfiguredSummary", {
+      count: schema.supportedLocales?.length ?? 0
+    }) }) : /* @__PURE__ */ jsx14(Alert2, { severity: "info", sx: { mb: 2 }, children: translate("builder.localization.noLocalesConfigured") }) : null : localizationOptions.renderSummary(summaryContext);
     const title = /* @__PURE__ */ jsxs8(Stack4, { alignItems: "center", direction: "row", spacing: 1, children: [
       /* @__PURE__ */ jsx14(Typography4, { variant: "subtitle1", fontWeight: "bold", children: translate("builder.localization") }),
-      localizationOptions.showSummary ? /* @__PURE__ */ jsx14(
+      localizationOptions.renderSummary === void 0 && localizationOptions.showSummary && configuredTranslationLocales.length > 0 ? /* @__PURE__ */ jsx14(
         Chip,
         {
-          label: summaryLabel,
+          label: legacySummaryLabel,
           size: "small",
           color: configuredTranslationLocales.length > 0 ? "primary" : "default",
           variant: "outlined"
         }
       ) : null
     ] });
+    const noCandidateLocales = hasLocaleSelector && filteredAvailableLocales.length === 0;
+    const candidateHelperText = localeLimitReached ? void 0 : noCandidateLocales ? translate("builder.localization.allLocalesAdded") : void 0;
     const content = /* @__PURE__ */ jsxs8(Stack4, { ...stackProps, spacing: resolved.dense ? 1 : 2, children: [
       !collapsible ? title : null,
+      summary,
       /* @__PURE__ */ jsxs8(
         Stack4,
         {
@@ -1112,7 +1275,7 @@ function createMuiLocalizationSlot(options) {
           spacing: resolved.dense ? 1 : 2,
           sx: { mt: 1 },
           children: [
-            defaultLocaleControl === "hidden" ? null : /* @__PURE__ */ jsx14(Box2, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, children: defaultLocaleControl === "readOnly" ? /* @__PURE__ */ jsxs8(Stack4, { spacing: 0.5, children: [
+            defaultLocaleControl === "hidden" ? null : /* @__PURE__ */ jsx14(Box3, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, children: defaultLocaleControl === "readOnly" ? /* @__PURE__ */ jsxs8(Stack4, { spacing: 0.5, children: [
               /* @__PURE__ */ jsx14(Typography4, { variant: "caption", color: "text.secondary", children: translate("builder.defaultLocale") }),
               /* @__PURE__ */ jsx14(
                 Chip,
@@ -1134,36 +1297,52 @@ function createMuiLocalizationSlot(options) {
                 }
               }
             ) }),
-            /* @__PURE__ */ jsx14(Box2, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, children: availableAllowedLocales === void 0 ? /* @__PURE__ */ jsx14(
-              TextInput,
+            /* @__PURE__ */ jsx14(Box3, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, onKeyDownCapture: handleAddKeyDown, children: hasLocaleSelector ? /* @__PURE__ */ jsx14(
+              Select2,
               {
                 id: "mui-builder-new-locale",
-                label: translate("builder.addLocale"),
+                label: translate("builder.localization.selectLocaleToAdd"),
                 value: newLocale,
-                disabled: readOnly || localeLimitReached,
+                options: filteredAvailableLocales.map((locale) => ({ value: locale.value, label: locale.label })),
+                ...candidateHelperText === void 0 ? {} : { helperText: candidateHelperText },
+                disabled: readOnly || localeLimitReached || noCandidateLocales,
                 onChange: setNewLocale
               }
             ) : /* @__PURE__ */ jsx14(
-              Select2,
+              TextInput,
               {
                 id: "mui-builder-new-locale",
                 label: translate("builder.addLocale"),
                 value: newLocale,
-                options: [
-                  { value: "", label: "\u2014" },
-                  ...availableAllowedLocales.map((locale) => ({
-                    value: locale,
-                    label: resolved.getLocaleLabel?.(locale) ?? locale
-                  }))
-                ],
-                disabled: readOnly || localeLimitReached || availableAllowedLocales.length === 0,
+                disabled: readOnly || localeLimitReached,
                 onChange: setNewLocale
               }
             ) }),
-            /* @__PURE__ */ jsx14(Box2, { sx: { flexShrink: 0, minWidth: "max-content", whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx14(Button2, { variant: "primary", action: "addLocale", disabled: !canAddLocale, onClick: addLocale, children: translate("builder.addLocale") }) })
+            /* @__PURE__ */ jsx14(
+              Box3,
+              {
+                sx: {
+                  flexShrink: 0,
+                  minWidth: "max-content",
+                  ...localizationOptions.noWrapActions ?? true ? { whiteSpace: "nowrap" } : {}
+                },
+                children: /* @__PURE__ */ jsx14(
+                  Button2,
+                  {
+                    variant: "primary",
+                    action: "addLocale",
+                    noWrap: localizationOptions.noWrapActions ?? true,
+                    disabled: !canAddLocale,
+                    onClick: addLocale,
+                    children: translate("builder.addLocale")
+                  }
+                )
+              }
+            )
           ]
         }
       ),
+      localeLimitReached ? /* @__PURE__ */ jsx14(Typography4, { variant: "body2", color: "text.secondary", children: translate("builder.localization.maxLocalesReached", { max: policy?.maxLocales ?? 0 }) }) : null,
       locales.length === 0 ? null : /* @__PURE__ */ jsx14(
         Tabs,
         {
@@ -1175,6 +1354,7 @@ function createMuiLocalizationSlot(options) {
           children: locales.map((locale) => /* @__PURE__ */ jsx14(
             Tab,
             {
+              id: `mui-builder-locale-tab-${locale}`,
               value: locale,
               label: resolved.getLocaleLabel?.(locale) ?? locale,
               disabled: readOnly && locale !== currentLocale,
@@ -1184,10 +1364,11 @@ function createMuiLocalizationSlot(options) {
           ))
         }
       ),
-      !translationAdapterAvailable ? null : /* @__PURE__ */ jsx14(Box2, { sx: { minWidth: "max-content", whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx14(
+      !translationAdapterAvailable ? null : /* @__PURE__ */ jsx14(Box3, { sx: { minWidth: "max-content", whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx14(
         Button2,
         {
           variant: "secondary",
+          noWrap: localizationOptions.noWrapActions ?? true,
           disabled: readOnly || !editingLocaleConfigured || isTranslating,
           onClick: onAutoTranslate,
           children: isTranslating ? translate("builder.translating") : translate("builder.autoTranslate")
@@ -1236,7 +1417,7 @@ function createMuiLocalizationSlot(options) {
       ] });
     }
     return /* @__PURE__ */ jsx14(
-      Box2,
+      Box3,
       {
         "data-mui-slot": "localization",
         sx: {
@@ -1308,7 +1489,8 @@ function MuiFormBuilder({
   const contextValue = useMemo(() => ({ options: contextOptions }), [contextOptions]);
   const components = useMemo(() => ({ ...muiBuilderComponents, ...customComponents }), [customComponents]);
   const slots = useMemo(() => ({ ...muiBuilderSlots, ...customSlots }), [customSlots]);
-  const resolvedSectionOrder = sectionOrder ?? contextOptions.layoutOptions?.sectionOrder;
+  const placement = contextOptions.localizationOptions?.placement;
+  const resolvedSectionOrder = sectionOrder ?? (placement === void 0 ? contextOptions.layoutOptions?.sectionOrder : MUI_LOCALIZATION_SECTION_ORDERS[placement]);
   return /* @__PURE__ */ jsx15(MuiFormBuilderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx15(
     FormBuilder,
     {
@@ -1322,6 +1504,7 @@ function MuiFormBuilder({
 }
 export {
   DEFAULT_MUI_SECTION_ORDER,
+  MUI_LOCALIZATION_SECTION_ORDERS,
   MuiButtonAdapter,
   MuiCheckboxAdapter,
   MuiErrorMessageAdapter,
@@ -1356,6 +1539,7 @@ export {
   mergeMuiAdapterOptions,
   muiBuilderComponents,
   muiBuilderSlots,
+  muiDefaultFieldTypeIcon,
   muiDefaultIconResolver,
   resolveMuiAdapterOptions,
   useResolvedMuiAdapterOptions