@form-engine-ts/react 2.9.2 → 2.9.4

package/dist/index.js

@@ -101,7 +101,7 @@ function createLocalStorageSubmissionAttemptStore(options = {}) {
 import {
   populateSchemaTranslations
 } from "@form-engine-ts/core";
-import { createContext, useContext, useState } from "react";
+import { Children, createContext, isValidElement, useContext, useState } from "react";
 
 // src/hooks/useFormBuilder.ts
 import {
@@ -954,24 +954,39 @@ function DefaultCheckbox({
   id,
   className,
   disabled,
+  readOnly,
   "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  "aria-labelledby": ariaLabelledBy,
+  name,
+  required,
+  error,
+  helperText,
   checked,
   onChange,
   label
 }) {
-  return /* @__PURE__ */ jsxs("label", { className, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        id,
-        type: "checkbox",
-        disabled,
-        "aria-label": ariaLabel,
-        checked,
-        onChange: (event) => onChange(event.currentTarget.checked)
-      }
-    ),
-    label
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("label", { className, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          name,
+          type: "checkbox",
+          disabled: disabled || readOnly,
+          required,
+          "aria-label": ariaLabel,
+          "aria-describedby": ariaDescribedBy,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-invalid": error === true ? true : void 0,
+          checked,
+          onChange: (event) => onChange(event.currentTarget.checked)
+        }
+      ),
+      label
+    ] }),
+    helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx("small", { id: ariaDescribedBy, children: helperText })
   ] });
 }
 function DefaultSection({
@@ -1154,6 +1169,7 @@ var BUILDER_DEFAULTS = {
   "builder.basicSettings": "Basic settings",
   "builder.formTitle": "Form title",
   "builder.formDescription": "Form description",
+  "builder.description": "Description",
   "builder.moveUp": "Move {{title}} up",
   "builder.moveDown": "Move {{title}} down",
   "builder.delete": "Delete {{title}}",
@@ -1188,12 +1204,31 @@ var BUILDER_DEFAULTS = {
   "builder.pageQuestion": "Question to move to the new page",
   "builder.questionPage": "Page",
   "builder.pageCondition": "Page display condition",
+  "builder.unassigned": "Unassigned",
   "builder.localization": "Localization",
   "builder.defaultLocale": "Default locale",
   "builder.supportedLocales": "Supported locales",
   "builder.addLocale": "Add locale",
   "builder.editLocale": "Edit locale",
   "builder.autoTranslate": "Translate all text",
+  "builder.translating": "Translating\u2026",
+  "builder.translationLocale": "Translation locale",
+  "builder.selectLocale": "Select a locale to edit translations.",
+  "builder.translation": "{{locale}} translation",
+  "builder.translatedFormTitle": "Translated form title",
+  "builder.translatedFormDescription": "Translated form description",
+  "builder.translatedCompletionMessage": "Translated completion message",
+  "builder.translatedQuestionTitle": "Translated question title",
+  "builder.translatedDescription": "Translated description",
+  "builder.actions.moveUp": "Move up",
+  "builder.actions.moveDown": "Move down",
+  "builder.actions.delete": "Delete",
+  "builder.actions.add": "Add",
+  "builder.actions.edit": "Edit",
+  "builder.actions.settings": "Settings",
+  "builder.actions.translate": "Translate",
+  "builder.actions.close": "Close",
+  "builder.actions.dragHandle": "Reorder",
   "builder.translationUnavailable": "Provide an async translation adapter to enable automatic translation.",
   "builder.fieldType.text": "Text",
   "builder.fieldType.textarea": "Textarea",
@@ -1214,6 +1249,22 @@ function interpolate(template, params) {
     (token, name) => Object.hasOwn(params, name) ? String(params[name]) : token
   );
 }
+function BuilderSectionGroup({ children }) {
+  return children;
+}
+function sectionGroupName(node) {
+  if (!isValidElement(node) || node.type !== BuilderSectionGroup) return void 0;
+  return node.props.name;
+}
+function OrderedBuilderSections({
+  order,
+  children
+}) {
+  if (order === void 0) return children;
+  const ranks = new Map(order.map((name, index) => [name, index]));
+  const groups = Children.toArray(children);
+  return groups.map((group, index) => ({ group, index, rank: ranks.get(sectionGroupName(group) ?? "questions") ?? order.length })).sort((left, right) => left.rank - right.rank || left.index - right.index).map(({ group }) => group);
+}
 function fieldTypeKey(type) {
   return `builder.fieldType.${type}`;
 }
@@ -1316,6 +1367,7 @@ function FormBuilder({
   features,
   components: componentOverrides,
   slots,
+  sectionOrder,
   disableDefaultStyles = false,
   unstyled = false
 }) {
@@ -1333,6 +1385,7 @@ function FormBuilder({
   const PagesSlot = slots?.pages;
   const LocalizationSlot = slots?.localization;
   const TranslationActionsSlot = slots?.translationActions;
+  const resolvedSectionOrder = sectionOrder ?? slots?.sectionOrder;
   const headless = useFormBuilder({
     schema,
     onChange,
@@ -1347,7 +1400,11 @@ function FormBuilder({
   const [translationError, setTranslationError] = useState(null);
   const [translationReport, setTranslationReport] = useState();
   const translate = (key, params = {}) => {
-    const translated = translator?.translate(key, locale, params);
+    const translatorParams = {};
+    for (const [name, value] of Object.entries(params)) {
+      if (typeof value === "string" || typeof value === "number") translatorParams[name] = value;
+    }
+    const translated = translator?.translate(key, locale, translatorParams);
     return translated === void 0 ? interpolate(BUILDER_DEFAULTS[key] ?? key, params) : translated;
   };
   const pagesEnabled = features?.pages ?? true;
@@ -1632,8 +1689,8 @@ function FormBuilder({
               addOption(fieldId);
             }
           },
-          children: /* @__PURE__ */ jsxs(Fieldset, { className: builderClass("form-engine-builder__controls"), disabled: readOnly, children: [
-            /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx(Fieldset, { className: builderClass("form-engine-builder__controls"), disabled: readOnly, children: /* @__PURE__ */ jsxs(OrderedBuilderSections, { ...resolvedSectionOrder === void 0 ? {} : { order: resolvedSectionOrder }, children: [
+            /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "basicSettings", children: /* @__PURE__ */ jsx(
               Section,
               {
                 className: builderClass("form-engine-builder__basic-settings"),
@@ -1667,8 +1724,17 @@ function FormBuilder({
                   ) })
                 ] })
               }
-            ),
-            pagesEnabled ? PagesSlot === void 0 ? /* @__PURE__ */ jsx(
+            ) }),
+            resolvedSectionOrder === void 0 ? null : /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "completionMessage", children: /* @__PURE__ */ jsx(Section, { headingId: "builder-completion-message-heading", title: translate("builder.completionMessage"), children: /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                id: "builder-completion-message",
+                label: translate("builder.completionMessage"),
+                value: schema.completionMessage ?? "",
+                onChange: (value) => setSourceText({ kind: "form" }, "completionMessage", value)
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "questions", children: pagesEnabled ? PagesSlot === void 0 ? /* @__PURE__ */ jsx(
               Section,
               {
                 className: builderClass("form-engine-builder__pages"),
@@ -1718,6 +1784,7 @@ function FormBuilder({
                             ToolbarSlot,
                             {
                               schema,
+                              translate,
                               kind: "page",
                               targetId: page.id,
                               index: pageIndex,
@@ -1864,7 +1931,10 @@ function FormBuilder({
                                 {
                                   source,
                                   condition: page.displayCondition,
-                                  onChange: (condition) => updatePage(page.id, (current) => ({ ...current, displayCondition: condition })),
+                                  onChange: (condition) => updatePage(page.id, (current) => ({
+                                    ...current,
+                                    displayCondition: condition
+                                  })),
                                   translate,
                                   components
                                 }
@@ -1899,20 +1969,22 @@ function FormBuilder({
               PagesSlot,
               {
                 schema,
+                translate,
                 currentLocale: editingLocale,
+                ...features === void 0 ? {} : { features },
                 readOnly,
                 actions,
                 components
               }
-            ) : null,
-            localizationEnabled ? LocalizationSlot === void 0 ? /* @__PURE__ */ jsxs(
+            ) : null }),
+            /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "localization", children: localizationEnabled ? LocalizationSlot === void 0 ? /* @__PURE__ */ jsxs(
               Section,
               {
                 className: builderClass("form-engine-builder__localization"),
                 headingId: "builder-localization-heading",
                 title: translate("builder.localization"),
                 children: [
-                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                  resolvedSectionOrder === void 0 ? /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
                     TextInput,
                     {
                       id: "builder-completion-message",
@@ -1920,7 +1992,7 @@ function FormBuilder({
                       value: schema.completionMessage ?? "",
                       onChange: (value) => setSourceText({ kind: "form" }, "completionMessage", value)
                     }
-                  ) }),
+                  ) }) : null,
                   /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
                     /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
                       TextInput,
@@ -1985,12 +2057,14 @@ function FormBuilder({
                       TranslationActionsSlot,
                       {
                         schema,
+                        translate,
                         currentLocale: editingLocale,
                         onAutoTranslate: () => void translateAll(),
                         isTranslating,
                         ...translationError === null ? {} : { translationError },
                         ...translationReport === void 0 ? {} : { translationReport },
                         onClearTranslationError: () => setTranslationError(null),
+                        translationAdapterAvailable: translationAdapter !== void 0,
                         readOnly,
                         actions,
                         components
@@ -2034,17 +2108,20 @@ function FormBuilder({
               LocalizationSlot,
               {
                 schema,
+                translate,
                 currentLocale: editingLocale,
                 onCurrentLocaleChange: setEditingLocale,
                 onAutoTranslate: () => void translateAll(),
                 isTranslating,
                 ...translationError === null ? {} : { translationError },
+                ...policy === void 0 ? {} : { policy },
+                translationAdapterAvailable: translationAdapter !== void 0,
                 readOnly,
                 actions,
                 components
               }
-            ) : null,
-            /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__list"), children: schema.fields.map((field, index) => {
+            ) : null }),
+            /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "questions", children: /* @__PURE__ */ jsx("div", { className: builderClass("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);
               const availableSources = schema.fields.slice(0, index);
@@ -2056,7 +2133,9 @@ function FormBuilder({
                     field,
                     index,
                     currentLocale: editingLocale,
+                    translate,
                     ...policy === void 0 ? {} : { policy },
+                    ...features === void 0 ? {} : { features },
                     readOnly,
                     actions,
                     components
@@ -2064,348 +2143,362 @@ function FormBuilder({
                   field.id
                 );
               }
-              return /* @__PURE__ */ jsxs(Fieldset, { className: builderClass("form-engine-builder__question"), legend: field.title, children: [
-                /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__toolbar"), children: ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    IconButton,
-                    {
-                      actionType: "moveUp",
-                      title: translate("builder.moveUp", { title: field.title }),
-                      disabled: index === 0,
-                      onClick: () => moveField(index, -1)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    IconButton,
-                    {
-                      actionType: "moveDown",
-                      title: translate("builder.moveDown", { title: field.title }),
-                      disabled: index === schema.fields.length - 1,
-                      onClick: () => moveField(index, 1)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    IconButton,
-                    {
-                      actionType: "delete",
-                      disabled: schema.fields.length === 1,
-                      onClick: () => removeField(field.id),
-                      "aria-label": translate("builder.delete", { title: field.title }),
-                      title: translate("builder.delete", { title: field.title })
-                    }
-                  )
-                ] }) : /* @__PURE__ */ jsx(
-                  ToolbarSlot,
-                  {
-                    schema,
-                    kind: "field",
-                    targetId: field.id,
-                    index,
-                    total: schema.fields.length,
-                    title: field.title,
-                    onMoveUp: () => moveField(index, -1),
-                    onMoveDown: () => moveField(index, 1),
-                    onRemove: () => removeField(field.id),
-                    readOnly,
-                    actions,
-                    components
-                  }
-                ) }),
-                /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
-                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                    TextInput,
-                    {
-                      id: `builder-field-${field.id}-title`,
-                      name: `fields.${field.id}.title`,
-                      label: translate("builder.questionTitle"),
-                      required: true,
-                      error: field.title.trim().length === 0,
-                      helperText: field.title.trim().length === 0 ? translate("builder.required") : "",
-                      "aria-describedby": field.title.trim().length === 0 ? `builder-field-${field.id}-title-error` : void 0,
-                      value: field.title,
-                      placeholder: translate("builder.questionTitlePlaceholder"),
-                      onChange: (value) => updateField(field.id, (current) => ({
-                        ...current,
-                        title: value.trim().length === 0 ? current.title : value
-                      }))
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                    Select,
-                    {
-                      id: `builder-field-${field.id}-type`,
-                      label: translate("builder.type"),
-                      value: field.type,
-                      onChange: (value) => changeType(field.id, value),
-                      options: FIELD_TYPES.filter(
-                        (type) => policy?.allowedFieldTypes === void 0 || policy.allowedFieldTypes.includes(type)
-                      ).map((type) => ({ value: type, label: translate(fieldTypeKey(type)) }))
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(
-                    Checkbox,
-                    {
-                      className: builderClass("form-engine-builder__check"),
-                      checked: field.required === true,
-                      onChange: (checked) => updateField(field.id, (current) => ({ ...current, required: checked })),
-                      label: translate("builder.required")
-                    }
-                  )
-                ] }),
-                !pagesEnabled || schema.pages === void 0 ? null : /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                  Select,
-                  {
-                    id: `builder-field-${field.id}-page`,
-                    label: translate("builder.questionPage"),
-                    value: pageForField(field.id)?.id ?? "",
-                    onChange: (value) => assignFieldToPage(field.id, value),
-                    options: schema.pages.map((page, pageIndex) => ({
-                      value: page.id,
-                      label: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}`
-                    }))
-                  }
-                ) }),
-                !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__translation-editor"), children: [
-                  /* @__PURE__ */ jsx("strong", { children: editingLocale }),
-                  /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
-                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                      TextInput,
+              return /* @__PURE__ */ jsxs(
+                Fieldset,
+                {
+                  className: builderClass("form-engine-builder__question"),
+                  legend: field.title,
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__toolbar"), children: ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          actionType: "moveUp",
+                          title: translate("builder.moveUp", { title: field.title }),
+                          disabled: index === 0,
+                          onClick: () => moveField(index, -1)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          actionType: "moveDown",
+                          title: translate("builder.moveDown", { title: field.title }),
+                          disabled: index === schema.fields.length - 1,
+                          onClick: () => moveField(index, 1)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          actionType: "delete",
+                          disabled: schema.fields.length === 1,
+                          onClick: () => removeField(field.id),
+                          "aria-label": translate("builder.delete", { title: field.title }),
+                          title: translate("builder.delete", { title: field.title })
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ jsx(
+                      ToolbarSlot,
                       {
-                        id: `builder-field-${field.id}-${editingLocale}-title`,
-                        label: translate("builder.questionTitle"),
-                        value: field.translations?.[editingLocale]?.title ?? "",
-                        onChange: (value) => updateManualTranslation({
-                          locale: editingLocale,
-                          kind: "field",
-                          nodeId: field.id,
-                          property: "title",
-                          sourceText: field.title,
-                          translatedText: value,
-                          ...field.translationMetadata?.[editingLocale]?.title === void 0 ? {} : {
-                            existingTranslationMetadata: field.translationMetadata[editingLocale]?.title
-                          }
-                        })
+                        schema,
+                        translate,
+                        kind: "field",
+                        targetId: field.id,
+                        index,
+                        total: schema.fields.length,
+                        title: field.title,
+                        onMoveUp: () => moveField(index, -1),
+                        onMoveDown: () => moveField(index, 1),
+                        onRemove: () => removeField(field.id),
+                        readOnly,
+                        actions,
+                        components
                       }
                     ) }),
-                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                      TextInput,
+                    /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
+                      /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                        TextInput,
+                        {
+                          id: `builder-field-${field.id}-title`,
+                          name: `fields.${field.id}.title`,
+                          label: translate("builder.questionTitle"),
+                          required: true,
+                          error: field.title.trim().length === 0,
+                          helperText: field.title.trim().length === 0 ? translate("builder.required") : "",
+                          "aria-describedby": field.title.trim().length === 0 ? `builder-field-${field.id}-title-error` : void 0,
+                          value: field.title,
+                          placeholder: translate("builder.questionTitlePlaceholder"),
+                          onChange: (value) => updateField(field.id, (current) => ({
+                            ...current,
+                            title: value.trim().length === 0 ? current.title : value
+                          }))
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                        Select,
+                        {
+                          id: `builder-field-${field.id}-type`,
+                          label: translate("builder.type"),
+                          value: field.type,
+                          onChange: (value) => changeType(field.id, value),
+                          options: FIELD_TYPES.filter(
+                            (type) => policy?.allowedFieldTypes === void 0 || policy.allowedFieldTypes.includes(type)
+                          ).map((type) => ({ value: type, label: translate(fieldTypeKey(type)) }))
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          className: builderClass("form-engine-builder__check"),
+                          checked: field.required === true,
+                          onChange: (checked) => updateField(field.id, (current) => ({ ...current, required: checked })),
+                          label: translate("builder.required")
+                        }
+                      )
+                    ] }),
+                    !pagesEnabled || schema.pages === void 0 ? null : /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      Select,
                       {
-                        id: `builder-field-${field.id}-${editingLocale}-description`,
-                        label: translate("builder.pageDescription"),
-                        value: field.translations?.[editingLocale]?.description ?? "",
-                        onChange: (value) => updateManualTranslation({
-                          locale: editingLocale,
-                          kind: "field",
-                          nodeId: field.id,
-                          property: "description",
-                          sourceText: field.description ?? "",
-                          translatedText: value,
-                          ...field.translationMetadata?.[editingLocale]?.description === void 0 ? {} : {
-                            existingTranslationMetadata: field.translationMetadata[editingLocale]?.description
-                          }
-                        })
+                        id: `builder-field-${field.id}-page`,
+                        label: translate("builder.questionPage"),
+                        value: pageForField(field.id)?.id ?? "",
+                        onChange: (value) => assignFieldToPage(field.id, value),
+                        options: schema.pages.map((page, pageIndex) => ({
+                          value: page.id,
+                          label: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}`
+                        }))
                       }
-                    ) })
-                  ] }),
-                  "options" in field ? field.options.map((option, optionIndex) => /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                    TextInput,
-                    {
-                      id: `builder-option-${option.id}-${editingLocale}`,
-                      label: `${translate("builder.optionLabel", { index: optionIndex + 1 })} (${editingLocale})`,
-                      value: option.translations?.[editingLocale] ?? "",
-                      onChange: (value) => updateManualTranslation({
-                        locale: editingLocale,
-                        kind: "option",
-                        nodeId: option.id,
-                        property: "label",
-                        sourceText: option.label,
-                        translatedText: value,
-                        ...option.translationMetadata?.[editingLocale]?.label === void 0 ? {} : {
-                          existingTranslationMetadata: option.translationMetadata[editingLocale]?.label
+                    ) }),
+                    !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__translation-editor"), children: [
+                      /* @__PURE__ */ jsx("strong", { children: editingLocale }),
+                      /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
+                        /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                          TextInput,
+                          {
+                            id: `builder-field-${field.id}-${editingLocale}-title`,
+                            label: translate("builder.questionTitle"),
+                            value: field.translations?.[editingLocale]?.title ?? "",
+                            onChange: (value) => updateManualTranslation({
+                              locale: editingLocale,
+                              kind: "field",
+                              nodeId: field.id,
+                              property: "title",
+                              sourceText: field.title,
+                              translatedText: value,
+                              ...field.translationMetadata?.[editingLocale]?.title === void 0 ? {} : {
+                                existingTranslationMetadata: field.translationMetadata[editingLocale]?.title
+                              }
+                            })
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                          TextInput,
+                          {
+                            id: `builder-field-${field.id}-${editingLocale}-description`,
+                            label: translate("builder.pageDescription"),
+                            value: field.translations?.[editingLocale]?.description ?? "",
+                            onChange: (value) => updateManualTranslation({
+                              locale: editingLocale,
+                              kind: "field",
+                              nodeId: field.id,
+                              property: "description",
+                              sourceText: field.description ?? "",
+                              translatedText: value,
+                              ...field.translationMetadata?.[editingLocale]?.description === void 0 ? {} : {
+                                existingTranslationMetadata: field.translationMetadata[editingLocale]?.description
+                              }
+                            })
+                          }
+                        ) })
+                      ] }),
+                      "options" in field ? field.options.map((option, optionIndex) => /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                        TextInput,
+                        {
+                          id: `builder-option-${option.id}-${editingLocale}`,
+                          label: `${translate("builder.optionLabel", { index: optionIndex + 1 })} (${editingLocale})`,
+                          value: option.translations?.[editingLocale] ?? "",
+                          onChange: (value) => updateManualTranslation({
+                            locale: editingLocale,
+                            kind: "option",
+                            nodeId: option.id,
+                            property: "label",
+                            sourceText: option.label,
+                            translatedText: value,
+                            ...option.translationMetadata?.[editingLocale]?.label === void 0 ? {} : {
+                              existingTranslationMetadata: option.translationMetadata[editingLocale]?.label
+                            }
+                          })
                         }
-                      })
-                    }
-                  ) }, option.id)) : null
-                ] }),
-                field.type === "rating" ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
-                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                    TextInput,
-                    {
-                      id: `builder-field-${field.id}-minimum`,
-                      label: translate("builder.minimum"),
-                      type: "number",
-                      value: String(field.min ?? 1),
-                      onChange: (value) => {
-                        const min = Number(value);
-                        if (!Number.isInteger(min)) return;
-                        updateField(
-                          field.id,
-                          (current) => current.type === "rating" ? { ...current, min, max: Math.max(min, current.max ?? 5) } : current
-                        );
-                      }
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                    TextInput,
-                    {
-                      id: `builder-field-${field.id}-maximum`,
-                      label: translate("builder.maximum"),
-                      type: "number",
-                      value: String(field.max ?? 5),
-                      onChange: (value) => {
-                        const max = Number(value);
-                        if (!Number.isInteger(max)) return;
-                        updateField(
-                          field.id,
-                          (current) => current.type === "rating" ? { ...current, min: Math.min(current.min ?? 1, max), max } : current
-                        );
-                      }
-                    }
-                  ) })
-                ] }) : null,
-                "options" in field ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__options"), children: [
-                  /* @__PURE__ */ jsx("strong", { children: translate("builder.options") }),
-                  field.options.map(
-                    (option, optionIndex) => OptionEditorSlot === void 0 ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__option"), children: [
-                      /* @__PURE__ */ jsx(
+                      ) }, option.id)) : null
+                    ] }),
+                    field.type === "rating" ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
+                      /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
                         TextInput,
                         {
-                          id: `builder-option-${option.id}`,
-                          label: translate("builder.optionLabel", { index: optionIndex + 1 }),
-                          value: option.label,
-                          placeholder: translate("builder.optionLabelPlaceholder"),
-                          onChange: (value) => value.trim().length === 0 ? void 0 : updateOption(field.id, option.id, value)
+                          id: `builder-field-${field.id}-minimum`,
+                          label: translate("builder.minimum"),
+                          type: "number",
+                          value: String(field.min ?? 1),
+                          onChange: (value) => {
+                            const min = Number(value);
+                            if (!Number.isInteger(min)) return;
+                            updateField(
+                              field.id,
+                              (current) => current.type === "rating" ? { ...current, min, max: Math.max(min, current.max ?? 5) } : current
+                            );
+                          }
                         }
