@form-engine-ts/react 2.9.3 → 2.9.5

package/dist/index.js

@@ -101,7 +101,7 @@ function createLocalStorageSubmissionAttemptStore(options = {}) {
 import {
   populateSchemaTranslations
 } from "@form-engine-ts/core";
-import { createContext, useContext, useState } from "react";
+import { Children, createContext, isValidElement, useContext, useState } from "react";
 
 // src/hooks/useFormBuilder.ts
 import {
@@ -1058,7 +1058,7 @@ function BuilderButton(props) {
       ...props,
       className: primitiveClassName(props.className, "feb-button", context.unstyled),
       disabled: context.readOnly || props.disabled === true,
-      readOnly: context.readOnly
+      readOnly: context.readOnly || props.readOnly === true
     }
   );
 }
@@ -1073,7 +1073,7 @@ function BuilderIconButton(props) {
       icon,
       className: primitiveClassName(props.className, "feb-icon-button", context.unstyled),
       disabled: context.readOnly || props.disabled === true,
-      readOnly: context.readOnly
+      readOnly: context.readOnly || props.readOnly === true
     }
   );
 }
@@ -1086,7 +1086,7 @@ function BuilderTextInput(props) {
       ...props,
       className: primitiveClassName(props.className, "feb-input", context.unstyled),
       disabled: context.readOnly || props.disabled === true,
-      readOnly: context.readOnly
+      readOnly: context.readOnly || props.readOnly === true
     }
   );
 }
@@ -1099,7 +1099,7 @@ function BuilderTextArea(props) {
       ...props,
       className: primitiveClassName(props.className, "feb-textarea", context.unstyled),
       disabled: context.readOnly || props.disabled === true,
-      readOnly: context.readOnly
+      readOnly: context.readOnly || props.readOnly === true
     }
   );
 }
@@ -1112,7 +1112,7 @@ function BuilderSelect(props) {
       ...props,
       className: primitiveClassName(props.className, "feb-select", context.unstyled),
       disabled: context.readOnly || props.disabled === true,
-      readOnly: context.readOnly
+      readOnly: context.readOnly || props.readOnly === true
     }
   );
 }
@@ -1125,7 +1125,7 @@ function BuilderCheckbox(props) {
       ...props,
       className: primitiveClassName(props.className, "feb-checkbox", context.unstyled),
       disabled: context.readOnly || props.disabled === true,
-      readOnly: context.readOnly
+      readOnly: context.readOnly || props.readOnly === true
     }
   );
 }
