@form-engine-ts/react 2.2.0 → 2.3.0

package/dist/index.js

@@ -2,10 +2,11 @@
 import {
   populateSchemaTranslations
 } from "@form-engine-ts/core";
-import { useState } from "react";
+import { createContext, useContext, useState } from "react";
 
 // src/hooks/useFormBuilder.ts
 import {
+  collectSchemaLocales,
   transformFieldType,
   validateFormSchema
 } from "@form-engine-ts/core";
@@ -488,6 +489,13 @@ function useFormBuilder({
       const normalized = locale.trim();
       if (normalized.length === 0)
         return { success: false, error: { type: "invalid_operation", message: "Locale must not be empty." } };
+      if (policy?.allowedLocales !== void 0 && !policy.allowedLocales.includes(normalized)) {
+        return { success: false, error: { type: "disallowed_locale", locale: normalized } };
+      }
+      const allUniqueLocales = collectSchemaLocales(schema).allUniqueLocales;
+      if (!allUniqueLocales.has(normalized) && policy?.maxLocales !== void 0 && allUniqueLocales.size >= policy.maxLocales) {
+        return { success: false, error: { type: "max_locales_exceeded", max: policy.maxLocales } };
+      }
       const error = textPolicyError(text);
       if (error !== void 0) return error;
       const supportedLocales = [.../* @__PURE__ */ new Set([...schema.supportedLocales ?? [], normalized])];
@@ -556,7 +564,7 @@ function useFormBuilder({
       onChange({ ...schema, supportedLocales, fields, ...pages === void 0 ? {} : { pages } });
       return { success: true };
     },
-    [onChange, schema, textPolicyError]
+    [onChange, policy?.allowedLocales, policy?.maxLocales, schema, textPolicyError]
   );
   const addLocale = useCallback(
     (locale) => {
@@ -566,12 +574,10 @@ function useFormBuilder({
       if (policy?.allowedLocales !== void 0 && !policy.allowedLocales.includes(normalized)) {
         return { success: false, error: { type: "disallowed_locale", locale: normalized } };
       }
-      const registeredLocales = /* @__PURE__ */ new Set([
-        ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
-        ...schema.supportedLocales ?? []
-      ]);
-      if (registeredLocales.has(normalized)) return { success: true };
-      if (policy?.maxLocales !== void 0 && registeredLocales.size >= policy.maxLocales) {
+      const allUniqueLocales = collectSchemaLocales(schema).allUniqueLocales;
+      if ((schema.supportedLocales ?? []).includes(normalized) || schema.defaultLocale === normalized)
+        return { success: true };
+      if (policy?.maxLocales !== void 0 && !allUniqueLocales.has(normalized) && allUniqueLocales.size >= policy.maxLocales) {
         return { success: false, error: { type: "max_locales_exceeded", max: policy.maxLocales } };
       }
       onChange({
@@ -596,11 +602,8 @@ function useFormBuilder({
       if (policy?.allowedLocales !== void 0 && !policy.allowedLocales.includes(normalized)) {
         return { success: false, error: { type: "disallowed_locale", locale: normalized } };
       }
-      const registeredLocales = /* @__PURE__ */ new Set([
-        ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
-        ...schema.supportedLocales ?? []
-      ]);
-      if (!registeredLocales.has(normalized) && policy?.maxLocales !== void 0 && registeredLocales.size >= policy.maxLocales) {
+      const allUniqueLocales = collectSchemaLocales(schema).allUniqueLocales;
+      if (!allUniqueLocales.has(normalized) && policy?.maxLocales !== void 0 && allUniqueLocales.size >= policy.maxLocales) {
         return { success: false, error: { type: "max_locales_exceeded", max: policy.maxLocales } };
       }
       onChange({
@@ -643,6 +646,260 @@ function useFormBuilder({
 
 // src/builder.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DefaultButton({
+  id,
+  className,
+  disabled,
+  "aria-label": ariaLabel,
+  onClick,
+  children,
+  title,
+  action,
+  targetId
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      id,
+      className,
+      type: "button",
+      disabled,
+      "aria-label": ariaLabel,
+      title,
+      "data-builder-action": action,
+      "data-target-id": targetId,
+      onClick,
+      children
+    }
+  );
+}
+function DefaultIconButton(props) {
+  return /* @__PURE__ */ jsx(
+    DefaultButton,
+    {
+      ...props.id === void 0 ? {} : { id: props.id },
+      ...props.className === void 0 ? {} : { className: props.className },
+      ...props.disabled === void 0 ? {} : { disabled: props.disabled },
+      "aria-label": props["aria-label"] ?? props.title,
+      ...props.onClick === void 0 ? {} : { onClick: props.onClick },
+      children: props.icon
+    }
+  );
+}
+function DefaultTextInput({
+  id,
+  className,
+  disabled,
+  readOnly,
+  "aria-label": ariaLabel,
+  value,
+  onChange,
+  placeholder,
+  maxLength,
+  inputMode,
+  type = "text",
+  min,
+  max,
+  step
+}) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id,
+      className,
+      disabled,
+      readOnly,
+      "aria-label": ariaLabel,
+      type: type === "text" ? void 0 : type,
+      inputMode,
+      min,
+      max,
+      step,
+      value,
+      placeholder,
+      maxLength,
+      onChange: (event) => onChange(event.currentTarget.value)
+    }
+  );
+}
+function DefaultTextArea({
+  id,
+  className,
+  disabled,
+  readOnly,
+  "aria-label": ariaLabel,
+  value,
+  onChange,
+  rows,
+  placeholder,
+  maxLength
+}) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      id,
+      className,
+      disabled,
+      readOnly,
+      "aria-label": ariaLabel,
+      value,
+      rows,
+      placeholder,
+      maxLength,
+      onChange: (event) => onChange(event.currentTarget.value)
+    }
+  );
+}
+function DefaultSelect({
+  id,
+  className,
+  disabled,
+  "aria-label": ariaLabel,
+  value,
+  onChange,
+  options
+}) {
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      id,
+      className,
+      disabled,
+      "aria-label": ariaLabel,
+      value,
+      onChange: (event) => onChange(event.currentTarget.value),
+      children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+    }
+  );
+}
+function DefaultCheckbox({
+  id,
+  className,
+  disabled,
+  "aria-label": ariaLabel,
+  checked,
+  onChange,
+  label
+}) {
+  return /* @__PURE__ */ jsxs("label", { className, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "checkbox",
+        disabled,
+        "aria-label": ariaLabel,
+        checked,
+        onChange: (event) => onChange(event.currentTarget.checked)
+      }
+    ),
+    label
+  ] });
+}
+function DefaultSection({
+  id,
+  className,
+  title,
+  description,
+  headingId,
+  "aria-label": ariaLabel,
+  onClickCapture,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      id,
+      className,
+      "aria-label": ariaLabel,
+      "aria-labelledby": title === void 0 ? void 0 : headingId,
+      onClickCapture,
+      children: [
+        title === void 0 ? null : /* @__PURE__ */ jsx("h2", { id: headingId, children: title }),
+        description === void 0 ? null : /* @__PURE__ */ jsx("p", { children: description }),
+        children
+      ]
+    }
+  );
+}
+function DefaultFieldset({ className, legend, disabled, children }) {
+  return /* @__PURE__ */ jsxs("fieldset", { className, disabled, children: [
+    legend === void 0 ? null : /* @__PURE__ */ jsx("legend", { children: legend }),
+    children
+  ] });
+}
+function DefaultErrorMessage({ message }) {
+  return /* @__PURE__ */ jsx("p", { className: "form-engine-builder__error", children: message });
+}
+var DEFAULT_COMPONENTS = {
+  Button: DefaultButton,
+  IconButton: DefaultIconButton,
+  TextInput: DefaultTextInput,
+  TextArea: DefaultTextArea,
+  Select: DefaultSelect,
+  Checkbox: DefaultCheckbox,
+  Section: DefaultSection,
+  Fieldset: DefaultFieldset,
+  ErrorMessage: DefaultErrorMessage
+};
+var BuilderPrimitiveContext = createContext({
+  components: DEFAULT_COMPONENTS,
+  readOnly: false
+});
+function BuilderButton(props) {
+  const context = useContext(BuilderPrimitiveContext);
+  const Component = context.components.Button;
+  return /* @__PURE__ */ jsx(Component, { ...props, disabled: context.readOnly || props.disabled === true, readOnly: context.readOnly });
+}
+function BuilderIconButton(props) {
+  const context = useContext(BuilderPrimitiveContext);
+  const Component = context.components.IconButton;
+  return /* @__PURE__ */ jsx(Component, { ...props, disabled: context.readOnly || props.disabled === true, readOnly: context.readOnly });
+}
+function BuilderTextInput(props) {
+  const context = useContext(BuilderPrimitiveContext);
+  const Component = context.components.TextInput;
+  return /* @__PURE__ */ jsx(Component, { ...props, disabled: context.readOnly || props.disabled === true, readOnly: context.readOnly });
+}
+function BuilderTextArea(props) {
+  const context = useContext(BuilderPrimitiveContext);
+  const Component = context.components.TextArea;
+  return /* @__PURE__ */ jsx(Component, { ...props, disabled: context.readOnly || props.disabled === true, readOnly: context.readOnly });
+}
+function BuilderSelect(props) {
+  const context = useContext(BuilderPrimitiveContext);
+  const Component = context.components.Select;
+  return /* @__PURE__ */ jsx(Component, { ...props, disabled: context.readOnly || props.disabled === true, readOnly: context.readOnly });
+}
+function BuilderCheckbox(props) {
+  const context = useContext(BuilderPrimitiveContext);
+  const Component = context.components.Checkbox;
+  return /* @__PURE__ */ jsx(Component, { ...props, disabled: context.readOnly || props.disabled === true, readOnly: context.readOnly });
+}
+function BuilderSection(props) {
+  const Component = useContext(BuilderPrimitiveContext).components.Section;
+  return /* @__PURE__ */ jsx(Component, { ...props });
+}
+function BuilderFieldset(props) {
+  const context = useContext(BuilderPrimitiveContext);
+  const Component = context.components.Fieldset;
+  return /* @__PURE__ */ jsx(Component, { ...props, disabled: context.readOnly || props.disabled === true });
+}
+function BuilderErrorMessage(props) {
+  const Component = useContext(BuilderPrimitiveContext).components.ErrorMessage;
+  return /* @__PURE__ */ jsx(Component, { ...props });
+}
+var GUARDED_COMPONENTS = {
+  Button: BuilderButton,
+  IconButton: BuilderIconButton,
+  TextInput: BuilderTextInput,
+  TextArea: BuilderTextArea,
+  Select: BuilderSelect,
+  Checkbox: BuilderCheckbox,
+  Section: BuilderSection,
+  Fieldset: BuilderFieldset,
+  ErrorMessage: BuilderErrorMessage
+};
 var FIELD_TYPES = [
   "text",
   "textarea",
@@ -741,37 +998,52 @@ function ConditionValueEditor({
   source,
   condition,
   onChange,
-  translate
+  translate,
+  components
 }) {
+  const { Select, TextInput } = components;
   if (condition.operator === "not_empty") return null;
   const update = (value) => onChange({ ...condition, value });
   if (source.type === "checkbox") {
-    return /* @__PURE__ */ jsxs("select", { value: String(condition.value), onChange: (event) => update(event.currentTarget.value === "true"), children: [
-      /* @__PURE__ */ jsx("option", { value: "true", children: translate("builder.conditionTrue") }),
-      /* @__PURE__ */ jsx("option", { value: "false", children: translate("builder.conditionFalse") })
-    ] });
+    return /* @__PURE__ */ jsx(
+      Select,
+      {
+        value: String(condition.value),
+        onChange: (value) => update(value === "true"),
+        options: [
+          { value: "true", label: translate("builder.conditionTrue") },
+          { value: "false", label: translate("builder.conditionFalse") }
+        ]
+      }
+    );
   }
   if (source.type === "number" || source.type === "rating") {
     return /* @__PURE__ */ jsx(
-      "input",
+      TextInput,
       {
         "aria-label": translate("builder.conditionValue"),
         type: "number",
-        value: typeof condition.value === "number" ? condition.value : "",
-        onChange: (event) => update(event.currentTarget.value === "" ? 0 : event.currentTarget.valueAsNumber)
+        value: typeof condition.value === "number" ? String(condition.value) : "",
+        onChange: (value) => update(value === "" ? 0 : Number(value))
       }
     );
   }
   if ("options" in source) {
-    return /* @__PURE__ */ jsx("select", { value: String(condition.value ?? ""), onChange: (event) => update(event.currentTarget.value), children: source.options.map((option) => /* @__PURE__ */ jsx("option", { value: option.id, children: option.label }, option.id)) });
+    return /* @__PURE__ */ jsx(
+      Select,
+      {
+        value: String(condition.value ?? ""),
+        onChange: update,
+        options: source.options.map((option) => ({ value: option.id, label: option.label }))
+      }
+    );
   }
   return /* @__PURE__ */ jsx(
-    "input",
+    TextInput,
     {
       "aria-label": translate("builder.conditionValue"),
-      type: "text",
       value: typeof condition.value === "string" ? condition.value : "",
-      onChange: (event) => update(event.currentTarget.value)
+      onChange: update
     }
   );
 }
@@ -799,8 +1071,19 @@ function FormBuilder({
   onActionError,
   createManualTranslationMetadata,
   readOnly = false,
-  features
+  features,
+  components: componentOverrides,
+  slots
 }) {
+  const resolvedComponents = { ...DEFAULT_COMPONENTS, ...componentOverrides };
+  const components = GUARDED_COMPONENTS;
+  const { Button, Checkbox, ErrorMessage, Fieldset, IconButton, Section, Select, TextInput } = components;
+  const ToolbarSlot = slots?.toolbar;
+  const FieldEditorSlot = slots?.fieldEditor;
+  const OptionEditorSlot = slots?.optionEditor;
+  const PagesSlot = slots?.pages;
+  const LocalizationSlot = slots?.localization;
+  const TranslationActionsSlot = slots?.translationActions;
   const headless = useFormBuilder({
     schema,
     onChange,
@@ -923,9 +1206,11 @@ function FormBuilder({
     setIsTranslating(true);
     setTranslationError(null);
     try {
+      const translationPolicy = policy ?? translationOptions?.policy;
       const populated = await populateSchemaTranslations(schema, [editingLocale], translationAdapter, {
         overwrite: "missing-only",
-        ...translationOptions
+        ...translationOptions,
+        ...translationPolicy === void 0 ? {} : { policy: translationPolicy }
       });
       onChange(populated.schema);
       onTranslationReport?.(populated.report);
@@ -998,8 +1283,81 @@ function FormBuilder({
   ]);
   const availableAllowedLocales = policy?.allowedLocales?.filter((candidate) => !registeredLocales.has(candidate));
   const localeLimitReached = policy?.maxLocales !== void 0 && registeredLocales.size >= policy.maxLocales;
-  return /* @__PURE__ */ jsx(
-    "section",
+  const actions = {
+    addField: (type, pageId) => executeAction(() => headless.addField(type, pageId), {
+      action: "addField",
+      ...pageId === void 0 ? { params: { type } } : { targetId: pageId, params: { type, pageId } }
+    }),
+    removeField: (fieldId) => executeAction(() => headless.removeField(fieldId), { action: "removeField", targetId: fieldId }),
+    moveField: (fieldId, targetIndex) => executeAction(() => headless.moveField(fieldId, targetIndex), {
+      action: "moveField",
+      targetId: fieldId,
+      params: { targetIndex }
+    }),
+    updateField: (fieldId, updater) => executeAction(() => headless.updateField(fieldId, updater), { action: "updateField", targetId: fieldId }),
+    changeFieldType: (fieldId, type) => executeAction(() => headless.changeFieldType(fieldId, type), {
+      action: "changeFieldType",
+      targetId: fieldId,
+      params: { type }
+    }),
+    addOption: (fieldId) => executeAction(() => headless.addOption(fieldId), { action: "addOption", targetId: fieldId }),
+    updateOption: (fieldId, optionId, updater) => executeAction(() => headless.updateOption(fieldId, optionId, updater), {
+      action: "updateOption",
+      targetId: optionId,
+      params: { fieldId }
+    }),
+    removeOption: (fieldId, optionId) => executeAction(() => headless.removeOption(fieldId, optionId), {
+      action: "removeOption",
+      targetId: optionId,
+      params: { fieldId }
+    }),
+    moveOption: (fieldId, optionId, targetIndex) => executeAction(() => headless.moveOption(fieldId, optionId, targetIndex), {
+      action: "moveOption",
+      targetId: optionId,
+      params: { fieldId, targetIndex }
+    }),
+    addPage: (questionId) => executeAction(() => headless.addPage(questionId), {
+      action: "addPage",
+      ...questionId === void 0 ? {} : { targetId: questionId, params: { questionId } }
+    }),
+    updatePage: (pageId, updater) => executeAction(() => headless.updatePage(pageId, updater), { action: "updatePage", targetId: pageId }),
+    removePage: (pageId) => executeAction(() => headless.removePage(pageId), { action: "removePage", targetId: pageId }),
+    movePage: (pageId, targetIndex) => executeAction(() => headless.movePage(pageId, targetIndex), {
+      action: "movePage",
+      targetId: pageId,
+      params: { targetIndex }
+    }),
+    assignFieldToPage: (fieldId, pageId) => executeAction(() => headless.assignFieldToPage(fieldId, pageId), {
+      action: "assignFieldToPage",
+      targetId: fieldId,
+      params: { pageId }
+    }),
+    setDisplayCondition: (fieldId, condition) => executeAction(() => headless.setDisplayCondition(fieldId, condition), {
+      action: "setDisplayCondition",
+      targetId: fieldId,
+      ...condition === void 0 ? {} : { params: { condition } }
+    }),
+    setSourceText: (target, property, text) => executeAction(() => headless.setSourceText(target, property, text), {
+      action: "setSourceText",
+      ...target.id === void 0 ? {} : { targetId: target.id },
+      params: { property, text }
+    }),
+    setLocaleTranslation: (targetLocale, target, property, text, options) => executeAction(() => headless.setLocaleTranslation(targetLocale, target, property, text, options), {
+      action: "setLocaleTranslation",
+      ...target.id === void 0 ? {} : { targetId: target.id },
+      params: { locale: targetLocale, property }
+    }),
+    addLocale: (targetLocale) => executeAction(() => headless.addLocale(targetLocale), {
+      action: "addLocale",
+      params: { locale: targetLocale }
+    }),
+    setDefaultLocale: (targetLocale) => executeAction(() => headless.setDefaultLocale(targetLocale), {
+      action: "setDefaultLocale",
+      params: { locale: targetLocale }
+    })
+  };
+  return /* @__PURE__ */ jsx(BuilderPrimitiveContext.Provider, { value: { components: resolvedComponents, readOnly }, children: /* @__PURE__ */ jsx(
+    Section,
     {
       className: `form-engine-builder ${className}`.trim(),
       "aria-label": translate("builder.formBuilder"),
@@ -1018,362 +1376,451 @@ function FormBuilder({
           addOption(fieldId);
         }
       },
-      children: /* @__PURE__ */ jsxs("fieldset", { className: "form-engine-builder__controls", disabled: readOnly, children: [
-        pagesEnabled ? /* @__PURE__ */ jsxs("section", { className: "form-engine-builder__pages", "aria-labelledby": "builder-pages-heading", children: [
-          /* @__PURE__ */ jsx("h2", { id: "builder-pages-heading", children: translate("builder.pages") }),
-          schema.pages === void 0 ? /* @__PURE__ */ jsx("button", { type: "button", onClick: enablePages, children: translate("builder.enablePages") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            schema.pages.map((page, pageIndex) => {
-              const priorQuestionIds = new Set(
-                schema.pages?.slice(0, pageIndex).flatMap((item) => item.questionIds)
-              );
-              const availableSources = schema.fields.filter((field) => priorQuestionIds.has(field.id));
-              const source = schema.fields.find((field) => field.id === page.displayCondition?.questionId);
-              return /* @__PURE__ */ jsxs("fieldset", { className: "form-engine-builder__page", children: [
-                /* @__PURE__ */ jsx("legend", { children: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}` }),
-                /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__toolbar", children: [
+      children: /* @__PURE__ */ jsxs(Fieldset, { className: "form-engine-builder__controls", disabled: readOnly, children: [
+        pagesEnabled ? PagesSlot === void 0 ? /* @__PURE__ */ jsx(
+          Section,
+          {
+            className: "form-engine-builder__pages",
+            headingId: "builder-pages-heading",
+            title: translate("builder.pages"),
+            children: schema.pages === void 0 ? /* @__PURE__ */ jsx(Button, { onClick: enablePages, children: translate("builder.enablePages") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              schema.pages.map((page, pageIndex) => {
+                const priorQuestionIds = new Set(
+                  schema.pages?.slice(0, pageIndex).flatMap((item) => item.questionIds)
+                );
+                const availableSources = schema.fields.filter((field) => priorQuestionIds.has(field.id));
+                const source = schema.fields.find((field) => field.id === page.displayCondition?.questionId);
+                return /* @__PURE__ */ jsxs(
+                  Fieldset,
+                  {
+                    className: "form-engine-builder__page",
+                    legend: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}`,
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "form-engine-builder__toolbar", children: ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(
+                          IconButton,
+                          {
+                            icon: "\u2191",
+                            title: translate("builder.moveUp", { title: page.title ?? page.id }),
+                            disabled: pageIndex === 0,
+                            onClick: () => movePage(pageIndex, -1)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          IconButton,
+                          {
+                            icon: "\u2193",
+                            title: translate("builder.moveDown", { title: page.title ?? page.id }),
+                            disabled: pageIndex === (schema.pages?.length ?? 0) - 1,
+                            onClick: () => movePage(pageIndex, 1)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Button, { onClick: () => removePage(pageIndex), variant: "danger", children: translate("builder.deleteAction") })
+                      ] }) : /* @__PURE__ */ jsx(
+                        ToolbarSlot,
+                        {
+                          schema,
+                          kind: "page",
+                          targetId: page.id,
+                          index: pageIndex,
+                          total: schema.pages?.length ?? 0,
+                          title: page.title ?? page.id,
+                          onMoveUp: () => movePage(pageIndex, -1),
+                          onMoveDown: () => movePage(pageIndex, 1),
+                          onRemove: () => removePage(pageIndex),
+                          readOnly,
+                          actions,
+                          components
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
+                        /* @__PURE__ */ jsxs("label", { children: [
+                          translate("builder.pageTitle"),
+                          /* @__PURE__ */ jsx(
+                            TextInput,
+                            {
+                              value: page.title ?? "",
+                              onChange: (value) => {
+                                updatePage(page.id, (current) => {
+                                  if (value.length > 0) return { ...current, title: value };
+                                  const { title: _title, ...withoutTitle } = current;
+                                  return withoutTitle;
+                                });
+                              }
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxs("label", { children: [
+                          translate("builder.pageDescription"),
+                          /* @__PURE__ */ jsx(
+                            TextInput,
+                            {
+                              value: page.description ?? "",
+                              onChange: (value) => {
+                                updatePage(page.id, (current) => {
+                                  if (value.length > 0) return { ...current, description: value };
+                                  const { description: _description, ...withoutDescription } = current;
+                                  return withoutDescription;
+                                });
+                              }
+                            }
+                          )
+                        ] })
+                      ] }),
+                      !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__translation-editor", children: [
+                        /* @__PURE__ */ jsx("strong", { children: editingLocale }),
+                        /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
+                          /* @__PURE__ */ jsxs("label", { children: [
+                            translate("builder.pageTitle"),
+                            /* @__PURE__ */ jsx(
+                              TextInput,
+                              {
+                                value: page.translations?.[editingLocale]?.title ?? "",
+                                onChange: (value) => updateManualTranslation({
+                                  locale: editingLocale,
+                                  kind: "page",
+                                  nodeId: page.id,
+                                  property: "title",
+                                  sourceText: page.title ?? "",
+                                  translatedText: value,
+                                  ...page.translationMetadata?.[editingLocale]?.title === void 0 ? {} : {
+                                    existingTranslationMetadata: page.translationMetadata[editingLocale]?.title
+                                  }
+                                })
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs("label", { children: [
+                            translate("builder.pageDescription"),
+                            /* @__PURE__ */ jsx(
+                              TextInput,
+                              {
+                                value: page.translations?.[editingLocale]?.description ?? "",
+                                onChange: (value) => updateManualTranslation({
+                                  locale: editingLocale,
+                                  kind: "page",
+                                  nodeId: page.id,
+                                  property: "description",
+                                  sourceText: page.description ?? "",
+                                  translatedText: value,
+                                  ...page.translationMetadata?.[editingLocale]?.description === void 0 ? {} : {
+                                    existingTranslationMetadata: page.translationMetadata[editingLocale]?.description
+                                  }
+                                })
+                              }
+                            )
+                          ] })
+                        ] })
+                      ] }),
+                      conditionsEnabled ? /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__condition", children: [
+                        /* @__PURE__ */ jsxs("label", { children: [
+                          translate("builder.pageCondition"),
+                          /* @__PURE__ */ jsx(
+                            Select,
+                            {
+                              value: page.displayCondition?.questionId ?? "",
+                              onChange: (value) => {
+                                const selected = schema.fields.find((field) => field.id === 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)
+                                    )
+                                  };
+                                });
+                              },
+                              options: [
+                                { value: "", label: translate("builder.alwaysVisible") },
+                                ...availableSources.map((field) => ({ value: field.id, label: field.title }))
+                              ]
+                            }
+                          )
+                        ] }),
+                        page.displayCondition !== void 0 && source !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(
+                            Select,
+                            {
+                              "aria-label": translate("builder.conditionOperator"),
+                              value: page.displayCondition.operator,
+                              onChange: (value) => {
+                                const operator = value;
+                                updatePage(page.id, (current) => ({
+                                  ...current,
+                                  displayCondition: conditionWithValue(
+                                    source.id,
+                                    operator,
+                                    defaultConditionValue(source)
+                                  )
+                                }));
+                              },
+                              options: conditionOperators(source).map((operator) => ({
+                                value: operator,
+                                label: translate(operatorKey(operator))
+                              }))
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            ConditionValueEditor,
+                            {
+                              source,
+                              condition: page.displayCondition,
+                              onChange: (condition) => updatePage(page.id, (current) => ({ ...current, displayCondition: condition })),
+                              translate,
+                              components
+                            }
+                          )
+                        ] }) : null
+                      ] }) : null
+                    ]
+                  },
+                  page.id
+                );
+              }),
+              /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__page-add", children: [
+                /* @__PURE__ */ jsxs("label", { children: [
+                  translate("builder.pageQuestion"),
                   /* @__PURE__ */ jsx(
-                    "button",
+                    Select,
                     {
-                      type: "button",
-                      disabled: pageIndex === 0,
-                      "aria-label": translate("builder.moveUp", { title: page.title ?? page.id }),
-                      onClick: () => movePage(pageIndex, -1),
-                      children: "\u2191"
+                      value: newPageQuestionId,
+                      disabled: movablePageQuestions.length === 0,
+                      onChange: setNewPageQuestionId,
+                      options: [
+                        { value: "", label: "\u2014" },
+                        ...schema.fields.filter((field) => movablePageQuestions.includes(field.id)).map((field) => ({ value: field.id, label: field.title }))
+                      ]
                     }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(Button, { disabled: movablePageQuestions.length === 0, onClick: addPage, children: translate("builder.addPage") })
+              ] })
+            ] })
+          }
+        ) : /* @__PURE__ */ jsx(
+          PagesSlot,
+          {
+            schema,
+            currentLocale: editingLocale,
+            readOnly,
+            actions,
+            components
+          }
+        ) : null,
+        localizationEnabled ? LocalizationSlot === void 0 ? /* @__PURE__ */ jsxs(
+          Section,
+          {
+            className: "form-engine-builder__localization",
+            headingId: "builder-localization-heading",
+            title: translate("builder.localization"),
+            children: [
+              /* @__PURE__ */ jsxs("label", { children: [
+                translate("builder.completionMessage"),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    value: schema.completionMessage ?? "",
+                    onChange: (value) => setSourceText({ kind: "form" }, "completionMessage", value)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
+                /* @__PURE__ */ jsxs("label", { children: [
+                  translate("builder.defaultLocale"),
+                  /* @__PURE__ */ jsx(TextInput, { value: schema.defaultLocale ?? "", onChange: setDefaultLocale })
+                ] }),
+                /* @__PURE__ */ jsxs("label", { htmlFor: "builder-new-locale", children: [
+                  translate("builder.addLocale"),
+                  availableAllowedLocales === void 0 ? /* @__PURE__ */ jsx(TextInput, { id: "builder-new-locale", value: newLocale, onChange: setNewLocale }) : /* @__PURE__ */ jsx(
+                    Select,
                     {
-                      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"
+                      id: "builder-new-locale",
+                      value: newLocale,
+                      onChange: setNewLocale,
+                      options: [
+                        { value: "", label: "\u2014" },
+                        ...availableAllowedLocales.map((candidate) => ({ value: candidate, label: candidate }))
+                      ]
                     }
-                  ),
-                  /* @__PURE__ */ jsx("button", { type: "button", onClick: () => removePage(pageIndex), children: translate("builder.deleteAction") })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
-                  /* @__PURE__ */ jsxs("label", { children: [
-                    translate("builder.pageTitle"),
-                    /* @__PURE__ */ 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__ */ jsxs("label", { children: [
-                    translate("builder.pageDescription"),
-                    /* @__PURE__ */ 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;
-                          });
-                        }
-                      }
-                    )
-                  ] })
+                  )
                 ] }),
-                !localizationEnabled || editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__translation-editor", children: [
-                  /* @__PURE__ */ jsx("strong", { children: editingLocale }),
-                  /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
-                    /* @__PURE__ */ jsxs("label", { children: [
-                      translate("builder.pageTitle"),
-                      /* @__PURE__ */ jsx(
-                        "input",
-                        {
-                          value: page.translations?.[editingLocale]?.title ?? "",
-                          onChange: (event) => updateManualTranslation({
-                            locale: editingLocale,
-                            kind: "page",
-                            nodeId: page.id,
-                            property: "title",
-                            sourceText: page.title ?? "",
-                            translatedText: event.currentTarget.value,
-                            ...page.translationMetadata?.[editingLocale]?.title === void 0 ? {} : {
-                              existingTranslationMetadata: page.translationMetadata[editingLocale]?.title
-                            }
-                          })
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxs("label", { children: [
-                      translate("builder.pageDescription"),
-                      /* @__PURE__ */ jsx(
-                        "input",
-                        {
-                          value: page.translations?.[editingLocale]?.description ?? "",
-                          onChange: (event) => updateManualTranslation({
-                            locale: editingLocale,
-                            kind: "page",
-                            nodeId: page.id,
-                            property: "description",
-                            sourceText: page.description ?? "",
-                            translatedText: event.currentTarget.value,
-                            ...page.translationMetadata?.[editingLocale]?.description === void 0 ? {} : {
-                              existingTranslationMetadata: page.translationMetadata[editingLocale]?.description
-                            }
-                          })
-                        }
-                      )
-                    ] })
-                  ] })
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    action: "addLocale",
+                    disabled: newLocale.trim().length === 0 || localeLimitReached,
+                    onClick: addLocale,
+                    children: translate("builder.addLocale")
+                  }
+                ),
+                /* @__PURE__ */ jsxs("label", { children: [
+                  translate("builder.editLocale"),
+                  /* @__PURE__ */ jsx(
+                    Select,
+                    {
+                      value: editingLocale,
+                      onChange: setEditingLocale,
+                      options: [
+                        { value: "", label: "\u2014" },
+                        ...(schema.supportedLocales ?? []).filter((item) => item !== schema.defaultLocale).map((item) => ({ value: item, label: item }))
+                      ]
+                    }
+                  )
                 ] }),
-                conditionsEnabled ? /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__condition", children: [
-                  /* @__PURE__ */ jsxs("label", { children: [
-                    translate("builder.pageCondition"),
-                    /* @__PURE__ */ 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__ */ jsx("option", { value: "", children: translate("builder.alwaysVisible") }),
-                          availableSources.map((field) => /* @__PURE__ */ jsx("option", { value: field.id, children: field.title }, field.id))
-                        ]
-                      }
-                    )
-                  ] }),
-                  page.displayCondition !== void 0 && source !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ 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__ */ jsx("option", { value: operator, children: translate(operatorKey(operator)) }, operator))
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      ConditionValueEditor,
-                      {
-                        source,
-                        condition: page.displayCondition,
-                        onChange: (condition) => updatePage(page.id, (current) => ({ ...current, displayCondition: condition })),
-                        translate
-                      }
-                    )
-                  ] }) : null
-                ] }) : null
-              ] }, page.id);
-            }),
-            /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__page-add", children: [
-              /* @__PURE__ */ jsxs("label", { children: [
-                translate("builder.pageQuestion"),
-                /* @__PURE__ */ jsxs(
-                  "select",
+                TranslationActionsSlot === void 0 ? /* @__PURE__ */ jsx(
+                  Button,
                   {
-                    value: newPageQuestionId,
-                    disabled: movablePageQuestions.length === 0,
-                    onChange: (event) => setNewPageQuestionId(event.currentTarget.value),
-                    children: [
-                      /* @__PURE__ */ jsx("option", { value: "", children: "\u2014" }),
-                      schema.fields.filter((field) => movablePageQuestions.includes(field.id)).map((field) => /* @__PURE__ */ jsx("option", { value: field.id, children: field.title }, field.id))
-                    ]
+                    disabled: translationAdapter === void 0 || editingLocale.length === 0 || isTranslating,
+                    onClick: () => void translateAll(),
+                    children: translate("builder.autoTranslate")
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  TranslationActionsSlot,
+                  {
+                    schema,
+                    currentLocale: editingLocale,
+                    onAutoTranslate: () => void translateAll(),
+                    isTranslating,
+                    readOnly,
+                    actions,
+                    components
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx("button", { type: "button", disabled: movablePageQuestions.length === 0, onClick: addPage, children: translate("builder.addPage") })
-            ] })
-          ] })
-        ] }) : null,
-        localizationEnabled ? /* @__PURE__ */ jsxs("section", { className: "form-engine-builder__localization", "aria-labelledby": "builder-localization-heading", children: [
-          /* @__PURE__ */ jsx("h2", { id: "builder-localization-heading", children: translate("builder.localization") }),
-          /* @__PURE__ */ jsxs("label", { children: [
-            translate("builder.completionMessage"),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                value: schema.completionMessage ?? "",
-                onChange: (event) => setSourceText({ kind: "form" }, "completionMessage", event.currentTarget.value)
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
-            /* @__PURE__ */ jsxs("label", { children: [
-              translate("builder.defaultLocale"),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  value: schema.defaultLocale ?? "",
-                  onChange: (event) => setDefaultLocale(event.currentTarget.value)
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("label", { htmlFor: "builder-new-locale", children: [
-              translate("builder.addLocale"),
-              availableAllowedLocales === void 0 ? /* @__PURE__ */ jsx(
-                "input",
-                {
-                  id: "builder-new-locale",
-                  value: newLocale,
-                  onChange: (event) => setNewLocale(event.currentTarget.value)
-                }
-              ) : /* @__PURE__ */ jsxs(
-                "select",
-                {
-                  id: "builder-new-locale",
-                  value: newLocale,
-                  onChange: (event) => setNewLocale(event.currentTarget.value),
-                  children: [
-                    /* @__PURE__ */ jsx("option", { value: "", children: "\u2014" }),
-                    availableAllowedLocales.map((candidate) => /* @__PURE__ */ jsx("option", { value: candidate, children: candidate }, candidate))
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "data-builder-action": "addLocale",
-                disabled: newLocale.trim().length === 0 || localeLimitReached,
-                onClick: addLocale,
-                children: translate("builder.addLocale")
-              }
-            ),
-            /* @__PURE__ */ jsxs("label", { children: [
-              translate("builder.editLocale"),
-              /* @__PURE__ */ jsxs("select", { value: editingLocale, onChange: (event) => setEditingLocale(event.currentTarget.value), children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: "\u2014" }),
-                (schema.supportedLocales ?? []).filter((item) => item !== schema.defaultLocale).map((item) => /* @__PURE__ */ jsx("option", { value: item, children: item }, item))
+              translationAdapter === void 0 ? /* @__PURE__ */ jsx("p", { children: translate("builder.translationUnavailable") }) : null,
+              translationError === null ? null : /* @__PURE__ */ jsx(ErrorMessage, { message: translationError }),
+              editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
+                /* @__PURE__ */ jsxs("label", { children: [
+                  translate("builder.questionTitle"),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      value: schema.translations?.[editingLocale]?.title ?? "",
+                      onChange: (value) => updateFormTranslation("title", value)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("label", { children: [
+                  translate("builder.pageDescription"),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      value: schema.translations?.[editingLocale]?.description ?? "",
+                      onChange: (value) => updateFormTranslation("description", value)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("label", { children: [
+                  translate("builder.completionMessage"),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      value: schema.translations?.[editingLocale]?.completionMessage ?? "",
+                      onChange: (value) => updateFormTranslation("completionMessage", value)
+                    }
+                  )
+                ] })
               ] })
-            ] }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                disabled: translationAdapter === void 0 || editingLocale.length === 0 || isTranslating,
-                onClick: () => void translateAll(),
-                children: translate("builder.autoTranslate")
-              }
-            )
-          ] }),
-          translationAdapter === void 0 ? /* @__PURE__ */ jsx("p", { children: translate("builder.translationUnavailable") }) : null,
-          translationError === null ? null : /* @__PURE__ */ jsx("p", { className: "form-engine-builder__error", children: translationError }),
-          editingLocale.length === 0 ? null : /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
-            /* @__PURE__ */ jsxs("label", { children: [
-              translate("builder.questionTitle"),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  value: schema.translations?.[editingLocale]?.title ?? "",
-                  onChange: (event) => updateFormTranslation("title", event.currentTarget.value)
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("label", { children: [
-              translate("builder.pageDescription"),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  value: schema.translations?.[editingLocale]?.description ?? "",
-                  onChange: (event) => updateFormTranslation("description", event.currentTarget.value)
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("label", { children: [
-              translate("builder.completionMessage"),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  value: schema.translations?.[editingLocale]?.completionMessage ?? "",
-                  onChange: (event) => updateFormTranslation("completionMessage", event.currentTarget.value)
-                }
-              )
-            ] })
-          ] })
-        ] }) : null,
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(
+          LocalizationSlot,
+          {
+            schema,
+            currentLocale: editingLocale,
+            onCurrentLocaleChange: setEditingLocale,
+            onAutoTranslate: () => void translateAll(),
+            isTranslating,
+            ...translationError === null ? {} : { translationError },
+            readOnly,
+            actions,
+            components
+          }
+        ) : null,
         /* @__PURE__ */ jsx("div", { className: "form-engine-builder__list", children: schema.fields.map((field, index) => {
           const condition = field.displayCondition;
           const source = condition === void 0 ? void 0 : schema.fields.find((item) => item.id === condition.questionId);
           const availableSources = schema.fields.slice(0, index);
-          return /* @__PURE__ */ jsxs("fieldset", { className: "form-engine-builder__question", children: [
-            /* @__PURE__ */ jsx("legend", { children: field.title }),
-            /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__toolbar", children: [
+          if (FieldEditorSlot !== void 0) {
+            return /* @__PURE__ */ jsx(
+              FieldEditorSlot,
+              {
+                schema,
+                field,
+                index,
+                currentLocale: editingLocale,
+                ...policy === void 0 ? {} : { policy },
+                readOnly,
+                actions,
+                components
+              },
+              field.id
+            );
+          }
+          return /* @__PURE__ */ jsxs(Fieldset, { className: "form-engine-builder__question", legend: field.title, children: [
+            /* @__PURE__ */ jsx("div", { className: "form-engine-builder__toolbar", children: ToolbarSlot === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(
-                "button",
+                IconButton,
                 {
-                  type: "button",
+                  icon: "\u2191",
+                  title: translate("builder.moveUp", { title: field.title }),
                   disabled: index === 0,
-                  onClick: () => moveField(index, -1),
-                  "aria-label": translate("builder.moveUp", { title: field.title }),
-                  children: "\u2191"
+                  onClick: () => moveField(index, -1)
                 }
               ),
               /* @__PURE__ */ jsx(
-                "button",
+                IconButton,
                 {
-                  type: "button",
+                  icon: "\u2193",
+                  title: translate("builder.moveDown", { title: field.title }),
                   disabled: index === schema.fields.length - 1,
-                  onClick: () => moveField(index, 1),
-                  "aria-label": translate("builder.moveDown", { title: field.title }),
-                  children: "\u2193"
+                  onClick: () => moveField(index, 1)
                 }
               ),
               /* @__PURE__ */ jsx(
-                "button",
+                Button,
                 {
-                  type: "button",
                   disabled: schema.fields.length === 1,
                   onClick: () => removeField(field.id),
                   "aria-label": translate("builder.delete", { title: field.title }),
+                  variant: "danger",
                   children: translate("builder.deleteAction")
                 }
               )
-            ] }),
+            ] }) : /* @__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: "form-engine-builder__grid", children: [
               /* @__PURE__ */ jsxs("label", { children: [
                 translate("builder.questionTitle"),
                 /* @__PURE__ */ jsx(
-                  "input",
+                  TextInput,
                   {
                     value: field.title,
                     placeholder: translate("builder.questionTitlePlaceholder"),
-                    onChange: (event) => updateField(field.id, (current) => ({
+                    onChange: (value) => updateField(field.id, (current) => ({
                       ...current,
-                      title: event.currentTarget.value.trim().length === 0 ? current.title : event.currentTarget.value
+                      title: value.trim().length === 0 ? current.title : value
                     }))
                   }
                 )
@@ -1381,36 +1828,37 @@ function FormBuilder({
               /* @__PURE__ */ jsxs("label", { children: [
                 translate("builder.type"),
                 /* @__PURE__ */ jsx(
-                  "select",
+                  Select,
                   {
                     value: field.type,
-                    onChange: (event) => changeType(field.id, event.currentTarget.value),
-                    children: FIELD_TYPES.filter(
+                    onChange: (value) => changeType(field.id, value),
+                    options: FIELD_TYPES.filter(
                       (type) => policy?.allowedFieldTypes === void 0 || policy.allowedFieldTypes.includes(type)
-                    ).map((type) => /* @__PURE__ */ jsx("option", { value: type, children: translate(fieldTypeKey(type)) }, type))
+                    ).map((type) => ({ value: type, label: translate(fieldTypeKey(type)) }))
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs("label", { className: "form-engine-builder__check", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: field.required === true,
-                    onChange: (event) => updateField(field.id, (current) => ({ ...current, required: event.currentTarget.checked }))
-                  }
-                ),
-                translate("builder.required")
-              ] })
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  className: "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__ */ jsxs("label", { children: [
               translate("builder.questionPage"),
               /* @__PURE__ */ jsx(
-                "select",
+                Select,
                 {
                   value: pageForField(field.id)?.id ?? "",
-                  onChange: (event) => assignFieldToPage(field.id, event.currentTarget.value),
-                  children: schema.pages.map((page, pageIndex) => /* @__PURE__ */ jsx("option", { value: page.id, children: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}` }, page.id))
+                  onChange: (value) => assignFieldToPage(field.id, value),
+                  options: schema.pages.map((page, pageIndex) => ({
+                    value: page.id,
+                    label: page.title ?? `${translate("builder.newPage")} ${pageIndex + 1}`
+                  }))
                 }
               )
             ] }),
@@ -1420,16 +1868,16 @@ function FormBuilder({
                 /* @__PURE__ */ jsxs("label", { children: [
                   translate("builder.questionTitle"),
                   /* @__PURE__ */ jsx(
-                    "input",
+                    TextInput,
                     {
                       value: field.translations?.[editingLocale]?.title ?? "",
-                      onChange: (event) => updateManualTranslation({
+                      onChange: (value) => updateManualTranslation({
                         locale: editingLocale,
                         kind: "field",
                         nodeId: field.id,
                         property: "title",
                         sourceText: field.title,
-                        translatedText: event.currentTarget.value,
+                        translatedText: value,
                         ...field.translationMetadata?.[editingLocale]?.title === void 0 ? {} : {
                           existingTranslationMetadata: field.translationMetadata[editingLocale]?.title
                         }
@@ -1440,16 +1888,16 @@ function FormBuilder({
                 /* @__PURE__ */ jsxs("label", { children: [
                   translate("builder.pageDescription"),
                   /* @__PURE__ */ jsx(
-                    "input",
+                    TextInput,
                     {
                       value: field.translations?.[editingLocale]?.description ?? "",
-                      onChange: (event) => updateManualTranslation({
+                      onChange: (value) => updateManualTranslation({
                         locale: editingLocale,
                         kind: "field",
                         nodeId: field.id,
                         property: "description",
                         sourceText: field.description ?? "",
-                        translatedText: event.currentTarget.value,
+                        translatedText: value,
                         ...field.translationMetadata?.[editingLocale]?.description === void 0 ? {} : {
                           existingTranslationMetadata: field.translationMetadata[editingLocale]?.description
                         }
@@ -1464,16 +1912,16 @@ function FormBuilder({
                 editingLocale,
                 ")",
                 /* @__PURE__ */ jsx(
-                  "input",
+                  TextInput,
                   {
                     value: option.translations?.[editingLocale] ?? "",
-                    onChange: (event) => updateManualTranslation({
+                    onChange: (value) => updateManualTranslation({
                       locale: editingLocale,
                       kind: "option",
                       nodeId: option.id,
                       property: "label",
                       sourceText: option.label,
-                      translatedText: event.currentTarget.value,
+                      translatedText: value,
                       ...option.translationMetadata?.[editingLocale]?.label === void 0 ? {} : {
                         existingTranslationMetadata: option.translationMetadata[editingLocale]?.label
                       }
@@ -1486,12 +1934,12 @@ function FormBuilder({
               /* @__PURE__ */ jsxs("label", { children: [
                 translate("builder.minimum"),
                 /* @__PURE__ */ jsx(
-                  "input",
+                  TextInput,
                   {
                     type: "number",
-                    value: field.min ?? 1,
-                    onChange: (event) => {
-                      const min = event.currentTarget.valueAsNumber;
+                    value: String(field.min ?? 1),
+                    onChange: (value) => {
+                      const min = Number(value);
                       if (!Number.isInteger(min)) return;
                       updateField(
                         field.id,
@@ -1504,12 +1952,12 @@ function FormBuilder({
               /* @__PURE__ */ jsxs("label", { children: [
                 translate("builder.maximum"),
                 /* @__PURE__ */ jsx(
-                  "input",
+                  TextInput,
                   {
                     type: "number",
-                    value: field.max ?? 5,
-                    onChange: (event) => {
-                      const max = event.currentTarget.valueAsNumber;
+                    value: String(field.max ?? 5),
+                    onChange: (value) => {
+                      const max = Number(value);
                       if (!Number.isInteger(max)) return;
                       updateField(
                         field.id,
@@ -1522,52 +1970,82 @@ function FormBuilder({
             ] }) : null,
             "options" in field ? /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__options", children: [
               /* @__PURE__ */ jsx("strong", { children: translate("builder.options") }),
-              field.options.map((option, optionIndex) => /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__option", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    "aria-label": translate("builder.optionLabel", { index: optionIndex + 1 }),
-                    value: option.label,
-                    placeholder: translate("builder.optionLabelPlaceholder"),
-                    onChange: (event) => event.currentTarget.value.trim().length === 0 ? void 0 : updateOption(field.id, option.id, event.currentTarget.value)
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    disabled: optionIndex === 0,
-                    "aria-label": translate("builder.moveUp", { title: option.label }),
-                    onClick: () => moveOption(field.id, option.id, optionIndex - 1),
-                    children: "\u2191"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    disabled: optionIndex === field.options.length - 1,
-                    "aria-label": translate("builder.moveDown", { title: option.label }),
-                    onClick: () => moveOption(field.id, option.id, optionIndex + 1),
-                    children: "\u2193"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
+              field.options.map(
+                (option, optionIndex) => OptionEditorSlot === void 0 ? /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__option", children: [
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      "aria-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,
+                      {
+                        icon: "\u2191",
+                        title: translate("builder.moveUp", { title: option.label }),
+                        disabled: optionIndex === 0,
+                        onClick: () => moveOption(field.id, option.id, optionIndex - 1)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        icon: "\u2193",
+                        title: translate("builder.moveDown", { title: option.label }),
+                        disabled: optionIndex === field.options.length - 1,
+                        onClick: () => moveOption(field.id, option.id, optionIndex + 1)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        disabled: field.options.length === 1,
+                        onClick: () => removeOption(field.id, option.id),
+                        variant: "danger",
+                        children: translate("builder.remove")
+                      }
+                    )
+                  ] }) : /* @__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,
                   {
-                    type: "button",
-                    disabled: field.options.length === 1,
-                    onClick: () => removeOption(field.id, option.id),
-                    children: translate("builder.remove")
-                  }
+                    schema,
+                    field,
+                    option,
+                    index: optionIndex,
+                    currentLocale: editingLocale,
+                    readOnly,
+                    actions,
+                    components
+                  },
+                  option.id
                 )
-              ] }, option.id)),
+              ),
               /* @__PURE__ */ jsx(
-                "button",
+                Button,
                 {
-                  type: "button",
-                  "data-builder-action": "addOption",
-                  "data-target-id": field.id,
+                  action: "addOption",
+                  targetId: field.id,
                   disabled: policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
                   onClick: () => addOption(field.id),
                   children: translate("builder.addOption")
@@ -1577,12 +2055,12 @@ function FormBuilder({
             conditionsEnabled ? /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__condition", children: [
               /* @__PURE__ */ jsxs("label", { children: [
                 translate("builder.displayCondition"),
-                /* @__PURE__ */ jsxs(
-                  "select",
+                /* @__PURE__ */ jsx(
+                  Select,
                   {
                     value: condition?.questionId ?? "",
-                    onChange: (event) => {
-                      const selected = schema.fields.find((item) => item.id === event.currentTarget.value);
+                    onChange: (value) => {
+                      const selected = schema.fields.find((item) => item.id === value);
                       setDisplayCondition(
                         field.id,
                         selected === void 0 ? void 0 : conditionWithValue(
@@ -1592,27 +2070,30 @@ function FormBuilder({
                         )
                       );
                     },
-                    children: [
-                      /* @__PURE__ */ jsx("option", { value: "", children: translate("builder.alwaysVisible") }),
-                      availableSources.map((candidate) => /* @__PURE__ */ jsx("option", { value: candidate.id, children: candidate.title }, candidate.id))
+                    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",
+                  Select,
                   {
                     "aria-label": translate("builder.conditionOperator"),
                     value: condition.operator,
-                    onChange: (event) => {
-                      const operator = event.currentTarget.value;
+                    onChange: (value) => {
+                      const operator = value;
                       setDisplayCondition(
                         field.id,
                         conditionWithValue(source.id, operator, defaultConditionValue(source))
                       );
                     },
-                    children: conditionOperators(source).map((operator) => /* @__PURE__ */ jsx("option", { value: operator, children: translate(operatorKey(operator)) }, operator))
+                    options: conditionOperators(source).map((operator) => ({
+                      value: operator,
+                      label: translate(operatorKey(operator))
+                    }))
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -1621,7 +2102,8 @@ function FormBuilder({
                     source,
                     condition,
                     onChange: (next) => setDisplayCondition(field.id, next),
-                    translate
+                    translate,
+                    components
                   }
                 )
               ] }) : null
@@ -1629,11 +2111,10 @@ function FormBuilder({
           ] }, field.id);
         }) }),
         /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
             className: "form-engine-builder__add",
-            type: "button",
-            "data-builder-action": "addField",
+            action: "addField",
             disabled: initialFieldType === null || maxFieldsReached,
             onClick: addField,
             children: translate("builder.addQuestion")
@@ -1641,7 +2122,7 @@ function FormBuilder({
         )
       ] })
     }
-  );
+  ) });
 }
 
 // src/context.tsx
@@ -1654,9 +2135,9 @@ import {
   validateAnswers,
   validatePageAnswers
 } from "@form-engine-ts/core";
-import { createContext, useCallback as useCallback2, useContext, useEffect, useMemo as useMemo2, useState as useState2 } from "react";
+import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect, useMemo as useMemo2, useState as useState2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var FormContext = createContext(null);
+var FormContext = createContext2(null);
 function issuesByField(issues) {
   const result = {};
   for (const issue of issues) result[issue.fieldId] ??= issue;
@@ -1810,7 +2291,7 @@ function FormProvider({
   return /* @__PURE__ */ jsx2(FormContext.Provider, { value: contextValue, children });
 }
 function useForm() {
-  const context = useContext(FormContext);
+  const context = useContext2(FormContext);
   if (context === null) throw new Error("useForm must be called inside a FormProvider.");
   return context;
 }