@form-engine-ts/mui 2.9.3 → 2.9.4

package/dist/index.js

@@ -2,13 +2,33 @@
 import { Button } from "@mui/material";
 
 // src/types.ts
+var DEFAULT_MUI_SECTION_ORDER = [
+  "basicSettings",
+  "questions",
+  "addQuestion",
+  "localization"
+];
 function resolveMuiAdapterOptions(options = {}) {
+  const buttonVariant = options.buttonVariant ?? "contained";
   return {
     size: options.size ?? "medium",
     variant: options.variant ?? "outlined",
-    buttonVariant: options.buttonVariant ?? "contained",
+    buttonVariant,
+    buttonVariants: {
+      primary: options.buttonVariants?.primary ?? buttonVariant,
+      secondary: options.buttonVariants?.secondary ?? buttonVariant,
+      danger: options.buttonVariants?.danger ?? buttonVariant
+    },
     fullWidth: options.fullWidth ?? true,
-    dense: options.dense ?? false
+    dense: options.dense ?? false,
+    getLocaleLabel: options.getLocaleLabel ?? ((locale) => locale),
+    ...options.getActionLabel === void 0 ? {} : { getActionLabel: options.getActionLabel },
+    layoutOptions: options.layoutOptions ?? {},
+    localizationOptions: {
+      collapsible: options.localizationOptions?.collapsible ?? false,
+      defaultExpanded: options.localizationOptions?.defaultExpanded ?? false
+    },
+    muiSlotProps: options.muiSlotProps ?? {}
   };
 }
 
@@ -47,7 +67,7 @@ function createMuiButtonAdapter(options) {
         "data-target-id": targetId,
         onClick,
         color: variant === "danger" ? "error" : "primary",
-        variant: resolved.buttonVariant,
+        variant: resolved.buttonVariants?.[variant ?? "primary"] ?? resolved.buttonVariant,
         fullWidth: resolved.fullWidth,
         children
       }
