@form-engine-ts/mui 3.2.0 → 4.1.0

package/README.md

@@ -17,7 +17,10 @@ import { MuiFormBuilder } from "@form-engine-ts/mui";
     dense: true,
     inputFullWidth: true,
     buttonFullWidth: false,
-    fieldEditorOptions: { description: "hidden" },
+    fieldEditorOptions: {
+      description: "hidden",
+      byType: { rating: { ratingBounds: "readOnly" } }
+    },
     getLocaleLabel: (locale) => localeNames[locale] ?? locale,
     buttonVariants: { primary: "contained", secondary: "outlined", danger: "outlined" }
   }}
@@ -64,8 +67,10 @@ slots as it does for the standard builder.
 
 `MuiAdapterOptions` defaults to `size: "medium"`, `variant: "outlined"`, `buttonVariant: "contained"`,
 `inputFullWidth: true`, and `buttonFullWidth: false`. The legacy `fullWidth` option remains the fallback for both new
-width options. `fieldEditorOptions.description` and `localizationOptions.defaultLocaleControl` independently make those
-controls editable, read-only, or hidden. Set `dense` to reduce section, editor, option, and toolbar spacing.
+width options. `fieldEditorOptions` controls title, description, required, type selection, options, display conditions,
+text limits, rating bounds, and number limits. Each control can be `editable`, `readOnly`, or `hidden`, and `byType`
+can override controls for individual question types. `localizationOptions.defaultLocaleControl` independently controls
+the default locale input. Set `dense` to reduce section, editor, option, and toolbar spacing.
 `buttonVariants` can override the MUI variant for `primary`, `secondary`, and `danger` actions independently.
 `localizationOptions.availableLocales` supplies display-ready locale candidates independently from the policy; when
 both are present, only candidates allowed by `allowedLocales` are shown. `placement` supports `top`,
@@ -76,11 +81,14 @@ default.
 `layoutOptions`, `localizationOptions`, and `muiSlotProps` are also accepted in `muiOptions` for low-level factories such
 as `createMuiBuilderSlots`; the dedicated `MuiFormBuilder` props take precedence.
 
-Select options in the MUI adapter support icons, descriptions, custom metadata, and custom `renderOption`/`renderValue`
-callbacks. Without a custom renderer, icons appear beside labels in the menu and in the selected value. The standard
+Select options in the MUI adapter support icons, descriptions, groups (`group`/`groupLabel` or `kind`), custom metadata,
+and custom `renderOption`/`renderValue` callbacks. Without a custom renderer, icons appear beside labels in the menu and
+in the selected value. The standard
 MUI field editor supplies icons for every field type and accepts `slots.fieldTypeSelect` and `slots.fieldEditorHeader`
 for focused customization. `muiSlotProps` also supports `textField`, `select`, `selectMenu`, `checkbox`, `button`, and
 `iconButton` MUI props in addition to the layout props.
+`fieldEditorOptions.fieldTypeOptions` can explicitly order, sort, or transform the generated type choices without
+mutating the defaults.
 
 `MuiFormBuilder` supplies options through `MuiFormBuilderContext` to module-stable adapter and slot component types.
 Controlled schema updates therefore preserve input focus and uncontrolled MUI state such as an open localization

package/dist/index.cjs

@@ -102,7 +102,17 @@ function resolveMuiAdapterOptions(options = {}) {
     ...options.getActionLabel === void 0 ? {} : { getActionLabel: options.getActionLabel },
     layoutOptions: options.layoutOptions ?? {},
     fieldEditorOptions: {
-      description: options.fieldEditorOptions?.description ?? "editable"
+      title: options.fieldEditorOptions?.title ?? "editable",
+      description: options.fieldEditorOptions?.description ?? "editable",
+      required: options.fieldEditorOptions?.required ?? "editable",
+      typeSelect: options.fieldEditorOptions?.typeSelect ?? "editable",
+      options: options.fieldEditorOptions?.options ?? "editable",
+      displayConditions: options.fieldEditorOptions?.displayConditions ?? "editable",
+      textLimits: options.fieldEditorOptions?.textLimits ?? "editable",
+      ratingBounds: options.fieldEditorOptions?.ratingBounds ?? "editable",
+      numberLimits: options.fieldEditorOptions?.numberLimits ?? "editable",
+      ...options.fieldEditorOptions?.byType === void 0 ? {} : { byType: options.fieldEditorOptions.byType },
+      ...options.fieldEditorOptions?.fieldTypeOptions === void 0 ? {} : { fieldTypeOptions: options.fieldEditorOptions.fieldTypeOptions }
     },
     localizationOptions: {
       collapsible: options.localizationOptions?.collapsible ?? false,
@@ -128,7 +138,13 @@ function mergeMuiAdapterOptions(base = {}, overrides = {}) {
     ...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.fieldEditorOptions === void 0 && overrides.fieldEditorOptions === void 0 ? {} : {
+      fieldEditorOptions: {
+        ...base.fieldEditorOptions,
+        ...overrides.fieldEditorOptions,
+        ...base.fieldEditorOptions?.byType === void 0 && overrides.fieldEditorOptions?.byType === void 0 ? {} : { byType: { ...base.fieldEditorOptions?.byType, ...overrides.fieldEditorOptions?.byType } }
+      }
+    },
     ...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 } }
   };
@@ -417,6 +433,40 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 function normalizeOptions(options) {
   return options.map((option) => typeof option === "string" ? { value: option, label: option } : option);
 }