-                      ),
-                      ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx(
-                          IconButton,
-                          {
-                            actionType: "moveUp",
-                            title: translate("builder.moveUp", { title: option.label }),
-                            disabled: optionIndex === 0,
-                            onClick: () => moveOption(field.id, option.id, optionIndex - 1)
+                      ) }),
+                      /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                        TextInput,
+                        {
+                          id: `builder-field-${field.id}-maximum`,
+                          label: translate("builder.maximum"),
+                          type: "number",
+                          value: String(field.max ?? 5),
+                          onChange: (value) => {
+                            const max = Number(value);
+                            if (!Number.isInteger(max)) return;
+                            updateField(
+                              field.id,
+                              (current) => current.type === "rating" ? { ...current, min: Math.min(current.min ?? 1, max), max } : current
+                            );
                           }
-                        ),
+                        }
+                      ) })
+                    ] }) : null,
+                    "options" in field ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__options"), children: [
+                      /* @__PURE__ */ jsx("strong", { children: translate("builder.options") }),
+                      field.options.map(
+                        (option, optionIndex) => OptionEditorSlot === void 0 ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__option"), children: [
+                          /* @__PURE__ */ jsx(
+                            TextInput,
+                            {
+                              id: `builder-option-${option.id}`,
+                              label: translate("builder.optionLabel", { index: optionIndex + 1 }),
+                              value: option.label,
+                              placeholder: translate("builder.optionLabelPlaceholder"),
+                              onChange: (value) => value.trim().length === 0 ? void 0 : updateOption(field.id, option.id, value)
+                            }
+                          ),
+                          ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(
+                              IconButton,
+                              {
+                                actionType: "moveUp",
+                                title: translate("builder.moveUp", { title: option.label }),
+                                disabled: optionIndex === 0,
+                                onClick: () => moveOption(field.id, option.id, optionIndex - 1)
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              IconButton,
+                              {
+                                actionType: "moveDown",
+                                title: translate("builder.moveDown", { title: option.label }),
+                                disabled: optionIndex === field.options.length - 1,
+                                onClick: () => moveOption(field.id, option.id, optionIndex + 1)
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              IconButton,
+                              {
+                                actionType: "delete",
+                                disabled: field.options.length === 1,
+                                onClick: () => removeOption(field.id, option.id),
+                                title: translate("builder.remove")
+                              }
+                            )
+                          ] }) : /* @__PURE__ */ jsx(
+                            ToolbarSlot,
+                            {
+                              schema,
+                              translate,
+                              kind: "option",
+                              targetId: option.id,
+                              index: optionIndex,
+                              total: field.options.length,
+                              title: option.label,
+                              onMoveUp: () => moveOption(field.id, option.id, optionIndex - 1),
+                              onMoveDown: () => moveOption(field.id, option.id, optionIndex + 1),
+                              onRemove: () => removeOption(field.id, option.id),
+                              readOnly,
+                              actions,
+                              components
+                            }
+                          )
+                        ] }, option.id) : /* @__PURE__ */ jsx(
+                          OptionEditorSlot,
+                          {
+                            schema,
+                            field,
+                            option,
+                            index: optionIndex,
+                            currentLocale: editingLocale,
+                            translate,
+                            readOnly,
+                            actions,
+                            components
+                          },
+                          option.id
+                        )
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          action: "addOption",
+                          targetId: field.id,
+                          disabled: policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
+                          onClick: () => addOption(field.id),
+                          children: translate("builder.addOption")
+                        }
+                      )
+                    ] }) : null,
+                    conditionsEnabled ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__condition"), children: [
+                      /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                        Select,
+                        {
+                          id: `builder-field-${field.id}-condition`,
+                          label: translate("builder.displayCondition"),
+                          value: condition?.questionId ?? "",
+                          onChange: (value) => {
+                            const selected = schema.fields.find((item) => item.id === value);
+                            setDisplayCondition(
+                              field.id,
+                              selected === void 0 ? void 0 : conditionWithValue(
+                                selected.id,
+                                conditionOperators(selected)[0] ?? "not_empty",
+                                defaultConditionValue(selected)
+                              )
+                            );
+                          },
+                          options: [
+                            { value: "", label: translate("builder.alwaysVisible") },
+                            ...availableSources.map((candidate) => ({
+                              value: candidate.id,
+                              label: candidate.title
+                            }))
+                          ]
+                        }
+                      ) }),
+                      condition !== void 0 && source !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
                         /* @__PURE__ */ jsx(
-                          IconButton,
+                          Select,
                           {
-                            actionType: "moveDown",
-                            title: translate("builder.moveDown", { title: option.label }),
-                            disabled: optionIndex === field.options.length - 1,
-                            onClick: () => moveOption(field.id, option.id, optionIndex + 1)
+                            "aria-label": translate("builder.conditionOperator"),
+                            value: condition.operator,
+                            onChange: (value) => {
+                              const operator = value;
+                              setDisplayCondition(
+                                field.id,
+                                conditionWithValue(source.id, operator, defaultConditionValue(source))
+                              );
+                            },
+                            options: conditionOperators(source).map((operator) => ({
+                              value: operator,
+                              label: translate(operatorKey(operator))
+                            }))
                           }
                         ),
                         /* @__PURE__ */ jsx(
-                          IconButton,
+                          ConditionValueEditor,
                           {
-                            actionType: "delete",
-                            disabled: field.options.length === 1,
-                            onClick: () => removeOption(field.id, option.id),
-                            title: translate("builder.remove")
+                            source,
+                            condition,
+                            onChange: (next) => setDisplayCondition(field.id, next),
+                            translate,
+                            components
                           }
                         )