@@ -173,16 +193,16 @@ var MuiFieldsetAdapter = createMuiFieldsetAdapter();
 // src/adapters/IconButton.tsx
 import { IconButton, Tooltip } from "@mui/material";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var ACTION_LABELS = {
-  moveUp: "\u4E0A\u3078\u79FB\u52D5",
-  moveDown: "\u4E0B\u3078\u79FB\u52D5",
-  delete: "\u524A\u9664",
-  add: "\u8FFD\u52A0",
-  edit: "\u7DE8\u96C6",
-  settings: "\u8A2D\u5B9A",
-  translate: "\u7FFB\u8A33",
-  close: "\u9589\u3058\u308B",
-  dragHandle: "\u4E26\u3079\u66FF\u3048"
+var FALLBACK_ACTION_LABELS = {
+  moveUp: "Move up",
+  moveDown: "Move down",
+  delete: "Delete",
+  add: "Add",
+  edit: "Edit",
+  settings: "Settings",
+  translate: "Translate",
+  close: "Close",
+  dragHandle: "Reorder"
 };
 function createMuiIconButtonAdapter(options) {
   const resolved = resolveMuiAdapterOptions(options);
@@ -199,7 +219,7 @@ function createMuiIconButtonAdapter(options) {
     actionType,
     title
   }) {
-    const actionLabel = actionType === void 0 ? "\u64CD\u4F5C" : ACTION_LABELS[actionType];
+    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(
@@ -240,13 +260,14 @@ function createMuiSectionAdapter(options) {
     return /* @__PURE__ */ jsxs3(
       Paper,
       {
+        ...resolved.muiSlotProps?.paper,
         id,
         className,
         elevation: 0,
         "aria-label": ariaLabel,
         "aria-labelledby": title === void 0 ? void 0 : headingId,
         onClickCapture,
-        sx: {
+        sx: resolved.muiSlotProps?.paper?.sx ?? {
           p: resolved.dense ? 1.5 : 2,
           mb: resolved.dense ? 1 : 2,
           border: 1,
@@ -534,21 +555,22 @@ function createMuiOptionEditorSlot(options) {
     currentLocale,
     readOnly,
     actions,
-    components
+    components,
+    translate
   }) {
     const { IconButton: IconButton2, TextInput } = components;
     const describedBy = option.label.trim().length === 0 ? `mui-option-${option.id}-error` : void 0;
-    return /* @__PURE__ */ jsxs5(Stack, { "data-mui-slot": "option-editor", spacing: resolved.dense ? 0.75 : 1, children: [
+    return /* @__PURE__ */ jsxs5(Stack, { ...resolved.muiSlotProps?.stack, "data-mui-slot": "option-editor", spacing: resolved.dense ? 0.75 : 1, children: [
       /* @__PURE__ */ jsxs5(Stack, { direction: { xs: "column", sm: "row" }, spacing: 1, alignItems: { sm: "flex-start" }, children: [
         /* @__PURE__ */ jsx11(
           TextInput,
           {
             id: `mui-option-${option.id}`,
-            label: `Option ${index + 1}`,
+            label: translate("builder.optionLabel", { index: index + 1 }),
             value: option.label,
             required: true,
             error: option.label.trim().length === 0,
-            helperText: option.label.trim().length === 0 ? "Required" : "",
+            helperText: option.label.trim().length === 0 ? translate("builder.required") : "",
             "aria-describedby": describedBy,
             disabled: readOnly,
             onChange: (value) => actions.updateOption(field.id, option.id, (current) => ({ ...current, label: value }))
@@ -559,7 +581,7 @@ function createMuiOptionEditorSlot(options) {
             IconButton2,
             {
               actionType: "moveUp",
-              title: `Move ${option.label} up`,
+              title: translate("builder.moveUp", { title: option.label }),
               disabled: readOnly || index === 0,
               onClick: () => actions.moveOption(field.id, option.id, index - 1)
             }
@@ -568,7 +590,7 @@ function createMuiOptionEditorSlot(options) {
             IconButton2,
             {
               actionType: "moveDown",
-              title: `Move ${option.label} down`,
+              title: translate("builder.moveDown", { title: option.label }),
               disabled: readOnly || index === field.options.length - 1,
               onClick: () => actions.moveOption(field.id, option.id, index + 1)
             }
@@ -577,7 +599,7 @@ function createMuiOptionEditorSlot(options) {
             IconButton2,
             {
               actionType: "delete",
-              title: `Delete ${option.label}`,
+              title: translate("builder.delete", { title: option.label }),
               disabled: readOnly || field.options.length <= 1,
               onClick: () => actions.removeOption(field.id, option.id)
             }
@@ -588,7 +610,9 @@ function createMuiOptionEditorSlot(options) {
         TextInput,
         {
           id: `mui-option-${option.id}-${currentLocale}`,
-          label: `${currentLocale} translation`,
+          label: translate("builder.translation", {
+            locale: resolved.getLocaleLabel?.(currentLocale) ?? currentLocale
+          }),
           value: option.translations?.[currentLocale] ?? "",
           disabled: readOnly,
           onChange: (value) => actions.setLocaleTranslation(currentLocale, { kind: "option", id: option.id }, "label", value)
@@ -613,23 +637,25 @@ function createMuiToolbarSlot(options) {
     onMoveDown,
     onRemove,
     readOnly,
-    components
+    components,
+    translate
   }) {
     const { IconButton: IconButton2 } = components;
     return /* @__PURE__ */ jsxs6(
       Stack2,
       {
+        ...resolved.muiSlotProps?.stack,
         "data-mui-slot": "toolbar",
         direction: "row",
         spacing: resolved.dense ? 0.5 : 1,
         alignItems: "center",
-        sx: { mb: resolved.dense ? 1 : 2 },
+        sx: resolved.muiSlotProps?.stack?.sx ?? { mb: resolved.dense ? 1 : 2 },
         children: [
           /* @__PURE__ */ jsx12(
             IconButton2,
             {
               actionType: "moveUp",
-              title: `Move ${title} up`,
+              title: translate("builder.moveUp", { title }),
               disabled: readOnly || index === 0,
               onClick: onMoveUp
             }
@@ -638,7 +664,7 @@ function createMuiToolbarSlot(options) {
             IconButton2,
             {
               actionType: "moveDown",
-              title: `Move ${title} down`,
+              title: translate("builder.moveDown", { title }),
               disabled: readOnly || index === total - 1,
               onClick: onMoveDown
             }
@@ -647,7 +673,7 @@ function createMuiToolbarSlot(options) {
             IconButton2,
             {
               actionType: "delete",
-              title: `Delete ${title}`,
+              title: translate("builder.delete", { title }),
               disabled: readOnly || kind !== "page" && total <= 1,
               onClick: onRemove
             }
@@ -660,7 +686,7 @@ function createMuiToolbarSlot(options) {
 var MuiToolbarSlot = createMuiToolbarSlot();
 
 // src/slots/FieldEditor.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var FIELD_TYPES = [
   "text",
   "textarea",
@@ -674,6 +700,16 @@ var FIELD_TYPES = [
 function isFieldType(value) {
   return FIELD_TYPES.some((type) => type === value);
 }
+function conditionOperators(field) {
+  if (field.type === "multi-select") return ["contains", "not_empty"];
+  if (field.type === "text" || field.type === "textarea") {
+    return ["equals", "not_equals", "contains", "not_empty"];
+  }
+  return ["equals", "not_equals", "not_empty"];
+}
+function isConditionOperator(value) {
+  return ["equals", "not_equals", "contains", "not_empty"].some((operator) => operator === value);
+}
 function numericValue(value) {
   if (value.trim().length === 0) return void 0;
   const parsed = Number(value);
@@ -696,27 +732,32 @@ function createMuiFieldEditorSlot(options) {
     index,
     currentLocale,
     policy,
+    features,
     readOnly,
     actions,
-    components
+    components,
+    translate
   }) {
     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 titleErrorId = field.title.trim().length === 0 ? `mui-field-${field.id}-title-error` : void 0;
     return /* @__PURE__ */ jsxs7(
       Card,
       {
+        ...resolved.muiSlotProps?.card,
         "data-mui-slot": "field-editor",
         variant: "outlined",
-        sx: { mb: resolved.dense ? 1 : 2, p: resolved.dense ? 1.5 : 2 },
+        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,
@@ -730,7 +771,7 @@ function createMuiFieldEditorSlot(options) {
               components
             }
           ),
-          /* @__PURE__ */ jsxs7(Stack3, { spacing: resolved.dense ? 1 : 2, children: [
+          /* @__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(
@@ -738,11 +779,11 @@ function createMuiFieldEditorSlot(options) {
                 {
                   id: `mui-field-${field.id}-title`,
                   name: `fields.${field.id}.title`,
-                  label: "Question title",
+                  label: translate("builder.questionTitle"),
                   value: field.title,
                   required: true,
                   error: field.title.trim().length === 0,
-                  helperText: field.title.trim().length === 0 ? "Required" : "",
+                  helperText: field.title.trim().length === 0 ? translate("builder.required") : "",
                   "aria-describedby": titleErrorId,
                   disabled: readOnly,
                   onChange: (value) => actions.setSourceText({ kind: "field", id: field.id }, "title", value)
@@ -753,12 +794,11 @@ function createMuiFieldEditorSlot(options) {
                 {
                   id: `mui-field-${field.id}-type`,
                   name: `fields.${field.id}.type`,
-                  label: "Type",
-                  value: field.type,
-                  options: FIELD_TYPES.map((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: type,
-                    disabled: !allowedTypes.includes(type)
+                    label: translate(`builder.fieldType.${type}`)
                   })),
                   disabled: readOnly,
                   onChange: (value) => {
@@ -772,7 +812,7 @@ function createMuiFieldEditorSlot(options) {
               {
                 id: `mui-field-${field.id}-description`,
                 name: `fields.${field.id}.description`,
-                label: "Description",
+                label: translate("builder.description"),
                 value: field.description ?? "",
                 rows: resolved.dense ? 2 : 3,
                 disabled: readOnly,
@@ -784,20 +824,20 @@ function createMuiFieldEditorSlot(options) {
               {
                 id: `mui-field-${field.id}-required`,
                 name: `fields.${field.id}.required`,
-                label: "Required",
+                label: translate("builder.required"),
                 checked: field.required,
                 disabled: readOnly,
                 onChange: (checked) => actions.updateField(field.id, (current) => ({ ...current, required: checked }))
               }
             ),
-            schema.pages === void 0 ? null : /* @__PURE__ */ jsx13(
+            features?.pages === false || schema.pages === void 0 ? null : /* @__PURE__ */ jsx13(
               Select2,
               {
                 id: `mui-field-${field.id}-page`,
-                label: "Page",
+                label: translate("builder.questionPage"),
                 value: pageId,
                 options: [
-                  { value: "", label: "Unassigned" },
+                  { value: "", label: translate("builder.unassigned") },
                   ...schema.pages.map((page) => ({ value: page.id, label: page.title ?? page.id }))
                 ],
                 disabled: readOnly,
@@ -809,7 +849,7 @@ function createMuiFieldEditorSlot(options) {
                 TextInput,
                 {
                   id: `mui-field-${field.id}-minimum`,
-                  label: "Minimum",
+                  label: translate("builder.minimum"),
                   type: "number",
                   value: field.min === void 0 ? "" : String(field.min),
                   disabled: readOnly,
@@ -820,7 +860,7 @@ function createMuiFieldEditorSlot(options) {
                 TextInput,
                 {
                   id: `mui-field-${field.id}-maximum`,
-                  label: "Maximum",
+                  label: translate("builder.maximum"),
                   type: "number",
                   value: field.max === void 0 ? "" : String(field.max),
                   disabled: readOnly,
@@ -828,15 +868,15 @@ function createMuiFieldEditorSlot(options) {
                 }
               )
             ] }) : null,
-            conditionSources.length === 0 ? null : /* @__PURE__ */ jsxs7(Stack3, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
+            features?.conditions === false || conditionSources.length === 0 ? null : /* @__PURE__ */ jsxs7(Stack3, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
               /* @__PURE__ */ jsx13(
                 Select2,
                 {
                   id: `mui-field-${field.id}-condition-source`,
-                  label: "Display condition",
+                  label: translate("builder.displayCondition"),
                   value: condition?.questionId ?? "",
                   options: [
-                    { value: "", label: "Always visible" },
+                    { value: "", label: translate("builder.alwaysVisible") },
                     ...conditionSources.map((source) => ({ value: source.id, label: source.title }))
                   ],
                   disabled: readOnly,
@@ -846,27 +886,47 @@ function createMuiFieldEditorSlot(options) {
                   )
                 }
               ),
-              condition === void 0 ? null : /* @__PURE__ */ jsx13(
-                TextInput,
-                {
-                  id: `mui-field-${field.id}-condition-value`,
-                  label: "Condition value",
-                  value: condition.value === void 0 ? "" : String(condition.value),
-                  disabled: readOnly,
-                  onChange: (value) => actions.setDisplayCondition(field.id, { ...condition, value })
-                }
-              )
+              condition === void 0 ? null : /* @__PURE__ */ jsxs7(Fragment, { children: [
+                /* @__PURE__ */ jsx13(
+                  Select2,
+                  {
+                    id: `mui-field-${field.id}-condition-operator`,
+                    label: translate("builder.conditionOperator"),
+                    value: condition.operator,
+                    options: (conditionSource === void 0 ? [] : conditionOperators(conditionSource)).map(
+                      (operator) => ({ value: operator, label: translate(`builder.operator.${operator}`) })
+                    ),
+                    disabled: readOnly,
+                    onChange: (value) => {
+                      if (!isConditionOperator(value)) return;
+                      actions.setDisplayCondition(
+                        field.id,
+                        value === "not_empty" ? { questionId: condition.questionId, operator: value } : { ...condition, operator: value, value: condition.value ?? "" }
+                      );
+                    }
+                  }
+                ),
+                condition.operator === "not_empty" ? null : /* @__PURE__ */ jsx13(
+                  TextInput,
+                  {
+                    id: `mui-field-${field.id}-condition-value`,
+                    label: translate("builder.conditionValue"),
+                    value: condition.value === void 0 ? "" : String(condition.value),
+                    disabled: readOnly,
+                    onChange: (value) => actions.setDisplayCondition(field.id, { ...condition, value })
+                  }
+                )
+              ] })
             ] }),
             currentLocale.length === 0 ? null : /* @__PURE__ */ jsxs7(Stack3, { spacing: resolved.dense ? 1 : 2, children: [
-              /* @__PURE__ */ jsxs7(Typography3, { variant: "subtitle2", children: [
-                currentLocale,
-                " translation"
-              ] }),
+              /* @__PURE__ */ jsx13(Typography3, { variant: "subtitle2", children: translate("builder.translation", {
+                locale: resolved.getLocaleLabel?.(currentLocale) ?? currentLocale
+              }) }),
               /* @__PURE__ */ jsx13(
                 TextInput,
                 {
                   id: `mui-field-${field.id}-${currentLocale}-title`,
-                  label: "Translated question title",
+                  label: translate("builder.translatedQuestionTitle"),
                   value: field.translations?.[currentLocale]?.title ?? "",
                   disabled: readOnly,
                   onChange: (value) => actions.setLocaleTranslation(currentLocale, { kind: "field", id: field.id }, "title", value)
@@ -876,7 +936,7 @@ function createMuiFieldEditorSlot(options) {
                 TextArea,
                 {
                   id: `mui-field-${field.id}-${currentLocale}-description`,
-                  label: "Translated description",
+                  label: translate("builder.translatedDescription"),
                   value: field.translations?.[currentLocale]?.description ?? "",
                   disabled: readOnly,
                   onChange: (value) => actions.setLocaleTranslation(currentLocale, { kind: "field", id: field.id }, "description", value)
@@ -884,7 +944,7 @@ function createMuiFieldEditorSlot(options) {
               )
             ] }),
             "options" in field ? /* @__PURE__ */ jsxs7(Stack3, { "data-mui-slot": "options", spacing: resolved.dense ? 1 : 2, children: [
-              /* @__PURE__ */ jsx13(Typography3, { variant: "subtitle2", children: "Options" }),
+              /* @__PURE__ */ jsx13(Typography3, { variant: "subtitle2", children: translate("builder.options") }),
               field.options.map((option, optionIndex) => /* @__PURE__ */ jsx13(
                 OptionEditor,
                 {
@@ -893,6 +953,7 @@ function createMuiFieldEditorSlot(options) {
                   option,
                   index: optionIndex,
                   currentLocale,
+                  translate,
                   readOnly,
                   actions,
                   components
@@ -906,7 +967,7 @@ function createMuiFieldEditorSlot(options) {
                   targetId: field.id,
                   disabled: readOnly || policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
                   onClick: () => actions.addOption(field.id),
-                  children: "Add option"
+                  children: translate("builder.addOption")
                 }
               )
             ] }) : null
@@ -919,7 +980,8 @@ function createMuiFieldEditorSlot(options) {
 var MuiFieldEditorSlot = createMuiFieldEditorSlot();
 
 // src/slots/Localization.tsx
-import { Box as Box2, Stack as Stack4, Tab, Tabs, Typography as Typography4 } from "@mui/material";
+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 { useState } from "react";
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function createMuiLocalizationSlot(options) {
@@ -931,27 +993,152 @@ function createMuiLocalizationSlot(options) {
     onAutoTranslate,
     isTranslating,
     translationError,
+    policy,
+    translationAdapterAvailable,
     readOnly,
     actions,
-    components
+    components,
+    translate
   }) {
-    const { Button: Button2, ErrorMessage, TextArea, TextInput } = components;
+    const { Button: Button2, ErrorMessage, Select: Select2, TextArea, TextInput } = components;
     const [newLocale, setNewLocale] = useState("");
     const locales = Array.from(
-      /* @__PURE__ */ new Set([
-        ...schema.supportedLocales ?? [],
-        ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale]
-      ])
+      new Set((schema.supportedLocales ?? []).filter((locale) => locale !== schema.defaultLocale))
     );
+    const editingLocaleConfigured = locales.includes(currentLocale);
+    const registeredLocales = /* @__PURE__ */ new Set([
+      ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
+      ...schema.supportedLocales ?? []
+    ]);
+    const availableAllowedLocales = policy?.allowedLocales?.filter((locale) => !registeredLocales.has(locale));
+    const localeLimitReached = policy?.maxLocales !== void 0 && registeredLocales.size >= policy.maxLocales;
+    const normalizedLocale = newLocale.trim();
+    const localeAllowed = policy?.allowedLocales === void 0 || policy.allowedLocales.includes(normalizedLocale);
+    const canAddLocale = !readOnly && normalizedLocale.length > 0 && localeAllowed && !registeredLocales.has(normalizedLocale) && !localeLimitReached;
     const handleTabChange = (_event, value) => onCurrentLocaleChange(value);
     const addLocale = () => {
-      const normalized = newLocale.trim();
-      if (normalized.length === 0) return;
-      const result = actions.addLocale(normalized);
+      if (!canAddLocale) return;
+      const result = actions.addLocale(normalizedLocale);
       if (!result.success) return;
-      onCurrentLocaleChange(normalized);
+      onCurrentLocaleChange(normalizedLocale);
       setNewLocale("");
     };
+    const stackProps = resolved.muiSlotProps?.stack;
+    const collapsible = resolved.localizationOptions?.collapsible ?? false;
+    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") })
+      ] }),
+      locales.length === 0 ? null : /* @__PURE__ */ jsx14(
+        Tabs,
+        {
+          value: editingLocaleConfigured ? currentLocale : false,
+          onChange: handleTabChange,
+          variant: "scrollable",
+          scrollButtons: "auto",
+          "aria-label": translate("builder.translationLocale"),
+          children: locales.map((locale) => /* @__PURE__ */ jsx14(
+            Tab,
+            {
+              value: locale,
+              label: resolved.getLocaleLabel?.(locale) ?? locale,
+              disabled: readOnly && locale !== currentLocale
+            },
+            locale
+          ))
+        }
+      ),
+      !translationAdapterAvailable ? null : /* @__PURE__ */ jsx14(
+        Button2,
+        {
+          variant: "secondary",
+          disabled: readOnly || !editingLocaleConfigured || isTranslating,
+          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: [
+        /* @__PURE__ */ jsx14(
+          TextInput,
+          {
+            id: `mui-builder-${currentLocale}-form-title`,
+            label: translate("builder.translatedFormTitle"),
+            value: schema.translations?.[currentLocale]?.title ?? "",
+            disabled: readOnly,
+            onChange: (value) => actions.setLocaleTranslation(currentLocale, { kind: "form" }, "title", value)
+          }
+        ),
+        /* @__PURE__ */ jsx14(
+          TextArea,
+          {
+            id: `mui-builder-${currentLocale}-form-description`,
+            label: translate("builder.translatedFormDescription"),
+            value: schema.translations?.[currentLocale]?.description ?? "",
+            disabled: readOnly,
+            onChange: (value) => actions.setLocaleTranslation(currentLocale, { kind: "form" }, "description", value)
+          }
+        ),
+        /* @__PURE__ */ jsx14(
+          TextInput,
+          {
+            id: `mui-builder-${currentLocale}-completion-message`,
+            label: translate("builder.translatedCompletionMessage"),
+            value: schema.translations?.[currentLocale]?.completionMessage ?? "",
+            disabled: readOnly,
+            onChange: (value) => actions.setLocaleTranslation(currentLocale, { kind: "form" }, "completionMessage", value)
+          }
+        )
+      ] })
+    ] });
+    const configured = locales.length > 0;
+    const defaultExpanded = resolved.localizationOptions?.defaultExpanded === "when-configured" ? configured : resolved.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(AccordionDetails, { children: content })
+      ] });
+    }
     return /* @__PURE__ */ jsx14(
       Box2,
       {
@@ -963,95 +1150,7 @@ function createMuiLocalizationSlot(options) {
           borderColor: "divider",
           borderRadius: 1
         },
-        children: /* @__PURE__ */ jsxs8(Stack4, { spacing: resolved.dense ? 1 : 2, children: [
-          /* @__PURE__ */ jsx14(Typography4, { variant: "subtitle1", fontWeight: "bold", children: "Localization" }),
-          /* @__PURE__ */ jsx14(
-            TextInput,
-            {
-              id: "mui-builder-completion-message",
-              label: "Completion message",
-              value: schema.completionMessage ?? "",
-              disabled: readOnly,
-              onChange: (value) => actions.setSourceText({ kind: "form" }, "completionMessage", value)
-            }
-          ),
-          /* @__PURE__ */ jsxs8(Stack4, { direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
-            /* @__PURE__ */ jsx14(
-              TextInput,
-              {
-                id: "mui-builder-default-locale",
-                label: "Default locale",
-                value: schema.defaultLocale ?? "",
-                disabled: readOnly,
-                onChange: (value) => actions.setDefaultLocale(value)
-              }
-            ),
-            /* @__PURE__ */ jsx14(
-              TextInput,
-              {
-                id: "mui-builder-new-locale",
-                label: "Add locale",
-                value: newLocale,
-                disabled: readOnly,
-                onChange: setNewLocale
-              }
-            ),
-            /* @__PURE__ */ jsx14(Button2, { disabled: readOnly || newLocale.trim().length === 0, onClick: addLocale, children: "Add locale" })
-          ] }),
-          locales.length === 0 ? null : /* @__PURE__ */ jsx14(
-            Tabs,
-            {
-              value: locales.includes(currentLocale) ? currentLocale : false,
-              onChange: handleTabChange,
-              variant: "scrollable",
-              scrollButtons: "auto",
-              "aria-label": "Translation locale",
-              children: locales.map((locale) => /* @__PURE__ */ jsx14(Tab, { value: locale, label: locale, disabled: readOnly && locale !== currentLocale }, locale))
-            }
-          ),
-          /* @__PURE__ */ jsx14(
-            Button2,
-            {
-              variant: "secondary",
-              disabled: readOnly || currentLocale.length === 0 || isTranslating,
-              onClick: onAutoTranslate,
-              children: isTranslating ? "Translating\u2026" : "Translate all text"
-            }
-          ),
-          translationError === void 0 ? null : /* @__PURE__ */ jsx14(ErrorMessage, { message: translationError }),
-          currentLocale.length === 0 ? /* @__PURE__ */ jsx14(Typography4, { variant: "body2", color: "text.secondary", children: "Select a locale to edit translations." }) : /* @__PURE__ */ jsxs8(Stack4, { spacing: resolved.dense ? 1 : 2, children: [
-            /* @__PURE__ */ jsx14(
-              TextInput,
-              {
-                id: `mui-builder-${currentLocale}-form-title`,
-                label: "Translated form title",
-                value: schema.translations?.[currentLocale]?.title ?? "",
-                disabled: readOnly,
-                onChange: (value) => actions.setLocaleTranslation(currentLocale, { kind: "form" }, "title", value)
-              }
-            ),
-            /* @__PURE__ */ jsx14(
-              TextArea,
-              {
-                id: `mui-builder-${currentLocale}-form-description`,
-                label: "Translated form description",
-                value: schema.translations?.[currentLocale]?.description ?? "",
-                disabled: readOnly,
-                onChange: (value) => actions.setLocaleTranslation(currentLocale, { kind: "form" }, "description", value)
-              }
-            ),
-            /* @__PURE__ */ jsx14(
-              TextInput,
-              {
-                id: `mui-builder-${currentLocale}-completion-message`,
-                label: "Translated completion message",
-                value: schema.translations?.[currentLocale]?.completionMessage ?? "",
-                disabled: readOnly,
-                onChange: (value) => actions.setLocaleTranslation(currentLocale, { kind: "form" }, "completionMessage", value)
-              }
-            )
-          ] })
-        ] })
+        children: content
       }
     );
   };
@@ -1060,6 +1159,7 @@ var MuiLocalizationSlot = createMuiLocalizationSlot();
 
 // src/slots/index.ts
 var muiBuilderSlots = {
+  sectionOrder: DEFAULT_MUI_SECTION_ORDER,
   toolbar: createMuiToolbarSlot(),
   fieldEditor: createMuiFieldEditorSlot(),
   optionEditor: createMuiOptionEditorSlot(),
@@ -1067,6 +1167,7 @@ var muiBuilderSlots = {
 };
 function createMuiBuilderSlots(options, customOverrides = {}) {
   return {
+    sectionOrder: options?.layoutOptions?.sectionOrder ?? DEFAULT_MUI_SECTION_ORDER,
     toolbar: createMuiToolbarSlot(options),
     fieldEditor: createMuiFieldEditorSlot(options),
     optionEditor: createMuiOptionEditorSlot(options),
@@ -1092,18 +1193,34 @@ import { useMemo } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 function MuiFormBuilder({
   muiOptions,
+  layoutOptions,
+  localizationOptions,
+  muiSlotProps,
   components: customComponents,
   slots: customSlots,
   ...props
 }) {
+  const resolvedMuiOptions = useMemo(
+    () => ({
+      ...muiOptions,
+      ...layoutOptions === void 0 ? {} : { layoutOptions },
+      ...localizationOptions === void 0 ? {} : { localizationOptions },
+      ...muiSlotProps === void 0 ? {} : { muiSlotProps }
+    }),
+    [layoutOptions, localizationOptions, muiOptions, muiSlotProps]
+  );
   const components = useMemo(
-    () => createMuiBuilderComponents(muiOptions, customComponents),
-    [muiOptions, customComponents]
+    () => createMuiBuilderComponents(resolvedMuiOptions, customComponents),
+    [resolvedMuiOptions, customComponents]
+  );
+  const slots = useMemo(
+    () => createMuiBuilderSlots(resolvedMuiOptions, customSlots),
+    [resolvedMuiOptions, customSlots]
   );
-  const slots = useMemo(() => createMuiBuilderSlots(muiOptions, customSlots), [muiOptions, customSlots]);
   return /* @__PURE__ */ jsx15(FormBuilder, { ...props, components, disableDefaultStyles: true, slots });
 }
 export {
+  DEFAULT_MUI_SECTION_ORDER,
   MuiButtonAdapter,
   MuiCheckboxAdapter,
   MuiErrorMessageAdapter,