+function SelectGroupHeader({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.ListSubheader, { role: "presentation", children });
+}
+function groupSelectOptions(options) {
+  const groups = [];
+  const groupIndexes = /* @__PURE__ */ new Map();
+  for (const option of options) {
+    const groupKey = option.group ?? option.kind;
+    const groupLabel = option.groupLabel ?? groupKey;
+    if (groupKey === void 0 && groupLabel === void 0) {
+      groups.push({ items: [option] });
+      continue;
+    }
+    const key = groupKey ?? groupLabel;
+    if (key === void 0) {
+      groups.push({ items: [option] });
+      continue;
+    }
+    const existingIndex = groupIndexes.get(key);
+    if (existingIndex === void 0) {
+      groupIndexes.set(key, groups.length);
+      groups.push({
+        groupKey: key,
+        ...groupLabel === void 0 ? {} : { groupLabel },
+        items: [option]
+      });
+      continue;
+    }
+    const existing = groups[existingIndex];
+    if (existing === void 0) continue;
+    groups[existingIndex] = { ...existing, items: [...existing.items, option] };
+  }
+  return groups;
+}
 function createMuiSelectAdapter(options) {
   return function MuiSelect({
     id,
@@ -440,13 +490,14 @@ function createMuiSelectAdapter(options) {
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const normalizedOptions = normalizeOptions(selectOptions);
+    const groupedOptions = groupSelectOptions(normalizedOptions);
     const selectSlotProps = resolved.muiSlotProps?.select;
     const menuProps = { ...selectSlotProps?.MenuProps, ...resolved.muiSlotProps?.selectMenu };
     const slotInputProps = selectSlotProps?.inputProps;
     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(String(event.target.value));
+    const handleChange = (event) => onChange(event.target.value);
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       import_material7.FormControl,
       {
@@ -491,10 +542,22 @@ function createMuiSelectAdapter(options) {
                 ...describedBy === void 0 ? {} : { "aria-describedby": describedBy },
                 ...ariaLabelledBy === void 0 ? {} : { "aria-labelledby": ariaLabelledBy }
               },
-              children: normalizedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.MenuItem, { value: option.value, disabled: option.disabled, children: renderOption === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-                option.icon === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.ListItemIcon, { sx: { minWidth: 32 }, children: option.icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.ListItemText, { primary: option.label, secondary: option.description })
-              ] }) : renderOption(option) }, option.value))
+              children: groupedOptions.flatMap((group) => [
+                group.groupLabel === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectGroupHeader, { children: group.groupLabel }, `header-${group.groupKey ?? group.groupLabel}`),
+                ...group.items.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_material7.MenuItem,
+                  {
+                    value: option.value,
+                    disabled: option.disabled,
+                    ...option.group === void 0 && option.groupLabel === void 0 && option.kind === void 0 ? {} : { "aria-label": option.label },
+                    children: renderOption === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                      option.icon === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.ListItemIcon, { sx: { minWidth: 32 }, children: option.icon }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.ListItemText, { primary: option.label, secondary: option.description })
+                    ] }) : renderOption(option)
+                  },
+                  option.value
+                ))
+              ])
             }
           ),
           helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.FormHelperText, { id: helperId, children: helperText })
@@ -503,7 +566,10 @@ function createMuiSelectAdapter(options) {
     );
   };
 }
-var MuiSelectAdapter = createMuiSelectAdapter();
+function MuiSelectAdapter(props) {
+  const Adapter = createMuiSelectAdapter();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Adapter, { ...props });
+}
 
 // src/adapters/TextArea.tsx
 var import_material8 = require("@mui/material");
