@form-engine-ts/mui 2.9.4 → 2.9.6

package/dist/index.cjs

@@ -27,6 +27,7 @@ __export(index_exports, {
   MuiFieldEditorSlot: () => MuiFieldEditorSlot,
   MuiFieldsetAdapter: () => MuiFieldsetAdapter,
   MuiFormBuilder: () => MuiFormBuilder,
+  MuiFormBuilderContext: () => MuiFormBuilderContext,
   MuiIconButtonAdapter: () => MuiIconButtonAdapter,
   MuiLocalizationSlot: () => MuiLocalizationSlot,
   MuiOptionEditorSlot: () => MuiOptionEditorSlot,
@@ -51,16 +52,21 @@ __export(index_exports, {
   createMuiTextAreaAdapter: () => createMuiTextAreaAdapter,
   createMuiTextInputAdapter: () => createMuiTextInputAdapter,
   createMuiToolbarSlot: () => createMuiToolbarSlot,
+  mergeMuiAdapterOptions: () => mergeMuiAdapterOptions,
   muiBuilderComponents: () => muiBuilderComponents,
   muiBuilderSlots: () => muiBuilderSlots,
   muiDefaultIconResolver: () => muiDefaultIconResolver,
-  resolveMuiAdapterOptions: () => resolveMuiAdapterOptions
+  resolveMuiAdapterOptions: () => resolveMuiAdapterOptions,
+  useResolvedMuiAdapterOptions: () => useResolvedMuiAdapterOptions
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/adapters/Button.tsx
 var import_material = require("@mui/material");
 
+// src/context.ts
+var import_react = require("react");
+
 // src/types.ts
 var DEFAULT_MUI_SECTION_ORDER = [
   "basicSettings",
@@ -80,22 +86,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 = (0, import_react.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 = (0, import_react.useContext)(MuiFormBuilderContext);
+  return resolveMuiAdapterOptions(
+    overrides === void 0 ? context.options : mergeMuiAdapterOptions(context.options, overrides)
+  );
+}
+
 // src/adapters/Button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function createMuiButtonAdapter(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiButton({
     id,
     className,
@@ -111,6 +144,7 @@ function createMuiButtonAdapter(options) {
     action,
     targetId
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_material.Button,
       {
@@ -128,7 +162,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
       }
     );
@@ -140,7 +175,6 @@ var MuiButtonAdapter = createMuiButtonAdapter();
 var import_material2 = require("@mui/material");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function createMuiCheckboxAdapter(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiCheckbox({
     id,
     className,
@@ -157,6 +191,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__ */ (0, import_jsx_runtime2.jsxs)(import_material2.FormControl, { className, error: Boolean(error), required, disabled: disabled || readOnly, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         import_material2.FormControlLabel,
@@ -173,7 +210,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)
@@ -181,7 +218,7 @@ function createMuiCheckboxAdapter(options) {
           )
         }
       ),
-      helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.FormHelperText, { id: ariaDescribedBy, children: helperText })
+      helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.FormHelperText, { id: helperId, children: helperText })
     ] });
   };
 }
