@form-engine-ts/mui 2.9.4 → 2.9.6

package/dist/index.js

@@ -1,6 +1,9 @@
 // src/adapters/Button.tsx
 import { Button } from "@mui/material";
 
+// src/context.ts
+import { createContext, useContext } from "react";
+
 // src/types.ts
 var DEFAULT_MUI_SECTION_ORDER = [
   "basicSettings",
@@ -20,22 +23,49 @@ function resolveMuiAdapterOptions(options = {}) {
       danger: options.buttonVariants?.danger ?? buttonVariant
     },
     fullWidth: options.fullWidth ?? true,
+    inputFullWidth: options.inputFullWidth ?? options.fullWidth ?? true,
+    buttonFullWidth: options.buttonFullWidth ?? options.fullWidth ?? false,
     dense: options.dense ?? false,
     getLocaleLabel: options.getLocaleLabel ?? ((locale) => locale),
     ...options.getActionLabel === void 0 ? {} : { getActionLabel: options.getActionLabel },
     layoutOptions: options.layoutOptions ?? {},
+    fieldEditorOptions: {
+      description: options.fieldEditorOptions?.description ?? "editable"
+    },
     localizationOptions: {
       collapsible: options.localizationOptions?.collapsible ?? false,
-      defaultExpanded: options.localizationOptions?.defaultExpanded ?? false
+      defaultExpanded: options.localizationOptions?.defaultExpanded ?? false,
+      showSummary: options.localizationOptions?.showSummary ?? false,
+      ...options.localizationOptions?.emptyStateMessage === void 0 ? {} : { emptyStateMessage: options.localizationOptions.emptyStateMessage },
+      defaultLocaleControl: options.localizationOptions?.defaultLocaleControl ?? "editable"
     },
     muiSlotProps: options.muiSlotProps ?? {}
   };
 }
 