@@ -1169,6 +1169,7 @@ var BUILDER_DEFAULTS = {
   "builder.basicSettings": "Basic settings",
   "builder.formTitle": "Form title",
   "builder.formDescription": "Form description",
+  "builder.description": "Description",
   "builder.moveUp": "Move {{title}} up",
   "builder.moveDown": "Move {{title}} down",
   "builder.delete": "Delete {{title}}",
@@ -1203,12 +1204,31 @@ var BUILDER_DEFAULTS = {
   "builder.pageQuestion": "Question to move to the new page",
   "builder.questionPage": "Page",
   "builder.pageCondition": "Page display condition",
+  "builder.unassigned": "Unassigned",
   "builder.localization": "Localization",
   "builder.defaultLocale": "Default locale",
   "builder.supportedLocales": "Supported locales",
   "builder.addLocale": "Add locale",
   "builder.editLocale": "Edit locale",
   "builder.autoTranslate": "Translate all text",
+  "builder.translating": "Translating\u2026",
+  "builder.translationLocale": "Translation locale",
+  "builder.selectLocale": "Select a locale to edit translations.",
+  "builder.translation": "{{locale}} translation",
+  "builder.translatedFormTitle": "Translated form title",
+  "builder.translatedFormDescription": "Translated form description",
+  "builder.translatedCompletionMessage": "Translated completion message",
+  "builder.translatedQuestionTitle": "Translated question title",
+  "builder.translatedDescription": "Translated description",
+  "builder.actions.moveUp": "Move up",
+  "builder.actions.moveDown": "Move down",
+  "builder.actions.delete": "Delete",
+  "builder.actions.add": "Add",
+  "builder.actions.edit": "Edit",
+  "builder.actions.settings": "Settings",
+  "builder.actions.translate": "Translate",
+  "builder.actions.close": "Close",
+  "builder.actions.dragHandle": "Reorder",
   "builder.translationUnavailable": "Provide an async translation adapter to enable automatic translation.",
   "builder.fieldType.text": "Text",
   "builder.fieldType.textarea": "Textarea",
@@ -1229,12 +1249,81 @@ function interpolate(template, params) {
     (token, name) => Object.hasOwn(params, name) ? String(params[name]) : token
   );
 }
+function BuilderSectionGroup({ children }) {
+  return children;
+}
+function sectionGroupName(node) {
+  if (!isValidElement(node) || node.type !== BuilderSectionGroup) return void 0;
+  return node.props.name;
+}
+function OrderedBuilderSections({
+  order,
+  children
+}) {
+  if (order === void 0) return children;
+  const ranks = new Map(order.map((name, index) => [name, index]));
+  const groups = Children.toArray(children);
+  return groups.map((group, index) => ({ group, index, rank: ranks.get(sectionGroupName(group) ?? "questions") ?? order.length })).sort((left, right) => left.rank - right.rank || left.index - right.index).map(({ group }) => group);
+}
 function fieldTypeKey(type) {
   return `builder.fieldType.${type}`;
 }
 function operatorKey(operator) {
   return `builder.operator.${operator}`;
 }
+function manualTranslationContext(schema, locale, target, property, translatedText) {
+  if (target.kind === "form") {
+    if (property !== "title" && property !== "description" && property !== "completionMessage") return void 0;
+    return {
+      locale,
+      kind: "form",
+      nodeId: schema.id,
+      property,
+      sourceText: schema[property] ?? "",
+      translatedText,
+      ...schema.translationMetadata?.[locale]?.[property] === void 0 ? {} : { existingTranslationMetadata: schema.translationMetadata[locale]?.[property] }
+    };
+  }
+  if (target.id === void 0) return void 0;
+  if (target.kind === "field") {
+    const field = schema.fields.find((candidate) => candidate.id === target.id);
+    if (field === void 0 || property !== "title" && property !== "description") return void 0;
+    return {
+      locale,
+      kind: "field",
+      nodeId: field.id,
+      property,
+      sourceText: field[property] ?? "",
+      translatedText,
+      ...field.translationMetadata?.[locale]?.[property] === void 0 ? {} : { existingTranslationMetadata: field.translationMetadata[locale]?.[property] }
+    };
+  }
+  if (target.kind === "page") {
+    const page = schema.pages?.find((candidate) => candidate.id === target.id);
+    if (page === void 0 || property !== "title" && property !== "description") return void 0;
+    return {
+      locale,
+      kind: "page",
+      nodeId: page.id,
+      property,
+      sourceText: page[property] ?? "",
+      translatedText,
+      ...page.translationMetadata?.[locale]?.[property] === void 0 ? {} : { existingTranslationMetadata: page.translationMetadata[locale]?.[property] }
+    };
+  }
+  if (property !== "label") return void 0;
+  const option = schema.fields.filter((field) => "options" in field).flatMap((field) => field.options).find((candidate) => candidate.id === target.id);
+  if (option === void 0) return void 0;
+  return {
+    locale,
+    kind: "option",
+    nodeId: option.id,
+    property,
+    sourceText: option.label,
+    translatedText,
+    ...option.translationMetadata?.[locale]?.[property] === void 0 ? {} : { existingTranslationMetadata: option.translationMetadata[locale]?.[property] }
+  };
+}
 function defaultConditionValue(field) {
   if (field.type === "checkbox") return true;
   if (field.type === "number" || field.type === "rating") return field.min ?? 1;
@@ -1331,6 +1420,7 @@ function FormBuilder({
   features,
   components: componentOverrides,
   slots,
+  sectionOrder,
   disableDefaultStyles = false,
   unstyled = false
 }) {
@@ -1348,6 +1438,7 @@ function FormBuilder({
   const PagesSlot = slots?.pages;
   const LocalizationSlot = slots?.localization;
   const TranslationActionsSlot = slots?.translationActions;
+  const resolvedSectionOrder = sectionOrder ?? slots?.sectionOrder;
   const headless = useFormBuilder({
     schema,
     onChange,
@@ -1362,7 +1453,11 @@ function FormBuilder({
   const [translationError, setTranslationError] = useState(null);
   const [translationReport, setTranslationReport] = useState();
   const translate = (key, params = {}) => {
-    const translated = translator?.translate(key, locale, params);
+    const translatorParams = {};
+    for (const [name, value] of Object.entries(params)) {
+      if (typeof value === "string" || typeof value === "number") translatorParams[name] = value;
+    }
+    const translated = translator?.translate(key, locale, translatorParams);
     return translated === void 0 ? interpolate(BUILDER_DEFAULTS[key] ?? key, params) : translated;
   };
   const pagesEnabled = features?.pages ?? true;
@@ -1487,25 +1582,30 @@ function FormBuilder({
       setIsTranslating(false);
     }
   };
-  const updateManualTranslation = (context) => {
-    if (readOnly) return;
-    const metadata = createManualTranslationMetadata?.(context);
-    const target = context.kind === "form" ? { kind: "form" } : { kind: context.kind, id: context.nodeId };
-    executeAction(
+  const setManualTranslation = (targetLocale, target, property, text) => {
+    if (readOnly) return { success: true };
+    const normalizedLocale = targetLocale.trim();
+    const context = manualTranslationContext(schema, normalizedLocale, target, property, text);
+    const metadata = context === void 0 ? void 0 : createManualTranslationMetadata?.(context);
+    return executeAction(
       () => headless.setLocaleTranslation(
-        context.locale,
+        normalizedLocale,
         target,
-        context.property,
-        context.translatedText,
+        property,
+        text,
         metadata === void 0 ? void 0 : { metadata }
       ),
       {
-        action: "setLocaleTranslation",
-        targetId: context.nodeId,
-        params: { locale: context.locale, kind: context.kind, property: context.property }
+        action: "setManualTranslation",
+        ...target.id === void 0 ? {} : { targetId: target.id },
+        params: { locale: normalizedLocale, kind: target.kind, property }
       }
     );
   };
+  const updateManualTranslation = (context) => {
+    const target = context.kind === "form" ? { kind: "form" } : { kind: context.kind, id: context.nodeId };
+    setManualTranslation(context.locale, target, context.property, context.translatedText);
+  };
   const updateFormTranslation = (property, translatedText) => {
     if (editingLocale.length === 0) return;
     updateManualTranslation({
@@ -1614,6 +1714,7 @@ function FormBuilder({
       ...target.id === void 0 ? {} : { targetId: target.id },
       params: { locale: targetLocale, property }
     }),
+    setManualTranslation,
     addLocale: (targetLocale) => executeAction(() => headless.addLocale(targetLocale), {
       action: "addLocale",
       params: { locale: targetLocale }
@@ -1647,8 +1748,8 @@ function FormBuilder({
               addOption(fieldId);
             }
           },
-          children: /* @__PURE__ */ jsxs(Fieldset, { className: builderClass("form-engine-builder__controls"), disabled: readOnly, children: [
-            /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx(Fieldset, { className: builderClass("form-engine-builder__controls"), disabled: readOnly, children: /* @__PURE__ */ jsxs(OrderedBuilderSections, { ...resolvedSectionOrder === void 0 ? {} : { order: resolvedSectionOrder }, children: [
+            /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "basicSettings", children: /* @__PURE__ */ jsx(
               Section,
               {
                 className: builderClass("form-engine-builder__basic-settings"),
@@ -1682,8 +1783,17 @@ function FormBuilder({
                   ) })
                 ] })
               }
-            ),
-            pagesEnabled ? PagesSlot === void 0 ? /* @__PURE__ */ jsx(
+            ) }),
+            resolvedSectionOrder === void 0 ? null : /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "completionMessage", children: /* @__PURE__ */ jsx(Section, { headingId: "builder-completion-message-heading", title: translate("builder.completionMessage"), children: /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                id: "builder-completion-message",
+                label: translate("builder.completionMessage"),
+                value: schema.completionMessage ?? "",
+                onChange: (value) => setSourceText({ kind: "form" }, "completionMessage", value)
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "questions", children: pagesEnabled ? PagesSlot === void 0 ? /* @__PURE__ */ jsx(
               Section,
               {
                 className: builderClass("form-engine-builder__pages"),
@@ -1733,6 +1843,7 @@ function FormBuilder({
                             ToolbarSlot,
                             {
                               schema,
+                              translate,
                               kind: "page",
                               targetId: page.id,
                               index: pageIndex,
@@ -1879,7 +1990,10 @@ function FormBuilder({
                                 {
                                   source,
                                   condition: page.displayCondition,
-                                  onChange: (condition) => updatePage(page.id, (current) => ({ ...current, displayCondition: condition })),
+                                  onChange: (condition) => updatePage(page.id, (current) => ({
+                                    ...current,
+                                    displayCondition: condition
+                                  })),
                                   translate,
                                   components
                                 }
@@ -1914,20 +2028,22 @@ function FormBuilder({
               PagesSlot,
               {
                 schema,
+                translate,
                 currentLocale: editingLocale,
+                ...features === void 0 ? {} : { features },
                 readOnly,
                 actions,
                 components
               }
-            ) : null,
-            localizationEnabled ? LocalizationSlot === void 0 ? /* @__PURE__ */ jsxs(
+            ) : null }),
+            /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "localization", children: localizationEnabled ? LocalizationSlot === void 0 ? /* @__PURE__ */ jsxs(
               Section,
               {
                 className: builderClass("form-engine-builder__localization"),
                 headingId: "builder-localization-heading",
                 title: translate("builder.localization"),
                 children: [
-                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                  resolvedSectionOrder === void 0 ? /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
                     TextInput,
                     {
                       id: "builder-completion-message",
@@ -1935,7 +2051,7 @@ function FormBuilder({
                       value: schema.completionMessage ?? "",
                       onChange: (value) => setSourceText({ kind: "form" }, "completionMessage", value)
                     }
-                  ) }),
+                  ) }) : null,
                   /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
                     /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
                       TextInput,
@@ -2000,12 +2116,14 @@ function FormBuilder({
                       TranslationActionsSlot,
                       {
                         schema,
+                        translate,
                         currentLocale: editingLocale,
                         onAutoTranslate: () => void translateAll(),
                         isTranslating,
                         ...translationError === null ? {} : { translationError },
                         ...translationReport === void 0 ? {} : { translationReport },
                         onClearTranslationError: () => setTranslationError(null),
+                        translationAdapterAvailable: translationAdapter !== void 0,
                         readOnly,
                         actions,
                         components
@@ -2049,17 +2167,20 @@ function FormBuilder({
               LocalizationSlot,
               {
                 schema,
+                translate,
                 currentLocale: editingLocale,
                 onCurrentLocaleChange: setEditingLocale,
                 onAutoTranslate: () => void translateAll(),
                 isTranslating,
                 ...translationError === null ? {} : { translationError },
+                ...policy === void 0 ? {} : { policy },
+                translationAdapterAvailable: translationAdapter !== void 0,
                 readOnly,
                 actions,
                 components
               }
-            ) : null,
-            /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__list"), children: schema.fields.map((field, index) => {
+            ) : null }),
+            /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "questions", children: /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__list"), children: schema.fields.map((field, index) => {
               const condition = field.displayCondition;
               const source = condition === void 0 ? void 0 : schema.fields.find((item) => item.id === condition.questionId);
               const availableSources = schema.fields.slice(0, index);
@@ -2071,7 +2192,9 @@ function FormBuilder({
                     field,
                     index,
                     currentLocale: editingLocale,
+                    translate,
                     ...policy === void 0 ? {} : { policy },
+                    ...features === void 0 ? {} : { features },
                     readOnly,
                     actions,
                     components
@@ -2079,348 +2202,362 @@ function FormBuilder({
                   field.id
                 );
               }
-              return /* @__PURE__ */ jsxs(Fieldset, { className: builderClass("form-engine-builder__question"), legend: field.title, children: [
-                /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__toolbar"), children: ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    IconButton,
-                    {
-                      actionType: "moveUp",
-                      title: translate("builder.moveUp", { title: field.title }),
-                      disabled: index === 0,
-                      onClick: () => moveField(index, -1)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    IconButton,
-                    {
-                      actionType: "moveDown",
-                      title: translate("builder.moveDown", { title: field.title }),
-                      disabled: index === schema.fields.length - 1,
-                      onClick: () => moveField(index, 1)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    IconButton,
-                    {
-                      actionType: "delete",
-                      disabled: schema.fields.length === 1,
-                      onClick: () => removeField(field.id),
-                      "aria-label": translate("builder.delete", { title: field.title }),
-                      title: translate("builder.delete", { title: field.title })
-                    }
-                  )
-                ] }) : /* @__PURE__ */ jsx(
-                  ToolbarSlot,
-                  {
-                    schema,
-                    kind: "field",
-                    targetId: field.id,
-                    index,
-                    total: schema.fields.length,
-                    title: field.title,
-                    onMoveUp: () => moveField(index, -1),
-                    onMoveDown: () => moveField(index, 1),
-                    onRemove: () => removeField(field.id),
-                    readOnly,
-                    actions,
-                    components
-                  }
-                ) }),
-                /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
-                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                    TextInput,
-                    {
-                      id: `builder-field-${field.id}-title`,
-                      name: `fields.${field.id}.title`,
-                      label: translate("builder.questionTitle"),
-                      required: true,
-                      error: field.title.trim().length === 0,
-                      helperText: field.title.trim().length === 0 ? translate("builder.required") : "",
-                      "aria-describedby": field.title.trim().length === 0 ? `builder-field-${field.id}-title-error` : void 0,
-                      value: field.title,
-                      placeholder: translate("builder.questionTitlePlaceholder"),
-                      onChange: (value) => updateField(field.id, (current) => ({
-                        ...current,
-                        title: value.trim().length === 0 ? current.title : value
-                      }))
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                    Select,
-                    {
-                      id: `builder-field-${field.id}-type`,
-                      label: translate("builder.type"),
-                      value: field.type,
-                      onChange: (value) => changeType(field.id, value),
-                      options: FIELD_TYPES.filter(
-                        (type) => policy?.allowedFieldTypes === void 0 || policy.allowedFieldTypes.includes(type)
-                      ).map((type) => ({ value: type, label: translate(fieldTypeKey(type)) }))
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(
-                    Checkbox,
-                    {
-                      className: builderClass("form-engine-builder__check"),
-                      checked: field.required === true,
-                      onChange: (checked) => updateField(field.id, (current) => ({ ...current, required: checked })),
-                      label: translate("builder.required")
-                    }
-                  )
-                ] }),
-                !pagesEnabled || schema.pages === void 0 ? null : /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                  Select,
-                  {
-                    id: `builder-field-${field.id}-page`,
-                    label: translate("builder.questionPage"),
-                    value: pageForField(field.id)?.id ?? "",
-                    onChange: (value) => assignFieldToPage(field.id, value),
-                    options: schema.pages.map((page, pageIndex) => ({
-                      value: page.id,
-                      label: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}`
-                    }))
-                  }
-                ) }),
-                !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__translation-editor"), children: [
-                  /* @__PURE__ */ jsx("strong", { children: editingLocale }),
-                  /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
-                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                      TextInput,
+              return /* @__PURE__ */ jsxs(
+                Fieldset,
+                {
+                  className: builderClass("form-engine-builder__question"),
+                  legend: field.title,
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__toolbar"), children: ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          actionType: "moveUp",
+                          title: translate("builder.moveUp", { title: field.title }),
+                          disabled: index === 0,
+                          onClick: () => moveField(index, -1)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          actionType: "moveDown",
+                          title: translate("builder.moveDown", { title: field.title }),
+                          disabled: index === schema.fields.length - 1,
+                          onClick: () => moveField(index, 1)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          actionType: "delete",
+                          disabled: schema.fields.length === 1,
+                          onClick: () => removeField(field.id),
+                          "aria-label": translate("builder.delete", { title: field.title }),
+                          title: translate("builder.delete", { title: field.title })
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ jsx(
+                      ToolbarSlot,
                       {
-                        id: `builder-field-${field.id}-${editingLocale}-title`,
-                        label: translate("builder.questionTitle"),
-                        value: field.translations?.[editingLocale]?.title ?? "",
-                        onChange: (value) => updateManualTranslation({
-                          locale: editingLocale,
-                          kind: "field",
-                          nodeId: field.id,
-                          property: "title",
-                          sourceText: field.title,
-                          translatedText: value,
-                          ...field.translationMetadata?.[editingLocale]?.title === void 0 ? {} : {
-                            existingTranslationMetadata: field.translationMetadata[editingLocale]?.title
-                          }
-                        })
+                        schema,
+                        translate,
+                        kind: "field",
+                        targetId: field.id,
+                        index,
+                        total: schema.fields.length,
+                        title: field.title,
+                        onMoveUp: () => moveField(index, -1),
+                        onMoveDown: () => moveField(index, 1),
+                        onRemove: () => removeField(field.id),
+                        readOnly,
+                        actions,
+                        components
                       }
                     ) }),
-                    /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                      TextInput,
+                    /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
+                      /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                        TextInput,
+                        {
+                          id: `builder-field-${field.id}-title`,
+                          name: `fields.${field.id}.title`,
+                          label: translate("builder.questionTitle"),
+                          required: true,
+                          error: field.title.trim().length === 0,
+                          helperText: field.title.trim().length === 0 ? translate("builder.required") : "",
+                          "aria-describedby": field.title.trim().length === 0 ? `builder-field-${field.id}-title-error` : void 0,
+                          value: field.title,
+                          placeholder: translate("builder.questionTitlePlaceholder"),
+                          onChange: (value) => updateField(field.id, (current) => ({
+                            ...current,
+                            title: value.trim().length === 0 ? current.title : value
+                          }))
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                        Select,
+                        {
+                          id: `builder-field-${field.id}-type`,
+                          label: translate("builder.type"),
+                          value: field.type,
+                          onChange: (value) => changeType(field.id, value),
+                          options: FIELD_TYPES.filter(
+                            (type) => policy?.allowedFieldTypes === void 0 || policy.allowedFieldTypes.includes(type)
+                          ).map((type) => ({ value: type, label: translate(fieldTypeKey(type)) }))
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          className: builderClass("form-engine-builder__check"),
+                          checked: field.required === true,
+                          onChange: (checked) => updateField(field.id, (current) => ({ ...current, required: checked })),
+                          label: translate("builder.required")
+                        }
+                      )
+                    ] }),
+                    !pagesEnabled || schema.pages === void 0 ? null : /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                      Select,
                       {
-                        id: `builder-field-${field.id}-${editingLocale}-description`,
-                        label: translate("builder.pageDescription"),
-                        value: field.translations?.[editingLocale]?.description ?? "",
-                        onChange: (value) => updateManualTranslation({
-                          locale: editingLocale,
-                          kind: "field",
-                          nodeId: field.id,
-                          property: "description",
-                          sourceText: field.description ?? "",
-                          translatedText: value,
-                          ...field.translationMetadata?.[editingLocale]?.description === void 0 ? {} : {
-                            existingTranslationMetadata: field.translationMetadata[editingLocale]?.description
-                          }
-                        })
+                        id: `builder-field-${field.id}-page`,
+                        label: translate("builder.questionPage"),
+                        value: pageForField(field.id)?.id ?? "",
+                        onChange: (value) => assignFieldToPage(field.id, value),
+                        options: schema.pages.map((page, pageIndex) => ({
+                          value: page.id,
+                          label: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}`
+                        }))
                       }
-                    ) })
-                  ] }),
-                  "options" in field ? field.options.map((option, optionIndex) => /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                    TextInput,
-                    {
-                      id: `builder-option-${option.id}-${editingLocale}`,
-                      label: `${translate("builder.optionLabel", { index: optionIndex + 1 })} (${editingLocale})`,
-                      value: option.translations?.[editingLocale] ?? "",
-                      onChange: (value) => updateManualTranslation({
-                        locale: editingLocale,
-                        kind: "option",
-                        nodeId: option.id,
-                        property: "label",
-                        sourceText: option.label,
-                        translatedText: value,
-                        ...option.translationMetadata?.[editingLocale]?.label === void 0 ? {} : {
-                          existingTranslationMetadata: option.translationMetadata[editingLocale]?.label
+                    ) }),
+                    !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__translation-editor"), children: [
+                      /* @__PURE__ */ jsx("strong", { children: editingLocale }),
+                      /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
+                        /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                          TextInput,
+                          {
+                            id: `builder-field-${field.id}-${editingLocale}-title`,
+                            label: translate("builder.questionTitle"),
+                            value: field.translations?.[editingLocale]?.title ?? "",
+                            onChange: (value) => updateManualTranslation({
+                              locale: editingLocale,
+                              kind: "field",
+                              nodeId: field.id,
+                              property: "title",
+                              sourceText: field.title,
+                              translatedText: value,
+                              ...field.translationMetadata?.[editingLocale]?.title === void 0 ? {} : {
+                                existingTranslationMetadata: field.translationMetadata[editingLocale]?.title
+                              }
+                            })
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                          TextInput,
+                          {
+                            id: `builder-field-${field.id}-${editingLocale}-description`,
+                            label: translate("builder.pageDescription"),
+                            value: field.translations?.[editingLocale]?.description ?? "",
+                            onChange: (value) => updateManualTranslation({
+                              locale: editingLocale,
+                              kind: "field",
+                              nodeId: field.id,
+                              property: "description",
+                              sourceText: field.description ?? "",
+                              translatedText: value,
+                              ...field.translationMetadata?.[editingLocale]?.description === void 0 ? {} : {
+                                existingTranslationMetadata: field.translationMetadata[editingLocale]?.description
+                              }
+                            })
+                          }
+                        ) })
+                      ] }),
+                      "options" in field ? field.options.map((option, optionIndex) => /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                        TextInput,
+                        {
+                          id: `builder-option-${option.id}-${editingLocale}`,
+                          label: `${translate("builder.optionLabel", { index: optionIndex + 1 })} (${editingLocale})`,
+                          value: option.translations?.[editingLocale] ?? "",
+                          onChange: (value) => updateManualTranslation({
+                            locale: editingLocale,
+                            kind: "option",
+                            nodeId: option.id,
+                            property: "label",
+                            sourceText: option.label,
+                            translatedText: value,
+                            ...option.translationMetadata?.[editingLocale]?.label === void 0 ? {} : {
+                              existingTranslationMetadata: option.translationMetadata[editingLocale]?.label
+                            }
+                          })
                         }
-                      })
-                    }
-                  ) }, option.id)) : null
-                ] }),
-                field.type === "rating" ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
-                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                    TextInput,
-                    {
-                      id: `builder-field-${field.id}-minimum`,
-                      label: translate("builder.minimum"),
-                      type: "number",
-                      value: String(field.min ?? 1),
-                      onChange: (value) => {
-                        const min = Number(value);
-                        if (!Number.isInteger(min)) return;
-                        updateField(
-                          field.id,
-                          (current) => current.type === "rating" ? { ...current, min, max: Math.max(min, current.max ?? 5) } : current
-                        );
-                      }
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                    TextInput,
-                    {
-                      id: `builder-field-${field.id}-maximum`,
-                      label: translate("builder.maximum"),
-                      type: "number",
-                      value: String(field.max ?? 5),
-                      onChange: (value) => {
-                        const max = Number(value);
-                        if (!Number.isInteger(max)) return;
-                        updateField(
-                          field.id,
-                          (current) => current.type === "rating" ? { ...current, min: Math.min(current.min ?? 1, max), max } : current
-                        );
-                      }
-                    }
-                  ) })
-                ] }) : null,
-                "options" in field ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__options"), children: [
-                  /* @__PURE__ */ jsx("strong", { children: translate("builder.options") }),
-                  field.options.map(
-                    (option, optionIndex) => OptionEditorSlot === void 0 ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__option"), children: [
-                      /* @__PURE__ */ jsx(
+                      ) }, option.id)) : null
+                    ] }),
+                    field.type === "rating" ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__grid"), children: [
+                      /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
                         TextInput,
                         {
-                          id: `builder-option-${option.id}`,
-                          label: translate("builder.optionLabel", { index: optionIndex + 1 }),
-                          value: option.label,
-                          placeholder: translate("builder.optionLabelPlaceholder"),
-                          onChange: (value) => value.trim().length === 0 ? void 0 : updateOption(field.id, option.id, value)
+                          id: `builder-field-${field.id}-minimum`,
+                          label: translate("builder.minimum"),
+                          type: "number",
+                          value: String(field.min ?? 1),
+                          onChange: (value) => {
+                            const min = Number(value);
+                            if (!Number.isInteger(min)) return;
+                            updateField(
+                              field.id,
+                              (current) => current.type === "rating" ? { ...current, min, max: Math.max(min, current.max ?? 5) } : current
+                            );
+                          }
                         }
