@form-engine-ts/react 4.3.2 → 4.5.0

package/dist/index.js

@@ -102,7 +102,7 @@ import {
   DEFAULT_FIELD_TYPE_DEFINITIONS,
   populateSchemaTranslations
 } from "@form-engine-ts/core";
-import { Children, createContext, isValidElement, useContext, useState } from "react";
+import { Children, createContext, isValidElement, useContext, useState as useState2 } from "react";
 
 // src/hooks/useFormBuilder.ts
 import {
@@ -110,7 +110,7 @@ import {
   transformFieldType,
   validateFormSchema
 } from "@form-engine-ts/core";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 var DEFAULT_PREFIXES = { field: "q", option: "opt", page: "page" };
 var CHOICE_TYPES = ["select", "radio", "multi-select"];
 function defaultIdFactory(kind, existingIds) {
@@ -197,8 +197,20 @@ function move(items, sourceIndex, targetIndex) {
   result.splice(targetIndex, 0, item);
   return result;
 }
+function displayRuleSourceIds(field) {
+  if (field.displayRule === void 0) return [];
+  const ids = [];
+  const visit = (group) => {
+    for (const condition of group.conditions) {
+      if ("logic" in condition) visit(condition);
+      else ids.push(condition.fieldId);
+    }
+  };
+  visit(field.displayRule.condition);
+  return ids;
+}
 function withoutDisplayCondition(field) {
-  const { displayCondition: _displayCondition, ...rest } = field;
+  const { displayCondition: _displayCondition, displayRule: _displayRule, ...rest } = field;
   return rest;
 }
 function removeLocalizedProperty(translations, locale, property) {
@@ -221,8 +233,23 @@ function useFormBuilder({
   onChange,
   policy,
   idFactory = defaultIdFactory,
-  factories = {}
+  factories = {},
+  fieldEditorMode = "all",
+  activeFieldId: controlledActiveFieldId,
+  defaultActiveFieldId,
+  onActiveFieldChange
 }) {
+  const [internalActiveFieldId, setInternalActiveFieldId] = useState(
+    defaultActiveFieldId ?? (fieldEditorMode === "single" ? schema.fields[0]?.id : void 0)
+  );
+  const activeFieldId = controlledActiveFieldId ?? internalActiveFieldId;
+  const setActiveFieldId = useCallback(
+    (fieldId) => {
+      if (controlledActiveFieldId === void 0) setInternalActiveFieldId(fieldId);
+      onActiveFieldChange?.(fieldId);
+    },
+    [controlledActiveFieldId, onActiveFieldChange]
+  );
   const createId = useCallback(
     (kind, existingIds) => {
       const rawId = idFactory(kind, existingIds);
@@ -335,9 +362,10 @@ function useFormBuilder({
         questionIds: page.id === pageId || pageId === void 0 && index === (schema.pages?.length ?? 0) - 1 ? [...page.questionIds, field.id] : page.questionIds
       }));
       onChange({ ...schema, fields: [...schema.fields, field], ...pages === void 0 ? {} : { pages } });
+      setActiveFieldId(field.id);
       return { success: true };
     },
-    [createId, factories, onChange, policy, schema]
+    [createId, factories, onChange, policy, schema, setActiveFieldId]
   );
   const removeField = useCallback(
     (fieldId) => {
@@ -345,15 +373,19 @@ function useFormBuilder({
         return { success: false, error: { type: "node_not_found", kind: "field", id: fieldId } };
       if (schema.fields.length <= 1)
         return { success: false, error: { type: "invalid_operation", message: "A form must contain one field." } };
-      const fields = schema.fields.filter((field) => field.id !== fieldId).map((field) => field.displayCondition?.questionId === fieldId ? withoutDisplayCondition(field) : field);
+      const removedIndex = schema.fields.findIndex((field) => field.id === fieldId);
+      const fields = schema.fields.filter((field) => field.id !== fieldId).map(
+        (field) => field.displayCondition?.questionId === fieldId || displayRuleSourceIds(field).includes(fieldId) ? withoutDisplayCondition(field) : field
+      );
       const pages = schema.pages?.map((page) => ({ ...page, questionIds: page.questionIds.filter((id) => id !== fieldId) })).filter((page) => page.questionIds.length > 0);
       if (schema.pages !== void 0 && pages?.length === 0) {
         const { pages: _pages, ...single } = schema;
         onChange({ ...single, fields });
       } else onChange({ ...schema, fields, ...pages === void 0 ? {} : { pages } });
+      if (activeFieldId === fieldId) setActiveFieldId(fields[removedIndex]?.id ?? fields.at(-1)?.id);
       return { success: true };
     },
-    [onChange, schema]
+    [activeFieldId, onChange, schema, setActiveFieldId]
   );
   const moveField = useCallback(
     (fieldId, targetIndex) => {
@@ -366,8 +398,8 @@ function useFormBuilder({
       onChange({
         ...schema,
         fields: fields.map((field, index) => {
-          const source = field.displayCondition?.questionId;
-          return source === void 0 || (indexById.get(source) ?? index) < index ? field : withoutDisplayCondition(field);
+          const sources = field.displayCondition?.questionId === void 0 ? displayRuleSourceIds(field) : [field.displayCondition.questionId];
+          return sources.every((source) => (indexById.get(source) ?? index) < index) ? field : withoutDisplayCondition(field);
         })
       });
       return { success: true };
@@ -791,6 +823,14 @@ function useFormBuilder({
     const result = validateFormSchema(schema, policy === void 0 ? {} : { policy });
     return result.valid ? [] : result.issues;
   }, [policy, schema]);
+  const getFieldEditorProps = useCallback(
+    (fieldId) => ({
+      isActive: activeFieldId === fieldId,
+      isVisible: fieldEditorMode === "all" || activeFieldId === fieldId,
+      onSelect: () => setActiveFieldId(fieldId)
+    }),
+    [activeFieldId, fieldEditorMode, setActiveFieldId]
+  );
   return {
     schema,
     addField,
@@ -812,7 +852,10 @@ function useFormBuilder({
     setLocaleTranslation,
     addLocale,
     setDefaultLocale,
-    validationIssues
+    validationIssues,
+    ...activeFieldId === void 0 ? {} : { activeFieldId },
+    setActiveFieldId,
+    getFieldEditorProps
   };
 }
 
@@ -1465,7 +1508,10 @@ var BUILDER_DEFAULTS = {
   "builder.operator.equals": "equals",
   "builder.operator.not_equals": "does not equal",
   "builder.operator.contains": "contains",
-  "builder.operator.not_empty": "is not empty"
+  "builder.operator.not_empty": "is not empty",
+  "builder.submissionSettings": "Submission settings",
+  "builder.showConfirmationBeforeSubmit": "Show confirmation before submit",
+  "builder.confirmationRenderMode": "Confirmation display mode"
 };
 function BuilderSectionGroup({ children }) {
   return children;
@@ -1642,7 +1688,12 @@ function FormBuilder({
   slots,
   sectionOrder,
   disableDefaultStyles = false,
-  unstyled = false
+  unstyled = false,
+  fieldEditorMode = "all",
+  activeFieldId,
+  defaultActiveFieldId,
+  onActiveFieldChange,
+  submissionSettingsOptions
 }) {
   const resolvedComponents = { ...DEFAULT_COMPONENTS, ...componentOverrides };
   const components = {
@@ -1665,14 +1716,18 @@ function FormBuilder({
     onChange,
     ...policy === void 0 ? {} : { policy },
     ...idFactory === void 0 ? {} : { idFactory },
-    ...factories === void 0 ? {} : { factories }
+    ...factories === void 0 ? {} : { factories },
+    fieldEditorMode,
+    ...activeFieldId === void 0 ? {} : { activeFieldId },
+    ...defaultActiveFieldId === void 0 ? {} : { defaultActiveFieldId },
+    ...onActiveFieldChange === void 0 ? {} : { onActiveFieldChange }
   });
-  const [newPageQuestionId, setNewPageQuestionId] = useState("");
-  const [newLocale, setNewLocale] = useState("");
-  const [editingLocale, setEditingLocale] = useState("");
-  const [isTranslating, setIsTranslating] = useState(false);
-  const [translationError, setTranslationError] = useState(null);
-  const [translationReport, setTranslationReport] = useState();
+  const [newPageQuestionId, setNewPageQuestionId] = useState2("");
+  const [newLocale, setNewLocale] = useState2("");
+  const [editingLocale, setEditingLocale] = useState2("");
+  const [isTranslating, setIsTranslating] = useState2(false);
+  const [translationError, setTranslationError] = useState2(null);
+  const [translationReport, setTranslationReport] = useState2();
   const translate = (key, params = {}) => resolveTranslation(
     key,
     BUILDER_TRANSLATION_ALIASES[key] === void 0 ? [] : [BUILDER_TRANSLATION_ALIASES[key]],
@@ -2005,6 +2060,47 @@ function FormBuilder({
                 ] })
               }
             ) }),
+            /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "submissionSettings", children: submissionSettingsOptions?.enabled ? /* @__PURE__ */ jsxs(
+              Section,
+              {
+                className: builderClass("form-engine-builder__submission-settings"),
+                title: translate("builder.submissionSettings"),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      id: "builder-show-confirmation",
+                      label: translate("builder.showConfirmationBeforeSubmit"),
+                      checked: schema.submissionSettings?.showConfirmationBeforeSubmit === true,
+                      onChange: (checked) => onChange({
+                        ...schema,
+                        submissionSettings: { ...schema.submissionSettings, showConfirmationBeforeSubmit: checked }
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Select,
+                    {
+                      id: "builder-confirmation-render-mode",
+                      label: translate("builder.confirmationRenderMode"),
+                      value: schema.submissionSettings?.confirmationRenderMode ?? "inline",
+                      options: [
+                        { value: "dialog", label: "Dialog" },
+                        { value: "inline", label: "Inline" },
+                        { value: "replace", label: "Replace" }
+                      ],
+                      onChange: (value) => {
+                        if (value !== "dialog" && value !== "inline" && value !== "replace") return;
+                        onChange({
+                          ...schema,
+                          submissionSettings: { ...schema.submissionSettings, confirmationRenderMode: value }
+                        });
+                      }
+                    }
+                  )
+                ]
+              }
+            ) : null }),
             resolvedSectionOrder === void 0 ? null : /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "completionMessage", children: /* @__PURE__ */ jsx(Section, { headingId: "builder-completion-message-heading", title: translate("builder.completionMessage"), children: /* @__PURE__ */ jsx(
               TextInput,
               {
@@ -2403,9 +2499,25 @@ function FormBuilder({
             ) : null }),
             /* @__PURE__ */ jsx(BuilderSectionGroup, { name: "questions", children: /* @__PURE__ */ jsx("div", { className: builderClass("form-engine-builder__list"), children: schema.fields.map((field, index) => {
               const controls = resolveFieldEditorControls(fieldEditorControls);
+              const editorState = headless.getFieldEditorProps?.(field.id) ?? {
+                isActive: true,
+                isVisible: true,
+                onSelect: () => void 0
+              };
               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);
+              if (!editorState.isVisible) {
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: builderClass("form-engine-builder__question-preview"),
+                    "data-field-id": field.id,
+                    children: /* @__PURE__ */ jsx("button", { type: "button", onClick: editorState.onSelect, children: field.title })
+                  },
+                  field.id
+                );
+              }
               if (FieldEditorSlot !== void 0) {
                 return /* @__PURE__ */ jsx(
                   FieldEditorSlot,
@@ -2901,7 +3013,7 @@ import {
   validateAnswers,
   validatePageAnswers
 } from "@form-engine-ts/core";
-import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect, useMemo as useMemo2, useRef, useState as useState3 } from "react";
 
 // src/types.ts
 var FormSubmissionError = class extends Error {
@@ -2948,11 +3060,11 @@ function FormProvider({
     assertValidFormSchema(localized);
     return localized;
   }, [locale, schema]);
-  const [values, setValues] = useState2(() => ({ ...initialValues }));
-  const [errors, setErrors] = useState2({});
-  const [submitStatus, setSubmitStatus] = useState2("idle");
-  const [submitError, setSubmitError] = useState2(null);
-  const [validationPageIndex, setValidationPageIndex] = useState2(null);
+  const [values, setValues] = useState3(() => ({ ...initialValues }));
+  const [errors, setErrors] = useState3({});
+  const [submitStatus, setSubmitStatus] = useState3("idle");
+  const [submitError, setSubmitError] = useState3(null);
+  const [validationPageIndex, setValidationPageIndex] = useState3(null);
   const submissionInFlight = useRef(false);
   const visibility = useMemo2(() => calculateFieldVisibility(validSchema, values), [validSchema, values]);
   const pageVisibility = useMemo2(() => calculatePageVisibility(validSchema, values), [validSchema, values]);
@@ -3121,8 +3233,237 @@ function useField(fieldId) {
   return { field, value: form.values[fieldId], error: form.errors[fieldId], setValue };
 }
 
+// src/hooks/useTranslationWorkspace.ts
+import {
+  collectSchemaLocales as collectSchemaLocales2,
+  collectTranslationSlots,
+  computeSourceTextHash,
+  populateSchemaTranslations as populateSchemaTranslations2
+} from "@form-engine-ts/core";
+import { useCallback as useCallback3, useMemo as useMemo3, useState as useState4 } from "react";
+function updateTranslationMap(translations, locale, property, text) {
+  if (property === "label") return translations ?? {};
+  const current = translations?.[locale];
+  const next = { ...current, [property]: text };
+  return { ...translations, [locale]: next };
+}
+function asAsyncAdapter(adapter) {
+  if ("translateBatch" in adapter) return adapter;
+  return {
+    translateText: async (text, locale, sourceLocale) => adapter.translate(text, locale, sourceLocale === void 0 ? void 0 : { sourceLocale }) ?? text,
+    translateBatch: async (texts, locale, sourceLocale) => texts.map(
+      (text) => adapter.translate(text, locale, sourceLocale === void 0 ? void 0 : { sourceLocale }) ?? text
+    )
+  };
+}
+function manualMetadata(sourceText, sourceLocale) {
+  return {
+    sourceLocale,
+    sourceTextHash: computeSourceTextHash(sourceText),
+    translationSource: "manual",
+    editedAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+function setNodeMetadata(node, slot, text, sourceLocale) {
+  const localeMetadata = node.translationMetadata?.[slot.locale];
+  const nextMetadata = text.trim().length === 0 ? Object.fromEntries(Object.entries(localeMetadata ?? {}).filter(([key]) => key !== slot.property)) : { ...localeMetadata, [slot.property]: manualMetadata(slot.sourceText, sourceLocale) };
+  return { ...node, translationMetadata: { ...node.translationMetadata, [slot.locale]: nextMetadata } };
+}
+function updateSchemaTranslation(schema, slot, text, sourceLocale) {
+  if (slot.kind === "form") {
+    return setNodeMetadata(
+      { ...schema, translations: updateTranslationMap(schema.translations, slot.locale, slot.property, text) },
+      slot,
+      text,
+      sourceLocale
+    );
+  }
+  if (slot.kind === "field") {
+    return {
+      ...schema,
+      fields: schema.fields.map((field) => {
+        if (field.id !== slot.nodeId) return field;
+        const translations = updateTranslationMap(field.translations, slot.locale, slot.property, text);
+        return setNodeMetadata({ ...field, translations }, slot, text, sourceLocale);
+      })
+    };
+  }
+  if (slot.kind === "option") {
+    return {
+      ...schema,
+      fields: schema.fields.map((field) => {
+        if (!("options" in field)) return field;
+        return {
+          ...field,
+          options: field.options.map((option) => {
+            if (option.id !== slot.nodeId) return option;
+            const translations = text.trim().length === 0 ? Object.fromEntries(
+              Object.entries(option.translations ?? {}).filter(([locale]) => locale !== slot.locale)
+            ) : { ...option.translations, [slot.locale]: text };
+            return setNodeMetadata({ ...option, translations }, slot, text, sourceLocale);
+          })
+        };
+      })
+    };
+  }
+  return {
+    ...schema,
+    ...schema.pages === void 0 ? {} : {
+      pages: schema.pages.map((page) => {
+        if (page.id !== slot.nodeId) return page;
+        const translations = updateTranslationMap(page.translations, slot.locale, slot.property, text);
+        return setNodeMetadata({ ...page, translations }, slot, text, sourceLocale);
+      })
+    }
+  };
+}
+function useTranslationWorkspace({
+  schema,
+  onChange,
+  sourceLocale = schema.defaultLocale ?? "en",
+  targetLocale,
+  translationAdapter,
+  readOnly = false
+}) {
+  const [draftSchema, setDraftSchema] = useState4(schema);
+  const [selectedLocale, setSelectedLocale] = useState4(targetLocale ?? "");
+  const [isTranslating, setIsTranslating] = useState4(false);
+  const [error, setError] = useState4();
+  const currentSchema = onChange === void 0 ? draftSchema : schema;
+  const targetLocales = useMemo3(() => {
+    const locales = collectSchemaLocales2(currentSchema).allUniqueLocales;
+    return [.../* @__PURE__ */ new Set([...currentSchema.supportedLocales ?? [], ...locales])].filter(
+      (locale) => locale !== sourceLocale
+    );
+  }, [currentSchema, sourceLocale]);
+  const activeLocale = selectedLocale.length > 0 ? selectedLocale : targetLocales[0] ?? "";
+  const slots = useMemo3(
+    () => activeLocale.length === 0 ? [] : collectTranslationSlots(currentSchema, activeLocale),
+    [activeLocale, currentSchema]
+  );
+  const summary = useMemo3(() => {
+    const counts = {
+      missing: 0,
+      translated: 0,
+      stale: 0,
+      manual: 0,
+      "manual-stale": 0
+    };
+    for (const slot of slots) counts[slot.status ?? "missing"] += 1;
+    const complete = counts.translated + counts.manual;
+    return {
+      totalSlots: slots.length,
+      translatedCount: complete,
+      missingCount: counts.missing,
+      staleCount: counts.stale + counts["manual-stale"],
+      manualCount: counts.manual + counts["manual-stale"],
+      completionPercentage: slots.length === 0 ? 100 : Math.round(complete / slots.length * 100)
+    };
+  }, [slots]);
+  const commit = useCallback3(
+    (next) => {
+      setDraftSchema(next);
+      onChange?.(next);
+    },
+    [onChange]
+  );
+  const setTranslation = useCallback3(
+    (slot, text) => {
+      if (readOnly) return;
+      commit(updateSchemaTranslation(currentSchema, slot, text, sourceLocale));
+    },
+    [commit, currentSchema, readOnly, sourceLocale]
+  );
+  const addLocale = useCallback3(
+    (locale) => {
+      if (readOnly || locale.trim().length === 0) return;
+      const normalized = locale.trim();
+      commit({
+        ...currentSchema,
+        supportedLocales: [.../* @__PURE__ */ new Set([...currentSchema.supportedLocales ?? [], normalized])]
+      });
+      setSelectedLocale(normalized);
+    },
+    [commit, currentSchema, readOnly]
+  );
+  const removeLocale = useCallback3(
+    (locale) => {
+      if (readOnly || locale === sourceLocale) return;
+      commit({
+        ...currentSchema,
+        supportedLocales: (currentSchema.supportedLocales ?? []).filter((candidate) => candidate !== locale)
+      });
+      if (activeLocale === locale) setSelectedLocale("");
+    },
+    [activeLocale, commit, currentSchema, readOnly, sourceLocale]
+  );
+  const translateAll = useCallback3(
+    async (options = {}) => {
+      if (translationAdapter === void 0) throw new Error("A translation adapter is required.");
+      if (activeLocale.length === 0) throw new Error("A target locale is required.");
+      setIsTranslating(true);
+      setError(void 0);
+      try {
+        const populated = await populateSchemaTranslations2(
+          currentSchema,
+          [activeLocale],
+          asAsyncAdapter(translationAdapter),
+          {
+            overwrite: "stale-and-missing",
+            preserveManualTranslations: true,
+            ...options
+          }
+        );
+        commit(populated.schema);
+        return populated.report;
+      } catch (cause) {
+        const message = cause instanceof Error ? cause.message : String(cause);
+        setError(message);
+        throw cause;
+      } finally {
+        setIsTranslating(false);
+      }
+    },
+    [activeLocale, commit, currentSchema, translationAdapter]
+  );
+  const translateSlot = useCallback3(
+    async (slot) => {
+      if (translationAdapter === void 0) throw new Error("A translation adapter is required.");
+      if (readOnly) return;
+      setIsTranslating(true);
+      setError(void 0);
+      try {
+        const text = await asAsyncAdapter(translationAdapter).translateText(slot.sourceText, slot.locale, sourceLocale);
+        commit(updateSchemaTranslation(currentSchema, slot, text, sourceLocale));
+      } catch (cause) {
+        const message = cause instanceof Error ? cause.message : String(cause);
+        setError(message);
+        throw cause;
+      } finally {
+        setIsTranslating(false);
+      }
+    },
+    [commit, currentSchema, readOnly, sourceLocale, translationAdapter]
+  );
+  return {
+    sourceLocale,
+    targetLocale: activeLocale,
+    targetLocales,
+    setTargetLocale: setSelectedLocale,
+    slots,
+    summary,
+    addLocale,
+    removeLocale,
+    setTranslation,
+    translateAll,
+    translateSlot,
+    isTranslating,
+    ...error === void 0 ? {} : { error }
+  };
+}
+
 // src/receipt.ts
-import { useEffect as useEffect2, useMemo as useMemo3, useState as useState3 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo4, useState as useState5 } from "react";
 function submissionReceiptQueryKey(formId, formVersion) {
   return `${formId}:v${formVersion}`;
 }
@@ -3193,14 +3534,14 @@ function createLocalStorageSubmissionReceiptStore(options = {}) {
 }
 function useSubmissionReceipts(store, queries) {
   const querySignature = JSON.stringify(queries.map(({ formId, formVersion }) => [formId, formVersion]));
-  const stableQueries = useMemo3(() => {
+  const stableQueries = useMemo4(() => {
     const parsed = JSON.parse(querySignature);
     if (!Array.isArray(parsed)) return [];
     return parsed.flatMap(
       (entry) => Array.isArray(entry) && typeof entry[0] === "string" && typeof entry[1] === "number" && Number.isSafeInteger(entry[1]) ? [{ formId: entry[0], formVersion: entry[1] }] : []
     );
   }, [querySignature]);
-  const [state, setState] = useState3({
+  const [state, setState] = useState5({
     receipts: /* @__PURE__ */ new Map(),
     isLoading: stableQueries.length > 0,
     error: null
@@ -3245,14 +3586,22 @@ import {
 } from "@form-engine-ts/core";
 import {
   Fragment as Fragment2,
-  useCallback as useCallback3,
+  useCallback as useCallback4,
   useEffect as useEffect3,
   useId,
-  useMemo as useMemo4,
+  useMemo as useMemo5,
   useRef as useRef2,
-  useState as useState4
+  useState as useState6
 } from "react";
 import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var isChoiceFieldType = (type) => type === "radio" || type === "checkbox" || type === "multi-select" || type === "select";
+function resolveChoiceFieldLayout(type, appearance, groupedChoiceFieldsLegacy = false) {
+  if (groupedChoiceFieldsLegacy) return "grouped";
+  const config = appearance?.choiceField;
+  if (config === void 0) return "default";
+  if (typeof config === "string") return config;
+  return config[type] ?? "default";
+}
 function describedBy(field, error, helpId, errorId) {
   const ids = [field.description === void 0 ? void 0 : helpId, error === void 0 ? void 0 : errorId].filter(
     Boolean
@@ -3280,51 +3629,98 @@ function GroupedChoiceDescription({ props }) {
 function GroupedChoiceError({ props }) {
   return props.error === void 0 ? null : /* @__PURE__ */ jsx3("div", { id: props.errorId, className: "fe-field-error", role: "alert", children: props.translate(props.error.messageKey, props.error.params) });
 }
+function ChoiceGroupFrame({
+  props,
+  children,
+  className,
+  slotProps,
+  renderChoiceGroup,
+  disabled,
+  readOnly
+}) {
+  const { field, error, translate } = props;
+  const groupError = error === void 0 ? void 0 : { ...error, message: translate(error.messageKey, error.params) };
+  const groupProps = {
+    field,
+    title: field.title,
+    ...field.description === void 0 ? {} : { description: field.description },
+    ...field.required === void 0 ? {} : { required: field.required },
+    ...groupError === void 0 ? {} : { error: groupError },
+    ...disabled === void 0 ? {} : { disabled },
+    ...readOnly === void 0 ? {} : { readOnly },
+    children,
+    className
+  };
+  if (renderChoiceGroup !== void 0) return /* @__PURE__ */ jsx3(Fragment3, { children: renderChoiceGroup(groupProps) });
+  return (
+    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: The grouped fieldset exposes the required state for the complete choice question.
+    /* @__PURE__ */ jsxs2(
+      "fieldset",
+      {
+        className,
+        "data-field-id": field.id,
+        disabled,
+        "aria-describedby": describedBy(field, error, props.helpId, props.errorId),
+        "aria-invalid": Boolean(error),
+        "aria-required": field.required,
+        style: slotProps?.style,
+        children: [
+          /* @__PURE__ */ jsxs2("legend", { className: "fe-choice-legend", children: [
+            field.title,
+            /* @__PURE__ */ jsx3(RequiredMark, { required: field.required, className: "fe-required-badge" })
+          ] }),
+          /* @__PURE__ */ jsx3(GroupedChoiceDescription, { props }),
+          children,
+          /* @__PURE__ */ jsx3(GroupedChoiceError, { props })
+        ]
+      }
+    )
+  );
+}
 function DefaultField({
   groupedChoiceFields,
+  appearance,
+  choiceGroupSlotProps,
+  renderChoiceGroup,
+  disabled,
+  readOnly,
   ...props
 }) {
   const { field, value, setValue, inputId, error, translate } = props;
+  const isGroupedChoiceField = isChoiceFieldType(field.type) && resolveChoiceFieldLayout(field.type, appearance, groupedChoiceFields) === "grouped";
+  const choiceGroupClassName = ["fe-choice-group", `fe-field--${field.type}`, choiceGroupSlotProps?.className].filter((item) => item !== void 0 && item.length > 0).join(" ");
   const ariaProps = {
     "aria-describedby": describedBy(field, error, props.helpId, props.errorId),
     "aria-invalid": error === void 0 ? void 0 : true
   };
   if (field.type === "checkbox") {
-    if (groupedChoiceFields) {
-      return (
-        // biome-ignore lint/a11y/useAriaPropsSupportedByRole: The grouped fieldset exposes the required state for the complete choice question.
-        /* @__PURE__ */ jsxs2(
-          "fieldset",
-          {
-            className: "fe-choice-group fe-field--checkbox",
-            "data-field-id": field.id,
-            "aria-describedby": describedBy(field, error, props.helpId, props.errorId),
-            "aria-invalid": Boolean(error),
-            "aria-required": field.required,
-            children: [
-              /* @__PURE__ */ jsxs2("legend", { className: "fe-choice-legend", children: [
-                field.title,
-                /* @__PURE__ */ jsx3(RequiredMark, { required: field.required, className: "fe-required-badge" })
-              ] }),
-              /* @__PURE__ */ jsx3(GroupedChoiceDescription, { props }),
-              /* @__PURE__ */ jsx3("div", { className: "fe-choice-options", children: /* @__PURE__ */ jsxs2("label", { className: "fe-choice-option", htmlFor: inputId, children: [
-                /* @__PURE__ */ jsx3(
-                  "input",
-                  {
-                    id: inputId,
-                    name: field.id,
-                    type: "checkbox",
-                    checked: value === true,
-                    "aria-label": field.title,
-                    onChange: (event) => setValue(event.currentTarget.checked)
-                  }
-                ),
-                /* @__PURE__ */ jsx3("span", { children: field.title })
-              ] }) }),
-              /* @__PURE__ */ jsx3(GroupedChoiceError, { props })
-            ]
-          }
-        )
+    if (isGroupedChoiceField) {
+      return /* @__PURE__ */ jsx3(
+        ChoiceGroupFrame,
+        {
+          props,
+          className: choiceGroupClassName,
+          slotProps: choiceGroupSlotProps,
+          renderChoiceGroup,
+          disabled,
+          readOnly,
+          children: /* @__PURE__ */ jsx3("div", { className: "fe-choice-options", children: /* @__PURE__ */ jsxs2("label", { className: "fe-choice-option", htmlFor: inputId, children: [
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                id: inputId,
+                name: field.id,
+                type: "checkbox",
+                checked: value === true,
+                "aria-label": field.title,
+                disabled,
+                readOnly,
+                onChange: (event) => setValue(event.currentTarget.checked)
+              }
+            ),
+            /* @__PURE__ */ jsx3("span", { children: field.title })
+          ] }) })
+        }
       );
     }
     return /* @__PURE__ */ jsxs2("div", { className: "fe-field fe-field--checkbox", "data-field-id": field.id, children: [
@@ -3350,56 +3746,55 @@ function DefaultField({
   }
   if (field.type === "radio" || field.type === "multi-select") {
     const selected = Array.isArray(value) ? value : [];
-    if (field.type === "radio" && groupedChoiceFields) {
-      return (
-        // biome-ignore lint/a11y/useAriaPropsSupportedByRole: The grouped fieldset exposes the required state for the complete choice question.
-        /* @__PURE__ */ jsxs2(
-          "fieldset",
-          {
-            className: "fe-choice-group fe-field--radio",
-            "data-field-id": field.id,
-            "aria-describedby": describedBy(field, error, props.helpId, props.errorId),
-            "aria-invalid": Boolean(error),
-            "aria-required": field.required,
-            children: [
-              /* @__PURE__ */ jsxs2("legend", { className: "fe-choice-legend", children: [
-                field.title,
-                /* @__PURE__ */ jsx3(RequiredMark, { required: field.required, className: "fe-required-badge" })
-              ] }),
-              /* @__PURE__ */ jsx3(GroupedChoiceDescription, { props }),
-              /* @__PURE__ */ jsx3("div", { className: "fe-choice-options", children: field.options.map((option, index) => {
-                const optionId = `${inputId}-${index}`;
-                const checked = value === option.id;
-                return /* @__PURE__ */ jsxs2("label", { className: "fe-choice-option", htmlFor: optionId, children: [
-                  /* @__PURE__ */ jsx3(
-                    "input",
-                    {
-                      id: optionId,
-                      name: field.id,
-                      type: "radio",
-                      value: option.id,
-                      checked,
-                      onKeyDown: (event) => {
-                        if (event.key !== "ArrowDown" && event.key !== "ArrowRight" && event.key !== "ArrowUp" && event.key !== "ArrowLeft")
-                          return;
-                        event.preventDefault();
-                        const offset = event.key === "ArrowDown" || event.key === "ArrowRight" ? 1 : -1;
-                        const nextIndex = (index + offset + field.options.length) % field.options.length;
-                        const nextOption = field.options[nextIndex];
-                        if (nextOption === void 0) return;
-                        setValue(nextOption.id);
-                        document.getElementById(`${inputId}-${nextIndex}`)?.focus();
-                      },
-                      onChange: () => setValue(option.id)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx3("span", { children: option.label })
-                ] }, option.id);
-              }) }),
-              /* @__PURE__ */ jsx3(GroupedChoiceError, { props })
-            ]
-          }
-        )
+    if (isGroupedChoiceField) {
+      const isRadio = field.type === "radio";
+      return /* @__PURE__ */ jsx3(
+        ChoiceGroupFrame,
+        {
+          props,
+          className: choiceGroupClassName,
+          slotProps: choiceGroupSlotProps,
+          renderChoiceGroup,
+          disabled,
+          readOnly,
+          children: /* @__PURE__ */ jsx3("div", { className: "fe-choice-options", children: field.options.map((option, index) => {
+            const optionId = `${inputId}-${index}`;
+            const checked = isRadio ? value === option.id : selected.includes(option.id);
+            return /* @__PURE__ */ jsxs2("label", { className: "fe-choice-option", htmlFor: optionId, children: [
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  id: optionId,
+                  name: field.id,
+                  type: isRadio ? "radio" : "checkbox",
+                  value: option.id,
+                  checked,
+                  disabled,
+                  readOnly,
+                  onKeyDown: isRadio ? (event) => {
+                    if (event.key !== "ArrowDown" && event.key !== "ArrowRight" && event.key !== "ArrowUp" && event.key !== "ArrowLeft")
+                      return;
+                    event.preventDefault();
+                    const offset = event.key === "ArrowDown" || event.key === "ArrowRight" ? 1 : -1;
+                    const nextIndex = (index + offset + field.options.length) % field.options.length;
+                    const nextOption = field.options[nextIndex];
+                    if (nextOption === void 0) return;
+                    setValue(nextOption.id);
+                    document.getElementById(`${inputId}-${nextIndex}`)?.focus();
+                  } : void 0,
+                  onChange: (event) => {
+                    if (isRadio) setValue(option.id);
+                    else
+                      setValue(
+                        event.currentTarget.checked ? [...selected, option.id] : selected.filter((item) => item !== option.id)
+                      );
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx3("span", { children: option.label })
+            ] }, option.id);
+          }) })
+        }
       );
     }
     if (field.type === "radio") {
@@ -3536,6 +3931,7 @@ function DefaultField({
         ...ariaProps,
         id: inputId,
         name: field.id,
+        disabled,
         value: typeof value === "string" ? value : "",
         onChange: (event) => setValue(event.currentTarget.value || void 0),
         children: [
@@ -3559,6 +3955,20 @@ function DefaultField({
       }
     );
   }
+  if (isGroupedChoiceField) {
+    return /* @__PURE__ */ jsx3(
+      ChoiceGroupFrame,
+      {
+        props,
+        className: choiceGroupClassName,
+        slotProps: choiceGroupSlotProps,
+        renderChoiceGroup,
+        disabled,
+        readOnly,
+        children: /* @__PURE__ */ jsx3("div", { className: "fe-choice-options", children: control })
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs2("div", { className: `fe-field fe-field--${field.type}`, "data-field-id": field.id, children: [
     label,
     control,
@@ -3679,6 +4089,7 @@ function ContextFormRenderer({
   onDraftSave,
   successRenderMode = "append",
   appearance,
+  slotProps,
   groupedChoiceFields = false,
   submissionConfirmation,
   submissionConfirmationRenderMode,
@@ -3692,42 +4103,41 @@ function ContextFormRenderer({
   slots = {}
 }) {
   const form = useForm();
-  const isGroupedMode = appearance?.choiceField === "grouped" || groupedChoiceFields;
   const prefix = useId().replace(/:/g, "");
   const formRef = useRef2(null);
   const loadedDraftKey = useRef2(null);
-  const [draftRestored, setDraftRestored] = useState4(false);
-  const [currentPageIndex, setCurrentPageIndex] = useState4(0);
-  const [focusFieldId, setFocusFieldId] = useState4(null);
-  const [confirmation, setConfirmation] = useState4(null);
-  const [guardMessage, setGuardMessage] = useState4(null);
-  const [guardsPending, setGuardsPending] = useState4(false);
-  const [receipt, setReceipt] = useState4(null);
-  const [completionData, setCompletionData] = useState4(null);
-  const [receiptLoaded, setReceiptLoaded] = useState4(receiptStore === void 0);
+  const [draftRestored, setDraftRestored] = useState6(false);
+  const [currentPageIndex, setCurrentPageIndex] = useState6(0);
+  const [focusFieldId, setFocusFieldId] = useState6(null);
+  const [confirmation, setConfirmation] = useState6(null);
+  const [guardMessage, setGuardMessage] = useState6(null);
+  const [guardsPending, setGuardsPending] = useState6(false);
+  const [receipt, setReceipt] = useState6(null);
+  const [completionData, setCompletionData] = useState6(null);
+  const [receiptLoaded, setReceiptLoaded] = useState6(receiptStore === void 0);
   const rendererSubmissionInFlight = useRef2(false);
   const fallbackAttemptId = useRef2(null);
   const completionRef = useRef2(null);
   const confirmationRef = useRef2(null);
   const pages = form.schema.pages;
-  const visiblePageIndexes = useMemo4(
+  const visiblePageIndexes = useMemo5(
     () => 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);
-  const visibleValues = useMemo4(() => selectVisibleAnswers2(form.schema, form.values), [form.schema, form.values]);
-  const visibleItems = useMemo4(
+  const visibleValues = useMemo5(() => selectVisibleAnswers2(form.schema, form.values), [form.schema, form.values]);
+  const visibleItems = useMemo5(
     () => buildSubmittedItems(form.schema, form.values, form.visibility, (key) => form.translate(key), false),
     [form.schema, form.translate, form.values, form.visibility]
   );
-  const confirmationRenderMode = submissionConfirmation?.renderMode ?? submissionConfirmationRenderMode ?? "inline";
-  const confirmationEnabled = submissionConfirmation?.enabled === true;
+  const confirmationRenderMode = submissionConfirmation?.renderMode ?? submissionConfirmationRenderMode ?? form.schema.submissionSettings?.confirmationRenderMode ?? "inline";
+  const confirmationEnabled = submissionConfirmation?.enabled ?? form.schema.submissionSettings?.showConfirmationBeforeSubmit ?? false;
   const submitState = confirmation === null && !guardsPending ? form.submitStatus : "confirming";
   const interactionLocked = submitState === "confirming" || submitState === "submitting";
   const isReplaceMode = successRenderMode === "replace" || hideFormOnSuccess;
-  const resolveMessage = useCallback3(
+  const resolveMessage = useCallback4(
     (key, fallback) => {
       const defaultText = fallback ?? DEFAULT_RENDERER_MESSAGES[form.locale.toLowerCase().startsWith("ja") ? "ja" : "en"][key] ?? key;
       const configured = messages[key];
@@ -3735,11 +4145,11 @@ function ContextFormRenderer({
     },
     [form.locale, messageResolver, messages]
   );
-  const fieldTranslate = useCallback3(
+  const fieldTranslate = useCallback4(
     (key, params) => key === "validation.required" && (messages.requiredField !== void 0 || messageResolver !== void 0) ? resolveMessage("requiredField") : form.translate(key, params),
     [form.translate, messageResolver, messages.requiredField, resolveMessage]
   );
-  const focusSubmitButton = useCallback3(() => {
+  const focusSubmitButton = useCallback4(() => {
     const button = formRef.current?.querySelector(".fe-submit, button[type='submit'], button");
     button?.focus();
   }, []);
@@ -4199,7 +4609,18 @@ function ContextFormRenderer({
                 }) }, field.id);
               }
               const Component = components[field.type];
-              return Component === void 0 ? /* @__PURE__ */ jsx3(DefaultField, { ...props, groupedChoiceFields: isGroupedMode }, field.id) : /* @__PURE__ */ jsx3(Component, { ...props }, field.id);
+              return Component === void 0 ? /* @__PURE__ */ jsx3(
+                DefaultField,
+                {
+                  ...props,
+                  groupedChoiceFields,
+                  appearance,
+                  choiceGroupSlotProps: slotProps?.choiceGroup,
+                  renderChoiceGroup: slots.renderChoiceGroup,
+                  disabled: interactionLocked
+                },
+                field.id
+              ) : /* @__PURE__ */ jsx3(Component, { ...props }, field.id);
             });
             const fieldClassName = `fe-fields${fieldsClassName === void 0 ? "" : ` ${fieldsClassName}`}`;
             return slots.renderFields?.({ children: fieldChildren, className: fieldClassName }) ?? /* @__PURE__ */ jsx3("div", { className: fieldClassName, children: fieldChildren });
@@ -4338,6 +4759,7 @@ export {
   createLocalStorageSubmissionAttemptStore,
   createLocalStorageSubmissionReceiptStore,
   isTranslationUnresolved,
+  resolveChoiceFieldLayout,
   resolveFieldEditorControls,
   resolveFieldTypeSelectOptions,
   resolveInitialFieldType,
@@ -4346,5 +4768,6 @@ export {
   useField,
   useForm,
   useFormBuilder,
-  useSubmissionReceipts
+  useSubmissionReceipts,
+  useTranslationWorkspace
 };