+// src/context.ts
+var MuiFormBuilderContext = createContext({ options: {} });
+function mergeMuiAdapterOptions(base = {}, overrides = {}) {
+  return {
+    ...base,
+    ...overrides,
+    ...base.buttonVariants === void 0 && overrides.buttonVariants === void 0 ? {} : { buttonVariants: { ...base.buttonVariants, ...overrides.buttonVariants } },
+    ...base.layoutOptions === void 0 && overrides.layoutOptions === void 0 ? {} : { layoutOptions: { ...base.layoutOptions, ...overrides.layoutOptions } },
+    ...base.fieldEditorOptions === void 0 && overrides.fieldEditorOptions === void 0 ? {} : { fieldEditorOptions: { ...base.fieldEditorOptions, ...overrides.fieldEditorOptions } },
+    ...base.localizationOptions === void 0 && overrides.localizationOptions === void 0 ? {} : { localizationOptions: { ...base.localizationOptions, ...overrides.localizationOptions } },
+    ...base.muiSlotProps === void 0 && overrides.muiSlotProps === void 0 ? {} : { muiSlotProps: { ...base.muiSlotProps, ...overrides.muiSlotProps } }
+  };
+}
+function useResolvedMuiAdapterOptions(overrides) {
+  const context = useContext(MuiFormBuilderContext);
+  return resolveMuiAdapterOptions(
+    overrides === void 0 ? context.options : mergeMuiAdapterOptions(context.options, overrides)
+  );
+}
+
 // src/adapters/Button.tsx
 import { jsx } from "react/jsx-runtime";
 function createMuiButtonAdapter(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiButton({
     id,
     className,
@@ -51,6 +81,7 @@ function createMuiButtonAdapter(options) {
     action,
     targetId
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     return /* @__PURE__ */ jsx(
       Button,
       {
@@ -68,7 +99,8 @@ function createMuiButtonAdapter(options) {
         onClick,
         color: variant === "danger" ? "error" : "primary",
         variant: resolved.buttonVariants?.[variant ?? "primary"] ?? resolved.buttonVariant,
-        fullWidth: resolved.fullWidth,
+        fullWidth: resolved.buttonFullWidth ?? false,
+        sx: { whiteSpace: "nowrap" },
         children
       }
     );
@@ -80,7 +112,6 @@ var MuiButtonAdapter = createMuiButtonAdapter();
 import { Checkbox, FormControl, FormControlLabel, FormHelperText } from "@mui/material";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function createMuiCheckboxAdapter(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiCheckbox({
     id,
     className,
@@ -97,6 +128,9 @@ function createMuiCheckboxAdapter(options) {
     onChange,
     label
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
+    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: [
       /* @__PURE__ */ jsx2(
         FormControlLabel,
@@ -113,7 +147,7 @@ function createMuiCheckboxAdapter(options) {
               disabled: disabled || readOnly,
               inputProps: {
                 "aria-label": ariaLabel,
-                "aria-describedby": ariaDescribedBy,
+                "aria-describedby": describedBy,
                 "aria-labelledby": ariaLabelledBy
               },
               onChange: (event) => onChange(event.target.checked)
@@ -121,7 +155,7 @@ function createMuiCheckboxAdapter(options) {
           )
         }
       ),
-      helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx2(FormHelperText, { id: ariaDescribedBy, children: helperText })
+      helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx2(FormHelperText, { id: helperId, children: helperText })
     ] });
   };
 }
@@ -160,8 +194,8 @@ var MuiErrorMessageAdapter = createMuiErrorMessageAdapter();
 import { Box, Typography } from "@mui/material";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function createMuiFieldsetAdapter(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiFieldset({ className, legend, disabled, children }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     return /* @__PURE__ */ jsxs2(
       Box,
       {
@@ -205,7 +239,6 @@ var FALLBACK_ACTION_LABELS = {
   dragHandle: "Reorder"
 };
 function createMuiIconButtonAdapter(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiIconButton({
     id,
     className,
@@ -219,6 +252,7 @@ function createMuiIconButtonAdapter(options) {
     actionType,
     title
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     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";
@@ -246,7 +280,6 @@ var MuiIconButtonAdapter = createMuiIconButtonAdapter();
 import { Paper, Typography as Typography2 } from "@mui/material";
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function createMuiSectionAdapter(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiSection({
     id,
     className,
@@ -257,6 +290,7 @@ function createMuiSectionAdapter(options) {
     onClickCapture,
     children
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     return /* @__PURE__ */ jsxs3(
       Paper,
       {
@@ -295,7 +329,6 @@ var MuiSectionAdapter = createMuiSectionAdapter();
 import { FormControl as FormControl2, FormHelperText as FormHelperText2, InputLabel, MenuItem, Select } from "@mui/material";
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function createMuiSelectAdapter(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiSelect({
     id,
     className,
@@ -313,13 +346,16 @@ function createMuiSelectAdapter(options) {
     onChange,
     options: selectOptions
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     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);
     return /* @__PURE__ */ jsxs4(
       FormControl2,
       {
         className,
-        fullWidth: resolved.fullWidth,
+        fullWidth: resolved.inputFullWidth ?? resolved.fullWidth,
         size: resolved.size,
         variant: resolved.variant,
         error: Boolean(error),
@@ -340,13 +376,13 @@ function createMuiSelectAdapter(options) {
               readOnly,
               inputProps: {
                 "aria-label": ariaLabel,
-                "aria-describedby": ariaDescribedBy,
+                "aria-describedby": describedBy,
                 "aria-labelledby": ariaLabelledBy
               },
               children: selectOptions.map((option) => /* @__PURE__ */ jsx7(MenuItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value))
             }
           ),
-          helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx7(FormHelperText2, { id: ariaDescribedBy, children: helperText })
+          helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx7(FormHelperText2, { id: helperId, children: helperText })
         ]
       }
     );
@@ -358,7 +394,6 @@ var MuiSelectAdapter = createMuiSelectAdapter();
 import { TextField } from "@mui/material";
 import { jsx as jsx8 } from "react/jsx-runtime";
 function createMuiTextAreaAdapter(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiTextArea({
     id,
     className,
@@ -378,6 +413,7 @@ function createMuiTextAreaAdapter(options) {
     maxLength,
     rows
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     return /* @__PURE__ */ jsx8(
       TextField,
       {
@@ -393,6 +429,7 @@ function createMuiTextAreaAdapter(options) {
         slotProps: {
           htmlInput: {
             maxLength,
+            readOnly,
             "aria-label": ariaLabel,
             "aria-describedby": ariaDescribedBy,
             "aria-labelledby": ariaLabelledBy
@@ -403,7 +440,7 @@ function createMuiTextAreaAdapter(options) {
         multiline: true,
         rows,
         placeholder,
-        fullWidth: resolved.fullWidth,
+        fullWidth: resolved.inputFullWidth ?? resolved.fullWidth,
         size: resolved.size,
         variant: resolved.variant,
         onChange: (event) => onChange(event.currentTarget.value)
@@ -417,7 +454,6 @@ var MuiTextAreaAdapter = createMuiTextAreaAdapter();
 import { TextField as TextField2 } from "@mui/material";
 import { jsx as jsx9 } from "react/jsx-runtime";
 function createMuiTextInputAdapter(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiTextInput({
     id,
     className,
@@ -441,6 +477,7 @@ function createMuiTextInputAdapter(options) {
     max,
     step
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     return /* @__PURE__ */ jsx9(
       TextField2,
       {
@@ -460,6 +497,7 @@ function createMuiTextInputAdapter(options) {
             max,
             step,
             inputMode,
+            readOnly,
             "aria-label": ariaLabel,
             "aria-describedby": ariaDescribedBy,
             "aria-labelledby": ariaLabelledBy
@@ -469,7 +507,7 @@ function createMuiTextInputAdapter(options) {
         },
         type,
         placeholder,
-        fullWidth: resolved.fullWidth,
+        fullWidth: resolved.inputFullWidth ?? resolved.fullWidth,
         size: resolved.size,
         variant: resolved.variant,
         onChange: (event) => onChange(event.currentTarget.value)
@@ -517,7 +555,7 @@ function muiDefaultIconResolver(actionType) {
 
 // src/components.ts
 function isAdapterOptions(value) {
-  return "size" in value || "variant" in value || "buttonVariant" in value || "fullWidth" in value || "dense" in value;
+  return "size" in value || "variant" in value || "buttonVariant" in value || "buttonVariants" in value || "fullWidth" in value || "inputFullWidth" in value || "buttonFullWidth" in value || "dense" in value || "fieldEditorOptions" in value || "localizationOptions" in value || "layoutOptions" in value || "muiSlotProps" in value || "getLocaleLabel" in value || "getActionLabel" in value;
 }
 function buildMuiBuilderComponents(options) {
   return {
@@ -533,11 +571,22 @@ function buildMuiBuilderComponents(options) {
     renderIcon: muiDefaultIconResolver
   };
 }
-var muiBuilderComponents = buildMuiBuilderComponents();
+var muiBuilderComponents = {
+  Button: MuiButtonAdapter,
+  IconButton: MuiIconButtonAdapter,
+  TextInput: MuiTextInputAdapter,
+  TextArea: MuiTextAreaAdapter,
+  Select: MuiSelectAdapter,
+  Checkbox: MuiCheckboxAdapter,
+  Section: MuiSectionAdapter,
+  Fieldset: MuiFieldsetAdapter,
+  ErrorMessage: MuiErrorMessageAdapter,
+  renderIcon: muiDefaultIconResolver
+};
 function createMuiBuilderComponents(optionsOrOverrides = {}, customOverrides) {
   const options = isAdapterOptions(optionsOrOverrides) ? optionsOrOverrides : void 0;
   const overrides = customOverrides ?? (options === void 0 ? optionsOrOverrides : {});
-  return { ...buildMuiBuilderComponents(options), ...overrides };
+  return { ...options === void 0 ? muiBuilderComponents : buildMuiBuilderComponents(options), ...overrides };
 }
 
 // src/slots/FieldEditor.tsx
@@ -547,7 +596,6 @@ import { Card, Stack as Stack3, Typography as Typography3 } from "@mui/material"
 import { Stack } from "@mui/material";
 import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 function createMuiOptionEditorSlot(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiOptionEditor({
     field,
     option,
@@ -558,6 +606,7 @@ function createMuiOptionEditorSlot(options) {
     components,
     translate
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     const { IconButton: IconButton2, TextInput } = components;
     const describedBy = option.label.trim().length === 0 ? `mui-option-${option.id}-error` : void 0;
     return /* @__PURE__ */ jsxs5(Stack, { ...resolved.muiSlotProps?.stack, "data-mui-slot": "option-editor", spacing: resolved.dense ? 0.75 : 1, children: [
@@ -615,7 +664,7 @@ function createMuiOptionEditorSlot(options) {
           }),
           value: option.translations?.[currentLocale] ?? "",
           disabled: readOnly,
-          onChange: (value) => actions.setLocaleTranslation(currentLocale, { kind: "option", id: option.id }, "label", value)
+          onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "option", id: option.id }, "label", value)
         }
       )
     ] });
@@ -627,7 +676,6 @@ var MuiOptionEditorSlot = createMuiOptionEditorSlot();
 import { Stack as Stack2 } from "@mui/material";
 import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 function createMuiToolbarSlot(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiToolbar({
     kind,
     index,
@@ -640,6 +688,7 @@ function createMuiToolbarSlot(options) {
     components,
     translate
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     const { IconButton: IconButton2 } = components;
     return /* @__PURE__ */ jsxs6(
       Stack2,
@@ -723,7 +772,6 @@ function updateBound(field, property, value) {
   return remaining;
 }
 function createMuiFieldEditorSlot(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   const Toolbar = createMuiToolbarSlot(options);
   const OptionEditor = createMuiOptionEditorSlot(options);
   return function MuiFieldEditor({
@@ -738,12 +786,14 @@ function createMuiFieldEditorSlot(options) {
     components,
     translate
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     const { Button: Button2, Checkbox: Checkbox2, Select: Select2, TextArea, TextInput } = components;
     const allowedTypes = policy?.allowedFieldTypes ?? FIELD_TYPES;
     const pageId = schema.pages?.find((page) => page.questionIds.includes(field.id))?.id ?? "";
     const condition = field.displayCondition;
     const conditionSources = schema.fields.slice(0, index);
     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;
     return /* @__PURE__ */ jsxs7(
       Card,
@@ -807,7 +857,7 @@ function createMuiFieldEditorSlot(options) {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx13(
+            descriptionMode === "hidden" ? null : /* @__PURE__ */ jsx13(
               TextArea,
               {
                 id: `mui-field-${field.id}-description`,
@@ -816,6 +866,7 @@ function createMuiFieldEditorSlot(options) {
                 value: field.description ?? "",
                 rows: resolved.dense ? 2 : 3,
                 disabled: readOnly,
+                readOnly: descriptionMode === "readOnly",
                 onChange: (value) => actions.setSourceText({ kind: "field", id: field.id }, "description", value)
               }
             ),
@@ -929,17 +980,18 @@ function createMuiFieldEditorSlot(options) {
                   label: translate("builder.translatedQuestionTitle"),
                   value: field.translations?.[currentLocale]?.title ?? "",
                   disabled: readOnly,
-                  onChange: (value) => actions.setLocaleTranslation(currentLocale, { kind: "field", id: field.id }, "title", value)
+                  onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "field", id: field.id }, "title", value)
                 }
               ),
-              /* @__PURE__ */ jsx13(
+              descriptionMode === "hidden" ? null : /* @__PURE__ */ jsx13(
                 TextArea,
                 {
                   id: `mui-field-${field.id}-${currentLocale}-description`,
                   label: translate("builder.translatedDescription"),
                   value: field.translations?.[currentLocale]?.description ?? "",
                   disabled: readOnly,
-                  onChange: (value) => actions.setLocaleTranslation(currentLocale, { kind: "field", id: field.id }, "description", value)
+                  readOnly: descriptionMode === "readOnly",
+                  onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "field", id: field.id }, "description", value)
                 }
               )
             ] }),
@@ -981,11 +1033,11 @@ var MuiFieldEditorSlot = createMuiFieldEditorSlot();
 
 // src/slots/Localization.tsx
 import { ExpandMore } from "@mui/icons-material";
-import { Accordion, AccordionDetails, AccordionSummary, Box as Box2, Stack as Stack4, Tab, Tabs, Typography as Typography4 } from "@mui/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 { 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 createMuiLocalizationSlot(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiLocalization({
     schema,
     currentLocale,
@@ -1000,6 +1052,7 @@ function createMuiLocalizationSlot(options) {
     components,
     translate
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     const { Button: Button2, ErrorMessage, Select: Select2, TextArea, TextInput } = components;
     const [newLocale, setNewLocale] = useState("");
     const locales = Array.from(
@@ -1024,51 +1077,93 @@ function createMuiLocalizationSlot(options) {
       setNewLocale("");
     };
     const stackProps = resolved.muiSlotProps?.stack;
-    const collapsible = resolved.localizationOptions?.collapsible ?? false;
+    const localizationOptions = resolved.localizationOptions ?? {};
+    const collapsible = localizationOptions.collapsible ?? false;
+    const defaultLocaleControl = localizationOptions.defaultLocaleControl ?? "editable";
+    const configuredTranslationLocales = locales.filter((locale) => locale !== schema.defaultLocale);
+    const configuredLocales = [
+      ...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(
+      (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 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(
+        Chip,
+        {
+          label: summaryLabel,
+          size: "small",
+          color: configuredTranslationLocales.length > 0 ? "primary" : "default",
+          variant: "outlined"
+        }
+      ) : null
+    ] });
     const content = /* @__PURE__ */ jsxs8(Stack4, { ...stackProps, spacing: resolved.dense ? 1 : 2, children: [
-      !collapsible ? /* @__PURE__ */ jsx14(Typography4, { variant: "subtitle1", fontWeight: "bold", children: translate("builder.localization") }) : null,
-      /* @__PURE__ */ jsxs8(Stack4, { ...stackProps, direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
-        /* @__PURE__ */ jsx14(
-          TextInput,
-          {
-            id: "mui-builder-default-locale",
-            label: translate("builder.defaultLocale"),
-            value: schema.defaultLocale ?? "",
-            disabled: readOnly,
-            onChange: (value) => {
-              const result = actions.setDefaultLocale(value);
-              if (result.success && value === currentLocale) onCurrentLocaleChange("");
-            }
-          }
-        ),
-        availableAllowedLocales === void 0 ? /* @__PURE__ */ jsx14(
-          TextInput,
-          {
-            id: "mui-builder-new-locale",
-            label: translate("builder.addLocale"),
-            value: newLocale,
-            disabled: readOnly || localeLimitReached,
-            onChange: setNewLocale
-          }
-        ) : /* @__PURE__ */ jsx14(
-          Select2,
-          {
-            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,
-            onChange: setNewLocale
-          }
-        ),
-        /* @__PURE__ */ jsx14(Button2, { variant: "primary", action: "addLocale", disabled: !canAddLocale, onClick: addLocale, children: translate("builder.addLocale") })
-      ] }),
+      !collapsible ? title : null,
+      /* @__PURE__ */ jsxs8(
+        Stack4,
+        {
+          ...stackProps,
+          direction: { xs: "column", sm: "row" },
+          alignItems: { xs: "stretch", sm: "center" },
+          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: [
+              /* @__PURE__ */ jsx14(Typography4, { variant: "caption", color: "text.secondary", children: translate("builder.defaultLocale") }),
+              /* @__PURE__ */ jsx14(
+                Chip,
+                {
+                  label: resolved.getLocaleLabel?.(schema.defaultLocale ?? "") ?? schema.defaultLocale ?? "",
+                  size: resolved.size
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx14(
+              TextInput,
+              {
+                id: "mui-builder-default-locale",
+                label: translate("builder.defaultLocale"),
+                value: schema.defaultLocale ?? "",
+                disabled: readOnly,
+                onChange: (value) => {
+                  const result = actions.setDefaultLocale(value);
+                  if (result.success && value === currentLocale) onCurrentLocaleChange("");
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsx14(Box2, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, children: availableAllowedLocales === void 0 ? /* @__PURE__ */ jsx14(
+              TextInput,
+              {
+                id: "mui-builder-new-locale",
+                label: translate("builder.addLocale"),
+                value: newLocale,
+                disabled: readOnly || localeLimitReached,
+                onChange: setNewLocale
+              }
+            ) : /* @__PURE__ */ jsx14(
+              Select2,
+              {
+                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,
+                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") }) })
+          ]
+        }
+      ),
       locales.length === 0 ? null : /* @__PURE__ */ jsx14(
         Tabs,
         {
@@ -1082,13 +1177,14 @@ function createMuiLocalizationSlot(options) {
             {
               value: locale,
               label: resolved.getLocaleLabel?.(locale) ?? locale,
-              disabled: readOnly && locale !== currentLocale
+              disabled: readOnly && locale !== currentLocale,
+              sx: { whiteSpace: "nowrap" }
             },
             locale
           ))
         }
       ),
-      !translationAdapterAvailable ? null : /* @__PURE__ */ jsx14(
+      !translationAdapterAvailable ? null : /* @__PURE__ */ jsx14(Box2, { sx: { minWidth: "max-content", whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx14(
         Button2,
         {
           variant: "secondary",
@@ -1096,9 +1192,9 @@ function createMuiLocalizationSlot(options) {
           onClick: onAutoTranslate,
           children: isTranslating ? translate("builder.translating") : translate("builder.autoTranslate")
         }
-      ),
+      ) }),
       translationError === void 0 ? null : /* @__PURE__ */ jsx14(ErrorMessage, { message: translationError }),
-      !editingLocaleConfigured ? /* @__PURE__ */ jsx14(Typography4, { variant: "body2", color: "text.secondary", children: translate("builder.selectLocale") }) : /* @__PURE__ */ jsxs8(Stack4, { ...stackProps, spacing: resolved.dense ? 1 : 2, children: [
+      !editingLocaleConfigured ? /* @__PURE__ */ jsx14(Typography4, { variant: "body2", color: "text.secondary", children: locales.length === 0 ? emptyStateMessage : translate("builder.selectLocale") }) : /* @__PURE__ */ jsxs8(Stack4, { ...stackProps, spacing: resolved.dense ? 1 : 2, children: [
         /* @__PURE__ */ jsx14(
           TextInput,
           {
@@ -1106,7 +1202,7 @@ function createMuiLocalizationSlot(options) {
             label: translate("builder.translatedFormTitle"),
             value: schema.translations?.[currentLocale]?.title ?? "",
             disabled: readOnly,
-            onChange: (value) => actions.setLocaleTranslation(currentLocale, { kind: "form" }, "title", value)
+            onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "form" }, "title", value)
           }
         ),
         /* @__PURE__ */ jsx14(
@@ -1116,7 +1212,7 @@ function createMuiLocalizationSlot(options) {
             label: translate("builder.translatedFormDescription"),
             value: schema.translations?.[currentLocale]?.description ?? "",
             disabled: readOnly,
-            onChange: (value) => actions.setLocaleTranslation(currentLocale, { kind: "form" }, "description", value)
+            onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "form" }, "description", value)
           }
         ),
         /* @__PURE__ */ jsx14(
@@ -1126,16 +1222,16 @@ function createMuiLocalizationSlot(options) {
             label: translate("builder.translatedCompletionMessage"),
             value: schema.translations?.[currentLocale]?.completionMessage ?? "",
             disabled: readOnly,
-            onChange: (value) => actions.setLocaleTranslation(currentLocale, { kind: "form" }, "completionMessage", value)
+            onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "form" }, "completionMessage", value)
           }
         )
       ] })
     ] });
     const configured = locales.length > 0;
-    const defaultExpanded = resolved.localizationOptions?.defaultExpanded === "when-configured" ? configured : resolved.localizationOptions?.defaultExpanded ?? false;
+    const defaultExpanded = localizationOptions.defaultExpanded === "when-configured" ? configured : localizationOptions.defaultExpanded === "always" ? true : localizationOptions.defaultExpanded ?? false;
     if (collapsible) {
       return /* @__PURE__ */ jsxs8(Accordion, { ...resolved.muiSlotProps?.accordion, "data-mui-slot": "localization", defaultExpanded, children: [
-        /* @__PURE__ */ jsx14(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx14(ExpandMore, {}), children: /* @__PURE__ */ jsx14(Typography4, { variant: "subtitle1", fontWeight: "bold", children: translate("builder.localization") }) }),
+        /* @__PURE__ */ jsx14(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx14(ExpandMore, {}), children: title }),
         /* @__PURE__ */ jsx14(AccordionDetails, { children: content })
       ] });
     }
@@ -1160,10 +1256,10 @@ var MuiLocalizationSlot = createMuiLocalizationSlot();
 // src/slots/index.ts
 var muiBuilderSlots = {
   sectionOrder: DEFAULT_MUI_SECTION_ORDER,
-  toolbar: createMuiToolbarSlot(),
-  fieldEditor: createMuiFieldEditorSlot(),
-  optionEditor: createMuiOptionEditorSlot(),
-  localization: createMuiLocalizationSlot()
+  toolbar: MuiToolbarSlot,
+  fieldEditor: MuiFieldEditorSlot,
+  optionEditor: MuiOptionEditorSlot,
+  localization: MuiLocalizationSlot
 };
 function createMuiBuilderSlots(options, customOverrides = {}) {
   return {
@@ -1198,26 +1294,31 @@ function MuiFormBuilder({
   muiSlotProps,
   components: customComponents,
   slots: customSlots,
+  sectionOrder,
   ...props
 }) {
-  const resolvedMuiOptions = useMemo(
-    () => ({
-      ...muiOptions,
+  const contextOptions = useMemo(
+    () => mergeMuiAdapterOptions(muiOptions, {
       ...layoutOptions === void 0 ? {} : { layoutOptions },
       ...localizationOptions === void 0 ? {} : { localizationOptions },
       ...muiSlotProps === void 0 ? {} : { muiSlotProps }
     }),
     [layoutOptions, localizationOptions, muiOptions, muiSlotProps]
   );
-  const components = useMemo(
-    () => createMuiBuilderComponents(resolvedMuiOptions, customComponents),
-    [resolvedMuiOptions, customComponents]
-  );
-  const slots = useMemo(
-    () => createMuiBuilderSlots(resolvedMuiOptions, customSlots),
-    [resolvedMuiOptions, customSlots]
-  );
-  return /* @__PURE__ */ jsx15(FormBuilder, { ...props, components, disableDefaultStyles: true, slots });
+  const contextValue = useMemo(() => ({ options: contextOptions }), [contextOptions]);
+  const components = useMemo(() => ({ ...muiBuilderComponents, ...customComponents }), [customComponents]);
+  const slots = useMemo(() => ({ ...muiBuilderSlots, ...customSlots }), [customSlots]);
+  const resolvedSectionOrder = sectionOrder ?? contextOptions.layoutOptions?.sectionOrder;
+  return /* @__PURE__ */ jsx15(MuiFormBuilderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx15(
+    FormBuilder,
+    {
+      ...props,
+      components,
+      disableDefaultStyles: true,
+      slots,
+      ...resolvedSectionOrder === void 0 ? {} : { sectionOrder: resolvedSectionOrder }
+    }
+  ) });
 }
 export {
   DEFAULT_MUI_SECTION_ORDER,
@@ -1227,6 +1328,7 @@ export {
   MuiFieldEditorSlot,
   MuiFieldsetAdapter,
   MuiFormBuilder,
+  MuiFormBuilderContext,
   MuiIconButtonAdapter,
   MuiLocalizationSlot,
   MuiOptionEditorSlot,
@@ -1251,8 +1353,10 @@ export {
   createMuiTextAreaAdapter,
   createMuiTextInputAdapter,
   createMuiToolbarSlot,
+  mergeMuiAdapterOptions,
   muiBuilderComponents,
   muiBuilderSlots,
   muiDefaultIconResolver,
-  resolveMuiAdapterOptions
+  resolveMuiAdapterOptions,
+  useResolvedMuiAdapterOptions
 };