-                      ),
-                      ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx(
-                          IconButton,
-                          {
-                            actionType: "moveUp",
-                            title: translate("builder.moveUp", { title: option.label }),
-                            disabled: optionIndex === 0,
-                            onClick: () => moveOption(field.id, option.id, optionIndex - 1)
+                      ) }),
+                      /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                        TextInput,
+                        {
+                          id: `builder-field-${field.id}-maximum`,
+                          label: translate("builder.maximum"),
+                          type: "number",
+                          value: String(field.max ?? 5),
+                          onChange: (value) => {
+                            const max = Number(value);
+                            if (!Number.isInteger(max)) return;
+                            updateField(
+                              field.id,
+                              (current) => current.type === "rating" ? { ...current, min: Math.min(current.min ?? 1, max), max } : current
+                            );
                           }
-                        ),
+                        }
+                      ) })
+                    ] }) : null,
+                    "options" in field ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__options"), children: [
+                      /* @__PURE__ */ jsx("strong", { children: translate("builder.options") }),
+                      field.options.map(
+                        (option, optionIndex) => OptionEditorSlot === void 0 ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__option"), children: [
+                          /* @__PURE__ */ jsx(
+                            TextInput,
+                            {
+                              id: `builder-option-${option.id}`,
+                              label: translate("builder.optionLabel", { index: optionIndex + 1 }),
+                              value: option.label,
+                              placeholder: translate("builder.optionLabelPlaceholder"),
+                              onChange: (value) => value.trim().length === 0 ? void 0 : updateOption(field.id, option.id, value)
+                            }
+                          ),
+                          ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(
+                              IconButton,
+                              {
+                                actionType: "moveUp",
+                                title: translate("builder.moveUp", { title: option.label }),
+                                disabled: optionIndex === 0,
+                                onClick: () => moveOption(field.id, option.id, optionIndex - 1)
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              IconButton,
+                              {
+                                actionType: "moveDown",
+                                title: translate("builder.moveDown", { title: option.label }),
+                                disabled: optionIndex === field.options.length - 1,
+                                onClick: () => moveOption(field.id, option.id, optionIndex + 1)
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              IconButton,
+                              {
+                                actionType: "delete",
+                                disabled: field.options.length === 1,
+                                onClick: () => removeOption(field.id, option.id),
+                                title: translate("builder.remove")
+                              }
+                            )
+                          ] }) : /* @__PURE__ */ jsx(
+                            ToolbarSlot,
+                            {
+                              schema,
+                              translate,
+                              kind: "option",
+                              targetId: option.id,
+                              index: optionIndex,
+                              total: field.options.length,
+                              title: option.label,
+                              onMoveUp: () => moveOption(field.id, option.id, optionIndex - 1),
+                              onMoveDown: () => moveOption(field.id, option.id, optionIndex + 1),
+                              onRemove: () => removeOption(field.id, option.id),
+                              readOnly,
+                              actions,
+                              components
+                            }
+                          )
+                        ] }, option.id) : /* @__PURE__ */ jsx(
+                          OptionEditorSlot,
+                          {
+                            schema,
+                            field,
+                            option,
+                            index: optionIndex,
+                            currentLocale: editingLocale,
+                            translate,
+                            readOnly,
+                            actions,
+                            components
+                          },
+                          option.id
+                        )
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          action: "addOption",
+                          targetId: field.id,
+                          disabled: policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
+                          onClick: () => addOption(field.id),
+                          children: translate("builder.addOption")
+                        }
+                      )
+                    ] }) : null,
+                    conditionsEnabled ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__condition"), children: [
+                      /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
+                        Select,
+                        {
+                          id: `builder-field-${field.id}-condition`,
+                          label: translate("builder.displayCondition"),
+                          value: condition?.questionId ?? "",
+                          onChange: (value) => {
+                            const selected = schema.fields.find((item) => item.id === value);
+                            setDisplayCondition(
+                              field.id,
+                              selected === void 0 ? void 0 : conditionWithValue(
+                                selected.id,
+                                conditionOperators(selected)[0] ?? "not_empty",
+                                defaultConditionValue(selected)
+                              )
+                            );
+                          },
+                          options: [
+                            { value: "", label: translate("builder.alwaysVisible") },
+                            ...availableSources.map((candidate) => ({
+                              value: candidate.id,
+                              label: candidate.title
+                            }))
+                          ]
+                        }
+                      ) }),
+                      condition !== void 0 && source !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
                         /* @__PURE__ */ jsx(
-                          IconButton,
+                          Select,
                           {
-                            actionType: "moveDown",
-                            title: translate("builder.moveDown", { title: option.label }),
-                            disabled: optionIndex === field.options.length - 1,
-                            onClick: () => moveOption(field.id, option.id, optionIndex + 1)
+                            "aria-label": translate("builder.conditionOperator"),
+                            value: condition.operator,
+                            onChange: (value) => {
+                              const operator = value;
+                              setDisplayCondition(
+                                field.id,
+                                conditionWithValue(source.id, operator, defaultConditionValue(source))
+                              );
+                            },
+                            options: conditionOperators(source).map((operator) => ({
+                              value: operator,
+                              label: translate(operatorKey(operator))
+                            }))
                           }
                         ),
                         /* @__PURE__ */ jsx(
-                          IconButton,
+                          ConditionValueEditor,
                           {
-                            actionType: "delete",
-                            disabled: field.options.length === 1,
-                            onClick: () => removeOption(field.id, option.id),
-                            title: translate("builder.remove")
+                            source,
+                            condition,
+                            onChange: (next) => setDisplayCondition(field.id, next),
+                            translate,
+                            components
                           }
                         )
