@form-engine-ts/react 2.1.1 → 2.2.0

package/README.md

@@ -55,7 +55,7 @@ batch-translation action.
 
 `useFormBuilder({ schema, onChange, policy, idFactory, factories })` exposes controlled field, option, page, condition,
 source-text, and localized-text actions. Core's `FormPolicy` enforces allowed field types, field/option limits, text and
-schema-byte limits, and required locales identically in browser and server code. Every mutation returns a typed
+schema-byte limits, and required/allowed/maximum locale constraints identically in browser and server code. Every mutation returns a typed
 `BuilderActionResult`; invalid, empty, or duplicate generated IDs leave the schema unchanged. `BuilderFactories` injects
 initial field, option, and page shapes. `<FormBuilder>` delegates its UI mutations to this hook and accepts the same
 options. Its completion-message editors cover both source and locale text. `translationOptions` and
@@ -67,6 +67,11 @@ Visual-builder field creation uses `defaultFieldType` when it is allowed, otherw
 per-locale/property metadata to manual edits. Automatic translation defaults to `overwrite: "missing-only"`; explicitly
 pass `{ overwrite: "all" }` to replace existing translations.
 
+Pass `readOnly` to keep the complete builder visible while disabling every mutation. The `features` prop independently
+controls `pages`, `localization`, and `conditions` authoring surfaces; each defaults to `true`. When `allowedLocales` is
+set, locale addition becomes a selector containing only unregistered allowed locales, and the action is disabled at
+`maxLocales`.
+
 `FormRenderer` can also be used without an explicit provider:
 
 ```tsx

package/dist/index.cjs

@@ -162,10 +162,16 @@ function useFormBuilder({
       if (pages === void 0) return { success: false, error: { type: "node_not_found", kind: "page", id: pageId } };
       const updated = updater(page);
       if (updated.id !== pageId) return { success: false, error: { type: "invalid_id", kind: "page", id: updated.id } };
+      for (const text of [updated.title, updated.description]) {
+        if (text !== void 0) {
+          const error = textPolicyError(text);
+          if (error !== void 0) return error;
+        }
+      }
       onChange({ ...schema, pages: pages.map((candidate) => candidate.id === pageId ? updated : candidate) });
       return { success: true };
     },
-    [onChange, schema]
+    [onChange, schema, textPolicyError]
   );
   const addField = (0, import_react.useCallback)(
     (type, pageId) => {
@@ -584,6 +590,17 @@ function useFormBuilder({
       const normalized = locale.trim();
       if (normalized.length === 0)
         return { success: false, error: { type: "invalid_operation", message: "Locale must not be empty." } };
+      if (policy?.allowedLocales !== void 0 && !policy.allowedLocales.includes(normalized)) {
+        return { success: false, error: { type: "disallowed_locale", locale: normalized } };
+      }
+      const registeredLocales = /* @__PURE__ */ new Set([
+        ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
+        ...schema.supportedLocales ?? []
+      ]);
+      if (registeredLocales.has(normalized)) return { success: true };
+      if (policy?.maxLocales !== void 0 && registeredLocales.size >= policy.maxLocales) {
+        return { success: false, error: { type: "max_locales_exceeded", max: policy.maxLocales } };
+      }
       onChange({
         ...schema,
         supportedLocales: [
@@ -596,13 +613,23 @@ function useFormBuilder({
       });
       return { success: true };
     },
-    [onChange, schema]
+    [onChange, policy?.allowedLocales, policy?.maxLocales, schema]
   );
   const setDefaultLocale = (0, import_react.useCallback)(
     (locale) => {
       const normalized = locale.trim();
       if (normalized.length === 0)
         return { success: false, error: { type: "invalid_operation", message: "Locale must not be empty." } };
+      if (policy?.allowedLocales !== void 0 && !policy.allowedLocales.includes(normalized)) {
+        return { success: false, error: { type: "disallowed_locale", locale: normalized } };
+      }
+      const registeredLocales = /* @__PURE__ */ new Set([
+        ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
+        ...schema.supportedLocales ?? []
+      ]);
+      if (!registeredLocales.has(normalized) && policy?.maxLocales !== void 0 && registeredLocales.size >= policy.maxLocales) {
+        return { success: false, error: { type: "max_locales_exceeded", max: policy.maxLocales } };
+      }
       onChange({
         ...schema,
         defaultLocale: normalized,
@@ -610,7 +637,7 @@ function useFormBuilder({
       });
       return { success: true };
     },
-    [onChange, schema]
+    [onChange, policy?.allowedLocales, policy?.maxLocales, schema]
   );
   const validationIssues = (0, import_react.useMemo)(() => {
     const result = (0, import_core.validateFormSchema)(schema, policy === void 0 ? {} : { policy });
@@ -797,7 +824,9 @@ function FormBuilder({
   className = "",
   defaultFieldType,
   onActionError,
-  createManualTranslationMetadata
+  createManualTranslationMetadata,
+  readOnly = false,
+  features
 }) {
   const headless = useFormBuilder({
     schema,
@@ -815,28 +844,33 @@ function FormBuilder({
     const translated = translator?.translate(key, locale, params);
     return translated === void 0 ? interpolate(BUILDER_DEFAULTS[key] ?? key, params) : translated;
   };
-  const executeAction = (result, context) => {
+  const pagesEnabled = features?.pages ?? true;
+  const localizationEnabled = features?.localization ?? true;
+  const conditionsEnabled = features?.conditions ?? true;
+  const executeAction = (run, context) => {
+    if (readOnly) return { success: true };
+    const result = run();
     if (!result.success) onActionError?.(result.error, context);
     return result;
   };
-  const updateField = (fieldId, updater, params) => executeAction(headless.updateField(fieldId, updater), {
+  const updateField = (fieldId, updater, params) => executeAction(() => headless.updateField(fieldId, updater), {
     action: "updateField",
     targetId: fieldId,
     ...params === void 0 ? {} : { params }
   });
-  const changeType = (fieldId, type) => executeAction(headless.changeFieldType(fieldId, type), {
+  const changeType = (fieldId, type) => executeAction(() => headless.changeFieldType(fieldId, type), {
     action: "changeFieldType",
     targetId: fieldId,
     params: { type }
   });
-  const removeField = (fieldId) => executeAction(headless.removeField(fieldId), { action: "removeField", targetId: fieldId });
+  const removeField = (fieldId) => executeAction(() => headless.removeField(fieldId), { action: "removeField", targetId: fieldId });
   const initialFieldType = resolveInitialFieldType(defaultFieldType, policy?.allowedFieldTypes);
   const maxFieldsReached = policy?.maxFields !== void 0 && schema.fields.length >= policy.maxFields;
   const moveField = (index, offset) => {
     const target = index + offset;
     const field = schema.fields[index];
     if (field !== void 0) {
-      executeAction(headless.moveField(field.id, target), {
+      executeAction(() => headless.moveField(field.id, target), {
         action: "moveField",
         targetId: field.id,
         params: { targetIndex: target }
@@ -845,10 +879,10 @@ function FormBuilder({
   };
   const addField = () => {
     if (initialFieldType === null) return;
-    executeAction(headless.addField(initialFieldType), { action: "addField" });
+    executeAction(() => headless.addField(initialFieldType), { action: "addField" });
   };
   const enablePages = () => {
-    if (schema.pages === void 0) executeAction(headless.addPage(), { action: "addPage" });
+    if (schema.pages === void 0) executeAction(() => headless.addPage(), { action: "addPage" });
   };
   const pageForField = (fieldId) => schema.pages?.find((page) => page.questionIds.includes(fieldId));
   const movablePageQuestions = schema.pages?.flatMap((page) => page.questionIds.length > 1 ? page.questionIds : []) ?? [];
@@ -859,7 +893,7 @@ function FormBuilder({
     }
     const questionId = movablePageQuestions.includes(newPageQuestionId) ? newPageQuestionId : movablePageQuestions[0];
     if (questionId === void 0) return;
-    executeAction(headless.addPage(questionId), {
+    executeAction(() => headless.addPage(questionId), {
       action: "addPage",
       targetId: questionId,
       params: { questionId }
@@ -868,13 +902,14 @@ function FormBuilder({
   };
   const removePage = (pageIndex) => {
     const page = schema.pages?.[pageIndex];
-    if (page !== void 0) executeAction(headless.removePage(page.id), { action: "removePage", targetId: page.id });
+    if (page !== void 0)
+      executeAction(() => headless.removePage(page.id), { action: "removePage", targetId: page.id });
   };
   const movePage = (pageIndex, offset) => {
     const target = pageIndex + offset;
     const page = schema.pages?.[pageIndex];
     if (page !== void 0) {
-      executeAction(headless.movePage(page.id, target), {
+      executeAction(() => headless.movePage(page.id, target), {
         action: "movePage",
         targetId: page.id,
         params: { targetIndex: target }
@@ -882,24 +917,36 @@ function FormBuilder({
     }
   };
   const updatePage = (pageId, update) => {
-    headless.updatePage(pageId, update);
+    executeAction(() => headless.updatePage(pageId, update), {
+      action: "updatePage",
+      targetId: pageId
+    });
   };
   const assignFieldToPage = (fieldId, pageId) => {
-    executeAction(headless.assignFieldToPage(fieldId, pageId), {
+    executeAction(() => headless.assignFieldToPage(fieldId, pageId), {
       action: "assignFieldToPage",
       targetId: fieldId,
       params: { pageId }
     });
   };
   const addLocale = () => {
+    if (readOnly) return;
     const normalized = newLocale.trim();
     if (normalized.length === 0) return;
-    headless.addLocale(normalized);
+    const result = executeAction(() => headless.addLocale(normalized), {
+      action: "addLocale",
+      params: { locale: normalized }
+    });
+    if (!result.success) return;
     setEditingLocale(normalized);
     setNewLocale("");
   };
+  const setDefaultLocale = (locale2) => executeAction(() => headless.setDefaultLocale(locale2), {
+    action: "setDefaultLocale",
+    params: { locale: locale2 }
+  });
   const translateAll = async () => {
-    if (translationAdapter === void 0 || editingLocale.length === 0) return;
+    if (readOnly || translationAdapter === void 0 || editingLocale.length === 0) return;
     setIsTranslating(true);
     setTranslationError(null);
     try {
@@ -916,10 +963,11 @@ function FormBuilder({
     }
   };
   const updateManualTranslation = (context) => {
+    if (readOnly) return;
     const metadata = createManualTranslationMetadata?.(context);
     const target = context.kind === "form" ? { kind: "form" } : { kind: context.kind, id: context.nodeId };
     executeAction(
-      headless.setLocaleTranslation(
+      () => headless.setLocaleTranslation(
         context.locale,
         target,
         context.property,
@@ -945,41 +993,51 @@ function FormBuilder({
       ...schema.translationMetadata?.[editingLocale]?.[property] === void 0 ? {} : { existingTranslationMetadata: schema.translationMetadata[editingLocale]?.[property] }
     });
   };
-  const setSourceText = (target, property, text) => executeAction(headless.setSourceText(target, property, text), {
+  const setSourceText = (target, property, text) => executeAction(() => headless.setSourceText(target, property, text), {
     action: "setSourceText",
     ...target.id === void 0 ? {} : { targetId: target.id },
     params: { kind: target.kind, property }
   });
-  const updateOption = (fieldId, optionId, label) => executeAction(
-    headless.updateOption(fieldId, optionId, (option) => ({ ...option, label })),
-    { action: "updateOption", targetId: optionId, params: { fieldId } }
-  );
-  const addOption = (fieldId) => executeAction(headless.addOption(fieldId), { action: "addOption", targetId: fieldId });
-  const removeOption = (fieldId, optionId) => executeAction(headless.removeOption(fieldId, optionId), {
+  const updateOption = (fieldId, optionId, label) => executeAction(() => headless.updateOption(fieldId, optionId, (option) => ({ ...option, label })), {
+    action: "updateOption",
+    targetId: optionId,
+    params: { fieldId }
+  });
+  const addOption = (fieldId) => executeAction(() => headless.addOption(fieldId), { action: "addOption", targetId: fieldId });
+  const removeOption = (fieldId, optionId) => executeAction(() => headless.removeOption(fieldId, optionId), {
     action: "removeOption",
     targetId: optionId,
     params: { fieldId }
   });
-  const moveOption = (fieldId, optionId, targetIndex) => executeAction(headless.moveOption(fieldId, optionId, targetIndex), {
+  const moveOption = (fieldId, optionId, targetIndex) => executeAction(() => headless.moveOption(fieldId, optionId, targetIndex), {
     action: "moveOption",
     targetId: optionId,
     params: { fieldId, targetIndex }
   });
-  const setDisplayCondition = (fieldId, condition) => executeAction(headless.setDisplayCondition(fieldId, condition), {
+  const setDisplayCondition = (fieldId, condition) => executeAction(() => headless.setDisplayCondition(fieldId, condition), {
     action: "setDisplayCondition",
     targetId: fieldId,
     ...condition === void 0 ? {} : { params: { condition } }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  const registeredLocales = /* @__PURE__ */ new Set([
+    ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
+    ...schema.supportedLocales ?? []
+  ]);
+  const availableAllowedLocales = policy?.allowedLocales?.filter((candidate) => !registeredLocales.has(candidate));
+  const localeLimitReached = policy?.maxLocales !== void 0 && registeredLocales.size >= policy.maxLocales;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "section",
     {
       className: `form-engine-builder ${className}`.trim(),
       "aria-label": translate("builder.formBuilder"),
       onClickCapture: (event) => {
+        if (readOnly) return;
         if (!(event.target instanceof HTMLElement)) return;
         const actionTarget = event.target.closest("[data-builder-action]");
         if (actionTarget?.dataset.builderAction === "addField" && maxFieldsReached && initialFieldType !== null)
           addField();
+        if (actionTarget?.dataset.builderAction === "addLocale" && localeLimitReached && newLocale.trim().length > 0)
+          addLocale();
         if (actionTarget?.dataset.builderAction !== "addOption") return;
         const fieldId = actionTarget.dataset.targetId;
         const field = schema.fields.find((candidate) => candidate.id === fieldId);
@@ -987,12 +1045,14 @@ function FormBuilder({
           addOption(fieldId);
         }
       },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "form-engine-builder__pages", "aria-labelledby": "builder-pages-heading", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "form-engine-builder__controls", disabled: readOnly, children: [
+        pagesEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "form-engine-builder__pages", "aria-labelledby": "builder-pages-heading", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { id: "builder-pages-heading", children: translate("builder.pages") }),
           schema.pages === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: enablePages, children: translate("builder.enablePages") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
             schema.pages.map((page, pageIndex) => {
-              const priorQuestionIds = new Set(schema.pages?.slice(0, pageIndex).flatMap((item) => item.questionIds));
+              const priorQuestionIds = new Set(
+                schema.pages?.slice(0, pageIndex).flatMap((item) => item.questionIds)
+              );
               const availableSources = schema.fields.filter((field) => priorQuestionIds.has(field.id));
               const source = schema.fields.find((field) => field.id === page.displayCondition?.questionId);
               return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "form-engine-builder__page", children: [
@@ -1056,7 +1116,7 @@ function FormBuilder({
                     )
                   ] })
                 ] }),
-                editingLocale.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__translation-editor", children: [
+                !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__translation-editor", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: editingLocale }),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__grid", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
@@ -1101,7 +1161,7 @@ function FormBuilder({
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__condition", children: [
+                conditionsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__condition", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
                     translate("builder.pageCondition"),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -1142,7 +1202,11 @@ function FormBuilder({
                           const operator = event.currentTarget.value;
                           updatePage(page.id, (current) => ({
                             ...current,
-                            displayCondition: conditionWithValue(source.id, operator, defaultConditionValue(source))
+                            displayCondition: conditionWithValue(
+                              source.id,
+                              operator,
+                              defaultConditionValue(source)
+                            )
                           }));
                         },
                         children: conditionOperators(source).map((operator) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: operator, children: translate(operatorKey(operator)) }, operator))
@@ -1158,7 +1222,7 @@ function FormBuilder({
                       }
                     )
                   ] }) : null
-                ] })
+                ] }) : null
               ] }, page.id);
             }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__page-add", children: [
@@ -1180,8 +1244,8 @@ function FormBuilder({
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", disabled: movablePageQuestions.length === 0, onClick: addPage, children: translate("builder.addPage") })
             ] })
           ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "form-engine-builder__localization", "aria-labelledby": "builder-localization-heading", children: [
+        ] }) : null,
+        localizationEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "form-engine-builder__localization", "aria-labelledby": "builder-localization-heading", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { id: "builder-localization-heading", children: translate("builder.localization") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
             translate("builder.completionMessage"),
@@ -1200,15 +1264,42 @@ function FormBuilder({
                 "input",
                 {
                   value: schema.defaultLocale ?? "",
-                  onChange: (event) => headless.setDefaultLocale(event.currentTarget.value)
+                  onChange: (event) => setDefaultLocale(event.currentTarget.value)
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: "builder-new-locale", children: [
               translate("builder.addLocale"),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { value: newLocale, onChange: (event) => setNewLocale(event.currentTarget.value) })
+              availableAllowedLocales === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  id: "builder-new-locale",
+                  value: newLocale,
+                  onChange: (event) => setNewLocale(event.currentTarget.value)
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "select",
+                {
+                  id: "builder-new-locale",
+                  value: newLocale,
+                  onChange: (event) => setNewLocale(event.currentTarget.value),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "\u2014" }),
+                    availableAllowedLocales.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: candidate, children: candidate }, candidate))
+                  ]
+                }
+              )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: addLocale, children: translate("builder.addLocale") }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                "data-builder-action": "addLocale",
+                disabled: newLocale.trim().length === 0 || localeLimitReached,
+                onClick: addLocale,
+                children: translate("builder.addLocale")
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
               translate("builder.editLocale"),
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", { value: editingLocale, onChange: (event) => setEditingLocale(event.currentTarget.value), children: [
@@ -1260,7 +1351,7 @@ function FormBuilder({
               )
             ] })
           ] })
-        ] }),
+        ] }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "form-engine-builder__list", children: schema.fields.map((field, index) => {
           const condition = field.displayCondition;
           const source = condition === void 0 ? void 0 : schema.fields.find((item) => item.id === condition.questionId);
@@ -1339,7 +1430,7 @@ function FormBuilder({
                 translate("builder.required")
               ] })
             ] }),
-            schema.pages === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+            !pagesEnabled || schema.pages === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
               translate("builder.questionPage"),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "select",
@@ -1350,7 +1441,7 @@ function FormBuilder({
                 }
               )
             ] }),
-            editingLocale.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__translation-editor", children: [
+            !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__translation-editor", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: editingLocale }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__grid", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
@@ -1510,7 +1601,7 @@ function FormBuilder({
                 }
               )
             ] }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__condition", children: [
+            conditionsEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__condition", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
                 translate("builder.displayCondition"),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -1561,7 +1652,7 @@ function FormBuilder({
                   }
                 )
               ] }) : null
-            ] })
+            ] }) : null
           ] }, field.id);
         }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1575,7 +1666,7 @@ function FormBuilder({
             children: translate("builder.addQuestion")
           }
         )
-      ]
+      ] })
     }
   );
 }

package/dist/index.d.cts

@@ -37,6 +37,12 @@ type BuilderActionError = {
 } | {
     readonly type: "disallowed_field_type";
     readonly fieldType: QuestionType;
+} | {
+    readonly type: "disallowed_locale";
+    readonly locale: string;
+} | {
+    readonly type: "max_locales_exceeded";
+    readonly max: number;
 } | {
     readonly type: "node_not_found";
     readonly kind: BuilderTextTarget["kind"];
@@ -79,7 +85,7 @@ interface FormBuilderResult {
 declare function useFormBuilder({ schema, onChange, policy, idFactory, factories }: FormBuilderOptions): FormBuilderResult;
 
 interface BuilderActionContext {
-    readonly action: "addField" | "removeField" | "moveField" | "changeFieldType" | "updateField" | "addOption" | "removeOption" | "moveOption" | "updateOption" | "addPage" | "removePage" | "movePage" | "assignFieldToPage" | "setDisplayCondition" | "setSourceText" | "setLocaleTranslation";
+    readonly action: "addField" | "removeField" | "moveField" | "changeFieldType" | "updateField" | "addOption" | "removeOption" | "moveOption" | "updateOption" | "addPage" | "removePage" | "movePage" | "updatePage" | "assignFieldToPage" | "addLocale" | "setDefaultLocale" | "setDisplayCondition" | "setSourceText" | "setLocaleTranslation";
     readonly targetId?: string;
     readonly params?: Record<string, unknown>;
 }
@@ -145,6 +151,11 @@ interface FormRendererSlots {
 type BeforeSubmit = (values: Readonly<Record<string, unknown>>) => "continue" | "cancel" | Promise<"continue" | "cancel">;
 
 declare function resolveInitialFieldType(defaultType?: QuestionType, allowedTypes?: readonly QuestionType[]): QuestionType | null;
+interface FormBuilderFeatures {
+    readonly pages?: boolean;
+    readonly localization?: boolean;
+    readonly conditions?: boolean;
+}
 interface FormBuilderProps {
     readonly schema: FormSchema;
     readonly onChange: (newSchema: FormSchema) => void;
@@ -160,8 +171,10 @@ interface FormBuilderProps {
     readonly defaultFieldType?: QuestionType;
     readonly onActionError?: (error: BuilderActionError, context: BuilderActionContext) => void;
     readonly createManualTranslationMetadata?: (context: ManualTranslationContext) => Readonly<Record<string, JsonValue>> | undefined;
+    readonly readOnly?: boolean;
+    readonly features?: FormBuilderFeatures;
 }
-declare function FormBuilder({ schema, onChange, locale, translator, translationAdapter, translationOptions, onTranslationReport, policy, idFactory, factories, className, defaultFieldType, onActionError, createManualTranslationMetadata }: FormBuilderProps): react.JSX.Element;
+declare function FormBuilder({ schema, onChange, locale, translator, translationAdapter, translationOptions, onTranslationReport, policy, idFactory, factories, className, defaultFieldType, onActionError, createManualTranslationMetadata, readOnly, features }: FormBuilderProps): react.JSX.Element;
 
 type SubmitStatus = "idle" | "submitting" | "success" | "error";
 interface FormContextValue {
@@ -233,4 +246,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
 type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
 declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
 
-export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionResult, type BuilderFactories, type BuilderIdKind, type BuilderPolicy, type BuilderTextTarget, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormContextValue, FormProvider, type FormProviderProps, FormRenderer, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type ManualTranslationContext, type StandaloneFormRendererProps, type SubmitResult, type SubmitStatus, resolveInitialFieldType, useField, useForm, useFormBuilder };
+export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionResult, type BuilderFactories, type BuilderIdKind, type BuilderPolicy, type BuilderTextTarget, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormContextValue, FormProvider, type FormProviderProps, FormRenderer, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type ManualTranslationContext, type StandaloneFormRendererProps, type SubmitResult, type SubmitStatus, resolveInitialFieldType, useField, useForm, useFormBuilder };

package/dist/index.d.ts

@@ -37,6 +37,12 @@ type BuilderActionError = {
 } | {
     readonly type: "disallowed_field_type";
     readonly fieldType: QuestionType;
+} | {
+    readonly type: "disallowed_locale";
+    readonly locale: string;
+} | {
+    readonly type: "max_locales_exceeded";
+    readonly max: number;
 } | {
     readonly type: "node_not_found";
     readonly kind: BuilderTextTarget["kind"];
@@ -79,7 +85,7 @@ interface FormBuilderResult {
 declare function useFormBuilder({ schema, onChange, policy, idFactory, factories }: FormBuilderOptions): FormBuilderResult;
 
 interface BuilderActionContext {
-    readonly action: "addField" | "removeField" | "moveField" | "changeFieldType" | "updateField" | "addOption" | "removeOption" | "moveOption" | "updateOption" | "addPage" | "removePage" | "movePage" | "assignFieldToPage" | "setDisplayCondition" | "setSourceText" | "setLocaleTranslation";
+    readonly action: "addField" | "removeField" | "moveField" | "changeFieldType" | "updateField" | "addOption" | "removeOption" | "moveOption" | "updateOption" | "addPage" | "removePage" | "movePage" | "updatePage" | "assignFieldToPage" | "addLocale" | "setDefaultLocale" | "setDisplayCondition" | "setSourceText" | "setLocaleTranslation";
     readonly targetId?: string;
     readonly params?: Record<string, unknown>;
 }
@@ -145,6 +151,11 @@ interface FormRendererSlots {
 type BeforeSubmit = (values: Readonly<Record<string, unknown>>) => "continue" | "cancel" | Promise<"continue" | "cancel">;
 
 declare function resolveInitialFieldType(defaultType?: QuestionType, allowedTypes?: readonly QuestionType[]): QuestionType | null;
+interface FormBuilderFeatures {
+    readonly pages?: boolean;
+    readonly localization?: boolean;
+    readonly conditions?: boolean;
+}
 interface FormBuilderProps {
     readonly schema: FormSchema;
     readonly onChange: (newSchema: FormSchema) => void;
@@ -160,8 +171,10 @@ interface FormBuilderProps {
     readonly defaultFieldType?: QuestionType;
     readonly onActionError?: (error: BuilderActionError, context: BuilderActionContext) => void;
     readonly createManualTranslationMetadata?: (context: ManualTranslationContext) => Readonly<Record<string, JsonValue>> | undefined;
+    readonly readOnly?: boolean;
+    readonly features?: FormBuilderFeatures;
 }
-declare function FormBuilder({ schema, onChange, locale, translator, translationAdapter, translationOptions, onTranslationReport, policy, idFactory, factories, className, defaultFieldType, onActionError, createManualTranslationMetadata }: FormBuilderProps): react.JSX.Element;
+declare function FormBuilder({ schema, onChange, locale, translator, translationAdapter, translationOptions, onTranslationReport, policy, idFactory, factories, className, defaultFieldType, onActionError, createManualTranslationMetadata, readOnly, features }: FormBuilderProps): react.JSX.Element;
 
 type SubmitStatus = "idle" | "submitting" | "success" | "error";
 interface FormContextValue {
@@ -233,4 +246,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
 type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
 declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
 
-export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionResult, type BuilderFactories, type BuilderIdKind, type BuilderPolicy, type BuilderTextTarget, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormContextValue, FormProvider, type FormProviderProps, FormRenderer, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type ManualTranslationContext, type StandaloneFormRendererProps, type SubmitResult, type SubmitStatus, resolveInitialFieldType, useField, useForm, useFormBuilder };
+export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionResult, type BuilderFactories, type BuilderIdKind, type BuilderPolicy, type BuilderTextTarget, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormContextValue, FormProvider, type FormProviderProps, FormRenderer, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type ManualTranslationContext, type StandaloneFormRendererProps, type SubmitResult, type SubmitStatus, resolveInitialFieldType, useField, useForm, useFormBuilder };

package/dist/index.js

@@ -135,10 +135,16 @@ function useFormBuilder({
       if (pages === void 0) return { success: false, error: { type: "node_not_found", kind: "page", id: pageId } };
       const updated = updater(page);
       if (updated.id !== pageId) return { success: false, error: { type: "invalid_id", kind: "page", id: updated.id } };
+      for (const text of [updated.title, updated.description]) {
+        if (text !== void 0) {
+          const error = textPolicyError(text);
+          if (error !== void 0) return error;
+        }
+      }
       onChange({ ...schema, pages: pages.map((candidate) => candidate.id === pageId ? updated : candidate) });
       return { success: true };
     },
-    [onChange, schema]
+    [onChange, schema, textPolicyError]
   );
   const addField = useCallback(
     (type, pageId) => {
@@ -557,6 +563,17 @@ function useFormBuilder({
       const normalized = locale.trim();
       if (normalized.length === 0)
         return { success: false, error: { type: "invalid_operation", message: "Locale must not be empty." } };
+      if (policy?.allowedLocales !== void 0 && !policy.allowedLocales.includes(normalized)) {
+        return { success: false, error: { type: "disallowed_locale", locale: normalized } };
+      }
+      const registeredLocales = /* @__PURE__ */ new Set([
+        ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
+        ...schema.supportedLocales ?? []
+      ]);
+      if (registeredLocales.has(normalized)) return { success: true };
+      if (policy?.maxLocales !== void 0 && registeredLocales.size >= policy.maxLocales) {
+        return { success: false, error: { type: "max_locales_exceeded", max: policy.maxLocales } };
+      }
       onChange({
         ...schema,
         supportedLocales: [
@@ -569,13 +586,23 @@ function useFormBuilder({
       });
       return { success: true };
     },
-    [onChange, schema]
+    [onChange, policy?.allowedLocales, policy?.maxLocales, schema]
   );
   const setDefaultLocale = useCallback(
     (locale) => {
       const normalized = locale.trim();
       if (normalized.length === 0)
         return { success: false, error: { type: "invalid_operation", message: "Locale must not be empty." } };
+      if (policy?.allowedLocales !== void 0 && !policy.allowedLocales.includes(normalized)) {
+        return { success: false, error: { type: "disallowed_locale", locale: normalized } };
+      }
+      const registeredLocales = /* @__PURE__ */ new Set([
+        ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
+        ...schema.supportedLocales ?? []
+      ]);
+      if (!registeredLocales.has(normalized) && policy?.maxLocales !== void 0 && registeredLocales.size >= policy.maxLocales) {
+        return { success: false, error: { type: "max_locales_exceeded", max: policy.maxLocales } };
+      }
       onChange({
         ...schema,
         defaultLocale: normalized,
@@ -583,7 +610,7 @@ function useFormBuilder({
       });
       return { success: true };
     },
-    [onChange, schema]
+    [onChange, policy?.allowedLocales, policy?.maxLocales, schema]
   );
   const validationIssues = useMemo(() => {
     const result = validateFormSchema(schema, policy === void 0 ? {} : { policy });
@@ -770,7 +797,9 @@ function FormBuilder({
   className = "",
   defaultFieldType,
   onActionError,
-  createManualTranslationMetadata
+  createManualTranslationMetadata,
+  readOnly = false,
+  features
 }) {
   const headless = useFormBuilder({
     schema,
@@ -788,28 +817,33 @@ function FormBuilder({
     const translated = translator?.translate(key, locale, params);
     return translated === void 0 ? interpolate(BUILDER_DEFAULTS[key] ?? key, params) : translated;
   };
-  const executeAction = (result, context) => {
+  const pagesEnabled = features?.pages ?? true;
+  const localizationEnabled = features?.localization ?? true;
+  const conditionsEnabled = features?.conditions ?? true;
+  const executeAction = (run, context) => {
+    if (readOnly) return { success: true };
+    const result = run();
     if (!result.success) onActionError?.(result.error, context);
     return result;
   };
-  const updateField = (fieldId, updater, params) => executeAction(headless.updateField(fieldId, updater), {
+  const updateField = (fieldId, updater, params) => executeAction(() => headless.updateField(fieldId, updater), {
     action: "updateField",
     targetId: fieldId,
     ...params === void 0 ? {} : { params }
   });
-  const changeType = (fieldId, type) => executeAction(headless.changeFieldType(fieldId, type), {
+  const changeType = (fieldId, type) => executeAction(() => headless.changeFieldType(fieldId, type), {
     action: "changeFieldType",
     targetId: fieldId,
     params: { type }
   });
-  const removeField = (fieldId) => executeAction(headless.removeField(fieldId), { action: "removeField", targetId: fieldId });
+  const removeField = (fieldId) => executeAction(() => headless.removeField(fieldId), { action: "removeField", targetId: fieldId });
   const initialFieldType = resolveInitialFieldType(defaultFieldType, policy?.allowedFieldTypes);
   const maxFieldsReached = policy?.maxFields !== void 0 && schema.fields.length >= policy.maxFields;
   const moveField = (index, offset) => {
     const target = index + offset;
     const field = schema.fields[index];
     if (field !== void 0) {
-      executeAction(headless.moveField(field.id, target), {
+      executeAction(() => headless.moveField(field.id, target), {
         action: "moveField",
         targetId: field.id,
         params: { targetIndex: target }
@@ -818,10 +852,10 @@ function FormBuilder({
   };
   const addField = () => {
     if (initialFieldType === null) return;
-    executeAction(headless.addField(initialFieldType), { action: "addField" });
+    executeAction(() => headless.addField(initialFieldType), { action: "addField" });
   };
   const enablePages = () => {
-    if (schema.pages === void 0) executeAction(headless.addPage(), { action: "addPage" });
+    if (schema.pages === void 0) executeAction(() => headless.addPage(), { action: "addPage" });
   };
   const pageForField = (fieldId) => schema.pages?.find((page) => page.questionIds.includes(fieldId));
   const movablePageQuestions = schema.pages?.flatMap((page) => page.questionIds.length > 1 ? page.questionIds : []) ?? [];
@@ -832,7 +866,7 @@ function FormBuilder({
     }
     const questionId = movablePageQuestions.includes(newPageQuestionId) ? newPageQuestionId : movablePageQuestions[0];
     if (questionId === void 0) return;
-    executeAction(headless.addPage(questionId), {
+    executeAction(() => headless.addPage(questionId), {
       action: "addPage",
       targetId: questionId,
       params: { questionId }
@@ -841,13 +875,14 @@ function FormBuilder({
   };
   const removePage = (pageIndex) => {
     const page = schema.pages?.[pageIndex];
-    if (page !== void 0) executeAction(headless.removePage(page.id), { action: "removePage", targetId: page.id });
+    if (page !== void 0)
+      executeAction(() => headless.removePage(page.id), { action: "removePage", targetId: page.id });
   };
   const movePage = (pageIndex, offset) => {
     const target = pageIndex + offset;
     const page = schema.pages?.[pageIndex];
     if (page !== void 0) {
-      executeAction(headless.movePage(page.id, target), {
+      executeAction(() => headless.movePage(page.id, target), {
         action: "movePage",
         targetId: page.id,
         params: { targetIndex: target }
@@ -855,24 +890,36 @@ function FormBuilder({
     }
   };
   const updatePage = (pageId, update) => {
-    headless.updatePage(pageId, update);
+    executeAction(() => headless.updatePage(pageId, update), {
+      action: "updatePage",
+      targetId: pageId
+    });
   };
   const assignFieldToPage = (fieldId, pageId) => {
-    executeAction(headless.assignFieldToPage(fieldId, pageId), {
+    executeAction(() => headless.assignFieldToPage(fieldId, pageId), {
       action: "assignFieldToPage",
       targetId: fieldId,
       params: { pageId }
     });
   };
   const addLocale = () => {
+    if (readOnly) return;
     const normalized = newLocale.trim();
     if (normalized.length === 0) return;
-    headless.addLocale(normalized);
+    const result = executeAction(() => headless.addLocale(normalized), {
+      action: "addLocale",
+      params: { locale: normalized }
+    });
+    if (!result.success) return;
     setEditingLocale(normalized);
     setNewLocale("");
   };
+  const setDefaultLocale = (locale2) => executeAction(() => headless.setDefaultLocale(locale2), {
+    action: "setDefaultLocale",
+    params: { locale: locale2 }
+  });
   const translateAll = async () => {
-    if (translationAdapter === void 0 || editingLocale.length === 0) return;
+    if (readOnly || translationAdapter === void 0 || editingLocale.length === 0) return;
     setIsTranslating(true);
     setTranslationError(null);
     try {
@@ -889,10 +936,11 @@ function FormBuilder({
     }
   };
   const updateManualTranslation = (context) => {
+    if (readOnly) return;
     const metadata = createManualTranslationMetadata?.(context);
     const target = context.kind === "form" ? { kind: "form" } : { kind: context.kind, id: context.nodeId };
     executeAction(
-      headless.setLocaleTranslation(
+      () => headless.setLocaleTranslation(
         context.locale,
         target,
         context.property,
@@ -918,41 +966,51 @@ function FormBuilder({
       ...schema.translationMetadata?.[editingLocale]?.[property] === void 0 ? {} : { existingTranslationMetadata: schema.translationMetadata[editingLocale]?.[property] }
     });
   };
-  const setSourceText = (target, property, text) => executeAction(headless.setSourceText(target, property, text), {
+  const setSourceText = (target, property, text) => executeAction(() => headless.setSourceText(target, property, text), {
     action: "setSourceText",
     ...target.id === void 0 ? {} : { targetId: target.id },
     params: { kind: target.kind, property }
   });
-  const updateOption = (fieldId, optionId, label) => executeAction(
-    headless.updateOption(fieldId, optionId, (option) => ({ ...option, label })),
-    { action: "updateOption", targetId: optionId, params: { fieldId } }
-  );
-  const addOption = (fieldId) => executeAction(headless.addOption(fieldId), { action: "addOption", targetId: fieldId });
-  const removeOption = (fieldId, optionId) => executeAction(headless.removeOption(fieldId, optionId), {
+  const updateOption = (fieldId, optionId, label) => executeAction(() => headless.updateOption(fieldId, optionId, (option) => ({ ...option, label })), {
+    action: "updateOption",
+    targetId: optionId,
+    params: { fieldId }
+  });
+  const addOption = (fieldId) => executeAction(() => headless.addOption(fieldId), { action: "addOption", targetId: fieldId });
+  const removeOption = (fieldId, optionId) => executeAction(() => headless.removeOption(fieldId, optionId), {
     action: "removeOption",
     targetId: optionId,
     params: { fieldId }
   });
-  const moveOption = (fieldId, optionId, targetIndex) => executeAction(headless.moveOption(fieldId, optionId, targetIndex), {
+  const moveOption = (fieldId, optionId, targetIndex) => executeAction(() => headless.moveOption(fieldId, optionId, targetIndex), {
     action: "moveOption",
     targetId: optionId,
     params: { fieldId, targetIndex }
   });
-  const setDisplayCondition = (fieldId, condition) => executeAction(headless.setDisplayCondition(fieldId, condition), {
+  const setDisplayCondition = (fieldId, condition) => executeAction(() => headless.setDisplayCondition(fieldId, condition), {
     action: "setDisplayCondition",
     targetId: fieldId,
     ...condition === void 0 ? {} : { params: { condition } }
   });
-  return /* @__PURE__ */ jsxs(
+  const registeredLocales = /* @__PURE__ */ new Set([
+    ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
+    ...schema.supportedLocales ?? []
+  ]);
+  const availableAllowedLocales = policy?.allowedLocales?.filter((candidate) => !registeredLocales.has(candidate));
+  const localeLimitReached = policy?.maxLocales !== void 0 && registeredLocales.size >= policy.maxLocales;
+  return /* @__PURE__ */ jsx(
     "section",
     {
       className: `form-engine-builder ${className}`.trim(),
       "aria-label": translate("builder.formBuilder"),
       onClickCapture: (event) => {
+        if (readOnly) return;
         if (!(event.target instanceof HTMLElement)) return;
         const actionTarget = event.target.closest("[data-builder-action]");
         if (actionTarget?.dataset.builderAction === "addField" && maxFieldsReached && initialFieldType !== null)
           addField();
+        if (actionTarget?.dataset.builderAction === "addLocale" && localeLimitReached && newLocale.trim().length > 0)
+          addLocale();
         if (actionTarget?.dataset.builderAction !== "addOption") return;
         const fieldId = actionTarget.dataset.targetId;
         const field = schema.fields.find((candidate) => candidate.id === fieldId);
@@ -960,12 +1018,14 @@ function FormBuilder({
           addOption(fieldId);
         }
       },
-      children: [
-        /* @__PURE__ */ jsxs("section", { className: "form-engine-builder__pages", "aria-labelledby": "builder-pages-heading", children: [
+      children: /* @__PURE__ */ jsxs("fieldset", { className: "form-engine-builder__controls", disabled: readOnly, children: [
+        pagesEnabled ? /* @__PURE__ */ jsxs("section", { className: "form-engine-builder__pages", "aria-labelledby": "builder-pages-heading", children: [
           /* @__PURE__ */ jsx("h2", { id: "builder-pages-heading", children: translate("builder.pages") }),
           schema.pages === void 0 ? /* @__PURE__ */ jsx("button", { type: "button", onClick: enablePages, children: translate("builder.enablePages") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             schema.pages.map((page, pageIndex) => {
-              const priorQuestionIds = new Set(schema.pages?.slice(0, pageIndex).flatMap((item) => item.questionIds));
+              const priorQuestionIds = new Set(
+                schema.pages?.slice(0, pageIndex).flatMap((item) => item.questionIds)
+              );
               const availableSources = schema.fields.filter((field) => priorQuestionIds.has(field.id));
               const source = schema.fields.find((field) => field.id === page.displayCondition?.questionId);
               return /* @__PURE__ */ jsxs("fieldset", { className: "form-engine-builder__page", children: [
@@ -1029,7 +1089,7 @@ function FormBuilder({
                     )
                   ] })
                 ] }),
-                editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__translation-editor", children: [
+                !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__translation-editor", children: [
                   /* @__PURE__ */ jsx("strong", { children: editingLocale }),
                   /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
                     /* @__PURE__ */ jsxs("label", { children: [
@@ -1074,7 +1134,7 @@ function FormBuilder({
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__condition", children: [
+                conditionsEnabled ? /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__condition", children: [
                   /* @__PURE__ */ jsxs("label", { children: [
                     translate("builder.pageCondition"),
                     /* @__PURE__ */ jsxs(
@@ -1115,7 +1175,11 @@ function FormBuilder({
                           const operator = event.currentTarget.value;
                           updatePage(page.id, (current) => ({
                             ...current,
-                            displayCondition: conditionWithValue(source.id, operator, defaultConditionValue(source))
+                            displayCondition: conditionWithValue(
+                              source.id,
+                              operator,
+                              defaultConditionValue(source)
+                            )
                           }));
                         },
                         children: conditionOperators(source).map((operator) => /* @__PURE__ */ jsx("option", { value: operator, children: translate(operatorKey(operator)) }, operator))
@@ -1131,7 +1195,7 @@ function FormBuilder({
                       }
                     )
                   ] }) : null
-                ] })
+                ] }) : null
               ] }, page.id);
             }),
             /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__page-add", children: [
@@ -1153,8 +1217,8 @@ function FormBuilder({
               /* @__PURE__ */ jsx("button", { type: "button", disabled: movablePageQuestions.length === 0, onClick: addPage, children: translate("builder.addPage") })
             ] })
           ] })
-        ] }),
-        /* @__PURE__ */ jsxs("section", { className: "form-engine-builder__localization", "aria-labelledby": "builder-localization-heading", children: [
+        ] }) : null,
+        localizationEnabled ? /* @__PURE__ */ jsxs("section", { className: "form-engine-builder__localization", "aria-labelledby": "builder-localization-heading", children: [
           /* @__PURE__ */ jsx("h2", { id: "builder-localization-heading", children: translate("builder.localization") }),
           /* @__PURE__ */ jsxs("label", { children: [
             translate("builder.completionMessage"),
@@ -1173,15 +1237,42 @@ function FormBuilder({
                 "input",
                 {
                   value: schema.defaultLocale ?? "",
-                  onChange: (event) => headless.setDefaultLocale(event.currentTarget.value)
+                  onChange: (event) => setDefaultLocale(event.currentTarget.value)
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs("label", { children: [
+            /* @__PURE__ */ jsxs("label", { htmlFor: "builder-new-locale", children: [
               translate("builder.addLocale"),
-              /* @__PURE__ */ jsx("input", { value: newLocale, onChange: (event) => setNewLocale(event.currentTarget.value) })
+              availableAllowedLocales === void 0 ? /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: "builder-new-locale",
+                  value: newLocale,
+                  onChange: (event) => setNewLocale(event.currentTarget.value)
+                }
+              ) : /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  id: "builder-new-locale",
+                  value: newLocale,
+                  onChange: (event) => setNewLocale(event.currentTarget.value),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "", children: "\u2014" }),
+                    availableAllowedLocales.map((candidate) => /* @__PURE__ */ jsx("option", { value: candidate, children: candidate }, candidate))
+                  ]
+                }
+              )
             ] }),
-            /* @__PURE__ */ jsx("button", { type: "button", onClick: addLocale, children: translate("builder.addLocale") }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-builder-action": "addLocale",
+                disabled: newLocale.trim().length === 0 || localeLimitReached,
+                onClick: addLocale,
+                children: translate("builder.addLocale")
+              }
+            ),
             /* @__PURE__ */ jsxs("label", { children: [
               translate("builder.editLocale"),
               /* @__PURE__ */ jsxs("select", { value: editingLocale, onChange: (event) => setEditingLocale(event.currentTarget.value), children: [
@@ -1233,7 +1324,7 @@ function FormBuilder({
               )
             ] })
           ] })
-        ] }),
+        ] }) : null,
         /* @__PURE__ */ jsx("div", { className: "form-engine-builder__list", children: schema.fields.map((field, index) => {
           const condition = field.displayCondition;
           const source = condition === void 0 ? void 0 : schema.fields.find((item) => item.id === condition.questionId);
@@ -1312,7 +1403,7 @@ function FormBuilder({
                 translate("builder.required")
               ] })
             ] }),
-            schema.pages === void 0 ? null : /* @__PURE__ */ jsxs("label", { children: [
+            !pagesEnabled || schema.pages === void 0 ? null : /* @__PURE__ */ jsxs("label", { children: [
               translate("builder.questionPage"),
               /* @__PURE__ */ jsx(
                 "select",
@@ -1323,7 +1414,7 @@ function FormBuilder({
                 }
               )
             ] }),
-            editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__translation-editor", children: [
+            !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__translation-editor", children: [
               /* @__PURE__ */ jsx("strong", { children: editingLocale }),
               /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
                 /* @__PURE__ */ jsxs("label", { children: [
@@ -1483,7 +1574,7 @@ function FormBuilder({
                 }
               )
             ] }) : null,
-            /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__condition", children: [
+            conditionsEnabled ? /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__condition", children: [
               /* @__PURE__ */ jsxs("label", { children: [
                 translate("builder.displayCondition"),
                 /* @__PURE__ */ jsxs(
@@ -1534,7 +1625,7 @@ function FormBuilder({
                   }
                 )
               ] }) : null
-            ] })
+            ] }) : null
           ] }, field.id);
         }) }),
         /* @__PURE__ */ jsx(
@@ -1548,7 +1639,7 @@ function FormBuilder({
             children: translate("builder.addQuestion")
           }
         )
-      ]
+      ] })
     }
   );
 }

package/dist/styles.css

@@ -175,6 +175,13 @@
   display: grid;
   gap: 1rem;
 }
+.form-engine-builder__controls {
+  border: 0;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+  width: 100%;
+}
 .form-engine-builder__list {
   display: grid;
   gap: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-engine-ts/react",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -42,7 +42,7 @@
     "typescript"
   ],
   "dependencies": {
-    "@form-engine-ts/core": "2.1.1"
+    "@form-engine-ts/core": "2.2.0"
   },
   "peerDependencies": {
     "react": ">=18.2 <20",