@@ -724,6 +790,7 @@ function createMuiBuilderComponents(optionsOrOverrides = {}, customOverrides) {
 
 // src/slots/FieldEditor.tsx
 var import_core = require("@form-engine-ts/core");
+var import_react2 = require("@form-engine-ts/react");
 var import_material12 = require("@mui/material");
 
 // src/slots/OptionEditor.tsx
@@ -896,6 +963,13 @@ function updateBound(field, property, value) {
   const { [property]: _removed, ...remaining } = field;
   return remaining;
 }
+function updateNumberProperty(field, property, value) {
+  if (field.type !== "number") return field;
+  const nextValue = numericValue(value);
+  if (nextValue !== void 0) return { ...field, [property]: nextValue };
+  const { [property]: _removed, ...remaining } = field;
+  return remaining;
+}
 function createMuiFieldEditorSlot(options) {
   const Toolbar = createMuiToolbarSlot(options);
   const OptionEditor = createMuiOptionEditorSlot(options);
@@ -910,7 +984,9 @@ function createMuiFieldEditorSlot(options) {
     actions,
     components,
     translate,
-    slots
+    slots,
+    fieldEditorControls,
+    fieldTypeOptions: fieldTypeOptionsConfig
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const { Button: Button2, Checkbox: Checkbox2, Select: Select2, TextArea, TextInput } = components;
@@ -919,10 +995,41 @@ function createMuiFieldEditorSlot(options) {
     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 fieldEditorOptions = resolved.fieldEditorOptions ?? {};
+    const controls = (0, import_react2.resolveFieldEditorControls)({
+      ...fieldEditorControls ?? {},
+      ...fieldEditorOptions,
+      ...fieldEditorOptions.byType?.[field.type] ?? {}
+    });
     const titleErrorId = field.title.trim().length === 0 ? `mui-field-${field.id}-title-error` : void 0;
     const FieldTypeSelect = slots?.fieldTypeSelect;
     const FieldEditorHeader = slots?.fieldEditorHeader;
+    const fieldTypeSelectId = `mui-field-${field.id}-type`;
+    const fieldTypeSelectLabel = translate("builder.type");
+    const generatedFieldTypeOptions = FIELD_TYPES.filter(
+      (type) => allowedTypes.includes(type)
+    ).map((type) => {
+      const definition = import_core.DEFAULT_FIELD_TYPE_DEFINITIONS.find((candidate) => candidate.type === type);
+      const group = definition?.category;
+      return {
+        value: type,
+        label: translate(definition?.labelKey ?? `builder.fieldType.${type}`),
+        description: translate(`builder.fieldTypeDescription.${type}`),
+        icon: components.renderFieldTypeIcon(type),
+        ...group === void 0 ? {} : {
+          group,
+          groupLabel: translate(`builder.fieldCategory.${group}`)
+        }
+      };
+    });
+    const fieldTypeOptions = (0, import_react2.resolveFieldTypeSelectOptions)(
+      generatedFieldTypeOptions,
+      fieldTypeOptionsConfig ?? fieldEditorOptions.fieldTypeOptions,
+      {
+        currentType: field.type,
+        allowedTypes
+      }
+    );
     const changeFieldType = (nextType) => {
       if (allowedTypes.includes(nextType)) actions.changeFieldType(field.id, nextType);
     };
@@ -957,7 +1064,7 @@ function createMuiFieldEditorSlot(options) {
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldEditorHeader, { field, index, totalFields: schema.fields.length, actions }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { ...resolved.muiSlotProps?.stack, spacing: resolved.dense ? 1 : 2, children: [
             /* @__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)(
+              controls.title === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 TextInput,
                 {
                   id: `mui-field-${field.id}-title`,
@@ -968,27 +1075,19 @@ function createMuiFieldEditorSlot(options) {
                   error: field.title.trim().length === 0,
                   helperText: field.title.trim().length === 0 ? translate("builder.required") : "",
                   "aria-describedby": titleErrorId,
-                  disabled: readOnly,
+                  disabled: readOnly || controls.title === "readOnly",
                   onChange: (value) => actions.setSourceText({ kind: "field", id: field.id }, "title", value)
                 }
               ),
-              FieldTypeSelect === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              controls.typeSelect === "hidden" ? null : FieldTypeSelect === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 Select2,
                 {
-                  id: `mui-field-${field.id}-type`,
+                  id: fieldTypeSelectId,
                   name: `fields.${field.id}.type`,
-                  label: translate("builder.type"),
+                  label: fieldTypeSelectLabel,
                   value: allowedTypes.includes(field.type) ? field.type : "",
-                  options: FIELD_TYPES.filter((type) => allowedTypes.includes(type)).map((type) => {
-                    const definition = import_core.DEFAULT_FIELD_TYPE_DEFINITIONS.find((candidate) => candidate.type === type);
-                    return {
-                      value: type,
-                      label: translate(definition?.labelKey ?? `builder.fieldType.${type}`),
-                      icon: components.renderFieldTypeIcon(type),
-                      ...definition?.category === void 0 ? {} : { kind: definition.category }
-                    };
-                  }),
-                  disabled: readOnly,
+                  options: fieldTypeOptions,
+                  disabled: readOnly || controls.typeSelect === "readOnly",
                   onChange: (value) => {
                     if (isFieldType(value)) changeFieldType(value);
                   }
@@ -996,16 +1095,21 @@ function createMuiFieldEditorSlot(options) {
               ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 FieldTypeSelect,
                 {
+                  id: fieldTypeSelectId,
+                  name: `fields.${field.id}.type`,
+                  label: fieldTypeSelectLabel,
                   currentType: field.type,
                   allowedTypes,
+                  options: fieldTypeOptions,
                   onChangeType: changeFieldType,
-                  disabled: readOnly,
-                  readOnly,
+                  disabled: readOnly || controls.typeSelect === "readOnly",
+                  readOnly: readOnly || controls.typeSelect === "readOnly",
+                  "aria-labelledby": `${fieldTypeSelectId}-label`,
                   renderIcon: components.renderFieldTypeIcon
                 }
               )
             ] }),
-            descriptionMode === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            controls.description === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               TextArea,
               {
                 id: `mui-field-${field.id}-description`,
@@ -1013,19 +1117,19 @@ function createMuiFieldEditorSlot(options) {
                 label: translate("builder.description"),
                 value: field.description ?? "",
                 rows: resolved.dense ? 2 : 3,
-                disabled: readOnly,
-                readOnly: descriptionMode === "readOnly",
+                disabled: readOnly || controls.description === "readOnly",
+                readOnly: readOnly || controls.description === "readOnly",
                 onChange: (value) => actions.setSourceText({ kind: "field", id: field.id }, "description", value)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            controls.required === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               Checkbox2,
               {
                 id: `mui-field-${field.id}-required`,
                 name: `fields.${field.id}.required`,
                 label: translate("builder.required"),
                 checked: field.required,
-                disabled: readOnly,
+                disabled: readOnly || controls.required === "readOnly",
                 onChange: (checked) => actions.updateField(field.id, (current) => ({ ...current, required: checked }))
               }
             ),
@@ -1043,7 +1147,7 @@ function createMuiFieldEditorSlot(options) {
                 onChange: (value) => actions.assignFieldToPage(field.id, value.length === 0 ? null : value)
               }
             ),
-            field.type === "number" || field.type === "rating" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
+            field.type === "number" || field.type === "rating" ? (field.type === "number" ? controls.numberLimits : controls.ratingBounds) === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 TextInput,
                 {
@@ -1051,7 +1155,7 @@ function createMuiFieldEditorSlot(options) {
                   label: translate("builder.minimum"),
                   type: "number",
                   value: field.min === void 0 ? "" : String(field.min),
-                  disabled: readOnly,
+                  disabled: readOnly || (field.type === "number" ? controls.numberLimits : controls.ratingBounds) === "readOnly",
                   onChange: (value) => actions.updateField(field.id, (current) => updateBound(current, "min", value))
                 }
               ),
@@ -1062,12 +1166,68 @@ function createMuiFieldEditorSlot(options) {
                   label: translate("builder.maximum"),
                   type: "number",
                   value: field.max === void 0 ? "" : String(field.max),
-                  disabled: readOnly,
+                  disabled: readOnly || (field.type === "number" ? controls.numberLimits : controls.ratingBounds) === "readOnly",
                   onChange: (value) => actions.updateField(field.id, (current) => updateBound(current, "max", value))
                 }
               )
             ] }) : null,
-            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: [
+            field.type === "number" && controls.numberLimits !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              TextInput,
+              {
+                id: `mui-field-${field.id}-step`,
+                label: translate("builder.step"),
+                type: "number",
+                value: field.step === void 0 ? "" : String(field.step),
+                disabled: readOnly || controls.numberLimits === "readOnly",
+                onChange: (value) => actions.updateField(field.id, (current) => updateNumberProperty(current, "step", value))
+              }
+            ) : null,
+            (field.type === "text" || field.type === "textarea") && controls.textLimits !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                TextInput,
+                {
+                  id: `mui-field-${field.id}-min-length`,
+                  label: translate("builder.minimumLength"),
+                  type: "number",
+                  value: field.minLength === void 0 ? "" : String(field.minLength),
+                  disabled: readOnly || controls.textLimits === "readOnly",
+                  onChange: (value) => actions.updateField(field.id, (current) => {
+                    if (current.type !== "text" && current.type !== "textarea") return current;
+                    const parsed = numericValue(value);
+                    return parsed === void 0 ? current : { ...current, minLength: Math.max(0, Math.floor(parsed)) };
+                  })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                TextInput,
+                {
+                  id: `mui-field-${field.id}-max-length`,
+                  label: translate("builder.maximumLength"),
+                  type: "number",
+                  value: field.maxLength === void 0 ? "" : String(field.maxLength),
+                  disabled: readOnly || controls.textLimits === "readOnly",
+                  onChange: (value) => actions.updateField(field.id, (current) => {
+                    if (current.type !== "text" && current.type !== "textarea") return current;
+                    const parsed = numericValue(value);
+                    return parsed === void 0 ? current : { ...current, maxLength: Math.max(0, Math.floor(parsed)) };
+                  })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                TextInput,
+                {
+                  id: `mui-field-${field.id}-pattern`,
+                  label: translate("builder.pattern"),
+                  value: field.pattern ?? "",
+                  disabled: readOnly || controls.textLimits === "readOnly",
+                  onChange: (value) => actions.updateField(
+                    field.id,
+                    (current) => current.type === "text" || current.type === "textarea" ? value.length === 0 ? current : { ...current, pattern: value } : current
+                  )
+                }
+              )
+            ] }) : null,
+            features?.conditions === false || conditionSources.length === 0 || controls.displayConditions === "hidden" ? 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,
                 {
@@ -1078,7 +1238,7 @@ function createMuiFieldEditorSlot(options) {
                     { value: "", label: translate("builder.alwaysVisible") },
                     ...conditionSources.map((source) => ({ value: source.id, label: source.title }))
                   ],
-                  disabled: readOnly,
+                  disabled: readOnly || controls.displayConditions === "readOnly",
                   onChange: (value) => actions.setDisplayCondition(
                     field.id,
                     value.length === 0 ? void 0 : { questionId: value, operator: "equals", value: "" }
@@ -1095,7 +1255,7 @@ function createMuiFieldEditorSlot(options) {
                     options: (conditionSource === void 0 ? [] : conditionOperators(conditionSource)).map(
                       (operator) => ({ value: operator, label: translate(`builder.operator.${operator}`) })
                     ),
-                    disabled: readOnly,
+                    disabled: readOnly || controls.displayConditions === "readOnly",
                     onChange: (value) => {
                       if (!isConditionOperator(value)) return;
                       actions.setDisplayCondition(
@@ -1111,7 +1271,7 @@ function createMuiFieldEditorSlot(options) {
                     id: `mui-field-${field.id}-condition-value`,
                     label: translate("builder.conditionValue"),
                     value: condition.value === void 0 ? "" : String(condition.value),
-                    disabled: readOnly,
+                    disabled: readOnly || controls.displayConditions === "readOnly",
                     onChange: (value) => actions.setDisplayCondition(field.id, { ...condition, value })
                   }
                 )
@@ -1121,29 +1281,29 @@ function createMuiFieldEditorSlot(options) {
               /* @__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)(
+              controls.title === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 TextInput,
                 {
                   id: `mui-field-${field.id}-${currentLocale}-title`,
                   label: translate("builder.translatedQuestionTitle"),
                   value: field.translations?.[currentLocale]?.title ?? "",
-                  disabled: readOnly,
+                  disabled: readOnly || controls.title === "readOnly",
                   onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "field", id: field.id }, "title", value)
                 }
               ),
-              descriptionMode === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              controls.description === "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,
-                  readOnly: descriptionMode === "readOnly",
+                  disabled: readOnly || controls.description === "readOnly",
+                  readOnly: readOnly || controls.description === "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: [
+            "options" in field && controls.options !== "hidden" ? /* @__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: translate("builder.options") }),
               field.options.map((option, optionIndex) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 OptionEditor,
@@ -1154,7 +1314,7 @@ function createMuiFieldEditorSlot(options) {
                   index: optionIndex,
                   currentLocale,
                   translate,
-                  readOnly,
+                  readOnly: readOnly || controls.options === "readOnly",
                   actions,
                   components
                 },
@@ -1165,7 +1325,7 @@ function createMuiFieldEditorSlot(options) {
                 {
                   action: "addOption",
                   targetId: field.id,
-                  disabled: readOnly || policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
+                  disabled: readOnly || controls.options === "readOnly" || policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
                   onClick: () => actions.addOption(field.id),
                   children: translate("builder.addOption")
                 }
@@ -1182,7 +1342,7 @@ var MuiFieldEditorSlot = createMuiFieldEditorSlot();
 // src/slots/Localization.tsx
 var import_icons_material2 = require("@mui/icons-material");
 var import_material13 = require("@mui/material");
-var import_react2 = require("react");
+var import_react3 = 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 normalizeLocaleOptions(options, getLocaleLabel) {
@@ -1213,8 +1373,8 @@ function createMuiLocalizationSlot(options) {
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const { Button: Button2, ErrorMessage, Select: Select2, TextArea, TextInput } = components;
-    const [newLocale, setNewLocale] = (0, import_react2.useState)("");
-    const [pendingFocusLocale, setPendingFocusLocale] = (0, import_react2.useState)(null);
+    const [newLocale, setNewLocale] = (0, import_react3.useState)("");
+    const [pendingFocusLocale, setPendingFocusLocale] = (0, import_react3.useState)(null);
     const locales = Array.from(
       new Set((schema.supportedLocales ?? []).filter((locale) => locale !== schema.defaultLocale))
     );
@@ -1253,7 +1413,7 @@ function createMuiLocalizationSlot(options) {
       event.stopPropagation();
       addLocale();
     };
-    (0, import_react2.useEffect)(() => {
+    (0, import_react3.useEffect)(() => {
       if (pendingFocusLocale === null || currentLocale !== pendingFocusLocale) return;
       const tab = document.getElementById(`mui-builder-locale-tab-${pendingFocusLocale}`);
       if (tab === null) return;
@@ -1494,8 +1654,8 @@ function createMuiBuilderProps(options, overrides = {}) {
 }
 
 // src/MuiFormBuilder.tsx
-var import_react3 = require("@form-engine-ts/react");
-var import_react4 = require("react");
+var import_react4 = require("@form-engine-ts/react");
+var import_react5 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function MuiFormBuilder({
   muiOptions,
@@ -1507,7 +1667,7 @@ function MuiFormBuilder({
   sectionOrder,
   ...props
 }) {
-  const contextOptions = (0, import_react4.useMemo)(
+  const contextOptions = (0, import_react5.useMemo)(
     () => mergeMuiAdapterOptions(muiOptions, {
       ...layoutOptions === void 0 ? {} : { layoutOptions },
       ...localizationOptions === void 0 ? {} : { localizationOptions },
@@ -1515,13 +1675,13 @@ function MuiFormBuilder({
     }),
     [layoutOptions, localizationOptions, muiOptions, muiSlotProps]
   );
-  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 contextValue = (0, import_react5.useMemo)(() => ({ options: contextOptions }), [contextOptions]);
+  const components = (0, import_react5.useMemo)(() => ({ ...muiBuilderComponents, ...customComponents }), [customComponents]);
+  const slots = (0, import_react5.useMemo)(() => ({ ...muiBuilderSlots, ...customSlots }), [customSlots]);
   const placement = contextOptions.localizationOptions?.placement;
   const resolvedSectionOrder = sectionOrder ?? (placement === void 0 ? contextOptions.layoutOptions?.sectionOrder : MUI_LOCALIZATION_SECTION_ORDERS[placement]);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MuiFormBuilderContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_react3.FormBuilder,
+    import_react4.FormBuilder,
     {
       ...props,
       components,

package/dist/index.d.cts

@@ -1,6 +1,6 @@
-import { BuilderActionIconType, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, QuestionType, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
+import { BuilderActionIconType, FieldPropertyControlMode, QuestionType, FieldEditorControlsConfig, FieldTypeSelectOptionsConfig, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
 import * as react from 'react';
-import { ReactNode, ComponentType } from 'react';
+import { ReactNode, ComponentType, ReactElement } from 'react';
 import { CardProps, PaperProps, AccordionProps, StackProps, TextFieldProps, SelectProps, MenuProps, CheckboxProps, ButtonProps, IconButtonProps } from '@mui/material';
 
 type BuilderSectionName = "basicSettings" | "completionMessage" | "questions" | "addQuestion" | "localization";
@@ -28,8 +28,23 @@ interface MuiLocalizationOptions {
     readonly noWrapActions?: boolean;
     readonly autoFocusNewTab?: boolean;
 }
+/**
+ * MUI's field editor controls mirror `FieldEditorControlsConfig` while keeping
+ * the original interface members directly declared for semver/reporting compatibility.
+ */
 interface MuiFieldEditorOptions {
+    readonly title?: FieldPropertyControlMode;
     readonly description?: "editable" | "readOnly" | "hidden";
+    readonly required?: FieldPropertyControlMode;
+    readonly typeSelect?: FieldPropertyControlMode;
+    readonly options?: FieldPropertyControlMode;
+    readonly displayConditions?: FieldPropertyControlMode;
+    readonly textLimits?: FieldPropertyControlMode;
+    readonly ratingBounds?: FieldPropertyControlMode;
+    readonly numberLimits?: FieldPropertyControlMode;
+    /** Per-question-type overrides take precedence over the base controls. */
+    readonly byType?: Partial<Record<QuestionType, Partial<FieldEditorControlsConfig>>>;
+    readonly fieldTypeOptions?: FieldTypeSelectOptionsConfig;
 }
 interface MuiSlotProps {
     readonly card?: Partial<CardProps>;
@@ -117,8 +132,8 @@ declare const MuiIconButtonAdapter: ComponentType<BuilderIconButtonProps>;
 declare function createMuiSectionAdapter(options?: MuiAdapterOptions): ComponentType<BuilderSectionProps>;
 declare const MuiSectionAdapter: ComponentType<BuilderSectionProps>;
 
-declare function createMuiSelectAdapter(options?: MuiAdapterOptions): ComponentType<BuilderSelectProps>;
-declare const MuiSelectAdapter: ComponentType<BuilderSelectProps>;
+declare function createMuiSelectAdapter<T extends string = string>(options?: MuiAdapterOptions): ComponentType<BuilderSelectProps<T>>;
+declare function MuiSelectAdapter<T extends string = string>(props: BuilderSelectProps<T>): ReactElement;
 
 declare function createMuiTextAreaAdapter(options?: MuiAdapterOptions): ComponentType<BuilderTextAreaProps>;
 declare const MuiTextAreaAdapter: ComponentType<BuilderTextAreaProps>;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import { BuilderActionIconType, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, QuestionType, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
+import { BuilderActionIconType, FieldPropertyControlMode, QuestionType, FieldEditorControlsConfig, FieldTypeSelectOptionsConfig, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
 import * as react from 'react';
-import { ReactNode, ComponentType } from 'react';
+import { ReactNode, ComponentType, ReactElement } from 'react';
 import { CardProps, PaperProps, AccordionProps, StackProps, TextFieldProps, SelectProps, MenuProps, CheckboxProps, ButtonProps, IconButtonProps } from '@mui/material';
 
 type BuilderSectionName = "basicSettings" | "completionMessage" | "questions" | "addQuestion" | "localization";
@@ -28,8 +28,23 @@ interface MuiLocalizationOptions {
     readonly noWrapActions?: boolean;
     readonly autoFocusNewTab?: boolean;
 }
+/**
+ * MUI's field editor controls mirror `FieldEditorControlsConfig` while keeping
+ * the original interface members directly declared for semver/reporting compatibility.
+ */
 interface MuiFieldEditorOptions {
+    readonly title?: FieldPropertyControlMode;
     readonly description?: "editable" | "readOnly" | "hidden";
+    readonly required?: FieldPropertyControlMode;
+    readonly typeSelect?: FieldPropertyControlMode;
+    readonly options?: FieldPropertyControlMode;
+    readonly displayConditions?: FieldPropertyControlMode;
+    readonly textLimits?: FieldPropertyControlMode;
+    readonly ratingBounds?: FieldPropertyControlMode;
+    readonly numberLimits?: FieldPropertyControlMode;
+    /** Per-question-type overrides take precedence over the base controls. */
+    readonly byType?: Partial<Record<QuestionType, Partial<FieldEditorControlsConfig>>>;
+    readonly fieldTypeOptions?: FieldTypeSelectOptionsConfig;
 }
 interface MuiSlotProps {
     readonly card?: Partial<CardProps>;
@@ -117,8 +132,8 @@ declare const MuiIconButtonAdapter: ComponentType<BuilderIconButtonProps>;
 declare function createMuiSectionAdapter(options?: MuiAdapterOptions): ComponentType<BuilderSectionProps>;
 declare const MuiSectionAdapter: ComponentType<BuilderSectionProps>;
 
-declare function createMuiSelectAdapter(options?: MuiAdapterOptions): ComponentType<BuilderSelectProps>;
-declare const MuiSelectAdapter: ComponentType<BuilderSelectProps>;
+declare function createMuiSelectAdapter<T extends string = string>(options?: MuiAdapterOptions): ComponentType<BuilderSelectProps<T>>;
+declare function MuiSelectAdapter<T extends string = string>(props: BuilderSelectProps<T>): ReactElement;
 
 declare function createMuiTextAreaAdapter(options?: MuiAdapterOptions): ComponentType<BuilderTextAreaProps>;
 declare const MuiTextAreaAdapter: ComponentType<BuilderTextAreaProps>;

package/dist/index.js

@@ -37,7 +37,17 @@ function resolveMuiAdapterOptions(options = {}) {
     ...options.getActionLabel === void 0 ? {} : { getActionLabel: options.getActionLabel },
     layoutOptions: options.layoutOptions ?? {},
     fieldEditorOptions: {
-      description: options.fieldEditorOptions?.description ?? "editable"
+      title: options.fieldEditorOptions?.title ?? "editable",
+      description: options.fieldEditorOptions?.description ?? "editable",
+      required: options.fieldEditorOptions?.required ?? "editable",
+      typeSelect: options.fieldEditorOptions?.typeSelect ?? "editable",
+      options: options.fieldEditorOptions?.options ?? "editable",
+      displayConditions: options.fieldEditorOptions?.displayConditions ?? "editable",
+      textLimits: options.fieldEditorOptions?.textLimits ?? "editable",
+      ratingBounds: options.fieldEditorOptions?.ratingBounds ?? "editable",
+      numberLimits: options.fieldEditorOptions?.numberLimits ?? "editable",
+      ...options.fieldEditorOptions?.byType === void 0 ? {} : { byType: options.fieldEditorOptions.byType },
+      ...options.fieldEditorOptions?.fieldTypeOptions === void 0 ? {} : { fieldTypeOptions: options.fieldEditorOptions.fieldTypeOptions }
     },
     localizationOptions: {
       collapsible: options.localizationOptions?.collapsible ?? false,
@@ -63,7 +73,13 @@ function mergeMuiAdapterOptions(base = {}, overrides = {}) {
     ...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.fieldEditorOptions === void 0 && overrides.fieldEditorOptions === void 0 ? {} : {
+      fieldEditorOptions: {
+        ...base.fieldEditorOptions,
+        ...overrides.fieldEditorOptions,
+        ...base.fieldEditorOptions?.byType === void 0 && overrides.fieldEditorOptions?.byType === void 0 ? {} : { byType: { ...base.fieldEditorOptions?.byType, ...overrides.fieldEditorOptions?.byType } }
+      }
+    },
     ...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 } }
   };
@@ -354,6 +370,7 @@ import {
   InputLabel,
   ListItemIcon,
   ListItemText,
+  ListSubheader,
   MenuItem,
   Select
 } from "@mui/material";
@@ -361,6 +378,40 @@ import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function normalizeOptions(options) {
   return options.map((option) => typeof option === "string" ? { value: option, label: option } : option);
 }
+function SelectGroupHeader({ children }) {
+  return /* @__PURE__ */ jsx7(ListSubheader, { role: "presentation", children });
+}
+function groupSelectOptions(options) {
+  const groups = [];
+  const groupIndexes = /* @__PURE__ */ new Map();
+  for (const option of options) {
+    const groupKey = option.group ?? option.kind;
+    const groupLabel = option.groupLabel ?? groupKey;
+    if (groupKey === void 0 && groupLabel === void 0) {
+      groups.push({ items: [option] });
+      continue;
+    }
+    const key = groupKey ?? groupLabel;
+    if (key === void 0) {
+      groups.push({ items: [option] });
+      continue;
+    }
+    const existingIndex = groupIndexes.get(key);
+    if (existingIndex === void 0) {
+      groupIndexes.set(key, groups.length);
+      groups.push({
+        groupKey: key,
+        ...groupLabel === void 0 ? {} : { groupLabel },
+        items: [option]
+      });
+      continue;
+    }
+    const existing = groups[existingIndex];
+    if (existing === void 0) continue;
+    groups[existingIndex] = { ...existing, items: [...existing.items, option] };
+  }
+  return groups;
+}
 function createMuiSelectAdapter(options) {
   return function MuiSelect({
     id,
@@ -384,13 +435,14 @@ function createMuiSelectAdapter(options) {
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const normalizedOptions = normalizeOptions(selectOptions);
+    const groupedOptions = groupSelectOptions(normalizedOptions);
     const selectSlotProps = resolved.muiSlotProps?.select;
     const menuProps = { ...selectSlotProps?.MenuProps, ...resolved.muiSlotProps?.selectMenu };
     const slotInputProps = selectSlotProps?.inputProps;
     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(String(event.target.value));
+    const handleChange = (event) => onChange(event.target.value);
     return /* @__PURE__ */ jsxs4(
       FormControl2,
       {
@@ -435,10 +487,22 @@ function createMuiSelectAdapter(options) {
                 ...describedBy === void 0 ? {} : { "aria-describedby": describedBy },
                 ...ariaLabelledBy === void 0 ? {} : { "aria-labelledby": ariaLabelledBy }
               },
-              children: normalizedOptions.map((option) => /* @__PURE__ */ jsx7(MenuItem, { value: option.value, disabled: option.disabled, children: renderOption === void 0 ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-                option.icon === void 0 ? null : /* @__PURE__ */ jsx7(ListItemIcon, { sx: { minWidth: 32 }, children: option.icon }),
-                /* @__PURE__ */ jsx7(ListItemText, { primary: option.label, secondary: option.description })
-              ] }) : renderOption(option) }, option.value))
+              children: groupedOptions.flatMap((group) => [
+                group.groupLabel === void 0 ? null : /* @__PURE__ */ jsx7(SelectGroupHeader, { children: group.groupLabel }, `header-${group.groupKey ?? group.groupLabel}`),
+                ...group.items.map((option) => /* @__PURE__ */ jsx7(
+                  MenuItem,
+                  {
+                    value: option.value,
+                    disabled: option.disabled,
+                    ...option.group === void 0 && option.groupLabel === void 0 && option.kind === void 0 ? {} : { "aria-label": option.label },
+                    children: renderOption === void 0 ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+                      option.icon === void 0 ? null : /* @__PURE__ */ jsx7(ListItemIcon, { sx: { minWidth: 32 }, children: option.icon }),
+                      /* @__PURE__ */ jsx7(ListItemText, { primary: option.label, secondary: option.description })
+                    ] }) : renderOption(option)
+                  },
+                  option.value
+                ))
+              ])
             }
           ),
           helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx7(FormHelperText2, { id: helperId, children: helperText })
@@ -447,7 +511,10 @@ function createMuiSelectAdapter(options) {
     );
   };
 }
-var MuiSelectAdapter = createMuiSelectAdapter();
+function MuiSelectAdapter(props) {
+  const Adapter = createMuiSelectAdapter();
+  return /* @__PURE__ */ jsx7(Adapter, { ...props });
+}
 
 // src/adapters/TextArea.tsx
 import { TextField } from "@mui/material";
@@ -685,6 +752,7 @@ function createMuiBuilderComponents(optionsOrOverrides = {}, customOverrides) {
 
 // src/slots/FieldEditor.tsx
 import { DEFAULT_FIELD_TYPE_DEFINITIONS } from "@form-engine-ts/core";
+import { resolveFieldEditorControls, resolveFieldTypeSelectOptions } from "@form-engine-ts/react";
 import { Card, Stack as Stack3, Typography as Typography3 } from "@mui/material";
 
 // src/slots/OptionEditor.tsx
@@ -857,6 +925,13 @@ function updateBound(field, property, value) {
   const { [property]: _removed, ...remaining } = field;
   return remaining;
 }
+function updateNumberProperty(field, property, value) {
+  if (field.type !== "number") return field;
+  const nextValue = numericValue(value);
+  if (nextValue !== void 0) return { ...field, [property]: nextValue };
+  const { [property]: _removed, ...remaining } = field;
+  return remaining;
+}
 function createMuiFieldEditorSlot(options) {
   const Toolbar = createMuiToolbarSlot(options);
   const OptionEditor = createMuiOptionEditorSlot(options);
@@ -871,7 +946,9 @@ function createMuiFieldEditorSlot(options) {
     actions,
     components,
     translate,
-    slots
+    slots,
+    fieldEditorControls,
+    fieldTypeOptions: fieldTypeOptionsConfig
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const { Button: Button2, Checkbox: Checkbox2, Select: Select2, TextArea, TextInput } = components;
@@ -880,10 +957,41 @@ function createMuiFieldEditorSlot(options) {
     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 fieldEditorOptions = resolved.fieldEditorOptions ?? {};
+    const controls = resolveFieldEditorControls({
+      ...fieldEditorControls ?? {},
+      ...fieldEditorOptions,
+      ...fieldEditorOptions.byType?.[field.type] ?? {}
+    });
     const titleErrorId = field.title.trim().length === 0 ? `mui-field-${field.id}-title-error` : void 0;
     const FieldTypeSelect = slots?.fieldTypeSelect;
     const FieldEditorHeader = slots?.fieldEditorHeader;
+    const fieldTypeSelectId = `mui-field-${field.id}-type`;
+    const fieldTypeSelectLabel = translate("builder.type");
+    const generatedFieldTypeOptions = FIELD_TYPES.filter(
+      (type) => allowedTypes.includes(type)
+    ).map((type) => {
+      const definition = DEFAULT_FIELD_TYPE_DEFINITIONS.find((candidate) => candidate.type === type);
+      const group = definition?.category;
+      return {
+        value: type,
+        label: translate(definition?.labelKey ?? `builder.fieldType.${type}`),
+        description: translate(`builder.fieldTypeDescription.${type}`),
+        icon: components.renderFieldTypeIcon(type),
+        ...group === void 0 ? {} : {
+          group,
+          groupLabel: translate(`builder.fieldCategory.${group}`)
+        }
+      };
+    });
+    const fieldTypeOptions = resolveFieldTypeSelectOptions(
+      generatedFieldTypeOptions,
+      fieldTypeOptionsConfig ?? fieldEditorOptions.fieldTypeOptions,
+      {
+        currentType: field.type,
+        allowedTypes
+      }
+    );
     const changeFieldType = (nextType) => {
       if (allowedTypes.includes(nextType)) actions.changeFieldType(field.id, nextType);
     };
@@ -918,7 +1026,7 @@ function createMuiFieldEditorSlot(options) {
           ] }) : /* @__PURE__ */ jsx13(FieldEditorHeader, { field, index, totalFields: schema.fields.length, actions }),
           /* @__PURE__ */ jsxs7(Stack3, { ...resolved.muiSlotProps?.stack, spacing: resolved.dense ? 1 : 2, children: [
             /* @__PURE__ */ jsxs7(Stack3, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
-              /* @__PURE__ */ jsx13(
+              controls.title === "hidden" ? null : /* @__PURE__ */ jsx13(
                 TextInput,
                 {
                   id: `mui-field-${field.id}-title`,
@@ -929,27 +1037,19 @@ function createMuiFieldEditorSlot(options) {
                   error: field.title.trim().length === 0,
                   helperText: field.title.trim().length === 0 ? translate("builder.required") : "",
                   "aria-describedby": titleErrorId,
-                  disabled: readOnly,
+                  disabled: readOnly || controls.title === "readOnly",
                   onChange: (value) => actions.setSourceText({ kind: "field", id: field.id }, "title", value)
                 }
               ),
-              FieldTypeSelect === void 0 ? /* @__PURE__ */ jsx13(
+              controls.typeSelect === "hidden" ? null : FieldTypeSelect === void 0 ? /* @__PURE__ */ jsx13(
                 Select2,
                 {
-                  id: `mui-field-${field.id}-type`,
+                  id: fieldTypeSelectId,
                   name: `fields.${field.id}.type`,
-                  label: translate("builder.type"),
+                  label: fieldTypeSelectLabel,
                   value: allowedTypes.includes(field.type) ? field.type : "",
-                  options: FIELD_TYPES.filter((type) => allowedTypes.includes(type)).map((type) => {
-                    const definition = DEFAULT_FIELD_TYPE_DEFINITIONS.find((candidate) => candidate.type === type);
-                    return {
-                      value: type,
-                      label: translate(definition?.labelKey ?? `builder.fieldType.${type}`),
-                      icon: components.renderFieldTypeIcon(type),
-                      ...definition?.category === void 0 ? {} : { kind: definition.category }
-                    };
-                  }),
-                  disabled: readOnly,
+                  options: fieldTypeOptions,
+                  disabled: readOnly || controls.typeSelect === "readOnly",
                   onChange: (value) => {
                     if (isFieldType(value)) changeFieldType(value);
                   }
@@ -957,16 +1057,21 @@ function createMuiFieldEditorSlot(options) {
               ) : /* @__PURE__ */ jsx13(
                 FieldTypeSelect,
                 {
+                  id: fieldTypeSelectId,
+                  name: `fields.${field.id}.type`,
+                  label: fieldTypeSelectLabel,
                   currentType: field.type,
                   allowedTypes,
+                  options: fieldTypeOptions,
                   onChangeType: changeFieldType,
-                  disabled: readOnly,
-                  readOnly,
+                  disabled: readOnly || controls.typeSelect === "readOnly",
+                  readOnly: readOnly || controls.typeSelect === "readOnly",
+                  "aria-labelledby": `${fieldTypeSelectId}-label`,
                   renderIcon: components.renderFieldTypeIcon
                 }
               )
             ] }),
-            descriptionMode === "hidden" ? null : /* @__PURE__ */ jsx13(
+            controls.description === "hidden" ? null : /* @__PURE__ */ jsx13(
               TextArea,
               {
                 id: `mui-field-${field.id}-description`,
@@ -974,19 +1079,19 @@ function createMuiFieldEditorSlot(options) {
                 label: translate("builder.description"),
                 value: field.description ?? "",
                 rows: resolved.dense ? 2 : 3,
-                disabled: readOnly,
-                readOnly: descriptionMode === "readOnly",
+                disabled: readOnly || controls.description === "readOnly",
+                readOnly: readOnly || controls.description === "readOnly",
                 onChange: (value) => actions.setSourceText({ kind: "field", id: field.id }, "description", value)
               }
             ),
-            /* @__PURE__ */ jsx13(
+            controls.required === "hidden" ? null : /* @__PURE__ */ jsx13(
               Checkbox2,
               {
                 id: `mui-field-${field.id}-required`,
                 name: `fields.${field.id}.required`,
                 label: translate("builder.required"),
                 checked: field.required,
-                disabled: readOnly,
+                disabled: readOnly || controls.required === "readOnly",
                 onChange: (checked) => actions.updateField(field.id, (current) => ({ ...current, required: checked }))
               }
             ),
@@ -1004,7 +1109,7 @@ function createMuiFieldEditorSlot(options) {
                 onChange: (value) => actions.assignFieldToPage(field.id, value.length === 0 ? null : value)
               }
             ),
-            field.type === "number" || field.type === "rating" ? /* @__PURE__ */ jsxs7(Stack3, { direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
+            field.type === "number" || field.type === "rating" ? (field.type === "number" ? controls.numberLimits : controls.ratingBounds) === "hidden" ? null : /* @__PURE__ */ jsxs7(Stack3, { direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
               /* @__PURE__ */ jsx13(
                 TextInput,
                 {
@@ -1012,7 +1117,7 @@ function createMuiFieldEditorSlot(options) {
                   label: translate("builder.minimum"),
                   type: "number",
                   value: field.min === void 0 ? "" : String(field.min),
-                  disabled: readOnly,
+                  disabled: readOnly || (field.type === "number" ? controls.numberLimits : controls.ratingBounds) === "readOnly",
                   onChange: (value) => actions.updateField(field.id, (current) => updateBound(current, "min", value))
                 }
               ),
@@ -1023,12 +1128,68 @@ function createMuiFieldEditorSlot(options) {
                   label: translate("builder.maximum"),
                   type: "number",
                   value: field.max === void 0 ? "" : String(field.max),
-                  disabled: readOnly,
+                  disabled: readOnly || (field.type === "number" ? controls.numberLimits : controls.ratingBounds) === "readOnly",
                   onChange: (value) => actions.updateField(field.id, (current) => updateBound(current, "max", value))
                 }
               )
             ] }) : null,
-            features?.conditions === false || conditionSources.length === 0 ? null : /* @__PURE__ */ jsxs7(Stack3, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
+            field.type === "number" && controls.numberLimits !== "hidden" ? /* @__PURE__ */ jsx13(
+              TextInput,
+              {
+                id: `mui-field-${field.id}-step`,
+                label: translate("builder.step"),
+                type: "number",
+                value: field.step === void 0 ? "" : String(field.step),
+                disabled: readOnly || controls.numberLimits === "readOnly",
+                onChange: (value) => actions.updateField(field.id, (current) => updateNumberProperty(current, "step", value))
+              }
+            ) : null,
+            (field.type === "text" || field.type === "textarea") && controls.textLimits !== "hidden" ? /* @__PURE__ */ jsxs7(Stack3, { direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
+              /* @__PURE__ */ jsx13(
+                TextInput,
+                {
+                  id: `mui-field-${field.id}-min-length`,
+                  label: translate("builder.minimumLength"),
+                  type: "number",
+                  value: field.minLength === void 0 ? "" : String(field.minLength),
+                  disabled: readOnly || controls.textLimits === "readOnly",
+                  onChange: (value) => actions.updateField(field.id, (current) => {
+                    if (current.type !== "text" && current.type !== "textarea") return current;
+                    const parsed = numericValue(value);
+                    return parsed === void 0 ? current : { ...current, minLength: Math.max(0, Math.floor(parsed)) };
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx13(
+                TextInput,
+                {
+                  id: `mui-field-${field.id}-max-length`,
+                  label: translate("builder.maximumLength"),
+                  type: "number",
+                  value: field.maxLength === void 0 ? "" : String(field.maxLength),
+                  disabled: readOnly || controls.textLimits === "readOnly",
+                  onChange: (value) => actions.updateField(field.id, (current) => {
+                    if (current.type !== "text" && current.type !== "textarea") return current;
+                    const parsed = numericValue(value);
+                    return parsed === void 0 ? current : { ...current, maxLength: Math.max(0, Math.floor(parsed)) };
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx13(
+                TextInput,
+                {
+                  id: `mui-field-${field.id}-pattern`,
+                  label: translate("builder.pattern"),
+                  value: field.pattern ?? "",
+                  disabled: readOnly || controls.textLimits === "readOnly",
+                  onChange: (value) => actions.updateField(
+                    field.id,
+                    (current) => current.type === "text" || current.type === "textarea" ? value.length === 0 ? current : { ...current, pattern: value } : current
+                  )
+                }
+              )
+            ] }) : null,
+            features?.conditions === false || conditionSources.length === 0 || controls.displayConditions === "hidden" ? null : /* @__PURE__ */ jsxs7(Stack3, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
               /* @__PURE__ */ jsx13(
                 Select2,
                 {
@@ -1039,7 +1200,7 @@ function createMuiFieldEditorSlot(options) {
                     { value: "", label: translate("builder.alwaysVisible") },
                     ...conditionSources.map((source) => ({ value: source.id, label: source.title }))
                   ],
-                  disabled: readOnly,
+                  disabled: readOnly || controls.displayConditions === "readOnly",
                   onChange: (value) => actions.setDisplayCondition(
                     field.id,
                     value.length === 0 ? void 0 : { questionId: value, operator: "equals", value: "" }
@@ -1056,7 +1217,7 @@ function createMuiFieldEditorSlot(options) {
                     options: (conditionSource === void 0 ? [] : conditionOperators(conditionSource)).map(
                       (operator) => ({ value: operator, label: translate(`builder.operator.${operator}`) })
                     ),
-                    disabled: readOnly,
+                    disabled: readOnly || controls.displayConditions === "readOnly",
                     onChange: (value) => {
                       if (!isConditionOperator(value)) return;
                       actions.setDisplayCondition(
@@ -1072,7 +1233,7 @@ function createMuiFieldEditorSlot(options) {
                     id: `mui-field-${field.id}-condition-value`,
                     label: translate("builder.conditionValue"),
                     value: condition.value === void 0 ? "" : String(condition.value),
-                    disabled: readOnly,
+                    disabled: readOnly || controls.displayConditions === "readOnly",
                     onChange: (value) => actions.setDisplayCondition(field.id, { ...condition, value })
                   }
                 )
@@ -1082,29 +1243,29 @@ function createMuiFieldEditorSlot(options) {
               /* @__PURE__ */ jsx13(Typography3, { variant: "subtitle2", children: translate("builder.translation", {
                 locale: resolved.getLocaleLabel?.(currentLocale) ?? currentLocale
               }) }),
-              /* @__PURE__ */ jsx13(
+              controls.title === "hidden" ? null : /* @__PURE__ */ jsx13(
                 TextInput,
                 {
                   id: `mui-field-${field.id}-${currentLocale}-title`,
                   label: translate("builder.translatedQuestionTitle"),
                   value: field.translations?.[currentLocale]?.title ?? "",
-                  disabled: readOnly,
+                  disabled: readOnly || controls.title === "readOnly",
                   onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "field", id: field.id }, "title", value)
                 }
               ),
-              descriptionMode === "hidden" ? null : /* @__PURE__ */ jsx13(
+              controls.description === "hidden" ? null : /* @__PURE__ */ jsx13(
                 TextArea,
                 {
                   id: `mui-field-${field.id}-${currentLocale}-description`,
                   label: translate("builder.translatedDescription"),
                   value: field.translations?.[currentLocale]?.description ?? "",
-                  disabled: readOnly,
-                  readOnly: descriptionMode === "readOnly",
+                  disabled: readOnly || controls.description === "readOnly",
+                  readOnly: readOnly || controls.description === "readOnly",
                   onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "field", id: field.id }, "description", value)
                 }
               )
             ] }),
-            "options" in field ? /* @__PURE__ */ jsxs7(Stack3, { "data-mui-slot": "options", spacing: resolved.dense ? 1 : 2, children: [
+            "options" in field && controls.options !== "hidden" ? /* @__PURE__ */ jsxs7(Stack3, { "data-mui-slot": "options", spacing: resolved.dense ? 1 : 2, children: [
               /* @__PURE__ */ jsx13(Typography3, { variant: "subtitle2", children: translate("builder.options") }),
               field.options.map((option, optionIndex) => /* @__PURE__ */ jsx13(
                 OptionEditor,
@@ -1115,7 +1276,7 @@ function createMuiFieldEditorSlot(options) {
                   index: optionIndex,
                   currentLocale,
                   translate,
-                  readOnly,
+                  readOnly: readOnly || controls.options === "readOnly",
                   actions,
                   components
                 },
@@ -1126,7 +1287,7 @@ function createMuiFieldEditorSlot(options) {
                 {
                   action: "addOption",
                   targetId: field.id,
-                  disabled: readOnly || policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
+                  disabled: readOnly || controls.options === "readOnly" || policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
                   onClick: () => actions.addOption(field.id),
                   children: translate("builder.addOption")
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-engine-ts/mui",
-  "version": "3.2.0",
+  "version": "4.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -46,8 +46,8 @@
     "@mui/material": "^6.0.0 || ^7.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@form-engine-ts/core": "3.2.0",
-    "@form-engine-ts/react": "3.2.0"
+    "@form-engine-ts/core": "4.1.0",
+    "@form-engine-ts/react": "4.1.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
@@ -58,8 +58,8 @@
     "@types/react-dom": "^19.2.4",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "@form-engine-ts/core": "3.2.0",
-    "@form-engine-ts/react": "3.2.0"
+    "@form-engine-ts/core": "4.1.0",
+    "@form-engine-ts/react": "4.1.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --clean --external @emotion/react --external @emotion/styled --external @form-engine-ts/core --external @form-engine-ts/react --external @mui/icons-material --external @mui/material --external react --external react-dom",