@form-engine-ts/mui 2.9.3 → 2.9.5

package/dist/index.cjs

@@ -20,12 +20,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  DEFAULT_MUI_SECTION_ORDER: () => DEFAULT_MUI_SECTION_ORDER,
   MuiButtonAdapter: () => MuiButtonAdapter,
   MuiCheckboxAdapter: () => MuiCheckboxAdapter,
   MuiErrorMessageAdapter: () => MuiErrorMessageAdapter,
   MuiFieldEditorSlot: () => MuiFieldEditorSlot,
   MuiFieldsetAdapter: () => MuiFieldsetAdapter,
   MuiFormBuilder: () => MuiFormBuilder,
+  MuiFormBuilderContext: () => MuiFormBuilderContext,
   MuiIconButtonAdapter: () => MuiIconButtonAdapter,
   MuiLocalizationSlot: () => MuiLocalizationSlot,
   MuiOptionEditorSlot: () => MuiOptionEditorSlot,
@@ -50,31 +52,81 @@ __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",
+  "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
+    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,
+      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,
@@ -90,6 +142,7 @@ function createMuiButtonAdapter(options) {
     action,
     targetId
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_material.Button,
       {
@@ -106,8 +159,8 @@ function createMuiButtonAdapter(options) {
         "data-target-id": targetId,
         onClick,
         color: variant === "danger" ? "error" : "primary",
-        variant: resolved.buttonVariant,
-        fullWidth: resolved.fullWidth,
+        variant: resolved.buttonVariants?.[variant ?? "primary"] ?? resolved.buttonVariant,
+        fullWidth: resolved.buttonFullWidth ?? false,
         children
       }
     );
@@ -119,7 +172,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,
@@ -136,6 +188,7 @@ function createMuiCheckboxAdapter(options) {
     onChange,
     label
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     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,
@@ -199,8 +252,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,
       {
@@ -232,19 +285,18 @@ var MuiFieldsetAdapter = createMuiFieldsetAdapter();
 // src/adapters/IconButton.tsx
 var import_material5 = require("@mui/material");
 var import_jsx_runtime5 = require("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);
   return function MuiIconButton({
     id,
     className,
@@ -258,7 +310,8 @@ function createMuiIconButtonAdapter(options) {
     actionType,
     title
   }) {
-    const actionLabel = actionType === void 0 ? "\u64CD\u4F5C" : ACTION_LABELS[actionType];
+    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";
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Tooltip, { title: tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -285,7 +338,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,
@@ -296,16 +348,18 @@ function createMuiSectionAdapter(options) {
     onClickCapture,
     children
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       import_material6.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,
@@ -333,7 +387,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,
@@ -351,13 +404,14 @@ function createMuiSelectAdapter(options) {
     onChange,
     options: selectOptions
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     const labelId = id === void 0 || label === void 0 ? void 0 : `${id}-label`;
     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),
@@ -396,7 +450,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,
@@ -416,6 +469,7 @@ function createMuiTextAreaAdapter(options) {
     maxLength,
     rows
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_material8.TextField,
       {
@@ -431,6 +485,7 @@ function createMuiTextAreaAdapter(options) {
         slotProps: {
           htmlInput: {
             maxLength,
+            readOnly,
             "aria-label": ariaLabel,
             "aria-describedby": ariaDescribedBy,
             "aria-labelledby": ariaLabelledBy
@@ -441,7 +496,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)
@@ -455,7 +510,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,
@@ -479,6 +533,7 @@ function createMuiTextInputAdapter(options) {
     max,
     step
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_material9.TextField,
       {
@@ -498,6 +553,7 @@ function createMuiTextInputAdapter(options) {
             max,
             step,
             inputMode,
+            readOnly,
             "aria-label": ariaLabel,
             "aria-describedby": ariaDescribedBy,
             "aria-labelledby": ariaLabelledBy
@@ -507,7 +563,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)
@@ -545,7 +601,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 {
@@ -561,11 +617,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
@@ -575,7 +642,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,
@@ -583,21 +649,23 @@ function createMuiOptionEditorSlot(options) {
     currentLocale,
     readOnly,
     actions,
-    components
+    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, { "data-mui-slot": "option-editor", spacing: resolved.dense ? 0.75 : 1, children: [
+    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: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material10.Stack, { direction: { xs: "column", sm: "row" }, spacing: 1, alignItems: { sm: "flex-start" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           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 }))
@@ -608,7 +676,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)
             }
@@ -617,7 +685,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)
             }
@@ -626,7 +694,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)
             }
@@ -637,10 +705,12 @@ 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)
+          onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "option", id: option.id }, "label", value)
         }
       )
     ] });
@@ -652,7 +722,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,
@@ -662,23 +731,26 @@ function createMuiToolbarSlot(options) {
     onMoveDown,
     onRemove,
     readOnly,
-    components
+    components,
+    translate
   }) {
+    const resolved = useResolvedMuiAdapterOptions(options);
     const { IconButton: IconButton2 } = components;
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       import_material11.Stack,
       {
+        ...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__ */ (0, import_jsx_runtime12.jsx)(
             IconButton2,
             {
               actionType: "moveUp",
-              title: `Move ${title} up`,
+              title: translate("builder.moveUp", { title }),
               disabled: readOnly || index === 0,
               onClick: onMoveUp
             }
@@ -687,7 +759,7 @@ function createMuiToolbarSlot(options) {
             IconButton2,
             {
               actionType: "moveDown",
-              title: `Move ${title} down`,
+              title: translate("builder.moveDown", { title }),
               disabled: readOnly || index === total - 1,
               onClick: onMoveDown
             }
@@ -696,7 +768,7 @@ function createMuiToolbarSlot(options) {
             IconButton2,
             {
               actionType: "delete",
-              title: `Delete ${title}`,
+              title: translate("builder.delete", { title }),
               disabled: readOnly || kind !== "page" && total <= 1,
               onClick: onRemove
             }
@@ -723,6 +795,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);
@@ -736,7 +818,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({
@@ -745,27 +826,34 @@ function createMuiFieldEditorSlot(options) {
     index,
     currentLocale,
     policy,
+    features,
     readOnly,
     actions,
-    components
+    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,
       {
+        ...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__ */ (0, import_jsx_runtime13.jsx)(
             Toolbar,
             {
               schema,
+              translate,
               kind: "field",
               targetId: field.id,
               index,
@@ -779,7 +867,7 @@ function createMuiFieldEditorSlot(options) {
               components
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { spacing: resolved.dense ? 1 : 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { ...resolved.muiSlotProps?.stack, spacing: resolved.dense ? 1 : 2, children: [
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.Typography, { variant: "subtitle1", fontWeight: "bold", children: field.title }),
             /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -787,11 +875,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)
@@ -802,12 +890,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) => {
@@ -816,15 +903,16 @@ 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`,
                 name: `fields.${field.id}.description`,
-                label: "Description",
+                label: translate("builder.description"),
                 value: field.description ?? "",
                 rows: resolved.dense ? 2 : 3,
                 disabled: readOnly,
+                readOnly: descriptionMode === "readOnly",
                 onChange: (value) => actions.setSourceText({ kind: "field", id: field.id }, "description", value)
               }
             ),
@@ -833,20 +921,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__ */ (0, import_jsx_runtime13.jsx)(
+            features?.pages === false || schema.pages === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               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,
@@ -858,7 +946,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,
@@ -869,7 +957,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,
@@ -877,15 +965,15 @@ function createMuiFieldEditorSlot(options) {
                 }
               )
             ] }) : null,
-            conditionSources.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
+            features?.conditions === false || conditionSources.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 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,
@@ -895,45 +983,66 @@ function createMuiFieldEditorSlot(options) {
                   )
                 }
               ),
-              condition === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                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__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  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__ */ (0, import_jsx_runtime13.jsx)(
+                  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__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { spacing: resolved.dense ? 1 : 2, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Typography, { variant: "subtitle2", children: [
-                currentLocale,
-                " translation"
-              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.Typography, { variant: "subtitle2", children: translate("builder.translation", {
+                locale: resolved.getLocaleLabel?.(currentLocale) ?? currentLocale
+              }) }),
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 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)
+                  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: "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)
+                  readOnly: descriptionMode === "readOnly",
+                  onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "field", id: field.id }, "description", value)
                 }
               )
             ] }),
             "options" in field ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { "data-mui-slot": "options", spacing: resolved.dense ? 1 : 2, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.Typography, { variant: "subtitle2", children: "Options" }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.Typography, { variant: "subtitle2", children: translate("builder.options") }),
               field.options.map((option, optionIndex) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 OptionEditor,
                 {
@@ -942,6 +1051,7 @@ function createMuiFieldEditorSlot(options) {
                   option,
                   index: optionIndex,
                   currentLocale,
+                  translate,
                   readOnly,
                   actions,
                   components
@@ -955,7 +1065,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
@@ -968,11 +1078,11 @@ function createMuiFieldEditorSlot(options) {
 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");
 function createMuiLocalizationSlot(options) {
-  const resolved = resolveMuiAdapterOptions(options);
   return function MuiLocalization({
     schema,
     currentLocale,
@@ -980,27 +1090,163 @@ function createMuiLocalizationSlot(options) {
     onAutoTranslate,
     isTranslating,
     translationError,
+    policy,
+    translationAdapterAvailable,
     readOnly,
     actions,
-    components
+    components,
+    translate
   }) {
-    const { Button: Button2, ErrorMessage, TextArea, TextInput } = components;
-    const [newLocale, setNewLocale] = (0, import_react.useState)("");
+    const resolved = useResolvedMuiAdapterOptions(options);
+    const { Button: Button2, ErrorMessage, Select: Select2, TextArea, TextInput } = components;
+    const [newLocale, setNewLocale] = (0, import_react2.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 defaultLocaleControl = resolved.localizationOptions?.defaultLocaleControl ?? "editable";
+    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: [
+        defaultLocaleControl === "hidden" ? null : 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("");
+            }
+          }
+        ),
+        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") })
+      ] }),
+      locales.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        import_material13.Tabs,
+        {
+          value: editingLocaleConfigured ? currentLocale : false,
+          onChange: handleTabChange,
+          variant: "scrollable",
+          scrollButtons: "auto",
+          "aria-label": translate("builder.translationLocale"),
+          children: locales.map((locale) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_material13.Tab,
+            {
+              value: locale,
+              label: resolved.getLocaleLabel?.(locale) ?? locale,
+              disabled: readOnly && locale !== currentLocale
+            },
+            locale
+          ))
+        }
+      ),
+      !translationAdapterAvailable ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        Button2,
+        {
+          variant: "secondary",
+          disabled: readOnly || !editingLocaleConfigured || isTranslating,
+          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: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          TextInput,
+          {
+            id: `mui-builder-${currentLocale}-form-title`,
+            label: translate("builder.translatedFormTitle"),
+            value: schema.translations?.[currentLocale]?.title ?? "",
+            disabled: readOnly,
+            onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "form" }, "title", value)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          TextArea,
+          {
+            id: `mui-builder-${currentLocale}-form-description`,
+            label: translate("builder.translatedFormDescription"),
+            value: schema.translations?.[currentLocale]?.description ?? "",
+            disabled: readOnly,
+            onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "form" }, "description", value)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          TextInput,
+          {
+            id: `mui-builder-${currentLocale}-completion-message`,
+            label: translate("builder.translatedCompletionMessage"),
+            value: schema.translations?.[currentLocale]?.completionMessage ?? "",
+            disabled: readOnly,
+            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;
+    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.AccordionDetails, { children: content })
+      ] });
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_material13.Box,
       {
@@ -1012,95 +1258,7 @@ function createMuiLocalizationSlot(options) {
           borderColor: "divider",
           borderRadius: 1
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { spacing: resolved.dense ? 1 : 2, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "subtitle1", fontWeight: "bold", children: "Localization" }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            TextInput,
-            {
-              id: "mui-builder-completion-message",
-              label: "Completion message",
-              value: schema.completionMessage ?? "",
-              disabled: readOnly,
-              onChange: (value) => actions.setSourceText({ kind: "form" }, "completionMessage", value)
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              TextInput,
-              {
-                id: "mui-builder-default-locale",
-                label: "Default locale",
-                value: schema.defaultLocale ?? "",
-                disabled: readOnly,
-                onChange: (value) => actions.setDefaultLocale(value)
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              TextInput,
-              {
-                id: "mui-builder-new-locale",
-                label: "Add locale",
-                value: newLocale,
-                disabled: readOnly,
-                onChange: setNewLocale
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button2, { disabled: readOnly || newLocale.trim().length === 0, onClick: addLocale, children: "Add locale" })
-          ] }),
-          locales.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            import_material13.Tabs,
-            {
-              value: locales.includes(currentLocale) ? currentLocale : false,
-              onChange: handleTabChange,
-              variant: "scrollable",
-              scrollButtons: "auto",
-              "aria-label": "Translation locale",
-              children: locales.map((locale) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Tab, { value: locale, label: locale, disabled: readOnly && locale !== currentLocale }, locale))
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            Button2,
-            {
-              variant: "secondary",
-              disabled: readOnly || currentLocale.length === 0 || isTranslating,
-              onClick: onAutoTranslate,
-              children: isTranslating ? "Translating\u2026" : "Translate all text"
-            }
-          ),
-          translationError === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ErrorMessage, { message: translationError }),
-          currentLocale.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "body2", color: "text.secondary", children: "Select a locale to edit translations." }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { spacing: resolved.dense ? 1 : 2, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              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__ */ (0, import_jsx_runtime14.jsx)(
-              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__ */ (0, import_jsx_runtime14.jsx)(
-              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
       }
     );
   };
@@ -1109,13 +1267,15 @@ var MuiLocalizationSlot = createMuiLocalizationSlot();
 
 // src/slots/index.ts
 var muiBuilderSlots = {
-  toolbar: createMuiToolbarSlot(),
-  fieldEditor: createMuiFieldEditorSlot(),
-  optionEditor: createMuiOptionEditorSlot(),
-  localization: createMuiLocalizationSlot()
+  sectionOrder: DEFAULT_MUI_SECTION_ORDER,
+  toolbar: MuiToolbarSlot,
+  fieldEditor: MuiFieldEditorSlot,
+  optionEditor: MuiOptionEditorSlot,
+  localization: MuiLocalizationSlot
 };
 function createMuiBuilderSlots(options, customOverrides = {}) {
   return {
+    sectionOrder: options?.layoutOptions?.sectionOrder ?? DEFAULT_MUI_SECTION_ORDER,
     toolbar: createMuiToolbarSlot(options),
     fieldEditor: createMuiFieldEditorSlot(options),
     optionEditor: createMuiOptionEditorSlot(options),
@@ -1134,30 +1294,52 @@ 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,
+  layoutOptions,
+  localizationOptions,
+  muiSlotProps,
   components: customComponents,
   slots: customSlots,
+  sectionOrder,
   ...props
 }) {
-  const components = (0, import_react3.useMemo)(
-    () => createMuiBuilderComponents(muiOptions, customComponents),
-    [muiOptions, customComponents]
+  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 slots = (0, import_react3.useMemo)(() => createMuiBuilderSlots(muiOptions, customSlots), [muiOptions, 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 = {
+  DEFAULT_MUI_SECTION_ORDER,
   MuiButtonAdapter,
   MuiCheckboxAdapter,
   MuiErrorMessageAdapter,
   MuiFieldEditorSlot,
   MuiFieldsetAdapter,
   MuiFormBuilder,
+  MuiFormBuilderContext,
   MuiIconButtonAdapter,
   MuiLocalizationSlot,
   MuiOptionEditorSlot,
@@ -1182,8 +1364,10 @@ function MuiFormBuilder({
   createMuiTextAreaAdapter,
   createMuiTextInputAdapter,
   createMuiToolbarSlot,
+  mergeMuiAdapterOptions,
   muiBuilderComponents,
   muiBuilderSlots,
   muiDefaultIconResolver,
-  resolveMuiAdapterOptions
+  resolveMuiAdapterOptions,
+  useResolvedMuiAdapterOptions
 });