@form-engine-ts/mui 4.4.0 → 4.5.0

package/dist/index.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ConditionEditor: () => ConditionEditor,
   DEFAULT_MUI_SECTION_ORDER: () => DEFAULT_MUI_SECTION_ORDER,
   MUI_LOCALIZATION_SECTION_ORDERS: () => MUI_LOCALIZATION_SECTION_ORDERS,
   MuiButtonAdapter: () => MuiButtonAdapter,
@@ -38,6 +39,7 @@ __export(index_exports, {
   MuiTextAreaAdapter: () => MuiTextAreaAdapter,
   MuiTextInputAdapter: () => MuiTextInputAdapter,
   MuiToolbarSlot: () => MuiToolbarSlot,
+  TranslationWorkspace: () => TranslationWorkspace,
   createMuiBuilderComponents: () => createMuiBuilderComponents,
   createMuiBuilderProps: () => createMuiBuilderProps,
   createMuiBuilderSlots: () => createMuiBuilderSlots,
@@ -792,11 +794,189 @@ 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");
+var import_material13 = require("@mui/material");
 
-// src/slots/OptionEditor.tsx
+// src/slots/ConditionEditor.tsx
 var import_material10 = require("@mui/material");
 var import_jsx_runtime11 = require("react/jsx-runtime");
+var OPERATORS = [
+  "equals",
+  "not_equals",
+  "contains",
+  "not_contains",
+  "is_empty",
+  "is_not_empty",
+  "greater_than",
+  "less_than"
+];
+function sourceIds(field) {
+  if (field.displayRule === void 0)
+    return field.displayCondition?.questionId === void 0 ? [] : [field.displayCondition.questionId];
+  const ids = [];
+  const visit = (group) => {
+    for (const condition of group.conditions) {
+      if ("logic" in condition) visit(condition);
+      else ids.push(condition.fieldId);
+    }
+  };
+  visit(field.displayRule.condition);
+  return ids;
+}
+function dependsOn(schema, startId, targetId, visited = /* @__PURE__ */ new Set()) {
+  if (startId === targetId) return true;
+  if (visited.has(startId)) return false;
+  visited.add(startId);
+  const field = schema.fields.find((candidate) => candidate.id === startId);
+  return field !== void 0 && sourceIds(field).some((sourceId) => dependsOn(schema, sourceId, targetId, visited));
+}
+function operatorsFor(field) {
+  if (field === void 0) return [];
+  if (field.type === "checkbox" || field.type === "multi-select")
+    return ["contains", "not_contains", "is_empty", "is_not_empty"];
+  if (field.type === "text" || field.type === "textarea")
+    return OPERATORS.filter(
+      (operator) => ["equals", "not_equals", "contains", "not_contains", "is_empty", "is_not_empty"].includes(operator)
+    );
+  if (field.type === "number" || field.type === "rating")
+    return ["equals", "not_equals", "greater_than", "less_than", "is_empty", "is_not_empty"];
+  return ["equals", "not_equals", "is_empty", "is_not_empty"];
+}
+function conditionGroup(rule) {
+  return rule?.condition ?? { logic: "all", conditions: [] };
+}
+function conditionValue(field, condition, onChange) {
+  if (["is_empty", "is_not_empty"].includes(condition.operator)) return null;
+  if (field !== void 0 && "options" in field) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material10.FormControl, { fullWidth: true, size: "small", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material10.InputLabel, { children: "Value" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material10.Select, { label: "Value", value: String(condition.value ?? ""), onChange: (event) => onChange(event.target.value), children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material10.MenuItem, { value: option.id, children: option.label }, option.id)) })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_material10.TextField,
+    {
+      label: "Value",
+      type: field?.type === "number" || field?.type === "rating" ? "number" : "text",
+      value: condition.value === void 0 ? "" : String(condition.value),
+      onChange: (event) => onChange(field?.type === "number" || field?.type === "rating" ? Number(event.target.value) : event.target.value),
+      fullWidth: true,
+      size: "small"
+    }
+  );
+}
+function ConditionEditor({ schema, fieldId, value, onChange, readOnly = false }) {
+  const group = conditionGroup(value);
+  const candidates = schema.fields.filter((field) => field.id !== fieldId && !dependsOn(schema, field.id, fieldId));
+  const updateGroup = (nextGroup) => onChange({ action: value?.action ?? "show", condition: nextGroup });
+  const updateCondition = (index, nextCondition) => {
+    const conditions = group.conditions.map(
+      (condition, conditionIndex) => conditionIndex === index ? nextCondition : condition
+    );
+    updateGroup({ ...group, conditions });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material10.Stack, { spacing: 1.5, "data-testid": `condition-editor-${fieldId}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      import_material10.ToggleButtonGroup,
+      {
+        exclusive: true,
+        value: group.logic,
+        onChange: (_event, logic) => logic === null ? void 0 : updateGroup({ ...group, logic }),
+        disabled: readOnly,
+        size: "small",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material10.ToggleButton, { value: "all", children: "All (AND)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material10.ToggleButton, { value: "any", children: "Any (OR)" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material10.FormControl, { fullWidth: true, size: "small", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material10.InputLabel, { children: "Action" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        import_material10.Select,
+        {
+          label: "Action",
+          value: value?.action ?? "show",
+          onChange: (event) => onChange({ action: event.target.value, condition: group }),
+          disabled: readOnly,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material10.MenuItem, { value: "show", children: "Show when matched" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material10.MenuItem, { value: "hide", children: "Hide when matched" })
+          ]
+        }
+      )
+    ] }),
+    group.conditions.map((condition, index) => {
+      if ("logic" in condition) return null;
+      const source = schema.fields.find((field) => field.id === condition.fieldId);
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material10.Stack, { direction: { xs: "column", md: "row" }, spacing: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material10.FormControl, { fullWidth: true, size: "small", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material10.InputLabel, { children: "Question" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_material10.Select,
+            {
+              label: "Question",
+              value: condition.fieldId,
+              onChange: (event) => {
+                const nextSource = schema.fields.find((field) => field.id === event.target.value);
+                const nextOperator = operatorsFor(nextSource)[0] ?? "equals";
+                updateCondition(index, { fieldId: event.target.value, operator: nextOperator });
+              },
+              disabled: readOnly,
+              children: candidates.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material10.MenuItem, { value: candidate.id, children: candidate.title }, candidate.id))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material10.FormControl, { fullWidth: true, size: "small", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material10.InputLabel, { children: "Operator" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_material10.Select,
+            {
+              label: "Operator",
+              value: condition.operator,
+              onChange: (event) => updateCondition(index, { ...condition, operator: event.target.value }),
+              disabled: readOnly,
+              children: operatorsFor(source).map((operator) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material10.MenuItem, { value: operator, children: operator }, operator))
+            }
+          )
+        ] }),
+        conditionValue(
+          source,
+          condition,
+          (nextValue) => updateCondition(index, { ...condition, value: nextValue })
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_material10.Button,
+          {
+            onClick: () => updateGroup({
+              ...group,
+              conditions: group.conditions.filter((_item, itemIndex) => itemIndex !== index)
+            }),
+            disabled: readOnly,
+            children: "Remove"
+          }
+        )
+      ] }, `${condition.fieldId}-${condition.operator}`);
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_material10.Button,
+      {
+        variant: "outlined",
+        disabled: readOnly || candidates.length === 0,
+        onClick: () => {
+          const source = candidates[0];
+          if (source === void 0) return;
+          const operator = operatorsFor(source)[0] ?? "equals";
+          updateGroup({ ...group, conditions: [...group.conditions, { fieldId: source.id, operator }] });
+        },
+        children: "Add condition"
+      }
+    )
+  ] });
+}
+
+// src/slots/OptionEditor.tsx
+var import_material11 = require("@mui/material");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function createMuiOptionEditorSlot(options) {
   return function MuiOptionEditor({
     field,
@@ -811,9 +991,9 @@ function createMuiOptionEditorSlot(options) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const { IconButton: IconButton2, TextInput } = components;
     const describedBy = option.label.trim().length === 0 ? `mui-option-${option.id}-error` : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material10.Stack, { ...resolved.muiSlotProps?.stack, "data-mui-slot": "option-editor", spacing: resolved.dense ? 0.75 : 1, children: [
-      /* @__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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_material11.Stack, { ...resolved.muiSlotProps?.stack, "data-mui-slot": "option-editor", spacing: resolved.dense ? 0.75 : 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_material11.Stack, { direction: { xs: "column", sm: "row" }, spacing: 1, alignItems: { sm: "flex-start" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           TextInput,
           {
             id: `mui-option-${option.id}`,
@@ -827,8 +1007,8 @@ function createMuiOptionEditorSlot(options) {
             onChange: (value) => actions.updateOption(field.id, option.id, (current) => ({ ...current, label: value }))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material10.Stack, { direction: "row", spacing: 0.5, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_material11.Stack, { direction: "row", spacing: 0.5, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             IconButton2,
             {
               actionType: "moveUp",
@@ -837,7 +1017,7 @@ function createMuiOptionEditorSlot(options) {
               onClick: () => actions.moveOption(field.id, option.id, index - 1)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             IconButton2,
             {
               actionType: "moveDown",
@@ -846,7 +1026,7 @@ function createMuiOptionEditorSlot(options) {
               onClick: () => actions.moveOption(field.id, option.id, index + 1)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             IconButton2,
             {
               actionType: "delete",
@@ -857,7 +1037,7 @@ function createMuiOptionEditorSlot(options) {
           )
         ] })
       ] }),
-      currentLocale.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      currentLocale.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         TextInput,
         {
           id: `mui-option-${option.id}-${currentLocale}`,
@@ -875,8 +1055,8 @@ function createMuiOptionEditorSlot(options) {
 var MuiOptionEditorSlot = createMuiOptionEditorSlot();
 
 // src/slots/Toolbar.tsx
-var import_material11 = require("@mui/material");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_material12 = require("@mui/material");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function createMuiToolbarSlot(options) {
   return function MuiToolbar({
     kind,
@@ -892,8 +1072,8 @@ function createMuiToolbarSlot(options) {
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const { IconButton: IconButton2 } = components;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-      import_material11.Stack,
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      import_material12.Stack,
       {
         ...resolved.muiSlotProps?.stack,
         "data-mui-slot": "toolbar",
@@ -902,7 +1082,7 @@ function createMuiToolbarSlot(options) {
         alignItems: "center",
         sx: resolved.muiSlotProps?.stack?.sx ?? { mb: resolved.dense ? 1 : 2 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             IconButton2,
             {
               actionType: "moveUp",
@@ -911,7 +1091,7 @@ function createMuiToolbarSlot(options) {
               onClick: onMoveUp
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             IconButton2,
             {
               actionType: "moveDown",
@@ -920,7 +1100,7 @@ function createMuiToolbarSlot(options) {
               onClick: onMoveDown
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             IconButton2,
             {
               actionType: "delete",
@@ -937,7 +1117,7 @@ function createMuiToolbarSlot(options) {
 var MuiToolbarSlot = createMuiToolbarSlot();
 
 // src/slots/FieldEditor.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var FIELD_TYPES = import_core.DEFAULT_FIELD_TYPE_DEFINITIONS.map((definition) => definition.type);
 function isFieldType(value) {
   return FIELD_TYPES.some((type) => type === value);
@@ -990,7 +1170,7 @@ function createMuiFieldEditorSlot(options) {
     fieldTypeOptions: fieldTypeOptionsConfig
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
-    const { Button: Button2, Checkbox: Checkbox2, Select: Select2, TextArea, TextInput } = components;
+    const { Button: Button4, Checkbox: Checkbox2, Select: Select3, 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;
@@ -1034,16 +1214,16 @@ function createMuiFieldEditorSlot(options) {
     const changeFieldType = (nextType) => {
       if (allowedTypes.includes(nextType)) actions.changeFieldType(field.id, nextType);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-      import_material12.Card,
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      import_material13.Card,
       {
         ...resolved.muiSlotProps?.card,
         "data-mui-slot": "field-editor",
         variant: "outlined",
         sx: resolved.muiSlotProps?.card?.sx ?? { mb: resolved.dense ? 1 : 2, p: resolved.dense ? 1.5 : 2 },
         children: [
-          FieldEditorHeader === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          FieldEditorHeader === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               Toolbar,
               {
                 schema,
@@ -1061,11 +1241,11 @@ function createMuiFieldEditorSlot(options) {
                 components
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.Typography, { variant: "subtitle1", fontWeight: "bold", children: field.title })
-          ] }) : /* @__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: [
-              controls.title === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "subtitle1", fontWeight: "bold", children: field.title })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FieldEditorHeader, { field, index, totalFields: schema.fields.length, actions }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { ...resolved.muiSlotProps?.stack, spacing: resolved.dense ? 1 : 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
+              controls.title === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 TextInput,
                 {
                   id: `mui-field-${field.id}-title`,
@@ -1080,8 +1260,8 @@ function createMuiFieldEditorSlot(options) {
                   onChange: (value) => actions.setSourceText({ kind: "field", id: field.id }, "title", value)
                 }
               ),
-              controls.typeSelect === "hidden" ? null : FieldTypeSelect === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                Select2,
+              controls.typeSelect === "hidden" ? null : FieldTypeSelect === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                Select3,
                 {
                   id: fieldTypeSelectId,
                   name: `fields.${field.id}.type`,
@@ -1093,7 +1273,7 @@ function createMuiFieldEditorSlot(options) {
                     if (isFieldType(value)) changeFieldType(value);
                   }
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 FieldTypeSelect,
                 {
                   id: fieldTypeSelectId,
@@ -1110,7 +1290,7 @@ function createMuiFieldEditorSlot(options) {
                 }
               )
             ] }),
-            controls.description === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            controls.description === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               TextArea,
               {
                 id: `mui-field-${field.id}-description`,
@@ -1123,7 +1303,7 @@ function createMuiFieldEditorSlot(options) {
                 onChange: (value) => actions.setSourceText({ kind: "field", id: field.id }, "description", value)
               }
             ),
-            controls.required === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            controls.required === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               Checkbox2,
               {
                 id: `mui-field-${field.id}-required`,
@@ -1134,8 +1314,8 @@ function createMuiFieldEditorSlot(options) {
                 onChange: (checked) => actions.updateField(field.id, (current) => ({ ...current, required: checked }))
               }
             ),
-            features?.pages === false || schema.pages === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              Select2,
+            features?.pages === false || schema.pages === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              Select3,
               {
                 id: `mui-field-${field.id}-page`,
                 label: translate("builder.questionPage"),
@@ -1148,8 +1328,8 @@ function createMuiFieldEditorSlot(options) {
                 onChange: (value) => actions.assignFieldToPage(field.id, value.length === 0 ? null : value)
               }
             ),
-            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)(
+            field.type === "number" || field.type === "rating" ? (field.type === "number" ? controls.numberLimits : controls.ratingBounds) === "hidden" ? null : /* @__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-field-${field.id}-minimum`,
@@ -1160,7 +1340,7 @@ function createMuiFieldEditorSlot(options) {
                   onChange: (value) => actions.updateField(field.id, (current) => updateBound(current, "min", value))
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 TextInput,
                 {
                   id: `mui-field-${field.id}-maximum`,
@@ -1172,7 +1352,7 @@ function createMuiFieldEditorSlot(options) {
                 }
               )
             ] }) : null,
-            field.type === "number" && controls.numberLimits !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            field.type === "number" && controls.numberLimits !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               TextInput,
               {
                 id: `mui-field-${field.id}-step`,
@@ -1183,8 +1363,8 @@ function createMuiFieldEditorSlot(options) {
                 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)(
+            (field.type === "text" || field.type === "textarea") && controls.textLimits !== "hidden" ? /* @__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-field-${field.id}-min-length`,
@@ -1199,7 +1379,7 @@ function createMuiFieldEditorSlot(options) {
                   })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 TextInput,
                 {
                   id: `mui-field-${field.id}-max-length`,
@@ -1214,7 +1394,7 @@ function createMuiFieldEditorSlot(options) {
                   })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 TextInput,
                 {
                   id: `mui-field-${field.id}-pattern`,
@@ -1228,9 +1408,25 @@ function createMuiFieldEditorSlot(options) {
                 }
               )
             ] }) : 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,
+            features?.conditions === false || conditionSources.length === 0 || controls.displayConditions === "hidden" ? null : field.displayRule !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              ConditionEditor,
+              {
+                schema,
+                fieldId: field.id,
+                value: field.displayRule,
+                readOnly: readOnly || controls.displayConditions === "readOnly",
+                onChange: (displayRule) => actions.updateField(field.id, (current) => {
+                  const { displayCondition: _displayCondition, ...withoutLegacyCondition } = current;
+                  if (displayRule === void 0) {
+                    const { displayRule: _displayRule, ...withoutRules } = withoutLegacyCondition;
+                    return withoutRules;
+                  }
+                  return { ...withoutLegacyCondition, displayRule };
+                })
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                Select3,
                 {
                   id: `mui-field-${field.id}-condition-source`,
                   label: translate("builder.displayCondition"),
@@ -1246,9 +1442,9 @@ function createMuiFieldEditorSlot(options) {
                   )
                 }
               ),
-              condition === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                  Select2,
+              condition === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  Select3,
                   {
                     id: `mui-field-${field.id}-condition-operator`,
                     label: translate("builder.conditionOperator"),
@@ -1266,7 +1462,7 @@ function createMuiFieldEditorSlot(options) {
                     }
                   }
                 ),
-                condition.operator === "not_empty" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                condition.operator === "not_empty" ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                   TextInput,
                   {
                     id: `mui-field-${field.id}-condition-value`,
@@ -1278,11 +1474,11 @@ function createMuiFieldEditorSlot(options) {
                 )
               ] })
             ] }),
-            currentLocale.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { spacing: resolved.dense ? 1 : 2, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.Typography, { variant: "subtitle2", children: translate("builder.translation", {
+            currentLocale.length === 0 ? null : /* @__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: "subtitle2", children: translate("builder.translation", {
                 locale: resolved.getLocaleLabel?.(currentLocale) ?? currentLocale
               }) }),
-              controls.title === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              controls.title === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 TextInput,
                 {
                   id: `mui-field-${field.id}-${currentLocale}-title`,
@@ -1292,7 +1488,7 @@ function createMuiFieldEditorSlot(options) {
                   onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "field", id: field.id }, "title", value)
                 }
               ),
-              controls.description === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              controls.description === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 TextArea,
                 {
                   id: `mui-field-${field.id}-${currentLocale}-description`,
@@ -1304,9 +1500,9 @@ function createMuiFieldEditorSlot(options) {
                 }
               )
             ] }),
-            "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)(
+            "options" in field && controls.options !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { "data-mui-slot": "options", spacing: resolved.dense ? 1 : 2, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "subtitle2", children: translate("builder.options") }),
+              field.options.map((option, optionIndex) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 OptionEditor,
                 {
                   schema,
@@ -1321,8 +1517,8 @@ function createMuiFieldEditorSlot(options) {
                 },
                 option.id
               )),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                Button2,
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                Button4,
                 {
                   action: "addOption",
                   targetId: field.id,
@@ -1342,9 +1538,9 @@ var MuiFieldEditorSlot = createMuiFieldEditorSlot();
 
 // src/slots/Localization.tsx
 var import_icons_material2 = require("@mui/icons-material");
-var import_material13 = require("@mui/material");
+var import_material14 = require("@mui/material");
 var import_react3 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = 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) {
   const seen = /* @__PURE__ */ new Set();
@@ -1373,7 +1569,7 @@ function createMuiLocalizationSlot(options) {
     translate
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
-    const { Button: Button2, ErrorMessage, Select: Select2, TextArea, TextInput } = components;
+    const { Button: Button4, ErrorMessage, Select: Select3, TextArea, TextInput } = components;
     const [newLocale, setNewLocale] = (0, import_react3.useState)("");
     const [pendingFocusLocale, setPendingFocusLocale] = (0, import_react3.useState)(null);
     const locales = Array.from(
@@ -1438,13 +1634,13 @@ function createMuiLocalizationSlot(options) {
       supportedLocales: schema.supportedLocales ?? [],
       totalLocales: registeredLocales.size
     };
-    const summary = localizationOptions.renderSummary === void 0 ? localizationOptions.showSummary ? configuredTranslationLocales.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Alert, { severity: "success", sx: { mb: 2 }, children: translate("builder.localization.localesConfiguredSummary", {
+    const summary = localizationOptions.renderSummary === void 0 ? localizationOptions.showSummary ? configuredTranslationLocales.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.Alert, { severity: "success", sx: { mb: 2 }, children: translate("builder.localization.localesConfiguredSummary", {
       count: schema.supportedLocales?.length ?? 0
-    }) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Alert, { severity: "info", sx: { mb: 2 }, children: translate("builder.localization.noLocalesConfigured") }) : null : localizationOptions.renderSummary(summaryContext);
-    const title = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { alignItems: "center", direction: "row", spacing: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "subtitle1", fontWeight: "bold", children: translate("builder.localization") }),
-      localizationOptions.renderSummary === void 0 && localizationOptions.showSummary && configuredTranslationLocales.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        import_material13.Chip,
+    }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.Alert, { severity: "info", sx: { mb: 2 }, children: translate("builder.localization.noLocalesConfigured") }) : null : localizationOptions.renderSummary(summaryContext);
+    const title = /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material14.Stack, { alignItems: "center", direction: "row", spacing: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.Typography, { variant: "subtitle1", fontWeight: "bold", children: translate("builder.localization") }),
+      localizationOptions.renderSummary === void 0 && localizationOptions.showSummary && configuredTranslationLocales.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        import_material14.Chip,
         {
           label: legacySummaryLabel,
           size: "small",
@@ -1455,11 +1651,11 @@ function createMuiLocalizationSlot(options) {
     ] });
     const noCandidateLocales = hasLocaleSelector && filteredAvailableLocales.length === 0;
     const candidateHelperText = localeLimitReached ? void 0 : noCandidateLocales ? translate("builder.localization.allLocalesAdded") : void 0;
-    const content = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { ...stackProps, spacing: resolved.dense ? 1 : 2, children: [
+    const content = /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material14.Stack, { ...stackProps, spacing: resolved.dense ? 1 : 2, children: [
       !collapsible ? title : null,
       summary,
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-        import_material13.Stack,
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        import_material14.Stack,
         {
           ...stackProps,
           direction: { xs: "column", sm: "row" },
@@ -1467,16 +1663,16 @@ function createMuiLocalizationSlot(options) {
           spacing: resolved.dense ? 1 : 2,
           sx: { mt: 1 },
           children: [
-            defaultLocaleControl === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Box, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, children: defaultLocaleControl === "readOnly" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { spacing: 0.5, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "caption", color: "text.secondary", children: translate("builder.defaultLocale") }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                import_material13.Chip,
+            defaultLocaleControl === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.Box, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, children: defaultLocaleControl === "readOnly" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material14.Stack, { spacing: 0.5, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.Typography, { variant: "caption", color: "text.secondary", children: translate("builder.defaultLocale") }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_material14.Chip,
                 {
                   label: resolved.getLocaleLabel?.(schema.defaultLocale ?? "") ?? schema.defaultLocale ?? "",
                   size: resolved.size
                 }
               )
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               TextInput,
               {
                 id: "mui-builder-default-locale",
@@ -1489,8 +1685,8 @@ function createMuiLocalizationSlot(options) {
                 }
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Box, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, onKeyDownCapture: handleAddKeyDown, children: hasLocaleSelector ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              Select2,
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.Box, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, onKeyDownCapture: handleAddKeyDown, children: hasLocaleSelector ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              Select3,
               {
                 id: "mui-builder-new-locale",
                 label: translate("builder.localization.selectLocaleToAdd"),
@@ -1500,7 +1696,7 @@ function createMuiLocalizationSlot(options) {
                 disabled: readOnly || localeLimitReached || noCandidateLocales,
                 onChange: setNewLocale
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               TextInput,
               {
                 id: "mui-builder-new-locale",
@@ -1510,16 +1706,16 @@ function createMuiLocalizationSlot(options) {
                 onChange: setNewLocale
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              import_material13.Box,
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              import_material14.Box,
               {
                 sx: {
                   flexShrink: 0,
                   minWidth: "max-content",
                   ...localizationOptions.noWrapActions ?? true ? { whiteSpace: "nowrap" } : {}
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  Button2,
+                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  Button4,
                   {
                     variant: "primary",
                     action: "addLocale",
@@ -1534,17 +1730,17 @@ function createMuiLocalizationSlot(options) {
           ]
         }
       ),
-      localeLimitReached ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "body2", color: "text.secondary", children: translate("builder.localization.maxLocalesReached", { max: policy?.maxLocales ?? 0 }) }) : null,
-      locales.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        import_material13.Tabs,
+      localeLimitReached ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.Typography, { variant: "body2", color: "text.secondary", children: translate("builder.localization.maxLocalesReached", { max: policy?.maxLocales ?? 0 }) }) : null,
+      locales.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        import_material14.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,
+          children: locales.map((locale) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            import_material14.Tab,
             {
               id: `mui-builder-locale-tab-${locale}`,
               value: locale,
@@ -1556,8 +1752,8 @@ function createMuiLocalizationSlot(options) {
           ))
         }
       ),
-      !translationAdapterAvailable ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Box, { sx: { minWidth: "max-content", whiteSpace: "nowrap" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        Button2,
+      !translationAdapterAvailable ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.Box, { sx: { minWidth: "max-content", whiteSpace: "nowrap" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        Button4,
         {
           variant: "secondary",
           noWrap: localizationOptions.noWrapActions ?? true,
@@ -1566,9 +1762,9 @@ function createMuiLocalizationSlot(options) {
           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: locales.length === 0 ? emptyStateMessage : translate("builder.selectLocale") }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { ...stackProps, spacing: resolved.dense ? 1 : 2, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      translationError === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ErrorMessage, { message: translationError }),
+      !editingLocaleConfigured ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.Typography, { variant: "body2", color: "text.secondary", children: locales.length === 0 ? emptyStateMessage : translate("builder.selectLocale") }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material14.Stack, { ...stackProps, spacing: resolved.dense ? 1 : 2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           TextInput,
           {
             id: `mui-builder-${currentLocale}-form-title`,
@@ -1578,7 +1774,7 @@ function createMuiLocalizationSlot(options) {
             onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "form" }, "title", value)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           TextArea,
           {
             id: `mui-builder-${currentLocale}-form-description`,
@@ -1588,7 +1784,7 @@ function createMuiLocalizationSlot(options) {
             onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "form" }, "description", value)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           TextInput,
           {
             id: `mui-builder-${currentLocale}-completion-message`,
@@ -1603,13 +1799,13 @@ function createMuiLocalizationSlot(options) {
     const configured = locales.length > 0;
     const defaultExpanded = localizationOptions.defaultExpanded === "when-configured" ? configured : localizationOptions.defaultExpanded === "always" ? true : localizationOptions.defaultExpanded ?? false;
     if (collapsible) {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Accordion, { ...resolved.muiSlotProps?.accordion, "data-mui-slot": "localization", defaultExpanded, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.AccordionSummary, { expandIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons_material2.ExpandMore, {}), children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.AccordionDetails, { children: content })
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material14.Accordion, { ...resolved.muiSlotProps?.accordion, "data-mui-slot": "localization", defaultExpanded, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.AccordionSummary, { expandIcon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_material2.ExpandMore, {}), children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.AccordionDetails, { children: content })
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      import_material13.Box,
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_material14.Box,
       {
         "data-mui-slot": "localization",
         sx: {
@@ -1627,8 +1823,8 @@ function createMuiLocalizationSlot(options) {
 var MuiLocalizationSlot = createMuiLocalizationSlot();
 
 // src/slots/MuiChoiceGroupSlot.tsx
-var import_material14 = require("@mui/material");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_material15 = require("@mui/material");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function MuiChoiceGroupSlot({
   title,
   description,
@@ -1638,8 +1834,8 @@ function MuiChoiceGroupSlot({
   children,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_material14.Paper,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_material15.Paper,
     {
       className,
       variant: "outlined",
@@ -1649,11 +1845,11 @@ function MuiChoiceGroupSlot({
         mb: 2,
         p: 2
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_material14.FormControl, { component: "fieldset", error: error !== void 0, fullWidth: true, required, disabled, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.FormLabel, { component: "legend", sx: { fontWeight: "bold", mb: description === void 0 ? 1 : 0.5 }, children: title }),
-        description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.FormHelperText, { sx: { mt: 0, mb: 1 }, children: description }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_material15.FormControl, { component: "fieldset", error: error !== void 0, fullWidth: true, required, disabled, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material15.FormLabel, { component: "legend", sx: { fontWeight: "bold", mb: description === void 0 ? 1 : 0.5 }, children: title }),
+        description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material15.FormHelperText, { sx: { mt: 0, mb: 1 }, children: description }),
         children,
-        error === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material14.FormHelperText, { error: true, children: error.message })
+        error === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material15.FormHelperText, { error: true, children: error.message })
       ] })
     }
   );
@@ -1690,11 +1886,12 @@ function createMuiBuilderProps(options, overrides = {}) {
 // src/MuiFormBuilder.tsx
 var import_react4 = require("@form-engine-ts/react");
 var import_react5 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function MuiFormBuilder({
   muiOptions,
   layoutOptions,
   localizationOptions,
+  submissionSettingsOptions,
   muiSlotProps,
   components: customComponents,
   slots: customSlots,
@@ -1713,20 +1910,170 @@ function MuiFormBuilder({
   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_runtime16.jsx)(MuiFormBuilderContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const baseSectionOrder = sectionOrder ?? (placement === void 0 ? contextOptions.layoutOptions?.sectionOrder : MUI_LOCALIZATION_SECTION_ORDERS[placement]);
+  const resolvedSectionOrder = (() => {
+    if (submissionSettingsOptions?.enabled !== true) return baseSectionOrder;
+    const order = [
+      ...baseSectionOrder ?? DEFAULT_MUI_SECTION_ORDER
+    ].filter((name) => name !== "submissionSettings");
+    const settingsPlacement = submissionSettingsOptions.placement ?? "bottom";
+    const target = settingsPlacement === "beforeQuestions" ? "questions" : settingsPlacement === "afterQuestions" ? "addQuestion" : void 0;
+    if (target === void 0) return [...order, "submissionSettings"];
+    const index = order.indexOf(target);
+    order.splice(
+      index < 0 ? order.length : index + (settingsPlacement === "afterQuestions" ? 1 : 0),
+      0,
+      "submissionSettings"
+    );
+    return order;
+  })();
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MuiFormBuilderContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_react4.FormBuilder,
     {
       ...props,
       components,
       disableDefaultStyles: true,
       slots,
-      ...resolvedSectionOrder === void 0 ? {} : { sectionOrder: resolvedSectionOrder }
+      ...resolvedSectionOrder === void 0 ? {} : { sectionOrder: resolvedSectionOrder },
+      ...submissionSettingsOptions === void 0 ? {} : { submissionSettingsOptions }
     }
   ) });
 }
+
+// src/workspace/TranslationWorkspace.tsx
+var import_react6 = require("@form-engine-ts/react");
+var import_material16 = require("@mui/material");
+var import_react7 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var statusLabel = {
+  missing: "Missing",
+  translated: "Translated",
+  stale: "Source changed",
+  manual: "Manual",
+  "manual-stale": "Manual / source changed"
+};
+function SlotCard({
+  slot,
+  readOnly,
+  onChange,
+  onTranslate
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Card, { variant: "outlined", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material16.Stack, { spacing: 1.5, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material16.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Typography, { variant: "subtitle2", children: slot.path }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Chip, { size: "small", label: statusLabel[slot.status ?? "missing"] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_material16.TextField,
+      {
+        label: "Source",
+        value: slot.sourceText,
+        multiline: true,
+        fullWidth: true,
+        slotProps: { input: { readOnly: true } }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_material16.TextField,
+      {
+        label: "Translation",
+        value: slot.existingText ?? "",
+        multiline: true,
+        fullWidth: true,
+        disabled: readOnly,
+        onChange: (event) => onChange(event.target.value)
+      }
+    ),
+    slot.status === "stale" || slot.status === "manual-stale" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Typography, { color: "warning.main", variant: "body2", children: "The source text has changed since this translation was created." }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Button, { variant: "outlined", onClick: onTranslate, disabled: readOnly, children: "Translate this slot" })
+  ] }) }) });
+}
+function TranslationWorkspace({
+  schema,
+  onChange,
+  sourceLocale,
+  targetLocale,
+  translationAdapter,
+  readOnly = false
+}) {
+  const workspace = (0, import_react6.useTranslationWorkspace)({
+    schema,
+    ...onChange === void 0 ? {} : { onChange },
+    ...sourceLocale === void 0 ? {} : { sourceLocale },
+    ...targetLocale === void 0 ? {} : { targetLocale },
+    ...translationAdapter === void 0 ? {} : { translationAdapter },
+    readOnly
+  });
+  const [newLocale, setNewLocale] = (0, import_react7.useState)("");
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material16.Stack, { spacing: 2, "data-testid": "translation-workspace", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material16.Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, alignItems: { sm: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Typography, { variant: "h6", children: "Translations" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material16.Typography, { variant: "body2", children: [
+        workspace.summary.completionPercentage,
+        "% complete (",
+        workspace.summary.translatedCount,
+        "/",
+        workspace.summary.totalSlots,
+        ")"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_material16.Button,
+        {
+          variant: "contained",
+          onClick: () => void workspace.translateAll(),
+          disabled: readOnly || workspace.isTranslating,
+          children: "Translate all"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.LinearProgress, { variant: "determinate", value: workspace.summary.completionPercentage }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material16.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_material16.Tabs,
+        {
+          value: workspace.targetLocale,
+          onChange: (_event, value) => workspace.setTargetLocale(value),
+          "aria-label": "Translation locales",
+          children: workspace.targetLocales.map((locale) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Tab, { value: locale, label: locale }, locale))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_material16.TextField,
+        {
+          size: "small",
+          label: "Add locale",
+          value: newLocale,
+          onChange: (event) => setNewLocale(event.target.value)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_material16.Button,
+        {
+          onClick: () => {
+            workspace.addLocale(newLocale);
+            setNewLocale("");
+          },
+          disabled: readOnly,
+          children: "Add"
+        }
+      )
+    ] }),
+    workspace.error === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Typography, { color: "error", children: workspace.error }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Stack, { spacing: 1.5, children: workspace.slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      SlotCard,
+      {
+        slot,
+        readOnly,
+        onChange: (text) => workspace.setTranslation(slot, text),
+        onTranslate: () => void workspace.translateSlot(slot)
+      },
+      slot.path
+    )) })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ConditionEditor,
   DEFAULT_MUI_SECTION_ORDER,
   MUI_LOCALIZATION_SECTION_ORDERS,
   MuiButtonAdapter,
@@ -1745,6 +2092,7 @@ function MuiFormBuilder({
   MuiTextAreaAdapter,
   MuiTextInputAdapter,
   MuiToolbarSlot,
+  TranslationWorkspace,
   createMuiBuilderComponents,
   createMuiBuilderProps,
   createMuiBuilderSlots,