-                      ] }) : /* @__PURE__ */ jsx(
-                        ToolbarSlot,
-                        {
-                          schema,
-                          kind: "option",
-                          targetId: option.id,
-                          index: optionIndex,
-                          total: field.options.length,
-                          title: option.label,
-                          onMoveUp: () => moveOption(field.id, option.id, optionIndex - 1),
-                          onMoveDown: () => moveOption(field.id, option.id, optionIndex + 1),
-                          onRemove: () => removeOption(field.id, option.id),
-                          readOnly,
-                          actions,
-                          components
-                        }
-                      )
-                    ] }, option.id) : /* @__PURE__ */ jsx(
-                      OptionEditorSlot,
-                      {
-                        schema,
-                        field,
-                        option,
-                        index: optionIndex,
-                        currentLocale: editingLocale,
-                        readOnly,
-                        actions,
-                        components
-                      },
-                      option.id
-                    )
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      action: "addOption",
-                      targetId: field.id,
-                      disabled: policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
-                      onClick: () => addOption(field.id),
-                      children: translate("builder.addOption")
-                    }
-                  )
-                ] }) : null,
-                conditionsEnabled ? /* @__PURE__ */ jsxs("div", { className: builderClass("form-engine-builder__condition"), children: [
-                  /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__field"), children: /* @__PURE__ */ jsx(
-                    Select,
-                    {
-                      id: `builder-field-${field.id}-condition`,
-                      label: translate("builder.displayCondition"),
-                      value: condition?.questionId ?? "",
-                      onChange: (value) => {
-                        const selected = schema.fields.find((item) => item.id === value);
-                        setDisplayCondition(
-                          field.id,
-                          selected === void 0 ? void 0 : conditionWithValue(
-                            selected.id,
-                            conditionOperators(selected)[0] ?? "not_empty",
-                            defaultConditionValue(selected)
-                          )
-                        );
-                      },
-                      options: [
-                        { value: "", label: translate("builder.alwaysVisible") },
-                        ...availableSources.map((candidate) => ({ value: candidate.id, label: candidate.title }))
-                      ]
-                    }
-                  ) }),
-                  condition !== void 0 && source !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(
-                      Select,
-                      {
-                        "aria-label": translate("builder.conditionOperator"),
-                        value: condition.operator,
-                        onChange: (value) => {
-                          const operator = value;
-                          setDisplayCondition(
-                            field.id,
-                            conditionWithValue(source.id, operator, defaultConditionValue(source))
-                          );
-                        },
-                        options: conditionOperators(source).map((operator) => ({
-                          value: operator,
-                          label: translate(operatorKey(operator))
-                        }))
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      ConditionValueEditor,
-                      {
-                        source,
-                        condition,
-                        onChange: (next) => setDisplayCondition(field.id, next),
-                        translate,
-                        components
-                      }
-                    )
-                  ] }) : null
-                ] }) : null
-              ] }, field.id);
-            }) }),
-            /* @__PURE__ */ jsx(
+                      ] }) : null
+                    ] }) : null
+                  ]
+                },
+                field.id
+              );
+            }) }) }),
+            /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "addQuestion", children: /* @__PURE__ */ jsx(
               Button,
               {
                 className: builderClass("form-engine-builder__add"),
@@ -2429,8 +2566,8 @@ function FormBuilder({
                 onClick: addField,
                 children: translate("builder.addQuestion")
               }
-            )
-          ] })
+            ) })
+          ] }) })
         }
       )
     }