-                      ] }) : /* @__PURE__ */ jsx(
-                        ToolbarSlot,
-                        {
-                          schema,
-                          kind: "option",
-                          targetId: option.id,
-                          index: optionIndex,
-                          total: field.options.length,
-                          title: option.label,
-                          onMoveUp: () => moveOption(field.id, option.id, optionIndex - 1),
-                          onMoveDown: () => moveOption(field.id, option.id, optionIndex + 1),
-                          onRemove: () => removeOption(field.id, option.id),
-                          readOnly,
-                          actions,
-                          components
-                        }
-                      )
-                    ] }, option.id) : /* @__PURE__ */ jsx(
-                      OptionEditorSlot,
-                      {
-                        schema,
-                        field,
-                        option,
-                        index: optionIndex,
-                        currentLocale: editingLocale,
-                        readOnly,
-                        actions,
-                        components
-                      },
-                      option.id
-                    )
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      action: "addOption",
-                      targetId: field.id,
-                      disabled: policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
-                      onClick: () => addOption(field.id),
-                      children: translate("builder.addOption")
-                    }
-                  )
-                ] }) : null,
-                conditionsEnabled ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__condition"), children: [
-                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                    Select,
-                    {
-                      id: `builder-field-${field.id}-condition`,
-                      label: translate("builder.displayCondition"),
-                      value: condition?.questionId ?? "",
-                      onChange: (value) => {
-                        const selected = schema.fields.find((item) => item.id === value);
-                        setDisplayCondition(
-                          field.id,
-                          selected === void 0 ? void 0 : conditionWithValue(
-                            selected.id,
-                            conditionOperators(selected)[0] ?? "not_empty",
-                            defaultConditionValue(selected)
-                          )
-                        );
-                      },
-                      options: [
-                        { value: "", label: translate("builder.alwaysVisible") },
-                        ...availableSources.map((candidate) => ({ value: candidate.id, label: candidate.title }))
-                      ]
-                    }
-                  ) }),
-                  condition !== void 0 && source !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(
-                      Select,
-                      {
-                        "aria-label": translate("builder.conditionOperator"),
-                        value: condition.operator,
-                        onChange: (value) => {
-                          const operator = value;
-                          setDisplayCondition(
-                            field.id,
-                            conditionWithValue(source.id, operator, defaultConditionValue(source))
-                          );
-                        },
-                        options: conditionOperators(source).map((operator) => ({
-                          value: operator,
-                          label: translate(operatorKey(operator))
-                        }))
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      ConditionValueEditor,
-                      {
-                        source,
-                        condition,
-                        onChange: (next) => setDisplayCondition(field.id, next),
-                        translate,
-                        components
-                      }
-                    )
-                  ] }) : null
-                ] }) : null
-              ] }, field.id);
-            }) }),
-            /* @__PURE__ */ jsx(
+                      ] }) : null
+                    ] }) : null
+                  ]
+                },
+                field.id
+              );
+            }) }) }),
+            /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "addQuestion", children: /* @__PURE__ */ jsx(
               Button,
               {
                 className: builderClass("form-engine-builder__add"),
@@ -2414,8 +2507,8 @@ function FormBuilder({
                 onClick: addField,
                 children: translate("builder.addQuestion")
               }
-            )
-          ] })
+            ) })
+          ] }) })
         }
       )
     }