@form-engine-ts/react 2.0.0 → 2.1.1

package/dist/index.cjs

@@ -23,6 +23,7 @@ __export(index_exports, {
   FormBuilder: () => FormBuilder,
   FormProvider: () => FormProvider,
   FormRenderer: () => FormRenderer,
+  resolveInitialFieldType: () => resolveInitialFieldType,
   useField: () => useField,
   useForm: () => useForm,
   useFormBuilder: () => useFormBuilder
@@ -37,21 +38,26 @@ var import_react2 = require("react");
 var import_core = require("@form-engine-ts/core");
 var import_react = require("react");
 var DEFAULT_PREFIXES = { field: "q", option: "opt", page: "page" };
+var CHOICE_TYPES = ["select", "radio", "multi-select"];
 function defaultIdFactory(kind, existingIds) {
   const prefix = DEFAULT_PREFIXES[kind];
   let id;
-  do {
+  do
     id = `${prefix}_${globalThis.crypto.randomUUID().slice(0, 8)}`;
-  } while (existingIds.has(id));
+  while (existingIds.has(id));
   return id;
 }
-function newField(type, id, optionId) {
+function defaultCreateField(type, id) {
   const base = { id, title: "New question", required: false };
-  if (type === "text" || type === "textarea") return { ...base, type };
-  if (type === "number") return { ...base, type };
+  if (type === "text" || type === "textarea" || type === "number" || type === "checkbox") return { ...base, type };
   if (type === "rating") return { ...base, type, min: 1, max: 5 };
-  if (type === "checkbox") return { ...base, type };
-  return optionId === void 0 ? void 0 : { ...base, type, options: [{ id: optionId, label: "Option 1" }] };
+  return { ...base, type, options: [] };
+}
+function defaultCreateOption(field, id) {
+  return { id, label: `Option ${"options" in field ? field.options.length + 1 : 1}` };
+}
+function defaultCreatePage(id, questionIds) {
+  return { id, title: "New page", questionIds };
 }
 function move(items, sourceIndex, targetIndex) {
   if (sourceIndex < 0 || targetIndex < 0 || targetIndex >= items.length || sourceIndex === targetIndex)
@@ -62,334 +68,553 @@ function move(items, sourceIndex, targetIndex) {
   result.splice(targetIndex, 0, item);
   return result;
 }
-function addPolicyIssues(schema, policy, issues) {
-  if (policy?.maxFields !== void 0 && schema.fields.length > policy.maxFields) {
-    issues.push({
-      path: "fields",
-      code: "max_fields_exceeded",
-      message: `At most ${policy.maxFields} fields are allowed.`
-    });
-  }
-  schema.fields.forEach((field, index) => {
-    if (policy?.allowedFieldTypes !== void 0 && !policy.allowedFieldTypes.includes(field.type)) {
-      issues.push({
-        path: `fields[${index}].type`,
-        code: "disallowed_field_type",
-        message: `Field type ${field.type} is not allowed.`
-      });
-    }
-    if (policy?.maxTextLength !== void 0) {
-      for (const [property, text] of [
-        ["title", field.title],
-        ["description", field.description]
-      ]) {
-        if (text !== void 0 && text.length > policy.maxTextLength) {
-          issues.push({
-            path: `fields[${index}].${property}`,
-            code: "max_text_length_exceeded",
-            message: `Text must be at most ${policy.maxTextLength} characters.`
-          });
-        }
-      }
-    }
-    if (policy?.maxOptionsPerField !== void 0 && "options" in field && field.options.length > policy.maxOptionsPerField) {
-      issues.push({
-        path: `fields[${index}].options`,
-        code: "max_options_exceeded",
-        message: `At most ${policy.maxOptionsPerField} options are allowed.`
-      });
-    }
-  });
-  for (const locale of policy?.requiredLocales ?? []) {
-    if (!(schema.supportedLocales ?? []).includes(locale)) {
-      issues.push({
-        path: "supportedLocales",
-        code: "required_locale_missing",
-        message: `Required locale ${locale} is missing.`
-      });
-    }
-    if (locale === schema.defaultLocale) continue;
-    const requiredTranslations = [
-      { path: `translations.${locale}.title`, value: schema.translations?.[locale]?.title },
-      ...schema.fields.map((field, index) => ({
-        path: `fields[${index}].translations.${locale}.title`,
-        value: field.translations?.[locale]?.title
-      })),
-      ...schema.fields.flatMap(
-        (field, fieldIndex) => "options" in field ? field.options.map((option, optionIndex) => ({
-          path: `fields[${fieldIndex}].options[${optionIndex}].translations.${locale}`,
-          value: option.translations?.[locale]
-        })) : []
-      ),
-      ...schema.pages?.flatMap(
-        (page, pageIndex) => page.title === void 0 ? [] : [{ path: `pages[${pageIndex}].translations.${locale}.title`, value: page.translations?.[locale]?.title }]
-      ) ?? []
-    ];
-    for (const translation of requiredTranslations) {
-      if (translation.value === void 0 || translation.value.trim().length === 0) {
-        issues.push({
-          path: translation.path,
-          code: "required_translation_missing",
-          message: `A translation for required locale ${locale} is missing.`
-        });
-      }
-    }
-  }
+function withoutDisplayCondition(field) {
+  const { displayCondition: _displayCondition, ...rest } = field;
+  return rest;
+}
+function removeLocalizedProperty(translations, locale, property) {
+  const current = translations?.[locale];
+  if (current === void 0) return translations;
+  const { [property]: _removed, ...remaining } = current;
+  return { ...translations, [locale]: remaining };
+}
+function setTranslationMetadata(node, locale, property, metadata, remove) {
+  const localeMetadata = node.translationMetadata?.[locale];
+  if (metadata === void 0 && !remove) return node;
+  const nextLocaleMetadata = remove ? Object.fromEntries(Object.entries(localeMetadata ?? {}).filter(([key]) => key !== property)) : { ...localeMetadata, [property]: metadata ?? {} };
+  return { ...node, translationMetadata: { ...node.translationMetadata, [locale]: nextLocaleMetadata } };
+}
+function failedId(kind, result) {
+  return { success: false, error: result.error ?? { type: "invalid_id", kind, id: "" } };
 }
 function useFormBuilder({
   schema,
   onChange,
   policy,
-  idFactory = defaultIdFactory
+  idFactory = defaultIdFactory,
+  factories = {}
 }) {
   const createId = (0, import_react.useCallback)(
     (kind, existingIds) => {
-      const id = idFactory(kind, existingIds).trim();
-      return id.length > 0 && !existingIds.has(id) ? id : void 0;
+      const rawId = idFactory(kind, existingIds);
+      const id = rawId.trim();
+      return id.length > 0 && !existingIds.has(id) ? { id } : { error: { type: "invalid_id", kind, id: rawId } };
     },
     [idFactory]
   );
+  const textPolicyError = (0, import_react.useCallback)(
+    (text) => policy?.maxTextLength !== void 0 && text.length > policy.maxTextLength ? { success: false, error: { type: "max_text_length_exceeded", max: policy.maxTextLength } } : void 0,
+    [policy?.maxTextLength]
+  );
+  const updateField = (0, import_react.useCallback)(
+    (fieldId, updater) => {
+      const current = schema.fields.find((field) => field.id === fieldId);
+      if (current === void 0)
+        return { success: false, error: { type: "node_not_found", kind: "field", id: fieldId } };
+      const updated = updater(current);
+      if (updated.id !== fieldId)
+        return { success: false, error: { type: "invalid_id", kind: "field", id: updated.id } };
+      if (policy?.allowedFieldTypes !== void 0 && !policy.allowedFieldTypes.includes(updated.type))
+        return { success: false, error: { type: "disallowed_field_type", fieldType: updated.type } };
+      for (const text of [updated.title, updated.description]) {
+        if (text !== void 0) {
+          const error = textPolicyError(text);
+          if (error !== void 0) return error;
+        }
+      }
+      onChange({ ...schema, fields: schema.fields.map((field) => field.id === fieldId ? updated : field) });
+      return { success: true };
+    },
+    [onChange, policy?.allowedFieldTypes, schema, textPolicyError]
+  );
+  const updateOption = (0, import_react.useCallback)(
+    (fieldId, optionId, updater) => {
+      const field = schema.fields.find((candidate) => candidate.id === fieldId);
+      if (field === void 0) return { success: false, error: { type: "node_not_found", kind: "field", id: fieldId } };
+      if (!("options" in field))
+        return { success: false, error: { type: "invalid_operation", message: `Field ${fieldId} has no options.` } };
+      const current = field.options.find((option) => option.id === optionId);
+      if (current === void 0)
+        return { success: false, error: { type: "node_not_found", kind: "option", id: optionId } };
+      const updated = updater(current);
+      if (updated.id !== optionId)
+        return { success: false, error: { type: "invalid_id", kind: "option", id: updated.id } };
+      const error = textPolicyError(updated.label);
+      if (error !== void 0) return error;
+      onChange({
+        ...schema,
+        fields: schema.fields.map(
+          (candidate) => candidate.id === fieldId && "options" in candidate ? {
+            ...candidate,
+            options: candidate.options.map((option) => option.id === optionId ? updated : option)
+          } : candidate
+        )
+      });
+      return { success: true };
+    },
+    [onChange, schema, textPolicyError]
+  );
+  const updatePage = (0, import_react.useCallback)(
+    (pageId, updater) => {
+      const page = schema.pages?.find((candidate) => candidate.id === pageId);
+      if (page === void 0) return { success: false, error: { type: "node_not_found", kind: "page", id: pageId } };
+      const pages = schema.pages;
+      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 } };
+      onChange({ ...schema, pages: pages.map((candidate) => candidate.id === pageId ? updated : candidate) });
+      return { success: true };
+    },
+    [onChange, schema]
+  );
   const addField = (0, import_react.useCallback)(
     (type, pageId) => {
-      if (policy?.allowedFieldTypes !== void 0 && !policy.allowedFieldTypes.includes(type)) {
+      if (policy?.allowedFieldTypes !== void 0 && !policy.allowedFieldTypes.includes(type))
         return { success: false, error: { type: "disallowed_field_type", fieldType: type } };
-      }
-      if (policy?.maxFields !== void 0 && schema.fields.length >= policy.maxFields) {
+      if (policy?.maxFields !== void 0 && schema.fields.length >= policy.maxFields)
         return { success: false, error: { type: "max_fields_exceeded", max: policy.maxFields } };
-      }
-      const fieldId = createId("field", new Set(schema.fields.map((field2) => field2.id)));
-      const needsOption = ["select", "radio", "multi-select"].includes(type);
-      const optionId = needsOption ? createId(
-        "option",
-        new Set(
-          schema.fields.flatMap((field2) => "options" in field2 ? field2.options.map((option) => option.id) : [])
-        )
-      ) : void 0;
-      if (fieldId === void 0 || needsOption && optionId === void 0) {
-        return {
-          success: false,
-          error: { type: "invalid_operation", message: "idFactory returned a duplicate or empty ID." }
-        };
-      }
-      const field = newField(type, fieldId, optionId);
-      if (field === void 0) {
-        return { success: false, error: { type: "invalid_operation", message: "Could not create the field." } };
+      if (pageId !== void 0 && !schema.pages?.some((page) => page.id === pageId))
+        return { success: false, error: { type: "node_not_found", kind: "page", id: pageId } };
+      const fieldIds = new Set(schema.fields.map((field2) => field2.id));
+      const fieldId = createId("field", fieldIds);
+      if (fieldId.id === void 0) return failedId("field", fieldId);
+      let field = (factories.createField ?? defaultCreateField)(type, fieldId.id);
+      if (field.id !== fieldId.id || field.type !== type || fieldIds.has(field.id))
+        return { success: false, error: { type: "invalid_id", kind: "field", id: field.id } };
+      if (CHOICE_TYPES.includes(type) && "options" in field && field.options.length === 0) {
+        const optionIds = new Set(
+          schema.fields.flatMap((item) => "options" in item ? item.options.map((option2) => option2.id) : [])
+        );
+        const optionId = createId("option", optionIds);
+        if (optionId.id === void 0) return failedId("option", optionId);
+        const option = (factories.createOption ?? defaultCreateOption)(field, optionId.id);
+        if (option.id !== optionId.id || optionIds.has(option.id))
+          return { success: false, error: { type: "invalid_id", kind: "option", id: option.id } };
+        field = { ...field, options: [option] };
       }
       const pages = schema.pages?.map((page, index) => ({
         ...page,
-        questionIds: page.id === pageId || pageId === void 0 && index === (schema.pages?.length ?? 0) - 1 ? [...page.questionIds, fieldId] : page.questionIds
+        questionIds: page.id === pageId || pageId === void 0 && index === (schema.pages?.length ?? 0) - 1 ? [...page.questionIds, field.id] : page.questionIds
       }));
-      if (schema.pages !== void 0 && !schema.pages.some((page) => page.id === pageId) && pageId !== void 0) {
-        return { success: false, error: { type: "invalid_operation", message: `Unknown page: ${pageId}` } };
-      }
       onChange({ ...schema, fields: [...schema.fields, field], ...pages === void 0 ? {} : { pages } });
       return { success: true };
     },
-    [createId, onChange, policy, schema]
+    [createId, factories, onChange, policy, schema]
   );
   const removeField = (0, import_react.useCallback)(
     (fieldId) => {
-      if (schema.fields.length <= 1 || !schema.fields.some((field) => field.id === fieldId)) return;
-      const fields = schema.fields.filter((field) => field.id !== fieldId).map(
-        (field) => field.displayCondition?.questionId === fieldId ? (({ displayCondition: _condition, ...candidate }) => candidate)(field) : field
-      );
-      const remainingPages = schema.pages?.map((page) => ({ ...page, questionIds: page.questionIds.filter((id) => id !== fieldId) })).filter((page) => page.questionIds.length > 0);
-      if (schema.pages !== void 0 && remainingPages?.length === 0) {
-        const { pages: _pages, ...singlePageSchema } = schema;
-        onChange({ ...singlePageSchema, fields });
-      } else {
-        onChange({ ...schema, fields, ...remainingPages === void 0 ? {} : { pages: remainingPages } });
-      }
+      if (!schema.fields.some((field) => field.id === fieldId))
+        return { success: false, error: { type: "node_not_found", kind: "field", id: fieldId } };
+      if (schema.fields.length <= 1)
+        return { success: false, error: { type: "invalid_operation", message: "A form must contain one field." } };
+      const fields = schema.fields.filter((field) => field.id !== fieldId).map((field) => field.displayCondition?.questionId === fieldId ? withoutDisplayCondition(field) : field);
+      const pages = schema.pages?.map((page) => ({ ...page, questionIds: page.questionIds.filter((id) => id !== fieldId) })).filter((page) => page.questionIds.length > 0);
+      if (schema.pages !== void 0 && pages?.length === 0) {
+        const { pages: _pages, ...single } = schema;
+        onChange({ ...single, fields });
+      } else onChange({ ...schema, fields, ...pages === void 0 ? {} : { pages } });
+      return { success: true };
     },
     [onChange, schema]
   );
   const moveField = (0, import_react.useCallback)(
     (fieldId, targetIndex) => {
-      const fields = move(
-        schema.fields,
-        schema.fields.findIndex((field) => field.id === fieldId),
-        targetIndex
-      );
-      if (fields !== void 0) {
-        const indexById = new Map(fields.map((field, index) => [field.id, index]));
-        const safeFields = fields.map((field, index) => {
-          const sourceIndex = field.displayCondition === void 0 ? void 0 : indexById.get(field.displayCondition.questionId);
-          if (field.displayCondition === void 0 || sourceIndex !== void 0 && sourceIndex < index) return field;
-          const { displayCondition: _condition, ...withoutCondition } = field;
-          return withoutCondition;
-        });
-        onChange({ ...schema, fields: safeFields });
-      }
+      const sourceIndex = schema.fields.findIndex((field) => field.id === fieldId);
+      if (sourceIndex < 0) return { success: false, error: { type: "node_not_found", kind: "field", id: fieldId } };
+      const fields = move(schema.fields, sourceIndex, targetIndex);
+      if (fields === void 0)
+        return { success: false, error: { type: "invalid_operation", message: "Invalid field position." } };
+      const indexById = new Map(fields.map((field, index) => [field.id, index]));
+      onChange({
+        ...schema,
+        fields: fields.map((field, index) => {
+          const source = field.displayCondition?.questionId;
+          return source === void 0 || (indexById.get(source) ?? index) < index ? field : withoutDisplayCondition(field);
+        })
+      });
+      return { success: true };
     },
     [onChange, schema]
   );
-  const updateField = (0, import_react.useCallback)(
-    (fieldId, updater) => {
-      const current = schema.fields.find((field) => field.id === fieldId);
-      if (current === void 0) return;
-      const updated = updater(current);
-      if (updated.id !== fieldId) return;
-      if (policy?.allowedFieldTypes !== void 0 && !policy.allowedFieldTypes.includes(updated.type)) return;
-      const maxTextLength = policy?.maxTextLength;
-      if (maxTextLength !== void 0 && [updated.title, updated.description].some((text) => text !== void 0 && text.length > maxTextLength)) {
-        return;
-      }
-      onChange({ ...schema, fields: schema.fields.map((field) => field.id === fieldId ? updated : field) });
-    },
-    [onChange, policy, schema]
-  );
   const addOption = (0, import_react.useCallback)(
     (fieldId) => {
       const field = schema.fields.find((candidate) => candidate.id === fieldId);
-      if (field === void 0 || !("options" in field)) {
+      if (field === void 0) return { success: false, error: { type: "node_not_found", kind: "field", id: fieldId } };
+      if (!("options" in field))
         return { success: false, error: { type: "invalid_operation", message: `Field ${fieldId} has no options.` } };
-      }
-      if (policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField) {
+      if (policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField)
         return { success: false, error: { type: "max_options_exceeded", max: policy.maxOptionsPerField } };
-      }
-      const existingIds = new Set(
-        schema.fields.flatMap(
-          (candidate) => "options" in candidate ? candidate.options.map((option2) => option2.id) : []
-        )
+      const ids = new Set(
+        schema.fields.flatMap((item) => "options" in item ? item.options.map((option2) => option2.id) : [])
       );
-      const optionId = createId("option", existingIds);
-      if (optionId === void 0) {
-        return {
-          success: false,
-          error: { type: "invalid_operation", message: "idFactory returned a duplicate or empty ID." }
-        };
-      }
-      const option = { id: optionId, label: `Option ${field.options.length + 1}` };
+      const id = createId("option", ids);
+      if (id.id === void 0) return failedId("option", id);
+      const option = (factories.createOption ?? defaultCreateOption)(field, id.id);
+      if (option.id !== id.id || ids.has(option.id))
+        return { success: false, error: { type: "invalid_id", kind: "option", id: option.id } };
       onChange({
         ...schema,
         fields: schema.fields.map(
-          (candidate) => candidate.id === fieldId && "options" in candidate ? { ...candidate, options: [...candidate.options, option] } : candidate
+          (item) => item.id === fieldId && "options" in item ? { ...item, options: [...item.options, option] } : item
         )
       });
       return { success: true };
     },
-    [createId, onChange, policy, schema]
+    [createId, factories.createOption, onChange, policy?.maxOptionsPerField, schema]
   );
   const removeOption = (0, import_react.useCallback)(
     (fieldId, optionId) => {
-      const field = schema.fields.find((candidate) => candidate.id === fieldId);
-      if (field === void 0 || !("options" in field) || field.options.length <= 1) return;
+      const field = schema.fields.find((item) => item.id === fieldId);
+      if (field === void 0) return { success: false, error: { type: "node_not_found", kind: "field", id: fieldId } };
+      if (!("options" in field) || !field.options.some((option) => option.id === optionId))
+        return { success: false, error: { type: "node_not_found", kind: "option", id: optionId } };
+      if (field.options.length <= 1)
+        return { success: false, error: { type: "invalid_operation", message: "A choice field needs one option." } };
       onChange({
         ...schema,
         fields: schema.fields.map(
-          (candidate) => candidate.id === fieldId && "options" in candidate ? { ...candidate, options: candidate.options.filter((option) => option.id !== optionId) } : candidate
+          (item) => item.id === fieldId && "options" in item ? { ...item, options: item.options.filter((option) => option.id !== optionId) } : item
         )
       });
+      return { success: true };
     },
     [onChange, schema]
   );
   const moveOption = (0, import_react.useCallback)(
     (fieldId, optionId, targetIndex) => {
-      const field = schema.fields.find((candidate) => candidate.id === fieldId);
-      if (field === void 0 || !("options" in field)) return;
+      const field = schema.fields.find((item) => item.id === fieldId);
+      if (field === void 0) return { success: false, error: { type: "node_not_found", kind: "field", id: fieldId } };
+      if (!("options" in field))
+        return { success: false, error: { type: "invalid_operation", message: `Field ${fieldId} has no options.` } };
       const options = move(
         field.options,
         field.options.findIndex((option) => option.id === optionId),
         targetIndex
       );
-      if (options === void 0) return;
+      if (options === void 0)
+        return { success: false, error: { type: "invalid_operation", message: "Invalid option position." } };
       onChange({
         ...schema,
         fields: schema.fields.map(
-          (candidate) => candidate.id === fieldId && "options" in candidate ? { ...candidate, options } : candidate
+          (item) => item.id === fieldId && "options" in item ? { ...item, options } : item
         )
       });
+      return { success: true };
     },
     [onChange, schema]
   );
+  const changeFieldType = (0, import_react.useCallback)(
+    (fieldId, type) => {
+      const field = schema.fields.find((item) => item.id === fieldId);
+      if (field === void 0) return { success: false, error: { type: "node_not_found", kind: "field", id: fieldId } };
+      if (policy?.allowedFieldTypes !== void 0 && !policy.allowedFieldTypes.includes(type))
+        return { success: false, error: { type: "disallowed_field_type", fieldType: type } };
+      let transformed = (0, import_core.transformFieldType)(field, type);
+      if (CHOICE_TYPES.includes(type) && !("options" in field) && "options" in transformed) {
+        const ids = new Set(
+          schema.fields.flatMap((item) => "options" in item ? item.options.map((option2) => option2.id) : [])
+        );
+        const id = createId("option", ids);
+        if (id.id === void 0) return failedId("option", id);
+        const option = (factories.createOption ?? defaultCreateOption)(transformed, id.id);
+        if (option.id !== id.id || ids.has(option.id))
+          return { success: false, error: { type: "invalid_id", kind: "option", id: option.id } };
+        transformed = { ...transformed, options: [option] };
+      }
+      onChange({ ...schema, fields: schema.fields.map((item) => item.id === fieldId ? transformed : item) });
+      return { success: true };
+    },
+    [createId, factories.createOption, onChange, policy?.allowedFieldTypes, schema]
+  );
   const addPage = (0, import_react.useCallback)(
     (questionId) => {
-      const existingIds = new Set(schema.pages?.map((page) => page.id) ?? []);
-      const pageId = createId("page", existingIds);
-      if (pageId === void 0) return;
-      if (schema.pages === void 0) {
-        onChange({ ...schema, pages: [{ id: pageId, questionIds: schema.fields.map((field) => field.id) }] });
-        return;
-      }
-      const movableQuestionId = questionId ?? schema.pages.find((page) => page.questionIds.length > 1)?.questionIds.at(-1);
-      if (movableQuestionId === void 0) return;
-      const sourcePage = schema.pages.find((page) => page.questionIds.includes(movableQuestionId));
-      if (sourcePage === void 0 || sourcePage.questionIds.length <= 1) return;
-      const pages = [
-        ...schema.pages.map((page) => ({
-          ...page,
-          questionIds: page.questionIds.filter((id) => id !== movableQuestionId)
+      const ids = new Set(schema.pages?.map((page2) => page2.id) ?? []);
+      const id = createId("page", ids);
+      if (id.id === void 0) return failedId("page", id);
+      const questionIds = schema.pages === void 0 ? schema.fields.map((field) => field.id) : [questionId ?? schema.pages.find((page2) => page2.questionIds.length > 1)?.questionIds.at(-1)].filter(
+        (value) => value !== void 0
+      );
+      if (questionIds.length === 0)
+        return { success: false, error: { type: "invalid_operation", message: "No question can be moved." } };
+      const source = schema.pages?.find((page2) => page2.questionIds.includes(questionIds[0] ?? ""));
+      if (schema.pages !== void 0 && (source === void 0 || source.questionIds.length <= 1))
+        return { success: false, error: { type: "invalid_operation", message: "A page cannot be left empty." } };
+      const page = (factories.createPage ?? defaultCreatePage)(id.id, [...questionIds]);
+      if (page.id !== id.id || ids.has(page.id))
+        return { success: false, error: { type: "invalid_id", kind: "page", id: page.id } };
+      const pages = schema.pages === void 0 ? [page] : [
+        ...schema.pages.map((item) => ({
+          ...item,
+          questionIds: item.questionIds.filter((fieldId) => !questionIds.includes(fieldId))
         })),
-        { id: pageId, questionIds: [movableQuestionId] }
+        page
       ];
       onChange({ ...schema, pages });
+      return { success: true };
     },
-    [createId, onChange, schema]
+    [createId, factories.createPage, onChange, schema]
   );
   const removePage = (0, import_react.useCallback)(
     (pageId) => {
-      if (schema.pages === void 0) return;
-      const index = schema.pages.findIndex((page) => page.id === pageId);
-      const removed = schema.pages[index];
-      if (removed === void 0) return;
-      if (schema.pages.length === 1) {
-        const { pages: _pages, ...singlePage } = schema;
-        onChange(singlePage);
-        return;
+      const index = schema.pages?.findIndex((page) => page.id === pageId) ?? -1;
+      const removed = schema.pages?.[index];
+      if (removed === void 0) return { success: false, error: { type: "node_not_found", kind: "page", id: pageId } };
+      const currentPages = schema.pages;
+      if (currentPages === void 0)
+        return { success: false, error: { type: "node_not_found", kind: "page", id: pageId } };
+      if ((schema.pages?.length ?? 0) === 1) {
+        const { pages: _pages, ...single } = schema;
+        onChange(single);
+        return { success: true };
       }
       const targetIndex = index === 0 ? 1 : index - 1;
       onChange({
         ...schema,
-        pages: schema.pages.map(
+        pages: currentPages.map(
           (page, pageIndex) => pageIndex === targetIndex ? { ...page, questionIds: [...page.questionIds, ...removed.questionIds] } : page
         ).filter((page) => page.id !== pageId)
       });
+      return { success: true };
     },
     [onChange, schema]
   );
-  const setLocaleTranslation = (0, import_react.useCallback)(
-    (locale, target, property, text) => {
-      if (locale.trim().length === 0 || policy?.maxTextLength !== void 0 && text.length > policy.maxTextLength)
-        return;
-      const supportedLocales = [.../* @__PURE__ */ new Set([...schema.supportedLocales ?? [], locale])];
-      if (target === "form" && ["title", "description", "completionMessage"].includes(property)) {
-        onChange({
-          ...schema,
-          supportedLocales,
-          translations: { ...schema.translations, [locale]: { ...schema.translations?.[locale], [property]: text } }
+  const movePage = (0, import_react.useCallback)(
+    (pageId, targetIndex) => {
+      const sourceIndex = schema.pages?.findIndex((page) => page.id === pageId) ?? -1;
+      if (sourceIndex < 0) return { success: false, error: { type: "node_not_found", kind: "page", id: pageId } };
+      const pages = move(schema.pages ?? [], sourceIndex, targetIndex);
+      if (pages === void 0)
+        return { success: false, error: { type: "invalid_operation", message: "Invalid page position." } };
+      const assignment = new Map(pages.flatMap((page, index) => page.questionIds.map((id) => [id, index])));
+      onChange({
+        ...schema,
+        pages: pages.map((page, index) => {
+          const source = page.displayCondition?.questionId;
+          if (source === void 0 || (assignment.get(source) ?? index) < index) return page;
+          const { displayCondition: _condition, ...rest } = page;
+          return rest;
+        })
+      });
+      return { success: true };
+    },
+    [onChange, schema]
+  );
+  const assignFieldToPage = (0, import_react.useCallback)(
+    (fieldId, pageId) => {
+      if (!schema.fields.some((field) => field.id === fieldId))
+        return { success: false, error: { type: "node_not_found", kind: "field", id: fieldId } };
+      if (pageId === null) {
+        if (schema.pages !== void 0) {
+          const { pages: _pages, ...single } = schema;
+          onChange(single);
+        }
+        return { success: true };
+      }
+      if (!schema.pages?.some((page) => page.id === pageId))
+        return { success: false, error: { type: "node_not_found", kind: "page", id: pageId } };
+      const pages = schema.pages.map((page) => ({
+        ...page,
+        questionIds: page.id === pageId ? schema.fields.filter((field) => page.questionIds.includes(field.id) || field.id === fieldId).map((field) => field.id) : page.questionIds.filter((id) => id !== fieldId)
+      })).filter((page) => page.questionIds.length > 0);
+      onChange({ ...schema, pages });
+      return { success: true };
+    },
+    [onChange, schema]
+  );
+  const setDisplayCondition = (0, import_react.useCallback)(
+    (fieldId, condition) => {
+      const index = schema.fields.findIndex((field) => field.id === fieldId);
+      if (index < 0) return { success: false, error: { type: "node_not_found", kind: "field", id: fieldId } };
+      if (condition !== void 0) {
+        const sourceIndex = schema.fields.findIndex((field) => field.id === condition.questionId);
+        if (sourceIndex < 0 || sourceIndex >= index)
+          return {
+            success: false,
+            error: { type: "invalid_operation", message: "Conditions require an earlier field." }
+          };
+      }
+      onChange({
+        ...schema,
+        fields: schema.fields.map(
+          (field) => field.id !== fieldId ? field : condition === void 0 ? withoutDisplayCondition(field) : { ...field, displayCondition: condition }
+        )
+      });
+      return { success: true };
+    },
+    [onChange, schema]
+  );
+  const setSourceText = (0, import_react.useCallback)(
+    (target, property, text) => {
+      const error = textPolicyError(text);
+      if (error !== void 0) return error;
+      if (target.kind === "form") {
+        if (!["title", "description", "completionMessage"].includes(property))
+          return {
+            success: false,
+            error: { type: "invalid_operation", message: `Unsupported form property: ${property}` }
+          };
+        if (property === "title") onChange({ ...schema, title: text });
+        else if (property === "description") {
+          const { description: _description, ...withoutDescription } = schema;
+          onChange(text.length === 0 ? withoutDescription : { ...schema, description: text });
+        } else {
+          const { completionMessage: _completionMessage, ...withoutCompletionMessage } = schema;
+          onChange(text.length === 0 ? withoutCompletionMessage : { ...schema, completionMessage: text });
+        }
+        return { success: true };
+      }
+      if (target.id === void 0)
+        return { success: false, error: { type: "invalid_operation", message: "A target ID is required." } };
+      if (target.kind === "field") {
+        if (!["title", "description"].includes(property))
+          return {
+            success: false,
+            error: { type: "invalid_operation", message: `Unsupported field property: ${property}` }
+          };
+        return updateField(target.id, (field) => {
+          if (property === "title") return { ...field, title: text };
+          const { description: _description, ...withoutDescription } = field;
+          return text.length === 0 ? withoutDescription : { ...field, description: text };
         });
-        return;
       }
-      const fields = schema.fields.map((field) => {
-        if (field.id === target && ["title", "description"].includes(property)) {
+      if (target.kind === "option") {
+        if (property !== "label")
+          return {
+            success: false,
+            error: { type: "invalid_operation", message: `Unsupported option property: ${property}` }
+          };
+        for (const field of schema.fields)
+          if ("options" in field && field.options.some((option) => option.id === target.id))
+            return updateOption(field.id, target.id, (option) => ({ ...option, label: text }));
+        return { success: false, error: { type: "node_not_found", kind: "option", id: target.id } };
+      }
+      if (!["title", "description"].includes(property))
+        return {
+          success: false,
+          error: { type: "invalid_operation", message: `Unsupported page property: ${property}` }
+        };
+      return updatePage(target.id, (page) => {
+        if (property === "title") {
+          const { title: _title, ...withoutTitle } = page;
+          return text.length === 0 ? withoutTitle : { ...page, title: text };
+        }
+        const { description: _description, ...withoutDescription } = page;
+        return text.length === 0 ? withoutDescription : { ...page, description: text };
+      });
+    },
+    [onChange, schema, textPolicyError, updateField, updateOption, updatePage]
+  );
+  const setLocaleTranslation = (0, import_react.useCallback)(
+    (locale, target, property, text, options = {}) => {
+      const normalized = locale.trim();
+      if (normalized.length === 0)
+        return { success: false, error: { type: "invalid_operation", message: "Locale must not be empty." } };
+      const error = textPolicyError(text);
+      if (error !== void 0) return error;
+      const supportedLocales = [.../* @__PURE__ */ new Set([...schema.supportedLocales ?? [], normalized])];
+      const remove = text.length === 0;
+      if (target.kind === "form") {
+        if (!["title", "description", "completionMessage"].includes(property))
           return {
-            ...field,
-            translations: { ...field.translations, [locale]: { ...field.translations?.[locale], [property]: text } }
+            success: false,
+            error: { type: "invalid_operation", message: `Unsupported form property: ${property}` }
           };
+        const key = property;
+        const translations = remove ? removeLocalizedProperty(schema.translations, normalized, key) : { ...schema.translations, [normalized]: { ...schema.translations?.[normalized], [key]: text } };
+        onChange(
+          setTranslationMetadata(
+            { ...schema, supportedLocales, ...translations === void 0 ? {} : { translations } },
+            normalized,
+            property,
+            options.metadata,
+            remove
+          )
+        );
+        return { success: true };
+      }
+      if (target.id === void 0)
+        return { success: false, error: { type: "invalid_operation", message: "A target ID is required." } };
+      let found = false;
+      const fields = schema.fields.map((field) => {
+        if (target.kind === "field" && field.id === target.id && ["title", "description"].includes(property)) {
+          found = true;
+          const key = property;
+          const translations = remove ? removeLocalizedProperty(field.translations, normalized, key) : { ...field.translations, [normalized]: { ...field.translations?.[normalized], [key]: text } };
+          return setTranslationMetadata(
+            { ...field, ...translations === void 0 ? {} : { translations } },
+            normalized,
+            property,
+            options.metadata,
+            remove
+          );
         }
-        if (!("options" in field) || property !== "label") return field;
+        if (target.kind !== "option" || property !== "label" || !("options" in field)) return field;
         return {
           ...field,
-          options: field.options.map(
-            (option) => option.id === target ? { ...option, translations: { ...option.translations, [locale]: text } } : option
-          )
+          options: field.options.map((option) => {
+            if (option.id !== target.id) return option;
+            found = true;
+            const translations = remove ? Object.fromEntries(Object.entries(option.translations ?? {}).filter(([key]) => key !== normalized)) : { ...option.translations, [normalized]: text };
+            return setTranslationMetadata({ ...option, translations }, normalized, property, options.metadata, remove);
+          })
         };
       });
-      const pages = schema.pages?.map(
-        (page) => page.id === target && ["title", "description"].includes(property) ? {
-          ...page,
-          translations: { ...page.translations, [locale]: { ...page.translations?.[locale], [property]: text } }
-        } : page
-      );
+      const pages = schema.pages?.map((page) => {
+        if (target.kind !== "page" || page.id !== target.id || !["title", "description"].includes(property))
+          return page;
+        found = true;
+        const key = property;
+        const translations = remove ? removeLocalizedProperty(page.translations, normalized, key) : { ...page.translations, [normalized]: { ...page.translations?.[normalized], [key]: text } };
+        return setTranslationMetadata(
+          { ...page, ...translations === void 0 ? {} : { translations } },
+          normalized,
+          property,
+          options.metadata,
+          remove
+        );
+      });
+      if (!found) return { success: false, error: { type: "node_not_found", kind: target.kind, id: target.id } };
       onChange({ ...schema, supportedLocales, fields, ...pages === void 0 ? {} : { pages } });
+      return { success: true };
     },
-    [onChange, policy, schema]
+    [onChange, schema, textPolicyError]
+  );
+  const addLocale = (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." } };
+      onChange({
+        ...schema,
+        supportedLocales: [
+          .../* @__PURE__ */ new Set([
+            ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
+            ...schema.supportedLocales ?? [],
+            normalized
+          ])
+        ]
+      });
+      return { success: true };
+    },
+    [onChange, 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." } };
+      onChange({
+        ...schema,
+        defaultLocale: normalized,
+        supportedLocales: [.../* @__PURE__ */ new Set([normalized, ...schema.supportedLocales ?? []])]
+      });
+      return { success: true };
+    },
+    [onChange, schema]
   );
   const validationIssues = (0, import_react.useMemo)(() => {
-    const result = (0, import_core.validateFormSchema)(schema);
-    const issues = result.valid ? [] : [...result.issues];
-    addPolicyIssues(schema, policy, issues);
-    return issues;
+    const result = (0, import_core.validateFormSchema)(schema, policy === void 0 ? {} : { policy });
+    return result.valid ? [] : result.issues;
   }, [policy, schema]);
   return {
     schema,
@@ -397,12 +622,21 @@ function useFormBuilder({
     removeField,
     moveField,
     updateField,
+    changeFieldType,
     addOption,
+    updateOption,
     removeOption,
     moveOption,
     addPage,
+    updatePage,
     removePage,
+    movePage,
+    assignFieldToPage,
+    setDisplayCondition,
+    setSourceText,
     setLocaleTranslation,
+    addLocale,
+    setDefaultLocale,
     validationIssues
   };
 }
@@ -428,6 +662,7 @@ var BUILDER_DEFAULTS = {
   "builder.questionTitle": "\u8CEA\u554F\u6587 / Question Title",
   "builder.questionTitlePlaceholder": "Example: Tell us what we could improve",
   "builder.newQuestionTitle": "New question",
+  "builder.completionMessage": "Completion message",
   "builder.type": "Type",
   "builder.required": "Required",
   "builder.minimum": "Minimum",
@@ -486,33 +721,6 @@ function fieldTypeKey(type) {
 function operatorKey(operator) {
   return `builder.operator.${operator}`;
 }
-function createUniqueId(prefix, existingIds) {
-  let id;
-  do {
-    id = `${prefix}_${globalThis.crypto.randomUUID().slice(0, 8)}`;
-  } while (existingIds.has(id));
-  return id;
-}
-function baseField(field, type) {
-  return {
-    id: field.id,
-    type,
-    title: field.title,
-    ...field.description === void 0 ? {} : { description: field.description },
-    ...field.translationKey === void 0 ? {} : { translationKey: field.translationKey },
-    required: field.required,
-    ...field.displayCondition === void 0 ? {} : { displayCondition: field.displayCondition }
-  };
-}
-function normalizeField(field, type, newOptionLabel) {
-  const base = baseField(field, type);
-  if (type === "text" || type === "textarea") return { ...base, type };
-  if (type === "number") return { ...base, type };
-  if (type === "rating") return { ...base, type, min: 1, max: 5 };
-  if (type === "checkbox") return { ...base, type };
-  const options = "options" in field && field.options.length > 0 ? field.options : [{ id: createUniqueId("opt", /* @__PURE__ */ new Set()), label: newOptionLabel }];
-  return { ...base, type, options };
-}
 function defaultConditionValue(field) {
   if (field.type === "checkbox") return true;
   if (field.type === "number" || field.type === "rating") return field.min ?? 1;
@@ -526,30 +734,6 @@ function conditionOperators(field) {
   }
   return ["equals", "not_equals", "not_empty"];
 }
-function withoutDisplayCondition(field) {
-  const { displayCondition: _displayCondition, ...rest } = field;
-  return rest;
-}
-function sanitizeBuilderSchema(schema) {
-  const sanitized = (0, import_core2.sanitizeSchema)(schema);
-  const indexById = new Map(sanitized.fields.map((field, index) => [field.id, index]));
-  const fields = sanitized.fields.map((field, index) => {
-    const sourceId = field.displayCondition?.questionId;
-    if (sourceId === void 0) return field;
-    const sourceIndex = indexById.get(sourceId);
-    return sourceIndex !== void 0 && sourceIndex < index ? field : withoutDisplayCondition(field);
-  });
-  return {
-    ...sanitized,
-    fields,
-    ...sanitized.pages === void 0 ? {} : {
-      pages: sanitized.pages.map((page) => ({
-        ...page,
-        questionIds: fields.filter((field) => page.questionIds.includes(field.id)).map((field) => field.id)
-      }))
-    }
-  };
-}
 function conditionWithValue(questionId, operator, value) {
   return operator === "not_empty" ? { questionId, operator } : { questionId, operator, value };
 }
@@ -591,20 +775,36 @@ function ConditionValueEditor({
     }
   );
 }
+function resolveInitialFieldType(defaultType, allowedTypes) {
+  if (defaultType !== void 0 && (allowedTypes === void 0 || allowedTypes.includes(defaultType))) {
+    return defaultType;
+  }
+  if (allowedTypes !== void 0 && allowedTypes.length > 0) return allowedTypes[0] ?? null;
+  if (allowedTypes === void 0 || allowedTypes.includes("text")) return "text";
+  return null;
+}
 function FormBuilder({
   schema,
   onChange,
   locale = "en",
   translator,
   translationAdapter,
+  translationOptions,
+  onTranslationReport,
   policy,
-  idFactory
+  idFactory,
+  factories,
+  className = "",
+  defaultFieldType,
+  onActionError,
+  createManualTranslationMetadata
 }) {
   const headless = useFormBuilder({
     schema,
     onChange,
     ...policy === void 0 ? {} : { policy },
-    ...idFactory === void 0 ? {} : { idFactory }
+    ...idFactory === void 0 ? {} : { idFactory },
+    ...factories === void 0 ? {} : { factories }
   });
   const [newPageQuestionId, setNewPageQuestionId] = (0, import_react2.useState)("");
   const [newLocale, setNewLocale] = (0, import_react2.useState)("");
@@ -615,48 +815,40 @@ function FormBuilder({
     const translated = translator?.translate(key, locale, params);
     return translated === void 0 ? interpolate(BUILDER_DEFAULTS[key] ?? key, params) : translated;
   };
-  const emitSchema = (candidate) => onChange(sanitizeBuilderSchema(candidate));
-  const updateField = headless.updateField;
-  const changeType = (fieldId, type) => {
-    emitSchema({
-      ...schema,
-      fields: schema.fields.map((field) => {
-        if (field.id === fieldId) {
-          return normalizeField(field, type, translate("builder.newOptionLabel", { index: 1 }));
-        }
-        if (field.displayCondition?.questionId === fieldId) {
-          const { displayCondition: _condition, ...withoutCondition } = field;
-          return withoutCondition;
-        }
-        return field;
-      })
-    });
+  const executeAction = (result, context) => {
+    if (!result.success) onActionError?.(result.error, context);
+    return result;
   };
-  const removeField = headless.removeField;
+  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), {
+    action: "changeFieldType",
+    targetId: fieldId,
+    params: { type }
+  });
+  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;
-    if (target < 0 || target >= schema.fields.length) return;
-    const fields = [...schema.fields];
-    const current = fields[index];
-    const other = fields[target];
-    if (current === void 0 || other === void 0) return;
-    fields[index] = other;
-    fields[target] = current;
-    emitSchema({ ...schema, fields });
+    const field = schema.fields[index];
+    if (field !== void 0) {
+      executeAction(headless.moveField(field.id, target), {
+        action: "moveField",
+        targetId: field.id,
+        params: { targetIndex: target }
+      });
+    }
+  };
+  const addField = () => {
+    if (initialFieldType === null) return;
+    executeAction(headless.addField(initialFieldType), { action: "addField" });
   };
-  const addField = () => headless.addField("text");
   const enablePages = () => {
-    if (schema.pages !== void 0) return;
-    emitSchema({
-      ...schema,
-      pages: [
-        {
-          id: createUniqueId("page", /* @__PURE__ */ new Set()),
-          title: translate("builder.newPage"),
-          questionIds: schema.fields.map((field) => field.id)
-        }
-      ]
-    });
+    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 : []) ?? [];
@@ -667,73 +859,42 @@ function FormBuilder({
     }
     const questionId = movablePageQuestions.includes(newPageQuestionId) ? newPageQuestionId : movablePageQuestions[0];
     if (questionId === void 0) return;
-    const pageId = createUniqueId("page", new Set(schema.pages.map((page) => page.id)));
-    emitSchema({
-      ...schema,
-      pages: [
-        ...schema.pages.map((page) => ({
-          ...page,
-          questionIds: page.questionIds.filter((id) => id !== questionId)
-        })),
-        { id: pageId, title: translate("builder.newPage"), questionIds: [questionId] }
-      ]
+    executeAction(headless.addPage(questionId), {
+      action: "addPage",
+      targetId: questionId,
+      params: { questionId }
     });
     setNewPageQuestionId("");
   };
   const removePage = (pageIndex) => {
-    if (schema.pages === void 0) return;
-    const removed = schema.pages[pageIndex];
-    if (removed === void 0) return;
-    if (schema.pages.length === 1) {
-      const { pages: _pages, ...singlePage } = schema;
-      emitSchema(singlePage);
-      return;
-    }
-    const targetIndex = pageIndex === 0 ? 1 : pageIndex - 1;
-    emitSchema({
-      ...schema,
-      pages: schema.pages.map(
-        (page, index) => index === targetIndex ? { ...page, questionIds: [...page.questionIds, ...removed.questionIds] } : page
-      ).filter((_page, index) => index !== pageIndex)
-    });
+    const page = schema.pages?.[pageIndex];
+    if (page !== void 0) executeAction(headless.removePage(page.id), { action: "removePage", targetId: page.id });
   };
   const movePage = (pageIndex, offset) => {
-    if (schema.pages === void 0) return;
     const target = pageIndex + offset;
-    if (target < 0 || target >= schema.pages.length) return;
-    const pages = [...schema.pages];
-    const current = pages[pageIndex];
-    const other = pages[target];
-    if (current === void 0 || other === void 0) return;
-    pages[pageIndex] = other;
-    pages[target] = current;
-    emitSchema({ ...schema, pages });
+    const page = schema.pages?.[pageIndex];
+    if (page !== void 0) {
+      executeAction(headless.movePage(page.id, target), {
+        action: "movePage",
+        targetId: page.id,
+        params: { targetIndex: target }
+      });
+    }
   };
   const updatePage = (pageId, update) => {
-    if (schema.pages === void 0) return;
-    emitSchema({ ...schema, pages: schema.pages.map((page) => page.id === pageId ? update(page) : page) });
+    headless.updatePage(pageId, update);
   };
   const assignFieldToPage = (fieldId, pageId) => {
-    if (schema.pages === void 0) return;
-    emitSchema({
-      ...schema,
-      pages: schema.pages.map((page) => ({
-        ...page,
-        questionIds: page.id === pageId ? schema.fields.filter((field) => page.questionIds.includes(field.id) || field.id === fieldId).map((field) => field.id) : page.questionIds.filter((id) => id !== fieldId)
-      })).filter((page) => page.questionIds.length > 0)
+    executeAction(headless.assignFieldToPage(fieldId, pageId), {
+      action: "assignFieldToPage",
+      targetId: fieldId,
+      params: { pageId }
     });
   };
   const addLocale = () => {
     const normalized = newLocale.trim();
     if (normalized.length === 0) return;
-    const supportedLocales = [
-      .../* @__PURE__ */ new Set([
-        ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
-        ...schema.supportedLocales ?? [],
-        normalized
-      ])
-    ];
-    emitSchema({ ...schema, supportedLocales });
+    headless.addLocale(normalized);
     setEditingLocale(normalized);
     setNewLocale("");
   };
@@ -743,48 +904,377 @@ function FormBuilder({
     setTranslationError(null);
     try {
       const populated = await (0, import_core2.populateSchemaTranslations)(schema, [editingLocale], translationAdapter, {
-        overwrite: "all"
+        overwrite: "missing-only",
+        ...translationOptions
       });
       onChange(populated.schema);
+      onTranslationReport?.(populated.report);
     } catch (cause) {
       setTranslationError(cause instanceof Error ? cause.message : String(cause));
     } finally {
       setIsTranslating(false);
     }
   };
-  const updateFormTranslation = (key, value) => {
-    if (editingLocale.length === 0) return;
-    const current = schema.translations?.[editingLocale];
-    const next = key === "title" ? value.length === 0 ? { description: current?.description } : { ...current, title: value } : value.length === 0 ? { title: current?.title } : { ...current, description: value };
-    emitSchema({
-      ...schema,
-      translations: {
-        ...schema.translations,
-        [editingLocale]: {
-          ...next.title === void 0 ? {} : { title: next.title },
-          ...next.description === void 0 ? {} : { description: next.description }
-        }
+  const updateManualTranslation = (context) => {
+    const metadata = createManualTranslationMetadata?.(context);
+    const target = context.kind === "form" ? { kind: "form" } : { kind: context.kind, id: context.nodeId };
+    executeAction(
+      headless.setLocaleTranslation(
+        context.locale,
+        target,
+        context.property,
+        context.translatedText,
+        metadata === void 0 ? void 0 : { metadata }
+      ),
+      {
+        action: "setLocaleTranslation",
+        targetId: context.nodeId,
+        params: { locale: context.locale, kind: context.kind, property: context.property }
       }
+    );
+  };
+  const updateFormTranslation = (property, translatedText) => {
+    if (editingLocale.length === 0) return;
+    updateManualTranslation({
+      locale: editingLocale,
+      kind: "form",
+      nodeId: schema.id,
+      property,
+      sourceText: schema[property] ?? "",
+      translatedText,
+      ...schema.translationMetadata?.[editingLocale]?.[property] === void 0 ? {} : { existingTranslationMetadata: schema.translationMetadata[editingLocale]?.[property] }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "form-engine-builder", "aria-label": translate("builder.formBuilder"), children: [
-    /* @__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 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: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", { children: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}` }),
+  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), {
+    action: "removeOption",
+    targetId: optionId,
+    params: { fieldId }
+  });
+  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), {
+    action: "setDisplayCondition",
+    targetId: fieldId,
+    ...condition === void 0 ? {} : { params: { condition } }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "section",
+    {
+      className: `form-engine-builder ${className}`.trim(),
+      "aria-label": translate("builder.formBuilder"),
+      onClickCapture: (event) => {
+        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 !== "addOption") return;
+        const fieldId = actionTarget.dataset.targetId;
+        const field = schema.fields.find((candidate) => candidate.id === fieldId);
+        if (fieldId !== void 0 && field !== void 0 && "options" in field && policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField) {
+          addOption(fieldId);
+        }
+      },
+      children: [
+        /* @__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 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: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", { children: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}` }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__toolbar", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: pageIndex === 0,
+                      "aria-label": translate("builder.moveUp", { title: page.title ?? page.id }),
+                      onClick: () => movePage(pageIndex, -1),
+                      children: "\u2191"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: pageIndex === (schema.pages?.length ?? 0) - 1,
+                      "aria-label": translate("builder.moveDown", { title: page.title ?? page.id }),
+                      onClick: () => movePage(pageIndex, 1),
+                      children: "\u2193"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => removePage(pageIndex), children: translate("builder.deleteAction") })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__grid", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+                    translate("builder.pageTitle"),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "input",
+                      {
+                        value: page.title ?? "",
+                        onChange: (event) => {
+                          const value = event.currentTarget.value;
+                          updatePage(page.id, (current) => {
+                            if (value.length > 0) return { ...current, title: value };
+                            const { title: _title, ...withoutTitle } = current;
+                            return withoutTitle;
+                          });
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+                    translate("builder.pageDescription"),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "input",
+                      {
+                        value: page.description ?? "",
+                        onChange: (event) => {
+                          const value = event.currentTarget.value;
+                          updatePage(page.id, (current) => {
+                            if (value.length > 0) return { ...current, description: value };
+                            const { description: _description, ...withoutDescription } = current;
+                            return withoutDescription;
+                          });
+                        }
+                      }
+                    )
+                  ] })
+                ] }),
+                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: [
+                      translate("builder.pageTitle"),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "input",
+                        {
+                          value: page.translations?.[editingLocale]?.title ?? "",
+                          onChange: (event) => updateManualTranslation({
+                            locale: editingLocale,
+                            kind: "page",
+                            nodeId: page.id,
+                            property: "title",
+                            sourceText: page.title ?? "",
+                            translatedText: event.currentTarget.value,
+                            ...page.translationMetadata?.[editingLocale]?.title === void 0 ? {} : {
+                              existingTranslationMetadata: page.translationMetadata[editingLocale]?.title
+                            }
+                          })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+                      translate("builder.pageDescription"),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "input",
+                        {
+                          value: page.translations?.[editingLocale]?.description ?? "",
+                          onChange: (event) => updateManualTranslation({
+                            locale: editingLocale,
+                            kind: "page",
+                            nodeId: page.id,
+                            property: "description",
+                            sourceText: page.description ?? "",
+                            translatedText: event.currentTarget.value,
+                            ...page.translationMetadata?.[editingLocale]?.description === void 0 ? {} : {
+                              existingTranslationMetadata: page.translationMetadata[editingLocale]?.description
+                            }
+                          })
+                        }
+                      )
+                    ] })
+                  ] })
+                ] }),
+                /* @__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)(
+                      "select",
+                      {
+                        value: page.displayCondition?.questionId ?? "",
+                        onChange: (event) => {
+                          const selected = schema.fields.find((field) => field.id === event.currentTarget.value);
+                          updatePage(page.id, (current) => {
+                            if (selected === void 0) {
+                              const { displayCondition: _condition, ...withoutCondition } = current;
+                              return withoutCondition;
+                            }
+                            return {
+                              ...current,
+                              displayCondition: conditionWithValue(
+                                selected.id,
+                                conditionOperators(selected)[0] ?? "not_empty",
+                                defaultConditionValue(selected)
+                              )
+                            };
+                          });
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: translate("builder.alwaysVisible") }),
+                          availableSources.map((field) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: field.id, children: field.title }, field.id))
+                        ]
+                      }
+                    )
+                  ] }),
+                  page.displayCondition !== void 0 && source !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "select",
+                      {
+                        "aria-label": translate("builder.conditionOperator"),
+                        value: page.displayCondition.operator,
+                        onChange: (event) => {
+                          const operator = event.currentTarget.value;
+                          updatePage(page.id, (current) => ({
+                            ...current,
+                            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))
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      ConditionValueEditor,
+                      {
+                        source,
+                        condition: page.displayCondition,
+                        onChange: (condition) => updatePage(page.id, (current) => ({ ...current, displayCondition: condition })),
+                        translate
+                      }
+                    )
+                  ] }) : null
+                ] })
+              ] }, page.id);
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__page-add", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+                translate("builder.pageQuestion"),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "select",
+                  {
+                    value: newPageQuestionId,
+                    disabled: movablePageQuestions.length === 0,
+                    onChange: (event) => setNewPageQuestionId(event.currentTarget.value),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "\u2014" }),
+                      schema.fields.filter((field) => movablePageQuestions.includes(field.id)).map((field) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: field.id, children: field.title }, field.id))
+                    ]
+                  }
+                )
+              ] }),
+              /* @__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: [
+          /* @__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"),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                value: schema.completionMessage ?? "",
+                onChange: (event) => setSourceText({ kind: "form" }, "completionMessage", event.currentTarget.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__grid", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+              translate("builder.defaultLocale"),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  value: schema.defaultLocale ?? "",
+                  onChange: (event) => headless.setDefaultLocale(event.currentTarget.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+              translate("builder.addLocale"),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { value: newLocale, onChange: (event) => setNewLocale(event.currentTarget.value) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", 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: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "\u2014" }),
+                (schema.supportedLocales ?? []).filter((item) => item !== schema.defaultLocale).map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: item, children: item }, item))
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                disabled: translationAdapter === void 0 || editingLocale.length === 0 || isTranslating,
+                onClick: () => void translateAll(),
+                children: translate("builder.autoTranslate")
+              }
+            )
+          ] }),
+          translationAdapter === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: translate("builder.translationUnavailable") }) : null,
+          translationError === null ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "form-engine-builder__error", children: translationError }),
+          editingLocale.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__grid", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+              translate("builder.questionTitle"),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  value: schema.translations?.[editingLocale]?.title ?? "",
+                  onChange: (event) => updateFormTranslation("title", event.currentTarget.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+              translate("builder.pageDescription"),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  value: schema.translations?.[editingLocale]?.description ?? "",
+                  onChange: (event) => updateFormTranslation("description", event.currentTarget.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+              translate("builder.completionMessage"),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  value: schema.translations?.[editingLocale]?.completionMessage ?? "",
+                  onChange: (event) => updateFormTranslation("completionMessage", event.currentTarget.value)
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__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);
+          const availableSources = schema.fields.slice(0, index);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "form-engine-builder__question", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", { children: field.title }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__toolbar", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "button",
                 {
                   type: "button",
-                  disabled: pageIndex === 0,
-                  "aria-label": translate("builder.moveUp", { title: page.title ?? page.id }),
-                  onClick: () => movePage(pageIndex, -1),
+                  disabled: index === 0,
+                  onClick: () => moveField(index, -1),
+                  "aria-label": translate("builder.moveUp", { title: field.title }),
                   children: "\u2191"
                 }
               ),
@@ -792,72 +1282,94 @@ function FormBuilder({
                 "button",
                 {
                   type: "button",
-                  disabled: pageIndex === (schema.pages?.length ?? 0) - 1,
-                  "aria-label": translate("builder.moveDown", { title: page.title ?? page.id }),
-                  onClick: () => movePage(pageIndex, 1),
+                  disabled: index === schema.fields.length - 1,
+                  onClick: () => moveField(index, 1),
+                  "aria-label": translate("builder.moveDown", { title: field.title }),
                   children: "\u2193"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => removePage(pageIndex), children: translate("builder.deleteAction") })
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  disabled: schema.fields.length === 1,
+                  onClick: () => removeField(field.id),
+                  "aria-label": translate("builder.delete", { title: field.title }),
+                  children: translate("builder.deleteAction")
+                }
+              )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__grid", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-                translate("builder.pageTitle"),
+                translate("builder.questionTitle"),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "input",
                   {
-                    value: page.title ?? "",
-                    onChange: (event) => {
-                      const value = event.currentTarget.value;
-                      updatePage(page.id, (current) => {
-                        if (value.length > 0) return { ...current, title: value };
-                        const { title: _title, ...withoutTitle } = current;
-                        return withoutTitle;
-                      });
-                    }
+                    value: field.title,
+                    placeholder: translate("builder.questionTitlePlaceholder"),
+                    onChange: (event) => updateField(field.id, (current) => ({
+                      ...current,
+                      title: event.currentTarget.value.trim().length === 0 ? current.title : event.currentTarget.value
+                    }))
                   }
                 )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-                translate("builder.pageDescription"),
+                translate("builder.type"),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "input",
+                  "select",
                   {
-                    value: page.description ?? "",
-                    onChange: (event) => {
-                      const value = event.currentTarget.value;
-                      updatePage(page.id, (current) => {
-                        if (value.length > 0) return { ...current, description: value };
-                        const { description: _description, ...withoutDescription } = current;
-                        return withoutDescription;
-                      });
-                    }
+                    value: field.type,
+                    onChange: (event) => changeType(field.id, event.currentTarget.value),
+                    children: FIELD_TYPES.filter(
+                      (type) => policy?.allowedFieldTypes === void 0 || policy.allowedFieldTypes.includes(type)
+                    ).map((type) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: type, children: translate(fieldTypeKey(type)) }, type))
                   }
                 )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "form-engine-builder__check", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: field.required === true,
+                    onChange: (event) => updateField(field.id, (current) => ({ ...current, required: event.currentTarget.checked }))
+                  }
+                ),
+                translate("builder.required")
               ] })
             ] }),
+            schema.pages === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+              translate("builder.questionPage"),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "select",
+                {
+                  value: pageForField(field.id)?.id ?? "",
+                  onChange: (event) => assignFieldToPage(field.id, event.currentTarget.value),
+                  children: schema.pages.map((page, pageIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: page.id, children: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}` }, page.id))
+                }
+              )
+            ] }),
             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: [
-                  translate("builder.pageTitle"),
+                  translate("builder.questionTitle"),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     "input",
                     {
-                      value: page.translations?.[editingLocale]?.title ?? "",
-                      onChange: (event) => {
-                        const value = event.currentTarget.value;
-                        updatePage(page.id, (current) => ({
-                          ...current,
-                          translations: {
-                            ...current.translations,
-                            [editingLocale]: {
-                              ...value.length === 0 ? {} : { title: value },
-                              ...current.translations?.[editingLocale]?.description === void 0 ? {} : { description: current.translations[editingLocale]?.description }
-                            }
-                          }
-                        }));
-                      }
+                      value: field.translations?.[editingLocale]?.title ?? "",
+                      onChange: (event) => updateManualTranslation({
+                        locale: editingLocale,
+                        kind: "field",
+                        nodeId: field.id,
+                        property: "title",
+                        sourceText: field.title,
+                        translatedText: event.currentTarget.value,
+                        ...field.translationMetadata?.[editingLocale]?.title === void 0 ? {} : {
+                          existingTranslationMetadata: field.translationMetadata[editingLocale]?.title
+                        }
+                      })
                     }
                   )
                 ] }),
@@ -866,68 +1378,175 @@ function FormBuilder({
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     "input",
                     {
-                      value: page.translations?.[editingLocale]?.description ?? "",
-                      onChange: (event) => {
-                        const value = event.currentTarget.value;
-                        updatePage(page.id, (current) => ({
-                          ...current,
-                          translations: {
-                            ...current.translations,
-                            [editingLocale]: {
-                              ...current.translations?.[editingLocale]?.title === void 0 ? {} : { title: current.translations[editingLocale]?.title },
-                              ...value.length === 0 ? {} : { description: value }
-                            }
-                          }
-                        }));
-                      }
+                      value: field.translations?.[editingLocale]?.description ?? "",
+                      onChange: (event) => updateManualTranslation({
+                        locale: editingLocale,
+                        kind: "field",
+                        nodeId: field.id,
+                        property: "description",
+                        sourceText: field.description ?? "",
+                        translatedText: event.currentTarget.value,
+                        ...field.translationMetadata?.[editingLocale]?.description === void 0 ? {} : {
+                          existingTranslationMetadata: field.translationMetadata[editingLocale]?.description
+                        }
+                      })
                     }
                   )
                 ] })
-              ] })
+              ] }),
+              "options" in field ? field.options.map((option, optionIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+                translate("builder.optionLabel", { index: optionIndex + 1 }),
+                " (",
+                editingLocale,
+                ")",
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    value: option.translations?.[editingLocale] ?? "",
+                    onChange: (event) => updateManualTranslation({
+                      locale: editingLocale,
+                      kind: "option",
+                      nodeId: option.id,
+                      property: "label",
+                      sourceText: option.label,
+                      translatedText: event.currentTarget.value,
+                      ...option.translationMetadata?.[editingLocale]?.label === void 0 ? {} : {
+                        existingTranslationMetadata: option.translationMetadata[editingLocale]?.label
+                      }
+                    })
+                  }
+                )
+              ] }, option.id)) : null
             ] }),
+            field.type === "rating" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__grid", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+                translate("builder.minimum"),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    type: "number",
+                    value: field.min ?? 1,
+                    onChange: (event) => {
+                      const min = event.currentTarget.valueAsNumber;
+                      if (!Number.isInteger(min)) return;
+                      updateField(
+                        field.id,
+                        (current) => current.type === "rating" ? { ...current, min, max: Math.max(min, current.max ?? 5) } : current
+                      );
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+                translate("builder.maximum"),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    type: "number",
+                    value: field.max ?? 5,
+                    onChange: (event) => {
+                      const max = event.currentTarget.valueAsNumber;
+                      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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__options", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: translate("builder.options") }),
+              field.options.map((option, optionIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__option", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    "aria-label": translate("builder.optionLabel", { index: optionIndex + 1 }),
+                    value: option.label,
+                    placeholder: translate("builder.optionLabelPlaceholder"),
+                    onChange: (event) => event.currentTarget.value.trim().length === 0 ? void 0 : updateOption(field.id, option.id, event.currentTarget.value)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: optionIndex === 0,
+                    "aria-label": translate("builder.moveUp", { title: option.label }),
+                    onClick: () => moveOption(field.id, option.id, optionIndex - 1),
+                    children: "\u2191"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: optionIndex === field.options.length - 1,
+                    "aria-label": translate("builder.moveDown", { title: option.label }),
+                    onClick: () => moveOption(field.id, option.id, optionIndex + 1),
+                    children: "\u2193"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: field.options.length === 1,
+                    onClick: () => removeOption(field.id, option.id),
+                    children: translate("builder.remove")
+                  }
+                )
+              ] }, option.id)),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "data-builder-action": "addOption",
+                  "data-target-id": field.id,
+                  disabled: policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
+                  onClick: () => addOption(field.id),
+                  children: translate("builder.addOption")
+                }
+              )
+            ] }) : null,
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__condition", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-                translate("builder.pageCondition"),
+                translate("builder.displayCondition"),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                   "select",
                   {
-                    value: page.displayCondition?.questionId ?? "",
+                    value: condition?.questionId ?? "",
                     onChange: (event) => {
-                      const selected = schema.fields.find((field) => field.id === event.currentTarget.value);
-                      updatePage(page.id, (current) => {
-                        if (selected === void 0) {
-                          const { displayCondition: _condition, ...withoutCondition } = current;
-                          return withoutCondition;
-                        }
-                        return {
-                          ...current,
-                          displayCondition: conditionWithValue(
-                            selected.id,
-                            conditionOperators(selected)[0] ?? "not_empty",
-                            defaultConditionValue(selected)
-                          )
-                        };
-                      });
+                      const selected = schema.fields.find((item) => item.id === event.currentTarget.value);
+                      setDisplayCondition(
+                        field.id,
+                        selected === void 0 ? void 0 : conditionWithValue(
+                          selected.id,
+                          conditionOperators(selected)[0] ?? "not_empty",
+                          defaultConditionValue(selected)
+                        )
+                      );
                     },
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: translate("builder.alwaysVisible") }),
-                      availableSources.map((field) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: field.id, children: field.title }, field.id))
+                      availableSources.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: candidate.id, children: candidate.title }, candidate.id))
                     ]
                   }
                 )
               ] }),
-              page.displayCondition !== void 0 && source !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              condition !== void 0 && source !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "select",
                   {
                     "aria-label": translate("builder.conditionOperator"),
-                    value: page.displayCondition.operator,
+                    value: condition.operator,
                     onChange: (event) => {
                       const operator = event.currentTarget.value;
-                      updatePage(page.id, (current) => ({
-                        ...current,
-                        displayCondition: conditionWithValue(source.id, operator, defaultConditionValue(source))
-                      }));
+                      setDisplayCondition(
+                        field.id,
+                        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))
                   }
@@ -936,422 +1555,29 @@ function FormBuilder({
                   ConditionValueEditor,
                   {
                     source,
-                    condition: page.displayCondition,
-                    onChange: (condition) => updatePage(page.id, (current) => ({ ...current, displayCondition: condition })),
+                    condition,
+                    onChange: (next) => setDisplayCondition(field.id, next),
                     translate
                   }
                 )
               ] }) : null
             ] })
-          ] }, page.id);
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__page-add", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-            translate("builder.pageQuestion"),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              "select",
-              {
-                value: newPageQuestionId,
-                disabled: movablePageQuestions.length === 0,
-                onChange: (event) => setNewPageQuestionId(event.currentTarget.value),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "\u2014" }),
-                  schema.fields.filter((field) => movablePageQuestions.includes(field.id)).map((field) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: field.id, children: field.title }, field.id))
-                ]
-              }
-            )
-          ] }),
-          /* @__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: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { id: "builder-localization-heading", children: translate("builder.localization") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__grid", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-          translate("builder.defaultLocale"),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "input",
-            {
-              value: schema.defaultLocale ?? "",
-              onChange: (event) => {
-                const value = event.currentTarget.value.trim();
-                emitSchema(
-                  value.length === 0 ? schema : {
-                    ...schema,
-                    defaultLocale: value,
-                    supportedLocales: [.../* @__PURE__ */ new Set([value, ...schema.supportedLocales ?? []])]
-                  }
-                );
-              }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-          translate("builder.addLocale"),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { value: newLocale, onChange: (event) => setNewLocale(event.currentTarget.value) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", 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: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "\u2014" }),
-            (schema.supportedLocales ?? []).filter((item) => item !== schema.defaultLocale).map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: item, children: item }, item))
-          ] })
-        ] }),
+          ] }, field.id);
+        }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "button",
           {
+            className: "form-engine-builder__add",
             type: "button",
-            disabled: translationAdapter === void 0 || editingLocale.length === 0 || isTranslating,
-            onClick: () => void translateAll(),
-            children: translate("builder.autoTranslate")
+            "data-builder-action": "addField",
+            disabled: initialFieldType === null || maxFieldsReached,
+            onClick: addField,
+            children: translate("builder.addQuestion")
           }
         )
-      ] }),
-      translationAdapter === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: translate("builder.translationUnavailable") }) : null,
-      translationError === null ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "form-engine-builder__error", children: translationError }),
-      editingLocale.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__grid", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-          translate("builder.questionTitle"),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "input",
-            {
-              value: schema.translations?.[editingLocale]?.title ?? "",
-              onChange: (event) => updateFormTranslation("title", event.currentTarget.value)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-          translate("builder.pageDescription"),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "input",
-            {
-              value: schema.translations?.[editingLocale]?.description ?? "",
-              onChange: (event) => updateFormTranslation("description", event.currentTarget.value)
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    /* @__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);
-      const availableSources = schema.fields.slice(0, index);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "form-engine-builder__question", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", { children: field.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__toolbar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              type: "button",
-              disabled: index === 0,
-              onClick: () => moveField(index, -1),
-              "aria-label": translate("builder.moveUp", { title: field.title }),
-              children: "\u2191"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              type: "button",
-              disabled: index === schema.fields.length - 1,
-              onClick: () => moveField(index, 1),
-              "aria-label": translate("builder.moveDown", { title: field.title }),
-              children: "\u2193"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              type: "button",
-              disabled: schema.fields.length === 1,
-              onClick: () => removeField(field.id),
-              "aria-label": translate("builder.delete", { title: field.title }),
-              children: translate("builder.deleteAction")
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__grid", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-            translate("builder.questionTitle"),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "input",
-              {
-                value: field.title,
-                placeholder: translate("builder.questionTitlePlaceholder"),
-                onChange: (event) => updateField(field.id, (current) => ({
-                  ...current,
-                  title: event.currentTarget.value.trim().length === 0 ? current.title : event.currentTarget.value
-                }))
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-            translate("builder.type"),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "select",
-              {
-                value: field.type,
-                onChange: (event) => changeType(field.id, event.currentTarget.value),
-                children: FIELD_TYPES.filter(
-                  (type) => policy?.allowedFieldTypes === void 0 || policy.allowedFieldTypes.includes(type)
-                ).map((type) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: type, children: translate(fieldTypeKey(type)) }, type))
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "form-engine-builder__check", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "input",
-              {
-                type: "checkbox",
-                checked: field.required === true,
-                onChange: (event) => updateField(field.id, (current) => ({ ...current, required: event.currentTarget.checked }))
-              }
-            ),
-            translate("builder.required")
-          ] })
-        ] }),
-        schema.pages === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-          translate("builder.questionPage"),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "select",
-            {
-              value: pageForField(field.id)?.id ?? "",
-              onChange: (event) => assignFieldToPage(field.id, event.currentTarget.value),
-              children: schema.pages.map((page, pageIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: page.id, children: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}` }, page.id))
-            }
-          )
-        ] }),
-        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: [
-              translate("builder.questionTitle"),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "input",
-                {
-                  value: field.translations?.[editingLocale]?.title ?? "",
-                  onChange: (event) => {
-                    const value = event.currentTarget.value;
-                    updateField(field.id, (current) => ({
-                      ...current,
-                      translations: {
-                        ...current.translations,
-                        [editingLocale]: {
-                          ...value.length === 0 ? {} : { title: value },
-                          ...current.translations?.[editingLocale]?.description === void 0 ? {} : { description: current.translations[editingLocale]?.description }
-                        }
-                      }
-                    }));
-                  }
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-              translate("builder.pageDescription"),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "input",
-                {
-                  value: field.translations?.[editingLocale]?.description ?? "",
-                  onChange: (event) => {
-                    const value = event.currentTarget.value;
-                    updateField(field.id, (current) => ({
-                      ...current,
-                      translations: {
-                        ...current.translations,
-                        [editingLocale]: {
-                          ...current.translations?.[editingLocale]?.title === void 0 ? {} : { title: current.translations[editingLocale]?.title },
-                          ...value.length === 0 ? {} : { description: value }
-                        }
-                      }
-                    }));
-                  }
-                }
-              )
-            ] })
-          ] }),
-          "options" in field ? field.options.map((option, optionIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-            translate("builder.optionLabel", { index: optionIndex + 1 }),
-            " (",
-            editingLocale,
-            ")",
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "input",
-              {
-                value: option.translations?.[editingLocale] ?? "",
-                onChange: (event) => {
-                  const value = event.currentTarget.value;
-                  updateField(field.id, (current) => {
-                    if (!("options" in current)) return current;
-                    return {
-                      ...current,
-                      options: current.options.map(
-                        (candidate) => candidate.id === option.id ? {
-                          ...candidate,
-                          translations: Object.fromEntries([
-                            ...Object.entries(candidate.translations ?? {}).filter(
-                              ([localeKey]) => localeKey !== editingLocale
-                            ),
-                            ...value.length === 0 ? [] : [[editingLocale, value]]
-                          ])
-                        } : candidate
-                      )
-                    };
-                  });
-                }
-              }
-            )
-          ] }, option.id)) : null
-        ] }),
-        field.type === "rating" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__grid", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-            translate("builder.minimum"),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "input",
-              {
-                type: "number",
-                value: field.min ?? 1,
-                onChange: (event) => {
-                  const min = event.currentTarget.valueAsNumber;
-                  if (!Number.isInteger(min)) return;
-                  updateField(
-                    field.id,
-                    (current) => current.type === "rating" ? { ...current, min, max: Math.max(min, current.max ?? 5) } : current
-                  );
-                }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-            translate("builder.maximum"),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "input",
-              {
-                type: "number",
-                value: field.max ?? 5,
-                onChange: (event) => {
-                  const max = event.currentTarget.valueAsNumber;
-                  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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__options", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: translate("builder.options") }),
-          field.options.map((option, optionIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-engine-builder__option", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "input",
-              {
-                "aria-label": translate("builder.optionLabel", { index: optionIndex + 1 }),
-                value: option.label,
-                placeholder: translate("builder.optionLabelPlaceholder"),
-                onChange: (event) => updateField(field.id, (current) => {
-                  if (!("options" in current)) return current;
-                  const label = event.currentTarget.value;
-                  if (label.trim().length === 0) return current;
-                  return {
-                    ...current,
-                    options: current.options.map(
-                      (item, itemIndex) => itemIndex === optionIndex ? { ...item, label } : item
-                    )
-                  };
-                })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
-              {
-                type: "button",
-                disabled: field.options.length === 1,
-                onClick: () => headless.removeOption(field.id, option.id),
-                children: translate("builder.remove")
-              }
-            )
-          ] }, option.id)),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              type: "button",
-              disabled: policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
-              onClick: () => headless.addOption(field.id),
-              children: translate("builder.addOption")
-            }
-          )
-        ] }) : null,
-        /* @__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)(
-              "select",
-              {
-                value: condition?.questionId ?? "",
-                onChange: (event) => {
-                  const selected = schema.fields.find((item) => item.id === event.currentTarget.value);
-                  updateField(field.id, (current) => {
-                    if (selected === void 0) {
-                      const { displayCondition: _condition, ...withoutCondition } = current;
-                      return withoutCondition;
-                    }
-                    const operator = conditionOperators(selected)[0] ?? "not_empty";
-                    return {
-                      ...current,
-                      displayCondition: conditionWithValue(selected.id, operator, defaultConditionValue(selected))
-                    };
-                  });
-                },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: translate("builder.alwaysVisible") }),
-                  availableSources.map((candidate) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: candidate.id, children: candidate.title }, candidate.id))
-                ]
-              }
-            )
-          ] }),
-          condition !== void 0 && source !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "select",
-              {
-                "aria-label": translate("builder.conditionOperator"),
-                value: condition.operator,
-                onChange: (event) => {
-                  const operator = event.currentTarget.value;
-                  updateField(field.id, (current) => ({
-                    ...current,
-                    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))
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              ConditionValueEditor,
-              {
-                source,
-                condition,
-                onChange: (next) => updateField(field.id, (current) => ({ ...current, displayCondition: next })),
-                translate
-              }
-            )
-          ] }) : null
-        ] })
-      ] }, field.id);
-    }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        className: "form-engine-builder__add",
-        type: "button",
-        disabled: policy?.maxFields !== void 0 && schema.fields.length >= policy.maxFields,
-        onClick: addField,
-        children: translate("builder.addQuestion")
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 
 // src/context.tsx
@@ -1868,8 +2094,14 @@ function ContextFormRenderer({
       ] }),
       draftRestored ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "form-draft-badge", children: form.translate("form.draftRestored") }) : null
     ] }),
-    activePage?.title === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "fe-page-title", children: activePage.title }),
-    activePage?.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "fe-page-description", children: activePage.description }),
+    activePage === void 0 ? null : slots.renderPageHeader?.({
+      page: activePage,
+      pageIndex: activeVisibleIndex,
+      totalPages: visiblePageIndexes.length
+    }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-page-header", children: [
+      activePage.title === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "fe-page-title", children: activePage.title }),
+      activePage.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "fe-page-description", children: activePage.description })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-fields", children: form.schema.fields.filter((field) => form.visibility[field.id] === true && (fieldIds === void 0 || fieldIds.has(field.id))).map((field) => {
       const error = form.errors[field.id];
       const props = {
@@ -1937,7 +2169,7 @@ function ContextFormRenderer({
       form.submitStatus === "success" ? slots.renderCompletion?.({
         message: form.schema.completionMessage ?? (successMessageKey === void 0 ? "Submitted." : form.translate(successMessageKey))
       }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "status", children: form.schema.completionMessage ?? (successMessageKey === void 0 ? "Submitted." : form.translate(successMessageKey)) }) : null,
-      form.submitStatus === "error" && form.submitError !== null && errorMessageKey !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "alert", children: form.translate(errorMessageKey) }) : null
+      form.submitStatus === "error" && form.submitError !== null ? slots.renderSubmitError?.({ error: form.submitError, onRetry: () => void submitValues() }) ?? (errorMessageKey === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "alert", children: form.translate(errorMessageKey) })) : null
     ] })
   ] });
 }
@@ -1986,6 +2218,7 @@ function FormRenderer(props) {
   FormBuilder,
   FormProvider,
   FormRenderer,
+  resolveInitialFieldType,
   useField,
   useForm,
   useFormBuilder