@@ -2973,6 +3110,8 @@ function ContextFormRenderer({
   autoSaveKey,
   beforeSubmit,
   onDraftSave,
+  successRenderMode = "append",
+  hideFormOnSuccess = false,
   submissionGuards = [],
   receiptStore,
   attemptStore,
@@ -2988,9 +3127,11 @@ function ContextFormRenderer({
   const [focusFieldId, setFocusFieldId] = useState4(null);
   const [confirmation, setConfirmation] = useState4(null);
   const [guardMessage, setGuardMessage] = useState4(null);
+  const [guardsPending, setGuardsPending] = useState4(false);
   const [receipt, setReceipt] = useState4(null);
   const [receiptLoaded, setReceiptLoaded] = useState4(receiptStore === void 0);
   const rendererSubmissionInFlight = useRef2(false);
+  const completionRef = useRef2(null);
   const pages = form.schema.pages;
   const visiblePageIndexes = useMemo4(
     () => pages === void 0 ? [] : pages.flatMap((page, index) => form.pageVisibility[page.id] === true ? [index] : []),
@@ -3000,8 +3141,9 @@ function ContextFormRenderer({
   const activeVisibleIndex = visiblePageIndexes.indexOf(currentPageIndex);
   const fieldIds = activePage === void 0 ? void 0 : new Set(activePage.questionIds);
   const visibleValues = useMemo4(() => selectVisibleAnswers2(form.schema, form.values), [form.schema, form.values]);
-  const submitState = confirmation === null ? form.submitStatus : "confirming";
+  const submitState = confirmation === null && !guardsPending ? form.submitStatus : "confirming";
   const interactionLocked = submitState === "confirming" || submitState === "submitting";
+  const isReplaceMode = successRenderMode === "replace" || hideFormOnSuccess;
   useEffect3(() => {
     let active = true;
     if (receiptStore === void 0) {
@@ -3041,6 +3183,10 @@ function ContextFormRenderer({
       setFocusFieldId(null);
     }
   }, [focusFieldId]);
+  useEffect3(() => {
+    if (!isReplaceMode || form.submitStatus !== "success") return;
+    completionRef.current?.focus();
+  }, [form.submitStatus, isReplaceMode]);
   useEffect3(() => {
     if (autoSaveKey === void 0 || typeof globalThis.localStorage === "undefined") return;
     const loadIdentity = `${autoSaveKey}:${form.schema.id}:${form.schema.version}`;
@@ -3106,13 +3252,14 @@ function ContextFormRenderer({
     };
   };
   const submitValues = async (guardsConfirmed = false) => {
-    if (rendererSubmissionInFlight.current || confirmation !== null && !guardsConfirmed) {
+    if (rendererSubmissionInFlight.current || submitState === "submitting" || submitState === "success" || confirmation !== null && !guardsConfirmed) {
       return { status: "cancelled" };
     }
     const validation = validateAnswers2(form.schema, form.values);
     const firstInvalidFieldId = validation.issues[0]?.fieldId;
     if (validation.valid && !guardsConfirmed && submissionGuards.length > 0) {
       rendererSubmissionInFlight.current = true;
+      setGuardsPending(true);
       try {
         const guardResult = await runSubmissionGuards(submissionGuards);
         if (guardResult.status === "block") {
@@ -3129,6 +3276,7 @@ function ContextFormRenderer({
         }
       } finally {
         rendererSubmissionInFlight.current = false;
+        setGuardsPending(false);
       }
     }
     setGuardMessage(null);
@@ -3166,7 +3314,6 @@ function ContextFormRenderer({
         };
         try {
           await receiptStore.save(storedReceipt);
-          setReceipt(storedReceipt);
         } catch (cause) {
           const error = cause instanceof Error ? cause : new Error(String(cause));
           try {
@@ -3193,7 +3340,7 @@ function ContextFormRenderer({
   };
   const handleSubmit = (event) => {
     event.preventDefault();
-    if (interactionLocked) return;
+    if (submitState === "submitting" || submitState === "confirming" || submitState === "success") return;
     void submitValues();
   };
   const confirmSubmission = () => {
@@ -3212,7 +3359,17 @@ function ContextFormRenderer({
   const validationIssues = Object.values(form.errors).filter((issue) => issue !== void 0);
   const canPrev = pages !== void 0 && activeVisibleIndex > 0;
   const canNext = pages !== void 0 && activeVisibleIndex < visiblePageIndexes.length - 1;
-  const renderSubmitButton = () => slots.renderSubmitButton?.({ isSubmitting: interactionLocked, onSubmit: () => void submitValues() }) ?? /* @__PURE__ */ jsx3("button", { className: "fe-submit", type: "submit", disabled: interactionLocked, children: form.translate(form.schema.submitLabelKey ?? "form.submit") });
+  const renderSubmitButton = () => {
+    const submitButtonProps = {
+      isSubmitting: submitState === "submitting",
+      submitStatus: submitState,
+      disabled: interactionLocked || submitState === "success",
+      onSubmit: () => void submitValues()
+    };
+    return slots.renderSubmitButton?.(submitButtonProps) ?? /* @__PURE__ */ jsx3("button", { className: "fe-submit", type: "submit", disabled: submitButtonProps.disabled, children: form.translate(form.schema.submitLabelKey ?? "form.submit") });
+  };
+  const completionMessage = form.schema.completionMessage ?? (successMessageKey === void 0 ? "Submitted." : form.translate(successMessageKey));
+  const completionRegion = /* @__PURE__ */ jsx3("div", { ref: completionRef, className: "fe-completion", role: "status", "aria-live": "polite", tabIndex: -1, children: slots.renderCompletion?.({ message: completionMessage }) ?? /* @__PURE__ */ jsx3("div", { children: completionMessage }) });
   if (!receiptLoaded) return null;
   if (receipt !== null) {
     return /* @__PURE__ */ jsx3("div", { className: `fe-form fe-already-submitted ${className}`.trim(), children: slots.renderAlreadySubmitted?.({
@@ -3223,6 +3380,9 @@ function ContextFormRenderer({
       receiptStore === void 0 ? null : /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => void resetReceipt(), children: form.translate("form.submitAnother") })
     ] }) });
   }
+  if (form.submitStatus === "success" && isReplaceMode) {
+    return /* @__PURE__ */ jsx3("div", { className: `fe-form ${className}`.trim(), children: completionRegion });
+  }
   return /* @__PURE__ */ jsxs2("form", { ref: formRef, className: `fe-form ${className}`.trim(), noValidate: true, onSubmit: handleSubmit, children: [
     slots.renderHeader?.({
       title: form.schema.title,
@@ -3341,9 +3501,7 @@ function ContextFormRenderer({
       canNext ? null : renderSubmitButton()
     ] }),
     /* @__PURE__ */ jsxs2("div", { className: "fe-status", "aria-live": "polite", children: [
-      form.submitStatus === "success" ? slots.renderCompletion?.({
-        message: form.schema.completionMessage ?? (successMessageKey === void 0 ? "Submitted." : form.translate(successMessageKey))
-      }) ?? /* @__PURE__ */ jsx3("div", { role: "status", children: form.schema.completionMessage ?? (successMessageKey === void 0 ? "Submitted." : form.translate(successMessageKey)) }) : null,
+      form.submitStatus === "success" ? completionRegion : null,
       form.submitStatus === "error" && form.submitError !== null ? slots.renderSubmitError?.({ error: form.submitError, onRetry: () => void submitValues() }) ?? (errorMessageKey === void 0 ? null : /* @__PURE__ */ jsx3("div", { role: "alert", children: form.translate(errorMessageKey) })) : null
     ] })
   ] });