@@ -220,8 +257,8 @@ var MuiErrorMessageAdapter = createMuiErrorMessageAdapter();
 var import_material4 = require("@mui/material");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function createMuiFieldsetAdapter(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiFieldset({ className, legend, disabled, children }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       import_material4.Box,
       {
@@ -265,7 +302,6 @@ var FALLBACK_ACTION_LABELS = {
   dragHandle: "Reorder"
 };
 function createMuiIconButtonAdapter(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiIconButton({
     id,
     className,
@@ -279,6 +315,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";
@@ -306,7 +343,6 @@ var MuiIconButtonAdapter = createMuiIconButtonAdapter();
 var import_material6 = require("@mui/material");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function createMuiSectionAdapter(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiSection({
     id,
     className,
@@ -317,6 +353,7 @@ function createMuiSectionAdapter(options) {
     onClickCapture,
     children
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       import_material6.Paper,
       {
@@ -355,7 +392,6 @@ var MuiSectionAdapter = createMuiSectionAdapter();
 var import_material7 = require("@mui/material");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function createMuiSelectAdapter(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiSelect({
     id,
     className,
@@ -373,13 +409,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__ */ (0, import_jsx_runtime7.jsxs)(
       import_material7.FormControl,
       {
         className,
-        fullWidth: resolved.fullWidth,
+        fullWidth: resolved.inputFullWidth ?? resolved.fullWidth,
         size: resolved.size,
         variant: resolved.variant,
         error: Boolean(error),
@@ -400,13 +439,13 @@ function createMuiSelectAdapter(options) {
               readOnly,
               inputProps: {
                 "aria-label": ariaLabel,
-                "aria-describedby": ariaDescribedBy,
+                "aria-describedby": describedBy,
                 "aria-labelledby": ariaLabelledBy
               },
               children: selectOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.MenuItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value))
             }
           ),
-          helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.FormHelperText, { id: ariaDescribedBy, children: helperText })
+          helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.FormHelperText, { id: helperId, children: helperText })
         ]
       }
     );
@@ -418,7 +457,6 @@ var MuiSelectAdapter = createMuiSelectAdapter();
 var import_material8 = require("@mui/material");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function createMuiTextAreaAdapter(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiTextArea({
     id,
     className,
@@ -438,6 +476,7 @@ function createMuiTextAreaAdapter(options) {
     maxLength,
     rows
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_material8.TextField,
       {
@@ -453,6 +492,7 @@ function createMuiTextAreaAdapter(options) {
         slotProps: {
           htmlInput: {
             maxLength,
+            readOnly,
             "aria-label": ariaLabel,
             "aria-describedby": ariaDescribedBy,
             "aria-labelledby": ariaLabelledBy
@@ -463,7 +503,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)
@@ -477,7 +517,6 @@ var MuiTextAreaAdapter = createMuiTextAreaAdapter();
 var import_material9 = require("@mui/material");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function createMuiTextInputAdapter(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiTextInput({
     id,
     className,
@@ -501,6 +540,7 @@ function createMuiTextInputAdapter(options) {
     max,
     step
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_material9.TextField,
       {
@@ -520,6 +560,7 @@ function createMuiTextInputAdapter(options) {
             max,
             step,
             inputMode,
+            readOnly,
             "aria-label": ariaLabel,
             "aria-describedby": ariaDescribedBy,
             "aria-labelledby": ariaLabelledBy
@@ -529,7 +570,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)
@@ -567,7 +608,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 {
@@ -583,11 +624,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
@@ -597,7 +649,6 @@ var import_material12 = require("@mui/material");
 var import_material10 = require("@mui/material");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function createMuiOptionEditorSlot(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiOptionEditor({
     field,
     option,
@@ -608,6 +659,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__ */ (0, import_jsx_runtime11.jsxs)(import_material10.Stack, { ...resolved.muiSlotProps?.stack, "data-mui-slot": "option-editor", spacing: resolved.dense ? 0.75 : 1, children: [
@@ -665,7 +717,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)
         }
       )
     ] });
@@ -677,7 +729,6 @@ var MuiOptionEditorSlot = createMuiOptionEditorSlot();
 var import_material11 = require("@mui/material");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function createMuiToolbarSlot(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiToolbar({
     kind,
     index,
@@ -690,6 +741,7 @@ function createMuiToolbarSlot(options) {
     components,
     translate
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     const { IconButton: IconButton2 } = components;
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       import_material11.Stack,
@@ -773,7 +825,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({
@@ -788,12 +839,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__ */ (0, import_jsx_runtime13.jsxs)(
       import_material12.Card,
@@ -857,7 +910,7 @@ function createMuiFieldEditorSlot(options) {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            descriptionMode === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               TextArea,
               {
                 id: `mui-field-${field.id}-description`,
@@ -866,6 +919,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)
               }
             ),
@@ -979,17 +1033,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__ */ (0, import_jsx_runtime13.jsx)(
+              descriptionMode === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 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)
                 }
               )
             ] }),
@@ -1032,10 +1087,10 @@ var MuiFieldEditorSlot = createMuiFieldEditorSlot();
 // src/slots/Localization.tsx
 var import_icons_material2 = require("@mui/icons-material");
 var import_material13 = require("@mui/material");
-var import_react = require("react");
+var import_react2 = require("react");
 var import_jsx_runtime14 = require("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,
@@ -1050,8 +1105,9 @@ function createMuiLocalizationSlot(options) {
     components,
     translate
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     const { Button: Button2, ErrorMessage, Select: Select2, TextArea, TextInput } = components;
-    const [newLocale, setNewLocale] = (0, import_react.useState)("");
+    const [newLocale, setNewLocale] = (0, import_react2.useState)("");
     const locales = Array.from(
       new Set((schema.supportedLocales ?? []).filter((locale) => locale !== schema.defaultLocale))
     );
@@ -1074,51 +1130,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__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { alignItems: "center", direction: "row", spacing: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "subtitle1", fontWeight: "bold", children: translate("builder.localization") }),
+      localizationOptions.showSummary ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        import_material13.Chip,
+        {
+          label: summaryLabel,
+          size: "small",
+          color: configuredTranslationLocales.length > 0 ? "primary" : "default",
+          variant: "outlined"
+        }
+      ) : null
+    ] });
     const content = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { ...stackProps, spacing: resolved.dense ? 1 : 2, children: [
-      !collapsible ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "subtitle1", fontWeight: "bold", children: translate("builder.localization") }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { ...stackProps, direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          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__ */ (0, import_jsx_runtime14.jsx)(
-          TextInput,
-          {
-            id: "mui-builder-new-locale",
-            label: translate("builder.addLocale"),
-            value: newLocale,
-            disabled: readOnly || localeLimitReached,
-            onChange: setNewLocale
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          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__ */ (0, import_jsx_runtime14.jsx)(Button2, { variant: "primary", action: "addLocale", disabled: !canAddLocale, onClick: addLocale, children: translate("builder.addLocale") })
-      ] }),
+      !collapsible ? title : null,
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        import_material13.Stack,
+        {
+          ...stackProps,
+          direction: { xs: "column", sm: "row" },
+          alignItems: { xs: "stretch", sm: "center" },
+          spacing: resolved.dense ? 1 : 2,
+          sx: { mt: 1 },
+          children: [
+            defaultLocaleControl === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Box, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, children: defaultLocaleControl === "readOnly" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { spacing: 0.5, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "caption", color: "text.secondary", children: translate("builder.defaultLocale") }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                import_material13.Chip,
+                {
+                  label: resolved.getLocaleLabel?.(schema.defaultLocale ?? "") ?? schema.defaultLocale ?? "",
+                  size: resolved.size
+                }
+              )
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              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__ */ (0, import_jsx_runtime14.jsx)(import_material13.Box, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, children: availableAllowedLocales === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              TextInput,
+              {
+                id: "mui-builder-new-locale",
+                label: translate("builder.addLocale"),
+                value: newLocale,
+                disabled: readOnly || localeLimitReached,
+                onChange: setNewLocale
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              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__ */ (0, import_jsx_runtime14.jsx)(import_material13.Box, { sx: { flexShrink: 0, minWidth: "max-content", whiteSpace: "nowrap" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button2, { variant: "primary", action: "addLocale", disabled: !canAddLocale, onClick: addLocale, children: translate("builder.addLocale") }) })
+          ]
+        }
+      ),
       locales.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         import_material13.Tabs,
         {
@@ -1132,13 +1230,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__ */ (0, import_jsx_runtime14.jsx)(
+      !translationAdapterAvailable ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Box, { sx: { minWidth: "max-content", whiteSpace: "nowrap" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Button2,
         {
           variant: "secondary",
@@ -1146,9 +1245,9 @@ function createMuiLocalizationSlot(options) {
           onClick: onAutoTranslate,
           children: isTranslating ? translate("builder.translating") : translate("builder.autoTranslate")
         }
-      ),
+      ) }),
       translationError === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ErrorMessage, { message: translationError }),
-      !editingLocaleConfigured ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "body2", color: "text.secondary", children: translate("builder.selectLocale") }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { ...stackProps, spacing: resolved.dense ? 1 : 2, children: [
+      !editingLocaleConfigured ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "body2", color: "text.secondary", children: locales.length === 0 ? emptyStateMessage : translate("builder.selectLocale") }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { ...stackProps, spacing: resolved.dense ? 1 : 2, children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           TextInput,
           {
@@ -1156,7 +1255,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__ */ (0, import_jsx_runtime14.jsx)(
@@ -1166,7 +1265,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__ */ (0, import_jsx_runtime14.jsx)(
@@ -1176,16 +1275,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__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Accordion, { ...resolved.muiSlotProps?.accordion, "data-mui-slot": "localization", defaultExpanded, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.AccordionSummary, { expandIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons_material2.ExpandMore, {}), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "subtitle1", fontWeight: "bold", children: translate("builder.localization") }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.AccordionSummary, { expandIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons_material2.ExpandMore, {}), children: title }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.AccordionDetails, { children: content })
       ] });
     }
@@ -1210,10 +1309,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 {
@@ -1236,8 +1335,8 @@ function createMuiBuilderProps(options, overrides = {}) {
 }
 
 // src/MuiFormBuilder.tsx
-var import_react2 = require("@form-engine-ts/react");
-var import_react3 = require("react");
+var import_react3 = require("@form-engine-ts/react");
+var import_react4 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function MuiFormBuilder({
   muiOptions,
@@ -1246,26 +1345,31 @@ function MuiFormBuilder({
   muiSlotProps,
   components: customComponents,
   slots: customSlots,
+  sectionOrder,
   ...props
 }) {
-  const resolvedMuiOptions = (0, import_react3.useMemo)(
-    () => ({
-      ...muiOptions,
+  const contextOptions = (0, import_react4.useMemo)(
+    () => mergeMuiAdapterOptions(muiOptions, {
       ...layoutOptions === void 0 ? {} : { layoutOptions },
       ...localizationOptions === void 0 ? {} : { localizationOptions },
       ...muiSlotProps === void 0 ? {} : { muiSlotProps }
     }),
     [layoutOptions, localizationOptions, muiOptions, muiSlotProps]
   );
-  const components = (0, import_react3.useMemo)(
-    () => createMuiBuilderComponents(resolvedMuiOptions, customComponents),
-    [resolvedMuiOptions, customComponents]
-  );
-  const slots = (0, import_react3.useMemo)(
-    () => createMuiBuilderSlots(resolvedMuiOptions, customSlots),
-    [resolvedMuiOptions, customSlots]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react2.FormBuilder, { ...props, components, disableDefaultStyles: true, slots });
+  const contextValue = (0, import_react4.useMemo)(() => ({ options: contextOptions }), [contextOptions]);
+  const components = (0, import_react4.useMemo)(() => ({ ...muiBuilderComponents, ...customComponents }), [customComponents]);
+  const slots = (0, import_react4.useMemo)(() => ({ ...muiBuilderSlots, ...customSlots }), [customSlots]);
+  const resolvedSectionOrder = sectionOrder ?? contextOptions.layoutOptions?.sectionOrder;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MuiFormBuilderContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_react3.FormBuilder,
+    {
+      ...props,
+      components,
+      disableDefaultStyles: true,
+      slots,
+      ...resolvedSectionOrder === void 0 ? {} : { sectionOrder: resolvedSectionOrder }
+    }
+  ) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -1276,6 +1380,7 @@ function MuiFormBuilder({
   MuiFieldEditorSlot,
   MuiFieldsetAdapter,
   MuiFormBuilder,
+  MuiFormBuilderContext,
   MuiIconButtonAdapter,
   MuiLocalizationSlot,
   MuiOptionEditorSlot,
@@ -1300,8 +1405,10 @@ function MuiFormBuilder({
   createMuiTextAreaAdapter,
   createMuiTextInputAdapter,
   createMuiToolbarSlot,
+  mergeMuiAdapterOptions,
   muiBuilderComponents,
   muiBuilderSlots,
   muiDefaultIconResolver,
-  resolveMuiAdapterOptions
+  resolveMuiAdapterOptions,
+  useResolvedMuiAdapterOptions
 });