@form-engine-ts/react 1.0.0 → 1.1.0

package/dist/index.cjs

@@ -30,6 +30,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/builder.tsx
 var import_core = require("@form-engine-ts/core");
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var FIELD_TYPES = [
   "text",
@@ -67,6 +68,22 @@ var BUILDER_DEFAULTS = {
   "builder.conditionTrue": "true",
   "builder.conditionFalse": "false",
   "builder.addQuestion": "Add question",
+  "builder.pages": "Page manager",
+  "builder.enablePages": "Enable multi-step pages",
+  "builder.addPage": "Add page",
+  "builder.newPage": "New page",
+  "builder.pageTitle": "Page title",
+  "builder.pageDescription": "Page description",
+  "builder.pageQuestion": "Question to move to the new page",
+  "builder.questionPage": "Page",
+  "builder.pageCondition": "Page display condition",
+  "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.translationUnavailable": "Provide an async translation adapter to enable automatic translation.",
   "builder.fieldType.text": "Text",
   "builder.fieldType.textarea": "Textarea",
   "builder.fieldType.number": "Number",
@@ -139,14 +156,21 @@ function withoutDisplayCondition(field) {
 function sanitizeBuilderSchema(schema) {
   const sanitized = (0, import_core.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.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);
-    })
+    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) {
@@ -190,7 +214,12 @@ function ConditionValueEditor({
     }
   );
 }
-function FormBuilder({ schema, onChange, locale = "en", translator }) {
+function FormBuilder({ schema, onChange, locale = "en", translator, translationAdapter }) {
+  const [newPageQuestionId, setNewPageQuestionId] = (0, import_react.useState)("");
+  const [newLocale, setNewLocale] = (0, import_react.useState)("");
+  const [editingLocale, setEditingLocale] = (0, import_react.useState)("");
+  const [isTranslating, setIsTranslating] = (0, import_react.useState)(false);
+  const [translationError, setTranslationError] = (0, import_react.useState)(null);
   const translate = (key, params = {}) => {
     const translated = translator?.translate(key, locale, params);
     return translated === void 0 ? interpolate(BUILDER_DEFAULTS[key] ?? key, params) : translated;
@@ -231,12 +260,405 @@ function FormBuilder({ schema, onChange, locale = "en", translator }) {
   };
   const addField = () => {
     const id = createUniqueId("q", new Set(schema.fields.map((field) => field.id)));
-    emitSchema({
+    const nextSchema = {
       ...schema,
       fields: [...schema.fields, { id, type: "text", title: translate("builder.newQuestionTitle"), required: false }]
+    };
+    emitSchema(
+      schema.pages === void 0 ? nextSchema : {
+        ...nextSchema,
+        pages: schema.pages.map(
+          (page, index) => index === (schema.pages?.length ?? 0) - 1 ? { ...page, questionIds: [...page.questionIds, id] } : page
+        )
+      }
+    );
+  };
+  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)
+        }
+      ]
+    });
+  };
+  const pageForField = (fieldId) => schema.pages?.find((page) => page.questionIds.includes(fieldId));
+  const movablePageQuestions = schema.pages?.flatMap((page) => page.questionIds.length > 1 ? page.questionIds : []) ?? [];
+  const addPage = () => {
+    if (schema.pages === void 0) {
+      enablePages();
+      return;
+    }
+    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] }
+      ]
+    });
+    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 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 updatePage = (pageId, update) => {
+    if (schema.pages === void 0) return;
+    emitSchema({ ...schema, pages: schema.pages.map((page) => page.id === pageId ? update(page) : page) });
+  };
+  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)
+    });
+  };
+  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 });
+    setEditingLocale(normalized);
+    setNewLocale("");
+  };
+  const translateAll = async () => {
+    if (translationAdapter === void 0 || editingLocale.length === 0) return;
+    setIsTranslating(true);
+    setTranslationError(null);
+    try {
+      onChange(await (0, import_core.populateSchemaTranslations)(schema, [editingLocale], translationAdapter));
+    } 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 }
+        }
+      }
     });
   };
   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}` }),
+            /* @__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) => {
+                        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 }
+                            }
+                          }
+                        }));
+                      }
+                    }
+                  )
+                ] }),
+                /* @__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) => {
+                        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 }
+                            }
+                          }
+                        }));
+                      }
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__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)("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))
+          ] })
+        ] }),
+        /* @__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.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);
@@ -313,6 +735,98 @@ function FormBuilder({ schema, onChange, locale = "en", translator }) {
             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"),
@@ -476,9 +990,9 @@ function FormBuilder({ schema, onChange, locale = "en", translator }) {
 
 // src/context.tsx
 var import_core2 = require("@form-engine-ts/core");
-var import_react = require("react");
+var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var FormContext = (0, import_react.createContext)(null);
+var FormContext = (0, import_react2.createContext)(null);
 function issuesByField(issues) {
   const result = {};
   for (const issue of issues) result[issue.fieldId] ??= issue;
@@ -493,26 +1007,30 @@ function FormProvider({
   onSubmit,
   children
 }) {
-  const validSchema = (0, import_react.useMemo)(() => {
+  const validSchema = (0, import_react2.useMemo)(() => {
     (0, import_core2.assertValidFormSchema)(schema);
-    return schema;
-  }, [schema]);
-  const [values, setValues] = (0, import_react.useState)(() => ({ ...initialValues }));
-  const [errors, setErrors] = (0, import_react.useState)({});
-  const [submitStatus, setSubmitStatus] = (0, import_react.useState)("idle");
-  const [submitError, setSubmitError] = (0, import_react.useState)(null);
-  const visibility = (0, import_react.useMemo)(() => (0, import_core2.calculateFieldVisibility)(validSchema, values), [validSchema, values]);
-  (0, import_react.useEffect)(() => {
+    const localized = (0, import_core2.resolveLocalizedSchema)(schema, locale);
+    (0, import_core2.assertValidFormSchema)(localized);
+    return localized;
+  }, [locale, schema]);
+  const [values, setValues] = (0, import_react2.useState)(() => ({ ...initialValues }));
+  const [errors, setErrors] = (0, import_react2.useState)({});
+  const [submitStatus, setSubmitStatus] = (0, import_react2.useState)("idle");
+  const [submitError, setSubmitError] = (0, import_react2.useState)(null);
+  const [validationPageIndex, setValidationPageIndex] = (0, import_react2.useState)(null);
+  const visibility = (0, import_react2.useMemo)(() => (0, import_core2.calculateFieldVisibility)(validSchema, values), [validSchema, values]);
+  const pageVisibility = (0, import_react2.useMemo)(() => (0, import_core2.calculatePageVisibility)(validSchema, values), [validSchema, values]);
+  (0, import_react2.useEffect)(() => {
     const fieldIds = new Set(validSchema.fields.map((field) => field.id));
     setValues((current) => Object.fromEntries(Object.entries(current).filter(([fieldId]) => fieldIds.has(fieldId))));
   }, [validSchema]);
-  const setValue = (0, import_react.useCallback)(
+  const setValue = (0, import_react2.useCallback)(
     (fieldId, value) => {
       setValues((current) => {
         const next = { ...current, [fieldId]: value };
         setErrors((currentErrors) => {
           if (Object.keys(currentErrors).length === 0) return currentErrors;
-          const result = (0, import_core2.validateAnswers)(validSchema, next);
+          const result = validationPageIndex === null ? (0, import_core2.validateAnswers)(validSchema, next) : (0, import_core2.validatePageAnswers)(validSchema, validationPageIndex, next);
           return issuesByField(result.issues);
         });
         return next;
@@ -520,23 +1038,48 @@ function FormProvider({
       setSubmitStatus((current) => current === "success" || current === "error" ? "idle" : current);
       setSubmitError(null);
     },
+    [validSchema, validationPageIndex]
+  );
+  const restoreValues = (0, import_react2.useCallback)(
+    (restoredValues) => {
+      const fieldIds = new Set(validSchema.fields.map((field) => field.id));
+      setValues(Object.fromEntries(Object.entries(restoredValues).filter(([fieldId]) => fieldIds.has(fieldId))));
+      setErrors({});
+      setValidationPageIndex(null);
+      setSubmitStatus("idle");
+      setSubmitError(null);
+    },
     [validSchema]
   );
-  const reset = (0, import_react.useCallback)(() => {
+  const validatePage = (0, import_react2.useCallback)(
+    (pageIndex) => {
+      const result = (0, import_core2.validatePageAnswers)(validSchema, pageIndex, values);
+      setErrors(issuesByField(result.issues));
+      setValidationPageIndex(result.valid ? null : pageIndex);
+      setSubmitStatus("idle");
+      setSubmitError(null);
+      return result;
+    },
+    [validSchema, values]
+  );
+  const reset = (0, import_react2.useCallback)(() => {
     setValues({ ...initialValues });
     setErrors({});
+    setValidationPageIndex(null);
     setSubmitStatus("idle");
     setSubmitError(null);
   }, [initialValues]);
-  const submit = (0, import_react.useCallback)(async () => {
+  const submit = (0, import_react2.useCallback)(async () => {
     const validation = (0, import_core2.validateAnswers)(validSchema, values);
     if (!validation.valid) {
       setErrors(issuesByField(validation.issues));
+      setValidationPageIndex(null);
       setSubmitStatus("error");
       setSubmitError(null);
       return false;
     }
     setErrors({});
+    setValidationPageIndex(null);
     setSubmitStatus("submitting");
     setSubmitError(null);
     try {
@@ -550,22 +1093,25 @@ function FormProvider({
       return false;
     }
   }, [initialValues, onSubmit, resetOnSuccess, validSchema, values]);
-  const translate = (0, import_react.useCallback)(
+  const translate = (0, import_react2.useCallback)(
     (key, params) => translator.translate(key, locale, params),
     [locale, translator]
   );
-  const contextValue = (0, import_react.useMemo)(
+  const contextValue = (0, import_react2.useMemo)(
     () => ({
       schema: validSchema,
       locale,
       translator,
       values,
       visibility,
+      pageVisibility,
       errors,
       submitStatus,
       submitError,
       isSubmitting: submitStatus === "submitting",
       setValue,
+      restoreValues,
+      validatePage,
       reset,
       submit,
       translate
@@ -573,13 +1119,16 @@ function FormProvider({
     [
       errors,
       locale,
+      pageVisibility,
       reset,
+      restoreValues,
       setValue,
       submit,
       submitError,
       submitStatus,
       translate,
       translator,
+      validatePage,
       validSchema,
       values,
       visibility
@@ -588,7 +1137,7 @@ function FormProvider({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormContext.Provider, { value: contextValue, children });
 }
 function useForm() {
-  const context = (0, import_react.useContext)(FormContext);
+  const context = (0, import_react2.useContext)(FormContext);
   if (context === null) throw new Error("useForm must be called inside a FormProvider.");
   return context;
 }
@@ -596,13 +1145,13 @@ function useField(fieldId) {
   const form = useForm();
   const field = form.schema.fields.find((item) => item.id === fieldId);
   if (field === void 0) throw new Error(`Unknown form field: ${fieldId}`);
-  const setValue = (0, import_react.useCallback)((value) => form.setValue(fieldId, value), [fieldId, form]);
+  const setValue = (0, import_react2.useCallback)((value) => form.setValue(fieldId, value), [fieldId, form]);
   return { field, value: form.values[fieldId], error: form.errors[fieldId], setValue };
 }
 
 // src/renderer.tsx
 var import_core3 = require("@form-engine-ts/core");
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function describedBy(field, error, helpId, errorId) {
   const ids = [field.description === void 0 ? void 0 : helpId, error === void 0 ? void 0 : errorId].filter(
@@ -781,35 +1330,156 @@ function DefaultField(props) {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldMessage, { props })
   ] });
 }
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isFormValue(value) {
+  return value === void 0 || typeof value === "string" || typeof value === "boolean" || typeof value === "number" && Number.isFinite(value) || Array.isArray(value) && value.every((item) => typeof item === "string");
+}
+function parseDraft(serialized) {
+  try {
+    const value = JSON.parse(serialized);
+    if (!isRecord(value) || typeof value.formId !== "string" || typeof value.formVersion !== "number" || !Number.isInteger(value.formVersion) || typeof value.savedAt !== "string" || !isRecord(value.values) || !Object.values(value.values).every(isFormValue)) {
+      return null;
+    }
+    return {
+      formId: value.formId,
+      formVersion: value.formVersion,
+      savedAt: value.savedAt,
+      values: Object.fromEntries(
+        Object.entries(value.values).filter((entry) => isFormValue(entry[1]))
+      )
+    };
+  } catch {
+    return null;
+  }
+}
 function FormRenderer({
   components = {},
   className = "",
   successMessageKey,
-  errorMessageKey
+  errorMessageKey,
+  autoSaveKey
 }) {
   const form = useForm();
-  const prefix = (0, import_react2.useId)().replace(/:/g, "");
+  const prefix = (0, import_react3.useId)().replace(/:/g, "");
+  const formRef = (0, import_react3.useRef)(null);
+  const loadedDraftKey = (0, import_react3.useRef)(null);
+  const [draftRestored, setDraftRestored] = (0, import_react3.useState)(false);
+  const [currentPageIndex, setCurrentPageIndex] = (0, import_react3.useState)(0);
+  const [focusFieldId, setFocusFieldId] = (0, import_react3.useState)(null);
+  const pages = form.schema.pages;
+  const visiblePageIndexes = (0, import_react3.useMemo)(
+    () => pages === void 0 ? [] : pages.flatMap((page, index) => form.pageVisibility[page.id] === true ? [index] : []),
+    [form.pageVisibility, pages]
+  );
+  const activePage = pages?.[currentPageIndex];
+  const activeVisibleIndex = visiblePageIndexes.indexOf(currentPageIndex);
+  const fieldIds = activePage === void 0 ? void 0 : new Set(activePage.questionIds);
+  (0, import_react3.useEffect)(() => {
+    if (pages === void 0 || visiblePageIndexes.length === 0) {
+      setCurrentPageIndex(0);
+      return;
+    }
+    if (!visiblePageIndexes.includes(currentPageIndex)) setCurrentPageIndex(visiblePageIndexes[0] ?? 0);
+  }, [currentPageIndex, pages, visiblePageIndexes]);
+  (0, import_react3.useEffect)(() => {
+    if (focusFieldId === null) return;
+    const fieldContainer = [...formRef.current?.querySelectorAll("[data-field-id]") ?? []].find(
+      (element) => element.dataset.fieldId === focusFieldId
+    );
+    const control = fieldContainer?.querySelector("input, select, textarea");
+    if (control !== void 0 && control !== null) {
+      control.focus();
+      setFocusFieldId(null);
+    }
+  }, [focusFieldId]);
+  (0, import_react3.useEffect)(() => {
+    if (autoSaveKey === void 0 || typeof globalThis.localStorage === "undefined") return;
+    const loadIdentity = `${autoSaveKey}:${form.schema.id}:${form.schema.version}`;
+    if (loadedDraftKey.current === loadIdentity) return;
+    loadedDraftKey.current = loadIdentity;
+    const serialized = globalThis.localStorage.getItem(autoSaveKey);
+    if (serialized === null) return;
+    const draft = parseDraft(serialized);
+    if (draft === null || draft.formId !== form.schema.id || draft.formVersion !== form.schema.version) return;
+    form.restoreValues(draft.values);
+    setDraftRestored(true);
+  }, [autoSaveKey, form.restoreValues, form.schema.id, form.schema.version]);
+  (0, import_react3.useEffect)(() => {
+    if (autoSaveKey === void 0 || typeof globalThis.localStorage === "undefined") return;
+    if (form.submitStatus === "success") return;
+    const timeout = globalThis.setTimeout(() => {
+      const draft = {
+        formId: form.schema.id,
+        formVersion: form.schema.version,
+        values: form.values,
+        savedAt: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      globalThis.localStorage.setItem(autoSaveKey, JSON.stringify(draft));
+    }, 500);
+    return () => globalThis.clearTimeout(timeout);
+  }, [autoSaveKey, form.schema.id, form.schema.version, form.submitStatus, form.values]);
+  const focusFirstIssue = (fieldId) => {
+    if (fieldId !== void 0) setFocusFieldId(fieldId);
+  };
+  const handleNext = () => {
+    const result = form.validatePage(currentPageIndex);
+    if (!result.valid) {
+      focusFirstIssue(result.issues[0]?.fieldId);
+      return;
+    }
+    const nextPageIndex = visiblePageIndexes[activeVisibleIndex + 1];
+    if (nextPageIndex !== void 0) setCurrentPageIndex(nextPageIndex);
+  };
   const handleSubmit = async (event) => {
     event.preventDefault();
-    const formElement = event.currentTarget;
     const validation = (0, import_core3.validateAnswers)(form.schema, form.values);
     const firstInvalidFieldId = validation.issues[0]?.fieldId;
     const valid = await form.submit();
-    if (!valid && firstInvalidFieldId !== void 0) {
-      queueMicrotask(() => {
-        const fieldContainer = [...formElement.querySelectorAll("[data-field-id]")].find(
-          (element) => element.dataset.fieldId === firstInvalidFieldId
-        );
-        fieldContainer?.querySelector("input, select, textarea")?.focus();
-      });
+    if (!valid) {
+      const invalidPageIndex = pages?.findIndex(
+        (page) => firstInvalidFieldId === void 0 ? false : page.questionIds.includes(firstInvalidFieldId)
+      );
+      if (invalidPageIndex !== void 0 && invalidPageIndex >= 0) setCurrentPageIndex(invalidPageIndex);
+      focusFirstIssue(firstInvalidFieldId);
+      return;
     }
+    if (autoSaveKey !== void 0 && typeof globalThis.localStorage !== "undefined") {
+      globalThis.localStorage.removeItem(autoSaveKey);
+      setDraftRestored(false);
+    }
+    setCurrentPageIndex(visiblePageIndexes[0] ?? 0);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { className: `fe-form ${className}`.trim(), noValidate: true, onSubmit: handleSubmit, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { ref: formRef, className: `fe-form ${className}`.trim(), noValidate: true, onSubmit: handleSubmit, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("header", { className: "fe-header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { children: form.schema.title }),
-      form.schema.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: form.schema.description })
+      form.schema.description === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: form.schema.description }),
+      pages === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-progress", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: "form-progress-bar",
+            role: "progressbar",
+            "aria-valuemin": 1,
+            "aria-valuemax": visiblePageIndexes.length,
+            "aria-valuenow": activeVisibleIndex + 1,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                className: "form-progress-fill",
+                style: { width: `${(activeVisibleIndex + 1) / visiblePageIndexes.length * 100}%` }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: form.translate("form.step", { current: activeVisibleIndex + 1, total: visiblePageIndexes.length }) })
+      ] }),
+      draftRestored ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "form-draft-badge", children: form.translate("form.draftRestored") }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-fields", children: form.schema.fields.filter((field) => form.visibility[field.id] === true).map((field) => {
+    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 props = {
         field,
         value: form.values[field.id],
@@ -823,7 +1493,18 @@ function FormRenderer({
       const Component = components[field.type];
       return Component === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultField, { ...props }, field.id) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...props }, field.id);
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "fe-submit", type: "submit", disabled: form.isSubmitting, children: form.translate(form.schema.submitLabelKey ?? "form.submit") }),
+    pages === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "fe-submit", type: "submit", disabled: form.isSubmitting, children: form.translate(form.schema.submitLabelKey ?? "form.submit") }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "form-step-navigation", children: [
+      activeVisibleIndex > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          className: "btn-prev",
+          type: "button",
+          onClick: () => setCurrentPageIndex(visiblePageIndexes[activeVisibleIndex - 1] ?? 0),
+          children: form.translate("form.back")
+        }
+      ) : null,
+      activeVisibleIndex < visiblePageIndexes.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "btn-next", type: "button", onClick: handleNext, children: form.translate("form.next") }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "fe-submit", type: "submit", disabled: form.isSubmitting, children: form.translate(form.schema.submitLabelKey ?? "form.submit") })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-status", "aria-live": "polite", children: [
       form.submitStatus === "success" && successMessageKey !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "status", children: 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